/* Spot the Cue — shared brand layer ("Field notes").
   Loaded by every static page BEFORE its own stylesheet, so page CSS can still
   override. Holds the one typeface, the colour tokens, buttons, tags, and the
   hand-drawn annotation marks (sprite: /marks.svg). The React app mirrors the
   same values in src/index.css; src/lib/brand.test.ts keeps the two in step. */

/* ---- Typeface: Atkinson Hyperlegible Next (SIL OFL, /fonts/OFL.txt) ---- */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/atkinson-next-v7-latin-wght.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/atkinson-next-v7-latin-ext-wght.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/atkinson-next-v7-italic-latin-wght.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/atkinson-next-v7-italic-latin-ext-wght.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Arial, resized to Atkinson's advance widths and vertical metrics (measured at
   400/700), so the swap from fallback to webfont barely moves a line. */
@font-face {
  font-family: 'Atkinson Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 98.3%;
  ascent-override: 99.7%;
  descent-override: 32.6%;
  line-gap-override: 0%;
}

/* ---- Tokens ---- */
:root {
  --font-sans: 'Atkinson Hyperlegible Next', 'Atkinson Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --bg: #f4f1ea;
  --surface: #ffffff;
  --surface-2: #faf8f2;
  --surface-3: #ece8df;
  --line: #e3ded2;
  --ink: #211f1a;
  --muted: #666157;   /* 5.5:1 on --bg; matches the app (--c-muted) */
  --accent: #355c4b;
  --accent-hover: #2c4d3f;
  --accent-ink: #ffffff;
  --accent-soft: #d9eadf;
  --accent-line: #c4ddcf;
  --accent-2: #c98a3c; /* amber: decoration only, never text */
  --bad: #a8513a;
  --bad-soft: #f4e2da;
  --mk-red: #a8513a;   /* annotation ink: circles, underlines, margin notes */
  --logo-green: var(--accent);
  --logo-clay: #a8513a;

  --r-xs: 4px;
  --r-btn: 8px;
  --r-card: 12px;
  --r-pill: 999px;
  --shadow: 0 1px 0 rgba(33, 31, 26, 0.05), 0 1px 3px rgba(33, 31, 26, 0.06);
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #14160f;
  --surface: #1d2018;
  --surface-2: #23271d;
  --surface-3: #2c3026;
  --line: #383d30;
  --ink: #ece9df;
  --muted: #acac9b;    /* 7.9:1 on --bg, 7.2:1 on --surface */
  --accent: #82bd9a;
  --accent-hover: #95c9aa;
  --accent-ink: #11160f;
  --accent-soft: #233428;
  --accent-line: #364d3b;
  --accent-2: #e0ab63;
  --bad: #df9075;
  --bad-soft: #382a23;
  --mk-red: #df9075;
  --logo-green: var(--accent);
  --logo-clay: #df9075;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14160f;
    --surface: #1d2018;
    --surface-2: #23271d;
    --surface-3: #2c3026;
    --line: #383d30;
    --ink: #ece9df;
    --muted: #acac9b;
    --accent: #82bd9a;
    --accent-hover: #95c9aa;
    --accent-ink: #11160f;
    --accent-soft: #233428;
    --accent-line: #364d3b;
    --accent-2: #e0ab63;
    --bad: #df9075;
    --bad-soft: #382a23;
    --mk-red: #df9075;
    --logo-green: var(--accent);
    --logo-clay: #df9075;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

/* ---- Base type: one face everywhere ---- */
body { font-family: var(--font-sans); }
.display { font-family: inherit; }
button, input, select, textarea { font-family: inherit; }

/* ---- Buttons: flat, 8px corners, no lift, no glow, no arrows in labels ---- */
.btn, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border-radius: var(--r-btn); border: 1.5px solid var(--accent);
  background: var(--accent); color: var(--accent-ink);
  font: 600 16px/1.2 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-outline { background: transparent; color: var(--accent); }
.btn-outline:hover { background: var(--accent-soft); }
.btn:active, .btn-outline:active { transform: translateY(1px); }
.btn:focus-visible, .btn-outline:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Pills are for tags only. */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--muted);
}

