/* ─────────────────────────────────────────────
 Liveform - Design System
 ───────────────────────────────────────────── */

/* Fonts: load via <link> in each HTML head (before this file) so requests run in parallel. Avoid @import blocking. */

:root {
 /* Surfaces - aligned with marketing (index) */
 --bg: #F5F4EF;
 --surface: #FAFAF7;
 --surface-2: #F0EFEA;
 --surface-3: #E6E5E0;

 /* Ink - deep teal */
 --ink: #002726;
 --ink-2: rgba(0, 39, 38, 0.78);
 --muted: rgba(0, 39, 38, 0.52);
 --subtle: rgba(0, 39, 38, 0.38);

 /* Borders */
 --border: rgba(0, 39, 38, 0.10);
 --border-2: rgba(0, 39, 38, 0.16);

 /* Brand accent - primary chrome (dark) + mint highlights */
 --mint: #98FBCB;
 --mint-15: rgba(152, 251, 203, 0.15);
 --accent: #003d3b;
 --accent-hover: #005a56;
 --accent-dim: rgba(152, 251, 203, 0.22);
 --accent-mid: rgba(0, 61, 59, 0.14);

 /*
 * Semantic RAG palette (enterprise)
 * Muted reds / olives / teal-greens so status reads clearly without fighting
 * the warm cream surfaces (#F5F4EF) or deep teal ink (#002726).
 */
 --red: #7A3F44;
 --red-bg: #F1EAEA;
 --red-border: rgba(122, 63, 68, 0.32);
 --red-muted: #955A5E;

 --amber: #6C5F36;
 --amber-bg: #F4F1E8;
 --amber-border: rgba(108, 95, 54, 0.32);
 --amber-muted: #857445;

 --green: #2E5E52;
 --green-bg: #E8F0ED;
 --green-border: rgba(46, 94, 82, 0.32);
 --green-muted: #4A7D6F;

 /* Typography */
 --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
 --font-display: 'Inter', system-ui, sans-serif;
 --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;

 /* Radii - product UI uses square corners */
 --r-sm: 0;
 --r-md: 0;
 --r-lg: 0;
 --r-xl: 0;
 --r-full: 0;

 /* Control heights - buttons, selects, compact toolbar fields */
 --ctrl-h: 38px;
 --ctrl-h-sm: 34px;

 /* Shadows - refined, Interfere-inspired soft depth */
 --shadow-sm: 0 1px 2px rgba(0, 39, 38, 0.04);
 --shadow-md: 0 4px 20px rgba(0, 39, 38, 0.06);
 --shadow-lg: 0 12px 40px rgba(0, 39, 38, 0.08);
 --shadow-xl: 0 24px 80px rgba(0, 39, 38, 0.10);
}

/* Dark mode for alt.html embed only */
html.embed-alt {
 --bg: #0B1215;
 --surface: #141A1D;
 --surface-2: #1A2226;
 --surface-3: #222B30;
 --ink: rgb(237, 236, 236);
 --ink-2: rgba(237, 236, 236, 0.85);
 --muted: rgba(237, 236, 236, 0.65);
 --subtle: rgba(237, 236, 236, 0.45);
 --border: rgba(237, 236, 236, 0.12);
 --border-2: rgba(237, 236, 236, 0.18);
 --accent: #98FBCB;
 --accent-hover: #B8FDD8;
 --accent-dim: rgba(152, 251, 203, 0.2);
 --accent-mid: rgba(152, 251, 203, 0.1);
 --red-bg: rgba(250, 165, 165, 0.12);
 --amber-bg: rgba(252, 211, 77, 0.12);
 --green-bg: rgba(152, 251, 203, 0.12);
 --red: #FCA5A5;
 --amber: #FCD34D;
 --green: #98FBCB;
 --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
 --shadow-md: 0 4px 20px rgba(0,0,0,0.25);
 --shadow-lg: 0 12px 40px rgba(0,0,0,0.3);
 --shadow-xl: 0 24px 80px rgba(0,0,0,0.35);
}
html.embed-alt body,
html.embed-alt body:has(.app-shell),
html.embed-alt body:has(.onboarding-wrap) {
 background-color: var(--bg);
 background-image: radial-gradient(circle, rgba(152, 251, 203, 0.04) 1px, transparent 1px);
 background-size: 24px 24px;
 background-attachment: fixed;
 overflow: hidden;
 touch-action: none;
 pointer-events: none;
 user-select: none;
}

/* Dark mode for alt.html demo section (interactive) */
html.embed-demo {
 --bg: #0B1215;
 --surface: #141A1D;
 --surface-2: #1A2226;
 --surface-3: #222B30;
 --ink: rgb(237, 236, 236);
 --ink-2: rgba(237, 236, 236, 0.85);
 --muted: rgba(237, 236, 236, 0.65);
 --subtle: rgba(237, 236, 236, 0.45);
 --border: rgba(237, 236, 236, 0.12);
 --border-2: rgba(237, 236, 236, 0.18);
 --accent: #98FBCB;
 --accent-hover: #B8FDD8;
 --accent-dim: rgba(152, 251, 203, 0.2);
 --accent-mid: rgba(152, 251, 203, 0.1);
 --red-bg: rgba(250, 165, 165, 0.12);
 --amber-bg: rgba(252, 211, 77, 0.12);
 --green-bg: rgba(152, 251, 203, 0.12);
 --red: #FCA5A5;
 --amber: #FCD34D;
 --green: #98FBCB;
 --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
 --shadow-md: 0 4px 20px rgba(0,0,0,0.25);
 --shadow-lg: 0 12px 40px rgba(0,0,0,0.3);
 --shadow-xl: 0 24px 80px rgba(0,0,0,0.35);
}

/* Light OS: hero / demo iframes match marketing (cream surfaces, dark ink) */
@media (prefers-color-scheme: light) {
 html.embed-alt {
  --bg: #fcfcfa;
  --surface: #f5f5f3;
  --surface-2: #f0f0ee;
  --surface-3: #eaeae8;
  --ink: #161614;
  --ink-2: rgba(22, 22, 20, 0.85);
  --muted: rgba(22, 22, 20, 0.62);
  --subtle: rgba(22, 22, 20, 0.45);
  --border: rgba(0, 0, 0, 0.09);
  --border-2: rgba(0, 0, 0, 0.14);
  --accent: #003d3b;
  --accent-hover: #005a56;
  --accent-dim: rgba(0, 61, 59, 0.12);
  --accent-mid: rgba(0, 61, 59, 0.08);
  --red-bg: rgba(185, 28, 28, 0.08);
  --amber-bg: rgba(180, 83, 9, 0.08);
  --green-bg: rgba(0, 61, 59, 0.08);
  --red: #b91c1c;
  --amber: #b45309;
  --green: #0d5c4a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.07);
  --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.08);
 }
 html.embed-demo {
  --bg: #fcfcfa;
  --surface: #f5f5f3;
  --surface-2: #f0f0ee;
  --surface-3: #eaeae8;
  --ink: #161614;
  --ink-2: rgba(22, 22, 20, 0.85);
  --muted: rgba(22, 22, 20, 0.62);
  --subtle: rgba(22, 22, 20, 0.45);
  --border: rgba(0, 0, 0, 0.09);
  --border-2: rgba(0, 0, 0, 0.14);
  --accent: #003d3b;
  --accent-hover: #005a56;
  --accent-dim: rgba(0, 61, 59, 0.12);
  --accent-mid: rgba(0, 61, 59, 0.08);
  --red-bg: rgba(185, 28, 28, 0.08);
  --amber-bg: rgba(180, 83, 9, 0.08);
  --green-bg: rgba(0, 61, 59, 0.08);
  --red: #b91c1c;
  --amber: #b45309;
  --green: #0d5c4a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.07);
  --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.08);
 }
 html.embed-alt .sidebar-brand img,
 html.embed-alt .app-mobile-topnav-brand img,
 html.embed-demo .sidebar-brand img,
 html.embed-demo .app-mobile-topnav-brand img {
  filter: none;
 }
 html.embed-alt body,
 html.embed-alt body:has(.app-shell),
 html.embed-alt body:has(.onboarding-wrap) {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
 }
 html.embed-demo body,
 html.embed-demo body:has(.app-shell),
 html.embed-demo body:has(.onboarding-wrap) {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
 }
}

html.embed-demo body,
html.embed-demo body:has(.app-shell),
html.embed-demo body:has(.onboarding-wrap) {
 background-color: var(--bg);
 background-size: 24px 24px;
 background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
 html.embed-demo body,
 html.embed-demo body:has(.app-shell),
 html.embed-demo body:has(.onboarding-wrap) {
  background-image: radial-gradient(circle, rgba(152, 251, 203, 0.04) 1px, transparent 1px);
 }
}
@media (prefers-color-scheme: light) {
 html.embed-demo body,
 html.embed-demo body:has(.app-shell),
 html.embed-demo body:has(.onboarding-wrap) {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
 }
}
@media (prefers-color-scheme: dark) {
 html.embed-demo .sidebar-brand img,
 html.embed-demo .app-mobile-topnav-brand img {
  filter: brightness(0) invert(1);
 }
}
html.embed-demo .workspace-insights > .workspace-insights__panel:first-child {
 background: var(--surface-2) !important;
 border-color: var(--border) !important;
}
html.embed-demo .workspace-insights > .workspace-insights__panel:first-child .workspace-insights__cta .btn {
 background: transparent !important;
 border-color: var(--border-2) !important;
}

/* ─── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.6; overflow-x: hidden; }

::selection {
 background: var(--mint);
 color: var(--ink);
}
::-moz-selection {
 background: var(--mint);
 color: var(--ink);
}

/* App + onboarding: no rounded corners (including inline styles) */
body:has(.app-shell) *,
body:has(.app-shell) *::before,
body:has(.app-shell) *::after,
body:has(.onboarding-wrap) *,
body:has(.onboarding-wrap) *::before,
body:has(.onboarding-wrap) *::after {
 border-radius: 0 !important;
}

/* Subtle dot grid on product surfaces - matches marketing site */
html.is-marketing-embed .sidebar-brand,
html.is-marketing-embed .app-mobile-topnav-brand {
 pointer-events: none;
 cursor: default;
 opacity: 0.88;
}

@media (prefers-color-scheme: dark) {
 html.embed-alt .sidebar-brand img,
 html.embed-alt .app-mobile-topnav-brand img {
  filter: brightness(0) invert(1);
 }
}

