/* © 2026 Qder.ai (Itay Funes). All rights reserved. Proprietary and confidential; see LICENSE. */
/* ==========================================================================
   Qder.ai - signed-in panels.

   Same language as the landing: light ground, navy ink, one cobalt accent,
   dense rather than airy. A panel is scanned and operated, so summary comes
   before detail and state is encoded in shape as well as number.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&family=Assistant:wght@400;500;600;700&family=Readex+Pro:wght@600&display=swap");

:root {
  --cobalt:     #0B3FD9;
  --cobalt-700: #0830A8;
  --cobalt-300: #6E92F2;
  --cobalt-100: #DEE7FD;
  --cobalt-50:  #F1F5FE;

  --navy:   #0A1330;
  --ink:    #111A33;
  --body:   #4A5578;
  --muted:  #78829E;
  --line:   #E3E8F2;
  --line-2: #EFF2F8;
  --bg:     #FFFFFF;
  --bg-alt: #F7F9FC;
  /* The names the older floor and bill styles reach for, and the dark set overrides. */
  --surface:   #FFFFFF;
  --hair:      #E4E9F4;
  --hair-2:    #EDF1F8;
  --ink-soft:  #5B678A;
  --ink-faint: #8C96B2;
  /* A filled control: the accent as a ground with white on it. In the dark
     set the accent brightens for text and links but the fill stays deep, so
     white on it keeps its contrast. */
  --btn:       var(--cobalt);
  --btn-hover: var(--cobalt-700);

  --teal:  #067A6E;
  --teal-bg: #E6F4F1;
  --teal-line: #B9E0D8;
  --teal-ink: #06584F;
  --amber: #9A6100;
  --amber-bg: #FBF1E0;
  --amber-line: #E8D3AC;
  --amber-ink: #7A4B00;
  --rose:  #B32748;
  --rose-bg: #FCEBEF;
  --rose-line: #F3C9D3;
  --rose-ink: #8C1C36;

  --f:  "Assistant", "Segoe UI", system-ui, sans-serif;
  --fd: "Heebo", "Arial Hebrew", system-ui, sans-serif;

  --r: 8px;
  --r-lg: 14px;
  --s1: 0 1px 2px rgba(10,19,48,.06);
  --s2: 0 4px 14px -4px rgba(10,19,48,.10), 0 1px 3px rgba(10,19,48,.05);
  --s3: 0 18px 48px -20px rgba(10,19,48,.28);

  /* One scale, so nothing invents its own stacking order. */
  --z-sticky: 10;
  --z-nav: 20;
  --z-drop: 30;
  --z-modal: 50;

  --e: cubic-bezier(.22,.61,.36,1);

  color-scheme: light;
}

/* ------------------------------------------------------------------ dark
   The same navy the brand stands on, lifted one step for surfaces. Text and
   links brighten; filled buttons keep a deep ground so white stays legible on
   them; the status tints go from pastel grounds with dark ink to dark grounds
   with pastel ink. Applied by theme.js, which stamps data-theme before the
   first paint, and by the system preference when nothing was chosen. */
[data-theme="dark"] {
  --cobalt:     #7FA2FF;
  --cobalt-700: #A5BDFF;
  --cobalt-300: #4C74E8;
  --cobalt-100: #22315F;
  --cobalt-50:  #171F3D;
  --btn:        #3560F2;
  --btn-hover:  #2A4FD3;

  --navy:   #F3F6FD;
  --ink:    #EEF2FA;
  --body:   #B7C0D8;
  --muted:  #8590AC;
  --line:   #253050;
  --line-2: #1C2540;
  --bg:     #131C36;
  --bg-alt: #0A1024;
  --surface:   #131C36;
  --hair:      #253050;
  --hair-2:    #1C2540;
  --ink-soft:  #AEB8D2;
  --ink-faint: #7E89A8;

  --teal:  #5FD1BF;
  --teal-bg: #0F2A27;
  --teal-line: #1E4A44;
  --teal-ink: #9EE8DA;
  --amber: #F0B84E;
  --amber-bg: #2E2410;
  --amber-line: #5A4620;
  --amber-ink: #FFD48A;
  --rose:  #FF8AA5;
  --rose-bg: #331620;
  --rose-line: #5A2436;
  --rose-ink: #FFB3C2;

  --s1: 0 1px 2px rgba(0,0,0,.35);
  --s2: 0 4px 14px -4px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3);
  --s3: 0 18px 48px -20px rgba(0,0,0,.7);

  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cobalt: #7FA2FF; --cobalt-700: #A5BDFF; --cobalt-300: #4C74E8; --cobalt-100: #22315F; --cobalt-50: #171F3D;
    --btn: #3560F2; --btn-hover: #2A4FD3;
    --navy: #F3F6FD; --ink: #EEF2FA; --body: #B7C0D8; --muted: #8590AC; --line: #253050; --line-2: #1C2540;
    --bg: #131C36; --bg-alt: #0A1024; --surface: #131C36; --hair: #253050; --hair-2: #1C2540; --ink-soft: #AEB8D2; --ink-faint: #7E89A8;
    --teal: #5FD1BF; --teal-bg: #0F2A27; --teal-line: #1E4A44; --teal-ink: #9EE8DA;
    --amber: #F0B84E; --amber-bg: #2E2410; --amber-line: #5A4620; --amber-ink: #FFD48A;
    --rose: #FF8AA5; --rose-bg: #331620; --rose-line: #5A2436; --rose-ink: #FFB3C2;
    --s1: 0 1px 2px rgba(0,0,0,.35); --s2: 0 4px 14px -4px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3); --s3: 0 18px 48px -20px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}

