:root {
  --bg: #b3afad;
  --panel: #bdb9b7;
  --ink: #2a2928;
  --ink-soft: rgba(42, 41, 40, 0.62);
  --ink-faint: rgba(42, 41, 40, 0.38);
  --grid: rgba(42, 41, 40, 0.26);
  --line: rgba(42, 41, 40, 0.16);
  --track: 0.22em;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 0;
}
.title { letter-spacing: var(--track); margin-right: 16px; }
.muted { color: var(--ink-soft); letter-spacing: 0.06em; }
.controls { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.controls label { letter-spacing: 0.12em; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
select {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--grid);
  padding: 4px 8px;
  letter-spacing: 0.04em;
}
.toggle input { accent-color: var(--ink); margin: 0; }

.stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 8px 16px 24px;
}
#radar {
  width: 100%;
  max-width: 1216px;
  height: auto;
  max-height: calc(100vh - 70px);
  overflow: visible;
}

/* radar parts */
.grid-ring, .grid-spoke { fill: none; stroke: var(--grid); stroke-width: 0.9; }
.grid-spoke.vertex { stroke: var(--line); }
.grid-spoke.active { stroke: var(--ink); stroke-width: 1.2; }
.shape { fill: rgba(42, 41, 40, 0.05); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; transition: d 0.5s ease; }
.shape.prev { fill: none; stroke: var(--ink-faint); stroke-dasharray: 4 4; stroke-width: 1.1; }
.dot { fill: var(--ink); transition: cx 0.5s ease, cy 0.5s ease; }
.axis-label {
  font-size: 13.5px;
  letter-spacing: var(--track);
  fill: var(--ink);
  cursor: pointer;
  dominant-baseline: middle;
}
.axis-label.empty { fill: var(--ink-faint); }
.axis-label.active { font-weight: 600; }
.hit { fill: transparent; cursor: pointer; outline: none; }
.hit:focus-visible { fill: rgba(42, 41, 40, 0.06); }
.domain { cursor: pointer; }
.domain .icon { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.domain .icon-hit { fill: transparent; }
.domain text { font-size: 11px; letter-spacing: var(--track); fill: var(--ink-soft); text-anchor: middle; }
.domain .domain-score { font-size: 15px; fill: var(--ink); letter-spacing: 0.08em; }
.domain:hover .icon, .domain:focus-visible .icon { stroke-width: 1.8; }
.domain:focus-visible { outline: none; }

.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.tooltip b { font-weight: 600; letter-spacing: 0.12em; }

/* detail panel */
.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  background: var(--panel);
  border-left: 1px solid var(--line);
  padding: 28px 28px 40px;
  overflow-y: auto;
  box-shadow: -12px 0 40px rgba(42, 41, 40, 0.12);
}
.close {
  position: absolute;
  top: 14px;
  right: 16px;
  font: 22px/1 var(--font);
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.eyebrow { font-size: 11px; letter-spacing: var(--track); color: var(--ink-soft); text-transform: uppercase; }
.panel h2 { font-weight: 400; font-size: 22px; letter-spacing: 0.12em; margin: 6px 0 4px; }
.panel .big { font-size: 44px; font-weight: 300; letter-spacing: 0.02em; }
.panel .big small { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.1em; margin-left: 8px; }
.panel ul { list-style: none; margin: 20px 0 0; padding: 0; }
.panel li { padding: 14px 0; border-top: 1px solid var(--line); }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.row .name { letter-spacing: 0.06em; }
.row .score { font-variant-numeric: tabular-nums; }
.sub { font-size: 11.5px; color: var(--ink-soft); letter-spacing: 0.04em; margin-top: 2px; }
.trend { font-size: 11px; color: var(--ink-soft); margin-left: 6px; }
button.link { all: unset; cursor: pointer; display: block; width: 100%; }
button.link:hover .name, button.link:focus-visible .name { text-decoration: underline; text-underline-offset: 3px; }

.rangebar { position: relative; height: 6px; margin: 10px 0 4px; background: rgba(42, 41, 40, 0.08); }
.rangebar .acceptable { position: absolute; top: 0; bottom: 0; background: rgba(42, 41, 40, 0.14); }
.rangebar .optimal { position: absolute; top: 0; bottom: 0; background: rgba(42, 41, 40, 0.38); }
.rangebar .marker {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 14px;
  background: var(--ink);
  transform: translateX(-1px);
}
.scorebar { height: 3px; background: rgba(42, 41, 40, 0.1); margin-top: 8px; }
.scorebar span { display: block; height: 100%; background: var(--ink); }
.note { margin-top: 24px; font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pill {
  font: 11px/1 var(--font);
  letter-spacing: 0.14em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--grid);
  padding: 6px 10px;
  cursor: pointer;
}
.pill:hover, .pill:focus-visible { border-color: var(--ink); outline: none; }
.demo-flag { font-size: 11px; letter-spacing: 0.14em; color: var(--ink-soft); border-bottom: 1px dashed var(--ink-faint); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--grid);
  color: var(--ink-soft);
}
.tag.must { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tag.nice { border-color: var(--ink); color: var(--ink); }
.panel dl { margin: 16px 0 0; }
.panel dt { font-size: 11px; letter-spacing: 0.14em; color: var(--ink-soft); text-transform: uppercase; margin-top: 14px; }
.panel dd { margin: 4px 0 0; letter-spacing: 0.02em; }

@media (max-width: 760px) {
  .bar { padding: 12px 16px 0; }
  .panel { top: auto; width: 100vw; max-height: 70vh; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---- data editor ---- */
:root { --error: #8b2e2e; --cell: rgba(255, 255, 255, 0.22); --cell-focus: rgba(255, 255, 255, 0.55); }
.data-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.data-page .bar { padding-bottom: 8px; }
a.pill { text-decoration: none; }
.tabs { display: flex; gap: 2px; }
.tab {
  font: 12px/1 var(--font);
  letter-spacing: 0.14em;
  background: transparent;
  color: var(--ink-soft);
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 6px 10px;
  cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.controls input[type="search"], .controls input[type="date"], .inline-form input, .inline-form select {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--grid);
  padding: 4px 8px;
}
.controls input[type="search"] { width: 220px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 4px 24px 8px; }
.inline-form label { letter-spacing: 0.12em; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; }
.hint { margin: 0; padding: 0 24px 8px; font-size: 11.5px; color: var(--ink-soft); letter-spacing: 0.04em; }
.sheet { flex: 1; overflow: auto; margin: 0 16px 16px; border: 1px solid var(--line); }
.save-status { position: fixed; right: 20px; bottom: 14px; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft); }

.grid { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.grid th, .grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; white-space: nowrap; }
.grid thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ink);
  color: var(--bg);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: left;
  padding: 8px;
  vertical-align: bottom;
}
.grid .rn { width: 36px; text-align: right; color: var(--ink-faint); padding: 0 6px; font-variant-numeric: tabular-nums; }
.grid td.name { padding: 0 10px; min-width: 240px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.grid td.unit { padding: 0 8px; color: var(--ink-soft); }
.grid td.wide input { min-width: 220px; }
.grid td.prov { padding: 0 8px; color: var(--ink-soft); font-size: 11px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.grid input, .grid select {
  font: inherit;
  color: var(--ink);
  background: var(--cell);
  border: 0;
  padding: 6px 8px;
  width: 100%;
  min-width: 64px;
  outline: none;
}
.grid select[data-f="status"] { min-width: 104px; }
.grid td.num input { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.grid input:focus, .grid select:focus { background: var(--cell-focus); box-shadow: inset 0 0 0 1px var(--ink); }
.grid input.saving { opacity: 0.5; }
.grid input.saved, .grid select.saved { background: rgba(255, 255, 255, 0.7); transition: background 0.6s; }
.grid input.error, .grid select.error { box-shadow: inset 0 0 0 1px var(--error); color: var(--error); }

.grid tr.grp th { text-align: left; padding: 6px 10px; font-weight: 400; letter-spacing: 0.12em; }
.grid tr.axis th { background: rgba(42, 41, 40, 0.72); color: var(--bg); text-transform: uppercase; font-size: 11px; position: sticky; left: 0; }
.grid tr.cluster th { background: rgba(42, 41, 40, 0.16); font-weight: 600; }
.grid tr.sub th { background: rgba(42, 41, 40, 0.06); color: var(--ink-soft); font-size: 11px; padding-left: 24px; }

/* results grid: sticky marker columns, one column per persona */
.results thead th.subj { white-space: normal; width: 104px; min-width: 104px; line-height: 1.25; }
.results thead th small { display: block; opacity: 0.6; }
.results td.rn, .results td.name, .results th.rn, .results th.name { position: sticky; z-index: 2; background: var(--bg); }
.results td.rn, .results th.rn { left: 0; }
.results td.name, .results th.name { left: 36px; }
.results thead th.rn, .results thead th.name { z-index: 4; background: var(--ink); }
.results td.val { position: relative; }
.results td.val input { text-align: right; padding-right: 26px; font-variant-numeric: tabular-nums; }
.results td.val input.off { text-decoration: underline dotted; text-underline-offset: 3px; }
.prio {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  font: 10px/1 var(--font);
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0;
}
.prio.on { background: var(--ink); color: var(--bg); }

[hidden] { display: none !important; }

/* ---- test upload ---- */
.panel .form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.panel .form label, .panel .form-row label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-soft); }
.panel .form-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-top: 16px; }
.panel .form input:not([type="file"]), .panel .form-row input, .panel .form select {
  font: 13px var(--font);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid var(--grid);
  padding: 6px 8px;
  letter-spacing: 0.02em;
}
.drop {
  position: relative;
  border: 1px dashed var(--ink-faint);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.08em;
}
.drop.over, .drop:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.2); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 1px solid var(--ink); }
.pill.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); padding: 8px 14px; }
.pill:disabled { opacity: 0.45; cursor: default; }
.preview { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; }
.preview th { text-align: left; font-weight: 400; font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-soft); padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); }
.preview td { padding: 6px 6px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.preview td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.preview td.st { white-space: nowrap; font-size: 11px; color: var(--ink-soft); }
.preview tr.ok td.st { color: var(--ink); }
.preview tr:not(.ok):not(.duplicate) td:not(.st) { color: var(--ink-faint); }
.preview .muted { font-size: 11px; }
.error-text { color: var(--error, #8b2e2e); font-size: 12px; letter-spacing: 0.02em; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  z-index: 20;
}

/* ---- sector view ---- */
.sector-page { min-height: 100vh; }
.sector-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 460px;
  margin: 0 auto;
  padding: 14px 16px 10px;
}
.sector-bar select { flex: 1 1 120px; min-width: 0; font-size: 12px; }
.sheet-card {
  max-width: 460px;
  margin: 0 auto;
  background: var(--panel);
  border-radius: 22px 22px 0 0;
  padding: 10px 20px 40px;
  box-shadow: 0 -8px 30px rgba(42, 41, 40, 0.1);
  min-height: calc(100vh - 60px);
}
.handle { width: 44px; height: 4px; border-radius: 2px; background: var(--ink-faint); margin: 0 auto 16px; }
.sector-icon { display: block; width: 34px; height: 34px; margin: 0 auto 8px; fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.domain-nav { display: flex; align-items: center; justify-content: space-between; }
.domain-nav h1 { font-weight: 400; font-size: 17px; letter-spacing: 0.34em; text-transform: uppercase; margin: 0; padding-left: 0.34em; }
.domain-nav button { font: 22px/1 var(--font); background: none; border: 0; color: var(--ink); cursor: pointer; padding: 6px 10px; }
.domain-nav button:focus-visible { outline: 1px solid var(--ink); }
.tagline { text-align: center; margin: 6px 0 2px; letter-spacing: 0.14em; color: var(--ink); }
.domain-meta { text-align: center; margin: 0 0 4px; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft); }

.wedge { display: block; width: 100%; height: auto; margin: 4px 0 8px; overflow: visible; }
.wedge .wedge-bg { fill: url(#bg-grad); stroke: var(--line); stroke-width: 0.8; }
.wedge .rings line { stroke: var(--grid); stroke-width: 0.6; }
.wedge .area.current { fill: url(#area-grad); transition: d 0.6s ease; }
.wedge .area.prev { fill: rgba(42, 41, 40, 0.1); stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 4 4; transition: d 0.6s ease; }
.wedge .spokes line { stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.8; }
.wedge .labels text { font-size: 12px; letter-spacing: 0.1em; fill: var(--ink); text-anchor: middle; cursor: pointer; }
.wedge .labels text.empty { fill: var(--ink-faint); }

.clusters { list-style: none; margin: 8px 0 0; padding: 0; }
.cluster { padding: 16px 0 14px; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
.cl-head { all: unset; display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer; }
.cl-head:disabled { cursor: default; }
.cl-head:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.cl-name { font-weight: 600; letter-spacing: 0.06em; }
.info {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--ink-soft);
  border-radius: 50%;
  font-size: 9.5px;
  font-style: italic;
  color: var(--ink-soft);
}
.cl-score { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.chev { font-size: 18px; line-height: 1; transition: transform 0.2s; }
.cluster.open .chev { transform: rotate(90deg); }
.cl-head:disabled .chev { opacity: 0.3; }
.cl-bar { height: 8px; background: rgba(42, 41, 40, 0.1); margin: 10px 0 10px; }
.cl-bar span { display: block; height: 100%; background: linear-gradient(90deg, rgba(42, 41, 40, 0.85), rgba(42, 41, 40, 0.55)); transition: width 0.5s ease; }
.cl-text { margin: 0; font-size: 13px; line-height: 1.5; letter-spacing: 0.03em; }
.cl-markers { list-style: none; margin: 10px 0 0; padding: 0 0 0 12px; border-left: 1px solid var(--line); }
.cl-markers li { padding: 10px 0; border-top: 1px solid var(--line); }
.cl-markers li:first-child { border-top: 0; }
.cl-markers .tag { margin-left: 4px; }
.sector-page .note { padding: 0 2px; }

/* ---- Wellness | Medical (AEVUM briefing) ---- */
:root {
  /* identity: one fixed token per axis, never computed from data */
  --axis-engine: #d4742a;
  --axis-fuel: #4c9a5c;
  --axis-move: #3c70b6;
  --axis-mind: #7a58a8;
  --axis-rhythm: #2a9693;
  --reference-band: rgba(42, 41, 40, 0.2);
  --physician-alert: #b3262d;   /* reserved for the physician path; not used by the app's own UI */
  /* medical mode only: colour bound to a value */
  --md-good: #3f8a57;
  --md-mid: #d09a2a;
  --md-low: #c2392f;
}

.mode-toggle { display: inline-flex; border: 1px solid var(--ink); }
.mode-toggle button {
  font: 11px/1 var(--font);
  letter-spacing: 0.14em;
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 7px 12px;
  cursor: pointer;
}
.mode-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.mode-toggle button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cert-banner {
  margin: 8px 24px 0;
  padding: 8px 12px;
  border: 1px solid var(--ink);
  font-size: 12px;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.35);
}
.cert-banner::before { content: "Medical version \00B7  "; font-weight: 600; }
.legend { text-align: center; font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-soft); margin: -8px 16px 18px; }

/* radar, wellness: per-axis coverage shapes in the axis colour */
.axis-shape { fill-opacity: 0.2; stroke-width: 1.4; stroke-linejoin: round; }
.grid-spoke.unmeasured { stroke: var(--ink-soft); stroke-dasharray: 2 4; stroke-width: 1.1; }
.center-score { font-size: 30px; font-weight: 300; text-anchor: middle; dominant-baseline: middle; fill: var(--ink); }
.center-score-label { font-size: 10px; letter-spacing: 0.2em; text-anchor: middle; fill: var(--ink-soft); }
.md-spoke { stroke-width: 2.4; stroke-linecap: round; }
[data-mode="wellness"] .md-only, [data-mode="medical"] .wellness-only { display: none !important; }

.coverage-bar { display: flex; gap: 2px; height: 8px; margin: 8px 0; }
.coverage-bar span { flex: 1; }
.focus-card {
  border: 1px solid var(--grid);
  background: rgba(255, 255, 255, 0.28);
  padding: 10px 14px;
  max-width: 260px;
}
.focus-title { font-size: 14px; letter-spacing: 0.04em; margin-top: 2px; }
.stage .focus-card { position: absolute; left: 24px; top: 8px; z-index: 1; }
.ref-band { position: relative; height: 6px; margin: 8px 0 4px; background: rgba(42, 41, 40, 0.07); }
.ref-band .band { position: absolute; top: 0; bottom: 0; background: var(--reference-band); }
.ref-band .tick { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--ink); transform: translateX(-1px); }
.md-bar { position: relative; height: 6px; margin: 8px 0 4px; background: rgba(42, 41, 40, 0.1); }
.md-bar .target { position: absolute; top: 0; bottom: 0; background: rgba(63, 138, 87, 0.45); }
.md-bar .dot { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-6px); }
.md-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.md-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.mk-row .info, .panel .info {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--ink-soft);
  border-radius: 50%;
  font-size: 9.5px;
  font-style: italic;
  color: var(--ink-soft);
  cursor: help;
  flex: none;
}
.mk-row .row { justify-content: flex-start; gap: 8px; }
.mk-row .row .score { margin-left: auto; }
.mk-row .val { font-weight: 600; color: var(--ink); }
.panel .mk-row { padding: 14px 0; border-top: 1px solid var(--line); }
.danger { border-color: var(--ink); }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; letter-spacing: 0.02em; color: var(--ink); }
.check input { margin-top: 2px; accent-color: var(--ink); }
@media (max-width: 760px) {
  .stage .focus-card { position: static; margin: 0 0 8px; max-width: none; }
  .stage { flex-direction: column; }
  .cert-banner { margin: 8px 16px 0; }
}
.axis-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.sector-banner { max-width: 460px; margin: 0 auto 10px; box-sizing: border-box; }
.sector-legend { margin: -4px 4px 14px; }
.sector-page .focus-card { max-width: none; margin: 0 0 6px; }
.wedge .area.current { stroke-width: 1.6; stroke-linejoin: round; }
.domain .coverage-count { font-size: 12px; fill: var(--ink-soft); }
.sector-bar #mode-toggle { flex: none; }
@media (max-width: 760px) { .sector-banner { margin: 0 16px 10px; } }

