/* Wattlas — the tokens and the two behaviours every page shares.
 *
 * styles.css (the view pages) and redesign.css (home, hubs, standard pages) each used to
 * carry a pasted copy of this file's three blocks. The copies drifted: styles.css kept
 * focus rings for .vq-q and .vopen for months after those classes stopped existing, while
 * the live .vq had none there. Both sheets now @import this one, so a token or a focus
 * target is changed once. No build step: @import is plain CSS.
 *
 * nav.js still injects the ADDITIVE chrome tokens (section accents --s-*, --serif), because
 * it has to work on a page that loads neither stylesheet. */

:root {
  --bg:#faf9f5; --surface:#ffffff; --surface-2:#f3f1ea; --surface-3:#ece9df;
  --text:#2b2a27; --muted:#5f5e5a; --hint:#6c6b66;
  --border:rgba(43,42,39,.13); --border-2:rgba(43,42,39,.08);
  --blue:#185fa5; --green:#3b6d11; --amber:#b8860b; --red:#a32d2d;
  /* --amber is a FILL/border colour: 3.09:1 on --bg, too light for text.
     Small text that needs to read amber uses --amber-text (5.05:1). */
  --amber-text:#8a6508;
  /* The primary button's hover: one step past ink. */
  --ink-strong:#000;
  --radius:14px; --radius-sm:9px;

  /* ---- Small type scale (#404) ----------------------------------------------
     Four steps below body size, and nothing between them: label (uppercase eyebrows,
     chip-group and tab labels), caption (source lines, notes, chips), UI-small (links,
     controls, one-liners) and emphasis (a question or a lede inside a component).
     14px is the card title and nothing else. Headline, lede and figure sizes are
     clamp()s and stay where they are set. */
  --fs-label:11px; --fs-caption:12px; --fs-ui:13.5px; --fs-emph:15px; --fs-card-title:14px;

  /* ---- Reading measure ------------------------------------------------------
     Text fills its container: no cap, so a line breaks only at the real edge of the
     box it sits in. This is a deliberate call by the owner over the classic 65-75
     character measure — on a wide monitor these lines run long, and that is the
     accepted trade for using the whole column.

     Kept as tokens rather than deleted declarations so a ceiling is one edit away:
     set --measure-text to a length (60rem is about 100 characters at body size) and
     every block that reads or scans picks it up at once. */
  --measure-lede:none;
  --measure-text:none;
}

/* ---- Focus ring for the controls a visitor actually operates ----------------
   nav.js states this once for every control it injects, with the reason: browser
   defaults vary and several are invisible on a warm paper ground. That argument
   applies at least as much to the in-page controls. Same ring, so a keyboard user
   sees one treatment everywhere. */
.seg button:focus-visible,
a.chip:focus-visible,
.vnav a:focus-visible,
.wx-zone-chip:focus-visible,
.btn:focus-visible,
.bar select:focus-visible,
select:focus-visible,
input[type="date"]:focus-visible,
.jumpnav a:focus-visible,
.full-view:focus-visible,
.vq:focus-visible,
.vend:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Reduced motion ---------------------------------------------------------
   Not a blanket `animation: 0.01ms` kill. That switch removes the feedback a
   reader needs along with the movement they asked to be spared: a frozen spinner
   reads as a hang, and a skeleton that never moves reads as a broken layout.

   Three rules, in order:
   1. Anything that MOVES the page or an element resolves instantly - hover lifts,
      the drawer slide, smooth scrolling.
   2. Anything that reports STATE keeps working. The shimmer gives up its sweep
      and becomes a plain tint (the placeholder still says "not here yet"); the
      spinner keeps turning, slowly, because that is what says "still working".
   3. Nothing that carries information is removed. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  /* Keep the shadow that says "this is hoverable", drop the travel. */
  .card.hoverable:hover, .block:hover, .scard:hover, .ro-card:hover { transform: none !important; }
  .skeleton { animation: none; background: var(--surface-2); }
  .loading::before { animation-duration: 2.4s; }
}