/* portal archetype chrome — network design canon (navy authority + gold
   accent), satellite-look idioms: card grid, pinned bottom action bar.
   Token values mirror build_door.py THEME_DEFAULTS (findsmog/style.css
   lineage) — hand-carried here because the portal is a hand-built dist.
   Identity pass 2026-08-02 (DESIGN_SYSTEM.md): app-store-style accent chips —
   each card carries ITS door's accent, hexes mirrored from that door's
   config theme (findstarstation STAR blue, findoilchange amber,
   findgasstation fuel green, smoganswers teal, smogglossary slate, the three
   deal landers network navy+gold). Keep in sync with those configs. */
:root{
  --navy:#0f2942; --navy-700:#173a5c; --navy-50:#eef3f8;
  --gold:#c9a227; --gold-deep:#a8851a; --gold-ink:#6f560f; --gold-bg:#fbf5e3; --gold-line:#ecdcac;
  --bg:#eef2f6; --surface:#ffffff; --ink:#16212e; --mut:#5b6875; --line:#e3e9f0;
  --r:14px; --r-sm:10px; --maxw:880px; --bar-h:62px;
  --f-body:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sh-sm:0 1px 2px rgba(16,33,52,.05),0 1px 3px rgba(16,33,52,.07);
  --sh-md:0 6px 20px rgba(16,33,52,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font:16px/1.6 var(--f-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
::selection{background:var(--gold);color:var(--navy)}
a{color:var(--navy-700)}

/* ── hero ── */
header.hero{background:linear-gradient(176deg,var(--navy-700),var(--navy) 70%);color:#fff;padding:30px 16px 34px;position:relative}
header.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.hero-in{max-width:var(--maxw);margin:0 auto;text-align:center}
.logo{font-size:clamp(24px,5vw,30px);font-weight:800;letter-spacing:-.5px;display:inline-flex;align-items:center;gap:8px;line-height:1;text-decoration:none}
.logo .fmark{width:.92em;height:.92em;color:var(--gold);flex:none}
.logo .lg-a{color:#fff}.logo .lg-b{color:var(--gold)}
.hh1{font-size:clamp(28px,6.4vw,44px);font-weight:800;letter-spacing:-.8px;line-height:1.08;margin:18px auto 10px;max-width:22ch;text-wrap:balance;color:#fff}
.hh1 .gold{color:var(--gold)}
.hsub{font-size:15px;line-height:1.55;opacity:.88;margin:0 auto;max-width:56ch;color:#fff}

/* ── card grid ── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:10px 16px 30px}
h2.sect{margin:30px 0 14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
h2.sect .sect-k{background:var(--gold-bg);color:var(--gold-ink);border:1px solid var(--gold-line);border-radius:999px;padding:5px 13px;display:inline-block}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:7px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--a,var(--gold));border-radius:var(--r);padding:16px 16px 15px;text-decoration:none;color:var(--ink);box-shadow:var(--sh-sm);transition:box-shadow .15s,transform .1s,border-color .15s}
.card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--a-line,var(--gold-line));border-top-color:var(--a,var(--gold))}
.c-chip{width:44px;height:44px;border-radius:12px;background:var(--a-bg,var(--gold-bg));border:1px solid var(--a-line,var(--gold-line));display:flex;align-items:center;justify-content:center;color:var(--a,var(--gold-deep));margin-bottom:2px}
.c-chip svg{width:24px;height:24px}
.c-chip .c-emoji{font-size:22px;line-height:1}
.c-name{font-weight:800;font-size:18px;letter-spacing:-.3px;color:var(--navy)}
.c-tag{font-size:14px;line-height:1.5;color:var(--mut);flex:1}
.c-go{font-size:13.5px;font-weight:700;color:var(--a-ink,var(--gold-ink))}
.card:hover .c-go{color:var(--a,var(--gold-deep))}

/* per-door accents — hexes mirror each sibling door's own config theme */
.a-star{--a:#155fa8;--a-ink:#125089;--a-bg:#e8f1fa;--a-line:#c3dcf2}
.a-cost{--a:#c9a227;--a-ink:#6f560f;--a-bg:#fbf5e3;--a-line:#ecdcac}
.a-answers{--a:#0d9488;--a-ink:#115e59;--a-bg:#effaf8;--a-line:#bfe8e2}
.a-glossary{--a:#475569;--a-ink:#334155;--a-bg:#eef2f7;--a-line:#cfd8e3}
.a-oil{--a:#b45309;--a-ink:#8a4a06;--a-bg:#fdf3e3;--a-line:#f3d9ae}
.a-gas{--a:#0e7a3b;--a-ink:#0d6434;--a-bg:#e7f5ec;--a-line:#c2e5cf}

/* ── about + footer ── */
.about{margin:36px 0 8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;box-shadow:var(--sh-sm)}
.about h2{font-size:19px;letter-spacing:-.3px;color:var(--navy);margin-bottom:8px}
.about p{font-size:14.5px;color:var(--mut)}
footer.foot{border-top:1px solid var(--line);padding:20px 0 26px;text-align:center;font-size:13px;color:var(--mut)}
footer.foot a{color:var(--navy-700)}
footer.foot .fnav{display:flex;justify-content:center;gap:22px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
footer.foot .fnav a{text-decoration:none}
footer.foot .fnav a:hover{color:var(--gold-deep)}
footer.foot .fprov{font-size:12px;margin-top:8px;line-height:1.7}

/* ── static doc pages (/about/ /privacy/) ── */
.topbar{background:linear-gradient(176deg,var(--navy-700),var(--navy) 70%);padding:16px;position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.tb-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.tb-in .logo{font-size:22px}
.tnav{display:flex;gap:18px;font-size:13.5px;font-weight:700}
.tnav a{color:#fff;text-decoration:none;opacity:.9}
.tnav a:hover{opacity:1;color:var(--gold)}
.doc{max-width:720px;margin:0 auto;padding:26px 16px 40px;font-size:15.5px;line-height:1.7}
.doc h1{font-size:clamp(24px,5vw,32px);font-weight:800;letter-spacing:-.6px;color:var(--navy);margin:6px 0 14px}
.doc h2{font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--navy);margin:24px 0 8px}
.doc p{margin:12px 0}
.doc ul{margin:12px 0;padding-left:24px}
.doc li{margin-bottom:6px}
.doc .updated{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
body.docpage{padding-bottom:0}

/* ── pinned bottom action bar (satellite idiom) ── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:flex;gap:8px;justify-content:center;background:rgba(11,23,37,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.12);padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.b-act{display:flex;align-items:center;gap:8px;flex:1;max-width:300px;justify-content:center;border-radius:12px;padding:11px 12px;font-size:14.5px;font-weight:800;text-decoration:none;letter-spacing:.2px}
.b-act svg{width:18px;height:18px;flex:none}
.b-gold{background:var(--gold);color:var(--navy)}
.b-gold:active{background:var(--gold-deep);color:#fff}
.b-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)}