/* ===========================================================================
   STREET CULTURE — the house theme, as a real theme file (2026-09-20).

   Until tonight this theme had no file: it was the plain :root tokens in
   chrome.css, the ABSENCE of a data-palette, "the base". The 2026-09-20 theme
   review (docs/theme-review-street-culture-2026-09-20.md) put it plainly — the
   default everyone sees was the least designed of the eight — and the
   maintainer decided three things the same night:
     6. "It must be a real theme file. It just happens to be the default theme."
     7. The brand's TRUE colours may be painted at large scale — "as long as it
        looks good".
     8. Keep the typeface: Outfit for headings, Karla for text.
   chrome.css keeps its plain :root tokens as the FALLBACK an unthemed page
   still needs (a page before its script runs, an error page); this file is
   what Street Culture looks like, selected like any other theme and linked
   from head.ejs like any other.

   THE IDEA: PAPER AND INK, with the brand stamped on it.
   The page is warm cream paper — the ground X11 measured and justified — and
   now it says so: a sub-2% fibre tooth, printed edges on cards and tables (a
   hairline and a tight low shadow, never a floating one), pills that sit on
   the paper like stamps. The sidebar is the ink: warm near-black in the same
   family as the paper, not the neutral graphite it borrowed from other apps,
   with one brand-teal hairline at its outer edge so the shell has an edge in
   dark mode too (SC3), and the app's name in brand teal under the logo — the
   one deliberate brand appearance at the top of the column (SC2).
   The brand's three colours — teal #00b5d0, amber #feba12, salmon #f26c52 —
   were never painted in light mode before tonight (SC1): six derived teals,
   none of them the logo's. They are painted here where contrast does not
   govern: the dashboard bars (the hairline edge satisfies 1.4.11, not the
   fill), the active nav pill, the primary button, and the attention tiles —
   all with INK type on them, because ink on brand teal is 8.3:1 where white on
   it is 2.6:1. Running text keeps X11's darkened link teal, which was measured
   and is right; that decision is about text, this file is about surfaces.

   THE RAMP. Every teal, amber and salmon below is a step on one named scale,
   so a seventh teal cannot be invented by accident (SC1.1). The steps are the
   tint/shade values that were already scattered through chrome.css, now with
   names; #00838f (the fourth teal, in neither the brand nor the tokens) and
   #5f5648 (a stone that was not the brand grey) are gone.

   Structure lives in chrome.css and the apps' own sheets; this file is colour
   and material only (test/structure.test.js). No !important. The voice stays
   `chime`; there is no motion — this is the theme people use for six hours.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   LIGHT — paper in daylight. The base for this palette; dark overrides below.
   --------------------------------------------------------------------------- */
