/* Combtone: tokens (SPEC §10.1), page shell, signboards, paper cards, buttons, form rows, sheets, toasts, notices (scaffold).
   wall.css (wall), fx.css (look), table.css (table), rooms.css (rooms) and daily.css (daily-client) add their parts on top; they may use every
   token and class below.
   RULES: the wall is pure flat colour on --mat (#808080 in every theme). Nothing in this file applies an effect (no shadows, no
   translucency, no blending, no colour ramps, no animation) to a chip or to .wall-mat. While a wall is on screen (body.wall-on) the chrome is ink / paper / white only:
   signage colours (--sign, --tag, --aisle) and Kraft appear on no-wall screens only.
   Text size: html[data-text="100|115|130"] scales every --fs-* token, so use the tokens (or calc(Npx * var(--tx))). */
:root{
  /* Daylight (default), §10.1 */
  --paper:#f4f2ed; --card:#ffffff; --ink:#16171a; --ink-2:#4a4c52; --rule:#d8d5ce;
  --mat:#808080; --mat-edge:#6e6e6e;
  --sign:#ff5a1f; --tag:#ffd23f; --aisle:#1f46d6;
  /* helpers */
  --sign-ink:#16171a; --on-aisle:#ffffff; --under:rgba(22,23,26,.1); --scrim:rgba(22,23,26,.55); --focus:var(--aisle);
  --font-sign:"Arial Black","Arial Bold","Helvetica Neue",system-ui,sans-serif;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-code:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --tx:1; --anim:300ms;                          /* main.js sets --anim: 300 (full) or 120 (reduced motion) */
  --fs-xs:calc(12px * var(--tx)); --fs-s:calc(14px * var(--tx)); --fs-m:calc(16px * var(--tx)); --fs-l:calc(18px * var(--tx));
  --fs-xl:calc(22px * var(--tx)); --fs-xxl:calc(28px * var(--tx)); --fs-ticket:calc(28px * var(--tx));
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --radius:6px; --bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3.2' fill='%2316171a'/%3E%3C/svg%3E");
}
html[data-text="115"]{ --tx:1.15; }
html[data-text="130"]{ --tx:1.3; }
html[data-theme="lateshift"]{
  --paper:#17181b; --card:#222428; --ink:#f1f1ef; --ink-2:#b5b7bd; --rule:#3a3c42;
  --aisle:#4f73ff; --under:rgba(0,0,0,.4); --scrim:rgba(0,0,0,.65);
}
/* Kraft Paper: no-wall screens only. A wall screen sets body.wall-on and falls back to the Daylight chrome. */
html[data-theme="kraft"]{ --paper:#e6dccb; --card:#f3ece0; --rule:#cdbfa6; }
html[data-theme="kraft"] body.wall-on{ --paper:#f4f2ed; --card:#ffffff; --rule:#d8d5ce; }
/* A wall is on screen: ink / paper / white chrome only (signage colours off). */
body.wall-on{ --focus:var(--ink); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ margin:0; padding:0; min-height:100%; }
body{
  font:400 var(--fs-m)/1.4 var(--font-ui); color:var(--ink); background:var(--paper);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; overscroll-behavior:none; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:var(--ink); text-underline-offset:3px; }
h1,h2,h3{ margin:0; line-height:1.15; }
h1{ font-size:var(--fs-xxl); font-weight:900; } h2{ font-size:var(--fs-xl); font-weight:800; } h3{ font-size:var(--fs-l); font-weight:800; }
p{ margin:0 0 10px; }
code,.code{ font-family:var(--font-code); }
.dim{ color:var(--ink-2); } .small{ font-size:var(--fs-s); } .center{ text-align:center; } .num{ font-variant-numeric:tabular-nums; }
.nowrap{ white-space:nowrap; } .sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sign-type{ font-family:var(--font-sign); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; }
:focus{ outline:none; }
html[data-kbd="1"] :focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
[hidden]{ display:none!important; }
.noselect{ user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
/* iOS long-press guards (§9.4): a held button, tab, slip card, signboard or sale tag never selects text or shows the callout. Text fields and reading text stay selectable. */
button, summary, [role="button"], [role="tab"], .btn, .opt, .tile, .iconbtn, .linkbtn, .fx-card, .rq-slip, .signboard, .saletag, .aisle-h, .tb-ticket{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

/* ---------- page shell ---------- */
#app{ position:relative; z-index:1; min-height:100%; }
#overlays{ position:fixed; inset:0; z-index:40; pointer-events:none; }
#overlays > *{ pointer-events:auto; }
#boot{ position:fixed; inset:0; display:grid; place-items:center; z-index:2; font-family:var(--font-sign); font-weight:900; text-transform:uppercase; color:var(--ink-2); background:var(--paper); }
noscript{ display:block; padding:24px; text-align:center; }

/* A menu screen: a scrollable column, max 480 wide, safe-area padded. */
.screen{ position:relative; width:100%; max-width:480px; min-height:100dvh; margin:0 auto; display:flex; flex-direction:column; gap:12px;
  padding:calc(var(--sat) + 10px) calc(var(--sar) + 16px) calc(var(--sab) + 18px) calc(var(--sal) + 16px); }
.screen.tight{ gap:8px; }
.screen > :empty{ display:none; }
.top{ display:flex; align-items:center; gap:10px; min-height:48px; }
.top h1{ flex:1; font-size:var(--fs-xl); }
.top .back{ flex:0 0 auto; }
.grow{ flex:1 1 auto; } .row{ display:flex; gap:10px; align-items:center; } .row.wrap{ flex-wrap:wrap; } .row.split{ justify-content:space-between; }
.stack{ display:flex; flex-direction:column; gap:10px; }
.gap-s{ gap:6px; } .gap-l{ gap:18px; }
.sticky-bottom{ position:sticky; bottom:0; padding:12px 0 calc(var(--sab) + 4px); margin-top:auto; background:var(--paper); border-top:1px solid var(--rule); z-index:5; }

/* ---------- the wall mat (SPEC §2, §10.1): fixed grey in every theme, a 2 px frame, nothing else ---------- */
.wall-mat, .lmat{ background-color:var(--mat); border:2px solid var(--mat-edge); }   /* wall.css (wall agent) adds the SVG-hosting layout to .wall-mat */

/* ---------- signboards: safety-orange rectangles, 4 px radius, 3 px ink border, a bolt dot in each corner, heavy caps ---------- */
.signboard{
  position:relative; padding:12px 22px; border:3px solid var(--sign-ink); border-radius:4px; background-color:var(--sign); color:var(--sign-ink);
  font-family:var(--font-sign); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:1.05;
  background-image:var(--bolt),var(--bolt),var(--bolt),var(--bolt); background-repeat:no-repeat; background-size:8px 8px;
  background-position:5px 5px,calc(100% - 5px) 5px,5px calc(100% - 5px),calc(100% - 5px) calc(100% - 5px);
}
.signboard.big{ font-size:calc(32px * var(--tx)); text-align:center; padding:10px 22px; }
.signboard.blue{ background-color:var(--aisle); color:var(--on-aisle); }
body.wall-on .signboard{ background-color:var(--card); color:var(--ink); border-color:var(--ink); background-image:none; }
/* aisle-sign header: a section label on no-wall screens */
.aisle-h{ display:inline-block; align-self:flex-start; padding:3px 10px; border-radius:3px; background:var(--aisle); color:var(--on-aisle);
  font-family:var(--font-sign); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; font-size:var(--fs-s); line-height:1.3; margin-bottom:8px; }
body.wall-on .aisle-h{ background:var(--ink); color:var(--paper); }
/* sale-tag sticker */
.saletag{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border:2px solid #16171a; border-radius:3px; background:var(--tag); color:#16171a;
  font-family:var(--font-sign); font-weight:900; text-transform:uppercase; font-size:var(--fs-xs); line-height:1.4; transform:rotate(-2deg); }
body.wall-on .saletag{ background:var(--card); color:var(--ink); border-color:var(--ink); }

/* ---------- paper cards: white, 6 px radius, a punched hole at the top, a 1 px rule, a soft under-edge (cards only, never the wall) ---------- */
.card{ position:relative; background:var(--card); border:1px solid var(--rule); border-radius:6px; padding:14px; box-shadow:0 2px 0 var(--under); }
.card.punch{ padding-top:26px; }
.card.punch::before{ content:""; position:absolute; top:7px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--paper); border:1px solid var(--rule); }
.card h2{ margin-bottom:8px; }
.card .lead{ color:var(--ink-2); margin-bottom:8px; }
details.card > summary{ list-style:none; cursor:pointer; min-height:44px; font-weight:800; display:flex; align-items:center; gap:8px; }
details.card > summary::-webkit-details-marker{ display:none; }
details.card > summary::after{ content:"▾"; margin-left:auto; color:var(--ink-2); }
details.card[open] > summary::after{ content:"▴"; }
details.card[open] > summary{ margin-bottom:10px; }

/* ---------- buttons: rectangles, 4 px radius, >= 44 px tall, immediate press feedback (.pressed on pointerdown, held >= 90 ms) ---------- */
.btn{ --bg:var(--card); --fg:var(--ink); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; min-width:48px; padding:10px 16px;
  border:2px solid var(--bd); border-radius:4px; background:var(--bg); color:var(--fg); font-weight:800; font-size:var(--fs-l); line-height:1.15; text-align:center;
  box-shadow:0 3px 0 var(--ink); position:relative; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  transition:transform 60ms ease, box-shadow 60ms ease; text-decoration:none; }
.btn.pressed, .btn:active{ transform:translateY(3px); box-shadow:0 0 0 var(--ink); }
.btn.big{ min-height:56px; font-size:calc(19px * var(--tx)); } .btn.wide{ width:100%; } .btn.small{ min-height:44px; padding:6px 12px; font-size:var(--fs-s); }
.btn.primary{ --bg:var(--sign); --fg:var(--sign-ink); --bd:var(--sign-ink); box-shadow:0 3px 0 var(--sign-ink); font-family:var(--font-sign); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; }
.btn.primary.pressed, .btn.primary:active{ box-shadow:0 0 0 var(--sign-ink); }
body.wall-on .btn.primary{ --bg:var(--ink); --fg:var(--paper); --bd:var(--ink); box-shadow:0 3px 0 var(--ink); }
.btn.secondary{ --bg:var(--card); --fg:var(--ink); --bd:var(--ink); }
.btn.quiet{ --bg:transparent; --fg:var(--ink); --bd:var(--rule); box-shadow:none; }
.btn.quiet.pressed{ transform:translateY(2px); box-shadow:none; }
.btn.danger{ --bg:var(--card); --fg:var(--ink); --bd:var(--ink); border-style:double; border-width:5px; padding:8px 14px; }
.btn[disabled]{ --bg:var(--paper); --fg:var(--ink-2); --bd:var(--rule); border-style:dashed; box-shadow:none; pointer-events:none; }
.btn[aria-disabled="true"]{ --bg:var(--paper); --fg:var(--ink-2); --bd:var(--ink-2); border-style:dashed; box-shadow:none; }   /* still tappable: the tap explains why (toast) */
.btn .sub{ display:block; font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:600; text-transform:none; letter-spacing:0; }
.btn.stacked{ flex-direction:column; gap:2px; }
.linkbtn{ background:none; border:0; padding:10px 8px; min-height:44px; min-width:44px; color:var(--ink); text-decoration:underline; text-underline-offset:3px; font-size:var(--fs-s); font-weight:700; border-radius:4px; }
.linkbtn.muted{ color:var(--ink-2); font-weight:600; }
.linkbtn.pressed{ text-decoration-thickness:3px; }
.iconbtn{ min-width:48px; padding:10px; }

/* ---------- form controls ---------- */
.toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:6px 0; border-top:1px solid var(--rule); }
.toggle:first-child{ border-top:0; }
.toggle .tl{ display:flex; flex-direction:column; min-width:0; }
.toggle .tt{ font-weight:700; } .toggle .sub{ font-size:var(--fs-s); color:var(--ink-2); }
.seg{ display:inline-flex; border:2px solid var(--ink); border-radius:4px; background:var(--card); overflow:hidden; flex:0 0 auto; max-width:64%; flex-wrap:wrap; justify-content:flex-end; }
.seg .btn{ min-height:44px; padding:6px 12px; font-size:var(--fs-s); font-weight:700; --bg:var(--card); --fg:var(--ink); --bd:transparent; box-shadow:none; border-radius:0; border-width:0; }
.seg .btn + .btn{ border-left:2px solid var(--ink); }
.seg .btn[aria-pressed="true"]{ --bg:var(--ink); --fg:var(--paper); }
.seg .btn[aria-pressed="true"]::before{ content:"✓ "; }
.seg .btn.pressed{ transform:none; box-shadow:none; text-decoration:underline; }
.seg .btn[aria-disabled="true"]{ border-style:solid; --bd:transparent; }
.btn.sw{ min-width:76px; min-height:44px; padding:6px 14px; font-size:var(--fs-s); box-shadow:none; --bg:var(--card); }
.btn.sw[aria-pressed="true"]{ --bg:var(--ink); --fg:var(--paper); }
.btn.sw[aria-pressed="true"]::before{ content:"✓ "; }
.toggle.col{ flex-direction:column; align-items:stretch; gap:6px; padding:10px 0; } .toggle.col .seg{ max-width:none; width:100%; justify-content:stretch; } .toggle.col .seg .btn{ flex:1 1 0; padding-left:6px; padding-right:6px; }
.field{ display:flex; flex-direction:column; gap:4px; } .field > span{ font-size:var(--fs-s); color:var(--ink-2); font-weight:600; }
input.text, textarea.text, select.text{ width:100%; min-height:48px; padding:10px 12px; border-radius:4px; border:2px solid var(--ink); background:var(--card); color:var(--ink); font-size:var(--fs-l); }
input.text:focus, textarea.text:focus, select.text:focus{ border-color:var(--focus); }
input.code{ text-transform:uppercase; letter-spacing:.35em; text-align:center; font-weight:800; font-size:var(--fs-xl); font-family:var(--font-code); }
textarea.text{ min-height:96px; resize:vertical; font-size:var(--fs-s); font-family:var(--font-code); }
.err{ font-size:var(--fs-s); font-weight:700; } .err:empty{ display:none; } .err:not(:empty)::before{ content:"! "; }
.okmsg{ font-size:var(--fs-s); font-weight:700; } .okmsg::before{ content:"✓ "; }
.chip{ display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:2px 10px; border-radius:999px; border:1.5px solid var(--ink); background:var(--card); font-size:var(--fs-xs); font-weight:700; }
.chip.good::before{ content:"✓"; } .chip.warn::before{ content:"!"; }
.badge{ min-width:22px; height:22px; padding:0 6px; border-radius:3px; background:var(--ink); color:var(--paper); font:800 var(--fs-xs)/22px var(--font-ui); text-align:center; }

/* ---------- Title ---------- */
.logo-fan{ display:block; margin:0 auto; width:min(36%,132px); height:auto; overflow:visible; }
.title-mark{ display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:2px; }
.title-mark .signboard{ width:100%; }
.title-mark .tagline{ color:var(--ink-2); font-size:var(--fs-s); text-align:center; }
.menu{ display:flex; flex-direction:column; gap:10px; }
.menu > .btn{ width:100%; justify-content:space-between; text-align:left; padding-left:16px; padding-right:16px; }
.menu > .btn .lab{ display:flex; flex-direction:column; align-items:flex-start; }
.menu > .btn .go{ font-size:var(--fs-xl); line-height:1; }
.menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.menu-grid > .btn{ flex-direction:column; align-items:flex-start; justify-content:center; text-align:left; min-height:72px; padding:10px 12px; gap:2px; font-size:var(--fs-m); }
.menu-grid .lab{ display:flex; flex-direction:column; align-items:flex-start; }
.joinrow{ display:flex; gap:10px; } .joinrow input{ flex:1; min-width:0; } .joinrow .btn{ flex:0 0 auto; }
.foot{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 4px; margin-top:auto; padding-top:6px; }
.hint{ display:flex; align-items:center; gap:10px; }
.hint .ht{ flex:1; font-size:var(--fs-s); }

/* ---------- stat tiles, lists, XP, cosmetics, ladder ---------- */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tile{ background:var(--paper); border:1px solid var(--rule); border-radius:4px; padding:8px 6px; text-align:center; }
.tile b{ display:block; font:900 var(--fs-xl)/1.1 var(--font-sign); font-variant-numeric:tabular-nums; } .tile span{ font-size:var(--fs-xs); color:var(--ink-2); }
.list{ list-style:none; margin:0; padding:0; } .list li{ display:flex; gap:10px; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid var(--rule); min-height:40px; }
.list li:first-child{ border-top:0; }
.xpbar{ height:14px; border:2px solid var(--ink); border-radius:2px; background:var(--paper); overflow:hidden; } .xpbar > i{ display:block; height:100%; background:var(--ink); }
.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{ min-height:56px; padding:6px 12px; border-radius:4px; background:var(--card); border:2px solid var(--rule); text-align:left; font-weight:700; font-size:var(--fs-s); flex:1 1 40%; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.opt[aria-pressed="true"]{ border-color:var(--ink); background:var(--paper); }
.opt[aria-pressed="true"]::before{ content:"✓ "; }
.opt[aria-disabled="true"]{ border-style:dashed; color:var(--ink-2); } .opt small{ display:block; font-weight:500; color:var(--ink-2); font-size:var(--fs-xs); }
.ladder{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ladder li{ display:flex; gap:12px; align-items:flex-start; padding:8px 10px; border-radius:4px; border:1px solid var(--rule); background:var(--card); }
.ladder li.got{ background:var(--paper); } .ladder li.now{ border:2px solid var(--ink); }
.ladder .lv{ flex:0 0 52px; font:900 var(--fs-m)/1.2 var(--font-sign); } .ladder .lv small{ display:block; font:600 var(--fs-xs)/1.2 var(--font-ui); color:var(--ink-2); }
.ladder .what{ flex:1; font-size:var(--fs-s); } .ladder .what b{ display:block; }
.prose h2{ margin:18px 0 6px; font-size:var(--fs-l); } .prose h2:first-child{ margin-top:0; }
.prose p, .prose li{ font-size:var(--fs-m); line-height:1.5; } .prose ul, .prose ol{ margin:0 0 10px; padding-left:20px; } .prose li{ margin:3px 0; }
.prose b{ font-weight:800; }
.rules-steps{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:10px; counter-reset:step; }
.rules-steps li{ position:relative; padding-left:40px; min-height:30px; font-size:var(--fs-m); line-height:1.45; counter-increment:step; }
.rules-steps li::before{ content:counter(step); position:absolute; left:0; top:0; width:30px; height:30px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:3px; font:900 var(--fs-m)/1 var(--font-sign); background:var(--card); }
.diagram{ display:block; width:100%; max-width:360px; height:auto; margin:6px auto 4px; }
.codebox{ font:800 var(--fs-xl)/1.2 var(--font-sign); letter-spacing:.2em; text-align:center; padding:14px 8px; background:var(--card); border:3px solid var(--ink); border-radius:4px; user-select:all; -webkit-user-select:all; }
.qr{ background:#fff; padding:8px; border:2px solid var(--ink); border-radius:4px; display:inline-block; } .qr svg{ display:block; }
hr.sep{ border:0; border-top:1px solid var(--rule); margin:12px 0; }
.stub h2{ margin-bottom:6px; } .stub .meta{ white-space:pre-line; font:var(--fs-xs)/1.4 var(--font-code); color:var(--ink-2); margin:8px 0 12px; }

/* ---------- lighting check (S02) ---------- */
.lbleed{ margin-left:calc(-1 * (var(--sal) + 16px)); margin-right:calc(-1 * (var(--sar) + 16px)); }   /* full-bleed: 8 squares of >= 45 px at 360 px */
.lstrip{ display:flex; padding:10px 0; }
.lstrip > button{ flex:1 1 0; min-width:0; height:56px; border:0; border-radius:0; padding:0; background:#000; }
.lstrip > button[aria-pressed="true"]{ outline:3px solid #000; outline-offset:-3px; }
.lmarks{ display:flex; } .lmarks > span{ flex:1 1 0; text-align:center; font-size:var(--fs-s); font-weight:900; min-height:20px; }
.lightcard{ display:flex; align-items:center; gap:4px; padding:2px 2px 2px 12px; border:1px solid var(--ink); border-radius:4px; background:var(--card); font-size:var(--fs-s); font-weight:600; }
.lightcard .lc-text{ flex:1; }
.lightcard .lc-x{ flex:0 0 auto; width:44px; height:44px; border:0; background:none; font-size:var(--fs-xl); line-height:1; }

/* ---------- Final-screen tip line (K3 placement 3) ---------- */
.tipline{ display:flex; align-items:center; justify-content:center; gap:2px; font-size:var(--fs-s); color:var(--ink-2); }
.tipline .tiplink{ background:none; border:0; padding:10px 6px; min-height:44px; color:var(--ink-2); font-weight:600; text-decoration:underline; text-underline-offset:3px; font-size:inherit; }
.tipline .tipx{ background:none; border:0; min-width:44px; min-height:44px; color:var(--ink-2); font-size:var(--fs-xl); line-height:1; }

/* ---------- sheets ---------- */
.sheet-back{ position:fixed; inset:0; z-index:42; display:flex; align-items:flex-end; justify-content:center; background:var(--scrim); }
.sheet-back.out .sheet{ transform:translateY(100%); }
.sheet{ position:relative; width:100%; max-width:520px; max-height:min(86dvh,720px); display:flex; flex-direction:column; background:var(--paper); color:var(--ink);
  border:3px solid var(--ink); border-bottom:0; border-radius:8px 8px 0 0;
  padding:6px calc(var(--sar) + 16px) calc(var(--sab) + 14px) calc(var(--sal) + 16px); transition:transform var(--anim) ease-out; animation:sheet-in var(--anim) ease-out; }
.sheet.tall{ height:min(92dvh,760px); }
.sheet-grab{ align-self:center; width:40px; height:4px; border-radius:2px; background:var(--ink-2); margin:2px 0 6px; flex:0 0 auto; }
.sheet-head{ display:flex; align-items:center; gap:10px; min-height:48px; flex:0 0 auto; }
.sheet-title{ flex:1; font-size:var(--fs-xl); font-family:var(--font-sign); text-transform:uppercase; letter-spacing:-.01em; }
.sheet-x{ flex:0 0 auto; width:48px; height:48px; border:2px solid var(--ink); border-radius:4px; background:var(--card); font-size:var(--fs-xxl); line-height:1; }
.sheet-body{ overflow:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; padding-bottom:6px; }
@keyframes sheet-in{ from{ transform:translateY(40px); } to{ transform:none; } }

/* ---------- notices (sticky system strips), toasts, banners ---------- */
#notices{ position:sticky; z-index:60; top:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:calc(var(--sat) + 6px) 10px 6px; pointer-events:none; background:var(--paper); }
#notices:empty{ display:none; }
.notice{ pointer-events:auto; display:flex; align-items:center; gap:8px; max-width:460px; width:100%; padding:6px 6px 6px 12px; border:2px solid var(--ink); border-radius:4px; background:var(--card); box-shadow:0 3px 0 var(--ink); font-size:var(--fs-s); font-weight:600; }
.notice.warn .nt::before{ content:"! "; font-weight:900; } .notice .nt{ flex:1; }
.notice .nbtn{ min-height:44px; min-width:44px; padding:0 12px; border-radius:4px; border:2px solid var(--ink); background:var(--paper); font-weight:700; }
#toasts{ position:fixed; z-index:70; left:0; right:0; bottom:calc(var(--sab) + 18px); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; padding:0 16px; }
.toasts.in-host{ position:absolute; left:0; right:0; bottom:4px; display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; z-index:30; }
.toast{ max-width:min(92vw,420px); padding:10px 16px; border-radius:4px; background:var(--ink); color:var(--paper); font-weight:700; font-size:var(--fs-s); border:2px solid var(--paper); animation:toast-in var(--anim) ease-out; }
.toast.good::before{ content:"✓ "; } .toast.warn::before{ content:"! "; }
@keyframes toast-in{ from{ transform:translateY(10px); } to{ transform:none; } }
.banner{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:35; padding:12px 16px; text-align:center; font-family:var(--font-sign); font-weight:900; text-transform:uppercase; font-size:var(--fs-xl);
  background:var(--card); color:var(--ink); border-top:4px solid var(--ink); border-bottom:4px solid var(--ink); pointer-events:none; animation:banner-in var(--anim) ease-out; }
.banner.out{ transform:translateY(-50%) scaleY(0); transition:transform 160ms; }
@keyframes banner-in{ from{ transform:translateY(-70%); } to{ transform:translateY(-50%); } }

/* ---------- motion preferences: chrome animations and transitions run for var(--anim) (300 ms, or 120 ms when reduced motion is in effect) ----------
   There is no blanket "kill every animation" rule: css/fx.css handles reduced motion for every fx-* class itself (<= 120 ms fades), and screens
   read html[data-motion="reduced"] / app.reduced for their own. */
html[data-motion="reduced"]{ scroll-behavior:auto; }
html[data-motion="reduced"] .btn{ transition-duration:0s; }

/* ---------- desktop / landscape ---------- */
@media (min-width:700px){ .screen{ padding-top:calc(var(--sat) + 24px); } }
@media (orientation:landscape) and (max-height:520px){ .logo-fan{ width:110px; } .screen{ padding-top:8px; } }