/* =============================================================
   dual-research v2 — Page-specific styles for the showcase
   ============================================================= */

/* ── Tweaks panel ──────────────────────────────────── */
.dv-tweaks {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--md-surface-container-high);
  border: 1px solid var(--md-outline-hair);
  border-radius: var(--md-shape-lg);
  padding: 16px 18px;
  box-shadow: var(--md-elev-3);
  min-width: 240px;
  color: var(--md-on-surface);
  font-family: var(--md-font-plain);
}
.dv-tweaks .ttl {
  font: var(--md-w-medium) var(--md-title-s-size)/1 var(--md-font-plain);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
  margin-bottom: 4px;
}
.dv-tweaks__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 0;
  border-top: 1px dashed var(--md-outline-hair);
}
.dv-tweaks__row:first-of-type { border-top: 0; }
.dv-tweaks__row .name { font-size: 14px; }
.dv-tweaks__row .hint { font-size: 11px; color: var(--md-on-surface-faint); }

/* ── Token cards (palette, etc.) ────────────────── */
.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--md-sp-3);
}
.token-card {
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  border-radius: var(--md-shape-md);
  overflow: hidden;
}
.token-card__chip { height: 64px; position: relative; }
.token-card__chip[data-stroke="true"]::after {
  content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.token-card__body { padding: 12px 14px; }
.token-card__role { font: var(--md-w-medium) var(--md-title-s-size)/1.2 var(--md-font-plain); }
.token-card__var {
  font: var(--md-w-regular) 11px/1.2 var(--md-font-data);
  color: var(--md-on-surface-faint); margin-top: 4px;
  word-break: break-all;
}

/* ── Type specimen ──────────────────────────────── */
.type-row {
  display: grid; grid-template-columns: 220px 1fr auto;
  gap: var(--md-sp-6); align-items: baseline;
  padding: var(--md-sp-3) 0;
  border-bottom: 1px solid var(--md-outline-hair);
}
.type-row .meta {
  font-family: var(--md-font-data); font-size: 12px;
  color: var(--md-on-surface-faint);
}
.type-row .role { font: var(--md-w-medium) 13px/1 var(--md-font-plain); color: var(--md-on-surface-variant); }

/* ── Shape ramp ─────────────────────────────────── */
.shape-ramp { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.shape-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.shape-cell .box {
  width: 80px; height: 80px;
  background: var(--md-secondary-container);
}
.shape-cell .lbl { font-size: 12px; color: var(--md-on-surface-variant); }

/* ── Elevation showcase ─────────────────────────── */
.elev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.elev-cell {
  height: 110px;
  background: var(--md-surface-container);
  border-radius: var(--md-shape-md);
  display: flex; align-items: flex-end; padding: 12px;
  font: var(--md-w-medium) var(--md-label-l-size)/1 var(--md-font-plain);
  color: var(--md-on-surface-variant);
}
.elev-cell--0 { box-shadow: var(--md-elev-0); }
.elev-cell--1 { box-shadow: var(--md-elev-1); background: var(--md-surface-1); }
.elev-cell--2 { box-shadow: var(--md-elev-2); background: var(--md-surface-2); }
.elev-cell--3 { box-shadow: var(--md-elev-3); background: var(--md-surface-3); }
.elev-cell--4 { box-shadow: var(--md-elev-4); background: var(--md-surface-4); }
.elev-cell--5 { box-shadow: var(--md-elev-5); background: var(--md-surface-5); }

/* ── State-layer demo ───────────────────────────── */
.state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.state-cell {
  position: relative;
  height: 80px; border-radius: var(--md-shape-md);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  display: flex; align-items: center; justify-content: center;
  font: var(--md-w-medium) var(--md-label-l-size)/1 var(--md-font-plain);
}
.state-cell::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor;
}
.state-cell--rest::after  { opacity: 0; }
.state-cell--hover::after { opacity: 0.08; }
.state-cell--focus::after { opacity: 0.10; }
.state-cell--press::after { opacity: 0.12; }
.state-cell--drag::after  { opacity: 0.16; }

/* ── Agent strip primitive ──────────────────────── */
.agent-strip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 12px;
  border-radius: var(--md-shape-full);
  font: var(--md-w-medium) var(--md-label-l-size)/1 var(--md-font-plain);
  letter-spacing: 0.04em;
}
.agent-strip--a { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.agent-strip--b { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.agent-strip .dot { width: 8px; height: 8px; border-radius: 50%; }
.agent-strip--a .dot { background: var(--p-sable); }
.agent-strip--b .dot { background: var(--p-sage); }

/* ── Run-list row ───────────────────────────────── */
.run-list { display: flex; flex-direction: column; }
.run-row {
  display: grid;
  grid-template-columns: 110px 1fr 120px 100px 100px 90px 110px 110px;
  align-items: center; gap: 16px;
  padding: 16px 20px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  position: relative;
  cursor: pointer;
  transition: background var(--md-dur-short-3) var(--md-easing-standard);
}
.run-row::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.run-row:hover::before { opacity: var(--md-state-hover); }
.run-row + .run-row { margin-top: 8px; }
.run-row .id  { font-family: var(--md-font-data); color: var(--md-on-surface-faint); font-size: 13px; }
.run-row .topic {
  font: var(--md-w-medium) var(--md-body-l-size)/var(--md-body-l-lh) var(--md-font-plain);
  color: var(--md-on-surface);
}
.run-row .topic small {
  display: block; color: var(--md-on-surface-faint); font: var(--md-w-regular) 12px/1.4 var(--md-font-plain);
  margin-top: 2px;
}
.run-row .num { font-family: var(--md-font-data); color: var(--md-on-surface); font-size: 13px; text-align: right; }

/* responsive collapse */
@media (max-width: 1499px) {
  .run-row {
    grid-template-columns: 100px 1fr 110px 90px 110px;
    grid-template-areas:
      "id topic phase status duration"
      "id topic rounds tokens cost";
    column-gap: 12px; row-gap: 4px;
    padding: 12px 16px;
  }
  .run-row > :nth-child(1) { grid-area: id; }
  .run-row > :nth-child(2) { grid-area: topic; }
  .run-row > :nth-child(3) { grid-area: phase; }
  .run-row > :nth-child(4) { grid-area: rounds; }
  .run-row > :nth-child(5) { grid-area: status; }
  .run-row > :nth-child(6) { grid-area: duration; }
  .run-row > :nth-child(7) { grid-area: tokens; }
  .run-row > :nth-child(8) { grid-area: cost; }
}

/* ── Phase rail ─────────────────────────────────── */
.phase-rail {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  padding: 16px 20px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
}
.phase-rail__cell {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  border-radius: var(--md-shape-sm);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
}
.phase-rail__cell .ph { font: var(--md-w-medium) var(--md-label-s-size)/1 var(--md-font-plain); letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-on-surface-faint); }
.phase-rail__cell .name { font: var(--md-w-medium) var(--md-title-s-size)/1.3 var(--md-font-plain); color: var(--md-on-surface); }
.phase-rail__cell .meta { font: 12px/1.3 var(--md-font-plain); color: var(--md-on-surface-faint); }
.phase-rail__cell--done {
  background: color-mix(in srgb, var(--p-ok) 14%, var(--md-surface-container-high));
  color: var(--md-on-surface);
}
.phase-rail__cell--current {
  background: color-mix(in srgb, var(--p-info) 16%, var(--md-surface-container-high));
  color: var(--md-on-surface);
  outline: 2px solid color-mix(in srgb, var(--p-info) 50%, transparent);
}

/* ── Critique header ────────────────────────────── */
.crit {
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  overflow: hidden;
}
.crit__head {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  background: var(--md-surface-container-high);
  border-bottom: 1px solid var(--md-outline-hair);
}
.crit__head .title { font: var(--md-w-medium) var(--md-title-m-size)/1 var(--md-font-plain); }
.crit__head .spacer { flex: 1; }
.crit__body { padding: 16px 20px; min-height: 120px; }
.crit__counts {
  display: inline-flex; gap: 12px;
  font-family: var(--md-font-data); font-size: 12px; color: var(--md-on-surface-variant);
}
.crit__counts b { color: var(--md-on-surface); }

/* ── Question thread ────────────────────────────── */
.qt {
  display: flex; flex-direction: column; gap: 16px;
}
.qt__msg {
  display: grid; grid-template-columns: 80px 1fr; gap: 16px;
  padding: 12px 16px;
  border-radius: var(--md-shape-md);
  border-left: 3px solid;
}
.qt__msg--a { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: var(--p-sable); }
.qt__msg--b { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: var(--p-sage); }
.qt__who { font: var(--md-w-medium) var(--md-label-m-size)/1.2 var(--md-font-plain); letter-spacing: 0.06em; text-transform: uppercase; }
.qt__pos { font: var(--md-w-regular) 11px/1.2 var(--md-font-data); margin-top: 4px; opacity: 0.7; }
.qt__quote {
  font: var(--md-w-regular) var(--md-body-l-size)/var(--md-body-l-lh) var(--md-font-brand);
  font-style: italic;
}

/* ── Consumption row ────────────────────────────── */
.consume { display: flex; flex-direction: column; gap: 16px; }
.consume__row {
  display: grid; grid-template-columns: 80px 1fr 220px;
  gap: 24px; align-items: center;
  padding: 16px 20px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
}
.consume__phase {
  font: var(--md-w-medium) var(--md-label-l-size)/1 var(--md-font-plain);
  color: var(--md-on-surface);
}
.consume__bars { display: flex; flex-direction: column; gap: 8px; }
.consume__bar-row { display: grid; grid-template-columns: 84px 1fr 80px; gap: 12px; align-items: center; font-size: 12px; }
.consume__label { color: var(--md-on-surface-faint); font: var(--md-w-medium) 11px/1 var(--md-font-plain); letter-spacing: 0.08em; text-transform: uppercase; }
.consume__track {
  position: relative; height: 8px; border-radius: var(--md-shape-full);
  background: var(--md-surface-container-high);
}
.consume__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: inherit;
}
.consume__fill--a { background: var(--p-sable); }
.consume__fill--b { background: var(--p-sage); }
.consume__num { font-family: var(--md-font-data); color: var(--md-on-surface); text-align: right; }
.consume__cost {
  display: flex; flex-direction: column; align-items: flex-end;
}
.consume__cost .v { font: var(--md-w-medium) 22px/1 var(--md-font-data); color: var(--md-on-surface); }
.consume__cost .l { font-size: 11px; color: var(--md-on-surface-faint); }

