/* PathQueue case styles (overnight polish). Loaded after workspace.css; uses its tokens only.
   Scope: .cv (biopsy + surgical case views) and the viewer / compare dialogs appended to <body>.
   Colour roles: eosin = toward invasive / tumour / above threshold; hematoxylin = away from invasive / concept layers;
   amber = check / near threshold; green = as expected / clear. Every colour is paired with text or an icon. */

.cv {
  --cv-gap: 18px;
  --cv-fs: 13px;
  --cv-fs-s: 12px;
  --cv-fs-xs: 11px;
  font-size: var(--cv-fs);
}
.cv .card {
  min-width: 0;
}
.cv .card h2 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}
.cv .card-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cv h3 {
  font-size: var(--cv-fs-s);
  font-weight: 600;
  color: var(--ink);
  margin: 14px 0 6px;
}
.cv .sub {
  font-size: var(--cv-fs-xs);
  line-height: 1.55;
}
.cv .note {
  font-size: var(--cv-fs-s);
  line-height: 1.55;
}
.cv :focus-visible {
  outline: 2px solid var(--hema);
  outline-offset: 2px;
}
.cv .btn {
  font-size: var(--cv-fs-s);
  min-height: 36px;
}
.cv .btn.sm {
  min-height: 30px;
  padding: 5px 10px;
  font-size: var(--cv-fs-xs);
  margin-top: 8px;
}
.cv .btn:disabled {
  opacity: 0.55;
}
.cv .btn.d {
  background: var(--sf);
}
.cv .chip {
  font-size: var(--cv-fs-xs);
}
.cv .cv-linked,
.cv .why-row.cv-linked {
  box-shadow: 0 0 0 2px var(--hema);
  border-radius: 8px;
}
.cv-grid {
  margin-top: var(--cv-gap);
  align-items: start;
}
.cv-main > .card + .card,
.cv-main > details.card,
.cv-side > .card + .card {
  margin-top: var(--cv-gap) !important;
}
@media (min-width: 1151px) {
  .cv-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(330px, 1fr);
  }
  /* case_ui.js fitSide adds cv-stick only when the whole decision column fits in the viewport under the header */
  .cv-grid > .cv-side.cv-stick {
    position: sticky;
    top: calc(var(--stick, 0px) + 16px);
    align-self: start;
  }
}
/* The case is fetched after the first paint (app.js draws a small "Loading…" card meanwhile). The footer under that card
   would jump down by the whole case height when it arrives (cumulative layout shift): it is left out until then. */
#app:has(> [data-testid='state-loading']) ~ footer.quiet {
  display: none;
}
/* The case bar above the case is first drawn before the worklist arrives (no "Next case" button yet) and grows when it
   does, pushing the whole case down: it keeps its final height from the start. */
#casebar:not([hidden]) {
  box-sizing: border-box;
  min-height: 51px;
  align-content: center;
}
@media (max-width: 760px) {
  #casebar:not([hidden]) {
    min-height: 88px;
  }
}

/* ---- header ------------------------------------------------------------------------------------------------------ */
.cv-header {
  padding-bottom: 0 !important;
}
.cv-head {
  display: flex;
  gap: 16px 28px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.cv-id h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 18px !important;
  letter-spacing: -0.2px;
}
.cv-id .sub {
  margin-top: 4px;
}
.cv-glance {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 4px 22px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--ln);
  border-radius: 10px;
  background: var(--bg);
}
.cv-glance div {
  min-width: 0;
}
.cv-glance dt {
  font-size: var(--cv-fs-xs);
  color: var(--mut);
}
.cv-glance dd {
  margin: 2px 0 0;
  font-size: var(--cv-fs-s);
  color: var(--mut);
  white-space: nowrap;
}
.cv-glance dd b {
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
}
.cv-glance .chips {
  gap: 4px;
}
.cv .tabs {
  margin-top: 14px;
}
.cv .tabs button {
  font-size: 13px;
}
.tab-n {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--bl);
  color: var(--hema);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}
.cv-tabpanel {
  margin-top: var(--cv-gap);
}

