/* ═══════════════════════════════════════════════════════════
   Workbench v2 · MVP · shared styles
   Loaded by every page in /site/workbench/.
   Page-specific styles live in snapshot.css and pdf.css.
   ═══════════════════════════════════════════════════════════ */

:root {
  --signal:      #1C7AFE;
  --signal-soft: rgba(28,122,254,0.08);
  --signal-dark: #0F5BC9;
  --signal-tint: #E8F0FE;
  --indigo-500:      #1E1A4E;
  --matrix:      #1FB879;
  --matrix-deep: #117A4D;  /* legible green for text on light bg */
  --caution-deep: #946011; /* AA-legible amber for text on light bg */
  --cloud:       #8AB5F6;
  --mainframe:   #111E45;
  --ghost:       #F5F5F5;
  --paper:       #FFFFFF;
  --line:        rgba(17,30,69,0.08);
  --ink-1:       #111E45;
  --ink:         #1A2A55;
  --ink-2:       #2C3D6E;
  --ink-3:       #6A7BA1;
  --adverse:     #DC3E3E;
  --caution:     #E5A33A;
  /* --gold-deep retired — Core+ is Forest below; var was unused */
  --forest:      #0A8C82;  /* Core+ premium accent (gold retired) */
  --forest-deep: #07685F;  /* Core+ text on light/tinted bg */
  --warm:        #8A7B6E;  /* Coming-soon / supporting neutral */
  --warm-deep:   #6B5F54;  /* Coming-soon text on light/tinted bg */
  --ease:        cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ── Core+ badge · unified component (use everywhere; see landing.html, marketing.css, marvin-one-pager.html) ── */
.core-plus {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Onest', sans-serif; font-weight: 900;
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #0A8C82;
  background: rgba(10,140,130,0.12);
  border: 1px solid rgba(10,140,130,0.26);
  border-radius: 100px; padding: 2px 7px;
  white-space: nowrap; vertical-align: middle;
}
.core-plus svg, .core-plus i { width: 9px; height: 9px; stroke-width: 2.5; flex-shrink: 0; }
/* inverted to white when nested inside an unlocked Core+ chip */
.unlocked .core-plus { background: rgba(255,255,255,0.22); color: #fff; border-color: rgba(255,255,255,0.40); }

/* Shared demo "research running" banner */
.demo-run-banner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 14px; width: min(720px, calc(100vw - 32px)); padding: 12px 14px 12px 18px; border-radius: 12px; background: linear-gradient(120deg, #1E1A4E, #1C7AFE); color: #fff; box-shadow: 0 14px 44px rgba(7,13,25,0.42); font-family: 'Onest', sans-serif; }
.demo-run-banner[hidden] { display: none; }
.demo-run-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex-shrink: 0; animation: drb-pulse 1.6s infinite; }
@keyframes drb-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.demo-run-text { font-size: 13px; line-height: 1.4; flex: 1; }
.demo-run-text strong { font-weight: 700; }
.demo-run-cta { flex-shrink: 0; background: rgba(255,255,255,0.18); color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 8px; white-space: nowrap; }
.demo-run-cta:hover { background: rgba(255,255,255,0.28); }
.demo-run-close { background: transparent; border: none; color: rgba(255,255,255,0.7); font-size: 17px; line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0 2px; }
.demo-run-close:hover { color: #fff; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: 'Onest', system-ui, sans-serif;
  color: var(--ink-1);
  background: var(--ghost);
  margin: 0;
  line-height: 1.5;
}
em, i { font-style: normal; font-weight: 300; }

/* Type utilities */
.f-cap {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.f-cap-sm {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────
   Page shell · every workbench page is the same shape:
   sidebar (240px) + main canvas. Local-file friendly, no JS
   shell needed.
   ────────────────────────────────────────────────────────── */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.canvas {
  background: var(--ghost);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.frame-head {
  padding: 12px 18px;
  background: white;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 10;
}
.frame-dots { display: flex; gap: 5px; }
.frame-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(17,30,69,0.10); }
.frame-crumbs {
  font-family: 'SUSE Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--ink-3);
}
.frame-crumbs b { color: var(--ink); }
.frame-tag {
  margin-left: auto;
  font-family: 'SUSE Mono', monospace;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-3);
}
.canvas-wrap { padding: 28px 36px 48px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ──────────────────────────────────────────────────────────
   Sidebar · workspace identity, primary nav, user card
   ────────────────────────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, #1A2A55 0%, #12204A 60%, #0D1940 100%);
  color: rgba(255,255,255,0.88);
  padding: 18px 14px 14px;
  display: flex; flex-direction: column;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 14px;
  text-decoration: none;
}
.sidebar-brand-mark {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, #1C7AFE 0%, #0F4FB8 100%);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.sidebar-brand-wordmark {
  color: white; font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
}
.sidebar-primary-action {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 10px 12px;
  background: var(--signal);
  color: white;
  border: none; border-radius: 9px;
  font-family: 'Onest', sans-serif;
  font-weight: 500; font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(28,122,254,0.30), inset 0 1px 0 rgba(255,255,255,0.16);
  margin-bottom: 14px;
}
.sidebar-primary-action span:first-child { font-size: 14px; }

.entity-card {
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 14px;
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 10px;
  min-width: 0;
  text-decoration: none;
}
.entity-card > div:not(.entity-avatar) {
  flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden;
}
.entity-avatar {
  width: 36px; height: 36px; border-radius: 9px;
  background: #0A1433; color: #6A82B8;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
  flex-shrink: 0;
  font-family: 'SUSE Mono', monospace;
}
.entity-name {
  font-size: 16px; line-height: 1.2; color: white;
  margin-bottom: 4px;
  font-weight: 700;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere; word-break: break-word; white-space: normal;
}
.entity-sub {
  font-family: 'SUSE Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); font-weight: 500;
}
.risk-pill {
  margin: 0 0 14px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  font-size: 12px; color: rgba(255,255,255,0.78);
  display: flex; align-items: center; gap: 8px;
  font-weight: 500;
  text-decoration: none;
}
.risk-pill-spark { color: var(--cloud); font-size: 11px; flex-shrink: 0; }
.risk-pill-caret { margin-left: auto; opacity: 0.6; font-size: 10px; flex-shrink: 0; }
.risk-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar-rail-head {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  padding: 14px 4px 8px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 500;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  cursor: pointer;
}
.sidebar-item:hover { background: rgba(255,255,255,0.06); color: white; }
.sidebar-item.active {
  background: rgba(28,122,254,0.18);
  color: white;
  font-weight: 600;
}
.sidebar-item-icon {
  width: 20px; text-align: center;
  color: rgba(255,255,255,0.50); font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-item-icon svg {
  width: 15px; height: 15px; stroke-width: 2;
}
.sidebar-item-icon svg.filled-icon {
  fill: currentColor;
}
.sidebar-item-count {
  margin-left: auto;
  font-family: 'SUSE Mono', monospace;
  font-size: 9.5px; font-weight: 500;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
}
.sidebar-spacer { flex: 1; }
.sidebar-user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.05);
}
.sidebar-user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5C7AB8, #2A3F70);
  flex-shrink: 0;
}
.sidebar-user-name { color: white; font-size: 12.5px; font-weight: 500; }
.sidebar-user-email { font-family: 'SUSE Mono', monospace; font-size: 9.5px; color: rgba(255,255,255,0.45); }
.sidebar-user-caret { color: rgba(255,255,255,0.55); font-size: 10px; }

/* ──────────────────────────────────────────────────────────
   Dashboard greeting + quick-search
   ────────────────────────────────────────────────────────── */
.dash-greet-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 18px; align-items: center;
  margin-bottom: 22px;
}
.dash-greet-kicker {
  font-family: 'SUSE Mono', monospace;
  font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px;
}
.dash-greet-title {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.018em;
  color: var(--ink-1);
  margin: 0;
}
.dash-greet-title em { color: var(--signal); font-weight: 300; }
.dash-greet-sub { color: var(--ink-2); font-size: 13.5px; margin-top: 6px; }

