/* shop-billing.css — the Shop Billing Counter (/shop-billing/ and its pages).
   The pages are generated: see scripts/build-shop-billing.js.

   The look follows the way an iPhone or iPad app is drawn: a grey grouped background with
   white cards on it, one blue tint for everything that can be tapped, hairline dividers,
   segmented controls, switches, sheets that rise from the foot of the screen, and frosted
   bars. On an Apple device the type is the system's own; elsewhere it is Inter.
   It follows the device into dark mode.

   Everything a hand reaches for at a counter stays large: tiles, steppers, the number pad
   and the Pay button are sized for a thumb on a phone and a finger on a touch screen. */
:root{
  color-scheme:light dark;
  --bg:#f2f2f7; --card:#fff; --raised:#fff;
  --label:#000; --label2:rgba(60,60,67,.62); --label3:rgba(60,60,67,.32);
  --sep:rgba(60,60,67,.16); --fill:rgba(120,120,128,.14); --fill2:rgba(120,120,128,.22);
  --tint:#007aff; --tint-soft:rgba(0,122,255,.12); --tint-ring:rgba(0,122,255,.38);
  --green:#248a3d; --switch:#34c759; --red:#d70015; --red-soft:rgba(255,59,48,.12); --orange:#b25000; --orange-soft:rgba(255,149,0,.16);
  --bar:rgba(249,249,251,.78); --seg:rgba(227,227,232,.78); --key:#fff; --key-down:#c9c9d0; --grab:rgba(60,60,67,.3);
  --shadow:0 0 0 .5px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.05); --lift:0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04);
  --r-card:22px; --tap:56px;
  /* the colours of the charts: a set checked to stay apart for colour-blind readers */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --rule:rgba(60,60,67,.13);
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --round:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;
  /* the names the shared guide and related-tools styles look for */
  --cream:var(--bg); --paper:var(--card); --ink:var(--label); --inksoft:var(--label2); --line:var(--sep); --maroon:var(--tint); --gold:var(--tint); --golddeep:var(--label2); --radius:var(--r-card);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000; --card:#1c1c1e; --raised:#636366;
    --label:#fff; --label2:rgba(235,235,245,.62); --label3:rgba(235,235,245,.3);
    --sep:rgba(84,84,88,.62); --fill:rgba(120,120,128,.26); --fill2:rgba(120,120,128,.38);
    --tint:#0a84ff; --tint-soft:rgba(10,132,255,.2); --tint-ring:rgba(10,132,255,.5);
    --green:#28a745; --switch:#30d158; --red:#ff453a; --red-soft:rgba(255,69,58,.18); --orange:#ff9f0a; --orange-soft:rgba(255,159,10,.18);
    --bar:rgba(22,22,24,.76); --seg:rgba(44,44,46,.82); --key:#48484a; --key-down:#636366; --grab:rgba(235,235,245,.3);
    --shadow:0 0 0 .5px rgba(255,255,255,.06); --lift:0 3px 8px rgba(0,0,0,.4);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --rule:rgba(235,235,245,.16);
  }
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; scroll-padding-top:74px; -webkit-text-size-adjust:100%; }
[hidden]{ display:none !important; }
body{ font-family:var(--text); font-size:17px; background:var(--bg); color:var(--label); line-height:1.35; letter-spacing:-.01em; display:flex; flex-direction:column; min-height:100%; -webkit-font-smoothing:antialiased; }
button, input, select, textarea{ font:inherit; letter-spacing:inherit; color:inherit; }
button{ touch-action:manipulation; cursor:pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid var(--tint-ring); outline-offset:2px; }

