/* ==============================================================
   Dilucida — 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=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,300;1,8..60,400;1,8..60,500;1,8..60,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&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 "Posiciones iniciales"
   (regression caught 2026-05-01). */
[hidden] { display: none !important; }

:root {
  /* ------------------------------------------------------------
     Dilucida — token redesign (propagated from B · Debate vivo)
     Editorial sobrio: terracota / mostaza / petróleo / musgo
     sobre superficies cálidas y neutras. Source Serif 4 para
     títulos, Inter para UI, JetBrains Mono para meta.
     Legacy variable names retained so existing rules keep working.
     ------------------------------------------------------------ */

  /* Backgrounds — deeper, less blue, paper-like */
  --bg:        #0b0d12;
  --bg-elev:   #13161e;
  --bg-elev-2: #1c1f29;
  --bg-elev-3: #262a36;
  --border:    #262a36;
  --border-strong: #3a3f4f;

  /* Text — warm off-white as paper substitute */
  --text:         #edeae0;
  --text-primary: #edeae0;     /* legacy alias used in dev-retry rules */
  --text-muted:   #b1b4be;
  --text-dim:     #6e7281;

  /* Editorial accent — mostaza by default, used as the brand mark
     and as the in-progress glow. The R1/R2/Verdict semantic colors
     are agent-tinted (see per-agent block below). */
  --accent:          #c89545;   /* mostaza */
  --accent-ink:      #1a1408;   /* dark for accent backgrounds */
  --accent-warm:     #c89545;   /* mostaza — same role as before */
  --accent-warning:  #c89545;   /* mostaza */
  --accent-danger:   #c46a52;   /* terracota */
  --accent-positive: #7a9968;   /* musgo */

  /* Per-agent identity — sobrios y editoriales */
  --adversary:  #c46a52;        /* terracota */
  --pragmatist: #c89545;        /* mostaza */
  --skeptic:    #4f8896;        /* azul petróleo */
  --strategist: #7a9968;        /* verde musgo */
  --arbiter:    #e7dfc8;        /* cream paper */

  /* 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 — editorial */
  --font-serif: 'Source Serif 4', 'Iowan Old Style', 'Charter', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

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

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

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

/* Selection — accent terracota/mostaza on dark ink */
::selection { background: var(--accent); color: var(--accent-ink); }

/* ------------------------------------------------------------
   B · Debate token aliases — el redesign de la landing usa nombres
   alternativos (--bg-0, --ink-1, --c-adversary, --serif, ...). Los
   exponemos como aliases del vocabulario legacy para que cualquier
   página redibujada con el lenguaje nuevo funcione sin reescribir
   los selectores de las páginas heredadas.
   ------------------------------------------------------------ */
:root {
  /* Surfaces */
  --bg-0: var(--bg);
  --bg-1: var(--bg-elev);
  --bg-2: var(--bg-elev-2);
  --bg-3: var(--bg-elev-3);

  /* Lines */
  --line:        var(--border);
  --line-strong: var(--border-strong);
  --line-soft:   var(--bg-elev-2);

  /* Ink */
  --ink-1: var(--text);
  --ink-2: var(--text-muted);
  --ink-3: var(--text-dim);
  --ink-4: #4a4e5a;

  /* Per-agent (B-debate names) */
  --c-adversary:  var(--adversary);
  --c-pragmatist: var(--pragmatist);
  --c-skeptic:    var(--skeptic);
  --c-strategist: var(--strategist);
  --c-arbiter:    var(--arbiter);

  /* Type aliases */
  --serif: var(--font-serif);
  --sans:  var(--font-sans);
  --mono:  var(--font-mono);

  /* Container */
  --max-w: 1240px;
  --max-w-narrow: 880px;
  --max-w-prose: 680px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* Shared scaffolding from B-debate (used by the new landing and
   propagated across redesigned pages). */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: var(--max-w-narrow); }
.container--prose  { max-width: var(--max-w-prose); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* Generic .btn used by the new landing. The legacy app pages still
   use .btn-primary / .btn-secondary directly on <button>, but the
   new landing wraps them on <a class="btn btn-primary">. */
a.btn, button.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: transform .2s var(--ease), background .2s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
  border: 0;
  cursor: pointer;
}
a.btn.btn-primary, button.btn.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
a.btn.btn-primary:hover, button.btn.btn-primary:hover { transform: translateY(-1px); text-decoration: none; }
a.btn.btn-ghost, button.btn.btn-ghost {
  color: var(--ink-1);
  border: 1px solid var(--line-strong);
  background: transparent;
}
a.btn.btn-ghost:hover, button.btn.btn-ghost:hover { border-color: var(--ink-1); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

* { 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" + dos CTAs. */
.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);
  flex-wrap: wrap;
}

/* Phase 1/2 CTAs side-by-side: bajamos el peso visual del
   secondary para que el primary "Comenzar debate" mande sin pelea.
   2026-05-10 — pulido jerarquía (Claude Design). Sólo afecta dentro
   de .phase-cta; resto de la app conserva el .btn-secondary clásico. */
.phase-cta .btn-secondary {
  color: var(--text-muted);
  border-color: var(--border);
  font-weight: 500;
  padding: 12px 18px;
}
.phase-cta .btn-secondary:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.phase-cta .btn-secondary:disabled {
  color: var(--text-dim);
  border-color: var(--border);
  background: transparent;
}
.phase-cta .btn-primary { font-weight: 600; }

/* Sprint qa-fixes B: aviso bajo los CTAs cuando una cuota está
   agotada. Texto pequeño, mismo idioma que .attachments-pro-note. */
.phase-quota-note {
  margin: 8px 0 0;
  text-align: right;
  font-size: 0.85em;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.phase-quota-note a {
  color: var(--accent-warm);
  text-decoration: underline;
}

/* .pro-badge — pulido editorial 2026-05-10 (Claude Design).
   Vive sobre todo dentro del botón "Comenzar debate" (.btn-primary,
   fondo mostaza). Antes era un pill mostaza sólido que se fundía
   contra el fondo del botón. Ahora: pill oscuro `--accent-ink` con
   texto en accent + halo accent translúcido — mismo lenguaje que
   el cmp-yes y la brand-mark de la landing (mostaza halo). Mono,
   tracking ancho, peso medio: editorial, no SaaS-generic. */
.pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 2px;
  margin: 0 0 0 8px;
  border-radius: 999px;
  background: var(--accent-ink);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
}
.pro-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 22%, transparent);
}
/* Cuando el badge cae sobre superficies oscuras (botón secundario,
   disabled) invertimos el contraste: pill mostaza, ink dark. */
