/* ============================================================
   INDUSTRIAL-EDITORIAL (brand-v1) — restored 2026-07-09
   Cream paper + ink black + sealing-wax oxblood. Source Serif 4
   display / DM Sans body / JetBrains Mono data. Supersedes the
   2026-06-23→2026-07-09 "Institutional Light" (Direction B) era —
   see DESIGN.md decisions log. Structural token NAMES kept from
   the IL vocabulary (paper/canvas/ink/rule/muted) so templates
   didn't need a second sweep; brand-semantic names (--accent,
   --slate, --slate-blue) restored per DESIGN.md.
   ============================================================ */
:root {
  /* Surfaces */
  --paper: #FFFFFF;         /* cards, panels, elevated surfaces */
  --canvas: #FAF7F0;        /* page background — warm cream (paper/parchment register) */
  /* Text */
  --ink: #181818;           /* primary text — deep ink-black, warm bias */
  --muted: #5C5448;         /* secondary labels, metadata — warm brown */
  /* Dividers */
  --rule: #E8E2D5;          /* hairline borders, coordinated to cream */
  --rule-strong: #D6CFBE;   /* hover states on borders */
  /* Accent — sealing-wax oxblood: citations, links, regulator marks,
     active indicators ONLY. Never buttons, never backgrounds. */
  --accent: #6B1F2A;
  --accent-soft: #A04752;
  --accent-bg: #F4E8E8;
  /* Slate — primary buttons / dark fills / strict-wedge state */
  --slate: #1A1A1A;
  --slate-elev: #2A2A2A;
  --slate-blue: #4A5A6E;    /* audit chips + permissive-wedge state + focus rings (the ONE blue) */
  --slate-blue-tint: rgba(74, 90, 110, 0.10); /* washes for permissive/info surfaces on cream */
  /* Semantic */
  --success: #1F5C3F;       /* deep moss */
  --success-tint: #E9F1EC;
  --warning: #9C5A0E;       /* deep amber */
  --warning-tint: #FBF3E7;
  --error: #A8413A;         /* alert red-orange — distinct from accent oxblood */
  --error-tint: #F9E9E7;

  /* BORRADOR ribbon tokens — text/border use the canonical --warning.
     Only the pale draft wash + border tint are genuinely new (not in --warning-tint). */
  --amber-wash: #FEF3C7;
  --amber-border: #FCD34D;

  /* Typography roles (semantic font tokens — theme switches stay token-level) */
  --font-display: "Source Serif 4", "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Radii — KEEP LOW (brand rule: never > 8px, pills forbidden) */
  --r-tight: 2px; /* chips, inline tags — the tightest stamp-like radius */
  --r-xs: 4px;
  --r-sm: 4px;    /* buttons, inputs, citation pills, cards */
  --r-md: 6px;    /* larger panels, drawers */
  --r-lg: 8px;    /* outer containers — the hard cap */

  --shadow-soft: 0 1px 2px rgba(24, 20, 12, 0.05);
  --shadow-card: 0 1px 3px rgba(24, 20, 12, 0.06), 0 1px 1px rgba(24, 20, 12, 0.03);
  --shadow-drawer: -12px 0 40px rgba(24, 20, 12, 0.12);

  --col: 820px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tnum {
  font-variant-numeric: tabular-nums;
}

/* ---------- App bar ---------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
  padding: 0 28px;
  background: rgba(250, 247, 240, 0.92); /* cream-translucent, matches the landing topnav */
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}
.mark {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 1px; /* canonical mark is a near-square stamp (rx=1), not a rounded app icon */
}
.wordmark {
  /* Brand lockup: the wordmark is ALWAYS Source Serif 4 400 lowercase
     (DESIGN.md Typography — "Wordmark tintago (in-product / nav)").
     Inter governs UI text on these surfaces, not the brand voice. */
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
/* Homepage h1 renders the wordmark itself ("tintago") — brand voice stays
   serif there. Scoped to the module-launcher head, which only exists on /;
   the descendant selector also outweighs the later bare .session-title rule.
   The h1 sits in a mark+wordmark lockup (mark never renders alone on product
   surfaces — DESIGN.md brand rules). */
.module-launcher-head .session-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.session-title-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}
.session-title-lockup .mark-title {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 1px;
  flex: 0 0 auto;
}
.brand-sep {
  width: 1px;
  height: 20px;
  background: var(--rule);
  margin: 0 2px;
}
.crumb {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.crumb:empty { display: none; }

.surfacenav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.snav-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;       /* 13px */
  font-weight: 450;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s;
  white-space: nowrap;
}
.snav-link:hover {
  color: var(--ink);
}
.snav-link.active {
  color: var(--slate);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 680px) {
  .surfacenav {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 10px;
  }
}

.appbar-center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px; /* crumb and dial/eyebrow must never butt together (P-7, /ask collision) */
}

.appbar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------- Segmented dial (pill) ---------- */
.dial {
  display: inline-flex;
  align-items: stretch;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
.dial-opt {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  padding: 7px 14px;
  border-radius: 6px;
  letter-spacing: 0.005em;
  transition: color 140ms var(--ease), background 140ms var(--ease);
  white-space: nowrap;
}
.dial-opt .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  transition: opacity 140ms var(--ease);
}
.dial-opt[aria-pressed="true"] {
  color: #fff;
  background: var(--slate);
  box-shadow: var(--shadow-soft);
}
.dial-opt[data-posture="permisivo"][aria-pressed="true"] {
  background: var(--slate-blue);
}
.dial-opt[aria-pressed="true"] .dot {
  opacity: 1;
}
.dial-opt:not([aria-pressed="true"]):hover {
  color: var(--ink);
}

/* ---------- Right controls ---------- */
.btn-ghost {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.btn-ghost:hover {
  border-color: var(--rule-strong);
  background: var(--paper);
}
.btn-ghost svg {
  display: block;
}

.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper);
}
.lang button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  padding: 6px 10px;
  transition: color 140ms var(--ease), background 140ms var(--ease);
}
.lang button[aria-pressed="true"] {
  color: #fff;
  background: var(--slate);
}
.lang button + button {
  border-left: 1px solid var(--rule);
}

