/* ============================================================================
   CYNOSURE — base shell  (WS-H1: shared shell + theme provider)
   Reset, OLED substrate, "Cynosure" wordmark, lodestar mark, back-to-hub.
   Static CSS/DOM only (Stage-1 floor). NO ambient/looping animation, NO WebGPU.
   The --z-background layer is reserved (empty) for Stage-2 living-circuitry.
   ========================================================================== */

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

::selection { background: var(--accent-glow); color: var(--accent-bright); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.09); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

a { color: var(--accent); text-decoration: none; }

/* ----------------------------------------------------------------------------
   OLED substrate — static celestial field (no animation; Stage-1 subset of
   upgrade-950: pitch-black sky, dim cyan stars, a faint horizon cast at bottom).
   Pure CSS radial-gradients painted once. The living-circuitry / lodestar
   gravity-well are explicitly Stage-2+ and are NOT rendered here.
   -------------------------------------------------------------------------- */
.cynos-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-background);
  pointer-events: none;
  background:
    /* dim cyan starfield — sparse, monochrome, outlined points (static) */
    radial-gradient(1px 1px at 12% 18%, rgba(34,211,238,0.55), transparent 60%),
    radial-gradient(1px 1px at 27% 62%, rgba(34,211,238,0.35), transparent 60%),
    radial-gradient(1px 1px at 41% 30%, rgba(34,211,238,0.45), transparent 60%),
    radial-gradient(1px 1px at 58% 12%, rgba(34,211,238,0.30), transparent 60%),
    radial-gradient(1px 1px at 67% 48%, rgba(34,211,238,0.50), transparent 60%),
    radial-gradient(1px 1px at 78% 24%, rgba(34,211,238,0.28), transparent 60%),
    radial-gradient(1px 1px at 84% 66%, rgba(34,211,238,0.40), transparent 60%),
    radial-gradient(1px 1px at 9% 78%, rgba(34,211,238,0.25), transparent 60%),
    radial-gradient(1px 1px at 35% 84%, rgba(34,211,238,0.22), transparent 60%),
    radial-gradient(1px 1px at 92% 38%, rgba(34,211,238,0.30), transparent 60%),
    radial-gradient(1.4px 1.4px at 50% 22%, rgba(94,234,255,0.70), transparent 55%), /* the lodestar — notably brighter */
    /* faint horizon cast at the very bottom (boat-on-ocean nod), static */
    linear-gradient(180deg, transparent 72%, rgba(34,211,238,0.05) 100%),
    var(--black);
}

/* Shared pixel-art canvas (scripts/starfield.js) — the animated celestial field.
   Mounted into the fixed .cynos-bg layer by starfield.js on BOTH the login page and
   the hub, so its styling is shared substrate and lives here in base.css (not in a
   page stylesheet). The page that opts into the canvas collapses the static .cynos-bg
   paint to black behind it (login.css / hub.css). Pointer-transparent; the low-res
   backing store is stretched to the viewport and upscaled nearest-neighbour
   (image-rendering: pixelated) for crisp, hard-edged pixels with no blur/bloom. */
.cynos-bg canvas.cynos-stars {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* fallback for engines without `pixelated` */
}

/* ----------------------------------------------------------------------------
   Wordmark — "Cynosure" with a static lodestar mark. Top-left, binding spelling.
   Typography is an OPEN design question (upgrade-950): this is a restrained,
   VFD/console-leaning treatment (letter-spaced caps, cyan lodestar) — not a
   locked font choice.
   -------------------------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  user-select: none;
  line-height: 1;
}
.wordmark .lodestar {
  width: 22px; height: 22px; flex: none;
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.wordmark .mark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--fg);
}
.wordmark .mark b { color: var(--accent); font-weight: 700; } /* the C, lit */
a.wordmark:hover .mark { color: var(--accent-bright); }

/* ----------------------------------------------------------------------------
   Back-to-hub affordance (TD-5) — reusable component. The hub root does not use
   it; sibling programs (mail.cynos.dev, etc.) adopt this snippet to return to
   cynos.dev/ under the same .cynos.dev session. Documented in README.md.
   -------------------------------------------------------------------------- */
.back-to-hub {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-dim);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.back-to-hub:hover { color: var(--accent-bright); border-color: var(--accent-hairline); background: var(--accent-glow-soft); }
.back-to-hub svg { width: 15px; height: 15px; flex: none; }

/* generic focus ring — accessible, on-brand */
:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 2px; }

/* visually-hidden helper for a11y labels */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}