/* The reading is set in Fraunces. The controls are Outfit.
   The gauge mark is the brand; these two faces are how it speaks. */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ── Theme tokens ───────────────────────────────────────────────────────────
   Every colour in this stylesheet resolves through this layer, so a theme is a
   swap of these declarations and nothing else. Hues are published as RGB
   channels (`--accent-rgb`) as well as solids, which lets a rule choose its own
   alpha via `rgb(var(--accent-rgb) / 0.35)` without hardcoding the hue. That is
   what makes the same rule legible on a dark and a light background.

   `--tint-rgb` is the direction a surface is tinted for subtle raised states:
   toward white on dark themes, toward ink on light ones. Rules say "tint by
   0.05" and the theme decides which way that means.

   :root carries the dark theme, which is also the fallback if no theme has been
   resolved yet. Overrides live in the [data-theme] blocks below. */
:root {
  color-scheme: dark;

  /* Brass is the metal of the gauge. Score bands keep their own hues
     so a hot lead never looks like a button. */
  --accent-rgb: 224 177 90;
  --green-rgb: 52 211 153;
  --amber-rgb: 251 191 36;
  --red-rgb: 248 113 113;
  --tint-rgb: 255 255 255;
  --shadow-rgb: 20 18 16;

  --jdx-shell: #0c1418;
  --jdx-page: #0c1418;
  --jdx-workspace: #142026;
  --jdx-card: #142026;
  --jdx-elevated: #1b2c34;
  --jdx-card-hover: #223640;
  --jdx-header: transparent;
  --jdx-surface: #142026;
  --jdx-accent: #f0c97a;
  --jdx-accent-deep: #e0b15a;
  --jdx-accent-deeper: #f3d59a;
  --jdx-text: #f4f7f8;
  --jdx-secondary: #b7c6cc;
  /* Muted still has to clear 4.5:1 against a card. */
  --jdx-muted: #b7c6cc;
  --jdx-border: #2c424c;
  --jdx-border-strong: #7d97a3;
  --jdx-green: #34d399;
  --jdx-amber: #fbbf24;
  --jdx-red: #f87171;

  --status-ok-text: #86efac;
  --status-warn-text: #fcd34d;
  --status-bad-text: #fca5a5;
  --on-accent: #1a1408;
  --on-status: #04120a;

  /* The rubric has three bands, so the interface has three colours.
     Steel reads as "measured but cold", amber as "worth a look",
     teal as "act on this". Used for gauges, bands and verdict states. */
  --band-pass: #71717a;
  --band-warm: #fbbf24;
  --band-hot: #2dd4bf;
  --band-pass-rgb: 113 113 122;
  --band-warm-rgb: 251 191 36;
  --band-hot-rgb: 45 212 191;
  --band-pass-soft: rgb(var(--band-pass-rgb) / 0.18);
  --band-warm-soft: rgb(var(--band-warm-rgb) / 0.14);
  --band-hot-soft: rgb(var(--band-hot-rgb) / 0.14);
  --band-pass-text: #a1a1aa;
  --band-warm-text: var(--band-warm);
  --band-hot-text: var(--band-hot);

  --instrument-face: #0c1418;
  --instrument-bezel: #2c424c;
  --instrument-needle: #f4f7f8;

  /* Resolved here rather than in JS so charts inherit the theme's tint.
     Canvas cannot read custom properties, so anything a chart paints has to be
     named here and handed over. */
  --chart-grid: rgb(var(--tint-rgb) / 0.06);
  --chart-track: rgb(var(--tint-rgb) / 0.1);
  --chart-track-strong: rgb(var(--tint-rgb) / 0.18);

  /* Dark themes separate surfaces with borders, so elevation costs nothing. */
  --shadow-card: 0 4px 3px 0 #070c0f;
  --shadow-raised: 0 8px 24px rgb(4 8 10 / 0.45);
  --shadow-overlay: 0 18px 48px rgb(4 8 10 / 0.55);

  /* One motion language. Needles settle, panels ease, states snap. */
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-slow: 900ms;
  --font: "Outfit", "Avenir Next", system-ui, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-composer: 14px;
  --sq-bar-height: 56px;
  --motion-fast: 150ms;
  --motion-med: 180ms;
  --shadow-soft: none;
  --glow-accent: 0 0 0 1px rgb(var(--accent-rgb) / 0.55), 0 0 36px 2px rgb(var(--accent-rgb) / 0.28);
}

/* Light. A paper call sheet. Ink buttons, brass rules. Verdict teal stays on the bands only. */
[data-theme="light"] {
  color-scheme: light;

  --accent-rgb: 138 90 18;
  --green-rgb: 22 163 74;
  --amber-rgb: 217 119 6;
  --red-rgb: 220 38 38;
  --tint-rgb: 38 34 31;
  --shadow-rgb: 51 42 37;

  --jdx-shell: #f3efe6;
  --jdx-page: #f3efe6;
  --jdx-workspace: #fffdf8;
  --jdx-card: #fffdf8;
  --jdx-elevated: #fffaf2;
  --jdx-card-hover: #efe8db;
  --jdx-header: transparent;
  --jdx-surface: #fffdf8;
  --jdx-accent: #8a5a12;
  --jdx-accent-deep: #1c1914;
  --jdx-accent-deeper: #3a332b;
  --jdx-text: #1c1914;
  --jdx-secondary: #5c5348;
  --jdx-muted: #5c5348;
  --jdx-border: #e0d5c4;
  --jdx-border-strong: #8a7d6b;
  --jdx-green: #16a34a;
  --jdx-amber: #d97706;
  --jdx-red: #dc2626;

  --status-ok-text: #15803d;
  --status-warn-text: #92400e;
  --status-bad-text: #b91c1c;
  --on-accent: #f8f1e4;
  --on-status: #ffffff;

  --band-pass: #52666f;
  --band-warm: #d97706;
  --band-hot: #0d9488;
  --band-pass-rgb: 82 102 111;
  --band-warm-rgb: 217 119 6;
  --band-hot-rgb: 13 148 136;
  --band-pass-soft: rgb(var(--band-pass-rgb) / 0.12);
  --band-warm-soft: rgb(var(--band-warm-rgb) / 0.12);
  --band-hot-soft: rgb(var(--band-hot-rgb) / 0.12);
  --band-pass-text: #45555e;
  --band-warm-text: #b45309;
  --band-hot-text: #0f766e;

  --instrument-face: #fffdf8;
  --instrument-bezel: #e0d5c4;
  --instrument-needle: #1c1914;

  --shadow-card: 0 1px 2px rgb(var(--shadow-rgb) / 0.05);
  --shadow-raised: 0 8px 24px rgb(var(--shadow-rgb) / 0.06);
  --shadow-overlay: 0 16px 40px rgb(var(--shadow-rgb) / 0.12);
  --glow-accent: 0 0 0 1px rgb(var(--accent-rgb) / 0.2), 0 0 24px rgb(var(--accent-rgb) / 0.08);
}

/* High contrast. Brass on near-black, borders drawn rather than implied, motion damped. */
[data-theme="contrast"] {
  color-scheme: dark;

  --accent-rgb: 255 210 122;
  --green-rgb: 74 222 128;
  --amber-rgb: 252 211 77;
  --red-rgb: 252 165 165;
  --tint-rgb: 255 255 255;
  --shadow-rgb: 0 0 0;

  --jdx-shell: #141210;
  --jdx-page: #141210;
  --jdx-workspace: #1c1816;
  --jdx-card: #1c1816;
  --jdx-elevated: #2a2420;
  --jdx-card-hover: #3f3a35;
  --jdx-header: transparent;
  --jdx-surface: #1c1816;
  --jdx-accent: #ffd27a;
  --jdx-accent-deep: #ffd27a;
  --jdx-accent-deeper: #ffe7b8;
  --jdx-text: #ffffff;
  --jdx-secondary: #f5efe9;
  --jdx-muted: #e7dfd6;
  --jdx-border: #9e958d;
  --jdx-border-strong: #ffffff;
  --jdx-green: #4ade80;
  --jdx-amber: #fcd34d;
  --jdx-red: #fecaca;

  --status-ok-text: #86efac;
  --status-warn-text: #fcd34d;
  --status-bad-text: #fecaca;
  --on-accent: #141210;
  --on-status: #141210;

  --band-pass: #cbd5db;
  --band-warm: #fcd34d;
  --band-hot: #5eead4;
  --band-pass-rgb: 203 213 219;
  --band-warm-rgb: 252 211 77;
  --band-hot-rgb: 94 234 212;
  --band-pass-soft: rgb(var(--band-pass-rgb) / 0.22);
  --band-warm-soft: rgb(var(--band-warm-rgb) / 0.22);
  --band-hot-soft: rgb(var(--band-hot-rgb) / 0.22);
  --band-pass-text: var(--band-pass);
  --band-warm-text: var(--band-warm);
  --band-hot-text: var(--band-hot);

  --instrument-face: #141210;
  --instrument-bezel: #ffffff;
  --instrument-needle: #ffffff;

  --shadow-card: none;
  --shadow-raised: none;
  --shadow-overlay: none;
}

[data-theme="contrast"] *,
[data-theme="contrast"] *::before,
[data-theme="contrast"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background-color: var(--jdx-page);
  /* Dial arcs, parked in the corner. The gauge is the mark; the page keeps a trace of it. */
  background-image:
    radial-gradient(circle at 100% -4%, transparent 68px, rgb(var(--tint-rgb) / 0.14) 69px, transparent 70px),
    radial-gradient(circle at 100% -4%, transparent 128px, rgb(var(--accent-rgb) / 0.28) 129px, transparent 130px),
    radial-gradient(circle at 100% -4%, transparent 196px, rgb(var(--tint-rgb) / 0.1) 197px, transparent 198px),
    radial-gradient(ellipse 70% 42% at 100% -8%, rgb(var(--accent-rgb) / 0.12), transparent 62%);
  background-attachment: fixed;
  color: var(--jdx-text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Juno type scale. Mobile values step up at the 1150px desktop breakpoint. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -0.02em;
  margin: 0;
}

h1 { font-size: 32px; line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; }
h3 { font-size: 15px; line-height: 1.35; }
h4 { font-size: 13px; line-height: 1.4; font-weight: 600; }

@media (min-width: 1150px) {
  h1 { font-size: 36px; line-height: 1.05; }
  h2 { font-size: 22px; line-height: 1.2; }
}

/* Three ticks under a page title: pass, warm, hotlist. The product's signature. */
.page-heading h1::after {
  content: "";
  display: block;
  width: 76px;
  height: 7px;
  margin-top: 12px;
  border-radius: 2px;
  background:
    linear-gradient(
      90deg,
      var(--band-pass) 0 20px,
      transparent 20px 28px,
      var(--band-warm) 28px 48px,
      transparent 48px 56px,
      var(--band-hot) 56px 76px
    );
}

strong, b { font-weight: bold; }

/* Figures must line up when scanning a column of results. */
.lead-score strong,
.score-total,
.run-stat span,
.kpi-value,
.pill,
.figure-chip-value {
  font-variant-numeric: tabular-nums;
}

a, button, input, select {
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.hidden { display: none !important; }

.muted { color: var(--jdx-secondary); font-size: 13px; }

.empty-state {
  margin: 0;
  padding: 12px 0;
  color: var(--jdx-muted);
  font-size: 13px;
}

/* Empty states point at the next action rather than reporting absence. */
.empty-title {
  margin: 0;
  font-weight: bold;
}

.empty-lead {
  margin: 8px 0 0;
  color: var(--jdx-secondary);
  font-size: 14px;
  max-width: 58ch;
  line-height: 1.55;
}

.empty-lead + .primary { margin-top: 18px; display: inline-flex; }

.idle-lead {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}

.idle-lead h2 { margin: 0 0 8px; font-weight: bold; }
.idle-lead p { margin: 0; max-width: 52ch; line-height: 1.6; }

.idle-instrument {
  flex-shrink: 0;
  opacity: 0.9;
}

@media (max-width: 760px) {
  .idle-instrument { display: none; }
}

/* Header */
.jdx-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 28px 28px 8px;
  background: transparent;
  border-bottom: 0;
  position: static;
  z-index: 40;
}

.jdx-brand {
  display: flex;
  gap: 14px;
  align-items: center;
}

.jdx-logo {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.jdx-logo-img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
}

.sq-menu-logo {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
}

.industry-field,
.sq-menu-industry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 210px;
}

.industry-field.compact,
.sq-menu-industry {
  min-width: 0;
}

.industry-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--jdx-muted);
}

.industry-field select,
.sq-menu-industry select,
[data-industry-select] {
  appearance: none;
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-sm);
  background: var(--jdx-surface);
  color: var(--jdx-text);
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  /* The rail is narrow; never let the label clip mid-word. */
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
}

.sq-menu-brand-block {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sq-menu-industry {
  padding: 0 18px 12px;
}

.jdx-title {
  font-size: 20px;
  font-weight: 700;
}

.jdx-subtitle {
  color: var(--jdx-secondary);
  font-size: 13px;
  margin-top: 2px;
}

/* Branding lives in the rail, so the header states where you are instead. */
.page-heading h1 {
  margin: 0;
  font-weight: bold;
}

.page-heading p {
  margin: 2px 0 0;
  font-size: 13px;
}

.page-heading.with-back {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.jdx-header-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.status-strip, .hero-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Connection state is reassurance, not headline information. Specific enough
   to beat the .pill.ok / .pill.bad status colours. */
.jdx-header .status-strip .pill,
.jdx-header .status-strip .pill.ok,
.jdx-header .status-strip .pill.bad,
.settings-status .pill,
.settings-status .pill.ok,
.settings-status .pill.bad {
  background: none;
  border: none;
  color: var(--jdx-muted);
  padding: 4px 0;
  font-size: 12px;
}

.jdx-header .status-strip .pill.ok::before,
.settings-status .pill.ok::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--jdx-green);
  margin-right: 7px;
  vertical-align: middle;
}