/* ---- Annotation marks ----
   <svg class="mk mk-circle" aria-hidden="true" focusable="false"><use href="/marks.svg#mk-circle-a"/></svg>
   Stroke only, coloured from here (symbols carry no stroke colour). Never put a
   colour on text inside a heading to style a mark: set it on the svg's stroke. */
.mk {
  position: absolute; pointer-events: none; overflow: visible;
  fill: none; stroke: var(--mk-red); stroke-width: var(--mk-w, 2.25px);
  stroke-linecap: round; stroke-linejoin: round;
}
.mk--green { stroke: var(--accent); }
.mk--ink { stroke: var(--ink); }
.mk-target { position: relative; display: inline-block; }
/* An underline that runs a touch past both ends of its words. */
.mk-underline { left: -2%; width: 104%; bottom: -0.16em; height: 0.36em; }
/* Positioned boxes inside an .annotated figure: --x/--y/--w/--h in % of the box. */
.annotated { position: relative; }
.annotated > .mk { left: var(--x); top: var(--y); width: var(--w); height: var(--h); }

/* Handwritten-style note in the margin. Never uppercase, never a pill or box. */
.margin-note {
  font: italic 500 15px/1.25 var(--font-sans);
  color: var(--mk-red);
  transform: rotate(-2deg);
  max-width: 18ch;
}

/* Draw-on. Three ways, because a non-scaling stroke (circles, underlines) is
   dashed in screen space while pathLength is measured in user space, so a dash
   animation there finishes early or leaves a gap:
   - arrows / ticks / star scale evenly → classic stroke-dash draw (pathLength="1")
   - .mk-underline / .mk-bracket       → a left-to-right wipe
   - .mk-circle                         → a conic sweep round the loop
   Reduced motion: no animation, marks are simply there. */
@property --mk-sweep { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@media (prefers-reduced-motion: no-preference) {
  .mk-draw { stroke-dasharray: 1 1; animation: mk-draw .8s cubic-bezier(.45, 0, .25, 1) var(--mk-delay, .5s) both; }
  .mk-draw.mk-underline, .mk-draw.mk-bracket { stroke-dasharray: none; animation-name: mk-wipe; }
  .mk-draw.mk-circle {
    stroke-dasharray: none; animation-name: mk-sweep; animation-duration: .9s;
    -webkit-mask-image: conic-gradient(from -30deg, #000 var(--mk-sweep), transparent 0);
    mask-image: conic-gradient(from -30deg, #000 var(--mk-sweep), transparent 0);
  }
  @supports (animation-timeline: view()) {
    .mk-draw--scroll { animation-delay: 0s; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  }
}
@keyframes mk-draw { from { stroke-dashoffset: 1.001; } to { stroke-dashoffset: 0; } }
@keyframes mk-wipe { from { clip-path: inset(-60% 102% -60% -4%); } to { clip-path: inset(-60% -4% -60% -4%); } }
@keyframes mk-sweep { from { --mk-sweep: 0deg; } to { --mk-sweep: 360deg; } }

/* CSS-only marks for markup we don't want to restructure (generated pages): the
   same hand-drawn shapes as the sprite, used as masks on a pseudo-element painted
   in --mk-red. Masks, not gradients or borders. */
:root {
  --mk-mask-bracket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 120' preserveAspectRatio='none'%3E%3Cpath d='M4 4 C 14 4, 14 10, 14 24 L 14 50 C 14 58, 17 60, 22 60 C 17 60, 14 62, 14 70 L 14 96 C 14 110, 14 116, 4 116' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --mk-mask-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M62 8 C 30 4, 6 24, 6 50 C 6 78, 30 96, 54 94 C 80 92, 96 74, 94 48 C 92 22, 72 6, 40 10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
/* Small stroke icons from the same sprite (24px grid, currentColor). */
.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }