/*
 * Tender, at a desk.
 *
 * "Gruff, in daylight" — the house signage system with the concessions a dark bar needs
 * taken out, because a back office is read at a desk. The amber stays: it is the colour
 * of this product at work, and a manager finds the one thing that acts on a dense screen
 * because it is the only warm thing on it.
 *
 * What went is the HAZARD BAND. Alternating black and amber on the diagonal is a real
 * signal with a real meaning — keep out, not finished, mind the step — and a shop owner
 * reads it before they read the word next to it. It sat ten pixels above a mark that says
 * the opposite: a receipt, torn off, the sale done. So the band is gone and the mark took
 * its place.
 *
 * The rules of the system:
 *
 *   - THE PERFORATION IS THE DEVICE. A receipt's tear line, and a broken connection: the
 *     product's whole argument is that the line breaks and the sale carries on. It
 *     separates things. Nothing else does. (`../tender-web`, where it is `.perf`.)
 *   - AMBER MARKS WHAT ACTS. Nothing else is amber, and it never repeats into a pattern.
 *   - RED MARKS WHAT STOPS. The only other colour with a meaning.
 *   - SHADOWS ARE HARD OFFSETS, NEVER BLURRED. A blur is the first thing to go on a bad
 *     monitor, and it takes the layout's structure with it.
 *   - EVERY NUMBER IS MONOSPACED. A column of takings has to align on the decimal or it
 *     cannot be read down.
 *   - SURFACES ARE PAPER, NOT WHITE. #ffffff on a screen full of cards is glare, and it
 *     made two dozen screens read as a different product from Today.
 */

@font-face {
  font-family: 'ArchivoBlack';
  src: url('/static/fonts/ArchivoBlack-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/static/fonts/Archivo-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('/static/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url('/static/fonts/IBMPlexMono-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  --field: #f2efe6;
  /* Surfaces are warm paper, not #ffffff. That one value is most of why two dozen screens
     read as a different product from Today: a grid of pure-white cards on cream is glare
     with a layout behind it, and the amber has nothing to be warm against. */
  --paper: #fbf9f4;
  --ink: #17150f;
  --ink-muted: #4a463c;
  --hair: #c9c2b0;
  --stone: #ddd8c8;

  /* The accent, and the only one. */
  --amber: #ffb000;
  --amber-deep: #d99500;
  --red: #9e1a0f;

  /* Rail internals: warm near-black steps, so the dark column has structure without a
     second hue creeping in. */
  --rail-line: #332f24;
  --rail-hover: #221f18;
  --rail-quiet: #8d8676;

  --rule: 3px solid var(--ink);
  --hair-rule: 1px solid var(--hair);
  --offset: 6px 6px 0 var(--ink);
  --display: 'ArchivoBlack', 'Arial Black', sans-serif;
  --sans: 'Archivo', 'Helvetica Neue', sans-serif;
  --mono: 'PlexMono', ui-monospace, 'SF Mono', monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--field);
  /* Paper grain. A flat fill reads as a screenshot of a design; a little tooth reads as a
     surface. Inline so it costs no request and cannot fail to load. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
}

::selection { background: var(--amber); color: var(--ink); }

/* There was no focus ring in this stylesheet at all. Every control below is reachable by
   keyboard and none of them said so. Ink rather than amber on the light field: amber on
   cream is about 1.8:1, which is under the 3:1 a focus indicator has to clear, and a ring
   nobody can see is the same as no ring. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.on-ink :focus-visible, .on-ink:focus-visible { outline-color: var(--amber); }

/* Announced to a screen reader, absent from the page. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the perforation -------------------------------------------------------
   The brand device, and the only separator in the system. Decorative, so anything
   carrying it is aria-hidden. */
.perf {
  height: 0;
  border-top: 2px dashed var(--ink);
}

.perf--faint { border-top-color: var(--hair); }
.perf--lit { border-top-color: var(--amber); }
.perf--rail { border-top-color: var(--rail-line); }

/* The torn edge itself, for the bottom of a receipt block. Drawn as a mask so the paper
   is genuinely absent rather than covered by a shape in the ground colour, which would
   show as a seam over any other surface. */
.torn-bottom {
  --tooth: 18px;
  mask-image:
    linear-gradient(#000 0 0),
    conic-gradient(from -45deg at 50% 100%, #000 0deg 90deg, #0000 90deg);
  mask-size:
    100% calc(100% - var(--tooth) / 2),
    var(--tooth) calc(var(--tooth) / 2);
  mask-position: top left, bottom left;
  mask-repeat: no-repeat, repeat-x;
}

/* A border would be clipped by the mask, so the outline is drawn as hard drop-shadows on
   the parent, which follow the teeth. */
.receipt-outline {
  filter:
    drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))
    drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));
}

