/* Design tokens — the single source of truth for colour across every page.
   Linked by the boards (with card.css), the feedback triage page, and the
   admin utility pages (alerts / access / context / map), which carry no card
   styles but must look identical.

   Kept separate from card.css so a page can adopt the palette WITHOUT the card
   layer. Before this split the tokens lived in card.css and map.html carried a
   hand-copied duplicate, which is how a palette drifts.

   Link ORDER matters: theme.css before card.css.

   THE APP IS LIGHT-ONLY, deliberately. A dark theme was built and then removed
   at the owner's request; `color-scheme:light` below makes that a decision the
   browser honours rather than a gap, so form controls and scrollbars stay light
   on a dark-mode phone instead of rendering half-inverted.
   If dark mode is ever wanted again, it belongs HERE as a
   `@media (prefers-color-scheme: dark)` block reassigning these tokens — not as
   per-page blocks, which is what made it a third-finished mess the first time.

   Rules of this palette, so a later edit doesn't quietly break it:
   · A token is either a FILL or an INK, never both. `--rr-red` is a fill that
     carries white text; `--rr-red-ink` is the same hue used AS text. Same for
     `--rr-oxblood` / `--rr-heading` and the status ramp. Collapsing a pair
     looks harmless and breaks contrast on one of the two uses.
   · Every value was chosen by computing the ratio, not by eye, and
     test/contrast.test.js recomputes them from this file: 4.5:1 for text,
     3:1 for UI colour.
   · --rr-muted-2 / --rr-faint are decoration only — borders and icons, never
     readable type.
*/
:root{color-scheme:light}
:root{
  --rr-red:#e60000; --rr-red-dark:#b30000; --rr-oxblood:#4a0a0a;
  /* FILL vs TEXT is the split that matters for theming, and both of the
     brand colours needed it. A fill carries white text and must stay dark
     enough for it in BOTH themes; the same hue used as text must invert.
       --rr-red      fill  — the banner, pressed tabs, the submit button
       --rr-red-ink  text  — links, kickers, error copy
       --rr-oxblood  fill  — pressed chips, focus borders
       --rr-heading  text  — group headings, chip labels, the .reg badge
     Getting this wrong is not subtle: lightening --rr-red for dark mode turned
     the team board's Vodafone banner salmon and dropped its white wordmark to
     2.9:1. Only the *-ink tokens may be lightened. */
  --rr-red-ink:#e60000; --rr-red-ink-hover:#b30000;
  --rr-heading:#4a0a0a;
  --rr-ink:#1a1214; --rr-ink-soft:#3a2b28; --rr-muted:#6d605d;
  /* --rr-muted-2 (3.21:1 on white) and --rr-faint (2.54:1 on paper) are BELOW
     WCAG AA for body text and were being used for 10-12px labels — the smallest
     type on the board, on a phone, often outdoors. They are now reserved for
     non-text decoration; anything readable uses --rr-muted (6.0:1). */
  --rr-muted-2:#9a8d8a; --rr-faint:#a89b98;
  --rr-paper:#faf8f7; --rr-paper-2:#f0eae8; --rr-canvas:#e7e2e0;
  --rr-card:#fff; --rr-hairline:rgba(74,10,10,.09); --rr-hairline-2:#ead0cc;
  --rr-sowhat-bg:#fdf2f0; --rr-chip-bg:#f0e6e4;
  /* Deep-dive section — a distinct blue so verified research reads apart
     from the red "So what". */
  --rr-deepdive:#2563a6; --rr-deepdive-bg:#eef4fb;
  /* Priority ramp — distinct hues, not shades of red. Traffic-light-ish
     so readers can decode a card's urgency across the room without
     opening the legend. */
  --rr-imp-5:#e60000;  /* Critical — Vodafone red */
  --rr-imp-4:#f27100;  /* High    — deep orange  */
  --rr-imp-3:#b8880a;  /* Medium  — amber. #e2a900 was 2.12:1 on white,
                          under the 3:1 floor for a UI component; this is
                          3.20:1 and still reads amber.                */
  --rr-imp-2:#3a7ac2;  /* Low     — cool blue    */
  --rr-imp-1:#8a807d;  /* Info    — neutral grey */
  --rr-imp-empty:rgba(74,10,10,.13);
  /* Verdict colours on the admin action row (Useful / Not relevant). Tokens
     because both were picked against a white button and go unreadable on a
     dark one. */
  --rr-ok:#2f6a45; --rr-ok-strong:#0e7a3f; --rr-notrel-ink:#8a5a54;
  --rr-toast-bg:#1a1214;   /* a fill, not the ink token — see .rr-toast */
  --rr-font:'Ubuntu',system-ui,sans-serif;
  --rr-font-mono:'Ubuntu Mono',ui-monospace,monospace;
  --rr-col-max:440px;

  /* ---- Status ramp (alerts page, save/resolve states) --------------------
     Each status has a FILL (white text sits on it — identical in both themes)
     and an INK (text on a pale wash — inverts for dark). Same fill/ink rule as
     --rr-red/--rr-red-ink; see the note above.
     The amber was #b5670a and failed BOTH jobs in light mode: 4.28:1 under
     white on the pill, 3.89:1 as text on its own wash. #9c5806 is 5.51 and
     5.01 and still reads amber. */
  --rr-ok-fill:#0e7a3f;      --rr-ok-ink:#0e7a3f;
  --rr-warn-fill:#9c5806;    --rr-warn-ink:#9c5806;
  --rr-crit-fill:#c01515;    --rr-crit-ink:#c01515;
  --rr-unknown-fill:#6f6f6f; --rr-unknown-ink:#5f5f5f;
  --rr-ok-bg:#e8f6ee;      --rr-ok-line:#b6e0c8;
  --rr-warn-bg:#fdf3e2;    --rr-warn-line:#f0d9b8;
  --rr-crit-bg:#fdecec;    --rr-crit-line:#f3c2c2;
  --rr-unknown-bg:#f1f1f1; --rr-unknown-line:#dddddd;
  --rr-line:#e3d6d3;       /* table / panel rules on the admin utility pages */
}