.btn-secondary .pro-badge,
.btn-ghost .pro-badge {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}
.btn-secondary .pro-badge::before,
.btn-ghost .pro-badge::before {
  background: var(--accent-ink);
  box-shadow: none;
}
.btn-primary:disabled .pro-badge,
.btn-secondary:disabled .pro-badge {
  opacity: 0.55;
  filter: saturate(0.7);
}

/* 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;
}

/* ============================================================
   BILLING — editorial redesign 2026-05-11
   Conversion page. Hero (landing pattern) + status panel +
   side-by-side plan tiles + quieter danger zone.
   ============================================================ */

.billing-hero {
  margin: 0 0 40px;
}
.billing-hero .label-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.billing-hero .label-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.billing-hero-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
  color: var(--text);
  text-wrap: balance;
}
.billing-hero-title em {
  font-style: italic;
  color: var(--accent);
}
.billing-hero-lead {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 58ch;
  margin: 0;
  text-wrap: pretty;
}

/* ── Status panel ───────────────────────────────────────────── */
.billing-status {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.billing-status.pro::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent) 30%,
    var(--accent) 70%,
    transparent);
}
.billing-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
@media (max-width: 720px) {
  .billing-status-row { grid-template-columns: 1fr; }
}
.billing-status-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.billing-status-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--accent);
}
.billing-status #billing-title {
  margin: 10px 0 6px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--text);
}
.billing-status #billing-title em { font-style: italic; color: var(--accent); }
.billing-status-sub {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 50ch;
}

/* ── Usage panel (right side of the status row) ─────────────── */
.billing-usage {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px 18px;
  min-width: 0;
}
.billing-usage-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}
.billing-usage-text {
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 8px 0 12px;
  line-height: 1.2;
}