/* ---------- Honest banner ---------- */
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--slate-blue-tint);
  border-bottom: 1px solid rgba(74, 90, 110, 0.25);
  color: var(--slate-blue);
  font-size: 12px;
  font-weight: 500;
  padding: 9px 28px;
  text-align: center;
  line-height: 1.45;
}
.banner svg {
  flex: 0 0 auto;
}

/* ---------- Reading column ---------- */
.wrap {
  max-width: var(--col);
  margin: 0 auto;
  padding: 48px 28px 96px;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 14px;
}
h1.title {
  /* Display hero (DESIGN.md): Source Serif 4 400 at display scale */
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 18px;
}
.lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 62ch;
}

/* ---------- Question block ---------- */
.qa-meta {
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 44px 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--muted);
}
.qa-meta .line {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ---------- Composer (query input area) ---------- */
.composer {
  display: flex;
  flex-direction: column;   /* textarea spans the full row; controls (.composer-row) stack below */
  gap: 10px;
  align-items: stretch;
  width: 100%;
  max-width: var(--col);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
  transition: border-color 140ms var(--ease);
}
.composer:focus-within {
  border-color: var(--slate-blue);
}
.composer textarea {
  flex: 1 1 auto;
  border: 0;
  resize: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: transparent;
  outline: none;
}
.composer textarea::placeholder {
  color: var(--muted);
}

/* ---------- Answer cards (posture-swapped) ---------- */
.posture {
  margin-top: 18px;
}
.posture[hidden] {
  display: none;
}

.answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.speaker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
}
.speaker .mark {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.speaker .role {
  color: var(--muted);
  font-weight: 500;
}
.posture-tag {
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-xs);
}
.posture-tag.strict {
  background: var(--slate);
  color: #fff;
}
.posture-tag.perm {
  background: var(--slate-blue-tint);
  color: var(--slate-blue);
  border: 1px solid rgba(74, 90, 110, 0.35);
}
.posture-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Answer body ---------- */
.answer {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Answer prose inset. The rendered answer_html is bare <p>/<ol> (or the
   lang-es/lang-en bilingual wrappers), none of which carry padding — so the
   text sat flush against the card border and 24px to the LEFT of the .sources
   / .trust-strip panels below it. Match their 24px horizontal inset so the
   whole card lines up, and collapse the outer prose margins so the padding
   owns the vertical rhythm. (poc1's greeting uses .card-body, not .answer-prose.) */
.answer-prose { padding: 18px 24px; }
.answer-prose > :first-child,
.answer-prose > .lang-es > :first-child,
.answer-prose > .lang-en > :first-child { margin-top: 0; }
.answer-prose > :last-child,
.answer-prose > .lang-es > :last-child,
.answer-prose > .lang-en > :last-child { margin-bottom: 0; }

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card-body {
  padding: 22px 24px;
}
.answer-text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink);
}
.answer-text + .answer-text {
  margin-top: 14px;
}
.answer-text strong {
  font-weight: 600;
  color: var(--ink);
}

.micro-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  font-style: normal;
  padding-left: 12px;
  border-left: 2px solid var(--rule);
}

/* ---------- Citation / source pills ---------- */
.sources {
  border-top: 1px solid var(--rule);
  padding: 16px 24px;
  background: var(--canvas);
}
.sources-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 10px;
}
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* cite-pill: inline citation reference in answer text */
.cite-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* canonical citation pill (DESIGN.md "visual hero"): mono = verifiable
     structured data; oxblood border = regulatory provenance */
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--paper);
  border: 1px solid var(--accent);
  border-radius: var(--r-xs);
  padding: 2px 7px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  vertical-align: middle;
  cursor: default;
  transition: background 140ms var(--ease);
}
.cite-pill:hover {
  background: var(--accent-bg);
}
/* pill shape + oxblood signal clickability; no underline inside the pill */
.cite-pill a,
a.cite-pill {
  text-decoration: none;
  color: var(--accent);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--r-xs);
  padding: 6px 11px;
  letter-spacing: 0.005em;
  line-height: 1.2;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.pill svg {
  flex: 0 0 auto;
  opacity: 0.8;
}
/* strict = navy-bordered fundamento pills */
.pill.fundamento {
  background: var(--paper);
  border: 1px solid var(--accent);
  color: var(--accent);
}
.pill.fundamento:hover {
  border-color: var(--accent-soft);
  background: var(--accent-bg);
}
/* permissive = lighter source pills */
.pill.fuente {
  background: var(--slate-blue-tint);
  border: 1px solid rgba(74, 90, 110, 0.35);
  color: var(--slate-blue);
}
.pill.fuente:hover {
  background: rgba(74, 90, 110, 0.16);
}

/* ---------- Trust footer / strip ---------- */
.trust-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
  border-top: 1px solid var(--rule);
  padding: 16px 24px;
  background: var(--canvas);
}

/* ---------- Confidence display ---------- */
.conf {
  flex: 1 1 220px;
  min-width: 200px;
}
.conf-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}
.conf-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: -0.01em;
}
.conf-cap {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.conf-bar {
  height: 6px;
  border-radius: var(--r-xs);
  background: var(--rule);
  overflow: hidden;
}
.conf-fill {
  height: 100%;
  width: 88%;
  background: var(--success);
  border-radius: var(--r-xs);
}

/* ---------- Audit chip ---------- */
.audit-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-blue);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  padding: 6px 11px;
  letter-spacing: 0.01em;
}
.audit-chip .hash {
  /* Audit hashes keep JetBrains Mono — the one sanctioned mono on
     Institutional Light surfaces (DESIGN.md audit-chain convention). */
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.audit-chip svg {
  opacity: 0.75;
}

/* honesty (from mockup: self-reported-citation label) */
.honesty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--warning);
  background: var(--warning-tint);
  border: 1px solid #f0dec2;
  border-radius: var(--r-xs);
  padding: 6px 11px;
  line-height: 1.3;
}
.honesty svg {
  flex: 0 0 auto;
}

/* ---------- binary badge (permissive) ---------- */
.binary-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
  background: var(--success-tint);
  border: 1px solid rgba(31, 92, 63, 0.28);
  border-radius: var(--r-xs);
  padding: 8px 13px;
}
.binary-badge svg {
  flex: 0 0 auto;
}