.dash-quicksearch {
  display: flex; align-items: center; gap: 8px;
  width: 360px;
  padding: 8px 10px 8px 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(17,30,69,0.03);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.dash-quicksearch:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(28,122,254,0.16); }
.dash-quicksearch-icon { color: var(--ink-3); font-size: 14px; }
.dash-quicksearch input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: 'Onest', sans-serif; font-size: 13px;
  color: var(--ink);
}
.dash-quicksearch input::placeholder { color: var(--ink-3); }
.dash-quicksearch-go {
  padding: 6px 12px;
  background: var(--signal); color: white;
  border: none; border-radius: 8px;
  font-family: 'Onest', sans-serif; font-weight: 500; font-size: 12px;
  cursor: pointer;
  transition: opacity 140ms var(--ease);
}
.dash-quicksearch-go:disabled { opacity: 0.42; cursor: not-allowed; }

/* ──────────────────────────────────────────────────────────
   Value card · 4 metric cards row at top of dashboard
   ────────────────────────────────────────────────────────── */
.value-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.value-hero { padding-right: 18px; border-right: 1px solid var(--line); }
.value-kicker {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.value-big {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 56px;
  line-height: 1; letter-spacing: -0.026em;
  color: var(--ink-1);
}
.value-big sub {
  font-size: 16px; font-weight: 500;
  color: var(--ink-3); margin-left: 4px;
  vertical-align: 0;
}
.value-hero-sub {
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-2); margin-top: 8px;
}
.value-hero-delta {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(31,184,121,0.12);
  color: var(--matrix);
  font-family: 'SUSE Mono', monospace;
  font-size: 10.5px; font-weight: 600;
}
.value-stat-num {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 32px;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--ink-1);
  margin-top: 4px;
}
.value-stat-num em { color: var(--signal); font-weight: 300; font-size: 18px; }
.value-stat-label { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
.value-stat-bar {
  margin-top: 10px;
  height: 6px;
  background: rgba(17,30,69,0.06);
  border-radius: 100px;
  overflow: hidden;
}
.value-stat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--signal), var(--cloud));
  border-radius: 100px;
}
.value-stat-meta {
  font-family: 'SUSE Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--ink-3); margin-top: 5px;
}