:root[data-palette="scp"] {
  /* The edge of a form field: Pico's default was 1.39:1 against this page; 3.3:1 at least (WCAG 1.4.11; the UI audit of 2026-11-05, backlog S232). */
  --pico-form-element-border-color: #838893;
  /* AND A FOCUSED FIELD IN THE TEAL, as it was until 2026-11-02 (the same audit). Pico draws a
     focused field's edge and ring in --pico-form-element-focus-color, which it defaults to
     --pico-primary-border; S101i made that a grey overlay for the filled button's edge, so a
     focused field here went grey — every other theme names its own. Beside the darker resting
     edge above, grey focus was lighter than rest. The link teal, 4.5:1 and over in both modes. */
  --pico-form-element-focus-color: var(--pico-primary);
  /* THE RAMP — the SCP palette (logo_and_colours/primary_colours.png) and its
     tint/shade scales, named once. 500 is the brand value. */
  --scp-teal-100: #e6f8fa; --scp-teal-200: #b8e9ee; --scp-teal-300: #80dae8; --scp-teal-400: #4dcbde;
  --scp-teal-500: #00b5d0; --scp-teal-600: #0091a6; --scp-teal-700: #007f92; --scp-teal-800: #006d7d; --scp-teal-900: #005b68;
  --scp-amber-100: #fff3d6; --scp-amber-200: #ffe3a0; --scp-amber-300: #ffd166;
  --scp-amber-500: #feba12; --scp-amber-700: #b2820d; --scp-amber-800: #7f5d09; --scp-amber-900: #664a07;
  --scp-salmon-100: #fce2dc; --scp-salmon-200: #f9b6a9; --scp-salmon-300: #f58975;
  --scp-salmon-500: #f26c52; --scp-salmon-700: #c25642; --scp-salmon-800: #914131; --scp-salmon-900: #7a3527;
  --scp-grey: #58585a;
  --scp-ink: #16130f;       /* the ink: warm near-black, the paper's own shadow */
  --scp-ink-2: #221f1c;     /* the sidebar */
  --scp-ink-3: #322e2a;     /* the sidebar's hover */
  --scp-paper: #fbf8f2;     /* X11's measured ground, kept */
  --scp-card: #fffdf8;      /* a card is a whiter sheet laid on the paper */

  /* ---- Type stays: Outfit + Karla (decision 8). Nothing to declare. ---- */

  /* ---- Pico: the page, links, the primary and secondary controls ---- */
  --pico-background-color: var(--scp-paper);
  --pico-card-background-color: var(--scp-card);
  /* THE RECESSED BAND — sticky table headers, card section headers, wells.
     Declared 2026-09-21 (backlog S101) for the same reason as
     --pico-muted-color above: Street Culture was the only theme file that left
     it to Pico, and Pico's is mixed for Pico's own neutral ground rather than
     this palette's warm one. The other seven all name a surface-2 of their own
     (blacktop --bt-surface-2, tonal --m3-surface-container-high, and so on);
     this theme had paper and card and no third step, so here it is.
     Warm, a step BELOW the card rather than above it — on paper, a header band
     reads as the sheet showing through, not as something lifted off it. */
  --scp-band: #f2ede3;
  --pico-card-sectioning-background-color: var(--scp-band);
  --pico-card-border-color: rgba(22, 19, 15, 0.14);
  --pico-card-box-shadow: 0 1px 0 rgba(22, 19, 15, 0.05);
  --pico-primary: var(--scp-teal-800);                 /* links — X11's measured value, unchanged */
  --pico-primary-underline: rgba(0, 109, 125, 0.45);
  --pico-primary-hover: var(--scp-teal-900);
  /* THE PRIMARY BUTTON WEARS THE BRAND: teal 500 with ink type (8.3:1). */
  --pico-primary-background: var(--scp-teal-500);
  --pico-primary-hover-background: var(--scp-teal-400);
  --pico-primary-inverse: var(--scp-ink);
  --pico-primary-focus: rgba(0, 181, 208, 0.5);
  --pico-secondary: var(--scp-grey);
  --pico-secondary-background: var(--scp-grey);
  --pico-secondary-hover: #464648;
  --pico-secondary-hover-background: #464648;
  --pico-secondary-focus: rgba(88, 88, 90, 0.25);
  --pico-secondary-inverse: #fff;
  /* MUTED TEXT BY DAY — the same colour that was already rendering, now
     DECLARED rather than inherited (2026-09-22, found while fixing S101h).
     The dark block below has carried this token since 2026-09-21 with a note
     ending "Light is left alone deliberately"; that sentence is retired here,
     because the guard that was supposed to hold the rule
     (test/themeTokenContrast.test.js, "no theme leaves --pico-muted-color to
     Pico") could not see the light variant at all — its variant classifier
     filed every theme's media-query dark block as light, so it checked dark
     twice. With the classifier fixed, this was the one thing in eight theme
     files that the corrected sweep found.
     #646b79 IS Pico's own light default, read out of the renderer rather than
     copied from the library, so NOTHING CHANGES ON SCREEN. What changes is
     that it no longer depends on Pico's value staying put across an upgrade,
     which is the whole point of the rule. Measured on this theme's real
     surfaces: 5.05:1 on the paper (#fbf8f2) and 5.27:1 on the card (#fffdf8),
     both clear of AA — 5.27 is the figure the night block's note already
     quoted, so the value is unchanged as well as the pixels. Re-pitching it warm, the way the night value is, is a
     taste call nobody has made — it belongs to whoever is asked for it. */
  --pico-muted-color: #646b79;
  --pico-mark-background-color: var(--scp-amber-200);
  --pico-mark-color: #4c3805;

  /* ---- The ink column ---- */
  --sidebar-bg: var(--scp-ink-2);
  --sidebar-ink: #f3efe8;
  --sidebar-muted: #9a938b;
  --sidebar-link: #d9d3ca;
  --sidebar-hover-bg: var(--scp-ink-3);
  /* THE ACTIVE PILL WEARS THE BRAND: teal 500 with ink type. */
  --sidebar-active-bg: var(--scp-teal-500);
  --sidebar-link-active: var(--scp-ink);
  --sidebar-link-hover: #ffffff;
  --scroll-shadow-color: rgba(0, 0, 0, 0.32);

  /* ---- Semantic tiers: X11's measured values, expressed on the ramp ---- */
  --sem-good-bg: var(--scp-teal-100);
  --sem-good-fg: var(--scp-teal-900);
  --sem-good-border: var(--scp-teal-200);
  --sem-caution-bg: #ffeab8;
  --sem-caution-fg: var(--scp-amber-900);
  --sem-caution-border: #e8c777;
  --sem-bad-bg: var(--scp-salmon-100);
  --sem-bad-fg: var(--scp-salmon-900);
  --sem-bad-border: var(--scp-salmon-200);
  --sem-alarm-bg: var(--scp-salmon-200);
  --sem-alarm-fg: #612b21;
  /* The three quiet tiers, warmed a step toward the paper so a grey pill sits
     on it rather than floating cool above it; the inks are the measured ones. */
  --sem-neutral-bg: #e4dfd6;
  --sem-neutral-fg: #353130;
  --sem-inactive-bg: #efebe4;
  --sem-inactive-fg: #464648;
  --sem-archived-bg: #d3cec5;
  --sem-archived-fg: #232324;
  --sem-chip-fill: var(--scp-teal-700);     /* was #00838f, the teal that was on no scale */
  --sem-chip-ink: #ffffff;
  --sem-bad-accent: #d4573f;
  --zebra-stripe: rgba(120, 100, 70, 0.07);

  /* ---- THE DASHBOARD BARS WEAR THE BRAND (decision 7). The hairline edge
     token below is what satisfies 1.4.11 for a large fill; the fill itself is
     free to be the logo's colour, and now it is. ---- */
  --chart-bar-available: var(--scp-teal-500);
  --chart-bar-checked_out: var(--scp-amber-500);
  --chart-bar-in_maintenance: var(--scp-salmon-500);
  --chart-bar-not_working: #8a8a8c;
  --chart-bar-lost: var(--scp-salmon-700);
  --chart-bar-disposed: var(--scp-grey);
  --chart-bar-donated: #353536;
  --chart-bar-category: var(--scp-teal-500);
  --chart-bar-edge: rgba(22, 19, 15, 0.55);
}