/* ---------- Secondary behavior blocks ---------- */
.behavior {
  margin-top: 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.behavior-inner {
  padding: 18px 22px;
}
.behavior-eyebrow {
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 9px;
}
/* governed abstention = calm enterprise control (navy, NOT red) */
.behavior.abstain {
  border-left: 3px solid var(--slate);
}
.behavior.abstain .behavior-eyebrow {
  color: var(--slate);
}
.behavior.abstain .behavior-eyebrow svg {
  color: var(--slate);
}
/* escalate = amber/warning */
.behavior.escalate {
  border-left: 3px solid var(--warning);
}
.behavior.escalate .esc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--warning);
  background: var(--warning-tint);
  border: 1px solid #f0dec2;
  border-radius: var(--r-xs);
  padding: 6px 11px;
  margin: 0 0 11px;
}
.behavior-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--muted);
}
.behavior-body strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Drawer ---------- */
.drawer-scrim,
.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(24, 24, 24, 0.32);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms var(--ease), visibility 180ms var(--ease);
}
.drawer-scrim.open,
.scrim.open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: 460px;
  max-width: 92vw;
  background: var(--paper);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%);
  transition: transform 200ms var(--ease);
  display: flex;
  flex-direction: column;
}
.drawer.open {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--rule);
}
.drawer-head h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--ink);
}
.drawer-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 6px;
}
.drawer-close {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--r-sm);
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.drawer-close:hover {
  border-color: var(--rule-strong);
  color: var(--ink);
}

.drawer-body {
  overflow-y: auto;
  padding: 20px 24px 28px;
  flex: 1 1 auto;
}
.drawer-lead {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 20px;
}
.drawer-lead code {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--slate);
  background: var(--canvas);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12.5px;
  border: 1px solid var(--rule);
}

/* ---------- config-diff table ---------- */
.diff {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.diff thead th {
  font-family: var(--font-mono);
  text-align: left;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 11px 12px;
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
}
.diff thead th.col-param {
  color: var(--muted);
}
.diff thead th.col-strict {
  color: var(--slate);
}
.diff thead th.col-perm {
  color: var(--muted);
}
.diff tbody td {
  padding: 10px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
  line-height: 1.4;
}
.diff tbody tr:last-child td {
  border-bottom: 0;
}
.diff .param {
  color: var(--muted);
  font-weight: 500;
  width: 38%;
}
.diff .v-strict {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.diff .v-perm {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.diff tr.same td {
  background: var(--canvas);
}
.diff tr.same .v-strict,
.diff tr.same .v-perm {
  color: var(--muted); /* was #7a8493 ≈3.8:1 on #fafbfc — below WCAG AA 4.5:1 */
  font-weight: 500;
}
.same-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted); /* was #9aa4b2 ≈2.7:1 — far below WCAG AA */
  vertical-align: middle;
}
.harden {
  color: var(--accent);
  font-weight: 600;
  margin-left: 5px;
  font-size: 11px;
}
.em-dash {
  color: var(--rule-strong);
}

.diff-foot {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  padding: 12px 14px;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.diff-foot .harden {
  margin-left: 0;
}

/* ---------- ic icon sizing convention ---------- */
.ic {
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-xs {
  width: 12px;
  height: 12px;
}
.ic-sm {
  width: 14px;
  height: 14px;
}
.ic-md {
  width: 16px;
  height: 16px;
}
.ic-lg {
  width: 20px;
  height: 20px;
}

/* posture section visibility is controlled via JS (section[hidden]) */
.posture[hidden] {
  display: none !important;
}

/* ---------- Page footer ---------- */
.pagefoot {
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pagefoot .compliance {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.pagefoot .sign {
  /* Quiet brand sign-off — muted mono, matching the landing footer
     (DESIGN.md compliance-strip spec: lowercase wordmark in muted mono) */
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ============================================================
   FLAGSHIP INDEX PAGE — Thread / Session / Starter / Composer
   Component styles ported from theme.css to Institutional Light.
   Token mapping:
     cream / var(--bg)         → var(--canvas) / var(--paper)
     var(--serif)              → Inter (no serif on /)
     var(--accent) / oxblood   → var(--slate) / var(--slate-blue)
     var(--border-strong)      → var(--rule)
     var(--r-sm)               → var(--r-sm) (4-10 px range kept)
   ============================================================ */

/* ---------- Thread column ---------- */
.thread {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 28px 120px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Composer-less pages: strip the dead 120px composer clearance */
.thread.thread-static {
  padding-bottom: 40px;
}
/* Data-dense pages (audit history): the 820px reading column starves a
   7-column forensic table. Wide modifier keeps the same rhythm at 1180px. */
.thread.thread-wide {
  max-width: 1180px;
}

/* ---------- Session header ---------- */
.session-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.session-title {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.session-meta {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}
.session-header.is-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.session-header.is-stacked .session-meta {
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: normal;
  white-space: normal;
  max-width: 72ch;
}

/* ---------- Mode note (demo/live strip) ---------- */
.mode-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 16px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--muted);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.mode-note .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.mode-note strong { color: var(--ink); font-weight: 600; }
.mode-note.is-live { border-left-color: var(--success); }
.mode-note.is-live .dot { background: var(--success); }

/* ---------- Console empty state ---------- */
.console-empty {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Collapse once the conversation has started */
.thread:has(#response-target:not(:empty)) .console-empty {
  display: none;
}
.console-empty-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.console-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.console-lead {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  /* muted, not --ink: this is a description under the title, so it should
     recede like .ask-sub / platform .lead — not read as dark body copy that
     competes with the "New regulatory query" heading. */
  color: var(--muted);
  max-width: 58ch;
}

/* ---------- Starter grid ---------- */
.starter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 12px;
}
.starter-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 130px;
  padding: 16px 16px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), transform 80ms ease-in;
  appearance: none;
}
.starter-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-card);
}
.starter-card:active {
  transform: translateY(1px);
}
.starter-card-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.starter-card-q {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.starter-card-go {
  font-family: var(--font-mono);
  margin-top: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 140ms var(--ease);
}
.starter-card:hover .starter-card-go {
  color: var(--accent);
}

/* Compat shim DELETED (design-review FINDING-012, 2026-07-09): every template
   now authors in native Institutional Light tokens. --error/--error-tint and
   --r-tight were promoted to the main :root block. If a retired theme.css
   token name (--serif/--sans/--mono/--bg/--surface/--border/--text/--accent/
   --slate/--s-*) reappears in a template it will now visibly break instead of
   silently aliasing — that is intentional drift protection. */

/* ---------- Module launcher (homepage 6-module grid) ---------- */
.module-launcher {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.module-launcher-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.module-launcher-sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 58ch;
}
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 12px;
}
.module-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit; /* anchors: kill browser-default blue / :visited purple on the card itself */
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), transform 80ms ease-in;
}
.module-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-card);
}
.module-card:active {
  transform: translateY(1px);
}
.module-card:focus-visible {
  outline: 2px solid var(--slate-blue);
  outline-offset: 2px;
}
.module-card-icon {
  display: flex;
  align-items: center;
  color: var(--slate);
  margin-bottom: 2px;
}
.module-card-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.module-card-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.module-card-status {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
}
/* Active module = the current homepage (Regulatory Q&A) — navy accent.
   The 3px left bar is an inset shadow (not a border) so the active card's
   content stays pixel-aligned with its siblings; it reads as "you are here",
   so it intentionally does not lift on hover. */
