/* ダークテーマ・変更時だけ描画（設計書「端末のバッテリー」）。動きは「操作の結果を伝える一度きりの短いもの」だけ（節 2b）。
   節：1 トークン / 2 基本要素 / 2b 動き / 3 枠（ヘッダー・ナビ・トースト）/ 4 共通部品 / 5 画面ごと（.view-<route> で囲う）
   色・寸法はトークンで管理し、画面の CSS では直接の色指定を避ける（docs/ui.md） */

/* ---- 1 トークン ---- */
:root {
  color-scheme: dark;
  --bg: #111;
  --surface: #1b1b1b;
  --surface-2: #262626;
  --line: #333;
  --fg: #eee;
  --muted: #9a9a9a;
  --accent: #4ea1ff;
  --on-accent: #000;
  --ok: #3fb950;
  --half: #d6a400;
  --low: #e5534b;
  --warn: #ffb020;     /* 注意（手順の「こぼれやすい」など） */
  --out: #666;
  --radius: 10px;
  --gap: 12px;
  --tap: 44px;          /* 押せる要素の最小の高さ */
  --tap-glove: 52px;    /* 手袋で押す所（作業画面・手順のパネル）の最小の高さ */
  --press: .96;         /* 押した瞬間に縮める割合（手袋でも押せたと分かるように） */
  --bar-h: 48px;        /* sticky ヘッダーの高さの目安（下の sticky 要素の位置合わせ用） */
  --menu-btn-min: 180px;/* レジのメニューボタンの最小幅（列数がここで決まる。3品なら横1列） */
  --menu-btn-h: 200px;
  --menu-name-size: 30px;
  --menu-qty-size: 26px;
  --menu-tint: 22%;    /* レジのボタンの背景に混ぜる品目の色の割合。上げると文字（特に「残りわずか」）が読みにくくなる */
  --issued-size: clamp(56px, 16vw, 112px);
  --work-card-min: 220px;/* 作業画面のカードの最小幅 */
  --work-no-size: 30px;
}
/* 在庫レベル → --lv。部品は var(--lv) で色を取る */
.lv-unset { --lv: var(--out); }
.lv-ok { --lv: var(--ok); }
.lv-half { --lv: var(--half); }
.lv-low { --lv: var(--low); }
.lv-out { --lv: var(--out); }

/* ---- 2 基本要素 ---- */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 16px/1.5 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; -webkit-tap-highlight-color: transparent; }
#app { min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }

button { font: inherit; color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; min-height: var(--tap); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button:active { border-color: var(--accent); }
button:disabled { opacity: .4; }
button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
button.danger { color: var(--low); }
[data-hold] { -webkit-touch-callout: none; }
form { display: grid; gap: var(--gap); }
label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
input, select { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-height: var(--tap); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: normal; }

/* ---- 2b 動き ----
   操作の結果を伝える一度きりの短いものだけ。繰り返す・ずっと動くもの（点滅・回転）は作らない（電池を使い続けるため）。
   transform / opacity / 背景色だけを動かし、OS の「視差効果を減らす」「アニメーションを減らす」では止める */
@media (prefers-reduced-motion: no-preference) {
  button, .wcard { transition: transform 80ms ease-out; }
  button:active:not(:disabled), .wcard:active { transform: scale(var(--press)); }
  .wcard.is-fresh { animation: fresh-new 1.2s ease-out; }
  .wcard.is-done.is-fresh { animation-name: fresh-done; }
  .issued-no.is-fresh { animation: pop 240ms ease-out; }
}
@keyframes fresh-new { from { background-color: color-mix(in srgb, var(--accent) 45%, var(--surface)); } }
@keyframes fresh-done { from { background-color: color-mix(in srgb, var(--ok) 45%, var(--surface)); } }
@keyframes pop { from { transform: scale(.8); opacity: .3; } }

/* ---- 3 枠 ---- */
.bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-height: var(--bar-h); padding: calc(6px + env(safe-area-inset-top)) 16px 6px; background: var(--bg); border-bottom: 1px solid var(--line); }
.bar-end { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: flex-end; margin-left: auto; }
.pill { padding: 2px 10px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); }
.conn-online { border-color: var(--ok); color: var(--ok); }
.conn-connecting { border-color: var(--half); color: var(--half); }
.conn-offline { border-color: var(--low); color: var(--low); }
.pill.warn { background: var(--half); color: #000; border-color: var(--half); }
/* ヘッダーのボタン（インストール・常時点灯・全画面・更新）。on＝有効（緑）、wait＝ON だがまだ有効でない（黄） */
.pill-btn { min-height: 36px; padding: 2px 12px; color: var(--muted); background: transparent; white-space: nowrap; }
.pill-btn[aria-pressed]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; border: 1.5px solid currentColor; vertical-align: 0; }
.pill-btn.on { color: var(--ok); border-color: var(--ok); }
.pill-btn.on[aria-pressed]::before { background: currentColor; }
.pill-btn.wait { color: var(--half); border-color: var(--half); }
.pill-btn.is-update { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 700; }


