/* **日本語のフォントを同梱する**(2026-08-24)。それまでは
   `"Hiragino Sans", "Noto Sans JP", system-ui` と**端末に入っている前提**で、
   日本語版でない Windows にはどちらも無く、ブラウザの代替(中国語のフォント、
   最悪は豆腐)に落ちていた。

   **要るのは1人だけ**(2026-08-24 にユーザーと検算): 日本側の管理者は自分のPCに
   フォントを持っているし、現場の端末(Android/iPhone)はOSがNoto CJKを持っている。
   現地の作業者の画面はインドネシア語になるので日本語が出ない。残るのは
   **現地の英語版PCで管理画面を開く日本人**と、そのPCから刷る**紙** ——
   画面は読めなくても人を呼べるが、**刷った紙は直せない**。

   **だから全ページに背負わせない。**`unicode-range` で日本語の文字が出るページ
   だけに落とす(下)。現地の回線が遅い前提と両立させるための条件で、
   **範囲にラテン文字を入れない**のが要点。

   **翻訳では解けない**(だから翻訳の前に片付ける)。品名・拠点名・運送人名は
   **利用者が打った日本語**なので、画面を英語にしても中身は日本語のまま残る。

   **CDNは使わない**(app/main.py「現地の通信品質に依存させない」)。Leaflet・htmx と
   同じく同梱する。CDNの共有キャッシュは2020年のキャッシュ分離で利点が消えている。

   ライセンスは SIL Open Font License 1.1(同梱・再配布可。LICENSE を同じ場所に置く)。
   **第1水準まで**で1.10MB(JIS X 0208 全部だと2.29MB)。作り方と範囲の理由は
   `tools/build_font_subset.py`。`font-display: swap` —— 読み込み中も端末の
   フォントで先に出す(白い画面を作らない) */
@font-face {
  font-family: "ColdProof JP";
  src: url("/static/vendor/fonts/NotoSansJP-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  /* **日本語の文字が出るページだけが落とす。**ラテン文字は範囲に入れない ——
     入れると、インドネシア語の現場画面(日本語が1字も無い)まで1.1MBを取りに行く。
     現地の回線は遅い前提なので、これが同梱の可否を分ける。
     範囲: かな・和文の約物 / 漢字 / 全角英数(日本語入力で混ざる) */
  unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF01-FF9F;
}

/* 現場UI。原典=../coldproof-lab/mockup/index.html(確定モックv1.0)からの移植。
   モバイルファースト(現場は安価なAndroid端末前提。基準幅390px)。
   UI文法: 未完了=宣言/行動ボタン(大)、完了=✓+証跡(値+時刻)。タップ可能なチェックボックスは使わない。 */

:root {
  /* **文字の大きさは6段だけ**(2026-08-19)。以前は 10.5〜18px が11種類あり、
     同じ役割の文字が画面ごとに 11px / 11.5px / 12px と揺れていた ——
     揺れは意図に見えないので、段を決めて全部この変数から引く
     (Refactoring UI: 使う値を先に決めて、その中から選ぶ)。
     xs=ラベル・補助 / sm=注記・チップ / md=管理画面の本文と表 / base=本文 /
     lg=見出し・大きな値・現場のボタン / xl=画面の主役の値 */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  /* **7段目は「ページの導入」専用**(2026-08-26)。6段に収めるのは、同じ役割の文字が
     画面ごとに揺れるのを止めるためで、**役割が違うものまで潰す**ためではない ——
     ページの主張を1行で言う見出しは、値(xl)と同じ大きさでは主張にならない。
     **1ページに1つだけ**(`.intro-lead`)。増やすときはここに理由を書く */
  --fs-2xl: 26px;

  --green: #1a5c3a;
  --green-dark: #123f28;
  --green-bg: #f0f7f2;
  --border: #cfdcd4;
  /* **行の罫**。器の枠(--border)より薄い —— 18箇所で直値だったので名前を付けた
     (2026-08-26)。罫の濃さを1回で変えられる */
  --rule: #eef3f0;
  --ink: #1c2b24;
  --muted: #667a6f;
  --warn: #b3541e;
  --warn-bg: #fdf6ec;
  /* **失敗**の色(2026-08-19)。警告(--warn)と同じ茶色だったので、
     「操作が通らなかった」と「通ったが確認して」が見分けられなかった */
  --danger: #a3271f;
  --danger-bg: #fdf1ef;
  --blue: #1d4e89;
  --blue-bg: #e8f0fa;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "ColdProof JP", "Hiragino Sans", system-ui, sans-serif;
  background: var(--green-bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

/* **リンクの色は1か所で決める**(2026-08-25)。素の `<a>` に指定が無く、
   ブラウザ既定の青が出ていた —— 一方で表の中だけ `table.grid a { color: inherit }`
   で黒くしていたので、**同じ「便コード」が画面によって黒と青**に分かれていた
   (輸送便一覧では黒、位置情報では青)。土台をアプリの緑にして、
   場所ごとの指定(.appbar / .backlink / table.grid)は今までどおり上書きで効かせる */
a { color: var(--green-dark); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--green); }

.app { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--green-bg); }
/* 管理画面はPC前提(モックでも現場390px・管理1080pxと分かれている)。
   現場用の480pxに押し込むと一覧が縦に伸びて読めない */
.app.wide { max-width: 1180px; }

/* フォーム主体のページ(便の作成・ロガー回収)は幅を必要としないので列幅を絞る。
   一覧の表と違い、入力欄を1180pxに伸ばしても読みやすくならず、
   ラベルと入力欄が離れて視線が往復する。
   **中央寄せにしないこと** —— 一覧ページの本文は左端から始まるので、
   タブを移動するたびに読み始める位置が動いてしまう */
.app.wide .narrowcol { max-width: 520px; }

/* カードが2つある重要フォーム(便の作成)は、**フィールドの列幅は1カラムの定石
   (520〜560px)のまま、カードを横に並べて**ページの幅を使う(モックv1.0の
   トリップ作成が並列カード構成。narrowcol の縦1本だと本文が左に寄り
   右半分が空く)。中央寄せにしない方針は .narrowcol と同じ。
   横に並ばない幅では minmax の上限がそのまま .narrowcol 相当になる */
.app.wide .formcols {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: minmax(0, 560px);
}
@media (min-width: 1080px) {
  .app.wide .formcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.formcols .card { margin-bottom: 0; }
/* フォーム末尾の実行行。**2カラムを跨いで中央**に置く —— 右カードまで入力し終えて
   視線が下りてくる位置で、どちらの列の続きでもない「フォーム全体の締め」。
   白いパネル枠は付けない(カードだらけの画面で枠が1つ増えるだけ。試して外した)。
   実行は主ボタン1つ+キャンセルは**テキストリンク**(GOV.UKの
   button + cancel link の形。同格のボタンを並べると誤タップの的が増える) */
.formfoot {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  gap: 22px; padding: 8px 0 4px;
}
.formfoot .btn { display: inline-block; width: auto; min-width: 260px; padding: 13px 32px; margin: 0; }
.formfoot-cancel { font-size: var(--fs-md); color: var(--muted); text-decoration: underline; }

/* 管理画面のナビゲーション(上部タブ)。
   **ナビゲーションとページ操作を混ぜないこと** —— 混ぜるとどれが移動でどれが実行か
   分からなくなる。移動は常にここ、ページ固有の操作は本文側のツールバーに置く。
   サイドバーではなく上部にしたのは、一覧の表が横幅を必要とするため
   (サイドバー190pxを引くと列を余計に畳むことになる) */
.topnav {
  background: var(--green-dark); display: flex; align-items: stretch;
  gap: 2px; padding: 0 12px; overflow-x: auto;
}
.topnav a {
  color: #dfe9e3; text-decoration: none; padding: 10px 13px 8px;
  font-size: var(--fs-md); white-space: nowrap; border-bottom: 4px solid transparent;
}
.topnav a:hover { background: rgba(255,255,255,.08); }
/* **選択中は面で分かるようにする**(2026-08-26 初見レビュー)。以前は
   濃緑の上に 10% の白と下の細線だけで、1440px で見て「いまどこにいるか」が
   読めなかった —— 地を明るくし、文字を白にして、下線も太くする */
.topnav a.cur {
  color: #fff; font-weight: 700;
  background: rgba(255,255,255,.22); border-bottom-color: #fff;
}
.topnav .sep { width: 1px; background: rgba(255,255,255,.18); margin: 9px 8px; flex-shrink: 0; }
.topnav-label {
  color: #9db5a8; font-size: var(--fs-xs); letter-spacing: .06em;
  align-self: center; padding-right: 2px; white-space: nowrap;
}
@media (max-width: 560px) { .topnav-label, .topnav .sep { display: none; } }

.appbar {
  background: var(--green); color: #fff; padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  /* ユーザーメニューのパネルはこの中で絶対配置する */
  position: relative;
}
.appbar .t { font-weight: 700; font-size: var(--fs-lg); }
/* **押せるものは24px以上**(2026-08-26 に全画面を機械で測って直した)。
   WCAG 2.2 の下限が 24×24 で、**現場画面は 44〜48px** が目安(手袋・車内の揺れ)。
   アプリバーの言語・役割は 39×22 で、全15画面で下限を割っていた */
.appbar .role {
  font-size: var(--fs-xs);
  background: rgba(255,255,255,.2);
  padding: 5px 9px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}
.appbar a { color: #fff; text-decoration: none; }
/* ヘルプは帯に出す(全画面から1タップ)。「?」は丸で、語は横に添える ——
   狭い画面では語を落として丸だけにする(言語と役割の札で帯が埋まる) */
.helpbtn { gap: 5px; }
.helpbtn > [aria-hidden] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55); font-size: var(--fs-xs);
  font-weight: 700; line-height: 1;
}
.helpbtn:hover { background: rgba(255,255,255,.32); }
/* ユーザーメニュー: ログアウトの誤タップを防ぐため一段隠す(detailsのみ・JSは開閉補助だけ) */
.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; user-select: none; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  /* 拠点名が折り返さない幅。折り返すと選択肢がどれか読みにくい */
  min-width: 230px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.18); overflow: hidden;
}
.usermenu-item {
  display: block; width: 100%; text-align: left; padding: 14px 16px;
  border: 0; background: #fff; color: var(--ink); font-size: var(--fs-base);
  font-family: inherit; cursor: pointer;
}
/* `.appbar a`(白文字)より詳細度を上げる。上げないとパネル内のリンクが
   白背景に白文字で消える —— パスワード変更への唯一の導線なので実害がある */
.appbar .usermenu-item { color: var(--ink); text-decoration: none; }
.usermenu-item:active { background: var(--green-bg); }
.usermenu-item + form .usermenu-item { border-top: 1px solid var(--rule); }
/* 画面の切替(管理⇄現場)とアカウントは別の塊。罫で分ける
   —— 同じ間隔で4つ並ぶと、どれが「別の画面へ移る」操作か形から読めない */
.usermenu-group + .usermenu-item { border-top: 1px solid var(--rule); }

/* 積込の取消・作業の撮り直し。通常の作業導線と混同させないよう小さく控えめに */
.btn-undo {
  display: inline-block; margin-left: auto; padding: 4px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  font-size: var(--fs-xs); font-family: inherit; cursor: pointer; white-space: nowrap;
}
/* 完了行の訂正は「修正」で一段隠す(常時出すと画面が雑然とし、誤操作も招く)。
   detailsのみでJSもページ再読込も不要 */
/* 一段隠す小さな入口(訂正・例外)。左の48pxは**完了行のサムネイルに合わせた
   字下げ** —— 直前の行にぶら下がっていることを位置で示す */
.edit { margin: -6px 0 8px 48px; }
/* 行にぶら下がらない節(押して初めて出る一覧)は字下げしない(2026-08-23
   ユーザー指摘)。押さないと出てこない以上、通常の一覧と取り違えようがなく、
   実機幅では字下げのぶん中身が狭くなるだけ */
