/* PathQueue Model evaluation dashboard (#/metrics) and its SVG charts (js/charts.js). Loaded after workspace.css;
   reuses its page tokens (ink / paper / hematoxylin / eosin) and adds chart tokens scoped to .mx.
   Chart series (validated with the dataviz palette checks, all-pairs CVD + normal-vision + contrast):
     light on #fff     #4b44ae hematoxylin indigo, #d4573b eosin coral, #16967a teal
     dark  on #202631  #7f79e8, #db6542, #1a9f7d
   Layout breakpoints are container queries on .mx and must match layout() in js/views/metrics.js. */

.mx {
  container: mx / inline-size;
  --cx1: #4b44ae; /* deepened from #5a55c0 for label contrast on the mixed heatmap shades */
  --cx2: #d4573b;
  --cx3: #16967a;
  --cx-mute: #8d909b;
  --cx-seq: var(--cx1);
  --cx-seq0: var(--sf);
  --cx-neg: var(--cx1);
  --cx-pos: var(--cx2);
  --cx-mid: #f0f0ed;
  --cx-na: var(--bg);
  --cx-empty: #c7c1b6;
  --cx-on-indigo: #ffffff;
  --cx-on-coral: #1b1a2e; /* white on --cx2 coral is 3.2-4.0:1 at every shade; ink is 4.2-5.3:1 */
  --mx-gap: 20px;
}
:root[data-theme='dark'] .mx {
  --cx1: #7f79e8;
  --cx2: #db6542;
  --cx3: #1a9f7d;
  --cx-mute: #7f8796;
  --cx-mid: #2c323d;
  --cx-empty: #615e58;
  --cx-on-indigo: #11131a;
  --cx-on-coral: #11131a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mx {
    --cx1: #7f79e8;
    --cx2: #db6542;
    --cx3: #1a9f7d;
    --cx-mute: #7f8796;
    --cx-mid: #2c323d;
    --cx-empty: #615e58;
    --cx-on-indigo: #11131a;
    --cx-on-coral: #11131a;
  }
}

/* ---- page frame ----------------------------------------------------------------------------------------------------- */
.mx {
  color: var(--ink);
  font-size: 13px;
  min-width: 0;
}
.mx-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.mx-scope {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mut);
  max-width: 82ch;
}
.mx-scope b {
  color: var(--ink);
  font-weight: 600;
}
/* the scope sentence and, below it, the statistical method in full behind "Methods" */
.mx-scope-wrap {
  min-width: 0;
  max-width: 82ch;
}
.mx-top .mx-methods {
  margin-top: 4px;
  border-top: 0;
  padding-top: 0;
}
.mx-methods ul {
  margin: 4px 0 2px;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mut);
}
.mx-top .btn {
  flex: none;
}
.mx-nav {
  position: sticky;
  /* below the sticky workspace header (app.js syncStick sets --stick; 0 when the header scrolls away on phones) */
  top: var(--stick, 0px);
  z-index: 20;
  margin: 0 0 6px;
  padding: 8px 0;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ln);
  overflow-x: auto;
  scrollbar-width: none;
}
.mx-nav::-webkit-scrollbar {
  display: none;
}
.mx-nav-inner {
  display: flex;
  gap: 4px;
  width: max-content;
}
.mx-nav button {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--mut);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.mx-nav button:hover {
  color: var(--ink);
  background: var(--bl);
}
.mx-nav button[aria-current='true'] {
  color: var(--hema);
  background: var(--bl);
  font-weight: 600;
}
.mx-nav button:focus-visible,
.mx-src summary:focus-visible {
  outline: 2px solid var(--hema);
  outline-offset: 2px;
}

