/* base.css — Pickup Window design system v2: "simple, not basic".
   Brand: orange #ff7828 on black; warm off-white surfaces; soft depth (a lip under every button, a lift
   under every card), quick motion (120–180 ms), and the brand lettering for hero moments only. */
@import url('/fonts/fonts.css');   /* the whole 114-font library; a browser only downloads the faces a page actually uses */

:root {
  /* brand */
  --brand-orange: #ff7828; --brand-orange-600: #e8641a; --brand-orange-100: #fff1e8; --brand-orange-800: #7a3208; --brand-black: #000000;
  --font-display: "Permanent Marker", "Archivo", cursive;   /* PICKUP */
  --font-script: "Kaushan Script", "Archivo", cursive;      /* Window */
  /* surfaces + ink */
  --color-bg: #f5f3f0; --color-surface: #ffffff; --color-text: #141312;
  --color-accent: var(--brand-orange); --color-accent-600: var(--brand-orange-600); --color-accent-100: var(--brand-orange-100); --color-accent-800: var(--brand-orange-800);
  --on-accent: #141312;   /* black on orange reads 7:1; white on orange only 2.6:1 — and it's the logo's own pairing */
  --color-neutral-100: #faf8f6; --color-neutral-200: #ece8e3; --color-neutral-400: #a39c95; --color-neutral-700: #47423e;   /* 8.9:1 on white — secondary text stays readable */
  --color-divider: color-mix(in srgb, var(--color-text) 20%, transparent);
  --color-line: color-mix(in srgb, var(--color-text) 88%, transparent);
  --font-heading: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif;
  /* shape */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;
  /* depth */
  --e1: 0 1px 2px rgba(20,19,18,.06), 0 1px 3px rgba(20,19,18,.08);
  --e2: 0 6px 16px rgba(20,19,18,.10), 0 2px 4px rgba(20,19,18,.06);
  --e3: 0 16px 40px rgba(20,19,18,.16), 0 4px 10px rgba(20,19,18,.08);
  --shadow-lg: var(--e3);
  --lip: 0 3px 0 color-mix(in srgb, var(--color-text) 85%, transparent);          /* under dark buttons */
  --lip-accent: 0 3px 0 var(--color-accent-800);                                   /* under orange buttons */
  /* motion */
  --t: 140ms cubic-bezier(.2,.7,.2,1);
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  /* ---- design system (Claude Design package, docs/design/, Sept 23 — v2026.09.18-k). Kit names above are unchanged; these are the additions. ---- */
  --color-on-accent: var(--on-accent);                                  /* dark ink on orange: 7.0:1 (white would be 2.6:1) */
  --color-neutral-500: #857d76;  /* control borders */   --color-neutral-600: #635c56;  /* small grey text — #a39c95 fails as text */
  --color-success: #1d7a3e; --color-success-100: #e7f4ea; --color-success-800: #0f4a24;
  --color-warn: #8f5b00;    --color-warn-100: #fcf0d6;    --color-warn-800: #5c3a00;
  --color-error: #c2331b;   --color-error-100: #fce8e4;   --color-error-800: #7c1d0e;
  --color-info: #1f5ea8;    --color-info-100: #e6eefa;    --color-info-800: #123a69;
  --space-1: 4px; --space-5: 20px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --tap: 44px; --control-h: 48px; --focus: 2px solid var(--color-text);
  --fs-11: 11px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-22: 22px;
  --fs-30: 30px; --fs-40: 40px; --fs-48: 48px; --fs-tv-md: 56px; --fs-tv-lg: 96px; --fs-tv-xl: 160px;
  /* shop layer — the storefront and TV board set these per shop (theme.js computes the protected values); Admin, HQ and the counter never do */
  --shop-accent: var(--color-accent);
  --shop-on-accent: var(--color-on-accent);
  --shop-accent-strong: var(--shop-accent);
  --shop-font-heading: var(--font-heading);
  --shop-font-body: var(--font-body);
}
[data-theme="midnight"] { --color-bg: #121417; --color-surface: #1c1f24; --color-text: #f2efe9; --color-neutral-600: #b9b3aa; }
[data-theme="modernist"] { --r-sm: 0; --r: 0; --r-lg: 0; --rule: 2px solid var(--color-text); }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; margin: 0; }
p { margin: 0; }
a { color: var(--color-accent); text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; color: inherit; }   /* never let a browser default make button text pale */
input, select { font: inherit; }
:focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
[hidden] { display: none !important; }