.edit.flush { margin: 0; }
.edit > summary {
  list-style: none; display: inline-block; cursor: pointer;
  font-size: var(--fs-xs); color: var(--muted); padding: 3px 8px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.edit > summary::-webkit-details-marker { display: none; }
.edit[open] > summary { color: var(--green-dark); border-color: var(--green); }
.edit-panel { margin-top: 8px; }
.edit-panel .txt { margin: 0 0 6px; font-size: var(--fs-lg); padding: 9px 10px; }

/* 温度計が読めないときの申告。**正常経路(読み取る)を主役に保つため控えめにする** ——
   ここが大ボタンだと、面倒なときに押されて欠測が増える。
   しかし隠しすぎると現場が詰まって捏造や無記録に走るので、必ず見える位置に置く */
/* 直前の説明文とくっつくと、その文の続きに見える。間を空ける */
.trouble { margin: 12px 0 10px; }
/* **点線は「まだ順番が来ていない」の意味に取っておく**(2026-08-23 初見レビュー)。
   `.waitrow`(順番待ち)と同じ点線をこの申告の入口にも使っていたので、点線が
   「押せない」なのか「押せる」なのかを学習できなかった。ここは押せるので実線 */
.trouble > summary {
  list-style: none; display: inline-block; cursor: pointer;
  font-size: var(--fs-sm); color: var(--warn); padding: 4px 10px;
  border: 1px solid #e0c9a0; border-radius: 10px; background: #fffdf8;
}
.trouble > summary::-webkit-details-marker { display: none; }
.trouble[open] > summary { border-style: solid; }
.trouble form { margin-top: 8px; }
.trouble .txt { margin: 0 0 6px; }
.trouble-undo { margin: -4px 0 10px 48px; }

/* 開発モードのロール切替バー(フッター固定)。本番では出力されない(機能ごと無効)。
   **彩度を落として主張させない** —— 画面上部に警告色で置くとデザインの
   アクセントとして効いてしまい、本来の配色を評価できなくなる。
   本番と見分ける役割は「機能が存在しないこと」が担っており、見た目の派手さではない */
.devbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #2b312e; color: #8d9a93; padding: 5px 10px;
  font-size: var(--fs-xs); border-top: 1px solid #3d453f;
}
.devbar-tag { font-weight: 700; letter-spacing: .04em; opacity: .85; }
.devbar-note { margin-left: auto; opacity: .6; }
/* 画面写真を撮るときに隠す(再読み込みで戻る)。**押しやすく、目立たせない** */
.devbar-hide {
  border: none; background: none; color: inherit; opacity: .6;
  font-size: var(--fs-base); line-height: 1; padding: 6px 8px; margin-left: 2px;
  cursor: pointer;
}
.devbar-hide:hover { opacity: 1; }
.devbar form { display: contents; }
.devbar button {
  border: 1px solid #454e48; background: transparent; color: #b6c2bb;
  border-radius: 6px; padding: 3px 9px; font-size: var(--fs-xs);
  font-family: inherit; cursor: pointer;
}
.devbar button:hover { background: #363d39; color: #dfe9e3; }
/* フッターが最後の要素に被らないよう余白を確保する */
body.has-devbar { padding-bottom: 42px; }
/* 狭い画面ではボタンが折り返して2段になる(実測59px)。その分の余白を確保する */
@media (max-width: 560px) { body.has-devbar { padding-bottom: 66px; } }

/* マスタ編集の行内ボタン(PC幅では横並び、狭い画面では折り返す) */
.siterow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.siterow .btn { width: auto; flex: 0 1 auto; padding: 9px 14px; font-size: var(--fs-md); margin: 0; }
.flexrow { display: flex; gap: 10px; }
.flexrow > * { flex: 1; min-width: 0; }

.body { padding: 14px; }
.app.wide .body { padding: 18px 22px; }

/* 戻り先のリンク(ナビの無いページ。行き止まりを作らない) */
.backlink { margin-bottom: 10px; font-size: var(--fs-md); }
/* 戻る導線は**行そのものが的**になる(14px しか無く、押しづらかった) */
.backlink a {
  color: var(--green-dark); text-decoration: none;
  border-bottom: 1px solid var(--border);
  display: inline-flex; align-items: center; min-height: 26px;
}
.backlink a:hover { border-bottom-color: var(--green); }

/* 一覧の上のツールバー(追加・検索などをまとめる置き場)。
   **形は1つ**: 見出し(件数)が左、副操作、主操作が右端(2026-08-19。
   発着地だけ追加ボタンが見出しの下に落ちていて、同じ一覧なのに別の画面に見えた) */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.toolbar-sub { font-size: var(--fs-sm); color: var(--muted); }
/* 開くと**ツールバーの下に全幅で**伸びる追加フォーム(発着地。地図つきなので
   吹き出しにしない)。**`<details>` は使わない** —— パネルを中に抱えるので
   「ボタンは行の右端・パネルは下に全幅」を同時に満たせず、`display:contents` で
   外に出そうとしても details はUA側の構造を持つため展開されない(2026-08-20 に
   パネルがツールバーの行に居座り、見出しが縦中央に寄る崩れを踏んだ)。
   チェックボックスとラベルなら DOM 上で分けられる(JSも不要) */
.addform-toggle:not(:checked) ~ .addform-panel { display: none; }
label.btn-add { display: inline-block; }
.btn-add {
  list-style: none; cursor: pointer; display: inline-block; white-space: nowrap;
  background: var(--green); color: #fff; border-radius: 8px; text-decoration: none;
  /* 枠線ぶんの高さを .btn.sub と揃える(透明枠。無いと数px低くなって並びがズレる) */
  border: 1.5px solid transparent;
  padding: 8px 14px; font-size: var(--fs-md); font-weight: 700; line-height: 1.3;
}
.btn-add:hover { background: var(--green-dark); }
.btn-add::-webkit-details-marker { display: none; }

/* 一覧テーブル。ゼブラ縞と薄い罫線でスキャンを助ける(NN/G: 視線の追跡を支える)。
   行の高さを詰めすぎると読み違いが増えるので詰めすぎない */
.grid-wrap { background: #fff; border: 1px solid var(--border); border-radius: 10px; }
/* overflow を付けると行メニューのポップアップが切れる。狭い画面だけ横スクロールにする */
@media (max-width: 760px) { .grid-wrap { overflow-x: auto; } }
table.grid { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
table.grid th {
  position: sticky; top: 0; z-index: 1;
  background: var(--green); color: #fff; text-align: left;
  padding: 10px 12px; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
}
/* **見出しの角も丸める。**入れ物(`.grid-wrap`)は角丸なのに、緑のヘッダが四角いまま
   上に重なって角を塗り潰していた(`overflow: hidden` は行メニューが切れるので使えない
   —— 中身の側で丸めるしかない。ユーザー指摘 2026-08-15) */
table.grid thead th:first-child { border-top-left-radius: 9px; }
table.grid thead th:last-child { border-top-right-radius: 9px; }
/* 最下行も同じ理由(ゼブラ縞の塗りが角を四角く潰す) */
table.grid tbody tr:last-child td:first-child { border-bottom-left-radius: 9px; }
table.grid tbody tr:last-child td:last-child { border-bottom-right-radius: 9px; }
table.grid td { padding: 11px 12px; border-top: 1px solid var(--rule); vertical-align: middle; }
/* 狭い画面では列が潰れて「ド ラ イ バ ー」と縦に折れ、読めなくなる。
   折り返さず横スクロールさせる(管理画面はPC前提だが、タブレット・スマホでも壊さない) */
table.grid th, table.grid td { white-space: nowrap; }
/* 折り返しを許す列(地点名)には**最小幅**が要る。無いと表がビューポート幅まで
   縮み、中の grid の minmax(0,1fr) が0まで潰れて「札 幌 市」と1文字ずつ折れる
   (スマホで実際に壊れた。ユーザー指摘 2026-08-14)。横スクロールが効くのは
   「表が縮まない」ときだけなので、縮まない下限をここで決める */
table.grid td.wrap { white-space: normal; min-width: 240px; }
table.grid a { color: inherit; }

/* 列の優先度: 狭い画面では優先度の低い列から隠す(横スクロールより読みやすい)。
   .col-low = 無くても判断できる列 / .col-mid = 中優先 */
table.grid .col-narrow { display: none; }
/* 列を隠したときは、主要列の下に小さく出して情報を失わせない */
/* **実物の写真を2枚ずつ並べる**(2026-08-25 ユーザー要望)。文で「紙のQRが鍵」と
   書くより、手に取るもの4つを見せる方が速い。**写真の中に文字を焼き込まない**ので、
   説明は figcaption(HTML)に置く —— 焼き込むとインドネシア語版で作り直しになる */
/* ページの導入のカード。**価値が一目で分かる**ことに徹する(2026-08-26) */
.card.intro { padding-top: 22px; padding-bottom: 22px; }

/* 主張の1行。**太字は塊に1つ**なので、この行の中では強調を足さない ——
   色と大きさで一段上げる(見た目の土台) */
.helppage .intro-lead {
  margin: 0 0 14px;
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--green-dark);
  word-break: auto-phrase;
  /* 見出しは行の長さを揃える(Web Interface Guidelines)——
     2行以上になったとき、1行目だけが長い形を避ける */
  text-wrap: balance;
}

/* 説明の1行。**読む文章の版面**にする(全角40字前後) —— 器は1180pxあるので、
   伸ばしきると1行が60字を超えて読めなくなる */
.helppage .intro-sub {
  margin: 0;
  max-width: 40em;
  font-size: var(--fs-lg);
  line-height: 1.9;
  color: var(--ink);
}

.intro-sub b { color: var(--green-dark); }

/* 何が残るかの見出し。札の列との間は詰める(対で読ませる) */
.helppage .intro-cap {
  margin: 22px 0 7px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}

/* 札は**中身**なので、地の色を持たせて本文と役割を分ける */
.card.intro .chiprow { gap: 6px 8px; }

.card.intro .chip.flat {
  background: var(--green-bg);
  color: var(--green-dark);
  font-size: var(--fs-md);
  padding: 4px 12px;
  border-radius: 999px;
}

@media (max-width: 760px) {
  .helppage .intro-lead { font-size: var(--fs-xl); line-height: 1.55; }
  .helppage .intro-sub { font-size: var(--fs-base); line-height: 1.85; }
}

/* **比べる表。**役割ごとに文を並べると、読み手が「自分にできて相手にできないこと」を
   突き合わせることになる。列は役割、行はできること、升は ✓ か「—」。

   **`.helppage` を頭に付ける。**語の定義を並べる表向けの `.helppage table th`
   (クラス+要素2つ)の方が詳しく、`.rolegrid th` では**負ける** ——
   見出しだけ左寄せ+右に余白が残り、✓ と項目名の位置がずれていた(実際にずれた) */
.helppage .rolegrid + .note { max-width: 790px; margin-left: auto; margin-right: auto; }

/* **中央に置く**(2026-08-26 ユーザー指摘「バランスがへん」)。器いっぱいに広げると、
   短い行の名前と ✓ が遠く離れて対応が読み取れない —— **幅(780px)と `table-layout` は
   下の `.helppage table:not(.grid):not(.rolegrid)` が持っている**(同じ詳しさで後に来るのであちらが勝つ)。
   ここが足すのは**中央寄せ**だけ —— と書いていたが、汎用の規則の対象から外したので
   幅と `table-layout` もここが持つ(2026-08-26) */
.helppage table.rolegrid {
  width: 100%;
  max-width: 790px;
  table-layout: fixed;
  margin: 6px auto 2px;
  border-collapse: collapse;
}

/* `table-layout: fixed` は**最初の行**の幅を使う。1列目は残り全部、役割の列は同じ幅 */
.helppage .rolegrid thead th:first-child { width: auto; }
.helppage .rolegrid thead th + th { width: 8.5rem; }

.helppage .rolegrid th, .helppage .rolegrid td {
  border-bottom: 1px solid var(--border);
  border-top: 0;
  padding: 9px 10px;
  font-size: var(--fs-md);
}

.helppage .rolegrid thead th {
  border-bottom: 2px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  vertical-align: bottom;
  white-space: nowrap;
}

/* 1列目は**行の名前**。ここだけ左に揃え、幅は残りを取る */
.helppage .rolegrid thead th:first-child,
.helppage .rolegrid tbody th { text-align: left; width: auto; }

.helppage .rolegrid tbody th {
  font-weight: 400;
  color: var(--ink);
  vertical-align: middle;
  word-break: auto-phrase;
}

/* 可否の記号は升の真ん中に置く */
.helppage .rolegrid td { text-align: center; vertical-align: middle; }

.can-yes { color: var(--green); font-weight: 700; }
.can-no { color: #b9c6bf; }

/* 記号ではなく言葉が入る升(担当の区間だけ) */
.helppage .rolegrid .rolenote { color: var(--muted); font-size: var(--fs-sm); }

.helppage .rolegrid tbody tr:last-child th,
.helppage .rolegrid tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 760px) {
  /* 狭い画面では役割の列を詰める(表そのものは横に保つ —— 比べる表なので縦積みにしない) */
  .helppage .rolegrid th, .helppage .rolegrid td { padding: 8px 6px; font-size: var(--fs-sm); }
  /* 役割の列を詰めて、**行の名前**に幅を回す —— 名前が3行に折れると、
     ✓ を見る前に何の行だったかを組み立て直すことになる */
  .helppage .rolegrid thead th + th { width: 4.2rem; }
  /* 狭い画面では役割の名前を**折り返させる** —— nowrap のままだと
     「拠点スタッフ」が升いっぱいになり、隣の「運転手」とくっついて読めない */
  .helppage .rolegrid thead th { white-space: normal; }
  .helppage .rolegrid .rolenote { font-size: var(--fs-xs); }
}

/* **1枚ずつ大きく見せ、隣に何ができるかを書く**(2026-08-26 ユーザー判断)。
   2枚を横に並べると写真が小さくなり、説明も写真の下の注記に落ちる ——
   この2枚は「手に取るものは紙とスマホだけ」という**主張**なので、面積を与える */
.pdxrow {
  display: grid;
  /* **写真の幅は上限を決める。**器の幅(1180px)の半分を与えると、写真だけで
     700px近い高さになり、隣の2行が真ん中に浮く */
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}

.pdxrow + .pdxrow { margin-top: 26px; }

.helppage .pdxlead {
  margin: 0 0 8px;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
  word-break: auto-phrase;
  /* 見出しは行の長さを揃える(Web Interface Guidelines)——
     2行以上になったとき、1行目だけが長い形を避ける */
  text-wrap: balance;
}

.helppage .pdxsub {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--muted);
  word-break: auto-phrase;
}

/* 写真らしい枠。白い縁を少し残して、影は最小限(印画紙の見立て) */
.phototile {
  margin: 0;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 1px 3px rgba(20, 55, 47, .07);
}

/* **縦横比は器が決める。**元写真のEXIFの回転が残っていると、ブラウザが画像を
   起こして**その升だけ縦長に膨らむ**(実際に起きた。書き出し側で -auto-orient と
   -strip を掛けてあるが、器の側でも保険をかける) */
.phototile img {
  display: block;
  width: 100%;
  /* **`height: auto` を必ず書く。**img の height 属性は「見た目のヒント」として
     効いてしまい、height が確定すると `aspect-ratio` は無視される ——
     属性のままの 480px が高さになり、升が横長にならなかった(実際に踏んだ) */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  background: #f2f5f3;
}

@media (max-width: 760px) {
  .pdxrow { grid-template-columns: 1fr; gap: 14px; }
  .pdxrow + .pdxrow { margin-top: 22px; }
}

/* 図の下の注記は**読む文章**なので、行を伸ばしきらない —— 管理画面の器は1180pxあり、
   全角60字の行になっていた(読む画面は全角40字前後が目安) */
.cargorail ~ .note { max-width: 46em; }

@media (max-width: 900px) {
  table.grid .col-low { display: none; }
  table.grid .col-narrow { display: block; }
}
@media (max-width: 700px) { table.grid .col-mid { display: none; } }

/* リストビュー: 件数が少なく比較しない画面(地点等)。1件1行+操作はメニューへ。
   表にすると列が余り、カードにすると縦に伸びる。モバイルでも素直に読める */
/* **overflow を付けないこと**。行メニューのポップアップが切れる
   (`.grid-wrap` で一度踏んでいる同じ罠)。角丸は行側で丸める */
.listview { background: #fff; border: 1px solid var(--border); border-radius: 10px; }
/* **器を二重にしない**(2026-08-15)。`.card` `.grid-wrap` `.listview` は同じ器
   (白・1px枠・角丸10px)で、カードの中に一覧を入れると枠が入れ子になる。
   カードが既に境界を引いているので、中の一覧は枠を落として中身だけにする ——
   一覧が主役のページ(枠が1枚だけ)との見え方も揃う */
.card .grid-wrap, .card .listview { border: 0; border-radius: 0; }
.listrow { border-top: 1px solid var(--rule); padding: 11px 14px; }
.listrow:first-child { border-top: 0; border-radius: 10px 10px 0 0; }
.listrow:last-child { border-radius: 0 0 10px 10px; }
/* **ゼブラ縞は表と同じ規則で入れる**(2026-08-19)。`table.grid` には縞があるのに
   `.listview` だけ無く、同じ「一覧」なのに別の種類に見えていた。行が横に長い
   (名前 … 現地時間 … 使用状況)ので、縞が無いと視線が中央の空白を渡れない */
.listrow:nth-of-type(even) { background: #fafcfb; }
.listrow:hover { background: var(--green-bg); }
/* 無効の行は縞・ホバーより強い(状態が優先) */
.listrow.is-inactive, .listrow.is-inactive:hover { color: var(--muted); background: #f4f7f5; }
.listrow-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* 便詳細の荷物カード: 件(明細行)ごとの枠。品名の見出しと荷札の帰属を枠で示す
   (字下げだけだと隣の件と地続きに読める)。overflow を付けない ——
   中に .rowmenu-panel(絶対配置)が開く */
.cargoline { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 10px; }
.cargoline + .cargoline { margin-top: 10px; }
.listrow .sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 3px; }
/* 発着地の1行(名前+座標 / 現地時間 / 使用状況 / 操作)。列で置いて縦に揃える ——
   全部を1本の文につなぐと、10行が同じ灰色の帯になり使用状況が読めない */
/* **幅はいちばん長い訳で決める**(2026-08-24)。`9.5em` は日本語の「2便で使用中」に
   合わせた幅で、訳(Sedang digunakan di 2 pengiriman)が入り切らず**隣の列へ
   重なっていた**。`max-content` にすると重なりは消えるが、**行ごとに別のグリッド**
   なので列が揃わなくなる(WIB の行と WITA の行で位置がずれる)—— 固定幅のまま広げ、
   それでも溢れる値は**折り返す**(nowrap を外す) */
.sitegrid { display: grid;
  grid-template-columns: minmax(0, 1fr) 12em 16em max-content;
  gap: 4px 16px; align-items: center; }
.sitename .sub { font-variant-numeric: tabular-nums; }
.sitetz { justify-self: end; white-space: nowrap; }
.siteuse { justify-self: end; font-size: var(--fs-md); }
@media (max-width: 760px) {
  .sitegrid { grid-template-columns: minmax(0, 1fr) max-content; }
  .sitetz, .siteuse { justify-self: start; grid-column: 1; }
}
/* 編集を開いた行。**どの行を編集中か**を地で示す(開いた瞬間に行が消えて
   フォームだけが残ったように見えないように) */
/* 編集フォームは**白い面**として開く(2026-08-19 ユーザー指摘「背景が透明で
   見やすくない」)。行の地(淡い緑)の上に白いパネルが載ることで、
   「この行の中で開いている」ことと「入力する場所」が同時に読める */
.listrow-edit {
  margin-top: 12px; padding: 14px; background: #fff;
  border: 1px solid var(--border); border-radius: 10px;
}
.listrow:has(.listrow-edit) {
  background: var(--green-bg);
  /* 縞との差が小さいので、左に印を入れて「この行を開いている」ことを分かるようにする */
  box-shadow: inset 3px 0 0 var(--green);
}
/* 発着地のフォーム(追加・編集)。入力欄は列幅を絞り、地図だけ全幅にする */
.siteform > :not(.mapwrap) { max-width: 640px; }
/* ラベルは行を占める(`.txt` は inline-block なので、幅を絞ると
   ラベルと入力欄が同じ行に並んでしまう) */
.siteform > label { display: block; }
/* フォームの外側に足した注記・実行の行も同じ列幅に収める(地図だけが全幅) */
.listrow-edit > form > :not(.siteform),
.addform-panel > form > :not(.siteform) { max-width: 640px; }

/* ツールバーに並べるリンクボタン(全幅にしない) */
/* **隣り合わせたときに高さと位置を揃える**(2026-08-19)。枠線のあるボタン
   (.btn.sub)と無いボタンが並ぶと2px背が違い、さらに `.btn + .btn` の
   margin-top を拾って3〜4pxずれていた(保存とキャンセルがズレて見えた) */
.btn.btn-inline { width: auto; padding: 8px 14px; font-size: var(--fs-md); margin: 0;
  line-height: 1.3; border: 1.5px solid transparent; }
.btn.btn-inline + .btn.btn-inline { margin-top: 0; }
table.grid tbody tr:nth-child(even) { background: #fafcfb; }
table.grid tbody tr:hover { background: var(--green-bg); }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid .sub { color: var(--muted); font-size: var(--fs-sm); }
table.grid tr.is-inactive td { color: var(--muted); }

/* 行の操作はオーバーフローメニューに畳む(行内に詰め込まない)。
   モーダルは使わない —— 隣の行が見えなくなり、似た行を参照できなくなるため */
.rowmenu { position: relative; }
.rowmenu > summary {
  list-style: none; cursor: pointer; user-select: none; text-align: center;
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px;
  background: #fff; color: var(--muted); font-size: var(--fs-base); line-height: 1.2;
}
.rowmenu > summary::-webkit-details-marker { display: none; }
.rowmenu[open] > summary { border-color: var(--green); color: var(--green-dark); }
/* 一覧の「追加」は行メニューの器を借りている(押すとフォームのパネルが開く)。
   **見た目は追加ボタンのまま**にする —— `.rowmenu > summary` の方が詳細度が高く、
   ユーザー一覧の「＋ ユーザーを追加」だけ枠線ボタンになっていた
   (輸送便=塗り / ユーザー=枠線 で、同じ「追加」が別物に見える。2026-08-19) */
.rowmenu > summary.btn-add, .rowmenu[open] > summary.btn-add {
  background: var(--green); color: #fff; border: 1.5px solid transparent;
  padding: 8px 14px; font-size: var(--fs-md); font-weight: 700; text-align: center;
}
.rowmenu > summary.btn-add:hover { background: var(--green-dark); }
.rowmenu-panel {
  /* z-index は**地図より上**(Leafletのペインは400〜700)。地図が経路のカードの中に
     入ったので、30のままだとツールバーのパネルが地図の下に潜る(実際に潜った) */
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000;
  min-width: 240px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 10px;
  text-align: left;
  /* **表のセルの nowrap を打ち消す**。継承したままだとラベル・入力欄・注記が
     1行に並んでパネルの外へ伸びる(行メニューが壊れる3つ目の原因) */
  white-space: normal;
}
/* **下に入り切らないときは上に開く**(2026-08-22 ユーザー指摘「下に切れる」)。
   ポップオーバーは値の下に開くのが既定だが、画面の下端に近い値(便詳細の燃料の
   想定燃費など)では**保存と閉じるが切れる** —— 開いた本人には操作の無いパネルに
   見える。付け外しは base.html が実測して行う(3種類のパネルで同じ話なので、
   パネルごとに書かず1か所に置く)。gap は各パネルの既定と同じにする */
.drop-up > .rowmenu-panel, .drop-up > .help-panel {
  top: auto; bottom: calc(100% + 6px);
}
.drop-up > .usermenu-panel { top: auto; bottom: calc(100% + 8px); }
/* パネルの中のボタンは**内容ぶんの幅・小さめ**(2026-08-15 ユーザー指摘)。
   `.btn` は現場のモバイル用に全幅・14pxパディングなので、そのまま小さな
   ポップオーバーに入れると保存だけが主役のように大きく見える */
.rowmenu-panel .btn, .rowmenu-panel .btn-undo {
  display: inline-block; width: auto; margin: 0 8px 0 0;
  padding: 7px 14px; font-size: var(--fs-md); line-height: 1.3;
}
/* 保存の隣に置く「閉じる」(変更せずに閉じる導線)。ボタンにしない —— 押し間違いの
   ときに保存と同じ重さで並ぶと、どちらが実行か読みにくい */
.panel-cancel {
  background: none; border: 0; font-family: inherit;
  font-size: var(--fs-sm); color: var(--muted); cursor: pointer;
  /* 36×18 だった。閉じる道が押しづらいと「保存しかない」ように見える */
  padding: 4px 6px; margin: -4px -6px; min-height: 24px;
}
.panel-cancel:hover { color: var(--green-dark); }
/* **一覧の便コードは升いっぱいを的にする**(2026-08-26)。文字の高さ(13px)しか
   当たり判定が無く、升の余白を押しても反応しなかった —— 一覧の主な導線なので、
   `display: block` にして升の高さを受け取る */
table.grid td > a:only-child { display: block; padding: 4px 0; margin: -4px 0; }

.rowmenu-panel .txt { margin: 0 0 6px; font-size: var(--fs-base); padding: 8px 10px; }

/* **操作だけのメニューは「メニュー」の形にする**(2026-08-19 ユーザー指摘
   「操作ポップアップが非常にダサい」)。以前は枠線ボタンを縦に積んでいたので、
   幅の違うボタンが2つ並び、入力欄のようにも見えた。メニューは
   **左揃えの全幅の行 + ホバーで色**(OSのコンテキストメニューと同じ作法)。
   フォームを開くパネル(ユーザー追加・代理到着)は従来どおりボタンのまま */
.rowmenu-panel.menu { padding: 5px; min-width: 190px; box-shadow: 0 6px 18px rgba(28, 43, 36, .14); }
.menu-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 8px 10px; border-radius: 7px; font-family: inherit; font-size: var(--fs-md);
  color: var(--ink); line-height: 1.4; cursor: pointer; text-decoration: none;
}
.menu-item:hover { background: var(--green-bg); color: var(--green-dark); }
/* 取り消しにくい操作(削除)は色で分ける。並びの最後に置く */
.menu-item.danger { color: var(--warn); }
.menu-item.danger:hover { background: var(--warn-bg); }
.menu-item[disabled] { color: #a8b5ae; cursor: default; }
.menu-note {
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
  padding: 7px 10px 3px; margin-top: 4px; border-top: 1px solid var(--rule);
}
.rowmenu-panel.menu form { margin: 0; }

/* 編集も操作もあるパネル(温度計・ユーザー)。**フォームは「ラベル+1行」、
   操作は下にメニュー行**、の2段に分ける(2026-08-19)。以前は白い枠線ボタンが
   3〜4個縦に積まれ、どれが編集でどれが実行なのか形からは読めなかった */
.panel-label { display: block; font-size: var(--fs-sm); color: var(--muted); margin: 8px 0 3px; }
.panel-label:first-child { margin-top: 0; }
.panelrow { display: flex; align-items: center; gap: 6px; }
.panelrow .txt { flex: 1 1 auto; margin: 0; }
.panelrow .btn { flex: 0 0 auto; }
.menu-sep { border-top: 1px solid var(--rule); margin: 10px -5px 4px; }
.rowmenu-panel .menu-item { margin: 0 -5px; width: calc(100% + 10px); }
.rowmenu-panel form { margin: 0; }
.rowmenu-panel .note { margin: 0 0 8px; }
/* 保存の下に置く注記(何に使う値か・履歴が残ること)は**ボタンの後**なので上に空ける */
.rowmenu-panel .edit-note { margin: 8px 0 0; }

/* ---- 経路タイムライン(便の作成・便詳細の経路変更で共用。_route_form.html) ----
   発地 →(区間)→ 経由地 →(区間)→ 着地 を縦1本で見せる。
   ノード=地点(●)、左線でつないだ間が区間(輸送方法)。
   区間は1行のテキストに畳み、開いたときだけ入力欄を出す(選択欄の羅列にすると
   地点と区間の区別が読めなくなる —— 2026-08-10 レビュー)。
   線の x 位置はノードの●の中心(8px)に合わせてある —— どちらかだけ動かすとずれる */
/* 地点(発地・経由地・着地)は**ブロック**にする(駅のカード)。区間(輸送方法)は
   「この地点から出る輸送」なので**ブロックの中**に入る —— 外にぶら下げると帰属が
   読めない(ユーザーレビュー)。レールはコンテナの背後に1本だけ引き、ブロックの
   隙間から覗かせる(Googleマップの経路エディタ・縦ステッパー・輸送タイムラインUIの
   合成。地点と区間の区別がインデントだけだと読めない、という2026-08-10レビューの延長) */
[data-route-form] { position: relative; display: flex; flex-direction: column; gap: 14px; }
[data-route-form]::before {
  content: ""; position: absolute; left: 20px; top: 16px; bottom: 16px;
  border-left: 2px dotted #a9c6b5;
}
.rt-node {
  position: relative; padding: 8px 12px 10px 34px; margin: 0;
  background: var(--green-bg); border: 1px solid var(--border); border-radius: 10px;
}
.rt-node::before {
  content: ""; position: absolute; left: 12px; top: 12px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--green);
  border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--green);
}
/* 経由地は白抜きの●(路線図の途中駅)。発着は塗り●で終端を示す */
.rt-node.via::before { background: #fff; }
.rt-node-label { display: block; font-size: var(--fs-sm); color: var(--green-dark); font-weight: 700; margin: 2px 0; }
.rt-node .txt { margin-top: 2px; }
/* 区間は地点ブロックの中の白い小箱(下の .rt-legrow)。レールは背負わない */
.rt-leg { margin: 8px 0 0; }
.rt-leg .note { margin-top: 2px; }
/* 畳んだ区間の行も**接続カード**にする(レールに掛かる白い小箱。輸送方法・担い手を
   運ぶのはこの箱で、地点のブロックと対で読める) */
.rt-legrow > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 5px 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
}
.rt-legrow > summary::-webkit-details-marker { display: none; }
.rt-leg-summary { font-size: var(--fs-md); color: var(--ink); }
.rt-leg-change {
  flex-shrink: 0; font-size: var(--fs-sm); color: var(--green-dark); background: #fff;
  border: 1px solid var(--border); border-radius: 8px; padding: 3px 10px;
}
/* 開いたら見出し行と入力欄を1つの枠でつなぐ(donerow と同じ形)。
   枠が無いと、輸送方法のフォームがどの行に従属しているか読めない */
.rt-legrow[open] > summary {
  background: var(--green-bg); border-color: var(--green);
  border-radius: 10px 10px 0 0; padding: 6px 10px;
}
.rt-legrow[open] .rt-leg-change { border-color: var(--green); }
.rt-leg-panel {
  border: 1px solid var(--green); border-top: 0; border-radius: 0 0 10px 10px;
  background: #fff; padding: 8px 12px 10px; margin-bottom: 6px;
}
/* 追加行はブロックの隙間(レールの上)に置く。左34pxは地点ブロックの
   本文開始位置に揃える(レール20px+余白。詰めるとボタンがレールに接触する ——
   以前 `padding: 6px 0` の後勝ちで実際に起きた) */
/* カード上部のツールバーのパネルは**左端基準**。既定は右端基準(表の行メニュー用)
   なので、左寄りのボタンから開くと画面の外へ出る(経路の変更パネルで実際に出た) */
.toolbar .rowmenu-panel { left: 0; right: auto; }
/* **ツールバーの右端に置く「追加」は、パネルも右端に揃える**(2026-08-26)。
   上の行は「ツールバーの左にある `⋯`」向けで、`margin-left: auto` で右端まで
   送られた追加ボタンに当たると、**300pxのパネルが必ず画面の外へ出る**
   (1440pxでも10px、1180px以下では140px。ページごと横スクロールになっていた)。
   横方向は呼び出し側が決める、という作法どおり —— ここでは `.btn-add` が名乗る */
.toolbar .rowmenu > summary.btn-add + .rowmenu-panel { left: auto; right: 0; }

/* 出発済みの区間・通過済みの積替え地(輸送中の経路変更で固定して見せる) */
.rt-locked { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px;
  background: #fafcfb; border: 1px dashed var(--border); border-radius: 8px; }

.rt-addrow { padding: 0 0 0 34px; }
/* 追加ボタンは**破線**=空きスロットの慣習(Trello/Notion系の「+ 追加」)。
   実線だと区間の行と同格に見える */
.rt-addrow .btn { width: auto; padding: 7px 12px; font-size: var(--fs-md); margin: 0; border-style: dashed; }
/* 輸送便一覧: 区間と予定の地点グリッド(発/換/着 | 地点名 | 予定時刻)。
   別々の列にしない —— 長い地点名が折り返すと行の対応がずれ、
   名前と時刻が別の地点の組に見える。1セル内のグリッドなら行の高さが揃う */
.ptgrid {
  display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 2px 8px; align-items: baseline;
}
.pt-kind {
  font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--green);
  /* **下に出る文字(j・g)が切れないだけの余白**(2026-08-24)。日本語の「発 / 着」に
     下へ出る部分が無いので `1px 4px` で足りていたが、訳(Tujuan)の j の尾が
     緑の外へ出て、白い文字なので**消えて見えた** */
  border-radius: 4px; padding: 2px 6px; line-height: 1.5; justify-self: start;
}
.pt-kind.via { background: var(--muted); }
/* 荷物カードの荷札の表: 荷札番号 | 出発時 | 到着時 | 状態。
   語(出発時・到着時)は見出しに1回だけ出し、行は位置で読ませる ——
   行ごとにラベル付きのチップを並べると、同じ語の繰り返しで散らかる */
.labelgrid {
  /* 42px は「出発時」「到着時」の幅。訳(Saat keberangkatan)は倍あるので、
     **中身で決まる幅**にする(2026-08-24) */
  display: grid; grid-template-columns: max-content max-content max-content minmax(0, 1fr);
  gap: 4px 10px; align-items: center; margin: 6px 0 0 16px;
}
.labelgrid > .note { margin: 0; font-size: var(--fs-xs); }
.lg-code { font-size: var(--fs-base); }
.lg-none { color: var(--border); text-align: center; }
.lg-state { justify-self: end; display: flex; align-items: center; gap: 6px; }
/* 荷札の写真の入口(出発時/到着時)。小さな的なので**枠のある控えめなチップ**にし、
   無い局面は薄い文字だけで出す(締めのレビューで欠けを目で拾えるように) */
.photopop { display: inline-block; }
.photopop > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-size: var(--fs-sm); color: var(--green-dark); background: #fff;
  border: 1px solid var(--border); border-radius: 8px; padding: 1px 5px;
  text-align: center;
}
.photopop > summary::-webkit-details-marker { display: none; }
.photopop[open] > summary { border-color: var(--green); background: var(--green-bg); }
/* 行メニューは表の右端で使うので right:0 が既定。写真の入口は行の左寄りにあるので
   左揃えに戻す(右揃えのままだとチップから離れた場所に開いて繋がりが読めない) */
.photopop .rowmenu-panel { left: 0; right: auto; }
/* 値そのものを押して直す(点線の下線=編集できる印)。ボタンを置くと
   一覧の主役(品名・個口・重量)より操作が強く見える */
/* position:relative は**この部品自身が持つ**(2026-08-15)。持たせないとパネルが
   カード幅いっぱいに伸びるので、以前は `.rowmenu` を併記して借りていた ——
   同じ見た目に2通りの書き方がある状態だったため、ここに寄せた */
.inline-edit { display: inline-block; position: relative; }
.inline-edit > summary {
  /* .rowmenu > summary の枠・余白・色を打ち消す(ボタンに見せない)。
     残すのは点線の下線だけ —— 文章の中の値がそのまま押せる、という見え方 */
  list-style: none; cursor: pointer; display: inline;
  border: 0; border-bottom: 1px dotted var(--muted); border-radius: 0;
  padding: 0; background: none; color: inherit; font-size: inherit; text-align: left;
}
.inline-edit > summary::-webkit-details-marker { display: none; }
/* **下線の意味を2つ持たせない**(2026-08-23 初見レビュー)。一覧のIDは下線=リンク、
   便詳細の値も下線=編集、で「押すと飛ぶのか開くのか予測できない」と言われた。
   点線と実線の差だけでは弱いので、編集できる値には**小さな鉛筆**を添える ——
   形が違えば、色が読めない環境でも見分けられる */
.inline-edit > summary::after {
  content: "✎"; font-size: var(--fs-xs); color: var(--muted); margin-left: 3px;
}
.inline-edit > summary:hover::after, .inline-edit[open] > summary::after { color: var(--green); }
.inline-edit > summary:hover { border-bottom-color: var(--green); color: var(--green-dark); }
.inline-edit[open] > summary { border-bottom-color: var(--green); color: var(--green-dark); }
.inline-edit .rowmenu-panel { left: 0; right: auto; }
/* 列の右端にある値(航路距離・温度指定)は**右端基準**で開く —— 左端基準のままだと
   パネルが画面の外へはみ出す。向きは呼び出し側が `align="right"` で言う */
.inline-edit.edit-right .rowmenu-panel { left: auto; right: 0; }
/* 便詳細の区間の一覧(v0.5.3)。**表ではなくgridで列を揃える** ——
   開いた中に写真ストリップが入るので、<table> だと行の高さが暴れる
   (`.labelgrid` と同じ手)。展開は <details>(モーダルは使わない)。

   **列幅を固定する**のが要点。行ごとに <details> が別のgridになるので、
   max-content や auto を混ぜると**行によって列の位置がずれる**(実際にずれた)。
   同じ定義を見出し行と各行で共有し、変えるときは両方を一度に変える */
.leglist { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; }
.leghead, .legrow > summary {
  display: grid;
  /* 末尾にあった ⋯(運送人の変更)の列は 2026-08-19 に廃止 —— 運送人は値そのものを
     押して直せるので、同じ操作の入口が2つあった(ユーザー指摘) */
  /* **固定幅に戻す**(2026-08-24)。`max-content` にしたら重なりは消えたが、
     **行ごとに別のグリッド**(見出しと各 `<details>`)なので**列が揃わなくなった**
     —— 上のコメントが警告しているとおりで、値の長さが行ごとに違うと
     「表」に見えなくなる。**揃えるには全部の行で同じ幅**でなければならない。
     幅は**いちばん長い訳**で決める(Pengangkutan / Sedang disiapkan)——
     日本語だけを見て詰めると、訳したときに重なる */
  grid-template-columns:
    minmax(0, 1fr) 112px 140px 176px 200px;
  gap: 4px 10px; padding: 9px 12px; align-items: start;
}
.leghead {
  background: var(--green); color: #fff; font-size: var(--fs-sm); font-weight: 700;
  border-radius: 9px 9px 0 0;
}
.legrow { border-top: 1px solid var(--rule); }
.legrow > summary { list-style: none; cursor: pointer; font-size: var(--fs-md); }
.legrow > summary::-webkit-details-marker { display: none; }
/* ゼブラ縞は表(`table.grid`)と同じ規則で入れる —— 同じ「一覧」なのに
   縞の有無が違うと、別の種類の表に見える(ユーザー指摘 2026-08-15)。
   開いた行・ホバーは縞より強い(状態の方が優先) */
.legrow:nth-of-type(even) > summary { background: #fafcfb; }
/* 最後の行は下の角を丸める(開いているときは中身が続くので丸めない) */
.legrow:last-of-type:not([open]) > summary { border-radius: 0 0 9px 9px; }
.legrow:last-of-type > .legbody { border-radius: 0 0 9px 9px; }
.legrow > summary:hover { background: #f3f8f5; }
.legrow[open] > summary { background: var(--green-bg); }
/* 開ける中身が無い区間(準備中・船)は押しても空。三角を出さず、押せる見た目にしない
   —— 行自体は残す(区間は経路の事実なので隠さない) */
.legrow[data-empty] > summary { cursor: default; }
.leg-caret { color: var(--muted); font-size: var(--fs-xs); width: 10px; display: inline-block; }
.legrow[data-empty] .leg-caret { visibility: hidden; }
.legrow[open] .leg-caret::before { content: "▾"; }
.legrow:not([open]) .leg-caret::before { content: "▸"; }
.leg-main { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.leg-main .ptgrid { min-width: 0; }
.leg-figs { font-variant-numeric: tabular-nums; }
.legbody { padding: 0 12px 12px 40px; border-top: 1px dashed var(--border); }
/* 変更の履歴は経路カードの下に畳む(普段は読まない。ユーザー判断 2026-08-15) */
.histbox { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 8px; }
.histbox > summary {
  list-style: none; cursor: pointer; font-size: var(--fs-sm); color: var(--muted);
  display: inline-block; border-bottom: 1px dotted var(--border);
}
.histbox > summary::-webkit-details-marker { display: none; }
.histbox > summary:hover { color: var(--green-dark); border-bottom-color: var(--green); }
.histbox[open] > summary { color: var(--green-dark); }
/* **印象の差は角ではなく色で付ける**(ユーザー判断 2026-08-15)。履歴は主役ではない
   ので、見出しを薄くして区間の一覧(濃い緑)と見分ける —— 形で区別すると
   「壊れているのか意図なのか」が読めない */
.histbox table.grid thead th {
  background: var(--green-bg); color: var(--green-dark);
  border-bottom: 1px solid var(--border);
}
.legfacts { margin-top: 8px; }
/* `.kv` の写真アイコンは**行の右端**にある(値の隣)。`.photopop` の既定は左端基準
   なので、そのままだと画面の外へ開く(実際に切れた)。kvの中だけ右端基準に戻す
   —— 荷札の写真(`.labelgrid`)は行の左寄りなので既定のまま */
.kv .photopop .rowmenu-panel { left: auto; right: 0; }
/* 枠付きのチップは**値の隣では浮く**(荷札の表では升目に収まるので枠が効くが、
   文の末尾に置くと箱だけが目立つ。ユーザー指摘 2026-08-15)。枠を外して薄い字にし、
   押せることはホバーと色で示す。枚数も出さない —— 開けば分かる数字で、
   行に置くと値(ナンバー・距離)より先に目に入る */
.kv .photopop > summary {
  border: 0; background: none; padding: 0; margin-left: 4px;
  font-size: var(--fs-sm); line-height: 1; opacity: .5;
}
.kv .photopop > summary:hover, .kv .photopop[open] > summary { opacity: 1; }
.legsec { margin-top: 10px; }
.legsec-head { font-weight: 700; margin-bottom: 4px; }
/* 給油の明細: 時刻 | 種別 | 量 | 写真。**量とレシートを同じ行に置く**のが要点 */
/* **ひと塊に見せる**(ユーザー判断 2026-08-15)。行が3〜4本並ぶので、囲いが無いと
   上の事実(車両・距離)と地続きに見える */
.fuelgrid {
  display: grid; grid-template-columns: max-content 1fr max-content max-content;
  gap: 6px 12px; align-items: center; font-size: var(--fs-md);
  background: #fafcfb; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px;
}
.fuel-liters { font-variant-numeric: tabular-nums; text-align: right; }
.fuel-photos { display: flex; gap: 6px; justify-content: flex-end; }
/* 狭い画面では列を積む(管理画面はPC前提だが、崩さない)。見出し行は意味が無くなるので消す */
@media (max-width: 900px) {
  .leghead { display: none; }
  .legrow > summary { grid-template-columns: 1fr max-content; }
  .leg-figs, .leg-carrier, .leg-mode, .leg-state { grid-column: 1 / -1; }
  .legbody { padding-left: 12px; }
}

.leg-seq { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.pt-time { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 予定(実績が入るまでの仮の値)。**実績と見分けが付くこと**が要点 ——
   同じ見た目にすると、まだ起きていない時刻を実績として読む */
.pt-plan { color: var(--muted); opacity: .75; }
/* 状態の⚠(運行上の注意の入口)。チップの隣に置く小さな的 */
summary.issue-flag {
  list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; min-height: 24px; min-width: 24px; justify-content: center;
  color: var(--warn); font-size: var(--fs-base); padding: 0 4px;
}
summary.issue-flag::-webkit-details-marker { display: none; }

/* 伝票カードの選択チップ(必要な紙だけ選んで印刷)。チェックボックスを
   チップ枠ごとタップできるようにする(48pxは要らない —— 管理PCの操作) */
/* 伝票の1区画(荷札 / 輸送依頼書)。見出しの行に説明と操作を置き、選択は下に敷く */
.slipsec + .slipsec { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.slipsec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; }
/* 説明は見出しの行に入れない —— 言語で長さが変わるものを右端の位置を決める行に
   混ぜると、長い言語で操作が折り返して左端に落ちる(2026-08-24 インドネシア語で発覚) */
.slipsec-note { margin: 2px 0 8px; }
.slipsec-act { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
/* 文字だけの操作(すべて外す)。ボタンの箱にすると印刷と同格に見える */
.linkbtn {
  background: none; border: 0; padding: 0; font-family: inherit; font-size: var(--fs-sm);
  color: var(--muted); cursor: pointer; border-bottom: 1px dotted var(--border);
}
.linkbtn:hover { color: var(--green-dark); border-bottom-color: var(--green); }
.pickrow { display: flex; flex-wrap: wrap; gap: 5px 8px; margin: 8px 0 0; }
.pick {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px;
  background: #fff; cursor: pointer; user-select: none;
}
.pick input { accent-color: var(--green); margin: 0; }
.pick:has(input:checked) { border-color: var(--green); background: var(--green-bg); }

/* 経由地の予定時刻(到着・出発)は2列(狭ければ折り返す)。1列に縦積みすると
   経由地ブロックが日時4行ぶん伸び、タイムライン全体が読めなくなる */
.rt-via-times { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.rt-via-times > div { flex: 1; min-width: 180px; }
/* 経由地の削除は**静かなテキスト操作**にする(荷物の明細行の削除 .cargo-del と
   同じテイスト。枠付きボタンだと「変更」や追加と同格に見え、破壊的操作が目立ちすぎる) */
.btn.rt-via-del {
  width: auto; padding: 8px 4px; font-size: var(--fs-sm); margin: 0;
  border: 0; background: transparent; color: var(--muted); box-shadow: none;
}
/* 荷物の明細行(便の作成)。**1荷物=1つの枠**にまとめる —— 温度指定の段が
   どの荷物に属すかは、インデントではなく枠で見せる(経路タイムラインの開いた区間と
   同じ文法)。ラベルは列見出し(cargo-head)で1回だけ出す —— 行ごとにラベルを
   繰り返すと縦に伸びて、段階Aで問題になった「フォームの羅列」に戻る */
/* 3列目(削除)は固定幅にする。auto だと、削除ボタンの無い見出し行(cargo-head)で
   3列目が0に潰れ、「個数」の見出しだけ入力列より右にずれる(右寄せに見える) */
.cargo-grid {
  /* 1段目=品名(全幅)+削除。品名は長い(「動物用医薬品(要冷蔵)」等)ので幅を譲る。
     数量・重量は2段目(.cargo-amount)—— 個数の隣に裸の数値欄を置くと
     「1個あたりの重量」に読める(ユーザー指摘 2026-08-14) */
  display: grid; grid-template-columns: max-content minmax(0, 1fr) 48px;
  gap: 6px; align-items: center;
}
.cargo-grid > .note { margin: 0; white-space: nowrap; }
/* 2段目=数量の行。温度計測の行と同じ形(ラベル+控えめな単位語)にして、
   「4 個口 ・ 合計 120 kg」と文で読ませる */
.cargo-amount { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.cargo-amount > .note { margin: 0; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.cargo-amount .txt { margin: 0; padding: 8px 8px; font-size: var(--fs-base); flex: 0 0 auto; }
.cargo-amount .cargo-count { width: 64px; }
/* 数量と重量を別項目として読ませる区切り(近接で群を作る)。
   点「・」だと間隔が足りず「4個口の合計」= 1個あたりに読めた */
.cargo-amount-sep {
  /* 群の間は群の中(6px)よりはっきり広く取る —— 近接が群を作るので、
     差が小さいと1つの項目に読み戻る */
  width: 1px; height: 20px; background: var(--border); margin: 0 11px; flex: 0 0 auto;
}
.cargo-amount .cargo-weight { width: 92px; }
/* 合計行(請求書の定石)。行の値を足したものだと目で示す */
.cargo-total {
  margin: 0 0 14px; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: var(--fs-md); color: var(--ink); text-align: right;
}
.cargo-grid .txt { margin: 0; }
.cargo-box {
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  padding: 8px 10px; margin-bottom: 8px;
}
/* 削除は毎行の主役ではない。枠付きボタンが並ぶと表の操作列のように主張する
   (.btn.sub の枠より後勝ちさせるため specificity を1段上げる) */
.cargo-grid .btn.cargo-del {
  width: auto; padding: 8px 4px; font-size: var(--fs-sm); margin: 0;
  border: 0; background: transparent; color: var(--muted); box-shadow: none;
}
/* 2段目=温度計測の行(点線で区切る)。温度指定は計測方式に従属する要素として
   同じ行に続ける(狭ければ折り返す)。1段目は品名と個数だけになり文字が減る */
.cargo-measure {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 8px 0 2px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.cargo-measure > .note { margin: 0; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
/* 184px は「外気+庫内上下」の幅。訳(Suhu luar + dalam boks…)は入り切らず
   語の途中で切れていた —— **中身で決まる幅**にする(2026-08-24) */
.cargo-measure .cargo-measure-select { margin: 0; min-width: 184px; flex: 0 1 auto; }
/* 温度指定の結果の表記(入力の右)。**紙に出るのと同じ文字列**を見せる */
/* 日時の復唱(入力の直下)。言語に依存しない並びで、書式の読み違いを消す */
.dt-echo { font-variant-numeric: tabular-nums; }
/* 手順の中に置く設定用QR(運転手のヘルプ)。紙のQRと同じ大きさで出す */
/* ストアへの2つのリンク。現場の指で押せる大きさのまま横に並べる(狭い画面では縦に) */
.storelinks { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.storelinks .btn { width: auto; flex: 1 1 auto; margin: 0; }
.helpqr { margin: 8px 0; }
.helpqr svg { width: 180px; height: 180px; }
.temp-preview { color: var(--green-dark); font-size: var(--fs-base); margin-left: 4px; }
/* **折り返せるようにする**(2026-08-24)。1行に固定していたので、訳が長い言語で
   行がカードの幅を超え、**温度指定の値(いちばん見たいもの)がカードの外へ
   押し出されて背景の上に出ていた**。日本語では収まっていたので気づけなかった */
.cargo-temp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* display:flex はUAの [hidden]{display:none} に勝ってしまう(実際に踏んだ)。
   「なし」の行の温度指定を隠す hidden をここで取り戻す */
.cargo-temp[hidden] { display: none; }
.cargo-temp .txt { margin: 0; width: 68px; flex: 0 0 auto; padding: 8px 8px; font-size: var(--fs-base); }
.cargo-temp .note { margin: 0; }
.cargo-addrow { margin: 2px 0 14px; }
.cargo-addrow .btn { width: auto; padding: 7px 12px; font-size: var(--fs-md); margin: 0; }

.rt-via-row { display: flex; gap: 8px; align-items: center; }
.rt-via-row .txt { margin: 0; flex: 1; }
/* .btn の width:100% はファイル後方で定義されるため、単一クラスだと負ける */
.rt-via-row .rt-via-del { width: auto; flex: 0 0 auto; padding: 8px 12px; font-size: var(--fs-sm); margin: 0; }

/* ---- 作業リスト(ドライバー・出発前/到着時) ----
   調査(航空チェックリスト・現場アプリ・GOV.UK)からの設計:
   ・完了は消さない。**値と写真を残す**。ただし訂正ボタンを常時出さず、開いたときだけ
   ・未完了は**先頭1件だけ大きく**。同じ重みの大ボタンが並ぶと優先順位が消える
   ・タップ領域は48px以上(手袋・車内の揺れを考えると44pxは下限に過ぎない) */
.donerow { margin: 0 0 6px; }
.donerow > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 6px 10px; border-radius: 10px; background: #fff;
  border: 1px solid var(--border);
}
.donerow > summary::-webkit-details-marker { display: none; }
.donerow[open] > summary { border-color: var(--green); border-radius: 10px 10px 0 0; }
/* 開くしるし(給油の記録)。完了行の ✓ と同じ位置・同じ静かさ。
   開いたら向きを変えて「いま開いている」ことを形で示す */
.donerow-more { color: var(--muted); font-size: var(--fs-lg); line-height: 1; }
.donerow[open] > summary .donerow-more { transform: rotate(90deg); display: inline-block; }
.donerow-thumb {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-bg); font-size: var(--fs-xl);
}
.donerow-thumb img { width: 100%; height: 100%; object-fit: cover; }
.donerow-body { flex: 1; min-width: 0; line-height: 1.35; }
.donerow-label { display: block; font-size: var(--fs-sm); color: var(--muted); }
.donerow-value { display: block; font-size: var(--fs-base); color: var(--ink); }
.donerow-panel {
  border: 1px solid var(--green); border-top: 0; border-radius: 0 0 10px 10px;
  padding: 10px; background: #fff;
}
/* 1つの行の中に別々の <form>/<details> が並ぶので `.btn + .btn` の余白が効かない。
   隣接した大ボタンは1つの塊に見えて押し間違いを招くため、パネル側で間隔を作る */
.donerow-panel > * + * { margin-top: 10px; }
/* 取り消しは**まれで戻せない**操作。同じパネルの主操作(訂正)と同じ重さにしない。
   ただし**タップ領域は48pxを保つ** —— 押しにくくするのは見た目の重さであって
   的の大きさではない(手袋・揺れる車内で小さい的は別の事故になる) */
.donerow-panel .confirm { margin: 0; }
.donerow-panel .confirm > summary {
  border: 0; background: transparent; color: var(--muted);
  font-size: var(--fs-sm); padding: 15px 10px;
}

/* 次にやる1件。ここだけ枠で囲って主役にする */
.focusrow {
  border: 2px solid var(--green); border-radius: 12px; padding: 12px;
  background: #fff; margin: 4px 0 10px;
}
.focusrow-head {
  font-size: var(--fs-lg); font-weight: 700; color: var(--green-dark); margin-bottom: 8px;
}
.focusrow .btn { min-height: 56px; }
/* 1つの作業が複数の <form> に分かれることがある(`.btn + .btn` が効かない)。
   隣接した大ボタンは1つの塊に見えて押し間違いを招くので、フォーム側で間隔を作る */
.focusrow > form + form, .optrow > form + form { margin-top: 10px; }

/* 現場ホーム「作業する拠点」(2026-08-22)。**どの拠点として操作しているか**は
   作業の前提なので、右上のメニューではなくカードの値として画面に残す。
   select と決定を1行に置く —— 現場の指は太いので、ボタンは内容ぶんの幅でも
   高さは大きめのまま(`.btn` の padding をそのまま使う) */
.sitepick { display: flex; gap: 8px; align-items: stretch; }
.sitepick .txt { flex: 1 1 auto; margin: 0; min-width: 0; }
.sitepick .btn { flex: 0 0 auto; width: auto; margin: 0; }

/* 荷札のページの見出しカード(2026-08-23 ユーザー整理)。**何を → どこへ・いつ →
   作業**の順に読ませる。器は1枚で、塊は罫と余白で分ける —— カードを3枚積むと
   いちばん使う作業リストが画面の外へ出る */
.labelcard-top { display: flex; align-items: flex-start; gap: 10px; }
.labelcard-top > div { flex: 1 1 auto; min-width: 0; }
.labelcard-top .chip { flex: 0 0 auto; }
/* **太字は塊に1つ**。品名がこの画面の主語 */
.labelcard-name { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
.labelcard .sub { color: var(--muted); font-size: var(--fs-sm); }
/* 温度は淡い地に載せる(このシステムが証明するもの。枠線は足さない) */
.labelcard-temp {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: var(--green-bg); border-radius: 8px; padding: 8px 10px; margin: 8px 0 0;
}
.labelcard-temp b { font-size: var(--fs-lg); color: var(--green-dark); }
/* 計測なしの荷札は**淡い地を外す**(温度の帯は「このシステムが証明するもの」の
   置き場所で、無いものを同じ強さで出すと、探す温度計があるように見える) */
.labelcard-temp.none { background: #f4f7f5; color: var(--muted); }
.labelcard-trip { border-top: 1px solid var(--rule); margin-top: 10px; padding-top: 8px; }
.labelcard-route { font-size: var(--fs-base); margin-bottom: 2px; }
.labelcard-when {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--muted); margin-bottom: 2px;
}
.labelcard-when b { color: var(--ink); font-size: var(--fs-base); }
.labelcard-arrow { color: var(--muted); }

/* 現場ホームの荷札の1行(2026-08-23 ユーザー判断)。**一覧は状態を出して開くだけ** ——
   以前は details で、開くと証跡と大ボタンが出たが、そのボタンは荷札のページへの
   リンクだった(2タップして遷移するだけ)。荷造りも荷受けもこの1つの形にする。
   行全体がタップ領域(48px以上。手袋・車内の揺れを考えて上振れさせる) */
.labelrow {
  display: flex; align-items: center; gap: 8px; min-height: 52px;
  padding: 10px 12px; margin: 0 0 6px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.labelrow:active { background: var(--green-bg); }
.labelrow-body { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.labelrow-body .sub { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
/* 3行目(温度指定・計測方法)は一段小さく —— 主役は番号と品名 */
.labelrow-temp { font-size: var(--fs-xs); }
/* 「›」は行き先の印。**作業を名乗らない** —— 開いた先の作業は荷札の状態が決める */
.labelrow-go { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-lg); }
/* **状態の札は縮んでよい**(2026-08-24)。`flex: 0 0 auto` だと札が幅を譲らず、
   訳が長い言語(Menunggu persiapan = 日本語の2倍)で**荷札の番号が途中で折れる**
   —— 現場が紙と突き合わせる番号なので、そこが折れるのがいちばん困る。
   狭いときは札を次の行へ落とす(番号の幅を守る) */
.labelrow .chip { flex: 0 1 auto; min-width: 0; }
@media (max-width: 460px) {
  .labelrow { flex-wrap: wrap; }
  .labelrow-body { flex: 1 1 100%; }
  .labelrow .chip { order: 3; }
  /* 「›」は行き先の印なので**いちばん右**(順番を指定しないと札より前に来る) */
  .labelrow-go { order: 4; margin-left: auto; }
}

/* 現場ホーム「荷物の準備」の中の**便ごとの塊**(2026-08-22 / 2026-08-23)。

   **便は「行」ではなく「見出し」にする**(ユーザー指摘)。荷札番号は便コードの
   枝番(T-260826-01 → T-260826-01-1)なので、同じ大きさで縦に並べると
   **同じ階層のIDに見える**(便の行だけが特殊な表示に見える)。淡い地の帯にして、
   「ここから下はこの便のもの」を形で示す —— 枠線を足さず余白と地で塊を作る。
   カードの中の塊なので器は二重にしない(帯には枠線を付けない) */
.tripsec + .tripsec { margin-top: 16px; }
.tripsec-head {
  background: var(--green-bg); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.tripsec-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 「便」の札。**番号だけを太字で置かない** —— 荷札番号と見分けが付かない */
.tripsec-label {
  font-size: var(--fs-xs); color: var(--green-dark); background: #fff;
  border-radius: 5px; padding: 2px 6px; font-weight: 700;
}
.tripsec-code { font-weight: 700; color: var(--ink); }
.tripsec-head .kv { padding: 4px 0 0; border: 0; }
.tripsec-head .note { margin-top: 4px; }
/* 荷札の行は帯より一段内側に置く(親子が形で読める) */
.tripsec .labelrow { margin-left: 8px; }

/* 「困ったとき」の中の節(QRが読めない / 温度計が余った)。カードの中の塊なので
   .optrow のような枠は付けず、見出しの太さと罫だけで分ける */
.helpsec + .helpsec { border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 12px; }
.helpsec form { margin: 0; }

/* 任意の作業。順番待ちではなく**いつでもできる**ので操作を出す。
   .focusrow(次の1件)と同じ重みにしないために枠線は細く、見出しも小さくする */
.optrow {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  background: #fff; margin: 0 0 8px;
}
.optrow-head, .helpsec-head {
  font-size: var(--fs-md); font-weight: 700; color: var(--muted); margin-bottom: 6px;
}

/* **注記とボタンの間を空ける**(2026-08-26 初見レビュー)。訳が長い言語では
   注記の最終行が**ボタンの枠に触れて**いた —— 日本語では短いので露呈しなかっただけで、
   原因は両方に共通(注記に下の余白が無い) */
.helpsec .note + .btn, .helpsec .note + form { margin-top: 10px; }

/* まだ順番が来ていない作業。存在は見せるが操作させない(全体量が見えないと
   あと何分かかるか読めない。だから隠さない) */
.waitrow {
  min-height: 48px; display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; margin: 0 0 6px; font-size: var(--fs-md); color: var(--muted);
  border: 1px dashed var(--border); border-radius: 10px; background: #fafcfb;
}
/* 他人の操作待ち。自分の未着手とは意味が違うので見た目を分ける */
.waitrow-other {
  flex-direction: column; align-items: flex-start; gap: 2px;
  border-style: solid; border-color: #e0c9a0; background: #fffdf8; color: var(--warn);
}
.waitrow-note { font-size: var(--fs-xs); color: var(--muted); }

/* チェックボックス行(給油しなかった等)。ラベル全体をタップ領域にする */
.note.check {
  display: flex; align-items: center; gap: 8px; min-height: 48px;
  font-size: var(--fs-md); color: var(--ink); cursor: pointer;
}
.note.check input { width: 22px; height: 22px; }

/* 取り消し系の確認。**消える物を読ませてから押させる** ——
   一段目で意図を示し、二段目で実行する(モーダルは使わない方針) */
.confirm { margin: -4px 0 12px; }
.confirm > summary {
  list-style: none; cursor: pointer; display: block; text-align: center;
  font-size: var(--fs-md); color: var(--muted); padding: 14px; min-height: 48px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.confirm > summary::-webkit-details-marker { display: none; }
.confirm[open] > summary { border-color: var(--warn); color: var(--warn); }
.confirm-panel {
  border: 1px solid #e8d5b0; border-top: 0; border-radius: 0 0 10px 10px;
  background: var(--warn-bg); padding: 12px;
}
.confirm-panel .btn-undo { display: block; width: 100%; margin-top: 10px; padding: 12px; }

/* 証跡写真の一覧。原本へのリンク(加工しない方針なのでサムネイルは表示用) */
.photostrip { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.photostrip a {
  display: block; width: 108px; text-decoration: none; color: var(--muted);
  font-size: var(--fs-xs); line-height: 1.4;
}
.photostrip img {
  width: 108px; height: 81px; object-fit: cover;
  border: 1px solid var(--border); border-radius: 8px; display: block; margin-bottom: 3px;
}
.photostrip a:hover img { border-color: var(--green); }
.photostrip b { color: var(--ink); }


.card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
/* **カードの見出しは本文より大きく**(2026-08-24)。--fs-md(13px)は本文の
   --fs-base(14px)より小さく、塊の名前が中身に負けていた —— 同梱した
   Noto Sans JP は以前のヒラギノより字面が小さいので、差がさらに開いた */
.card h3 { font-size: var(--fs-lg); color: var(--green-dark); margin-bottom: 8px; }
/* 管理画面のカードだけ少し広く取る(2026-08-19)。現場の390pxでは14pxの余白が
   本文の幅を稼ぐために効いているが、PC幅では中身が枠に近すぎて窮屈に見える */
.app.wide .card { padding: 16px 18px; }
.app.wide .card h3 { margin-bottom: 10px; }
/* 見出しの右にカード固有の小さな口(CSV取得など)。ボタンにしない ——
   主役は本文で、ここは「探した人が押す」場所(ユーザー判断 2026-08-15) */
.cardhead-link { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); text-decoration: none;
  border-bottom: 1px dotted var(--border); white-space: nowrap; }
.cardhead-link:hover { color: var(--green-dark); border-bottom-color: var(--green); }

.btn {
  display: block; width: 100%; text-align: center; padding: 14px; border: 0; border-radius: 10px;
  background: var(--green); color: #fff; font-size: var(--fs-lg); font-weight: 700;
  cursor: pointer; text-decoration: none; font-family: inherit;
}
.btn.sub { background: #fff; color: var(--green-dark); border: 1.5px solid var(--green); }
.btn.warn { background: var(--warn); }
.btn + .btn { margin-top: 8px; }
/* 実行できない操作。**送信ボタン(カメラを開かないもの)にだけ使う** ——
   押せない理由は必ず近くに書くこと(無効化そのものではなく、なぜかが分からないのが害) */
/* まだ押せないボタン。**0.45は屋外で読めない**(2026-08-23 初見レビュー)——
   押せないこと自体は形で分かればよく、文字は読める必要がある
   (ボタンの文が「あと N 件」と理由を言うようになったので、なおさら読ませる) */
.btn[disabled], .btn.locked { opacity: .6; pointer-events: none; }
/* 順番がまだ来ていない撮影ボタン。**薄くするが押せる** ——
   薄いだけだと「押せない」とは読めず別種のボタンに見えるので、押させて理由を出す。
   一方で全部を同じ濃さにすると、次にやるのがどれか分からなくなる(その折衷) */
.btn.pending { opacity: .55; }

.chip {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  padding: 2px 10px; border-radius: 10px; white-space: nowrap;
}
.chip.green { background: var(--green-bg); color: var(--green-dark); border: 1px solid var(--border); }
.chip.blue { background: var(--blue-bg); color: var(--blue); border: 1px solid #c3d6ec; }
.chip.orange { background: var(--warn-bg); color: var(--warn); border: 1px solid #e8d5b0; }
/* **止まっている状態**(無効・使用終了)。警告色にしない —— 無効化は正常な運用で、
   オレンジにすると「直すべき異常」に見える(2026-08-19) */
.chip.grey { background: #eef2f0; color: var(--muted); border: 1px solid var(--border); }
/* **例外だけをチップにする列**で、素の文字と箱の形を揃える(2026-08-24)。
   .chip は padding と枠を持つので、素の文字と縦に並べると**文字の左端が11pxずれる** ——
   同じ箱を与えて装飾だけ外す。見た目は素の文字のまま、行の頭が揃う */
.chip.flat { background: none; border: 1px solid transparent; color: var(--muted); font-weight: 400; }
/* **中止した便の段階に線を引く**(2026-08-24 ユーザー判断)。灰色だけでは
   初見で「止まっている」と読めなかった。線を引くのは**中止だけ** ——
   アーカイブ済みは正常に完了した便で、「完了」に線を引くと
   「起きなかったこと」の意味になる */
/* **日本語では取り消し線を細く・薄くする**(2026-08-26 初見レビュー)。
   「準備中」のような漢字に太い線が乗ると横画と重なり、**印刷の滲みや描画バグ**に
   見える(ラテン文字では線として読める)。意味は「起きなかったこと」なので線は残す */
.chip.struck {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  text-decoration-skip-ink: none;
  opacity: .95;
}

.kv { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-md); padding: 5px 0; border-bottom: 1px solid var(--rule); }
.kv:last-child { border-bottom: 0; }
/* 位置情報の1便ぶん(行 + その補足)。**罫は補足の後ろに引く**(2026-08-26)——
   `.kv` に引くと、補足が罫の向こう側に落ちて次の便のものに見える */
.ptrow { border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.ptrow:last-child { border-bottom: 0; }
.ptrow > .kv { border-bottom: 0; }
/* flex-shrink:0 は短いラベル(計画・重量)が折れないようにするためだが、
   説明文を抱えた見出し(輸送依頼書・荷札)では**ビューポートを突き抜ける**
   —— 表ではなくページ全体が横スクロールする。max-width で上限だけ止める
   (短いラベルは元々小さいので影響を受けない。ユーザー指摘 2026-08-14) */
.kv .k { color: var(--muted); flex-shrink: 0; max-width: 100%; }
/* 行の中の便コードは、文字の高さ(13px)しか的が無かった(2026-08-26) */
.kv > span > a:first-child { display: inline-flex; align-items: center; min-height: 24px; }

/* 完了証跡の行(サムネイル+読み取り値+時刻) */
.evidence { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-md); }
.evidence:last-child { border-bottom: 0; }
.evidence .thumb {
  width: 38px; height: 38px; border-radius: 6px; background: #e3ece6; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.evidence .thumb img { width: 100%; height: 100%; object-fit: cover; }

details.sec { background: #fff; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
details.sec > summary {
  list-style: none; cursor: pointer; padding: 13px 14px; display: flex; justify-content: space-between;
  align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-base); color: var(--green-dark);
}
details.sec > summary::-webkit-details-marker { display: none; }
details.sec[open] > summary { border-bottom: 1px solid var(--rule); }
details.sec .sec-body { padding: 6px 14px 14px; }
/* 作業は1件ずつ別の <form> なので `.btn + .btn` の余白が効かず、
   大ボタンが上下でくっついて1つの塊に見える。フォーム側で間隔を作る */
details.sec .sec-body > form { margin: 0 0 8px; }

input.txt, select.txt {
  width: 100%; padding: 12px; font-size: var(--fs-lg); /* iOSの自動ズーム回避のため16px */
  border: 1.5px solid var(--border); border-radius: 8px; margin: 6px 0;
  font-family: inherit; background: #fff; color: var(--ink);
}

/* 撮影スロット: ラベル全体がカメラ起動のタップ領域 */

.note { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; line-height: 1.5; }
/* 入力欄のラベルは**行を占める**(`.txt` は inline-block なので、指定が無いと
   短いラベルが入力欄と同じ行に並びうる)。押せる範囲もラベルまで広がる */
label.note { display: block; }
.guide { background: var(--blue-bg); border-radius: 8px; padding: 10px; font-size: var(--fs-sm); color: #1d3d5c; margin: 8px 0; line-height: 1.6; }
/* **`.note` との勝敗を詳しさで固定する**(2026-08-26)。以前は111行離れた
   並び順だけで決まっていて、片方を動かすと色が静かに入れ替わった */
.note.ok-line, .ok-line { color: var(--green-dark); font-weight: 700; font-size: var(--fs-base); }
/* 地図の器。タイルが出なくても場所を取るだけで済むよう、背景と枠だけ先に置く
   (真っ白だと「壊れた」ように見える) */
.mapbox {
  /* `.map-hint` を上に載せるための基準(2026-08-26 に離れた場所から畳んだ) */
  position: relative;
  border: 1px solid var(--border); border-radius: 10px; margin: 8px 0;
  background: #eef2ef; overflow: hidden;
}
/* 高さは3段(用途で決める。_map.html の box マクロを参照) */
/* **座標を選ぶ地図(lg)だけ、窓の高さに合わせて伸ばす**(2026-08-24 ユーザー要望)。
   使っているのは発着地の登録だけで、そこは**地図の中で場所を探す**画面 ——
   400pxだと何度もドラッグすることになる。

   **上限は「座標の欄が見えている範囲」で決める。**固定で1.5倍(600px)にすると、
   MacBook 相当(900px)で緯度・経度の欄が画面の外へ出る —— **座標を手で入れて
   ピンを確かめる**のは、候補に無い場所を登録する唯一の道なので、そこを潰しては
   本末転倒(実機の試験で詰まったのもこの経路)。
   実測で、地図の上に263px・下に127pxが要る(=390px)。窓からそれを引いた残りを
   地図に渡し、**旧400pxを下限・600pxを上限**にする:
     窓1080px → 600(上限)/ 900px → 490 / 750px → 400(下限。以前と同じ)
   下限を割らせないのは、縦の狭い画面では**どのみち欄が画面の外**で、
   そこで地図まで小さくすると何も良くならないため */
/* md は「証跡を読む」段。便詳細で軌跡と発着地を同時に追うには 320px が窮屈だったので
   1.1倍にした(2026-08-24 ユーザー要望)。lg・sm は用途が違うので据え置き */
.map-lg { height: clamp(400px, calc(100vh - 410px), 600px); }
.map-md { height: 352px; }
/* sm は現場のスマホ。運転手が「いまどこにいると思われているか」を読むには
   260px では狭かった(2026-08-24 ユーザー要望) */
.map-sm { height: 300px; }
/* 地図の上の行き先ボタン(運転手のページ。drivermap.js が Leaflet の
   コントロールとして載せる)。**48px以上**——手袋・車内の揺れを考える */
.map-btns { display: flex; gap: 6px; }
.map-near { display: flex; align-items: center; gap: 6px; min-height: 48px;
  padding: 0 14px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--green-dark); font: 700 var(--fs-md)/1.2 inherit;
  box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; }
/* ---- 便詳細の荷物カード: 狭い画面 --------------------------------------------
   **管理画面はPC前提だが、読めなくなってはいけない**(2026-08-26 初見レビュー)。
   390px では ①品名の行が「2個口・外気+庫 / 内上下」と語の途中で折れ
   ②温度指定が「-10℃ / 以下」と割れ ③荷札の行のチップが枠を右へ**16pxはみ出して**いた */
@media (max-width: 640px) {
  /* 品名+属性 と 温度指定を横に並べない(左が長く、右が縦に潰れる) */
  .cargoline > .kv { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cargoline > .kv > span:last-child { text-align: left; }
  /* 荷札の行: 字下げをやめ、番号の列に伸び縮みを許す(残りは中身ぶん) */
  .labelgrid {
    margin-left: 0;
    gap: 4px 8px;
    grid-template-columns: max-content max-content max-content minmax(0, 1fr);
  }
  /* **番号は折らない**(「T-260904- / 01-1」と割れていた)。1段小さくして1行に収める */
  .lg-code { font-size: var(--fs-sm); white-space: nowrap; }
  .lg-state { gap: 4px; }
}

@media (max-width: 640px) {
  /* スマホでは地図が画面を占領しないよう一段低く(**ここは伸ばさない** ——
     縦に長い画面なので 62vh だと1画面が地図で埋まる) */
  .map-lg { height: 300px; }
  .map-md { height: 286px; }
  .map-sm { height: 260px; }
}
.mapbox .leaflet-container { font: inherit; }

/* 地図の凡例。線・点・破線・円は形が違うと読み間違えるので、地図と同じ形で出す */
.map-key {
  display: inline-block; width: 16px; height: 4px; border-radius: 2px;
  vertical-align: middle; margin: 0 5px 0 12px;
}
.map-key:first-child { margin-left: 0; }
.map-key.dot { width: 10px; height: 10px; border-radius: 50%; }
.map-key.dashed { background: repeating-linear-gradient(90deg, #9aa0a6 0 5px, transparent 5px 9px); }
.map-key.ring {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--green); background: rgba(47,107,79,.12);
}

/* 軌跡の内訳(停車・位置が取れていない区間)。既定は畳んでおく ——
   よく見るのは距離と乖離で、内訳は原因を追うときだけ要る */
details.diag { margin: 4px 0 10px; }
details.diag > summary {
  cursor: pointer; font-size: var(--fs-md); color: var(--green-dark); font-weight: 700;
  padding: 8px 0;
}
.diag-body { padding: 4px 0 0; }
.diag-row {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 6px; font: inherit; color: var(--ink); cursor: pointer;
}
.diag-row:hover { border-color: var(--green); }
.diag-row .map-key { margin: 6px 0 0; flex: 0 0 auto; }
.diag-main { font-size: var(--fs-md); line-height: 1.5; }
.diag-main .sub { display: block; color: var(--muted); font-size: var(--fs-sm); }


/* 検索を地図の上に載せる。外に置くと何を検索するのか読めず、行も余分に取る。
   左を空けるのはLeafletのズームボタン(左上)を隠さないため */
/* 追加フォーム。編集と同じくインラインで開く(ポップアップにすると、地図の入った
   背の高いフォームが画面からはみ出す) */
.addform > summary { list-style: none; cursor: pointer; display: inline-block; }
.addform > summary::-webkit-details-marker { display: none; }
.addform-panel {
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  padding: 14px; margin-top: 8px;
}

.mapwrap { position: relative; }
.map-search { position: absolute; top: 14px; left: 56px; right: 14px; z-index: 1000; }
.map-search-row { display: flex; gap: 6px; }
.map-search-row .txt { margin: 0; flex: 1; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.map-search-row .btn { width: auto; flex: 0 0 auto; padding: 12px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.map-search .geocode-results { margin-top: 6px; max-height: 190px; overflow-y: auto; }

/* 地名検索の結果。候補は「押せるもの」と分かる形にする(行全体がボタン) */
.geocode-results { margin: 6px 0; font-size: var(--fs-md); color: var(--muted); }
.geocode-hit {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  padding: 10px 12px; margin-bottom: 6px; font: inherit; color: var(--ink);
  min-height: 44px; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.geocode-hit:hover { border-color: var(--green); }

/* **`.note` との勝敗を詳しさで固定する**(2026-08-26)。以前は111行離れた
   並び順だけで決まっていて、片方を動かすと色が静かに入れ替わった */
.note.warn-line, .warn-line { color: var(--warn); font-weight: 700; font-size: var(--fs-md); }
/* 入力漏れをその場で知らせる行。**カメラを開く前**に出す —— 撮ってからエラーにすると
   給油所で撮り直しになる。ボタンを薄くして塞ぐ方式は採らない(押せないと読めず、
   別種のボタンに見える)。入力されたら消える */
.inline-err { margin: -2px 0 8px; }

.flash {
  border-radius: 8px; padding: 11px 12px; font-size: var(--fs-md); margin-bottom: 12px; line-height: 1.6;
  display: flex; align-items: flex-start; gap: 10px;
  transition: opacity .4s ease, transform .4s ease;
}
/* 3種の通知は**左の帯の色**で見分ける(2026-08-19)。以前は成功が地の色と同じ淡い緑で
   箱に見えず、失敗と警告は同じ茶色で区別が付かなかった —— 失敗は「操作が通らなかった」、
   警告は「通ったが確認して」で、次にすることが違う */
.flash.ok { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--green);
  color: var(--green-dark); }
.flash.err { background: var(--danger-bg); border: 1px solid #f0d6d2;
  border-left: 4px solid var(--danger); color: var(--danger); }
/* 取込の検証警告。作業自体は成功しているのでエラーより弱く、しかし見落とせない強さ */
.flash.warn {
  background: #fff8e8; border: 1px solid #e8d5b0; border-left: 4px solid #d99b22;
  color: #7a5410; font-weight: 600;
}
/* 成功通知は数秒で引っ込める(出っ放しにしない)。JS無効なら表示されたまま=害はない */
.flash.is-hiding { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.flash-close {
  margin-left: auto; border: 0; background: transparent; color: inherit;
  font-size: var(--fs-xl); line-height: 1; cursor: pointer; padding: 0 4px;
  font-family: inherit; flex-shrink: 0;
}

.htmx-request .btn { opacity: .6; pointer-events: none; }

/* 走行中の便の位置と鮮度。狭い画面では2行に折り返す(横スクロールにしない) */
.livestate { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 4px; }
.livestate .ok-line, .livestate .warn-line { font-size: var(--fs-md); }

/* 設定QR。白地に余白を付けないと読み取りに失敗する(クワイエットゾーン) */

/* 説明のヘルプアイコン。**本文に書くと毎回読み飛ばす文章が増える**ので、
   押したときだけ出す(detailsのみ・JSは開閉補助だけ)。
   パネルは左端を基準に開くので、アイコンは**ラベル側(左)**に置くこと */
.help { display: inline-block; position: relative; vertical-align: middle; margin-left: 6px; }
.help > summary {
  list-style: none; cursor: pointer; display: inline-block;
  width: 17px; height: 17px; border-radius: 50%; text-align: center;
  /* **丸は17pxのまま、当たり判定だけ広げる**(2026-08-26)。文の中に置く小さな印なので
     見た目は大きくしたくないが、17×17 では押しづらい —— 透明の板を敷いて 25px にする */
  position: relative;
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  font-size: var(--fs-xs); line-height: 15px; font-weight: 700;
}
.help > summary::after { content: ""; position: absolute; inset: -4px; }
.help > summary::-webkit-details-marker { display: none; }
.help > summary:hover { border-color: var(--green); color: var(--green-dark); }
.help[open] > summary { border-color: var(--green); color: var(--green-dark); background: var(--green-bg); }
.help-panel {
  position: absolute; z-index: 1000; left: 0; top: calc(100% + 6px);
  width: min(380px, 78vw); background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  font-size: var(--fs-sm); line-height: 1.75; color: var(--ink); font-weight: 400;
  white-space: normal; text-align: left;
}
/* 右寄りの列見出しに置くとき(h.tip の align="right")。左端基準のままだと
   パネルが画面の外へ出る —— 荷物の重量の列で実際に出た */
.help-right .help-panel { left: auto; right: 0; }
/* 狭い画面では、アイコンの位置に開くと画面の外へ出る —— ラベル側(左)に置く原則を
   守っても、表の中や行の途中では**左端がすでに右寄り**だから。align も効かない
   (横スクロールする表の中では「右端」が画面の右端ではない)。
   位置合わせを諦めて**画面下の帯**に逃がす。外側タップ・Escで閉じる仕組み
   (base.html)はそのまま効く。ユーザー指摘 2026-08-14 */
@media (max-width: 760px) {
  .help-panel, .help-right .help-panel {
    position: fixed; left: 10px; right: 10px; top: auto; bottom: 10px;
    width: auto; max-height: 60vh; overflow: auto;
  }
}
.help-panel code { font-size: var(--fs-sm); }

/* ---- 温度グラフ(サーバ側SVG。幾何は app/closing/chart.py) ----
   帯=温度指定。線が帯から出ていれば逸脱、が一目で読めることが目的。
   preserveAspectRatio="none" で横に伸ばすので、線幅は vector-effect で固定する */
/* `.tchart-cursor` を載せるので基準になる(2026-08-26 に離れた場所から畳んだ) */
.tchart { position: relative; margin: 8px 0 10px 12px; }
/* **高さは幅から決める**(等倍で拡大する)。固定の高さ+preserveAspectRatio=none
   だと縦横が別々に伸縮して文字が潰れる(2026-08-19) */
.tchart svg { width: 100%; height: auto; display: block; }
.tchart-band { fill: rgba(45, 106, 79, .10); }
.tchart-grid { stroke: #e6ece9; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tchart-mark { stroke: #c9d6cf; stroke-width: 1; stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke; }
.tchart-line { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; }
.tchart-line.top { stroke: #1a73e8; }
.tchart-line.bottom { stroke: #e8710a; }
/* 外気は環境の記録(判定の対象ではない)。箱内の線と役割が違うので灰色にする */
.tchart-line.ambient { stroke: #6b7c74; }
/* 目盛りの文字。viewBox が実寸に近いので、ここの px がほぼそのまま画面の px
   (Carbon の label-01 = 12px に合わせる) */
.tchart-ylabel, .tchart-xlabel { font-size: var(--fs-xs); fill: var(--muted); }
.tchart-legend { margin: 2px 0 0 38px; display: flex; flex-wrap: wrap; gap: 4px 14px;
  align-items: center; }
.tchart-key { display: inline-block; width: 12px; height: 3px; border-radius: 2px;
  margin-right: 4px; }
.tchart-key.top { background: #1a73e8; }
.tchart-key.bottom { background: #e8710a; }
.tchart-key.band { height: 10px; background: rgba(45, 106, 79, .18); }
.tchart-key.mark { height: 10px; width: 0; border-left: 1px dashed #9bb3a7; }

/* 温度の升目(small multiples)。まず「帯からはみ出していないか」を見渡し、
   気になる箱を開くと大きいグラフと数字が出る。開いた升目は行いっぱいに広がる
   (grid-column: 1/-1)—— モーダルを使わずに詳細へ潜れる */
/* 温度の升目は**荷物の明細の枠の中**(2026-08-15)。荷札の表の下に続くので、
   点線で仕切って「同じ明細の別の面」だと分かるようにする(枠は増やさない) */
.tilegrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.tile {
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  padding: 6px 8px 4px;
}
/* 逸脱の升目。**背景は塗らない**(カードの薄緑の上でピンクが浮く ——
   ユーザー指摘 2026-08-14)。左の縁だけ警告色にして、見渡したときに拾える程度にする */
.tile.warn { border-left: 3px solid var(--warn); }
.tile[open] { grid-column: 1 / -1; border-color: var(--green); }
/* 開いても**逸脱の印は消さない**。border-color(4辺)が warn の左辺を上書きして
   緑に変わり、畳んだときと印が食い違っていた(ユーザー指摘 2026-08-14)。
   緑=開いている / オレンジの左辺=逸脱、と役割を分ける */
.tile.warn[open] { border-left-color: var(--warn); }
.tile > summary { list-style: none; cursor: pointer; }
.tile > summary::-webkit-details-marker { display: none; }
/* 荷札番号は**折らない**(`T-260811-01-3` が3行に割れると番号として読めない)。
   入りきらないときに行を落とすのはチップの側 —— 番号が主で、判定は添え物 */
.tile-head { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 2px 6px; font-size: var(--fs-sm); }
.tile-head > b { white-space: nowrap; }
.tile-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* 開いたときだけ出す「閉じる」。畳んでいるときは升目に何も足さない */
/* 升目の値(最低〜最高)。**見出しの主役は荷札番号**なので、値は一段静かに ——
   太字を2つ置くと、並べて見渡すときにどちらを追えばよいか決まらない */
/* 片付けた便の段階。**消さずに静かにする** —— アーカイブ・中止は段階を
   打ち消さない(§8-14「段階ではなくフラグ」)が、いま追うべき情報でもない */
.tile-span { font-size: var(--fs-sm); color: var(--muted); margin-left: 6px; white-space: nowrap; }
.tile-close { display: none; color: var(--muted); font-size: var(--fs-sm); }
/* 開いたら見出しの判定は消す(すぐ下の行に同じことが出る) */
.tile[open] .tile-status { display: none; }
.tile[open] .tile-close { display: inline-block; }
.tile[open] > summary {
  background: var(--green-bg); border-radius: 8px;
  margin: -2px -4px 6px; padding: 4px 6px;
}
.tile[open] > summary:hover .tile-close { color: var(--green-dark); }
.tile-body { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 6px; }
.tile-body .note { margin: 2px 0; }
/* 拡大時に箱のグラフの下へ並べる外気の帯。**時間軸が揃う**ように幾何は同じまま、
   高さだけ低くする(重ねない理由は admin_trip_detail.html のコメント) */
.tchart-subhead { margin: 8px 0 0 12px; }
.tchart-strip .tchart { margin-top: 0; }
/* 外気の帯の高さは chart.py(STRIP_HEIGHT)が決める。CSSで潰さない */
/* 縦線の名前(出発・到着・区間N)。線のすぐ右に小さく置く */
.tchart-marklabel { font-size: var(--fs-xs); fill: var(--muted); }
/* ホバーの読み取り(static/tempchart.js)。線は非拡大ストロークで1pxを保つ */
.tchart-cursor { stroke: #9bb3a7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tchart-dot { fill: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.tchart-dot.top { stroke: #1a73e8; }
.tchart-dot.bottom { stroke: #e8710a; }
.tchart-dot.ambient { stroke: #6b7c74; }
.tchart-readout {
  position: absolute; top: 4px; display: none; pointer-events: none;
  background: rgba(255, 255, 255, .96); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 9px; font-size: var(--fs-sm); line-height: 1.6; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(28, 43, 36, .10); font-variant-numeric: tabular-nums;
}
.tchart-readout.is-on { display: block; }
.tchart-readout b { display: block; font-weight: 600; }
.tchart-readout span { display: block; color: var(--muted); }
.tchart-readout .tchart-key { margin-right: 5px; }
.tchart.mini { margin: 2px 0 0; }

/* 開いたら升目の小さいグラフは隠す(すぐ下に大きいグラフが出るので二重になる) */
.tile[open] .tchart.mini { display: none; }
.tile[open] .tile-body { border-top: 0; margin-top: 2px; padding-top: 0; }

/* ---- 便のTOPカード(2026-08-18 ユーザー設計 / 2026-08-19 に整えた) --------
   **発着は2つの塊にして中央に並べる**(駅の表示板)。左右の端に寄せると視線が
   散る、という判断はそのまま。2026-08-19 に見た目を作り直した:

   - **太字は塊に1つ**(地点名だけ)。実績時刻は太字をやめ、色と大きさで一段上げる
     —— 太字が2つあると主役が決まらない(Refactoring UI「弱めることで強める」)
   - **枠線をやめて、余白と淡い地で塊を作る**。1px の枠で囲むと箱が立って古く見える
   - **中の文字は左揃え**。中央揃えが効くのは短い文だけで、長い地点名を中央に
     置くと折り返しの両端がギザギザになる(塊そのものは中央に置いたまま)
   - 真ん中は**経路の話だけ**(段階・線・積替え)。TZは見出しへ移した */
.tripboard {
  display: flex; justify-content: center; align-items: stretch;
  gap: 0; padding: 12px 0 4px; flex-wrap: wrap;
}
.tripend {
  /* 2つの塊は**同じ幅**(片方だけ地点名が長くても左右が釣り合う) */
  flex: 1 1 0; max-width: 355px; min-width: 210px;
  background: #f7faf8; border-radius: 12px; padding: 12px 16px 13px;
}
.tripend-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.tripend-name { font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; }
/* カッコの中(所在地・注記)は補足。主名と同じ太さで続けると板が字で埋まる */
.tripend-sub { display: block; width: 100%; font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
/* 予定と実績は**ラベル列 + 値列**の2行グリッド。等幅数字で桁を縦に揃える
   —— 板の要点は「予定に対してどうだったか」なので、2つの時刻が並ぶ形にする */
.tripend-times {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 10px; align-items: baseline; margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.tt-k { font-size: var(--fs-xs); color: var(--muted); }
.tt-plan { font-size: var(--fs-sm); color: var(--muted); }
/* 実績は**太字にしない**。色(ink)と大きさだけで一段上げる */
.tt-actual { font-size: var(--fs-lg); color: var(--ink); }
/* まだ記録が無い側も行を残す(埋まっていく様子がそのまま進行になる) */
.tt-none { font-size: var(--fs-lg); color: #b6c4bd; }
/* 連結線。段階のチップを線の上に載せ、積替えは線のラベルにする */
/* **幅は中身で決める**(2026-08-24)。178px 固定だと、段階の語が長い言語で
   チップが幅を食い、線が左右に短い棒2本として残っていた(インドネシア語の
   「Menunggu keberangkatan」)—— 発と着をつなぐ線に見えなくなる。
   min-width で日本語のときの見た目は据え置き、長いときだけ横に伸ばす */
.tripline {
  flex: 0 1 auto; min-width: 178px; align-self: center;
  display: flex; flex-direction: column;
  align-items: center; gap: 5px; padding: 0 8px; text-align: center;
}
/* **段階のチップは線の上に載せる**(通過点の印)。チップを線の上に浮かせると
   線とチップが別々のものに見え、真ん中が2段の飾りになる */
/* **`width: 100%` を書かない**(2026-08-24)。書くと中身の幅が親に伝わらず、
   チップが伸びても `.tripline` が広がらない —— 線だけが削られる */
.tripline-track { display: flex; align-items: center; align-self: stretch; gap: 6px; }
/* 線は**最低でもこの長さ**を持つ。効かせるのは `min-width` —— 中身が空なので、
   `flex-basis` を与えても max-content の見積もりには効かず(基準ではなく
   min-width が使われる)、親の `.tripline` が広がってくれない */
.tripline-track .rail { flex: 1 1 auto; min-width: 32px; height: 1px;
  background: var(--border); position: relative; }
.tripline-track .rail-end::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border: 3.5px solid transparent; border-left: 6px solid var(--border); border-right: 0;
}
/* チップが無いとき(中止・アーカイブ)は線1本。矢じりは末尾に付ける */
.tripline-track .rail:only-child::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border: 3.5px solid transparent; border-left: 6px solid var(--border); border-right: 0;
}
.tripline-via { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
/* 概要の属性は**ラベルが上・値が下**の列(横に見渡す)。ラベル左・値右の `.kv` は
   縦に読む一覧の形で、中央に置いた発着の塊の下では対応が取りにくい */
.tripattrs {
  /* **発着の塊と同じく中央にまとめる**(2026-08-18 ユーザー判断)。左端に寄せると、
     中央に置いた塊とカードの左端に視線が分かれて散らかって見える */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 48px;
  border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 12px;
}
.tripattrs .attr { text-align: center; }
/* カード下部の注記・警告。**塊は中央・文は左揃え** —— 上が中央なので左端に
   寄せると浮くが、折り返す文を中央揃えにすると両端がギザギザで読みにくい */
.tripnotes { width: fit-content; max-width: 100%; margin: 12px auto 0; }
.tripnotes > .note { margin: 0 0 4px; }
.tripnotes > .note:last-child { margin-bottom: 0; }
.tripnotes > details { margin-top: 6px; }
.attr-k { color: var(--muted); font-size: var(--fs-xs); }
.attr-v { font-size: var(--fs-base); margin-top: 3px; }
.attr-v .note { margin: 1px 0 0; }
/* 番号はクリックでコピーできる。見た目は文字のまま(ボタンの箱にしない) */
.triphead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tripcode {
  background: none; border: 0; padding: 3px 0; min-height: 24px; font: inherit; color: inherit; cursor: pointer;
  font-size: var(--fs-base); letter-spacing: .02em;
}
.tripcode-icon { font-size: var(--fs-sm); opacity: .4; margin-left: 6px; }
.tripcode:hover .tripcode-icon { opacity: 1; }
.triphead .copied { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
/* 一時パスワードも押してコピーできる。**値そのものは大きいまま** ——
   読み上げて伝える場面があるので、印(⧉)だけを添える */
.pwcopy { font-size: 19px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.kv .copied { font-size: var(--fs-xs); color: var(--muted); margin-left: 8px; }
/* TZは板の外に1回だけ(見出しの右端)。「すべて」と書いて板全体に掛ける */
.triphead-tz { margin-left: auto; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
/* 狭い画面では縦に積む(発地の塊 → 線 → 着地の塊)。管理画面はPC前提だが、
   スマホで開いたときに2つの塊が潰れて地点名が1文字ずつ折れるのを避ける */
@media (max-width: 640px) {
  .tripboard { flex-direction: column; align-items: stretch; }
  .tripline { flex: 0 0 auto; padding: 8px 0; }
  .tripline-track { flex-direction: column; width: auto; }
  /* **`min-width` を戻す**(2026-08-26)。基底の `min-width: 32px`(横の線の長さ)が
     残っていて、縦にしたはずの線が**32×16pxの灰色の四角**として2つ浮いていた ——
     `width` より `min-width` が勝つ */
  .tripline-track .rail { width: 1px; min-width: 0; height: 16px; flex: 0 0 16px; }
  .tripline-track .rail-end::after, .tripline-track .rail:only-child::after {
    right: -3px; top: auto; bottom: -1px;
    border: 3.5px solid transparent; border-top: 6px solid var(--border); border-bottom: 0;
  }
}
/* 折り畳めるカード(便詳細)。**見出しを押す場所に見せる** ——
   右端に山形(chevron)、ホバーで淡く色が付き、開いているときだけ見出しの下に
   罫線が入る(閉じたカードは1本のバーとして読める。2026-08-19 ユーザー要望) */
.foldcard { padding: 0; }
.foldhead {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 18px; border-radius: 9px;
}
.foldhead::-webkit-details-marker { display: none; }
.foldhead:hover { background: #f7faf8; }
.foldcard[open] > .foldhead {
  border-bottom: 1px solid var(--rule); border-radius: 9px 9px 0 0;
}
.foldhead-title { font-size: var(--fs-md); font-weight: 700; color: var(--green-dark); }
/* 要約は**畳んだときだけ**。開いていれば中身が見えているので、同じことを二度言わない */
.foldhead-sub { font-size: var(--fs-sm); color: var(--muted); }
.foldcard[open] .foldhead-sub { display: none; }
/* 警告の件数は**開閉に関わらず**出す(畳んだ中に警告を隠さない) */
.foldhead-warn { align-self: center; }
.foldhead .cardhead-link { margin-left: auto; }
/* **押せると気づける大きさにする**(2026-08-23 初見レビュー)。8pxの薄い線では
   「畳むボタンだと気づくまで時間がかかった」。矢印そのものは小さいままでよいが、
   **当たり判定を丸で囲って**、見出しにホバーすると色が付くようにする */
.foldhead-chev {
  margin-left: auto; align-self: center; position: relative;
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .12s ease, border-color .12s ease;
}
.foldhead-chev::after {  /* 見えない当たり判定(28px。マウスでも指でも狙える) */
  content: ""; position: absolute; inset: -9px;
}
.foldhead:hover .foldhead-chev { border-color: var(--green); }
.foldhead .cardhead-link + .foldhead-chev { margin-left: 10px; }
.foldcard[open] .foldhead-chev { transform: rotate(45deg); }
.foldbody { padding: 14px 18px 16px; }
/* 中身の先頭の見出し(h3)は畳む見出しと二重になるので詰める */
.foldbody > :first-child { margin-top: 0; }

/* ページ末尾の操作の行(アーカイブ)。**カードにしない** —— 中身がボタン1つの
   カードは、隣の伝票・経路・荷物と同じ重みに見える。注記は左・操作は右で、
   ボタンは内容ぶんの幅の副ボタン(2026-08-19 ユーザー指摘) */
/* 足元の操作は**右に一列**(2026-08-24)。説明の行を足して2行になったのを畳んだ ——
   注記は左、操作は右、という .pagefoot の形はそのまま。
   `?` はボタンの**左**に置く(パネルは左端基準で開くので、右端だと画面外へ出る) */
.pagefoot-acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pagefoot-export { display: inline-flex; align-items: center; gap: 6px; }
.pagefoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 20px; flex-wrap: wrap; margin: 2px 4px 18px;
}
.pagefoot-note { flex: 1 1 420px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }
.pagefoot form { flex: 0 0 auto; }

/* 区間の欠けは**行の中に全幅で**出す(2026-08-18)。列の1つに押し込むと
   幅が足りず、畳んだ中(legbody)に入れると開いた人にしか見えない */
.leg-warn { grid-column: 1 / -1; margin: 2px 0 0; }
/* 明細行の欠けは行の枠の中(荷札の表の前)。枠が主語を持つので文は短くできる */
.cargoline > .warn-line { margin: 2px 0 4px; }

/* ---- 手順のヘルプ(温度計の準備。templates/help_logger.html) ----------------
   **注釈は画像に焼き込まず、ここで重ねる**(翻訳と撮り直しに強い形。2026-08-20)。
   紙でも使う(現地のPCの横に置く)ので、印刷の指定も持つ */
/* **文と画像で幅を分ける**。画面の切り出しは原寸(1:1)で出さないと文字が潰れて
   読めない(元が13pxなので0.75倍で約10px)。文章は760pxで折り返す —— 1行が長いと
   読みにくい。だからページは画像に合わせて広く取り、文だけ内側で絞る */
.helppage { max-width: 1180px; }
/* **画像がスマホ由来だけのページは、ページごと本文の幅に収める**(2026-08-24)。
   広く取るのは「PCの画面写真を原寸(1:1)で出さないと文字が潰れる」からで、
   スマホの写真・スクリーンショットにはその事情が無い —— 1180pxまで伸ばすと
   元より大きく引き伸ばされ、写真だけが画面を占める */
/* **狭い版面は中央に置く**(2026-08-26 初見レビュー)。左端に寄ったままだと、
   同じヘルプでもこのページだけ**ページごと左へずり落ちて**見えた
   (他の2枚は1180pxで、器の中央にある) */
.helppage-narrow { max-width: 820px; margin-left: auto; margin-right: auto; }
/* **`table.grid` と `.rolegrid` は除く**(2026-08-26)。ここから下の `.helppage table` の指定は
   **語の定義を並べる表**(`<th>語</th><td>説明</td>`)向けで、緑のヘッダを持つ
   `table.grid` に当たると**濃い緑の文字が濃い緑の地に乗って読めなくなる**
   (温度計の準備ページのチェック表で実際に読めなくなった)。幅と行送りの前提も違う。
   **除く表は名前で書く。**`:not()` は中身のぶん詳しくなるので、`:not(.grid)` と
   書いた時点で `.helppage .rolegrid th` に競り勝ってしまい、
   **役割分担の表の見出しと ✓ の位置がずれた**(直したはずのものが戻った) */
.helppage p, .helppage .lead, .helppage .note, .helppage .marks,
.helppage table:not(.grid):not(.rolegrid) { width: 100%; max-width: 780px; table-layout: fixed; }
/* **折り返しを許す**(2026-08-24)。`table.grid` の `nowrap` が効いていて、
   訳が長い言語では表がカードを突き抜け、ページごと横スクロールになっていた */
.helppage table:not(.grid):not(.rolegrid) th, .helppage table:not(.grid):not(.rolegrid) td { white-space: normal; }
/* **語の定義を並べる表**(誰が何をできるか・紙は2種類)。見出しの列は
   左に揃えて幅を絞る —— 既定の中央寄せだと、語と説明の対応が読み取れない。
   行の罫は`1px` 1本(枠で囲まない。塊は余白と淡い地で作る) */
.helppage table:not(.grid):not(.rolegrid) { border-collapse: collapse; }
.helppage table:not(.grid):not(.rolegrid) th {
  text-align: left;
  vertical-align: top;
  /* 見出しの語は**途中で折らない**(「輸送依頼書」が「輸送依頼/書」になっていた)。
     日本語の既定はどこでも折れるので、語として扱うことを明示する */
  word-break: keep-all;
  width: 9.5rem;
  padding: 9px 14px 9px 0;
  color: var(--green-dark);
}
.helppage table:not(.grid):not(.rolegrid) td { vertical-align: top; padding: 9px 0; }
.helppage table:not(.grid):not(.rolegrid) tr + tr th,
.helppage table:not(.grid):not(.rolegrid) tr + tr td { border-top: 1px solid var(--rule); }
/* **日本語は語のまとまりで折り返す**(Chrome 119+)。対応しないブラウザは従来どおり
   任意の位置で折れるだけで、崩れはしない */
.helppage p, .helppage .lead, .helppage .note, .helppage h4,
.helppage .marks, .helppage td { word-break: auto-phrase; }
/* **ここから下の「ヘルプの中の素のタグ」指定は、クラス1つの部品に競り勝つ**
   (詳しさ 0-1-1 対 0-1-0)。実際に `.intro-lead`(26px指定)が
   `.helppage p`(16px)に負けて、**主張の1行が本文と同じ大きさで出ていた** ——
   太字と色で大きく見えていただけで、半日気づけなかった(2026-08-26)。
   **ヘルプの中に新しいクラスを足すときは、`.helppage .○○` と書く**
   (`.intro-sub` `.intro-cap` は最初からそうしてある)。
   新しい部品を作るなら、ページ名ではなく**部品のクラス**で指定する */
/* **読むための版面にする**(2026-08-24 ユーザー指摘「文字の羅列で読みにくい」)。
   調査で一致していた数字を採る: 本文は**16px以上**・行送り 1.5〜1.8・1行は
   全角40字前後(UXPin / OneNine / Microsoft のスタイルガイド)。
   管理画面の本文(14px)より1段大きい —— あちらは表を詰めて比べる画面、
   こちらは**手順を読む**画面で、役割が違う。 */
.helppage .lead { font-size: var(--fs-lg); line-height: 1.85; }
.helppage .card + .card { margin-top: 12px; }
.helppage h3 { font-size: var(--fs-xl); }
.helppage h4 { font-size: var(--fs-lg); color: var(--green-dark); margin-bottom: 6px; }
.helppage p { font-size: var(--fs-lg); line-height: 1.85; margin-bottom: 10px; }
.helppage .note { font-size: var(--fs-base); line-height: 1.7; }

/* **機種で分かれる手順**(2026-08-24)。Android と iPhone を続けて書くと、
   自分に関係ない方まで読むことになる —— 帯と札で塊にして、**片方だけ読めばよい**
   ことを形で言う。畳まない(タブ・アコーディオンは紙に刷れないし、
   「もう片方はどこ?」を作る)—— 見えたまま飛ばせる形にする */
.platform { border-left: 3px solid var(--border); padding: 0 0 0 14px; margin: 14px 0; }
.platform-name {
  display: inline-block; margin-bottom: 4px; padding: 1px 10px; border-radius: 10px;
  background: var(--rule); color: var(--green-dark);
  font-size: var(--fs-sm); font-weight: 700;
}
.platform p { margin-bottom: 6px; }
.platform .shot { margin-top: 6px; }

/* **読み飛ばしてはいけない一言**。通知の色の約束に合わせる(琥珀=通ったが確認して)。
   本文に紛れる `.warn-line` と違い、面で止める */
.callout {
  border-left: 4px solid var(--warn); background: var(--warn-bg);
  border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 14px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* 手順の番号は**大きく**出す(紙で見て「いま何番か」が分かること) */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 14px 0 0; }
.steps > li {
  counter-increment: step; position: relative;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 18px 16px 58px; margin-bottom: 14px;
}
.steps > li::before {
  content: counter(step); position: absolute; left: 15px; top: 14px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff;
  font-size: var(--fs-base); font-weight: 700; text-align: center; line-height: 28px;
}
/* **狭い画面でも番号の列は残す**(2026-08-24)。番号を本文の中に流し込むと
   「いま何番か」を目で追えなくなる —— 縦に並んだ番号そのものが手順の骨格。
   余白だけ詰めて、本文の幅を取り戻す */
@media (max-width: 560px) {
  .steps > li { padding: 12px 14px 14px 46px; }
  .steps > li::before { left: 10px; top: 12px; width: 26px; height: 26px; line-height: 26px; }
}

/* 画像と、その上に重ねる注釈 */
/* **画面に出ている項目名**は太字にしない(2026-08-20)。太字は「見落とすと事故に
   なること」に取っておく(見た目の土台「太字は塊に1つ」)—— UIの語は種類が違う
   ものとして、淡い地の小さな札にする。技術文書の慣用でもある */
.ui {
  background: var(--rule); border: 1px solid #e0e8e3; border-radius: 4px;
  padding: 0 5px; font-size: 0.94em; white-space: nowrap;
}

.shot { margin: 10px 0; }
.shot-img { position: relative; display: inline-block; max-width: 100%; }
.shot-img img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 6px;
}
.shot figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
/* 枠は**赤**(画面のどの色とも被らない)。番号は枠の左上に小さく載せる */
.shot-mark {
  position: absolute; border: 2px solid var(--danger); border-radius: 4px;
  box-sizing: border-box; pointer-events: none;
}
/* 番号は枠の**右上の外側**に置く。左上だと項目名の1文字目に重なる(実機で確認) */
.shot-mark i {
  position: absolute; right: -9px; top: -9px; width: 18px; height: 18px;
  background: var(--danger); color: #fff; border-radius: 50%;
  font-size: var(--fs-xs); font-style: normal; font-weight: 700;
  text-align: center; line-height: 18px;
}
/* 枠に対応する説明。番号を枠と揃える */
.marks { margin: 8px 0 0 18px; font-size: var(--fs-md); line-height: 1.9; }
.marks li::marker { color: var(--danger); font-weight: 700; }
/* 実機の写真は2枚並べる(狭い画面では縦に) */
.shotrow { display: flex; gap: 12px; flex-wrap: wrap; }
.shotrow .shot { flex: 1 1 220px; margin: 10px 0 0; }
.shotrow img { max-height: 320px; width: auto; }
/* **表そのものを中央に置く**(2026-08-20 ユーザー判断)。この表はページの中で
   独立した1枚なので、文の左端に揃えるより中央に据える方が収まる。
   **値の列は中央寄せにしない** —— 中央揃えが効くのは短い文だけ、の原則どおり
   (「Disable(禁止)」のような長さになると、行ごとに開始位置がずれて読みにくい) */
.checklist { margin-left: auto; margin-right: auto; }
.checklist td { vertical-align: top; }
.checklist .sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }

@media print {
  /* 紙では操作の部品を出さない(押せないものを刷らない) */
  .appbar, .topnav, .devbar, .no-print { display: none !important; }
  body, .app, .app.wide { background: #fff; max-width: none; }
  .body { padding: 0; }
  .card, .steps > li, .platform, .callout { border-color: #bbb; break-inside: avoid; }
  .shot { break-inside: avoid; }
  .helppage { max-width: none; }
}

/* 写真の送信中(2026-08-21 実機で追加)。カメラから戻ると無反応の画面が数十秒続き、
   「固まった」と見えて撮り直しや戻るを押してしまう。**画面を覆う** ——
   端に小さく出しても、カメラから戻った直後の視線は画面の中央にある */
.sending {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  padding: 24px;
}
.sending-box { text-align: center; max-width: 320px; }
.sending-box b { display: block; margin-top: 14px; font-size: var(--fs-lg); }
.sending-note {
  margin-top: 8px;
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.7;
}
.sending-spin {
  width: 38px;
  height: 38px;
  margin: 0 auto;
  border: 4px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: sending-turn .9s linear infinite;
}
@keyframes sending-turn { to { transform: rotate(360deg); } }

/* 「撮影済みの写真から選ぶ」。**主役は撮影**なので、控えめな文字リンクにする
   (同じ大きさのボタンを2つ並べると、どちらを押すのか毎回考えることになる) */
.pick-alt {
  display: block;
  margin: 6px 0 2px;
  text-align: center;
  font-size: var(--fs-md);
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
/* 送信の進捗。**止まっているのか進んでいるのか**が分かることが要点 */
.sending-bar {
  margin: 14px auto 0;
  width: 220px;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.sending-bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .2s; }

/* アプリバーの右側(言語の切替 + アカウント)。**1つの塊にまとめる** ——
   `.appbar` は space-between なので、直接の子が3つになると真ん中の要素が
   画面の中央に飛ぶ(2026-08-24 に実際にそう見えた) */
.appbar-right { display: flex; align-items: center; gap: 8px; }

/* 言語の切替。**いまの言語を出し、押すと選べる**(2026-08-24 に作り直し)。
   隣のアカウントの札と同じ形にした以上、中身も「状態」でなければ矛盾する ——
   インドネシア語の画面に「日本語」と出ていた。器はアカウントメニューと共有する
   (`.usermenu`)ので、開閉・パネルの位置合わせ・上に開く判定がそのまま効く。
   **ログインの無いページにも出る**(運転手はここだけが入口) */
.langpick > summary { display: flex; align-items: center; gap: 5px; position: relative; }
/* **狭い画面では言語名を畳む。**荷札のページ(見出しが最長)でアプリバーが
   2行になる —— 現場でいちばん使う画面なので、そこが崩れる形は採れない。
   記号(🌐)だけが残り、名前は title と、開いたメニューが持つ */
@media (max-width: 520px) {
  .langbtn-name, .helpbtn-name { display: none; }
  /* **狭い画面では見出しを1段落とす**(2026-08-26)。ヘルプの入口を帯に出したぶん
     幅が減り、長いページ名(「T-260904-01 便の詳細」)が2行に折れた ——
     帯は「いまどの画面か」を1行で言う場所なので、折るより1段小さくする */
  .appbar .t { font-size: var(--fs-base); }
  /* **名前の札を詰める**(2026-08-26)。ヘルプの入口を帯に出したぶん幅が減り、
     長い名前(「発地スタッフ 田中」)があると**ページ名が2行に折れた** ——
     折るべきはページの名前ではなく、識別のための名前の方 */
  /* **切るのは名前だけ**(2026-08-26)。札そのものを切ると `text-overflow` が
     効かない(inline-flex の中身は匿名の項目になる)ので、名前を包んだ span を切る */
  .usermenu-name {
    display: inline-block; max-width: 5.5em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: bottom;
  }
}
/* **押せる範囲を広げる(見た目は変えない)。**記号だけになると現場の下限(44px)を
   割る —— 札を大きくするとアプリバーが厚くなり、全ての現場画面が縦を失う */
.langpick > summary::after { content: ""; position: absolute; inset: -8px -5px; }

/* **番号・コードを途中で折らない。**紙と突き合わせるものが割れると照合できない
   (訳が長い言語で見出しが折り返したときに起きた。2026-08-24) */
.nowrap { white-space: nowrap; }
/* アカウントの札も割らない(「拠点スタッ / フ ▾」と割れていた) */
.appbar .usermenu > summary { white-space: nowrap; }

/* 地名検索の「候補を閉じる」。**見える出口**(2026-08-24 実機の試験)——
   以前は候補を押したときしか閉じず、座標を手で入れた人は地図が隠れたままだった。
   候補そのものより控えめにする(主役は候補で、これは逃げ道) */
.geocode-close {
  display: block; width: 100%; text-align: center; cursor: pointer;
  border: 0; background: none; color: var(--muted); font: inherit;
  font-size: var(--fs-sm); padding: 8px; min-height: 44px;
}
.geocode-close:hover { color: var(--ink); }

/* 地図の「Ctrl + スクロールで拡大」の案内。**素のホイールを回した瞬間だけ**出す
   —— 常設の注記にすると、ページを読んでいるだけの人にも出続ける(2026-08-24)。
   地図の操作を邪魔しないよう当たり判定は持たせない */
.map-hint {
  position: absolute; inset: 0; z-index: 500; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
  background: rgba(0,0,0,.45); color: #fff; font-size: var(--fs-lg); font-weight: 700;
  opacity: 0; transition: opacity .18s;
}
.map-hint.on { opacity: 1; }

/* 地図のピン。**色は役割で変える**(2026-08-24 ユーザー要望)—— 発地と着地が
   同じ色だと、どちらへ向かう便なのかを凡例と地点名を往復して読むことになる。
   Leaflet 同梱の青いPNGは使わず divIcon にした(色を増やすのが1行で済む)。
   **色の定義はここだけ** —— テンプレートに色コードを書くと画面ごとにずれる。
   緑=始まり / 赤=終わり は地図の慣用(経路案内の出発・到着と同じ) */
.mappin {
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.mappin-origin { background: #2f6b4f; }
.mappin-via    { background: #8a8f8c; }
.mappin-dest   { background: #c0392b; }
/* 凡例の丸は同じ色を使う。**色を2か所に書かない** —— ずれると凡例が地図の説明に
   ならなくなる。ピンの白フチと影は凡例には要らない */
.map-key.mappin-origin, .map-key.mappin-via, .map-key.mappin-dest {
  border: 0; box-shadow: none;
}

/* 目には出さず、読み上げには渡す(リンクが新しいタブで開くことを名前に含める。
   WCAG 3.2.5 —— 開くこと自体は例外に当たるが、**予告は要る**) */
/* **読むだけの入口**(手順ヘルプ)。ツールバーで枠のボタンにすると、隣の
   「CSVを送る」のような**実際に何かが起きる操作**と同じ重さに見える ——
   操作ではないので文字リンクに落とす(2026-08-25) */
.helplink {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  min-height: 26px;
  font-size: var(--fs-md); color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--border); padding-bottom: 1px;
}
.helplink:hover { color: var(--green-dark); border-bottom-color: var(--green); }
/* **`.helplink` の形をした操作**(印刷)。押せば何か起きるが、ページの主役ではない ——
   枠のボタンにすると、読むためのページに強い的が1つだけできる。
   `font-family` は button が継承しないので明示する(日本語が別の書体になる) */
button.helplink {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 0 1px;
  font-family: inherit;
  cursor: pointer;
}
/* 印は `h.tip()` の「?」と同じ丸(ヘルプの印は既にこの形で通っている) */
.helplink-q {
  display: inline-block; width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  font-size: var(--fs-xs); line-height: 15px; font-weight: 700;
  font-style: normal; text-align: center; flex: 0 0 auto;
}
.helplink:hover .helplink-q { border-color: var(--green); color: var(--green-dark); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 突き合わせる値(位置情報の識別子)。**等幅で出す** —— 似た文字(l/1, O/0)を
   見分けながら、アプリの画面と1文字ずつ比べるため */
code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-sm);
  background: var(--green-bg);
  padding: 1px 5px;
  border-radius: 3px;
  word-break: break-all;
}

.chiprow { display: flex; flex-wrap: wrap; gap: 4px 6px; }


/* 手順ヘルプの索引(使い方のページの末尾)。**開けないものも載せる** ——
   位置情報の設定はURLに便のトークンが要るので、管理画面からは開けない。
   「無い」のではなく「ここからは開けない」と書く */
.helpindex { list-style: none; margin: 0; }
.helpindex li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.helpindex li:last-child { border-bottom: 0; }
.helpindex .note { display: block; margin-top: 2px; }

/* ══ 荷物の状態の流れ(ヘルプの象徴的な図) ═══════════════
   **横に伸ばす。**段は6つで、ステッパーの定石(3〜6段)に収まる。
   状態の語と色は `label_service.STATUS_LABELS` / `STATUS_CHIPS` と同じ ——
   この図を読むと**画面のチップの色も読めるようになる**。

   定石どおりに並べるだけだと「どこにでもある進行バー」になるので、
   **この製品にしか無いもの**を足す: 状態の下に渡す**帯**が
   「どの区間で何が記録されているか」を言う(封をしてから開けるまでが温度 ——
   締めの `box_window` そのもの / 出発から到着までが位置)。

   狭い画面では縦に積み直し、帯は左の罫に変える。**横スクロールにしない** ——
   スマホでは端が見えないまま「よく分からない図」になる。 */

/* ヘルプの遷移図。**位置は全部グリッドが決める** —— パーセントの絶対配置で帯や札を
   置くと、列の幅は言語と画面幅で変わるので必ずどこかでずれる。列番号で置く。
   1列目は下のレーンの主語のためだけにあるので、幅は中身ぶん(max-content) */
.cargorail {
  display: grid;
  /* 1列目は**上限を決める**(fit-content)—— max-content にすると、訳語の長い言語で
     "Barang dan pengiriman" が131pxを占め、そのぶん7列が細って
     工程名("Pengangkutan")が語の途中で折れる。狭いときは主語を2行に折る */
  grid-template-columns: fit-content(7.5rem) repeat(7, minmax(0, 1fr));
  gap: 0 6px;
  /* このカードは図だけで成立させるので、上下に余白を持たせる(2026-08-26) */
  margin: 22px 0 26px;
}

/* **輸送区間の淡い地**(2026-08-25 外部レビュー)。この図の中心は 出発→輸送→到着記録 で、
   そこだけ地を敷くと「前・中・後」の3つの塊として一目で読める。
   **枠線ではなく淡い地**(見た目の土台)。**段の中のチップの色は変えない** */
.cr-band {
  grid-row: 1 / 7;
  grid-column: 4 / 7;
  background: var(--green-bg);
  border-radius: 10px;
}

/* **主語の行にホバーすると、帯が「その記録の区間」に移る**(2026-08-26 ユーザー案)。
   帯の長さが**時間の範囲**であることを、言葉ではなく形で見せる ——
   「記録される区間」の一語と同じことを、動きで言い直している。

   **`grid-column` は補間できない**ので、既定の帯と**2枚重ねて透明度で入れ替える**。
   **`:has()` で書く**(JSを足さない)—— 対応しないブラウザでは何も起きないだけで、
   帯も主語も今までどおり読める。ホバーはタッチと紙では効かないので、
   これは**追加の手がかり**であって、読むための前提ではない */
.cr-hl {
  grid-row: 1 / 7;
  grid-column: 4 / 7;
  background: transparent;
  border-radius: 10px;
  pointer-events: none;
}

.cr-hl-label {
  grid-row: 1;
  grid-column: 4 / 7;
  text-align: center;
  font-size: var(--fs-xs);
  color: transparent;
  font-weight: 700;
  padding: 9px 0 3px;
  pointer-events: none;
  white-space: nowrap;
}

/* 行の当たり判定。主語と帯の間の gap を横切ってもホバーが切れないように、行全体に敷く */
/* **中身はポインタを受けない。**当たり判定は下に敷いてあるので(上に置くと、
   ホバーの地が帯を隠す)、主語と帯が受けてしまうと行の真ん中でホバーが切れる */
.cr-lane .cr-rowlabel, .cr-lane .cr-bar { pointer-events: none; }

.cr-lanehit {
  grid-column: 1 / 9;
  border-radius: 7px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* **キーボードでも同じことができる**ので `<button>`。焦点の輪は行を囲む */
  outline-offset: 2px;
}

.lh1 { grid-row: 9; } .lh2 { grid-row: 10; } .lh3 { grid-row: 11; }
.lh4 { grid-row: 12; } .lh5 { grid-row: 13; }

 /* **透明度を動かさない。**この帯は段の文字の**裏**にあるので、透明度を動かすと
   文字が別の層として描き直され、**サブピクセルのアンチエイリアスが失われて
   にじんだまま残る**(遷移が終わって1.4秒後もにじんでいた)。
   動かすのは**背景色と文字色だけ** —— 見た目は同じで、文字は影響を受けない */
.cr-band, .cr-hl, .cr-lanehit, .cr-bar { transition: background-color .3s ease; }
.cr-band-label, .cr-hl-label { transition: color .3s ease; }

/* どれかの行が選ばれている: 既定の帯と名札を引っ込める */
.cargorail[data-active] .cr-band { background: transparent; }
.cargorail[data-active] .cr-band-label { color: transparent; }
.cr-lanehit:hover { background: #f4f8f5; }

/* **範囲と文字は要素自身が持つ**(JSが `data-lane` / `data-label` を書く)——
   2枚 × 5行ぶんの規則を書かずに済み、出ている方だけ `.on` で浮かせればよい */
.cr-hl[data-lane="1"], .cr-hl-label[data-lane="1"],
.cr-hl[data-lane="5"], .cr-hl-label[data-lane="5"] { grid-column: 2 / 9; }
.cr-hl[data-lane="2"], .cr-hl-label[data-lane="2"] { grid-column: 3 / 8; }
.cr-hl[data-lane="3"], .cr-hl-label[data-lane="3"],
.cr-hl[data-lane="4"], .cr-hl-label[data-lane="4"] { grid-column: 4 / 7; }

.cr-hl.on { background: var(--green-bg); }
.cr-hl-label.on { color: var(--green); }
.cr-hl-label::after { content: attr(data-label); }

/* ホバーしている行の帯を濃くする —— どの行を見ているかが手元でも分かる */
.cargorail[data-active="1"] .ln1 .cr-bar, .cargorail[data-active="2"] .ln2 .cr-bar,
.cargorail[data-active="3"] .ln3 .cr-bar, .cargorail[data-active="4"] .ln4 .cr-bar,
.cargorail[data-active="5"] .ln5 .cr-bar {
  background: #c9e3d4;
  border-color: #9cc7ae;
}

/* 固定中(クリック)は行の地を残す —— ホバーが外れても「いま何を見ているか」が分かる */
.cargorail[data-pin="1"] .lh1, .cargorail[data-pin="2"] .lh2, .cargorail[data-pin="3"] .lh3,
.cargorail[data-pin="4"] .lh4, .cargorail[data-pin="5"] .lh5 { background: #eef4f0; }

@media (prefers-reduced-motion: reduce) {
  .cr-band, .cr-band-label, .cr-hl, .cr-hl-label, .cr-lanehit, .cr-bar { transition: none; }
}

/* 名札は**地とは別の要素**で、地がまたぐ2行のうち上の行だけに置く ——
   同じ要素に入れると、名札のぶんの高さが下の行(役割)に食い込む */
.cr-band-label {
  grid-row: 1;
  grid-column: 4 / 7;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
  padding: 9px 0 3px;
}

/* **段は入れ物をやめて、中身をそのまま升目に置く**(`display: contents`。2026-08-25)。
   段ごとに縦並びにすると、札のある段(輸送)だけ箇条書きが下にずれる ——
   役割・線・工程名・札・内容を**全列で同じ行**に載せると、札が1つでも並びが崩れない。
   行: 1=輸送区間の名札 / 2=役割 / 3=線 / 4=工程名 / 5=札 / 6=内容 /
       7=一覧の段階 / 8=記録の見出し / 9〜13=記録のレーン */
.cr-step { display: contents; }

.st1 > * { grid-column: 2; } .st2 > * { grid-column: 3; } .st3 > * { grid-column: 4; }
.st4 > * { grid-column: 5; } .st5 > * { grid-column: 6; } .st6 > * { grid-column: 7; }
.st7 > * { grid-column: 8; }

.cr-role { grid-row: 2; }
.cr-rail { grid-row: 3; }
.cr-title { grid-row: 4; }
.cr-pill { grid-row: 5; justify-self: center; }
.cr-list { grid-row: 6; }

/* **3階層で読ませる**(2026-08-25)。役割・工程名・内容がほぼ同じ強さだと、
   どこから読むのか決まらない —— 役割は小さく薄く、工程名を主役に、内容は補助 */
.cr-role {
  /* **日本語は語のまとまりで折り返す**(7列だと必ず折り返すので、ここが効く) */
  word-break: auto-phrase;
  /* **11pxの灰色は読みにくい**(2026-08-25 ユーザー指摘)。役割・段階・帯の主語は
     補助の文字だが、読めなければ意味が無いので12pxに上げる */
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  line-height: 1.4;
  /* **2行ぶんの箱を確保して下端で揃える。**役割の文字数は言語で変わるので
     (インドネシア語は "Petugas (lokasi tujuan)" のように折り返す)、
     高さを内容任せにすると**レールが列ごとに段違い**になる。
     **2行ぶんは line-height と同じ値で見積もる**(1.4 × 2)—— 端数を削ると
     2行になった列だけ箱からはみ出して、そこだけレールが下がる */
  min-height: 2.8em;
  /* **線・役割・工程名が詰まって見える**(2026-08-25 ユーザー指摘)。役割は箱の下端で
     揃えるので、下に余白を足さないと文字が線に貼り付く */
  padding-bottom: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* レールは専用の行に持たせる —— 役割の文字数が列で違っても線の高さが揃う */
.cr-rail { position: relative; width: 100%; height: 22px; }

.cr-rail::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: #cddad3;
}

.st7 .cr-rail::before { display: none; }

.cr-rail::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--green);
}

/* **工程名が主役**(2026-08-25 ユーザー判断)。初見の人は段階の語を知らないので、
   「出荷準備」「受領・確認」のような**仕事の名前**を大きく出す */
.cr-title {
  text-align: center;
  /* **左右の余白を取らない。**列幅ぴったりの訳語("Pengangkutan" は 125px、列は 128px)が
     2px の余白2つで**1px 足りずに語の途中で折れる** —— 隙間は列の gap が持っている */
  padding: 8px 0 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  word-break: auto-phrase;
  /* 1語で列より長い訳語(Pengangkutan)が来ても、列の外へ出さないための保険 */
  overflow-wrap: break-word;
}

/* **札は全段に置き、色で三段に分ける**(2026-08-25 ユーザー判断)。1枚だけだと
   その列だけ何かがあるように見えて釣り合いが悪い。**`.chip` を借りない** ——
   あちらは状態(待ち・動いている・完了・止まった)の色で、ここが言うのは手間の種類。
   同じ器を使うと、片方の意味を変えたときにもう片方が黙って変わる */
.cr-pill {
  margin: 7px 0 0;
  display: inline-block;
  white-space: normal;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid;
}

/* **色は分類と1対1**(灰=管理画面 / 琥珀=現場 / 青=自動)。見た目で選ばない */
.is-desk { color: #55685e; background: #f4f7f5; border-color: var(--border); }
.is-field { color: var(--warn); background: var(--warn-bg); border-color: #edd4ae; }
/* **青は1つだけ**なので、全段に札があっても「ここだけ手を動かさない」は埋もれない */
.is-auto { color: var(--blue); background: var(--blue-bg); border-color: #c8deef; }

/* **下に内容**。箇条書きは左に揃える(中央揃えが効くのは短い文だけ) */
/* **箇条書きの塊は列の中で中央に置く**(2026-08-25 ユーザー指摘)。文字は左から
   読ませるが、塊を列の左端に貼り付けると、中央揃えの工程名と札に対して
   **その列だけ左へずれて見える**(短い箇条書きの列ほど目立つ)。
   `fit-content` なので、長い訳語の列は今までどおり列幅いっぱいに広がる */
.cr-list {
  list-style: none;
  text-align: left;
  margin: 9px auto 0;
  padding: 0 2px 12px;
  width: fit-content;
  max-width: 100%;
}

/* **1項目=1行に収める。**列幅は約145pxなので、11pxで12字が上限 */
.cr-list li {
  word-break: auto-phrase;
  position: relative;
  padding-left: 9px;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 2px;
}

.cr-list li::before { content: "・"; position: absolute; left: -2px; color: var(--muted); }

/* **行(段階の対応・記録のレーン)。**`display: contents` なので囲みは無いものとして
   扱われ、中の要素がそのまま升目に並ぶ —— 狭い画面では囲みが効いて1行に畳まれる */
.cr-row { display: contents; }

.cr-rowlabel {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  /* **主語は少し濃く**(2026-08-26 ユーザー指摘)。`--muted` だと帯の付属物に見えるが、
     ここは「何の記録か」を名乗る側で、しかもホバーの的になる */
  color: #46604f;
  padding-right: 4px;
}

.cr-icon { width: 15px; height: 15px; flex: 0 0 15px; opacity: .8; }

/* 画面の語への橋。**工程名を主役にしたぶん、一覧の語がどこにも無くなる** ——
   画面で「準備中」を見た人がこの図に戻れるように、細い行で残す */
/* **行に薄い地を敷く**(2026-08-25 試行)。上の工程と下の記録の間で、
   この行だけ「アプリに出る語」という別の register であることを面で言う。
   **輸送区間の緑とは色を分ける** —— 同じ色だと帯が2枚積み重なって見える */
.cr-stageband {
  grid-row: 7;
  grid-column: 1 / 9;
  background: #f6f8f7;
  border-radius: 8px;
  /* 輸送区間の地とくっつけない —— 帯が2枚積み重なって見える */
  margin-top: 12px;
}

/* 地の中で上下に余白を取る(地は margin-top 4px ぶん下から始まる) */
.cr-stagerow .cr-rowlabel { padding: 18px 4px 9px 8px; }

.cr-stage {
  padding: 18px 0 9px;
  text-align: center;
  font-size: var(--fs-sm);
  /* 主語(左端の「便の状態」)より値の方を濃くする —— 読むのは値の方 */
  color: #4a6459;
  word-break: auto-phrase;
}

.cr-stagerow .cr-rowlabel, .cr-stage { grid-row: 7; }
.sg1 { grid-column: 2; } .sg2 { grid-column: 3; } .sg3 { grid-column: 4; }
.sg4 { grid-column: 5; } .sg5 { grid-column: 6; } .sg6 { grid-column: 7; }
.sg7 { grid-column: 8; }

/* **便にひもづいて残る記録。**手を動かす量(上の箇条書き)と、勝手に溜まる量の差が
   ここで見える。色は1色 —— 帯ごとに色を変えると、意味のない色分けが増える */
/* 記録の帯と、その上の「便の状態」を分ける罫だけ。**見出しの文字は置かない** ——
   帯が何をしているかは形で読めるし、図の上の1行が既に言っている */
.cr-lanesep {
  grid-row: 8;
  grid-column: 1 / 9;
  height: 0;
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-bottom: 12px;
}

/* **帯が何を表しているかは「区間」の一語で言う。**長さと位置に意味がある図なので、
   それを言わないと進捗バーや量の多さに読める。罫と同じ行に置いて、下の主語の列に掛ける */
.cr-lanecap {
  grid-row: 8;
  grid-column: 1 / 4;
  justify-self: start;
  align-self: start;
  /* **罫の上に載せる**(2026-08-26 ユーザー指摘)。下に置くと、罫と主語の列の
     すき間に押し込んだように見えた —— 罫と同じ位置から始めて半分ぶん持ち上げ、
     地をカードと同じ白にして罫を切る(見出しを罫に載せる古典的な形) */
  margin-top: 14px;
  transform: translateY(-50%);
  background: #fff;
  padding: 0 10px 0 0;
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--muted);
}

.cr-bar {
  height: 10px;
  border-radius: 999px;
  /* 白地の上の淡い緑は**帯として見えないほど薄い** —— 少しだけ濃くする
     (それでも上のチップより弱いので、段階の色と競わない) */
  background: #dfeee6;
  border: 1px solid #bcd8c9;
  align-self: center;
}

.cr-lane .cr-rowlabel { align-self: center; }
.cr-range { display: none; }

/* **行は明示のクラスで置く。**`nth-of-type` は兄弟の div(段・段階の行)まで数えるので、
   5本のレーンが1本もつかまらず、名札が図の先頭へ飛んだ(実際に飛んだ) */
.ln1 > * { grid-row: 9; } .ln2 > * { grid-row: 10; } .ln3 > * { grid-row: 11; }
.ln4 > * { grid-row: 12; } .ln5 > * { grid-row: 13; }
.cr-lane .cr-bar { margin: 6px 0; }

/* 範囲は**実装どおり**: 便と荷物・変更履歴は作成から完了まで / 温度は温度計を入れてから
   読み出すまで(`box_window`。**通しで1本** —— 2本に割ると輸送中は測っていないと読める)/
   位置と燃料は出発から到着まで */
.lane-all { grid-column: 2 / 9; }
.lane-temp { grid-column: 3 / 8; }
.lane-route, .lane-fuel { grid-column: 4 / 7; }

/* **畳む幅は 1150px**(2026-08-25 に全幅を走査して決めた)。900pxのままだと、
   950〜1150px で**インドネシア語だけ壊れる** —— 列が120pxまで細り、
   "Pengangkutan"(輸送)が**語の途中で折れる**。
   日本語だけ見ていると気づけない(短い言語では収まってしまう)。
   **横スクロールで逃がさない** —— 図は端が切れると意味を失う */
/* **`screen` に限る。**縦積みは画面が狭いときの代替であって、**紙の形ではない** ——
   印刷は横向きのA4で、図は横並びのまま刷る(このページの `head` で `@page` を指定) */
@media screen and (max-width: 1150px) {
  /* 縦に積み直す。レールは左に立て、帯は言葉に変える */
  .cargorail { grid-template-columns: 1fr; gap: 0; padding-left: 20px; border-left: 2px solid var(--border); }
  .cr-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    padding: 10px 0 6px;
  }
  .cr-title { text-align: left; padding: 0; }
  .cr-pill { justify-self: start; }
  .cr-list { margin-left: 0; padding: 0; }
  .cr-step, .cr-step > *, .cr-stage, .cr-rowlabel, .cr-bar, .cr-lanesep, .cr-band-label {
    grid-row: auto; grid-column: auto;
  }
  .cr-role { min-height: 0; }
  .cr-rail { height: 0; }
  .cr-rail::before { display: none; }
  .cr-rail::after { top: -22px; left: -27px; transform: none; width: 10px; height: 10px; }
  /* 地も名札も**範囲を表せない**ので出さない(範囲はレーンの言葉が言う) */
  .cr-band, .cr-band-label, .cr-hl, .cr-hl-label, .cr-lanehit { display: none; }
  /* 段階の対応は**1行に畳む** —— 升目に置けないので、囲みを効かせて並べる */
  .cr-stageband { display: none; }
  .cr-stagerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 12px; }
  .cr-stagerow .cr-rowlabel { padding: 0 4px 0 0; }
  .cr-stage { padding: 0; text-align: left; }
  .sg1 { display: none; }
  .cr-stage:not(.sg7)::after { content: "・"; color: var(--border); margin-left: 8px; }
  .cr-lanesep { margin-top: 14px; padding-bottom: 2px; }
  .cr-lanecap { grid-row: auto; grid-column: auto; transform: none; margin-top: 10px; padding: 0; }
  /* **帯をやめて言葉で範囲を言う** —— 縦では列が揃わないので、帯は嘘になる */
  .cr-lane { display: block; padding-left: 10px; border-left: 2px solid var(--border); margin-top: 6px; }
  .cr-lane .cr-rowlabel { display: inline-flex; }
  .cr-bar { display: none; }
  /* 印のぶん字下げして、主語の文字の真下から範囲が始まるようにする */
  .cr-range { display: block; padding-left: 19px; font-size: var(--fs-xs); color: var(--muted); }
}