/* ---- instrument labelling -------------------------------------------------- */
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.label--ruled {
  display: block;
  border-bottom: var(--rule);
  padding-bottom: 6px;
  margin-bottom: 14px;
  color: var(--ink);
}

/* ---- structure -------------------------------------------------------------- */
.shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  background: var(--ink);
  color: var(--field);
  border-right: var(--rule);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

/* ---- the receipt stub ------------------------------------------------------
   The rail's head is the mark at size: paper, the name, the merchant, one green total
   line, and a torn edge where it leaves the rail. It replaces a black-and-amber hazard
   band that belonged to another company and read as roadworks. */
.rail__head {
  background: var(--paper);
  color: var(--ink);
  padding: 20px 20px 26px;
  --tooth: 16px;
}

.rail__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rail__merchant {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 6px;
  overflow-wrap: anywhere;
}

/* The mark's own total line, at the width of the stub. A single solid rule, which is what
   a total is — the thing the hazard band was not. */
.rail__total {
  height: 7px;
  background: var(--amber);
  margin-top: 12px;
  width: 56%;
}

/* ---- the rail's nav --------------------------------------------------------
   Twenty-six destinations did not fit a 100vh sticky column and nothing here said
   `overflow`, so everything past the twelfth was unreachable on a laptop — not clipped,
   not scrollable, simply gone. `min-height: 0` is what lets a flex child shrink far
   enough to scroll; `flex: 1` alone does not. */
.rail__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 0 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--rail-line) transparent;
}

.rail__nav::-webkit-scrollbar { width: 8px; }
.rail__nav::-webkit-scrollbar-track { background: transparent; }
.rail__nav::-webkit-scrollbar-thumb { background: var(--rail-line); }

.rail__group { padding: 0; margin: 0; border: 0; }
.rail__list { list-style: none; margin: 0; padding: 0; }

/* The group's name. Quiet: it is a signpost, not a destination. */
.rail__grouphead {
  display: block;
  padding: 16px 20px 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rail-quiet);
}

.rail__group + .rail__group .rail__grouphead { border-top: 2px dashed var(--rail-line); margin-top: 10px; padding-top: 18px; }

.rail__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 20px;
  color: #d5d2c6;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-left: 5px solid transparent;
  transition: color 90ms linear, border-color 90ms linear, background-color 90ms linear;
}

.rail__link:hover {
  color: var(--paper);
  background: var(--rail-hover);
  border-left-color: var(--amber);
}

/* One loud thing in the column, and it is where you are. */
.rail__link[aria-current='page'] {
  color: var(--ink);
  background: var(--amber);
  border-left-color: var(--ink);
  font-weight: 600;
}

.rail__count {
  font-size: 11px;
  color: var(--rail-quiet);
  font-variant-numeric: tabular-nums;
}

.rail__link[aria-current='page'] .rail__count { color: var(--ink); opacity: 0.7; }

.rail__foot {
  padding: 14px 20px;
  border-top: 2px dashed var(--rail-line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--rail-quiet);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.rail__foot span { overflow-wrap: anywhere; }
.rail__foot form { margin: 0; }

.rail__signout {
  background: none;
  border: 0;
  padding: 0;
  color: var(--amber);
  font: inherit;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
}
.rail__signout:hover { text-decoration: underline; }

.main { padding: 0 0 64px; min-width: 0; }

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 40px 18px;
  border-bottom: var(--rule);
  flex-wrap: wrap;
}

