/* Base tokens and components shared by the funnel, portal and admin. Brand palette comes from
   config (injected as CSS variables in the layout): --bg --surface --ink --muted --line --accent
   --accent-ink --accent2 --font-display --font-body --font-mono --radius. Semantic colours for
   states are fixed here and tuned for both themes. */
:root {
  --good: #17784B; --good-soft: rgba(23, 120, 75, 0.14);
  --warn: #9A5F0C; --warn-soft: rgba(154, 95, 12, 0.14);
  --bad: #C23B2C;  --bad-soft: rgba(194, 59, 44, 0.12);
  --line-soft: color-mix(in srgb, var(--line) 50%, transparent);
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; letter-spacing: var(--body-tracking, 0); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; text-wrap: balance; font-family: var(--font-display); font-weight: var(--font-display-weight, 700); letter-spacing: var(--heading-tracking, -0.01em); }
h1 { font-size: clamp(34px, 6vw, 64px); }
h2 { font-size: clamp(26px, 4vw, 40px); }
h3 { font-size: 18px; font-family: var(--font-body); font-weight: 600; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.wrap.narrow { width: min(720px, 100% - 32px); }
.mono, .eyebrow, .chip, .pill, .kbd, .badge { font-family: var(--font-mono); }
.eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.eyebrow b { color: var(--ink); font-weight: 500; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border: 1px solid var(--ink); border-radius: var(--btn-radius, var(--radius)); background: transparent; color: var(--ink); text-decoration: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--btn-tracking, 0.1em); text-transform: var(--btn-transform, uppercase); cursor: pointer; line-height: 1; white-space: nowrap; }
.btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.btn.solid { background: var(--btn-bg, var(--ink)); color: var(--btn-ink, var(--bg)); border-color: var(--btn-bg, var(--ink)); font-family: var(--font-body); font-weight: var(--btn-weight, 700); font-size: 15px; }
.btn.solid:hover { filter: brightness(0.95); background: var(--btn-bg, var(--ink)); }
.btn.accent { background: var(--btn-bg, var(--accent)); color: var(--btn-ink, var(--accent-ink)); border-color: var(--btn-bg, var(--accent)); font-family: var(--font-body); font-weight: var(--btn-weight, 700); font-size: 15px; }
.btn.accent:hover { filter: brightness(0.96); }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.danger.solid { background: var(--bad); color: var(--bg); }
.btn.good { border-color: var(--good); color: var(--good); }
.btn.good.solid { background: var(--good); color: var(--bg); }
.btn.warn { border-color: var(--warn); color: var(--warn); }
.btn.sm { padding: 8px 12px; font-size: 11px; }
.btn.block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label, .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.field .req { color: var(--bad); }
.input, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], input[type="file"], select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--ink); }
textarea { min-height: 120px; resize: vertical; }
input[type="search"] { -webkit-appearance: none; appearance: none; }
/* a file input sizes itself from its button text, which overflows a narrow card on a phone */
input[type="file"] { max-width: 100%; padding: 10px 12px; font-size: 14px; }
input[type="file"]::file-selector-button { font: inherit; margin-right: 12px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); cursor: pointer; }
.hint { font-size: 13px; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.track-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 20px; }
@media (max-width: 640px) { .track-cards { grid-template-columns: 1fr; } }
.track-card { position: relative; display: block; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; }
.track-card input { position: absolute; opacity: 0; inset: 0; }
.track-card:has(input:checked) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.track-card:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.status-msg { font-size: 14px; margin-top: 10px; }
.status-msg.error { color: var(--bad); }
.status-msg.ok { color: var(--good); }

