:root{
  --bg:#0b0d12; --card:#171b23; --card2:#222835; --card3:#2a3140; --line:#2c3342;
  --txt:#eef1f7; --dim:#a2abbd; --acc:#d4a94e; --accTxt:#1a1405;
  /* --dim（弱調テキスト）は 2026-07-24 に #8a93a6→#a2abbd へ明化。旧値は暗いカード上で 4.78:1＝
     暗い店内の老眼で薄字が消えていた。カード上で約6:1に上げ、11〜12px の弱調テキスト多数を一括で救済。 */
  --green:#3ecf8e; --red:#e0566a; --blue:#5b9cf5; --violet:#a78bfa; --pink:#f472b6;
  --teal:#2dd4bf; --orange:#fb923c;   /* 同伴 / 場内指名（配席のステータス色と揃える） */
  /* 付け回し（配席表）ステータス色 — 既存の gold/violet/blue/pink/green/red と視覚的に衝突しない配色。
     指名=琥珀 / 同伴=ティール / 予約=スカイ / ヘルプ=スレート / フリー=グレー（低強調）。
     放置アラートは段階3色（濃度＋点滅速度で強調度を上げる）。 */
  --st-shimei:#f59e0b; --st-dohan:#2dd4bf; --st-yoyaku:#38bdf8; --st-help:#94a3b8; --st-free:#6b7280;
  --attn-1:#e0566a; --attn-2:#f43f5e; --attn-3:#ff1e3c;
  /* アナウンスバーの実高さ（0px=非表示時）。render() 側(renderAnnounceBar)が毎回書き換える。
     .pos/.homewrap という「position:fixed;inset:0 の固定app-shell」勢がバー分だけ下にずれるための
     参照値（sticky の #announceBar 自体は通常のフローに乗るのでバー表示中は自然に押し下げられるが、
     fixed 要素は inset:0 だと祖先の高さを無視して常に画面最上部に張り付くため、これが無いと
     announceBar と重なって隠れる）。 */
  --annH:0px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 50% -100px,#141926,var(--bg));
  color:var(--txt);font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:17px;
  min-height:100vh;
  /* safety net: nothing on the page is meant to overflow horizontally — the .topbar nav
     (logo + clock + 4 buttons) doesn't wrap below ~430px and used to blow out html/body's
     width, making the ENTIRE page horizontally rubber-band-scrollable on iPhone (you'd swipe
     sideways and see blank canvas past the real content). .topbar itself is fixed below;
     this stays as a backstop against any other element doing the same in the future.
     overscroll-behavior:none used to live here too (unconditionally), meant to stop the
     page-level bounce/rubber-band on touch devices. Root-caused 2026-07-08: on macOS Chrome,
     a trackpad's two-finger scroll emits wheel events with a small nonzero deltaX even for an
     intended pure vertical scroll; with overscroll-behavior:none blocking any horizontal scroll
     chaining/fallback while overflow-x is hidden, Chrome's scroll-direction lock can latch onto
     the (blocked) horizontal axis and never fall back to scrolling vertically — freezing all
     scroll on desktop trackpads (Settings screen, any screen) while leaving iPad/iPhone (touch,
     not wheel events) and external-mouse wheels (deltaX always exactly 0) unaffected. Moved
     into the @media(max-width:900px) block below, where the bounce/rubber-band it guards
     against is actually a real (touch-only) concern. */
  overflow-x:hidden;}
/* ルート(html)に不透明の暗色を敷く。背景 shorthand は background-color を transparent に落とすため、
   ラバーバンド(オーバースクロール)の余白でブラウザ地の白がチラつく。ここで暗色を敷いて白を消す。 */
html{background-color:var(--bg);}
button{font-family:inherit;}
input,select{font-family:inherit;}
#app{max-width:1180px;margin:0 auto;padding:12px 16px 110px;}
/* 配席盤面はページスクロールさせず1画面に収める＝下部の固定バー用パディングを外す */
#app:has(.atwrap.atboard){padding-bottom:12px;max-width:none;}
/* アナウンスバー（横断リマインド）— 2026-07-13 追加。#app の外(body直下)に常設し、render() の
   innerHTML 差し替えを免れて画面を問わず出続ける。空の時は:empty で自動的に消える（既読ボタン無し）。
   position:sticky なので画面内スクロール中も見える位置に留まる。z-index はモーダル系(40〜90)より下＝
   モーダルを覆わない。 */
#announceBar{position:sticky;top:0;z-index:25;}
#announceBar:empty{display:none;}
.annwrap{display:flex;gap:8px;overflow-x:auto;padding:calc(8px + env(safe-area-inset-top)) 16px 8px;
  max-width:1180px;margin:0 auto;background:var(--bg);}
.annchip{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:12px;padding:8px 12px;font-size:13.5px;font-weight:700;color:var(--txt);
  background:var(--card2);cursor:pointer;white-space:nowrap;}
.annchip.ann-l1{border-color:var(--attn-1);color:var(--attn-1);}
.annchip.ann-l2{border-color:var(--attn-3);color:var(--attn-3);background:rgba(255,30,60,.08);}
.annchip.ann-slip{border-color:var(--acc);color:var(--acc);}
/* クラウド保存の状態（設計 §8.3）。オフラインは落ち着いた色＝正常な日常を警告に見せない。
   拒否だけを赤で強く出す（そこだけが「このままだとデータが消える」状態）。 */