.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.tabs a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); text-decoration: none; padding: 0 14px; border-radius: 8px; white-space: nowrap; }
.tabs a.on { color: var(--fg); background: var(--surface); font-weight: 700; }
.tabs .count { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; }
.tabs .count.warn { background: var(--low); color: #fff; }
@media (max-width: 600px) {
  /* スマホでもタブが全部入るように詰める。ヘッダーのボタンも小さめに */
  .bar { padding-left: 10px; padding-right: 10px; }
  .pill-btn { min-height: 32px; padding: 2px 9px; font-size: 12px; }
  .tabs { gap: 2px; padding: 6px 8px; }
  .tabs a { padding: 0 9px; }
}

.view { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 960px; margin: 0 auto; }

.toast { position: fixed; z-index: 10; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: var(--radius); background: var(--fg); color: var(--bg); font-weight: 600; }
.toast:empty { display: none; }

/* ---- 4 共通部品（src/client/ui/parts.ts） ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card h2 { margin: 0 0 12px; font-size: 17px; }
.muted { color: var(--muted); font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

.meter { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--lv); }

.stock-chip { display: inline-grid; grid-template-columns: auto 64px auto; gap: 6px; align-items: center; font-size: 13px; }
.stock-chip-name { color: var(--muted); }
.stock-chip-num { color: var(--lv); font-variant-numeric: tabular-nums; }
.stock-chip.lv-unset .stock-chip-num { color: var(--muted); }

.badge { display: inline-block; font-size: 13px; line-height: 1.6; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.badge.st-new { color: var(--fg); }
.badge.st-cooking { border-color: var(--half); color: var(--half); }
.badge.st-done { border-color: var(--ok); color: var(--ok); }
.badge.st-cancel { color: var(--low); }

/* ---- 5 画面ごと ---- */

/* デバッグ（src/client/ui/debug.ts） */
tr[class*="lv-"] td:last-child { color: var(--lv); }
.orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.orders li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.orders li button { min-height: 36px; padding: 4px 10px; }
.orders .st { font-size: 13px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line); }
.st-done .st { border-color: var(--ok); color: var(--ok); }
.st-cancel { opacity: .5; }

/* レジ（src/client/ui/register.ts）
   スマホ縦：メニュー → カート（画面下に固定）。幅 720px 以上：左メニュー・右カートの2列 */
