/* Backwerd Rhythm Shop interface foundation — Mallet Map dark treatment.
   Product illustration (staff, bars, rails, cords, materials) remains local.

   Mallet Map is a dark product, not a light one with a dark mode, so it takes
   assets/brand/design-tokens-dark.css — the generated dark-only build of the
   shop's token file — rather than the canonical light-first one, whose values
   sit behind prefers-color-scheme and would hand this app a white page on a
   reader whose OS is set to light.

   Until 2026-09-04 this file held its own copy of those values under a
   parallel --brs-* naming system, and the copy had drifted: --line was
   #4b4841 against the token file's #3a3733, and --muted #c4b9aa against
   #bdb6ad. Near misses of that size are exactly what the shared file exists to
   prevent. The --brs-* names are kept, because eighty-four rules below read
   them, but every one now resolves to a token instead of a hex.

   The token file is linked from each page ahead of this one rather than pulled
   in from inside this stylesheet: a CSS-level import serialises the two
   fetches, and this app's tests forbid one outright as the local-only
   boundary — a rule worth keeping strict rather than loosening. */

/* The brand faces, self-hosted from ./assets/fonts. This file named both of
   them and shipped neither, so every visitor got the Arial Narrow fallback.
   Licensed OFL 1.1 — see the OFL texts beside the files. */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("./assets/fonts/big-shoulders-display-800-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/barlow-condensed-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("./assets/fonts/barlow-condensed-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("./assets/fonts/barlow-condensed-700-latin.woff2") format("woff2"); }

:root {
  --brs-ink: var(--warm-white);        /* Ink, in the dark build */
  --brs-ink-lifted: var(--white);      /* Ink Lifted */
  --brs-ink-raised: var(--tan);        /* Ink Raised */
  --brs-warm-white: var(--ink);        /* the type colour on that ground */
  --brs-tan: var(--stone);             /* --tan is a surface on dark, so the
                                          hue role goes to the one that keeps
                                          its identity across the remap */
  --brs-brick: var(--brick);           /* Terra Cotta, on dark */
  --brs-forest: var(--forest);
  --brs-forest-light: var(--forest);
  --brs-terra: var(--terra);
  --brs-focus: var(--forest);          /* the token file's own focus ring */
  /* Semantic, deliberately not a brand hue: an incorrect answer must never
     read as the accent. 7.12:1 on the ground. */
  --brs-error: #ff7b75;
  --brs-space-1: 4px;
  --brs-space-2: 8px;
  --brs-space-3: 12px;
  --brs-space-4: 16px;
  --brs-space-5: 24px;
  --brs-space-6: 32px;
  --brs-space-7: 48px;
  --brs-radius-sm: 8px;
  --brs-radius-md: 12px;
  --brs-radius-lg: 20px;
  --brs-shadow-panel: 0 14px 36px rgba(0, 0, 0, .28);
  --brs-display: var(--display);
  --brs-body: var(--body);

  /* Compatibility aliases used by the app's product-local styles. */
  --bg: var(--brs-ink);
  --panel: var(--brs-ink-lifted);
  --panel-2: var(--brs-ink-raised);
  --line: var(--tan-line);
  --text: var(--brs-warm-white);
  --muted: var(--ink-soft);
  --accent: var(--brs-brick);
  --accent-soft: color-mix(in srgb, var(--brick) 24%, var(--warm-white));
  --on-accent: var(--warm-white);
  --good: var(--brs-forest-light);
  --good-soft: color-mix(in srgb, var(--forest) 22%, var(--warm-white));
  --bad: var(--brs-error);
  --bad-soft: color-mix(in srgb, var(--brs-error) 26%, var(--warm-white));
  --shadow: var(--brs-shadow-panel);
  --radius: var(--brs-radius-lg);
}

html { background: var(--brs-ink); }
body {
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(210, 180, 140, .10), transparent 62%),
    radial-gradient(800px 440px at 95% 0%, rgba(226, 114, 91, .08), transparent 58%),
    var(--brs-ink) !important;
  color: var(--brs-warm-white);
  font-family: var(--brs-body) !important;
  font-size: clamp(16px, 1.2vw, 18px);
  letter-spacing: .01em;
}

h1, h2, h3, .q-prompt, .rc-score {
  font-family: var(--brs-display);
  font-weight: 800;
  letter-spacing: .025em;
}

header.app-head,
body > .app > header,
main.app > header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--brs-space-5);
  padding: var(--brs-space-3) 0 var(--brs-space-4);
}

