/* PrismWAM — Robustness (#robust): training and evaluating with corrupted depth (paper RQ2 + depth-corruption appendix).
   Every selector is scoped to #robust. Selecting a level only changes opacity / colour / transform, so nothing reflows.
   Depth corruption is a depth-side story: its meters use the cool (depth) colour. Every chart series is PrismWAM, so all
   three stay in the lavender family (grey means "other methods" elsewhere on the page); the random scene is dashed. */

#robust {
  --rb-mean: var(--accent);
  --rb-clean: var(--accent-light);
  --rb-rand: var(--accent-light);
  /* the paper's fixed 0–1500 mm depth colour map (viridis), invalid depth in black */
  --rb-viridis: linear-gradient(90deg, #440154 0%, #482475 10%, #414487 20%, #355f8d 30%, #2a788e 40%, #21918c 50%, #22a884 60%, #44bf70 70%, #7ad151 80%, #bddf26 90%, #fde725 100%);
}

/* ───────── level control ───────── */
#robust .rb-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 12px; }
#robust .rb-mini { display: none; }

/* ───────── two cards: observation + recipe | success ─────────
   The left card holds two columns (the depth image with its scale, and the recipe), so it is the wider one. It is capped
   at 708px, the width at which the image column and the recipe end level; the right card takes the rest (372px floor, so
   its legend stays on one line). Both cards share one height, set by the left card, and the chart fills what is left.
   The 24px gap matches the Results cards above. */
#robust .rb-grid {
  display: grid; grid-template-columns: minmax(0, 708px) minmax(372px, 1fr); gap: 24px; align-items: stretch;
}
#robust .card { display: flex; flex-direction: column; padding: clamp(18px, 2vw, 24px); }
#robust .rb-head { align-items: center; margin-bottom: 14px; }

#robust .rb-obs-body {
  flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(212px, 240px); gap: 0 22px; align-items: start;
}
#robust .rb-view { min-width: 0; }

/* colour scale under the image: 0 [ramp] 1500 mm  ■ missing */
#robust .rb-scale { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; line-height: 1; color: var(--ink-2); white-space: nowrap; }
#robust .rb-tk { font-variant-numeric: tabular-nums; }
#robust .rb-bar { display: block; width: 96px; height: 8px; border-radius: 2px; background: var(--rb-viridis); }
#robust .rb-miss { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
#robust .rb-miss i { display: block; width: 10px; height: 10px; border-radius: 2px; background: #000; }

/* depth panel: the four observations stacked; the chosen one fades in over the one it replaces.
   The rounded corners must survive the crossfade: an opacity transition promotes the image to its own compositing
   layer, and some engines then drop a parent's overflow:hidden + border-radius clip for a frame or for good (sharp
   corners). So the frame clips with clip-path as well, and every layer carries the same radius itself. */
#robust .rb-fig {
  --rb-r: var(--r-md);
  position: relative; aspect-ratio: 720 / 513; border-radius: var(--rb-r); overflow: hidden;
  -webkit-clip-path: inset(0 round var(--rb-r)); clip-path: inset(0 round var(--rb-r));
  background: var(--mist-2); isolation: isolate;
}
#robust .rb-fig::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--rb-r); pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(20, 16, 40, .08);
}
#robust .rb-img {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--rb-r);
  opacity: 0; transition: opacity .45s ease;
}
#robust .rb-img.is-prev { z-index: 1; opacity: 1; transition: none; }
#robust .rb-img.is-on { z-index: 2; opacity: 1; }

