/* ============================================================
   CQ PRO REPORT — INTERACTIVE
   Cultural Intelligence Center
   ------------------------------------------------------------
   TOKENS
   ============================================================ */
:root{
  --ink:#1E2427;
  --ink-2:#2B3438;
  --slate:#4A555B;
  --slate-2:#6E7A80;
  --line:#DDE2E4;
  --paper:#F2F4F5;
  --white:#FFFFFF;

  --orange:#F58220;
  --orange-deep:#C85F0C;
  --orange-soft:#FDEBD9;
  --orange-band:#F9B26B;

  --teal:#A8D5D3;
  --teal-deep:#3F8A86;
  --teal-soft:#E6F2F1;

  /* percentile band ramp — matches the printed report */
  --band-vlow:#DDE1E3;
  --band-low:#BFC7CB;
  --band-mod:#8E979D;
  --band-high:#F9B26B;
  --band-vhigh:#F58220;

  /* readable text for each band — all >= 4.5:1 on their own band colour */
  --on-vlow:#3A4247;
  --on-low:#2E3538;
  --on-mod:#12181A;
  --on-high:#5A3406;
  --on-vhigh:#402000;

  --display:'Archivo','Museo Sans','Helvetica Neue',Arial,sans-serif;
  --body:'Source Sans 3','Museo Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-xl:22px;
  --shadow-sm:0 1px 2px rgba(30,36,39,.06),0 2px 8px rgba(30,36,39,.05);
  --shadow-md:0 2px 6px rgba(30,36,39,.07),0 12px 32px rgba(30,36,39,.09);
  --shadow-lg:0 8px 20px rgba(30,36,39,.10),0 32px 70px rgba(30,36,39,.16);

  --rail:264px;
  --topbar:60px;
  --ease:cubic-bezier(.2,.7,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:var(--display);margin:0;letter-spacing:-.02em;line-height:1.12;font-weight:700}
p{margin:0 0 1em}
a{color:var(--orange-deep)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px;border-radius:3px}

/* FIX: `hidden` was being defeated by class rules that set display
   (.radar-wrap{display:grid}), so the radar never actually hid and the
   view toggle looked like a one-way switch. Everything that relies on
   the hidden attribute now genuinely hides. */
[hidden]{display:none!important}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate-2);display:block;margin-bottom:10px;
}
.eyebrow--orange{color:var(--orange-deep)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   COVER
   ============================================================ */
#cover{
  position:relative;min-height:100vh;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 32px;overflow:hidden;
}
#cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 78% 12%,rgba(245,130,32,.20),transparent 60%),
             radial-gradient(70% 50% at 8% 92%,rgba(168,213,211,.14),transparent 62%);
}
.cover-inner{position:relative;z-index:2;width:min(1120px,100%);margin:0 auto}
.cover-mark{display:flex;gap:5px;align-items:center;margin-bottom:46px}
.cover-mark i{display:block;width:26px;height:6px;border-radius:1px}
.cover-mark i:nth-child(1){background:var(--teal)}
.cover-mark i:nth-child(2){background:var(--orange)}
.cover-mark i:nth-child(3){background:#9AA3A8}
.cover-mark span{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#9AA3A8;margin-left:12px;
}
#cover h1{
  font-size:clamp(52px,10vw,132px);font-weight:800;letter-spacing:-.045em;
  line-height:.9;margin-bottom:20px;
}
#cover h1 em{font-style:normal;color:var(--orange);display:block}
.cover-sub{
  font-size:clamp(17px,2.1vw,22px);color:#B9C1C5;max-width:44ch;margin-bottom:44px;
}
.cover-meta{
  display:flex;flex-wrap:wrap;gap:36px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14);margin-bottom:44px;
}
.cover-meta div{min-width:120px}
.cover-meta dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#7E888D;margin-bottom:6px}
.cover-meta dd{margin:0;font-family:var(--display);font-size:19px;font-weight:600}

/* the signature: live percentile spine drawn on the cover */
.spine{margin:0 0 46px;max-width:760px}
.spine-row{display:grid;grid-template-columns:150px 1fr 44px;align-items:center;gap:14px;margin-bottom:5px}
.spine-row span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#8B9499;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.spine-row.is-cap span{color:#fff;font-weight:600}
.spine-track{height:8px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden}
.spine-fill{
  height:100%;width:0;border-radius:99px;background:#5A656A;
  transition:width 1.1s var(--ease);
}
.spine-row.is-cap .spine-fill{background:var(--orange)}
.spine-row b{font-family:var(--mono);font-size:12px;color:#8B9499;font-weight:500}
.spine-row.is-cap b{color:#fff}

.cover-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  padding:15px 28px;border-radius:99px;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
  text-decoration:none;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--orange);color:#fff;box-shadow:0 6px 22px rgba(245,130,32,.36)}
.btn--primary:hover{background:#FF8F2E;box-shadow:0 10px 30px rgba(245,130,32,.44)}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.btn--quiet{background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line)}
.btn--sm{padding:10px 18px;font-size:14px}

.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#6E787D;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(#6E787D,transparent);animation:drop 2s infinite}
@keyframes drop{0%{opacity:0;transform:scaleY(.2)}40%{opacity:1}100%{opacity:0;transform:scaleY(1)}}

/* ============================================================
   CHROME: topbar + rail
   ============================================================ */
#topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar);z-index:80;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 18px;
  transform:translateY(-100%);transition:transform .35s var(--ease);
}
#topbar.is-on{transform:none}
.tb-menu{
  display:none;background:none;border:0;cursor:pointer;padding:8px;border-radius:var(--r-md);color:var(--ink);
}
.tb-menu.is-on{display:block}
.tb-menu:hover{background:var(--paper)}
.tb-mark{display:flex;gap:3px}
.tb-mark i{width:14px;height:4px;border-radius:1px}
.tb-mark i:nth-child(1){background:var(--teal)}
.tb-mark i:nth-child(2){background:var(--orange)}
.tb-mark i:nth-child(3){background:#B4BBBF}
.tb-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
}
.tb-title b{color:var(--ink);font-weight:600}
.tb-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.tb-save{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate-2);opacity:0;transition:opacity .3s;white-space:nowrap;
}
.tb-save.is-on{opacity:1}
.tb-save.is-err{color:var(--orange-deep);font-weight:600}
@media (max-width:640px){.tb-save{display:none}}
.tb-badges{display:flex;gap:5px}
.tb-badges i{
  width:9px;height:9px;border-radius:50%;background:var(--line);
  transition:background .3s,transform .3s;
}
.tb-badges i.on{background:var(--orange);transform:scale(1.18)}
.ring{position:relative;width:38px;height:38px;flex:none}
.ring svg{transform:rotate(-90deg);display:block}
.ring circle{fill:none;stroke-width:3.5}
.ring .bg{stroke:var(--line)}
.ring .fg{stroke:var(--orange);stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)}
.ring b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ink);
}