.jdx-header .status-strip .pill.bad::before,
.settings-status .pill.bad::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--jdx-red);
  margin-right: 7px;
  vertical-align: middle;
}

.jdx-header .status-strip .pill + .pill,
.settings-status .pill + .pill {
  margin-left: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--jdx-border);
}

.pill {
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  background: rgb(var(--tint-rgb) / 0.06);
  color: var(--jdx-secondary);
  border: 1px solid var(--jdx-border);
}

.pill.ok {
  background: rgb(var(--green-rgb) / 0.12);
  color: var(--status-ok-text);
  border-color: rgb(var(--green-rgb) / 0.28);
}

.pill.bad {
  background: rgb(var(--red-rgb) / 0.12);
  color: var(--status-bad-text);
  border-color: rgb(var(--red-rgb) / 0.28);
}

.live-badge {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgb(var(--red-rgb) / 0.16);
  color: var(--status-bad-text);
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--red-rgb) / 0.35); }
  50% { box-shadow: 0 0 0 8px rgb(var(--red-rgb) / 0); }
}

/* Search strip */
/* Prompt-first intent bar — the page leads with intent, not a form. */
.intent-bar {
  padding: 8px 28px 20px;
  border-bottom: 0;
  background: transparent;
}

.intent-form,
.qf-chat-form {
  position: relative;
  display: block;
  max-width: 860px;
  border: 1px solid var(--jdx-border-strong);
  border-radius: var(--radius-composer);
  background: var(--jdx-card);
  box-shadow: var(--shadow-card);
}

.intent-form:focus-within,
.qf-chat-form:focus-within {
  border-color: rgb(var(--accent-rgb) / 0.45);
  box-shadow: var(--glow-accent);
}

.intent-form:has(.is-thinking),
.qf-chat-form:has(.is-thinking) {
  box-shadow: var(--glow-accent);
}

.intent-form input,
.qf-chat-form input {
  width: 100%;
  border: 0;
  border-radius: var(--radius-composer);
  background: transparent;
  color: var(--jdx-text);
  padding: 16px 92px 16px 18px;
  font: inherit;
  font-size: 15px;
}

.intent-form input::placeholder,
.qf-chat-form input::placeholder { color: var(--jdx-muted); }

.intent-form input:focus,
.qf-chat-form input:focus { outline: none; }

.intent-form .primary,
.qf-chat-form .primary {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 14px;
  border-radius: 8px;
}

.intent-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  max-width: 860px;
}

.intent-suggestion {
  border: 0;
  background: transparent;
  color: var(--jdx-secondary);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.intent-suggestion:hover {
  color: var(--jdx-text);
}

.intent-advanced {
  margin-top: 12px;
  max-width: 860px;
}

.leads-sheet .intent-advanced {
  margin-top: 0;
  max-width: none;
}

.finder-advanced {
  margin: 0 0 0 auto;
  flex-shrink: 0;
}

.intent-advanced summary {
  cursor: pointer;
  color: var(--jdx-muted);
  font-size: 12px;
  width: max-content;
}

.intent-advanced summary:hover { color: var(--jdx-secondary); }

.intent-advanced-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--jdx-border);
}

/* Setting display on a details child defeats the built-in closed-state
   hiding, which let this block escape and cover the results panel. */
.intent-advanced:not([open]) .intent-advanced-body { display: none; }

.intent-advanced-body .field { flex: 1; min-width: 240px; }

.field.compact input,
.field input {
  width: 100%;
  background: rgb(var(--tint-rgb) / 0.05);
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-md);
  color: var(--jdx-text);
  padding: 12px 14px;
  font-size: 14px;
}

.checkbox.compact {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--jdx-secondary);
  font-size: 13px;
  padding-bottom: 10px;
}

/* Centred explicitly for the same reason as the chips: the inherited
   line-height leaves uneven space around the glyphs inside the padding box. */
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--jdx-accent-deep);
  color: var(--on-accent);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28);
}

.primary:hover { background: var(--jdx-accent-deeper); }

.primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* A call in flight glows. At rest the control is quiet. */
.ai-invoke { position: relative; }

.ai-invoke.is-thinking {
  box-shadow: var(--glow-accent);
}

.ai-invoke.is-thinking:disabled {
  opacity: 1;
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .ai-invoke.is-thinking {
    box-shadow: inset 0 0 0 2px rgb(var(--accent-rgb) / 0.85);
  }
}

/* Stage bar - RDX ResultsPage style */
.stage-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px;
  background: transparent;
  border-bottom: 1px solid var(--jdx-border);
  overflow-x: auto;
}

.stage-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 1 auto;
  min-width: 0;
  padding: 6px 8px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  border: 1px solid var(--jdx-border);
  background: transparent;
  color: var(--jdx-muted);
  transition: border-color 300ms ease, color 300ms ease, background 300ms ease;
}

.stage-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--jdx-text);
}

.stage-role {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.stage-pill.active .stage-name,
.stage-pill.active .stage-role { color: var(--on-accent); }

.stage-pill.active {
  background: var(--jdx-accent-deep);
  color: var(--on-accent);
  border-color: var(--jdx-accent-deep);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.25);
}

.stage-pill.done {
  background: rgb(var(--green-rgb) / 0.12);
  color: var(--status-ok-text);
  border-color: rgb(var(--green-rgb) / 0.28);
}

.stage-pill.done .stage-name,
.stage-pill.done .stage-role { color: var(--status-ok-text); }

.stage-pill.failed {
  background: rgb(var(--red-rgb) / 0.12);
  color: var(--status-bad-text);
}

.stage-connector {
  display: none;
}

.stage-connector.done { background: rgb(var(--green-rgb) / 0.28); }

.anim-dots { opacity: 0.7; display: inline-block; min-width: 12px; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

.ghost-btn, .pill-btn {
  background: transparent;
  border: 1px solid var(--jdx-border-strong);
  color: var(--jdx-secondary);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.ghost-btn:hover, .pill-btn:hover {
  color: var(--jdx-text);
  border-color: rgb(var(--accent-rgb) / 0.35);
}

/* Actions that change state, as opposed to actions that navigate. Quiet until
   reached for, so the page is not shouting a warning at rest, but unmistakably
   not the same kind of control as the links beside it. */
.ghost-btn.danger {
  color: var(--status-bad-text);
  border-color: rgb(var(--red-rgb) / 0.28);
}

.ghost-btn.danger:hover,
.ghost-btn.danger:focus-visible {
  color: var(--status-bad-text);
  background: rgb(var(--red-rgb) / 0.12);
  border-color: rgb(var(--red-rgb) / 0.5);
}

/* Undoing a dismissal restores rather than destroys, so it reads as ordinary. */
.ghost-btn.restore {
  color: var(--status-ok-text);
  border-color: rgb(var(--green-rgb) / 0.28);
}

.ghost-btn.restore:hover,
.ghost-btn.restore:focus-visible {
  background: rgb(var(--green-rgb) / 0.12);
  border-color: rgb(var(--green-rgb) / 0.5);
}

/* A group of actions needs one obvious first choice and a visible break before
   the control that changes state. */
.action-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

/* Controls in a header group must share a height, or the row reads as a set of
   mismatched parts. If the group has to wrap, both rows stay right-aligned so
   the wrap looks deliberate rather than broken. */
.action-group > .primary,
.action-group > .ghost-btn,
.action-group > .compact-link {
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

.action-group .action-divider {
  width: 1px;
  height: 20px;
  background: var(--jdx-border);
  margin: 0 2px;
  flex: 0 0 auto;
}

.primary.compact {
  padding: 10px 16px;
  font-size: 13px;
}

.completion-banner,
.pipeline-error {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--jdx-border);
}

.completion-banner {
  background: rgb(var(--green-rgb) / 0.08);
  border-color: rgb(var(--green-rgb) / 0.22);
}

.pipeline-error {
  background: rgb(var(--red-rgb) / 0.08);
  border-color: rgb(var(--red-rgb) / 0.22);
}

.tool-activity-panel {
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.tool-activity-header {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.tool-icon-grid {
  width: 34px;
  height: 34px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.tool-icon-grid span {
  border-radius: var(--radius-sm);
  background: rgb(var(--accent-rgb) / 0.35);
  animation: pulse 1.2s ease-in-out infinite;
}

.tool-icon-grid span:nth-child(2) { animation-delay: 0.15s; }
.tool-icon-grid span:nth-child(3) { animation-delay: 0.3s; }
.tool-icon-grid span:nth-child(4) { animation-delay: 0.45s; }

.tool-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgb(var(--tint-rgb) / 0.04);
}

.tool-step.active {
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.12);
}

.tool-step.done { opacity: 0.85; }

.tool-step-icon {
  width: 18px;
  text-align: center;
  color: var(--jdx-accent);
  font-weight: 800;
}

.tool-step-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.running-panel {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: var(--radius-md);
  background: rgb(var(--tint-rgb) / 0.04);
  border: 1px solid var(--jdx-border);
}

.running-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgb(var(--accent-rgb) / 0.18);
  border-top-color: var(--jdx-accent);
  animation: spin 0.9s linear infinite;
}

.running-stage-title {
  font-size: 16px;
  font-weight: 700;
}

.sidebar-stages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--jdx-border);
}

.sidebar-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--jdx-muted);
}

.sidebar-stage.active { color: var(--jdx-text); }
.sidebar-stage.done { color: var(--status-ok-text); }

.sidebar-stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--jdx-muted);
}

.sidebar-stage.active .sidebar-stage-dot {
  background: var(--jdx-accent);
  box-shadow: none;
}

.sidebar-stage.done .sidebar-stage-dot { background: var(--jdx-green); }

/* Main shell */
.jdx-shell {
  display: block;
  min-height: 0;
}

.jdx-workspace {
  padding: 0;
  border-right: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: calc(var(--qf-column) + 56px);
}

.score-sheet {
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: 12px;
  box-shadow: inset 3px 0 0 var(--jdx-accent);
  overflow: hidden;
}

.workspace-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--jdx-border);
}

.workspace-top h2 {
  margin: 0 0 4px;
  font-size: 26px;
  letter-spacing: -0.03em;
}

.run-chip {
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--jdx-border-strong);
  background: transparent;
}

.run-chip.running {
  color: var(--jdx-accent);
  background: rgb(var(--accent-rgb) / 0.12);
}

.run-chip.completed {
  color: var(--status-ok-text);
  background: rgb(var(--green-rgb) / 0.12);
}

.run-chip.failed {
  color: var(--status-bad-text);
  background: rgb(var(--red-rgb) / 0.12);
}

.agent-lanes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.agent-lane {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid var(--jdx-border);
  background: var(--jdx-elevated);
  color: var(--jdx-text);
  cursor: pointer;
}

.agent-lane.selected,
.agent-lane.active {
  border-color: rgb(var(--accent-rgb) / 0.45);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.18);
}

.agent-lane.completed .lane-dot { background: var(--jdx-green); }
.agent-lane.active .lane-dot { background: var(--jdx-accent); box-shadow: none; }
.agent-lane.failed .lane-dot { background: var(--jdx-red); }

.lane-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jdx-muted);
}

.lane-name { font-size: 12px; font-weight: 600; }
.lane-status { font-size: 11px; color: var(--jdx-secondary); text-transform: uppercase; }

.terminal-panel {
  flex: 1;
  min-height: 420px;
  background: var(--jdx-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--jdx-border);
  display: flex;
  flex-direction: column;
}

.panel-header.flat {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgb(var(--tint-rgb) / 0.08);
}

.panel-header.flat h3 {
  margin: 0;
  font-size: 14px;
}

.terminal-feed {
  flex: 1;
  overflow: auto;
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.log-line {
  padding: 7px 0;
  border-bottom: 1px solid rgb(var(--tint-rgb) / 0.05);
  color: var(--jdx-secondary);
}

.log-line.error { color: var(--status-bad-text); }

.log-entry {
  padding: 10px 0;
  border-bottom: 1px solid rgb(var(--tint-rgb) / 0.05);
}

.log-entry-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.log-time {
  font-size: 11px;
  color: var(--jdx-muted);
}

.log-agent {
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 8px;
  background: rgb(var(--accent-rgb) / 0.16);
  color: var(--jdx-accent);
}

.log-message {
  color: var(--jdx-secondary);
  line-height: 1.5;
}

.log-entry.error .log-message { color: var(--status-bad-text); }
.log-entry.warn .log-message { color: var(--status-warn-text); }

.audit-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 420px;
}

.audit-run-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.audit-panel {
  background: var(--jdx-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--jdx-border);
  overflow: hidden;
}

.audit-scoring-body {
  padding: 14px 16px 18px;
}

.audit-verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 18px;
}

.audit-score-row {
  margin-bottom: 10px;
}

.audit-score-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--jdx-secondary);
}