/* Mobile header when embedded */
html.embed-demo .app-mobile-topnav,
html.embed-alt .app-mobile-topnav {
 background: var(--surface);
 border-bottom-color: var(--border);
 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
 -webkit-backdrop-filter: none;
 backdrop-filter: none;
}
@media (prefers-color-scheme: light) {
 html.embed-demo .app-mobile-topnav,
 html.embed-alt .app-mobile-topnav {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
 }
}
html.embed-demo .app-mobile-topnav-burger,
html.embed-alt .app-mobile-topnav-burger {
 color: var(--ink);
}

/* Recommended action panel: dark in embed-alt (inline uses --ink which becomes light) */
html.embed-alt .workspace-insights > .workspace-insights__panel:first-child {
 background: var(--surface-2) !important;
 border-color: var(--border) !important;
}
html.embed-alt .workspace-insights > .workspace-insights__panel:first-child .workspace-insights__cta .btn {
 background: transparent !important;
 border-color: var(--border-2) !important;
}

/* Standalone app only — marketing iframes (embed-alt / embed-demo) set their own shell background */
html:not(.embed-demo):not(.embed-alt) body:has(.app-shell),
html:not(.embed-demo):not(.embed-alt) body:has(.onboarding-wrap) {
 background-color: var(--bg);
 background-image: radial-gradient(circle, rgba(0, 39, 38, 0.04) 1px, transparent 1px);
 background-size: 24px 24px;
 background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-sans); }
input, textarea, select { font-family: var(--font-sans); }
img, svg { display: block; max-width: 100%; }

/* ─── Typography ─────────────────────────────── */
.text-xs { font-size: 11px; line-height: 1.5; }
.text-sm { font-size: 13px; line-height: 1.5; }
.text-base { font-size: 15px; line-height: 1.6; }
.text-md { font-size: 17px; line-height: 1.6; }
.text-lg { font-size: 20px; line-height: 1.5; }
.text-xl { font-size: 24px; line-height: 1.35; }
.text-2xl { font-size: 32px; line-height: 1.25; }
.text-3xl { font-size: 42px; line-height: 1.15; }
.text-4xl { font-size: 56px; line-height: 1.08; }
.text-hero { font-size: clamp(40px, 5.5vw, 72px); line-height: 1.05; letter-spacing: -0.02em; }

.font-mono { font-family: var(--font-mono); }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semi { font-weight: 600; }
.font-bold { font-weight: 700; }

.tracking-tight { letter-spacing: -0.02em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }

.color-ink { color: var(--ink); }
.color-ink2 { color: var(--ink-2); }
.color-muted { color: var(--muted); }
.color-subtle { color: var(--subtle); }
.color-accent { color: var(--accent); }

/* ─── Layout ─────────────────────────────────── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.container-sm { max-width: 720px; margin: 0 auto; padding: 0 32px; }
.container-lg { max-width: 1360px; margin: 0 auto; padding: 0 48px; }

/* ─── Buttons ────────────────────────────────── */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 10px 20px;
 min-height: var(--ctrl-h);
 border-radius: var(--r-md);
 font-size: 14px;
 font-weight: 500;
 line-height: 1;
 border: 1px solid transparent;
 transition: all 0.15s ease;
 white-space: nowrap;
 box-sizing: border-box;
}
.btn:disabled { opacity: 0.45; pointer-events: none; }

.btn-primary {
 background: var(--ink);
 color: var(--mint);
 border-color: var(--ink);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--mint); }

.btn-accent {
 background: var(--accent);
 color: var(--mint);
 border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--mint); }

.btn-ghost {
 background: transparent;
 color: var(--ink);
 border-color: var(--border-2);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-2); }

.btn-danger {
 background: var(--red-bg);
 color: var(--red);
 border-color: var(--red-border);
}
.btn-danger:hover { background: rgba(122, 63, 68, 0.12); }

.btn-sm { padding: 8px 14px; font-size: 13px; min-height: var(--ctrl-h-sm); }
.btn-lg { padding: 14px 28px; font-size: 16px; min-height: 48px; }

/* Compact icon-only (toolbars, page headers, build hero) */
.btn.btn-ghost.btn-icon-ghost {
  padding: 8px;
  min-width: 36px;
  min-height: 36px;
  gap: 0;
  justify-content: center;
  color: var(--muted);
  border-color: var(--border-2);
}
.btn.btn-ghost.btn-icon-ghost:hover:not(:disabled) {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--border-2);
}
.btn.btn-ghost.btn-icon-ghost svg {
  flex-shrink: 0;
}
.btn.btn-ghost.btn-icon-ghost.btn-icon-ghost--danger:hover:not(:disabled) {
  color: var(--red);
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.2);
}
.btn.btn-primary.btn-icon-ghost {
  padding: 8px;
  min-width: 36px;
  min-height: 36px;
  gap: 0;
  justify-content: center;
}
.btn.btn-primary.btn-icon-ghost svg {
  flex-shrink: 0;
}
.btn-xl { padding: 18px 36px; font-size: 17px; min-height: 56px; border-radius: var(--r-lg); }

/* ─── Form elements ──────────────────────────── */
.input {
 width: 100%;
 padding: 10px 14px;
 min-height: var(--ctrl-h);
 border: 1px solid rgba(0, 39, 38, 0.12);
 border-radius: var(--r-md);
 background: var(--surface);
 color: var(--ink);
 font-size: 14px;
 transition: border-color 0.18s ease, box-shadow 0.18s ease;
 outline: none;
 box-sizing: border-box;
}
.input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-dim); }
.input-sm {
 min-height: var(--ctrl-h-sm);
 padding: 8px 12px;
 font-size: 13px;
}
.input::placeholder { color: var(--subtle); }

.input-lg {
 padding: 14px 18px;
 font-size: 16px;
 border-radius: var(--r-lg);
}

.label {
 display: block;
 font-size: 13px;
 font-weight: 500;
 color: var(--ink-2);
 margin-bottom: 6px;
}

.select {
 width: 100%;
 padding: 10px 14px;
 min-height: var(--ctrl-h);
 border: 1px solid rgba(0, 39, 38, 0.12);
 border-radius: var(--r-md);
 background: var(--surface);
 color: var(--ink);
 font-size: 14px;
 appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23002726' stroke-opacity='0.45' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 12px center;
 padding-right: 36px;
 outline: none;
 transition: border-color 0.18s ease, box-shadow 0.18s ease;
 box-sizing: border-box;
}
.select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-dim); }
.select:disabled {
 opacity: 0.55;
 cursor: not-allowed;
}
.select-sm {
 min-height: var(--ctrl-h-sm);
 padding: 8px 32px 8px 12px;
 font-size: 13px;
 background-position: right 10px center;
}