/* The toggle itself: an icon button in the top bar, sun when it is dark and
   moon when it is light, that is, the thing you would get by pressing. */
.btn-quiet.theme { width: 40px; padding: 0; }
.btn-quiet.theme svg { width: 18px; height: 18px; }
.btn-quiet.theme .sun { display: none; }
.btn-quiet.theme[aria-pressed="true"] .sun { display: block; }
.btn-quiet.theme[aria-pressed="true"] .moon { display: none; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-alt); color: var(--ink); font-family: var(--f); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column; }
h1,h2,h3,h4 { font-family: var(--fd); font-weight: 800; color: var(--navy); margin: 0; line-height: 1.16; letter-spacing: -.025em; }
p { margin: 0; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { color: var(--cobalt-700); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }
svg { flex: 0 0 auto; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: 1.15rem; }

/* -------------------------------------------------------------- top bar */

.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: var(--z-nav); }
.top .row { display: flex; align-items: center; gap: .9rem; height: 58px; }
/* The mark sits to the left of the wordmark, as in the brand's LTR lockup, whatever the page direction. */
.brand { direction: ltr; display: inline-flex; align-items: center; gap: .5rem; font-family: "Readex Pro", var(--fd); font-weight: 600; font-size: 1.02rem; color: var(--navy); letter-spacing: -.035em; }
.brand .mark-img { width: 24px; height: 24px; flex: 0 0 auto; }
.scope { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--fd); font-weight: 700; font-size: .78rem; padding: .22rem .6rem; border-radius: 100px; background: var(--cobalt-50); color: var(--cobalt-700); border: 1px solid var(--cobalt-100); }
.top .end { margin-inline-start: auto; display: flex; align-items: center; gap: .6rem; }
.who { display: flex; flex-direction: column; line-height: 1.25; text-align: start; }
.who b { font-family: var(--fd); font-weight: 700; font-size: .87rem; color: var(--navy); }
.who span { font-size: .76rem; color: var(--muted); }
@media (max-width: 620px) { .who { display: none; } }

/* -------------------------------------------------------------- tabs */

.tabs { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 58px; z-index: var(--z-sticky); }
.tabs .row { display: flex; gap: .25rem; overflow-x: auto; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: .4rem; padding: .85rem .85rem .7rem; font-family: var(--fd); font-weight: 700; font-size: .92rem; color: var(--body); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .16s var(--e), border-color .16s var(--e); }
.tabs a:hover, .tabs button:hover { color: var(--navy); }
.tabs [aria-current="true"], .tabs [aria-selected="true"] { color: var(--cobalt); border-bottom-color: var(--cobalt); }
.tabs svg { width: 16px; height: 16px; }

main { flex: 1 1 auto; padding-block: 1.5rem 3.5rem; }

/* ------------------------------------------------------------- headers */

.head { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.head h1 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.head .sub { color: var(--body); font-size: .92rem; margin-top: .25rem; }
.head .side { margin-inline-start: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* [hidden] sets display:none, but a CSS display rule outranks it, so the range
   control kept showing on tabs that have no date range. */
.seg[hidden] { display: none; }
.seg { display: flex; gap: .2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .2rem; }
.seg button { font-family: var(--fd); font-weight: 700; font-size: .84rem; padding: .35rem .7rem; border-radius: 6px; color: var(--body); transition: background .15s var(--e), color .15s var(--e); }
.seg button[aria-pressed="true"] { background: var(--btn); color: #fff; }

/* ------------------------------------------------------------ controls */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--btn); color: #fff; font-family: var(--fd); font-weight: 700; font-size: .92rem; padding: .55rem 1.05rem; border-radius: var(--r); box-shadow: var(--s1); transition: background .16s var(--e); }
.btn:hover { background: var(--btn-hover); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.btn-quiet { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--surface); color: var(--navy); font-family: var(--fd); font-weight: 700; font-size: .9rem; padding: .52rem .9rem; border-radius: var(--r); border: 1px solid var(--line); transition: border-color .16s var(--e), background .16s var(--e); }
.btn-quiet:hover { border-color: var(--cobalt-300); background: var(--cobalt-50); color: var(--navy); }
/* The class is used on links as well as buttons; a link keeps its underline
   unless told otherwise, and an underlined button reads as broken. */
a.btn-quiet, a.btn { text-decoration: none; }
.btn-danger { color: var(--rose); }
.btn-danger:hover { border-color: var(--rose); background: var(--rose-bg); color: var(--rose); }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-family: var(--fd); font-weight: 700; font-size: .82rem; color: var(--navy); }
.field input, .field select, .field textarea { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .58rem .75rem; font-size: .95rem; color: var(--ink); transition: border-color .15s var(--e), box-shadow .15s var(--e); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-50); }
.field .hint { font-size: .8rem; color: var(--muted); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pad { padding: 1.15rem 1.2rem; }
.card > header { display: flex; align-items: baseline; gap: .7rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line-2); }
.card > header h2 { font-size: 1.02rem; }
.card > header .hint { margin-inline-start: auto; font-size: .82rem; color: var(--muted); }

/* --------------------------------------------------------------- tiles */