#rail{
  position:fixed;top:var(--topbar);bottom:0;left:0;width:var(--rail);z-index:70;
  background:var(--white);border-right:1px solid var(--line);
  padding:22px 0 40px;overflow-y:auto;
  transform:translateX(-102%);transition:transform .35s var(--ease);
}
#rail.is-on{transform:none}
.rail-h{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate-2);padding:0 24px;margin-bottom:12px;
}
.rail-link{
  display:flex;align-items:center;gap:11px;padding:9px 24px;text-decoration:none;
  color:var(--slate);font-size:14.5px;border-left:3px solid transparent;transition:.18s;
}
.rail-link:hover{background:var(--paper);color:var(--ink)}
.rail-link.on{border-left-color:var(--orange);color:var(--ink);font-weight:600;background:var(--orange-soft)}
.rail-link u{
  font-family:var(--mono);font-size:10.5px;text-decoration:none;color:var(--slate-2);
  width:20px;flex:none;
}
.rail-link.on u{color:var(--orange-deep)}
.rail-link .tick{
  margin-left:auto;width:16px;height:16px;border-radius:50%;flex:none;
  border:1.5px solid var(--line);display:grid;place-items:center;
}
.rail-link.done .tick{background:var(--teal-deep);border-color:var(--teal-deep)}
.rail-link.done .tick::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg) translate(-1px,-1px)}
.rail-div{height:1px;background:var(--line);margin:14px 24px}
#scrim{
  position:fixed;inset:0;background:rgba(30,36,39,.4);z-index:69;opacity:0;pointer-events:none;
  transition:opacity .3s;backdrop-filter:blur(2px);
}
#scrim.is-on{opacity:1;pointer-events:auto}

/* ============================================================
   LAYOUT
   ============================================================ */
main{transition:padding-left .35s var(--ease)}
body.rail-open main{padding-left:var(--rail)}
@media (max-width:1180px){ body.rail-open main{padding-left:0} }

.chapter{padding:96px 32px;scroll-margin-top:calc(var(--topbar) + 12px)}
.chapter--alt{background:var(--white)}
.wrap{width:min(1020px,100%);margin:0 auto}
.wrap--wide{width:min(1180px,100%)}
.chap-head{margin-bottom:44px;max-width:70ch}
.chap-num{
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--orange);
  letter-spacing:.1em;display:block;margin-bottom:12px;
}
.chapter h2{font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-.035em;margin-bottom:16px}
.chapter h2 .thin{font-weight:500;color:var(--slate-2)}
.lede{font-size:19px;color:var(--slate);max-width:62ch}

.card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:28px}
.chapter--alt .card{background:var(--paper);box-shadow:none;border:1px solid var(--line)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:880px){.grid-2,.grid-4{grid-template-columns:1fr}}

/* ============================================================
   CAPABILITY CARDS (ch.1)
   ============================================================ */
.capcard{
  position:relative;background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:26px;overflow:hidden;cursor:pointer;border:0;text-align:left;width:100%;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  font-family:var(--body);
}
.capcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.capcard::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange);
}
.capcard .ic{margin-bottom:14px;display:block;line-height:0;color:#fff}
.capcard .ic .cq-icon{width:40px;height:40px;display:block}
.capcard h3{font-size:18px;color:#fff;margin-bottom:8px;letter-spacing:0}
.capcard p{font-size:14.5px;color:#AEB7BB;margin:0}
.capcard .more{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin-top:16px;display:block;
}
.loop{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  margin:36px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate-2);
}
.loop b{color:var(--ink);font-weight:600;background:var(--white);padding:8px 14px;border-radius:99px;box-shadow:var(--shadow-sm)}
.chapter--alt .loop b{background:var(--paper)}

/* ============================================================
   CHIPS
   ------------------------------------------------------------
   FIX: `.chapter--alt .chip` (0,2,0) used to outrank the band
   modifiers (0,1,0), so inside every alt chapter the chip
   background went white while the label stayed white — invisible
   text on Moderate and Very High. Modifiers are now doubled up
   (.chip.chip--x = 0,2,0) and declared last, so they win.
   Label colours also raised to >= 4.5:1 on their own band.
   ============================================================ */
.chip{
  font-family:var(--mono);font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px;
  background:var(--paper);color:var(--slate);letter-spacing:.02em;white-space:nowrap;
}
.chapter--alt .chip{background:#fff}
.chip.chip--vlow {background:var(--band-vlow); color:var(--on-vlow)}
.chip.chip--low  {background:var(--band-low);  color:var(--on-low)}
.chip.chip--mod  {background:var(--band-mod);  color:var(--on-mod)}
.chip.chip--high {background:var(--band-high); color:var(--on-high)}
.chip.chip--vhigh{background:var(--band-vhigh);color:var(--on-vhigh)}

/* ============================================================
   THE RULER — shared score instrument (signature element)
   ------------------------------------------------------------
   FIX: the track used overflow:hidden, which clipped the marker's
   -3px overhang and its white ring, so the signature detail never
   rendered. The clip now lives on an inner .ruler-zones wrapper so
   the marker can sit proud of the track. The value bubble used to
   be centred on the marker and covered it — it now rides above the
   track in reserved space.
   ============================================================ */
/* Spacing is deliberate: each ruler's name sits 8px above its own track and
   24px below the ruler before it, so proximity groups the label with the right
   graph. Before, the name row was 29px from its own bar and 6px from the one
   above — it read as belonging to the wrong ruler. */
.ruler{margin-bottom:24px}
.ruler--sub{margin-bottom:12px}
.ruler-top{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.ruler-name{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em}
.ruler--sub .ruler-name{font-weight:400;font-size:14.5px;color:var(--slate);font-family:var(--body)}
.ruler-def{font-size:13px;color:var(--slate-2);margin-left:auto;text-align:right}
@media (max-width:640px){.ruler-def{display:none}}

.ruler-rail{position:relative}
.ruler-track{position:relative;height:26px}

/* The score + band chip, riding on the track itself. It parks on whichever
   end the marker isn't (server-side, from the score), so the two never
   collide. The white ring keeps it legible over any band colour underneath. */
/* The value pill sits on the marker line. It's shorter than the line, so the
   marker overhangs above and below and still reads as a continuous indicator
   rather than being hidden behind the number — which is what happened in the
   original, where the pill matched the track height exactly. Ink fill clears
   5.28:1 against the darkest band it can cross. */
.ruler-val{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);z-index:2;
  font-family:var(--mono);font-size:11px;font-weight:600;color:#fff;
  background:var(--ink);padding:1px 8px;border-radius:99px;line-height:1.5;
  white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;
  box-shadow:0 1px 4px rgba(30,36,39,.4);
  transition:left 1.1s var(--ease);
}
.ruler--sub .ruler-val{font-size:9.5px;padding:0 6px;line-height:1.5}
.ruler--sub .ruler-track{height:18px}
.ruler-zones{display:flex;height:100%;border-radius:var(--r-sm);overflow:hidden;background:var(--band-vlow)}
.rz{height:100%}
.rz1{width:10%;background:var(--band-vlow)}
.rz2{width:20%;background:var(--band-low)}
.rz3{width:40%;background:var(--band-mod)}
.rz4{width:20%;background:var(--band-high)}
.rz5{width:10%;background:var(--band-vhigh)}
.ruler-mark{
  position:absolute;top:-3px;bottom:-3px;width:4px;left:0;
  transform:translateX(-50%);
  background:var(--ink);border-radius:2px;box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.3);
  transition:left 1.1s var(--ease);
}
.ruler-axis{position:relative;height:14px;margin-top:5px}
.ruler-axis span{
  position:absolute;top:0;transform:translateX(-50%);
  font-family:var(--mono);font-size:9.5px;color:var(--slate-2);letter-spacing:.06em;
}
.ruler-axis span:first-child{transform:none}
.ruler-axis span:last-child{transform:translateX(-100%)}

/* interactive band legend */
.bands{display:flex;gap:0;border-radius:var(--r-md);overflow:hidden;margin-bottom:8px}
.band-btn{
  border:0;cursor:pointer;padding:14px 8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;transition:.2s;position:relative;
}
.band-btn[data-b="vlow"] {width:10%;background:var(--band-vlow); color:var(--on-vlow)}
.band-btn[data-b="low"]  {width:20%;background:var(--band-low);  color:var(--on-low)}
.band-btn[data-b="mod"]  {width:40%;background:var(--band-mod);  color:var(--on-mod)}
.band-btn[data-b="high"] {width:20%;background:var(--band-high); color:var(--on-high)}
.band-btn[data-b="vhigh"]{width:10%;background:var(--band-vhigh);color:var(--on-vhigh)}
.band-btn:hover,.band-btn.on{filter:brightness(1.07);box-shadow:inset 0 -4px 0 var(--ink)}
.band-out{
  background:var(--paper);border-radius:var(--r-md);padding:16px 18px;font-size:15px;
  color:var(--slate);min-height:64px;
}
.chapter--alt .band-out{background:var(--white);border:1px solid var(--line)}

/* ============================================================
   PROFILE / DASHBOARD
   ============================================================ */
.profile-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:start}
@media (max-width:960px){.profile-grid{grid-template-columns:1fr}}
.overall{
  background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:28px;text-align:center;
}
.overall .num{
  font-family:var(--display);font-size:88px;font-weight:800;line-height:1;
  letter-spacing:-.05em;color:var(--orange);
}
.overall .num sup{font-size:26px;vertical-align:super;letter-spacing:0}
.overall .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#8B9499;margin-bottom:14px}
.overall p{font-size:14.5px;color:#B4BCC0;margin:14px 0 0}

/* FIX: the two views used to overlap because the radar never hid.
   They are now sibling panels in a fixed-height stage, so switching
   doesn't reflow the card and the shape has room to breathe. */
.view-stage{position:relative;min-height:434px}
.radar-wrap{display:grid;place-items:center;padding:14px 0 4px;min-height:inherit}
.radar-wrap svg{width:100%;max-width:340px;height:auto;display:block}
.radar-note{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate-2);text-align:center;margin:6px 0 0;
}
.view-toggle{display:inline-flex;background:var(--paper);border-radius:99px;padding:3px;margin-bottom:18px}
.chapter--alt .view-toggle{background:var(--white);border:1px solid var(--line)}
.view-toggle button{
  border:0;background:none;cursor:pointer;padding:7px 16px;border-radius:99px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);
  transition:background .2s,color .2s;
}
.view-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.headline{
  border-left:3px solid var(--orange);padding:2px 0 2px 18px;margin:26px 0 0;
  font-size:18px;color:var(--ink);
}
.headline strong{font-weight:600}

/* ============================================================
   READING / LEARN-MORE DISCLOSURE
   ============================================================ */
.reading{
  background:var(--orange-soft);border-radius:var(--r-lg);padding:22px 24px;margin:22px 0;
  border-left:3px solid var(--orange);
}
.reading h4{font-size:15px;margin-bottom:8px;letter-spacing:0}
.reading p:last-child{margin-bottom:0}
.reading--teal{background:var(--teal-soft);border-left-color:var(--teal-deep)}

details.learn{border-top:1px solid var(--line);padding:0}
details.learn summary{
  list-style:none;cursor:pointer;padding:14px 0;display:flex;align-items:center;gap:12px;
  font-size:15px;font-weight:600;color:var(--ink);
}
details.learn summary::-webkit-details-marker{display:none}
details.learn summary::after{
  content:"+";margin-left:auto;font-family:var(--mono);font-size:19px;color:var(--orange-deep);
  transition:transform .25s var(--ease);line-height:1;
}
details.learn[open] summary::after{transform:rotate(45deg)}
details.learn summary:hover{color:var(--orange-deep)}
details.learn .learn-body{padding:0 0 20px;font-size:15.5px;color:var(--slate);max-width:70ch}
details.learn .learn-body p:last-child{margin-bottom:0}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tagrow li{
  list-style:none;font-size:13.5px;background:var(--paper);padding:6px 12px;border-radius:99px;color:var(--slate);
}
.chapter--alt .tagrow li{background:var(--white);border:1px solid var(--line)}

/* glossary term */
.term{
  border-bottom:1.5px dotted var(--orange);cursor:help;background:none;border-top:0;border-left:0;border-right:0;
  padding:0;font:inherit;color:inherit;
}
.term:hover{background:var(--orange-soft)}
#tip{
  position:fixed;z-index:120;max-width:300px;background:var(--ink);color:#fff;
  padding:12px 14px;border-radius:var(--r-md);font-size:14px;line-height:1.5;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .16s;
}
#tip.on{opacity:1}
#tip b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:5px}

/* ============================================================
   KNOWLEDGE CHECK
   ============================================================ */
.check{
  background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:26px;margin-top:26px;
}
.check .eyebrow{color:var(--teal)}
.check h4{color:#fff;font-size:19px;margin-bottom:16px;letter-spacing:-.01em}
.opts{display:grid;gap:9px}
.opt{
  text-align:left;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);
  color:#E6EAEB;padding:13px 16px;border-radius:var(--r-md);cursor:pointer;font-size:15px;
  transition:.18s;font-family:var(--body);
}
.opt:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.opt:disabled{cursor:default}
.opt.right{background:rgba(63,138,134,.28);border-color:var(--teal);color:#fff}
.opt.wrong{background:rgba(245,130,32,.14);border-color:rgba(245,130,32,.5);opacity:.75}
.check-fb{
  margin-top:14px;font-size:15px;color:#C3CACD;padding-left:14px;border-left:2px solid var(--teal);
  display:none;
}
.check-fb.on{display:block;animation:fadeUp .4s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============================================================
   BEHAVIORAL PREFERENCES
   ============================================================ */
.pref{
  background:var(--white);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:14px;
  box-shadow:var(--shadow-sm);transition:box-shadow .25s;
}
.chapter--alt .pref{background:var(--paper);box-shadow:none;border:1px solid var(--line)}
.pref:hover{box-shadow:var(--shadow-md)}
.pref-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:14px}
.pref-side{max-width:44%}
.pref-side h4{font-size:14.5px;letter-spacing:.01em;margin-bottom:3px}
.pref-side p{font-size:13px;color:var(--slate-2);margin:0}
.pref-side.r{text-align:right}
/* FIX: overflow:hidden on the track clipped the marker triangle
   entirely — it never rendered on any of the ten preferences.
   Clip the bands, not the marker. */
.pref-track{position:relative;height:22px;margin-bottom:8px}
.pref-bands{display:flex;height:100%;border-radius:var(--r-sm);overflow:hidden}
.pt{height:100%}
.pt1{width:33.33%;background:#E4F0EF}
.pt2{width:33.34%;background:#C9E3E1}
.pt3{width:33.33%;background:#AFD5D3}
.pref-mark{
  position:absolute;bottom:-3px;left:0;width:0;height:0;transform:translateX(-50%);
  border-left:8px solid transparent;border-right:8px solid transparent;
  border-bottom:12px solid var(--ink);transition:left 1s var(--ease);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));
}
.pref-scale{display:flex;font-family:var(--mono);font-size:9.5px;color:var(--slate-2);letter-spacing:.08em;text-transform:uppercase}
.pref-scale span{width:33.33%;text-align:center}
.pref-scale span.on{color:var(--orange-deep);font-weight:600}
.pref-read{
  margin-top:14px;font-size:15px;color:var(--slate);background:var(--paper);
  padding:14px 16px;border-radius:var(--r-md);
}
.chapter--alt .pref-read{background:var(--white);border:1px solid var(--line)}
.pref-read b{color:var(--ink)}
.flexpick{
  margin-top:14px;display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--slate);
}
.flexpick input{width:17px;height:17px;accent-color:var(--orange);cursor:pointer}
.flexpick label{cursor:pointer;user-select:none}
.pref.picked{box-shadow:0 0 0 2px var(--orange),var(--shadow-md)}

/* ============================================================
   PLAN / FORMS
   ============================================================ */
.stage{
  display:flex;align-items:center;gap:14px;margin:52px 0 22px;
}
.stage-n{
  width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;flex:none;
  display:grid;place-items:center;font-family:var(--mono);font-size:14px;font-weight:600;
}
.stage h3{font-size:24px;letter-spacing:-.025em}
.stage p{margin:2px 0 0;font-size:14.5px;color:var(--slate-2)}

.q{margin-bottom:22px}
.q-label{display:flex;align-items:flex-start;gap:12px;margin-bottom:9px}
.q-label h4{font-size:16.5px;letter-spacing:-.01em;flex:1}
.q-hint{font-size:14px;color:var(--slate-2);margin:4px 0 10px}
textarea{
  width:100%;min-height:104px;resize:vertical;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;font-family:var(--body);font-size:16px;line-height:1.6;color:var(--ink);
  background:var(--white);transition:border-color .18s,box-shadow .18s;
}
textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-soft)}
textarea.filled{border-color:var(--teal-deep);background:#FBFDFD}
input[type=text]{
  border:1.5px solid var(--line);border-radius:var(--r-md);padding:10px 12px;
  font-family:var(--body);font-size:15px;width:100%;background:var(--white);
}
input[type=text]:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
input[type=date]{
  border:1.5px solid var(--line);border-radius:var(--r-md);padding:10px 12px;
  font-family:var(--mono);font-size:13.5px;background:var(--white);color:var(--slate);
}
.help{
  border:0;background:var(--orange-soft);color:var(--orange-deep);cursor:pointer;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:7px 13px;border-radius:99px;white-space:nowrap;transition:.18s;flex:none;
  display:inline-flex;align-items:center;gap:6px;
}
.help:hover{background:var(--orange);color:#fff;transform:translateY(-1px)}

.acttable{width:100%;border-collapse:collapse;margin-top:10px}
.acttable th{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-2);text-align:left;padding:0 0 10px;font-weight:600;
}
.acttable td{padding:0 0 10px;vertical-align:top}
.acttable td:first-child{padding-right:12px}
.acttable .wk{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-deep);padding:14px 0 8px;font-weight:600;
}
@media (max-width:700px){
  .acttable,.acttable tbody,.acttable tr,.acttable td,.acttable th{display:block;width:100%}
  .acttable thead{display:none}
  .acttable td:first-child{padding:0 0 8px}
}

