/* ── nDirector Intake — Reskin (editorial monochrome + bronze) ─────────────── */
/* Palette: Black #0C0C0C · Bronze #8B7355 · Hairlines #DCDCDC · White */
/* Typography: Plus Jakarta Sans, with 200 / 400 / 600 / 700 / 800 contrast */

:root {
  /* Core palette */
  --black:       #0C0C0C;
  --white:       #FAFAFA;
  --off-white:   #FEFEFE;
  --gray:        #4A4A4A;
  --quiet:       #6B6B6B;
  --light-gray:  #DCDCDC;
  --bg:          #FFFFFF;
  --bronze:      #8B7355;
  --bronze-dim:  #6F5C44;
  --bronze-fill: rgba(139,115,85,0.08);
  --red:         #B43C32;

  /* Semantic aliases */
  --ink:         var(--black);
  --sub:         var(--gray);
  --border:      var(--light-gray);
  --accent:      var(--bronze);
  --accent-fill: var(--bronze-fill);

  /* Back-compat aliases (forge-*) so any stray legacy rules still resolve.
     New code should use the semantic tokens above. */
  --forge-navy:       #FFFFFF;
  --forge-navy-deep:  #FFFFFF;
  --forge-navy-mid:   #FAFAFA;
  --forge-navy-light: #F4F4F2;
  --forge-gold:       var(--bronze);
  --forge-gold-dim:   var(--bronze-dim);
  --forge-gold-light: var(--bronze);
  --forge-gold-glow:  var(--bronze-fill);
  --forge-cream:      #FEFEFE;
  --forge-cream-dim:  #F4F4F2;
  --forge-text:       var(--ink);
  --forge-text-dim:   var(--gray);
  --forge-text-muted: var(--quiet);
  --forge-border:     var(--border);
  --forge-border-mid: var(--border);
  --forge-shadow:     0 1px 2px rgba(0,0,0,0.04);
  --forge-radius:     10px;
  --forge-radius-sm:  6px;

  --font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: #FFFFFF;
}

/* Grain texture — subtle SVG noise overlay, fixed, non-interactive */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.35;
}

/* Make sure content sits above the grain */
#login-screen, #landing, #session-view { position: relative; z-index: 1; }

/* ── Login screen ──────────────────────────────────────────────────────────── */

#login-screen {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}

.forge-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--forge-radius);
  padding: 2.5rem;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--forge-shadow);
}

.forge-card h1 {
  font-family: var(--font);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.forge-card .tagline {
  color: var(--quiet);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
}

/* ── Landing screen ─────────────────────────────────────────────────────────── */

#landing {
  display: none;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: 2.5rem 1.25rem 4rem;
  background: transparent !important; /* override inline navy gradient */
}

.landing-inner {
  max-width: 620px;
  width: 100%;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.forge-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem 0 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.forge-logo {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.brand-pipe {
  color: var(--bronze);
  font-weight: 200;
  opacity: 0.7;
  margin: 0 1px;
}

.forge-badge {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--quiet);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
}

/* ── Welcome text ───────────────────────────────────────────────────────────── */

.forge-welcome {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  max-width: 560px;
}

/* ── "Compare the Report Depths" wrapper (single-toggle reveal) ─────────── */
.tier-compare {
  margin-bottom: 2rem;
  max-width: 1080px;
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.tier-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.2rem;
  cursor: pointer;
  user-select: none;
  outline: none;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.tier-compare-head:hover {
  background: rgba(139, 115, 85, 0.04);
}
.tier-compare-head:focus-visible {
  border-bottom-color: var(--bronze);
  box-shadow: inset 0 0 0 2px rgba(139, 115, 85, 0.25);
}

.tier-compare-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.tier-compare-chevron {
  font-size: 0.85rem;
  color: var(--quiet);
  transition: transform .2s ease;
  margin-left: 1rem;
}
.tier-compare[data-expanded="false"] .tier-compare-chevron {
  transform: rotate(-90deg);
}

.tier-compare-body {
  overflow: hidden;
  max-height: 2000px;
  padding: 1rem 1.2rem 1.2rem;
  border-top: 1px solid var(--light-gray);
  transition: max-height .3s ease, padding-top .25s ease, padding-bottom .25s ease, border-top-color .15s ease;
}
.tier-compare[data-expanded="false"] .tier-compare-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
}

/* ── Tier cards (3-column comparison grid inside the wrapper) ───────────── */
.tier-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
}

@media (max-width: 880px) {
  .tier-cards { grid-template-columns: 1fr; }
}