@media (max-width: 1499px) {
  .consume__row { grid-template-columns: 60px 1fr 140px; gap: 12px; }
}

/* ── Agent input panel ──────────────────────────── */
.agent-input {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.agent-input__pane {
  border-radius: var(--md-shape-md);
  border: 1px solid var(--md-outline-hair);
  padding: 16px;
  background: var(--md-surface-container);
  min-height: 220px;
  position: relative;
}
.agent-input__pane--a { background: color-mix(in srgb, var(--md-primary) 5%, var(--md-surface-container)); border-color: color-mix(in srgb, var(--md-primary) 28%, var(--md-outline-hair)); }
.agent-input__pane--b { background: color-mix(in srgb, var(--md-secondary) 5%, var(--md-surface-container)); border-color: color-mix(in srgb, var(--md-secondary) 28%, var(--md-outline-hair)); }
.agent-input__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.agent-input__body {
  font-family: var(--md-font-data); font-size: 13px; line-height: 1.55;
  color: var(--md-on-surface-variant); white-space: pre-wrap;
}

@media (max-width: 1499px) { .agent-input { grid-template-columns: 1fr; } }

/* ── ProgressSegs (admin) ───────────────────────── */
.seg-track {
  display: flex; gap: 2px; height: 12px;
  width: 100%; border-radius: var(--md-shape-full); overflow: hidden;
  background: var(--md-surface-container);
}
.seg-track__seg { flex: 1; min-width: 8px; background: var(--md-surface-container-highest); }
.seg-track__seg--done   { background: var(--p-ok); }
.seg-track__seg--curr   { background: var(--p-info); }
.seg-track__seg--queued { background: var(--md-outline-variant); }

/* ── Skeleton loader ────────────────────────────── */
@keyframes md-shimmer {
  0%   { background-position: -240px 0; }
  100% { background-position: 240px 0; }
}
.skel {
  border-radius: var(--md-shape-sm);
  background: linear-gradient(90deg, var(--md-surface-container) 0%, var(--md-surface-container-high) 50%, var(--md-surface-container) 100%);
  background-size: 480px 100%;
  animation: md-shimmer 1.4s linear infinite;
}

/* ── Loading state container ────────────────────── */
.load-card { display: flex; flex-direction: column; gap: 12px; }

/* ── Onboarding scenes ──────────────────────────── */
.scene {
  border-radius: var(--md-shape-lg);
  border: 1px solid var(--md-outline-hair);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 24px,
      color-mix(in srgb, var(--md-surface-tint) 3%, transparent) 24px 25px),
    var(--md-surface-container-low);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.scene__label {
  position: absolute; top: 16px; left: 16px;
  font: var(--md-w-medium) var(--md-label-s-size)/1 var(--md-font-plain);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
}
.scene__viewport {
  margin-top: 24px;
  background: var(--md-surface);
  border-radius: var(--md-shape-md);
  border: 1px solid var(--md-outline-hair);
  position: relative; overflow: hidden;
}
.scene__mask {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(0,0,0,0.55);
}
body.light .scene__mask { background: rgba(20,23,28,0.30); }
.scene__cutout {
  position: absolute; pointer-events: none;
  border-radius: var(--md-shape-md);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 2px var(--p-info);
}
body.light .scene__cutout { box-shadow: 0 0 0 9999px rgba(20,23,28,0.30), 0 0 0 2px var(--p-info); }

/* Callout (tour bubble) */
.callout {
  position: absolute;
  width: 360px;
  background: var(--md-surface-3);
  color: var(--md-on-surface);
  border-radius: var(--md-shape-lg);
  border: 1px solid var(--md-outline-hair);
  padding: 20px;
  box-shadow: var(--md-elev-3);
}
.callout__step {
  font: var(--md-w-medium) var(--md-label-s-size)/1 var(--md-font-plain);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-primary);
  margin-bottom: 8px;
}
.callout__title {
  font: var(--md-w-medium) var(--md-title-l-size)/var(--md-title-l-lh) var(--md-font-brand);
  margin: 0 0 8px;
}
.callout__body { color: var(--md-on-surface-variant); margin-bottom: 16px; font: var(--md-body-m-size)/var(--md-body-m-lh) var(--md-font-plain); }
.callout__progress {
  display: inline-flex; gap: 4px; vertical-align: middle; margin-right: 16px;
}
.callout__progress span {
  width: 18px; height: 4px; border-radius: 4px;
  background: var(--md-outline-variant);
}
.callout__progress span.on { background: var(--md-primary); }
.callout__actions { display: flex; align-items: center; }
.callout__spacer { flex: 1; }

/* ── How It Works ───────────────────────────────── */
.hiw { display: flex; flex-direction: column; gap: 96px; }
.hiw-sec { scroll-margin-top: 80px; }
.hiw-sec > .label {
  font: var(--md-w-medium) var(--md-label-m-size)/1 var(--md-font-plain);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--md-primary);
  margin-bottom: 8px;
}
.hiw-sec > h3 {
  font: var(--md-w-regular) var(--md-headline-l-size)/var(--md-headline-l-lh) var(--md-font-brand);
  margin: 0 0 16px; letter-spacing: -0.01em;
}
.hiw-sec > .lede {
  max-width: 720px;
  color: var(--md-on-surface-variant);
  margin: 0 0 28px;
  font: var(--md-body-l-size)/var(--md-body-l-lh) var(--md-font-plain);
}
.hiw-diagram {
  border-radius: var(--md-shape-lg);
  overflow: hidden;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-hair);
  box-shadow: var(--md-elev-1);
}
.hiw-diagram svg { display: block; width: 100%; height: auto; }

/* ── States grid ────────────────────────────────── */
.states-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.state-card {
  padding: 16px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
}
.state-card .name { font: var(--md-w-medium) var(--md-title-s-size)/1 var(--md-font-plain); margin-bottom: 6px; }
.state-card .desc { color: var(--md-on-surface-variant); font-size: 13px; line-height: 1.45; }

/* ── A11y demos ─────────────────────────────────── */
.a11y-row {
  display: grid; grid-template-columns: 200px 1fr;
  align-items: center; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--md-outline-hair);
}
.a11y-row .name { font: var(--md-w-medium) var(--md-title-s-size)/1 var(--md-font-plain); }
.a11y-row .desc { color: var(--md-on-surface-variant); }

/* ── Changelog ──────────────────────────────────── */
.changelog { display: flex; flex-direction: column; gap: 32px; }
.changelog__entry { display: grid; grid-template-columns: 140px 1fr; gap: 32px; align-items: baseline; }
.changelog__date {
  font: var(--md-w-medium) var(--md-label-m-size)/1 var(--md-font-plain);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
  font-family: var(--md-font-data);
}
.changelog__body h4 {
  font: var(--md-w-medium) var(--md-title-m-size)/1.3 var(--md-font-plain);
  margin: 0 0 8px;
}
.changelog__body ul { margin: 0; padding-left: 20px; color: var(--md-on-surface-variant); }
.changelog__body ul li { margin: 4px 0; }

