/* 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);
  }
}

/* ---- 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: 10px;
  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: 290px;
}
.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);
}
.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,
.vw-canvas .rg-n {
  opacity: 1;
}
.vw-canvas .rg-n {
  transform: scale(var(--inv-s, 1));
  transform-origin: 0 0;
  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));
}
.lg-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  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;
}
.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: 10.5px;
  color: var(--mut);
}
.why-key .axis {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: 10.5px;
}
.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.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: 10px;
  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: 10px;
  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: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.pc-out {
  color: var(--ln);
  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-say {
  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-say b {
  font-weight: 600;
}
.cv-coverage {
  font-size: var(--cv-fs-s);
  line-height: 1.55;
}
.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: 10.5px;
  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;
}

/* ---- 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;
  background: #14161f;
  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;
}
.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;
  user-select: none;
}
.vw-stage.grabbing {
  cursor: grabbing;
}
.vw-stage:focus-visible {
  outline: 2px solid #b9a9e2;
  outline-offset: -4px;
}
.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: #14161f;
}
.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-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;
}

/* ---- 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;
  }
  .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: 10.5px;
  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: 10.5px;
}
.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;
  }
}

/* ---- surgical (simulated frozen section) -------------------------------------------------------------------------- */
.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: 10px;
  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: 10px;
  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;
}
.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);
}
.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;
}
.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: 9.5px;
  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 {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .cf-ref,
  .cf-use {
    grid-column: 1 / -1;
  }
  .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 .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: 10.5px;
  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: 9px;
  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: 10.5px;
  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;
  }
}