/* ---- image evidence -------------------------------------------------------------------------------------------------- */
.cv-fig {
  margin: 0;
}
.cv-hmctl {
  justify-content: space-between;
  font-size: var(--cv-fs-s) !important;
  margin: 0 0 10px !important;
}
.cv-hmctl select {
  font-size: var(--cv-fs-s);
  max-width: 420px;
}
.cv-hm {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bl);
  line-height: 0;
}
.cv-hm > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.cv-hm .hm-svg,
.vw-canvas .hm-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hm-svg[data-kind='risk'] .hm-tile {
  fill: var(--eos);
}
.hm-svg[data-kind='concept'] .hm-tile {
  fill: var(--hema);
}
.hm-svg[data-kind='attention'] .hm-tile {
  fill: var(--amb);
}
/* exact region contribution: pink (eosin) toward invasive, blue away; the legend names these two colours */
:root {
  --away: #3b6db3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --away: #8fb6ec;
  }
}
:root[data-theme='dark'],
.vw-foot {
  --away: #8fb6ec;
}
.hm-svg[data-kind='contribution'] .hm-tile.pos {
  fill: var(--eos);
}
.hm-svg[data-kind='contribution'] .hm-tile.neg {
  fill: var(--away);
}
.hm-svg .hm-drop {
  fill-opacity: 0.85;
}
.hm-svg .hatch-bg {
  fill: #f4f2f8;
  fill-opacity: 0.55;
}
.hm-svg .hatch-ln {
  stroke: #4b4e5e;
  stroke-width: 6;
  stroke-opacity: 0.55;
}
.cv-hm .hl,
.vw-canvas .vhl {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5px;
  vector-effect: non-scaling-stroke;
}
.cv-hm .hl-halo,
.vw-canvas .vhl-halo {
  fill: none;
  stroke: #1b1a2e;
  stroke-width: 6px;
  stroke-opacity: 0.85;
  vector-effect: non-scaling-stroke;
}
.rg-grid {
  position: absolute;
  inset: 0;
}
.rg {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: zoom-in;
  line-height: 1;
}
.rg.drop {
  cursor: help;
}
.rg:hover,
.rg:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: -2px !important;
  box-shadow: inset 0 0 0 4px rgba(27, 26, 46, 0.55);
}
.rg.peek {
  outline: 2px dashed #fff;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 5px rgba(27, 26, 46, 0.4);
}
.rg-n {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(27, 26, 46, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.12s;
}
.rg:hover .rg-n,
.rg:focus-visible .rg-n,
.rg.peek .rg-n {
  opacity: 1;
}
/* viewer: the value badge stays on every region; the index shows on the hovered or focused region only (as in the
   case view), and on touch screens, which have no hover, both stay visible */
.vw-canvas .rg-n {
  transform: scale(var(--inv-s, 1));
  transform-origin: 0 0;
}
.vw-canvas .rg:hover .rg-n,
.vw-canvas .rg:focus-visible .rg-n,
.vw-canvas .rg.peek .rg-n {
  opacity: 0.85;
}
@media (hover: none) {
  .vw-canvas .rg-n {
    opacity: 0.85;
  }
}
.hm-expand {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 0;
  border-radius: 8px;
  background: rgba(27, 26, 46, 0.78);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.hm-expand:hover {
  background: rgba(27, 26, 46, 0.92);
}
.hm-expand svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.cv-legend {
  line-height: 1.5;
  margin-top: 10px;
}
.lg-scale {
  display: grid;
  grid-template-columns: auto minmax(120px, 220px);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
}
.lg-title {
  grid-row: 1 / span 2;
  font-size: var(--cv-fs-s);
  font-weight: 600;
  color: var(--ink);
}
.lg-bar {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--eos) 0%, transparent), var(--eos));
  box-shadow: inset 0 0 0 1px var(--ln);
}
.cv-legend[data-kind='concept'] .lg-bar {
  background: linear-gradient(90deg, color-mix(in srgb, var(--hema) 0%, transparent), var(--hema));
}
.cv-legend[data-kind='attention'] .lg-bar {
  background: linear-gradient(90deg, color-mix(in srgb, var(--amb) 0%, transparent), var(--amb));
}
.cv-legend[data-kind='contribution'] .lg-bar {
  background: linear-gradient(90deg, var(--away), transparent 50%, var(--eos));
}
.lg-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mut);
}
.lg-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 8px;
  font-size: var(--cv-fs-xs);
  color: var(--mut);
}
.lg-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lg-key.dim {
  color: var(--mut);                /* muted by colour, not opacity: keeps text at >= 4.5:1 (axe) */
}
.lg-key b {
  color: var(--ink);
  font-weight: 600;
}
.sw-hatch {
  width: 18px;
  height: 14px;
  border-radius: 3px;
  flex: none;
  background: repeating-linear-gradient(45deg, #4b4e5e8c 0 3px, #f4f2f8 3px 7px);
  box-shadow: inset 0 0 0 1px var(--ln);
}
.sw-hl {
  width: 18px;
  height: 14px;
  border-radius: 2px;
  flex: none;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #1b1a2e;
  background: var(--bl);
}
.lg-note {
  margin: 8px 0 0;
  font-size: var(--cv-fs-xs);
  line-height: 1.55;
  color: var(--mut);
  max-width: 78ch;
}
.cv-hm.is-missing::after,
.cv-thumb.is-missing::after {
  content: attr(data-missing);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: var(--mut);
  background: var(--bl);
}

/* tooltip (fixed; one in <body>, one per open dialog) */
.cv-tip {
  position: fixed;
  z-index: 1000;
  max-width: 300px;
  min-width: 200px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #1f2232;
  color: #f4f3f8;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 10px 30px #0004;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cv-tip[hidden] {
  display: none;
}
.cv-tip b {
  font-weight: 600;
}
.cv-tip .tip-sub {
  color: #b9bccb;
  font-size: 11px;
}
.cv-tip .tip-h {
  margin-top: 4px;
  color: #b9bccb;
  font-size: 11px;
}
.cv-tip .tip-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.cv-tip .tip-row b {
  font-variant-numeric: tabular-nums;
}
/* a concept whose AI spot check failed: named with its score, muted and labelled, never read as a reason */
.cv-tip .tip-row.muted,
.cv-tip .tip-row.muted b {
  color: #9da1b3;
  font-weight: 400;
}
.cv-tip .tip-row.muted i {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #e4bb75;
}
.cv-tip:not([hidden]) {
  animation: cv-fade-in 0.12s ease-out;
}
@keyframes cv-fade-in {
  from {
    opacity: 0;
  }
}
.cv-tip .tip-qc {
  align-self: flex-start;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 11px;
}
.cv-tip .tip-qc.ok {
  background: #2e75614d;
  color: #a9e2cb;
}
.cv-tip .tip-qc.bad {
  background: #93641c66;
  color: #f2d39b;
}
.cv-tip .tip-link {
  color: #f6c3d5;
  font-size: 11px;
}

/* ---- summary --------------------------------------------------------------------------------------------------------- */
.sum-s {
  margin: 8px 0;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 76ch;
}
.cv .fref {
  font-size: 11px !important;
  padding: 1px 6px !important;
  margin-left: 5px;
  border-radius: 5px;
  vertical-align: 1px;
  cursor: pointer;
}
.cv .fref:focus-visible,
.cv .fref:hover {
  background: var(--hema);
  color: #fff;
}
.sum-badges .badge {
  font-size: var(--cv-fs-xs);
}

/* ---- why ------------------------------------------------------------------------------------------------------------- */
.cv-why .explanation-source {
  font-size: var(--cv-fs-s);
}
.why-sum {
  display: flex;
  gap: 16px;
  align-items: stretch;
  margin: 0 0 14px;
}
.ws-net {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 132px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--ln);
  font-size: var(--cv-fs-xs);
  color: var(--mut);
}
.ws-net b {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ws-lists {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  font-size: var(--cv-fs-s);
}
.ws-lists p {
  margin: 0;
  line-height: 1.55;
}
.ws-lists b {
  font-weight: 600;
}
.ws-k {
  display: inline-block;
  min-width: 128px;
  margin-right: 6px;
  font-size: var(--cv-fs-xs);
  color: var(--mut);
}
.ws-k::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}
.ws-k.up::before {
  background: var(--eos);
}
.ws-k.down::before {
  background: var(--hema);
}
.why-key {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 150px minmax(110px, 1fr) 96px;
  gap: 10px;
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--ln);
  font-size: 11px;
  color: var(--mut);
}
.why-key .axis {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: 11px;
}
.why-group h3 {
  margin: 14px 0 4px;
  padding-left: 8px;
}
.cv .why {
  gap: 2px;
}
.cv .why-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 150px minmax(110px, 1fr) 96px;
  grid-template-areas: 'head level bar val' 'say say say say';
  gap: 2px 10px;
  align-items: center;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.cv .why-row:hover {
  background: color-mix(in srgb, var(--bl) 70%, transparent);
}
.cv .why-row.unreliable,
.cv .why-row.unreliable .lbl {
  color: var(--mut);
}
.cv .why-row.unreliable .why-bar {
  opacity: 0.5;
}
.why-regions {
  margin: 0 0 14px;
}
.why-regions h3 {
  margin: 0 0 2px;
  padding-left: 8px;
}
.why-regions > .sub {
  margin: 0 0 6px;
  padding-left: 8px;
}
.cv .why-region {
  display: grid;
  grid-template-columns: 84px 64px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.cv .why-region:hover {
  background: color-mix(in srgb, var(--bl) 70%, transparent);
}
.cv .why-region .wg-n {
  font-weight: 600;
}
.cv .why-region .v {
  color: var(--eos);
  font-variant-numeric: tabular-nums;
}
.cv .why-region .wg-z {
  font-size: var(--cv-fs-xs);
  color: var(--mut);
}
.cv .why-row.on {
  background: var(--bl);
  box-shadow: inset 3px 0 0 var(--hema);
}
.wr-head {
  grid-area: head;
  min-width: 0;
}
.cv .why-row .lbl {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
.cv .why-row .src,
.cv .why-row .cc {
  font-size: 11px;
  margin-left: 6px;
  white-space: nowrap;
}
.src.ctx {
  border-style: dashed;
}
.wr-level {
  grid-area: level;
  display: flex;
  flex-direction: column;
  font-size: var(--cv-fs-xs);
  line-height: 1.3;
  color: var(--mut);
}
.wr-level b {
  font-size: var(--cv-fs-s);
  font-weight: 600;
  color: var(--ink);
}
.wr-level span {
  font-variant-numeric: tabular-nums;
}
.wr-level.lo b::before,
.wr-level.mid b::before,
.wr-level.hi b::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 7px;
  margin-right: 6px;
  vertical-align: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 6.5px, var(--ln) 6.5px 11.5px, transparent 11.5px 13px, var(--ln) 13px);
}
.wr-level.mid b::before {
  background: linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 6.5px, var(--ink) 6.5px 11.5px, transparent 11.5px 13px, var(--ln) 13px);
}
.wr-level.hi b::before {
  background: linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 6.5px, var(--ink) 6.5px 11.5px, transparent 11.5px 13px, var(--ink) 13px);
}
.wr-bar {
  grid-area: bar;
}
.cv .why-row svg.why-bar {
  display: block;
  width: 100%;
  height: 14px;
  overflow: visible;
}
.why-bar .wb-track {
  fill: var(--ln);
  stroke: none;
}
.why-bar .wb-fill {
  stroke: none;
}
.why-bar .wb-fill.up {
  fill: var(--eos);
}
.why-bar .wb-fill.down {
  fill: var(--hema);
}
.why-bar .wb-zero {
  stroke: var(--mut);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.cv .why-row .v {
  grid-area: val;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--cv-fs-xs);
  line-height: 1.3;
  color: var(--mut);
  text-align: right;
}
.cv .why-row .v b {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cv .why-row .v.none b {
  color: var(--mut);
}
.wr-say {
  grid-area: say;
  font-size: var(--cv-fs-xs);
  line-height: 1.5;
  color: var(--mut);
  max-width: 88ch;
}
.wr-tiles {
  color: var(--hema);
  white-space: nowrap;
}
.why-foot {
  margin-top: 12px;
  max-width: 88ch;
}

/* ---- prediction and confidence ------------------------------------------------------------------------------------- */
.hs-head {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}
.hs-risk .bigp {
  font-size: 40px;
  line-height: 1;
}
.hs-sugg {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-left: auto; /* stays right-aligned when it wraps under the big number */
}
.hs-sugg b {
  font-size: 15px;
  font-weight: 600;
}
.hs-h {
  margin-top: 16px !important;
}
.pchart {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pc-row {
  display: grid;
  grid-template-columns: minmax(118px, 150px) minmax(0, 1fr) 40px 48px;
  gap: 10px;
  align-items: center;
  font-size: var(--cv-fs-s);
}
.pc-lbl {
  color: var(--mut);
  line-height: 1.25;
}
.pc-row.in .pc-lbl {
  color: var(--ink);
}
.pc-row.top .pc-lbl {
  font-weight: 600;
  color: var(--ink);
}
.pc-tag {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--hema);
}
.pc-track {
  position: relative;
  display: block;
  height: 12px;
  border-radius: 4px;
  background: var(--bl);
}
.pc-track i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--mut) 55%, transparent);
}
.pc-row.in .pc-track i {
  background: var(--hema);
}
.pc-row.in.agg .pc-track i {
  background: var(--eos);
}
.pc-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pc-in {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--hema);
  color: var(--hema);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.pc-out {
  color: var(--mut);
  padding-left: 8px;
}
.hs-set {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hs-set .hs-h {
  margin-bottom: 4px;
}
.hs-set .chips {
  margin-top: 12px;
}
.hs-callout {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--ln);
  font-size: var(--cv-fs-s);
  line-height: 1.55;
}
.hs-callout.warn {
  border-color: color-mix(in srgb, var(--amb) 45%, var(--ln));
  border-left: 3px solid var(--amb);
}
.hs-callout > p {
  margin: 0;
}
.hs-callout > p + p {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ln);
}
.hs-say b {
  font-weight: 600;
}
.hs-note {
  color: var(--mut);
}
.cv-coverage {
  font-size: var(--cv-fs-s);
  line-height: 1.55;
}
.hs-cov.warn {
  color: var(--amb);
}
.validation-note {
  margin: 10px 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--grnl);
  color: var(--grn);
}
.checks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ck {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--ln);
}
.ck:last-child {
  border-bottom: 0;
}
.ck-i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.ck.ok .ck-i {
  background: var(--grnl);
  color: var(--grn);
}
.ck.warn .ck-i {
  background: var(--ambl);
  color: var(--amb);
}
.ck.info .ck-i {
  background: var(--bl);
  color: var(--hema);
  font-style: italic;
  font-family: var(--display);
}
.ck.na .ck-i {
  background: var(--bg);
  color: var(--mut);
}
.ck-l {
  display: flex;
  flex-direction: column;
  font-size: var(--cv-fs-s);
}
.ck-l b {
  font-weight: 500;
}
.ck-good {
  font-size: var(--cv-fs-xs);
  color: var(--mut);
  line-height: 1.45;
}
.ck-v {
  font-size: var(--cv-fs-s);
  text-align: right;
  white-space: nowrap;
}
.ck-v b {
  font-weight: 600;
}
.ck.warn .ck-v b {
  color: var(--amb);
}
.stamp {
  margin-top: 10px;
  border-bottom: 0 !important;
}

