/* request-next.css: the /request page (form, received and status views) in the site-next design (ERP Night Haul).
   Light and dark, like site-next: dark on :root; light from html[data-theme="light"] (assets/theme.js, localStorage "ecotire-theme")
   or the system setting when no choice is stored. --gold is the fill (with --gold-ink on it); --accent is the gold for text, borders
   and focus (dark enough on ivory). Styles FE's request.html and the classes page.js sets; no markup change.
   Booking Worker limits: served from /request-assets/ (name [A-Za-z0-9_-]+.css); CSP style-src 'self' (no @import, no
   inline styles), img-src 'self' data:. Fonts load from /assets/fonts/ on the site origin, which the release must
   publish (copy of site-next/assets/fonts/); until then the system fallbacks below apply. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-600.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  --bg: #0a0b0c; --ink: #f3eee3; --muted: #a39d91; --gold: #d4a94e; --gold-ink: #14110a; --err: #f2998c;
  --line: rgba(243, 238, 227, 0.14); --edge: rgba(243, 238, 227, 0.28); --card: #131417; --field: #1a1b1f; --gold-wash: rgba(212, 169, 78, 0.12);
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --ink-rgb: 243, 238, 227; --accent: #d4a94e; --err-wash: rgba(242, 153, 140, 0.08);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4efe4; --ink: #17150f; --muted: #575146; --gold: #d4a94e; --gold-ink: #14110a; --err: #a3301c; --accent: #7a570e;
  --line: rgba(23, 21, 15, 0.16); --edge: rgba(23, 21, 15, 0.42); --card: #fbf8f1; --field: #ffffff; --gold-wash: rgba(212, 169, 78, 0.16);
  --ink-rgb: 23, 21, 15; --err-wash: rgba(163, 48, 28, 0.06);
  color-scheme: light;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #f4efe4; --ink: #17150f; --muted: #575146; --gold: #d4a94e; --gold-ink: #14110a; --err: #a3301c; --accent: #7a570e;
  --line: rgba(23, 21, 15, 0.16); --edge: rgba(23, 21, 15, 0.42); --card: #fbf8f1; --field: #ffffff; --gold-wash: rgba(212, 169, 78, 0.16);
  --ink-rgb: 23, 21, 15; --err-wash: rgba(163, 48, 28, 0.06);
  color-scheme: light;
} }
[hidden] { display: none !important; } /* page.js toggles [hidden] on elements whose class sets display */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--sans); overflow-wrap: break-word; }
body::before { content: ""; display: block; height: 4px; background: var(--gold); }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Header */
.bar { display: flex; align-items: center; justify-content: flex-start; gap: 12px 16px; flex-wrap: wrap; min-height: 64px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.site { color: var(--ink); font-weight: 600; text-decoration: none; }
.site::before { content: "\2190\00a0"; color: var(--accent); }
.site:hover { color: var(--accent); }
#help::before { content: none; } /* the arrow marks the way back only; Help is a plain link */
.bar > .lang { margin-left: auto; }
@media (max-width: 599px) { .bar { gap: 8px 12px; } .site { font-size: 0.9375rem; } .bar > .lang { padding: 10px; } .bar > .theme-btn { width: 36px; height: 36px; } }
@media (max-width: 399px) { #site { flex-basis: 100%; } } /* narrow phones: the way back on its own row, then Help, language and theme */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--edge); background: none; color: var(--ink); cursor: pointer; }
.theme-btn svg { width: 18px; height: 18px; display: block; }
.theme-btn .to-dark, :root[data-theme="light"] .theme-btn .to-light { display: none; }
:root[data-theme="light"] .theme-btn .to-dark { display: block; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-btn .to-light { display: none; } :root:not([data-theme="dark"]) .theme-btn .to-dark { display: block; } }
.lang { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.06em; color: var(--ink); background: none; border: 1px solid var(--edge); border-radius: 999px; padding: 10px 14px; min-height: 40px; cursor: pointer; }

/* Page */
main { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }
@media (min-width: 600px) { .bar { padding: 8px 32px; } main { padding: 48px 32px 80px; } }
h1 { font: 400 clamp(2.25rem, 7vw, 3.5rem)/1.04 var(--serif); letter-spacing: -0.01em; margin: 0 0 16px; }
p { margin: 0 0 16px; }
.lede { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.1875rem); }
.phone, .privacy { color: var(--muted); font-size: 0.9375rem; }
.hint { color: var(--muted); font-size: 0.875rem; margin: 0 0 6px; }
.save { font-weight: 600; color: var(--accent); }

/* Form */
fieldset { margin: 0 0 20px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); min-width: 0; }
legend { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding: 0 8px; }
fieldset.group { margin: 0 0 16px; padding: 0; border: 0; border-radius: 0; background: none; }
fieldset.group > legend { font: 600 0.9375rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); padding: 0; margin-bottom: 6px; }
.f { margin: 0 0 16px; }
.f:last-child { margin-bottom: 0; }
.f > label { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 4px; }
input:not([type=checkbox]):not([type=radio]), textarea, select {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 10px;
  background: var(--field); color: var(--ink); font: inherit;
}
textarea { min-height: 96px; resize: vertical; }
input:not([type=checkbox]):not([type=radio]):hover, textarea:hover, select:hover { border-color: rgba(var(--ink-rgb), 0.45); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--accent); outline-offset: 2px; }
input[type=date]:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); } /* Tab walks its inner month, day and year fields; on some only :focus-within matches */
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.f.check { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: flex-start; }
.f.check > label { flex: 1 1 0; min-width: 0; font-weight: 400; margin: 0; }
.f.check > .err { flex-basis: 100%; } /* page.js appends the error inside the row */
form > .f.check { padding: 16px 20px; border: 1px solid var(--accent); border-radius: 14px; background: var(--gold-wash); }
.opts { display: grid; gap: 8px; }
@media (min-width: 600px) { .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opts label { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); cursor: pointer; }
.opts label:has(input:checked) { border-color: var(--accent); background: var(--gold-wash); }
.today { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 8px 16px; border: 1px solid var(--accent); border-radius: 999px; background: var(--gold-wash); color: var(--accent); font: 600 0.9375rem/1 var(--sans); cursor: pointer; }
#bot:not(:empty) { min-height: 65px; }

