/* Generated by drafts/help-center/_tools/make-help-center.js - edit there. */
/* Help center drafts: homepage look (Fraunces + Figtree, evergreen). DARK ALWAYS - the
   owner's call, Nov 2 2026: the homepage defaults dark, and the help center mirrors it
   everywhere. (The light evergreen palette, if ever wanted for an in-app light pass-through:
   bg #f3f0e8, surface #fffdf8, text #13261c, muted #56675d, border #e0dacd, primary #1b5a3f,
   primary-ink #fff, soft #e9f1ea.) */
:root { color-scheme: dark; --bg:#0f2219; --surface:#173126; --text:#eef5ef; --muted:#a9bfb2; --border:#2b4c3c; --primary:#8fe3b4; --primary-ink:#0f2219; --soft:#1d3a2c; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Figtree",system-ui,sans-serif; font-size:17px; line-height:1.6; }
h1,h2,h3 { font-family:"Fraunces",Georgia,serif; line-height:1.22; letter-spacing:-0.01em; margin:0; }
a { color:var(--primary); font-weight:600; }
.nav { position:sticky; top:0; z-index:3; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.nav-inner { max-width:880px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:14px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:800; color:var(--text); text-decoration:none; font-size:17px; }
.leaf { width:26px; height:26px; } .leaf-blade { fill:#e9b949; } .leaf-stem { fill:#8a6d3b; } .leaf-veins { stroke:#8a6d3b; fill:none; stroke-linecap:round; }
.nav-spacer { flex:1; }
.nav a.quiet { color:var(--muted); text-decoration:none; font-weight:600; font-size:15px; }
.btn { display:inline-block; font-weight:700; font-size:15px; border-radius:10px; padding:9px 18px; text-decoration:none; background:var(--primary); color:var(--primary-ink); }
.wrap { max-width:820px; margin:0 auto; padding:40px 20px 72px; }
.kicker { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin:0 0 10px; }
h1 { font-size:34px; margin-bottom:10px; }
.lead { font-size:18px; color:var(--muted); margin:0 0 26px; max-width:38em; }
.crumbs { font-size:14px; color:var(--muted); margin:0 0 18px; } .crumbs a { color:var(--muted); }
/* search */
.search-wrap { position:relative; margin:0 0 30px; }
#help-search { width:100%; font:inherit; padding:14px 18px 14px 46px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); }
#help-search:focus { outline:2px solid var(--primary); outline-offset:1px; }
.search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); pointer-events:none; }
#help-search-results { position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 14px 30px rgba(0,0,0,.14); overflow:hidden; z-index:2; }
#help-search-results[hidden] { display:none; }
#help-search-results a { display:block; padding:11px 16px; text-decoration:none; border-bottom:1px solid var(--border); }
#help-search-results a:last-child { border-bottom:0; }
#help-search-results a:hover, #help-search-results a:focus-visible { background:var(--soft); }
#help-search-results strong { display:block; color:var(--text); }
#help-search-results span { display:block; font-size:13px; color:var(--muted); font-weight:400; }
.hs-none { margin:0; padding:14px 16px; color:var(--muted); font-size:14px; }
/* hub cards */
.topic-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0 34px; }
.topic-card { display:block; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:20px; color:var(--text); text-decoration:none; }
.topic-card:hover, .topic-card:focus-visible { border-color:var(--primary); }
.topic-card h2 { font-size:19px; margin:6px 0 4px; }
.topic-card p { margin:0; font-size:14px; color:var(--muted); font-weight:400; }
.topic-card .count { font-size:12.5px; color:var(--primary); font-weight:700; }
.topic-icon { font-size:20px; }
/* popular */
.pop-list { margin:0 0 8px; padding:0; list-style:none; }
.pop-list li { margin:0 0 8px; }
/* topic pages */
section h2 { font-size:21px; margin:34px 0 12px; }
details.qa { background:var(--surface); border:1px solid var(--border); border-radius:14px; margin-bottom:10px; }
details.qa summary { padding:14px 40px 14px 18px; font-weight:700; cursor:pointer; list-style:none; position:relative; border-radius:14px; }
details.qa summary::-webkit-details-marker { display:none; }
details.qa summary::after { content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:20px; color:var(--muted); font-weight:400; }
details.qa[open] summary::after { content:"\2212"; }
details.qa summary:hover { background:var(--soft); }
details.qa .qa-body { padding:0 18px 14px; color:var(--muted); }
details.qa .qa-body p { margin:0 0 10px; } details.qa .qa-body p:last-child { margin-bottom:0; }
details.qa:target { border-color:var(--primary); }
details.qa { scroll-margin-top: 84px; } /* a search jump lands with the question's pill at the top, under the sticky nav, with air */
ol.steps { margin:0 0 10px; padding-left:22px; color:var(--text); }
ol.steps li { margin-bottom:12px; }
ol.steps li::marker { font-weight:700; color:var(--primary); }
ul.bullets { margin:0 0 10px; padding-left:22px; color:var(--text); }
ul.bullets li { margin-bottom:6px; }
ul.bullets li::marker { color:var(--primary); }
.step-shot { display:block; width:100%; max-width:280px; margin:10px 0 2px; border:1px solid var(--border); border-radius:14px; }
/* contact + footer */
.contact { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px; margin-top:40px; text-align:center; }
.contact h2 { font-size:22px; margin-bottom:6px; }
.contact p { color:var(--muted); margin:0 auto 16px; max-width:34em; }
.related { margin-top:34px; display:flex; flex-wrap:wrap; gap:8px; }
.related a { font-size:14px; text-decoration:none; border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:8px 14px; color:var(--text); }
.related a:hover { border-color:var(--primary); color:var(--primary); }
.footer { border-top:1px solid var(--border); padding:22px 20px 36px; text-align:center; font-size:14px; color:var(--muted); }
.footer a { color:var(--muted); }
@media (max-width:640px) { h1 { font-size:27px; } .topic-grid { grid-template-columns:1fr; } }
/* Practice answers: only while "Show practices to the public" is on (help.js adds the class). */
html:not(.practices-public) .practice-public { display:none !important; }
html.practices-public .practice-hide { display:none !important; }