.tier-card {
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.tier-card:hover {
  border-color: var(--bronze);
}

.tier-card-head {
  padding: 1.05rem 1.2rem .9rem;
  border-bottom: 1px solid var(--light-gray);
  position: relative;
}

.tier-price {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
  background: rgba(139, 115, 85, 0.10);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: .55rem;
}

.tier-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  margin: 0 0 .15rem;
  line-height: 1.2;
}
.tier-tagline {
  font-size: 0.82rem;
  color: var(--quiet);
  font-style: italic;
  margin: 0;
}

.tier-card-body {
  padding: .9rem 1.2rem 1.1rem;
}

.tier-description {
  font-size: 0.86rem;
  color: var(--gray);
  line-height: 1.5;
  margin: 0 0 .7rem;
}

.tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 .85rem;
}
.tier-features li {
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.45;
  padding: .25rem 0 .25rem 1.05rem;
  position: relative;
}
.tier-features li::before {
  content: '';
  position: absolute;
  left: .25rem;
  top: .85rem;
  width: 4px;
  height: 4px;
  background: var(--bronze);
  border-radius: 50%;
}

.tier-purpose {
  padding: .65rem .8rem;
  background: rgba(139, 115, 85, 0.05);
  border-left: 2px solid var(--bronze);
}
.tier-purpose-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: .25rem;
}
.tier-purpose p {
  margin: 0;
  font-size: 0.83rem;
  color: var(--gray);
  line-height: 1.45;
}

/* ── Form ───────────────────────────────────────────────────────────────────── */

.forge-form {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.forge-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.forge-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.forge-select,
.forge-textarea,
.forge-input {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--forge-radius-sm);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.92rem;
  padding: 0.75rem 0.95rem;
  width: 100%;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

.forge-select:focus,
.forge-textarea:focus,
.forge-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(12,12,12,0.06);
}

.forge-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230C0C0C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.forge-select option,
.forge-select optgroup {
  background: #FFFFFF;
  color: var(--ink);
}

.forge-textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.55;
}

.forge-textarea::placeholder,
.forge-input::placeholder {
  color: var(--quiet);
}

.forge-field-hint {
  margin-top: 0.3rem;
  font-size: 0.78em;
  color: var(--quiet);
  line-height: 1.5;
}

/* ── File upload ─────────────────────────────────────────────────────────────── */

.forge-upload-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.forge-upload-btn {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--forge-radius-sm);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.forge-upload-btn:hover {
  border-color: var(--ink);
  background: rgba(12,12,12,0.03);
}

.forge-upload-name {
  font-size: 0.82rem;
  color: var(--quiet);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── CTA button ─────────────────────────────────────────────────────────────── */

.forge-cta {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 100px;
  color: var(--white);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.85rem 2rem;
  transition: opacity 0.15s, transform 0.1s;
  width: 100%;
  margin-top: 0.5rem;
}

.forge-cta:hover:not(:disabled) {
  opacity: 0.85;
  transform: translateY(-1px);
}

.forge-cta:active:not(:disabled) {
  opacity: 0.95;
  transform: translateY(0);
}

.forge-cta:disabled {
  background: var(--light-gray);
  border-color: var(--light-gray);
  color: var(--quiet);
  cursor: not-allowed;
  transform: none;
  opacity: 1;
}

.forge-btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--gray);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1.2rem;
  transition: border-color 0.15s, color 0.15s;
}

.forge-btn-secondary:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ── Login / error helpers ──────────────────────────────────────────────────── */

.forge-error { color: var(--red); font-size: 0.85rem; margin-top: 0.5rem; min-height: 1.2em; }
.forge-gap { margin-bottom: 0.75rem; }

/* ── Session view ────────────────────────────────────────────────────────────── */

#session-view {
  display: none;
  flex-direction: column;
  height: 100vh;
  background: transparent !important;
}

/* ── Session header ──────────────────────────────────────────────────────────── */

.session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.5rem;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.session-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.session-logo {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.session-scenario-badge {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--quiet);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ── Progress indicator ──────────────────────────────────────────────────────── */

.forge-progress {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0.75rem;
}

.forge-progress-step {
  color: var(--quiet);
  padding: 0 0.6rem;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.forge-progress-step.active { color: var(--ink); font-weight: 700; }
.forge-progress-step.done { color: var(--gray); }
.forge-progress-step.done::before { content: '✓ '; color: var(--bronze); }

.forge-progress-sep { color: var(--border); }

/* ── Chat area ───────────────────────────────────────────────────────────────── */

.session-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2rem;
  gap: 1.25rem;
}

/* ── Bubbles ─────────────────────────────────────────────────────────────────── */

.bubble {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.bubble-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--quiet);
  padding: 0 0.15rem;
}

.bubble-body {
  background: transparent;
  border: none;
  border-left: 2px solid var(--border);
  border-radius: 0;
  padding: 0.1rem 0 0.1rem 1rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink);
}