/* ---------------------------------------------------------------------------
   DARK — ink at night. Twice, as every theme does: the explicit toggle, and the
   browser's own preference when nobody has chosen. Every token the light block
   sets is set again here, because this file loads AFTER chrome.css's dark
   block and would otherwise win with daylight values.
   --------------------------------------------------------------------------- */
:root[data-palette="scp"][data-theme="dark"] {
  /* The edge of a form field: Pico's default was 1.37:1 against this page; 3.3:1 at least (WCAG 1.4.11; the UI audit of 2026-11-05, backlog S232). */
  --pico-form-element-border-color: #656c78;
  --scp-paper: #1a1714;
  --scp-card: #211d19;
  --pico-background-color: var(--scp-paper);
  --pico-card-background-color: var(--scp-card);
  /* The band goes the other way at night — a step ABOVE the card, since a
     recess cannot be darker than a ground that is already near-black. Teal-400
     reads 7.89:1 on it and the muted ink 5.00:1. */
  --scp-band: #2a251f;
  --pico-card-sectioning-background-color: var(--scp-band);
  --pico-card-border-color: rgba(255, 255, 255, 0.09);
  --pico-card-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  --pico-primary: var(--scp-teal-400);
  --pico-primary-underline: rgba(77, 203, 222, 0.5);
  --pico-primary-hover: var(--scp-teal-300);
  --pico-primary-background: var(--scp-teal-500);
  --pico-primary-hover-background: var(--scp-teal-400);
  --pico-primary-inverse: var(--scp-ink);
  --pico-primary-focus: rgba(77, 203, 222, 0.375);
  --pico-secondary: #acacad;
  --pico-secondary-background: var(--scp-grey);
  --pico-secondary-hover: #cdcdce;
  --pico-secondary-hover-background: #69696b;
  --pico-secondary-focus: rgba(172, 172, 173, 0.25);
  --pico-secondary-inverse: #fff;
  --pico-mark-background-color: var(--scp-amber-800);
  --pico-mark-color: #fff8e7;
  /* MUTED TEXT, declared because inheriting it was a real AA failure
     (2026-09-21, backlog S101). Street Culture was the ONLY one of the eight
     theme files that never set --pico-muted-color (blacktop/cyberpunk/
     electricity/halloween/phosphor 1 each, tonal 3, glass 4, scp 0), so at
     night it fell through to Pico's own dark default #7b8495 — which is tuned
     for Pico's COOL #13171f ground, not this theme's warm one. Measured on the
     card: 4.45:1, five hundredths under AA, on every chart key label, legend
     share, column total, field hint and the whole Appearance panel. Almost
     certainly a regression from 2026-09-20, when Street Culture stopped being
     "the absence of a palette" and became a real file — the UX audit that
     measured "AA in all 7 combinations" ran before that.
     #9a938b is not a new colour: it is this block's own --sidebar-muted, warm
     like the rest of the palette. 5.52:1 on the card, 5.88:1 on the paper.
     THE SENTENCE THAT USED TO END THIS NOTE — "Light is left alone
     deliberately — it measures 5.27:1 and passes" — was retired 2026-09-22.
     It passed, and it was still Pico's colour rather than this theme's, which
     is the thing the rule is about; the light block now declares it. */
  --pico-muted-color: #9a938b;
  /* The sidebar RECEDES at night — darker than the page, not lighter (SC3):
     the ink is the deeper black, and the teal hairline below draws the edge. */
  --sidebar-bg: #100e0c;
  --sidebar-ink: #f3efe8;
  --sidebar-muted: #9a938b;
  --sidebar-link: #d9d3ca;
  --sidebar-hover-bg: var(--scp-ink-2);
  --sidebar-active-bg: var(--scp-teal-500);
  --sidebar-link-active: var(--scp-ink);
  --sidebar-link-hover: #ffffff;
  --scroll-shadow-color: rgba(255, 255, 255, 0.16);
  --sem-good-bg: #00363e;
  --sem-good-fg: #99e1ec;
  --sem-good-border: var(--scp-teal-900);
  --sem-caution-bg: #4c3805;
  --sem-caution-fg: var(--scp-amber-200);
  --sem-caution-border: #6d5209;
  --sem-bad-bg: #492019;
  --sem-bad-fg: var(--scp-salmon-200);
  --sem-bad-border: #6b2e22;
  --sem-alarm-bg: #612b21;
  --sem-alarm-fg: #fac4ba;
  --sem-neutral-bg: #2c2825;
  --sem-neutral-fg: #b3aea6;
  --sem-inactive-bg: #37322e;
  --sem-inactive-fg: #d4cfc7;
  --sem-archived-bg: #1c1917;
  --sem-archived-fg: #9b9690;
  --sem-chip-fill: var(--scp-teal-700);
  --sem-chip-ink: #ffffff;
  --sem-bad-accent: #d4573f;
  --zebra-stripe: rgba(255, 255, 255, 0.045);
  --chart-bar-available: var(--scp-teal-500);
  --chart-bar-checked_out: var(--scp-amber-500);
  --chart-bar-in_maintenance: var(--scp-salmon-500);
  --chart-bar-not_working: #bcbcbd;
  --chart-bar-lost: var(--scp-salmon-300);
  --chart-bar-disposed: #cdcdce;
  --chart-bar-donated: #eeeeef;
  --chart-bar-category: var(--scp-teal-400);
  --chart-bar-edge: rgba(255, 255, 255, 0.2);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="scp"]:not([data-theme="light"]) {
    /* The edge of a form field: Pico's default was 1.37:1 against this page; 3.3:1 at least (WCAG 1.4.11; the UI audit of 2026-11-05, backlog S232). */
    --pico-form-element-border-color: #656c78;
    --scp-paper: #1a1714;
    --scp-card: #211d19;
    --pico-background-color: var(--scp-paper);
    --pico-card-background-color: var(--scp-card);
    /* The band goes the other way at night — a step ABOVE the card, since a
       recess cannot be darker than a ground that is already near-black. Teal-400
       reads 7.89:1 on it and the muted ink 5.00:1. */
    --scp-band: #2a251f;
    --pico-card-sectioning-background-color: var(--scp-band);
    --pico-card-border-color: rgba(255, 255, 255, 0.09);
    --pico-card-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    --pico-primary: var(--scp-teal-400);
    --pico-primary-underline: rgba(77, 203, 222, 0.5);
    --pico-primary-hover: var(--scp-teal-300);
    --pico-primary-background: var(--scp-teal-500);
    --pico-primary-hover-background: var(--scp-teal-400);
    --pico-primary-inverse: var(--scp-ink);
    --pico-primary-focus: rgba(77, 203, 222, 0.375);
    --pico-secondary: #acacad;
    --pico-secondary-background: var(--scp-grey);
    --pico-secondary-hover: #cdcdce;
    --pico-secondary-hover-background: #69696b;
    --pico-secondary-focus: rgba(172, 172, 173, 0.25);
    --pico-secondary-inverse: #fff;
    --pico-mark-background-color: var(--scp-amber-800);
    --pico-mark-color: #fff8e7;
    /* MUTED TEXT, declared because inheriting it was a real AA failure
       (2026-09-21, backlog S101). Street Culture was the ONLY one of the eight
       theme files that never set --pico-muted-color (blacktop/cyberpunk/
       electricity/halloween/phosphor 1 each, tonal 3, glass 4, scp 0), so at
       night it fell through to Pico's own dark default #7b8495 — which is tuned
       for Pico's COOL #13171f ground, not this theme's warm one. Measured on the
       card: 4.45:1, five hundredths under AA, on every chart key label, legend
       share, column total, field hint and the whole Appearance panel. Almost
       certainly a regression from 2026-09-20, when Street Culture stopped being
       "the absence of a palette" and became a real file — the UX audit that
       measured "AA in all 7 combinations" ran before that.
       #9a938b is not a new colour: it is this block's own --sidebar-muted, warm
       like the rest of the palette. 5.52:1 on the card, 5.88:1 on the paper.
       THE SENTENCE THAT USED TO END THIS NOTE — "Light is left alone
       deliberately — it measures 5.27:1 and passes" — was retired 2026-09-22;
       the light block declares the token now, for the reason written there. */
    --pico-muted-color: #9a938b;
    --sidebar-bg: #100e0c;
    --sidebar-ink: #f3efe8;
    --sidebar-muted: #9a938b;
    --sidebar-link: #d9d3ca;
    --sidebar-hover-bg: var(--scp-ink-2);
    --sidebar-active-bg: var(--scp-teal-500);
    --sidebar-link-active: var(--scp-ink);
    --sidebar-link-hover: #ffffff;
    --scroll-shadow-color: rgba(255, 255, 255, 0.16);
    --sem-good-bg: #00363e;
    --sem-good-fg: #99e1ec;
    --sem-good-border: var(--scp-teal-900);
    --sem-caution-bg: #4c3805;
    --sem-caution-fg: var(--scp-amber-200);
    --sem-caution-border: #6d5209;
    --sem-bad-bg: #492019;
    --sem-bad-fg: var(--scp-salmon-200);
    --sem-bad-border: #6b2e22;
    --sem-alarm-bg: #612b21;
    --sem-alarm-fg: #fac4ba;
    --sem-neutral-bg: #2c2825;
    --sem-neutral-fg: #b3aea6;
    --sem-inactive-bg: #37322e;
    --sem-inactive-fg: #d4cfc7;
    --sem-archived-bg: #1c1917;
    --sem-archived-fg: #9b9690;
    --sem-chip-fill: var(--scp-teal-700);
    --sem-chip-ink: #ffffff;
    --sem-bad-accent: #d4573f;
    --zebra-stripe: rgba(255, 255, 255, 0.045);
    --chart-bar-available: var(--scp-teal-500);
    --chart-bar-checked_out: var(--scp-amber-500);
    --chart-bar-in_maintenance: var(--scp-salmon-500);
    --chart-bar-not_working: #bcbcbd;
    --chart-bar-lost: var(--scp-salmon-300);
    --chart-bar-disposed: #cdcdce;
    --chart-bar-donated: #eeeeef;
    --chart-bar-category: var(--scp-teal-400);
    --chart-bar-edge: rgba(255, 255, 255, 0.2);
  }
}

