/* Door-factory reference/answer-library chrome — identity pass 2026-08-02
   (products/doors/DESIGN_SYSTEM.md). One sheet, two faces, all identity in
   config tokens (theme.gold* = the per-door ACCENT slot: teal on
   smoganswers.com, slate on smogglossary.com — navy ink foundation shared):
     body.ref       knowledge-base register (Stripe-docs calm: docs bar
                    header, search-first home, answer cards, quiet related
                    lists). Type: Public Sans (USWDS lineage = officialness).
     body.glossary  dictionary register (serif masthead + rule lines, paper
                    ground, sticky A-Z letter rail, serif headwords).
   Appended after this sheet by build_door.py: _shared/reference_extras.css
   (citeline/tanchor — they consume the same accent tokens) + mesh.css. */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,500&display=swap');

:root{
  --navy:#0f2942; --navy-700:#173a5c; --navy-50:#eef3f8;
  --gold:#475569; --gold-deep:#334155; --gold-ink:#334155;
  --gold-bg:#eef2f7; --gold-line:#cfd8e3;
  --bg:#f6f5f1; --surface:#fffefa; --ink:#1c2430; --mut:#5b6875; --line:#e3e9f0;
  --r:12px; --r-sm:9px; --maxw:820px;
  --f-body:"Public Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sh-sm:0 1px 2px rgba(16,33,52,.04),0 1px 3px rgba(16,33,52,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font:16px/1.65 var(--f-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
::selection{background:var(--gold-bg);color:var(--gold-ink)}
a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── header: docs bar (.ref default) ─────────────────────────────────── */
header{background:var(--navy);color:#fff;position:relative}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-line))}
.hd-in{max-width:var(--maxw);margin:0 auto;padding:14px 18px 12px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo{font-weight:800;font-size:clamp(19px,4.4vw,22px);letter-spacing:-.4px;text-decoration:none;line-height:1;white-space:nowrap}
.logo .lg-a{color:#fff}
.logo .lg-b{color:var(--gold-line)}
.hnav{display:flex;gap:4px}
.hnav a{color:rgba(255,255,255,.85);text-decoration:none;font-size:13.5px;font-weight:600;padding:8px 10px;border-radius:7px}
.hnav a:hover{color:#fff;background:rgba(255,255,255,.09)}
.tag{max-width:var(--maxw);margin:0 auto;padding:0 18px 14px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.75)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.crumb{font-size:13px;color:var(--mut);margin:18px 0 6px}
.crumb a{color:var(--gold-ink);text-decoration:none;font-weight:600}
.crumb a:hover{text-decoration:underline}

h1{font-size:clamp(23px,4.6vw,30px);font-weight:800;color:var(--navy);letter-spacing:-.55px;line-height:1.18;margin:6px 0 12px;max-width:26ch}
.wrap h2{font-size:17.5px;font-weight:700;color:var(--navy);letter-spacing:-.2px;margin:30px 0 12px;position:relative;padding-left:13px}
.wrap h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:2px;background:var(--gold)}
.lede{font-size:16px;line-height:1.65;color:var(--mut);margin-bottom:14px;max-width:65ch}
.lede a{color:var(--gold-ink);font-weight:600}
.wrap p,.wrap li{max-width:65ch}

/* ── answer card ─────────────────────────────────────────────────────── */
.ans{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-sm);padding:18px 20px;margin:12px 0;box-shadow:var(--sh-sm)}
.ans .direct{font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.6}
.ans ul{margin:12px 0 4px;padding-left:22px;color:var(--ink);font-size:14.5px;line-height:1.75}
.ans li{margin:3px 0}
.ans .anchor{font-size:12.5px;color:var(--mut);margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}

/* ── related answers: quiet list ─────────────────────────────────────── */
.rel{list-style:none;margin:8px 0 4px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.rel li{padding:11px 15px;border-bottom:1px solid var(--line)}
.rel li:last-child{border-bottom:0}
.rel a{font-weight:600;color:var(--navy);text-decoration:none;font-size:14.5px}
.rel a:hover{color:var(--gold-ink);text-decoration:underline;text-decoration-color:var(--gold-line)}
.rel .noPage{color:var(--ink);font-weight:600;font-size:14.5px}
.rel .snip{display:block;font-size:13px;color:var(--mut);font-weight:400;margin-top:3px;line-height:1.55}

/* ── category chips ──────────────────────────────────────────────────── */
.cats{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.cats a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;background:var(--surface);border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--navy);text-decoration:none}
.cats a:hover{border-color:var(--gold);color:var(--gold-ink);background:var(--gold-bg)}
.cats .ct{font-size:11px;font-weight:700;color:var(--gold-ink);background:var(--gold-bg);border-radius:999px;padding:1px 7px}
.qlist{list-style:none;margin:8px 0 4px}
.qlist li{padding:10px 4px;border-bottom:1px solid var(--line)}
.qlist a{font-weight:600;color:var(--navy);text-decoration:none;font-size:14.5px}
.qlist a:hover{color:var(--gold-ink)}
.qlist .snip{display:block;font-size:13px;color:var(--mut);margin-top:3px}

/* ── client-side answer search (home, injected by gen_official.py) ───── */
.sbox{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:4px 14px;margin:14px 0 6px;box-shadow:var(--sh-sm);transition:border-color .15s}
.sbox:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-bg)}
.sbox svg{flex:none;color:var(--mut)}
.sbox input{flex:1;border:0;background:none;font:15.5px/1.4 var(--f-body);color:var(--ink);padding:11px 0;outline:none}
.sbox input::placeholder{color:var(--mut);opacity:.8}
.skbd{flex:none;font-size:11.5px;font-weight:700;color:var(--mut);border:1px solid var(--line);border-radius:5px;padding:2px 7px;background:var(--bg)}
.sres{margin:10px 0 4px}
.sres .scount{font-size:12.5px;color:var(--mut);margin:2px 0 8px}
.scard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 15px;margin:8px 0;text-decoration:none;box-shadow:var(--sh-sm)}
.scard:hover{border-color:var(--gold)}
.scard .sq{font-weight:700;color:var(--navy);font-size:15px;line-height:1.4}
.scard:hover .sq{color:var(--gold-ink)}
.scard .ss{display:block;font-size:13px;color:var(--mut);margin-top:3px;line-height:1.55}
.schip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:999px;padding:1px 8px;margin-bottom:5px}
.snone{font-size:14px;color:var(--mut);padding:14px 2px}
body.searching .lede,body.searching .cats,body.searching .qlist,body.searching .wrap>h2{display:none}