/* ── Icon set ───────────────────────────────────── */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.icon-card {
  padding: 16px 12px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.icon-card svg { width: 24px; height: 24px; color: var(--md-on-surface-variant); }
.icon-card .name { font-size: 12px; color: var(--md-on-surface-faint); }

/* ── Light-mode preview frame ──────────────────── */
.lm-frame {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.lm-frame__half {
  border-radius: var(--md-shape-md);
  overflow: hidden;
  border: 1px solid var(--md-outline-hair);
  min-height: 320px;
  padding: 24px;
}
.lm-frame__half--dark  { background: #0d0f12; color: #fff; }
.lm-frame__half--light { background: #faf9f6; color: #04060a; }

/* ── Data formatting examples ─────────────────── */
.fmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fmt-card {
  padding: 14px 16px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
}
.fmt-card .role { font: var(--md-w-medium) var(--md-label-m-size)/1 var(--md-font-plain); letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-on-surface-faint); margin-bottom: 6px; }
.fmt-card .v { font: var(--md-w-medium) 18px/1.2 var(--md-font-data); color: var(--md-on-surface); }
.fmt-card .n { color: var(--md-on-surface-variant); font-size: 12px; margin-top: 4px; }

/* ── Responsive checklist callouts ────────────── */
.resp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.resp-card { padding: 20px; border-radius: var(--md-shape-md); background: var(--md-surface-container); border: 1px solid var(--md-outline-hair); }
.resp-card .lbl { font: var(--md-w-medium) var(--md-label-m-size)/1 var(--md-font-plain); letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-primary); margin-bottom: 8px; }
.resp-card h4 { font: var(--md-w-medium) var(--md-title-l-size)/1.2 var(--md-font-plain); margin: 0 0 12px; }
.resp-card ul { margin: 0; padding-left: 20px; color: var(--md-on-surface-variant); }
@media (max-width: 1499px) { .resp-grid { grid-template-columns: 1fr; } }


/* =============================================================
   v2.1 — Badge system + reworked QuestionThread / Critique / Consumption
   ============================================================= */

/* ── Tiny agent initial badge ───────────────────── */
.ai {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font: var(--md-w-semi) 10px/1 var(--md-font-plain);
  letter-spacing: 0;
  flex: 0 0 auto;
}
.ai-sm { width: 16px; height: 16px; font-size: 9px; }
.ai-a { background: var(--md-primary);   color: var(--md-on-primary); }
.ai-b { background: var(--md-secondary); color: var(--md-on-secondary); }

/* ── qref pill — Q·04, D·07 etc. ────────────────── */
.qref {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: var(--md-shape-sm);
  background: var(--md-surface-container-high);
  box-shadow: inset 0 0 0 1px var(--md-outline-hair);
  font: var(--md-w-semi) 12px/1 var(--md-font-data);
  color: var(--md-on-surface);
}
.qref-k {
  font: var(--md-w-semi) 11px/1 var(--md-font-plain);
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--md-shape-xs);
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.qref[data-kind="D"] .qref-k { background: var(--md-error-container); color: var(--md-on-error-container); }
.qref[data-kind="I"] .qref-k { background: var(--md-error-container); color: var(--md-on-error-container); }
.qref[data-kind="C"] .qref-k { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.qref-sep { color: var(--md-on-surface-faint); font-weight: var(--md-w-regular); }
.qref-n { font-variant-numeric: tabular-nums; }
.qref-by {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 6px 0 4px;
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
}
.qref-by.is-a .qref-by-n { color: var(--p-sable); }
.qref-by.is-b .qref-by-n { color: var(--p-sage); }
.qref-round {
  font: var(--md-w-medium) 11px/1 var(--md-font-data);
  color: var(--md-on-surface-faint);
  padding-left: 4px;
  border-left: 1px solid var(--md-outline-hair);
}

/* ── Tone chips (for state) ─────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: var(--md-shape-full);
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.chip.tone-ok    { background: color-mix(in srgb, var(--p-ok)    18%, transparent); color: var(--p-ok); }
.chip.tone-info  { background: color-mix(in srgb, var(--p-info)  18%, transparent); color: var(--p-info); }
.chip.tone-warn  { background: color-mix(in srgb, var(--p-warn)  18%, transparent); color: var(--p-warn); }
.chip.tone-err   { background: color-mix(in srgb, var(--p-err)   18%, transparent); color: var(--p-err); }
.chip.tone-idle  { background: color-mix(in srgb, var(--p-idle)  28%, transparent); color: var(--md-on-surface-variant); }
.chip.tone-a     { background: var(--md-primary-container);   color: var(--md-on-primary-container); }
.chip.tone-b     { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.chip.tone-neutral { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }
.chip .ico { width: 12px; height: 12px; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.no-dot::before { display: none; }

/* ── Delta chip (Q +5 / -1) ─────────────────────── */
.delta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border-radius: var(--md-shape-sm);
  background: var(--md-surface-container-high);
  font: var(--md-w-medium) 11px/1 var(--md-font-data);
  color: var(--md-on-surface-variant);
}
.delta-chip .up   { color: var(--p-info); }
.delta-chip .down { color: var(--p-ok);   }

/* ── Reworked QuestionThread ────────────────────── */
.qthread {
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  border-left: 3px solid var(--md-outline);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.qthread.is-open     { border-left-color: var(--p-warn); }
.qthread.is-resolved { border-left-color: var(--p-ok); }
.qthread.is-drift    { border-left-color: var(--p-err); }
.qt-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qt-head .right { margin-left: auto; }

.qt-timeline { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.qt-row {
  display: grid; grid-template-columns: minmax(160px, auto) 1fr;
  gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--md-shape-sm);
  background: var(--md-surface-container-low);
}
.qt-row.is-a       { background: var(--md-primary-container);   color: var(--md-on-primary-container); }
.qt-row.is-b       { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.qt-row.is-ghosted { background: color-mix(in srgb, var(--p-warn) 12%, var(--md-surface-container-low)); }
.qt-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border-radius: var(--md-shape-full);
  background: rgba(0,0,0,0.20);
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  white-space: nowrap; align-self: flex-start;
}
body.light .qt-pill { background: rgba(255,255,255,0.45); }
.qt-agent { font-weight: var(--md-w-semi); }
.qt-sep   { opacity: 0.5; }
.qt-round { font-family: var(--md-font-data); opacity: 0.85; }
.qt-verdict {
  font: var(--md-w-semi) 10px/1 var(--md-font-plain);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.qt-quote {
  margin: 0;
  font: var(--md-w-regular) var(--md-body-l-size)/var(--md-body-l-lh) var(--md-font-brand);
  font-style: italic;
}
.qt-resolved-foot, .qt-drift {
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
  padding-top: 6px;
  border-top: 1px dashed var(--md-outline-hair);
}
.qthread.is-resolved .qt-resolved-foot { color: var(--p-ok); }
.qthread.is-drift .qt-drift { color: var(--p-err); }

/* ── Reworked Critique pane header ──────────────── */
.crit2 {
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  overflow: hidden;
}
.crit2 .bar1, .crit2 .bar2 {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  background: var(--md-surface-container-high);
}
.crit2 .bar1 { border-bottom: 1px solid var(--md-outline-hair); }
.crit2 .bar2 { border-bottom: 1px solid var(--md-outline-hair); background: var(--md-surface-container); }
.crit2 .ttl  { font: var(--md-w-medium) var(--md-title-m-size)/1 var(--md-font-plain); }
.crit2 .vbar { width: 1px; height: 20px; background: var(--md-outline-hair); }

.phase-tabs { display: inline-flex; gap: 4px; }
.phase-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border: 0; cursor: pointer;
  background: transparent;
  border-radius: var(--md-shape-sm);
  color: var(--md-on-surface-variant);
  font: var(--md-w-medium) 12px/1 var(--md-font-plain);
  position: relative;
}
.phase-tab::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.phase-tab:hover::before { opacity: var(--md-state-hover); }
.phase-tab.is-active {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.phase-tab .pcode {
  font: var(--md-w-semi) 11px/1 var(--md-font-data);
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.phase-tab .pname { font-weight: var(--md-w-medium); }
.phase-tab .sigma { font-family: var(--md-font-brand); font-size: 16px; font-weight: var(--md-w-regular); line-height: 1; }

.crit2 .right { margin-left: auto; display: inline-flex; gap: 16px; align-items: center; }
.crit-totals {
  display: inline-flex; gap: 16px; align-items: baseline;
  font-family: var(--md-font-plain);
}
.crit-totals > span {
  display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
}
.crit-totals .n   { font: var(--md-w-semi) 18px/1 var(--md-font-data); color: var(--md-on-surface); }
.crit-totals .lbl { font: var(--md-w-medium) 10px/1 var(--md-font-plain); letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-on-surface-faint); margin-top: 4px; }
.crit-totals .n.is-info { color: var(--p-info); }
.crit-totals .n.is-ok   { color: var(--p-ok); }
.drift-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border-radius: var(--md-shape-full);
  background: color-mix(in srgb, var(--p-err) 18%, transparent);
  color: var(--p-err);
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  letter-spacing: 0.4px;
}
.drift-chip svg { width: 12px; height: 12px; }

/* Kind tabs (Bar 2) */
.kind-tabs { display: inline-flex; gap: 2px; }
.kind-tab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--md-shape-sm);
  color: var(--md-on-surface-variant);
  font: var(--md-w-medium) 12px/1 var(--md-font-plain);
  position: relative;
}
.kind-tab::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.kind-tab:hover::before { opacity: var(--md-state-hover); }
.kind-tab.is-active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.kind-tab.is-zero  { color: var(--md-on-surface-faint); opacity: 0.55; }
.kind-tab .ct {
  font: var(--md-w-semi) 11px/1 var(--md-font-data);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  padding: 4px 6px;
  border-radius: var(--md-shape-xs);
  min-width: 18px; text-align: center;
}
.kind-tab .ct.is-info { background: color-mix(in srgb, var(--p-info) 22%, transparent); color: var(--p-info); }
.kind-tab .ct.is-warn { background: color-mix(in srgb, var(--p-warn) 22%, transparent); color: var(--p-warn); }
.kind-tab .ct.is-err  { background: color-mix(in srgb, var(--p-err)  22%, transparent); color: var(--p-err); }
.kind-tab.is-active .ct { background: rgba(0,0,0,0.18); color: inherit; }

/* Tab-group · solid (agent/status segments) */
.tab-group-solid {
  display: inline-flex;
  background: var(--md-surface-container-high);
  border-radius: var(--md-shape-full);
  padding: 4px;
  gap: 2px;
}
.tab-solid {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--md-shape-full);
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  color: var(--md-on-surface-variant);
}
.tab-solid.is-active { background: var(--md-surface); color: var(--md-on-surface); box-shadow: var(--md-elev-1); }
.tab-solid .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Critique item card · short form (for header demos) */
.sc {
  padding: 14px 16px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-hair);
  border-left: 3px solid var(--md-outline);
  display: flex; flex-direction: column; gap: 8px;
}
.sc.is-open     { border-left-color: var(--p-warn); }
.sc.is-resolved { border-left-color: var(--p-ok); }
.sc.is-drift    { border-left-color: var(--p-err); }
.sc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-by { font-size: 12px; color: var(--md-on-surface-faint); }
.sc-by .a { color: var(--p-sable); font-weight: var(--md-w-medium); }
.sc-by .b { color: var(--p-sage);  font-weight: var(--md-w-medium); }
.sc-q { font: var(--md-w-regular) 14px/1.5 var(--md-font-brand); color: var(--md-on-surface); }

