/* ============================================================================
   lab.css -- Computography Lab house style.
   ONE stylesheet, linked by every site page. Adopted by owner ruling 2026-08-26c.

   THE RULE THAT MAKES IT A SYSTEM: a page may USE a token. A page may not
   INVENT a size. If a value is needed that is not here, it is added HERE and
   named, not written inline on a page.

   Three faces, three jobs:
     --serif  the site speaking      (headlines)
     --sans   prose and interface
     --mono   THE CAMERA'S VOICE     (property names, register codes, setting
              values, model names, .cheat filenames)
   If the camera said it, it is mono.

   NOT loaded by the desktop app's own surfaces (olyprobe-*.html) -- those keep
   their built-in fonts and their own styles. This file is site-only.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* --- color: unchanged from the pre-lab.css site, and shared with the app */
  --ink: #1a1a18;
  --ink-2: #4a4a44;
  --ink-3: #8a8a80;
  --paper: #f7f6f0;
  --paper-2: #eeede5;
  --paper-3: #e4e3d8;
  --accent: #1e4a7c;
  --accent-light: #e6eef5;
  --accent-mid: #4078a8;
  --rule: #d0cfc4;
  --status-err: #9a3434;
  --status-ok: #2f8f5b;
  --danger: #9a2a2a;
  --danger-line: #e0a3a3;
  --danger-bg: #fdf8f8;
  --danger-tint: #fdeaea;

  /* --- type faces */
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* --- type scale: seven steps, nothing between them */
  --t-display: 52px;
  --t-title: 32px;
  --t-section: 22px;
  --t-body: 17px;
  --t-small: 14px;
  --t-label: 11px;
  --t-code: 14px;

  /* --- space: one 4px ladder */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;

  /* --- measure: three widths, no others */
  --w-prose: 640px;
  --w-page: 960px;
  --w-wide: 1400px;

  --radius: 4px;
  --radius-lg: 8px;
  --nav-h: 60px;
}

@media (max-width: 700px) {
  :root {
    --t-display: 34px;
    --t-title: 24px;
    --t-section: 19px;
    --t-body: 16px;
    --s-6: 20px;
    --s-8: 48px;
  }
}

/* ---------------------------------------------------------------- base --- */
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.7;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--accent-mid); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------ type roles - */
.page-headline,
.section-headline,
.callout-term,
.pullquote p {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
}
.page-headline { font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: var(--s-5); }
.section-headline { font-size: var(--t-title); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: var(--s-5); }
.callout-term { font-size: var(--t-section); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: var(--s-2); }

/* The page-level eyebrow (the line above the headline) was RETIRED by owner
   ruling 2026-08-26e: it duplicated either the masthead or the headline. Its
   selector is deliberately NOT kept as a courtesy -- any page still carrying
   that markup will fail the class-coverage check when it converts. The
   per-section eyebrow stays; it does real work. */
.section-eyebrow,
.section-label,
.label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}

code, .code, .val, .mono {
  font-family: var(--mono);
  font-size: var(--t-code);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------- nav --- */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  height: var(--nav-h);
  padding: 0 var(--s-6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
}
/* THE MASTHEAD IS THE SITE, NOT THE APP. Owner ruling 2026-08-26d: the nav
   carried "OlyProbe by Computography Lab", which read as though OlyProbe were
   the name of the site. OlyProbe is an app the site offers. The masthead is
   the site's name alone, set larger. .nav-brand-by is retired. */
.nav-brand { display: flex; align-items: baseline; gap: var(--s-2); text-decoration: none; color: inherit; }
.nav-brand-name { font-family: var(--serif); font-size: 30px; letter-spacing: -0.02em; line-height: 1; }
.nav-links { display: flex; gap: var(--s-5); list-style: none; align-items: center; }
.nav-links a {
  font-size: var(--t-small); color: var(--ink-2); text-decoration: none;
  letter-spacing: 0.02em; padding: var(--s-1) 0;
  border-bottom: 1px solid transparent; transition: color 0.2s;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.active { color: var(--ink); border-bottom-color: var(--accent); }

/* -------------------------------------------------------------- footer --- */
footer {
  border-top: 1px solid var(--rule);
  margin-top: var(--s-8);
  padding: var(--s-5) var(--s-6);
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
}
.footer-brand { font-family: var(--serif); font-size: 18px; color: var(--ink-2); }
.footer-links { display: flex; gap: var(--s-5); list-style: none; flex-wrap: wrap; }
.footer-links a { font-size: 13px; color: var(--ink-3); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--accent); }
.footer-copy { font-size: 13px; color: var(--ink-3); margin-left: auto; }

/* ---------------------------------------------------------- containers --- */
.content { max-width: var(--w-prose); margin: 0 auto; padding: 0 var(--s-6); }
.page { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s-6); }
.wide { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--s-6); }

.page-header {
  max-width: var(--w-prose); margin: 0 auto;
  padding: var(--s-8) var(--s-6) var(--s-7);
  border-bottom: 1px solid var(--rule);
}
.page-header.page-wide { max-width: var(--w-page); }
.page-mission { font-size: var(--t-body); color: var(--ink-2); line-height: 1.75; font-weight: 300; }
.page-mission strong { color: var(--ink); font-weight: 500; }
.page-dateline { font-size: 13px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: var(--s-5); }

/* -------------------------------------------------------------- prose ---- */
.prose-section { padding: var(--s-7) 0; border-bottom: 1px solid var(--rule); }
.prose-section:last-of-type { border-bottom: none; }

