/* Copyright (c) 2026 Ana-Maria Chioran. CorpX Analytics. All rights reserved. */

/* ============================================================================
   The public demo's stylesheet.

   IT RESTATES THE PLATFORM'S TOKENS RATHER THAN IMPORTING THEM, because this
   page is served by the static site and the platform's globals.css is a
   7,000-line Next.js bundle that cannot be. The values below are copied from
   apps/web/src/app/globals.css and apps/web/src/lib/regionPalette.ts, and the
   comments say which, so a drift between the two is findable rather than
   invisible. Anything not listed here was not needed; nothing here was
   invented.

   docs/design/STYLE.md is the authority for all of it: one accent per level,
   hue-biased neutrals, tabular numerals in every column, a hairline OR a
   shadow but not both, and refusals treated as first-class results.
   ========================================================================== */

/* Geist and Geist Mono come from the site's own /assets/fonts/fonts.css,
   linked from index.html ahead of this file. */

/* ── tokens ──────────────────────────────────────────────────────────────
   Light is the default declaration; dark redefines only what changes. The
   neutrals are hue-biased on purpose (STYLE.md §2.1): bone is warm, night is
   violet-biased. Nothing here is #000 or a neutral grey.                  */
:root {
  --violet:      #A888E8;
  --violet-ink:  #6E4FB8;

  --accent:       var(--violet-ink);
  --module-accent: #D1344B;          /* HeartX, light */

  --surf-0: #F1EFEB;   /* page   (bone)   */
  --surf-1: #FFFFFF;   /* card            */
  --surf-2: #E7E4DD;   /* raised (bone-2) */
  --text-1: #14131A;
  --text-2: #3B3844;
  --text-3: #6F6B7A;
  --border-1: #D6D1C8;
  --border-2: rgba(20, 19, 26, 0.07);

  --status-ok:    #059669;
  --status-watch: #d97706;

  --edge: none;
  --card-shadow: 0 8px 24px -12px rgba(20, 19, 26, 0.14);

  /* The ten region colours, light set. Searched, not chosen: see
     regionPalette.ts. Ten categorical hues is past what colour alone can
     carry, so on every figure below the LABEL is the encoding and the colour
     is the aid — never a swatch without its name. */
  --region-heart:                 #e11d48;
  --region-myocardium:            #9b2a03;
  --region-lv-cavity:             #005dc9;
  --region-la-cavity:             #2daddb;
  --region-atrial-appendage-left: #7e3bb4;
  --region-rv-cavity:             #349f3a;
  --region-aorta:                 #bb7bf8;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sans: "Geist", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --accent: var(--violet);
  --module-accent: #F2637A;          /* HeartX, dark */

  --surf-0: #08070E;
  --surf-1: #13111F;
  --surf-2: #1D1A2B;
  --text-1: #F4F2F9;
  --text-2: #B6B1C6;
  --text-3: #8F8AA2;
  --border-1: #241F33;
  --border-2: rgba(244, 242, 249, 0.055);

  --status-ok:    #34d399;
  --status-watch: #fbbf24;

  /* On a dark ground elevation is the one-pixel highlight on the top edge,
     where a light above the scene catches it. The shadow is the second cue. */
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --card-shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px -18px rgba(0,0,0,.75);

  /* Not a flip of the light set — a separate searched set. Flipped, five of
     the ten fell outside the lightness band against the dark surface. */
  --region-heart:                 #f2637a;
  --region-myocardium:            #af2f02;
  --region-lv-cavity:             #6583fe;
  --region-la-cavity:             #289ebf;
  --region-atrial-appendage-left: #9d3aa7;
  --region-rv-cavity:             #4da823;
  --region-aorta:                 #0a68a5;
}

/* ── the third theme state ───────────────────────────────────────────────
   A viewer has THREE states, not two. An explicit choice stamps
   data-theme on the root element; the default "system" setting stamps
   NOTHING, and then only prefers-color-scheme separates light from dark.
   A palette defined solely behind [data-theme] never applies in that
   un-stamped state, which is how a page comes to draw one theme's text on
   the other theme's ground.

   So the dark tokens are declared twice: once for the explicit choice
   above, and once here for the system setting, guarded with
   :not([data-theme="light"]) so pressing Light on a machine set to dark
   still wins. The two blocks must stay in step — CSS has no way to say
   this once, and the duplication is the price of covering all three.   */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: var(--violet);
    --module-accent: #F2637A;          /* HeartX, dark */

    --surf-0: #08070E;
    --surf-1: #13111F;
    --surf-2: #1D1A2B;
    --text-1: #F4F2F9;
    --text-2: #B6B1C6;
    --text-3: #8F8AA2;
    --border-1: #241F33;
    --border-2: rgba(244, 242, 249, 0.055);

    --status-ok:    #34d399;
    --status-watch: #fbbf24;

    /* On a dark ground elevation is the one-pixel highlight on the top edge,
       where a light above the scene catches it. The shadow is the second cue. */
    --edge: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    --card-shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px -18px rgba(0,0,0,.75);

    /* Not a flip of the light set — a separate searched set. Flipped, five of
       the ten fell outside the lightness band against the dark surface. */
    --region-heart:                 #f2637a;
    --region-myocardium:            #af2f02;
    --region-lv-cavity:             #6583fe;
    --region-la-cavity:             #289ebf;
    --region-atrial-appendage-left: #9d3aa7;
    --region-rv-cavity:             #4da823;
    --region-aorta:                 #0a68a5;
}
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surf-0);
  color: var(--text-1);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── the page around the window ──────────────────────────────────────────── */
.demo-page { max-width: 1280px; margin-inline: auto; padding: 56px 24px 72px; }
.demo-intro { max-width: 640px; margin-bottom: 36px; }
.demo-kicker {
  margin: 0 0 14px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}
.demo-intro h1 {
  margin: 0; font-size: 44px; line-height: 1.05; font-weight: 600;
  letter-spacing: -.03em;
}
.demo-lead { margin: 16px 0 0; font-size: 17px; color: var(--text-2); max-width: 58ch; }
.demo-foot { margin: 24px 0 0; font-size: 13px; color: var(--text-3); }
.demo-foot a { color: var(--text-2); }

/* ── window chrome ───────────────────────────────────────────────────────── */
.win {
  border: 1px solid var(--border-1);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surf-0);
  box-shadow: var(--card-shadow);
}
.win-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px; height: 40px;
  background: var(--surf-2);
  border-bottom: 1px solid var(--border-1);
}
.win-dots { display: inline-flex; gap: 7px; }
.win-dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in oklab, var(--text-3) 38%, transparent);
}
.win-title {
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
  letter-spacing: .02em;
}
.win-tools { margin-left: auto; display: flex; gap: 8px; }
.win-ghost {
  border: 1px solid var(--border-1); background: transparent;
  color: var(--text-3); font-size: 12px; border-radius: 7px;
  padding: 3px 10px; cursor: pointer;
}
.win-ghost:hover { color: var(--text-1); border-color: var(--text-3); }

.app { background: var(--surf-0); }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 12px; padding: 0 20px; height: 56px;
  background: var(--surf-1); border-bottom: 1px solid var(--border-1);
  box-shadow: var(--edge);
}
.topbar-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cx-mark { width: 20px; height: 20px; flex: none; }
.cx-top   { fill: var(--accent); }
.cx-side  { fill: color-mix(in oklab, var(--accent) 62%, var(--surf-1)); }
.cx-inner { fill: var(--surf-1); }
.topbar-name { font-size: 15px; font-weight: 600; white-space: nowrap; }
.topbar-name b { font-weight: 600; }
.topbar-name i { font-style: normal; font-weight: 400; color: var(--text-3); }
.topbar-sep { color: var(--text-3); }
.topbar-mod { font-size: 15px; font-weight: 600; }
.topbar-nav {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surf-2); border-radius: 999px;
}
.topbar-pill {
  font-size: 13.5px; padding: 5px 16px; border-radius: 999px; color: var(--text-3);
}
.topbar-pill.is-on {
  background: color-mix(in oklab, var(--module-accent) 16%, transparent);
  color: var(--module-accent); font-weight: 500;
}
.topbar-right { justify-self: end; }
.topbar-note {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}

