/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/*
* ── Design tokens ─────────────────────────────────────────────
*
* Warm charcoal ("Anthropic dark room")
* bg: #151210 well (recessed): #110d0a panel (raised): #1b1511
* clay accent: #cc785c bright: #e6a583
* support hues: gold #d9a441 · sage #9cba7f · teal #2dd4bf
* rose #e05a6b · violet #a78bfa
* text primary: #f4ede4 (warm ivory)
* text secondary: #d8cec0
* text muted: rgba(ink,.60)
* header: ember skin (kit), gradient end re-pointed at --bg
*
* Typography scale (rem)
* --text-2xs: 0.6875 --text-xs: 0.75 --text-sm: 0.875 --text-base: 1
* --text-lg: 1.125 --text-xl: 1.25 --text-2xl: 1.5
* --text-code: 0.85 (code samples) --text-mono-sm: 0.8 (dense logs)
* --measure: 66ch (prose) --measure-tight: 54ch (captions, columns)
* font stack: 'Avenir Next', -apple-system, BlinkMacSystemFont,
* 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif
*
* Spacing scale (4px grid)
* --space-1: 4px --space-2: 8px --space-3: 12px --space-4: 16px
* --space-5: 20px --space-6: 24px --space-8: 32px --space-10: 40px
*
* Radii
* --radius-sm: 6px --radius: 10px --radius-lg: 15px
*
* Easing
* --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1) (spring/overshoot)
* --dur-fast: 120ms --dur: 200ms
*
* UI primitives
* --control-height: 44px (touch minimum)
* --control-height-sm: 36px
* --z-sticky-header: 200 --z-modal: 400 --z-toast: 500
*/
:root {
/* Warm charcoal ("Anthropic dark room"): ivory ink on espresso, clay as
the signal hue. Deviates from the fleet --bg on purpose — the subject
is Claude, so the site wears Claude's temperature. --ink is the ivory
rgb triplet for rgba() tints, so every wash and border stays warm.
Elevation: --well sits BELOW the page (code, logs, canvas); --panel
sits ABOVE it (graph nodes, inspector, flipped cards). */
--ink: 244, 237, 228;
--bg: #151210;
--well: #110d0a;
/* Raised surfaces earn a real luminance step: at #1b1511 the overview
cards sat ~1.1:1 over the page and dissolved into it. #241b15 keeps
the espresso temperature but reads as a surface, not a stain; the
border tiers (.12/.17/.26) moved up with it for the same reason. */
--panel: #241b15;
--surface-1: rgba(var(--ink),.055);
--surface-2: rgba(var(--ink),.10);
--surface-toast: #2b211a;
--border-subtle: rgba(var(--ink),.12);
--border: rgba(var(--ink),.17);
--border-strong: rgba(var(--ink),.26);
--text-primary: #f4ede4;
--text-secondary: #d8cec0;
/* .60 ≈ 6.4:1 on --bg. Muted text is almost always 11-14px here, so it
needs headroom over the 4.5:1 floor — but past ~.62 it starts
competing with --text-secondary and the three-tier system flattens. */
--text-muted: rgba(var(--ink),.60);
/* Glass Box brand: Anthropic clay */
--accent: #cc785c;
--accent-bright: #e6a583;
--clay: #cc785c;
--clay-soft: rgba(204,120,92,.14);
--violet: #a78bfa;
--teal: #2dd4bf;
--amber: #d9a441;
--rose: #e05a6b;
--green: #9cba7f;
/* Semantic tints. These name the rgba() pairs the labs were already using
ad hoc, so a verdict colour is declared once and reused: --*-soft is the
fill, --*-line the border, --*-glow a focus/emphasis ring. */
--clay-line: rgba(204,120,92,.45);
--teal-soft: rgba(45,212,191,.10); --teal-line: rgba(45,212,191,.40);
--green-soft: rgba(156,186,127,.12); --green-line: rgba(156,186,127,.42);
--rose-soft: rgba(224,90,107,.10); --rose-line: rgba(224,90,107,.42);
--amber-soft: rgba(217,164,65,.12); --amber-line: rgba(217,164,65,.42);
--violet-soft: rgba(167,139,250,.12); --violet-line: rgba(167,139,250,.40);
/* Text-on-tint variants. --rose and --violet clear AA against the page bg
but land at 4.2-4.5:1 once the same hue tints the surface underneath
(verdict pills, "your pick" rows, scenario tags). These two are the
lightened steps that keep small bold labels >= 4.5:1 on their own soft
fill. Only use them for text sitting ON --rose-soft / --violet-soft;
borders and fills keep the base hue. */
--rose-text: #f2a7b1;
--violet-text: #c4b5fd;
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
--danger: #e11d48;
--danger-hover: #f43f5e;
--font: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
/* --text-2xs is the floor for micro-labels (log kinds, rank chips). Study
material is read in long sittings; nothing below 11px earns its place. */
--text-2xs: 0.6875rem;
--text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
--text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
/* Two mono tiers, replacing the ad-hoc .74/.78/.8/.82/.84rem spread:
--text-code for code samples, --text-mono-sm for dense logs and
inline bad-example blocks. */
--text-code: 0.85rem;
--text-mono-sm: 0.8rem;
/* Comfortable reading measure for prose. Labs are up to 1180px wide; body
copy must never run the full width. */
--measure: 66ch;
--measure-tight: 54ch;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--radius-sm: 6px; --radius: 10px; --radius-lg: 15px;
--ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 120ms; --dur: 200ms;
--control-height: 44px;
--control-height-sm: 36px;
--shadow-card: 0 12px 28px rgba(8, 4, 2, 0.5);
--shadow-modal: 0 24px 48px rgba(4, 2, 1, 0.6);
/* Resting elevation for raised cards: a 1px ivory rim light on the top
edge plus a soft ambient drop, so panels separate from the page even
where the border alone is quiet. */
--shadow-raised: inset 0 1px 0 rgba(var(--ink),.05), 0 2px 10px rgba(8, 4, 2, .35);
--z-sticky-header: 200;
--z-modal: 400;
--z-toast: 500;
}
html {
height: 100%;
/* Two sticky bars stack at the top (header kit + .lab-rail). Anchor jumps
and the skip link must clear both. --header-h is read from the header
kit; never redefined here. */
scroll-padding-top: calc(var(--header-h, 68px) + 58px);
}
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;
}
/* Vertical rhythm: use inside .container or nested regions */
.stack {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.stack--tight { gap: var(--space-4); }
.stack--loose { gap: var(--space-8); }
/* Page section: title row + body (replaces “card everything” for grouping) */
.section {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.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.45;
max-width: 52ch;
}
.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.
*
* One sanctioned exception: skin token overrides. Ember's --header-bg-end
* assumes the fleet navy page (#040714); on this warm charcoal page that
* end-stop reads as a cold seam. Re-point it at --bg so the gradient
* dissolves into the page. The kit's skin rule is (0,3,1) and this sheet
* loads BEFORE the kit, so the selector needs (0,3,2) to win. The
* html:not([data-theme]) guard keeps visitor themes ahead of the skin.
*/
html:not([data-theme]) body .header-bar[data-header-skin="ember"] {
--header-bg-end: var(--bg);
}
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);
color: #1a0e08; /* dark umber on clay: #fff was 3.4:1, AA fail */
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(var(--ink),0.1);
}
.btn--ghost {
background: transparent;
color: rgba(var(--ink),0.92);
border-color: rgba(var(--ink),0.18);
}
.btn--ghost:hover {
background: rgba(var(--ink),0.1);
color: var(--text-primary);
}
.btn--danger {
background: var(--danger);
color: #fff; /* stays white: 4.7:1 on crimson passes AA */
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(var(--ink),0.18);
border-radius: var(--radius-sm);
background: transparent;
color: rgba(var(--ink),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(var(--ink),0.1);
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 rgba(var(--ink),0.18);
border-radius: var(--radius-sm);
background: transparent;
color: rgba(var(--ink),0.92);
cursor: pointer;
font-family: inherit;
transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.auth-toggle:hover {
background: rgba(var(--ink),0.1);
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: rgba(var(--ink),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: var(--text-primary);
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(4,2,1, 0.72);
backdrop-filter: blur(4px);
}
.modal__dialog {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(100%, 440px);
max-height: min(88vh, 560px);
overflow: hidden;
background: var(--surface-1);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-modal);
}
.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