/* ==========================================================================
   DOSSIER — EDITORIAL RESEARCH BRIEFING ENGINE
   Aesthetics: Deep Carbon Void Outside / Archival Printed Document Inside
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties & Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Atmosphere (Dark Outer Void) */
  --bg-deep: #0a0c10;
  --bg-surface: #12151b;
  --bg-surface-elevated: #181d24;
  --bg-surface-glass: rgba(18, 21, 27, 0.75);
  --border-subtle: #222834;
  --border-bright: #313a4b;
  --border-accent: #c4975d;

  /* App-chrome text (modals, drawer, header). Muted/faint steps are chosen to
     hold WCAG AA (>= 4.5:1) on the glass surfaces below, over the brightest
     point of the ambient orbs. */
  --text-bright: #f1f5f9;
  --text-muted: #b4bdcb;
  --text-faint: #9aa5b6;

  /* Glass surfaces — app chrome only, never the paper report.
     Fill is a light sheen (12% → 5%) over a thin dark tint so light text keeps
     its contrast wherever a bright orb sits behind the panel. */
  --glass-fill: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.04) 100%), rgba(13, 16, 22, 0.20);
  --glass-fill-strong: linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.06) 100%), rgba(13, 16, 22, 0.38);
  --glass-blur: blur(18px) saturate(150%);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-border-soft: rgba(255, 255, 255, 0.09);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 22px 50px -18px rgba(0, 0, 0, 0.65);
  --glass-tile: rgba(255, 255, 255, 0.045);
  --glass-tile-hover: rgba(255, 255, 255, 0.08);
  --glass-well: rgba(4, 6, 10, 0.42);

  /* Accent Tones */
  --accent-gold: #c4975d;
  --accent-gold-light: #e4be88;
  --accent-gold-dim: rgba(196, 151, 93, 0.15);
  --accent-amber: #d97706;
  --accent-red: #c53030;
  --accent-green: #15803d;
  --accent-blue: #2563eb;

  /* Dossier Document (Printed Paper Aesthetics) */
  --paper-bg: #fbfaf6;
  --paper-bg-subtle: #f4f2ea;
  --paper-border: #ded8cb;
  --paper-border-dark: #b8af9d;
  --ink-primary: #191c21;
  --ink-secondary: #4a515c;
  /* muted/gold ink stepped darker so small labels hold 4.5:1 on --paper-bg-subtle */
  --ink-muted: #5f6874;
  --ink-red: #9e2a2b;
  --ink-gold: #7a5b2c;

  /* Typography */
  --font-serif: 'Newsreader', 'Times New Roman', Georgia, serif;
  --font-display: 'Cinzel', serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radii & Shadows */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  
  --shadow-paper: 0 25px 65px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-float: 0 12px 30px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 25px rgba(196, 151, 93, 0.25);
}

/* --------------------------------------------------------------------------
   2. Reset & Base Styles
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* The `hidden` attribute must always win, even on elements that set their own
   display (e.g. the assistant panel uses display:flex). */
[hidden] {
  display: none !important;
}

body {
  background-color: var(--bg-deep);
  color: #e2e8f0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Shared inline icon sizing (used in place of emoji glyphs) */
.icon-inline {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.icon-inline--md {
  width: 18px;
  height: 18px;
}

.icon-inline--lg {
  width: 34px;
  height: 34px;
}

.icon-spin {
  animation: icon-spin 0.8s linear infinite;
}

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

/* --------------------------------------------------------------------------
   3. Ambient Background Atmospherics
   -------------------------------------------------------------------------- */
.ambient-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 35%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 35%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

/* Soft brand-colored shapes behind the glass. Radial gradients (not filter:
   blur) keep them cheap to composite; they're fixed so every glass panel has
   colour behind it wherever the page is scrolled. */
.ambient-orbs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.orb {
  position: absolute;
  border-radius: 50%;
  animation: orb-drift 32s ease-in-out infinite alternate;
  will-change: transform;
}

.orb-red {
  width: max(560px, 52vw);
  aspect-ratio: 1;
  top: -22vh;
  left: -14vw;
  background: radial-gradient(circle at 45% 45%, rgba(197, 48, 48, 0.46) 0%, rgba(158, 42, 43, 0.22) 38%, rgba(158, 42, 43, 0) 68%);
}

.orb-gold {
  width: max(460px, 40vw);
  aspect-ratio: 1;
  top: 22vh;
  right: -16vw;
  background: radial-gradient(circle, rgba(196, 151, 93, 0.34) 0%, rgba(141, 107, 56, 0.15) 40%, rgba(141, 107, 56, 0) 68%);
  animation-duration: 38s;
  animation-delay: -12s;
}

.orb-slate {
  width: max(620px, 56vw);
  aspect-ratio: 1;
  bottom: -38vh;
  left: 12vw;
  background: radial-gradient(circle, rgba(88, 101, 128, 0.42) 0%, rgba(49, 58, 75, 0.2) 40%, rgba(49, 58, 75, 0) 68%);
  animation-duration: 44s;
  animation-delay: -20s;
}

.orb-ember {
  width: max(300px, 24vw);
  aspect-ratio: 1;
  top: 58vh;
  left: -8vw;
  background: radial-gradient(circle, rgba(158, 42, 43, 0.34) 0%, rgba(158, 42, 43, 0) 66%);
  animation-duration: 28s;
  animation-delay: -6s;
}

@keyframes orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(3vw, 5vh, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
}

.app-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 80px 20px;
}

/* --------------------------------------------------------------------------
   4. Top System Header
   -------------------------------------------------------------------------- */
.system-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  margin-bottom: 32px;
}

.system-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.system-seal {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.seal-icon {
  width: 30px;
  height: 30px;
}

.system-codename {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--accent-gold-light);
  text-transform: uppercase;
  display: block;
}

.system-main-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffffff;
  text-transform: uppercase;
}

.system-telemetry {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   5. View Transitions
   -------------------------------------------------------------------------- */
.view-section {
  display: none;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
}

.view-section.active {
  display: block;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   6. Research Composer View
   -------------------------------------------------------------------------- */
.composer-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  overflow: hidden;
}

.composer-header-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 28px;
  background: rgba(0, 0, 0, 0.16);
  border-bottom: 1px solid var(--glass-border-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--accent-gold);
}

.composer-intro {
  padding: 32px 32px 24px 32px;
  border-bottom: 1px solid var(--glass-border-soft);
}

.composer-heading {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.composer-subheading {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 780px;
  line-height: 1.6;
}

/* How it works: 4 steps */
.how-it-works {
  list-style: none;
  margin: 0;
  padding: 20px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  border-bottom: 1px solid var(--glass-border-soft);
}

.how-step {
  display: grid;
  gap: 4px;
}

.how-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-gold-dim);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold-light);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
}

.how-step-title {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  color: #f1f5f9;
}

.how-step-desc {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.5;
}

/* Decision context: collapsed by default (progressive disclosure) */
.context-group {
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-sm);
  background: var(--glass-tile);
  padding: 0;
}

.context-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.context-summary::-webkit-details-marker { display: none; }

.context-summary .label-text {
  color: #f1f5f9;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.context-group[open] .context-summary {
  border-bottom: 1px solid var(--glass-border-soft);
}

/* Scoped to [open]: a details element hides everything but <summary> when
   closed via the UA stylesheet, and author styles with normal specificity
   can't be beaten by it — an unconditional `display` here would defeat that
   and leave the fields visible even when collapsed. */
.context-group[open] .context-fields {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.context-textarea {
  resize: vertical;
  font-family: var(--font-sans);
  line-height: 1.5;
  padding-top: 12px;
  padding-bottom: 12px;
}

.research-form {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #cbd5e1;
}

.label-number {
  font-family: var(--font-mono);
  color: var(--accent-gold-light);
  font-size: 11px;
  padding: 2px 6px;
  background: var(--accent-gold-dim);
  border-radius: var(--radius-xs);
}

.label-required {
  color: #f87171;
  font-weight: 700;
}

.label-optional {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0;
}

/* Inputs & Selects */
.input-wrapper {
  position: relative;
}

.text-input {
  width: 100%;
  padding: 14px 18px;
  background: var(--glass-well);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 15px;
  transition: all 0.2s ease;
}

.text-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(196, 151, 93, 0.22);
}

.text-input::placeholder {
  color: var(--text-faint);
}

/* Suggestion Chips */
.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.chips-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 1px;
}

.chip-btn {
  background: var(--glass-tile);
  border: 1px solid var(--glass-border-soft);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
}

.chip-btn:hover {
  background: var(--accent-gold-dim);
  border-color: var(--accent-gold);
  color: #f1f5f9;
}

/* Focus Radio Grid */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.focus-card {
  position: relative;
  cursor: pointer;
}

.focus-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Nested tiles sit on an already-blurred panel, so they use translucency
   only — a second backdrop-filter inside a glass parent can't see past it. */
.focus-content {
  padding: 16px;
  background: var(--glass-tile);
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-highlight);
  transition: all 0.25s ease;
  height: 100%;
}

.focus-card:hover .focus-content {
  border-color: var(--glass-border);
  background: var(--glass-tile-hover);
}

.focus-card input[type="radio"]:checked + .focus-content {
  border-color: var(--accent-gold);
  background: linear-gradient(160deg, rgba(196, 151, 93, 0.16) 0%, rgba(196, 151, 93, 0.05) 100%);
  box-shadow: var(--glass-highlight), 0 0 22px rgba(196, 151, 93, 0.16);
}

.focus-card input[type="radio"]:focus-visible + .focus-content {
  outline: 2px solid var(--accent-gold-light);
  outline-offset: 2px;
}

/* Report depth — a three-way segmented choice */
.depth-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.depth-option {
  position: relative;
  cursor: pointer;
}

.depth-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.depth-content {
  display: block;
  height: 100%;
  padding: 12px 14px;
  background: var(--glass-tile);
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-highlight);
  transition: all 0.2s ease;
}

.depth-option:hover .depth-content {
  border-color: var(--glass-border);
  background: var(--glass-tile-hover);
}

.depth-option input[type="radio"]:checked + .depth-content {
  border-color: var(--accent-gold);
  background: linear-gradient(160deg, rgba(196, 151, 93, 0.16) 0%, rgba(196, 151, 93, 0.05) 100%);
}

.depth-option input[type="radio"]:focus-visible + .depth-content {
  outline: 2px solid var(--accent-gold-light);
  outline-offset: 2px;
}

.depth-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
}

.depth-desc {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

@media screen and (max-width: 768px) {
  .depth-options {
    grid-template-columns: 1fr;
  }
}

@media screen {
  .print-only {
    display: none !important;
  }
}

.focus-icon {
  width: 28px;
  height: 28px;
  color: var(--accent-gold);
  margin-bottom: 10px;
}

.focus-icon svg {
  width: 100%;
  height: 100%;
}

.focus-title {
  font-weight: 600;
  font-size: 14px;
  color: #f1f5f9;
  margin-bottom: 6px;
}

.focus-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Dual Column Row */
.form-row-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.select-wrapper {
  position: relative;
}

.custom-select {
  width: 100%;
  padding: 14px 18px;
  background: var(--glass-well);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 14px;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.custom-select:focus {
  outline: none;
  border-color: var(--accent-gold);
}

.select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 10px;
  pointer-events: none;
}

/* Submit Deck */
.form-submit-deck {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border-soft);
  margin-top: 8px;
}

.submit-meta-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.shield-icon {
  width: 16px;
  height: 16px;
  color: var(--accent-gold);
}

.action-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--accent-gold);
  color: #14100a;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 10px 24px -10px rgba(0, 0, 0, 0.6);
}

.action-submit-btn:hover {
  background: var(--accent-gold-light);
  transform: translateY(-1px);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 14px 28px -10px rgba(0, 0, 0, 0.65);
}

.action-submit-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 6px 14px -8px rgba(0, 0, 0, 0.5);
}

.btn-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.action-submit-btn:hover .btn-arrow svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   7. Loading / Radar Investigation Console
   -------------------------------------------------------------------------- */
.investigation-console {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  max-width: 780px;
  margin: 30px auto;
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  text-align: center;
}

/* Radar HUD */
.radar-hud {
  width: 180px;
  height: 180px;
  margin: 0 auto 32px auto;
  border-radius: 50%;
  border: 1px solid rgba(196, 151, 93, 0.4);
  position: relative;
  background: radial-gradient(circle, rgba(196, 151, 93, 0.05) 0%, rgba(10, 12, 16, 0.6) 70%);
  overflow: hidden;
  box-shadow: 0 0 30px rgba(196, 151, 93, 0.15);
}

.radar-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(196, 151, 93, 0.25);
}

.circle-1 { width: 60px; height: 60px; }
.circle-2 { width: 120px; height: 120px; }
.circle-3 { width: 160px; height: 160px; }

.radar-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  transform-origin: 0 0;
  background: linear-gradient(45deg, rgba(196, 151, 93, 0.5) 0%, rgba(196, 151, 93, 0) 70%);
  animation: radarRotate 2.5s infinite linear;
}

@keyframes radarRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.radar-blip {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 8px var(--accent-gold);
  animation: blipGlow 2s infinite ease-in-out;
}

.blip-1 { top: 35%; left: 65%; animation-delay: 0.4s; }
.blip-2 { top: 68%; left: 30%; animation-delay: 1.2s; }

@keyframes blipGlow {
  0%, 100% { opacity: 0.2; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.3); }
}

.radar-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.radar-pulse-dot {
  display: block;
  width: 8px;
  height: 8px;
  background: var(--accent-gold-light);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent-gold);
}

.investigation-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent-gold);
  padding: 4px 12px;
  background: var(--accent-gold-dim);
  border-radius: 999px;
  margin-bottom: 12px;
}

.investigation-title {
  font-family: var(--font-serif);
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 6px;
}

.investigation-detail {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* Terminal Log Stream */
.terminal-log-window {
  background: rgba(4, 6, 10, 0.55);
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-md);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--glass-border-soft);
}

.terminal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.terminal-dot.red { background: #ef4444; }
.terminal-dot.yellow { background: #f59e0b; }
.terminal-dot.green { background: #10b981; }

.terminal-title {
  font-size: 10px;
  color: var(--text-faint);
  margin-left: 8px;
  letter-spacing: 1px;
}

.terminal-stream {
  padding: 12px 14px;
  min-height: 110px;
  max-height: 150px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-muted);
}

.log-line {
  line-height: 1.4;
}

.log-line.active {
  color: var(--accent-gold-light);
  font-weight: 600;
}

.investigation-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--accent-gold), var(--accent-gold-light));
  transition: width 0.4s ease;
}

/* --------------------------------------------------------------------------
   8. Dossier Document Toolbar & Banner
   -------------------------------------------------------------------------- */
.dossier-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 12px 20px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--glass-tile);
  border: 1px solid var(--glass-border);
  color: #d5dce6;
}

.toolbar-btn svg {
  width: 15px;
  height: 15px;
}

.toolbar-btn:hover {
  background: var(--glass-tile-hover);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

.toolbar-btn.primary {
  background: var(--accent-gold);
  color: #0b0d11;
  border-color: var(--accent-gold);
}

.toolbar-btn.primary:hover {
  background: var(--accent-gold-light);
  color: #000000;
}

#monitor-btn.is-active {
  background: rgba(21, 128, 61, 0.16);
  border-color: var(--accent-green);
  color: var(--accent-green);
}

#monitor-btn.is-active:hover {
  background: rgba(21, 128, 61, 0.24);
  color: var(--accent-green);
}

/* Read-only shared-dossier view */
.shared-view-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 18px;
  background: var(--accent-gold-dim);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-sm);
  color: var(--text-bright);
  font-size: 13px;
}

/* What the collapsed context panel is currently holding. Without this, a
   location left behind by an example scopes every later search unseen. */
.context-active-note {
  margin-left: auto;
  padding: 2px 10px;
  border: 1px solid var(--accent-gold);
  border-radius: 999px;
  background: var(--accent-gold-dim);
  color: var(--accent-gold-light);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

/* Live status while a dossier streams in section by section. */
.stream-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 18px;
  background: var(--accent-gold-dim);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-sm);
  color: var(--text-bright);
  font-size: 13px;
}

.stream-status-pulse {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gold-light);
  animation: stream-pulse 1.4s ease-in-out infinite;
}

.stream-status-text {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-gold-light);
}

.stream-status-track {
  flex: 1;
  min-width: 60px;
  height: 3px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 2px;
  overflow: hidden;
}

.stream-status-fill {
  display: block;
  height: 100%;
  width: 10%;
  background: linear-gradient(to right, var(--accent-gold), var(--accent-gold-light));
  transition: width 0.4s ease;
}

@keyframes stream-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .stream-status-pulse { animation: none; }
  .stream-status-fill { transition: none; }
}

.shared-view-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent-gold-light);
}

.shared-view-cta {
  margin-top: 24px;
  padding: 28px;
  text-align: center;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

.shared-view-cta h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: #ffffff;
  margin-bottom: 8px;
}

.shared-view-cta p {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 18px;
}

/* Share dialog */
.share-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-link-row .text-input {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.share-copied-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--accent-green);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. The Printed Dossier Document (Physical Paper Aesthetic)
   -------------------------------------------------------------------------- */
.dossier-document {
  background-color: var(--paper-bg);
  color: var(--ink-primary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--paper-border);
  box-shadow: var(--shadow-paper);
  padding: 56px 64px;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  /* Document grain illusion */
  background-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.015) 0%, transparent 100%);
}

/* Document Dividers */
.doc-divider {
  width: 100%;
}

.doc-divider.double-rule {
  height: 5px;
  border-top: 2px solid var(--paper-border-dark);
  border-bottom: 1px solid var(--paper-border-dark);
  margin: 18px 0;
}

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