/* ── Reworked Consumption · CCX cards ─────────── */
.ccx {
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  border-radius: var(--md-shape-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
/* Spec 0146 — 3-column grid mirrors .ccx-bar-row so the percentage
   at column 2 lands above the right edge of the bar fill and the
   chevron at column 3 lands at the card's right edge. */
.ccx-header {
  display: grid;
  grid-template-columns: minmax(140px, 28%) 1fr minmax(110px, max-content);
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
}
.ccx-header .hd-id {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0; overflow: hidden;
}
.ccx-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font: var(--md-w-semi) 11px/1 var(--md-font-plain);
}
.ccx-icon.a { background: var(--md-primary);   color: var(--md-on-primary); }
.ccx-icon.b { background: var(--md-secondary); color: var(--md-on-secondary); }
.ccx-header .nm { font: var(--md-w-medium) var(--md-title-s-size)/1 var(--md-font-plain); }
.ccx-header .stats {
  justify-self: end;
  white-space: nowrap;
  display: inline-flex; gap: 8px; align-items: baseline;
  font: var(--md-w-regular) var(--md-body-s-size)/1 var(--md-font-data);
  color: var(--md-on-surface-faint);
  font-variant-numeric: tabular-nums;
}
.ccx-header .stats .sep { color: var(--md-on-surface-faint); }
.ccx-header .stats .pct { color: var(--md-on-surface-faint); font-style: normal; }
.ccx-header .chev {
  justify-self: end;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--md-on-surface-variant); cursor: pointer;
}

.ccx-bar-row, .ccx-sub-row {
  display: grid; grid-template-columns: 140px 1fr 100px;
  gap: 12px; align-items: center;
  font: var(--md-w-regular) 12px/1 var(--md-font-plain);
}
.ccx-bar-row.is-total { font-weight: var(--md-w-semi); color: var(--md-on-surface); }
.ccx-bar-row .lbl, .ccx-sub-row .lbl { color: var(--md-on-surface-variant); }
.ccx-bar-row.is-total .lbl { color: var(--md-on-surface); }
.ccx-sub-row .lbl { font-size: 12px; padding-left: 12px; }
.ccx-bar {
  position: relative;
  height: 10px;
  background: var(--md-surface-container-high);
  border-radius: var(--md-shape-full);
  overflow: hidden;
}
.ccx-bar.thin { height: 6px; }
.ccx-bar .fl { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; }
.ccx-bar .fl.in   { background: var(--p-sable); }
.ccx-bar .fl.out  { background: var(--p-sable); opacity: 0.55; }
.ccx-bar .fl.in-b { background: var(--p-sage); }
.ccx-bar .fl.out-b{ background: var(--p-sage); opacity: 0.55; }
.ccx-bar .fl.sys   { background: color-mix(in srgb, var(--p-sable) 75%, var(--md-on-surface)); }
.ccx-bar .fl.hist  { background: var(--p-sable); }
.ccx-bar .fl.round { background: color-mix(in srgb, var(--p-sable) 60%, var(--md-on-surface)); }
.ccx-bar .fl.tools { background: color-mix(in srgb, var(--p-info)  70%, transparent); }
.ccx-bar .fl.web   { background: var(--p-info); }
.ccx-bar .fl.reason{ background: var(--p-sable); }
.ccx-bar .fl.resp  { background: color-mix(in srgb, var(--p-sable) 60%, var(--md-on-surface)); }
.ccx-bar .fl.toolc { background: var(--p-info); }
.ccx-bar .reuse {
  position: absolute; top: 0; bottom: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.40) 0 3px,
      rgba(255,255,255,0)    3px 6px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
body.light .ccx-bar .reuse {
  background: repeating-linear-gradient(135deg, rgba(0,0,0,0.18) 0 3px, rgba(0,0,0,0) 3px 6px);
  mix-blend-mode: normal;
}

.ccx-bar-row .num, .ccx-sub-row .num {
  font: var(--md-w-medium) 12px/1 var(--md-font-data);
  text-align: right;
  display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
}
.ccx-bar-row .num { font-size: 13px; font-weight: var(--md-w-semi); }
.ccx-sub-row .num .mark {
  font: var(--md-w-medium) 10px/1 var(--md-font-plain);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 5px;
  background: color-mix(in srgb, var(--p-info) 16%, transparent);
  color: var(--p-info);
  border-radius: var(--md-shape-xs);
}
.ccx-divider { height: 1px; background: var(--md-outline-hair); margin: 4px 0 6px; }
.ccx-section-spacer { height: 8px; }
.ccx-totals {
  display: grid; grid-template-columns: 1fr;
  gap: 4px;
  padding: 10px 12px;
  margin-top: 8px;
  background: var(--md-surface-container-low);
  border-radius: var(--md-shape-sm);
  border: 1px solid var(--md-outline-hair);
}
.ccx-totals .line {
  display: flex; align-items: baseline; justify-content: space-between;
  font: var(--md-w-regular) 12px/1 var(--md-font-data);
  color: var(--md-on-surface-variant);
}
.ccx-totals .line .v { font: var(--md-w-semi) 13px/1 var(--md-font-data); color: var(--md-on-surface); font-variant-numeric: tabular-nums; }
.ccx-totals .line .l { font-size: 11px; color: var(--md-on-surface-faint); letter-spacing: 0.04em; }
.ccx-totals .line.is-savings .v { color: var(--p-ok); }
.ccx-totals .line.is-grand   { padding-top: 4px; border-top: 1px solid var(--md-outline-hair); margin-top: 4px; }
.ccx-totals .line.is-grand .v { font-size: 15px; }

.cards-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1099px) { .cards-2up { grid-template-columns: 1fr; } }

.round-label {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
  font: var(--md-w-medium) 10px/1 var(--md-font-plain);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
}
.round-label .pcode { font: var(--md-w-semi) 10px/1 var(--md-font-data); color: var(--md-on-surface); }
.phase-group-head {
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--md-primary);
  padding: 16px 0 8px;
}

/* ── Run detail · side-by-side scene ────────────── */
.rdv {
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  overflow: hidden;
}
.rdv__hd {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  background: var(--md-surface-container-high);
  border-bottom: 1px solid var(--md-outline-hair);
  flex-wrap: wrap;
}
.rdv__hd .runid {
  font: var(--md-w-semi) 13px/1 var(--md-font-data);
  padding: 4px 8px;
  background: var(--md-surface);
  border-radius: var(--md-shape-sm);
  border: 1px solid var(--md-outline-hair);
}
.rdv__hd .topic { font: var(--md-w-medium) var(--md-title-m-size)/1 var(--md-font-plain); }
.rdv__hd .totals {
  display: inline-flex; gap: 12px; margin-left: auto;
  font: 12px/1 var(--md-font-data); color: var(--md-on-surface-variant);
}
.rdv__hd .totals b { color: var(--md-on-surface); font-weight: var(--md-w-semi); }

