/* ============================================================================
   slime.hq / Phase 2 editorial layer
   ----------------------------------------------------------------------------
   One sheet for every document page on the site. It replaces the legacy
   styles.css (Chakra Petch + Inter, retired hexes) and carries the same tokens
   v2.css already uses on the home page, so the whole site reads as one system.

   The dark ground is deliberate and unchanged: #0b0e0a ink, #161c14 surface.
   Phase 2 changes the TYPE, the GRID and the RHYTHM, not the ground.

   Colour note, measured rather than guessed: slime-deep #4a9a1f computes to
   2.94:1 on bone #eeeadd and fails AA. Forest #0f3a2a on bone is 10.52:1.
   Every on-light small type below uses forest for that reason.
   ========================================================================== */

:root {
  /* ground */
  --ink: #0b0e0a;
  --ink-1: #10140d;
  --surface: #161c14;
  --surface-2: #1d2419;

  /* accents */
  --acid: #9bf24a;
  --acid-lt: #c9ff86;
  --acid-deep: #4a9a1f;   /* on ink only */
  --forest: #0f3a2a;      /* the on-light rung */
  --lemon: #e9ff5c;
  --mint: #bdeecb;

  /* paper */
  --bone: #eeeadd;
  --bone-2: #e3ddcc;

  /* text on ink */
  --fg: #edf1e6;
  --fg-soft: #c3cbb8;
  --muted: #828d76;

  /* structure */
  --line: rgba(233, 255, 190, .12);
  --hair: rgba(255, 255, 255, .10);

  /* spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;

  /* type scale */
  --fs-micro: .75rem;
  --fs-small: .875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1rem + .8vw, 1.5rem);
  --fs-h3: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);
  --fs-display: clamp(2.5rem, 1.4rem + 5.2vw, 5.5rem);

  --measure: 68ch;
  --page: 1240px;
  --pad: clamp(20px, 5vw, 72px);

  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "Courier New", monospace;

  color-scheme: dark;

  /* --- compatibility aliases -----------------------------------------------
     slime69.html and overlay-setup.html carry inline <style> blocks written
     against the legacy token names. Rather than rewrite two long inline
     sheets by hand (and risk the kind of silent miss that left a retired hex
     hiding in a theme-color meta), the old names are re-pointed at the Phase 2
     palette here. That is what moves those pages onto the new colours: the
     retired #8dff3a and #06080a stop existing, and every rule that asked for
     --slime now gets --acid.
     ---------------------------------------------------------------------- */
  --bg: var(--ink);
  --bg2: var(--ink-1);
  --panel: var(--surface);
  --slime: var(--acid);
  --slime-2: var(--acid-lt);
  --slime-dim: var(--acid-deep);
  --line-soft: var(--hair);
  --glow: 0 0 28px rgba(155, 242, 74, .38);
  --maxw: var(--page);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }

/* iOS zooms any focused control whose type is under 16px. Every input on the
   site is therefore at least 16px on small screens. This is the whole fix for
   the focus-zoom bug class and it belongs in the base, not in a media query. */
input, select, textarea, button { font: inherit; font-size: max(16px, 1rem); }

a { color: var(--acid); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acid-lt); }

:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--acid); color: var(--ink); }

/* ---------------------------------------------------------------- utilities */

.u-wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--pad); }
.u-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* Every interactive target clears the 44px WCAG and Apple HIG minimum. */
.u-tap { min-height: 44px; display: inline-flex; align-items: center; }
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.u-skip {
  position: absolute; left: -9999px; top: var(--sp-2); z-index: 60;
  background: var(--acid); color: var(--ink);
  padding: var(--sp-2) var(--sp-3); font-weight: 700;
  /* it is a target like any other once it is focused */
  min-height: 44px; display: inline-flex; align-items: center;
}
.u-skip:focus { left: var(--sp-3); }