/* ---- references ----------------------------------------------------------------------------------------------------- */
.ref-intro {
  margin: 0 0 10px;
  font-size: var(--cv-fs-s) !important;
}
.ref-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.ref-thumb {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--ink);
  cursor: zoom-in;
}
.cv-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bl);
  box-shadow: inset 0 0 0 1px var(--ln);
}
.cv-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
}
.ref-thumb:hover .cv-thumb,
.ref-thumb:focus-visible .cv-thumb {
  box-shadow: 0 0 0 2px var(--hema);
}
.rt-lbl {
  font-size: var(--cv-fs-xs);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 3px;
}
.rt-lbl.same::after {
  content: ' · matches';
  font-weight: 400;
  color: var(--mut);
}
.rt-sim {
  font-size: 11px;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.cv-contrast {
  grid-template-columns: 150px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  margin-top: 14px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  font-size: var(--cv-fs-s) !important;
}
.ref-thumb.wide {
  width: 150px;
}
.cv-contrast .chips {
  margin-top: 4px;
}

/* look-alike contrast detail: the global table/th/td rules (worklist) are reset for this compact table */
.cv-contrast .ct-wrap {
  grid-column: 1 / -1;
  min-width: 0;
  overflow-x: auto;
}
.ct-table {
  display: table;
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: var(--cv-fs-s);
}
.ct-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 6px;
  font-weight: 600;
  color: var(--ink);
}
.ct-table thead {
  display: table-header-group;
}
.ct-table tbody {
  display: table-row-group;
}
.ct-table tr {
  display: table-row;
}
.ct-table th,
.ct-table td {
  display: table-cell;
  width: auto;
  max-width: none;
  padding: 6px 8px;
  background: none;
  border-bottom: 1px solid var(--ln);
  font-size: var(--cv-fs-s);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  vertical-align: top;
  text-align: left;
}
.ct-table thead th {
  font-size: var(--cv-fs-xs);
  font-weight: 600;
  color: var(--mut);
}
.ct-table tbody th {
  font-weight: 600;
  color: var(--ink);
}
.ct-table tr:last-child td,
.ct-table tr:last-child th {
  border-bottom: 0;
}
.ct-table .ct-z,
.ct-table .ct-d {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.ct-table .ct-rg {
  display: block;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--cv-fs-xs);
  color: var(--mut);
  text-align: left;
}
.ct-table button.ct-rg {
  color: var(--hema);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: zoom-in;
}
.ct-table .ct-ai {
  font-size: var(--cv-fs-xs);
  color: var(--mut);
}
.ct-table .ct-why {
  display: block;
  margin-top: 2px;
  font-size: var(--cv-fs-xs);
  font-weight: 600;
}
.ct-row:hover,
.ct-row:focus-within {
  background: var(--bl);
}
.ct-row.unreliable > * {
  color: var(--mut);
}
.ct-row.unreliable .ct-z,
.ct-row.unreliable .ct-d,
.ct-row.unreliable th {
  font-weight: 400;
}
.ct-row.unreliable button.ct-rg {
  color: var(--mut);
}
.cv-cmp-open {
  margin-top: 8px;
}
.ct-none,
.ct-note {
  margin: 6px 0 0 !important;
  font-size: var(--cv-fs-xs) !important;
}
.cv-thumb .ct-mark {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(27, 26, 46, 0.6), inset 0 0 0 2px rgba(27, 26, 46, 0.6);
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}
.cv-thumb .ct-mark.on {
  opacity: 1;
}