/* ---------- the bar at the top ---------- */
header.site{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:8px 20px; background:var(--bar); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid var(--sep); }
header.site .brand{ font-weight:700; font-size:17px; letter-spacing:-.02em; color:var(--label); text-decoration:none; white-space:nowrap; }
header.site .brand img{ width:24px; height:24px; margin-right:8px; vertical-align:-6px; display:inline-block; border-radius:6px; }
header.site .brand span{ color:var(--label2); }
header.site .back{ font-size:16px; color:var(--tint); text-decoration:none; text-align:right; }
.hdr-right{ display:flex; align-items:center; gap:14px; min-width:0; }
.hdr-install{ flex:none; min-height:36px; padding:0 14px; border:none; border-radius:18px; background:var(--tint); color:#fff; font-size:15px; font-weight:600; }
.hdr-install:active{ opacity:.6; }

/* ---------- as an app ----------
   Opened from the home screen or the desktop, the page is only the counter: the site's
   bar, the heading, the guide, the questions and the links to other tools are put away,
   and the shop's own name heads the window. (shell.js sets .is-app.) */
.appbar{ display:none; }
.is-app header.site, .is-app h1.title, .is-app .sub, .is-app .web-only, .is-app .mh-related, .is-app footer.site{ display:none; }
.is-app.show-guide .web-only{ display:block; }
.is-app{ overscroll-behavior-y:none; -webkit-touch-callout:none; }
.is-app main{ padding-top:calc(10px + env(safe-area-inset-top)); padding-left:calc(16px + env(safe-area-inset-left)); padding-right:calc(16px + env(safe-area-inset-right)); }
.is-app .appbar{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:4px 2px 12px; }
.appbar b{ font-size:28px; line-height:1.15; font-weight:700; letter-spacing:-.024em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.appbar span{ flex:none; font-size:15px; color:var(--label2); }
.is-app .tabs{ top:calc(8px + env(safe-area-inset-top)); }
@media(max-width:640px){ .is-app .appbar{ flex-direction:column; align-items:flex-start; gap:0; } .appbar b{ max-width:100%; } .appbar span{ font-size:13px; } }
.is-app .panel, .is-app .tile, .is-app .step-label, .is-app .stat{ -webkit-user-select:none; user-select:none; }
@media(max-width:899px){ .is-app.on-counter main{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); } }

/* a new version is ready */
.updatebar{ position:sticky; top:calc(8px + env(safe-area-inset-top)); z-index:13; display:flex; align-items:center; gap:10px; padding:10px 10px 10px 16px; margin-bottom:12px; border-radius:16px; background:var(--label); color:var(--bg); box-shadow:0 10px 30px rgba(0,0,0,.22); animation:paneIn .3s cubic-bezier(.2,.7,.2,1); }
.updatebar span{ flex:1 1 auto; min-width:0; font-size:16px; font-weight:500; }
.updatebar .xbtn{ width:36px; height:36px; background:rgba(127,127,127,.35); color:inherit; }
.rel{ padding:12px 0; border-top:.5px solid var(--sep); }
.rel:first-child{ border-top:none; }
.rel b{ font-size:16px; font-weight:600; }
.rel span{ font-size:13px; color:var(--label2); margin-left:8px; }
.rel ul{ margin:6px 0 0 20px; font-size:15px; line-height:1.4; color:var(--label2); }

main{ width:100%; max-width:1180px; margin:0 auto; padding:14px 16px calc(40px + env(safe-area-inset-bottom)); }
h1.title{ font-size:34px; line-height:1.12; font-weight:700; letter-spacing:-.024em; margin:8px 2px 4px; }
.sub{ color:var(--label2); font-size:16px; margin:0 2px 14px; max-width:70ch; }

/* ---------- cards ---------- */
.panel{ background:var(--card); border-radius:var(--r-card); padding:18px; margin-bottom:16px; box-shadow:var(--shadow); }
.step-label{ font-size:22px; line-height:1.2; font-weight:700; letter-spacing:-.02em; color:var(--label); margin:0 0 12px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.step-label.gap{ margin-top:24px; padding-top:20px; border-top:.5px solid var(--sep); }
.step-label .cnt{ font-size:15px; font-weight:400; letter-spacing:-.01em; color:var(--label2); text-align:right; }

/* ---------- typing ---------- */
input, select, textarea{ font-size:17px; padding:12px 14px; border:none; border-radius:12px; background-color:var(--fill); color:var(--label); width:100%; min-width:0; min-height:48px; }
input::placeholder, textarea::placeholder{ color:var(--label3); }
textarea{ resize:vertical; min-height:72px; line-height:1.35; }
select{ -webkit-appearance:none; appearance:none; padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5 6 2.5l4 4M2 11.5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:10px 15px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; color:var(--label2); margin:0 2px 6px; }
.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
.note{ font-size:13px; line-height:1.4; color:var(--label2); margin:0 2px 12px; }
.note:last-child{ margin-bottom:0; }
.note.center{ text-align:center; }
.note.gapnote{ margin-top:12px; }
.note a, .more a{ color:var(--tint); text-decoration:none; }
.note b{ color:var(--label); font-weight:600; }
.warn{ font-size:15px; line-height:1.35; color:var(--orange); background:var(--orange-soft); border-radius:14px; padding:12px 14px; margin:0 0 14px; }
.empty{ color:var(--label2); font-size:16px; padding:22px 4px; text-align:center; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:17px; font-weight:600; min-height:50px; padding:10px 18px; border:none; border-radius:14px; background:var(--tint-soft); color:var(--tint); text-decoration:none; text-align:center; user-select:none; -webkit-user-select:none; transition:opacity .12s, transform .12s; }
.btn:active{ opacity:.55; transform:scale(.98); }
.btn.solid{ background:var(--tint); color:#fff; }
.btn.wa{ background:#1a8f4c; color:#fff; }
.btn.del{ background:var(--red-soft); color:var(--red); }
.btn.sm{ font-size:15px; min-height:40px; padding:7px 14px; border-radius:11px; }
.btn.big{ min-height:var(--tap); padding:12px 20px; border-radius:16px; }
.btn.grow{ flex:1 1 auto; }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.35; pointer-events:none; }
.btnrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.btnrow.top{ margin:0 0 14px; }
.filebtn{ position:relative; overflow:hidden; }
.filebtn input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; padding:0; }
.filebtn:focus-within{ outline:3px solid var(--tint-ring); outline-offset:2px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-size:16px; font-weight:500; min-height:44px; padding:8px 18px; border-radius:22px; border:none; background:var(--fill); color:var(--label); user-select:none; -webkit-user-select:none; transition:opacity .12s, transform .12s, background .15s; }
.chip:active{ opacity:.6; transform:scale(.97); }
.chip[aria-checked="true"], .chip[aria-pressed="true"]{ background:var(--tint); color:#fff; font-weight:600; }
.bigchips .chip{ font-size:17px; font-weight:600; min-height:var(--tap); padding:10px 20px; border-radius:16px; background:var(--tint-soft); color:var(--tint); }

/* a segmented control: one of a few, chosen */
.seg, .modes{ display:inline-flex; background:var(--fill); border-radius:12px; padding:3px; gap:2px; max-width:100%; flex-wrap:wrap; }
.seg button, .modes button{ font-size:15px; font-weight:500; min-height:44px; padding:8px 16px; border:none; border-radius:9px; background:none; color:var(--label); transition:background .18s, box-shadow .18s; }
.seg button[aria-checked="true"], .modes button[aria-checked="true"]{ background:var(--raised); font-weight:600; box-shadow:var(--lift); }

/* a switch */
.check{ display:flex; flex-direction:row-reverse; justify-content:space-between; gap:14px; align-items:center; min-height:58px; padding:9px 2px; border-top:.5px solid var(--sep); font-size:17px; cursor:pointer; }
.check > span{ flex:1 1 auto; min-width:0; }
.check small{ display:block; font-size:13px; line-height:1.35; color:var(--label2); margin-top:2px; }
.check input, input.sw{ -webkit-appearance:none; appearance:none; flex:none; width:51px; height:31px; min-height:0; padding:0; border-radius:16px; background:var(--fill2); position:relative; cursor:pointer; transition:background .22s; }
.check input::after, input.sw::after{ content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition:transform .22s cubic-bezier(.3,.7,.2,1); }
.check input:checked, input.sw:checked{ background:var(--switch); }
.check input:checked::after, input.sw:checked::after{ transform:translateX(20px); }

/* ---------- the four parts: a segmented control that stays in reach ---------- */
.tabs{ position:sticky; top:8px; z-index:12; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:3px; margin:0 0 14px; border-radius:14px; background:var(--seg); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); box-shadow:0 0 0 .5px var(--sep); }
.tabs button{ font-size:15px; font-weight:500; min-height:46px; border:none; border-radius:11px; background:none; color:var(--label); padding:6px 4px; transition:background .18s, box-shadow .18s; }
.tabs button[aria-selected="true"]{ background:var(--raised); font-weight:600; box-shadow:var(--lift); }
.tabpane{ animation:paneIn .28s cubic-bezier(.2,.7,.2,1); }
@keyframes paneIn{ from{ opacity:0; transform:translateY(6px); } }

/* ---------- the counter ---------- */
.counter{ display:grid; grid-template-columns:minmax(0,1fr); }
.panel.pick{ background:none; box-shadow:none; padding:0; border-radius:0; }
.firstrun{ background:var(--card); border-radius:var(--r-card); padding:18px; box-shadow:var(--shadow); }
.findrow{ display:flex; gap:10px; margin-bottom:12px; }
.findrow input{ min-height:52px; border-radius:14px; padding-left:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238e8e93' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.8'/%3E%3Cpath d='m13 13 4.6 4.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:14px center; background-size:18px 18px; }
.micbtn{ flex:none; display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 18px; border-radius:26px; border:none; background:var(--tint); color:#fff; font-size:17px; font-weight:600; transition:background .2s, transform .12s; }
.micbtn:active{ transform:scale(.96); }
.micbtn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.micbtn[aria-pressed="true"]{ background:#ff3b30; animation:listening 1.4s ease-in-out infinite; }
@keyframes listening{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,59,48,.45); } 50%{ box-shadow:0 0 0 10px rgba(255,59,48,0); } }
.micbar{ background:var(--card); border-radius:18px; padding:14px 16px; margin-bottom:12px; font-size:16px; box-shadow:var(--shadow); }
.mic-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mic-top b{ font-weight:600; }
.mic-top #micHeard{ color:var(--label2); }
.pulse{ width:10px; height:10px; border-radius:50%; background:#ff3b30; animation:pulse 1.1s infinite; flex:none; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,59,48,.5); } 100%{ box-shadow:0 0 0 12px rgba(255,59,48,0); } }
.mic-added{ font-weight:600; color:var(--green); margin-top:6px; }
.mic-added:empty{ display:none; }
.mic-missed{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:15px; color:var(--label2); }
.mic-missed .chip{ background:var(--orange-soft); color:var(--orange); font-weight:600; }
.mic-missed .chip[aria-pressed="true"]{ background:#ff9500; color:#fff; }
.cats{ margin:0 -16px 12px; padding:0 16px 2px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.cats::-webkit-scrollbar{ display:none; }
.cats .chip{ flex:none; white-space:nowrap; background:var(--card); box-shadow:var(--shadow); }
.cats .chip[aria-pressed="true"]{ background:var(--tint); }
.cats:empty{ display:none; }

.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); gap:10px; }
.tile{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:8px; min-height:98px; padding:14px 14px 12px 26px; text-align:left; border:none; border-radius:18px; background:var(--card); box-shadow:var(--shadow); user-select:none; -webkit-user-select:none; transition:transform .14s cubic-bezier(.2,.7,.2,1), background .15s, box-shadow .15s; }
.tile:active{ transform:scale(.95); background:var(--fill2); }
.tile .tn{ font-size:17px; font-weight:600; line-height:1.22; letter-spacing:-.015em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; padding-right:4px; }
/* the colour of the item's group, as a bar down its side */
.tile::before{ content:""; position:absolute; left:12px; top:15px; bottom:14px; width:4px; border-radius:2px; background:var(--hue,var(--tint)); }
.tile .tp{ font-size:15px; color:var(--label2); font-variant-numeric:tabular-nums; }
.tile .tp.none{ color:var(--orange); font-weight:500; }
.tile .tq{ position:absolute; top:-7px; right:-5px; min-width:28px; height:28px; padding:0 8px; border-radius:14px; background:var(--tint); color:#fff; font-family:var(--round); font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2.5px var(--bg); animation:pop .28s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop{ from{ transform:scale(.4); } }
.tile.in{ background:var(--tint-soft); box-shadow:inset 0 0 0 1.5px var(--tint-ring); }
.tile.in .tp{ color:var(--tint); }
.tile.teach{ box-shadow:inset 0 0 0 2px #ff9500; }
.tile.other{ background:none; box-shadow:inset 0 0 0 1.5px var(--label3); }
.tile.other::before{ display:none; }
.tile.other{ padding-left:14px; }
.tile.other .tn{ color:var(--tint); }

/* the bill */
.bill .step-label{ margin-bottom:6px; }
.blines{ list-style:none; }
.bl{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center; padding:12px 0; border-bottom:.5px solid var(--sep); border-radius:10px; }
.bl.flash{ animation:flash 1s; }
@keyframes flash{ 0%,45%{ background:var(--tint-soft); box-shadow:0 0 0 8px var(--tint-soft); } 100%{ background:transparent; box-shadow:0 0 0 8px transparent; } }
.bl .bn{ font-size:17px; font-weight:600; overflow-wrap:anywhere; line-height:1.25; }
.bl .br{ font-size:13px; color:var(--label2); margin-top:1px; font-variant-numeric:tabular-nums; }
.bl .br.none{ color:var(--orange); font-weight:500; }
.bl .ba{ font-size:17px; font-weight:600; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* less · how many · more, as one control */
.bl .step{ grid-column:1 / -1; display:flex; align-items:stretch; height:48px; background:var(--fill); border-radius:13px; overflow:hidden; }
.stepb{ flex:0 0 68px; border:none; background:none; font-size:26px; font-weight:400; color:var(--label); line-height:1; transition:background .1s; }
.stepb:active, .qtyb:active{ background:var(--fill2); }
.stepb.minus{ color:var(--red); }
.qtyb{ flex:1 1 auto; border:none; border-left:.5px solid var(--sep); border-right:.5px solid var(--sep); background:none; font-family:var(--round); font-size:19px; font-weight:600; color:var(--tint); padding:0 10px; min-width:84px; font-variant-numeric:tabular-nums; transition:background .1s; }
.sumbox{ margin-top:12px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; font-size:16px; }
.sumbox:empty{ display:none; }
.sumbox dt{ color:var(--label2); }
.sumbox dd{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.billacts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; }
.billacts .btn{ padding:10px 6px; font-size:16px; }
.paybtn{ width:100%; margin-top:10px; min-height:62px; border:none; border-radius:18px; background:var(--green); color:#fff; font-size:20px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 22px; user-select:none; -webkit-user-select:none; transition:opacity .12s, transform .12s, background .2s; }
.paybtn:active{ opacity:.7; transform:scale(.98); }
.paybtn b{ font-family:var(--round); font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
.paybtn[disabled]{ background:var(--fill2); color:var(--label3); }
.held{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.held .chip{ background:var(--orange-soft); color:var(--orange); font-weight:600; }
.last{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:.5px solid var(--sep); font-size:16px; font-weight:600; }
.last span{ flex:1 1 100%; min-width:0; color:var(--label2); font-weight:400; font-size:15px; }
.last .btn{ flex:1 1 auto; padding:10px 12px; font-size:16px; }

@media(min-width:900px){
  h1.title{ font-size:40px; }
  .counter{ grid-template-columns:minmax(0,1fr) 400px; column-gap:18px; align-items:start; }
  .counter .bill{ position:sticky; top:74px; max-height:calc(100vh - 88px); overflow:auto; }
  .totalbar{ display:none !important; }
  .tiles{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .tile{ min-height:108px; }
  .cats{ margin:0 0 12px; padding:0 0 2px; flex-wrap:wrap; }
}

/* the total, always in reach on a phone: a frosted bar at the foot of the screen */
.totalbar{ position:fixed; left:0; right:0; bottom:0; z-index:15; display:flex; align-items:stretch; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--bar); -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px); border-top:.5px solid var(--sep); }
.tb-sum{ flex:1 1 0; min-width:0; line-height:1.15; text-decoration:none; color:inherit; display:flex; flex-direction:column; justify-content:center; }
.tb-sum span{ display:block; font-size:13px; color:var(--label2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-sum b{ font-family:var(--round); font-size:28px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.totalbar.saved .tb-sum b{ font-size:20px; color:var(--tint); }
.totalbar.saved .tb-sum span{ color:var(--green); font-weight:500; }
.totalbar .paybtn{ width:auto; flex:0 0 44%; margin:0; min-height:56px; justify-content:center; border-radius:16px; }
@media(max-width:899px){
  body.on-counter footer.site{ padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
  body.on-counter .toast{ bottom:calc(92px + env(safe-area-inset-bottom)); }
  body:not(.on-counter) .totalbar{ display:none; }
  .counter .bill .paybtn{ display:none; }
}

/* ---------- sheets: quantity, payment, a number, a bill, an item ----------
   A sheet rises from the foot of a phone's screen and sits in the middle of a wide one. */
dialog.sheet{ border:none; padding:8px 16px calc(18px + env(safe-area-inset-bottom)); width:min(100vw, 460px); max-width:100vw; max-height:94dvh; margin:auto auto 0; border-radius:28px 28px 0 0; background:var(--bg); color:var(--label); overflow:auto; box-shadow:0 -10px 40px rgba(0,0,0,.18); }
dialog.sheet.wide{ width:min(100vw, 520px); }
dialog.sheet::before{ content:""; display:block; width:36px; height:5px; border-radius:3px; background:var(--grab); margin:0 auto 12px; }
dialog.sheet::backdrop{ background:rgba(0,0,0,.4); }
dialog.sheet[open]{ animation:sheetUp .44s cubic-bezier(.32,.72,0,1); }
dialog.sheet[open]::backdrop{ animation:dim .3s ease-out; }
@keyframes sheetUp{ from{ transform:translateY(100%); } }
@keyframes sheetIn{ from{ opacity:0; transform:scale(.94); } }
@keyframes dim{ from{ opacity:0; } }
@media(min-width:700px){
  dialog.sheet{ margin:auto; border-radius:28px; padding-top:20px; box-shadow:0 30px 80px rgba(0,0,0,.3); }
  dialog.sheet::before{ display:none; }
  dialog.sheet[open]{ animation:sheetIn .3s cubic-bezier(.2,.8,.2,1); }
}
@media (prefers-color-scheme:dark){ dialog.sheet{ background:#1c1c1e; --card:#2c2c2e; } }
.sheet-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin:0 2px 14px; }
.sheet-head b{ display:block; font-size:24px; line-height:1.15; font-weight:700; letter-spacing:-.022em; overflow-wrap:anywhere; }
.sheet-head span{ display:block; font-size:15px; color:var(--label2); margin-top:2px; }
.sheet-head b.grand{ font-family:var(--round); font-size:46px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.xbtn{ flex:none; width:40px; height:40px; border-radius:50%; border:none; background:var(--fill2); font-size:15px; font-weight:700; color:var(--label2); line-height:1; }
.xbtn:active{ opacity:.6; }
.sheet-foot{ display:flex; gap:10px; margin-top:14px; }
.sheet-foot.wrap{ flex-wrap:wrap; }
.sheet-foot.wrap .btn{ flex:1 1 46%; }
.sheet-foot.wrap .btn.del{ flex-basis:100%; }
dialog.sheet input, dialog.sheet select, dialog.sheet textarea{ background-color:var(--card); }
dialog.sheet .check{ background:var(--card); border:none; border-radius:14px; padding:10px 14px; margin-bottom:14px; }
dialog.sheet .btn:not(.solid):not(.wa):not(.del){ background:var(--card); }
.boxes{ display:flex; gap:8px; margin-bottom:10px; }
.numbox{ flex:1 1 0; text-align:left; border:none; border-radius:16px; background:var(--card); padding:10px 14px; min-height:70px; min-width:0; transition:box-shadow .15s; }
div.numbox{ cursor:default; }
.numbox span{ display:block; font-size:12px; color:var(--label2); line-height:1.25; }
.numbox b{ display:block; font-family:var(--round); font-size:25px; font-weight:700; letter-spacing:-.02em; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-height:31px; font-variant-numeric:tabular-nums; }
.numbox[aria-pressed="true"], .numbox.on{ box-shadow:inset 0 0 0 2px var(--tint); }
.numbox[aria-pressed="true"] span, .numbox.on span{ color:var(--tint); }
.numbox.out b{ color:var(--green); }
.numbox.short b{ color:var(--red); }
.quick{ margin-bottom:10px; }
.quick .chip{ flex:1 1 calc(25% - 6px); min-width:0; min-height:48px; font-size:17px; padding:8px 12px; border-radius:13px; background:var(--card); color:var(--tint); font-weight:600; }
.quick:empty{ display:none; }
/* the keys of a number pad, as on the device's own */
.pad{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.key{ min-height:62px; border-radius:14px; border:none; background:var(--key); font-family:var(--round); font-size:29px; font-weight:400; color:var(--label); box-shadow:0 1px 0 rgba(0,0,0,.22); user-select:none; -webkit-user-select:none; transition:background .06s; }
.key:active{ background:var(--key-down); }
.key.fn{ background:none; box-shadow:none; font-size:26px; }
.key.fn:active{ background:var(--fill2); }
.modes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:12px; width:100%; background:var(--fill2); }
.modes button{ min-height:48px; font-size:17px; }
.qrbox{ display:flex; justify-content:center; padding:14px; background:#fff; border-radius:20px; margin-bottom:10px; }
.qrbox canvas{ width:min(250px, 66vw); height:auto; image-rendering:pixelated; }
.receipt{ background:var(--fill); border-radius:20px; padding:16px; max-height:46dvh; overflow:auto; }
.receipt canvas, .sample canvas{ display:block; width:100%; max-width:330px; margin:0 auto; background:#fff; border-radius:3px; box-shadow:0 12px 28px -10px rgba(0,0,0,.35), 0 0 0 .5px rgba(0,0,0,.08); }
.sample{ background:var(--fill); border-radius:20px; padding:18px; }
.sharenote{ margin:12px 4px 0; }

/* ---------- setting up, one question at a time ----------
   The whole screen on a phone, a tall card on a wide screen: a thin bar of progress, one
   question in large type, and one large button at the foot. */
dialog.setup{ border:none; padding:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; background:var(--bg); color:var(--label); overflow:hidden; }
dialog.setup[open]{ display:flex; flex-direction:column; animation:sheetUp .5s cubic-bezier(.32,.72,0,1); }
dialog.setup::backdrop{ background:rgba(0,0,0,.45); }
@media(min-width:700px){
  dialog.setup{ width:560px; height:min(760px, 92dvh); margin:auto; border-radius:30px; box-shadow:0 30px 90px rgba(0,0,0,.35); }
  dialog.setup[open]{ animation:sheetIn .32s cubic-bezier(.2,.8,.2,1); }
}
@media (prefers-color-scheme:dark){ dialog.setup{ background:#1c1c1e; --card:#2c2c2e; } }
.su-top{ flex:none; display:flex; align-items:center; gap:12px; padding:calc(10px + env(safe-area-inset-top)) 16px 6px; }
.su-back{ flex:none; width:44px; height:44px; border-radius:50%; border:none; background:var(--fill); color:var(--tint); font-size:28px; line-height:1; padding-bottom:4px; }
.su-skip{ flex:none; min-height:44px; padding:0 6px; border:none; background:none; color:var(--tint); font-size:17px; }
.su-back:active, .su-skip:active{ opacity:.5; }
.su-progress{ flex:1 1 auto; height:5px; border-radius:3px; background:var(--fill2); overflow:hidden; }
.su-progress i{ display:block; height:100%; width:0; border-radius:3px; background:var(--tint); transition:width .35s cubic-bezier(.2,.8,.2,1); }
.su-body{ flex:1 1 auto; overflow:auto; padding:10px 20px 20px; }
.su-step{ font-size:13px; font-weight:600; color:var(--tint); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.su-body h2{ font-size:30px; line-height:1.12; font-weight:700; letter-spacing:-.024em; margin-bottom:8px; }
.su-sub{ font-size:16px; line-height:1.4; color:var(--label2); margin-bottom:18px; }
.su-body section{ animation:paneIn .3s cubic-bezier(.2,.7,.2,1); }
.su-body input:not([type="checkbox"]), .su-body select, .su-body textarea{ background-color:var(--card); min-height:54px; }
.su-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.su-cards.one{ grid-template-columns:minmax(0,1fr); }
.su-card{ display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:10px; min-height:104px; padding:14px 16px; text-align:left; border:none; border-radius:20px; background:var(--card); box-shadow:var(--shadow); transition:transform .14s cubic-bezier(.2,.7,.2,1), box-shadow .15s, background .15s; }
.su-card:active{ transform:scale(.96); }
.su-card .su-pic{ font-size:34px; line-height:1; }
.su-card b{ font-size:17px; font-weight:600; line-height:1.2; letter-spacing:-.015em; }
.su-card.wide{ flex-direction:row; align-items:center; min-height:62px; gap:12px; }
.su-card.wide b{ flex:1 1 auto; min-width:0; font-size:19px; }
.su-card.wide span{ flex:none; font-size:15px; color:var(--label2); }
#suLangFind{ margin-bottom:12px; }
.su-card[aria-checked="true"]{ background:var(--tint-soft); box-shadow:inset 0 0 0 2px var(--tint); }
.su-card.wide[aria-checked="true"]::after{ content:"✓"; flex:none; color:var(--tint); font-size:20px; font-weight:700; }
.su-tools{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.su-tools span{ flex:1 1 auto; font-size:15px; color:var(--label2); }
.su-tools .chip{ background:var(--card); color:var(--tint); min-height:40px; padding:6px 16px; font-weight:600; }
.su-list{ background:var(--card); border-radius:18px; padding:0 16px; margin-bottom:12px; }
.su-list .check:first-child{ border-top:none; }
.su-add{ display:flex; gap:8px; }
.su-add.top{ margin-bottom:14px; }
/* the list in its sections: a heading with a way to remove the whole section, then a row
   for each thing — its name, its price, and whether it is sold */
.su-sec{ margin-bottom:14px; }
.su-sechead{ display:flex; align-items:center; gap:10px; margin:0 4px 6px; min-height:44px; }
.su-sechead b{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.su-sechead span{ flex:1 1 auto; font-size:14px; color:var(--label2); }
.su-secbtn{ flex:none; min-height:40px; padding:6px 14px; border:none; border-radius:20px; background:var(--tint-soft); color:var(--tint); font-size:15px; font-weight:600; }
.su-secbtn.del{ background:var(--red-soft); color:var(--red); }
.su-secbtn:active{ opacity:.6; }
.su-sec .su-list{ margin-bottom:0; }
.su-row{ display:flex; align-items:center; gap:10px; min-height:62px; padding:8px 0; border-top:.5px solid var(--sep); }
.su-row:first-child{ border-top:none; }
.su-lab{ flex:1 1 auto; min-width:0; font-size:17px; line-height:1.25; cursor:pointer; overflow-wrap:anywhere; }
.su-lab small{ display:block; font-size:13px; color:var(--label2); margin-top:1px; }
/* the price, typed beside the name */
.su-pricebox{ flex:none; display:flex; align-items:center; gap:4px; width:112px; height:46px; padding:0 12px; border-radius:12px; background:var(--fill); transition:background .15s, box-shadow .15s; }
.su-pricebox i{ font-style:normal; font-size:16px; color:var(--label2); }
.su-pricebox.has{ background:var(--tint-soft); }
.su-pricebox.has i{ color:var(--tint); }
.su-pricebox:focus-within{ box-shadow:0 0 0 2px var(--tint); background:var(--card); }
.su-body .su-pricebox input.su-price{ flex:1 1 auto; width:100%; min-width:0; min-height:0; height:100%; padding:0; border:none; border-radius:0; background:none; text-align:right; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; outline:none; }
.su-pricebox input.su-price::placeholder{ font-weight:400; font-size:16px; }
.su-row.off .su-pricebox{ opacity:.4; }
.su-row .ib.del{ flex:none; width:46px; padding:0; }
.su-row.off .su-lab{ color:var(--label3); text-decoration:line-through; }
.su-row.off .su-lab small{ text-decoration:none; }
.su-add .btn{ flex:none; }
.su-item{ text-align:center; margin-bottom:14px; }
.su-item span{ display:block; font-size:15px; color:var(--label2); }
.su-item b{ display:block; font-size:32px; line-height:1.15; font-weight:700; letter-spacing:-.024em; margin:4px 0; overflow-wrap:anywhere; }
.su-body .numbox b{ font-size:34px; min-height:42px; text-align:center; }
.su-body .numbox span{ text-align:center; }
.su-link{ display:block; margin:14px auto 0; min-height:44px; padding:0 12px; border:none; background:none; color:var(--tint); font-size:17px; }
.su-sum{ background:var(--card); border-radius:18px; padding:0 16px; margin-bottom:12px; }
.su-sum div{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-top:.5px solid var(--sep); font-size:17px; }
.su-sum div:first-child{ border-top:none; }
.su-sum dt{ color:var(--label2); flex:none; }
.su-sum dd{ text-align:right; font-weight:500; overflow-wrap:anywhere; }
#suInstall{ width:100%; margin-top:6px; background:var(--card); }
.su-foot{ flex:none; padding:10px 20px calc(16px + env(safe-area-inset-bottom)); background:var(--bar); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-top:.5px solid var(--sep); }
.su-foot .btn{ width:100%; min-height:58px; font-size:18px; }

/* ---------- lists: bills, expenses, customers, the menu ---------- */
.rows{ list-style:none; }
.row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; border-bottom:.5px solid var(--sep); min-height:60px; }
.row:last-child{ border-bottom:none; }
.rowmain{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; text-align:left; border:none; background:none; padding:10px 0; min-width:0; width:100%; min-height:60px; align-content:center; border-radius:10px; transition:background .1s; }
button.rowmain{ padding-right:22px; }
button.rowmain::after{ content:""; position:absolute; right:4px; top:50%; width:8px; height:8px; margin-top:-5px; border-right:2px solid var(--label3); border-bottom:2px solid var(--label3); transform:rotate(-45deg); border-radius:1px; }
button.rowmain:active{ background:var(--fill); }
div.rowmain{ cursor:default; }
.rowmain .rw{ font-size:17px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rowmain .rt{ font-size:17px; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; color:var(--label2); }
.rowmain .rn{ grid-column:1 / -1; font-size:13px; color:var(--label2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row.void .rw, .row.void .rt{ text-decoration:line-through; color:var(--label3); }
.row.off .rw{ color:var(--label2); }
.rt.owes{ color:var(--red); font-weight:600; }
.racts{ display:flex; gap:6px; align-items:center; }
.ib{ display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; min-width:46px; min-height:46px; padding:6px 12px; border-radius:23px; border:none; background:var(--fill); color:var(--tint); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ib:active{ opacity:.6; }
.ib:disabled{ opacity:.3; }
.ib.del{ color:var(--red); background:var(--red-soft); }
.ib.price{ min-width:96px; background:var(--tint-soft); }
.ib.price.none{ background:var(--orange-soft); color:var(--orange); }
.rows.small .row, .rows.small .rowmain{ min-height:50px; }
.rows.small{ max-height:32dvh; overflow:auto; margin-bottom:6px; background:var(--card); border-radius:16px; padding:0 14px; }
.rows.small .empty{ padding:16px 0; }
.daynav{ display:flex; gap:8px; align-items:center; margin-bottom:16px; }
.daynav input{ flex:1 1 0; width:auto; min-width:0; text-align:center; font-weight:600; min-height:50px; border-radius:14px; }
.navb{ flex:none; width:50px; height:50px; border-radius:50%; border:none; background:var(--fill); font-size:28px; font-weight:500; color:var(--tint); line-height:1; padding-bottom:4px; }
.navb:active{ opacity:.6; }
.navb:disabled{ color:var(--label3); }
.daynav .btn{ min-height:50px; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.stat{ border-radius:18px; background:var(--bg); padding:12px 14px; min-width:0; }
.stat dt{ font-size:13px; color:var(--label2); }
.stat dd{ font-family:var(--round); font-size:24px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; margin-top:2px; }
.stat.main{ background:var(--tint); color:#fff; grid-column:span 2; }
.stat.main dt{ color:rgba(255,255,255,.82); }
.stat.main dd{ font-size:36px; }
.stat small{ display:block; font-family:var(--text); font-size:12px; font-weight:400; letter-spacing:0; color:var(--label2); white-space:normal; }
@media (prefers-color-scheme:dark){ .stat{ background:var(--fill); } .stat.main{ background:var(--tint); } }
.scrollx{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; font-size:16px; }
.tbl th, .tbl td{ padding:11px 8px; border-bottom:.5px solid var(--sep); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tbl th:first-child, .tbl td:first-child{ text-align:left; white-space:normal; padding-left:0; }
.tbl th:last-child, .tbl td:last-child{ padding-right:0; }
.tbl th{ font-size:13px; color:var(--label2); font-weight:400; }
.tbl tr.sum td{ font-weight:700; border-bottom:none; }
.tbl tbody tr[data-day]{ cursor:pointer; }
.tbl tbody tr[data-day] td:first-child{ color:var(--tint); }
.monthfield{ max-width:240px; }
.micfield{ max-width:360px; }
#serialRow{ margin-top:14px; }
#tab-shop .seg{ margin-bottom:6px; }

/* ---------- reports ----------
   One row of choices, then the figures and pictures it scopes. In a picture the columns
   are the only loud thing: one colour, thin, round at the top; the rules behind them are
   faint; and words and figures are in the page's own ink, never in a column's colour. */
.rep-filter{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-bottom:14px; }
.rep-filter .chips{ flex:1 1 auto; }
.rep-filter .chip{ background:var(--card); box-shadow:var(--shadow); }
.rep-filter .chip[aria-pressed="true"]{ background:var(--tint); }
.rep-dates{ display:flex; align-items:center; gap:8px; color:var(--label2); font-size:15px; }
.rep-dates input{ width:auto; min-height:44px; background-color:var(--card); box-shadow:var(--shadow); padding:8px 12px; font-size:16px; }
#repBody{ transition:opacity .15s; }
#repBody.stale{ opacity:.55; }
.rep-hero{ display:flex; flex-direction:column; }
.rep-label{ font-size:15px; color:var(--label2); }
.rep-big{ font-family:var(--round); font-size:54px; line-height:1.08; font-weight:700; letter-spacing:-.035em; margin:2px 0 4px; overflow-wrap:anywhere; }
.rep-delta{ font-size:15px; color:var(--label2); margin-bottom:16px; }
.rep-delta.up{ color:var(--green); font-weight:500; }
.rep-delta.down{ color:var(--red); font-weight:500; }
.rep-hero .stat dd{ font-variant-numeric:normal; }
.chart{ position:relative; min-height:200px; }
.chart svg{ display:block; overflow:visible; touch-action:pan-y; }
.chart .grid{ stroke:var(--rule); stroke-width:1; }
.chart .axis{ stroke:var(--label3); stroke-width:1; }
.chart .tick{ fill:var(--label2); font-size:11px; font-variant-numeric:tabular-nums; }
.chart .bar{ fill:var(--s1); transition:opacity .12s; }
.chart.hot .bar{ opacity:.4; }
.chart.hot .bar.on{ opacity:1; }
.chart .hit{ fill:transparent; cursor:pointer; outline:none; }
.chart .hit:focus-visible{ fill:var(--tint-soft); }
.tip{ position:absolute; top:-6px; left:50%; transform:translate(-50%,-100%) scale(.96); padding:7px 12px; border-radius:12px; background:var(--label); color:var(--bg); text-align:center; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s, transform .12s; box-shadow:0 6px 18px rgba(0,0,0,.2); z-index:2; }
.tip.on{ opacity:1; transform:translate(-50%,-100%) scale(1); }
.tip b{ display:block; font-size:16px; font-weight:700; }
.tip span{ display:block; font-size:12px; opacity:.72; }
.rep-table{ margin-top:10px; border-top:.5px solid var(--sep); }
.rep-table summary{ list-style:none; cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--tint); font-size:15px; }
.rep-table summary::-webkit-details-marker{ display:none; }
.rep-table .scrollx{ max-height:300px; overflow:auto; }
.hbar{ padding:9px 0; border-top:.5px solid var(--sep); }
.hbar:first-child{ border-top:none; padding-top:0; }
.hb-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:16px; }
.hb-top span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-top b{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hb-track{ height:10px; margin:6px 0 4px; }
.hb-track i{ display:block; height:100%; min-width:3px; background:var(--s1); border-radius:0 4px 4px 0; }
.hbar small{ font-size:13px; color:var(--label2); }
.split{ display:flex; gap:2px; height:22px; margin-bottom:14px; }
.split i{ min-width:3px; }
.split i:first-child{ border-radius:4px 0 0 4px; }
.split i:last-child{ border-radius:0 4px 4px 0; }
.split i:only-child{ border-radius:4px; }
.s1{ background:var(--s1); } .s2{ background:var(--s2); } .s3{ background:var(--s3); }
.legend div{ display:grid; grid-template-columns:14px minmax(0,1fr) auto 44px; align-items:center; gap:10px; min-height:40px; border-top:.5px solid var(--sep); font-size:16px; }
.legend div:first-child{ border-top:none; }
.legend i{ width:12px; height:12px; border-radius:3px; }
.legend b{ font-weight:600; font-variant-numeric:tabular-nums; }
.legend small{ font-size:14px; color:var(--label2); text-align:right; font-variant-numeric:tabular-nums; }
@media(min-width:900px){ .rep-two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 16px; align-items:start; } }
@media(max-width:640px){
  .rep-big{ font-size:46px; }
  .rep-dates{ flex:1 1 100%; }
  .rep-dates input{ flex:1 1 0; min-width:0; }
  /* the choices stay on one line and slide sideways */
  .rep-filter .chips{ flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:2px 16px; scrollbar-width:none; }
  .rep-filter .chips::-webkit-scrollbar{ display:none; }
  .rep-filter .chip{ flex:none; white-space:nowrap; }
}

/* ---------- the reading part ---------- */
body .mh-guide{ color:var(--label); line-height:1.5; }
body .mh-guide h2{ font-family:inherit; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--label); margin-top:28px; }
body .mh-guide p, body .mh-guide li, body .mh-guide td, body .mh-guide th{ font-size:16px; }
body .mh-guide a{ color:var(--tint); font-weight:500; text-decoration:none; }
body .mh-guide b{ font-weight:600; }
body .mh-guide th{ font-size:13px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--label2); }
body .mh-guide th, body .mh-guide td{ border-bottom:.5px solid var(--sep); font-variant-numeric:tabular-nums; }
body .mh-guide .mh-note{ font-size:15px; color:var(--label2); border-left:3px solid var(--tint); padding:2px 0 2px 14px; }
body .mh-guide ul.mh-items{ list-style:none; margin:0 0 14px; display:flex; flex-wrap:wrap; gap:6px; }
body .mh-guide li.mh-item{ margin:0; font-size:15px; font-weight:500; padding:6px 13px; border-radius:16px; background:var(--fill); }
details.faq{ border-top:.5px solid var(--sep); }
details.faq:first-of-type{ border-top:none; }
details.faq summary{ list-style:none; cursor:pointer; font-size:17px; font-weight:500; padding:15px 28px 15px 0; position:relative; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:""; position:absolute; right:6px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:2px solid var(--label3); border-bottom:2px solid var(--label3); transform:rotate(45deg); transition:transform .2s; border-radius:1px; }
details.faq[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
details.faq p{ color:var(--label2); font-size:16px; line-height:1.45; padding:0 0 16px; }
.occasions{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.occasions a{ font-size:16px; font-weight:500; padding:10px 16px; border-radius:22px; background:var(--tint-soft); color:var(--tint); text-decoration:none; }
.more{ font-size:15px; color:var(--label2); line-height:1.6; }
footer.site{ text-align:center; color:var(--label2); font-size:13px; padding:24px 16px 30px; margin-top:auto; }
footer.site a{ color:var(--tint); text-decoration:none; }

/* the related-tools strip, in this page's clothes */
body .mh-related{ font-family:var(--text); color:var(--label); }
body .mh-related-head h2{ font-family:var(--text); font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--label); }
body .mh-related-head a{ color:var(--tint); font-size:15px; font-weight:400; }
body .mh-related li a{ background:var(--card); border:none; border-radius:18px; box-shadow:var(--shadow); }
body .mh-related li a:hover, body .mh-related li a:focus-visible{ box-shadow:var(--shadow), 0 8px 20px -10px rgba(0,0,0,.25); }
body .mh-tx b{ color:var(--label); font-weight:600; }
body .mh-tx span{ color:var(--label2); }

/* a short message, as a small dark capsule */
.toast{ position:fixed; top:auto; right:auto; margin:0; border:none; overflow:visible; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translate(-50%,16px) scale(.96); background:rgba(44,44,46,.92); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); color:#fff; font-size:16px; font-weight:500; line-height:1.3; padding:13px 18px; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .22s, transform .3s cubic-bezier(.2,.9,.3,1.2); display:flex; gap:16px; align-items:center; max-width:calc(100vw - 32px); z-index:2147483647; }
.toast.on{ opacity:1; transform:translate(-50%,0) scale(1); pointer-events:auto; }
.toast button{ border:none; background:none; color:#64b5ff; font-weight:600; font-size:16px; padding:6px 0; white-space:nowrap; }

#printArea{ display:none; }

@media(max-width:640px){
  h1.title{ font-size:30px; }
  .sub{ font-size:15px; }
  .panel{ padding:16px; }
  .tiles{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .tile{ min-height:92px; }
  .tabs button{ font-size:13.5px; letter-spacing:-.02em; padding:6px 1px; }
  .micbtn span{ display:none; }
  .micbtn{ width:52px; padding:0; justify-content:center; }
  .daynav{ flex-wrap:wrap; }
  .daynav .btn{ flex:1 1 100%; }
  .stat.main dd{ font-size:32px; }
}
@media(max-width:420px){
  .two{ grid-template-columns:minmax(0,1fr); }
  .numbox{ padding:9px 10px; }
  .numbox b{ font-size:20px; }
  .numbox span{ font-size:11px; }
  .key{ min-height:58px; }
  .sheet-head b.grand{ font-size:40px; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
@media print{
  body > *:not(#printArea){ display:none !important; }
  html,body{ height:auto; background:#fff; display:block; min-height:0; }
  #printArea{ display:block; }
  #printArea img{ display:block; margin:0 auto; }
}