/* ============================================================================
   駐車場調査システム — base.css
   ----------------------------------------------------------------------------
   このファイルが唯一のスタイル定義です。テンプレートに <style> を書かないこと。
   色は既存トークンから1つも増やしていません。追加したのは余白・文字サイズ・
   幅・密度のスケールだけです。

   仕様: docs/redesign/SPEC.md  §6（共通シェルと部品）
   見本: docs/redesign/mocks/*.html （このCSSはモックから抽出したもの）
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. トークン
   --------------------------------------------------------------------------- */
:root{
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",
         "Noto Sans JP","Meiryo",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* 面と線 */
  --bg:#EBEFF7; --surface:#FFFFFF; --surface-2:#F3F6FC; --line:#DFE5F0;
  --grid:#EDF1F8;                       /* 表の罫線（--line より薄い） */

  /* 文字 */
  --ink:#131A28; --ink-muted:#5B6577; --ink-faint:#8B95A8;

  /* ブランド（＝データの色。状態は表さない） */
  --brand:#2C4BE0; --brand-mid:#B9C7F7; --brand-soft:#E7ECFD; --on-brand:#FFFFFF;

  /* 管理シェルのナビ */
  --nav-bg:#10182E; --nav-fg:#E7ECF7; --nav-dim:#93A0BC; --nav-line:#2A3556;
  /* ★下段とエリア切替の地＝帯の中の「少し明るい紺」。**新しい色ではない**（もとから
     使っていた #1b2540 に名前を付けただけ）＝3か所に書き写してあったのを1本にした
     （2026-09-09）。★生の hex に戻さないこと＝`--nav-bg` を直しても下段だけ古い紺で残る。 */
  --nav-bg-2:#1b2540;
  /* ★帯の高さ＝上段と下段。**画面に貼り付ける（sticky）ので、下段の top に上段の高さが要る**
     （2026-09-08・オーナー指示＝「上の帯を固定して画面をスクロールしても上に見えているように
     したい」）。★**数字を .m-nav / .m-subnav と2か所に持たない**＝片方だけ直すと
     **下段が上段に食い込む**（ずれても誰もエラーにならないので、目で見るまで気づけない）。 */
  --nav-h:48px; --subnav-h:44px;

  /* 状態（§6.3 の色ルールを厳守。赤は状態表示に使わない） */
  --amber:#F2B441;
  /* ★★**淡い下地（*-soft）の上に載せる文字色**＝下地ごとに1つだけ（2026-09-09 に1本化）。
     ★`--warn` や `--pos` をそのまま載せないこと＝**淡い下地の上では薄くて読めない**
     （もとの注記がそう書いてある）。★ここに2つ目の濃さを足さない＝足すと、同じ橙の上で
     バッジと注記の濃さが違う状態に戻る（実際にそうなっていた＝#9A5A05 と #7A4705）。 */
  --on-warn-soft:#9A5A05; --on-brand-soft:#1E36A8; --on-pos-soft:#0A7554;
  --pos:#0E9E70;  --pos-soft:#DCF3EA;    /* 完了・達成 */
  --warn:#E28A22; --warn-soft:#FBEBD5;   /* 要対応（2段階まで） */
  --neg:#E14B5A;  --neg-soft:#FBE3E6;    /* 削除ボタンと下降デルタのみ */

  /* 角丸 */
  --r:16px;              /* 現場アプリ */
  --r-manage:12px;       /* 管理コンソール */
  --r-sm:9px; --r-pill:999px;

  /* 影 = 浮いているものだけ。平面のカードは線で区切る */
  --shadow-pop:0 1px 2px rgba(16,24,40,.05),0 10px 26px -14px rgba(16,24,40,.22);
  --shadow-btn:0 6px 16px -8px rgba(44,75,224,.6);

  /* 余白（これ以外の値を使わない） */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* 文字サイズ */
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15px;
  --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:32px;
  /* ★1段だけ足した（2026-08-07）＝ホームの「5 / 8」（指示 第5版 §4-2 で 42px）。
     32px との差が大きく、生の値を画面側に書くと**段に寄せた作業（26種→8種）が戻る**ので、
     段として持つ。★これ以外の指定（18px→--fs-lg 17px／23px→--fs-2xl 24px）は段に寄せた
     ＝1px 差は段を増やす理由にしない（報告済み）。 */
  --fs-4xl:42px;

  /* 幅（これ以外を使わない） */
  --w-page:1280px;   /* 管理: 一覧・分析・詳細 */
  /* ★管理: フォームの中身。**640px → 1180px**（2026-08-13・オーナー指示
     「スマホ用のデザインになってる。PC画面用にして1画面で表示できるようにしたい」）。
     ★640px は「1列・上から下」を前提にした幅で、欄が26個ある画面では縦に長くなり、
       PC で見るとスマホの画面のように見えていた。**欄を2列に並べる**ので器も広げる（→ §20.7）。
     ★**--w-page（1280px）と同じにしないこと**＝フォームは1行が長すぎると目が横に泳ぐ。
       2列に割って1列あたり ~560px に収まる幅にしてある。 */
  --w-form:1180px;
  --w-field:620px;   /* 現場アプリ */

  /* 密度（管理側は現場より1段詰める） */
  --row-h:42px;
  /* ★入力欄（窓）の高さ（2026-08-13・オーナー指示「窓の高さを揃えて欲しい」）。
     ★**--row-h と同じ値にしてある**＝表の中に窓を置いても行がふくらまない。
     ★これが無いと、高さが padding 任せになり、**ブラウザが select と input を別の高さで描く**
       （プルダウンだけ背が低い、が起きる）。 */
  --ctl-h:42px;

  /* --- Phase 0 の移行用エイリアス（§20 と一緒に消す）-----------------------
     旧 base.html の :root にあって base.css に無い名前は、この2つだけ。
     **値は既存トークンと1文字も違わない**（色を足したわけではない）。
     これが無いと、各画面の <style> を base.css へ移し終える前（C2〜C6）に
     var(--shadow) / var(--brand-solid) が未定義になり、影とブランド色が黙って消える。
     C9（旧クラスの掃除）で、参照が0になったのを確かめてから削除すること。 */
  --brand-solid:#2C4BE0;                 /* = --brand */
  --shadow:0 1px 2px rgba(16,24,40,.05),0 10px 26px -14px rgba(16,24,40,.22);  /* = --shadow-pop */
}

/* ---------------------------------------------------------------------------
   2. ベース
   --------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:var(--font); line-height:1.8;
  font-feature-settings:"palt"; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand)}
h1,h2,h3,h4{margin:0}

/* ---------------------------------------------------------------------------
   3. 管理シェル
   --------------------------------------------------------------------------- */
/* ★color は base の後付け（モックに無い＝C7-対応表 §3 の7行目）。色を決めていない要素
   （区切りの記号など）が濃紺の地に埋もれるのを防ぐ。「既定＝モック」の例外として残す。 */
/* ★帯は2段になった（2026-08-07）＝ここは**上段**。下段は下の .m-subnav（この節の末尾）。
   高さ 56px → 48px は指示_ホーム画面.md 第3版 §2-1。上段は項目が4つに減った（勤務・締め・
   集計・設定▾・現場アプリが下段へ移った）ので、詰めても字が寄らない。 */
/* ★★**スクロールしても上に残す**（2026-09-08・オーナー指示）＝`sticky` にする。
   ★`fixed` にしないこと＝`fixed` は本文の位置取りから外れるので、**本文の先頭が帯の下に
     もぐる**（避けるには本文へ帯のぶんの余白を足すことになり、余白と帯の高さが2か所に散る）。
   ★**下段より上に重ねる**（`z-index`）＝下段が上段を横切る形にしない。
     ★**モーダルより下に置くこと**（住所ピッカー 1000／ルートの入力 70／トースト 60）。 */
.m-nav{background:var(--nav-bg);height:var(--nav-h);display:flex;align-items:center;
  padding:0 var(--sp-5);gap:var(--sp-2);color:var(--nav-fg);
  position:sticky;top:0;z-index:50}
/* ★あとから帯に足した部品のための受け皿（モックには無い）。
   §20 は「旧の見た目を当て続ける橋」なので、新設はここ＝新語彙の側に置く。
   ・__inner ＝帯の中身を本文と同じ幅で中央に置く器。モックは固定幅の見本なので持っていない。
   ・__drop / __drop-panel / __sep ＝設定▾のドロワー。ナビを4項目にした回で足した部品で、
     モックより後に生まれたため、モックにも §1〜§19 にも無い（実測で確認）。 */
.m-nav__inner{flex:1;max-width:var(--w-page);margin:0 auto;
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.m-nav__drop{position:relative}
.m-nav__drop-panel{position:absolute;right:0;top:calc(100% + 12px);min-width:200px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-pop);padding:6px;display:none;z-index:30}
.m-nav__drop:hover .m-nav__drop-panel,
.m-nav__drop:focus-within .m-nav__drop-panel{display:block}
.m-nav__drop-panel a{display:flex;align-items:center;gap:8px;color:var(--ink);
  text-decoration:none;padding:9px 10px;border-radius:8px;font-size:var(--fs-md)}
.m-nav__drop-panel a:hover{background:var(--surface-2)}
.m-nav__sep{display:block;height:1px;background:var(--line);margin:5px 6px}
/* 未読の数（帯の［連絡］）。★**0 は出さない**＝出す判断はテンプレート側（数字が在る＝用がある）。
   ★白抜きの丸にする＝濃紺の帯の上で、色みだけでは数字が読めない。 */
.m-nav__count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;
  height:19px;padding:0 5px;border-radius:var(--r-pill);background:#fff;color:var(--nav-bg);
  font-size:var(--fs-xs);font-weight:800;font-variant-numeric:tabular-nums}
/* ログアウトは POST なので form が要る（モックはリンク1つ）。flex の並びを崩さない分だけ。 */
.m-nav__ctl form{display:flex;margin:0}
/* ★モックの .gh / .out は <a>。こちらは**押す物**なので <button> を使う（設定▾はキーボードで
   開けるように、ログアウトは POST なので）。素のボタンの枠と字がそのまま出ないよう、
   **見た目を無効化する分だけ**足す（色・余白・角丸は上の定義がそのまま効く）。 */
button.m-nav__ghost,button.m-nav__out{background:none;font:inherit;cursor:pointer}
button.m-nav__ghost{border:0}
/* エリア切替の <select>：開いたとき「白背景に白文字」で消えないよう色を明示する。
   ★.m-area の見た目だけを採り、<select> のままにする（ポップオーバー化は別の回）。 */
.m-area select{background:var(--nav-bg-2);color:#fff;border:1px solid var(--nav-line);
  border-radius:6px;padding:4px 8px;font-size:var(--fs-sm)}
.m-area select option{background:var(--nav-bg-2);color:#fff}
/* ★左端のサービス名は**押せない**（`<span>`・第4版 §2-1 の1番）＝リンクの下線消しは要らない。
   ★`<a>` にする回が来たら `color:inherit;text-decoration:none` を足すこと（無いと濃紺の帯の
   中で青い下線付きの文字になる。下の .m-nav__logo b が持つのは中の <b> の色だけ）。 */
.m-nav__logo{display:flex;align-items:center;gap:9px;margin-right:var(--sp-6);white-space:nowrap}
.m-nav__logo .mark{width:26px;height:26px;border-radius:8px;background:var(--brand);
  display:grid;place-items:center}
.m-nav__logo .mark svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2}
.m-nav__logo b{color:#fff;font-size:14.5px;letter-spacing:-.005em}
.m-nav__item{color:var(--nav-dim);text-decoration:none;font-size:var(--fs-md);
  padding:7px 13px;border-radius:8px;white-space:nowrap}
.m-nav__item:hover{color:var(--nav-fg);background:rgba(255,255,255,.06)}
.m-nav__item.is-on{color:#fff;font-weight:700;background:rgba(255,255,255,.10)}
.m-nav__spacer{flex:1}
.m-nav__ctl{display:flex;align-items:center;gap:var(--sp-2)}
/* エリア選択: 5〜30件を想定。<select> ではなく検索付きポップオーバーにする */
.m-area{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);
  border:1px solid var(--nav-line);border-radius:8px;padding:6px 11px;color:#fff;
  font-size:var(--fs-sm);white-space:nowrap;cursor:pointer}
.m-area__label{color:var(--nav-dim);font-size:11.5px}
.m-area svg{width:11px;height:11px;stroke:var(--nav-dim);fill:none;stroke-width:2.4}
.m-nav__ghost{color:var(--nav-dim);font-size:var(--fs-sm);padding:6px 10px;border-radius:8px;
  text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:6px}
.m-nav__ghost:hover,.m-nav__ghost.is-on{color:var(--nav-fg);background:rgba(255,255,255,.06)}
.m-nav__ghost svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2}
/* ★.m-nav__out（枠付きのログアウトボタン）は帯から消えた（2026-08-07）＝ログアウトは
   名前▾の中へ移した。**定義はまだ残してある**＝参照が0になったことを確かめてから消す
   （§20 の掃除と同じ作法。C7-対応表 §5 の「参照0は探索した範囲より広くならない」）。 */
.m-nav__out{border:1px solid var(--nav-line);color:var(--nav-fg);font-size:var(--fs-sm);
  padding:6px 13px;border-radius:8px;text-decoration:none;white-space:nowrap}

/* --- 帯を2段にした分（2026-08-07・指示_ホーム画面.md 第3版 §2）-----------------
   ★**新しい色は1つも作っていない。** 下段の地は、帯の中で既に使っている「少し明るい紺」
   （`--nav-bg-2` ＝上の .m-area select と同じ値）。区切り線と当たっている項目は、上段と同じ
   白の重ね（.06 / .10）で作る。★**色を増やさないこと**（増やすと
   「濃紺は帯」という手がかりが薄れる）＝いま在る色に名前を付けるのは可。 */

/* 名前▾の中の［ログアウト］は POST なので <button>。パネルの中では a と同じ見た目にする。
   ★a だけに当てていると、素のボタンの枠・中央寄せ・別のフォントがそのまま出る
   （パネルの中で1行だけ体裁が違う、という形で出る）。 */
.m-nav__drop-panel form{margin:0}
.m-nav__drop-panel button{display:block;width:100%;text-align:left;background:none;border:0;
  cursor:pointer;font:inherit;color:var(--ink);padding:9px 10px;border-radius:8px;
  font-size:var(--fs-md)}
.m-nav__drop-panel button:hover{background:var(--surface-2)}

/* 下段＝画面へ移る10個。★**折り返さない**＝幅が足りないときは下段だけ横に流す
   （第3版 §2-2）。折り返すと帯の高さが変わり、下の本文の位置が画面ごとにずれる。 */
/* ★★**下段も貼り付ける**（2026-09-08）＝`top` は**上段の高さ**（`--nav-h`）。
   ★**0 にしないこと**＝上段と同じ位置に重なって、下段が上段を隠す。 */
.m-subnav{background:var(--nav-bg-2);height:var(--subnav-h);display:flex;align-items:center;
  padding:0 var(--sp-5);position:sticky;top:var(--nav-h);z-index:49}
.m-subnav__inner{flex:1;max-width:var(--w-page);margin:0 auto;display:flex;align-items:center;
  gap:var(--sp-1);flex-wrap:nowrap;overflow-x:auto}
.m-subnav__item{color:var(--nav-dim);text-decoration:none;font-size:var(--fs-md);
  padding:6px 11px;border-radius:8px;white-space:nowrap}
/* ★hover は **a だけ**に当てる＝押せない「請求明細」（<span>）に反応を付けないため
   （反応があると押せると読まれ、押して何も起きない）。 */