/* Header */
.doc-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.doc-classification-stamp {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--ink-red);
  border: 2px solid var(--ink-red);
  padding: 5px 14px;
  text-transform: uppercase;
  display: inline-block;
  transform: rotate(-1.5deg);
}

.doc-security-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}

.doc-security-meta strong {
  color: var(--ink-primary);
}

.doc-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.doc-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--paper-bg-subtle);
  border: 1px solid var(--paper-border);
  color: var(--ink-secondary);
  border-radius: var(--radius-xs);
}

.doc-pill.date-pill {
  background: rgba(141, 107, 56, 0.12);
  border-color: var(--ink-gold);
  color: var(--ink-gold);
}

.doc-main-title {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink-primary);
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}

.doc-subtitle {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--ink-secondary);
  line-height: 1.5;
  max-width: 820px;
}

/* Sections */
.doc-section {
  margin-bottom: 48px;
}

/* Guest preview gate: blurs sections 5-9 with an account-creation CTA on top */
.locked-zone {
  position: relative;
}

.locked-zone.is-locked > .doc-section {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}

.locked-zone-overlay {
  display: none;
}

.locked-zone.is-locked .locked-zone-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: flex-start;
  justify-content: center;
  padding-top: 64px;
  background: linear-gradient(to bottom, rgba(251, 250, 246, 0.15) 0%, var(--paper-bg) 45%);
  z-index: 5;
}

.locked-overlay-card {
  max-width: 420px;
  text-align: center;
  background: var(--paper-bg);
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.35);
  padding: 32px 28px;
  color: var(--ink-primary);
}

.locked-overlay-card .icon-inline {
  color: var(--ink-gold);
  margin: 0 auto 14px;
  display: block;
}

.locked-overlay-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.locked-overlay-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-secondary);
  margin-bottom: 20px;
}

.locked-overlay-card .action-submit-btn {
  justify-content: center;
  width: 100%;
}

/* Section headers carry the cover's type: the serif headline face, with the
   section number set as a small red mono stamp like the classification mark. */
.section-title-strip {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1.5px solid var(--ink-primary);
  padding-bottom: 8px;
  margin-bottom: 22px;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--ink-primary);
}

.section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1;
  color: var(--ink-red);
  border: 1.5px solid var(--ink-red);
  border-radius: 2px;
  padding: 4px 6px 3px;
  flex-shrink: 0;
}

.section-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ink-muted);
}

.section-lead-note {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-muted);
  margin-bottom: 20px;
}

/* Executive Summary Section */
.executive-body {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.75;
  color: #2b303a;
}

.executive-body p {
  margin-bottom: 16px;
}

.executive-body p:first-of-type::first-letter {
  font-size: 52px;
  font-family: var(--font-display);
  float: left;
  line-height: 0.8;
  margin-right: 12px;
  margin-top: 4px;
  color: var(--ink-red);
  font-weight: 700;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.metric-card {
  background: var(--paper-bg-subtle);
  border: 1px solid var(--paper-border);
  border-left: 4px solid var(--ink-gold);
  border-radius: var(--radius-xs);
  padding: 16px 18px;
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.metric-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.metric-value {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-primary);
}

.metric-change {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-green);
}

.metric-context {
  font-size: 12px;
  color: var(--ink-secondary);
  margin-top: 4px;
}

/* Key Findings Section */
.findings-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.findings-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.finding-entry {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper-bg-subtle);
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-xs);
  padding: 22px 24px;
  position: relative;
}

.finding-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.finding-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-red);
  background: rgba(158, 42, 43, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}

.finding-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-primary);
  line-height: 1.35;
}

.finding-detail {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-secondary);
}

/* Citation Callout */
.finding-citation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #ede9dc;
  border-left: 3px solid var(--ink-primary);
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  margin-top: 4px;
}

.citation-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.citation-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-primary);
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 5px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}

.citation-source {
  font-weight: 600;
  color: var(--ink-primary);
}

.citation-date {
  color: var(--ink-muted);
}

.citation-link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

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

.citation-fact {
  flex-basis: 100%;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-secondary);
}

/* Editorial Stock Photo Cards (Interleaved or Placed Alongside Sections) */
.editorial-photo-card {
  margin: 16px 0;
  background: #ffffff;
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.photo-img-wrapper {
  position: relative;
  width: 100%;
  max-height: 380px;
  overflow: hidden;
  background: #e2e8f0;
}

.photo-img {
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.editorial-photo-card:hover .photo-img {
  transform: scale(1.02);
}

.photo-overlay-stamp {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(10, 12, 16, 0.72);
  color: #f1f5f9;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
}

.photo-caption-bar {
  padding: 10px 16px;
  background: var(--paper-bg-subtle);
  border-top: 1px solid var(--paper-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.photo-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-secondary);
}

.photo-attribution {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.5px;
}

.photo-attribution a {
  color: var(--ink-secondary);
  text-decoration: none;
  font-weight: 600;
}

.photo-attribution a:hover {
  color: var(--accent-blue);
  text-decoration: underline;
}

/* Trends Section */
.trends-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trends-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trend-card {
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-xs);
  padding: 18px 20px;
  background: var(--paper-bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trend-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.trend-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-primary);
}

.trend-badges {
  display: flex;
  gap: 6px;
}

.trend-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
}

.trend-badge.high {
  background: rgba(197, 48, 48, 0.15);
  color: var(--ink-red);
}

.trend-badge.medium {
  background: rgba(217, 119, 6, 0.15);
  color: var(--accent-amber);
}

.trend-badge.low {
  background: rgba(21, 128, 61, 0.15);
  color: var(--accent-green);
}

.trend-badge.time {
  background: #e2ddd3;
  color: var(--ink-secondary);
}

.trend-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-secondary);
}

/* Risks Section */
.risks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.risk-card {
  border: 1px solid var(--paper-border);
  border-top: 3px solid var(--ink-red);
  border-radius: var(--radius-xs);
  padding: 18px 20px;
  background: var(--paper-bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.risk-card.severity-medium {
  border-top-color: var(--accent-amber);
}

.risk-card.severity-low {
  border-top-color: var(--accent-green);
}

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

.risk-type {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink-red);
}

.risk-severity {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(197, 48, 48, 0.12);
  color: var(--ink-red);
}

.risk-severity.severity-medium {
  background: rgba(217, 119, 6, 0.15);
  color: var(--accent-amber);
}

.risk-severity.severity-low {
  background: rgba(21, 128, 61, 0.15);
  color: var(--accent-green);
}

.risk-issue {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-primary);
  line-height: 1.35;
}

.risk-analysis {
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.55;
}

/* What This Means Takeaway Section */
.takeaway-card {
  background: #f3efe6;
  border: 2px solid var(--paper-border-dark);
  border-radius: var(--radius-xs);
  padding: 32px 36px;
  position: relative;
}

.takeaway-seal-icon {
  width: 36px;
  height: 36px;
  color: var(--ink-gold);
  margin-bottom: 12px;
}

.takeaway-stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ink-gold);
  margin-bottom: 10px;
}

.takeaway-summary {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-primary);
  margin-bottom: 24px;
}

.implications-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-primary);
  margin-bottom: 12px;
}

.implications-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.implications-list li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.implications-list li::before {
  content: '▸';
  position: absolute;
  left: 6px;
  top: 0;
  color: var(--ink-gold);
  font-weight: 700;
}

/* Document Footer */
.doc-footer {
  margin-top: 48px;
}

.footer-grid {
  display: flex;
  align-items: center;
  gap: 24px;
}

.seal-svg {
  width: 72px;
  height: 72px;
  color: var(--ink-gold);
}

.text-col {
  flex: 1;
}

.footer-notice {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 6px;
}

.footer-timestamp {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-secondary);
  letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   10. Toast Notification System
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
  pointer-events: none;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: #f1f5f9;
  font-size: 13px;
  box-shadow: var(--glass-highlight), 0 8px 24px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.25s ease;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast.visible {
  transform: translateY(0);
  opacity: 1;
}

.toast.error {
  background: linear-gradient(145deg, rgba(197, 48, 48, 0.30), rgba(197, 48, 48, 0.14)), rgba(30, 8, 8, 0.55);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fee2e2;
}

.toast.success {
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.24), rgba(16, 185, 129, 0.10)), rgba(4, 30, 22, 0.55);
  border-color: rgba(52, 211, 153, 0.45);
  color: #d1fae5;
}

