/* ===========================================================================
   EntityWire — design system (single source of truth)
   ---------------------------------------------------------------------------
   Three sections, in order: TOKENS, RESET, COMPONENTS.
   RULES (enforced by tools/design_gate.py):
     - Colors and fonts appear as raw values ONLY inside the TOKENS block.
       Everywhere below, use var(--token). No hex, no font-family literals.
     - Spacing and type come off the scales (--space-*, --text-*). Do not
       hand-pick a px value to "nudge" one element — change the scale or the
       component, never the instance. This is the rule the last two builds
       broke on (centering/voids/type re-fixed lane by lane).
     - The LOOK lives entirely in the TOKENS block. Re-skinning EntityWire =
       editing the ~70 lines below and nothing else. The values here now are a
       neutral placeholder skin; the look pass tunes them.
   =========================================================================== */

/* ============================ 1. TOKENS ================================== */
:root{
  /* -- type families -- */
  --font-head:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* -- type scale (rem, 16px base) -- */
  --text-xs:.75rem;      /* 12 — uppercase labels, captions */
  --text-sm:.875rem;     /* 14 — secondary text, nav, help */
  --text-base:1rem;      /* 16 — body */
  --text-md:1.125rem;    /* 18 — lede, emphasis */
  --text-lg:1.375rem;    /* 22 — h2 */
  --text-xl:1.75rem;     /* 28 — section head */
  --text-2xl:clamp(1.9rem,4vw,2.7rem); /* h1 / hero */

  /* -- weights & line-heights -- */
  --fw-normal:400; --fw-med:500; --fw-semi:600; --fw-bold:700;
  --lh-tight:1.12; --lh-snug:1.35; --lh-body:1.55;

  /* -- spacing scale (4px base; use these, never raw px) -- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem;

  /* -- semantic layout -- */
  --pad:var(--space-6);      /* page inset */
  --gap:var(--space-6);      /* rhythm between stacked sections */
  --measure:1080px;          /* content column max width */

  /* -- radii, borders, elevation -- */
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --bw:1px;
  --shadow-1:0 1px 2px rgba(20,28,40,.06),0 2px 8px rgba(20,28,40,.05);
  --shadow-2:0 12px 30px -12px rgba(14,22,38,.28);

  /* -- color roles (LIGHT) -- */
  --bg:#f3f4f2;          /* page ground */
  --surface:#ffffff;     /* cards, panels, header */
  --surface-2:#f8f9f8;   /* inset / aside fill */
  --ink:#171a1f;         /* primary text */
  --muted:#5b6470;       /* labels, captions, board names */
  --line:#d5d9d5;        /* firm hairline: borders, header/footer edges */
  --line-soft:#e4e7e3;   /* soft hairline: row/cell dividers */
  --wash:#eef2f1;        /* tint fill: status band, insets */
  --accent:#1f5a7a;      /* links, primary buttons, focus */
  --accent-d:#164560;    /* accent pressed */
  --on-accent:#ffffff;   /* text on accent fill */
  --focus:#5aa0c8;       /* focus ring */

  /* -- status roles (entity standing) -- */
  --ok:#2f6b43;          /* active / good standing */
  --warn:#8a6a10;        /* delinquent / lapsed */
  --bad:#a23127;         /* revoked / suspended */
  --neutral:#5b6470;     /* dissolved / inactive */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14171b; --surface:#1c2025; --surface-2:#22272d; --ink:#e9ecef;
    --muted:#9aa3ad; --line:#333a42; --line-soft:#2a3038; --wash:#232a30;
    --accent:#6fb0d6; --accent-d:#8cc2e2; --on-accent:#0e1519; --focus:#6fb0d6;
    --ok:#5fae77; --warn:#c9a23f; --bad:#d97c72; --neutral:#9aa3ad;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 14px 34px -12px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#14171b; --surface:#1c2025; --surface-2:#22272d; --ink:#e9ecef;
  --muted:#9aa3ad; --line:#333a42; --line-soft:#2a3038; --wash:#232a30;
  --accent:#6fb0d6; --accent-d:#8cc2e2; --on-accent:#0e1519; --focus:#6fb0d6;
  --ok:#5fae77; --warn:#c9a23f; --bad:#d97c72; --neutral:#9aa3ad;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 14px 34px -12px rgba(0,0,0,.55);
}

/* ============================ 2. RESET ================================== */
/* Base element defaults set ONCE. (Last builds re-fixed "stray underlines",
   "card names drop bold", "one type per column" per page — because there was
   no reset. Set here, they never recur.) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--text-base);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head);line-height:var(--lh-tight);margin:0}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ========================== 3. COMPONENTS =============================== */

/* -- container & rhythm -- */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--pad)}
.page{padding:var(--space-7) 0 var(--space-8)}
.stack>*+*{margin-top:var(--gap)}

/* -- header -- */
.site-head{background:var(--surface);border-bottom:var(--bw) solid var(--line)}
.site-head .bar{max-width:var(--measure);margin:0 auto;padding:var(--space-3) var(--pad);
  display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.mark{display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-head);font-weight:var(--fw-semi);font-size:var(--text-md);
  letter-spacing:-.01em;color:var(--ink)}
