/* ════════════════════════════════════════════════════════════════
   fs-shell.css — 新しい共通デザインの「外枠」（デザインの決まり 確定版・第2版）
   ─ 白い帯（左端にロゴ）＋暗い藍の左メニューと、ログイン系の画面の枠。チャットは白い帯の中（ベルの右）。
   ─ 元: docs/design_proposals/brand/brand.css ＋ brand-d.css（おすすめ案）の .gtop / .side / .bl2。
     見本の部品名は .top / .side / .main / .body と短く、今ある画面の部品名とぶつかりやすいので、
     外枠だけは .l1-*（ログイン系は .lg-*）の名前にしてある。
   ─ 見本と違う所:
       ・全体の幅は、ここでは左メニュー込みで 1600px。2026-10-13 から、印 layout-wide の付いた画面は
         fs-wide.css がこの上限を外して画面いっぱいにする（見本と同じ。今は工程表を除く全部の画面）
       ・画面の幅が 1400px 未満（スマホは 1360px で描く）では左メニューを畳み、
         白い帯の「メニュー」ボタンで開け閉めする（最初は閉じている）
       ・白い帯にお知らせベル（資格者証の期限）がある（見本には無い。今ある機能なので残す）
   ─ 外枠の文字・ボタンの大きさはここで直接決める（fs-size.css の目印に頼らない）。
     外枠だけ先に全画面へ広げても、外枠の見た目が画面ごとに変わらないようにするため。
   ─ 色の変数（--fs-*）は fs-color.css の body.fs-theme が決める。外枠を使う画面は必ず fs-theme。
   ─ ロゴは白い帯の上だけに置く。青い地（左メニュー・ログインの左の面）には置かない（決まり 9.）。
   ─ 変更の一覧: docs/DESIGN_SHARED_PARTS.md
   ════════════════════════════════════════════════════════════════ */

/* ---------- 全体：白い帯＋（左メニュー｜本文） ---------- */
/* ⚠ 1600 は pf.css の .pf-stage（PC の幅の上限）と同じ値。変えるときは両方そろえる
   （tests/test_design_shell.py が食い違いを検出する）。
   ⚠ この 1600 が効くのは、外枠に印 layout-wide の無い画面だけ（2026-10-13・fs-wide.css・tests/test_layout_wide.py）。 */
.l1-frame { max-width: 1600px; margin-inline: auto; min-height: 100vh; display: flex; flex-direction: column; }