/* Status CTA row */
.billing-status-actions {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.billing-status-actions .plan-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.billing-status-actions button {
  padding: 12px 20px;
  font-size: 14.5px;
}
.billing-status-actions .btn-ghost {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  transition: color .15s;
}
.billing-status-actions .btn-ghost:hover { color: var(--text); }

/* ── Plan comparison grid ───────────────────────────────────── */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 40px;
}
@media (max-width: 760px) {
  .plan-grid { grid-template-columns: 1fr; }
}

.plan-tile {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.plan-tile:hover {
  border-color: color-mix(in oklab, var(--text-muted) 35%, var(--border));
  transform: translateY(-2px);
}
.plan-tile--pro {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 5%, var(--bg-elev)),
    var(--bg-elev) 60%);
}
.plan-tile--pro::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent) inset;
}
.plan-tile--pro:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 30px -16px color-mix(in oklab, var(--accent) 60%, transparent);
}

.plan-tile-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.plan-tile-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  font-weight: 500;
}
.plan-tile--pro .plan-tile-num { color: var(--accent); }
.plan-tile-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.plan-tile-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 8px;
  border-radius: 100px;
  background: color-mix(in oklab, var(--accent) 16%, var(--bg-elev));
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-left: auto;
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.plan-tile-tag-pill::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}

/* "Tu plan actual" badge — hidden by default; revealed by
   body[data-tier="…"] matching the tile's data-tier. */
.plan-tile-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  margin-left: auto;
  visibility: hidden;
}
.plan-tile-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-positive);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-positive) 22%, transparent);
  animation: plan-tile-blink 1.8s ease-in-out infinite;
}
@keyframes plan-tile-blink { 50% { opacity: 0.4; } }

body[data-tier="free"] .plan-tile--free .plan-tile-badge,
body[data-tier="pro"]  .plan-tile--pro  .plan-tile-badge {
  visibility: visible;
}
/* When Pro is the active plan, hide the "Recomendado" pill to
   avoid duplicate eyebrows. */
body[data-tier="pro"]  .plan-tile--pro  .plan-tile-tag-pill { display: none; }
/* If both badges and pills would compete, pill always ducks. */
.plan-tile-head .plan-tile-badge ~ .plan-tile-tag-pill,
.plan-tile-head .plan-tile-tag-pill + .plan-tile-badge { margin-left: 0; }

/* ── Price block ────────────────────────────────────────────── */
.plan-tile-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 0 4px;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 18px;
  margin-bottom: 4px;
}
.plan-tile-price-currency {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2vw, 30px);
  color: var(--text-muted);
  font-weight: 400;
  transform: translateY(-0.2em);
}
.plan-tile-price-amount {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}
.plan-tile--pro .plan-tile-price-amount { color: var(--accent); }
.plan-tile-price-period {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-left: 8px;
  align-self: flex-end;
  padding-bottom: 6px;
}

.plan-tile-tag {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  text-wrap: pretty;
  max-width: 40ch;
}
.plan-tile-tag em { font-style: italic; color: var(--text); font-weight: 400; }

/* ── Feature list inside tiles ──────────────────────────────── */
.plan-tile-features {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.5;
}
.plan-tile-features li {
  position: relative;
  padding-left: 26px;
  color: var(--text);
}
.plan-tile-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent-positive) 16%, var(--bg-elev));
  border: 1px solid color-mix(in oklab, var(--accent-positive) 45%, transparent);
}
.plan-tile-features li::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid var(--accent-positive);
  border-bottom: 1.5px solid var(--accent-positive);
  transform: rotate(-45deg);
}
.plan-tile--pro .plan-tile-features li::before {
  background: color-mix(in oklab, var(--accent) 16%, var(--bg-elev));
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
}
.plan-tile--pro .plan-tile-features li::after {
  border-left-color: var(--accent);
  border-bottom-color: var(--accent);
}
.plan-tile-features li.is-off { color: var(--text-dim); }
.plan-tile-features li.is-off::before {
  background: var(--bg-elev-2);
  border-color: var(--border);
}
.plan-tile-features li.is-off::after {
  border: 0;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  background: transparent;
  /* tiny diagonal slash */
  background-image: linear-gradient(135deg,
    transparent calc(50% - 0.5px),
    var(--text-dim) calc(50% - 0.5px),
    var(--text-dim) calc(50% + 0.5px),
    transparent calc(50% + 0.5px));
}
.plan-tile-features li strong { font-weight: 600; color: var(--text); }
.plan-tile-features li em { font-style: italic; color: var(--accent); font-weight: 400; }
.plan-tile-features .li-meta {
  display: inline;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  margin-left: 2px;
}