/* ---- sections ------------------------------------------------------------------------------------------------------- */
.mx-section {
  margin-top: 34px;
  /* html scroll-padding-top (theme.css) already clears the sticky header; this clears the section nav below it */
  scroll-margin-top: 48px;
}
.mx-section-head {
  margin-bottom: 14px;
}
.mx-section-head h2 {
  font:
    500 25px/1.25 var(--display);
  letter-spacing: -0.4px;
  margin: 0 0 4px;
  color: var(--ink);
}
.mx-section-head h2:focus {
  outline: none;
}
.mx-section-head p {
  margin: 0;
  font-size: 13px;
  color: var(--mut);
  max-width: 78ch;
}
.mx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mx-gap);
  align-items: start;
}
@container mx (min-width: 980px) {
  .mx-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .mx-wide,
  .mx-kpis {
    grid-column: 1 / -1;
  }
  /* a half-width card left alone in its row takes the row (metrics.js grid() marks it and draws its charts that wide);
     a lone stack sets its two cards side by side */
  .mx-grid > .mx-lone {
    grid-column: 1 / -1;
  }
  .mx-stack.mx-lone {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ---- figures -------------------------------------------------------------------------------------------------------- */
.mx-fig {
  margin: 0;
  min-width: 0;
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: 12px;
  padding: 22px;
}
.mx-fig figcaption h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.mx-take {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 82ch;
}
.mx-take-label {
  font-weight: 600;
  color: var(--hema);
  margin-right: 2px;
}
.mx-caveat {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--ambl);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.55;
}
.mx-chart {
  min-width: 0;
}
.mx-notes {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--mut);
  line-height: 1.55;
}
.mx-pop {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--mut);
  line-height: 1.5;
}
.mx-srcfile code,
.mx-missing code {
  font-size: 11px;
}
/* the figure's source file, first line inside its "Source numbers" disclosure */
.mx-srcfile {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--mut);
  overflow-wrap: anywhere;
}
.mx-missing p,
.mx-missing-inline {
  font-size: 12.5px;
  color: var(--mut);
  margin: 0;
}
.mx-missing {
  border-style: dashed;
  background: transparent;
}
.mx-muted {
  color: var(--mut);
}
.mx-src {
  margin-top: 10px;
  border-top: 1px solid var(--ln);
  padding-top: 8px;
}
.mx-src summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--hema);
  margin: 2px 0;
  width: max-content;
  border-radius: 4px;
}
.mx-tablewrap {
  overflow-x: auto;
  max-width: 100%;
  margin-top: 8px;
}
.mx .mx-table {
  display: table;
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.mx .mx-table thead {
  display: table-header-group;
}
.mx .mx-table tbody {
  display: table-row-group;
}
.mx .mx-table tr {
  display: table-row;
}
.mx .mx-table th,
.mx .mx-table td {
  display: table-cell;
  width: auto;
  max-width: none;
  padding: 6px 10px;
  border-bottom: 1px solid var(--ln);
  text-align: left;
  vertical-align: top;
  font-size: 11.5px;
  line-height: 1.45;
  white-space: normal;
}
.mx .mx-table th {
  background: var(--bg);
  color: var(--mut);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.mx .mx-table .mx-n {
  text-align: right;
}
.mx-limits {
  margin: 0;
  padding-left: 18px;
  line-height: 1.65;
  font-size: 13px;
}
.mx-limits li + li {
  margin-top: 4px;
}
.mx-cite {
  display: grid;
  grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
.mx-cite dt {
  font-weight: 600;
}
.mx-cite dd {
  margin: 0;
  color: var(--mut);
}
.mx-pngs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: 12px;
}
.mx-glyph-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--mut);
}
.mx-g {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -2px;
}
.mx-g-ok {
  border: solid var(--grn);
  border-width: 0 2.2px 2.2px 0;
  width: 5px;
  height: 9px;
  transform: rotate(45deg);
  margin: 0 8px 2px 4px;
}
.mx-g-bad {
  background:
    linear-gradient(45deg, transparent 44%, var(--eos) 44%, var(--eos) 58%, transparent 58%),
    linear-gradient(-45deg, transparent 44%, var(--eos) 44%, var(--eos) 58%, transparent 58%);
}
.mx-g-neutral {
  height: 2px;
  background: var(--mut);
  vertical-align: 3px;
}

