/* Design tokens, shared by / and /admin.
 *
 * Extracted from index.html in PB-080 so the admin page cannot drift from the
 * board it administers. Everything visual reads these variables, so a colour
 * scheme is a variable swap and nothing else - which is what made adding dark
 * mode a small change and what keeps two pages looking like one product.
 *
 * Layout stays in each page: the board is a card list, admin is a stack of
 * panels, and they have no layout in common worth sharing.
 */
/* ONE presentation, TWO colour schemes.
   The old axis was calm-vs-loud - `quiet` and `matrix` shared a palette and
   differed in typography, corner radius, glow and rain. Sam never used
   `quiet`, so it is gone and what was `matrix` is simply the look: mono
   type, sharp corners, the pink-orange gradient, the rain.
   The axis is now light-vs-dark, which is the one people actually expect a
   theme button to control. Every rule below reads these variables, so a
   scheme is a variable swap and nothing else. */
:root{
  --bg:#fdf7f9; --surface:#fff; --ink:#1a1420; --ink-soft:#5b4f62;
  --accent:#e0367a; --steel:#c2410c; --line:#f0d8e4; --muted:#9b8fa3;
  /* Pink for emphasised TEXT (PB-139). The accent is 4.0:1 on this ground,
     under the 4.5:1 body text needs; this is the same pink, deeper: 5.1:1. */
  --emph:#c42a68;
  --font-body:'Share Tech Mono','Roboto Mono',ui-monospace,monospace;
  --font-head:'VT323','Share Tech Mono',monospace;
  /* Sharp corners are most of what makes it feel like a terminal. */
  --radius:2px; --radius-sm:2px; --radius-pill:2px;
  --grad:linear-gradient(90deg,#ff2d78 0%,#ff6a3d 55%,#ff9500 100%);
  --glow:0 0 0 1px rgba(224,54,122,.10), 0 8px 24px -8px rgba(255,106,61,.30);
  --glow-hover:0 0 0 1px rgba(224,54,122,.16), 0 14px 34px -10px rgba(255,106,61,.42);
  --tracking:.02em;
  --company-bg:var(--grad);
  /* Badge colours were literals, which is why dark needed them named: a
     pastel background with dark text is unreadable on a dark ground. */
  --stale:#9a6b1f;
  --tag-uk-bg:#fff0e2;     --tag-uk-ink:#c2410c;
  --tag-unk-bg:#fdf3e3;    --tag-unk-ink:#9a6b1f;
  --tag-quiet-bg:#f1eef2;  --tag-quiet-ink:var(--muted);
  --tag-tech-bg:#fdf0f5;   --tag-tech-ink:#a3175a;
  --tag-agg-bg:#efe7f6;    --tag-agg-ink:#6b4a8a;
  --tag-con-bg:#f6e4e4;    --tag-con-ink:#8c3b3b;
  --tag-ben-bg:#e6f4ea;    --tag-ben-ink:#2f6b43;
  /* The rain paints its fade with the PAGE colour, so it has to follow the
     scheme or the trails smear the wrong way. */
  --rain-trail:255,255,255; --rain-opacity:.38;   /* .45 until PB-141: "a tad" less distracting */
/* Status colours. Used by /admin for "all boards polled cleanly" against a
   failure, and named here rather than there so the two pages cannot drift. */
--ok:#2f6b43; --bad:#8c3b3b;
}
/* Dark. Close to Can You Click It's ground, but keeping partition by's
   pink-orange rather than borrowing its neon green - the gradient is the
   thing that makes this site look like itself, and it reads better on black
   than it does on white. */
html[data-theme=dark]{
  --bg:#0a070d; --surface:#141019; --ink:#f5eff8; --ink-soft:#b9adc4;
  --accent:#ff4d8f; --steel:#ff9a52; --line:#2b2235; --muted:#8b7f96;
  --emph:#ff4d8f;   /* 6.4:1 on this ground */
  --glow:0 0 0 1px rgba(255,77,143,.14), 0 8px 26px -10px rgba(255,106,61,.35);
  --glow-hover:0 0 0 1px rgba(255,77,143,.24), 0 14px 36px -12px rgba(255,106,61,.5);
  --stale:#d9a441;
  --tag-uk-bg:#3a2113;     --tag-uk-ink:#ffb27a;
  --tag-unk-bg:#33260f;    --tag-unk-ink:#e0b463;
  --tag-quiet-bg:#221c29;  --tag-quiet-ink:var(--muted);
  --tag-tech-bg:#2c1524;   --tag-tech-ink:#ff8ab5;
  --tag-agg-bg:#241a33;    --tag-agg-ink:#b394d9;
  --tag-con-bg:#2e1a1a;    --tag-con-ink:#e08b8b;
  --tag-ben-bg:#12291c;    --tag-ben-ink:#6fc48c;
  /* The SAME glyphs are far louder on black, so dark stays below light
     (.30 against .45). Both were raised in PB-109 from .15/.30, at which Sam
     could barely see the rain in either scheme; the cards and inputs are
     opaque, so it never sits behind job text. */
  --rain-trail:10,7,13; --rain-opacity:.25;   /* .30 until PB-141 */
--ok:#6fc48c; --bad:#e08b8b;
}

/* Cookie consent (public/analytics.js). Accept and Decline are deliberately
   the SAME weight: the ICO's guidance is that refusing must be as easy as
   agreeing, so neither button is styled as the default. */
#pbconsent{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;
  max-width:560px;margin:0 auto;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--glow);
  padding:14px 16px;font-family:var(--font-body);font-size:13.5px;line-height:1.5}
