/* ============================================================================
   駐車場調査システム — 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;

  /* 状態（§6.3 の色ルールを厳守。赤は状態表示に使わない） */
  --amber:#F2B441;
  --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;

  /* 幅（これ以外を使わない） */
  --w-page:1280px;   /* 管理: 一覧・分析・詳細 */
  --w-form:640px;    /* 管理: フォームの中身 */
  --w-field:620px;   /* 現場アプリ */

  /* 密度（管理側は現場より1段詰める） */
  --row-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. 管理シェル
   --------------------------------------------------------------------------- */
.m-nav{background:var(--nav-bg);height:56px;display:flex;align-items:center;
  padding:0 var(--sp-5);gap:var(--sp-2)}
.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{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}

.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}

/* ---------------------------------------------------------------------------
   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:#1E36A8}  /* 勤務中 */
.badge--incomplete{background:var(--warn-soft);color:#9A5A05}   /* 未完了 */
.badge--incomplete-strong{background:var(--warn);color:#3A2A00} /* 未完了・強 */
.badge--done{background:var(--pos-soft);color:#0A7554}          /* 完了・在籍 */
.badge--fixed{background:var(--surface-2);color:var(--ink-muted);border:1px solid var(--line)} /* 確定 */
.badge--plain{background:var(--surface);color:var(--ink-muted);border:1px solid var(--line);font-weight:700}

/* ---------------------------------------------------------------------------
   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:30px;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)}
.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}

/* ---------------------------------------------------------------------------
   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:#9A5A05}

.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)}

.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)}
.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:1px solid var(--line);white-space:nowrap}
.dt th.num,.dt td.num{text-align:right}
.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}
/* ★cursor:pointer は Phase 1（行クリックで詳細へ）まで出さない。遷移できない行を「押せる」
   ように見せるのは画面が嘘をつくのと同じ。詳細画面ができたら次の行を復活させる。 */
.dt tbody tr:hover{background:var(--surface-2)}
/* .dt tbody tr:hover{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:#1E36A8}

/* ---------------------------------------------------------------------------
   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}
.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:#7A4705}
.note--warn b{color:#7A4705}
.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:12px;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:#0A7554}
.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}
}
@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%}
}

/* ---------------------------------------------------------------------------
   19. 印刷（給与明細・締めの記録）
   --------------------------------------------------------------------------- */
@media print{
  /* ★.no-print は「紙に出したくない操作」（印刷ボタン自身・戻るリンク）に付ける印。
     旧 _statement_css.html が隠していたので、ここに無いと**印刷ボタンが紙に出る**（機能の後退）。
     .page-head .acts / .filters は §20 の旧クラス名（C7 で __acts / .filterbar に寄せたら消す）。 */
  .m-nav,.tabs,.filterbar,.presets,.actionbar,.page-head__acts,.crumb,
  .no-print,.page-head .acts,.filters{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}
}

/* ===========================================================================
   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.4 / 20.5 / 20.6 / 20.13）。
     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)}

/* 帯の既定の文字色。§3 の .m-nav は背景しか決めていないので、色を決めていない要素
   （区切りの記号など）が地の色のまま濃紺に埋もれる。旧 manage_base.html にあった1行。 */
.m-nav{color:var(--nav-fg)}
/* 管理の帯の中身。§3 の .m-nav は height:56px の flex なので、中身に flex:1 を与えないと
   左に寄って中央揃えが崩れる（旧 base.html には無かった1行＝ここだけ値を足している）。
   幅は --w-page に合わせる＝帯と本文の左右がそろう（旧 1000px のままだと本文だけ広くなる）。 */
.m-nav-inner{flex:1;max-width:var(--w-page);margin:0 auto;padding:10px 24px;
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.m-nav .brand{font-weight:700;font-size:15px;color:#fff;text-decoration:none;margin-right:4px;
  display:inline-flex;align-items:center;gap:8px}
.m-nav .brand .pmark{width:24px;height:24px;font-size:14px;border-radius:7px}
.m-nav a{color:var(--nav-dim);text-decoration:none;font-size:14px}
.m-nav a:hover{color:#fff}
.m-nav a.active{color:#fff;font-weight:700;border-bottom:2px solid var(--brand);padding-bottom:2px}
.m-nav-right{margin-left:auto;display:inline-flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.m-nav form{display:inline;margin:0}
.m-nav form button{background:none;border:1px solid var(--nav-line);color:var(--nav-dim);
  padding:4px 10px;border-radius:6px;font-size:13px;cursor:pointer;font:inherit}
.m-nav form button:hover{color:#fff}
.m-nav .area-switch{display:inline-flex;align-items:center;gap:5px}
.m-nav .area-switch label{font-size:12px;color:var(--nav-dim)}
/* 開いたとき「白背景に白文字」で消えないよう、単色の濃紺＋option の色を明示する。 */
.m-nav .area-switch select{background:#1b2540;color:#fff;border:1px solid var(--nav-line);
  border-radius:6px;padding:4px 8px;font-size:13px}
.m-nav .area-switch select option{background:#1b2540;color:#fff}
.m-nav .navdrop{position:relative}
.m-nav .navdrop .trigger{background:none;border:0;font:inherit;font-size:14px;
  color:var(--nav-dim);cursor:pointer;padding:0}
.m-nav .navdrop:hover .trigger,.m-nav .navdrop:focus-within .trigger{color:#fff}
.m-nav .navdrop__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 .navdrop:hover .navdrop__panel,.m-nav .navdrop:focus-within .navdrop__panel{display:block}
.m-nav .navdrop__panel a{display:flex;align-items:center;gap:8px;color:var(--ink);
  text-decoration:none;padding:9px 10px;border-radius:8px;font-size:14px}
.m-nav .navdrop__panel a:hover{background:var(--surface-2)}
.m-nav .navdrop__panel .divp{display:block;height:1px;background:var(--line);margin:5px 6px}

/* --- 20.2 見出し・注記 --------------------------------------------------- */
/* ★h1.page-title は要素つき（0,1,1）で §5 の .page-head h1 と同じ強さ。この節が後ろにある
   ぶんこちらが勝つ＝見出しは 20px のまま（C7 で .page-title を外すと 24px になる）。 */
h1.page-title{font-size:20px;margin:0 0 20px;color:var(--ink)}
.page-head .page-title{margin:0}
.page-head .sub{font-weight:400;font-size:.87rem;color:var(--ink-muted)}
.page-head .acts{display:inline-flex;gap:8px;flex-wrap:wrap}
/* 見出しの下の一言（その画面が何をする所か）と、画面内の節見出し。 */
.lead{color:var(--ink-muted);font-size:.82rem;margin:-6px 0 16px}
.sec{font-size:1rem;margin:24px 0 8px}
.push{margin-left:auto}                      /* 並びの中で右端に寄せる（CSV出力ボタンなど） */

/* --- 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 td.key{font-weight:700}                  /* その行を見分ける列（住所・氏名など）。C7 で td.name へ */
.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 で廃止（詳細画面へ） */
.dt .who{color:var(--ink-muted);font-size:.75rem}               /* 単価履歴の「最終更新」 */
/* ホームの署別進捗＝速報（青）／確定（緑）／残り（橙）。★数字の系統を色で分ける。 */
.dt td.live{color:var(--brand);font-weight:800}
.dt td.done{color:var(--pos);font-weight:700}
.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}

/* --- 20.4 数値カードの中身と意味色 --------------------------------------- */
/* ★§13 の .kpi__v は等幅数字を持っていない（あちらは「ヒーロー数字は比例数字」という
   方針とセットで書かれている）。しかしこのカードに載るのは売上・人件費・粗利＝**金額**で、
   金額は右寄せ＋等幅で桁を揃えるのが決まり（SPEC §6.3）。桁が揃わないと、並べたときに
   ¥1,000,000 と ¥100,000 の区別が一目でつかない。ここで足す。
   ★.kpi は管理画面だけが使う（現場画面は使っていない）ので、D-15 に触れない。 */
.kpi__v{font-variant-numeric:tabular-nums}
/* 旧 .k-label / .k-value / .k-sub（C7 で寄せ終わったが、まだ manage_dashboard が使う）。 */
.kpi .k-label{font-size:.74rem;color:var(--ink-muted);font-weight:700}
.kpi .k-value{font-size:1.35rem;font-weight:800;margin-top:4px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi .k-sub{font-size:.74rem;color:var(--ink-muted);margin-top:2px}
/* 上の罫の色＝その数字の意味（緑＝売上／橙＝経費／青＝粗利／灰＝人件費）。
   ★意味の対応は画面をまたいで固定する。 */
.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)}
.neg{color:var(--neg)}                       /* 粗利がマイナス（赤字）のとき */

/* --- 20.5 絞り込みバー ---------------------------------------------------- */
/* 旧 .filters（C9 で消す。C7 で管理画面は §10 の .filterbar に寄せた）。 */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-pop);
  padding:14px 16px;margin-bottom:18px}
.filters .f{display:grid;gap:4px}
.filters .f > label{font-size:.72rem;font-weight:700;color:var(--ink-muted)}
.filters .input,.filters .select{width:auto;padding:.5rem .6rem;font-size:.9rem}
/* §10 の .filterbar は中身に .field .control（ただの div）を想定している。こちらは本物の
   入力欄を置くので、帯の中だけ .input/.select を小さくする。★.input そのものは変えない
   ＝現場画面（履歴の期間絞り込みなど）が同じクラスを使っている（D-15）。 */
.filterbar .input,.filterbar .select{width:auto;padding:.5rem .6rem;font-size:.9rem}

/* --- 20.6 注意書きの箱（§15 の .note に足りない色だけ）------------------- */
/* ★色の意味を固定する＝赤は「止まっている」、橙は「注意」、地色は「補足」、青は「いま効いている」。 */
.note--ng{background:var(--neg-soft);color:var(--neg);font-weight:700}
.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:1.05rem;font-weight:700}  /* 駐車場の編集：変えられない住所の見せ方 */

/* --- 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:.8rem;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}
.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:.8rem;margin-top:.35rem;font-weight:600}
.help{font-size:.75rem;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}

/* 管理のフォーム型の画面＝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%;padding:.7rem .8rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:.94rem}
.m-container--form .panel textarea{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.8 バナー（Django messages。両シェルが描画）----------------------- */
/* ★赤は「操作が失敗した」＝止まっている側。状態表示ではないので D-13 の対象外。 */
.banner{padding:.75rem .95rem;border-radius:var(--r-sm);font-weight:700;font-size:.9rem;
  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)}

/* --- 20.9 ピル・Pマーク・ボタンの追加 modifier（C7 で .badge--* へ）------ */
.pill{display:inline-flex;align-items:center;gap:.35em;padding:.22rem .62rem;
  border-radius:var(--r-pill);font-size:.72rem;font-weight:700}
.pill--brand{background:var(--brand-soft);color:var(--brand)}
.pill--pos{background:var(--pos-soft);color:var(--pos)}
.pill--warn{background:var(--warn-soft);color:var(--warn)}
.pill--neg{background:var(--neg-soft);color:var(--neg)}
.pill--muted{background:var(--surface-2);color:var(--ink-muted)}
/* 駐車標識の P（ブランドの印）。ナビの左端とログイン画面で使う。 */
.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:1.05rem;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:12px;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:14px;align-items:baseline}
.bd-nm{color:var(--ink)}
.bd-dt{color:var(--ink-muted);font-size:12px;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:13px}
/* 版が無くて金額を出せない行＝金額の代わりに理由を出す枠（¥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:14px}
.pill-done{background:var(--pos-soft);color:var(--pos);border-radius:var(--r-pill);
  padding:2px 10px;font-size:12px;font-weight:700}
.notice{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);
  padding:10px 12px;font-size:13px;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:14px;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:1.05rem}
.sum .meta{color:var(--ink-muted);font-size:12px;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:13px}
.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:14px;line-height:1.6}
.rate-missing{color:var(--warn);font-weight:700}

/* --- 20.13 管理画面ごとの飾り -------------------------------------------- */
/* ホーム（manage_dashboard）：本日の進捗バーと短い一覧 */
.board{display:grid;gap:22px}
.board .card{padding:18px}
.sect-title{font-size:.95rem;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:.78rem}
.bars{display:grid;gap:12px;margin-bottom:14px}
.pbar-head{display:flex;justify-content:space-between;font-size:.82rem;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)}
.board-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.board-2 .li{padding:9px 12px;border-bottom:1px solid var(--line);font-size:.85rem;
  display:grid;gap:2px}
.board-2 .li:last-child{border-bottom:0}
.board-2 .li small{color:var(--ink-muted);font-size:.76rem}
.card-pad{padding:14px 4px 6px}
.card-pad .sect-title{padding:0 12px}

/* 締め（manage_close）
   ★この画面の旧 <style> は input[type=date] と select を**素の要素セレクタ**で書いていた。
     画面ごとの <style> だったから成立していただけで、そのまま base.css へ移すと
     **全画面の日付欄とプルダウン**（絞り込み帯・フォーム・帯のエリア切替）に効いてしまう。
     この画面の入れ物は2つとも .card-box なので、その配下に閉じてから持ち込む。
   ★element+class（button.primary / table.list）は素の要素セレクタではないが、名前が一般的で
     他の画面と衝突しうるので、同じく .card-box 配下に閉じる。 */
.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}
.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:15px}
.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:15px;
  cursor:pointer;font:inherit}
