/* ============================================================================
* help.css — the user guide's shared shell + prose styling. Composes the app's
* UI kit (../ui/phantasm-ui.css supplies the :root tokens + every component;
* load it FIRST). Every page in the guide is the same skeleton:
*
* …
*
* ← filled by nav.js (category tree)
* …
*
*
* Category pages carry so nav.js can mark the
* active category and list ONLY its sections.
*
* COLOURS COME FROM THE KIT, never from literals — re-theming Adamastor must
* stay a :root edit and the guide must follow it. The one local token is
* --prose: body copy wants to sit between --ink (heading weight, too loud for
* paragraphs) and --muted (a label colour, too quiet to read at length). That
* is the same host-token pattern adamastor.html uses for --launch-bg.
* ==========================================================================*/
:root{
--prose: color-mix(in srgb, var(--ink) 76%, var(--muted));
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:74px; } /* a deep link from the app's [?] must clear the sticky header */
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;
}
/* ---- the Adamastor mark: img/logo.png, the same asset the app header, splash
and README carry — the Spirit of the Cape medallion, its colours baked
in from the palette (--cool lines, --accent rope ring) by
img/make-logo.js. One file, one cache entry, every surface. ---- */
.mark{ display:block; height:auto; }
/* ---- app-style header bar — MIRRORS adamastor.html's rules (the square
logo block, the wordmark, the amber head-divider, the muted uppercase
sub-label); keep the two in sync ---- */
.hp-head{
position:sticky; top:0; z-index:10;
display:flex; align-items:center; gap:14px;
height:56px; padding:0 20px; /* FIXED height (not min-height): a definite height is what lets the logo block be square */
background:var(--void); border-bottom:1px solid var(--line);
}
.hp-head .logo{
flex:0 0 auto; width:55px; align-self:stretch; /* 55px = the header height minus its 1px border */
margin:0 0 0 -20px; /* cancel the header padding: flush to the window edge */
display:flex; align-items:center; justify-content:center;
background:var(--void2); border-right:1px solid var(--line);
}
.hp-head .logo a{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.hp-head .logo img{ width:34px; }
.hp-head h1{
margin:0; font-size:13px; font-weight:600; letter-spacing:.14em;
text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.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:var(--prose); }
main.doc li{ margin:5px 0; color:var(--prose); }
main.doc a{ color:var(--cool); text-decoration:none; }
main.doc a:hover{ text-decoration:underline; }
/* THE PROSE RULE ABOVE OUTRANKS A BARE CLASS (15.18.4). `main.doc a:hover` carries two type
selectors, so `a.tile:hover`'s own `text-decoration:none` never arrived and a hovered tile
underlined its title and both taglines. Anything inside the column that is not prose states
its case from inside `main.doc` too. */
main.doc a.tile:hover{ text-decoration:none; }
main.doc p.keyline{ color:var(--muted); } /* beaten by main.doc p's colour */
main.doc .warn strong, main.doc .tip strong{ color:inherit; } /* a callout's bold lead is the callout's colour, not the prose ink */
main.doc strong{ color:var(--ink); }
code,kbd{
font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12.5px;
overflow-wrap:anywhere; /* a URL or a path has no break of its own: it wraps
rather than running out of the column (15.18.4) */
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:color-mix(in srgb, var(--cool) 12%, transparent); }
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:var(--prose); }
main.doc td:first-child{ white-space:nowrap; }
/* a cell with more to say than one sentence takes paragraphs; the outer two shed their margins
so the row keeps the table's own rhythm */
main.doc td p{ margin:9px 0; }
main.doc td p:first-child{ margin-top:0; }
main.doc td p:last-child{ margin-bottom:0; }
main.doc pre{
margin:12px 0; padding:12px 14px; overflow-x:auto; /* wide JSON scrolls inside its own box — the page body never scrolls sideways */
border:1px solid var(--edge); border-radius:8px;
background:color-mix(in srgb, var(--void2) 60%, transparent);
font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12.5px; line-height:1.55; color:var(--ink);
}
main.doc pre code{ background:none; border:none; padding:0; font-size:inherit; }
/* ---- cards + callouts ---- */
.card{ border:1px solid var(--edge); border-radius:8px;
background:color-mix(in srgb, var(--void2) 60%, transparent); 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:var(--prose); }
.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:color-mix(in srgb, var(--accent) 42%, var(--ink)); }
.keyline{ color:var(--muted); font-size:12px; }
/* ---- inline swatch. Its colour is CONTENT (a value the app actually ships,
e.g. a layer's default palette entry), so it arrives inline per use. ---- */
.sw{ width:11px; height:11px; border-radius:3px; display:inline-block;
border:1px solid var(--edge); vertical-align:-1px; }
/* ---- homepage: hero + stacked category tiles. Adamastor ships no artwork, so a
tile is the mark + a title + a tagline + the sections it holds. ---- */
.hero{ text-align:center; padding:26px 0 10px; }
.hero .mark{ width:132px; margin:0 auto; }
main.doc .hero h2{ margin:20px 0 0; font-size:26px; letter-spacing:.3em; text-transform:uppercase; font-weight:700;
color:var(--ink); border:none; padding:0; }
.hero p{ margin:10px 0 0; color:var(--muted); font-size:15px; }
.hero p em{ color:var(--cool); font-style:normal; font-weight:600; }
.hero + .tile{ margin-top:38px; }
a.tile{
display:flex; align-items:flex-start; gap:16px;
padding:15px 17px; margin:0 0 13px;
border:1px solid var(--edge); border-radius:12px; background:var(--card);
text-decoration:none; transition:border-color .15s, transform .15s;
}
a.tile:hover{ border-color:color-mix(in srgb, var(--cool) 55%, transparent); transform:translateY(-2px); text-decoration:none; }
.tile .tmark{
flex:0 0 auto; width:46px; height:46px; border-radius:10px;
display:flex; align-items:center; justify-content:center;
background:var(--void2); border:1px solid var(--edge);
}
.tile .tmark img{ width:29px; }
main.doc .tile h3{ margin:0; font-size:17.5px; font-weight:700; color:var(--ink); }
a.tile:hover h3{ color:var(--cool); }
.tile .tag{ margin:2px 0 0; color:var(--muted); font-size:13.5px; font-style:italic; }
.tile .secs{ margin:6px 0 0; color:var(--faint); font-size:11.5px; letter-spacing:.03em; }
.hp-foot{ border-top:1px solid var(--line); margin-top:70px; padding:18px 4px 8px; color:var(--faint); font-size:12px; }
.hp-foot a{ color:var(--faint); }
/* On an actual phone the app can't run (adamastor.html raises 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 the two 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 */
.hero .mark{ width:104px; }
main.doc .hero h2{ font-size:21px; }
main.doc .tile h3{ font-size:16px; }
}