.audit-score-bar {
  height: 6px;
  background: rgb(var(--tint-rgb) / 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.audit-score-bar span {
  display: block;
  height: 100%;
  background: var(--jdx-accent);
  border-radius: 999px;
}

.audit-rationale {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--jdx-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.audit-timeline {
  list-style: none;
  margin: 0;
  padding: 8px 16px 16px;
  max-height: 360px;
  overflow: auto;
}

.audit-event {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgb(var(--tint-rgb) / 0.06);
  font-size: 12px;
}

.audit-event-time {
  color: var(--jdx-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.audit-event-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.audit-event.stage .audit-event-body strong { color: var(--jdx-accent); }
.audit-event.agent .audit-event-body strong { color: var(--jdx-accent); }
.audit-event.score .audit-event-body strong { color: var(--status-ok-text); }
.audit-event.decision .audit-event-body strong { color: var(--jdx-green); }

.audit-agents {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.audit-agent-block {
  border: 1px solid rgb(var(--tint-rgb) / 0.08);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: rgb(var(--shadow-rgb) / 0.15);
}

.audit-agent-block summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.audit-io-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.audit-io-grid h4 {
  margin: 0 0 6px;
  font-size: 11px;
  color: var(--jdx-muted);
  text-transform: none;
}

.audit-actions {
  display: flex;
  justify-content: flex-end;
}

.pill.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

@media (max-width: 960px) {
  .audit-grid {
    grid-template-columns: 1fr;
  }
  .audit-io-grid {
    grid-template-columns: 1fr;
  }
  .audit-event {
    grid-template-columns: 1fr;
  }
}

/* Sidebar */
.jdx-sidebar {
  background: var(--jdx-page);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.company-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--jdx-border);
}

.context-pill {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  background: rgb(var(--tint-rgb) / 0.07);
  color: var(--jdx-secondary);
}

.sidebar-agents {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent-card {
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--jdx-card);
  color: var(--jdx-text);
  cursor: pointer;
  padding: 0;
}

.agent-card.selected {
  border-color: rgb(var(--accent-rgb) / 0.45);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.18);
}

.agent-card.active {
  box-shadow: 0 0 18px rgb(var(--accent-rgb) / 0.18);
}

.score-bar {
  background: rgb(var(--accent-rgb) / 0.16);
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.28);
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.agent-card-body {
  padding: 14px 16px;
}

.agent-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.agent-card .status {
  display: inline-block;
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 8px;
  background: rgb(var(--tint-rgb) / 0.08);
  margin-bottom: 8px;
  text-transform: none;
}

.agent-card.active .status {
  background: rgb(var(--accent-rgb) / 0.18);
  color: var(--jdx-accent);
}

.agent-card.completed .status {
  background: rgb(var(--green-rgb) / 0.16);
  color: var(--status-ok-text);
}

.agent-meta {
  font-size: 12px;
  color: var(--jdx-secondary);
  line-height: 1.5;
}

.agent-meta-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.agent-pill {
  border-radius: 999px;
  padding: 2px 8px;
  background: rgb(var(--tint-rgb) / 0.08);
  font-size: 11px;
}

.agent-reason {
  margin-top: 6px;
  font-size: 12px;
  color: var(--jdx-secondary);
}

.agent-reason.error { color: var(--status-bad-text); }

.agent-preview {
  margin-top: 8px;
  font-size: 12px;
  color: var(--jdx-secondary);
  line-height: 1.45;
}

.agent-card:hover {
  transform: scale(1.01);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.io-panel {
  margin-top: auto;
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.io-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--jdx-border);
  font-size: 13px;
  font-weight: 600;
}

.io-block h4 {
  margin: 0 0 8px;
  padding: 12px 14px 0;
  font-size: 11px;
  color: var(--jdx-muted);
  text-transform: none;
  letter-spacing: 0.05em;
}

.io-content {
  margin: 0;
  padding: 0 14px 14px;
  max-height: 140px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.5;
  color: var(--jdx-secondary);
}

.brief-link {
  color: var(--jdx-accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.brief-link:hover { text-decoration: underline; }

/* Pipeline canvas */
.view-tabs {
  display: flex;
  gap: 0;
  padding: 0 8px;
  border-bottom: 1px solid var(--jdx-border);
}

.view-tab {
  background: transparent;
  border: 0;
  color: var(--jdx-secondary);
  border-radius: 0;
  padding: 10px 12px 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: inset 0 -2px 0 transparent;
}

.view-tab.active {
  background: transparent;
  color: var(--jdx-text);
  box-shadow: inset 0 -2px 0 var(--jdx-accent);
}

.pipeline-canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  height: min(520px, calc(100vh - 280px));
  min-height: 420px;
  border-radius: 0;
  border: 0;
  overflow: hidden;
  background: var(--jdx-page);
}

.pipeline-arch-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 0;
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  max-width: min(420px, calc(100% - 180px));
  pointer-events: none;
}

.pipeline-arch-header strong {
  font-size: 13px;
  font-weight: 600;
}

.pipeline-canvas:has(.is-stacked) .drag-hint { display: none; }

/* Stacked checks are part of the score sheet, not a second board. */
.pipeline-canvas:has(.is-stacked) {
  height: auto;
  min-height: 0;
  background: transparent;
}

.pipeline-canvas:has(.is-stacked) .pipeline-arch-header,
.pipeline-canvas:has(.is-stacked) .pipeline-metrics {
  position: static;
  max-width: none;
  pointer-events: auto;
  background: transparent;
  backdrop-filter: none;
  border: 0;
  margin: 0;
}

.pipeline-metrics {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  pointer-events: none;
  background: color-mix(in srgb, var(--jdx-card) 78%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-md);
}

.pipeline-metric {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 8px 10px;
}

.pipeline-metric-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.pipeline-metric-label {
  font-size: 11px;
  color: var(--jdx-muted);
  text-transform: none;
  letter-spacing: 0.05em;
}

.pipeline-metric-value {
  font-size: 13px;
  font-weight: 700;
}

.pipeline-metric-track {
  margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--tint-rgb) / 0.08);
  overflow: hidden;
}

.pipeline-metric-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--jdx-accent);
  transition: width 400ms ease;
}

.pipeline-metric-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--jdx-secondary);
}

/* Viewport onto the flow graph: one board, not a diagram inside a second card.
   The dot grid is pinned to the camera (--flow-x/y/k, set from the world
   transform) so it pans and zooms with the cards and still covers empty space. */
.pipeline-flow-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: var(--jdx-page);
  background-image: radial-gradient(circle, rgb(var(--tint-rgb) / 0.16) 1px, transparent 1.1px);
  background-size: calc(22px * var(--flow-k, 1)) calc(22px * var(--flow-k, 1));
  background-position: var(--flow-x, 0px) var(--flow-y, 0px);
  cursor: grab;
  touch-action: pan-y;
}

.pipeline-flow-wrap.is-panning,
.pipeline-flow-wrap.is-moving-card { cursor: grabbing; }
.pipeline-flow-wrap:focus-visible { outline: 2px solid var(--jdx-accent); outline-offset: -2px; }

/* No larger surface to move around, so it should not invite dragging. */
.pipeline-flow-wrap.is-stacked {
  position: relative;
  cursor: default;
  touch-action: auto;
  background-image: none;
  background-color: transparent;
  border: 0;
  min-height: 0;
  flex: none;
  inset: auto;
}

.pipeline-flow-wrap.is-stacked .flow-controls { display: none; }
.pipeline-flow-wrap.is-stacked .flow-node {
  cursor: default;
  touch-action: auto;
  box-shadow: none;
}
.pipeline-flow-wrap.is-stacked .flow-node.connector { border-style: solid; }

.flow-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* Only moves the canvas makes on its own are eased — dragging and pinching
   must track the finger exactly. */
.flow-world.is-animating {
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .flow-world.is-animating { transition: none; }
}

.flow-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: calc(100% - 20px);
  padding: 4px;
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-sm);
  background: var(--jdx-elevated);
  box-shadow: 0 8px 24px rgb(var(--shadow-rgb) / 0.28);
}

.flow-ctl {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--jdx-secondary);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.flow-ctl:hover { background: var(--jdx-card-hover); color: var(--jdx-text); }
.flow-ctl-fit { font-size: 11px; font-weight: 600; }

.pipeline-flow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.flow-path {
  fill: none;
  stroke: rgb(var(--tint-rgb) / 0.12);
  stroke-width: 2;
  marker-end: url(#edge-arrow);
  transition: stroke 300ms ease;
}

.flow-path.done {
  stroke: rgb(var(--green-rgb) / 0.45);
  marker-end: url(#edge-arrow-done);
}

.flow-path.active {
  stroke: rgb(var(--accent-rgb) / 0.7);
  stroke-dasharray: 6 6;
  animation: flowDash 1.2s linear infinite;
  marker-end: url(#edge-arrow-active);
}

#edge-arrow path { fill: rgb(var(--tint-rgb) / 0.35); }
#edge-arrow-active path { fill: rgb(var(--accent-rgb)); }
#edge-arrow-done path { fill: var(--jdx-green); }

.flow-particle {
  fill: var(--jdx-accent);
  filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / 0.8));
}

@keyframes flowDash {
  to { stroke-dashoffset: -24; }
}

.pipeline-nodes {
  position: absolute;
  inset: 0;
}

/* Position and size come from the layout in pipeline-canvas.js. */
.flow-node {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--jdx-elevated);
  border: 1px solid var(--jdx-border-strong);
  box-shadow: 0 10px 28px rgb(var(--shadow-rgb) / 0.28);
  text-align: left;
  cursor: grab;
  user-select: none;
  touch-action: none;
  overflow: hidden;
  animation: nodeIn 280ms ease both;
  animation-delay: calc(var(--i) * 40ms);
}

.flow-node.is-dragging {
  cursor: grabbing;
  z-index: 4;
}

.flow-node:focus-visible {
  outline: 2px solid var(--jdx-accent);
  outline-offset: 2px;
}

@keyframes nodeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* The entrance animation holds its first frame until it runs, so anything that
   stops it running must not leave the node invisible. */
@media (prefers-reduced-motion: reduce) {
  .flow-node { animation: none; }
  .flow-node.active .flow-node-badge { animation: none; }
  .flow-path.active { animation: none; }
}

.flow-node.connector {
  border-style: dashed;
  background: rgb(var(--tint-rgb) / 0.03);
}

.flow-node.orchestrator {
  border-color: rgb(var(--accent-rgb) / 0.45);
  box-shadow:
    inset 0 0 0 1px rgb(var(--accent-rgb) / 0.15),
    0 10px 28px rgb(var(--shadow-rgb) / 0.28);
}

.flow-node-face {
  flex: 0 0 46px;
  width: 46px;
  height: 56px;
}

.flow-node-face .desk-portrait {
  display: block;
  width: 100%;
  height: 100%;
}

.flow-node-copy {
  min-width: 0;
  padding-right: 14px;
}

.flow-node-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 6px;
  right: 6px;
  float: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  margin: 0 0 4px 8px;
  background: rgb(var(--tint-rgb) / 0.08);
  color: var(--jdx-muted);
}

/* In a live view the working agent has to be findable at a glance, so the
   status belongs on the card and not only on its badge. */
.flow-node.active {
  border-color: rgb(var(--accent-rgb) / 0.6);
  box-shadow:
    0 0 0 3px rgb(var(--accent-rgb) / 0.16),
    0 10px 28px rgb(var(--shadow-rgb) / 0.28);
}

.flow-node.is-selected,
.flow-node.active.is-selected {
  border-color: rgb(var(--accent-rgb) / 0.75);
  box-shadow:
    0 0 0 2px rgb(var(--accent-rgb) / 0.45),
    0 0 0 6px rgb(var(--accent-rgb) / 0.14),
    0 10px 28px rgb(var(--shadow-rgb) / 0.28);
}

.flow-node.done { border-color: rgb(var(--green-rgb) / 0.32); }
.flow-node.failed { border-color: rgb(var(--red-rgb) / 0.45); }

/* Work not started yet recedes rather than competing for attention. Opacity
   would be overridden by the entrance animation's final frame. */
.flow-node.pending .flow-node-label { color: var(--jdx-secondary); }

.flow-node.active .flow-node-badge {
  background: var(--jdx-accent);
  color: var(--on-accent);
  box-shadow: none;
  animation: nodePulse 1.4s ease-in-out infinite;
}

.flow-node.done .flow-node-badge {
  background: var(--jdx-green);
  color: var(--on-status);
}

.flow-node.failed .flow-node-badge {
  background: var(--jdx-red);
  color: var(--on-status);
}

@keyframes nodePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.flow-node-kind {
  display: block;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0.06em;
  color: var(--jdx-muted);
  margin-bottom: 2px;
}

.flow-node-label {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--jdx-text);
  line-height: 1.15;
}

.flow-node-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 4px;
  font-size: 11px;
  color: var(--jdx-secondary);
  line-height: 1.3;
  overflow: hidden;
  white-space: normal;
}

.activity-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.log-entry {
  animation: fadeInLog 280ms ease;
}

@keyframes fadeInLog {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.metric-estimated {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--status-warn-text);
}

.header-nav {
  display: flex;
  gap: 8px;
  margin-right: 12px;
}

.header-nav .pill-btn.active {
  border-color: rgb(var(--accent-rgb) / 0.35);
  color: var(--jdx-text);
  background: rgb(var(--accent-rgb) / 0.12);
}

.primary.compact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 10px 16px;
  font-size: 13px;
}