.tiles { display: grid; gap: .8rem; grid-template-columns: repeat(4,1fr); margin-bottom: 1rem; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .95rem 1.05rem; display: flex; flex-direction: column; gap: .1rem; }
.tile .k { font-family: var(--fd); font-weight: 700; font-size: .76rem; color: var(--muted); letter-spacing: .04em; }
.tile .v { font-family: var(--fd); font-weight: 900; font-size: clamp(1.5rem,2.4vw,1.95rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--navy); }
.tile .n { font-size: .8rem; color: var(--muted); }
.tile.accent .v { color: var(--cobalt); }
.tile.live { border-color: var(--cobalt-300); background: var(--cobalt-50); }

.grid { display: grid; gap: .8rem; grid-template-columns: 1.55fr 1fr; align-items: start; }
@media (max-width: 1000px) { .grid { grid-template-columns: 1fr; } }
.grid > * { min-width: 0; }

/* --------------------------------------------------------------- chart */

.chart { width: 100%; height: 180px; display: block; }
.chart .bar { fill: var(--cobalt); }
.chart .bar:hover { fill: var(--cobalt-700); }
.chart .bar.empty { fill: var(--line); }
.chart .grid-line { stroke: var(--line-2); stroke-width: 1; }
.chart .lbl { fill: var(--muted); font-size: 10px; font-family: var(--f); }

.bars { display: flex; flex-direction: column; gap: .65rem; }
.barrow { display: flex; flex-direction: column; gap: .25rem; }
.barrow .top { display: flex; align-items: baseline; gap: .5rem; font-size: .9rem; }
.barrow .top b { font-family: var(--fd); font-weight: 700; }
.barrow .top .val { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--cobalt); }
.barrow .track { height: 7px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.barrow .fill { height: 100%; border-radius: 99px; background: var(--btn); }

/* --------------------------------------------------------------- table */

.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: .68rem .9rem; border-bottom: 1px solid var(--line-2); font-size: .92rem; }
th { font-family: var(--fd); font-weight: 800; font-size: .76rem; color: var(--muted); letter-spacing: .05em; background: var(--bg-alt); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-alt); }
td b { font-family: var(--fd); color: var(--navy); }
.num { font-variant-numeric: tabular-nums; }

.pill { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--fd); font-weight: 700; font-size: .74rem; padding: .16rem .5rem; border-radius: 100px; background: var(--cobalt-50); color: var(--cobalt-700); }
.pill.ok { background: var(--teal-bg); color: var(--teal); }
.pill.warn { background: var(--amber-bg); color: var(--amber); }
.pill.crit { background: var(--rose-bg); color: var(--rose); }

/* A gap from the chain's median, next to the number it qualifies. Colour says
   whether the gap is welcome, the sign and figure say how big; never colour
   alone, so the label always carries the number. */
