/* ============================================================================
* help.css — the user guide's shared shell + prose styling. Composes the app's
* UI kit (../ui/phantasm-ui.css supplies :root tokens + components; load it
* FIRST). Every help page uses the same skeleton:
*
*
*
* …
*
*
* Category pages carry so nav.js can mark the
* active category and list ONLY its sections.
* ==========================================================================*/
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:74px; }
html,body{ margin:0; }
body{
background:var(--void);
color:var(--ink);
font-family:ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
font-size:14.5px; line-height:1.62;
-webkit-font-smoothing:antialiased;
}
.mono{ font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace; font-variant-numeric:tabular-nums; }
/* ---- app-style header bar — MIRRORS the app's rules exactly (logo crop, wordmark,
the amber head-divider, the muted uppercase sub-label); keep in sync with stochasm.html ---- */
.hp-head{
position:sticky; top:0; z-index:10;
display:flex; align-items:center; gap:14px;
height:56px; padding:0 20px;
background:var(--void); border-bottom:1px solid var(--line);
}
.hp-head .logo{
flex:0 0 auto; width:55px; align-self:stretch;
position:relative; overflow:hidden; margin:0 0 0 -20px; display:block;
}
.hp-head .logo a{ position:absolute; inset:0; display:block; }
.hp-head .logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hp-head h1{
margin:0; font-size:13px; font-weight:600; letter-spacing:.14em;
text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.hp-head .head-divider{
width:1px; height:24px; align-self:center; flex:0 0 auto; border-radius:1px;
background:linear-gradient(180deg,transparent,var(--accent) 22%,var(--accent) 78%,transparent);
opacity:.85;
}
.hp-head .sub{
font-size:12px; font-weight:500; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.hp-head .spacer{ flex:1; }
.hp-head a.btn{ text-decoration:none; }
/* ---- persistent left sidebar + content column ---- */
.hp-wrap{ display:flex; gap:40px; max-width:1180px; margin:0 auto; padding:34px 26px 90px; }
nav.side{ width:215px; flex:0 0 auto; position:sticky; top:76px; align-self:flex-start;
max-height:calc(100vh - 96px); overflow-y:auto; padding-right:6px; }
nav.side .vis-label{ margin-bottom:10px; }
nav.side a{ display:block; text-decoration:none; border-radius:6px; }
nav.side a.cat{
padding:6px 9px; margin:2px 0;
color:var(--muted); font-size:13px; font-weight:600;
}
nav.side a.cat:hover{ color:var(--ink); background:color-mix(in srgb, var(--cool) 8%, transparent); }
nav.side a.cat.on{
color:var(--cool);
background:color-mix(in srgb, var(--cool) 10%, transparent);
border-left:2px solid var(--cool); padding-left:7px;
}
nav.side a.sec-link{
padding:3px 9px 3px 21px; margin:1px 0;
color:var(--muted); font-size:12px;
}
nav.side a.sec-link:hover{ color:var(--ink); background:color-mix(in srgb, var(--cool) 8%, transparent); }
main.doc{ flex:1; min-width:0; max-width:760px; }
/* ---- prose ---- */
main.doc h2{
color:var(--accent); font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:650;
margin:54px 0 10px; padding-top:18px; border-top:1px solid var(--line);
}
main.doc section:first-of-type h2{ margin-top:8px; border-top:none; padding-top:0; }
main.doc h3{ font-size:15.5px; margin:26px 0 6px; color:var(--ink); font-weight:640; }
main.doc p{ margin:9px 0; color:#c8d2ea; }
main.doc li{ margin:5px 0; color:#c8d2ea; }
main.doc a{ color:var(--cool); text-decoration:none; }
main.doc a:hover{ text-decoration:underline; }
main.doc strong{ color:var(--ink); }
code,kbd{
font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12.5px;
background:color-mix(in srgb, var(--cool) 8%, transparent);
border:1px solid var(--edge); border-radius:5px; padding:1px 5px; color:var(--ink);
}
kbd{ background:rgba(120,150,210,0.10); }
main.doc table{ border-collapse:collapse; width:100%; margin:12px 0; font-size:13px; }
main.doc th{ text-align:left; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
padding:6px 10px; border-bottom:1px solid var(--edge); }
main.doc td{ padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; color:#c8d2ea; }
main.doc td:first-child{ white-space:nowrap; }
/* ---- cards + callouts ---- */
.card{ border:1px solid var(--edge); border-radius:8px; background:rgba(10,14,24,0.4); padding:12px 14px; margin:14px 0; }
.card .t{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.tip{ border-left:3px solid var(--cool); background:color-mix(in srgb, var(--cool) 6%, transparent);
border-radius:0 8px 8px 0; padding:9px 13px; margin:13px 0; font-size:13px; color:#c8d2ea; }
.warn{ border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent);
border-radius:0 8px 8px 0; padding:9px 13px; margin:13px 0; font-size:13px; color:#d9cba8; }
/* ---- inline UI-look samples (rule glyphs etc.) ---- */
.chip{ display:inline-flex; align-items:center; gap:6px; }
.sw{ width:11px; height:11px; border-radius:3px; display:inline-block; border:1px solid rgba(255,255,255,0.25); vertical-align:-1px; }
.pill{ display:inline-block; font-family:ui-monospace,Menlo,monospace; font-size:10.5px; font-weight:700;
border-radius:4px; padding:1px 5px; color:#0a0f1d; vertical-align:1px; }
.glyphrow{ display:flex; align-items:center; gap:10px; margin:6px 0; }
.glyphrow svg{ flex:0 0 auto; }
.keyline{ color:var(--muted); font-size:12px; }
/* ---- in-guide screenshots ---- */
figure.fig{ margin:16px 0; }
figure.fig img{ width:100%; height:auto; display:block; border:1px solid var(--edge); border-radius:10px; }
figure.fig figcaption{ color:var(--faint); font-size:12px; margin-top:7px; }
/* ---- homepage: hero + stacked tiles (the original site's pattern: image ABOVE title + tagline) ---- */
.hero{ text-align:center; padding:26px 0 8px; }
.hero img{ width:132px; height:132px; border-radius:16px; border:1px solid var(--edge); }
main.doc .hero h2{ margin:18px 0 0; font-size:26px; letter-spacing:.3em; text-transform:uppercase; font-weight:700;
color:var(--ink); border:none; padding:0; }
.hero p{ margin:8px 0 0; color:var(--muted); font-size:15px; }
.hero p em{ color:var(--cool); font-style:normal; font-weight:600; }
.hero + .tile{ margin-top:44px; }
.tile{ margin:0 0 52px; text-align:center; }
.tile .shot{ display:block; border:1px solid var(--edge); border-radius:10px; overflow:hidden;
background:var(--void2); line-height:0; transition:border-color .15s, transform .15s; }
.tile .shot:hover{ border-color:color-mix(in srgb, var(--cool) 55%, transparent); transform:translateY(-2px); }
.tile .shot img{ width:100%; height:auto; display:block; }
.tile h3{ margin:14px 0 0; font-size:21px; font-weight:700; }
.tile h3 a{ color:var(--ink); }
.tile h3 a:hover{ color:var(--cool); text-decoration:none; }
.tile .tag{ color:var(--muted); font-size:14px; font-style:italic; margin:2px 0 0; }
/* ---- gallery grid ---- */
.gal-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.gal-grid a{ display:block; border:1px solid var(--edge); border-radius:8px; overflow:hidden;
background:var(--void2); line-height:0; transition:border-color .15s, transform .15s; }
.gal-grid a:hover{ border-color:color-mix(in srgb, var(--cool) 55%, transparent); transform:translateY(-2px); }
.gal-grid img{ width:100%; height:auto; display:block; }
.hp-foot{ border-top:1px solid var(--line); margin-top:70px; padding:18px 4px 8px; color:var(--faint); font-size:12px; }
/* On an actual phone the app can't run (stochasm.html shows its #mobile-gate), so the header's
"Open the app" link is pointless there — hide it. SAME media query as the app's gate; keep in sync. */
@media (pointer:coarse) and (max-width:600px), (pointer:coarse) and (max-height:520px){
.hp-head a.open-app{ display:none; }
}
@media (max-width:860px){
.hp-head{ gap:10px; }
.hp-head .sub, .hp-head .head-divider{ display:none; } /* the wordmark alone is enough on a phone */
.hp-head a.btn{ white-space:nowrap; font-size:11.5px; padding:6px 10px; }
.hp-wrap{ flex-direction:column; gap:14px; padding-top:20px; }
nav.side{ position:static; width:auto; max-height:none; }
nav.side a.cat{ /* categories become a compact wrapping chip row on phones */
display:inline-block; margin:2px 6px 2px 0;
padding:4px 11px; font-size:12px;
border:1px solid var(--edge); border-radius:7px;
}
nav.side a.cat.on{ border:1px solid var(--cool); padding-left:11px; }
nav.side a.sec-link{ display:none; } /* phones: category chips only — sections are one scroll away */
main.doc table{ display:block; overflow-x:auto; } /* wide reference tables scroll inside their own box instead of stretching the page */
.gal-grid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.hero img{ width:104px; height:104px; }
main.doc .hero h2{ font-size:21px; }
.tile h3{ font-size:18px; }
}