/* restaurant-orders.css — Restaurant Table Orders (/restaurant-orders/).
   The page is generated: see scripts/build-restaurant-orders.js.

   THE LOOK. The same hand as the Account Book (public/accounts/accounts.css) and the Shop
   Billing Counter: warm paper and dark ink by day, deep green-black and cream by night.
   Words are set in IBM Plex Sans; titles, and every figure that matters — a total, a
   price, what a table has run up — in Source Serif 4. One colour, a terracotta ink, marks
   where you are, what is chosen and which tables are busy; a button that does the main
   thing is plain ink; green is kept for money coming in, which here is the Pay button.
   Nothing glows.

   THE LAYOUT. On a wide screen the app is two columns: a sidebar to move about in — whose
   restaurant it is, "New parcel", the five parts — and a stage where the work is done. On
   a phone the sidebar becomes a bar of five along the top of the website, and along the
   foot of the installed app.

   AN ORDER IS TAKEN BY HAND. Whatever a finger reaches for is large — tables, dishes, the
   less and more beside a line, the keys of the number pad, Send to kitchen, Pay — and
   larger still on a touch screen: --h is 40px with a mouse and 48px with a finger. */
:root{
  color-scheme:light dark;
  --bg:#efece4; --stage:#f6f4ee; --side:#e8e4da; --panel:#fffefa; --raised:#ffffff;
  --ink:#171a1b; --ink2:#5a6061; --ink3:#8e9392;
  --line:rgba(23,26,27,.10); --line2:rgba(23,26,27,.18);
  --fill:rgba(23,26,27,.045); --fill2:rgba(23,26,27,.09);
  --accent:#a8431f; --accent-soft:rgba(168,67,31,.09); --ring:rgba(168,67,31,.28);
  --primary:#171a1b; --on-primary:#faf8f2;
  --pos:#0b6b55; --pos-soft:rgba(11,107,85,.10); --neg:#b3261e; --neg-soft:rgba(179,38,30,.09); --warn:#8f5200; --warn-soft:rgba(196,124,0,.14);
  --switch:#0b8f6f;
  --shadow:0 1px 2px rgba(23,26,27,.05), 0 8px 24px -16px rgba(23,26,27,.18);
  --lift:0 1px 2px rgba(23,26,27,.10), 0 0 0 1px var(--line);
  /* the colours of the charts: a set checked to stay apart for colour-blind readers */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --rule:rgba(23,26,27,.09);
  --ui:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --serif:"Source Serif 4","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --h:40px; --r:10px; --r-card:16px;
  /* the names the shared guide and related-tools styles look for */
  --cream:var(--bg); --paper:var(--panel); --inksoft:var(--ink2); --maroon:var(--accent); --gold:var(--accent); --golddeep:var(--ink2); --radius:var(--r-card);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#090c0b; --stage:#0f1413; --side:#0b0f0e; --panel:#151b19; --raised:#1c2321;
    --ink:#eeeae0; --ink2:#a2a8a3; --ink3:#6d746f;
    --line:rgba(238,234,224,.09); --line2:rgba(238,234,224,.17);
    --fill:rgba(238,234,224,.05); --fill2:rgba(238,234,224,.10);
    --accent:#ffab8a; --accent-soft:rgba(255,171,138,.12); --ring:rgba(255,171,138,.34);
    --primary:#eeeae0; --on-primary:#0f1413;
    --pos:#178a6c; --pos-soft:rgba(90,212,173,.12); --neg:#ff8d7e; --neg-soft:rgba(255,141,126,.12); --warn:#f0b65a; --warn-soft:rgba(240,182,90,.13);
    --switch:#2fae8a;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -18px rgba(0,0,0,.6);
    --lift:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--line2);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --rule:rgba(238,234,224,.09);
  }
}
@media (pointer:coarse){ :root{ --h:48px; } }

*{ 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(--ui); font-size:15px; line-height:1.45; background:var(--bg); color:var(--ink); display:flex; flex-direction:column; min-height:100%; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
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{ outline:2px solid var(--accent); outline-offset:2px; }
svg{ display:block; }
::selection{ background:var(--accent-soft); }

/* ---------- the website's own bar, above the app ---------- */
header.site{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:8px 24px; border-bottom:1px solid var(--line); }
header.site .brand{ font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--ink); 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(--ink2); }
header.site .back{ font-size:14px; color:var(--ink2); text-decoration:none; text-align:right; }
header.site .back:hover{ color:var(--ink); }
.hdr-right{ display:flex; align-items:center; gap:16px; min-width:0; }
.hdr-install{ flex:none; display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px 0 11px; border:none; border-radius:10px; background:var(--primary); color:var(--on-primary); font-size:14px; font-weight:600; }
.hdr-install svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hdr-install:hover{ opacity:.88; }

main{ width:100%; max-width:1320px; margin:0 auto; padding:20px 24px calc(48px + env(safe-area-inset-bottom)); }
h1.title{ font-family:var(--serif); font-size:44px; line-height:1.08; font-weight:600; letter-spacing:-.02em; margin:14px 2px 6px; }
.sub{ color:var(--ink2); font-size:16px; margin:0 2px 22px; max-width:68ch; }

/* the invitation to install: the app's icon, a line about it, and one button */
.installcard{ display:flex; align-items:center; gap:14px; padding:12px 14px; margin-bottom:8px; border-radius:14px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); animation:rise .4s cubic-bezier(.2,.7,.2,1) both; }
.installcard img{ flex:none; width:48px; height:48px; border-radius:11px; }
.ic-text{ flex:1 1 auto; min-width:0; }
.ic-text b{ display:block; font-size:16px; font-weight:600; }
.ic-text span{ display:block; font-size:14px; color:var(--ink2); }
.installcard .btn{ flex:none; min-width:104px; }
.is-app .installcard, .is-app .hdr-install{ display:none; }

/* ============ the app: a sidebar and a stage ============ */
.shell{ position:relative; border:1px solid var(--line); border-radius:20px; background:var(--stage); box-shadow:var(--shadow); }
.stage{ min-width:0; padding:16px 16px 28px; }
.stage > .tabpane, .stage > .stagebar, .stage > .setupbar, .stage > .updatebar, .stage > .warn{ max-width:1160px; }
.stagebar{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:6px 2px 18px; }
.stagebar h2{ font-family:var(--serif); font-size:30px; line-height:1.1; font-weight:600; letter-spacing:-.018em; }
.stagebar span{ font-size:14px; color:var(--ink2); }

