/* =============================================================================
   DISPATCH — the Orange Crew field system
   =============================================================================

   Written from scratch for this app. Nothing here comes from a component
   library, and there is deliberately no border-radius, no blurred shadow, and
   no soft grey card anywhere in the file.

   The rules that hold it together:

     1. Geometry is squared. The one recurring shape is a 45-degree cut on the
        top-right corner of anything that behaves like a ticket or an action.
     2. Elevation is a hard offset in signal orange, printed rather than
        floated. If you reach for a blur, you are off-system.
     3. Orange is structural. It marks the live edge of a record and the one
        action the user should take next — never decoration, never a fill for
        large areas.
     4. Numbers are monospaced and tabular, always. Counts, IDs, prices,
        timestamps and statuses line up in columns down the screen.
     5. The primary action lives in the bottom third of a phone screen, inside
        the safe area, big enough for a gloved thumb.

   Typefaces: the stacks below resolve to a condensed grotesk where the OS has
   one (Bahnschrift on Windows, Roboto Condensed on Android) and fall back to
   the system UI face elsewhere, with tracking and case doing the work. To pin
   it exactly, drop a self-hosted Saira Condensed into public/fonts and add a
   single @font-face block at the top of --font-display. Saira is already
   self-hosted on orangecrewchicago.com, so it is a licence you have.
============================================================================= */

/* ---------------------------------------------------------------- 1. tokens */

:root {
  /* Ground. Near-black with a trace of blue so orange reads warm against it. */
  --ink:        #0A0B0C;
  --steel:      #16181C;
  --steel-2:    #212429;
  --line:       #33373E;
  --line-bright:#4A505A;

  /* Signal. Brand orange, plus a lighter tint for text on darker fills. */
  --signal:     #F6851F;
  --signal-lo:  #C25E12;
  --amber:      #FFB25C;

  /* Text. */
  --bone:       #EDEAE4;   /* 17:1 on --ink */
  --dim:        #949AA3;   /* 8.5:1 on --ink */
  --faint:      #6B7079;

  /* State. Separate from the accent, so "live" never reads as "next action". */
  --live:       #5FD39A;
  --wait:       #FFB25C;
  --alert:      #FF7059;

  /* Type. */
  --font-display: Bahnschrift, "Roboto Condensed", "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  --font-text:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Mono", monospace;

  /* Type scale — 1.25 from a 16px base, with a display step above it. */
  --t-micro: 0.6875rem;  /* 11px — stamps, labels */
  --t-small: 0.8125rem;  /* 13px — meta */
  --t-body:  1rem;
  --t-lead:  1.125rem;
  --t-h3:    1.375rem;
  --t-h2:    1.75rem;
  --t-h1:    2.25rem;
  --t-ask:   2rem;       /* the one-question-per-screen headline */

  /* Space — 4px base, named by use rather than size. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Geometry. */
  --cut:       16px;   /* the corner notch */
  --cut-sm:    10px;
  --lift:      3px;    /* hard offset elevation */
  --rule:      1px;
  --hazard:    6px;

  /* Motion. Steps snap; nothing drifts. */
  --snap:      120ms cubic-bezier(0.2, 0, 0, 1);
  --settle:    200ms cubic-bezier(0.2, 0, 0, 1);

  /* Layout. */
  --shell-max: 560px;    /* phone-first content column */
  --board-max: 1600px;
  --tap:       56px;     /* minimum interactive height */
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --safe-t:    env(safe-area-inset-top, 0px);
}

/* The signature notch, as one reusable clip. */
.cut     { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.cut-sm  { clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%); }

/* ------------------------------------------------------------- 2. baseline */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Stops iOS rubber-banding from revealing a white void under the app. */
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 90%;
  letter-spacing: 0.01em;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--amber); }

img { max-width: 100%; display: block; }

/* One focus treatment everywhere, visible on every ground in the system. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

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

.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;
}

/* Skip link that stays out of the way until it's tabbed to. */
.skip {
  position: absolute; left: var(--s-3); top: calc(var(--s-3) + var(--safe-t));
  transform: translateY(-200%);
  background: var(--signal); color: var(--ink);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; z-index: 100;
}
.skip:focus { transform: translateY(0); }

/* --------------------------------------------------------- 3. type helpers */

.label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--dim);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.muted { color: var(--dim); }
.strong-text { color: var(--bone); }

.prose { font-size: var(--t-body); line-height: 1.65; color: var(--bone); max-width: 62ch; }
.prose p + p { margin-top: var(--s-4); }

/* ------------------------------------------------------------ 4. app shell */