.rdv__body { display: grid; grid-template-columns: 200px 1fr 380px; min-height: 480px; }
@media (max-width: 1499px) { .rdv__body { grid-template-columns: 160px 1fr 340px; } }
@media (max-width: 1099px) { .rdv__body { grid-template-columns: 1fr; } }

.rdv__rail { border-right: 1px solid var(--md-outline-hair); padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--md-surface-container-low); }
.prl {
  position: relative;
  display: grid; grid-template-columns: 32px 1fr;
  gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: var(--md-shape-sm);
  color: var(--md-on-surface-variant);
  font: var(--md-w-medium) 12px/1.3 var(--md-font-plain);
  cursor: pointer;
}
.prl::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; }
.prl:hover::before { opacity: var(--md-state-hover); }
.prl.is-done    { color: var(--md-on-surface); }
.prl.is-current { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.prl .pcode {
  font: var(--md-w-semi) 11px/1 var(--md-font-data);
  background: var(--md-surface-container-high);
  padding: 4px 6px;
  border-radius: var(--md-shape-xs);
  text-align: center;
  color: var(--md-on-surface);
}
.prl.is-done .pcode    { background: color-mix(in srgb, var(--p-ok) 28%, transparent); color: var(--p-ok); }
.prl.is-current .pcode { background: rgba(0,0,0,0.18); color: inherit; }

.rdv__main { padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.rdv__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--md-outline-hair); margin: -16px -16px 0; padding: 0 16px; }

.tlcard {
  padding: 14px 16px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-hair);
  border-left: 3px solid var(--md-outline);
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.tlcard.is-a { border-left-color: var(--p-sable); }
.tlcard.is-b { border-left-color: var(--p-sage); }
.tlcard.is-info { border-left-color: var(--p-info); }
.tlcard.is-ok   { border-left-color: var(--p-ok); }
.tlcard.is-warn { border-left-color: var(--p-warn); }
.tlcard.is-current { background: color-mix(in srgb, var(--p-info) 8%, var(--md-surface-container-low)); }
.tlcard__hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tlcard__hd .right { margin-left: auto; }
.tlcard__title { font: var(--md-w-medium) 14px/1.3 var(--md-font-plain); color: var(--md-on-surface); }
.tlcard__excerpt { font: var(--md-w-regular) 13px/1.5 var(--md-font-brand); color: var(--md-on-surface-variant); font-style: italic; margin: 0; }
.tlcard__meta {
  display: inline-flex; gap: 14px; flex-wrap: wrap;
  font: 11px/1 var(--md-font-data); color: var(--md-on-surface-faint);
  margin-top: 2px;
}
.tlcard__meta span b { color: var(--md-on-surface); font-weight: var(--md-w-semi); }

.rdv__crit { border-left: 1px solid var(--md-outline-hair); background: var(--md-surface-container-low); display: flex; flex-direction: column; }
.rdv__crit-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--md-surface-container-high);
  border-bottom: 1px solid var(--md-outline-hair);
}
.rdv__crit-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }

/* ── Icon catalogue ───────────────────────────── */
.ico-group {
  margin-bottom: 24px;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-hair);
  border-radius: var(--md-shape-md);
  overflow: hidden;
}
.ico-group__hd {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 16px;
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-hair);
}
.ico-group__hd .name { font: var(--md-w-medium) var(--md-title-s-size)/1 var(--md-font-plain); }
.ico-group__hd .ct { font: 11px/1 var(--md-font-plain); color: var(--md-on-surface-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.ico-group__body { padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.ico-cell {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 8px;
  border-radius: var(--md-shape-sm);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-hair);
}
.ico-cell .ms { color: var(--md-on-surface-variant); }
.ico-cell .name { font: 11px/1.2 var(--md-font-data); color: var(--md-on-surface-faint); text-align: center; word-break: break-all; }

/* Card with badge cluster — for the card showcase */
.bcard {
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  border-radius: var(--md-shape-md);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.bcard__hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bcard__title { font: var(--md-w-medium) var(--md-title-m-size)/1.3 var(--md-font-plain); }
.bcard__body  { color: var(--md-on-surface-variant); font-size: 13px; line-height: 1.5; }
.bcard__ft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--md-outline-hair); }


/* =============================================================
   v2.2 — Hover tooltip, collapsible groups, dual run-detail mode
   ============================================================= */

/* ── Small reuse marker (left of count) + hover tooltip ── */
.reuse-mark {
  display: inline-flex; align-items: center; gap: 4px;
  height: 16px; padding: 0 6px;
  border-radius: var(--md-shape-xs);
  background: color-mix(in srgb, var(--p-info) 18%, transparent);
  color: var(--p-info);
  font: var(--md-w-semi) 10px/1 var(--md-font-plain);
  letter-spacing: 0.04em;
  position: relative;
  cursor: help;
}
.reuse-mark .ms { font-size: 12px; }
.reuse-mark::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  border: 1px solid var(--md-outline-hair);
  border-radius: var(--md-shape-sm);
  padding: 6px 10px;
  font: var(--md-w-regular) 11px/1.4 var(--md-font-plain);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
  box-shadow: var(--md-elev-2);
  z-index: 10;
}
.reuse-mark::before {
  content: "";
  position: absolute;
  left: 50%; bottom: calc(100% + 1px);
  transform: translateX(-50%) rotate(45deg);
  width: 6px; height: 6px;
  background: var(--md-surface-container-highest);
  border-right: 1px solid var(--md-outline-hair);
  border-bottom: 1px solid var(--md-outline-hair);
  opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
  z-index: 10;
}
.reuse-mark:hover::after, .reuse-mark:focus-visible::after,
.reuse-mark:hover::before, .reuse-mark:focus-visible::before { opacity: 1; }

.cache-mark {
  display: inline-flex; align-items: center; gap: 3px;
  height: 16px; padding: 0 5px;
  border-radius: var(--md-shape-xs);
  background: color-mix(in srgb, var(--p-ok) 18%, transparent);
  color: var(--p-ok);
  font: var(--md-w-semi) 9px/1 var(--md-font-plain);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.web-mark {
  display: inline-flex; align-items: center; gap: 3px;
  height: 16px; padding: 0 5px;
  border-radius: var(--md-shape-xs);
  background: color-mix(in srgb, var(--p-info) 14%, transparent);
  color: var(--p-info);
  font: var(--md-w-semi) 10px/1 var(--md-font-data);
}

/* Reuse count column now: [mark · gap · number]. Override grid columns. */
.ccx-bar-row .num, .ccx-sub-row .num {
  justify-content: flex-end;
  flex-direction: row;
}

/* ── Collapsible critique section group ──────── */
.crit-group {
  display: flex; flex-direction: column;
  border-radius: var(--md-shape-sm);
  overflow: hidden;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
}
.crit-group__hd {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  background: var(--md-surface-container-high);
  border-bottom: 1px solid var(--md-outline-hair);
  position: relative;
  user-select: none;
}
.crit-group__hd::before {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.crit-group__hd:hover::before { opacity: var(--md-state-hover); }
.crit-group__chev {
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--md-on-surface-variant);
  transition: transform var(--md-dur-short-3) var(--md-easing-emphasized);
}
.crit-group__title {
  font: var(--md-w-medium) var(--md-title-s-size)/1 var(--md-font-plain);
  display: inline-flex; align-items: center; gap: 8px;
}
.crit-group__count {
  font: var(--md-w-semi) 11px/1 var(--md-font-data);
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  padding: 4px 8px;
  border-radius: var(--md-shape-full);
  min-width: 22px; text-align: center;
}
.crit-group__count.is-info { background: color-mix(in srgb, var(--p-info) 22%, transparent); color: var(--p-info); }
.crit-group__count.is-warn { background: color-mix(in srgb, var(--p-warn) 22%, transparent); color: var(--p-warn); }
.crit-group__count.is-ok   { background: color-mix(in srgb, var(--p-ok)   22%, transparent); color: var(--p-ok); }
.crit-group__count.is-err  { background: color-mix(in srgb, var(--p-err)  22%, transparent); color: var(--p-err); }
.crit-group__meta {
  margin-left: auto;
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  color: var(--md-on-surface-faint);
  letter-spacing: 0.04em;
}
.crit-group[data-collapsed="true"] .crit-group__chev { transform: rotate(-90deg); }
.crit-group[data-collapsed="true"] .crit-group__body { display: none; }
.crit-group__body {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--md-surface-container-low);
}

