/* ============================================================
AGNT DESIGN SYSTEM — v1.1.1
agnt.tools · Agent Labs
A flat, dark-first design system built for AI-native products.
Import this file and apply classes or use CSS variables directly.
v1.1 consolidates the component patterns that had been stranded in
product sketches (CRM, client portal, markdown reader, document and
proposal templates) into this single source of truth. Sections 22+
are the v1.1 additions — all built on the v1.0 :root tokens.
New tokens in v1.1 (see sections 2 / 3):
--font-serif serif stack for formal/printable documents (.paper)
--shadow-pop the ONE elevation exception to the flat rule — used
only by true floating overlays (menus, command
palette, coachmarks, bottom sheets).
Usage:
Light mode: add class "light-mode" to
============================================================ */
/*
TO CUSTOMISE FOR ANOTHER PRODUCT:
1. Change --accent and --accent2 to your brand colour
2. Change --bg through --bg4 if you want a different dark surface
3. Update the topbar-logo span colour to match --accent
4. The rest of the system will follow automatically
Tabler Icons are required:
https://cdn.jsdelivr.net/npm/@tabler/icons-webfont/dist/tabler-icons.min.css
*/
/* ============================================================
1. RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
transition: background 0.15s, color 0.15s;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
/* ============================================================
2. TOKENS — DARK MODE (default)
============================================================ */
:root {
/* surfaces */
--bg: #0E0E0F;
--bg2: #161618;
--bg3: #1C1C1F;
--bg4: #242428;
/* borders */
--line: rgba(255,255,255,0.07);
--line2: rgba(255,255,255,0.12);
/* text */
--text: #E8E8E2;
--text2: #9A9A92;
--text3: #5C5C58;
/* brand */
--accent: #7B6EF6;
--accent2: #9D93F8;
/* semantic — solid + 12% tint background */
--green: #3ECF8E; --green-bg: rgba(62,207,142,0.12);
--amber: #F5A623; --amber-bg: rgba(245,166,35,0.12);
--red: #F87171; --red-bg: rgba(248,113,113,0.12);
--blue: #60A5FA; --blue-bg: rgba(96,165,250,0.12);
--teal: #2DD4BF; --teal-bg: rgba(45,212,191,0.12);
--coral: #FB923C; --coral-bg: rgba(251,146,60,0.12);
--purple: #7B6EF6; --purple-bg: rgba(123,110,246,0.12);
/* border radius */
--r4: 4px;
--r6: 6px;
--r8: 8px;
--r10: 10px;
--r12: 12px;
/* fonts */
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-mono: "SF Mono", "Fira Code", "Fira Mono", ui-monospace, monospace;
--font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; /* v1.1 — formal documents only */
/* layout */
--topbar: 48px;
--nav: 220px;
/* elevation — v1.1. The one exception to the flat rule: floating
overlays only (menus, command palette, coachmarks, bottom sheets). */
--shadow-pop: 0 16px 50px rgba(0,0,0,0.5);
/* native UI theming — v1.1.1. Without this, a dark-first sheet still
paints scrollbars, form controls, spinners and autofill light. */
color-scheme: dark;
scrollbar-color: var(--bg4) transparent;
/* focus ring — v1.1.1. Token so every product's :focus-visible matches.
Two-layer ring: a bg-coloured gap, then the accent, so it reads on
any surface. */
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
/* ============================================================
3. TOKENS — LIGHT MODE (.light-mode on body)
Solids swap; the 12% semantic tints carry through unchanged.
============================================================ */
body.light-mode {
--bg: #FFFFFF;
--bg2: #F7F7F5;
--bg3: #F0EFEC;
--bg4: #E8E7E3;
--line: rgba(0,0,0,0.08);
--line2: rgba(0,0,0,0.14);
--text: #111110;
--text2: #4A4A46;
--text3: #9A9A92;
--accent: #5B50D6;
--accent2: #4940C4;
--green: #16A35A;
--amber: #C47C0A;
--red: #DC2626;
--blue: #2563EB;
--teal: #0D9488;
--coral: #EA580C;
--purple: #5B50D6;
/* lighter elevation in light mode (v1.1) */
--shadow-pop: 0 12px 40px rgba(0,0,0,0.18);
/* native UI follows the light theme — v1.1.1 */
color-scheme: light;
}
/* ============================================================
4. TYPOGRAPHY
Two weights only: 400 (regular) and 600 (semibold). Min 10px.
============================================================ */
.text-page-title { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.text-section-title { font-size: 16px; font-weight: 600; color: var(--text); }
.text-body { font-size: 14px; font-weight: 400; color: var(--text); }
.text-label { font-size: 13px; font-weight: 400; color: var(--text2); }
.text-small { font-size: 12px; font-weight: 400; color: var(--text2); }
.text-caption { font-size: 11px; font-weight: 400; color: var(--text3); }
.text-divider-label { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; }
.text-mono { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text2); }
/* ============================================================
5. SPACING SCALE (reference — use values directly)
Allowed: 2 · 4 · 6 · 8 · 10 · 12 · 14 · 16 · 24 · 32 · 48
Do not invent intermediate values.
============================================================ */
/* ============================================================
6. BORDER RADIUS
Variables defined in section 2. Utility classes below.
Maximum container radius: --r12. Pills use 20px.
============================================================ */
.r4 { border-radius: var(--r4); }
.r6 { border-radius: var(--r6); }
.r8 { border-radius: var(--r8); }
.r10 { border-radius: var(--r10); }
.r12 { border-radius: var(--r12); }
/* ============================================================
7. SHELL — three-column layout
Topbar spans the full width as the first grid row.
============================================================ */
.agnt-shell {
display: grid;
grid-template-columns: var(--nav) 1fr;
grid-template-rows: var(--topbar) 1fr;
height: 100vh;
}
.agnt-shell-three-col {
display: grid;
grid-template-columns: var(--nav) 1fr 220px;
grid-template-rows: var(--topbar) 1fr;
height: 100vh;
}
.agnt-shell > .topbar,
.agnt-shell-three-col > .topbar { grid-column: 1 / -1; }
.agnt-shell .agnt-main,
.agnt-shell-three-col .agnt-main { overflow-y: auto; padding: 24px 28px; min-width: 0; }
.agnt-shell-three-col .agnt-right {
background: var(--bg2);
border-left: 1px solid var(--line);
overflow-y: auto;
padding: 18px 14px;
}
/* ============================================================
8. TOPBAR
============================================================ */
.topbar {
display: flex;
align-items: center;
gap: 12px;
height: var(--topbar);
padding: 0 16px;
background: var(--bg2);
border-bottom: 1px solid var(--line);
}
.topbar-logo { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.topbar-logo span { color: var(--accent); }
.topbar-org {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
background: var(--bg3);
border: 1px solid var(--line2);
border-radius: var(--r6);
color: var(--text2);
font-size: 13px;
transition: background 0.15s, border-color 0.15s;
}
.topbar-org:hover { background: var(--bg4); color: var(--text); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.avatar {
width: 30px; height: 30px; flex: none;
border-radius: 50%;
background: var(--purple-bg);
color: var(--accent2);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600;
}
/* ============================================================
9. NAVIGATION
============================================================ */
.sidenav {
width: var(--nav);
background: var(--bg3);
border-right: 1px solid var(--line);
padding: 14px 12px;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.nav-label {
font-size: 10px; font-weight: 600;
color: var(--text3);
text-transform: uppercase; letter-spacing: 0.07em;
padding: 0 10px; margin: 6px 0 6px;
}
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: var(--r6);
font-size: 13px; color: var(--text2);
text-decoration: none;
border-left: 2px solid transparent;
transition: background 0.15s, border-color 0.15s;
}
.nav-item:hover { background: var(--bg4); color: var(--text); }
.nav-item.active { background: var(--bg4); color: var(--text); font-weight: 600; border-left: 2px solid var(--accent); }
.nav-sub {
display: flex; align-items: center; gap: 9px;
padding: 6px 10px 6px 34px;
border-radius: var(--r6);
font-size: 12px; color: var(--text2);
text-decoration: none;
border-left: 2px solid transparent;
transition: background 0.15s, border-color 0.15s;
}
.nav-sub:hover { background: var(--bg4); color: var(--text); }
.nav-sub.active { color: var(--text); font-weight: 600; border-left: 2px solid var(--accent); }
.nav-divider { height: 1px; background: var(--line); margin: 8px 6px; }
.nav-badge {
font-size: 11px; font-weight: 600;
border-radius: 20px; padding: 1px 7px;
background: var(--purple-bg); color: var(--accent2);
}
.nav-badge.alert { background: var(--red-bg); color: var(--red); }
/* ============================================================
10. CARDS
============================================================ */
.card-surface {
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--r8);
padding: 16px;
transition: border-color 0.15s;
}
.card-surface:hover { border-color: var(--line2); }
.card-inset {
background: var(--bg3);
border-radius: var(--r8);
padding: 14px;
}
.card-panel {
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--r12);
padding: 16px;
}
/* ============================================================
11. BUTTONS — all r6, hover opacity 0.85
============================================================ */
.btn-primary, .btn-secondary, .btn-destructive, .btn-ghost {
display: inline-flex; align-items: center; gap: 6px;
border-radius: var(--r6);
padding: 7px 14px;
font-size: 12px; font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn-primary { background: var(--accent); color: #ffffff; border: none; }
.btn-secondary { background: var(--bg4); color: var(--text2); border: 1px solid var(--line2); padding: 6px 12px; }
.btn-destructive { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); padding: 6px 12px; }
.btn-ghost { background: transparent; color: var(--text2); border: 1px solid transparent; padding: 6px 12px; }
.btn-ghost:hover { background: var(--bg3); color: var(--text); }
.btn-primary:hover, .btn-secondary:hover, .btn-destructive:hover { opacity: 0.85; }
.btn-xs { font-size: 11px; padding: 3px 8px; border-radius: var(--r4); }
/* ============================================================
12. INPUTS AND SELECTS
============================================================ */
.input, .select {
width: 100%;
background: var(--bg3);
border: 1px solid var(--line2);
border-radius: var(--r6);
padding: 7px 10px;
font-size: 13px;
color: var(--text);
transition: border-color 0.15s;
}
.input::placeholder { color: var(--text3); }
.input:focus, .select:focus { outline: none; border-color: var(--accent); }
/* ============================================================
13. BADGES AND PILLS — base r4, pill variant 20px
============================================================ */
.badge {
display: inline-flex; align-items: center; gap: 6px;
border-radius: var(--r4);
padding: 2px 8px;
font-size: 11px; font-weight: 600;
white-space: nowrap;
}
.badge-pill { border-radius: 20px; }
.badge-default { background: var(--bg4); color: var(--text3); border: 1px solid var(--line); }
.badge-custom { background: var(--amber-bg); color: var(--amber); }
.badge-success { background: var(--green-bg); color: var(--green); }
.badge-warning { background: var(--amber-bg); color: var(--amber); }
.badge-error { background: var(--red-bg); color: var(--red); }
.badge-info { background: var(--blue-bg); color: var(--blue); }
.badge-monitoring { background: var(--teal-bg); color: var(--teal); }
.badge-ai { background: var(--purple-bg); color: var(--accent2); }
.badge-version { background: var(--purple-bg); color: var(--accent2); font-family: var(--font-mono); border-radius: 20px; }
/* ============================================================
14. STATUS INDICATORS
============================================================ */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text3); }
.status-dot.live { background: var(--green); }
.status-dot.error { background: var(--red); }
.status-dot.paused { background: var(--amber); }
.status-dot.ok { background: var(--green); }
/* permission indicators (Y / N / G / O) from the permissions reference */
.perm-yes, .perm-no, .perm-group, .perm-own {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
border-radius: 50%;
font-size: 11px; font-weight: 600;
}
.perm-yes { background: var(--green-bg); color: var(--green); } /* Granted */
.perm-no { background: var(--red-bg); color: var(--red); } /* Denied */
.perm-group { background: var(--amber-bg); color: var(--amber); } /* Group-scoped */
.perm-own { background: var(--blue-bg); color: var(--blue); } /* Owner/Admin only */
/* ============================================================
15. PANELS
============================================================ */
.panel {
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--r12);
padding: 14px 16px;
}
.panel-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.panel-title { font-size: 13px; font-weight: 600; color: var(--text); }
.panel-link { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--accent2); text-decoration: none; }
.panel-link:hover { text-decoration: underline; }
.panel-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.panel-tab {
padding: 9px 14px;
background: transparent; border: none;
border-bottom: 2px solid transparent;
font-size: 13px; color: var(--text2);
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.panel-tab:hover { color: var(--text); }
.panel-tab.active { color: var(--text); font-weight: 600; border-bottom: 2px solid var(--accent); }
/* ============================================================
16. TABLES
============================================================ */
.agnt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.agnt-table th {
text-align: left;
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--text3);
background: var(--bg3);
padding: 8px 10px;
border-bottom: 1px solid var(--line);
}
.agnt-table td {
padding: 9px 10px;
border-bottom: 1px solid var(--line);
color: var(--text2);
vertical-align: top;
}
.agnt-table tbody tr:hover { background: var(--bg3); }
/* ============================================================
17. SCORE DISPLAY
Bands: good >=80 (green) · needs >=60 (amber) · poor >=40 (coral) · critical <40 (red)
============================================================ */
.score-good { color: var(--green); }
.score-needs { color: var(--amber); }
.score-poor { color: var(--coral); }
.score-critical { color: var(--red); }
.score-large { font-size: 24px; font-weight: 600; line-height: 1; }
.score-pill {
display: inline-flex; align-items: center; gap: 6px;
border-radius: 20px;
padding: 2px 10px;
font-size: 11px; font-weight: 600;
}
.score-bar { height: 4px; background: var(--bg4); border-radius: 20px; overflow: hidden; }
.score-bar > .fill { height: 100%; border-radius: 20px; background: var(--accent); }
/* ============================================================
18. DIFF VIEW
============================================================ */
.diff-added, .diff-removed, .diff-same {
font-family: var(--font-mono);
font-size: 12px;
padding: 2px 10px;
border-left: 2px solid transparent;
white-space: pre-wrap;
}
.diff-added { background: var(--green-bg); color: var(--green); border-left-color: var(--green); }
.diff-removed { background: var(--red-bg); color: var(--red); border-left-color: var(--red); }
.diff-same { color: var(--text3); }
/* ============================================================
19. MOTION
Only background, border-color, and opacity animate.
============================================================ */
.transition { transition: background 0.15s, border-color 0.15s, opacity 0.15s; }
@keyframes agnt-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: no-preference) {
.unsaved-dot { animation: agnt-pulse 1.5s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* ============================================================
20. UTILITIES
============================================================ */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mono { font-family: var(--font-mono); }
.uppercase-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); }
.divider { height: 1px; background: var(--line); margin: 8px 4px; border: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.icon-btn {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r6);
color: var(--text2);
font-size: 17px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--bg3); color: var(--text); border-color: var(--line); }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
/* ============================================================
21. RESPONSIVE
============================================================ */
@media (max-width: 768px) {
.sidenav { display: none; }
.agnt-shell { grid-template-columns: 1fr; }
.agnt-shell-three-col { grid-template-columns: 1fr; }
.agnt-shell-three-col .agnt-right { display: none; }
/* touch targets */
.btn-primary, .btn-secondary, .btn-destructive, .btn-ghost,
.icon-btn, .topbar-org, .input, .select, .panel-tab { min-height: 44px; }
}
@media (max-width: 600px) {
.agnt-shell .agnt-main,
.agnt-shell-three-col .agnt-main { padding: 16px 14px; }
.card-surface, .card-panel, .panel { padding: 14px; }
}
/* ════════════════════════════════════════════════════════════
v1.1 — CONSOLIDATED COMPONENT LAYER
Extracted from product sketches into this single source of truth.
Everything below uses the v1.0 :root tokens above; nothing is
re-declared. See CHANGELOG.md for provenance per section.
════════════════════════════════════════════════════════════ */
/* ============================================================
22. PAGE HEADER & TOOLBAR
Index/list pages: title + count on the left, one primary action
on the right; below it a toolbar of search + filter pills.
============================================================ */
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.page-head .grow { flex: 1; min-width: 0; }
.page-head .text-page-title + .text-small { margin-top: 2px; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.search { position: relative; flex: 1; min-width: 200px; }
.search > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 15px; }
.search > .input { padding-left: 30px; }
.filter-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-pill {
padding: 5px 11px; border-radius: 20px;
font-size: 12px; font-weight: 600;
background: var(--bg3); color: var(--text2); border: 1px solid var(--line);
cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-pill:hover { background: var(--bg4); color: var(--text); }
.filter-pill.active { background: var(--purple-bg); color: var(--accent2); border-color: transparent; }
/* ============================================================
23. BREADCRUMBS (in-main trail)
============================================================ */
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text3); margin-bottom: 14px; }
.crumbs a { color: var(--text2); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs i { font-size: 13px; }
/* ============================================================
24. STATUS PILLS — generic, colour-encodes state
A rounded pill (optionally with a leading .pill-dot) whose colour
maps to a fixed meaning. Use these for any enum/state set —
e.g. a CRM pipeline maps its stages onto these:
Prospecting→pill-neutral · Qualification→pill-info · Analysis→pill-teal
Proposal→pill-warning · Negotiation→pill-coral · Won→pill-success · Lost→pill-error
and a deal rating: Hot→pill-error · Warm→pill-warning · Cold→pill-info.
Define product-specific aliases in the product repo; never fork the colours.
============================================================ */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill-neutral { background: var(--bg4); color: var(--text2); }
.pill-accent { background: var(--purple-bg); color: var(--accent2); }
.pill-success { background: var(--green-bg); color: var(--green); }
.pill-warning { background: var(--amber-bg); color: var(--amber); }
.pill-error { background: var(--red-bg); color: var(--red); }
.pill-info { background: var(--blue-bg); color: var(--blue); }
.pill-teal { background: var(--teal-bg); color: var(--teal); }
.pill-coral { background: var(--coral-bg); color: var(--coral); }
/* ============================================================
25. KEY-VALUE GRID & DETAIL SECTIONS
Entity-detail building blocks: a divider-titled section, an
auto-fitting key/value grid, right-rail summary rows, and a
full-width rail action button.
============================================================ */
.detail-section { margin-top: 8px; }
.detail-section > .head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.detail-section > .head .text-divider-label { flex: none; }
.detail-section > .head .line { flex: 1; height: 1px; background: var(--line); }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 24px; }
.kv .k { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); margin-bottom: 3px; }
.kv .v { font-size: 14px; color: var(--text); }
.kv .v.mono { font-family: var(--font-mono); font-size: 13px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.summary-row:last-child { border-bottom: none; }
.summary-row .k { color: var(--text3); }
.summary-row .v { color: var(--text); font-weight: 600; text-align: right; }
.rail-action { width: 100%; justify-content: flex-start; margin-bottom: 6px; }
/* ============================================================
26. PANEL LIST ROWS (extends §15 Panels)
A flat list of rows inside a .panel — label + optional sub +
trailing pill / value.
============================================================ */
.panel-list { display: flex; flex-direction: column; }
.panel-list-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.panel-list-row:last-child { border-bottom: none; }
.panel-list-row .grow { flex: 1; min-width: 0; }
.panel-list-row .sub { font-size: 11px; color: var(--text3); }
/* ============================================================
27. AVATARS (extends §8 .avatar)
Two shapes: round .avatar (initials/people) in three sizes, and
the rounded-square .ava (entity/agent tile). Tint variants carry
meaning — purple (.avatar-ai / .ava-ai) is reserved for AI.
============================================================ */
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-xs { width: 22px; height: 22px; font-size: 9.5px; }
.avatar-ai { background: var(--purple-bg); color: var(--accent2); }
.avatar-green { background: var(--green-bg); color: var(--green); }
.avatar-blue { background: var(--blue-bg); color: var(--blue); }
.avatar-amber { background: var(--amber-bg); color: var(--amber); }
.avatar-teal { background: var(--teal-bg); color: var(--teal); }
.avatar-coral { background: var(--coral-bg); color: var(--coral); }
/* rounded-square entity / agent avatar */
.ava { width: 38px; height: 38px; flex: none; border-radius: var(--r8); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; }
.ava-ai { background: var(--purple-bg); color: var(--accent2); }
.ava-green { background: var(--green-bg); color: var(--green); }
.ava-blue { background: var(--blue-bg); color: var(--blue); }
.ava-amber { background: var(--amber-bg); color: var(--amber); }
.ava-teal { background: var(--teal-bg); color: var(--teal); }
.ava-coral { background: var(--coral-bg); color: var(--coral); }
/* owner / assignee cluster (small round avatar + name) used in table cells */
.owner { display: inline-flex; align-items: center; gap: 9px; }
/* ============================================================
28. ENTITY CARD GRID
A responsive grid of identity cards (Agents, Team, …): a coloured
avatar, name, role line, and a meta footer. Compose with
.card-surface for the surface.
============================================================ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.entity-card { display: flex; gap: 12px; }
.entity-card .nm { font-size: 14px; font-weight: 600; color: var(--text); }
.entity-card .role { font-size: 12px; color: var(--text2); margin-top: 2px; line-height: 1.45; }
.entity-card .meta { font-size: 11px; color: var(--text3); margin-top: 8px; display: flex; gap: 12px; }
/* ============================================================
29. TABLE — CELL HELPERS & ENRICHED ROWS (extends §16 Tables)
Money/number cells, leading type dots, a muted/inactive row, and
a sticky-header scroll variant for long tables.
============================================================ */
.cell-money, .cell-num { font-family: var(--font-mono); text-align: right; color: var(--text); white-space: nowrap; }
.agnt-table td.cell-money, .agnt-table th.cell-money,
.agnt-table td.cell-num, .agnt-table th.cell-num { text-align: right; }
/* leading type dot inside a cell (e.g. Client / Prospect / Partner) */
.row-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: 1px; background: var(--text3); }
.row-dot.success { background: var(--green); }
.row-dot.info { background: var(--blue); }
.row-dot.accent { background: var(--accent); }
.row-dot.warning { background: var(--amber); }
.row-dot.error { background: var(--red); }
/* de-emphasised / inactive row */
.agnt-table tr.muted td { color: var(--text3); }
.agnt-table tr.muted td .pill, .agnt-table tr.muted td .row-dot { opacity: 0.65; }
/* sticky-header scroll container */
.table-scroll { overflow: auto; }
.table-scroll .agnt-table thead th { position: sticky; top: 0; z-index: 1; }
/* ============================================================
30. TABLE CARD & TOOLBAR
The full "data view": a floating card holding a tab strip + a
tool row (icon tools, share, primary action) above the table.
This is the canonical list-with-views surface.
============================================================ */
.table-card {
background: var(--bg2); border: 1px solid var(--line);
border-radius: var(--r12); overflow: hidden;
display: flex; flex-direction: column; min-height: 0;
box-shadow: var(--shadow-pop);
}
.table-bar { display: flex; align-items: center; gap: 8px; padding: 6px 14px 0; border-bottom: 1px solid var(--line); }
.table-tabs { display: flex; align-items: center; gap: 2px; }
.table-tab {
display: flex; align-items: center; gap: 6px; padding: 8px 12px;
font-size: 12.5px; color: var(--text2);
background: transparent; border: none; border-bottom: 2px solid transparent;
cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s;
}
.table-tab .ti { font-size: 14px; }
.table-tab:hover { color: var(--text); }
.table-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.table-tab.add { color: var(--text3); padding: 8px; }
.table-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; padding-bottom: 4px; }
.tool-btn {
width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r6); color: var(--text2); font-size: 17px; cursor: pointer;
background: transparent; border: none; transition: background 0.15s, color 0.15s;
}
.tool-btn:hover, .tool-btn.active { background: var(--bg3); color: var(--text); }
.tool-divider { width: 1px; height: 18px; background: var(--line); margin: 0 5px; }
/* ============================================================
31. MENU / DROPDOWN
A floating list surface for context menus, column menus, and
filter pickers. Uses the --shadow-pop elevation exception.
============================================================ */
.menu { background: var(--bg3); border: 1px solid var(--line2); border-radius: var(--r10); overflow: hidden; box-shadow: var(--shadow-pop); min-width: 200px; }
.menu-header { padding: 9px 12px; font-size: 11px; color: var(--text3); border-bottom: 1px solid var(--line); }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--text2); cursor: pointer; transition: background 0.15s, color 0.15s; }
.menu-item:hover { background: var(--bg4); color: var(--text); }
.menu-item > i { font-size: 15px; color: var(--text3); width: 16px; text-align: center; flex: none; }
.menu-divider { height: 1px; background: var(--line); margin: 5px 0; }
.menu-check { display: flex; align-items: center; gap: 9px; padding: 7px 12px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.menu-check:hover { background: var(--bg4); }
.menu-check .box { width: 15px; height: 15px; border-radius: var(--r4); border: 1.5px solid var(--line2); display: inline-grid; place-items: center; font-size: 11px; flex: none; }
.menu-check .box.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ============================================================
32. EDITABLE & FIELD ROWS
Settings list rows. .edit-row: drag handle + inputs + count +
delete (reorderable lists). .field-row: a labelled key with a
value field and trailing actions (e.g. integration secrets).
============================================================ */
.edit-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r6); transition: background 0.15s; }
.edit-row:hover { background: var(--bg3); }
.edit-row .drag { color: var(--text3); cursor: grab; font-size: 16px; }
.edit-row .input { flex: 1; }
.edit-row .slug { flex: 1; font-family: var(--font-mono); }
.edit-row .count { width: 46px; text-align: right; color: var(--text2); font-size: 12px; }
.field-row { display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.field-row:last-child { border-bottom: none; }
.field-row .key { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.field-row .field { display: flex; gap: 6px; }
@media (max-width: 600px) {
.field-row { grid-template-columns: 1fr; }
}
/* ============================================================
33. SECONDARY NAV (two-pane settings)
A slim secondary column of grouped links beside the content.
Pairs with .nav-label for group headings.
============================================================ */
.secondary-nav { width: 180px; flex: none; padding: 6px 8px; }
.secondary-nav .nav-label { padding: 0 8px; }
.snav-item { display: block; padding: 6px 8px; border-radius: var(--r6); font-size: 12px; color: var(--text2); text-decoration: none; transition: background 0.15s, color 0.15s; }
.snav-item:hover { background: var(--bg4); color: var(--text); }
.snav-item.active { background: var(--bg4); color: var(--text); font-weight: 600; }
/* ============================================================
34. COLLAPSIBLE NAV GROUPS (extends §9 Navigation)
Accordion sections in the sidenav. Toggle .open on .nav-group.
============================================================ */
.nav-group-head {
display: flex; align-items: center; gap: 6px; width: 100%;
background: none; border: none; cursor: pointer;
font-size: 10px; font-weight: 600; color: var(--text3);
text-transform: uppercase; letter-spacing: 0.07em;
padding: 8px 10px 6px; transition: color 0.15s;
}
.nav-group-head:hover { color: var(--text2); }
.nav-group-head .glabel { flex: 1; text-align: left; }
.nav-group-head .nav-chev { font-size: 15px; color: var(--text3); transition: transform 0.15s; }
.nav-group:not(.open) .nav-chev { transform: rotate(-90deg); }
.nav-group-items { display: none; }
.nav-group.open .nav-group-items { display: block; }
/* ============================================================
35. STAT CARDS & RESPONSIVE GRID HELPERS
Metric tiles (label / big mono value / delta) plus auto-fitting
grids that fill desktop width and collapse to one column on phones.
============================================================ */
.stat { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r10); padding: 16px; }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); }
.stat .v { font-size: 24px; font-weight: 600; font-family: var(--font-mono); color: var(--text); margin-top: 6px; line-height: 1; }
.stat .d { font-size: 12px; margin-top: 6px; color: var(--text2); }
.grid-auto { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-auto-sm { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.span-all { grid-column: 1 / -1; }
/* ============================================================
36. PRICING — line-item cards & totals
Proposal / quote / invoice surfaces: a line-item card (name +
amount + sub) and a right-aligned totals block with a grand total.
============================================================ */
.price-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r10); }
.price-card .grow { flex: 1; min-width: 0; }
.price-card .nm { font-size: 14px; font-weight: 600; color: var(--text); }
.price-card .sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
.price-card .amt { font-family: var(--font-mono); font-size: 14px; color: var(--text); white-space: nowrap; }
.price-totals { display: flex; flex-direction: column; gap: 0; }
.price-totals .tr { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 13px; color: var(--text2); }
.price-totals .tr .v { font-family: var(--font-mono); color: var(--text); }
.price-totals .tr.grand { border-top: 1px solid var(--line2); margin-top: 4px; padding-top: 12px; font-size: 15px; font-weight: 600; color: var(--text); }
.price-totals .tr.grand .v { font-weight: 600; }
/* ============================================================
37. INFO CALLOUT
A short inline note with an accent left-border. Variants recolour
the tint + border to a semantic meaning.
============================================================ */
.callout { display: flex; gap: 8px; font-size: 12px; color: var(--text2); background: var(--purple-bg); border: 1px solid transparent; border-left: 2px solid var(--accent); border-radius: var(--r6); padding: 10px 12px; }
.callout > i { color: var(--accent2); font-size: 15px; flex: none; margin-top: 1px; }
.callout-success { background: var(--green-bg); border-left-color: var(--green); }
.callout-success > i { color: var(--green); }
.callout-warning { background: var(--amber-bg); border-left-color: var(--amber); }
.callout-warning > i { color: var(--amber); }
.callout-error { background: var(--red-bg); border-left-color: var(--red); }
.callout-error > i { color: var(--red); }
.callout-info { background: var(--blue-bg); border-left-color: var(--blue); }
.callout-info > i { color: var(--blue); }
/* ============================================================
38. SEGMENTED TOGGLE
A compact group of mutually-exclusive options (e.g. Rendered / Raw).
============================================================ */
.segmented { display: inline-flex; gap: 2px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r6); padding: 2px; }
.segmented .seg {
display: inline-flex; align-items: center; gap: 5px;
background: transparent; border: none; border-radius: var(--r4);
color: var(--text2); font-size: 12px; font-weight: 600;
padding: 4px 10px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.segmented .seg .ti { font-size: 14px; }
.segmented .seg:hover { color: var(--text); }
.segmented .seg.active { background: var(--bg4); color: var(--accent); }
/* ============================================================
39. SWITCH (toggle)
A binary on/off control. Wrap a checkbox or toggle .on via JS.
============================================================ */
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; border-radius: 20px; background: var(--bg4); border: 1px solid var(--line2); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--text2); transition: transform 0.15s, background 0.15s; }
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.on::after { transform: translateX(16px); background: #fff; }
/* ============================================================
40. STEPPER — vertical & horizontal
Progress through a flow. States: .done (filled), .active (accent
ring), default (pending). Connector lines join the steps.
============================================================ */
/* horizontal */
.stepper { display: flex; align-items: center; gap: 0; }
.stepper .step { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text3); white-space: nowrap; }
.stepper .step .num { width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--bg4); color: var(--text3); border: 1px solid var(--line2); }
.stepper .step.active .num { background: var(--purple-bg); color: var(--accent2); border-color: transparent; }
.stepper .step.active { color: var(--text); font-weight: 600; }
.stepper .step.done .num { background: var(--accent); color: #fff; border-color: transparent; }
.stepper .step.done { color: var(--text2); }
.stepper .step-sep { flex: 1; min-width: 16px; height: 1px; background: var(--line); margin: 0 10px; }
/* vertical */
.stepper-v { display: flex; flex-direction: column; }
.stepper-v .vstep { position: relative; display: flex; gap: 12px; padding-bottom: 18px; }
.stepper-v .vstep:last-child { padding-bottom: 0; }
.stepper-v .vstep .num { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--bg4); color: var(--text3); border: 1px solid var(--line2); z-index: 1; }
.stepper-v .vstep.active .num { background: var(--purple-bg); color: var(--accent2); border-color: transparent; }
.stepper-v .vstep.done .num { background: var(--accent); color: #fff; border-color: transparent; }
.stepper-v .vstep .vline { position: absolute; left: 11px; top: 24px; bottom: 0; width: 1px; background: var(--line); }
.stepper-v .vstep:last-child .vline { display: none; }
.stepper-v .vstep .body .t { font-size: 13px; font-weight: 600; color: var(--text); }
.stepper-v .vstep .body .d { font-size: 12px; color: var(--text3); margin-top: 2px; line-height: 1.45; }
.stepper-v .vstep:not(.active):not(.done) .body .t { color: var(--text2); }
/* ============================================================
41. ACCORDION
Collapsible disclosure section. Toggle .open to reveal the body.
============================================================ */
.accordion { border: 1px solid var(--line); border-radius: var(--r10); overflow: hidden; background: var(--bg2); }
.accordion + .accordion { margin-top: 8px; }
.acc-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); text-align: left; }
.acc-head .grow { flex: 1; min-width: 0; }
.acc-head .acc-chev { color: var(--text3); transition: transform 0.15s; }
.accordion.open .acc-head .acc-chev { transform: rotate(180deg); }
.acc-body { display: none; padding: 0 14px 14px; font-size: 13px; color: var(--text2); line-height: 1.55; }
.accordion.open .acc-body { display: block; }
/* ============================================================
42. TOASTS
Transient bottom-right notifications.
============================================================ */
.toast-root { position: fixed; bottom: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
pointer-events: auto;
background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r8);
padding: 10px 14px; font-size: 13px; color: var(--text);
display: flex; align-items: center; gap: 8px; min-width: 200px;
box-shadow: var(--shadow-pop);
}
.toast .ti { font-size: 16px; }
.toast.success { border-color: var(--green); }
.toast.success .ti { color: var(--green); }
.toast.error { border-color: var(--red); }
.toast.error .ti { color: var(--red); }
/* ============================================================
43. EMPTY STATE & STATE / GATE SCREEN
.empty-state: a centred placeholder inside a region.
.state-screen: a full-region status screen (lock / verify /
expired / accepted) with a large glyph — for gated or terminal
states. Colour the glyph with a variant.
============================================================ */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text3); padding: 48px 24px; text-align: center; }
.empty-state .ti { font-size: 22px; }
.empty-state p { font-size: 13px; margin: 0; }
.state-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 48px 24px; min-height: 240px; }
.state-screen .glyph { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--bg4); color: var(--text2); }
.state-screen .st-title { font-size: 16px; font-weight: 600; color: var(--text); }
.state-screen .st-sub { font-size: 13px; color: var(--text2); max-width: 360px; line-height: 1.5; }
.state-screen.lock .glyph { background: var(--bg4); color: var(--text2); }
.state-screen.verify .glyph { background: var(--blue-bg); color: var(--blue); }
.state-screen.expired .glyph { background: var(--amber-bg); color: var(--amber); }
.state-screen.accepted .glyph { background: var(--green-bg); color: var(--green); }
/* ============================================================
44. STICKY ACTION BAR
A persistent footer holding a summary + a primary action — the
mobile commit pattern (honours the safe-area inset).
============================================================ */
.action-bar {
position: sticky; bottom: 0; z-index: 30;
display: flex; align-items: center; gap: 12px;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
background: var(--bg2); border-top: 1px solid var(--line2);
}
.action-bar .grow { flex: 1; min-width: 0; }
.action-bar .tot { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.action-bar .tlbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); }
/* ============================================================
45. BOTTOM SHEET
A slide-up panel anchored to the bottom edge (mobile dialogs,
detail rails). Toggle .open; pair with .sheet-backdrop.
============================================================ */
.sheet-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.5); display: none; }
.sheet-backdrop.open { display: block; }
.sheet {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
max-height: 82%; overflow-y: auto;
background: var(--bg2); border-top: 1px solid var(--line2);
border-top-left-radius: var(--r12); border-top-right-radius: var(--r12);
padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
transform: translateY(100%); transition: transform 0.2s ease;
box-shadow: var(--shadow-pop);
}
.sheet.open { transform: translateY(0); }
.sheet-handle { display: block; width: 38px; height: 4px; background: var(--bg4); border-radius: 20px; margin: 8px auto 14px; }
/* ============================================================
46. COMMAND PALETTE (⌘K)
A centred launcher overlay: search input + grouped results.
============================================================ */
.cmdk-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.5); display: none; }
.cmdk-backdrop.open { display: block; }
.cmdk {
position: fixed; left: 50%; top: 12vh; transform: translateX(-50%);
width: min(560px, 92vw); z-index: 301;
background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r12);
overflow: hidden; display: none; box-shadow: var(--shadow-pop);
}
.cmdk.open { display: block; }
.cmdk-input { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.cmdk-input > i { color: var(--text3); font-size: 18px; }
.cmdk-input input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 15px; min-width: 0; }
.cmdk-input kbd { font-family: var(--font-mono); font-size: 10px; color: var(--text3); border: 1px solid var(--line); border-radius: var(--r4); padding: 2px 6px; }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.cmdk-group { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); padding: 9px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r6); font-size: 13px; color: var(--text2); cursor: pointer; }
.cmdk-item > i { font-size: 16px; color: var(--text3); flex: none; }
.cmdk-item .lbl { flex: 1; color: var(--text); min-width: 0; }
.cmdk-item .hint { font-size: 11px; color: var(--text3); }
.cmdk-item.selected { background: var(--bg4); }
@media (max-width: 600px) {
.cmdk { top: 0; left: 0; transform: none; width: 100vw; height: 100%; border-radius: 0; }
.cmdk-list { max-height: calc(100vh - 58px); }
}
/* ============================================================
47. COACHMARK TOOLTIP
A small floating hint with a pointer arrow — onboarding nudges.
============================================================ */
.coachmark { position: relative; background: var(--bg4); border: 1px solid var(--line2); border-radius: var(--r8); padding: 12px 13px; width: 250px; box-shadow: var(--shadow-pop); }
.coachmark::before { content: ""; position: absolute; top: -7px; right: 54px; width: 12px; height: 12px; background: var(--bg4); border-left: 1px solid var(--line2); border-top: 1px solid var(--line2); transform: rotate(45deg); }
.coachmark .tt { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.coachmark .td { font-size: 11.5px; color: var(--text2); line-height: 1.45; }
.coachmark .tf { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; }
.coachmark .tf .step { font-size: 10.5px; color: var(--text3); }
.coachmark .tf .dismiss { font-size: 11.5px; color: var(--accent2); font-weight: 600; cursor: pointer; }
/* ============================================================
48. DOCUMENT — MARKDOWN BODY
Rendered long-form content (the reading view). Drop rendered
markdown inside .markdown-body and it inherits this typography.
============================================================ */
.markdown-body { font-size: 14px; line-height: 1.6; color: var(--text); }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-weight: 600; color: var(--text); line-height: 1.3; margin: 24px 0 12px; }
.markdown-body h1 { font-size: 22px; }
.markdown-body h2 { font-size: 18px; }
.markdown-body h3 { font-size: 16px; }
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 14px; }
.markdown-body p { margin: 0 0 12px; }
.markdown-body a { color: var(--accent2); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body ul, .markdown-body ol { margin: 0 0 12px; padding-left: 24px; }
.markdown-body li { margin: 2px 0; }
.markdown-body code { font-family: var(--font-mono); font-size: 12px; background: var(--bg3); border-radius: var(--r4); padding: 2px 6px; color: var(--text); }
.markdown-body pre { background: var(--bg3); border-radius: var(--r8); padding: 12px 14px; overflow-x: auto; margin: 0 0 12px; }
.markdown-body pre code { background: transparent; padding: 0; font-size: 12px; }
.markdown-body blockquote { margin: 0 0 12px; padding: 4px 14px; border-left: 2px solid var(--line2); color: var(--text2); }
.markdown-body table { border-collapse: collapse; margin: 0 0 16px; font-size: 13px; width: 100%; }
.markdown-body th, .markdown-body td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.markdown-body th { background: var(--bg3); font-weight: 600; }
.markdown-body img { max-width: 100%; border-radius: var(--r8); }
.markdown-body hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
/* ============================================================
49. DOCUMENT — READING LAYOUT
The chrome around a document view: a doc bar (title + slug + meta),
a scrolling reading pane with a centred measure, and a raw/source
pane variant.
============================================================ */
.doc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; min-height: 46px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.doc-title-wrap { display: flex; flex-direction: column; min-width: 0; }
.doc-title { font-size: 16px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-slug { font-family: var(--font-mono); font-size: 12px; color: var(--text2); }
.doc-meta { font-size: 12px; color: var(--text3); flex: none; }
.reading-pane { overflow-y: auto; min-height: 0; position: relative; background: var(--bg); }
.reading-content { max-width: 820px; margin: 0 auto; padding: 32px 32px 80px; }
.raw-content { margin: 0; padding: 24px 32px 80px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--text2); white-space: pre-wrap; word-break: break-word; }
/* ============================================================
50. DOCUMENT — FORMAL "PAPER"
A printable, issued document (letter / invoice / contract):
light paper surface, serif body, ruled tables. Merge fields are
highlighted — .paper-fill (filled) and .paper-blank (to-complete).
Stays light in both themes (it represents a printed sheet).
============================================================ */
.paper { background: #ffffff; color: #1a1a1a; font-family: var(--font-serif); font-size: 14px; line-height: 1.6; padding: 40px 44px; border-radius: var(--r6); border: 1px solid var(--line2); }
.paper h1, .paper h2, .paper h3 { font-family: var(--font-serif); color: #111; margin: 0 0 12px; }
.paper h1 { font-size: 22px; }
.paper h2 { font-size: 17px; margin-top: 22px; }
.paper p { margin: 0 0 12px; }
.paper table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13px; }
.paper th, .paper td { border: 1px solid #d9d9d9; padding: 7px 10px; text-align: left; }
.paper th { background: #f3f3f3; font-weight: 600; }
.paper .paper-fill { background: rgba(96,165,250,0.22); border-radius: var(--r4); padding: 0 3px; }
.paper .paper-blank { background: rgba(245,166,35,0.22); border-radius: var(--r4); padding: 0 3px; color: #7a5500; }
/* ============================================================
51. FILE TREE
Folder + document tree for a nav rail. Toggle .open on folders,
.active on the current doc.
============================================================ */
.tree { display: flex; flex-direction: column; gap: 2px; }
.tree-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r6); font-size: 13px; color: var(--text2); border-left: 2px solid transparent; cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s; }
.tree-row .ti { font-size: 15px; flex: none; color: var(--text3); }
.tree-row:hover { background: var(--bg4); color: var(--text); }
.tree-row .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tree-row .count { margin-left: auto; font-size: 11px; color: var(--text3); }
.tree-row.folder .chev { font-size: 14px; color: var(--text3); transition: transform 0.15s; }
.tree-row.folder.open .chev { transform: rotate(90deg); }
.tree-row.doc.active { background: var(--bg4); color: var(--text); font-weight: 600; border-left-color: var(--accent); }
.tree-row.doc.active .ti { color: var(--accent); }
.tree-children { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; }
.tree-children.collapsed { display: none; }
/* ============================================================
52. TERMINAL / LOG
Monospace console output with semantic line colouring.
============================================================ */
.terminal { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r8); padding: 12px 14px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; overflow-x: auto; }
.term-line { white-space: pre-wrap; color: var(--text2); }
.term-line.cmd { color: var(--text); }
.term-line.cmd::before { content: "$ "; color: var(--text3); }
.term-line.ok { color: var(--green); }
.term-line.warn { color: var(--amber); }
.term-line.err { color: var(--red); }
.term-line.dim { color: var(--text3); }
/* ============================================================
53. TASK / PROGRESS LIST
A process checklist with per-row status (done / running / pending)
and an optional progress bar.
============================================================ */
.task-list { display: flex; flex-direction: column; gap: 2px; }
.task { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-size: 13px; color: var(--text); }
.task .ic { width: 18px; height: 18px; flex: none; display: inline-grid; place-items: center; font-size: 15px; color: var(--text3); }
.task.done .ic { color: var(--green); }
.task.run .ic { color: var(--amber); }
.task.pend { color: var(--text3); }
.task .grow { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: no-preference) { .task.run .ic .ti { animation: agnt-spin 0.9s linear infinite; } }
@keyframes agnt-spin { to { transform: rotate(360deg); } }
.progress { height: 5px; background: var(--bg4); border-radius: 20px; overflow: hidden; }
.progress > .fill { height: 100%; background: var(--accent); border-radius: 20px; }
/* ============================================================
54. COLOUR SWATCH PICKER
A grid of selectable colour squares (branding / settings).
============================================================ */
.swatch-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 30px; height: 30px; border-radius: var(--r6); border: 1px solid var(--line2); cursor: pointer; position: relative; transition: transform 0.1s; }
.swatch:hover { transform: scale(1.06); }
.swatch.on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
/* ============================================================
55. UPLOAD TILE
A dashed drop target for file/logo uploads, with an optional
preview state.
============================================================ */
.upload-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 110px; padding: 18px; border: 1.5px dashed var(--line2); border-radius: var(--r10); background: var(--bg3); color: var(--text3); cursor: pointer; text-align: center; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.upload-tile:hover { border-color: var(--accent); color: var(--text2); background: var(--bg4); }
.upload-tile .ti { font-size: 22px; }
.upload-tile .ut-label { font-size: 12px; }
.upload-tile.has-file { border-style: solid; }
/* ============================================================
56. NAV DRAWER (mobile off-canvas) (extends §9 Navigation)
Opt-in: give a .sidenav the .drawer class so that below 900px it
slides in from the left over a backdrop. Toggle .open on both.
============================================================ */
@media (max-width: 899px) {
.sidenav.drawer { position: fixed; top: 0; left: 0; height: 100%; width: 264px; z-index: 50; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow-pop); }
.sidenav.drawer.open { transform: translateX(0); }
.nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40; display: none; }
.nav-backdrop.open { display: block; }
}
/* ============================================================
57. FOCUS & SELECTION (v1.1.1)
Keyboard-first conventions the v1.0/1.1 components lacked.
============================================================ */
/* --- Focus-visible ring ---
Applies only to keyboard focus (:focus-visible), so it never fires on
a mouse click. Uses the --focus-ring token so every product matches.
Add more selectors here as components gain keyboard entry points. */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-destructive:focus-visible,
.btn-ghost:focus-visible,
.icon-btn:focus-visible,
.filter-pill:focus-visible,
.nav-item:focus-visible,
.card-inset:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* Inputs already border-highlight on focus (§ forms). Give them the ring
too, on keyboard focus only, without disturbing the mouse-focus look. */
.input:focus-visible,
.select:focus-visible {
box-shadow: var(--focus-ring);
}
/* --- Multi-select pattern (grids, file browsers, tables of cards) ---
Two INDEPENDENT axes that .active (single-selection) can't express:
.is-focused the keyboard cursor — exactly one at a time
.is-selected membership of the selected set — zero or many
A cell can be either, both, or neither. Focus = accent border;
selection = accent2 outline (drawn inside so layout never shifts).
When both apply, the ring sits outside the focus border and both read. */
.card-inset.is-focused {
/* inset shadow, not border, so a card with no default border does
not reflow by 1px when it gains the keyboard cursor. */
box-shadow: inset 0 0 0 1px var(--accent);
}
.card-inset.is-selected {
outline: 2px solid var(--accent2);
outline-offset: -2px;
}