a.m-subnav__item:hover{color:var(--nav-fg);background:rgba(255,255,255,.06)}
.m-subnav__item.is-on{color:#fff;font-weight:700;background:rgba(255,255,255,.10)}
/* 行き先が無い項目（請求明細）＝画面が無いので <span> で置く。灰色にするだけで、
   hover もカーソルも付けない。★**行き先ができたら <a> に変えるだけ**（この class を外す）。 */
.m-subnav__item--off{color:var(--nav-dim);opacity:.55;cursor:default}
/* 区切りの縦線（薄い白）。3か所。★flex-shrink を止める＝下段を横に流すとき、
   線から先に潰れて区切りが消えるのを防ぐ。 */
.m-subnav__sep{flex:0 0 1px;height:18px;background:rgba(255,255,255,.18);
  margin:0 var(--sp-2)}
/* ★★下段にプルダウンは置かない（2026-08-18・オーナー実機で2往復とも押せなかった）＝
   下段は `overflow-x:auto` の箱なので**ぶら下がるパネルが切り取られる**。画面基準（fixed）へ
   出す JS も足してみたが、**位置は合っても引き金とパネルのあいだで消えて押せない**。
   ★**ブラウザの中の話なのでテストでは出ない**＝確認が毎回オーナーの実機に乗る。
   → 帯は**リンク1つ**に戻し、2つ目の行き先（エリアの新規登録）は**画面の右上のボタン**にした。
   ★**同じことを下段でやりたくなったら、まずこの5行を読むこと。** */

/* --- ホーム（/manage/）＝入口のカード11枚（2026-08-07・指示_ホーム画面.md 第5版 §4）-------
   ★名前は `.hcard*`。**`.home` は使えない**＝現場アプリのホーム（§20.14 の `.home` / `.tile*`）が
     持っている名前で、そちらは D-15 で触らない対象。
   ★4列の幅は 1.15 : 1 : 1 : 0.85（§4-1）。列の中は上から詰め、1枚目（大きいカード）だけが
     伸びて列の高さを埋める＝**4列の高さが揃う**（いちばん高い列＝2列目の4枚に合わせる）。
   ★**縦スクロールさせない**（§4-1）＝カードは高さを固定せず `min-height` にしてある。
     文字が増えたときに切るのではなく伸ばす（切ると説明文が読めなくなる）。 */
.hcards{display:grid;grid-template-columns:1.15fr 1fr 1fr .85fr;gap:var(--sp-5);align-items:stretch}
.hcards__col{display:flex;flex-direction:column;gap:var(--sp-5)}
.hcard{display:flex;flex-direction:column;min-height:132px;padding:13px 15px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-manage);
  border-top:3px solid var(--line);          /* 既定＝灰（上辺の線の色はカードごと） */
  text-decoration:none;color:inherit}
.hcard:hover{box-shadow:var(--shadow-pop)}
.hcard--big{flex:1}                          /* 1列目の1枚目だけ伸びる */
.hcard--brand{border-top-color:var(--brand)}         /* 青＝いま効いている */
.hcard--warn{border-top-color:var(--warn)}           /* 橙＝注意（締め処理） */
/* 赤＝止まっている（警察署＝単価が無いと金額が出ない）。★橙にしないこと＝docs/rules/screen.md */
.hcard--stop{border-top-color:var(--neg)}
.hcard--faint{border-top-color:var(--surface-2)}     /* 薄灰 */
/* 行き先が無いカード（請求明細）＝<span> で置く。押せる見た目を付けない（影も出さない）。 */
.hcard--off{cursor:default}
.hcard--off:hover{box-shadow:none}
.hcard__name{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em}
.hcard__desc{font-size:var(--fs-xs);color:var(--ink-muted);margin-top:3px;line-height:1.5}
/* 数字はカードのいちばん下（§4-3）＝`margin-top:auto` で下へ寄せる。10枚で位置が揃う。 */
.hcard__foot{margin-top:auto;padding-top:10px;display:flex;align-items:baseline;
  gap:7px;flex-wrap:wrap}
.hcard__num{font-size:var(--fs-2xl);font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1.1}
.hcard__unit{font-size:var(--fs-xs);color:var(--ink-muted)}
/* 「準備中」「―」＝数字が無いことを示す字。数字より弱く出す（数字と読み違えないため）。 */
.hcard__none{font-size:var(--fs-sm);color:var(--ink-faint)}
/* 大きいカード（本日の進捗状況）の中身 */
.hcard__hero{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:12px}
.hcard__hero-num{font-size:var(--fs-4xl);font-weight:800;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.hcard__hero-unit{font-size:var(--fs-sm);color:var(--ink-muted)}
/* 大きい数字の但し書き（何を数えた分母か）。★`.hcard__desc`（カードの説明文）と分けてある＝
   1枚のカードに「説明文」と「数字の但し書き」が両方あり、役目が違う。 */
.hcard__hero-note{font-size:var(--fs-xs);color:var(--ink-muted);margin-top:5px;line-height:1.5}
/* 4つの数字＝2列2行（§4-2）。細い横線で上と区切る。 */
.hcard__stats{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:11px var(--sp-4)}
.hcard__stat-k{font-size:var(--fs-xs);color:var(--ink-muted)}
.hcard__stat-v{font-size:var(--fs-xl);font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1.2}
/* 色の意味は画面をまたいで固定（docs/rules/screen.md）＝勤務中＝青／未完了＝橙。
   ★残る2つ（本日の件数・未出勤）は色を付けない＝状態ではなく実績なので黒のまま。 */
.hcard__stat-v--brand{color:var(--brand)}
.hcard__stat-v--warn{color:var(--warn)}

.m-container{max-width:var(--w-page);margin:0 auto;padding:var(--sp-5) var(--sp-5) var(--sp-7)}
.m-container--form{max-width:var(--w-form)}   /* フォームの中身だけ狭める。ナビは残す */

/* ---------------------------------------------------------------------------
   4. 現場シェル
   --------------------------------------------------------------------------- */
.f-container{max-width:var(--w-field);margin:0 auto;padding:var(--sp-4)}
.f-header{display:flex;justify-content:space-between;align-items:center;
  padding:var(--sp-3) 0;font-size:var(--fs-sm)}
.f-header .user{color:var(--ink-muted);display:flex;align-items:center;gap:6px}
.f-header a{color:var(--brand);font-weight:700;text-decoration:none}
.f-card{background:var(--surface);border-radius:var(--r);padding:var(--sp-5);
  box-shadow:var(--shadow-pop)}
/* 現場は屋外・片手操作。タップ領域は最低 48px */
.f-btn{display:block;width:100%;min-height:48px;border-radius:var(--r-sm);
  font-size:var(--fs-lg);font-weight:800;border:0;font-family:inherit}

/* ---------------------------------------------------------------------------
   5. ページヘッダ / パンくず
   --------------------------------------------------------------------------- */
.crumb{display:inline-flex;align-items:center;gap:6px;color:var(--brand);
  font-size:var(--fs-sm);font-weight:600;text-decoration:none;margin-bottom:var(--sp-3)}
.crumb svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.page-head h1{font-size:var(--fs-2xl);letter-spacing:-.015em;line-height:1.45;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.page-head__sub{font-size:var(--fs-sm);color:var(--ink-muted);font-weight:600;margin-bottom:2px}
.page-head__rt{color:var(--ink-muted);font-size:var(--fs-md);font-weight:600}
.page-head__acts{display:flex;gap:var(--sp-2);flex-shrink:0}
/* 見出しの下の一言（その画面が何をする所か）と、画面内の節見出し（§20.2 から移設 2026-08-06）。
   ★.lead は現場も使う（work_finish_list）＝共有。値は原文のまま動かしていない。 */
.lead{color:var(--ink-muted);font-size:var(--fs-sm);margin:-6px 0 16px}
.sec{font-size:1rem;margin:24px 0 8px}

/* ---------------------------------------------------------------------------
   6. ボタン（1画面に primary は1つ）
   --------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 16px;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:700;font-family:inherit;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--surface-2)}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.btn--primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn--primary:hover{filter:brightness(1.06);background:var(--brand)}
.btn--danger{border-color:#F0C2C7;color:var(--neg);background:var(--surface)}
.btn--ghost{border-color:transparent;background:transparent;color:var(--brand)}
.btn--sm{height:28px;padding:0 11px;font-size:var(--fs-sm);border-radius:7px}
.btn--lg{height:44px;padding:0 24px;font-size:var(--fs-base);border-radius:10px}
.btn[disabled],.btn.is-disabled{background:var(--surface-2);border-color:var(--line);
  color:var(--ink-faint);cursor:not-allowed}

/* ---------------------------------------------------------------------------
   7. 状態バッジ（SPEC §3.5 / §6.3。赤は使わない）
   --------------------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;
  border-radius:var(--r-pill);font-size:11.5px;font-weight:800;letter-spacing:.01em}
.badge--inprogress{background:var(--brand-soft);color:var(--on-brand-soft)}  /* 勤務中 */
.badge--incomplete{background:var(--warn-soft);color:var(--on-warn-soft)}   /* 未完了 */
.badge--incomplete-strong{background:var(--warn);color:#3A2A00} /* 未完了・強 */
.badge--done{background:var(--pos-soft);color:var(--on-pos-soft)}          /* 完了・在籍 */
.badge--fixed{background:var(--surface-2);color:var(--ink-muted);border:1px solid var(--line)} /* 確定 */
/* ★下の3つは**勤務1件の状態を表さない**バッジ（2026-08-07・ホームのカード）。
   ・--hint … 青。「押すと何ができるか」の案内（例＝集計の「期間を選んで開く」）。
   ・--attn … 橙。注意（例＝締め日までの残り日数）。
   ・--stop … 赤。**止まっている**（例＝警察署の「単価未設定 N」＝単価が無いので金額が出ない）。
   ★見た目が --inprogress / --incomplete と重なっても、**名前を分けてある**＝あちらは勤務1件の
     状態（勤務中／未完了）の語彙で、状態バッジの共有部品（_work_status_badge.html）が使う。
     状態でないものに状態の class を貸すと、色の意味を変えるときに一緒に動いてしまう。
   ★★**「単価未設定」は赤**＝`docs/rules/screen.md`「赤＝止まっている（保存できない・単価が無い）」
     がこの事例を名指ししている。**橙にしないこと**（橙は「注意」＝直すものが無い側）。 */
.badge--hint{background:var(--brand-soft);color:var(--on-brand-soft)}
.badge--attn{background:var(--warn-soft);color:var(--on-warn-soft)}
.badge--stop{background:var(--neg-soft);color:#A32330}
.badge--plain{background:var(--surface);color:var(--ink-muted);border:1px solid var(--line);font-weight:700}
/* バッジを横に並べる帯（勤務の詳細の見出し下）。折り返す＝管理はPC前提だが窓を狭めても崩さない。 */
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--sp-3)}

/* ---------------------------------------------------------------------------
   8. パネル（管理は影なし・線で区切る）
   --------------------------------------------------------------------------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-manage);
  padding:var(--sp-4) var(--sp-5) var(--sp-5);margin-bottom:var(--sp-3)}
.panel > h3{margin:0 0 var(--sp-3);font-size:var(--fs-xs);letter-spacing:.07em;
  color:var(--ink-muted);font-weight:800;display:flex;align-items:center;gap:8px}
.panel > h3 svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}
.panel > h3 .rt{margin-left:auto;font-weight:700;letter-spacing:0;font-size:var(--fs-sm)}
.panel--accent{border-color:#C9D4FA;background:linear-gradient(180deg,#FBFCFF,#FFF)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-bottom:var(--sp-3)}

/* ---------------------------------------------------------------------------
   9. key-value 行
   --------------------------------------------------------------------------- */
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);
  font-size:var(--fs-md);min-height:32px;padding:3px 0;border-bottom:1px dashed var(--grid)}
.kv:last-child{border-bottom:0}
.kv__k{color:var(--ink-muted);white-space:nowrap}
/* 金額の計算根拠。例: 出来高 ¥400 × 18件 */
.kv__basis{display:block;font-size:11.5px;color:var(--ink-faint);line-height:1.5;font-family:var(--mono)}
.kv__v{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.kv__v--muted{color:var(--ink-muted);font-weight:600}
.kv--sum{border-bottom:0;border-top:1px solid var(--line);margin-top:var(--sp-2);padding-top:var(--sp-3)}
/* 見出しと値を、行の真ん中にまとめて置く行（2026-08-21・オーナー指示）。
   ★1回目＝「**未を真ん中に表示して欲しい**」→ 値だけ中央に寄せた（見出しは左端のまま）。
   ★2回目＝「**状態　をもっと右に移動して欲しい**」→ **見出しも一緒に中央へ**寄せた
     （＝`justify-content:center`）。**見出しと値が並んで真ん中に来る。**
   ★`.kv` は既定で「見出し＝左端／値＝右端」＝**1語だけの値が広いカードの両端に離れて座る**。
   ★★`.kv` そのものを変えないこと＝金額の行（`.kv__v` は右そろえ・数字は桁そろえ）が全部ずれる。 */
.kv--center{justify-content:center;gap:var(--sp-6)}

/* ---------------------------------------------------------------------------
   9b. 手順書の本文（`docs/` の md をそのまま出す画面・2026-08-27）
   ★見出し・段落・箇条書き・引用・区切り線だけ。表は既存の `.dt` をそのまま使う。
   --------------------------------------------------------------------------- */
/* ★★**PC で読む前提**（2026-08-27・オーナー指示）＝**幅を目いっぱい使う**。
   ★★**2段組みはやめた**（同日・オーナー「**左右に2段にしてるけど、それもやめてください。
     非常に見にくいので**」）＝**1本の流れで上から下に読む**。**戻さないこと。**
   ★★**左右スクロールを作らない**（同日・オーナー「**PCでもスマホでも左右スクロールは操作性
     最悪なんですよ**」）＝**表のセルを折り返す**（`.dt` は既定で `white-space:nowrap` なので、
     この画面だけ打ち消す）。**`nowrap` に戻さないこと＝戻すと 2.3 の表がまた横に溢れる。** */
.docpage{max-width:none}
.docpage h2{font-size:1.15rem;font-weight:800;margin:var(--sp-6) 0 var(--sp-3);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.docpage h3{font-size:1rem;font-weight:800;margin:var(--sp-5) 0 var(--sp-2)}
.docpage h2:first-child,.docpage h3:first-child{margin-top:0}
.docpage p{margin:0 0 var(--sp-3);line-height:1.8}
.docpage ul,.docpage ol{margin:0 0 var(--sp-3);padding-left:var(--sp-6);line-height:1.8}
.docpage li{margin:0 0 var(--sp-1)}
/* ★★表は**画面の幅に収める**＝セルを折り返し、行の高さは中身なり（`.dt` の固定の高さも解除）。 */
.docpage .dt{table-layout:auto}
.docpage .dt th,.docpage .dt td{white-space:normal;overflow-wrap:anywhere;
  height:auto;padding:8px 14px;line-height:1.7;vertical-align:top}
/* 「本手順は設定漏れが最も多い箇所です」のような注意書き。★橙＝注意（画面の色の意味と同じ）。 */
.docpage blockquote{margin:0 0 var(--sp-3);padding:var(--sp-2) var(--sp-3);
  border-left:3px solid var(--warn);background:var(--warn-soft);border-radius:var(--r-sm)}
/* ★区切り線は細く短く＝手順の切れ目が分かればよい（縦を食わせない）。 */
.docpage hr{border:0;border-top:1px solid var(--line);margin:var(--sp-4) 0}
.docpage .table-wrap{margin:0 0 var(--sp-4);max-width:none}
.kv--center .kv__v{text-align:center}
/* 領収書のサムネイル（勤務詳細の経費の行・2026-08-13）。★見せ方は修正画面と同じ＝押すと拡大。
   ★`align-items:baseline` の行に画像を置くと行の高さが跳ねるので、この行だけ上ぞろえにする。 */
.kv--receipt{align-items:flex-start}
.kv__thumb{display:inline-block}
.kv__thumb img{max-width:120px;max-height:120px;border-radius:var(--r-sm);border:1px solid var(--line);
  display:block}
.kv--grand{border-top:2px solid var(--ink);margin-top:var(--sp-3);padding-top:var(--sp-3)}
.kv--grand .kv__k{color:var(--ink);font-weight:800;font-size:var(--fs-base)}
.kv--grand .kv__v{font-size:var(--fs-2xl);color:var(--pos);letter-spacing:-.02em}
/* 金額のマイナス（赤字の粗利など）＝**橙**。★--neg（赤）を使わないこと＝赤は「止まっている」
   （保存できない・単価が無い）専用で、赤字は止まってはいない＝色の約束が濁る（オーナー決定
   2026-08-05）。緑固定のままだと赤字が緑で出るので、この modifier で上書きする。 */

/* ---------------------------------------------------------------------------
   10. 絞り込み帯・プリセット
   --------------------------------------------------------------------------- */
.presets{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3);align-items:center}
.preset{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
  font-size:var(--fs-md);font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit}
.preset.is-on{background:var(--nav-bg);border-color:var(--nav-bg);color:#fff}
.preset__count{font-size:var(--fs-xs);font-weight:800;padding:1px 7px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--ink-muted)}
.preset.is-on .preset__count{background:rgba(255,255,255,.18);color:#fff}
.preset__count--warn{background:var(--warn-soft);color:var(--on-warn-soft)}

.filterbar{display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-manage);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3)}
.field{display:flex;flex-direction:column;gap:3px}
.field label{font-size:11.5px;color:var(--ink-muted);font-weight:700}
.field .control{height:34px;border:1px solid var(--line);border-radius:8px;padding:0 11px;
  display:flex;align-items:center;font-size:var(--fs-md);background:var(--surface);
  color:var(--ink);white-space:nowrap;gap:8px}