/* --------------------------------------------------------------------------
   11. Print Stylesheet
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .ambient-grid,
  .ambient-orbs,
  .system-header,
  .no-print,
  #composer-view,
  #loading-view,
  .toast-container {
    display: none !important;
  }

  .app-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .dossier-document {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    max-width: 100% !important;
    background: #ffffff !important;
  }

  /* Keep chart fills, risk bands and highlighted rows meaningful on paper —
     browsers drop background colours in print unless told otherwise. */
  .dossier-document,
  .dossier-document * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Whole sections are far taller than a page, so "avoid breaking inside" on
     them only produced large blank gaps. Keep headings with their content and
     let individual cards/rows avoid splitting instead. */
  .section-title-strip,
  .block-title {
    break-after: avoid;
    page-break-after: avoid;
  }

  .doc-section {
    margin-bottom: 28px;
  }

  .explain-btn {
    display: none !important;
  }

  .locked-zone.is-locked > .doc-section {
    display: none !important;
  }

  .editorial-photo-card,
  .finding-entry,
  .trend-card,
  .risk-card,
  .metric-card {
    page-break-inside: avoid;
  }
}

/* --------------------------------------------------------------------------
   12. Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .app-container {
    padding: 16px 12px 60px 12px;
  }

  .system-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .composer-heading {
    font-size: 22px;
  }

  .form-row-dual {
    grid-template-columns: 1fr;
  }

  .form-submit-deck {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .action-submit-btn {
    justify-content: center;
  }

  .dossier-document {
    padding: 32px 20px;
  }

  .doc-main-title {
    font-size: 26px;
  }

  .doc-subtitle {
    font-size: 15px;
  }

  .section-heading {
    font-size: 22px;
    gap: 10px;
  }

  .doc-header-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .doc-classification-stamp {
    transform: none;
  }

  .dossier-toolbar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .toolbar-left, .toolbar-right {
    justify-content: space-between;
  }

  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
  }

  .score-factor-summary {
    grid-template-columns: 108px 1fr 30px;
    gap: 10px;
  }

  .verdict-text {
    font-size: 19px;
  }
}

@media screen and (max-width: 480px) {
  .system-header {
    padding: 12px 16px;
  }

  .system-main-title {
    font-size: 16px;
  }

  .composer-intro,
  .research-form {
    padding: 20px;
  }

  .composer-heading {
    font-size: 19px;
  }

  .investigation-console {
    padding: 32px 18px;
  }

  .dossier-document {
    padding: 22px 14px;
  }

  .doc-main-title {
    font-size: 21px;
  }

  .modal-body {
    padding: 16px;
  }

  .upgrade-headline {
    font-size: 19px;
  }

  .user-email-text {
    max-width: 90px;
  }

  .locked-overlay-card {
    max-width: calc(100% - 24px);
    padding: 24px 18px;
  }
}

/* ==========================================================================
   13. SAAS COMPONENTS: AUTH, MODALS, SUBSCRIPTIONS & ARCHIVE DRAWER
   ========================================================================== */

/* User Session Controls in Header */
.user-session-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.telemetry-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.telemetry-btn:hover {
  background: rgba(212, 168, 83, 0.15);
  border-color: var(--accent-gold);
  color: #ffffff;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-well);
  border: 1px solid var(--glass-border-soft);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 11px;
}

.user-tier-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: uppercase;
}

.user-tier-badge.tier-free {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

.user-tier-badge.tier-pro {
  background: var(--accent-gold);
  color: #0d1117;
  box-shadow: 0 0 10px rgba(212, 168, 83, 0.4);
}

.user-email-text {
  color: var(--text-bright);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-credits-tag {
  color: var(--accent-gold-light);
  font-weight: 700;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 8px;
}

.btn-archive-trigger {
  background: rgba(212, 168, 83, 0.1);
  border-color: rgba(212, 168, 83, 0.3);
  color: var(--accent-gold-light);
}

.btn-archive-trigger:hover {
  background: rgba(212, 168, 83, 0.25);
  color: #ffffff;
}

.btn-upgrade-trigger {
  background: linear-gradient(135deg, rgba(212, 168, 83, 0.2), rgba(212, 168, 83, 0.05));
  border-color: var(--accent-gold);
  color: #ffd680;
  font-weight: 700;
}

.btn-upgrade-trigger:hover {
  background: var(--accent-gold);
  color: #0d1117;
  box-shadow: 0 0 12px rgba(212, 168, 83, 0.4);
}

/* Modal Overlay & Card
   The page blur lives on ::before rather than the overlay itself: an element
   with backdrop-filter becomes a backdrop root, and a glass modal nested inside
   one can only "see" that root — it would render as a flat tint. */
.dossier-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.25s;
}

/* The overlay toggles with visibility, and the fade runs on the backdrop and
   panel individually — opacity < 1 on the overlay would also make it a
   backdrop root and flatten the glass mid-animation. */
.dossier-modal-overlay.active,
.archive-drawer-overlay.active {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.dossier-modal-overlay::before,
.archive-drawer-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(158, 42, 43, 0.10), transparent 70%),
    rgba(6, 8, 12, 0.46);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.dossier-modal-overlay.active::before,
.archive-drawer-overlay.active::before {
  opacity: 1;
}

.dossier-modal {
  position: relative;
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-top: 3px solid var(--accent-gold);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--glass-highlight), 0 30px 70px -20px rgba(0, 0, 0, 0.75), 0 0 40px rgba(196, 151, 93, 0.10);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.dossier-modal-overlay.active .dossier-modal {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.dossier-modal.modal-upgrade {
  max-width: 680px;
}

.dossier-modal.modal-evidence {
  max-width: 640px;
  max-height: 82vh;
}

.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.evidence-card {
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-sm);
  background: var(--glass-well);
  overflow: hidden;
}

.evidence-card-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--text-bright);
  transition: background 0.15s ease;
}

.evidence-card-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.evidence-source-name {
  font-weight: 600;
  font-size: 13.5px;
}

.evidence-source-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-gold-light);
}

.evidence-source-name a:hover {
  color: var(--accent-gold-light);
}

.evidence-meta {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

.evidence-claim-count {
  color: var(--accent-gold-light);
}

.evidence-card-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--glass-border-soft);
}

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

.evidence-claims li {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.evidence-claim-section {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  border: 1px solid var(--glass-border-soft);
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 6px;
}

.evidence-claim-value {
  color: var(--accent-gold-light);
}

.evidence-no-claims {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
  font-style: italic;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.16);
  border-bottom: 1px solid var(--glass-border-soft);
  flex-shrink: 0;
}

.modal-stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}

.modal-stamp.stamp-gold {
  color: var(--accent-gold-light);
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s ease;
}

.modal-close-btn:hover {
  color: #ffffff;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Auth Tabs */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
  background: var(--glass-well);
  border: 1px solid var(--glass-border-soft);
  padding: 4px;
  border-radius: var(--radius-sm);
}

.auth-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab-btn.active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: var(--glass-highlight);
  color: var(--text-bright);
}

.auth-error-banner {
  background: rgba(186, 45, 45, 0.15);
  border: 1px solid var(--ink-red);
  color: #ff9b9b;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  margin-bottom: 16px;
}
/* Same weight as the error banner above, in the affirmative — used for
   "check your inbox" after a reset request, where nothing has gone wrong
   but there is still something the user has to be told. */
.auth-success-banner {
  background: rgba(21, 128, 61, 0.15);
  border: 1px solid rgba(21, 128, 61, 0.6);
  color: #86efac;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  margin-bottom: 16px;
}

/* Secondary routes out of a form — "Forgot your password?", "Back to sign
   in". Deliberately not buttons-looking: the form has exactly one action. */
.auth-aux-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.auth-link-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-link-btn:hover {
  color: var(--accent-gold-light);
}

.auth-form-lede {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 18px;
}
/* Continue with Google. Deliberately not gold: the primary action in this
   modal is the form below it, and two gold buttons would compete. Google
   brand guidance wants the mark uncoloured and unmodified, hence the plain
   white plate behind it on this dark surface. */
.google-auth-block {
  margin-bottom: 18px;
}

.google-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-bright);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.google-auth-btn:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: var(--border-accent);
}

.google-auth-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: #ffffff;
  border-radius: 2px;
  padding: 2px;
  box-sizing: content-box;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.auth-form .form-group {
  margin-bottom: 16px;
}

.auth-form .text-input {
  width: 100%;
  box-sizing: border-box;
}

.modal-submit-btn {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

.register-perk {
  background: rgba(212, 168, 83, 0.1);
  border: 1px solid rgba(212, 168, 83, 0.25);
  color: #e2c07a;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.perk-icon {
  color: var(--accent-gold-light);
}

/* Upgrade Modal Elements */
.upgrade-pitch {
  text-align: center;
  margin-bottom: 24px;
}

.upgrade-headline {
  font-family: var(--font-display);
  font-size: 24px;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.upgrade-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 500px;
  margin: 0 auto;
}

.tier-comparison-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.tier-card {
  background: var(--glass-tile);
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-highlight);
  padding: 20px;
  position: relative;
}

.tier-card.featured {
  background: linear-gradient(170deg, rgba(196, 151, 93, 0.16) 0%, rgba(196, 151, 93, 0.04) 100%);
  border: 1px solid var(--accent-gold);
  box-shadow: var(--glass-highlight), 0 0 24px rgba(196, 151, 93, 0.16);
}

.tier-featured-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-gold);
  color: #0d1117;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
}

.tier-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  row-gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.tier-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-bright);
}