/* ---- decision ----------------------------------------------------------------------------------------------------- */
.cv-decide-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.stepper li {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--ln);
  min-width: 0;
}
.st-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--ln);
  font-size: 11px;
  font-weight: 700;
  color: var(--mut);
  background: var(--sf);
}
.st-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--cv-fs-xs);
  line-height: 1.35;
  color: var(--mut);
}
.st-t b {
  font-size: var(--cv-fs-s);
  font-weight: 600;
  color: var(--ink);
}
.stepper li.done .st-dot {
  background: var(--grn);
  border-color: var(--grn);
  color: var(--sf);
}
.stepper li.current {
  border-color: var(--hema);
  background: var(--sf);
  box-shadow: inset 0 0 0 1px var(--hema);
}
.stepper li.current .st-dot {
  border-color: var(--hema);
  color: var(--hema);
}
.stepper li.st-skip {
  border-style: dashed;
  opacity: 0.8;
}
.stepper li.todo {
  color: var(--mut);                /* pending step: muted colour, not opacity (contrast) */
}
.ord-list {
  margin-top: 10px;
}
.cv .act.ord {
  padding: 10px 12px;
}
.ord-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 4px;
}
.ord-items {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ord-items b {
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid var(--ln);
  font-size: var(--cv-fs-s);
  font-weight: 600;
}
.ord-st {
  margin-left: auto;
  font-size: var(--cv-fs-xs);
  color: var(--mut);
}
.act.ord.approved .ord-st,
.act.ord.edited .ord-st {
  color: var(--grn);
  font-weight: 600;
}
.cv .act.off {
  text-decoration: none;
}
.cv .act.off .ord-items b {
  text-decoration: line-through;
}
.cv-actions .btn.p {
  min-width: 128px;
}
.cv-confirm {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--amb);
  background: var(--ambl);
  color: var(--ink);
}
.cv-confirm b {
  font-weight: 600;
  font-size: 13px;
}
.cv-confirm p {
  margin: 4px 0 0;
  font-size: var(--cv-fs-s);
  line-height: 1.5;
}
.cv-confirm .btns {
  margin-top: 10px;
}
.btn.p.dd {
  background: var(--eos);
  border-color: var(--eos);
}
.cv-done {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--grnl);
  color: var(--grn);
  font-size: var(--cv-fs-s);
  line-height: 1.5;
}
.cv-done > span:first-child {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--grn);
  color: var(--sf);
  font-weight: 700;
  font-size: 12px;
}
.cv-done.info {
  background: var(--bl);
  color: var(--hema);
}
.cv-done.info > span:first-child {
  background: var(--hema);
}
.cv-done b {
  font-weight: 600;
}
.cv-signout .btns {
  align-items: center;
}

/* ---- full-screen viewer and compare dialogs (appended to <body>) ----------------------------------------------------- */
dialog.cv-viewer,
dialog.cv-compare {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  --vw-bg: #14161f; /* the viewers stay dark in both themes; the sticky compare strip reuses it */
  background: var(--vw-bg);
  color: #eef0f5;
  box-shadow: none;
  font-family: var(--font);
}
dialog.cv-viewer[open],
dialog.cv-compare[open] {
  display: flex;
  flex-direction: column;
}
dialog.cv-viewer::backdrop,
dialog.cv-compare::backdrop {
  background: #0b0c12;
  backdrop-filter: none;
}
.vw-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid #2b2f40;
}
.vw-title h2 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600;
  color: #fff;
}
.vw-sub {
  font-size: 12px;
  color: #a4adbb;
}
.vw-tools {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  font-size: 12px;
}
.vw-tools [hidden] {
  display: none !important; /* .vw-tools label sets display, which beat the hidden attribute (opacity on margin strips) */
}
.vw-tools label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vw-tools .btn {
  min-height: 32px;
  padding: 5px 11px;
  border-color: #3a3f52;
  background: #20232f;
  color: #eef0f5;
  font-size: 13px;
}
.vw-tools .btn:hover {
  background: #2c3040;
}
.vw-tools .btn.p {
  background: #eef0f5;
  color: #14161f;
  border-color: #eef0f5;
}
/* Close is a ghost button: leaving the dialog is not the main action there */
.vw-tools .btn.vw-close {
  background: transparent;
  gap: 6px;
}
.vw-tools .btn.vw-close:hover {
  background: #2c3040;
}
.vw-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vw-zoom output {
  min-width: 46px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.vw-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.vw-stage.grabbing {
  cursor: grabbing;
}
.vw-stage:focus-visible {
  outline: 2px solid #b9a9e2;
  outline-offset: -4px;
}
/* the stage is focused by script when a dialog opens; WebKit then rings it even after a mouse click (case_ui.js adds
   .kb while the keyboard is in use) */
.vw-stage:not(.kb):focus-visible {
  outline: none;
}
.vw-canvas {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
  line-height: 0;
}
.vw-canvas > img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
}
.vw-canvas.no-overlay .hm-svg,
.vw-canvas.no-overlay .rg-grid {
  display: none;
}
.vw-canvas .rg {
  cursor: zoom-in;
}
.vw-foot {
  padding: 10px 18px 14px;
  border-top: 1px solid #2b2f40;
  color: #c9cdd8;
  --ink: #eef0f5;
  --mut: #a4adbb;
  --ln: #35404d;
  --bl: #2e3042;
  --eos: #ed92b1;
  --hema: #b9a9e2;
  --amb: #e4bb75;
}
.vw-foot .cv-legend {
  margin: 0;
}
.cmp-panes {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: #2b2f40;
}
.cmp-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  background: var(--vw-bg);
}
.cmp-pane figcaption {
  padding: 10px 16px;
  font-size: 12px;
  line-height: 1.55;
  color: #c9cdd8;
  border-top: 1px solid #2b2f40;
}
.cmp-pane figcaption b {
  color: #fff;
  font-weight: 600;
}
.cmp-diff {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 4px;
}
.cmp-diff .chip {
  background: #2e3042;
  color: #e7e2f7;
}
.cmp-diff .chip.muted {
  background: transparent;
  box-shadow: inset 0 0 0 1px #4a4d63;
  color: #9a9db0;
}
.cmp-n {
  display: inline-block;
  min-width: 1.4em;
  margin-right: 2px;
  border-radius: 4px;
  background: #fff;
  color: #1b1a2e;
  text-align: center;
  font-weight: 700;
}
.cmp-diff .chip.muted .cmp-n {
  background: #9a9db0;
}
.cmp-key {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #9a9db0;
}
.vw-canvas .cmp-marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cmp-mark rect {
  fill: none;
  stroke: #fff;
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}
.cmp-mark.unreliable rect {
  stroke: #9a9db0;
  stroke-dasharray: 6 5;
}
.cmp-mark text {
  fill: #fff;
  font-size: 96px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #1b1a2e;
  stroke-width: 18px;
}
.cmp-mark.unreliable text {
  fill: #9a9db0;
}
.cmp-strip {
  display: flex;
  gap: 10px;
  padding: 10px 18px 14px;
  overflow-x: auto;
  border-top: 1px solid #2b2f40;
}
.ref-thumb.mini {
  width: 104px;
  flex: none;
  color: #c9cdd8;
}
.ref-thumb.mini.on .cv-thumb {
  box-shadow: 0 0 0 2px #ed92b1;
}
.ref-thumb.mini .cv-thumb {
  background: #2e3042;
  box-shadow: inset 0 0 0 1px #35404d;
}
/* wide screens: the references share the strip's full width, each label on one line under a fixed-size image
   (phones and short windows keep the 72 px thumbnails below) */
@media (min-width: 761px) and (min-height: 501px) {
  .cmp-strip .ref-thumb.mini {
    flex: 1 1 0;
    width: auto;
    min-width: 132px;
    max-width: 260px;
  }
  .cmp-strip .ref-thumb.mini .cv-thumb {
    width: 132px;
  }
}

