/* =========================================================================
   ContractRisk AI — Design System
   Two themes (light/dark), indigo/violet accent, Inter typography
   ========================================================================= */


/* ── Custom Properties ──────────────────────────────────────────────────── */
:root {
  /* Brand */
  --accent:        #6366f1;
  --accent-2:      #8b5cf6;
  --accent-glow:   rgba(99,102,241,.25);
  --gradient:      linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);

  /* Surfaces — light */
  --bg:            #f0f2fa;
  --bg-2:          #e8eaf5;
  --card:          #ffffff;
  --card-2:        #f8f9ff;
  --glass:         rgba(255,255,255,.72);
  --glass-border:  rgba(99,102,241,.15);

  /* Text — light */
  --text:          #0f172a;
  --text-2:        #334155;
  --muted:         #64748b;

  /* Borders — light */
  --border:        rgba(15,23,42,.08);
  --border-2:      rgba(99,102,241,.2);

  /* Shadows — light */
  --shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:        0 4px 16px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.06);
  --shadow-accent: 0 4px 24px rgba(99,102,241,.35);

  /* Risk */
  --risk-low:      #10b981;
  --risk-low-bg:   #d1fae5;
  --risk-low-text: #065f46;
  --risk-med:      #f59e0b;
  --risk-med-bg:   #fef3c7;
  --risk-med-text: #92400e;
  --risk-high:     #f97316;
  --risk-high-bg:  #ffedd5;
  --risk-high-text:#9a3412;
  --risk-crit:     #ef4444;
  --risk-crit-bg:  #fee2e2;
  --risk-crit-text:#991b1b;

  /* Misc */
  --radius:        14px;
  --radius-sm:     8px;
  --transition:    .2s cubic-bezier(.4,0,.2,1);
}

/* Dark theme */
[data-theme="dark"] {
  --bg:            #080c14;
  --bg-2:          #0d1120;
  --card:          #111827;
  --card-2:        #1a2035;
  --glass:         rgba(17,24,39,.8);
  --glass-border:  rgba(99,102,241,.2);

  --text:          #f1f5f9;
  --text-2:        #94a3b8;
  --muted:         #64748b;

  --border:        rgba(255,255,255,.06);
  --border-2:      rgba(99,102,241,.3);

  --shadow-sm:     0 1px 3px rgba(0,0,0,.4);
  --shadow:        0 4px 20px rgba(0,0,0,.5);
  --shadow-lg:     0 12px 48px rgba(0,0,0,.7);
  --shadow-accent: 0 4px 24px rgba(99,102,241,.4);

  --risk-low-bg:   rgba(16,185,129,.12);
  --risk-low-text: #6ee7b7;
  --risk-med-bg:   rgba(245,158,11,.12);
  --risk-med-text: #fcd34d;
  --risk-high-bg:  rgba(249,115,22,.12);
  --risk-high-text:#fdba74;
  --risk-crit-bg:  rgba(239,68,68,.12);
  --risk-crit-text:#fca5a5;
}

/* ── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
}

/* ── Animated gradient background strip ─────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient);
  background-size: 200% 100%;
  animation: gradientSlide 4s linear infinite;
  z-index: 100;
}

@keyframes gradientSlide {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: 1.05rem; font-weight: 600; }
p  { color: var(--text-2); }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: 'JetBrains Mono', monospace; font-size: .85em; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* ── Header / Nav ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 3px; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.5rem;
  background: var(--glass);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background var(--transition);
}

.brand {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1.1rem;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none !important;
}
.brand-icon { font-size: 1.3rem; -webkit-text-fill-color: initial; }

.nav-links {
  display: flex; align-items: center; gap: .25rem;
}
.nav-links a {
  padding: .4rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 500;
  color: var(--muted);
  transition: color var(--transition), background var(--transition);
  text-decoration: none !important;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--text);
  background: var(--border);
}

.nav-controls { display: flex; align-items: center; gap: .5rem; }

/* Theme toggle */
.toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  transition: background var(--transition), border-color var(--transition);
  color: var(--text);
}
.toggle-btn:hover { background: var(--bg-2); border-color: var(--border-2); }