/* ---------------------------------------------------------------- masthead  */
/* The editorial masthead: a hairline rule, the mark at the left, a mono nav at
   the right. Same shape on every page so the site has one front. */

.legal-header,
.mast {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  max-width: var(--page); margin-inline: auto;
  padding: var(--sp-3) var(--pad);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand,
.mast__brand {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px;
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -.02em;
  color: var(--bone);
  text-decoration: none;
}
.brand:hover, .mast__brand:hover { color: var(--bone); }
.brand-drop, .mast__flask { width: 24px; height: 24px; display: block; }
.brand-text { display: inline-block; }
/* The locked wordmark: bone with the acid dot as the period. */
.dot { color: var(--acid); }

.legal-back,
.mast__nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex; align-items: center;
}
.legal-back:hover, .mast__nav a:hover { color: var(--acid); }
.mast__nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ---------------------------------------------------------------- document  */
/* The long-form shell: legal pages, bot pages, policies. Editorial measure,
   generous leading, a mono kicker and a rule under every section head. */

.legal-wrap {
  max-width: calc(var(--measure) + 8ch);
  margin-inline: auto;
  padding: var(--sp-7) var(--pad) var(--sp-7);
}

.legal-wrap h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.03em;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.legal-intro {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--fg);
  margin: 0 0 var(--sp-6);
  max-width: var(--measure);
  text-wrap: pretty;
}

/* The table of contents reads as an index, not a button row. */
.legal-toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-1) var(--sp-4);
  margin: 0 0 var(--sp-7);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.legal-toc a {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: none;
  padding: var(--sp-2) 0;
  min-height: 44px;
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
}
.legal-toc a:hover { color: var(--acid); border-bottom-color: var(--line); }

.legal-wrap h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: var(--sp-7) 0 var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  scroll-margin-top: 88px;
  text-wrap: balance;
}
.legal-wrap h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: var(--sp-5) 0 var(--sp-2);
  scroll-margin-top: 88px;
}

.legal-wrap p,
.legal-wrap li {
  max-width: var(--measure);
  color: var(--fg-soft);
  text-wrap: pretty;
}
.legal-wrap p { margin: 0 0 var(--sp-3); }
.legal-wrap ul, .legal-wrap ol { padding-left: 1.25em; margin: 0 0 var(--sp-4); }
.legal-wrap li { margin-bottom: var(--sp-2); }
.legal-wrap strong { color: var(--fg); font-weight: 700; }

.legal-wrap table {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-5);
  font-size: var(--fs-small);
}
.legal-wrap th, .legal-wrap td {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.legal-wrap th {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* A pulled-aside note: the one raised surface in the document flow. */
.legal-note, .note {
  background: var(--surface);
  border-left: 2px solid var(--acid);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-5);
  max-width: var(--measure);
  font-size: var(--fs-small);
  color: var(--fg-soft);
}
.legal-note p:last-child, .note p:last-child { margin-bottom: 0; }

.upd {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.req { color: var(--acid); }
.kicker {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--acid-deep);
  display: block; margin-bottom: var(--sp-2);
}
.home { color: var(--fg-soft); text-decoration: none; }

/* ---------------------------------------------------------------- buttons   */

.btn, .btn-primary, .s69-submit, .btn--acid {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: .02em;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { border-color: var(--acid); color: var(--acid); }

.btn-primary, .s69-submit, .btn--acid {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink);
}
.btn-primary:hover, .s69-submit:hover, .btn--acid:hover {
  background: var(--acid-lt); border-color: var(--acid-lt); color: var(--ink);
}
.btn[disabled], .s69-submit[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- forms     */

/* :not(radio/checkbox) matters. The overlay builder's view/align/bg controls
   are a segmented control built from real radios that are deliberately hidden
   (position:absolute, opacity:0) with the label painted instead. A blanket
   width:100% gave each hidden radio a 375px invisible box, and an absolutely
   positioned box still counts toward the document's scroll extent, so the page
   scrolled sideways on a phone: 624px of scrollWidth in a 375px viewport. */
.ovl-input, .s69-field input, .s69-field textarea, .s69-field select,
.ovl-field input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--fg);
}
.ovl-input:focus, .s69-field input:focus, .s69-field textarea:focus {
  border-color: var(--acid); outline: none;
}
.ovl-field label, .s69-field label, .ovl-grouplabel {
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-2);
}