.masthead h1 {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.01em;
  margin: 4px 0 0;
  text-transform: uppercase;
}

.masthead__when {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.section { padding: 34px 40px 0; }

/* ---- the headline figure ----------------------------------------------------
   Deliberately out of scale with everything else. A manager opens this screen to read one
   number, and the design should not make them hunt for it among five of equal weight. */
.takings {
  display: grid;
  grid-template-columns: minmax(320px, 1.4fr) minmax(280px, 1fr);
  gap: 28px;
  align-items: start;
}

/* Sized off the column it sits in rather than the viewport: at 9vw a five-figure day ran
   out through the side of its grid cell and under the stat slabs. */
.takings__figure {
  container-type: inline-size;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(40px, 13cqw, 104px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  overflow-wrap: anywhere;
}

/* The mark's total line again, at the width of the day's takings. */
.takings__rule {
  height: 12px;
  background: var(--amber);
  border: var(--rule);
  border-bottom: 0;
  margin-bottom: -2px;
  max-width: 520px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
}

.slab {
  background: var(--paper);
  border: var(--rule);
  box-shadow: var(--offset);
  padding: 16px 18px;
}

.slab__value {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.slab__note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* A form is one column of a readable width, not a field stretched to the monitor. */
.slab--form { max-width: 620px; }

/* ---- the trading day -------------------------------------------------------- */
.hours {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 190px;
  border-bottom: var(--rule);
  padding-bottom: 0;
}

.hours__bar {
  flex: 1;
  min-width: 0;
  background: var(--amber);
  border: 2px solid var(--ink);
  border-bottom: 0;
  position: relative;
  transform-origin: bottom;
  animation: grow 420ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.hours__bar--empty { background: var(--stone); }

.hours__bar:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  background: var(--ink);
  color: var(--field);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 8px;
  white-space: nowrap;
  z-index: 2;
}

.hours__axis {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}

.hours__axis span { flex: 1; text-align: center; min-width: 0; }

/* ---- the ledger -------------------------------------------------------------
   A back office is a place for reading a column of things down. Two dozen screens used
   to be grids of white cards, which is why they read as a different product from Today:
   you cannot compare two tax rates or two suppliers that are side by side in boxes. Every
   list is a ledger now, and only a detail screen is a slab. */
.ledger__wrap {
  overflow-x: auto;
  /* The shadow is outside the table's box, so the scroller needs room for it or it is
     clipped on the first paint. */
  padding: 0 6px 8px 0;
}

.ledger {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: var(--rule);
  box-shadow: var(--offset);
}

.ledger caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 10px;
}

.ledger th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 12px 18px;
  border-bottom: var(--rule);
  white-space: nowrap;
}

.ledger td {
  padding: 12px 18px;
  border-bottom: var(--hair-rule);
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}

.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr:hover td { background: #f2eee3; }

.ledger .num { text-align: right; }
.ledger .name { font-family: var(--sans); font-weight: 600; font-size: 15px; }
.ledger .quiet { color: var(--ink-muted); }

/* The row's own actions, kept to the right and kept small. A full offset-shadow button
   on every row of forty is a wall, not an affordance. */
.ledger .acts { text-align: right; white-space: nowrap; }

.ledger .acts form { display: inline; margin: 0; }

.act {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  margin-left: 6px;
}

.act:hover { background: var(--ink); color: var(--paper); }
.act--stop { border-color: var(--red); color: var(--red); }
.act--stop:hover { background: var(--red); color: var(--paper); border-color: var(--red); }

/* An empty screen is an invitation to act, so it is set like a sentence and not like a
   failed query. */
.ledger__empty {
  background: var(--paper);
  border: 2px dashed var(--hair);
  padding: 26px 22px;
  font-size: 15px;
  color: var(--ink-muted);
  max-width: 62ch;
}

/* ---- devices ---------------------------------------------------------------- */
.tills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.till__name {
  font-family: var(--display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 8px 0 2px;
}

.till__line {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.till__agent { display: block; margin-top: 4px; overflow-wrap: anywhere; }

.till__error { font-family: var(--mono); font-size: 12px; color: var(--red); margin-top: 4px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 2px solid var(--ink);
  white-space: nowrap;
}

/* Colour never carries the meaning on its own — each of these has a word in it. */
.pill--live { background: var(--amber); }
.pill--waiting { background: var(--stone); }
.pill--behind { background: var(--red); color: var(--paper); border-color: var(--red); }

/* The code is read aloud across a room, so it is set like something to be read aloud. */
.code {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0.28em;
  padding: 18px 20px;
  background: var(--ink);
  color: var(--amber);
  border: var(--rule);
  word-break: break-all;
}

/* ---- forms and actions ------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 3px solid var(--ink);
  background: var(--amber);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--offset);
  transition: transform 70ms linear, box-shadow 70ms linear;
}

.btn:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }

.btn--quiet { background: var(--paper); color: var(--ink); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); transform: none; box-shadow: none; }

.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.field--grow { flex: 1 1 220px; }
.field--narrow { flex: 0 1 140px; }
.field--inline { display: inline-block; margin-right: 16px; }
.field-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }

.field { display: block; margin-bottom: 22px; }

.field__label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

/* Underlines rather than boxes. A box inside a slab inside a border is three nested
   rectangles saying the same thing; the rule under the text is enough. */
.field__input {
  width: 100%;
  font-family: var(--mono);
  font-size: 18px;
  padding: 8px 2px;
  border: 0;
  border-bottom: var(--rule);
  background: transparent;
  color: var(--ink);
}

.field__input:focus {
  outline: 0;
  border-bottom-color: var(--amber-deep);
  background: #fdf7e6;
}

.field__hint, .field__help {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-muted);
}

/* Errors do not apologise and are never vague about what happened. */
.notice {
  border: var(--rule);
  border-left-width: 10px;
  border-left-color: var(--red);
  background: var(--paper);
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 13px;
  margin-bottom: 22px;
}

.notice--good { border-left-color: var(--amber); }

/* ---- sign in ----------------------------------------------------------------
   The same receipt as the rail's head, at the size of a whole page: this is the first
   Tender surface anyone sees, so it is the mark and nothing else. */
.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* The outline has to be drawn as drop-shadows, because a border would be clipped by the
   mask that makes the teeth. */
.gate__paper {
  width: min(440px, 100%);
  filter:
    drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink))
    drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink));
}