.annchip.ann-sync{border-color:var(--line);color:var(--dim);cursor:default;}
.annchip.ann-sync.ann-deny{border-color:var(--attn-3);color:#fff;background:var(--red);font-weight:700;cursor:default;}
h1{font-size:22px;margin:0;letter-spacing:1px;font-weight:800;}
.num{font-variant-numeric:tabular-nums;}
/* top bar */
/* padding-top includes env(safe-area-inset-top) because as an installed PWA
   (apple-mobile-web-app-status-bar-style: black-translucent) the status bar is a translucent
   overlay and page content draws UNDER it by design — without this, the logo/clock/nav row
   renders partly behind the system status bar (reported 2026-07-08, PWA-only: Safari-tab mode
   masks this since the browser chrome already reserves that space). env() resolves to 0 when
   there's no safe area (regular browser tab, non-notched devices), so this is a no-op there. */
.topbar{display:flex;align-items:center;gap:14px;padding:calc(8px + env(safe-area-inset-top)) 2px 16px;}
.topbar .right{margin-left:auto;display:flex;gap:10px;align-items:center;}
.clock{color:var(--dim);font-size:15px;font-weight:600;}
/* buttons */
.btn{background:var(--card2);color:var(--txt);border:1px solid var(--line);
  border-radius:13px;padding:13px 18px;font-size:16px;font-weight:700;cursor:pointer;
  transition:transform .06s, opacity .15s;}
.btn:active{transform:scale(.96);opacity:.8;}
.btn.acc{background:linear-gradient(180deg,#e6bd63,#cfa143);color:var(--accTxt);border-color:#b8903a;}
.btn.red{background:transparent;color:var(--red);border-color:#5c3038;}
.btn.green{background:linear-gradient(180deg,#4adf9e,#2fbf7d);color:#06281a;border-color:#2aa86e;}
.btn.ghost{background:transparent;}
.backarrow{font-size:1.5em;line-height:0;vertical-align:-3px;margin-right:1px;display:inline-block;}
.btn.sm{padding:9px 13px;font-size:14px;border-radius:11px;}
.btn.xl{padding:17px 26px;font-size:19px;border-radius:15px;}
/* ---- dashboard nav menu (vNavMenu) ----
   1つの「メニュー」ボタンに集約したナビ。ボタンは .navmenu(position:relative) を基準に
   下向きの .navpanel を絶対配置で展開する。展開時のみ keyframe アニメ（閉じるアニメは無し）。 */
.navmenu{position:relative;}
.navmenu-btn{display:inline-flex;align-items:center;gap:10px;
  background:var(--card2);color:var(--txt);border:1px solid var(--line);
  border-radius:13px;padding:12px 18px 12px 15px;font-size:16px;font-weight:700;cursor:pointer;
  transition:transform .12s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s,background .2s;}
.navmenu-btn:active{transform:scale(.96);}
.navmenu-btn.open{border-color:#b8903a;background:linear-gradient(180deg,#20242e,#1a1e27);
  box-shadow:0 0 0 3px rgba(212,169,78,.14),0 6px 18px -8px rgba(212,169,78,.5);}
.navmenu-lbl{letter-spacing:.3px;}
/* CSSハンバーガー：3本線 → open で×に。render() で作り直されるため open 状態は
   keyframe を1回再生してモーフインさせる（transition では初期状態が無く再生されないため）。 */
.ham{position:relative;width:19px;height:14px;flex:none;color:var(--acc);}
.ham span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transform-origin:center;}
.ham span:nth-child(1){top:0;}
.ham span:nth-child(2){top:6px;}
.ham span:nth-child(3){top:12px;}
.navmenu-btn.open .ham span:nth-child(1){animation:hamTop .16s cubic-bezier(.16,1,.3,1) forwards;}
.navmenu-btn.open .ham span:nth-child(2){animation:hamMid .1s ease forwards;}
.navmenu-btn.open .ham span:nth-child(3){animation:hamBot .16s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes hamTop{to{top:6px;transform:rotate(45deg);}}
@keyframes hamMid{to{opacity:0;transform:scaleX(.2);}}
@keyframes hamBot{to{top:6px;transform:rotate(-45deg);}}
/* 要対応（未提供オーダー / 棚卸しドラフト）を閉じた状態でも知らせる金色ドット */
.navdot{width:9px;height:9px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#f4d488,var(--acc));
  box-shadow:0 0 0 3px rgba(212,169,78,.18);animation:navdotpulse 1.8s ease-in-out infinite;}
@keyframes navdotpulse{0%,100%{box-shadow:0 0 0 3px rgba(212,169,78,.18);}
  50%{box-shadow:0 0 0 6px rgba(212,169,78,0);}}
/* 外側タップで閉じる透明レイヤ（パネルより下・本文より上） */
.navbackdrop{position:fixed;inset:0;z-index:58;background:transparent;}
.navpanel{position:absolute;top:calc(100% + 12px);right:0;z-index:60;min-width:308px;
  background:linear-gradient(180deg,#1d222c,#141821);border:1px solid var(--line);
  border-radius:17px;padding:7px;transform-origin:top right;
  box-shadow:0 24px 60px -14px rgba(0,0,0,.75),0 2px 0 0 rgba(255,255,255,.03) inset,
    0 0 0 1px rgba(212,169,78,.06);
  animation:navpop .12s cubic-bezier(.16,1,.3,1);}
/* パネル上辺の金色ヘアライン（さりげない高級感） */
.navpanel::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,169,78,.55),transparent);}
@keyframes navpop{from{opacity:0;transform:translateY(-5px) scale(.97);}
  to{opacity:1;transform:none;}}
.navitem{display:flex;align-items:center;gap:13px;width:100%;box-sizing:border-box;
  padding:12px 13px;border-radius:12px;border:1px solid transparent;background:transparent;
  color:var(--txt);font-size:16px;font-weight:600;cursor:pointer;text-align:left;
  opacity:0;transform:translateX(7px);
  animation:navitemin .14s cubic-bezier(.16,1,.3,1) forwards;
  transition:background .16s,border-color .16s,transform .1s;}
@keyframes navitemin{to{opacity:1;transform:none;}}
.navitem:hover{background:var(--card2);border-color:var(--line);}
.navitem:active{transform:scale(.975);background:var(--card3);}
.navitem .ic{font-size:19px;width:26px;text-align:center;flex:none;
  filter:saturate(.85) brightness(1.05);}
.navitem .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.navitem .navchev{color:var(--dim);font-size:20px;font-weight:400;
  transition:transform .16s,color .16s;flex:none;}
.navitem:hover .navchev{transform:translateX(3px);color:var(--acc);}
.navitem.sep{margin-top:5px;padding-top:15px;position:relative;color:var(--dim);font-weight:600;}
.navitem.sep::before{content:"";position:absolute;left:12px;right:12px;top:3px;height:1px;
  background:var(--line);}
.navitem.sep .ic{opacity:.85;}
/* 現在開いている画面をメニュー内でハイライト（各画面に☰を置いたため、どこにいるか分かるように） */
.navitem.cur{background:var(--card2);border-color:#3a4152;}
.navitem.cur .lbl{color:var(--acc);font-weight:700;}
.navchev.cur{color:var(--acc);font-size:12px;font-weight:700;}
/* グループ見出し＋2列グリッド（項目が12個に増えてスクロールが要るようになったため・2026-07-21）。
   ★見出しを足すだけだと逆に縦が伸びる。縦を縮めているのは【2列にしたこと】で、見出しは
   「どこを見ればいいか」を与えるためにある。フォントは営業中に暗い店内で押す面なので、当たり判定を
   小さくしすぎない（14.5px・上下10px＝指1本ぶんは確保する）。 */
.navgrp{padding:10px 10px 5px;font-size:12px;letter-spacing:.08em;color:var(--dim);
  text-transform:uppercase;font-weight:700;}
/* メニュー末尾の情報行（版数・最後の保存・店名）。読めるが目立たない＝営業の邪魔をしない。
   ボタンではないので誤タップで画面が飛ばない。 */
.navfoot{margin-top:10px;padding:8px 10px 2px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.6;color:var(--dim);letter-spacing:.02em;}
.navfoot b{color:var(--txt);font-weight:700;}
.navgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.navgrid .navitem{padding:10px;font-size:14.5px;gap:9px;}
.navgrid .navitem .ic{font-size:17px;width:20px;}
.navgrid .navitem .navchev{display:none;}          /* 2列では「›」は幅を食うだけなので出さない */
.navgrid .navitem .navchev.cur{display:inline;font-size:11px;}
.navgrid .navbadge{min-width:19px;height:19px;font-size:12px;padding:0 5px;}
.navbadge{flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  background:linear-gradient(180deg,#e6bd63,#cfa143);color:var(--accTxt);
  box-shadow:0 2px 6px -2px rgba(212,169,78,.6);}
/* 狭い画面ではメニューボタンが左寄せになり right:0 基準だとパネルが左端で見切れるため、
   左基準・ビューポート幅内に収める。展開アニメの原点も左上に。 */
@media(max-width:640px){
  .navpanel{left:0;right:auto;min-width:0;width:min(320px,calc(100vw - 20px));
    transform-origin:top left;}
}
/* home */
/* .homewrap/.hometop/.homegridwrap are new wrapper divs around vHome()'s existing markup.
   display:contents makes them invisible to layout by default (iPad/desktop keeps the exact
   same normal-flow, page-scrolls-if-needed behavior as before this existed). Only under
   max-width:900px (below) do they turn into a fixed app-shell: header pinned, table grid is
   the one scrollable region — so the dashboard doesn't rubber-band/scroll as a whole page. */
.homewrap,.hometop,.homegridwrap{display:contents;}
.sumline{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;color:var(--dim);font-size:15px;margin:0 2px 14px;}
.sumline b{color:var(--txt);font-size:17px;}
.sumline .money{color:var(--acc);font-weight:800;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:13px;}
.tcard{border-radius:18px;padding:15px 15px 13px;min-height:132px;cursor:pointer;position:relative;
  background:linear-gradient(180deg,#1b2029,#151920);border:1px solid var(--line);
  transition:transform .08s;}
.tcard:active{transform:scale(.97);}
.tcard.open{border-color:#7a6428;background:linear-gradient(180deg,#241f12,#171712);}
.tcard .tno{font-size:21px;font-weight:900;letter-spacing:.5px;display:flex;align-items:center;gap:8px;}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block;
  animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tcard .gname{margin-top:6px;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tcard .meta{margin-top:4px;font-size:13px;color:var(--dim);}
.tcard .amt{position:absolute;right:14px;bottom:11px;font-size:21px;font-weight:900;color:var(--acc);}
.tcard.empty2{border-style:dashed;border-color:#3a4254;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:var(--dim);gap:6px;background:transparent;}
.tcard.empty2 .plus{font-size:30px;line-height:1;color:#4d5668;}
.tcard.empty2 .tno{color:var(--dim);}
/* slip layout */
.slipgrid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:15px;align-items:start;}
@media(max-width:980px){ .slipgrid{grid-template-columns:1fr;} .rpanel{display:none;} }
@media(min-width:981px){ .totbar{display:none;} }
/* cards / sections */
.sec{background:linear-gradient(180deg,#1a1f28,#161a22);border:1px solid var(--line);
  border-radius:18px;padding:16px;margin-bottom:15px;}
.sec h3{margin:-2px 0 12px;font-size:13px;color:var(--dim);text-transform:uppercase;
  letter-spacing:1.5px;display:flex;align-items:center;gap:8px;}
/* ブランド名（AndOn POS / AndOn Navi）を含む見出しだけ、大文字化を打ち消す。
   見出しの既定は uppercase だが、それをブランド表記に適用すると "ANDON POS" になり
   正しい綴りでなくなる。★ここで .sec h3 の text-transform 自体を消さないこと
   （全画面の見出しの見た目が変わる）。 */
.sec h3.brand{text-transform:none;letter-spacing:.5px;}
.sec h3::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--acc);display:inline-block;}
.sec.adm h3::before{background:var(--acc);}
.sec.cast h3::before{background:var(--violet);}
.sec.ev h3::before{background:var(--pink);}
.sec.items h3::before{background:var(--blue);}
.rulecard{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;}
.rulecard.editing{border-color:var(--acc);}
.hrow{display:flex;flex-wrap:wrap;gap:12px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;color:var(--dim);font-weight:600;letter-spacing:.3px;}
input[type=text],input[type=number],input[type=time],select{
  background:var(--card2);border:1px solid var(--line);color:var(--txt);
  border-radius:11px;padding:12px 13px;font-size:17px;min-width:0;}
input[type=time]{color-scheme:dark;}
input:focus{outline:2px solid var(--acc);outline-offset:-1px;}
.step{display:flex;align-items:center;gap:2px;}
.step button{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);
  background:var(--card2);color:var(--txt);font-size:23px;cursor:pointer;}
.step button:active{background:var(--card3);}
.step span{min-width:44px;text-align:center;font-size:18px;font-weight:800;}
.rowline{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #232a38;flex-wrap:wrap;}
.rowline:last-of-type{border-bottom:none;}
.rowline .lbl{font-weight:800;font-size:17px;min-width:88px;}
.rowline .sub{font-size:13px;color:var(--dim);}
.rowline .amt{margin-left:auto;font-size:18px;font-weight:800;min-width:84px;text-align:right;font-variant-numeric:tabular-nums;}
.rowline .del{background:none;border:none;color:var(--red);font-size:19px;padding:10px 13px;cursor:pointer;border-radius:10px;}
.rowline .del:active{background:#3a2228;}
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{border:1px solid var(--line);background:var(--card2);color:var(--txt);
  border-radius:24px;padding:11px 17px;font-size:15px;font-weight:700;cursor:pointer;
  transition:transform .06s;}
.chip:active{transform:scale(.94);}
.chip.on{background:linear-gradient(180deg,#e6bd63,#cfa143);color:var(--accTxt);border-color:#b8903a;}
.chip.small{padding:8px 13px;font-size:13.5px;}
.toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:20px;padding:8px 13px;font-size:13px;font-weight:800;cursor:pointer;
  background:var(--card2);color:var(--dim);letter-spacing:.5px;}
.toggle.on{background:#3a2b4d;border-color:#8e5bd6;color:#cbb0f2;}
.strike{text-decoration:line-through;color:var(--dim);}
.tstep{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap;}
.tstep button,.tmini{border:1px solid var(--line);background:var(--card2);color:var(--txt);
  border-radius:9px;padding:8px 12px;font-size:13px;font-weight:800;cursor:pointer;}
.tstep button:active,.tmini:active{background:var(--card3);}
.runbadge{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--green);font-weight:700;}
.note{color:var(--dim);font-size:13px;margin-top:10px;line-height:1.55;}
/* receipt panel (right column) */
.rpanel{position:sticky;top:12px;background:linear-gradient(180deg,#1c212c,#171b23);
  border:1px solid var(--line);border-radius:18px;padding:16px;}
.rpanel .rphead{font-size:12px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;
  display:flex;justify-content:space-between;margin-bottom:10px;}
.rline{display:flex;justify-content:space-between;gap:10px;padding:6.5px 0;font-size:14.5px;
  border-bottom:1px dashed #262d3c;}
.rline .l{color:#c6cddc;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rline .a{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.rtot{display:flex;justify-content:space-between;padding:5px 0;font-size:15px;color:var(--dim);}
.rtot b{color:var(--txt);font-variant-numeric:tabular-nums;}
.rgrand{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:10px;
  border-top:2px solid var(--acc);font-size:16px;font-weight:800;}
.rgrand .g{font-size:30px;color:var(--acc);font-variant-numeric:tabular-nums;}
.rpanel .acts{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
/* bottom bar (narrow) */
.totbar{position:fixed;left:0;right:0;bottom:0;background:#12151cf2;backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:20;}
.totbar .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;}
.totbar .grand{margin-left:auto;font-size:26px;font-weight:900;color:var(--acc);font-variant-numeric:tabular-nums;}
.totbar .t{font-size:12px;color:var(--dim);}
/* CHECK mode */
.checkov{position:fixed;inset:0;background:#000c;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;}
.paper{background:#f7f5ee;color:#17150f;border-radius:14px;max-width:560px;width:100%;max-height:92vh;
  overflow:auto;padding:30px 34px;font-family:"Courier New","Hiragino Sans","Hiragino Kaku Gothic ProN",monospace;box-shadow:0 30px 80px #000a;}
.paper .ph{ text-align:center;letter-spacing:3px;font-weight:700;font-size:18px;margin-bottom:4px;}
.paper .pm{text-align:center;color:#6b665a;font-size:12px;margin-bottom:14px;}
/* explicit weight:400 — Latin glyphs are "Courier New" but any Japanese label (e.g. an event
   name like コスチューム) falls back to the OS Japanese font, which renders visibly heavier
   than Courier New at the same nominal weight if not pinned down explicitly */
.paper .pl{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px;font-weight:400;border-bottom:1px dotted #c9c4b4;}
.paper .pl .a{font-weight:700;white-space:nowrap;}
.paper .pt{display:flex;justify-content:space-between;padding:4px 0;font-size:14px;margin-top:2px;}
.paper .pg{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid #17150f;
  margin-top:12px;padding-top:12px;font-weight:700;font-size:16px;}
.paper .pg .g{font-size:30px;}
.checkov .closex{position:fixed;top:18px;right:22px;background:#ffffff22;border:1px solid #ffffff44;
  color:#fff;border-radius:50%;width:52px;height:52px;font-size:22px;cursor:pointer;}
/* modal */
.modal{position:fixed;inset:0;background:#000a;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;}
.mbox{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;max-width:430px;width:100%;}
.mbox h2{margin:0 0 8px;font-size:20px;}
.mbox .big{font-size:34px;font-weight:900;color:var(--acc);margin:10px 0 4px;font-variant-numeric:tabular-nums;}
.mbox .sub2{color:var(--dim);font-size:14px;margin-bottom:20px;}
.mbox .acts{display:flex;gap:10px;justify-content:flex-end;}
/* factory reset (まっさら初期化) checklist modal */
.frmodal{max-width:560px;max-height:88vh;overflow:auto;}
.frh{margin:14px 0 6px;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-weight:700;}
.frlist{max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:4px 10px;margin-bottom:4px;}
.frrow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #232a38;cursor:pointer;font-size:14.5px;}
.frrow:last-child{border-bottom:none;}
.frrow input[type=checkbox]{width:19px;height:19px;flex:none;}
.frn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fra{color:var(--acc);font-weight:700;white-space:nowrap;}
/* toast */
.toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%,20px);background:#e6bd63;color:#1a1405;
  padding:12px 22px;border-radius:24px;font-weight:800;font-size:15px;z-index:80;opacity:0;
  transition:all .25s;box-shadow:0 8px 30px #0008;pointer-events:none;}
.toast.show{opacity:1;transform:translate(-50%,0);}
/* "?" help popover */
.helpov{position:fixed;inset:0;background:#000a;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;animation:helpfade .12s ease;}
@keyframes helpfade{from{opacity:0}to{opacity:1}}
.helpcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 14px;
  max-width:440px;width:100%;max-height:72vh;overflow:auto;box-shadow:0 20px 60px #000a;}
.helpcard .helpbody{color:var(--txt);font-size:14px;line-height:1.65;}
.helpcard .helpx{margin-top:16px;width:100%;}
/* history */
.hitem{display:flex;gap:12px;align-items:center;padding:13px 4px;border-bottom:1px solid #232a38;flex-wrap:wrap;}
.hitem .n{font-weight:700;min-width:140px;}
.hitem .d{color:var(--dim);font-size:14px;}
.hitem .a{margin-left:auto;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums;}
/* pinned お手本/sample customer row (顧客一覧) — owner request 2026-07-09: keep it findable once real
   customers pile up. Sorted to the top in vCustomers() (see c.sample check there); this just gives
   it a faint highlight so it reads as "pinned/special", not just coincidentally first alphabetically. */
.hitem.samplerow{background:var(--card2);border-radius:10px;margin-bottom:4px;border-bottom:none;padding-left:10px;padding-right:10px;}
/* ★折り返す（2026-07-21）。設定は11タブあり、横1行だと 375px 幅で右6個が画面外に出る。
   html,body が overflow-x:hidden なので【スクロールして辿り着くこともできない】＝存在ごと消えていた。
   iPad横(1024px)でもちょうど埋まる幅で、タブを1つ足すか名前を伸ばすと同じ症状になる。
   横スクロールではなく折り返しを選ぶ理由: 設定は縦に余裕があり、「隠れているものがある」と気づかせる
   必要が無い＝全部見えている方が速い。 */
.tabs{display:flex;flex-wrap:wrap;gap:9px;row-gap:8px;margin-bottom:13px;}
/* 狭い画面では折り返しが4行になりタブだけで210px使うので、設定のタブだけ少し詰める。
   ★ナビと違いここは「座って設定する面」＝走りながら押さないので、詰めても誤タップに効きにくい。 */
@media(max-width:640px){ .tabs .chip{padding:9px 13px;font-size:13.5px;} }
.search{width:100%;margin-bottom:12px;}
/* settings */
.setrow{display:flex;gap:10px;align-items:center;padding:9px 0;flex-wrap:wrap;}
.setrow label{min-width:180px;color:var(--dim);font-size:15px;}
/* 金設定の明示保存バー（未保存インジケータ＋保存/元に戻す）。★画面下に貼り付く(sticky)＝どこを編集しても常に見える。
   dirty の時だけ強調＆活性。 */
.setsavebar{position:sticky;bottom:10px;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;flex-wrap:wrap;
  background:var(--card2);box-shadow:0 6px 20px rgba(0,0,0,.35);}
.setsavebar .ssb-state{font-size:14px;color:var(--dim);font-weight:700;}
.setsavebar .ssb-btns{display:flex;gap:8px;}
.setsavebar.dirty{border-color:var(--acc);background:linear-gradient(0deg,rgba(212,169,78,.14),rgba(212,169,78,.14)),var(--card2);}
.setsavebar.dirty .ssb-state{color:var(--acc);}
.setsavebar .btn{min-height:40px;}
/* ヘッダー(設定バー)の保存コントロール。金タブでのみ・常に上部に見える。未保存時は金色ボタンが目立つ。 */
.setheadsave{display:inline-flex;gap:6px;align-items:center;margin-right:8px;}
.setheadsave.dirty .btn.acc{box-shadow:0 0 0 2px rgba(212,169,78,.4);}
/* drag-to-reorder (Settings > Catalog > category order) */
.orddroplist.sub{margin-left:24px;border-left:2px solid var(--line);padding-left:8px;}
.orddroplist.sub2{margin-left:24px;border-left:2px solid var(--line);padding-left:8px;}
.ordblock{margin-bottom:2px;}
.ordblock2{margin-bottom:2px;}
/* クリック可能なカード（給料ドリルダウン等）: button.ordblock はUA既定の白背景を拾うのでカード色を明示 */
button.ordblock{background:var(--card2);color:var(--txt);border:1px solid var(--line);border-radius:12px;font-family:inherit;}
button.ordblock:hover{border-color:var(--card3);}
button.ordblock:active{transform:scale(.996);}
.ordrow{display:flex;gap:2px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);background:var(--bg);}
.ordrow.sub{border-bottom:1px solid var(--line);}
.ordname{font-weight:600;font-size:15px;flex:1;}
.ordrow.sub .ordname{color:var(--dim);font-size:14px;}
.ordrow.sub2 .ordname{color:var(--dim);font-size:13px;}
.draghandle{cursor:grab;touch-action:none;font-size:20px;line-height:1;color:var(--dim);
  padding:11px 14px;user-select:none;}
.draghandle:active{cursor:grabbing;color:var(--txt);}
.ordtoggle{background:none;border:none;color:var(--dim);font-size:13px;font-weight:700;
  padding:8px 6px;cursor:pointer;white-space:nowrap;}
.dragitem.dragging{position:relative;z-index:5;background:var(--card2);border-radius:10px;
  box-shadow:0 10px 24px #0009;}
.dragitem.dragging .ordrow,.dragitem.dragging.ordrow{border-bottom-color:transparent;}
/* language section: floor / KDS sub-groups under one heading */
.langgrp{margin-bottom:12px;}
.langgrp:last-of-type{margin-bottom:4px;}
.langlbl{display:block;color:var(--dim);font-size:13px;font-weight:700;letter-spacing:.3px;margin-bottom:7px;}
/* 卓設定：ドラッグ並び替え＋名前編集＋表示トグル＋削除の行 */
.tbllist{max-width:420px;}
.ordrow.tblrow{gap:8px;padding:7px 0;}
.tblname{flex:1;min-width:0;width:auto;background:var(--card2);border:1px solid var(--line);
  color:var(--txt);border-radius:10px;padding:10px 12px;font-size:16px;font-weight:700;}
.tblrow .toggle{flex:none;}
.tbldel{flex:none;background:none;border:none;color:var(--red);font-size:19px;line-height:1;
  padding:8px 10px;cursor:pointer;border-radius:9px;transition:background .15s,opacity .15s;}
.tbldel:hover{background:#5c303822;}
.tbldel:disabled{color:var(--dim);opacity:.4;cursor:not-allowed;}
/* item picker */
.overlay{position:fixed;inset:0;background:#000b;z-index:40;display:flex;align-items:flex-end;justify-content:center;}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:22px 22px 0 0;
  width:100%;max-width:780px;max-height:86vh;overflow:auto;padding:16px 18px 34px;}
.sheet .head{display:flex;gap:10px;align-items:center;margin-bottom:12px;position:sticky;top:0;
  background:var(--card);padding:6px 0;z-index:2;}
.sheet .head input{flex:1;}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;}
.catbtn{background:var(--card2);border:1px solid var(--line);border-radius:15px;color:var(--txt);
  padding:22px 12px;font-size:17px;font-weight:800;cursor:pointer;text-align:center;}
.catbtn:active{background:var(--card3);}
.catbtn .cnt{display:block;font-size:12px;color:var(--dim);font-weight:500;margin-top:5px;}
.pickrow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:16px 8px;border-bottom:1px solid #232a38;font-size:17px;cursor:pointer;}
.pickrow:active{background:var(--card2);}
.pickrow .pr{color:var(--acc);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;}
.pickrow .inslip{font-size:12px;color:var(--green);margin-left:8px;font-weight:700;}
.crumb{color:var(--dim);font-size:14px;margin-bottom:8px;}
/* POS register layout */
body.lock{overflow:hidden;}
.pos{position:fixed;top:var(--annH,0px);right:0;bottom:0;left:0;display:flex;flex-direction:column;z-index:5;
  background:radial-gradient(1200px 600px at 50% -100px,#141926,var(--bg));}
.pbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:#12151cee;flex:none;padding-top:calc(10px + env(safe-area-inset-top));flex-wrap:wrap;}
.pbar h1{font-size:20px;}
.pbar input[type=text]{padding:9px 11px;font-size:15px;}
.pbar input[type=time]{padding:8px 9px;font-size:15px;}
.pbar .nameip{flex:1;min-width:110px;}
.pbar2{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);
  background:#12151c;flex:none;flex-wrap:wrap;}
@keyframes lineflash{from{background:#4d3c14;}to{background:transparent;}}
.tline.flash{animation:lineflash .9s ease-out;}
/* mobile-only menu⇄ticket toggle (see @media max-width:900px below) — hidden on the iPad/desktop
   split-pane layout where both panes are already visible side by side. */
.postoggle{display:none;}
.pmain{flex:1;display:flex;min-height:0;}
.pleft{flex:1.15;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);}
.ptabs{display:flex;gap:8px;padding:10px 12px 2px;overflow-x:auto;flex:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.ptabs.subtabs{padding-top:4px;}
.tabbtn{flex:none;border:1px solid var(--line);background:var(--card2);color:var(--dim);
  border-radius:11px;padding:11px 16px;font-size:15px;font-weight:800;cursor:pointer;}
.tabbtn.on{background:linear-gradient(180deg,#e6bd63,#cfa143);color:var(--accTxt);border-color:#b8903a;}
.tabbtn.sm{padding:10px 14px;font-size:14px;border-radius:9px;}
.tabbtn.sm.on{background:linear-gradient(180deg,#c3aefc,#9f83f0);color:#241a4a;border-color:#7c63d6;}
.gsearch{margin:8px 12px 0;flex:none;display:flex;gap:8px;}
.gsearch input{flex:1;min-width:0;padding:10px 13px;font-size:15px;}
.gsearch select{flex:none;padding:10px 8px;font-size:13.5px;max-width:132px;}
.pgridwrap{flex:1;overflow-y:auto;padding:10px 12px 24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:10px;}
.tile{background:var(--card2);border:1px solid var(--line);border-radius:14px;min-height:76px;padding:11px 13px;
  display:flex;flex-direction:column;justify-content:space-between;gap:5px;cursor:pointer;text-align:left;color:var(--txt);
  transition:transform .06s;}
.tile:active{background:var(--card3);transform:scale(.96);}
.tile .tn{font-weight:700;font-size:13.5px;line-height:1.25;letter-spacing:-.1px;}
.tile .tp{color:var(--acc);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;}
.tile.evon{background:#3a2b4d;border-color:#8e5bd6;}
.pticket{width:520px;flex:none;display:flex;flex-direction:column;min-height:0;background:#141821;overflow-x:hidden;}
.tickhead{flex:none;padding:12px 14px 8px;border-bottom:1px solid var(--line);}
.thr{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap;}
.thr input[type=text]{flex:1;min-width:80px;padding:9px 11px;font-size:15px;}
.thr input[type=time]{padding:8px 9px;font-size:15px;}
.ticklines{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 8px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.oneoffrow{flex:none;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--line);}
.oneoffrow input[type=text],.oneoffrow input[type=number]{padding:9px 11px;font-size:15px;}
.tline{border-bottom:1px solid #222835;border-left:3px solid transparent;}
.tline.sel{background:#1c2230;border-radius:0 12px 12px 0;border-bottom-color:transparent;}
.tline.ty-admission{border-left-color:var(--acc);}
.tline.ty-cast{border-left-color:var(--violet);}
.tline.ty-waiter{border-left-color:var(--blue);}
.tline.ty-request{border-left-color:var(--pink);}
.tydot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px;flex:none;vertical-align:middle;}
.ty-admission .tydot{background:var(--acc);}
.ty-cast .tydot{background:var(--violet);}
.ty-waiter .tydot{background:var(--blue);}
.ty-request .tydot{background:var(--pink);}
/* 同伴＝配席の同伴と同じティール。場内指名＝配席では紫だが伝票の紫はキャストなのでオレンジ
   （同じ画面で見分けがつくことを優先・2026-07-29）。 */
.tline.ty-dohan{border-left-color:var(--teal);}
.tline.ty-jonai{border-left-color:var(--orange);}
.ty-dohan .tydot{background:var(--teal);}
.ty-jonai .tydot{background:var(--orange);}
.tline.ty-event{border-left-color:var(--green);}
.ty-event .tydot{background:var(--green);}
.tmain{display:flex;align-items:center;gap:8px;padding:11px 8px;cursor:pointer;}
.tmain .tl{flex:1;min-width:0;font-weight:700;font-size:15px;}
.tmain .ts{color:var(--dim);font-size:12.5px;font-weight:500;display:block;margin-top:2px;}
.tmain .ta{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
.tedit{padding:2px 10px 12px;display:flex;flex-wrap:wrap;gap:9px;align-items:center;}
.segrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 2px;border-bottom:1px dashed #2a3140;}
.segrow:last-child{border-bottom:none;}
.segrow.segout{opacity:.6;}
.segpanel{border-radius:10px;padding:2px 12px;margin:0 0 4px;background:var(--card2);}
.segpanel .segrow{padding:8px 0;}
.segpanel .raterow{border-bottom:1px dashed rgba(255,255,255,.1);}
.segpanel .raterow .sub{font-size:12px;font-weight:600;color:var(--dim);}
.ty-admission .segpanel{background:rgba(212,169,78,.14);}
.ty-admission .segpanel .raterow .sub{color:#dcc48a;}
.ty-cast .segpanel{background:rgba(167,139,250,.14);}
.ty-cast .segpanel .raterow .sub{color:#c7b8f7;}
.ty-waiter .segpanel{background:rgba(91,156,245,.14);}
.ty-waiter .segpanel .raterow .sub{color:#a8c9f5;}
.ty-request .segpanel{background:rgba(244,114,182,.14);}
.ty-request .segpanel .raterow .sub{color:#f2a8ce;}
.joinbtn{border:1px solid var(--line);border-radius:9px;padding:11px 15px;font-size:14px;font-weight:800;cursor:pointer;transition:transform .06s, opacity .15s;}
.joinbtn:active{transform:scale(.95);opacity:.85;}
.joinbtn.ty-admission{background:linear-gradient(180deg,#e6bd63,#cfa143);color:#1a1405;border-color:#b8903a;}
.joinbtn.ty-cast{background:linear-gradient(180deg,#c3aefc,#9f83f0);color:#241a4a;border-color:#7c63d6;}
.segsum{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;width:100%;padding:5px 0;cursor:pointer;}
.segsum b{font-size:14.5px;}
.segsum .sub{color:var(--dim);font-size:12.5px;font-weight:500;}
.segctl{display:flex;flex-direction:column;gap:8px;padding:8px 0 4px;}
.tgrp{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;}
.tgrp .tlbl{width:38px;flex:none;color:var(--dim);font-size:13px;font-weight:700;}
.tgrp input[type=time]{padding:8px 8px;font-size:15px;width:104px;flex:none;}
.tgrp .tmini{padding:8px 8px;flex:none;}
.tgrp input[list=castlist]{flex:1;}
.stag{font-size:11px;font-weight:800;border-radius:8px;padding:5px 9px;letter-spacing:.5px;white-space:nowrap;}
.stag.in{background:#173325;color:var(--green);}
.stag.out{background:#2a2d35;color:var(--dim);}
.stag.base{background:transparent;color:var(--green);padding:5px 2px;}
.tagwrap{display:inline-flex;gap:6px;align-items:center;}
.stag.leavebtn{background:transparent;border:1px solid #5c3038;color:var(--red);cursor:pointer;}
.stag.leavebtn:active{background:#3a2228;}
.ticktot{flex:none;border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#12151c;}
.trow{display:flex;justify-content:space-between;font-size:13.5px;color:var(--dim);padding:2px 0;}
.trow b{color:var(--txt);font-variant-numeric:tabular-nums;}
.tgrand{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0 8px;}
.tgrand .g{font-size:27px;font-weight:900;color:var(--acc);font-variant-numeric:tabular-nums;}
.tbtns{display:flex;gap:9px;}
.tbtns .btn{flex:1;padding:14px 8px;font-size:16.5px;}
@media(max-width:900px){
  /* Menu and Ticket become two full-width panes switched via the .postoggle tap buttons instead
     of stacking vertically. Stacking meant reaching the ticket/total required scrolling past
     the whole product grid first, which defeats the point of the mobile view as a quick
     "too busy to walk to the iPad" fallback. (A swipe gesture also lived here briefly but was
     removed 2026-07-08 — it conflicted with the .ptabs horizontal-scroll strip.) */
  /* touch-only page-bounce guard, moved here from the unconditional html,body rule 2026-07-08 —
     see the long comment on that rule for why it froze all scrolling on macOS Chrome trackpads. */
  html,body{overscroll-behavior:none;}
  .postoggle{display:flex;gap:8px;padding:8px 12px 0;flex:none;}
  .ptbtn{flex:1;padding:11px 8px;border-radius:11px;border:1px solid var(--line);
    background:var(--card2);color:var(--dim);font-weight:800;font-size:14px;text-align:center;
    font-variant-numeric:tabular-nums;}
  .ptbtn.on{background:linear-gradient(180deg,#e6bd63,#cfa143);color:var(--accTxt);border-color:#b8903a;}
  .pmain{position:relative;overflow:hidden;}
  .pleft,.pticket{position:absolute;inset:0;width:100%;transition:transform .22s ease;}
  .pleft{border-right:none;transform:translateX(0);}
  .pticket{transform:translateX(100%);}
  .pmain.view-ticket .pleft{transform:translateX(-100%);}
  .pmain.view-ticket .pticket{transform:translateX(0);}
  /* reverted 2026-07-08: item tiles briefly went horizontal-scroll (3-row grid) to match
     .ptabs, but that put TWO horizontal-swipe surfaces (category tabs + item grid) on top of
     the menu⇄ticket pane-swipe gesture, and swiping the tabs kept getting misread as "switch to
     ticket". Back to a normal vertical-scrolling grid — only .ptabs stays horizontal, and the
     touchstart handler in index.html now explicitly ignores touches starting on .ptabs. */
}
/* bar order display */
.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.ocard{background:linear-gradient(180deg,#1c212b,#171b23);border:1px solid var(--line);
  border-left:6px solid var(--acc);border-radius:15px;padding:14px;cursor:pointer;
  transition:transform .06s;}
.ocard:active{transform:scale(.96);}
.ocard .ohead{display:flex;justify-content:space-between;align-items:baseline;}
.ocard .otbl{font-size:23px;font-weight:900;}
.ocard .oago{color:var(--dim);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;}
.ocard .oago.mid{color:var(--acc);}
.ocard .oago.late{color:var(--red);animation:pulse 1.2s infinite;}
.ocard .oname{font-size:17px;font-weight:800;margin-top:6px;line-height:1.3;}
.ocard .onote{color:var(--blue);font-size:15px;font-weight:800;margin-top:2px;}
.ocard.done{opacity:.4;border-left-color:var(--green);}
.ocard.done .oname{text-decoration:line-through;}
/* fulfilled tickets render smaller than the in-queue ones so the queue that still needs
   attention is visually dominant at a glance */
.ogrid.compact{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.ogrid.compact .ocard{padding:8px 10px;border-left-width:4px;border-radius:11px;}
.ogrid.compact .ocard .otbl{font-size:15px;}
.ogrid.compact .ocard .oago{font-size:12px;}
.ogrid.compact .ocard .oname{font-size:12.5px;margin-top:3px;}
.ogrid.compact .ocard .onote{font-size:11.5px;margin-top:1px;}
.osec{margin:18px 0 10px;color:var(--dim);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;}
/* stock badge */
.stk{font-size:11px;font-weight:800;border-radius:8px;padding:3px 7px;background:#1d3a2a;color:var(--green);}
.stk.low{background:#3a2d14;color:var(--acc);}
.stk.out{background:#3a1d22;color:var(--red);}
/* 棚卸し (inventory / stocktake) — added 2026-07-08 */
.ivprogress{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:12px;
  font-weight:700;font-size:15px;}
.ivsec{margin:18px 0 6px;color:var(--dim);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  position:sticky;top:0;background:var(--bg);padding:6px 2px;z-index:1;}
.ivsec:first-child{margin-top:0;}
.ivsub{margin:6px 0 2px;color:var(--dim);font-size:12.5px;font-weight:600;padding:0 2px;}
.ivrow{display:flex;align-items:center;gap:10px;padding:14px 8px;border-bottom:1px solid #232a38;cursor:pointer;}
.ivrow:active{background:var(--card2);}
.ivrow.pending{opacity:.62;}
.ivrow.ok .ivc{color:var(--green);}
.ivrow.diff{background:#241a14;border-radius:10px;}
.ivn{flex:1;font-weight:700;font-size:15.5px;min-width:0;}
.ive{color:var(--dim);font-size:13px;white-space:nowrap;}
.ivc{font-weight:800;font-size:16px;white-space:nowrap;min-width:34px;text-align:right;}
.ivwait{color:var(--dim);font-weight:600;font-size:13px;}
/* table layout for the live count list (vInvRow/vInvTableHead) — replaced the earlier 2-line
   per-row layout (2026-07-08 owner feedback: labeling every number inline on every row was
   cluttered, and a ✓ badge next to a differing "current stock" number looked contradictory
   without a header explaining what each column means). History detail rows are unaffected —
   they keep the original single-line .ivrow layout defined above, since a past session record
   only ever needs expected/counted/diff, not a live "current stock" column. */
.ivtable{padding:2px 4px 6px;}
/* (2026-07-08 v2) 3 columns — item/book-qty/count+variance. The "vs last count" column moved to
   the history-detail audit view (see index.html's lastCountedFor()/vInvHistoryDetail() comments
   for why); the live count screen stays minimal for fast tap-through entry. */
.ivtr{display:grid;grid-template-columns:1fr 62px 96px;gap:8px;align-items:center;
  padding:12px 6px;border-bottom:1px solid #232a38;cursor:pointer;}
.ivtr:active{background:var(--card2);}
.ivtr.pending{opacity:.6;}
.ivtr.ok .ivtd-count{color:var(--green);}
.ivtr.diff{background:#241a14;border-radius:10px;}
.ivthead{cursor:default;padding:2px 6px 10px;border-bottom:1px solid var(--line);
  color:var(--dim);font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:700;}
.ivthead:active{background:transparent;}
.ivtd{min-width:0;}
.ivtd-name{display:flex;flex-direction:column;gap:1px;min-width:0;}
.ivnm{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ivthead .ivtd-name{font-weight:700;display:block;}
/* "counted by another device" hint (2026-07-08, concurrent multi-device stocktake) */
.ivother{font-size:11px;color:var(--acc);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ivotherbanner{background:#2a2312;border:1px solid #5a4a1f;border-radius:10px;padding:9px 12px;color:var(--acc);margin-bottom:10px;}
.ivtd-num{text-align:right;color:var(--dim);font-size:14px;}
.ivtd-count{text-align:right;font-weight:800;font-size:15px;white-space:nowrap;}
.ivdiff{font-size:12px;font-weight:800;border-radius:8px;padding:2px 6px;margin-left:4px;}
.ivdiff.ok{background:#1d3a2a;color:var(--green);}
.ivdiff.up{background:#1d3a2a;color:var(--green);}
.ivdiff.down{background:#3a1d22;color:var(--red);}
/* keypad overlay — big touch targets for one-handed iPad counting */
.mbox.ivkp{max-width:360px;padding:22px 22px 26px;position:relative;text-align:center;}
.ivkp-x{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--dim);
  font-size:20px;padding:8px;cursor:pointer;line-height:1;}
.ivkp-name{font-weight:800;font-size:19px;padding-right:26px;}
.ivkp-cat{color:var(--dim);font-size:13px;margin-top:2px;}
.ivkp-disp{font-size:52px;font-weight:900;color:var(--acc);margin:16px 0 6px;font-variant-numeric:tabular-nums;}
.ivkp-exp{color:var(--dim);font-size:14px;margin-bottom:10px;}
.ivkp-match{width:100%;padding:12px;font-size:15px;margin-bottom:16px;}
.ivkp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.ivkp-grid button{background:var(--card2);border:1px solid var(--line);color:var(--txt);
  border-radius:14px;font-size:24px;font-weight:800;padding:0;height:64px;cursor:pointer;
  font-variant-numeric:tabular-nums;}
.ivkp-grid button:active{background:var(--card3);}
.ivkp-bs{color:var(--dim);font-size:20px !important;}
.ivkp-ok{background:linear-gradient(180deg,#e6bd63,#cfa143) !important;color:var(--accTxt) !important;
  border-color:#b8903a !important;font-size:26px !important;}
/* phone tweaks */
@media(max-width:600px){
  #app{padding:8px 8px 90px;}
  /* logo + clock + 4 nav buttons don't fit one row under ~430px; wrap onto a second row
     instead of overflowing (see the html,body overflow-x:hidden note above for what that
     overflow used to do to the whole page). */
  .topbar{gap:8px 6px;flex-wrap:wrap;}
  .topbar .right{margin-left:0;width:100%;flex-wrap:wrap;}
  .topbar .btn{padding:10px 12px;font-size:14px;}
  /* padding-top re-asserted here on purpose: the `padding:8px` shorthand above resets ALL four
     sides, including top — which would silently wipe out the safe-area-aware padding-top set on
     the base .pbar rule (and the display-mode:standalone floor further down this file). This is
     the actual root cause of the status-bar overlap reported 2026-07-08 on phone-width PWA
     screens: the shorthand here always cascade-wins over the earlier longhand at ANY viewport
     <=600px (nearly every phone), regardless of what the base rule or standalone media query
     said — testing in a regular Safari tab never showed it because the browser's own chrome
     already covers the missing space there. */
  .pbar{gap:6px;padding:8px;padding-top:calc(8px + env(safe-area-inset-top));}
  .pbar h1{font-size:17px;}
  .pbar input[type=time]{font-size:13px;padding:6px 5px;}
  .pbar .nameip{min-width:70px;}
  .ptabs{padding:8px 8px 2px;gap:6px;}
  .tabbtn{padding:8px 11px;font-size:13px;}
  .gsearch{margin:6px 8px 0;}
  .pgridwrap{padding:8px 8px 20px;}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;}
  .tile{min-height:70px;padding:9px;}
  .tile .tn{font-size:13px;}
  .tile .tp{font-size:12.5px;}
  /* dashboard as a fixed app-shell: header (logo/clock/nav + stats line) pinned, table grid is
     the only scrollable region. #app's own padding doesn't apply once .homewrap is
     position:fixed (fixed positioning ignores a non-positioned ancestor's padding), so it's
     re-added here directly. Top is plain 8px (NOT env(safe-area-inset-top)) on purpose: the
     .topbar nested inside (via .hometop) already carries its own safe-area-aware padding-top
     (see the .topbar rule near the top of this file) — .homewrap is the only screen wrapper
     that puts another safe-area padding OUTSIDE of .topbar, so adding it here too double-counted
     the status-bar gap (reported 2026-07-08: huge blank space above the dashboard header in PWA
     mode, roughly 2x the intended gap). vOrders/vHistory/vSettings use .topbar unwrapped, so they
     only ever get the one safe-area padding from .topbar itself. */
  .homewrap{position:fixed;top:var(--annH,0px);right:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    background:radial-gradient(1200px 600px at 50% -100px,#141926,var(--bg));}
  .hometop{flex:none;}
  .homegridwrap{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
  .tcard{min-height:100px;padding:11px 12px 9px;border-radius:14px;}
  .tcard .tno{font-size:18px;}
  .tcard .gname{font-size:14px;margin-top:3px;}
  .tcard .meta{font-size:11.5px;margin-top:2px;}
  .tcard .amt{font-size:17px;right:12px;bottom:9px;}
  .tcard.empty2 .plus{font-size:24px;}
  .tbtns .btn{font-size:14.5px;padding:12px 6px;}
  .tgrp .tmini{padding:7px 6px;font-size:12px;}
  .tgrp input[type=time]{width:92px;font-size:13.5px;}
  .ticktot{padding:8px 10px calc(8px + env(safe-area-inset-bottom));}
  .tgrand .g{font-size:23px;}
}
/* settings catalog accordion */
.acchead{width:100%;display:flex;justify-content:space-between;align-items:center;
  background:var(--card2);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;color:var(--txt);font-size:16px;font-weight:800;cursor:pointer;margin:7px 0;}
.acchead .cnt{color:var(--dim);font-weight:600;font-size:13px;}
.accbody{padding:2px 4px 10px;}
/* print */
#printArea{display:none;}
@media print{
  #app,.totbar,.toast,.modal,.checkov,.overlay,.pos{display:none !important;}
  body{background:#fff;color:#000;}
  #printArea{display:block;font-family:"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN",Arial,sans-serif;color:#000;}
  #printArea:not(.paysheets){width:3.6in;margin:0 auto;font-size:13px;padding:10px 4px;}
  #printArea .phead{text-align:center;font-weight:800;font-size:21px;letter-spacing:5px;margin-bottom:6px;}
  #printArea .pmeta{text-align:center;font-size:12px;color:#222;margin:2px 0;}
  #printArea .psp{border-top:1.5px dashed #000;margin:11px 0;}
  #printArea .prow2{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    padding:6px 0;border-bottom:1px dotted #999;}
  #printArea .prow2 .pn{flex:1;font-weight:400;}
  #printArea .prow2 .pd{color:#555;font-size:11px;display:block;margin-top:1px;}
  #printArea .prow2 .pa{font-weight:700;white-space:nowrap;}
  #printArea .ptot{display:flex;justify-content:space-between;font-size:13px;padding:3.5px 0;}
  #printArea .pgrand{display:flex;justify-content:space-between;align-items:baseline;
    font-size:20px;font-weight:900;border-top:2.5px solid #000;margin-top:9px;padding-top:9px;}
  #printArea .pthx{text-align:center;margin-top:16px;font-size:12px;color:#333;}
  #printArea .pwht2{width:100%;border-collapse:collapse;font-size:11px;margin-top:6px;}
  #printArea .pwht2 th,#printArea .pwht2 td{padding:5px 3px;border-bottom:1px solid #bbb;text-align:right;
    white-space:nowrap;font-variant-numeric:tabular-nums;}
  #printArea .pwht2 th:first-child,#printArea .pwht2 td:first-child{text-align:left;white-space:normal;}
  #printArea .pwht2 thead th{border-bottom:1.5px solid #000;font-weight:800;}
  #printArea .pwht2 td.pn{font-weight:700;}
  /* ===== 給料明細（1人1枚・レター/A4）===== */
  #printArea.paysheets{width:100%;font-size:13px;color:#111;}
  #printArea.paysheets .payslip{page-break-after:always;break-after:page;padding:2mm 2mm 0;max-width:180mm;margin:0 auto;}
  #printArea.paysheets .payslip:last-child{page-break-after:auto;break-after:auto;}
  .payslip .pl-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:9px;}
  .payslip .pl-store{font-weight:800;font-size:19px;letter-spacing:.04em;}
  .payslip .pl-doc{text-align:right;}
  .payslip .pl-tt{font-weight:800;font-size:16px;}
  .payslip .pl-per{font-size:12px;color:#555;margin-top:2px;}
  .payslip .pl-draft{margin-top:10px;border:2px solid #b00;color:#b00;font-weight:800;text-align:center;
    padding:7px;border-radius:4px;letter-spacing:.03em;font-size:14px;}
  .payslip .pl-to{margin:16px 0 8px;font-size:22px;font-weight:800;}
  .payslip .pl-to .pl-sm{font-size:13px;color:#555;font-weight:600;margin-left:6px;}
  .payslip .pl-tbl{width:100%;border-collapse:collapse;}
  .payslip .pl-tbl td{padding:9px 2px;border-bottom:1px solid #ddd;font-variant-numeric:tabular-nums;vertical-align:baseline;}
  .payslip .pl-it{color:#111;}
  .payslip .pl-it .pl-d{color:#777;font-size:12px;margin-left:8px;}
  .payslip .pl-am{text-align:right;font-weight:700;white-space:nowrap;}
  .payslip .pl-am.neg{color:#b00;}
  .payslip .pl-sub td{border-bottom:none;padding-top:12px;color:#555;}
  .payslip .pl-grand td{border-top:2px solid #111;border-bottom:none;padding-top:11px;font-size:17px;font-weight:800;}
  .payslip .pl-grand .pl-am{font-size:21px;}
  .payslip .pl-mini{margin-top:16px;font-size:12px;color:#555;}
  .payslip .pl-mh{font-weight:700;color:#222;margin-bottom:4px;}
  .payslip .pl-drow{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dotted #ddd;font-variant-numeric:tabular-nums;}
  /* 日別詳細（いつ・どの卓の誰・どのボトルでいくら）。日ごとに小見出し＋卓/ボトルの明細行＋日計。 */
  .payslip .pl-day{margin:7px 0 0;padding-bottom:6px;border-bottom:1px solid #e6e6e6;break-inside:avoid;}
  .payslip .pl-dhead{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;color:#222;font-size:12.5px;margin-bottom:3px;font-variant-numeric:tabular-nums;}
  .payslip .pl-dt{font-weight:600;color:#777;font-size:11px;}
  .payslip .pl-dtot{color:#111;}
  .payslip .pl-dl{display:flex;justify-content:space-between;gap:10px;padding:1.5px 0 1.5px 12px;color:#555;font-size:11.5px;font-variant-numeric:tabular-nums;}
  .payslip .pl-dl>span:first-child{overflow:hidden;text-overflow:ellipsis;}
  .payslip .pl-dl.pl-bt{padding-left:22px;color:#777;}
  .payslip .pl-note{margin-top:12px;font-size:12px;color:#333;}
  .payslip .pl-foot{margin-top:16px;font-size:11px;color:#888;border-top:1px dashed #ccc;padding-top:10px;}
  /* デモの「DEMO / リセット」バッジは position:fixed で明細に重なるので、印刷では必ず隠す。 */
  #demoBadge{display:none !important;}
}
/* 顧客管理 (customer management) — added 2026-07-09 */
textarea{background:var(--card2);border:1px solid var(--line);color:var(--txt);
  border-radius:11px;padding:11px 13px;font-size:15px;font-family:inherit;width:100%;resize:vertical;}
textarea:focus{outline:2px solid var(--acc);outline-offset:-1px;}
/* in-slip banned/risk safety-net banner (see custLinkedWarnings()/vCustWarnBanner() in index.html) —
   sits right under the pbar, above the menu/ticket panes, so it's impossible to miss without being
   a blocking modal (staff can still operate the slip normally; this is a fallback for when the
   pre-seating 顧客検索 lookup got skipped, not the primary mechanism). */
.custwarnbar{flex:none;display:flex;flex-direction:column;gap:4px;padding:8px 14px;}
.custwarnline{border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:700;}
.custwarnline.banned{background:#3a1d22;color:var(--red);border:1px solid #5c3038;}
.custwarnline.risk{background:#2a2312;color:var(--acc);border:1px solid #5a4a1f;}
/* non-blocking close-time "no customer linked yet" reminder inside vCloseModal's .mbox — softer
   tone than the banned/risk banner above (this isn't a warning, just a nudge), so it borrows the
   neutral card color instead of red/amber. */
.custwarnline.reminder{background:var(--card2);color:var(--dim);border:1px solid var(--line);
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-weight:500;}
/* tag chips on the customer profile screen — a filled .chip with an inline ✕ remove button,
   distinct from the picker/filter chips elsewhere (those are never individually removable). */
.tagchip{display:inline-flex;align-items:center;gap:7px;}
.tagchip-x{background:none;border:none;color:inherit;opacity:.75;font-size:13px;padding:0;
  cursor:pointer;line-height:1;}
.tagchip-x:active{opacity:1;}
/* banned toggle button — reuses .chip's shape/sizing but swaps in the red palette when active,
   instead of the usual gold "on" state, so it reads as a hard stop rather than a normal selection. */
.chip.bannedon{background:linear-gradient(180deg,#e0566a,#c23c50);color:#fff;border-color:#a8303f;}
/* dashboard birthday/inactive-regulars widgets (vCustDashWidgets) — sits below the table grid,
   two stacked .sec cards; side-by-side on wide screens where there's room. */
.custdash{display:flex;flex-direction:column;gap:14px;margin-top:18px;}
@media(min-width:700px){ .custdash{flex-direction:row;} .custdash .sec{flex:1;} }
/* vCustomerDetail() redesign (2026-07-09) — the original stacked 13-single-column-.sec layout made
   staff scroll past a lot of near-empty cards to see one customer. Reworked into the same 2-column
   responsive pattern as .custdash (stacked on a narrow phone, side-by-side once there's room —
   iPad landscape/desktop always qualifies at #app's 1180px max-width), plus a compact avatar+badge
   header and inline "value on the right, no separate input chrome until focused" rows so far more
   fits on one screen without scrolling. */
.custgrid{display:flex;flex-direction:column;gap:14px;}
@media(min-width:700px){ .custgrid{flex-direction:row;align-items:flex-start;} .custgrid>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;} }
/* 3rd column kicks in at iPad-landscape-and-up widths (owner 2026-07-09: "スクロールせずに見たい、
   3カラムでもいい") — #app's own max-width:1180px means 3 columns of ~370px each still have room
   to breathe. Below 1000px this rule is simply absent, so the 2-column @media(min-width:700px)
   block above still applies unmodified — narrower iPads/phones are unaffected. */
@media(min-width:1000px){ .custgrid.c3{gap:12px;} .custgrid.c3>div{gap:12px;} }
@media(min-width:1000px){ .custgrid.c3 .sec{padding:13px 14px;} .custgrid.c3 .sec h3{margin-bottom:9px;} }
.custhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:4px 0 2px;}
.custavatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(180deg,#e6bd63,#cfa143);
  color:var(--accTxt);display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;
  flex-shrink:0;}
.custhead .chdr{min-width:0;flex:1;}
.custhead h1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0;font-size:21px;}
.custhead .sub2{margin-top:2px;}
/* label-left / value-right row. Two variants share this spacing: an editable borderless input
   (only looks like an input once focused) while the customer profile is in EDIT mode, and a plain
   .rowval span while it's in read-only VIEW mode. 2026-07-09 v2: this screen used to be
   instantly-editable like every other Settings screen with no separate view/edit mode — owner
   feedback flipped that decision (an accidental tap risked silently overwriting real customer data
   with no way back), so vCustomerDetail() now renders one or the other depending on ui.custDraft. */
.rowline input[type=text],.rowline input[type=date],.rowline input[type=tel],.rowline input[type=email]{
  background:none;border:none;padding:2px 0;font-size:16px;font-weight:700;text-align:right;
  flex:1;min-width:110px;color:var(--txt);}
.rowline input:focus{outline:none;border-bottom:1.5px solid var(--acc);}
.rowline .rowval{font-size:16px;font-weight:700;text-align:right;flex:1;min-width:110px;color:var(--txt);}
.rowval.empty{color:var(--dim);font-weight:500;font-style:italic;}
/* view-mode note text (メモ/出禁 read-only paragraphs) — same size as the editable textarea it
   replaces, but plain text so nothing here can be tapped into and accidentally changed. */
.rownote{margin:0;font-size:15px;color:var(--txt);white-space:pre-wrap;}
/* small print under the nickname field explaining why it's the one required field — owner feedback
   2026-07-09: this used to reuse .sub2 (14px, same weight as the header subtitle) and read as too
   prominent for a hint. Given its own class so shrinking/dimming it doesn't also affect .sub2's
   other use as the customer-header subtitle line. */
.fieldnote{font-size:11px;color:var(--dim);margin-top:2px;line-height:1.4;}
/* colored-left-border note rows (メモ card) — same "category color bar" language as ticket rows
   elsewhere in the app (Admission=gold/Cast=violet/Waiter=blue/Request=pink dots) so 紹介者・指名・
   リスク・その他 read as distinct categories at a glance instead of 4 identical stacked textareas. */
.noterow{border-left:3px solid var(--line);padding:6px 0 6px 12px;margin-bottom:12px;}
.noterow:last-child{margin-bottom:0;}
.noterow.referrer{border-color:var(--blue);}
.noterow.nomination{border-color:var(--pink);}
.noterow.risk{border-color:var(--red);}
.noterow.other{border-color:var(--dim);}
.noterow label{display:block;font-size:12px;color:var(--dim);font-weight:700;letter-spacing:.3px;margin-bottom:3px;}
.noterow textarea{width:100%;background:none;border:none;color:var(--txt);font-size:15px;
  resize:vertical;padding:0;min-height:22px;cursor:help;}
.noterow textarea:focus{outline:none;cursor:text;}
/* placeholder text is instructional example copy, not real customer data — kept visually smaller/
   dimmer/italic than a filled-in note so an empty field never reads as "already has content" at a
   glance (owner feedback 2026-07-09: the original full-sentence placeholders were the same size as
   real notes and made every empty field look cluttered/full). The longer explanation that used to
   live in the placeholder now lives in the `title` attribute (hover tooltip) instead. */
.noterow textarea::placeholder{color:var(--dim);font-size:13px;font-style:italic;}
/* 来店履歴 stat boxes — 3-up on desktop, wraps on narrow screens. */
.statboxrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.statbox{flex:1;min-width:88px;background:var(--card2);border-radius:12px;padding:10px 8px;text-align:center;}
.statbox b{display:block;font-size:19px;font-variant-numeric:tabular-nums;}
.statbox span{font-size:11px;color:var(--dim);}
/* recent-visit mini list under the stat boxes */
.custvisitrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #232a38;
  font-size:14px;cursor:pointer;}
.custvisitrow:last-child{border-bottom:none;}
.custvisitrow .d{color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.custvisitrow .a{font-weight:800;font-variant-numeric:tabular-nums;}
/* bottle-keep progress bar — ★2026-07-31: no longer used by vCustomerDetail(); VIEW mode now
   renders the draggable .bottleslider below in its place. Kept because it is the read-only
   presentation of a remaining-% we will want again elsewhere (the planned bottle list), and it
   costs 3 rules. Do not describe it as "the view-mode display" — nothing renders it today. */
.bottlebar{height:6px;border-radius:4px;background:var(--card3);overflow:hidden;margin-top:5px;}
.bottlebar>i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#2fa876);}
.bottlebar.out>i{background:var(--red);width:100% !important;}
/* bottle-keep remaining-% slider (BOTH view and edit mode as of 2026-07-31) — owner feedback 2026-07-09: the old free-text
   "%" number box clipped 3-digit values like "100" and duplicated the .bottlebar next to it as two
   separate controls for one value. This replaces both with a single native range input whose track
   IS the fill bar (driven by the --pct custom property, updated live on drag — see the oninput
   handler in vCustomerDetail() — without ever calling render(), since a full re-render mid-drag
   would swap out this exact DOM node and abort the browser's native drag gesture). */
input[type=range].bottleslider{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  border-radius:4px;outline:none;cursor:pointer;margin:2px 0;
  background:linear-gradient(90deg,var(--green) 0%,var(--green) var(--pct,50%),var(--card3) var(--pct,50%),var(--card3) 100%);}
input[type=range].bottleslider.out{
  background:linear-gradient(90deg,var(--red) 0%,var(--red) var(--pct,0%),var(--card3) var(--pct,0%),var(--card3) 100%);}
input[type=range].bottleslider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--green);cursor:pointer;}
input[type=range].bottleslider.out::-webkit-slider-thumb{border-color:var(--red);}
input[type=range].bottleslider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--green);cursor:pointer;}
input[type=range].bottleslider.out::-moz-range-thumb{border-color:var(--red);}
input[type=range].bottleslider::-moz-range-track{height:6px;border-radius:4px;background:transparent;}
/* Installed-PWA top safe-area floor — deliberately placed LAST in the file.
   Root cause of the 2026-07-08 "header still overlaps the status bar" reports: several
   viewport-width media queries above set the `padding` SHORTHAND on .pbar/.homewrap (e.g.
   `.pbar{padding:8px}` under max-width:600px), which resets padding-top to a plain value and
   silently wipes out any earlier safe-area-aware padding-top — including a same-purpose
   standalone-mode block that used to sit right after the base .pbar rule near the top of this
   file. Putting the override HERE, after every other rule with equal (single-class) specificity,
   guarantees it wins the cascade no matter which viewport-width block also touches these
   selectors. display-mode:standalone only matches an installed PWA (never a plain Safari tab or
   iPad), so normal browser-tab / iPad spacing is completely unaffected. */
@media (display-mode: standalone){
  .topbar{padding-top:calc(28px + env(safe-area-inset-top)) !important;}
  .pbar{padding-top:calc(28px + env(safe-area-inset-top)) !important;}
  /* .homewrap intentionally NOT listed here — it wraps .topbar (via .hometop) on the home
     screen, and .topbar already gets the floor above. Adding it to .homewrap too would
     double the gap (see the note on .homewrap's own rule in the max-width:600px block). */
}

/* ================= 付け回し（配席表 / seating chart）— 2026-07-10 ================= */
.atwrap{padding:0 4px;}
/* 配席画面のヘッダーは縦の場所を食わないよう詰める（iPad1画面に収めるため） */
.atwrap .topbar{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:8px;gap:8px;}
.atwrap .topbar .btn{padding:8px 11px;font-size:13px;}
.attitle{font-size:17px;margin:0;}
.btn.atundo{border-color:var(--acc);color:var(--acc);font-weight:800;}
.btn.atundo.off{border-color:var(--line);color:var(--dim);font-weight:600;opacity:.55;}
/* 4カラム: 在籍 | 出勤 | 退勤 | テーブル。左3列は縦積みの人物リスト（名前アルファベット順）で
   25人規模でも各列が独立に縦スクロール。右列にテーブルを縦に並べる。ヘッダー分を差し引いた高さに収める。 */
/* 左3列（在籍/出勤/退勤）は名前＋時刻が見えれば十分なので細く。余った幅はテーブル側へ回す。
   iPad 1画面に収めるため全体を密に。テーブルは右エリアで複数列グリッドに折り返す（縦に積まない）。 */
/* 在籍は人数が多い(〜20+)ので幅を少し広めに取り2列で表示（下記 multicol）。出勤/待機・退勤は細い1列。 */
/* 各列は中身の高さに合わせて縮む（align-items:start）が、画面を超えたら列内でスクロール（max-height で
   1画面にキャップ）。→ 少人数なら短く、増えたらスクロールで1画面に収まる。max-height の 88px は
   ヘッダー＋余白のおおよそ。さらに --annH（アナウンスバーの実高さ、2026-07-13追加）も引く＝バー表示中は
   その分キャップを狭める。これが無いとバー表示中だけ 88px 分足りず、1画面に収まらずページスクロールが
   復活する（v0-51で一度直した問題の再発パターン）。※記録画面(.atboard 無し)はページスクロールのまま。 */
.atgrid4{display:grid;align-items:start;
  grid-template-columns:minmax(150px,206px) minmax(84px,116px) minmax(84px,116px) minmax(0,1fr);gap:8px;}
.atcol{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:7px;
  display:flex;flex-direction:column;min-height:120px;
  max-height:calc(100vh - 88px - var(--annH,0px));max-height:calc(100dvh - 88px - var(--annH,0px));overflow:hidden;}
/* 在籍列の折りたたみ: 1列目を細くして縦ラベルだけに。タップで展開。 */
.atgrid4.rostercollapsed{grid-template-columns:34px minmax(96px,132px) minmax(96px,132px) minmax(0,1fr);}
.atcol.collapsed{cursor:pointer;align-items:center;padding:8px 2px;}
.atcollstack{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--dim);font-weight:700;font-size:12px;}
.atcollstack .atexp{color:var(--acc);font-size:16px;}
.atcollstack .atcolllabel{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:2px;}
.atcollbtn{margin-left:auto;background:transparent;border:none;color:var(--dim);font-size:13px;cursor:pointer;padding:0 2px;line-height:1;}
.atcollbtn:active{color:var(--txt);}
.atcol .atzhead{flex:0 0 auto;}
/* テーブルは auto-fill グリッドで2〜3列に折り返し → 卓が多くても縦スクロールを最小化。
   overflow-y:auto と組にした overflow-x:hidden は本来「横スクロールバーを出さない」ためのものだが、
   その副作用として、放置アラート吹き出しの先頭バッジ(.atbubbleav、chip左端から-13pxはみ出す)が
   先頭列の卓カードで丸ごと切られてしまう（バッジは仕様上はみ出してOK、切れるのがNG）。
   padding-left で先頭列の左に逃げ場を作っておく＝クリップ境界をカードの外側まで広げる対策
   （2026-07-10 実機で発覚）。 */
.atrightcol{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-auto-rows:min-content;
  gap:8px;align-content:start;overflow-y:auto;overflow-x:hidden;min-height:0;
  max-height:calc(100vh - 88px - var(--annH,0px));max-height:calc(100dvh - 88px - var(--annH,0px));
  padding:0 0 8px 20px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.atzhead{color:var(--dim);font-size:13px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.atcount{background:var(--card2);border-radius:999px;padding:1px 8px;font-size:11px;color:var(--txt);}
.atchips{display:flex;flex-wrap:wrap;gap:6px;}
/* 左3列は縦一列＆縦スクロール。名前＋時刻だけ見えれば良いのでチップを詰める（アバターも小さめ）。 */
.atchips.vert{flex-direction:column;flex-wrap:nowrap;gap:4px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1 1 auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.atchips.vert .atchip{width:100%;gap:6px;padding:3px 6px 3px 3px;font-size:13px;border-width:2px;}
/* 在籍(未出勤)だけ2列に。multicol でアルファベット順を縦(列)方向に流し込み、縦の長さを約半分に＝
   20人規模でもスクロールなしで一覧できる。列内はチップを block(flex) 化して縦積み、途中で割れないように。 */
.atcol[data-zone=offshift] .atchips.vert{display:block;columns:2;column-gap:6px;}
.atcol[data-zone=offshift] .atchips.vert .atchip{display:flex;width:100%;margin:0 0 4px;break-inside:avoid;-webkit-column-break-inside:avoid;}
.atchips.vert .atav{width:22px;height:22px;font-size:10px;}
.atchips.vert .atname{line-height:1.15;}
.atchips.vert .atmeta{font-size:10px;}
.atempty{color:var(--dim);font-size:12px;padding:3px 2px;}
/* テーブルカード（1カード=1ゾーン。将来フロアプランへ差し替え可能なよう独立）。密度優先で余白控えめ。 */
.attable{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 9px;}
.atthead{display:flex;align-items:center;gap:7px;margin-bottom:6px;flex-wrap:wrap;}
/* 吹き出しが出る卓だけ、見出し行との間を広げて吹き出し（chip上にポップアップ）が見出しのボタンに
   被らないようにする（JS側 atTableCard で対象の卓だけ .hasbubble を付与）。 */
.attable.hasbubble .atthead{margin-bottom:26px;}
.attno{font-weight:900;font-size:16px;min-width:26px;}
.attgname{color:var(--dim);font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.atnombadge{background:var(--st-shimei);color:#231400;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:800;}
.atguestbtn{background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;cursor:pointer;flex:none;}
.atguestbtn:active{background:var(--card3);}
.atguestnum{min-width:28px;text-align:center;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;}
/* 伝票との食い違い警告 */
.atguestbtn.conflict{border-color:var(--red);color:var(--red);}
.attgname.conflict{color:var(--red);}
.atsliprow{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:12px;
  padding:8px 10px;border:1px solid var(--line);border-radius:10px;color:var(--dim);font-size:13px;flex-wrap:wrap;}
.atsliprow.conflict{border-color:var(--red);color:var(--red);}
.atsliprow .btn{flex:none;}
.atallwait{flex:none;padding:9px 12px;font-size:13px;}
.attable .atchips{gap:6px;}
.attable .atchip{padding:4px 8px 4px 4px;font-size:13px;}
.attable .atav{width:24px;height:24px;font-size:11px;}
/* ドロップゾーンのドラッグ中ハイライト */
.dropzone.dzhover{outline:2px solid var(--acc);outline-offset:-2px;background:#d4a94e14;}
/* 不可のドロップ先（在籍→退勤など）は赤枠＋🚫 でわかりやすく */
.dropzone.dzno{outline:2px solid var(--red);outline-offset:-2px;background:#e0566a1a;}
.atchip.atdragclone.no{border-color:var(--red);}
.atchip.atdragclone.no::after{content:"🚫";position:absolute;right:-8px;top:-10px;font-size:16px;}
/* キャストチップ — 枠色=ステータス色。touch-action:none で自前ドラッグにジェスチャを奪われない */
.atchip{display:inline-flex;align-items:center;gap:8px;background:var(--card2);border:2px solid var(--line);
  border-radius:12px;padding:6px 11px 6px 6px;font-size:15px;font-weight:600;user-select:none;touch-action:none;
  cursor:grab;max-width:100%;}
.atchip:active{cursor:grabbing;}
.atchip .atbody{display:flex;flex-direction:column;min-width:0;line-height:1.2;}
.atchip .atname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.atchip .atmeta{font-size:12px;color:var(--dim);font-weight:500;font-variant-numeric:tabular-nums;}
.atchip .atres{color:var(--st-yoyaku);font-weight:800;}
.atchip.resv{box-shadow:0 0 0 2px var(--st-yoyaku) inset;}
.atchip.atdragging{opacity:.35;}
.atchip.atdragclone{position:fixed;z-index:90;pointer-events:none;transform:translate(-50%,-50%);
  box-shadow:0 12px 28px #000a;opacity:.96;margin:0;}
/* 顔写真アバター（丸。無ければ頭文字プレースホルダ） */
.atav{width:32px;height:32px;border-radius:50%;flex:none;background:var(--card3) center/cover no-repeat;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--dim);overflow:hidden;}
.atav.ph{background:var(--card3);}
.atav.sm{width:24px;height:24px;font-size:11px;}
/* ステータス別の枠色。予約(st-yoyaku)は座席ステータスではない独立トグルなので従来どおり固定。 */
.st-shimei{border-color:var(--st-shimei);}
.st-dohan{border-color:var(--st-dohan);}
.st-yoyaku{border-color:var(--st-yoyaku);}
.st-help{border-color:var(--st-help);}
.st-free{border-color:var(--st-free);}
/* ★2026-07-23 座席ステータスの色はデータ駆動: seatStatusVars() が要素に --stc(下地色)/--stf(その上の
   文字色)をインラインで流す。店が色を変えても、将来ステータスが増えても CSS を書き足さなくてよい。
   ★複合セレクタ(0,2,0)で書くこと。`.stc` 単独だと後方の `.atstbtn{border:...}` 等(0,1,0・同順で後勝ち)に
   負けて枠色が付かない。 */
.atchip.stc,.atstbtn.stc,.atradbtn.stc,.atsegtbl.stc{border-color:var(--stc,var(--line));}
.atradbtn.stc.on,.atstbtn.stc.on{background:var(--stc);color:var(--stf,#fff);}
.tlbar.stc{background:var(--stc);color:var(--stf,#08111e);}
.bbrow .cchip.stc .ccn::before{background:var(--stc);}
/* 放射(サテライト)ステータスメニュー */
.atradial{position:fixed;inset:0;z-index:80;background:#0007;}
.atradcenter{position:fixed;transform:translate(-50%,-50%);background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:8px 12px;font-size:13px;font-weight:800;max-width:120px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;box-shadow:0 6px 18px #0009;}
.atradbtn{position:fixed;transform:translate(-50%,-50%);min-width:62px;padding:12px 8px;border-radius:14px;
  border:2px solid var(--line);background:var(--card2);color:var(--txt);font-size:14px;font-weight:800;
  box-shadow:0 6px 18px #0009;cursor:pointer;}
.atradbtn.st-shimei{border-color:var(--st-shimei);} .atradbtn.st-shimei.on{background:var(--st-shimei);color:#231400;}
.atradbtn.st-dohan{border-color:var(--st-dohan);} .atradbtn.st-dohan.on{background:var(--st-dohan);color:#04302b;}
.atradbtn.st-yoyaku{border-color:var(--st-yoyaku);} .atradbtn.st-yoyaku.on{background:var(--st-yoyaku);color:#05263a;}
.atradbtn.st-help{border-color:var(--st-help);} .atradbtn.st-help.on{background:var(--st-help);color:#1b2028;}
.atradbtn.st-free{border-color:var(--st-free);} .atradbtn.st-free.on{background:var(--st-free);color:#fff;}
.atradbtn.more{border-color:var(--line);color:var(--dim);}
.atradbtn.unseat{border-color:var(--red);color:var(--red);font-size:12px;}
/* 放置アラート: 段階的に赤の濃度・点滅速度・不透明度を上げ「一番放置されている子」を際立たせる。
   卓内はJS側で放置経過の降順ソート済み（最上段が最放置）。 */
.atchip.attn{color:#fff;position:relative;}
.atchip.attn-1{border-color:var(--attn-1);background:#e0566a22;animation:atglow-1 1.6s ease-in-out infinite;}
.atchip.attn-2{border-color:var(--attn-2);background:#f43f5e33;animation:atglow-2 1s ease-in-out infinite,atshake 2.2s ease-in-out infinite;}
.atchip.attn-3{border-color:var(--attn-3);background:#ff1e3c4d;box-shadow:0 0 10px #ff1e3c99,0 0 22px #ff1e3c4d;animation:atglow-3 .5s ease-in-out infinite,atshake .9s ease-in-out infinite;}
.atchip.attn .atmeta{color:#ffd9df;}
/* 派手演出OFF時: 段階の枠色/背景は残すが、点滅・シェイク・グロー・吹き出しは出さない。 */
.atchip.attn-off{animation:none !important;box-shadow:none !important;}
.atchip.attn-off .atbubble{display:none;}
/* opacity(不透明度)ではなく background/box-shadow の濃淡だけを点滅させる。opacity だとチップ全体＝
   中の吹き出し(atbubble)まで一緒に薄くなり文字が読みにくくなるため（2026-07-10 オーナー指摘）。 */
@keyframes atglow-1{0%,100%{background:#e0566a22;box-shadow:none;}50%{background:#e0566a4d;box-shadow:0 0 8px #e0566a77;}}
@keyframes atglow-2{0%,100%{background:#f43f5e33;box-shadow:0 0 4px #f43f5e55;}50%{background:#f43f5e5c;box-shadow:0 0 16px #f43f5eaa;}}
@keyframes atglow-3{0%,100%{background:#ff1e3c4d;box-shadow:0 0 10px #ff1e3c99,0 0 22px #ff1e3c4d;}50%{background:#ff1e3c7a;box-shadow:0 0 20px #ff1e3cdd,0 0 34px #ff1e3c88;}}
/* rotate は使わない: チップ本体からかなり離れた位置に浮く吹き出し(atbubble)まで一緒に回転させると
   てこの原理で大きく振れてしまい、隣の要素の裏に一瞬隠れて「点滅」して見える（2026-07-10 指摘）。
   横方向のtranslateXだけにして吹き出しの位置は安定させる。 */
@keyframes atshake{0%,53%,100%{transform:translateX(0);}55%{transform:translateX(-2px);}60%{transform:translateX(2px);}65%{transform:translateX(-2px);}70%{transform:translateX(2px);}75%{transform:translateX(0);}}
/* 卓カード内は左端ギリギリのチップも多く、中央寄せ(left:50%+translateX(-50%))だと左側が
   カード/列の外へはみ出て見切れることがあるため、チップの左端基準で右へ伸ばす（中央寄せしない）。 */
/* 登場アニメーションは付けない: この画面は30秒ごとに全体再描画され、その都度この吹き出しの
   DOMも作り直される。ポップイン(opacity:0→1)アニメーションを付けるとその再描画のたびに毎回
   最初からやり直され、結果的に「点滅しているように見える」原因になっていた（2026-07-10指摘）。
   常にopacity:1固定で文字を読みやすく保つ。 */
/* ☒は廃止（2026-07-10）: 吹き出し自体をタップすると消えるように。JS側(atChip)で
   pointerdown/click 双方を stopPropagation し、卓移動ドラッグが始まらないようにしている。 */
.atbubble{position:absolute;left:0;bottom:100%;margin-bottom:7px;
  background:#fff;color:#c1123a;font-weight:800;font-size:11px;line-height:1.3;
  width:max-content;max-width:180px;white-space:nowrap;
  padding:5px 9px 5px 21px;border-radius:999px;text-align:center;
  box-shadow:0 4px 14px #0007,0 0 0 2px var(--attn-2);z-index:6;pointer-events:auto;cursor:pointer;}
.atbubble:active{background:#f5f5f5;}
.atbubble::after{content:"";position:absolute;top:100%;left:27px;
  border:6px solid transparent;border-top-color:#fff;}
/* 吹き出し先頭の「怒ってるキャスト」アイコン。ピルの内側に詰め込まず、左端に半分はみ出す
   バッジ配置にしてバランスを取る（2026-07-10 オーナー確定案）。はみ出すこと自体はOKで、見切れる
   (クリップされる)のがNG——実際の防止策は下の .atrightcol の padding-left 側（そちらのコメント参照）。 */
.atbubbleav{position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;background:#c1123a;
  display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;
  box-shadow:0 0 0 2px #fff,0 0 0 3.5px #c1123a3d;}
@media (prefers-reduced-motion: reduce){ .atchip.attn{animation:none !important;} .atbubble{animation:none !important;} }
/* ステータス選択メニュー（.modal/.mbox 再利用） */
.atmenutitle{font-weight:800;font-size:18px;margin-bottom:14px;}
.atstatusgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px;}
.atstbtn{border:2px solid var(--line);background:var(--card2);color:var(--txt);border-radius:12px;
  padding:14px 6px;font-size:15px;font-weight:700;cursor:pointer;}
.atstbtn.st-shimei{border-color:var(--st-shimei);} .atstbtn.st-shimei.on{background:var(--st-shimei);color:#231400;}
.atstbtn.st-dohan{border-color:var(--st-dohan);} .atstbtn.st-dohan.on{background:var(--st-dohan);color:#04302b;}
.atstbtn.st-yoyaku{border-color:var(--st-yoyaku);} .atstbtn.st-yoyaku.on{background:var(--st-yoyaku);color:#05263a;}
.atstbtn.st-help{border-color:var(--st-help);} .atstbtn.st-help.on{background:var(--st-help);color:#1b2028;}
.atstbtn.st-free{border-color:var(--st-free);} .atstbtn.st-free.on{background:var(--st-free);color:#fff;}
.atquick{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.atquick .btn{flex:1 1 auto;}
/* 時刻・履歴編集 */
.attimeedit{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;}
.attgrp{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.attlbl{min-width:44px;color:var(--dim);font-size:13px;}
.attgrp input[type=time]{background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:7px 9px;font-size:15px;}
.atseg{background:var(--card2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;}
.atsegtbl{font-size:13px;font-weight:700;border-left:3px solid var(--line);padding-left:8px;}
.atsegtbl.st-shimei{border-color:var(--st-shimei);} .atsegtbl.st-dohan{border-color:var(--st-dohan);}
.atsegtbl.st-yoyaku{border-color:var(--st-yoyaku);} .atsegtbl.st-help{border-color:var(--st-help);}
.atsegtbl.st-free{border-color:var(--st-free);}
.atsegopen{color:var(--dim);font-size:15px;padding-left:50px;}
/* 名簿モーダル（顔写真つき） */
.atrostermbox{max-width:520px;}
.atrosteradd{display:flex;gap:8px;margin-bottom:12px;}
.atrosteradd input{flex:1;background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:11px;padding:12px 14px;font-size:16px;}
.atrosterlist{display:flex;flex-direction:column;gap:6px;max-height:56vh;overflow:auto;}
.atrosterrow{display:flex;gap:8px;align-items:center;}
.atrosterrow .atrostername{flex:1;background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:10px 12px;font-size:15px;}
.atrosterrow.off .atrostername{opacity:.5;text-decoration:line-through;}
.atrosterrow .atav{width:40px;height:40px;font-size:15px;border:1px solid var(--line);}
/* 当日の配席記録（席ごと） */
.atreport{display:flex;flex-direction:column;gap:12px;padding-bottom:24px;}
.atrepcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;}
.atrephdr{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
/* #3: 席ごとの記録を回転ごとに分ける小見出し（回転N／時刻／客名）。 */
.atrepturn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 2px 2px;padding-top:9px;border-top:1px dashed var(--line);font-size:12.5px;}
.atrephdr + .atrepturn{border-top:none;padding-top:2px;margin-top:2px;}
.atrepturn + .atreprow{border-top:none;}
.atrepturntime{font-weight:700;font-variant-numeric:tabular-nums;}
/* #5後半: 席ごとの記録に出すボトルバック目安（金色・タイムラインの入力と同色）。 */
.atrepback{background:var(--st-shimei);color:#231400;border-radius:8px;padding:1px 8px;font-size:12px;font-weight:800;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
/* 出戻り（同じ卓に2回目以降）の印。金額バッジ(.atrepback)と紛らわしくならないよう地味な枠線だけにする
   ＝この印はお金に一切効かない（指名もバックも増えない）ので、目立たせると誤解を生む。 */
.atrepret{border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:0 8px;font-size:11px;
  font-weight:700;white-space:nowrap;}
/* 席のステータス設定（設定→付け回し）。1件=1カードにして、呼び方・色・並び順・サテライト表示を
   縦に積む＝老眼＋片手操作でも各コントロールのタップ標的を大きく取れる。 */
.stslist{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.stsrow{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;}
.stshead{display:flex;align-items:center;gap:8px;}
.stsdot{width:14px;height:14px;border-radius:4px;flex:none;}
.stsswatches{display:flex;gap:8px;flex-wrap:wrap;}
.stsw{width:32px;height:32px;border-radius:9px;border:2px solid transparent;cursor:pointer;padding:0;}
.stsw.on{border-color:var(--txt);box-shadow:0 0 0 2px var(--bg) inset;}
.stsw:disabled{opacity:.45;cursor:default;}
.stssat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer;font-size:14px;}
.stssat input{width:20px;height:20px;}
.atreprow{display:flex;align-items:center;gap:10px;padding:9px 6px;border-top:1px solid var(--line);flex-wrap:wrap;cursor:pointer;border-radius:8px;}
.atreprow:first-of-type{border-top:none;}
.atreprow:hover,.atreprow:active{background:var(--card2);}
.atrepname{font-weight:700;min-width:80px;}
.atreptime{color:var(--txt);font-size:14px;}
.atrepdur{color:var(--dim);font-size:13px;}
.atrepedit{margin-left:auto;color:var(--dim);font-size:15px;}
.atrepst{color:var(--dim);font-size:12px;flex:1 1 100%;padding-left:34px;}
/* キャスト別 勤務時間 In/Out */
.atrepsec{font-weight:800;font-size:15px;color:var(--acc);}
/* 勤務時間テーブル（In/Out/計/同伴/指名/予約） */
.atwhtable{width:100%;border-collapse:collapse;font-size:14px;}
.atwhtable th{color:var(--dim);font-weight:700;font-size:12px;text-align:right;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap;}
.atwhtable th:first-child{text-align:left;}
.atwhtable td{padding:8px;border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.atwhtable tr.atwhtr{cursor:pointer;}
.atwhtable tr.atwhtr:hover,.atwhtable tr.atwhtr:active{background:var(--card2);}
.atwhname{display:flex;align-items:center;gap:8px;text-align:left!important;font-weight:700;}
.atwhtable .st-shimei-txt{color:var(--st-shimei);font-weight:800;}
.atwhtable .atrepedit{color:var(--dim);}
.atwhio{color:var(--txt);font-size:14px;font-variant-numeric:tabular-nums;}
.atrepday{color:var(--txt);font-weight:700;font-size:14px;min-width:64px;text-align:center;align-self:center;}
.btn.off{opacity:.4;}
/* iPad は縦(768〜834)でも4カラムを維持したいので、崩すのは 700px 未満（＝スマホ相当）だけ。 */
@media (max-width:699px){
  .atgrid4{grid-template-columns:1fr 1fr;}             /* スマホ幅ではページスクロールに戻す */
  .atcol{overflow:visible;max-height:none;min-height:0;}
  .atchips.vert{overflow:visible;}
  .atrightcol{grid-column:1 / -1;overflow:visible;max-height:none;grid-template-columns:1fr;}
  .atstatusgrid{grid-template-columns:1fr 1fr;}
}
@media print{
  .topbar{display:none;}
  .atrepcard{break-inside:avoid;border-color:#999;}
}

/* ---- 売上カレンダー (route.screen==="sales") — 2026-07-10 ---- */
.salnav{display:flex;gap:10px;align-items:center;margin-bottom:12px;}
.salttl{font-size:19px;font-weight:800;min-width:150px;text-align:center;font-variant-numeric:tabular-nums;}
.salcal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.salwd{text-align:center;color:var(--dim);font-size:12px;font-weight:700;padding:2px 0;}
.salcell{min-height:74px;border:1px solid var(--line);border-radius:10px;background:var(--card2);
  padding:6px 7px;display:flex;flex-direction:column;gap:2px;overflow:hidden;}
.salcell.blank{border:none;background:transparent;}
.salcell.future{opacity:.35;}
.salcell.has{cursor:pointer;}
.salcell.has:hover{border-color:var(--acc);}
.salcell.has:active{transform:scale(.97);}
.salcell.today{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset;}
.saldno{color:var(--dim);font-size:13px;font-weight:700;}
.salcell.today .saldno{color:var(--acc);}
.salamt{color:var(--acc);font-weight:800;font-size:14px;line-height:1.15;}
.salct{color:var(--dim);font-size:11px;}
.mbox.salday{max-width:640px;}
.saldlist{max-height:52vh;overflow-y:auto;margin:8px 0 14px;}
@media (max-width:699px){
  .salcell{min-height:60px;padding:4px 5px;}
  .salamt{font-size:13px;}
  .salct{display:none;} /* スマホ幅はセルが細いので金額のみ（組数は日詳細で見る） */
}

/* ===== 給料 日別グリッド（案B・日起点エディタ）===== */
:root{ --bottle:#b892e0; }
.gridscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;
  /* 横スクロールできることを見せる（60歳オーナーが「右に列がまだある」と気づけるように）。
     定番の scroll-shadow: cover(local=内容と一緒に動く)が端で影を隠し、shadow(scroll=枠に固定)が
     続きのある側だけ現れる。端まで送ると影が消える＝もう続きが無い合図。 */
  background:
    linear-gradient(to right, var(--card), rgba(23,27,35,0)) 0 0,
    linear-gradient(to left, var(--card), rgba(23,27,35,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) 0 0,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:30px 100%, 30px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;}
.sgrid{border-collapse:collapse;width:100%;font-size:13.5px;}
.sgrid thead th{background:var(--card2);color:var(--dim);font-weight:600;text-align:right;
  padding:8px 9px;font-size:12.5px;white-space:nowrap;border-bottom:1px solid var(--line);}
.sgrid thead th.l{text-align:left;}
.sgrid tbody td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;}
.sgrid tbody td.l{text-align:left;}
.sgrid tbody tr.sgrow:hover{background:var(--card2);}
.sgrid .daytot{font-weight:700;color:var(--acc);}
.sgrid .derived{color:var(--dim);}
.sgrid .caret{display:inline-block;width:16px;color:var(--dim);cursor:pointer;transition:transform .15s;}
.sgrid tr.sgrow.open .caret{transform:rotate(90deg);color:var(--acc);}
.sgrid .nm{cursor:pointer;} .sgrid .nm:active{opacity:.55;}
.sgrid tr.sgsub td{background:var(--bg);}
.sgrid .subrow{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding-left:18px;}
.sgrid .subtbl{font-weight:600;} .sgrid .guest{color:var(--dim);font-size:12.5px;}
.sgrid .bkins{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.sgrid .bkin{display:inline-flex;gap:3px;align-items:center;}
.sgrid input[type=number]{width:76px;text-align:right;padding:4px 6px;}
.sgrid input.hr{width:54px;}
.sgrid tfoot td{padding:9px;border-top:2px solid var(--acc);font-weight:700;text-align:right;background:var(--card2);}
.sgrid tfoot td.l{text-align:left;color:var(--dim);font-size:12px;}
.sgrid .foottot{color:var(--acc);}
/* 何時〜何時（表示専用・監査#3）。手修正日は参考として淡色化。 */
.sgrid .sgtimewrap{padding-left:20px;margin-top:1px;line-height:1.25;}
.sgrid .sgtime{font-size:12px;color:var(--dim);font-weight:400;white-space:nowrap;}
.sgrid .sgtime.ref{opacity:.85;} .sgrid .sgtime .rfl{opacity:.9;}
.sgrid .sgtime.orphan{color:var(--warn,#d80);}
/* カテゴリ数字＝タップで展開（純ビュー・書込なし） */
.sgrid .cnum{cursor:pointer;} .sgrid .cnum:active{opacity:.55;}
/* 卓子行の時刻・出典バッジ */
.sgrid .subtime{color:var(--dim);font-size:12.5px;margin-left:6px;white-space:nowrap;}
.sgrid .srcb{font-size:11.5px;color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:1px 5px;}
.sgrid .bkin .sgc-bottle{color:var(--bottle);}
.kd{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:4px;}
.sgc-shimei{color:var(--st-shimei);} .sgc-dohan{color:var(--st-dohan);}
.sgc-bottle{color:var(--bottle);} .sgc-tip{color:var(--st-help);}
.qh{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);color:var(--dim);font-size:13px;cursor:pointer;margin-left:6px;vertical-align:middle;}
.qh:active{background:var(--card2);}
/* 給料 週一覧のアクション3ゾーン（design-risk-auditor 監査 2026-07-24）:
   ①確認(安全) ②下書きを直す(↻残す=左/🗑消す=右) ③この週を締める(不可逆・危険ゾーン)。 */
.salact-check{margin-top:14px;}
.salzone{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;}
.salzone-h{font-size:13px;font-weight:700;color:var(--dim);margin-bottom:9px;letter-spacing:.02em;}
.salzone-h.warn{color:var(--warn,#d80);}
.salzone.danger{border-color:var(--warn,#d80);background:rgba(216,136,0,.05);}
.salclose-warn{margin:0 0 11px;font-size:13.5px;color:var(--warn,#d80);line-height:1.55;font-weight:600;}
.salsub{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.25;}
.salsub small{font-size:12.5px;font-weight:600;opacity:.85;}
/* タイムカードの頭文字ドリルダウン */
.tcinitbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;}
.tcinit{min-width:52px;padding:12px 10px;border-radius:12px;border:1px solid var(--line);background:var(--card);
  color:var(--txt);font-size:19px;font-weight:800;cursor:pointer;display:inline-flex;align-items:baseline;gap:5px;}
.tcinit small{font-size:12px;font-weight:600;color:var(--dim);}
.tcinit.on{background:var(--acc);color:var(--accTxt);border-color:var(--acc);}
.tcinit.on small{color:var(--accTxt);opacity:.8;}
/* ドリル時の既定非表示は tcApplyFilter（render 毎に実行）が inline で行う。CSS で display:none にすると
   カードの inline display:flex と競合し、選択時に "" へ戻しても CSS 側が勝って消える＝JS制御に一本化。
   万一 JS が走らなくても全カードが出る（誰も打刻導線から消えない）＝fail-open で安全側。 */
/* 棚卸しCSV一括のプレビュー */
.ivcsvsum{font-size:13px;font-weight:700;color:var(--dim);margin:8px 0 6px;}
.ivcsvlist{max-height:240px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:6px 8px;}
.ivcsvrow{display:flex;align-items:center;gap:8px;padding:5px 2px;border-bottom:1px solid var(--line);font-size:13px;}
.ivcsvrow:last-child{border-bottom:none;}
.ivcsvrow .nm{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ivcsvrow .ct{color:var(--dim);font-size:11.5px;white-space:nowrap;}
.ivcsvrow .q{font-variant-numeric:tabular-nums;min-width:34px;text-align:right;}
.ivcsvrow.err{color:var(--red);font-size:12px;}
.ivcsvrow .miss{color:var(--acc);cursor:help;}
.ivtag{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:10px;white-space:nowrap;}
.ivtag.new{background:#0f3320;color:#7fe0a8;}
.ivtag.upd{background:var(--card2);color:var(--dim);font-variant-numeric:tabular-nums;}
/* テーブルタイムライン */
/* タイムラインのモーダルが縦に長いと下（2回転目以降）が見切れてスクロールできなかった（要望#4）。
   高さを親(.modal=position:fixed;inset:0＝実ビューポート・padding24px)に対する max-height:100% で抑え、
   内部を overflow-y:auto でスクロールさせる。★vh は使わない＝一部のPWA/全画面文脈で vh が0に潰れ
   モーダルごと消える事故を避ける（.modal の実ピクセル高さを基準にするので安全）。 */
.tlmbox{max-width:min(94vw,760px);width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;}
.tlhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.tltbtn{font-size:11px;padding:3px 9px;margin-left:8px;}
.tlboard{overflow-x:auto;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 8px 14px 0;}
.tlgrid{position:relative;min-width:560px;--tllbl:152px;}
.tlaxis{position:relative;height:20px;margin-left:var(--tllbl);border-bottom:1px solid var(--line);}
.tltick{position:absolute;top:0;transform:translateX(-50%);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;}
.tlbrow{position:relative;margin-left:var(--tllbl);}
.tlchip{position:absolute;transform:translateX(-50%);background:var(--card2);color:var(--txt);border:1px solid var(--line);
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:14px;white-space:nowrap;cursor:pointer;z-index:5;display:inline-flex;align-items:center;gap:4px;}
.tlchip.on{background:var(--acc);color:var(--accTxt);border-color:var(--acc);}
.tlchip.inf{border-style:dashed;}
.tlchip .pr{font-variant-numeric:tabular-nums;opacity:.7;}
.tlchip .approx{color:var(--dim);font-weight:600;}
.tlline{position:absolute;top:20px;width:2px;background:var(--acc);opacity:.4;z-index:1;cursor:pointer;border-radius:2px;}
.tlline.on{opacity:.95;box-shadow:0 0 8px 1px rgba(212,169,78,.5);}
.tlline.inf{background:repeating-linear-gradient(180deg,var(--acc),var(--acc) 4px,transparent 4px,transparent 8px);opacity:.5;}
.tlrows{position:relative;z-index:2;}
.tlrow{display:flex;align-items:center;height:46px;}
/* #5後半: ボトルカード（タイムライン下）。各ボトル＝開栓時刻の在卓キャストに入力欄＋「＋追加」。 */
.bbwrap{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.bbcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 12px;}
.bbhd{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;}
.bbhd .bbn{font-weight:800;font-size:14px;}
.bbhd .bbp{color:var(--acc);font-weight:800;}
.bbhd .bbt{color:var(--dim);font-size:12px;margin-left:auto;font-variant-numeric:tabular-nums;}
.bbrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.bbrow .cchip{display:inline-flex;align-items:center;gap:7px;background:var(--card2);border:1px solid var(--line);
  border-radius:10px;padding:4px 6px 4px 10px;}
.bbrow .cchip .ccn{font-weight:700;font-size:13px;white-space:nowrap;}
.bbrow .cchip .ccn::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--st-free);display:inline-block;margin-right:6px;}
.bbrow .cchip.st-shimei .ccn::before{background:var(--st-shimei);}
.bbrow .cchip.st-dohan .ccn::before{background:var(--st-dohan);}
.bbrow .cchip.st-help .ccn::before{background:var(--st-help);}
.bbrow .cchip.added{border-style:dashed;}
.bbrow .cchip.added .ccn::before{background:var(--dim);}
.bbrow .binp{width:60px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--acc);
  font-weight:800;font-size:13px;text-align:right;padding:4px 8px;font-family:inherit;font-variant-numeric:tabular-nums;}
.bbrow .binp:focus{outline:2px solid var(--acc);outline-offset:-1px;}
.bbadd{font-size:12px;}
/* ボトルのバック合計（表示専用・調整の目安）。カード下端に薄い区切りで。 */
.bbsum{display:flex;align-items:baseline;gap:8px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);}
.bbsum .num{color:var(--acc);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;}
.bbsum .bbpct{opacity:.7;}
.pickgrid{display:flex;flex-wrap:wrap;gap:8px;}
.pickgrid .btn{font-size:14px;}
.tllbl{width:var(--tllbl);flex:0 0 var(--tllbl);display:flex;align-items:center;gap:7px;padding-left:8px;min-width:0;}
.tlnm{font-size:16.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tlnm .note{font-weight:500;}
.tltrack{position:relative;flex:1;height:100%;}
.tlbar{position:absolute;top:10px;height:26px;border-radius:7px;background:#4a6a9e;color:#08111e;
  display:flex;align-items:center;padding:0 8px;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;
  font-variant-numeric:tabular-nums;transition:opacity .15s,box-shadow .15s;}
/* #5: 在卓バーをステータスで色分け（指名=金／同伴=青緑／ヘルプ=灰／フリー=濃灰）。予約は青の内枠。 */
.tlbar.st-shimei{background:var(--st-shimei);}
.tlbar.st-dohan{background:var(--st-dohan);}
.tlbar.st-help{background:var(--st-help);}
.tlbar.st-free{background:var(--st-free);color:#f1f5f9;}
.tlbar.resv{box-shadow:inset 0 0 0 2px var(--st-yoyaku);}
.tllegend{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 8px 2px;font-size:12px;color:var(--dim);}
.tllegend .lg{display:inline-flex;align-items:center;gap:5px;}
.tllegend .sw{width:13px;height:13px;border-radius:4px;display:inline-block;}
.tltrack.dim .tlbar{opacity:.16;}
.tltrack.hit .tlbar{box-shadow:0 0 0 2px var(--acc);}
/* 回転（伝票）ごとのブロック */
.tlturn{margin-bottom:14px;}
.tlturn+.tlturn{padding-top:12px;border-top:1px dashed var(--line);}
.tlturnhdr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px 2px;font-size:13px;}
.tlturnno{background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:2px 9px;font-weight:800;font-size:12px;}
.tlturntime{font-weight:700;font-variant-numeric:tabular-nums;}
.tlturnname{color:var(--txt);font-weight:700;}
.tlturnopen{color:var(--acc);font-weight:700;font-size:12px;}
.tlturnpresent{color:var(--dim);margin-left:auto;font-size:12.5px;}
.btn.xs{padding:7px 12px;font-size:13px;}

/* 配席の記録とバック行の種別が食い違っている時の差異チップ（給料④）。金額は勝手に動かさず、
   人が「合わせる」を1タップで決める＝黙って金が動く経路を作らない。 */
.salmis{flex-basis:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;
  font-size:12px;color:var(--st-shimei);}

/* 段B: カスタム席ステータス（設定→付け回し）。引退の折り畳みと未設定警告。 */
.stsrow.custom{border-color:var(--acc);}
.stsrow .stswarn{color:var(--st-shimei);font-size:12px;}
.stsretired{margin-top:10px;}
.stsretired summary{cursor:pointer;color:var(--dim);font-size:13px;padding:6px 0;}
.stsrow.retired{opacity:.65;padding:8px 10px;}

/* 行灯ナビタブの節の折り畳み（案A・2026-07-31 / navi.js の naviFold）。
   ★.stsretired を土台にするが、summary の見た目は【.sec h3 と同じ】に戻す。あちらの h3 も
     元から 13px・dim・大文字なので、揃えれば「見出しがそのままボタンになった」ように見え、
     行灯ナビタブだけ字が細くなることがない（畳んだのは見出しを弱めるためではない）。
   ★display:flex は summary の既定の三角マーカーを消す。消したまま出すと「押せる」ことが
     どこにも表れないので、▸/▾ を ::after で必ず出す（60歳のオーナーが開けない画面にしない）。 */
.navifold{margin:0 0 10px;}
.navifold>summary{cursor:pointer;color:var(--dim);font-size:13px;text-transform:uppercase;
  letter-spacing:1.5px;display:flex;align-items:center;gap:8px;padding:10px 0;
  -webkit-user-select:none;user-select:none;}
.navifold>summary::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--acc);
  display:inline-block;flex:0 0 auto;}
.navifold>summary::after{content:"▾";font-size:12px;letter-spacing:0;color:var(--dim);flex:0 0 auto;}
.navifold:not([open])>summary::after{content:"▸";}
.navifold>summary:hover{color:var(--fg);}
.navifoldbody{padding-bottom:6px;}
/* 「未入力◯件 / 入力ずみ」。必須ではないので警告色（赤）にはしない。 */
.navifoldbadge{margin-left:auto;font-size:12px;letter-spacing:0;text-transform:none;
  border-radius:999px;padding:2px 10px;background:var(--card3);color:var(--acc);}
.navifoldbadge.done{color:var(--dim);}

/* ---- 行灯ナビ: 入力欄の隣に本物のプレビュー（WPのカスタマイザーと同じ形）--------
   ★広い画面では右に貼り付いたまま（sticky）。入力しながら見えていないと、
     「打った → 見に行く → 戻る」で毎回どこを触っていたか分からなくなる。
   ★狭い画面（iPad縦）は2列に割ると欄が潰れるので、上に積む。
     このとき下に置くと長い一枚の最下部＝実質見えないので、必ず【上】。
   ★中身は iframe。公開ページのCSSを丸ごと流し込むので、POS側のCSSと混ざらない。 */
.navisplit{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;}
.naviform{min-width:0;}
.navipvwrap{min-width:0;}
.navipvhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 8px;}
.navipvttl{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);font-weight:700;}
.navipvtabs{display:flex;gap:6px;margin-left:auto;}
.navipvtabs .chip{font-size:13px;padding:5px 12px;}
.navipvframe{display:block;width:100%;height:46vh;border:1px solid var(--line);border-radius:12px;
  background:#131210;}
.navipvnote{margin:8px 0 0;line-height:1.7;}
@media(min-width:1120px){
  .navisplit{grid-template-columns:minmax(0,1fr) 400px;}
  .naviform{grid-column:1;grid-row:1;}
  .navipvwrap{grid-column:2;grid-row:1;position:sticky;top:10px;}
  .navipvhead{margin-top:18px;}
  .navipvframe{height:min(72vh,780px);}
  /* ★この画面だけ body の overflow-x を clip にする（2026-07-31・実測して特定）。
     html,body の `overflow-x:hidden`（横のはみ出し止め・上の長いコメント参照）は、
     **body 自身をスクロール容器にしてしまう**。body は伸び切っていて自分ではスクロール
     しないので、中の position:sticky は「留まる先」が動かず、留まらずに一緒に流れる。
     `clip` はスクロール容器を作らないので、横の抑止はそのままに sticky だけが生き返る。
     ★hidden→clip の差し替えはこの画面（.navisplit がある時）に閉じる。html 側は触らない。
     ★:has() か overflow:clip が無い端末では単に元の挙動（プレビューが一緒に流れる）に戻るだけ。 */
  body:has(.navisplit){overflow-x:clip;}
}

/* 当日の記録: キャストと裏方(ウェイター等)のセクション見出し。裏方は指名系の列を持たない別表。 */
.atwhsub{font-size:12px;letter-spacing:.08em;color:var(--dim);font-weight:700;margin:12px 0 4px 2px;}
.atwhsub:first-child{margin-top:0;}

/* ===== 設定ホーム（Phase2 2026-07-25）: 11タブ一列 → 5大カード。老眼・暗所・片手向けに大きなタップ標的。 */
.setcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px;padding:6px 0 26px;}
.setcard{display:flex;align-items:center;gap:16px;text-align:left;width:100%;padding:20px 22px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;cursor:pointer;color:inherit;font:inherit;
  transition:border-color .12s ease,background .12s ease;}
.setcard:hover{border-color:var(--acc);background:var(--card2);}
.setcard:active{transform:translateY(1px);}
.setcard-ic{font-size:34px;line-height:1;flex:none;width:46px;text-align:center;}
.setcard-tx{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
.setcard-t{font-size:19px;font-weight:800;}
.setcard-d{font-size:14px;color:var(--dim);}
.setcard-arr{font-size:26px;color:var(--dim);flex:none;}

/* 時間で取る行が 0 時間のときの印（design-risk-auditor 2026-07-29 H5）。
   「まだ始まっていない」「時刻が逆転している」を、$0 の行として黙って並べないための目印。
   暗い店内で走りながら見る面なので、色だけに頼らず文字も出す（この class は文字に掛かる）。 */
.zeroh{color:var(--attn-3);font-weight:800;}

/* ---- 開店準備カード（2-B・2026-07-29）------------------------------------------------
   白紙の店で「あと何をすれば営業できるか」を1枚で見せる。全部済むと消える（vSetupCard）。
   ★60歳オーナー前提: 文字は詰めない・タップ標的は十分大きく・「未設定」でなく「◯◯を決める」と書く。 */
.setupcard{margin:10px 14px 0;padding:12px 14px;border:1px solid var(--acc);border-radius:14px;
  background:linear-gradient(180deg,rgba(212,169,78,.10),rgba(212,169,78,.03));}
.setuphd{font-weight:800;font-size:15px;margin-bottom:9px;display:flex;align-items:center;gap:9px;}
.setupcnt{font-weight:700;font-size:13px;color:var(--acc);background:rgba(212,169,78,.14);
  padding:2px 9px;border-radius:999px;}
.setuprow{display:flex;flex-wrap:wrap;gap:8px;}
.setupchip{font-size:14px;font-weight:700;padding:10px 14px;min-height:44px;border-radius:11px;
  border:1px solid var(--line);background:var(--card2);color:var(--txt);cursor:pointer;}
.setupchip.done{opacity:.5;font-weight:500;border-style:dashed;}
.setupchip:not(.done){border-color:var(--acc);}