.card-box button.unlock{background:var(--surface);color:var(--ink-muted);border:1px solid var(--line)}
.card-box table.list{width:100%;border-collapse:collapse;margin-top:6px}
.card-box table.list th,.card-box table.list td{padding:9px 10px;
  border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.card-box table.list th{color:var(--ink-muted);font-size:12px;white-space:nowrap}
.card-box table.list td.num,.card-box table.list th.num{text-align:right;
  font-variant-numeric:tabular-nums}
.card-box table.list td.chk,.card-box table.list th.chk{text-align:center;width:34px}
.card-box table.list tfoot td{font-weight:bold;border-top:2px solid var(--line)}
/* ★D-13：未完了は「注意」＝橙／単価未設定は「止まっている」＝赤。旧 .open-warn は両方を
   赤にしていたので、意味ごとに分ける（色を見て判断できるようにするのが色分けの目的）。 */
.open-warn{color:var(--warn);font-weight:bold}
.rate-missing-warn{color:var(--neg);font-weight:bold}
.status-done{color:var(--pos)}
.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:.95rem}

/* エリア選択（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:12px;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}
.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:.84rem;font-weight:600;
  color:var(--brand)}

/* 駐車場の編集（manage_parking_form）：区画（寸法）の入力行 */
.space{display:flex;gap:8px;align-items:flex-end;margin-bottom:8px}
.space .no{width:16px;color:var(--ink-muted);font-size:.8rem;font-weight:700;padding-bottom:10px}
.space .cell{flex:1;min-width:0}
.space .cell label{display:block;font-size:.68rem;color:var(--ink-muted);font-weight:700;
  margin-bottom:3px}