/* ──────────────────────────────────────────────────────────
   Risk profile card · empty + populated states
   Lives on dashboard. Edit button links to risk-profile.html.
   ────────────────────────────────────────────────────────── */
.risk-profile-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 18px;
  position: relative;
}
.risk-profile-card.empty {
  background: linear-gradient(135deg, rgba(28,122,254,0.05), rgba(28,122,254,0.01));
  border: 1px dashed rgba(28,122,254,0.32);
  text-align: center;
  padding: 38px 24px;
}
.risk-profile-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 14px;
}
.risk-profile-head-text { flex: 1; min-width: 0; }
.risk-profile-kicker {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.risk-profile-pill-coreplus {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 9px;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(30,26,78,0.18), rgba(30,26,78,0.08));
  color: var(--indigo-500);
  border: 1px solid rgba(30,26,78,0.32);
}
.risk-profile-title {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.014em;
  color: var(--ink-1);
  margin: 0;
}
.risk-profile-title em { color: var(--signal); font-weight: 300; }
.risk-profile-sub {
  font-size: 13px; color: var(--ink-2);
  line-height: 1.5; margin-top: 6px;
}
.risk-profile-edit {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(28,122,254,0.08);
  border: 1px solid rgba(28,122,254,0.22);
  color: var(--signal);
  font-family: 'Onest', sans-serif; font-weight: 600; font-size: 12px;
  cursor: pointer; flex-shrink: 0;
  text-decoration: none;
  display: inline-block;
}
.risk-profile-edit:hover { background: rgba(28,122,254,0.16); }
.risk-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 4px;
}
.risk-profile-block {
  padding: 12px 14px;
  background: rgba(17,30,69,0.025);
  border-radius: 10px;
}
.risk-profile-block-label {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.risk-profile-block-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.risk-profile-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-family: 'Onest', sans-serif;
  font-weight: 500;
  background: white;
  border: 1px solid rgba(17,30,69,0.10);
  color: var(--ink-2);
}
.risk-profile-tag.adverse { background: rgba(220,62,62,0.06); border-color: rgba(220,62,62,0.20); color: var(--adverse); }
.risk-profile-tag.caution { background: rgba(229,163,58,0.10); border-color: rgba(229,163,58,0.28); color: var(--gold-deep); }
.risk-profile-tag.signal { background: rgba(28,122,254,0.06); border-color: rgba(28,122,254,0.22); color: var(--signal); font-weight: 600; }

