/* Lead Radar dashboard stylesheet.
   The design system is the AVRP PM Dashboard's (Desktop/PM Dashboard/src/index.css and
   tailwind.config.js), transcribed to plain CSS so this no-build app looks like the same
   application: same tokens, same light and dark palettes, same sidebar chrome, widget
   surfaces, filter pills, type scale, radii and elevation. Keep the two in step. */

@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-opsz-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Inter Variable"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-opsz-italic.woff2) format("woff2-variations"); }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations"); }

/* ───────────────────────── tokens (light) ───────────────────────── */
:root {
  --font-sans: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --bg-canvas-rgb: 244 247 248;
  --bg-surface-rgb: 255 255 255;
  --bg-well-rgb: 238 242 244;
  --bg-track-rgb: 228 233 236;
  --bg-dark-rgb: 12 20 22;
  --bg-hero-rgb: 12 20 22;
  --hairline-rgb: 12 20 22;
  --hairline-solid-rgb: 232 236 239;

  --ink-1-rgb: 12 20 22;
  --ink-2-rgb: 74 88 94;
  --ink-3-rgb: 89 104 111;
  --ink-4-rgb: 139 152 158;
  --on-dark-1-rgb: 255 255 255;
  --on-dark-2-rgb: 228 244 247;
  --on-dark-3-rgb: 190 231 238;

  --chrome-active: rgb(159 224 234 / 0.15);
  --chrome-hover: rgb(255 255 255 / 0.07);
  --chrome-line: rgb(255 255 255 / 0.07);
  --chrome-muted: rgb(255 255 255 / 0.72);
  --chrome-faint: rgb(255 255 255 / 0.5);

  --brand-rgb: 22 117 144;
  --brand-deep-rgb: 14 92 110;
  --brand-lift-rgb: 42 146 169;
  --brand-accent-rgb: 159 224 234;
  --tint-brand-rgb: 230 241 244;
  --tint-neutral-rgb: 238 242 244;
  --tint-alpha: 1;              /* dark tints are the hue at low alpha */

  --moss-rgb: 31 122 77;
  --warn-rgb: 209 145 0;
  --warn-text-rgb: 143 91 18;
  --signal-rgb: 179 38 30;
  --tint-moss-rgb: 227 244 238;
  --tint-warn-rgb: 249 239 221;
  --tint-signal-rgb: 251 231 228;

  --radius-hero: 22px; --radius-widget: 18px; --radius-inner: 12px; --radius-seg: 10px; --radius-chip: 8px; --radius-pill: 999px;

  --shadow-rgb: 12 20 22;
  --shadow-rest: 0 0 0 1px rgb(var(--shadow-rgb) / 0.055), 0 1px 2px rgb(var(--shadow-rgb) / 0.04), 0 2px 8px rgb(var(--shadow-rgb) / 0.035);
  --shadow-hover: 0 0 0 1px rgb(var(--shadow-rgb) / 0.075), 0 2px 4px rgb(var(--shadow-rgb) / 0.05), 0 8px 24px rgb(var(--shadow-rgb) / 0.09);
  --shadow-press: 0 0 0 1px rgb(var(--shadow-rgb) / 0.075), 0 1px 2px rgb(var(--shadow-rgb) / 0.055);
  --shadow-overlay: 0 0 0 1px rgb(var(--shadow-rgb) / 0.055), 0 4px 12px rgb(var(--shadow-rgb) / 0.11), 0 12px 32px rgb(var(--shadow-rgb) / 0.15);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.15, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-shimmer: 1600ms;

  --sidebar-w: 240px; --sidebar-rail: 64px; --control-h: 36px;
  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2359686f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  color-scheme: light;
}

/* ───────────────────────── tokens (dark) ───────────────────────── */
:root[data-theme="dark"] {
  --bg-canvas-rgb: 8 15 17;
  --bg-surface-rgb: 16 26 29;
  --bg-well-rgb: 24 37 42;
  --bg-track-rgb: 34 51 58;
  --bg-dark-rgb: 8 15 17;
  --bg-hero-rgb: 30 51 58;
  --hairline-rgb: 255 255 255;
  --hairline-solid-rgb: 42 59 66;
  --ink-1-rgb: 243 247 248;
  --ink-2-rgb: 168 188 194;
  --ink-3-rgb: 138 158 165;
  --ink-4-rgb: 95 114 120;
  --brand-rgb: 79 184 207;
  --brand-deep-rgb: 124 212 232;
  --brand-lift-rgb: 159 224 234;
  --tint-brand-rgb: 79 184 207;
  --tint-neutral-rgb: 138 158 165;
  --tint-alpha: 0.15;
  --moss-rgb: 63 190 134;
  --warn-rgb: 232 171 46;
  --signal-rgb: 242 105 92;
  --warn-text-rgb: 232 171 46;
  --tint-moss-rgb: 63 190 134;
  --tint-warn-rgb: 232 171 46;
  --tint-signal-rgb: 242 105 92;
  --shadow-rgb: 0 0 0;
  --shadow-rest: 0 0 0 1px rgb(var(--hairline-solid-rgb)), 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 8px rgb(0 0 0 / 0.22);
  --shadow-hover: 0 0 0 1px rgb(124 212 232 / 0.28), 0 2px 4px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.5);
  --shadow-press: 0 0 0 1px rgb(124 212 232 / 0.35), 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-overlay: 0 0 0 1px rgb(var(--hairline-solid-rgb)), 0 4px 12px rgb(0 0 0 / 0.5), 0 12px 32px rgb(0 0 0 / 0.6);
  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23a9b7bd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  color-scheme: dark;
}

/* Resolved aliases */
:root, :root[data-theme="dark"] {
  --bg-canvas: rgb(var(--bg-canvas-rgb)); --bg-surface: rgb(var(--bg-surface-rgb)); --bg-well: rgb(var(--bg-well-rgb)); --bg-track: rgb(var(--bg-track-rgb)); --bg-dark: rgb(var(--bg-dark-rgb)); --bg-hero: rgb(var(--bg-hero-rgb));
  --hairline: rgb(var(--hairline-rgb) / 0.09); --hairline-strong: rgb(var(--hairline-rgb) / 0.16); --hairline-solid: rgb(var(--hairline-solid-rgb));
  --ink-1: rgb(var(--ink-1-rgb)); --ink-2: rgb(var(--ink-2-rgb)); --ink-3: rgb(var(--ink-3-rgb)); --ink-4: rgb(var(--ink-4-rgb));
  --on-dark-1: rgb(var(--on-dark-1-rgb)); --on-dark-2: rgb(var(--on-dark-2-rgb)); --on-dark-3: rgb(var(--on-dark-3-rgb));
  --brand: rgb(var(--brand-rgb)); --brand-deep: rgb(var(--brand-deep-rgb)); --brand-lift: rgb(var(--brand-lift-rgb)); --brand-accent: rgb(var(--brand-accent-rgb));
  --tint-brand: rgb(var(--tint-brand-rgb) / var(--tint-alpha)); --tint-neutral: rgb(var(--tint-neutral-rgb) / var(--tint-alpha));
  --moss: rgb(var(--moss-rgb)); --warn: rgb(var(--warn-rgb)); --warn-text: rgb(var(--warn-text-rgb)); --signal: rgb(var(--signal-rgb));
  --tint-moss: rgb(var(--tint-moss-rgb) / var(--tint-alpha)); --tint-warn: rgb(var(--tint-warn-rgb) / var(--tint-alpha)); --tint-signal: rgb(var(--tint-signal-rgb) / var(--tint-alpha));
  --focus-ring: var(--brand); --focus-gap: var(--bg-surface);
}
:root[data-theme-switching] *, :root[data-theme-switching] *::before, :root[data-theme-switching] *::after { transition: none !important; }