/* ── glossary face (body.glossary): dictionary register ──────────────── */
.glossary header{background:var(--surface);color:var(--ink);border-bottom:3px double var(--gold-deep)}
.glossary header::after{display:none}
.glossary .hd-in{flex-direction:column;gap:6px;padding:30px 18px 6px;justify-content:center}
.glossary .logo{font-family:var(--f-serif);font-weight:700;font-size:clamp(27px,6.4vw,40px);letter-spacing:-.2px;text-align:center}
.glossary .logo .lg-a{color:var(--ink)}
.glossary .logo .lg-b{color:var(--gold-deep);font-style:italic}
.glossary .hnav a{color:var(--gold-ink)}
.glossary .hnav a:hover{color:var(--ink);background:var(--gold-bg)}
.glossary .tag{text-align:center;color:var(--mut);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:16px}
.glossary h1{font-family:var(--f-serif);font-weight:500;font-style:italic;font-size:clamp(17px,3.4vw,20px);color:var(--mut);letter-spacing:0;max-width:none;margin:2px 0 14px}
.glossary .crumb{display:none}

/* sticky A-Z letter rail */
.aznav{display:flex;flex-wrap:wrap;gap:5px;margin:0 -18px 14px;padding:10px 18px;position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.aznav a{display:inline-flex;min-width:32px;min-height:32px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-weight:700;font-size:13px;color:var(--gold-ink);text-decoration:none}
.aznav a:hover{border-color:var(--gold-deep);background:var(--gold-bg);color:var(--ink)}
.azhead{font-family:var(--f-serif);color:var(--gold-deep);font-size:30px;font-weight:700;margin:30px 0 6px;border-bottom:2px solid var(--gold-line);padding-bottom:4px;scroll-margin-top:64px}
.gterm{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 18px;margin:10px 0;scroll-margin-top:64px}
.gterm dt{font-family:var(--f-serif);font-weight:600;font-size:17.5px;color:var(--navy);line-height:1.4}
.gterm dd{margin:7px 0 0;font-size:14.5px;line-height:1.7;color:var(--ink);max-width:65ch}
.gterm .anchor{font-size:12px;color:var(--mut);font-style:italic;margin-top:7px;padding-top:6px;border-top:1px dashed var(--line)}
/* pilcrow anchors (stable ids — the ¶ affordance of a dictionary entry) */
.glossary .gterm .tanchor{font-size:0;text-decoration:none}
.glossary .gterm .tanchor::before{content:"¶";font-size:14px;font-family:var(--f-serif);color:var(--gold-deep)}

/* ES toggle line */
.langline{font-size:13px;color:var(--mut);margin:4px 0 10px}
.langline a{color:var(--gold-ink);font-weight:600}

/* ── officialness pages (/about/ /privacy/ /contact/, gen_official.py) ── */
.doc p,.doc ul{margin:0 0 14px;max-width:65ch;font-size:15px;line-height:1.75}
.doc ul{padding-left:22px}
.doc .updated{font-size:12.5px;color:var(--mut);margin:-4px 0 18px}
.doc a{color:var(--gold-ink);font-weight:600}

/* ── footer (fnav/fprov appended by the officialness layer) ──────────── */
footer{margin:44px 0 48px;padding-top:20px;border-top:1px solid var(--line);text-align:center;font-size:12.5px;line-height:1.75;color:var(--mut)}
footer a{color:var(--gold-ink);font-weight:600}
.fnav{margin:10px 0 2px}
.fnav a{display:inline-block;padding:2px 9px;color:var(--navy);text-decoration:none;font-weight:600}
.fnav a:hover{color:var(--gold-ink);text-decoration:underline}
.fprov{margin-top:6px;font-size:11.5px;color:var(--mut)}

@media(max-width:430px){.ans{padding:15px 15px}.skbd{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* _shared/reference_extras.css — AEO furniture for the reference archetype
   (appended after _template/reference/style.css by build_door.py).
   Covers: the per-answer "cite us" line (stable-anchor URL surface) and the
   per-glossary-entry anchor link. */
.citeline{margin:14px 0 4px;padding:10px 14px;background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:var(--r-sm);font-size:12.5px;line-height:1.7;color:var(--gold-ink)}
.citeline .citeurl{color:var(--navy);font-weight:700;text-decoration:none;word-break:break-all;border-bottom:1px solid var(--gold)}
.citeline .citeurl:hover{color:var(--gold-ink)}
.tanchor{margin-left:7px;color:var(--gold-deep);font-weight:800;font-size:14px;text-decoration:none;opacity:.45}
.tanchor:hover,.gterm:target .tanchor{opacity:1}
.gterm:target,.ans:target{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-bg)}

/* _shared/mesh.css — cross-door footer link strip (config internal_mesh,
   default OFF). Appended to a door's built style.css by build_door.py's
   seo_harden pass ONLY when the door opts in. Fallback values keep the strip
   legible even on archetypes whose stylesheet uses different token names. */
.doormesh{margin:26px auto 0;padding:12px 4px 0;border-top:1px dashed var(--line,#e3e9f0);font-size:12.5px;line-height:2;color:var(--mut,#5b6875);text-align:center}
.doormesh .dm-t{font-weight:700;color:var(--mut,#5b6875);margin-right:6px}
.doormesh a{display:inline-block;margin:0 7px;color:var(--navy,#0f2942);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold-line,#ecdcac)}
.doormesh a:hover{color:var(--gold-ink,#6f560f);border-bottom-color:var(--gold,#c9a227)}