.module-card.is-active {
  border-color: var(--rule-strong);
  box-shadow: inset 3px 0 0 0 var(--accent), var(--shadow-soft);
  background: var(--canvas);
}
.module-card.is-active .module-card-num { color: var(--accent); }
.module-card.is-active .module-card-status { color: var(--success); }
/* (global *{transition:none} under prefers-reduced-motion already covers .module-card) */

/* ---------- Home launcher: bucket sections ----------
   Three <section class="launcher-bucket"> elements group the module cards by
   IA bucket (cumplimiento / operaciones / como-funciona). The section ids are
   the anchor targets for the T2 surfacenav (/#cumplimiento etc.).
   scroll-margin-top: sticky appbar is 60px; 72px gives a 12px visual gap. */
.launcher-bucket {
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: 72px;
}
.launcher-bucket-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0;
}

/* ---------- Composer wrap (sticky bottom) ---------- */
.composer-wrap {
  position: sticky;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to bottom, transparent 0%, var(--canvas) 28%, var(--canvas) 100%);
  padding: 32px 28px 20px;
  display: flex;
  justify-content: center;
}

/* ---------- Composer row controls ---------- */
.composer-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.scope-chip {
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--canvas);
  white-space: nowrap;
  flex-shrink: 0;
}
.scope-chip.is-on {
  color: var(--slate);
  border-color: var(--slate);
  background: var(--paper);
  cursor: default;
}
.composer-send {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.composer .send-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  white-space: nowrap;
}
.send-btn {
  background: var(--slate);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms var(--ease);
}
.send-btn:hover { background: var(--slate-elev); }
.send-btn .kbd {
  font-size: 10px;
  color: rgba(250, 247, 240, 0.65);
  border: 1px solid var(--slate-elev);
  border-radius: 2px;
  padding: 1px 4px;
  letter-spacing: 0.04em;
}

/* ---------- P-5: Composer in-flight disabled state ----------
   hx-disabled-elt="find .send-btn" adds [disabled] while request is in-flight;
   this rule covers the htmx-request class guard as a belt-and-suspenders fallback. */
form.htmx-request .send-btn {
  opacity: .5;
  pointer-events: none;
  cursor: progress;
}

/* ---------- P-5: Approval-gate disabled state (poc1) ---------- */
.poc2-approve:disabled,
.poc2-reject:disabled {
  opacity: .5;
  cursor: default;
}

/* ---------- P-5: Grouped focus-visible rings ----------
   One rule for every interactive control that lacked a ring.
   module-card (.module-card:focus-visible) and model-select
   (.model-select-input:focus-visible) already have their own — not duplicated.
   Ring is outline-only (outline-offset) so each control keeps its own radius. */
.snav-link:focus-visible,
.dial-opt:focus-visible,
.send-btn:focus-visible,
.lang button:focus-visible,
.starter-card:focus-visible,
.modules-trigger:focus-visible,
.modules-item:focus-visible,
.btn-ghost:focus-visible,
.drawer-close:focus-visible,
.audit-filter:focus-visible,
.poc1-example:focus-visible,
.ask-example:focus-visible,
.kyc-card-btn:focus-visible,
.aml-row-btn:focus-visible,
.contract-card-btn:focus-visible,
.poc2-card-btn:focus-visible,
.poc2-approve:focus-visible,
.poc2-reject:focus-visible,
.audit-open-btn:focus-visible,
.topnav-lang button:focus-visible,
.general-offer-btn:focus-visible {
  outline: 2px solid var(--slate-blue);
  outline-offset: 2px;
}

/* ---------- Loading skeleton ---------- */
.ti-skeleton {
  display: none;
  margin-top: 16px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-md);
}
/* Reveal while a form on the page is in flight */
body:has(form.htmx-request) .ti-skeleton { display: block; }
.ti-skeleton-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 14px;
}
.ti-skeleton-bars { display: flex; flex-direction: column; gap: 8px; }
.ti-skeleton-bar {
  height: 8px;
  max-width: 100%;
  border-radius: var(--r-xs);
  background: var(--rule);
}

@media (max-width: 680px) {
  .thread { padding: 24px 16px 100px; }
  .session-title { font-size: 20px; }
  .starter-grid { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: 1fr 1fr; }
  .composer-wrap { padding: 20px 16px 14px; }
}

/* P-6: poc1 run target scroll-margin so the header doesn't hide under the sticky appbar */
#poc1-run-target {
  scroll-margin-top: 72px;
}

/* P-6: cheap mobile-overflow clips (desktop is primary) */
@media (max-width: 480px) {
  .module-grid { grid-template-columns: 1fr; }
}

