/* The till page, drawn for a phone held in one hand in a busy restaurant.
 *
 * Big targets, few of them, and nothing fetched from the network: the page has
 * to work on the patchy wifi at the back of a kitchen, and a typeface that
 * arrives late would move the buttons under someone's thumb. */

:root {
  /* The website's own palette, so a manager moving between the two is not
     asked to believe they are different products. */
  --ink: #0a1622;
  --navy: #0b1f3a;
  --sapphire: #2f6fc4;
  --sapphire-soft: #6ea8ef;
  --brass: #d4af37;
  --text: #e9eef3;
  --muted: #9db0c0;
  --faint: #6f8496;
  --rule: #1d3346;
  --panel: rgba(255, 255, 255, 0.025);
  --good: #3fb680;
  --bad: #e0603f;
  --bad-bg: rgba(224, 96, 63, 0.10);

  /* The slip is a piece of paper whatever is around it: a receipt that went
     dark would stop looking like a receipt. Its green is a printed green,
     dark enough to read on cream, and is not the page's green. */
  --paper: #f5f1e8;
  --paper-ink: #17222c;
  --paper-rule: #ddd5c4;
  --stamp: #1d6b3f;
  --stamp-bad: #a8371f;

  --text-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* A serif for headings echoes the website's Fraunces without fetching it.
     Nothing on this page is downloaded: it has to work on the wifi at the back
     of a kitchen, and a typeface arriving late moves the buttons under
     somebody's thumb. */
  --display: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --slipmono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* The browser's own parts - scrollbars, the date and select pickers - drawn
     dark to match, rather than as white boxes on a dark page. */
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* A tap is a tap: no double-tap-to-zoom wait on a button, and no grey flash
   over it - every control here shows its own pressed state instead. */
html { -webkit-tap-highlight-color: transparent; }
button, a, input, select, label { touch-action: manipulation; }

/* For a keyboard: the first Tab lands here, and skips the bar and the menu. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 10px; background: var(--brass); color: #150f02;
  font-weight: 700; text-decoration: none;
}
.skip:focus-visible { top: 12px; }

/* Every heading wraps evenly rather than leaving one word on its own line. */
h1, h2 { text-wrap: balance; }

body {
  margin: 0;
  background:
    radial-gradient(900px 500px at 10% -10%, #12304f 0%, transparent 60%),
    radial-gradient(700px 420px at 100% 2%, #0f2740 0%, transparent 58%),
    var(--ink);
  background-attachment: fixed;
  color: var(--text);
  /* The device's own text size: 1rem is whatever its owner set, 16px on
     most. Nothing on this page is set larger than that except headings and
     the month's figures, so it never reads as zoomed in. */
  font-family: var(--text-font); font-size: 1rem; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* The bar carries the brand and then the venue, so a waiter with two
   restaurants' links saved can see at a glance which one they are in. */
.bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px max(16px, env(safe-area-inset-right)) 11px max(16px, env(safe-area-inset-left));
  color: var(--text);
  background: rgba(10, 22, 34, 0.72);
  border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  position: sticky; top: 0; z-index: 5;
}
.mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.mark svg { display: block; }
.brandname {
  font-family: var(--display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text);
}
.brandname b { color: var(--brass); font-weight: 700; margin-left: 1px; }
.venue {
  font-size: 0.8438rem; color: var(--muted); padding-left: 10px; margin-left: 2px;
  border-left: 1px solid var(--rule); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.out { margin-left: auto; }
.out button {
  font: inherit; font-size: 0.8438rem; padding: 8px 12px; color: var(--muted); cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--rule);
  border-radius: 9px; min-height: 44px;
}
.out button:hover { color: var(--text); }

main {
  padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
  max-width: 560px; margin: 0 auto;
}

/* The heading is written in sentence case and shown in capitals: a screen
   reader given WORDS IN CAPITALS may spell them out letter by letter. */
h1 { text-transform: uppercase; letter-spacing: 0.06em; }

/* A code is capitals, digits and hyphens - never lower case, in the alphabet
   it is minted from or in the check that admits it. The field says so while it
   is being typed rather than correcting it afterwards, so what a waiter sees
   is what the system will store. */
#code { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
#code::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }

.hint { font-size: 0.8438rem; color: var(--muted); margin: 8px 0 0; }

.card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 14px;
  padding: 18px;
}
h1 {
  font-family: var(--display); font-size: 1.125rem; font-weight: 700; margin: 0 0 14px;
  color: var(--text);
}

label { display: block; font-size: 0.875rem; color: var(--muted); margin: 12px 0 4px; }
input {
  font: inherit; font-size: 1rem; width: 100%; padding: 11px 14px; min-height: 48px; color: var(--text);
  border: 1px solid var(--rule); border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
input::placeholder { color: var(--faint); }
input:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible {
  outline: 3px solid var(--sapphire-soft); outline-offset: 2px;
}

/* A problem, said next to what caused it. */
.err { margin: 10px 0 0; color: var(--bad); font-size: 0.9062rem; font-weight: 600; }

/* The website's own call to action, down to the gradient: brass, dark ink on
   it, and a shadow that lifts it off the ground. */
button.go, a.go {
  font: inherit; font-size: 1rem; font-weight: 700; width: 100%; margin-top: 14px; padding: 12px;
  min-height: 48px; cursor: pointer; border: 1px solid transparent; border-radius: 10px;
  background: linear-gradient(180deg, #f0d98f, #d4af37); color: #150f02;
  box-shadow: 0 10px 24px rgba(212, 175, 55, 0.22);
  transition: transform 140ms var(--ease);
}
button.go:hover, a.go:hover { transform: translateY(-1px); }
button.go:disabled { opacity: 0.55; cursor: progress; transform: none; }
button.secondary {
  background: rgba(255, 255, 255, 0.03); color: var(--text);
  border: 1px solid var(--rule); box-shadow: none;
}

.note { min-height: 0; margin: 0; color: var(--bad); font-size: 0.9375rem; }
.note:empty { display: none; }
.fine { font-size: 0.8125rem; color: var(--muted); margin-top: 16px; }

/* The answer: who the code belongs to, and whether it stands. Colour is never
   the only signal - each state says what it is in words too. */
#answer { margin-top: 18px; }

/* ---- the slip ----------------------------------------------------------- *
 * The answer is drawn as a till slip, the same object the guest's code came
 * from and the same one the website shows. A waiter reads a receipt without
 * being taught how; that is the whole reason for the shape. Cream paper, mono
 * figures, torn edges, and one stamp that says where the code got to.
 * ------------------------------------------------------------------------- */

.slip {
  position: relative; margin: 0 4px;
  background: var(--paper); color: var(--paper-ink);
  padding: 22px 18px 24px; border-radius: 3px;
  font-family: var(--slipmono); font-size: 0.8438rem; line-height: 1.55;
  box-shadow: 0 10px 26px rgba(15, 31, 36, 0.18);
}
/* Torn top and bottom, cut out of the page rather than drawn on it. */
.slip::before, .slip::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background-size: 18px 10px;
  background-image: repeating-linear-gradient(90deg, var(--paper) 0 9px, transparent 9px 18px);
}
.slip::before { top: -9px; }
.slip::after { bottom: -9px; transform: scaleY(-1); }

.sliphead {
  text-align: center; color: #6c7a86; font-size: 0.6562rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.slipvenue {
  margin: 2px 0 0; text-align: center; font-weight: 700; font-size: 1.062rem;
  font-family: var(--text-font); letter-spacing: -0.01em; color: var(--paper-ink);
}
.sliprule { border-top: 1px dashed var(--paper-rule); margin: 13px 0; }
.sliprow {
  display: flex; justify-content: space-between; gap: 14px; padding: 3px 0;
  align-items: baseline;
}
.sliprow span:first-child { color: #55666f; flex: none; }
.sliprow span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.sliprow.big { font-size: 0.9375rem; font-weight: 700; }
.sliprow.big span:first-child { color: var(--paper-ink); }

/* What the guest was promised, word for word. Staff honour this, not their
   memory of it, which is why it is set apart rather than run into the rows. */
.slipoffer { margin: 0 0 2px; font-size: 0.9375rem; font-weight: 700; text-align: center; }
.slipterms { margin-top: 2px; }
.slipnote {
  text-align: center; color: #6c7a86; font-size: 0.6875rem; margin-top: 12px; line-height: 1.5;
}

/* The same note when the code must not be honoured. Everything above it on
   the slip describes an offer, and at arm's length a slip reads as a slip -
   so the one sentence that says do not give it cannot be the faintest line
   on the page, which is what .slipnote otherwise makes it. */
.slipnote.donot {
  color: #fff; background: var(--stamp-bad); border-radius: 8px;
  padding: 9px 11px; font-size: 0.7812rem; font-weight: 650; text-align: left;
}

/* The stamp. Never the only signal: it says what it is in words, and the rows
   above it carry the same answer. */
.stampwrap { text-align: center; }
.stamp {
  display: inline-block; margin-top: 4px; border: 2px solid var(--stamp); color: var(--stamp);
  border-radius: 6px; padding: 4px 12px; font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; transform: rotate(-3deg);
}
.stamp.no { border-color: var(--stamp-bad); color: var(--stamp-bad); }

/* A refusal is not a slip. Nothing was counted, so nothing is printed. */
.result.no {
  border-radius: 12px; padding: 14px; border: 1px solid #f0c8bc; background: var(--bad-bg);
}
.verdict { font-weight: 700; font-size: 1.125rem; margin: 0 0 6px; }
.result.no .verdict { color: var(--bad); }
.meta { font-size: 0.875rem; color: var(--muted); margin: 2px 0; }

/* The one thing still to be typed once a code checks out. */
.after { margin-top: 18px; }


/* A place kept for something not built. It has to read as "not yet" at a
   glance: a waiter who tried to use it and found nothing would stop trusting
   the rest of the page. */
.soon {
  font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; margin-left: 7px; font-weight: 700;
  color: var(--brass); border: 1px solid rgba(212, 175, 55, 0.4);
}
.notyet {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; font-size: 0.9062rem;
  color: var(--text); background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.35);
}
a.go { display: block; text-align: center; text-decoration: none; }

/* ---- the counter lookup ------------------------------------------------- *
 * Read by somebody with a guest in front of them and a queue behind. Numbered
 * steps rather than prose, one decision on screen at a time, and the answer in
 * words before any colour.
 * ------------------------------------------------------------------------- */

.steps { margin: 0 0 16px; padding-left: 20px; color: var(--muted); font-size: 0.9062rem; }
.steps li { margin-bottom: 5px; }
.steps b { color: var(--text); }

#digits { letter-spacing: 0.16em; text-align: center; font-weight: 700; }

.verdictbox { border-radius: 12px; padding: 15px; border: 1px solid; margin-top: 16px; }
.verdictbox.known { background: rgba(63, 182, 128, 0.08); border-color: rgba(63, 182, 128, 0.4); }
.verdictbox.unknown { background: rgba(255, 255, 255, 0.03); border-color: var(--rule); }
.verdictbox.stop { background: rgba(224, 96, 63, 0.1); border-color: rgba(224, 96, 63, 0.45); }
.verdictbox .big {
  font-family: var(--display); font-size: 1.125rem; font-weight: 700; margin: 0 0 4px;
  color: var(--text);
}
.verdictbox.known .big { color: var(--good); }
.verdictbox.stop .big { color: var(--bad); }
.verdictbox p { margin: 4px 0 0; font-size: 0.9062rem; color: var(--muted); }

/* The consent sentence is set as something to be READ ALOUD, not skimmed:
   on paper, at the size it will actually be spoken from. */
.readaloud {
  margin-top: 14px; padding: 14px; border-radius: 10px;
  background: var(--paper); color: var(--paper-ink);
  font-size: 0.9375rem; line-height: 1.5;
}
.readaloud .k {
  font-family: var(--slipmono); font-size: 0.6562rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #6c7a86; display: block; margin-bottom: 6px;
}
.agree { display: flex; gap: 11px; align-items: flex-start; margin-top: 14px; }
.agree input { width: 26px; height: 26px; min-height: 26px; flex: none; margin-top: 1px; }
.agree label { margin: 0; font-size: 0.9375rem; color: var(--text); }

/* ---- how the month is going --------------------------------------------- *
 * Figures first, then the shape of them. The glow is drawn with an SVG filter
 * rather than a shadow so it follows the line itself; on a dark page at night
 * that reads as lit rather than decorated.
 * ------------------------------------------------------------------------- */

.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.figure {
  border: 1px solid var(--rule); border-radius: 12px; padding: 12px;
  background: rgba(255, 255, 255, 0.025);
}
.figure .k {
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}
.figure .v {
  font-family: var(--slipmono); font-size: 1.125rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.figure .u { font-size: 0.7812rem; color: var(--muted); }
.figure.lit .v { color: var(--brass); }

.trend { margin-top: 16px; }
.trend svg { display: block; width: 100%; height: auto; overflow: visible; }
.trendline { fill: none; stroke: var(--sapphire-soft); stroke-width: 2.5;
             stroke-linejoin: round; stroke-linecap: round; filter: url(#lit); }
.trendfill { fill: url(#under); stroke: none; }
.trenddot { fill: var(--brass); opacity: 0; transition: opacity 120ms var(--ease); }
.trenddot.on { opacity: 1; }
.trendhit { fill: transparent; cursor: crosshair; }
.trendaxis { fill: var(--faint); font-size: 0.625rem; font-family: var(--slipmono); }

/* The reading under the cursor. One line, because a finger covers the chart
   and a tooltip that follows it would be the thing it covers. */
.readout {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 8px;
  font-family: var(--slipmono); font-size: 0.7812rem; color: var(--muted);
  min-height: 1.4em;
}
.readout b { color: var(--text); font-weight: 700; }

.basis { font-size: 0.7812rem; color: var(--faint); margin-top: 12px; line-height: 1.5; }

/* Two across on a phone, not four down. Stacking them pushed the trend below
   the fold, and the trend is the thing worth opening this for. Only the very
   narrowest screens get one column. */
@media (max-width: 330px) { .figures { grid-template-columns: minmax(0, 1fr); } }

.party { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.party button {
  font: inherit; font-weight: 600; min-width: 56px; min-height: 52px; cursor: pointer;
  color: var(--text); border: 1px solid var(--rule); border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.party button:hover { border-color: var(--sapphire-soft); }
.party button[aria-pressed="true"] {
  background: var(--sapphire); color: #fff; border-color: var(--sapphire-soft);
}

/* Which half of the page is showing is decided by the server: see the
   signed-out rules under "the menu, on the left". */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- what a button does when you press it ----------------------------- */

/* Every control gives way under the cursor and springs back.
 *
 * Without it the only feedback a click has is whatever the click causes, and
 * where that takes a moment - a refresh, a search, a download - there is a
 * gap in which nothing has happened and the operator clicks again. A press
 * that is felt is the cheapest way to say "heard you".
 */
button, .button, a.button, summary {
  transition: transform 110ms var(--ease), background-color 160ms var(--ease),
              border-color 160ms var(--ease), box-shadow 160ms var(--ease),
              opacity 160ms var(--ease);
}
button:active:not([disabled]),
.button:active, a.button:active {
  transform: translateY(1px) scale(0.985);
}
button[disabled] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  button, .button, a.button, summary { transition: none; }
  button:active:not([disabled]), .button:active, a.button:active { transform: none; }
}

/* ---- the menu, on the left ------------------------------------------------ *
 * The CRM's layout: the sections down the left, grouped, and the one you are
 * on lit in the same gold. On a wide screen it is always there beside the
 * page. On a phone there is no room for a column beside a code, so it is a
 * drawer that comes in from the left, opened from the button at the left of
 * the bar - the side it lives on everywhere else.
 * ------------------------------------------------------------------------- */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.product {
  font-family: var(--text-font); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-left: 4px;
}
.whochip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 0.8125rem; color: var(--text); background: rgba(255, 255, 255, 0.03);
  max-width: 40vw; overflow: hidden;
}
.whochip .avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: linear-gradient(160deg, #f4e0a0, #d4af37);
  /* The venue's initials, dark on the gold. */
  display: grid; place-items: center; color: #150f02;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1;
}
.whoname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  color: var(--muted); cursor: pointer; border: 1px solid var(--rule);
  border-radius: 9px; background: rgba(255, 255, 255, 0.04);
}
.menu:hover { color: var(--text); }

/* One height on every screen, so the menu can sit exactly under it. */
.bar { min-height: 64px; }
.shell { display: block; }
.sideveil {
  position: fixed; inset: 0; z-index: 40; background: rgba(4, 10, 16, 0.6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.side {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(82vw, 280px);
  overscroll-behavior: contain;
  padding-left: max(12px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 6px; padding: 16px 12px;
  background: linear-gradient(180deg, #0c1c2c, #071120);
  border-right: 1px solid var(--rule); overflow-y: auto;
  transform: translateX(-102%); transition: transform 280ms var(--ease);
}
.side.open { transform: none; }
.sidenav { display: grid; gap: 18px; margin-top: 50px; }
.sidegroup { display: grid; gap: 2px; }
.sidegroup h2 {
  margin: 0 0 6px 10px; font-family: var(--text-font); font-size: 0.6562rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 700;
}
.sidenav button {
  display: flex; align-items: center; gap: 10px;
  font: inherit; font-size: 0.9062rem; font-weight: 600; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--muted); min-height: 46px;
}
.sidenav button[hidden] { display: none; }
.sidenav button svg { flex: none; }
.sidenav button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
/* The page you are on wears the CRM's gold glass. */
.sidenav button[aria-pressed="true"] {
  color: #150f02; font-weight: 700;
  background: linear-gradient(160deg, #f4e0a0, #d4af37);
  border-color: rgba(255, 240, 190, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 0 18px rgba(212, 175, 55, 0.35);
}
.sideout { margin-top: auto; padding-top: 14px; }
.sidewho { margin: 0 0 8px 4px; font-size: 0.7812rem; color: var(--faint); }
.sidewho b { color: var(--muted); }
.sideout button {
  font: inherit; width: 100%; min-height: 46px; cursor: pointer; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 10px; background: rgba(255, 255, 255, 0.03);
}
.sideout button:hover { color: var(--text); }
.pane[hidden] { display: none; }

@media (min-width: 900px) {
  /* Room for the column: the menu stays open beside the page, like the CRM. */
  .menu { display: none; }
  .shell {
    display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start;
    min-height: calc(100vh - 64px);
  }
  .side {
    position: sticky; top: 64px; height: calc(100vh - 64px); width: auto;
    transform: none; transition: none; background: transparent;
  }
  .sidenav { margin-top: 4px; }
  .sideveil { display: none; }
  main { padding: 28px 32px; margin: 0 auto; width: 100%; max-width: 620px; }
  main:has(.wide:not([hidden])) { max-width: 900px; }
}

/* ---- signed out ----------------------------------------------------------- */

body[data-state="out"] .shell { display: block; }
body[data-state="out"] main { margin: 0 auto; max-width: 460px; padding-top: 28px; }
body[data-state="out"] #check,
body[data-state="out"] .whochip { display: none; }
body[data-state="in"] #signin { display: none; }
body[data-state="out"] #menu,
body[data-state="out"] #side,
body[data-state="out"] #sideveil { display: none; }

.or {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 4px;
  color: var(--faint); font-size: 0.8125rem;
}
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.or[hidden], a.google[hidden], li[hidden], p[hidden], span[hidden], .setrow[hidden] { display: none; }
/* Google's own button: white, its four-colour mark, its words. */
a.google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 12px; min-height: 52px; padding: 12px; border-radius: 10px;
  background: #fff; color: #1f1f1f; text-decoration: none; font-weight: 600;
  border: 1px solid #dadce0; font-size: 1rem;
}
a.google:hover { background: #f7f8f8; }
.linklike {
  font: inherit; font-size: 0.875rem; color: var(--sapphire-soft); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.linklike:hover { color: var(--text); }
h2.sub {
  font-family: var(--display); font-size: 1.062rem; margin: 0 0 10px; color: var(--text);
}

/* ---- today, at a glance --------------------------------------------------- */

.today { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.today:empty { display: none; }
.today span {
  font-size: 0.8125rem; color: var(--muted); padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.03);
}
.today b { color: var(--brass); font-family: var(--slipmono); font-variant-numeric: tabular-nums; }

/* ---- history -------------------------------------------------------------- */

.histbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }
.histbar input { flex: 1 1 180px; min-height: 44px; padding: 10px 12px; }
.seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px;
  border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.03);
}
.seg button {
  font: inherit; font-size: 0.875rem; font-weight: 600; min-height: 38px; padding: 6px 12px;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] {
  color: #150f02; background: linear-gradient(160deg, #f4e0a0, #d4af37);
}
.ghostbtn, a.ghostbtn {
  font: inherit; font-size: 0.875rem; font-weight: 600; min-height: 44px; padding: 10px 14px;
  border-radius: 10px; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.03);
  color: var(--text); cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center;
}
.ghostbtn:hover { background: rgba(255, 255, 255, 0.07); }
.figures.four { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
@media (min-width: 640px) { .figures.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.histlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.histrow {
  display: grid; grid-template-columns: 74px 96px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.02); font-size: 0.875rem;
}
.histwhen {
  font-family: var(--slipmono); font-size: 0.7812rem; color: var(--faint); padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.histkind {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; justify-self: start;
}
.histrow.used .histkind { color: var(--good); }
.histrow.checked .histkind { color: var(--sapphire-soft); }
.histrow.refused .histkind { color: var(--bad); }
.histrow.added .histkind { color: var(--brass); }
.histwhat { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
.histcode {
  font: inherit; font-family: var(--slipmono); font-weight: 700; letter-spacing: 0.04em;
  color: var(--text); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px;
}
.histcode:hover { text-decoration-color: currentColor; }
.histoffer { color: var(--text); }
.histdetail { color: var(--muted); flex-basis: 100%; }
@media (max-width: 480px) {
  .histrow { grid-template-columns: 64px minmax(0, 1fr); }
  .histwhat { grid-column: 1 / -1; }
}

/* ---- settings ------------------------------------------------------------- */

.setgroup { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.setrow {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 0;
  border-bottom: 1px dashed var(--rule);
}
.setrow:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .setrow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}
.setwhat > b { display: block; color: var(--text); font-size: 0.9375rem; }
.setwhat > span { display: block; color: var(--muted); font-size: 0.8438rem; margin-top: 2px; }
.setwhat > span b { color: var(--text); }
.setctl.stack { display: grid; gap: 8px; }
.setctl input, select.setctl {
  font: inherit; width: 100%; min-height: 46px; padding: 10px 12px; color: var(--text);
  border: 1px solid var(--rule); border-radius: 10px; background: rgba(255, 255, 255, 0.04);
}
/* A native select keeps Windows' own colours in dark mode unless told. */
select.setctl { background-color: #0f2131; }
select.setctl option { color: var(--text); background-color: #0f2131; }
.setsaid { min-height: 1.4em; margin: 14px 0 0; color: var(--good); font-size: 0.875rem; }
.setsaid.bad { color: var(--bad); }
.setsaid:empty { display: none; }

/* ---- light ---------------------------------------------------------------- *
 * For daylight, as the CRM has. The slip stays paper either way.
 * ------------------------------------------------------------------------- */

html[data-theme="light"] {
  color-scheme: light;
  --ink: #f4f6f8;
  --text: #17222c;
  --muted: #4f6170;
  --faint: #6b7c8a;
  --rule: #d6dee5;
  --panel: #ffffff;
  --good: #1d7a4c;
  --bad: #b03a1f;
  --bad-bg: #fdf1ee;
  --sapphire-soft: #2f6fc4;
}
html[data-theme="light"] body { background: var(--ink); }
html[data-theme="light"] .bar { background: rgba(255, 255, 255, 0.86); }
html[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(15, 31, 36, 0.06); }
html[data-theme="light"] .side { background: #fff; }
@media (min-width: 900px) { html[data-theme="light"] .side { background: transparent; } }
html[data-theme="light"] input,
html[data-theme="light"] .menu,
html[data-theme="light"] .ghostbtn,
html[data-theme="light"] .seg,
html[data-theme="light"] .histrow,
html[data-theme="light"] .figure { background: #fff; }
html[data-theme="light"] .sidenav button:hover,
html[data-theme="light"] .ghostbtn:hover { background: #eef2f5; }
html[data-theme="light"] .verdictbox.unknown { background: #fff; }
html[data-theme="light"] .result.no { border-color: #f0c8bc; }
html[data-theme="light"] select.setctl,
html[data-theme="light"] select.setctl option { background-color: #fff; color: var(--text); }

/* A phone's bar has room for the menu, the brand and the venue. Which login
   is signed in is in the menu, at the bottom, so the chip keeps only its dot. */
@media (max-width: 520px) {
  .product, .whoname { display: none; }
  .whochip { padding: 4px; }
  .brandname { white-space: nowrap; }
  .venue { flex: 1 1 auto; min-width: 0; }
}