/* ───────────────────────── base ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); font-variation-settings: "opsz" 16; font-size: 15px; line-height: 22px; background: var(--bg-canvas); color: var(--ink-1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
textarea, input, select, button { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0; }
ul { margin: 4px 0; padding-left: 18px; }
:focus { outline: none; }
:focus-visible { box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--focus-ring); border-radius: inherit; }
.tnum { font-variant-numeric: tabular-nums; }
.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; }
.hidden { display: none !important; }

/* type scale, named as in tailwind.config.js */
.t-display { font-family: var(--font-display); font-variation-settings: "opsz" 32; font-size: 40px; line-height: 44px; letter-spacing: -0.03em; font-weight: 800; }
.t-pagetitle { font-family: var(--font-display); font-variation-settings: "opsz" 32; font-size: 30px; line-height: 36px; letter-spacing: -0.025em; font-weight: 750; margin: 0; }
.t-pagesub { font-size: 15px; line-height: 22px; color: var(--ink-2); margin-top: 6px; }
.t-statement { font-size: 24px; line-height: 31px; letter-spacing: -0.02em; font-weight: 650; max-width: 46ch; }
.t-kpi { font-family: var(--font-display); font-variation-settings: "opsz" 32; font-size: 34px; line-height: 36px; letter-spacing: -0.025em; font-weight: 750; }
.t-wtitle { font-family: var(--font-display); font-variation-settings: "opsz" 32; font-size: 17px; line-height: 23px; letter-spacing: -0.015em; font-weight: 620; margin: 0; }
.t-wsub { font-size: 13.5px; line-height: 19px; color: var(--ink-2); }
.t-body { font-size: 15px; line-height: 22px; }
.t-tbl { font-size: 13.5px; line-height: 19px; }
.t-caption { font-size: 11.5px; line-height: 16px; }
.t-eyebrow { font-size: 10.5px; line-height: 14px; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; }
.t-micro { font-size: 10px; line-height: 13px; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; }
.ink-1 { color: var(--ink-1); } .ink-2 { color: var(--ink-2); } .ink-3 { color: var(--ink-3); } .brand { color: var(--brand); }
.muted { color: var(--ink-3); font-size: 13.5px; line-height: 19px; }
.mono { font-family: var(--font-mono); font-variation-settings: "wght" 450; }

/* ───────────────────────── app shell ───────────────────────── */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; padding: 8px 14px; background: var(--bg-dark); color: var(--on-dark-1); border-radius: var(--radius-inner); font-size: 13px; font-weight: 600; }

.on-dark { --ink-1-rgb: var(--on-dark-1-rgb); --ink-2-rgb: var(--on-dark-2-rgb); --ink-3-rgb: var(--on-dark-3-rgb); --brand-rgb: var(--brand-accent-rgb); --hairline-rgb: 255 255 255; --focus-ring: var(--brand-accent); --focus-gap: var(--bg-dark); color: var(--on-dark-1); }

.topbar { display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 16px; overflow-x: auto; position: sticky; top: 0; z-index: 40; background: var(--bg-dark); }
.topbar .logo { flex-shrink: 0; margin-right: 8px; display: block; }
.topbar a.nav { font-size: 11.5px; line-height: 16px; padding: 6px 10px; border-radius: var(--radius-seg); white-space: nowrap; color: var(--chrome-muted); transition: color var(--dur-fast), background var(--dur-fast); }
.topbar a.nav:hover { color: var(--on-dark-1); background: var(--chrome-hover); text-decoration: none; }
.topbar a.nav[aria-current="page"] { background: var(--chrome-active); color: var(--brand-accent); font-weight: 600; }

.sidebar { display: none; position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-w); flex-direction: column; background: var(--bg-dark); border-right: 1px solid var(--chrome-line); transition: width var(--dur-base) var(--ease-inout); }
.sidebar[data-state="rail"] { width: var(--sidebar-rail); }
.sidebar .brand-row { height: 64px; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; }
.sidebar[data-state="rail"] .brand-row { justify-content: center; padding: 0 8px; }
.sidebar .brand-row .mark { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.015em; }
.sidebar nav { flex: 1; padding: 0 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--radius-inner); color: var(--chrome-muted); font-size: 13.5px; transition: color var(--dur-fast), background var(--dur-fast); }
.sidebar nav a:hover { color: var(--on-dark-1); background: var(--chrome-hover); text-decoration: none; }
.sidebar nav a[aria-current="page"] { background: var(--chrome-active); color: var(--brand-accent); font-weight: 600; }
.sidebar nav a svg { flex-shrink: 0; }
.sidebar[data-state="rail"] nav a { justify-content: center; padding: 0; }
.sidebar[data-state="rail"] .label, .sidebar[data-state="rail"] .wordmark, .sidebar[data-state="rail"] .rail-hide { display: none !important; }
.sidebar nav { scrollbar-width: thin; }
svg[role="img"] { display: block; overflow: visible; }
.sidebar .mark { display: none; } .sidebar[data-state="rail"] .mark { display: block; }
.sidebar .foot { flex-shrink: 0; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.sidebar .foot .eyebrow { display: block; margin: 0 4px 6px; color: var(--chrome-faint); }
@keyframes pulse { 0%{opacity:1} 50%{opacity:.3} 100%{opacity:1} }
.theme-seg { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--radius-inner); background: var(--chrome-hover); margin: 0 4px; }
.theme-seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; height: 28px; border: 0; background: transparent; border-radius: var(--radius-chip); font-size: 11.5px; font-weight: 600; color: var(--chrome-muted); cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast); }
.theme-seg button:hover { color: var(--on-dark-1); }
.theme-seg button[aria-checked="true"] { background: var(--chrome-active); color: var(--brand-accent); }
.sidebar[data-state="rail"] .theme-seg { background: transparent; padding: 0; margin: 0; }
.sidebar[data-state="rail"] .theme-seg button[aria-checked="true"] { display: none; }
.sidebar[data-state="rail"] .theme-seg button span { display: none; }
.chrome-btn { display: flex; align-items: center; gap: 8px; height: 36px; width: 100%; padding: 0 12px; border: 0; background: transparent; border-radius: var(--radius-inner); color: var(--chrome-faint); font-size: 11.5px; cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast); }
.chrome-btn:hover { color: var(--on-dark-1); background: var(--chrome-hover); }
.sidebar[data-state="rail"] .chrome-btn { justify-content: center; padding: 0; }
.sidebar .chrome-btn svg { transition: transform var(--dur-base) var(--ease-out); }
.sidebar[data-state="expanded"] .chrome-btn svg { transform: rotate(180deg); }

main { min-height: 100vh; padding-left: 0; transition: padding-left var(--dur-base) var(--ease-inout); }
@media (min-width: 1024px) {
  .topbar { display: none; }
  .sidebar { display: flex; }
  main { padding-left: var(--sidebar-w); }
  main[data-sidebar="rail"] { padding-left: var(--sidebar-rail); }
}
.page { padding: 24px; }
@media (min-width: 1536px) { .page { padding: 24px 32px; } }
@media (min-width: 1920px) { .page { padding: 24px 40px; } }
section.screen { display: none; } section.screen.active { display: block; }