/* ---- KPI tiles ------------------------------------------------------------------------------------------------------ */
/* Fixed column counts that divide the eight headline tiles evenly (auto-fill left 5 + 3 with two empty cells):
   four across from 1200 px, two across below (the narrow-container rules further down keep two, then one). */
.mx-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 1200px) {
  .mx-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.mx-kpi {
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: 10px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mx-kpi h3 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mut);
  letter-spacing: 0;
  line-height: 1.35;
}
.mx-kpi-value {
  margin: 2px 0 0;
  font-size: 25px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.mx-kpi-ci {
  margin: 0;
  font-size: 11.5px;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.mx-kpi-status {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.mx-kpi-text {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
}
/* one "Source files" disclosure under the tiles, across the whole row */
.mx-kpis-src {
  grid-column: 1 / -1;
  min-width: 0;
}
.mx-kpis-src .mx-src {
  margin-top: 0;
}
.mx .cx-strip {
  display: block;
  width: 100%;
  height: auto;
  max-width: 260px;
  margin: 4px 0 2px;
}
.mx-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.mx-chip-ok {
  color: var(--grn);
  background: var(--grnl);
}
.mx-chip-warn {
  color: var(--amb);
  background: var(--ambl);
}
.mx-chip-neutral {
  color: var(--mut);
  background: var(--bg);
}

/* ---- charts ---------------------------------------------------------------------------------------------------------- */
.mx svg.cx {
  display: block;
  width: 100%;
  height: auto;
  margin: 4px 0 6px;
  overflow: visible;
  font-family: var(--font);
}
.mx svg.cx:focus {
  outline: none;
}
.mx svg.cx:focus-visible {
  outline: 2px solid var(--hema);
  outline-offset: 4px;
  border-radius: 6px;
}
.cx-t,
.cx-strong {
  fill: var(--ink);
}
.cx-tick,
.cx-axis-label,
.cx-sub,
.cx-ref-t {
  fill: var(--mut);
}
.cx-tick,
.cx-num {
  font-variant-numeric: tabular-nums;
}
.cx-grid {
  stroke: var(--ln);
  stroke-width: 1;
}
.cx-axis {
  stroke: color-mix(in srgb, var(--mut) 55%, var(--ln));
  stroke-width: 1;
}
.cx-ref {
  stroke: var(--mut);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
}
.cx-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cx-dash {
  stroke-dasharray: 7 4;
}
.cx-band {
  fill-opacity: 0.13;
}
.cx-dot {
  stroke: var(--sf);
  stroke-width: 2;
}
.cx-hollow {
  fill: var(--sf);
  stroke-width: 2;
}
.cx-whisker {
  stroke-width: 2;
  stroke-linecap: round;
}
.cx-box {
  fill-opacity: 0.2;
  stroke-width: 1.5;
}
.cx-median {
  stroke-width: 3;
  stroke-linecap: round;
}
.cx-mean {
  fill: var(--ink);
  stroke: var(--sf);
  stroke-width: 1.5;
}
.cx-hit,
.cx-hitrow {
  fill: transparent;
}
.cx-hit {
  cursor: crosshair;
}
.cx-hit.cx-active {
  fill: color-mix(in srgb, var(--ink) 8%, transparent);
  stroke: var(--ink);
  stroke-width: 1.5;
}
.cx-hitrow:hover,
.cx-hitrow.cx-active {
  fill: color-mix(in srgb, var(--ink) 5%, transparent);
}
.cx-cell rect,
.cx-seg rect {
  stroke: transparent;
  stroke-width: 2;
}
.cx-cell:hover rect,
.cx-cell.cx-active rect,
.cx-seg:hover rect,
.cx-seg.cx-active rect {
  stroke: var(--ink);
}
.cx-on-weak {
  fill: var(--ink);
}
.cx-on-indigo {
  fill: var(--cx-on-indigo);
  font-weight: 600;
}
.cx-on-coral {
  fill: var(--cx-on-coral);
  font-weight: 600;
}
.cx-track {
  stroke: var(--ln);
  stroke-width: 4;
  stroke-linecap: round;
}
.cx-ci-ok {
  fill: color-mix(in srgb, var(--cx1) 32%, var(--sf));
}
.cx-ci-warn {
  fill: color-mix(in srgb, var(--amb) 38%, var(--sf));
}
.cx-est-ok {
  fill: var(--cx1);
  stroke: var(--sf);
  stroke-width: 2;
}
.cx-est-warn {
  fill: var(--amb);
  stroke: var(--sf);
  stroke-width: 2;
}
.cx-target {
  stroke: var(--ink);
  stroke-width: 2;
}
.cx-glyph-ok,
.cx-glyph-bad,
.cx-glyph-neutral {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cx-glyph-ok {
  stroke: var(--grn);
}
.cx-glyph-bad {
  stroke: var(--eos);
}
.cx-glyph-neutral {
  stroke: var(--mut);
}
.cx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  list-style: none;
  padding: 0;
  margin: 2px 0 6px;
  font-size: 12px;
  color: var(--mut);
}
.cx-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cx-key {
  display: inline-block;
  flex: none;
}
.cx-key-line {
  width: 18px;
  border-top: 2px solid var(--k);
}
.cx-key-dash {
  width: 18px;
  border-top: 2px dashed var(--k);
}
.cx-key-rect {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--k);
}
.cx-key-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--k);
}
.cx-key-ring {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--k);
  background: var(--sf);
}
.cx-multiples {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 16px;
}
.cx-panel {
  min-width: 0;
}
/* one-vs-rest ROC panels: square, as a ROC plot's two rate axes are */
#fig-ovr .cx-panel svg.cx {
  aspect-ratio: 1;
}
.cx-panel-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 2px 0 2px;
  line-height: 1.4;
}
.cx-panel-title:empty {
  display: none;
}
.cx-panel-title .mx-chip {
  margin-left: 4px;
  vertical-align: 1px;
}
.cx-scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--mut);
}
.cx-scale-cap {
  flex: 1 0 100%;
}
.cx-grad {
  display: inline-block;
  width: 120px;
  height: 10px;
  border-radius: 5px;
  border: 1px solid var(--ln);
}
.cx-grad-seq {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cx-seq) 6%, var(--cx-seq0)), var(--cx-seq));
}
.cx-grad-div {
  background: linear-gradient(90deg, var(--cx-neg), var(--cx-mid), var(--cx-pos));
}
.cx-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 300px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--sf);
  color: var(--ink);
  border: 1px solid var(--ln);
  box-shadow: 0 6px 24px #0000002a;
  pointer-events: none;
  font-family: var(--font);
}
.cx-tooltip strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cx-tooltip span {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--mut);
}