.side-top{ display:flex; align-items:center; gap:11px; min-width:0; }
.side-top img{ flex:none; width:36px; height:36px; border-radius:9px; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.side-id{ min-width:0; }
.side-id b{ display:block; font-size:15px; font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-id span{ display:block; font-size:12.5px; color:var(--ink2); }
.newbtn{ display:flex; align-items:center; gap:9px; width:100%; min-height:42px; padding:0 10px 0 12px; border:none; border-radius:10px; background:var(--primary); color:var(--on-primary); font-size:15px; font-weight:600; transition:opacity .15s, transform .1s; }
.newbtn:hover{ opacity:.9; }
.newbtn:active{ transform:translateY(1px); }
.newbtn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.newbtn span{ flex:1 1 auto; text-align:left; }
.newbtn kbd{ font:500 11px/1 var(--ui); padding:4px 6px; border-radius:5px; background:color-mix(in srgb, var(--on-primary) 16%, transparent); }
.tabs button{ font-weight:500; border:none; background:none; color:var(--ink2); transition:background .15s, color .15s; }
.tabs svg{ flex:none; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tabs button[aria-selected="true"]{ color:var(--ink); }
.side-foot{ font-size:12px; color:var(--ink3); line-height:1.5; }
.side-foot span{ display:block; }
.fab{ display:none; }

/* a wide screen: the two columns */
@media(min-width:920px){
  .shell{ display:grid; grid-template-columns:236px minmax(0,1fr); background:linear-gradient(to right, var(--side) 236px, var(--stage) 236px); overflow:clip; }
  .shell::after{ content:""; position:absolute; left:236px; top:0; bottom:0; width:1px; background:var(--line); }
  .side{ position:sticky; top:0; align-self:start; display:flex; flex-direction:column; gap:14px; max-height:100dvh; padding:18px 12px 16px; overflow:auto; }
  .side-top{ padding:0 6px 4px; }
  .tabs{ display:flex; flex-direction:column; gap:2px; margin-top:4px; }
  .tabs button{ position:relative; display:flex; align-items:center; gap:11px; min-height:38px; padding:0 12px; border-radius:9px; font-size:14.5px; text-align:left; }
  .tabs button:hover{ background:var(--fill); color:var(--ink); }
  .tabs button[aria-selected="true"]{ background:var(--raised); box-shadow:var(--lift); font-weight:600; }
  .tabs button[aria-selected="true"]::before{ content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
  .tabs button[aria-selected="true"] svg{ color:var(--accent); }
  .side-foot{ margin-top:auto; padding:14px 8px 0; border-top:1px solid var(--line); }
  .stage{ padding:26px 34px 40px; background:radial-gradient(900px 320px at 88% -80px, var(--accent-soft), transparent 70%); }
}
/* a narrow one: the five parts as one bar that stays in reach */
@media(max-width:919px){
  .side{ display:contents; }
  .side-top, .newbtn, .side-foot{ display:none; }
  .tabs{ position:sticky; top:8px; z-index:12; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:3px; margin:10px 10px 0; border-radius:12px; background:color-mix(in srgb, var(--side) 86%, transparent); -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px); box-shadow:0 0 0 1px var(--line); }
  .tabs button{ min-height:42px; border-radius:9px; font-size:13.5px; padding:4px 2px; }
  .tabs svg{ display:none; }
  .tabs button[aria-selected="true"]{ background:var(--raised); box-shadow:var(--lift); font-weight:600; }
  .stagebar{ margin:10px 2px 14px; }
  .stagebar h2{ font-size:26px; }
}

/* ---------- 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 shell fills the window. (shell.js sets .is-app.) */
.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; max-width:1160px; margin:0 auto 16px; }
.is-app{ background:var(--stage); overscroll-behavior-y:none; -webkit-touch-callout:none; }
.is-app main{ max-width:none; padding:0; }
.is-app .shell{ border:none; border-radius:0; box-shadow:none; min-height:100dvh; }
.is-app .step-label, .is-app .stat, .is-app .side, .is-app .tile{ -webkit-user-select:none; user-select:none; }
@media(min-width:920px){
  .is-app .side{ height:100dvh; padding-top:calc(18px + env(safe-area-inset-top)); }
  .is-app .stage{ padding:30px 40px 48px; }
  .is-app.show-guide .web-only{ margin-left:276px; margin-right:40px; }
}
@media(max-width:919px){
  /* whose counter it is, at the head; the five parts along the foot; "new bill" above them */
  .is-app .side-top{ display:flex; padding:calc(14px + env(safe-area-inset-top)) 18px 0; }
  .is-app .tabs{ position:fixed; top:auto; left:0; right:0; bottom:0; margin:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); border-radius:0; gap:0; background:color-mix(in srgb, var(--side) 88%, transparent); box-shadow:0 -1px 0 var(--line); z-index:14; }
  .is-app .tabs button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:50px; font-size:11.5px; font-weight:500; border-radius:10px; }
  .is-app .tabs svg{ display:block; width:22px; height:22px; }
  .is-app .tabs button[aria-selected="true"]{ background:none; box-shadow:none; color:var(--accent); font-weight:600; }
  .is-app .stage{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .is-app .fab{ position:fixed; right:18px; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:13; display:flex; align-items:center; justify-content:center; width:58px; height:58px; border:none; border-radius:50%; background:var(--primary); color:var(--on-primary); box-shadow:0 10px 26px -6px rgba(0,0,0,.45); transition:transform .12s; }
  .is-app .fab:active{ transform:scale(.93); }
  .fab svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
  .is-app .toast{ bottom:calc(84px + env(safe-area-inset-bottom)); }
  .is-app.show-guide .web-only{ margin:0 16px 16px; }
}
/* while an order is being taken the round "new parcel" button stays out of its way */
body.on-order .fab{ display:none !important; }

/* a new version is ready; the app is not set up; there are bills in no export */
.updatebar, .setupbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 10px 10px 16px; margin-bottom:14px; border-radius:12px; animation:rise .3s cubic-bezier(.2,.7,.2,1) both; }
.updatebar{ position:sticky; top:8px; z-index:13; background:var(--primary); color:var(--on-primary); box-shadow:0 12px 30px -10px rgba(0,0,0,.35); }
.updatebar span, .setupbar span{ flex:1 1 220px; min-width:0; font-size:14.5px; }
.updatebar .btn{ background:var(--on-primary); color:var(--primary); border-color:transparent; }
.updatebar .xbtn{ background:color-mix(in srgb, var(--on-primary) 18%, transparent); color:inherit; }
.setupbar{ background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--ring); }
.setupbar b{ font-weight:600; }
.setupbar .btn, .updatebar .btn{ flex:none; }
.rel{ padding:12px 0; border-top:1px solid var(--line); }
.rel:first-child{ border-top:none; }
.rel b{ font-size:15px; font-weight:600; }
.rel span{ font-size:13px; color:var(--ink2); margin-left:8px; }
.rel ul{ margin:6px 0 0 20px; font-size:14px; color:var(--ink2); }