.runs-page .jdx-brand {
  align-items: flex-start;
}

.runs-page .header-nav {
  margin-bottom: 4px;
}

.runs-shell {
  padding: 0 0 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.runs-toolbar {
  margin: 16px 24px 0;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.runs-filter {
  flex: 1;
  min-width: 220px;
}

.runs-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chip {
  background: rgb(var(--tint-rgb) / 0.05);
  border: 1px solid var(--jdx-border);
  color: var(--jdx-secondary);
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 12px;
}

.filter-chip.active {
  background: rgb(var(--accent-rgb) / 0.16);
  color: var(--jdx-text);
  border-color: rgb(var(--accent-rgb) / 0.35);
}

.runs-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: 0 0 12px 12px;
  box-shadow: inset 3px 0 0 var(--jdx-accent);
  overflow: hidden;
}

.runs-page .runs-toolbar.panel {
  margin-bottom: 0;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--jdx-border);
  box-shadow: inset 3px 0 0 var(--jdx-accent);
  background: var(--jdx-card);
}

.runs-page .run-card.panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--jdx-border);
}

.runs-page .run-card.panel:last-child { border-bottom: 0; }

.run-card {
  padding: 16px;
}

.run-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.run-card-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.run-card-meta {
  font-size: 13px;
}

.run-card-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--jdx-border);
}

.run-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.run-stat-label {
  font-size: 11px;
  color: var(--jdx-muted);
  text-transform: none;
  letter-spacing: 0.05em;
}

.run-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgb(var(--red-rgb) / 0.08);
  color: var(--status-bad-text);
  font-size: 13px;
}

.run-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}

.run-id {
  margin-left: auto;
  font-size: 11px;
  word-break: break-all;
}

.leads-page .leads-shell {
  padding: 8px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.leads-sheet {
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: 12px;
  box-shadow: inset 3px 0 0 var(--jdx-accent);
  overflow: hidden;
}

.finder-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--jdx-border);
}

.finder-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.finder-reading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0;
}

.finder-reading strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.finder-reading span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jdx-muted);
}

.finder-lookup {
  font-size: 12px;
}

.finder-lookup summary {
  cursor: pointer;
  color: var(--jdx-muted);
  width: max-content;
}

.finder-lookup summary:hover { color: var(--jdx-secondary); }

.finder-lookup p {
  margin: 6px 0 0;
  color: var(--jdx-secondary);
}

.leads-sheet > .panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.leads-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.leads-pagination {
  margin-top: 0;
  border-top: 1px solid var(--jdx-border);
}

.leads-pagination-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.leads-pagination .ghost-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lead-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ── Instrument gauge ────────────────────────────────────────────────────── */
.gauge { display: block; flex-shrink: 0; }

/* Needles settle rather than snap — the same motion as the logo. */
.gauge-needle {
  transform-origin: 50px 52px;
  transition: transform var(--motion-slow) var(--ease-settle);
}

.gauge.is-unscored .gauge-needle { opacity: 0.3; }

@media (prefers-reduced-motion: reduce) {
  .gauge-needle { transition: none; }
}

/* ── Companies workspace ─────────────────────────────────────────────────── */
.companies-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 24px;
  border-bottom: 1px solid var(--jdx-border);
}

/* Progress, the agent canvas, and agent I/O sit behind the verdict. */
.run-behind {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.run-cast-head {
  padding: 16px 18px 4px;
}

.run-cast-head h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.run-cast-head p { margin: 2px 0 0; }

.run-behind .jdx-sidebar {
  border-top: 1px solid var(--jdx-border);
  margin-top: 0;
  padding: 14px 18px 18px;
  background: transparent;
}

.score-sheet .completion-banner,
.score-sheet .pipeline-error,
.score-sheet .run-verdict {
  margin: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--jdx-border);
  box-shadow: none;
  background: transparent;
}

.score-sheet .run-behind .agent-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: baseline;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--jdx-border);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.score-sheet .agent-card-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 560;
  letter-spacing: -0.02em;
}

.score-sheet .agent-card .status {
  margin: 0;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}

.score-sheet .agent-reason {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--jdx-muted);
}

.score-sheet .activity-view,
.score-sheet .audit-view {
  padding: 14px 18px 18px;
}

.score-sheet .sidebar-stages { display: none; }

.score-sheet .sidebar-agents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 720px) {
  .score-sheet .sidebar-agents { grid-template-columns: 1fr; }
}

.companies-bulk {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 3;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid var(--jdx-border-strong);
  border-radius: var(--radius-sm);
  background: var(--jdx-card);
  box-shadow: var(--elevation-1, 0 2px 8px rgb(0 0 0 / 0.08));
}

.companies-bulk[hidden] { display: none; }

.bulk-count {
  font-weight: 600;
  font-size: 13px;
  margin-right: 2px;
}

.companies-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 0 4px;
  font-size: 13px;
}

.companies-more[hidden] { display: none; }

/* A decision already taken reads as a state, not as an available action. */
.ghost-btn.is-on {
  border-color: var(--jdx-accent);
  color: var(--jdx-accent);
}

.company-note-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--jdx-muted);
}

.note-input {
  width: 100%;
  resize: vertical;
  min-height: 68px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--jdx-text);
  background: var(--jdx-input-bg, var(--jdx-page));
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-sm);
}

.note-input:focus {
  outline: none;
  border-color: var(--jdx-accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.18);
}

.note-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.note-status { font-size: 12px; }

.companies-search { flex: 1; min-width: 260px; max-width: 420px; }

.filter-row { display: flex; gap: 6px; flex-wrap: wrap; }

.filter-count {
  color: var(--jdx-muted);
  font-variant-numeric: tabular-nums;
}

.companies-shell {
  padding: 8px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.companies-summary {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* Dot-separated secondary metadata — calmer than a row of pills. */
.meta-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--jdx-secondary);
  font-size: 13px;
}

.meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--jdx-muted);
  display: inline-block;
}

.meta-warn {
  color: var(--status-warn-text);
  font-size: 13px;
}

.meta-warn.compact { font-size: 12px; }

.pill.warn {
  color: var(--status-warn-text);
  border-color: rgb(var(--amber-rgb) / 0.35);
}

.company-row-stale {
  margin-top: 8px;
  font-size: 12px;
  color: var(--status-warn-text);
}

.companies-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: 12px;
  box-shadow: inset 3px 0 0 var(--jdx-accent);
  overflow: hidden;
}

/* A scannable list row: identity gets the space, signals are fixed columns,
   one primary action. Everything else is on the detail page. */
.company-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 128px 164px 210px;
  gap: 12px;
  align-items: center;
  padding: 12px 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--jdx-border);
  border-radius: 0;
}

.company-row:hover { background: rgb(var(--tint-rgb) / 0.04); }

.company-row-select {
  display: flex;
  align-items: center;
  justify-content: center;
}

.company-row-select input {
  width: 15px;
  height: 15px;
  accent-color: var(--jdx-accent);
  cursor: pointer;
}

.company-row.is-dismissed { opacity: 0.5; }

/* One line each for identity and address, so row height is predictable. */
.company-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.company-row-title a {
  text-decoration: none;
  color: inherit;
  min-width: 0;
  overflow: hidden;
}

.company-row-title a:hover h3 { color: var(--jdx-accent); }

.company-row-title h3 {
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-row-title .state-tag,
.company-row-title .meta-warn { flex-shrink: 0; }

/* State and identity share the second line so the name gets the full column;
   a truncated company name is the one thing a rep cannot scan past. */
.company-row-meta .state-tag,
.company-row-meta .meta-warn { flex-shrink: 0; }

.company-row-ident {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.state-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--jdx-border);
  color: var(--jdx-secondary);
}

.state-tag.state-qualified { color: var(--band-hot-text); border-color: rgb(var(--accent-rgb) / 0.35); }
.state-tag.state-stale { color: var(--status-warn-text); border-color: rgb(var(--amber-rgb) / 0.35); }
.state-tag.state-contacted { color: var(--status-ok-text); border-color: rgb(var(--green-rgb) / 0.35); }
.state-tag.state-shortlisted { color: var(--jdx-accent); border-color: rgb(var(--accent-rgb) / 0.35); }

.company-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--jdx-muted);
  font-size: 12px;
  margin-top: 3px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

/* Evidence on one line; the full list is on the detail page.
   Block rather than flex so text-overflow actually applies. */
.company-row-evidence {
  margin-top: 5px;
  color: var(--jdx-secondary);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-row-evidence .meta-dot { margin: 0 7px; vertical-align: middle; }

.company-row-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--jdx-secondary);
  border-left: 2px solid var(--jdx-border-strong);
  padding-left: 8px;
}

/* Signals are now separate grid columns on the row itself. */
.company-row-signals { display: contents; }

.signal { display: flex; flex-direction: column; gap: 2px; }

.signal-label {
  color: var(--jdx-muted);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.06em;
}