.tier-price {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
}

.tier-price span {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

.tier-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: var(--text-bright);
}

.tier-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.tier-feature-list .check {
  color: #4ade80;
  font-weight: 700;
}

.tier-feature-list .check-gold {
  color: var(--accent-gold-light);
  font-weight: 700;
}

/* Excluded features read as "off" through the ✕ glyph and dimmer colour —
   not opacity, which previously dropped them below AA. */
.tier-feature-list .muted {
  color: var(--text-faint);
}

.upgrade-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-stripe-upgrade {
  width: 100%;
  justify-content: center;
  font-weight: 800;
}

.btn-mock-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-mock-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.mock-tag {
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-bright);
  padding: 2px 5px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
}

/* Archive Drawer */
.archive-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.3s;
}

.archive-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-left: 1px solid var(--glass-border);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06), -20px 0 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-drawer-overlay.active .archive-drawer-panel {
  transform: translateX(0);
}

.drawer-header {
  padding: 20px;
  border-bottom: 1px solid var(--glass-border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.16);
}

.drawer-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--accent-gold-light);
  font-weight: 700;
}

.drawer-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: #ffffff;
  margin: 4px 0 0 0;
}

.drawer-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.archive-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.archive-empty-state .empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  opacity: 0.6;
}

.archive-empty-state .empty-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 6px;
}

.archive-empty-state .empty-sub {
  font-size: 12px;
  line-height: 1.4;
}

.archive-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.archive-card {
  background: var(--glass-tile);
  border: 1px solid var(--glass-border-soft);
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--radius-sm);
  box-shadow: var(--glass-highlight);
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.archive-card:hover {
  background: rgba(212, 168, 83, 0.06);
  border-color: rgba(212, 168, 83, 0.3);
  transform: translateX(-2px);
}

.archive-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.archive-score-badge {
  margin-left: auto;
  font-weight: 700;
  color: var(--accent-gold-light);
  background: rgba(196, 151, 93, 0.14);
  padding: 1px 6px;
  border-radius: 3px;
}

.archive-card-topic {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 4px;
  line-height: 1.3;
}

.archive-card-verdict {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.archive-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  background: rgba(196, 151, 93, 0.12);
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--accent-gold-light);
}

.archive-card-actions {
  display: flex;
  gap: 2px;
}

.archive-monitor-btn,
.archive-rename-btn,
.archive-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 2px;
  transition: all 0.15s ease;
}

.archive-monitor-btn:hover,
.archive-rename-btn:hover {
  color: var(--accent-gold-light);
  background: var(--accent-gold-dim);
}

.archive-monitor-btn.is-active {
  color: var(--accent-gold-light);
}

.archive-delete-btn:hover {
  color: #ff7878;
  background: rgba(186, 45, 45, 0.2);
}

/* "N updates" indicator + its expandable panel on a monitored project */
.archive-updates-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-gold-light);
  background: var(--accent-gold-dim);
  border: 1px solid var(--accent-gold);
  border-radius: 999px;
  cursor: pointer;
}

.archive-updates-panel {
  margin-bottom: 8px;
  padding: 4px 10px;
  background: var(--glass-well);
  border-radius: var(--radius-xs);
}

.archive-update-entry {
  padding: 8px 0;
  border-top: 1px dashed var(--glass-border-soft);
  font-size: 11.5px;
}

.archive-update-entry:first-child {
  border-top: none;
}

.archive-update-date {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.archive-update-summary {
  color: var(--text-muted);
  line-height: 1.4;
}

.archive-update-score {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent-gold-light);
}

/* ==========================================================================
   14. DATA DASHBOARD — KPI tiles, SVG charts, tables, matrix, scenarios
   ========================================================================== */

/* Header image banner (single small photo) */
.doc-header-image {
  margin: 8px 0 36px;
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--paper-bg-subtle);
}

.doc-header-image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.header-image-credit {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  padding: 6px 12px;
  border-top: 1px solid var(--paper-border);
}

.header-image-credit a {
  color: var(--ink-gold);
  text-decoration: none;
}

/* Quick read — the 10-second answer under the headline. Plain lines only;
   its one footnote line is fine print like every other section's. */
.quick-read {
  margin-top: 22px;
  padding: 16px 20px 12px;
  background: var(--paper-bg-subtle);
  border: 1px solid var(--paper-border);
  border-left: 3px solid var(--ink-red);
  border-radius: 2px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.quick-read-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-red);
  margin-bottom: 8px;
}

.quick-read-lines {
  list-style: none;
  display: grid;
  gap: 6px;
}

.quick-read-lines li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink-primary);
}

.quick-read-lines li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--ink-gold);
}

.quick-read-foot {
  margin-top: 10px;
}

/* Every section opens with one bold takeaway sentence, above its data. */
.section-takeaway {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-primary);
  max-width: 780px;
  margin: -4px 0 18px;
}

/* Fine print: sources, provenance and caveats, below the data they qualify.
   Deliberately quieter than the data — background detail, still AA legible. */
.fineprint {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.fineprint .source-line {
  margin-top: 0;
  font-size: 10.5px;
}

.fineprint-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: 2px;
}

/* Caveats keep a warning marker and a warm ink (7:1 on paper) but no box. */
.caveat {
  color: #7a4a10;
}

/* Shared small block heading + inline source line */
.block-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-primary);
  margin-bottom: 14px;
}

.block-unit,
.block-title .block-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.block-unit,
.chart-unit {
  color: var(--ink-muted);
  font-weight: 600;
}

.source-line {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 10px;
  line-height: 1.5;
}

.source-line a {
  color: var(--ink-gold);
  text-decoration: none;
}

.source-line a:hover {
  text-decoration: underline;
}

/* Distinct treatment so a genuinely missing date reads as a deliberate
   statement about the source, not a rendering failure. */
.source-nodate {
  font-style: italic;
}

.source-unverified-date {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

.kpi-source {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
}

.kpi-disagree {
  margin-top: 8px;
  font-size: 10.5px;
  line-height: 1.35;
}

/* "How the sources compare": one compact fine-print line per metric under the
   charts, each competing estimate listed once. */
.estimate-comparisons {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--paper-border);
  gap: 6px;
}

.estimate-row {
  break-inside: avoid;
  page-break-inside: avoid;
}

.estimate-metric,
.estimate-value {
  font-weight: 700;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

.estimate-spread,
.estimate-note {
  margin-left: 2px;
}

.timeline-source,
.scenario-source {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
}

.timeline-source {
  display: block;
  margin-top: 2px;
}

.source-tag {
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink-secondary);
  margin-right: 4px;
}

/* KPI tiles */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

/* Four headline numbers sit in one row instead of three plus an orphan. */
@media screen and (min-width: 769px) {
  .kpi-grid:has(> .kpi-tile:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kpi-tile {
  background: var(--paper-bg-subtle);
  border: 1px solid var(--paper-border);
  border-top: 3px solid var(--ink-gold);
  border-radius: var(--radius-xs);
  padding: 16px 18px 14px;
  position: relative;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.kpi-tile:hover {
  transform: scale(1.06);
  z-index: 5;
  border-color: var(--paper-border-dark);
  box-shadow: 0 14px 32px -12px rgba(25, 28, 33, 0.35);
}

.kpi-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
  min-height: 26px;
}

/* One figure style for every headline number in the report — KPI tiles and
   Key Data Points share it so numbers read the same top to bottom. */
.kpi-value,
.datapoint-stat {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  font-variant-numeric: lining-nums;
  color: var(--ink-red);
}

.kpi-unit {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-secondary);
  margin-left: 4px;
}

.kpi-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}

.kpi-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 2px;
  background: rgba(74, 81, 92, 0.1);
  color: var(--ink-secondary);
}

.kpi-delta.dir-up {
  background: rgba(63, 112, 80, 0.14);
  color: #2f5d3f;
}

.kpi-delta.dir-down {
  background: rgba(158, 42, 43, 0.12);
  color: var(--ink-red);
}

.kpi-context {
  font-size: 11.5px;
  color: var(--ink-muted);
}

/* Charts grid + figures */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 22px;
}

.chart-figure {
  border: 1px solid var(--paper-border);
  border-top: 3px solid var(--ink-gold);
  border-radius: var(--radius-xs);
  padding: 16px 18px;
  background: #fff;
}

.chart-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.chart-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-primary);
  line-height: 1.3;
}

.chart-caption .chart-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

.chart-body {
  width: 100%;
  overflow-x: auto;
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.chart-note {
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin-top: 10px;
}

/* Chart primitives — every label, legend and value uses the mono face of the
   cover's pills and stamps; grid lines stay recessive (dotted hairlines). */
.chart-grid {
  stroke: var(--paper-border);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.chart-axis {
  stroke: var(--ink-secondary);
  stroke-width: 1.25;
}

.chart-axis-label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--ink-muted);
}

.chart-axis-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  fill: var(--ink-secondary);
}

.chart-value-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  fill: var(--ink-primary);
}

