/* The portal's tokens and shared components (UX_ONBOARDING.md part 3). The lead wrote the tokens and the shared
   components every screen uses; F1 owns the file from here (with the shell, the sign in and Home in shell.css) and
   keeps every class below working, because the other screens' CSS files build on them. One white theme: no
   prefers-color-scheme anywhere. */

:root {
  --ink: #0E1116; --steel: #545D68; --mist: #F4F6F8; --line: #E1E5EA; --white: #FFFFFF;
  --orange: #F25A1E; --orange-text: #B8420F; --go: #1F7A3F; --wait: #B8420F; --stop: #B42318;
  --go-tint: rgba(31, 122, 63, .10); --wait-tint: rgba(184, 66, 15, .10); --stop-tint: rgba(180, 35, 24, .10);
  --steel-tint: rgba(84, 93, 104, .10); --orange-tint: rgba(242, 90, 30, .10);
  --font: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  --num: "DIN Condensed", "DIN Alternate", "Bahnschrift", "Avenir Next Condensed", var(--font);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --pad: 16px; --r-card: 10px; --r-ctl: 6px; --r-sheet: 14px;
  --shadow-sheet: 0 8px 24px rgba(14, 17, 22, .12);
  --fast: 160ms; --tracker: 240ms;
  --rail: 240px; --top: 52px; --tabs: 56px; --content: 1120px;
}
@media (min-width: 1024px) { :root { --pad: 32px; --top: 56px; } }
@media (prefers-reduced-motion: reduce) { :root { --fast: 0ms; --tracker: 0ms; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 15px/22px var(--font);
  font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--orange-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Focus: nothing at page load; the ring only after a real Tab press (core.js sets html.kbd). */
:focus { outline: none; }
html.kbd :focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; }

/* Type scale */

.t-15 { font-size: 15px; line-height: 22px; }

.steel { color: var(--steel); }
.muted { color: var(--steel); font-size: 14px; line-height: 20px; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 20px; line-height: 26px; }
h2 { font-size: 17px; line-height: 24px; }
@media (min-width: 1024px) { h1 { font-size: 24px; line-height: 30px; } }
p { margin: 0 0 var(--s3); }

/* Buttons: one orange primary per screen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px;
  padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--white);
  color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--fast); }
.btn:hover { background: var(--mist); text-decoration: none; }
/* Ink on orange, as on the website: white on #F25A1E is 3.36:1 and fails AA for a 16 px label; ink is 5.63:1. */
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn-primary:hover { background: #DE4F17; }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn-ink:hover { background: #262B33; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; cursor: default; }
.link { background: none; border: 0; padding: 0; color: var(--orange-text); cursor: pointer; font-weight: 500; }
.link:hover { text-decoration: underline; }

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.field > label, .label { font-size: 14px; line-height: 20px; font-weight: 600; }
.field .help { font-size: 14px; line-height: 20px; color: var(--steel); }
.field .error { font-size: 14px; line-height: 20px; color: var(--orange-text); }
.input, .select, .textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-ctl); background: var(--white); font-size: 16px; line-height: 22px; }
.textarea { min-height: 112px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--stop); }
.check { display: flex; gap: var(--s3); align-items: flex-start; font-size: 14px; line-height: 20px; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); }
.row-fields { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .row-fields { grid-template-columns: 1fr 1fr; } }

/* Choice list: large single select rows with the radio on the right */
.choices { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.choice { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 56px;
  padding: var(--s3) var(--s4); border: 0; border-top: 1px solid var(--line); background: var(--white); text-align: left;
  cursor: pointer; width: 100%; }
.choice:first-child { border-top: 0; }
.choice:hover { background: var(--mist); }
.choice .sub { display: block; font-size: 14px; color: var(--steel); font-weight: 400; }
.choice .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--field); flex: none; }
.choice[aria-checked="true"] .dot, .choice[aria-pressed="true"] .dot { border: 6px solid var(--ink); }

/* Chips: state, filter, category */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-ctl);
  font-size: 12px; line-height: 16px; font-weight: 500; background: var(--steel-tint); color: var(--steel); white-space: nowrap; }
.chip-go { background: var(--go-tint); color: var(--go); }

.chip-now { background: var(--orange-tint); color: var(--orange-text); }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pick { min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--white); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Rows and cards: a section is a heading and its rows */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }

.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.row:first-child { border-top: 0; }
a.row:hover, button.row:hover { background: var(--mist); text-decoration: none; }
button.row { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; text-align: left; cursor: pointer; }
.row-main { flex: 1; min-width: 0; }
.row-1 { font-size: 15px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-2 { font-size: 14px; line-height: 20px; color: var(--steel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 1024px) { .row { min-height: 48px; } }
.section { margin: var(--s5) 0; }
.section > h2 { margin-bottom: var(--s3); }

/* Money block and line items */

.lines { width: 100%; border-collapse: collapse; font-size: 15px; }
.lines td { padding: 8px 0; border-top: 1px solid var(--line); vertical-align: top; }
.lines td:last-child { text-align: right; white-space: nowrap; padding-left: var(--s4); }
.lines tr.total td { font-weight: 600; }

/* Sheet: bottom on the phone, side on desktop */
.scrim { position: fixed; inset: 0; background: rgba(14, 17, 22, .32); z-index: 40; }
.sheet { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow: auto; background: var(--white);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-sheet); padding: var(--s4) var(--pad)
  calc(var(--s5) + env(safe-area-inset-bottom)); animation: up var(--fast) ease-out; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
@media (min-width: 1024px) {
  .sheet { left: auto; top: 0; width: 640px; max-height: none; border-radius: 0; padding: var(--s5) var(--s6); animation: side var(--fast) ease-out; }
}
@keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes side { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Progress bar for the onboarding and the order flow */
.progress { display: flex; align-items: center; gap: var(--s3); font-size: 14px; color: var(--steel); }

/* Empty states, skeletons, toasts, the offline bar */
.empty { padding: var(--s6) var(--s4); text-align: left; }
.empty h2 { margin-bottom: var(--s2); }
.empty p { color: var(--steel); max-width: 480px; }
.skeleton { padding: var(--s3) 0; }
.sk-row { height: 44px; margin: 0 var(--s4) var(--s3); border-radius: var(--r-ctl); background: var(--mist); }
#toasts { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabs) + 16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--s2); width: min(92vw, 420px); pointer-events: none; }
@media (min-width: 1024px) { #toasts { left: calc(var(--rail) + 24px); transform: none; bottom: 24px; } }
.toast { pointer-events: auto; background: var(--ink); color: var(--white); border-radius: var(--r-ctl); padding: 12px 16px;
  font-size: 14px; line-height: 20px; box-shadow: var(--shadow-sheet); }
.toast-error { background: var(--stop); }
.offline { background: var(--ink); color: var(--white); text-align: center; font-size: 14px; padding: 6px var(--pad); }

/* Layout helpers */
.page { padding: var(--s4) var(--pad) calc(var(--tabs) + var(--s6) + env(safe-area-inset-bottom)); max-width: var(--content); }
@media (min-width: 1024px) { .page { padding-bottom: var(--s7); } }

.split { display: grid; gap: var(--s5); }
@media (min-width: 1100px) { .split { grid-template-columns: 420px 1fr; align-items: start; } }

.between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }