/* Offerings case studies: two-column challenge, "What we built" explorer and its visual stage.
   Per-visual drawings live in offerings-viz.css. Colours come from tokens.css only. */

/* ---------- The challenge: heading | one rule | points ---------- */
.case__challenge { display: grid; gap: 1.5rem; padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--line); }
.case__challenge h3, .case__built > h3 { font-size: var(--text-xl); letter-spacing: -0.03em; }
.challenge { display: grid; gap: 1.75rem; }
.challenge li { display: grid; gap: 0.4rem; max-width: 60ch; }
.challenge li strong { font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.02em; }
.challenge li p { color: var(--text-muted); font-size: var(--text-sm); }
@media (min-width: 950px) {
  .case__challenge { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: 0; }
  .case__challenge .challenge { padding-left: clamp(2rem, 1rem + 3vw, 4rem); border-left: 1px solid var(--line); }
}

/* ---------- What we built ---------- */
.case__built { display: grid; gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--line); }

.explorer { --tab-active-bg: var(--bg-alt); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.case:nth-of-type(even) .explorer { --tab-active-bg: var(--white); }
.explorer__stage { order: -1; }
@media (min-width: 950px) {
  /* the stage stretches to the height of the list beside it */
  .explorer { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: stretch; }
  .explorer__stage { order: 0; }
}

.explorer__list { display: grid; align-content: start; }
.explorer__tab {
  position: relative; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem;
  width: 100%; padding: 1.1rem 1rem; border: 0; border-bottom: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.explorer__tab:first-child { border-top: 1px solid var(--line); }
.explorer__tab::before { /* accent rule that draws down the active point */
  content: ""; position: absolute; left: 0; top: 0.9rem; bottom: 0.9rem; width: 2px; border-radius: 2px;
  background: var(--navy); transform: scaleY(0); transform-origin: top; transition: transform 450ms var(--ease-out);
}
.explorer__num { padding-top: 0.2rem; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; transition: color var(--dur); }
.explorer__copy { display: grid; gap: 0.35rem; transition: transform 450ms var(--ease-out); }
.explorer__copy strong { font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.25; color: color-mix(in oklab, var(--text) 62%, transparent); transition: color var(--dur); }
.explorer__copy > span { font-size: var(--text-sm); color: var(--text-muted); opacity: 0.8; transition: opacity var(--dur); }
.explorer__tab:hover .explorer__copy strong { color: var(--text); }
.explorer__tab[aria-selected="true"] { background: var(--tab-active-bg); border-bottom-color: transparent; }
.explorer__tab[aria-selected="true"]::before { transform: scaleY(1); }
.explorer__tab[aria-selected="true"] .explorer__num { color: var(--accent); }
.explorer__tab[aria-selected="true"] .explorer__copy { transform: translateX(0.35rem); }
.explorer__tab[aria-selected="true"] .explorer__copy strong { color: var(--text); }
.explorer__tab[aria-selected="true"] .explorer__copy > span { opacity: 1; }
.explorer__tab:focus-visible { outline-offset: -2px; }

/* ---------- Stage: the same deep surface and dot grid as the home Solutions card 01 ---------- */
.explorer__stage {
  position: relative; isolation: isolate; overflow: hidden; height: clamp(320px, 92vw, 440px);
  border-radius: var(--radius-lg); border: 1px solid var(--dark-line); box-shadow: var(--shadow-lg);
  background: var(--surface-deep); color: var(--white);
  touch-action: pan-y;
}
.explorer__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 78% 18%, color-mix(in oklab, var(--navy-300) 16%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in oklab, var(--white) 9%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px;
}
@media (min-width: 950px) { .explorer__stage { height: auto; min-height: 420px; } }
.viz { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 350ms var(--ease-out), visibility 0s linear 350ms; }
.viz.is-active { opacity: 1; visibility: visible; transition: opacity 450ms var(--ease-out) 80ms, visibility 0s; }
.viz__tag { position: absolute; left: 1.25rem; top: 1.1rem; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in oklab, var(--white) 62%, transparent); }
.viz__readout {
  position: absolute; right: 1.1rem; top: 0.85rem; z-index: 2; padding: 0.35rem 0.75rem; border-radius: 999px;
  background: var(--white); color: var(--navy); font-size: var(--text-xs); font-weight: 500; box-shadow: var(--shadow-md);
  font-variant-numeric: tabular-nums;
}
.viz__status { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; display: flex; align-items: center; gap: 0.6rem; font-size: var(--text-xs); color: color-mix(in oklab, var(--white) 75%, transparent); }
.viz__dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--navy-300); }
.viz__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: viz-ping 2s var(--ease-out) infinite; }
@keyframes viz-ping { to { transform: scale(2.6); opacity: 0; } }
.viz__svg, .viz__canvas {
  position: absolute; left: 1.25rem; top: 3rem; width: calc(100% - 2.5rem); height: calc(100% - 6.25rem); overflow: visible;
  /* depth: the drawing leans toward the pointer (offerings.js sets --mx / --my) */
  translate: calc(var(--mx, 0) * 8px) calc(var(--my, 0) * 6px); transition: translate 600ms var(--ease-out);
}
@media (max-width: 599px) {
  .viz__svg, .viz__canvas { left: 0.5rem; width: calc(100% - 1rem); }
  .viz__readout { display: none; }
}
.viz__svg text { font-family: var(--font-sans); }