.gate__slab {
  background: var(--paper);
  --tooth: 22px;
}

.gate__body { padding: 30px 34px 44px; }

.gate__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 32px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.brand-icon { flex: none; }

.gate__sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 4px 0 0;
}

.gate__total { height: 8px; background: var(--amber); width: 46%; margin: 16px 0 26px; }

.gate__alt { font-size: 14px; color: var(--ink-muted); margin-top: 20px; }

/* ---- one orchestrated entrance ---------------------------------------------
   Staggered on load and nowhere else. Motion on a screen somebody reads forty times a day
   stops being delightful by the third time. */
.rise {
  animation: rise 420ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .hours__bar { animation: none; }
  .btn, .rail__link, .act { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  /* Above the content rather than beside it, so the nav scrolls with the page and needs
     no scroller of its own. */
  .rail {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: var(--rule);
  }
  .rail__nav { overflow-y: visible; max-height: none; }
  .takings { grid-template-columns: 1fr; }
  .section, .masthead { padding-left: 20px; padding-right: 20px; }
}

/* ---- kitchen display --------------------------------------------------------
   The KDS is read at arm's length across a room, so a ticket is a slab whose item lines
   are large and whose note is set apart. The board is not a table: quantity, item and
   note sit on one line, because that is how a ticket is actually read. */
/* The left edge was #e4572e, a third hue nothing in the system ever set. */
.kds {
  border-left: 10px solid var(--amber);
}

.kds__head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.kds__lines {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.kds__line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 17px;
}

.kds__qty {
  font-family: var(--mono);
  font-weight: 700;
  min-width: 2ch;
  color: var(--ink-muted);
}

.kds__item { font-weight: 600; }

.kds__note {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-muted);
  margin-left: auto;
}