/* ── QuestionThread · new single-column layout ─ */
.qt-timeline { gap: 12px; }
.qt-row {
  display: flex; flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 14px;
}
.qt-row .qt-pill { align-self: flex-start; }
.qt-row .qt-quote { width: 100%; line-height: 1.55; font-size: 15px; }

/* ── Dual-mode run-detail toggle ─────────────── */
.rdv__mode-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-hair);
  flex-wrap: wrap;
}
.rdv__mode-bar .lbl {
  font: var(--md-w-medium) var(--md-label-m-size)/1 var(--md-font-plain);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
}
.rdv__mode-bar .spacer { flex: 1; }

/* Side-by-side mode: timeline + critique (no phase rail, critique expanded inline) */
.rdv--sbs .rdv__body { grid-template-columns: 1fr 1fr; }
.rdv--sbs .rdv__rail { display: none; }
.rdv--sbs .rdv__crit { border-left: 1px solid var(--md-outline-hair); }
@media (max-width: 1099px) {
  .rdv--sbs .rdv__body { grid-template-columns: 1fr; }
  .rdv--sbs .rdv__crit { border-left: 0; border-top: 1px solid var(--md-outline-hair); }
}

/* Inline expanded thread inside a side-by-side critique card */
.sci {
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-hair);
  border-left: 3px solid var(--md-outline);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.sci.is-open { border-left-color: var(--p-warn); }
.sci.is-open-new { border-left-color: var(--p-info); }
.sci.is-resolved { border-left-color: var(--p-ok); }
.sci.is-drift { border-left-color: var(--p-err); }
.sci__hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sci__hd .right { margin-left: auto; }
.sci__q { font: var(--md-w-regular) 14px/1.5 var(--md-font-brand); color: var(--md-on-surface); }
.sci__thread {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 8px; border-top: 1px dashed var(--md-outline-hair);
}
.sci__msg {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  border-radius: var(--md-shape-sm);
  font-size: 13px; line-height: 1.5;
}
.sci__msg.is-a { background: var(--md-primary-container);   color: var(--md-on-primary-container); }
.sci__msg.is-b { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.sci__msg .qt-pill { align-self: flex-start; font-size: 10px; height: 20px; }
.sci__msg p { margin: 0; font-family: var(--md-font-brand); font-style: italic; }

/* ── Temporal-state grid ─────────────────────── */
.temporal {
  display: grid; grid-template-columns: 180px repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-hair);
}
.temporal__head {
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--md-outline-hair);
}
.temporal__cell {
  padding: 10px 12px;
  border-radius: var(--md-shape-sm);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-hair);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px; line-height: 1.45;
}
.temporal__cell .ttl { font: var(--md-w-medium) 12px/1 var(--md-font-plain); color: var(--md-on-surface); }
.temporal__cell .badges { display: flex; flex-wrap: wrap; gap: 6px; }
.temporal__cell .note { color: var(--md-on-surface-variant); font-size: 12px; }
.temporal__row-label {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  font-size: 12px;
}
.temporal__row-label .k {
  font: var(--md-w-semi) 12px/1 var(--md-font-plain);
  color: var(--md-on-surface);
}
.temporal__row-label .v { color: var(--md-on-surface-faint); }

/* Open new tone */
.chip.tone-info-strong {
  background: color-mix(in srgb, var(--p-info) 26%, transparent);
  color: var(--p-info);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-info) 35%, transparent);
}


/* =============================================================
   v2.3 — Canonical split view (matches existing app layout)
   ============================================================= */

/* ── Topbar ────────────────────────────────────── */
.rdvc {
  border-radius: var(--md-shape-md);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-hair);
  overflow: hidden;
}
.rdvc__topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--md-outline-hair);
  background: var(--md-surface-container-low);
}
.rdvc__topic { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rdvc__title {
  font: var(--md-w-medium) 18px/1.2 var(--md-font-plain);
  color: var(--md-on-surface);
}
.rdvc__phaseprog {
  display: inline-flex; align-items: center; gap: 8px;
  font: 11px/1 var(--md-font-plain);
  color: var(--md-on-surface-faint);
}
.rdvc__phaseprog .dots { display: inline-flex; align-items: center; gap: 3px; }
.rdvc__phaseprog .dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--md-outline-variant);
}
.rdvc__phaseprog .dots span.done    { background: var(--p-ok); }
.rdvc__phaseprog .dots span.current { background: var(--p-info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-info) 25%, transparent); }
.rdvc__phaseprog .dots span.errored { background: var(--p-err); }

.rdvc__totals {
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font: 12px/1 var(--md-font-plain);
}
.rdvc__pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: var(--md-shape-full);
  background: var(--md-surface-container-high);
  font: var(--md-w-medium) 12px/1 var(--md-font-plain);
  color: var(--md-on-surface-variant);
}
.rdvc__pill.tone-err  { background: color-mix(in srgb, var(--p-err)  18%, transparent); color: var(--p-err); }
.rdvc__pill.tone-warn { background: color-mix(in srgb, var(--p-warn) 18%, transparent); color: var(--p-warn); }
.rdvc__pill.tone-ok   { background: color-mix(in srgb, var(--p-ok)   18%, transparent); color: var(--p-ok); }
.rdvc__pill.is-data   { font-family: var(--md-font-data); font-variant-numeric: tabular-nums; }
.rdvc__pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rdvc__pill .ms  { font-size: 14px; }

.rdvc__elapsed {
  margin-top: 6px;
  font: 11px/1 var(--md-font-data);
  color: var(--md-on-surface-faint);
  text-align: right;
}

/* ── Model strip ─────────────────────────────── */
.rdvc__models {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--md-outline-hair);
  background: var(--md-surface);
}
.rdvc__model {
  display: grid;
  grid-template-columns: 28px auto auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
}
.rdvc__model .logo {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--md-w-semi) 12px/1 var(--md-font-plain);
}
.rdvc__model.is-a .logo { background: var(--md-primary);   color: var(--md-on-primary); }
.rdvc__model.is-b .logo { background: var(--md-secondary); color: var(--md-on-secondary); }
.rdvc__model .nm { font: var(--md-w-medium) 14px/1 var(--md-font-plain); }
.rdvc__model .sub { font: 11px/1.3 var(--md-font-data); color: var(--md-on-surface-faint); }
.rdvc__model .stats {
  display: inline-flex; gap: 14px; justify-content: flex-end;
  font: var(--md-w-medium) 13px/1 var(--md-font-data);
  color: var(--md-on-surface);
}
.rdvc__model .stats .l { color: var(--md-on-surface-faint); font-weight: var(--md-w-regular); }

/* ── Split body ─────────────────────────────── */
.rdvc__split {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 720px;
  background: var(--md-surface);
}
@media (max-width: 1099px) { .rdvc__split { grid-template-columns: 1fr; } }
.rdvc__pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rdvc__pane + .rdvc__pane { border-left: 1px solid var(--md-outline-hair); }
@media (max-width: 1099px) { .rdvc__pane + .rdvc__pane { border-left: 0; border-top: 1px solid var(--md-outline-hair); } }

/* ── Timeline pane (LEFT) ───────────────────── */
.tl__head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 20px 0;
}
.tl__head .ttl { font: var(--md-w-medium) 16px/1 var(--md-font-plain); }
.tl__head .ct  { font: 12px/1 var(--md-font-data); color: var(--md-on-surface-faint); }

.tl__tabs {
  display: inline-flex; gap: 4px; align-self: flex-start;
  margin: 12px 20px 0;
  padding: 4px;
  background: var(--md-surface-container);
  border-radius: var(--md-shape-full);
}
.tl__tab {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 14px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--md-shape-full);
  font: var(--md-w-medium) 12px/1 var(--md-font-plain);
  color: var(--md-on-surface-variant);
}
.tl__tab.is-active { background: var(--md-surface); color: var(--md-on-surface); box-shadow: var(--md-elev-1); }

.tl__body {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0;
  padding: 12px 20px 16px;
  align-items: stretch;
}

/* Vertical phase indicator outside the timeline */
.tl__rail {
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
  padding-top: 18px;
  position: relative;
}
.tl__rail .seg {
  flex: 1; min-height: 100px;
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
}
.tl__rail .seg::before {
  content: ""; position: absolute; top: 14px; bottom: -14px; width: 1px;
  background: var(--md-outline-hair);
}
.tl__rail .seg:last-child::before { display: none; }
.tl__rail .seg .marker {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--md-outline-variant);
  z-index: 1;
  margin-top: 8px;
}
.tl__rail .seg.is-done    .marker { background: var(--p-ok); }
.tl__rail .seg.is-current .marker { background: var(--p-err); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-err) 22%, transparent); }
.tl__rail .seg .lbl {
  font: var(--md-w-medium) 10px/1 var(--md-font-data);
  color: var(--md-on-surface-faint);
  margin-top: 4px;
}
.tl__rail .seg.is-current .lbl { color: var(--p-err); }
.tl__rail .seg.is-done    .lbl { color: var(--md-on-surface); }

