/* Shared ground for every page a candidate or recruiter sees.
 *
 * Split out because the tokens were about to exist twice. Two copies of a
 * palette drift the first time one hex is nudged, and the drift shows up as a
 * page that is almost the same colour as the last one — the kind of wrong that
 * is easier to feel than to find.
 *
 * Pages link this FIRST and their own sheet second, so page rules win without
 * needing !important or inflated selectors.
 *
 * Deliberately dark, and not for fashion: these pages sit around a video feed
 * and everything that is not the video should recede. There is no light theme
 * because there is no choice to honour — each of these is one screen with one
 * job.
 *
 * CSP is style-src 'self': no inline styles, no <style> blocks, everything in
 * a file like this one.
 */

/* Special Elite is self-hosted, and that is a CSP decision rather than a
   performance one: server.js sets style-src 'self' and font-src 'self' data:,
   so a Google Fonts <link> is blocked twice over. The face is SIL Open Font
   Licensed, so serving our own copy is permitted. */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/special-elite-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/special-elite-latin-ext.woff2') format('woff2');
  /* U+A668 lives here — the monocular O in BlindSpꙨts. Without this second
     face the wordmark falls back mid-word and the glyph changes shape. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* lab352.com's palette, taken from main_website/style.css.
 *
 * These pages used to be blue-slate and sans, on the reasoning that a video
 * feed wants a receding ground. The stronger claim won: somebody arriving here
 * came from the site a moment ago, and two visual languages read as two
 * products. Black is a perfectly good ground for video anyway.
 *
 * TOKEN NAMES ARE UNCHANGED from the blue-slate set. join.css styles the whole
 * candidate page through them, so renaming would have meant rewriting a sheet
 * that had nothing wrong with it. */
:root {
  --bg:          #000000;
  --surface:     #0b0b0b;
  --surface-2:   #141414;
  --line:        rgba(255,255,255,.16);
  --line-soft:   rgba(255,255,255,.07);

  --ink:         #ffffff;
  --ink-soft:    #b2b1b1;
  --ink-faint:   #7d7c7c;

  /* The site spends no colour on emphasis — a primary button is white on black
     and that is the whole system. So the accent is white, and what marks
     something pressable is the inversion rather than a hue. */
  --accent:      #ffffff;
  --accent-hi:   #ffffff;
  --accent-ink:  #000000;

  --ok:          #6bcf7f;
  --danger-bg:   #2a1414;

  --radius:      8px;
  --radius-sm:   6px;

  /* Monospace throughout, as on the site. --sans is kept as a name so page
     sheets that ask for it still resolve; it simply is not sans any more. */
  --sans: monospace;
  --mono: monospace;
  --display: 'Special Elite', monospace;
}

* { box-sizing: border-box; }

/* The hidden attribute is display:none in the UA stylesheet, which any explicit
   display in a page sheet silently beats — .cards { display: grid } made a
   [hidden] element visible. Stating it here means [hidden] means hidden. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

.sub {
  color: var(--ink-soft);
  font-size: 13.5px;
  margin: 0;
  text-wrap: pretty;
}

/* ── Top bar ───────────────────────────────────────────────────────────────
   One quiet line, so a page never opens on a naked form and the visitor can
   see they are somewhere deliberate. */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  flex: none;
}
.wordmark {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .5px;
}
.topbar .spacer { flex: 1; }

.secure {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ink-faint);
  font-family: var(--mono);
}
.secure::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

/* ── Controls ──────────────────────────────────────────────────────────────*/
label {
  display: grid;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

input {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.4 var(--sans);
  /* Reset what the label sets, since the input inherits from it. */
  letter-spacing: normal;
  text-transform: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input::placeholder { color: var(--ink-faint); }
input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,255,255,.22);
}

button {
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--ink);
  font: 600 14px/1.2 var(--sans);
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
button:hover:not(:disabled) { background: #1e1e1e; }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
button:disabled { opacity: .42; cursor: default; }

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