/* ------------------------------------------------- slime69 recruitment page */

.s69-wrap { max-width: var(--page); margin-inline: auto; padding: 0 var(--pad) var(--sp-7); }
.s69-top { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.s69-hero { padding: var(--sp-7) 0 var(--sp-6); border-bottom: 1px solid var(--line); }
.s69-kicker {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--acid);
  margin: 0 0 var(--sp-3);
}
.s69-title {
  font-family: var(--font-display);
  font-size: var(--fs-display); font-weight: 800;
  line-height: .94; letter-spacing: -.03em;
  margin: 0 0 var(--sp-4); text-wrap: balance;
}
.s69-sub, .s69-lede {
  font-size: var(--fs-lead); line-height: 1.45;
  color: var(--fg-soft); max-width: var(--measure); margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}
.s69-why, .s69-formwrap { padding: var(--sp-6) 0; }
.s69-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: var(--sp-5);
}
.s69-row { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .s69-row { grid-template-columns: 1fr 1fr; } }
.s69-field { margin-bottom: var(--sp-4); }
.s69-msg { font-size: var(--fs-small); color: var(--fg-soft); margin-top: var(--sp-3); }
.s69-done { color: var(--acid); font-weight: 700; }
.s69-cta { margin-top: var(--sp-5); }
.s69-foot {
  padding: var(--sp-5) 0; border-top: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--muted);
}

/* ------------------------------------------------------- overlay setup page */

.ovl-wrap { max-width: 900px; margin-inline: auto; padding: var(--sp-6) var(--pad) var(--sp-7); }
.ovl-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 2px; padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.ovl-grid { display: grid; gap: var(--sp-4); }
.ovl-row2 { display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .ovl-row2 { grid-template-columns: 1fr auto; align-items: end; } }
.ovl-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.ovl-steps > li {
  position: relative; padding-left: 2.75rem; margin-bottom: var(--sp-5);
  max-width: var(--measure);
}
.ovl-num {
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acid); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700;
}
.ovl-copy { color: var(--fg-soft); max-width: var(--measure); }
.ovl-url, .ovl-seg {
  font-family: var(--font-mono); font-size: var(--fs-small);
  background: var(--ink-1); border: 1px solid var(--line);
  padding: var(--sp-1) var(--sp-2); border-radius: 2px;
  word-break: break-all; color: var(--acid-lt);
}
.ovl-hint, .ovl-note {
  font-size: var(--fs-small); color: var(--muted); max-width: var(--measure);
}
.ovl-preview {
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: 2px; padding: var(--sp-4); min-height: 120px;
}

/* ---------------------------------------------------------------- footer    */

.foot, .site-footer-doc {
  border-top: 1px solid var(--line);
  padding: var(--sp-6) var(--pad);
  max-width: var(--page); margin-inline: auto;
  font-size: var(--fs-small); color: var(--muted);
}
.foot__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.foot a { color: var(--fg-soft); text-decoration: none; }
.foot a:hover { color: var(--acid); }
.foot__seller { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; }

/* ---------------------------------------------------------------- motion    */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- print     */

@media print {
  .legal-header, .mast, .legal-toc, .legal-back { display: none; }
  body { background: #fff; color: #000; }
  .legal-wrap p, .legal-wrap li { color: #000; max-width: none; }
}

/* The section head that gives the slime69 card grid a level to hang from.
   It was h1 straight to h3 before, which is a hole in the document outline. */
.s69-whyhead {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-4);
  grid-column: 1 / -1;
}
.s69-card h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.s69-card p { color: var(--fg-soft); margin: 0; }