.signal strong { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.signal strong.fit-strong { color: var(--band-hot-text); }
.signal strong.fit-possible { color: var(--jdx-text); }
.signal strong.fit-weak { color: var(--jdx-secondary); }
.signal strong.hotlist { color: var(--band-hot-text); }
.signal strong.warm { color: var(--band-warm-text); }
.signal strong.pass { color: var(--band-pass-text); }
.signal strong.unqualified { color: var(--jdx-muted); font-weight: 500; }

/* The reading, not a number in a cell. */
.signal-gauge {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.gauge-caption {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.gauge-caption strong { font-size: 12px; letter-spacing: 0.02em; }
.gauge-caption span { color: var(--jdx-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.signal-hint { color: var(--jdx-muted); font-size: 11px; line-height: 1.35; }

/* Fixed slots, not content-sized ones. "Qualify" and "Open brief" are
   different lengths, as are "Mark contacted" and "Contacted", so a flex row
   put the primary button in a different place on almost every line. */
.company-row-actions {
  display: grid;
  grid-template-columns: 100px 112px 30px;
  align-items: center;
  gap: 6px;
  justify-content: end;
}

/* Row controls must never wrap — a two-line button reads as broken. Matching
   heights keep the action column reading as one row of controls. */
.company-row-actions .primary,
.company-row-actions .compact-link,
.company-row-actions .ghost-btn {
  white-space: nowrap;
  height: 30px;
  width: 100%;
  padding-left: 4px;
  padding-right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.company-row .signal strong { line-height: 1.25; }

.row-dismiss {
  width: 30px;
  padding: 0;
  flex-shrink: 0;
  text-align: center;
}

/* Dismiss is a quiet secondary, revealed on row hover to keep the list calm. */
.company-row-actions [data-dismiss] {
  opacity: 0;
  border-color: transparent;
}

.company-row:hover .company-row-actions [data-dismiss],
.company-row-actions [data-dismiss]:focus-visible { opacity: 1; }

@media (max-width: 1500px) {
  /* The fit signal drops first; the company name is what a rep scans for, so
     it keeps the space the hidden column gives back. */
  .company-row { grid-template-columns: 22px minmax(0, 1fr) 118px auto; gap: 10px; }
  .company-row .signal:nth-of-type(1) { display: none; }
  .company-row-actions .ghost-btn { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 1000px) {
  .company-row { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; }
  .company-row-signals { display: flex; gap: 18px; grid-column: 2; }
}

.idle-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Run verdict — the result leads, the pipeline views follow. */
.run-verdict {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 20px;
  margin-bottom: 12px;
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-md);
}

.run-verdict.hidden { display: none; }
.run-verdict-main { flex: 1; min-width: 0; }
.run-verdict-main .verdict-headline { font-size: 24px; }
.run-verdict-main p { margin: 4px 0 8px; font-size: 12px; }
.run-verdict-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* The company page states the verdict once, in its own instrument, so the
   brief's score ring and score tile are suppressed here. */
.company-page .brief-hero,
.company-page .kpi-tile[data-kpi="score"] { display: none; }

/* ── Company detail ──────────────────────────────────────────────────────── */
.company-shell {
  padding: 16px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.company-shell > #company-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The verdict is an instrument reading, not a statistic. */
.company-verdict {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 32px;
  padding: 24px 26px;
  align-items: center;
}

.verdict-instrument {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* This is the only thing on the page that teaches what the bands mean, so it
   is sized to be read rather than tucked under the dial as decoration. */
.verdict-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--jdx-secondary);
}

.verdict-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Matches the proportions of the arc it stands for. */
.verdict-legend i {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.verdict-readout p { margin: 6px 0 0; font-size: 13px; max-width: 52ch; }
.verdict-readout .primary { margin-top: 18px; display: inline-flex; }

.verdict-facts {
  display: flex;
  gap: 32px;
  margin: 18px 0 0;
  flex-wrap: wrap;
}

.verdict-facts dt {
  color: var(--jdx-muted);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.06em;
}

.verdict-facts dd { margin: 3px 0 0; font-size: 14px; }

.verdict-block p { margin: 4px 0 0; font-size: 12px; }

.verdict-headline {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.verdict-headline {
  font-size: 30px;
  letter-spacing: -0.02em;
}

.verdict-headline.hotlist,
.verdict-headline.warm,
.verdict-headline.pass,
.verdict-label.hotlist,
.verdict-label.warm,
.verdict-label.pass {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 680;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  border-radius: 3px;
  padding: 2px 8px 1px;
  transform: rotate(-1.5deg);
}

.verdict-headline.hotlist { color: var(--band-hot-text); }
.verdict-headline.warm { color: var(--band-warm-text); }
.verdict-headline.pass { color: var(--band-pass-text); }
.verdict-headline.unqualified { color: var(--jdx-secondary); }
.verdict-headline.plain { color: var(--jdx-text); font-size: 16px; }
.verdict-headline.fit-strong { color: var(--band-hot-text); }
.verdict-headline.fit-possible { color: var(--jdx-text); }
.verdict-headline.fit-weak { color: var(--jdx-secondary); }

/* Shows where the score sits against the thresholds that decide the band. */
.band-scale {
  position: relative;
  height: 6px;
  margin-top: 14px;
  background: var(--jdx-elevated);
  border-radius: 3px;
}

.band-fill { height: 100%; border-radius: 3px; background: var(--jdx-secondary); }
.band-fill.hotlist { background: var(--jdx-accent); }
.band-fill.warm { background: var(--jdx-amber); }

.band-marker {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 14px;
  background: var(--jdx-border-strong);
}

.band-marker::after {
  content: attr(data-label);
  position: absolute;
  top: 16px;
  left: -12px;
  font-size: 10px;
  color: var(--jdx-muted);
  white-space: nowrap;
}

.company-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.company-grid-wide { grid-column: 1 / -1; }

/* The action group sizes to its buttons and the heading takes what is left.
   Sharing the header evenly pushed the last two controls onto a second row
   while the company name sat on a line of its own. */
.company-page .jdx-header { flex-wrap: wrap; row-gap: 14px; }
.company-page .jdx-header > #company-actions { flex: 1 0 100%; }
.company-page .page-heading h1 { font-size: 32px; }

.company-page .jdx-header > .page-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.company-body { padding: 16px; }

.reason-list {
  margin: 0;
  padding-left: 16px;
  color: var(--jdx-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.rubric-table {
  margin-top: 14px;
  border-top: 1px solid var(--jdx-border);
}

.rubric-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--jdx-border);
  font-size: 13px;
}

.rubric-row span:first-child { color: var(--jdx-secondary); text-transform: capitalize; }
.rubric-points { font-variant-numeric: tabular-nums; }

.flag-block { margin-top: 14px; }

/* Flexible rather than a fixed 190px date column: this panel sits in a half
   width grid, where fixed columns left so little room that the verdict chip and
   the link both wrapped onto two lines. */
.history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--jdx-border);
  font-size: 13px;
}

.history-when {
  color: var(--jdx-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}

.history-what {
  color: var(--jdx-secondary);
  flex: 1 1 auto;
  min-width: 0;
}

.history-row .pill,
.history-row .ghost-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.history-row .ghost-btn { margin-left: auto; }

.notice {
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid rgb(var(--amber-rgb) / 0.3);
  border-radius: var(--radius-sm);
  color: var(--jdx-amber);
  font-size: 13px;
}

@media (max-width: 1100px) {
  .company-verdict,
  .company-grid { grid-template-columns: 1fr; }
  .history-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Results read as the next page of the call sheet. */
.lead-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--jdx-border);
  border-radius: 0;
}

.lead-row:last-child { border-bottom: 0; }

.lead-row:hover { background: rgb(var(--tint-rgb) / 0.04); }

.lead-row-rank {
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--jdx-accent);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

.lead-row-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.lead-row-title h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.lead-row-segment {
  color: var(--jdx-muted);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--jdx-border-strong);
  border-radius: 3px;
  padding: 2px 6px;
}

.lead-row-segment.fit-strong {
  color: var(--band-hot-text);
  border-color: rgb(var(--band-hot-rgb) / 0.55);
}

.lead-row-segment.fit-possible {
  color: var(--band-warm-text);
  border-color: rgb(var(--band-warm-rgb) / 0.55);
}

.lead-row-meta,
.lead-row-line {
  color: var(--jdx-muted);
  font-size: 13px;
  margin: 4px 0 0;
}

.lead-row-reason {
  margin: 8px 0 0;
  max-width: 62ch;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.lead-row-why {
  margin-top: 10px;
  font-size: 12px;
}

.lead-row-why summary {
  cursor: pointer;
  color: var(--jdx-muted);
  width: max-content;
}

.lead-row-why summary:hover { color: var(--jdx-secondary); }

.lead-row-why ul {
  margin: 8px 0 0;
  padding-left: 16px;
  color: var(--jdx-secondary);
  line-height: 1.6;
}

.lead-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

/* Fit is a qualitative signal — the finder heuristic is not a calibrated score. */
.lead-row-fit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
  text-align: right;
}

.lead-row-fit strong {
  font-size: 13px;
  font-weight: 600;
}

.lead-row-fit span {
  color: var(--jdx-muted);
  font-size: 11px;
}

.lead-row-fit.fit-strong strong { color: var(--band-hot-text); }
.lead-row-fit.fit-possible strong { color: var(--jdx-text); }
.lead-row-fit.fit-weak strong { color: var(--jdx-secondary); }

.lead-row-actions {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

@media (max-width: 1100px) {
  .lead-row {
    grid-template-columns: 24px 1fr;
  }

  .lead-row-actions {
    grid-column: 2;
  }

  .finder-bar { flex-direction: column; }
  .finder-advanced { margin-left: 0; }
}

/* Idle */
.jdx-idle {
  padding: 40px 24px;
}

.idle-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--jdx-card);
  border-radius: var(--radius-md);
  padding: 24px;
  border: 1px solid var(--jdx-border);
}

.idle-card h2 { margin-top: 0; }

.idle-card > p {
  color: var(--jdx-secondary);
  margin-bottom: 20px;
}

.idle-list {
  color: var(--jdx-secondary);
  line-height: 1.7;
}

/* Facts read as a reference table, not a marketing bullet list. */
.idle-facts {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--jdx-border);
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.idle-facts > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 10px 12px;
  background: var(--jdx-card);
}

.idle-facts dt {
  color: var(--jdx-muted);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.06em;
}

.idle-facts dd {
  margin: 0;
  color: var(--jdx-secondary);
  font-size: 13px;
}

@media (max-width: 640px) {
  .idle-facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Brief page */

/* The brief is rendered into two different pages, so its own stacking has to
   travel with it. Scoping this to .brief-page meant that on the company page
   every section of the brief sat directly on the next with no gap at all,
   while the sections around it were spaced by the shell. The gap matches
   .company-shell so one rhythm runs down the whole page. */
.brief-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brief-page .brief-shell {
  padding: 20px 24px 40px;
}

.brief-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 20px;
}

.hero-score {
  display: flex;
  gap: 18px;
  align-items: center;
}

.hero-score-value {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.hero-score-caption {
  color: var(--jdx-secondary);
  font-size: 13px;
  margin-top: 6px;
}

.verdict-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jdx-accent);
  font-weight: 680;
}

.verdict-label.hotlist { color: var(--band-hot-text); }
.verdict-label.warm { color: var(--band-warm-text); }
.verdict-label.pass { color: var(--band-pass-text); }

.pill.hotlist {
  background: var(--band-hot-soft);
  color: var(--band-hot-text);
  border-color: rgb(var(--band-hot-rgb) / 0.45);
}

.pill.warm {
  background: rgb(var(--amber-rgb) / 0.14);
  color: var(--status-warn-text);
  border-color: rgb(var(--amber-rgb) / 0.28);
}

.pill.pass {
  background: rgb(var(--tint-rgb) / 0.06);
  color: var(--jdx-secondary);
}

.context-pill.hotlist,
.context-pill.warm,
.context-pill.pass {
  border: 1px solid var(--jdx-border);
}

.verdict-stack {
  text-align: right;
}

/* Surfaces lift by whatever the theme has available: a dark theme separates
   them with a border and a step in lightness, a light theme runs out of
   lightness at white and has to use shadow instead. Both go through the same
   token, so no rule has to know which theme it is in. */
.panel {
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* A panel is used two ways: as a frame around wrappers that carry their own
   padding, and as a box holding bare prose. The second kind has nothing to
   indent its content, which is how loading, empty and error copy ended up
   against the border. Naming it is what stops that recurring. */
.panel-message {
  padding: 18px 20px;
}

.panel-message > .empty-state { padding: 0; }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--jdx-border);
}

.panel-header h2 {
  margin: 0;
  font-size: 16px;
}

.brief-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
}

.brief-grid.three-col {
  grid-template-columns: 1.2fr 1fr 0.9fr;
}

.brief-grid.two-col {
  grid-template-columns: 1.1fr 0.9fr;
}

.directors-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.director-card {
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.director-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.director-detail,
.director-address {
  margin-top: 6px;
  font-size: 12px;
  color: var(--jdx-secondary);
  line-height: 1.4;
}

.contact-panel {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-label {
  font-size: 11px;
  color: var(--jdx-muted);
  text-transform: none;
  letter-spacing: 0.05em;
}

.contact-value {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chart-wrap {
  position: relative;
  height: 260px;
  padding: 12px 16px 0;
}

.chart-wrap.tall { height: 300px; }
.chart-wrap.short { height: 180px; }

.panel-subtitle {
  margin-top: 4px;
  font-size: 12px;
}

.brief-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.loading-panel {
  margin: 20px 24px;
  padding: 20px;
}

.loading-stage-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.loading-pill {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  background: rgb(var(--tint-rgb) / 0.05);
  color: var(--jdx-muted);
  border: 1px solid var(--jdx-border);
  transition: all 300ms ease;
}

.loading-pill.active {
  background: rgb(var(--accent-rgb) / 0.16);
  color: var(--jdx-text);
  border-color: rgb(var(--accent-rgb) / 0.35);
}

.loading-pill.done {
  color: var(--status-ok-text);
  border-color: rgb(var(--green-rgb) / 0.28);
}

.loading-copy {
  margin: 0;
  color: var(--jdx-secondary);
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.kpi-tile {
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 10px 14px;
  min-width: 0;
}

.kpi-tile.hotlist { border-color: rgb(var(--accent-rgb) / 0.35); }
.kpi-tile.warm { border-color: rgb(var(--amber-rgb) / 0.28); }

.kpi-label {
  font-size: 11px;
  color: var(--jdx-muted);
  text-transform: none;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* One line, always. A wrapped value used to set the height of every tile in
   the strip, and an overflowing one was silently clipped mid-number. */
.kpi-value {
  font-size: 20px;
  font-weight: 800;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Not disclosed" is a statement, not a figure — at the numeral size it
   overflowed the tile and got clipped to something meaningless. */
.kpi-value.is-absent {
  font-size: 15px;
  font-weight: 600;
  color: var(--jdx-muted);
  line-height: 26px;
}

.kpi-hint {
  margin-top: 3px;
  font-size: 12px;
  color: var(--jdx-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.identity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--jdx-secondary);
}

.identity-meta span + span::before {
  content: "·";
  margin-right: 14px;
  color: var(--jdx-muted);
}

.identity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.identity-office {
  margin: 12px 0 0;
  font-size: 13px;
  max-width: 56ch;
}

.insight-flags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.insight-flag {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--jdx-border);
  background: var(--jdx-card);
  font-size: 13px;
  line-height: 1.4;
}

.insight-flag-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.insight-flag.good .insight-flag-mark { background: var(--jdx-green); }
.insight-flag.watch .insight-flag-mark { background: var(--jdx-amber); }
.insight-flag.good { border-color: rgb(var(--green-rgb) / 0.28); }
.insight-flag.watch { border-color: rgb(var(--amber-rgb) / 0.35); }

.accounts-scroll {
  overflow-x: auto;
  padding: 0 16px 8px;
}

.accounts-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.accounts-table th,
.accounts-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--jdx-border);
  text-align: right;
  white-space: nowrap;
}

.accounts-table th[scope="col"]:first-child,
.accounts-table th[scope="row"] {
  text-align: left;
  color: var(--jdx-secondary);
  font-weight: 600;
  position: sticky;
  left: 0;
  background: var(--jdx-card);
}

.accounts-table thead th {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--jdx-muted);
}

.accounts-delta {
  font-size: 12px;
  font-weight: 600;
}

.accounts-delta.up { color: var(--jdx-green); }
.accounts-delta.down { color: var(--jdx-red); }

.financial-charts {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  padding: 8px 16px 16px;
}

.score-breakdown-layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: start;
}

.how-qualified {
  padding: 0;
}

.how-qualified > summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.how-qualified > summary::-webkit-details-marker { display: none; }

.how-qualified-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--jdx-border);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .financial-charts,
  .score-breakdown-layout {
    grid-template-columns: 1fr;
  }
}

/* Shares the 16px gutter every other panel body uses; without it the intel
   copy ran flush to the panel border. */
#sales-intelligence-body {
  padding: 16px;
}

.sales-intel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sales-intel-col h3 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--jdx-muted);
}

.sales-intel-col ul {
  margin: 0;
  padding-left: 18px;
}

.sales-intel-col li + li {
  margin-top: 6px;
}

.sales-intel-risk {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--jdx-border);
}

.sales-intel-sources {
  margin-top: 12px;
  font-size: 12px;
  color: var(--jdx-secondary);
}

@media (max-width: 800px) {
  .sales-intel-grid {
    grid-template-columns: 1fr;
  }
}

.score-threshold-bar {
  margin-top: 14px;
  max-width: 320px;
}

.threshold-track {
  position: relative;
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(var(--tint-rgb) / 0.06);
}

.threshold-zone.pass { background: rgb(var(--band-pass-rgb) / 0.45); }
.threshold-zone.warm { background: rgb(var(--amber-rgb) / 0.45); }
.threshold-zone.hotlist { background: rgb(var(--accent-rgb) / 0.55); }