/* ───────────────────────── page furniture ───────────────────────── */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head .eyebrow { color: var(--brand); margin-bottom: 6px; }
.page-head .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.hero { background: var(--bg-hero); border-radius: var(--radius-hero); box-shadow: var(--shadow-rest); padding: 28px 32px; margin-bottom: 24px; }
.hero .hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.hero .hero-top .eyebrow { color: var(--on-dark-3); }
.hero .hero-top .meta { color: var(--brand-accent); flex-shrink: 0; }
.hero .hero-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hero h1 { margin: 0; color: var(--on-dark-1); overflow-wrap: anywhere; }
.hero .accent { color: var(--brand-accent); }
.hero .deck { color: var(--on-dark-2); margin-top: 16px; max-width: 62ch; }
.hero .hero-actions { margin-top: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero .aside { text-align: right; flex-shrink: 0; }
.hero .aside .big { font-family: var(--font-display); font-size: 46px; line-height: 48px; letter-spacing: -0.03em; font-weight: 750; color: var(--on-dark-1); }
.hero .aside .t-eyebrow { color: var(--on-dark-3); }
@media (max-width: 640px) { .hero { padding: 24px; } .hero .hero-body { flex-direction: column; } .hero .hero-body > div:first-child { width: 100%; } .hero .aside { text-align: left; } }

/* ───────────────────────── widgets ───────────────────────── */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.grid + .grid { margin-top: 16px; }
.span-quarter { grid-column: span 4; } .span-third { grid-column: span 4; } .span-half { grid-column: span 4; } .span-two-thirds { grid-column: span 4; } .span-full { grid-column: span 4; }
@media (min-width: 768px) { .span-quarter { grid-column: span 4; } .span-third { grid-column: span 4; } .span-half, .span-two-thirds, .span-full { grid-column: span 8; } }
@media (min-width: 1280px) { .span-quarter { grid-column: span 3; } .span-third { grid-column: span 4; } .span-half { grid-column: span 6; } .span-two-thirds { grid-column: span 8; } .span-full { grid-column: span 12; } }

.widget { position: relative; background: var(--bg-surface); border-radius: var(--radius-widget); box-shadow: var(--shadow-rest); min-width: 0; }
.widget::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--shadow-hover); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.widget:hover::after { opacity: 1; }
.widget-enter { animation: widget-in var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--stagger-i, 0) * 40ms); }
@keyframes widget-in { from { opacity: 0; transform: translateY(8px); } }
.widget > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 0; }
.widget > header .eyebrow { color: var(--ink-3); }
.widget > header .actions { flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.widget > .body { padding: 16px 20px 20px; }
.health-banner { margin-bottom: 16px; background: var(--tint-signal); box-shadow: none; }
.health-banner > header { padding-bottom: 20px; }
.health-banner > header .eyebrow, .health-banner .t-wtitle { color: var(--signal); }
.health-banner.warn { background: var(--tint-warn); }
.health-banner.warn > header .eyebrow, .health-banner.warn .t-wtitle { color: var(--warn-text); }
.health-banner ul { margin: 8px 0 0; padding-left: 18px; }
.widget > .body.flush { padding: 16px 0 0; }
.widget > .body.flush.table-body { padding-bottom: 0; overflow: hidden; border-radius: 0 0 var(--radius-widget) var(--radius-widget); }
.widget > header + .body.flush { padding-top: 16px; }
.widget > footer { padding: 12px 20px; border-top: 1px solid var(--hairline); font-size: 11.5px; line-height: 16px; color: var(--ink-3); }
.widget.sticky { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.widget.sticky::after { display: none; }
@media (max-width: 1279px) { .widget.sticky { position: static; max-height: none; } }

.kpi .label { color: var(--ink-3); }
.kpi .value { margin-top: 6px; color: var(--ink-1); }
.kpi .value.brand { color: var(--brand-deep); } .kpi .value.green { color: var(--moss); } .kpi .value.amber { color: var(--warn-text); } .kpi .value.red { color: var(--signal); }
.kpi .sub { margin-top: 6px; }
.stat-chip { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-chip); margin-bottom: 12px; background: var(--tint-brand); color: var(--brand-deep); }
.stat-chip.neutral { background: var(--tint-neutral); color: var(--ink-2); } .stat-chip.moss { background: var(--tint-moss); color: var(--moss); } .stat-chip.warn { background: var(--tint-warn); color: var(--warn-text); } .stat-chip.signal { background: var(--tint-signal); color: var(--signal); }

.empty { padding: 40px 16px; text-align: center; max-width: 340px; margin: 0 auto; }
.empty .title { font-size: 15px; font-weight: 600; color: var(--ink-1); }
.empty .sub { font-size: 13.5px; line-height: 19px; color: var(--ink-2); margin-top: 6px; }
.skeleton { position: relative; overflow: hidden; background: var(--bg-well); border-radius: var(--radius-inner); height: 16px; margin: 8px 0; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(var(--bg-surface-rgb) / 0.7), transparent); transform: translateX(-100%); animation: shimmer var(--dur-shimmer) var(--ease-inout) infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ───────────────────────── filter bar ───────────────────────── */
.filter-bar { position: sticky; top: 0; z-index: 20; margin: 0 -24px 16px; padding: 12px 24px; background: rgb(var(--bg-canvas-rgb) / 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid transparent; transition: border-color var(--dur-base); }
.filter-bar.stuck { border-bottom-color: var(--hairline); }
.filter-bar .trailing { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (min-width: 1536px) { .filter-bar { margin: 0 -32px 16px; padding: 12px 32px; } }
@media (min-width: 1920px) { .filter-bar { margin: 0 -40px 16px; padding: 12px 40px; } }
.pill-select { position: relative; display: inline-flex; align-items: center; }
.pill-select select { appearance: none; -webkit-appearance: none; height: var(--control-h); border: 0; border-radius: var(--radius-pill); background: var(--bg-surface) var(--select-chevron) no-repeat right 14px center; box-shadow: var(--shadow-rest); padding: 0 34px 0 16px; font-size: 13.5px; font-weight: 500; color: var(--ink-1); cursor: pointer; transition: box-shadow var(--dur-base); }
.pill-select select:hover { box-shadow: var(--shadow-hover); }
.pill-search { position: relative; display: inline-flex; align-items: center; }
.pill-search svg { position: absolute; left: 14px; color: var(--ink-3); pointer-events: none; }
.pill-search input { height: var(--control-h); width: 240px; border: 0; border-radius: var(--radius-pill); background: var(--bg-surface); box-shadow: var(--shadow-rest); padding: 0 16px 0 40px; font-size: 13.5px; color: var(--ink-1); transition: box-shadow var(--dur-base); }
.pill-search input::placeholder { color: var(--ink-3); }
.pill-search input:focus { box-shadow: var(--shadow-hover); }
.pill-check { display: inline-flex; align-items: center; gap: 8px; height: var(--control-h); padding: 0 16px; border-radius: var(--radius-pill); background: var(--bg-surface); box-shadow: var(--shadow-rest); font-size: 13.5px; font-weight: 500; color: var(--ink-1); cursor: pointer; user-select: none; }
.pill-check input { accent-color: var(--brand); margin: 0; }
.pill-static { display: inline-flex; align-items: center; gap: 8px; height: var(--control-h); padding: 0 16px; border-radius: var(--radius-pill); background: var(--bg-surface); box-shadow: var(--shadow-rest); font-size: 11.5px; color: var(--ink-2); }
.pill-static strong { color: var(--ink-1); font-weight: 600; }
.pill-static .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--moss); }

/* ───────────────────────── controls ───────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-h); padding: 0 16px; border: 0; border-radius: var(--radius-inner); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; background: var(--bg-surface); color: var(--ink-2); box-shadow: var(--shadow-rest); transition: box-shadow var(--dur-fast), color var(--dur-fast), background var(--dur-fast); text-decoration: none; }
.btn:hover { box-shadow: var(--shadow-hover); color: var(--ink-1); text-decoration: none; }
.btn.primary { background: var(--bg-dark); color: #fff; } .btn.primary:hover { background: var(--ink-1); color: var(--bg-surface); }
:root[data-theme="dark"] .btn.primary { background: var(--brand-accent); color: rgb(12 20 22); } :root[data-theme="dark"] .btn.primary:hover { background: var(--brand-deep); color: rgb(12 20 22); }
.btn.brand { background: var(--brand); color: #fff; } .btn.brand:hover { background: var(--brand-deep); color: #fff; }
:root[data-theme="dark"] .btn.brand { color: rgb(12 20 22); }
.btn.moss { background: var(--moss); color: #fff; } .btn.moss:hover { filter: brightness(0.95); color: #fff; }
.btn.danger { color: var(--signal); } .btn.danger:hover { color: var(--signal); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 11.5px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: var(--shadow-rest); }
.btn.on-hero { background: rgb(255 255 255 / 0.1); color: var(--on-dark-1); box-shadow: none; } .btn.on-hero:hover { background: rgb(255 255 255 / 0.16); color: var(--on-dark-1); }
.btn.on-hero.primary { background: var(--brand-accent); color: rgb(12 20 22); } .btn.on-hero.primary:hover { background: #fff; color: rgb(12 20 22); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.field { display: block; margin: 12px 0; }
.field > .lbl { display: block; color: var(--ink-3); margin-bottom: 6px; }
.field input, .field textarea { width: 100%; border: 0; border-radius: var(--radius-inner); background: var(--bg-well); padding: 0 12px; font-size: 15px; color: var(--ink-1); transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.field input { height: var(--control-h); }
.field textarea { padding: 8px 12px; min-height: 84px; resize: vertical; line-height: 22px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus { background: var(--bg-surface); box-shadow: var(--shadow-rest); }
select.plain { appearance: none; -webkit-appearance: none; height: var(--control-h); border: 0; border-radius: var(--radius-seg); background: var(--bg-well) var(--select-chevron) no-repeat right 10px center; padding: 0 30px 0 12px; font-size: 13.5px; color: var(--ink-1); cursor: pointer; }
.seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-inner); background: var(--bg-well); max-width: 100%; }
.seg button { height: 32px; padding: 0 14px; border: 0; background: transparent; border-radius: var(--radius-chip); font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: color var(--dur-fast), background var(--dur-fast); }
.seg button:hover { color: var(--ink-1); }
.seg button[aria-selected="true"] { background: var(--bg-surface); color: var(--ink-1); box-shadow: var(--shadow-press); }

/* ───────────────────────── tables ───────────────────────── */
table { border-collapse: collapse; width: 100%; font-size: 13.5px; line-height: 19px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
thead th { font-size: 10.5px; line-height: 14px; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; background: var(--bg-surface); position: sticky; top: 0; z-index: 1; }
.table-body table thead th:first-child, .table-body table td:first-child { padding-left: 20px; } .table-body table thead th:last-child, .table-body table td:last-child { padding-right: 20px; }
tbody tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; transition: background var(--dur-fast); } tr.click:hover td { background: var(--bg-well); } tr.selected td { background: var(--tint-brand); }
:root[data-theme="dark"] tr.selected td { background: rgb(var(--brand-rgb) / 0.12); }
td .primary { font-weight: 600; color: var(--ink-1); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
table.kv th { width: 160px; font-size: 10.5px; line-height: 14px; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px 8px 0; position: static; background: transparent; }
table.kv td { font-size: 13.5px; padding: 8px 0; }
table.kv ul { margin: 0; padding-left: 16px; }
.detail .card h3 { font-size: 17px; line-height: 23px; letter-spacing: -0.015em; font-weight: 620; font-family: var(--font-display); margin: 12px 0 6px; }
.detail .card p { margin: 8px 0; font-size: 13.5px; line-height: 19px; }
.detail .card > div:first-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.detail .card .kv { margin-top: 10px; }
.detail h3.sub { margin: 16px 0 6px; }
.detail .card .muted { font-size: 13.5px; }

/* ───────────────────────── status and score ───────────────────────── */
.score { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 24px; padding: 0 8px; border-radius: var(--radius-chip); font-family: var(--font-mono); font-variation-settings: "wght" 600; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--tint-neutral); color: var(--ink-2); }
.score.hot { background: var(--tint-signal); color: var(--signal); } .score.warm { background: var(--tint-warn); color: var(--warn-text); } .score.cool { background: var(--tint-neutral); color: var(--ink-2); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: var(--radius-chip); font-size: 10px; line-height: 13px; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; white-space: nowrap; background: var(--bg-well); color: var(--ink-2); vertical-align: middle; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--ink-4); flex-shrink: 0; }
.pill.new::before { background: var(--brand); } .pill.new { color: var(--brand); }
.pill.pursuing::before { background: var(--moss); } .pill.pursuing { color: var(--moss); }
.pill.alerted::before { background: var(--warn); } .pill.alerted { color: var(--warn-text); }
.pill.briefed::before { background: var(--brand-deep); } .pill.briefed { color: var(--brand-deep); }
.pill.dismissed::before { background: var(--ink-4); } .pill.dismissed { color: var(--ink-3); }
.pill.unverified { background: var(--tint-warn); color: var(--warn-text); } .pill.unverified::before { background: var(--warn); }
.pill.verified::before { background: var(--moss); } .pill.verified { color: var(--moss); }
.pill.running { color: var(--moss); } .pill.running::before { background: var(--moss); animation: pulse 1.2s infinite; }
.pill.plain::before { display: none; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-chip); font-size: 10px; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; white-space: nowrap; background: var(--tint-brand); color: var(--brand-deep); vertical-align: middle; }
.tag.neutral { background: var(--tint-neutral); color: var(--ink-2); }
/* Where a Horizon signal stands now (followup.ts); closed ones read as finished. */
.tag.stage { background: var(--tint-moss); color: var(--moss); text-transform: none; letter-spacing: 0.02em; font-size: 11px; }
.tag.stage.closed { background: var(--tint-neutral); color: var(--ink-3); }
/* Lead source: free readers (portals, agency-page watch) in moss; Claude searches stay neutral. */
.tag.source.free { background: var(--tint-moss); color: var(--moss); }
.source-word.free { color: var(--moss); font-weight: 600; }
.due-soon { color: var(--signal); font-weight: 600; }
td .due, td .due-soon, td .tnum { white-space: nowrap; }
.delta.up { color: var(--moss); } .delta.down { color: var(--signal); }