.chart-legend-text {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--ink-primary);
}

.chart-legend-figure {
  fill: var(--ink-muted);
  font-weight: 600;
}

/* Grid charts are drawn in a 640-unit viewBox but shown at roughly 0.58x, so
   their labels are set larger to land at ~9px on screen. */
.charts-grid .chart-axis-label,
.charts-grid .chart-legend-text {
  font-size: 16px;
}

.risk-zone-hot {
  fill: rgba(158, 42, 43, 0.07);
}

/* ---- Interactive chart bits ---- */
.chart-svg .ct-bar,
.chart-svg .ct-slice,
.chart-svg .ct-point {
  cursor: pointer;
  transition: filter 0.12s ease, opacity 0.12s ease;
}

.chart-svg .ct-band {
  cursor: crosshair;
}

.chart-svg .ct-bar.is-active,
.chart-svg .ct-slice.is-active {
  filter: brightness(1.14);
}

.chart-svg .ct-bar:not(.is-active),
.chart-svg .ct-slice:not(.is-active) {
  opacity: 1;
}

.chart-svg:hover .ct-slice:not(.is-active),
.chart-svg:hover .ct-bar:not(.is-active) {
  opacity: 0.72;
}

.chart-svg .ct-point.is-active {
  stroke: var(--ink-primary);
  stroke-width: 2.5;
  filter: brightness(1.08);
}

.chart-svg .ct-crosshair {
  stroke: var(--ink-muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.chart-svg .ct-crosshair.is-active {
  opacity: 1;
}

.chart-svg .ct-dot {
  transition: r 0.08s ease;
}

/* Floating tooltip (appended to <body>, floats over the paper doc) */
.chart-tooltip {
  position: fixed;
  z-index: 950;
  pointer-events: none;
  max-width: 240px;
  padding: 8px 11px;
  border-radius: 6px;
  background: #12151b;
  color: #e6ebf2;
  border: 1px solid #313a4b;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
}

.chart-tooltip b {
  color: #fff;
  font-weight: 700;
}

.chart-tooltip .tip-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: baseline;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.chart-legend-swatch {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

/* Data table (benchmark) — ruled like the cover's header (heavy rule over a
   hairline), no box or cell grid: hairline row dividers only, serif row names,
   right-aligned tabular figures. */
.table-scroll {
  overflow-x: auto;
  border-top: 2px solid var(--ink-primary);
  border-bottom: 1px solid var(--paper-border-dark);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(25, 28, 33, 0.08);
  white-space: nowrap;
  vertical-align: baseline;
}

.data-table th:first-child,
.data-table td:first-child {
  padding-left: 4px;
}

.data-table th:last-child,
.data-table td:last-child {
  padding-right: 4px;
}

.data-table .is-num {
  text-align: right;
}

.data-table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: none;
  border-bottom: 1px solid var(--paper-border-dark);
  padding-top: 10px;
  padding-bottom: 10px;
}

.data-table tbody th[scope="row"] {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-primary);
}

.data-table tbody td {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-secondary);
}

.data-table tbody td.is-neg {
  color: var(--ink-red);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover th,
.data-table tbody tr:hover td {
  background: rgba(122, 91, 44, 0.04);
}

.data-table tr.row-highlight th[scope="row"],
.data-table tr.row-highlight td {
  background: rgba(160, 112, 30, 0.09);
  color: var(--ink-primary);
}

.data-table tr.row-highlight th[scope="row"] {
  box-shadow: inset 3px 0 0 var(--ink-gold);
  padding-left: 12px;
}

.appendix-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 10px;
}

/* Cited data points */
.datapoints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.datapoint {
  border: 1px solid var(--paper-border);
  border-top: 3px solid var(--ink-gold);
  border-radius: var(--radius-xs);
  padding: 16px 18px;
  background: var(--paper-bg-subtle);
  position: relative;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.datapoint:hover {
  transform: scale(1.05);
  z-index: 5;
  border-color: var(--paper-border-dark);
  box-shadow: 0 14px 32px -12px rgba(25, 28, 33, 0.35);
}

.datapoint-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
  margin-top: 10px;
}

.datapoint-detail {
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.55;
  margin-top: 6px;
}

/* Risk matrix legend */
.risk-legend-list {
  list-style: none;
  margin-top: 16px;
  padding-left: 0;
  display: grid;
  gap: 10px;
}

/* Each entry is a numbered row keyed to the matching marker in the scatter.
   The name and its L/I code sit in one column so they can never visually
   separate or re-pair with a neighbouring risk when text wraps. */
.risk-legend-item {
  font-size: 13px;
  color: var(--ink-secondary);
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
  page-break-inside: avoid;
  break-inside: avoid;
}

.risk-index {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.risk-legend-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.risk-name {
  color: var(--ink-primary);
  overflow-wrap: anywhere;
}

.risk-li {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}

.risk-point-index {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

/* Same values as RISK_BAND_COLORS in app.js */
.risk-index.band-high { background: #9e2a2b; }
.risk-index.band-med { background: #8a5f17; }
.risk-index.band-low { background: #4b5563; }

/* Outlook scenarios */
.scenario-bars {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}

.scenario-row {
  display: grid;
  grid-template-columns: 64px 1fr 48px;
  align-items: center;
  gap: 12px;
}

.scenario-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.scenario-track {
  height: 18px;
  background: var(--paper-bg-subtle);
  border: 1px solid var(--paper-border);
  border-radius: 2px;
  overflow: hidden;
}

.scenario-fill {
  display: block;
  height: 100%;
}

.scenario-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-primary);
  text-align: right;
}

.scenario-detail {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--ink-muted);
  margin: -2px 0 6px 76px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Decision intelligence: executive verdict, decision score, competitor
   intelligence, financial model, evidence tags, uncertainty lists.
   -------------------------------------------------------------------------- */

.verdict-banner {
  margin: 22px 0 0;
  padding: 20px 24px 18px;
  background: var(--paper-bg-subtle);
  border: 1px solid var(--paper-border);
  border-left: 4px solid var(--ink-gold);
  border-radius: 2px;
  break-inside: avoid;
  page-break-inside: avoid;
  display: grid;
  gap: 10px;
}

.verdict-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-gold);
}

.verdict-text {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-primary);
  max-width: 900px;
}

.verdict-score-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-mono);
  width: fit-content;
  padding: 4px 12px;
  background: var(--ink-primary);
  color: var(--paper-bg);
  border-radius: 20px;
}

.verdict-score-num {
  font-size: 18px;
  font-weight: 700;
}

.verdict-score-max {
  font-size: 11px;
  opacity: 0.7;
}

.verdict-reasons {
  margin: 4px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
  font-size: 13.5px;
  color: var(--ink-secondary);
}

/* Decision score factor breakdown */
.decision-score-factors {
  display: grid;
  gap: 8px;
}

.score-factor {
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-xs);
  background: var(--paper-bg-subtle);
}

.score-factor-summary {
  display: grid;
  grid-template-columns: 170px 1fr 36px;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}

.score-factor-summary::-webkit-details-marker { display: none; }

.score-factor-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-primary);
}

.score-factor-track {
  height: 10px;
  background: var(--paper-bg);
  border: 1px solid var(--paper-border);
  border-radius: 5px;
  overflow: hidden;
}

.score-factor-fill {
  display: block;
  height: 100%;
  background: linear-gradient(to right, var(--ink-gold), #a07a3f);
}

.score-factor-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  color: var(--ink-primary);
}

.score-factor-detail {
  padding: 0 14px 14px;
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.55;
}

.score-factor-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.score-factor-weight {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
}

/* Evidence basis tags + confidence dots, used on headline metrics, decision
   score factors, and financial assumptions. */
.basis-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid currentColor;
  margin-left: 6px;
  vertical-align: middle;
}

.basis-fact { color: var(--ink-gold); }
.basis-estimate { color: var(--ink-secondary); }
.basis-assumption { color: #6a5aa8; }
.basis-interpretation { color: var(--ink-muted); }

.confidence-dot {
  font-size: 10px;
  margin-right: 2px;
}

/* Competitor intelligence */
.competitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.competitor-card {
  background: var(--paper-bg-subtle);
  border: 1px solid var(--paper-border);
  border-top: 3px solid var(--ink-gold);
  border-radius: var(--radius-xs);
  padding: 15px 17px;
}

.competitor-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.competitor-name {
  font-family: var(--font-serif);
  font-size: 15.5px;
  color: var(--ink-primary);
}

.competitor-pricing {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-gold);
  white-space: nowrap;
}

.competitor-card p {
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin: 6px 0 0;
}

.competitor-card p strong {
  color: var(--ink-primary);
}

/* Financial model */
.scenario-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.scenario-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 7px 14px;
  background: var(--paper-bg);
  border: 1px solid var(--paper-border-dark);
  border-radius: 20px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.scenario-tab.active {
  background: var(--ink-primary);
  border-color: var(--ink-primary);
  color: var(--paper-bg);
}