.field .control--search{width:250px;color:var(--ink-faint)}
.filterbar__rt{margin-left:auto;display:flex;gap:var(--sp-2)}
/* 絞り込み帯の中の入力欄＝幅は中身なり（§20.5 から移設 2026-08-06）。★モックは .fbar の
   ボタンしか持っていないので受け皿が無かっただけで、消える予定の規則ではない。 */
/* ★★高さは padding 任せにしない（`docs/rules/screen.md`＝オーナー指摘「窓の高さを揃えて欲しい」）
   ＝ブラウザは同じ padding でも select と input を別の高さで描く（プルダウンだけ背が低い）。
   ★**この帯だけ 34px**（すぐ上の `.field .control` と同じ値）＝`--ctl-h`(42px) はフォーム画面の
   窓の高さで、絞り込みの帯は1段詰めてある。**2つを揃えないこと**（帯が太る）。 */
.filterbar .input,.filterbar .select{width:auto;height:34px;padding:.5rem .6rem;
  font-size:var(--fs-md)}

.countbar{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-muted)}
.countbar b{color:var(--ink);font-size:var(--fs-base);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------------
   11. テーブル
   金額は右寄せ・等幅。金額の省略記法（¥76.8M）は禁止（SPEC §6.3）
   --------------------------------------------------------------------------- */
.table-wrap{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-manage);overflow:hidden}
.dt{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
/* ★見出しの下の線だけ濃くする（2026-08-20・オーナー指示「その下の水平線の色を少し濃く」）＝
   **見出しと中身の切れ目**が読める（行の区切り線は薄いまま＝濃くすると表全体がうるさくなる）。
   ★2026-09-09 に締め画面だけの表（旧 `table.list`）をここへ寄せたので、この指示も全部の
   一覧表に効くようにした。 */
.dt th{position:sticky;top:0;z-index:1;background:var(--surface-2);text-align:left;
  font-size:var(--fs-xs);letter-spacing:.03em;color:var(--ink-muted);font-weight:800;
  padding:10px 14px;border-bottom:2px solid var(--ink-faint);white-space:nowrap}
.dt th.num,.dt td.num{text-align:right;font-variant-numeric:tabular-nums}
.dt th.chk,.dt td.chk{text-align:center;width:34px}
.dt tfoot td{font-weight:bold;border-top:2px solid var(--line)}
.dt td{padding:0 14px;height:var(--row-h);border-bottom:1px solid var(--grid);
  white-space:nowrap;vertical-align:middle}
.dt tbody tr:last-child td{border-bottom:0}
.dt tbody tr:hover{background:var(--surface-2)}
/* ★cursor:pointer は **行クリックで実際に飛ぶ行だけ**（.row-link）に出す。Phase 0 の時点では
   飛び先の詳細画面が無かったので全面的に伏せてあった＝遷移できない行を「押せる」ように
   見せるのは画面が嘘をつくのと同じ。M-3 ができたので、飛ぶ行にだけ戻した。
   ★素の .dt tbody tr へ広げないこと＝押しても何も起きない一覧（スタッフ・警察署など）が
   「押せる」顔になる。 */
.dt tbody tr.row-link{cursor:pointer}
.dt td.name{font-weight:700}
.dt td.muted{color:var(--ink-muted)}
.dt td.num{font-variant-numeric:tabular-nums}
.dt td.total{font-weight:800}
.dt .na{color:var(--ink-faint);font-weight:400}   /* 値が存在しない。0とは書き分ける */

/* グループ見出し行（勤務一覧を警察署ごとに塊にする） */
.dt tr.group td{background:var(--surface-2);height:36px;padding:0 14px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dt tr.group:first-child td{border-top:0}
.dt tr.group:hover td{background:var(--surface-2);cursor:default}
.dt .group__row{display:flex;align-items:center;gap:14px;width:100%}
.dt .group__name{font-weight:800;font-size:var(--fs-md)}
.dt .group__meta{font-size:var(--fs-sm);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.dt .group__spacer{flex:1}

/* 締められない行 / 要対応の行は先頭に固定して橙で示す */
.dt tr.flagged td{background:var(--warn-soft)}
.dt tr.flagged td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.dt tr.sumrow td{background:var(--surface-2);font-weight:800;
  border-top:2px solid var(--line);border-bottom:0;height:44px}
.dt tr.sumrow:hover td{background:var(--surface-2);cursor:default}

.pager{display:flex;justify-content:space-between;align-items:center;
  padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--ink-muted);background:var(--surface-2)}
.pager__pages{display:flex;gap:6px}
.pager__pages span{min-width:30px;height:30px;border-radius:7px;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;font-weight:700;color:var(--ink)}
.pager__pages span.is-on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------------------------------------------------------------------------
   12. タブ
   --------------------------------------------------------------------------- */
.tabs{display:flex;gap:var(--sp-2);border-bottom:1px solid var(--line);margin-bottom:var(--sp-4)}
.tab{padding:9px 18px;border-radius:9px 9px 0 0;font-size:var(--fs-base);font-weight:700;
  color:var(--ink-muted);border:1px solid transparent;border-bottom:0;margin-bottom:-1px;
  background:transparent;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.tab.is-on{background:var(--surface);border-color:var(--line);color:var(--ink)}
.tab__count{font-size:var(--fs-xs);font-weight:800;padding:1px 7px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--ink-muted)}
.tab.is-on .tab__count{background:var(--brand-soft);color:var(--on-brand-soft)}

/* ---------------------------------------------------------------------------
   13. 数字カード / メーター / 統計
   ヒーロー数字は1画面に1つだけ・48px・比例数字（tabular-nums を使わない）
   --------------------------------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-3);margin-bottom:var(--sp-3)}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-manage);
  padding:var(--sp-4)}
.kpi__k{font-size:var(--fs-xs);color:var(--ink-muted);font-weight:700;white-space:nowrap}
.kpi__v{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em;line-height:1.3;
  margin-top:2px;font-variant-numeric:tabular-nums}  /* 等幅＝金額は桁を揃える(SPEC §6.3) */
.kpi__d{font-size:var(--fs-xs);font-weight:700}
.kpi__d--up{color:var(--pos)} .kpi__d--dn{color:var(--neg)}
.kpi__sub{font-size:11.5px;color:var(--ink-faint)}

.hero{display:flex;align-items:baseline;gap:10px}
.hero__num{font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1}
.hero__unit{font-size:var(--fs-lg);font-weight:700;color:var(--ink-muted)}

/* メーター: 塗り＝進捗、トラック＝同じランプの明るいステップ */
.meter{height:8px;border-radius:var(--r-pill);background:var(--brand-soft);overflow:hidden}
.meter > i{display:block;height:100%;background:var(--brand);border-radius:var(--r-pill)}
.meter--done{background:var(--pos-soft)} .meter--done > i{background:var(--pos)}
.meter--warn{background:var(--warn-soft)} .meter--warn > i{background:var(--warn)}

.stat{display:flex;flex-direction:column;gap:2px}
.stat__k{font-size:var(--fs-xs);color:var(--ink-muted);font-weight:700}
.stat__v{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat__s{font-size:11.5px;color:var(--ink-faint)}  /* 全社平均などの比較を添える */

/* ---------------------------------------------------------------------------
   14. グラフ（棒・単一系列 or 同一色相の2ステップ）
   軸ラベルも実数。単位はパネル見出しに1回だけ書く
   --------------------------------------------------------------------------- */
.chart{position:relative;padding-left:52px;margin-top:var(--sp-3)}
.chart--wide-axis{padding-left:92px}
.chart__plot{position:relative;height:140px}
.chart__gl{position:absolute;left:0;right:0;height:1px;background:var(--grid)}  /* 実線ヘアライン */
.chart__gl--base{background:var(--line)}
.chart__tick{position:absolute;left:-52px;width:46px;text-align:right;font-size:11px;
  color:var(--ink-faint);font-variant-numeric:tabular-nums;transform:translateY(-50%);line-height:1}
.chart--wide-axis .chart__tick{left:-92px;width:84px}
.chart__bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:3px}
/* 棒は 24px を上限。4px の角丸は上端のみ、底辺は角丸なし */
.chart__bar{flex:1;max-width:24px;background:var(--brand);border-radius:4px 4px 0 0;position:relative}
.chart__bar--current{background:var(--brand-soft);border:1px solid var(--brand);border-bottom:0}
.chart__label{position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
/* 件数0の日のうち未完了が出た日の目印 */
.chart__flag{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--warn)}
.chart__x{position:relative;height:26px;margin-top:6px}
.chart__x span{position:absolute;font-size:11px;color:var(--ink-faint);
  transform:translateX(-50%);white-space:nowrap}
.chart__legend{display:flex;gap:var(--sp-4);font-size:var(--fs-sm);
  color:var(--ink-muted);margin-bottom:var(--sp-3)}
.chart__legend i{width:11px;height:11px;border-radius:3px;display:inline-block;
  vertical-align:-1px;margin-right:6px}

/* ---------------------------------------------------------------------------
   15. 注記 / 空状態
   空状態は「何も無い理由」＋「次にする行動」を必ずセットで出す
   --------------------------------------------------------------------------- */
.note{background:var(--surface-2);border-radius:9px;padding:11px 13px;
  font-size:var(--fs-sm);color:var(--ink-muted);line-height:1.7;margin-top:var(--sp-3)}
.note b{color:var(--ink)}
.note a{color:var(--brand);font-weight:700;text-decoration:none}
.note--warn{background:var(--warn-soft);color:var(--on-warn-soft)}
.note--warn b{color:var(--on-warn-soft)}
/* 管理側で足した色と、注記の中の住所（§20.6 から移設 2026-08-06・値は原文のまま）。
   ★モックは .note.warn と .note.lock しか持たないので受け皿が無かっただけ＝恒久の規則。
   ★**--warn より後ろに置くこと**＝同じ強さなので、順番が勝ち負けを決める。 */
.note--ng{background:var(--neg-soft);color:var(--neg);font-weight:700}
/* 「現在の単価」「現在の締め日」の1行＝いま効いている値を大きく出す（オーナー指示 2026-08-10）。
   ★同じ形の2画面（請求単価の編集・締め日の編集）が共用する＝片方だけ大きくしない。
   ★段に乗せる（13px → 24px＝--fs-2xl）＝生の px を書かない（C7 §3b で 26種→8種に寄せた約束）。 */
.note--now{font-size:var(--fs-2xl);line-height:1.5;font-weight:700;color:var(--ink)}
/* ★「現在の◯◯：」と値のあいだを空ける（オーナー指示 2026-08-10）。em で持つ＝文字サイズを
   変えても空きの見え方が変わらない（px で持つと 24px と 32px で詰まって見える）。 */
.note--now b{margin-left:.5em}
.note--muted{background:var(--surface);border:1px solid var(--line);color:var(--ink-muted)}
.note--brand{background:var(--brand-soft);color:var(--brand);font-weight:600}
.note .addr{font-size:var(--fs-lg);font-weight:700}  /* 駐車場の編集：変えられない住所の見せ方 */
.empty{text-align:center;padding:var(--sp-7) var(--sp-5);color:var(--ink-muted);font-size:var(--fs-base)}
.empty__action{margin-top:var(--sp-4)}

/* ---------------------------------------------------------------------------
   16. 操作バー（表の下に固定。行数が多くスクロールするため）
   --------------------------------------------------------------------------- */
.actionbar{display:flex;align-items:center;gap:var(--sp-3);background:var(--nav-bg);
  border-radius:var(--r-manage);padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-3);flex-wrap:wrap}
.actionbar__sel{color:#fff;font-size:var(--fs-base);font-weight:700}
.actionbar__sel small{color:var(--nav-dim);font-weight:600;margin-left:8px;font-size:var(--fs-sm)}
.actionbar__amt{color:#fff;font-size:var(--fs-lg);font-weight:800;
  font-variant-numeric:tabular-nums;margin-left:auto}
.actionbar .btn{border-color:var(--nav-line);background:transparent;color:var(--nav-fg)}
.actionbar .btn:hover{background:rgba(255,255,255,.08)}
.actionbar .btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------------------------------------------------------------------------
   17. ウィザード（単価の一括改定など）
   --------------------------------------------------------------------------- */
.wizard{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-4);flex-wrap:wrap}
.wizard__step{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-md);
  color:var(--ink-faint);font-weight:700}
