/* ==============================================================
   Blindspot — styles.css (rediseño v2.1)
   Reemplaza apps/web/styles.css. No requiere build step.
   Mantiene todas las clases que app.js / auth.js / billing.js usan.
   ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

/* The HTML ``hidden`` attribute is the only mechanism the JS uses to
   toggle the entry / calibrating / review / prelude / debate views.
   The user-agent default ``[hidden] { display: none }`` is overridden
   by any author rule that sets ``display`` on the same element at
   equal specificity (e.g. ``.calibrating-view { display: flex }``).
   Force ``hidden`` to win across the SPA so toggling ``el.hidden`` is
   guaranteed to remove the element from the layout — without this,
   the calibrating spinner and the empty debate placeholders stay
   painted on top of the review view and the user thinks the
   Calibrador is still running, never clicking "Empezar el debate"
   (regression caught 2026-05-01). */
[hidden] { display: none !important; }

:root {
  /* Backgrounds */
  --bg:        #0a0b0f;
  --bg-elev:   #12141b;
  --bg-elev-2: #1a1d26;
  --bg-elev-3: #232734;
  --border:    #262a36;
  --border-strong: #3a3f4f;

  /* Text */
  --text:        #ecedf1;
  --text-muted:  #8b8f9c;
  --text-dim:    #5b5f6c;

  /* Accents (legacy names retained for backwards-compat) */
  --accent:        #6dd3ff;
  --accent-warm:   #ffb86b;
  --accent-danger: #ff6b6b;
  --accent-positive: #6dffa3;

  /* Per-agent identity */
  --adversary:  #ff6b6b;
  --pragmatist: #ffb86b;
  --skeptic:    #6dd3ff;
  --strategist: #6dffa3;

  /* Verdict colors map onto agents (legacy names retained) */
  --verdict-seguir:    var(--strategist);
  --verdict-pivotar:   var(--pragmatist);
  --verdict-pausar:    var(--skeptic);
  --verdict-descartar: var(--adversary);

  /* Type */
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;

  /* Shadow */
  --shadow-pop: 0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 40px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}

button { font: inherit; cursor: pointer; }
textarea, select, input { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   BRAND + TOPBAR + FOOTER
   ============================================================ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.005em;
}
.brand-mark {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 60%), var(--bg-elev-2);
  box-shadow: 0 0 0 1px var(--border-strong), 0 0 18px -6px var(--accent);
  position: relative;
  /* Suppress any text content (e.g. "●" from old markup) */
  color: transparent;
  font-size: 0;
}
.brand-mark::after {
  content: '';
  position: absolute; inset: 6px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
}
.brand-name { font-feature-settings: 'ss01'; }
.brand[href]:hover .brand-name { color: var(--accent); transition: color 0.15s ease; }

/* Inline "← Inicio" link in the topbar — visible on every debate
   phase so the user can always escape back to /home.html. Stays
   subtle: same baseline as the meta column, distinct only on hover. */
.back-home-link {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  margin-left: 14px;
}
.back-home-link:hover {
  color: var(--text);
  border-color: var(--border);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(8px);
}
.topbar-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.user-email {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}
.user-sep { color: var(--text-dim); }

.tier-chip {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12px;
  font-family: var(--font-mono);
  text-decoration: none;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color .15s ease;
}
.tier-chip:hover { border-color: var(--accent); text-decoration: none; }
.tier-chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-positive);
  box-shadow: 0 0 8px var(--accent-positive);
}
.tier-chip.over-quota { border-color: var(--accent-danger); color: var(--accent-danger); }
.tier-chip.over-quota::before { background: var(--accent-danger); box-shadow: 0 0 8px var(--accent-danger); }

.logout-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: color .15s, border-color .15s;
}
.logout-btn:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; }

.app-footer, .legal-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 32px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.app-footer a, .legal-footer a {
  color: var(--text-muted);
  text-decoration: none;
}
.app-footer a:hover, .legal-footer a:hover { color: var(--text); }
.app-footer .ai-disclaimer { max-width: 760px; text-transform: none; letter-spacing: 0.02em; }

/* Dev-mode preprod marker */
.brand-mode {
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent-warm);
  border-radius: 3px;
  vertical-align: middle;
}
.dev-link {
  color: var(--accent-warm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

/* ============================================================
   LANDING (pública)
   ============================================================ */

.landing {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 32px 40px;
}
.landing-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  padding-bottom: 80px;
}
.landing-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.landing-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--text-muted);
}
.landing-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.landing-title em { font-style: italic; color: var(--accent); font-weight: 500; }
.landing-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 36px;
  max-width: 520px;
  text-wrap: pretty;
}
.landing-cta { display: flex; gap: 16px; align-items: center; }

.btn-primary {
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: var(--r-md);
  padding: 14px 22px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .15s, box-shadow .15s;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,255,255,0.08);
  text-decoration: none;
}
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 13px 20px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s;
}
.btn-secondary:hover { border-color: var(--text); text-decoration: none; }

.hero-diagram {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  justify-self: end;
  width: 100%;
}
.hero-diagram svg { width: 100%; height: 100%; overflow: visible; }

.frameworks {
  border-top: 1px solid var(--border);
  padding: 80px 0;
}
.section-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  margin-bottom: 48px;
  align-items: baseline;
}
.section-header h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 640px;
}
.section-header h2 em { font-style: italic; color: var(--text-muted); }

.label-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

.framework-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.framework-cell {
  background: var(--bg);
  padding: 32px;
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .2s ease;
}
.framework-cell:hover { background: var(--bg-elev); }
.framework-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 2px;
  background: var(--agent-color, var(--accent));
}
.framework-cell[data-agent="adversary"]  { --agent-color: var(--adversary); }
.framework-cell[data-agent="pragmatist"] { --agent-color: var(--pragmatist); }
.framework-cell[data-agent="skeptic"]    { --agent-color: var(--skeptic); }
.framework-cell[data-agent="strategist"] { --agent-color: var(--strategist); }

.framework-cell .agent-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.framework-cell .agent-meta .num { color: var(--agent-color); font-weight: 500; }
/* Sprint 07: replaced the second .agent-meta column ("Crítico" /
   "Operativo" / "Analítico" / "Comparativo" — generic role tags) with
   the agent's identifying glyph from the in-app vocabulary so the
   landing's framework grid carries the same visual marks the user
   sees in the follow-up dock. Sized larger and tinted with
   --agent-color to balance the mono ".num" on the left. */
.framework-cell .agent-meta .glyph {
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--agent-color);
  letter-spacing: 0;
  text-transform: none;
}
.framework-cell .agent-name {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.framework-cell .agent-name em { font-style: italic; color: var(--agent-color); }
.framework-cell .agent-desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.framework-cell .agent-question {
  margin: auto 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  border-left: 2px solid var(--agent-color);
  padding-left: 12px;
}

.how-strip {
  border-top: 1px solid var(--border);
  padding: 64px 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 32px;
  align-items: start;
}
.how-step { display: flex; flex-direction: column; gap: 12px; }
.how-arrow {
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--text-dim);
  align-self: center;
  padding-top: 18px;
  letter-spacing: 0;
  user-select: none;
}
.how-step .step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.how-step h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}
.how-step p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }

/* ============================================================
   APP LAYOUT — used by index/billing/legal
   ============================================================ */

.layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

/* ============================================================
   FORM (deliberation)  — replaces .form-view / .form-card
   ============================================================ */

.form-view { display: block; }

.form-card,
.deliberation-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}

.form-header { margin-bottom: 40px; }
.form-header h1,
.form-card h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 12px 0 16px;
  text-wrap: balance;
}
.form-header h1 em, .form-card h1 em { font-style: italic; color: var(--accent); }
.subtitle {
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 16px;
  max-width: 560px;
  line-height: 1.55;
}

.form-stack { display: grid; gap: 20px; }