.threshold-marker {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: var(--instrument-needle);
  transform: translateX(-50%);
  box-shadow: none;
}

.threshold-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--jdx-muted);
}

.qualification-funnel {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.funnel-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: center;
}

.funnel-label {
  font-size: 12px;
  color: var(--jdx-secondary);
}

.funnel-bar-wrap {
  height: 10px;
  background: rgb(var(--tint-rgb) / 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.funnel-bar {
  height: 100%;
  border-radius: 999px;
  background: rgb(var(--tint-rgb) / 0.12);
  transition: width 400ms ease;
}

.funnel-bar.done { background: var(--jdx-accent); }
.funnel-bar.active { background: rgb(var(--accent-rgb) / 0.55); }

.run-activity {
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.activity-state {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--jdx-border);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--jdx-secondary);
}

.activity-state.is-ok {
  color: var(--status-ok-text);
  border-color: rgb(var(--green-rgb) / 0.35);
  background: rgb(var(--green-rgb) / 0.12);
}

.activity-state.is-failed {
  color: var(--status-bad-text);
  border-color: rgb(var(--red-rgb) / 0.35);
  background: rgb(var(--red-rgb) / 0.12);
}

.activity-detail { font-size: 12px; }

.activity-detail > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--jdx-muted);
  line-height: 1.2;
  list-style: none;
}

.activity-detail > summary::-webkit-details-marker { display: none; }

.activity-detail > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.activity-detail[open] > summary::before { transform: rotate(90deg); }
.activity-detail > summary:hover { color: var(--jdx-secondary); }

/* Capped so an expanded log scrolls instead of stretching the page. */
.activity-log {
  margin-top: 4px;
  max-height: 320px;
  overflow: auto;
}

.activity-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--jdx-border);
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--jdx-accent);
}

.activity-row.error .activity-dot { background: var(--jdx-red); }
.activity-row.warn .activity-dot { background: var(--jdx-amber); }

.activity-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--jdx-secondary);
}

.activity-time {
  font-size: 11px;
  color: var(--jdx-muted);
  white-space: nowrap;
}

.bfpa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  padding: 16px;
}

.bfpa-card.rich {
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-md);
  padding: 14px;
}

.bfpa-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.bfpa-notes {
  margin-top: 8px;
  font-size: 13px;
  color: var(--jdx-secondary);
  line-height: 1.5;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 16px;
}

.metrics-grid.compact .metric-card {
  padding: 12px;
}

.metric-card {
  background: var(--jdx-card);
  border-radius: var(--radius-md);
  padding: 14px;
}

.metric-label {
  font-size: 11px;
  color: var(--jdx-muted);
  text-transform: none;
  letter-spacing: 0.05em;
}

.metric-value {
  font-size: 22px;
  font-weight: 800;
  margin-top: 8px;
}

.metric-prior {
  font-size: 12px;
  color: var(--jdx-secondary);
  margin-top: 6px;
}

.data-quality, .score-rationale {
  padding: 0 16px 16px;
}

.quality-note {
  font-size: 13px;
  color: var(--jdx-secondary);
  padding: 10px 12px;
  border-left: 2px solid rgb(var(--accent-rgb) / 0.35);
  margin-bottom: 8px;
  background: rgb(var(--tint-rgb) / 0.03);
  border-radius: 0 10px 10px 0;
}

/* Points withheld because a factor was scored on an estimate rather than a
   filed figure. Sits above the breakdown so the deduction is read first. */
.score-adjustments {
  margin: 0 16px 14px;
  padding: 12px 14px;
  border: 1px solid var(--status-warn-border, rgb(var(--accent-rgb) / 0.3));
  background: var(--status-warn-bg, rgb(var(--tint-rgb) / 0.04));
  border-radius: 12px;
}

.score-adjustments[hidden] {
  display: none;
}

.adjust-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 13px;
}

.adjust-badge {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  color: var(--status-warn-text);
  background: rgb(var(--tint-rgb) / 0.06);
  border: 1px solid var(--status-warn-border, rgb(var(--accent-rgb) / 0.3));
}

.adjust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adjust-list li {
  display: grid;
  grid-template-columns: minmax(120px, auto) auto 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}

.adjust-factor {
  text-transform: capitalize;
  font-weight: 600;
}

.adjust-points {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .adjust-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Provenance for the figures above: how far to trust them, what is qualified,
   and where they came from — in that order, because that is the order the
   questions get asked. */
.quality-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.quality-badge {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--jdx-border);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: capitalize;
  color: var(--jdx-secondary);
}

.quality-badge.is-high {
  color: var(--status-ok-text);
  border-color: rgb(var(--green-rgb) / 0.35);
  background: rgb(var(--green-rgb) / 0.12);
}

.quality-badge.is-medium {
  color: var(--status-warn-text);
  border-color: rgb(var(--amber-rgb) / 0.35);
  background: rgb(var(--amber-rgb) / 0.12);
}

/* A derived size band is inference, not a filed figure, so it reads as neutral
   rather than borrowing the confidence colours. */
.quality-badge.is-size {
  color: var(--jdx-secondary);
  border-color: var(--jdx-border-strong);
  background: rgb(var(--tint-rgb) / 0.06);
  text-transform: none;
}

.quality-badge.is-low,
.quality-badge.is-none {
  color: var(--status-bad-text);
  border-color: rgb(var(--red-rgb) / 0.35);
  background: rgb(var(--red-rgb) / 0.12);
}

.quality-provenance { font-size: 12px; }

/* Caveats attach to figures, so they read as a short list, not as panels. */
.quality-caveats {
  margin: 10px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--jdx-secondary);
  line-height: 1.5;
}

.quality-detail {
  margin-top: 12px;
  font-size: 12px;
}

.quality-detail > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--jdx-muted);
  line-height: 1.2;
  list-style: none;
}

.quality-detail > summary::-webkit-details-marker { display: none; }

.quality-detail > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.quality-detail[open] > summary::before { transform: rotate(90deg); }
.quality-detail > summary:hover { color: var(--jdx-secondary); }

.quality-detail ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--jdx-muted);
  line-height: 1.5;
}

.tab-bar {
  display: flex;
  gap: 8px;
  padding: 16px 16px 0;
  flex-wrap: wrap;
}

.tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--jdx-secondary);
  border-radius: 0;
  padding: 10px 12px 8px;
  cursor: pointer;
  font-weight: 600;
}

.tab.active {
  background: transparent;
  color: var(--jdx-text);
  border-bottom-color: var(--jdx-accent);
}

.tab-panel { display: none; padding: 16px; }
.tab-panel.active { display: block; }

.brief-markdown {
  line-height: 1.65;
  color: var(--jdx-text);
}

.narrative-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.narrative-storyboard {
  padding: 16px 16px 8px;
}

/* Four fixed columns squeezed each card to about 130px, which made the content
   stack tall and left the short cards mostly empty once the grid stretched them
   all to match. Cards now reflow by available width and keep their own height. */
.storyboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
  gap: 12px;
}

.story-card {
  background: rgb(var(--tint-rgb) / 0.04);
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-md);
  padding: 14px;
  min-width: 0;
}

.story-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--jdx-muted);
  margin-bottom: 8px;
}

.story-headline {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.story-meta {
  margin-top: 6px;
  font-size: 13px;
}

.story-office {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
}

.story-gauge-track {
  margin-top: 14px;
  height: 10px;
  border-radius: 999px;
  background: rgb(var(--tint-rgb) / 0.08);
  overflow: hidden;
}

.story-gauge-fill {
  height: 100%;
  border-radius: 999px;
}

.story-verdict.hotlist {
  border-color: rgb(var(--green-rgb) / 0.35);
  background: linear-gradient(180deg, rgb(var(--green-rgb) / 0.12), rgb(var(--tint-rgb) / 0.03));
}

.story-verdict.warm {
  border-color: rgb(var(--amber-rgb) / 0.35);
  background: linear-gradient(180deg, rgb(var(--amber-rgb) / 0.12), rgb(var(--tint-rgb) / 0.03));
}

.story-verdict.pass {
  border-color: rgb(var(--band-pass-rgb) / 0.3);
}

.story-figure-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.figure-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: rgb(var(--shadow-rgb) / 0.18);
  border: 1px solid rgb(var(--tint-rgb) / 0.06);
}

.figure-chip.est {
  border-color: rgb(var(--amber-rgb) / 0.35);
}

.figure-chip-label {
  font-size: 11px;
  color: var(--jdx-muted);
  text-transform: none;
  letter-spacing: 0.04em;
}

.figure-chip-value {
  font-size: 16px;
  font-weight: 700;
}

.figure-chip-hint {
  font-size: 11px;
  color: var(--jdx-secondary);
}

.story-points {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.narrative-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 16px 16px;
}

.narrative-block {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.9fr);
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: rgb(var(--tint-rgb) / 0.03);
  border: 1px solid var(--jdx-border);
}

.narrative-block.kind-generic {
  grid-template-columns: 1fr;
}

.narrative-copy h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
}

.narrative-bullets {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--jdx-text);
}

.narrative-body {
  font-size: 14px;
  line-height: 1.55;
}

.narrative-body p {
  margin: 0 0 8px;
}

.narrative-aside {
  border-left: 1px solid var(--jdx-border);
  padding-left: 14px;
}

.narrative-figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.verdict-figure {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.mini-score-ring {
  --score: 0;
  --tone: var(--band-pass);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background:
    radial-gradient(circle at center, var(--instrument-face) 58%, transparent 59%),
    conic-gradient(var(--tone) calc(var(--score) * 1%), rgb(var(--tint-rgb) / 0.08) 0);
  font-weight: 800;
  font-size: 18px;
}

.verdict-figure-label {
  display: block;
  font-size: 20px;
  margin: 2px 0 4px;
}

.figures-panel {
  gap: 10px;
}

.spark-metric-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 4px;
}

.spark-track {
  height: 7px;
  border-radius: 999px;
  background: rgb(var(--tint-rgb) / 0.08);
  overflow: hidden;
}

.spark-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--jdx-accent);
}

.spark-trend {
  font-size: 11px;
  margin-top: 3px;
}

.factor-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.factor-bar-row {
  display: grid;
  grid-template-columns: 1fr 72px 28px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.factor-bar-track {
  height: 7px;
  border-radius: 999px;
  background: rgb(var(--tint-rgb) / 0.08);
  overflow: hidden;
}

.factor-bar-fill {
  height: 100%;
  background: rgb(var(--accent-rgb) / 0.75);
}

.reason-chips {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--jdx-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-figure {
  gap: 8px;
}

.action-figure {
  justify-content: center;
  gap: 8px;
}

.action-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  background: rgb(var(--tint-rgb) / 0.08);
}

.action-badge.hotlist { background: rgb(var(--green-rgb) / 0.18); color: var(--status-ok-text); }
.action-badge.warm { background: rgb(var(--amber-rgb) / 0.18); color: var(--band-warm); }
.action-badge.pass { background: rgb(var(--band-pass-rgb) / 0.18); color: var(--band-pass); }

.narrative-full-text {
  margin: 0 16px 12px;
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-md);
  background: rgb(var(--shadow-rgb) / 0.16);
}

/* Flex rather than the default list-item box, whose line box runs taller than
   the line-height and leaves the label sitting high. */
.narrative-full-text summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  color: var(--jdx-secondary);
  list-style: none;
}

.narrative-full-text summary::-webkit-details-marker {
  display: none;
}

.narrative-full-text[open] summary {
  border-bottom: 1px solid var(--jdx-border);
}

.narrative-prose {
  padding: 14px;
  max-height: 320px;
  overflow: auto;
}

.narrative-agent-tabs {
  margin-top: 4px;
  border-top: 1px solid var(--jdx-border);
}

/* These are one-line registry facts, several of them just a dash. Narrower
   columns and tighter cells stop each one claiming a card's worth of space. */
.registry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  padding: 16px;
}

.registry-item {
  background: rgb(var(--tint-rgb) / 0.04);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  min-width: 0;
}

.registry-label {
  font-size: 11px;
  color: var(--jdx-muted);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.registry-value {
  margin-top: 2px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.bfpa-card {
  padding: 12px 16px;
  border-bottom: 1px solid var(--jdx-border);
}

/* Refinement row: the filters that our data can actually support. Turnover is
   deliberately absent — only about 8% of candidates have filed one, so a
   turnover filter would hide most of the list for no reason. */
.refine-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  padding-top: 4px;
}

.refine-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.refine-field > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: none;
  color: var(--jdx-muted);
}