.wizard__n{width:24px;height:24px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:800}
.wizard__step.is-on{color:var(--ink)}
.wizard__step.is-on .wizard__n{background:var(--brand);border-color:var(--brand);color:#fff}
.wizard__step.is-done .wizard__n{background:var(--pos-soft);border-color:#B4E4D2;color:var(--on-pos-soft)}
.wizard__arrow{color:var(--ink-faint)}
/* 新旧の差分表示 */
.diff{font-variant-numeric:tabular-nums}
.diff__old{color:var(--ink-faint);text-decoration:line-through;margin-right:9px}
.diff__new{font-weight:800}
.diff__up{color:var(--pos);font-weight:800;margin-left:8px;font-size:var(--fs-sm)}

/* ---------------------------------------------------------------------------
   18. レスポンシブ（2段のみ）
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .m-nav{overflow-x:auto}
}
/* ★ホームのカードだけ 1080px の段を持つ（2026-08-07・指示 第5版 §4-1 が 1080/640 と指定）。
   この節の「2段のみ」から外れる1つ。★ほかの画面をこの幅で折り返さないこと（ここは .hcards 専用）。 */
@media (max-width:1080px){
  .hcards{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .m-container{padding:var(--sp-4) var(--sp-3) var(--sp-6)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .page-head h1{font-size:var(--fs-xl)}
  .filterbar{gap:var(--sp-2)}
  .field .control--search{width:100%}
  .hcards{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   19. 印刷（給与明細・締めの記録）
   --------------------------------------------------------------------------- */
@media print{
  /* ★.no-print は「紙に出したくない操作」（印刷ボタン自身・戻るリンク）に付ける印。
     旧 _statement_css.html が隠していたので、ここに無いと**印刷ボタンが紙に出る**（機能の後退）。
     ★旧名（.page-head .acts / .filters）は C7 で外した（2026-08-06）＝新語彙は最初から
     この一覧に在ったので、**印刷時の見え方は移行の前後で変わっていない**。 */
  /* ★帯を2段にしたら**下段もここに足す**（2026-08-07）＝.m-nav だけ隠すと、
     紙に濃紺の帯が1本だけ残る（明細・締めの記録を印刷する画面で出る）。 */
  .m-nav,.m-subnav,.tabs,.filterbar,.presets,.actionbar,.page-head__acts,.crumb,
  .no-print{display:none!important}
  body{background:#fff}
  .panel,.table-wrap{border:1px solid #999;box-shadow:none;break-inside:avoid}
  .card,.rcard,.sum,.f-card{box-shadow:none}
}

/* ---------------------------------------------------------------------------
   19b. 意味色の体系（★恒久。画面をまたいで固定する＝正本は docs/rules/screen.md）
   ---------------------------------------------------------------------------
   赤＝止まっている／橙＝要対応・赤字／緑＝有効・完了／青＝いま効いている。
   ★**ここは §20（移行用の橋）ではない。** モックが意味色の体系を持っていないので新語彙側に
     受け皿が無かっただけで、**消える予定のものではない**（C7-対応表 §4b）。
   ★**§20 の直前に置いてある**＝元は §20.3／§20.4 に在ったので、ここより後ろの規則との
     当たり方（同じ強さのときの勝ち負け）が動かない位置。**並べ替えないこと。**
   ---------------------------------------------------------------------------- */
/* ホームの署別進捗＝速報（青）／確定（緑）／残り（橙）。★数字の系統を色で分ける。 */
.dt td.live{color:var(--brand);font-weight:800}
.dt td.rem{color:var(--warn);font-weight:700}
/* 単価履歴の行の色＝青＝いま効いている／橙＝この期間は付かない（無いのが正常）／
   赤＝ここで止まる（基本給・請求単価が無い＝日報を保存できない）。★D-13：赤の意味は
   CLAUDE.md が正＝「止まっている」。SPEC の「赤を状態表示に使わない」は採らない。 */
.dt tr.is-now td{background:var(--brand-soft)}
.dt tr.hole td{background:var(--warn-soft);color:var(--warn)}
.dt tr.hole.stop td{background:var(--neg-soft);color:var(--neg);font-weight:700}
/* 上の罫の色＝その数字の意味（緑＝売上／橙＝経費／青＝粗利／灰＝人件費）。
   ★意味の対応は画面をまたいで固定する。 */
.kpi--muted{border-top:3px solid var(--ink-muted)}
.kpi--warn{border-top:3px solid var(--warn)}
.kpi--pos{border-top:3px solid var(--pos)}
.kpi--brand{border-top:3px solid var(--brand)}
.pos{color:var(--pos)}
/* ★赤字（粗利がマイナス）は**橙**＝赤は「止まっている」専用（cc3dad1・オーナー決定 2026-08-05）。
   ★**赤字の色はここ1か所**。旧 .neg は 2026-08-06 に削除した（集計を橙へ直して参照0）。
   ★勤務詳細の粗利も同じ橙＝下の1行が両方を持つ（2026-08-07 に .kv__v--minus を畳んだ）。 */
/* ★.kv__v.minus を同じ規則に持たせる＝勤務詳細の粗利は .kv--grand .kv__v（緑・強さ 0,2,0）に
   当たっているので、素の .minus（0,1,0）では負ける。**色の値はこの1行だけ**にするための形。 */
.minus,.kv__v.minus{color:var(--warn)}

/* ---------------------------------------------------------------------------
   19c. 管理画面の部品（★恒久。まだ「役割の体系」に昇格していない、画面固有のもの）
   ---------------------------------------------------------------------------
   ★ここに在るのは**旧語彙ではない**＝新語彙(§1〜§19)にもモックにも対応物が無い、その画面の
     ための部品。§20（移行用の橋）に置いたままだと、将来の掃除が「消し忘れ」と読む。
   ★役割で切った §1〜§19 の性格を保つため、**画面名の節を増やさず1節にまとめ**、中は
     コメント見出しで区切る。**役割の語彙に育ったものは §1〜§19 へ昇格させてよい。**
   ★**§20 の直前に置いてある**＝当たり順を保存する位置。**並べ替えないこと。**
   ---------------------------------------------------------------------------- */
/* == ホーム（manage_dashboard）：本日の進捗バーと短い一覧 */
.board{display:grid;gap:22px}
.board .card{padding:18px}
.sect-title{font-size:var(--fs-base);font-weight:800;color:var(--ink);margin:0 0 10px;
  display:flex;align-items:baseline;gap:8px}
.sect-title small{font-weight:600;color:var(--ink-muted);font-size:var(--fs-xs)}
.bars{display:grid;gap:12px;margin-bottom:14px}
.pbar-head{display:flex;justify-content:space-between;font-size:var(--fs-sm);margin-bottom:5px}
.pbar-head b{font-weight:800}
.pbar-head .val{color:var(--ink-muted);font-variant-numeric:tabular-nums}
.pbar-track{height:12px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-pill);overflow:hidden}
.pbar-fill{height:100%;background:linear-gradient(90deg,var(--brand),#3A63F0);
  border-radius:var(--r-pill)}

/* ホーム 構成1：本日のヒーロー数字。★1画面に1つだけ（SPEC §7.B M-1）＝2つ置くと、
   どちらを見ればいいか分からなくなり「今いちばん大事な数」という役目が消える。 */
.hero{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.hero__num{font-size:48px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.hero__unit{font-size:1rem;font-weight:800;color:var(--ink-muted)}
.hero__sub{font-size:var(--fs-sm);color:var(--ink-muted)}
/* 本日の内訳の1行（人数）。★数字カードにしない＝「今」の主役はヒーロー数字ひとつ。 */
.breakdown{font-size:var(--fs-sm);color:var(--ink-muted);margin-top:12px}

/* ホーム 構成2：今日やること＝潰し込みのリスト。
   ★色は画面共通の意味のまま＝橙＝要対応／緑＝片づいている。赤は使わない（赤＝止まっている）。 */
.todo{display:grid;gap:10px}
.todo__row{border:1px solid var(--line);border-radius:var(--r-manage);padding:11px 13px;
  background:var(--surface)}
.todo__row--warn{border-left:3px solid var(--warn)}
.todo__row--ok{border-left:3px solid var(--pos)}
.todo__row--muted{border-left:3px solid var(--ink-muted)}
.todo__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:var(--fs-md);font-weight:800}
.todo__note{font-size:var(--fs-xs);color:var(--ink-muted);margin-top:4px}
.todo__li{font-size:var(--fs-sm);padding:6px 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.todo__li:first-of-type{margin-top:6px}
.todo__late{color:var(--warn);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ホーム 構成4：今月は「帯1行」（D-50）。★数字カードは置かない＝正本は集計。
   ★掘り下げ（絞り込み・期間切替・順位）をここに足さないこと。足したくなったら集計に足す合図。 */
.monthband{display:flex;flex-wrap:wrap;align-items:baseline;gap:20px;
  border:1px solid var(--line);border-radius:var(--r-manage);padding:12px 15px;
  background:var(--surface)}
.monthband__item{font-size:var(--fs-xs);color:var(--ink-muted)}
.monthband__item b{display:block;font-size:var(--fs-lg);color:var(--ink);font-weight:800;
  font-variant-numeric:tabular-nums;margin-top:2px}
/* 「月額固定分は売上未計上」＝欠けていることを**数字の隣**で言う（D-20）。共通の .hint を使う。 */
.monthband__item .hint{display:block;font-size:11px}
.monthband__more{margin-left:auto;font-size:var(--fs-sm);font-weight:700}

/* == 締め（manage_close）
   ★この画面の旧 <style> は input[type=date] と select を**素の要素セレクタ**で書いていた。
     画面ごとの <style> だったから成立していただけで、そのまま base.css へ移すと
     **全画面の日付欄とプルダウン**（絞り込み帯・フォーム・帯のエリア切替）に効いてしまう。
     この画面の入れ物は2つとも .card-box なので、その配下に閉じてから持ち込む。
   ★element+class（button.primary）は素の要素セレクタではないが、名前が一般的で
     他の画面と衝突しうるので、同じく .card-box 配下に閉じる。
   ★**`table.list` は 2026-09-09 に撤去した**（表の正本は `.dt` の1本）。 */
.card-box{background:var(--surface);border-radius:8px;padding:20px;
  box-shadow:var(--shadow-pop)}
.card-box + .card-box{margin-top:18px}
.filter-form{max-width:640px}
/* ★★締め処理の絞り込み＝**「◯月分」の窓と日付の窓を同じ高さにする**（2026-08-18・
   オーナー指示「同じ表記が他に4か所くらいある、それも全て枠の大きさをその行の枠と同じに」）。
   ★高さを padding 任せにしない（`docs/rules/screen.md`）＝ブラウザは同じ padding でも
   `select` と `input[type=date]` を別の高さで描く（プルダウンだけ背が低い）。
   ★**この枠だけに閉じる**（`.filter-form` は締め処理の絞り込みカード）＝`.card-box` に
   足すと、管理のほぼ全画面の窓の高さが動く。 */
.filter-form input[type=date],.filter-form select{height:var(--ctl-h);padding:0 10px}
.card-box input[type=date],.card-box select{width:100%;padding:10px;margin-top:5px;
  border:1px solid var(--line);border-radius:4px;font-size:var(--fs-base)}
.card-box label.fld{display:block;margin-top:16px;font-weight:bold;color:var(--ink-muted)}
.period{display:flex;gap:10px;align-items:center}
.period > div{flex:1}
.card-box button.primary{margin-top:22px;background:var(--brand);color:var(--on-brand);border:none;
  padding:12px 20px;border-radius:4px;font-weight:bold;font-size:var(--fs-base);
  cursor:pointer;font:inherit}
.card-box button.unlock{background:var(--surface);color:var(--ink-muted);border:1px solid var(--line)}
/* ★★（2026-09-09 に撤去）ここには `.card-box table.list` の一式があった＝**管理の一覧表が
   2流儀**で、締め処理と締めの記録だけ行の高さ・見出しの字・見出しの貼り付き・行の hover が
   違っていた。**正本は `.dt`**（他13テンプレート）なので、その2画面を `.dt` へ寄せた。
   ★戻さないこと＝表の規則を2つ持つと、片方だけ直る。 */
/* ★締め画面の「締め状況」の列だけ、左に間を取る（2026-08-20・オーナー指示「請求額と締め状況の
   間を今の3倍に」＝10px → 30px）。★**この表だけに閉じる**（`#closeForm`）＝ほかの一覧の
   最後の列まで広がると、関係のない画面の見た目が動く。 */
#closeForm .dt th:last-child,#closeForm .dt td:last-child{padding-left:30px}
/* ★D-13：未完了は「注意」＝橙／単価未設定は「止まっている」＝赤。旧 .open-warn は両方を
   赤にしていたので、意味ごとに分ける（色を見て判断できるようにするのが色分けの目的）。 */
.open-warn{color:var(--warn);font-weight:bold}
.rate-missing-warn{color:var(--neg);font-weight:bold}
/* ★★締め状況＝**締めが効いている行は青**（オーナー決定 2026-08-11）。
   ★`screen.md` の「青＝いま効いている」を**「締めが効いている」まで広げた決定**＝緑（完了）では
     なく青にする。**同じ列の3か所（給与の件数・請求の件数・勤務0件の「締め済み」）を全部青に
     揃えてある**＝1つの列で色が割れると、色を見て判断できなくなる。
   ★（改名の記録・2026-08-11）**旧 `.status-done`**（緑）から改名した＝名前が「完了」のままだと
     青との食い違いが残る。**旧名を戻さないこと。** */
.status-closed{color:var(--brand);font-weight:bold}
.status-none{color:var(--ink-muted)}
.card-box .actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.card-box .actions button{margin-top:0}

/* 単価の履歴（manage_rates） */
.rgroup{margin-bottom:22px}
.rgroup .sec{margin:0 0 8px;font-size:var(--fs-base)}

/* エリア選択（manage_area_select）。<a> でも <button>（POST送信）でも同じ見た目になるよう
   ボタン既定を打ち消す（border/背景/フォント/文字寄せ/幅/カーソル）。 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px}
.area-card{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:var(--surface);border:0;border-radius:10px;padding:22px 20px;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow-pop);
  border-left:5px solid var(--brand);transition:transform .05s}
.area-card:hover{transform:translateY(-2px);box-shadow:0 3px 10px rgba(16,24,40,.15)}
.area-card.all{border-left-color:var(--pos)}
.area-card .icon{font-size:26px}
.area-card .name{font-weight:bold;font-size:18px;margin-top:8px}
.area-card .desc{font-size:var(--fs-xs);color:var(--ink-muted);margin-top:4px}

/* == 勤務明細（manage_statements） */
.stmt-index{display:grid;gap:14px}
.si-staff{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-pop);padding:14px 16px}
/* ★社員IDは氏名の上に小さく（2026-08-21＝氏名とは別のデータなので混ぜて書かない）。 */
.si-id{font-size:var(--fs-sm);color:var(--ink-muted)}
.si-name{font-weight:700;margin-bottom:8px}
.si-months{display:flex;flex-wrap:wrap;gap:8px}
.si-chip{text-decoration:none;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.35rem .8rem;font-size:var(--fs-sm);font-weight:600;
  color:var(--brand)}

.protected{color:var(--ink-muted);font-size:var(--fs-xs);text-align:right}

/* == 作業の項目（manage_work_type_items）＝**エリアごとに別の表**なので、列幅を決め打ちして
   **枠どうしで縦を揃える**（2026-09-07・オーナー指示「縦の列がずれていて見にくい」）。
   ★**`.dt` そのものは触らない**（触ると勤務一覧・締め処理・集計の表が動く）＝この画面だけに当てる。
   ★**中身は折り返す**（`.dt td` は既定で折り返さない）＝決め打ちの幅からはみ出すと
     **横のスライドが出る**（オーナー「なるべく横のスライドを無くしたい」）。 */
/* ★★**列は7つ**（2026-09-07・オーナー指示で「状態」「初期値にしている人」を落とした）＝
   **その空いた幅で1行に収める**。★**行を折り返さない**（`white-space:nowrap`）＝
   **2段になるのをやめたい**というのが指示の狙い。
   ★**契約名称だけは折り返す**＝名称が3つ並ぶ行があり（例＝単価A／単価B／単価C）、
     そこだけは1行に入らない。**はみ出して隠れるより、折り返して全部見えるほうがよい**
     （画面が嘘をつかない＝`docs/rules/screen.md`）。 */
.dt--wti{table-layout:fixed;width:100%}
.dt--wti th,.dt--wti td{white-space:nowrap;overflow-wrap:anywhere;vertical-align:middle}
.dt--wti th:nth-child(1),.dt--wti td:nth-child(1){width:22%}
.dt--wti th:nth-child(2),.dt--wti td:nth-child(2){width:12%}
.dt--wti th:nth-child(3),.dt--wti td:nth-child(3){width:12%}
.dt--wti th:nth-child(4),.dt--wti td:nth-child(4){width:8%}
.dt--wti th:nth-child(5),.dt--wti td:nth-child(5){width:21%;white-space:normal}
.dt--wti th:nth-child(6),.dt--wti td:nth-child(6){width:8%}
.dt--wti th:nth-child(7),.dt--wti td:nth-child(7){width:17%}
/* 項目名の欄＝枠の中いっぱいに（決め打ちの幅からはみ出させない）。★**折り返さない**＝
   欄とボタンが2段になるのをやめる（指示の本体）。 */
.dt--wti td .row-inline{flex-wrap:nowrap;gap:4px}
.dt--wti td input[type="text"]{width:100%;min-width:0}
/* ★**種類が未設定の行**（請求・給与を決める欄が2列ぶんに入る）だけは折り返す＝
   選択肢が2つとボタンで、1行には入らない。 */
.dt--wti td[colspan]{white-space:normal}
/* 「削除した項目の表示」＝ふだんは閉じている（一番下・`<details>`）。 */
.wti-removed{margin-top:18px}
.wti-removed > summary{cursor:pointer;font-weight:700;color:var(--brand);font-size:var(--fs-sm);
  padding:8px 0}

/* == 連絡（メッセージ）＝★**管理シェルと現場シェルの両方が使う**（本文・差出人・返信の欄）。
   ★**現場だけの部品は §20.14 に置いてある**（未読の印 `.msg-new`）＝あちらは「現場画面の節」で、
     ここは「役割の部品」。**同じ名前を2か所に書かないこと。**
   ★本文は改行をそのまま出す＝書いた人が行を分けた意味（箇条書き・日付の並び）を消さない。 */
.msg-meta{display:grid;gap:2px;padding:4px 0 12px;border-bottom:1px solid var(--line)}
.msg-meta span{color:var(--ink-muted);font-size:.78rem}
.msg-body{white-space:pre-wrap;line-height:1.8;padding:14px 0;font-size:1rem}
/* やり取りの続き（返信）＝**元の連絡と同じ幅のまま、線で区切るだけ**。左右にずらして
   吹き出しにしない＝この画面は2人の雑談ではなく、**業務の連絡の記録**。 */
.msg-reply{border-top:1px solid var(--line);margin-top:6px}
/* 返信の入力欄。★現場では `.wr-card` の中に置くので、そちらの入力欄の見た目が勝つ
   （同じ強さなら後ろ＝§20.14 が勝つ）＝**現場の流儀を上書きしない**。 */
.msg-form{margin-top:14px}
.msg-form label{display:block;font-weight:700;color:var(--ink-muted);font-size:.85rem;
  margin-bottom:6px}
.msg-form textarea{width:100%;padding:.8rem .85rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;
  font-size:1rem;resize:vertical;min-height:70px}
.msg-form textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.msg-form .btn{margin-top:10px}
/* 読んだ人・まだの人の名前を並べる（manage_message_detail）
   ★**名前で出す**（オーナー決定 2026-08-27）＝数だけだと「誰に念を押せばいいか」が分からない。
   ★色は画面共通の意味のまま＝**まだの人は橙（注意）**。赤にしない＝連絡は届いていて、
     止まってはいない（`docs/rules/screen.md`「赤＝止まっている」）。 */
/* まだ自分が読んでいない行は太字（一覧・manage_messages）。★開けば外れる。
   ★**色は付けない**＝色の意味は画面をまたいで固定してある（赤＝止まっている等）ので、
     「まだ読んでいない」に新しい色を作らない。太さだけで足りる。 */
.dt tr.msg-unread td{font-weight:700;color:var(--ink)}
.msg-people{display:flex;flex-wrap:wrap;gap:8px}
.msg-person{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-2);
  font-size:var(--fs-sm)}
.msg-person small{color:var(--ink-muted);font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums}
.msg-person--waiting{background:var(--warn-soft);border-color:var(--amber);color:var(--on-warn-soft)}

/* ===========================================================================
   20. Phase 0 の移行用 —— 旧クラス（テンプレートの <style> から引き取ったもの）
   ---------------------------------------------------------------------------
   ここに置いてある理由（読まずに消さないこと）:

   ・§1〜§19 は再設計後の語彙（.badge / .kv / .filterbar / .page-head__acts …）。
     テンプレートには**旧語彙**（.pill / .bd-row / .filters / .acts …）で書かれた場所が残る。
     旧名にも見た目が当たっていないと画面が素の HTML に戻るので、この節がその橋になる。

   ★★ この節は「一時的なもの」と「恒久のもの」が混ざっている。**丸ごと削除しないこと。**

   ・**一時的＝管理画面の節**（20.1 の .m-nav* / 20.2 の残り / 20.3 / 20.9 / 20.13 の .space）。
     C7/C8 で管理側を新語彙へ寄せ終わったら、使われなくなったものから消してよい。
   ・**恒久＝現場（スタッフ）画面の節**（20.14 現場画面／20.15 巡回ルート／20.16 住所ピッカー、
     および 20.1 の .container・.card、20.7 のフォーム部品のうち現場が使う分）。
     **現場画面は再設計の対象外（DECISIONS.md D-15）＝置き換える C8 が来ない。**
     ここを消すと、勤務開始・終了報告・履歴・巡回ルート・ログインの見た目が丸ごと落ちる。
   ・迷ったら「その画面は管理コンソールか？」で判断する。違うなら消さない。

   ★現場が使っている共有クラス（.btn .card .container .field .input .note .empty …）の
     **定義そのものを変えないこと**（D-15：現場の見た目はこれ以上動かさない）。管理側だけ
     見た目を変えたいときは、**管理側にスコープを切って足す**（例: .filterbar .input{...}）。

   この節に足すときの決まり:
   ・★**この節ではトークン（--sp-* / --fs-* / --r-manage …）を使わない。原本のリテラル値を
     そのまま持つ。** §20 は「旧の見た目を再現する」ための節であって、新しい寸法体系に
     合わせる場所ではない。20px を --sp-5(24px) に丸めた時点で「移した」ではなく「変えた」
     になる（実際に C1 でそれをやり、12か所ずれた）。トークンに寄せるのは C7/C8 の仕事。
     ただし**原本自身がトークンだったもの**（色・--r・--r-sm・--r-pill・--shadow）はそのまま。
   ・色は :root のトークンだけ。新しい色を作らない。
   ・§1〜§19 に**同じ名前の定義が既にあるものは、ここに書かない**（＝そこは新しい見た目に
     切り替わる。それが Phase 0 で見た目が変わる唯一の場所になる）。
     書かなかったもの: .btn .btn--primary .btn--ghost .btn--danger .btn--sm .page-head
     .table-wrap .dt(旧 table.dt) .kpi .kpis .empty .note .note--warn .field .muted
     .m-container .m-nav
   ・画面をまたいで使われる名前（.empty .actions .addr .done .rcard など）を**素で書かない**。
     必ず親クラスでスコープする。素で書くと、名前が同じだけの別画面に漏れる。
   =========================================================================== */

/* --- 20.1 器 ------------------------------------------------------------- */
/* 現場画面の外枠（base.html の <main class="container">）。C7 で .f-container へ。 */
.container{max-width:640px;margin:0 auto;padding:16px}

/* 影のある白いカード。管理側は §8 の .panel（線で区切る）に寄せるが、現場側は影のまま。 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-pop)}

/* 列が多い表の画面だけ広げる（勤務一覧・集計）。★幅は「広い／狭い」の2つだけ＝画面側で
   .m-container を上書きしない（CLAUDE.md）。 */
.m-container--wide{max-width:min(1320px,96vw)}

/* ★帯は C7 で新語彙（§3 の .m-nav__*）へ移した（2026-08-06）＝この節から帯の規則は消えた。
   移した先と対応は docs/redesign/C7-対応表.md §5。★.container / .card / .m-container--wide は
   帯ではないので上に残っている（.container と .card は現場も使う＝D-15 で触らない）。 */

/* --- 20.2 見出し・注記 --------------------------------------------------- */
/* ★h1.page-title の上書きは (c-1) で外した（2026-08-07）＝見出しは §5 の .page-head h1 が
   決める＝**20px → 24px**（モック＝新語彙の値）。余白は §0 のリセット
   （h1,h2,h3,h4{margin:0}）が持つので、外しても崩れない。 */
.page-head .sub{font-weight:400;font-size:var(--fs-md);color:var(--ink-muted)}
/* 見出しの下の一言（その画面が何をする所か）と、画面内の節見出し。 */

/* --- 20.3 表の補助（§11 の .dt に足りない分だけ）------------------------- */
/* ★横スクロールを残す。§11 の .table-wrap は overflow:hidden で、§11 の .dt td は
   nowrap 固定＝この1行が無いと、勤務一覧(12列)・集計(9列) が幅に収まらないとき
   **スクロールもできずに切れる**（画面が嘘をつく）。列を8つに減らす Phase 1 まで残す。 */
.table-wrap{overflow-x:auto}
.dt .lid{font-variant-numeric:tabular-nums;font-weight:700}     /* ログインID */
/* 備考のような長文セル。★§11 の .dt td は nowrap 固定なので、これが無いと備考が1行に潰れる。 */
.dt td.wrap{white-space:normal;max-width:220px;color:var(--ink-muted);vertical-align:top}
.cell-act{display:flex;gap:6px}              /* 行末の操作ボタン。Phase 1 で廃止（詳細画面へ） */
/* ★削除のボタンだけ少し離す（2026-08-18・オーナー指示「もうちょっとだけ右に寄せて」）＝
   ［変更］の真横だと**押し間違いが起きる並び**でもある（隣は戻せない操作）。
   ★**離すのはこのボタンだけ**＝`.cell-act` の 6px を広げると、ほかの表の行末も動く。
   ★間は 64px（6+58）＝2026-08-18 に 16 → 32 → 64px と2回広げた（オーナー実機）。 */
.cell-act .rate-del{margin-left:58px}
/* ★請求明細の開閉マーク（▸/▾）＝**字だけ大きく**する（2026-08-19・オーナー指示
   「▲マークをもう少し大きくできるかな？」→ 同じ日に「もう少し大きく」で 1.15 → 1.6rem）。
   ★ボタンの高さは変えない（行がふくらむ）＝上下の padding は 0 のまま。 */
.bd-toggle{font-size:1.6rem;line-height:1;padding:0 10px}
.dt .who{color:var(--ink-muted);font-size:var(--fs-xs)}               /* 単価履歴の「最終更新」 */
.dt td.done{color:var(--pos);font-weight:700}

/* --- 20.4 （空）------------------------------------------------------------
   ★中身は 2026-08-06 に片づいた＝意味色（.kpi--* / .pos / .neg / 表の色）は **§19b の
   「意味色の体系」へ移した**（恒久。§20 は移行用の橋なので、消える予定でないものを置かない）。
   .kpi__v の等幅数字1行は §13 の .kpi__v へ併合（金額は右寄せ＋等幅＝SPEC §6.3）。
   旧 .k-label / .k-value / .k-sub は M-1 で参照0になったため削除済み。 */

/* --- 20.7 フォーム ------------------------------------------------------- */
/* ★§1〜§19 には入力欄の見た目が1行も無い。ここが Phase 0 で一番大きい追記。
   ★この節は**恒久**（現場が .field/.input/.label/.err-text/.cancel-link を使う＝D-15 で
     置き換える回が来ない）。定義そのものを変えないこと。管理フォームだけ見た目を変えたい
     ときは、この節の後半にある **.m-container--form .panel** のスコープに足す。 */
.label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink-muted);margin-bottom:.4rem}
.input,.select,.textarea{width:100%;padding:.82rem .85rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:1rem}
.textarea{resize:vertical;min-height:68px}
/* ★請求明細（`/manage/billing/`）の「◯月分」＝窓が1つだけの絞り込み。
   ★**幅は中身なり**（`.select` の既定は width:100%＝この画面では横いっぱいになる）／
   ★**高さは絞り込みの帯と同じ 34px を明示**（padding 任せだと `select` だけ背が低い＝
   `docs/rules/screen.md`「窓の高さを揃えて欲しい」）。★`.filters` を使う画面はここだけ。 */
.filters .select{width:auto;height:34px;padding:0 .6rem;font-size:var(--fs-md)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.input.is-error,.select.is-error,.textarea.is-error{border-color:var(--neg);
  box-shadow:0 0 0 3px var(--neg-soft)}
.err-text{color:var(--neg);font-size:var(--fs-sm);margin-top:.35rem;font-weight:600}
.help{font-size:var(--fs-xs);color:var(--ink-muted);margin-top:4px}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:24px}
.cancel-link{color:var(--ink-muted);text-decoration:none}
/* 取り返しのつかない操作（警察署の削除）だけを右端へ送る＝保存から離して置く。
   .filterbar__rt（絞り込み帯の CSV出力を右端へ送るもの）と同じ作り・同じ名前の付け方。 */
.form-actions__rt{margin-left:auto}

/* 管理のフォーム型の画面＝1列・上から下。器は §3 の .m-container--form（幅 --w-form）、
   中身の箱は §8 の .panel（管理は影なし・線で区切る）。旧 .form-card は C8 で廃止した。

   ★スコープを **.m-container--form .panel** にしている理由（緩めないこと）：
     ・.panel は現場（勤務開始・終了・日報訂正の .wr-card .panel）も使う共有クラス。素の
       .panel に入力欄の見た目を足すと、対象外の現場画面が黙って動く（D-15）。
     ・.m-container--form だけに広げると、_manage_form.html の {% block after %} まで届く。
       そこには住所ピッカー（.apick-zip input / .apick-foot input＝専用の見た目を持つ）と
       駐車場の削除フォームが入っており、旧 .form-card では**当たっていなかった**。
     ・つまりこの2語で、旧 .form-card が覆っていた範囲とちょうど同じになる。 */
.m-container--form .panel .field{margin-top:16px}
.m-container--form .panel .banner{margin-bottom:6px}
/* Django が描く素の <input>/<select>/<textarea> にはクラスが付かないので、パネルの中は
   要素セレクタで .input と同じ見た目にする。★欄ごとにクラスを書かせない＝書き忘れで
   1画面だけ崩れる、を仕組みで防ぐ。チェックボックス・ラジオは幅を伸ばさない。 */
.m-container--form .panel input:not([type=checkbox]):not([type=radio]),
.m-container--form .panel select,
.m-container--form .panel textarea{width:100%;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-base)}
/* ★窓の高さを1つに揃える（2026-08-13・オーナー指示）＝プルダウンも金額も日付も同じ高さ。
   ★**高さを padding だけで決めないこと**＝select と input はブラウザごとに行の高さの扱いが
     違い、同じ padding でも別の高さになる（「プルダウンだけ背が低い」の正体）。
   ★textarea は複数行なので高さを固定しない（縦の padding で持つ）。 */
.m-container--form .panel input:not([type=checkbox]):not([type=radio]),
.m-container--form .panel select{height:var(--ctl-h);padding:0 .8rem;line-height:normal}
.m-container--form .panel textarea{padding:.7rem .8rem;resize:vertical;min-height:64px}
.m-container--form .panel input:focus,
.m-container--form .panel select:focus,
.m-container--form .panel textarea:focus{outline:none;
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
/* ラジオ・チェックの群（所属エリア・権限など）。Django は <div id="id_x"> の中に
   <div><label><input> 名前</label></div> を並べるので、欄の中の**最初の div だけ**を箱にする
   （help やエラーの div まで箱にしない）。★id 名で当てない＝画面が増えても効くように。 */
.m-container--form .panel .field--choices > div:first-of-type{display:flex;flex-wrap:wrap;
  gap:8px 14px;padding:10px 12px;background:var(--surface-2);border-radius:var(--r-sm)}
.m-container--form .panel .field--choices > div:first-of-type > div{margin:0}
.m-container--form .panel .field--choices > div:first-of-type label{display:inline-flex;
  align-items:center;gap:5px;font-weight:500;cursor:pointer;margin:0;white-space:nowrap}
/* 単独のチェック（「〜を付ける」）は、ラベルの右横に並べる。 */
.m-container--form .panel .field--toggle{display:flex;align-items:center;gap:10px}
.m-container--form .panel .field--toggle > .label{margin:0}

/* --- 20.7b 管理フォームを PC の1画面に収める（2026-08-13・オーナー指示）--------------
   オーナーの言葉＝「スマホ用のデザインになってる。PC画面用にして1画面で表示できるようにしたい」。
   ★**原因は幅ではなく「1列と決め打ちだったこと」**＝欄を縦に1本で積むので、欄が26個ある画面は
     どれだけ器を広げても縦に長いままになる。だから器（--w-form）と一緒に**並べ方**を足す。
   ★**欄を減らす・隠すことでは解決しない**（§画面の作法「設定項目は常に表示する」）＝
     隠すと、そこに設定があること自体が伝わらない。**並べ替えもしない**（枠と並び順はフォーム側）。
   ★**画面側に書かせない**＝ここに置くことで、スタッフ・警察署・駐車場・エリア設定が同じ形になる。 */

/* (1) 欄を2列に並べる。★広い欄（複数行・選択肢の群）だけ横いっぱい＝ .field--wide */
.m-container--form .panel .fieldgrid{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-5)}
/* グリッドの間隔は gap が持つ＝行ごとの margin と二重にしない（片方だけ効いて段差になる）。 */
.m-container--form .panel .fieldgrid > .field{margin-top:0}
.m-container--form .panel .field--wide{grid-column:1 / -1}

/* (2) 枠（card-box）どうしも2列に並べる＝背の低い枠を横に置いて、縦の長さを半分にする。
   ★align-items:start＝背の高い枠に合わせて低い枠が伸びない（空白の箱に見えるのを防ぐ）。 */
.m-container--form .panel .cardgrid{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4);align-items:start}
.m-container--form .panel .card--wide{grid-column:1 / -1}

/* (3) 表の中の「窓 ＋ 単位（円 / 件）」を1行に並べる。
   ★**このクラスはテンプレートが前から書いていたのに、指定が1行も無かった**（2026-08-13 に発見）
     ＝名前だけあって効いていない状態で、並びも高さもブラウザ任せになっていた。 */
.m-container--form .panel .field--inline{display:flex;align-items:center;gap:var(--sp-2)}
.m-container--form .panel .field--inline .help{margin-top:0;white-space:nowrap}

/* (4) 表の行の中で縦位置を揃える（オーナー指示「履歴・削除ボタン、契約開始年月日もそろえて」）。
   ★**上に寄せる（middle にしない）**＝日付の下に「2026-04-01 〜」が付く列だけ背が高くなるので、
     中央に寄せると**その列の窓だけ上に、ボタンだけ下にずれる**。
   ★素の文字（種類の名前）とボタンは、窓と同じ帯（--ctl-h）の中で縦中央に置く。
   ★**スコープをフォームの中だけにすること**＝`.dt` は一覧の画面も使う共通クラスで、
     素で当てると一覧の行の高さが全部変わる。 */
.m-container--form .panel .dt td{vertical-align:top;line-height:var(--ctl-h)}
.m-container--form .panel .dt td .field,
.m-container--form .panel .dt td .cell-act,
.m-container--form .panel .dt td .help{line-height:1.5}
.m-container--form .panel .dt td .field{margin:0}
.m-container--form .panel .dt td .field--inline{min-height:var(--ctl-h)}
.m-container--form .panel .dt td .cell-act{align-items:center;min-height:var(--ctl-h)}

/* (5) グリッドのマスは中身がはみ出しても広がらない＝長い署名のプルダウンで列がずれない。
   ★`.field` を使わないマス（勤務の欄＝現場と共有）もあるので、**直接の子ぜんぶ**に当てる。 */
.m-container--form .panel .fieldgrid > *{min-width:0}

/* 窓が狭くなったら1列に戻す（管理は PC 前提だが、狭い窓で崩れたまま使わせない）。 */
@media (max-width:1000px){
  .m-container--form .panel .fieldgrid,
  .m-container--form .panel .cardgrid{grid-template-columns:1fr}
}

/* (6) 短い欄だけを**1行に並べる**（オーナー指示 2026-08-18＝「契約形態、契約名称、請求単価、
   有効開始日は横幅がそんなにいらないので、一行で表示できるかな？」）。
   ★**既定（2列）を置き換えない**＝使うのは「欄が4つ以下で、どれも短い」画面だけ
     （いまは単価の追加画面）。素の `.fieldgrid` と**併記**して使う。
   ★**この節は上の @media より後に置く**＝同じ強さの指定なので、**後に書いたほうが勝つ**。
     だから狭い窓のぶんも、ここでもう一度書く（先に書くと 1000px 以下で2列に戻ってしまう）。 */
.m-container--form .panel .fieldgrid--row{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1200px){
  .m-container--form .panel .fieldgrid--row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .m-container--form .panel .fieldgrid--row{grid-template-columns:1fr}
}

/* --- 20.7c 勤務の欄を管理シェルでも整える（2026-08-13）------------------------------------
   ★**なぜ要るか**＝勤務の欄（`_work_report_fields.html`）は**現場と管理で共有**しているのに、
     ラベル・行・経費の見た目は **`.wr-card ...`（現場のシェル）にしか無かった**＝管理側では
     素の HTML のまま並んでいた（ラベルが本文と同じ字・時刻の欄が縦に落ちる）。
   ★**共有の部品に `.wr-card` を足して解決しないこと**＝現場の見た目が管理に、管理の見た目が
     現場に漏れる（`docs/rules/screen.md`「この2系統を混ぜない」）。**印を1つ（`.wr-fields`）
     置いて、管理側の指定だけをここに書く。**
   ★★**現場の指定は1行も触っていない**（`.wr-card` の節はそのまま）。 */
.m-container--form .panel .wr-fields label{display:block;font-size:var(--fs-sm);font-weight:700;
  color:var(--ink-muted);margin:var(--sp-4) 0 4px}
/* マスの先頭のラベルは上の余白を持たない（グリッドの gap と二重にしない）。 */
.m-container--form .panel .wr-fields .fieldgrid > * > label:first-child{margin-top:0}
/* 時刻・メーター・経費の「横に並ぶ欄」。★これが無いと 10 : 00 ～ 17 : 30 が縦に落ちる。 */
.m-container--form .panel .wr-fields .row{display:flex;gap:var(--sp-2);align-items:center}
.m-container--form .panel .wr-fields .row input,
.m-container--form .panel .wr-fields .row select{text-align:center}
.m-container--form .panel .wr-fields .exp-row input[type="text"]{flex:2;text-align:left}
.m-container--form .panel .wr-fields .exp-row input[type="number"]{flex:1;text-align:right}
/* チェックつきのラベル（自家用車を使用／写真を削除／領収書を選ぶ）は横並びのまま。
   ★上の `label{display:block}` に飲まれると、チェックだけが上の行に落ちる。 */
.m-container--form .panel .wr-fields .inline-check,
.m-container--form .panel .wr-fields .exp-clear,
.m-container--form .panel .wr-fields .exp-file{display:inline-flex;align-items:center;
  gap:var(--sp-2);font-weight:500;color:var(--ink);margin-top:0}
.m-container--form .panel .wr-fields .inline-check input,
.m-container--form .panel .wr-fields .exp-clear input{width:auto;height:auto}
/* 経費の1行ぶん＝どこまでが1件かを線で区切る（現場と同じ考え方・指定は別）。 */
.m-container--form .panel .wr-fields .exp-unit{padding:var(--sp-3) 0;
  border-bottom:1px dashed var(--line)}
.m-container--form .panel .wr-fields .exp-unit:last-of-type{border-bottom:0}
.m-container--form .panel .wr-fields .exp-thumb img{max-width:160px;border-radius:var(--r-sm);
  border:1px solid var(--line)}
/* その日だけの手当の1行（2026-08-13）＝経費の行と同じ見せ方（どこまでが1件かを線で区切る）。
   ★項目のプルダウンを広く、金額を狭く＝金額の欄に署名の長さは要らない。 */
.m-container--form .panel .wr-fields .wal-unit{padding:var(--sp-3) 0;
  border-bottom:1px dashed var(--line)}
.m-container--form .panel .wr-fields .wal-unit:last-of-type{border-bottom:0}
.m-container--form .panel .wr-fields .wal-row select{flex:2}
.m-container--form .panel .wr-fields .wal-row input[type="number"]{flex:1;text-align:right}

/* --- 20.8 バナー（Django messages。両シェルが描画）----------------------- */
/* ★赤は「操作が失敗した」＝止まっている側。状態表示ではないので D-13 の対象外。 */
/* ★★橙（`.banner--warn`）＝**操作は通ったが注意**（2026-08-12・オーナー判断）。
   `screen.md`「赤＝止まっている／橙＝注意」に揃えた＝それまで **success 以外は全部赤**で、
   退社日の警告（締めは通っている）が「締められなかった」と読める色で出ていた。
   ★**文字色は `--warn` ではなく `--on-warn-soft`**＝`--warn-soft` の上では薄くて読めない
   （`.badge--incomplete` と同じ値＝新しい流儀を作らない）。 */
.banner{padding:.75rem .95rem;border-radius:var(--r-sm);font-weight:700;font-size:var(--fs-md);
  text-align:center}
.banner + .banner{margin-top:8px}
.banner--ok{background:var(--pos-soft);color:var(--pos)}
.banner--ng{background:var(--neg-soft);color:var(--neg)}
.banner--warn{background:var(--warn-soft);color:var(--on-warn-soft)}
/* ★★灰（`.banner--info`）＝**中立のお知らせ**（操作は通ったが、変わったものが無い。
   2026-08-12・オーナー決定）。それまで **success/warning 以外は全部赤**だったので、
   「入れる内容がありませんでした。」が「止まっている」の色で出ていた。
   ★**3つとも既存トークン**＝`.badge--fixed`（§7）と同じ組み（`--surface-2`＋`--ink-muted`
   ＋`--line` の枠）。新しい灰を発明しない。
   ★**この枝だけ枠線を持つ**＝灰の地は本文の背景（`--bg`）とほぼ同じ明るさで、枠が無いと
   帯の形が出ない（緑・橙・赤は色みで分かるので枠がいらない）。枠の見え方は `.panel` と同じ
   （白地＋`--line` が本文の上で読めているので、同じ組みなら読める）。 */
.banner--info{background:var(--surface-2);color:var(--ink-muted);border:1px solid var(--line)}

/* --- 20.9 Pマーク・ボタンの追加 modifier ---------------------------------- */
/* ★.pill と .pill--brand/pos/warn/muted は 2026-08-06 に削除した＝管理側を .badge--* へ
   移した結果、参照が0になったため（探索範囲＝core/templates 再帰46ファイル＋static/js＋core/**.py）。
   ★`_statement_body.html` の `pill-done` は**別のクラス**（下に独立の定義がある）＝残す。 */
/* 駐車標識の P（ブランドの印）。ログイン画面で使う（ナビは C7 で .mark へ移った）。 */
.pmark{display:inline-flex;align-items:center;justify-content:center;background:var(--brand);
  color:#fff;font-weight:800;border-radius:12px;box-shadow:inset 0 0 0 2px var(--amber)}
/* 現場の全幅ボタン（片手・屋外。§4 の .f-btn は別系統なので両方いる）。 */
.btn--block{width:100%;padding:1rem;font-size:var(--fs-lg);height:auto}
.btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* --- 20.10 金額の内訳（_pay_breakdown.html。C8 で .kv へ）---------------- */
.bd{display:grid;gap:10px}
.bd-h{font-size:var(--fs-xs);font-weight:700;color:var(--ink-muted);margin-bottom:2px;
  letter-spacing:.02em}
.bd-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;
  font-size:var(--fs-md);align-items:baseline}
.bd-nm{color:var(--ink)}
.bd-dt{color:var(--ink-muted);font-size:var(--fs-xs);margin-left:6px}
.bd-am{font-variant-numeric:tabular-nums;white-space:nowrap}
.bd-sub{border-top:1px solid var(--line);margin-top:2px;padding-top:5px;font-weight:700}
.bd-none .bd-nm{color:var(--ink-muted);font-size:var(--fs-sm)}
/* 版が無くて金額を出せない行＝金額の代わりに理由を出す枠（¥0 と書かない）。 */
.bd-am.rate-missing{color:var(--warn);font-weight:700}
/* 表のセルの中で内訳を開閉する形（勤務一覧）。 */
.bd-toggle > summary{cursor:pointer;font-weight:700;color:var(--brand);list-style:none}
.bd-toggle > summary::-webkit-details-marker{display:none}
.bd-toggle[open] > summary{color:var(--ink-muted)}
td .bd{min-width:260px;white-space:normal;margin-top:6px;text-align:left}

/* --- 20.11 勤務明細（_statement_body.html）------------------------------- */
.stmt{display:grid;gap:16px}
.stmt-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.stmt-head h1{font-size:1.3rem;margin:0}
.stmt-head .who{color:var(--ink-muted);font-size:var(--fs-md)}
.pill-done{background:var(--pos-soft);color:var(--pos);border-radius:var(--r-pill);
  padding:2px 10px;font-size:var(--fs-xs);font-weight:700}
.notice{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);
  padding:10px 12px;font-size:var(--fs-sm);font-weight:600}
.sum{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-pop);padding:16px}
.sum .srow{display:flex;justify-content:space-between;gap:12px;padding:4px 0;
  font-size:var(--fs-md);align-items:baseline}
.sum .srow .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.sum .srow.sub{color:var(--ink-muted)}
.sum .srow.total{border-top:2px solid var(--line);margin-top:6px;padding-top:8px;
  font-weight:800;font-size:var(--fs-lg)}
.sum .meta{color:var(--ink-muted);font-size:var(--fs-xs);margin-top:8px}
/* ★.rcard は勤務明細と履歴の2画面で名前がぶつかる（別の見た目）。必ず親でスコープする。 */
.stmt .rcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-pop);padding:14px}
.stmt .rcard .rtop{display:flex;justify-content:space-between;gap:8px;
  margin-bottom:8px;flex-wrap:wrap;align-items:baseline}
.stmt .rcard .rdate{font-weight:700}
.stmt .rcard .rmeta{color:var(--ink-muted);font-size:var(--fs-sm)}
.stmt .actions{display:flex;gap:12px;align-items:center}

/* --- 20.12 単価未設定の注記（_rate_missing_note.html）--------------------- */
/* ★出せない金額を ¥0 として合計に足さず、外した件数をここで必ず見せる（黙って¥0にしない）。 */
.rate-missing-note{margin:12px 0;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--warn-soft);border:1px solid var(--warn);color:var(--ink);
  font-size:var(--fs-md);line-height:1.6}