/* ── Danger zone — refined: smaller, off-axis, less alarmy ──── */
.danger-zone {
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-left: 2px solid color-mix(in oklab, var(--accent-danger) 60%, var(--border));
  border-radius: var(--r-md);
  background: var(--bg-elev);
}
.danger-zone h3 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-danger);
  margin: 0 0 8px;
  font-weight: 600;
  opacity: 0.85;
}

/* ============================================================
   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: 32px;
  padding-bottom: 28px;
  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.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
  text-decoration: none;
  transition: color .15s;
}
.feedback-header .back-link:hover { color: var(--text); text-decoration: none; }
.feedback-header .feedback-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.feedback-header .feedback-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.feedback-header h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
  color: var(--text);
  text-wrap: balance;
}
.feedback-header h1 em { font-style: italic; color: var(--accent); }
.feedback-header .feedback-lede {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--text-muted);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  max-width: 58ch;
  text-wrap: pretty;
}

/* 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 clamp(20px, 3vw, 40px) 32px;
  display: flex;
  flex-direction: column;
}
.feedback-section {
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--border);
}
.feedback-section:last-of-type { border-bottom: 0; }
.feedback-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.feedback-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 500;
  flex-shrink: 0;
  position: relative;
  padding-right: 12px;
}
.feedback-section-num::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}
.feedback-section h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 21px);
  margin: 0;
  color: var(--text);
  letter-spacing: -0.012em;
  line-height: 1.35;
  text-wrap: balance;
  flex: 1 1 auto;
  min-width: 0;
}
.feedback-section h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.feedback-section .qhint {
  margin: 6px 0 16px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  font-family: var(--font-sans);
}
.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 — editorial quote treatment */
.honest-cta {
  margin: 18px 0 0;
  padding: 16px 20px;
  border: 0;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 5%, var(--bg-elev-2)),
    var(--bg-elev-2) 80%);
  position: relative;
}
.honest-cta::before {
  content: '“';
  position: absolute;
  left: 8px;
  top: -8px;
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.25;
  pointer-events: none;
}
.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: 36px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: balance;
}
.feedback-foot-sign {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  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; }
}

/* ════════════════════════════════════════════════════════════════
   v3 POLISH (sprint 2026-05-09)
   Detalles globales que mejoran la presencia de la marca sin
   redibujar nada del lenguaje visual: scrollbar, selección,
   focus-visible para teclado, accent-color nativo, reducción de
   motion, y un par de micro-interacciones en la marca.
   No tocan layouts ni clases existentes — sólo cierran huecos.
   ════════════════════════════════════════════════════════════════ */

/* ── Native form controls heredan la paleta ─────────────────────── */
:root {
  accent-color: var(--accent);          /* checkbox / radio nativos */
  color-scheme: dark;                   /* dropdown / autofill nativos */
}
input, textarea, select { caret-color: var(--accent); }

/* ── Selección de texto con tinte de marca ──────────────────────── */
::selection {
  background: color-mix(in oklab, var(--accent) 32%, transparent);
  color: var(--text);
  text-shadow: none;
}

/* ── Scrollbar dark-coherent ────────────────────────────────────── */
* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 100px;
  border: 3px solid var(--bg);
  background-clip: padding-box;
  transition: background-color .2s ease;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--border-strong); }
::-webkit-scrollbar-corner { background: transparent; }

/* ── Focus-visible global (sólo teclado, no ratón) ──────────────── */
:where(a, button, input, textarea, select, [tabindex]):focus { outline: none; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  transition: outline-color .15s ease;
}
/* En la fila de inputs envueltos por .field el ring va al contenedor,
   no al input pelado (ya hay border-color via :focus-within). */
.field:focus-within { outline: 2px solid color-mix(in oklab, var(--accent) 50%, transparent); outline-offset: 2px; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }

/* ── Botón primario: pressed + focus ring sin chocar con hover ──── */
.btn-primary:active,
button#submit-btn:not(:disabled):active,
.actions button:active,
.plan-actions button:active { transform: translateY(0); }
.btn-primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Brand mark: micro-pulso en hover (no perpetuo) ─────────────── */
.brand[href] .brand-mark {
  transition: transform .25s ease, box-shadow .25s ease;
}
.brand[href]:hover .brand-mark {
  transform: scale(1.06);
  box-shadow: 0 0 0 1px var(--border-strong), 0 0 24px -4px var(--accent);
}
.brand[href]:active .brand-mark { transform: scale(0.98); }

/* ── prefers-reduced-motion: respeta la preferencia del usuario ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── ATTACHMENTS — widget rediseñado 2026-05-10 (Claude Design) ──
   Dropzone editorial (dashed border + accent on hover/dragover) +
   pills tipadas con × por archivo. Pro-only: en Free se atenúa con
   .attachments-locked y se inserta .attachments-pro-note. */

/* SR-only sin perder funcionalidad de input file (sigue clickable
   por el <label for=>): lo sacamos del flujo visual pero accesible. */
.sr-file {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.attachments-field .field-row {
  justify-content: space-between;
}
.field-optional {
  color: var(--text-dim);
  font-weight: 400;
  font-style: italic;
  font-size: 0.78em;
  letter-spacing: 0;
  margin-left: 6px;
}
.field-hint-inline {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.attachments-dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--bg) 65%, transparent);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.attachments-dropzone:hover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 6%, var(--bg));
  color: var(--text);
}
.attachments-dropzone.is-dragover {
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, var(--bg));
  color: var(--text);
  transform: translateY(-1px);
}
.attachments-dropzone-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--accent);
  background: var(--bg-elev);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.attachments-dropzone:hover .attachments-dropzone-icon,
.attachments-dropzone.is-dragover .attachments-dropzone-icon {
  border-color: var(--accent);
}
.attachments-dropzone-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}
.attachments-dropzone-text strong {
  color: var(--text);
  font-weight: 500;
  margin-right: 4px;
}
.attachments-dropzone-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  flex-shrink: 0;
  max-width: 14ch;
  text-wrap: balance;
}

/* Pills de archivos seleccionados — flex-wrap con icono tipo + nombre + tamaño + × */
.attachments-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.attachment-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 5px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
  max-width: 100%;
  transition: border-color .15s var(--ease);
}
.attachment-pill:hover { border-color: var(--border-strong); }
.attachment-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 30px;
  padding: 0 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid transparent;
  flex-shrink: 0;
}
.attachment-pill[data-file-type="pdf"]  .attachment-pill-icon { color: var(--adversary);  border-color: color-mix(in oklab, var(--adversary)  35%, transparent); }
.attachment-pill[data-file-type="docx"] .attachment-pill-icon { color: var(--skeptic);    border-color: color-mix(in oklab, var(--skeptic)    35%, transparent); }
.attachment-pill[data-file-type="xlsx"] .attachment-pill-icon { color: var(--strategist); border-color: color-mix(in oklab, var(--strategist) 35%, transparent); }
.attachment-pill[data-file-type="md"]   .attachment-pill-icon { color: var(--pragmatist); border-color: color-mix(in oklab, var(--pragmatist) 35%, transparent); }
.attachment-pill[data-file-type="txt"]  .attachment-pill-icon { color: var(--text-muted); border-color: var(--border-strong); }
.attachment-pill-name {
  font-family: var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}
.attachment-pill-size {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  flex-shrink: 0;
}
.attachment-pill-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.attachment-pill-close:hover {
  background: color-mix(in oklab, var(--accent-danger) 18%, transparent);
  color: var(--accent-danger);
}

/* Free tier — gating visual. Atenúa la dropzone, niega el cursor y
   añade aviso debajo (lo inserta app.js#applyAttachmentsTierGate). */