/* ---------- Smooth scroll (motion-safe) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 680px) {
  .appbar {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 16px;
    gap: 10px;
  }
  .appbar-center {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .dial {
    flex-wrap: wrap;
  }
  .wrap {
    padding: 32px 18px 72px;
  }
  h1.title {
    font-size: 30px;
  }
}

/* ============================================================
   POC 1 HELP-DESK CHAT — Component styles for /poc1
   Token mapping (theme.css → Institutional Light):
     var(--surface) / cream     → var(--canvas) / var(--paper)
     var(--border)              → var(--rule)
     var(--border-strong)       → var(--rule) / #c4d0de
     var(--accent) / oxblood    → var(--slate) / var(--slate-blue)
     var(--text)                → var(--ink)
     var(--serif)               → Inter only (no display serif)
     var(--mono)                → Inter (no mono labels)
     var(--s-md/xl)             → 12px / 20px / 28px
     var(--r-sm)                → var(--r-sm) 6px (4-10px range kept)
   ============================================================ */

/* ---------- Chat thread (POC 1 variant) ---------- */
/* .poc1-thread inherits .thread from the flagship section above;
   these rules extend or override for help-desk specifics. */
.poc1-thread {
  padding: 32px 28px 120px;
}

/* ---------- Answer-card shared components (unscoped — all surfaces) ---------- */
/* Applies to /consultas, /poc1, and /ask. The /ask-scoped rules below may add
   overrides (scroll-margin-top, overflow-wrap) but these unscoped rules are the
   base that was missing from the Phase-1 re-skin. */
.msg-user {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 10px 0 6px;
}
.msg-ai {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.who-eyebrow {
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--muted);
}
.ruler {
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.confidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  background: var(--paper);
}

/* ---------- Bilingual double-render guard ---------- */
/* When response has answer_html_en, both lang-es and lang-en would stack.
   Default to ES; html[lang="en"] (set by the i18n toggle) flips to EN. */
.lang-en { display: none; }
html[lang^="en"] .lang-es { display: none; }
html[lang^="en"] .lang-en { display: block; }

/* ---------- Greeting message bubbles ---------- */
/* .msg-ai / .msg-user / .who-eyebrow / .answer / .ruler are now defined above
   (unscoped). The inline greetings in poc1_index.html use those shared classes. */

/* ---------- POC 1 setup-notice banner ---------- */
.poc1-banner {
  border: 1px solid var(--warning);
  background: var(--warning-tint);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.poc1-banner-label {
  font-family: var(--font-mono);
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--warning);
  margin-bottom: 6px;
}

/* ---------- Example-question chips ---------- */
/* Chip row sits inside the greeting .answer bubble */
.poc1-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.poc1-example {
  appearance: none;
  text-align: left;
  border: 1px solid var(--rule);
  background: var(--canvas);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 140ms var(--ease), color 140ms var(--ease), background 140ms var(--ease), transform 80ms ease-in;
}
.poc1-example:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}
.poc1-example:active {
  transform: translateY(1px);
}

/* ---------- Disclaimer / demo-mode label ---------- */
.poc1-disclaimer {
  font-family: var(--font-mono);
  margin-top: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ---------- Response-target gap ---------- */
/* Spacing between consecutive _answer_card.html fragments */
#poc1-response-target {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#poc1-response-target:empty {
  display: none;
}

@media (max-width: 680px) {
  .poc1-thread { padding: 20px 16px 100px; }
  .poc1-examples { flex-direction: column; }
}

/* ============================================================
   /ASK — PHONE-FIRST DISCOVERY INSTRUMENT
   Single-screen, max-width 640px, minimal composer that posts
   to /ask/query (compact unified card, ASK_DEFAULT display).
   Token mapping (old theme.css → Institutional Light):
     var(--bg) / cream          → var(--canvas) / var(--paper)
     var(--serif)               → Inter (no display serif here)
     var(--accent) / navy/blue  → var(--slate) / var(--slate-blue)
     var(--border-strong)       → var(--rule)
     var(--surface)             → var(--paper)
     var(--text)                → var(--ink)
     var(--muted)               → var(--muted)
     var(--mono)                → Inter (mono labels removed)
     var(--r-sm)                → var(--r-sm)
   ============================================================ */

/* ---------- Shell: phone-first column centered at 640px ---------- */
.ask-shell {
  max-width: 640px;
  margin: 0 auto;
  min-height: calc(100dvh - 60px); /* subtract appbar height */
  display: flex;
  flex-direction: column;
  padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}

/* ---------- Body (scrollable fill between header and composer) ---------- */
.ask-body {
  flex: 1;
  min-height: 0;
  padding: 28px 0 16px;
}

/* ---------- Hero intro ---------- */
.ask-intro {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.ask-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.55;
}

/* ---------- Seeded example chips ---------- */
.ask-examples {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.ask-examples-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 2px;
}

.ask-example {
  text-align: left;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 140ms var(--ease), color 140ms var(--ease), background 140ms var(--ease), transform 80ms ease-in;
  appearance: none;
}

.ask-example:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

.ask-example:active {
  border-color: var(--slate);
  color: var(--slate);
  transform: translateY(1px);
}

/* ---------- Response target ---------- */
#ask-response-target {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Scroll offset clears the sticky appbar (60px) + a small gap */
#ask-response-target > .msg-user,
#ask-response-target > .msg-ai {
  scroll-margin-top: 80px;
}

/* ---------- Confidence line in compact ask card ---------- */
.ask-confidence {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}

/* ---------- Sticky composer bar ---------- */
.ask-composer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, var(--canvas) 24%, var(--canvas) 100%);
  padding: 20px 0 calc(16px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.ask-composer textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 16px; /* >=16px prevents iOS zoom-on-focus */
  color: var(--ink);
  background: var(--paper);
  line-height: 1.4;
  outline: none;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.ask-composer textarea:focus {
  border-color: var(--slate-blue);
  box-shadow: 0 0 0 2px var(--slate-blue-tint);
}

.ask-composer textarea::placeholder {
  color: var(--muted);
}

.ask-send {
  flex-shrink: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--slate);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 0 16px;
  height: 44px;
  cursor: pointer;
  transition: background 140ms var(--ease);
  white-space: nowrap;
}

.ask-send:hover { background: var(--slate-elev); }

.ask-send:disabled { opacity: 0.5; cursor: default; }

/* ---------- Footer compliance note ---------- */
.ask-footer {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
  padding: 8px 0 20px;
}

/* ---------- Word-wrap guard for phone (long tokens) ---------- */
.ask-shell .msg-user,
.ask-shell .answer,
.ask-shell .cite-pill {
  overflow-wrap: anywhere;
}