.protected{color:var(--ink-muted);font-size:.75rem;text-align:right}

/* --- 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}
.ws-row .st{font-size:.7rem;font-weight:700;padding:.12rem .5rem;border-radius:var(--r-pill);
  flex:none}
.ws-row .st--open{background:var(--warn-soft);color:var(--warn)}
.ws-row .st--done{background:var(--pos-soft);color:var(--pos)}
.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}
.badge-open{background:var(--warn-soft);color:var(--warn);font-weight:700;font-size:.68rem;
  padding:.12rem .5rem;border-radius:var(--r-pill)}
/* 見込み給与を主役に（ブランド青のグラデ）。★色はトークンから作る。 */
.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}
.hist-filter .input{padding:.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}

/* --- 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}
#map{width:100%;height:300px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface-2);margin-bottom:14px}
.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)}
.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}
.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)}
/* 登録済みの駐車場の管轄署＝表示のみ（入力欄に見えないよう、枠のない地の文で出す）。 */
.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}
.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 画面ごとの折り返し（旧 <style> にあった @media）--------------- */
/* ★ホームの2列（要対応・最近の勤務）だけ 720px で1列に落ちていた。§18 の 900/640 に
   寄せるのは C7（いま値を変えると「移しただけ」でなくなる）。 */
@media (max-width:720px){
  .board-2{grid-template-columns:1fr}
}