.attachments-locked .attachments-dropzone {
  opacity: 0.55;
  cursor: not-allowed;
  border-style: dashed;
  pointer-events: none;
}
.attachments-locked .attachments-dropzone:hover {
  border-color: var(--border-strong);
  background: color-mix(in oklab, var(--bg) 65%, transparent);
}
.attachments-pro-note {
  display: block;
  margin-top: 0.7em;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.attachments-pro-note a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.attachments-pro-note a:hover {
  border-bottom-color: var(--accent);
}

@media (max-width: 600px) {
  .attachments-dropzone { flex-wrap: wrap; gap: 10px; }
  .attachments-dropzone-meta { text-align: left; max-width: none; }
}

/* ── Print: el debate como artefacto leíble en papel ────────────── */
@media print {
  body { background: #fff; color: #111; }
  .topbar, .app-footer, .legal-footer, .followup-tabs,
  .dejavu-modal, .skip-link, button, .btn-primary, .btn-secondary { display: none !important; }
  a { color: #111; text-decoration: underline; }
  .field, .recap.recap-card, .framework-cell {
    background: transparent !important;
    border-color: #ccc !important;
    box-shadow: none !important;
  }
  h1, h2, h3 { page-break-after: avoid; }
  p, blockquote, .agent-desc, .recap-body { page-break-inside: avoid; }
}

/* ============================================================
   NOTICE PAGES — verify-email-sent.html + email-verified.html
   + showVerifyBanner() embed on billing.html
   ------------------------------------------------------------
   Editorial dark surface inspired by landing.html's "stage".
   Centered card on a textured background, with a numeric step
   stripe, mono metadata row, serif headline with italic accent,
   and an inline status line. The same primitives serve the
   billing.html banner (the ``.notice-card--inline`` variant).
   ============================================================ */

.notice-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  /* Paper-grain overlay — fractal noise at 2.5% opacity. The fixed
     positioning + mix-blend-mode keeps it from fighting selection
     contrast or animation perf. */
  position: relative;
}
.notice-body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.92  0 0 0 0 0.86  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.025;
  mix-blend-mode: overlay;
}

/* Minimal sticky nav — same vocabulary as landing.html but stripped
   to brand + a single right-side anchor. */
.notice-nav {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg-0) 78%, transparent);
  border-bottom: 1px solid var(--line);
}
.notice-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.notice-nav .landing-brand,
.notice-nav .landing-brand-mark,
.notice-nav .landing-brand-name {
  /* Inherits from landing.html-style brand definitions; redeclared
     locally so notice pages don't need to ship the landing block. */
}
.notice-nav-link {
  font-size: 14px; color: var(--ink-2); text-decoration: none;
  letter-spacing: 0.01em;
}
.notice-nav-link:hover { color: var(--ink-1); }

/* Brand cluster used inside notice-nav. Duplicated from landing's
   ``.landing-brand`` to avoid coupling these pages to landing CSS. */
.notice-brand { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink-1); }
.notice-brand-mark {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
  display: inline-block; transform: translateY(-1px);
}
.notice-brand-name {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em;
}

/* The page's main grid — single column, centred, generous vertical
   air. Mobile bumps down the margins. */
.notice-main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(48px, 9vw, 96px) clamp(20px, 4vw, 56px);
  position: relative; z-index: 2;
}
.notice-shell { width: 100%; max-width: 620px; }

/* Step stripe — small mono row, à la landing's hero-meta. Optional.
   On email-verified.html we use it as the "01 / 02 / 03" timeline
   (sent → click → verified). On verify-email-sent.html it shows
   the current "01 envío hecho · 02 espera tuya". */
.notice-stripe {
  display: flex; gap: 28px; margin-bottom: 28px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.notice-stripe-item { display: inline-flex; align-items: center; gap: 8px; }
.notice-stripe-item::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-4); flex-shrink: 0;
}
.notice-stripe-item.is-active {
  color: var(--accent);
}
.notice-stripe-item.is-active::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
  animation: notice-blink 1.6s ease-in-out infinite;
}
.notice-stripe-item.is-done { color: var(--ink-2); }
.notice-stripe-item.is-done::before { background: var(--ink-2); }
.notice-stripe-item.is-error {
  color: var(--c-adversary);
}
.notice-stripe-item.is-error::before {
  background: var(--c-adversary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-adversary) 18%, transparent);
}
@keyframes notice-blink { 50% { opacity: 0.4; } }

/* Eyebrow — landing's pattern (28×1px bar + mono caps). The
   ``--eyebrow-color`` cvar lets each state recolour the bar + label
   in one place. */