.field { margin-bottom: 20px; }
.field-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* Compliance & data — tag inputs (Governance Settings + onboarding; must live in app.css) */
.tag-input-wrap {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
 min-height: var(--ctrl-h);
 padding: 6px 10px;
 border: 1px solid rgba(0, 39, 38, 0.12);
 border-radius: var(--r-md);
 background: var(--surface);
 cursor: text;
 box-sizing: border-box;
 transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tag-input-wrap:focus-within {
 border-color: var(--ink);
 box-shadow: 0 0 0 3px var(--accent-dim);
}
.tag-input-wrap--disabled {
 opacity: 0.55;
 pointer-events: none;
 cursor: not-allowed;
}
.tag-pill {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 max-width: 100%;
 padding: 4px 10px;
 background: var(--accent-dim);
 border: 1px solid var(--accent-mid);
 color: var(--accent);
 border-radius: var(--r-full);
 font-size: 12px;
 font-weight: 500;
 line-height: 1.3;
 box-sizing: border-box;
}
.tag-pill--danger {
 background: var(--red-bg);
 border-color: var(--red-border);
 color: var(--red);
}
.tag-pill__remove {
 flex-shrink: 0;
 margin: 0;
 padding: 0 0 0 2px;
 border: none;
 background: none;
 font: inherit;
 font-size: 16px;
 line-height: 1;
 color: inherit;
 opacity: 0.55;
 cursor: pointer;
}
.tag-pill__remove:hover {
 opacity: 1;
}
.tag-pill--danger .tag-pill__remove {
 color: var(--red);
}
.tag-input {
 flex: 1 1 120px;
 min-width: 8em;
 margin: 0;
 padding: 4px 2px;
 border: none;
 outline: none;
 background: transparent;
 font-family: inherit;
 font-size: 14px;
 color: var(--ink);
 line-height: 1.35;
 box-sizing: border-box;
}
.tag-input::placeholder {
 color: var(--subtle);
}
.tag-input:disabled {
 opacity: 1;
 cursor: not-allowed;
}

/* ─── Cards ──────────────────────────────────── */
.card {
 background: var(--surface);
 border: 1px solid rgba(0, 39, 38, 0.08);
 border-radius: var(--r-lg);
 padding: 28px;
 box-shadow: var(--shadow-sm);
}
.card-sm { padding: 20px; border-radius: var(--r-md); }
.card-lg { padding: 36px; border-radius: var(--r-xl); }

/* ─── RAG Badges ─────────────────────────────── */
.rag-badge {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 3px 10px;
 border-radius: var(--r-full);
 font-size: 12px;
 font-weight: 600;
 font-family: var(--font-mono);
 letter-spacing: 0.03em;
 border: 1px solid;
}
.rag-red { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.rag-amber { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.rag-green { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }

.rag-dot {
 width: 7px; height: 7px;
 border-radius: 0;
}
.rag-dot.red { background: var(--red); }
.rag-dot.amber { background: var(--amber-muted); }
.rag-dot.green { background: var(--green-muted); }

/* Large score display */
.rag-score-lg {
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 96px; height: 96px;
 border-radius: var(--r-xl);
 border: 2px solid;
 font-family: var(--font-mono);
}
.rag-score-lg.red { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.rag-score-lg.amber { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.rag-score-lg.green { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
.rag-score-lg .score-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.rag-score-lg .score-value { font-size: 28px; font-weight: 700; line-height: 1; }

/* Severity badges */
.severity-badge {
 display: inline-flex;
 padding: 2px 8px;
 border-radius: var(--r-sm);
 border: 1px solid transparent;
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 font-family: var(--font-mono);
}
.severity-critical { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.severity-high { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.severity-medium { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.severity-low { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }

/* Workspace / detail - compact metadata chips */
.platform-badge {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 2px 8px;
 background: var(--surface-2);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 font-size: 11px;
 font-weight: 500;
 color: var(--muted);
 font-family: var(--font-mono);
}
.status-badge {
 display: inline-flex;
 align-items: center;
 padding: 2px 8px;
 border-radius: var(--r-full);
 font-size: 11px;
 font-weight: 500;
}
.status-active { background: var(--mint-15); color: var(--ink); border: 1px solid rgba(0, 39, 38, 0.10); }
.status-archived { background: var(--surface-2); color: var(--muted); }
.status-production { background: var(--green-bg); color: var(--green); }
.status-review { background: var(--amber-bg); color: var(--amber); }

/* ─── Nav ────────────────────────────────────── */
.nav {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(245, 244, 239, 0.88);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border-bottom: 1px solid var(--border);
}
.nav-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 60px;
}
.nav-logo {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 16px;
 font-weight: 600;
 letter-spacing: -0.02em;
 color: var(--ink);
}
.nav-logo-mark {
 width: 28px; height: 28px;
 background: var(--ink);
 border-radius: 0;
 display: flex;
 align-items: center;
 justify-content: center;
}
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link { font-size: 14px; color: var(--muted); font-weight: 500; transition: color 0.15s; }
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 12px; }

/* ─── App layout ─────────────────────────────── */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
 width: 240px;
 flex-shrink: 0;
 align-self: flex-start;
 height: calc(100vh - 24px);
 margin: 12px 0 12px 12px;
 background: var(--surface);
 border: 1px solid rgba(0, 39, 38, 0.06);
 display: flex;
 flex-direction: column;
 padding: 0;
 overflow-y: auto;
 box-shadow: var(--shadow-sm);
}
.sidebar-header {
 padding: 24px 24px 0;
 border-bottom: 1px solid rgba(0, 39, 38, 0.06);
 margin-bottom: 16px;
 padding-bottom: 20px;
}

.sidebar-brand {
 display: flex;
 align-items: center;
 gap: 9px;
 text-decoration: none;
 color: var(--ink);
}
.sidebar-brand img {
 flex-shrink: 0;
 width: 26px;
 height: 26px;
}
.sidebar-brand-text {
 font-size: 15px;
 font-weight: 800;
 letter-spacing: -0.03em;
 font-family: var(--font-display);
}
.sidebar-brand:hover,
.sidebar-brand:focus-visible {
 background: transparent;
}
.app-mobile-topnav-brand:hover,
.app-mobile-topnav-brand:focus-visible {
 background: transparent;
}
.sidebar-section {
 padding: 0 16px;
 margin-bottom: 28px;
}
.sidebar-section-label {
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--subtle);
 padding: 0 8px;
 margin-bottom: 8px;
}
.sidebar-nav-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 10px 12px;
 border-radius: var(--r-md);
 font-size: 14px;
 font-weight: 500;
 color: var(--muted);
 transition: background 0.18s ease, color 0.18s ease;
 cursor: pointer;
 border: none;
 background: none;
 width: 100%;
 text-align: left;
}
.sidebar-nav-item:hover { background: rgba(0, 39, 38, 0.04); color: var(--ink); }
.sidebar-nav-item.active { background: var(--accent-dim); color: var(--ink); }
.sidebar-nav-item .nav-icon { width: 18px; height: 18px; opacity: 0.65; }
.sidebar-nav-item.active .nav-icon { opacity: 1; }

.sidebar-footer {
 margin-top: auto;
 padding: 16px 16px 20px;
 border-top: 1px solid rgba(0, 39, 38, 0.06);
 flex-shrink: 0;
 display: flex;
 flex-direction: column;
 gap: 0;
}

.sidebar-account-panel {
 display: flex;
 flex-direction: column;
 gap: 12px;
 min-width: 0;
}

.sidebar-workspace-switcher {
 display: flex;
 flex-direction: column;
 gap: 6px;
 min-width: 0;
}

.sidebar-workspace-switcher__label {
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted);
}

.sidebar-workspace-switcher__select {
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 width: 100%;
 max-width: 100%;
 box-sizing: border-box;
 padding: 8px 32px 8px 10px;
 font-size: 12px;
 font-weight: 600;
 color: var(--ink);
 background-color: var(--surface);
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23002726' stroke-opacity='0.45' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 10px center;
 background-size: 12px 12px;
 border: 1px solid rgba(0, 39, 38, 0.12);
 border-radius: var(--r-md);
 cursor: pointer;
 font-family: inherit;
 line-height: 1.3;
}

.sidebar-workspace-switcher__select:focus {
 outline: 2px solid var(--accent-mid);
 outline-offset: 1px;
}

.sidebar-workspace-switcher__value {
 width: 100%;
 max-width: 100%;
 box-sizing: border-box;
 padding: 8px 10px;
 font-size: 12px;
 font-weight: 600;
 color: var(--ink);
 background: var(--surface-2);
 border: 1px solid rgba(0, 39, 38, 0.08);
 border-radius: var(--r-md);
 line-height: 1.3;
 min-height: 36px;
 display: flex;
 align-items: center;
}

/* Mobile top navigation (replaces sidebar on small screens) */
.app-mobile-topnav {
 display: none;
 align-items: center;
 gap: 12px;
 flex-shrink: 0;
 padding: 0 20px;
 height: 56px;
 background: rgba(250, 250, 247, 0.95);
 border-bottom: 1px solid rgba(0, 39, 38, 0.06);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 position: sticky;
 top: 0;
 z-index: 60;
 box-shadow: 0 1px 0 rgba(0, 39, 38, 0.04);
}
.app-mobile-topnav-identity {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-shrink: 0;
 min-width: 0;
}
.app-mobile-topnav-org {
 display: none;
 font-size: 11px;
 font-weight: 700;
 color: var(--ink);
 letter-spacing: 0.03em;
 line-height: 1.2;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 140px;
}
.app-mobile-topnav-brand {
 display: flex;
 align-items: center;
 justify-content: center;
 width: auto;
 height: 40px;
 padding: 0 4px;
 border-radius: var(--r-md);
 background: transparent;
 flex-shrink: 0;
}
.app-mobile-topnav-brand img {
 width: 28px;
 height: 28px;
 display: block;
}
.app-mobile-topnav-scroll {
 display: flex;
 align-items: center;
 gap: 4px;
 flex: 1;
 min-width: 0;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 padding: 4px 0;
}
.app-mobile-topnav-scroll::-webkit-scrollbar { display: none; }
.app-mobile-topnav-link {
 flex-shrink: 0;
 padding: 8px 12px;
 border-radius: var(--r-md);
 font-size: 13px;
 font-weight: 500;
 color: var(--muted);
 text-decoration: none;
 transition: background 0.12s, color 0.12s;
 white-space: nowrap;
}
.app-mobile-topnav-link:hover {
 background: var(--surface-2);
 color: var(--ink);
}
.app-mobile-topnav-link.active {
 background: var(--accent-dim);
 color: var(--ink);
 font-weight: 600;
}

.app-main {
 flex: 1;
 overflow-y: auto;
 background: transparent;
}

.page-header {
 padding: 36px 40px 0;
 margin-bottom: 36px;
}
.page-title {
 font-family: var(--font-display);
 font-size: 23px;
 font-weight: 600;
 line-height: 1.15;
 color: var(--ink);
 letter-spacing: -0.03em;
}
.page-subtitle { font-size: 15px; color: var(--muted); margin-top: 8px; line-height: 1.55; max-width: 52ch; }

.page-content { padding: 0 40px 56px; }

/* Settings section tabs: active used bare `.btn` (no token fill) — UA styles could look white-on-white. */
.settings-section-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.settings-section-tabs .btn-ghost {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border-2);
}
.settings-section-tabs .btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

.settings-section-shell {
  padding: 20px 24px;
}
.settings-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.settings-section-intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 20px;
  max-width: 62ch;
}
.settings-section-intro code {
  font-size: 0.92em;
  color: var(--ink);
  background: var(--surface-2);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/** Meta / audit lines pinned below main settings content (version, scope, etc.). */
.settings-panel-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 39, 38, 0.08);
}

/* ─── Shared product patterns (prototype detail) ─── */
.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;
}

.page-crumb,
.proto-crumb {
 font-size: 12px;
 color: var(--muted);
 margin-bottom: 18px;
}
.page-crumb a,
.proto-crumb a { color: var(--muted); }
.page-crumb a:hover,
.proto-crumb a:hover { color: var(--ink); }

.section-kicker,
.proto-section-kicker {
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--muted);
 font-family: var(--font-mono);
 margin-bottom: 8px;
}

.section-desc,
.proto-section-desc {
 font-size: 14px;
 color: var(--muted);
 line-height: 1.55;
 margin: 0 0 16px;
 max-width: 62ch;
}

.proto-prose {
 font-size: 14px;
 line-height: 1.65;
 color: var(--ink-2);
 margin: 0 0 14px;
}
.proto-prose:last-child { margin-bottom: 0; }

.proto-linkish {
 background: none;
 border: none;
 padding: 0;
 font: inherit;
 font-weight: 600;
 color: var(--accent);
 text-decoration: underline;
 text-underline-offset: 3px;
 cursor: pointer;
}
.proto-linkish:hover { color: var(--accent-hover); }

.proto-dl {
 margin: 0;
 padding: 0;
}
.proto-dl > div {
 display: grid;
 grid-template-columns: minmax(7rem, 36%) 1fr;
 gap: 8px 20px;
 padding: 12px 0;
 border-bottom: 1px solid var(--border);
 font-size: 14px;
}
.proto-dl > div:last-child { border-bottom: none; }
.proto-dl dt {
 font-size: 11px;
 font-weight: 600;
 font-family: var(--font-mono);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--muted);
 margin: 0;
}
.proto-dl dd {
 margin: 0;
 color: var(--ink-2);
 font-family: var(--font-sans);
}

/* ─── Build detail (prototype-detail.html layout) ─── */
.proto-hero {
 position: relative;
 margin-bottom: 32px;
 padding: 0;
 overflow: hidden;
 border: 1px solid rgba(0, 39, 38, 0.08);
 background: var(--surface);
 box-shadow: var(--shadow-sm);
}
.proto-hero::before {
 content: "";
 display: block;
 height: 3px;
 background: linear-gradient(90deg, var(--mint) 0%, rgba(152, 251, 203, 0.4) 100%);
}
.proto-hero__inner {
 padding: 28px 32px 24px;
}
.proto-hero__grid {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 28px 32px;
 align-items: start;
}
.proto-hero__badges {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
 margin-bottom: 14px;
}
.proto-hero__verdict {
 font-size: 15px;
 line-height: 1.6;
 color: var(--ink-2);
 margin: 0 0 12px;
 max-width: 54ch;
}
.proto-hero__verdict strong { color: var(--ink); }
.proto-hero__url {
 margin: 0 0 12px;
 font-family: var(--font-mono);
 font-size: 13px;
}
.proto-hero__url a {
 color: var(--ink);
 text-decoration: underline;
 text-underline-offset: 3px;
}
.proto-hero__url a:hover { color: var(--accent-hover); }
.proto-hero__meta {
 font-size: 13px;
 color: var(--muted);
 margin: 0;
 line-height: 1.5;
}
.proto-hero__actions {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: flex-start;
 gap: 8px;
 margin-top: 24px;
 padding-top: 24px;
 border-top: 1px solid rgba(0, 39, 38, 0.06);
}