.tl__phases { display: flex; flex-direction: column; gap: 0; }

/* Phase section · collapsible */
.tl-phase { border-top: 1px solid var(--md-outline-hair); }
.tl-phase:first-child { border-top: 0; }
.tl-phase__hd {
  display: grid; grid-template-columns: 20px auto 1fr auto;
  gap: 10px; align-items: center;
  padding: 10px 8px;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.tl-phase__hd::before {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.tl-phase__hd:hover::before { opacity: var(--md-state-hover); }
.tl-phase__hd .chev {
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--md-dur-short-3) var(--md-easing-emphasized);
}
.tl-phase[data-collapsed="true"] .chev { transform: rotate(-90deg); }
.tl-phase[data-collapsed="true"] .tl-phase__body { display: none; }
.tl-phase__pcode {
  font: var(--md-w-semi) 10px/1 var(--md-font-data);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
}
.tl-phase__name {
  font: var(--md-w-medium) 13px/1 var(--md-font-plain);
  color: var(--md-on-surface);
}
.tl-phase__meta {
  font: 11px/1 var(--md-font-data);
  color: var(--md-on-surface-faint);
}
.tl-phase__body { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 8px; }

/* Turn row · one line summary */
.tl-turn {
  display: grid;
  grid-template-columns: 22px 64px 1fr auto 28px;
  gap: 10px; align-items: center;
  padding: 8px 8px 8px 28px;
  border-radius: var(--md-shape-sm);
  cursor: pointer;
  position: relative;
}
.tl-turn::before {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0;
  border-radius: inherit;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.tl-turn:hover::before { opacity: var(--md-state-hover); }
.tl-turn.is-current { background: color-mix(in srgb, var(--p-info) 8%, transparent); }
.tl-turn__ai {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--md-w-semi) 11px/1 var(--md-font-plain);
}
.tl-turn__ai.is-a { background: var(--md-primary);   color: var(--md-on-primary); }
.tl-turn__ai.is-b { background: var(--md-secondary); color: var(--md-on-secondary); }
.tl-turn__nm   { font: var(--md-w-medium) 13px/1 var(--md-font-plain); color: var(--md-on-surface); }
.tl-turn__lbl  { font: var(--md-w-regular) 12px/1 var(--md-font-plain); color: var(--md-on-surface-variant); }
.tl-turn__deltas { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tl-turn__round {
  font: var(--md-w-semi) 11px/1 var(--md-font-data);
  color: var(--md-on-surface-faint);
  background: var(--md-surface-container);
  padding: 4px 8px;
  border-radius: var(--md-shape-xs);
}

.tl-delta {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: var(--md-shape-full);
  font: var(--md-w-medium) 11px/1 var(--md-font-data);
}
.tl-delta.up   { background: color-mix(in srgb, var(--p-info) 14%, transparent); color: var(--p-info); }
.tl-delta.down { background: color-mix(in srgb, var(--p-ok)   14%, transparent); color: var(--p-ok); }
.tl-delta.rep  { background: color-mix(in srgb, var(--p-warn) 18%, transparent); color: var(--p-warn); letter-spacing: 0.08em; }

/* Turn row · expanded (opens inline) */
.tl-turn--open {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-hair);
  border-radius: var(--md-shape-md);
  padding: 0;
  margin: 8px 0;
  display: block;
}
.tl-turn--open .tl-turn { background: var(--md-surface-container); border-radius: var(--md-shape-md) var(--md-shape-md) 0 0; cursor: pointer; }
.tl-turn--open .tl-turn::before { display: none; }
.tl-turn--open .body {
  padding: 12px 14px 14px;
  font: 13px/1.55 var(--md-font-brand); font-style: italic;
  color: var(--md-on-surface-variant);
  border-top: 1px dashed var(--md-outline-hair);
}
.tl-turn--open .actions {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px 12px;
  flex-wrap: wrap;
}

/* ── Critique pane (RIGHT) ─────────────────── */
.crv__head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 20px 0;
}
.crv__head .ttl { font: var(--md-w-medium) 16px/1 var(--md-font-plain); }
.crv__head .totals {
  margin-left: auto;
  display: inline-flex; gap: 14px;
  font: 12px/1 var(--md-font-data); color: var(--md-on-surface-faint);
}
.crv__head .totals b { color: var(--md-on-surface); font-weight: var(--md-w-semi); margin-right: 2px; }

.crv__phasetabs {
  display: inline-flex; gap: 0;
  margin: 14px 20px 0;
  padding: 4px;
  background: var(--md-surface-container);
  border-radius: var(--md-shape-full);
  align-self: flex-start;
}
.crv__ptab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--md-shape-full);
  font: var(--md-w-medium) 12px/1 var(--md-font-plain);
  color: var(--md-on-surface-variant);
}
.crv__ptab.is-active { background: var(--md-surface); color: var(--md-on-surface); box-shadow: var(--md-elev-1); }
.crv__ptab .pcode { font: var(--md-w-semi) 11px/1 var(--md-font-data); }
.crv__ptab .meta  { font: 11px/1 var(--md-font-data); color: var(--md-on-surface-faint); }
.crv__ptab.is-active .meta { color: var(--md-on-surface-variant); }

.crv__filters {
  display: flex; gap: 12px;
  padding: 12px 20px;
  flex-wrap: wrap;
}
.fgroup {
  display: inline-flex;
  background: var(--md-surface-container);
  border-radius: var(--md-shape-full);
  padding: 3px;
  gap: 2px;
}
.fgroup .ft {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--md-shape-full);
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  color: var(--md-on-surface-variant);
}
.fgroup .ft.is-active { background: var(--md-surface); color: var(--md-on-surface); box-shadow: var(--md-elev-1); }
.fgroup .ft .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.crv__body { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 12px; }