.view-register { max-width: 1280px; padding-bottom: 0; }
.reg { display: grid; gap: var(--gap); align-items: start; }
.reg-main { display: grid; gap: var(--gap); }
.reg-stock { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.reg-stock:empty { display: none; }

.reg-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--menu-btn-min), 1fr)); gap: 10px; }
.mbtn { position: relative; display: grid; grid-template-rows: 1fr auto auto auto; gap: 2px; min-height: var(--menu-btn-h); padding: 16px 16px 14px 20px; text-align: left; background: var(--surface); border-left: 8px solid var(--item, var(--line)); }
/* 背景に品目の色を薄く混ぜる（接客中に押す品目を色で見分ける）。color-mix 非対応の端末は上の無地 */
.mbtn[style*="--item"] { background: color-mix(in srgb, var(--item) var(--menu-tint), var(--surface)); }
.mbtn:active { border-color: var(--fg); border-left-color: var(--item, var(--line)); }
.mbtn-name { font-size: var(--menu-name-size); font-weight: 800; line-height: 1.2; }
.mbtn-price { color: var(--muted); font-size: 18px; }
.mbtn-note { min-height: 1.2em; font-size: 14px; line-height: 1.2; color: var(--lv); font-weight: 700; }
.mbtn .meter { margin-top: 4px; }
.mbtn .meter.lv-unset { visibility: hidden; }
.mbtn-qty { position: absolute; top: 10px; right: 10px; min-width: 44px; padding: 2px 10px; font-size: var(--menu-qty-size); line-height: 1.2; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.mbtn.lv-low { box-shadow: inset 0 0 0 2px var(--low); }
.mbtn.is-out { opacity: .45; background: var(--surface); }
.mbtn.is-out .mbtn-name { text-decoration: line-through; }

.reg-cart { position: sticky; bottom: 0; z-index: 1; max-height: 60dvh; overflow-y: auto; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: var(--radius) var(--radius) 0 0; }
.cart-empty { margin: 0; }
.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cart-lines li { display: grid; grid-template-columns: 1fr auto 5em; gap: 8px; align-items: center; }
.cart-name { overflow-wrap: anywhere; }
.cart-qty { display: inline-flex; align-items: center; gap: 4px; }
.cart-qty b { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.cart-qty button { min-width: var(--tap); padding: 0; font-size: 20px; }
.cart-sub { text-align: right; font-variant-numeric: tabular-nums; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--line); }
.cart-total b { font-size: 28px; font-variant-numeric: tabular-nums; }
.cart-ticket input { font-size: 24px; text-align: center; }
.cart-buttons { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.cart-buttons button { min-height: 56px; font-size: 18px; }
/* お預かり：押した紙幣を足していき、お釣りを出す */
.cart-pay { display: grid; gap: 6px; }
.pay-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pay-buttons button { min-height: 48px; padding: 4px; font-variant-numeric: tabular-nums; }
.pay-result { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 0; min-height: 44px; font-variant-numeric: tabular-nums; }
.pay-result.muted { font-size: 13px; }
.pay-change b, .pay-short b { font-size: 26px; }
.pay-change b { color: var(--ok); }
.pay-short b { color: var(--low); }
.pay-reset { margin-left: auto; min-height: 36px; padding: 2px 10px; font-size: 14px; }

.issued { display: grid; text-align: center; }
.issued p { margin: 0; }
.issued-label { color: var(--muted); }
.issued-no { font-size: var(--issued-size); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.issued-items { overflow-wrap: anywhere; }
.issued-total { font-size: 20px; }
.issued-change { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: center; font-variant-numeric: tabular-nums; }
.issued-change b { font-size: 40px; }
.issued-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.issued button { min-height: 56px; font-size: 18px; }
.issued.is-cancel .issued-no { color: var(--muted); text-decoration: line-through; }

.reg-recent { text-align: left; }
.reg-recent h3 { margin: 0 0 4px; font-size: 13px; font-weight: normal; color: var(--muted); }
.reg-recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.reg-recent li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }

@media (min-width: 720px) {
  .view-register { padding-bottom: 16px; }
  .reg { grid-template-columns: 1fr minmax(300px, 380px); }
  .reg-cart { top: calc(var(--bar-h) + 16px); bottom: auto; max-height: calc(100dvh - var(--bar-h) - 32px); border-radius: var(--radius); }
}

/* 作業（src/client/ui/work.ts）
   タブレット基準：受付中 3 : 完成 2 の2列、列の中はカードを自動で折り返す。完成から1分たった注文は完成列の下の折りたたみへ。
   マウスのある端末（PC）はカードに「完成」ボタン。幅 600px 以下（スマホ）は詰めて2列のまま */
.view-work { max-width: none; }
.work { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.work-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); min-width: 0; }
.work-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; min-height: var(--tap-glove); }
.work-sum { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.work-sum-item { display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap; padding: 4px 10px; border-radius: 8px; background: var(--surface); border-left: 4px solid var(--item, var(--line)); }
.work-sum-item b { font-size: 20px; font-variant-numeric: tabular-nums; }
.work-undo { display: flex; gap: 8px; align-items: center; white-space: nowrap; font-size: 15px; }
.work-undo button { min-height: var(--tap-glove); min-width: 96px; padding: 4px 16px; border-color: var(--fg); font-weight: 700; }

.work-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: start; }
.work-col h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 16px; }
.work-col-n { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.work-hint { margin-left: auto; font-size: 12px; font-weight: normal; color: var(--muted); }
.work-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--work-card-min), 1fr)); gap: 8px; }
.work-empty { margin: 0; padding: 24px 0; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }

.wcard { display: flex; flex-direction: column; gap: 6px; min-height: 120px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--radius); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.wcard:active { border-color: var(--accent); background: var(--surface-2); }
.wcard.is-cooking { border-left-color: var(--half); background: color-mix(in srgb, var(--half) 10%, var(--surface)); }
.wcard.is-cooking .badge { font-size: 15px; font-weight: 700; white-space: nowrap; }
.wcard.is-cooking:active { background: var(--surface-2); }
.wcard.is-done { border-left-color: var(--ok); cursor: default; min-height: 0; }
.wcard.is-done:active { border-color: var(--line); border-left-color: var(--ok); background: var(--surface); }
.wcard.is-done .wcard-age { color: var(--ok); }
.wcard.is-late { box-shadow: inset 0 0 0 2px var(--low); }
.wcard-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.wcard-no { font-size: var(--work-no-size); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wcard-age { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.wcard.is-late .wcard-age { color: var(--low); font-weight: 700; }
.wcard-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 18px; line-height: 1.35; }
/* 品目は味の色を薄く敷いて見分ける（レジのボタンと同じ色の付け方） */
.wcard-items li { display: flex; gap: 8px; align-items: baseline; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--item, var(--line)) 24%, transparent); }
.wcard-items li::before { content: ""; flex: none; align-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--item, var(--line)); }
.wcard-items li span { flex: 1; overflow-wrap: anywhere; }
.wcard-items b { font-variant-numeric: tabular-nums; }
.wcard-items b.multi { color: var(--accent); font-size: 1.2em; }
.wcard-foot { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: auto; }
.wcard-next { font-size: 13px; color: var(--muted); }
.wcard.is-cooking .wcard-next { color: var(--half); font-weight: 700; }
.wcard-quick { display: none; }
.work-past { margin-top: 8px; }
.work-past-toggle { display: flex; width: 100%; gap: 8px; align-items: baseline; justify-content: space-between; background: transparent; color: var(--muted); font-size: 14px; }
.work-past-toggle b { color: var(--fg); font-variant-numeric: tabular-nums; }
.work-past-rows { list-style: none; margin: 4px 0 0; padding: 0; display: grid; font-size: 14px; }
.work-past-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.work-past-rows b { font-variant-numeric: tabular-nums; }
.work-past-items { overflow-wrap: anywhere; }
.work-past p { margin: 6px 0 0; }
@media (hover: hover) and (pointer: fine) {
  .wcard:hover { border-top-color: var(--muted); border-right-color: var(--muted); border-bottom-color: var(--muted); }
  .wcard-quick { display: block; min-height: 30px; padding: 2px 12px; font-size: 13px; }
}
@media (max-width: 600px) {
  :root { --work-no-size: 24px; --work-card-min: 140px; }
  .view-work { padding: 8px; }
  .work-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .work-hint { display: none; }
  .work-sum { flex-basis: 100%; }
  .work-undo .muted { display: none; }
  .wcard { min-height: 96px; padding: 8px 8px 8px 10px; }
  .wcard-items { font-size: 15px; }
  .wcard-items li { padding: 1px 6px; }
  .wcard-next { font-size: 12px; }
}

/* 作業画面の手順（src/client/ui/work.ts の recipePanel）
   既定（縦・スマホ）：画面下半分のシート。注文一覧はその上でスクロールできるよう下に余白を空ける。
   幅 1000px 以上（タブレット横・PC）：右の列（スクロールしても見え続ける） */