/* 白い帯（高さ 72px）：左端にロゴ、検索、右にお知らせベル・チャット・名前・ログアウト */
.l1-gtop {
  position: sticky; top: 0; z-index: 1030;
  height: 72px; flex-shrink: 0; background: var(--fs-surface); border-bottom: 1px solid var(--fs-border);
  display: flex; align-items: center; gap: 16px; padding: 0 32px 0 0;
}
.l1-brand { width: 260px; flex-shrink: 0; height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 22px; text-decoration: none; }
.l1-brand img { height: 34px; width: auto; }
.l1-brand .app { font-weight: 700; font-size: 1.125rem; color: var(--fs-logo); }
.l1-gtop .btn { --bs-btn-font-weight: 700; --bs-btn-font-size: 1rem; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1.125rem; --bs-btn-border-radius: 8px; min-height: 48px; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.l1-search { max-width: 380px; flex-wrap: nowrap; }
.l1-search .input-group-text { min-height: 48px; border-color: #8F94A3; color: var(--fs-muted); background: var(--fs-surface); }
.l1-search .form-control { min-height: 48px; font-size: 1rem; border-color: #8F94A3; background: var(--fs-surface); }
.l1-search .form-control:disabled { background: var(--fs-soft); color: var(--fs-muted); }
/* 見本のとき：文字は打てるが、まだ探せない。押したり打ったりしている間だけ、欄のすぐ下に「準備中」の案内を出す
   （白い地・灰の線・アイコン＋言葉）。案内を欄の後ろに置くので、入力欄の右の角の丸みを戻す。 */
.l1-search .form-control { border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important; }
.l1-search-soon { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 1040; align-items: center; gap: 6px; background: var(--fs-surface); color: var(--fs-ink); border: 1px solid #9CA1AF; border-radius: 4px; padding: 4px 10px; font-size: .875rem; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.l1-search-soon .bi { color: var(--fs-logo); }
.l1-search:focus-within .l1-search-soon { display: inline-flex; }
.l1-user { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 1rem; color: var(--fs-ink); }
.l1-user .bi { font-size: 1.25rem; }
.l1-user .role { font-size: .875rem; color: var(--fs-muted); margin-left: 4px; }
/* お知らせベル（base.html の .pf-bell-*）を白い帯の上に置くときの色 */
.l1-gtop .pf-bell-toggle { color: var(--fs-ink); padding: 8px 10px; min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.l1-gtop .pf-bell-toggle:hover { color: var(--fs-logo); }
.l1-gtop .pf-bell-toggle i { font-size: 1.375rem; }
/* ベルを開いた中の、明るい青の文字と水色の地（base.html の直書き）→ 墨と淡い灰 */
.l1-gtop .pf-bell-foot { color: var(--fs-ink); }
.l1-gtop .pf-bell-foot:hover, .l1-gtop .pf-bell-item:hover { background: var(--fs-soft); }
.l1-gtop .pf-bell-badge-warn { background: #8A5300; color: #fff; }
.l1-gtop .pf-bell-badge-exp, .l1-gtop .pf-bell-head-n { background: #B3261E; }
.l1-gtop .pf-bell-item-ico { background: #FFF6E5; color: #8A5300; }
.l1-gtop .pf-bell-count { top: 4px; right: 2px; border-color: #fff; background: #B3261E; font-size: .875rem; min-width: 22px; height: 22px; }
/* チャット（ベルのすぐ右）。大きさ・押せる範囲・アイコンの大きさはベル（上の .pf-bell-toggle）と同じ。
   未読の数（.l1-chat-n）は、ベルの数と同じ場所・同じ大きさで、色だけロゴの青（ベルのお知らせは赤のまま）。
   数は本物のチャットができたときだけ出す（見本の架空の数は出さない）。 */
.l1-chat { position: relative; min-width: 48px; min-height: 48px; padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 8px; color: var(--fs-ink); }
.l1-chat:hover { color: var(--fs-logo); }
.l1-chat:focus-visible { outline: 3px solid var(--fs-logo); outline-offset: -3px; }
.l1-chat .bi { font-size: 1.375rem; }
.l1-chat-n { position: absolute; top: 4px; right: 2px; min-width: 22px; height: 22px; padding: 0 5px; background: var(--fs-logo); color: #fff; border: 2px solid var(--fs-surface); border-radius: 20px; font-size: .875rem; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; }

.l1 { display: flex; flex: 1 1 auto; }

/* 左メニュー（幅 260px・暗い藍）。白い帯の下から始まる */
.l1-side {
  width: 260px; flex-shrink: 0; background: var(--fs-side); color: #fff;
  position: sticky; top: 72px; align-self: flex-start; height: calc(100vh - 72px); overflow-y: auto;
}
/* 中身。1400px 以上ではそのまま並び、未満では Bootstrap の offcanvas（左から出る引き出し）になる。 */
.l1-drawer {
  --bs-offcanvas-width: 288px; --bs-offcanvas-bg: var(--fs-side); --bs-offcanvas-color: #fff;
  display: flex; flex-direction: column; min-height: 100%; padding: 0 0 20px;
}
.l1-close { display: none; }

.l1-nav { padding: 18px 12px 14px; }
.l1-nav .cap { font-size: .875rem; color: var(--fs-side-cap); padding: 16px 12px 6px; letter-spacing: .08em; }
.l1-nav a, .l1-nav .soon {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px;
  color: #fff; text-decoration: none; border-radius: 8px; font-size: 1rem; line-height: 1.3;
}
.l1-nav a .bi, .l1-nav .soon .bi { color: var(--fs-side-ink); font-size: 1.1875rem; flex-shrink: 0; }
.l1-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.l1-nav a:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
/* 選んでいる項目：少し明るい地＋左に白い線 */
.l1-nav a.on { background: rgba(255,255,255,.14); box-shadow: inset 4px 0 0 #fff; font-weight: 700; }
.l1-nav a.on .bi { color: #fff; }
/* 件数（未読など）：白い丸の数字 */
.l1-nav a .n { margin-left: auto; background: #fff; color: var(--fs-logo); border-radius: 12px; padding: 0 8px; font-size: .875rem; font-weight: 700; line-height: 1.6; }
/* 準備中の機能：押せない行＋点線の札。数字は出さない */
.l1-nav .soon { color: var(--fs-side-ink); cursor: default; }
.l1-nav .s { margin-left: auto; font-size: .875rem; color: var(--fs-side-ink); border: 1px dashed rgba(255,255,255,.55); border-radius: 4px; padding: 0 6px; white-space: nowrap; line-height: 1.7; }

/* 一番下：歯車「設定」（fs-theme.css）と版数（2026-10-24 に「困ったら Factory君」のボタンをやめた） */
.l1-foot { margin-top: auto; padding: 12px 16px 0; }
.l1-ver { color: var(--fs-side-cap); font-size: .875rem; padding: 8px 6px 0; }

.l1-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* 本文。今の土台（style.css の .main-content）は「上の黒い帯 56px 分あける」作りなので、外枠の中では戻す。 */
.l1-main .main-content { margin-top: 0; min-height: 0; flex-grow: 1; }
.l1-main .main-content > .pf-stage { padding: 20px 32px 32px !important; }

/* ---------- 機能の中の切りかえ（タイトルの下の横並びのタブ）----------
   今までの「画面の中のもう 1 つの左メニュー」の代わり。外の左メニューと二重にならないようにする。
   選んでいるタブ＝ロゴの青の太字＋下にロゴの青の線（3px）＋アイコンもロゴの青（2026-10-12 に文字を墨からロゴの青へ）。
   1 行に収まらないときは折り返す。まとまりの見出し（.grp）で区切る。
   大きさはここで直接決める（今ある画面は fs-size を付けないため）。 */
.l1-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px 4px; border-bottom: 1px solid var(--fs-border); margin: 0 0 20px; }
.l1-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin-bottom: -1px; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; color: var(--fs-muted); font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.l1-tabs a .bi { font-size: 1.0625rem; }
.l1-tabs a:hover { background: var(--fs-soft); color: var(--fs-ink); }
.l1-tabs a:focus-visible { outline: 3px solid var(--fs-logo); outline-offset: -3px; }
.l1-tabs a.on { color: var(--fs-logo); font-weight: 700; border-bottom-color: var(--fs-logo); }
.l1-tabs a.on .bi { color: var(--fs-logo); }
/* タブのすぐ下の「上をあける」指定（今ある画面の .mt-4）は、タブの下の余白と二重になるので消す */
.l1-tabs + .mt-4 { margin-top: 0 !important; }
.l1-tabs .grp { display: inline-flex; align-items: center; margin-left: 12px; padding: 0 6px 0 16px; border-left: 1px solid var(--fs-border); color: var(--fs-muted); font-size: .875rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap; align-self: center; height: 24px; }

/* タブの列の右はしに寄せる小さい文字のリンク（契約書管理の「旧バージョン」など）。
   <span class="aside"> の中に <a> を置く。タブではないので、太字・角の形はタブと変える。 */
.l1-tabs .aside { margin-left: auto; display: inline-flex; align-items: center; gap: 4px 12px; color: var(--fs-muted); font-size: .875rem; white-space: nowrap; }
.l1-tabs .aside a { padding: 0 6px; border-radius: 8px; font-size: .875rem; font-weight: 400; text-decoration: underline; }
.l1-tabs .aside a .bi { font-size: 1rem; }
/* 右はしのリンクが今いる画面のとき（旧注文書の画面）：墨の太字・下線なし。タブの「選んでいる」印（青い下線）は付けない */
.l1-tabs .aside a[aria-current] { color: var(--fs-ink); font-weight: 700; text-decoration: none; }

/* ---------- 画面の見出し（templates/_page_head.html の page_head）----------
   上から「パンくず → アイコン＋見出し → 説明文 → 補足」。どの業務スキルの画面も同じ形にする。
   大きさは「デザインの決まり 第2版」のとおり（大見出し 24px・補足 14px）。外枠と同じく、ここで直接決める
   （fs-size の目印の無い画面でも同じ大きさで出るように）。色は fs-color.css の変数だけ。 */
.l1-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 8px; font-size: .875rem; color: var(--fs-muted); }
.l1-crumb a { color: var(--fs-muted); }
.l1-crumb a:hover { color: var(--fs-ink); }
.l1-crumb [aria-current] { color: var(--fs-ink); }
.l1-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.l1-head h1 { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--fs-ink); }
/* アイコンの箱：44px の角丸・青のうす色の地にロゴの青（数字の段・業務スキルのカードのアイコンと同じ色の組） */
.l1-head-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; background: var(--fs-tint); color: var(--fs-logo); display: flex; align-items: center; justify-content: center; font-size: 1.375rem; }
/* 右側に置くボタン（あるときだけ）。見出しが長いときは下の行に落ちる */
.l1-head-act { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.l1-head-sub { margin: 0 0 8px; font-size: .875rem; color: var(--fs-muted); }
.l1-head-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 8px; font-size: .875rem; color: var(--fs-muted); }
.l1-head-note .bi { color: var(--fs-logo); line-height: 1.65; }
/* 画面ごとの名前（小見出し）。見出し（h1）が機能の名前で共通の画面（SmartGreen）で、タブの下に置く。
   カードの名前と同じ 19px（決まりの h2）。アイコンは小さなアイコン＝ロゴの青 */
.l1-subhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; font-size: 1.1875rem; font-weight: 700; line-height: 1.4; color: var(--fs-ink); }
.l1-subhead > .bi { color: var(--fs-logo); }
/* 小見出しの横の小さい文字（件数・番号など）：補足の大きさと色 */
.l1-subhead small { font-size: .875rem; font-weight: 700; color: var(--fs-muted); }

/* ---------- 左メニューを畳んだ形（幅 64px・アイコンだけ・2026-10-18） ----------
   一番上の畳むボタン（.l1-fold・« ／ » のアイコンだけ。名前は aria-label と吹き出し）で開け閉めする。畳んだかどうかは外枠の印 l1-mini（base.html が cookie fs_side=min から描く）。
   ・効くのは窓の幅が 1400px 以上のときだけ。1400px 未満は今までどおり「メニュー」ボタンで出る引き出しで、畳むボタンも出さない。
   ・項目名（<span class="t">）は見た目だけ隠し、読み上げには残す。項目名は吹き出し（.l1-tip・fs-side.js）で見せる。
   ・「準備中」の札は、アイコンの右上の白い丸の砂時計（字は読み上げ用に残す）。区切りの見出しは細い線。
   ・今いる画面の印（明るい地＋左の白い線）は、畳んでもそのまま。
   ・幅は 0.2 秒で変える。動きを減らす設定の端末では動かさない。
   ・本文の並びは窓の幅で決めているので、畳んでも切り替わらない（本文が 196px 広がるだけ）。 */
.l1-fold { display: none; }
@media (min-width: 1400px) {
  .l1-side { transition: width .2s ease; overflow-x: hidden; }
  .l1-nav { padding-top: 6px; }
  .l1-nav a, .l1-nav .soon { white-space: nowrap; }
  .l1-fold {
    display: inline-flex; align-items: center; justify-content: center; align-self: flex-end;
    width: 48px; min-height: 48px; margin: 12px 12px 0; padding: 0;
    background: transparent; color: var(--fs-side-ink); border: 1px solid rgba(255,255,255,.35); border-radius: 8px;
  }
  .l1-fold:hover { background: rgba(255,255,255,.08); color: #fff; }
  .l1-fold:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
  .l1-fold .bi { font-size: 1.1875rem; }

  /* 畳んだ形 */
  .l1-mini .l1-side { width: 64px; }
  .l1-mini .l1-side .t {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
  }
  .l1-mini .l1-fold { align-self: center; margin: 12px 8px 0; }
  .l1-mini .l1-nav { padding: 6px 8px 14px; }
  .l1-mini .l1-nav a, .l1-mini .l1-nav .soon { position: relative; justify-content: center; width: 48px; padding: 0; }
  .l1-mini .l1-nav .cap { height: 1px; margin: 12px 4px; padding: 0; background: rgba(255,255,255,.35); }
  /* 準備中：白い丸に砂時計（bi-hourglass-split）。字の「準備中」は透明にして読み上げ用に残す */
  .l1-mini .l1-nav .s { position: absolute; top: 3px; right: 1px; width: 18px; height: 18px; margin: 0; padding: 0; border: 1px solid var(--fs-side); border-radius: 50%; background: #fff; color: transparent; overflow: hidden; line-height: 1; }
  .l1-mini .l1-nav .s::after { content: "\f41f"; font-family: "bootstrap-icons"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fs-side); font-size: .6875rem; }
  /* 件数（本物になったとき）：アイコンの右上の小さい丸 */
  .l1-mini .l1-nav a .n { position: absolute; top: 2px; right: 0; margin: 0; min-width: 20px; padding: 0 5px; line-height: 18px; text-align: center; }
  .l1-mini .l1-foot { padding: 12px 8px 0; }
  .l1-mini .l1-ver { display: none; }

  /* 吹き出し（畳んだときの項目名）。墨の地に白い字・左に小さな三角。位置は fs-side.js が項目の右に合わせる */
  .l1-tip { position: fixed; z-index: 1045; top: 0; left: 0; transform: translateY(-50%); padding: 6px 12px; border-radius: 6px; background: var(--fs-ink); color: #fff; font-size: .875rem; font-weight: 700; line-height: 1.5; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px -6px rgba(16,40,90,.45); }
  .l1-tip::before { content: ""; position: absolute; left: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left-width: 0; border-right-color: var(--fs-ink); }
}
@media (min-width: 1400px) and (prefers-reduced-motion: reduce) {
  .l1-side { transition: none; }
}
/* 1400px 未満では吹き出しを出さない（fs-side.js も出さないが、念のため） */
@media (max-width: 1399.98px) {
  .l1-tip { display: none !important; }
}

/* ---------- 幅が 1400px 未満：左メニューを畳む ---------- */
@media (max-width: 1399.98px) {
  .l1-brand { width: auto; padding-right: 8px; }
  .l1-side { width: 0; height: auto; position: static; overflow: visible; }
  .l1-drawer { min-height: 0; }
  .l1-close {
    display: inline-flex; align-items: center; gap: 6px; margin: 16px 16px 0; align-self: flex-start;
    background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 8px;
    min-height: 48px; padding: 0 14px; font-size: 1rem; font-weight: 700;
  }
}
@media (min-width: 1400px) {
  .l1-menu-btn { display: none !important; }
}

/* ---------- ログイン系の画面（ログイン・招待・パスワード変更） ----------
   左は暗い藍の面にアプリの名前（文字）、右の白い面にロゴのマークとフォーム。
   ロゴの画像は白い面の上だけ（決まり 9.）。新しい色の見本が無いので、並びは今までのまま。 */
.lg { display: flex; min-height: 100vh; }
.lg-band {
  flex: 1 1 auto; background: var(--fs-side); color: #fff;
  display: flex; flex-direction: column; justify-content: center; padding: 56px 64px;
}
.lg-band .app { font-size: 2rem; font-weight: 700; margin: 0; line-height: 1.3; }
.lg-band .msg { font-size: 1rem; color: var(--fs-side-ink); margin-top: 8px; }
.lg-form { width: 560px; flex-shrink: 0; background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 48px 64px; }
.lg-form .lg-mark { height: 52px; width: auto; align-self: flex-start; margin-bottom: 24px; }
.lg-form h1 { margin-bottom: 8px; }
.lg-form .lead-s { color: var(--fs-muted); margin-bottom: 24px; }
.lg-help { border-top: 1px solid var(--fs-border); margin-top: 32px; padding-top: 20px; color: var(--fs-muted); font-size: .875rem; display: flex; gap: 10px; }
.lg-help .bi { color: var(--fs-logo); font-size: 1.125rem; line-height: 1.4; }
.lg-help strong { color: var(--fs-ink); }

/* 幅が 1400px 未満（スマホは 1360px で描く）：帯を上、フォームを下に積み、フォームを広く取る */
@media (max-width: 1399.98px) {
  .lg { flex-direction: column; }
  .lg-band { flex: 0 0 auto; padding: 32px 64px; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 24px; }
  .lg-band .msg { margin-top: 0; }
  .lg-form { width: 100%; max-width: 760px; margin: 0 auto; background: transparent; flex: 1 1 auto; justify-content: flex-start; padding: 48px 40px; }
  .lg-form .lg-inner { background: #fff; border: 1px solid var(--fs-border); border-radius: 12px; padding: 40px 48px; }
}