/* ---------- Touch: wider tap targets for citation pills ---------- */
@media (hover: none) {
  .ask-shell .cite-pill { min-height: 44px; padding: 10px 12px; }
}

/* ---------- Desktop: bump hero size for banker demos ---------- */
@media (min-width: 768px) {
  .ask-intro { font-size: 30px; }
}

/* ---------- Phone narrowing ---------- */
@media (max-width: 480px) {
  .ask-body { padding: 20px 0 12px; }
  .ask-intro { font-size: 20px; }
}

/* ============================================================
   KYC REVIEW PAGE
   Re-skinned from base.html to Institutional Light (Item 4a).
   ============================================================ */
.kyc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.kyc-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.kyc-card:hover { border-color: var(--rule-strong); transform: translateY(-1px); }
.kyc-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.kyc-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.kyc-card-risk {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  border: 1px solid var(--rule);
}
.kyc-card-risk-bajo  { color: var(--success); border-color: var(--success); }
.kyc-card-risk-medio { color: var(--warning); border-color: var(--warning); }
.kyc-card-risk-alto  { color: var(--error);   border-color: var(--error);   }
.kyc-card-name {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.kyc-card-label {
  font-size: 13px;
  color: var(--muted);
}
.kyc-card-headline {
  font-size: 15px;
  font-style: italic;
  color: var(--ink);
  margin: 8px 0;
  padding-left: 8px;
  border-left: 2px solid var(--rule-strong);
}
.kyc-card-docs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.kyc-doc-chip {
  font-size: 10px;
  letter-spacing: 0.06em;
  background: var(--canvas);
  border: 1px solid var(--rule);
  padding: 3px 8px;
  border-radius: var(--r-xs);
  color: var(--muted);
}
.kyc-card-foot { margin-top: auto; padding-top: 16px; }
.kyc-card-btn {
  width: 100%;
  background: var(--slate);
  color: #fff;
  border: 0;
  padding: 11px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: grid; place-items: center;
  white-space: nowrap;
}
.kyc-card-btn > * { grid-area: 1 / 1; transition: opacity 120ms ease; }
.kyc-card-btn:hover { background: var(--slate-elev); }
.kyc-card-spinner {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #fff;
  opacity: 0;
}
.htmx-request .kyc-card-spinner { opacity: 1; }
.htmx-request .kyc-card-btn > span:first-child { opacity: 0; }
.htmx-request .kyc-card-btn { background: var(--slate-elev); cursor: progress; }

/* ============================================================
   AML INVESTIGATION PAGE
   Re-skinned from base.html to Institutional Light (Item 4b).
   ============================================================ */
.aml-queue {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 24px;
}
.aml-row {
  display: grid;
  grid-template-columns: 80px 1fr 180px;
  gap: 16px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 16px 24px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.aml-row:hover { border-color: var(--rule-strong); transform: translateY(-1px); }
.aml-row-left { display: flex; align-items: center; }
.aml-severity-pill {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-xs);
  border: 1px solid;
}
.aml-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aml-row-line {
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.aml-row-id { color: var(--slate); font-weight: 500; white-space: nowrap; }
.aml-row-rule { color: var(--ink); }
.aml-sep { color: var(--rule); }
.aml-row-customer {
  font-size: 16px; color: var(--ink);
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.aml-row-customer strong { font-weight: 500; }
.aml-row-customer-label { color: var(--muted); font-size: 13px; }
.aml-row-headline {
  font-size: 14px; font-style: italic;
  color: var(--ink); padding-left: 8px;
  border-left: 2px solid var(--rule-strong);
  margin-top: 2px;
}
.aml-row-meta {
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--muted); display: flex; gap: 8px; align-items: center;
  margin-top: 4px;
}
.aml-row-right { display: flex; justify-content: flex-end; }
.aml-row-btn {
  background: var(--slate); color: #fff;
  border: 0; padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  cursor: pointer; width: 100%;
  display: grid; place-items: center;
  white-space: nowrap;
}
.aml-row-btn > * { grid-area: 1 / 1; transition: opacity 120ms ease; }
.aml-row-btn:hover { background: var(--slate-elev); }
.aml-row-spinner {
  font-size: 10px; letter-spacing: 0.06em;
  color: #fff; opacity: 0;
}
.htmx-request .aml-row-spinner { opacity: 1; }
.htmx-request .aml-row-btn > span:first-child { opacity: 0; }
.htmx-request .aml-row-btn { background: var(--slate-elev); cursor: progress; }

@media (max-width: 1080px) {
  .aml-row { grid-template-columns: 1fr; }
  .aml-row-right { justify-content: flex-start; }
}

/* ============================================================
   CONTRACT EXTRACTION PAGE
   Re-skinned from base.html to Institutional Light (Item 4c).
   ============================================================ */
.contract-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.contract-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.contract-card:hover { border-color: var(--rule-strong); transform: translateY(-1px); }
.contract-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.10em;
 color: var(--accent);
}
.contract-card-type {
  font-size: 18px; font-weight: 500;
  color: var(--ink); line-height: 1.25;
}
.contract-card-parties {
  font-size: 13px; color: var(--muted);
  line-height: 1.45;
}
.contract-card-headline {
  font-size: 14px; font-style: italic;
  color: var(--ink);
  padding-left: 8px;
  border-left: 2px solid var(--rule-strong);
  margin-top: 4px;
}
.contract-card-foot { margin-top: auto; padding-top: 16px; }
.contract-card-btn {
  width: 100%; background: var(--slate); color: #fff;
  border: 0; padding: 11px 16px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  display: grid; place-items: center;
  white-space: nowrap;
}
.contract-card-btn > * { grid-area: 1 / 1; transition: opacity 120ms ease; }
.contract-card-btn:hover { background: var(--slate-elev); }
.contract-card-spinner {
  font-size: 14px; font-weight: 500; letter-spacing: 0;
  color: #fff; opacity: 0;
}
.htmx-request .contract-card-spinner { opacity: 1; }
.htmx-request .contract-card-btn > span:first-child { opacity: 0; }
.htmx-request .contract-card-btn { background: var(--slate-elev); cursor: progress; }

/* ============================================================
   AUDIT HISTORY PAGE
   Re-skinned from base.html to Institutional Light (Item 4d).
   ============================================================ */
.audit-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 24px 0 16px;
}
.audit-stat {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 16px 24px;
}
.audit-stat-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.10em;
 color: var(--muted); margin-bottom: 4px;
}
.audit-stat-value {
  font-weight: 500; font-size: 28px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.audit-filters {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.audit-filter {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.audit-filter:hover { background: var(--paper); border-color: var(--rule-strong); }
.audit-filter.active { background: var(--slate); color: #fff; border-color: var(--slate); }

.audit-table-wrap {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.audit-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.audit-table th, .audit-table td {
  padding: 10px 14px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--rule);
}
.audit-table th {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--muted);
  background: var(--canvas);
}
.audit-table tbody tr:last-child td { border-bottom: 0; }
.audit-table tbody tr:hover { background: var(--canvas); }

.audit-module-pill {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 500;
  padding: 3px 8px; border-radius: var(--r-xs);
  border: 1px solid var(--rule);
  color: var(--muted); white-space: nowrap;
}
.audit-module-kyc { color: var(--slate-blue); border-color: var(--slate-blue); }
.audit-module-aml { color: var(--warning); border-color: var(--warning); background: var(--warning-tint); }
.audit-module-contract { color: var(--slate-blue); border-color: var(--slate-blue); }

.audit-case-id, .audit-chain {
  /* <code> elements — pin to JetBrains Mono instead of the browser-default
     OS monospace (audit-chain convention; renders identically cross-machine) */
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink); background: transparent;
  white-space: nowrap; /* case IDs and chain hashes must never wrap mid-token */
}
/* Shrink-to-fit the identity column (module pill + case id stacked) so
   SUJETO gets the flexible width */
.audit-table th:first-child,
.audit-table td:first-child {
  width: 1%;
  white-space: nowrap;
}
.audit-table td:first-child .audit-case-id {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}
.audit-chain-sep { color: var(--muted); }

.audit-subject {
  color: var(--ink); max-width: 280px;
}
.audit-when {
  font-size: 11px; color: var(--muted);
  white-space: nowrap;
}
.audit-decision {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500;
  border: 1px solid; border-radius: var(--r-xs);
  padding: 3px 8px; white-space: nowrap;
  background-color: rgba(24, 24, 24, 0.04);
}
.audit-action { text-align: right; }
.audit-open-btn {
  display: inline-block;
  background: var(--canvas); border: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
  font-size: 12px; font-weight: 500;
  padding: 5px 12px; border-radius: var(--r-sm);
  white-space: nowrap;
}
.audit-open-btn:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* Filtered-out rows must COLLAPSE — visibility:hidden left gaps */
.audit-row.is-hidden { display: none; }

.audit-empty {
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  padding: 32px 24px;
  text-align: center;
}
.audit-empty-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em;
 color: var(--muted);
  margin-bottom: 8px;
}
.audit-empty-text {
  font-size: 14px; line-height: 1.6;
  color: var(--ink); max-width: 560px; margin: 0 auto;
}

/* ============================================================
   POC-2 INCIDENT RESOLUTION PAGE
   Re-skinned from base.html to Institutional Light (Item 4e).
   ============================================================ */
.poc2-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.poc2-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.poc2-card:hover { border-color: var(--rule-strong); transform: translateY(-1px); }
.poc2-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.poc2-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.10em;
 color: var(--muted);
}
.poc2-sev {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; padding: 3px 8px;
  border-radius: var(--r-xs); border: 1px solid var(--rule);
  white-space: nowrap;
}
.poc2-sev-p1   { color: var(--error);   border-color: var(--error); }
.poc2-sev-alta { color: var(--warning); border-color: var(--warning); }
.poc2-card-title {
  font-size: 21px; font-weight: 500;
  line-height: 1.2; color: var(--ink);
}
.poc2-card-source {
  font-size: 11px; letter-spacing: 0.02em;
  color: var(--slate);
}
.poc2-card-summary {
  font-size: 15px; font-style: italic;
  line-height: 1.5; color: var(--ink);
  margin: 4px 0; padding-left: 8px;
  border-left: 2px solid var(--rule-strong);
}
.poc2-card-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.poc2-meta-chip {
  font-size: 10px; letter-spacing: 0.04em;
  background: var(--canvas); border: 1px solid var(--rule);
  padding: 3px 8px; border-radius: var(--r-xs); color: var(--muted);
}
.poc2-card-foot { margin-top: auto; padding-top: 16px; }
.poc2-card-btn {
  width: 100%;
  background: var(--slate); color: #fff; border: 0;
  padding: 11px 16px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; cursor: pointer;
  display: grid; place-items: center; white-space: nowrap;
}
.poc2-card-btn > * { grid-area: 1 / 1; transition: opacity 120ms ease; }
.poc2-card-btn:hover { background: var(--slate-elev); }
.poc2-card-spinner {
  font-size: 11px; letter-spacing: 0.08em;
  color: #fff; opacity: 0;
}
.htmx-request .poc2-card-spinner { opacity: 1; }
.htmx-request .poc2-card-btn > span:first-child { opacity: 0; }
.htmx-request .poc2-card-btn { background: var(--slate-elev); cursor: progress; }