/* ---------------------------------------------------------------------------
   MATERIAL — the paper's tooth, the printed edge, the stamped tiles.
   All colour, image and shadow: nothing here moves and nothing sits in the
   reading path (the tooth is under 2% and stops at the table's own ground).
   --------------------------------------------------------------------------- */

/* The fibre tooth: two faint crossed hatchings, fixed to the viewport so it
   never scrolls with the content and costs one paint. Under 2% alpha — felt
   as paper, never seen as a pattern. */
/* On <html>, not <body>: a short page's body ends above the fold and the
   paper must not stop there (seen on the Hub home at 1440×900 — the tooth
   ended at the footer). The body is made transparent so the sheet shows
   through it, the same way every dark theme already leaves the body. */
:root[data-palette="scp"] {
  background-color: var(--pico-background-color);
  background-image:
    repeating-linear-gradient(45deg, rgba(22, 19, 15, 0.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(22, 19, 15, 0.012) 0 1px, transparent 1px 5px);
  background-attachment: fixed;
}
:root[data-palette="scp"] body {
  background-color: transparent;
}
:root[data-palette="scp"][data-theme="dark"] {
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.009) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.006) 0 1px, transparent 1px 5px);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="scp"]:not([data-theme="light"]) {
    background-image:
      repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.009) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.006) 0 1px, transparent 1px 5px);
  }
}