/* cards, chips, badges */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.06em; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip.pos { color: var(--good); border-color: var(--good); background: var(--surface); }
.chip.neg { color: var(--bad); border-color: var(--bad); background: var(--surface); }
.chip.neu { color: var(--warn); border-color: var(--warn); background: var(--surface); }
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; border: 1px solid var(--line); color: var(--muted); }
.badge.good { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.badge.bad { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.badge.warn { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.badge.ink { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.grade-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 2px; border: 1px solid var(--line); }
.grade-badge.great, .grade-badge.good { background: var(--good); color: var(--bg); border-color: var(--good); }
.grade-badge.okay { background: var(--surface); color: var(--good); border-color: var(--good); }
.grade-badge.mid { background: var(--surface); color: var(--ink); }
.grade-badge.low { background: var(--surface); color: var(--bad); border-color: var(--bad); }
.grade-badge.fail { background: var(--bad); color: var(--bg); border-color: var(--bad); }

/* counters */
.counters { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.counters > * { flex: 1 1 150px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); margin-left: -1px; margin-top: -1px; }
.counter { background: var(--surface); padding: 16px 18px; }
.counter .n { font-family: var(--font-display); font-size: 32px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.counter .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
th { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* video tiles */
.video-tile { position: relative; aspect-ratio: 9 / 16; background: #000; border-radius: var(--radius); overflow: hidden; }
.video-tile video { width: 100%; height: 100%; object-fit: cover; }
.video-tile .grade-badge { position: absolute; top: 8px; right: 8px; }
.video-tile .num { position: absolute; top: 8px; left: 8px; font-family: var(--font-mono); font-size: 10px; color: #fff; opacity: 0.8; }

/* misc */
.flash { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); margin-bottom: 16px; font-size: 14px; }
.flash.ok { border-color: var(--good); background: var(--good-soft); }
.flash.error { border-color: var(--bad); background: var(--bad-soft); }
.flash.warn { border-color: var(--warn); background: var(--warn-soft); }
.error-page { padding: 80px 0; }
.kbd { font-size: 12px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row input { flex: 1; font-family: var(--font-mono); font-size: 12px; }
.theme-toggle { background: none; border: 1px solid var(--line); border-radius: 999px; width: 32px; height: 32px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }


/* ---------- brand chrome: the announcement strip and ticker the storefront runs ----------
   Colours and copy come from brand.theme.chrome, lifted from the brand's own Shopify theme, so
   the funnel and portal wear the same furniture as the shop. */
.anno { background: var(--bar-bg); color: var(--bar-ink); text-align: center; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 16px; }
.ticker { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); overflow: hidden; }
.ticker-track { display: flex; align-items: center; gap: 0; width: max-content; animation: ticker-scroll 38s linear infinite; }
.ticker-item { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; padding: 10px 0; white-space: nowrap; }
.ticker-sep { padding: 0 22px; color: var(--accent); font-size: 13px; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* the coloured header bar, when a brand has one */
.topbar, .p-header { background: var(--header-bg); color: var(--header-ink); border-bottom: 1px solid var(--header-line); }
.topbar a, .p-header a, .topbar button, .p-header button { color: var(--header-ink); }
.logo-img, .p-logo-img { height: 40px; width: auto; display: block; }
.p-logo-img { height: 30px; }
.p-header .p-burger-lines span { background: var(--header-ink); }
/* A masked wordmark paints in a flat colour, and public.css picks --ink for it. On a brand whose
   bar is not the page background (Sugoi's is near-black) that put a dark mark on a dark bar. The
   mark belongs to the bar, so it wears the bar's ink. */
.topbar .logo-mask, .p-header .logo-mask { background: var(--header-ink); }
.p-header .p-points { border-color: color-mix(in srgb, var(--header-ink) 35%, transparent); }


/* The portal header must wear the brand's own bar. portal.css historically set
   `.p-header { background: var(--bg) }`, and because it loads after base.css that white won and
   digipop's white wordmark vanished on it. These selectors are one step more specific, so the
   brand chrome holds whatever the load order. */
body.portal .p-header { background: var(--header-bg); color: var(--header-ink); border-bottom: 1px solid var(--header-line); }
body.portal .p-header a, body.portal .p-header button { color: var(--header-ink); }
/* Their own header centres the wordmark between the nav and the cart. `.p-bar` is a
   `auto 1fr auto` grid, so without this the mark sits hard against the burger with a wide gap
   before the points pill. */
body.portal .p-header .p-wordmark { justify-content: center; }
body.portal .p-header .p-points { border-color: color-mix(in srgb, var(--header-ink) 32%, transparent); }
body.admin .a-topbar, body.admin .admin-topbar { border-bottom-color: var(--header-line, var(--line)); }