.field {
  display: block;
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px 14px;
  transition: border-color .15s, background .15s;
  margin-bottom: 0;
}
.field:focus-within { border-color: var(--border-strong); background: var(--bg-elev-2); }
.field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.field-label {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: block;
}
.field-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.field-hint {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 10px;
}
.field textarea, .field input {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text);
  resize: vertical;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  min-height: 60px;
}
.field textarea:focus, .field input:focus { outline: none; }
.field textarea::placeholder { color: var(--text-dim); font-style: italic; }
.field-counter {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.field-counter.under, .field-counter[data-under="true"] { color: var(--accent-warm); }

.tier-row {
  margin-top: 12px;
  padding: 16px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tier-row .tier-desc { font-size: 13px; color: var(--text-muted); }
.tier-row strong { color: var(--text); font-weight: 500; }

.tier-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}
.tier-toggle select {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  color: var(--text);
}

/* Segmented control (CSS-only; works with the existing <select name="tier">
   when wrapped in label.tier-toggle, but we add segments for the new look) */
.tier-segments {
  display: inline-flex;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px;
}
.tier-segments label {
  padding: 7px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 100px;
  transition: color .15s, background .15s;
}
.tier-segments label:has(input:checked) { color: var(--bg); background: var(--text); }
.tier-segments input { display: none; }

.form-controls, .submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}
.form-hint, .submit-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 0;
  text-transform: uppercase;
}

button#submit-btn,
.actions button,
.plan-actions button {
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: var(--r-md);
  padding: 14px 24px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  letter-spacing: 0;
  transition: transform .15s, opacity .15s, box-shadow .15s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
button#submit-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,255,255,0.08);
}
button#submit-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.actions button.ghost,
.plan-actions button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

/* ============================================================
   DEBATE VIEW
   ============================================================ */

.debate-view {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 32px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ============================================================
   Progress timeline (Sprint 06 — replaces the legacy 3-pill bar)

   3 numbered serif nodes (I / II / III) connected by a 1px rail.
   States are driven from app.js setProgress():
     • default     → hollow node, dim label
     • .active     → orange node with pulsing glow halo
     • .done       → green filled node with ✓
   ============================================================ */
.debate-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding: 8px 0 24px;
  position: relative;
  margin: 0 0 32px;
  align-items: stretch;
}
/* The horizontal rail behind the nodes. Centered between the
   first and last node (each in the middle of its grid cell). */
.debate-progress::before {
  content: "";
  position: absolute;
  left: calc(100% / 6);
  right: calc(100% / 6);
  top: 38px;            /* aligns to vertical center of the 44px node */
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.progress-step {
  /* Reset the legacy chip layout (padding / border-right / bg). */
  padding: 0 12px;
  border-right: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto;
  column-gap: 14px;
  align-items: start;
  position: relative;
  z-index: 1;
  /* Reset legacy text-transform/letter-spacing inherited cascade */
  letter-spacing: normal;
}
.progress-step:last-child { border-right: none; }
/* The serif numeral acts as the visual node on the rail. */
.progress-step .ps-num {
  grid-column: 1;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  font-feature-settings: 'lnum' 1;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  letter-spacing: -0.02em;
  transition: color .2s, border-color .2s, background .2s,
              box-shadow .2s;
}
.progress-step .ps-text {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
  min-width: 0;
}
.progress-step .ps-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color .2s;
}
.progress-step .ps-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: normal;     /* override inherited 0.12em from legacy */
  text-transform: none;       /* override inherited uppercase */
  color: var(--text-dim);
  transition: color .2s;
  /* truncate to 2 lines on narrow viewports */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── ACTIVE ──────────────────────────────────────────────────── */
.progress-step.active {
  /* Override legacy `.progress-step.active { background: var(--bg-elev-2) }`
     so the cell isn't painted edge-to-edge. The pulsing halo on the
     node carries the active state on its own. */
  background: transparent;
  color: inherit;             /* override legacy color rule */
}
.progress-step.active .ps-num {
  color: var(--accent-warm);
  border-color: var(--accent-warm);
  background: var(--bg-elev);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-warm) 12%, transparent);
  animation: progress-pulse 1.8s ease-in-out infinite;
}
.progress-step.active .ps-label { color: var(--accent-warm); }
.progress-step.active .ps-sub   { color: var(--text); }

@keyframes progress-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-warm) 12%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent-warm) 18%, transparent); }
}

/* ── DONE ────────────────────────────────────────────────────── */
.progress-step.done {
  color: inherit;             /* override legacy `color: var(--accent-positive)` */
}
.progress-step.done .ps-num {
  /* Replace numeral with ✓ glyph by hiding the I/II/III text and
     painting the check via ::after — keeps the markup stable. */
  color: var(--bg);
  background: var(--accent-positive);
  border-color: var(--accent-positive);
  font-size: 0;
  position: relative;
}
.progress-step.done .ps-num::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--bg);
}
.progress-step.done .ps-label { color: var(--text-muted); }
.progress-step.done .ps-sub   { color: var(--text-muted); }

/* Mobile: stack nodes vertically with a vertical rail to the left. */
@media (max-width: 720px) {
  .debate-progress {
    grid-template-columns: 1fr;
    padding: 8px 0 16px;
  }
  .debate-progress::before {
    left: 22px;     /* center of the 44px node column */
    right: auto;
    top: 30px;
    bottom: 30px;
    width: 1px;
    height: auto;
  }
  .progress-step {
    padding: 14px 0;
    border-bottom: 0;     /* override legacy mobile rule */
  }
  .progress-step:last-child { border-bottom: 0; }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Status pill (legacy; replaced by the progress bar in normal flow,
   but un-hidden in error mode so backend failures actually surface
   to the user instead of leaving the UI looking frozen). */
.status-pill {
  display: none;
}
.status-pill.error {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
  padding: 12px 16px;
  background: color-mix(in oklab, var(--accent-danger) 12%, var(--bg-elev));
  border: 1px solid var(--accent-danger);
  border-radius: var(--r-md);
  color: var(--accent-danger);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}
.status-pill.error::before {
  content: "⚠";
  flex-shrink: 0;
}

/* Calibrator fallback banner — shown above the mode tabs when
   /api/calibrate fails and the user is dropped into Deep mode with
   their text preserved. Less alarming than .status-pill.error on
   purpose: the situation is recoverable (they can retry or just
   complete Deep). */
.calibrate-fallback-notice {
  margin: 0 0 16px 0;
  padding: 10px 14px;
  background: color-mix(in oklab, var(--accent-warning, #d4a017) 10%, var(--bg-elev));
  border: 1px solid color-mix(in oklab, var(--accent-warning, #d4a017) 60%, transparent);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}
.calibrate-fallback-notice::before {
  content: "↩ ";
  margin-right: 4px;
}

/* Dev-only retry button. Plain on purpose — this is debug, not a
   customer feature. Only rendered when the boot probe says
   is_admin && dev_mode AND an error event carries a run_id.
   Placed as the first child of #debate-view so it sits above the
   progress bar — outside ``.debate-progress``'s grid-with-overflow
   to avoid being clipped. */
.dev-retry-btn {
  display: block;
  align-self: flex-start;
  margin: 0 0 16px 0;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  background: color-mix(in oklab, var(--accent-warning, #d4a017) 12%, var(--bg-elev));
  border: 1px dashed color-mix(in oklab, var(--accent-warning, #d4a017) 70%, transparent);
  border-radius: var(--r-sm, 4px);
  cursor: pointer;
}
.dev-retry-btn::before { content: "↻ "; margin-right: 4px; }
.dev-retry-btn:hover { border-style: solid; }
.dev-retry-btn:disabled { opacity: 0.6; cursor: progress; }

/* Recap (collapsible) */
.recap {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 0;
}
.recap.recap-grid {
  /* When not collapsible — fallback for app.js writing flat children */
  padding: 18px 22px;
}
.recap.recap-grid h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  margin: 16px 0 4px;
}
.recap.recap-grid h3:first-child { margin-top: 0; }
.recap.recap-grid p {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

/* ============================================================
   PHASE-VIEW WRAPPERS + HEADERS + INTERMEDIATE CTAs
   sprint 2026-05-03
   ============================================================ */

.phase-view {
  margin-top: 28px;
}
.phase-view + .phase-view {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.phase-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 22px;
}
.phase-head .phase-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.phase-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.phase-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.phase-blurb {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  max-width: 60ch;
}

/* Intermediate CTA bar — "Otra deliberación" + "Continue". */
.phase-cta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}

/* Ghost button — secondary CTA next to btn-primary, lower visual
   weight so it doesn't compete with the main "continue" action. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-elev);
}
.btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Round heading with rule */
.round-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.round-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.round-heading .round-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  text-transform: none;
}

/* R1 grid */
.r1-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.r2-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.r2-stack::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 30px;
  bottom: 30px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border-strong) 10%, var(--border-strong) 90%, transparent);
}
.r2-stack .agent-card {
  margin-left: 38px;
  position: relative;
}
.r2-stack .agent-card::after {
  content: '';
  position: absolute;
  left: -25px;
  top: 28px;
  width: 18px;
  height: 1px;
  background: var(--border-strong);
}
.r2-stack .agent-card .order-bullet,
.r2-stack .agent-card[data-agent]::before {
  /* Agent-colored bullet on the timeline (replaces top accent stripe in R2) */
}
.r2-stack .agent-card[data-round="2"] {
  /* override the top-stripe ::before for R2 cards */
}

/* R2 verbatim-quote callout — links the R2 reply to the R1 source.
 * Sprint 2026-05-03 rewrite: PM flagged the old 10px mono "RESPONDE A
 * …" prefix as invisible. Now a glyph row reads at a glance: reply
 * agent → arrow → source agent, with the verbatim quote in legible
 * serif italic below. */
.r2-quote {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--agent-color) 6%, var(--bg-elev));
  border-left: 3px solid color-mix(in srgb, var(--agent-color) 60%, var(--border));
  border-radius: 0 8px 8px 0;
}
.r2-quote-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.r2-quote-agent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Each badge inherits the agent-color cascade via [data-agent]
     selectors that already exist for .agent-card; the glyphs below
     pick that up via currentColor. */
}
.r2-quote-agent[data-agent="adversary"]  { --agent-color: var(--adversary); }
.r2-quote-agent[data-agent="pragmatist"] { --agent-color: var(--pragmatist); }
.r2-quote-agent[data-agent="skeptic"]    { --agent-color: var(--skeptic); }
.r2-quote-agent[data-agent="strategist"] { --agent-color: var(--strategist); }
.r2-quote-glyph {
  width: 26px;
  height: 26px;
  color: var(--agent-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.r2-quote-glyph svg {
  width: 100%;
  height: 100%;
}
.r2-quote-agent-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
  color: var(--agent-color);
  letter-spacing: -0.005em;
}
.r2-quote-interaction {
  width: 22px;
  height: 22px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.r2-quote-interaction svg { width: 100%; height: 100%; }
.r2-quote-source-link {
  text-decoration: none;
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: -6px;
  transition: background 0.15s ease;
}
.r2-quote-source-link:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.r2-quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  padding-left: 4px;
}

/* Agent cards */
.agent-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  transition: opacity .25s, border-color .25s;
}
.agent-card[data-agent="adversary"]  { --agent-color: var(--adversary); }
.agent-card[data-agent="pragmatist"] { --agent-color: var(--pragmatist); }
.agent-card[data-agent="skeptic"]    { --agent-color: var(--skeptic); }
.agent-card[data-agent="strategist"] { --agent-color: var(--strategist); }

.agent-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--agent-color);
  opacity: 0;
  transition: opacity .3s ease;
}
.agent-card.complete::before { opacity: 1; }

/* In R2, replace top stripe with timeline bullet on the left */
.r2-stack .agent-card.complete::before {
  opacity: 0;
}
.r2-stack .agent-card.complete::after {
  /* Keep the connector line. Add bullet via separate element (.order-bullet) */
}
.r2-stack .agent-card .order-bullet {
  position: absolute;
  left: -32px;
  top: 26px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--agent-color);
  z-index: 1;
}

.agent-card.placeholder {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  opacity: 0.5;
  gap: 6px;
}
.agent-card.placeholder::before {
  /* Disable the legacy `content: attr(data-agent)` from old CSS */
  content: '';
  background: var(--agent-color);
  opacity: 0.3;
}
.agent-card.placeholder .ph-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--agent-color);
  opacity: 0.85;
}
.agent-card.placeholder .ph-tagline {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 4px 0 8px;
  max-width: 32ch;
}
.agent-card.placeholder .ph-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.agent-card.placeholder.streaming { opacity: 0.85; }
.agent-card.placeholder.streaming .ph-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--agent-color);
  animation: pulse-dot 1.2s infinite ease-in-out;
}

/* Sequential reveal of the R1 placeholders. Backend runs the four
 * agents in parallel; this is purely visual scaffolding so the user
 * sees the cards arrive one by one over ~1.5s instead of as a single
 * "flood". --reveal-i (set inline by app.js) is 0/1/2/3. */
.agent-card.reveal-pending {
  opacity: 0;
  transform: translateY(8px);
  animation: bs-card-reveal 0.55s ease-out forwards;
  animation-delay: calc(var(--reveal-i, 0) * 350ms);
}
@keyframes bs-card-reveal {
  to { opacity: 0.85; transform: translateY(0); }
}
.agent-card.placeholder:not(.streaming) .ph-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
}

.agent-card.complete { opacity: 1; }
.agent-card.complete[data-round="2"] {
  border-color: color-mix(in srgb, var(--agent-color) 40%, var(--border));
  background: color-mix(in srgb, var(--agent-color) 4%, var(--bg-elev));
}

.agent-card .agent-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.agent-card .agent-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--agent-color);
  letter-spacing: -0.01em;
}
.agent-card .agent-framework {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.agent-card .agent-answer {
  white-space: pre-wrap;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}

/* Arbiter monumental */
.arbiter-section { margin-top: 16px; }
.arbiter-card {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
      color-mix(in srgb, var(--verdict-color, var(--accent)) 15%, transparent),
      transparent 70%),
    var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.arbiter-card[data-verdict="SEGUIR"]    { --verdict-color: var(--verdict-seguir); }
.arbiter-card[data-verdict="PIVOTAR"]   { --verdict-color: var(--verdict-pivotar); }
.arbiter-card[data-verdict="PAUSAR"]    { --verdict-color: var(--verdict-pausar); }
.arbiter-card[data-verdict="DESCARTAR"] { --verdict-color: var(--verdict-descartar); }
.arbiter-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--verdict-color, var(--accent));
}
.arbiter-card .arbiter-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.arbiter-card .arbiter-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--verdict-color);
}

/* Verdict — monumental serif (no longer a 13px pill) */
.verdict-pill {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 88px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--verdict-color, var(--accent));
  margin: 0;
  /* Reset legacy pill chrome */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  display: block;
}
/* legacy color-by-class still works (set on the pill element by app.js) */
.verdict-pill.SEGUIR    { color: var(--verdict-seguir); }
.verdict-pill.PIVOTAR   { color: var(--verdict-pivotar); }
.verdict-pill.PAUSAR    { color: var(--verdict-pausar); }
.verdict-pill.DESCARTAR { color: var(--verdict-descartar); }

.arbiter-justification {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: var(--text);
  max-width: 720px;
  text-wrap: pretty;
  border-left: 0;
  padding-left: 0;
}

/* Verdict glossary — collapsible inline definition. The "¿Qué
 * significa este veredicto?" pattern lets a non-technical user
 * de-jargon the big SEGUIR/PIVOTAR/PAUSAR/DESCARTAR word without
 * cluttering the verdict's monumental presence. */
.verdict-glossary {
  margin: 4px 0 18px;
  max-width: 720px;
}
.verdict-glossary summary {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verdict-color, var(--text-dim));
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.verdict-glossary summary::-webkit-details-marker { display: none; }
.verdict-glossary summary::before {
  content: '+';
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  font-family: var(--font-mono);
  transition: transform .2s ease;
}
.verdict-glossary[open] summary::before {
  content: '−';
  transform: rotate(0);
}
.verdict-glossary p {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.arbiter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.arbiter-card h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin: 0 0 14px;
}
.arbiter-card ul,
.arbiter-card ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.arbiter-card li {
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 12px;
  padding-left: 24px;
  position: relative;
}
.arbiter-card ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  background: var(--verdict-color, var(--accent));
  opacity: 0.5;
  transform: rotate(45deg);
}
.arbiter-card ol { counter-reset: step; }
.arbiter-card ol li { counter-increment: step; }
.arbiter-card ol li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--verdict-color, var(--accent));
  width: 18px; height: 18px;
  border: 1px solid var(--verdict-color, var(--accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Survey */
.survey-section {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}
.survey-preamble {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.survey-question {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
}
.survey-skip {
  margin-top: 12px;
  display: inline-block;
  font-size: 12px;
}
.survey-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.survey-btn {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.survey-btn:hover { border-color: var(--border-strong); }
.survey-btn.selected { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.survey-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.survey-thanks {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.actions { margin-top: 24px; display: flex; gap: 12px; justify-content: flex-end; }

/* ============================================================
   AUTH (login / signup)
   ============================================================ */

.auth-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  padding: 40px 20px;
}
.auth-body > main.auth-layout { flex: 0 1 auto; }
.auth-body > .legal-footer,
.auth-body > footer {
  width: 100%;
  max-width: 460px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding: 18px 0 0;
  justify-content: space-between;
}
.auth-layout { width: 100%; max-width: 460px; padding: 24px; }
.auth-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-card .brand { margin-bottom: 8px; }
.auth-card h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.auth-card h1 em { font-style: italic; color: var(--accent); }
.auth-card .field { padding: 14px 16px 12px; }
.auth-card button[type="submit"] {
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: var(--r-md);
  padding: 12px 20px;
  font-weight: 600;
  margin-top: 6px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.auth-card button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,255,255,0.08);
}
.auth-error { margin: 0; color: var(--accent-danger); font-size: 13px; }
.auth-alt { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; }
.auth-alt a { color: var(--accent); }

.legal-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 4px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.legal-acceptance input[type="checkbox"] { margin-top: 3px; }
.legal-acceptance a { color: var(--accent); }

/* ============================================================
   BILLING
   ============================================================ */

.billing-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}
.billing-header { margin-bottom: 36px; }
.billing-header h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -0.02em;
  margin: 6px 0 8px;
}
.billing-header h1 em { font-style: italic; color: var(--accent-positive); }
.billing-header p { margin: 0; font-size: 16px; color: var(--text-muted); }

.plan-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.plan-card.pro::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-positive);
}
.plan-name {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.plan-name em { font-style: italic; color: var(--accent-positive); }
.plan-name .plan-name-free em { color: var(--text-muted); }
.plan-desc {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 480px;
}

.usage-block, #usage-block {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin: 0 0 20px;
}
.usage-block h3, #usage-block h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin: 0 0 8px;
}
.usage-block p, #usage-block p {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.usage-bar {
  height: 6px;
  background: var(--bg);
  border-radius: 100px;
  overflow: hidden;
  margin-top: 8px;
}
.usage-fill {
  height: 100%;
  background: var(--accent);
  transition: width .3s, background .3s;
}
.usage-fill.over { background: var(--accent-danger); }
.usage-fill.unlimited {
  background: linear-gradient(90deg, var(--accent), var(--accent-positive), var(--accent));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  from { background-position: 0% 0; }
  to   { background-position: -200% 0; }
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}
.features-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}
.features-list li::before {
  content: '✓';
  color: var(--accent-positive);
  font-weight: 700;
  font-size: 13px;
  margin-top: 1px;
}
.features-list li.disabled { color: var(--text-dim); }
.features-list li.disabled::before { content: '×'; color: var(--text-dim); }

.plan-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-actions button { padding: 11px 18px; font-size: 14px; }

.danger-zone {
  margin-top: 32px;
  padding: 20px 24px;
  border: 1px solid color-mix(in srgb, var(--accent-danger) 30%, var(--border));
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent-danger) 4%, var(--bg-elev));
}
.danger-zone h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-danger);
  margin: 0 0 10px;
  font-weight: 500;
}
.danger-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.danger-row p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
}
.danger-row strong { color: var(--text); font-weight: 500; }
#delete-account-btn,
.btn-danger {
  background: transparent;
  color: var(--accent-danger);
  border: 1px solid color-mix(in srgb, var(--accent-danger) 50%, var(--border));
  border-radius: var(--r-md);
  padding: 10px 16px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}

/* ============================================================
   LEGAL pages (untouched API; refined chrome)
   ============================================================ */

.legal-content {
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px 44px 36px;
  line-height: 1.7;
}
.legal-content h1 {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.legal-content h2 {
  margin: 28px 0 8px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.legal-content p, .legal-content ul { margin: 0 0 12px; }
.legal-content ul { padding-left: 22px; }
.legal-content li { margin-bottom: 6px; }
.legal-content code {
  background: var(--bg-elev-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.legal-meta {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 18px !important;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.legal-disclaimer {
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--bg-elev-2);
  border-left: 3px solid var(--accent-warm);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-muted);
}
.legal-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.legal-table th, .legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.legal-table thead th {
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  font-family: var(--font-mono);
}

/* ============================================================
   DEV panel (preprod only) — keep API
   ============================================================ */

.dev-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.dev-row > strong {
  min-width: 220px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.dev-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.dev-field span { color: var(--text-muted); font-family: var(--font-mono); }
.dev-field input, .dev-field select {
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: var(--r-sm);
}
.dev-pre {
  background: var(--bg-elev-2);
  padding: 14px;
  border-radius: var(--r-sm);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .landing-hero { grid-template-columns: 1fr; gap: 40px; }
  .hero-diagram { max-width: 320px; justify-self: center; }
  .section-header { grid-template-columns: 1fr; gap: 16px; }
  .section-header h2 { font-size: 28px; }
  .landing-title { font-size: 44px; }
  .framework-grid { grid-template-columns: 1fr; }
  .how-strip { grid-template-columns: 1fr; gap: 28px; }
  .how-arrow { display: none; }
  .arbiter-grid { grid-template-columns: 1fr; gap: 24px; }
  .features-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar { padding: 12px 18px; }
  .layout, .landing, .deliberation-page, .billing-page, .debate-view {
    padding-left: 18px; padding-right: 18px;
  }
  .form-card, .deliberation-page { padding: 32px 18px 60px; }
  .form-header h1, .form-card h1, .billing-header h1 { font-size: 32px; }
  .landing-title { font-size: 36px; }
  .verdict-pill { font-size: 60px; }
  .arbiter-justification { font-size: 18px; }
  .arbiter-card { padding: 28px 22px; }
  .r1-grid { grid-template-columns: 1fr; }
  /* Sprint 06: progress-step mobile layout is now handled by its own
     `@media (max-width: 720px)` block above, which uses a vertical
     rail. The legacy `.debate-progress { grid-template-columns: 1fr }`
     + per-cell bottom-border rules that lived here are now removed. */
  .form-controls, .submit-row, .tier-row, .danger-row {
    flex-direction: column;
    align-items: stretch;
  }
  .submit-row { gap: 12px; }
  button#submit-btn { width: 100%; justify-content: center; }
  .topbar-meta { gap: 8px; flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════
   REDISEÑO A+C — Entry view, Quick mode, Calibrator, Review,
   Follow-up dock. Appended; does not modify earlier rules.
   ════════════════════════════════════════════════════════════ */

.entry-view {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 32px 80px;
  animation: bs-fadeIn .3s ease;
}
@keyframes bs-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.entry-card { display: flex; flex-direction: column; gap: 28px; }
.entry-header h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 14px 0 14px;
  text-wrap: balance;
}
.entry-header h1 em { font-style: italic; color: var(--accent); }
.entry-header .subtitle {
  font-size: 16.5px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0;
  line-height: 1.55;
}

/* ── Mode tabs ─────────────────────────────────────────────── */
.mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mode-tab {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: 14px;
  transition: border-color .12s, background .12s, color .12s;
  color: var(--text-muted);
}
.mode-tab:hover { border-color: var(--border-strong); }
.mode-tab.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev));
  color: var(--text);
}
.mt-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--text-dim);
}
.mode-tab.active .mt-num { color: var(--accent); }
.mt-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
}
.mt-desc {
  font-size: 12.5px;
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--text-dim);
}

/* ── Quick area ────────────────────────────────────────────── */
.quick-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px;
}
.quick-area {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  resize: vertical;
  min-height: 220px;
  padding: 22px 24px;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.quick-area::placeholder {
  color: var(--text-dim);
  font-style: italic;
  transition: opacity 240ms ease;
}
.quick-area.ph-fading::placeholder { opacity: 0; }
.quick-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  gap: 12px;
}
.char-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* btn-primary overrides for the new state */
.btn-primary:disabled {
  background: var(--bg-elev-3);
  color: var(--text-dim);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ── Mode panels ───────────────────────────────────────────── */
.mode-panel { animation: bs-fadeIn .25s ease; }

/* ── Calibrating view ──────────────────────────────────────── */
.calibrating-view {
  max-width: 720px;
  margin: 80px auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: bs-fadeIn .3s ease;
}
.cal-input {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
}
.cal-input p {
  margin: 8px 0 0;
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
}
.cal-process { text-align: center; padding: 12px 0; }
.cal-process h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.015em;
  margin: 18px 0 24px;
}
.cal-process h2 em { font-style: italic; color: var(--accent); }
.cal-spinner { display: inline-flex; gap: 8px; }
.cal-spinner span {
  width: 10px; height: 10px;
  border-radius: 50%;
  animation: bs-cal-pulse 1.4s infinite ease-in-out;
}
.cal-spinner span:nth-child(1) { animation-delay: 0s;    background: var(--adversary); }
.cal-spinner span:nth-child(2) { animation-delay: 0.15s; background: var(--pragmatist); }
.cal-spinner span:nth-child(3) { animation-delay: 0.30s; background: var(--skeptic); }
.cal-spinner span:nth-child(4) { animation-delay: 0.45s; background: var(--strategist); }
@keyframes bs-cal-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.cal-steps {
  list-style: none;
  padding: 0;
  margin: 24px auto 0;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.cal-steps li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 22px;
  position: relative;
  letter-spacing: 0.02em;
}
.cal-steps li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 8px; height: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}
.cal-steps li.active::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ── Prelude view (pre-debate primer) ──────────────────────── */
.prelude-view {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 32px 80px;
  animation: bs-fadeIn .3s ease;
}
.prelude-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 36px 28px;
}
.prelude-card h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.015em;
  margin: 8px 0 28px;
}
.prelude-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.prelude-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
}
.prelude-step .ps-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  margin-top: 1px;
}
.prelude-step .ps-body strong {
  display: inline;
  font-weight: 600;
  color: var(--text);
  margin-right: 10px;
}
.prelude-step .ps-time {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  margin-right: 6px;
}
.prelude-step .ps-tier {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prelude-step .ps-body p {
  margin: 6px 0 0;
  color: var(--text-muted);
  line-height: 1.55;
  font-size: 15px;
}
.prelude-step .ps-body em {
  color: var(--text);
  font-style: normal;
  font-weight: 500;
}
.prelude-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.prelude-auto {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

/* ── Review view ──────────────────────────────────────────── */
.review-view {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 32px 80px;
  animation: bs-fadeIn .3s ease;
}
.review-header { margin-bottom: 28px; }
.review-header h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
  text-wrap: balance;
}
.review-header h1 em { font-style: italic; color: var(--accent); }
.review-intro {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 640px;
}
.ghost-link {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 13px;
  padding: 4px 0;
  margin-bottom: 12px;
}
.ghost-link:hover { color: var(--text); }

.review-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.extracted-field {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 18px;
}
.extracted-field.missing {
  border-left-color: var(--accent-warm);
  background: color-mix(in srgb, var(--accent-warm) 5%, var(--bg-elev));
}
.ef-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.ef-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.extracted-field.missing .ef-num { color: var(--accent-warm); }
.ef-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.ef-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--accent-warm);
  color: var(--bg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.extracted-field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  resize: vertical;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  padding: 0;
  min-height: 44px;
}
.extracted-field textarea::placeholder { color: var(--text-dim); font-style: italic; }

.follow-up-q {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 24px;
}
.follow-q-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--text);
  margin: 8px 0 16px;
  line-height: 1.4;
}
.follow-q-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  resize: vertical;
  outline: none;
  min-height: 64px;
}
.follow-q-input:focus { border-color: var(--accent); }

.review-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Follow-up dock ───────────────────────────────────────── */
.followup {
  margin-top: 40px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.followup-head { padding: 22px 26px 4px; }
.followup-head h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  margin: 6px 0 14px;
  letter-spacing: -0.01em;
}
.followup-tabs {
  display: flex;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.followup-tab {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color .12s, border-color .12s;
}
.followup-tab:hover { color: var(--text); }
.followup-tab.active {
  color: var(--agent-c);
  border-bottom-color: var(--agent-c);
}
.followup-chat {
  min-height: 180px;
  max-height: 360px;
  overflow-y: auto;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
}
.followup-empty { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; }
.followup-empty p { margin: 0 0 8px; }
.followup-empty p em { font-style: italic; color: var(--text); }
.followup-empty ul { margin: 0; padding: 0; list-style: none; }
.followup-empty li {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--border);
  margin-bottom: 4px;
}
.fu-bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.fu-agent {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--agent-c);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.fu-user {
  background: var(--text);
  color: var(--bg);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.fu-who {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--agent-c);
  margin-bottom: 4px;
}
.fu-text { white-space: pre-wrap; }
.thinking-dots { display: inline-flex; gap: 5px; align-items: center; }
.thinking-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--agent-c, var(--accent));
  animation: bs-cal-pulse 1.4s infinite ease-in-out;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
.followup-input {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  align-items: flex-end;
}
.followup-input textarea {
  flex: 1;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  resize: vertical;
  outline: none;
  min-height: 44px;
}
.followup-input textarea:focus { border-color: var(--accent); }
.kbd-hint {
  opacity: 0.55;
  font-size: 11px;
  font-family: var(--font-mono);
  margin-left: 4px;
}

/* ── Responsive overrides for new sections ────────────────── */
@media (max-width: 720px) {
  .entry-view, .review-view { padding: 32px 18px 60px; }
  .entry-header h1 { font-size: 32px; }
  .review-header h1 { font-size: 26px; }
  .mode-tabs { grid-template-columns: 1fr; }
  .calibrating-view { margin: 40px auto; padding: 0 18px; }
  .quick-area { font-size: 18px; padding: 18px 16px; }
}

/* ════════════════════════════════════════════════════════════
   SPRINT 01 — Glyphs · Checklist · Feedback CTAs · Feedback page
   Added 2026-05-03 (post-iter12, pre-beta).
   No DOM contract changes. All decoration via existing IDs.
   ════════════════════════════════════════════════════════════ */