.hazard {
  height: var(--hazard);
  background: repeating-linear-gradient(115deg,
    var(--signal) 0 9px, var(--ink) 9px 18px);
  background-size: 200% 100%;
  flex: 0 0 auto;
}

/* While something slow is running — the AI writing captions, mostly — the
   hazard stripe at the top of the app becomes the progress indicator: a bright
   band sweeps across it left to right until the work finishes. It is already
   the loudest element on screen, so it earns the job better than a spinner
   tucked away in a corner. */
.hazard { position: relative; overflow: hidden; }

.hazard--working::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, var(--amber) 35%, #FFFFFF 50%, var(--amber) 65%, transparent 100%);
  transform: translateX(-100%);
  animation: hazard-sweep 1.1s ease-in-out infinite;
}
@keyframes hazard-sweep {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  /* No sweep; hold a solid bright bar so the state is still unmistakable. */
  .hazard--working::after { animation: none; transform: none; background: var(--amber); }
}

.shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink);
  padding-top: var(--safe-t);
  border-bottom: var(--rule) solid var(--line);
}
.topbar__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  max-width: var(--board-max); margin: 0 auto; width: 100%;
}

/* Brand mark. The real Orange Crew logo, in the light-on-dark variant the
   company already uses in its own site footer — the standard mark is dark
   type and disappears on this ground. Sized well under its native 223px so
   it stays crisp on a phone's 2x/3x screen. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 132px; height: auto; }
.brand:hover { opacity: 0.85; }

/* Larger lockup for the sign-in and hand-off screens. */
.brand--lg img { width: 186px; }

/* Kept for the few places a text mark reads better than the logo, and as the
   no-image fallback. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--t-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone); text-decoration: none;
}
.wordmark b { color: var(--signal); font-weight: 700; }
.wordmark:hover { color: var(--bone); }

.main {
  flex: 1;
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.main--wide { max-width: var(--board-max); }

/* Bottom action bar. Sits above the home indicator and never scrolls away. */
.actionbar {
  position: sticky; bottom: 0; z-index: 15;
  margin: auto calc(var(--s-4) * -1) 0;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + var(--safe-b));
  background: linear-gradient(to top, var(--ink) 78%, transparent);
  display: flex; gap: var(--s-2);
}

/* --------------------------------------------------------------- 5. tickets */

.ticket {
  background: var(--steel);
  border: var(--rule) solid var(--line);
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-2);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  text-decoration: none; color: inherit;
  transition: background var(--snap), border-color var(--snap);
}
a.ticket:hover, button.ticket:hover { background: var(--steel-2); border-color: var(--line-bright); color: inherit; }

/* The one record that needs action carries the printed orange edge. */
.ticket--live {
  border-color: var(--signal);
  box-shadow: var(--lift) var(--lift) 0 var(--signal);
  margin-right: var(--lift);
}

.ticket__id {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.11em; color: var(--signal); font-variant-numeric: tabular-nums;
}
.ticket__title {
  font-family: var(--font-display); font-weight: 700; font-stretch: 90%;
  font-size: var(--t-h3); line-height: 1.12; text-transform: uppercase;
}
.ticket__sub { font-family: var(--font-mono); font-size: var(--t-small); color: var(--dim); }

/* Stamps read as inked-on status, not as coloured pills. */
.stamp {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
  border: var(--rule) solid currentColor;
  padding: 2px var(--s-2);
}
.stamp--draft { color: var(--dim); }
.stamp--wait  { color: var(--wait); }
.stamp--live  { color: var(--live); }
.stamp--paid  { color: var(--live); }
.stamp--unpaid{ color: var(--dim); }
.stamp--alert { color: var(--alert); }

/* A stamp that is also a button — the pay status on a run-sheet card. */
.stamp--button {
  font: inherit; cursor: pointer; background: transparent;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
  border: var(--rule) solid currentColor; padding: 2px var(--s-2);
  transition: color var(--snap), background var(--snap);
}
.stamp--button:hover { color: var(--signal); background: var(--steel); }

/* Modal dialog. Native <dialog>, so focus trapping and Esc come for free. */
.modal {
  border: var(--rule) solid var(--line-bright);
  background: var(--steel);
  color: var(--bone);
  padding: 0;
  width: min(420px, calc(100vw - var(--s-5)));
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.modal::backdrop { background: rgba(10, 11, 12, 0.78); }
.modal__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.modal h2 { font-size: var(--t-h3); }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in 120ms cubic-bezier(0.2, 0, 0, 1); }
  @keyframes modal-in { from { opacity: 0; transform: translateY(6px); } }
}

/* --------------------------------------------------------------- 6. buttons */

