/*
* global.css — ivory editorial enterprise design system for the dewee customer control-plane.
* Thin aggregator; order matters. Imported once by the control-plane shell and the
* standalone auth pages. Fonts are loaded via in each page .
*
* tokens palette, type voices, rhythm, radius, shadow, dark overrides
* base reset, type scale, blueprint grid, draughtsman utilities, focus, reveal
* components buttons, cards, badges, pills, status, stat figures, ledger tables, forms
* layout shell, sidebar, nav, topbar, status rail, auth shell, responsive
*/
/*
* tokens.css — ivory editorial enterprise design tokens for the dewee customer control-plane.
* Palette, type voices, rhythm, radius, shadow. Light is default; dark overrides at the end.
* Use token names everywhere — never raw hex in components/layout.
*/
:root {
color-scheme: light;
/* ---- Surfaces & ink (warm audit-desk canvas) ---- */
--canvas: #fff9f3; /* page background (warm ivory) */
--paper: #fffdf8; /* default working surface */
--paper-2: #ffffff; /* crisp surface */
--paper-3: #f6efe6; /* warm tinted panel (.section.alt / .panel.strong) */
--hairline: #e3d8cb; /* divider / card border */
--hairline-strong: #cdbfac; /* emphasized / dashed rules */
--ink: #0b1426; /* primary text + dark chrome */
--ink-muted: #344256; /* body text */
--ink-soft: #6a7283; /* captions, tertiary, labels */
--on-ink: #f4efe8; /* text on ink/navy chrome */
--on-ink-soft: #a9b2c4; /* muted text on ink chrome */
/* ---- Accents (use sparingly, key strokes only) ---- */
--indigo: #1f2bff; /* links, focus, active, key strokes */
--electric: #4a6bff; /* primary action fill */
--accent-ink: #2b2f8f; /* display italics (calmer than neon indigo) */
--orchid: #b66bff; /* secondary accent / permission motif (sparing) */
--verdigris: #0c8b78; /* positive proof / recommended */
--amber: #b66f17; /* attention accent — non-text uses only (dots, borders); see --amber-ink for text */
--amber-ink: #8a5310; /* accessible warning text on --warn-fill: 5.72:1 AA. Warning TEXT uses --amber-ink; warning ACCENTS use --amber. */
--danger: #b42318; /* failure */
/* ---- Soft status fills (paper-tinted, semantic) ---- */
--good-fill: #eaf6f1;
--good-line: #b6ddcd;
--warn-fill: #fdf3da;
--warn-line: #e7cd8c;
--danger-fill: #fdeeec;
--danger-line: #f0b8b1;
--info-fill: #eef0ff;
--info-line: #c7ccff;
/* Blueprint paper grid */
--grid-line: rgba(31, 43, 255, 0.05);
--grid-size: 34px;
/* Focus ring */
--focus: var(--indigo);
/* ---- Type voices ---- */
--font-serif: "Spectral", Georgia, "Times New Roman", serif; /* display: h1–h4, lede, stat numbers */
--font-body: "Be Vietnam Pro", "Segoe UI", ui-sans-serif, system-ui, sans-serif; /* body + UI */
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* labels, table headers, captions */
/* ---- Rhythm (space scale) ---- */
--space-1: 4px;
--space-2: 6px;
--space-3: 8px;
--space-4: 10px;
--space-5: 14px;
--space-6: 18px;
--space-7: 24px;
--space-8: 30px;
--space-9: 40px;
/* ---- Radius ---- */
--radius-sm: 6px;
--radius: 8px;
--radius-pill: 999px;
/* ---- Shadow (quiet, warm) ---- */
--shadow-sm: 0 1px 2px rgba(11, 20, 38, 0.05);
--shadow: 0 6px 20px rgba(11, 20, 38, 0.07);
--shadow-dark: 0 18px 50px rgba(3, 6, 16, 0.35);
/* Motion */
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
--dur: 0.18s;
}
/* ---- Dark theme overrides (opt-in via html[data-theme="dark"]) ---- */
html[data-theme="dark"] {
color-scheme: dark;
--canvas: #0d121e;
--paper: #121a29;
--paper-2: #16202f;
--paper-3: #182234;
--hairline: #283549;
--hairline-strong: #3a4a63;
--ink: #f4efe8;
--ink-muted: #c6cedd;
--ink-soft: #8c97ad;
--on-ink: #f4efe8;
--on-ink-soft: #a9b2c4;
--indigo: #b7c2ff;
--electric: #8eafff;
--accent-ink: #aeb6ff;
--orchid: #d6a8ff;
--verdigris: #5cc7b1;
--amber: #e2a44d;
--amber-ink: #e2a44d; /* dark --warn-fill already 6.59:1 AA-pass; reuse amber, no darkening needed */
--danger: #f08b80;
--good-fill: #12302a;
--good-line: #1f5347;
--warn-fill: #33290f;
--warn-line: #5e4c1e;
--danger-fill: #3a1d1a;
--danger-line: #6e3029;
--info-fill: #1a2140;
--info-line: #303c73;
--grid-line: rgba(183, 194, 255, 0.06);
--focus: var(--indigo);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}
/*
* base.css — reset, type scale, blueprint grid, draughtsman utilities, focus, reveal motion.
* Depends on tokens.css.
*/
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100dvh;
min-width: 320px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--ink-muted);
background-color: var(--canvas);
/* Blueprint paper grid: faint indigo rules on the warm canvas */
background-image:
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
linear-gradient(0deg, var(--grid-line) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---- Display type: technical serif, compact for dashboard density ---- */
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 600;
color: var(--ink);
letter-spacing: -0.012em;
line-height: 1.12;
text-wrap: balance;
margin: 0 0 var(--space-3);
}
h1 { font-size: clamp(26px, 1.4rem + 1.2vw, 34px); }
h2 { font-size: clamp(20px, 1.2rem + 0.6vw, 26px); }
h3 { font-size: clamp(16px, 1rem + 0.3vw, 19px); }
h4 { font-size: 16px; }
p { margin: 0 0 var(--space-5); color: var(--ink-muted); }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 650; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
small { font-size: 13px; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-6) 0; }
/* em.accent — one emphasized phrase per heading: italic deep-indigo display accent */
em.accent {
font-family: var(--font-serif);
font-style: italic;
color: var(--accent-ink);
border-bottom: 1px solid color-mix(in srgb, var(--accent-ink) 35%, transparent);
}
/* ---- Focus: visible indigo ring on every interactive element ---- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ====================================================================
Draughtsman / blueprint language — quiet technical structure
==================================================================== */
/* Eyebrow + figure labels + nav/table micro-labels: mono uppercase tracked */
.eyebrow {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-soft);
}
.eyebrow.accent { color: var(--indigo); }
.fig-label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--indigo);
}
.fig-label::before {
content: "";
width: 14px;
height: 1px;
background: var(--indigo);
opacity: 0.6;
}
/* 1px dashed rule under section headers */
.dashed-rule {
height: 0;
border: 0;
border-top: 1px dashed var(--hairline-strong);
margin: var(--space-4) 0 0;
}
/* Corner-bracket marks framing a figure/card */
.tick-corner { position: relative; }
.tick-corner::before,
.tick-corner::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border: 1px solid var(--hairline-strong);
pointer-events: none;
}
.tick-corner::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.tick-corner::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* Section head: eyebrow/fig-label + heading + dashed rule */
.section-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
/* ---- Reveal motion: a gentle fade-up that runs once on load and ALWAYS ends
visible. Uses a CSS animation (not scroll-gated) so no content is ever hidden
waiting for an IntersectionObserver — critical for dense dashboards where the
user expects to see everything immediately. `both` fill keeps the end state. ---- */
.reveal { animation: reveal-fade-up 0.5s var(--ease) both; }
.reveal.is-in { animation: none; opacity: 1; transform: none; }
@keyframes reveal-fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.reveal { animation: none; opacity: 1; transform: none; }
}
/* Utility helpers reused across pages */
.stack { display: grid; gap: var(--space-6); }
.muted { color: var(--ink-soft); }
.mono { font-family: var(--font-mono); }
.overflow, .overflow-x-auto { overflow-x: auto; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/*
* components.css — buttons, cards/panels, badges, pills, status, stat figures,
* ledger tables, forms, content grids. Maps the existing semantic class vocabulary
* to the ivory editorial tokens. Class names are kept stable (vanilla-JS page-clients
* generate markup against them) — only their styling changes.
*/
/* ---------- Content grids ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.lane-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
/* ---------- Buttons ---------- */
.button,
.btn,
button.primary,
button.secondary,
button.ghost,
button.danger,
button.subtle,
button.dark,
button.tab,
button.icon-button,
button.link-cell,
button.tab-button,
a.button,
a.btn {
--btn-bg: var(--electric);
--btn-fg: #ffffff;
--btn-line: transparent;
min-height: 44px;
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
border: 1px solid var(--btn-line);
border-radius: var(--radius-pill);
background: var(--btn-bg);
color: var(--btn-fg);
padding: 10px 18px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.005em;
line-height: 1;
cursor: pointer;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.button:hover,
.btn:hover,
button.primary:hover,
button.secondary:hover,
button.ghost:hover,
button.danger:hover,
button.subtle:hover,
button.dark:hover,
button.tab:hover,
button.icon-button:hover,
button.link-cell:hover,
button.tab-button:hover,
a.button:hover,
a.btn:hover {
background: var(--indigo);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
text-decoration: none;
}
.button:active,
.btn:active,
button.primary:active,
button.secondary:active,
button.ghost:active,
button.danger:active,
button.subtle:active,
button.dark:active,
button.tab:active,
button.icon-button:active,
button.link-cell:active,
button.tab-button:active { transform: translateY(0); }
.button[disabled],
.btn[disabled],
.button[aria-disabled="true"],
.btn[aria-disabled="true"],
button.primary[disabled],
button.secondary[disabled],
button.ghost[disabled],
button.danger[disabled],
button.subtle[disabled],
button.dark[disabled],
button.tab[disabled],
button.icon-button[disabled],
button.link-cell[disabled],
button.tab-button[disabled] {
cursor: not-allowed;
opacity: 0.5;
transform: none;
box-shadow: none;
}
/* Ghost / secondary: ink outline → ink fill */
.button.primary,
.btn-primary,
button.primary {
--btn-bg: var(--electric);
--btn-fg: #ffffff;
--btn-line: transparent;
}
.button.primary:hover,
.btn-primary:hover,
button.primary:hover {
--btn-bg: var(--indigo);
}
.button.secondary,
.btn-secondary,
button.secondary {
--btn-bg: transparent;
--btn-fg: var(--ink);
--btn-line: var(--hairline-strong);
}
.button.secondary:hover,
.btn-secondary:hover,
button.secondary:hover {
--btn-bg: var(--ink);
--btn-fg: var(--on-ink);
--btn-line: var(--ink);
}
.button.ghost,
.btn-ghost,
button.ghost,
button.subtle {
--btn-bg: transparent;
--btn-fg: var(--ink-muted);
--btn-line: var(--hairline);
}
.button.ghost:hover,
.btn-ghost:hover,
button.ghost:hover,
button.subtle:hover {
--btn-bg: var(--paper-3);
--btn-fg: var(--ink);
--btn-line: var(--hairline-strong);
}
.button.danger,
.btn-danger,
button.danger {
--btn-bg: var(--danger-fill);
--btn-fg: var(--danger);
--btn-line: var(--danger-line);
}
.button.danger:hover,
.btn-danger:hover,
button.danger:hover {
--btn-bg: var(--danger);
--btn-fg: #ffffff;
--btn-line: var(--danger);
}
.button.small,
.btn-small,
button.link-cell {
min-height: 34px;
padding: 7px 12px;
font-size: 13px;
}
.icon-button {
min-width: 44px;
width: 44px;
padding: 0;
border-radius: var(--radius-sm);
}
.tab,
.tab-button {
--btn-bg: var(--paper-2);
--btn-fg: var(--ink-muted);
--btn-line: var(--hairline);
border-radius: var(--radius-sm);
}
.tab.active,
.tab-button[data-state="active"],
.tab-button[aria-selected="true"] {
--btn-bg: var(--ink);
--btn-fg: var(--on-ink);
--btn-line: var(--ink);
}
.tab.active:hover,
.tab-button[data-state="active"]:hover,
.tab-button[aria-selected="true"]:hover {
--btn-bg: var(--ink);
--btn-fg: var(--on-ink);
--btn-line: var(--ink);
}
/* Solid ink button */
.button.dark,
.btn-dark,
button.dark {
--btn-bg: var(--ink);
--btn-fg: var(--on-ink);
--btn-line: var(--ink);
}
.button.dark:hover,
.btn-dark:hover,
button.dark:hover { --btn-bg: #16213a; }
/* Inline link with widening arrow gap */
.link-arrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: 600;
color: var(--indigo);
}
.link-arrow::after { content: "→"; transition: margin-left var(--dur) var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { margin-left: var(--space-1); }
.actions, .toolbar { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.toolbar { justify-content: space-between; }
.toolbar h1, .toolbar h2, .toolbar h3 { margin: 0; }
/* ---------- Panels / cards ---------- */
.panel, .card {
position: relative;
min-width: 0;
background: var(--paper);
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: var(--space-7);
box-shadow: var(--shadow-sm);
}
h1, h2, h3, h4 { overflow-wrap: break-word; }
.panel > :last-child, .card > :last-child { margin-bottom: 0; }
.panel.strong, .card.strong { background: var(--paper-3); box-shadow: none; }
.panel h2, .panel h3, .card h2, .card h3 { margin-top: 0; }
/* Interactive card: hover lift + indigo edge rule */
.card.interactive, a.lane-card, .panel.interactive {
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.card.interactive:hover, a.lane-card:hover, .panel.interactive:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
border-color: var(--indigo);
text-decoration: none;
}
/* Dark editorial panel (security band, hero, final CTA) */
.panel-dark, .panel.hero-panel {
background: var(--ink);
color: var(--on-ink);
border: 0;
border-radius: var(--radius);
padding: var(--space-8);
box-shadow: var(--shadow-dark);
overflow: hidden;
}
.panel-dark h1, .panel-dark h2, .panel-dark h3,
.hero-panel h1, .hero-panel h2, .hero-panel h3 { color: #fffdf8; }
.panel-dark p, .hero-panel p { color: var(--on-ink-soft); }
.panel-dark .eyebrow, .hero-panel .eyebrow { color: #cfd6ff; }
.hero-panel h2 { font-size: clamp(24px, 1.4rem + 1.6vw, 36px); max-width: min(40ch, 100%); }
/* secondary buttons read on dark */
.panel-dark .button.secondary, .hero-panel .button.secondary {
--btn-fg: #ffffff;
--btn-line: rgba(255, 255, 255, 0.7);
}
.panel-dark .button.secondary:hover, .hero-panel .button.secondary:hover {
--btn-bg: rgba(255, 255, 255, 0.12);
--btn-fg: #ffffff;
--btn-line: rgba(255, 255, 255, 0.85);
}
/* Warm tinted band to break vertical monotony */
.section.alt {
background: var(--paper-3);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
/* ---------- Stat / metric figures (audit-desk numbers) ---------- */
.status-card {
display: grid;
align-content: start;
gap: var(--space-2);
min-height: 116px;
padding: var(--space-5) var(--space-6);
background: var(--paper-2);
border: 1px solid var(--hairline);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.status-card strong {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(22px, 1.3rem + 0.6vw, 28px);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.status-card p { margin: 0; font-size: 14px; color: var(--ink-soft); }
/* Proof figures — column count is fluid (auto-fit) so bands reflow instead of
overprinting at tablet widths; each cell owns its own hairline border since
a shared border-left/nth-child divider scheme can't track a dynamic column
count (see layout.css for the historical fixed-column reset it replaces). */
.stat-band {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--hairline);
overflow: hidden;
}
.stat-band > * {
min-width: 0;
padding: var(--space-6);
background: var(--paper);
display: grid;
gap: var(--space-1);
}
.stat-band strong, .status-card strong { overflow-wrap: anywhere; }
.stat-band strong {
font-family: var(--font-serif);
font-size: clamp(20px, 1.4rem + 0.8vw, 32px);
color: var(--ink);
font-variant-numeric: tabular-nums;
}
/* ---------- Badges & pills ---------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--verdigris);
background: var(--good-fill);
border: 1px solid var(--good-line);
border-radius: var(--radius-pill);
padding: 4px 10px;
}
.pill {
display: inline-flex;
align-items: center;
min-height: 26px;
border-radius: var(--radius-pill);
border: 1px solid var(--hairline);
background: var(--paper-2);
padding: 3px 10px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--ink-muted);
}
.pill.good { border-color: var(--good-line); color: var(--verdigris); background: var(--good-fill); }
.pill.warn { border-color: var(--warn-line); color: var(--amber-ink); background: var(--warn-fill); }
.pill.danger { border-color: var(--danger-line); color: var(--danger); background: var(--danger-fill); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* ---------- Status banners ---------- */
.status, .status-banner {
border: 1px solid var(--good-line);
border-radius: var(--radius);
background: var(--good-fill);
color: #1f5a48;
padding: var(--space-4) var(--space-5);
font-size: 14px;
}
.status:empty, .status-banner:empty { display: none; }
.status[data-tone="error"], .status-banner[data-tone="error"] {
border-color: var(--danger-line); background: var(--danger-fill); color: #7d2a19;
}
.status[data-tone="warn"], .status-banner[data-tone="warn"] {
border-color: var(--warn-line); background: var(--warn-fill); color: #6e4a12;
}
.status[data-tone="good"], .status-banner[data-tone="good"] {
border-color: var(--good-line); background: var(--good-fill); color: #1f5a48;
}
/* ---------- Resource list (divided paper strips) ---------- */
ul.resource-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
ul.resource-list li {
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: var(--space-5);
background: var(--paper-2);
display: grid;
gap: var(--space-2);
}
ul.resource-list li strong { font-size: 15px; }
ul.resource-list li p { margin: 0; font-size: 14px; color: var(--ink-soft); }
/* ---------- Definition lists ---------- */
dl { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-4) var(--space-6); margin: 0; }
dt { color: var(--ink-soft); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; align-self: center; }
dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
dd code { word-break: break-all; }
/* ---------- Forms ---------- */
.form,
.ccp-form,
.form-stack,
.agent-form,
.channel-editor,
.skill-editor,
.dialog-shell,
.dialog-panel,
.setting-field,
.inline-form,
.inline-delete,
.filter-row,
.filters,
.trace-filters,
.skill-filters,
.channel-filters,
.upload-form,
form[data-form] {
display: grid;
gap: var(--space-5);
}
.form.constrained,
.ccp-form.constrained,
.standard-form {
max-width: 680px;
}
.modal-form,
.ccp-modal-form {
width: 100%;
max-width: none;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
}
.form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
}
.form-status {
color: var(--ink-soft);
font-size: 14px;
}
label { display: grid; gap: var(--space-2); color: var(--ink); font-weight: 600; font-size: 14px; }
input, select, textarea {
width: 100%;
min-height: 44px;
border: 1px solid var(--hairline-strong);
border-radius: var(--radius-sm);
background: var(--paper-2);
color: var(--ink);
padding: 10px 12px;
font-family: var(--font-body);
font-size: 16px; /* never below 16px — prevents mobile zoom */
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus, select:focus, textarea:focus {
border-color: var(--indigo);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 16%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--ink-soft); }
textarea { resize: vertical; min-height: 88px; }
select[multiple] { min-height: 88px; padding: 6px; }
.field-hint,
.field-error {
font-size: 13px;
}
.field-hint { color: var(--ink-soft); }
.field-error { color: var(--danger); }
.ccp-dialog-overlay {
position: fixed;
inset: 0;
z-index: 70;
display: grid;
place-items: center;
padding: max(var(--space-7), env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-right))
max(var(--space-7), env(safe-area-inset-bottom)) max(var(--space-5), env(safe-area-inset-left));
background: color-mix(in srgb, var(--ink) 46%, transparent);
}
.ccp-dialog-panel {
width: min(100%, 760px);
max-height: min(86dvh, 840px);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
border: 1px solid var(--hairline-strong);
border-radius: var(--radius);
background: var(--paper);
box-shadow: var(--shadow-dark);
}
.ccp-dialog-header,
.ccp-dialog-footer {
position: sticky;
z-index: 1;
background: var(--paper);
}
.ccp-dialog-header {
top: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-5);
padding: var(--space-6);
border-bottom: 1px solid var(--hairline);
}
.ccp-dialog-body {
min-width: 0;
overflow: auto;
overscroll-behavior: contain;
padding: var(--space-6);
}
.ccp-dialog-footer {
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-5) var(--space-6);
border-top: 1px solid var(--hairline);
}
.ccp-tabs {
display: grid;
gap: var(--space-5);
}
.ccp-tabs-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.ccp-tabs-panel {
min-width: 0;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--paper-2);
padding: var(--space-5);
}
.ccp-key-value-editor {
display: grid;
gap: var(--space-3);
}
.ccp-key-value-row {
display: grid;
grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.4fr) auto;
gap: var(--space-3);
align-items: start;
}
.ccp-secret-field {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-3);
align-items: end;
}
.ccp-picker-option-list,
.ccp-tool-list {
display: grid;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.ccp-picker-option,
.ccp-tool-option {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
align-items: start;
padding: var(--space-3);
border: 1px solid var(--hairline);
border-radius: var(--radius-sm);
background: var(--paper);
}
.ccp-picker-option input,
.ccp-tool-option input {
width: 18px;
min-height: 18px;
margin-top: 2px;
}
.ccp-status-panel {
border: 1px solid var(--info-line);
border-radius: var(--radius);
background: var(--info-fill);
padding: var(--space-4);
}
.ccp-status-panel[data-tone="success"] {
border-color: var(--good-line);
background: var(--good-fill);
}
.ccp-status-panel[data-tone="warning"] {
border-color: var(--warn-line);
background: var(--warn-fill);
}
.ccp-status-panel[data-tone="error"] {
border-color: var(--danger-line);
background: var(--danger-fill);
}
@media (max-width: 720px) {
.form-grid,
.ccp-key-value-row {
grid-template-columns: 1fr;
}
.ccp-dialog-overlay {
align-items: stretch;
padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right))
max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
}
.ccp-dialog-panel {
max-height: calc(100dvh - var(--space-6));
}
.ccp-secret-field {
grid-template-columns: 1fr;
}
table {
min-width: 640px;
}
}
/* Project convention: inputs carry `text-base md:text-sm` (16px mobile → 14px desktop).
No Tailwind in this app, so the utilities are defined here. 16px floor prevents iOS zoom. */
.text-base { font-size: 16px; }
@media (min-width: 768px) { .md\:text-sm { font-size: 14px; } }
/* ---------- Ledger table ---------- */
.ledger-wrap, .overflow { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
thead th {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-soft);
text-align: left;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--hairline-strong);
white-space: nowrap;
}
tbody td {
padding: var(--space-4);
border-bottom: 1px solid var(--hairline);
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--dur) var(--ease); }
tbody tr:hover { background: color-mix(in srgb, var(--paper-3) 60%, transparent); }
td.actions { gap: var(--space-3); }
/* ---------- Code ---------- */
pre {
overflow-x: auto;
background: var(--ink);
color: #e7ecff;
padding: var(--space-5);
border-radius: var(--radius);
border: 1px solid var(--hairline);
}
code, pre { font-family: var(--font-mono); font-size: 13px; }
:not(pre) > code {
background: var(--paper-3);
border: 1px solid var(--hairline);
border-radius: var(--radius-sm);
padding: 1px 6px;
color: var(--accent-ink);
}
/* ---------- Permission matrix (roles page) ---------- */
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.permission-row {
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--paper-2);
padding: var(--space-4);
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-2) var(--space-4);
align-items: start;
}
.permission-row input { width: 18px; min-height: 18px; margin-top: 2px; accent-color: var(--indigo); }
.permission-row code { grid-column: 2; color: var(--ink-soft); background: none; border: 0; padding: 0; }
/* ---------- Overflow menu (ui/menu.tsx) ---------- */
.ui-menu { display: inline-flex; }
.ui-menu-trigger { min-width: 44px; padding: 0 var(--space-3); }
.ui-menu-panel {
display: grid;
gap: 2px;
min-width: 160px;
padding: var(--space-2);
background: var(--paper);
border: 1px solid var(--hairline-strong);
border-radius: var(--radius);
box-shadow: var(--shadow-md, var(--shadow-sm));
z-index: 60;
}
.ui-menu-item {
display: flex;
align-items: center;
min-height: 40px;
padding: 0 var(--space-3);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink);
font-family: var(--font-body);
font-size: 14px;
text-align: left;
cursor: pointer;
}
.ui-menu-item:hover { background: var(--paper-3); }
.ui-menu-item[disabled] { cursor: not-allowed; opacity: 0.5; }
.ui-menu-item-danger { color: var(--danger); }
.ui-menu-item-danger:hover { background: var(--danger-fill); }
/* ---------- Emoji picker (agents/emoji-picker.tsx) ---------- */
.emoji-picker-field {
position: relative;
display: grid;
gap: 6px;
font-size: 13px;
font-weight: 700;
}
.emoji-picker-trigger {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 40px;
padding: 0 var(--space-3);
border: 1px solid var(--hairline-strong);
border-radius: var(--radius);
background: var(--paper);
font-size: 20px;
cursor: pointer;
width: fit-content;
}
.emoji-picker-trigger:hover { background: var(--paper-3); }
.emoji-picker-popover {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 60;
min-width: 220px;
padding: var(--space-2);
background: var(--paper);
border: 1px solid var(--hairline-strong);
border-radius: var(--radius);
box-shadow: var(--shadow-md, var(--shadow-sm));
}
.emoji-picker-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 4px;
}
.emoji-picker-clear {
grid-column: 1 / -1;
min-height: 32px;
border: 1px solid var(--hairline-strong);
border-radius: var(--radius-sm);
background: transparent;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.emoji-picker-clear:hover { background: var(--paper-3); }
.emoji-picker-option {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
min-height: 36px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
font-size: 18px;
cursor: pointer;
}
.emoji-picker-option:hover { background: var(--paper-3); }
.emoji-picker-option[data-selected="true"] {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 16%, transparent);
}
@media (max-width: 720px) { .permission-grid { grid-template-columns: 1fr; } }
/*
* layout.css — control-plane shell scaffolding: sidebar, nav, topbar, content frame,
* status rail, and the standalone auth shell. Depends on tokens.css.
*/
.layout {
min-height: 100dvh;
display: grid;
grid-template-columns: 296px minmax(0, 1fr);
}
.layout[data-sidebar="hidden"] {
grid-template-columns: minmax(0, 1fr);
}
/* ---------- Sidebar (deep ink chrome over the ivory canvas) ---------- */
.sidebar {
position: sticky;
top: 0;
align-self: start;
height: 100dvh;
background: var(--ink);
color: var(--on-ink);
border-right: 1px solid rgba(255, 255, 255, 0.08);
padding: var(--space-7) var(--space-6);
padding-left: max(var(--space-6), env(safe-area-inset-left));
display: flex;
flex-direction: column;
gap: var(--space-7);
overflow: hidden;
/* faint blueprint grid inside the chrome */
background-image:
linear-gradient(90deg, rgba(183, 194, 255, 0.04) 1px, transparent 1px),
linear-gradient(0deg, rgba(183, 194, 255, 0.04) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
}
.brand { display: flex; align-items: center; gap: var(--space-4); min-height: 44px; }
.brand:hover { text-decoration: none; }
/* dewee blob mark — the real icon asset (transparent PNG) */
.brand .mark {
width: 38px;
height: 38px;
object-fit: contain;
flex: none;
filter: drop-shadow(0 2px 7px rgba(74, 107, 255, 0.4));
}
.brand strong {
display: block;
font-family: var(--font-serif);
font-size: 19px;
font-weight: 600;
color: #fffdf8;
letter-spacing: -0.01em;
}
.brand > span > span {
display: block;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--on-ink-soft);
margin-top: 2px;
}
/* ---------- Navigation ---------- */
nav { display: grid; gap: var(--space-3); }
.sidebar-nav {
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 2px;
}
.nav-pinned { display: grid; gap: var(--space-1); padding-bottom: var(--space-2); }
.nav-setup-hint {
margin: var(--space-2) 0 var(--space-4);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-sm);
padding: var(--space-3);
color: var(--on-ink-soft);
font-size: 12px;
line-height: 1.45;
}
.nav-search-button {
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.06);
color: var(--on-ink);
padding: 9px var(--space-4);
font: inherit;
cursor: pointer;
}
.nav-search-button:hover { background: rgba(255, 255, 255, 0.1); }
.nav-search-button kbd {
font-family: var(--font-mono);
font-size: 10px;
color: var(--on-ink-soft);
}
/* each capability group is a collapsible section */
.nav-group { display: block; }
.nav-group-title {
list-style: none;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
min-height: 34px;
padding: var(--space-1) var(--space-4);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--on-ink-soft);
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-group-title::-webkit-details-marker { display: none; }
.nav-group-title::marker { content: ""; }
.nav-group-title:hover { background: rgba(255, 255, 255, 0.05); color: #fffdf8; }
.nav-caret { flex: none; opacity: 0.65; transition: transform var(--dur) var(--ease); }
.nav-group[open] > .nav-group-title .nav-caret { transform: rotate(180deg); }
.nav-group-items { display: grid; gap: var(--space-1); padding-top: var(--space-1); }
.nav-link {
position: relative;
min-height: 44px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
border-radius: var(--radius-sm);
padding: 9px var(--space-4);
color: #d7dcea;
font-size: 14px;
font-weight: 500;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-link:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; color: #fffdf8; }
.nav-link[data-active="true"] {
background: color-mix(in srgb, var(--orchid) 18%, transparent);
color: #fffdf8;
font-weight: 600;
}
/* indigo key rule on the active item */
.nav-link[data-active="true"]::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 2px;
border-radius: 2px;
background: var(--electric);
}
.nav-link[data-disabled="true"] { color: #6a7387; pointer-events: none; }
.sidebar-footer {
margin-top: auto;
display: grid;
gap: var(--space-3);
}
.account-link {
min-height: 44px;
display: flex;
align-items: center;
gap: var(--space-3);
border-radius: var(--radius-sm);
color: var(--on-ink);
padding: 8px var(--space-3);
}
.account-link:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.account-link[data-active="true"] { background: rgba(255, 255, 255, 0.1); color: #fffdf8; }
.account-avatar {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
background: color-mix(in srgb, var(--electric) 24%, transparent);
color: #fffdf8;
font-family: var(--font-mono);
font-size: 12px;
}
.signout { margin: 0; }
.signout button { width: 100%; --btn-fg: var(--on-ink); --btn-line: rgba(255, 255, 255, 0.18); }
.signout button:hover { --btn-bg: rgba(255, 255, 255, 0.1); --btn-fg: #fff; --btn-line: rgba(255, 255, 255, 0.4); }
/* ---------- Command palette ---------- */
.nav-command-palette[hidden] { display: none; }
.nav-command-palette {
position: fixed;
inset: 0;
z-index: 80;
display: grid;
place-items: start center;
padding: max(9dvh, var(--space-7)) var(--space-6);
}
.nav-command-backdrop {
position: absolute;
inset: 0;
background: rgba(11, 20, 38, 0.54);
backdrop-filter: blur(4px);
}
.nav-command-dialog {
position: relative;
width: min(620px, 100%);
display: grid;
gap: var(--space-4);
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--paper);
box-shadow: var(--shadow-dark);
padding: var(--space-5);
}
.nav-command-header {
display: flex;
align-items: start;
justify-content: space-between;
gap: var(--space-4);
}
.nav-command-header h2 { margin: 0; font-size: 22px; }
.icon-button {
min-width: 44px;
min-height: 44px;
border: 1px solid var(--hairline);
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink-soft);
cursor: pointer;
}
.nav-command-input {
width: 100%;
min-height: 44px;
}
.nav-command-results { display: grid; gap: var(--space-2); max-height: min(52dvh, 460px); overflow-y: auto; }
.nav-command-item {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink);
padding: 9px var(--space-3);
text-align: left;
cursor: pointer;
}
.nav-command-item:hover,
.nav-command-item[data-selected="true"] {
border-color: var(--hairline);
background: color-mix(in srgb, var(--electric) 8%, transparent);
}
.nav-command-item small { color: var(--ink-soft); }
.nav-command-empty { margin: 0; color: var(--ink-soft); }
/* ---------- Content + topbar ---------- */
.content { min-width: 0; overflow-x: clip; display: grid; grid-template-rows: auto 1fr; }
.topbar {
position: sticky;
top: 0;
z-index: 10;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-6);
align-items: end;
padding: var(--space-7) var(--space-8);
padding-right: max(var(--space-8), env(safe-area-inset-right));
border-bottom: 1px solid var(--hairline);
background: color-mix(in srgb, var(--paper) 88%, transparent);
backdrop-filter: blur(10px);
}
.topbar-head { display: grid; gap: var(--space-2); }
.topbar h1 { margin: 0; }
.topbar p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; max-width: 80ch; }
main {
width: min(1600px, calc(100% - 2 * var(--space-9)));
margin: 0 auto;
padding: var(--space-7) 0 var(--space-9);
}
/* ---------- Workspace content frame + status rail ---------- */
.workspace-frame {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
gap: var(--space-6);
align-items: start;
}
.workspace-main { min-width: 0; display: grid; gap: var(--space-6); }
.status-rail {
position: sticky;
top: calc(96px + var(--space-6));
display: grid;
gap: var(--space-4);
border: 1px solid var(--hairline);
background: var(--paper);
border-radius: var(--radius);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
}
.status-rail div { border-bottom: 1px solid var(--hairline); padding-bottom: var(--space-4); }
.status-rail div:last-child { border-bottom: 0; padding-bottom: 0; }
.status-rail strong { display: block; margin-top: var(--space-1); font-size: 15px; color: var(--ink); }
/* ---------- Standalone auth / brand-moment shell ---------- */
.auth-shell {
min-height: 100dvh;
display: grid;
place-items: center;
padding: var(--space-7);
padding-top: max(var(--space-7), env(safe-area-inset-top));
}
.auth-card {
width: min(560px, 100%);
display: grid;
gap: var(--space-6);
}
.auth-card .panel { padding: var(--space-8); }
.auth-card h1 { font-size: clamp(30px, 1.6rem + 2vw, 44px); }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.layout { grid-template-columns: 1fr; }
.sidebar { position: static; height: auto; max-height: none; flex-direction: column; overflow: visible; }
.sidebar-nav { max-height: 52dvh; }
nav { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.workspace-frame { grid-template-columns: 1fr; }
.status-rail { position: static; top: auto; }
.lane-grid, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.topbar { grid-template-columns: 1fr; padding: var(--space-6) var(--space-6); align-items: start; }
main { width: calc(100% - 2 * var(--space-6)); padding-top: var(--space-6); }
.grid, .grid-3, .lane-grid { grid-template-columns: 1fr; }
nav { grid-template-columns: 1fr; }
.nav-command-palette { place-items: stretch; padding: 0; }
.nav-command-dialog {
min-height: 100dvh;
border-radius: 0;
padding: max(var(--space-6), env(safe-area-inset-top)) var(--space-6) max(var(--space-6), env(safe-area-inset-bottom));
}
dl { grid-template-columns: 1fr; gap: var(--space-1) 0; }
dt { margin-top: var(--space-3); }
}