/* ============================================================
   GENERAL-ORIENTATION FALLBACK (Tier-2 general offer banner)
   Moved from index.html inline <style> — Item 3a.
   ============================================================ */
.general-offer {
  margin-top: var(--r-md); padding: var(--r-md);
  background: var(--warning-tint); border: 1px solid var(--warning);
  border-radius: var(--r-sm);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.general-offer-text { font-size: 13px; line-height: 1.5; color: var(--ink); flex: 1 1 240px; }
.general-offer-form { margin: 0; }
.general-offer-btn {
  background: var(--slate); color: #fff; border: 0;
  padding: 9px 16px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; cursor: pointer;
  display: grid; place-items: center; white-space: nowrap;
}
.general-offer-btn > * { grid-area: 1 / 1; transition: opacity 120ms ease; }
.general-offer-btn:hover { background: var(--slate-elev); }
.general-offer-btn:disabled { opacity: 0.55; cursor: default; }
.general-offer-spinner { font-size: 11px; letter-spacing: 0.06em; color: #fff; opacity: 0; }
.htmx-request .general-offer-spinner { opacity: 1; }
.htmx-request .general-offer-btn > span:first-child { opacity: 0; }
.htmx-request .general-offer-btn { cursor: progress; }
.general-slot:not(:empty) { margin-top: 16px; }

.msg-general .general-banner {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--warning-tint); border-left: 3px solid var(--warning);
  padding: 8px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 16px;
}
.msg-general .general-banner svg { color: var(--warning); flex-shrink: 0; margin-top: 2px; }
.msg-general .general-banner span { font-size: 13px; line-height: 1.5; color: var(--ink); }
.general-tag {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--warning);}
.general-inline-note {
  font-size: 12px; line-height: 1.5; color: var(--muted);
  margin: 0 0 8px; padding-left: 8px;
  border-left: 2px solid var(--warning);
}

