/* Shared assessment and admin styles. Extracted from the original assessment. */
/* Layout: left rail of the seven assessment areas + one working column; rail becomes a scrolling strip on phones. */
/* Shared palette: red, navy, light gray, and light pink.
   Accent is a darker red for readable links on pink. */
:root{
  --bg:#F2F3F3; --surface:#FFFFFF; --ink:#000000; --muted:#54565A; --line:#DCE0E4; --control-line:#77818F; --soft:#ECEDEE;
  --heading:#010035; --brand-red:#D0271D; --button-hover:#AA2018; --accent:#B52118; --accent-ink:#FFFFFF; --accent-soft:#FFE5E7;
  --warn:#914000; --warn-soft:#FBEBD7; --crit:#B42318; --crit-soft:#F9E0DD; --ok:#17653F; --ok-soft:#DDF1E6;
  /* Stoplight scale: warm red/orange through yellow to blue-green.
     Labels and numeric ranges convey meaning independently of hue. */
  --l1:#C7442A; --l2:#E8913A; --l3:#F4D35E; --l4:#62B6A0; --l5:#006B60;
  --f-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --f-display:var(--f-body);
  --f-mono:var(--f-body);
  --r:0;
  color-scheme:light;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2354565A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--f-body);font-synthesis:none;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{color:var(--heading);font-family:var(--f-display);font-weight:700;line-height:1.15;margin:12px 0 8px;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:36px}
h2{font-size:28px}
h3{font-size:22px}
h4{font-size:18px}
h5{font-size:16px}
h6{font-size:14px}
p{margin:0}
b,strong{font-weight:700;}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;}

.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.rail{border-right:1px solid var(--line);padding:24px 16px;position:sticky;top:env(safe-area-inset-top,0px);height:calc(100vh - env(safe-area-inset-top,0px));height:calc(100dvh - env(safe-area-inset-top,0px));overflow:auto;display:flex;flex-direction:column;gap:20px;background:var(--bg)}
.brand{display:flex;flex-direction:column;gap:4px;padding-inline:8px}
.brand b{color:var(--brand-red);font-family:var(--f-display);font-size:17px;font-weight:600;}
.nav{display:flex;flex-direction:column;gap:0}
.nav button{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:10px;border:0;background:none;text-align:left;padding:10px 8px;border-radius:0;min-height:40px}
.nav button:hover:not(:disabled):not([aria-current="true"]) .lbl{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:2px;text-underline-offset:6px}
.nav button:disabled{color:var(--muted);cursor:default}
.nav button[aria-current="true"]{background:none}
.nav button[aria-current="true"] .lbl{font-weight:700;text-decoration:underline;text-decoration-color:var(--brand-red);text-decoration-thickness:2px;text-underline-offset:6px}
.nav .ring{width:18px;height:18px}
.nav .ring svg{display:block;width:18px;height:18px}
.nav .lbl{font-size:14px;line-height:1.3;min-width:0}
.nav .sep{height:12px;flex:none;margin:0}
.rail .foot{margin-top:auto;font-size:12.5px;color:var(--muted);padding-inline:8px;display:flex;flex-direction:column;gap:8px}
.linkbtn{font-weight:600;background:none;border:0;padding:0;color:var(--accent);text-decoration:none;font-size:16px;text-align:left}

main{background:var(--surface);padding-block:40px 96px;padding-inline:clamp(16px,5vw,64px);min-width:0}
.col{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:32px}