.mark:hover{text-decoration:none}
.mark svg{width:22px;height:22px;color:var(--accent)}
.nav{margin-left:auto;display:flex;gap:var(--space-5);align-items:center;
  font-size:var(--text-sm);color:var(--muted)}
.nav a{color:var(--muted)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:var(--fw-semi)}
.nav .cta{color:var(--on-accent);background:var(--accent);font-weight:var(--fw-semi);
  padding:var(--space-2) var(--space-4);border-radius:var(--r-sm)}
.nav .cta:hover{background:var(--accent-d);text-decoration:none}

/* -- headings & intro type -- */
.eyebrow{font-size:var(--text-xs);font-weight:var(--fw-semi);letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin:0 0 var(--space-3)}
h1{font-size:var(--text-2xl);font-weight:var(--fw-med);letter-spacing:-.015em;
  margin:0 0 var(--space-3);text-wrap:balance}
h2{font-size:var(--text-lg);font-weight:var(--fw-semi);letter-spacing:-.01em;
  margin:0 0 var(--space-4)}
h2.sec{border-top:var(--bw) solid var(--line);padding-top:var(--space-5)}
.lede{font-size:var(--text-md);color:var(--muted);line-height:var(--lh-snug);
  max-width:62ch;margin:0}
.sub{font-size:var(--text-sm);color:var(--muted);max-width:64ch;margin:0}
.crumb{font-size:var(--text-sm);color:var(--muted);margin:0 0 var(--space-4)}

/* -- search / lookup card -- */
.lookup{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-1);padding:var(--space-4);display:grid;gap:var(--space-3);align-items:end}
.lookup.home{grid-template-columns:1.4fr 1fr auto}
.field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.field label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.07em;
  font-weight:var(--fw-semi);color:var(--muted)}
.field input,.field select{background:var(--surface-2);border:var(--bw) solid var(--line);
  border-radius:var(--r-sm);padding:var(--space-3) var(--space-3);font-size:var(--text-base);
  width:100%}
.field input:focus,.field select:focus{outline:2px solid var(--focus);border-color:var(--accent)}
.btn{font-weight:var(--fw-semi);background:var(--accent);color:var(--on-accent);border:none;
  border-radius:var(--r-sm);padding:var(--space-3) var(--space-5);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.btn:hover{background:var(--accent-d);text-decoration:none;color:var(--on-accent)}
.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--accent);border:var(--bw) solid var(--accent)}
.btn.ghost:hover{background:var(--wash);color:var(--accent)}
.lookup-note{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--muted)}

/* -- result card (the instrument that beats a link-out) -- */
.rec{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);overflow:hidden}
.rec .band{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);
  background:var(--wash);border-bottom:var(--bw) solid var(--line-soft);
}
.rec .band .dot{width:11px;height:11px;border-radius:50%;background:var(--ok);flex:none}
.rec .band .status{font-family:var(--font-head);font-weight:var(--fw-semi);
  font-size:var(--text-lg);color:var(--ok);line-height:var(--lh-tight)}
.rec .band .qual{font-size:var(--text-sm);color:var(--muted)}
.rec .band .name{margin-left:auto;text-align:right}
.rec .band .name .n{font-family:var(--font-head);font-weight:var(--fw-semi);font-size:var(--text-md)}
.rec .band .name .s{font-size:var(--text-sm);color:var(--muted)}
.rec.is-warn .band .dot{background:var(--warn)} .rec.is-warn .band .status{color:var(--warn)}
.rec.is-bad .band .dot{background:var(--bad)} .rec.is-bad .band .status{color:var(--bad)}
.rec.is-neutral .band .dot{background:var(--neutral)} .rec.is-neutral .band .status{color:var(--neutral)}
.facts{display:grid;grid-template-columns:repeat(4,1fr)}
.facts .c{padding:var(--space-4) var(--space-5);border-right:var(--bw) solid var(--line-soft)}
.facts .c:last-child{border-right:none}
.facts .l{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:var(--fw-semi);margin:0 0 var(--space-2)}
.facts .v{font-size:var(--text-base);font-weight:var(--fw-semi)}
.rec .prov{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;
  justify-content:space-between;padding:var(--space-3) var(--space-5);background:var(--surface-2);
  border-top:var(--bw) solid var(--line-soft);font-size:var(--text-sm);color:var(--muted)}
.rec .prov b{color:var(--ink);font-weight:var(--fw-semi)}
/* The watch form replaces the CTA button in the provenance row after a click
   (static/lookup.js): one email field, one button, one line of honest fine print. */
.rec .prov .watch{flex-basis:100%;display:flex;flex-direction:column;gap:var(--space-2);
  padding-top:var(--space-2);border-top:var(--bw) solid var(--line-soft)}
.rec .prov .watch label{color:var(--ink);font-weight:var(--fw-semi)}
.rec .prov .watch .row{display:flex;gap:var(--space-2);flex-wrap:wrap}
.rec .prov .watch input{flex:1 1 220px;background:var(--surface);border:var(--bw) solid var(--line);
  border-radius:var(--r-sm);padding:var(--space-2) var(--space-3);font:inherit;color:var(--ink)}