.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-5);
  border: var(--rule) solid transparent;
  background: var(--signal); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-stretch: 90%;
  font-size: var(--t-lead); letter-spacing: 0.11em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: background var(--snap), transform var(--snap);
}
.btn:hover  { background: var(--amber); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--steel-2); color: var(--faint); cursor: not-allowed; transform: none;
}

.btn--block { width: 100%; }
.btn--grow  { flex: 1; }

.btn--ghost {
  background: transparent; color: var(--bone); border-color: var(--line-bright);
}
.btn--ghost:hover { background: var(--steel-2); color: var(--bone); border-color: var(--signal); }

.btn--danger { background: var(--alert); color: var(--ink); }
.btn--danger:hover { background: #FF8D7A; }

.btn--sm {
  min-height: 40px; padding: 0 var(--s-4);
  font-size: var(--t-small); letter-spacing: 0.1em;
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
}

/* ------------------------------------------------- 7. guided capture screen */

/* Segmented progress. Each segment is one question, so the tech can see how
   much is left without a percentage. */
.progress { display: flex; gap: 3px; }
.progress__seg { height: 4px; flex: 1; background: var(--line); }
.progress__seg--done { background: var(--signal); }
.progress__seg--now  { background: var(--amber); }

.ask {
  font-family: var(--font-display); font-weight: 700; font-stretch: 90%;
  font-size: var(--t-ask); line-height: 1.06; text-transform: uppercase;
  text-wrap: balance;
}
.ask__hint { font-size: var(--t-small); color: var(--dim); margin-top: var(--s-2); }

/* Answer grid — two columns of thumb-sized targets. */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.options--one { grid-template-columns: 1fr; }

/* The input is visually hidden but still the thing being focused and checked,
   so keyboard and screen-reader behaviour stays native. */
.option { position: relative; display: block; }
.option > input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.option__face {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  min-height: 84px; padding: var(--s-3);
  background: var(--steel); border: var(--rule) solid var(--line);
  transition: background var(--snap), border-color var(--snap);
}
.option__big {
  font-family: var(--font-display); font-weight: 700; font-stretch: 90%;
  font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.option__small {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85;
}
.option > input:checked + .option__face {
  background: var(--signal); border-color: var(--signal); color: var(--ink);
}
.option > input:focus-visible + .option__face { outline: 3px solid var(--amber); outline-offset: 2px; }
.option > input:disabled + .option__face { opacity: 0.45; }

/* Multi-select tick grid for challenges — same targets, different affordance. */
.ticks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tick { position: relative; }
.tick > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.tick__face {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-4);
  background: var(--steel); border: var(--rule) solid var(--line);
  font-size: var(--t-small);
  transition: background var(--snap), border-color var(--snap);
}
.tick__face::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto;
  border: var(--rule) solid var(--line-bright);
}
.tick > input:checked + .tick__face { background: var(--steel-2); border-color: var(--signal); color: var(--bone); }
.tick > input:checked + .tick__face::before { background: var(--signal); border-color: var(--signal); }
.tick > input:focus-visible + .tick__face { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---------------------------------------------------------------- 8. fields */

.field { display: flex; flex-direction: column; gap: var(--s-2); }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3);
  background: var(--steel);
  border: var(--rule) solid var(--line);
  color: var(--bone);
  font-family: var(--font-text);
  font-size: var(--t-body);   /* 16px — anything smaller makes iOS zoom on focus */
  transition: border-color var(--snap);
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--signal); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--signal) 50%),
                    linear-gradient(135deg, var(--signal) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s-7);
}

.input--money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.field__error { color: var(--alert); font-size: var(--t-small); }
.input[aria-invalid="true"] { border-color: var(--alert); }

/* Photo capture tile — the camera is a step, not a file input. */
.shot { position: relative; display: block; }
.shot > input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.shot__face {
  aspect-ratio: 3 / 2;
  border: var(--rule) dashed var(--line-bright);
  background: var(--steel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  color: var(--dim);
}
.shot__face svg { width: 30px; height: 30px; stroke: var(--signal); fill: none; stroke-width: 1.6; }
.shot--filled .shot__face { border-style: solid; border-color: var(--signal); padding: 0; }
.shot__preview { width: 100%; height: 100%; object-fit: cover; }
.shot > input:focus-visible + .shot__face { outline: 3px solid var(--amber); outline-offset: 2px; }

/* --------------------------------------------------------------- 9. panels */

.panel {
  background: var(--steel);
  border: var(--rule) solid var(--line);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }

.divider { height: var(--rule); background: var(--line); border: 0; margin: 0; }

/* Section rule that carries the hazard motif at small scale. */
.rule-hazard {
  height: 3px; border: 0; margin: var(--s-2) 0;
  background: repeating-linear-gradient(115deg, var(--line) 0 6px, transparent 6px 12px);
}

.statbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: var(--rule); background: var(--line);
  border: var(--rule) solid var(--line);
}
.statbar__cell { background: var(--steel); padding: var(--s-3); display: flex; flex-direction: column; gap: 2px; }
.statbar__value {
  font-family: var(--font-display); font-weight: 700; font-stretch: 90%;
  font-size: var(--t-h3); font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- 10. flash notes */

.flash[hidden] { display: none; }

.flash {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--signal);
  background: var(--steel);
  font-size: var(--t-small);
}
.flash--ok    { border-left-color: var(--live); }
.flash--warn  { border-left-color: var(--wait); }
.flash--error { border-left-color: var(--alert); }