.rate-missing{color:var(--warn);font-weight:700}

/* --- 20.13 管理画面ごとの飾り（残り）------------------------------------- */
/* ★中身は 2026-08-06 に §19c「管理画面の部品」へ移した（恒久のため）。
   残したのは**共有クラス `.space` に素で当たる4規則だけ**＝`_route_list.html`（現場）も
   `.space` を使うので、動かすと現場に当たりうる。
   ★参照0だった .board-2 一式・.card-pad 一式は削除（M-1 で使い手が消えていた）。 */
/* 駐車場の編集（manage_parking_form）：区画（寸法）の入力行 */
/* ★★1区画＝2行（2026-09-06・オーナー指示）＝現場の調査報告と同じ並び。
   ★2行をひとかたまりに見せる枠（`.space-set`）＝区画どうしは細い線で分ける。 */
.space-set{padding-bottom:10px;margin-bottom:10px;border-bottom:1px dashed var(--line)}
.space-set:last-of-type{border-bottom:0;padding-bottom:0;margin-bottom:0}
.space-set .space:last-child{margin-bottom:0}
.space{display:flex;gap:8px;align-items:flex-end;margin-bottom:8px}
.space .no{width:16px;color:var(--ink-muted);font-size:var(--fs-sm);font-weight:700;padding-bottom:10px}
.space .cell{flex:1;min-width:0}
.space .cell label{display:block;font-size:11px;color:var(--ink-muted);font-weight:700;
  margin-bottom:3px}