/* User messages full-width, bronze tint to distinguish from AI */
.bubble.user-bubble .bubble-label { color: var(--bronze); }
.bubble.user-bubble .bubble-body {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bronze-fill);
  border-left: 2px solid var(--bronze);
  color: var(--ink);
  padding: 0.55rem 0.9rem;
}

/* Also handle when user-bubble class is directly on .bubble-body (from intake.js line 665) */
.bubble-body.user-bubble {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bronze-fill);
  border-left: 2px solid var(--bronze);
  color: var(--ink);
  padding: 0.55rem 0.9rem;
}

/* Markdown inside bubbles */
.bubble-body h1, .bubble-body h2, .bubble-body h3 {
  font-family: var(--font);
  color: var(--ink);
  margin: 1rem 0 0.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bubble-body h1 { font-size: 1.15rem; }
.bubble-body h2 { font-size: 1.02rem; }
.bubble-body h3 { font-size: 0.92rem; }
.bubble-body p { margin-bottom: 0.65rem; }
.bubble-body ul, .bubble-body ol { padding-left: 1.4rem; margin-bottom: 0.6rem; }
.bubble-body li { margin-bottom: 0.2rem; }
.bubble-body table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.75rem 0; }
.bubble-body th {
  background: var(--ink);
  color: var(--white);
  text-align: left;
  padding: 0.5rem 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.bubble-body td { padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--border); }
.bubble-body code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: rgba(12,12,12,0.06);
  color: var(--ink);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.bubble-body strong { color: var(--ink); font-weight: 700; }

/* streaming cursor */
.cursor::after { content: '▋'; animation: blink 0.8s step-end infinite; color: var(--bronze); }
@keyframes blink { 50% { opacity: 0; } }

/* ── Status pill ─────────────────────────────────────────────────────────────── */

.forge-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--quiet);
  padding: 0.5rem 0;
}

.forge-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.forge-module-note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.83rem;
  color: var(--gray);
  padding: 0.3rem 0;
}

.forge-module-check {
  color: var(--bronze);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ── Phase notes ─────────────────────────────────────────────────────────────── */

.forge-phase-note {
  font-size: 0.8rem;
  color: var(--quiet);
  padding: 0.35rem 0;
  margin: 0.25rem 0;
  font-style: italic;
  letter-spacing: 0.01em;
}

.questions-section.phase-complete {
  opacity: 0.35;
  pointer-events: none;
  max-height: 60px;
  overflow: hidden;
  transition: all 0.4s ease;
}

/* ── Critical thinking questions ─────────────────────────────────────────────── */

.questions-section {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-left: 3px solid var(--bronze);
  border-radius: var(--forge-radius-sm);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.questions-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.questions-subtext {
  font-size: 0.82rem;
  color: var(--quiet);
  margin-top: -0.5rem;
}

.question-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0.1rem 0.8rem 1.6rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gray);
  position: relative;
}

.question-card::before {
  content: '·';
  position: absolute;
  left: 0.4rem;
  top: 0.45rem;
  color: var(--bronze);
  font-size: 1.2rem;
  line-height: 1;
}

.question-card:last-of-type { border-bottom: none; }
.question-card strong { color: var(--ink); font-weight: 700; }

.feedback-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 0.25rem;
}

.feedback-textarea {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--forge-radius-sm);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.9rem;
  line-height: 1.6;
  min-height: 120px;
  outline: none;
  padding: 0.75rem 0.95rem;
  resize: vertical;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.feedback-textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(12,12,12,0.06);
}

.feedback-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Module tags in stream ────────────────────────────────────────────────────── */

.module-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bronze-fill);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--bronze);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.7rem;
  margin: 0.25rem 0;
}

/* ── Working document sidebar ────────────────────────────────────────────────── */

.session-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.session-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.75rem 1.5rem;
}

.worksheet-panel {
  width: 300px;
  border-left: 1px solid var(--border);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  padding: 1.25rem 1rem;
  flex-shrink: 0;
}

.worksheet-panel-header {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.ws-module {
  margin-bottom: 0.35rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  transition: background 0.15s;
}

.ws-module:hover { background: rgba(12,12,12,0.025); }

.ws-module-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  letter-spacing: 0.01em;
}

.ws-module-title .ws-check {
  color: var(--bronze);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Pending state */
.ws-module-pending .ws-module-title {
  color: var(--quiet);
  font-weight: 500;
  opacity: 0.7;
}

.ws-pending-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--quiet);
  opacity: 0.5;
  flex-shrink: 0;
}

/* Done state */
.ws-module-done .ws-module-title { color: var(--ink); }
.ws-module-done .ws-module-title strong { color: var(--bronze); }