.delta { display: inline-block; direction: ltr; unicode-bidi: isolate; font-family: var(--fd); font-weight: 700; font-size: .7rem; padding: .08rem .38rem; border-radius: 6px; margin-inline-start: .3rem; white-space: nowrap; vertical-align: middle; }
.delta.good { background: var(--teal-bg); color: var(--teal); }
.delta.bad { background: var(--rose-bg); color: var(--rose); }
.delta.flat { background: var(--cobalt-50); color: var(--muted); }
td.actions { white-space: nowrap; }
td.actions .btn-quiet + .btn-quiet { margin-inline-start: .35rem; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips button { font-family: var(--fd); font-weight: 700; font-size: .85rem; padding: .35rem .8rem; border-radius: 100px; background: var(--surface); border: 1px solid var(--line); color: var(--body); transition: border-color .16s var(--e), background .16s var(--e), color .16s var(--e); }
.chips button:hover { border-color: var(--cobalt-300); }
.chips button[aria-pressed="true"] { background: var(--btn); border-color: var(--cobalt); color: #fff; }

.banner { padding: .7rem .9rem; border-radius: var(--r); font-size: .9rem; font-weight: 600; display: flex; gap: .5rem; align-items: flex-start; }
.banner.err { background: var(--rose-bg); border: 1px solid var(--rose-line); color: var(--rose-ink); }
.banner.ok { background: var(--teal-bg); border: 1px solid var(--teal-line); color: var(--teal-ink); }
.banner[hidden] { display: none; }

.empty { color: var(--muted); text-align: center; padding: 2.2rem 1rem; font-size: .92rem; line-height: 1.6; }

/* --------------------------------------------------------------- modal */

.scrim { position: fixed; inset: 0; background: rgba(10,19,48,.42); z-index: var(--z-modal); display: grid; place-items: center; padding: 1.25rem; }
.scrim[hidden] { display: none; }
.modal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--s3); width: 100%; max-width: 30rem; max-height: 90dvh; overflow-y: auto; }
.modal header { display: flex; align-items: center; gap: .7rem; padding: 1.05rem 1.2rem; border-bottom: 1px solid var(--line-2); }
.modal header h2 { font-size: 1.05rem; }
.modal header button { margin-inline-start: auto; color: var(--muted); font-size: 1.3rem; line-height: 1; padding: .1rem .35rem; border-radius: 6px; }
.modal header button:hover { background: var(--bg-alt); color: var(--navy); }
.modal .body { padding: 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
.modal .foot { padding: 1rem 1.2rem; border-top: 1px solid var(--line-2); display: flex; gap: .5rem; justify-content: flex-end; }

.secret { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; letter-spacing: .06em; background: var(--bg-alt); border: 1px dashed var(--cobalt-300); border-radius: var(--r); padding: .7rem .85rem; word-break: break-all; color: var(--navy); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ------------------------------------------------------------ usage meter */

/*
 * A venue should see its cap coming, not discover it from a guest saying the
 * screen stopped answering. So this is a plain bar with the real numbers on it
 * and the consequence written out, rather than a percentage the reader has to
 * translate into "what happens to my dinner service".
 */
.usage { display: flex; flex-direction: column; gap: .55rem; }
/* Full width and shallow: it is a status line above the charts, not a panel
   competing with them for the reader's attention. */
.usage-card { margin-bottom: .8rem; }
.usage-card .pad { padding: .9rem 1.2rem 1rem; }
.usage .row { display: flex; align-items: baseline; gap: .6rem; }
.usage .plan {
  font-family: var(--fd); font-weight: 800; font-size: .78rem; letter-spacing: .04em;
  color: var(--cobalt); background: var(--cobalt-50); border: 1px solid var(--cobalt-300);
  border-radius: 999px; padding: .12rem .6rem;
}
.usage .count {
  font-family: var(--fd); font-weight: 900; font-size: 1.5rem; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--navy);
}
.usage .count small { font-weight: 700; font-size: .95rem; color: var(--muted); }
.usage .meter {
  height: 9px; border-radius: 999px; background: var(--line); overflow: hidden;
}
.usage .meter > i {
  display: block; height: 100%; border-radius: 999px; background: var(--btn);
  transition: width .4s var(--e);
}
.usage[data-state="warn"] .meter > i { background: var(--amber); }
.usage[data-state="over"] .meter > i { background: var(--rose); }
.usage .note { font-size: .85rem; color: var(--body); line-height: 1.5; }
.usage[data-state="warn"] .note { color: var(--amber); }
.usage[data-state="over"] .note { color: var(--rose); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .usage .meter > i { transition: none; } }

/* --------------------------------------------------------------- floor plan */

/*
 * The dining room, seen from above and slightly forward.
 *
 * A manager glancing at this needs one thing in under a second: which tables
 * are taken. So occupancy is carried by the tabletop itself rather than by a
 * badge — a warm amber top reads as occupied from across a room, pale wood as
 * free. Colour is never the only signal: every occupied table also carries the
 * diner's name or the word תפוס, so the plan survives colour blindness and a
 * monochrome print of the shift handover.
 *
 * The room is one tilted plane with the tables standing on it, rather than a
 * grid of cards with shadows. That is what makes it read as a floor: the
 * chairs, the table thickness and the cast shadows all share one light and one
 * vanishing point.
 */

.floor-room {
  perspective: 1500px;
  perspective-origin: 50% 22%;
  padding: 2.2rem 1rem 2.6rem;
  overflow-x: auto;
}

.floor-plane {
  position: relative;
  max-width: 38rem;
  margin-inline: auto;
  padding: 2.6rem 2.2rem;
  border-radius: 18px;
  transform: rotateX(42deg);
  transform-style: preserve-3d;
  transition: transform .55s var(--e);

  /* Floorboards running away from the viewer, plus the room's own edge. */
  background:
    repeating-linear-gradient(90deg,
      #EFE3D2 0 46px, #EAD9C4 46px 48px),
    linear-gradient(180deg, #F3E9DA, #E4D3BC);
  border: 1px solid #D6C3A8;
  box-shadow:
    inset 0 0 60px rgba(122, 92, 52, .18),
    0 30px 50px rgba(10, 19, 48, .18);
}
.floor-room:hover .floor-plane { transform: rotateX(34deg); }

.floor {
  display: grid;
  gap: 1.9rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr));
  transform-style: preserve-3d;
}

/* --------------------------------------------------------------- one table */

.tbl {
  position: relative;
  aspect-ratio: 1;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .22s var(--e);
}
.tbl:hover, .tbl:focus-visible { transform: translateZ(26px); }
.tbl:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 6px; border-radius: 50%; }

/* Chairs. Four of them, tucked in at the compass points, sitting flat on the
   floor so the tabletop floats above them. */