/* --- 20.14 現場画面 ------------------------------------------------------ */
/* ホーム（home）：あいさつ＋大きなタイル導線 */
.home{display:grid;gap:16px}
.greet{display:flex;align-items:center;gap:12px}
.greet .avatar{width:44px;height:44px;border-radius:13px;background:var(--brand-soft);
  color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:1.05rem;flex:none}
.greet .who{font-weight:700}
.greet .who small{display:block;font-weight:500;color:var(--ink-muted);font-size:.76rem}
.tile{display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r);
  text-decoration:none;border:1px solid transparent}
.tile .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-size:24px;flex:none}
.tile .tx{display:grid;gap:2px}
.tile .tx b{font-size:1.05rem}
.tile .tx small{font-size:.78rem;opacity:.82}
.tile .go{margin-left:auto;opacity:.5;font-size:1.1rem}
.tile--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-btn)}
.tile--primary .ic{background:rgba(255,255,255,.18)}
.tile--report{background:var(--surface);color:var(--ink);border-color:var(--line);
  box-shadow:var(--shadow-pop)}
.tile--report .ic{background:var(--pos-soft)}
.tile--mgr{background:var(--surface);color:var(--ink);border:1px dashed var(--line)}
.tile--mgr .ic{background:var(--surface-2)}
.home-foot{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;
  margin-top:4px}
.home-foot a{color:var(--brand);text-decoration:none;font-weight:600}
.home-foot form{margin:0}

/* 勤務報告の3画面（work_start / work_finish / work_report）。フォーム項目は Django の素の
   input/select/textarea なので、.wr-card 配下の要素セレクタで整形する（他画面には漏らさない）。 */
.wr-card{padding:20px}
.wr-topbar{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;
  margin-bottom:14px}
.wr-topbar a{color:var(--brand);font-weight:700;text-decoration:none}
.wr-title{text-align:center;margin:0 0 18px;font-size:1.25rem}
.wr-card label{display:block;margin-top:16px;font-weight:700;color:var(--ink-muted);
  font-size:.85rem}
