/* ===========================================================================
   THE WARDROBE — theme-pack skins for the front door.

   Each [data-pw-theme] block maps a pack's OWN tokens (themes/<pack>/css/
   *tokens*.css — the style-guide colours, not batch3's 8-token reduction)
   onto the front door's contract. The default Desert Signal look is the page's
   own stylesheet; choosing it removes the attribute, so this file only ever
   ADDS a costume and can fail to load without breaking the door.

   Fidelity rules honoured here (the ones the 38/100 audit found broken):
   - B-Team's accent is Command Red #c9292e (spec'd at 8–15% of every screen),
     with the bright #e03b40 variant only as hover/emphasis.
   - Day Off's red is Karmann #d92323 with #a6151a as its dark, not #c31d1d.
   - Packs declare ONE mode (§9): Day Off is light, B-Team is dark. No
     invented halves — the block pins color-scheme and does not fork on
     prefers-color-scheme.
   - Textures are the packs' shipped tiles with token colours baked in
     (CSS vars cannot resolve inside a data: URI).

   Keep the drift guard honest: scripts/build_hub_theme.py --check verifies
   every [data-pw-theme="…"] id here matches what theme.js emits.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   DATACENTER DERRICK'S DAY OFF — "Day off. Data on."
   Cream school paper, screenprint ink rules, Karmann red. Light only.
   --------------------------------------------------------------------------- */
/* :root[data-pw-theme] — the extra :root beats the page's own :root token
   blocks (including its prefers-color-scheme forks) on specificity, not on
   source order, so this file works no matter where the <link> sits. */
:root[data-pw-theme="dayoff"]{
  color-scheme:light;
  --bg:#f4e8cf;            /* school-paper */
  --panel:#fffdf7;         /* school-paper-light */
  --panel-2:#eadcbf;       /* surface-muted */
  --ink:#171717;           /* ink */
  --muted:#66615b;         /* graphite = the pack's text-muted */
  --faint:#9b927f;         /* border-soft */
  --accent:#d92323;        /* KARMANN RED — the style-guide red */
  --accent-deep:#a6151a;   /* karmann-red-dark: hover/links on paper */
  --accent-soft:#f3d6cd;   /* karmann tint on paper */
  --amber:#b07f14;         /* parade gold, held down for AA on cream */
  --amber-soft:#f0e2bd;
  --hot:#d86752;           /* museum coral */
  --line:#171717;          /* screenprint: rules are INK — that is the joke */
  --font:Inter,"Helvetica Neue",Arial,sans-serif;
  --disp:Impact,Haettenschweiler,"Arial Narrow Bold","Franklin Gothic Condensed",sans-serif;
  --mono:"IBM Plex Mono","Courier New",ui-monospace,monospace;

  /* tower scene: parade day — Chicago sky, locker-green mesas, ink mast */
  --sky-a:#b7deea; --sky-b:#e8f2ea; --sky-c:#f4e8cf;
  --mesa:#617765; --mesa-far:#8ba38e; --sand:#decda9;
  --twr:#171717; --beacon:#d92323; --wave:#d92323;
  --node-f:#fffdf7; --node-s:#171717; --node-hf:#fffdf7; --node-hs:#d92323;
  --lbl:#34322f; --lbl-hot:#171717; --cnt:#a6151a; --dash:#9b927f;
}
[data-pw-theme="dayoff"] body{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%23f4e8cf'/%3E%3Cg fill='%238b8271' opacity='.28'%3E%3Ccircle cx='8' cy='14' r='.8'/%3E%3Ccircle cx='41' cy='7' r='.6'/%3E%3Ccircle cx='77' cy='19' r='.7'/%3E%3Ccircle cx='112' cy='4' r='.5'/%3E%3Ccircle cx='19' cy='48' r='.5'/%3E%3Ccircle cx='59' cy='38' r='.8'/%3E%3Ccircle cx='99' cy='51' r='.6'/%3E%3Ccircle cx='116' cy='73' r='.7'/%3E%3Ccircle cx='5' cy='91' r='.6'/%3E%3Ccircle cx='37' cy='105' r='.7'/%3E%3Ccircle cx='72' cy='87' r='.5'/%3E%3Ccircle cx='103' cy='112' r='.8'/%3E%3C/g%3E%3Cg stroke='%23171717' stroke-width='.45' opacity='.12' fill='none'%3E%3Cpath d='M0 22L120 17M0 69L120 75M0 110L120 106'/%3E%3Cpath d='M17 0L22 120M68 0L63 120M106 0L112 120'/%3E%3C/g%3E%3C/svg%3E") var(--bg);
}
[data-pw-theme="dayoff"] h1{ text-transform:uppercase; letter-spacing:.018em; font-weight:900 }
[data-pw-theme="dayoff"] .rm h3, [data-pw-theme="dayoff"] .rhead h2,
[data-pw-theme="dayoff"] .mod .mt, [data-pw-theme="dayoff"] .ev .et,
[data-pw-theme="dayoff"] .top .name{ font-weight:900; letter-spacing:.018em }
[data-pw-theme="dayoff"] .rm, [data-pw-theme="dayoff"] .mod,
[data-pw-theme="dayoff"] .ev, [data-pw-theme="dayoff"] .find,
[data-pw-theme="dayoff"] .nores{ border-radius:6px }
/* offset screenprint: a hard, faint second impression instead of a blur */
[data-pw-theme="dayoff"] .rm:hover, [data-pw-theme="dayoff"] .mod:hover{
  box-shadow:3px 4px 0 rgb(23 23 23 / .14);
}
[data-pw-theme="dayoff"] .rm::before{ opacity:.9 }