.notice-eyebrow {
  --eyebrow-color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--eyebrow-color); font-weight: 500;
  margin-bottom: 18px;
}
.notice-eyebrow::before {
  content: ''; width: 28px; height: 1px;
  background: var(--eyebrow-color);
}
.notice-eyebrow.is-success { --eyebrow-color: var(--accent); }
.notice-eyebrow.is-neutral { --eyebrow-color: var(--ink-3); }
.notice-eyebrow.is-error   { --eyebrow-color: var(--c-adversary); }

/* The headline — landing's hero proportions scaled for a single-card
   page. ``em`` inherits accent automatically; states override. */
.notice-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink-1); margin: 0 0 22px;
  text-wrap: balance;
}
.notice-title em {
  font-style: italic; color: var(--accent);
}
.notice-title.is-error em { color: var(--c-adversary); }

/* Lead paragraph — serif, slightly muted, max 520ch like the hero. */
.notice-lead {
  font-family: var(--serif); font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55; color: var(--ink-2);
  margin: 0 0 14px; max-width: 540px;
  text-wrap: pretty;
}
.notice-lead strong { color: var(--ink-1); font-weight: 500; }

/* Email chip — mono, slight accent wash so it reads as data rather
   than a generic span. Wraps gracefully on narrow screens. */
.notice-chip {
  display: inline-block;
  font-family: var(--mono); font-size: 13.5px;
  color: var(--ink-1);
  background: color-mix(in oklab, var(--accent) 10%, var(--bg-1));
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line));
  padding: 3px 9px; border-radius: var(--r-sm);
  letter-spacing: 0.01em;
  word-break: break-all;
}

/* Hint — smaller, dim, often a "didn't get it?" copy. */
.notice-hint {
  font-size: 14px; color: var(--ink-3); line-height: 1.6;
  margin: 18px 0 0; max-width: 540px;
}

/* Decorative footnote row — mono caps, mirrors landing's hero-meta. */
.notice-meta {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.notice-meta-item { display: inline-flex; align-items: center; gap: 8px; }
.notice-meta-item::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-4);
}

/* Actions row — same .btn primitives as landing. */
.notice-actions {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-top: 30px;
}

/* Status line — appears beneath actions after an async op. The
   ``data-state`` attribute (set by JS) drives the colour. Padded
   so it doesn't collapse to a single character of vertical noise. */
.notice-status {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
  font-family: var(--mono); font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.notice-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-4);
}
.notice-status[data-state="ok"]    { color: var(--accent); }
.notice-status[data-state="ok"]::before    {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}
.notice-status[data-state="err"]   { color: var(--c-adversary); }
.notice-status[data-state="err"]::before   { background: var(--c-adversary); }
.notice-status[data-state="cool"]  { color: var(--ink-2); }
.notice-status[data-state="cool"]::before  { background: var(--ink-2); }

/* Outer reveal — staggered fade-in for the elements inside the
   shell. Honours prefers-reduced-motion via the global override. */
.notice-shell > * {
  opacity: 0;
  transform: translateY(8px);
  animation: notice-rise 0.7s var(--ease-out) forwards;
}
.notice-shell > *:nth-child(1) { animation-delay: 0.05s; }
.notice-shell > *:nth-child(2) { animation-delay: 0.12s; }
.notice-shell > *:nth-child(3) { animation-delay: 0.18s; }
.notice-shell > *:nth-child(4) { animation-delay: 0.24s; }
.notice-shell > *:nth-child(5) { animation-delay: 0.30s; }
.notice-shell > *:nth-child(6) { animation-delay: 0.36s; }
.notice-shell > *:nth-child(7) { animation-delay: 0.42s; }
.notice-shell > *:nth-child(8) { animation-delay: 0.48s; }
@keyframes notice-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Footer — matches landing-footer's bottom rule but compressed for
   one-liner notice pages. Always at the bottom of the flex column. */
.notice-foot {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-3); letter-spacing: 0.06em;
  position: relative; z-index: 2;
}
.notice-foot-inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.notice-foot a { color: var(--ink-3); text-decoration: none; }
.notice-foot a:hover { color: var(--ink-1); }

/* === Inline notice variant — embeds the same vocabulary inside
   another card (e.g. ``#billing-error`` on billing.html). Same
   primitives, denser spacing, accent left-rail instead of a free-
   standing card border. */