/* The ink column's one brand mark: a teal hairline at its outer edge (the
   shell's edge in dark mode, SC3) and the app's name in brand teal under the
   logo (SC2). Ink on ink otherwise. */
/* A focused field's own edge in the same teal as its ring (the UI audit of 2026-11-05, backlog
   S232): Pico draws it in --pico-primary-border, which is the filled button's grey edge here (S101i). */
:root[data-palette="scp"] :is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus {
  --pico-border-color: var(--pico-form-element-focus-color);
}
:root[data-palette="scp"] .sidebar {
  box-shadow: inset -1px 0 0 rgba(0, 181, 208, 0.6);
}
:root[data-palette="scp"] .sidebar-brand-subtitle {
  color: var(--scp-teal-500);
}

/* Printed edges: a card or table sits ON the paper — a hairline and a tight
   low shadow, not a floating elevation. The stat tiles below are the one
   exception, because they are stamps, not sheets. */
:root[data-palette="scp"] .table-wrap,
:root[data-palette="scp"] article,
:root[data-palette="scp"] .home-card,
:root[data-palette="scp"] .stat-tile.stat-tile-quiet {
  box-shadow: 0 0 0 1px var(--pico-card-border-color), 0 1px 0 rgba(22, 19, 15, 0.06);
}

/* THE ATTENTION TILES WEAR THE BRAND — poster fills with INK type. Ink on
   teal 500 is 8.3:1, on amber 500 11.4:1, on salmon 500 6.9:1; the grey tile
   keeps white type (5.8:1). A thin inner line keeps each stamp's edge crisp
   on the paper. */