/* Settings — Branding import mode */
.branding-mode-tabs {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 16px;
}
.branding-mode-tab {
 font-size: 13px;
 font-weight: 600;
 padding: 8px 14px;
 border-radius: 8px;
 border: 1px solid rgba(0, 39, 38, 0.12);
 background: var(--surface);
 color: var(--ink-2);
 cursor: pointer;
 transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.branding-mode-tab:hover {
 border-color: rgba(0, 39, 38, 0.2);
 color: var(--ink);
}
.branding-mode-tab--active {
 border-color: var(--accent);
 background: rgba(152, 251, 203, 0.15);
 color: var(--ink);
}

/* Governance baseline — compliance framework checkboxes */
.framework-checkbox-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 gap: 12px 18px;
}
.framework-checkbox-label {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 font-size: 14px;
 line-height: 1.45;
 color: var(--ink-2);
 cursor: pointer;
}
.framework-checkbox-label:hover {
 color: var(--ink);
}
input.checkbox-input {
 width: 1.125rem;
 height: 1.125rem;
 margin: 0.2rem 0 0;
 flex-shrink: 0;
 accent-color: var(--accent);
 cursor: pointer;
 border-radius: var(--r-sm);
}
input.checkbox-input:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
}
input.checkbox-input:disabled {
 opacity: 0.45;
 cursor: not-allowed;
}
.framework-checkbox-label span {
 padding-top: 0.05rem;
}
.proto-hero__score-wrap {
 text-align: center;
}
.proto-hero__score-caption {
 font-size: 11px;
 font-family: var(--font-sans);
 color: var(--muted);
 margin-top: 8px;
 letter-spacing: 0.04em;
 max-width: 11rem;
 line-height: 1.35;
}
.proto-hero__score-wrap .rag-score-lg {
 flex-direction: column-reverse;
 gap: 6px;
}
.proto-hero__score-wrap .rag-score-lg .score-label {
 opacity: 0.85;
 font-size: 9px;
 line-height: 1.2;
 max-width: 92px;
 white-space: normal;
 text-align: center;
}

.proto-subnav__item--dim {
 flex-direction: column;
 align-items: stretch;
 gap: 6px;
 padding-top: 12px;
 padding-bottom: 12px;
}
.proto-subnav__dim-main {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 width: 100%;
 min-height: 1.35em;
}
.proto-subnav__dim-name {
 font-family: var(--font-sans);
 font-size: 14px;
 font-weight: inherit;
 line-height: 1.35;
 color: inherit;
}
.proto-subnav__dim-score {
 font-family: var(--font-sans);
 font-size: 12px;
 font-weight: 600;
 font-variant-numeric: tabular-nums;
 letter-spacing: 0.02em;
 color: var(--muted);
 flex-shrink: 0;
}
.proto-subnav__item--dim.active .proto-subnav__dim-score { color: var(--ink); }
.proto-subnav__dim-fix {
 font-family: var(--font-sans);
 font-size: 12px;
 font-weight: 500;
 line-height: 1.4;
 color: var(--subtle);
 width: 100%;
}
.proto-subnav__item--dim.active .proto-subnav__dim-fix { color: var(--ink-2); }

.pd-finding { margin-bottom: 0; }
.proto-findings-list {
 display: flex;
 flex-direction: column;
 gap: 20px;
}
.pd-finding--critical {
 box-shadow: inset 3px 0 0 0 var(--red), var(--shadow-sm);
}
.pd-finding--high {
 box-shadow: inset 3px 0 0 0 var(--red-muted), var(--shadow-sm);
}
.pd-finding__head {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px 10px;
 margin-bottom: 10px;
}
.pd-finding__dim {
 font-size: 12px;
 color: var(--muted);
 font-family: var(--font-sans);
 font-weight: 500;
}
.pd-finding__title {
 font-size: 16px;
 font-weight: 600;
 color: var(--ink);
 margin: 0 0 12px;
 line-height: 1.35;
}
.pd-finding__body p {
 font-size: 14px;
 line-height: 1.65;
 color: var(--ink-2);
 margin: 0 0 10px;
}
.pd-finding__fix {
 margin-top: 14px;
 padding: 14px 16px;
 background: var(--surface-2);
 border: 1px solid var(--border);
 font-size: 13px;
 line-height: 1.6;
 color: var(--ink-2);
}
.pd-finding--critical .pd-finding__fix {
 background: var(--red-bg);
 border-color: var(--red-border);
}

.proto-findings-bar {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 margin-bottom: 24px;
 padding-bottom: 4px;
}
.proto-findings-bar p {
 margin: 0;
 font-size: 14px;
 color: var(--muted);
}

.proto-lower {
 display: grid;
 grid-template-columns: 1fr 2fr;
 gap: 28px;
 align-items: stretch;
 margin-top: 8px;
 padding-top: 28px;
 border-top: 1px solid var(--border);
}
.proto-subnav {
 position: sticky;
 top: 12px;
 align-self: start;
 z-index: 3;
 border: 1px solid var(--border);
 background: var(--surface);
 box-shadow: var(--shadow-sm);
}
.proto-subnav__title {
 font-family: var(--font-mono);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--subtle);
 padding: 14px 16px 10px;
 border-bottom: 1px solid var(--border);
 margin: 0;
}
.proto-subnav__title--break {
 border-top: 1px solid var(--border);
 padding-top: 14px;
}
.proto-subnav__item {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 width: 100%;
 margin: 0;
 padding: 12px 16px;
 text-align: left;
 font-family: var(--font-sans);
 font-size: 14px;
 font-weight: 500;
 line-height: 1.35;
 color: var(--muted);
 background: transparent;
 border: none;
 border-bottom: 1px solid var(--border);
 cursor: pointer;
 transition: background 0.12s, color 0.12s;
}
.proto-subnav__item .tab-count {
 margin-left: auto;
 flex-shrink: 0;
}
.proto-subnav__item:last-child { border-bottom: none; }
.proto-subnav__item:hover {
 background: var(--surface-2);
 color: var(--ink);
}
.proto-subnav__item.active {
 background: var(--surface-2);
 color: var(--ink);
 font-weight: 600;
 box-shadow: inset 3px 0 0 0 var(--mint);
}
.proto-subnav-panels { min-width: 0; }
.proto-tab-stack {
 display: flex;
 flex-direction: column;
 gap: 24px;
}
.proto-subnav-panels .proto-dl > div {
 grid-template-columns: 1fr;
 gap: 4px;
}

@media (max-width: 960px) {
 .proto-lower { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
 .proto-hero__grid { grid-template-columns: 1fr; }
 .proto-hero__score-wrap {
  justify-self: start;
  text-align: left;
 }
 .proto-dl > div { grid-template-columns: 1fr; gap: 4px; }
}

.tab-content { display: none; }
.tab-content.active { display: block; }

.page-header-split {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
 flex-wrap: wrap;
}
.page-header-split > div:first-child {
 min-width: 0;
 flex: 1 1 280px;
}
/* Primary actions (ghost buttons) — same placement as Workspace */
.page-header-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 justify-content: flex-end;
 align-items: center;
 flex-shrink: 0;
}

.surface-ruled {
 position: relative;
 border: 1px solid rgba(0, 39, 38, 0.08);
 background: var(--surface);
 box-shadow: var(--shadow-sm);
 overflow: hidden;
}

.surface-ruled--plain::before {
 display: none;
}
.surface-ruled--inset { padding: 24px 28px 22px; }

.surface-ruled__header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px 16px;
 flex-wrap: wrap;
 padding: 20px 24px;
 border-bottom: 1px solid var(--border);
 box-sizing: border-box;
}

.surface-ruled__body {
 padding: 22px 24px 24px;
 box-sizing: border-box;
}

/* Governance baseline (Settings) — side nav + one section (build-detail pattern) */
.governance-settings-page {
 max-width: 100%;
}

.governance-settings-layout {
 display: grid;
 /* Match `.proto-lower` (build detail): narrow rail + wide content */
 grid-template-columns: 1fr 2fr;
 gap: 28px;
 align-items: start;
}

.governance-settings-main {
 min-width: 0;
}

@media (max-width: 960px) {
 .governance-settings-layout {
  grid-template-columns: 1fr;
  gap: 20px;
 }
 .governance-settings-layout .proto-subnav {
  position: static;
 }
}

.governance-section {
 margin-bottom: 0;
}

.governance-section__header {
 align-items: flex-start;
}

.governance-section__kicker {
 display: block;
 font-family: var(--font-mono);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--muted);
 margin-bottom: 6px;
}

.governance-section__title {
 margin: 0;
}

.governance-section__desc {
 margin: 8px 0 0;
 font-size: 13px;
 line-height: 1.5;
 color: var(--muted);
 max-width: 62ch;
}

.governance-section__body > *:first-child {
 margin-top: 0;
}

.governance-subheading {
 font-size: 13px;
 font-weight: 700;
 color: var(--ink);
 margin: 0 0 10px;
}

.governance-brand-actions {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px 14px;
 margin-bottom: 16px;
}

.governance-dimension-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 10px;
}