/* Lang toggle */
.lang-btn {
  padding: .3rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .05em;
  color: var(--muted);
  transition: all var(--transition);
}
.lang-btn:hover, .lang-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Logout button in nav */
.btn-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  transition: all var(--transition);
}
.btn-logout:hover {
  background: var(--risk-crit-bg);
  border-color: var(--risk-crit);
  color: var(--risk-crit);
}

/* Output-language selector (settings page) */
.lang-opt {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
}
.lang-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.lang-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1.1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.lang-opt:hover .lang-chip {
  border-color: var(--accent);
  color: var(--text);
}
.lang-opt input[type="radio"]:checked ~ .lang-chip,
.lang-chip.lang-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1rem 0;
  box-shadow: var(--shadow);
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}
.card:hover { box-shadow: var(--shadow-lg); }
.card-title { font-size: .7rem; font-weight: 700; text-transform: uppercase;
              letter-spacing: .08em; color: var(--muted); margin-bottom: .75rem; }

/* Glass card variant */
.card-glass {
  background: var(--glass);
  backdrop-filter: blur(12px);
  border-color: var(--glass-border);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: .88rem; font-weight: 500;
  cursor: pointer;
  text-decoration: none !important;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn:hover { background: var(--bg-2); border-color: var(--border-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
  opacity: .9;
  box-shadow: 0 6px 30px rgba(99,102,241,.5);
  background: var(--gradient);
}

.btn-sm { padding: .35rem .7rem; font-size: .8rem; }
.btn-danger { color: var(--risk-crit); border-color: var(--risk-crit-bg); }
.btn-danger:hover { background: var(--risk-crit-bg); }

/* Action row */
.actions { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ── Form elements ───────────────────────────────────────────────────────── */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--text-2); margin-bottom: .4rem;
}

input[type="file"],
select,
input[type="text"] {
  width: 100%;
  padding: .6rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.5rem;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── Upload zone ─────────────────────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--border-2);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--card-2);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--accent);
  background: rgba(99,102,241,.04);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.upload-zone input[type="file"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.upload-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.upload-hint { font-size: .82rem; color: var(--muted); margin-top: .5rem; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: .5rem .75rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
td { padding: .65rem .75rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-2); }

/* History table — sortable headers & fixed action column */
th.sortable {
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: color var(--transition);
}
th.sortable:hover { color: var(--accent); }
th.sortable::after {
  content: ' ⇅'; opacity: .3; font-size: .85em; font-weight: 400;
  display: inline-block; margin-left: .15em;
}
th.sortable.sort-asc::after  { content: ' ▲'; opacity: .85; color: var(--accent); }
th.sortable.sort-desc::after { content: ' ▼'; opacity: .85; color: var(--accent); }
th.th-actions { width: 1%; }
td.td-filename {
  max-width: 0;               /* allows text-overflow to work in table */
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
td.td-filename a { color: var(--accent); text-decoration: none; }
td.td-filename a:hover { text-decoration: underline; }
td.td-actions {
  white-space: nowrap;
  width: 1%;
  text-align: right;
}
td.td-actions .btn { margin-left: .3rem; }
td.td-actions .btn:first-child { margin-left: 0; }

/* ── Badges & Pills ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem; font-weight: 600;
  background: var(--bg-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.badge-analyzed        { background: var(--risk-low-bg);  color: var(--risk-low-text); border-color: transparent; }
.badge-analyzing       { background: rgba(99,102,241,.12); color: var(--accent);        border-color: transparent; }
.badge-uploaded        { background: var(--bg-2);         color: var(--muted);          }
.badge-error,
.badge-analyzed_with_errors { background: var(--risk-crit-bg); color: var(--risk-crit-text); border-color: transparent; }

.tag {
  display: inline-block; padding: .15rem .5rem;
  border-radius: 6px; font-size: .72rem; font-weight: 600;
  background: rgba(99,102,241,.1); color: var(--accent);
}

/* ── Risk color helpers ──────────────────────────────────────────────────── */
.risk-low  { --rc: var(--risk-low);  --rb: var(--risk-low-bg);  --rt: var(--risk-low-text); }
.risk-medium { --rc: var(--risk-med);  --rb: var(--risk-med-bg);  --rt: var(--risk-med-text); }
.risk-high { --rc: var(--risk-high); --rb: var(--risk-high-bg); --rt: var(--risk-high-text); }
.risk-critical { --rc: var(--risk-crit); --rb: var(--risk-crit-bg); --rt: var(--risk-crit-text); }

.risk-pill {
  display: inline-flex; align-items: center;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--rb, var(--bg-2));
  color: var(--rt, var(--muted));
}

/* ── Status & feedback ───────────────────────────────────────────────────── */
.status-msg { font-size: .85rem; color: var(--muted); }
.status-ok  { color: var(--risk-low); }
.status-err { color: var(--risk-crit); }
.flash {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem;
  background: var(--risk-med-bg); color: var(--risk-med-text);
  border-radius: var(--radius-sm); border: 1px solid var(--risk-med);
  margin-bottom: 1rem; font-size: .9rem;
}

/* ── Back link ───────────────────────────────────────────────────────────── */
.back-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; font-weight: 500; color: var(--muted);
  margin-bottom: 1rem;
  transition: color var(--transition);
  text-decoration: none !important;
}
.back-link:hover { color: var(--accent); }