.risk-profile-empty-mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cloud);
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.risk-profile-empty-mark img { width: 44px; height: 44px; }
.risk-profile-empty-title {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.014em;
  color: var(--ink-1);
  margin: 0 0 8px;
}
.risk-profile-empty-title em { color: var(--signal); font-weight: 300; }
.risk-profile-empty-sub {
  font-size: 13.5px; color: var(--ink-2);
  max-width: 540px; margin: 0 auto 18px;
  line-height: 1.55;
}
.risk-profile-empty-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: var(--signal); color: white;
  border: none; border-radius: 11px;
  font-family: 'Onest', sans-serif; font-weight: 600; font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(28,122,254,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
}
.risk-profile-empty-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(28,122,254,0.42); }
.risk-profile-empty-meta {
  margin-top: 14px;
  font-family: 'SUSE Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ──────────────────────────────────────────────────────────
   Recent snapshots · big-card view
   ────────────────────────────────────────────────────────── */
.recent-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.recent-title {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 18px;
  letter-spacing: -0.012em;
  color: var(--ink-1);
}
.recent-meta { font-size: 12px; color: var(--ink-3); }
.recent-meta a { color: var(--signal); font-weight: 600; text-decoration: none; }
.recent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.recent-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), transform 140ms var(--ease);
}
.recent-card:hover {
  border-color: rgba(28,122,254,0.32);
  box-shadow: 0 4px 14px rgba(17,30,69,0.06);
  transform: translateY(-1px);
}
.recent-card-head {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 12px;
}
.recent-card-avatar {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: white; font-weight: 700; font-size: 16px;
  font-family: 'SUSE Mono', monospace;
}
.recent-card-name-wrap { flex: 1; min-width: 0; }
.recent-card-name {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 16px;
  letter-spacing: -0.012em;
  color: var(--ink-1);
  margin-bottom: 4px;
}
.recent-card-sub {
  font-size: 12px; color: var(--ink-3);
  line-height: 1.45;
}
.recent-card-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  font-family: 'Onest', sans-serif;
  font-weight: 600; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  flex-shrink: 0;
}
/* Snapshot-card lifecycle states (AA) — see 05-delivery/dashboard-card-states.md */
.recent-card-status.researching { background: rgba(28,122,254,0.12); color: var(--signal-dark); }
.recent-card-status.researching .rc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: rc-pulse 1.6s infinite; }
@keyframes rc-pulse { 0% { box-shadow: 0 0 0 0 rgba(28,122,254,0.5); } 70% { box-shadow: 0 0 0 5px rgba(28,122,254,0); } 100% { box-shadow: 0 0 0 0 rgba(28,122,254,0); } }
.recent-card-status.new { background: rgba(28,122,254,0.12); color: var(--signal-dark); }
.recent-card-status.date { background: rgba(17,30,69,0.06); color: var(--ink-2); }
.recent-card-status.bound { background: rgba(31,184,121,0.16); color: var(--matrix-deep); }
.recent-card-status.renewing { background: rgba(229,163,58,0.16); color: var(--caution-deep); }
.recent-card-status.canceled { background: rgba(220,62,62,0.10); color: #B42318; }
/* legacy aliases (older pages) */
.recent-card-status.research { background: rgba(28,122,254,0.12); color: var(--signal-dark); }
.recent-card-status.flagged { background: rgba(220,62,62,0.10); color: #B42318; }
.recent-card-policy {
  font-family: 'SUSE Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: 4px;
}
.recent-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.recent-card-stat-label {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 9px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 3px;
}
.recent-card-stat-value {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 16px;
  color: var(--ink-1);
  letter-spacing: -0.014em;
}
.recent-card-stat-value.high { color: #B42318; }
.recent-card-stat-value.med { color: var(--caution-deep); }
.recent-card-stat-value.low { color: var(--matrix-deep); }

/* ──────────────────────────────────────────────────────────
   First-time-user trust card · 3 Q&A items
   ────────────────────────────────────────────────────────── */
.ftu-card {
  background: white;
  border: 1px solid rgba(28,122,254,0.20);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 18px;
  position: relative;
}
.ftu-card-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 12px; line-height: 1;
}
.ftu-card-close:hover { background: rgba(17,30,69,0.05); color: var(--ink); }
.ftu-card-head {
  display: flex; gap: 14px; margin-bottom: 14px;
}
.ftu-card-mark {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cloud);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}
.ftu-card-mark img { width: 38px; height: 38px; }
.ftu-card-title-wrap { flex: 1; min-width: 0; padding-right: 30px; }
.ftu-card-kicker {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--signal); margin-bottom: 6px;
}
.ftu-card-title {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.014em;
  color: var(--ink-1);
  margin: 0;
}
.ftu-card-title em { color: var(--signal); font-weight: 300; }
.ftu-card-sub {
  font-size: 13.5px; color: var(--ink-2);
  margin-top: 6px;
}
.ftu-grid { display: flex; flex-direction: column; gap: 6px; }
.ftu-row {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.ftu-row:hover { border-color: rgba(28,122,254,0.32); background: rgba(28,122,254,0.04); }
.ftu-row.read { border-color: rgba(31,184,121,0.32); background: rgba(31,184,121,0.04); }
.ftu-row-head {
  display: flex; align-items: center; justify-content: space-between;
}
.ftu-row-q {
  font-family: 'Onest', sans-serif;
  font-weight: 600; font-size: 13.5px;
  color: var(--ink-1);
}
.ftu-row-toggle { color: var(--ink-3); font-size: 13px; transition: transform 140ms var(--ease); }
.ftu-row.open .ftu-row-toggle { transform: rotate(180deg); color: var(--signal); }
.ftu-row-body {
  max-height: 0; overflow: hidden;
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
  transition: max-height 220ms var(--ease), padding-top 220ms var(--ease);
}
.ftu-row.open .ftu-row-body {
  max-height: 360px;
  padding-top: 8px;
}
.ftu-row-body strong { font-weight: 600; }
.ftu-row-body em { color: var(--signal); font-weight: 300; }
.ftu-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ftu-progress {
  font-family: 'SUSE Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-3);
}
.ftu-progress b { color: var(--ink); font-weight: 600; }
.ftu-dismiss-btn {
  padding: 7px 14px;
  background: var(--mainframe); color: white;
  border: none; border-radius: 9px;
  font-family: 'Onest', sans-serif; font-weight: 500; font-size: 12.5px;
  cursor: pointer;
}
.ftu-card.dismissed { display: none; }

/* ──────────────────────────────────────────────────────────
   Buttons
   ────────────────────────────────────────────────────────── */
.btn-primary {
  padding: 10px 18px;
  background: var(--signal); color: white;
  border: none; border-radius: 10px;
  font-family: 'Onest', sans-serif; font-weight: 600; font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 1px 2px rgba(28,122,254,0.30), inset 0 1px 0 rgba(255,255,255,0.16);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(28,122,254,0.32); }

/* Extra fields toggle — search form */
.extra-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 14px; margin-bottom: 14px;
  background: rgba(17,30,69,0.025); border: 1px dashed var(--line); border-radius: 10px;
  font-family: 'Onest', sans-serif; font-size: 13px; color: var(--ink-2);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.extra-toggle:hover { background: rgba(17,30,69,0.05); border-color: rgba(17,30,69,0.18); }
.extra-toggle-icon {
  flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: rgba(28,122,254,0.08); color: var(--signal); font-size: 14px; font-weight: 700;
}
.extra-toggle-label { font-weight: 600; color: var(--ink-1); }
.extra-toggle-sub { color: var(--ink-3); font-size: 11.5px; }
.extra-toggle-caret {
  margin-left: auto; font-size: 11px; color: var(--ink-3);
  transition: transform .2s;
}
.extra-toggle.open .extra-toggle-caret { transform: rotate(180deg); }
.extra-toggle.open .extra-toggle-icon { background: rgba(28,122,254,0.14); }
.extra-toggle.open { border-style: solid; border-color: rgba(28,122,254,0.20); background: rgba(28,122,254,0.03); }

.extra-fields {
  display: none; flex-direction: column; gap: 12px;
  margin-bottom: 14px; padding: 16px; background: rgba(17,30,69,0.018);
  border: 1px solid var(--line); border-radius: 12px;
}
.extra-fields.open { display: flex; }
.extra-fields-hint {
  font-size: 12px; line-height: 1.5; color: var(--ink-3);
  padding: 8px 12px; background: rgba(28,122,254,0.04); border-radius: 8px;
  border-left: 2px solid var(--signal);
}

.btn-secondary {
  padding: 10px 18px;
  background: white; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: 'Onest', sans-serif; font-weight: 600; font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-secondary:hover { border-color: rgba(28,122,254,0.32); color: var(--signal); }

.marvin-stage {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cloud);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: visible;
}
.marvin-stage img { width: 38px; height: 38px; }

/* "No data available" inline callout */
.no-data {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(30,26,78,0.08);
  border: 1px dashed rgba(30,26,78,0.40);
  color: var(--indigo-500);
  font-family: 'Onest', sans-serif;
  font-weight: 600; font-size: 11px;
  cursor: pointer;
}
.no-data:hover { background: rgba(30,26,78,0.16); border-color: var(--indigo-500); }
.no-data::before { content: '◇'; font-size: 9px; }

/* ──────────────────────────────────────────────────────────
   Source pill family · base styling. Used in the snapshot
   sources strip and in the masked-URL reveal panel.
   ────────────────────────────────────────────────────────── */
.src-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 7px;
  border-radius: 999px;
  font-family: 'Onest', sans-serif;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: padding 140ms var(--ease), background-color 140ms var(--ease);
}
.src-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}
.src-pill.sigma360   { background: rgba(30,26,78,0.14); color: var(--indigo-500); }
.src-pill.linq360    { background: rgba(28,122,254,0.12);  color: var(--signal); }
.src-pill.marvin     { background: rgba(28,122,254,0.12);  color: var(--signal-500, #1C7AFE); font-weight: 600; }
.src-pill.marvin2    { background: rgba(17,30,69,0.10);    color: var(--mainframe); }
.src-pill.records      { background: rgba(220,62,62,0.10);   color: var(--adverse); }
.src-pill.outscraper { background: rgba(45,178,178,0.14);  color: #1E7D7D; }
.src-pill.firecrawl  { background: rgba(255,124,76,0.14);  color: #C95217; }
.src-pill.profound   { background: rgba(31,184,121,0.14);  color: var(--matrix); }
.src-pill.perplexity { background: rgba(229,163,58,0.16);  color: var(--gold-deep); }
.src-pill.web {
  background: rgba(17,30,69,0.04);
  border: 1px dashed rgba(17,30,69,0.22);
  color: var(--ink-2);
  padding: 1px 7px;
}
.src-pill.web::before { display: none; }

/* ──────────────────────────────────────────────────────────
   Toast notifications · floats above the FAB and content.
   ────────────────────────────────────────────────────────── */
.toast-wrap {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex; flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--mainframe);
  color: white;
  padding: 12px 18px;
  border-radius: 100px;
  font-family: 'Onest', sans-serif;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(17,30,69,0.32);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  pointer-events: auto;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--matrix);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────
   Page section headers (used on risk-profile, search, etc.)
   ────────────────────────────────────────────────────────── */
.page-kicker {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 8px;
}
.page-title {
  font-family: 'Onest', sans-serif;
  font-weight: 700; font-size: 32px;
  letter-spacing: -0.020em;
  color: var(--ink-1);
  margin: 0 0 8px;
}
.page-title em { color: var(--signal); font-weight: 300; }
.page-sub {
  font-size: 14px; color: var(--ink-2);
  max-width: 680px; margin: 0 0 22px;
  line-height: 1.55;
}