/* dexa.css — the DEXA Explorer (js/dexa_view.js), at the top of Progress ›
 * Body › DEXA. Every class is prefixed dexa-. Tokens only: greys and the
 * person's accent (the canvas reads the same tokens for its colours); nothing
 * here is past a limit, so nothing here is red. Text never under 13 px. The
 * wide layout answers to its container, never to the viewport.
 *
 * The same product as The model (css/model.css): an unboxed hero with a
 * hairline strip of figures, one segmented control, sections with plain
 * heads and hairline rows. The one framed object is the stage, a tile that
 * holds the scan, its split and its key (REVAMP-DESIGN §4.6: no cards in
 * cards; rows and sections have no box).
 */

.dexa-x-stack { display: grid; gap: var(--s-6); min-width: 0; }

.dexa-x {
  container-type: inline-size;
  min-width: 0;
}

.dexa-x-grid { display: grid; gap: var(--s-6); min-width: 0; }
.dexa-x-main { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.dexa-x-side { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }

/* Wide: the head across the top, the scan beside its numbers — only once
 * both columns have room for their own controls (the split's three options
 * with its label, the four side tabs); a narrower pane reads as the phone. */
@container (min-width: 700px) {
  .dexa-x-grid {
    grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr);
    gap: var(--s-6) var(--s-8);
  }
  .dexa-x-grid > .dexa-x-head { grid-column: 1 / -1; }
}

/* ---- the head: the hero and the layer control ---- */