.financial-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.financial-metric-tile {
  background: var(--paper-bg-subtle);
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
}

.financial-metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.financial-metric-value {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-primary);
  margin-top: 4px;
}

.financial-assumptions {
  margin-top: 10px;
  display: grid;
  gap: 4px;
}

.financial-assumption-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--paper-border);
}

.financial-assumption-key {
  color: var(--ink-muted);
  flex: 1;
  min-width: 140px;
}

.financial-assumption-edit {
  display: flex;
  align-items: center;
  gap: 6px;
}

.financial-assumption-input {
  width: 90px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-primary);
  background: var(--paper-bg);
  border: 1px solid var(--paper-border-dark);
  border-radius: var(--radius-xs);
  text-align: right;
}

.financial-assumption-input:focus {
  outline: 2px solid var(--ink-gold);
  outline-offset: 1px;
}

.financial-assumption-unit {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Uncertainty lists: "what would change the answer" / "what we don't know" */
.uncertainty-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-secondary);
  line-height: 1.5;
}

.change-answer-list li::marker { color: var(--ink-red); }
.dont-know-list li::marker { color: var(--ink-gold); }

.risk-mitigation {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* Consolidated sources */
.sources-list {
  margin: 0;
  padding-left: 22px;
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.8;
}

.sources-list a {
  color: var(--ink-gold);
  text-decoration: none;
}

.sources-list a:hover {
  text-decoration: underline;
}

/* Milestone timeline */
.timeline {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.timeline-item {
  display: grid;
  grid-template-columns: 92px 16px 1fr;
  align-items: start;
  gap: 12px;
  padding-bottom: 18px;
  position: relative;
}

.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 100px;
  top: 16px;
  bottom: -2px;
  width: 2px;
  background: var(--paper-border);
}

.timeline-date {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-secondary);
  text-align: right;
  padding-top: 2px;
  letter-spacing: 0.3px;
}

.timeline-node {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 3px;
  background: var(--ink-gold);
  border: 2px solid var(--paper-bg);
  box-shadow: 0 0 0 1px var(--paper-border-dark);
  z-index: 1;
}

/* Same brand family as CHART_COLORS in app.js */
.timeline-node.kind-funding { background: #a0701e; }
.timeline-node.kind-benchmark { background: #33609a; }
.timeline-node.kind-regulatory { background: #ad2d2c; }
.timeline-node.kind-product { background: #c68534; }
.timeline-node.kind-partnership { background: #4b5563; }

.timeline-body {
  display: block;
  padding-top: 1px;
}

.timeline-value {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-primary);
  margin-right: 8px;
}

.timeline-label {
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.5;
}

/* Multiple ranked leaderboards stacked */
.rankings-stack {
  display: grid;
  gap: 28px;
}

.ranking-block + .ranking-block {
  border-top: 1px solid var(--paper-border);
  padding-top: 22px;
}

.scenario-target {
  color: var(--ink-gold);
  font-weight: 700;
}

/* Chart values as text: clipped off-screen (still read by assistive tech),
   fully visible in print so no number is tooltip-only in the PDF. */
.chart-data-table {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@page {
  margin: 14mm 12mm;
}

@media print {
  /* Keep the on-screen grid layouts on paper (a printable page is ~720px wide)
     instead of collapsing every tile and chart into a single tall column. */
  .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* Four headline numbers print as one row rather than three plus an orphan. */
  .kpi-grid:has(> .kpi-tile:nth-child(4):last-child) {
    grid-template-columns: repeat(4, 1fr);
  }

  .datapoints-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .charts-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .kpi-tile,
  .datapoint {
    padding: 12px 14px 10px;
  }

  .kpi-value,
  .datapoint-stat {
    font-size: 28px;
  }

  .section-heading {
    font-size: 23px;
  }

  /* Tables scroll horizontally on screen; paper cannot scroll, so let them
     wrap and fit the page instead of being silently cut off at the margin. */
  .table-scroll {
    overflow: visible !important;
  }

  .data-table th,
  .data-table td {
    white-space: normal !important;
    overflow-wrap: anywhere;
    padding: 7px 8px !important;
    font-size: 11px !important;
  }

  .data-table tbody th[scope="row"] {
    font-size: 12.5px !important;
  }

  .data-table {
    table-layout: auto;
    width: 100% !important;
  }

  .data-table tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* A chart is the one presentation of its numbers in the reading flow; the
     value tables print once, together, in the data appendix. */
  .chart-figure .chart-data-table,
  .ranking-block .chart-data-table {
    display: none !important;
  }

  /* The appendix follows the sources on the same page when there's room;
     each value table stays whole. */
  .appendix-grid .chart-data-table {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* A takeaway never ends a page without the data it introduces, and a
     section's fine print stays with the data above it. */
  .section-takeaway {
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
  }

  .doc-footer {
    margin-top: 18px;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .doc-footer .doc-divider.double-rule {
    margin: 8px 0;
  }


  .chart-data-table {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border-collapse: collapse;
    font-size: 10px;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Same ruled treatment as .data-table: heavy top rule, hairline rows. */
  .chart-data-table caption {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-align: left;
    color: var(--ink-muted);
    padding-bottom: 4px;
  }

  .chart-data-table thead th {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-muted);
    border-top: 1.5px solid var(--ink-primary);
    border-bottom: 1px solid var(--paper-border-dark);
  }

  .chart-data-table th,
  .chart-data-table td {
    padding: 3px 6px;
    text-align: left;
    border-bottom: 1px solid rgba(25, 28, 33, 0.08);
    font-variant-numeric: tabular-nums;
  }

  .chart-data-table tbody th {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--ink-primary);
  }

  .chart-data-table td {
    color: var(--ink-secondary);
  }

  .chart-tooltip,
  .chart-svg .ct-crosshair {
    display: none !important;
  }

  .chart-svg:hover .ct-slice:not(.is-active),
  .chart-svg:hover .ct-bar:not(.is-active) {
    opacity: 1;
  }

  .chart-figure,
  .datapoint,
  .kpi-tile,
  .scenario-row,
  .timeline-item,
  .risk-legend-item,
  .estimate-row {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .chart-figure {
    padding: 10px 12px;
  }

  .chart-title {
    font-size: 13.5px;
  }

  .chart-note {
    font-size: 10.5px;
  }

  /* Ranking blocks hold a chart, a table and notes — too tall to keep whole,
     so only the bar chart itself is kept together. */
  .ranking-block .chart-body,
  .doc-section > .chart-body,
  .scenario-bars {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .kpi-tile:hover,
  .datapoint:hover {
    transform: none;
    box-shadow: none;
  }

  .chart-svg {
    max-height: 300px;
  }

  .ranking-block .chart-svg,
  #doc-riskmatrix .chart-svg {
    max-height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kpi-tile,
  .datapoint {
    transition: none;
  }

  .kpi-tile:hover,
  .datapoint:hover {
    transform: none;
  }

  .icon-spin {
    animation: none;
  }
}

@media screen and (max-width: 768px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }

  .scenario-row {
    grid-template-columns: 56px 1fr 40px;
    gap: 8px;
  }

  .scenario-detail {
    margin-left: 0;
  }

  .doc-header-image img {
    height: 160px;
  }

  .timeline-item {
    grid-template-columns: 70px 14px 1fr;
    gap: 8px;
  }

  .timeline-item:not(:last-child)::before {
    left: 76px;
  }
}

/* ==========================================================================
   15. RESEARCH ASSISTANT — floating chat panel
   ========================================================================== */

/* "?" explain buttons on KPI tiles / data points */
.explain-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--paper-border-dark);
  background: var(--paper-bg);
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.kpi-tile:hover .explain-btn,
.datapoint:hover .explain-btn,
.explain-btn:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.explain-btn:hover {
  background: var(--ink-gold);
  color: #fff;
  border-color: var(--ink-gold);
}

/* No hover on touch devices — keep the affordance visible */
@media (hover: none) {
  .explain-btn {
    opacity: 1;
    transform: scale(1);
  }
}

/* Floating "Ask AI" button that appears near a text selection in the dossier */
.ask-ai-btn {
  position: fixed;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-accent);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%), rgba(16, 19, 26, 0.78);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--accent-gold-light);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-float), var(--shadow-glow);
}

.ask-ai-btn .icon-inline {
  width: 13px;
  height: 13px;
}

/* Persistent research-assistant toolbar (sticks near the top of the report,
   not a floating corner bubble) */
.assistant-bar {
  position: sticky;
  top: 12px;
  z-index: 40;
  margin-bottom: 24px;
  /* Sticky over the light paper report: a clear glass would put light text on
     a light backdrop, so this bar keeps the sheen but a denser smoked tint. */
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%), rgba(12, 14, 19, 0.80);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  overflow: hidden;
}

.assistant-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

.assistant-bar-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--accent-gold);
}

.assistant-bar-icon svg {
  width: 100%;
  height: 100%;
}

.assistant-bar-title {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #e2e8f0;
}