header.app-head h1,
main.app > header h1 {
  font-family: var(--brs-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
}

header.app-head .logo,
main.app > header .logo {
  border: 1px solid rgba(210, 180, 140, .28);
  box-shadow: none;
}

header.app-head p,
.lede { font-size: clamp(15px, 1.5vw, 18px) !important; }

.card,
.browse,
.assignment-card,
.link-error,
.pool-note,
.result-card {
  border-color: var(--line) !important;
  border-radius: var(--brs-radius-lg) !important;
  box-shadow: var(--brs-shadow-panel) !important;
}

.card,
.browse { background: var(--brs-ink-lifted) !important; }

.card { padding: clamp(16px, 2vw, 24px) !important; margin-bottom: var(--brs-space-4); }

.card-title,
.field > label,
.field > span.lbl,
.search label,
.eyebrow,
.q-progress {
  color: var(--brs-tan) !important;
  font-family: var(--brs-body);
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

.mode-tabs { gap: var(--brs-space-2); margin-bottom: var(--brs-space-4); }
.mode-tabs button,
.seg,
select,
.btn,
.foot-btn,
.search input,
.ticket-reviewer textarea,
.assignment-builder input,
.assignment-builder textarea {
  border-color: var(--line) !important;
  border-radius: var(--brs-radius-md) !important;
  font-family: var(--brs-body);
}

.mode-tabs button,
.seg,
select,
.btn,
.foot-btn { background: var(--brs-ink-raised) !important; }

.mode-tabs button[aria-pressed="true"],
.seg button[aria-pressed="true"],
.filters button[aria-pressed="true"] {
  background: var(--brs-brick) !important;
  border-color: var(--brs-brick) !important;
  color: var(--brs-warm-white) !important;
}

.btn.primary {
  background: var(--brs-brick) !important;
  border-color: var(--brs-brick) !important;
  color: var(--brs-warm-white) !important;
}

.btn:hover,
.mode-tabs button:hover,
.seg button:hover,
.foot-btn:hover { border-color: var(--brs-tan) !important; }

.btn:focus-visible,
.seg button:focus-visible,
.mode-tabs button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
a:focus-visible,
.bar:focus-visible {
  outline: 3px solid var(--brs-focus) !important;
  outline-offset: 3px !important;
}

section[aria-label="Settings"] { border-top: 3px solid var(--brs-tan) !important; }
#questionCard {
  background: linear-gradient(145deg, var(--brs-ink-raised), var(--brs-ink-lifted)) !important;
  border-top: 4px solid var(--brs-terra) !important;
}
#kbCard { border-top: 3px solid var(--brs-tan) !important; }
.q-prompt { font-size: clamp(24px, 3vw, 36px) !important; line-height: 1.05; }
.q-sub { font-size: clamp(15px, 1.4vw, 18px) !important; }
.staff-box { background: var(--brs-ink-raised) !important; border-color: #5a554d !important; padding: var(--brs-space-3) var(--brs-space-4) !important; }

.feedback.good { border-color: var(--brs-forest-light) !important; }
.feedback.bad, .link-error { border-color: var(--brs-error) !important; }
.assignment-card, .pool-note { border-left-color: var(--brs-tan) !important; }
.assignment-card { background: rgba(210, 180, 140, .10) !important; }
.pool-note { background: rgba(210, 180, 140, .08) !important; }

.bar.midc { box-shadow: inset 0 0 0 2px var(--brs-terra), 0 0 12px rgba(226, 114, 91, .45) !important; }
.bar .midc-dot { background: var(--brs-terra) !important; }
.bar.selected,
.bar.target { border-color: var(--brs-brick) !important; box-shadow: 0 0 0 3px rgba(139, 58, 58, .55), 0 3px 8px rgba(0,0,0,.45) !important; }

.kb-foot { gap: var(--brs-space-2) var(--brs-space-3) !important; }
.kb-hint, footer, .count, .card p { color: var(--muted) !important; }

/* Dedicated assignment catalog */
.browse { top: var(--brs-space-2) !important; }
.grid { gap: var(--brs-space-4) !important; }
.grid .card { border-top: 3px solid var(--brs-tan) !important; gap: var(--brs-space-3) !important; }
.grid .card h2 { font-size: clamp(22px, 2.3vw, 30px) !important; line-height: 1; }
.sequence-title {
  color: var(--brs-warm-white);
  font-family: var(--brs-display);
  font-size: clamp(26px, 3vw, 38px) !important;
  text-transform: uppercase;
  border-color: var(--brs-tan) !important;
}
.tag { border-color: var(--brs-tan) !important; color: var(--brs-tan) !important; }
.eyebrow, summary { color: var(--brs-terra) !important; }
.search input, pre, .ticket-reviewer textarea { background: var(--brs-ink) !important; color: var(--brs-warm-white) !important; }

@media (max-width: 680px) {
  body { padding: var(--brs-space-3) !important; }
  header.app-head .head-actions,
  .header-actions { width: 100%; }
  header.app-head .head-actions .btn,
  .header-actions .btn { flex: 1; }
  .card { padding: var(--brs-space-4) !important; }
  .controls { gap: var(--brs-space-3) !important; }
  .field { width: 100%; }
  .seg { width: 100%; }
  .seg button { flex: 1 1 auto; }
  .question-wrap { align-items: stretch !important; }
  .staff-box { margin-inline: auto; }
}

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