/* ───────────────────────── logs ───────────────────────── */
pre.log { background: var(--bg-dark); color: var(--on-dark-2); padding: 14px 16px; font-family: var(--font-mono); font-variation-settings: "wght" 450; font-size: 12px; line-height: 18px; max-height: 440px; overflow: auto; white-space: pre-wrap; word-break: break-word; border-radius: var(--radius-inner); margin: 12px 0 0; }
:root[data-theme="dark"] pre.log { background: var(--bg-well); box-shadow: inset 0 0 0 1px var(--hairline-solid); }

/* ───────────────────────── two-column ───────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: 16px; align-items: start; }
.split > * { min-width: 0; }
.split.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 1279px) { .split, .split.even { grid-template-columns: 1fr; } }

/* ───────────────────────── lead cards ───────────────────────── */
.lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.lead-grid > .empty, .lead-grid-empty { grid-column: 1 / -1; }
.lead-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; color: var(--ink-1); text-decoration: none; cursor: pointer; transition: transform var(--dur-base) var(--ease-out); }
.lead-card:hover { text-decoration: none; transform: translateY(-2px); }
.lead-card:active { transform: scale(0.99); }
.lead-card.score-hot { box-shadow: inset 4px 0 0 var(--signal), var(--shadow-rest); }
.lead-card.score-warm { box-shadow: inset 4px 0 0 var(--warn), var(--shadow-rest); }
.lead-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.lead-card-top .pill { margin-left: auto; }
.lead-card-org { color: var(--brand); }
.lead-card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lead-card-meta { margin-top: -2px; }
.lead-card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lead-card-due { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; line-height: 19px; color: var(--ink-3); }
.lead-card-due svg { flex-shrink: 0; }
.warn-word { color: var(--warn-text); font-weight: 600; }
a.kpi-link { color: inherit; text-decoration: none; transition: transform var(--dur-base) var(--ease-out); }
a.kpi-link:hover { text-decoration: none; transform: translateY(-2px); }