:root[data-palette="scp"] .stat-tile-teal   { background: var(--scp-teal-500);   box-shadow: inset 0 0 0 1px rgba(22, 19, 15, 0.18); }
:root[data-palette="scp"] .stat-tile-amber  { background: var(--scp-amber-500);  box-shadow: inset 0 0 0 1px rgba(22, 19, 15, 0.18); }
:root[data-palette="scp"] .stat-tile-salmon { background: var(--scp-salmon-500); box-shadow: inset 0 0 0 1px rgba(22, 19, 15, 0.18); }
:root[data-palette="scp"] .stat-tile-grey   { background: var(--scp-grey);       box-shadow: inset 0 0 0 1px rgba(22, 19, 15, 0.18); }
:root[data-palette="scp"] .stat-tile-teal .stat-tile-value,   :root[data-palette="scp"] .stat-tile-teal .stat-tile-label,   :root[data-palette="scp"] .stat-tile-teal .stat-tile-caveat,
:root[data-palette="scp"] .stat-tile-amber .stat-tile-value,  :root[data-palette="scp"] .stat-tile-amber .stat-tile-label,  :root[data-palette="scp"] .stat-tile-amber .stat-tile-caveat,
:root[data-palette="scp"] .stat-tile-salmon .stat-tile-value, :root[data-palette="scp"] .stat-tile-salmon .stat-tile-label, :root[data-palette="scp"] .stat-tile-salmon .stat-tile-caveat {
  color: var(--scp-ink);
}
:root[data-palette="scp"] .stat-tile-teal a,   :root[data-palette="scp"] .stat-tile-amber a,  :root[data-palette="scp"] .stat-tile-salmon a {
  color: var(--scp-ink);
}