/* ── Meta grid ───────────────────────────────────────────────────────────── */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .75rem; margin: 1rem 0;
}
.meta-item { }
.meta-item dt { font-size: .7rem; font-weight: 700; text-transform: uppercase;
               letter-spacing: .07em; color: var(--muted); margin-bottom: .2rem; }
.meta-item dd { font-weight: 600; font-size: .92rem; color: var(--text); }

/* ── Text preview ─────────────────────────────────────────────────────────── */
.text-preview {
  background: var(--bg-2);
  color: var(--text-2);
  padding: 1.25rem;
  border-radius: var(--radius-sm);
  max-height: 380px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .82rem;
  line-height: 1.7;
  border: 1px solid var(--border);
}
[data-theme="dark"] .text-preview {
  background: #0a0d1a;
  color: #cbd5e1;
}

/* ── Hero (home) ─────────────────────────────────────────────────────────── */
.hero {
  padding: 3rem 0 1.5rem;
  text-align: center;
}
.hero h1 {
  background: var(--gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2.6rem; margin-bottom: .75rem;
}
.hero-sub { font-size: 1.05rem; color: var(--muted); max-width: 560px; margin: 0 auto 2rem; }

/* ── Analysis loader ─────────────────────────────────────────────────────── */
.loader-wrap {
  display: none;
  flex-direction: column; align-items: center; gap: 1rem;
  padding: 1.5rem 0;
}
.loader-wrap.active { display: flex; }

.spinner {
  width: 44px; height: 44px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.agent-ticker {
  font-size: .85rem; color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  animation: fadeSlide .4s ease;
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Score card (result page) ─────────────────────────────────────────────── */
.score-banner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  padding: 1.5rem 2rem;
  border-radius: var(--radius);
  background: var(--gradient);
  color: #fff;
  margin: 1rem 0;
  box-shadow: var(--shadow-accent);
}
.score-banner .filename { opacity: .8; font-size: .9rem; }
.score-badge {
  display: flex; align-items: center; gap: .75rem;
}
.score-number {
  font-size: 3rem; font-weight: 800; line-height: 1;
}
.score-level { font-size: 1.1rem; font-weight: 600; opacity: .9; }

/* Score gauge ring */
.gauge-wrap { position: relative; width: 80px; height: 80px; }
.gauge-ring {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: conic-gradient(rgba(255,255,255,.9) var(--pct), rgba(255,255,255,.2) 0);
  display: grid; place-items: center;
  transition: background 1s ease;
}
.gauge-inner {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(99,102,241,.6);
  display: grid; place-items: center;
  font-weight: 800; font-size: 1rem;
  color: #fff;
}

/* ── Result sections ─────────────────────────────────────────────────────── */
.section-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 1rem;
}
.section-label span { font-size: 1.1rem; }

.risk-item {
  border-left: 3px solid var(--rc, var(--border));
  padding: .75rem 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--rb, var(--bg-2));
  margin: .6rem 0;
  transition: box-shadow var(--transition);
}
.risk-item:hover { box-shadow: var(--shadow-sm); }
.risk-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.risk-title { font-weight: 600; font-size: .95rem; }

