/* Personal reference curves and independent examples, scoped to their screen. */
.demo-entry{display:block;margin-top:.55rem;padding-left:0}
.demo-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.4rem}.demo-toolbar .eyebrow{margin:0;max-width:32ch}.demo-toolbar .button{flex-shrink:0}
.comparison-entry{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem;padding:1.1rem 0;border-block:1px solid var(--line)}.comparison-entry p{font-size:.8125rem;color:var(--muted);max-width:44ch}.comparison-entry .button{font-size:.8125rem}
.in-demo>.sources{display:none}
#demo-screen .demo-notice{background:#0d263b;border:1px solid #416780;border-left:3px solid #8bd5ff;border-radius:8px;padding:15px 19px;color:var(--muted);font-size:.875rem;line-height:1.6}
#demo-screen .demo-notice strong{color:var(--ink);font-weight:650;display:block;margin-bottom:3px}
#demo-screen .reading-key{display:flex;flex-wrap:wrap;gap:10px 26px;padding:26px 0 19px;font-size:.8125rem;color:var(--muted)}
#demo-screen .reading-key>span{display:flex;align-items:center;gap:9px}#demo-screen .reading-key i{display:inline-block;width:21px;flex-shrink:0}#demo-screen .key-curve{height:3px;background:#8bd5ff}#demo-screen .key-reference{border-top:2px dashed #9db5c6}#demo-screen .key-marker{height:11px;width:11px!important;border-radius:50%;background:#65bfff;margin-inline:5px}
#demo-screen .trait{display:grid;grid-template-columns:200px minmax(0,1fr) 100px;align-items:center;gap:0 20px;border-top:1px solid var(--line);padding:25px 0 22px}
#demo-content[data-mode="personal"] .trait{grid-template-columns:200px minmax(0,1fr)}
#demo-content[data-mode="personal"] .area{fill-opacity:.07}
#demo-screen .trait-number{font-size:.8125rem;color:#8bd5ff;font-variant-numeric:tabular-nums;margin-bottom:9px}#demo-screen .trait-number span{font-size:.6875rem;color:var(--muted);margin-left:11px;text-transform:uppercase;letter-spacing:.075em}
#demo-screen h3{font-size:1.05rem;line-height:1.4;letter-spacing:-.015em;font-weight:600;max-width:24ch}#demo-screen .alias{font-size:.8125rem;color:var(--muted);margin-top:3px}#demo-screen .raw-score{line-height:1.1;margin-top:17px;font-variant-numeric:tabular-nums}#demo-screen .score{font-size:2rem;letter-spacing:-.03em}#demo-screen .out-of{font-size:1rem;color:var(--muted)}#demo-screen .small-label{font-size:.75rem;color:var(--muted);margin-top:5px}
#demo-screen .plot{min-width:0;margin:0}#demo-screen .plot svg{display:block;width:100%;height:auto;overflow:visible}#demo-screen .plot svg text{font:14px system-ui,sans-serif;fill:var(--muted)}#demo-screen .area{fill:#75caff;fill-opacity:.15}#demo-screen .axis{stroke:#54728b;stroke-width:1}#demo-screen .reference{stroke:#a8bac8;stroke-width:1.5;stroke-dasharray:4 5}#demo-screen .curve{fill:none;stroke:#9bdcff;stroke-width:2}#demo-screen .marker{stroke:#65bfff;stroke-width:2.5}#demo-screen .point{fill:#65bfff;stroke:#10283c;stroke-width:2}
#demo-screen .plot figcaption{font-size:.6875rem;color:var(--muted);text-align:center;margin-top:2px;line-height:1.5}
#demo-screen .plot svg .reference-label{font-size:12px;font-weight:600}
#demo-screen .standardized-score{display:block;margin-top:.45rem;color:var(--muted);font-size:.8125rem;line-height:1.4;font-weight:550;letter-spacing:0}
#demo-screen .standardized-help{margin:-6px 0 18px;color:var(--muted);font-size:.75rem;line-height:1.5}
@media print{#demo-screen .standardized-score,#demo-screen .standardized-help{color:#000}}
#demo-screen .position{text-align:right}#demo-screen .percentile{font-size:2.3rem;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}#demo-screen .ordinal{font-size:1rem;vertical-align:super;margin-left:1px}#demo-screen .position-copy{font-size:.6875rem;line-height:1.5;color:var(--muted);max-width:17ch;margin:10px 0 0 auto}
#demo-screen .adjustment{grid-column:2;min-width:0;margin-top:12px}#demo-screen .adjustment label{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;font-size:.75rem;color:var(--muted);line-height:1.5}#demo-screen .z-value{color:var(--ink);font-variant-numeric:tabular-nums}#demo-screen .adjustment input{display:block;width:100%;height:44px;cursor:pointer;accent-color:#65bfff;margin:0}#demo-screen .parameters{grid-column:2;font-size:.6875rem;color:var(--muted);line-height:1.6}
#demo-screen .actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;border-top:1px solid var(--line);padding-top:22px;margin-top:3px}#demo-screen .actions button{background:#102c43;border:1px solid #648da9;border-radius:8px;color:var(--ink);min-height:46px;padding:10px 17px;cursor:pointer;font-size:.8125rem}#demo-screen .actions button:hover{background:#173d5b}#demo-screen .actions p{font-size:.8125rem;color:var(--muted)}
#demo-screen .method{margin-top:25px;border-top:1px solid var(--line);padding-top:8px;color:var(--muted)}#demo-screen summary{font-size:.875rem;min-height:48px;cursor:pointer;padding-block:15px;color:var(--ink)}#demo-screen .method-body{max-width:78ch;font-size:.8125rem;padding:0 0 10px}#demo-screen .method-body p+p{margin-top:10px}#demo-screen .method-body a{display:inline-block;padding-block:9px}
/* Real scores adopt the approved five-row layout, retaining their actual 1–5 scale. */
#domain-results{display:block}#domain-results .domain-card{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 28px;padding:24px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
#domain-results .domain-card h4{grid-column:1;grid-row:1}#domain-results .score-value{grid-column:1;grid-row:2;margin-top:12px}#domain-results .score-meter{grid-column:2;grid-row:1;align-self:end}#domain-results .score-range{grid-column:2;grid-row:2;align-self:center;display:block;font-size:.75rem}#domain-results .result-note{grid-column:1/-1;margin-top:14px;max-width:78ch}
@media(max-width:740px){#demo-screen .trait{grid-template-columns:minmax(0,1fr) 95px;gap:0 16px;padding:24px 0}#demo-screen .trait-intro{grid-column:1}#demo-screen .position{grid-column:2;grid-row:1}#demo-screen .plot{grid-column:1/-1;margin-top:10px}#demo-screen .plot svg{max-height:210px}#demo-screen .adjustment,#demo-screen .parameters{grid-column:1/-1}#demo-screen .raw-score{margin-top:11px}#demo-screen .reading-key{gap:11px 18px}#demo-screen .demo-notice{padding:13px 15px;font-size:.8125rem}.demo-toolbar{align-items:flex-start;flex-direction:column}.demo-toolbar .button{font-size:.8125rem}#domain-results .domain-card{grid-template-columns:1fr}#domain-results .score-meter{grid-column:1;grid-row:3;margin-top:15px}#domain-results .score-range{grid-column:1;grid-row:4;margin-top:7px}}
@media(max-width:360px){#demo-screen .trait{grid-template-columns:minmax(0,1fr) 78px;gap:0 10px}#demo-screen h3{font-size:1rem}#demo-screen .trait-number span{font-size:.625rem;letter-spacing:.04em}#demo-screen .percentile{font-size:2rem}#demo-screen .reading-key{font-size:.75rem}#demo-screen .position .small-label{font-size:.6875rem}}
@media(max-width:740px){#demo-content[data-mode="personal"] .trait{grid-template-columns:minmax(0,1fr)}#demo-content[data-mode="personal"] .parameters{grid-column:1}#demo-content[data-mode="personal"] .trait-intro{display:flex;align-items:center;justify-content:space-between;gap:1rem}#demo-content[data-mode="personal"] .raw-score{margin-top:0;white-space:nowrap}#demo-content[data-mode="personal"] h3{max-width:22ch}#demo-content[data-mode="personal"] .score{font-size:1.6rem}}
@media print{.demo-toolbar,.comparison-entry,.demo-entry{display:none!important}#demo-screen .demo-notice{color:#000;background:#fff;border-color:#555}#demo-screen .demo-notice strong,#demo-screen .trait-number,#demo-screen .score,#demo-screen .percentile,#demo-screen .trait-number span,#demo-screen .small-label,#demo-screen .position-copy,#demo-screen .parameters,#demo-screen .plot figcaption,#demo-screen .reading-key,#demo-screen .alias{color:#000}#demo-screen .plot svg text{fill:#000}#demo-screen .curve{stroke:#174f80}#demo-screen .trait{break-inside:avoid}#demo-screen .actions,#demo-screen .adjustment,#demo-screen .method{display:none!important}#domain-results .domain-card{break-inside:avoid;color:#000}}

/* Gold identifies the score; the reference curve and mean retain their colors. */
@media screen and (forced-colors:none){
  #demo-screen{--score-accent:#e6cc93}
  #demo-screen .marker{stroke:var(--score-accent)}
  #demo-screen .point{fill:var(--score-accent)}
  #demo-screen .key-marker{background:var(--score-accent)}
  #demo-screen .score{color:var(--score-accent)}
  #demo-screen .adjustment input{accent-color:var(--score-accent)}
}

/* The five personal curves are part of the result cards. */
#domain-results .domain-card{align-items:start}
#domain-results .standardized-score{grid-column:1;grid-row:3;margin-top:6px}
#domain-results .result-curve{grid-column:2;grid-row:1 / 4;align-self:center}
#domain-results .result-note{grid-column:1/-1;grid-row:4}
@media(max-width:740px){
  #domain-results .domain-card{grid-template-columns:minmax(0,1fr) auto;gap:0 12px}
  #domain-results .domain-card h4{grid-column:1;grid-row:1 / 3}
  #domain-results .score-value{grid-column:2;grid-row:1;margin:0;text-align:right;font-size:1.6rem;white-space:nowrap}
  #domain-results .standardized-score{grid-column:2;grid-row:2;text-align:right;margin-top:5px}
  #domain-results .result-curve{grid-column:1/-1;grid-row:3;margin-top:16px}
  #domain-results .result-note{grid-column:1/-1;grid-row:4;margin-top:4px}
}