/* type helpers */
.kicker { font: 800 11px/1 var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--color-neutral-700); }
.k10 { font: 800 10px/1 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-700); }
.title { font: 900 30px/1.02 var(--font-heading); }
.h2 { font: 900 20px/1 var(--font-heading); }
.body, .help { font: 400 13px/1.5 var(--font-body); color: var(--color-neutral-700); }
.muted { color: var(--color-neutral-700); }
.err { font: 600 12px/1.4 var(--font-body); color: var(--color-accent-600); min-height: 1em; }
.ok { font: 600 12px/1.4 var(--font-body); color: #1d6b45; }

/* gate card */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.card { border: 1px solid var(--color-divider); background: var(--color-surface); box-shadow: var(--e3); border-radius: var(--r-lg); padding: 34px 28px; display: flex; flex-direction: column; gap: 14px; width: min(460px, 100%); }
.card input, .card select, .input {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--color-line); border-radius: var(--r-sm); background: var(--color-surface);
  font: 400 15px/1.3 var(--font-body); color: var(--color-text); caret-color: var(--color-accent); transition: border-color var(--t), box-shadow var(--t);
}
.input:focus-visible, .card input:focus-visible { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.primary { background: var(--color-accent); color: var(--on-accent); border: none; border-radius: var(--r); padding: 15px 16px; text-align: left; font: 800 14px/1 var(--font-body); display: flex; justify-content: space-between; align-items: center; box-shadow: var(--lip-accent); transition: transform var(--t), box-shadow var(--t), background var(--t); }
.primary:hover { background: var(--color-accent-600); transform: translateY(-1px); box-shadow: var(--lip-accent), var(--e2); }
.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--color-accent-800); }
.primary:disabled { opacity: .45; cursor: not-allowed; }
.secondary { background: var(--color-surface); color: var(--color-text) !important; border: 1.5px solid var(--color-line); border-radius: var(--r); padding: 13px 15px; text-align: left; font: 700 13px/1 var(--font-body); box-shadow: var(--lip); transition: transform var(--t), box-shadow var(--t), background var(--t); }
.secondary:hover { background: var(--color-neutral-100); transform: translateY(-1px); box-shadow: var(--lip), var(--e1); }
.secondary:active { transform: translateY(2px); box-shadow: none; }
.secondary:disabled { opacity: .45; cursor: not-allowed; }
.ghost { border: 1.5px solid var(--color-line); border-radius: var(--r-sm); background: var(--color-surface); color: var(--color-text) !important; padding: 8px 12px; font: 700 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 0 color-mix(in srgb, var(--color-text) 80%, transparent); transition: transform var(--t), box-shadow var(--t), background var(--t); }
.ghost:hover { background: var(--color-neutral-100); transform: translateY(-1px); }
.ghost:active { transform: translateY(1px); box-shadow: none; }
.ghost.danger { border-color: var(--color-accent); color: var(--color-accent-800); }
.ghost.danger:hover { background: var(--color-accent-100); }
.linkbtn { background: none; border: none; padding: 0; color: var(--color-accent-800); font: 700 12px/1.4 var(--font-body); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; text-align: left; transition: color var(--t); }
.linkbtn:hover { color: var(--color-accent); }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--color-neutral-200); border-radius: var(--r); }
.tabs button { flex: 1; border: none; border-radius: var(--r-sm); background: transparent; color: var(--color-text); opacity: .78; padding: 10px; font: 700 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; transition: background var(--t), color var(--t), box-shadow var(--t); }
.tabs button.on { background: var(--color-surface); color: var(--color-text); opacity: 1; box-shadow: var(--e1); }