.sub-text { font-size: .82rem; color: var(--muted); margin-top: .25rem; }
.sub-q    { font-size: .82rem; color: var(--accent); margin-top: .25rem; }
.sub-warn { font-size: .82rem; color: var(--risk-high); margin-top: .25rem; }

/* Result list */
.result-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.result-list li {
  padding: .65rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  transition: border-color var(--transition);
}
.result-list li:hover { border-color: var(--border-2); }

/* Questions numbered list */
.question-list { counter-reset: q; list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.question-list li {
  counter-increment: q;
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .65rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
}
.question-list li::before {
  content: counter(q);
  min-width: 24px; height: 24px;
  background: rgba(99,102,241,.12);
  color: var(--accent);
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700;
  flex-shrink: 0;
}

.disclaimer-box {
  background: var(--bg-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  font-size: .85rem; color: var(--muted);
  line-height: 1.7;
}

/* Download row */
.download-row { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1rem; }

/* ── Settings page ───────────────────────────────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem; margin: 1rem 0;
}
.slot-card {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: border-color var(--transition);
}
.slot-card.primary-slot { border-color: var(--accent); }
.slot-card .slot-head {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem;
}
.slot-badge {
  padding: .15rem .5rem; border-radius: 6px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: rgba(99,102,241,.12); color: var(--accent);
}
.slot-badge.backup { background: rgba(139,92,246,.12); color: var(--accent-2); }

.test-result { margin-top: .6rem; font-size: .8rem; min-height: 1.2rem; }

/* Agent table */
.agent-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.agent-table th {
  padding: .5rem .75rem;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  border-bottom: 1px solid var(--border); text-align: left;
}
.agent-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.agent-table tr:last-child td { border-bottom: none; }
.agent-row:hover td { background: var(--bg-2); }
.agent-icon { font-size: 1.2rem; }
.agent-info strong { font-size: .9rem; font-weight: 600; }
.agent-info small { display: block; font-size: .75rem; color: var(--muted); }

/* Column widths */
.agent-table .col-agent    { width: auto; min-width: 200px; }
.agent-table .col-provider { width: 210px; }
.agent-table .col-model    { width: 190px; }
.agent-table .col-test     { width: 46px; white-space: nowrap; text-align: center; }

/* Selects fill their column */
.agent-table .col-provider select,
.agent-table .col-model    select { width: 100%; min-width: 0; font-size: .82rem; padding: .35rem .55rem; box-sizing: border-box; }

/* Icon-only test button */
.btn-icon { padding: .35rem .5rem; font-size: 1rem; line-height: 1; min-width: 0; }

/* Agent test result — shown below the row or as a tooltip */
.agent-test-result { font-size: .75rem; min-height: 1rem; margin-top: .25rem; text-align: left; }

.provider-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.provider-list li {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem .85rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .88rem;
}
.provider-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--risk-low); flex-shrink: 0;
}
.provider-dot.unavailable { background: var(--risk-crit); }

/* ── About page ──────────────────────────────────────────────────────────── */
.about-hero {
  text-align: center; padding: 3rem 0 2rem;
}
.about-hero h1 {
  background: var(--gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.pipeline-diagram {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 1rem 0; user-select: none;
}
.pipe-node {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-weight: 600; min-width: 220px; text-align: left;
  transition: all var(--transition);
}
.pipe-node:hover { border-color: var(--accent); box-shadow: var(--shadow-accent); }
.pipe-node.highlight {
  border-color: var(--accent);
  background: rgba(99,102,241,.08);
  box-shadow: var(--shadow-accent);
}
.pipe-icon { font-size: 1.5rem; flex-shrink: 0; }
.pipe-label { font-size: .9rem; }
.pipe-sub   { font-size: .75rem; color: var(--muted); font-weight: 400; }

.pipe-arrow {
  width: 2px; height: 32px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  position: relative; flex-shrink: 0;
  opacity: .5;
}
.pipe-arrow::after {
  content: '';
  position: absolute; bottom: -5px; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--accent-2);
}

/* Legacy flat grid (kept for fallback) */
.agents-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .65rem;
  padding: .5rem;
  background: var(--card-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  width: 100%; max-width: 960px;
}

/* ── Wave-based pipeline diagram ─────────────────────────────────────────── */
.wave-section {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--card-2);
  transition: border-color var(--transition);
}
.wave-section.wave-0 { border-color: rgba(99,102,241,.35); }
.wave-section.wave-1 { border-color: var(--border-2); }
.wave-section.wave-2 { border-color: rgba(139,92,246,.3); border-style: dashed; }
.wave-section.wave-3 { border-color: var(--border); border-style: dashed; opacity: .7; }