/* ── 1.1  Agent glyphs ────────────────────────────────────────
   A small SVG mark per agent, rendered inside a circular badge.
   Used both inside placeholder cards (centered, large) and as a
   corner-signature when the card is complete (top-right of the
   .agent-header). The colour comes from the per-agent
   --agent-color cascade already set on .agent-card[data-agent]. */
.agent-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--agent-color, var(--accent));
  color: var(--agent-color, var(--accent));
  flex-shrink: 0;
  background: color-mix(in srgb, var(--agent-color, var(--accent)) 6%, transparent);
}
.agent-glyph svg { display: block; }

/* Big centered glyph in placeholder cards (visible while waiting) */
.agent-card.placeholder .agent-glyph.placeholder-glyph {
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  align-self: flex-start;
  background: color-mix(in srgb, var(--agent-color) 8%, transparent);
}
.agent-card.placeholder .agent-glyph.placeholder-glyph svg {
  width: 26px; height: 26px;
}

/* Corner signature on completed cards — sits in .agent-header */
.agent-card.complete .agent-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.agent-card.complete .agent-glyph.corner-glyph {
  width: 28px; height: 28px;
  margin-left: auto;
  order: 2;
}
.agent-card.complete .agent-glyph.corner-glyph svg {
  width: 14px; height: 14px;
}
.agent-card.complete .agent-name { order: 0; }
.agent-card.complete .agent-framework { order: 1; }

/* ── 1.2  Next-steps checklist ────────────────────────────────
   The Arbiter's "Próximos tres pasos" gets its own sub-card with
   real checkboxes (purely visual — they don't persist). Replaces
   the plain numbered list inside .arbiter-grid for the
   .next-steps column. Detected temporal windows ("esta semana",
   "el martes", "en 7 días") render as a mono caption beneath. */
.arbiter-grid .next-steps-card {
  background: color-mix(in srgb, var(--verdict-color, var(--accent)) 6%, var(--bg-elev-2));
  border: 1px solid color-mix(in srgb, var(--verdict-color, var(--accent)) 35%, var(--border));
  border-radius: var(--r-md);
  padding: 18px 20px 16px;
  margin: -4px 0 0;
}
.arbiter-grid .next-steps-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  gap: 10px;
}
.arbiter-grid .next-steps-card ol,
.arbiter-grid .next-steps-card ul {
  margin: 0;
  padding: 0;
  list-style: decimal inside;
  counter-reset: none;
}
.arbiter-grid .next-steps-card li {
  padding: 10px 0;
  border-top: 1px dashed var(--border);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
}
.arbiter-grid .next-steps-card li::marker {
  color: var(--verdict-color, var(--accent));
  font-weight: 600;
}
.arbiter-grid .next-steps-card li:first-child { border-top: 0; padding-top: 4px; }

.step-body { display: inline-flex; flex-direction: column; gap: 3px; min-width: 0; vertical-align: top; }
.step-text { display: block; }
.step-when {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── 2.1  Blind-spots card ────────────────────────────────────
   The blind-spots column gets the same card-on-card treatment as
   next-steps, but using --accent-warm so it reads as a warning
   counterpart. Each item has a numbered amber rombo, headline-style
   first sentence, and an optional "fuente" pill that names the
   framework that surfaced the omission (extracted heuristically
   from the leading agent name, if present in the text). */
.arbiter-grid .blind-spots-card {
  background: color-mix(in srgb, var(--accent-warm) 6%, var(--bg-elev-2));
  border: 1px solid color-mix(in srgb, var(--accent-warm) 35%, var(--border));
  border-radius: var(--r-md);
  padding: 18px 20px 16px;
  margin: -4px 0 0;
}
.arbiter-grid .blind-spots-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  gap: 10px;
}
.arbiter-grid .blind-spots-card .alert-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-warm);
  border: 1px solid var(--accent-warm);
  border-radius: 100px;
  padding: 2px 8px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.arbiter-grid .blind-spots-card .alert-pill::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent-warm);
  transform: rotate(45deg);
  display: inline-block;
}
.arbiter-grid .blind-spots-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.arbiter-grid .blind-spots-card li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px dashed var(--border);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}
.arbiter-grid .blind-spots-card li::before { content: none; }
.arbiter-grid .blind-spots-card li:first-child { border-top: 0; padding-top: 4px; }

/* The numbered rombo — amber, hollow, mono digit centered. */
.bs-marker {
  width: 24px; height: 24px;
  background: color-mix(in srgb, var(--accent-warm) 14%, transparent);
  border: 1.5px solid var(--accent-warm);
  transform: rotate(45deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex-shrink: 0;
}
.bs-marker > span {
  transform: rotate(-45deg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-warm);
  line-height: 1;
}

/* Body: the spot text + optional source attribution */
.bs-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bs-text { display: block; }
.bs-text strong {
  /* The first ~6-8 words get bolded as a headline if the spot
     starts with an attributable agent prefix that we strip. */
  font-weight: 600;
  color: var(--text);
}
.bs-source {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 3px 8px 3px 6px;
  border-radius: 100px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.bs-source::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bs-source-color, var(--accent-warm));
}
/* Source-color cascade — uses the same per-agent palette as the
   debate cards, so a "según el Adversario" pill shares its colour
   with the Adversary card up the page. */
.bs-source[data-source="adversary"]  { --bs-source-color: var(--adversary); }
.bs-source[data-source="pragmatist"] { --bs-source-color: var(--pragmatist); }
.bs-source[data-source="skeptic"]    { --bs-source-color: var(--skeptic); }
.bs-source[data-source="strategist"] { --bs-source-color: var(--strategist); }
.bs-source[data-source="arbiter"]    { --bs-source-color: var(--accent); }

/* ── 1.3  Feedback CTA inside the Arbiter card ─────────────────
   Discreet text + button block right under next-steps. */
.arbiter-feedback-cta {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.arbiter-feedback-cta .cta-text {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
  max-width: 520px;
  line-height: 1.5;
}
.arbiter-feedback-cta .cta-text strong {
  color: var(--text);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}
.arbiter-feedback-cta a.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--verdict-color, var(--accent)) 60%, var(--border));
  color: var(--verdict-color, var(--accent));
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.arbiter-feedback-cta a.cta-link:hover {
  background: color-mix(in srgb, var(--verdict-color, var(--accent)) 12%, transparent);
  text-decoration: none;
}
.arbiter-feedback-cta a.cta-link::after {
  content: '→';
  font-family: var(--font-sans);
  letter-spacing: 0;
}

/* ── 1.4  Footer feedback link ────────────────────────────────
   Visual parity with existing footer links. */
.app-footer a.footer-feedback { color: var(--accent); }
.app-footer a.footer-feedback:hover { color: var(--accent); text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   HOME PAGE (/home.html) — sprint 2026-05-03, refresh 2026-05-03 D.
   Aligned with landing.html: serif hero with italic <em> accent in
   warm tone, mono eyebrows, section headers that match the landing's
   ".section-header" rhythm, and cards built off the .framework-cell
   visual grammar (inset top rule, num eyebrow on the left, glyph on
   the right, serif title, italic question-style meta).
   ════════════════════════════════════════════════════════════ */

.home-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 40px 120px;
}

/* ── Hero ───────────────────────────────────────────────────── */
.home-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 88px;
  max-width: 760px;
}
.home-hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
  color: var(--text);
}
.home-hero-title em {
  font-style: italic;
  color: var(--accent-warm);
}
.home-hero-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 6px 0 0;
}
.home-hero-actions {
  margin-top: 22px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.home-hero-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Section header (mirrors .section-header on landing) ────── */
.home-section-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}
.home-section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.home-section-title em {
  font-style: italic;
  color: var(--accent-warm);
}

/* ── List grid ──────────────────────────────────────────────── */
.home-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0;                            /* cards share borders, no gap */
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
}
.home-loading {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 32px;
  text-align: center;
}
.home-error {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-warm);
  margin-top: 16px;
}