/* The active nav pill's type: the app sheet writes `color: #fff` on it, which
   on brand teal is 2.6:1 — so INK, as on every other brand surface here
   (measured 8.3:1). */
:root[data-palette="scp"] .sidebar-nav a.active {
  color: var(--scp-ink);
}

/* Focus keeps the brand ring the base already had; on the ink column it is
   the one place the teal was surviving before tonight. */
:root[data-palette="scp"] :focus-visible {
  outline-color: var(--scp-teal-500);
}

/* ===========================================================================
   APP GLYPHS — printed. Structure is chrome.css; this is the picture and the
   motion (the maintainer, 2026-09-20: every theme has its own logos, animated
   in its idiom). Street Culture is paper and ink, so the glyph is an INK STAMP
   on a teal plate with the other two brand colours spent on the parts that
   mean something: the apps around the Hub are amber, the Hub itself salmon,
   the check on the tag amber — the brand painted at scale, per decision 7.
   Motion: none while idle (a print does not move); on hover the default notch
   of movement from chrome.css plus a one-frame MISREGISTRATION — the salmon
   plate showing a hair beside the ink, as a two-colour press does when the
   sheet shifts. Reactive only, so no --theme-motion, and it stops for
   prefers-reduced-motion and the Motion switch like everything else.
   =========================================================================== */