.dexa-x-head { display: grid; gap: var(--s-4); min-width: 0; }
.dexa-x-head:empty { display: none; }
.dexa-x-hero { display: grid; gap: 6px; min-width: 0; }
.dexa-x-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.dexa-x-hero-top > :last-child:not(:first-child) { margin-top: 10px; flex: none; }
/* The badge, and under it the one way into Body in 3D (js/dexa3d_view.js). */
.dexa-x-hero-corner { display: grid; justify-items: end; gap: var(--s-2); }
.dexa-x-hero-main { margin: 0; min-width: 0; }
.dexa-x-hero-v {
  font: var(--t-display);
  font-stretch: 85%;
  letter-spacing: -.01em;
  color: var(--ink);
}
.dexa-x-hero-u {
  font: 450 var(--t-row-size)/1.2 var(--font);
  color: var(--ink-2);
  white-space: nowrap;
}
.dexa-x-hero-none { margin: 0; font: var(--t-head); color: var(--ink); padding-top: 6px; }
.dexa-x-hero-sub { margin: 0; font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
.dexa-x-hero .dexa-x-kpis { margin-top: 10px; }

/* A hairline strip of two to four figures (the model's KPI grid, one row). */
.dexa-x-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.dexa-x-kpis.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dexa-x-kpis.is-1 { grid-template-columns: minmax(0, 1fr); }
.dexa-x-kpi {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
}
.dexa-x-kpi + .dexa-x-kpi { padding-left: var(--s-3); border-left: 1px solid var(--line); }
.dexa-x-kpi-k { font: var(--t-cap); color: var(--ink-2); }
.dexa-x-kpi-v {
  font: 600 22px/1.1 var(--font);
  font-stretch: 92%;
  color: var(--ink);
  white-space: nowrap;
}

/* A number and its unit: the unit at the caption size, in ink-2. */
.dexa-x-fig { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dexa-x-unit {
  font: 450 var(--t-cap-size)/1 var(--font);
  font-stretch: 100%;
  color: var(--ink-2);
}

.dexa-x-controls { display: grid; gap: var(--s-2); min-width: 0; }
.dexa-x-controls .segmented {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.dexa-x-controls .segmented::-webkit-scrollbar { display: none; }
.dexa-x-controls button { flex: 1 0 auto; padding: 0 12px; }
.dexa-x-actions { display: flex; gap: var(--s-2); }

/* ---- the stage: one framed canvas ---- */

.dexa-x-stage {
  container-type: inline-size;
  display: grid;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-3);
  border-radius: var(--r-tile);
  background: var(--surface);
  box-shadow: var(--lift);
}

/* The split, compact, in the stage's top corner. */
.dexa-x-compare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-width: 0;
}
.dexa-x-compare-label { font: var(--t-cap); color: var(--ink-2); white-space: nowrap; }
.dexa-x-compare .segmented { flex: none; padding: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dexa-x-compare button {
  flex: none;
  position: relative;
  min-height: 32px;
  padding: 0 12px;
  font-size: var(--t-cap-size);
}
/* 32 tall, 44 to the finger. */
.dexa-x-compare button::before { content: ""; position: absolute; inset: -6px 0; }
@container (max-width: 300px) {
  .dexa-x-compare-label { display: none; }
  .dexa-x-compare { justify-content: flex-end; }
}

.dexa-x-view {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 200px;
  min-width: 0;
  touch-action: pan-y;
}
.dexa-x-canvas { display: block; max-width: 100%; cursor: pointer; }
.dexa-x-status { margin: var(--s-6) 0; font: var(--t-sub); color: var(--ink-2); }

/* The canvas and its split handle share one box, so the handle's left % is
 * the split's own fraction of the scan. A hairline the body shows through,
 * and a small pill in a 32 px lane above the scan, so the grip never sits on
 * the body; the whole 44 px column is the hit target. */
.dexa-x-frame { position: relative; line-height: 0; padding-top: 32px; }
.dexa-x-frame.is-solo { padding-top: var(--s-2); }
.dexa-x-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--tap);
  margin-left: calc(var(--tap) / -2);
  cursor: ew-resize;
  touch-action: none;
  display: flex;
  justify-content: center;
}
.dexa-x-handle::before {
  content: "";
  width: 1px;
  height: calc(100% - 26px);
  margin-top: 26px;
  background: var(--ink);
  opacity: 0.5;
}
.dexa-x-grip {
  position: absolute;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 24px;
  border-radius: 999px;
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow: var(--lift);
}
.dexa-x-grip-mark { width: 18px; height: 11px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dexa-x-handle:focus-visible { outline: none; }
.dexa-x-handle:focus-visible .dexa-x-grip { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.dexa-x-handle[hidden], .dexa-x-tag[hidden] { display: none; }

/* The halves' names ride the grip's lane, at the stage's two edges: the
 * app's 24 px tags. A projection or a model is dashed (§5 "Incomplete"). */
.dexa-x-tag {
  position: absolute;
  top: 2px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  max-width: calc(50% - 26px);
  padding: 0 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: 500 var(--t-cap-size)/1 var(--font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dexa-x-tag-l { left: 0; }
.dexa-x-tag-r { right: 0; }
.dexa-x-tag-r.is-proj { background: transparent; border: 1px dashed var(--ink-3); }
/* A narrow stage (a 320 phone): the names take a lane of their own above
 * the grip's, so neither is cut short. */
@container (max-width: 300px) {
  .dexa-x-tag { max-width: calc(62% - 4px); }
  .dexa-x-frame { padding-top: 62px; }
  .dexa-x-grip { top: 32px; }
  .dexa-x-handle::before { height: calc(100% - 56px); margin-top: 56px; }
}

.dexa-x-caption { margin: 0; font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; padding: 0 var(--s-1); }

/* ---- the illustration (no images yet) ---- */

.dexa-x-view-sil { padding: var(--s-2) 0; }
.dexa-sil { width: min(100%, 240px); height: auto; display: block; }
.dexa-sil-head { fill: var(--surface-2); stroke: var(--edge); stroke-width: 1.2; }
.dexa-sil-part {
  fill: var(--accent-mark);
  fill-opacity: 0.14;
  stroke: var(--edge);
  stroke-width: 1.2;
  cursor: pointer;
}
.dexa-sil-band {
  fill: var(--ink-3);
  fill-opacity: 0.08;
  stroke: var(--ink-2);
  stroke-width: 0.9;
  stroke-dasharray: 3 2.5;
  cursor: pointer;
}
.dexa-sil-part.is-picked { stroke: var(--accent-ink); stroke-width: 2.2; }
.dexa-sil-band.is-picked { stroke: var(--accent-ink); stroke-width: 1.8; fill: var(--accent-mark); fill-opacity: 0.22; }
.dexa-sil-part.is-hit { fill: var(--accent-mark); fill-opacity: 0.5; }
.dexa-sil-part.is-miss { fill: var(--ink-3); fill-opacity: 0.25; }
.dexa-sil-vat-hi { stop-color: var(--tissue-fat); stop-opacity: 1; }
.dexa-sil-vat-mid { stop-color: var(--tissue-fat); stop-opacity: 0.55; }
.dexa-sil-vat-lo { stop-color: var(--tissue-fat); stop-opacity: 0; }
.dexa-sil-mark { fill: var(--accent-mark); stroke: var(--surface); stroke-width: 2; }

/* ---- the key, along the stage's foot ---- */

.dexa-x-legend-host:empty { display: none; }
.dexa-x-legend-host { border-top: 1px solid var(--line); padding: var(--s-3) var(--s-1) 0; }
.dexa-x-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); }
.dexa-x-key { display: inline-flex; align-items: center; gap: 6px; font: var(--t-cap); color: var(--ink-2); white-space: nowrap; }
.dexa-x-swatch { width: 12px; height: 12px; flex: none; border-radius: 4px; }
.dexa-x-sw-fat { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-mark) 35%, var(--surface)), var(--accent-mark)); }
.dexa-x-sw-lean { background: color-mix(in srgb, var(--ink-2) 55%, var(--surface)); }
.dexa-x-sw-bone { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dexa-x-sw-less { background: var(--accent-mark); }
.dexa-x-sw-more {
  background: repeating-linear-gradient(45deg, var(--ink-2) 0 2px, var(--surface) 2px 5px);
  box-shadow: inset 0 0 0 1px var(--ink-3);
}
.dexa-x-sw-same { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--edge); }
/* "Outline now": the dashed line the canvas draws, as a line. */
.dexa-x-sw-ghost { width: 16px; height: 0; border-radius: 0; border-top: 1.5px dashed var(--ink); }