.ws-module-preview {
  font-size: 0.78rem;
  color: var(--quiet);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-top: 0.25rem;
}

/* ── Final report section ─────────────────────────────────────────────────────── */

.final-report-section {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-top: 3px solid var(--ink);
  border-radius: var(--forge-radius-sm);
  padding: 1.75rem;
}

.final-report-heading {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
  text-align: center;
}

.final-report-desc {
  font-size: 0.9rem;
  color: var(--gray);
  text-align: center;
  margin-bottom: 0.25rem;
}

.report-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}

.report-btn {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 100px;
  color: var(--white);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1.3rem;
  text-decoration: none;
  transition: opacity 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.report-btn:hover { opacity: 0.85; }

.report-btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--gray);
}

.report-btn-outline:hover {
  border-color: var(--ink);
  color: var(--ink);
  opacity: 1;
}

/* ── Processing status bar ───────────────────────────────────────────────────── */

.forge-processing-bar {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  color: var(--quiet);
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  z-index: 10;
}

.forge-processing-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: forge-spin 0.8s linear infinite;
  flex-shrink: 0;
}

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

/* ── Error state ─────────────────────────────────────────────────────────────── */

.forge-alert {
  background: rgba(180,60,50,0.06);
  border: 1px solid rgba(180,60,50,0.25);
  border-left: 3px solid var(--red);
  border-radius: var(--forge-radius-sm);
  color: var(--red);
  font-size: 0.85rem;
  padding: 0.75rem 1rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
  .landing-inner { padding: 0; }
  .forge-header { padding: 1rem 0 1rem; }
  .worksheet-panel { display: none; }
  .session-body { padding: 1rem; }
  body::after { opacity: 0.45; }
}

/* ── Scope warning bubble ────────────────────────────────────────────────────── */

.scope-warning-bubble .scope-warning-body {
  background: transparent;
  border: none;
  border-left: 3px solid #c79a3a;
  background: rgba(199,154,58,0.08);
  padding: 0.9rem 1.1rem;
  border-radius: 0;
}