.wr-card input,.wr-card select,.wr-card textarea{width:100%;padding:.8rem .85rem;margin-top:6px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink);font:inherit;font-size:1rem}
.wr-card textarea{resize:vertical;min-height:70px}
.wr-card input:focus,.wr-card select:focus,.wr-card textarea:focus{outline:none;
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.wr-card .row{display:flex;gap:8px;align-items:center;margin-top:6px}
.wr-card .row input{margin-top:0;text-align:center}
.wr-two{display:flex;gap:12px}
.wr-two > div{flex:1}
/* 開始報告から引き継ぐ確定情報（編集不可）の枠＝3画面で同じ見た目。
   ★余白の向きは原本どおりに分ける＝勤務開始・日報訂正は上に8px、勤務終了だけは
   （見出しの直後に来るので）下に8px。まとめて margin:8px 0 にすると3画面とも8px増える。 */
.wr-fixed{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;margin-top:8px}
.wr-title + .wr-fixed{margin-top:0;margin-bottom:8px}
.wr-fixed .frow{display:flex;justify-content:space-between;font-size:.9rem;padding:3px 0}
.wr-fixed .frow span:first-child{color:var(--ink-muted);font-weight:700;font-size:.82rem}
.wr-fixed .frow b{font-weight:700}
/* 自家用車・メーター・経費の囲み。★交通手段のチェックでJS開閉していた名残の display:none を
   外してある（残すと経費欄が画面に出ない）。 */
.wr-card .panel{margin-top:12px;padding:15px;background:var(--brand-soft);
  border-left:4px solid var(--brand);border-radius:var(--r-sm)}
.wr-card .panel label:first-child{margin-top:0}
.wr-card .inline-check{display:flex;align-items:center;gap:8px;font-weight:500;
  color:var(--ink)}
.wr-card .inline-check input{width:auto;margin:0}
.wr-card .fare-input{background:var(--warn-soft);border-color:var(--amber)}
/* その他経費の1行＝内容（広め）＋金額（狭め）＋領収書の写真。 */
.wr-card .exp-unit{padding:10px 0;border-bottom:1px dashed var(--line)}
.wr-card .exp-unit:last-of-type{border-bottom:0}
.wr-card .exp-receipt{margin-top:6px}
.wr-card .exp-file{display:block;margin-top:0;font-weight:500;font-size:.78rem;
  color:var(--ink-muted)}
.wr-card .exp-file input[type="file"]{padding:.5rem;font-size:.82rem;background:var(--surface)}
.wr-card .exp-thumb{display:inline-block;margin-top:4px}
.wr-card .exp-thumb img{max-width:110px;max-height:110px;border-radius:var(--r-sm);
  border:1px solid var(--line);display:block}
.wr-card .exp-clear{display:flex;align-items:center;gap:6px;margin-top:6px;font-weight:500;
  font-size:.78rem;color:var(--ink-muted)}
.wr-card .exp-clear input{width:auto;margin:0}
.wr-card .exp-row{margin-top:8px}
.wr-card .exp-row input[type="text"]{flex:2;text-align:left}
.wr-card .exp-row input[type="number"]{flex:1;text-align:right}
.wr-card .exp-add{margin-top:10px;width:100%}
.wr-card button[type="submit"]{margin-top:24px}
.muted-note{color:var(--ink-muted);font-size:.78rem;margin-top:8px}
/* ★.errors / .hint は締めの画面（manage_close）と勤務報告で別々に書かれていた。1本にまとめる。 */
.errors{color:var(--neg);font-size:.8rem;margin-top:5px;font-weight:600}
.hint{font-size:.78rem;color:var(--ink-muted);font-weight:500;margin-top:4px}
/* 現場のキャンセルは中央の大きなリンク（管理フォームの .cancel-link とは置き方が違う）。
   ★リンクは .wr-card の**中**にある（.container の直下ではない）。 */
.wr-card .cancel-link{display:block;text-align:center;margin-top:15px}

/* 本日すでに出している開始報告（work_start）。ここが無いと勤務中の報告を直す入口が無い。 */
.ws-today{margin-bottom:20px}
.ws-today .lbl{font-size:.82rem;font-weight:700;color:var(--ink-muted);margin-bottom:8px}
.ws-row{display:flex;align-items:center;gap:10px;padding:11px 12px;margin-bottom:6px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  text-decoration:none;color:var(--ink)}
a.ws-row:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.ws-row .d{font-variant-numeric:tabular-nums;color:var(--ink-muted);font-size:.85rem;flex:none}
.ws-row .c{flex:1;font-weight:700;font-size:.92rem;min-width:0}
/* ★勤務の状態は共有部品（_work_status_badge.html）の `.badge--*` で出す＝この画面用の
   `.st--open` / `.st--done` は 2026-09-09 に落とした（同じ状態に2つ目の見た目を作らない）。 */
.ws-row .badge{flex:none}
.ws-sep{border-top:1px solid var(--line);margin:18px 0 4px;padding-top:14px;
  font-size:.82rem;font-weight:700;color:var(--ink-muted)}

/* 終了する勤務を選ぶ画面（work_finish_list） */
.fl-card{padding:20px}
.fl-topbar{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;
  margin-bottom:14px}
.fl-topbar a{color:var(--brand);font-weight:700;text-decoration:none}
.fl-title{text-align:center;margin:0 0 6px;font-size:1.25rem}
.fl-lead{text-align:center;color:var(--ink-muted);font-size:.85rem;margin:0 0 16px}
.fl-empty{text-align:center;color:var(--ink-muted);padding:22px 8px;line-height:1.8}
.open-item{display:flex;align-items:center;gap:12px;padding:14px 16px;
  margin-top:10px;border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;
  color:var(--ink);background:var(--surface)}
.open-item:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.open-item .oi-body{display:grid;gap:2px}
.open-item .oi-body b{font-size:1.02rem}
.open-item .oi-body small{color:var(--ink-muted);font-size:.78rem}
.open-item .oi-go{margin-left:auto;opacity:.5;font-size:1.1rem}
.oi-plan{display:inline-block;background:var(--brand-soft);color:var(--brand);font-weight:700;
  font-size:.72rem;padding:.1rem .5rem;border-radius:var(--r-pill)}

/* 履歴・給与（staff_history）。★.rcard / .bd-toggle は勤務明細と名前がぶつかるので
   必ず .history でスコープする（素で書くと明細のカードに青い左罫が付く）。 */
.history{display:grid;gap:16px}
.history .bd-toggle > summary{font-size:.8rem;padding:4px 0}
.history .bd-toggle .bd{margin-top:6px}
.history .rcard{padding:14px 15px;display:grid;gap:8px;border-left:4px solid var(--brand)}
.history .rcard.is-open{border-left-color:var(--warn)}
.history .rcard .top{display:flex;justify-content:space-between;align-items:center}
.history .rcard .date{font-weight:700;display:flex;align-items:center;gap:8px}
.history .rcard .cust{color:var(--ink-muted);font-size:.84rem}
.history .rcard .met{display:flex;gap:12px;font-size:.82rem;color:var(--ink-muted);
  align-items:center;flex-wrap:wrap}
.history .rcard .met .pay{margin-left:auto;color:var(--ink);font-weight:800;font-size:.98rem;
  font-variant-numeric:tabular-nums}
.history .rcard .met .fare{color:var(--pos);font-weight:700}
.history .rcard .waiting{color:var(--warn);font-weight:700}
/* 見込み給与を主役に（ブランド青のグラデ）。★色はトークンから作る。 */
.payhero{position:relative;overflow:hidden;padding:20px;border-radius:var(--r);color:#fff;
  background:linear-gradient(135deg,#24378F,var(--brand) 55%,#3A63F0);box-shadow:var(--shadow-pop)}
.payhero .pl{font-size:.8rem;opacity:.85}
.payhero .amt{font-size:2.15rem;font-weight:800;margin:4px 0 14px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.payhero .subrow{display:flex;gap:20px;font-size:.8rem;
  border-top:1px solid rgba(255,255,255,.28);padding-top:12px}
.payhero .subrow b{display:block;font-size:1rem;font-variant-numeric:tabular-nums;margin-top:2px}
.payhero .watermark{position:absolute;right:-10px;bottom:-30px;font-size:120px;font-weight:800;
  opacity:.1;line-height:1}
/* 勤務明細（確定）への導線＝締め済みの月のチップ */
.stmt-links{display:grid;gap:6px}
.stmt-links .sl-label{font-size:.8rem;font-weight:700;color:var(--ink-muted)}
.stmt-links .sl-chips{display:flex;flex-wrap:wrap;gap:8px}
.stmt-links .sl-chip{text-decoration:none;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.35rem .8rem;font-size:.84rem;font-weight:600;
  color:var(--brand)}
.hist-filter{display:flex;gap:8px;align-items:center}
/* ★高さを明示＝「◯月分」の窓（select）と日付・状態の窓を同じ大きさにする
   （2026-08-18・オーナー指示）。padding 任せだと select だけ背が低くなる。 */
.hist-filter .input{height:38px;padding:0 .6rem;font-size:.9rem}
.hist-filter .btn{flex:none}

/* ログイン（registration/login） */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.auth-card{width:100%;max-width:360px;padding:28px 24px}
.auth-brand{display:grid;justify-items:center;gap:10px;text-align:center;margin-bottom:22px}
.auth-brand .pmark{width:60px;height:60px;font-size:32px;border-radius:var(--r)}
.auth-brand .name{font-weight:800;font-size:1.15rem}
.auth-brand .role{font-size:.78rem;color:var(--ink-muted)}
.auth form{display:grid;gap:14px}
.auth .login-err{background:var(--neg-soft);color:var(--neg);padding:.7rem .9rem;
  border-radius:var(--r-sm);font-size:.88rem;font-weight:700;text-align:center}

/* パスワード変更（password_change）。★ファイル名は admin 同梱の password_change_form.html と
   衝突しない名前にしてある（StaffPasswordChangeView で明示指定）。 */
.pw-card{max-width:420px;margin:0 auto;padding:24px}
.pw-title{text-align:center;margin:0 0 12px;font-size:1.25rem}
.pw-note{color:var(--ink-muted);font-size:.84rem;text-align:center;margin:0 0 18px}
.pw-card form .field{margin-top:14px}
.pw-card input{width:100%;padding:.8rem .85rem;margin-top:0;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:1rem}
.pw-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.pw-card button[type="submit"]{margin-top:22px}
.pw-back{display:block;text-align:center;margin-top:15px;color:var(--ink-muted);
  text-decoration:none}

/* 連絡（staff_messages / staff_message）＝**勤務終了報告の一覧と同じ部品**（.fl-* / .open-item）
   を使い、**現場だけの部品はこの1つ（未読の印）**。本文・差出人・返信の欄は §19c にある
   （管理シェルと共通＝同じ名前を2か所に書かない）。
   ★未読は**青**（`docs/rules/screen.md`「青＝いま効いている」）＝まだ効いている用事、の意味。
     橙（注意）にしないのは、未読は**放っておいて困るものとは限らない**から。 */
.msg-new{display:inline-block;background:var(--brand-soft);color:var(--brand);font-weight:700;
  border-radius:var(--r-pill);padding:1px 8px;font-size:.72rem}

/* --- 20.15 巡回ルート（route_main / _route_list）------------------------- */
/* ★クラス名は JS が querySelector で掴んでいる。JS はこの環境で実行できない＝名前を変えても
   テストは緑のまま地図が壊れる。名前を1つも変えずにここへ移してある（Phase 0 では触らない）。 */
.rt-topbar{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;
  margin-bottom:12px}
.rt-topbar a{color:var(--brand);font-weight:700;text-decoration:none}
.rt-title{text-align:center;margin:0 0 14px;font-size:1.2rem}
/* ★z-index:0 を必ず残すこと（position:relative と対で「重なりの入れ物」を作る）。
   Leaflet は地図の部品に z-index を 200〜1000 まで振る（拡大縮小ボタン＝1000・出典＝800）。
   入れ物が無いとその数字が画面全体と張り合い、**駐車場フォーム（.rt-pform.open＝70）や
   その背景（.rt-backdrop＝69）より上に + − ボタンが浮く**。ここで閉じ込めれば地図の中だけの話になる。 */
#map{position:relative;z-index:0;
  width:100%;height:300px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface-2);margin-bottom:14px}
/* 地図のピン（出発地「出」／終点「着」／目的地＝回る順番の数字）。
   ★Leaflet には Google の label 相当が無いので自分で作る（divIcon＝ただの div なので、
     見た目の正本はここ。だから大きさも太さもこちらで自由に決められる）。
   ★しずく型＝丸（本体）＋下向きの三角（::after）。**三角の先が「その場所」を指す。**
     先までの高さ ＝ 丸 32 − 上の枠 2 ＋ 三角 10 ＝ **40** で、
     route_main.html の iconAnchor: [16, 40] と対。
   ★★片方だけ変えないこと＝ピンが指す場所が実際の座標から**静かにずれる**（地図を見ても
     気づけない）。番人が両方を突き合わせている。 */
/* ★★セレクタを `.leaflet-marker-icon.rt-pin` にしてあるのには理由がある（`.rt-pin` だけでは効かない）。
   Leaflet の CSS はこの base.css より**後**に読み込まれ、`.leaflet-marker-icon{display:block}` を
   当ててくる＝**同じ強さなら後勝ち**で、こちらの `display:flex`（＝数字を真ん中に置く指定）が
   黙って負ける。★**実機で「黒い塊にしか見えない」形で出た**（2026-08-13・オーナー報告）＝
   数字が丸の左上へ寄っていた。**単純な `.rt-pin` に戻さないこと**（番人あり）。
   ★`position` はこちらで指定しない＝Leaflet が `absolute` を当てており、それを上書きすると
     ピンが地図に貼り付かなくなる（`::after` の位置合わせは absolute のままでも効く）。 */
.leaflet-marker-icon.rt-pin{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;border:2px solid #fff;
  background:var(--pin-bg);box-shadow:var(--shadow-pop);
  color:#fff;font-weight:700;font-size:15px;line-height:1;
  font-variant-numeric:tabular-nums}
.rt-pin::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:10px solid var(--pin-bg)}
.rt-pin--start{--pin-bg:var(--brand)}
.rt-pin--end{--pin-bg:var(--neg)}
/* 目的地＝順番の数字。★青（ブランド色）＝オーナー指定 2026-08-13（黒から変更）。
   ★画面の状態色（緑＝成功／橙＝警告／赤＝失敗）は使わない＝順番は「状態」ではないので、
     色に意味を持たせない。
   ★出発地「出」と同じ青になる（見分けは中の文字＝「出」か数字か）。 */
.rt-pin--num{--pin-bg:var(--brand)}
/* カードの番号。★地図のピンの数字と同じもの（どちらも「一覧の上からの位置」）。
   ★色も地図のピンと同じ青にそろえる（オーナー指定 2026-08-13＝黒から変更）。
     同じ数字が2か所に出るので、色が違うと「別のもの」に見える。
   ★色を変えるときは .rt-pin--num と一緒に変えること（片方だけ変えると対応が読めなくなる）。 */
.rt-no{flex:none;display:flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 5px;border-radius:12px;
  background:var(--brand);color:var(--on-brand);font-size:.78rem;font-weight:700;
  font-variant-numeric:tabular-nums}
.rt-note{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);
  padding:12px;font-size:.85rem;margin-bottom:14px}
.rt-addbtn{width:100%;padding:13px;background:var(--brand);color:var(--on-brand);border:0;
  border-radius:var(--r-sm);font:inherit;font-size:1rem;font-weight:700;cursor:pointer;
  margin-bottom:14px;box-shadow:var(--shadow-pop)}
/* ★★下の帯の中では下の余白を持たない（2026-09-06）＝帯は `display:grid;gap:8px` で
   間隔を持っているので、ボタン側の 14px と二重になる。★**帯の外での見た目は変えていない**
   （この規則は `.rt-foot` の中だけに当たる）。 */
.rt-foot .rt-addbtn{margin-bottom:0}
/* 登録住所への入口（巡回ルート画面。2026-08-27）＝★**目立たせない**（毎日押すものではなく、
   最初に1回登録するためのもの）。★上の余白は 2026-09-06 に 0 へ（すぐ上に在った
   「＋ 目的地を追加」が下の帯へ移り、詰める相手が居なくなった）。 */
.rt-saved-link{display:block;text-align:center;margin:0 0 14px;color:var(--brand);
  text-decoration:none;font-size:13px;font-weight:700}
.rt-start{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px;box-shadow:var(--shadow-pop);margin-bottom:14px}
.rt-start .lbl{font-size:.82rem;color:var(--ink-muted);font-weight:700;margin-bottom:6px}
.rt-start-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rt-start-row input{flex:1;min-width:140px;padding:9px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:14px;background:var(--surface-2);color:var(--ink)}
.rt-start-row button{flex:none;background:var(--surface);border:1px solid var(--brand);
  color:var(--brand);border-radius:var(--r-sm);padding:8px 10px;font:inherit;
  font-weight:700;cursor:pointer}
.rt-start-row button.clr{border-color:var(--line);color:var(--ink-muted)}
.rt-start .req{display:inline-block;background:var(--neg);color:#fff;border-radius:3px;
  padding:1px 5px;font-size:.68rem;font-weight:700;vertical-align:1px}
/* 未指定のままルート順生成／ナビを押したとき、埋めるべき欄を示す。 */
.rt-start-row input.missing{border-color:var(--neg);border-width:2px;background:var(--neg-soft)}
.rt-list{display:grid;gap:8px}
/* カードは2段：上段＝準備用（並べ替え／チェック／住所／編集）、下段＝現場用（ナビ開始）。 */
.rt-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;box-shadow:var(--shadow-pop)}
.rt-item input[type="checkbox"]{width:20px;height:20px;flex:none}
.rt-item .addr{flex:1;font-size:.9rem;min-width:0}
.rt-item .addr.rt-bad{color:var(--neg)}
.rt-geo{display:block;margin-top:2px;font-size:.72rem;word-break:break-all}
.rt-geo.bad{color:var(--neg);font-weight:700}
.rt-move{display:flex;flex-direction:column;gap:2px;flex:none}
.rt-move button{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  border-radius:5px;width:26px;height:20px;line-height:1;font-size:.7rem;cursor:pointer;padding:0}
.rt-item .ic-btn{background:none;border:1px solid var(--line);color:var(--ink-muted);
  border-radius:var(--r-sm);padding:5px 8px;font:inherit;font-size:.85rem;cursor:pointer;
  flex:none}
.rt-item .ic-btn.del{border-color:var(--neg);color:var(--neg)}
.rt-empty{color:var(--ink-muted);text-align:center;padding:20px}
/* 現場で使う操作（運転の合間・片手で押す）。準備用の小さいアイコンと離して大きく置く。 */
.rt-actions{flex-basis:100%;display:flex;gap:8px;margin-top:4px}
.rt-actions button{flex:1;padding:11px;border-radius:var(--r-sm);font:inherit;font-size:.9rem;
  font-weight:700;cursor:pointer}
