/* ══════════════════════════════════════════════════════════════════════
Octant design system
Every colour, size, and duration in this file comes from a token
declared in the two :root blocks. Nothing below them declares a raw
colour. See DESIGN.md for the rules.
══════════════════════════════════════════════════════════════════════ */
/* ─── display face ────────────────────────────────────────────────────
Self-hosted, one variable file, no third-party requests. See
fonts/LICENSE.txt. */
@font-face {
font-family: "Octant Display";
src: url("../fonts/octant-display.woff2") format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
/* ─── design tokens ───────────────────────────────────────────────────
Colour is declared once per token with light-dark(), so the two themes
can never drift apart the way two duplicated palette blocks do. The
light value comes first.
Light is NOT an inversion of dark. Brass reads 8.3:1 on ink but only
2.0:1 on cream, and every semantic hue fails on white, so text-bearing
colours have a separate light value. Fills keep the brand brass in both
themes; only text darkens. That is what --oct-accent (fill) versus
--oct-accent-fg (text) is for.
Theme resolution: follows the OS by default, and [data-theme] on
overrides it in either direction. --oct-* colours track color-scheme,
so flipping that one property flips the whole system. */
:root {
color-scheme: light dark;
/* ── ground and type ── */
--oct-bg: light-dark(#f2f1ed, #14130f);
--oct-surface: light-dark(#e6e5e0, #1c1b16);
--oct-surface-warm: light-dark(#ebeae5, #232219);
--oct-fg: light-dark(#26251e, #f2f1ed);
--oct-fg-2: light-dark(rgba(38, 37, 30, 0.9), rgba(242, 241, 237, 0.9));
--oct-muted: light-dark(rgba(38, 37, 30, 0.68), rgba(242, 241, 237, 0.58));
--oct-meta: light-dark(rgba(38, 37, 30, 0.62), rgba(242, 241, 237, 0.45));
--oct-border: light-dark(rgba(38, 37, 30, 0.14), rgba(242, 241, 237, 0.13));
--oct-border-soft: light-dark(rgba(38, 37, 30, 0.07), rgba(242, 241, 237, 0.07));
/* ── brand ──
accent is the fill and stays brass in both themes so the brand does
not change colour. accent-fg is the same brand as *text*, darkened
for light where brass on cream is unreadable. */
--oct-accent: #d9a441;
--oct-accent-fg: light-dark(#8a6218, #d9a441);
--oct-accent-on: #14130f;
--oct-accent-hover: light-dark(color-mix(in oklab, var(--oct-accent), black 10%),
color-mix(in oklab, var(--oct-accent), white 12%));
--oct-accent-active: light-dark(color-mix(in oklab, var(--oct-accent), black 18%),
color-mix(in oklab, var(--oct-accent), white 20%));
/* ── semantic ──
The raw hues are the mixing source and are never used directly; each
theme carries its own foreground, darkened for light and lifted for
dark until it clears AA on that theme's ground. */
--oct-success: #1f8a65;
--oct-warn: #eab308;
--oct-danger: #cf2d56;
--oct-success-fg: light-dark(#0f6144, color-mix(in oklab, var(--oct-success), white 34%));
--oct-warn-fg: light-dark(#6f5300, color-mix(in oklab, var(--oct-warn), white 12%));
--oct-danger-fg: light-dark(#a8102f, color-mix(in oklab, var(--oct-danger), white 38%));
/* ── tints ──
Light grounds need a stronger mix to register at all. */
--oct-accent-soft: light-dark(color-mix(in oklab, var(--oct-accent) 30%, transparent),
color-mix(in oklab, var(--oct-accent) 16%, transparent));
--oct-success-soft: light-dark(color-mix(in oklab, var(--oct-success) 24%, transparent),
color-mix(in oklab, var(--oct-success) 18%, transparent));
--oct-warn-soft: light-dark(color-mix(in oklab, var(--oct-warn) 30%, transparent),
color-mix(in oklab, var(--oct-warn) 15%, transparent));
--oct-danger-soft: light-dark(color-mix(in oklab, var(--oct-danger) 22%, transparent),
color-mix(in oklab, var(--oct-danger) 20%, transparent));
--oct-fg-soft: light-dark(color-mix(in oklab, var(--oct-fg) 6%, transparent),
color-mix(in oklab, var(--oct-fg) 7%, transparent));
/* the hero canvas draws lines in this colour; JS resolves it rather
than reading raw channel triplets */
--oct-grid-line: light-dark(#26251e, #f2f1ed);
/* ── elevation and focus ── */
--oct-elev-flat: none;
--oct-elev-ring: 0 0 0 1px var(--oct-border);
--oct-elev-raised:
light-dark(0 28px 70px rgba(38, 37, 30, 0.13), 0 28px 70px rgba(0, 0, 0, 0.5)),
light-dark(0 14px 32px rgba(38, 37, 30, 0.10), 0 14px 32px rgba(0, 0, 0, 0.36)),
0 0 0 1px var(--oct-border);
--oct-focus-ring: 0 0 0 2px var(--oct-bg), 0 0 0 4px var(--oct-accent-fg);
/* ── type ── */
--oct-font-display: "Octant Display", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
--oct-font-body: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--oct-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* The fourth face, and the one exception to "three faces, three jobs".
The body serif is right for a page you read once; a transcript is a
working surface read for hours, interleaved with code and UI chrome,
and a serif fights that. This is the neutral UI sans both Claude Code
and Codex use. Set it to var(--oct-font-body) to go back to serif —
it is the single token that decides. */
--oct-font-transcript: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--oct-text-xs: 11px;
--oct-text-sm: 14px;
--oct-text-base: 16px;
--oct-text-lg: 19px;
--oct-text-xl: 22px;
--oct-text-2xl: 26px;
--oct-text-3xl: 36px;
--oct-text-4xl: 72px;
--oct-fs-h1: clamp(56px, 11vw, 132px);
--oct-fs-h2: clamp(30px, 3.6vw, 44px);
--oct-leading-body: 1.5;
--oct-leading-tight: 1.10;
--oct-leading-heading: 1.14;
--oct-leading-snug: 1.3;
--oct-leading-code: 1.7;
--oct-weight-display: 500;
--oct-weight-strong: 600;
/* tracking: negative tightens display type as it grows, positive opens
mono labels. Every letter-spacing in the system comes from here. */
--oct-tracking-stat: -0.04em;
--oct-tracking-tight: -0.025em;
--oct-tracking-snug: -0.01em;
--oct-tracking-wordmark: 0.04em;
--oct-tracking-wide: 0.06em;
--oct-tracking-wider: 0.14em;
--oct-tracking-widest: 0.3em;
/* ── space and shape ── */
--oct-space-1: 4px;
--oct-space-2: 8px;
--oct-space-3: 12px;
--oct-space-4: 16px;
--oct-space-5: 20px;
--oct-space-6: 24px;
--oct-space-8: 32px;
--oct-space-12: 48px;
--oct-section-y-desktop: 80px;
--oct-section-y-tablet: 48px;
--oct-section-y-phone: 32px;
--oct-radius-sm: 8px;
--oct-radius-md: 10px;
--oct-radius-lg: 12px;
--oct-radius-pill: 9999px;
--oct-motion-fast: 150ms;
--oct-motion-base: 200ms;
--oct-ease-standard: ease;
--oct-container-max: 1200px;
--oct-container-gutter-desktop: 24px;
--oct-container-gutter-tablet: 16px;
--oct-container-gutter-phone: 12px;
--oct-gutter: var(--oct-container-gutter-desktop);
/* controls: this is the real rendered height, not a floor. Components
carry no vertical padding, so changing these actually resizes them. */
--oct-control-height: 44px;
--oct-control-height-sm: 34px;
--oct-disabled-opacity: 0.45;
--oct-icon-sm: 16px;
--oct-icon-md: 19px;
--oct-icon-lg: 22px;
--oct-icon-mark: 38px;
--oct-avatar-sm: 24px;
--oct-avatar-md: 32px;
--oct-avatar-lg: 44px;
/* the wash behind a modal. Dark needs more of it because the ground is
already dark and a weak scrim leaves the page competing with the dialog. */
--oct-scrim: light-dark(rgba(38, 37, 30, 0.38), rgba(0, 0, 0, 0.64));
/* the travelling highlight in a skeleton */
--oct-sheen: light-dark(rgba(38, 37, 30, 0.07), rgba(242, 241, 237, 0.08));
/* one indent step in a file tree */
--oct-tree-indent: 14px;
/* ── chart series ──────────────────────────────────────────────────
Six hues, each picked twice so it holds against both grounds. Series
one is the brass, so a single-series chart reads as part of the
product rather than as a foreign widget.
Every one clears 3:1 against its own background, which is the bar
for a graphical object under WCAG 1.4.11. That is enough for a mark
but not for a label, so a series label is drawn in --oct-fg-2 and
the colour only appears in its swatch.
Colour is never the only difference: lines carry --oct-dash-1..6 as
well, so the chart still separates in greyscale or for a viewer who
cannot tell two hues apart. */
--oct-series-1: light-dark(#8a6218, #d9a441);
--oct-series-2: light-dark(#0f6f68, #45c8bc);
--oct-series-3: light-dark(#a8324a, #f4809a);
--oct-series-4: light-dark(#5b4bb0, #ab98f2);
--oct-series-5: light-dark(#41761c, #93cb58);
--oct-series-6: light-dark(#1e5fae, #74b0f3);
--oct-dash-1: none;
--oct-dash-2: 6 3;
--oct-dash-3: 2 3;
--oct-dash-4: 9 3 2 3;
--oct-dash-5: 1 4;
--oct-dash-6: 12 4;
/* chart chrome. The grid is deliberately fainter than --oct-border-soft:
it repeats a dozen times inside one small frame, and at border weight
it reads as a table rather than as a backdrop. */
--oct-chart-grid: light-dark(rgba(38, 37, 30, 0.10), rgba(242, 241, 237, 0.09));
--oct-chart-axis: light-dark(rgba(38, 37, 30, 0.22), rgba(242, 241, 237, 0.20));
--oct-chart-h: 180px;
/* canvas document. The measure is narrower than the prose measure —
a canvas interleaves blocks, and a long line between two charts is
harder to re-enter than a long line in running text. */
--oct-canvas-measure: 62ch;
--oct-canvas-gutter: 26px;
/* app shell. The sidebar width is a token rather than a literal because
the drag handle writes to it — resizing and the default come from the
same place, so a dragged sidebar and a fresh one behave identically. */
--oct-sidebar-w: 236px;
--oct-sidebar-w-compact: 52px;
--oct-sidebar-w-min: 180px;
--oct-sidebar-w-max: 420px;
--oct-titlebar-h: 44px;
--oct-statusbar-h: 26px;
--oct-dock-w: 320px;
--oct-z-base: 1;
--oct-z-sticky: 20;
--oct-z-overlay: 40;
--oct-z-modal: 60;
--oct-z-toast: 80;
/* Media queries cannot read custom properties, so the literals below
are repeated by hand in @media rules. These exist so JS and future
components read the same numbers. Only these three are legal. */
--oct-bp-sm: 560px;
--oct-bp-md: 720px;
--oct-bp-lg: 920px;
/* ─── mobile ────────────────────────────────────────────────────────
The phone is not the desktop at a narrower width. It has its own
material — translucent glass over an atmospheric ground — its own
radii, and a touch target that sets the floor for everything.
Glass earns its place on the phone and nowhere else. On desktop this
system draws elevation as a hairline ring and no shadow, because a
dense information surface wants edges, not depth. A phone shows one
thing at a time over a photographic ground, and there translucency
is what tells you a panel is floating rather than painted on. Both
are correct for their surface; neither should be exported to the
other.
Five thicknesses, matching the app's own recipes. Blur radius and
fill opacity move together — a thicker glass is both more opaque and
more diffuse, which is what keeps text on it readable as the panel
carries more weight. */
--oct-glass-thin: light-dark(rgba(255, 255, 255, 0.28), rgba(38, 37, 30, 0.28));
--oct-glass-regular: light-dark(rgba(255, 255, 255, 0.42), rgba(38, 37, 30, 0.40));
--oct-glass-thick: light-dark(rgba(255, 255, 255, 0.58), rgba(45, 43, 36, 0.55));
--oct-glass-chrome: light-dark(rgba(255, 255, 255, 0.50), rgba(45, 43, 36, 0.48));
--oct-glass-blur-thin: 32px;
--oct-glass-blur-regular: 48px;
--oct-glass-blur-thick: 62px;
--oct-glass-blur-chrome: 40px;
--oct-glass-stroke: light-dark(rgba(38, 37, 30, 0.10), rgba(242, 241, 237, 0.14));
--oct-glass-stroke-strong: light-dark(rgba(38, 37, 30, 0.16), rgba(242, 241, 237, 0.22));
--oct-glass-highlight: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.10));
/* Laid over the atmosphere so the backdrop has a known floor. 66% is
the measured minimum that keeps every ink-weight text role legible
over any image, on glass or bare; see .phone-atmos::after. */
--oct-glass-floor: light-dark(rgba(242, 241, 237, 0.66), rgba(20, 19, 15, 0.66));
/* Phone radii are far larger than desktop's 8/10/12. A small radius on
a 390px-wide panel reads as a hard corner; the phone's whole chrome
is one continuous soft rectangle. */
--oct-radius-bubble: 22px;
--oct-radius-card-m: 26px;
--oct-radius-sheet: 30px;
/* Touch. 44px is the floor for anything tappable, which is why the
desktop control height is already 44px — one number, not two. */
--oct-touch-min: 44px;
/* Stage pastels: what the agent is doing right now, at a glance, on a
surface too small for a label. Deliberately desaturated — they sit
behind text and must never compete with it. */
--oct-stage-thinking: light-dark(#ffd6c9, #5c2e22);
--oct-stage-reading: light-dark(#b8e8d4, #1f4a3a);
--oct-stage-editing: light-dark(#bfd9ff, #243b5c);
--oct-stage-grepping: light-dark(#d9cff5, #3a2f55);
--oct-stage-done: light-dark(#f2dfa0, #4a4020);
/* The device viewport this system draws into. iPhone logical points. */
--oct-phone-w: 390px;
--oct-phone-h: 844px;
}
/* An explicit choice on overrides the OS. Because every colour is
a light-dark(), flipping color-scheme is the entire theme switch. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* ─── reset & base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--oct-bg);
color: var(--oct-fg);
font-family: var(--oct-font-body);
font-size: var(--oct-text-base);
line-height: var(--oct-leading-body);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-synthesis: none;
overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
:focus-visible { outline: none; box-shadow: var(--oct-focus-ring); border-radius: var(--oct-radius-sm); }
/* ─── layout primitives ─────────────────────────────────────────────── */
.container { max-width: var(--oct-container-max); margin-inline: auto; padding-inline: var(--oct-gutter); }
.section { padding-block: clamp(var(--oct-section-y-phone), 8vw, var(--oct-section-y-desktop)); }
.section + .section { border-top: 1px solid var(--oct-border); }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--oct-space-5); }
.row { display: flex; align-items: center; gap: var(--oct-space-5); }
.row-wrap { flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--oct-space-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oct-space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--oct-space-8); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--oct-space-5); }
.grid-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--oct-space-12); align-items: start; }
.grid-1-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--oct-space-12); align-items: center; }
@media (max-width: 920px) {
.grid-2, .grid-3, .grid-4, .grid-2-1, .grid-1-2 { grid-template-columns: minmax(0, 1fr); }
}
/* ─── type ──────────────────────────────────────────────────────────── */
.h1, h1 { font-family: var(--oct-font-display); font-size: var(--oct-fs-h1); line-height: var(--oct-leading-tight); letter-spacing: var(--oct-tracking-tight); margin: 0; font-weight: var(--oct-weight-display); }
.h2, h2 { font-family: var(--oct-font-display); font-size: var(--oct-fs-h2); line-height: var(--oct-leading-heading); letter-spacing: var(--oct-tracking-tight); margin: 0; font-weight: var(--oct-weight-display); }
.h3, h3 { font-family: var(--oct-font-display); font-size: var(--oct-text-xl); font-weight: var(--oct-weight-strong); line-height: var(--oct-leading-snug); letter-spacing: var(--oct-tracking-snug); margin: 0; }
.h4, h4 { font-family: var(--oct-font-display); font-size: var(--oct-text-lg); font-weight: var(--oct-weight-strong); line-height: var(--oct-leading-snug); letter-spacing: var(--oct-tracking-snug); margin: 0; }
.lead { font-size: var(--oct-text-lg); line-height: 1.5; color: var(--oct-muted); max-width: 56ch; margin: 0; }
.prose { max-width: 68ch; color: var(--oct-fg-2); }
.prose p { margin: 0 0 var(--oct-space-5); }
.eyebrow {
font-family: var(--oct-font-mono);
font-size: var(--oct-text-xs);
letter-spacing: var(--oct-tracking-wider);
text-transform: uppercase;
color: var(--oct-accent-fg);
margin: 0 0 var(--oct-space-5);
}
.meta { font-family: var(--oct-font-mono); font-size: var(--oct-text-sm); color: var(--oct-muted); }
.num { font-family: var(--oct-font-mono); font-variant-numeric: tabular-nums; }
.link { color: var(--oct-fg); text-decoration: underline; text-decoration-color: var(--oct-border); text-underline-offset: 3px; transition: text-decoration-color var(--oct-motion-fast) var(--oct-ease-standard); }
.link:hover { text-decoration-color: var(--oct-accent-fg); }
.link-accent { color: var(--oct-accent-fg); text-decoration: underline; text-underline-offset: 3px; }
/* ─── chrome ────────────────────────────────────────────────────────── */
.topnav {
position: sticky; top: 0; z-index: var(--oct-z-sticky);
background: color-mix(in oklab, var(--oct-bg) 78%, transparent);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--oct-border-soft);
}
.topnav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--oct-space-3); }
.topnav .logo {
display: inline-flex; align-items: center; gap: 10px;
/* The wordmark is the one thing in the bar that must not be squeezed. As a
flex item it shrinks by default, and because it is nowrap it does not get
narrower when it shrinks — it keeps its glyphs and slides them under
whatever sits beside it. The box measures fine and the paint is wrong,
which is why this needs saying out loud. */
flex: 0 0 auto; white-space: nowrap;
font-family: var(--oct-font-display); font-size: var(--oct-text-lg);
font-weight: var(--oct-weight-display); letter-spacing: var(--oct-tracking-wordmark);
}
.topnav .logo svg { width: var(--oct-icon-lg); height: var(--oct-icon-lg); color: var(--oct-fg); }
.pagefoot { padding-block: var(--oct-space-12); color: var(--oct-muted); font-size: var(--oct-text-sm); border-top: 1px solid var(--oct-border); }
.pagefoot .row-between { flex-wrap: wrap; gap: var(--oct-space-5); }
.pagefoot a:hover { color: var(--oct-fg); text-decoration: underline; text-underline-offset: 3px; }
/* ─── buttons ───────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--oct-space-2);
min-height: var(--oct-control-height);
padding-block: 0;
padding-inline: var(--oct-space-5);
border-radius: var(--oct-radius-sm);
border: 1px solid transparent;
font-family: var(--oct-font-display);
font-size: var(--oct-text-sm);
font-weight: var(--oct-weight-display);
transition: background var(--oct-motion-fast) var(--oct-ease-standard),
border-color var(--oct-motion-fast) var(--oct-ease-standard),
color var(--oct-motion-fast) var(--oct-ease-standard),
transform 60ms var(--oct-ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: var(--oct-control-height-sm); padding-inline: var(--oct-space-4); font-size: var(--oct-text-xs); }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--oct-accent); color: var(--oct-accent-on); border-color: var(--oct-accent); }
.btn-primary:hover { background: var(--oct-accent-hover); border-color: var(--oct-accent-hover); color: var(--oct-accent-on); }
.btn-primary:active { background: var(--oct-accent-active); border-color: var(--oct-accent-active); }
.btn-secondary { background: transparent; color: var(--oct-fg); border-color: var(--oct-border); }
.btn-secondary:hover { background: var(--oct-surface-warm); border-color: var(--oct-fg); color: var(--oct-fg); }
.btn-ghost { background: transparent; color: var(--oct-muted); border-color: transparent; padding-inline: var(--oct-space-2); }
.btn-ghost:hover { color: var(--oct-fg); }
.btn-danger { background: transparent; color: var(--oct-danger-fg); border-color: color-mix(in oklab, var(--oct-danger) 45%, transparent); }
.btn-danger:hover { background: var(--oct-danger-soft); border-color: var(--oct-danger-fg); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: var(--oct-disabled-opacity); pointer-events: none; }
.btn-arrow::after { content: '→'; transition: transform var(--oct-motion-fast) var(--oct-ease-standard); }
.btn-arrow:hover::after { transform: translateX(3px); }
.btn-group { display: inline-flex; gap: var(--oct-space-3); flex-wrap: wrap; }
/* ─── card / surface ────────────────────────────────────────────────── */
.card { background: var(--oct-surface); border: 1px solid var(--oct-border); border-radius: var(--oct-radius-lg); padding: var(--oct-space-8); }
.card-flat { background: transparent; border: 0; padding: 0; }
.card-rule { background: transparent; border: 0; border-top: 1px solid var(--oct-fg); padding: var(--oct-space-6) 0 0; border-radius: 0; }
.card-raised { box-shadow: var(--oct-elev-raised); }
.card-tight { padding: var(--oct-space-5); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--oct-space-4); margin-bottom: var(--oct-space-4); }
.card-interactive { transition: border-color var(--oct-motion-fast) var(--oct-ease-standard), background var(--oct-motion-fast) var(--oct-ease-standard); }
.card-interactive:hover { border-color: color-mix(in oklab, var(--oct-fg) 26%, transparent); background: var(--oct-surface-warm); }
/* ─── feature cell ──────────────────────────────────────────────────── */
.feature .icon-mark { margin-bottom: var(--oct-space-5); }
.feature h3 { margin-bottom: var(--oct-space-2); }
.feature p { margin: 0; color: var(--oct-muted); font-size: var(--oct-text-base); }
/* ─── stat ──────────────────────────────────────────────────────────── */
.stat .stat-num { font-family: var(--oct-font-display); font-size: clamp(56px, 8vw, 96px); line-height: 0.95; letter-spacing: var(--oct-tracking-stat); color: var(--oct-accent-fg); font-weight: 500; }
.stat .stat-label { color: var(--oct-muted); font-size: var(--oct-text-sm); margin-top: var(--oct-space-2); max-width: 24ch; }
.stat .stat-unit { font-size: 0.5em; opacity: 0.7; margin-left: 2px; }
/* ─── quote ─────────────────────────────────────────────────────────── */
.quote { font-family: var(--oct-font-display); font-size: clamp(24px, 2.6vw, 32px); line-height: var(--oct-leading-snug); letter-spacing: var(--oct-tracking-snug); max-width: 28ch; }
.quote-author { color: var(--oct-muted); font-size: var(--oct-text-sm); margin-top: var(--oct-space-5); }
.quote-mark { font-family: var(--oct-font-display); font-size: 140px; line-height: 0.7; color: var(--oct-accent-fg); opacity: 0.18; margin-bottom: -28px; }
/* ─── pill / tag / badge ────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--oct-accent-soft); color: var(--oct-accent-fg); border-radius: var(--oct-radius-pill); font-family: var(--oct-font-mono); font-size: var(--oct-text-xs); letter-spacing: var(--oct-tracking-wide); text-transform: uppercase; }
.tag {
display: inline-flex; align-items: center; gap: var(--oct-space-2);
padding: 5px 12px;
background: var(--oct-border-soft);
color: var(--oct-fg-2);
border: 1px solid var(--oct-border);
border-radius: var(--oct-radius-pill);
font-family: var(--oct-font-mono);
font-size: var(--oct-text-xs);
letter-spacing: var(--oct-tracking-wider);
text-transform: uppercase;
}
.tag .dot { width: 5px; height: 5px; border-radius: var(--oct-radius-pill); background: var(--oct-accent-fg); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--oct-radius-sm); font-family: var(--oct-font-mono); font-size: var(--oct-text-xs); letter-spacing: var(--oct-tracking-wide); text-transform: uppercase; background: var(--oct-fg-soft); color: var(--oct-fg-2); }
.badge-ok { background: var(--oct-success-soft); color: var(--oct-success-fg); }
.badge-warn { background: var(--oct-warn-soft); color: var(--oct-warn-fg); }
.badge-danger { background: var(--oct-danger-soft); color: var(--oct-danger-fg); }
.badge-accent { background: var(--oct-accent-soft); color: var(--oct-accent-fg); }
/* ─── callout ───────────────────────────────────────────────────────── */
.callout { display: flex; gap: var(--oct-space-4); padding: var(--oct-space-5); border: 1px solid var(--oct-border); border-left-width: 2px; border-radius: var(--oct-radius-md); background: var(--oct-surface); color: var(--oct-fg-2); font-size: var(--oct-text-sm); }
.callout p { margin: 0; }
.callout-title { font-family: var(--oct-font-display); font-weight: var(--oct-weight-strong); color: var(--oct-fg); margin-bottom: 2px; }
.callout-accent { border-left-color: var(--oct-accent-fg); }
.callout-ok { border-left-color: var(--oct-success-fg); }
.callout-warn { border-left-color: var(--oct-warn-fg); }
.callout-danger { border-left-color: var(--oct-danger-fg); }
/* ─── form ──────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--oct-text-sm); color: var(--oct-muted); }
.field-hint { font-size: var(--oct-text-xs); color: var(--oct-meta); font-family: var(--oct-font-mono); }
.field-error { font-size: var(--oct-text-xs); color: var(--oct-danger-fg); font-family: var(--oct-font-mono); }
.input, .textarea, .select {
width: 100%;
min-height: var(--oct-control-height);
padding-block: 0;
padding-inline: var(--oct-space-4);
border: 1px solid var(--oct-border);
border-radius: var(--oct-radius-sm);
background: var(--oct-surface);
color: var(--oct-fg);
font-family: var(--oct-font-body);
font-size: var(--oct-text-base);
}
.input::placeholder, .textarea::placeholder { color: var(--oct-muted); }
.input:hover, .textarea:hover, .select:hover { border-color: color-mix(in oklab, var(--oct-fg) 26%, transparent); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { border-color: var(--oct-accent-fg); box-shadow: var(--oct-focus-ring); }
.input[aria-invalid="true"] { border-color: var(--oct-danger-fg); }
.input[disabled], .textarea[disabled], .select[disabled] { opacity: var(--oct-disabled-opacity); cursor: not-allowed; }
.textarea { min-height: 96px; padding-block: var(--oct-space-3); resize: vertical; line-height: var(--oct-leading-body); }
.select { appearance: none; padding-inline-end: var(--oct-space-8); }
.check { display: inline-flex; align-items: center; gap: var(--oct-space-3); font-size: var(--oct-text-sm); color: var(--oct-fg-2); cursor: pointer; }
.check input { position: relative; appearance: none; width: 18px; height: 18px; margin: 0; flex: 0 0 auto; border: 1px solid var(--oct-border); border-radius: 5px; background: var(--oct-surface); display: grid; place-items: center; transition: background var(--oct-motion-fast) var(--oct-ease-standard), border-color var(--oct-motion-fast) var(--oct-ease-standard); }
/* 18px is the box that reads right beside a line of text; 24 is the
floor WCAG 2.5.8 sets for a pointer target. Grow the target past the
paint rather than the paint itself. Absolute, so it stays out of the
grid above and cannot displace the checkmark drawn in ::after. */
.check input::before { content: ''; position: absolute; inset: -4px; }
.check input[type="radio"] { border-radius: var(--oct-radius-pill); }
.check input:checked { background: var(--oct-accent); border-color: var(--oct-accent); }
.check input:checked::after { content: ''; width: 9px; height: 5px; border-left: 2px solid var(--oct-accent-on); border-bottom: 2px solid var(--oct-accent-on); transform: rotate(-45deg) translate(1px, -1px); }
.check input[type="radio"]:checked::after { content: ''; width: 6px; height: 6px; border: 0; border-radius: var(--oct-radius-pill); background: var(--oct-accent-on); transform: none; }
/* qualified with input so these win against `.check input` above, which
would otherwise size the switch like a checkbox */
input.switch { position: relative; width: 38px; height: 22px; flex: 0 0 auto; appearance: none; margin: 0; border-radius: var(--oct-radius-pill); background: var(--oct-border); border: 0; display: block; cursor: pointer; transition: background var(--oct-motion-base) var(--oct-ease-standard); }
/* 22px is the height that reads right beside a line of text, and it is
two short of the 24px floor WCAG 2.5.8 sets for a pointer target.
Rather than inflate the control until it looks like a button, the
target is grown past the paint: this is part of the input's hit
region, is invisible, and costs no layout. Spacing alone would also
satisfy the rule, but only as long as nothing is ever placed beside
it — a guarantee the markup cannot make and this can. */
input.switch::before { content: ''; position: absolute; inset: -1px 0; }
input.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border: 0; border-radius: var(--oct-radius-pill); background: var(--oct-fg); transform: none; transition: transform var(--oct-motion-base) var(--oct-ease-standard); }
input.switch:checked { background: var(--oct-accent); border-color: transparent; }
input.switch:checked::after { content: ''; width: 16px; height: 16px; border: 0; border-radius: var(--oct-radius-pill); transform: translateX(16px); background: var(--oct-accent-on); }
/* ─── table ───────────────────────────────────────────────────────────
Wrap every table in .table-scroll. Body sets overflow-x: hidden, so an
unwrapped table does not scroll on a narrow screen — it silently clips
its right-hand columns. */
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.table-scroll .ds-table { min-width: 440px; }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--oct-text-sm); }
.ds-table th, .ds-table td { padding: var(--oct-space-3) var(--oct-space-4); text-align: left; border-bottom: 1px solid var(--oct-border); }
.ds-table th { color: var(--oct-muted); font-weight: 500; font-family: var(--oct-font-mono); font-size: 12px; letter-spacing: var(--oct-tracking-wordmark); text-transform: uppercase; }
.ds-table tbody tr:hover { background: var(--oct-fg-soft); }
.ds-table .num-col { font-family: var(--oct-font-mono); font-variant-numeric: tabular-nums; text-align: right; }
/* ══════════════════════════════════════════════════════════════════════
Data surfaces
.ds-table is a presentation table — a short, hand-written table in a
document. These are for data you did not write: a decoded CSV, a
worksheet, a query result. Different job, different component.
The rule that makes both readable: numbers are tabular and right-
aligned, headers stick, and the cell never wraps unless you ask.
══════════════════════════════════════════════════════════════════════ */
.datawrap { border: 1px solid var(--oct-border); border-radius: var(--oct-radius-md); background: var(--oct-surface); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; max-height: 420px; }
.datatable { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--oct-font-mono); font-size: var(--oct-text-xs); }
/* the header stays put through a long scroll, which is the whole point */
.datatable thead th { position: sticky; top: 0; z-index: var(--oct-z-base); padding: var(--oct-space-2) var(--oct-space-3); border-bottom: 1px solid var(--oct-border); background: var(--oct-surface-warm); color: var(--oct-muted); font-weight: 500; letter-spacing: var(--oct-tracking-wordmark); text-transform: uppercase; text-align: left; white-space: nowrap; }
.datatable td { padding: var(--oct-space-2) var(--oct-space-3); border-bottom: 1px solid var(--oct-border-soft); color: var(--oct-fg-2); white-space: nowrap; }
.datatable tbody tr:hover td { background: var(--oct-fg-soft); }
.datatable tbody tr[aria-selected="true"] td { background: var(--oct-accent-soft); }
/* numbers line up under each other or they cannot be compared */
.datatable .num { text-align: right; font-variant-numeric: tabular-nums; }
.datatable .nil { color: var(--oct-meta); }
.datatable .wrap { white-space: normal; min-width: 220px; }
/* a row-number gutter that survives horizontal scrolling */
.datatable .rownum { position: sticky; left: 0; z-index: var(--oct-z-base); width: 1%; padding-inline: var(--oct-space-3); background: var(--oct-surface); border-right: 1px solid var(--oct-border); color: var(--oct-meta); text-align: right; font-variant-numeric: tabular-nums; user-select: none; }
.datatable thead .rownum { z-index: 2; background: var(--oct-surface-warm); }
/* sortable header: the arrow is the affordance, the aria-sort is the truth */
.datatable th.sortable { cursor: pointer; }
.datatable th.sortable:hover { color: var(--oct-fg); }
.datatable th[aria-sort] { color: var(--oct-fg); }
.datatable th .sortmark { display: inline-block; margin-left: var(--oct-space-1); opacity: 0; }
.datatable th[aria-sort] .sortmark { opacity: 1; }
.datatable th[aria-sort="descending"] .sortmark { transform: rotate(180deg); }
/* ─── worksheet ───────────────────────────────────────────────────────
A spreadsheet grid: column letters across, row numbers down, and a
corner that pins to both. Cells are terse because a sheet is scanned. */
.sheet { border-collapse: separate; border-spacing: 0; font-family: var(--oct-font-mono); font-size: var(--oct-text-xs); }
.sheet th, .sheet td { border-right: 1px solid var(--oct-border-soft); border-bottom: 1px solid var(--oct-border-soft); padding: 3px var(--oct-space-2); white-space: nowrap; }
.sheet thead th { position: sticky; top: 0; z-index: 2; background: var(--oct-surface-warm); color: var(--oct-meta); font-weight: 500; text-align: center; min-width: 84px; }
.sheet tbody th { position: sticky; left: 0; z-index: 1; background: var(--oct-surface-warm); color: var(--oct-meta); font-weight: 500; text-align: right; min-width: 34px; }
.sheet thead th:first-child { position: sticky; left: 0; z-index: 3; min-width: 34px; }
.sheet td { color: var(--oct-fg-2); background: var(--oct-bg); }
.sheet td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet td.bool { color: var(--oct-accent-fg); }
.sheet td[aria-selected="true"] { outline: 1.5px solid var(--oct-accent-fg); outline-offset: -1.5px; }
/* worksheet tabs sit under the grid, the way a spreadsheet does */
.sheet-tabs { display: flex; gap: 2px; padding: var(--oct-space-2); border-top: 1px solid var(--oct-border); background: var(--oct-surface-warm); overflow-x: auto; scrollbar-width: thin; }
.sheet-tab { min-height: 24px; padding-inline: var(--oct-space-3); border: 1px solid transparent; border-radius: 5px; background: none; color: var(--oct-muted); font-family: var(--oct-font-mono); font-size: var(--oct-text-xs); white-space: nowrap; }
.sheet-tab:hover { color: var(--oct-fg); }
.sheet-tab[aria-selected="true"] { border-color: var(--oct-border); background: var(--oct-surface); color: var(--oct-fg); }
/* ─── viewer chrome ───────────────────────────────────────────────────
Shared by every preview: table, workbook, document, slides, PDF. The
bar names the artefact and carries the controls; the notice states what
the preview cannot show, which matters more than it looks. */
.viewer { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--oct-border); border-radius: var(--oct-radius-lg); background: var(--oct-surface); overflow: hidden; }
.viewer-bar { display: flex; align-items: center; gap: var(--oct-space-3); min-height: var(--oct-control-height-sm); padding-inline: var(--oct-space-3); border-bottom: 1px solid var(--oct-border); background: var(--oct-surface-warm); font-family: var(--oct-font-mono); font-size: var(--oct-text-xs); color: var(--oct-muted); flex: 0 0 auto; }
.viewer-bar .viewer-gap { flex: 1; }
.viewer-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; background: var(--oct-bg); }
/* honest about fidelity: a preview that silently drops formatting is worse
than one that says so */
.viewer-notice { display: flex; align-items: center; gap: var(--oct-space-2); padding: var(--oct-space-2) var(--oct-space-3); border-bottom: 1px solid var(--oct-border); background: var(--oct-warn-soft); color: var(--oct-warn-fg); font-family: var(--oct-font-mono); font-size: var(--oct-text-xs); }
/* page-based viewers: PDF, slides */
.viewer-pager { display: flex; align-items: center; gap: var(--oct-space-2); font-variant-numeric: tabular-nums; }
.viewer-page { margin: var(--oct-space-4) auto; max-width: 780px; padding: var(--oct-space-8); border: 1px solid var(--oct-border); border-radius: var(--oct-radius-sm); background: var(--oct-surface); box-shadow: var(--oct-elev-raised); }
.viewer-slide { aspect-ratio: 16 / 9; display: grid; place-items: center; margin: var(--oct-space-4) auto; max-width: 640px; border: 1px solid var(--oct-border); border-radius: var(--oct-radius-sm); background: var(--oct-surface); }
.viewer-filmstrip { display: flex; gap: var(--oct-space-2); padding: var(--oct-space-2); border-top: 1px solid var(--oct-border); background: var(--oct-surface-warm); overflow-x: auto; scrollbar-width: thin; }
.viewer-thumb { flex: 0 0 auto; width: 76px; aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px solid var(--oct-border); border-radius: 5px; background: var(--oct-bg); color: var(--oct-meta); font-family: var(--oct-font-mono); font-size: 10px; }
.viewer-thumb[aria-selected="true"] { border-color: var(--oct-accent-fg); color: var(--oct-fg-2); }
/* ─── code ──────────────────────────────────────────────────────────── */
.code { font-family: var(--oct-font-mono); font-size: 0.9em; padding: 2px 6px; border-radius: 5px; background: var(--oct-fg-soft); color: var(--oct-fg-2); }
.codeblock { font-family: var(--oct-font-mono); font-size: 13px; line-height: var(--oct-leading-code); padding: var(--oct-space-5); border: 1px solid var(--oct-border); border-radius: var(--oct-radius-md); background: var(--oct-surface); color: var(--oct-fg-2); overflow-x: auto; margin: 0; }
.codeblock .dim { color: var(--oct-muted); }
.codeblock .ok { color: var(--oct-success-fg); }
.kbd { font-family: var(--oct-font-mono); font-size: var(--oct-text-xs); padding: 3px 7px; border: 1px solid var(--oct-border); border-bottom-width: 2px; border-radius: 6px; background: var(--oct-surface-warm); color: var(--oct-fg-2); }
/* ─── tabs ──────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: var(--oct-space-5); border-bottom: 1px solid var(--oct-border); }
.tab { padding: var(--oct-space-3) 0; margin-bottom: -1px; border-bottom: 1px solid transparent; color: var(--oct-muted); font-family: var(--oct-font-display); font-size: var(--oct-text-sm); background: none; border-top: 0; border-inline: 0; transition: color var(--oct-motion-fast) var(--oct-ease-standard); }
.tab:hover { color: var(--oct-fg); }
.tab[aria-selected="true"] { color: var(--oct-fg); border-bottom-color: var(--oct-accent-fg); }
/* ─── segmented control ─────────────────────────────────────────────── */
.segmented { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--oct-border); border-radius: var(--oct-radius-sm); background: var(--oct-surface); }
/* inline-flex, not the button default, so a segment holding an icon centres it
instead of sitting it on the text baseline. Text segments are unaffected. */
.segment { display: inline-flex; align-items: center; justify-content: center; gap: var(--oct-space-2); min-height: 26px; padding-inline: var(--oct-space-3); border: 0; border-radius: 5px; background: transparent; color: var(--oct-muted); font-family: var(--oct-font-display); font-size: var(--oct-text-xs); transition: background var(--oct-motion-fast) var(--oct-ease-standard), color var(--oct-motion-fast) var(--oct-ease-standard); }
.segment:hover { color: var(--oct-fg); }
.segment[aria-pressed="true"] { background: var(--oct-fg-soft); color: var(--oct-fg); }
/* ─── meter ─────────────────────────────────────────────────────────── */
.meter { height: 4px; border-radius: var(--oct-radius-pill); background: var(--oct-fg-soft); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--oct-accent); border-radius: inherit; }
/* ─── run panel ─────────────────────────────────────────────────────── */
.runpanel { background: var(--oct-surface); border: 1px solid var(--oct-border); border-radius: var(--oct-radius-lg); overflow: hidden; }
.runpanel-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--oct-space-4); padding: var(--oct-space-3) var(--oct-space-4); border-bottom: 1px solid var(--oct-border); background: var(--oct-surface-warm); font-family: var(--oct-font-mono); font-size: var(--oct-text-xs); letter-spacing: var(--oct-tracking-wide); text-transform: uppercase; color: var(--oct-muted); }
.runpanel-body { padding: var(--oct-space-5) var(--oct-space-4) var(--oct-space-6); font-family: var(--oct-font-mono); font-size: 13px; line-height: 1.7; }
.runline { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: var(--oct-space-4); padding: 3px 0 3px var(--oct-space-3); border-left: 2px solid transparent; }
.runline .k { color: var(--oct-meta); letter-spacing: var(--oct-tracking-wide); text-transform: uppercase; }
.runline .v { color: var(--oct-fg-2); overflow-wrap: anywhere; }
.runline .v .dim { color: var(--oct-muted); }
.runline .v .ok { color: var(--oct-success-fg); }
.runline.is-active { border-left-color: var(--oct-accent-fg); background: var(--oct-border-soft); }
@media (max-width: 560px) {
.runline { grid-template-columns: 1fr; gap: 0; }
.runline .k { font-size: 10px; }
}
/* ─── status list ───────────────────────────────────────────────────── */
.statuslist .status-head {
display: flex; align-items: center; gap: var(--oct-space-2);
margin: 0 0 var(--oct-space-4); padding-bottom: var(--oct-space-3);
border-bottom: 1px solid var(--oct-border);
font-family: var(--oct-font-mono); font-size: var(--oct-text-xs);
letter-spacing: var(--oct-tracking-wider); text-transform: uppercase; color: var(--oct-fg-2);
}
.statuslist .dot { width: 6px; height: 6px; border-radius: var(--oct-radius-pill); background: var(--oct-accent-fg); flex: 0 0 auto; }
.statuslist .dot.ok { background: var(--oct-success-fg); }
.statuslist .dot.mid { background: var(--oct-accent-fg); }
.statuslist ul { margin: 0; padding: 0; list-style: none; }
.statuslist li {
color: var(--oct-muted); font-size: var(--oct-text-base);
padding: var(--oct-space-2) 0;
border-bottom: 1px solid var(--oct-border-soft);
break-inside: avoid;
}
.statusgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--oct-space-12); align-items: start; }
.statuslist ul.cols-2 { columns: 2; column-gap: var(--oct-space-8); }
@media (max-width: 920px) {
.statusgrid { grid-template-columns: minmax(0, 1fr); gap: var(--oct-space-8); }
.statuslist ul.cols-2 { columns: 1; }
}
/* ─── log row ───────────────────────────────────────────────────────── */
.log-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 100px; gap: var(--oct-space-8); padding: 22px 0; border-top: 1px solid var(--oct-border); align-items: baseline; }
.log-row h3 { font-size: var(--oct-text-lg); }
.log-row .pull { text-align: right; }
/* ─── image placeholder ─────────────────────────────────────────────── */
.ph-img { background: var(--oct-surface); border: 1px solid var(--oct-border); border-radius: var(--oct-radius-lg); aspect-ratio: 16 / 10; display: grid; place-items: center; color: var(--oct-muted); font-family: var(--oct-font-mono); font-size: 12px; letter-spacing: var(--oct-tracking-wordmark); }
.ph-img.square { aspect-ratio: 1 / 1; }
.ph-img.portrait { aspect-ratio: 3 / 4; }
.ph-img.wide { aspect-ratio: 16 / 9; }
/* ─── dividers ──────────────────────────────────────────────────────── */
.rule { border: 0; border-top: 1px solid var(--oct-border); margin: 0; }
.rule-strong { border: 0; border-top: 1px solid var(--oct-fg); margin: 0; }
.principle-idx { font-family: var(--oct-font-mono); font-size: var(--oct-text-xs); letter-spacing: var(--oct-tracking-wider); color: var(--oct-meta); display: block; margin-bottom: var(--oct-space-3); }
/* ─── icons ───────────────────────────────────────────────────────────
One sprite, referenced externally:
Colour follows currentColor, so an icon inside a button, a link, or a
danger callout takes that context's colour with no extra rule. Give it a
size class, never a width in a component rule. An icon that carries
meaning on its own needs a label; a decorative one needs aria-hidden. */
.icon { width: var(--oct-icon-md); height: var(--oct-icon-md); flex: 0 0 auto; display: inline-block; vertical-align: -0.2em; }
.icon-sm { width: var(--oct-icon-sm); height: var(--oct-icon-sm); }
.icon-lg { width: var(--oct-icon-lg); height: var(--oct-icon-lg); }
/* The bordered box an icon sits in — feature cells, empty states, anywhere a
single icon has to hold its own visual weight. One definition, because
three near-identical boxes with slightly different radii is exactly the
drift a design system exists to prevent. */
.icon-mark { display: grid; place-items: center; width: var(--oct-icon-mark); height: var(--oct-icon-mark); border: 1px solid var(--oct-border); border-radius: var(--oct-radius-sm); color: var(--oct-fg); }
/* deliberate override, and it shows up in the cascade audit: .icon carries a
baseline nudge for text runs, and the mark centres with place-items, so the
nudge would push it off-centre inside the box */
.icon-mark .icon { vertical-align: 0; }
/* ─── scrollbars ──────────────────────────────────────────────────────
Two properties, no vendor pseudo-elements, so it themes itself. */
* { scrollbar-color: var(--oct-border) transparent; }
.scroll-thin { scrollbar-width: thin; }
/* ─── avatar ────────────────────────────────────────────────────────── */
.avatar { display: inline-grid; place-items: center; width: var(--oct-avatar-md); height: var(--oct-avatar-md); border-radius: var(--oct-radius-pill); border: 1px solid var(--oct-border); background: var(--oct-surface-warm); color: var(--oct-fg-2); font-family: var(--oct-font-display); font-size: var(--oct-text-xs); letter-spacing: var(--oct-tracking-wordmark); text-transform: uppercase; overflow: hidden; flex: 0 0 auto; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: var(--oct-avatar-sm); height: var(--oct-avatar-sm); font-size: 9px; }
.avatar-lg { width: var(--oct-avatar-lg); height: var(--oct-avatar-lg); font-size: var(--oct-text-sm); }
.avatar-accent { background: var(--oct-accent); border-color: transparent; color: var(--oct-accent-on); }
/* the ring is the page ground, so the stack reads as overlap rather than mush */
.avatar-group { display: inline-flex; }
.avatar-group .avatar + .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--oct-bg); }
/* ─── spinner ─────────────────────────────────────────────────────────
Under prefers-reduced-motion the rotation stops, so the arc alone has
to read as "busy" — that is why it is a visible three-quarter ring. */
.spinner { display: inline-block; width: var(--oct-icon-md); height: var(--oct-icon-md); border: 2px solid var(--oct-border); border-top-color: var(--oct-accent-fg); border-radius: var(--oct-radius-pill); animation: oct-spin 700ms linear infinite; vertical-align: -3px; }
.spinner-sm { width: var(--oct-icon-sm); height: var(--oct-icon-sm); border-width: 2px; }
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes oct-spin { to { transform: rotate(360deg); } }
/* ─── skeleton ──────────────────────────────────────────────────────── */
.skeleton { background: var(--oct-fg-soft); border-radius: var(--oct-radius-sm); position: relative; overflow: hidden; }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--oct-sheen), transparent); transform: translateX(-100%); animation: oct-sheen 1.4s ease-in-out infinite; }
.skeleton-text { height: 12px; margin-block: 6px; }
.skeleton-title { height: 22px; border-radius: var(--oct-radius-sm); }
.skeleton-circle { border-radius: var(--oct-radius-pill); width: var(--oct-avatar-md); height: var(--oct-avatar-md); }
.skeleton-block { height: 96px; border-radius: var(--oct-radius-lg); }
.w-40 { width: 40%; } .w-60 { width: 60%; } .w-80 { width: 80%; }
@keyframes oct-sheen { to { transform: translateX(100%); } }
/* ─── empty state ───────────────────────────────────────────────────── */
.empty { display: grid; justify-items: center; gap: var(--oct-space-3); padding: var(--oct-space-12) var(--oct-space-6); border: 1px dashed var(--oct-border); border-radius: var(--oct-radius-lg); text-align: center; }
.empty h3 { font-size: var(--oct-text-lg); margin: 0; }
.empty p { color: var(--oct-muted); font-size: var(--oct-text-sm); margin: 0; max-width: 42ch; }
.empty .icon-mark { color: var(--oct-muted); }
/* ─── menu ────────────────────────────────────────────────────────────
Positioning is the caller's job — .menu only styles the surface, so it
works inside a popover, a details, or an absolutely placed wrapper. */
.menu { min-width: 200px; padding: var(--oct-space-2); border: 1px solid var(--oct-border); border-radius: var(--oct-radius-md); background: var(--oct-surface); box-shadow: var(--oct-elev-raised); z-index: var(--oct-z-overlay); }
.menu-label { display: block; padding: var(--oct-space-2) var(--oct-space-3) var(--oct-space-1); font-family: var(--oct-font-mono); font-size: var(--oct-text-xs); letter-spacing: var(--oct-tracking-wide); text-transform: uppercase; color: var(--oct-meta); }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: var(--oct-space-4); width: 100%; min-height: var(--oct-control-height-sm); padding-inline: var(--oct-space-3); border: 0; border-radius: 6px; background: none; color: var(--oct-fg-2); font-family: var(--oct-font-display); font-size: var(--oct-text-sm); text-align: left; }
.menu-item:hover, .menu-item:focus-visible { background: var(--oct-fg-soft); color: var(--oct-fg); }
.menu-item[aria-disabled="true"] { opacity: var(--oct-disabled-opacity); pointer-events: none; }
.menu-item .kbd { pointer-events: none; }
.menu-item-danger { color: var(--oct-danger-fg); }
/* a menu row that has to explain itself. Reserved for menus where the
labels are product nouns rather than verbs — "Work" and "Code" do not
tell a first-run user which one they want, and a menu is the one
presentation with room to say. The check sits in its own column at
full height so the row has a single obvious right edge. */
.menu-item-rich { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--oct-space-4); min-height: 0; padding-block: var(--oct-space-2); }
/* muted, not meta: this line is the reason the rich row exists — it is
read to make a choice, so it is text and holds 4.5:1, the same call
.mopt-sub makes for the same job in the mobile sheet */
.menu-item-desc { grid-column: 1; font-size: var(--oct-text-xs); color: var(--oct-muted); white-space: normal; }
.menu-item-rich > .icon { grid-column: 2; grid-row: 1 / span 2; visibility: hidden; color: var(--oct-accent-fg); }
.menu-item-rich[aria-current="true"] > .icon { visibility: visible; }
.menu-sep { height: 1px; margin: var(--oct-space-2) 0; background: var(--oct-border); border: 0; }
/* ─── modal ───────────────────────────────────────────────────────────
Built on