.rec .prov .watch input:focus{outline:2px solid var(--focus);border-color:var(--accent)}
.rec .prov .watch .fine{margin:0;font-size:var(--text-xs);color:var(--muted)}
.rec .prov .watch .fine.done{font-size:var(--text-sm);color:var(--ok)}
.rec .prov .watch .fine.err{color:var(--bad)}

/* -- EIN card and not-found card (the EIN wing, 2026-09-07) --
   Data reads in tabular body figures, not mono (house rule); kinds are plain
   text; no colored bars. Source + as-of sits under every fact. */
.rec .head{display:flex;gap:var(--space-5);align-items:flex-start;justify-content:space-between;
  padding:var(--space-5) var(--space-5) var(--space-4);border-bottom:var(--bw) solid var(--line-soft)}
.rec .head .kind{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.07em;
  font-weight:var(--fw-semi);color:var(--muted);margin:0 0 var(--space-2)}
.rec .head .n{font-family:var(--font-head);font-weight:var(--fw-semi);font-size:var(--text-lg);
  line-height:var(--lh-tight);margin:0}
.rec .head .aka,.rec .head .addr{font-size:var(--text-sm);color:var(--muted);margin:var(--space-2) 0 0;max-width:60ch}
.rec .einbox{flex:none;text-align:right;padding-left:var(--space-5);border-left:var(--bw) solid var(--line-soft)}
.rec .einbox .l{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.07em;
  font-weight:var(--fw-semi);color:var(--muted);margin:0 0 var(--space-1)}
.rec .einbox .num{font-size:var(--text-xl);font-weight:var(--fw-semi);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;margin:0}
.facts .c{border-bottom:var(--bw) solid var(--line-soft)}
.facts .c:nth-child(4n){border-right:none}
.facts .src{font-size:var(--text-xs);color:var(--muted);margin:var(--space-1) 0 0}
.rec .body{padding:var(--space-4) var(--space-5)}
.rec .body h4{font-size:var(--text-base);font-weight:var(--fw-semi);margin:var(--space-5) 0 var(--space-2)}
.srcs th,.srcs td{text-align:left;padding:var(--space-2) 0;border-bottom:var(--bw) solid var(--line-soft);
  font-size:var(--text-sm)}
.srcs th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:var(--fw-semi)}
.srcs .num,.srcs td.num{text-align:right;font-variant-numeric:tabular-nums}
.steps{margin:0;padding-left:var(--space-5);font-size:var(--text-sm);color:var(--ink)}
.steps li+li{margin-top:var(--space-2)}
#results:empty{display:none}
.results-note{font-size:var(--text-sm);color:var(--muted)}

/* -- state grid (equal-height cards: owner rule) -- */
.state-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.state-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-3);
  background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  padding:var(--space-4);height:100%}
.state-card:hover{border-color:var(--accent);box-shadow:var(--shadow-1);text-decoration:none}
.state-card .seal{width:40px;height:40px;border-radius:50%;background:var(--wash);
  border:var(--bw) solid var(--line);display:grid;place-items:center;
  font-size:var(--text-xs);font-weight:var(--fw-bold);color:var(--muted)}
.state-card .nm{display:block;font-size:var(--text-base);color:var(--ink);font-weight:var(--fw-semi)}
.state-card .ag{display:block;font-size:var(--text-sm);color:var(--muted);margin-top:2px}
.state-card .go{width:32px;height:32px;border-radius:50%;border:var(--bw) solid var(--accent);
  color:var(--accent);display:grid;place-items:center}
.state-card:hover .go{background:var(--accent);color:var(--on-accent)}

/* -- trust row (whitespace + top rule, no dividers, no pills) -- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--space-7);
  border-top:var(--bw) solid var(--line)}
.trust .t{padding:var(--space-4) 0 0}
.trust h3{font-size:var(--text-base);font-weight:var(--fw-semi);margin:0 0 var(--space-2)}
.trust p{font-size:var(--text-sm);color:var(--muted);line-height:var(--lh-snug)}

/* -- footer -- */
.site-foot{border-top:var(--bw) solid var(--line);background:var(--surface);
  margin-top:var(--space-8)}
.site-foot .bar{max-width:var(--measure);margin:0 auto;padding:var(--space-6) var(--pad);
  display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-7);
  font-size:var(--text-sm);color:var(--muted)}
.site-foot a{color:var(--muted)}
.site-foot .disc{flex-basis:100%;color:var(--muted);font-size:var(--text-sm)}

/* -- responsive -- */
@media (max-width:820px){
  .lookup.home{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
  .state-grid{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr;gap:0}
  .rec .band{flex-wrap:wrap}
  .rec .head{flex-direction:column}
  .rec .einbox{text-align:left;padding-left:0;border-left:none}
  .facts .c:nth-child(2n){border-right:none}
  .rec .band .name{margin-left:0;text-align:left;flex-basis:100%}
  .nav{gap:var(--space-4);font-size:var(--text-sm)}
}