/* 薄い青だと弱いので、ブランド青を面の色に混ぜて一段濃くする（色は足さずトークンから作る）。
   color-mix 未対応の古い端末は上の行の --brand-soft で表示される。 */
.rt-nav1{background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand)}
.rt-nav1{background:color-mix(in srgb,var(--brand) 24%,var(--surface))}
.rt-unit{display:grid;gap:0}
.rt-lot{display:block;width:100%;text-align:left;margin-top:6px;padding:6px 8px;
  background:var(--brand-soft);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);font:inherit;font-size:.8rem;cursor:pointer}
.rt-lot .specs{display:block;color:var(--ink-muted);font-size:.72rem;
  font-variant-numeric:tabular-nums}
/* 報告済み（今日・本人）のカードは色を変える。★駐車場が在るだけでは「済」にしない。 */
.rt-item.rt-done{background:var(--pos-soft);border-color:var(--pos)}
.rt-survey{background:var(--surface);border:1px solid var(--brand);color:var(--brand)}
.rt-survey.done{background:var(--pos);border-color:var(--pos);color:var(--on-brand)}
/* 調査報告のポップアップ（住所ピッカーと同じ形の中央オーバーレイ）。 */
.rt-pform{display:none}
.rt-pform.open{display:flex;flex-direction:column;position:fixed;inset:0;z-index:70;margin:auto;
  width:min(560px,94vw);max-height:88vh;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 24px 60px -20px rgba(16,24,40,.5);overflow:hidden}
.rt-backdrop{display:none;position:fixed;inset:0;z-index:69;background:rgba(16,24,40,.45)}
.rt-backdrop.open{display:block}
.rt-phead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-bottom:1px solid var(--line)}
.rt-phead .ptitle{font-weight:700}
.rt-px{background:none;border:0;color:var(--ink-muted);font-size:1.1rem;cursor:pointer;
  padding:4px 8px}
.rt-pbody{padding:14px;overflow-y:auto;display:grid;gap:10px}
.rt-pform .paddr{font-size:.85rem;font-weight:700;word-break:break-all}
.rt-pwarn{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);padding:10px;
  font-size:.82rem;font-weight:700}
.rt-psub{font-size:.78rem;color:var(--ink-muted);font-weight:700;border-top:1px solid var(--line);
  padding-top:10px}
.rt-prow{display:flex;gap:8px;align-items:flex-end}
/* ★★1区画＝2行（2026-09-06・オーナー指示＝上に幅・奥行・高さ／下に接道幅員・台数・タイプ）。
   ★★**2行を包む枠は `.rt-pset`**＝**`.rt-space` は1区画に1つだけ**（JS がこの数を数えて何行
     送るか決める／番人も同じ字面を数える）。**枠に `.rt-space` を使わないこと。**
   ★区画どうしは細い線で分ける＝2行がひとかたまりに見えないと、どこまでが1区画か分からない。 */
.rt-pset{display:grid;gap:6px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.rt-pset:last-of-type{border-bottom:0;padding-bottom:0}
.rt-space .rt-pfield label{font-size:.68rem}
.rt-pno{flex:none;width:14px;color:var(--ink-muted);font-size:.78rem;font-weight:700;
  padding-bottom:10px}
.rt-pfield{flex:1;min-width:0}
/* 日付欄は「2026-07-13」を丸ごと表示できる幅が要る（狭いと「202」までしか見えない）。 */
.rt-pdate{flex:1.3}
.rt-pdate input{padding-left:6px;padding-right:6px}
.rt-pfield label{display:block;font-size:.74rem;color:var(--ink-muted);font-weight:700;
  margin-bottom:4px}
.rt-pfield input,.rt-pfield select{width:100%;padding:9px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:15px;background:var(--surface-2);color:var(--ink)}
/* 登録済みの駐車場の管轄署＝表示のみ（入力欄に見えないよう、枠のない地の文で出す）。 */
/* ★［＋ 駐車タイプを追加］（2026-09-06）＝**目立たせない**（毎回押すものではない）＝
   保存ボタン（青ベタ）と取り違えないよう、枠だけの見た目にする。 */
.rt-paddtype{width:100%;padding:9px;background:var(--surface);color:var(--brand);
  border:1px dashed var(--brand);border-radius:var(--r-sm);font:inherit;font-size:.85rem;
  font-weight:700;cursor:pointer}
.rt-pfixed{padding:9px 0;font-size:15px;font-weight:700;color:var(--ink)}
.rt-pnote{display:block;font-size:.72rem;font-weight:400;color:var(--ink-muted)}
.rt-pbtns{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);
  background:var(--surface-2)}
.rt-pbtns button{flex:1;padding:12px;border:0;border-radius:var(--r-sm);font:inherit;
  font-weight:700;cursor:pointer}
.rt-psave{background:var(--brand);color:var(--on-brand)}
.rt-pclose{background:var(--surface);border:1px solid var(--line)!important;color:var(--ink-muted)}
.rt-pdel{background:var(--surface);border:1px solid var(--neg)!important;color:var(--neg);
  flex:none!important;padding:12px 14px!important}
.rt-foot{position:sticky;bottom:0;margin-top:16px;padding:12px 0;
  background:linear-gradient(to top,var(--bg) 70%,transparent);display:grid;gap:8px}
.rt-controls{display:flex;gap:8px;align-items:center}
.rt-controls select{flex:none;padding:10px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:15px;background:var(--surface);color:var(--ink)}
.rt-gen{flex:1;padding:12px;background:var(--pos);color:var(--on-brand);border:0;
  border-radius:var(--r-sm);font-size:.95rem;font-weight:700;cursor:pointer}
.rt-summary{text-align:center;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.rt-navi{width:100%;padding:14px;background:var(--brand);color:#fff;border:0;
  border-radius:var(--r-sm);font-size:1rem;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow-btn)}
/* ルート順生成の手応え：生成中はボタンを止め、終わったらトーストで知らせる。 */
.rt-gen[disabled]{opacity:.65;cursor:progress}
.rt-toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,12px);z-index:60;
  max-width:90vw;padding:12px 18px;border-radius:var(--r-pill);color:#fff;font-weight:700;
  font-size:.9rem;background:var(--pos);box-shadow:var(--shadow-btn);text-align:center;
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.rt-toast.show{opacity:1;transform:translate(-50%,0)}
.rt-toast.err{background:var(--neg)}
/* 動きを減らす設定の端末ではトーストを動かさない（原本 route_main.html にあった1行）。 */
@media (prefers-reduced-motion:reduce){.rt-toast{transition:none}}

/* --- 20.16 住所ピッカー（_address_picker.html）--------------------------- */
/* ★ここも JS がクラス名を掴んでいる。名前を変えないこと。 */
.apick-open-btn{margin-top:8px;background:var(--surface);color:var(--brand);
  border:1px solid var(--brand);border-radius:var(--r-sm);padding:8px 12px;
  font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.apick-open-btn:hover{background:var(--brand-soft)}
.apick-overlay{display:none;position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:1000;
  align-items:center;justify-content:center;padding:12px}
.apick-panel{background:var(--surface);color:var(--ink);width:100%;max-width:460px;max-height:90vh;
  display:flex;flex-direction:column;border-radius:var(--r);box-shadow:var(--shadow-pop);
  overflow:hidden}
.apick-head{display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--line)}
.apick-head b{font-size:15px}
.apick-x{background:none;border:0;font-size:20px;line-height:1;color:var(--ink-muted);
  cursor:pointer}
/* 登録住所のワンタッチ（2026-08-27）＝ボタンに出すのは**名称だけ**（住所は出さない＝
   スマホの画面の場所を取る）。★1つも登録が無ければ、この行ごと出ない（テンプレート側）。 */
.apick-saved{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 0}
.apick-saved-btn{background:var(--surface);color:var(--brand);border:1px solid var(--brand);
  border-radius:20px;padding:6px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.apick-saved-btn:hover{background:var(--brand-soft)}
.apick-crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 14px;
  background:var(--brand-soft);font-size:13px}
.apick-crumb .c{background:var(--surface);color:var(--brand);border:1px solid var(--brand);
  border-radius:20px;padding:4px 10px;font-weight:700;cursor:pointer}
.apick-crumb .cur{background:var(--ink-muted);color:#fff;border-radius:20px;padding:4px 10px}
.apick-crumb .sep{color:var(--ink-muted)}
.apick-zip{padding:10px 14px;border-bottom:1px solid var(--line)}
.apick-zip input{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:16px;background:var(--surface);color:var(--ink)}
.apick-index{padding:10px 14px;border-bottom:1px solid var(--line)}
.apick-back{width:100%;height:38px;background:var(--ink-muted);color:#fff;border:0;
  border-radius:var(--r-sm);font-weight:700;cursor:pointer;margin-bottom:8px;display:none}
.apick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.apick-idx{height:42px;background:var(--surface-2);color:var(--ink);border:0;
  border-radius:var(--r-sm);font-weight:700;cursor:pointer;font:inherit}
.apick-idx.active{background:var(--brand);color:var(--on-brand)}
.apick-list{flex:1;overflow-y:auto;min-height:160px}
.apick-list .it{display:flex;justify-content:space-between;padding:14px;
  border-bottom:1px solid var(--line);cursor:pointer;font-size:15px}
.apick-list .it:hover{background:var(--surface-2)}
.apick-list .msg{padding:30px 14px;text-align:center;color:var(--ink-muted)}
.apick-list .done{padding:30px 14px;text-align:center;color:var(--pos);font-weight:700}
.apick-foot{padding:12px 14px;border-top:1px solid var(--line)}
.apick-foot input{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:15px;margin-bottom:10px;background:var(--surface);
  color:var(--ink)}
.apick-foot .ok{width:100%;padding:12px;background:var(--brand);color:var(--on-brand);
  border:0;border-radius:var(--r-sm);font-size:16px;font-weight:700;cursor:pointer}

/* --- 20.17 （空）----------------------------------------------------------
   ★中身は .board-2 の1行だけだった＝ホームの2列（要対応・最近の勤務）を 720px で1列に
   落とすもの。**M-1 でその2列ごと無くなり参照0**になったので 2026-08-06 に削除した。 */

/* --- 21 ページ送り（`_pager.html`。2026-08-12）------------------------------
   ★勤務一覧を50件/ページに分けたときに作った（300人・6,000件で1枚に出すと約3秒＝実測）。
   ★色は既存トークンだけ＝**いま居るページは青**（`screen.md`「青＝いま効いている」）。
   ★押せないもの（先頭で「前」）は `--ink-faint`＝**消さずに薄くする**（位置が動かない）。 */
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;
  margin:14px 0 4px}
.pager__num,.pager__step{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-size:var(--fs-sm)}
.pager__num:hover,.pager__step:hover{background:var(--surface-2)}
.pager__now{display:inline-flex;align-items:center;justify-content:center;min-width:34px;
  height:34px;padding:0 10px;border-radius:var(--r-sm);background:var(--brand);color:#fff;
  font-size:var(--fs-sm);font-weight:700}
.pager__step--off{color:var(--ink-faint);border-color:var(--line)}
.pager__gap{padding:0 4px;color:var(--ink-muted)}
/* 件数の「（1〜50 件目）」＝主役は総数なので、こちらは小さく薄く。 */
.lead__sub{color:var(--ink-faint)}

/* --- 22 給与明細（見込み）（`work_payslip.html`。2026-08-13）------------------
   ★オーナー指定の並び＝**日ごとの明細 → 項目ごとの集計 → 合計**。
   ★**紙（A4）とスマホの両方で読める形**にする＝スタッフ画面は現場のスマホ前提だが、
     この画面だけは**印刷・PDF保存でも使う**（`screen.md`「管理画面は PC 前提／スタッフ画面は
     スマホ前提」の例外ではなく、**同じ1枚を両方で読ませる**）。
   ★★**日ごとの表は列を減らさない**＝減らすと「その日いくらだったか」を追えなくなり、
     この画面の目的そのものが消える。**狭いときは横スクロール**（`.pslip__scroll`）。
   ★色は既存トークンだけ＝橙（`--warn`）＝注意・見込み／`.minus` は「止まっている」の橙。 */
.pslip{display:grid;gap:14px}
.pslip__pick{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.pslip__pick .f{display:grid;gap:2px}
.pslip__pick .f > span{font-size:var(--fs-xs);color:var(--ink-muted)}
/* ★★「◯月分」の窓と開始日・終了日の窓を**同じ枠**にする（2026-08-18・オーナー指示）＝
   ここは素のままだったので、ブラウザ既定の `select` と `input[type=date]` が並んで
   大きさも枠も違って見えた。★高さは明示（padding 任せにしない＝`screen.md`）。 */
.pslip__pick input,.pslip__pick select{height:36px;padding:0 8px;border:1px solid var(--line);
  border-radius:8px;font-size:var(--fs-md);background:var(--surface);color:var(--ink)}
.pslip__band{background:var(--warn-soft);border:1px solid var(--warn);border-radius:var(--r-sm);
  padding:10px 12px;font-size:var(--fs-sm);line-height:1.7}
.pslip__paper{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-pop);padding:18px 16px}
.pslip__head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:12px}
.pslip__head .t{font-size:var(--fs-xl);font-weight:800;letter-spacing:.04em}
.pslip__head .sub{color:var(--ink-muted);font-size:var(--fs-sm);margin-top:2px}
.pslip__head .co{font-size:var(--fs-xs);color:var(--ink-muted);line-height:1.6}
.pslip__head .co b{color:var(--ink);font-size:var(--fs-sm)}
.pslip__who{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:12px;font-size:var(--fs-sm)}
.pslip__who span{color:var(--ink-muted);margin-right:5px}
.pslip__who b{font-size:var(--fs-md)}
.pslip__sec{font-size:var(--fs-sm);font-weight:700;color:var(--ink-muted);
  margin:16px 0 6px;border-left:4px solid var(--brand);padding-left:8px}
.pslip__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pslip__days{width:100%;border-collapse:collapse}
.pslip__days th,.pslip__days td{border-bottom:1px solid var(--line);padding:5px 7px;
  font-size:var(--fs-sm);white-space:nowrap}
.pslip__days thead th{background:var(--surface-2);color:var(--ink-muted);font-weight:700}
.pslip__days .n{text-align:right;font-variant-numeric:tabular-nums}
.pslip__days tfoot td{border-top:2px solid var(--ink);font-weight:800;background:var(--surface-2)}
.pslip__roll{width:100%;border-collapse:collapse}
.pslip__roll th,.pslip__roll td{border-bottom:1px solid var(--line);padding:7px 8px;
  font-size:var(--fs-sm)}
.pslip__roll thead th{background:var(--surface-2);color:var(--ink-muted);font-weight:700}
.pslip__roll .n{text-align:right;font-variant-numeric:tabular-nums}
.pslip__roll .calc{color:var(--ink-muted);font-size:var(--fs-xs)}
/* ★合計の外の行（月額）＝橙の地で「足していない」ことを目で分かるようにする。 */
.pslip__roll tr.out td{background:var(--warn-soft)}
.pslip__roll tr.sum td{border-top:2px solid var(--ink);border-bottom:none;
  font-weight:800;font-size:var(--fs-md);padding-top:9px}
.pslip__grand{display:flex;justify-content:flex-end;align-items:baseline;gap:12px;
  flex-wrap:wrap;border-top:3px double var(--ink);margin-top:14px;padding-top:11px}
.pslip__grand .lbl{font-size:var(--fs-sm);color:var(--ink-muted)}
.pslip__grand .v{font-size:var(--fs-2xl);font-weight:800;font-variant-numeric:tabular-nums}
.pslip__foot{margin-top:14px;padding-top:9px;border-top:1px dashed var(--line);
  font-size:var(--fs-xs);color:var(--ink-muted);line-height:1.8}
.pslip__empty{color:var(--ink-muted);text-align:center;padding:14px 8px}
.pslip__tag{display:inline-block;font-size:var(--fs-xs);padding:1px 7px;border-radius:var(--r-pill);
  background:var(--warn-soft);color:var(--warn);margin-left:6px;font-weight:700}
@media print{
  /* 紙では枠も影も要らない。★横スクロールを解いて全部の列を出す。 */
  .pslip__paper{border:none;box-shadow:none;padding:0}
  .pslip__scroll{overflow:visible}
  .pslip__days th,.pslip__days td{white-space:normal;padding:3px 5px}
}