@media (min-width: 640px) {
 .governance-dimension-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

.governance-dim-card {
 border: 1px solid var(--border);
 background: var(--surface-2);
 padding: 12px 14px;
 min-height: 4.5rem;
 box-sizing: border-box;
}

.governance-dim-card__title {
 font-weight: 600;
 font-size: 13px;
 color: var(--ink);
 margin: 0 0 6px;
}

.governance-init-card {
 margin-top: 20px;
 padding-top: 20px;
 border-top: 1px solid var(--border);
}

.governance-footer-links {
 margin-top: 28px;
 padding-top: 16px;
 border-top: 1px solid var(--border);
 font-size: 13px;
 color: var(--muted);
}

.governance-loading {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 8px 0 16px;
}

.governance-loading__line {
 height: 12px;
 border-radius: 0;
 background: linear-gradient(
  90deg,
  var(--surface-3) 0%,
  var(--surface-2) 50%,
  var(--surface-3) 100%
 );
 background-size: 200% 100%;
 animation: governance-shimmer 1.2s ease-in-out infinite;
}

.governance-loading__line--short {
 width: 55%;
}

.governance-loading__line--mid {
 width: 80%;
}

@keyframes governance-shimmer {
 0% {
  background-position: 100% 0;
 }
 100% {
  background-position: -100% 0;
 }
}

.governance-inline-status {
 padding: 4px 0 8px;
}

.governance-history-list {
 list-style: none;
 margin: 0;
 padding: 0;
 max-height: 380px;
 overflow: auto;
}

.governance-history-row {
 margin-bottom: 12px;
 padding-bottom: 12px;
 border-bottom: 1px solid var(--border);
 font-size: 13px;
}

.governance-rescan-banner {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 10px 16px;
}

/* Ruled panel + table (person detail, etc.): one surface, no nested table chrome */
.surface-ruled > .table-wrap {
 background: transparent;
 border: none;
 border-radius: 0;
 box-shadow: none;
 border-top: 1px solid var(--border);
}
.surface-ruled > .table-wrap .data-table {
 border-radius: 0;
 border-left: none;
 border-right: none;
 border-bottom: none;
}

/* Section titles in ruled panels: always sans (mono reserved for kickers, code, paths). */
.panel-heading {
 font-family: var(--font-sans);
 font-size: 16px;
 font-weight: 700;
 color: var(--ink);
 letter-spacing: 0;
 margin: 0;
}

.stats-matrix {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
 overflow: hidden;
 margin-bottom: 24px;
 box-shadow: var(--shadow-sm);
 border: 1px solid rgba(0, 39, 38, 0.08);
}
.stats-matrix__cell {
 background: var(--surface);
 padding: 24px 28px;
 border-right: 1px solid rgba(0, 39, 38, 0.06);
}
.stats-matrix__cell:last-child { border-right: none; }
.surface-ruled .stats-matrix { margin-bottom: 0; border: none; box-shadow: none; }

.workspace-toolbar {
 display: flex;
 align-items: flex-start;
 justify-content: flex-end;
 margin-bottom: 12px;
 flex-wrap: wrap;
 gap: 14px 18px;
}

.workspace-toolbar__ctl {
 display: flex;
 align-items: center;
 gap: 8px;
}

.workspace-toolbar__label {
 font-size: 10px;
 font-weight: 700;
 font-family: var(--font-mono);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--muted);
 white-space: nowrap;
}

.workspace-toolbar__ctl--search {
 flex: 0 1 auto;
}

.workspace-toolbar__search {
 width: 220px;
 max-width: min(320px, 100%);
 min-width: 0;
}

.workspace-toolbar__sort {
 width: 11rem;
 max-width: 100%;
}

.workspace-toolbar__filter {
 width: 9.5rem;
 max-width: 100%;
}

.table-wrap {
 background: var(--surface);
 border: 1px solid rgba(0, 39, 38, 0.08);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
}
/* Intelligence themes: action buttons must not be clipped when the row is tight */
.table-wrap:has(.intelligence-themes-table) {
 overflow-x: auto;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
}

.workspace-insights {
 display: grid;
 grid-template-columns: 1fr 320px;
 gap: 28px;
 margin-bottom: 28px;
 align-items: stretch;
}
.workspace-insights > .workspace-insights__panel {
 height: 100%;
 display: flex;
 flex-direction: column;
 min-height: 0;
 box-sizing: border-box;
}
.workspace-insights__panel .workspace-insights__body {
 flex: 1 1 auto;
 min-height: 0;
}
/* Full-width row so the CTA aligns with copy (left edge) and sits on the card baseline */
.workspace-insights__panel .workspace-insights__cta {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 width: 100%;
 margin-top: auto;
 padding-top: 16px;
 flex-shrink: 0;
 box-sizing: border-box;
}
.workspace-insights__panel .workspace-insights__cta .btn {
 flex: 0 0 auto;
 margin: 0;
}

.report-modal {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(12, 12, 20, 0.6);
 z-index: 100;
 align-items: center;
 justify-content: center;
}
.report-modal.open {
 display: flex;
}
.report-modal-inner {
 background: var(--surface);
 border-radius: var(--r-xl);
 padding: 40px;
 width: 540px;
 max-height: 90vh;
 overflow-y: auto;
 box-shadow: var(--shadow-xl);
 border: 1px solid rgba(0, 39, 38, 0.08);
}

.dimension-insight-findings {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 14px;
}
.dimension-insight-findings li {
 padding: 12px 14px;
 border-radius: var(--r-md);
 border: 1px solid rgba(0, 39, 38, 0.08);
 background: rgba(0, 39, 38, 0.02);
}

.dimension-trust-stack {
 display: flex;
 flex-direction: column;
 gap: 16px;
}
.dimension-trust-card {
 scroll-margin-top: 88px;
}
.dimension-trust-card__head {
 margin-bottom: 12px;
}
.dimension-trust-card__title {
 margin: 0;
 font-family: var(--font-display);
 font-size: 17px;
 font-weight: 600;
 letter-spacing: -0.02em;
 color: var(--ink);
}
.dimension-trust-card__scoreline {
 margin: 6px 0 0;
 font-size: 14px;
 color: var(--muted);
}
.dimension-trust-card__intro {
 margin: 0 0 16px;
 font-size: 14px;
 line-height: 1.55;
}
.dimension-trust-card__block {
 margin-bottom: 16px;
}
.dimension-trust-card__block:last-child {
 margin-bottom: 0;
}
.dimension-trust-card__body {
 margin: 8px 0 0;
 font-size: 14px;
 line-height: 1.55;
 color: var(--ink-2);
}
.dimension-trust-card__signals {
 margin: 8px 0 0;
 padding-left: 1.15rem;
 font-size: 14px;
 line-height: 1.55;
 color: var(--ink-2);
}
.dimension-trust-card__signals li {
 margin-bottom: 8px;
}
.dimension-trust-card__finding-title {
 display: block;
 margin-top: 6px;
 font-size: 14px;
 color: var(--ink);
}
.dimension-trust-card__finding-desc {
 margin: 6px 0 0;
 font-size: 13px;
 line-height: 1.5;
 color: var(--ink-2);
}
.dimension-trust-card__fallback {
 margin: 0;
 font-size: 13px;
 line-height: 1.5;
}

.filter-bar {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}

.filter-chip {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 14px;
 min-height: var(--ctrl-h-sm);
 border: 1px solid var(--border-2);
 background: var(--surface);
 font-size: 13px;
 font-weight: 500;
 color: var(--muted);
 cursor: pointer;
 transition: border-color 0.12s, background 0.12s, color 0.12s;
 font-family: inherit;
 box-sizing: border-box;
 appearance: none;
 -webkit-appearance: none;
}
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip.active {
 background: var(--ink);
 color: var(--mint);
 border-color: var(--ink);
}
.filter-chip.red-filter.active {
 background: var(--red);
 border-color: var(--red);
 color: var(--mint);
}
.filter-chip.amber-filter.active {
 background: var(--amber);
 border-color: var(--amber);
 color: var(--surface);
}
.filter-chip.green-filter.active {
 background: var(--green);
 border-color: var(--green);
 color: var(--mint);
}

.banner-new {
 background: var(--green-bg);
 border: 1px solid var(--green-border);
 padding: 18px 24px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 28px;
 box-shadow: var(--shadow-sm);
 }

.pattern-card {
 background: var(--surface);
 border: 1px solid rgba(0, 39, 38, 0.08);
 padding: 24px;
 margin-bottom: 16px;
 box-shadow: var(--shadow-sm);
}
.pattern-card.insight {
 border-left: none;
}
.pattern-card.warning {
 border-left: none;
 box-shadow:
 inset 0 3px 0 0 var(--amber-muted),
 var(--shadow-sm);
}
.grid.intel-pair {
 align-items: stretch;
}
.grid.intel-pair > .pattern-card {
 height: 100%;
 margin-bottom: 0;
 display: flex;
 flex-direction: column;
}
.grid.intel-pair > .pattern-card > p {
 flex: 1 1 auto;
}
.grid.intel-pair > .pattern-card .intel-see-how {
 margin-top: auto;
 align-self: flex-start;
 padding-top: 4px;
}
.intel-see-how {
 display: inline-block;
 margin-top: 12px;
 font-size: 13px;
 font-weight: 600;
 color: var(--accent);
 text-decoration: none;
 border: none;
 background: none;
 padding: 0;
 cursor: pointer;
 font-family: inherit;
}
.intel-see-how:hover {
 text-decoration: underline;
 color: var(--accent-hover);
}
.intel-priority-pill {
 display: inline-flex;
 align-items: center;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 font-family: var(--font-mono);
 color: var(--amber);
 background: var(--amber-bg);
 border: 1px solid var(--amber-border);
 border-radius: var(--r-full);
 padding: 3px 10px;
 margin-bottom: 10px;
}
/* Intelligence: “What to build next” - cross-app value, stronger callout */
.pattern-card.intel-value-block {
 position: relative;
 padding: 24px 22px 22px;
 border: 1px solid rgba(0, 39, 38, 0.14);
 background: linear-gradient(165deg, var(--mint-15) 0%, var(--surface) 45%, var(--surface) 100%);
 box-shadow:
 0 1px 2px rgba(0, 39, 38, 0.06),
 0 12px 32px rgba(0, 39, 38, 0.07),
 inset 0 3px 0 0 var(--mint);
 margin-bottom: 20px;
}
.intel-value-pill {
 display: inline-flex;
 align-items: center;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.07em;
 text-transform: uppercase;
 font-family: var(--font-mono);
 color: var(--accent);
 background: rgba(152, 251, 203, 0.45);
 border: 1px solid rgba(0, 39, 38, 0.14);
 padding: 4px 11px;
 margin-bottom: 12px;
}
.pattern-card.intel-value-block .intel-lede {
 font-size: 18px;
 font-weight: 700;
 letter-spacing: 0;
 margin-bottom: 10px;
}
.intel-value-block__intro {
 font-size: 14px;
 line-height: 1.58;
 color: var(--ink-2);
 margin: 0 0 16px;
 max-width: 68ch;
}
.intel-value-block__list {
 margin: 0;
 padding: 16px 18px 16px 1.35rem;
 list-style-position: outside;
 background: var(--surface);
 border: 1px solid var(--border);
 font-size: 14px;
 line-height: 1.65;
 color: var(--ink-2);
 box-shadow: var(--shadow-sm);
}
.intel-value-block__list li {
 margin-bottom: 12px;
}
.intel-value-block__list li:last-child {
 margin-bottom: 0;
}
.pattern-card.intel-value-block .intel-see-how {
 margin-top: 16px;
}
.intel-lede {
 font-family: var(--font-sans);
 font-size: 15px;
 font-weight: 600;
 color: var(--ink);
 margin: 0 0 8px;
 line-height: 1.35;
}
.intel-stat {
 font-size: 13px;
 font-weight: 600;
 color: var(--ink);
 margin: 0 0 8px;
 font-family: var(--font-mono);
}
.settings-lever-row {
 padding: 18px 20px;
 background: var(--surface);
 border: 1px solid rgba(0, 39, 38, 0.08);
 border-radius: var(--r-md);
}
.settings-lever-row + .settings-lever-row {
 margin-top: 14px;
}