#pbconsent p{margin:0 0 10px}
.pbconsent-actions{display:flex;gap:8px;justify-content:flex-end}
.pbconsent-actions button{font:inherit;font-size:13px;padding:6px 16px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink)}
.pbconsent-actions button:hover{border-color:var(--accent)}
.cookie-settings{font:inherit;background:none;border:0;padding:0;cursor:pointer;
  color:var(--accent);text-decoration:underline}

/* The studio credit at the foot of every page (PB-142). */
.credit{margin:28px 0 0;font-size:12px;color:var(--muted)}
/* Doubled class so a page's own link colour (about.html: `.wrap a`) cannot win. */
.credit.credit a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.credit.credit a:hover{color:var(--accent)}
footer .credit{margin-top:10px}

/* THE TOP BAR (PB-137, fixed in PB-138): the same on every page - the wordmark
   top left, linking home, and the nav top right. It sits OUTSIDE each page's
   column, in a row of its own as wide as the board's: inside the columns it
   landed somewhere different on every page (About's column is 720px), which
   is what Sam saw. Every rule is scoped under .topbar so a page's own link or
   button styles (about.html colours every `.wrap a`; admin.html styles every
   `button`) cannot reach in. The board runs its own theme code (it restarts
   the rain); the other pages load /nav.js. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:6px 16px;
  flex-wrap:wrap;box-sizing:border-box;width:100%;max-width:1220px;margin:0 auto;
  padding:22px 20px 0;position:relative;z-index:2;line-height:1.4}
.topbar .wordmark{font-family:var(--font-head);font-size:40px;line-height:1;font-weight:700;margin:0;
  letter-spacing:.01em;text-decoration:none;width:fit-content;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar .wordmark .by{color:transparent}
.topbar .topnav{display:flex;gap:2px;align-items:center;margin:0 -8px 0 auto}
.topbar .topnav a,.topbar .topnav button{font:inherit;font-family:var(--font-body);font-size:14px;
  color:var(--ink-soft);text-decoration:none;background:none;border:0;box-shadow:none;
  line-height:1.4;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
/* Lowercase like the wordmark (Sam, PB-145). CSS rather than the text, so the
   theme button's own labels (system / dark / light) follow without JS edits. */
.topbar .topnav a,.topbar .topnav button{text-transform:lowercase}
.topbar .topnav a[aria-current=page]{color:var(--accent)}
/* The theme control is a BUTTON, not a page (Sam, PB-155): a thin outline says
   so. Drawn by ::before rather than a border so on a phone the box can be
   smaller than the 44px tap target around it. */
.topbar .topnav button{position:relative;padding:6px 10px;margin-left:6px}
.topbar .topnav button::before{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--muted);border-radius:var(--radius-sm)}
/* Hover colour only where there IS hover: on a phone it sticks after a tap. */
@media(hover:hover){
  .topbar .topnav a:hover,.topbar .topnav button:hover{color:var(--accent)}
  .topbar .topnav button:hover::before{border-color:var(--accent)}
}
.topbar .topnav a:focus-visible,.topbar .topnav button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* A link given `display` below would beat the UA's [hidden] (CLAUDE.md). */
.topbar .topnav [hidden]{display:none !important}
/* Each inner page's own heading, under the bar. */
.pagetitle{font-family:var(--font-head);font-size:36px;font-weight:400;line-height:1.1;margin:0 0 4px;
  background:none;color:var(--ink);-webkit-text-fill-color:currentColor;width:auto}
@media(max-width:640px){
  .topbar{padding:14px 16px 0;column-gap:8px}
  .topbar .wordmark{font-size:30px}
  .topbar .topnav{margin-right:-5px}
  .topbar .topnav a,.topbar .topnav button{min-height:44px;display:inline-flex;align-items:center;padding:0 5px;font-size:13px}
  .topbar .topnav button{padding:0 8px;margin-left:4px}
  .topbar .topnav button::before{inset:8px 0}
  /* "System (light)" is too wide beside the wordmark on a phone. */
  .topbar .topnav .paren{display:none}
}