/* Activate deployment board, shared theme.
   Palette from Brett, 2026-09-14. The values the board carries inline at the top of
   deployment.html, so the board and the rest of the site carry the same colours. Only carries
   what the pages do not declare themselves. Anything a page also sets (body font, card radius,
   button fills) is edited in that page.
   ponytail: hex tokens, not oklch, so the Fire Stick browser resolves them.
   --ink is the one value not taken from Brett's set. His --ink is #060B37, a dark navy. In this
   stylesheet --ink has always been an alias for the body text colour, and playlist.html reads it
   from here for exactly that. Taking his value would paint that page's text dark on a dark
   ground. It stays light until playlist.html declares its own. */

:root{
  /* brand */
  --act-ink:#000626;
  --act-navy:#000B40;
  --act-light:#FFFFFF;
  --act-cyan:#2CD2FF;
  --act-cyan-3:#6F8CF8;
  --act-muted:#A5AAE3;
  --act-hair:rgba(44,210,255,.26);
  --act-hair-dim:rgba(165,170,227,.30);
  --act-energy:linear-gradient(104deg,#BB48FD 0%,#3D5BF2 70%);
  --act-radius:18px;
  --font:"Urbanist",system-ui,Segoe UI,Arial,sans-serif;

  /* the names the pages already use, pointed at the brand */
  --bg:#000626;
  --surface:#000B40;
  --surface2:#091659;
  --border:#172984;
  --accent:#2CD2FF;
  --accent2:#BB48FD;
  --accent3:#6F8CF8;
  --indigo:#3D5BF2;
  --gold:#C462FF;
  --teal:#1D89AE;
  --text:#FFFFFF;
  --ink:#FFFFFF;
  --muted:#A5AAE3;
  --hazard:#FFD400;
}

html{color-scheme:dark}
body{font-variant-numeric:tabular-nums}

/* the room: the same ambient wash the wall screen sits in. Behind page content, above the
   page background, so a page that paints its own body background keeps it. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1500px 640px at 50% 112%,rgba(61,91,242,.26),transparent 62%),
             radial-gradient(1300px 560px at 50% -10%,rgba(0,11,64,.90),transparent 64%),
             linear-gradient(180deg,rgba(0,11,64,.55) 0%,rgba(0,6,38,0) 56%);
}

::selection{background:rgba(44,210,255,.30);color:var(--text)}

/* one focus treatment everywhere, so a keyboard user sees the same ring on every page */
:focus-visible{outline:2px solid var(--act-cyan);outline-offset:2px}

/* controls staff tap on a phone. min-* beats a fixed width/height, so this lifts the small
   ones without restyling them. */
.btn-sm,.qa-shift-btn,.shift-option,.pace-btn,.ht-pill,.edit-btn,.tab-btn{min-height:40px}
.ord-btn{min-width:36px;min-height:36px}
.todo-check{min-width:24px;min-height:24px}
.stepper-btn{min-width:44px;min-height:44px}

/* scrollbars in brand */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--act-ink)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--act-cyan-3)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}