/* ════════════════════════════════════════════════════════════════
   fs-wide.css — 画面の幅いっぱいに使う（2026-10-13）
   ─ 大きいモニター（フル HD＝表示の幅 1903px）で左右に余っていた白い余白をなくし、
     白い帯・左メニュー・本文を画面の端から端まで使う。
   ─ pf.css（.pf-stage の 1600px）と fs-shell.css（.l1-frame の 1600px）は変えない。
     あとから読み込むこのファイルが、印の付いた画面だけ上書きする。
     印の無い画面は、今までどおり 1600px で中央に寄る。
   ─ 印は base.html の外枠（.l1-frame）に付く。画面の側で {% block layout_width %} を書いて選ぶ:
       （何も書かない）                              … layout-wide            ＝画面いっぱい（既定）
       {% block layout_width %} layout-wide layout-wide-form{% endblock %}
                                                    … 外枠は画面いっぱい、本文だけ 1300px で左寄せ（入力欄が主役の画面）
       {% block layout_width %}{% endblock %}       … 印なし＝今までの 1600px（工程表：自分の決まり koutei-frame.css を持つ）
     ⚠ block の中身は、先頭に空白を 1 つ入れる（class="l1-frame layout-wide" の区切りになる）。
   ─ 変わるのは、窓の幅が 1600px を超えるときだけ。
       ・1400px 未満（ノート PC・スマホ＝1360px で描く）: 左メニューは畳まれ、もともと上限に届いていない
       ・1400〜1600px（フル HD を 125% に拡大した 1536px など）: 同じく上限に届いていない
   ─ 外枠を使わない画面（ログイン系・A4 の帳票のプレビュー・印刷用）には、もともと効かない。
   ─ 名前は layout-wide で始める（ほかの CSS の名前とぶつけない）。
   ─ 見張り: tests/test_layout_wide.py。見本: docs/design_proposals/wide_layout/
   ════════════════════════════════════════════════════════════════ */

/* ---------- 外枠：1600px の上限を外す ---------- */
.l1-frame.layout-wide { max-width: none; }
.l1-frame.layout-wide .pf-stage { max-width: none; }

/* ---------- ホーム：4 つの部分を 1 つの格子に置く（portal.html） ----------
   2026-10-17 に「週間天気」→「週間スケジュール」（wk）、「これからの予定」→「1日のタイムライン」に作り替えた。
   2026-10-22 に上の段と下の段の間の数字の段（kp）をやめた。
   2026-10-24 に「1日のタイムライン」（右の 400px の列）をやめ、空いた分だけ週間スケジュールを横に広げた。
   1200px 以上 … カレンダー｜週間スケジュール（4:8）→ ワークフロー｜掲示板（6:6）。
                 すき間 24px は、今までの Bootstrap の .row.g-4 / .mb-4 と同じ。
   部分の並び順（HTML）は、どの幅でも同じ。 */
.layout-wide-home {
  display: grid; gap: 24px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "cal cal cal cal wk  wk  wk  wk  wk  wk  wk  wk"
    "wf  wf  wf  wf  wf  wf  bd  bd  bd  bd  bd  bd";
}
.layout-wide-home > .layout-wide-cal { grid-area: cal; }
.layout-wide-home > .layout-wide-wk  { grid-area: wk; }
.layout-wide-home > .layout-wide-wf  { grid-area: wf; }
.layout-wide-home > .layout-wide-bd  { grid-area: bd; }

/* ---------- 月ごとのスケジュール（schedule.html・2026-10-17） ----------
   1200px 以上 … 月のマス目｜1日のタイムライン（340px・2026-10-24 に 400px から細くした）。
                 タイムラインの枠は月の枠と同じ高さ（stretch）で、中の時間の軸だけがスクロールする（fs-home.css の .sch-month）。
   1200px 未満 … タイムラインはマス目の下（全幅）。決まりは下の「1200px 未満」の中。
   スマホは 1360px で描くので、1200px 以上の並び。 */
.layout-wide-sched { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; }

/* ---------- 全員の週（schedule_team.html・2026-10-17） ----------
   1200px 以上 … 表｜1日のタイムライン（360px。表の 1 日の列を 1440px の窓でも 85px ほど残すため、月の画面より細い）。
   1200px 未満 … タイムラインは表の下（全幅）。決まりは下の「1200px 未満」の中。 */