a.sidebar-user {
 text-decoration: none;
 color: inherit;
}
a.sidebar-user.sidebar-user--account {
 display: flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
 padding: 10px 8px;
 margin: -6px -8px;
 border-radius: var(--r-md);
 transition: background 0.15s ease;
}
a.sidebar-user.sidebar-user--account:hover {
 background: rgba(0, 39, 38, 0.06);
}
a.sidebar-user.sidebar-user--account.active {
 background: var(--accent-dim);
}

.sidebar-user {
 display: flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
}
.sidebar-user__meta {
 min-width: 0;
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.sidebar-user__name {
 font-size: 12px;
 font-weight: 600;
 color: var(--ink);
 line-height: 1.25;
}
.sidebar-user__org {
 font-size: 11px;
 font-weight: 600;
 color: var(--ink);
 line-height: 1.3;
 letter-spacing: 0.02em;
 opacity: 0.72;
}

.sidebar-user__email {
 font-size: 11px;
 font-weight: 400;
 color: var(--muted);
 line-height: 1.3;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 100%;
}
.sidebar-user__avatar {
 width: 30px;
 height: 30px;
 background: var(--accent-dim);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 font-size: 12px;
 font-weight: 600;
 color: var(--accent);
}

.sidebar-user-row {
 display: flex;
 align-items: center;
 gap: 2px;
 min-width: 0;
}
.sidebar-user-row .sidebar-user.sidebar-user--account {
 flex: 1;
 min-width: 0;
}
a.sidebar-user__settings {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 width: 36px;
 height: 36px;
 margin: -4px -6px -4px 0;
 border-radius: var(--r-md);
 color: var(--muted);
 text-decoration: none;
 transition: background 0.15s ease, color 0.15s ease;
}
a.sidebar-user__settings:hover {
 background: rgba(0, 39, 38, 0.06);
 color: var(--ink);
}
a.sidebar-user__settings.is-active {
 color: var(--accent);
 background: var(--accent-dim);
}
a.sidebar-user__settings .nav-icon {
 width: 18px;
 height: 18px;
 opacity: 0.85;
}
a.sidebar-user__settings.is-active .nav-icon {
 opacity: 1;
}

.settings-nav {
 display: flex;
 flex-direction: column;
 gap: 0;
 border: 1px solid rgba(0, 39, 38, 0.08);
 background: var(--surface);
 box-shadow: var(--shadow-sm);
 padding: 0;
 overflow: hidden;
}
.settings-nav-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 14px 18px;
 min-height: var(--ctrl-h);
 font-size: 14px;
 font-weight: 500;
 color: var(--muted);
 cursor: pointer;
 text-decoration: none;
 transition: background 0.18s ease, color 0.18s ease;
 border: none;
 border-bottom: 1px solid rgba(0, 39, 38, 0.06);
 background: transparent;
 width: 100%;
 text-align: left;
 font-family: inherit;
 box-sizing: border-box;
}
.settings-nav-item:last-of-type { border-bottom: none; }
.settings-nav-item:hover { background: rgba(0, 39, 38, 0.03); color: var(--ink); }
.settings-nav-item.active { background: rgba(0, 39, 38, 0.03); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 0 var(--mint); }
.settings-nav-sep {
 height: 8px;
 background: rgba(0, 39, 38, 0.02);
 border-top: 1px solid rgba(0, 39, 38, 0.06);
 border-bottom: 1px solid rgba(0, 39, 38, 0.06);
 flex-shrink: 0;
}

/* ─── Tables ─────────────────────────────────── */
.data-table {
 width: 100%;
 border-collapse: collapse;
 background: var(--surface);
 border-radius: var(--r-lg);
 overflow: hidden;
 border: 1px solid var(--border);
}
.data-table thead {
 margin: 0;
}
.data-table thead tr {
 margin: 0;
}
.data-table th {
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted);
 padding: 16px 20px;
 text-align: left;
 border-bottom: 1px solid rgba(0, 39, 38, 0.06);
 background: rgba(0, 39, 38, 0.02);
 font-family: var(--font-mono);
 vertical-align: middle;
 line-height: 1.35;
}
.data-table td {
 padding: 18px 20px;
 border-bottom: 1px solid rgba(0, 39, 38, 0.06);
 font-size: 14px;
 color: var(--ink-2);
 vertical-align: middle;
 line-height: 1.45;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.18s ease; }
.data-table tbody tr:hover { background: rgba(0, 39, 38, 0.02); cursor: pointer; }
.table-wrap .data-table { border: none; }

