/* ============================================================
   product.css — the authenticated product on the brand system
   (Phase 1: auth · legal · errors — 2026-08-08)

   Loads AFTER marketing.css and consumes its tokens directly:
   --paper --ink --graphite --ochre --rule --rule-soft --gutter --maxw.
   Typography: Instrument Serif (display) / Newsreader (text) /
   IBM Plex Mono (data, labels). No border-radius, no box-shadows —
   hairline rules carry the structure.

   §20.18 (the constitution): the product adopts the brand as CHROME;
   functional color lives in a small annex below, never inherited ad hoc.
   Build record: reports/product_brand_adoption_phase1_2026-08-08.md
   ============================================================ */

/* ── functional annex (seed) ─────────────────────────────────
   Ochre marks upward movement; graphite downward (the Egon 100
   rank-delta precedent — gains/losses are movement in exactly that
   sense). All other severity is monochrome: weight and fill carry it,
   never hue. Ochre is never a generic accent; a CTA is not movement. */
.move-up{color:var(--ochre);}
.move-down{color:var(--graphite);}

/* ── flash family — product categories on the estate's .flash box.
   Severity is monochrome: errors/warnings carry a solid-ink bar. ── */
.flash--error,.flash--danger,.flash--warning{border-left:3px solid var(--ink);}
.flash--success,.flash--info{}

/* ── form vocabulary ─────────────────────────────────────────
   Labels are stamped (mono, tracked, graphite); entries are written
   (Newsreader, ink). Focus = ink border + the global ochre
   :focus-visible outline from marketing.css (§14: active state). */
.fld{margin:0 0 18px;}
.fld label,.fld__k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);
  display:block;margin-bottom:7px;}
.fld__in{display:block;width:100%;box-sizing:border-box;
  font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:16.5px;line-height:1.4;
  color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:0;
  padding:10px 12px;transition:border-color .25s;}
.fld__in::placeholder{color:var(--graphite);opacity:.75;font-style:italic;}
.fld__in:focus{border-color:var(--ink);outline:none;}
.fld__in:focus-visible{outline:1px solid var(--ochre);outline-offset:3px;}
.fld__err{font-size:13.5px;line-height:1.45;color:var(--ink);
  border-left:2px solid var(--ink);padding-left:9px;margin-top:7px;}
.fld__help{font-size:13.5px;line-height:1.45;color:var(--graphite);margin-top:6px;}

/* checkbox row — reading text beside a stamped square */
.chk{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;}
.chk input[type="checkbox"]{appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:15px;height:15px;margin:3px 0 0;border:1px solid var(--rule);border-radius:0;
  background:transparent;cursor:pointer;display:inline-grid;place-content:center;
  transition:border-color .25s,background .25s;}
.chk input[type="checkbox"]:hover{border-color:var(--ink);}
.chk input[type="checkbox"]:checked{background:var(--ink);border-color:var(--ink);}
.chk input[type="checkbox"]:checked::before{content:"";width:7px;height:4px;
  border-left:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);
  transform:translateY(-1px) rotate(-45deg);}
.chk label{font-size:14.5px;line-height:1.5;color:var(--ink);cursor:pointer;}
.chk label a{color:var(--ink);}

/* stamps as form actions */
button.stamp{cursor:pointer;font-weight:500;}
button.stamp:disabled{opacity:.55;cursor:default;}
.stamp--wide{display:block;width:100%;text-align:center;
  padding:13px 18px 12px;font-size:11px;letter-spacing:.2em;}

/* ══ .page-auth — the quiet centered document (auth shell) ══ */
.page-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,5vh,56px) var(--gutter);}
.page-auth .auth-col{position:relative;z-index:1;width:100%;max-width:400px;}
.page-auth .auth-seal{display:flex;justify-content:center;margin-bottom:clamp(30px,5.5vh,48px);}
/* The seal — EG/ON stacked in a near-square (§20.1), ink on paper. */
.seal{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:11px;
  letter-spacing:.30em;text-transform:uppercase;border:1px solid var(--ink);
  padding:5px 2px 4px 7px;line-height:1.28;display:inline-block;text-align:center;
  color:var(--ink);text-decoration:none;transition:color .25s,border-color .25s;}