/* ── layer 1 · scan context ──────────────────────────────────────────────── */
.sctx { padding: 28px 32px 18px; display: flex; flex-direction: column; gap: 18px; }
.sctx-back { font-size: 13px; color: var(--text-3); }
.sctx-back::before { content: "←"; margin-right: 5px; }
.sctx-title {
  margin: 4px 0 0; font-family: var(--mono); font-size: 26px; font-weight: 500;
  letter-spacing: -.01em; line-height: 1.25;
}
.sctx-ds {
  font-family: var(--sans); font-size: 24px; font-weight: 500;
  color: var(--text-3); letter-spacing: -.015em;
}
.sctx-sep { color: var(--text-3); margin: 0 8px; }
.sctx-page { font-family: var(--sans); font-weight: 600; }
.sctx-key { margin: 6px 0 0; }
.sctx-key code { font-family: var(--mono); font-size: 12px; color: var(--text-3); }

.sctx-facts { display: flex; flex-wrap: wrap; gap: 14px 46px; margin: 0; }
.sctx-facts > div { display: flex; flex-direction: column; gap: 3px; max-width: 30ch; }
.sctx-facts dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.sctx-facts dd {
  margin: 0; font-size: 19px; font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.sctx-facts dd span { font-size: 12px; color: var(--text-3); margin-left: 3px; }
.sctx-facts dd small { display: block; font-size: 12px; color: var(--text-3); line-height: 1.45; }
.sctx-facts .is-lead dd { font-family: var(--mono); color: var(--module-accent); font-size: 18px; }
.sctx-facts .is-warn dd { color: var(--status-watch); font-family: var(--mono); }

/* ── frame: rail + view ──────────────────────────────────────────────────── */
.frame { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
.rail {
  border-top: 1px solid var(--border-1);
  border-right: 1px solid var(--border-1);
  padding: 16px 12px 40px;
  min-height: 620px;
}
.view { padding: 22px 32px 40px; min-width: 0; }

/* Research Use Only, carried in the rail rather than only in the footer. With
   ?embed=1 the page's own footer is gone and the window's can be below the
   fold, and this has to be readable while a number is being read, not after
   scrolling past it. */
.rail-ruo {
  margin: 24px 4px 0; padding-top: 14px;
  border-top: 1px solid var(--border-1);
  font-size: 11.5px; line-height: 1.5; color: var(--text-3);
}
.rail-ruo b { color: var(--text-2); font-weight: 600; }

.rail-hold {
  border: 1px solid var(--border-1); border-radius: 10px;
  padding: 8px 10px; margin: 0 4px 18px;
}
.rail-hold-label {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 6px;
}
.rail-hold-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.rail-hold-pair span {
  font-size: 12.5px; padding: 4px 6px; border-radius: 6px; color: var(--text-3);
  line-height: 1.25;
}
.rail-hold-pair span b { display: block; font-weight: 500; color: var(--text-3); }
.rail-hold-pair span.is-on { background: var(--surf-2); }
.rail-hold-pair span.is-on b { color: var(--text-1); }
.rail-hold-pair em { font-style: normal; font-family: var(--mono); font-size: 10px; }

.rail-group { margin-bottom: 14px; }
.rail-group-head { padding: 0 8px 6px; }
.rail-group-name {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.rail-group-flag {
  display: block; font-size: 11px; color: var(--text-3); opacity: .75;
  letter-spacing: 0; text-transform: none; font-family: var(--sans);
}
.rail-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: transparent; text-align: left;
  padding: 7px 10px; border-radius: 8px;
  font-size: 15px; color: var(--text-2); cursor: pointer;
}
.rail-item:hover { color: var(--text-1); background: var(--surf-2); }
.rail-item.is-active {
  background: color-mix(in oklab, var(--module-accent) 14%, transparent);
  color: var(--text-1); font-weight: 500;
  box-shadow: inset 2px 0 0 var(--module-accent);
}
.rail-item.is-off { color: var(--text-3); cursor: help; }
.rail-item.is-off:hover { background: transparent; color: var(--text-2); }
.rail-flag { margin-left: auto; font-size: 13px; color: var(--text-3); opacity: .55; }
.rail-why {
  margin: -2px 10px 10px; padding: 8px 10px;
  border-left: 2px solid var(--border-1);
  font-size: 12.5px; line-height: 1.5; color: var(--text-3);
}
.rail-why b { color: var(--text-2); font-weight: 600; }

/* ── generic card + headings inside the view ─────────────────────────────── */
.card {
  border: 1px solid var(--border-1); border-radius: 12px;
  background: var(--surf-1); box-shadow: var(--edge);
}
.vh { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.vsub { margin: 0 0 18px; font-size: 14.5px; color: var(--text-3); max-width: 70ch; }
.lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.num { font-variant-numeric: tabular-nums; }

/* ── 3D anatomy ──────────────────────────────────────────────────────────── */
.anat { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.anat-stage {
  position: relative; border: 1px solid var(--border-1); border-radius: 12px;
  background: var(--surf-2); overflow: hidden; box-shadow: var(--edge);
}
.anat-canvas { display: block; width: 100%; height: 520px; touch-action: none; }
/* BOTTOM RIGHT, not left: the renderer draws its orientation cube in the
   bottom-left corner of a 3D scene and the two were painted on top of each
   other — the cube's A/L letters sat across the bar and its number. */
.anat-scale {
  position: absolute; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px;
  pointer-events: none;
}
.anat-scale-bar { height: 2px; background: var(--text-3); display: block; }
.anat-scale-label { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.anat-state {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px; color: var(--text-3); font-size: 15px;
  background: var(--surf-1);
}
.anat-hint {
  position: absolute; right: 14px; top: 12px; font-size: 11.5px; color: var(--text-3);
  font-family: var(--mono); pointer-events: none; opacity: .8;
}

.anat-ctl-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.anat-ctl-row > .lbl { flex: none; width: 46px; }
.anat-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.anat-btns button, .seg-btn {
  border: 1px solid var(--border-1); background: var(--surf-1);
  color: var(--text-2); font-size: 12.5px; padding: 4px 10px;
  border-radius: 7px; cursor: pointer;
}
.anat-btns button:hover, .seg-btn:hover { color: var(--text-1); border-color: var(--text-3); }
.anat-btns button.is-on, .seg-btn.is-on {
  background: var(--surf-2); color: var(--text-1); border-color: var(--text-3);
}
.anat-veil { margin: 14px 0 6px; }
.anat-veil em { font-style: normal; color: var(--text-2); font-family: var(--mono); }
.anat-veil input { width: 100%; margin-top: 6px; accent-color: var(--module-accent); }
.anat-note { margin: 10px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.5; }

.anat-legend { list-style: none; margin: 18px 0 0; padding: 0; }
.anat-legend li { border-bottom: 1px solid var(--border-2); }
.anat-legend li:last-child { border-bottom: 0; }
.anat-legend button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; padding: 9px 2px; cursor: pointer; text-align: left;
}
.anat-swatch {
  width: 11px; height: 11px; border-radius: 3px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.anat-name { font-size: 14.5px; color: var(--text-2); flex: 1; }
.anat-vol { font-family: var(--mono); font-size: 13px; color: var(--text-1); font-variant-numeric: tabular-nums; }
.anat-legend li.is-ghost .anat-name, .anat-legend li.is-ghost .anat-vol { opacity: .62; }
.anat-legend li.is-hidden .anat-name, .anat-legend li.is-hidden .anat-vol { opacity: .32; }
.anat-legend li.is-hidden .anat-swatch { background: transparent !important; box-shadow: inset 0 0 0 1px var(--text-3); }
.anat-state-word { font-family: var(--mono); font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; width: 42px; text-align: right; }

/* ── CT viewer ───────────────────────────────────────────────────────────── */
.ctv { border: 1px solid var(--border-1); border-radius: 12px; background: var(--surf-1); box-shadow: var(--edge); }
.ctv-summary {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 14px 16px; background: transparent; border: 0; cursor: pointer; text-align: left;
}
.ctv-summary::before { content: "›"; color: var(--text-3); transition: transform 160ms var(--ease-out); }
.ctv.is-open .ctv-summary::before { transform: rotate(90deg); }
.ctv-summary b { font-size: 16px; font-weight: 600; }
.ctv-summary span { font-size: 13px; color: var(--text-3); }
.ctv-body { padding: 0 16px 16px; }
.ctv-bar { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; }
.ctv-field { display: flex; align-items: center; gap: 8px; }
.seg { display: flex; }
.seg .seg-btn { border-radius: 0; margin-left: -1px; }
.seg .seg-btn:first-child { border-radius: 7px 0 0 7px; margin-left: 0; }
.seg .seg-btn:last-child { border-radius: 0 7px 7px 0; }
.ctv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ctv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-1); background: var(--surf-1); color: var(--text-2);
  font-size: 12.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
.ctv-chip.is-on { background: var(--surf-2); color: var(--text-1); border-color: var(--text-3); }
.ctv-swatch { width: 9px; height: 9px; border-radius: 2px; }
.ctv-stage {
  position: relative; border-radius: 10px; overflow: hidden;
  background: #0e1014; min-height: 420px;
}
.ctv-canvas { display: block; width: 100%; height: 480px; touch-action: none; }
.ctv-state {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; color: #c9ccd4; font-size: 14px;
}
.ctv-prog { display: block; width: 220px; height: 3px; background: rgba(255,255,255,.14); border-radius: 2px; }
.ctv-prog span { display: block; height: 100%; background: var(--module-accent); border-radius: 2px; }
.ctv-readout {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0;
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
}
.ctv-readout strong { color: var(--text-1); font-weight: 600; }
.ctv-scale { position: absolute; left: 14px; bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ctv-scale i { height: 2px; background: #c9ccd4; display: block; }
.ctv-scale span { font-family: var(--mono); font-size: 11px; color: #c9ccd4; }

/* ── snapshot / plate ────────────────────────────────────────────────────── */
.plate { margin-top: 20px; padding: 16px; }
.plate-img { width: 100%; border-radius: 8px; display: block; background: #000; }
.plate-cap { margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.55; }
.caps { margin-top: 18px; }
.caps-list { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; padding: 0; list-style: none; }
.caps-list li { width: 210px; }
.caps-list img { width: 100%; border-radius: 6px; display: block; border: 1px solid var(--border-1); }
.caps-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); line-height: 1.5; margin-top: 6px; display: block; }
.caps-drop { border: 0; background: transparent; color: var(--text-3); font-size: 11px; cursor: pointer; padding: 2px 0; text-decoration: underline; }
.caps-none { font-size: 13px; color: var(--text-3); margin: 10px 0 0; }

/* ── summary ─────────────────────────────────────────────────────────────── */
.smr { padding: 22px 24px; }
.smr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.smr-caveat { margin: 6px 0 0; font-size: 13px; color: var(--text-3); }
.smr-group { margin-top: 26px; }
.smr-group > .lbl { display: block; padding-bottom: 8px; border-bottom: 1px solid var(--border-2); }
.smr-row {
  display: grid; grid-template-columns: minmax(180px, 1.4fr) auto minmax(150px, 1fr) 86px minmax(120px, 1fr);
  gap: 18px; align-items: center; padding: 16px 0;
  border-bottom: 1px solid var(--border-2);
}
.smr-name { font-size: 15px; color: var(--text-2); }
.smr-value { font-size: 30px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: right; }
.smr-value span { font-size: 13px; color: var(--text-3); margin-left: 3px; font-weight: 400; }
.smr-strip { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.smr-track { position: relative; flex: 1; height: 3px; background: var(--border-1); border-radius: 2px; }
.smr-dot { position: absolute; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--module-accent); transform: translateX(-50%); }
.smr-rank { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); text-align: right; }
.smr-rank b { display: block; font-weight: 600; color: var(--text-1); }
.smr-how { font-size: 12px; color: var(--text-3); line-height: 1.45; }

.absent { margin-top: 34px; }
.absent-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.absent-title span { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.absent-group { border-top: 1px solid var(--border-2); }
.absent-head {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  border: 0; background: transparent; padding: 13px 2px; cursor: pointer; text-align: left;
}
.absent-n {
  font-family: var(--mono); font-size: 12px; color: var(--text-1);
  min-width: 22px; text-align: right;
}
.absent-kind { font-size: 14.5px; color: var(--text-2); flex: none; }
.absent-names { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.absent-detail { list-style: none; margin: 0 0 14px; padding: 0 2px 0 34px; }
.absent-gloss { font-size: 12.5px; color: var(--text-3); font-style: italic; margin-bottom: 10px; }
.absent-detail > li + li { margin-top: 12px; }
.absent-name { display: block; font-size: 14px; color: var(--text-1); }
.absent-reason { display: block; font-size: 13.5px; color: var(--text-2); line-height: 1.6; max-width: 76ch; }

/* ── region view ─────────────────────────────────────────────────────────── */
.rgn { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.rgn-facts { padding: 18px 20px; }
.rgn-facts dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.rgn-facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.rgn-facts dd { margin: 2px 0 0; font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rgn-metric { padding: 18px 20px; margin-bottom: 16px; }
.rgn-metric + .rgn-metric { margin-top: -4px; }
.rgn-metric-val { font-size: 34px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rgn-metric-val span { font-size: 14px; color: var(--text-3); margin-left: 4px; font-weight: 400; }
.rgn-reason { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin: 6px 0 0; }
.rgn-from { margin: 10px 0 0; font-size: 11.5px; color: var(--text-3); font-family: var(--mono); line-height: 1.5; }

/* ── report ──────────────────────────────────────────────────────────────── */
.rep { max-width: 860px; margin-inline: auto; padding: 8px 4px 0; }
.rep-crumb { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.rep-title { font-family: var(--mono); font-size: 30px; font-weight: 500; margin: 12px 0 20px; letter-spacing: -.01em; }
.rep-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; margin: 0 0 18px; }
.rep-meta dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.rep-meta dd { margin: 3px 0 0; font-family: var(--mono); font-size: 13.5px; color: var(--text-1); }
.rep-meta dd small { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--text-3); line-height: 1.45; margin-top: 3px; }
.rep-note { font-size: 13.5px; color: var(--text-2); line-height: 1.65; max-width: 72ch; }
.rep-rule { height: 1px; background: var(--text-1); margin: 22px 0; opacity: .85; }
.rep-sec { margin-top: 30px; }
.rep-sec h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-2);
}
.rep-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rep-table th {
  text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); font-weight: 400;
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--border-1);
}
.rep-table td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--border-2); vertical-align: top; color: var(--text-2); }
.rep-table td.n { text-align: right; font-family: var(--mono); color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-table th.n { text-align: right; }
.rep-table td.b { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.rep-table td small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.rep-legend { margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.rep-legend dt { font-size: 12.5px; color: var(--text-1); }
.rep-legend dd { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.55; max-width: 74ch; }
.rep-absent dt { font-size: 13.5px; color: var(--text-1); margin-top: 14px; }
.rep-absent dd { margin: 4px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.6; max-width: 74ch; }
.rep-absent dd b { color: var(--text-1); font-weight: 600; }
.rep-fig { width: 100%; border-radius: 6px; display: block; background: #000; margin-top: 10px; }
.rep-foot { margin: 34px 0 0; padding-top: 16px; border-top: 1px solid var(--border-1); font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.rep-foot strong { color: var(--text-2); }

/* ── app foot ────────────────────────────────────────────────────────────── */
.app-foot {
  border-top: 1px solid var(--border-1); padding: 16px 32px 20px;
  display: flex; flex-wrap: wrap; gap: 6px 36px; align-items: baseline;
}
.app-foot p { margin: 0; font-size: 11.5px; color: var(--text-3); line-height: 1.55; }
.app-foot b { color: var(--text-2); }
.app-attrib { max-width: 78ch; }

/* ── narrow desktop only ─────────────────────────────────────────────────
   There is no phone. The product is a desktop application and is reviewed at
   1440x900; these two steps keep a small laptop usable and stop there.     */
@media (max-width: 1180px) {
  .anat, .rgn { grid-template-columns: minmax(0, 1fr); }
  .anat-canvas { height: 440px; }
}
@media (max-width: 980px) {
  .frame { grid-template-columns: minmax(0, 1fr); }
  .rail { border-right: 0; border-bottom: 1px solid var(--border-1); min-height: 0; }
  .smr-row { grid-template-columns: 1fr auto; gap: 8px 16px; }
  .smr-strip, .smr-rank, .smr-how { grid-column: 1 / -1; text-align: left; }
}

@media print {
  .demo-intro, .demo-foot, .win-bar, .topbar, .rail, .sctx { display: none; }
  .win { border: 0; box-shadow: none; }
  .view { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}

/* ── embedded on the website ─────────────────────────────────────────────
   `?embed=1`, set by demo.js from the query string. The section on
   corpxanalytics.com carries the headline and the standfirst, so the page's
   own intro and footer would say them a second time; the window fills the
   frame instead, and the border and shadow go because the section supplies
   its own. Recommended iframe height: 860px, min 720px.                   */
:root[data-embed="1"] .demo-page { padding: 0; max-width: none; }
:root[data-embed="1"] .demo-intro,
:root[data-embed="1"] .demo-foot { display: none; }
:root[data-embed="1"] .win { border: 0; border-radius: 0; box-shadow: none; }
:root[data-embed="1"] body { background: var(--surf-0); }


/* ==========================================================================
   EMBEDDED ON THE HOMEPAGE (?embed=1)

   The owner's requirement: the demo sits whole inside the section, with no
   scrollbar of its own. So the page becomes a fixed-height column — window
   bar, context header, then the frame taking whatever is left — and the rail
   is CLIPPED, not scrolled, with a fade and a lock strip saying what fell
   below the cut. The 3D view keeps its own space; only the region list gives.
   ========================================================================== */

html[data-embed="1"], html[data-embed="1"] body { height: 100%; overflow: hidden; }
html[data-embed="1"] .demo-page { height: 100%; display: flex; flex-direction: column; padding: 0; max-width: none; }
html[data-embed="1"] .win { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; border-radius: 0; border: 0; }
html[data-embed="1"] .app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html[data-embed="1"] .frame { flex: 1; min-height: 0; align-items: stretch; }
html[data-embed="1"] .view { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 16px; }
html[data-embed="1"] .app-foot { padding-top: 10px; padding-bottom: 10px; }
/* EMBEDDED, THE DEMO IS THE RAIL AND THE VIEWER. Everything that frames them
   on the demo's own page — the window chrome, the product top bar, the scan
   context header and the app footer — is the host page's job here, and each
   one eats height the 3D view needs to fit without scrolling. The Research
   Use Only line is NOT among them: it lives in the rail and stays. The CC BY
   credit moves to the caption on the host page, which is where the licence
   needs it once this footer is gone. */
html[data-embed="1"] .win-bar,
html[data-embed="1"] .topbar,
html[data-embed="1"] .sctx,
html[data-embed="1"] .app-foot { display: none; }

html[data-embed="1"] .rail {
  min-height: 0; padding-bottom: 12px;
  display: flex; flex-direction: column;
}
html[data-embed="1"] .rail-list {
  flex: 1; min-height: 0; overflow: hidden; position: relative;
}
/* the fade, painted over whatever the clip cuts through */
html[data-embed="1"] .rail-list::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to bottom, transparent, var(--surf-0) 88%);
  pointer-events: none;
}
.rail-lock { display: none; }
html[data-embed="1"] .rail-lock {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0 4px; padding: 9px 4px 0;
  border-top: 1px solid var(--border-1);
}
html[data-embed="1"] .rail-lock-count {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
html[data-embed="1"] .rail-lock-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
  border: 1px solid var(--border-1); border-radius: 999px; padding: 2px 8px;
  white-space: nowrap;
}
html[data-embed="1"] .rail-ruo { margin-top: 10px; padding-top: 10px; font-size: 10.5px; }

/* THE VIEW, EMBEDDED, IS THE VIEWER. Its own page heading and standfirst say
   what the host section's caption already says, and the explanatory note under
   the controls costs the legend the rows at the bottom of the list. Dropping
   all three is what lets the canvas AND the whole legend sit in one view with
   no scrollbar — the owner's requirement. They are all still there on the
   demo's own page. */
html[data-embed="1"] .view > .vh,
html[data-embed="1"] .view > .vsub,
html[data-embed="1"] .anat-note { display: none; }

/* The canvas is given a fixed 520px on the demo's own page. Embedded it has to
   take the height that is left, so the legend beside it is never cut. */
html[data-embed="1"] .anat { height: 100%; min-height: 0; align-items: stretch; }
html[data-embed="1"] .anat-stage { min-height: 0; display: flex; }
html[data-embed="1"] .anat-canvas { height: 100%; min-height: 0; flex: 1; }
html[data-embed="1"] .anat-side { min-height: 0; overflow: hidden; }


/* The dataset credit, carried in the rail so it cannot be lost when the embed
   hides the footer. Small, but present wherever the figure is. */
.rail-credit {
  margin: 8px 4px 0; font-size: 10px; line-height: 1.45; color: var(--text-3);
}

/* A PHONE IS NOT A FRAME. The embed layout above pins the page to a fixed
   height and clips the rail, which is right inside a 860px slot on a desktop
   and wrong on a phone, where someone has opened /demo full screen. Below
   900px the page becomes an ordinary scrolling document again: nothing is
   clipped, so nothing needs a lock strip to explain the clipping. */
@media (max-width: 900px) {
  html[data-embed="1"], html[data-embed="1"] body { height: auto; overflow: visible; }
  html[data-embed="1"] .demo-page,
  html[data-embed="1"] .win,
  html[data-embed="1"] .app,
  html[data-embed="1"] .frame,
  html[data-embed="1"] .view { display: block; height: auto; min-height: 0; overflow: visible; }
  html[data-embed="1"] .rail { display: block; min-height: 0; }
  html[data-embed="1"] .rail-list { overflow: visible; flex: none; }
  html[data-embed="1"] .rail-list::after { display: none; }
  html[data-embed="1"] .rail-lock { display: none; }
  html[data-embed="1"] .anat { height: auto; }
  html[data-embed="1"] .anat-stage { display: block; }
  html[data-embed="1"] .anat-canvas { height: 320px; }
  html[data-embed="1"] .anat-side { overflow: visible; }
}