.wave-header {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.wave-0 .wave-header { background: rgba(99,102,241,.06); }
.wave-2 .wave-header { background: rgba(139,92,246,.05); }
.wave-3 .wave-header { background: var(--bg-2); }

.wave-badge {
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em;
  padding: .18rem .55rem; border-radius: 999px;
}
.wave-0 .wave-badge { background: rgba(99,102,241,.15); color: var(--accent); }
.wave-1 .wave-badge { background: rgba(16,185,129,.12); color: var(--risk-low); }
.wave-2 .wave-badge { background: rgba(139,92,246,.12); color: var(--accent-2); }
.wave-3 .wave-badge { background: var(--bg-2); color: var(--muted); }

.wave-title {
  font-size: .82rem; font-weight: 700; color: var(--text-2);
}
.wave-note {
  margin-left: auto;
  font-size: .7rem; color: var(--muted); font-style: italic;
}

.wave-agents {
  display: grid;
  gap: .6rem;
  padding: .75rem;
}
.wave-agents-1col { grid-template-columns: 1fr; }
.wave-agents-6col { grid-template-columns: repeat(6, 1fr); }
.wave-agents-4col { grid-template-columns: repeat(4, 1fr); }
.wave-agents-auto { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

@media (max-width: 720px) {
  .wave-agents-6col, .wave-agents-4col { grid-template-columns: repeat(2, 1fr); }
}

/* Wave 0 — router card (special accent style) */
.agent-card.wave0 {
  border-color: rgba(99,102,241,.4);
  background: rgba(99,102,241,.05);
}
.agent-card.wave0:hover { border-color: var(--accent); }

/* Wave 2 — conditional cards */
.agent-card.conditional {
  border-style: dashed;
  border-color: rgba(139,92,246,.4);
  background: rgba(139,92,246,.04);
}
.agent-card.conditional::before {
  content: 'if needed';
  position: absolute; top: .35rem; right: .4rem;
  font-size: .58rem; font-weight: 700; text-transform: uppercase;
  color: var(--accent-2); letter-spacing: .05em;
}

/* Wave 3 — future placeholder cards */
.agent-card.future {
  border-style: dashed; border-color: var(--border);
  background: var(--bg-2); opacity: .65;
}
.agent-card.future::before {
  content: 'soon';
  position: absolute; top: .35rem; right: .4rem;
  font-size: .58rem; font-weight: 700; text-transform: uppercase;
  color: var(--muted); letter-spacing: .05em;
}
.agent-card.future:hover { transform: none; box-shadow: none; border-color: var(--border); }

.agent-card {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 1rem .75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  cursor: default;
  transition: all var(--transition);
  position: relative;
}
.agent-card:hover { border-color: var(--accent); box-shadow: var(--shadow-accent); transform: translateY(-2px); }
.agent-card.running {
  border-color: var(--accent);
  background: rgba(99,102,241,.08);
  animation: agentPulse 1s ease infinite;
}
.agent-card.done { border-color: var(--risk-low); }
@keyframes agentPulse {
  0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}
.agent-card .a-icon { font-size: 1.6rem; }
.agent-card .a-name { font-size: .8rem; font-weight: 700; color: var(--text); }
.agent-card .a-model { font-size: .68rem; color: var(--muted); }

.pipe-outputs {
  display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center;
}
.out-node {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 500;
  transition: all var(--transition);
}
.out-node:hover { border-color: var(--accent); }

/* Simulate button */
.sim-btn-wrap { margin: 1.25rem 0; }

/* Tech stack grid */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .65rem; margin: .75rem 0;
}
.tech-item {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem 1rem;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 500;
}
.tech-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
.tech-sub  { font-size: .7rem; color: var(--muted); font-weight: 400; margin-top: .1rem; }
.tech-stack-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
  margin: .25rem 0 .4rem;
}