/* ---- phone ---------------------------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .cv {
    --cv-gap: 14px;
  }
  .cv-glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .cv-glance dd {
    white-space: normal;
  }
  .why-key {
    display: none;
  }
  .cv .why-row {
    grid-template-columns: minmax(0, 1fr) 84px;
    grid-template-areas: 'head head' 'level val' 'bar bar' 'say say';
    gap: 4px 10px;
  }
  .why-sum {
    flex-direction: column;
  }
  .ws-k {
    min-width: 0;
    display: block;
  }
  .pc-row {
    grid-template-columns: 96px minmax(0, 1fr) 36px 44px;
    gap: 8px;
  }
  .ref-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cv-contrast {
    grid-template-columns: 1fr !important;
  }
  /* look-alike table: one block per feature, values labelled inline */
  .ct-table thead {
    display: none;
  }
  .ct-table,
  .ct-table caption,
  .ct-table tbody {
    display: block;
  }
  .ct-table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 10px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--ln);
  }
  .ct-table tr:last-child {
    border-bottom: 0;
  }
  .ct-table tbody th,
  .ct-table td {
    display: block;
    padding: 0;
    border: 0;
  }
  .ct-table tbody th,
  .ct-table td.ct-spot {
    grid-column: 1 / -1;
  }
  .ct-table td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--cv-fs-xs);
    font-weight: 400;
    color: var(--mut);
  }
  .ref-thumb.wide {
    width: 100%;
  }
  .stepper {
    grid-template-columns: 1fr;
  }
  .hs-sugg {
    align-items: flex-start;
    text-align: left;
  }
  .cmp-panes {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .vw-bar {
    padding: 10px 12px;
  }
  .vw-op {
    display: none !important;
  }
  .hm-expand span {
    display: none;
  }
  .cv-hmctl {
    flex-direction: column;
    align-items: stretch !important;
  }
  .cv-hmctl select {
    max-width: none;
    width: 100%;
  }
  .lg-scale {
    grid-template-columns: 1fr;
  }
  .lg-title {
    grid-row: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rg-n {
    transition: none;
  }
}

/* ---- heatmap legibility: values on the image, multiply blend so the overlay reads on H&E ---------------------------- */
.cv-hm .hm-expand svg {
  position: static;
  inset: auto;
  width: 14px;
  height: 14px;
}
.cv-hm .hm-svg[data-kind] .hm-tile,
.vw-canvas .hm-svg[data-kind] .hm-tile {
  mix-blend-mode: multiply;
}
.rg-v {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.86);
  color: #1b1a2e;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px #0003;
}
.rg.drop .rg-v {
  background: rgba(27, 26, 46, 0.72);
  color: #fff;
  font-weight: 500;
}
.cv-hm.hide-values .rg-v {
  display: none;
}
.vw-canvas .rg-v {
  transform: scale(var(--inv-s, 1));
  transform-origin: 100% 100%;
}
.rt-match {
  font-size: 11px;
  color: var(--grn);
}
.rt-match.diff {
  color: var(--mut);
}
.why-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.why-group h3 .src {
  margin: 0;
  font-weight: 400;
}
.cv .why-row .cc {
  display: inline-block;
  margin: 2px 0 0;
  padding: 0;
  background: none;
  color: var(--grn);
  font-size: 11px;
}
.cv .why-row .cc.no {
  color: var(--mut);
}
.wr-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.why-key .axis span:nth-child(2) {
  color: var(--ink);
}
.why-key .axis {
  grid-column: 3 / span 2;
  white-space: nowrap;
  gap: 8px;
}
.ws-lists p {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: baseline;
}
.hm-svg .hatch-bg {
  fill: #f4f2f8;
  fill-opacity: 0.6;
}
.hm-svg .hatch-ln {
  stroke: #33364a;
  stroke-width: 9;
  stroke-opacity: 0.7;
}
@media (max-width: 760px) {
  .ws-lists p {
    grid-template-columns: 1fr;
  }
}

/* a sentence's citation chips stay on the line of its last word */
.fref-nb {
  white-space: nowrap;
}
/* the read suggests deferring because of the reliability flag: suggestion and reason in one block */
.rel-flag.rel-defer .rf-call {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
/* ids and versions behind the read (Prediction card) */
.prov-list {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: var(--cv-fs-s);
}
.prov-list div {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 10px;
}
.prov-list dt {
  color: var(--mut);
}
.prov-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---- surgical (simulated frozen section) -------------------------------------------------------------------------- */
/* the one "Simulated" tag, next to the case id */
.cv-simtag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--eos);
  color: var(--eos);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  vertical-align: 3px;
  white-space: nowrap;
}
/* what is simulated about the field: one plain line in the Margins card (no banner) */
.cv-simline {
  margin: 0 0 12px;
  font-size: var(--cv-fs-s);
  line-height: 1.55;
  color: var(--mut);
}
.cv-simline b {
  color: var(--eos);
  font-weight: 650;
}
.cv-sim {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: var(--cv-gap) 0 0 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: var(--cv-fs-s) !important;
  line-height: 1.55;
  border-width: 1.5px !important;
  border-style: dashed !important;
}
.sim-tag {
  flex: none;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--eos);
  color: var(--sf);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.mg-top {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}
.specimen {
  width: 100%;
  height: auto;
  display: block;
}
.sp-body {
  fill: var(--bl);
  stroke: none;
}
.sp-mid {
  font-size: 12px;
  fill: var(--ink);
  font-weight: 600;
}
.sp-mid.sub {
  font-size: 11px;
  fill: var(--mut);
  font-weight: 400;
}
.sp-side {
  stroke-width: 9;
  stroke-linecap: round;
  stroke: var(--grn);
  stroke-opacity: 0.55;
}
.sp-side.involved {
  stroke: var(--eos);
  stroke-opacity: 1;
  stroke-width: 12;
}
.sp-side.near {
  stroke: var(--amb);
  stroke-opacity: 1;
  stroke-dasharray: 10 6;
}
.sp-side.unknown {
  stroke: var(--ln);
}
.sp-lbl {
  font-size: 12px;
  fill: var(--mut);
  font-weight: 500;
}
.sp-lbl.involved {
  fill: var(--eos);
  font-weight: 700;
}
.sp-lbl.near {
  fill: var(--amb);
  font-weight: 600;
}
.mbars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mb-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--cv-fs-xs);
  color: var(--mut);
  margin-bottom: 2px;
}
.mb-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}
.mb-thr-key {
  display: inline-block;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--ink);
}
.mb-row,
.mb-axis {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 150px;
  gap: 10px;
  align-items: center;
  font-size: var(--cv-fs-s);
}
.mb-name {
  font-weight: 600;
}
.mb-track {
  position: relative;
  height: 14px;
  border-radius: 4px;
  background: var(--bl);
}
.mb-track i {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--grn) 70%, transparent);
}
.mb-row.near .mb-track i {
  background: var(--amb);
}
.mb-row.involved .mb-track i {
  background: var(--eos);
}
.mb-zero {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--mut);
  opacity: 0.6;
}
.mb-thr {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--ink);
}
.mb-val {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.mb-val b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.mb-st {
  font-size: var(--cv-fs-xs);
  color: var(--mut);
}
.mb-row.involved .mb-st {
  color: var(--eos);
  font-weight: 600;
}
.mb-row.near .mb-st {
  color: var(--amb);
}
.mb-ticks {
  position: relative;
  height: 14px;
  font-size: 11px;
  color: var(--mut);
}
.mb-ticks span {
  position: absolute;
  transform: translateX(-50%);
}
.ms-frame {
  position: relative;
}
.ms-frame.labelled {
  padding: 22px 26px;
}
.ms-side {
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  color: var(--mut);
  line-height: 1;
  white-space: nowrap;
}
.ms-side.top {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}
.ms-side.bottom {
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}
.ms-side.left {
  left: 6px;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg) translateY(50%);
  transform-origin: center;
}
.ms-side.right {
  right: 6px;
  top: 50%;
  transform: translate(50%, -50%) rotate(90deg) translateY(50%);
}
.ms-side.involved {
  color: var(--eos);
}
.ms-side.near {
  color: var(--amb);
}
.cv-hm .msvg .mseg {
  stroke: none;
}
.msvg .mseg.hot {
  fill: var(--eos);
  fill-opacity: 0.78;
}
.msvg .mseg.warm {
  fill: var(--amb);
  fill-opacity: 0.55;
}
.msvg .mseg.cool {
  fill: #2e7561;
  fill-opacity: 0.16;
}
.ms-keys {
  margin-top: 10px;
}
.sw-seg {
  width: 18px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}