/* Errors (page.js: .f.bad, p.err#e-<field>, input[aria-invalid], #summary) */
.err { color: var(--err); font-size: 0.875rem; margin: 6px 0 0; }
.err::before { content: "! "; content: "! " / ""; font-weight: 600; } /* empty alt text: screen readers skip the mark; older browsers keep the first line */
.f.bad input:not([type=checkbox]):not([type=radio]), .f.bad textarea, [aria-invalid="true"] { border-color: var(--err); }
.f.bad.check, fieldset.f.bad { border-radius: 10px; box-shadow: inset 3px 0 0 var(--err); padding-left: 12px; }
.summary { margin: 0 0 24px; padding: 16px 20px; border: 1.5px solid var(--err); border-radius: 14px; background: var(--err-wash); color: var(--ink); }
.summary a { color: var(--err); }

/* Buttons */
.send, .ta button, #copy { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 12px; font: 600 1rem/1.2 var(--sans); cursor: pointer; }
.send { margin-top: 4px; border: 1.5px solid var(--gold); background: var(--gold); color: var(--gold-ink); }
.send:hover, .ta button.primary:hover { filter: brightness(1.08); }
.send:disabled { opacity: 0.6; cursor: wait; }
#copy, .ta button { border: 1.5px solid var(--edge); background: transparent; color: var(--ink); }
#copy { min-height: 40px; padding: 8px 14px; font-size: 0.875rem; }
.ta button.primary { border-color: var(--gold); background: var(--gold); color: var(--gold-ink); }
.ta button.danger { border-color: var(--err); color: var(--err); }
.ta button:disabled { opacity: 0.55; cursor: default; }

/* Received view */
#view-received strong#ref, #st-ref { font: 500 1rem/1.4 var(--mono); color: var(--accent); }
code#status-url { display: inline-block; max-width: 100%; padding: 6px 10px; border-radius: 8px; background: var(--field); font: 500 0.8125rem/1.5 var(--mono); color: var(--ink); word-break: break-all; }
#copied { color: var(--accent); font-size: 0.875rem; margin-left: 6px; }

/* Status view */
#st-ref { margin-bottom: 8px; }
#st-text { color: var(--ink); }
dl#st-slots { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); overflow: hidden; }
dl#st-slots dt, dl#st-slots dd { padding: 14px 20px; border-top: 1px solid var(--line); }
dl#st-slots dt:first-of-type, dl#st-slots dt:first-of-type + dd { border-top: 0; }
dl#st-slots dt { color: var(--muted); font-size: 0.875rem; padding-right: 8px; }
dl#st-slots dd { margin: 0; font: 500 0.9375rem/1.5 var(--mono); }
@media (max-width: 420px) { dl#st-slots { grid-template-columns: minmax(0, 1fr); } dl#st-slots dd { border-top: 0; padding-top: 0; } }
#ta-msg { padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--gold-wash); border-radius: 0 10px 10px 0; font-weight: 600; }
.ta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0 0 24px; }
@media (min-width: 600px) { .ta { align-items: flex-start; } }
.ta .hint { margin: -4px 0 4px; }
.ta-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--err); border-radius: 14px; }
.ta-confirm p { flex-basis: 100%; margin: 0; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }