:root{
  --navy:#002147; --navy-2:#0B3366; --navy-3:#1F4E8C; --brand:#002147; --brand-lt:#4C8DF0;
  --bg:#050B14; --surface:#0E1826; --surface-2:#0A1420; --line:#1C2C40; --line-2:#2A3E56;
  --ink:#F2F5FA; --ink-2:#B9C6D9; --ink-3:#8598AF;
  --others:#8FC1FF; --self:#E0B35F; --self-soft:rgba(224,179,95,.16);
  --good:#34E6A8; --good-bg:rgba(52,230,168,.14); --warn:#FFD27A; --warn-bg:rgba(255,210,122,.14); --bad:#FF9B90; --bad-bg:rgba(255,155,144,.14); --info-bg:rgba(143,193,255,.12); --info-ring:#8FC1FF;
  --heat:47,111,208; --on-heat-hi:#04142B; --focus:#8FC1FF;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans','Helvetica Neue',Arial,system-ui,sans-serif;
  --num-font:var(--sans);
  --shadow-sm:0 1px 2px rgba(0,0,0,.24),0 1px 1px rgba(0,0,0,.18);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5),0 2px 8px -2px rgba(0,0,0,.3);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6),0 4px 12px -2px rgba(0,0,0,.35);
  --r-md:16px; --r-lg:24px;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* explicit light mode is an opt-out, reached via the existing theme switch —
   the product itself is dark by default, the way Whoop/Oura/Apple Health are. */
:root[data-theme="light"]{
  --navy:#002147; --navy-2:#0B3366; --navy-3:#1F4E8C; --brand:#002147; --brand-lt:#2F6FD0;
  --bg:#F3F5F9; --surface:#FFFFFF; --surface-2:#F8FAFC; --line:#DCE3EE; --line-2:#C3CFE0;
  --ink:#0F1E33; --ink-2:#39506E; --ink-3:#566B89;
  --others:#002147; --self:#B8893C; --self-soft:rgba(184,137,60,.14);
  --good:#166A4B; --good-bg:#E4F3EC; --warn:#8A5508; --warn-bg:#FBF0DC; --bad:#9A2F28; --bad-bg:#F8E5E3; --info-bg:#E6EEF9; --info-ring:#2F6FD0;
  --heat:0,33,71; --on-heat-hi:#FFFFFF; --focus:#2F6FD0; color-scheme:light;
  --shadow-sm:0 1px 2px rgba(15,30,51,.04),0 1px 1px rgba(15,30,51,.03);
  --shadow-md:0 8px 24px -8px rgba(15,30,51,.14),0 2px 8px -2px rgba(15,30,51,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,30,51,.22),0 4px 12px -2px rgba(15,30,51,.08);
}
html{height:100%;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.005em;margin:0;color:var(--ink);font-variant-numeric:lining-nums}
h1{font-size:clamp(28px,4vw,38px);line-height:1.15}
h2{font-size:25px;line-height:1.2}
h3{font-size:20px;line-height:1.25}
h4,h3.h4{font-size:16.5px;font-family:var(--sans);font-weight:700;letter-spacing:0}
p{margin:0 0 .8em}
a{color:var(--focus)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
/* Themed tooltip, replacing the browser's own unstyled title tooltip (a
   plain white box that clashed badly in dark mode). Elements carry the text
   in data-tip (shown here) and aria-label (read by screen readers), not
   title, so the native tooltip never fires alongside this one. Colours are
   inverted from the page's own ink/background, which reads correctly in
   both themes without a separate light/dark override. */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:var(--ink);color:var(--bg);font:600 12px/1.4 var(--sans);padding:6px 10px;border-radius:6px;
  max-width:240px;width:max-content;white-space:normal;text-align:center;box-shadow:var(--shadow-md);z-index:60;pointer-events:none;
}
.muted{color:var(--ink-3)} .small{font-size:13.5px} .tiny{font-size:12.5px}
.num{font-family:var(--num-font);font-weight:700;font-variant-numeric:lining-nums tabular-nums}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--navy);color:#fff}
.hdr-in{max-width:1240px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hdr img{height:20px;width:auto;display:block}
.hdr .prod{font-family:var(--serif);font-size:16px;color:#C9D7EC;padding-left:18px;border-left:1px solid rgba(255,255,255,.25)}
.tabs{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.tab{background:none;border:0;color:#C9D7EC;padding:8px 14px;border-radius:6px;cursor:pointer;font-weight:500}
.tab:hover{background:rgba(255,255,255,.08);color:#fff}
.tab[aria-current="page"]{background:#fff;color:var(--navy)}
.mode{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#C9D7EC}
.sw{appearance:none;width:34px;height:20px;border-radius:12px;background:rgba(255,255,255,.28);position:relative;cursor:pointer;border:0;transition:background .15s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.sw[aria-checked="true"]{background:var(--self)} .sw[aria-checked="true"]::after{transform:translateX(14px)}
.wrap{max-width:1240px;margin:0 auto;padding:28px 20px 72px}
.banner{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:8px;background:var(--info-bg);border:1px solid var(--line-2);margin-bottom:20px;font-size:14px}
.banner.warn{background:var(--warn-bg);border-color:transparent} .banner.bad{background:var(--bad-bg);border-color:transparent} .banner.good{background:var(--good-bg);border-color:transparent}
.banner b{font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;border:1px solid var(--navy);padding:9px 18px;border-radius:7px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--navy-2)} .btn[disabled]{opacity:.45;cursor:not-allowed}
:root[data-theme="dark"] .btn, :root:not([data-theme="light"]) .btn.pri{}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:5px 11px;font-size:13px} .btn.danger{background:var(--bad);border-color:var(--bad)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn:not(.ghost):not(.danger){background:#2F6FD0;border-color:#2F6FD0;color:#fff}}
:root[data-theme="dark"] .btn:not(.ghost):not(.danger){background:#2F6FD0;border-color:#2F6FD0;color:#fff}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}

/* panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px;box-shadow:var(--shadow-sm)}
.panel + .panel{margin-top:18px}
.grid2>.panel,.grid-rep>.panel{margin-top:0}
.grid2,.grid-rep{margin-top:18px}
.grid2+.panel,.grid-rep+.panel,.panel+.grid2,.panel+.grid-rep{margin-top:18px}
.panel h3,.panel h2.ph{margin-bottom:4px}
.panel .sub{color:var(--ink-3);font-size:13.5px;margin-bottom:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-rep{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.15fr);gap:18px;align-items:start}
@media (max-width:900px){.grid2,.grid-rep{grid-template-columns:1fr}}
.sec{margin-top:34px}
.sec > h2{margin-bottom:12px}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.pagehead p{margin:6px 0 0;color:var(--ink-2);max-width:66ch}

/* KPI strip */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:22px}
.kpi{padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-sm);transition:box-shadow .15s ease,transform .15s ease}
.kpis .kpi[data-act]{cursor:pointer}
.kpis .kpi[data-act]:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.kpi .v{font-family:var(--num-font);font-size:30px;line-height:1.1;font-variant-numeric:lining-nums}
.kpi .l{font-size:13px;color:var(--ink-3);margin-top:4px;font-weight:600}
.kpi .d{font-size:12.5px;color:var(--ink-2);margin-top:6px}

/* chips */
.chip{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.chip.b4,.chip.good{background:var(--good-bg);color:var(--good);border-color:transparent}
.chip.b3{background:var(--info-bg);color:var(--ink);border-color:transparent}
.chip.b2,.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.chip.b1,.chip.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}

/* tables */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.tbl th{font-weight:600;text-align:left;color:var(--ink-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;padding:0 12px 10px;white-space:nowrap}
.tbl td{padding:13px 12px;border-top:1px solid var(--line);vertical-align:middle}
.tbl tr:first-child td{border-top:0}
.tbl tr td:first-child{border-radius:10px 0 0 10px} .tbl tr td:last-child{border-radius:0 10px 10px 0}
.tbl .name{font-weight:600}
.tbl-wrap{overflow-x:auto}
.rowlink{cursor:pointer} .rowlink td{transition:background .12s ease} .rowlink:hover td{background:var(--surface-2)}
.pbar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;min-width:70px} .pbar i{display:block;height:100%;background:var(--navy-3)}
/* heatmap: generously-sized rounded colour tiles in a CSS grid, not a
   bordered spreadsheet table. Scrolls horizontally as one unit on narrow
   viewports so row labels and cells never fall out of sync. */
.hgrid{--hcols:8;overflow-x:auto;padding-bottom:2px}
.hg-row{display:grid;grid-template-columns:minmax(150px,210px) repeat(var(--hcols),minmax(76px,1fr));gap:10px;align-items:stretch;min-width:calc(210px + var(--hcols) * 86px)}
.hg-row + .hg-row{margin-top:10px}
.hg-head{font-weight:700;color:var(--ink-3);font-size:12px;text-transform:uppercase;letter-spacing:.3px}
.hg-head .hg-col{text-align:center;align-self:end;padding-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hg-lbl{font-weight:600;font-size:15px;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.hg-cell{text-align:center;padding:16px 6px;min-height:64px;border-radius:12px;font-family:var(--num-font);font-weight:700;font-size:19px;font-variant-numeric:lining-nums tabular-nums;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s ease}
.hg-cell:hover{transform:translateY(-1px)}
.hg-cell.na{background:var(--surface-2);color:var(--ink-3);font-weight:600;font-size:16px}
.hg-cell.rk{background:var(--surface-2);color:var(--ink)}
.hg-cell.flag{box-shadow:inset 0 0 0 2px var(--warn)}
.hg-cell.flag.bad{box-shadow:inset 0 0 0 2px var(--bad)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3);margin-top:12px;align-items:center}
.legend span.sw2{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* cohort cards: one visual profile per person, in place of a response
   table plus a separate heatmap, so a growing list of employees reads as
   people to open rather than a spreadsheet to audit. */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.ccard:hover,.ccard:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--navy-3);outline:none}
.ccard-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.ccard-av{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 auto}
.ccard-id{flex:1;min-width:0}
.ccard-name{font-weight:700;font-size:15px}
.ccard-role{font-size:12.5px;color:var(--ink-3)}
.ccard-score{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;min-height:26px}
.ccard-score b{font-family:var(--num-font);font-size:26px;font-weight:700}
.ccard-score small{font-size:13px;color:var(--ink-3)}
.ccard-band{font-size:12px;color:var(--ink-3)}
.ccard-prog{display:flex;gap:6px;margin-bottom:14px}
.ccard-prog span{flex:1;height:5px;border-radius:3px;background:var(--line)}
.ccard-prog span.on{background:var(--navy-3)}
.ccard-prog span.part{background:linear-gradient(90deg,var(--navy-3) 50%,var(--line) 50%)}
.ccard-tags{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-height:20px}
.ccard-tag{display:flex;align-items:center;gap:7px;font-size:12.5px}
.ccard-tag i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.ccard-tag i.g{background:var(--good)} .ccard-tag i.w{background:var(--warn)} .ccard-tag i.i{background:var(--info-ring)}
.ccard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.ccard-cta{font-size:12.5px;font-weight:600;color:var(--focus);display:flex;align-items:center;gap:5px;white-space:nowrap}
.ccard:hover .ccard-cta svg{transform:translateX(2px)}
.ccard-cta svg{transition:transform .15s ease}

/* report */
.rep-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:20px}
.rep-head h1{margin-bottom:4px}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}
.sum{padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-sm)}
.sum .l{font-size:12.5px;color:var(--ink-3)}
.sum .v{font-family:var(--num-font);font-size:34px;line-height:1.1;margin:2px 0 6px}
.sum .v small{font-size:15px;color:var(--ink-3)}
.sum .d{font-size:12.5px;color:var(--ink-2)}
.dbl{display:grid;grid-template-columns:140px 1fr 150px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.dbl:last-child{border-bottom:0}
.dbl .nm{font-size:14px;font-weight:600;line-height:1.25}
.trk{position:relative;height:26px}
.trk::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:var(--line-2)}
.trk .tk{position:absolute;top:8px;width:1px;height:10px;background:var(--line-2)}
.trk .gap{position:absolute;top:11px;height:4px;background:var(--self-soft);border-radius:3px}
.trk .avg{position:absolute;top:2px;bottom:2px;width:0;border-left:2px dashed var(--ink-3)}
.trk .cib{position:absolute;top:9px;width:2px;height:14px;background:var(--ink);opacity:.5;border-radius:1px}
.trk .o{position:absolute;top:5px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--others);border:2px solid var(--surface)}
.trk .s{position:absolute;top:6px;width:13px;height:13px;margin-left:-6.5px;background:var(--self);transform:rotate(45deg);border:2px solid var(--surface)}
.trk.spark-wrap::before{display:none}
.trk.spark-wrap{display:flex;align-items:center}
.spark{width:100%;height:26px;display:block;overflow:visible}
.spark path{stroke:var(--others);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.spark circle{fill:var(--others)}
.dbl .sc{text-align:right;min-width:0;font-size:13px;color:var(--ink-2);line-height:1.3}
.dbl .sc b{font-family:var(--num-font);font-size:19px;color:var(--ink);font-weight:500}
.key{display:flex;gap:18px;font-size:12.5px;color:var(--ink-3);margin-bottom:6px;flex-wrap:wrap}
.key i{display:inline-block;vertical-align:-2px;margin-right:6px}
.key .ko{width:12px;height:12px;border-radius:50%;background:var(--others)}
.key .ks{width:10px;height:10px;background:var(--self);transform:rotate(45deg)}
.key .kc{width:2px;height:12px;background:var(--ink);opacity:.5;margin-right:8px}
.axis{display:grid;grid-template-columns:140px 1fr 150px;gap:12px;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.axis .ax{display:flex;justify-content:space-between}
.sv text{font-family:var(--sans);font-size:20px;font-weight:600;fill:var(--ink-2)}
.sv .ring{fill:none;stroke:var(--line);stroke-width:1} .sv .axl{stroke:var(--line);stroke-width:1}
.sv .others{fill:var(--others);fill-opacity:.15;stroke:var(--others);stroke-width:2.2}
.sv .selfp{fill:var(--self);fill-opacity:.07;stroke:var(--self);stroke-width:2;stroke-dasharray:6 4}
.sv .rl{fill:var(--ink-3);font-size:16px}
.stand{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.stand h4,.stand h3.h4{margin-bottom:8px}
.stand ul{list-style:none;margin:0;padding:0}
.stand li{padding:10px 0 10px 14px;border-left:3px solid var(--line-2);margin-bottom:10px;font-size:14px}
.stand li.g{border-color:var(--good)} .stand li.w{border-color:var(--warn)} .stand li.r{border-color:var(--bad)} .stand li.s{border-color:var(--self)}
.stand li b{display:block;font-weight:600}
.hbar{display:grid;grid-template-columns:minmax(150px,1.5fr) 3fr 44px;gap:12px;align-items:center;padding:6px 0;font-size:13.5px}
.hbar .t{height:8px;background:var(--line);border-radius:5px;overflow:hidden}.hbar .t i{display:block;height:100%;background:var(--navy-3);border-radius:5px}
.hbar.rk .t i{background:var(--warn)} .hbar.rk.hi .t i{background:var(--bad)}
.hbar .v{text-align:right;font-family:var(--num-font);font-size:15px}
.plan{display:grid;gap:18px}
.plan .item{border-top:1px solid var(--line);padding-top:14px}
.plan ol{margin:8px 0 0;padding-left:20px}
.plan li{margin-bottom:4px}
.quote{border-left:3px solid var(--line-2);padding:4px 0 4px 14px;margin:0 0 12px;font-family:var(--serif);font-size:16px;color:var(--ink);line-height:1.45}
.foot{font-size:12.5px;color:var(--ink-3);margin-top:26px;max-width:80ch}
.stat3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.stat3 .v{font-family:var(--num-font);font-size:26px;line-height:1.1}

/* questionnaire */
.qwrap{max-width:820px;margin:0 auto}
.steps{display:flex;gap:4px;margin:0 0 22px}
.steps i{flex:1;height:4px;border-radius:3px;background:var(--line)} .steps i.on{background:var(--navy-3)} .steps i.now{background:var(--self)}
.qhead{margin-bottom:6px}
.qhead .k{font-size:13px;color:var(--ink-3);margin-bottom:6px}
.stem{font-family:var(--serif);font-size:19px;margin:22px 0 4px}
.dom{margin-top:26px}
.dom h3,.dom h2.ph{margin-bottom:2px}
.dom .dd{font-size:13.5px;color:var(--ink-3);margin-bottom:8px}
.q{padding:14px 0;border-bottom:1px solid var(--line)}
.q.miss{background:linear-gradient(90deg,var(--warn-bg),transparent);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:6px}
.q .qt{margin-bottom:10px;font-size:15.5px}
.lik{display:flex;gap:6px;flex-wrap:wrap}
.lik button{flex:1;min-width:52px;padding:9px 6px;border:1px solid var(--line-2);background:var(--surface);border-radius:7px;cursor:pointer;font-weight:600;color:var(--ink-2)}
.lik button:hover{border-color:var(--navy-3)}
.lik button[aria-checked="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lik button[aria-checked="true"]{background:#2F6FD0;border-color:#2F6FD0}}
:root[data-theme="dark"] .lik button[aria-checked="true"]{background:#2F6FD0;border-color:#2F6FD0}
.lik button.na{flex:0 0 auto;padding:9px 12px;font-weight:500;font-size:13px}
.lik .lab{display:block;font-weight:400;font-size:11px;line-height:1.15;margin-top:3px}
@media (max-width:560px){.lik .lab{display:none}}
.ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);margin-top:5px}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-weight:600;font-size:13.5px}
input[type=text],input[type=number],select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:7px;padding:9px 11px;width:100%}
textarea{min-height:92px;resize:vertical}
.sjt{padding:18px 0;border-bottom:1px solid var(--line)}
.sjt h4,.sjt h3.h4{margin-bottom:4px}
.sjt.miss{background:linear-gradient(90deg,var(--warn-bg),transparent);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:6px}
.opts{display:grid;gap:8px;margin-top:12px}
.opt{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface)}
.opt .pk{display:flex;gap:6px}
.pkb{border:1px solid var(--line-2);background:var(--surface-2);border-radius:6px;padding:5px 10px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.pkb[aria-pressed="true"].best{background:var(--good-bg);color:var(--good);border-color:var(--good)}
.pkb[aria-pressed="true"].worst{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.opt .ot b{margin-right:8px}
.qnav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;align-items:center;flex-wrap:wrap}
.consent{font-size:13.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:18px 0}
.consent ul{margin:6px 0 0;padding-left:18px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:10px;max-height:120px;overflow:auto}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px;font-size:14px;z-index:50;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.empty{padding:36px 20px;text-align:center;color:var(--ink-2);border:1px dashed var(--line-2);border-radius:10px;background:var(--surface)}
.empty h3,.empty h2.ph{margin-bottom:6px}
.mtable{width:100%;border-collapse:collapse;font-size:14px}
.mtable th{text-align:left;font-size:12.5px;color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--line-2)}
.mtable td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.mtable td:first-child{font-weight:600;white-space:nowrap}
.lead-edit{display:grid;grid-template-columns:1.3fr 1.3fr 1fr .8fr 1.2fr auto;gap:8px;margin-bottom:10px;align-items:start}
.tcell{display:flex;flex-direction:column;gap:5px;align-items:flex-start;padding-top:3px}
.code-s{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;letter-spacing:.02em}
@media (max-width:760px){.lead-edit{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  .hdr,.no-print,.tabs,.printbar,.skip{display:none!important}
  html,body{background:#fff;color:#000}
  :root{padding:0}
  .wrap{padding:0;max-width:none}
  /* Force single-column layout regardless of page width, so nothing is
     squashed or clipped off the printable area. */
  .grid2,.grid-rep,.stand{grid-template-columns:1fr!important}
  .dbl{grid-template-columns:140px 1fr 130px}
  /* Preserve chip/band background colours: browsers strip these by
     default when printing unless explicitly told to keep them. */
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
  /* Keep charts, score rows and cards from splitting across a page break. */
  .panel,.summary,.sum,.dbl,.stand li,.hbar,.item,.mtable tr{break-inside:avoid;page-break-inside:avoid}
  .panel{border-color:#ccc}
  .sv{width:100%;height:auto;max-width:420px}
  a{color:#000;text-decoration:none}
  .chip{border:1px solid #999}
}

.qhead h1{margin-bottom:10px}
@media (max-width:700px){
  .hdr{position:static}
  .hdr-in{gap:10px 12px;padding:10px 14px}
  .hdr .prod{display:none}
  .mode{margin-left:auto}
  .tabs{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab{white-space:nowrap;padding:7px 11px}
  .wrap{padding:20px 14px 56px}
  .panel{padding:18px 16px}
  .dbl{grid-template-columns:1fr;gap:4px}
  .dbl .sc{text-align:left}
  .axis{display:none}
}

/* ===== production additions ===== */
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{font:inherit;padding:9px 11px;border:1px solid var(--line-2);border-radius:7px;background:var(--surface);color:var(--ink);width:100%;min-height:40px}
textarea{min-height:92px;resize:vertical;line-height:1.5}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:8px 14px;z-index:100;border-radius:0 0 6px 0}.skip:focus{left:0}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px}.chk input{width:auto;min-height:0;margin-top:4px}
.login{max-width:420px;margin:8vh auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:32px;box-shadow:0 10px 40px rgba(0,20,50,.08)}
.login img{height:24px;margin-bottom:22px;display:block}.login h1{font-size:26px;margin-bottom:6px}
.err{color:var(--bad);font-size:13.5px;margin:8px 0}
.modal-back{position:fixed;inset:0;background:rgba(0,10,25,.55);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:32px 14px;overflow:auto}
.modal{background:var(--surface);border-radius:12px;max-width:860px;width:100%;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.35);border:1px solid var(--line)}
.modal h2{margin-bottom:4px}.modal .mhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.linkbox{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;word-break:break-all;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.stack>*+*{margin-top:14px}
.btn.sm.ghost{padding:4px 10px}
.printbar{position:sticky;top:0;background:var(--navy);padding:10px 20px;text-align:right;z-index:10}
.refs li{margin-bottom:6px;font-size:13.5px}
.mtable td,.mtable th{vertical-align:top}
.rep-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.backlink{background:none;border:0;color:var(--focus);cursor:pointer;padding:0;margin-bottom:14px;font-weight:600}
.rt-rows{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.rt-row{display:grid;grid-template-columns:1.3fr 1.3fr 1fr auto;gap:8px;align-items:center}
.rt-row2{grid-template-columns:1.3fr 1.3fr auto}
.rt-row .rmv{color:var(--ink-3);font-size:16px;line-height:1;padding:5px 10px}
@media (max-width:600px){.rt-row,.rt-row2{grid-template-columns:1fr}}
.narrative{max-width:74ch}
.narrative p{margin:0 0 14px;font-size:15.5px;line-height:1.7;font-family:var(--serif)}
.narrative p:last-child{margin-bottom:0}

/* ===== landing page ===== */
.lp-hero{background:var(--navy);color:#fff;padding:0 0 70px}
.lp-nav{max-width:1120px;margin:0 auto;padding:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lp-nav img{height:22px}.lp-nav .sp{flex:1}.lp-nav a{color:#C9D7EC;text-decoration:none;font-weight:500}.lp-nav a:hover{color:#fff}
.lp-in{max-width:1120px;margin:0 auto;padding:0 20px}
.lp-hero h1{color:#fff;font-size:clamp(34px,5.4vw,58px);max-width:820px;margin:54px 0 18px;line-height:1.08}
.lp-hero p.lead{font-size:19px;max-width:660px;color:#C9D7EC}
.lp-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.lp-hero .btn{background:#fff;color:var(--navy);border-color:#fff}.lp-hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.lp-sec{padding:64px 0}.lp-sec.alt{background:var(--surface)}
.lp-sec h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:10px}.lp-sec .intro{color:var(--ink-2);max-width:700px;margin-bottom:30px;font-size:17px}
.lp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.lp-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px}.lp-sec.alt .lp-card{background:var(--bg)}
.lp-card h3{margin-bottom:6px}.lp-card p{color:var(--ink-2);margin:0;font-size:14.5px}
.lp-foot{padding:34px 0;color:var(--ink-3);font-size:13px;border-top:1px solid var(--line)}
.lp-form{max-width:560px}
.lp-honest{border-left:4px solid var(--self);background:var(--self-soft);padding:16px 20px;border-radius:0 8px 8px 0;max-width:820px}

/* accessibility fixes */
:root{--link:#245BB0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--link:#8FB8F2}}
:root[data-theme="dark"]{--link:#8FB8F2}
a,.backlink{color:var(--link)}
h2.ph{font-size:19px;line-height:1.25}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lp-hero .lp-nav a{color:#DCE6F5}
.lp-foot{color:var(--ink-2)}

/* heat scale: generic so it colours any tile (.hg-cell, .rg-cell), not just
   a table cell. Dark is the default theme now, so these alpha/text values
   are tuned for a dark surface first; the light theme opts out below. */
[class*="hm"]{background:rgba(var(--heat),var(--a,.1));color:var(--ink)}
.hm0{--a:.1}.hm1{--a:.22}.hm2{--a:.36}.hm3{--a:.52}
.hm4{--a:.74;color:#04142B}.hm5{--a:.92;color:#04142B}
:root[data-theme="light"] .hm0{--a:.06}:root[data-theme="light"] .hm1{--a:.16}:root[data-theme="light"] .hm2{--a:.30}:root[data-theme="light"] .hm3{--a:.42}
:root[data-theme="light"] .hm4{--a:.68;color:#FFFFFF}:root[data-theme="light"] .hm5{--a:.88;color:#FFFFFF}
.legend-mobile{display:none;font-size:12.5px;color:var(--ink-2);margin:4px 0 8px}
@media (max-width:560px){.legend-mobile{display:block}}

/* ---------- Product identity: MIRROR, CONSTELLATION, DIMENSION, WAYFINDER ---------- */
:root{
  --p-mirror-ink:#1F5675; --p-mirror-bg:#E5F0F6; --p-mirror-line:#BBD5E4;
  --p-constellation-ink:#4B3D80; --p-constellation-bg:#ECE9F7; --p-constellation-line:#CFC8EA;
  --p-dimension-ink:#20705F; --p-dimension-bg:#E2F2EE; --p-dimension-line:#B8DDD4;
  --p-wayfinder-ink:#8A5A16; --p-wayfinder-bg:#FBF0DC; --p-wayfinder-line:#EBD3A6;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --p-mirror-ink:#9CCBE6; --p-mirror-bg:rgba(43,106,142,.24); --p-mirror-line:rgba(156,203,230,.32);
  --p-constellation-ink:#C1B6F0; --p-constellation-bg:rgba(120,100,200,.22); --p-constellation-line:rgba(193,182,240,.32);
  --p-dimension-ink:#86D6C0; --p-dimension-bg:rgba(50,160,135,.2); --p-dimension-line:rgba(134,214,192,.32);
  --p-wayfinder-ink:#F0C27A; --p-wayfinder-bg:rgba(200,140,50,.2); --p-wayfinder-line:rgba(240,194,122,.32);
}}
:root[data-theme="dark"]{
  --p-mirror-ink:#9CCBE6; --p-mirror-bg:rgba(43,106,142,.24); --p-mirror-line:rgba(156,203,230,.32);
  --p-constellation-ink:#C1B6F0; --p-constellation-bg:rgba(120,100,200,.22); --p-constellation-line:rgba(193,182,240,.32);
  --p-dimension-ink:#86D6C0; --p-dimension-bg:rgba(50,160,135,.2); --p-dimension-line:rgba(134,214,192,.32);
  --p-wayfinder-ink:#F0C27A; --p-wayfinder-bg:rgba(200,140,50,.2); --p-wayfinder-line:rgba(240,194,122,.32);
}
.p-mirror{--pc-ink:var(--p-mirror-ink);--pc-bg:var(--p-mirror-bg);--pc-line:var(--p-mirror-line)}
.p-constellation{--pc-ink:var(--p-constellation-ink);--pc-bg:var(--p-constellation-bg);--pc-line:var(--p-constellation-line)}
.p-dimension{--pc-ink:var(--p-dimension-ink);--pc-bg:var(--p-dimension-bg);--pc-line:var(--p-dimension-line)}
.p-wayfinder{--pc-ink:var(--p-wayfinder-ink);--pc-bg:var(--p-wayfinder-bg);--pc-line:var(--p-wayfinder-line)}
.pchip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--pc-bg);border:1px solid var(--pc-line);color:var(--pc-ink)}
.pchip svg,.pcard-h svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:12px;margin-top:6px}
.pcard{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-left:4px solid var(--pc-ink);border-radius:10px;padding:12px 14px;background:var(--surface);cursor:pointer}
.pcard:has(input:checked){background:var(--pc-bg);border-color:var(--pc-line);border-left-color:var(--pc-ink)}
.pcard:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.pcard input{margin-top:4px}
.pcard-b{display:flex;flex-direction:column;gap:3px;font-weight:400}
.pcard-k{font-size:12px;font-weight:600;color:var(--pc-ink);letter-spacing:.02em;text-transform:uppercase}
.pcard-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--pc-ink)}
.pcard-h svg{width:20px;height:20px}
.pcard-h b{font-size:14px;letter-spacing:.02em;white-space:nowrap}
.pc-check{display:flex;align-items:center;gap:6px;margin:3px 0;white-space:nowrap;cursor:pointer}
.lp-card.pl{border-top:3px solid var(--pc-ink)}
.lp-card.pl .pchip{margin-bottom:12px}
@media print{.pchip{background:#fff;color:#000;border:1px solid #999}}

/* ---------- WAYFINDER: skill pills and score dashboard ---------- */
.skill-pills{display:flex;flex-wrap:wrap;gap:8px}
.skill-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 6px 5px 10px;border-radius:99px;font-size:13px;font-weight:600;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.skill-pill.ess{background:var(--info-bg);border-color:transparent;color:var(--navy-3)}
.skill-pill.good{background:var(--good-bg);color:var(--good);border-color:transparent}
.skill-pill.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.skill-pill.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.pill-star{background:none;border:none;padding:0;margin:0;cursor:pointer;color:var(--line-2,#c9c9c9);font-size:13px;line-height:1}
.pill-star.on{color:#B8860B}
.pill-star[aria-hidden]{cursor:default}
.pill-x{background:none;border:none;padding:0 2px;margin:0;cursor:pointer;color:inherit;opacity:.55;font-size:15px;line-height:1;font-weight:700}
.pill-x:hover{opacity:1}
.pill-text{white-space:nowrap}
.wf-dash{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.wf-dash-groups{flex:1;min-width:220px;display:flex;flex-direction:column;gap:14px}
.wf-group h4{margin:0 0 6px}
.wf-ring-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.wf-ring{--deg:0deg;width:108px;height:108px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--ring-c,var(--navy-3)) var(--deg), var(--line) 0deg);position:relative}
.wf-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}
.wf-ring-v{position:relative;font-family:var(--num-font);font-size:26px;font-weight:600;color:var(--ink)}
.wf-ring-v small{font-size:13px;font-weight:400;color:var(--ink-3)}
.wf-ring.good{--ring-c:var(--good)} .wf-ring.warn{--ring-c:var(--warn)} .wf-ring.bad{--ring-c:var(--bad)}
.wf-ring-label{text-align:center;max-width:150px}
.wf-ring-label b{display:block;font-size:14px}
.wf-score-empty{display:flex;flex-direction:column;justify-content:center;min-width:150px}

/* ---------- WAYFINDER: structured interview scorecard (BARS anchors + per-round ratings) ---------- */
.wf-anchors{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--ink-3);margin-bottom:14px;padding:10px 12px;background:var(--surface-2);border-radius:8px}
.wf-anchors b{color:var(--ink-2)}
.wf-rate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 12px;margin-top:4px}
.wf-rate-item{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink-2)}
.wf-rate-item select{padding:5px 6px;border-radius:6px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:13px}

/* ---------- WAYFINDER: HR fit rows (salary, contract type, right to work) ---------- */
.hr-fit-row{display:flex;gap:10px;align-items:baseline;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);font-size:13.5px}
.hr-fit-row b{flex:none;min-width:150px}
.hr-fit-row.match{border-color:transparent;background:var(--good-bg)} .hr-fit-row.match b{color:var(--good)}
.hr-fit-row.mismatch,.hr-fit-row.over,.hr-fit-row.under{border-color:transparent;background:var(--bad-bg)} .hr-fit-row.mismatch b,.hr-fit-row.over b,.hr-fit-row.under b{color:var(--bad)}
.hr-fit-row.unknown{border-color:transparent;background:var(--warn-bg)} .hr-fit-row.unknown b{color:var(--warn)}

/* ---------- Hero rings, expandable cards: shared "instant read" layer ----------
   Used on the programme dashboard and on every report (MIRROR, CONSTELLATION,
   DIMENSION, WAYFINDER) and the executive summary, so the whole product reads
   as one system. Every number shown here is computed elsewhere; nothing is
   invented for effect. */
.hero{background:linear-gradient(155deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 130%);border-radius:var(--r-lg);padding:28px 30px;color:#fff;position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;margin-bottom:18px;box-shadow:var(--shadow-lg)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(680px 340px at 88% -10%,rgba(255,255,255,.10),transparent 60%);pointer-events:none}
.hero.person-hero{grid-template-columns:auto 1fr}
@media (max-width:640px){.hero{grid-template-columns:1fr;text-align:center}.hero .ringstack,.hero .ringwrap{margin:0 auto}.hero-ring-col{margin:0 auto}}
.hero-ring-col{display:flex;flex-direction:column;align-items:center;gap:16px}

/* range dial: a labelled min–max track with a marker at the score, the
   "Pace of Aging" slider shape, sat under the hero ring so the same number
   also reads as a position on a scale, not only a filled circle. */
.rdial{width:168px}
.rdial-l{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:10px;text-align:center}
.rdial-track{position:relative;height:6px;border-radius:4px;background:rgba(255,255,255,.18)}
.rdial-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#8FC1FF,#4C8DF0)}
.rdial-track.tone-good .rdial-fill{background:linear-gradient(90deg,#34E6A8,#0DBE83)}
.rdial-track.tone-warn .rdial-fill{background:linear-gradient(90deg,#FFD27A,#F0A93A)}
.rdial-track.tone-bad .rdial-fill{background:linear-gradient(90deg,#FF9B90,#EE5B4D)}
.rdial-track.tone-info .rdial-fill{background:linear-gradient(90deg,#8FC1FF,#4C8DF0)}
.rdial-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.4)}
.rdial-range{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.55);margin-top:9px}
.ringstack{position:relative;width:150px;height:150px;flex:0 0 auto}
.ringstack-svg{transform:rotate(-90deg);width:150px;height:150px}
.ringstack .rtrack{fill:none;stroke:rgba(255,255,255,.14)}
.ringstack .rval{fill:none;stroke-linecap:round}
.ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring-c .big{font-family:var(--num-font);font-size:34px;font-weight:600;line-height:1;color:#fff}
.ring-c .lbl{font-size:10.5px;color:rgba(255,255,255,.72);margin-top:4px;letter-spacing:.3px;text-transform:uppercase}
.ring-c .n{font-family:var(--num-font);font-size:32px;font-weight:600;line-height:1;color:#fff}
.ring-c .n small{font-size:14px;font-weight:400;color:rgba(255,255,255,.55)}
.ring-c .band{margin-top:6px;background:rgba(255,255,255,.16);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;letter-spacing:.2px}
.ringwrap{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.ringwrap svg{position:relative;z-index:1;transform:rotate(-90deg);width:100%;height:100%}
.ringwrap .rtrack{fill:none;stroke:rgba(255,255,255,.14)}
.ringwrap .rval{fill:none;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1)}
.ring-glow{position:absolute;inset:4%;border-radius:50%;filter:blur(22px);opacity:.5;z-index:0;pointer-events:none}
.hero-body h2,.hero-body-p h2{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 0 4px;color:#fff}
.hero-body .sub,.hero-body-p .sub{color:rgba(255,255,255,.68);font-size:13.5px;margin:0 0 16px;max-width:560px}
.heropills{display:flex;gap:10px;flex-wrap:wrap}
.heropill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:9px 15px;min-width:110px;flex:1 1 150px}
.heropill .k{font-size:10.5px;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px}
.heropill .v{font-family:var(--num-font);font-size:19px;font-weight:600;color:#fff}
.heropill .v small{font-size:11.5px;font-weight:400;color:rgba(255,255,255,.55);font-family:var(--sans)}
.heropill .d{font-size:10.5px;color:rgba(255,255,255,.55);margin-top:2px}

/* attention strip: always visible, never buried in a table */
.attn-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 18px;margin-top:-8px}
.attn-chip{flex:0 0 auto;background:var(--bad-bg);color:var(--bad);border-radius:12px;padding:10px 14px;font-size:12.5px;font-weight:600;display:flex;flex-direction:column;gap:2px;min-width:150px;cursor:pointer;border:1px solid transparent}
.attn-chip:hover{border-color:var(--bad)}
.attn-chip small{font-weight:500;opacity:.85}

/* expandable cards — the mechanism behind "no empty space": collapsed
   sections cost nothing on screen and open on demand. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);margin-bottom:14px;overflow:hidden}
.card-top{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;user-select:none}
.card-top:hover{background:var(--surface-2)}
.card-top .ttl{font-weight:600;font-size:15px}
.card-top .stt{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.card-top .chevron{margin-left:auto;flex:0 0 auto;width:20px;height:20px;color:var(--ink-3);transition:transform .22s ease}
.card.open .chevron{transform:rotate(180deg)}
.tagdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.dot-mirror{background:var(--p-mirror-ink)} .dot-constellation{background:var(--p-constellation-ink)}
.dot-dimension{background:var(--p-dimension-ink)} .dot-wayfinder{background:var(--p-wayfinder-ink)}
.statuspills{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto;margin-left:auto;margin-right:6px;justify-content:flex-end}
.spill{font-size:11.5px;font-weight:700;border-radius:99px;padding:4px 10px;white-space:nowrap}
.spill.good{background:var(--good-bg);color:var(--good)} .spill.warn{background:var(--warn-bg);color:var(--warn)}
.spill.bad{background:var(--bad-bg);color:var(--bad)} .spill.info{background:var(--info-bg);color:var(--info-ring)}
.card-body{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.16,1,.3,1)}
/* overflow only needs to clip while collapsed/animating; once fully open,
   visible overflow lets a tooltip inside (e.g. a rater square) escape the
   card instead of being cut off at its edge. */
.card.open .card-body{max-height:4000px;overflow:visible}
.card-body-in{padding:2px 18px 20px}
.subsec{margin-bottom:22px} .subsec:last-child{margin-bottom:0}
.subsec .sub{color:var(--ink-3);font-size:13.5px;margin:2px 0 14px}
@media print{
  .card-body{max-height:none!important;overflow:visible!important}
  .card-top{cursor:default}
  .card-top .chevron{display:none}
}

/* radar + domain-scores pair: stretch both panels to equal height so there
   is never dead space under the shorter one, and centre the chart within
   whatever height that ends up being. */
.radar-pair{align-items:stretch}
.radar-panel{display:flex}
.radar-center{flex:1;display:flex;align-items:center;justify-content:center;width:100%}
.radar-center svg,.radar-center .sv{width:100%;height:auto;max-width:420px}

/* content re-hosted inside a card from a helper that already renders its
   own title (stripPanel keeps everything below the h2) — no extra border,
   it already lives inside the card's body. */
.panel-in{padding:0}

/* written-summary redesign: kicker-labelled blocks with a coloured rail and,
   where there's a number behind the sentence, a small paired ring — so the
   section reads as a mix of graphics and short writing, filling the card's
   full width, rather than a narrow column of prose. */
.narrative-rich{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.nblock{position:relative;display:flex;gap:16px;align-items:center;padding:16px 18px 16px 18px;border-left:3px solid var(--line-2);background:var(--surface-2);border-radius:0 12px 12px 0;flex:1 1 300px}
@media (max-width:560px){.nblock{flex-basis:100%}}
.nblock.lede,.nblock.close{flex:1 1 100%}
.nblock.lede{background:var(--navy);border-left-color:rgba(255,255,255,.3)}
.nblock.lede .nkicker{color:rgba(255,255,255,.6)}
.nblock.lede p{color:#fff}
.nblock.tone-good{border-color:var(--good)} .nblock.tone-warn{border-color:var(--warn)}
.nblock.tone-bad{border-color:var(--bad)} .nblock.tone-info{border-color:var(--info-ring)}
.nblock-txt{flex:1;min-width:0}
.nkicker{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.nblock.tone-good .nkicker{color:var(--good)} .nblock.tone-warn .nkicker{color:var(--warn)}
.nblock.tone-bad .nkicker{color:var(--bad)} .nblock.tone-info .nkicker{color:var(--info-ring)}
.nblock p{margin:0;font-size:14.5px;line-height:1.6;font-family:var(--serif);color:var(--ink)}
.nblock.lede p{font-size:18px;line-height:1.55}
.nblock-fig{flex:0 0 auto;background:var(--navy);border-radius:14px;padding:8px;display:flex;align-items:center;justify-content:center}
.nfig-v{font-family:var(--num-font);font-size:15px;font-weight:700;color:#fff}
@media print{.narrative-rich{display:block}.nblock{break-inside:avoid;page-break-inside:avoid;margin-bottom:12px}}
/* the one-page detailed write-up under the high-level boxes: continuous
   prose under subheadings, deliberately plain (no tone colours, no tiles)
   so it reads as a document, not another grid of cards */
.fullpage{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.fullpage h3.h4{margin:22px 0 8px}
.fullpage h3.h4:first-child{margin-top:0}
.fullpage p{margin:0 0 4px;font-size:15px;line-height:1.7;font-family:var(--serif);color:var(--ink)}
@media print{.fullpage{break-inside:auto}.fullpage h3.h4{break-after:avoid}}

/* ---------- dark widget grid: mini gauges and mini bars ----------
   The Whoop/Oura/smart-home reference feel — many small self-contained
   tiles, packed densely on a dark surface, so nothing reads as one chart
   floating in empty white space. */
.wpanel{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 65%,var(--navy-3) 140%);border-radius:var(--r-md);padding:20px;margin-bottom:18px;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.wpanel::after{content:"";position:absolute;inset:0;background:radial-gradient(520px 260px at 92% -20%,rgba(255,255,255,.10),transparent 60%);pointer-events:none}
.wgrid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
/* fixed-column variant: used where the tile count is known (8 domains), so a
   grid never strands a lone tile on its own half-empty row. Tiles size up to
   fill the row rather than sitting small in a wide gap. */
.wgrid-4{grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:720px){.wgrid-4{grid-template-columns:repeat(2,1fr)}}
.wtile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:background .15s ease,transform .15s ease}
.wgrid-4 .wtile{padding:20px 12px}
.wtile:hover{background:rgba(255,255,255,.11);transform:translateY(-1px)}
.wtile-v{font-family:var(--num-font);font-size:16px;font-weight:700;color:#fff;line-height:1}
.wgrid-4 .wtile-v{font-size:19px}
.wgrid-4 .wtile-l{font-size:13px;margin-top:2px}
.wgrid-4 .wtile-s{font-size:11.5px}
.wtile-l{font-size:11px;font-weight:600;color:rgba(255,255,255,.82);letter-spacing:.15px}
.wtile-s{font-size:10.5px;color:rgba(255,255,255,.52)}
.wtile-bar{align-items:stretch;text-align:left;gap:8px}
.wtile-bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.wtile-bar-top .wtile-l{font-size:12px}
.wtile-v.sm{font-size:14px}
.wbar{height:6px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.wbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#8FC1FF,#4C8DF0)}
.wbar.tone-good i{background:linear-gradient(90deg,#34E6A8,#0DBE83)}
.wbar.tone-warn i{background:linear-gradient(90deg,#FFD27A,#F0A93A)}
.wbar.tone-bad i{background:linear-gradient(90deg,#FF9B90,#EE5B4D)}
/* checklist card: pass/attention rows for validation and response-quality
   checks — the shape a plain text banner was standing in for */
.clist{display:flex;flex-direction:column;gap:2px}
.citem{display:flex;align-items:center;gap:12px;padding:11px 4px;font-size:14.5px;color:var(--ink);border-top:1px solid var(--line)}
.citem:first-child{border-top:0}
.citem .cdot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;background:var(--good-bg);color:var(--good)}
.citem.warn .cdot{background:var(--warn-bg);color:var(--warn)}
.citem .cl{font-weight:600}
.citem .cn{margin-left:auto;font-size:12.5px;color:var(--ink-3)}
@media print{.wpanel{background:#0B2A55!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* radar folded into the dark widget panel, full width on its own row above
   the gauge grid so it reads as a proper chart rather than a small chart
   squeezed into a narrow column next to the tiles. */
.wpanel-radar-row{position:relative;display:flex;justify-content:center;margin-bottom:20px}
.wpanel-radar{width:100%;max-width:680px}
.wpanel-radar .sv text{fill:rgba(255,255,255,.78)}
.wpanel-radar .sv .ring{stroke:rgba(255,255,255,.18)}
.wpanel-radar .sv .axl{stroke:rgba(255,255,255,.18)}
.wpanel-radar .sv .others{stroke:#8FC1FF;fill:#8FC1FF;fill-opacity:.14}
.wpanel-radar .sv .selfp{stroke:#FFD27A;fill:#FFD27A;fill-opacity:.08}
.wpanel-radar .sv .rl{fill:rgba(255,255,255,.45)}
.wpanel-radar{position:relative}
.radar-legend{display:flex;gap:16px;justify-content:center;margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.68)}
.radar-legend .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:1px}
.radar-legend .dot.others{background:#8FC1FF}
.radar-legend .dot.self{background:#FFD27A}
.wtile .wtile-l{-webkit-hyphens:auto;hyphens:auto}
.wsub{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.68);margin:0 0 10px}
.wpanel .grid2{margin-top:0}
/* bar tiles hold a full sentence, not a short label, so they need real width
   to wrap at word boundaries — flexbox lets a short last row stretch to
   fill the space instead of leaving a gap, the same fix used for the domain
   tile grid above. */
.wgrid-bars{display:flex;flex-wrap:wrap;gap:10px}
.wgrid-bars .wtile-bar{flex:1 1 250px;min-width:0}
.wtile-bar .wtile-l{-webkit-hyphens:none;hyphens:none;white-space:normal;line-height:1.35}
.wtile-bar-top .wtile-l{flex:1;min-width:0}

/* rater groups: dense 8-cell domain strip per group, reusing the same
   hm0–hm5 heat scale as the dashboard heatmap, instead of a bordered table */
.ratergrid{display:grid;gap:10px}
.ratergroup{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ratergroup.all{background:var(--info-bg);border-color:transparent}
.ratergroup-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.rg-name{font-weight:700;font-size:14px}
.rg-n{font-size:12px;color:var(--ink-3)}
.rg-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:6px}
.rg-cell{border-radius:8px;padding:7px 4px;text-align:center;display:flex;flex-direction:column;gap:2px}
/* the label inherits its colour (and so picks up the light/dark text swap
   the hm4/hm5 heat levels set on the cell itself) rather than a fixed grey,
   which was fading out on the darker cells; opacity keeps it looking like
   a secondary label without hard-coding a colour that ignores the background. */
.rg-cell-l{font-size:10px;font-weight:600;color:inherit;opacity:.7;text-transform:uppercase;letter-spacing:.2px}
.rg-cell-v{font-family:var(--num-font);font-size:15px;font-weight:600}
.rg-cell.na{background:var(--surface);color:var(--ink-3)}
.rg-cell.na .rg-cell-v{color:var(--ink-3)}
/* coloured outline by score band, the same good/info/warn/bad tones used
   for rings and chips throughout the report, so a square reads at a glance
   without needing to read the number first. */
.rg-cell.tone-good{box-shadow:inset 0 0 0 2px var(--good)}
.rg-cell.tone-info{box-shadow:inset 0 0 0 2px var(--info-ring)}
.rg-cell.tone-warn{box-shadow:inset 0 0 0 2px var(--warn)}
.rg-cell.tone-bad{box-shadow:inset 0 0 0 2px var(--bad)}

/* "What stands out": four separated tile groups (risk flags get their own
   group) instead of thin-bordered bullet columns that all look the same */
.stand{display:grid;gap:22px}
.standgrp h3.h4{margin-bottom:10px}
.standgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.stile{border-radius:10px;padding:12px 14px;background:var(--surface-2);border-left:3px solid var(--line-2)}
.stile b{display:block;font-weight:700;font-size:13.5px;margin-bottom:4px}
.stile p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.stile.g{background:var(--good-bg);border-color:var(--good)} .stile.g b{color:var(--good)}
.stile.w{background:var(--warn-bg);border-color:var(--warn)} .stile.w b{color:var(--warn)}
.stile.r{background:var(--bad-bg);border-color:var(--bad)} .stile.r b{color:var(--bad)}
.stile.s{border-color:var(--line-2)}

/* Evidence-page charts: alpha dot plot (Cronbach's alpha per scale against
   a 0.70 reference line) and the correlation forest plot (point estimate
   + 95% CI whiskers against a zero reference line). Both share the same
   axis/label/grid visual language, scoped to their own wrapper classes so
   their smaller label text doesn't inherit the large .sv text{} size used
   by the person-report radar chart. */
.adpchart text,.fpchart text{font-family:var(--sans);font-size:12px;font-weight:400;fill:var(--ink-2)}
.adp-grid,.fp-grid{stroke:var(--line);stroke-width:1}
.adp-ref{stroke:var(--warn);stroke-width:1.5;stroke-dasharray:4 3}
.adp-reflabel{fill:var(--warn);font-weight:600}
.adp-axl,.fp-axl{fill:var(--ink-3);font-size:11px}
.adp-lbl,.fp-lbl{fill:var(--ink);font-size:12.5px}
.adp-track{stroke:var(--line-2);stroke-width:2}
.adp-dot{stroke:var(--surface);stroke-width:1.5}
.adp-dot.ok{fill:var(--good)}
.adp-dot.low{fill:var(--bad)}
.fp-zero{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:3 3}
.fp-ci{stroke:var(--others);stroke-width:2}
.fp-cap{stroke:var(--others);stroke-width:2}
.fp-pt{fill:var(--others);stroke:var(--surface);stroke-width:1.5}

/* hero ring: a subtle particle/noise texture behind the arc, the Whoop
   "living sphere" touch, layered under the gradient stroke so it reads as
   organic rather than a flat vector arc */
.ring-noise{position:absolute;inset:6%;border-radius:50%;opacity:.5;z-index:0;pointer-events:none;mix-blend-mode:screen}
@media print{.ring-noise{display:none}}