.notice-banner {
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 7%, var(--bg-1)),
    var(--bg-1) 60%);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--line));
  border-left: 2px solid var(--accent);
  border-radius: var(--r-md);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
  text-align: left;
}
.notice-banner .notice-eyebrow { margin-bottom: 4px; }
.notice-banner-title {
  font-family: var(--serif); font-weight: 500;
  font-size: 20px; line-height: 1.25;
  letter-spacing: -0.012em; color: var(--ink-1);
  margin: 0;
}
.notice-banner-title em { font-style: italic; color: var(--accent); }
.notice-banner-body {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
  margin: 0;
}
.notice-banner-actions {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 4px;
}
.notice-banner .notice-status { margin-top: 0; }

/* ============================================================
   DEV PAGE — per-agent provider override polish
   ------------------------------------------------------------
   The /dev.html UI is admin-only, but the per-agent override
   table is functional enough to deserve a presentation that
   matches the editorial vocabulary. Each row is a card-like
   panel with a 2px accent rail in the agent's identity colour
   (so the operator scans by colour: terracota = Adversary,
   mustard = Pragmatist, petrol = Skeptic, moss = Strategist,
   cream = Arbiter — same identity that lives in the live debate
   on landing.html).
   ============================================================ */

.dev-agents {
  display: flex; flex-direction: column; gap: 10px;
  margin: 4px 0 0;
}
.dev-agent-row {
  --agent-color: var(--ink-3);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) minmax(180px, 1.4fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--agent-color);
  border-radius: var(--r-md);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.dev-agent-row:hover {
  border-color: color-mix(in oklab, var(--agent-color) 50%, var(--line));
  background: color-mix(in oklab, var(--agent-color) 4%, var(--bg-1));
}
.dev-agent-row[data-agent="adversary"]  { --agent-color: var(--c-adversary); }
.dev-agent-row[data-agent="pragmatist"] { --agent-color: var(--c-pragmatist); }
.dev-agent-row[data-agent="skeptic"]    { --agent-color: var(--c-skeptic); }
.dev-agent-row[data-agent="strategist"] { --agent-color: var(--c-strategist); }
.dev-agent-row[data-agent="arbiter"]    { --agent-color: var(--c-arbiter); }

.dev-agent-identity { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dev-agent-name {
  font-family: var(--serif); font-weight: 500; font-size: 17px;
  color: var(--ink-1); letter-spacing: -0.008em;
}
.dev-agent-tag {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--agent-color);
}
.dev-agent-state {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 2px;
}
.dev-agent-state.is-overridden { color: var(--accent); }
.dev-agent-state.is-overridden::before {
  content: '●  '; color: var(--accent);
}

.dev-agent-row select.dev-agent-provider,
.dev-agent-row input.dev-agent-model {
  width: 100%;
  font: inherit;
  padding: 8px 12px;
  background: var(--bg-0);
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 13px;
  transition: border-color .15s var(--ease);
}
.dev-agent-row select.dev-agent-provider:focus,
.dev-agent-row input.dev-agent-model:focus {
  outline: none;
  border-color: var(--agent-color);
}

.dev-agent-actions {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: nowrap;
}
.dev-agent-actions button {
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-1);
  border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.dev-agent-actions button.is-primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent);
}
.dev-agent-actions button.is-primary:hover:not(:disabled) {
  filter: brightness(1.07);
}
.dev-agent-actions button.is-ghost:hover:not(:disabled) {
  border-color: var(--ink-1);
}
.dev-agent-actions button:disabled { opacity: 0.5; cursor: wait; }

.dev-agent-status {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.04em; color: var(--ink-3);
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 10px;
}
.dev-agent-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-4);
}
.dev-agent-status[data-state="ok"]  { color: var(--accent); }
.dev-agent-status[data-state="ok"]::before  { background: var(--accent); }
.dev-agent-status[data-state="err"] { color: var(--c-adversary); }
.dev-agent-status[data-state="err"]::before { background: var(--c-adversary); }

/* Narrow screens: stack the columns. The accent rail stays. */
@media (max-width: 720px) {
  .dev-agent-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .dev-agent-actions {
    justify-content: flex-end;
  }
}