/*
* Stratum Collective — Design System v2.1
* Updated: 2026-04-28 · WCAG AA
*
* ─── CHANGELOG ────────────────────────────────────────────────────────────
*
* v2.1 (2026-04-28)
* · Sidebar `.brand` element retired from active internal dashboards (page-
* level brand redundant with topbar). Class styles retained for backward
* compat with stratum-engine and any future single-page sidebar usage.
* · Deduped `body.sidebar-collapsed { --sidebar-w: 52px; }` (was declared
* twice). Now lives only in the Tokens section.
* · Removed redundant `.howto-label, .howto-desc` from the collapsed-state
* `display:none` rule — covered by parent `.sidebar-howto`.
*
* v2.0 (2026-04-21) · Initial DS v2 publish.
*
* ─── USAGE ────────────────────────────────────────────────────────────────
*
* Plain HTML dashboards (internal-dashboards):
*
* or with absolute URL:
*
*
* stratum-site (Cloudflare Pages, plain HTML):
* Copy this file into stratum-site/design/stratum-ds-v2.css and link with /design/stratum-ds-v2.css
* (The site uses a different light-mode palette — this file is dark-only)
*
* stratum-platform (Next.js / Cloudflare Workers):
* This DS uses the INTERNAL DASHBOARD palette (indigo accent #6366f1, near-black backgrounds).
* The platform uses a separate token file (web/src/design-system/stratum-tokens.css)
* with teal accent (#0a7d6c) and deep navy backgrounds. Do NOT import this file into
* the platform — use its own token system instead.
*
* ─── PALETTE OVERVIEW ─────────────────────────────────────────────────────
*
* This is the INTERNAL DASHBOARDS palette (ops, standup, pipeline, marketing, fleet).
* Accent: Indigo #6366f1 — used for interactive primary elements, active states.
* Structural: Cyan #06b6d4 — section labels, topbar brand word.
* Data: Source Code Pro monospace for all numeric values.
* Typography: Syne for display headings, Inter for body, Source Code Pro for data.
*
* Required Google Fonts import (add to your before this CSS):
*
*
*
*
* ─── ACCESSIBILITY FLOOR ──────────────────────────────────────────────────
*
* Never use text darker than --text-muted (#7e7e96) on dark surfaces.
* Minimum font size: 0.55rem (8.8px) — applies to labels, tags, annotations.
* All interactive elements require :focus-visible styles (included below).
*/
/* ─── TOKENS ──────────────────────────────────────────────────────────────── */
:root {
/* Surfaces */
--bg: #08080d;
--surface: #111118;
--surface2: #181822;
--surface3: #222233;
/* Borders */
--border: #252538;
--border-sub: #1c1c2c;
--border-subtle: #1e1e2e;
/* Text scale — floor is --text-muted at 4.6:1 on --bg */
--text: #e8e8f0;
--text-dim: #9898b0;
--text-muted: #7e7e96;
/* Accent — indigo, interactive primary */
--accent: #6366f1;
--accent-dim: rgba(99, 102, 241, 0.12);
--accent-glow: rgba(99, 102, 241, 0.08);
/* Semantic */
--red: #ef4444;
--red-dim: rgba(239, 68, 68, 0.10);
--red-glow: rgba(239, 68, 68, 0.06);
--amber: #f59e0b;
--amber-dim: rgba(245, 158, 11, 0.10);
--green: #22c55e;
--green-dim: rgba(34, 197, 94, 0.10);
/* Extended palette */
--blue: #3b82f6;
--cyan: #06b6d4;
--purple: #a855f7;
/* Layout */
--sidebar-w: 196px;
--header-h: 52px;
--topbar-h: 44px;
--radius: 8px;
}
body.sidebar-collapsed { --sidebar-w: 52px; }
/* ─── RESET ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Source Code Pro', monospace;
background: var(--bg);
color: var(--text);
line-height: 1.5;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; outline: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ─── TOPBAR ──────────────────────────────────────────────────────────────── */
.topbar {
position: fixed; top: 0; left: 0; right: 0;
height: var(--topbar-h); z-index: 300;
background: rgba(8, 8, 13, 0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; padding: 0 20px; gap: 0;
}
/* Single-line brand (legacy) */
.topbar-brand {
font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase; color: var(--cyan);
margin-right: 24px; white-space: nowrap;
}
/* Two-line brand block: INTERNAL (large, cyan) / STRATUM COLLECTIVE (small, muted) */
.topbar-brand-block {
display: flex; flex-direction: column; justify-content: center;
gap: 2px; margin-right: 20px; flex-shrink: 0;
}
.topbar-brand-block .topbar-brand {
font-size: 13px; font-weight: 700; letter-spacing: 3px;
line-height: 1; margin-right: 0;
}
.topbar-sub {
font-family: 'Inter', sans-serif;
font-size: 8px; color: var(--text-muted); letter-spacing: 1.5px;
text-transform: uppercase; line-height: 1;
}
/* Dropdown nav items */
.topbar-nav { display: flex; align-items: stretch; }
.topbar-nav-item { position: relative; }
.topbar-nav-item > .topbar-link { display: flex; align-items: center; gap: 4px; cursor: default; }
.topbar-nav-item > .topbar-link::after { content: '▾'; font-size: 8px; opacity: 0.45; margin-left: 2px; }
.topbar-dropdown {
display: none; position: absolute; top: calc(var(--topbar-h) - 1px); left: 0;
min-width: 220px; background: var(--surface2); border: 1px solid var(--border);
border-radius: 4px; z-index: 400; padding: 4px 0;
box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.topbar-nav-item:hover .topbar-dropdown { display: block; }
.topbar-nav-item:hover > .topbar-link { color: var(--text-dim); border-bottom-color: var(--border); }
.topbar-dropdown a {
display: block; padding: 7px 14px; font-family: 'Inter', sans-serif;
font-size: 11px; color: var(--text-muted); letter-spacing: 0.3px;
transition: color 0.1s, background 0.1s; white-space: nowrap;
}
.topbar-dropdown a:hover { color: var(--text); background: var(--surface3); }
.topbar-dropdown-divider { height: 1px; background: var(--border-sub); margin: 3px 0; }
.topbar-links { display: flex; align-items: center; gap: 0; flex: 1; }
.topbar-link {
font-size: 11px; color: var(--text-muted); letter-spacing: 0.8px;
padding: 0 12px; height: var(--topbar-h);
display: flex; align-items: center;
border-bottom: 2px solid transparent;
transition: color 0.12s, border-color 0.12s; white-space: nowrap;
}
.topbar-link:hover { color: var(--text-dim); border-bottom-color: var(--border); }
.topbar-link.active { color: var(--blue); border-bottom-color: var(--blue); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-badge {
font-size: 10px; padding: 2px 8px; border-radius: 3px;
background: var(--accent-dim); color: var(--accent);
border: 1px solid rgba(99, 102, 241, 0.2); letter-spacing: 0.8px;
}
.topbar-version { font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px; }
/* ─── SHELL ───────────────────────────────────────────────────────────────── */
.shell { display: flex; margin-top: var(--topbar-h); min-height: calc(100vh - var(--topbar-h)); }
/* ─── SIDEBAR ─────────────────────────────────────────────────────────────── */
/*
* Canonical nav icon set — use these Unicode symbols in .ni-icon:
*
* ◎ Overview / home / current view
* ○ Secondary item / subordinate view
* ≡ List / table / index
* ◆ Record / data point / detail
* ◈ Analysis / pattern / intelligence
* ▤ Document / playbook / reference
* │ Signal / status / timeline
* ⊕ Add / create action
* ⊙ Settings / configuration
* ⊲ Group / cluster / collection
* ← Back navigation (used in .sidebar-back, not as .ni-icon)
*
* All symbols render monochromatically — color comes from state (default/active/muted),
* never from the symbol itself. Do not use emoji or colored icons in sidebar nav.
*/
.sidebar {
width: var(--sidebar-w);
background: var(--surface);
border-right: 1px solid var(--border);
position: fixed; top: var(--topbar-h); left: 0;
height: calc(100vh - var(--topbar-h));
overflow-y: auto; overflow-x: hidden;
display: flex; flex-direction: column;
transition: width 0.2s ease; z-index: 200; flex-shrink: 0;
}
.sidebar-top { padding: 16px 14px 12px; border-bottom: 1px solid var(--border-sub); }
/* Back navigation — sits above .brand in .sidebar-top.
.back-link is the canonical alias used in denial-intel subtree. */
.sidebar-back, .back-link {
display: flex; align-items: center; gap: 5px;
font-size: 10px; color: var(--text-muted);
padding: 4px 8px 4px 6px;
border: 1px solid var(--border-sub);
border-radius: 4px;
background: transparent;
margin-bottom: 10px;
letter-spacing: 0.3px; line-height: 1.4;
transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.sidebar-back:hover, .back-link:hover {
color: var(--text);
background: var(--surface2);
border-color: var(--border);
}
.sidebar-back:focus-visible, .back-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.brand {
font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase; color: var(--text); line-height: 1;
}
.brand-sub { font-size: 10px; color: var(--text-muted); letter-spacing: 1.2px; margin-top: 2px; }
.nav-section { padding: 10px 14px 8px; border-bottom: 1px solid var(--border-sub); }
.section-heading {
font-size: 9px; letter-spacing: 1.2px; color: var(--text-muted);
text-transform: uppercase; margin-bottom: 6px; font-weight: 500;
}
.nav-item {
display: flex; align-items: center; gap: 9px; padding: 7px 10px;
border-radius: 6px; font-size: 11px; color: var(--text-dim);
background: transparent; transition: all 0.12s;
cursor: pointer; width: 100%; text-align: left; margin-bottom: 1px;
}
.nav-item:hover { background: var(--surface2); color: var(--text); }
.nav-item.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ni-icon { font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; }
.ni-label { flex: 1; }
/* Count badge on nav items */
.ni-count {
font-size: 10px; font-family: 'Source Code Pro', monospace;
background: var(--surface3); color: var(--text-muted);
border-radius: 3px; padding: 0;
width: 20px; height: 20px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
margin-left: auto;
}
.nav-item.has-alert .ni-count { background: var(--red-dim); color: var(--red); }
.nav-item.has-warn .ni-count { background: var(--amber-dim); color: var(--amber); }
/* ─── SIDEBAR HOW-TO CALLOUT (footer) ────────────────────────────────────── */
/*
* Replaces freeform footer text. Every sidebar must include a .sidebar-howto
* block describing what the dashboard does and how to use it.
* Place it as the last child inside .sidebar, after all .nav-section blocks.
*
* HTML pattern:
*
*/
.sidebar-howto {
margin-top: auto;
padding: 12px 14px;
border-top: 1px solid var(--border-sub);
background: var(--accent-glow);
border-left: 2px solid var(--accent-dim);
}
.howto-label {
font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
color: var(--accent); margin-bottom: 5px;
}
.howto-desc {
font-size: 10px; color: var(--text-muted); line-height: 1.6; margin: 0;
font-family: 'Inter', sans-serif;
}
/* ─── COLLAPSIBLE SIDEBAR ─────────────────────────────────────────────────── */
/*
* Required on ALL internal dashboards. Every sidebar must include:
* 1. The .sidebar-edge-toggle button (fixed, outside .sidebar)
* 2. The toggleSidebar() + initSidebar() JS (see CLAUDE.md)
*
* Collapsed state hides all text, leaving only .ni-icon, .avatar, .sync-dot.
* The --sidebar-w override for the collapsed state is declared in the Tokens
* section (top of file).
*
* ⚠ KNOWN WCAG EXCEPTION: .sidebar-edge-toggle is 16×32px — below the 44×44px
* WCAG 2.1 AA touch target minimum. This is a deliberate desktop-only control;
* the collapsed state is not exposed on touch viewports. If this dashboard ever
* needs touch support, increase to width:20px; height:44px.
*/
.sidebar-edge-toggle {
position: fixed;
left: var(--sidebar-w);
top: calc(50vh + var(--topbar-h) / 2);
z-index: 250;
width: 16px; height: 32px;
background: var(--surface2);
border: 1px solid var(--border);
border-left: none;
border-radius: 0 4px 4px 0;
color: var(--text-muted); font-size: 10px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background 0.12s, color 0.12s, left 0.2s ease;
padding: 0;
}
.sidebar-edge-toggle:hover { background: var(--surface3); color: var(--text-dim); }
.sidebar-edge-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Collapsed state — hide text, keep icons.
.sidebar-howto's children (.howto-label, .howto-desc) are hidden via the
parent's display:none — no need to list them. */
body.sidebar-collapsed .section-heading,
body.sidebar-collapsed .brand,
body.sidebar-collapsed .brand-sub,
body.sidebar-collapsed .sidebar-back,
body.sidebar-collapsed .back-link,
body.sidebar-collapsed .ni-label,
body.sidebar-collapsed .ni-count,
body.sidebar-collapsed .sidebar-howto { display: none; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 8px; }
body.sidebar-collapsed .sidebar-top { padding: 12px 8px; }
body.sidebar-collapsed .nav-section { padding: 6px 8px; }
/* sidebar-footer (legacy plain text footer) */
.sidebar-footer {
padding: 12px 14px; border-top: 1px solid var(--border-sub);
font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px;
}
body.sidebar-collapsed .sidebar-footer { padding: 8px; text-align: center; }
/* ─── MAIN AREA ───────────────────────────────────────────────────────────── */
.main { margin-left: var(--sidebar-w); flex: 1; transition: margin-left 0.2s ease; }
.main-header {
height: var(--header-h);
background: rgba(8, 8, 13, 0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; padding: 0 32px; gap: 16px;
position: sticky; top: 0; z-index: 50;
}
.main-title {
font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase; color: var(--text);
}
.main-sub { font-size: 11px; color: var(--text-muted); }
.content { padding: 32px 40px 80px; max-width: 960px; }
/* ─── CARDS ───────────────────────────────────────────────────────────────── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.card-header {
padding: 12px 16px;
border-bottom: 1px solid var(--border-sub);
display: flex; align-items: center; gap: 8px;
}
.card-title {
font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
letter-spacing: 0.8px; text-transform: uppercase; color: var(--text);
}
.card-body { padding: 16px; }
/* Accent-top variants — signals urgency or category */
.card.accent-red { border-top: 2px solid var(--red); }
.card.accent-amber { border-top: 2px solid var(--amber); }
.card.accent-green { border-top: 2px solid var(--green); }
.card.accent-accent { border-top: 2px solid var(--accent); }
/* ─── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: 6px; border-radius: 5px;
font-size: 12px; font-weight: 600; font-family: inherit;
padding: 7px 14px; border: 1px solid transparent;
transition: all 0.12s; cursor: pointer; letter-spacing: 0.3px;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: #5153d8; box-shadow: 0 0 12px rgba(99, 102, 241, 0.25); }
.btn-secondary { background: var(--surface2); color: var(--text-dim); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--surface2); color: var(--text-dim); }
.btn-danger { background: var(--red-dim); color: var(--red); border-color: rgba(239, 68, 68, 0.2); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.18); }
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-disabled { opacity: 0.45; pointer-events: none; }
/* ─── META CHIPS ──────────────────────────────────────────────────────────── */
.meta-chip {
display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px;
border-radius: 3px; font-size: 11px;
background: var(--surface2); border: 1px solid var(--border-sub);
color: var(--text-muted); line-height: 1.6;
}
.meta-chip.dept { border-radius: 20px; background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.18); color: #7eb3f5; }
.meta-chip.priority-high { background: var(--red-dim); color: var(--red); border-left: 2px solid var(--red); }
.meta-chip.priority-med { background: var(--amber-dim); color: var(--amber); border-left: 2px solid var(--amber); }
.meta-chip.due-overdue { background: var(--red-dim); color: var(--red); font-weight: 600; }
.meta-chip.due-today { background: var(--amber-dim); color: var(--amber); font-weight: 600; }
.meta-chip.slip { color: var(--amber); background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.15); }
.meta-chip.assignee-p { border-radius: 20px; background: rgba(99,102,241,0.10); color: var(--accent); border-color: rgba(99,102,241,0.2); font-weight: 600; }
.meta-chip.assignee-n { border-radius: 20px; background: rgba(34,197,94,0.08); color: var(--green); border-color: rgba(34,197,94,0.2); font-weight: 600; }
.meta-chip.loe { font-family: 'Source Code Pro', monospace; background: var(--surface3); color: var(--text-muted); }
.meta-chip.done-time { color: var(--green); background: var(--green-dim); }
.meta-chip.validated { background: rgba(34,197,94,0.10); color: var(--green); border-color: rgba(34,197,94,0.2); font-weight: 600; }
.meta-chip.mixed { background: rgba(245,158,11,0.10); color: var(--amber); border-color: rgba(245,158,11,0.2); }
.meta-chip.weak { background: var(--surface3); color: var(--text-muted); border-color: var(--border); }
/* ─── PULSE CARDS ─────────────────────────────────────────────────────────── */
.pulse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pulse-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px 18px;
}
.pulse-card.status-green { border-top: 2px solid var(--green); }
.pulse-card.status-amber { border-top: 2px solid var(--amber); }
.pulse-card.status-red { border-top: 2px solid var(--red); }
.pulse-card.status-accent { border-top: 2px solid var(--accent); }
.pulse-card.status-blue { border-top: 2px solid var(--blue); }
.pulse-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 6px; }
.pulse-value { font-family: 'Source Code Pro', monospace; font-size: 28px; font-weight: 500; color: var(--text); line-height: 1; }
.pulse-value.green { color: var(--green); }
.pulse-value.amber { color: var(--amber); }
.pulse-value.red { color: var(--red); }
.pulse-value.accent { color: var(--accent); }
.pulse-value.blue { color: var(--blue); }
.pulse-sub { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
/* ─── TASK ROWS ───────────────────────────────────────────────────────────── */
.task-row {
display: flex; gap: 8px; align-items: flex-start;
padding: 10px 12px; border-radius: 6px;
border-left: 2px solid transparent; min-height: 48px;
background: transparent; transition: background 0.12s;
}
.task-row:hover { background: var(--surface2); }
.task-row.blocked { border-left-color: var(--red); background: var(--red-glow); }
.task-row.in-progress { border-left-color: var(--accent); }
.task-row.due-critical { border-left-color: var(--amber); background: var(--amber-dim); }
.task-row.done { opacity: 0.65; border-left-color: var(--green); }
.task-main { flex: 1; min-width: 0; }
.task-title {
font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
color: var(--text); line-height: 1.4;
overflow: hidden; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.task-row.done .task-title { text-decoration: line-through; color: var(--text-dim); }
.task-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.avatar {
width: 20px; height: 20px; border-radius: 50%;
background: var(--surface3); display: flex; align-items: center;
justify-content: center; font-size: 11px; font-weight: 600;
flex-shrink: 0; color: var(--text-dim); border: 1px solid var(--border);
}
.avatar.p { background: rgba(99,102,241,0.15); color: var(--accent); border-color: rgba(99,102,241,0.2); }
.avatar.n { background: rgba(34,197,94,0.12); color: var(--green); border-color: rgba(34,197,94,0.2); }
/* ─── STATUS GROUPS ───────────────────────────────────────────────────────── */
.status-group { margin-bottom: 8px; }
.group-header {
display: flex; align-items: center; gap: 10px; padding: 8px 12px;
border-bottom: 1px solid var(--border-sub); cursor: pointer;
transition: background 0.12s; border-radius: 6px 6px 0 0;
}
.group-header:hover { background: var(--surface2); }
.group-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.group-dot.red { background: var(--red); box-shadow: 0 0 5px var(--red); }
.group-dot.accent { background: var(--accent); }
.group-dot.amber { background: var(--amber); }
.group-dot.green { background: var(--green); }
.group-dot.muted { background: var(--text-muted); }
.group-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; color: var(--text-dim); }
.group-label.red { color: var(--red); }
.group-label.accent { color: var(--accent); }
.group-label.amber { color: var(--amber); }
.group-label.green { color: var(--green); }
.group-count { font-size: 11px; color: var(--text-muted); margin-left: 2px; }
.group-chevron { margin-left: auto; font-size: 10px; color: var(--text-muted); transition: transform 0.15s; }
.group-items {
display: flex; flex-direction: column; gap: 2px;
background: var(--surface); border: 1px solid var(--border);
border-top: none; border-radius: 0 0 6px 6px; padding: 4px;
}
.status-group.collapsed .group-items { display: none; }
.status-group.collapsed .group-chevron { transform: rotate(-90deg); }
/* ─── INITIATIVE CARDS ────────────────────────────────────────────────────── */
.init-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; overflow: hidden; margin-bottom: 8px;
}
.init-card-header {
display: flex; align-items: center; gap: 10px; padding: 12px 16px;
cursor: pointer; border-bottom: 1px solid var(--border-sub); transition: background 0.12s;
}
.init-card-header:hover { background: var(--surface2); }
.init-card-name {
font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase; color: var(--text); flex: 1;
}
.init-card-count { font-family: 'Source Code Pro', monospace; font-size: 11px; color: var(--text-muted); margin-left: auto; }
.init-card-chevron { font-size: 10px; color: var(--text-muted); transition: transform 0.15s; }
.init-card.collapsed .init-card-chevron { transform: rotate(-90deg); }
.init-card.collapsed .init-card-items { display: none; }
.init-card-items .task-row { border-radius: 0; border-bottom: 1px solid var(--border-sub); }
.init-card-items .task-row:last-child { border-bottom: none; }
/* ─── PANELS ──────────────────────────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border-sub); display: flex; align-items: center; gap: 10px; }
.panel-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text); }
.panel-body { padding: 16px; }
/* ─── FILTERS & TABS ──────────────────────────────────────────────────────── */
.filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-btn {
font-size: 11px; padding: 4px 10px; border-radius: 4px;
border: 1px solid var(--border); color: var(--text-muted);
background: transparent; font-family: inherit; transition: all 0.12s; cursor: pointer;
}
.filter-btn:hover { border-color: var(--accent); color: var(--text-dim); }
.filter-btn.active { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.filter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab-bar { display: flex; border-bottom: 1px solid var(--border-sub); gap: 0; }
.tab-btn {
font-size: 12px; padding: 9px 16px; color: var(--text-muted);
background: transparent; border: none; border-bottom: 2px solid transparent;
font-family: inherit; cursor: pointer; transition: all 0.12s;
}
.tab-btn:hover { color: var(--text-dim); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ─── SIGNAL STRIPES ──────────────────────────────────────────────────────── */
.signal-row {
display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 6px; border-left: 3px solid var(--border); margin-bottom: 6px;
}
.signal-row.validated { border-left-color: var(--green); background: var(--green-dim); }
.signal-row.mixed { border-left-color: var(--amber); background: var(--amber-dim); }
.signal-row.weak { border-left-color: var(--text-muted); }
.signal-row.untested { border-left-color: var(--border); }
.signal-title { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.4; }
.signal-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.signal-badges { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 5px; }
/* ─── FORM STATES ─────────────────────────────────────────────────────────── */
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-label {
font-size: 10px; font-weight: 600; letter-spacing: 0.8px;
text-transform: uppercase; color: var(--text-muted);
}
.form-input {
background: var(--surface); border: 1px solid var(--border);
border-radius: 4px; padding: 8px 10px; color: var(--text);
font-family: inherit; font-size: 12px; transition: border-color 0.12s;
}
.form-input:focus { border-color: var(--accent); outline: none; }
.form-input::placeholder { color: var(--text-muted); }
.form-input:disabled { background: var(--surface2); color: var(--text-muted); opacity: 0.6; cursor: not-allowed; }
.form-input.error { border-color: var(--red); background: var(--red-glow); }
.form-hint { font-size: 10px; color: var(--text-muted); }
.form-hint.error { color: var(--red); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* ─── SYNC DOTS ───────────────────────────────────────────────────────────── */
.sync-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.sync-dot.fresh { background: var(--green); box-shadow: 0 0 6px var(--green); }
.sync-dot.stale { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.sync-dot.error { background: var(--red); box-shadow: 0 0 6px var(--red); }
.sync-dot.loading { background: var(--accent); animation: ds-pulse 1s ease-in-out infinite; }
@keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
/* ─── EMPTY STATE ─────────────────────────────────────────────────────────── */
.empty-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 48px 24px; text-align: center;
background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
}
.empty-icon { width: 40px; height: 40px; margin-bottom: 12px; opacity: 0.3; color: var(--text-muted); }
.empty-title { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; }
.empty-desc { font-size: 11px; color: var(--text-muted); max-width: 240px; line-height: 1.6; margin-bottom: 14px; }
/* ─── SKELETON LOADER ─────────────────────────────────────────────────────── */
@keyframes ds-shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.skeleton {
background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
background-size: 400px 100%;
animation: ds-shimmer 1.5s infinite;
border-radius: 3px;
}
.sk-line { height: 10px; margin-bottom: 6px; }
.sk-block { border-radius: 6px; }
/* ─── TYPOGRAPHY UTILITIES ────────────────────────────────────────────────── */
.type-display-36 { font-family: 'Syne', sans-serif; font-size: 36px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text); line-height: 1; }
.type-display-26 { font-family: 'Syne', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text); line-height: 1.1; }
.type-display-20 { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text); }
.type-display-14 { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan); }
.type-title-14 { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); }
.type-body-13 { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--text-dim); }
.type-data-28 { font-family: 'Source Code Pro', monospace; font-size: 28px; font-weight: 500; color: var(--green); line-height: 1; }
.type-data-13 { font-family: 'Source Code Pro', monospace; font-size: 13px; color: var(--text-dim); }
.type-label-11 { font-size: 11px; color: var(--text-muted); letter-spacing: 1.2px; text-transform: uppercase; }
.type-caption-10 { font-size: 10px; color: var(--text-muted); letter-spacing: 0.8px; text-transform: uppercase; }