/* ---------------------------------------------------------------------------
   THE B-TEAM — "Bad plan. Good people."
   Tactical charcoal, Command red, surplus olive, stencilled cream. Dark only.
   --------------------------------------------------------------------------- */
:root[data-pw-theme="bteam"]{
  color-scheme:dark;
  --bg:#111211;            /* canvas */
  --panel:#1b1c1b;         /* surface-1 */
  --panel-2:#242624;       /* surface-2 */
  --ink:#f2e6c9;           /* warm-cream */
  --muted:#cfc3a8;         /* warm-cream-muted */
  --faint:#7b807e;         /* steel */
  --accent:#c9292e;        /* COMMAND RED — the spec'd red, not the bright one */
  --accent-deep:#e03b40;   /* command-red-bright: hover/emphasis only */
  --accent-soft:#2b1516;   /* command red sunk into the canvas */
  --amber:#d99a2b;         /* caution */
  --amber-soft:#33270f;
  --hot:#d13a3f;           /* danger */
  --line:#4c514f;          /* steel-dark hairlines */
  --font:Inter,"Helvetica Neue",Arial,sans-serif;
  --disp:Impact,Haettenschweiler,"Arial Narrow Bold","Franklin Gothic Condensed",sans-serif;
  --mono:"IBM Plex Mono","Courier New",ui-monospace,monospace;

  /* tower scene: night op — olive mesas, cream mast, red beacon waves */
  --sky-a:#1f211f; --sky-b:#141514; --sky-c:#0b0b0b;
  --mesa:#39402a; --mesa-far:#2c3122; --sand:#242624;
  --twr:#cfc3a8; --beacon:#e03b40; --wave:#c9292e;
  --node-f:#1b1c1b; --node-s:#6f7069; --node-hf:#242624; --node-hs:#e03b40;
  --lbl:#cfc3a8; --lbl-hot:#f2e6c9; --cnt:#d99a2b; --dash:#4c514f;
}
[data-pw-theme="bteam"] body{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%23111211'/%3E%3Cg stroke='%233a3c39' stroke-width='.6' opacity='.5' fill='none'%3E%3Cpath d='M0 3H80M0 7H80M0 11H80M0 15H80M0 19H80M0 23H80M0 27H80M0 31H80M0 35H80M0 39H80M0 43H80M0 47H80M0 51H80M0 55H80M0 59H80M0 63H80M0 67H80M0 71H80M0 75H80M0 79H80'/%3E%3C/g%3E%3Cg fill='%238d9290' opacity='.22'%3E%3Ccircle cx='8' cy='13' r='1.2'/%3E%3Ccircle cx='41' cy='9' r='.8'/%3E%3Ccircle cx='68' cy='20' r='1.1'/%3E%3Ccircle cx='19' cy='50' r='.7'/%3E%3Ccircle cx='54' cy='63' r='1.3'/%3E%3Ccircle cx='74' cy='44' r='.9'/%3E%3Ccircle cx='30' cy='72' r='.8'/%3E%3C/g%3E%3C/svg%3E") var(--bg);
}
[data-pw-theme="bteam"] h1{ text-transform:uppercase; letter-spacing:.025em; font-weight:900 }
[data-pw-theme="bteam"] .rm h3, [data-pw-theme="bteam"] .rhead h2,
[data-pw-theme="bteam"] .mod .mt, [data-pw-theme="bteam"] .ev .et,
[data-pw-theme="bteam"] .top .name{ font-weight:900; letter-spacing:.025em; text-transform:uppercase }
/* crate plates: near-square corners, hard drop like a stencil offset */
[data-pw-theme="bteam"] .rm, [data-pw-theme="bteam"] .mod,
[data-pw-theme="bteam"] .ev, [data-pw-theme="bteam"] .find,
[data-pw-theme="bteam"] .nores{ border-radius:3px }
[data-pw-theme="bteam"] .rm:hover, [data-pw-theme="bteam"] .mod:hover{
  box-shadow:6px 7px 0 rgb(0 0 0 / .74);
}
[data-pw-theme="bteam"] .rm::before{ opacity:1 }
[data-pw-theme="bteam"] :focus-visible{ outline-color:var(--amber) }