/* ── Routing summary card ────────────────────────────────────────────────── */
.routing-card {
  background: var(--card-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  margin: .75rem 0;
  box-shadow: var(--shadow-sm);
}
.routing-card summary {
  cursor: pointer;
  display: flex; align-items: center; gap: .6rem;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  list-style: none;
  user-select: none;
}
.routing-card summary::after {
  content: '▼'; font-size: .6rem; margin-left: auto;
  transition: transform var(--transition);
}
.routing-card[open] summary::after { transform: rotate(180deg); }

.routing-meta {
  display: flex; flex-wrap: wrap; gap: .6rem; margin: .85rem 0 .6rem;
  align-items: center;
}
.routing-type-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .8rem;
  background: rgba(99,102,241,.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  font-size: .8rem; font-weight: 700;
}
.routing-conf {
  font-size: .78rem; color: var(--muted);
  padding: .25rem .6rem;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

.routing-agents-row {
  display: flex; flex-wrap: wrap; gap: .45rem; margin: .6rem 0;
}
.agent-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .65rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 600;
  border: 1px solid;
}
.chip-ran    { background: var(--risk-low-bg); color: var(--risk-low-text);
               border-color: var(--risk-low); }
.chip-skip   { background: var(--bg-2);        color: var(--muted);
               border-color: var(--border); text-decoration: line-through; }
.chip-future { background: rgba(99,102,241,.08); color: var(--accent);
               border-color: var(--border-2); border-style: dashed; }

.blocks-grid {
  display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem;
}
.block-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .18rem .55rem;
  border-radius: 6px;
  font-size: .72rem; font-weight: 500;
  border: 1px solid var(--border);
  background: var(--card);
}
.block-chip.detected    { border-color: var(--risk-low); color: var(--risk-low-text);
                          background: var(--risk-low-bg); }
.block-chip.not-detected{ color: var(--muted); opacity: .55; }