/* ───────────────────────── one-sheet (full screen) ───────────────────────── */
body.sheet-open { overflow: hidden; }
.sheet { position: fixed; inset: 0; z-index: 60; background: var(--bg-canvas); overflow-y: auto; overscroll-behavior: contain; animation: sheet-in var(--dur-slow) var(--ease-out) both; }
.sheet[hidden] { display: none; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } }
.sheet-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 24px; background: rgb(var(--bg-canvas-rgb) / 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
.sheet-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet-inner { max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; }
.sheet-head { margin-bottom: 20px; }
.sheet-head .t-pagetitle { margin-top: 6px; }
.sheet-title { margin-top: 10px; max-width: 60ch; }
.sheet-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.sheet-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-inner); font-size: 15px; line-height: 22px; margin-bottom: 16px; white-space: pre-wrap; }
.sheet-note svg { flex-shrink: 0; margin-top: 3px; }
/* The note's text: one block that fills the row and wraps, links and all (app.js note()). */
.sheet-note-body { flex: 1 1 auto; min-width: 0; }
.sheet-note-body .research-row { white-space: normal; }
.sheet-note.warn { background: var(--tint-warn); color: var(--warn-text); }
.sheet-note.brand { background: var(--tint-brand); color: var(--ink-1); font-weight: 600; }
.sheet-note.quote { background: var(--bg-well); color: var(--ink-1); font-style: italic; margin-bottom: 0; }
.sheet-note.neutral { background: var(--bg-well); color: var(--ink-2); font-size: 13.5px; line-height: 19px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.fact { background: var(--bg-surface); border-radius: var(--radius-widget); box-shadow: var(--shadow-rest); padding: 16px 18px; }
.fact-value { font-family: var(--font-display); font-variation-settings: "opsz" 32; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; font-weight: 700; margin: 6px 0 2px; color: var(--ink-1); }
.fact-value.cap { text-transform: capitalize; }
.fact-value.red { color: var(--signal); }
.sheet-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.sheet-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
.side-card .body { padding: 18px 20px; }
.side-card .field:first-of-type { margin-top: 4px; }
@media (max-width: 1023px) { .sheet-cols { grid-template-columns: 1fr; } .sheet-side { position: static; order: -1; } }
.sheet-main { background: var(--bg-surface); border-radius: var(--radius-widget); box-shadow: var(--shadow-rest); padding: 8px 28px 28px; }
.sheet-section { padding-top: 22px; }
.sheet-section + .sheet-section { border-top: 1px solid var(--hairline); margin-top: 22px; }
.sheet-main > .sheet-note { margin: 24px 0 0; }
.sheet-h { color: var(--brand); margin: 0 0 10px; }
.sub-h { margin: 12px 0 4px; }
.sheet-p { font-size: 15px; line-height: 23px; margin: 0 0 8px; color: var(--ink-1); white-space: pre-wrap; }
.sheet-p:last-child { margin-bottom: 0; }
.sheet-p.ink-3 { color: var(--ink-3); font-size: 13.5px; line-height: 20px; }
.sheet-list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 23px; }
.sheet-list li + li { margin-top: 8px; }
.sheet-list.sources { font-size: 13.5px; overflow-wrap: anywhere; }
.sheet-main table.kv th { width: 180px; }
.sheet-table th { position: static; padding-left: 0; }
.sheet-table td { padding-left: 0; font-size: 14px; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.person { background: var(--bg-well); border-radius: var(--radius-inner); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.person .sheet-p { font-size: 13.5px; line-height: 19px; margin: 6px 0 2px; }
.link-list { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; overflow-wrap: anywhere; }
.sheet-cols > * { min-width: 0; }
.sheet-note, .sheet-p, .sheet-list, .sheet-main td, .side-card .body { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .sheet-inner { padding: 20px 16px 48px; } .sheet-main { padding: 4px 18px 20px; } .sheet-bar { padding: 10px 16px; }
  .facts { grid-template-columns: 1fr 1fr; } .fact { padding: 12px 14px; } .fact-value { font-size: 18px; line-height: 24px; }
  .sheet-main table.kv th { width: 110px; }
}

/* ───────────────────────── headline tiles and the API spend ring ───────────────────────── */
/* Five tiles share the row on a wide screen and wrap evenly below that. */
#tiles { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
#tiles > .widget { grid-column: auto; }
.spend-tile-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.ring { position: relative; width: 76px; height: 76px; flex-shrink: 0; }
.ring svg { display: block; }
.ring circle { fill: none; stroke-width: 8; }
.ring-fill { stroke-linecap: round; transition: stroke-dasharray var(--dur-slow) var(--ease-out); }
/* The track is a lighter step of the fill's own hue, so the state reads around the whole ring. */
.ring.moss .ring-track { stroke: var(--tint-moss); } .ring.moss .ring-fill { stroke: var(--moss); }
.ring.warn .ring-track { stroke: var(--tint-warn); } .ring.warn .ring-fill { stroke: var(--warn); }
.ring.signal .ring-track { stroke: var(--tint-signal); } .ring.signal .ring-fill { stroke: var(--signal); }
.ring.neutral .ring-track { stroke: var(--bg-well); } .ring.neutral .ring-fill { stroke: var(--ink-4); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; text-align: center; }
.ring-center strong { font-size: 13px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.01em; }
.ring-center span { font-size: 9.5px; color: var(--ink-3); margin-top: 1px; }
.spend-tile-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spend-tile-text p { white-space: nowrap; }
.spend-word { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; }
.spend-word.moss { color: var(--moss); } .spend-word.warn { color: var(--warn-text); } .spend-word.signal { color: var(--signal); } .spend-word.neutral { color: var(--ink-3); }

/* ───────────────────────── bid / no-bid scorecard ───────────────────────── */
.tier-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-chip); font-size: 10px; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.tier-chip.moss { background: var(--tint-moss); color: var(--moss); }
.tier-chip.warn { background: var(--tint-warn); color: var(--warn-text); }
.tier-chip.signal { background: var(--tint-signal); color: var(--signal); }
.bid-card { margin-bottom: 24px; padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.bid-card::after { display: none; }
.bid-head { display: flex; gap: 18px; align-items: flex-start; }
.bid-score { flex-shrink: 0; width: 84px; height: 84px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.bid-score.moss { background: var(--tint-moss); color: var(--moss); }
.bid-score.warn { background: var(--tint-warn); color: var(--warn-text); }
.bid-score.signal { background: var(--tint-signal); color: var(--signal); }
.bid-total { font-family: var(--font-display); font-size: 34px; line-height: 36px; font-weight: 750; letter-spacing: -0.025em; }
.bid-score .t-caption { color: inherit; opacity: 0.85; }
.bid-call { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bid-tier { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.bid-tier.moss { color: var(--moss); } .bid-tier.warn { color: var(--warn-text); } .bid-tier.signal { color: var(--signal); }
.bid-body { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--hairline); padding-top: 16px; }
.bid-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; gap: 12px 32px; min-width: 0; }
.bid-part { display: grid; grid-template-columns: 112px minmax(0, 1fr) 52px; grid-template-areas: "label bar pts" "note note note"; column-gap: 10px; row-gap: 2px; align-items: center; }
.bid-part-label { grid-area: label; font-size: 13.5px; font-weight: 600; color: var(--ink-1); }
.bid-bar { grid-area: bar; height: 8px; border-radius: 999px; background: var(--bg-well); overflow: hidden; }
.bid-bar span { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.bid-pts { grid-area: pts; text-align: right; font-size: 13.5px; font-weight: 600; color: var(--ink-1); }
.bid-note { grid-area: note; overflow-wrap: anywhere; }
.req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.req-list li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; line-height: 21px; }
.req-status { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-chip); font-size: 10px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; white-space: nowrap; justify-self: start; margin-top: 0; }
.req-status.moss { background: var(--tint-moss); color: var(--moss); } .req-status.warn { background: var(--tint-warn); color: var(--warn-text); } .req-status.signal { background: var(--tint-signal); color: var(--signal); }
.req-text { display: block; color: var(--ink-1); overflow-wrap: anywhere; }
.req-note { display: block; overflow-wrap: anywhere; }
/* Assessment reasons can run to a few sentences; the card shows three lines, the one-sheet all of it. */
.lead-card .qualify-note { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .bid-card { padding: 18px; } .bid-head { flex-direction: column; } .req-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ───────────────────────── shortlist stars ───────────────────────── */
.lead-card { position: relative; }
.lead-card-link { color: inherit; text-decoration: none; }
.lead-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.lead-card-link:hover { text-decoration: none; }
.lead-card-link:focus-visible { box-shadow: none; }
.lead-card:has(.lead-card-link:focus-visible) { box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--focus-ring); }
.lead-card:hover { transform: translateY(-2px); }
.lead-card-top .pill { margin-left: auto; }
.star-btn { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px -6px 0; border: 0; border-radius: var(--radius-chip); background: transparent; color: var(--ink-4); cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.star-btn:hover { color: var(--warn); background: var(--tint-warn); }
.star-btn:active { transform: scale(0.9); }
.star-btn.on { color: var(--warn); }
.star-btn.big { width: auto; height: var(--control-h); margin: 0; padding: 0 14px; gap: 6px; display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 600; background: var(--bg-surface); color: var(--ink-2); box-shadow: var(--shadow-rest); border-radius: var(--radius-inner); }
.star-btn.big svg { color: var(--ink-4); }
.star-btn.big.on { background: var(--tint-warn); color: var(--warn-text); box-shadow: none; }
.star-btn.big.on svg, .star-btn.big:hover svg { color: var(--warn); }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--chrome-active); color: var(--brand-accent); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.nav-count[hidden] { display: none; }
.topbar .nav-count { margin-left: 4px; }
.sidebar[data-state="rail"] .nav-count { display: none; }
.lead-card-flags { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; line-height: 16px; color: var(--ink-3); }
.doc-flag.ok { color: var(--moss); }

/* ───────────────────────── qualification and Horizon ───────────────────────── */
/* Why a solicitation is not on the qualified Leads list. */
.qualify-note { margin-top: 2px; font-size: 11.5px; line-height: 16px; color: var(--warn-text); }
/* Horizon cards: the next stage on the way to an RFQ, from the research. */
.next-step { margin-top: 2px; font-size: 12.5px; line-height: 17px; color: var(--ink-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.next-step-label.update { background: var(--tint-moss); color: var(--moss); }
.updates-list li + li { margin-top: 10px; }
.next-step-label { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: var(--radius-chip); background: var(--tint-brand); color: var(--brand-deep); font-size: 10px; line-height: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 1px; }
/* One-sheet: the path to a lead, numbered stages with the next one in brand teal. */
.path { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.path li { position: relative; padding: 0 0 20px 38px; counter-increment: step; overflow-wrap: anywhere; }
.path li:last-child { padding-bottom: 0; }
.path li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 999px; background: var(--bg-well); color: var(--ink-2); font: 600 12px/24px var(--font-mono); text-align: center; }
.path li.next::before { background: var(--brand); color: var(--on-dark-1); }
.path li:not(:last-child)::after { content: ""; position: absolute; left: 11.5px; top: 28px; bottom: 4px; width: 1px; background: var(--hairline-solid); }
.path-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 24px; margin-bottom: 2px; }
.path-when { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.path .sheet-p { font-size: 14px; line-height: 20px; margin: 4px 0 0; }
.pill-link { border: 0; cursor: pointer; color: var(--ink-2); transition: box-shadow var(--dur-base), color var(--dur-fast); }
.pill-link:hover { box-shadow: var(--shadow-hover); color: var(--ink-1); }
.pill-link[hidden] { display: none; }
.horizon-groups { margin-bottom: 4px; }
.seg button .seg-count { margin-left: 6px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.seg button[aria-selected="true"] .seg-count { color: var(--brand); }
.research-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* ───────────────────────── documents and to-confirm ───────────────────────── */
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 19px; }
.doc-list li { display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; color: var(--ink-3); }
.doc-list li svg { flex-shrink: 0; margin-top: 2px; }
.doc-list li.ok svg { color: var(--moss); }
/* One-sheet: rarely needed detail folds under a one-line summary (app.js `foldAway`). */
.sheet-more { margin-top: 10px; }
.sheet-more > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--brand); border-radius: var(--radius-chip); }
.sheet-more > summary::-webkit-details-marker { display: none; }
.sheet-more > summary svg { flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); }
.sheet-more[open] > summary svg { transform: rotate(90deg); }
.sheet-more > summary:hover span { text-decoration: underline; }
.sheet-more-body { margin-top: 10px; }
.sheet-more-body > table.kv:first-child { margin-top: 0; }
.person .sheet-more { margin-top: 2px; }
.person .sheet-more > summary { font-size: 12.5px; }
.person .sheet-more-body { margin-top: 4px; }
.sheet-list li.more-li { list-style: none; margin-left: -20px; }
.sheet-list li.more-li .sheet-more { margin-top: 2px; }
.warm-list { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 12px; }
.warm-list li + li { margin-top: 0; padding-top: 12px; border-top: 1px solid var(--hairline); }
.warm-list .sheet-p { margin: 0; }
.warm-list .t-caption { margin: 2px 0 4px; }
.side-card .sheet-list { font-size: 13.5px; line-height: 20px; }
.side-links { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.confirm-list { list-style: none; padding-left: 0; }
.confirm-list li { position: relative; padding-left: 26px; }
.confirm-list li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.6px var(--ink-4); }
.sheet-side { position: static; }
.dropzone { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-inner); background: var(--bg-well); box-shadow: inset 0 0 0 1.5px var(--hairline-strong); cursor: pointer; font-size: 13.5px; line-height: 19px; color: var(--ink-1); transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.dropzone svg { flex-shrink: 0; color: var(--brand); margin-top: 1px; }
.dropzone:hover, .dropzone.over { background: var(--tint-brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.reread-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.reread-row .t-caption { flex: 1; min-width: 0; }
.doc-list .link-btn { margin-left: 8px; font-size: 11.5px; }
.sheet-note .link-btn { font-size: inherit; text-decoration: underline; color: inherit; font-weight: 700; }

/* ───────────────────────── team notes ───────────────────────── */
.notes-card { margin-top: 24px; }
.notes-card > .body { padding: 22px 28px 26px; }
.notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.notes-head .sheet-h { display: inline-flex; align-items: center; gap: 6px; }
.note-compose { background: var(--bg-well); border-radius: var(--radius-inner); padding: 4px; margin-bottom: 18px; transition: box-shadow var(--dur-fast), background var(--dur-fast); }
.note-compose:focus-within { background: var(--bg-surface); box-shadow: var(--shadow-rest), 0 0 0 2px rgb(var(--brand-rgb) / 0.35); }
.note-compose textarea, .note-edit { width: 100%; min-height: 140px; border: 0; background: transparent; resize: vertical; padding: 12px 14px; font-size: 15px; line-height: 23px; color: var(--ink-1); }
.note-compose textarea::placeholder { color: var(--ink-3); }
.note-compose textarea:focus-visible, .note-edit:focus-visible { box-shadow: none; }
.note-compose-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px 8px 14px; border-top: 1px solid var(--hairline); }
.note-compose-bar .btn { margin-left: auto; }
.note-who { display: inline-flex; align-items: center; gap: 8px; }
.note-who input { height: 30px; width: 170px; border: 0; border-radius: var(--radius-chip); background: var(--bg-surface); box-shadow: var(--shadow-rest); padding: 0 10px; font-size: 13.5px; color: var(--ink-1); }
.note-edit { background: var(--bg-well); border-radius: var(--radius-inner); min-height: 100px; }
.note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.note { padding: 14px 0; border-top: 1px solid var(--hairline); }
.note-meta { display: flex; align-items: baseline; gap: 10px; font-size: 13px; line-height: 18px; margin-bottom: 6px; flex-wrap: wrap; }
.note-tools { margin-left: auto; display: inline-flex; gap: 12px; opacity: 0; transition: opacity var(--dur-fast); }
.note:hover .note-tools, .note:focus-within .note-tools { opacity: 1; }
@media (hover: none) { .note-tools { opacity: 1; } }
.note-body { font-size: 15px; line-height: 23px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-1); }
.note-empty { padding: 6px 0 2px; }
.link-btn { border: 0; background: none; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--brand); cursor: pointer; }
.link-btn.danger { color: var(--signal); }
.link-btn:hover { text-decoration: underline; }
@media (max-width: 640px) { .notes-card > .body { padding: 18px; } .note-who input { width: 130px; } }

@media print {
  .note-compose, .note-tools, .star-btn { display: none !important; }
  :root, :root[data-theme="dark"] { --bg-canvas-rgb: 255 255 255; --bg-surface-rgb: 255 255 255; --ink-1-rgb: 12 20 22; --ink-2-rgb: 74 88 94; --ink-3-rgb: 89 104 111; --brand-rgb: 22 117 144; color-scheme: light; }
  body.sheet-open > *:not(.sheet) { display: none !important; }
  body.sheet-open { overflow: visible; }
  .sheet { position: static; overflow: visible; animation: none; }
  .sheet-bar { display: none; }
  .sheet-inner { padding: 0; max-width: none; }
  .sheet-cols { grid-template-columns: 1fr; }
  .sheet-side { position: static; order: 0; }
  .widget, .fact, .sheet-main { box-shadow: none !important; border: 1px solid #dde3e6; }
  .widget::after { display: none; }
  .side-card .actions, .side-card textarea:placeholder-shown, .side-card input:placeholder-shown { display: none; }
  .sheet-section { break-inside: avoid; }
  @page { size: letter; margin: 0.5in; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  html { scroll-behavior: auto; }
  .skeleton::after { animation: none; }
}

/* ───────────────────────── relationships ───────────────────────── */
.pill.due-overdue { background: var(--tint-signal); color: var(--signal); } .pill.due-overdue::before { background: var(--signal); }
.pill.due-never { color: var(--brand); } .pill.due-never::before { background: var(--brand); }
.pill.due-soon-pill { background: var(--tint-warn); color: var(--warn-text); } .pill.due-soon-pill::before { background: var(--warn); }
.pill.due-ok { color: var(--moss); } .pill.due-ok::before { background: var(--moss); }
/* Contacts: a company directory A to Z; a company opens to the people we have there. */
/* The A to Z row sits in the sticky filter bar so it stays in reach down the list. */
.org-az { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px; }
.org-az:empty { display: none; }
.org-az button { min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: var(--radius-chip); background: transparent; font: 600 12.5px/28px var(--font-sans); color: var(--ink-2); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.org-az button:hover:not(:disabled) { background: var(--bg-surface); color: var(--ink-1); box-shadow: var(--shadow-rest); }
.org-az button:disabled { color: var(--ink-4); cursor: default; }
.org-list { overflow: hidden; }
.org-row { border-top: 1px solid var(--hairline); }
.org-row:first-child { border-top: 0; }
.org-row > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 20px; list-style: none; cursor: pointer; transition: background var(--dur-fast); }
.org-row > summary::-webkit-details-marker { display: none; }
.org-row > summary:hover { background: var(--bg-well); }
.org-row > summary svg { flex-shrink: 0; color: var(--ink-3); transition: transform var(--dur-fast) var(--ease-out); }
.org-row[open] > summary svg { transform: rotate(90deg); }
.org-name { font-size: 15px; font-weight: 600; color: var(--ink-1); min-width: 0; overflow-wrap: anywhere; }
.org-flags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.org-count { margin-left: auto; flex-shrink: 0; font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.org-body { padding: 0 20px 14px 46px; }
.org-reason { margin: 0 0 8px; }
.org-people { list-style: none; margin: 0; padding: 0; border-radius: var(--radius-inner); background: var(--bg-well); }
.org-person { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--hairline); }
.org-person:first-child { border-top: 0; }
/* By people: one flat list inside the widget rather than a well under a company. */
.people-list { border-radius: 0; background: transparent; }
.people-list .org-person { padding: 12px 20px; }
.org-person.due-overdue { box-shadow: inset 3px 0 0 var(--signal); }
.org-person.due-soon { box-shadow: inset 3px 0 0 var(--warn); }
.org-person-main { min-width: 0; }
.org-person-name { font-weight: 600; color: var(--ink-1); }
.org-person-meta { margin: 2px 0 0; }
.org-person-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
@media (max-width: 640px) {
  .org-az { gap: 0; }
  .org-az button { min-width: 24px; height: 24px; padding: 0 4px; line-height: 24px; }
  .org-row > summary { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; padding: 10px 16px; }
  .org-flags { grid-column: 2 / -1; grid-row: 2; }
  .org-flags:empty { display: none; }
  .org-body { padding: 0 16px 12px; }
  .org-person { flex-direction: column; }
  .org-person-tags { justify-content: flex-start; }
}
.tier-chip.neutral { background: var(--tint-neutral); color: var(--ink-2); }
.tag.client { background: var(--tint-moss); color: var(--moss); }
.touch-kind { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-chip); font-size: 10px; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; white-space: nowrap; background: var(--tint-brand); color: var(--brand-deep); vertical-align: middle; }
.touch-kind.note { background: var(--tint-neutral); color: var(--ink-2); }
.rel-panel { margin-bottom: 16px; }
.rel-panel > .body .actions { margin-top: 4px; align-items: center; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.import-table td { vertical-align: top; }
.field select { width: 100%; height: var(--control-h); border: 0; border-radius: var(--radius-inner); background: var(--bg-well) var(--select-chevron) no-repeat right 12px center; appearance: none; -webkit-appearance: none; padding: 0 32px 0 12px; font-size: 15px; color: var(--ink-1); cursor: pointer; }
.field select:focus { background-color: var(--bg-surface); box-shadow: var(--shadow-rest); }
.mini-field { display: inline-flex; align-items: center; gap: 8px; }
.mini-field select, .mini-field input { height: 30px; border: 0; border-radius: var(--radius-chip); background: var(--bg-surface); box-shadow: var(--shadow-rest); padding: 0 10px; font-size: 13.5px; color: var(--ink-1); }
.mini-field select { appearance: none; -webkit-appearance: none; background: var(--bg-surface) var(--select-chevron) no-repeat right 10px center; padding-right: 28px; cursor: pointer; }
#relationships .filter-bar .pill-search input { width: 260px; }
@media (max-width: 640px) { #relationships .filter-bar .pill-search input { width: 100%; } .mini-field input { width: 140px; } }
@media print { .mini-field, #touchCard .note-compose { display: none !important; } }
.tag.network { background: var(--tint-warn); color: var(--warn-text); }

/* ---------- sign-in page (login.html) and Team screen ---------- */
/* One centered column: wordmark and title, the card, a footer line. */
.auth-body { min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--bg-hero); display: flex; align-items: center; justify-content: center; padding: 40px 16px; box-sizing: border-box; }
main.auth-wrap { min-height: 0; padding-left: 0; width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.auth-brand h1 { margin: 18px 0 8px; font-size: 34px; line-height: 38px; color: var(--on-dark-1); }
.auth-deck { color: var(--on-dark-2); max-width: 34ch; margin: 0; font-size: 14.5px; line-height: 21px; }
.auth-card { width: 100%; padding: 24px 28px 28px; box-sizing: border-box; }
.auth-card::after { display: none; }
.auth-tabs { display: flex; width: 100%; box-sizing: border-box; margin-bottom: 20px; }
.auth-tabs button { flex: 1; }
.auth-tabs[hidden] { display: none; }
.auth-form .field { margin: 14px 0 0; }
.auth-form .field:first-child { margin-top: 0; }
.auth-title { margin: 0 0 4px; }
.auth-intro { margin: 0; }
.auth-submit { width: 100%; margin-top: 20px; }
.auth-hint { color: var(--ink-3); text-align: center; margin: 14px 0 0; }
.auth-msg { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius-inner); background: var(--tint-signal); color: rgb(var(--signal-rgb)); font-size: 13.5px; line-height: 19px; }
.auth-msg.good { background: var(--tint-moss); color: rgb(var(--moss-rgb)); }
.auth-foot { margin: 0; color: var(--on-dark-3); font-size: 11.5px; line-height: 16px; letter-spacing: 0.04em; text-align: center; }
@media (max-width: 480px) { .auth-body { padding: 28px 16px; align-items: flex-start; } .auth-card { padding: 20px 20px 24px; } .auth-brand h1 { font-size: 30px; line-height: 34px; margin-top: 14px; } }
.team-table td, .team-table th { vertical-align: middle; }
.team-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.team-link { width: 100%; font-family: var(--font-mono); font-size: 12px; padding: 8px 10px; border: 0; border-radius: var(--radius-chip); background: var(--bg-well); color: var(--ink-1); }
.pill.pending { background: var(--tint-warn); color: var(--warn-text); }
.pill.active { background: var(--tint-moss); color: rgb(var(--moss-rgb)); }
.pill.disabled { background: var(--tint-neutral); color: var(--ink-3); }
/* Admin: full update, API spend and integrations above the accounts. */
.admin-grid { margin-bottom: 16px; }
.admin-grid .spend-tile .body { height: 100%; }
.pill.int-ok { background: var(--tint-moss); color: var(--moss); } .pill.int-ok::before { background: var(--moss); }
.pill.int-warn { background: var(--tint-warn); color: var(--warn-text); } .pill.int-warn::before { background: var(--warn); }
.pill.int-error { background: var(--tint-signal); color: var(--signal); } .pill.int-error::before { background: var(--signal); }
.pill.int-off { background: var(--tint-neutral); color: var(--ink-3); }
.int-table td { vertical-align: top; }
/* Admin's Integrations table is a drop-down: the widget header is the summary, closed by default. */
.int-details > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px; list-style: none; cursor: pointer; border-radius: var(--radius-widget); transition: background var(--dur-fast); }
.int-details > summary::-webkit-details-marker { display: none; }
.int-details > summary:hover { background: var(--bg-well); }
.int-details > summary .eyebrow { color: var(--ink-3); }
.int-details > summary svg { flex-shrink: 0; margin-top: 18px; color: var(--ink-3); transition: transform var(--dur-fast) var(--ease-out); }
.int-details[open] > summary { border-radius: var(--radius-widget) var(--radius-widget) 0 0; }
.int-details[open] > summary svg { transform: rotate(90deg); }
.int-details > .body { padding-top: 0; }
.int-table td:first-child { min-width: 180px; }
.int-table .int-group th { padding-top: 18px; color: var(--ink-3); text-align: left; }
.int-table .nowrap { white-space: nowrap; }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.funnel li { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius-chip); background: var(--bg-well); }
.funnel li .t-caption { color: var(--ink-3); }
.admin-errors { margin-top: 12px; }
.admin-errors summary { cursor: pointer; color: var(--ink-2); }
.admin-errors ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); max-height: 220px; overflow-y: auto; }
[data-team-nav][hidden] { display: none !important; }