/* ---- tested names and design polish ---- */
:root { --tested: #00524e; }   /* deep turquoise: ~4.2:1 on the grey surface; lighter turquoise would not be readable */
.axis-label.tested { fill: var(--tested); font-weight: 600; }
.axis-label.empty { fill: var(--ink-faint); font-style: italic; }
.tested-word { color: var(--tested); font-weight: 600; }
.panel .name.tested, .mk-row.tested .name, .cl-name.tested { color: var(--tested); }
.wedge .labels text.tested { fill: var(--tested); font-weight: 600; }
.wedge .labels text.empty { font-style: italic; }

/* radar */
.stage-glow { fill: rgba(255, 255, 255, 0.16); stroke: none; }
.axis-shape { fill-opacity: 1; stroke-width: 1.6; filter: drop-shadow(0 2px 6px rgba(42, 41, 40, 0.12)); }
.shape.current { fill: url(#fill-ink); stroke-width: 1.6; filter: drop-shadow(0 2px 6px rgba(42, 41, 40, 0.15)); }
.dot { stroke: var(--bg); stroke-width: 1.6; }
.md-spoke { stroke-width: 3; opacity: 0.85; }
.icon-badge { fill: rgba(255, 255, 255, 0.3); stroke: var(--ink); stroke-width: 1; }
.domain:hover .icon-badge, .domain:focus-visible .icon-badge { fill: rgba(255, 255, 255, 0.55); }
.ring-bg { fill: var(--bg); stroke: none; }
.ring-track { fill: none; stroke: rgba(42, 41, 40, 0.15); stroke-width: 5; }
.ring-arc { fill: none; stroke-width: 5; stroke-linecap: round; }
.legend b { font-weight: 600; }

/* sector */
.wedge .points circle { stroke: var(--panel); stroke-width: 1.6; }
.wedge .spokes line.untested { stroke: rgba(42, 41, 40, 0.35); stroke-dasharray: 2 4; }
.wedge .area.current { filter: drop-shadow(0 3px 8px rgba(42, 41, 40, 0.18)); }
.sector-icon { padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); box-sizing: content-box; }
.cluster { transition: background 0.2s; }
.cluster.open { background: rgba(255, 255, 255, 0.18); margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.coverage-bar span { border-radius: 1px; }

/* ---- dashed previous-test line: clickable, with an explanation on the left ---- */
.prev-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; outline: none; }
.shape.prev.hover, .area.prev.hover { stroke: var(--ink); stroke-width: 1.8; }
.prev-hit:focus-visible { stroke: rgba(42, 41, 40, 0.15); }
.wedge-wrap { position: relative; }
.explain {
  position: absolute;
  left: 0;
  top: 18%;
  width: min(250px, 62%);
  z-index: 5;
  background: var(--panel);
  border: 1px solid var(--ink);
  padding: 14px 16px 12px;
  box-shadow: 0 10px 30px rgba(42, 41, 40, 0.2);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.explain h3 { margin: 4px 0 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; padding-right: 18px; }
.explain p { margin: 0 0 8px; }
.explain .close { top: 6px; right: 8px; font-size: 18px; }
.explain-radar { left: 24px; top: 150px; width: 280px; }
.legend-link {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--ink-soft);
  padding: 0;
  cursor: pointer;
}
.legend-link:hover, .legend-link:focus-visible { border-bottom-color: var(--ink); outline: none; }
@media (max-width: 760px) { .explain-radar { left: 16px; top: 120px; width: auto; right: 16px; } }

/* medical: blended score colours */
.md-blend path { fill-opacity: 0.78; stroke-width: 0.8; stroke-opacity: 0.78; }
.md-blend .md-glow { fill: url(#md-glow); stroke: none; fill-opacity: 1; }
[data-mode="medical"] .shape.current { fill: none; stroke: rgba(42, 41, 40, 0.7); filter: drop-shadow(0 2px 6px rgba(42, 41, 40, 0.18)); }
.md-spoke { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; opacity: 1; }

/* ---- average range of all personas (medical) ---- */
.avg-band { cursor: pointer; outline: none; }
.avg-fill { fill: url(#avg-hatch); stroke: rgba(255, 255, 255, 0.7); stroke-width: 0.8; stroke-dasharray: 1 3; }
.avg-mean { fill: none; stroke: #fff; stroke-width: 1.4; opacity: 0.9; pointer-events: stroke; }
.avg-band:hover .avg-fill, .avg-band:focus-visible .avg-fill { stroke: #fff; stroke-width: 1.2; }
label.toggle.disabled { opacity: 0.45; cursor: not-allowed; }
.sector-avg { display: flex; gap: 6px; align-items: center; font-size: 12px; letter-spacing: 0.1em; color: var(--ink-soft); }
.sector-avg input { accent-color: var(--ink); margin: 0; }

/* medical: one calm conic fill instead of striped segments */
.md-conic { width: 1216px; height: 900px; opacity: 0.7; }
.md-blend .md-glow { fill: url(#md-glow); }
[data-mode="medical"] .shape.current { stroke: rgba(42, 41, 40, 0.55); stroke-width: 1.3; }

/* wellness: fixed axis colours, softly blended at the axis boundaries */
.wellness-conic {
  opacity: 0.85;
  -webkit-mask-image: radial-gradient(circle at 608px 468px, rgba(0, 0, 0, 0.75) 0, rgba(0, 0, 0, 0.32) 313px);
  mask-image: radial-gradient(circle at 608px 468px, rgba(0, 0, 0, 0.75) 0, rgba(0, 0, 0, 0.32) 313px);
}
.placeholder-tag {
  display: inline-block;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1px 5px;
  border: 1px dashed var(--ink-soft);
  color: var(--ink-soft);
  vertical-align: 1px;
}
.avg-hit { stroke-width: 12; }

/* ---- medical radar: polar bar chart ---- */
.bar-track { fill: rgba(42, 41, 40, 0.05); stroke: none; }
.bar { stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.8; filter: drop-shadow(0 1px 3px rgba(42, 41, 40, 0.18)); }
.bar-score { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.prev-ticks { cursor: pointer; outline: none; }
.prev-tick { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.tick-hit { fill: none; stroke: transparent; stroke-width: 12; }
.prev-ticks:hover .prev-tick, .prev-ticks:focus-visible .prev-tick { stroke-width: 3; }
[data-mode="medical"] .grid-ring { stroke: rgba(42, 41, 40, 0.14); }
[data-mode="medical"] .grid-spoke:not(.unmeasured) { stroke: rgba(42, 41, 40, 0.1); }
.md-rose + .shape.current { display: none; }

/* ---- medical blob (default) ---- */
.md-halo { opacity: 0.45; }
.md-blob-fill { position: absolute; inset: 0; width: 1216px; height: 900px; filter: blur(26px) saturate(1.05); transform: scale(1.04); transform-origin: 608px 468px; }
.md-blob-rays {
  position: absolute;
  inset: 0;
  width: 1216px;
  height: 900px;
  background:
    radial-gradient(circle at 608px 468px, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0) 150px),
    repeating-conic-gradient(from 0deg at 608px 468px, rgba(255, 255, 255, 0.16) 0deg 0.35deg, rgba(255, 255, 255, 0) 0.35deg 2.4deg);
  -webkit-mask-image: radial-gradient(circle at 608px 468px, #000 0, rgba(0, 0, 0, 0.25) 320px);
  mask-image: radial-gradient(circle at 608px 468px, #000 0, rgba(0, 0, 0, 0.25) 320px);
}
.blob-score { font: 300 44px/1 Georgia, "Times New Roman", serif; letter-spacing: 0.16em; fill: #fff; text-anchor: middle; dominant-baseline: middle; filter: drop-shadow(0 1px 6px rgba(42, 41, 40, 0.35)); pointer-events: none; }
.blob-label { font-size: 10px; letter-spacing: 0.32em; fill: rgba(255, 255, 255, 0.9); text-anchor: middle; pointer-events: none; }
.shape.prev.on-blob { stroke: rgba(42, 41, 40, 0.55); stroke-width: 1.2; }
.avg-soft { fill: rgba(255, 255, 255, 0.28); stroke: rgba(255, 255, 255, 0.75); stroke-width: 0.8; stroke-dasharray: 2 4; }
[data-mode="medical"] .stage-glow { fill: rgba(255, 255, 255, 0.24); }

/* ---- medical side card: Blob | Bars and the key ---- */
.md-side { position: absolute; left: 24px; top: 150px; width: 270px; z-index: 2; }
.md-side:empty { display: none; }
.md-side-card { border: 1px solid var(--grid); background: rgba(255, 255, 255, 0.28); padding: 12px 14px; }
.md-switch { display: inline-flex; border: 1px solid var(--ink); margin: 6px 0 4px; }
.md-switch button { font: 11px/1 var(--font); letter-spacing: 0.14em; background: transparent; color: var(--ink); border: 0; padding: 7px 14px; cursor: pointer; }
.md-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.key { list-style: none; margin: 10px 0 0; padding: 0; }
.key li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.45; letter-spacing: 0.02em; }
.key li.muted-row { color: var(--ink-soft); }
.key .swatch { flex: none; width: 34px; height: 16px; margin-top: 1px; }
.key li.flash { animation: keyflash 1.4s ease; }
@keyframes keyflash { 0%, 60% { background: rgba(255, 255, 255, 0.65); } 100% { background: transparent; } }
.md-side-card .sub { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }
@media (max-width: 760px) { .md-side { position: static; width: auto; margin: 0 0 8px; } }

/* ---- stage layout: a side column for focus, medical view switch, key and explanations ---- */
.stage { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.stage-side { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; min-width: 0; }
.stage-side:not(:has(> :not(:empty):not([hidden]))) { display: none; }
.stage .focus-card, .md-side, .explain-radar { position: static; width: auto; max-width: none; left: auto; top: auto; }
.explain-radar { box-shadow: 0 6px 20px rgba(42, 41, 40, 0.14); }
#radar { justify-self: center; }
@media (max-width: 1100px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  .stage-side { flex-direction: row; flex-wrap: wrap; padding-top: 0; }
  .stage-side > * { flex: 1 1 240px; }
  .stage-side > :empty { display: none; }
}

/* ---- medical blob view: the light AEVUM look of the mock-up ---- */
body[data-mode="medical"][data-mdview="blob"] {
  --bg: #efedec;
  --panel: #f7f5f4;
  --line: rgba(42, 41, 40, 0.1);
  background: radial-gradient(ellipse at 55% 48%, #fdfcfb 0%, #f1eeed 45%, #e4dfdd 100%) fixed;
}
[data-mdview="blob"] #radar .grid,
[data-mdview="blob"] #radar .stage-glow,
[data-mdview="blob"] #radar .labels { display: none; }
[data-mdview="blob"] .md-halo { opacity: 0.32; }
[data-mdview="blob"] .md-blob-fill { filter: blur(30px) saturate(1.25); }
[data-mdview="blob"] .shape.prev.on-blob { stroke: rgba(42, 41, 40, 0.28); stroke-dasharray: 3 5; }
[data-mdview="blob"] .avg-soft { fill: rgba(255, 255, 255, 0.55); stroke: rgba(42, 41, 40, 0.18); }
[data-mdview="blob"] .avg-mean { stroke: rgba(42, 41, 40, 0.25); }
[data-mdview="blob"] .icon-badge { fill: rgba(255, 255, 255, 0.6); stroke: rgba(42, 41, 40, 0.35); }
[data-mdview="blob"] .md-side-card, [data-mdview="blob"] .focus-card { background: rgba(255, 255, 255, 0.55); border-color: rgba(42, 41, 40, 0.12); }
[data-mdview="blob"] .cert-banner { background: rgba(255, 255, 255, 0.6); }
.blob-wordmark {
  font: 400 40px/1 "Didot", "Bodoni 72", Georgia, "Times New Roman", serif;
  letter-spacing: 0.42em;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  filter: drop-shadow(0 1px 8px rgba(42, 41, 40, 0.25));
  pointer-events: none;
}
.blob-label { font-size: 11px; letter-spacing: 0.3em; fill: rgba(255, 255, 255, 0.92); }
.strip-tick { fill: rgba(42, 41, 40, 0.32); }
.strip-tick.empty { fill: rgba(42, 41, 40, 0.14); }
.md-blob-rays {
  background:
    radial-gradient(circle at 608px 468px, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.18) 90px, rgba(255, 255, 255, 0) 200px),
    repeating-conic-gradient(from 0deg at 608px 468px, rgba(255, 255, 255, 0.22) 0deg 0.25deg, rgba(255, 255, 255, 0) 0.25deg 1.8deg);
}

/* ---- wellness: axis colours measured from the AEVUM reference image (blob sectors) ---- */
:root {
  --axis-mind: #d34b2c;     /* top: red-orange */
  --axis-fuel: #e89159;     /* upper right: orange */
  --axis-move: #dfb184;     /* lower right: peach */
  --axis-rhythm: #334e90;   /* lower left: deep blue */
  --axis-engine: #5d253f;   /* upper left: plum */
}
/* wellness follows the light look of the reference image as well */
body[data-mode="wellness"] {
  --bg: #efedec;
  --panel: #f7f5f4;
  --line: rgba(42, 41, 40, 0.1);
  --grid: rgba(42, 41, 40, 0.16);
  background: radial-gradient(ellipse at 55% 48%, #fdfcfb 0%, #f1eeed 45%, #e4dfdd 100%) fixed;
}
[data-mode="wellness"] #radar .stage-glow { fill: rgba(255, 255, 255, 0.55); }
[data-mode="wellness"] .focus-card, [data-mode="wellness"] .sheet-card { background: rgba(255, 255, 255, 0.55); }
[data-mode="wellness"] .icon-badge { fill: rgba(255, 255, 255, 0.7); }
[data-mode="wellness"] .wellness-conic { opacity: 0.95; }
[data-mode="wellness"] .wellness-conic {
  -webkit-mask-image: radial-gradient(circle at 608px 468px, rgba(0, 0, 0, 0.95) 0, rgba(0, 0, 0, 0.62) 313px);
  mask-image: radial-gradient(circle at 608px 468px, rgba(0, 0, 0, 0.95) 0, rgba(0, 0, 0, 0.62) 313px);
  filter: saturate(1.1);
}

/* ---- AEVUM blob, as in the reference: crisp colour wheel, fixed light, white grid inside, halo ---- */
.blob-halo-fo { pointer-events: none; }
.blob-halo {
  width: 1216px; height: 900px;
  filter: blur(70px) saturate(0.9);
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(circle at 608px 468px, #000 0, #000 260px, transparent 470px);
  mask-image: radial-gradient(circle at 608px 468px, #000 0, #000 260px, transparent 470px);
}
.blob-fill, .blob-light, .blob-rays { position: absolute; left: 0; top: 0; width: 1216px; height: 900px; }
.blob-fill { filter: saturate(1.08); }
/* fixed light: dark core towards the upper left, bright light spilling down to the lower right */
.blob-light {
  background:
    conic-gradient(from 0deg at 608px 468px,
      rgba(25, 10, 35, 0.16) 0deg, rgba(25, 10, 35, 0) 55deg,
      rgba(255, 255, 255, 0) 100deg, rgba(255, 255, 255, 0.38) 140deg, rgba(255, 255, 255, 0.62) 168deg,
      rgba(255, 255, 255, 0.4) 195deg, rgba(255, 255, 255, 0) 232deg,
      rgba(25, 10, 35, 0) 255deg, rgba(25, 10, 35, 0.42) 305deg, rgba(25, 10, 35, 0.16) 360deg);
  -webkit-mask-image: radial-gradient(circle at 608px 468px, #000 0, rgba(0, 0, 0, 0.55) 140px, rgba(0, 0, 0, 0.15) 330px);
  mask-image: radial-gradient(circle at 608px 468px, #000 0, rgba(0, 0, 0, 0.55) 140px, rgba(0, 0, 0, 0.15) 330px);
}
/* fine rays from the centre, strongest in the light */
.blob-rays {
  background: repeating-conic-gradient(from 0deg at 608px 468px, rgba(255, 255, 255, 0.2) 0deg 0.22deg, rgba(255, 255, 255, 0) 0.22deg 2.2deg);
  -webkit-mask-image: conic-gradient(from 0deg at 608px 468px, transparent 90deg, #000 160deg, transparent 240deg, transparent 360deg);
  mask-image: conic-gradient(from 0deg at 608px 468px, transparent 90deg, #000 160deg, transparent 240deg, transparent 360deg);
  opacity: 0.8;
}
.blob-grid polygon { fill: none; stroke: rgba(255, 255, 255, 0.24); stroke-width: 1; }
.blob-wordmark { font-size: 42px; letter-spacing: 0.44em; }
/* wellness: the grid outside the blob stays faint, the reference has none */
[data-mode="wellness"] #radar .grid-ring { stroke: rgba(42, 41, 40, 0.08); }
[data-mode="wellness"] #radar .grid-spoke { stroke: rgba(42, 41, 40, 0.06); }
[data-mode="wellness"] #radar .grid-spoke.unmeasured { stroke: rgba(42, 41, 40, 0.3); }
.shape.prev.on-blob { stroke: rgba(42, 41, 40, 0.3); stroke-dasharray: 3 5; stroke-width: 1.1; fill: none; }

/* ---- medical: at a glance + attention callouts ---- */
.glance .glance-overall { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; letter-spacing: 0.04em; line-height: 1.25; }
.glance .glance-overall .num { font: 300 40px/1 Georgia, "Times New Roman", serif; }
.glance .glance-overall small { color: var(--ink-soft); letter-spacing: 0.08em; }
.glance-group { border-top: 1px solid var(--line); padding: 8px 0 4px; }
.glance-head { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.glance-head .count { margin-left: auto; font-variant-numeric: tabular-nums; }
.glance-group.low .glance-head { color: var(--md-low); font-weight: 600; }
.glance-items { display: flex; flex-direction: column; }
.glance-item { all: unset; display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; letter-spacing: 0.02em; cursor: pointer; }
.glance-item b { margin-left: auto; font-variant-numeric: tabular-nums; }
.glance-item:hover, .glance-item:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.glance .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.glance .dot.low { background: var(--md-low); } .glance .dot.mid { background: var(--md-mid); } .glance .dot.good { background: var(--md-good); }
.glance .more { font-size: 11px; color: var(--ink-soft); padding: 2px 0 0 16px; }
.glance .delta { font-size: 11px; width: 34px; flex: none; font-variant-numeric: tabular-nums; }
.glance .delta.up { color: var(--md-good); } .glance .delta.down { color: var(--md-low); }
.callout { cursor: pointer; outline: none; }
.callout circle { fill: var(--md-low); stroke: #fff; stroke-width: 2; }
.callout line { stroke: var(--md-low); stroke-width: 1.2; }
.callout text { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; fill: var(--md-low); dominant-baseline: middle; }
.callout .v { font-weight: 700; }
.callout:hover text, .callout:focus-visible text { text-decoration: underline; }

/* ---- readable data on the blob: grid, labels, cluster dots, marker dots ---- */
[data-mdview="blob"] #radar .grid, [data-mdview="blob"] #radar .labels { display: inline; }
body[data-mode="wellness"] #radar .grid-ring, body[data-mdview="blob"] #radar .grid-ring { stroke: rgba(42, 41, 40, 0.17); }
body[data-mode="wellness"] #radar .grid-spoke, body[data-mdview="blob"] #radar .grid-spoke { stroke: rgba(42, 41, 40, 0.12); }
body[data-mode="wellness"] #radar .grid-spoke.unmeasured, body[data-mdview="blob"] #radar .grid-spoke.unmeasured { stroke: rgba(42, 41, 40, 0.4); }
.blob-grid polygon { stroke: rgba(255, 255, 255, 0.4); }
#radar .dot { r: 4.4; stroke-width: 2; }
.marker-dot { fill: #fff; stroke-width: 1.2; cursor: pointer; }
[data-mode="medical"] .marker-dot { stroke: #fff; stroke-width: 1; }
.marker-dot:hover { r: 4.5; }
.axis-label.status-low { fill: var(--md-low); font-weight: 700; }
.axis-label.status-mid { fill: #8a5e0c; font-weight: 600; }
.axis-label.status-good { fill: #2f6b44; font-weight: 600; }

/* single-marker dots: only on inspection (hovered cluster, or the cluster whose panel is open) */
.marker-dot { opacity: 0; pointer-events: none; transition: opacity 0.18s ease; }
.marker-dot.show { opacity: 1; pointer-events: auto; }
.strip-caption { font-size: 9.5px; letter-spacing: 0.22em; fill: var(--ink-soft); text-anchor: middle; }
.strip-tick { opacity: 0.85; }

/* ---- guidance: medical suggestions, wellness explanations ---- */
.focus-why { margin: 6px 0 4px; font-size: 12px; line-height: 1.45; letter-spacing: 0.02em; }
.focus-tips { margin: 4px 0 6px; padding-left: 16px; font-size: 12px; line-height: 1.5; }
.guide-wrap, .guide { margin: 12px 0 4px; }
.guide-head { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.guide { border-top: 1px solid var(--line); padding-top: 8px; font-size: 12.5px; line-height: 1.5; letter-spacing: 0.02em; }
.guide p { margin: 0 0 4px; }
.guide-title { font-weight: 600; letter-spacing: 0.04em; }
.guide-title b { color: var(--md-low); margin-left: 4px; }
.guide-off { font-size: 11.5px; color: var(--md-low); margin: 2px 0 6px; }
.guide-steps { list-style: none; margin: 0; padding: 0; }
.guide-steps li { display: grid; grid-template-columns: 70px 1fr; gap: 8px; padding: 3px 0; }
.guide-steps li span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); padding-top: 2px; }
.guide-note { font-size: 10.5px; color: var(--ink-soft); letter-spacing: 0.04em; margin-top: 6px; font-style: italic; }
.focus-card.medical .guide { margin-top: 8px; }
/* medical: "At a glance" first, then the focus card with suggestions */
[data-mode="medical"] .stage-side #md-side { order: -1; }
[data-mode="medical"] .stage-side #md-side .md-side-card + .md-side-card { margin-top: 10px; }

/* centre number and empty profile */
.blob-score { font: 300 48px/1 Georgia, "Times New Roman", serif; letter-spacing: 0.06em; }
.empty-cta { cursor: pointer; outline: none; }
.empty-line { font-size: 15px; letter-spacing: 0.18em; fill: #fff; text-anchor: middle; text-transform: uppercase; }
.empty-link { font-size: 14px; letter-spacing: 0.08em; fill: #fff; text-anchor: middle; text-decoration: underline; text-underline-offset: 4px; }
.empty-cta:hover .empty-link, .empty-cta:focus-visible .empty-link { font-weight: 600; }

/* ---- AI assistant (demo) ---- */
.assistant { max-width: 760px; margin: 0 auto 40px; padding: 0 16px; }
.assistant:empty { display: none; }
.as-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; letter-spacing: 0.04em; }
.as-head b { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; margin-left: 6px; }
.as-demo { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; border: 1px dashed var(--ink-soft); padding: 1px 5px; margin-left: 6px; color: var(--ink-soft); }
.as-disclosure { font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; }
.as-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  color: #fff; background: conic-gradient(from 0deg, var(--axis-mind), var(--axis-fuel), var(--axis-move), var(--axis-rhythm), var(--axis-engine), var(--axis-mind)); flex: none; }
.as-log { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; padding: 14px; background: rgba(255, 255, 255, 0.45); border: 1px solid var(--line); }
.as-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 88%; }
.as-msg p { margin: 0; padding: 9px 12px; font-size: 13px; line-height: 1.5; letter-spacing: 0.02em; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); }
.as-msg.me { align-self: flex-end; }
.as-msg.me p { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.as-typing { display: inline-flex; gap: 4px; }
.as-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); animation: as-dot 1s infinite ease-in-out; }
.as-typing i:nth-child(2) { animation-delay: 0.15s; } .as-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes as-dot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.as-chip { font: 12px var(--font); letter-spacing: 0.03em; color: var(--ink); background: rgba(255, 255, 255, 0.55); border: 1px solid var(--grid); padding: 6px 10px; cursor: pointer; }
.as-chip:hover, .as-chip:focus-visible { border-color: var(--ink); outline: none; }
.as-form { display: flex; gap: 8px; }
.as-form input { flex: 1; font: 13px var(--font); color: var(--ink); background: rgba(255, 255, 255, 0.7); border: 1px solid var(--grid); padding: 9px 12px; min-width: 0; }
.as-form input:focus { outline: none; border-color: var(--ink); }
/* domain buttons: axis colour fill, white icon (both versions) */
.domain .icon-badge { filter: drop-shadow(0 2px 5px rgba(42, 41, 40, 0.22)); transition: filter 0.15s; }
.domain:hover .icon-badge, .domain:focus-visible .icon-badge { filter: drop-shadow(0 3px 8px rgba(42, 41, 40, 0.3)) brightness(1.08); }
.domain .icon { stroke-width: 1.5; }
.sector-icon { box-shadow: 0 2px 6px rgba(42, 41, 40, 0.22); }

/* domain button next to every domain name */
.dom-btn { display: inline-grid; place-items: center; border-radius: 50%; flex: none; vertical-align: middle; box-shadow: 0 1px 3px rgba(42, 41, 40, 0.2); }
.dom-btn svg { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dom-btn.lg { width: 40px; height: 40px; } .dom-btn.lg svg { width: 26px; height: 26px; }
.dom-btn.sm { width: 22px; height: 22px; margin-right: 8px; } .dom-btn.sm svg { width: 15px; height: 15px; }
.dom-btn.xs { width: 16px; height: 16px; } .dom-btn.xs svg { width: 11px; height: 11px; stroke-width: 2; }
.panel-title { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.panel-title h2 { margin: 0; }
.eyebrow.with-btn { display: flex; align-items: center; }

/* ---- sector view, same logic as the radar ---- */
body[data-mdview="blob"] .sheet-card, body[data-mode="wellness"] .sheet-card { background: rgba(255, 255, 255, 0.62); }
.wedge .wedge-bg { fill: rgba(255, 255, 255, 0.35); stroke: rgba(42, 41, 40, 0.12); }
.wedge .rings path { fill: none; stroke: rgba(42, 41, 40, 0.15); stroke-width: 0.8; }
.wedge .spokes line { stroke: rgba(42, 41, 40, 0.12); stroke-width: 0.8; }
.wedge .spokes line.untested { stroke: rgba(42, 41, 40, 0.4); stroke-dasharray: 2 4; }
.wedge .area.current { fill: none; stroke: none; filter: none; }
.wedge-fill, .wedge-light, .wedge-rays, .wedge-halo { position: absolute; left: 0; top: 0; width: 400px; height: 380px; }
.wedge-fill { filter: saturate(1.08); }
/* fixed light: a bright glow at the tip, fading out towards the edge, as in the reference */
.wedge-light { background: radial-gradient(circle at 200px 368px, rgba(255, 255, 255, 0.6) 0, rgba(255, 255, 255, 0.18) 90px, rgba(255, 255, 255, 0) 200px),
  linear-gradient(180deg, rgba(25, 10, 35, 0.14) 0%, rgba(25, 10, 35, 0) 45%); }
.wedge-rays { background: repeating-conic-gradient(from -40deg at 200px 368px, rgba(255, 255, 255, 0.2) 0deg 0.3deg, rgba(255, 255, 255, 0) 0.3deg 2.4deg);
  -webkit-mask-image: radial-gradient(circle at 200px 368px, #000 0, rgba(0, 0, 0, 0.2) 280px); mask-image: radial-gradient(circle at 200px 368px, #000 0, rgba(0, 0, 0, 0.2) 280px); }
.wedge .wedge-grid { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.9; }
.halo-fo { pointer-events: none; }
.wedge-halo { left: 60px; top: 40px; filter: blur(40px); opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%); mask-image: linear-gradient(180deg, #000 30%, transparent 95%); }
.wedge .cl-dot { stroke-width: 2; }
.wedge .hits path { fill: transparent; cursor: pointer; }
.wedge .labels text.status-low { fill: var(--md-low); font-weight: 700; }
.wedge .labels text.status-mid { fill: #8a5e0c; font-weight: 600; }
.wedge .labels text.status-good { fill: #2f6b44; font-weight: 600; }
.wedge .avg-soft { fill: rgba(255, 255, 255, 0.5); stroke: rgba(42, 41, 40, 0.18); stroke-width: 0.8; stroke-dasharray: 2 4; }
.wedge .area.prev { fill: none; stroke: rgba(42, 41, 40, 0.35); stroke-dasharray: 3 5; stroke-width: 1.1; }
.wedge .wedge-word { font-size: 26px; }
.wedge .empty-link, .wedge .empty-line { font-size: 12px; }
.meta-score { font: 300 20px/1 Georgia, "Times New Roman", serif; vertical-align: -2px; margin-right: 2px; }
.cl-status { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-left: auto; }
.cl-status.low { color: var(--md-low); font-weight: 700; } .cl-status.mid { color: #8a5e0c; } .cl-status.good { color: #2f6b44; }
.cl-status + .cl-score { margin-left: 8px; }
.sector-assistant { padding: 0; margin: 24px 0 0; }
.sector-assistant .as-msg { max-width: 94%; }
/* halo: fades out radially well before the edge of its container, so no box is visible */
.wedge-halo {
  left: 0; top: 0; width: 520px; height: 460px;
  filter: blur(36px); opacity: 0.38;
  -webkit-mask-image: radial-gradient(ellipse 46% 44% at 50% 52%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 44% at 50% 52%, #000 35%, transparent 100%);
}

/* ---- app look: soft AEVUM backdrop, app window (radar), phone frame (sector), tab bar ---- */
body.app-page[data-mode], body.app-page {
  background:
    radial-gradient(42vw 42vw at 10% 16%, rgba(93, 37, 63, 0.22), transparent 70%),
    radial-gradient(38vw 38vw at 90% 10%, rgba(232, 145, 89, 0.26), transparent 70%),
    radial-gradient(42vw 42vw at 84% 90%, rgba(51, 78, 144, 0.2), transparent 70%),
    radial-gradient(36vw 36vw at 16% 92%, rgba(211, 75, 44, 0.16), transparent 70%),
    linear-gradient(160deg, #efebe9 0%, #e3dedb 100%) fixed;
  min-height: 100vh;
}
.app {
  max-width: 1360px;
  margin: 24px auto;
  background: rgba(250, 248, 247, 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(42, 41, 40, 0.16), 0 2px 6px rgba(42, 41, 40, 0.06);
}
.appbar { display: flex; align-items: baseline; gap: 14px; padding: 20px 24px 2px; }
.brand { font: 400 20px/1 "Didot", "Bodoni 72", Georgia, "Times New Roman", serif; letter-spacing: 0.42em; color: var(--ink); }
.appbar-sub { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.app .bar { padding-top: 10px; }
.app .assistant { margin-bottom: 24px; }

.tabbar {
  position: sticky;
  bottom: 0;
  z-index: 6;
  display: flex;
  justify-content: space-around;
  gap: 4px;
  padding: 10px 16px 14px;
  background: rgba(250, 248, 247, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(42, 41, 40, 0.08);
  border-radius: 0 0 28px 28px;
}
.tab-item { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; color: var(--ink-soft); opacity: 0.72; transition: opacity 0.15s, transform 0.15s; }
.tab-item:hover, .tab-item:focus-visible { opacity: 1; outline: none; transform: translateY(-1px); }
.tab-item.active { opacity: 1; color: var(--ink); }
.tab-label { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.dom-btn.tb, .tab-icon { width: 34px; height: 34px; padding: 0; border: 0; }
.dom-btn.tb svg, .tab-icon svg { width: 22px; height: 22px; display: block; }
.tab-icon { display: grid; place-items: center; border-radius: 50%; background: var(--ink); box-shadow: 0 1px 3px rgba(42, 41, 40, 0.2); }
.tab-icon svg { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.tab-item.active .dom-btn, .tab-item.active .tab-icon { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }

/* sector view: a phone on desktop, the full screen on a phone */
.statusbar { display: none; }
@media (min-width: 520px) {
  .sector-page .device {
    width: 410px;
    height: min(880px, calc(100vh - 48px));
    margin: 24px auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 50px;
    background: rgba(250, 248, 247, 0.86);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.65), 0 0 0 10px rgba(42, 41, 40, 0.08), 0 40px 90px rgba(42, 41, 40, 0.28);
  }
  .statusbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 30px 6px; font-size: 13px; font-weight: 600; color: var(--ink); flex: none; }
  .statusbar .brand { font-size: 12px; letter-spacing: 0.38em; }
  .statusbar svg { width: 54px; height: 12px; fill: currentColor; }
  .device-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
  .device-tabbar { border-radius: 0 0 44px 44px; padding-bottom: 18px; }
  .sector-page .sheet-card { min-height: 0; box-shadow: none; }
}
.sector-page .sector-bar, .sector-page .sheet-card { max-width: none; }
.device-tabbar { position: sticky; bottom: 0; }
@media (max-width: 900px) {
  .app { margin: 0; border-radius: 0; border: 0; }
  .tabbar { border-radius: 0; }
}

/* the radar app fills the whole display; the look of the window stays */
.app {
  max-width: none;
  margin: 0;
  min-height: 100vh;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.app .stage { flex: 1; }
.tabbar { border-radius: 0; }

/* softer glow around the shapes */
.blob-halo { opacity: 0.2; filter: blur(60px) saturate(0.85); }
.wedge-halo { opacity: 0.18; filter: blur(32px); }
[data-mode="wellness"] #radar .stage-glow, [data-mode="medical"] #radar .stage-glow { fill: rgba(255, 255, 255, 0.28); }

/* ---- Mind sub-page ---- */
.mind { max-width: 880px; margin: 0 auto; padding: 8px 24px 32px; flex: 1; }
.mind-hero { text-align: center; padding: 28px 0 12px; }
.mind-hero h1 { font-weight: 400; font-size: 26px; letter-spacing: 0.42em; margin: 14px 0 4px; padding-left: 0.42em; }
.mind-lead { max-width: 560px; margin: 12px auto 18px; font-size: 15px; line-height: 1.55; letter-spacing: 0.02em; }
.dom-btn.hero { width: 64px; height: 64px; box-shadow: 0 6px 18px rgba(42, 41, 40, 0.22); } .dom-btn.hero svg { width: 40px; height: 40px; stroke-width: 1.4; }
.mind-cta { padding: 12px 22px; font-size: 12px; }
.mind-section { margin: 34px 0 0; }
.mind-section h2 { font-weight: 400; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; margin: 0 0 12px; color: var(--ink-soft); }
.mind-text p { font-size: 14.5px; line-height: 1.65; letter-spacing: 0.015em; margin: 0 0 10px; max-width: 720px; }
.mind-points { padding-left: 18px; margin: 0 0 10px; max-width: 720px; }
.mind-points li { font-size: 14.5px; line-height: 1.6; margin-bottom: 10px; letter-spacing: 0.015em; }
.mind-clusters { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mind-card { display: block; text-decoration: none; color: var(--ink); padding: 14px 16px 12px; background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(42, 41, 40, 0.08); border-radius: 16px; transition: transform 0.15s, box-shadow 0.15s; }
.mind-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(42, 41, 40, 0.1); }
.mind-card p { font-size: 12.5px; line-height: 1.5; margin: 6px 0 4px; color: var(--ink-soft); }
.mind-card .name { font-weight: 600; letter-spacing: 0.06em; }
.dot-s { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot-s.low { background: var(--md-low); } .dot-s.mid { background: var(--md-mid); } .dot-s.good { background: var(--md-good); }
.mind-form { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.q-block { border: 1px solid rgba(42, 41, 40, 0.08); border-radius: 16px; padding: 14px 18px 8px; background: rgba(255, 255, 255, 0.55); margin: 0; }
.q-block legend { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); padding: 0 6px; }
.q { padding: 8px 0 12px; border-bottom: 1px solid var(--line); }
.q:last-child { border-bottom: 0; }
.q p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; display: flex; gap: 10px; }
.q-n { font-size: 11px; color: var(--ink-soft); min-width: 18px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.q-options { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 28px; }
.q-options label { cursor: pointer; }
.q-options input { position: absolute; opacity: 0; pointer-events: none; }
.q-options span { display: inline-block; font-size: 12px; letter-spacing: 0.03em; padding: 7px 12px; border: 1px solid var(--grid); border-radius: 999px; background: rgba(255, 255, 255, 0.6); transition: background 0.12s; }
.q-options input:checked + span { background: var(--axis-mind); border-color: var(--axis-mind); color: #fff; }
.q-options input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.q-slider { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding-left: 28px; font-size: 11px; color: var(--ink-soft); }
.q-slider input { accent-color: var(--axis-mind); }
.q-slider output { font: 600 16px var(--font); color: var(--ink); min-width: 22px; text-align: right; }
.q-footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 6px; }
.mind-result { margin-top: 16px; padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(42, 41, 40, 0.08); }
.mind-result h3 { font-weight: 400; font-size: 18px; letter-spacing: 0.06em; margin: 4px 0 10px; }
.mind-result ul { list-style: none; margin: 0 0 12px; padding: 0; }
.mind-result li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.mind-result li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.mind-result li small { color: var(--ink-soft); }
.about-link { text-align: center; margin: 6px 0 0; }

.dom-btn svg { display: block; }
/* marker hover label */
.tooltip { line-height: 1.45; max-width: 260px; white-space: normal; z-index: 8; }
.tooltip .tip-status { font-weight: 600; filter: brightness(1.35); }
.tooltip .tip-cluster { opacity: 0.7; font-size: 11px; }
.wedge-tip { position: absolute; pointer-events: none; }
.marker-dot.show { cursor: help; }

/* abbreviations: dotted underline, explanation on hover / focus */
abbr.gl { text-decoration: none; border-bottom: 1px dotted currentColor; cursor: help; outline: none; }
abbr.gl:focus-visible { background: rgba(42, 41, 40, 0.08); }
.gl-tip {
  position: fixed;
  z-index: 50;
  max-width: 260px;
  padding: 9px 12px;
  background: var(--ink);
  color: #f5f2f0;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(42, 41, 40, 0.25);
  pointer-events: none;
}
.gl-tip b { letter-spacing: 0.08em; margin-right: 2px; }

/* empty profile: readable status line and a clear upload button */
.empty-line { font-size: 13px; font-weight: 600; letter-spacing: 0.24em; fill: #fff; text-anchor: middle; text-transform: uppercase;
  filter: drop-shadow(0 1px 4px rgba(42, 41, 40, 0.55)); }
.empty-cta { cursor: pointer; outline: none; }
.empty-btn { fill: #fff; filter: drop-shadow(0 4px 12px rgba(42, 41, 40, 0.3)); transition: filter 0.15s; }
.empty-btn-text { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.empty-cta:hover .empty-btn, .empty-cta:focus-visible .empty-btn { filter: drop-shadow(0 6px 16px rgba(42, 41, 40, 0.4)); }
.empty-cta:focus-visible .empty-btn { stroke: var(--ink); stroke-width: 2; }
.wedge .empty-btn-text { font-size: 13px; }
.wedge .empty-line { font-size: 11px; }
/* PDF upload: the extracted text, on request */
.pdf-text { margin: 8px 0 4px; font-size: 12px; }
.pdf-text summary { cursor: pointer; color: var(--ink-soft); letter-spacing: 0.04em; }
.pdf-text pre { max-height: 220px; overflow: auto; white-space: pre-wrap; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--line);
  padding: 10px; border-radius: 8px; font: 11px/1.45 ui-monospace, Menlo, monospace; }

/* ---- Mind block in the domain panel and the sector view: questionnaire first, About expands ---- */
.mind-about { margin: 10px 0 14px; text-align: left; }
.mind-about > .pill.primary { display: inline-block; margin-bottom: 12px; }
.mind-about .eyebrow { margin-bottom: 4px; }
.mind-about p { font-size: 12.5px; line-height: 1.55; margin: 0 0 6px; color: var(--ink); }
.mind-about details { margin-top: 2px; }
.mind-about summary { cursor: pointer; font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-soft); list-style: none; }
.mind-about summary::-webkit-details-marker { display: none; }
.mind-about summary::after { content: " ›"; display: inline-block; transition: transform 0.15s; }
.mind-about details[open] summary::after { transform: rotate(90deg); }
.mind-about details[open] summary { margin-bottom: 8px; color: var(--ink); }
.mind-about details p { color: var(--ink-soft); }
.mind-about small { display: block; font-size: 11px; color: var(--ink-faint); margin: 2px 0 8px; }
.mind-about .link-more { font-size: 11.5px; color: var(--ink); }
.about-link .mind-about { max-width: 340px; margin: 10px auto 0; text-align: center; }

/* ---- Wellness or Medical page ---- */
.limits { max-width: 1040px; }
.limits .sub { max-width: 720px; }
.lim-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.lim-card { padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(42, 41, 40, 0.08); transition: box-shadow 0.2s, opacity 0.2s; }
.lim-card h3 { font-weight: 400; font-size: 18px; letter-spacing: 0.03em; margin: 6px 0 8px; }
.lim-card p { font-size: 13.5px; line-height: 1.55; margin: 0 0 12px; color: var(--ink-soft); }
.lim-route { display: flex; flex-wrap: wrap; gap: 6px; }
.lim-route span { font-size: 11px; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); }
.lim-key { font-size: 15px; line-height: 1.6; letter-spacing: 0.015em; max-width: 760px; margin: 18px auto 0; text-align: center; }
.lim-key.small { font-size: 13.5px; text-align: left; margin: 14px 0 0; color: var(--ink-soft); }

/* the active version is lifted, the other one stays readable */
[data-mode="wellness"] .lim-card.col-wellness, [data-mode="medical"] .lim-card.col-medical,
[data-mode="wellness"] .lim-demo-card.col-wellness, [data-mode="medical"] .lim-demo-card.col-medical { box-shadow: 0 0 0 1.5px var(--ink), 0 14px 34px rgba(42, 41, 40, 0.12); background: rgba(255, 255, 255, 0.86); }
[data-mode="wellness"] .lim-card.col-medical, [data-mode="medical"] .lim-card.col-wellness,
[data-mode="wellness"] .lim-demo-card.col-medical, [data-mode="medical"] .lim-demo-card.col-wellness { opacity: 0.62; }
[data-mode="wellness"] .lim-table td.col-wellness, [data-mode="medical"] .lim-table td.col-medical { background: rgba(255, 255, 255, 0.7); color: var(--ink); }
[data-mode="wellness"] .lim-table th.col-wellness, [data-mode="medical"] .lim-table th.col-medical { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.lim-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.lim-chip { font: inherit; font-size: 12px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.5); color: var(--ink); cursor: pointer; }
.lim-chip:hover { border-color: var(--ink-soft); }
.lim-chip[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.lim-test { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; }
.lim-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lim-steps li { display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 10px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.6); }
.lim-steps li.skipped { opacity: 0.4; background: transparent; border: 1px dashed var(--line); }
.lim-steps small { grid-column: 2 / 4; color: var(--ink-soft); font-size: 12px; }
.lim-q { font-size: 11px; letter-spacing: 0.14em; color: var(--ink-soft); }
.lim-qtext { font-size: 13.5px; }
.lim-answer { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ink); }
.lim-answer.yes { background: var(--ink); color: #fff; }
.lim-exit { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.78); border: 1.5px solid var(--ink); }
.lim-exit b { display: block; font-weight: 600; font-size: 15px; margin: 6px 0 6px; letter-spacing: 0.02em; }
.lim-exit p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.lim-exit.medical { border-color: var(--md-low); } .lim-exit.medical b { color: var(--md-low); }
.lim-exit.physician { border-color: var(--physician-alert); }

.lim-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.lim-demo-card { padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(42, 41, 40, 0.08); transition: box-shadow 0.2s, opacity 0.2s; }
.lim-demo-card p { font-size: 13px; line-height: 1.5; margin: 10px 0; }
.lim-demo-head { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: 0.06em; margin: 8px 0 10px; }
.lim-demo-meta { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; }
.lim-scorebar { height: 8px; border-radius: 4px; background: rgba(42, 41, 40, 0.1); overflow: hidden; }
.lim-scorebar span { display: block; height: 100%; }
.lim-row { display: flex; justify-content: space-between; font-size: 13px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 6px; }
.lim-row .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.lim-demo-card .ref-band { margin-top: 8px; }
.lim-focus { margin-top: 12px; font-size: 12.5px; padding: 8px 12px; border-radius: 10px; background: rgba(42, 41, 40, 0.05); }
.lim-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 12px; font-size: 11px; color: var(--ink-soft); }
.lim-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lim-legend .sw.grey { background: var(--reference-band); }
.lim-cert { margin-top: 12px; font-size: 11px; letter-spacing: 0.04em; padding: 6px 10px; border-radius: 8px; background: rgba(194, 57, 47, 0.1); color: var(--md-low); }

.lim-table-wrap { overflow-x: auto; border-radius: 14px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(42, 41, 40, 0.06); }
.lim-table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.45; }
.lim-table th { text-align: left; font-weight: 400; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); padding: 10px 12px; }
.lim-table td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); }
.lim-table td:first-child { color: var(--ink); font-weight: 500; }
.lim-lang td:first-child { font-weight: 400; }

.lim-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.lim-color { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(42, 41, 40, 0.06); display: flex; flex-direction: column; gap: 6px; }
.lim-color.medical { background: rgba(255, 255, 255, 0.35); border-style: dashed; }
.lim-color-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.lim-color-q { font-size: 12px; color: var(--ink-soft); }
.lim-color-vis { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-height: 22px; }
.lim-color-vis .coverage-bar { flex: 1; }
.lim-color small { font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; }
.lim-sw { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-soft); }
.lim-sw i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.lim-arrow { font-size: 14px; }
.lim-tag { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.lim-tag.yes { background: var(--ink); color: #fff; border-color: var(--ink); }
.lim-tag.medical { color: var(--md-low); border-color: currentColor; }
.lim-tag.physician { color: var(--physician-alert); border-color: currentColor; }
.lim-note { font-size: 13px; line-height: 1.55; padding: 12px 16px; border-radius: 12px; background: rgba(42, 41, 40, 0.05); max-width: 760px; }

.lim-tips { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; margin-top: 14px; }
.lim-tips p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; }
.lim-tips small { color: var(--ink-soft); }
.lim-word { display: inline-block; font-size: 12px; padding: 2px 9px; margin-right: 4px; border-radius: 999px; border: 1px solid var(--md-low); color: var(--md-low); text-decoration: line-through; }
.lim-adds { columns: 2; column-gap: 24px; padding-left: 18px; margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; }
.lim-sources .mind-points li { font-size: 13px; }

@media (max-width: 760px) {
  .lim-split, .lim-demo, .lim-test, .lim-tips { grid-template-columns: 1fr; }
  .lim-adds { columns: 1; }
}

/* ---- "Can I do this?" check ---- */
.lim-check-card { max-width: 760px; padding: 20px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(42, 41, 40, 0.08); box-shadow: 0 14px 34px rgba(42, 41, 40, 0.08); }
.lim-input { width: 100%; margin: 10px 0 4px; padding: 12px 14px; font: inherit; font-size: 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.9); color: var(--ink); }
.lim-input:focus { outline: none; border-color: var(--ink); }
.lim-check-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lim-check-actions .pill { padding: 9px 18px; font-size: 12px; }
.lim-check-actions [data-a] { min-width: 84px; }
.lim-progress { display: flex; gap: 4px; margin-bottom: 14px; }
.lim-progress span { flex: 1; height: 4px; border-radius: 2px; background: rgba(42, 41, 40, 0.12); }
.lim-progress span.done { background: var(--ink-soft); }
.lim-progress span.now { background: var(--ink); }
.lim-check-what { font-size: 14px; font-style: italic; margin-bottom: 12px; color: var(--ink); }
.lim-check-q { font-weight: 400; font-size: 19px; letter-spacing: 0.02em; margin: 6px 0 6px; }
.lim-check-help { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 12px; }
.lim-check-hints { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lim-check-hints div { font-size: 12.5px; line-height: 1.5; padding: 10px 12px; border-radius: 12px; background: rgba(42, 41, 40, 0.04); color: var(--ink-soft); }
.lim-check-hints b { display: block; font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.lim-check-unsure { font-size: 11.5px; color: var(--ink-faint); margin: 12px 0 0; }
.lim-steps.compact { margin-bottom: 14px; }
.lim-steps.compact li { padding: 7px 12px; grid-template-columns: 34px 1fr auto; }
.lim-exit .lim-exit-sub { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; margin: 0 0 4px; color: inherit; }
.lim-exit.wellness { border-color: var(--md-good); } .lim-exit.wellness > b { color: var(--md-good); }
.lim-exit.physician > b { color: var(--physician-alert); }
.lim-advice { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.lim-advice li { margin-bottom: 3px; }
.lim-advice li:first-child:only-child, .lim-exit.medical .lim-advice { list-style: none; padding-left: 0; }
.lim-exit.medical .lim-advice { padding-left: 0; }
@media (max-width: 760px) { .lim-check-hints { grid-template-columns: 1fr; } }

/* wellness wedge: the radar blob's look at the apex – rich colour, a dark core on one side, bright light
   spilling over the other, fine rays in the light; all of it fades out towards the rim so the colour stays full there */
.wedge-shade { position: absolute; left: 0; top: 0; width: 400px; height: 380px; display: none; }
[data-mode="wellness"] .wedge-fill { filter: saturate(1.22) contrast(1.04); }
[data-mode="wellness"] .wedge-shade {
  display: block;
  background: conic-gradient(from var(--from) at 200px 368px,
    rgba(25, 10, 35, 0.55) 0deg, rgba(25, 10, 35, 0.22) calc(var(--span) * 0.3), rgba(25, 10, 35, 0) calc(var(--span) * 0.46),
    rgba(255, 255, 255, 0) calc(var(--span) * 0.54), rgba(255, 255, 255, 0.42) calc(var(--span) * 0.76),
    rgba(255, 255, 255, 0.6) calc(var(--span) * 0.9), rgba(255, 255, 255, 0.38) var(--span), rgba(25, 10, 35, 0.55) 360deg);
  -webkit-mask-image: radial-gradient(circle at 200px 368px, #000 0, rgba(0, 0, 0, 0.6) 110px, rgba(0, 0, 0, 0.16) 290px);
  mask-image: radial-gradient(circle at 200px 368px, #000 0, rgba(0, 0, 0, 0.6) 110px, rgba(0, 0, 0, 0.16) 290px);
}
[data-mode="wellness"] .wedge-light {
  background: radial-gradient(circle at 200px 368px, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.16) 70px, rgba(255, 255, 255, 0) 160px);
}
[data-mode="wellness"] .wedge-rays {
  background: repeating-conic-gradient(from var(--from) at 200px 368px, rgba(255, 255, 255, 0.26) 0deg 0.22deg, rgba(255, 255, 255, 0) 0.22deg 2deg);
  -webkit-mask-image: conic-gradient(from var(--from) at 200px 368px, transparent calc(var(--span) * 0.35), #000 calc(var(--span) * 0.8), rgba(0, 0, 0, 0.6) var(--span), transparent 360deg);
  mask-image: conic-gradient(from var(--from) at 200px 368px, transparent calc(var(--span) * 0.35), #000 calc(var(--span) * 0.8), rgba(0, 0, 0, 0.6) var(--span), transparent 360deg);
}
[data-mode="wellness"] .wedge .wedge-grid { stroke: rgba(255, 255, 255, 0.3); }
[data-mode="wellness"] .wedge-halo { opacity: 0.26; filter: blur(34px) saturate(1.15); }

/* ---- Fill the gaps: placeholder card, marker links, panel, demo booking (work in progress) ---- */
.gap-card { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.62); border: 1px dashed rgba(42, 41, 40, 0.22); max-width: 300px; }
.gap-card p { font-size: 12.5px; line-height: 1.5; margin: 6px 0 10px; color: var(--ink-soft); }
.gap-count { font-size: 13px; margin-top: 4px; } .gap-count b { font: 300 24px/1 Georgia, "Times New Roman", serif; margin-right: 4px; }
.gap-bar { height: 5px; border-radius: 3px; margin-top: 8px; background: repeating-linear-gradient(90deg, rgba(42, 41, 40, 0.14) 0 6px, transparent 6px 9px); overflow: hidden; }
.gap-bar span { display: block; height: 100%; background: var(--ink-soft); }
.gap-card .pill.primary { display: inline-block; }
.gap-booked, .gap-booked-tag { font-size: 11.5px; color: var(--tested); font-weight: 600; letter-spacing: 0.02em; }
.gap-booked { margin: -4px 0 10px; }
.gap-wip { font-size: 11.5px; line-height: 1.45; padding: 8px 11px; margin: 10px 0 12px; border-radius: 10px; background: rgba(208, 154, 42, 0.12);
  border: 1px solid rgba(208, 154, 42, 0.45); color: #6d4c0a; }
.gap-wip.small { font-size: 10.5px; padding: 5px 9px; margin: 10px 0 0; letter-spacing: 0.02em; }
.sector-page .gap-card { max-width: none; margin: 14px 0 0; }
.gap-link { font-size: inherit; color: var(--ink); text-decoration: underline dotted; text-underline-offset: 3px; padding: 0; }
.gap-none { color: var(--ink-faint); }
.gap-open { display: block; margin: 2px 0 10px; font-size: 12px; color: var(--ink); text-decoration: underline dotted; text-underline-offset: 3px; padding: 0; }

.gap-filter { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }
.gap-dom { font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.gap-dom small { color: var(--ink-soft); }
.gap-dom.on { background: var(--ink); color: #fff; border-color: var(--ink); } .gap-dom.on small { color: rgba(255, 255, 255, 0.7); }
.gap-dom:disabled { opacity: 0.4; cursor: default; }
.gap-sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.gap-section { margin-top: 18px; }
.gap-h { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.gap-more summary { cursor: pointer; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.gap-tests, .gap-packages, .gap-bookings, .gap-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gap-test { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(42, 41, 40, 0.07); }
.gap-test.focus { box-shadow: 0 0 0 1.5px var(--ink); }
.gap-test .pill { margin-top: 8px; }
.gap-test-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.gap-test-head input { accent-color: var(--ink); }
.gap-test-name { font-size: 13px; font-weight: 600; }
.gap-adds { margin-left: auto; font-size: 11px; color: var(--tested); font-weight: 600; }
.gap-meta { font-size: 11.5px; color: var(--ink-soft); margin: 3px 0 0; line-height: 1.4; }
.gap-markers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.gap-chip { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: rgba(42, 41, 40, 0.06); color: var(--ink-soft); }
.gap-chip.must { background: var(--ink); color: #fff; } .gap-chip.nice { box-shadow: inset 0 0 0 1px var(--ink-soft); color: var(--ink); }
.gap-total { position: sticky; bottom: 0; margin-top: 12px; padding: 12px; border-radius: 12px; background: rgba(250, 248, 247, 0.95); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.gap-total small { display: block; color: var(--ink-soft); font-size: 11px; }
.gap-packages li, .gap-bookings li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.5); font-size: 12.5px; }
.gap-packages small { display: block; color: var(--ink-soft); font-size: 11px; margin-top: 2px; }
.gap-bookings small { color: var(--ink-soft); }
.gap-summary li { display: flex; justify-content: space-between; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--line); }
.gap-summary small { color: var(--ink-soft); }
.gap-field { display: block; margin-top: 14px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.gap-field select { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.gap-days { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.gap-day { font: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.7); color: var(--ink); cursor: pointer; }
.gap-day.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.gap-actions { display: flex; gap: 8px; margin-top: 16px; }
.gap-error { color: var(--md-low); font-size: 12px; }

/* ---- marker database (matrix.html) and sign-in ---- */
.matrix-page { height: 100vh; overflow: hidden; }
.matrix-page .app { height: 100vh; min-height: 0; }
.matrix-page .bar { padding: 10px 24px 6px; }
.mx-user { margin-left: auto; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft); }
.mx-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mx-view { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 24px 20px; overflow: auto; }
.mx-view[data-view="items"] { overflow: hidden; }
.mx-lead { margin: 6px 0 16px; max-width: 760px; color: var(--ink-soft); letter-spacing: 0.02em; }
.mx-hint { font-size: 11.5px; color: var(--ink-soft); letter-spacing: 0.02em; margin: 8px 0 0; }
.mx-error { color: var(--error); font-size: 12px; min-height: 1em; }
.mx-spacer { flex: 1; }
.mx-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.mx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mx-ghost { border-color: transparent; color: var(--ink-soft); }
.mx-ghost:hover { color: var(--ink); }
.mx-check { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft); }
.mx-check input { accent-color: var(--ink); margin: 0; }

.mx-toolbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 8px 0 10px; }
.mx-toolbar input[type="search"], .mx-bulk select, .mx-bulk input {
  font: inherit; color: var(--ink); background: rgba(255, 255, 255, 0.5); border: 1px solid var(--grid); padding: 5px 9px;
}
.mx-toolbar input[type="search"] { width: 250px; border-radius: 999px; padding-left: 14px; }
.mx-toolbar select, .mx-bulk select { background: rgba(255, 255, 255, 0.5); }
.mx-axes { display: flex; flex-wrap: wrap; gap: 4px; }
.mx-axis {
  font: 11px/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--grid); border-radius: 999px; padding: 6px 10px; cursor: pointer;
  display: inline-flex; gap: 6px; align-items: center;
}
.mx-axis.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.mx-axis i, .g-axis i, .mx-cat i, .mx-cat-path i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.mx-count { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft); }

.mx-bulk {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 8px 12px; margin-bottom: 8px;
  background: var(--ink); color: #fff; border-radius: 10px; font-size: 12px;
}
.mx-bulk label { display: inline-flex; gap: 6px; align-items: center; letter-spacing: 0.06em; }
.mx-bulk .pill { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.mx-bulk .pill.mx-ghost { border-color: transparent; color: rgba(255, 255, 255, 0.7); }
.mx-bulk select, .mx-bulk input { background: #fff; max-width: 260px; }
.mx-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.25); }

.mx-table-wrap {
  flex: 1; min-height: 0; overflow: auto; border-radius: 14px; border: 1px solid rgba(42, 41, 40, 0.1);
  background: rgba(255, 255, 255, 0.42);
}
.mx-table { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.mx-table th, .mx-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.mx-table thead th {
  position: sticky; top: 0; z-index: 3; background: #2f2d2c; color: #fff; font-weight: 400; font-size: 11px;
  letter-spacing: 0.06em; white-space: normal; min-width: 90px; max-width: 200px; vertical-align: bottom; line-height: 1.25;
}
.mx-table thead th.calc { background: #5b5856; }
.mx-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mx-table td.long { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.mx-table td.calc { background: rgba(42, 41, 40, 0.045); color: var(--ink-soft); }
.mx-table td.el { font-weight: 600; min-width: 180px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.mx-table td.code { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.mx-table .sel { width: 34px; min-width: 34px; padding-right: 0; position: sticky; left: 0; z-index: 2; }
.mx-table tbody td.sel { background: rgba(244, 241, 239, 0.96); }
.mx-table thead th.sel { z-index: 4; min-width: 34px; }
.mx-table input[type="checkbox"] { accent-color: var(--ink); margin: 0; }
.mx-table tbody tr[data-id] { cursor: pointer; }
.mx-table tbody tr[data-id]:hover td { background-color: rgba(255, 255, 255, 0.6); }
.mx-table tbody tr.open td { background-color: rgba(255, 255, 255, 0.85); }
.mx-table tbody tr.open td.el { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mx-table tr.archived td { opacity: 0.5; text-decoration: line-through; }
.mx-table tr.archived td.sel { text-decoration: none; }
.mx-table .g-axis th, .mx-table .g-cluster th { position: sticky; left: 0; text-align: left; padding: 0; }
.mx-table .g-axis th span, .mx-table .g-cluster th span { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; }
.mx-table .g-axis th { background: rgba(42, 41, 40, 0.09); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; }
.mx-table .g-cluster th { background: rgba(42, 41, 40, 0.035); font-size: 11.5px; letter-spacing: 0.06em; font-weight: 600; color: var(--ink-soft); }
.mx-table .g-cluster th span { padding-left: 28px; }
.mx-empty { color: var(--ink-faint); }
.mx-none { padding: 24px; color: var(--ink-soft); }
.mx-tag { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--grid); color: var(--ink-soft); }
.mx-tag.st-verified { background: var(--ink); border-color: var(--ink); color: #fff; }
.mx-tag.st-estimate { border-color: var(--ink); color: var(--ink); }
.mx-tag.st-placeholder { border-style: dashed; }
.mx-ps { font-size: 11px; }
.mx-ps.ready { color: var(--ink); font-weight: 600; }
.mx-empty-state { max-width: 460px; margin: 60px auto; text-align: center; }
.mx-empty-state h3 { font-weight: 400; letter-spacing: 0.1em; margin: 8px 0; }
.mx-empty-state p { color: var(--ink-soft); }
.mx-empty-state .mx-actions { justify-content: center; }

/* item drawer */
.mx-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; width: min(560px, 100vw); display: flex; flex-direction: column;
  background: rgba(250, 248, 247, 0.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-left: 1px solid rgba(42, 41, 40, 0.1); box-shadow: -24px 0 60px rgba(42, 41, 40, 0.14);
}
.mx-dhead { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 20px 24px 12px; border-bottom: 1px solid var(--line); }
.mx-dhead h3 { margin: 4px 0 2px; font-size: 18px; font-weight: 400; letter-spacing: 0.04em; }
.mx-dmeta { margin: 0; font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; }
.mx-x { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 0 4px; }
.mx-x:hover { color: var(--ink); }
.mx-dbody { flex: 1; overflow-y: auto; padding: 6px 24px 24px; }
.mx-group { padding: 14px 0 6px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.mx-group > .eyebrow, .mx-group > .mx-row, .mx-group > #newcat, .mx-group > .mx-hint, .mx-group > .mx-cat-path { grid-column: 1 / -1; }
.mx-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mx-field.wide, .mx-group .mx-field:has(select#f-sc) { grid-column: 1 / -1; }
.mx-field > span { font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-soft); line-height: 1.3; }
.mx-field > span small { letter-spacing: 0; opacity: 0.8; }
.mx-field input, .mx-field select, .mx-field textarea, .mx-newcat input, .mx-newcat select {
  font: 13px/1.35 var(--font); color: var(--ink); background: rgba(255, 255, 255, 0.7); border: 1px solid var(--grid);
  border-radius: 6px; padding: 6px 8px; width: 100%; min-width: 0;
}
.mx-field textarea { resize: vertical; min-height: 64px; }
.mx-field input.num { text-align: right; font-variant-numeric: tabular-nums; }
.mx-field input:focus, .mx-field select:focus, .mx-field textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.mx-field.changed > span { color: var(--ink); font-weight: 600; }
.mx-field.changed input, .mx-field.changed select, .mx-field.changed textarea { border-color: var(--ink); background: #fff; }
.mx-field.calc output { font-variant-numeric: tabular-nums; padding: 6px 8px; background: rgba(42, 41, 40, 0.05); border-radius: 6px; color: var(--ink-soft); }
.mx-cat-path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.mx-cat-path span { display: inline-flex; align-items: center; gap: 6px; }
.mx-cat-path span + span::before { content: "›"; color: var(--ink-faint); margin-right: 2px; }
.mx-newcat { display: grid; gap: 8px; padding: 12px; margin-top: 4px; border: 1px dashed var(--ink-faint); border-radius: 10px; }
.mx-newcat label { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-soft); }
.mx-hist { display: block; }
.mx-hist summary { cursor: pointer; }
.mx-hist .mx-table { margin-top: 10px; font-size: 11px; }
.mx-dfoot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 24px 16px; border-top: 1px solid var(--line); background: rgba(250, 248, 247, 0.98); }
.mx-hint + .mx-hint { margin-top: 2px; }

/* categories */
.mx-tree { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr) minmax(420px, 2fr); gap: 16px; align-items: start; }
.mx-col { background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(42, 41, 40, 0.1); border-radius: 14px; padding: 14px; }
.mx-col ul { list-style: none; margin: 10px 0; padding: 0; }
.mx-cat { display: flex; gap: 6px; align-items: center; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.mx-cat:hover { background: rgba(255, 255, 255, 0.6); }
.mx-cat.on { background: #fff; box-shadow: 0 1px 3px rgba(42, 41, 40, 0.1); }
.mx-cat input { font: inherit; color: var(--ink); border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 6px; min-width: 0; }
.mx-cat input:hover { border-color: var(--line); }
.mx-cat input:focus { outline: none; border-color: var(--ink); background: #fff; }
.mx-cat .mx-name { flex: 1; }
.mx-cat .mx-code, .mx-add .mx-code { width: 86px; flex: none; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.mx-cat select { font: 11px var(--font); max-width: 150px; border: 1px solid var(--line); background: transparent; padding: 3px 4px; color: var(--ink-soft); }
.mx-n { font-size: 10.5px; color: var(--ink-soft); min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.mx-ord { display: inline-flex; }
.mx-ord button, .mx-del { border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; padding: 2px 4px; font-size: 12px; }
.mx-ord button:hover, .mx-del:hover:not(:disabled) { color: var(--ink); }
.mx-del { font-size: 16px; }
.mx-del:disabled { opacity: 0.25; cursor: default; }
.mx-add { display: flex; gap: 6px; margin-top: 4px; }
.mx-add input { font: inherit; flex: 1; min-width: 0; border: 1px dashed var(--grid); background: transparent; padding: 5px 8px; border-radius: 6px; }

/* lists, import/export */
.mx-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.mx-card { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(42, 41, 40, 0.1); border-radius: 14px; padding: 16px 18px; }
.mx-card h3 { margin: 4px 0 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; }
.mx-card p { color: var(--ink-soft); line-height: 1.5; }
.mx-list ul { list-style: none; margin: 10px 0 6px; padding: 0; }
.mx-list li { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
.mx-list li input { flex: 1; min-width: 0; font: inherit; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.7); padding: 5px 8px; }
.mx-chip { font: 11px var(--font); border: 1px dashed var(--grid); background: transparent; border-radius: 999px; padding: 2px 8px; cursor: pointer; }
.mx-transfer { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; max-width: 1100px; }
.mx-transfer .drop { margin-top: 14px; border-radius: 12px; display: block; }
.mx-report { margin-top: 14px; font-size: 12px; }
.mx-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-soft); }
.mx-stats b { color: var(--ink); font-size: 15px; font-weight: 600; }
.mx-report details { margin-top: 10px; }
.mx-report summary { cursor: pointer; letter-spacing: 0.04em; }
.mx-report ul { margin: 6px 0 0; padding-left: 18px; max-height: 220px; overflow: auto; color: var(--ink-soft); }
.mx-done { font-weight: 600; }
.mx-htable td.long { max-width: 260px; }

.mx-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 12px; letter-spacing: 0.04em;
  transition: opacity 0.2s, transform 0.2s; max-width: calc(100vw - 32px);
}
.mx-toast.show { opacity: 1; transform: translate(-50%, 0); }
.mx-toast.error { background: var(--error); }

@media (max-width: 900px) {
  .mx-view { padding: 0 16px 16px; }
  .matrix-page .bar { padding: 8px 16px 6px; }
  .mx-toolbar input[type="search"] { width: 100%; }
  .mx-tree { grid-template-columns: 1fr; }
  .mx-group { grid-template-columns: 1fr; }
  .mx-dhead, .mx-dbody, .mx-dfoot { padding-left: 16px; padding-right: 16px; }
}

.login-page { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-card {
  width: min(380px, 100%); padding: 36px 32px 28px; text-align: center; border-radius: 24px;
  background: rgba(250, 248, 247, 0.8); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 30px 80px rgba(42, 41, 40, 0.16);
}
.login-card .brand { font-size: 26px; }
.login-card .appbar-sub { margin: 10px 0 24px; }
.login-card form { display: grid; gap: 14px; text-align: left; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-soft); }
.login-card input { font: 14px var(--font); padding: 9px 11px; border: 1px solid var(--grid); border-radius: 8px; background: rgba(255, 255, 255, 0.8); }
.login-card input:focus { outline: none; border-color: var(--ink); }
.login-card .pill.primary { padding: 11px; border-radius: 999px; font-size: 12px; }
.login-note { font-size: 11px; color: var(--ink-soft); margin: 18px 0 0; line-height: 1.5; }
.mx-table td.el, .mx-table thead th.el { position: sticky; left: 34px; z-index: 1; }
.mx-table td.el { background: rgb(246, 244, 242); box-shadow: 1px 0 0 var(--line); }
.mx-table thead th.el { z-index: 4; }
.mx-table tbody tr[data-id]:hover td.el, .mx-table tbody tr.open td.el { background: #fff; }
.matrix-page .tabs { overflow-x: auto; scrollbar-width: none; }
.matrix-page .tab { white-space: nowrap; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 56px; }
.pw-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 10.5px var(--font); letter-spacing: 0.1em; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; padding: 4px 6px; }
.pw-show:hover { color: var(--ink); }
.pw-checks { list-style: none; margin: -4px 0 0; padding: 0; font-size: 11.5px; color: var(--ink-soft); }
.pw-checks li::before { content: "○ "; }
.pw-checks li.ok { color: var(--ink); }
.pw-checks li.ok::before { content: "✓ "; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.login-card .pill.primary:disabled { opacity: 0.4; }
.mx-dbswitch { display: inline-flex; border: 1px solid var(--grid); border-radius: 999px; overflow: hidden; }
.mx-dbswitch button { font: 11px/1 var(--font); letter-spacing: 0.12em; border: 0; background: transparent; color: var(--ink-soft); padding: 7px 12px; cursor: pointer; }
.mx-dbswitch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.mx-demo .mx-dbswitch button[data-db="demo"][aria-pressed="true"] { background: #8a5a14; }
.mx-demo-banner { margin: 0 24px 8px; padding: 8px 12px; border-radius: 10px; font-size: 12px; line-height: 1.45;
  background: rgba(214, 160, 60, 0.16); border: 1px solid rgba(160, 110, 30, 0.35); color: #5a3b0c; }
.mx-table td.fill { font-style: italic; color: #8a5a14; }
.mx-fill-tag { font-style: italic; font-weight: 400; color: #8a5a14; letter-spacing: 0.02em; }
@media (max-width: 900px) { .mx-demo-banner { margin: 0 16px 8px; } }
.mx-srcs { grid-column: 1 / -1; margin-top: 4px; }
.mx-srcs-h { font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-soft); }
.mx-srcs ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.mx-srcs li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 12px; line-height: 1.4; padding: 5px 8px; background: rgba(255, 255, 255, 0.55); border-radius: 6px; }
.mx-srcs li small { color: var(--ink-soft); font-size: 10.5px; }
.mx-srcs li .mx-src-st { border: 1px solid var(--grid); border-radius: 999px; padding: 0 6px; }
.mx-srcs li a { color: var(--ink); font-size: 11px; margin-left: auto; }
.mx-srcs .mx-row input { font: 12px var(--font); flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--grid); border-radius: 6px; background: rgba(255, 255, 255, 0.7); }
.mx-stable td.long { max-width: 340px; }
.mx-stable td a { color: var(--ink); }
.mx-stable tr[data-src] { cursor: pointer; }
.mx-stable tr[data-src]:hover td { background: rgba(255, 255, 255, 0.6); }
.mx-stable td input { font: 12px var(--font); width: 100%; min-width: 70px; padding: 4px 6px; border: 1px solid var(--grid); border-radius: 4px; background: #fff; }
.mx-src-hint { margin: -2px 0 8px; }

/* ---- language switch (i18n.js) ---- */
.lang-switch { display: inline-flex; border: 1px solid var(--grid); border-radius: 999px; overflow: hidden; flex: none; }
.lang-switch button { font: 10.5px/1 var(--font); letter-spacing: 0.14em; border: 0; background: transparent; color: var(--ink-soft); padding: 6px 9px; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.appbar .lang-switch { margin-left: auto; align-self: center; }
.appbar .mx-user + .lang-switch, .appbar .mx-user ~ .lang-switch { margin-left: 12px; }
.login-card .lang-switch { margin: 18px auto 0; }
.lang-switch.floating { position: fixed; top: 12px; right: 12px; z-index: 50; background: rgba(250, 248, 247, 0.9); }
.cert-banner:lang(de)::before, :lang(de) .cert-banner::before { content: "Medizinische Version B7  "; }