/* ---- narrow containers (phones, narrow windows) ------------------------------------------------------------------------ */
@container mx (max-width: 599px) {
  .mx-fig {
    padding: 14px;
  }
  .mx-top {
    flex-direction: column;
    gap: 10px;
  }
  .mx-section {
    margin-top: 26px;
  }
  .mx-section-head h2 {
    font-size: 21px;
  }
  .mx-kpis {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .mx-kpi {
    padding: 12px;
  }
  .mx-kpi-value {
    font-size: 20px;
  }
  .mx-cite {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .mx-cite dd {
    margin-bottom: 6px;
  }
}
@container mx (max-width: 420px) {
  .mx-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mx-nav {
    scroll-behavior: auto;
  }
}
@media (forced-colors: active) {
  .cx-line,
  .cx-whisker,
  .cx-median {
    stroke: CanvasText;
  }
  .cx-dot,
  .cx-bar {
    fill: CanvasText;
  }
}

/* ---- composition helpers --------------------------------------------------------------------------------------------- */
.mx-stack {
  display: grid;
  gap: var(--mx-gap);
  align-content: start;
  min-width: 0;
}
.mx-section-head {
  display: block;
}
.cx-band-head {
  fill: var(--sf);
}
@container mx (min-width: 980px) {
  .mx-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
}

/* ---- Evidence review (#/spotcheck, js/views/spotcheck.js) ------------------------------------------------------------ */
.sc {
  container: sc / inline-size;
  min-width: 0;
}
.sc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: 12px;
  padding: 22px;
}
.sc-intro h2 {
  margin: 0 0 6px;
  font:
    500 23px/1.25 var(--display);
  letter-spacing: -0.3px;
}
.sc-intro p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  max-width: 78ch;
}
.sc-fine {
  font-size: 12px !important;
  color: var(--mut);
}
.sc-total {
  display: grid;
  gap: 4px;
  min-width: 170px;
  text-align: right;
}
.sc-total-n {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
}
.sc-total-n small {
  font-size: 14px;
  font-weight: 500;
  color: var(--mut);
}
.sc-total-l {
  font-size: 12px;
  color: var(--mut);
}
.sc-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--bl);
  overflow: hidden;
}
.sc-bar span {
  display: block;
  height: 100%;
  background: var(--hema);
  border-radius: 3px;
}
.sc-record,
.sc-criteria {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-top: 16px;
}
.sc-field {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--mut);
}
.sc-field input,
.sc-field select {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background-color: var(--sf); /* not the shorthand: a global select rule supplies the chevron background image */
  border: 1px solid var(--ln);
  border-radius: 8px;
  padding: 8px 10px;
  min-height: 38px;
  min-width: 180px;
}
.sc-field input:focus-visible,
.sc-field select:focus-visible,
.sc-chip:focus-visible,
.sc-v:focus-within {
  outline: 2px solid var(--hema);
  outline-offset: 2px;
}
.sc-result {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grn);
  background: var(--grnl);
  border-radius: 999px;
  padding: 6px 12px;
}
.sc-criteria {
  align-items: center;
}
.sc-select {
  display: none;
}
.sc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.sc-chip small {
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.sc-chip:hover {
  background: var(--bl);
}
.sc-chip-on {
  border-color: var(--hema);
  background: var(--bl);
  color: var(--hema);
  font-weight: 600;
}
.sc-chip-done small::after {
  content: ' ✓';
  color: var(--grn);
}
.sc-criteria .sc-fine {
  margin: 0;
  flex-basis: 100%;
}
.sc-group {
  margin-top: 18px;
}
.sc-group header h3 {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 600;
}
.sc-group header p {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--mut);
}
.sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.sc-item {
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.sc-item[data-verdict='acceptable'] {
  border-color: var(--grn);
  box-shadow: inset 0 0 0 1px var(--grn);
}
.sc-item[data-verdict='not_acceptable'] {
  border-color: var(--eos);
  box-shadow: inset 0 0 0 1px var(--eos);
}
.sc-item[data-verdict='unsure'] {
  border-color: var(--amb);
  box-shadow: inset 0 0 0 1px var(--amb);
}
.sc-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  background: var(--bl);
}
.sc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0;
  font-size: 11.5px;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.sc-verdicts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.sc-v {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  padding: 4px 6px;
  border: 1px solid var(--ln);
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  color: var(--ink);
  background: var(--sf);
}
.sc-v input {
  margin: 0;
  accent-color: var(--hema);
  flex: none;
}
.sc-v-ok:has(input:checked) {
  background: var(--grnl);
  border-color: var(--grn);
  font-weight: 600;
}
.sc-v-not_ok:has(input:checked) {
  background: var(--eosl);
  border-color: var(--eos);
  font-weight: 600;
}
.sc-v-unsure:has(input:checked) {
  background: var(--ambl);
  border-color: var(--amb);
  font-weight: 600;
}
@container sc (max-width: 600px) {
  .sc-intro {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .sc-total {
    text-align: left;
  }
  .sc-chips {
    display: none;
  }
  .sc-select {
    display: grid;
    flex: 1 1 100%;
  }
  .sc-field,
  .sc-field input,
  .sc-field select {
    min-width: 0;
    width: 100%;
  }
  .sc-record .btn {
    width: 100%;
  }
  .sc-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .sc-verdicts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .sc-v-unsure {
    grid-column: 1 / -1;
  }
  .sc-intro h2 {
    font-size: 19px;
  }
}
.sc-record .btn[aria-disabled='true'] {
  opacity: 0.55;
}
.mx-brief {
  grid-column: 1 / -1;
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: 12px;
  padding: 18px 22px;
}
.mx-brief h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.mx-brief ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 96ch;
}
.mx-brief li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: baseline;
}
.mx-g-warn {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amb);
  margin: 0 8px 0 2px;
  vertical-align: 0;
}
.mx-brief .mx-g-ok {
  margin: 0 10px 0 4px;
}
@container mx (max-width: 599px) {
  .mx-brief {
    padding: 14px;
  }
}
/* the language-model card closes the Summary section, below the measured numbers it restates */
.mx-grid > .mx-interp {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
}
.sc-recorded {
  margin-top: 16px;
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: 12px;
  padding: 18px 22px;
}
.sc-rec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
}
.sc-rec-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.sc-rec-head p {
  margin: 0;
  font-size: 12px;
  color: var(--mut);
  flex: 1 1 320px;
}
.sc-rec-head p b {
  color: var(--ink);
}
.sc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}
.sc-toggle input {
  accent-color: var(--hema);
}
.sc-rec-list {
  list-style: none;
  margin: 12px 0 6px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 8px 28px;
}
/* fixed label and count columns, so every bar in a column starts and ends at the same x */
.sc-rec-list li {
  display: grid;
  grid-template-columns: 180px minmax(60px, 1fr) 12.5em;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
}
.sc-rec-name {
  overflow-wrap: anywhere;
}
.sc-rec-n {
  color: var(--mut);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sc-stack {
  display: flex;
  gap: 2px;
  height: 10px;
}
.sc-seg {
  border-radius: 2px;
  min-width: 3px;
}
.sc-seg-ok {
  background: var(--grn);
}
.sc-seg-unsure {
  background: var(--amb);
}
.sc-seg-not_ok {
  background: var(--eos);
}
.sc-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin: 0 4px 0 10px;
  vertical-align: -1px;
}
.sc-key:first-child {
  margin-left: 0;
}
.sc-prior {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg);
  font-size: 11.5px;
  line-height: 1.45;
}
.sc-prior span {
  display: block;
  color: var(--mut);
  font-size: 10.5px;
}
@container sc (max-width: 600px) {
  .sc-recorded {
    padding: 14px;
  }
  .sc-rec-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  /* phones: the feature name sits above its bar and count */
  .sc-rec-list li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
  }
  .sc-rec-name {
    grid-column: 1 / -1;
  }
}