/* page shell */
.shell { max-width: 1060px; margin: 0 auto; border-left: 2px solid var(--color-text); border-right: 2px solid var(--color-text); min-height: 100vh; background: var(--color-bg); }
@media (max-width: 1100px) { .shell { border: none; } }
.top { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 2px solid var(--color-text); flex-wrap: wrap; }
.top .meta { font: 400 12px/1.3 var(--font-body); color: var(--color-neutral-700); flex: 1; min-width: 140px; }
.nav { display: flex; border-bottom: 2px solid var(--color-text); overflow-x: auto; }
.nav button { border: none; border-right: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text); opacity: .8; padding: 12px 16px; font: 700 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.nav button { transition: color var(--t), box-shadow var(--t); }
.nav button.on { color: var(--color-text); opacity: 1; box-shadow: inset 0 -3px 0 var(--color-accent); }
.section { padding: 18px 20px; border-bottom: 2px solid var(--color-text); display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 160px; }
.stat { border: 1px solid var(--color-divider); border-radius: var(--r); background: var(--color-surface); box-shadow: var(--e1); padding: 12px 14px; min-width: 150px; }
.stat b { display: block; font: 900 28px/1 var(--font-heading); }
.stat span { font: 800 10px/1 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-700); }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font: 800 11px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); padding: 8px; border-bottom: 2px solid var(--color-divider); }
.table td { padding: 8px; border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.scroll { overflow-x: auto; }
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .02em; padding: 3px 10px; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-text); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
select.mini { padding: 6px 8px; border: 2px solid var(--color-text); background: var(--color-bg); font: 700 12px/1 var(--font-body); }

/* link + QR block */
.linkline { font: 600 13px/1.4 var(--font-body); color: var(--color-accent); word-break: break-all; }
.qrbox { border: 1px solid var(--color-divider); border-radius: var(--r); box-shadow: var(--e1); padding: 10px; background: #fff; display: inline-block; line-height: 0; }
.qrbox canvas, .qrbox img { display: block; }
.copy { font: 400 13px/1.5 var(--font-body); border: 1px solid var(--color-divider); border-radius: var(--r); padding: 12px; background: var(--color-neutral-100); white-space: pre-wrap; }

/* toggles + segmented groups (same as the board remote) */
.tog { border: 1.5px solid var(--color-line); border-radius: var(--r-sm); background: var(--color-surface); color: var(--color-text) !important; padding: 9px 12px; font: 700 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; min-height: 44px; text-align: left; box-shadow: var(--lip); transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t); }
.tog.on { background: var(--color-text); color: #fff !important; }
.tog:not(.on):hover { background: var(--color-neutral-100); transform: translateY(-1px); }
.tog:active { transform: translateY(2px); box-shadow: none; }
.seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--color-neutral-200); border-radius: var(--r-sm); }
.seg button { border: none; border-radius: 6px; background: transparent; color: var(--color-text); opacity: .78; padding: 9px 11px; font: 700 11px/1 var(--font-body); min-height: 38px; transition: background var(--t), color var(--t), box-shadow var(--t); }
.seg button.on { background: var(--color-surface); color: var(--color-text); opacity: 1; box-shadow: var(--e1); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.5; }
code { font-size: 12px; background: var(--color-neutral-200); padding: 1px 5px; }