/* ── Passport page ───────────────────────────────────────────────────────── */
.passport-hero {
  background: var(--gradient);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  color: #fff;
  margin: 1rem 0;
  box-shadow: var(--shadow-accent);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.passport-hero h1 { color: #fff; font-size: 1.6rem; }
.passport-hero .passport-value {
  font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em;
}
.passport-hero .passport-currency { font-size: 1rem; opacity: .8; }
.passport-meta-row {
  display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .75rem;
}
.passport-meta-chip {
  background: rgba(255,255,255,.18); border-radius: var(--radius-sm);
  padding: .25rem .75rem; font-size: .82rem; font-weight: 500;
}

/* Party cards */
.party-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem; margin-top: .75rem;
}
.party-card {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.party-card:hover { border-color: var(--accent); box-shadow: var(--shadow-accent); }
.party-card .party-role {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent); margin-bottom: .35rem;
}
.party-card .party-name { font-weight: 700; font-size: .97rem; }
.party-card .party-contact {
  font-size: .8rem; color: var(--muted); margin-top: .4rem;
  word-break: break-all;
}

/* Stage bar */
.stage-bar-wrap { margin: .65rem 0; }
.stage-bar-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; margin-bottom: .25rem;
}
.stage-bar-label .stage-name { font-weight: 500; flex: 1; margin-right: .5rem; }
.stage-bar-label .stage-pct  { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.stage-bar-track {
  height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden;
}
.stage-bar-fill {
  height: 100%;
  background: var(--gradient);
  border-radius: 4px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* Chart containers */
.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1rem 0;
}
@media (max-width: 640px) { .charts-row { grid-template-columns: 1fr; } }
.chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.chart-card h3 { font-size: .88rem; color: var(--muted); margin-bottom: 1rem;
  text-transform: uppercase; letter-spacing: .06em; }
.chart-wrap { position: relative; height: 220px; }

/* Penalty table */
.penalty-table { width: 100%; border-collapse: collapse; }
.penalty-table th {
  padding: .45rem .75rem; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  border-bottom: 1px solid var(--border); text-align: left;
}
.penalty-table td {
  padding: .6rem .75rem; border-bottom: 1px solid var(--border); font-size: .88rem;
}
.penalty-table tr:last-child td { border-bottom: none; }
.penalty-table tr:hover td { background: var(--bg-2); }

/* ── Compliance section ───────────────────────────────────────────────────── */
.compliance-header {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; margin-bottom: 1.25rem;
}
.compliance-score-ring {
  position: relative; width: 90px; height: 90px; flex-shrink: 0;
}
.compliance-score-ring svg { width: 90px; height: 90px; }
.compliance-score-ring .ring-text {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 1.3rem; font-weight: 800; color: var(--text);
}
.compliance-score-status {
  font-size: 1.05rem; font-weight: 700;
}
.comp-good     { color: var(--risk-low); }
.comp-attention{ color: var(--risk-med); }
.comp-critical { color: var(--risk-crit); }

.check-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .6rem .85rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: .5rem 0;
  align-items: start;
  transition: border-color var(--transition);
}
.check-item:hover { border-color: var(--border-2); }
.check-status-icon { font-size: 1.25rem; grid-row: 1/3; align-self: center; }
.check-regulation { font-weight: 700; font-size: .92rem; }
.check-finding    { font-size: .83rem; color: var(--text-2); margin-top: .2rem; }
.check-action     { font-size: .8rem; color: var(--accent); margin-top: .3rem;
                    grid-column: 2; font-style: italic; }
.check-sev {
  grid-row: 1; text-align: right;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.sev-high   { color: var(--risk-crit); }
.sev-medium { color: var(--risk-med); }
.sev-low    { color: var(--risk-low); }
.sev-info   { color: var(--muted); }

/* ── Negotiation section ─────────────────────────────────────────────────── */
.neg-meta {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center;
}
.leverage-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
  border: 1px solid;
}
.leverage-strong { background: var(--risk-low-bg); color: var(--risk-low-text); border-color: var(--risk-low); }
.leverage-medium { background: var(--risk-med-bg); color: var(--risk-med-text); border-color: var(--risk-med); }
.leverage-weak   { background: var(--risk-crit-bg);color: var(--risk-crit-text);border-color: var(--risk-crit); }

.neg-point {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: .65rem 0;
  overflow: hidden;
  transition: border-color var(--transition);
}
.neg-point:hover { border-color: var(--border-2); }
.neg-point-head {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1rem;
  background: var(--card-2);
  cursor: pointer;
}
.neg-point-head:hover { background: var(--bg-2); }
.neg-point-body {
  padding: .85rem 1rem;
  border-top: 1px solid var(--border);
  display: none;
}
.neg-point.expanded .neg-point-body { display: block; }
.neg-point-body .proposed-wrap {
  background: rgba(99,102,241,.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .75rem 1rem;
  margin: .65rem 0;
  font-size: .85rem; font-style: italic;
}
.neg-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: .3rem;
}
.neg-lists {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;
}
@media (max-width: 600px) { .neg-lists { grid-template-columns: 1fr; } }
.neg-list-card {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem;
}
.neg-list-card h4 { font-size: .82rem; font-weight: 700; margin-bottom: .65rem; }
.neg-list-card ul { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.neg-list-card li {
  font-size: .83rem; padding: .45rem .6rem;
  border-radius: 6px; background: var(--card);
  border: 1px solid var(--border);
}
.red-line-card  h4 { color: var(--risk-crit); }
.quick-win-card h4 { color: var(--risk-low); }

/* ── Financial exposure section ──────────────────────────────────────────── */
.fin-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: .85rem; margin-bottom: 1.25rem;
}
.fin-kpi {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem;
  text-align: center;
  transition: border-color var(--transition);
}
.fin-kpi:hover { border-color: var(--accent); }
.fin-kpi .kpi-label { font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: .4rem; }
.fin-kpi .kpi-value { font-size: 1.2rem; font-weight: 800; color: var(--text); }
.fin-kpi .kpi-sub   { font-size: .75rem; color: var(--muted); margin-top: .2rem; }

