/* The hub's stylesheet. Lifted out of index.html on 2026-08-03, on Anthony's
"split it" — the file was one 12,600-line page and miserable to work in.
⚠️ Nothing about the page's behaviour changed and it is NOT faster: three
static files with no build step ship the same bytes plus one extra request.
The win is editability and readable diffs. */
/* ========================================================================
JV Automation Hub — self-contained, data-driven portal.
Visual system: Microsoft Fluent, to match the tools this workspace
actually runs in (Excel, Power Automate, SharePoint). Segoe UI with an
Open Sans fallback, communication blue #0F6CBD, a 14/13/12/11 type ramp,
4px controls and 8px cards, and Fluent's two-part depth shadows. The old
Swiss-721 + near-black + coral + 52px-pill look is gone.
==================================================================== */
/* ---- Light tokens (default) ---- */
:root {
/* Brand ramp — the design system's communication blue (2026-08-24). */
--brand-40:#0A3960; --brand-60:#0E4C82; --brand-80:#0F6CBD; --brand-90:#2886DE;
--brand-100:#479EF5; --brand-130:#96C6FA; --brand-150:#CFE4FA; --brand-160:#EBF3FC;
--danger-fg:#B10E1C; --danger-bg:#FDF3F4; --danger-stroke:#EEACB2;
--accent:#0F6CBD; --accent-strong:#0E4C82; --accent-ink:#0A3960; --accent-hover:#115EA3;
--accent-soft:#EBF3FC; --accent-soft-stroke:#CFE4FA;
/* ⚠️ --fg-4 (#808080) is ~3.5:1 on white — under WCAG AA for small text.
It stays for NON-TEXT ink only: dots, list markers, chevrons/arrows,
dotted underlines and close glyphs. Small-text labels were moved to
--fg-3 in the 2026-08-27 contrast pass — don't put text back on it. */
--fg-1:#242424; --fg-2:#424242; --fg-3:#616161; --fg-4:#808080; --fg-inv:#FFF;
--bg-canvas:#F0EFED; --bg-1:#FFF; --bg-2:#FAFAFA; --bg-3:#F5F5F5;
--bg-top:#FFFFFF; --bg-top-fg:#242424;
--stroke-1:#D1D1D1; --stroke-2:#E0E0E0; --stroke-3:#EBEBEB; --stroke-strong:#B3B3B3;
--success-fg:#0E700E; --success-bg:#F1FAF1; --success-stroke:#9FD89F;
--warning-fg:#BC4B09; --warning-bg:#FFF9F5; --warning-stroke:#FDCFB4;
--idea-fg:#6B4C9A; --idea-bg:#F7F4FB; --idea-stroke:#CFC0E4;
--exp-fg:#0E7A6F; --exp-bg:#EBF7F5; --exp-stroke:#8FD0C6;
--branch:#8764B8;
/* Coverage / status fills (always shipped with a text label) */
--cov-automated:var(--accent); --cov-partial:#DE9A45;
--cov-candidate:#2F8F53; --cov-manual:#808080;
--font-sans:"Segoe UI","Open Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
--font-mono:"Cascadia Code",Consolas,"SF Mono",ui-monospace,monospace;
/* One control radius (4px) and one surface radius (8px) — the pill token is
kept so every existing control picks the new shape up in one place. */
--radius-s:4px; --radius-m:4px; --radius-l:8px; --radius-xl:8px; --radius-pill:4px; --radius-circle:999px;
--shadow-1:0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
--shadow-2:0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
--shadow-6:0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
--shadow-hero:0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14);
--ring:0 0 0 2px rgba(15,108,189,.60);
--maxw:1180px;
}
/* ---- Ultrawide: let the page use the screen (his 2026-08-13 note) ----
The shell steps up with the viewport instead of pinning every monitor to
one 1180px column; laptops and iPads keep the old measure untouched.
Prose blocks keep their ch caps — a wider page buys more columns and
breathing room, never 40-word lines. */
@media (min-width:1500px){ :root { --maxw:1400px; } }
@media (min-width:1800px){ :root { --maxw:1660px; } }
@media (min-width:2240px){ :root { --maxw:1980px; } }
/* ---- Dark tokens: the saved switch wins; with nothing saved, the OS preference ---- */
/* One set of values, written twice because CSS cannot alias a block: the
media query covers "nothing saved yet, OS says dark", the attribute block
covers the Dark switch (persisted as localStorage jvhub_theme and applied
to before first paint by the inline script in index.html's head). */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* The dark theme's values are the design system's dark remap
(Component Kit Additions, "Dark mode", 2026-09-01), verbatim — same token
names, one attribute. The brand ramp is unchanged; only the neutrals,
the semantic sets and the accent aliases move. */
--accent:#479EF5; --accent-strong:#96C6FA; --accent-ink:#96C6FA; --accent-hover:#2886DE;
--accent-soft:rgba(71,158,245,.16); --accent-soft-stroke:rgba(71,158,245,.45);
--fg-1:#F5F5F5; --fg-2:#D6D6D6; --fg-3:#B3B3B3; --fg-4:#8A8A8A; --fg-inv:#FFFFFF;
--bg-canvas:#1F1F1F; --bg-1:#292929; --bg-2:#333333; --bg-3:#3D3D3D;
--bg-top:#292929; --bg-top-fg:#F5F5F5;
--stroke-1:#4D4D4D; --stroke-2:#3D3D3D; --stroke-3:#383838; --stroke-strong:#666666;
--success-fg:#54B054; --success-bg:#16241A; --success-stroke:#3E7B3E;
--warning-fg:#E8974A; --warning-bg:#2B2013; --warning-stroke:#8A5A2E;
--danger-fg:#E8646F; --danger-bg:#2B1417; --danger-stroke:#8C3A41;
--idea-fg:#B18FDB; --idea-bg:#221833; --idea-stroke:#3E2E58;
--exp-fg:#7DD7C8; --exp-bg:#122B27; --exp-stroke:#2A5B52;
--branch:#B18FDB;
--cov-partial:#E8974A; --cov-candidate:#54B054; --cov-manual:#5C5C5C;
--shadow-1:0 0 2px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.6);
--shadow-2:0 0 2px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.6);
--shadow-6:0 0 2px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.6);
--shadow-hero:0 0 2px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.6);
--ring:0 0 0 2px #1F1F1F, 0 0 0 4px #479EF5;
}
}
:root[data-theme="dark"] {
/* The dark theme's values are the design system's dark remap
(Component Kit Additions, "Dark mode", 2026-09-01), verbatim — same token
names, one attribute. The brand ramp is unchanged; only the neutrals,
the semantic sets and the accent aliases move. */
--accent:#479EF5; --accent-strong:#96C6FA; --accent-ink:#96C6FA; --accent-hover:#2886DE;
--accent-soft:rgba(71,158,245,.16); --accent-soft-stroke:rgba(71,158,245,.45);
--fg-1:#F5F5F5; --fg-2:#D6D6D6; --fg-3:#B3B3B3; --fg-4:#8A8A8A; --fg-inv:#FFFFFF;
--bg-canvas:#1F1F1F; --bg-1:#292929; --bg-2:#333333; --bg-3:#3D3D3D;
--bg-top:#292929; --bg-top-fg:#F5F5F5;
--stroke-1:#4D4D4D; --stroke-2:#3D3D3D; --stroke-3:#383838; --stroke-strong:#666666;
--success-fg:#54B054; --success-bg:#16241A; --success-stroke:#3E7B3E;
--warning-fg:#E8974A; --warning-bg:#2B2013; --warning-stroke:#8A5A2E;
--danger-fg:#E8646F; --danger-bg:#2B1417; --danger-stroke:#8C3A41;
--idea-fg:#B18FDB; --idea-bg:#221833; --idea-stroke:#3E2E58;
--exp-fg:#7DD7C8; --exp-bg:#122B27; --exp-stroke:#2A5B52;
--branch:#B18FDB;
--cov-partial:#E8974A; --cov-candidate:#54B054; --cov-manual:#5C5C5C;
--shadow-1:0 0 2px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.6);
--shadow-2:0 0 2px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.6);
--shadow-6:0 0 2px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.6);
--shadow-hero:0 0 2px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.6);
--ring:0 0 0 2px #1F1F1F, 0 0 0 4px #479EF5;
}
* { box-sizing:border-box; }
/* Defensive floor: any icon without an explicit size rule renders at text size,
never ballooning to fill its flex parent. Class-scoped rules below override it. */
svg { width:1em; height:1em; flex-shrink:0; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:400 14px/1.5 var(--font-sans); color:var(--fg-1); background:var(--bg-canvas);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.01em; text-wrap:balance; }
a { color:inherit; }
button { font-family:inherit; }
::selection { background:rgba(15,108,189,.28); }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--radius-s); }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,32px); }
.muted { color:var(--fg-3); }
.hidden { display:none !important; }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.eyebrow { font:600 11px/1.2 var(--font-sans); text-transform:uppercase; letter-spacing:.12em; color:var(--fg-3); }
.skip { position:absolute; left:-999px; top:8px; z-index:100; background:var(--bg-1); color:var(--fg-1);
padding:10px 14px; border-radius:var(--radius-m); box-shadow:var(--shadow-6); }
.skip:focus { left:12px; }
/* (the old 48px command-bar rules lived here — retired 2026-08-24; the
component kit's top bar is styled in its own section at the end) */
/* "Live from repo" — the page fetches script bodies and the close model from
this deployment on open, so the badge is a statement of fact, not a slogan. */
.livebadge { display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px; flex-shrink:0;
border-radius:var(--radius-s); background:var(--success-bg); border:1px solid var(--success-stroke);
color:var(--success-fg); font:600 11px var(--font-sans); white-space:nowrap; }
.livebadge .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
/* A fetch that failed says so in the same place the success is claimed. */
.livebadge.stale { background:var(--warning-bg); border-color:var(--warning-stroke); color:var(--warning-fg); }
.iconbtn { width:32px; height:32px; flex-shrink:0; display:grid; place-items:center; cursor:pointer;
border:1px solid var(--stroke-1); background:var(--bg-1); color:var(--fg-2);
border-radius:var(--radius-s); transition:background .12s; }
.iconbtn:hover { background:var(--bg-3); color:var(--fg-1); }
.iconbtn svg { width:16px; height:16px; }
main { padding:0 0 72px; }
.view { animation:rise .28s cubic-bezier(.22,.61,.36,1) both; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
section.block { padding-top:34px; }
.block-head .sub { color:var(--fg-3); font-size:13px; margin-top:3px; }
/* (retired with the top-bar shell, 2026-08-24: the Home ribbon, coverage tiles and month rhythm) */
/* ============================ Buttons (Fluent) ============================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:32px; padding:0 12px;
border-radius:var(--radius-s); border:1px solid transparent; cursor:pointer; text-decoration:none;
font:600 13px var(--font-sans); transition:background .12s, border-color .12s; }
.btn svg { width:15px; height:15px; }
.btn.primary { background:var(--accent); color:#FFFFFF; }
.btn.primary:hover { background:var(--accent-hover); }
.btn.ghost { background:var(--bg-1); color:var(--fg-1); border-color:var(--stroke-1); }
.btn.ghost:hover { background:var(--bg-3); }
.btn.subtle { background:transparent; color:var(--fg-1); border-color:transparent; }
.btn.subtle:hover { background:var(--bg-3); }
.btn.sm { height:28px; padding:0 10px; font-size:12px; }
/* (retired with the top-bar shell, 2026-08-24: the coverage meter) */
/* ============================ Badges ============================ */
.badge { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:var(--radius-circle);
font:600 11px var(--font-sans); border:1px solid transparent; white-space:nowrap; }
.badge .dot { width:6px; height:6px; border-radius:50%; }
.b-live { background:var(--success-bg); color:var(--success-fg); border-color:var(--success-stroke); }
.b-live .dot { background:var(--success-fg); }
.b-ready { background:var(--warning-bg); color:var(--warning-fg); border-color:var(--warning-stroke); }
.b-ready .dot { background:var(--warning-fg); }
.b-draft { background:var(--bg-2); color:var(--fg-2); border-color:var(--stroke-2); }
.b-draft .dot { background:var(--fg-4); }
.b-idea { background:var(--idea-bg); color:var(--idea-fg); border-color:var(--idea-stroke); }
.b-idea .dot { background:var(--idea-fg); }
.b-exp { background:var(--exp-bg); color:var(--exp-fg); border-color:var(--exp-stroke); border-style:dashed; }
.b-exp .dot { background:var(--exp-fg); }
.b-cat { background:var(--bg-2); color:var(--fg-3); border-color:var(--stroke-2); }
.b-share { background:rgba(15,108,189,.12); color:var(--accent-ink); border-color:rgba(15,108,189,.4); }
:root[data-theme="dark"] .b-share, :root:not([data-theme="light"]) .b-share { color:var(--accent); }
.b-internal { background:var(--bg-2); color:var(--fg-3); border-color:var(--stroke-2); }
.b-fb-up { background:var(--success-bg); color:var(--success-fg); border-color:var(--success-stroke); }
.b-fb-down { background:var(--warning-bg); color:var(--warning-fg); border-color:var(--warning-stroke); }
.b-super { background:var(--bg-2); color:var(--fg-3); border-color:var(--stroke-2); border-style:dashed; }
.b-super .dot { background:var(--fg-4); }
/* Phasing out: still running, but something newer replaces it. Warning ink
rather than the dead-grey of Superseded — this one is still load-bearing. */
.b-phasing { background:var(--warning-bg); color:var(--warning-fg); border-color:var(--warning-stroke); border-style:dashed; }
.b-phasing .dot { background:var(--warning-fg); }
.b-bundle { background:rgba(15,108,189,.12); color:var(--accent-ink); border-color:rgba(15,108,189,.4); }
:root[data-theme="dark"] .b-bundle, :root:not([data-theme="light"]) .b-bundle { color:var(--accent); }
/* ============================ Library ============================ */
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; }
.toolbar .find { display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; flex:1; min-width:200px;
background:var(--bg-1); border:1px solid var(--stroke-1); border-radius:var(--radius-pill); }
.toolbar .find:focus-within { border-color:var(--accent); box-shadow:var(--ring); }
.toolbar .find svg { width:16px; height:16px; opacity:.6; flex-shrink:0; }
.toolbar .find input { flex:1; min-width:0; border:none; background:transparent; color:var(--fg-1); font:400 14px var(--font-sans); outline:none; }
select.pill { height:38px; border:1px solid var(--stroke-1); border-radius:var(--radius-pill); padding:0 32px 0 14px;
font:600 13px var(--font-sans); background:var(--bg-1); color:var(--fg-1); cursor:pointer; appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 11px center; background-size:15px; }
select.pill:focus-visible { border-color:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.card { display:flex; flex-direction:column; gap:9px; padding:18px; text-align:left; cursor:pointer; font:inherit;
color:inherit; background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-l);
box-shadow:var(--shadow-1); transition:transform .12s, box-shadow .15s, border-color .15s; }
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-6); border-color:var(--stroke-strong); }
.card .row1 { display:flex; align-items:flex-start; gap:8px; }
.card h3 { font-size:15px; flex:1; line-height:1.3; }
.card .desc { color:var(--fg-2); font-size:13px; line-height:1.55; }
.card .meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; }
.updated { display:inline-flex; align-items:center; gap:5px; font:600 11px var(--font-mono);
font-variant-numeric:tabular-nums; color:var(--fg-3); }
.updated svg { width:12px; height:12px; opacity:.65; }
.card .updated { margin-top:8px; }
.detail .updated { margin-top:12px; font-size:12px; }
footer .fl .upd { color:var(--fg-3); font:600 12px var(--font-mono); font-variant-numeric:tabular-nums; }
footer .links a .upd-mini { color:var(--fg-3); font:600 10px var(--font-mono); margin-left:2px; }
.empty { padding:44px; text-align:center; color:var(--fg-3); border:1px dashed var(--stroke-1); border-radius:var(--radius-l); }
/* ---- Detail ---- */
.detail { background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-xl);
padding:clamp(20px,3vw,30px); box-shadow:var(--shadow-2); max-width:820px; }
.detail h2 { font-size:clamp(20px,3vw,26px); }
.detail > .meta { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 4px; }
.detail > p.summary { margin:14px 0 0; color:var(--fg-2); font-size:15px; line-height:1.6; max-width:64ch; }
.detail section { margin-top:26px; }
.detail section > .eyebrow { margin-bottom:10px; }
.detail p { margin:0 0 8px; color:var(--fg-2); }
.detail ol, .detail ul { margin:0; padding-left:20px; }
.detail li { margin:6px 0; line-height:1.55; }
.detail li::marker { color:var(--fg-4); }
code { font-family:var(--font-mono); font-size:.92em; background:var(--bg-2); border:1px solid var(--stroke-2);
border-radius:5px; padding:1px 5px; }
.code { position:relative; background:#141310; color:#EDEBE6; border:1px solid #2C2A24; border-radius:var(--radius-m);
padding:14px 16px; font:12.5px/1.6 var(--font-mono); overflow-x:auto; white-space:pre; }
.code.scroll { max-height:440px; overflow-y:auto; }
.code .code-actions { position:absolute; top:10px; right:10px; display:flex; gap:6px; }
.code .copy { display:inline-flex; align-items:center; gap:5px; height:27px; padding:0 11px; border:none; border-radius:var(--radius-pill);
background:rgba(255,255,255,.14); color:#fff; cursor:pointer; font:600 11.5px var(--font-sans); }
.code .copy:hover { background:rgba(255,255,255,.26); }
.code .copy svg { width:13px; height:13px; }
.pointer { font:12.5px/1.6 var(--font-mono); background:var(--bg-2); border:1px solid var(--stroke-2);
border-radius:var(--radius-m); padding:10px 12px; color:var(--fg-2); overflow-x:auto; }
.fresh { text-transform:none; letter-spacing:0; font-weight:600; color:var(--fg-3); }
.osts-note { margin-top:10px; font-size:12.5px; color:var(--fg-3); line-height:1.55; }
.fb-row { display:flex; gap:8px; flex-wrap:wrap; }
.fbtn { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 15px; border:1px solid var(--stroke-1);
background:var(--bg-1); color:var(--fg-1); border-radius:var(--radius-pill); cursor:pointer; font:600 13px var(--font-sans); }
.fbtn:hover { background:var(--bg-2); }
.fbtn.on-up { background:var(--success-bg); color:var(--success-fg); border-color:var(--success-stroke); }
.fbtn.on-down { background:var(--warning-bg); color:var(--warning-fg); border-color:var(--warning-stroke); }
/* ============================ Footer ============================ */
footer { border-top:1px solid var(--stroke-2); margin-top:24px; }
footer .wrap { padding:26px clamp(16px,4vw,32px); display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between; }
footer .fl { display:flex; flex-direction:column; gap:4px; }
footer .fl .t { font-weight:600; color:var(--fg-2); font-size:13px; }
footer .fl .s { color:var(--fg-3); font-size:12px; max-width:60ch; line-height:1.5; }
footer .links { display:flex; gap:8px; flex-wrap:wrap; }
footer .links a { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border:1px solid var(--stroke-1);
border-radius:var(--radius-pill); text-decoration:none; color:var(--fg-2); font:600 12.5px var(--font-sans); }
footer .links a:hover { background:var(--bg-2); color:var(--fg-1); }
footer .links a svg { width:14px; height:14px; }
/* ============================ Responsive ============================ */
/* Phone: the ribbon keeps the brand mark and the tab strip (which scrolls on
its own); everything that only decorates it steps aside. */
@media (max-width:760px) {
.top .wrap { gap:8px; }
.brand .nm { display:none; }
.search { display:none; }
.livebadge { display:none; }
.top .ver { display:none; }
.nowbar { padding-top:16px; }
.nowbar .nb-r { width:100%; }
.covtile, .inbox { width:100%; }
.nowbar .cta .btn { flex:1; }
footer .wrap { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
* { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
.card:hover { transform:none; }
}
/* Copy toast */
.toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); opacity:0;
background:var(--fg-1); color:var(--bg-1); padding:10px 18px; border-radius:var(--radius-pill);
font:600 13px var(--font-sans); box-shadow:var(--shadow-6); pointer-events:none; z-index:50;
transition:opacity .2s, transform .2s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
/* ======================================================================
Automation Hub — layout upgrade (design import: 2a library / 2b-2c asset
page / 1c home). Reuses the existing coral/near-black token system; adds
the facet rail, grouped dense rows, the adaptive asset page, and the
dynamic home dashboard. Node/coverage colors map onto the --cov-* tokens.
==================================================================== */
/* ---- Fit accent colors (semantic, from the design's node vocabulary) ---- */
:root {
--fit-run:var(--cov-candidate); /* paste-and-run scripts (green) */
--fit-flow:var(--accent-strong); /* build-a-flow (coral) */
--fit-setup:var(--cov-partial); /* apply-a-setup (amber) */
--fit-query:#6B5BB5; /* load-some-data queries (violet) */
--fit-list:#3E7CB1; /* reference lists (blue) */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fit-query:#A79AE0; --fit-list:#7FB2DE; } }
:root[data-theme="dark"] { --fit-query:#A79AE0; --fit-list:#7FB2DE; }
/* ============================ Home: needs-you + changed ============== */
/* Grid items default to min-width:auto, so one long unbreakable row inside a
panel widens the whole page. Let the columns actually be the size we said. */
@media (max-width:820px){ .home-cols { grid-template-columns:1fr; } }
.panel { background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-l);
box-shadow:var(--shadow-1); padding:18px 20px; }
.panel > .ph { display:flex; align-items:baseline; gap:9px; margin-bottom:14px; }
.panel > .ph h3 { font-size:15.5px; }
.panel > .ph .c { font:600 11px var(--font-mono); color:var(--fg-3); background:var(--bg-2);
border-radius:var(--radius-circle); padding:1px 8px; }
.panel > .ph .sub { color:var(--fg-3); font-size:12px; margin-left:auto; }
.need .nt { display:block; font-weight:600; color:var(--fg-1); font-size:13.5px; }
.changed { display:flex; flex-direction:column; }
/* ============================ Library: facet rail ================= */
@media (max-width:800px){ .lib { grid-template-columns:1fr; } .facetrail { position:static !important; } }
.facetrail { display:flex; flex-direction:column; gap:20px; position:sticky; top:74px; }
.facet-h { font:600 11px var(--font-sans); text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); margin-bottom:9px; }
.fitbtn .ft .n { color:var(--fg-3); font-weight:600; font-family:var(--font-mono); font-size:12px; }
.chk { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--fg-2); cursor:pointer;
padding:4px 0; user-select:none; }
.chk input { accent-color:var(--accent-strong); width:15px; height:15px; flex:none; }
.chk .cn { color:var(--fg-3); font-family:var(--font-mono); font-size:11.5px; margin-left:auto; }
.chk .csw { width:14px; height:14px; flex:none; }
.chk .csw svg { width:14px; height:14px; }
/* A category with nothing in it yet still shows — dimmed, not hidden, so the
shelf is visible before anything sits on it. Still clickable: it lands on
an empty state that explains what will go there. */
.fitbtn.empty .ft, .fitbtn.empty .fd, .fitbtn.empty .fmark { opacity:.55; }
.fitbtn.empty[aria-pressed="true"] .ft,
.fitbtn.empty[aria-pressed="true"] .fd,
.fitbtn.empty[aria-pressed="true"] .fmark { opacity:1; }
.chk.empty { opacity:.55; }
.chk.empty:hover { opacity:1; }
.sortseg { display:flex; gap:6px; flex-wrap:wrap; }
.sbtn { height:28px; padding:0 11px; border-radius:var(--radius-pill); border:1px solid var(--stroke-1);
background:var(--bg-1); color:var(--fg-2); font:600 11.5px var(--font-sans); cursor:pointer; }
.sbtn:hover { background:var(--bg-2); }
.sbtn[aria-pressed="true"] { background:rgba(15,108,189,.12); border-color:rgba(15,108,189,.4); color:var(--accent-ink); }
:root[data-theme="dark"] .sbtn[aria-pressed="true"],
:root:not([data-theme="light"]) .sbtn[aria-pressed="true"] { color:var(--accent); }
.facet-h svg { width:13px; height:13px; margin-right:5px; vertical-align:-2px; opacity:.7; }
/* Empty-but-real category */
.emptycat { padding:38px 32px; border:1px dashed var(--stroke-1); border-radius:var(--radius-l);
background:var(--bg-1); max-width:620px; }
.emptycat > svg { width:30px; height:30px; color:var(--fit-query); }
.emptycat h3 { margin:12px 0 6px; font-size:17px; color:var(--fg-1); }
.emptycat p { margin:0; color:var(--fg-2); font-size:13.5px; line-height:1.6; }
.emptycat .ecl { margin:18px 0 8px; font:600 12px var(--font-sans); color:var(--fg-3);
text-transform:uppercase; letter-spacing:.04em; }
.emptycat ul { margin:0; padding:0; list-style:none; display:grid; gap:7px; }
.emptycat li { display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--fg-2); line-height:1.5; }
.emptycat li svg { width:15px; height:15px; flex:none; margin-top:2px; color:var(--fit-query); }
/* ---- Grouped dense rows ---- */
.fitgroups { display:flex; flex-direction:column; gap:18px; min-width:0; }
.fitgroup .gh { display:flex; align-items:baseline; gap:9px; padding:0 2px 8px; }
.fitgroup .gh .gm { width:15px; height:15px; flex:none; align-self:center; }
.fitgroup .gh .gm svg { width:15px; height:15px; }
.fitgroup .gh h3 { font-size:15px; }
.fitgroup .gh .gb { color:var(--fg-3); font-size:12px; }
.rows { background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-l);
box-shadow:var(--shadow-1); overflow:hidden; }
.arow .main { display:flex; gap:11px; min-width:0; align-items:flex-start; }
.arow .ai { width:30px; height:30px; flex:none; display:grid; place-items:center; background:var(--bg-2);
border-radius:var(--radius-m); }
.arow .ai svg { width:16px; height:16px; }
.arow .col { font-size:12px; color:var(--fg-3); min-width:0; }
.arow .col.parts { display:inline-flex; align-items:center; gap:5px; }
.arow .col.parts svg { width:12px; height:12px; opacity:.6; flex:none; }
.arow .col.parts span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arow .acts { display:flex; align-items:center; gap:2px; justify-content:flex-end; }
.arow .iact { width:28px; height:28px; border:none; background:transparent; border-radius:var(--radius-m);
cursor:pointer; display:grid; place-items:center; color:var(--fg-3); }
.arow .iact:hover { background:var(--bg-3); color:var(--fg-1); }
.arow .iact svg { width:15px; height:15px; }
@media (max-width:720px){
.arow { grid-template-columns:1fr auto; grid-auto-rows:min-content; row-gap:6px; }
.arow .col.reach, .arow .col.parts, .arow .col.upd { display:none; }
}
/* ---- Bundle cards + view toggle ---- */
.arow.light { opacity:.68; }
.viewseg { display:flex; gap:6px; }
.vbtn { flex:1; height:32px; border-radius:var(--radius-pill); border:1px solid var(--stroke-1); background:var(--bg-1);
font:600 12px var(--font-sans); color:var(--fg-2); cursor:pointer; }
.vbtn[aria-pressed="true"] { background:rgba(15,108,189,.12); border-color:rgba(15,108,189,.4); color:var(--accent-ink); }
:root[data-theme="dark"] .vbtn[aria-pressed="true"], :root:not([data-theme="light"]) .vbtn[aria-pressed="true"] { color:var(--accent); }
/* ============================ Asset page (adaptive) ================ */
.asset-top { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.asset-top .at-main { flex:1; min-width:260px; }
.asset-top h2 { font-size:clamp(20px,3vw,26px); }
.asset-top .badges { display:flex; flex-wrap:wrap; gap:7px; margin:11px 0 0; }
.asset-top .lede { margin:13px 0 0; color:var(--fg-2); font-size:13.5px; line-height:1.6; max-width:72ch; }
.asset-top .at-where { margin-top:9px; font:400 12px var(--font-sans); color:var(--fg-3); }
/* The buttons wrap among themselves, so this row must be allowed to shrink
below its content width — `flex:none` pinned it at the width of both
buttons side by side ("Download .ts" is wide) and hung it
off the right edge of a phone-width page. */
.asset-top .at-cta { display:flex; gap:8px; flex:0 1 auto; min-width:0; flex-wrap:wrap; }
.asset-grid { display:grid; grid-template-columns:1fr 290px; gap:18px; align-items:start; margin-top:20px; }
@media (max-width:840px){ .asset-grid { grid-template-columns:1fr; }
/* Stacked, the rail sits above the content — and a sticky element in a
single column scrolls over what follows it. Sticky is a two-column
affordance only. */
/* `.asset-grid >` on purpose: the base `.asset-rail { position:sticky }`
rule is declared AFTER this media query, so an equally-specific override
here would lose the cascade and the rail would keep scrolling over the
content below it. */
.asset-grid > .asset-rail { order:-1; position:static; } }
/* Build walkthroughs sit BELOW the grid at full page width — the step cards
hold long fx expressions and labelled parameter rows that the 1fr-minus-rail
column cramped ("column width is very tight", 2026-07-25). */
.asset-wide { margin-top:18px; }
.asset-main { display:flex; flex-direction:column; gap:16px; min-width:0; }
.asset-rail { display:flex; flex-direction:column; gap:14px; position:sticky; top:74px; }
.sec { background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-l);
box-shadow:var(--shadow-1); padding:16px 18px; }
.sec > .sh { display:flex; align-items:baseline; gap:9px; margin-bottom:12px; flex-wrap:wrap; }
.sec > .sh h3 { font-size:15px; }
.sec > .sh .note { color:var(--fg-3); font-size:12px; }
.sec > .sh .grow { flex:1; }
/* Kit parts grid */
.kit { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.kpart { display:flex; flex-direction:column; gap:7px; padding:12px; border:1px solid var(--stroke-2);
border-radius:var(--radius-m); background:var(--bg-1); }
.kpart:hover { box-shadow:var(--shadow-2); }
.kpart .kh { display:flex; align-items:center; gap:7px; }
.kpart .kn { width:22px; height:22px; flex:none; display:grid; place-items:center; background:rgba(15,108,189,.12);
border-radius:var(--radius-s); font:600 11px var(--font-mono); color:var(--accent-strong); }
.kpart .krole { font:600 12px var(--font-sans); color:var(--fg-1); }
.kpart .kfile { display:flex; align-items:center; gap:6px; min-width:0; }
.kpart .kfile svg { width:14px; height:14px; flex:none; color:var(--fg-3); }
.kpart .kfile span { font:11.5px var(--font-mono); color:var(--fg-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kpart .knote { font-size:11.5px; color:var(--fg-3); line-height:1.45; flex:1; }
.kpart .kact { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px; align-self:flex-start;
border:1px solid var(--stroke-1); border-radius:var(--radius-m); background:var(--bg-1);
font:600 11.5px var(--font-sans); color:var(--fg-1); cursor:pointer; text-decoration:none; }
.kpart .kact:hover { background:var(--bg-2); }
.kpart .kact svg { width:12px; height:12px; }
/* Setup: stages + checklist (checkboxes persist in localStorage) */
.stage { border:1px solid var(--stroke-2); border-radius:var(--radius-m); overflow:hidden; margin-bottom:8px; }
.stage:last-child { margin-bottom:0; }
.stage[open] { border-color:var(--stroke-strong); }
.stage > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:11px 13px; }
.stage > summary::-webkit-details-marker { display:none; }
.stage > summary:hover { background:var(--bg-2); }
.stage .sl { width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:50%;
border:1px solid var(--stroke-1); color:var(--fg-3); font:600 11px var(--font-mono); }
.stage[open] .sl { background:var(--accent); color:#FFFFFF; border-color:transparent; }
.stage .st { font-weight:600; font-size:13.5px; color:var(--fg-1); }
.stage .sm { font-size:12px; color:var(--fg-3); }
.stage .sc { font:600 11px var(--font-mono); color:var(--fg-3); margin-left:auto; }
.stage .schev { width:14px; height:14px; color:var(--fg-3); transition:transform .15s; flex:none; }
.stage[open] .schev { transform:rotate(180deg); }
.stage .sbody { padding:4px 14px 12px; border-top:1px solid var(--stroke-2); display:flex; flex-direction:column; gap:2px; }
.chkitem { display:flex; gap:10px; padding:7px 0; align-items:flex-start; cursor:pointer; }
.chkitem input { accent-color:var(--fit-run); margin-top:3px; flex:none; width:15px; height:15px; }
.chkitem span { font-size:13.5px; color:var(--fg-1); line-height:1.5; }
.chkitem input:checked + span { color:var(--fg-3); text-decoration:line-through; text-decoration-color:var(--stroke-strong); }
.pass { display:flex; gap:9px; margin:5px 0 3px 25px; padding:9px 12px; background:var(--success-bg);
border:1px solid var(--success-stroke); border-radius:var(--radius-m); }
.pass svg { width:15px; height:15px; flex:none; margin-top:1px; color:var(--success-fg); }
.pass span { font-size:12px; color:var(--success-fg); line-height:1.5; }
.pass b { font-weight:600; }
.setup-progress { display:flex; align-items:center; gap:9px; margin-top:2px; }
.setup-progress .track { flex:1; height:6px; background:var(--bg-3); border-radius:var(--radius-circle); overflow:hidden; }
.setup-progress .fill { height:100%; background:var(--fit-run); border-radius:var(--radius-circle); transition:width .2s; }
.setup-progress .pl { font:600 11px var(--font-mono); color:var(--fg-3); white-space:nowrap; }
/* What it does — vertical flow diagram parsed from the mermaid source. It
sits under the numbered steps in the same section, so it needs the gap a
separate section used to give it. */
.dgm-after { margin-top:16px; padding-top:16px; border-top:1px solid var(--stroke-2); }
.flow { display:flex; flex-direction:column; align-items:center; gap:0;
background:radial-gradient(var(--stroke-2) 1px, transparent 1px); background-size:16px 16px;
border:1px solid var(--stroke-2); border-radius:var(--radius-m); padding:20px 14px; }
.fnode { width:min(340px,100%); padding:10px 14px; border-radius:var(--radius-m); border:1px solid var(--stroke-2);
background:var(--bg-1); box-shadow:var(--shadow-1); text-align:center; }
.fnode .fnt { font-weight:600; font-size:12.5px; color:var(--fg-1); line-height:1.3; }
.fnode .fnm { font-size:11px; color:var(--fg-3); margin-top:2px; }
.fnode.n-manual { border-left:3px solid var(--cov-manual); }
.fnode.n-automated { border-left:3px solid var(--cov-automated); }
.fnode.n-decision { border-left:3px solid var(--cov-partial); border-radius:var(--radius-l); background:var(--bg-2); width:min(220px,100%); }
.fnode.n-notify { border-left:3px solid var(--warning-fg); }
.fnode.n-end { border-left:3px solid var(--cov-manual); opacity:.85; }
.fedge { width:2px; height:16px; background:var(--stroke-strong); }
.fedge.lbl { position:relative; }
.fseq { display:flex; flex-direction:column; align-items:center; width:100%; }
.fbranch { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; align-items:flex-start;
width:100%; padding:4px 0; position:relative; }
.fbranch .col { display:flex; flex-direction:column; align-items:center; flex:1 1 220px; min-width:190px; }
.fbranch .el { font:600 11px var(--font-sans); color:var(--fg-2); padding:0 8px; margin-bottom:4px;
border:1px solid var(--stroke-2); border-radius:var(--radius-circle); background:var(--bg-2); }
/* Branches that come back together get one line under them saying so, so a
rejoin reads as a rejoin rather than two lists that happen to stop. */
.fbranch.joins { border-bottom:2px solid var(--stroke-strong); border-radius:0 0 10px 10px;
padding-bottom:12px; margin-bottom:0; }
.fbranch.joins .col { padding-bottom:4px; }
.fedge.lbl { display:flex; align-items:center; justify-content:center; width:auto; height:auto;
background:none; padding:2px 0; }
.fedge.lbl i { font:600 10px var(--font-sans); font-style:normal; color:var(--fg-3);
border-left:2px solid var(--stroke-strong); padding:3px 0 3px 8px; margin-left:-2px; }
.fref { display:inline-flex; align-items:center; gap:6px; font:400 11px var(--font-sans); color:var(--fg-3);
border:1px dashed var(--stroke-1); border-radius:var(--radius-m); padding:5px 10px; }
.fref svg { width:12px; height:12px; }
/* Right rail cards */
.glance { display:grid; grid-template-columns:auto 1fr; gap:8px 12px; font-size:12.5px; }
.glance .gk { color:var(--fg-3); }
.glance .gv { color:var(--fg-1); font-weight:600; }
.glance .gv.wrap { font-weight:400; }
.prereq { display:flex; gap:8px; align-items:flex-start; margin-top:2px; }
.prereq svg { width:14px; height:14px; flex:none; margin-top:2px; }
.prereq span { font-size:12px; color:var(--fg-2); line-height:1.5; }
.prereq.ok svg { color:var(--success-fg); }
.prereq.warn svg { color:var(--warning-fg); }
.rail-links { display:flex; flex-direction:column; gap:8px; }
.rail-links a { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-1); text-decoration:none; }
.rail-links a svg { width:14px; height:14px; color:var(--accent-strong); flex:none; }
.rail-links a:hover { color:var(--accent-strong); }
.rail-links a .host { color:var(--fg-3); font-size:11px; }
.railnote { font-size:11px; color:var(--fg-3); line-height:1.5; margin-top:2px; }
/* ---- Versions + "What's changed" ---- */
.vtag { font-family:var(--font-mono); font-size:12.5px; color:var(--fg-1); font-weight:600; }
.vtag .vd { font-family:var(--font-sans); font-weight:400; color:var(--fg-3); }
.vpill { margin-left:7px; padding:1px 6px; border-radius:var(--radius-pill); background:var(--bg-3);
color:var(--fg-3); font:600 10.5px var(--font-mono); vertical-align:1px; }
.clminors { display:flex; flex-direction:column; gap:1px; margin-bottom:12px; }
.clrow { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:baseline;
padding:8px 12px; border-radius:var(--radius-m); }
.clrow:nth-child(odd) { background:var(--bg-2); }
.clv { font:600 11.5px var(--font-mono); color:var(--fg-3); }
.clv.maj { color:#fff; background:var(--accent); padding:2px 7px; border-radius:var(--radius-pill); }
.cln { font-size:13px; color:var(--fg-2); line-height:1.55; min-width:0; }
.cld { font-size:11.5px; color:var(--fg-3); white-space:nowrap; }
.clmaj { border:1px solid var(--stroke-2); border-radius:var(--radius-m); background:var(--bg-1);
overflow:hidden; margin-top:7px; }
.clmaj[open] { border-color:var(--stroke-1); background:var(--bg-2); }
.clmaj > summary { list-style:none; cursor:pointer; display:grid;
grid-template-columns:auto 1fr auto auto; gap:11px; align-items:center; padding:11px 13px; }
.clmaj > summary::-webkit-details-marker { display:none; }
.clmaj > summary:hover { background:var(--bg-2); }
.clmaj .cln { font-weight:600; color:var(--fg-1); }
.clmaj .fchev svg { width:15px; height:15px; color:var(--fg-4); transition:transform .15s; }
.clmaj[open] .fchev svg { transform:rotate(180deg); }
.clsub { padding:0 15px 14px 15px; }
.clsub .clsh { display:flex; align-items:center; gap:7px; margin:2px 0 7px;
font:600 11px var(--font-sans); text-transform:uppercase; letter-spacing:.04em; color:var(--fg-3); }
.clsub .clsh svg { width:14px; height:14px; }
.clsub ul { margin:0; padding-left:19px; display:flex; flex-direction:column; gap:6px; }
.clsub li { font-size:13px; color:var(--fg-2); line-height:1.55; }
.clsub { display:block; }
.clsub.cl-why p { margin:0; font-size:13px; color:var(--fg-2); line-height:1.6; }
.clbeta { display:flex; gap:9px; align-items:flex-start; padding:10px 12px; margin-bottom:9px;
border:1px dashed var(--stroke-1); border-radius:var(--radius-m); background:var(--bg-2);
font-size:12px; color:var(--fg-3); line-height:1.55; }
.clbeta svg { width:15px; height:15px; flex:none; margin-top:1px; }
.clsub.cl-brk { border-top:1px solid var(--stroke-2); padding-top:12px; }
.clsub.cl-brk .clsh { color:var(--warning-fg); }
.clsub.cl-brk li::marker { color:var(--warning-fg); }
.clempty { padding:0 15px 14px; font-size:12.5px; color:var(--fg-3); }
/* Earlier majors: a list of links out, not more content on this page */
.clold { margin-top:14px; padding-top:13px; border-top:1px solid var(--stroke-2); }
.cloh { display:flex; align-items:center; gap:7px; margin-bottom:8px;
font:600 11px var(--font-sans); text-transform:uppercase; letter-spacing:.04em; color:var(--fg-3); }
.cloh svg { width:14px; height:14px; }
.cloi { display:grid; grid-template-columns:auto 1fr auto auto; gap:11px; align-items:center;
padding:9px 12px; border-radius:var(--radius-m); text-decoration:none; }
.cloi:hover { background:var(--bg-2); }
.cloi .cln { color:var(--fg-2); }
.cloi:hover .cln { color:var(--fg-1); }
.cloa svg { width:14px; height:14px; color:var(--fg-4); transition:transform .15s; }
.cloi:hover .cloa svg { transform:translateX(3px); color:var(--accent-strong); }
.clold .railnote { margin-top:7px; padding-left:12px; }
/* A single earlier version, on its own page */
.vbig { font:600 17px var(--font-mono); color:var(--fg-3); vertical-align:3px; margin-left:4px; }
.verpage { max-width:760px; margin-top:20px; border:1px solid var(--stroke-2);
border-radius:var(--radius-l); background:var(--bg-1); padding:6px 0; }
.verpage .clsub { padding:14px 18px; }
.verpage .clsub + .clsub { border-top:1px solid var(--stroke-2); }
.vernav { display:flex; justify-content:space-between; gap:10px; max-width:760px; margin-top:14px; }
.vernav a { text-decoration:none; }
/* ---- "If something goes wrong" ---- */
.sh > svg { width:16px; height:16px; color:var(--warning-fg); flex:none; }
/* A list asset's column reference — name on the left, what it holds on the
right. Reads as documentation, which is what it is. */
.colref { display:flex; flex-direction:column; }
.colrow { display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:14px;
padding:9px 2px; border-top:1px solid var(--stroke-2); align-items:baseline; }
.colrow:first-child { border-top:none; }
.colrow .cn { font:600 12.5px var(--font-mono); color:var(--fg-1); word-break:break-word; }
.colrow .cd { font-size:12.5px; color:var(--fg-2); line-height:1.55; }
.colrow .cd.wide { grid-column:1 / -1; }
@media (max-width:640px) { .colrow { grid-template-columns:1fr; gap:3px; } }
.fixes { display:flex; flex-direction:column; gap:7px; }
/* The general-to-any-asset errors, folded away under the asset's own. */
.fixgen { margin-top:10px; }
.fixgen > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
font:600 12px var(--font-sans); color:var(--fg-3); padding:7px 2px; }
.fixgen > summary::-webkit-details-marker { display:none; }
.fixgen > summary:hover { color:var(--fg-1); }
.fixgen .fgn { font-size:11px; color:var(--fg-3); font-weight:500; }
.fixgen[open] > summary { margin-bottom:5px; }
.fixgen > summary .fchev { display:inline-flex; transition:transform .15s ease; }
.fixgen[open] > summary .fchev { transform:rotate(90deg); }
.fixitem { border:1px solid var(--stroke-2); border-radius:var(--radius-m); background:var(--bg-1);
overflow:hidden; }
.fixitem[open] { border-color:var(--stroke-1); background:var(--bg-2); }
.fixitem > summary { list-style:none; cursor:pointer; display:flex; gap:10px; align-items:flex-start;
padding:11px 13px; }
.fixitem > summary::-webkit-details-marker { display:none; }
.fixitem > summary:hover { background:var(--bg-2); }
.fixitem > summary > svg { width:16px; height:16px; flex:none; margin-top:1px; color:var(--warning-fg); }
.fixitem .fq { flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--fg-1); line-height:1.45; }
.fixitem .fq.mono { font-family:var(--font-mono); font-size:12.5px; font-weight:500; word-break:break-word; }
.fixitem .fchev { flex:none; margin-top:1px; color:var(--fg-4); }
.fixitem .fchev svg { width:15px; height:15px; transition:transform .15s; }
.fixitem[open] .fchev svg { transform:rotate(180deg); }
.fixitem .fa { margin:0; padding:0 15px 14px 46px; display:flex; flex-direction:column; gap:8px;
counter-reset:fx; list-style:none; }
.fixitem .fa li { position:relative; font-size:13px; color:var(--fg-2); line-height:1.6; }
.fixitem .fa li::before { counter-increment:fx; content:counter(fx); position:absolute; left:-24px; top:1px;
width:17px; height:17px; border-radius:var(--radius-circle); background:var(--bg-3);
color:var(--fg-3); font:600 10.5px var(--font-mono); display:flex;
align-items:center; justify-content:center; }
.breadcrumb { display:flex; align-items:center; gap:9px; margin:22px 0 14px; flex-wrap:wrap; }
.breadcrumb .sep { width:1px; height:14px; background:var(--stroke-2); }
.breadcrumb .ctx { font-size:12px; color:var(--fg-3); }
.breadcrumb a.ctx { color:var(--accent); text-decoration:none; }
.breadcrumb a.ctx:hover { text-decoration:underline; }
.breadcrumb .ctx.cur { color:var(--fg-2); }
.notes-block { display:flex; gap:9px; padding:12px 14px; border:1px solid var(--stroke-2); border-radius:var(--radius-m);
background:var(--bg-1); align-items:flex-start; margin-top:2px; }
.notes-block svg { width:15px; height:15px; flex:none; margin-top:2px; color:var(--fg-3); }
.notes-block .nbx { font-size:13px; color:var(--fg-2); line-height:1.55; white-space:pre-wrap; }
/* Build walkthrough — a flow spec's numbered steps, rendered as a guided
visual instead of a wall of monospace markdown.
The rule the layout is built around: THE NAME YOU GIVE THE STEP LEADS.
What you type into the designer's rename box is the row's headline, in
mono; the action type ("Compose ×3 — the period anchors") demotes to a
caption beside it, because you already know what a Compose is. A step you
have ticked collapses to that one line and says "Completed"; click it to
reopen. Parameters sit in labelled rows with their own copy button, and
expressions are syntax-tinted so the action name you are referencing pops
out of the plumbing. */
/* The walkthrough is one full-width column now — progress, prep and
assumptions moved into the sticky ribbon above it (see .bwtools). */
.bwmain { min-width:0; }
.bw { display:flex; flex-direction:column; gap:0; }
.bw-intro { font-size:13px; color:var(--fg-2); line-height:1.6; margin:0 0 12px; }
.bw-step { position:relative; display:flex; gap:12px; padding:0 0 10px 0; }
.bw-step:last-of-type { padding-bottom:2px; }
/* connector line down the spine */
.bw-step::before { content:""; position:absolute; left:13px; top:36px; bottom:-2px; width:2px; background:var(--stroke-2); }
.bw-step:last-of-type::before { display:none; }
.bw-gutter { flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:9px; }
.bw-num { width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%;
background:var(--bg-1); border:1px solid var(--stroke-1); color:var(--fg-2);
font:600 12px var(--font-sans); z-index:1; transition:background .15s, color .15s, border-color .15s; }
.bw-check { z-index:1; background:var(--bg-canvas); padding:3px 0; display:inline-flex; }
.bw-check input { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; }
.bw-step.done .bw-num { background:var(--success-bg); border-color:var(--success-stroke); color:var(--success-fg); }
.bw-card { flex:1; min-width:0; background:var(--bg-1); border:1px solid var(--stroke-2);
border-left:1px solid var(--stroke-2); border-radius:var(--radius-l); box-shadow:var(--shadow-1);
overflow:hidden; }
/* The header row is the click target — it opens and closes the step. The
Copy-action button sits beside it rather than inside it (a button cannot
legally contain another button), which is why .bw-hrow exists at all. */
.bw-hrow { display:flex; align-items:stretch; min-width:0; }
.bw-head { display:flex; align-items:center; gap:10px; flex:1; min-width:0; min-height:44px; padding:10px 14px;
background:none; border:0; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.bw-head:hover { background:var(--bg-3); }
.bw-name { font:600 13px/18px var(--font-mono); color:var(--fg-1); white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; }
.bw-kind { font:400 12px/16px var(--font-sans); color:var(--fg-3); white-space:nowrap;
min-width:0; overflow:hidden; text-overflow:ellipsis; flex-shrink:1; }
.bw-head .grow { flex:1; }
.bw-step.done .bw-name { color:var(--fg-3); }
.bw-done-tag { font:600 12px var(--font-sans); color:var(--success-fg); white-space:nowrap; flex:none; }
.bw-chev { width:14px; height:14px; flex:none; color:var(--fg-3); transition:transform .15s cubic-bezier(.1,.9,.2,1); }
.bw-step.shut .bw-chev { transform:rotate(-90deg); }
.bw-step.shut > .bw-card > .bw-body { display:none; }
/* connector chip — the dot colour is the Microsoft product the action runs on */
.bw-conn { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; flex:none;
border-radius:var(--radius-s); background:var(--bg-3); border:1px solid var(--stroke-2);
font:600 11px var(--font-sans); color:var(--fg-2); white-space:nowrap; }
.bw-conn i { width:7px; height:7px; border-radius:50%; flex:none; }
/* the branch a nested action sits in, shown as a breadcrumb rather than an indent */
.bw-crumb { display:inline-flex; align-items:center; height:18px; padding:0 7px; flex:none;
border-radius:var(--radius-s); background:var(--bg-3); border:1px solid var(--stroke-2);
color:var(--accent); font:600 10px var(--font-sans); letter-spacing:.03em; white-space:nowrap; }
.bw-step.yes .bw-crumb { color:var(--branch); }
.bw-flag { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; flex:none;
border-radius:var(--radius-s); background:var(--warning-bg); border:1px solid var(--warning-stroke);
color:var(--warning-fg); font:600 11px var(--font-sans); white-space:nowrap; }
.bw-flag svg { width:11px; height:11px; }
.bw-cnt { font:400 12px var(--font-sans); color:var(--fg-3); white-space:nowrap; flex:none; }
/* --- parameters: one labelled, separately-copyable row per field --- */
.bw-params { display:flex; flex-direction:column; border:1px solid var(--stroke-3);
border-radius:var(--radius-s); padding:2px 12px; }
.bw-params .pr { display:grid; grid-template-columns:118px minmax(0,1fr) auto; gap:12px; align-items:center;
min-height:40px; padding:5px 0; }
.bw-params .pr + .pr { border-top:1px solid var(--stroke-3); }
.bw-params .pr.free { display:block; color:var(--fg-3); font-size:12.5px; line-height:1.55; }
.bw-params .pk { font:600 10px/14px var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); }
.bw-params .pv { min-width:0; font-size:12.5px; color:var(--fg-1); line-height:1.6; }
.bw-params .pn { display:block; margin-top:3px; font-size:11.5px; color:var(--fg-3); line-height:1.5; }
.bw-params .pr.ra .pk { color:var(--warning-fg); }
.bw-params .pcopy { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px; flex:none;
border:1px solid transparent; border-radius:var(--radius-s); background:transparent;
color:var(--fg-3); cursor:pointer; font:600 11px var(--font-sans); }
.bw-params .pcopy:hover { background:var(--bg-3); color:var(--fg-1); }
.bw-params .pcopy svg { width:12px; height:12px; }
@media (max-width:640px) { .bw-params .pr { grid-template-columns:1fr auto; }
.bw-params .pk { grid-column:1 / -1; } }
/* --- the drawn flow (2026-09-02) ----------------------------------------
A flow drawn from its generated design file (hydrateDesign in hub-app.js):
"What it does" on the asset page, the default view on the build page.
Cards after the Flow Studio design: a coloured bar and tile for the
connector, the name over "connector · operation", a chevron; the
connector line between cards runs down the middle. Nested boxes and
flexbox, no coordinates — a container simply contains its children, so
any depth works. Condition and Switch lanes sit side by side under a
labelled pill where there is room and wrap under one another where there
is not. Every colour is a token, so both themes come for free. */
.fd-bar { display:flex; align-items:center; gap:8px; margin:0 0 16px; flex-wrap:wrap; }
.fd-count { font-size:12px; color:var(--fg-3); }
.fd-bar .pa-copy { margin:0; }
/* THE FLOW SITS ON THE CANVAS STEP, NOT THE CARD STEP (2026-09-04, his ask:
the nodes "blend in a bit with each other and the background... they seem
the same apart from borders"). They were: a node is --bg-1 and the panel
behind it was --bg-1 too, so in dark #292929 sat on #292929 and a 1px
#3D3D3D border was the whole of the separation, with the dark theme's
black shadow invisible on a dark ground. Light had the same shape, white
on white. Nothing new is invented here — the kit already gives a three-step
surface ramp so a card can sit on a different step than its container, and
this region's own connector dot has always been painted --bg-canvas to cut
the line, which only reads right on a canvas ground. Dropping the region
one step restores both: #292929 on #1F1F1F, #FFF on #F0EFED. */
.fd-flow { display:flex; flex-direction:column; background:var(--bg-canvas);
border:1px solid var(--stroke-2); border-radius:var(--radius-l); padding:14px 12px; }
.fd-flow > .fd-step:first-child { margin-top:0; }
.fd-step { position:relative; background:var(--bg-1); border:1px solid var(--stroke-2);
/* 4px, the width the design gives a map node's coloured edge — it was
3px here. With the ground dropped to the canvas step the edge is
what separates one node from the next, so it gets its stated size. */
border-left:4px solid var(--fdc, var(--node-bundle)); border-radius:var(--radius-l);
box-shadow:var(--shadow-1); }
.fd-step + .fd-step { margin-top:20px; }
.fd-step + .fd-step::before { content:""; position:absolute; left:50%; top:-21px; width:2px; height:20px;
margin-left:-1px; background:var(--stroke-1); }
.fd-step + .fd-step::after { content:""; position:absolute; left:50%; top:-15px; width:9px; height:9px;
margin-left:-5px; box-sizing:border-box; border:2px solid var(--stroke-1);
border-radius:50%; background:var(--bg-canvas); }
.fd-step.open { box-shadow:var(--ring); }
.fd-step.trigger { border-left-color:var(--warning-fg); }
.fd-hrow { display:flex; align-items:center; gap:12px; min-height:54px; padding:10px 10px 10px 12px;
cursor:pointer; border-radius:0 var(--radius-l) var(--radius-l) 0; }
.fd-hrow:hover { background:var(--bg-2); }
.fd-hrow .grow { flex:1; }
.fd-tile { flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:6px;
color:var(--fdc, var(--node-bundle)); background:color-mix(in srgb, var(--fdc, var(--node-bundle)) 14%, transparent); }
/* A 14% wash of the step's colour is a clear tint on white and almost nothing
on #292929, so in dark the one piece of per-step colour on the card was the
part that disappeared. Same hue, enough of it to read. */
:root[data-theme="dark"] .fd-tile { background:color-mix(in srgb, var(--fdc, var(--node-bundle)) 26%, transparent); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .fd-tile { background:color-mix(in srgb, var(--fdc, var(--node-bundle)) 26%, transparent); }
}
.fd-step.trigger .fd-tile { color:var(--warning-fg); background:var(--warning-bg); }
.fd-g { width:20px; height:20px; display:block; }
.fd-main { min-width:0; display:flex; flex-direction:column; gap:2px; }
.fd-title { font:600 13.5px/18px var(--font-sans); color:var(--fg-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-title a { color:inherit; text-decoration:none; border-bottom:1px dotted var(--fg-4); }
.fd-title a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.fd-sub { font:400 12px/16px var(--font-sans); color:var(--fg-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-copy { margin:0; }
.fd-open { flex:none; width:30px; height:30px; display:grid; place-items:center; border:0; background:none;
color:var(--fg-3); cursor:pointer; border-radius:var(--radius-s); }
.fd-open:hover { background:var(--bg-3); color:var(--fg-1); }
.fd-open svg { width:15px; height:15px; transform:rotate(-90deg); transition:transform .15s; }
.fd-step.open > .fd-hrow .fd-open svg { transform:none; }
.fd-ra { font:400 12px/16px var(--font-sans); color:var(--fg-3); padding:0 14px 10px 58px; }
.fd-ra.odd { color:var(--warning-fg); }
.fd-child { display:inline-flex; align-items:center; gap:5px; margin:0 14px 10px 58px; font-size:12px;
color:var(--accent); text-decoration:none; }
.fd-child:hover { text-decoration:underline; }
.fd-child svg { width:12px; height:12px; }
.fd-note { margin:0 14px 10px 58px; padding:6px 9px; font-size:12px; line-height:1.5; color:var(--fg-2);
background:var(--bg-2); border-left:2px solid var(--warning-stroke); border-radius:var(--radius-s); }
.fd-body { border-top:1px solid var(--stroke-3); padding:6px 14px 10px; background:var(--bg-2); }
.fd-pr { display:grid; grid-template-columns:132px minmax(0,1fr); gap:10px; padding:5px 0; align-items:start; }
.fd-pr + .fd-pr { border-top:1px solid var(--stroke-3); }
.fd-pk { font:600 10px/16px var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3);
word-break:break-word; }
.fd-pv { display:block; font:400 12px/1.5 var(--font-mono); color:var(--fg-1); white-space:pre-wrap;
word-break:break-word; max-height:200px; overflow:auto; }
.fd-pr.ra .fd-pk, .fd-pr.ra .fd-pv { color:var(--warning-fg); }
.fd-adv { margin-top:6px; padding-top:4px; border-top:1px dashed var(--stroke-2); }
.fd-advh { display:block; padding:3px 0; font:600 10px/16px var(--font-sans); letter-spacing:.06em;
text-transform:uppercase; color:var(--fg-3); }
.fd-adv .fd-pv { color:var(--fg-3); }
.fd-none { margin:0; padding:6px 0; font-size:12px; color:var(--fg-3); font-style:italic; }
.fd-contains { margin:0 12px 14px 26px; padding:6px 0 4px 16px; border-left:2px dashed var(--stroke-1); }
.fd-contains > .fd-step:first-child { margin-top:8px; }
.fd-lanes { display:flex; flex-wrap:wrap; gap:16px; margin:0 12px 14px; }
.fd-lane { flex:1 1 300px; min-width:0; padding:0 0 4px; }
.fd-laneh { display:flex; justify-content:center; align-items:center; gap:8px; margin:4px 0 12px; }
.fd-pill { display:inline-flex; align-items:center; height:22px; padding:0 11px; border-radius:999px;
border:1px solid var(--stroke-1); background:var(--bg-1); font:600 11.5px var(--font-sans); color:var(--fg-2); }
.fd-lane.yes .fd-pill { color:var(--success-fg); border-color:var(--success-stroke); background:var(--success-bg); }
.fd-lane.case .fd-pill, .fd-lane.default .fd-pill { color:var(--idea-fg); border-color:var(--idea-stroke); background:var(--idea-bg); }
.fd-lanen { font-size:11.5px; color:var(--fg-3); }
/* --- Branch tabs (2026-09-04) -------------------------------------------
A branch point with more than one lane is a CHOICE, and stacked lanes read
as a sequence. Tabs say "one of these" at any window width; the wrapping
columns above only said it on a wide one. Single-lane branch points keep
the inline lane — they are containment, not a choice. */
.fd-lanes.tabbed { display:block; margin:0 12px 14px; }
.fd-tabs { display:flex; flex-wrap:wrap; align-items:center; gap:4px;
margin:2px 0 10px; border-bottom:1px solid var(--stroke-2); }
.fd-tab { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px;
margin-bottom:-1px; border:0; border-bottom:2px solid transparent; border-radius:4px 4px 0 0;
background:none; cursor:pointer; color:var(--fg-3);
font:600 12px/1 var(--font-sans); transition:color .12s, background .12s; }
.fd-tab:hover { color:var(--fg-1); background:var(--bg-2); }
.fd-tab.on { color:var(--fg-1); border-bottom-color:var(--accent); }
.fd-tab:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.fd-tabn { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
padding:0 5px; border-radius:999px; border:1px solid var(--stroke-1); background:var(--bg-1);
font:600 10.5px/1 var(--font-sans); color:var(--fg-3); }
.fd-tab.on .fd-tabn { border-color:var(--stroke-1); color:var(--fg-2); }
.fd-tab.yes.on { border-bottom-color:var(--success-fg); }
.fd-tab.no.on { border-bottom-color:var(--danger-fg); }
/* --fg-3, not --fg-4: the 2026-08-27 contrast sweep moved every small-text
use of --fg-4 one step darker to pass AA, and this is 11.5px text. */
.fd-tabnote { margin-left:auto; padding:0 2px 4px; font-size:11.5px; color:var(--fg-3); }
.fd-lanes.tabbed > .fd-lane { flex:none; padding:0 0 4px; }
/* The panel repeats its own branch name for print and for a screen reader
reading the panel out of the strip's context; on screen the tab already
says it, so it is hidden there. */
.fd-lanep { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media print {
.fd-tabs { display:none; }
.fd-lanes.tabbed > .fd-lane[hidden] { display:block !important; }
.fd-lanep { position:static; width:auto; height:auto; margin:4px 0 10px; clip:auto;
overflow:visible; white-space:normal; display:flex; align-items:center; gap:8px; }
}
@media (max-width:520px) { .fd-tabnote { display:none; } }
/* --- A folded run of small value steps ----------------------------------
Deliberately quieter than a step card: it is on the recessed ground rather
than raised off it, its glyph tile is neutral, and it carries no Copy
button. Emphasis matching what the thing is worth is the whole point of
folding it. Opening it gives back ordinary cards, Copy buttons and all. */
.fd-group { position:relative; }
.fd-group + .fd-step, .fd-step + .fd-group, .fd-group + .fd-group { margin-top:20px; }
.fd-step + .fd-group::before, .fd-group + .fd-group::before, .fd-group + .fd-step::before {
content:""; position:absolute; left:50%; top:-21px; width:2px; height:20px;
margin-left:-1px; background:var(--stroke-1); }
.fd-step + .fd-group::after, .fd-group + .fd-group::after, .fd-group + .fd-step::after {
content:""; position:absolute; left:50%; top:-15px; width:9px; height:9px;
margin-left:-5px; box-sizing:border-box; border:2px solid var(--stroke-1);
border-radius:50%; background:var(--bg-canvas); }
.fd-grow { display:flex; align-items:center; gap:12px; width:100%; min-height:46px;
padding:8px 10px 8px 12px; border:1px dashed var(--stroke-1); border-radius:var(--radius-l);
background:none; color:inherit; text-align:left; cursor:pointer;
transition:background .12s, border-color .12s; }
.fd-grow:hover { background:var(--bg-1); border-color:var(--fg-4); }
.fd-grow:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fd-gtile { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:6px;
color:var(--fg-3); background:var(--bg-2); }
.fd-gmain { min-width:0; display:flex; flex-direction:column; gap:2px; }
.fd-gtitle { font:600 13px/17px var(--font-sans); color:var(--fg-2); }
.fd-gsub { font:400 11.5px/16px var(--font-sans); color:var(--fg-3);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-gn { flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:20px;
height:20px; padding:0 6px; border-radius:999px; border:1px solid var(--stroke-1);
font:600 11px/1 var(--font-sans); color:var(--fg-3); }
.fd-gchev { flex:none; width:15px; height:15px; color:var(--fg-3);
transform:rotate(-90deg); transition:transform .15s; }
.fd-group.open > .fd-grow { border-style:solid; background:var(--bg-1); }
.fd-group.open .fd-gchev { transform:none; }
.fd-gbody { padding-top:20px; }
.fd-gbody > .fd-step:first-child { margin-top:0; }
@media print { .fd-gbody[hidden] { display:block !important; } .fd-grow { display:none; } }
.fd-flash { animation:fdflash 1.6s ease-out; }
@keyframes fdflash { 0%, 55% { box-shadow:0 0 0 3px var(--accent); } 100% { box-shadow:var(--shadow-1); } }
/* the build page's view switch: the flow by default, the walkthrough beside it */
.bview { display:flex; align-items:center; gap:10px; margin:0 0 14px; flex-wrap:wrap; }
.bview-l { font-size:12px; color:var(--fg-3); }
@media (max-width:640px) { .fd-pr { grid-template-columns:1fr; } .fd-ra, .fd-child, .fd-note { margin-left:14px; padding-left:14px; } }
/* --- paste-ready actions ------------------------------------------------
One button per step that puts that whole action — container and everything
nested inside it — on the clipboard.
It lives IN THE STEP'S HEADER (Anthony's call, 2026-07-30). It used to sit
in the step body inside a bordered panel that re-listed every parameter the
paste contains. That list was a second copy of the parameter rows the step
already spells out above it, so the step said everything twice and the page
got twice as long for nothing. The header is also where you look for it:
you decide "paste this one" from the step's name, before reading the body.
What the paste CONTAINS is the manual instructions, which are right there. */
.pa-copy { flex:none; align-self:center; margin:0 12px 0 0; height:28px; padding:0 12px;
border-radius:var(--radius-s); border:1px solid var(--stroke-2); background:var(--bg-1);
color:var(--fg-1); cursor:pointer; white-space:nowrap;
font:600 11.5px var(--font-sans); transition:background .15s, border-color .15s; }
.pa-copy:hover:not(:disabled) { background:var(--bg-3); border-color:var(--stroke-1); }
.pa-copy:disabled { opacity:.4; cursor:default; }
.bw-card.tinted .pa-copy { border-color:color-mix(in srgb, var(--cc) 35%, var(--stroke-2)); }
/* an action that travels inside its container's paste — a label, not an offer */
.pa-copy.pa-inc, .bw-card.tinted .pa-copy.pa-inc { background:none; border-color:transparent; opacity:1;
color:var(--fg-3); font-weight:400; padding:0 4px; }
.bw-step.sub .pa-copy { height:24px; padding:0 9px; margin-right:9px; font-size:11px; }
/* An action nested inside a Scope or a Condition: the copy icon alone, no text
(Anthony, 2026-08-04 — "just the copy icon, no text needed"). It is quiet on
purpose. The first build pastes the container, which is the loud button a few
lines above; this one is for the maintenance case — re-pasting ONE action into
a flow that already exists — so it should be findable without competing with
the step it sits inside. Square, so a column of them lines up down the page. */
.pa-copy.pa-mini { width:26px; height:26px; padding:0; display:inline-flex;
align-items:center; justify-content:center; color:var(--fg-3); }
.bw-step.sub .pa-copy.pa-mini { width:24px; height:24px; padding:0; }
.pa-copy.pa-mini:hover:not(:disabled) { color:var(--fg-1); }
.pa-copy.pa-mini svg { width:14px; height:14px; display:block; }
/* Built from Microsoft's documentation rather than from one of his own flows —
the generator's one deliberate exception. Still clickable, because it is
meant to be pasted and checked; marked because every OTHER button on this
site is grounded in a flow he already runs, and nothing else would say so. */
.pa-copy.pa-unver, .bw-card.tinted .pa-copy.pa-unver {
border-color:var(--warning-stroke); border-style:dashed;
background:var(--warning-bg); color:var(--warning-fg); }
.pa-copy.pa-unver:hover:not(:disabled) { background:var(--warning-bg); border-color:var(--warning-fg); }
/* A step the spec marks `optional: yes` — deliberately NOT part of the default
build, so the whole-flow paste leaves it out. Dotted and muted rather than
orange: this is not a warning about the payload, it is a statement about
whether you are supposed to click it yet. Still clickable, because the day
its precondition lands it is exactly the button you want. */
.pa-copy.pa-opt, .bw-card.tinted .pa-copy.pa-opt {
border-style:dotted; color:var(--fg-3); }
.pa-copy.pa-opt:hover:not(:disabled) { color:var(--fg-1); }
/* The one thing a paste can carry that the manual steps do NOT say: that it
will land on top of something that has to exist first. Shown only then. */
.pa-need { margin:0 0 10px; padding:7px 10px; border-radius:var(--radius-s);
background:var(--bg-3); border:1px solid var(--stroke-3);
font:400 11.5px/1.5 var(--font-sans); color:var(--fg-3); }
/* --- the importable flow package, offered above the build steps --------- */
.packbar { margin:0 0 16px; padding:13px 15px; border:1px solid var(--accent-stroke, var(--stroke-1));
border-radius:var(--radius-m); background:var(--accent-soft, var(--bg-3)); }
.packbar .pb-t { display:flex; align-items:center; gap:8px; font:600 13.5px var(--font-sans); color:var(--fg-1); }
.packbar .pb-t svg { width:15px; height:15px; flex:none; }
.packbar .pb-v { font:600 10.5px var(--font-mono); letter-spacing:.04em; color:var(--fg-3);
border:1px solid var(--stroke-2); border-radius:var(--radius-s); padding:1px 6px; }
.packbar .pb-p { margin:7px 0 10px; font:400 12.5px/1.6 var(--font-sans); color:var(--fg-2); }
.packbar .pb-alt { margin:10px 0 0; color:var(--fg-3); }
/* --- rendered documents (mdDoc): the setup guides, process notes and AI
prompts surfaced on asset pages. Reads as a document, not as a dump of
raw markdown in a dark box, which is what it was until 2026-07-30. --- */
.mdoc { margin-top:12px; font:400 13.5px/1.65 var(--font-sans); color:var(--fg-2);
max-height:560px; overflow-y:auto; padding-right:4px; }
/* A fold-out reference gets its own scrollbar; a document that IS the page
does not — a scroll box inside the page scroll is a trap. */
.mdoc-full { max-height:none; overflow:visible; margin-top:4px; }
.mdoc > *:first-child { margin-top:0; }
.mdoc p { margin:0 0 10px; }
.mdoc b { color:var(--fg-1); }
.mdoc .mdh { color:var(--fg-1); margin:18px 0 8px; }
.mdoc .mdh1 { font:700 17px/1.35 var(--font-sans); }
.mdoc .mdh2 { font:700 15px/1.35 var(--font-sans); }
.mdoc .mdh3 { font:600 13.5px/1.4 var(--font-sans); }
.mdoc .mdh4 { font:600 12.5px/1.4 var(--font-sans); color:var(--fg-2); }
.mdoc ul, .mdoc ol { margin:0 0 10px; padding-left:20px; }
.mdoc li { margin:0 0 5px; }
.mdoc li > ul, .mdoc li > ol { margin:5px 0 0; }
.mdoc .mdhr { height:1px; background:var(--stroke-2); margin:18px 0; }
.mdoc .mdq { margin:0 0 12px; padding:2px 0 2px 12px; border-left:3px solid var(--stroke-1); color:var(--fg-3); }
.mdoc .mdq p:last-child { margin-bottom:0; }
.mdoc .mdtw { overflow-x:auto; margin:0 0 12px; }
.mdoc .mdt { border-collapse:collapse; width:100%; font-size:12.5px; }
.mdoc .mdt th, .mdoc .mdt td { border:1px solid var(--stroke-2); padding:6px 9px; text-align:left; vertical-align:top; }
.mdoc .mdt th { background:var(--bg-3); color:var(--fg-1); font-weight:600; white-space:nowrap; }
.mdoc .bw-fence { margin:0 0 12px; }
/* --- expressions: syntax-tinted, and they still copy verbatim --- */
.bw-body code.k-expr, .bw-body code.k-path { color:var(--fg-1); background:var(--accent-soft);
border-color:var(--accent-soft-stroke); }
.bw-body code.k-comp { color:var(--fg-1); background:var(--bg-3); }
.bw-body code.k-val { color:var(--fg-1); background:var(--bg-3); }
/* Expression tint, treatment B (the confirmed standard): functions purple,
quoted strings green, property keys blue, everything structural grey.
Global classes — the same treatment on an asset page, in a project
workspace, and on the Resources specimen. */
code .x-fn { color:var(--branch); } /* functions */
code .x-str { color:var(--success-fg); } /* quoted strings */
code .x-prop { color:var(--accent); } /* property keys */
code .x-lit { color:var(--fg-2); font-weight:600; } /* true/false/nums */
code .x-pun { color:var(--fg-3); } /* plumbing */
/* --- detail: rationale + learning content, off by default --- */
.bw-dt { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; cursor:pointer;
border:1px solid var(--stroke-1); border-radius:var(--radius-s); background:var(--bg-1);
color:var(--fg-3); font:600 11px var(--font-sans); white-space:nowrap; }
.bw-dt svg { width:12px; height:12px; }
.bw-dt:hover { background:var(--bg-3); color:var(--fg-2); }
.bw-dt[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
/* The whole-flow-body button — a distinct accent so it doesn't read as one of
the toggle panels beside it; it copies on click like a pa-copy button, it
doesn't open anything. */
.bw-dt.bw-whole { border-color:var(--accent-stroke, var(--stroke-1)); color:var(--accent-strong, var(--fg-1)); }
.bw-dt.bw-whole:hover:not(:disabled) { background:var(--accent-soft, var(--bg-3)); }
.bw-dt.bw-whole:disabled { opacity:.5; cursor:default; }
/* Two class levels so this beats the per-type display rules further down
(.bw-callout{display:flex} etc.) without reaching for !important. */
.bw:not(.show-detail) .bw-d { display:none; }
.bw-body { display:flex; flex-direction:column; gap:12px; padding:12px 14px 14px;
border-top:1px solid var(--stroke-3); }
.bw-body:empty { display:none; }
.bw-body p { font-size:13px; color:var(--fg-2); line-height:1.6; margin:0; }
.bw-body ul { margin:0; padding-left:2px; list-style:none; display:flex; flex-direction:column; gap:6px; }
.bw-body ul li { position:relative; padding-left:16px; font-size:13px; color:var(--fg-2); line-height:1.55; }
.bw-body ul li::before { content:""; position:absolute; left:2px; top:8px; width:5px; height:5px;
border-radius:50%; background:var(--stroke-strong); }
.bw-body code { font:600 12px var(--font-mono); background:var(--bg-3); border:1px solid var(--stroke-2);
border-radius:5px; padding:1px 5px; color:var(--accent-strong); white-space:pre-wrap;
overflow-wrap:anywhere; }
/* every inline expression / name in a step body is click-to-copy */
.bw-body code[data-cc] { cursor:pointer; transition:background .12s, border-color .12s; }
.bw-body code[data-cc]:hover { background:var(--accent-soft, var(--bg-2)); border-color:var(--accent-strong); }
.bw-body code[data-cc]::after { content:"⧉"; margin-left:5px; font-size:10px; opacity:.35; }
.bw-body code[data-cc]:hover::after { opacity:.8; }
.bw-body code[data-cc].copied { background:var(--brand-60); color:#FFFFFF; border-color:transparent; }
.bw-body code[data-cc].copied::after { content:"✓"; opacity:1; }
.bw-body a { color:var(--accent-strong); text-decoration:none; border-bottom:1px solid var(--stroke-strong); }
/* A block you paste somewhere: a labelled box, not a dark code slab. The label
says which field it goes in, and the copy button sits on the same strip. */
.bw-fence { border:1px solid var(--stroke-1); border-radius:var(--radius-s); overflow:hidden; }
.bw-fence .fh { display:flex; align-items:center; gap:8px; background:var(--bg-3);
border-bottom:1px solid var(--stroke-2); padding:4px 6px 4px 12px; }
.bw-fence .fl { flex:1; font:600 11px/16px var(--font-sans); color:var(--fg-2); }
.bw-fence .fl.paste { color:var(--fg-2); }
.bw-fence pre { margin:0; background:var(--bg-1); color:var(--fg-1); border:0;
padding:10px 14px; font:12px/1.6 var(--font-mono); overflow-x:auto; white-space:pre; }
.bw-fence .fcopy { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px;
border:1px solid transparent; border-radius:var(--radius-s);
background:transparent; color:var(--fg-3); cursor:pointer; font:600 11px var(--font-sans); }
.bw-fence .fcopy:hover { background:var(--bg-1); color:var(--fg-1); }
.bw-fence .fcopy svg { width:12px; height:12px; }
.bw-callout { display:flex; gap:9px; padding:9px 12px; border-radius:var(--radius-m); border:1px solid var(--stroke-2);
background:var(--bg-2); align-items:flex-start; }
.bw-callout svg { width:14px; height:14px; flex:none; margin-top:2px; }
.bw-callout .cx { font-size:12.5px; line-height:1.55; color:var(--fg-2); }
.bw-callout .cx b { font-weight:700; }
.bw-callout.assume { background:var(--warning-bg); border-color:var(--warning-stroke); }
.bw-callout.assume svg, .bw-callout.assume .cx b { color:var(--warning-fg); }
.bw-callout.warn { background:var(--warning-bg); border-color:var(--warning-stroke); }
.bw-callout.warn svg { color:var(--warning-fg); }
.bw-callout.pass { background:var(--success-bg); border-color:var(--success-stroke); }
.bw-callout.pass svg, .bw-callout.pass .cx b { color:var(--success-fg); }
/* A tip. Green because the three-stake vocabulary needs three distinguishable
colours and amber is already spoken for by warn; the icon carries the meaning. */
.bw-callout.tip { background:var(--success-bg); border-color:var(--success-stroke); }
.bw-callout.tip svg, .bw-callout.tip .cx b { color:var(--success-fg); }
.bw-callout .cx > p:first-child { margin-top:0; }
.bw-callout .cx > p:last-child { margin-bottom:0; }
/* ---- Figures in a document -------------------------------------------------
Screenshots and drawn UI stand-ins are light-background images. NEVER invert
them for dark mode — the common filter:invert() trick turns a screenshot into
a colour negative. The frame around the picture is themed instead, and the
picture keeps the background it was drawn with. */
.mdfig { margin:16px 0; padding:0; }
.mdfig img, img.mdimg { display:block; max-width:100%; height:auto; border-radius:var(--radius-m);
border:1px solid var(--stroke-2); background:#fff; }
.mdfig figcaption { margin-top:7px; font:400 12px var(--font-sans); color:var(--fg-3); line-height:1.5; }
.mdfig figcaption b { color:var(--fg-2); font-weight:600; }
img.mdimg { display:inline-block; vertical-align:middle; max-height:1.6em; border:0; border-radius:3px; }
.bw-notes { margin-top:10px; padding-top:14px; border-top:1px solid var(--stroke-2); }
.bw-notes > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
font:600 12px var(--font-sans); color:var(--fg-3); }
.bw-notes > summary::-webkit-details-marker { display:none; }
.bw-notes > summary svg { width:13px; height:13px; transition:transform .15s; }
.bw-notes[open] > summary svg.chev { transform:rotate(180deg); }
.bw-notes > summary:hover { color:var(--fg-1); }
.bw-notes > *:not(summary) { margin-top:9px; }
.bw-notes p, .bw-notes ul li { font-size:13px; color:var(--fg-2); line-height:1.6; }
.bw-notes ul { margin:0; padding-left:2px; list-style:none; display:flex; flex-direction:column; gap:6px; }
.bw-notes ul li { position:relative; padding-left:16px; }
.bw-notes ul li::before { content:""; position:absolute; left:2px; top:8px; width:5px; height:5px;
border-radius:50%; background:var(--stroke-strong); }
.bw-notes code { font:600 12px var(--font-mono); background:var(--bg-3); border:1px solid var(--stroke-2);
border-radius:5px; padding:1px 5px; color:var(--accent-strong); overflow-wrap:anywhere; }
.bw-foot { margin-top:12px; }
.bw-foot summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
font:600 12px var(--font-sans); color:var(--fg-3); }
.bw-foot summary::-webkit-details-marker { display:none; }
.bw-foot summary svg { width:13px; height:13px; transition:transform .15s; }
.bw-foot[open] summary svg.chev { transform:rotate(180deg); }
.bw-foot .bw-acts { display:flex; gap:7px; margin:10px 0; flex-wrap:wrap; }
.bw-loading { font-size:13px; color:var(--fg-3); padding:6px 0; }
/* ======================================================================
2026-07-29 — the three things Anthony asked for on this pass:
1. the build walkthrough gets the page width back (rail → sticky bar,
smaller nesting cost, a wider page while a walkthrough is open);
2. asset-page sections fold, and two of them start folded;
3. the "waiting on you" queue is sortable and has a page of its own.
================================================================== */
/* ---- 1a. The walkthrough breaks out of the reading width -------------
Only the walkthrough. The description, the diagram and the checklists
above it stay at the page's reading width, because long prose lines are
harder to read, not easier — but a tree of nested actions is the one
thing on the page where width IS the content. So this block steps
outside the page column (--maxw) and centres itself in the room instead,
up to 1520px. The header does not move, so nothing jumps as you
navigate between pages.
100cqi is the room's own width (.roomwrap is the size container) — the
window minus the rail minus the scrollbar. It used to be 100vw, which
counted the rail as space this block could use and ran it ~86px past the
right edge of the window on every asset page, taking the whole page into
a sideways scroll with it. */
.asset-wide {
--bleed:min(1520px, calc(100cqi - 2 * clamp(16px,4vw,32px)));
width:var(--bleed);
max-width:100cqi;
margin-left:calc((100% - var(--bleed)) / 2);
}
/* ---- 1b. Progress + prep + assumptions as a sticky bar, not a rail ----
They used to sit in a 296px right-hand column, which cost the steps a
third of their width for three cards you glance at. Now they are one
ribbon that pins under the header when the steps scroll past it. */
.bwtools { position:sticky; top:48px; z-index:6; margin:0 0 14px;
background:var(--bg-1); border:1px solid var(--stroke-2);
border-radius:var(--radius-l); box-shadow:var(--shadow-1); }
.bwtools.stuck { border-radius:0 0 var(--radius-l) var(--radius-l); box-shadow:var(--shadow-6); }
.bwt-row { display:flex; align-items:center; gap:12px; padding:8px 12px; flex-wrap:wrap; }
.bwt-prog { display:flex; align-items:center; gap:9px; min-width:210px; flex:1 1 210px; }
.bwt-prog .track { flex:1; height:6px; border-radius:3px; background:var(--bg-3); overflow:hidden; min-width:80px; }
.bwt-prog .fill { height:6px; border-radius:3px; background:var(--accent); transition:width .2s; }
.bwt-prog .rn { font:600 12px var(--font-mono); color:var(--fg-2); white-space:nowrap; }
.bwt-sep { width:1px; align-self:stretch; background:var(--stroke-3); }
.bwt-btns { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.bwt-btns .bw-dt .n { font-family:var(--font-mono); opacity:.75; }
.bwt-panel { display:none; border-top:1px solid var(--stroke-3); padding:12px 14px;
flex-direction:column; gap:8px; max-height:44vh; overflow:auto; }
.bwt-panel.on { display:flex; }
.bwt-panel .ri { display:flex; gap:8px; align-items:flex-start; font:400 12.5px/18px var(--font-sans); color:var(--fg-2); }
.bwt-panel .ri input { width:15px; height:15px; flex:none; margin:2px 0 0; accent-color:var(--accent); cursor:pointer; }
.bwt-panel .ri > svg { width:13px; height:13px; flex:none; margin-top:3px; color:var(--warning-fg); }
.bwt-panel .ri > span { min-width:0; }
.bwt-panel .ri code { font:600 11px var(--font-mono); background:var(--bg-3); border:1px solid var(--stroke-2);
border-radius:4px; padding:1px 4px; overflow-wrap:anywhere; }
.bwt-panel .ph { font:600 11px var(--font-sans); text-transform:uppercase; letter-spacing:.08em; color:var(--fg-3); }
/* The one DOCUMENT a toolbar panel offers — the full guide behind "How Copy
action works". A full page card inside a 44vh scroll box reads as a stray
box, so it sits flush with the rows above it instead. */
.bwt-panel > .sec { padding:10px 12px; box-shadow:none; background:var(--bg-2); }
.bwt-key { display:flex; flex-wrap:wrap; gap:6px 16px; }
.bwt-key span { display:inline-flex; align-items:center; gap:6px; font:400 12px var(--font-sans); color:var(--fg-2); }
.bwt-key i { width:9px; height:9px; border-radius:2px; flex:none; }
@media (max-width:700px){ .bwt-sep { display:none; } }
/* ---- 1c. Nesting costs less width per level -------------------------
A four-deep action used to give up ~66px a level (26px bubble + 12px gap
+ 28px of body padding). Nested levels now use a smaller bubble and
tighter padding: ~48px, so a deep Apply-to-each still reads. */
.bw-step.sub { gap:8px; }
.bw-step.sub > .bw-gutter { padding-top:8px; }
.bw-step.sub .bw-num { width:20px; height:20px; font-size:11px; }
.bw-step.sub::before { left:10px; top:30px; }
.bw-step.sub > .bw-card > .bw-body { padding:11px 11px 12px; }
.bw-step.sub > .bw-card > .bw-hrow > .bw-head { padding:8px 11px; min-height:38px; }
/* ---- 1d. Connector colour, in the step header ------------------------
Anthony's mapping (2026-07-29), to read like the Power Automate designer:
Excel green · SharePoint teal · Outlook/Word blue · Teams & Approvals
purple · variables and data steps light purple · flow controls grey.
The card's left edge carries it and the header takes a 7% wash — enough
to scan a long spec by product, not enough to shout. */
.bw-card { --cc:var(--stroke-2); }
.bw-card.c-excel { --cc:#107C41; }
.bw-card.c-sp { --cc:#038387; }
.bw-card.c-mail { --cc:#0F6CBD; }
.bw-card.c-onedrive { --cc:#0364B8; }
.bw-card.c-teams { --cc:#6264A7; }
.bw-card.c-ai { --cc:#B146C2; }
.bw-card.c-data { --cc:#A47BD6; }
.bw-card.c-ctrl { --cc:#8A8A8A; }
.bw-card.tinted { border-left:3px solid var(--cc); }
.bw-card.tinted > .bw-hrow { background:color-mix(in srgb, var(--cc) 7%, transparent); }
.bw-card.tinted > .bw-hrow > .bw-head:hover { background:color-mix(in srgb, var(--cc) 8%, transparent); }
.bw-card.tinted .bw-conn { border-color:color-mix(in srgb, var(--cc) 35%, var(--stroke-2)); }
/* The old rule painted every nested card's edge accent-blue, and a Yes
branch's edge purple. The connector colour replaces both — a Scope inside
a Scope no longer reads as "blue", and the Yes/No branch keeps its own
signal in the crumb chip on the header row, where it says so in words. */
.bw-step.sub > .bw-card { border-left:3px solid var(--cc); }
/* ---- 2. Foldable asset-page sections --------------------------------- */
details.sec > summary.sh { list-style:none; cursor:pointer; margin:0; }
details.sec > summary.sh::-webkit-details-marker { display:none; }
details.sec > summary.sh { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
details.sec > summary.sh h3 { font-size:15px; }
details.sec > summary.sh .note { color:var(--fg-3); font-size:12px; }
details.sec > summary.sh .grow { flex:1; }
details.sec > summary.sh .fchev svg { width:15px; height:15px; color:var(--fg-4); transition:transform .15s; }
details.sec[open] > summary.sh .fchev svg { transform:rotate(180deg); }
details.sec > summary.sh:hover h3 { color:var(--accent-strong); }
details.sec > .secbody { margin-top:14px; }
details.sec > summary.sh .foldtag { font:600 11px var(--font-sans); color:var(--fg-3);
background:var(--bg-3); border:1px solid var(--stroke-2); border-radius:var(--radius-s); padding:1px 7px; }
/* ---- 3a. Home: the queue's sort control ------------------------------ */
.panel > .ph .sortsel { margin-left:auto; display:flex; align-items:center; gap:6px; }
.qchip { display:inline-flex; align-items:center; gap:4px; height:19px; padding:0 7px; flex:none;
border-radius:var(--radius-s); border:1px solid var(--stroke-2); background:var(--bg-2);
font:600 10.5px var(--font-sans); color:var(--fg-3); white-space:nowrap; }
.qchip svg { width:11px; height:11px; }
.qchip.e1 { color:var(--success-fg); background:var(--success-bg); border-color:var(--success-stroke); }
.qchip.e2 { color:var(--warning-fg); background:var(--warning-bg); border-color:var(--warning-stroke); }
.qchip.e3 { color:var(--idea-fg); background:var(--idea-bg); border-color:var(--idea-stroke); }
.qchip.chain { color:var(--accent-strong); background:var(--accent-soft); border-color:var(--accent-soft-stroke); }
/* ======================================================================
THE FIVE-ROOM SHELL (2026-08-02 redesign)
One left rail, five rooms — Home, Library, Projects, Estate, Resources.
Everything below this comment replaces the top-ribbon chrome; the
component styles above (cards, badges, walkthrough, asset pages) are
unchanged and still do their jobs inside the rooms.
================================================================== */
/* Kind dots — one dot, no badges. Names match the design-system tokens. */
:root {
--node-script:#0F6CBD; --node-flow:#8764B8; --node-query:#0E700E;
--node-bundle:#616161; --node-setup:#BC4B09;
--node-manual:#616161; --node-automated:#0F6CBD; --node-decision:#8764B8;
--node-bottleneck:#BC4B09; --node-opportunity:#0E700E;
--rail-w:236px;
}
:root[data-theme="dark"], :root:not([data-theme="light"]) { }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --node-script:#479EF5; --node-flow:#B18FDB; --node-query:#54B054;
--node-bundle:#A8A8A8; --node-setup:#E8974A;
--node-manual:#A8A8A8; --node-automated:#479EF5; --node-decision:#B18FDB;
--node-bottleneck:#E8974A; --node-opportunity:#54B054; }
}
:root[data-theme="dark"] { --node-script:#479EF5; --node-flow:#B18FDB; --node-query:#54B054;
--node-bundle:#A8A8A8; --node-setup:#E8974A;
--node-manual:#A8A8A8; --node-automated:#479EF5; --node-decision:#B18FDB;
--node-bottleneck:#E8974A; --node-opportunity:#54B054; }
.kdot { width:7px; height:7px; border-radius:50%; flex:none; display:inline-block; }
/* `hidden` has to beat the component's own display rule — the rail's pinned
strip is a flex column, and flex was quietly winning. */
[hidden] { display:none !important; }
.shell { display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); min-height:100vh; align-items:start; }
/* The room is the column to the right of the rail. It is declared a size
container so anything inside it that wants to break out of the reading
width (see .asset-wide) can measure the room instead of the window —
100vw would count the rail's 236px and the scrollbar as usable space and
push the block off the right edge. */
.roomwrap { min-width:0; container-type:inline-size; }
.roomwrap > main.wrap { padding-top:4px; }
/* (retired with the top-bar shell, 2026-08-24: the left rail, its pinned strip and its facet column) */
/* ---- HOME (retired 2026-08-24 — the Library is the landing) ----
Only .resume-none survives; the projects board reuses it as its own
empty-state card. */
.resume-none { border:1px dashed var(--stroke-1); border-radius:var(--radius-l); padding:16px;
font:400 12px/17px var(--font-sans); color:var(--fg-3); }
/* ---- LIBRARY ---- */
.libbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:20px 0 14px;
border-bottom:1px solid var(--stroke-2); }
.libsearch { flex:1; max-width:520px; height:36px; border:1px solid var(--stroke-1); border-radius:var(--radius-m);
background:var(--bg-1); display:flex; align-items:center; gap:9px; padding:0 12px; }
.libsearch:focus-within { border-color:var(--accent); box-shadow:var(--ring); }
.libsearch svg { width:15px; height:15px; color:var(--fg-3); flex:none; }
.libsearch input { flex:1; min-width:0; border:none; background:none; outline:none; color:var(--fg-1);
font:400 13px var(--font-sans); }
.libsearch .kbd { font:600 10px var(--font-sans); color:var(--fg-3); border:1px solid var(--stroke-1);
border-radius:var(--radius-s); padding:3px 5px; }
.libbar .note { font:400 12px/16px var(--font-sans); color:var(--fg-3); }
/* One column. The 300px rail of usage stats and explainer cards was removed
2026-08-05 — Anthony: "Dedicating a full column to details that frankly no
one asked for is poor design." Both facts it carried are now stated where
they are used instead: the rail's "Live from repo" badge covers freshness,
and each flow walkthrough covers its own paste button. */
.libcols { display:grid; grid-template-columns:minmax(0,1fr); gap:0; align-items:start; }
.libcols > .fitgroups { padding:14px 0 32px 0; }
/* Dense asset rows — kind is a dot, status is a word. */
.grouphead { display:flex; align-items:center; gap:8px; padding:12px 4px 4px; width:100%; border:none;
background:none; cursor:pointer; text-align:left; }
.grouphead svg { width:14px; height:14px; color:var(--fg-3); flex:none; transition:transform .15s; }
.grouphead .gt { font:600 13px/17px var(--font-sans); color:var(--fg-1); }
.grouphead .gs { font:400 11px/15px var(--font-sans); color:var(--fg-3); min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Two lines on a grid: the scan line, then the sentence. The columns are
fixed widths so "monthly" sits under "monthly" all the way down the list —
that alignment is what turns a stack of strings into something you can read
at a glance. Rebuilt 2026-08-05; see assetRow() for why. */
.drow { padding:8px 12px 9px; border-radius:var(--radius-m); cursor:pointer; border:1px solid transparent;
display:grid; column-gap:10px; row-gap:2px; align-items:center;
grid-template-columns:10px minmax(0,1fr) 104px 84px;
grid-template-areas:"dot name stw act" ". desc desc desc"; }
.drow:hover { background:var(--bg-3); }
.drow.cur { background:var(--accent-soft); border-color:var(--accent-soft-stroke); }
.drow .d-dot { grid-area:dot; display:flex; }
.drow .nm { grid-area:name; min-width:0; font:600 12.5px/17px var(--font-mono); color:var(--fg-1);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drow .d-stw { grid-area:stw; min-width:0; }
.drow .d-act { grid-area:act; display:flex; justify-content:flex-end; }
/* One line, clamped — his 2026-08-24 "too much clutter and bulk" pass took
the second line back; the full sentence lives one click away on the page. */
.drow .d-desc { grid-area:desc; min-width:0; font:400 12px/17px var(--font-sans); color:var(--fg-3);
display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.drow .d-kind { color:var(--fg-3); font-size:11px; }
.drow .d-kind:after { content:" — "; }
.drow .d-sum { display:inline; }
.drow .stw { font:400 11px/15px var(--font-sans); flex:none; }
/* A pipeline's own "end to end" row, and the bundle hits in a search: one
line, no cadence or status of their own. They keep the old flex shape. */
.drow.simple { display:flex; align-items:center; gap:10px; min-height:40px; padding:5px 12px; }
.drow.simple .nm { flex:0 1 210px; min-width:96px; }
.drow.simple .sm { flex:1 2 auto; min-width:0; font:400 12px/16px var(--font-sans); color:var(--fg-3);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drow .stw.s-live { color:var(--success-fg); }
.drow .stw.s-wait { color:var(--warning-fg); }
.drow .stw.s-neutral { color:var(--fg-3); }
.dbtn { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; flex:none;
border:1px solid var(--stroke-1); border-radius:var(--radius-m); background:var(--bg-1);
font:600 11px var(--font-sans); color:var(--fg-1); cursor:pointer; }
.dbtn:hover { background:var(--bg-3); }
.dbtn svg { width:12px; height:12px; }
.dbtn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
/* ---- PROJECTS ---- */
.projcols { display:grid; grid-template-columns:330px minmax(0,1fr); gap:0; align-items:start; min-height:70vh; }
.projboard { padding:20px 18px 32px 0; border-right:1px solid var(--stroke-3);
display:flex; flex-direction:column; gap:8px; }
.projboard .bh { padding:0 4px 6px; display:flex; align-items:baseline; gap:8px; }
.projboard .bh h2 { font:600 15px/20px var(--font-sans); }
.projboard .bh .s { font:400 11px/15px var(--font-sans); color:var(--fg-3); }
.pcard { border:1px solid var(--stroke-2); border-radius:var(--radius-l); padding:12px 14px; display:flex;
flex-direction:column; gap:5px; cursor:pointer; background:var(--bg-1); text-align:left; width:100%; }
.pcard:hover { border-color:var(--accent); }
.pcard[aria-current="true"] { border-color:var(--accent); background:var(--accent-soft); }
.pcard .ph2 { display:flex; align-items:center; gap:8px; }
.pcard .pt { flex:1; min-width:0; font:600 13px/17px var(--font-sans); color:var(--fg-1); }
.pcard .pst { font:400 11px/15px var(--font-sans); color:var(--fg-3); flex:none; }
.pcard .pn { font:400 12px/17px var(--font-sans); color:var(--fg-2); }
.pcard.parked { padding:10px 14px; flex-direction:row; align-items:center; opacity:.65; border-color:var(--stroke-3); }
.pcard.parked .pt { font-size:12px; }
.projwork { padding:22px 0 40px 26px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.projwork .pw-h h2 { font:600 18px/24px var(--font-sans); }
.projwork .pw-h .m { margin-top:4px; font:400 12px/17px var(--font-sans); color:var(--fg-3); }
.nextstep { border:1px solid var(--accent-soft-stroke); border-radius:var(--radius-l); background:var(--accent-soft);
padding:14px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.nextstep .g { flex:1; min-width:220px; display:flex; flex-direction:column; gap:3px; }
.nextstep .k { font:600 11px/15px var(--font-sans); letter-spacing:.07em; text-transform:uppercase; color:var(--accent-strong); }
.nextstep .t { font:600 14px/19px var(--font-sans); color:var(--fg-1); }
.nextstep .w { font:400 12px/17px var(--font-sans); color:var(--fg-2); }
.nextstep .btn { flex:none; }
.pwcols { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; align-items:start; }
.pwbox { border:1px solid var(--stroke-2); border-radius:var(--radius-l); background:var(--bg-1); overflow:hidden; }
.pwbox .bh3 { padding:11px 16px 9px; border-bottom:1px solid var(--stroke-3); display:flex;
align-items:baseline; gap:8px; flex-wrap:wrap; }
.pwbox .bh3 h3 { flex:none; white-space:nowrap; }
.pwbox .bh3 h3 { font:600 13px/17px var(--font-sans); }
.pwbox .bh3 .s { font:400 11px/15px var(--font-sans); color:var(--fg-3); }
.pwitem { padding:10px 16px; display:flex; gap:11px; align-items:flex-start; border-bottom:1px solid var(--bg-3);
width:100%; border-left:none; border-right:none; border-top:none; background:none; cursor:pointer; text-align:left; }
.pwitem:last-child { border-bottom:none; }
.pwitem:hover { background:var(--bg-2); }
.pwitem .col { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.pwitem .n1 { font:600 12px/17px var(--font-mono); color:var(--fg-1); }
.pwitem .n2 { font:400 11px/16px var(--font-sans); color:var(--fg-3); text-wrap:pretty;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pwitem .qn { font:400 12px/17px var(--font-sans); color:var(--fg-1); }
.pwitem .qd { font:400 11px/15px var(--font-sans); color:var(--fg-3); }
.pwlinks { padding:12px 16px; display:flex; flex-direction:column; gap:6px; }
.pwlinks a, .pwlinks button { display:flex; align-items:center; gap:8px; font:400 12px/16px var(--font-sans);
color:var(--accent-strong); text-decoration:none; border:none; background:none; padding:0;
cursor:pointer; text-align:left; }
.pwlinks svg { width:13px; height:13px; flex:none; }
/* ---- RESOURCES ---- */
.resgrid { max-width:900px; margin:20px 0 48px; border:1px solid var(--stroke-1); border-radius:var(--radius-l);
background:var(--bg-1); box-shadow:var(--shadow-2); overflow:hidden; }
.resgrid > .rs { padding:14px 24px; border-bottom:1px solid var(--stroke-3); display:flex;
flex-direction:column; gap:9px; }
.resgrid > .rs:last-child { border-bottom:none; }
.resgrid .rs-h { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.resgrid .rs-h h3 { font:600 13px/17px var(--font-sans); }
.resgrid .rs-h .s { font:400 11px/15px var(--font-sans); color:var(--fg-3); }
.resgrid .rs p { margin:0; font:400 12px/19px var(--font-sans); color:var(--fg-2); text-wrap:pretty; }
.reshead { padding:18px 24px 14px; border-bottom:1px solid var(--stroke-2); }
.reshead h2 { font:600 18px/24px var(--font-sans); }
.reshead .s { margin-top:3px; font:400 12px/17px var(--font-sans); color:var(--fg-3); }
.chiprow { display:flex; gap:8px; flex-wrap:wrap; }
.nchip { display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 10px; border:1px solid var(--stroke-1);
border-radius:var(--radius-m); background:var(--bg-1); font:400 12px/12px var(--font-sans); color:var(--fg-2); }
.kindlegend { display:flex; gap:16px; flex-wrap:wrap; font:400 12px/16px var(--font-sans); color:var(--fg-2); }
.kindlegend span { display:inline-flex; align-items:center; gap:7px; }
.exprdemo { padding:9px 12px; border:1px solid var(--stroke-2); border-radius:var(--radius-m); background:var(--bg-2);
overflow-x:auto; }
.exprdemo code { font:400 12px/18px var(--font-mono); color:var(--fg-2); white-space:nowrap; }
.glyphrow { display:flex; gap:14px; align-items:center; flex-wrap:wrap; color:var(--fg-2); }
.glyphrow svg { width:16px; height:16px; }
.typerow { display:flex; gap:16px; align-items:baseline; flex-wrap:wrap; }
.tokgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.tokcell { border:1px solid var(--stroke-2); border-radius:var(--radius-m); padding:8px 10px;
display:flex; align-items:center; gap:9px; }
.tokcell .sw { width:20px; height:20px; border-radius:var(--radius-s); border:1px solid var(--stroke-2); flex:none; }
.tokcell .tn { font:400 11px/14px var(--font-mono); color:var(--fg-2); min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* "What it needs from you" — the lead block on an asset page: prerequisites,
parameters, and where a query lands. All of it used to be right-rail
reference; it is setup instruction, so it leads. */
.startsec { border:1px solid var(--accent-soft-stroke); background:var(--accent-soft);
border-radius:var(--radius-l); padding:14px 16px; margin-bottom:14px; }
.startsec .starthead { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:10px; }
.startsec .starthead h3 { font:600 15px var(--font-sans); margin:0; }
.startsec .starthead .note { font:400 12px var(--font-sans); color:var(--fg-3); }
.startsec .startblk + .startblk { margin-top:12px; }
.startsec .facet-h { margin-bottom:6px; }
.startsec .glance { background:var(--bg-1); border:1px solid var(--stroke-2);
border-radius:var(--radius-m); padding:9px 11px; }
.asset-wide-top { margin-bottom:20px; }
.bw-none { border:1px dashed var(--stroke-1); background:var(--bg-2); }
.bw-none p { margin:8px 0 0; font-size:13px; line-height:1.6; color:var(--fg-2); max-width:74ch; }
.bw-none p.muted { font-size:12px; color:var(--fg-3); }
.notes-block.supersede { background:var(--warning-bg); border-color:var(--warning-stroke); }
.notes-block.supersede a { color:var(--accent-strong); font-weight:600; }
.repl { flex:none; font:400 11px/15px var(--font-sans); color:var(--fg-3);
border:1px solid var(--stroke-2); border-radius:var(--radius-s); padding:1px 6px; }
.repl.old { color:var(--warning-fg); border-color:var(--warning-stroke); background:var(--warning-bg); }
.drow.isold .nm { color:var(--fg-3); }
/* A segmented control — two or three exclusive choices in one strip.
Built 2026-08-02 for the For-you page's status setter; that page is gone
(2026-09-07) and the build page's "Read it as" switch uses it now. */
.seg { display:inline-flex; flex-wrap:wrap; gap:0; border:1px solid var(--stroke-1);
border-radius:var(--radius-m); overflow:hidden; }
.seg button { height:26px; padding:0 10px; border:none; border-right:1px solid var(--stroke-1);
background:var(--bg-1); font:400 11px var(--font-sans); color:var(--fg-3); cursor:pointer; }
.seg button:last-child { border-right:none; }
.seg button:hover { background:var(--bg-3); color:var(--fg-1); }
.seg button[aria-pressed="true"] { background:var(--accent); color:#fff; font-weight:600; }
/* ---- Narrow screens: graceful degradation, desktop-first (his call) ---- */
@media (max-width:1080px) {
.libcols, .projcols { grid-template-columns:minmax(0,1fr); }
.libcols > .fitgroups, .projboard { border-right:none; padding-right:0; }
.projwork { padding-left:0; border-top:1px solid var(--stroke-3); padding-top:18px; }
.pwcols { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:860px) {
.topnav .rlink .lb { display:none; } /* icon-only tabs when narrow */
.topbar .jumptrig { min-width:0; }
.jumptrig .jl { display:none; }
.topside .rlink .lb { display:none; }
.drow.simple .nm { width:auto; max-width:42%; }
.doorfacts, .statestrip { grid-template-columns:repeat(2,minmax(0,1fr)); }
.doorrow { flex-direction:column; }
.dooract { align-items:flex-start; }
}
@media print {
.topbar, footer, .toast { display:none !important; }
.shell { display:block; }
details { display:block; } details > summary { display:none; }
a[href^="http"]::after { content:" (" attr(href) ")"; font-size:10px; color:#555; }
/* Print a manual the way the team's Word job aids print: nothing tinted
burning ink, and no step, table row, figure or callout torn across a
page break — the thing a reader is following while they work. */
body { background:#fff !important; color:#000 !important; }
.mdfig, .bw-callout, .bw-fence, table, tr, li { break-inside:avoid; page-break-inside:avoid; }
.mdfig img, img.mdimg { max-width:100%; }
h1, h2, h3 { break-after:avoid; page-break-after:avoid; }
.bw-callout { border:1px solid #999 !important; background:#fff !important; }
}
/* ========================================================================
THE COMPONENT KIT (2026-08-24) — the structural layer that came with the
hub redesign's build set: the top bar and its five surfaces, the door and
its state strip (C01), altitude regions (C02), notices (C03), fact tables
(C04), walkthrough lanes/rails/closing lines (C05), the process/estate
maps (C12), ask unblocks (C13) and the Jump palette (C14). Everything
below uses only the tokens above, so dark mode needs no second copy.
==================================================================== */
/* ---- Top bar — one nav, five surfaces ---- */
.topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
height:48px; padding:0 clamp(12px,2.5vw,24px); background:var(--bg-1);
border-bottom:1px solid var(--stroke-2); box-shadow:var(--shadow-1); }
.topbar .grow { flex:1; }
.brand { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--fg-1); }
.brand .mark { display:inline-flex; width:22px; height:22px; color:var(--accent); }
.brand .mark svg { width:22px; height:22px; }
.brand .bt { font:600 14px/1 var(--font-sans); letter-spacing:-.01em; white-space:nowrap; }
.topnav { display:flex; align-items:center; gap:2px; margin-left:8px; }
.topnav .rlink { display:inline-flex; align-items:center; gap:6px; height:48px; padding:0 12px;
border:none; background:none; cursor:pointer; color:var(--fg-2);
font:400 13px/1 var(--font-sans); border-bottom:2px solid transparent; border-top:2px solid transparent; }
.topnav .rlink svg { width:16px; height:16px; }
.topnav .rlink:hover { background:var(--bg-2); color:var(--fg-1); }
.topnav .rlink[aria-selected="true"] { color:var(--fg-1); font-weight:600; border-bottom-color:var(--accent); }
.topnav .rlink .n { font:600 11px/16px var(--font-sans); color:var(--fg-3); background:var(--bg-3);
border-radius:var(--radius-circle); padding:0 6px; }
.topside { display:flex; align-items:center; gap:2px; padding-left:10px; border-left:1px solid var(--stroke-2); }
.topside .rlink { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px;
border-radius:var(--radius-m); color:var(--fg-3); text-decoration:none; font:400 12px/1 var(--font-sans); }
.topside .rlink svg { width:15px; height:15px; }
.topside .rlink:hover { background:var(--bg-2); color:var(--fg-1); text-decoration:none; }
.jumptrig { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px;
border:1px solid var(--stroke-1); border-radius:var(--radius-m); background:var(--bg-2);
color:var(--fg-3); cursor:pointer; font:400 12px/1 var(--font-sans); min-width:200px; }
.jumptrig:hover { background:var(--bg-1); border-color:var(--stroke-strong); }
.jumptrig svg { width:14px; height:14px; }
.jumptrig .jl { flex:1; text-align:left; }
.jumptrig kbd, .jumpbox .kbd { font:600 10px/16px var(--font-mono); color:var(--fg-3); background:var(--bg-1);
border:1px solid var(--stroke-1); border-radius:var(--radius-s); padding:0 5px; }
main.wrap { padding-top:22px; padding-bottom:64px; min-height:calc(100vh - 200px); }
/* ---- Page doors (C01 in page form) + the asset door ---- */
.pagedoor { margin:6px 0 18px; }
.pagedoor h1 { font:600 24px/32px var(--font-sans); letter-spacing:-.02em; }
.doorsub { margin:6px 0 0; font:400 14px/21px var(--font-sans); color:var(--fg-2); max-width:74ch; }
.doorfacts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--stroke-2);
border:1px solid var(--stroke-2); border-radius:var(--radius-m); overflow:hidden; margin-top:14px; }
.doorfacts .df { background:var(--bg-1); padding:9px 12px; }
.doorfacts .dk { display:block; font:400 11px/15px var(--font-sans); color:var(--fg-3);
text-transform:uppercase; letter-spacing:.05em; }
.doorfacts .dv { display:block; font:600 13px/18px var(--font-sans); color:var(--fg-1); margin-top:2px; }
.doorresume { display:flex; align-items:center; gap:10px; margin-top:10px; padding:9px 12px;
background:var(--accent-soft); border:1px solid var(--accent-soft-stroke); border-radius:var(--radius-m); }
.doorresume .t { font:400 13px/18px var(--font-sans); color:var(--fg-2); min-width:0; }
.doorresume .go { font:600 12px/1 var(--font-sans); color:var(--accent); text-decoration:none; white-space:nowrap; }
.doorresume .go:hover { text-decoration:underline; }
.doorresume .x { margin-left:auto; border:none; background:none; cursor:pointer; color:var(--fg-4);
display:inline-flex; padding:2px; border-radius:var(--radius-s); }
.doorresume .x:hover { background:var(--bg-2); color:var(--fg-2); }
.doorresume .x svg { width:14px; height:14px; }
.door { background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-l);
box-shadow:var(--shadow-2); padding:20px 22px 16px; margin:10px 0 14px; }
.doorrow { display:flex; align-items:flex-start; gap:18px; }
.doormain { flex:1; min-width:0; }
.doortitle { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.doortitle h2 { font:600 20px/26px var(--font-sans); letter-spacing:-.02em; }
.door .doorsub { margin:0 0 4px; max-width:62ch; }
.dooract { display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex-shrink:0; }
.dooract .btn { white-space:nowrap; }
.doorlive { font:400 11px/15px var(--font-sans); color:var(--fg-3); }
.statestrip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--stroke-2);
border:1px solid var(--stroke-2); border-radius:var(--radius-m); overflow:hidden; margin-top:14px; }
.statestrip .sf { background:var(--bg-1); padding:9px 12px; min-width:0; }
.statestrip .sk { display:block; font:400 11px/15px var(--font-sans); color:var(--fg-3);
text-transform:uppercase; letter-spacing:.05em; }
.statestrip .sv { display:block; font:600 13px/18px var(--font-sans); color:var(--fg-1); margin-top:2px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.statestrip .sv .mono { font-family:var(--font-mono); font-size:12px; }
.statestrip .dash { color:var(--fg-3); border-bottom:1px dotted var(--stroke-1); cursor:help; }
/* ---- Notices (C03): one line, one glyph, four tones ---- */
.notices { display:flex; flex-direction:column; gap:8px; margin:0 0 16px; }
.nrest { display:flex; flex-direction:column; gap:8px; }
.notice { display:flex; gap:10px; align-items:flex-start; padding:10px 13px;
background:var(--bg-1); border:1px solid var(--stroke-2); border-left:3px solid var(--stroke-1);
border-radius:var(--radius-m); }
.notice .ng { color:var(--fg-4); font-weight:700; line-height:19px; flex-shrink:0; }
.notice .ng.i svg { width:15px; height:15px; margin-top:2px; }
.notice .nb { font:400 13px/19px var(--font-sans); color:var(--fg-2); min-width:0; }
.notice .nb b { color:var(--fg-1); }
.notice .na { margin-left:8px; }
.notice .na a { font:600 12px/1 var(--font-sans); color:var(--accent); text-decoration:none; }
.notice .na a:hover { text-decoration:underline; }
.notice.n-warn { background:var(--warning-bg); border-color:var(--warning-stroke); border-left-color:var(--warning-fg); }
.notice.n-warn .ng, .notice.n-warn .nb b { color:var(--warning-fg); }
.notice.n-missing .nb b { color:var(--fg-2); }
.notice.n-more { align-items:center; background:var(--bg-2); border-left:1px solid var(--stroke-2); }
.notice.n-more .t { font:400 12px/16px var(--font-sans); color:var(--fg-3); }
.notice.n-more .show { margin-left:auto; border:none; background:none; cursor:pointer;
font:600 12px/1 var(--font-sans); color:var(--accent); }
/* ---- Altitude regions (C02) ---- */
.alt { margin:0 0 22px; }
.alt-h { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.alt-h::after { content:""; flex:1; height:1px; background:var(--stroke-2); }
.alt-tag { font:600 11px/16px var(--font-sans); text-transform:uppercase; letter-spacing:.08em; color:var(--fg-3);
padding-left:10px; border-left:3px solid var(--stroke-1); }
.alt-tag.t-do { border-left-color:var(--accent); color:var(--accent); }
.alt-tag.t-copy { border-left-color:var(--success-fg); }
.alt-tag.t-fix { border-left-color:var(--warning-fg); }
.alt-tag.t-why { border-left-color:var(--bg-3); }
.altwhy { background:var(--bg-2); border:1px solid var(--stroke-2); border-radius:var(--radius-m);
margin:0 0 22px; overflow:hidden; }
.altwhy > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:11px 14px; }
.altwhy > summary::-webkit-details-marker { display:none; }
.altwhy > summary:hover { background:var(--bg-3); }
.altwhy .whysum { font:400 12px/16px var(--font-sans); color:var(--fg-3); }
.altwhy .fchev { margin-left:auto; color:var(--fg-3); display:inline-flex; }
.altwhy .fchev svg { width:15px; height:15px; transition:transform 150ms; }
.altwhy[open] .fchev svg { transform:rotate(90deg); }
.altwhy .whybody { padding:4px 14px 14px; background:var(--bg-1); border-top:1px solid var(--stroke-2); }
.buildcard { display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:12px;
background:var(--bg-1); border:1px solid var(--stroke-2); border-left:3px solid var(--accent);
border-radius:0 var(--radius-m) var(--radius-m) 0; text-decoration:none; color:inherit;
box-shadow:var(--shadow-1); }
.buildcard:hover { background:var(--bg-2); text-decoration:none; }
.buildcard .bc-i { display:inline-flex; color:var(--accent); }
.buildcard .bc-i svg { width:22px; height:22px; }
.buildcard .bc-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.buildcard .bc-t b { font:600 14px/19px var(--font-sans); color:var(--fg-1); }
.buildcard .bc-s { font:400 12px/17px var(--font-sans); color:var(--fg-3); }
.buildcard .bc-go { display:inline-flex; align-items:center; gap:4px; font:600 12px/1 var(--font-sans);
color:var(--accent); white-space:nowrap; }
.buildcard .bc-go svg { width:14px; height:14px; }
.knowfacts { margin-top:4px; }
/* ---- Fact table, symptom mode (C04) ---- */
.facttable { border:1px solid var(--stroke-2); border-radius:var(--radius-m); overflow:hidden; background:var(--bg-1); }
.facttable .fth { display:grid; grid-template-columns:1.1fr 1.6fr; background:var(--bg-2);
border-bottom:1px solid var(--stroke-2); }
.facttable .fth > div { padding:7px 12px; font:600 11px/16px var(--font-sans); color:var(--fg-3);
text-transform:uppercase; letter-spacing:.05em; }
.facttable .ftr { display:grid; grid-template-columns:1.1fr 1.6fr; border-bottom:1px solid var(--stroke-2); }
.facttable .ftr:last-child { border-bottom:none; }
.facttable .ftc { padding:9px 12px; font:400 13px/19px var(--font-sans); color:var(--fg-2); min-width:0; }
.facttable .ftc.sym { font-weight:600; color:var(--fg-1); }
.facttable .ftc.sym.mono { font-family:var(--font-mono); font-size:12px; font-weight:400; }
.facttable .ftc.fix ol.fa { margin:0; padding-left:18px; }
.facttable .ftc.fix ol.fa li { margin:2px 0; }
/* ---- The layout contract (ENRICH `contract`) ----
What the workbook must already contain for a script to run: component
left, expectation right, the missing-case under it behind a dashed rule,
the drawings after the table. Dotted-underline terms carry their
definition in a hover tooltip (the hub is desktop-only). */
.facttable.contract .fth, .facttable.contract .ftr { grid-template-columns:minmax(150px,0.75fr) 2fr; }
.facttable.contract .ftc.cname { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.facttable.contract .ftc.cname code { font:600 12px/17px var(--font-mono); color:var(--fg-1);
background:var(--bg-2); border:1px solid var(--stroke-2); border-radius:5px; padding:2px 7px;
overflow-wrap:anywhere; }
.ckind { font:600 10px/14px var(--font-sans); letter-spacing:.05em; text-transform:uppercase;
color:var(--fg-3); }
.cmiss { display:flex; align-items:flex-start; gap:7px; margin-top:8px; padding-top:8px;
border-top:1px dashed var(--stroke-2); font-size:12.5px; line-height:18px; color:var(--fg-3); }
.cmiss svg { flex:none; margin-top:1px; color:var(--warning-fg); }
.cmiss.i svg { color:var(--fg-3); }
.clead { margin:0 0 12px; font:400 13px/20px var(--font-sans); color:var(--fg-2); }
.cfigs { margin-top:16px; display:grid; gap:18px; }
.cfigs .mdfig { margin:0; }
.tip { border-bottom:1px dotted var(--fg-4); cursor:help; }
/* ---- Filter bar + pinned strip ---- */
.libbar { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; align-items:flex-start; }
.libbar .libsearch { width:min(560px, 100%); margin:0; }
.filterbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.fseg { display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--stroke-1); border-radius:var(--radius-m); overflow:hidden; }
.fchip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:none; cursor:pointer;
background:var(--bg-1); color:var(--fg-2); font:400 12px/16px var(--font-sans);
border-right:1px solid var(--stroke-2); }
.fchip:last-child { border-right:none; }
.fchip:hover { background:var(--bg-2); }
.fchip[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent-strong); font-weight:600; }
.fchip .n { font:600 11px/14px var(--font-sans); color:var(--fg-3); }
.fchip.empty { color:var(--fg-3); }
.fchip .kdot { width:8px; height:8px; border-radius:2px; }
.pinstrip { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pinstrip .pinhead { font:600 11px/16px var(--font-sans); color:var(--fg-3); text-transform:uppercase; letter-spacing:.06em; }
.pinchip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; cursor:pointer;
background:var(--bg-1); border:1px solid var(--stroke-1); border-radius:var(--radius-circle);
font:400 12px/16px var(--font-sans); color:var(--fg-2); }
.pinchip:hover { background:var(--accent-soft); border-color:var(--accent-soft-stroke); color:var(--accent-strong); }
.pinchip svg { width:13px; height:13px; }
.libfoot { margin-top:14px; font:400 12px/17px var(--font-sans); color:var(--fg-3); }
/* ---- The shelf: untested content sinks and mutes (his 2026-08-24 call) ---- */
.drow.unv { opacity:.72; }
.drow.unv:hover, .drow.unv:focus-within { opacity:1; }
.drow .dbtn { opacity:0; transition:opacity 120ms; }
.drow:hover .dbtn, .drow:focus-within .dbtn { opacity:1; }
@media (hover:none) { .drow .dbtn { opacity:1; } }
/* ---- Process / estate maps (C12) ---- */
.procmap { display:flex; align-items:stretch; gap:8px; overflow-x:auto; padding:8px 2px 10px; }
.procmap.wrap { flex-wrap:wrap; overflow:visible; }
.pm-arrow { display:inline-flex; align-items:center; color:var(--fg-4); flex-shrink:0; }
.pm-arrow svg { width:15px; height:15px; }
.pm-node { display:inline-flex; flex-direction:column; justify-content:center; gap:2px; text-align:left;
padding:8px 12px; background:var(--bg-1); border:1px solid var(--stroke-2);
border-left:3px solid var(--accent); border-radius:0 var(--radius-m) var(--radius-m) 0;
box-shadow:var(--shadow-1); cursor:pointer; text-decoration:none; color:inherit; flex-shrink:0; max-width:240px; }
.pm-node:hover { background:var(--bg-2); text-decoration:none; }
.pm-node .t { font:600 12px/16px var(--font-sans); color:var(--fg-1); }
.pm-node .s { font:400 11px/14px var(--font-sans); color:var(--warning-fg); }
.pm-node.unv { opacity:.72; border-style:dashed; }
.mapbar { display:flex; align-items:center; gap:10px; margin:4px 0 14px; }
.mapbar .mz { font:600 10px/16px var(--font-sans); color:var(--fg-3); text-transform:uppercase; letter-spacing:.06em; }
.mapnote { font:400 12px/16px var(--font-sans); color:var(--fg-3); }
.mapstage { background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-l);
padding:18px; background-image:radial-gradient(var(--stroke-3) 1px, transparent 1px);
background-size:16px 16px; }
.mapestate { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.mapcol-h { display:block; width:100%; text-align:left; font:700 11px/16px var(--font-sans); color:var(--fg-3);
text-transform:uppercase; letter-spacing:.06em; margin-bottom:7px; border:none; background:none;
cursor:pointer; padding:0; }
.mapcol-h:hover { color:var(--accent); }
.mapcol-h.plain { cursor:default; }
.mapcol-h.plain:hover { color:var(--fg-3); }
.mapcol-b { display:flex; flex-direction:column; gap:4px; }
.mapchip { text-align:left; padding:4px 8px; background:var(--bg-1); border:1px solid var(--stroke-2);
border-left:3px solid var(--accent); border-radius:var(--radius-s); cursor:pointer;
font:400 11px/15px var(--font-mono); color:var(--fg-1); box-shadow:var(--shadow-1);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mapchip:hover { background:var(--accent-soft); }
.mapchip.unv { opacity:.62; border-style:dashed; }
.maplegend { display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font:400 12px/16px var(--font-sans); color:var(--fg-3); }
.maplegend .sw { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; }
.maplegend .sw.live { background:var(--success-fg); }
.maplegend .sw.unv { background:var(--warning-fg); opacity:.6; }
.mappick { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.mappick .fchip { border:1px solid var(--stroke-1); border-radius:var(--radius-m); }
.mapfoot { margin-top:10px; font:400 12px/17px var(--font-sans); }
.mapfoot a { color:var(--accent); text-decoration:none; font-weight:600; }
.mapfoot a:hover { text-decoration:underline; }
/* ---- Guides ---- */
.guides { display:flex; flex-direction:column; gap:18px; max-width:900px; }
.guide { background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-l);
box-shadow:var(--shadow-1); padding:18px 20px; }
.guide-h h3 { font:600 16px/22px var(--font-sans); }
.guide-lede { margin:6px 0 12px; font:400 13px/19px var(--font-sans); color:var(--fg-2); max-width:74ch; }
.gsteps { margin:0 0 12px; padding-left:20px; }
.gsteps li { margin:6px 0; font:400 13px/19px var(--font-sans); color:var(--fg-2); }
.gbrowse { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:6px 12px;
border:1px solid var(--stroke-1); border-radius:var(--radius-m); background:var(--bg-1);
cursor:pointer; font:600 12px/16px var(--font-sans); color:var(--accent); }
.gbrowse:hover { background:var(--accent-soft); }
.gbrowse svg { width:14px; height:14px; }
.compcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-top:6px; }
.compcard { display:flex; flex-direction:column; gap:4px; padding:13px 15px; background:var(--bg-2);
border:1px solid var(--stroke-2); border-radius:var(--radius-m); text-decoration:none; color:inherit; }
.compcard:hover { background:var(--bg-3); text-decoration:none; }
.compcard b { font:600 14px/19px var(--font-sans); color:var(--fg-1); }
.compcard span { font:400 12px/17px var(--font-sans); color:var(--fg-3); }
/* ---- Jump (C14) ---- */
.jumpwrap[hidden] { display:none; }
.jumpwrap { position:fixed; inset:0; z-index:80; background:var(--bg-overlay,rgba(0,0,0,.4));
display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; }
.jumpbox { width:min(600px, 92vw); background:var(--bg-1); border:1px solid var(--stroke-1);
border-radius:var(--radius-l); box-shadow:var(--shadow-6); overflow:hidden; }
.jumpbox .jh { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--stroke-2); }
.jumpbox input { flex:1; border:none; outline:none; font:400 15px/20px var(--font-sans);
color:var(--fg-1); background:transparent; }
.jumpbox .jn { font:400 12px/16px var(--font-sans); color:var(--fg-3); white-space:nowrap; }
.jlist { max-height:min(400px, 56vh); overflow:auto; }
.jrow { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--stroke-3);
cursor:pointer; }
.jrow:hover, .jrow.sel { background:var(--bg-2); }
.jrow.sel { box-shadow:inset 3px 0 0 var(--accent); }
.jrow .jk { font:700 10px/15px var(--font-sans); text-transform:uppercase; letter-spacing:.05em;
color:var(--fg-3); width:90px; flex-shrink:0; }
.jrow .jn2 { font:600 13px/18px var(--font-sans); color:var(--fg-1); flex:1; min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jrow .jh2 { font:400 12px/16px var(--font-sans); color:var(--fg-3); white-space:nowrap; }
.jempty { padding:16px 14px; font:400 13px/19px var(--font-sans); color:var(--fg-3); }
/* ---- Walkthrough: lanes, rails, closing lines, path bar (C05) ---- */
.bw-lane { border:1px solid var(--stroke-2); border-radius:var(--radius-m); overflow:hidden; margin:8px 0; }
.bw-laneh { display:flex; align-items:center; gap:8px; padding:6px 11px; background:var(--bg-2);
border-bottom:1px solid var(--stroke-2); }
.bw-laneh .bl { font:700 11px/16px var(--font-sans); text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); }
.bw-laneh .bn { font:400 11px/16px var(--font-sans); color:var(--fg-3); }
.bw-lane.yes { border-color:var(--success-stroke); }
.bw-lane.yes .bw-laneh { background:var(--success-bg); border-bottom-color:var(--success-stroke); }
.bw-lane.yes .bw-laneh .bl { color:var(--success-fg); }
.bw-lane.no { border-style:dashed; }
.bw-lane > .bw-step { margin:8px; }
.bw-close { padding:6px 14px 8px; border-top:1px solid var(--stroke-2);
font:400 11px/16px var(--font-mono); color:var(--fg-3); }
.bw-step.k-loop > .bw-card { border-left:3px solid var(--node-automated); }
.bw-step.k-cond > .bw-card { border-left:3px solid var(--node-decision); }
.bw-step.k-scope > .bw-card { border-left:3px solid var(--node-bundle); }
.bw-step.k-box > .bw-card { border-left:3px solid var(--stroke-1); }
.bw-flash > .bw-card { outline:2px solid var(--accent); outline-offset:2px; transition:outline-color 300ms; }
.bwt-path { display:flex; align-items:center; gap:8px; padding:5px 14px; border-top:1px solid var(--stroke-2);
background:var(--bg-2); }
.bwt-path .pl2 { font:600 10px/15px var(--font-sans); color:var(--fg-3); text-transform:uppercase; letter-spacing:.06em; }
.bwt-path .pv2 { font:400 11px/15px var(--font-mono); color:var(--fg-2); overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; }
.bw-cont { margin-left:6px; }
/* ---- Footer keeps the live badge ---- */
footer .livebadge { margin-top:8px; }
/* ==================== 2026-09-01 design pass ==========================
Three additions from the finished design pass (the handoff in
_source-documents/design-handoffs/2026-09-01-hub-redesign/): the labelled Dark
switch in the top bar, the Automation opportunities surface, and the
contract-change styling on version rows. Tokens only — no new hue.
==================================================================== */
/* ---- The Dark switch — one labelled control, same key on every page ---- */
.tswitch { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 8px 0 10px;
border:1px solid var(--stroke-1); border-radius:var(--radius-m); background:var(--bg-1);
color:var(--fg-2); cursor:pointer; font:400 12px/1 var(--font-sans); flex-shrink:0; }
.tswitch:hover { background:var(--bg-2); color:var(--fg-1); }
.tswitch .tk { position:relative; width:28px; height:16px; border-radius:var(--radius-circle);
background:var(--stroke-1); transition:background .12s; flex:none; }
.tswitch .tk::after { content:""; position:absolute; top:2px; left:2px; width:12px; height:12px;
border-radius:50%; background:var(--bg-1); transition:transform .12s; }
.tswitch[aria-checked="true"] .tk { background:var(--accent); }
.tswitch[aria-checked="true"] .tk::after { transform:translateX(12px); background:#FFFFFF; }
.tswitch .tl { white-space:nowrap; }
@media (max-width:900px) { .tswitch .tl { display:none; } .tswitch { padding:0 8px; } }
/* ---- Automation opportunities — the register ----
The question it answers: "which manual step is worth automating next, and
what would it give back?" — and the answer differs row to row. The rows
live in the manifest (`opportunities`), not here. */
.oppbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.oppbar .fchip { border:1px solid var(--stroke-1); border-radius:var(--radius-circle); background:transparent; }
.oppbar .fchip[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent-soft-stroke); color:var(--fg-1); }
.oppbar .fchip .sd { width:7px; height:7px; border-radius:50%; flex:none; }
.opptag { margin:2px 0 0; font:400 12px/16px var(--font-sans); color:var(--fg-3); }
.opplist { display:flex; flex-direction:column; gap:8px; }
.opp { background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-l);
box-shadow:var(--shadow-2); overflow:hidden; }
.opp .oh { display:flex; align-items:center; gap:12px; width:100%; padding:12px 16px; border:none;
background:transparent; color:inherit; cursor:pointer; text-align:left; font:inherit; }
.opp .oh:hover { background:var(--bg-2); }
.opp .oh:focus-visible { box-shadow:inset 0 0 0 2px var(--accent); border-radius:var(--radius-s); }
.pchip { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none;
border-radius:var(--radius-m); background:var(--bg-2); color:var(--fg-2); }
.pchip img { display:block; width:17px; height:17px; }
.pchip svg { width:16px; height:16px; }
/* A product mark is never recoloured — in dark it sits on a light chip instead. */
:root[data-theme="dark"] .pchip.mark { background:#FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pchip.mark { background:#FFFFFF; } }
.opp .om { flex:1; min-width:0; }
.opp .ot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.opp .ot .t { font:600 13.5px/18px var(--font-sans); color:var(--fg-1); }
.opp .ow { display:block; margin-top:1px; font:400 12px/16px var(--font-sans); color:var(--fg-3);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.opp .ov { display:flex; flex-direction:column; align-items:flex-end; flex:none; }
.opp .ov .s { font:600 12px/16px var(--font-sans); color:var(--fg-2); white-space:nowrap; }
.opp .ov .e { font:400 11px/15px var(--font-sans); color:var(--fg-3); white-space:nowrap; }
.opp .oc { display:inline-flex; color:var(--fg-3); flex:none; }
.opp .oc svg { width:15px; height:15px; transition:transform .12s; }
.opp.open .oc svg { transform:rotate(180deg); }
.ost { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; flex:none;
border-radius:var(--radius-circle); border:1px solid var(--stroke-2); background:var(--bg-2);
color:var(--fg-2); font:600 11px/1 var(--font-sans); white-space:nowrap; }
.ost .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.ost.s-ready { background:var(--success-bg); border-color:var(--success-stroke); color:var(--success-fg); }
.ost.s-proposed { background:var(--accent-soft); border-color:var(--accent-soft-stroke); color:var(--accent-strong); }
.ost.s-waiting { background:var(--warning-bg); border-color:var(--warning-stroke); color:var(--warning-fg); }
.osug { display:inline-flex; align-items:center; height:18px; padding:0 7px; border-radius:var(--radius-circle);
background:var(--accent-soft); border:1px solid var(--accent-soft-stroke); color:var(--accent-strong);
font:600 10px/1 var(--font-sans); white-space:nowrap; }
.opp .ob { border-top:1px solid var(--stroke-2); padding:13px 16px 15px; animation:rise .14s cubic-bezier(.1,.9,.2,1) both; }
.opp .og { display:grid; grid-template-columns:92px minmax(0,1fr); gap:8px 14px; max-width:84ch;
font:400 12px/17px var(--font-sans); }
.opp .og .k { color:var(--fg-3); font-weight:600; }
.opp .og .v { color:var(--fg-2); }
.opp .of { display:flex; align-items:center; gap:14px; margin-top:12px; padding-top:11px;
border-top:1px solid var(--stroke-2); font:400 12px/16px var(--font-sans); color:var(--fg-3); flex-wrap:wrap; }
.opp .of .grow { flex:1; }
.opp .of a { color:var(--accent); text-decoration:none; font-weight:600; }
.opp .of a:hover { text-decoration:underline; }
.opp .of .odis { border:none; background:transparent; cursor:pointer; padding:2px 6px; border-radius:var(--radius-s);
font:600 12px/16px var(--font-sans); color:var(--fg-3); }
.opp .of .odis:hover { background:var(--bg-2); color:var(--fg-1); }
.oppempty { background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-l);
padding:34px 20px; text-align:center; }
.oppempty .t { font:600 14px/20px var(--font-sans); color:var(--fg-1); margin-bottom:4px; }
.oppempty .s { font:400 14px/20px var(--font-sans); color:var(--fg-3); }
.oppsep { display:flex; align-items:center; gap:12px; margin:30px 0 12px; }
.oppsep .l { font:600 11px/16px var(--font-sans); color:var(--fg-3); letter-spacing:.08em; text-transform:uppercase; }
.oppsep .r { flex:1; height:1px; background:var(--stroke-2); }
.banked { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
.bank { display:flex; align-items:flex-start; gap:10px; background:var(--bg-1); border:1px solid var(--stroke-2);
border-left:3px solid var(--success-fg); border-radius:var(--radius-l); box-shadow:var(--shadow-2); padding:12px 14px;
text-decoration:none; color:inherit; }
.bank:hover { background:var(--bg-2); text-decoration:none; }
.bank .pchip { width:24px; height:24px; margin-top:1px; }
.bank .pchip img { width:16px; height:16px; }
.bank .bn { display:block; font:600 13px/18px var(--font-sans); color:var(--fg-1); }
.bank .bw { display:block; margin-top:1px; font:400 12px/16px var(--font-sans); color:var(--fg-3); }
.bank .bs { display:block; margin-top:4px; font:600 12px/16px var(--font-sans); color:var(--success-fg); }
.bank .bs.none { color:var(--fg-3); font-weight:400; }
.oppnote { display:flex; align-items:flex-start; gap:10px; margin-top:22px; padding-top:18px;
border-top:1px solid var(--stroke-2); font:400 13px/19px var(--font-sans); color:var(--fg-3); max-width:80ch; }
.oppnote svg { width:16px; height:16px; flex:none; margin-top:1px; color:var(--fg-4); }
.oppnote a { color:var(--accent); text-decoration:none; }
.oppnote a:hover { text-decoration:underline; }
.doorsub a { color:var(--accent); text-decoration:none; }
.doorsub a:hover { text-decoration:underline; }
/* ---- Version rows: a change that moved the contract reads in warning colours ---- */
.clrow.contract { background:var(--warning-bg); }
.clrow.contract .clv { color:var(--warning-fg); }
.clrow.contract .cln { color:var(--warning-fg); }
.clrow.contract .cld { color:var(--warning-fg); }
.clv.contract { color:var(--warning-fg); background:var(--warning-bg); border:1px solid var(--warning-stroke);
padding:1px 6px; border-radius:var(--radius-pill); }
.clmaj.contract > summary { background:var(--warning-bg); }
.clmaj.contract > summary .cln, .clmaj.contract > summary .cld { color:var(--warning-fg); }
.cloi.contract { background:var(--warning-bg); }
.cloi.contract .clv, .cloi.contract .cln, .cloi.contract .cld { color:var(--warning-fg); }
.clcon { display:inline-block; margin-left:6px; font:600 10px/14px var(--font-sans); color:var(--warning-fg);
text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
/* ==================== 2026-09-01 design pass, part 2 ====================
The rest of the hub brought to the finished design: the pack-shaped
library, the values panel / route picker / prerequisites checklist on
asset and build pages, the specimen's header, the projects vocabulary,
and the estate map. Tokens only — no new hue; kind colour is a 4px left
edge, never a fill; semantic colour only as status.
==================================================================== */
/* ---- The library's packs ---- */
.packs { display:flex; flex-direction:column; gap:14px; }
.pack { background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-l);
box-shadow:var(--shadow-1); overflow:hidden; }
.packhead { display:flex; align-items:center; gap:12px; width:100%; padding:13px 16px; border:none;
background:none; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.packhead:hover { background:var(--bg-2); }
.pack.open .packhead { border-bottom:1px solid var(--stroke-2); }
.pchip.kind { background:var(--accent-soft); color:var(--accent); }
.packhead .pmain { flex:1; min-width:0; }
.packhead .prow1 { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.packhead .pname { font:600 15px/20px var(--font-sans); letter-spacing:-.01em; color:var(--fg-1); }
.packhead .pcad { font:400 12px/16px var(--font-sans); color:var(--fg-3); }
.packhead .pcad.dash { border-bottom:1px dotted var(--stroke-1); cursor:help; }
.packhead .pblurb { display:block; margin-top:2px; font:400 12px/16px var(--font-sans); color:var(--fg-3);
max-width:78ch; text-wrap:pretty; }
.ppills { display:flex; align-items:center; gap:5px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.ppill { display:inline-flex; align-items:center; height:21px; padding:0 8px; border-radius:var(--radius-circle);
background:var(--bg-2); border:1px solid var(--stroke-2); font:400 12px/16px var(--font-sans);
color:var(--fg-2); white-space:nowrap; }
.pchev { display:inline-flex; color:var(--fg-3); flex-shrink:0; }
.pchev svg { width:16px; height:16px; }
.pband { padding:13px 16px 12px; border-bottom:1px solid var(--stroke-2); }
.pband:last-child { border-bottom:none; }
.pband.start { background:var(--bg-canvas); }
.pbandh { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; font:600 10px/14px var(--font-sans);
letter-spacing:.05em; text-transform:uppercase; color:var(--fg-3); flex-wrap:wrap; }
.pbandh .why { font-weight:400; text-transform:none; letter-spacing:0; font-size:11px; }
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:8px; }
.pgrid.tight { grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:6px; }
.pitem { display:flex; align-items:center; gap:9px; background:var(--bg-1); border:1px solid var(--stroke-2);
border-left:4px solid var(--stroke-1); border-radius:var(--radius-m); padding:8px 11px; cursor:pointer;
min-width:0; text-align:left; }
.pitem:hover, .pitem:focus-visible { background:var(--bg-2); border-color:var(--accent-soft-stroke); }
.pitem.starter { box-shadow:var(--shadow-1); }
.pitem.dim { opacity:.72; border-style:dashed; border-left-style:solid; }
.pitem.dim:hover, .pitem.dim:focus-within { opacity:1; }
.pitem .pchip { width:26px; height:26px; }
.pitem .pchip img { width:15px; height:15px; }
.pitem .pchip svg { width:14px; height:14px; }
.pitem .ptx { flex:1; min-width:0; }
.pitem .pname { display:block; font:600 13px/17px var(--font-sans); color:var(--fg-1); white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; }
.pitem .pname.mono { font-family:var(--font-mono); font-size:12px; }
.pitem .psub { display:block; font:400 11.5px/15px var(--font-sans); color:var(--fg-3); white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; }
.pitem .stw { font:400 11px/15px var(--font-sans); flex:none; }
.pitem .stw.s-live { color:var(--success-fg); }
.pitem .stw.s-wait { color:var(--warning-fg); }
.pitem .stw.s-neutral { color:var(--fg-3); }
.pshared { flex:none; display:inline-flex; align-items:center; height:18px; padding:0 6px; border-radius:var(--radius-circle);
background:var(--accent-soft); border:1px solid var(--accent-soft-stroke); font:600 10px/1 var(--font-sans);
color:var(--accent-strong); white-space:nowrap; }
.pflag { flex:none; display:inline-flex; color:var(--warning-fg); }
.pflag svg { width:15px; height:15px; }
.pnote { display:flex; gap:9px; align-items:flex-start; padding:11px 16px 12px; font:400 12px/17px var(--font-sans);
color:var(--fg-3); max-width:84ch; text-wrap:pretty; }
.pnote svg { width:14px; height:14px; flex:none; color:var(--fg-4); margin-top:1px; }
/* The one-line note a card can carry beneath its bands — today the utility
queries' pointer to where the rest of the queries live. Same shape as the
register's note: an info glyph, then one sentence, never a region. */
.pnote { display:flex; align-items:flex-start; gap:8px; padding:10px 16px 4px; font:400 12px/16px var(--font-sans); color:var(--fg-3); }
.pnote svg { width:14px; height:14px; flex:none; margin-top:1px; color:var(--fg-4); }
.pfoot { padding:6px 16px 13px; font:400 12px/16px var(--font-sans); }
.pfoot a { color:var(--accent); text-decoration:none; font-weight:600; }
.pfoot a:hover { text-decoration:underline; }
.fitgroups.dense .packs { gap:8px; }
.fitgroups.dense .packhead { padding:8px 14px; }
.fitgroups.dense .packhead .pname { font-size:14px; }
.fitgroups.dense .packhead .pblurb { display:none; }
.fitgroups.dense .pband { padding:8px 14px; }
.fitgroups.dense .pgrid, .fitgroups.dense .pgrid.tight { gap:4px; }
.fitgroups.dense .pitem { padding:4px 9px; }
.fitgroups.dense .pitem .psub { display:none; }
.fchip.tog { border:1px solid var(--stroke-1); border-radius:var(--radius-m); }
.fchip.tog svg { width:13px; height:13px; }
.fseg.dens .fchip { font-size:11.5px; }
.libfoot { display:flex; align-items:flex-start; gap:9px; margin-top:22px; padding-top:18px;
border-top:1px solid var(--stroke-2); max-width:80ch; text-wrap:pretty; }
.libfoot svg { width:15px; height:15px; flex:none; color:var(--fg-4); margin-top:1px; }
.libfoot > span { font:400 13px/19px var(--font-sans); color:var(--fg-3); }
.empty b { color:var(--fg-1); }
/* ---- Asset page header: monospace names for scripts and queries; the product caption ---- */
.doortitle h2.mono { font-family:var(--font-mono); font-size:18px; letter-spacing:0; }
.doorsub .doorprod { color:var(--fg-3); }
/* ---- Values panel: one collapsed line, three inputs when open ---- */
.vpanel { margin:0 0 12px; }
.vsum { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; background:var(--bg-1);
border:1px solid var(--stroke-2); border-radius:var(--radius-m); cursor:pointer; text-align:left;
font:400 13px/18px var(--font-sans); color:var(--fg-2); }
.vsum:hover { background:var(--bg-2); }
.vsum .vt { flex:1; min-width:0; }
.vsum svg { width:16px; height:16px; color:var(--fg-3); transition:transform .15s; flex:none; }
.vpanel.open .vsum { border-radius:var(--radius-m) var(--radius-m) 0 0; border-bottom-color:transparent; }
.vpanel.open .vsum svg { transform:rotate(180deg); }
.vform { background:var(--bg-1); border:1px solid var(--stroke-2); border-left:3px solid var(--accent);
border-radius:0 0 var(--radius-m) var(--radius-m); padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.vfh { display:flex; align-items:baseline; gap:10px; }
.vfh b { font:600 14px/18px var(--font-sans); color:var(--fg-1); }
.vfh .note { font:400 12px/16px var(--font-sans); color:var(--fg-3); }
.vfh .grow { flex:1; }
.vdone { border:none; background:none; cursor:pointer; font:600 12px/16px var(--font-sans); color:var(--accent); padding:0; }
.vdone:hover { text-decoration:underline; }
.vfield { display:flex; flex-direction:column; gap:4px; max-width:560px; }
.vfield span { font:600 11px/14px var(--font-sans); color:var(--fg-3); text-transform:uppercase; letter-spacing:.05em; }
.vfield input { height:32px; border:1px solid var(--stroke-1); border-radius:var(--radius-m); background:var(--bg-1);
color:var(--fg-1); font:400 13px var(--font-sans); padding:0 10px; }
.vfield input:focus-visible { border-color:var(--accent); box-shadow:var(--ring); outline:none; }
.vhint { font:400 11.5px/16px var(--font-sans); color:var(--fg-3); }
.vhint code { font-size:11px; }
/* ---- Route picker: one route open, the other one line away ---- */
.routes { display:flex; flex-direction:column; gap:8px; margin:0 0 12px; }
.rcard.shut { display:flex; align-items:center; gap:10px; background:var(--bg-2); border:1px solid var(--stroke-2);
border-radius:var(--radius-m); padding:9px 13px; font:400 12.5px/17px var(--font-sans); color:var(--fg-2); }
.rcard.shut .grow { flex:1; }
.rswitch { border:none; background:none; cursor:pointer; font:600 12px/16px var(--font-sans); color:var(--accent); padding:0; }
.rswitch:hover { text-decoration:underline; }
.rcard.on { background:var(--bg-1); border:1.5px solid var(--accent); border-radius:var(--radius-l); padding:12px 14px; }
.rcard .rh { display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.rcard .rh svg { width:16px; height:16px; color:var(--accent); flex:none; }
.rcard .rh b { font:600 13.5px/18px var(--font-sans); color:var(--fg-1); flex:1; }
.rcard .rsel { font:600 11px/16px var(--font-sans); color:var(--success-fg); }
.rcard .raud { margin:0 0 10px 25px; font:400 12.5px/17px var(--font-sans); color:var(--fg-2); max-width:74ch; }
.rcard .buildcard, .rcard .rsteps, .rcard .bw-callout, .rcard > .sec, .rnote { margin-left:25px; }
.rcard .buildcard { margin-bottom:0; }
.rsteps { margin:0 0 10px 25px; padding-left:18px; }
.rsteps li { margin:4px 0; font:400 13px/19px var(--font-sans); color:var(--fg-2); }
.rsteps li b { color:var(--fg-1); }
.rsteps .kact { vertical-align:middle; margin:0 4px; }
.rcard .bw-callout { margin-bottom:10px; }
.rnote { margin:0; font:400 12.5px/17px var(--font-sans); color:var(--fg-3); }
/* ---- Prerequisites checklist: the parts inventory, before step 1 ---- */
.prereqs { background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-m); overflow:hidden; margin:0 0 12px; }
.pqhead { display:flex; align-items:baseline; gap:8px; padding:10px 13px; background:var(--bg-2); border-bottom:1px solid var(--stroke-2); }
.pqhead b { font:600 12.5px/17px var(--font-sans); color:var(--fg-1); }
.pqhead .note { font:400 12px/16px var(--font-sans); color:var(--fg-3); }
.pqg { padding:10px 13px; border-bottom:1px solid var(--stroke-2); }
.pqg:last-child { border-bottom:none; }
.pqh { display:flex; align-items:center; gap:6px; margin-bottom:6px; font:700 10px/15px var(--font-sans);
text-transform:uppercase; letter-spacing:.05em; color:var(--fg-3); }
.pqh svg { width:14px; height:14px; }
.pqi { display:flex; gap:9px; align-items:flex-start; padding:4px 0; cursor:pointer; font:400 13px/18px var(--font-sans); color:var(--fg-1); }
.pqi input { margin-top:2px; width:15px; height:15px; accent-color:var(--accent); flex:none; cursor:pointer; }
.pqi input:checked + span { color:var(--fg-3); }
/* ---- The resume line at the top of a build page (P8) ---- */
.resume { display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:9px 13px; background:var(--accent-soft);
border:1px solid var(--accent-soft-stroke); border-radius:var(--radius-m); font:400 13px/18px var(--font-sans); color:var(--fg-2); }
.resume svg { width:16px; height:16px; color:var(--accent); flex:none; }
.resume span { flex:1; min-width:0; }
.resume b { color:var(--fg-1); }
.rgo { border:none; background:none; cursor:pointer; font:600 12px/16px var(--font-sans); color:var(--accent); white-space:nowrap; padding:0; }
.rgo:hover { text-decoration:underline; }
/* ---- Projects: the kit's vocabulary on the board and the workspace ---- */
.pchip.kind.sm { width:24px; height:24px; }
.pchip.kind.sm svg { width:14px; height:14px; }
.pcard .pst.s-built { color:var(--success-fg); }
.pcard .pst.s-in-progress { color:var(--fg-2); }
.pcard .pst.s-landed { color:var(--fg-3); }
.projwork .door { margin-top:0; }
.projwork .pack { box-shadow:none; }
.steprow { display:flex; align-items:flex-start; gap:12px; padding:10px 4px; }
.steprow .sn { width:24px; height:24px; flex:none; display:inline-flex; align-items:center; justify-content:center;
border-radius:var(--radius-circle); background:var(--bg-2); border:1px solid var(--stroke-1);
font:600 11px var(--font-sans); color:var(--fg-2); margin-top:1px; }
.steprow.done .sn { background:var(--success-bg); border-color:var(--success-stroke); color:var(--success-fg); }
.steprow.done .sn svg { width:14px; height:14px; }
.steprow .st { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.steprow .st b { font:600 14px/19px var(--font-sans); color:var(--fg-1); }
.steprow .sd { font:400 12.5px/17px var(--font-sans); color:var(--fg-2); max-width:74ch; }
.steprow .btn { flex:none; margin-top:1px; }
/* ---- The estate: the close-web map, read left to right ---- */
.ecov { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.ecov .fchip { border:1px solid var(--stroke-1); border-radius:var(--radius-circle); background:transparent; }
.ecov .fchip[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent-soft-stroke); color:var(--fg-1); }
.ecov .sd { width:7px; height:7px; border-radius:50%; flex:none; }
.estate { position:relative; background:var(--bg-1); border:1px solid var(--stroke-2); border-radius:var(--radius-l);
padding:18px; overflow-x:auto; background-image:radial-gradient(var(--stroke-3) 1px, transparent 1px);
background-size:16px 16px; }
.eedges { position:absolute; left:0; top:0; pointer-events:none; overflow:visible; z-index:0; }
.ecols { position:relative; z-index:1; display:grid; gap:36px 40px; align-items:start; }
.ecol { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ehead { display:flex; flex-direction:column; gap:2px; margin-bottom:4px; font:700 10px/14px var(--font-sans);
letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); }
.ehead .ewhy { font:400 11px/14px var(--font-sans); text-transform:none; letter-spacing:0; color:var(--fg-3); }
.enode { display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; background:var(--bg-1);
border:1px solid var(--stroke-2); border-left:4px solid var(--stroke-1); border-radius:var(--radius-l);
box-shadow:var(--shadow-1); cursor:pointer; text-align:left; font:inherit; color:inherit; min-width:0;
transition:opacity .2s, box-shadow .15s; }
.enode:hover { background:var(--bg-2); }
.enode .pchip { width:24px; height:24px; flex:none; }
.enode .pchip img { width:14px; height:14px; }
.enode .pchip svg { width:13px; height:13px; }
.enode .etx { flex:1; min-width:0; }
.enode .et { display:block; font:600 12px/16px var(--font-sans); color:var(--fg-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.enode .et.mono { font-family:var(--font-mono); font-size:11.5px; }
.enode .es { display:block; font:400 11px/14px var(--font-sans); color:var(--fg-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.enode.dim, .ee.dim { opacity:.16; }
.enode.mute { opacity:.25; }
.ee.mute { opacity:.08; }
.enode.hl { box-shadow:0 0 0 2px var(--accent); }
.enode.nocov { border-left-color:var(--stroke-1); }
.ee { fill:none; stroke-width:1.4; opacity:.9; transition:opacity .2s; }
.ee.calls { stroke:var(--accent); }
.ee.works, .ee.cites { stroke:var(--stroke-strong); stroke-dasharray:4 3; }
.ee.hl { stroke-width:2.2; opacity:1; }
.eislands { position:relative; z-index:1; margin-top:26px; border:1px dashed var(--stroke-1); border-radius:var(--radius-l);
padding:11px 13px; background:color-mix(in srgb, var(--bg-canvas) 65%, transparent); }
.eislands + .eislands { margin-top:12px; }
.eislands .eih { display:flex; align-items:baseline; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.eislands .eih b { font:600 12px/16px var(--font-sans); color:var(--fg-2); }
.eislands .eih span { font:400 12px/16px var(--font-sans); color:var(--fg-3); }
.eirow { display:flex; gap:8px; flex-wrap:wrap; }
.eisland { display:inline-flex; align-items:center; gap:7px; background:var(--bg-1); border:1px solid var(--stroke-2);
border-radius:6px; padding:6px 9px; cursor:pointer; font:400 11px/15px var(--font-mono); color:var(--fg-2);
transition:opacity .2s; }
.eisland:hover { background:var(--bg-2); }
.eisland svg { width:13px; height:13px; color:var(--fg-3); }
.eisland.unv { border-style:dashed; }
.eisland.mute { opacity:.25; }
.elegend { display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font:400 12px/16px var(--font-sans); color:var(--fg-3); align-items:center; }
.elegend span { display:inline-flex; align-items:center; gap:6px; }
.elegend .sw { display:inline-block; width:3px; height:13px; border-radius:2px; }
.elegend svg { width:22px; height:8px; }
/* ---- Reference (2026-09-07): the collapsed foot section that holds what is
the same on every page of its kind — Microsoft's guides and the house
standard. Same box as Why it's this way; only the tag colour differs. ---- */
.alt-tag.t-ref { border-left-color:var(--stroke-1); }
.altref .whybody .sec { margin-top:12px; }
/* ---- Sockets (2026-09-07): a flow's declared extension point — one row per
key it dispatches on, with the slot's state and what sits (or could sit)
there. Rendered only when the manifest entry carries `plugs`. ---- */
.sockets .socketgrid { display:grid; grid-template-columns:minmax(120px,0.8fr) 110px 2.4fr; border:1px solid var(--stroke-2);
border-radius:var(--radius-m); overflow:hidden; background:var(--bg-1); }
.sockets .socket { display:contents; }
.sockets .socket > div { padding:9px 12px; border-bottom:1px solid var(--stroke-2); font:400 13px/19px var(--font-sans); color:var(--fg-2); min-width:0; }
.sockets .socket:last-child > div { border-bottom:none; }
.sockets .sk-key { font-weight:600; color:var(--fg-1); }
.sockets .sk-state .pill { display:inline-block; font:600 11px/16px var(--font-sans); letter-spacing:.04em; text-transform:uppercase;
padding:1px 8px; border-radius:var(--radius-pill); border:1px solid var(--stroke-1); color:var(--fg-3); background:var(--bg-2); }
.sockets .ps-built .pill { color:var(--success-fg); border-color:var(--success-fg); background:transparent; }
.sockets .ps-open .pill { color:var(--accent); border-color:var(--accent); background:transparent; }
.sockets .ps-none .sk-key, .sockets .ps-none .sk-note { color:var(--fg-3); }
.sockets details.sec { margin-top:12px; }