.seal span{display:block;}
.seal:hover{color:var(--ochre);border-color:var(--ochre);}
/* max-width:none overrides marketing.css's global h1 11ch cap. */
.page-auth h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(25px,3vw,31px);line-height:1.1;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 8px;max-width:none;}
.page-auth .auth-sub{font-size:15px;line-height:1.55;color:var(--graphite);margin:0 0 24px;}
.page-auth .flash{margin:0 0 20px;max-width:none;}
.page-auth .auth-links{border-top:1px solid var(--rule-soft);margin-top:26px;padding-top:16px;}
.page-auth .auth-links p{margin:0 0 7px;font-size:14px;line-height:1.5;color:var(--graphite);}
.page-auth .auth-links a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule);transition:border-color .25s;}
.page-auth .auth-links a:hover{border-bottom-color:var(--ochre);}
.page-auth .auth-alt{margin-top:14px;}
.page-auth .auth-quiet{font-size:13.5px;color:var(--graphite);}
/* an informational note (invite state, demo pointer) — hairline box */
.page-auth .auth-note{border:1px solid var(--rule);padding:14px 16px 12px;
  margin:0 0 22px;text-align:center;}
.page-auth .auth-note p{margin:0 0 7px;font-size:14.5px;line-height:1.55;color:var(--ink);}
.page-auth .auth-note p:last-child{margin-bottom:0;}
.page-auth .auth-note a{color:var(--graphite);text-decoration:none;
  border-bottom:1px solid var(--rule);transition:color .25s,border-color .25s;}
.page-auth .auth-note a:hover{color:var(--ink);border-bottom-color:var(--ochre);}
.page-auth .code-row{display:flex;gap:8px;justify-content:center;align-items:stretch;margin-top:10px;}
.fld__in--code{max-width:170px;text-transform:uppercase;text-align:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.1em;}

/* a large stamped figure (e.g. the waitlist queue position) — a fact, in ink */
.page-auth .auth-fig{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:16px 0 14px;margin:0 0 22px;text-align:center;}
.page-auth .auth-fig b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;
  font-size:27px;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;display:block;}
.page-auth .auth-fig span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--graphite);display:block;margin-top:4px;}

/* ══ .page-legal — counsel documents on the marketing shell ══ */
.page-legal .legal-wrap{padding:clamp(44px,7vh,80px) 0 clamp(52px,8vh,96px);}
.page-legal .legal-document{max-width:66ch;margin:0 auto;
  font-size:16.5px;line-height:1.62;color:var(--ink);}
.page-legal .legal-document h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(30px,4vw,44px);line-height:1.05;letter-spacing:-.018em;margin:0 0 10px;color:var(--ink);}
.page-legal .doc-meta{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);
  margin:0 0 clamp(26px,4vh,38px);}
.page-legal .legal-document h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(21px,2.4vw,26px);line-height:1.2;letter-spacing:-.012em;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:8px;margin:clamp(34px,5vh,48px) 0 14px;}
.page-legal .legal-document h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:19px;line-height:1.25;color:var(--ink);margin:24px 0 8px;}
.page-legal .legal-document p{margin:0 0 14px;}
.page-legal .legal-document a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule);transition:border-color .25s;}
.page-legal .legal-document a:hover{border-bottom-color:var(--ochre);}
.page-legal .legal-document ul,.page-legal .legal-document ol{margin:0 0 14px;padding-left:22px;}
.page-legal .legal-document li{margin:0 0 7px;}
.page-legal .legal-document strong{font-weight:500;}
/* hairline tables — the house data style: no cell walls, ruled rows */
.page-legal .legal-document table{width:100%;border-collapse:collapse;margin:16px 0 20px;
  font-size:15px;line-height:1.5;}
.page-legal .legal-document th{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--graphite);text-align:left;border:0;border-bottom:1px solid var(--ink);
  background:transparent;padding:0 16px 7px 0;}
.page-legal .legal-document td{border:0;border-bottom:1px solid var(--rule-soft);
  padding:9px 16px 9px 0;vertical-align:top;color:var(--ink);}
.page-legal .legal-document th:last-child,.page-legal .legal-document td:last-child{padding-right:0;}
/* the disclaimer callout — specimen treatment (hairline + faint ink wash) */
.page-legal .disclaimer-callout{border:1px solid var(--rule);background:rgba(26,24,20,.026);
  padding:16px 20px 10px;margin:22px 0;}
.page-legal .note{border-left:2px solid var(--rule);padding:2px 0 2px 14px;
  color:var(--graphite);margin:14px 0;}
@media (max-width:640px){
  .page-legal .legal-document table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .page-legal .legal-document td,.page-legal .legal-document li{overflow-wrap:anywhere;}
}