/* ---- Focus ---------------------------------------------------------------
   Lives HERE, not in card.css, because every page links theme.css and only
   three link card.css. While this rule sat in the card layer, ten of the
   thirteen pages had no focus ring — including login.html and account.html,
   the sign-in and password-change forms every user must operate by keyboard.

   NOT wrapped in :where(). :where() contributes zero specificity, which left
   the rule at (0,1,0) — losing to any plain selector that sets outline:none.
   Three did, so the search box on both boards and the admin form inputs had
   no visible focus state even on pages that DID load the rule. A focus ring
   has to win by default; anything that wants to opt out can say so. */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--rr-red-ink);outline-offset:2px;border-radius:4px}

/* ---- Motion --------------------------------------------------------------
   Also moved out of the card layer: a user asking for reduced motion means it
   on the login screen too. There are ~41 transition/animation declarations
   across the pages, and before this only the three card pages honoured the
   preference. A spinner that cannot spin still has to READ as busy, so this
   flattens duration rather than removing the element. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
                       transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---- Skip link -----------------------------------------------------------
   The board pages render a long card list behind a repeated header of brand,
   search, filters and account menu. A keyboard or switch user had to tab the
   whole header on every page load to reach the first card — WCAG 2.4.1 Bypass
   Blocks (Level A). Hidden until focused, then it sits over the header.
   Not display:none / visibility:hidden — both remove it from the tab order,
   which is the one thing it must stay in. */
.rr-skip{position:absolute;left:8px;top:-56px;z-index:200;
  background:var(--rr-red);color:#fff;font:700 14px/1 var(--rr-font);
  padding:12px 16px;border-radius:0 0 8px 8px;text-decoration:none;
  transition:top .12s}
.rr-skip:focus{top:0}