/* ============================================================
   MÓDULOS DROPDOWN
   ============================================================ */
.modules-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.modules-trigger {
  appearance: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 10px;
  white-space: nowrap;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.modules-trigger:hover {
  background: var(--canvas);
}
.modules-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  min-width: 210px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 4px 0;
}
.modules-item {
  display: block;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 100ms var(--ease), color 100ms var(--ease);
}
.modules-item:hover,
.modules-item:focus:not(:focus-visible) {
  background: var(--accent-bg);
  color: var(--accent);
  outline: none;
}
/* Active dropdown item: inset left-bar (no layout shift) + blue tint */
.modules-item.active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 2px 0 0 0 var(--accent);
}

/* ============================================================
   BORRADOR RIBBON — amber draft indicator inside answer card
   Renders ONLY when response.borrador == True.
   Text/border use the canonical --warning token; wash/border-tint use --amber-* (defined above).
   ============================================================ */
.borrador-ribbon {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--warning-tint);
  border-bottom: 1px solid var(--amber-border);
  color: var(--warning);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 24px;
}

/* ============================================================
   BAKE-OFF PANEL — side-by-side curated vs. generative view
   .bakeoff-panel      two-column grid, stacked on narrow viewports
   .bakeoff-col        each column
   .bakeoff-col-header column heading bar
   ============================================================ */
.bakeoff-panel-wrapper {
  margin-top: 24px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--canvas);
  padding: 24px;
}
.bakeoff-panel-wrapper header {
  margin-bottom: 20px;
}
.bakeoff-panel-wrapper header h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
}
.bakeoff-panel-wrapper header p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 4px;
}
.bakeoff-panel-wrapper .honesty-note {
  font-size: 12px;
  color: var(--warning);
  background: var(--amber-wash);
  border: 1px solid var(--amber-border);
  border-radius: var(--r-xs);
  padding: 6px 10px;
  display: inline-block;
  margin-top: 6px;
}
.bakeoff-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 860px) {
  .bakeoff-panel {
    grid-template-columns: 1fr;
  }
}
.bakeoff-col {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.bakeoff-col-header {
  font-family: var(--font-mono);
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--slate);
}
/* Inset the embedded answer card so the question + answer box align with the
   header's 18px inset instead of sitting flush against the column border. */
.bakeoff-col-body {
  padding: 8px 18px 18px;
}
.net-value-slot {
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.net-value-slot .muted {
  color: var(--muted);
}

/* btn-secondary — outline button for trigger actions */
.btn-secondary {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 9px 16px;
  transition: border-color 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease);
}
.btn-secondary:hover {
  border-color: var(--rule-strong);
  background: var(--canvas);
}
.htmx-indicator {
  display: none;
  font-size: 12px;
  color: var(--muted);
  margin-left: 4px;
}
.htmx-request .htmx-indicator {
  display: inline;
}

/* ---------- P-4: Cross-document View Transitions (Chrome/Edge 126+; silent fallback elsewhere) ----------
   Opts every page that loads institutional.css into the cross-document VT API so route→route
   navigations cross-fade instead of hard-cutting.  Duration 160ms sits inside the
   Institutional-Light 140-200ms budget (browser default is ~250ms). */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 160ms;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1);
}
::view-transition-old(root) { animation-name: ti-vt-out; }
::view-transition-new(root) { animation-name: ti-vt-in; }

@keyframes ti-vt-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes ti-vt-in  { from { opacity: 0 } to { opacity: 1 } }

/* VT pseudo-elements are NOT covered by the universal * guard above — add explicit guard. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ---------- P-4: Universal page-load entrance (all browsers, reduced-motion-guarded) ----------
   Cross-document VT (@view-transition) is Chrome/Edge 126+ only; Firefox/Safari hard-cut.
   This keyframe fires on every full-page load in ALL browsers as a consistent phase-in.
   Layers acceptably with the VT cross-fade in Chrome (both run, VT wins the outer fade). */
@keyframes ti-page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .thread, .poc1-shell, .ask-shell, .wrap { animation: ti-page-enter 200ms ease-out both; }
}

/* ---------- P-4: Answer-card entrance (replaces full-page VT flash on beforeend appends) ----------
   The composer swaps use transition:false so htmx doesn't trigger a full-page VT snapshot;
   instead each newly-inserted child phases in via this targeted keyframe.
   `both` fill keeps the card invisible until inserted, then fades+slides it in. */
#response-target > *,
#poc1-response-target > * {
  animation: answer-in 180ms ease-out both;
}
@keyframes answer-in {
  from { opacity: 0; transform: translateY(8px) }
  to   { opacity: 1; transform: translateY(0) }
}
/* answer-in is on real elements so the universal * guard already covers it;
   explicit override here for clarity. */
@media (prefers-reduced-motion: reduce) {
  #response-target > *,
  #poc1-response-target > * { animation: none; }
}

/* ---------- P-4: Modules dropdown enter ---------- */
.modules-menu:not([hidden]) {
  animation: modules-enter 120ms cubic-bezier(.2,.6,.2,1) both;
}
@keyframes modules-enter {
  from { opacity: 0; transform: translateY(-4px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* ---------- P-4: Loading skeleton reveal ---------- */
body:has(form.htmx-request) .ti-skeleton {
  animation: skeleton-reveal 140ms ease-out both;
}
@keyframes skeleton-reveal {
  from { opacity: 0 }
  to   { opacity: 1 }
}