.assistant-credits-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(196, 151, 93, 0.12);
  color: #f3dcb6;
  text-transform: uppercase;
}

.assistant-credits-tag.is-pro {
  background: rgba(21, 128, 61, 0.18);
  color: #86efac;
}

.assistant-bar-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.assistant-bar-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-well);
  color: #e2e8f0;
  font-family: var(--font-sans);
  font-size: 13px;
}

.assistant-bar-input:focus {
  outline: none;
  border-color: var(--border-accent);
}

.assistant-bar-input::placeholder {
  color: var(--text-faint);
}

.assistant-bar-send {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-accent);
  background: var(--accent-gold);
  color: #14181f;
  cursor: pointer;
  transition: filter 0.14s ease;
}

.assistant-bar-send:hover {
  filter: brightness(1.08);
}

.assistant-bar-send svg {
  width: 15px;
  height: 15px;
}

.assistant-bar-expand {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-tile);
  color: var(--text-muted);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.14s ease, border-color 0.14s ease;
}

.assistant-bar-expand:hover {
  color: #e2e8f0;
  border-color: var(--border-accent);
}

.assistant-bar-expand svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.assistant-bar-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.assistant-ghost-btn {
  flex-shrink: 0;
  background: var(--glass-tile);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 8px;
  cursor: pointer;
}

.assistant-ghost-btn:hover {
  color: #e2e8f0;
  border-color: var(--border-accent);
}

/* Conversation drop-down panel */
.assistant-panel {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--glass-border-soft);
  background: rgba(6, 8, 12, 0.30);
}

/* Message log */
.assistant-log {
  flex: 1;
  overflow-y: auto;
  max-height: 360px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.assistant-msg {
  display: flex;
}

.assistant-msg.from-user {
  justify-content: flex-end;
}

.assistant-bubble {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #dbe2ec;
  background: var(--glass-tile-hover);
  border: 1px solid var(--glass-border-soft);
}

.assistant-msg.from-user .assistant-bubble {
  background: rgba(196, 151, 93, 0.14);
  border-color: rgba(196, 151, 93, 0.35);
  color: #f0e6d6;
  border-bottom-right-radius: 4px;
}

.assistant-msg.from-bot .assistant-bubble {
  border-bottom-left-radius: 4px;
}

.assistant-bubble p {
  margin: 0 0 8px;
}

.assistant-bubble p:last-child {
  margin-bottom: 0;
}

.assistant-bubble ul {
  margin: 6px 0;
  padding-left: 18px;
}

.assistant-bubble li {
  margin-bottom: 4px;
}

.assistant-bubble strong {
  color: #fff;
}

.assistant-bubble code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
}

.assistant-bubble a {
  color: var(--accent-gold-light);
}

/* Typing indicator */
.assistant-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.assistant-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: assistant-blink 1.2s infinite ease-in-out;
}

.assistant-typing span:nth-child(2) { animation-delay: 0.2s; }
.assistant-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes assistant-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* Sign-in / upgrade gate shown inline when the user can't ask right now */
.assistant-gate {
  margin: 0 16px 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(196, 151, 93, 0.08);
  border: 1px solid rgba(196, 151, 93, 0.3);
}

.assistant-gate p {
  font-size: 13px;
  line-height: 1.5;
  color: #dbe2ec;
  margin-bottom: 10px;
}

/* Suggestion chips */
.assistant-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px;
}

.assistant-suggestions:empty {
  display: none;
}

.assistant-chip {
  background: var(--glass-tile);
  border: 1px solid var(--glass-border-soft);
  border-radius: 999px;
  color: #cbd5e1;
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.assistant-chip:hover {
  color: #fff;
  border-color: var(--border-accent);
  background: rgba(196, 151, 93, 0.12);
}

@media screen and (max-width: 768px) {
  .assistant-bar {
    position: static;
  }

  .assistant-bar-row {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .assistant-bar-title {
    order: 1;
  }

  .assistant-ghost-btn {
    order: 2;
    margin-left: auto;
  }

  .assistant-bar-expand {
    order: 3;
  }

  .assistant-bar-form {
    order: 4;
    flex-basis: 100%;
  }

  .assistant-log {
    max-height: 50vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-typing span { animation: none; }
  .explain-btn { transition: none; }
}


/* --------------------------------------------------------------------------
   Adaptive dossier components: the research brief, and the question-specific
   sections a plan can add (options, insights, steps). Same paper, ink and
   type system as the fixed sections, so every dossier looks like Dossier even
   when its structure is different.
   -------------------------------------------------------------------------- */
.research-brief {
  margin-top: 14px;
  padding: 14px 20px 12px;
  border: 1px solid var(--paper-border);
  border-left: 3px solid var(--ink-gold);
  border-radius: 2px;
  background: var(--paper-bg);
  break-inside: avoid;
  page-break-inside: avoid;
}

.research-brief-label,
.brief-subhead {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-gold);
}

.research-brief-intent {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-primary);
  margin: 6px 0 12px;
}

.research-brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 18px;
}

.research-brief-col[hidden] { display: none; }

.brief-criteria {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.brief-criteria li,
.brief-geo p {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-secondary);
  margin: 0;
}

.brief-criteria li strong,
.brief-geo p strong { color: var(--ink-primary); }

.brief-why { color: var(--ink-muted); }

.brief-geo { margin-top: 6px; display: grid; gap: 5px; }

.brief-currency {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-secondary);
  margin-left: 4px;
}

.brief-questions {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-secondary);
}

.brief-questions summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--ink-gold);
}

.brief-questions ol { margin: 8px 0 0 18px; padding: 0; display: grid; gap: 3px; }

.scope-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  margin: 0 6px 4px 0;
  vertical-align: middle;
  white-space: nowrap;
}

.kpi-source .scope-tag { margin: 0 0 0 6px; }
/* .fineprint is a grid; without this the tag stretches to a full-width bar. */
.fineprint > .scope-tag { justify-self: start; margin: 0; }
.scope-local { color: #1e5a3a; background: #e3efe6; border: 1px solid #b9d6c2; }
.scope-global { color: #2c4a70; background: #e6ecf4; border: 1px solid #bfcee2; }

/* Options: a shortlist of real choices */
.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-bg-subtle);
  border: 1px solid var(--paper-border);
  border-top: 3px solid var(--ink-gold);
  border-radius: var(--radius-xs);
  padding: 15px 17px 12px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.option-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-right: 22px;
}

.option-name {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink-primary);
}

.option-price {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-gold);
  white-space: nowrap;
}

.option-card p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-secondary);
  margin: 6px 0 0;
}

.option-card p strong { color: var(--ink-primary); }

.option-specs {
  margin: 10px 0 0;
  border-top: 1px dashed var(--paper-border);
  padding-top: 8px;
  display: grid;
  gap: 3px;
}

.option-spec {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.option-spec dt { color: var(--ink-muted); margin: 0; }
.option-spec dd { color: var(--ink-primary); margin: 0; text-align: right; font-weight: 600; }

.option-proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.option-pros,
.option-cons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
  align-content: start;
}

.option-pros li,
.option-cons li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-secondary);
}

.option-pros li::before { content: '+'; position: absolute; left: 0; color: #1e5a3a; font-weight: 700; }
.option-cons li::before { content: '−'; position: absolute; left: 0; color: var(--ink-red); font-weight: 700; }

.option-card .fineprint { margin-top: auto; padding-top: 10px; }

/* Insights: findings about one aspect of the question */
.insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.insight-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--paper-border);
  break-inside: avoid;
  page-break-inside: avoid;
}

.insight-item:first-child { padding-top: 2px; }
.insight-item:last-child { border-bottom: 0; }

.insight-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.insight-heading {
  font-family: var(--font-serif);
  font-size: 15.5px;
  color: var(--ink-primary);
}

.insight-figure {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-gold);
  white-space: nowrap;
}

.insight-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-secondary);
  margin: 4px 0 0;
}

.insight-item .fineprint { margin-top: 6px; }

/* Steps: itineraries, processes, launch plans */
.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 12px;
}

.step-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  break-inside: avoid;
  page-break-inside: avoid;
}

.step-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--paper-bg);
  background: var(--ink-primary);
  border-radius: 2px;
  padding: 6px 8px;
  text-align: center;
}

.step-body {
  border-left: 2px solid var(--paper-border);
  padding: 0 0 2px 14px;
}

.step-title {
  font-family: var(--font-serif);
  font-size: 15.5px;
  color: var(--ink-primary);
}

.step-detail {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-secondary);
  margin: 4px 0 0;
}

.step-cost {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-gold);
}

.step-body .fineprint { margin-top: 4px; }

@media screen and (max-width: 640px) {
  .research-brief-grid { grid-template-columns: 1fr; gap: 10px; }
  .option-grid { grid-template-columns: 1fr; }
  .option-proscons { grid-template-columns: 1fr; }
  .step-item { grid-template-columns: 1fr; gap: 6px; }
  .step-label { justify-self: start; }
  .step-body { border-left: 0; padding-left: 0; }
}