/* ---- the side column: regions, left and right, the next scan ---- */

.dexa-x-sidetabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dexa-x-sidetabs::-webkit-scrollbar { display: none; }
.dexa-x-sidetabs button { flex: 1 0 auto; padding: 0 12px; }
.dexa-x-region { display: grid; gap: var(--s-4); min-width: 0; }

/* The regions: one line of chips that scrolls sideways, fading at its edge,
 * never a wall. The app's 40 px outlined chip; the picked one takes the
 * accent wash and an accent-ink edge. */
.dexa-x-chips {
  position: relative;
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--s-6);
  scrollbar-width: none;
  padding: 2px 2px 2px 0;
  margin-right: calc(-1 * var(--s-1));
  -webkit-mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
}
.dexa-x-chips::-webkit-scrollbar { display: none; }
.dexa-x-chips::after { content: ""; flex: 0 0 20px; }
.dexa-x-chip {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--ink);
  font: 500 var(--t-body-size)/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .14s var(--ease), border-color .14s var(--ease);
}
.dexa-x-chip::before { content: ""; position: absolute; inset: -2px 0; }
.dexa-x-chip[aria-pressed="true"] { border-color: var(--accent-ink); background: var(--accent-wash-bg); }
.dexa-x-chip:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* A panel is a section, not a box: a plain head, a strip of figures,
 * hairline rows, one reading, a note. */
.dexa-x-panel { display: grid; gap: var(--s-3); min-width: 0; align-content: start; }
.dexa-x-panel-title { margin: 0; font: var(--t-head); letter-spacing: -.01em; color: var(--ink); }
.dexa-x-panel-title:not(:first-child) { margin-top: var(--s-3); }
.dexa-x-dl { display: grid; margin: 0; border-top: 1px solid var(--line); }
.dexa-x-kpis + .dexa-x-dl { border-top: 0; }
.dexa-x-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  min-height: 44px;
  padding: 10px 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  font: var(--t-body);
}
.dexa-x-row dt { color: var(--ink-2); min-width: 0; }
.dexa-x-row dd { margin: 0; color: var(--ink); font-weight: 560; text-align: right; }
.dexa-x-reading { margin: 0; font: var(--t-body); color: var(--ink); text-wrap: pretty; }
.dexa-x-note { margin: 0; font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; }

/* Left and right: each limb a block of two bars, hairline between. */
.dexa-x-limb { display: grid; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.dexa-x-limb:last-of-type { border-bottom: 1px solid var(--line); }
.dexa-x-limb-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.dexa-x-limb-name { font: var(--t-row); color: var(--ink); }
.dexa-x-limb-gap { font: var(--t-sub); color: var(--ink-2); white-space: nowrap; }
.dexa-x-bar-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 52px; align-items: center; gap: var(--s-3); }
.dexa-x-bar-label { font: var(--t-cap); color: var(--ink-2); }
.dexa-x-bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dexa-x-bar { display: block; height: 100%; border-radius: 999px; background: var(--ink-3); }
.dexa-x-bar.is-larger { background: var(--accent-mark); }
.dexa-x-bar-v { font: 560 var(--t-sub-size)/1.2 var(--font); color: var(--ink); text-align: right; }

/* The next scan's predictions: a hairline table, figures right-aligned. */
.dexa-x-scroll { overflow-x: auto; }
.dexa-x-table { width: 100%; border-collapse: collapse; font: var(--t-sub); color: var(--ink); font-variant-numeric: tabular-nums; }
.dexa-x-table th, .dexa-x-table td { padding: 10px 0 10px var(--s-3); border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; vertical-align: top; }
.dexa-x-table th:first-child { padding-left: 0; text-align: left; color: var(--ink-2); font-weight: 450; }
.dexa-x-table thead th { padding-top: 0; color: var(--ink-2); font: var(--t-cap); font-weight: 500; }
.dexa-x-table tbody th { color: var(--ink); font-weight: 500; }
.dexa-x-file-btn { justify-self: start; }
.dexa-x-cell-v { display: block; font: 560 var(--t-body-size)/1.3 var(--font); }
.dexa-x-cell-band { display: block; font: var(--t-cap); color: var(--ink-2); }

/* ---- the "Add scan images" sheet ---- */

.dexa-x-add { display: grid; gap: var(--s-3); }
.dexa-x-field { display: grid; gap: var(--s-1); }
.dexa-x-field-label { font: var(--t-sub); color: var(--ink-2); }
.dexa-x-file { min-height: var(--tap); }

@media (prefers-reduced-motion: reduce) {
  .dexa-x-chip { transition: none; }
  .dexa-x-chips { scroll-behavior: auto; }
}