/* corruption recipe: three types in a quiet list beside the image, each with its parameters for the chosen level */
#robust .rb-recipe { display: flex; flex-direction: column; min-width: 0; }
#robust .rb-type { min-width: 0; padding: 11px 0; border-top: 1px solid var(--line); }
#robust .rb-type:first-child { padding-top: 0; border-top: 0; }
#robust .rb-type:last-child { padding-bottom: 0; }
#robust .rb-tn { font-size: 13.5px; font-weight: 650; line-height: 1.3; letter-spacing: -0.006em; color: var(--ink); }
#robust .rb-td { margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--ink-2); text-wrap: pretty; }
#robust .rb-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 8px; }
#robust .rb-row {
  position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding-bottom: 7px; font-size: 12.5px; line-height: 1.3;
}
#robust .rb-row dt { min-width: 0; color: var(--ink-2); }   /* wraps rather than truncating if a column ever gets that narrow */
#robust .rb-row dd { flex: none; font-weight: 650; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .3s; }
/* meter: share of that parameter's largest setting in the table */
#robust .rb-row::before, #robust .rb-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px;
}
#robust .rb-row::before { background: rgba(53, 167, 255, .14); }
#robust .rb-row::after {
  background: var(--cool); transform-origin: 0 50%; transform: scaleX(var(--f, 0));
  transition: transform .55s var(--ease);
}
#robust .rb-row.is-off dd { color: var(--ink-3); }

/* ───────── success card ───────── */
#robust .rb-perf-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#robust .rb-sum { display: flex; align-items: center; gap: 14px; }
#robust .rb-sum-v {
  display: flex; align-items: baseline; gap: 2px; flex: none;
  font-size: clamp(34px, 3vw, 42px); line-height: 1; font-weight: 620; letter-spacing: -0.035em; color: var(--ink); white-space: nowrap;
}
#robust .rb-sum-n { font-variant-numeric: tabular-nums; }
#robust .rb-sum-u { font-size: .46em; font-weight: 550; letter-spacing: 0; color: var(--ink-2); }
#robust .rb-sum-t { min-width: 0; }
#robust .rb-sum-l { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap; }
#robust .rb-sum-l::before { content: ""; flex: none; width: 14px; height: 3px; border-radius: 2px; background: var(--rb-mean); }
#robust .rb-delta {
  display: inline-flex; align-items: center; height: 22px; margin-top: 4px; padding: 0 8px; border-radius: var(--r-xs);
  background: var(--mist-2); font-size: 12px; font-weight: 550; color: var(--ink-2); white-space: nowrap;
}

#robust .rb-key { margin-top: 14px; gap: 4px 16px; }
#robust .rb-kl { display: block; width: 16px; height: 2px; border-radius: 2px; }
#robust .rb-k-mean { height: 3px; background: var(--rb-mean); }
#robust .rb-k-clean { background: var(--rb-clean); }
#robust .rb-k-rand { background: repeating-linear-gradient(90deg, var(--rb-rand) 0 4px, transparent 4px 7px); }

#robust .rb-chart { position: relative; flex: 1 1 auto; min-height: 200px; margin-top: 6px; }
#robust .rb-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* chart marks (drawn by robust.js) */
#robust .rb-gl { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
#robust .rb-yt { font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
#robust .rb-band { fill: var(--accent-soft); transition: transform .45s var(--ease); }
#robust .rb-ghost { fill: var(--mist); opacity: 0; transition: opacity .2s; }
#robust .rb-ghost.is-on { opacity: 1; }
#robust .rb-ln { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#robust .rb-ln.s-mean { stroke: var(--rb-mean); stroke-width: 2.75; }
#robust .rb-ln.s-clean { stroke: var(--rb-clean); }
#robust .rb-ln.s-rand { stroke: var(--rb-rand); stroke-dasharray: 4 3; stroke-linecap: butt; }
#robust .rb-dot { fill: var(--paper); stroke-width: 1.75; transition: fill .3s; }
#robust .rb-dot.s-mean { stroke: var(--rb-mean); stroke-width: 2.25; }
#robust .rb-dot.s-clean { stroke: var(--rb-clean); }
#robust .rb-dot.s-rand { stroke: var(--rb-rand); }
#robust .rb-col.is-sel .rb-dot.s-mean { fill: var(--rb-mean); }
#robust .rb-col.is-sel .rb-dot.s-clean { fill: var(--rb-clean); }
#robust .rb-col.is-sel .rb-dot.s-rand { fill: var(--rb-rand); }
#robust .rb-val {
  font-size: 11.5px; font-weight: 500; fill: var(--ink-3); font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round;
  transition: fill .3s;
}
#robust .rb-col.is-sel .rb-val { font-weight: 650; fill: var(--ink); stroke: var(--accent-soft); }
#robust .rb-col.is-sel .rb-val.s-mean { fill: var(--accent-ink); }
#robust .rb-xt { font-size: 12.5px; font-weight: 550; fill: var(--ink-2); transition: fill .3s; }
#robust .rb-col.is-sel .rb-xt { fill: var(--ink); }
#robust .rb-hit { fill: transparent; cursor: pointer; }