.scope-warning-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.btn-scope-proceed {
  background: #c79a3a;
  color: var(--white);
  border: 1px solid #c79a3a;
  border-radius: 100px;
  padding: 0.5rem 1.15rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-scope-proceed:hover { opacity: 0.85; }

.btn-scope-cancel {
  background: transparent;
  color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.5rem 1.15rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn-scope-cancel:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ── Calibration panel (unified gate, replaces Pass 3 + Phase 2) ────────── */

.calibration-panel-bubble .calibration-panel-body {
  background: rgba(139, 115, 85, 0.05);
  border: none;
  border-left: 3px solid var(--bronze);
  padding: 1rem 1.2rem;
  border-radius: 0;
}

.calibration-panel-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.calibration-panel-tier {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-dim, #6F5C44);
  background: rgba(139, 115, 85, 0.12);
  padding: 2px 8px;
  border-radius: 100px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.calibration-panel-lede {
  font-size: 0.85rem;
  color: var(--gray);
  line-height: 1.55;
  margin: 0 0 1rem;
}

.calibration-items {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.calibration-item {
  background: #fff;
  border: 1px solid var(--light-gray, #DCDCDC);
  border-radius: 4px;
  padding: 0.7rem 0.85rem 0.85rem;
}

.calib-meta {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

.calib-kind {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(139, 115, 85, 0.10);
  color: var(--bronze, #8B7355);
}

.calib-kind-scope_brief   { background: rgba(139, 115, 85, 0.18); color: var(--bronze-dim, #6F5C44); }
.calib-kind-assumption    { background: rgba(12, 12, 12, 0.07); color: var(--ink); }
.calib-kind-contradiction { background: rgba(168, 7, 26, 0.10); color: #a8071a; }
.calib-kind-implausible   { background: rgba(168, 7, 26, 0.10); color: #a8071a; }
.calib-kind-suspicious    { background: rgba(151, 90, 0, 0.10); color: #975a00; }
.calib-kind-unsourced     { background: rgba(139, 115, 85, 0.10); color: var(--bronze); }

/* Scope brief card: more prominent header, prose body preserves whitespace,
   textarea correction input. */
.calibration-item.calib-scope-brief {
  background: rgba(139, 115, 85, 0.04);
  border-left: 3px solid var(--bronze, #8B7355);
}
.calib-desc-prose {
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--ink);
  font-size: 0.88rem;
  padding: 0.55rem 0.7rem;
  background: #fff;
  border: 1px solid var(--light-gray, #DCDCDC);
  border-radius: 3px;
  margin-bottom: 0.55rem;
}
textarea.calib-correction-input {
  resize: vertical;
  min-height: 6em;
  font-family: inherit;
  line-height: 1.55;
}

.calib-sev {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
}
.calib-sev-high   { background: rgba(168, 7, 26, 0.10); color: #a8071a; }
.calib-sev-medium { background: rgba(151, 90, 0, 0.10); color: #975a00; }
.calib-sev-low    { background: rgba(31, 107, 18, 0.10); color: #1f6b12; }

.calib-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 0.25rem;
}

.calib-desc {
  font-size: 0.83rem;
  color: var(--gray);
  line-height: 1.5;
  margin-bottom: 0.55rem;
}

.calib-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.calib-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.83rem;
  color: var(--gray);
  cursor: pointer;
  user-select: none;
}

.calib-action input[type="radio"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--bronze, #8B7355);
}

.calib-action span {
  line-height: 1;
}

.calib-correction {
  margin-top: 0.55rem;
}

.calib-correction-input {
  width: 100%;
  border: 1px solid var(--light-gray, #DCDCDC);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.calib-correction-input:focus {
  border-color: var(--bronze, #8B7355);
}

.btn-calibrate-submit {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  padding: 0.65rem 1.4rem;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}

.btn-calibrate-submit:hover { opacity: 0.85; }
.btn-calibrate-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Legacy assumption-preview gate (Pass 3, kept for in-flight sessions) ─ */

.assumption-gate-bubble .assumption-gate-body {
  background: rgba(199,154,58,0.06);
  border: none;
  border-left: 3px solid #c79a3a;
  padding: 1rem 1.2rem;
  border-radius: 0;
}

.assumption-gate-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.assumption-gate-tier {
  background: #c79a3a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.5rem;
  border-radius: 100px;
  text-transform: uppercase;
}

.assumption-gate-lede {
  color: var(--gray);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 0.75rem 0;
}

.assumption-gate-section-hd {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink);
  margin: 0.85rem 0 0.35rem 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.assumption-gate-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem 0;
  font-size: 0.86rem;
  line-height: 1.55;
}

.assumption-gate-list li {
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(220,220,220,0.5);
  color: var(--gray);
}

.assumption-gate-list li:last-child { border-bottom: none; }

.assumption-gate-ordinal {
  display: inline-block;
  background: rgba(199,154,58,0.15);
  color: #8a6820;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.05rem 0.38rem;
  border-radius: 3px;
  margin-right: 0.4rem;
  min-width: 1.9rem;
  text-align: center;
}

.flag-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.42rem;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.flag-implausible { background: #d84242; color: #fff; }
.flag-suspicious  { background: #d89b42; color: #fff; }

.flag-reason { color: var(--quiet); font-style: italic; }

.assumption-gate-note-label {
  display: block;
  font-size: 0.78rem;
  color: var(--quiet);
  margin: 0.85rem 0 0.3rem 0;
}

.assumption-gate-note {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: #fff;
  resize: vertical;
  min-height: 2.4rem;
  box-sizing: border-box;
}

.assumption-gate-note:focus {
  outline: none;
  border-color: var(--bronze, #8B7355);
}

.assumption-gate-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.95rem;
  flex-wrap: wrap;
}

.btn-gate-proceed {
  background: #c79a3a;
  color: var(--white);
  border: 1px solid #c79a3a;
  border-radius: 100px;
  padding: 0.5rem 1.15rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-gate-proceed:hover { opacity: 0.85; }
.btn-gate-proceed:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-gate-log {
  background: transparent;
  color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.5rem 1.15rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn-gate-log:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-gate-log:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Module preview modal ────────────────────────────────────────────────── */

.module-preview-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12,12,12,0.45);
  z-index: 500;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
  backdrop-filter: blur(3px);
}

.module-preview-panel {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.module-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: #FFFFFF;
  z-index: 1;
}

.module-preview-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.module-preview-close {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--quiet);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.module-preview-close:hover {
  color: var(--ink);
  background: rgba(12,12,12,0.05);
}

.module-preview-content {
  padding: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--gray);
}
.module-preview-content h1,
.module-preview-content h2,
.module-preview-content h3 {
  color: var(--ink);
  margin: 1rem 0 0.4rem;
  font-weight: 700;
}
.module-preview-content p { margin-bottom: 0.75rem; }
.module-preview-content ul,
.module-preview-content ol { padding-left: 1.4rem; margin-bottom: 0.75rem; }
.module-preview-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.module-preview-content th,
.module-preview-content td {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  text-align: left;
}
.module-preview-content th {
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
}
.module-preview-content strong { color: var(--ink); }

/* Clickable completed worksheet rows */
.ws-module-done {
  cursor: pointer;
  transition: background 0.15s;
}
.ws-module-done:hover {
  background: rgba(12,12,12,0.03);
}
.ws-preview-hint {
  font-size: 0.68rem;
  color: var(--bronze);
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.ws-module-done:hover .ws-preview-hint { opacity: 1; }

/* ── Scenario accordion (landing decision tree) ─────────────────────────── */

.scenario-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1.5rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.scenario-card {
  border-bottom: 1px solid var(--border);
  background: var(--white);
  transition: background 0.15s;
}
.scenario-card:last-child { border-bottom: none; }

.scenario-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 1rem;
  transition: background 0.12s;
}
.scenario-card-head:hover { background: rgba(139,115,85,0.04); }
.scenario-card--open > .scenario-card-head {
  background: rgba(139,115,85,0.06);
  border-left: 3px solid var(--bronze);
}

.scenario-head-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.scenario-number {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--quiet);
  letter-spacing: 0;
}
.scenario-card--open .scenario-number {
  border-color: var(--bronze);
  color: var(--bronze);
}
.scenario-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.scenario-chevron {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--quiet);
  border-bottom: 1.5px solid var(--quiet);
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.15s;
  margin-top: -3px;
}
.scenario-card--open .scenario-chevron {
  transform: rotate(-135deg);
  border-color: var(--bronze);
  margin-top: 3px;
}

/* Body — hidden by default, visible when card is open */
.scenario-card-body {
  display: none;
  padding: 0 1.4rem 1.5rem;
  border-top: 1px solid var(--border);
}
.scenario-card--open .scenario-card-body { display: block; }

.scenario-jtbd {
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.65;
  margin: 1.1rem 0 0.6rem;
}

/* CTA sentence below JTBD */
.scenario-cta {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--bronze);
  line-height: 1.5;
  margin: 0 0 0;
  letter-spacing: -0.01em;
}

/* Upload starter hint — tells the user what to attach and why */
.scenario-upload-hint {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--quiet);
}
.scenario-upload-hint strong {
  color: var(--ink);
  font-weight: 700;
}
/* "Built for iteration" note — a quiet bronze-tinted callout that frames the
   iterate-and-save-with-a-prior-nReport flow without overwhelming the
   first-time read. */
.scenario-iteration-note {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gray);
  background: rgba(139, 115, 85, 0.07);
  border-left: 2px solid var(--bronze);
  border-radius: 4px;
}
.scenario-iteration-note strong { color: var(--bronze); }

/* Re-upload vs. fresh vs. context explainer — collapsed by default;
   one click expands the four-bullet mental-model guide. */
.scenario-upload-help {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--quiet);
}
.scenario-upload-help summary {
  cursor: pointer;
  color: var(--bronze);
  font-weight: 600;
  padding: 0.35rem 0;
  list-style: none;
  display: inline-block;
}
.scenario-upload-help summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s;
}
.scenario-upload-help[open] summary::before {
  content: "▾ ";
}
.scenario-upload-help summary::-webkit-details-marker {
  display: none;   /* hide default disclosure triangle on WebKit */
}
.scenario-upload-help ul {
  margin: 0.5rem 0 0 0.25rem;
  padding-left: 1.1rem;
}
.scenario-upload-help li {
  margin-bottom: 0.4rem;
  color: var(--gray);
}
.scenario-upload-help strong {
  color: var(--ink);
  font-weight: 700;
}
.scenario-upload-help em {
  font-style: italic;
  color: var(--ink);
}

/* Upload zone — supports both picker (button) and drag-and-drop.
   The whole zone is the drop target so users can drag onto either the
   button or the empty space. Dashed border signals "this is a drop
   zone"; bronze fill on drag-over confirms the drop will be accepted. */
.scenario-upload-zone {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.9rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  border: 1.5px dashed var(--light-gray);
  border-radius: 8px;
  background: rgba(220, 220, 220, 0.12);
  transition: border-color 0.15s, background 0.15s;
}
.scenario-upload-zone.drag-over {
  border-color: var(--bronze);
  border-style: solid;
  background: rgba(139, 115, 85, 0.08);
}
/* Two-zone upload (2026-05-31): each zone carries a full-width label above
   the attach button / drop hint, so the zone stacks rather than sitting on
   one row. The label forces a flex line break by spanning 100% width. */
.scenario-upload-zone-label {
  flex: 0 0 100%;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--gray);
  margin-bottom: 0.15rem;
}
.scenario-upload-zone-label strong { color: var(--ink); font-weight: 700; }
.scenario-upload-zone-optional {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--quiet);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* The optional prior-nReport box is visually quieter than the required
   presentation box so the eye lands on box 1 first. */
.scenario-upload-zone--prior {
  background: rgba(220, 220, 220, 0.06);
  margin-top: 0;
}
.scenario-upload-zone--prior.drag-over {
  background: rgba(139, 115, 85, 0.08);
}
.scenario-attach-btn {
  padding: 0.48rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.scenario-attach-btn:hover { border-color: var(--bronze); color: var(--bronze); }

.scenario-drop-hint {
  font-size: 0.78rem;
  color: var(--quiet);
  font-style: italic;
  pointer-events: none;
}
.scenario-upload-zone.drag-over .scenario-drop-hint {
  color: var(--bronze);
  font-style: normal;
  font-weight: 600;
}

/* File chip list — cumulative across multiple add operations (picker +
   drop), each chip has an × to remove individually. Wraps cleanly when
   multiple files are attached so the upload zone doesn't overflow. */
.scenario-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.2rem;
}
.scenario-file-list:empty { display: none; }
.scenario-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.45rem 0.3rem 0.7rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 100%;
}
.scenario-file-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18rem;
}
.scenario-file-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--quiet);
  font-size: 1rem;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  transition: color 0.15s, background 0.15s;
}
.scenario-file-chip-remove:hover {
  color: var(--white);
  background: var(--bronze);
}

/* Context textarea */
.scenario-context-label,
.scenario-state-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.scenario-context-hint {
  font-size: 0.78rem;
  color: var(--quiet);
  line-height: 1.5;
  margin: -0.1rem 0 0.55rem 0;
  max-width: 560px;
}

/* Venture HQ / target states multi-select (Peter 2026-05-21 ask:
   "Can we make it so you can select more than one state? Or State
   and Federal?"). Hint line below the label calls out the Ctrl/Cmd
   shortcut so users notice it's multi-select. */
.scenario-state-hint {
  font-size: 0.78rem;
  color: var(--quiet);
  line-height: 1.5;
  margin: -0.1rem 0 0.55rem 0;
  max-width: 560px;
}
.scenario-state-hint em {
  font-style: italic;
  display: inline-block;
  margin-top: 0.25rem;
}
.scenario-state-hint strong {
  color: var(--ink);
  font-weight: 600;
}
.scenario-state {
  font-family: inherit;
  font-size: 0.83rem;
  color: var(--ink);
  background: rgba(250,250,250,0.6);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.95rem;
  width: 100%;
  max-width: 420px;
  min-height: 7.5rem;   /* shows ~6 rows without scrolling */
  cursor: pointer;
  transition: border-color 0.15s;
}
.scenario-state:focus {
  outline: none;
  border-color: var(--bronze);
}
.scenario-state option {
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
}
.scenario-state option:checked {
  background: rgba(139, 115, 85, 0.18);
  color: var(--ink);
  font-weight: 600;
}
/* Federal/national pseudo-option styled distinct so users notice the
   federal-boost is separate from US-state selection. */
.scenario-state option[value="__FEDERAL__"] {
  font-weight: 600;
  color: var(--bronze);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.3rem;
  padding-bottom: 0.45rem;
}

/* Brief muted toast above the chip list. Used for duplicate-file
   feedback + unsupported-type rejections. Auto-dismisses after 3s
   via a fade. Peter's 2026-05-21 finding: silent on duplicates.  */
.scenario-upload-toast {
  width: 100%;
  margin: 0.4rem 0 0 0;
  padding: 0.35rem 0.7rem;
  font-size: 0.77rem;
  color: var(--quiet);
  background: rgba(139, 115, 85, 0.06);
  border-left: 2px solid var(--bronze);
  border-radius: 4px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s, max-height 0.2s;
  pointer-events: none;
}
.scenario-upload-toast.visible {
  opacity: 1;
  max-height: 4rem;
  pointer-events: auto;
}
.scenario-context {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--ink);
  background: rgba(250,250,250,0.6);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.65rem 0.8rem;
  resize: vertical;
  min-height: 70px;
  margin-bottom: 1.1rem;
  transition: border-color 0.15s;
}

.scenario-context:focus {
  outline: none;
  border-color: var(--bronze);
}

/* Check proposal button */
.scenario-check-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.5rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  border-radius: 100px;
  border: none;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.scenario-check-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}
.scenario-check-btn:not(:disabled):hover { background: var(--bronze); }

/* Preflight result area */
.scenario-preflight-area { margin-top: 1.1rem; }

.preflight-error {
  font-size: 0.82rem;
  color: #c0392b;
  background: #fdf3f2;
  border: 1px solid #f5c6c2;
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.5rem;
}
.preflight-warning {
  font-size: 0.82rem;
  color: #7a5c00;
  background: #fffbec;
  border: 1px solid #f0e0a0;
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.6rem;
}
.preflight-rerun-banner {
  font-size: 0.82rem;
  color: var(--bronze);
  background: rgba(139,115,85,0.06);
  border: 1px solid rgba(139,115,85,0.25);
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.85rem;
  font-weight: 600;
}

/* File-routing readout — shows Primary vs Context split after preflight when
   more than one file was uploaded. Rendered in scenario card preflight area,
   between the rerun banner (if any) and the tier-option cards. */
.preflight-file-routing {
  font-size: 0.82rem;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-left: 3px solid var(--bronze);
  border-radius: 4px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.85rem;
  line-height: 1.5;
}
.file-routing-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}
.file-routing-label {
  color: var(--quiet);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.file-routing-name {
  color: var(--black);
  font-weight: 500;
  word-break: break-word;
}
.file-routing-badge {
  font-size: 0.66rem;
  color: var(--bronze);
  border: 1px solid var(--bronze);
  border-radius: 100px;
  padding: 0.05rem 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.file-routing-note {
  font-size: 0.74rem;
  color: var(--quiet);
  margin: 0.4rem 0 0 0;
  font-style: italic;
}
.file-routing-subject-select {
  font-size: 0.8rem;
  font-family: inherit;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  max-width: 100%;
}
.file-routing-subject-select:focus {
  outline: none;
  border-color: var(--bronze);
}

/* ── Tier option cards ───────────────────────────────────────────────────── */

.tier-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.tier-option-card {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1rem 0.85rem;
  background: var(--white);
  cursor: default;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tier-option-card:hover {
  border-color: var(--bronze);
  box-shadow: 0 2px 8px rgba(139,115,85,0.1);
}

.tier-option-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}
.tier-option-price {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--quiet);
}
.tier-option-price--free {
  color: #2e7d32;
}
.tier-option-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin: 0;
}

.tier-option-subtitle {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--quiet);
  letter-spacing: 0.01em;
  margin: 0.15rem 0 0.55rem;
}