/* ---------- cards ---------- */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; margin-bottom:16px; }
.tabpane > *{ animation:rise .42s cubic-bezier(.2,.7,.2,1) both; }
.tabpane > :nth-child(2){ animation-delay:.04s; } .tabpane > :nth-child(3){ animation-delay:.08s; } .tabpane > :nth-child(4){ animation-delay:.12s; } .tabpane > :nth-child(n+5){ animation-delay:.16s; }
@keyframes rise{ from{ opacity:0; transform:translateY(8px); } }
.step-label{ font-family:var(--serif); font-size:20px; line-height:1.25; font-weight:600; letter-spacing:-.01em; margin:0 0 14px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.step-label.gap{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.step-label .cnt{ font-family:var(--ui); font-size:13.5px; font-weight:400; letter-spacing:0; color:var(--ink2); text-align:right; }
/* a form reads best in a column that is not too wide */
#tab-shop .panel, #tab-menu .panel{ max-width:860px; }

/* ---------- typing ---------- */
input, select, textarea{ font-size:15px; height:var(--h); padding:0 12px; border:1px solid var(--line2); border-radius:var(--r); background-color:var(--raised); color:var(--ink); width:100%; min-width:0; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
input::placeholder, textarea::placeholder{ color:var(--ink3); }
textarea{ height:auto; min-height:72px; padding:10px 12px; resize:vertical; line-height:1.4; }
select{ -webkit-appearance:none; appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238e9392' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:11px 8px; text-overflow:ellipsis; }
input[type="search"]{ padding-left:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238e9392' stroke-width='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:12px center; background-size:16px 16px; }
@media (pointer:coarse){ input, select, textarea{ font-size:16px; } }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; font-weight:500; color:var(--ink2); margin:0 1px 6px; }
.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.micfield, .monthfield{ max-width:360px; }
.note{ font-size:13.5px; line-height:1.5; color:var(--ink2); margin:0 1px 12px; max-width:78ch; }
.note:last-child{ margin-bottom:0; }
.note.center{ text-align:center; margin-left:auto; margin-right:auto; }
.note.gapnote{ margin-top:12px; }
.note a, .more a{ color:var(--accent); text-decoration:none; font-weight:500; }
.note b{ color:var(--ink); font-weight:600; }
.warn{ font-size:14px; line-height:1.45; color:var(--warn); background:var(--warn-soft); border-radius:var(--r); padding:11px 14px; margin:0 0 14px; }
.empty{ color:var(--ink2); font-size:14.5px; padding:26px 4px; text-align:center; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:500; min-height:var(--h); padding:0 16px; border:1px solid var(--line2); border-radius:var(--r); background:var(--raised); color:var(--ink); text-decoration:none; text-align:center; white-space:nowrap; user-select:none; -webkit-user-select:none; transition:background .15s, opacity .15s, transform .1s; }
.btn:hover{ background:color-mix(in srgb, var(--raised) 92%, var(--ink)); }
.btn:active{ transform:translateY(1px); }
.btn.solid{ background:var(--primary); color:var(--on-primary); border-color:transparent; font-weight:600; }
.btn.solid:hover{ background:var(--primary); opacity:.88; }
.btn.wa{ background:#1a8f4c; color:#fff; border-color:transparent; }
.btn.del{ background:var(--neg-soft); color:var(--neg); border-color:transparent; }
.btn.sm{ font-size:13.5px; min-height:34px; padding:0 12px; border-radius:8px; }
.btn.big{ min-height:calc(var(--h) + 8px); padding:0 20px; font-size:15.5px; }
.btn.grow{ flex:1 1 auto; }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.4; 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; cursor:pointer; }
.filebtn input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; padding:0; }
.filebtn:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
.xbtn{ flex:none; width:34px; height:34px; border-radius:50%; border:none; background:var(--fill2); font-size:13px; font-weight:700; color:var(--ink2); line-height:1; }
.xbtn:hover{ color:var(--ink); }
@media (pointer:coarse){ .xbtn{ width:40px; height:40px; } }

.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ font-size:13.5px; font-weight:500; min-height:calc(var(--h) - 6px); padding:0 13px; border-radius:999px; border:1px solid var(--line2); background:transparent; color:var(--ink2); white-space:nowrap; user-select:none; -webkit-user-select:none; transition:background .15s, color .15s, border-color .15s; }
.chip:hover{ color:var(--ink); background:var(--fill); }
.chip[aria-checked="true"], .chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--stage); }
/* the ready lists a counter can start from */
.bigchips{ gap:8px; }
.bigchips .chip{ min-height:var(--h); padding:0 16px; border-radius:var(--r); font-size:14.5px; color:var(--ink); background:var(--raised); }

/* one of a few, chosen */
.seg, .modes{ display:inline-flex; background:var(--fill2); border-radius:var(--r); padding:3px; gap:2px; max-width:100%; flex-wrap:wrap; }
.seg button, .modes button{ font-size:14px; font-weight:500; min-height:calc(var(--h) - 6px); padding:0 16px; border:none; border-radius:7px; background:none; color:var(--ink2); transition:background .18s, box-shadow .18s, color .18s; }
.seg button[aria-checked="true"], .modes button[aria-checked="true"]{ background:var(--raised); color:var(--ink); font-weight:600; box-shadow:var(--lift); }

/* a switch */
.check{ display:flex; flex-direction:row-reverse; justify-content:space-between; gap:16px; align-items:center; min-height:54px; padding:10px 1px; border-top:1px solid var(--line); font-size:15px; cursor:pointer; }
.check > span{ flex:1 1 auto; min-width:0; font-weight:500; }
.check small{ display:block; font-size:13px; font-weight:400; line-height:1.45; color:var(--ink2); margin-top:2px; }
.check input, input.sw{ -webkit-appearance:none; appearance:none; flex:none; width:42px; height:24px; min-height:0; padding:0; border:none; border-radius:12px; background:var(--fill2); background-image:none; position:relative; cursor:pointer; transition:background .2s; box-shadow:inset 0 0 0 1px var(--line2); }
.check input::after, input.sw::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .2s cubic-bezier(.3,.7,.2,1); }
.check input:checked, input.sw:checked{ background:var(--switch); box-shadow:none; }
.check input:checked::after, input.sw:checked::after{ transform:translateX(18px); }
.check input:focus, input.sw:focus{ box-shadow:0 0 0 3px var(--ring); }
@media (pointer:coarse){
  .check input, input.sw{ width:50px; height:30px; border-radius:15px; }
  .check input::after, input.sw::after{ width:24px; height:24px; }
  .check input:checked::after, input.sw:checked::after{ transform:translateX(20px); }
}

/* ============ the tables ============
   Each table is one large key: a free one is an outline, a busy one is filled and ringed
   in the accent and says what it has run up, for how long, and what is waiting. */