#robust .rb-note { margin-top: 16px; }
/* the panel is focusable (WAI-ARIA tabs: it has no focusable content of its own); keep its ring clear of the cards */
#robust .rb-grid:focus-visible { outline-offset: 6px; border-radius: var(--r-xl); }

/* ───────── narrower ───────── */
/* one column: the control (and the average it selects) stays under the nav while the two cards scroll past */
@media (max-width: 1099.98px) {
  #robust .rb-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #robust .rb-ctl {
    position: sticky; top: var(--nav-h); z-index: 4; margin-bottom: 8px; padding: 8px 0;
    background: var(--paper);
  }
  #robust .rb-mini {
    display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap;
    font-size: 13px; line-height: 1.3; color: var(--ink-2);
  }
  #robust .rb-mini-n { font-weight: 650; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
  #robust .rb-mini-d { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
  #robust .rb-mini-d:empty { display: none; }
  /* full-width cards: the image keeps a modest size beside the (tightened) recipe and ends level with it;
     the chart sits beside its summary */
  #robust .rb-obs-body { grid-template-columns: minmax(0, 368px) minmax(0, 1fr); gap: 0 28px; }
  #robust .rb-perf-body { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 0 28px; align-items: start; }
  #robust .rb-sum { flex-direction: column; align-items: flex-start; gap: 10px; }
  #robust .rb-key { flex-direction: column; margin-top: 12px; }
  #robust .rb-chart { flex: none; height: 184px; min-height: 0; margin-top: 0; }
}
/* from 900px the nav is a floating pill (top --nav-top), so the sticky control sits below the pill's bottom edge */
@media (min-width: 900px) and (max-width: 1099.98px) {
  #robust .rb-ctl { top: calc(var(--nav-top) + var(--nav-h)); }
}
/* a tighter recipe where the image beside it is shorter: the full-width tablet card, and the narrowest two-card widths
   (1100–1135px), where the capped left card shrinks and the image would otherwise end well above the recipe */
@media (min-width: 720.02px) and (max-width: 1134.98px) {
  #robust .rb-type { padding: 8px 0; }
  #robust .rb-rows { gap: 4px; margin-top: 6px; }
}
@media (max-width: 720px) {
  /* image over recipe; each recipe type reads name + note | parameters */
  #robust .rb-obs-body { grid-template-columns: minmax(0, 1fr); }
  #robust .rb-recipe { margin-top: 16px; }
  #robust .rb-type { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 16px; align-items: start; }
  #robust .rb-type:first-child { padding-top: 2px; }
  #robust .rb-tn, #robust .rb-td { grid-column: 1; }
  #robust .rb-rows { grid-column: 2; grid-row: 1 / span 2; margin-top: 1px; }
  #robust .rb-perf-body { display: flex; flex-direction: column; align-items: stretch; }
  #robust .rb-sum { flex-direction: row; align-items: center; gap: 14px; }
  #robust .rb-key { flex-direction: row; margin-top: 14px; }
  #robust .rb-chart { height: 236px; margin-top: 6px; }
}
@media (max-width: 640px) {
  #robust .rb-ctl .seg { width: 100%; }
  #robust .rb-ctl .seg button { flex: 1 1 auto; padding: 0 8px; }
}
@media (max-width: 520px) {
  /* the number, then its label and the change vs clean depth, so the longest change text always fits */
  #robust .rb-sum { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 420px) {
  #robust .rb-key { gap: 4px 12px; }
  #robust .rb-type { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0 12px; }
}