/* Critique group with section header */
.cr-group {
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-hair);
  overflow: hidden;
}
.cr-group__hd {
  display: grid; grid-template-columns: 20px 1fr auto;
  gap: 10px; align-items: center;
  padding: 10px 14px;
  cursor: pointer; position: relative;
  background: color-mix(in srgb, var(--p-ok) 12%, var(--md-surface-container-high));
  color: var(--p-ok);
  user-select: none;
}
.cr-group[data-tone="info"] .cr-group__hd { background: color-mix(in srgb, var(--p-info) 12%, var(--md-surface-container-high)); color: var(--p-info); }
.cr-group[data-tone="warn"] .cr-group__hd { background: color-mix(in srgb, var(--p-warn) 12%, var(--md-surface-container-high)); color: var(--p-warn); }
.cr-group[data-tone="err"]  .cr-group__hd { background: color-mix(in srgb, var(--p-err)  12%, var(--md-surface-container-high)); color: var(--p-err); }
.cr-group__hd::before {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.cr-group__hd:hover::before { opacity: var(--md-state-hover); }
.cr-group__hd .chev { display: inline-flex; align-items: center; justify-content: center; transition: transform var(--md-dur-short-3) var(--md-easing-emphasized); }
.cr-group[data-collapsed="true"] .chev { transform: rotate(-90deg); }
.cr-group[data-collapsed="true"] .cr-group__body { display: none; }
.cr-group__lbl {
  font: var(--md-w-semi) 11px/1 var(--md-font-plain);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.cr-group__count {
  font: var(--md-w-semi) 12px/1 var(--md-font-data);
  font-variant-numeric: tabular-nums;
}
.cr-group__body { display: flex; flex-direction: column; padding: 4px 0; }

/* Compact critique item row */
.cr-item {
  display: grid;
  grid-template-columns: 92px 90px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 14px;
  cursor: pointer; position: relative;
  border-top: 1px solid var(--md-outline-hair);
}
.cr-item:first-child { border-top: 0; }
.cr-item::before {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0;
  transition: opacity var(--md-dur-short-3) var(--md-easing-standard);
}
.cr-item:hover::before { opacity: var(--md-state-hover); }
.cr-item__kind {
  font: var(--md-w-semi) 11px/1 var(--md-font-plain);
  padding: 4px 8px;
  border-radius: var(--md-shape-xs);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  text-align: center;
}
.cr-item__kind[data-k="Q"]  { background: color-mix(in srgb, var(--p-info) 16%, transparent); color: var(--p-info); }
.cr-item__kind[data-k="D"]  { background: color-mix(in srgb, var(--p-warn) 16%, transparent); color: var(--p-warn); }
.cr-item__kind[data-k="Cl"] { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.cr-item__status {
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  padding: 4px 8px;
  border-radius: var(--md-shape-xs);
  background: color-mix(in srgb, var(--p-ok) 16%, transparent);
  color: var(--p-ok);
  text-align: center;
}
.cr-item__status.is-aligned { background: color-mix(in srgb, var(--p-ok) 22%, transparent); }
.cr-item__status.is-conceded-a { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.cr-item__status.is-conceded-b { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.cr-item__status.is-open    { background: color-mix(in srgb, var(--p-warn) 18%, transparent); color: var(--p-warn); }
.cr-item__status.is-drift   { background: color-mix(in srgb, var(--p-err) 18%, transparent); color: var(--p-err); }
.cr-item__by {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  color: var(--md-on-surface-faint);
}
.cr-item__by .ai { width: 16px; height: 16px; font-size: 9px; }
.cr-item__text {
  font: 13px/1.4 var(--md-font-brand);
  color: var(--md-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.cr-item__right {
  display: inline-flex; gap: 6px; align-items: center;
}
.cr-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px;
  border-radius: var(--md-shape-xs);
  font: var(--md-w-medium) 10px/1 var(--md-font-plain);
  background: color-mix(in srgb, var(--p-warn) 18%, transparent);
  color: var(--p-warn);
}
.cr-tag .ms { font-size: 12px; }

/* Item expanded — quote preview */
.cr-item--open {
  display: block; padding: 12px 14px;
  background: var(--md-surface);
  border-top: 1px solid var(--md-outline-hair);
}
.cr-item--open .row1 { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.cr-item--open .quote {
  font: 13px/1.55 var(--md-font-brand); font-style: italic;
  color: var(--md-on-surface-variant);
}
.cr-item--open .quote::before { content: "\201C"; opacity: 0.5; padding-right: 2px; }
.cr-item--open .actions { display: flex; gap: 8px; margin-top: 10px; }

/* Wider variants for desktop */
@media (min-width: 1500px) {
  .cr-item { grid-template-columns: 100px 110px 1fr auto; }
}

/* ── Footer ───────────────────────────────── */
.rdvc__footer {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px;
  border-top: 1px solid var(--md-outline-hair);
  background: var(--md-surface-container);
  font: 12px/1 var(--md-font-data);
  color: var(--md-on-surface-faint);
}
.rdvc__footer .right { margin-left: auto; }
.rdvc__footer .v { color: var(--md-on-surface); font-weight: var(--md-w-medium); }


/* =============================================================
   v2.4 — Critique card · ItemCard + SOURCES segment (spec 0144)
   Canonical per-card primitive. Replaces the legacy QuestionThread
   for new-protocol items (those with a `transitions[]` array).
   Layout is kind-agnostic — only the category chip varies between
   Q · D · I · C. Closes B08 (Phase 4 cards missing I/C patches) and
   B14 (per-card sources) on the same primitive.
   Visual source-of-truth:
   design-system/audits/2026-05-19-badge-governance-iter3/mockup.html
   ============================================================= */

/* ── Critique card frame ──────────────────────────── */
.crit-card {
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  border-left: 3px solid var(--md-outline);
  border-radius: var(--md-shape-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  color: var(--md-on-surface);
}
.crit-card.is-open         { border-left-color: var(--p-info); }
.crit-card.is-addressed    { border-left-color: var(--p-info); }
.crit-card.is-resolved     { border-left-color: var(--p-ok); }
.crit-card.is-acknowledged { border-left-color: var(--p-warn); }
.crit-card.is-withdrawn    { border-left-color: var(--p-idle); }
.crit-card.is-capped       { border-left-color: var(--p-err); }
.crit-card.is-drift        { border-left-color: var(--p-err); }

.crit-card-head {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 10px;
}
.crit-card-head .spacer { flex: 1; min-width: 8px; }

.crit-card-body {
  font: var(--md-w-regular) 13.5px/1.55 var(--md-font-plain);
  color: var(--md-on-surface);
  margin-bottom: 8px;
}
.crit-card-body code {
  font-family: var(--md-font-data); font-size: 12px;
  padding: 1px 5px; border-radius: var(--md-shape-xs);
  background: var(--md-surface-container-high); color: var(--md-on-surface);
}
.crit-card-body em.evidence-needed {
  display: block; margin-top: 8px;
  font: italic var(--md-w-regular) 13px/1.5 var(--md-font-brand);
  color: var(--md-on-surface-variant);
}

.crit-card-id {
  font: var(--md-w-regular) 10.5px/1.2 var(--md-font-data);
  color: var(--md-on-surface-faint);
  margin-bottom: 10px;
}

/* ── In-card section title (Lifecycle, Sources) ──── */
.crit-section-title {
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin: 14px 0 8px;
}
.crit-section-title .count {
  text-transform: none; letter-spacing: 0;
  color: var(--md-on-surface-faint);
  font-weight: var(--md-w-regular);
  margin-left: 4px;
}

/* ── Lifecycle rows ───────────────────────────────── */
.lc-row { padding: 8px 0; border-top: 1px dashed var(--md-outline-hair); }
.lc-row:first-of-type { border-top: 0; padding-top: 0; }
.lc-row-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 6px;
}
.lc-row-body {
  font: italic var(--md-w-regular) 12.5px/1.55 var(--md-font-brand);
  color: var(--md-on-surface-variant);
  padding-left: 10px;
  margin-left: 4px;
  border-left: 2px solid var(--md-outline-variant);
}
.lc-row-body code {
  font-family: var(--md-font-data); font-style: normal; font-size: 12px;
  padding: 1px 5px; border-radius: var(--md-shape-xs);
  background: var(--md-surface-container-high); color: var(--md-on-surface);
}

.lc-footer {
  margin-top: 10px; padding: 8px 12px;
  background: color-mix(in srgb, var(--p-ok) 12%, var(--md-surface-container-high));
  border-radius: var(--md-shape-sm);
  color: var(--p-ok);
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.lc-footer .sep  { color: var(--md-on-surface-faint); }
.lc-footer .meta { color: var(--md-on-surface-variant); }
.crit-card.is-capped       .lc-footer { background: color-mix(in srgb, var(--p-err)  14%, var(--md-surface-container-high)); color: var(--p-err); }
.crit-card.is-acknowledged .lc-footer { background: color-mix(in srgb, var(--p-warn) 14%, var(--md-surface-container-high)); color: var(--p-warn); }
.crit-card.is-withdrawn    .lc-footer { background: color-mix(in srgb, var(--p-idle) 16%, var(--md-surface-container-high)); color: var(--md-on-surface-variant); }
.crit-card.is-drift        .lc-footer { background: color-mix(in srgb, var(--p-err)  14%, var(--md-surface-container-high)); color: var(--p-err); }

/* ── SOURCES segment (per-card) ───────────────────── */
.item-card__sources {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--md-outline-hair);
}
.item-card__sources-hd {
  font: var(--md-w-medium) 11px/1 var(--md-font-plain);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin-bottom: 8px;
}
.item-card__sources-hd .count {
  text-transform: none; letter-spacing: 0;
  color: var(--md-on-surface-faint);
  font-weight: var(--md-w-regular);
  margin-left: 4px;
}

/* ── SourceRow primitive ──────────────────────────── */
.source-row {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-hair);
  border-radius: var(--md-shape-xs);
  padding: 8px 10px;
  margin: 6px 0;
  transition: background var(--md-dur-short-3) var(--md-easing-standard);
}
.source-row__head {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.source-row__chev {
  color: var(--md-on-surface-variant);
  font: var(--md-w-regular) 10px/1 var(--md-font-data);
  transition: transform var(--md-dur-short-3) var(--md-easing-emphasized);
}
.source-row[data-open="true"] .source-row__chev { transform: rotate(90deg); }
.source-row__title {
  color: var(--md-on-surface);
  font: var(--md-w-medium) 12.5px/1.3 var(--md-font-plain);
}
.source-row__host {
  color: var(--md-on-surface-faint);
  font: var(--md-w-regular) 11px/1 var(--md-font-plain);
}
.source-row__head .right { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }

.source-row__body {
  padding-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.source-row[data-open="false"] .source-row__body { display: none; }
.source-row__field {
  font: var(--md-w-regular) 12px/1.4 var(--md-font-plain);
  color: var(--md-on-surface-variant);
}
.source-row__label {
  font: var(--md-w-medium) 10.5px/1 var(--md-font-plain);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
  margin-right: 6px;
}
.source-row__url {
  font-family: var(--md-font-data); font-size: 11.5px;
  color: var(--p-info); word-break: break-all;
}
.source-row__excerpt {
  font: italic var(--md-w-regular) 11.5px/1.5 var(--md-font-brand);
  color: var(--md-on-surface-variant);
  padding: 8px 10px;
  background: var(--md-surface);
  border-radius: var(--md-shape-xs);
  max-height: 160px; overflow-y: auto;
  margin-top: 2px;
}

/* Unverified state — warn-tinted border + small chip on the row. */
.source-row.is-unverified {
  border-color: color-mix(in srgb, var(--p-warn) 50%, var(--md-outline-hair));
  background: color-mix(in srgb, var(--p-warn) 5%, var(--md-surface-container-low));
}
.chip-unverified {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 7px;
  border-radius: var(--md-shape-xs);
  font: var(--md-w-semi) 10px/1 var(--md-font-plain);
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--p-warn) 18%, transparent);
  color: var(--p-warn);
}