.sw-seg.hot {
  background: var(--eos);
}
.sw-seg.warm {
  background: color-mix(in srgb, var(--amb) 70%, transparent);
}
.sw-seg.cool {
  background: color-mix(in srgb, var(--grn) 25%, transparent);
  box-shadow: inset 0 0 0 1px var(--ln);
}
.cv .mlab {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.cv .mlab div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--ln);
  font-size: var(--cv-fs-xs);
  color: var(--mut);
  text-align: left;
}
.cv .mlab div b {
  font-size: var(--cv-fs-s);
  color: var(--ink);
}
.cv .mlab div.inv,
.cv .mlab div.involved {
  background: var(--eosl);
  border-color: color-mix(in srgb, var(--eos) 40%, transparent);
  color: var(--eos);
  font-weight: 500;
}
.cv .mlab div.near {
  background: var(--ambl);
  color: var(--amb);
}
.cv-timer .tm-h {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--cv-fs-s);
  font-weight: 600;
}
.cv .cv-timer .big.timer {
  font: 500 56px/1.1 var(--font) !important;
  letter-spacing: -1.5px;
  margin: 8px 0 10px;
  font-variant-numeric: tabular-nums;
}
.tm-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bl);
  overflow: hidden;
}
.tm-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--grn);
}
.tm-bar i.amber {
  background: var(--amb);
}
.tm-bar i.red {
  background: var(--eos);
}
.tm-bar i.stopped {
  background: var(--mut);
}
.tm-sub {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: var(--cv-fs-s);
  color: var(--mut);
}
/* app.js's 1 s tick updates the timer's own class, not the card's: follow the timer so the stripe is never stale */
.cv-timer.red,
.cv-timer:has(> .big.timer.red) {
  box-shadow: inset 4px 0 0 var(--eos), var(--shadow);
}
.cv-timer.amber:not(:has(> .big.timer.red)),
.cv-timer:has(> .big.timer.amber) {
  box-shadow: inset 4px 0 0 var(--amb), var(--shadow);
}
.sugg-call {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--ln);
  margin-bottom: 12px;
}
.sugg-call b {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.sugg-call.tumor_at_margin {
  border-color: color-mix(in srgb, var(--eos) 45%, transparent);
  background: var(--eosl);
}
.sugg-call.tumor_at_margin b {
  color: var(--eos);
}
.sugg-call.defer {
  border-color: color-mix(in srgb, var(--amb) 45%, transparent);
  background: var(--ambl);
}
.sugg-call.defer b {
  color: var(--amb);
}
.sugg-call.clear b {
  color: var(--grn);
}
.rel-flag {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 4px !important;
  font-size: var(--cv-fs-s) !important;
  line-height: 1.5;
}
.rel-flag b {
  font-weight: 600;
}
.rel-flag .sub {
  color: inherit;
  opacity: 0.85;
}
.rel-ok {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--grnl);
  color: var(--grn);
  font-size: var(--cv-fs-s);
}
.rel-ok .ck-i {
  background: var(--grn);
  color: var(--sf);
}
.rel-ok > span:nth-child(2) {
  display: flex;
  flex-direction: column;
}
.rel-ok .sub {
  color: inherit;                   /* full colour: at 85% opacity the green note fell to 4.1:1 on its tint */
}
.rel-gauge {
  position: relative;
  display: block;
  grid-column: 1 / -1;
  height: 6px;
  margin-top: 4px;
  border-radius: 3px;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.rel-gauge i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: currentColor;
}
.rel-gauge b {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--ink);
}
.call-btns {
  margin-top: 14px !important;
}
.call-btns .btn {
  flex: 1 1 140px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
}
.cv-pick {
  flex-direction: column;
  gap: 8px !important;
  align-items: stretch;
}
.cv-pick .pick-t {
  font-size: var(--cv-fs-s);
  font-weight: 600;
}
.cv-pick label {
  display: flex !important;
  justify-content: flex-start;
  gap: 8px !important;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid var(--ln);
}
.cv-pick label .sub {
  margin-left: auto;
}
.cv-pick label.involved {
  border-color: color-mix(in srgb, var(--eos) 45%, transparent);
  background: var(--eosl);
}
.cv .verdict b {
  font-weight: 600;
}
@media (max-width: 760px) {
  .mg-top {
    grid-template-columns: 1fr;
  }
  .specimen {
    max-width: 260px;
    margin: 0 auto;
  }
  .mb-row,
  .mb-axis {
    grid-template-columns: 62px minmax(0, 1fr) 96px;
    gap: 8px;
  }
  .cv .mlab {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ms-frame.labelled {
    padding: 20px 22px;
  }
  .cv .cv-timer .big.timer {
    font-size: 46px !important;
  }
}
.mb-row,
.mb-axis {
  grid-template-columns: 66px minmax(0, 1fr) 76px;
}
.mg-top {
  grid-template-columns: 230px minmax(0, 1fr);
}
.cv-more {
  margin-top: 12px;
  border-top: 1px solid var(--ln);
  padding-top: 10px;
}
.cv-more summary {
  cursor: pointer;
  font-size: var(--cv-fs-s);
  font-weight: 600;
}
.cv-more[open] summary {
  margin-bottom: 6px;
}

/* ---- cells tab ------------------------------------------------------------------------------------------------------ */
.cells-warn {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--ambl);
  color: var(--amb);
  font-size: var(--cv-fs-s);
  line-height: 1.55;
  max-width: 96ch;
}
.cells-warn b {
  font-weight: 700;
}
.cs-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.cs-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--ln);
  background: var(--bg);
  min-width: 0;
}
.cs-k {
  font-size: var(--cv-fs-xs);
  color: var(--mut);
}
.cs-stat b {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.cells-ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cells-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--cv-fs-s);
  font-weight: 600;
}
.cells-legend {
  margin: 0 !important;
  gap: 6px 14px !important;
  font-size: var(--cv-fs-xs) !important;
}
.cells-legend span,
.cell-counts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cv .sw {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: none;
}
.cv-cells-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 16px !important;
}
/* three selected regions per case: three columns, no empty fourth (phones keep the single-column fill) */
@media (min-width: 761px) {
  .cv-cells-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
.cv-cell-fig {
  margin: 0;
  min-width: 0;
}
/* the region a finding pointed to: a steady marker (app.js flashes it once; a 'flash' class here replayed on every poll) */
.cv-cell-fig.is-target {
  outline: 2px solid var(--hema);
  outline-offset: 4px;
  border-radius: 6px;
}
.cv-cell-fig img,
.cv-cell-fig .crop {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  background-color: var(--bl);
}
/* the overlay PNGs carry 1 px outlines drawn at 512 px; shown at about half size they wash out on H&E. Raising
   saturation and contrast lifts the coloured outlines without regenerating the images. */
.cv-cell-fig img[data-testid='cells-overlay-img'] {
  filter: saturate(1.15) contrast(1.3);
}
.cv-cell-fig figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 6px;
  font-size: var(--cv-fs-s) !important;
}
.comp-bar {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 4px;
  overflow: hidden;
}
.comp-bar i {
  display: block;
  min-width: 3px;
}
.cell-counts {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: var(--cv-fs-xs);
}
.cell-counts li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--ln);
  color: var(--mut);
}
.cell-counts li:last-child {
  border-bottom: 0;
}
.cell-counts b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cf-h {
  margin-top: 22px !important;
}
.cf-intro {
  margin: 0 0 6px;
}
.cf-note {
  margin: 0 0 6px;
}
.cf-note .src {
  margin: 0 4px 0 0;
}
/* the shared percentile axis above the first group: same columns as a row, labels only */
.cf-row.cf-axis {
  padding: 2px 0 0;
  border-bottom: 0;
}
.cv-cf.cf-nouse .cf-row {
  grid-template-columns: minmax(0, 1.2fr) 110px minmax(160px, 2fr);
}
.cv .cv-cf {
  display: block;
}
.cf-group h3 {
  margin: 14px 0 4px;
}
.cf-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 110px minmax(160px, 1.4fr) minmax(0, 0.9fr);
  gap: 6px 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--ln);
  font-size: var(--cv-fs-s);
}
.cf-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cf-name b,
.cf-val b {
  font-weight: 600;
}
.cf-val b {
  font-variant-numeric: tabular-nums;
}
.cf-ref {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pct-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: var(--bl);
}
.pct-band {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background: color-mix(in srgb, var(--mut) 22%, transparent);
}
.pct-track b {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 18px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--ink);
}
.pct-track.hi b {
  background: var(--eos);
}
.pct-track.lo b {
  background: var(--hema);
}
.pct-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mut);
}
.pct-ticks span:nth-child(2) {
  margin-left: 4%;
}
.pct-ticks span:nth-child(4) {
  margin-right: 4%;
}
@media (max-width: 1100px) {
  .cs-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .cf-row,
  .cv-cf.cf-nouse .cf-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .cf-ref,
  .cf-use,
  .cf-axis .pct-ticks {
    grid-column: 1 / -1;
  }
  .cf-axis > span {
    display: none;
  }
  .cs-stat b {
    font-size: 19px;
  }
}
.pct-ticks {
  position: relative;
  display: block;
  height: 12px;
}
.pct-ticks span {
  position: absolute;
  transform: translateX(-50%);
  margin: 0 !important;
}
.pct-ticks span:first-child {
  transform: none;
}
.pct-ticks span:last-child {
  transform: translateX(-100%);
}
.cmp-pane figcaption {
  min-height: 64px;
}
/* phone overrides for rules defined after the first phone block (keep last) */
@media (max-width: 760px) {
  .mg-top {
    grid-template-columns: 1fr;
  }
  .mb-row,
  .mb-axis {
    grid-template-columns: 62px minmax(0, 1fr) 70px;
    gap: 8px;
  }
}
/* single-column order: the surgical timer and call come first; biopsy confidence comes before the long Why list */
@media (max-width: 1150px) {
  .cv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--cv-gap);
  }
  .cv-grid > .cv-main,
  .cv-grid > .cv-side {
    display: contents;
  }
  .cv-grid .card {
    margin-top: 0 !important;
  }
  .cv-grid > .cv-side > .note {
    order: 20;
  }
  .cv-surg .cv-timer {
    order: 1;
  }
  .cv-surg .cv-call {
    order: 2;
  }
  .cv-surg .cv-margins {
    order: 3;
  }
  .cv-surg [data-testid='how-sure'] {
    order: 4;
  }
  .cv-surg [data-testid='summary'] {
    order: 5;
  }
  .cv-surg [data-testid='agent-panel'] {
    order: 6;
  }
  .cv-surg [data-testid='case-events'] {
    order: 7;
  }
  .cv-biopsy .cv-image {
    order: 1;
  }
  .cv-biopsy [data-testid='summary'] {
    order: 2;
  }
  .cv-biopsy [data-testid='how-sure'] {
    order: 3;
  }
  .cv-biopsy .cv-why {
    order: 4;
  }
  .cv-biopsy [data-testid='compared'] {
    order: 5;
  }
  .cv-biopsy [data-testid='agent-panel'] {
    order: 6;
  }
  .cv-biopsy [data-testid='approval'] {
    order: 7;
  }
  .cv-biopsy [data-testid='case-events'] {
    order: 8;
  }
  .cv-biopsy [data-testid='interpretation'] {
    order: 9;
  }
}
.cv .btn.p,
.cv-confirm .btn.p {
  color: var(--sf);
}
.cv .btn.p:hover {
  color: var(--sf);
}
.wr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 2px;
}
.cv .why-row .wr-badges .cc,
.cv .why-row .wr-badges .src {
  margin: 0;
}
.spot {
  font-size: 11px;
  color: var(--mut);
}
.spot::before {
  content: 'AI';
  display: inline-block;
  margin-right: 4px;
  padding: 0 4px;
  border-radius: 3px;
  border: 1px solid var(--ln);
  font-size: 11px;
  font-weight: 700;
  line-height: 13px;
  vertical-align: 1px;
}
.spot.low {
  color: var(--amb);
  font-weight: 600;
}
.spot.low::before {
  border-color: var(--amb);
}
.src.warn {
  border-color: var(--amb);
  color: var(--amb);
}
.wr-level.none span {
  color: var(--mut);
  font-size: 13px;
}
.cv-events li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0 !important;
  font-size: var(--cv-fs-s);
  color: var(--ink);
}
.cv-events time {
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.cv .reasons {
  margin-top: 8px;
}
.cv .reason {
  font-size: 11px;
  padding: 2px 7px;
}
/* level column: replace the pip glyph with a small SD track */
.wr-level.lo b::before,
.wr-level.mid b::before,
.wr-level.hi b::before {
  display: none;
}
.sd-track {
  position: relative;
  display: block;
  width: 100%;
  max-width: 132px;
  height: 6px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--bl);
}
.sd-band {
  position: absolute;
  left: 41.67%;
  width: 16.67%;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--mut) 30%, transparent);
}
.sd-track.pct .sd-band {
  left: 10%;
  width: 80%;
  background: color-mix(in srgb, var(--mut) 18%, transparent);
}
.sd-dot {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--sf);
}
.wr-level.hi .sd-dot {
  background: var(--ink);
}
/* keep tissue visible under the multiply-blended overlay; the per-region values carry the numbers */
.cv-hm .hm-svg[data-kind] .hm-tile,
.vw-canvas .hm-svg[data-kind] .hm-tile {
  opacity: 0.72;
}
@media (max-width: 760px) {
  .vw-foot .lg-note,
  .vw-foot .lg-keys {
    display: none;
  }
  .vw-foot {
    padding: 8px 12px 10px;
  }
}

