/* ===================================================================
   Make scores make sense: assets/score-explorer.css
   Everything is scoped to <main class="sx"> on tool-score-explorer.html,
   so nothing here touches styles.css and site styles do not reshape the tool.

   1. Tokens and base       6. CHC abilities        11. Dialog, toast, utilities
   2. Page title (site bar) 7. SLD reference        12. Presentation mode
   3. Sticky section bar    8. Report language      13. Responsive
   4. Shared components     9. Conversion table     14. Print
   5. Workspace            10. Notes and sources
   =================================================================== */

/* ---- 1. Tokens and base ------------------------------------------- */
.sx {
  --ink: #13233a;
  --ink-2: #2a3c55;
  --muted: #465870;
  --faint: #5b6c83;
  --line: #cdd8e5;
  --line-2: #e2e9f2;
  --line-strong: #a3b6cf;
  --page: #e5ecf4;
  --soft: #f3f6fa;
  --tint: #f7f9fc;
  --navy: #163c76;
  --blue: #2459a3;
  --blue-soft: #e6eefa;
  --blue-line: #b5c9e6;
  --gold: #b0852f;
  --gold-soft: #f8f0dd;
  --gold-line: #e6d3a8;
  --gold-ink: #7a5a1c;
  --teal: #12756f;
  --teal-soft: #e8f4f2;
  --teal-line: #c3e1da;
  --teal-ink: #0f5d57;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(15, 35, 65, 0.07), 0 10px 28px rgba(15, 35, 65, 0.08);
  --shadow-lg: 0 2px 4px rgba(15, 35, 65, 0.06), 0 20px 48px rgba(15, 35, 65, 0.16);
  --focus: 0 0 0 4px rgba(36, 89, 163, 0.22);
  --sx-top: 0px;
  display: block;
  background: var(--page);
  color: var(--ink-2);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  padding-bottom: 56px;
}
/* styles.css sets heading and paragraph colors, sizes, and margins globally; reset them here. */
.sx h1, .sx h2, .sx h3, .sx h4 { color: var(--ink); line-height: 1.2; margin: 0; font-weight: 700; }
.sx p { color: inherit; margin: 0; }
.sx ul, .sx ol { margin: 0; }
.sx dl, .sx dd { margin: 0; }
.sx button, .sx input, .sx select, .sx textarea { font: inherit; color: inherit; }
.sx button { cursor: pointer; }
.sx select, .sx input { min-width: 0; max-width: 100%; }
.sx a { color: var(--blue); }
.sx a:hover { text-decoration-thickness: 2px; }
.sx :focus-visible { outline: 3px solid #9a7225; outline-offset: 2px; }
.sx-shell { max-width: 1680px; margin: 0 auto; padding: 0 24px; }

/* Laptop screens: the tool starts at about 80% (75% on short screens) so the chart, the scores,
   and the explanation fit together. Browser zoom still works on top of this. Presentation mode
   and printing use full size (section 12 and 14). The sticky bar offset and chart dragging
   account for the scale in score-toolkit.js and score-explorer.js. */
@media screen and (min-width: 1100px) and (max-width: 1799px) {
  .sx { zoom: 0.8; }
}
@media screen and (min-width: 1100px) and (max-width: 1799px) and (max-height: 820px) {
  .sx { zoom: 0.75; }
}

/* ---- 2. Page title in the site bar -------------------------------------
   This page has no banner. The tool's title sits beside the FarPoint lighthouse in the
   site bar, and the bar is a little slimmer, so the chart starts higher. These are the
   only rules in this file outside .sx, and this file loads on this page only. */
.navbar { padding: 0.5rem 0; }
.navbar .sx-brand .brand-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: #13233a; white-space: nowrap; }
.navbar .sx-brand .sx-brand-gold { color: #946b25; }
.navbar .sx-brand .brand-tagline { font-size: 0.68rem; }
@media (max-width: 420px) {
  .navbar .sx-brand .brand-name { font-size: 1.08rem; }
}

/* ---- 3. Sticky section bar and menus ---------------------------------
   One page. The bar jumps to each section and highlights the one in view. */
.sx .sx-bar {
  position: sticky;
  top: var(--sx-top, 0px);
  z-index: 90;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(15, 35, 65, 0.09);
}
.sx .sx-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; }
.sx .sx-tabs { display: flex; gap: 3px; min-width: 0; padding: 4px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line-2); border-radius: 13px; background: #e9eff7; box-shadow: inset 0 1px 2px rgba(15, 35, 65, 0.06); }
.sx .sx-tabs::-webkit-scrollbar { display: none; }
.sx .sx-tabs a { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 9px; font-size: 14.5px; font-weight: 700; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.sx .sx-tabs a .icon { width: 18px; height: 18px; color: var(--blue); }
.sx .sx-tabs a:hover { background: #ffffff; color: var(--navy); box-shadow: 0 1px 3px rgba(15, 35, 65, 0.1); }
.sx .sx-tabs a.active { background: var(--navy); color: #ffffff; box-shadow: 0 2px 8px rgba(22, 60, 118, 0.32); }
.sx .sx-tabs a.active .icon { color: #e6c172; }
.sx .sx-tabs .t-short { display: none; }
.sx .sx-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sx .menu { position: relative; }
.sx .menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 130;
  min-width: 290px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: #ffffff;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 35, 65, 0.22);
}
.sx .menu-pop.wide { min-width: 520px; gap: 12px; padding: 16px; }
.sx .menu-pop > button, .sx .menu-pop > a { display: block; text-align: left; padding: 10px 12px; border: 0; border-radius: 9px; background: none; font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.sx .menu-pop > button:hover, .sx .menu-pop > a:hover { background: var(--blue-soft); color: var(--navy); }
.sx .menu-label { padding: 8px 12px 2px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase; color: var(--faint); }
.sx .menu-label ~ .menu-label { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.sx .menu-pop > button small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--muted); }

/* ---- 4. Shared components ------------------------------------------ */
.sx .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 15px; border: 1.5px solid var(--line); border-radius: 10px; background: #ffffff; color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.2; text-decoration: none; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.sx .btn:hover { border-color: var(--blue-line); background: #f6f9fe; }
.sx .btn.primary { background: var(--navy); border-color: var(--navy); color: #ffffff; box-shadow: 0 2px 8px rgba(22, 60, 118, 0.28); }
.sx .btn.primary:hover { background: #1f4f94; }
.sx .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.sx .btn.ghost:hover, .sx .btn.ghost[aria-expanded='true'] { background: var(--blue-soft); border-color: var(--blue-line); color: var(--navy); }
.sx .btn[aria-expanded='true'] { border-color: var(--blue); background: var(--blue-soft); color: var(--navy); }
.sx .btn.sm { min-height: 36px; padding: 5px 12px; font-size: 14px; }
.sx .btn.wide { width: 100%; }
/* Save image and PDF: solid navy buttons beside the teal Present button. */
.sx .act-btn { min-height: 48px; padding: 8px 15px 8px 13px; border: 0; border-radius: 13px; background: linear-gradient(180deg, #24508f 0%, #163a72 100%); color: #ffffff; font-size: 15.5px; font-weight: 750; box-shadow: 0 5px 14px rgba(22, 58, 114, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: transform 0.15s, box-shadow 0.15s; }
.sx .act-btn .icon { width: 21px; height: 21px; color: #e6c172; }
.sx .act-btn .chev { width: 14px; height: 14px; margin-left: -2px; color: #b9cbe6; }
.sx .act-btn:hover, .sx .act-btn[aria-expanded='true'] { transform: translateY(-1px); border: 0; background: linear-gradient(180deg, #2c5da3 0%, #1b4384 100%); box-shadow: 0 8px 20px rgba(22, 58, 114, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.sx .act-btn:active { transform: translateY(0); }
/* Present: a calm teal play button, set apart from the navy save and print buttons.
   No animation, and no gold fill, so it reads as a feature rather than a purchase. */
.sx .btn.launch { min-height: 48px; padding: 6px 20px 6px 7px; gap: 10px; border: 0; border-radius: 13px; background: linear-gradient(180deg, #17877d 0%, #0f6b63 100%); color: #ffffff; font-size: 17px; font-weight: 800; letter-spacing: 0.2px; box-shadow: 0 5px 14px rgba(15, 107, 99, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: transform 0.15s, box-shadow 0.15s; }
.sx .btn.launch:hover { transform: translateY(-1px); border: 0; background: linear-gradient(180deg, #1b958a 0%, #12756c 100%); box-shadow: 0 8px 20px rgba(15, 107, 99, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.sx .btn.launch:active { transform: translateY(0); }
.sx .launch-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #ffffff; color: #0f6b63; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.sx .launch-ic .icon { width: 16px; height: 16px; margin-left: 2px; }
.sx .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sx .icon { width: 18px; height: 18px; flex-shrink: 0; }
.sx .link-btn { background: none; border: 0; padding: 6px 2px; color: var(--blue); font-weight: 650; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.sx .link-btn.danger { color: #a12d2d; }
.sx .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1.5px solid var(--line); border-radius: 9px; background: #ffffff; color: var(--ink); font-size: 22px; line-height: 1; }
.sx .icon-btn:hover { border-color: var(--blue-line); background: var(--blue-soft); }
.sx .icon-btn.sm { width: 32px; height: 32px; font-size: 20px; }
.sx .icon-btn.on { border-color: var(--blue); background: var(--blue-soft); color: var(--navy); }
.sx .icon-btn.danger:hover { border-color: #e2b4b4; background: #fdeeee; color: #a12d2d; }
.sx .panel { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sx .panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 16px; border-bottom: 1px solid var(--line-2); border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(180deg, #fbfcfe 0%, #f2f6fb 100%); }
.sx .panel-head h2 { font-size: 16.5px; letter-spacing: -0.2px; }
.sx .ph-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--navy); color: #ffffff; box-shadow: 0 0 0 3px #dbe6f6; }
.sx .ph-icon .icon { width: 17px; height: 17px; color: #e6c172; }
.sx .step { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #ffffff; font-size: 14px; font-weight: 800; box-shadow: 0 0 0 3px #dbe6f6; }
/* Every typing field gets a clear box: visible border, white fill, inner shadow, and a focus glow. */
.sx .fld,
.sx .field input, .sx .field select, .sx .inline-field input, .sx .inline-field select {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 7px 11px;
  border: 1.5px solid var(--line-strong);
  border-radius: 9px;
  background-color: #ffffff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 550;
  box-shadow: inset 0 1px 2px rgba(15, 35, 65, 0.07);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sx .field input, .sx .field select { margin-top: 6px; }
.sx .fld:hover, .sx .field input:hover, .sx .field select:hover, .sx .inline-field input:hover, .sx .inline-field select:hover { border-color: #7f9bc2; }
.sx .fld:focus, .sx .field input:focus, .sx .field select:focus, .sx .inline-field input:focus, .sx .inline-field select:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.sx .fld::placeholder, .sx .field input::placeholder, .sx .inline-field input::placeholder { color: #8594a8; font-weight: 500; }
.sx select.fld, .sx .field select, .sx .inline-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23465870' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
}
.sx .fld.fnum { font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.sx .fld.fnum::-webkit-outer-spin-button, .sx .fld.fnum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sx input[aria-invalid='true'], .sx .fld[aria-invalid='true'] { border-color: #b23b3b; background-color: #fff6f6; }
.sx .field { display: block; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.sx .inline-field { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sx .inline-field input, .sx .inline-field select { width: auto; min-height: 36px; }
.sx .helper { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: 8px; }
.sx .validation { font-size: 13.5px; color: #a12d2d; font-weight: 650; }
.sx .validation:empty { display: none; }
.sx .eyebrow { font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; color: var(--blue); margin-bottom: 6px; }
.sx .muted { color: var(--faint); }
.sx .warn { color: #8a2b2b; }
.sx .gold-ink { color: var(--gold-ink); }
.sx .num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #ffffff; font-size: 12.5px; font-weight: 800; flex-shrink: 0; }
.sx .num.lg { width: 30px; height: 30px; font-size: 14px; }
.sx .pill { font-size: 12px; font-weight: 750; color: var(--gold-ink); background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.sx .count { font-size: 13px; font-weight: 750; color: var(--muted); background: #e9eff7; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
/* Segmented controls (chart type, explain views, CHC style, settings): one bold look everywhere. */
.sx .seg { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line-2); border-radius: 11px; background: #e6ecf4; box-shadow: inset 0 1px 2px rgba(15, 35, 65, 0.07); }
.sx .seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 5px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 700; white-space: nowrap; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.sx .seg button .icon { color: var(--blue); }
.sx .seg button:hover { background: #ffffff; color: var(--navy); box-shadow: 0 1px 3px rgba(15, 35, 65, 0.1); }
.sx .seg button[aria-pressed='true'] { background: var(--navy); color: #ffffff; box-shadow: 0 2px 7px rgba(22, 60, 118, 0.3); }
.sx .seg button[aria-pressed='true'] .icon { color: #e6c172; }
/* On/off options read as checkboxes: a small box that fills navy with a check when on. */
.sx .tog { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 9px 4px 7px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: 14px; font-weight: 650; text-align: left; }
.sx .tog small { margin-left: 2px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.sx .tog:hover { background: var(--blue-soft); color: var(--navy); }
.sx .tog .chk { display: block; flex-shrink: 0; width: 17px; height: 17px; padding: 1px; border: 1.5px solid #93a6c2; border-radius: 4px; background: #ffffff; color: transparent; }
.sx .tog[aria-pressed='true'] { color: var(--ink); }
.sx .tog[aria-pressed='true'] .chk { border-color: var(--navy); background: var(--navy); color: #ffffff; }
.sx .pal-row, .sx .mini-pal { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.sx .pal-swatch { width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid #ffffff; box-shadow: 0 0 0 1px rgba(15, 35, 65, 0.22); }
.sx .pal-swatch.sm { width: 24px; height: 24px; }
.sx .pal-swatch[aria-pressed='true'] { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--sw); }
.sx .section { margin-top: 56px; scroll-margin-top: calc(var(--sx-top) + 78px); }
.sx .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.sx .sec-head h2 { position: relative; font-size: 31px; letter-spacing: -0.7px; padding-left: 16px; margin-bottom: 6px; }
.sx .sec-head h2::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 5px; border-radius: 3px; background: var(--gold); }
.sx .sec-head h2:focus { outline: none; }
.sx .sec-head p:not(.eyebrow) { font-size: 16.5px; color: var(--muted); max-width: 780px; line-height: 1.6; }
.sx .sec-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; flex-shrink: 0; }
.sx .note { margin: 16px 0; padding: 14px 18px; border: 1px solid #d3dff0; border-radius: 12px; background: #eef3fb; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.sx .note.gold { background: var(--gold-soft); border-color: var(--gold-line); }
.sx .note strong { color: var(--ink); }
.sx .band-dot { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(15, 35, 65, 0.18); border-radius: 3px; }

/* ---- 5. Workspace ----------------------------------------------------
   Left: the chart, with the Explain panel right under it. Right: the score list, with the
   optional Beyond the scores card under it. Everything scrolls with the page; nothing scrolls
   on its own. The whole workspace sits on a deep blue band (the same blues as presenting), so
   the white cards stand forward and the page reads in layers. */
.sx .ws-band { padding: 16px 0 30px; background: radial-gradient(1100px 420px at 12% -12%, rgba(120, 160, 220, 0.16), rgba(120, 160, 220, 0) 70%), linear-gradient(160deg, #11284b 0%, #1a427c 100%); }
.sx .ws-band .panel { box-shadow: 0 1px 2px rgba(4, 12, 28, 0.2), 0 12px 30px rgba(4, 12, 28, 0.26); }
.sx .workspace { margin-top: 0; scroll-margin-top: calc(var(--sx-top) + 70px); }
.sx .stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(410px, 28%, 470px); grid-template-rows: auto 1fr; grid-template-areas: 'chart scores' 'explain scores'; gap: 14px 18px; align-items: start; }
.sx .chart-panel { grid-area: chart; min-width: 0; }
.sx .side-stack { grid-area: scores; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sx .scores-panel { grid-area: scores; min-width: 0; }
.sx #readout { grid-area: explain; min-width: 0; }

/* 5a. Chart header: title, chart type, options */
.sx .chart-head { column-gap: 12px; padding-top: 7px; padding-bottom: 7px; }
.sx .chart-head .chart-types { margin-left: 4px; }
.sx .chart-head .chart-types .icon { width: 19px; height: 19px; }
.sx .title-field { flex: 1 1 180px; min-width: 140px; max-width: 360px; margin-left: auto; }
.sx .title-field input { width: 100%; min-height: 36px; padding: 5px 10px; border: 1.5px dashed var(--line-strong); border-radius: 9px; background: #ffffff; color: var(--ink); font-size: 14.5px; font-weight: 700; }
.sx .title-field input::placeholder { color: #8594a8; font-weight: 500; }
.sx .title-field input:focus { outline: none; border-style: solid; border-color: var(--blue); box-shadow: var(--focus); }

/* 5b. The rail beside the chart: overlays (each checkbox in its overlay's color, with a short
   note under it that doubles as the legend) and the scale rows. Line settings open in small
   popovers beside the rail. */
.sx .chart-body { display: grid; grid-template-columns: 214px minmax(0, 1fr); align-items: stretch; }
.sx .ov-rail { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 10px 10px 12px 12px; border-right: 1px solid var(--line-2); background: #fbfcfe; border-bottom-left-radius: var(--radius); }
.sx .rail-group { display: flex; flex-direction: column; gap: 2px; }
.sx .rail-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 24px; padding: 0 2px 1px 6px; }
.sx .ov-title { flex-shrink: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase; color: var(--faint); }
.sx .ov-list { display: flex; flex-direction: column; align-items: stretch; gap: 1px; min-width: 0; }
.sx .ov-list.stacked { flex-direction: column; align-items: flex-start; }
.sx .ov-row { display: flex; flex-direction: column; min-width: 0; }
.sx .ov-item-g { display: flex; align-items: center; min-width: 0; }
.sx .ov-item-g .ov-item { flex: 1; }
.sx .ov-item { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 27px; padding: 2px 6px; border-radius: 7px; color: var(--muted); font-size: 13.5px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s; }
.sx .ov-item .ov-name { overflow: hidden; text-overflow: ellipsis; }
.sx .ov-item:hover { background: var(--blue-soft); color: var(--navy); }
.sx .ov-note { display: block; margin: -2px 0 4px 31px; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.sx .ov-caution { display: block; margin-top: 2px; font-weight: 500; color: var(--faint); }
/* "What the overlays mean" sits at the foot of the overlay list */
/* Scale rows: a compact two-column block at the foot of the rail */
.sx .rows-group { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line-2); }
.sx .row-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2px; }
.sx .row-item { --sl: var(--navy); gap: 6px; padding-left: 5px; padding-right: 2px; font-size: 12.5px; }
/* The checkbox carries the overlay's color: a tinted outline when off, filled with a check when on. */
.sx .ov-item input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 17px; height: 17px; margin: 0; border: 1.5px solid color-mix(in srgb, var(--sl) 55%, #ffffff); border-radius: 4px; background: #ffffff; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.sx .ov-item input:checked { border-color: var(--sl); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat, var(--sl); }
.sx .ov-item input[data-overlay='bands'] { border-color: #b7c4d8; }
.sx .ov-item input[data-overlay='bands']:checked { border-color: #6f8db0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat, linear-gradient(135deg, #c98457 0%, #7f9cc6 50%, #3f9582 100%); }
.sx .ov-item input[data-overlay='ci']:checked { border-color: #5d7395; background-color: #5d7395; }
.sx .ov-item:has(input:checked) { color: var(--ink); }
.sx .ov-item:focus-within { box-shadow: 0 0 0 3px rgba(154, 114, 37, 0.45); }
.sx .ov-item input:focus-visible { outline: none; }
@media (forced-colors: active) { .sx .ov-item input { appearance: auto; -webkit-appearance: auto; } }
.sx .ov-sw { flex-shrink: 0; width: 16px; height: 12px; border-radius: 3px; background: var(--sw); box-shadow: inset -3px 0 0 var(--sl, rgba(15, 35, 65, 0.25)); }
.sx .ov-gear, .sx .ov-info { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--muted); }
.sx .ov-gear .icon { width: 15px; height: 15px; }
.sx .ov-info .icon { width: 19px; height: 19px; color: var(--blue); }
.sx .ov-gear:hover, .sx .ov-gear[aria-expanded='true'], .sx .ov-info:hover, .sx .ov-info[aria-expanded='true'] { border-color: var(--blue-line); background: var(--blue-soft); color: var(--navy); }
.sx .set-pop { top: 8px; left: calc(100% + 6px); right: auto; width: 380px; max-width: none; padding: 14px; gap: 10px; }
.sx .set-pop .set-row, .sx .set-pop .set-row.sld, .sx .set-pop .set-row.custom { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; }
.sx #sld-pop { border-top: 4px solid #a6762a; }
.sx #custom-pop { border-top: 4px solid var(--pc, var(--teal)); }
.sx .set-pop .set-title { align-self: flex-start; min-width: 0; font-size: 14px; }
.sx .set-pop .set-row.custom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sx .set-pop .set-row.custom > .set-title, .sx .set-pop .set-row.custom > .grow, .sx .set-pop .set-row.custom > .mini-pal, .sx .set-pop .set-row.custom > .set-status { grid-column: 1 / -1; }
.sx .set-pop .set-row label, .sx .set-pop .set-row [data-sld], .sx .set-pop .set-row .fld.fnum { width: 100%; }
.sx .set-pop .set-row .seg { align-self: flex-start; }
.sx .set-pop .set-status { font-size: 13.5px; line-height: 1.45; }
.sx .menu-note { padding: 6px 12px 4px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.sx .guide-title { font-size: 12px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase; color: var(--faint); }
.sx .guide-list { display: grid; gap: 9px; padding: 0; list-style: none; }
.sx .guide-list li { display: flex; align-items: flex-start; gap: 10px; }
.sx .guide-list .ov-sw { margin-top: 4px; opacity: 1; }
.sx .guide-list b { display: block; font-size: 14px; color: var(--ink); }
.sx .guide-list span:not(.ov-sw) { display: block; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.sx .guide-foot { padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 13px; line-height: 1.45; color: var(--gold-ink); }
.sx .ov-settings { display: grid; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line-2); }
.sx .set-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); border-left-width: 5px; }
.sx .set-row.sld { background: var(--gold-soft); border-color: var(--gold-line); border-left-color: #a6762a; }
.sx .set-row.custom { background: #eef6f4; border-color: var(--teal-line); border-left-color: var(--teal); }
.sx .set-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 750; color: var(--muted); }
.sx .set-row label.grow { flex: 1 1 200px; }
.sx .set-row .fld { min-height: 36px; }
.sx .set-row [data-sld='ability'] { width: 300px; }
.sx .set-row [data-sld='test'] { width: 270px; }
.sx .set-row .fld.fnum { width: 96px; }
.sx .set-row .seg { align-self: flex-end; }
.sx .set-row .mini-pal { align-self: center; padding-bottom: 4px; }
.sx .set-title { display: inline-flex; align-items: center; gap: 8px; align-self: center; min-width: 140px; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.sx .set-title .ov-sw { opacity: 1; }
.sx .set-status { flex-basis: 100%; font-size: 14px; color: var(--gold-ink); }
.sx .set-status.warn { color: #8a2b2b; font-weight: 650; }
.sx .dc-group { display: flex; align-items: flex-start; gap: 12px; }
.sx .dc-label { flex: 0 0 104px; padding-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--faint); }
.sx .dc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sx .dc-chips select.fld { width: auto; min-height: 36px; }
.sx .dc-note { font-size: 13px; color: var(--muted); }
.sx .pop-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sx .pop-presets .dc-label { flex-basis: 100%; padding: 0; }

/* 5c. The chart, its caption, and the overlay notes */
.sx .chart-main { min-width: 0; padding-bottom: 6px; }
.sx .scroll-hint { margin: 10px 16px 0; font-size: 13.5px; color: var(--muted); }
.sx .scroll-hint[hidden] { display: none; }
.sx .chart-scroll { overflow-x: auto; padding: 4px 0 0; }
.sx .chart-scroll svg { display: block; width: 100%; min-width: 700px; height: auto; }
.sx .chart-scroll [data-drag] { cursor: grab; touch-action: none; }
.sx .chart-scroll [data-drag]:active { cursor: grabbing; }
body[data-sx-chart='profile'] .sx .chart-scroll [data-drag] { cursor: ns-resize; }
/* The score key under the chart is for presenting; the Scores list does this job otherwise. */
.sx .legend { display: none; flex-wrap: wrap; gap: 8px; padding: 4px 18px 10px; }
.sx .key-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 13px 4px 4px; border: 1.5px solid var(--line); border-radius: 999px; background: #ffffff; color: var(--ink-2); font-size: 14px; }
.sx .key-chip:hover { border-color: var(--blue-line); }
.sx .key-chip[aria-pressed='true'] { border-color: var(--blue); background: var(--blue-soft); }
.sx .key-label { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The caption box shows when presenting and on printouts. On the page the rail notes carry the
   same legend and cautions, so the Explain panel follows the chart directly. */
.sx .chart-foot { display: none; margin: 0 14px; padding: 8px 12px; border-radius: 9px; background: var(--soft); }
.sx .chart-caption { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.sx .chart-caption strong { color: var(--ink); }
/* About the overlays (from the info button in the rail): notes for the overlays that are on,
   then what each overlay shows */
.sx .chart-panel > .ov-notes { display: grid; gap: 12px; padding: 12px 14px 14px; border-top: 1px solid var(--line-2); background: #fbfcfe; }
.sx .chart-panel > .ov-notes[hidden] { display: none; }
.sx .ov-notes .guide-block { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #ffffff; }
.sx .ov-notes .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; }


/* 5d. Scores: one compact row per score */
.sx .scores-panel .panel-head { gap: 8px 10px; }
.sx .scores-panel .count { margin-left: auto; }
.sx .sp-setup { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; padding: 10px 14px 4px; }
.sx .mini-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--faint); }
.sx .mini-field .fld { min-height: 34px; padding: 4px 10px; font-size: 14px; letter-spacing: 0; text-transform: none; }
.sx .mini-field select.fld { padding-right: 28px; background-position: right 9px center; }
.sx .sp-intro { padding: 6px 14px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.sx .sl-head { display: grid; grid-template-columns: 30px minmax(0, 1fr) 58px 64px 28px; gap: 6px; padding: 8px 14px 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--faint); }
.sx .sl-head span:first-child { grid-column: 2; }
.sx .sl-head span:nth-child(2) { text-align: center; }
.sx .score-list { list-style: none; margin: 0; padding: 2px 8px 4px; }
.sx .srow-item { position: relative; border-radius: 11px; }
.sx .srow-item + .srow-item { margin-top: 2px; }
.sx .srow-item.selected { background: #eef4fc; box-shadow: inset 4px 0 0 var(--c); }
.sx .srow-item.open { background: #f4f7fb; }
.sx .srow-item.selected.open { background: #eef4fc; }
.sx .srow { display: grid; grid-template-columns: 30px minmax(0, 1fr) 58px 64px 28px; gap: 6px; align-items: center; padding: 5px 6px 5px 8px; }
.sx .srow .fld { min-height: 36px; padding: 4px 9px; }
.sx .s-name { font-size: 14.5px; font-weight: 650; text-overflow: ellipsis; }
/* Composite dropdown: a small arrow inside the right edge of the name field. The select's own
   text is hidden; the name field shows the choice. */
.sx .s-name-wrap { position: relative; display: block; min-width: 0; }
.sx .s-name-wrap .s-name { width: 100%; padding-right: 32px; }
.sx .s-pick { position: absolute; top: 4px; right: 4px; bottom: 4px; width: 26px; margin: 0; padding: 0; border: 0; border-radius: 6px; color: transparent; font-size: 14px; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23465870' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 8px no-repeat; }
.sx .s-pick:hover { background-color: var(--blue-soft); }
.sx .s-pick:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; background-color: var(--blue-soft); }
.sx .s-pick option { color: var(--ink); font-weight: 550; }
.sx .s-name-wrap.linked .s-name { border-color: var(--blue-line); background: #f7faff; }
@media (forced-colors: active) { .sx .s-pick { color: CanvasText; } }
.sx .s-val-wrap { position: relative; display: block; }
.sx .s-val { padding: 3px 6px !important; text-align: center; font-size: 18px !important; font-weight: 800 !important; color: var(--navy) !important; -moz-appearance: textfield; appearance: textfield; }
.sx .s-val::-webkit-outer-spin-button, .sx .s-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sx .s-scale { padding: 4px 22px 4px 8px !important; font-size: 13.5px !important; font-weight: 700 !important; color: var(--ink-2); background-position: right 7px center !important; background-size: 10px 7px !important; }
.sx .s-more { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); }
.sx .s-more .icon { width: 18px; height: 18px; transition: transform 0.2s; }
.sx .s-more:hover { border-color: var(--blue-line); background: var(--blue-soft); color: var(--navy); }
.sx .s-more[aria-expanded='true'] { color: var(--navy); }
.sx .s-more[aria-expanded='true'] .icon { transform: rotate(180deg); }
/* Where the score falls: a bubble above the score on hover or focus */
.sx .s-val-wrap[data-tip]:hover::after, .sx .s-val-wrap[data-tip]:focus-within::after { content: attr(data-tip); position: absolute; right: -40px; bottom: calc(100% + 7px); z-index: 30; padding: 6px 10px; border-radius: 8px; background: #15253b; color: #ffffff; font-size: 12.5px; font-weight: 650; line-height: 1.3; white-space: nowrap; box-shadow: 0 6px 16px rgba(15, 35, 65, 0.25); pointer-events: none; }
.sx .c-num { position: relative; }
.sx .sc-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--c); color: #ffffff; font-size: 13px; font-weight: 800; box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--line); }
.sx .sc-dot::after { content: ''; position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #ffffff; background: conic-gradient(#2f5ea8 0 25%, #12756f 0 50%, #94561f 0 75%, #ab3765 0); }
.sx .palette { position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; width: 236px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff; box-shadow: 0 12px 28px rgba(15, 35, 65, 0.18); }
.sx .palette > span { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 750; color: var(--muted); }
.sx .srow-more { padding: 4px 10px 12px 44px; }
.sx .where { margin-bottom: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.sx .where b { color: var(--ink); }
.sx .mg-label { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--faint); }
.sx .where .mg-label { display: inline; margin: 0 4px 0 0; }
.sx .more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.sx .mg-wide { grid-column: 1 / -1; }
.sx .mg-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--faint); }
.sx .mg-field .fld, .sx .ci-pair .fld { min-height: 34px; padding: 4px 9px; font-size: 14px; letter-spacing: 0; text-transform: none; }
.sx .mg-field select.fld { padding-right: 26px; background-position: right 8px center; }
.sx .ci-pair { display: flex; align-items: center; gap: 6px; color: var(--faint); }
.sx .ci-pair .fld { width: auto; flex: 1; }
.sx .srow-more .helper { margin-top: 8px; font-size: 12.5px; }
.sx .srow-more .link-btn { margin-top: 4px; padding: 4px 0; font-size: 13.5px; }
.sx .srow-err { padding: 0 12px 6px 52px; font-size: 13px; }
.sx .meta-empty { font-size: 13px; color: var(--faint); }
.sx .sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--line-2); }
.sx .privacy { display: flex; gap: 8px; align-items: flex-start; padding: 0 14px 12px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.sx .privacy .icon { width: 15px; height: 15px; margin-top: 1px; }

/* 5e. Explain panel */
.sx .side-panel { min-width: 0; }
.sx .ro-steps { display: flex; gap: 6px; margin-left: auto; }
.sx .ro-score { padding: 14px 18px 4px; }
.sx .ro-eyebrow { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 800; color: var(--faint); }
.sx .ro-line { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.sx .ro-name { font-size: 20px; letter-spacing: -0.3px; }
.sx .ro-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.sx .ro-value b { font-size: 40px; line-height: 1.05; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.sx .ro-value > span { font-size: 15px; font-weight: 650; color: var(--muted); }
.sx .band-chip { align-self: center; padding: 3px 12px; border: 1px solid rgba(15, 35, 65, 0.14); border-radius: 7px; background: var(--bf); color: var(--ink); font-size: 14px; font-weight: 750; }
.sx .band-chip.neutral { background: #eef2f7; }
.sx .seg.views { display: flex; margin: 12px 18px 4px; }
.sx .seg.views button { flex: 1; justify-content: center; padding: 5px 6px; }
.sx .ro-body { display: grid; gap: 12px; padding: 10px 18px 18px; }
.sx .ro-block { padding: 12px 14px 13px; border: 1px solid var(--line-2); border-radius: 12px; }
.sx .ro-block h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; letter-spacing: 0.9px; text-transform: uppercase; }
.sx .ro-block h4.sub { margin-top: 14px; }
.sx .ro-block.family { background: var(--teal-soft); border-color: var(--teal-line); }
.sx .ro-block.family h4 { color: var(--teal-ink); }
.sx .ro-block.family p { margin-bottom: 6px; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.sx .ro-block.family p:last-child { margin-bottom: 0; }
.sx .ro-block.clinical { background: #f7f9fc; }
.sx .ro-block.clinical h4, .sx .ro-block.visual h4 { color: var(--blue); }
.sx .stat-list > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.sx .stat-list > div:last-child { border-bottom: 0; }
.sx .stat-list dt { padding-top: 2px; font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--faint); }
.sx .stat-list dd { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sx .stat-list dd b { color: var(--ink); font-size: 15.5px; }
.sx .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sx .tile { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 9px 11px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 35, 65, 0.05); }
.sx .tile span { font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--faint); }
.sx .tile b { font-size: 20px; line-height: 1.3; letter-spacing: -0.2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sx .tile small { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.sx .stat-list.flags { margin-top: 8px; }
.sx .ro-block .more-link { margin-top: 6px; padding: 2px 0; font-size: 13.5px; }
.sx .ro-compare { margin-top: 10px; }
.sx .ro-compare summary { cursor: pointer; font-size: 13.5px; font-weight: 750; color: var(--blue); }
.sx .ro-compare ul { list-style: none; padding: 0; display: grid; gap: 6px; margin-top: 8px; }
.sx .ro-compare li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.45; }
.sx .ro-compare .num { width: 21px; height: 21px; font-size: 11.5px; margin-top: 1px; }
.sx .ro-block .ruler, .sx .ro-block .translator { display: block; width: 100%; height: auto; }
.sx .vis-note { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.sx .ro-empty { padding: 20px 18px; }
.sx .ro-empty h3 { margin-bottom: 6px; font-size: 20px; }
.sx .ro-empty p { font-size: 15.5px; }
/* Under the chart the panel is wide: the score on the left, the explanation beside it,
   and the view switch and score arrows in the header. */
.sx .ro-head .seg.views { margin: 0 0 0 auto; }
.sx .ro-head .seg.views button { min-height: 30px; padding: 3px 12px; font-size: 13.5px; }
.sx .ro-head .ro-steps { align-items: center; margin-left: 6px; }
.sx .ro-head .icon-btn { width: 32px; height: 32px; font-size: 20px; }
.sx .ro-pos { min-width: 46px; font-size: 13px; font-weight: 750; text-align: center; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.sx .ro-wide { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.sx .ro-wide .ro-score { display: flex; flex-direction: column; align-items: flex-start; padding: 14px 14px 14px 16px; border-right: 1px solid var(--line-2); }
.sx .ro-foot { margin-top: auto; padding-top: 12px; font-size: 11.5px; line-height: 1.45; color: var(--faint); }
.sx .ro-wide .ro-line { align-items: flex-start; margin: 0 0 6px; }
.sx .ro-wide .ro-line .num { margin-top: 1px; }
.sx .ro-wide .ro-name { font-size: 16.5px; line-height: 1.3; }
.sx .ro-wide .ro-value { gap: 4px 8px; }
.sx .ro-wide .ro-value b { font-size: 38px; }
.sx .ro-wide .ro-value > span { font-size: 13.5px; }
.sx .ro-wide .band-chip { display: inline-block; align-self: flex-start; margin-top: 8px; font-size: 13.5px; }
.sx .ro-wide .ro-body { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; padding: 12px 14px 14px; }
.sx .ro-wide .ro-body.ro-family, .sx .ro-wide .ro-body.ro-clinical, .sx .ro-wide .ro-body.ro-visual { grid-template-columns: minmax(0, 1fr); }
.sx .ro-wide .ro-block { padding: 10px 13px 12px; }
.sx .ro-wide .ro-block h4 { margin-bottom: 6px; font-size: 12px; }
/* family words read as one short paragraph here; presenting keeps one sentence per line */
.sx .ro-wide .ro-block.family p { display: inline; font-size: 15px; line-height: 1.6; }
.sx .ro-wide .ro-block.family p + p::before { content: ' '; }
.sx .ro-wide .tile { padding: 7px 10px 8px; }
.sx .ro-wide .tile b { font-size: 18px; }
.sx .ro-wide .tile small { font-size: 12px; }
.sx .ro-wide .clinical .stat-list { columns: 2; column-gap: 26px; }
.sx .ro-wide .clinical .stat-list > div { break-inside: avoid; }
/* the short flag list under the tiles (Both view) stays one column */
.sx .ro-wide .clinical .stat-list.flags { columns: auto; }
.sx .ro-wide .visual.wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sx .ro-wide .visual.wide h4.sub { margin-top: 0; }

/* 5f. Beyond the scores: optional reflection prompts under the score list. All the prompts
   share one grid cell, so the card keeps the height of the longest and the arrows stay put. */
.sx .beyond .ph-icon { background: var(--teal); box-shadow: 0 0 0 3px #d4ebe6; }
.sx .beyond .ph-icon .icon { color: #ffffff; }
.sx .bt-tools { display: flex; gap: 2px; margin: -2px -6px -2px auto; }
.sx .bt-tool { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); }
.sx .bt-tool .icon { width: 17px; height: 17px; transition: transform 0.2s; }
.sx .bt-tool:hover { border-color: var(--blue-line); background: var(--blue-soft); color: var(--navy); }
.sx .beyond.is-min .bt-min .icon { transform: rotate(180deg); }
.sx .beyond.is-min > .panel-head { border-bottom: 0; border-radius: var(--radius); }
.sx .beyond[hidden], .sx .bt-body[hidden], .sx .bt-restore[hidden] { display: none !important; }
.sx .bt-stage { display: grid; padding: 12px 16px; }
.sx .bt-item { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0.2s; }
.sx .bt-item.is-on { visibility: visible; opacity: 1; }
.sx .bt-item h3 { margin-bottom: 5px; font-size: 15.5px; letter-spacing: -0.1px; }
.sx .bt-item p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.sx .bt-item .bt-lead { margin-bottom: 5px; font-size: 13.5px; color: var(--muted); }
.sx .bt-item blockquote { margin: 0; padding: 7px 12px 8px; border-left: 3px solid var(--teal); border-radius: 0 9px 9px 0; background: var(--teal-soft); color: var(--ink); font-size: 14px; line-height: 1.55; }
.sx .bt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px 8px 16px; border-top: 1px solid var(--line-2); border-radius: 0 0 var(--radius) var(--radius); background: var(--tint); }
.sx .bt-note { font-size: 12px; line-height: 1.4; color: var(--faint); }
.sx .bt-note span { display: block; }
.sx .bt-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sx .bt-pos { min-width: 44px; font-size: 13px; font-weight: 750; text-align: center; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
/* When the card is hidden, a small button in its place brings it back. It sits on the blue band. */
.sx .bt-restore { display: inline-flex; align-self: flex-start; justify-self: start; align-items: center; gap: 8px; min-height: 38px; padding: 6px 15px 6px 11px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #ffffff; font-size: 14px; font-weight: 700; transition: background 0.15s, border-color 0.15s; }
.sx .bt-restore .icon { width: 17px; height: 17px; color: #9fd8cf; }
.sx .bt-restore:hover { border-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.18); }
.sx .bt-restore:focus-visible { outline: 3px solid #e6c172; outline-offset: 2px; }

/* 5g. Overlay notes (opened from under the chart) */
.sx .note-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.sx .note-card { padding: 12px 14px; border: 1px solid var(--line); border-top: 4px solid var(--nc, var(--blue)); border-radius: 12px; background: #ffffff; }
.sx .note-card h3 { margin-bottom: 4px; font-size: 15px; }
.sx .note-card p { margin: 5px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.sx .context-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 8px 0; }
.sx .context-point { padding: 9px 11px; border-radius: 9px; background: var(--soft); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.sx .context-point b { display: block; margin-bottom: 3px; color: var(--ink); }

/* Disclosures: longer explanations stay one click away */
.sx .disclose { margin-top: 12px; }
.sx .disclose-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 10px 4px 8px; text-align: left; border: 1px solid var(--line-2); border-radius: 8px; background: #ffffff; color: var(--blue); font-size: 13.5px; font-weight: 700; }
.sx .disclose-btn .icon { width: 16px; height: 16px; }
.sx .disclose-btn .chev { width: 14px; height: 14px; color: var(--muted); transition: transform 0.2s; }
.sx .disclose-btn[aria-expanded='true'] .chev { transform: rotate(180deg); }
.sx .disclose-btn:hover { border-color: var(--blue-line); background: var(--blue-soft); color: var(--navy); }
.sx .disclose-body { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.sx .more-inline { display: inline; margin-left: 4px; padding: 0; border: 0; background: none; color: var(--blue); font-size: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sx .more-inline[aria-expanded='true'] { display: none; }

/* print-only blocks stay hidden on screen */
.sx .print-head, .sx .print-scores, .sx .chc-print { display: none; }

/* ---- 6. CHC abilities ------------------------------------------------ */
.sx .chc-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.sx .chc-map { padding: 20px; background: #f7f9fd; border-right: 1px solid var(--line-2); border-radius: var(--radius) 0 0 var(--radius); }
.sx .g-factor { display: block; width: 100%; padding: 14px 18px; text-align: center; border: 1px solid #c9d8ee; border-radius: 12px; background: #e8effa; }
.sx .g-factor b { display: block; font-size: 16.5px; color: var(--navy); }
.sx .g-factor span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.sx .g-factor:hover { border-color: var(--blue-line); }
.sx .g-factor[aria-pressed='true'] { border-color: var(--blue); background: #dfe9f9; box-shadow: inset 0 0 0 1px var(--blue); }
.sx .hierarchy-line { width: 2px; height: 20px; margin: 0 auto; background: #c3d0e2; }
.sx .broad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Group colors follow the broad groupings in Schneider & McGrew (2012). */
.sx [data-group='reason'] { --g: #2459a3; --gb: #e6eefa; --gl: #b5c9e6; }
.sx [data-group='memory'] { --g: #6b4596; --gb: #efe8f8; --gl: #d4c4ea; }
.sx [data-group='speed'] { --g: #a3385f; --gb: #fae8ee; --gl: #ecc3d1; }
.sx [data-group='percept'] { --g: #0f6b65; --gb: #e4f3f0; --gl: #bfe0d9; }
.sx [data-group='knowledge'] { --g: #8a4b1c; --gb: #f7eadf; --gl: #e8cdb5; }
.sx .ability-btn { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 9px 12px; text-align: left; border: 1.5px solid var(--line); border-radius: 12px; background: #ffffff; transition: border-color 0.15s, box-shadow 0.15s; }
.sx .ability-btn:hover { border-color: var(--gl); box-shadow: 0 2px 8px rgba(15, 35, 65, 0.08); }
.sx .ability-btn[aria-pressed='true'] { border-color: var(--g); background: var(--gb); box-shadow: inset 4px 0 0 var(--g); }
.sx .ability-code, .sx .other-btn, .sx .ability-detail .eyebrow { font-feature-settings: 'cv05' 1; }
.sx .ability-code { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 50px; height: 40px; padding: 0 6px; border: 1px solid var(--gl); border-radius: 10px; background: var(--gb); color: var(--g); font-size: 17px; font-weight: 800; }
.sx .ability-btn[aria-pressed='true'] .ability-code { background: #ffffff; }
.sx .chc-groups { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.sx .chc-groups span { display: inline-flex; align-items: center; gap: 6px; }
.sx .chc-groups i { width: 11px; height: 11px; border-radius: 3px; background: var(--g); }
.sx .ability-detail .eyebrow[data-group] { color: var(--g); }
.sx .ability-name { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.sx .ability-name small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.sx .other-abilities { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; font-size: 13.5px; font-weight: 750; color: var(--faint); }
.sx .other-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sx .other-btn { min-width: 46px; min-height: 34px; border: 1.5px solid var(--line); border-radius: 8px; background: #ffffff; color: var(--muted); font-size: 14px; font-weight: 750; }
.sx .other-btn[aria-pressed='true'] { border-color: var(--blue); background: var(--blue-soft); color: var(--navy); }
.sx .chc-map .disclose { margin-top: 14px; }
.sx .ability-detail { min-height: 520px; padding: 22px 24px; }
.sx .ability-detail h3 { margin: 2px 0 4px; font-size: 28px; letter-spacing: -0.6px; }
.sx .ability-detail .alias { margin-bottom: 12px; font-size: 14.5px; color: var(--muted); }
.sx .ability-detail .description { margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; background: #f4f7fc; font-size: 17px; line-height: 1.6; color: var(--ink); }
/* Detail tabs: a segmented track, the open tab filled in the ability's group color */
.sx .dtabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; padding: 4px; border: 1px solid var(--line-2); border-radius: 13px; background: #eef2f8; box-shadow: inset 0 1px 2px rgba(15, 35, 65, 0.06); }
.sx .dtabs button { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 6px 10px; white-space: nowrap; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font-size: 14px; font-weight: 700; line-height: 1.2; text-align: left; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.sx .dtabs .icon { width: 18px; height: 18px; color: var(--g, var(--blue)); }
.sx .dtabs button:hover { background: #ffffff; color: var(--navy); box-shadow: 0 1px 3px rgba(15, 35, 65, 0.1); }
.sx .dtabs button[aria-selected='true'] { background: var(--g, var(--navy)); color: #ffffff; box-shadow: 0 2px 8px rgba(15, 35, 65, 0.25); }
.sx .dtabs button[aria-selected='true'] .icon { color: #ffffff; }
.sx .ability-detail h4 { margin: 16px 0 8px; font-size: 13px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--blue); }
.sx .dpanel > h4:first-child, .sx .dpanel > .acad-grid:first-child h4 { margin-top: 0; }
.sx .ability-detail ul { padding-left: 20px; }
.sx .ability-detail li { margin-bottom: 5px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.sx .narrow .code { margin: 0 4px; padding: 1px 6px; border-radius: 5px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 750; }
.sx .interpretation { margin-top: 16px; padding: 12px 15px; border-left: 3px solid var(--gold); border-radius: 0 9px 9px 0; background: var(--gold-soft); color: #5e4716; font-size: 15px; line-height: 1.65; }
.sx .acad-grid { display: grid; gap: 10px; }
.sx .acad { padding: 12px 15px; border: 1px solid var(--line-2); border-radius: 11px; background: #fbfcfe; }
.sx .acad h4 { margin: 0 0 4px; }
.sx .acad p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.sx .strength-box { padding: 12px 16px; border: 1px solid var(--teal-line); border-radius: 11px; background: var(--teal-soft); }
.sx .ability-detail .strength-box h4 { margin: 0 0 4px; color: var(--teal-ink); }
.sx .strength-box p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.sx .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sx table.measured { width: 100%; border-collapse: collapse; font-size: 15px; }
.sx table.measured th, .sx table.measured td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.sx table.measured thead th { font-size: 12.5px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--faint); background: none; position: static; }
.sx table.measured tbody th { white-space: nowrap; font-weight: 750; color: var(--ink); }

/* ---- 7. SLD reference ------------------------------------------------ */
.sx .sld-layout { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 20px; }
.sx .sld-inputs { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.sx .sld-inputs .helper { margin-top: 0; }
.sx .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sx .sld-output { padding: 22px 24px; }
.sx .sld-output h3 { margin-bottom: 6px; font-size: 20px; }
.sx .sld-output .note { margin-bottom: 0; }
.sx .sld-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px 0 14px; }
.sx .sld-result strong { display: block; font-size: 36px; line-height: 1.1; letter-spacing: -0.8px; color: var(--ink); }
.sx .sld-result strong.gold { color: var(--gold-ink); }
.sx .sld-result span { font-size: 13.5px; color: var(--muted); }
.sx .sld-mini-chart { display: block; width: 100%; max-width: 700px; height: auto; margin: 0 0 10px; }
.sx .sld-comparison { margin-bottom: 10px; padding: 12px 16px; border: 1px solid var(--gold-line); border-radius: 10px; background: var(--gold-soft); font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.sx .subsection { margin-top: 18px; }
.sx .subsection > summary { padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff; color: var(--ink); font-size: 15.5px; font-weight: 750; cursor: pointer; }
.sx .subsection[open] > summary { border-radius: 12px 12px 0 0; }
.sx .table-wrap { overflow: hidden; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; background: #ffffff; }
.sx .sld-table { max-height: 380px; overflow: auto; }
.sx table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sx caption { padding: 12px 16px; text-align: left; caption-side: top; font-size: 14px; line-height: 1.55; color: var(--muted); }
.sx thead th { position: sticky; top: 0; z-index: 1; background: #f2f6fb; color: var(--ink-2); font-size: 13.5px; }
.sx .sld-table th, .sx .sld-table td, .sx .conversion-scroll th, .sx .conversion-scroll td { padding: 9px 16px; text-align: center; font-size: 15px; border-bottom: 1px solid var(--line-2); }
.sx .sld-table tbody th { font-weight: 650; }
.sx .sld-table tr.current { background: #e7eefa; box-shadow: inset 4px 0 var(--blue); }
.sx .selected-col { color: var(--blue); font-weight: 800; }

/* ---- 8. Report language ---------------------------------------------- */
.sx .report-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.sx .report-settings { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.sx .report-settings .helper { margin-top: -4px; }
.sx .report-settings .disclose { margin-top: 4px; }
.sx .report-settings .disclose-btn { width: 100%; }
.sx .report-settings .disclose-btn .chev { margin-left: auto; }
.sx .checks { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; border: 0; }
.sx .checks legend { margin-bottom: 6px; font-size: 13.5px; font-weight: 750; color: var(--muted); }
.sx .checks label { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--ink-2); }
.sx .checks input { width: 18px; height: 18px; accent-color: var(--navy); }
.sx .band-table { font-size: 14px; }
.sx .band-table caption { padding: 0 0 8px; font-size: 13.5px; }
.sx .band-table th, .sx .band-table td { padding: 7px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.sx .band-table thead th { position: static; background: none; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--faint); }
.sx .band-table tbody th { font-weight: 700; color: var(--ink); }
.sx .band-table tbody th small { display: block; margin: 1px 0 0 17px; font-size: 13px; font-weight: 500; color: var(--muted); }
.sx .band-table td { white-space: nowrap; }
.sx .band-dot { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(15, 35, 65, 0.18); border-radius: 3px; }
.sx .report-output { padding: 20px 22px; }
.sx .rl-group h4, .sx .tips h4 { margin-bottom: 10px; font-size: 13px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--blue); }
.sx .rl-group + .rl-group { margin-top: 22px; }
.sx .rl-block { position: relative; margin-bottom: 10px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: #fbfcfe; }
.sx .rl-label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding-right: 76px; font-size: 14px; font-weight: 750; color: var(--muted); }
.sx .rl-label .num { width: 21px; height: 21px; font-size: 11.5px; }
.sx .rl-text { font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.sx .rl-block .btn.sm { position: absolute; top: 9px; right: 10px; }
.sx .tips-wrap { margin-top: 18px; }
.sx .tips { margin-top: 10px; padding: 14px 18px; border: 1px solid var(--teal-line); border-radius: 12px; background: var(--teal-soft); }
.sx .tips h4 { color: var(--teal-ink); }
.sx .tips ul { padding-left: 20px; }
.sx .tips li { margin-bottom: 4px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* ---- 9. Conversion table --------------------------------------------- */
.sx .conversion-panel { overflow: hidden; }
.sx .reference-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.sx .reference-tools .field { min-width: 250px; }
.sx .small-count { margin: 0 0 10px auto; font-size: 14px; color: var(--muted); }
.sx .conversion-scroll { max-height: 470px; overflow: auto; }
.sx .conversion-scroll tbody tr:hover { background: #f3f7fc; }
.sx .table-mean { background: #e7eefa; font-weight: 750; }
.sx thead th small { font-size: 12px; font-weight: 500; color: var(--faint); }
.sx .table-foot { padding: 12px 20px 16px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--muted); }

/* ---- 10. Notes and sources -------------------------------------------- */
.sx .guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sx .guide-card { padding: 20px 22px; }
.sx .guide-number { display: block; margin-bottom: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--blue); }
.sx .guide-card h3 { margin-bottom: 8px; font-size: 19px; }
.sx .guide-card p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.sx .guide-card .mini { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--blue-soft); color: var(--navy); font-size: 14.5px; }
.sx .faq { margin-top: 18px; padding: 6px 22px; }
.sx .faq details { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.sx .faq details:last-child { border-bottom: 0; }
.sx .faq summary { cursor: pointer; font-size: 16.5px; font-weight: 650; color: var(--ink); }
.sx .faq p { max-width: 1000px; margin-top: 10px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.sx .sources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); gap: 28px; margin-top: 18px; padding: 22px 24px; scroll-margin-top: calc(var(--sx-top) + 76px); }
.sx .sources h3 { margin-bottom: 8px; font-size: 21px; }
.sx .sources p:not(.eyebrow) { font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.sx .source-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; }
.sx .source-list li { scroll-margin-top: calc(var(--sx-top) + 90px); }
.sx .source-list a, .sx .source-list .src-title { display: block; font-size: 15px; font-weight: 750; color: var(--blue); text-decoration: none; }
.sx .source-list .src-title { color: var(--ink); }
.sx .source-list a:hover { text-decoration: underline; }
.sx .source-list span:not(.src-title) { display: block; margin-top: 3px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.sx .closing-note { margin: 28px 2px 0; font-size: 14px; color: var(--muted); }

/* ---- 11. Dialog, toast, utilities ------------------------------------ */
.sx .sx-dialog { width: min(1200px, 96vw); max-height: 92vh; padding: 0; border: 0; border-radius: 16px; box-shadow: 0 30px 80px rgba(10, 25, 50, 0.45); }
.sx .sx-dialog::backdrop { background: rgba(10, 22, 44, 0.64); }
.sx .dlg-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); background: #ffffff; }
.sx .dlg-head h2 { font-size: 18px; }
.sx .dlg-close { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff; font-size: 26px; line-height: 1; }
.sx .sx-dialog figure { margin: 0; padding: 18px; }
.sx .sx-dialog img { display: block; width: 100%; height: auto; }
.sx .sx-dialog figcaption { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.sx .toast { position: fixed; left: 50%; bottom: 24px; z-index: 1200; display: flex; align-items: center; gap: 14px; max-width: min(660px, 92vw); padding: 12px 14px 12px 18px; transform: translateX(-50%); border-radius: 12px; background: #15253b; color: #ffffff; font-size: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.sx .toast-act { flex-shrink: 0; padding: 6px 13px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 8px; background: transparent; color: #ffffff; font-weight: 750; }
.sx .toast-act:hover { background: rgba(255, 255, 255, 0.12); }
.sx [hidden] { display: none !important; }
.sx .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sx .skip { position: absolute; top: -80px; left: 20px; z-index: 300; padding: 12px 16px; border-radius: 8px; background: #ffffff; color: var(--navy); font-weight: 700; }
.sx .skip:focus { top: 12px; }
.sx kbd { margin-left: 6px; padding: 0 5px; border: 1px solid rgba(21, 37, 59, 0.3); border-radius: 4px; font: inherit; font-size: 11.5px; }

/* ---- 12. Presentation mode (body.meeting) ----------------------------- */
.sx .pbar { position: sticky; top: 0; z-index: 95; background: rgba(12, 28, 54, 0.97); color: #e9f0fa; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.sx .pbar-in { display: flex; align-items: center; gap: 16px; max-width: 1560px; margin: 0 auto; padding: 10px 24px; }
/* The chart shows its own title while presenting, so the bar does not repeat it. */
.sx .pbar-title { display: none; }
.sx .pbar-nav { display: flex; align-items: center; gap: 10px; }
.sx .p-pos { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 240px; font-size: 15.5px; white-space: nowrap; }
.sx .p-name { color: #ffffff; font-weight: 750; }
.sx .p-count { color: #a9bbd6; font-size: 14px; }
.sx .pbar-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sx .pbtn { min-height: 40px; padding: 6px 14px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 9px; background: rgba(255, 255, 255, 0.06); color: #ffffff; font-size: 14.5px; font-weight: 650; }
.sx .pbtn:hover { background: rgba(255, 255, 255, 0.15); }
.sx .pbtn.icon { width: 46px; padding: 0; font-size: 28px; line-height: 1; }
.sx .pbtn[aria-pressed='true'], .sx .pbtn[aria-expanded='true'] { background: #e6c172; border-color: #e6c172; color: #1a2a40; }
.sx .pbtn.exit { background: #ffffff; border-color: #ffffff; color: #15253b; }
.sx .pseg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.sx .pseg button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; white-space: nowrap; border: 0; border-radius: 7px; background: transparent; color: #d7e2f2; font-size: 13.5px; font-weight: 650; }
.sx .pseg button .icon { width: 18px; height: 18px; }
.sx .pseg button[aria-pressed='true'] { background: #ffffff; color: #15253b; }
.sx .pbar .menu-pop { color: var(--ink-2); }
.sx .pbar .menu-pop.wide { min-width: 520px; }
.sx .pbar #p-overlays:not(:has(.set-row)) { min-width: 300px; }
.sx .pbar .ov-list { gap: 2px; }

body.meeting { background: #0e2240; }
body.meeting .navbar, body.meeting .site-footer-unified { display: none !important; }
.meeting .sx { zoom: 1; min-height: 100vh; padding-bottom: 30px; background: linear-gradient(160deg, #0e2240 0%, #163a72 100%); }
.meeting .sx .ws-band { padding: 0; background: none; }
.meeting .sx .sx-bar, .meeting .sx .side-stack, .meeting .sx .scores-panel, .meeting .sx .section, .meeting .sx .closing-note,
.meeting .sx .chart-head, .meeting .sx .ov-rail, .meeting .sx .ov-settings, .meeting .sx .ro-steps,
.meeting .sx .scroll-hint, .meeting .sx .skip, .meeting .sx .ro-compare { display: none !important; }
.meeting .sx-shell { max-width: 1600px; padding: 0 24px; }
.meeting .sx .workspace { margin-top: 18px; }
.meeting .sx .stage { grid-template-columns: minmax(0, 1fr) 430px; grid-template-rows: auto; grid-template-areas: 'chart explain'; gap: 18px; }
.meeting .sx .chart-body { display: block; }
.meeting .sx .chart-main { padding-bottom: 0; }
.meeting .sx .chart-foot { display: block; margin: 2px 18px 14px; padding: 10px 14px; }
.meeting .sx .chart-caption { display: block; line-height: 1.6; }
.meeting .sx #context { display: none !important; }
.meeting .sx .chart-panel, .meeting .sx .side-panel { border: 0; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.meeting .sx .side-panel .panel-head { display: none; }
.meeting .sx .chart-scroll { padding: 12px 0 0; }
.meeting .sx .chart-scroll svg { min-width: 0; max-height: calc(100vh - 116px); }
.meeting .sx .chart-scroll [data-drag] { cursor: pointer; }
.meeting .sx .legend:not([hidden]) { display: flex; }
.meeting .sx .legend .key-chip { font-size: 15.5px; }
.meeting .sx .chart-caption { font-size: 15px; }
.meeting .sx .ro-score { padding-top: 16px; }
.meeting .sx .ro-eyebrow { display: none; }
.meeting .sx .ro-name { font-size: 25px; }
.meeting .sx .ro-value b { font-size: 48px; }
.meeting .sx .ro-block.family p { margin-bottom: 6px; font-size: 17.5px; line-height: 1.5; }
.meeting .sx .stat-list dd { font-size: 16px; }
.meeting .sx .stat-list dd b { font-size: 17px; }
.meeting .sx .tile b { font-size: 23px; }
.meeting .sx .tile small { font-size: 13.5px; }
/* Move below the chart: the explanation sits under the chart in its wide layout, with the view
   switch in its header, and the chart gives up some height so both fit on the screen. */
.meeting.p-below .sx .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'chart' 'explain'; }
.meeting.p-below .sx .chart-scroll svg { max-height: 58vh; }
.meeting.p-below .sx .side-panel .panel-head { display: flex; }
.sx .ro-place { display: block; width: fit-content; margin: 4px 18px 0 auto; padding: 4px 2px; font-size: 14px; }
.sx .ro-head .ro-place { display: inline-block; margin: 0 0 0 14px; }

/* Wide screens: the chart and the Explain panel read as one card, chart on top and the
   explanation straight underneath. */
@media (min-width: 1100px) {
  body:not(.meeting) .sx .stage { row-gap: 0; }
  body:not(.meeting) .sx .chart-panel { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 1px 2px rgba(15, 35, 65, 0.07); }
  body:not(.meeting) .sx .chart-panel .ov-rail { border-bottom-left-radius: 0; }
  body:not(.meeting) .sx #readout { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
  body:not(.meeting) .sx #readout > .panel-head { border-radius: 0; }
  /* The right column ends level with the Explain panel: the Beyond the scores card takes up
     the room left under the score list (prompt at the top, arrows at the bottom), up to a
     modest height, so a very tall Explain panel never leaves a mostly empty card. */
  body:not(.meeting) .sx .side-stack { align-self: stretch; }
  body:not(.meeting) .sx .beyond:not(.is-min) { display: flex; flex: 1 1 auto; flex-direction: column; max-height: 380px; }
  body:not(.meeting) .sx .beyond:not(.is-min) > .bt-body { display: flex; flex: 1 1 auto; flex-direction: column; }
  body:not(.meeting) .sx .beyond .bt-stage { flex: 1 1 auto; align-content: start; }
  /* On the blue band the joined card casts one shadow; the Explain half's shadow stays below it. */
  body:not(.meeting) .sx .ws-band .chart-panel { box-shadow: 0 1px 2px rgba(4, 12, 28, 0.2), 0 12px 30px rgba(4, 12, 28, 0.26); }
  body:not(.meeting) .sx .ws-band #readout { box-shadow: 0 18px 32px -12px rgba(4, 12, 28, 0.5); }
}

/* ---- 13. Responsive ----------------------------------------------------- */
/* From 1100px up the page is scaled down (section 2), so it always has at least 1375px of
   layout room there. The layout breakpoints below therefore start under 1100px; only the
   presentation rules, which are not scaled, use wider breakpoints.
   Secondary actions shrink to icons first; their names stay for screen readers and tooltips. */
@media (max-width: 1099px) {
  .sx .sx-actions .btn.ghost .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .sx .sx-actions .btn.ghost { padding: 8px 10px; }
}
@media (max-width: 1099px) {
  .sx .act-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .sx .act-btn { padding: 8px 10px; }
}
@media (max-width: 1400px) {
  .sx .pseg button .icon { display: none; }
  .sx .p-pos { min-width: 200px; }
}
@media (max-width: 1099px) {
  .sx .sx-tabs .t-long { display: none; }
  .sx .sx-tabs .t-short { display: inline; }
  .sx .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: 'chart chart' 'scores explain'; }
  /* the rail becomes a wrapping row above the chart; the chart draws its own legend */
  .sx .chart-body { grid-template-columns: minmax(0, 1fr); }
  .sx .ov-rail { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px 18px; padding: 8px 14px; border-right: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; }
  .sx .rail-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
  .sx .rail-head { padding-left: 0; }
  .sx .ov-list, .sx .row-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px 4px; }
  .sx .rows-group { margin-top: 0; padding-top: 0; border-top: 0; }
  .sx .ov-notes .guide-list { grid-template-columns: minmax(0, 1fr); }
  .sx .ov-note { display: none; }
  .sx .set-pop { top: calc(100% + 4px); left: 14px; }
  .sx .ro-wide { grid-template-columns: minmax(0, 1fr); }
  .sx .ro-wide .ro-score { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .sx .ro-wide .ro-body { grid-template-columns: minmax(0, 1fr); }
  .sx .ro-wide .clinical .stat-list { columns: 1; }
  .sx .ro-wide .visual.wide { grid-template-columns: minmax(0, 1fr); }
  .sx .ro-head .seg.views { order: 5; flex: 1 1 100%; margin: 0; }
  .sx .ro-head .seg.views button { flex: 1; }
  .sx .ro-head .ro-steps { margin-left: auto; }
}
@media (max-width: 1180px) {
  .meeting .sx .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'chart' 'explain'; }
  .sx .pbar-in { flex-wrap: wrap; gap: 10px; }
  .sx .pseg button span { display: none; }
  .sx .pseg button .icon { display: block; } /* icons return when the labels hide, so the buttons are not blank */
}
@media (max-width: 1000px) {
  .sx .chc-layout, .sx .sld-layout, .sx .report-layout { grid-template-columns: minmax(0, 1fr); }
  .sx .chc-map { border-right: 0; border-bottom: 1px solid var(--line-2); border-radius: var(--radius) var(--radius) 0 0; }
  .sx .ability-detail { min-height: 0; }
  .sx .guide-grid, .sx .sources { grid-template-columns: minmax(0, 1fr); }
  .sx .sec-head { flex-direction: column; align-items: flex-start; }
  .sx .sec-actions { justify-content: flex-start; }
  .sx .p-pos { min-width: 0; }
  .sx .chart-head .title-field { order: 5; flex: 1 1 100%; max-width: none; margin-left: 0; }
}
@media (max-width: 760px) {
  /* one column: chart, scores, Explain, then the optional Beyond the scores card */
  .sx .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'chart' 'scores' 'explain' 'beyond'; }
  .sx .side-stack { display: contents; }
  .sx .beyond, .sx .bt-restore { grid-area: beyond; }
}
@media (max-width: 640px) {
  .sx { font-size: 15px; }
  .sx-shell { padding: 0 14px; }
  .sx .sx-bar-in { flex-wrap: wrap; gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .sx .sx-tabs { flex: 1 1 100%; order: 2; }
  .sx .sx-tabs a { gap: 6px; padding: 0 10px; font-size: 13.5px; }
  .sx .sx-actions { margin-left: auto; }
  .sx .sx-actions .btn { padding: 8px 9px; }
  .sx .btn.launch { min-height: 42px; padding: 4px 14px 4px 5px; font-size: 15px; }
  .sx .launch-ic { width: 30px; height: 30px; }
  .sx .sec-head h2 { font-size: 26px; }
  .sx .panel-head { padding: 10px 14px; }
  .sx .chart-head .chart-types { margin-left: 0; }
  .sx .chart-head .chart-types span { display: none; }
  .sx .set-pop { left: 14px; right: 14px; width: auto; max-width: none; }
  .sx .chart-foot { margin-left: 10px; margin-right: 10px; }
  .sx .set-row [data-sld='ability'], .sx .set-row [data-sld='test'] { width: 100%; }
  .sx .set-row label { flex: 1 1 100%; }
  .sx .set-row .fld.fnum { width: 100%; }
  .sx .dc-group { flex-direction: column; gap: 6px; }
  .sx .dc-label { flex-basis: auto; padding: 0; }
  .sx .menu-pop, .sx .menu-pop.wide { position: fixed; left: 10px; right: 10px; top: auto; min-width: 0; width: auto; max-height: 70vh; overflow: auto; }
  .sx .context-points, .sx .two-col, .sx .source-list, .sx .pair { grid-template-columns: minmax(0, 1fr); }
  .sx .broad-grid { gap: 8px; }
  .sx .ability-btn { gap: 8px; padding: 9px; }
  .sx .ability-detail { padding: 18px; }
  .sx .ability-detail h3 { font-size: 24px; }
  .sx .dtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx .dtabs button { white-space: normal; }
  .sx .sld-result strong { font-size: 28px; }
  .sx .reference-tools .field { min-width: 0; flex: 1 1 100%; }
  .sx .small-count { margin-left: 0; }
  .sx .pbtn { padding: 6px 10px; font-size: 13.5px; }
  .sx .seg.views button { font-size: 13px; }
}
@media (max-width: 520px) {
  .sx .broad-grid { grid-template-columns: minmax(0, 1fr); }
  .sx .ability-btn { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sx * { transition: none !important; scroll-behavior: auto !important; }
}
/* ---- 14. Print: one-page score summary, references on request -----------
   Score summary (the default, and what the browser's own print command gives):
   dated header, chart with its caption, and a table of the plotted scores.
   Summary with references (body[data-print-scope='full']) adds the ten CHC
   definitions in report wording, the SLD lookup if it has been used, and sources.
   Controls, the score table, the Explain panel, and site chrome never print, and
   backgrounds are dropped to save ink. */
@media print {
  @page { margin: 0.5in 0.55in; }
  html, body { background: #ffffff !important; }
  .sx { zoom: 1 !important; }
  .navbar, .site-footer-unified,
  .sx .skip, .sx .sx-hero, .sx .sx-bar, .sx .pbar, .sx .side-stack, .sx .scores-panel, .sx #readout, .sx .chart-head, .sx .ov-rail, .sx .ov-settings,
  .sx .scroll-hint, .sx .legend, .sx #context, .sx .ro-foot, .sx .disclose-btn,
  .sx #report, .sx #conversions, .sx #notes > .sec-head,
  .sx .guide-grid, .sx .faq, .sx .sec-actions, .sx .chc-layout, .sx .chc-groups, .sx #chc > .panel, .sx .closing-note, .sx .toast, .sx .sx-dialog,
  .sx .sld-inputs, .sx .subsection, .sx .note a[href^='#'], .sx .menu-pop, .sx .palette,
  .sx #chc .sec-head p:not(.eyebrow), .sx #sld .sec-head p:not(.eyebrow) { display: none !important; }
  body:not([data-print-scope='full']) .sx #chc, body:not([data-print-scope='full']) .sx #sld, body:not([data-print-scope='full']) .sx #notes { display: none !important; }
  .sx { padding: 0; background: #ffffff; color: #111111; font-size: 10pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .sx-shell { max-width: none; padding: 0; }
  .sx .ws-band { padding: 0; background: none; }
  .sx a { color: inherit; text-decoration: none; }
  .sx .eyebrow { margin-bottom: 3pt; font-size: 7.5pt; color: #444444; }

  .sx .print-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12pt; margin: 0 0 8pt; padding: 0 0 5pt; border-bottom: 1.5pt solid #111111; }
  .sx .print-head b { display: block; font-size: 15pt; line-height: 1.15; letter-spacing: -0.3pt; }
  .sx .print-head span { display: block; font-size: 8pt; line-height: 1.5; color: #444444; }
  .sx .print-head > div:last-child { max-width: 58%; text-align: right; }

  .sx .panel { background: #ffffff; border: 1px solid #c8c8c8; border-radius: 4pt; box-shadow: none !important; break-inside: avoid; }
  .sx .workspace, .sx .stage, .sx .chart-body { display: block; margin: 0; }
  .sx .chart-main { padding: 0; }
  .sx .chart-panel { margin: 0 0 6pt; }
  .sx .chart-scroll { overflow: visible; padding: 4pt 0 0; }
  .sx .chart-scroll svg { min-width: 0; width: 100%; height: auto; max-height: 5.4in; }
  .sx .chart-foot { display: block; margin: 0; padding: 0; border-radius: 0; background: none; }
  .sx .chart-caption { display: block; margin: 0; padding: 4pt 10pt 5pt; border: 0; border-top: 1px solid #dddddd; border-radius: 0; background: none; font-size: 8pt; line-height: 1.45; color: #333333; }

  .sx .print-scores { display: block; break-inside: avoid; }
  .sx .print-scores table { width: 100%; border-collapse: collapse; font-size: 8.3pt; text-align: left; }
  .sx .print-scores caption { padding: 0 0 3pt; font-size: 7.5pt; line-height: 1.4; text-align: left; color: #444444; }
  .sx .print-scores th, .sx .print-scores td { padding: 2.5pt 5pt; text-align: left; vertical-align: top; white-space: nowrap; border-bottom: 1px solid #dddddd; font-size: 8.3pt; }
  .sx .print-scores tbody th, .sx .print-scores td:last-child { white-space: normal; }
  .sx .print-scores thead th { position: static; background: none; border-bottom: 1px solid #999999; font-size: 7pt; letter-spacing: 0.3pt; text-transform: uppercase; color: #333333; }
  .sx .print-scores thead th.lc { text-transform: none; font-size: 8pt; }
  .sx .print-scores tbody th { color: #111111; font-weight: 600; }
  .sx .print-dot { display: inline-flex; align-items: center; justify-content: center; width: 13pt; height: 13pt; border-radius: 50%; color: #ffffff; font-size: 7.5pt; font-weight: 700; }

  .sx .section { margin-top: 0; }
  .sx .sec-head { display: block; margin: 0 0 6pt; break-after: avoid; }
  .sx .sec-head h2 { padding-left: 0; font-size: 14pt; margin-bottom: 3pt; }
  .sx .sec-head h2::before { display: none; }
  .sx .sec-head p:not(.eyebrow) { font-size: 9pt; color: #333333; }
  .sx .note, .sx .note.gold { margin: 5pt 0; padding: 5pt 8pt; border: 1px solid #cccccc; border-radius: 3pt; background: none; font-size: 8.3pt; line-height: 1.45; color: #222222; break-inside: avoid; }
  .sx #chc { break-before: page; }
  .sx .chc-print { display: grid; grid-template-columns: 1fr 1fr; gap: 5pt; margin-top: 5pt; }
  .sx .chc-print article { padding: 4.5pt 7pt; border: 1px solid #cccccc; border-radius: 3pt; break-inside: avoid; }
  .sx .chc-print h3 { margin: 0 0 2pt; font-size: 9pt; }
  .sx .chc-print p { margin: 0 0 2.5pt; font-size: 7.8pt; line-height: 1.42; color: #222222; }
  .sx .chc-print p:last-child { margin: 0; }

  .sx #sld { display: none; }
  body.sld-used .sx #sld { display: block; break-before: page; }
  .sx .sld-layout { display: block; }
  .sx .sld-output { padding: 8pt 10pt; }
  .sx .sld-output h3 { margin: 0 0 4pt; font-size: 11pt; }
  .sx .sld-result { gap: 6pt; padding: 4pt 0; }
  .sx .sld-result strong { font-size: 16pt; }
  .sx .sld-result span { font-size: 7.5pt; color: #444444; }
  .sx .sld-mini-chart { max-width: 5.5in; }
  .sx .sld-comparison { padding: 5pt 8pt; border: 1px solid #cccccc; background: none; font-size: 8.5pt; line-height: 1.45; color: #222222; }
  .sx .sld-output .helper { font-size: 8pt; line-height: 1.45; color: #333333; }

  .sx #notes { margin-top: 10pt; }
  .sx .sources { display: block; margin-top: 0; padding: 8pt 0 0; border: 0; border-top: 1px solid #999999; border-radius: 0; }
  .sx .sources h3 { font-size: 11pt; }
  .sx .sources p:not(.eyebrow) { margin: 0 0 4pt; font-size: 8pt; color: #333333; }
  .sx .source-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4pt 12pt; margin-top: 6pt; }
  .sx .source-list li { break-inside: avoid; }
  .sx .source-list a, .sx .source-list .src-title { font-size: 8pt; color: #111111; }
  .sx .source-list span:not(.src-title) { margin-top: 1pt; font-size: 7.5pt; line-height: 1.45; color: #444444; }
}