/* ---------------------------------------------------------------------------
   Room icons — injected by theme.js while a pack is dressed. The packs draw
   their own full-colour door art; we only give it a shelf to sit on.
   --------------------------------------------------------------------------- */
.pw-ricon{ position:absolute; top:11px; right:12px; width:36px; height:36px; pointer-events:none }
.pw-ricon svg{ width:100%; height:100%; display:block }
@media (max-width:640px){ .pw-ricon{ width:30px; height:30px } }

/* ---------------------------------------------------------------------------
   The wardrobe (picker). Styled with the door's own tokens so it belongs to
   whichever costume is on.
   --------------------------------------------------------------------------- */
.pw-wardrobe{ position:relative; margin-left:10px }
.pw-wd-btn{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); color:var(--muted);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  border-radius:20px; padding:6px 12px;
}
.pw-wd-btn:hover{ color:var(--ink); border-color:var(--accent-deep) }
.pw-wd-btn:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px }
.pw-wd-panel{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:264px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:6px; box-shadow:0 16px 40px rgb(0 0 0 / .35);
}
.pw-wd-opt{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:10px; align-items:center; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-radius:7px; padding:9px 10px; color:var(--ink);
  font-family:var(--font); font-size:13px;
}
.pw-wd-opt:hover{ background:var(--panel-2) }
.pw-wd-opt[aria-pressed="true"]{ box-shadow:inset 0 0 0 1.5px var(--accent-deep) }
.pw-wd-dots{ display:flex; gap:3px; grid-row:1 / span 2 }
.pw-wd-dots i{ width:11px; height:11px; border-radius:50%; border:1px solid rgb(128 128 128 / .45) }
.pw-wd-name{ font-weight:700; letter-spacing:-.01em }
.pw-wd-tag{ grid-column:2; font-size:11px; color:var(--muted); font-style:italic }