.refine-field select {
  height: 32px;
  max-width: 190px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-sm);
  background: var(--jdx-elevated);
  color: var(--jdx-text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.refine-field select:hover { border-color: var(--jdx-border-strong); }

/* Pushed to the end so the destination of the filtering sits where the eye
   finishes reading the controls. */
.export-btn { margin-left: auto; }

.export-btn.disabled {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 900px) {
  .export-btn { margin-left: 0; }
  .refine-field select { max-width: 100%; }
}

/* In-page navigation for the long record pages. Sticky so it stays reachable
   through several screens of panels, and quiet enough that it reads as a map
   rather than as another row of controls. */
.section-nav {
  position: sticky;
  top: 72px;
  z-index: 30;
  background: color-mix(in srgb, var(--jdx-page) 92%, transparent);
  border-bottom: 1px solid var(--jdx-border);
  box-shadow: none;
}

.section-nav-track {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 8px;
  overflow: visible;
}

.section-nav-track::-webkit-scrollbar { display: none; }

.section-nav-link {
  flex-shrink: 0;
  /* Extra top padding pays for the 2px active indicator on the bottom edge, so
     the label is centred in the tab rather than in the tab minus its border. */
  padding: 13px 12px 11px;
  border-bottom: 2px solid transparent;
  color: var(--jdx-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease-standard);
}

.section-nav-link:hover { color: var(--jdx-text); }

.section-nav-link.active {
  color: var(--jdx-text);
  border-bottom-color: var(--jdx-accent);
}

/* Clears the sticky strip when jumping to a panel. */
.section-target { scroll-margin-top: 56px; }
.section-target:focus { outline: none; }

@media (max-width: 900px) {
  .section-nav-track { padding: 0 16px; }
}

/* Agent commentary filed against the panel it explains. Subordinate to the
   panel's own data, so it reads as a footnote rather than a second section. */
.analyst-notes:empty { display: none; }

/* The rule runs edge to edge like the panel header's, but the content inside it
   lines up with the panel's other content rather than starting at the border. */
.analyst-notes-details {
  margin-top: 14px;
  border-top: 1px solid var(--jdx-border);
  padding: 12px 16px 16px;
}

.analyst-notes-details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--jdx-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  list-style: none;
}

.analyst-notes-details > summary::-webkit-details-marker { display: none; }

.analyst-notes-details > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.analyst-notes-details[open] > summary::before { transform: rotate(90deg); }

.analyst-notes-details > summary:hover { color: var(--jdx-text); }

.analyst-notes-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgb(var(--tint-rgb) / 0.08);
  color: var(--jdx-muted);
  font-size: 11px;
}

.analyst-notes-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.analyst-notes-body .narrative-block { display: block; }

.analyst-notes-body h3 {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.06em;
  color: var(--jdx-muted);
  margin-bottom: 6px;
}

/* Navigation, not an action. It used to carry the same pill as the buttons
   beside it, which made going back look like a thing you do to the company. */
.back-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 2px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--jdx-secondary);
  text-decoration: none;
  font-size: 13px;
}

.back-link:hover { color: var(--jdx-text); }

@media (max-width: 1100px) {
  .jdx-search-strip {
    grid-template-columns: 1fr;
  }

  .jdx-shell {
    display: block;
  }

  .brief-grid,
  .brief-grid.three-col,
  .brief-grid.two-col {
    grid-template-columns: 1fr;
  }

  .kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .storyboard-grid {
    grid-template-columns: 1fr;
  }

  .narrative-block {
    grid-template-columns: 1fr;
  }

  .narrative-aside {
    border-left: none;
    border-top: 1px solid var(--jdx-border);
    padding-left: 0;
    padding-top: 12px;
  }

  .pipeline-metrics {
    grid-template-columns: 1fr;
  }

  .pipeline-flow-wrap {
    min-height: 560px;
    height: auto;
  }

  .run-card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brief-hero {
    grid-template-columns: 1fr;
  }
}

/* ── Top bar. Destinations stay reachable; the conversation is the canvas. */
.sq-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 8px 22px;
  background: color-mix(in srgb, var(--jdx-page) 88%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--jdx-border);
  box-shadow: inset 0 -2px 0 var(--jdx-accent);
}

.sq-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
}

.sq-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}

.sq-wordmark-name {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 18px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.sq-wordmark-name em {
  font-style: italic;
  font-weight: 560;
  color: var(--jdx-accent);
}

.sq-wordmark-kicker {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jdx-muted);
}

.sq-top-links {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.sq-top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 6px;
  border-radius: 0;
  color: var(--jdx-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 transparent;
}

.sq-top-link:hover { color: var(--jdx-text); }

.sq-top-link.active {
  color: var(--jdx-text);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--jdx-accent);
}

.sq-top-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sq-tool {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sq-tool span {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jdx-muted);
}

.sq-tool select {
  min-width: 7.5rem;
  max-width: 11.5rem;
  background: var(--jdx-card);
  color: var(--jdx-text);
  border: 1px solid var(--jdx-border-strong);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  font: inherit;
  font-size: 13px;
}

.sq-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 1px solid var(--jdx-border);
  border-radius: 8px;
  cursor: pointer;
  place-items: center;
  background: var(--jdx-card);
  color: var(--jdx-text);
}

.sq-menu-btn:hover { background: var(--jdx-card-hover); }

.sq-menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 18px;
}

.sq-menu-icon span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

body.sq-menu-open .sq-menu-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.sq-menu-open .sq-menu-icon span:nth-child(2) {
  opacity: 0;
}
body.sq-menu-open .sq-menu-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.sq-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgb(var(--shadow-rgb) / 0.6);
  opacity: 0;
  transition: opacity 200ms ease;
}

.sq-menu-backdrop.open {
  opacity: 1;
}

.sq-menu-drawer {
  position: fixed;
  z-index: 71;
  top: 0;
  left: 0;
  width: min(86vw, 320px);
  height: 100%;
  background: var(--jdx-shell);
  border-right: 1px solid var(--jdx-border);
  transform: translateX(-102%);
  transition: transform 220ms ease;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 24px;
}

.sq-menu-drawer.open {
  transform: translateX(0);
}

body.jdx-page { padding-left: 0; }

.sq-menu-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.sq-menu-brand-block {
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.sq-menu-brand-block > span:last-child {
  display: flex;
  flex-direction: column;
}

.sq-menu-brand {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: -0.01em;
}

/* Two lines maximum — a wrapped strapline in a 232px rail reads as broken. */
.sq-menu-tagline {
  font-size: 11px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sq-menu-close { display: block; }

@media (max-width: 980px) {
  .sq-top-links,
  .sq-top-tools { display: none; }
  .sq-menu-btn { display: grid; }
  .sq-wordmark-kicker { display: none; }

  .sq-topbar.is-open {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .sq-topbar.is-open .sq-top-links,
  .sq-topbar.is-open .sq-top-tools {
    display: flex;
    flex-basis: 100%;
  }

  .sq-topbar.is-open .sq-top-links { flex-direction: column; align-items: stretch; }
  .sq-topbar.is-open .sq-top-link { border-radius: var(--radius-sm); }
  .sq-topbar.is-open .sq-top-tools { flex-direction: column; align-items: stretch; margin-left: 0; }
  .sq-topbar.is-open .sq-tool select { max-width: none; }
}

.sq-menu-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sq-menu-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.sq-menu-link {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--jdx-secondary);
  border-left: 2px solid transparent;
}

.sq-menu-link-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sq-menu-icon-glyph {
  margin-top: 1px;
  color: var(--jdx-muted);
  flex-shrink: 0;
}

.sq-menu-link:hover .sq-menu-icon-glyph { color: var(--jdx-secondary); }
.sq-menu-link.active .sq-menu-icon-glyph { color: var(--jdx-accent); }

.sq-menu-link:hover {
  background: var(--jdx-workspace);
  color: var(--jdx-text);
}

/* Active state is the only place accent appears in the rail. */
.sq-menu-link.active {
  background: var(--jdx-workspace);
  border-left-color: var(--jdx-accent);
  color: var(--jdx-text);
}

.sq-menu-link strong {
  font-size: 13px;
  font-weight: 600;
}

.sq-menu-link span {
  font-size: 11px;
  line-height: 1.3;
}

.sq-menu-footer {
  margin-top: 16px;
  font-size: 11px;
}

/* ── Lead finder progress ─────────────────────────────────────────────────── */
.leads-progress-panel {
  padding: 18px 18px 16px;
}

.leads-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.leads-progress-head strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.leads-progress-head p {
  margin: 0;
}

.leads-progress-pct {
  font-size: 18px;
  font-weight: 700;
  color: var(--jdx-accent);
  font-variant-numeric: tabular-nums;
}

.leads-progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgb(var(--tint-rgb) / 0.08);
  overflow: hidden;
  margin-bottom: 14px;
}

.leads-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--jdx-accent);
  transition: width 350ms ease;
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.45);
}

.leads-progress-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.leads-stage-pill {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid var(--jdx-border);
  color: var(--jdx-muted);
  background: rgb(var(--tint-rgb) / 0.03);
}

.leads-stage-pill.active {
  color: var(--jdx-text);
  border-color: rgb(var(--accent-rgb) / 0.45);
  background: rgb(var(--accent-rgb) / 0.16);
}

.leads-stage-pill.done {
  color: var(--status-ok-text);
  border-color: rgb(var(--green-rgb) / 0.35);
}

/* AI-first chat edge */
/* One centred column shared by the conversation and everything under it,
   so the page has a single spine instead of competing alignments. */
:root { --qf-column: 760px; }

/* The reading sits in one centred sheet. The bar stays full width. */
.jdx-header,
.page-chat,
.chat-lead,
.home-start,
.jdx-workspace,
.companies-toolbar,
.companies-shell,
.leads-shell,
.runs-toolbar,
.runs-shell,
.company-shell,
.brief-shell,
.settings-shell {
  position: relative;
  z-index: 1;
  width: min(100%, calc(var(--qf-column) + 56px));
  margin-inline: auto;
}

/* A score needs a board, not a reading column. The verdict stays on the
   spine; the agent canvas uses the width of the sheet, which is what lets
   pan, zoom, and dragging turn on (they switch off below 920px). */
@media (min-width: 1100px) {
  .jdx-shell .jdx-workspace {
    width: min(calc(100% - 48px), 1360px);
    max-width: none;
  }

  .score-sheet .workspace-top,
  .score-sheet .completion-banner,
  .score-sheet .pipeline-error,
  .score-sheet .run-verdict,
  .score-sheet .run-cast-head,
  .score-sheet .stage-bar,
  .score-sheet .activity-view,
  .score-sheet .audit-view,
  .score-sheet .jdx-sidebar {
    width: min(100%, calc(var(--qf-column) + 56px));
    margin-inline: auto;
  }

  .score-sheet .pipeline-canvas {
    height: min(680px, 72vh);
    min-height: 560px;
  }
}

/* The whole seal, small enough that the hallmarks stay in frame.
   A cropped Q reads as a magnifying glass and sits on the sheet. */
[data-theme="light"] body::after { opacity: 0.1; }
[data-theme="contrast"] body::after { opacity: 0.22; }

body::after {
  content: "";
  position: fixed;
  right: 18px;
  bottom: 16px;
  width: 96px;
  height: 96px;
  background: url("/assets/logo.svg?v=mark1") center / contain no-repeat;
  transform: rotate(-6deg);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 1100px) {
  body::after {
    width: 64px;
    height: 64px;
    right: -18px;
    bottom: -22px;
    opacity: 0.08;
  }
}

.home-start {
  padding: 0 28px 8px;
  max-width: calc(860px + 56px);
}

.home-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 860px;
}

.home-qualify {
  position: relative;
  width: 100%;
  border: 1px solid var(--jdx-border-strong);
  border-radius: var(--radius-composer);
  background: var(--jdx-card);
  box-shadow: var(--shadow-card);
}

.home-qualify:focus-within {
  border-color: rgb(var(--accent-rgb) / 0.45);
  box-shadow: var(--glow-accent);
}

.home-qualify:has(.is-thinking) {
  box-shadow: var(--glow-accent);
}

.home-qualify input {
  width: 100%;
  border: 0;
  border-radius: var(--radius-composer);
  background: transparent;
  color: var(--jdx-text);
  padding: 16px 120px 16px 18px;
  font: inherit;
  font-size: 15px;
}

.home-qualify input::placeholder { color: var(--jdx-muted); }
.home-qualify input:focus { outline: none; }

.home-qualify .primary {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 14px;
  border-radius: 6px;
}

.home-find {
  color: var(--jdx-secondary);
  font-size: 14px;
  text-decoration: none;
  padding: 2px 2px 2px 4px;
}

.home-find:hover { color: var(--jdx-text); }

.home-list {
  margin: 14px 0 0;
  font-size: 13px;
}

.home-list a {
  color: var(--jdx-secondary);
  text-decoration: none;
}

.home-list a:hover { color: var(--jdx-text); }

.home-notice {
  margin-top: 16px;
  max-width: 860px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--jdx-border);
  background: var(--jdx-card);
}

.home-notice h2 { margin: 0 0 8px; font-size: 18px; }

.page-chat,
.chat-lead {
  padding: 12px 28px 16px;
  border-bottom: 1px solid var(--jdx-border);
  max-width: calc(var(--qf-column) + 56px);
}

.chat-lead-panel,
.chat-lead .intent-advanced {
  max-width: 860px;
}

.chat-lead .intent-advanced { margin-top: 14px; }

/* The conversation is the primary surface, so it carries real weight.
   With nothing said yet, the composer sits under the title. */
.qf-chat-panel.is-inline {
  position: static;
  width: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  max-height: min(64vh, 760px);
  min-height: 0;
}

.qf-chat-panel.is-inline:not(:has(.qf-chat-turn)) {
  min-height: 0;
  max-height: none;
}

.qf-chat-panel.is-inline:not(:has(.qf-chat-turn)) .qf-chat-scroll {
  display: none;
}

.qf-chat-panel.is-inline .qf-chat-scroll,
.qf-chat-panel.is-inline .qf-chat-log {
  flex: 0 1 auto;
}

.qf-chat-panel.is-inline .qf-chat-log {
  padding: 8px 0 16px;
  gap: 20px;
  min-height: 0;
  max-height: min(48vh, 520px);
}