.callout{
  background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:26px;margin:26px 0;
}
.callout .eyebrow{color:var(--orange)}
.callout h4{color:#fff;font-size:20px;margin-bottom:10px}
.callout p{color:#B4BCC0;font-size:15.5px;margin-bottom:0}
.callout ul{margin:12px 0 0;padding-left:20px;color:#B4BCC0;font-size:15px}
.callout li{margin-bottom:6px}
.callout strong{color:#fff;font-weight:600}

.pillrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding:0;list-style:none}
.pill{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 14px;border-radius:99px;background:var(--white);color:var(--slate);
  box-shadow:var(--shadow-sm);
}
.chapter--alt .pill{background:var(--paper)}
.pill.pill--up{background:var(--teal-soft);color:#2E6B68;box-shadow:none}
.pill.pill--dn{background:var(--orange-soft);color:#A34C08;box-shadow:none}

/* ============================================================
   COACH MODAL
   ============================================================ */
#coach{
  position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:20px;
}
#coach.on{display:flex}
#coach .veil{position:absolute;inset:0;background:rgba(30,36,39,.55);backdrop-filter:blur(3px)}
.coach-card{
  position:relative;background:var(--white);border-radius:var(--r-xl);width:min(620px,100%);
  max-height:86vh;overflow-y:auto;box-shadow:var(--shadow-lg);
  animation:pop .3s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.coach-top{
  background:var(--ink);color:#fff;padding:22px 26px;border-radius:var(--r-xl) var(--r-xl) 0 0;
  position:relative;
}
.coach-top .eyebrow{color:var(--orange);margin-bottom:6px}
.coach-top h3{color:#fff;font-size:21px;letter-spacing:-.02em;padding-right:36px}
.coach-x{
  position:absolute;top:18px;right:18px;background:rgba(255,255,255,.1);border:0;color:#fff;
  width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:17px;line-height:1;
}
.coach-x:hover{background:rgba(255,255,255,.22)}
.coach-body{padding:24px 26px 26px}
.coach-body>p{font-size:16px;color:var(--slate)}
.coach-ask{
  background:var(--orange-soft);border-radius:var(--r-md);padding:16px 18px;margin:16px 0;
  font-size:17px;color:var(--ink);font-family:var(--display);font-weight:500;line-height:1.45;
}
.starters{display:grid;gap:8px;margin-top:8px}
.starter{
  text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:12px 15px;cursor:pointer;font-family:var(--body);font-size:15px;color:var(--ink);
  transition:.16s;display:flex;align-items:center;gap:10px;
}
.starter:hover{border-color:var(--orange);background:var(--orange-soft);transform:translateX(3px)}
.starter::after{content:"\21B5";margin-left:auto;font-family:var(--mono);color:var(--orange-deep);font-size:14px}
.coach-note{font-size:13.5px;color:var(--slate-2);margin-top:16px}

/* ============================================================
   FINALE
   ============================================================ */
#finale{background:var(--ink);color:#fff}
#finale h2{color:#fff}
#finale .lede{color:#AEB7BB}
#finale .card{background:rgba(255,255,255,.05);box-shadow:none;border:1px solid rgba(255,255,255,.1)}
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:26px 0}
.badge{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);
  padding:18px 16px;text-align:center;opacity:.4;transition:.4s var(--ease);
}
.badge.on{opacity:1;background:rgba(245,130,32,.12);border-color:rgba(245,130,32,.45);transform:translateY(-2px)}
.badge .ic{font-size:26px;display:block;margin-bottom:8px;filter:grayscale(1)}
.badge.on .ic{filter:none}
.badge h5{font-family:var(--display);font-size:14px;color:#fff;margin-bottom:4px;letter-spacing:0}
.badge p{font-size:12.5px;color:#8B9499;margin:0;line-height:1.4}
.summary-out{
  background:rgba(0,0,0,.25);border-radius:var(--r-md);padding:20px;font-size:15px;color:#C3CACD;
  max-height:340px;overflow-y:auto;white-space:pre-wrap;font-family:var(--body);
}
.summary-out h6{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);margin:16px 0 5px;
}
.summary-out h6:first-child{margin-top:0}
.summary-out .blank{color:#6E787D;font-style:italic}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:200;display:none}

footer{
  background:var(--ink);color:#6E787D;padding:34px 32px;font-size:13px;
  border-top:1px solid rgba(255,255,255,.08);
}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}

/* toast */
#toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,220%);z-index:140;
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:99px;font-size:14.5px;
  box-shadow:var(--shadow-lg);transition:transform .35s var(--ease);display:flex;gap:10px;align-items:center;
  max-width:calc(100vw - 32px);
}
#toast.on{transform:translate(-50%,0)}
#toast .ic{color:var(--orange)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (max-width:760px){
  .chapter{padding:64px 20px}
  #cover{padding:60px 20px}
  .spine-row{grid-template-columns:104px 1fr 36px;gap:9px}
  .spine-row span{font-size:9px}
  :root{--rail:280px}
}

@media print{
  #topbar,#rail,#scrim,.scroll-hint,.help,.check,.view-toggle,.btn,#coach,#confetti,#toast{display:none!important}
  body{background:#fff;font-size:11pt}
  main{padding-left:0!important}
  .chapter{padding:24px 0;page-break-inside:avoid}
  #cover{min-height:auto;background:#fff;color:#000;padding:0 0 24px}
  #cover h1{color:#000;font-size:34pt}
  .card,.pref{box-shadow:none;border:1px solid #ccc}
  textarea{border:1px solid #999;min-height:auto}
  .rv{opacity:1!important;transform:none!important}
  .view-stage{min-height:0}
  #viewBars[hidden],#viewRadar[hidden]{display:block!important}
}

/* ============================================================
   CAPABILITY CHAPTER — split layout  (v7.6)
   Scores + per-sub-dimension readings on the left, the AI reading and
   next step on the right. Right column is sticky on wide screens.
   ============================================================ */
.capgrid{display:grid;grid-template-columns:minmax(0,13fr) minmax(0,9fr);gap:24px;align-items:start}
.capscore{padding-bottom:10px}
.capscore-div{height:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.subblock{padding:14px 0 2px}
.subblock .ruler--sub{margin-bottom:6px}
.subblock .ruler--sub .ruler-name{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink);white-space:nowrap}
.subblock .ruler--sub .ruler-top{flex-wrap:wrap;row-gap:4px}
.subblock .ruler--sub .ruler-def{flex-basis:100%;margin-left:0;text-align:left;font-style:italic;font-size:14px}
.submeans{border:0;padding:0}
.submeans summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-weight:600;font-size:14.5px;color:var(--orange-deep);
}
.submeans summary::-webkit-details-marker{display:none}
.submeans summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.submeans[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.submeans .t-close{display:none}
.submeans[open] .t-open{display:none}
.submeans[open] .t-close{display:inline}
.submeans-body{background:var(--paper);border-radius:var(--r-md);padding:14px 16px;margin:2px 0 14px}
.chapter--alt .submeans-body{background:var(--white)}
.submeans-body p{font-size:15.5px;line-height:1.55;margin:0}
.learn--high{margin-top:6px}

.capside{position:sticky;top:calc(var(--topbar) + 20px)}
.capside-inner{background:var(--orange-soft);border-radius:var(--r-lg);padding:26px}
.capside-read .eyebrow{display:block;margin-bottom:10px}
.capside-read p{font-size:16.5px;line-height:1.6;margin:0}
.capside-rule{height:1px;background:#F3CFA9;margin:20px 0}
.capside .nextstep,.chapter--alt .capside .nextstep{background:transparent;box-shadow:none;padding:0;margin:0}
.capside .nextstep .ns-p{font-size:16.5px;font-weight:600;margin-bottom:14px}
.capside .ns-foot{flex-direction:column;align-items:stretch;gap:10px}
.capside .ns-add{width:100%;justify-content:center;min-height:48px;font-size:15px}
.capside .ns-src{text-align:center}
.capside .ns-msg{text-align:center}
.check .opts{grid-template-columns:1fr 1fr}
@media (max-width:1100px){
  .capgrid{grid-template-columns:1fr}
  .capside{position:static}
  .capscore-big .n{font-size:56px}
}
@media (max-width:700px){.check .opts{grid-template-columns:1fr}}

/* ============================================================
   NEXT STEP + ADD TO PLAN  (v7.5)
   ============================================================ */
.nextstep{
  background:var(--white);border-radius:var(--r-lg);padding:22px 24px;margin:22px 0;
  box-shadow:inset 0 0 0 2px var(--orange);
}
.nextstep .eyebrow{display:block;margin-bottom:8px}
.nextstep .ns-p{margin:0 0 16px;font-size:17px;line-height:1.55;color:var(--ink)}
.ns-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ns-src{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--slate-2)}
.ns-add{
  border:0;cursor:pointer;flex:none;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:99px;background:var(--orange);color:#fff;
  transition:background .18s,transform .18s,box-shadow .18s;
}
.ns-add::before{content:"+";margin-right:7px;font-weight:700}
.ns-add:hover{background:#FF8F2E;transform:translateY(-1px)}
.ns-add:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,130,32,.35)}
.ns-add.is-added{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.ns-add.is-added::before{content:"\2212"}
.ns-add.is-added:hover{background:var(--paper)}
.ns-add.is-mine{background:var(--teal-soft);color:var(--teal-deep);box-shadow:none}
.ns-add.is-mine::before{content:"\2713"}
.ns-add.is-mine:hover{background:var(--teal-soft);transform:none}
.ns-msg{margin:12px 0 0;font-size:14.5px;color:var(--slate);min-height:0}
.ns-msg:empty{display:none}
.ns-msg a{color:var(--orange-deep);font-weight:600;margin-left:6px}

/* a plan row that was filled from a next step and hasn't been reworded yet */
.acttable input.from-ns{border-color:var(--orange);box-shadow:0 0 0 2px rgba(245,130,32,.18)}
.act-from{margin:6px 2px 0;font-size:13px;line-height:1.4;color:var(--orange-deep)}
.act-from[hidden]{display:none}

@media (max-width:560px){
  .ns-foot{flex-direction:column;align-items:flex-start}
}
@media print{
  .ns-add,.ns-msg{display:none!important}
  .nextstep{box-shadow:inset 0 0 0 1px var(--line);break-inside:avoid}
  .acttable input.from-ns{box-shadow:none;border-color:var(--line)}
}

/* ============================================================
   RAIL ACTIONS + BIO MODAL + REGENERATE STATE  (v7.6)
   ============================================================ */
.rail-act{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  padding:12px 24px;border:0;background:transparent;cursor:pointer;font-family:var(--body);color:var(--ink);
  transition:background .15s;
}
.rail-act:hover{background:var(--paper)}
.rail-act:disabled{opacity:.5;cursor:default}
.rail-act .ic{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--orange-soft);color:var(--orange-deep);
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;margin-top:1px;
}
.rail-act b{display:block;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:-.01em}
.rail-act small{display:block;font-size:12.5px;color:var(--slate-2);line-height:1.35;margin-top:2px}

#bio{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:20px}
#bio.on{display:flex}
#bio .veil{position:absolute;inset:0;background:rgba(30,36,39,.55);backdrop-filter:blur(3px)}
.bio-fields .q{margin-top:18px}
.bio-fields textarea{min-height:76px}
.bio-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

[data-ai-region]{transition:opacity .35s var(--ease)}
[data-ai-region].ai-loading{opacity:.35;pointer-events:none;position:relative}
[data-ai-region].ai-loading::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-md);
  background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.7) 50%,transparent 100%);
  background-size:200% 100%;animation:shimmer 1.1s linear infinite;
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
[data-ai-region].ai-fresh{animation:fadeUp .6s var(--ease)}
@media (prefers-reduced-motion:reduce){[data-ai-region].ai-loading::after{animation:none}}
@media print{#bio{display:none!important}}

/* ============================================================
   BEHAVIORAL PREFERENCE ICONS (v7.9)
   Icon above each pole name; the bar keeps the full card width.
   ============================================================ */
.pref-side .bp-ic{display:block;width:56px;height:56px;margin-bottom:10px;color:#5F6A70}
.pref-side.r .bp-ic{margin-left:auto}
.bp-ic .bp-icon{display:block;width:100%;height:100%}
.pref-head{margin-bottom:18px}
@media (max-width:640px){.pref-side .bp-ic{width:44px;height:44px;margin-bottom:8px}}
@media print{.pref-side .bp-ic{color:#555}}

/* ============================================================
   GO DEEPER  (v7.10)
   Optional sub-dimension detail inside each Understand card.
   ============================================================ */
.deeper{border-top:1px solid var(--line);margin-top:4px}
.deeper > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:14px 0 10px;font-weight:600;font-size:15px;color:var(--orange-deep);
}
.deeper > summary::-webkit-details-marker{display:none}
.deeper > summary:hover{color:var(--ink)}
.deeper > summary:focus-visible{outline:2px solid var(--orange-deep);outline-offset:3px;border-radius:4px}
.deeper-ic{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;flex:none;position:relative}
.deeper-ic::before,.deeper-ic::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.deeper-ic::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s var(--ease)}
.deeper[open] .deeper-ic::after{transform:translate(-50%,-50%) rotate(0deg)}
.deeper-hide,.deeper[open] .deeper-show{display:none}
.deeper[open] .deeper-hide{display:inline}
.deeper-body{background:var(--paper);border-radius:var(--r-md);padding:20px 22px 4px;margin:6px 0 4px}
.deeper-intro{color:var(--slate);font-size:15px;margin-bottom:12px}
.deeper-subs{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.deeper-subs li{display:flex;align-items:baseline;gap:12px;font-size:15px;color:var(--slate)}
.deeper-subs strong{color:var(--ink);font-weight:600;margin-right:4px}
.deeper-score{font-family:var(--mono);font-size:12px;padding:2px 9px;border-radius:99px;flex:none;min-width:2.4em;text-align:center}
.deeper-score--up{background:var(--teal-soft);color:#2E6B68}
.deeper-score--dn{background:var(--orange-soft);color:#A34C08}
.deeper-body .q textarea{background:var(--white)}
@media (max-width:620px){.deeper-body{padding:16px 16px 2px}}
@media (prefers-reduced-motion:reduce){.deeper-ic::after{transition:none}}
@media print{.deeper > summary{display:none}.deeper-body{background:none;padding:0}}
/* v7.10 — on phones the Help button drops under the question so the question keeps the full width */
@media (max-width:620px){.q-label{flex-wrap:wrap;gap:8px}.q-label h4{flex-basis:100%}}

/* ============================================================
   v7.11 — SYNC WITH THE LIVE REPORT (cqcenter.com/reports)
   Values below were read from the live build's computed styles.
   ============================================================ */
:root{
  /* Proxima Nova everywhere, Arial fallback (live stack); system mono */
  --display:'Proxima Nova',Arial,ui-sans-serif,system-ui,sans-serif;
  --body:'Proxima Nova',Arial,ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;

  --orange:#F47826;
  --band-vlow:#C7C8CA;
  --band-low:#939598;
  --band-mod:#78777A;
  --band-high:#FCBC86;
  --band-vhigh:#F47826;
  --on-vlow:#3A4247;
  --on-low:#FFFFFF;
  --on-mod:#FFFFFF;
  --on-high:#5A3406;
  --on-vhigh:#FFFFFF;
}
h1,h2,h3,h4,h5{font-weight:800}
.chap-head h2{font-size:clamp(34px,4.6vw,52px);letter-spacing:-.035em;line-height:1.12}
.lede{font-size:19px;line-height:1.62}

/* topbar: chapter on the left, participant name centred */
#topbar{background:rgba(255,255,255,.96)}
.tb-title{flex:1 1 0}
.tb-name{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);
  white-space:nowrap;max-width:40vw;overflow:hidden;text-overflow:ellipsis;
}
.tb-save.is-on{color:var(--teal-deep)}
@media (max-width:640px){.tb-name{display:none}}

/* rail: back link, next up, answered count, per-chapter counts */
#rail{padding-top:18px}
.rail-back{
  display:flex;align-items:center;gap:6px;padding:0 24px 14px;text-decoration:none;
  color:var(--ink);font-size:14.5px;font-weight:600;
}
.rail-back:hover{color:var(--orange-deep)}
.rail-back span{font-size:18px;line-height:1;color:var(--slate-2)}
.rail-next{padding:0 24px 18px;display:flex;flex-direction:column;gap:7px}
.rail-nu{
  display:flex;align-items:center;gap:8px;background:var(--orange);color:#fff;text-decoration:none;
  border-radius:99px;padding:9px 14px;box-shadow:0 4px 14px rgba(244,120,38,.32);min-width:0;
  transition:transform .18s var(--ease),background .18s;
}
.rail-nu:hover{background:var(--orange-deep);transform:translateY(-1px)}
.rail-nu[hidden]{display:none}
.nu-l{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;flex:none;opacity:.85}
.nu-q{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.nu-a{flex:none;font-size:12px}
.rail-count{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2)}
.rail-link span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-link .cnt{
  margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--slate-2);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px;display:none;flex:none;
}
.rail-link.has-cnt .cnt{display:inline-block}
.rail-link.has-cnt .tick{display:none}
.rail-btns{display:flex;flex-direction:column;gap:8px;padding:0 24px}
.rail-btns .btn{width:100%;justify-content:center}
.rail-act:disabled{opacity:.45;cursor:not-allowed}

/* profile card: ordinal at full size, AI reading + disclaimer */
.overall .num{letter-spacing:-.04em}
.overall .ai-read p{font-size:14.5px;color:#C9D0D3;margin:14px 0 0;line-height:1.6}
.ai-note{
  display:flex;gap:8px;justify-content:center;align-items:flex-start;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;line-height:1.55;
  color:#8B9499;margin:14px 0 0;text-align:center;
}
.overall .ai-note{color:#8B9499}
.capside-read .ai-note{justify-content:flex-start;text-align:left;color:var(--slate-2);margin-top:12px}
.submeans-body .ai-read p{margin:0}

/* capability chapter: sub-dimension definition sits beside the chip, as on live */
.subblock .ruler--sub .ruler-def{flex-basis:auto;font-style:normal;font-size:13px;margin-left:2px}

/* behavioral preferences: side name in the reading is plain, as on live */
.pref b{font-weight:inherit}

/* finale: 3 x 2 badge grid with status and "Take me there" */
.badges{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.badges{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.badges{grid-template-columns:1fr}}
.badge{opacity:1;padding:22px 18px}
.badge .ic{opacity:.45}
.badge.on .ic{opacity:1}
.badge h5{font-size:15px}
.badge-state{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E888D;margin-bottom:8px}
.badge.on .badge-state{color:var(--orange)}
.badge p{font-size:13.5px;color:#AEB7BB}
.badge-go{
  margin-top:12px;background:none;border:0;cursor:pointer;color:var(--orange);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.badge-go:hover{text-decoration:underline}

/* bio + PDF modals */
#pdfNote{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:20px}
#pdfNote.on{display:flex}
#pdfNote .veil{position:absolute;inset:0;background:rgba(30,36,39,.55);backdrop-filter:blur(3px)}
.coach-card--sm{width:min(480px,100%)}
#pdfNote .bio-actions,#bio .bio-actions{justify-content:flex-end}
.bio-input,.bio-ta{
  display:block;width:100%;margin-top:8px;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:11px 13px;font:inherit;font-size:15px;color:var(--ink);background:var(--white);
}
.bio-ta{min-height:96px;resize:vertical;line-height:1.5}
.bio-input:focus,.bio-ta:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,120,38,.15)}
.bio-left{text-align:right;margin-top:10px}
#bioSave:disabled{opacity:.5;cursor:not-allowed}
@media print{#pdfNote,.rail-next,.rail-back,.badge-go{display:none!important}}
.overall p.ai-note,.capside-read p.ai-note{font-size:10px;line-height:1.55}
.pref-side,.pref-side *{min-width:0;overflow-wrap:anywhere}

/* v7.12 — demo profile link in the rail */
.rail-demo{
  display:flex;flex-direction:column;gap:2px;margin:0 24px 16px;padding:11px 13px;text-decoration:none;
  border:1px dashed var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink);
}
.rail-demo:hover{border-color:var(--orange);background:var(--orange-soft)}
.rd-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2)}
.rd-v{font-size:14px;font-weight:700}
.rd-s{font-size:12px;color:var(--slate);line-height:1.35}
.rd-a{font-size:12.5px;font-weight:600;color:var(--orange-deep);margin-top:4px}
@media print{.rail-demo{display:none!important}}