/* ── Empty state (richer than a plain <p>) ──────────────────── */
.home-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: 56px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.home-empty-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}
.home-empty-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0;
}
.home-empty-cta { margin-top: 8px; }

/* ── Card (framework-cell DNA: inset rule, num + glyph header) ─ */
.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px 24px;
  background: transparent;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .2s ease;
}
.home-card:hover { background: var(--bg-elev); }
/* Inset top rule (matches .framework-cell::before). */
.home-card::before {
  content: '';
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 1px;
  background: var(--border);
}
.home-card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.home-card-eyebrow { color: var(--text-dim); }
.home-card-glyph {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text-muted);
}
.home-card-title {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.3;
  margin: 0;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
  /* Clamp to ~3 lines so cards don't grow unboundedly. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-card-footer {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.home-card-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-warm);
  text-decoration: none;
  font-weight: 500;
}
.home-card:hover .home-card-link { text-decoration: underline; }

/* Tile borders: hide right edge on last column, bottom edge on last
   row. The grid has auto rows so we collapse via :last-child + nth. */
@media (min-width: 921px) {
  .home-list { grid-template-columns: repeat(3, 1fr); }
  .home-card:nth-child(3n) { border-right: none; }
  .home-card:nth-last-child(-n+3):nth-child(3n+1),
  .home-card:nth-last-child(-n+3):nth-child(3n+1) ~ .home-card { border-bottom: none; }
}
@media (min-width: 600px) and (max-width: 920px) {
  .home-list { grid-template-columns: repeat(2, 1fr); }
  .home-card:nth-child(2n) { border-right: none; }
}
@media (max-width: 599px) {
  .home-main { padding: 40px 20px 80px; }
  .home-hero-title { font-size: 38px; }
  .home-section-title { font-size: 28px; }
  .home-list { grid-template-columns: 1fr; }
  .home-card { border-right: none; }
  .home-card:last-child { border-bottom: none; }
}

/* ════════════════════════════════════════════════════════════
   FEEDBACK PAGE (/feedback.html) — moved out of inline <style>.
   Field name attrs unchanged so the API/JS handlers still bind.
   ════════════════════════════════════════════════════════════ */

.feedback-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 32px 96px;
}
.feedback-header {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.feedback-header .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
  text-decoration: none;
}
.feedback-header .back-link:hover { color: var(--text); text-decoration: none; }
.feedback-header h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 8px 0 14px;
  text-wrap: balance;
}
.feedback-header h1 em { font-style: italic; color: var(--accent); }
.feedback-header .feedback-lede {
  margin: 0;
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 600px;
}

/* Run-context banner — visible only when ?run_id=… present.
   Lit by feedback.js when it finds the param. */
.run-context-banner {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--r-md);
  font-size: 13.5px;
  line-height: 1.5;
}
.run-context-banner .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--accent);
}
.run-context-banner .ctx-text { color: var(--text); }
.run-context-banner code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  background: var(--bg-elev-2);
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 4px;
}

/* The "anon" warning replaces the old inline-styled paragraph. */
.feedback-anon-warning {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--accent-warm) 10%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--accent-warm) 50%, var(--border));
  border-radius: var(--r-md);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.feedback-anon-warning::before {
  content: '!';
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent-warm);
  color: var(--bg);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.feedback-anon-warning a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Card chrome */
.feedback-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 8px 32px 32px;
  display: flex;
  flex-direction: column;
}
.feedback-section {
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--border);
}
.feedback-section:last-of-type { border-bottom: 0; }
.feedback-section h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15.5px;
  margin: 0 0 4px;
  color: var(--text);
  letter-spacing: 0;
  line-height: 1.4;
}
.feedback-section .qhint {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.feedback-section .qhint code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}

/* Segmented 1–5 scale (same name attrs as before). */
.scale-row {
  display: grid;
  grid-template-columns: auto repeat(5, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.scale-row .scale-anchor {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 4px;
  white-space: nowrap;
}
.scale-row label.scale-opt {
  position: relative;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  border-radius: var(--r-md);
  padding: 12px 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  user-select: none;
}
.scale-row label.scale-opt:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.scale-row label.scale-opt input { position: absolute; opacity: 0; pointer-events: none; }
.scale-row label.scale-opt:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Agent / pay options grids */
.agent-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pay-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.agent-options label,
.pay-options label {
  position: relative;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  border-radius: var(--r-md);
  padding: 12px 12px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  user-select: none;
  line-height: 1.3;
}
.agent-options label:hover,
.pay-options label:hover { border-color: var(--border-strong); color: var(--text); }
.agent-options label input,
.pay-options label input { position: absolute; opacity: 0; pointer-events: none; }
.agent-options label:has(input:checked),
.pay-options label:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Free-text textarea */
.feedback-section .feedback-textarea {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  resize: vertical;
  min-height: 120px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.feedback-section .feedback-textarea:focus {
  border-color: var(--accent);
  background: var(--bg-elev);
}
.feedback-section .feedback-textarea::placeholder {
  color: var(--text-dim);
  font-style: italic;
}

/* Honest-feedback CTA */
.honest-cta {
  margin: 14px 0 0;
  padding: 12px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  background: var(--bg-elev-2);
}
.honest-cta strong {
  color: var(--text);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

/* Submit row */
.feedback-actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feedback-actions .feedback-status {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  min-height: 1.4em;
  color: var(--text-muted);
}
.feedback-actions .feedback-status.error { color: var(--accent-danger); }
.feedback-actions .feedback-status.success { color: var(--accent-positive); }
.feedback-actions button[type="submit"] {
  background: var(--text);
  color: var(--bg);
  border: 0;
  border-radius: var(--r-md);
  padding: 14px 22px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.feedback-actions button[type="submit"]:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,255,255,0.08);
}
.feedback-actions button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.feedback-foot {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

@media (max-width: 720px) {
  .feedback-page { padding: 32px 18px 60px; }
  .feedback-card { padding: 6px 20px 24px; }
  .feedback-header h1 { font-size: 28px; }
  .scale-row { grid-template-columns: repeat(5, 1fr); }
  .scale-row .scale-anchor { display: none; }
  .agent-options, .pay-options { grid-template-columns: repeat(2, 1fr); }
  .arbiter-feedback-cta { flex-direction: column; align-items: flex-start; }
  .arbiter-feedback-cta a.cta-link { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────
 * Sprint 04 — Recap card (the "your decision" reminder above the
 * debate). Replaces the flat .recap-grid layout with a structured,
 * collapsible artifact that mirrors the review-view form.
 *
 * Wiring contract:
 *   <article class="recap recap-card" id="recap">
 *     <button class="recap-header" aria-expanded="true|false"
 *             aria-controls="recap-body">…</button>
 *     <div id="recap-body" class="recap-body">
 *       <div class="recap-field tone-prime|tone-sub">
 *         <div class="rf-head"><span class="rf-num"/><span class="rf-label"/></div>
 *         <p class="rf-text"/>
 *       </div>
 *     </div>
 *   </article>
 *
 * Both `.collapsed` (set on the article) and aria-expanded="false"
 * collapse the body — the article-level class is the source of truth
 * because aria-expanded by itself can't trigger sibling animations.
 * ───────────────────────────────────────────────────────────────── */
.recap.recap-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 0;
  /* Subtle warm rule on the left edge — echoes the input form's
   * field numbering aesthetic without claiming any verdict color. */
  border-left: 2px solid var(--border-strong, var(--border));
}
.recap.recap-card .recap-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background-color 0.15s ease;
}
.recap.recap-card .recap-header:hover {
  background: color-mix(in oklab, var(--bg-elev) 85%, var(--text) 5%);
}
.recap.recap-card .recap-header:focus-visible {
  outline: 2px solid var(--accent, var(--strategist));
  outline-offset: -2px;
}
.recap.recap-card .recap-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}
.recap.recap-card .recap-toggle {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-dim);
  transition: transform 0.2s ease;
  display: inline-block;
  line-height: 1;
}
.recap.recap-card.collapsed .recap-toggle {
  transform: rotate(-90deg);
}
.recap.recap-card.collapsed .recap-header {
  border-bottom-color: transparent;
}
.recap.recap-card .recap-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  /* Dotted internal grid lines — readable on dark, gentle. The
   * fields border themselves to avoid double-line collisions. */
}
.recap.recap-card.collapsed .recap-body {
  display: none;
}
.recap.recap-card .recap-field {
  padding: 16px 22px;
  border-top: 1px solid var(--border);
}
/* First two fields sit at the top of the grid — no top border so
 * they meet the header's bottom rule cleanly. */
.recap.recap-card .recap-field:nth-child(1),
.recap.recap-card .recap-field:nth-child(2) {
  border-top: 0;
}
/* Vertical divider between the two columns on every row. */
.recap.recap-card .recap-field:nth-child(odd) {
  border-right: 1px solid var(--border);
}
.recap.recap-card .rf-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.recap.recap-card .rf-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-weight: 500;
  /* Tabular zero so 01/02/03/04 align if anyone ever stacks them */
  font-variant-numeric: tabular-nums;
}
.recap.recap-card .rf-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}
.recap.recap-card .rf-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}
/* Decision (field 01) is the protagonist. Type emphasis carries
 * the hierarchy without needing a separate visual treatment. */