/* Outside BACH / TCGA external (#/tcga) — story + specimen browser; no replay. */
.workspace[data-route='tcga'] .replay { display: none !important; }
.tcga-page { max-width: 1100px; margin: 0 auto; padding: 0 0 2.5rem; }
.tcga-claim { margin-bottom: 1.25rem; }
.tcga-compare {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 1rem;
}
.tcga-panel {
  border: 1px solid var(--ln, #e7e5e4);
  background: var(--glass, rgba(255, 255, 255, 0.55));
  border-radius: 12px;
  padding: 1rem 1.1rem 1.05rem;
  display: flex;
  flex-direction: column;
}
.tcga-panel h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.tcga-panel-note { margin: 0 0 0.75rem; color: var(--mut); font-size: 0.88rem; line-height: 1.4; }
.tcga-dl { margin: 0; display: grid; }
/* One stat per row: label and estimate on the first line, the interval (or its exact replacement) muted below. */
.tcga-dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  row-gap: 0.15rem;
  align-items: baseline;
  padding: 0.6rem 0;
}
.tcga-dl > div + div { border-top: 1px solid var(--ln2, var(--ln, #e7e5e4)); }
.tcga-dl > div:first-child { padding-top: 0.2rem; }
.tcga-dl dt { margin: 0; color: var(--mut); font-size: 0.86rem; line-height: 1.35; }
.tcga-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.tcga-dl dd.tcga-est { font-weight: 650; font-size: 1.02rem; text-align: right; white-space: nowrap; }
.tcga-dl dd.tcga-ci {
  grid-column: 1 / -1;
  justify-self: end;
  max-width: 34rem;
  text-align: right;
  color: var(--mut);
  font-size: 0.8rem;
  line-height: 1.4;
  text-wrap: pretty;
}
.tcga-nw { white-space: nowrap; }
.tcga-foot { margin: 0.5rem 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--mut); }
/* .mx-pop is a flex row; these lines are running text with an inline code chip. */
.tcga-src { display: block; line-height: 1.6; }
.tcga-panel .tcga-src { margin-top: auto; padding-top: 0.75rem; }
/* Specimen id: the patient barcode, then "FFPE · tumor · field 3" muted below it (the full id is the link title). */
.tcga-cc { display: flex; min-width: 0; }
.tcga-wl .tcga-cc a.cid { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 100%; }
.tcga-pid { font-weight: 650; }
.tcga-fld { font-size: 11.5px; font-weight: 500; color: var(--mut); font-variant-numeric: tabular-nums; }
.tcga-pk { display: none; }
/* Specimen-set filter: a segmented control whose counts add up to every field. */
.tcga-wl .tcga-toolbar { margin: 0 0 12px; }
.tcga-wl .tcga-sets button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tcga-sets .tcga-n { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.tcga-sets button[aria-pressed='true'] .tcga-n { color: inherit; }
.tcga-wl .tcga-sets button:focus-visible { outline: 2px solid var(--hema); outline-offset: -3px; }
/* Tier groups: the whole header is the disclosure button. */
.tcga-wl .wl-table tr.grp th { padding: 0; }
.tcga-grp-btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tcga-grp-btn .g-n { margin: 0 0 0 4px; }
.tcga-chev {
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
.tcga-grp-btn[aria-expanded='true'] .tcga-chev { transform: rotate(90deg); }
.tcga-grp-btn:focus-visible { outline: 2px solid var(--hema); outline-offset: -3px; }
@media (hover: hover) {
  .tcga-grp-btn:hover .g-name { text-decoration: underline; text-underline-offset: 2px; }
}
@media (min-width: 1101px) {
  /* without the old Prep column the suggestion took the slack: a three-class set now fits on one line */
  .tcga-wl .wl-table th.c-sugg { width: 190px; }
  .tcga-wl .wl-table th.c-set { width: 200px; }
}
@media (max-width: 1100px) {
  /* Cards: barcode and P(Invasive) first, then the suggestion with the confidence set at the right; the set moves
     to a line of its own when both do not fit. The tier header states the reason, so the flags are left out. */
  .tcga-wl .wl-table tr.row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 10px 12px 11px 46px;
  }
  .tcga-wl .wl-table tr.row td.c-tier { position: absolute; inset: 0 auto 0 0; width: 34px; padding: 10px 0 0 8px; }
  .tcga-wl .wl-table tr.row td.c-case { order: 1; flex: 1 1 calc(100% - 125px); min-width: 0; }
  .tcga-wl .wl-table tr.row td.c-p { order: 2; flex: 0 0 auto; white-space: nowrap; text-align: right; }
  .tcga-wl .wl-table tr.row td.c-sugg { order: 3; flex: 1 1 auto; min-width: 0; }
  .tcga-wl .wl-table tr.row td.c-set { order: 4; flex: 0 1 auto; }
  .tcga-wl .wl-table tr.row td.c-flags { display: none; }
  .tcga-wl .wl-table td.c-p .pnum { margin-right: 0; }
  .tcga-pk { display: inline; margin-right: 5px; font-size: 11px; font-weight: 500; color: var(--mut); }
  .tcga-grp-btn { min-height: 40px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  /* tablets: one line per field, in aligned columns */
  .tcga-wl .wl-table tr.row { flex-wrap: nowrap; align-items: center; }
  .tcga-wl .wl-table tr.row td.c-case { flex: 0 0 190px; }
  .tcga-wl .wl-table tr.row td.c-sugg { order: 2; flex: 1 1 0; }
  .tcga-wl .wl-table tr.row td.c-p { order: 3; flex: 0 0 112px; }
  .tcga-wl .wl-table tr.row td.c-set { flex: 0 0 176px; text-align: right; }
  .tcga-wl .wl-table tr.row td.c-set .chips { justify-content: flex-end; }
}
@media (max-width: 640px) {
  /* two by two, each button the full half width: four sets do not fit on one line of a phone */
  .tcga-wl .tcga-sets { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .tcga-wl .tcga-sets button { justify-content: space-between; min-height: 38px; padding-inline: 12px; }
  .tcga-wl .tcga-sets button + button { border-left: 0; }
  .tcga-wl .wl-table tr.row { padding-block: 10px 11px; }
}
@media (max-width: 520px) {
  .tcga-panel { padding: 0.9rem 0.95rem 0.95rem; }
  .tcga-dl dd.tcga-ci { max-width: none; }
}
.tcga-compare-note {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--ink, #1c1917);
  background: color-mix(in srgb, var(--ink, #1c1917) 4%, transparent);
  font-size: 0.92rem;
  line-height: 1.45;
}
.tcga-limits { margin: 0 0 1.75rem; }
.tcga-limits h3 { margin: 0 0 0.4rem; font-size: 1rem; }
/* the protocol and credit lines follow the list at its size */
.tcga-limits .tcga-foot { margin-top: 8px; font-size: 12px; line-height: 1.55; }
/* The page heading and the specimen section heading: the serif display face at the evaluation page's section-heading
   size. `.mx h2` (theme.css) sets the text face on every h2 of these pages, so the page class is part of the selector. */
.tcga-page .tcga-intro,
.tcga-page .tcga-specimens h2 {
  margin: 0 0 0.35rem;
  font: 500 25px/1.25 var(--display, Fraunces, Georgia, serif);
  font-variation-settings: var(--display-axes);
  letter-spacing: -0.4px;
  color: var(--ink);
}
@container mx (max-width: 599px) {
  .tcga-page .tcga-intro,
  .tcga-page .tcga-specimens h2 { font-size: 21px; }
}
/* Specimen page: the title names the field as the list does; the raw id sits below it, smaller. */
.cv .cv-id .tcga-raw-id {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tcga-spec-lede { margin: 0 0 1rem; color: var(--mut); max-width: 42rem; line-height: 1.45; }
.tcga-wl .mx-head { max-width: none; }
/* the page h1 is the top bar's; the intro heading names the test, at the section-heading size */
.tcga-claim .mx-lede { margin: 0; max-width: 62rem; line-height: 1.5; }
.tcga-specimens-loading { min-height: 60vh; }
/* Back from a specimen: drawn as the case bar above a worklist case is (flow.css .casebar with its .cb-back button; the
   bar itself is app.js's and is not shown here), at the bar's height, so the specimen header sits where a case header does */
a.back {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 51px;
  margin: -4px 0 12px;
  padding: 0 16px 0 15px;
  border: 1px solid var(--ln);
  border-radius: 12px;
  background: var(--glass, var(--sf));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--hema);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) {
  a.back:hover { background: var(--bl); }
}
a.back:focus-visible {
  outline: 2px solid var(--hema);
  outline-offset: 2px;
}

@media print {
  .mx-nav,
  .mx-top .btn,
  .cx-tooltip {
    display: none !important;
  }
  .mx-fig,
  .mx-kpi,
  .mx-brief {
    break-inside: avoid;
    box-shadow: none;
  }
  .mx-section {
    break-before: auto;
  }
}