/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/*
* ── Design tokens ─────────────────────────────────────────────
*
* Canonical tokens (colors, font, type scale, spacing, radii) come from the CDN:
* https://cdn.neorgon.org/v1.0.0/styles/base.css (linked in index.html)
* Do NOT redeclare them here: a local copy is how the fleet drifted. The block
* below holds only what base.css does not define, plus the per-site accent.
*
* Motion: base.css still ships --ease-snap (bounce) for legacy sites, but it is
* deprecated for new work (impeccable law: ease-out exponential, no bounce).
* Use --ease-out below.
*/
:root {
/* Per-site identity: this site's hub card accent (PROJECTS.md section 4).
Teal: a study tone, and the one identity knob this site owns. */
--accent: #14b8a6;
--accent-bright: #2dd4bf;
/* Site extras base.css does not define */
--surface-toast: #1a1730;
--danger: #e11d48;
--danger-hover: #f43f5e;
/* Hit and miss, declared once. Four hex literals used to sit in the review
block below, which meant the "you recalled it" green had no relationship
to the site's own teal and the Hard amber had no relationship to anything.
Both are derived: --ok IS the accent, and --warn is the accent and danger
mixed, which in oklch lands on amber. Caution, not failure. */
--ok: var(--accent-bright);
--warn: color-mix(in oklch, var(--danger) 60%, var(--accent-bright));
/* A popover needs an opaque ground: --surface-1 is translucent white and the
row underneath would read straight through the menu sitting on it. */
--surface-menu: color-mix(in srgb, var(--text-primary) 7%, var(--bg));
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--control-height: 44px;
--control-height-sm: 36px;
--shadow-card: 0 12px 28px rgba(15, 23, 42, 0.5);
--shadow-modal: 0 24px 48px rgba(2, 6, 23, 0.58);
--z-sticky-header: 200;
--z-modal: 400;
--z-toast: 500;
}
/* Author display values (e.g. .section/.stack flex) would otherwise defeat the
hidden attribute, so restore its authority once, globally. */
[hidden] { display: none !important; }
html { height: 100%; }
body {
font-family: var(--font);
background: var(--bg);
min-height: 100%;
color: var(--text-primary);
display: flex; flex-direction: column;
}
body.modal-open {
overflow: hidden;
}
main#main {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
}
/* ── Layout ────────────────────────────────────────────────── */
/*
* GOTCHA: body { display:flex; flex-direction:column } + margin: 0 auto
* on a child collapses its width, so always pair with width: 100%.
*
* GOTCHA: External images (YouTube ggpht, Gravatar, etc.) may block loading
* when the Referer header points to localhost or an unknown origin. Fix:
* 1. Add in (global)
* 2. Or add referrerpolicy="no-referrer" on each tag
*/
.container {
max-width: 900px;
width: 100%;
margin: 0 auto;
padding: var(--space-6);
flex: 1;
}
/* ── Side-rail shell (opt-in) ──────────────────────────────────
* A desktop window is far wider than a comfortable line of text, so a single
* centred column leaves two large empty gutters and still runs the prose to
* 100+ characters. This puts the section nav in the left gutter and narrows
* the reading column, without changing .container for sites that do not use it.
*
*
*
*
…
*
*
* Below 940px it collapses to one column and the rail becomes a scrollable
* row, so the same markup works on a phone with no JavaScript involved. From
* 1240px up, the spare width goes to the right margin only, so the reading
* column walks onto the page's centre line instead of sitting right of it.
*/
.shell {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: var(--space-6) var(--space-6) 64px;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
align-content: start;
flex: 1;
}
/* A 1fr track is minmax(auto, 1fr): a wide child (a board, a table, a long
code line) sets min-content and stretches the column past the viewport. */
.shell > * { min-width: 0; }
.shell__rail {
display: flex;
gap: var(--space-1);
padding: 4px;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow-x: auto;
scrollbar-width: none;
}
.shell__rail::-webkit-scrollbar { display: none; }
@media (min-width: 940px) {
.shell {
grid-template-columns: 208px minmax(0, 1fr);
gap: var(--space-8);
padding: var(--space-8) var(--space-8) 80px;
}
.shell__rail {
position: sticky;
top: 76px; /* clears the app-mode header */
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: var(--space-2);
overflow: visible;
align-self: start;
}
}
/* The rail sits in the left gutter, but with only two tracks it does not stay
there: the rail plus its gap add to main's left side and nothing balances
them on the right, so main sits half that distance right of the page's centre
line (120px at a 208px rail). A column that far off centre reads as a
misalignment rather than as a nav beside it.
The correction is to stop splitting the spare width between both margins and
spend all of it on the right. Main then walks back onto the centre line as the
window grows, reaching it at 1240 + 208 + 32 = 1480px, and it costs main no
width at any point on the way: the shell widens, main does not move relative
to the rail. Below 1240px the shell already fills the viewport, so there is no
spare width to spend and any correction would come straight out of the
reading column. That trade is not worth making. */
@media (min-width: 1240px) {
.shell {
--shell-nudge: calc(208px + var(--space-8));
max-width: calc(1240px + var(--shell-nudge));
padding-right: clamp(
var(--space-8),
calc(var(--space-8) + 100vw - 1240px),
calc(var(--space-8) + var(--shell-nudge))
);
}
}
/* Vertical rhythm: use inside .container or nested regions */
.stack {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.stack--tight { gap: var(--space-4); }
/* Major sections need a real break. At 32px a heading sits almost on top of
the block above it and the page reads as one undifferentiated column. */
.stack--loose { gap: 56px; }
/* Page section: title row + body (replaces “card everything” for grouping) */
.section {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.section__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
}
.section__titles {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.section__title {
/* One step of at least 1.25 over the deck-name --text-lg below it. At
--text-xl the two were 1.11 apart and the page had no top of hierarchy. */
font-size: var(--text-2xl);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.25;
color: var(--text-primary);
/* render.js focuses this heading after a view change, so it takes a visible
ring. Shrunk to its text: a block-level h2 would draw the ring around the
whole column and read as a text field rather than as a heading. */
width: fit-content;
max-width: 100%;
}
/* Both skip links land on one of these. A target scrolled flush to the top of
the viewport sits under the sticky 56px app header, so it clears the bar's
own height (the kit's token, not a literal) and keeps 16px of air. */
.section__title,
#rpCard { scroll-margin-top: calc(var(--header-h-app, 56px) + var(--space-4)); }
.section__title:focus-visible { outline-offset: 6px; border-radius: 2px; }
.section__lead {
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.6;
max-width: 64ch; /* 65-75 characters is the readable measure */
}
.section__lead code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 0.92em;
color: var(--text-secondary);
}
.stack > .card { margin-bottom: 0; }
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
/* ── Header ────────────────────────────────────────────────────
* Owned by the Neorgon Header Kit (css/neorgon-header.css, canonical
* source: packages/neorgon-ui/header/). Do NOT style .header-bar,
* .header-logo*, .header-title-link, .header-subtitle, .header-right,
* .header-actions, or .header-home here. Auth styles (.auth-*) stay
* site-owned below.
*
* The one sanctioned exception is a custom skin: TOKENS ONLY, and the selector
* is copied exactly from packages/neorgon-ui/header/README.md, section
* `custom`. The kit's magenta over a teal site put two identities on one page,
* and this site's palette is not one any other site would reuse, so there is no
* named skin to reach for. html:not([data-theme]) is what makes the whole block
* stop matching the moment a visitor picks a theme: the person outranks the
* site, and the site outranks nothing.
*/
/* The mix is in oklab, not oklch: oklch interpolates the hue angle, and the
ground sits at 265 while the accent sits at 180, so the header landed on
oklch(0.43 0.079 224) and read as a different blue from the teal buttons
under it. oklab keeps the accent's own hue and only darkens it. */
html:not([data-theme]) .header-bar[data-header-skin="custom"] {
--header-bg-start: color-mix(in oklab, var(--accent) 52%, var(--bg));
--header-bg-mid: color-mix(in oklab, var(--accent) 24%, var(--bg));
--header-bg-end: var(--bg);
--header-accent: var(--accent-bright);
--header-menu-bg: var(--surface-menu);
}
nav {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* ── Buttons (canonical) ─────────────────────────────────────
* Use .btn + a variant. Aliases: .nav-link = toolbar ghost; .auth-* map below.
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--control-height);
padding: 0 var(--space-4);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: var(--text-primary);
transition:
background-color var(--dur),
color var(--dur),
border-color var(--dur),
box-shadow var(--dur),
transform var(--dur-fast);
-webkit-tap-highlight-color: transparent;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.btn--sm {
min-height: var(--control-height-sm);
padding: 0 var(--space-3);
font-size: var(--text-xs);
}
.btn--block { width: 100%; }
.btn--icon {
min-width: var(--control-height);
padding: 0;
}
.btn--primary {
background: var(--accent);
/* White on this teal is 2.49:1. The page ground as ink reads at over 8:1. */
color: var(--bg, #040714);
border-color: transparent;
}
.btn--primary:hover { background: var(--accent-bright); }
.btn--secondary {
background: var(--surface-2);
color: var(--text-primary);
border-color: var(--border-strong);
}
.btn--secondary:hover {
background: color-mix(in oklab, var(--text-primary) 10%, var(--surface-2));
}
.btn--ghost {
background: transparent;
color: var(--text-primary);
border-color: var(--border-strong);
}
.btn--ghost:hover {
background: var(--surface-2);
color: var(--text-primary);
}
.btn--danger {
background: var(--danger);
color: var(--text-primary);
border-color: transparent;
}
.btn--danger:hover { background: var(--danger-hover); }
/* Toolbar ghost (header nav). Inside .shell__rail the border comes off: a
bordered button inside a bordered box is a box in a box, and the rail drew
four of them. The rail keeps its own frame and the items are plain until
they are hovered or current. */
.nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--control-height);
padding: 0 var(--space-3);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-primary);
cursor: pointer;
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.nav-link:hover {
background: var(--surface-2);
color: var(--text-primary);
}
.shell__rail .nav-link {
justify-content: flex-start;
border-color: transparent;
color: var(--text-secondary);
}
.shell__rail .nav-link:hover { color: var(--text-primary); }
.auth-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: var(--control-height);
min-height: var(--control-height);
padding: 0;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-primary);
cursor: pointer;
font-family: inherit;
transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.auth-toggle:hover {
background: var(--surface-2);
color: var(--text-primary);
}
.auth-toggle svg {
width: 22px;
height: 22px;
flex-shrink: 0;
display: block;
}
.auth-toggle.logged-in { color: var(--accent); }
.auth-toggle.logged-in svg circle:nth-of-type(2) {
fill: currentColor;
stroke: none;
}
/* ── Sheet (inline panel under header), not a modal ──────────
* Use for auth, filters, compact forms. No backdrop; page scrolls.
* For blocking overlays use .modal below.
*/
.auth-panel {
background: var(--surface-1);
border-bottom: 1px solid var(--border-subtle);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.auth-panel.open { max-height: 300px; }
.auth-panel-inner {
padding: var(--space-6);
max-width: 400px;
margin: 0 auto;
}
.auth-tabs {
display: flex;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.auth-tab {
flex: 1;
min-height: var(--control-height-sm);
padding: 0 var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.auth-tab.active {
background: var(--surface-2);
color: var(--text-primary);
border-color: var(--border-strong);
}
.auth-form input {
width: 100%;
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-1);
color: var(--text-primary);
font-size: var(--text-sm);
font-family: inherit;
}
.auth-submit {
width: 100%;
min-height: var(--control-height);
padding: 0 var(--space-4);
border: none;
border-radius: var(--radius-sm);
background: var(--accent);
/* Same reason as .btn--primary: white on this teal is 2.49:1. */
color: var(--bg);
font-family: inherit;
font-weight: 600;
font-size: var(--text-sm);
cursor: pointer;
transition: background-color var(--dur);
}
.auth-submit:hover { background: var(--accent-bright); }
#authUser {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.auth-username {
color: var(--text-primary);
font-weight: 600;
}
.auth-logout {
min-height: var(--control-height-sm);
padding: 0 var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.auth-logout:hover {
background: var(--surface-2);
color: var(--text-primary);
}
.auth-divider {
height: 1px;
background: var(--border-subtle);
}
/* ── Modal (blocking overlay) ──────────────────────────────── */
.modal[hidden] {
display: none !important;
}
.modal {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.modal__backdrop {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--bg) 88%, transparent);
-webkit-backdrop-filter: blur(10px); /* Safari still needs the prefix */
backdrop-filter: blur(10px);
}
.modal__dialog {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(100%, 520px);
max-height: min(90vh, 680px);
overflow: hidden;
background: var(--surface-1);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-modal);
}
/* For modals holding option grids or editors: narrow dialogs cramp them */
.modal__dialog--wide {
width: min(100%, 760px);
}
.modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid var(--border-subtle);
}
.modal__header h2 {
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
}
.modal__body {
padding: var(--space-6);
overflow: auto;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.55;
}
.modal__body code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 0.9em;
color: var(--text-primary);
}
.modal__footer {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--border-subtle);
}
/* ── Card ──────────────────────────────────────────────────── */
/*
* GOTCHA: backdrop-filter creates a stacking context, so dropdowns inside
* a card can be clipped by a later card's stacking context. Fix by adding
* position: relative; z-index: 10 to the card that owns the open dropdown.
*
* Default: static surface (no hover lift, avoids generic “dashboard demo”).
* Use .card--interactive for raised hover + entrance motion.
*
* GOTCHA: a