/* Intelligence — repeated themes (table; snooze right in actions column) */
.intelligence-themes-table {
  table-layout: fixed;
}
.intelligence-themes-table th,
.intelligence-themes-table td {
  vertical-align: top;
}
.data-table.intelligence-themes-table tbody tr {
  cursor: default;
}
.data-table.intelligence-themes-table tbody tr:hover {
  cursor: default;
}
.intelligence-themes-table .intelligence-themes-table__actions-head,
.intelligence-themes-table .intelligence-themes-table__actions {
  text-align: right;
  width: 22%;
  min-width: 0;
  max-width: 280px;
  box-sizing: border-box;
}
.intelligence-themes-table th:nth-child(1) { width: 18%; min-width: 140px; }
.intelligence-themes-table th:nth-child(2) { width: 14%; min-width: 120px; }
.intelligence-themes-table th:nth-child(3) { width: 72px; }
.intelligence-themes-table th:nth-child(4) { min-width: 0; }
.intelligence-themes-table th:nth-child(5) {
  width: 22%;
  min-width: 160px;
}
.intelligence-theme-detail {
  min-width: 0;
}
.intelligence-theme-summary {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.intelligence-theme-headline {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  display: block;
}
.intelligence-theme-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.intelligence-theme-title .intel-priority-pill {
  margin-top: 8px;
  margin-bottom: 0;
}
.intelligence-theme-dim {
  font-size: 13px;
  color: var(--ink-2);
}
.intelligence-theme-count {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.intelligence-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.intelligence-actions__record {
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
}
.intelligence-actions__secondary {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* .btn defaults to white-space: nowrap — forces overflow in narrow table cells */
.intelligence-actions .btn {
  white-space: normal;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
}
.intelligence-actions__snooze,
.intelligence-actions__ignore {
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* Intelligence — compact snoozed / hidden themes (below main themes table) */
.intelligence-snoozed-section {
  margin-top: 28px;
  padding-top: 8px;
}
.intelligence-snoozed-section__title {
  font-size: 15px;
  margin-bottom: 8px;
}
.intelligence-snoozed-section__lede {
  font-size: 13px;
  margin-bottom: 14px;
  max-width: 720px;
  line-height: 1.55;
}
.intelligence-snoozed-table {
  table-layout: fixed;
}
.intelligence-snoozed-table th:nth-child(1) {
  width: 44%;
  min-width: 0;
}
.intelligence-snoozed-table th:nth-child(2) {
  width: 22%;
  min-width: 120px;
}
.intelligence-snoozed-table th:nth-child(3) {
  width: 34%;
  min-width: 0;
}
.data-table.intelligence-snoozed-table tbody tr {
  cursor: default;
}
.data-table.intelligence-snoozed-table tbody tr:hover {
  cursor: default;
}
.intelligence-snoozed-theme-link {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.intelligence-snoozed-theme-link:hover {
  color: var(--accent);
  text-decoration: underline;
}
.intelligence-snoozed-table__status {
  font-size: 13px;
  color: var(--muted);
  vertical-align: middle;
}
.intelligence-snoozed-table__status-extra {
  color: var(--muted);
}

.data-table.intelligence-finding-evidence-table tbody tr {
  cursor: default;
}
.data-table.intelligence-finding-evidence-table tbody tr:hover {
  cursor: default;
}

/* Shared empty states */
.empty-state {
  text-align: center;
  padding: 36px 28px 32px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(0, 39, 38, 0.1);
  background: linear-gradient(180deg, rgba(0, 167, 154, 0.07) 0%, var(--surface) 52%);
  box-shadow: 0 8px 28px rgba(0, 39, 38, 0.06);
}
.empty-state__icon {
  display: flex;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 16px;
}
.empty-state__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.3;
}
.empty-state__description {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 auto 8px;
  max-width: 46ch;
}
.empty-state__hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 auto 16px;
  max-width: 46ch;
}
.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
}
.empty-state--compact {
  padding: 24px 20px;
}
.empty-state--compact .empty-state__icon {
  margin-bottom: 12px;
}
.empty-state--compact .empty-state__icon svg {
  width: 32px;
  height: 32px;
}
.empty-state--compact .empty-state__title {
  font-size: 16px;
}
.empty-state--compact .empty-state__description {
  font-size: 13px;
  max-width: 52ch;
}

.workspace-builds-empty {
  padding: 0;
  overflow: hidden;
}
.workspace-builds-empty .empty-state {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 36px 28px 40px;
}

.intelligence-themes-empty-wrap {
  margin-bottom: 20px;
  padding: 24px 22px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(0, 39, 38, 0.1);
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(0, 39, 38, 0.04);
}
.intelligence-themes-empty-wrap .empty-state {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.intelligence-page-empty-unified {
  padding: 0;
  overflow: hidden;
}
.intelligence-page-empty-unified .empty-state {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 40px 28px 44px;
}

/* Intelligence — aggregated remediation hero (primary CTA) */
.intelligence-aggregate-hero {
  position: relative;
  margin-bottom: 20px;
  padding: 28px 28px 24px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(0, 39, 38, 0.12);
  background: linear-gradient(
    165deg,
    rgba(0, 167, 154, 0.09) 0%,
    var(--surface) 42%,
    var(--surface) 100%
  );
  box-shadow: 0 12px 40px rgba(0, 39, 38, 0.07);
}
.intelligence-aggregate-hero::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
  background: var(--accent);
}
.intelligence-aggregate-hero__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}
.intelligence-aggregate-hero__lede {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 12px;
  max-width: 62ch;
}
.intelligence-aggregate-hero__stats {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 22px;
  font-family: var(--font-mono);
}
.intelligence-aggregate-hero__stats span {
  color: var(--muted);
  font-weight: 500;
}
.intelligence-aggregate-hero__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 960px) {
  .intelligence-aggregate-hero__grid {
    grid-template-columns: 1fr;
  }
}
.intelligence-aggregate-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 18px 16px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(0, 39, 38, 0.1);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 39, 38, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.intelligence-aggregate-card:hover {
  border-color: rgba(0, 167, 154, 0.35);
  box-shadow: 0 6px 20px rgba(0, 39, 38, 0.08);
}
.intelligence-aggregate-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
  font-family: var(--font-mono);
}
.intelligence-aggregate-card__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}
.intelligence-aggregate-card__blurb {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 14px;
  flex: 1;
}
.intelligence-aggregate-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.intelligence-aggregate-hero--empty {
  text-align: center;
  padding: 8px;
  border: 1px dashed rgba(0, 39, 38, 0.22);
  border-radius: var(--r-lg);
  background: rgba(0, 39, 38, 0.025);
}
.intelligence-aggregate-hero--empty .empty-state {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 20px 16px 24px;
}
.intelligence-aggregate-hero--empty .empty-state__description {
  max-width: 56ch;
}
.report-modal-inner--aggregate {
  width: min(92vw, 880px);
  max-width: none;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.report-modal-inner--aggregate .report-modal-inner__head {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.report-modal-inner--aggregate .report-modal-inner__head h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.report-modal-inner--aggregate .report-modal-inner__head p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.report-modal-inner--aggregate .report-modal-inner__body {
  padding: 16px 28px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.report-modal-inner--aggregate .report-modal-inner__foot {
  padding: 16px 28px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.intelligence-aggregate-modal-pre {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink-2);
}

.workspace-table-meta {
 font-size: 13px;
 color: var(--ink-2);
}

a.workspace-builder-link {
 color: var(--accent);
 font-weight: 600;
 text-decoration: underline;
 text-underline-offset: 3px;
}
a.workspace-builder-link:hover {
 color: var(--accent-hover);
}
.workspace-table-meta--muted {
 color: var(--muted);
}

/* ─── Tabs ───────────────────────────────────── */
.tab-bar {
 display: flex;
 gap: 0;
 border-bottom: 1px solid var(--border);
 margin-bottom: 28px;
}
.tab-item {
 padding: 10px 20px;
 font-size: 14px;
 font-weight: 500;
 color: var(--muted);
 border-bottom: 2px solid transparent;
 margin-bottom: -1px;
 cursor: pointer;
 transition: all 0.15s;
 background: none;
 border-top: none;
 border-left: none;
 border-right: none;
}
.tab-item:hover { color: var(--ink); }
.tab-item.active { color: var(--ink); border-bottom-color: var(--mint); }

/* Calmer tabs for dense views (e.g. prototype detail) */
.tab-bar--segmented {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
 padding: 5px;
 margin-bottom: 24px;
 background: var(--surface-2);
 border: 1px solid var(--border);
 border-radius: var(--r-lg);
}
.tab-bar--segmented .tab-item {
 margin-bottom: 0;
 border-bottom: none;
 border-radius: var(--r-md);
 padding: 10px 16px;
 font-size: 13px;
 color: var(--muted);
}
.tab-bar--segmented .tab-item:hover {
 background: rgba(0, 39, 38, 0.04);
 color: var(--ink);
}
.tab-bar--segmented .tab-item.active {
 background: var(--surface);
 color: var(--ink);
 font-weight: 600;
 box-shadow: 0 1px 2px rgba(0, 39, 38, 0.06);
}
.tab-count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1.25rem;
 height: 1.25rem;
 padding: 0 5px;
 margin-left: 6px;
 font-size: 10px;
 font-weight: 700;
 font-family: var(--font-mono);
 color: var(--red);
 background: var(--red-bg);
 border: 1px solid var(--red-border);
 border-radius: var(--r-full);
 vertical-align: middle;
}

/* ─── Score dimension tiles ──────────────────── */
.dimension-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 gap: 12px;
}
.dimension-tile {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 padding: 16px;
 transition: all 0.2s;
}
.dimension-tile.scoring { animation: pulse-border 1.5s ease-in-out infinite; }
.dimension-tile .dim-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-family: var(--font-mono); }
.dimension-tile .dim-score { font-size: 28px; font-weight: 700; font-family: var(--font-mono); color: var(--ink); }
.dimension-tile .dim-finding { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

@keyframes pulse-border {
 0%, 100% { border-color: var(--border); box-shadow: none; }
 50% {
 border-color: rgba(0, 39, 38, 0.2);
 box-shadow: 0 0 0 2px rgba(152, 251, 203, 0.14);
 }
}

/* ─── Progress / Stepper ─────────────────────── */
.stepper {
 display: flex;
 align-items: center;
 gap: 0;
}
.step {
 display: flex;
 align-items: center;
 gap: 10px;
}
.step-dot {
 width: 28px; height: 28px;
 border-radius: 0;
 border: 2px solid var(--border-2);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 font-weight: 600;
 color: var(--muted);
 background: var(--surface);
 flex-shrink: 0;
 transition: all 0.2s;
 font-family: var(--font-mono);
}
.step-dot.active { border-color: var(--ink); color: var(--ink); background: var(--accent-dim); }
.step-dot.done { border-color: var(--green-muted); background: var(--green); color: #fff; }
.step-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.step-label.active { color: var(--ink); }
.step-connector {
 width: 40px;
 height: 1px;
 background: var(--border-2);
 margin: 0 4px;
}
.step-connector.done { background: var(--green-muted); }

/* ─── Empty state ────────────────────────────── */
.empty-state {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 80px 40px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-xl);
}
.empty-icon {
 width: 56px; height: 56px;
 background: var(--surface-2);
 border-radius: var(--r-lg);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 20px;
}
.empty-title { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.empty-body { font-size: 14px; color: var(--muted); max-width: 360px; line-height: 1.6; margin-bottom: 28px; }

/* ─── Inline notices ─────────────────────────── */
.notice {
 padding: 12px 16px;
 border-radius: var(--r-md);
 border: 1px solid;
 font-size: 13px;
 line-height: 1.5;
}
.notice-info { background: var(--mint-15); border-color: rgba(0, 39, 38, 0.12); color: var(--ink); }
.notice-success { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.notice-warning { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber); }
.notice-danger { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }

/* ─── Utility ────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.w-full { width: 100%; }
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }

.divider { height: 1px; background: var(--border); margin: 24px 0; }

.tag {
 display: inline-flex;
 align-items: center;
 padding: 3px 8px;
 border-radius: var(--r-full);
 font-size: 11px;
 font-weight: 500;
 background: var(--surface-2);
 color: var(--muted);
 border: 1px solid var(--border);
}

.code-block {
 background: #001A19;
 color: rgba(214, 255, 246, 0.72);
 border-radius: var(--r-md);
 padding: 20px 24px;
 font-family: var(--font-mono);
 font-size: 13px;
 line-height: 1.7;
 overflow-x: auto;
 position: relative;
}
.code-block .copy-btn {
 position: absolute;
 top: 12px; right: 12px;
 padding: 5px 10px;
 background: rgba(255,255,255,0.1);
 border: 1px solid rgba(255,255,255,0.15);
 border-radius: var(--r-sm);
 color: #A0A0B8;
 font-size: 12px;
 font-family: var(--font-sans);
 transition: all 0.15s;
 cursor: pointer;
}
.code-block .copy-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

.confidence-bar {
 height: 4px;
 border-radius: var(--r-full);
 background: var(--border);
 overflow: hidden;
 margin-top: 8px;
}
.confidence-fill {
 height: 100%;
 border-radius: var(--r-full);
 background: var(--green-muted);
 transition: width 0.6s ease;
}
.confidence-fill.medium { background: var(--amber-muted); }
.confidence-fill.low { background: var(--red-muted); }

/* ─── Landing page specific ──────────────────── */
.hero-section {
 padding: 120px 0 80px;
}
.hero-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--ink);
 background: var(--accent-dim);
 padding: 6px 14px;
 border-radius: var(--r-full);
 border: 1px solid var(--accent-mid);
 margin-bottom: 28px;
}
.hero-headline {
 font-size: clamp(40px, 5vw, 68px);
 font-weight: 700;
 letter-spacing: 0;
 line-height: 1.05;
 color: var(--ink);
 max-width: 820px;
 margin-bottom: 24px;
}
.hero-headline em { font-style: normal; color: var(--green); }
.hero-body {
 font-size: 18px;
 color: var(--muted);
 max-width: 560px;
 line-height: 1.7;
 margin-bottom: 44px;
}
.hero-actions { display: flex; align-items: center; gap: 16px; }

.section { padding: 96px 0; }
.section-label {
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--muted);
 margin-bottom: 16px;
 font-family: var(--font-mono);
}
.section-title {
 font-size: clamp(28px, 3vw, 42px);
 font-weight: 700;
 letter-spacing: -0.02em;
 color: var(--ink);
 margin-bottom: 16px;
 line-height: 1.15;
}
.section-body {
 font-size: 17px;
 color: var(--muted);
 max-width: 560px;
 line-height: 1.7;
}

/* How it works steps */
.how-step {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 64px;
 align-items: center;
 padding: 56px 0;
 border-top: 1px solid var(--border);
}
.how-step:last-child { border-bottom: 1px solid var(--border); }
.how-step.reverse { direction: rtl; }
.how-step.reverse > * { direction: ltr; }

.step-num {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.1em;
 color: var(--muted);
 text-transform: uppercase;
 margin-bottom: 16px;
}
.step-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 14px; line-height: 1.25; }
.step-desc { font-size: 16px; color: var(--muted); line-height: 1.7; }