.layout-wide-team { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
/* 下へスクロールしても見やすく（2026-10-18）：1200px 以上（表｜タイムラインの並び）のときだけ。
   ・右のタイムラインは、白い帯（--fs-top-h）の 12px 下に止まって付いてくる。画面より高いときは画面の高さに収め、
     タイムラインの中（#tlRoot）だけがスクロールする。マスを押しても画面は動かない（home-schedule.js は面を切り替えるだけ）。
     高さの上限の 48px ＝ 上のすき間 12px ＋ 本文の下の余白 32px ＋ 少し。いちばん下までスクロールしても、表の枠の終わりに押し上げられて
     白い帯の下に潜らないように。
   ・表の見出しの行（名前・日付）は、白い帯のすぐ下に止まる。下を流れる行が透けないよう、地とセルのすき間（3px）は
     白で埋めてある（色は fs-home.css の .tm thead th）。
   ・1200px 未満（タイムラインが表の下）は付いてこない。スマホは 1360px で描くので、1200px 以上の並びで付いてくる。 */
@media (min-width: 1200px) {
  .layout-wide-team > .layout-wide-tl { position: sticky; top: calc(var(--fs-top-h, 72px) + 12px); z-index: 2; }
  .layout-wide-team > .layout-wide-tl > .pn { max-height: calc(100vh - var(--fs-top-h, 72px) - 48px); }
  .layout-wide-team > .layout-wide-tl #tlRoot { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .layout-wide-team .tm thead th { position: sticky; top: var(--fs-top-h, 72px); z-index: 3; }
}

@media (min-width: 1600px) {
  /* ---------- 入力欄が主役の画面：本文だけ上限を付けて左に寄せる ----------
     画面いっぱいにすると、入力欄 1 つが 760px ほどまで横に伸びて間延びする。
     本文の中身を 1300px（今までの 1276px とほぼ同じ）で止め、左メニューのすぐ右から始める。
     ⚠ 1364 = 中身 1300 ＋ 左右の余白 32 × 2（fs-shell.css の .l1-main .main-content > .pf-stage の padding）。
       余白を変えるときは、ここもそろえる（tests/test_layout_wide.py が食い違いを検出する）。
     ⚠ 1600px 以上のときだけにする。左メニューが畳まれる 1400px 未満では本文が窓いっぱい（1366px の窓なら 1366px）で、
       ここに置かないと 1364px で止まってしまい、ノート PC の見え方が 2px 変わる。 */
  .l1-frame.layout-wide.layout-wide-form .l1-main .main-content > .pf-stage { max-width: 1364px; margin-inline: 0 auto; }

  /* ---------- 業務スキル：カードを 3 列 → 4 列（skills.html・fs-home.css の .sk-grid） ----------
     3 列のまま広げると、カード 1 枚が 500px を超えて間延びする。4 列で 1 枚 380px ほど（今までは 410px ほど）。 */
  .l1-frame.layout-wide .sk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- ホーム：窓の幅が 1200px 未満（2026-10-17・2026-10-24 にタイムラインを外した） ----------
   1200px 未満 … 週間スケジュールを全幅（7 列のまま詰める）→ カレンダー｜ワークフロー（4:8）→ 掲示板（全幅）
   スマホ・タブレットは、ほかの画面と同じく 1360px で描いて縮める（base.html の viewport）ので、ここは効かない
   （1360px は 1200〜1599px の並び）。効くのは PC の窓を狭めたときと、開発確認用の ?w=（800〜1199）のとき。
   スマホ用（767px 以下）の 1 列の縦積みは、2026-10-17 にやめた（利用者の決定）。 */
@media (max-width: 1199.98px) {
  .layout-wide-sched { grid-template-columns: minmax(0, 1fr); }
  .layout-wide-team { grid-template-columns: minmax(0, 1fr); }
  .layout-wide-home {
    grid-template-areas:
      "wk  wk  wk  wk  wk  wk  wk  wk  wk  wk  wk  wk"
      "cal cal cal cal wf  wf  wf  wf  wf  wf  wf  wf"
      "bd  bd  bd  bd  bd  bd  bd  bd  bd  bd  bd  bd";
  }
}