/* product identity block: the wordmark, big, with which app this is right under it */
.product { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.product img { height: 150px; max-width: 100%; }
.product img.full { height: 220px; }
.product .by { font: 700 10px/1 var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: var(--color-neutral-700); }
.product .by img { height: 26px; vertical-align: middle; margin-left: 6px; }
.product .which { font: 900 13px/1 var(--font-heading); letter-spacing: .22em; text-transform: uppercase; color: var(--brand-black); background: var(--brand-orange); padding: 8px 14px; border-radius: var(--r-pill); box-shadow: var(--lip-accent); }
.product .ver { font: 500 10px/1 var(--font-body); color: var(--color-neutral-700); }
/* lockup: the wordmark with the app name, inline. Use it every time "Pickup Window <app>" would otherwise be plain text. */
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.lockup img { height: 44px; width: auto; }
.lockup img.word { height: 26px; }
.lockup .which { font: 900 10px/1 var(--font-heading); letter-spacing: .2em; text-transform: uppercase; color: var(--brand-black); background: var(--brand-orange); padding: 6px 10px; border-radius: var(--r-pill); box-shadow: var(--lip-accent); }
.lockup.lg img { height: 64px; } .lockup.lg .which { font-size: 12px; padding: 8px 14px; }
.lockup.stack { flex-direction: column; align-items: center; gap: 8px; text-align: center; } .lockup.stack img { height: 72px; width: auto; } .lockup.stack img.word { height: 30px; } .lockup.stack .by { font: 700 9px/1 var(--font-heading); letter-spacing: .18em; text-transform: uppercase; color: var(--color-neutral-700); }
/* the quiet check every door does before showing a form */
.checking { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--color-neutral-700); font: 600 13px/1 var(--font-body); }
.checking img { height: 64px; opacity: .9; }
.spin { width: 26px; height: 26px; border: 3px solid var(--color-divider); border-top-color: var(--color-accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* the build stamp: top-right corner of every app page, same place, same size */
.ver-tag { font: 500 10px/1 var(--font-body); color: var(--color-neutral-700); }
.ver-corner { position: absolute; top: 8px; right: 12px; z-index: 2; }
/* brand lettering — hero moments only (front door, hub, TV code screen). Everything else stays Archivo. */
.brand-word { font: 400 1em/1 var(--font-display); color: var(--brand-orange); letter-spacing: .01em; }
.brand-script { font: 400 .9em/1 var(--font-script); color: var(--brand-black); }
.wordmark { display: block; max-width: 100%; height: auto; }
/* raised tile — for anything a person taps that isn't a button: shops, tickets, products */
.tile-raised { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--r); box-shadow: var(--e1); transition: transform var(--t), box-shadow var(--t); }
.tile-raised:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.tile-raised:active { transform: translateY(0); box-shadow: var(--e1); }

/* ---- design system globals (v2026.09.18-k) ---- */
:focus-visible { outline: var(--focus); outline-offset: 2px; }
button, [role="button"], a.btn, .btn, .tog, .seg button { min-height: var(--tap); }
.ds-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border-radius: var(--r-pill); font: 700 var(--fs-11)/1.2 var(--font-body); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ds-pill.neutral { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.ds-pill.info { background: var(--color-info-100); color: var(--color-info-800); }
.ds-pill.success { background: var(--color-success-100); color: var(--color-success-800); }
.ds-pill.warn { background: var(--color-warn-100); color: var(--color-warn-800); }
.ds-pill.error { background: var(--color-error-100); color: var(--color-error-800); }
.ds-pill.accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.ds-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); font: 600 var(--fs-14)/1.4 var(--font-body); }
.ds-banner.info { background: var(--color-info-100); color: var(--color-info-800); }
.ds-banner.success { background: var(--color-success-100); color: var(--color-success-800); }
.ds-banner.warn { background: var(--color-warn-100); color: var(--color-warn-800); }
.ds-banner.error { background: var(--color-error-100); color: var(--color-error-800); }
.ds-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--color-text); color: var(--color-bg); padding: 12px 16px; border-radius: var(--r); box-shadow: var(--e3); font: 600 var(--fs-14)/1.3 var(--font-body); z-index: 60; max-width: min(520px, calc(100vw - 32px)); }
.ds-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px; color: var(--color-neutral-600); font: 600 var(--fs-14)/1.4 var(--font-body); text-align: center; }
.ds-wait .spin { width: 28px; height: 28px; border: 3px solid var(--color-neutral-200); border-top-color: var(--color-accent); border-radius: 50%; animation: ds-spin .9s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-stopped { max-width: 460px; margin: 24px auto; padding: 24px; border-radius: var(--r-lg); background: var(--color-surface); box-shadow: var(--e2); border: 1px solid var(--color-divider); }
.ds-stopped h3 { margin-bottom: 8px; } .ds-stopped p { color: var(--color-neutral-600); margin-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .ds-wait .spin { animation-duration: 3s; } *, *::before, *::after { transition-duration: 0ms !important; } }

/* v2026.09.19-l (Javier: "it should be fixed to the screen size and not scroll left and right"): the page never drags sideways. `clip` (not `hidden`) so no new scroll container and sticky headers keep working; anything that must be wider scrolls inside its own box. */
html, body { overflow-x: clip; }