/* ───────────────────────── insights (Overview) ───────────────────────── */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 32px 0 16px; }
.section-head .eyebrow { color: var(--ink-3); }
.section-head .t-wtitle { font-size: 20px; line-height: 26px; }
.section-head .t-wsub { margin-top: 4px; max-width: 72ch; }
.ins-widget > .body { padding-top: 12px; }
.ins-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* The two right-hand widgets fill the row, so their bottom lines up with the plays whichever side is taller. */
#insights { align-items: stretch; }
.ins-col > .widget:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.ins-col > .widget:last-child > .body { flex: 1 1 auto; display: flex; flex-direction: column; }
.ins-col > .widget:last-child > .body > .play-links { margin-top: auto; padding-top: 10px; }
.ins-widget .t-wsub { margin-top: 2px; }
.ins-sub-h { margin: 18px 0 8px; }

/* the plays */
.plays { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1024px) { .plays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.play { position: relative; padding: 16px 18px 14px; border-radius: var(--radius-inner); background: var(--bg-well); min-width: 0; box-shadow: inset 4px 0 0 var(--ink-4); }
.play.tone-brand { box-shadow: inset 4px 0 0 var(--brand); } .play.tone-moss { box-shadow: inset 4px 0 0 var(--moss); } .play.tone-warn { box-shadow: inset 4px 0 0 var(--warn); } .play.tone-signal { box-shadow: inset 4px 0 0 var(--signal); }
.play-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.play-eyebrow { color: var(--ink-3); }
.play.tone-brand .play-eyebrow { color: var(--brand-deep); } .play.tone-moss .play-eyebrow { color: var(--moss); } .play.tone-warn .play-eyebrow { color: var(--warn-text); } .play.tone-signal .play-eyebrow { color: var(--signal); }
.play-rank { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.play-title { margin: 6px 0 0; font-family: var(--font-display); font-size: 16px; line-height: 22px; letter-spacing: -0.01em; font-weight: 650; color: var(--ink-1); overflow-wrap: anywhere; }
.play-body { margin: 6px 0 0; font-size: 13.5px; line-height: 19px; color: var(--ink-2); overflow-wrap: anywhere; }
.play-action { margin: 10px 0 0; font-size: 13.5px; line-height: 19px; color: var(--ink-1); }
.play-do { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: var(--radius-chip); background: var(--tint-brand); color: var(--brand-deep); font-size: 10px; line-height: 15px; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; vertical-align: 1px; }
.play-links { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; color: var(--ink-2); }
.play-links strong { font-weight: 600; }
.play-links .play-more { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
/* The whole card opens the play's breakdown: the title's link stretches over it, and the
   links inside it (agencies, leads) sit above that and still open their own one-sheets. */
.play { transition: background var(--dur-fast); }
.play:hover { background: var(--tint-brand); }
.play-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.play-link:hover { text-decoration: none; }
.play-link:focus-visible { box-shadow: none; }
.play:has(.play-link:focus-visible) { box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--focus-ring); }
.play-links a { position: relative; z-index: 1; }
@media (hover: none) { .play:hover { background: var(--bg-well); } }

/* pipeline facts and the weekly chart */
.ins-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ins-fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-inner); background: var(--bg-well); color: var(--ink-1); min-width: 0; text-decoration: none; }
.ins-fact .t-kpi { font-size: 26px; line-height: 30px; }
.ins-fact .t-caption { color: var(--ink-3); }
a.ins-fact:hover { text-decoration: none; background: var(--tint-brand); }
@media (max-width: 640px) { .ins-facts { grid-template-columns: 1fr; } .ins-fact { flex-direction: row; align-items: baseline; gap: 10px; } }
.ins-chart { display: block; width: 100%; height: 130px; overflow: visible; }
.ins-chart .grid { stroke: var(--hairline); stroke-width: 1; }
.ins-chart .base { stroke: var(--hairline-strong); stroke-width: 1; }
.ins-chart .axis { font-family: var(--font-sans); font-size: 9.5px; fill: var(--ink-3); }
.ins-chart .ins-bar .hit { fill: transparent; }
.ins-chart .ins-bar .rfp { fill: var(--brand); }
.ins-chart .ins-bar .sig { fill: var(--ink-4); }
.ins-chart .ins-bar:hover .hit, .ins-chart .ins-bar:focus-visible .hit { fill: var(--tint-brand); }
.ins-chart .ins-bar:focus-visible { outline: none; }
.ins-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; color: var(--ink-2); }
.ins-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ins-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ins-legend .sw.rfp { background: var(--brand); } .ins-legend .sw.sig { background: var(--ink-4); }