.recap.recap-card .recap-field.tone-prime .rf-text {
  font-family: var(--font-serif, var(--font-display, serif));
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-strong, var(--text));
}
.recap.recap-card .recap-field.tone-prime .rf-num {
  color: var(--accent-warm, var(--text));
}

@media (max-width: 720px) {
  .recap.recap-card .recap-body {
    grid-template-columns: 1fr;
  }
  .recap.recap-card .recap-field {
    border-top: 1px solid var(--border) !important;
    border-right: 0 !important;
  }
  .recap.recap-card .recap-field:nth-child(1) {
    border-top: 0 !important;
  }
  .recap.recap-card .recap-field.tone-prime .rf-text {
    font-size: 17px;
  }
}

/* ─────────────────────────────────────────────────────────────────
 * Sprint 05 — Follow-up dock redesign.
 *
 * Goals:
 *   1. Header reads as continuation of the debate, not a chat widget
 *      stuck on the bottom.
 *   2. Tabs render with the agent glyph (left) + name (right) so the
 *      user can match the tab to the card they read in the debate.
 *   3. Active tab gets a tinted-inset background + colored top edge
 *      so it reads as "selected" without relying only on the bottom
 *      border (which was easy to miss next to the dock's own border).
 *   4. Empty state has a per-agent lead-in line + clickable example
 *      questions (entry.js#renderEmptyState rebuilds on tab change).
 *
 * Wiring contract:
 *   .followup-tab > .ftab-glyph (svg injected by entry.js)
 *                  > .ftab-name
 *   .followup-empty > .fu-empty-lead > <em>(agent name)</em>
 *                   > <ul> > <li> > .fu-example (button)
 *   The header carries an extra .followup-sub <p> for the gloss line.
 * ───────────────────────────────────────────────────────────────── */

/* Header — give the section a real title block instead of just an
 * eyebrow. Keep .followup-head's existing padding so the rule above
 * the tabs lands at the same place. */
.followup-head h3 {
  margin-bottom: 6px;
}
.followup-head .followup-sub {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 60ch;
  text-wrap: pretty;
}

/* Tabs — flex row, glyph + name. Override the legacy single-line
 * tab rule that just laid out text inline. */
.followup-tabs .followup-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  /* Re-spec the padding to fit a glyph + name comfortably. */
  padding: 12px 14px;
}
.followup-tabs .followup-tab .ftab-glyph {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  transition: color 0.15s ease;
  /* The svg fills its own viewBox; the wrapper just holds it. */
  line-height: 0;
}
.followup-tabs .followup-tab .ftab-glyph svg {
  width: 16px;
  height: 16px;
  display: block;
}
.followup-tabs .followup-tab .ftab-name {
  font-weight: 500;
}
.followup-tabs .followup-tab:hover .ftab-glyph {
  color: var(--text);
}
.followup-tabs .followup-tab.active .ftab-glyph {
  color: var(--agent-c);
}
/* Active tab gets:
 *   - a 2px top-edge in the agent's color (more visible than the
 *     bottom rule against the dock's own outer border),
 *   - a subtle tinted inset background,
 *   - the original bottom-border accent kept for backwards-compat.
 * The bottom rule from the legacy ``.followup-tab.active`` still
 * applies; we extend, not replace. */
.followup-tabs .followup-tab.active {
  background: color-mix(in oklab, var(--agent-c) 8%, transparent);
}
.followup-tabs .followup-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--agent-c);
}

/* Empty state — Sprint 05 rebuild. The legacy ``.followup-empty``
 * rules (font-size, ul reset) still apply — these are additive. */
.followup-empty .fu-empty-lead {
  font-family: var(--font-serif, var(--font-display, serif));
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.followup-empty .fu-empty-lead em {
  font-style: italic;
  color: var(--text-strong, var(--text));
}
.followup-empty ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.followup-empty li {
  /* Reset the legacy serif-italic styling so the example buttons
   * carry a uniform look — they're interactive, not decorative. */
  font-family: var(--font-mono, monospace);
  font-style: normal;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}
.followup-empty .fu-example {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 6px);
  color: var(--text-dim);
  padding: 8px 12px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  /* The bullets use straight quotes from the data; render them in
   * the user-quote style. */
  font-feature-settings: "ss01";
}
.followup-empty .fu-example::before {
  content: '› ';
  color: var(--text-muted, var(--text-dim));
  margin-right: 4px;
}
.followup-empty .fu-example:hover {
  border-color: color-mix(in oklab, var(--text) 25%, var(--border));
  color: var(--text);
  background: color-mix(in oklab, var(--bg-elev) 90%, var(--text) 4%);
}
.followup-empty .fu-example:focus-visible {
  outline: 2px solid var(--accent, var(--strategist));
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .followup-tabs .followup-tab {
    padding: 10px 8px;
    gap: 6px;
  }
  .followup-tabs .followup-tab .ftab-name {
    font-size: 13px;
  }
  .followup-head .followup-sub {
    font-size: 13.5px;
  }
}

/* ════════════════════════════════════════════════════════════
   DÉJÀ-VU MODAL — sprint 2026-05-03.
   Replaces window.confirm() in entry.js when /api/dejavu hits.
   Lives at the end of <body>; opened by entry.js#openDejavuModal.
   Visual language matches the Árbitro card (Fraunces serif title,
   mono eyebrow, accent-warm em) so it reads as part of the app,
   not a generic dialog.
   ════════════════════════════════════════════════════════════ */
.dejavu-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: dejavu-fade-in 0.18s ease-out;
}
.dejavu-modal[hidden] { display: none; }
.dejavu-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dejavu-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 32px 36px 28px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 0 1px color-mix(in oklab, var(--accent-warm) 20%, transparent);
  animation: dejavu-rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dejavu-eyebrow {
  display: block;
  color: var(--accent-warm);
  margin-bottom: 14px;
}
.dejavu-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--text);
}
.dejavu-title em {
  font-style: italic;
  color: var(--accent-warm);
}
.dejavu-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 24px;
}
.dejavu-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dejavu-actions .btn-primary,
.dejavu-actions .btn-ghost {
  font-size: 14px;
}
body.modal-open { overflow: hidden; }

@keyframes dejavu-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dejavu-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

@media (max-width: 520px) {
  .dejavu-card { padding: 26px 22px 22px; }
  .dejavu-title { font-size: 24px; }
  .dejavu-actions { flex-direction: column-reverse; align-items: stretch; }
  .dejavu-actions .btn-primary,
  .dejavu-actions .btn-ghost { justify-content: center; }
}