.tbl .chair {
  position: absolute;
  width: 30%; height: 22%;
  background: linear-gradient(180deg, #8C6A45, #6E5133);
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(60, 40, 16, .4);
  transform: translateZ(6px);
}
.tbl .chair:nth-child(1) { top: -6%;  left: 35%; }
.tbl .chair:nth-child(2) { bottom: -6%; left: 35%; }
.tbl .chair:nth-child(3) { left: -5%;  top: 39%; width: 22%; height: 30%; }
.tbl .chair:nth-child(4) { right: -5%; top: 39%; width: 22%; height: 30%; }

/* The tabletop: a real disc with thickness, lifted off the floor on its leg.
   The stacked shadows are the edge of the top, then the shadow it casts. */
.tbl .top {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .1rem;
  text-align: center;
  padding: .3rem;
  font-family: var(--fd);
  /* The top is pale in both themes, so the ink is fixed: theme tokens turned
     it near-white on the dark panel and the numbers vanished. */
  color: #0B1220;
  background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #F4EFE6 62%, #E7DECE 100%);
  border: 1px solid #D9CDB8;
  box-shadow:
    0 7px 0 #CDBEA4,
    0 9px 2px rgba(80, 58, 26, .28),
    0 22px 24px rgba(10, 19, 48, .28);
  transform: translateZ(30px);
  transition: background .25s var(--e), box-shadow .25s var(--e);
}

/* Occupied. Amber, not red: a full table is the goal, not an alarm. */
.tbl[data-state="busy"] .top {
  background: radial-gradient(circle at 34% 28%, #FFC46B 0%, #F79E28 58%, #E2861A 100%);
  border-color: #C9740F;
  color: #33200A;
  box-shadow:
    0 7px 0 #B4670C,
    0 9px 2px rgba(90, 52, 6, .34),
    0 22px 26px rgba(120, 70, 10, .34);
}

.tbl .no {
  font-weight: 900;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.tbl .who {
  font-weight: 700; font-size: .66rem; line-height: 1.2;
  max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #1B2333;
}
.tbl .mins { font-weight: 700; font-size: .6rem; color: #3B4658; font-variant-numeric: tabular-nums; }
.tbl[data-state="busy"] .who,
.tbl[data-state="busy"] .mins { color: #4A2E06; }

/* An unpaid bill: a ring around the top, so it layers on top of occupancy
   rather than competing with the one signal being scanned for. */
/* A day heading in the ticket list. A rule either side so it reads as a
   divider rather than as another ticket. */
/* A card payment that was started and never confirmed. Amber rather than red:
   the likely truth is that the money arrived and the browser closed, which is
   something to check before acting, not an error. */
.guest-card.warn { border-color: var(--amber-line); background: var(--amber-bg); }
.guest-card.warn h3 { color: var(--amber-ink); }

/* --------------------------------------------------- recent bills

   Read down a column of money, so the amounts are tabular and right where the
   eye lands. Everything else is context for the one row being looked for. */
.bill {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding: .65rem 0; border-top: 1px solid var(--hair-2, #EDF1F8);
}
.bill:first-child { border-top: 0; }
.bill .when { font-size: .86rem; color: var(--ink-soft, #5B678A); min-width: 8.5rem; }
.bill .tbl {
  font-family: var(--sc-font-display), system-ui, sans-serif; font-weight: 700;
  font-size: .88rem; min-width: 4.5rem;
}
.bill .sum {
  font-family: var(--sc-font-display), system-ui, sans-serif; font-weight: 800;
  font-variant-numeric: tabular-nums; min-width: 5rem;
}
.bill .how {
  font-size: .74rem; padding: .12rem .5rem; border-radius: 999px;
  border: 1px solid var(--hair, #E4E9F4); color: var(--ink-soft, #5B678A);
}
.bill .how.card { border-color: var(--cobalt-100); background: var(--cobalt-50); color: var(--cobalt); }
.bill .what { font-size: .85rem; color: var(--ink-soft, #5B678A); flex: 1 1 12rem; }
.bill .ref {
  font-family: ui-monospace, monospace; font-size: .7rem;
  color: var(--ink-faint, #8C96B2); direction: ltr; unicode-bidi: isolate;
}
.bill .allerg { font-size: .78rem; color: var(--rose-ink); }

/* -------------------------------------------------- closing the day

   The checklist half of the shift summary. Styled as things to act on rather
   than figures to admire: an open table at closing time is a job, not a
   statistic, so it gets a warning ground and a count you cannot miss. */
.shift-open { margin-top: .9rem; }
.shift-open h3 {
  font-family: var(--sc-font-display), system-ui, sans-serif;
  font-weight: 800; font-size: .92rem; margin: 0 0 .5rem;
}
.shift-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.shift-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem; border-radius: 999px;
  border: 1px solid var(--rose-line); background: var(--rose-bg); color: var(--rose-ink);
  font-size: .85rem; font-weight: 700;
}
.shift-chip .n { font-variant-numeric: tabular-nums; }
.shift-clear {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem; border-radius: 999px;
  border: 1px solid var(--teal-line); background: var(--teal-bg); color: var(--teal-ink);
  font-size: .85rem; font-weight: 700;
}
.shift-dishes { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.shift-dish {
  padding: .3rem .65rem; border-radius: 999px;
  border: 1px solid var(--hair, #E4E9F4); background: var(--surface, #fff);
  font-size: .83rem; color: var(--ink-soft, #5B678A);
}
.shift-dish b { color: var(--ink, #0A1330); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- table turn, live

   Three readings of the same room: how long a table usually takes here, how
   full the room is now, and what those two together say about the wait. The
   third is the one a host repeats out loud, so it gets the emphasis. */
.turn {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: 0 1rem 1rem;
}
.turn[hidden] { display: none; }
.turn .t {
  flex: 1 1 8rem; min-width: 8rem;
  padding: .7rem .85rem;
  border: 1px solid var(--hair, #E4E9F4); border-radius: 12px;
  background: var(--surface, #fff);
}
.turn .t .k {
  display: block; font-size: .72rem; letter-spacing: .04em;
  color: var(--ink-soft, #5B678A); font-weight: 700;
}
.turn .t .v {
  display: block; margin-top: .15rem;
  font-family: var(--sc-font-display), system-ui, sans-serif;
  font-weight: 800; font-size: 1.32rem; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.turn .t .sub { display: block; font-size: .74rem; color: var(--ink-soft, #5B678A); }
/* The answer to the question at the door. */
.turn .t.wait { border-color: var(--cobalt); background: var(--cobalt-50); }
.turn .t.wait .k, .turn .t.wait .v, .turn .t.wait .sub { color: var(--cobalt); }
.turn .t.open { border-color: var(--teal); background: var(--teal-bg); }
.turn .t.open .k, .turn .t.open .v, .turn .t.open .sub { color: var(--teal-ink); }

/* The kitchen screen has gone stale. Fixed to the bottom rather than the top:
   the top of that screen is where the open-order count lives, and covering the
   number somebody is working from to tell them the screen is stale would be a
   poor trade. */
.offline {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: #8B1D1D; color: #fff;
  padding: .85rem 1rem; text-align: center;
  font-family: var(--sc-font-display); font-weight: 700; font-size: .95rem;
  box-shadow: 0 -6px 20px -8px rgba(10,19,48,.5);
}

.dayline {
  /* The ticket list is a grid; without this the heading takes one cell and
     sits beside a ticket instead of dividing the rows above and below it. */
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .7rem;
  margin: 1.1rem .1rem .5rem;
}
.dayline:first-child { margin-top: .2rem; }
.dayline span { flex: 1 1 auto; height: 1px; background: var(--line-2); }
.dayline b {
  flex: 0 0 auto;
  font-family: var(--sc-font-display); font-weight: 800; font-size: .78rem;
  letter-spacing: .04em; color: var(--sc-ink-soft);
}

/* A settled ticket is history, not work. Muted so the eye skips it, and it
   carries no controls at all — see kitchen.js. */
.order.paid { opacity: .62; }
.order.paid .pill.ok { background: var(--teal-bg); border-color: var(--teal-line); color: var(--teal-ink); }

.tbl[data-bill="1"] .top::after {
  content: "";
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 2.5px solid var(--cobalt);
}

/* -------------------------------------------------------------- the legend */

.floor-legend {
  display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: center;
  margin-top: 1.1rem; font-size: .82rem; color: var(--body);
}
.floor-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.floor-legend i {
  width: 15px; height: 15px; border-radius: 50%;
  background: #F4EFE6; border: 1px solid #D9CDB8;
}
.floor-legend i.busy { background: #F79E28; border-color: #C9740F; }
.floor-legend i.bill { background: #F4EFE6; border: 2px solid var(--cobalt); }

/* A phone is held upright and the tilt costs legibility at that width, so the
   room flattens to a true overhead view rather than shrinking the perspective. */
@media (max-width: 640px) {
  .floor-plane, .floor-room:hover .floor-plane { transform: none; }
  .floor { gap: 1.1rem .8rem; grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr)); }
  .tbl:hover, .tbl:focus-visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .floor-plane, .floor-room:hover .floor-plane { transition: none; }
  .tbl, .tbl:hover, .tbl:focus-visible { transform: none; transition: none; }
}

/* ------------------------------------------------------------- table QR */

.qr-block { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.qr { width: 172px; height: 172px; }
.qr svg { width: 100%; height: 100%; display: block; border-radius: 6px; }
.qr-block .hint { font-size: .82rem; color: var(--muted); text-align: center; margin: 0; }

/*
 * The printed sticker.
 *
 * Everything except the sticker is hidden, because a manager printing table
 * codes wants paper with codes on it, not a screenshot of a dashboard. The
 * code is printed under the symbol as well: a scratched sticker still has to
 * be usable by typing.
 */
@media print {
  body > *:not(.print-sheet) { display: none !important; }
  .print-sheet { display: block !important; }
}
.print-sheet { display: none; }
.print-sheet .sticker {
  width: 62mm; padding: 6mm 4mm; text-align: center;
  border: 1px dashed #999; border-radius: 4mm; margin: 4mm auto;
  page-break-inside: avoid; font-family: var(--fd);
}
.print-sheet .sticker svg { width: 42mm; height: 42mm; }
.print-sheet .sticker .t { font-weight: 900; font-size: 5mm; margin-top: 2mm; }
.print-sheet .sticker .c {
  font-family: ui-monospace, Menlo, monospace; font-size: 6mm;
  letter-spacing: .12em; margin-top: 1mm;
}
.print-sheet .sticker .n { font-size: 3.2mm; color: #444; margin-top: 1.5mm; }

/* ------------------------------------------------------------- cost grid */

/*
 * What a venue actually needs from cost reporting: the ceiling first.
 *
 * Tokens are meaningless to a restaurant. "The most one guest can cost you"
 * is a number an owner can put next to a cover charge and reason about, so it
 * leads, and the monthly total follows it.
 */
.cost-grid {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line-2);
}
.cost-cell { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cost-cell .k {
  font-family: var(--fd); font-weight: 700; font-size: .72rem;
  color: var(--muted); letter-spacing: .03em;
}
.cost-cell .v {
  font-family: var(--fd); font-weight: 900; font-size: 1.15rem;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--navy);
}
.cost-cell:first-child .v { color: var(--cobalt); }
.cost-cell .n { font-size: .72rem; color: var(--muted); line-height: 1.3; }

/* ══════════════════════════════════════════════ who is sitting at the table

   Inside the table sheet on the branch floor. A manager taps a table because
   somebody is waiting at it, so this is ordered the way the question is asked:
   who they are, whether they called, and what is on the pass.

   The allergy line is the one thing on this screen that can hurt somebody, so
   it is the one thing given a colour. */

#tblGuest { display: flex; flex-direction: column; gap: .6rem; }
#tblGuest[hidden] { display: none; }

.guest-card {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-alt); padding: .75rem .85rem;
}
.guest-card h3 {
  font-family: var(--fd); font-weight: 800; font-size: .84rem;
  color: var(--ink); margin: 0 0 .5rem;
}
.guest-card .hint { margin: 0; font-size: .84rem; color: var(--muted); }
.guest-card ul { margin: 0; padding-inline-start: 1.1rem; font-size: .88rem; }
.guest-card li { margin-bottom: .2rem; }
.guest-card li em { color: var(--muted); font-style: normal; font-size: .84rem; }

/* A definition list, so a screen reader reads "טלפון" with the number rather
   than two loose strings. */
.guest-facts {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: .3rem .8rem; font-size: .88rem;
}
.guest-facts dt { color: var(--muted); font-weight: 600; }
.guest-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.guest-facts dd.flag {
  background: var(--rose-bg); color: var(--rose); font-weight: 700;
  border-radius: 6px; padding: .05rem .45rem; justify-self: start;
}

.guest-card.call { background: var(--amber-bg); border-color: var(--amber-line); }
.guest-card.call h3 { color: var(--amber); }

.guest-order + .guest-order { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line-2); }
.o-status {
  display: inline-block; margin-bottom: .3rem;
  font-size: .74rem; font-weight: 800; border-radius: 999px; padding: .1rem .55rem;
  background: var(--cobalt-100); color: var(--cobalt-700);
}
.o-status[data-s="preparing"] { background: var(--amber-bg); color: var(--amber); }
.o-status[data-s="served"]    { background: var(--teal-bg);  color: var(--teal); }
.o-allergy {
  margin: .4rem 0 0; font-size: .84rem; font-weight: 700;
  background: var(--rose-bg); color: var(--rose);
  border-radius: 6px; padding: .3rem .5rem;
}

/* ------------------------------------------------------- payment settings */
.lede { color: var(--body); font-size: .93rem; line-height: 1.65; max-width: 68ch; margin-bottom: .7rem; }
.lede a { color: var(--cobalt); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#payForm { margin-top: 1rem; display: flex; flex-direction: column; gap: .85rem; max-width: 560px; }
.payfields { display: flex; flex-direction: column; gap: .85rem; }
.hint.where { color: var(--muted); font-size: .84rem; margin: -.35rem 0 0; }
/* A checkbox is a target as much as a button is, so the whole row is one. */
.chk { display: flex; align-items: center; gap: .55rem; min-height: 44px; cursor: pointer; font-size: .9rem; color: var(--body); }
.chk input { width: 18px; height: 18px; accent-color: var(--cobalt); cursor: pointer; }
.chk[hidden] { display: none; }
.payactions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.payactions button { min-height: 44px; }
/* "Already on file": says the field is set without showing what it is set to. */
.onfile { font-size: .78rem; font-weight: 700; color: var(--teal); }

/* ------------------------------------------------------------ assistant */
/* A launcher in the corner and a panel over the page. Fixed, so it is there on
   the floor, the menu and the overview alike; inline-start, which in this RTL
   layout is the bottom-RIGHT — where the eye starts, since the whole site
   reads right to left. */
.asst-host { position: fixed; inset-inline-start: 1.1rem; bottom: 1.1rem; z-index: 60; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.asst-launch { display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: 0 1.1rem 0 .95rem; border-radius: 100px; background: var(--btn); color: #fff; font-family: var(--fd); font-weight: 700; font-size: .95rem; box-shadow: 0 10px 28px rgba(11,63,217,.32); cursor: pointer; transition: background .16s var(--e), transform .16s var(--e); }
.asst-launch:hover { background: var(--btn-hover); }
.asst-launch svg { width: 20px; height: 20px; }
.asst-host.open .asst-launch { transform: scale(.94); }
.asst-panel { width: min(420px, calc(100vw - 2.2rem)); max-height: min(72vh, 680px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(9,20,60,.22); overflow: hidden; }
.asst-panel[hidden] { display: none; }
.asst-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line-2); background: var(--cobalt-50); }
.asst-head div { display: flex; flex-direction: column; line-height: 1.25; }
.asst-head b { font-family: var(--fd); font-size: .95rem; color: var(--navy); }
.asst-head span { font-size: .78rem; color: var(--muted); }
.asst-close { margin-inline-start: auto; width: 36px; height: 36px; border-radius: 50%; font-size: 1.3rem; line-height: 1; color: var(--body); cursor: pointer; transition: background .16s var(--e); }
.asst-close:hover { background: var(--bg-alt); }
.asst-log { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .9rem .9rem .3rem; }
.asst-msg { max-width: 92%; padding: .55rem .8rem; border-radius: 14px; font-size: .92rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.asst-msg.you { align-self: flex-start; background: var(--btn); color: #fff; border-end-start-radius: 4px; }
.asst-msg.them { align-self: flex-end; background: var(--cobalt-50); color: var(--ink); border-end-end-radius: 4px; }
.asst-msg.bad { align-self: flex-end; background: var(--rose-bg); color: var(--rose-ink); }
.asst-msg.thinking { color: var(--muted); font-style: italic; }
/* The proposal: the one element in this panel that changes data. */
.asst-card { align-self: stretch; border: 1.5px solid var(--cobalt-300); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.asst-card.off { opacity: .55; }
.asst-card-body { padding: .75rem .9rem; font-size: .9rem; line-height: 1.55; color: var(--ink); max-height: 240px; overflow-y: auto; }
.asst-card-actions { display: flex; gap: .5rem; padding: .55rem .75rem; border-top: 1px solid var(--line-2); background: var(--cobalt-50); align-items: center; }
.asst-card-actions button { min-height: 40px; }
.asst-done { font-size: .86rem; font-weight: 700; color: var(--muted); }
.asst-done.ok { color: var(--teal); }
.asst-done.bad { color: var(--rose); }
.asst-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: .3rem .9rem .5rem; }
.asst-chips[hidden] { display: none; }
.asst-chip { font-size: .8rem; padding: .4rem .7rem; border-radius: 100px; border: 1px solid var(--line); background: var(--surface); color: var(--body); cursor: pointer; text-align: start; transition: border-color .16s var(--e), background .16s var(--e); }
.asst-chip:hover { border-color: var(--cobalt-300); background: var(--cobalt-50); }
.asst-files { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .9rem .4rem; }
.asst-file { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; padding: .22rem .6rem; border-radius: 100px; background: var(--cobalt-50); color: var(--cobalt-700); }
.asst-file button { font-size: 1rem; line-height: 1; color: inherit; cursor: pointer; padding: 0 .1rem; }
.asst-compose { display: flex; gap: .45rem; align-items: flex-end; padding: .6rem .75rem .75rem; border-top: 1px solid var(--line-2); }
.asst-compose textarea { flex: 1; min-height: 44px; resize: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .75rem; font-size: .93rem; color: var(--ink); line-height: 1.45; }
.asst-compose textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-50); }
.asst-compose .btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.asst-compose .btn svg { width: 18px; height: 18px; }
.asst-attach { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--body); cursor: pointer; flex: 0 0 auto; transition: border-color .16s var(--e), color .16s var(--e); }
.asst-attach:hover { border-color: var(--cobalt-300); color: var(--cobalt); }
.asst-attach svg { width: 20px; height: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
  .asst-host { inset-inline-start: .6rem; bottom: .6rem; }
  .asst-panel { width: calc(100vw - 1.2rem); max-height: 80vh; }
}
@media (prefers-reduced-motion: reduce) { .asst-launch { transition: none; } }

/* ---------------------------------------------------------- reservations */
.resv-bar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding-bottom: .6rem; }
.resv-bar .seg button { min-width: 40px; min-height: 36px; }
.resv-date input { min-height: 38px; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font: inherit; color: var(--ink); }
.resv-day { font-family: var(--fd); font-weight: 700; color: var(--navy); }
.resv-search { flex: 1 1 220px; max-width: 360px; }
.resv-search input { width: 100%; min-height: 38px; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font: inherit; color: var(--ink); }
.resv-search input:focus { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.resv-scope { font-size: .8rem; color: var(--body); margin-inline-start: auto; }
.resv-list { display: flex; flex-direction: column; }
.resv-empty { padding: 0 1.2rem 1.1rem; color: var(--body); font-size: .92rem; line-height: 1.6; margin: 0; }
.resv { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .9rem; padding: .75rem 1.2rem; border-top: 1px solid var(--line-2); }
.resv-time { font-family: var(--fd); font-weight: 800; font-size: 1.1rem; color: var(--navy); min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.resv-who { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.resv-who b { font-family: var(--fd); font-size: .95rem; color: var(--ink); }
.resv-meta { font-size: .84rem; color: var(--body); }
.resv-meta a { color: var(--cobalt); text-decoration: none; }
.resv-note { font-size: .84rem; color: var(--muted); }
.resv-actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.resv-actions button { min-height: 40px; padding-inline: .8rem; font-size: .86rem; }
/* The party the host is about to greet. */
.resv.next { background: var(--cobalt-50); }
.resv.next .resv-time { color: var(--cobalt); }
/* Written off or done: still on the page, no longer in the way. */
.resv.cancelled, .resv.no_show { opacity: .55; }
.resv.late .resv-time { color: var(--amber); }
@media (max-width: 720px) {
  .resv { grid-template-columns: auto 1fr; }
  .resv .pill { grid-column: 2; justify-self: start; }
  .resv-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ================================================================ phones
   The panels are desk screens first; nothing above changes for a desk. Below
   760px the same markup reflows: the top bar wraps instead of overflowing
   (which was widening the whole page to 478px), tabs stay reachable, the
   range picker stretches, tiles pair up, cards lose some padding, and the
   modal's four buttons wrap. Tables keep their own horizontal scroll. */
@media (max-width: 760px) {
  .wrap { padding-inline: .8rem; }
  .top { position: static; }
  .top .row { height: auto; min-height: 56px; flex-wrap: wrap; gap: .45rem .6rem; padding-block: .5rem; }
  .top .end { flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
  .top .end .btn-quiet, .top .end select.btn-quiet { padding: .4rem .65rem; font-size: .84rem; }
  .tabs { top: 0; }
  .tabs a, .tabs button { padding: .7rem .7rem .55rem; font-size: .88rem; }
  main { padding-block: 1rem 5.5rem; }
  .head { gap: .6rem; margin-bottom: .9rem; }
  .head .side { margin-inline-start: 0; width: 100%; }
  .head .side .seg { width: 100%; }
  .head .side .seg button { flex: 1 1 0; text-align: center; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
  .tile { padding: .75rem .8rem; }
  .tile .v { font-size: 1.35rem; }
  .card > header { flex-wrap: wrap; gap: .35rem .7rem; padding: .8rem .9rem; }
  .card > header .hint { flex-basis: 100%; margin-inline-start: 0; }
  .card > header .btn-quiet { margin-inline-start: 0 !important; }
  .pad { padding: .9rem; }
  th, td { padding: .5rem .6rem; font-size: .86rem; }
  .bill { flex-wrap: wrap; row-gap: .3rem; }
  .bill .when, .bill .how, .bill .sum { min-width: 0; }
  .scrim { padding: .5rem; align-items: end; }
  .modal { max-height: 94dvh; }
  .modal .foot { flex-wrap: wrap; }
  .modal .foot .btn, .modal .foot .btn-quiet { flex: 1 1 45%; }
  .qr { width: 150px; height: 150px; }
  .board { grid-template-columns: 1fr; }
  .colhead { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile .v { font-size: 1.2rem; }
  .top .end .btn-quiet { padding: .35rem .5rem; font-size: .8rem; }
}