.qf-chat-panel.is-inline .qf-chat-bubble.assistant {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 560;
  line-height: 1.35;
}

.qf-chat-panel.is-inline .qf-chat-chips { padding: 8px 0 12px; }

.qf-chat-panel.is-inline .qf-chat-form {
  margin: 0 0 8px;
  background: var(--jdx-card);
}

/* Once a score is on the page, the thread should not push the board away. */
body:has(#orchestrator-shell:not(.hidden)) .qf-chat-panel.is-inline {
  max-height: min(28vh, 280px);
}

body:has(#orchestrator-shell:not(.hidden)) .qf-chat-panel.is-inline .qf-chat-log {
  max-height: min(18vh, 180px);
}

body:has(#orchestrator-shell:not(.hidden)) .qf-chat-panel.is-inline .qf-chat-bubble.assistant {
  font-size: 16px;
  font-weight: 500;
}

.qf-chat-inline-root { display: block; }

/* The idle state belongs to the same column, not floated on its own axis. */
.jdx-page .jdx-idle { padding: 12px 28px 48px; }

.jdx-page .idle-card {
  max-width: 860px;
  margin: 0;
}

.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;
}

/* The conversation is part of the page, stacked above the work. */
.qf-chat-panel {
  position: static;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: var(--qf-column);
  border: 0;
  background: transparent;
  overflow: visible;
}

.qf-chat-panel.hidden { display: flex; }

.qf-chat-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--jdx-border);
}

.qf-chat-context {
  font-size: 12px;
  margin-top: 2px;
}

/* The transcript scrolls inside a wrapper so the fade and the scroll-to-end
   control can sit above it without moving with the content. */
.qf-chat-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.qf-chat-log {
  flex: 1;
  overflow: auto;
  padding: 14px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 180px;
  scrollbar-width: none;
}

.qf-chat-log::-webkit-scrollbar { display: none; }

.qf-chat-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--jdx-card));
}

.qf-chat-panel.is-inline .qf-chat-fade {
  background: linear-gradient(to bottom, transparent, var(--jdx-page));
}

.qf-chat-scroll-end {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--jdx-border-strong);
  background: var(--jdx-elevated);
  color: var(--jdx-text);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.qf-chat-scroll-end:hover { border-color: var(--jdx-accent); }

/* Chat reads at body.large, not UI-label size. */
.qf-chat-bubble {
  max-width: 92%;
  padding: 0;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.qf-chat-bubble.is-revealing { color: var(--jdx-secondary); }

/* User turns keep a bubble; assistant prose sits on the page like a document. */
.qf-chat-bubble.user {
  align-self: flex-end;
  background: transparent;
  border: 1px solid var(--jdx-border-strong);
  border-left: 3px solid var(--jdx-accent);
  border-radius: 2px 12px 12px 2px;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 560;
}

.qf-chat-bubble.assistant {
  align-self: stretch;
  max-width: 42rem;
  background: none;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 560;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.qf-chat-confirm {
  display: flex;
  gap: 8px;
  padding: 0 14px 10px;
}

.qf-chat-confirm.hidden { display: none; }

.qf-chat-form {
  position: relative;
  display: block;
  margin: 12px 0 14px;
  padding: 0;
  border: 1px solid var(--jdx-border-strong);
  border-radius: var(--radius-composer);
  background: var(--jdx-elevated);
  box-shadow: inset 3px 0 0 var(--jdx-accent);
}

.qf-chat-form input {
  width: 100%;
  border: 0;
  border-radius: var(--radius-composer);
  background: transparent;
  color: var(--jdx-text);
  padding: 14px 92px 14px 16px;
  font: inherit;
}

.qf-chat-status {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: rgb(var(--accent-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  font-size: 13px;
  color: var(--jdx-secondary);
}

.qf-chat-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jdx-accent);
  animation: qf-pulse 1s ease-in-out infinite;
}

@keyframes qf-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

.qf-chat-turn { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.qf-chat-bubble.assistant :is(p, ul, h1, h2, h3) {
  margin: 0 0 6px;
}
.qf-chat-bubble.assistant :is(p, ul, h1, h2, h3):last-child { margin-bottom: 0; }
.qf-chat-bubble.assistant ul { padding-left: 16px; }

/* Suggestions sit between the conversation and the composer, so they need
   space on both sides. With no top padding the row butted against the
   transcript and read as though it had been pushed to the top of its band. */
.qf-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  min-height: 8px;
}

.qf-chat-chips:empty { padding: 0; }

.qf-chat-chips.disabled { opacity: 0.45; pointer-events: none; }

/* Chips are the button system, not a separate component.
   Centred explicitly rather than left to the inherited line-height: the body's
   1.286 makes the line box taller than the glyphs, and the slack lands under
   the text, so the label rides high in the pill. */
.qf-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--jdx-border-strong);
  background: transparent;
  color: var(--jdx-text);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.qf-chip:hover { border-color: var(--jdx-accent); color: var(--jdx-text); }

.qf-chip-navigation {
  border-color: rgb(var(--accent-rgb) / 0.55);
  color: var(--jdx-accent);
}

/* Consumed chips stay legible but visibly inactive. */
.qf-chat-chips.disabled .qf-chip { opacity: 0.4; }
.qf-chip-confirm {
  background: var(--jdx-accent-deep);
  color: var(--on-accent);
  border-color: transparent;
}
.qf-chip-cancel { background: transparent; border-color: var(--jdx-border-strong); }
.qf-chip-navigation { border-style: solid; }

.qf-chat-form.composer-locked { opacity: 0.55; }

.qf-chat-activity {
  margin: 4px 0 8px;
  width: 100%;
  border: 1px solid var(--jdx-border);
  border-radius: var(--radius-md);
  background: rgb(var(--shadow-rgb) / 0.22);
  padding: 12px;
}

.qf-activity-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}

.qf-activity-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qf-activity-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--jdx-muted);
}

.qf-step-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--tint-rgb) / 0.15);
  flex-shrink: 0;
}

.qf-activity-step.active { color: var(--jdx-text); font-weight: 600; }
.qf-activity-step.active .qf-step-mark {
  background: var(--jdx-accent);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.2);
  animation: qf-pulse 1s ease-in-out infinite;
}
.qf-activity-step.done { color: var(--status-ok-text); }
.qf-activity-step.done .qf-step-mark { background: var(--jdx-green); }

.qf-activity-footer {
  margin-top: 10px;
  font-size: 12px;
}


/* Login and the invite gate share the seal and the paper, without the app bar. */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background: var(--jdx-page);
}
.login-shell {
  width: min(420px, 92vw);
  display: grid;
  gap: 22px;
}
.login-brand {
  text-align: center;
}
.login-brand img {
  display: block;
  margin: 0 auto;
}
.login-brand h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.03em;
}
.login-brand h1 em {
  font-style: italic;
  font-weight: 560;
  color: var(--jdx-accent);
}
.login-kicker {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jdx-muted);
}
.login-brand .muted { margin: 10px 0 0; }
.login-page a { color: var(--jdx-text); font-weight: 600; }
.login-page a:hover { color: var(--jdx-accent); }
.login-panel {
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: inset 3px 0 0 var(--jdx-accent);
}
#clerk-login:not(:empty) { min-height: 280px; }
.login-form {
  display: grid;
  gap: 12px;
}
.login-form input {
  width: 100%;
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border-strong);
  border-radius: 8px;
  color: var(--jdx-text);
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
}
.record-sheet {
  background: var(--jdx-card);
  border: 1px solid var(--jdx-border);
  border-radius: 12px;
  box-shadow: inset 3px 0 0 var(--jdx-accent);
  overflow: hidden;
}
.record-sheet > .panel,
.record-sheet > .admin-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border-bottom: 1px solid var(--jdx-border);
}
.record-sheet > .panel:last-child,
.record-sheet > .admin-panel:last-child { border-bottom: 0; }
.record-sheet > .admin-tabs,
.record-sheet > .view-tabs {
  border-bottom: 1px solid var(--jdx-border);
  padding: 0 8px;
  background: transparent;
}
.settings-shell {
  max-width: none;
  margin: 0 auto;
  display: grid;
  gap: 0;
  padding: 8px 28px 48px;
}
.settings-status {
  padding: 4px 16px 16px;
}
.settings-actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}
.settings-shell .ok { color: var(--status-ok-text); }
.settings-shell .error { color: var(--jdx-red); }

.admin-shell {
  max-width: none;
}
.admin-tabs .view-tab.hidden { display: none; }
.admin-data-grid,
.admin-platform-grid {
  display: grid;
  gap: 20px;
  padding: 0 16px 16px;
}
.admin-kv {
  display: grid;
  gap: 8px;
  margin: 0;
}
.admin-kv > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
}
.admin-kv dt {
  margin: 0;
  color: var(--jdx-muted);
  font-size: 0.85rem;
}
.admin-kv dd {
  margin: 0;
}
.admin-yaml-label {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--jdx-secondary);
}
.admin-yaml {
  width: 100%;
  min-height: 200px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  background: var(--jdx-elevated);
  color: var(--jdx-text);
  border: 1px solid var(--jdx-border);
  border-radius: 8px;
  padding: 10px;
  resize: vertical;
}
.admin-industry-block {
  grid-column: 1 / -1;
}


/* ── Phones ───────────────────────────────────────────────────────────────
   The desktop layout assumes a wide viewport in three ways that break on a
   handset: fixed pixel columns, hover-only affordances, and side docks that
   become full-screen takeovers. This layer reflows those, and nothing here
   applies above 700px. */

/* Scrim sits under the assistant sheet. Only phones present it. */
.qf-chat-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(var(--shadow-rgb) / 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.qf-chat-grabber { display: none; }

@media (max-width: 420px) {
  .sq-wordmark-name { font-size: 16px; }
}

@media (max-width: 700px) {
  /* iOS zooms the whole page when a focused field is under 16px, which then
     leaves the layout scrolled sideways. Component rules set 12–15px with
     higher specificity than any plain element selector can reach, so this is
     one of the few places the override is warranted. */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* A 15px checkbox is not a touch target. */
  input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  .company-row-select { padding-top: 2px; }

  /* Touch needs a bigger target than a cursor does. */
  button,
  select,
  .ghost-btn,
  .primary,
  .compact-link,
  .filter-chip,
  .view-tab {
    min-height: 40px;
  }

  .jdx-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
  }

  .jdx-header h1 { font-size: 20px; }
  .jdx-header-meta { width: 100%; }

  .companies-shell,
  .company-shell,
  .settings-shell,
  .companies-toolbar,
  .intent-bar,
  .stage-bar {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Filters: search takes the row, selects pair up, chips scroll sideways
     rather than stacking into a wall of rows. */
  .companies-search { flex: 1 1 100%; }
  .companies-toolbar .field.compact { flex: 1 1 calc(50% - 8px); }

  .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .filter-row::-webkit-scrollbar { display: none; }
  .filter-chip { flex-shrink: 0; }

  .view-tabs { overflow-x: auto; scrollbar-width: none; }
  .view-tabs::-webkit-scrollbar { display: none; }
  .view-tab { flex-shrink: 0; }

  /* A five-column row cannot survive 390px, so each company becomes a card:
     identity, then signals, then a full-width action bar. */
  .company-row {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 12px;
  }

  .company-row-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    grid-column: 2;
  }

  .company-row-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    margin-top: 4px;
  }

  .company-row-actions .primary,
  .company-row-actions .compact-link,
  .company-row-actions .ghost-btn { height: 40px; }

  /* Hover never happens on touch, so a hover-revealed control is unreachable. */
  .company-row-actions [data-dismiss] {
    opacity: 1;
    border-color: var(--jdx-border);
  }

  /* Truncating to one line wastes the width a card layout just gained. */
  .company-row-meta,
  .company-row-evidence {
    white-space: normal;
    overflow: visible;
  }

  .company-row-title h3 { white-space: normal; }

  /* Sticky at top:0 puts this under the sticky header on a phone, where the
     header is tall. A bottom bar is also simply closer to the thumb. */
  .companies-bulk {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 62;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    justify-content: center;
  }

  .companies-bulk .ghost-btn { flex: 1 1 auto; }
  .bulk-count { flex: 1 0 100%; }

  /* The phone menu stays in the top bar, above the bulk action strip. */

  /* Header actions on the company page are a row of buttons on desktop. */
  .action-group { flex-wrap: wrap; }

  /* The flow canvas drops to a single column and sizes itself to its content
     at this width — see the stack mode in pipeline-canvas.js. */
  .pipeline-canvas:has(.is-stacked) { height: auto; min-height: 0; }
  .pipeline-flow-wrap { min-height: 0; margin: 0; }

  /* Charts are drawn to a canvas that does not shrink on its own. */
  .panel canvas { max-width: 100%; }

  .sq-menu-drawer {
    height: 100dvh;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .page-chat,
  .chat-lead { padding-left: 16px; padding-right: 16px; }

  /* The conversation stays on the page. Cap it so the work underneath is reachable. */
  .qf-chat-panel.is-inline {
    max-height: 62dvh;
    min-height: 0;
  }

  .qf-chat-panel.is-inline .qf-chat-log { padding: 8px 0 12px; }
  .qf-chat-panel.is-inline .qf-chat-chips { padding: 8px 0; }
  .qf-chat-panel.is-inline .qf-chat-form { margin: 0 0 8px; padding: 0; }
}