.btn{border:1px solid var(--control-line);background:var(--surface);padding:10px 16px;border-radius:0;font-weight:600;font-size:16px;transition:background-color .15s,border-color .15s}
.btn:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent)}
.btn.primary{background:var(--brand-red);color:var(--accent-ink);border-color:var(--brand-red)}
.btn.primary:hover:not(:disabled){background:var(--button-hover);border-color:var(--button-hover)}
.btn:active:not(:disabled){background:var(--accent-soft);border-color:var(--accent)}
.btn.primary:active:not(:disabled){background:var(--button-hover);border-color:var(--button-hover)}
.btn:disabled{background:var(--soft);color:var(--muted);border-color:var(--control-line);cursor:not-allowed}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Intro */
.hero{display:flex;flex-direction:column;gap:16px}
.hero h1{font-size:clamp(32px,4vw,40px);line-height:1.2}
.hero p{color:var(--muted);max-width:62ch;font-size:16px}
.hero .benefits{margin:0;padding-left:20px;color:var(--muted);font-size:16px;display:flex;flex-direction:column;gap:4px;max-width:62ch}
.hero .benefits li::marker{color:var(--accent)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px;font-size:16px;color:var(--muted);font-weight:500;}
.field input{border:1px solid var(--control-line);background:var(--surface);border-radius:0;padding:10px 12px;font-size:16px;color:var(--ink)}
.scale{display:flex;flex-direction:column;gap:10px}
.scale-bar{position:relative;height:8px;margin-block:5px;border-radius:0;background:linear-gradient(to right,var(--l1) 0% 24%,var(--l2) 26% 49%,var(--l3) 51% 74%,var(--l4) 76% 86.5%,var(--l5) 88.5% 100%)}
.score-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1.5px var(--ink)}
.scale-labels{display:grid;grid-template-columns:2fr 2fr 2fr 1fr 1fr;gap:0}
.scale-label{display:flex;flex-direction:column;gap:4px;min-width:0;padding-right:8px;text-align:left}
.scale-label b{font-size:13.5px}
.scale-label span{font-size:12px;color:var(--muted)}
.areas-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.areas-list button{background:var(--surface);border:0;text-align:left;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.areas-list button:hover{background:var(--soft)}
.areas-list b{font-family:var(--f-display);font-weight:600;font-size:16px}
.areas-list span{font-size:12.5px;color:var(--muted)}

/* Area */
.area-head{display:flex;flex-direction:column;gap:12px}
.area-head > p{max-width:65ch}
.area-head h1{font-size:clamp(30px,3vw,36px);line-height:1.2}
.group{display:flex;flex-direction:column;gap:12px}
/* Keep headings with their content; separate complete questions instead. */
.group > .q + .q{margin-top:12px}
.group-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.col > .group,.col > .respondent-details{margin-top:0}
.constraints > .q{margin-top:12px}
.group-h h2{font-size:24px;line-height:1.3}
.weight{font-size:12px;color:var(--muted)}
.q{display:flex;flex-direction:column;gap:8px}
.q-text{font-weight:400;font-size:16px;color:var(--ink);display:flex;gap:10px}
.q-text .n{color:var(--muted);font-family:var(--f-mono);font-size:13px;padding-top:2px;flex:none}
.opts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt label{display:flex;flex-direction:column;gap:6px;height:100%;padding:10px;border:1px solid var(--control-line);border-radius:0;background:var(--bg);cursor:pointer;font-size:14px;line-height:1.4;font-weight:400;color:var(--ink);transition:border-color .15s, background .15s}
.opt label b{font-family:var(--f-body);font-size:14px;font-weight:700;color:var(--muted)}
.opt input:not(:checked) + label:hover{background:var(--accent-soft);border-color:var(--accent)}
.opt input:checked + label{border-color:var(--brand-red);background:var(--brand-red);color:var(--accent-ink)}
.opt input:checked + label b{color:inherit}
.opt input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:16px}
.panel h2{font-size:24px;line-height:1.3}
.hint{font-size:13px;color:var(--muted)}
.barrier-fieldset{border:0;padding:0;margin:0;min-width:0}
.constraints .q-text{font-family:var(--f-body);font-size:16px;line-height:1.5;letter-spacing:normal;text-wrap:wrap}
.barrier-fieldset legend{padding:0;margin-bottom:8px}
.barrier-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:8px}
.barrier-row{display:flex;justify-self:start;max-width:100%;min-width:0;overflow-wrap:anywhere;align-items:flex-start;gap:8px;padding:6px 8px;border:1px solid transparent;border-radius:0;background:transparent;color:var(--ink);font-size:16px;line-height:1.5;cursor:pointer}
.barrier-row input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:2px 0 0;border:1px solid var(--control-line);border-radius:0;background:var(--surface);cursor:inherit}
.barrier-row input:checked{display:grid;place-content:center;padding:0;border:1px solid var(--brand-red);border-radius:0;background:transparent;color:var(--brand-red)}
.barrier-row input:checked::before{content:"";width:6px;height:11px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.barrier-row:hover:not(:has(input:disabled)):not(:has(input:checked)){background:var(--accent-soft);color:var(--ink)}
.barrier-row:has(input:checked){background:transparent;color:var(--brand-red);font-weight:700;}
.barrier-row:has(input:disabled){color:var(--muted);cursor:not-allowed}
.barrier-row:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.area-score{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.big{font-family:var(--f-body);font-weight:600;font-size:52px;line-height:1;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:0;font-size:12.5px;font-weight:600;white-space:nowrap}
.pill.l1,.pill.l2{background:var(--crit-soft);color:var(--crit)}
.pill.l3{background:var(--warn-soft);color:var(--warn)}
.pill.l4,.pill.l5{background:var(--ok-soft);color:var(--ok)}
.pill.c1,.pill.c2{background:var(--ok-soft);color:var(--ok)}
.pill.c3{background:var(--warn-soft);color:var(--warn)}
.pill.c4,.pill.c5{background:var(--crit-soft);color:var(--crit)}
.pill.none{background:var(--soft);color:var(--muted)}
.navrow{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:20px}

/* Results */
.res-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.overall{background:var(--ink);color:var(--bg);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px}
.overall .eyebrow{color:inherit;opacity:.7}
.overall .big{font-size:72px}
.overall .big small{font-size:22px;opacity:.6;margin-left:4px}
.overall p{opacity:.85;font-size:16px}
.ruler{display:flex;flex-direction:column;gap:14px}
.rrow{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:14px;align-items:center}
.rrow .nm{font-size:14px;font-weight:600;line-height:1.3;min-width:0}
.rrow .nm a{color:inherit;text-decoration:none;font-weight:600;}
.rrow .nm a:hover{text-decoration:underline;text-underline-offset:3px}
.rrow .val{text-align:right;font-size:14px}
.track{position:relative;height:26px;margin-top:24px}
.track-value{position:absolute;bottom:calc(50% + 14px);width:48px;font-size:14px;line-height:1.3;font-variant-numeric:tabular-nums}
.track .scale-bar{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0}
.axis{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:14px}
.axis .ticks{position:relative;height:16px;font-size:11px;color:var(--muted)}
.axis .ticks span{position:absolute;transform:translateX(-50%)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:620px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--bg)}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.gaps{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.gap{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.gap:last-child{border-bottom:0}
.gap .s{font-family:var(--f-mono);font-size:18px;color:var(--crit)}
.gap .a{font-size:12px;color:var(--muted)}
.gap .t{font-size:14px;font-weight:600;}
.gap .d{font-size:16px;color:var(--muted)}
.banner{background:var(--warn-soft);color:var(--warn);border-radius:0;padding:10px 14px;font-size:13.5px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}

.advisor{border:1px solid var(--accent);border-radius:var(--r);background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:16px}
.advisor h2{font-size:26px}
.brief{display:flex;flex-direction:column;gap:16px;font-size:16px}
.brief h3{font-size:20px;margin-bottom:8px}
.brief ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.brief .headline{font-family:var(--f-display);font-size:20px;line-height:1.3}
.prio{border-left:3px solid var(--accent);padding-left:14px;display:flex;flex-direction:column;gap:6px}
.chatlog{display:flex;flex-direction:column;gap:12px}
.msg{padding:12px 14px;border-radius:0;font-size:16px;max-width:92%;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.u{align-self:flex-end;background:var(--accent-soft)}
.msg.a{align-self:flex-start;background:var(--soft);white-space:normal}
.msg.a p+p,.msg.a p+ul,.msg.a ul+p{margin-top:8px}
.msg.a ul{margin:0;padding-left:18px}
.ask{display:flex;gap:8px}
.ask textarea{flex:1;min-width:0;border:1px solid var(--control-line);border-radius:0;padding:10px 12px;background:var(--bg);resize:vertical;min-height:44px;font-size:16px}
.status{font-size:13px;color:var(--muted)}
.confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}

@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:sticky;height:auto;top:env(safe-area-inset-top,0px);z-index:5;border-right:0;border-bottom:1px solid var(--line);padding:10px 16px;flex-direction:row;overflow-x:auto;gap:12px}
  .brand,.rail-progress,.rail .foot{display:none}
  .nav{flex-direction:row;flex:none}
  .nav .lbl{white-space:nowrap}
  .nav button{grid-template-columns:18px auto;white-space:nowrap}
  .nav .sep{display:none}
  main{padding-block:24px 80px}
  .res-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .opts{grid-template-columns:minmax(0,1fr)}
  .opt label{flex-direction:row;align-items:baseline;gap:10px}
  .rrow,.axis{grid-template-columns:minmax(0,1fr)}
  .rrow .nm{grid-column:1/-1}
  .axis .sp{display:none}
  .area-score{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Keep full email login URLs readable and selectable on narrow screens. */
.login-url{color:var(--accent);overflow-wrap:anywhere;user-select:text}

/* Login uses the assessment intro field layout without a panel surface. */
.login-form{display:flex;flex-direction:column;gap:12px}

/* Admin pages reuse the assessment's typography, fields, buttons, and tables. */
a{color:var(--accent);text-decoration:none;font-weight:600;}
a:not(.btn):hover,.linkbtn:hover:not(:disabled){text-decoration:underline;text-underline-offset:3px}
a.btn{display:inline-block;text-decoration:none}
.admin-col{max-width:1040px}
.admin-nav{display:flex;flex-direction:column;gap:4px}
.admin-nav a{padding:9px 8px;border-radius:0;text-decoration:none;color:var(--ink)}
.admin-nav a:hover:not([aria-current="page"]){background:none;text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:2px;text-underline-offset:6px}
.admin-nav a[aria-current="page"],.admin-nav a[aria-current="page"]:hover{background:none;text-decoration:underline;text-decoration-color:var(--brand-red);text-decoration-thickness:2px;text-underline-offset:6px}
.admin-form{display:flex;flex-direction:column;gap:20px}
/* Shared controls, including respondent organization selection. */
.field{min-width:0}
:is(.field select, .select-control),.field textarea{
  font:400 16px/1.5 var(--f-body);
  
  color:var(--ink);
  border:1px solid var(--control-line);
  background-color:var(--surface);
  border-radius:0;
  padding:10px 12px;
  width:100%;
  min-width:0;
}
:is(.field select, .select-control){
  -webkit-appearance:none;
  appearance:none;
  min-height:44px;
  padding-right:42px;
  background-image:var(--select-arrow);
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  text-overflow:ellipsis;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
:is(.field select, .select-control):hover:not(:disabled){border-color:var(--muted)}
:is(.field select, .select-control):focus-visible{
  border-color:var(--accent);
  outline:2px solid var(--accent);
  outline-offset:2px;
}
:is(.field select, .select-control):disabled{color:var(--muted);background-color:var(--soft);opacity:1;cursor:not-allowed}
:is(.field select, .select-control) option{background:var(--surface);color:var(--ink);font-weight:400;}
@media(forced-colors:active){
  :is(.field select, .select-control){appearance:auto;background-image:none;padding-right:12px}
}
.field textarea{resize:vertical}
@media(max-width:860px){.admin-nav{flex-direction:row}.admin-app .rail .foot{display:flex;margin-top:0;margin-left:auto}.admin-app .rail .foot>span{display:none}}

.restart-dialog{max-width:min(620px,calc(100vw - 32px));padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.restart-dialog::backdrop{background:rgb(0 0 0 / .4)}

.field input[aria-invalid="true"],:is(.field select, .select-control)[aria-invalid="true"]{border-color:var(--crit)}

/* Only save errors replace the quiet sidebar note, including on small screens. */
#saveNote{display:flex;flex-direction:column;gap:8px}
.has-save-error #saveNote{color:var(--crit)}
@media(max-width:860px){
  .rail:has(.has-save-error){flex-wrap:wrap}
  .rail .foot.has-save-error{display:flex;flex-basis:100%;margin-top:4px}
}

/* Respondent details: aligned labels and one control per row, without a panel. */
.respondent-details{display:flex;flex-direction:column;gap:12px}
.respondent-details h2{font-size:24px;line-height:1.3}
.respondent-fields{display:flex;flex-direction:column;gap:16px;max-width:620px}
.respondent-fields .field{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:16px;font-size:16px;color:var(--ink)}
.respondent-fields input,.respondent-fields select{width:100%;min-width:0}
@media(max-width:480px){
  .respondent-fields .field{grid-template-columns:minmax(0,1fr);gap:6px}
}

.overview-nav .primary{margin-left:auto}

.scoring-guide,.scoring-scale{display:flex;flex-direction:column;gap:10px}
.scoring-scale{margin-bottom:16px}
.area-barriers{margin-bottom:24px}
.area-barriers > h3{margin:0;font-size:20px}
.barrier-impact{margin-top:24px}
.barrier-frequency-list{list-style:disc;margin:12px 0 0;padding-left:20px}
.barrier-frequency-list > li{padding-left:4px}
.barrier-frequency-list > li + li{margin-top:8px}
.barrier-frequency-row{display:grid;grid-template-columns:minmax(0,1fr) 144px 84px;align-items:center;column-gap:24px}
.barrier-name{min-width:0;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.barrier-frequency{display:block;min-width:0;width:100%}
.barrier-frequency svg{display:block;width:100%;height:auto}
.barrier-percent{font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
@media(max-width:639px){.barrier-frequency-row{grid-template-columns:minmax(0,1fr) 96px 84px;column-gap:12px}}

.navrow .back-link{align-self:center;color:var(--accent);font-size:16px;text-decoration:none}

.scale-mobile-ticks{display:none;position:relative;height:18px;font-size:12px;font-variant-numeric:tabular-nums}
.scale-mobile-ticks span{position:absolute;transform:translateX(-50%)}
.scale-mobile-ticks span:first-child{transform:none}
.scale-mobile-ticks span:last-child{transform:translateX(-100%)}
@media(max-width:640px){.scoring-scale .scale-labels{display:none}.scale-mobile-ticks{display:block}}

@media(max-width:640px){.barrier-list{grid-template-columns:minmax(0,1fr)}}

/* Keep placeholder and inactive-control text legible in the single light theme. */
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.rrow .nm a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(forced-colors:active){
  .barrier-row input{border-color:ButtonText;background:Canvas}
  .barrier-row input:checked{border:1px solid Highlight;background:Canvas;color:Highlight}
  .barrier-row:has(input:checked){outline:1px solid Highlight}
}

/* Assessment identity, aligned to the assessment content. */
.assessment-brand{max-width:820px;margin:0 auto 16px;display:flex;align-items:center;gap:24px;padding-block:16px}
.assessment-brand img{display:block;flex:none;width:70px;height:32px;margin-inline:0 16px}
.assessment-brand p,.assessment-brand h1{font-size:24px;line-height:1.3;font-weight:700;color:var(--heading)}
.assessment-attribution{max-width:820px;margin:48px auto 0;font-size:12px;color:var(--muted)}
@media(max-width:480px){.assessment-brand{gap:8px}.assessment-brand p,.assessment-brand h1{font-size:20px}}

/* Home and sign-in share the assessment's branding, spacing, and quiet footer. */
.entry-page{background:var(--surface)}
.entry-page main{min-height:100vh;min-height:100svh;display:flex;padding-bottom:24px}
.entry-shell{width:100%;max-width:820px;margin-inline:auto;display:flex;flex-direction:column}
.entry-shell > .assessment-brand{width:100%;margin:0;padding-block:16px 32px;border-bottom:1px solid var(--line)}
.entry-shell > .assessment-brand h1{margin:0}
.entry-content{display:flex;flex-direction:column;align-items:stretch;gap:16px;width:100%;max-width:620px;padding-top:48px}
.entry-content :is(h1,h2){margin:0;font-size:32px;line-height:1.2}
.entry-content > p,.entry-content .hero > p{color:var(--muted);max-width:56ch}
.entry-content .hero{gap:12px}
.entry-content .login-form{max-width:480px;gap:24px;margin-top:8px}
.entry-content .fields{grid-template-columns:minmax(0,1fr)}
.entry-content .field{color:var(--ink)}
.entry-content .field input{width:100%;min-width:0;min-height:46px}
.entry-content .panel{margin-top:8px;background:var(--bg)}
.entry-footer{margin-top:auto;padding-top:64px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.entry-footer .assessment-attribution{margin:0}
.entry-admin-link{font-size:12px;font-weight:400;color:var(--muted);padding-block:6px}
@media(max-width:480px){.entry-content{padding-top:32px}.entry-content :is(h1,h2){font-size:28px}.entry-shell > .assessment-brand{padding-block:8px 24px}}

.rail-progress{padding-inline:8px;display:flex;flex-direction:column;gap:4px}
.rail-progress h2{font-size:16px;line-height:1.3}
.rail-progress p{font-size:13px;color:var(--muted)}
@media(max-width:860px){.rail-progress{display:none}}

/* Overview shares one reading/form width and groups introductory content. */
.overview-intro,.respondent-details,.overview-nav{width:100%;max-width:620px}
.overview-intro h1{font-size:clamp(30px,3vw,36px);line-height:1.2}
.overview-intro p,.overview-intro .benefits{color:var(--ink);max-width:none}
.overview-benefits{display:flex;flex-direction:column;gap:8px}
.overview-nav{padding-top:0}
.respondent-fields input{font-weight:400;}

.area-score-panel{background:var(--heading);border-color:var(--heading);color:var(--surface);gap:20px}
.area-score-panel h2{color:var(--surface)}
.score-by-area{display:flex;flex-direction:column;gap:16px}
.area-score-panel .axis .ticks{color:var(--line)}
.area-score-panel .big small{font-size:22px;color:var(--line);margin-left:4px}
.area-score-panel .hint,.area-score-panel .eyebrow,.area-score-panel .scale-label span{color:var(--line)}

/* Admin: a single survey workspace, without a sidebar. */
.admin-page{background:var(--surface)}
.admin-header{max-width:1168px;margin:auto;padding:24px 64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.admin-identity{display:flex;align-items:center;gap:24px;color:var(--heading);font-size:20px;font-weight:600;}
.admin-identity img{flex:none}
.admin-page main{padding-top:24px}
.admin-page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.admin-page-heading h1{font-size:32px;line-height:1.2}
.admin-page h2{font-size:22px;line-height:1.3}
.admin-back{font-size:14px}
.survey-title{font-size:16px;font-weight:600;}
.survey-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.survey-actions .btn{white-space:nowrap}
.survey-sharing{display:grid;gap:24px;padding:24px;background:var(--bg)}
.survey-sharing h2{font-size:16px;margin-bottom:8px}
.invitation-row{display:flex;align-items:center;gap:16px}
.invitation-row .login-url{flex:1;min-width:0;font-size:14px}
.invitation-row .btn{flex:none}
.response-filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.response-filters .field{min-width:240px;font-size:14px}
.survey-settings summary{cursor:pointer;color:var(--heading);font-weight:600;}
.survey-settings > .group{margin-top:16px}
.survey-settings form{margin-top:8px}
@media(max-width:640px){.admin-header{padding:20px 16px}.admin-identity{font-size:16px;gap:16px}.invitation-row{align-items:start;flex-direction:column}.response-filters .field{min-width:0;width:100%}}

.survey-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:20px 24px;background:var(--bg)}
.survey-summary > div{display:flex;flex-direction:column;gap:4px}
.survey-summary strong{font-size:28px;line-height:1.2;color:var(--heading)}
.survey-summary small{font-size:14px;font-weight:400;color:var(--muted)}
.respondent-list-heading{margin-top:20px;font-size:20px}
@media(max-width:640px){.survey-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}

.insight-panel{border:0;background:var(--bg)}
.results-insights{display:flex;flex-direction:column;gap:24px}
.scoring-guide > .insight-panel,.results-insights > .insight-panel{background:transparent;padding:0;margin:14px 0;color:inherit}
.area-score-panel .insight-text :is(h3,h4,h5,h6){color:inherit}
.insight-panel .group-h h2{font-size:22px}
.insight-text{font-size:16px;line-height:1.5}
.insight-text > * + *{margin-top:12px}
.insight-text h3,.insight-text h4,.insight-text h5,.insight-text h6{font-size:18px;line-height:1.3;margin-block:20px 8px}
.insight-text ul,.insight-text ol{padding-left:24px;margin-bottom:0}
.insight-text li + li{margin-top:6px}
.insight-text pre{white-space:pre-wrap;overflow-wrap:anywhere}
.insight-text > :first-child{margin-top:0}
.insight-text:empty,.insight-panel [role="status"]:empty{display:none}

/* Supporting evidence stays within each results score panel. */
.result-evidence{display:flex;flex-direction:column;gap:24px;margin-block:12px}
.result-evidence-section{display:flex;flex-direction:column;gap:12px}
.area-score-panel .result-evidence :is(h3,h4){color:inherit}
.result-evidence h3{font-size:20px}
.result-evidence h4{font-size:16px}
.result-evidence-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.result-evidence-list li{display:flex;flex-direction:column;gap:4px}

.result-gap-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:24px}
.result-gap{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.response-distribution{width:144px;max-width:100%;min-width:0;align-self:center}
.response-distribution svg{display:block;width:100%;height:auto}
.response-distribution:hover .distribution-numbers,.response-distribution:focus-visible .distribution-numbers{opacity:1}
.result-gap-list:has(.response-distribution){gap:16px}
.result-gap:has(.response-distribution){grid-template-columns:minmax(0,1fr) 144px max-content;column-gap:24px;row-gap:4px}
.result-gap-average{align-self:center;font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:639px){
  .result-gap:has(.response-distribution){grid-template-columns:minmax(0,1fr) 96px max-content;column-gap:12px}
  .response-distribution .distribution-numbers{font-size:18px}
}
.area-score-panel .result-gap > p{font-size:16px;font-weight:400;line-height:1.5;color:inherit}
.result-gap-area{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--line)}
@media(min-width:960px){.result-gap{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}

.scale-value-track{position:relative;height:76px}
.scale-value{position:absolute;bottom:0;width:128px;display:flex;flex-direction:column;gap:4px}
.scale-value-level{font-size:16px;line-height:1.4}
.scale-value-number{font-size:36px;line-height:1.1;font-variant-numeric:tabular-nums}
.area-score-description{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

/* Results uses one white surface with navy headings. */
main.results-page{background:var(--surface);color:var(--ink);font-size:16px;line-height:1.5}
.results-page .insight-text,.results-page .area-score-panel .result-gap > p,.results-page .report-respondent{font-size:16px;line-height:1.5}
.results-page .report-respondent > p:first-child{font-size:18px}
.results-page .scoring-notes .hint{font-size:12px;line-height:1.5}
.results-page > .assessment-attribution{display:none}
.results-page .assessment-brand img{filter:none}
.results-page .assessment-brand p{display:none}
.results-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.results-page :is(h1,h2,h3,h4,h5,h6),.results-page .area-score-panel :is(h1,h2,h3,h4,h5,h6){color:var(--heading)}
.results-page :is(.hint,.eyebrow,.status,.assessment-attribution,.result-gap-area),
.results-page .area-score-panel .scale-label span,
.results-page .area-score-panel .axis .ticks{color:var(--muted)}
.results-page .panel{background:transparent;border:0;padding:0;color:var(--ink)}
.results-page .col{gap:48px}
.results-page .btn:not(.primary){color:var(--ink)}
.results-page textarea{background:var(--surface);color:var(--ink)}
.results-page :focus-visible{outline-color:var(--accent)}

.results-refresh{border:0;background:transparent;color:var(--muted);padding:4px 0;font-size:13px;font-weight:600;}
.results-refresh:hover:not(:disabled){color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.results-refresh:disabled{cursor:default}

.report-respondent{display:flex;flex-direction:column;gap:4px;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.report-respondent > p:first-child{font-size:18px;font-weight:600;}

.scoring-notes{display:flex;flex-direction:column;gap:10px}

.brief .headline{}
.assessment-brand p,.assessment-brand h1{font-family:var(--f-display);}

/* Administrator reports share the respondent report layout. */
.report-admin-nav{max-width:820px;margin:0 auto 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.admin-report .assessment-brand p{display:block}
.admin-survey-title{max-width:820px;margin:0 auto 24px;font-size:32px;line-height:1.2;overflow-wrap:anywhere}
.survey-invite-heading{max-width:820px;margin:0 auto 12px;font-size:20px;line-height:1.3}
.admin-report .results-heading > h2{font-size:32px;line-height:1.2}
.survey-share{max-width:820px;margin:0 auto 48px;padding:32px;display:flex;flex-direction:column;align-items:center;gap:24px;background:var(--heading);color:var(--surface);text-align:center}
.results-page .survey-share :is(.hint,.status){color:var(--surface)}
.survey-qr{width:224px;max-width:100%;aspect-ratio:1;background:#fff}
.survey-qr svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}
.survey-share-link{width:100%;min-width:0}
.survey-share .invitation-row{align-items:center;gap:24px;text-align:left}
.survey-share .login-url{color:var(--surface);font-weight:400}
.survey-share [data-copy-status]{display:block;margin-top:12px;font-size:14px}
.survey-share [data-copy-status]:empty{display:none}
.results-page .survey-share :focus-visible{outline-color:var(--surface)}
@media(max-width:640px){
  .survey-share{padding:24px}
  .survey-share .invitation-row{gap:12px;text-align:center}
}
.report-person-select{width:100%;max-width:100%;font-size:18px;font-weight:600}
.report-organization-control{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.report-organization-control select{width:auto;max-width:75%}

/* Visible progress while insights are generated or refreshed. */
.insight-panel .insight-loading{
  display:flex;align-items:center;gap:12px;
  margin:12px 0 20px;padding:16px 20px;
  background:var(--soft);color:var(--heading);
  font-size:16px;font-weight:600;line-height:1.5;
}
.insight-spinner{
  display:inline-block;flex:none;width:22px;height:22px;
  border:3px solid var(--control-line);border-top-color:var(--brand-red);
  border-radius:50%;animation:insight-spin .8s linear infinite;
}
@keyframes insight-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.insight-spinner{animation:none}}

/* Small response dots sit on the same baseline as the larger mean marker. */
.response-dots{position:absolute;inset:0;z-index:1}
.response-dot{position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:var(--heading);box-shadow:0 0 0 1px var(--surface);transform:translate(-50%,-50%)}
.score-marker{z-index:2}