/* ---- polish: order rows, Why headline, look-alike table, compare panes, motion ------------------------------------- */
.ord-rule {
  display: block;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* text floor: nothing in the case view renders below 11px (workspace.css draws .src at 8-9px) */
.cv .src,
.cv .why-row .v,
.cv .activity-card summary span {
  font-size: 11px;
}
.ws-lists p.ws-skip {
  display: block;
  padding-left: 136px;
  font-size: var(--cv-fs-xs);
  color: var(--mut);
}
@media (max-width: 760px) {
  .ws-lists p.ws-skip {
    padding-left: 0;
  }
}
.ct-table .ct-rg {
  white-space: nowrap;
}
/* both compare panes share one row grid, so the two images sit at the same height whatever their captions hold */
.cmp-panes {
  grid-template-rows: minmax(0, 1fr) auto;
}
.cmp-pane {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.cmp-pane figcaption {
  min-height: 0;
}
.cmp-pane figcaption .cmp-n {
  color: #1b1a2e;
}
@media (max-width: 760px) {
  .cmp-panes {
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  }
  .hs-sugg {
    margin-left: 0;
  }
}
/* "Skip to the decision": out of sight until the keyboard reaches it, then shown over the panel (no layout move) */
.cv-evidence-panel {
  position: relative;
}
.cv-skip {
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 5;
  padding: 8px 14px;
  border: 1px solid var(--hema);
  border-radius: 999px;
  background: var(--sf);
  color: var(--hema);
  font: 600 13px/1.2 var(--font);
  box-shadow: 0 6px 18px #0002;
}
.cv-skip:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* case title: a long id (TCGA-BH-A0BJ_ffpe_tumor_01) breaks anywhere rather than at its first hyphen */
.cv-title-id {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .cv .cv-id h2[data-testid='case-title'] {
    font-size: 20px !important;
    letter-spacing: -0.4px;
  }
}
/* tab labels: the long form needs room; phones show the short form */
.cv .tabs .tab-short {
  display: none;
}
@media (max-width: 480px) {
  .cv .tabs .tab-long {
    display: none;
  }
  .cv .tabs .tab-short {
    display: inline;
  }
}
/* motion: short ease-out entrances only for things that just appeared (case_ui.js adds .cv-enter once) */
dialog.cv-viewer[open],
dialog.cv-compare[open] {
  animation: cv-dialog-in 0.18s ease-out;
}
dialog.cv-viewer[open]::backdrop,
dialog.cv-compare[open]::backdrop {
  animation: cv-fade-in 0.18s ease-out;
}
@keyframes cv-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}
.cv .cv-enter {
  animation: cv-reveal 0.2s ease-out;
}
@keyframes cv-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.cv .hm-svg.cv-enter {
  animation: cv-fade-in 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .cv-tip:not([hidden]),
  dialog.cv-viewer[open],
  dialog.cv-compare[open],
  dialog.cv-viewer[open]::backdrop,
  dialog.cv-compare[open]::backdrop,
  .cv .cv-enter {
    animation: none;
  }
}

/* ---- phones and touch screens (keep last) -------------------------------------------------------------------------- */
/* compare dialog on a phone: the panes shared what the bar and strip left (62 px on an iPhone 15, 0-1 px on an iPhone SE
   or in landscape). Each image now keeps the case's 4:3 shape, the dialog scrolls, and the reference strip stays at the
   bottom. Pan and pinch stay on the images (.vw-stage touch-action: none); the bar, captions and strip scroll the dialog. */
@media (max-width: 760px) {
  dialog.cv-compare[open] {
    overflow-y: auto;
  }
  dialog.cv-compare .cmp-panes {
    flex: none;
    grid-template-rows: auto auto auto auto;
  }
  dialog.cv-compare .vw-stage {
    flex: none;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  dialog.cv-compare .vw-sub,
  dialog.cv-compare .rt-lbl {
    display: none;
  }
  dialog.cv-compare .ref-thumb.mini {
    width: 72px;
  }
  dialog.cv-compare .cmp-strip {
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex: none; /* a scroll container: as a shrinkable flex item it collapsed to its padding */
    padding: 8px 12px 10px;
    background: var(--vw-bg);
  }
  /* look-alike table: "strongest in region N" wraps inside its column instead of running into the next one, and the
     difference column takes the width of its label ("Difference (SD)" ran past the card edge) */
  .ct-table tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
    column-gap: 12px;
  }
  .ct-table .ct-rg {
    margin-top: 4px;
    line-height: 1.35;
    white-space: normal;
  }
}
/* phone landscape (and any short window): both images side by side under the bar, as large as the height allows;
   captions and the strip scroll below them */
@media (max-height: 500px) {
  dialog.cv-compare[open] {
    overflow-y: auto;
  }
  dialog.cv-compare .vw-bar {
    padding: 6px 12px;
  }
  dialog.cv-compare .vw-sub,
  dialog.cv-compare .rt-lbl {
    display: none;
  }
  dialog.cv-compare .cmp-panes {
    flex: none;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  dialog.cv-compare .vw-stage {
    flex: none;
    aspect-ratio: auto;
    height: min(37.5vw, calc(100vh - 64px));
    height: min(37.5vw, calc(100dvh - 64px));
  }
  dialog.cv-compare .cmp-strip {
    position: static;
    flex: none;
    padding: 8px 12px 10px;
  }
  dialog.cv-compare .ref-thumb.mini {
    width: 72px;
  }
  /* full-screen viewer: the layer name and a one-line legend leave the image most of the height */
  dialog.cv-viewer .vw-bar {
    padding: 6px 12px;
  }
  dialog.cv-viewer .vw-sub {
    display: none;
  }
  dialog.cv-viewer .vw-foot {
    padding: 4px 12px 6px;
  }
  dialog.cv-viewer .vw-foot .lg-note,
  dialog.cv-viewer .vw-foot .lg-keys {
    display: none;
  }
  dialog.cv-viewer .vw-foot .lg-scale {
    grid-template-columns: auto minmax(120px, 1fr);
  }
  dialog.cv-viewer .vw-foot .lg-title {
    grid-row: 1 / span 2;
  }
}
/* touch: controls reach 44 px. Inline chips keep their look and their line: a transparent border (the background is
   clipped to the padding) inside a matching negative margin widens only what a finger can hit. */
@media (pointer: coarse) {
  .vw-tools .btn {
    min-width: 44px;
    min-height: 44px;
  }
  .vw-tools label {
    min-height: 44px;
  }
  .hm-expand {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .cv .fref {
    position: relative; /* painted above the neighbouring text, so its whole hit border takes the tap */
    border: solid transparent;
    border-width: 12px 10px;
    border-radius: 15px / 17px;
    margin: -12px -10px -12px -5px;
    background-clip: padding-box;
    outline-offset: -10px;
  }
  .ct-table button.ct-rg {
    position: relative; /* above the value it overlaps (painted after the inline text) */
    padding: 14px 0;
    margin: -12px 0 -14px;
  }
}
@media (pointer: coarse) and (max-width: 760px) {
  .ct-table button.ct-rg {
    margin-top: -10px; /* keeps the 4px gap under the value */
  }
}
/* touch screens show no title tooltips: what a row's tooltip says is printed in the row once it is tapped (why.js) or
   in the margin bars (heatmap.js) */
.wr-tip,
.mb-p {
  display: none;
}
@media (hover: none) {
  .why-row.on .wr-tip {
    display: block;
    margin-top: 2px;
    color: var(--ink);
  }
  .mb-p {
    display: block;
    font-size: var(--cv-fs-xs);
    color: var(--mut);
    font-variant-numeric: tabular-nums;
  }
}
@media (hover: hover) {
  .wr-say.tip-only {
    display: none;
  }
}

/* Oncology inbox decision support (js/views/oncologist.js): two columns, the read (suggested category over its
   confidence set) beside the associated features, and one column on phones. Overrides flow.css's three-column grid. */
.rep-grid.rep-dual {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.rep-grid.rep-dual > .rep-cell {
  grid-column: auto;
  border-bottom: 0;
}
.rep-grid.rep-dual > .rep-cell:first-child {
  border-right: 1px solid var(--ln2);
}
.rep-grid.rep-dual > .rep-cell:last-child {
  border-right: 0;
}
.rep-read {
  display: grid;
  gap: 14px;
  align-content: start;
}
.rep-read > section {
  min-width: 0;
}
@media (max-width: 560px) {
  .rep-grid.rep-dual {
    grid-template-columns: minmax(0, 1fr);
  }
  .rep-grid.rep-dual > .rep-cell:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--ln2);
  }
}