.tier-option-takeaway {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  margin: 0 0 0.55rem;
}

.tier-option-desc {
  font-size: 0.8rem;
  color: var(--gray);
  line-height: 1.55;
  flex: 1;
  margin: 0 0 0.9rem;
}

.tier-option-cta {
  display: block;
  width: 100%;
  padding: 0.45rem 0.75rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-radius: 100px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-align: center;
}
.tier-option-cta:hover {
  background: var(--ink);
  color: var(--white);
}
.tier-option-cta:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Global API key section on landing */
.landing-api-key {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
}

/* Responsive: single column on small screens */
@media (max-width: 560px) {
  .tier-options { grid-template-columns: 1fr; }
  .scenario-card-head { padding: 0.85rem 1rem; }
  .scenario-card-body { padding: 0 1rem 1rem; }
}

/* Landing welcome heading */
.landing-welcome {
  margin-bottom: 1.75rem;
}
.landing-welcome-heading {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}
.landing-welcome-sub {
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.65;
  margin: 0;
}

/* ── PDF Preview Modal ───────────────────────────────────────────────────── */
.pdf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.pdf-modal {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  width: min(92vw, 1040px);
  height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.pdf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pdf-modal-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pdf-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--quiet);
  padding: 0.25rem 0.4rem;
  line-height: 1;
  border-radius: 3px;
  transition: color 0.15s;
}
.pdf-modal-close:hover { color: var(--ink); }
.pdf-modal-download,
.pdf-modal-open-tab {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bronze);
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--bronze);
  border-radius: 100px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