.exposure-item {
  display: flex; align-items: center; gap: 1rem;
  padding: .65rem .85rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-2); margin: .45rem 0;
  font-size: .88rem;
}
.exposure-item .exp-prob {
  padding: .15rem .5rem; border-radius: 6px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  flex-shrink: 0; white-space: nowrap;
}
.prob-high   { background: var(--risk-crit-bg); color: var(--risk-crit-text); }
.prob-medium { background: var(--risk-med-bg);  color: var(--risk-med-text); }
.prob-low    { background: var(--risk-low-bg);  color: var(--risk-low-text); }
.exposure-item .exp-amount { font-weight: 700; margin-left: auto; white-space: nowrap; }

/* ── Compact passport preview (inline on result page) ────────────────────── */
.passport-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: .75rem 0;
}
@media (max-width: 640px) { .passport-preview { grid-template-columns: 1fr; } }
.passport-kpi {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .9rem 1rem;
  display: flex; align-items: center; gap: .75rem;
}
.passport-kpi .pk-icon { font-size: 1.6rem; flex-shrink: 0; }
.passport-kpi .pk-label { font-size: .72rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; }
.passport-kpi .pk-value { font-size: 1rem; font-weight: 700; color: var(--text); margin-top: .1rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  text-align: center; color: var(--muted);
  font-size: .78rem; padding: 1.5rem 1rem;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes fadeIn  { from { opacity:0; transform:translateY(10px);} to {opacity:1;transform:none;} }
.fade-in { animation: fadeIn .4s ease both; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero h1 { font-size: 1.9rem; }
  .score-banner { padding: 1.25rem; }
  .score-number { font-size: 2.2rem; }
  .agents-grid  { grid-template-columns: repeat(2,1fr); }
  .neg-lists    { grid-template-columns: 1fr; }
  .site-header  { padding: .65rem 1rem; }
  .nav-links a span.nav-text { display: none; }
  .settings-grid { grid-template-columns: 1fr; }
}
/* RC review: readable state, keyboard access, responsive navigation. */
.rc-notice { padding:.85rem 1rem; margin:0 0 1.5rem; border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:8px; color:var(--text); background:var(--card); font-size:.85rem; line-height:1.6; }
.notice-warning { padding:1rem 1.2rem; margin:1rem 0; border:1px solid #b7791f; border-left:4px solid #b7791f; border-radius:8px; background:var(--card); color:var(--text); line-height:1.6; }
.notice-warning p { margin:.4rem 0 0; }
.skip-link { position:fixed; left:1rem; top:-100px; z-index:1000; padding:1rem; background:var(--card); color:var(--text); }
.skip-link:focus { top:1rem; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.badge-analyzed_with_errors { background:#fff3cd; color:#684900; }
.container h1, .filename, .passport-value { overflow-wrap:anywhere; }
@media (max-width:900px) {
  body .site-header { flex-wrap:wrap; gap:.5rem; }
  body .brand { font-size:1.05rem; flex:1; white-space:nowrap; }
  body .nav-controls { margin-left:auto; }
  body .nav-links { order:3; width:100%; justify-content:space-between; overflow-x:auto; }
  body .nav-links a { padding:.65rem .5rem; white-space:nowrap; }
  body .hero { padding:1.25rem 0; }
  body .hero h1 { font-size:1.8rem; }
  body .score-banner, body .passport-hero { flex-wrap:wrap; gap:1rem; }
  body .download-row { flex-wrap:wrap; }
  body .meta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.fade-in { animation: none !important; opacity: 1; }
.question-list li { display:grid; grid-template-columns:24px minmax(0,1fr); }
.question-list li::before { grid-column:1; grid-row:1 / span 2; }
.question-list li > span { grid-column:2; min-width:0; overflow-wrap:anywhere; }
.question-list .tag { white-space:normal !important; margin-left:0 !important; width:fit-content; }