/* ---------- Phones: a deck of cards, one per point, its visual above its text (deck.js) ---------- */
/* deck.js sets the deck's height (one step of scroll per card) and where the row pins */
.deck__pin { position: sticky; top: var(--header-h); }
.deck__row {
  display: flex; gap: 0.75rem; margin-inline: calc(-1 * var(--gutter)); padding: 0.25rem var(--gutter) 0.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.deck__row::-webkit-scrollbar { display: none; }
.deck__row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.deck__card { flex: none; width: 86%; scroll-snap-align: start; scroll-snap-stop: always; }
.deck__dots { display: flex; justify-content: center; gap: 8px; margin-top: 0.85rem; }
.deck__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: background var(--dur), transform var(--dur) var(--ease-out); }
.deck__dots i.is-on { background: var(--navy); transform: scale(1.35); }

.explorer.has-deck > :is(.explorer__list, .explorer__stage) { display: none; }
.deck .explorer__stage { height: clamp(250px, 70vw, 340px); box-shadow: var(--shadow-md); touch-action: auto; }
.deck .viz { opacity: 1; visibility: visible; transition: none; }
.deck__text { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem; padding: 1.1rem 0.25rem 0; }
.deck__text .explorer__num { color: var(--accent); }
.deck__text .explorer__copy strong { color: var(--text); }
.deck__text .explorer__copy > span { opacity: 1; }

/* the pause button for every loop: nothing animates while the explorer is off screen */
.explorer:not(.is-live) .viz *, .explorer:not(.is-live) .viz { animation-play-state: paused !important; }

/* ---------- Shared drawing primitives ---------- */
.v-label { font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; fill: color-mix(in oklab, var(--white) 55%, transparent); }
.v-label--hi { fill: var(--navy-300); }
.of-stop-heat-a { stop-color: var(--navy-300); stop-opacity: 0.85; }
.of-stop-heat-b { stop-color: var(--navy-300); stop-opacity: 0; }
.of-stop-glare-a { stop-color: var(--white); stop-opacity: 0.95; }
.of-stop-glare-b { stop-color: var(--white); stop-opacity: 0; }
.of-stop-card-a { stop-color: var(--white); }
.of-stop-card-b { stop-color: var(--navy-50); }
.of-stop-band-0 { stop-color: var(--navy-300); stop-opacity: 0; }
.of-stop-band-1 { stop-color: var(--navy-300); stop-opacity: 0.35; }
.of-stop-tree-a { stop-color: color-mix(in oklab, var(--navy-300) 85%, var(--white)); }
.of-stop-tree-b { stop-color: color-mix(in oklab, var(--navy-300) 55%, var(--navy)); }
.of-stop-shade { stop-color: var(--ink); stop-opacity: 0.35; }
.of-stop-legend-a { stop-color: var(--navy-300); stop-opacity: 0.12; }
.of-stop-legend-b { stop-color: var(--navy-300); stop-opacity: 1; }

/* swapping status text (two <b> in one grid cell) */
.swap { display: grid; }
.swap b { grid-area: 1 / 1; font-weight: 500; }
.swap b:first-child { opacity: 0; }

/* identity card symbol (#m-card) */
.mc-bg { fill: url(#of-card); }
.mc-title { font-size: 6px; font-weight: 700; letter-spacing: 0.1em; fill: var(--navy); }
.mc-chip { fill: color-mix(in oklab, var(--navy-300) 70%, var(--white)); }
.mc-line { fill: var(--slate-200); }
.mc-line--strong { fill: color-mix(in oklab, var(--navy) 55%, var(--white)); }
.mc-photo { fill: var(--navy-100); }
.mc-face { fill: color-mix(in oklab, var(--navy-300) 70%, var(--white)); }

/* breast CT slice symbols (#k-slice, #k-outline) */
/* chest-wall plane, then the hemisphere: far-side grid faint, near-side grid drawn over the tissue */
.ks-plane { fill: color-mix(in oklab, var(--white) 4%, transparent); stroke: color-mix(in oklab, var(--white) 18%, transparent); stroke-linejoin: round; }
.ks-skin { fill: color-mix(in oklab, var(--white) 6%, transparent); stroke: color-mix(in oklab, var(--white) 45%, transparent); stroke-width: 1.4; }
.ks-grid { fill: none; stroke: color-mix(in oklab, var(--white) 30%, transparent); stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; }
.ks-grid--back { stroke: color-mix(in oklab, var(--white) 9%, transparent); }
.ks-tissue { fill: color-mix(in oklab, var(--navy-300) 24%, transparent); stroke: color-mix(in oklab, var(--navy-300) 65%, transparent); stroke-width: 1.2; }
.ks-strand { fill: none; stroke: color-mix(in oklab, var(--navy-300) 50%, transparent); }
.ks-calc { fill: var(--white); }
.ko-skin { fill: none; stroke: var(--navy-300); stroke-width: 1.6; }
.ko-tissue { fill: color-mix(in oklab, var(--navy-300) 16%, transparent); stroke: var(--navy-300); stroke-width: 1.2; }
.ko-mark { fill: none; stroke: var(--white); stroke-width: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .explorer *, .explorer *::before, .explorer *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .viz__svg, .viz__canvas { translate: none; }
}