.work-sum button.work-sum-item { min-height: var(--tap-glove); font-size: 17px; border: 0; border-left: 6px solid var(--item, var(--line)); border-radius: 8px; padding: 4px 14px; background: color-mix(in srgb, var(--item, var(--line)) 18%, var(--surface)); }
.work-sum button.work-sum-item::after { content: "›"; color: var(--muted); }
.work-recipe-btn { flex: none; min-height: var(--tap-glove); padding: 4px 16px; }
.work-recipe-btn.on { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 700; }
.work.has-recipe { padding-bottom: 52dvh; }
.work-recipe { position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; height: 52dvh; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .5); }
.work-recipe-head { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.work-recipe-head > b { font-size: 17px; }
.work-recipe-wait { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.work-recipe-wait.has { padding: 0 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.work-recipe-head > button { margin-left: auto; min-height: var(--tap-glove); padding: 4px 18px; }
.work-recipe-head .rtabs { flex-basis: 100%; }
.work-recipe .rtabs button { min-height: var(--tap-glove); padding: 4px 18px; }
@media (min-width: 600px) and (max-width: 999px) {
  /* 縦向きタブレットのシートは横に広いので、手順を横に並べる */
  .work-recipe .rsteps { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 16px; }
}
@media (min-width: 1000px) {
  .work.has-recipe { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: start; padding-bottom: 0; }
  .work-recipe { position: sticky; top: calc(var(--bar-h) + 8px); height: auto; max-height: calc(100dvh - var(--bar-h) - 24px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
}

/* 手順（src/client/ui/recipe.ts）：作業画面のパネルと「手順」タブで共通。一覧ページでは説明書のように番号付きのカードを折り返して並べる */
.rtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.rtabs button { min-height: 40px; padding: 4px 14px; border-left: 6px solid var(--item, var(--line)); }
.rtabs button.on { background: var(--surface-2); background: color-mix(in srgb, var(--item, var(--surface-2)) 30%, var(--surface)); border-color: var(--item, var(--fg)); font-weight: 800; }
.rsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rstep { display: grid; gap: 8px; align-content: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rstep:last-child { border-bottom: 0; }
.rstep-text { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 17px; line-height: 1.5; }
.rstep-no { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 17px; font-weight: 800; }
.rstep .amt { padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 28%, transparent); }
.rstep-points { margin: 0; padding: 0 0 0 40px; list-style: none; counter-reset: pt; display: grid; gap: 4px; font-size: 16px; line-height: 1.5; }
.rstep-points li { counter-increment: pt; display: flex; gap: 8px; align-items: baseline; }
.rstep-points li::before { content: counter(pt); flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 13px; font-weight: 800; line-height: 1; }
.rstep-fig { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.rstep-caution { margin: 0; padding: 8px 10px; border: 2px solid var(--warn); border-radius: 8px; font-size: 15px; line-height: 1.5; }
.rstep-caution b { margin-right: 8px; color: var(--warn); }

/* 作業画面のパネル（compact）：手袋で作業中にスクロールせず全工程が見えるよう、小さな図＋要約（大）＋本文（小）を1行ずつ */
.rsteps.is-compact { gap: 0; }
.rsteps.is-compact .rstep { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; }
.rsteps.is-compact .rstep-fig { width: 96px; max-height: none; }
.rstep-body { display: grid; gap: 3px; min-width: 0; }
.rstep-short { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; }
.rstep-short .rstep-no { width: 26px; height: 26px; font-size: 15px; }
.rstep-sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.rsteps.is-compact .rstep-points { padding: 0; gap: 2px; font-size: 13px; line-height: 1.4; }
.rsteps.is-compact .rstep-points li::before { width: 18px; height: 18px; font-size: 11px; }
.rsteps.is-compact .rstep-caution { padding: 4px 8px; font-size: 13px; line-height: 1.4; }

.view-recipes { max-width: 1280px; }
.rpage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.rpage-head { display: grid; gap: 8px; }
.rpage-head h2, .rpage-head p { margin: 0; }
.rpage .rsteps { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap); }
.rpage .rstep { padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.rpage .rstep:last-child { border-bottom: 1px solid var(--line); }

/* 在庫（src/client/ui/stock.ts）
   材料カードを折り返して並べる（タブレット横で4枚1列）。その下に品目の販売停止と記録 */
.view-stock { max-width: 1280px; }
.stk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.stk-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.stk-bar p { margin: 0; }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--gap); }

.stk-card { gap: 8px; align-content: start; border-top: 4px solid var(--lv); }
.stk-head { display: flex; align-items: baseline; gap: 8px; }
.stk-head h2 { margin: 0; font-size: 20px; }
.stk-level { margin-left: auto; font-size: 14px; color: var(--lv); font-weight: 700; }
.stk-card.lv-unset .stk-level { color: var(--muted); font-weight: normal; }
.stk-num { display: flex; align-items: baseline; gap: 6px; }
.stk-num b { font-size: 40px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stk-num span { color: var(--muted); }
.stk-card .meter { height: 10px; border-radius: 5px; }
.stk-detail, .stk-uses { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stk-adjust { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.stk-adjust input { width: 100%; font-size: 20px; }

.stk-items ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stk-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.stk-item-name { display: flex; align-items: center; gap: 8px; }
.stk-item-name::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--item, var(--line)); }
.stk-item-state { font-size: 14px; color: var(--muted); }
.stk-items li.is-off .stk-item-state { color: var(--low); }
.stk-items button { min-width: 72px; }

.stk-log { overflow-x: auto; }
.stk-log td { font-variant-numeric: tabular-nums; }
.stk-log .k-loss td:nth-child(3), .stk-log .k-soldout td:nth-child(3) { color: var(--low); }
.stk-log .k-add td:nth-child(3) { color: var(--ok); }

/* レジ：スマホでは1品1行の横長ボタン（3品を横に並べると品名が折り返すため） */
@media (max-width: 600px) {
  :root { --menu-btn-min: 100%; --menu-btn-h: 88px; --menu-name-size: 24px; --menu-qty-size: 20px; }
  .mbtn { padding: 10px 72px 8px 14px; border-left-width: 6px; }
  .mbtn-price { font-size: 15px; }
  .mbtn-qty { top: 50%; right: 12px; transform: translateY(-50%); min-width: 40px; }
}

/* グラフ（src/client/ui/chart.ts）。系列の色は menu.json の color（暗い背景で色覚差があっても見分けられる組み合わせを検証済み） */
.chart { display: grid; gap: 4px; --chart-h: 180px; }
.chart-plot { position: relative; height: var(--chart-h); margin-left: 56px; }
.chart-grid { position: absolute; inset: 0; pointer-events: none; }
.chart-tick { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.chart-tick span { position: absolute; right: calc(100% + 6px); top: -0.7em; font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.chart-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-height: 0; height: 100%; padding: 0 1px; border: 0; border-radius: 0; background: transparent; }
.chart-col:active, .chart-col.is-sel { background: color-mix(in srgb, var(--fg) 8%, transparent); border: 0; }
.chart-stack { display: flex; flex-direction: column-reverse; gap: 2px; width: min(24px, 80%); min-height: 2px; border-radius: 4px 4px 0 0; overflow: hidden; background: var(--surface); }
.chart-stack i { display: block; min-height: 1px; flex-basis: 0; }
.chart-peak { position: absolute; left: 50%; transform: translate(-50%, -4px); font-size: 12px; color: var(--fg); white-space: nowrap; pointer-events: none; }
.chart-x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-left: 56px; font-size: 11px; color: var(--muted); }
.chart-x span { white-space: nowrap; overflow: visible; font-variant-numeric: tabular-nums; }
.chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.chart-svg polyline { fill: none; stroke: var(--series); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg polygon { fill: var(--series); opacity: .1; stroke: none; }
.chart-dot { position: absolute; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: var(--series); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.chart-end { position: absolute; right: 0; transform: translateY(-120%); font-size: 12px; color: var(--fg); white-space: nowrap; pointer-events: none; }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; padding: 0; font-size: 13px; color: var(--muted); }
.chart-legend li { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 12px; height: 12px; border-radius: 3px; }
.chart-readout { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; min-height: 2.6em; padding: 8px 12px; border-radius: 8px; background: var(--bg); font-size: 13px; color: var(--muted); }
.chart-readout b { color: var(--fg); font-size: 17px; }
.ro-when { color: var(--fg); font-weight: 700; }
.ro-item i { display: inline-block; width: 12px; height: 2px; margin-right: 6px; vertical-align: middle; }

/* 履歴（src/client/ui/history.ts） */
.view-history { max-width: 1280px; }
.hist { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.hist-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; }
.hist-bar label { grid-auto-flow: column; align-items: center; gap: 8px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg button { min-height: 36px; padding: 4px 12px; }
.seg button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 700; }

.hist-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 16px; align-items: end; }
.kpi, .kpi-hero { display: grid; gap: 2px; }
.kpi-label { font-size: 13px; color: var(--muted); }
.kpi b { font-size: 28px; line-height: 1.1; }
.kpi-hero { grid-column: span 2; }
.kpi-hero b { font-size: 52px; line-height: 1; }
.kpi-items { grid-column: 1 / -1; }
.kpi-items td { font-size: 15px; font-variant-numeric: tabular-nums; }
.swatch { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 3px; vertical-align: -1px; background: var(--item, var(--line)); }

.hist-chart { display: grid; gap: 10px; }
.hist-chart-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.hist-chart-head h2, .hist-chart h3 { margin: 0; }
.hist-chart h3 { font-size: 15px; margin-top: 8px; }
.hist-table summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.hist-table table { margin-top: 8px; }
.hist-table td { font-variant-numeric: tabular-nums; }

.hist-list h2 .muted { font-weight: normal; }
.hist-filter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 8px; }
.hist-filter input { flex: 1 1 200px; }
.hist-rows { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.hist-rows li { display: grid; grid-template-columns: 5.5em 6em minmax(0, 1fr) 5em 7.5em; gap: 4px 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hist-rows li.is-cancel > :not(select) { opacity: .5; text-decoration: line-through; }
.hist-no { font-variant-numeric: tabular-nums; }
.hist-time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.hist-items { overflow-wrap: anywhere; }
.hist-total { text-align: right; font-variant-numeric: tabular-nums; }
.hist-rows select { min-height: 36px; padding: 4px 8px; }
.hist-rows select.st-cancel { color: var(--low); }
.hist-rows select.st-done { color: var(--ok); }
.file-btn { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--fg); font-size: 16px; cursor: pointer; }
.file-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
  .kpi-hero b { font-size: 40px; }
  .hist-rows li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hist-items { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
  .hist-total { grid-column: 3; }
  .hist-rows select { grid-column: 1 / -1; }
  .chart { --chart-h: 150px; }
}

/* 使い方（src/client/ui/guide.ts）。読み物なので幅を狭め、行間を広めに。見出しへ飛んだ時に sticky ヘッダーに隠れないよう余白を取る */
.view-guide { max-width: 860px; }
.guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); line-height: 1.7; }
.g-head { display: grid; gap: 8px; }
.g-head h2, .g-head p { margin: 0; }
.g-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.g-toc button { min-height: var(--tap); padding: 4px 12px; font-size: 15px; }
.g-sec { scroll-margin-top: calc(var(--bar-h) + 16px); }
.g-sec h2 { font-size: 20px; }
.g-sec h3 { margin: 16px 0 4px; font-size: 16px; }
.g-sec p { margin: 0 0 8px; }
.g-sub { font-size: 14px; color: var(--muted); }
.g-steps { margin: 0 0 8px; padding: 0; list-style: none; counter-reset: gs; display: grid; gap: 6px; }
/* 番号は左に浮かせる（flex にすると文中の <b> が別の列に割れる） */
.g-steps li { counter-increment: gs; position: relative; min-height: 28px; padding-left: 36px; }
.g-steps li::before { content: counter(gs); position: absolute; left: 0; top: .2em; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 800; line-height: 1; }
.g-list { margin: 0 0 8px; padding-left: 1.3em; display: grid; gap: 4px; }
.g-tip { margin: 12px 0; padding: 10px 14px; border-left: 4px solid var(--accent); border-radius: 8px; background: var(--bg); }
.g-tip > b { display: block; margin-bottom: 2px; }
.g-tip p:last-child, .g-tip ul:last-child { margin-bottom: 0; }
.g-warn { margin: 8px 0; padding: 10px 14px; border: 2px solid var(--warn); border-radius: 8px; }
.g-warn > b { display: block; margin-bottom: 4px; color: var(--warn); }
.g-warn p:last-child { margin-bottom: 0; }
.g-more { margin-top: 4px; font-size: 14px; }
.g-more summary { cursor: pointer; color: var(--muted); min-height: var(--tap); display: flex; align-items: center; }

.g-devs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.g-dev { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-left: 6px solid var(--half); border-radius: var(--radius); background: var(--bg); }
.g-dev.is-ok { border-left-color: var(--ok); }
.g-dev-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.g-dev-state { font-size: 14px; color: var(--muted); }
.g-dev.is-ok .g-dev-state { color: var(--ok); font-weight: 700; }
.g-dev-ctl button { min-height: var(--tap-glove); min-width: 160px; }
.g-dev p { margin: 0; }

.g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; margin: 8px 0 12px; pointer-events: none; }
.g-fig { margin: 0; display: grid; gap: 4px; }
.g-fig figcaption { font-size: 13px; color: var(--muted); text-align: center; }
.g-fig .wcard { line-height: 1.35; }

.g-defs, .g-qa { display: grid; gap: 6px 16px; margin: 0; }
.g-defs { grid-template-columns: max-content minmax(0, 1fr); align-items: center; }
.g-defs dd, .g-qa dd { margin: 0; }
.g-qa dt { font-weight: 700; margin-top: 8px; }
.g-qa dd { color: var(--fg); padding-left: 1em; }
@media (max-width: 600px) {
  .g-defs { grid-template-columns: minmax(0, 1fr); }
  .g-defs dd { padding: 0 0 8px; border-bottom: 1px solid var(--line); }
}