/* Hallmark · macrostructure: Workbench（計器盤スタック） · tone: utilitarian／現場計器
* theme: studied-DNA (source: 02_UIモック 01〜06.png) · studied: yes
* observed-brand: #0746a1 observed-accent: #0047b3 observed-tints: #e6ecfa/#e6f7ed/#fdf4ec/#feeceb/#f0f1f5
* observed-fonts: 端末内蔵JPゴシックのみ（外部CDN禁止＝設計正本 §3。フォント対でなく字重・寸法・等幅数字で階層を作る）
* pre-emit critique: P5 H5 E4 S5 R4 V4
*
* ZipFlow Field — 屋外・直射日光下前提のUI規約（この4本は意匠より優先する）
* - 最小フォント 17px（本文18px）／主要ボタン最小高60px／コントラスト4.5:1以上
* - 白背景＋黒文字固定。淡いグレー文字は使わない
* - Webフォントを読まない＝端末内蔵フォントのみ（CDN0本・オフラインで字が消えない）
* - 絵文字を使わない。アイコンは app/icons.js の自作SVG
* - 色の検証: python3 tools/check_contrast.py（--c-* を読んで対白の比を計算する。
* よって**文字に使う色だけ --c-* と名付ける**。地色・罫色は --bg-* / --ico-* に置く）
*/
:root{
/* -- 文字に使う色（対白 4.5:1 以上・機械検証あり） -- */
--c-bg: #ffffff;
--c-fg: #111111; /* 本文 */
--c-fg-sub: #444444; /* 補助文字。これより薄い文字は作らない */
--c-line: #767676; /* 罫線（文字には使わない＝3:1判定） */
--c-brand: #0746a1; /* 見出し・ワードマーク（モック実測） */
--c-now: #0047b3; /* 現在・主操作（モック実測） */
--c-done: #0b7a38; /* 完了 */
--c-warn: #a8490b; /* 注意 */
--c-pdf: #b3261e; /* PDF の印だけに使う赤（図・資料タブ PDF 面）。
文字には使わない＝注意（--c-warn）と読み分けられなくなる。 */
--c-alert: #b3261e; /* 異常・員数不足・未送信 */
/* -- 地色・罫色・アイコン色（非テキスト。--c-* にしないこと） -- */
--bg-sunken: #f7f8fc; /* カード内の沈み面 */
--bg-track: #f0f1f3; /* 進捗の溝 */
--bg-neutral: #f0f1f5; /* 予定バッジ */
--bg-hair: #e6eaf1; /* 髪罫（面は影と併用＝罫は淡く） */
--bg-hair-2: #d2dae6; /* やや強い髪罫 */
--bg-brand: #0746a1; /* 主計器の面 */
--bg-brand-d: #063b88; /* 主計器の沈み面 */
--bg-now: #e6ecfa; /* 現在の淡色面（モック実測） */
--bg-done: #e6f7ed; /* 完了の淡色面（モック実測） */
--bg-warn: #fdf4ec; /* 注意の淡色面（モック実測） */
--bg-alert: #feeceb; /* 異常の淡色面（モック実測） */
--ico-warn: #e8590c; /* 注意アイコンの塗り（非テキスト＝3:1で足りる） */
--ico-done: #0b7a38;
--ink-brand: #c7d6f0; /* 主計器の面上のラベル文字（対 --bg-brand 6.0:1） */
--ink-num: #ffab52; /* 主計器の面上の大数字（対 --bg-brand 4.7:1・モックの#fe8536を規約まで持ち上げた） */
--hdr-h: 72px; /* 送信ボタン(60px)＋上下余白 */
--nav-h: 76px; /* アイコン26px＋ラベル17px */
--r-card: 16px;
--r-pill: 999px;
--sp: 12px;
--ease-out: cubic-bezier(.2,.7,.3,1);
/* 影は2段だけ（浮きすぎない・iOS調の柔らかい持ち上がり）。色付き影は使わない */
--shadow-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.07);
--shadow-2: 0 3px 6px rgba(7,70,161,.10), 0 8px 24px rgba(7,70,161,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,71,179,.14)}
[hidden]{display:none!important}
#btn-send{display:none!important}
html,body{margin:0;padding:0;background:var(--c-bg);color:var(--c-fg);overflow-x:clip}
body{
font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
font-size:18px;line-height:1.55;font-weight:500;
-webkit-text-size-adjust:100%;
padding-top:calc(var(--hdr-h) + env(safe-area-inset-top));
padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
}
h1,h2,h3{margin:0;line-height:1.28;letter-spacing:-.01em}
h1{font-size:28px;font-weight:800}
h2{font-size:19px;font-weight:800}
h3{font-size:18px;font-weight:800}
p{margin:0}
p,li,td,th,label{font-size:18px}
small,.small{font-size:17px;color:var(--c-fg-sub);line-height:1.4} /* 17px が下限 */
.ico{display:block;flex:0 0 auto}
/* 時刻・件数はすべて等幅数字。桁が揺れると一覧で時刻が読み取れない */
.num,.t,.pill,.stat-v,.hero-num,.ring-v,.row-t{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* ================= ZipFlow Ops 共通ヘッダー（LIVEを正本） ================= */
.hdr{
position:fixed;top:0;left:0;right:0;z-index:20;
height:calc(var(--hdr-h) + env(safe-area-inset-top));
padding:env(safe-area-inset-top) max(12px,calc((100vw - 640px)/2 + 16px)) 0;
display:flex;align-items:center;justify-content:space-between;gap:10px;
background:rgba(255,255,255,.98);border-bottom:1px solid #edf0f5;
box-shadow:0 2px 10px rgba(15,36,68,.025);overflow:visible;
}
.shell-brand{font-size:20px;font-weight:850;letter-spacing:-.03em;white-space:nowrap;color:#10203f;flex:0 0 auto}
.shell-brand span:last-child{color:#1256cf;font-weight:700}
.shell-meta{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;flex:0 1 auto}
.shell-share,.shell-pack,.shell-settings{
appearance:none;height:40px;border:1px solid #d8e1ee;border-radius:12px;background:#fff;color:#1256cf;
display:inline-flex;align-items:center;justify-content:center;gap:5px;font:inherit;font-size:17px;font-weight:850;cursor:pointer;padding:0;
}
.shell-share,.shell-settings{width:40px;flex:0 0 40px}
/* 1行に収まらなくなったら**パック切替のラベルだけ**が縮む（…で切れる）。同期状態のチップは
* 縮ませない＝「オフライン」を潰して読めなくしない（min-width:0 のままだと先にチップが潰れる実測）。 */
.shell-pack{max-width:148px;min-width:56px;padding:0 10px;color:#10203f}
.shell-share[hidden],.shell-pack[hidden],.shell-settings[hidden]{display:none!important}
.shell-share:active,.shell-pack:active,.shell-settings:active{background:#f2f6fc}
.shell-pack>.ico{color:#1256cf}.shell-pack-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip{height:38px;padding:0 11px;border:1px solid #dce4ef;border-radius:12px;background:#fff;display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font-size:17px;line-height:1;font-weight:850;white-space:nowrap;color:#10203f}
.chip::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:currentColor}.chip-body{display:flex;align-items:center;min-width:0}.chip-state{white-space:nowrap}.chip-why{display:none}
.chip[data-sync="fresh"]{color:#09863f}.chip[data-sync="update"]{color:#a75a12;background:#fff8ef}.chip[data-sync="offline"]{color:#5f6978}
.unsent{appearance:none;position:absolute;right:max(12px,calc((100vw - 640px)/2 + 16px));top:calc(env(safe-area-inset-top) + 55px);z-index:21;min-height:30px;padding:4px 9px;border:1px solid #efc9c2;border-radius:999px;background:#fff6f4;color:#9b4034;font:inherit;font-size:17px;line-height:1;font-weight:850;white-space:nowrap;cursor:pointer}
.unsent[hidden],.btn-send[hidden]{display:none!important}
/* UI7 S0d（REWORK#5で app/ の実行時CSSから**正本のここへ**移設）:
* 固定ヘッダを 320〜600px の全幅で1行にする。従来は ≤500px で
* 「ブランド＋共有＋⚙」／「同期チップ（＋未送信）」の2段グリッドだったが、豊さんの本番f
* （390/470px）で同期チップが2行目に落ちるので「1行・高さ56px」に組み替えた。
* ・並びは 左=ブランド ／ 右=共有・⚙・未送信・同期チップ
* ・日付は日付帯（全タブ共通）が持つので、ヘッダのパック切替ボタンは出さない
* ・同期チップは状態語だけ。括弧の理由（rev・確認時刻）はタップで出す（main.js の ensureUi3Shell）
* ・360px未満はチップを丸だけ（色で状態）／未送信がある狭い端末でも語を落として1行を守る
* .shell-meta は display:contents でフレックスに溶かす＝index.html のDOMは触らずに配置だけ変える。
* 未送信は absolute（本文の上に浮く）をやめ、1行の実体として置く＝本文と重ならない。
* 高さの定数 --hdr-h:56px は app/views/timeline-board.js の :root（日付帯の貼り付き位置と同じ定数）。 */
/* UI8 O9: ボタン間は8px（左右の余白16pxは index.html の意匠層が持つ＝後勝ちで効く方に書く）。 */
.hdr{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;row-gap:0;padding-left:16px;padding-right:16px}
.shell-meta{display:contents}
.shell-brand{order:0;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:19px}
.shell-share{order:2;flex:0 0 38px;width:38px;height:38px;border-radius:10px}
.shell-settings{order:3;flex:0 0 38px;width:38px;height:38px;border-radius:10px}
/* UI10「最新」: 現在の工程が画面外の間だけ出る（旧・会場見出しの◎の置き場所）。
* 常に出さない＝320pxでヘッダの1行を壊さない。 */
/* 2026-09-12 豊さん「言葉かマークか」「表示位置も」→ マークだけ・右下に浮かせる（地図アプリの現在地ボタンと同じ場所）。
* ヘッダの器（.shell-meta）に置いたまま position:fixed で右下へ。現在の工程が画面外の間だけ出る条件は従来どおり。 */
.shell-latest{position:fixed;right:max(14px,calc((100vw - 640px)/2 + 14px));bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);z-index:22;
width:56px;height:56px;padding:0;border:1px solid var(--bg-hair-2);border-radius:50%;background:#fff;color:var(--c-now);
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(19,35,63,.18)}
.shell-latest>.ico{color:var(--c-now);width:26px;height:26px}
.shell-latest>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shell-latest[hidden]{display:none!important}
.shell-latest:active{background:#f2f6fc}
/* ［最新］が出ている間はワードマークを引っ込める（場所は空けたまま）。
* 390pxで［最新］を足すと 'ZipFlow Ops' が 'Z…' に潰れるので、**アプリ名より帰り道**を採る。
* ヘッダそのものが隠れる下スクロール中（#28）と同じ考え方＝現場に要る物だけを残す。 */
.shell-pack{display:none!important}
/* 詳細度を上げる＝progress.js が実行時に差し込む .p4-pending{position:absolute;top:58px}
* （後勝ちで .unsent を上書きする）に負けないため。absolute のままだとチップに重なる。 */
.hdr .unsent{order:4;position:static;top:auto;right:auto;justify-self:auto;flex:0 0 auto;display:inline-flex;align-items:center;min-height:0;height:34px;padding:0 8px}
.hdr .chip{order:5;justify-self:auto;flex:0 0 auto;height:34px;padding:0 12px;cursor:pointer} /* UI8 O9: 同期チップの左右余白12px */
.hdr .chip .chip-why{display:none}
@media(max-width:479px){.hdr.hdr-unsent .chip .chip-state{display:none}.hdr.hdr-unsent .unsent{padding:0 6px}}
@media(max-width:359px){.hdr .chip .chip-state{display:none}.hdr{gap:6px}.shell-brand{font-size:17px}}
/* ================= 9/15 mock6 ヘッダー（6のモック・豊さん「今、画像に忠実に」） =================
* 変えたのは**見た目だけ**。並び（共有・⚙・同期札）・押した先・読み上げ・隠す条件は1つも触らない。
* ・地 … ほんのり青のグラデーション（index.html の意匠層）＋薄い斜めの帯1本（::before）
* ・左 … ワードマーク26px の直下にタグライン（12〜13px・添え字なので17px床の例外）
* ・右 … 44×44 の白い角丸（枠1px #dfe6f0・角丸12px）が3つ＝共有・⚙・「● 最新」札
* ・同期札 … 上段「● 最新」／下段に小さく「HH:MM 更新」。下段は **CSSの content** で出す
* ＝チップの textContent は packsync の文言のまま（test/verify_packsync.py (e)）
* 高さ 80px は --hdr-h（app/views/timeline-board.js の :root）が持つ＝日付帯の貼り付き位置と連動。
* 後から宣言して勝たせる（上の UI7/UI8 の節は書き換えない＝変えた所だけを読める形で残す）。 */
.hdr{gap:8px;align-items:center;border-bottom:0;box-shadow:none}
/* 薄い斜めの帯を1本だけ（派手にしない）。z-index:-1 ＝ .hdr の地の上・中身の下に敷く
* （.hdr は position:fixed + z-index で積み重ね文脈を作っているので外へは抜けない）。
* 押せる物の上に乗らないよう当たり判定は殺す。 */
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(118deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.62) 45%,
rgba(255,255,255,.62) 56%,rgba(255,255,255,0) 65%)}
/* ワードマーク＋タグラインの2段。2語は .shell-word の中で1行に保つ（縮む時は…で切る）。 */
.hdr .shell-brand{order:0;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
align-items:flex-start;justify-content:center;gap:1px;overflow:hidden;
font-size:24px;font-weight:900;letter-spacing:-.03em;line-height:1.1;color:#1a2b5a}
.hdr .shell-brand>.shell-word{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 「Ops」だけを青にする。.shell-brand span:last-child（UI7 の節）だとタグラインも拾うので、
* ワードマークの器（.shell-word）の中に限る。 */
.hdr .shell-word>span:last-child{color:#0047b3;font-weight:900}
.hdr .shell-brand>span.shell-tagline{color:#5f6d83;font-weight:600}
/* タグラインは「読む字」ではなく添え字＝17px床の例外（発注で明示）。 */
.hdr .shell-brand>.shell-tagline{max-width:100%;font-size:13px;font-weight:600;letter-spacing:0;
line-height:1.15;color:#5f6d83;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 右の3つは同じ形（44×44・角丸12px・白地・枠1px）。並び順（order）は UI7 の節のまま。 */
.hdr .shell-share,.hdr .shell-settings{flex:0 0 44px;width:44px;height:44px;
border-radius:12px;border:1px solid #dfe6f0;background:#fff}
/* 同期札。上段＝丸＋状態語／下段＝最終同期時刻。高さは他の2つと同じ44px。 */
.hdr .chip{height:44px;min-width:44px;padding:0 10px;border-radius:12px;border:1px solid #dfe6f0;
background:#fff;display:grid;grid-template-columns:auto auto;align-items:center;
justify-items:center;column-gap:6px;row-gap:1px;line-height:1.05}
.hdr .chip::before{width:9px;height:9px}
.hdr .chip .chip-body{grid-column:2}
.hdr .chip .chip-state{font-size:17px;font-weight:900}
/* 「10:50 更新」。attr() で出す＝el.chip.textContent には入らない（上の節の理由）。
* 11px は時刻の添え字＝17px床の例外（発注で明示）。 */
.hdr .chip::after{content:attr(data-when);grid-column:1 / -1;font-size:11px;font-weight:700;
letter-spacing:0;color:#5f6d83;white-space:nowrap;font-variant-numeric:tabular-nums}
.hdr .chip:not([data-when])::after{display:none}
.hdr .chip[data-sync="update"]{background:#fff8ef}
/* 狭い端末（オフラインの長い状態語＋3つの的）でワードマークが潰れすぎないように字を落とす。
* タグラインは12px＝発注の下限。 */
/* 375px はワードマーク（23px）とタグライン（12px）で横幅ぴったり。タグラインは字間を詰めて
* 「現場を、もっとスムーズに」を…にせず収める（12字×12px＝144px / 使える幅 132px）。 */
@media(max-width:389px){.hdr .shell-brand{font-size:23px}
.hdr .shell-brand>.shell-tagline{font-size:12px;letter-spacing:-.055em}}
/* 8検収 9/15: 375px で状態語が長い時（オフライン・更新あり）にワードマークが「ZipFlow…」に潰れた。
* 状態語だけ 14px に落として同期札を細くする（「最新」の時は 17px のまま）。 */
.hdr .chip:not([data-sync="fresh"]) .chip-state{font-size:14px}
.hdr .chip:not([data-sync="fresh"]){padding:0 8px}
@media(max-width:359px){.hdr .shell-brand{font-size:20px}.hdr .chip{padding:0 8px}}
/* ================= ボタン（主要ボタンは60px以上） ================= */
.btn{
appearance:none;background:var(--c-bg);color:var(--c-fg);
border:1.5px solid var(--bg-hair-2);border-radius:14px;
font:inherit;font-size:18px;font-weight:700;
min-height:60px;padding:0 16px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
text-decoration:none; /* の下線が文字を横切るのを止める */
box-shadow:var(--shadow-1);
transition:transform .12s var(--ease-out),background-color .12s var(--ease-out),box-shadow .12s var(--ease-out);
}
.btn>.ico{color:var(--c-now)}
.btn:active{background:var(--bg-sunken);transform:translateY(1px);box-shadow:none}
.btn:disabled{color:var(--c-fg-sub);border-color:var(--bg-hair);background:var(--bg-sunken);cursor:default;box-shadow:none}
.btn:disabled>.ico{color:var(--c-fg-sub)}
.btn-primary{background-color:var(--c-now);background-image:linear-gradient(180deg,#0a51b8,var(--c-now));
color:#fff;border-color:transparent;
font-weight:800;box-shadow:0 2px 5px rgba(0,71,179,.24),0 6px 16px rgba(0,71,179,.18)}
.btn-primary>.ico{color:#fff}
.btn-primary:active{background:var(--bg-brand)}
.btn-primary:disabled{background:var(--bg-sunken);color:var(--c-fg-sub);border-color:var(--bg-hair)}
.btn-danger{color:var(--c-alert);border-color:var(--c-alert)}
.btn-block{display:flex;width:100%;margin:8px 0}
.btn-row{display:flex;gap:8px}
.btn-row>.btn{flex:1 1 0;min-width:0}
.btn-row>.btn-2{flex:2 1 0}
:focus-visible{outline:3px solid var(--c-now);outline-offset:2px}
.btn-primary:focus-visible{outline-color:var(--c-fg)}
/* ================= 本文の器 ================= */
.view{padding:0 12px 28px;min-height:60vh}
.loading{padding:28px 0;font-weight:700}
/* 画面の頭（モックの「ZipFlow Field」＋大見出し＋文脈チップ）。
* ヘッダに入れず本文の先頭に置く＝スクロールで送れる。固定領域は計器だけに使う。 */
.head{padding:18px 2px 14px}
.head-brand{
font-size:17px;font-weight:800;color:var(--c-brand);letter-spacing:.01em;margin-bottom:2px;
}
.head-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.head-row h1{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.head-chips{display:flex;gap:6px;flex:0 1 auto;min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-end}
.hchip{
display:inline-flex;align-items:center;gap:5px;
font-size:17px;font-weight:700;line-height:1;padding:9px 13px;border-radius:var(--r-pill);
background:var(--c-now);color:#fff;white-space:nowrap;text-decoration:none;
box-shadow:0 1px 3px rgba(0,71,179,.22);
}
.hchip>.ico{color:#fff}
.hchip-out{background:var(--c-bg);color:var(--c-fg);border:1.5px solid var(--bg-hair-2)}
.hchip-out>.ico{color:var(--c-now)}
/* ================= パック切替（LIVE / タイムライン / 台本 共通） ================= */
.pack-switch-btn{
appearance:none;border:1.5px solid var(--bg-hair-2);border-radius:13px;background:#fff;color:var(--c-fg);
min-height:44px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
font:inherit;font-size:17px;font-weight:800;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:var(--shadow-1);
}
.pack-switch-btn>.ico{color:var(--c-now)}
.pack-switch-btn:active{background:var(--bg-sunken);transform:translateY(1px)}
.pack-switch-label{font-variant-numeric:tabular-nums}
.pack-switch-btn-compact{height:38px;min-height:38px;border-radius:12px;padding:0 9px;gap:5px;box-shadow:none}
.pack-viewing-banner{
margin:0 0 12px;padding:10px 12px;border:1px solid #e3b96d;border-radius:14px;background:#fff8e9;
display:flex;align-items:center;justify-content:space-between;gap:10px;color:#6f4500;
}
.pack-viewing-copy{display:flex;align-items:center;gap:8px;min-width:0}
.pack-viewing-copy>.ico{flex:0 0 auto;color:#9a5d00}
.pack-viewing-copy strong{font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.pack-today-btn{
appearance:none;flex:0 0 auto;min-height:44px;padding:0 11px;border:1px solid #d7a34a;border-radius:11px;
background:#fff;color:#6f4500;font:inherit;font-size:17px;font-weight:850;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
}
.pack-today-btn>.ico{color:#8a5300}
/* ---- G2 シートが出ている間は下の画面を動かさない（発注 2026-09-04） ----
* 段の数を持つ app/dom.js が html と body の両方に付ける。html にも掛けるのは、表示領域の
* スクロールが**根**の overflow で決まるため（この html は overflow-x:clip なので body からは
* propagation しない＝body だけでは止まらない）。overscroll-behavior はブラウザ側の
* pull-to-refresh を切る＝下スワイプが「更新」に取られない。
* touch-action は触らない＝中身の縦スクロール・天気の帯の横流しを潰さない（発注 G2）。 */
html.zff-sheet-open,body.zff-sheet-open{overflow:hidden;overscroll-behavior:contain}
body.pack-picker-open{overflow:hidden}
.pack-picker-overlay{
position:fixed;inset:0;z-index:100;background:rgba(12,24,43,.42);display:flex;align-items:flex-end;justify-content:center;
padding:18px 12px max(12px,env(safe-area-inset-bottom));overscroll-behavior:contain;
}
.pack-picker-sheet{
width:min(640px,100%);max-height:min(82vh,760px);overflow:hidden;border-radius:22px 22px 16px 16px;background:#fff;
border:1px solid #dce3ed;box-shadow:0 18px 56px rgba(10,31,65,.25);display:flex;flex-direction:column;
overscroll-behavior:contain;
}
.pack-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:17px 16px 14px;border-bottom:1px solid var(--bg-hair)}
.pack-picker-head>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pack-picker-head strong{font-size:21px;line-height:1.25}
.pack-picker-head span{font-size:17px;color:var(--c-fg-sub)}
.pack-picker-close{appearance:none;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--bg-hair-2);border-radius:12px;background:#fff;color:var(--c-fg);font-size:28px;line-height:1;cursor:pointer}
.pack-picker-return{appearance:none;margin:12px 14px 0;min-height:52px;border:1.5px solid #9db9e9;border-radius:13px;background:#f4f8ff;color:var(--c-now);font:inherit;font-size:17px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.pack-picker-list{overflow:auto;padding:12px 14px 16px;overscroll-behavior:contain}
.pack-picker-group+.pack-picker-group{margin-top:16px}
.pack-picker-date{height:36px;display:flex;align-items:center;gap:8px;padding:0 4px 5px;border-bottom:1px solid var(--bg-hair)}
.pack-picker-date strong{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
.pack-picker-today{padding:4px 8px;border-radius:999px;background:var(--bg-now);color:var(--c-now);font-size:17px;font-weight:800;line-height:1}
.pack-picker-row{
appearance:none;width:100%;min-height:64px;padding:8px 10px;border:0;border-bottom:1px solid var(--bg-hair);background:#fff;color:var(--c-fg);
display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;font:inherit;cursor:pointer;
}
.pack-picker-row:last-child{border-bottom:0}
.pack-picker-row:active{background:var(--bg-sunken)}
.pack-picker-row.is-current{background:#f1f6ff}
.pack-picker-row:disabled{opacity:1;cursor:default}
.pack-picker-team{font-size:18px;font-weight:900;color:var(--c-now)}
.pack-picker-main{min-width:0;display:flex;align-items:baseline;gap:8px}
.pack-picker-main strong{font-size:18px;font-weight:850}
.pack-picker-main small{font-size:17px;color:var(--c-fg-sub)}
.pack-picker-current{font-size:17px;font-weight:850;color:var(--c-now);white-space:nowrap}
/* UI16: チーム切替の行は「チーム名」＋右端の合図（＞／表示中）の2列だけ。 */
.pack-picker-row.is-team{grid-template-columns:minmax(0,1fr) auto;min-height:60px;padding:8px 12px}
.pack-picker-row.is-team .pack-picker-team{font-size:20px;color:var(--c-fg)}
.pack-picker-row.is-team.is-current .pack-picker-team{color:var(--c-now)}
.pack-picker-row>.ico{color:var(--c-now)}
.pack-picker-empty{padding:18px 6px;font-size:17px;color:var(--c-fg-sub)}
/* ---- UI18: シートは2段（上段＝イベント／下段＝チーム） ----
* 段の見出しは小さな灰の1行（17px床は「押す物・読む字」に掛かる規約なので、区切りの
* ラベルはそれより小さくてよい／ここでは 17px を保って字を落とさない）。
* 1イベントしか無い現場では上段ごと出ないので、この節は1px も画面に出ない。 */
.pack-picker-sec+.pack-picker-sec{margin-top:14px}
.pack-picker-sec-head{padding:0 4px 6px;font-size:17px;font-weight:900;color:var(--c-fg-sub)}
.pack-picker-row.is-event{grid-template-columns:minmax(0,1fr) auto;min-height:60px;padding:8px 12px}
.pack-picker-event{font-size:20px;font-weight:900;color:var(--c-fg);min-width:0;overflow:hidden;text-overflow:ellipsis}
.pack-picker-row.is-event.is-current .pack-picker-event{color:var(--c-now)}
/* 「その他」シートの行（下タブが6つ以上のプロファイルでだけ出る＝いまは出ない）。 */
.pack-picker-row.is-more{grid-template-columns:minmax(0,1fr) auto;min-height:60px;padding:8px 12px;text-decoration:none}
.pack-picker-more{display:flex;align-items:center;gap:9px;min-width:0;font-size:20px;font-weight:900;color:var(--c-fg)}
.pack-picker-more>.ico{color:var(--c-now);flex:0 0 auto}
/* 下タブは a だけでなく button も取り得る（「その他」・重ねて出す画面）。素の button の
* 地色と枠を消して a と同じ見え方にする＝タブの並びに継ぎ目が出ない。 */
button.nav-item{appearance:none;background:none;border:0;font:inherit;font-size:17px;font-weight:800;letter-spacing:-.03em;cursor:pointer}
@media(max-width:430px){
.pack-switch-btn{max-width:100%;padding:0 9px}.pack-switch-btn-compact{max-width:126px}.pack-switch-label{overflow:hidden;text-overflow:ellipsis}
.pack-viewing-banner{align-items:stretch;flex-direction:column}.pack-today-btn{width:100%;justify-content:center;min-height:48px}
.pack-picker-overlay{padding-left:0;padding-right:0;padding-bottom:0}.pack-picker-sheet{max-height:88vh;border-radius:22px 22px 0 0;border-bottom:0}
.pack-picker-row{grid-template-columns:64px minmax(0,1fr) auto}.pack-picker-row.is-team{grid-template-columns:minmax(0,1fr) auto}.pack-picker-main{flex-direction:column;align-items:flex-start;gap:0}
.pack-picker-row.is-event,.pack-picker-row.is-more{grid-template-columns:minmax(0,1fr) auto}
}
/* ================= 移動支援シート（Phase 1・純正ナビ／Google Maps） =================
* 経路アイコンを押すと下から出る。ボタンは2つだけ・52px以上・17px以上・線画アイコン。
* 第一ボタン（左上＝最初に目が行く位置）は Google Maps＝今まで1タップで開けていたものを探させない。
*/
body.travel-open{overflow:hidden}
.travel-overlay{
position:fixed;inset:0;z-index:1100;background:rgba(10,23,45,.34);
display:flex;align-items:flex-end;justify-content:center;overscroll-behavior:contain;
}
.travel-sheet{
width:min(430px,100%);padding:9px 16px calc(14px + env(safe-area-inset-bottom));
border-radius:14px 14px 0 0;background:#fff;border-top:1px solid var(--bg-hair-2);
box-shadow:0 -6px 18px rgba(8,24,48,.13);display:grid;gap:8px;max-height:88vh;overflow:auto;
overscroll-behavior:contain;
}
.travel-grabber{width:36px;height:3px;margin:0 auto 3px;border-radius:2px;background:var(--bg-hair-2)}
.travel-title{font-size:21px;font-weight:900;line-height:1.25;color:var(--c-fg);padding-bottom:6px;border-bottom:2px solid var(--c-brand)}
.travel-addr{font-size:17px;line-height:1.4;color:var(--c-fg-sub)}
.travel-btns{display:grid;gap:8px}
.travel-btn{
min-height:56px;padding:0 12px;border:1.5px solid #b9c9e2;border-radius:11px;background:#fff;
color:var(--c-now);font:inherit;font-size:18px;font-weight:900;text-decoration:none;
display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
}
.travel-btn:active{background:var(--bg-sunken)}
.travel-btn.is-navicon{border-color:#9db9e9;background:#f4f8ff}
.travel-none{min-height:52px;display:flex;align-items:center;font-size:17px;line-height:1.4;color:var(--c-fg-sub)}
.travel-more:empty{display:none}
/* 移動支援の天気は補助1行だけ（モック v13 の .drive-context）。橙は白地で 4.5:1 を満たす色。 */
.drive-context{display:flex;align-items:center;gap:8px;padding-top:11px;
color:var(--c-fg-sub);font-size:17px;font-weight:800;line-height:1.35}
.drive-context>.ico{flex:0 0 19px;color:#8f3e09}
.drive-context .weather{color:#8f3e09;font-weight:900;white-space:nowrap}
.travel-close{min-height:52px;border:0;border-radius:10px;background:transparent;color:var(--c-fg-sub);font:inherit;font-size:17px;font-weight:900;cursor:pointer}
.travel-sheet a:focus-visible,.travel-sheet button:focus-visible{outline:3px solid var(--c-now);outline-offset:2px}
/* ---- UI10「目的地を選ぶ移動支援」（6のモック v13 ②・豊さん 2026-09-03） ----
* 上段クイック入口のナビ矢印から開く形。既定（経路アイコンから開く1行き先の形）は上のまま。
* 節は罫で区切る（カードを積まない）。値はパックから引けるものだけ出す。
*/
.travel-btn.is-maps{background:var(--c-now);color:#fff;border-color:var(--c-now)}
.travel-btn.is-maps>.ico{color:#fff}
.travel-sheet.is-picker{gap:2px}
.travel-dest{padding:5px 0 12px;border-bottom:1px solid var(--bg-hair-2)}
.travel-dest-title{font-size:18px;font-weight:900;line-height:1.3;margin-bottom:8px}
.travel-dest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.travel-dest-btn{
min-height:54px;padding:0 11px;border:1px solid var(--bg-hair-2);border-radius:10px;background:#fff;
color:var(--c-fg);font:inherit;font-size:17px;font-weight:900;text-align:left;cursor:pointer;
display:flex;align-items:center;gap:7px}
.travel-dest-btn>.ico{color:var(--c-now);flex:0 0 auto}
.travel-dest-btn>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.travel-dest-btn.is-selected{border-color:var(--c-now);background:#eef4fd;color:var(--c-now)}
.travel-mode{display:grid;grid-template-columns:64px 1fr 1fr;gap:8px;align-items:center;margin-top:10px}
.travel-mode-label{font-size:17px;font-weight:900;color:var(--c-fg-sub)}
.travel-mode-btn{
min-height:52px;border:1px solid var(--bg-hair-2);border-radius:9px;background:#fff;
color:var(--c-fg-sub);font:inherit;font-size:17px;font-weight:900;cursor:pointer}
.travel-mode-btn.is-selected{border-color:var(--c-now);background:#eef4fd;color:var(--c-now)}
.travel-picked{padding:12px 0 10px;border-bottom:1px solid var(--bg-hair-2)}
.travel-picked-name{font-size:20px;font-weight:900;line-height:1.3}
.travel-sheet.is-picker .travel-addr{margin:2px 0 0}
.travel-eta{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;
padding:12px 0;border-bottom:1px solid var(--bg-hair-2)}
.travel-eta-main{font-size:26px;font-weight:900;line-height:1.2;color:var(--c-now);font-variant-numeric:tabular-nums}
.travel-eta-diff{font-size:17px;font-weight:900;line-height:1.3;text-align:right;white-space:nowrap}
.travel-eta-diff.is-late{color:var(--c-warn)}
.travel-eta-diff.is-early{color:var(--c-done)}
.travel-eta-sub{font-size:17px;color:var(--c-fg-sub);font-weight:800;line-height:1.3;text-align:right;white-space:nowrap}
.travel-section{padding:13px 0;border-bottom:1px solid var(--bg-hair-2)}
.travel-section-head{margin:0 0 8px;font-size:18px;font-weight:900;line-height:1.3;color:var(--c-fg)}
.travel-section .travel-btns{gap:8px}
.travel-stops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.travel-stop{
min-height:52px;border:1px solid var(--bg-hair-2);border-radius:9px;background:#fff;
color:var(--c-now);font:inherit;font-size:17px;font-weight:900;text-decoration:none;
display:flex;align-items:center;justify-content:center;cursor:pointer}
.travel-stop:active{background:var(--bg-sunken)}
.travel-hint{font-size:17px;color:var(--c-fg-sub);font-weight:700;line-height:1.45;margin:8px 0 0}
/* ---- 寄り先（ルート沿いを動的に検索・整理メモ #54・2026-09-03） ----
* 種別は3列2段（給油の隣に銘柄）＝5種類ぜんぶが一目に入る。押せる所は52px以上・字は17px以上。
* 結果が無いときは .travel-stop-list ごとDOMに出さない（空の枠を置かない）。
*/
.travel-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
/* 3列×390px＝1列105px。「コンビニ」（17px太字で約68px）＋線画19px が入るよう
* 余白は詰める（縦スクロールバーが出る端末でも文字を削らない）。 */
.travel-kind{
min-height:52px;padding:0 5px;border:1px solid var(--bg-hair-2);border-radius:9px;background:#fff;
color:var(--c-now);font:inherit;font-size:17px;font-weight:900;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:4px}
.travel-kind>.ico{flex:0 0 auto}
.travel-kind>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.travel-kind:active{background:var(--bg-sunken)}
.travel-kind.is-selected{border-color:var(--c-now);background:#eef4fd}
/* 銘柄ボタンの ▾ は chev を90度倒して作る（新しいアイコンを増やさない）。 */
.travel-kind.is-brand{color:var(--c-fg-sub);font-size:17px}
.travel-kind-chev{transform:rotate(90deg)}
.travel-brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:7px}
.travel-brand{
min-height:52px;padding:0 8px;border:1px solid var(--bg-hair-2);border-radius:9px;background:#fff;
color:var(--c-fg);font:inherit;font-size:17px;font-weight:900;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.travel-brand.is-selected{border-color:var(--c-now);background:#eef4fd;color:var(--c-now)}
/* 1列のgridは既定で max-content＝行の中の nowrap（店名・寄り道分・営業）が畳めず、
* シートごと横スクロールする（390pxで実測 sw394/cw360）。上の .travel-kinds 等と
* 同じ minmax(0,1fr) を入れて列を器の幅に留める。 */
.travel-stop-list{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:9px}
/* 2026-09-11: 食事の行は下に 店ページ／ぐるなび／食べログ を並べる＝`` の入れ子は作れない
* ので、行そのものを div（縦積み）にして中の `` を分けた。枠・角丸・当たり判定（52px）は
* 行が持ち、押せる面の余白は中の .travel-stop-main へ移しただけ＝食事以外の見た目は変わらない。 */
.travel-stop-row{
min-height:52px;border:1px solid var(--bg-hair-2);border-radius:9px;background:#fff;
color:var(--c-fg);font:inherit;font-size:17px;font-weight:900;text-decoration:none;
display:flex;flex-direction:column;align-items:stretch;overflow:hidden}
.travel-stop-main{
min-height:52px;padding:0 11px;color:inherit;font:inherit;text-decoration:none;
display:flex;align-items:center;gap:8px}
.travel-stop-main:active,.travel-stop-row:active{background:var(--bg-sunken)}
/* 閉店中の行は既存の淡色（これより薄い文字は作らないと決めてある色）で引く＝新しい色は作らない。 */
.travel-stop-main.is-shut{color:var(--c-fg-sub)}
/* 「探しています…」と、0件・通信不可・会場から探した理由の1行。理由は折り返して全部読ませる。 */
.travel-stop-row.is-busy{padding:0 11px;color:var(--c-fg-sub);font-weight:800;
flex-direction:row;align-items:center}
.travel-stop-row.is-note{display:block;padding:12px 11px;color:var(--c-fg-sub);font-weight:800;
line-height:1.45}
.travel-stop-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.travel-stop-rate{flex:0 0 auto;color:var(--c-fg-sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.travel-stop-meta{flex:0 0 auto;color:var(--c-now);font-variant-numeric:tabular-nums;white-space:nowrap}
.travel-stop-open{flex:0 0 auto;color:var(--c-done);white-space:nowrap}
.travel-stop-open.is-shut{color:var(--c-fg-sub)}
/* 外部リンクの段。3列×52px＝1つ約115px（「ぐるなび」は17px太字で約68px）＝折れない。 */
.travel-stop-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
border-top:1px solid var(--bg-hair-2)}
.travel-stop-link{
min-height:52px;padding:0 4px;color:var(--c-now);font:inherit;font-size:17px;font-weight:900;
text-decoration:none;display:flex;align-items:center;justify-content:center;
min-width:0;overflow:hidden}
.travel-stop-link>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.travel-stop-link+.travel-stop-link{border-left:1px solid var(--bg-hair-2)}
.travel-stop-link:active{background:var(--bg-sunken)}
.travel-stop-fallback{
min-height:52px;margin-top:9px;border:1px solid var(--bg-hair-2);border-radius:9px;background:#fff;
color:var(--c-now);font:inherit;font-size:17px;font-weight:900;text-decoration:none;
display:flex;align-items:center;justify-content:center;gap:7px}
.travel-stop-fallback:active{background:var(--bg-sunken)}
@media(max-width:359px){
.travel-mode{grid-template-columns:52px 1fr 1fr;gap:6px}
.travel-stops{gap:5px}
.travel-kinds,.travel-brands{gap:5px}
.travel-kind{padding:0 5px;gap:3px}
.travel-eta-main{font-size:24px}
}
/* ================= カード ================= */
.card{
border:1px solid var(--bg-hair);border-radius:var(--r-card);background:var(--c-bg);
padding:16px;margin:0 0 14px;box-shadow:var(--shadow-1);
}
.card-hd{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.card-hd>.ico{color:var(--c-now)}
/* 見出しを値に従属させる（豊さん 2026-08-30 本番当日:「見出しのテキストが コンテンツを
* 邪魔してる気がする」→「短く＋小さく薄くして従属させる」に「そうですあってます」）。
* 本文18px/500・値19〜31px に対して、カード見出しは 17px（UI規約の下限）・700・--c-fg-sub。
* --c-fg-sub は「これより薄い文字は作らない」と決めてある既存の補助色（対白 9.7:1）＝
* 直射日光下で読める範囲のいちばん引いた所。新しい色・寸法・クラスは作っていない。 */
.card-hd h2,.card-hd h3{flex:1 1 auto;min-width:0;font-size:17px;font-weight:700;color:var(--c-fg-sub)}
.card-ct{ /* カード見出しの右端バッジ（0/3 完了 など） */
flex:0 0 auto;font-size:17px;font-weight:800;line-height:1;
padding:7px 11px;border-radius:8px;background:var(--bg-now);color:var(--c-now);
}
.card-warn{background:var(--bg-warn);border-color:#f2dcc4}
.card-warn .card-hd>.ico{color:var(--ico-warn)}
.card-warn .card-hd h2{color:var(--c-warn)}
.card-warn .card-ct{background:var(--c-bg);color:var(--c-warn);border:1.5px solid #eccfae;
display:inline-flex;align-items:center;gap:5px}
.card-warn .card-ct>.ico{color:var(--ico-warn)}
.card-tight{padding:14px 14px 4px}
.card-flush{padding:14px 0 2px} /* 行が縁まで伸びるカード */
.card-flush>.card-hd{padding:0 14px}
/* カードの中の区分ラベル（会場「現場で追加した注意」・記録「手動で切り替える」）も同じ扱い。 */
.card h3{font-size:17px;font-weight:700;color:var(--c-fg-sub)}
/* ただし行の中身（.body）に置いた h3 は見出しではなく**値**（現調の種別名）＝従属させない。 */
.card .body h3{font-size:18px;font-weight:800;color:var(--c-fg)}
/* 箇条書き（注意事項）。中黒は疑似要素で作る＝行頭が揃う */
.bul{list-style:none;margin:0;padding:0}
.bul>li{position:relative;padding:5px 0 5px 17px;font-size:18px;line-height:1.45}
.bul>li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;
background:currentColor;opacity:.65}
.card-warn .bul>li{color:var(--c-fg)}
/* ================= 主計器（進行画面の紺パネル・モック01の再現） ================= */
.hero{
background-color:var(--bg-brand); /* 検証器と非対応環境の正。gradientは上掛け */
background-image:linear-gradient(168deg,#0b54b8 0%,var(--bg-brand) 46%,var(--bg-brand-d) 100%);
color:#fff;border-radius:18px;padding:16px;margin:0 0 14px;box-shadow:var(--shadow-2);
}
.hero-top{display:flex;align-items:stretch;gap:12px}
.hero-cell{flex:1 1 0;min-width:0}
.hero-cell+.hero-cell{border-left:1px solid rgba(255,255,255,.28);padding-left:12px}
.hero-k{display:flex;align-items:center;gap:5px;font-size:17px;font-weight:700;color:var(--ink-brand);margin-bottom:3px}
.hero-k>.ico{color:var(--ink-brand)}
.hero-v{font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}
.hero-phase{ /* 「搬入・設営中」の白枠 */
display:inline-block;font-size:21px;font-weight:800;line-height:1.15;
border:1.5px solid rgba(255,255,255,.85);border-radius:11px;padding:7px 11px;margin-top:2px;
}
.hero-div{height:1px;background:rgba(255,255,255,.28);margin:13px 0 11px}
/* 残り時間は全幅1行（390pxで右2枠と同居させると「あと3日…」が縦に潰れる＝実測）。
* 時刻2枠はその下の段で左右に並べる＝モック01の3計器を縦2段に組み替えた現場版 */
.hero-stats{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;row-gap:12px}
.hero-count{flex:1 1 100%;min-width:0}
.hero-num{font-size:46px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--ink-num)}
.hero-numline{display:flex;align-items:baseline;gap:4px;font-size:19px;font-weight:800;flex-wrap:wrap}
.hero-stat{flex:1 1 0;min-width:0;text-align:left}
.hero-stat+.hero-stat{border-left:1px dashed rgba(255,255,255,.3);padding-left:12px}
.stat-k{font-size:17px;font-weight:700;color:var(--ink-brand)}
.stat-v{font-size:24px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.hero-note{margin-top:10px;font-size:17px;font-weight:700;color:var(--ink-brand)}
/* ================= 行リスト ================= */
.rows{list-style:none;margin:0;padding:0}
.rows>li{
display:flex;gap:10px;align-items:center;
min-height:60px;padding:11px 14px;border-top:1px solid var(--bg-hair);
}
.card-flush>.rows>li:first-child,.rows.rows-plain>li:first-child{border-top:none}
.rows.rows-plain>li{padding-left:0;padding-right:0}
.body{flex:1 1 auto;min-width:0}
.row-t{flex:0 0 auto;font-weight:800;font-size:19px;letter-spacing:-.01em}
.row-title{font-size:18px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.t{flex:0 0 4.6em;font-weight:800}
.chev{flex:0 0 auto;color:var(--bg-hair-2)}
/* 行全体を叩ける導線（60px確保）。にも