.prose p, .prose li { font-size: var(--t-body); color: var(--ink-2); line-height: 1.7; font-weight: 300; }
.prose p { margin-bottom: var(--s-4); }
.prose p:last-child { margin-bottom: 0; }
.prose strong, .prose li strong { color: var(--ink); font-weight: 500; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-mid); text-underline-offset: 2px; }
.prose ul { list-style: none; margin: 0 0 var(--s-4) 0; }
.prose ul:last-child { margin-bottom: 0; }
.prose li { padding-left: var(--s-5); position: relative; margin-bottom: var(--s-2); }
.prose li::before {
  content: '\00B7'; position: absolute; left: var(--s-1); top: -1px;
  color: var(--accent-mid); font-size: 18px;
}

.pullquote { border-left: 3px solid var(--accent-mid); padding: var(--s-1) 0 var(--s-1) var(--s-5); margin: var(--s-6) 0; }
.pullquote p { font-size: 20px; line-height: 1.5; margin: 0; color: var(--ink); }

.callout {
  background: var(--paper-2); border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-5); border-left: 3px solid var(--accent-mid);
  margin: var(--s-5) 0;
}
.callout-body { font-size: var(--t-small); color: var(--ink-2); line-height: 1.75; font-weight: 300; }
.callout-body strong { color: var(--ink); font-weight: 500; }

.recipients { margin-top: var(--s-5); }
.recipient-row {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--s-5);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--rule);
}
.recipient-row:last-child { border-bottom: none; }
.recipient-name { font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.recipient-body { font-size: var(--t-small); color: var(--ink-2); line-height: 1.65; font-weight: 300; }

/* ----------------------------------------------------------- controls --- */
/* EVERY variant must stand alone. A page writes class="btn-primary", not
   class="btn btn-primary" -- putting the geometry only on .btn shipped three
   unstyled buttons to production on 2026-08-26. */
.btn, .btn-primary, .btn-secondary {
  font-family: var(--sans); font-size: var(--t-small); font-weight: 500;
  letter-spacing: 0.03em; padding: 11px 20px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #163558; }
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-secondary { background: transparent; color: var(--accent); border-color: var(--rule); }
.btn-secondary:hover { border-color: var(--accent-mid); }

.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: var(--s-1); letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 10px 12px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-mid); box-shadow: 0 0 0 3px var(--accent-light);
}
.field input::placeholder { color: var(--ink-3); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 76px; }
.pw-toggle {
  position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%);
  background: none; border: 0; font-family: var(--sans); font-size: 12px;
  font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer; padding: var(--s-1) var(--s-2);
}
.pw-toggle:hover { color: var(--accent); }

.card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-5); }

table.spec { width: 100%; border-collapse: collapse; }
table.spec th {
  text-align: left; font-family: var(--sans); font-size: var(--t-label);
  font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule);
}
table.spec td {
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--paper-3);
  font-size: var(--t-small); vertical-align: baseline;
}

/* --------------------------------------------------------- panel pages --- */
/* .section-eyebrow is the editorial eyebrow on prose pages. .section-label is
   the same type, in accent, with a rule under it -- the panel header on the
   structured pages (Account, Cheats, Join). Same size token, two roles. */
.section { margin-bottom: var(--s-6); }
.section-label {
  color: var(--accent-mid);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-4);
}
.lead { font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; font-weight: 300; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); }
.status { font-size: 13px; color: var(--ink-3); margin-top: var(--s-3); min-height: 16px; line-height: 1.5; }
.status.error { color: var(--status-err); }
.status.ok { color: var(--status-ok); }

/* ------------------------------------------------------- form elements --- */
button, input, select, textarea { font-family: var(--sans); }
label.field-label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: var(--s-1); letter-spacing: 0.02em; }
input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 10px 12px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-mid); box-shadow: 0 0 0 3px var(--accent-light);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }

.btn-ghost {
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 6px 12px; font-size: 13px;
  cursor: pointer; transition: background 0.2s;
}
.btn-ghost:hover { background: var(--paper-3); }
.btn-text {
  background: none; border: none; color: var(--ink-2); font-size: 13px;
  cursor: pointer; padding: 9px 6px;
}
.btn-text:hover { color: var(--ink); text-decoration: underline; }
.btn-danger {
  background: #fff; color: var(--danger); border: 1px solid #d98c8c;
  border-radius: var(--radius); padding: 10px 18px; font-size: var(--t-small);
  font-weight: 500; letter-spacing: 0.03em; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-danger:hover { background: var(--danger-tint); border-color: #c06464; }
.btn-danger:disabled { color: var(--ink-3); border-color: var(--rule); background: var(--paper-2); cursor: default; }

.danger-zone { border: 1px solid var(--danger-line); border-radius: var(--radius-lg); padding: var(--s-5); background: var(--danger-bg); }
.danger-zone .section-label { color: var(--danger); border-bottom-color: #e8c4c4; }
.danger-text { font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; margin-bottom: var(--s-4); }

/* ------------------------------------------------------------- mobile --- */
@media (max-width: 700px) {
  .recipient-row { grid-template-columns: 1fr; gap: var(--s-1); }
  .nav-links { gap: var(--s-4); }
  .nav-brand-name { font-size: 24px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  footer { gap: var(--s-3); }
  .footer-copy { margin-left: 0; width: 100%; }
}