:root[data-palette="scp"] .app-glyph-plate {
  background: var(--scp-teal-500);
  color: var(--scp-ink);
  box-shadow: inset 0 0 0 1px rgba(22, 19, 15, 0.16), 0 1px 0 rgba(22, 19, 15, 0.22);
}
:root[data-palette="scp"] .app-glyph-hub .g-nodes { fill: var(--scp-amber-500); }
:root[data-palette="scp"] .app-glyph-hub .g-core { fill: var(--scp-salmon-500); }
:root[data-palette="scp"] .app-glyph-assets .g-check { stroke: var(--scp-amber-500); }
:root[data-palette="scp"] .app-glyph-app .g-tiles rect:nth-child(2) { fill: var(--scp-amber-500); }
:root[data-palette="scp"] .app-glyph-app .g-tiles rect:nth-child(3) { fill: var(--scp-salmon-500); }
:root[data-palette="scp"] .app-glyph-layer { transition: filter 0.25s ease-out; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-palette="scp"]:not([data-motion="off"]) :is(.home-card, .hub-app-tile):is(:hover, :focus-visible) .app-glyph-layer {
    filter: drop-shadow(1px 1px 0 rgba(242, 108, 82, 0.6));
  }
}

/* THE LOGO: Street Culture declares NO `--logo-themed` and NO `--logo-tint`,
   deliberately (2026-09-20). The original mark in the brand's teal, amber and
   salmon IS this theme, so "Themed" would mean the same picture; the Appearance
   panel's Logo field therefore never appears here. Do not add the tokens. */

/* ===========================================================================
   BADGES — the STREET STICKER at its plainest (2026-10-02, S182; structure in
   the Asset Manager's styles.css, the picture lib/badgeArt.js). This theme is
   the brand, so the sticker is the badge book's own: a teal hex, the pictures
   in the brand's ink, amber and paper, and a white die-cut edge that reads on
   the paper page by its shadow and on the dark page by itself. No idiom of its
   own: SCP is the base the other seven dress differently.
   =========================================================================== */
:root[data-palette="scp"] .badge-medal {
  --badge-disc: var(--scp-teal-500);
  --badge-glyph: var(--scp-ink);
  --badge-rim: var(--scp-amber-500);
  --badge-paper: #fffdf8;
  --badge-backing: #ffffff;
  --badge-locked-line: var(--pico-muted-color);
}

/* ---------------------------------------------------------------------------
   THE 404 EASTER EGG (DOCKET 107, 2026-11-02; views/chrome/notFound.ejs).
   The house theme: an empty box, counted twice, and the page that is not in it.
   chrome.css hides all eight jokes; this file shows its own, sets the
   drawing's four colours and adds one short flourish, never for anybody who
   has asked for less motion.
   --------------------------------------------------------------------------- */
:root[data-palette="scp"] .nf-joke[data-nf-for="scp"] { display: grid; }
:root[data-palette="scp"] .nf {
  --nf-ink: var(--scp-ink);
  --nf-soft: color-mix(in srgb, var(--scp-amber-500) 24%, var(--scp-card));
  --nf-accent: var(--scp-teal-500);
  --nf-accent-2: var(--scp-amber-500);
}
:root[data-palette="scp"] .nf-code { text-shadow: 0.06em 0.06em 0 var(--scp-amber-500); }
@media (prefers-reduced-motion: no-preference) {
  :root[data-palette="scp"]:not([data-motion="off"]) .nf-joke[data-nf-for="scp"] .nf-page { animation: nf-scp-rise 0.9s ease-out 0.2s 1 both; }
}
@keyframes nf-scp-rise {
  0% { opacity: 0; transform: translateY(18px) rotate(-8deg); }
  60% { opacity: 1; transform: translateY(-4px) rotate(-12deg); }
  100% { opacity: 1; transform: translateY(0) rotate(-8deg); }
}

/* ---------------------------------------------------------------------------
   THE LOST-COMPUTER MAP'S COLOURS (Device Manager, backlog S221, 2026-11-02).
   Teal water and amber main roads, the brand's two colours. chrome.css derives every --map-* token from the page's colours; these
   give this theme's map its own. Colour only; each follows light and dark
   because the theme's own tokens do.
   --------------------------------------------------------------------------- */
:root[data-palette="scp"] {
  --map-water: color-mix(in srgb, var(--scp-teal-500) 30%, var(--pico-background-color));
  --map-road-major: color-mix(in srgb, var(--scp-amber-500) 42%, var(--pico-background-color));
  --map-accent: var(--scp-teal-500);
  --map-trail: var(--scp-salmon-500);
}