.floorbar{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.floorbar .cats{ flex:1 1 auto; min-width:0; margin-bottom:0; }
.floorbar .btn{ flex:none; margin-left:auto; }
#floor .step-label{ margin:0 2px 10px; }
.tgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:24px; }
.ttile{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-height:116px; padding:13px 14px 12px; text-align:left; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--ink); user-select:none; -webkit-user-select:none; transition:transform .1s, border-color .15s, box-shadow .15s, background .15s; }
.ttile:hover{ border-color:var(--line2); box-shadow:var(--shadow); }
.ttile:active{ transform:scale(.97); }
.ttile .tt-name{ font-size:15.5px; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
.ttile .tt-amt{ font-family:var(--serif); font-size:25px; line-height:1.2; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums lining-nums; margin-top:auto; }
.ttile .tt-meta{ font-size:12.5px; color:var(--ink2); }
.ttile .tt-flag{ align-self:stretch; margin-top:5px; padding:3px 8px; border-radius:6px; font-size:12px; font-weight:600; background:var(--fill2); color:var(--ink2); }
.ttile.free{ background:none; border-style:dashed; border-color:var(--line2); }
.ttile.free .tt-name{ font-weight:500; }
.ttile.free .tt-meta{ margin-top:auto; color:var(--ink3); }
.ttile.busy{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:color-mix(in srgb, var(--panel) 93%, var(--accent)); }
.ttile.due .tt-flag{ background:var(--warn-soft); color:var(--warn); }
.ttile.billed .tt-flag{ background:var(--pos-soft); color:var(--pos); }
@media (prefers-color-scheme:dark){ .ttile.billed .tt-flag{ color:#5ad4ad; } }
@media (pointer:coarse){ .ttile{ min-height:124px; } }
#tablesEmpty .note{ margin-bottom:0; }
/* the tables as they are listed under Restaurant, to rename or remove */
#tableList .chip{ display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; line-height:1.2; }
#tableList .chip small{ font-size:11.5px; font-weight:400; color:var(--ink2); }
#tableList .chip.busy{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }

/* ============ one order ============ */
.orderbar{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.counter{ display:grid; grid-template-columns:minmax(0,1fr); }
.panel.pick{ background:none; border:none; padding:0; border-radius:0; }
.firstrun{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; }
.findrow{ display:flex; gap:8px; margin-bottom:12px; }
.findrow input{ height:calc(var(--h) + 6px); }
.micbtn{ flex:none; display:inline-flex; align-items:center; gap:8px; height:calc(var(--h) + 6px); padding:0 16px; border-radius:var(--r); border:1px solid var(--line2); background:var(--raised); color:var(--ink); font-size:15px; font-weight:500; transition:background .2s, color .2s, border-color .2s; }
.micbtn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.micbtn[aria-pressed="true"]{ background:var(--neg); border-color:transparent; color:#fff; animation:listening 1.4s ease-in-out infinite; }
@keyframes listening{ 0%,100%{ box-shadow:0 0 0 0 rgba(179,38,30,.4); } 50%{ box-shadow:0 0 0 9px rgba(179,38,30,0); } }
.micbar{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:12px; font-size:14.5px; }
.mic-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mic-top b{ font-weight:600; }
.mic-top #micHeard{ color:var(--ink2); font-style:italic; }
.pulse{ width:9px; height:9px; border-radius:50%; background:var(--neg); animation:pulse 1.1s infinite; flex:none; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(179,38,30,.45); } 100%{ box-shadow:0 0 0 10px rgba(179,38,30,0); } }
.mic-added{ font-weight:600; color:var(--pos); margin-top:6px; }
.mic-added:empty{ display:none; }
.mic-missed{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13.5px; color:var(--ink2); }
.mic-missed .chip{ border-color:transparent; background:var(--warn-soft); color:var(--warn); font-weight:600; }
.mic-missed .chip[aria-pressed="true"]{ background:var(--warn); color:var(--panel); }
.cats{ margin-bottom:12px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.cats::-webkit-scrollbar{ display:none; }
.cats .chip{ flex:none; }
.cats:empty{ display:none; }

/* what is served, one large key each */
.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; }
.tile{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:10px; min-height:92px; padding:13px 14px 12px 22px; text-align:left; border:1px solid var(--line); border-radius:12px; background:var(--panel); user-select:none; -webkit-user-select:none; transition:transform .1s, border-color .15s, box-shadow .15s, background .15s; }
.tile:hover{ border-color:var(--line2); box-shadow:var(--shadow); }
.tile:active{ transform:scale(.97); background:var(--fill); }
/* the colour of the dish's group, as a rule down its side */
.tile::before{ content:""; position:absolute; left:10px; top:13px; bottom:12px; width:3px; border-radius:2px; background:var(--hue,var(--accent)); }
.tile .tn{ font-size:15.5px; font-weight:600; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; padding-right:6px; }
.tile .tp{ font-family:var(--serif); font-size:16px; color:var(--ink2); font-variant-numeric:tabular-nums lining-nums; }
.tile .tp.none{ font-family:var(--ui); font-size:13.5px; font-weight:500; color:var(--warn); }
.tile .tq{ position:absolute; top:-7px; right:-6px; min-width:26px; height:26px; padding:0 8px; border-radius:13px; background:var(--primary); color:var(--on-primary); font-family:var(--serif); font-size:14.5px; font-weight:600; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--stage); animation:pop .26s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop{ from{ transform:scale(.4); } }
.tile.in{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:color-mix(in srgb, var(--panel) 92%, var(--accent)); }
.tile.in .tp{ color:var(--ink); }
.tile.teach{ border-color:var(--warn); box-shadow:0 0 0 1px var(--warn); }
.tile.other{ background:none; border-style:dashed; border-color:var(--line2); padding-left:14px; }
.tile.other::before{ display:none; }
.tile.other .tn{ color:var(--ink2); font-weight:500; }
.tile.other .tp{ font-family:var(--ui); font-size:13px; }
@media (pointer:coarse){ .tile{ min-height:100px; } .tile .tn{ font-size:16px; } }

/* what the table has asked for */
.bill .step-label{ margin-bottom:4px; }
.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:1px solid var(--line); border-radius:8px; }
.bl.flash{ animation:flash 1s; }
@keyframes flash{ 0%,45%{ background:var(--accent-soft); box-shadow:0 0 0 8px var(--accent-soft); } 100%{ background:transparent; box-shadow:0 0 0 8px transparent; } }
.bl .bn{ font-size:15.5px; font-weight:600; overflow-wrap:anywhere; line-height:1.25; }
.bl .br{ font-size:13px; color:var(--ink2); margin-top:1px; font-variant-numeric:tabular-nums; }
.bl .br.none{ color:var(--warn); font-weight:500; }
.bl .ba{ font-family:var(--serif); font-size:18px; font-weight:600; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums lining-nums; }
/* less · how many · more, as one control */
.bl .step{ grid-column:1 / -1; display:flex; align-items:stretch; height:calc(var(--h) + 4px); border:1px solid var(--line2); border-radius:var(--r); background:var(--raised); overflow:hidden; }
.stepb{ flex:0 0 64px; border:none; background:none; font-size:22px; font-weight:400; color:var(--ink); line-height:1; transition:background .1s; }
.stepb:hover, .qtyb:hover{ background:var(--fill); }
.stepb:active, .qtyb:active{ background:var(--fill2); }
.stepb.minus{ color:var(--neg); }
.qtyb{ flex:1 1 auto; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); background:none; font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink); padding:0 10px; min-width:84px; font-variant-numeric:tabular-nums lining-nums; transition:background .1s; }
/* what the kitchen knows of a line, and a note for it */
.bl .bk{ font-size:12.5px; margin-top:3px; color:var(--ink3); }
.bl .bk.sent::before{ content:"✓ "; }
.bl .bk.new{ color:var(--warn); font-weight:600; }
.bl .bk.cancel{ color:var(--neg); font-weight:600; }
.bnote{ display:inline-block; max-width:100%; margin-top:6px; padding:4px 0; border:none; background:none; color:var(--accent); font-size:13px; font-weight:500; text-align:left; overflow-wrap:anywhere; }
.bnote.has{ padding:4px 9px; border-radius:7px; background:var(--accent-soft); color:var(--ink); font-style:italic; }
.bl.gone .bn{ text-decoration:line-through; color:var(--ink3); }
.bl.gone .br{ display:none; }
.bl.gone .step{ height:auto; border:none; background:none; overflow:visible; }
.kotstate{ margin-top:14px; font-size:13.5px; color:var(--ink2); }
.kotstate:empty{ display:none; }
.kotstate.due{ color:var(--warn); font-weight:600; }
/* Send to kitchen: the main thing while an order is being taken, in plain ink */
.sendbtn{ width:100%; margin-top:10px; min-height:54px; border:none; border-radius:12px; background:var(--primary); color:var(--on-primary); font-size:16px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:10px; padding:0 18px; user-select:none; -webkit-user-select:none; transition:opacity .15s, transform .1s; }
.sendbtn:hover{ opacity:.9; }
.sendbtn:active{ transform:translateY(1px); }
.sendbtn b{ min-width:26px; height:26px; padding:0 8px; border-radius:13px; background:var(--on-primary); color:var(--primary); font-family:var(--serif); font-size:15px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.sendbtn b:empty{ display:none; }
.sendbtn[disabled]{ background:var(--fill2); color:var(--ink3); pointer-events:none; }
.payrow{ display:grid; grid-template-columns:minmax(96px,auto) minmax(0,1fr); gap:8px; margin-top:8px; }
.payrow .btn{ min-height:60px; }
.payrow .paybtn{ margin-top:0; }
.btn.pay{ background:var(--pos); color:#fff; border-color:transparent; font-weight:600; }
.btn.pay:hover{ background:var(--pos); opacity:.92; }
.sheet-foot.wrap .btn.pay{ flex-basis:100%; }
.sumbox{ margin-top:12px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; font-size:14.5px; }
.sumbox:empty{ display:none; }
.sumbox dt{ color:var(--ink2); }
.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:0 6px; }
/* Pay: the one green thing — money coming in */
.paybtn{ width:100%; margin-top:10px; min-height:60px; border:none; border-radius:12px; background:var(--pos); color:#fff; font-size:17px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 20px; user-select:none; -webkit-user-select:none; transition:opacity .15s, transform .1s; }
.paybtn:hover{ opacity:.92; }
.paybtn:active{ transform:translateY(1px); }
.paybtn b{ font-family:var(--serif); font-size:26px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums lining-nums; }
.paybtn[disabled]{ background:var(--fill2); color:var(--ink3); }
/* the bill saved last, at the head of the tables: print it, send it, open it */
.last{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:18px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.last span{ flex:1 1 100%; min-width:0; color:var(--ink2); font-size:13.5px; }
.last .btn{ flex:1 1 auto; padding:0 10px; }

/* the total, in reach while the tiles are scrolled: a bar that floats at the foot */
.totalbar{ position:sticky; bottom:10px; z-index:11; display:flex; align-items:stretch; gap:12px; margin-top:14px; padding:8px 8px 8px 16px; border:1px solid var(--line2); border-radius:14px; background:color-mix(in srgb, var(--raised) 90%, transparent); -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px); box-shadow:0 14px 34px -14px rgba(0,0,0,.35); }
.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:12.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-sum b{ font-family:var(--serif); font-size:28px; font-weight:600; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums lining-nums; }
.totalbar .paybtn, .totalbar .sendbtn{ width:auto; flex:0 0 44%; margin:0; min-height:54px; justify-content:center; }
@media(max-width:919px){ .is-app .totalbar{ bottom:calc(72px + env(safe-area-inset-bottom)); } }
/* room for the tiles beside the order: the order stays in sight and the bar is not needed */
@media(min-width:1180px){
  .counter{ grid-template-columns:minmax(0,1fr) 380px; column-gap:18px; align-items:start; }
  .counter .bill{ position:sticky; top:16px; max-height:calc(100dvh - 32px); overflow:auto; margin-bottom:0; }
  .totalbar{ display:none; }
  .tiles{ grid-template-columns:repeat(auto-fill,minmax(144px,1fr)); }
}
@media(max-width:1179px){ .counter .pick{ margin-bottom:14px; } }

/* ---------- figures at a glance ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; }
.stat{ display:block; width:100%; text-align:left; border:1px solid var(--line); border-radius:12px; background:var(--raised); padding:14px 16px; min-width:0; }
.stat dt{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
.stat dd{ display:block; font-family:var(--serif); font-size:26px; line-height:1.2; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums lining-nums; margin-top:6px; }
.stat small{ display:block; font-family:var(--ui); font-size:12.5px; font-weight:400; letter-spacing:0; margin-top:4px; opacity:.72; white-space:normal; }
.stat.main{ grid-column:span 2; background:var(--primary); color:var(--on-primary); border-color:transparent; position:relative; overflow:hidden; }
.stat.main::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--on-primary) 7%, transparent) 27px 28px); pointer-events:none; }
.stat.main dt{ color:inherit; opacity:.72; }
.stat.main dd{ font-size:42px; letter-spacing:-.02em; }

/* ---------- 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-top:1px solid var(--line); }
.rows > .row:first-child{ border-top:none; }
.rowmain{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 14px; align-items:center; align-content:center; text-align:left; border:none; background:none; width:100%; min-width:0; min-height:56px; padding:9px 8px; border-radius:9px; transition:background .12s; }
button.rowmain:hover{ background:var(--fill); }
div.rowmain{ cursor:default; }
.rowmain .rw{ font-size:15px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rowmain .rt{ font-size:15px; font-weight:500; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.rowmain .rn{ grid-column:1 / -1; font-size:13px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rt.owes{ color:var(--neg); font-weight:600; }
.row.void .rt, .row.void .rw{ text-decoration:line-through; color:var(--ink3); }
.row.off .rw{ color:var(--ink2); }
.rows.small{ max-height:34dvh; overflow:auto; margin-bottom:10px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:2px 8px; }
.rows.small .empty{ padding:18px 0; }
.racts{ display:flex; gap:6px; align-items:center; }
.ib{ display:inline-flex; align-items:center; justify-content:center; min-width:var(--h); height:var(--h); padding:0 10px; border-radius:var(--r); border:1px solid var(--line2); background:var(--raised); color:var(--ink2); font-size:13px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ib.del{ color:var(--neg); border-color:transparent; background:var(--neg-soft); }
.ib:disabled{ opacity:.3; }
/* a price in the menu: tap it to change it */
.ib.price{ min-width:104px; font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink); }
.ib.price.none{ font-family:var(--ui); font-size:13.5px; font-weight:500; border-color:transparent; background:var(--warn-soft); color:var(--warn); }
.daynav{ display:flex; gap:8px; align-items:center; margin-bottom:16px; }
.daynav input{ flex:1 1 0; width:auto; min-width:0; max-width:240px; text-align:center; font-weight:600; font-variant-numeric:tabular-nums; }
.navb{ flex:none; width:var(--h); height:var(--h); border-radius:50%; border:1px solid var(--line2); background:var(--raised); font-size:22px; color:var(--ink); line-height:1; padding-bottom:3px; }
.navb:hover{ background:var(--fill); }
.navb:disabled{ color:var(--ink3); opacity:.6; }

/* ---------- tables ---------- */
.scrollx{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; font-size:14.5px; }
.tbl th, .tbl td{ padding:9px 8px; border-bottom:1px solid var(--line); 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:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
.tbl tr.sum td{ font-weight:700; border-bottom:none; }
.tbl tbody tr[data-day]{ cursor:pointer; }
.tbl tbody tr[data-day]:hover td{ background:var(--fill); }
.tbl tbody tr[data-day] td:first-child{ color:var(--accent); font-weight:500; }

/* ============ reports ============
   One row of choices, then the figures and pictures it scopes. In a picture the columns
   are the only loud thing; 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:16px; min-width:0; }
.rep-filter .chips{ flex:1 1 auto; min-width:0; }
.rep-dates{ display:flex; align-items:center; gap:8px; color:var(--ink2); font-size:13.5px; }
.rep-dates input{ width:auto; min-width:0; font-size:14px; font-variant-numeric:tabular-nums; }
#repBody{ transition:opacity .15s; }
#repBody.stale{ opacity:.55; }
.rep-hero{ display:flex; flex-direction:column; }
.rep-label{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
.rep-big{ font-family:var(--serif); font-size:60px; line-height:1.05; font-weight:600; letter-spacing:-.025em; margin:6px 0 6px; overflow-wrap:anywhere; font-variant-numeric:lining-nums; }
.rep-delta{ font-size:14px; color:var(--ink2); margin-bottom:18px; }
.rep-delta.up{ color:var(--pos); font-weight:500; }
.rep-delta.down{ color:var(--neg); font-weight:500; }
@media (prefers-color-scheme:dark){ .rep-delta.up, .mic-added, .numbox.out b{ color:#5ad4ad; } }
.chart{ position:relative; min-height:210px; }
.chart svg{ display:block; overflow:visible; touch-action:pan-y; }
.chart .grid{ stroke:var(--rule); stroke-width:1; }
.chart .axis{ stroke:var(--line2); stroke-width:1; }
.chart .tick{ fill:var(--ink2); font-size:11px; font-family:var(--ui); font-variant-numeric:tabular-nums; }
.chart .bar{ fill:var(--s1); transition:opacity .12s; }
.chart.hot .bar{ opacity:.35; }
.chart.hot .bar.on{ opacity:1; }
.chart .hit{ fill:transparent; cursor:pointer; outline:none; }
.chart .hit:focus-visible{ fill:var(--accent-soft); }
.tip{ position:absolute; top:-6px; left:50%; transform:translate(-50%,-100%) scale(.96); padding:7px 12px; border-radius:9px; background:var(--primary); color:var(--on-primary); text-align:center; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s, transform .12s; box-shadow:0 8px 20px rgba(0,0,0,.22); z-index:2; }
.tip.on{ opacity:1; transform:translate(-50%,-100%) scale(1); }
.tip b{ display:block; font-size:14px; font-weight:600; }
.tip span{ display:block; font-size:12px; opacity:.75; }
.rep-table{ margin-top:12px; border-top:1px solid var(--line); }
.rep-table summary{ list-style:none; cursor:pointer; min-height:40px; display:flex; align-items:center; gap:6px; color:var(--accent); font-size:13.5px; font-weight:500; }
.rep-table summary::-webkit-details-marker{ display:none; }
.rep-table summary::before{ content:"+"; font-weight:400; font-size:16px; width:12px; }
.rep-table[open] summary::before{ content:"−"; }
.rep-table .scrollx{ max-height:320px; overflow:auto; }
.hbar{ padding:10px 0; border-top:1px solid var(--line); }
.hbar:first-child{ border-top:none; padding-top:0; }
.hb-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14.5px; }
.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:6px; margin:7px 0 5px; border-radius:3px; background:var(--fill); overflow:hidden; }
.hb-track i{ display:block; height:100%; min-width:3px; background:var(--s1); border-radius:3px; }
.hbar small{ font-size:12.5px; color:var(--ink2); }
.split{ display:flex; gap:2px; height:18px; 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:12px minmax(0,1fr) auto 44px; align-items:center; gap:10px; min-height:40px; border-top:1px solid var(--line); font-size:14.5px; }
.legend div:first-child{ border-top:none; }
.legend i{ width:10px; height:10px; border-radius:2px; }
.legend b{ font-weight:600; font-variant-numeric:tabular-nums; }
.legend small{ font-size:13px; color:var(--ink2); text-align:right; font-variant-numeric:tabular-nums; }
@media(min-width:1000px){ .rep-two{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:0 16px; align-items:start; } }

/* ---------- sheets: how much, the money, 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:1px solid var(--line); padding:22px; width:min(calc(100vw - 32px), 460px); max-width:100vw; max-height:92dvh; margin:auto; border-radius:18px; background:var(--stage); color:var(--ink); overflow:auto; box-shadow:0 40px 90px -20px rgba(0,0,0,.5); }
dialog.sheet.wide{ width:min(calc(100vw - 32px), 560px); }
dialog.sheet::backdrop, dialog.setup::backdrop{ background:rgba(10,14,13,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
dialog.sheet[open]{ animation:sheetIn .26s cubic-bezier(.2,.8,.2,1); }
dialog.sheet[open]::backdrop, dialog.setup[open]::backdrop{ animation:dim .25s ease-out; }
@keyframes sheetUp{ from{ transform:translateY(100%); } }
@keyframes sheetIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } }
@keyframes dim{ from{ opacity:0; } }
@media(max-width:640px){
  dialog.sheet, dialog.sheet.wide{ width:100vw; margin:auto auto 0; border-radius:20px 20px 0 0; border-bottom:none; padding:10px 16px calc(18px + env(safe-area-inset-bottom)); max-height:94dvh; }
  dialog.sheet::before{ content:""; display:block; width:36px; height:4px; border-radius:2px; background:var(--line2); margin:0 auto 12px; }
  dialog.sheet[open]{ animation:sheetUp .4s cubic-bezier(.32,.72,0,1); }
}
.sheet-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin:0 0 16px; }
.sheet-head b{ display:block; font-family:var(--serif); font-size:24px; line-height:1.15; font-weight:600; letter-spacing:-.015em; overflow-wrap:anywhere; }
.sheet-head span{ display:block; font-size:13.5px; color:var(--ink2); margin-top:3px; }
.sheet-head b.grand{ font-size:48px; letter-spacing:-.025em; font-variant-numeric:tabular-nums lining-nums; }
.sheet-foot{ display:flex; gap:10px; margin-top:16px; }
.sheet-foot.wrap{ flex-wrap:wrap; }
.sheet-foot.wrap .btn{ flex:1 1 46%; white-space:normal; }
.sheet-foot.wrap .btn.del{ flex-basis:100%; }
dialog.sheet .check{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin-bottom:14px; }
.sharenote{ margin:12px 2px 0; }
/* a figure being typed on the number pad */
.boxes{ display:flex; gap:8px; margin-bottom:10px; }
.numbox{ flex:1 1 0; text-align:left; border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:10px 14px; min-height:70px; min-width:0; transition:border-color .15s, box-shadow .15s; }
div.numbox{ cursor:default; }
.numbox span{ display:block; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); line-height:1.3; }
.numbox b{ display:block; font-family:var(--serif); font-size:26px; font-weight:600; letter-spacing:-.01em; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-height:32px; font-variant-numeric:tabular-nums lining-nums; }
.numbox[aria-pressed="true"], .numbox.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.numbox[aria-pressed="true"] span, .numbox.on span{ color:var(--accent); }
.numbox.out b{ color:var(--pos); }
.numbox.short b{ color:var(--neg); }
.quick{ margin-bottom:10px; }
.quick .chip{ flex:1 1 calc(25% - 6px); min-width:0; min-height:var(--h); padding:0 8px; border-radius:var(--r); font-size:14.5px; color:var(--ink); background:var(--raised); }
.quick:empty{ display:none; }
/* the keys of the number pad */
.pad{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.key{ min-height:58px; border-radius:12px; border:1px solid var(--line2); background:var(--raised); font-family:var(--serif); font-size:26px; font-weight:500; color:var(--ink); font-variant-numeric:lining-nums; user-select:none; -webkit-user-select:none; transition:background .06s; }
.key:hover{ background:color-mix(in srgb, var(--raised) 92%, var(--ink)); }
.key:active{ background:var(--fill2); }
.key.fn{ background:none; border-color:transparent; font-size:22px; color:var(--ink2); }
@media (pointer:coarse){ .key{ min-height:62px; } }
.modes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; margin-bottom:12px; }
.modes button{ min-height:var(--h); font-size:15px; }
.qrbox{ display:flex; justify-content:center; padding:14px; background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; }
.qrbox canvas{ width:min(250px, 66vw); height:auto; image-rendering:pixelated; }
/* a receipt, as it will print: white paper whatever the hour */
.receipt{ background:var(--fill2); border-radius:12px; 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:2px; box-shadow:0 14px 30px -12px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.06); }
.sample{ background:var(--fill2); border-radius:12px; padding:18px; }
.isteps{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.isteps b{ font-size:15px; font-weight:600; }
.isteps ol{ margin:8px 0 0 20px; font-size:14.5px; line-height:1.5; color:var(--ink2); }
.isteps.mine{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.isteps.mine ol{ color:var(--ink); }
#installReady .note{ margin:6px 0 12px; }
#installReady .btn{ width:100%; }
#installWait{ margin:0 2px 12px; font-size:14px; }
/* a file from another device, beside what is here */
.imptable{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:2px 14px; margin-bottom:12px; }
.imptable .tbl th, .imptable .tbl td{ text-align:left; white-space:normal; font-size:14px; }
.imptable .tbl tbody th{ font-size:11.5px; width:30%; }
.imptable .tbl tbody tr:last-child th, .imptable .tbl tbody tr:last-child td{ border-bottom:none; }
.imptable .tbl td{ font-weight:500; overflow-wrap:anywhere; }
#movePanel .btn.big{ flex:1 1 220px; }
#serialRow{ margin-top:14px; }

/* ---------- 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(--stage); color:var(--ink); overflow:hidden; }
dialog.setup[open]{ display:flex; flex-direction:column; animation:sheetUp .45s cubic-bezier(.32,.72,0,1); }
@media(min-width:700px){
  dialog.setup{ width:560px; height:min(760px, 92dvh); margin:auto; border-radius:22px; border:1px solid var(--line); box-shadow:0 40px 100px -20px rgba(0,0,0,.55); }
  dialog.setup[open]{ animation:sheetIn .3s cubic-bezier(.2,.8,.2,1); }
}
.su-top{ flex:none; display:flex; align-items:center; gap:12px; padding:calc(12px + env(safe-area-inset-top)) 18px 6px; }
.su-back{ flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line2); background:var(--raised); color:var(--ink); font-size:22px; line-height:1; padding-bottom:3px; }
.su-skip{ flex:none; min-height:38px; padding:0 6px; border:none; background:none; color:var(--ink2); font-size:14.5px; font-weight:500; }
.su-skip:hover{ color:var(--ink); }
.su-progress{ flex:1 1 auto; height:4px; border-radius:2px; background:var(--fill2); overflow:hidden; }
.su-progress i{ display:block; height:100%; width:0; border-radius:2px; background:var(--accent); transition:width .35s cubic-bezier(.2,.8,.2,1); }
.su-body{ flex:1 1 auto; overflow:auto; padding:14px 24px 22px; }
.su-step{ font-size:11.5px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }
.su-body h2{ font-family:var(--serif); font-size:32px; line-height:1.12; font-weight:600; letter-spacing:-.02em; margin-bottom:8px; }
.su-sub{ font-size:15px; line-height:1.5; color:var(--ink2); margin-bottom:20px; }
.su-body section{ animation:rise .3s cubic-bezier(.2,.7,.2,1); }
.su-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.su-cards.one{ grid-template-columns:minmax(0,1fr); }
.su-card{ display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 14px; text-align:left; border:1px solid var(--line); border-radius:14px; background:var(--panel); transition:transform .12s, border-color .15s, box-shadow .15s; }
.su-card:hover{ border-color:var(--line2); box-shadow:var(--shadow); transform:translateY(-1px); }
.su-card .su-pic{ flex:none; font-size:28px; line-height:1; }
.su-card b{ flex:1 1 auto; min-width:0; font-size:15.5px; font-weight:600; line-height:1.25; }
.su-card.wide span{ flex:none; font-size:13.5px; color:var(--ink2); }
.su-card[aria-checked="true"]{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.su-card[aria-checked="true"]::after{ content:"✓"; flex:none; color:var(--accent); font-size:18px; font-weight:700; }
#suLangFind{ margin-bottom:12px; }
.su-list{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:0 16px; margin-bottom:14px; }
.su-list .check:first-child{ border-top:none; }
.su-tools{ display:flex; align-items:center; gap:6px; margin-bottom:12px; }
.su-tools span{ flex:1 1 auto; font-size:13.5px; color:var(--ink2); }
.su-add{ display:flex; gap:8px; }
.su-add .btn{ flex:none; }
.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:baseline; gap:10px; margin:0 2px 6px; min-height:38px; }
.su-sechead b{ font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:-.01em; }
.su-sechead span{ flex:1 1 auto; font-size:13px; color:var(--ink2); }
.su-secbtn{ flex:none; align-self:center; min-height:34px; padding:0 12px; border:1px solid var(--line2); border-radius:8px; background:var(--raised); color:var(--ink); font-size:13.5px; font-weight:500; }
.su-secbtn.del{ border-color:transparent; background:var(--neg-soft); color:var(--neg); }
.su-sec .su-list{ margin-bottom:0; }
.su-row{ display:flex; align-items:center; gap:10px; min-height:58px; padding:8px 0; border-top:1px solid var(--line); }
.su-row:first-child{ border-top:none; }
.su-lab{ flex:1 1 auto; min-width:0; font-size:15px; font-weight:500; line-height:1.25; cursor:pointer; overflow-wrap:anywhere; }
.su-lab small{ display:block; font-size:12.5px; font-weight:400; color:var(--ink2); margin-top:1px; }
.su-row .ib.del{ flex:none; }
.su-row.off .su-lab{ color:var(--ink3); text-decoration:line-through; }
.su-row.off .su-lab small{ text-decoration:none; }
/* the price, typed beside the name */
.su-pricebox{ flex:none; display:flex; align-items:center; gap:4px; width:112px; height:var(--h); padding:0 10px; border:1px solid var(--line2); border-radius:var(--r); background:var(--raised); transition:border-color .15s, box-shadow .15s; }
.su-pricebox i{ font-style:normal; font-size:14px; color:var(--ink3); }
.su-pricebox.has{ border-color:var(--line2); }
.su-pricebox.has i{ color:var(--ink2); }
.su-pricebox:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.su-pricebox input.su-price{ flex:1 1 auto; width:100%; min-width:0; height:100%; padding:0; border:none; border-radius:0; background:none; box-shadow:none; text-align:right; font-family:var(--serif); font-size:17px; font-weight:600; font-variant-numeric:tabular-nums lining-nums; }
.su-pricebox input.su-price::placeholder{ font-family:var(--ui); font-weight:400; font-size:14px; }
.su-row.off .su-pricebox{ opacity:.4; }
/* the prices still to set, one at a time */
.su-item{ text-align:center; margin-bottom:14px; }
.su-item span{ display:block; font-size:13.5px; color:var(--ink2); }
.su-item b{ display:block; font-family:var(--serif); font-size:32px; line-height:1.15; font-weight:600; letter-spacing:-.02em; 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-sum{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:0 16px; margin-bottom:12px; }
.su-sum div{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line); font-size:15px; }
.su-sum div:first-child{ border-top:none; }
.su-sum dt{ color:var(--ink2); flex:none; }
.su-sum dd{ text-align:right; font-weight:500; overflow-wrap:anywhere; }
#suInstall{ width:100%; margin-top:6px; }
.su-link{ display:block; margin:14px auto 0; min-height:44px; padding:0 12px; border:none; background:none; color:var(--accent); font-size:15px; font-weight:500; }
label.su-link{ display:flex; align-items:center; justify-content:center; text-align:center; cursor:pointer; min-height:48px; padding:6px 12px; line-height:1.3; }
.su-foot{ flex:none; padding:12px 24px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--stage); }
.su-foot .btn{ width:100%; min-height:52px; font-size:16px; }

/* ---------- the reading part of the website ---------- */
.web-only{ margin-top:16px; }
body .mh-guide{ color:var(--ink); line-height:1.6; }
body .mh-guide h2{ font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:-.012em; color:var(--ink); margin-top:30px; }
body .mh-guide p, body .mh-guide li, body .mh-guide td, body .mh-guide th{ font-size:15.5px; }
body .mh-guide a{ color:var(--accent); font-weight:500; text-decoration:none; }
body .mh-guide b{ font-weight:600; }
body .mh-guide th{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink2); }
body .mh-guide th, body .mh-guide td{ border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
body .mh-guide .mh-note{ font-size:14.5px; color:var(--ink2); border-left:3px solid var(--accent); 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:14px; font-weight:500; padding:5px 12px; border-radius:999px; border:1px solid var(--line2); }
details.faq{ border-top:1px solid var(--line); }
details.faq:first-of-type{ border-top:none; }
details.faq summary{ list-style:none; cursor:pointer; font-size:16px; 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:4px; top:12px; font-size:20px; font-weight:300; color:var(--ink2); }
details.faq[open] summary::after{ content:"−"; }
details.faq p{ color:var(--ink2); font-size:15px; line-height:1.55; padding:0 0 16px; max-width:76ch; }
.occasions{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.occasions a{ font-size:14.5px; font-weight:500; padding:9px 15px; border-radius:999px; border:1px solid var(--line2); color:var(--ink); text-decoration:none; transition:background .15s; }
.occasions a:hover{ background:var(--fill); }
.more{ font-size:14px; color:var(--ink2); line-height:1.7; }
footer.site{ text-align:center; color:var(--ink2); font-size:13px; padding:24px 16px 30px; margin-top:auto; }
footer.site a{ color:var(--ink); text-decoration:none; }
/* the related-tools strip, in this page's clothes */
body .mh-related{ font-family:var(--ui); color:var(--ink); }
body .mh-related-head h2{ font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:-.012em; color:var(--ink); }
body .mh-related-head a{ color:var(--accent); font-size:14px; font-weight:500; }
body .mh-related li a{ background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:none; }
body .mh-related li a:hover, body .mh-related li a:focus-visible{ border-color:var(--line2); box-shadow:var(--shadow); }
body .mh-tx b{ color:var(--ink); font-weight:600; }
body .mh-tx span{ color:var(--ink2); }

/* a short message */
.toast{ position:fixed; top:auto; right:auto; margin:0; border:none; overflow:visible; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translate(-50%,14px) scale(.97); background:var(--primary); color:var(--on-primary); font-size:14.5px; font-weight:500; line-height:1.35; padding:12px 16px; border-radius:12px; box-shadow:0 14px 34px -8px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s, transform .28s 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:inherit; font-weight:700; font-size:14.5px; padding:4px 0; white-space:nowrap; text-decoration:underline; text-underline-offset:3px; }
/* while an order is open the floating total is at the foot, so the message sits above it */
@media(max-width:1179px){ body.on-order .toast{ bottom:calc(92px + env(safe-area-inset-bottom)); } }
@media(max-width:919px){ .is-app.on-order .toast{ bottom:calc(156px + env(safe-area-inset-bottom)); } }

#printArea{ display:none; }

@media(max-width:640px){
  main{ padding:10px 10px calc(40px + env(safe-area-inset-bottom)); }
  .stage{ padding:12px 10px 24px; }
  .is-app .side-top{ padding-left:12px; padding-right:12px; }
  .daynav{ flex-wrap:wrap; }
  .daynav input{ flex:1 1 120px; max-width:none; }
  .daynav .btn{ flex:1 1 100%; }
  h1.title{ font-size:34px; }
  .sub{ font-size:15px; margin-bottom:16px; }
  .panel, .firstrun{ padding:16px; }
  .installcard{ flex-wrap:wrap; }
  .installcard .ic-text{ flex-basis:calc(100% - 110px); }
  .installcard .btn{ flex:1 1 100%; order:5; }
  header.site{ padding:8px 16px; }
  .back{ display:none; }
  .stat.main dd{ font-size:36px; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat dd{ font-size:22px; }
  .rep-big{ font-size:48px; }
  .rep-dates{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); flex:1 1 100%; }
  .rep-dates input{ width:100%; padding:0 8px; }
  .rep-filter .chips{ flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:2px 16px; max-width:calc(100% + 32px); scrollbar-width:none; }
  .rep-filter .chips::-webkit-scrollbar{ display:none; }
  .tiles, .tgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .micbtn span{ display:none; }
  .micbtn{ width:calc(var(--h) + 6px); padding:0; justify-content:center; }
  .numbox{ padding:9px 10px; }
  .numbox b{ font-size:21px; }
  .sheet-head b.grand{ font-size:40px; }
}
@media(max-width:420px){
  .two{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
/* a receipt going to the printer: nothing of the page but the receipt */
@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; }
}