/* ── 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 — set to this site's hub card accent (PROJECTS.md section 4).
Antique gold: a ledger tone, and unused elsewhere in the Data section. */
--accent: #ca8a04;
--accent-bright: #eab308;
/* Money reads better in a monospaced column: digits line up, so two totals
are comparable at a glance without reading them. */
--mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
/* Semantics this site needs for numbers. Money is the accent; a saving is
positive, an unknown is neither good nor bad and must not look like zero. */
--good: #34d399;
--warn: #fbbf24;
/* .5, not .45: at .45 the word "unpriced" measured 4.47:1 on --bg, just under
the 4.5:1 it needs. An unknown has to stay readable to stay honest. */
--unknown: rgba(255, 255, 255, .5);
/* Site extras base.css does not define */
--surface-toast: #1a1730;
--danger: #e11d48;
--danger-hover: #f43f5e;
--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 — 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 — 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 {
font-size: var(--text-xl);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-primary);
}
.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.
*/
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;
}
/* Gold is a light accent, so the label on it has to be dark: white on #ca8a04
measures 2.94:1 and fails AA outright. This near-black is tinted toward the
accent's own hue rather than being #000, and measures 6.31:1 (9.67:1 on the
brighter hover fill). */
.btn--primary {
background: var(--accent);
color: #1a1204;
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: rgba(255, 255, 255, 0.1);
}
.btn--ghost {
background: transparent;
color: rgba(255,255,255,0.92);
border-color: rgba(255,255,255,0.18);
}
.btn--ghost:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.btn--danger {
background: var(--danger);
color: #fff;
border-color: transparent;
}
.btn--danger:hover { background: var(--danger-hover); }
/* Toolbar ghost (header nav) — same as .btn.btn--ghost.btn--sm */
.nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--control-height);
padding: 0 var(--space-3);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-sm);
background: transparent;
color: rgba(255,255,255,0.92);
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: rgba(255,255,255,0.1);
color: #fff;
}
.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 rgba(255,255,255,0.18);
border-radius: var(--radius-sm);
background: transparent;
color: rgba(255,255,255,0.92);
cursor: pointer;
font-family: inherit;
transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.auth-toggle:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.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: rgba(255,255,255,0.02);
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);
color: #fff;
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: rgba(2, 4, 12, 0.85);
-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 — 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