/* sector bars and the kind/source lists */
.ins-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ins-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label n" "track n" "sub sub"; column-gap: 10px; row-gap: 3px; color: var(--ink-1); text-decoration: none; padding: 4px 6px; margin: 0 -6px; border-radius: var(--radius-chip); }
.ins-bar-row:hover { background: var(--bg-well); text-decoration: none; }
.ins-bar-label { grid-area: label; font-size: 13.5px; line-height: 18px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ins-bar-track { grid-area: track; height: 8px; border-radius: 4px; background: var(--bg-track); overflow: hidden; }
.ins-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--brand); min-width: 4px; }
.ins-bar-n { grid-area: n; align-self: center; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink-1); }
.ins-bar-sub { grid-area: sub; color: var(--ink-3); }
.ins-dir { display: inline-block; padding: 0 6px; border-radius: var(--radius-chip); font-size: 10px; line-height: 15px; letter-spacing: 0.08em; font-weight: 700; text-transform: uppercase; background: var(--tint-neutral); color: var(--ink-2); }
.ins-dir.up, .ins-dir.new { background: var(--tint-moss); color: var(--moss); }
.ins-dir.down { background: var(--tint-warn); color: var(--warn-text); }
.ins-kinds { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 19px; }
.ins-kinds li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--hairline); }
.ins-kinds li:first-child { border-top: 0; }
.ins-kinds .tag { margin-left: 4px; }

/* agencies heating up */
.ins-orgs { list-style: none; margin: 0; padding: 0; }
.ins-orgs > li { padding: 14px 0; border-top: 1px solid var(--hairline); }
.ins-orgs > li:first-child { padding-top: 0; border-top: 0; }
.ins-org-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ins-org-name { font-weight: 650; font-size: 15px; line-height: 21px; color: var(--ink-1); }
.ins-org-count { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--brand-deep); background: var(--tint-brand); padding: 1px 8px; border-radius: var(--radius-chip); }
.ins-org-items { margin: 6px 0; padding-left: 18px; font-size: 13.5px; line-height: 19px; }
.ins-org-items li + li { margin-top: 2px; }

@media print { .insights-head, #insights { display: none !important; } }
.ins-orgs.compact > li { padding: 8px 0; }
.ins-orgs.compact .ins-org-name { font-size: 14px; line-height: 20px; }
.ins-orgs.compact .t-caption { margin-top: 1px; }
.ins-orgs.compact + .play-links { margin-top: 10px; justify-content: flex-end; }

/* the play's page: one numbered row per item, with room between rows */
.play-rows { list-style: none; margin: 0; padding: 0; counter-reset: play-row; }
.play-row { position: relative; padding: 22px 0 22px 42px; border-top: 1px solid var(--hairline); counter-increment: play-row; }
.play-row:first-child { border-top: 0; padding-top: 4px; }
.play-row::before { content: counter(play-row); position: absolute; left: 0; top: 24px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-chip); background: var(--bg-well); font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.play-row:first-child::before { top: 6px; }
.play-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.play-row-org { font-weight: 650; font-size: 16px; line-height: 22px; color: var(--ink-1); }
.play-row-title { margin: 6px 0 4px; font-size: 15px; line-height: 22px; color: var(--ink-1); }
.play-row-title a { color: inherit; }
.play-row-next { margin: 12px 0 0; font-size: 13.5px; line-height: 20px; color: var(--ink-1); }
.play-row-known { margin: 10px 0 0; color: var(--ink-2); }
.play-row-list { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 20px; }
.play-row-list li + li { margin-top: 6px; }
.play-steps li + li { margin-top: 10px; }
.sheet-note.brand .play-do { margin-right: 10px; vertical-align: 2px; }