/* Feature grid */
.feature-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2px;
 background: var(--border);
 border-radius: var(--r-xl);
 overflow: hidden;
}
.feature-card {
 background: var(--surface);
 padding: 32px;
}
.feature-icon {
 width: 40px; height: 40px;
 border-radius: var(--r-md);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 16px;
 background: var(--surface-2);
 border: 1px solid var(--border);
}
.feature-title { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.feature-desc { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* Pricing */
.pricing-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
 margin-top: 56px;
}
.pricing-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-xl);
 padding: 32px;
 position: relative;
}
.pricing-card.featured {
 border-color: var(--accent);
 box-shadow: 0 0 0 1px var(--accent);
}
.pricing-badge {
 position: absolute;
 top: -12px;
 left: 50%;
 transform: translateX(-50%);
 background: var(--accent);
 color: var(--mint);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 padding: 4px 12px;
 border-radius: var(--r-full);
}
.pricing-tier { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-family: var(--font-mono); }
.pricing-amount { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.pricing-amount span { font-size: 18px; font-weight: 400; color: var(--muted); }
.pricing-period { font-size: 13px; color: var(--muted); margin-top: 4px; }
.pricing-divider { height: 1px; background: var(--border); margin: 24px 0; }
.pricing-feature {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 14px;
 color: var(--ink-2);
 margin-bottom: 12px;
}
.pricing-feature svg { flex-shrink: 0; color: var(--green-muted); }
.pricing-feature.muted { color: var(--muted); }
.pricing-feature.muted svg { color: var(--subtle); }

/* Footer */
.footer {
 background: var(--ink);
 color: rgba(255,255,255,0.5);
 padding: 64px 0 40px;
}
.footer-brand { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.02em; }
.footer-tagline { font-size: 13px; color: rgba(255,255,255,0.4); line-height: 1.5; }
.footer-heading { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 16px; font-family: var(--font-mono); }
.footer-link { font-size: 14px; color: rgba(255,255,255,0.5); display: block; margin-bottom: 10px; transition: color 0.15s; }
.footer-link:hover { color: rgba(255,255,255,0.85); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 48px; padding-top: 24px; font-size: 13px; }

/* ─── Animations ─────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

.animate-fade { animation: fadeIn 0.3s ease forwards; }
.animate-slide { animation: slideIn 0.2s ease forwards; }
.spinner { animation: spin 0.8s linear infinite; }

/* ─── Mobile hamburger menu ─────────────────── */
.app-mobile-topnav-burger {
 display: none;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 margin-left: auto;
 flex-shrink: 0;
 background: transparent;
 border: none;
 cursor: pointer;
 padding: 8px;
 border-radius: var(--r-md);
 transition: background 0.12s;
}
.app-mobile-topnav-burger:hover { background: var(--surface-2); }
.app-mobile-topnav-burger svg { display: block; }

/* Mobile nav overlay */
.app-mobile-menu {
 display: none;
 position: fixed;
 top: 52px;
 left: 0;
 right: 0;
 bottom: 0;
 background: var(--surface);
 z-index: 59;
 overflow-y: auto;
 flex-direction: column;
 padding: 8px 12px 24px;
 border-top: 1px solid var(--border);
}
.app-mobile-menu.is-open { display: flex; }

.app-mobile-menu-section {
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--subtle);
 padding: 16px 8px 6px;
}
.app-mobile-menu-link {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 8px;
 border-radius: var(--r-md);
 font-size: 15px;
 font-weight: 500;
 color: var(--ink-70);
 text-decoration: none;
 transition: background 0.12s, color 0.12s;
}
.app-mobile-menu-link:hover { background: var(--surface-2); color: var(--ink); }
.app-mobile-menu-link.active { background: var(--accent-dim); color: var(--ink); font-weight: 600; }
.app-mobile-menu-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.6; }
.app-mobile-menu-link.active svg { opacity: 1; }
.app-mobile-menu-divider { height: 1px; background: var(--border); margin: 8px 0; }

.app-mobile-menu-user-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 padding: 10px 8px 12px;
 min-width: 0;
}
a.app-mobile-menu-user-name {
 flex: 1;
 font-size: 14px;
 font-weight: 600;
 color: var(--ink);
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 text-decoration: none;
}
a.app-mobile-menu-user-name:hover {
 color: var(--ink);
 text-decoration: underline;
 text-underline-offset: 2px;
}
a.app-mobile-menu-settings {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 width: 40px;
 height: 40px;
 margin: -6px -4px -6px 0;
 border-radius: var(--r-md);
 color: var(--muted);
 text-decoration: none;
 transition: background 0.12s, color 0.12s;
}
a.app-mobile-menu-settings:hover {
 background: var(--surface-2);
 color: var(--ink);
}
a.app-mobile-menu-settings.active {
 background: var(--accent-dim);
 color: var(--ink);
}
a.app-mobile-menu-settings .nav-icon {
 width: 20px;
 height: 20px;
 opacity: 0.75;
}
a.app-mobile-menu-settings.active .nav-icon {
 opacity: 1;
}

/* Proto detail: mobile tab dropdown */
.proto-tab-dropdown {
 display: none;
 width: 100%;
 padding: 10px 14px;
 font-family: var(--font-sans);
 font-size: 14px;
 font-weight: 500;
 color: var(--ink);
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 appearance: none;
 -webkit-appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23002726' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 12px center;
 padding-right: 36px;
 cursor: pointer;
 margin-bottom: 20px;
}

/* ─── Integrations list ─────────────────────── */
.integration-list {
 display: flex;
 flex-direction: column;
 gap: 0;
}
.integration-row {
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 16px 20px;
 align-items: start;
 padding: 20px 0;
 border-bottom: 1px solid var(--border);
}
.integration-row:last-child { border-bottom: none; }
.integration-row--no-actions {
 grid-template-columns: auto 1fr;
}
.integration-row__logo {
 width: 44px;
 height: 44px;
 flex-shrink: 0;
 color: var(--ink);
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--r-md);
 background: var(--surface-2);
 border: 1px solid var(--border);
}
.integration-row__logo svg {
 width: 26px;
 height: 26px;
}
.integration-row__body { min-width: 0; }
.integration-row__title {
 font-size: 16px;
 font-weight: 600;
 color: var(--ink);
 margin: 0 0 6px;
 letter-spacing: -0.02em;
}
.integration-row__desc {
 font-size: 14px;
 line-height: 1.55;
 color: var(--ink-2);
 margin: 0;
}
.integration-category-tabs {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 margin-bottom: 12px;
}
.integration-category-tabs .btn {
 flex: 0 1 auto;
}
.integration-section-heading {
 font-family: var(--font-sans);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted);
 margin: 0 0 12px;
 padding-top: 8px;
 border-top: 1px solid var(--border);
}
.integration-list .integration-section-heading:first-child {
 border-top: none;
 padding-top: 0;
}

.integration-row__meta {
 font-size: 13px;
 color: var(--muted);
 margin: 8px 0 0;
 line-height: 1.45;
}
.integration-row__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 justify-content: flex-end;
 align-self: center;
}
@media (max-width: 640px) {
 .integration-row {
  grid-template-columns: 1fr;
 }
 .integration-row__actions {
  justify-content: flex-start;
 }
}

/* ─── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--subtle); }

/* ─── Media queries ──────────────────────────── */
@media (max-width: 768px) {
 .container { padding: 0 20px; }
 .how-step, .how-step.reverse { grid-template-columns: 1fr; direction: ltr; gap: 32px; }
 .feature-grid { grid-template-columns: 1fr; }
 .pricing-grid { grid-template-columns: 1fr; }
 .hero-section { padding: 80px 0 60px; }
 .app-shell {
 flex-direction: column;
 height: auto;
 min-height: 100vh;
 overflow: visible;
 }
 .sidebar { display: none !important; }
 .app-mobile-topnav { display: flex; }
 .app-mobile-topnav-org { display: block; }
 .app-main {
 overflow: visible;
 flex: 1;
 min-height: 0;
 }
 .page-header, .page-content { padding-left: 20px; padding-right: 20px; }
 .page-header {
 padding-top: 24px;
 margin-bottom: 20px;
 }
 .workspace-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
 .page-header-split {
 flex-direction: column;
 align-items: stretch !important;
 gap: 12px !important;
 }
 /* Column layout: do not flex-grow the title block or it adds a gap under the subtitle */
 .page-header-split > div:first-child {
 flex: 0 0 auto;
 }
 .page-header-actions {
 justify-content: flex-start;
 }
 .workspace-toolbar {
 flex-direction: column !important;
 align-items: stretch !important;
 justify-content: flex-start !important;
 }
 .workspace-toolbar__ctl--search {
 flex: none;
 min-width: 0;
 }
 .workspace-toolbar__search {
 width: 100% !important;
 max-width: none;
 }
 .workspace-toolbar__filter,
 .workspace-toolbar__sort {
 width: 100% !important;
 }
 .settings-layout {
 grid-template-columns: 1fr !important;
 }
 .settings-nav {
 max-width: 100%;
 }
 .table-wrap {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 }
 .table-wrap .data-table {
 min-width: 720px;
 }
 body.page-people .table-wrap {
 overflow-x: hidden;
 }
 body.page-people .table-wrap .data-table {
 min-width: 0;
 width: 100%;
 table-layout: fixed;
 }
 body.page-people .table-wrap .data-table th,
 body.page-people .table-wrap .data-table td {
 word-break: break-word;
 overflow-wrap: break-word;
 padding-left: 10px;
 padding-right: 10px;
 }
 .connections-layout {
 grid-template-columns: 1fr !important;
 }
 .workspace-insights {
 grid-template-columns: 1fr !important;
 }
 .grid.grid-2 {
 grid-template-columns: 1fr !important;
 }
 /* Hamburger replaces scroll links */
 .app-mobile-topnav-scroll { display: none !important; }
 .app-mobile-topnav-burger { display: flex; }
 /* Proto detail: show dropdown, hide vertical subnav */
 .proto-tab-dropdown { display: block; }
 .proto-lower { grid-template-columns: 1fr !important; }
 .proto-subnav { display: none !important; }
}
@media (max-width: 480px) {
 .workspace-stats-grid { grid-template-columns: 1fr !important; }
}

/* Global toasts — persist until dismissed (integration sync, app feedback) */
.app-toast-stack {
 position: fixed;
 bottom: 24px;
 right: 24px;
 left: auto;
 z-index: 110;
 display: flex;
 flex-direction: column;
 gap: 10px;
 max-width: min(440px, calc(100vw - 32px));
 pointer-events: none;
}

.app-toast-stack > * {
 pointer-events: auto;
}

.app-toast {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 12px 12px 12px 14px;
 border: 1px solid var(--border);
 background: var(--surface);
 box-shadow: var(--shadow-md);
 font-size: 13px;
 line-height: 1.5;
 color: var(--ink-2);
}

.app-toast__message {
 margin: 0;
 flex: 1;
 min-width: 0;
 word-break: break-word;
}

.app-toast__dismiss {
 flex-shrink: 0;
 min-width: 36px;
 min-height: 36px;
 padding: 0;
 font-size: 20px;
 line-height: 1;
 color: var(--muted);
}

.app-toast__dismiss:hover {
 color: var(--ink);
}

.app-toast--info {
 border-color: var(--border);
}

.app-toast--success {
 background: var(--green-bg);
 border-color: var(--green-border);
 color: var(--ink-2);
}

.app-toast--error {
 background: var(--amber-bg);
 border-color: var(--amber-border);
 color: var(--ink-2);
}

@media (max-width: 480px) {
 .app-toast-stack {
  right: 16px;
  left: 16px;
  max-width: none;
 }
}