/* Open-in-tab sits first after the spacer, then Save PDF, then close button.
   margin-left: auto on the FIRST visible button pushes the cluster to the
   right of the title. The second button uses a small gap from the first. */
.pdf-modal-open-tab { margin-left: auto; margin-right: 0.5rem; }
.pdf-modal-download { margin-right: 0.75rem; }
/* If open-tab is hidden (display:none until PDF loads), Save PDF inherits
   the right-side alignment via this rule. */
.pdf-modal-open-tab[style*="display:none"] + .pdf-modal-download,
.pdf-modal-open-tab[style*="display: none"] + .pdf-modal-download {
  margin-left: auto;
}
.pdf-modal-download:hover,
.pdf-modal-open-tab:hover {
  background: var(--bronze);
  color: var(--white);
}
/* Helper hint above the iframe — points users at our header buttons
   instead of the browser-native PDF viewer toolbar (which Peter found
   unreliable on blob: URLs). Hidden by default; shown after PDF loads. */
.pdf-modal-hint {
  padding: 0.5rem 0.95rem;
  font-size: 0.78rem;
  color: var(--quiet);
  background: rgba(139, 115, 85, 0.07);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.pdf-modal-hint strong {
  color: var(--bronze);
  font-weight: 700;
}
.pdf-modal-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--light-gray);
}
.pdf-modal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  color: var(--quiet);
}
.pdf-modal-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}