/* --------------------------------------------------------- 11. the yard board */

.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--rule);
  background: var(--line);
  border: var(--rule) solid var(--line);
}
.board__col {
  background: var(--ink);
  padding: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
  min-height: 200px;
}
.board__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: var(--s-2);
  border-bottom: var(--rule) solid var(--line);
}
.board__card {
  background: var(--steel);
  border: var(--rule) solid var(--line);
  padding: var(--s-2) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-1);
  text-align: left; width: 100%;
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color var(--snap), background var(--snap);
}
.board__card:hover { background: var(--steel-2); border-color: var(--line-bright); }
.board__card[aria-current="true"] {
  border-color: var(--signal);
  box-shadow: var(--lift) var(--lift) 0 var(--signal);
  margin-right: var(--lift);
}
.board__name {
  font-family: var(--font-display); font-weight: 700; font-stretch: 90%;
  font-size: var(--t-body); line-height: 1.15; text-transform: uppercase;
}

.keybar {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-top: var(--rule) solid var(--line);
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.09em; color: var(--dim);
}
.kbd {
  border: var(--rule) solid var(--line-bright);
  padding: 1px 6px; color: var(--bone);
  font-family: var(--font-mono); font-size: var(--t-micro);
}

/* Review drawer. Slides from the right on desktop, full-screen on phones. */
.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 40;
  width: min(560px, 100%);
  background: var(--ink);
  border-left: var(--rule) solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--settle);
}
.drawer[open], .drawer.is-open { transform: translateX(0); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.drawer__scrim {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(10, 11, 12, 0.72);
}

/* ---------------------------------------------------------------- 12. tables */

.table-wrap { overflow-x: auto; border: var(--rule) solid var(--line); }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 620px; }
.table th, .table td {
  text-align: left; padding: var(--s-3);
  border-bottom: var(--rule) solid var(--line); vertical-align: top;
}
.table thead th {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim);
  background: var(--steel); font-weight: 400;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--steel); }
.table .num { text-align: right; }

/* ----------------------------------------------------------------- 13. misc */

/* Big scannable QR for handing the phone to a customer. */
.qr {
  background: #FFFFFF; padding: var(--s-4);
  display: grid; place-items: center;
  /* White ground is mandatory — scanners need the quiet zone and contrast. */
}
.qr svg, .qr img { width: min(300px, 70vw); height: auto; }

.chipline { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.1em; text-transform: uppercase;
  border: var(--rule) solid var(--line-bright); color: var(--dim);
  padding: 3px var(--s-2);
}
.chip--on { border-color: var(--signal); color: var(--signal); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); }
.gallery img { aspect-ratio: 3 / 2; object-fit: cover; border: var(--rule) solid var(--line); }

.stack   { display: flex; flex-direction: column; }
.stack-2 { gap: var(--s-2); } .stack-3 { gap: var(--s-3); }
.stack-4 { gap: var(--s-4); } .stack-5 { gap: var(--s-5); }
.row     { display: flex; gap: var(--s-2); align-items: center; }
.row--between { justify-content: space-between; }
.grow    { flex: 1; }

/* ------------------------------------------------------- 14. wide viewports */

@media (min-width: 900px) {
  :root { --t-ask: 2.5rem; --t-h1: 2.75rem; }

  .main--wide { padding-left: var(--s-6); padding-right: var(--s-6); }

  /* On desktop the action bar stops being a sticky thumb rail. */
  .actionbar {
    position: static; margin: var(--s-4) 0 0; padding: 0;
    background: none; justify-content: flex-start;
  }
  .btn--block { width: auto; min-width: 220px; }
}

/* ---------------------------------------------------- 15. reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------- 16. forced colours mode */

@media (forced-colors: active) {
  .ticket, .panel, .option__face, .tick__face, .board__card { border: 1px solid CanvasText; }
  .ticket--live, .board__card[aria-current="true"] { box-shadow: none; outline: 3px solid Highlight; }
  .btn { border: 1px solid CanvasText; }
}