:root{
  --bg:#f3f4f6; --card:#ffffff; --ink:#111827; --muted:#6b7280; --line:#e5e7eb;
  --accent:#111827; --accent-soft:#eef2ff; --ok:#166534; --warn:#92400e;
  --radius:20px;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;min-height:100vh}
button,input,select,textarea{font:inherit}
.shell{width:min(720px,100%);margin:0 auto;padding:18px 14px 32px;min-height:100vh;display:flex;align-items:flex-start;justify-content:center}
.card{width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 8px 24px rgba(17,24,39,.06)}
h1{font-size:clamp(1.55rem,6vw,2.2rem);line-height:1.08;margin:.25rem 0 .8rem;letter-spacing:-.025em}
h2{font-size:1.15rem;margin:0 0 .7rem}
p{line-height:1.48}.muted{color:var(--muted)}.tiny{font-size:.8rem;color:var(--muted)}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.13em;color:var(--muted);margin:0 0 8px}
.field{margin:16px 0}.field label{display:block;font-weight:700;margin-bottom:7px}.field select,.field textarea{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:12px;background:white;color:var(--ink)}
.consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0}.consent input{width:20px;height:20px;margin-top:2px;flex:0 0 auto}
.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;border-radius:14px;padding:0 18px;font-weight:800;border:0;cursor:pointer;text-decoration:none}
.primary-button{background:var(--accent);color:white;width:100%}.primary-button:disabled{opacity:.35;cursor:not-allowed}.secondary-button:disabled{opacity:.35;cursor:not-allowed}.secondary-button{background:white;color:var(--ink);border:1px solid var(--line)}
.progress-wrap{margin-bottom:14px}.progress-line{height:5px;background:#e5e7eb;border-radius:99px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);transition:width .2s ease}.progress-meta{display:flex;justify-content:space-between;font-size:.79rem;color:var(--muted);margin-bottom:7px}
.context{background:#f9fafb;border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin:12px 0 16px;font-size:.92rem}
.cues{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.cues li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);line-height:1.33;font-size:.94rem}.dot{width:7px;height:7px;margin-top:.44em;border-radius:50%;background:#9ca3af;flex:0 0 auto}
.question{margin-top:18px}.question-title{font-weight:800;font-size:.92rem;margin-bottom:8px}.choice-row{display:grid;gap:7px}.choice-row.four{grid-template-columns:repeat(4,1fr)}.choice-row.three{grid-template-columns:repeat(3,1fr)}
.choice{border:1px solid #d1d5db;background:white;border-radius:12px;min-height:52px;padding:7px 4px;text-align:center;cursor:pointer;transition:.12s}.choice b{display:block;font-size:1.12rem}.choice span{display:block;font-size:.66rem;color:var(--muted);line-height:1.1;margin-top:3px}.choice.selected{border:2px solid var(--accent);background:var(--accent-soft);padding:6px 3px}
.nav-row{display:flex;gap:9px;margin-top:18px}.nav-row .primary-button{flex:1}.nav-row .secondary-button{width:54px;padding:0}
.swipe-hint{text-align:center;font-size:.75rem;color:var(--muted);margin:9px 0 -5px}
.legend{margin-top:12px}.legend summary{cursor:pointer;font-weight:700;font-size:.84rem}.legend-grid{display:grid;gap:8px;margin-top:9px;font-size:.8rem;color:var(--muted)}
.status{padding:10px 12px;border-radius:12px;margin:12px 0;font-size:.86rem}.status.ok{background:#f0fdf4;color:var(--ok)}.status.warn{background:#fffbeb;color:var(--warn)}
.done-icon{font-size:2.6rem;margin:4px 0}.admin-shell{align-items:flex-start}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.stat{border:1px solid var(--line);border-radius:14px;padding:14px}.stat b{font-size:1.35rem;display:block}.stat span{font-size:.78rem;color:var(--muted)}.admin-actions{display:grid;gap:9px}.button-link{width:100%}
@media (max-width:430px){.shell{padding:8px 8px 18px}.card{padding:16px;border-radius:16px}.cues li{padding:8px 0;font-size:.88rem}.question{margin-top:14px}.choice{min-height:50px}.context{font-size:.85rem;margin:9px 0 12px}.stats-grid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Discrete snap-track response controls */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.snap-question{margin-top:22px;padding-top:2px}
.snap-track{margin-top:10px;padding:8px 4px 0}
.snap-rail{position:relative;height:44px;margin:0 18px;touch-action:pan-y;outline:none;cursor:pointer}
.snap-line,.snap-fill{position:absolute;left:0;top:20px;height:4px;border-radius:99px}
.snap-line{width:100%;background:#d1d5db}.snap-fill{background:var(--accent);width:0;transition:width .12s ease}
.snap-tick{position:absolute;top:13px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;border:2px solid #9ca3af;background:#fff;padding:0;cursor:pointer;z-index:2}
.snap-tick.selected{border-color:var(--accent);background:var(--accent)}
.snap-thumb{position:absolute;top:9px;transform:translateX(-50%) scale(.75);width:26px;height:26px;border-radius:50%;background:var(--accent);border:4px solid white;box-shadow:0 0 0 2px var(--accent),0 3px 10px rgba(17,24,39,.18);opacity:0;transition:left .1s ease,opacity .12s ease,transform .12s ease;z-index:3;pointer-events:none}
.snap-track.has-value .snap-thumb{opacity:1;transform:translateX(-50%) scale(1)}
.snap-rail:focus-visible{border-radius:12px;box-shadow:0 0 0 3px rgba(17,24,39,.14)}
.snap-labels{display:grid;gap:5px;margin-top:1px;align-items:start}.snap-labels.cols-4{grid-template-columns:repeat(4,1fr)}.snap-labels.cols-3{grid-template-columns:repeat(3,1fr)}
.snap-label{border:0;background:transparent;color:var(--muted);padding:6px 2px;font-size:.69rem;line-height:1.15;cursor:pointer;border-radius:8px;min-height:34px}
.snap-label.selected{color:var(--ink);font-weight:800;background:#f3f4f6}
.snap-selection{margin-top:8px;min-height:58px;border:1px solid var(--line);background:#f9fafb;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:.82rem;line-height:1.35}
.snap-selection b{font-size:.86rem}.snap-selection span{color:var(--muted)}.snap-selection.empty{justify-content:center}

/* Research admin dashboard */
.admin-shell{width:min(1180px,100%);display:block;padding-top:20px}
.admin-login{width:min(460px,100%);margin:8vh auto 0}
.admin-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.admin-topbar h1{margin-top:0}.admin-top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.admin-top-actions .secondary-button,.admin-top-actions .primary-button{width:auto;min-height:42px}
.dashboard-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}.panel{grid-column:span 12;background:white;border:1px solid var(--line);border-radius:16px;padding:16px}.panel.half{grid-column:span 6}.panel.third{grid-column:span 4}
.panel h2{margin:0 0 5px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.panel-head p{margin:0}
.admin-tabs{display:flex;gap:5px;overflow:auto;margin:8px 0 14px;padding-bottom:2px}.admin-tab{white-space:nowrap;border:1px solid var(--line);background:white;border-radius:99px;padding:8px 13px;font-weight:750;cursor:pointer}.admin-tab.active{background:var(--ink);color:white;border-color:var(--ink)}
.tab-pane{display:none}.tab-pane.active{display:block}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.kpi{border:1px solid var(--line);border-radius:14px;padding:13px}.kpi b{display:block;font-size:1.55rem;letter-spacing:-.02em}.kpi span{font-size:.76rem;color:var(--muted)}
.block-bars{display:grid;gap:8px;margin-top:12px}.block-row{display:grid;grid-template-columns:70px 1fr minmax(170px,240px);gap:10px;align-items:center;font-size:.84rem}.bar{height:9px;background:#e5e7eb;border-radius:99px;overflow:hidden}.bar>span{display:block;height:100%;background:var(--ink);border-radius:99px}
.matrix-wrap{overflow:auto}.matrix{display:grid;grid-template-columns:130px repeat(3,minmax(105px,1fr));gap:6px;min-width:520px}.matrix .axis-label{font-size:.73rem;color:var(--muted);display:flex;align-items:center;justify-content:center;text-align:center;padding:6px}.matrix-cell{min-height:84px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;text-align:center}.matrix-cell b{font-size:1.35rem}.matrix-cell span{font-size:.68rem;color:var(--muted);margin-top:3px}.matrix-cell.continuity-first{background:#fff7ed}.matrix-cell.convergence{background:#f0fdf4}.matrix-cell.regulatory-first{background:#eff6ff}.matrix-cell.low-open{background:#f9fafb}
.legend-inline{display:flex;gap:10px;flex-wrap:wrap;font-size:.73rem;color:var(--muted);margin-top:10px}.legend-inline i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:4px;border:1px solid var(--line)}
.dist-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dist-list{display:grid;gap:6px}.dist-item{display:grid;grid-template-columns:120px 1fr 38px;gap:8px;align-items:center;font-size:.78rem}.dist-item .bar{height:7px}
.admin-table-wrap{overflow:auto;max-height:580px;border:1px solid var(--line);border-radius:12px}.admin-table{border-collapse:collapse;width:100%;font-size:.74rem;white-space:nowrap}.admin-table th,.admin-table td{padding:8px 9px;border-bottom:1px solid var(--line);text-align:left}.admin-table th{position:sticky;top:0;background:#f9fafb;z-index:1;font-size:.69rem;text-transform:uppercase;letter-spacing:.04em}.admin-table tr:last-child td{border-bottom:0}
.cue-table td.num,.cue-table th.num{text-align:right}.freeze-card{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:8px}.freeze-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.76rem}.hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;word-break:break-all}
.notice{border-radius:12px;padding:11px 12px;font-size:.82rem;line-height:1.4}.notice.info{background:#eff6ff;color:#1e3a8a}.notice.warn{background:#fffbeb;color:#92400e}.notice.ok{background:#f0fdf4;color:#166534}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.inline-actions .primary-button,.inline-actions .secondary-button{width:auto;min-height:42px}
.model-results{margin-top:12px}

@media (max-width:760px){.panel.half,.panel.third{grid-column:span 12}.kpis{grid-template-columns:repeat(2,1fr)}.dist-grid{grid-template-columns:1fr}.admin-topbar{display:block}.admin-top-actions{justify-content:flex-start;margin-top:10px}.snap-label{font-size:.62rem}.snap-rail{margin:0 12px}.matrix{grid-template-columns:105px repeat(3,minmax(95px,1fr))}}
.field input[type="text"],.field input[type="password"],.field input:not([type]){width:100%;border:1px solid #d1d5db;border-radius:12px;padding:12px;background:white;color:var(--ink)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.matrix-cell.readiness-first{background:#fefce8}

/* v3-fixed: make the snap interaction unmistakable without preselecting a response */
.version-badge{display:inline-flex;margin:-2px 0 10px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:#f9fafb;color:var(--muted);font-size:.72rem;font-weight:750}
.track-intro{margin:20px 0 4px;padding:11px 13px;border-radius:12px;background:#f3f4f6;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:.82rem}.track-intro span{color:var(--muted)}
.snap-help{font-size:.75rem;color:var(--muted);margin:-2px 0 8px;line-height:1.35}
.snap-track{border:1px solid #e5e7eb;border-radius:14px;padding:12px 10px 8px;background:#fff}
.snap-rail{height:50px;margin:0 20px}
.snap-line,.snap-fill{top:23px;height:6px}
.snap-line{background:#c7cdd5}
.snap-tick{top:14px;width:24px;height:24px;border-width:3px;border-color:#7b8491;box-shadow:0 0 0 4px #fff}
.snap-tick:hover{border-color:var(--accent);transform:translateX(-50%) scale(1.08)}
.snap-thumb{top:11px;width:30px;height:30px}
.snap-label{font-size:.72rem;font-weight:650;color:#5f6874}
.snap-selection.empty{border-style:dashed;background:#fbfbfc}
@media (max-width:600px){.track-intro{display:block}.track-intro span{display:block;margin-top:3px}.snap-rail{margin:0 14px}.snap-tick{width:22px;height:22px;top:15px}.snap-label{font-size:.64rem}}

/* v4: desktop tri-panel vignette layout — judgement left/right, evidence in the centre */
.shell.survey-wide{
  width:min(1460px,100%);
  padding:14px 18px 24px;
}
.vignette-card{
  padding:18px 20px 16px;
  border-radius:18px;
}
.vignette-progress{margin-bottom:12px}
.vignette-layout{
  display:grid;
  grid-template-columns:minmax(285px,.82fr) minmax(430px,1.35fr) minmax(285px,.82fr);
  gap:16px;
  align-items:stretch;
}
.rating-panel,.scenario-panel{
  min-width:0;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:16px;
}
.rating-panel{
  display:flex;
  flex-direction:column;
  align-self:stretch;
  background:#fbfbfc;
}
.scenario-panel{
  background:#fff;
  padding:16px 20px;
}
.scenario-panel .context{margin:8px 0 12px}
.scenario-panel .cues li{padding:10px 0;font-size:.93rem}
.rating-panel .snap-question{margin:2px 0 0;padding:0;display:flex;flex-direction:column;flex:1}
.rating-panel .question-title{font-size:.92rem;line-height:1.3;margin-bottom:7px}
.rating-panel .snap-help{font-size:.7rem;line-height:1.3;margin-bottom:9px}
.rating-panel .snap-track{padding:12px 8px 8px}
.rating-panel .snap-rail{margin:0 14px}
.rating-panel .snap-label{font-size:.65rem;line-height:1.12;padding-inline:1px}
.rating-panel .snap-selection{margin-top:10px;min-height:72px}
.rating-note{margin:auto 0 0;padding-top:12px;font-size:.72rem;line-height:1.35;color:var(--muted)}
.vignette-footer{margin-top:12px}
.vignette-footer .nav-row{margin-top:10px}

@media (min-width:1100px) and (min-height:720px){
  .shell.survey-wide{min-height:100vh;align-items:center}
  .vignette-card{max-height:calc(100vh - 28px);overflow:hidden}
  .scenario-panel .cues li{padding:8px 0}
  .rating-panel .snap-question{margin-top:0}
}

@media (max-width:1050px){
  .shell.survey-wide{width:min(820px,100%);padding:12px 14px 24px}
  .vignette-layout{grid-template-columns:1fr 1fr}
  .scenario-panel{grid-column:1 / -1;grid-row:1}
  .rating-left{grid-column:1;grid-row:2}
  .rating-right{grid-column:2;grid-row:2}
}

@media (max-width:700px){
  .shell.survey-wide{padding:8px 8px 18px}
  .vignette-card{padding:14px}
  .vignette-layout{display:flex;flex-direction:column;gap:10px}
  .scenario-panel{order:1;padding:14px}
  .rating-left{order:2}
  .rating-right{order:3}
  .rating-panel{padding:14px}
  .rating-note{margin-top:8px}
}

/* v2.6 — compact, responsive survey UI */
.shell.survey-wide{
  width:min(1360px,100%);
  padding:8px 12px 18px;
}
.vignette-card{
  padding:12px 14px 12px;
  border-radius:14px;
  box-shadow:0 4px 14px rgba(17,24,39,.045);
}
.vignette-progress{margin-bottom:8px}
.vignette-layout{
  grid-template-columns:minmax(240px,.78fr) minmax(400px,1.4fr) minmax(240px,.78fr);
  gap:10px;
}
.rating-panel,.scenario-panel{
  border-radius:12px;
  padding:11px 12px;
}
.scenario-panel{padding:11px 14px}
.rating-panel .eyebrow,.scenario-panel .eyebrow{font-size:.67rem;margin-bottom:5px}
.scenario-panel .context{
  margin:4px 0 7px;
  padding:8px 10px;
  border-radius:10px;
  font-size:.80rem;
  line-height:1.35;
}
.scenario-panel .cues li{
  gap:8px;
  padding:6px 0;
  font-size:.84rem;
  line-height:1.28;
}
.scenario-panel .dot{width:6px;height:6px;margin-top:.42em}
.rating-panel .question-title{font-size:.82rem;line-height:1.24;margin-bottom:5px}
.rating-panel .snap-help{font-size:.64rem;line-height:1.2;margin:0 0 5px}
.rating-panel .snap-track{padding:7px 5px 5px;border-radius:10px}
.rating-panel .snap-rail{height:38px;margin:0 12px}
.rating-panel .snap-line,.rating-panel .snap-fill{top:17px;height:4px}
.rating-panel .snap-tick{top:10px;width:18px;height:18px;border-width:2px;box-shadow:0 0 0 3px #fff}
.rating-panel .snap-thumb{top:7px;width:24px;height:24px;border-width:3px}
.rating-panel .snap-label{font-size:.60rem;line-height:1.08;min-height:29px;padding:4px 1px}
.rating-panel .snap-selection{
  margin-top:6px;
  min-height:48px;
  border-radius:9px;
  padding:7px 8px;
  font-size:.72rem;
  line-height:1.25;
}
.rating-panel .snap-selection b{font-size:.75rem}
.rating-note{display:none}
.vignette-footer{margin-top:8px}
.vignette-footer .nav-row{margin-top:6px}
.vignette-footer .primary-button,.vignette-footer .secondary-button{min-height:42px;border-radius:11px}
.vignette-footer .secondary-button{width:46px}

/* Do not force the desktop instrument into the viewport: clipping is worse than a small scroll. */
@media (min-width:1100px) and (min-height:720px){
  .shell.survey-wide{min-height:100vh;align-items:flex-start}
  .vignette-card{max-height:none;overflow:visible}
}

@media (max-width:1050px){
  .shell.survey-wide{width:min(900px,100%);padding:8px 10px 18px}
  .vignette-layout{grid-template-columns:1fr 1fr;gap:9px}
  .scenario-panel{grid-column:1/-1;grid-row:1}
  .rating-left{grid-column:1;grid-row:2}
  .rating-right{grid-column:2;grid-row:2}
}

@media (max-width:700px){
  body{background:#fff}
  .shell.survey-wide{padding:0;width:100%;display:block}
  .vignette-card{
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:9px 10px 14px;
  }
  .vignette-progress{margin-bottom:7px}
  .progress-meta{font-size:.72rem;margin-bottom:5px}
  .progress-line{height:3px}
  .vignette-layout{display:flex;flex-direction:column;gap:7px}
  .scenario-panel{order:1;padding:9px 10px}
  .rating-left{order:2}
  .rating-right{order:3}
  .rating-panel{padding:9px 10px;background:#fafafa}
  .rating-panel .eyebrow,.scenario-panel .eyebrow{font-size:.62rem;letter-spacing:.10em;margin-bottom:4px}
  .scenario-panel .context{font-size:.75rem;padding:7px 8px;margin:3px 0 5px}
  .scenario-panel .cues li{padding:5px 0;font-size:.80rem;line-height:1.22}
  .rating-panel .question-title{font-size:.81rem;margin-bottom:7px}
  .rating-panel .snap-help{display:none}

  /* On phones the labels become direct tap targets; the draggable rail is unnecessary. */
  .rating-panel .snap-track{border:0;background:transparent;padding:0}
  .rating-panel .snap-rail{display:none}
  .rating-panel .snap-labels{gap:5px;margin-top:0}
  .rating-panel .snap-labels.cols-4{grid-template-columns:repeat(2,1fr)}
  .rating-panel .snap-labels.cols-3{grid-template-columns:repeat(3,1fr)}
  .rating-panel .snap-label{
    min-height:38px;
    padding:6px 5px;
    border:1px solid #d1d5db;
    border-radius:9px;
    background:#fff;
    font-size:.69rem;
    line-height:1.12;
    color:#4b5563;
  }
  .rating-panel .snap-label.selected{
    background:var(--ink);
    border-color:var(--ink);
    color:#fff;
  }
  .rating-panel .snap-selection{
    min-height:0;
    margin-top:5px;
    padding:6px 8px;
    border:0;
    background:#f3f4f6;
    font-size:.69rem;
    line-height:1.22;
  }
  .rating-panel .snap-selection.empty{display:none}
  .rating-panel .snap-selection b{font-size:.72rem}
  .vignette-footer{margin-top:7px}
  .vignette-footer .nav-row{margin-top:5px;gap:7px}
  .vignette-footer .primary-button,.vignette-footer .secondary-button{min-height:44px;border-radius:10px}

  /* The non-vignette screens should also feel like a mobile form, not a large card. */
  .shell:not(.survey-wide){padding:0;display:block;background:#fff}
  .shell:not(.survey-wide)>.card{border:0;border-radius:0;box-shadow:none;padding:16px 14px 22px;min-height:100vh}
  .shell:not(.survey-wide) h1{font-size:1.55rem}
  .shell:not(.survey-wide) .field{margin:12px 0}
  .shell:not(.survey-wide) .field select,.shell:not(.survey-wide) .field textarea{padding:10px;border-radius:10px}
  .shell:not(.survey-wide) .consent{margin:14px 0;font-size:.90rem}
}

@media (max-width:380px){
  .vignette-card{padding-inline:8px}
  .scenario-panel,.rating-panel{padding-inline:8px}
  .rating-panel .snap-labels.cols-3{gap:4px}
  .rating-panel .snap-label{font-size:.65rem;padding-inline:3px}
}

.finish-priority-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 4px}
@media (max-width:640px){.finish-priority-grid{grid-template-columns:1fr;gap:4px}}

/* v2.7 theme + admin editor */
.theme-toggle{position:fixed;right:12px;bottom:12px;z-index:50;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;min-height:38px;padding:0 12px;font-weight:750;box-shadow:0 4px 14px rgba(0,0,0,.10);cursor:pointer}
:root[data-theme="dark"]{
  --bg:#0b0f14;--card:#11161d;--ink:#edf2f7;--muted:#9aa6b2;--line:#2a333d;--accent:#f3f4f6;--accent-soft:#202832;--ok:#86efac;--warn:#fbbf24;
}
:root[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .panel,:root[data-theme="dark"] .rating-panel,:root[data-theme="dark"] .scenario-panel{background:var(--card)}
:root[data-theme="dark"] .rating-panel,:root[data-theme="dark"] .context,:root[data-theme="dark"] .snap-selection,:root[data-theme="dark"] .version-badge,:root[data-theme="dark"] .admin-table th,:root[data-theme="dark"] .matrix-cell.low-open{background:#151b23}
:root[data-theme="dark"] .field select,:root[data-theme="dark"] .field textarea,:root[data-theme="dark"] .field input,:root[data-theme="dark"] .secondary-button,:root[data-theme="dark"] .admin-tab,:root[data-theme="dark"] .snap-track,:root[data-theme="dark"] .snap-tick,:root[data-theme="dark"] .snap-label{background:#11161d;color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .primary-button,:root[data-theme="dark"] .admin-tab.active{background:#f3f4f6;color:#111827}
:root[data-theme="dark"] .bar,:root[data-theme="dark"] .progress-line,:root[data-theme="dark"] .snap-line{background:#313b46}
:root[data-theme="dark"] .bar>span,:root[data-theme="dark"] .progress-fill,:root[data-theme="dark"] .snap-fill{background:#e5e7eb}
:root[data-theme="dark"] .notice.info{background:#172033;color:#bfdbfe}:root[data-theme="dark"] .notice.warn{background:#2b2110;color:#fde68a}:root[data-theme="dark"] .notice.ok{background:#10251a;color:#bbf7d0}
:root[data-theme="dark"] .matrix-cell.readiness-first{background:#292510}:root[data-theme="dark"] .matrix-cell.continuity-first{background:#2a1e14}:root[data-theme="dark"] .matrix-cell.convergence{background:#12271b}:root[data-theme="dark"] .matrix-cell.regulatory-first{background:#132239}
:root[data-theme="dark"] .snap-label.selected{background:#29323c;color:#fff}:root[data-theme="dark"] .rating-panel .snap-label.selected{background:#f3f4f6;color:#111827;border-color:#f3f4f6}
.admin-form-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end}.admin-form-grid .field{margin:0}.admin-form-grid .wide{grid-column:span 2}.admin-form-grid .primary-button,.admin-form-grid .secondary-button{min-height:44px;width:100%}
.option-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.option-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.option-item:last-child{border-bottom:0}.option-item.inactive{opacity:.55}.option-meta{min-width:0}.option-meta b,.option-meta span{display:block}.option-meta span{font-size:.72rem;color:var(--muted);word-break:break-all}.mini-button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;padding:6px 9px;font-weight:700;cursor:pointer;white-space:nowrap}.danger-button{border-color:#ef4444;color:#b91c1c}.edited-mark{font-size:.65rem;border:1px solid var(--line);border-radius:999px;padding:2px 5px;color:var(--muted)}
.chart-bars{display:grid;gap:9px}.chart-row{display:grid;grid-template-columns:minmax(120px,1fr) 3fr 42px;gap:10px;align-items:center;font-size:.78rem}.chart-row .bar{height:14px}.chart-row b{text-align:right}.audit-json{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,monospace;font-size:.67rem}
@media(max-width:900px){.option-groups{grid-template-columns:1fr}.admin-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-form-grid .wide{grid-column:span 2}}
@media(max-width:600px){.theme-toggle{right:8px;bottom:8px}.admin-form-grid{grid-template-columns:1fr}.admin-form-grid .wide{grid-column:span 1}.chart-row{grid-template-columns:105px 1fr 34px}}

/* v3.0+ — centered admin, unclipped selects, test tools and server-side analysis */
.admin-shell{
  width:min(1240px,100%);
  margin:0 auto;
  padding:20px 16px 44px;
}
.admin-shell #adminApp{width:100%;margin:0 auto;min-width:0}
.admin-topbar,.admin-tabs,.tab-pane{width:100%}
.dashboard-grid,.panel,.admin-form-grid,.option-groups{min-width:0}
.panel{overflow:visible}
.admin-form-grid>*{min-width:0}
.field{min-width:0}
.field select,.field input,.field textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:44px;
}
.field select{
  padding-right:34px;
  text-overflow:ellipsis;
}
.field select option{white-space:normal}
.admin-table-wrap{max-width:100%}

.test-tools-grid{display:grid;grid-template-columns:minmax(150px,220px) minmax(150px,220px) auto;gap:10px;align-items:end;margin-top:10px}
.test-tools-grid .field{margin:0}
.test-tools-grid .primary-button{width:auto;min-height:44px}
.danger-zone{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:center}
.danger-zone h3{margin:0 0 4px}.danger-zone p{margin:0;max-width:760px}
.danger-solid-button{border:0;border-radius:12px;background:#b91c1c;color:#fff;min-height:44px;padding:0 16px;font-weight:800;cursor:pointer;white-space:nowrap}
.danger-solid-button:disabled{opacity:.45;cursor:not-allowed}

.effect-list{display:grid;gap:8px;margin:10px 0 14px}
.effect-row{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(160px,2fr) 58px;gap:10px;align-items:center;font-size:.78rem}
.effect-row>div:first-child{min-width:0}.effect-row>div:first-child b,.effect-row>div:first-child span{display:block}.effect-row>div:first-child span{color:var(--muted);font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.effect-track{height:10px;background:var(--line);border-radius:999px;overflow:hidden}.effect-track i{display:block;height:100%;border-radius:999px;background:var(--ink)}
:root[data-theme="dark"] .effect-track i{background:#e5e7eb}
.analysis-table{max-height:none;margin-top:8px}
.model-results h2{margin-top:18px}.model-results h3{margin:18px 0 6px}

@media(max-width:760px){
  .admin-shell{padding:12px 10px 32px}
  .test-tools-grid{grid-template-columns:1fr 1fr}.test-tools-grid .primary-button{grid-column:1/-1;width:100%}
  .danger-zone{align-items:stretch;flex-direction:column}.danger-solid-button{width:100%}
  .effect-row{grid-template-columns:minmax(120px,1fr) minmax(90px,1.4fr) 50px;gap:7px}
  .field select{font-size:16px}
}
@media(max-width:480px){
  .test-tools-grid{grid-template-columns:1fr}
  .test-tools-grid .primary-button{grid-column:auto}
  .effect-row{grid-template-columns:1fr 72px 48px}
  .effect-row>div:first-child span{white-space:normal}
}

/* v3.1 — larger instrument typography + richer analysis workspace */
body{font-size:16.5px}
.shell:not(.survey-wide)>.card p{font-size:1rem}
.shell:not(.survey-wide) .field label{font-size:.98rem}
.shell:not(.survey-wide) .field select,.shell:not(.survey-wide) .field textarea{font-size:1rem;min-height:48px}

/* Participant vignette: readable without returning to the oversized dashboard feel. */
.scenario-panel .context{font-size:.91rem;line-height:1.45}
.scenario-panel .cues li{font-size:.96rem;line-height:1.42;padding:8px 0}
.rating-panel .question-title{font-size:.94rem;line-height:1.34}
.rating-panel .snap-help{font-size:.73rem}
.rating-panel .snap-label{font-size:.69rem;line-height:1.16;min-height:36px}
.rating-panel .snap-selection{font-size:.80rem;line-height:1.38;min-height:60px}
.rating-panel .snap-selection b{font-size:.84rem}
.rating-panel .eyebrow,.scenario-panel .eyebrow{font-size:.71rem}

/* Analysis visualisations */
.analysis-hero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.analysis-kpi{border:1px solid var(--line);border-radius:14px;padding:13px;background:var(--card);min-width:0}
.analysis-kpi b{display:block;font-size:1.55rem;line-height:1.05;letter-spacing:-.025em}
.analysis-kpi span{display:block;color:var(--muted);font-size:.75rem;margin-top:4px}
.analysis-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.analysis-section:first-of-type{border-top:0;padding-top:0}
.analysis-section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;margin-bottom:10px;flex-wrap:wrap}
.analysis-section-head h3{margin:0}.analysis-section-head p{margin:2px 0 0}
.analysis-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.analysis-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.viz-card{border:1px solid var(--line);border-radius:14px;padding:13px;min-width:0;background:var(--card)}
.viz-card h4{font-size:.9rem;margin:0 0 9px}.viz-card .tiny{margin:5px 0 0}

.dist-bars{display:grid;gap:7px}.dist-bar-row{display:grid;grid-template-columns:minmax(92px,1fr) 2.2fr 50px;gap:8px;align-items:center;font-size:.78rem}
.dist-bar-track{height:12px;border-radius:999px;background:var(--line);overflow:hidden}.dist-bar-fill{height:100%;background:var(--ink);border-radius:999px}
:root[data-theme="dark"] .dist-bar-fill{background:#e5e7eb}

.analysis-matrix{display:grid;grid-template-columns:100px repeat(3,minmax(76px,1fr));gap:5px;min-width:430px}
.analysis-matrix-wrap{overflow:auto}.analysis-matrix .head{font-size:.68rem;color:var(--muted);display:flex;align-items:center;justify-content:center;text-align:center;padding:5px}
.analysis-matrix .cell{min-height:70px;border:1px solid var(--line);border-radius:10px;padding:7px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:color-mix(in srgb,var(--accent-soft) calc(var(--heat,0)*1%),var(--card))}
.analysis-matrix .cell b{font-size:1.15rem}.analysis-matrix .cell span{font-size:.65rem;color:var(--muted)}

.forest{display:grid;gap:8px}.forest-row{display:grid;grid-template-columns:minmax(155px,1.15fr) minmax(190px,2fr) 78px;gap:9px;align-items:center;font-size:.75rem}
.forest-name{min-width:0}.forest-name b,.forest-name span{display:block}.forest-name span{font-size:.67rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forest-axis{position:relative;height:30px;background:linear-gradient(to right,transparent 49.6%,var(--line) 49.6%,var(--line) 50.4%,transparent 50.4%);border-bottom:1px solid var(--line)}
.forest-ci{position:absolute;top:14px;height:3px;background:var(--muted);border-radius:99px}.forest-dot{position:absolute;top:9px;width:12px;height:12px;border-radius:50%;background:var(--ink);transform:translateX(-50%);box-shadow:0 0 0 2px var(--card)}
:root[data-theme="dark"] .forest-dot{background:#f3f4f6}.forest-value{text-align:right;font-variant-numeric:tabular-nums}.forest-value span{display:block;color:var(--muted);font-size:.66rem}

.trend-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.trend-card{border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}.trend-card h4{margin:0 0 2px;font-size:.82rem}.trend-card>span{font-size:.66rem;color:var(--muted)}
.trend-line{display:grid;grid-template-columns:26px 1fr 42px;gap:6px;align-items:center;margin-top:7px;font-size:.67rem}.trend-track{height:8px;background:var(--line);border-radius:99px;overflow:hidden}.trend-track i{display:block;height:100%;background:var(--ink);border-radius:99px}.trend-line.ikt .trend-track i{opacity:.48}.trend-line b{text-align:right;font-size:.68rem}

.svg-chart{width:100%;height:auto;display:block;overflow:visible}.svg-grid{stroke:var(--line);stroke-width:1}.svg-axis-label{fill:var(--muted);font-size:9px}.svg-series-a{fill:none;stroke:var(--ink);stroke-width:2.2}.svg-series-b{fill:none;stroke:var(--muted);stroke-width:2.2;stroke-dasharray:4 3}.svg-point-a{fill:var(--ink)}.svg-point-b{fill:var(--muted)}
.scatter-dot{fill:var(--ink);opacity:.7}

.agreement-bars{display:grid;gap:8px}.agreement-row{display:grid;grid-template-columns:minmax(145px,1.4fr) 2fr 58px;gap:8px;align-items:center;font-size:.75rem}
.cue-compare{display:grid;gap:7px}.cue-compare-row{display:grid;grid-template-columns:155px 1fr 1fr;gap:7px;align-items:center;font-size:.72rem}.cue-compare-track{position:relative;height:10px;background:var(--line);border-radius:99px;overflow:hidden}.cue-compare-track i{position:absolute;top:0;height:100%;border-radius:99px;background:var(--ink)}.cue-compare-track.secondary i{opacity:.48}

@media(max-width:900px){
  .analysis-hero{grid-template-columns:repeat(2,minmax(0,1fr))}.analysis-two,.analysis-three{grid-template-columns:1fr}.trend-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .forest-row{grid-template-columns:minmax(125px,1fr) minmax(150px,1.6fr) 72px}
}
@media(max-width:700px){
  body{font-size:17px}
  .scenario-panel .context{font-size:.88rem;line-height:1.42}
  .scenario-panel .cues li{font-size:.91rem;line-height:1.38;padding:7px 0}
  .rating-panel .question-title{font-size:.91rem;line-height:1.35}
  .rating-panel .snap-label{font-size:.76rem;min-height:44px;padding:8px 6px}
  .rating-panel .snap-selection{font-size:.78rem;line-height:1.35;padding:8px 9px}
  .rating-panel .snap-selection b{font-size:.82rem}
  .shell:not(.survey-wide) h1{font-size:1.72rem}
}
@media(max-width:560px){
  .analysis-hero{grid-template-columns:1fr 1fr}.trend-grid{grid-template-columns:1fr}
  .forest-row{grid-template-columns:1fr 74px}.forest-axis{grid-column:1/-1;grid-row:2}.forest-value{grid-column:2;grid-row:1}
  .cue-compare-row{grid-template-columns:110px 1fr 1fr}.agreement-row{grid-template-columns:115px 1fr 48px}
}


/* v3.2.1 — prevent long response labels from overflowing rating panels */
.rating-panel .snap-labels.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rating-panel .snap-labels.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rating-panel .snap-label{
  min-width:0;
  width:100%;
  max-width:100%;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:auto;
}
@media (max-width:700px){
  .rating-panel .snap-labels.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rating-panel .snap-labels.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* v3.2.2 — compact, neutral cue visualisation for expert scanning.
   Monochrome segments redundantly encode the three existing cue levels; no traffic-light semantics. */
.scenario-panel .cues.cue-cards{
  border-top:0;
  display:grid;
  gap:6px;
}
.scenario-panel .cues.cue-cards .cue-item{
  display:grid;
  grid-template-columns:minmax(122px,.8fr) minmax(0,1.8fr);
  gap:10px;
  align-items:center;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--card);
  min-width:0;
}
.cue-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.cue-title{font-size:.72rem;line-height:1.15;font-weight:800;color:var(--ink);overflow-wrap:anywhere}
.cue-level{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:72px;max-width:100%}
.cue-level i{display:block;height:6px;border-radius:999px;border:1px solid var(--line);background:transparent}
.cue-level i.active{background:var(--ink);border-color:var(--ink)}
.cue-text{min-width:0;font-size:.86rem;line-height:1.32;color:var(--ink)}
:root[data-theme="dark"] .cue-level i.active{background:#e5e7eb;border-color:#e5e7eb}

@media(max-width:1050px){
  .scenario-panel .cues.cue-cards .cue-item{grid-template-columns:minmax(145px,.75fr) minmax(0,2fr)}
}
@media(max-width:700px){
  .scenario-panel .cues.cue-cards{gap:7px}
  .scenario-panel .cues.cue-cards .cue-item{grid-template-columns:1fr;gap:5px;padding:8px 9px}
  .cue-meta{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  .cue-title{font-size:.76rem}
  .cue-level{width:66px;flex:0 0 66px}
  .cue-text{font-size:.88rem;line-height:1.34}
}

/* v3.3 — premium research presentation
   Understated, institutional visual language for participant-facing fieldwork.
   No gradients, decorative icons or synthetic visual motifs. */
:root{
  --bg:#f4f2ed;
  --card:#fffefa;
  --ink:#17222c;
  --muted:#68727b;
  --line:#d9d7d0;
  --line-strong:#c5c2ba;
  --accent:#17364d;
  --accent-hover:#102b3e;
  --accent-soft:#edf2f4;
  --surface-soft:#f8f7f3;
  --ok:#2f654d;
  --warn:#865f24;
  --radius:12px;
}
html{
  background:var(--bg);
  color:var(--ink);
  font-family:"Aptos","Segoe UI","Helvetica Neue",Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body{background:var(--bg);color:var(--ink);font-size:16px}
::selection{background:#dce6eb;color:var(--ink)}
h1,h2,h3{color:var(--ink)}
h1{
  font-family:ui-serif,Georgia,"Times New Roman",serif;
  font-weight:500;
  letter-spacing:-.032em;
  line-height:1.04;
}
h2,h3{font-weight:650;letter-spacing:-.012em}
p{line-height:1.6}
.eyebrow{
  font-size:.70rem;
  font-weight:700;
  letter-spacing:.14em;
  color:#5f6972;
}
.shell{padding:36px 18px 48px}
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:0 16px 46px rgba(29,37,43,.055),0 2px 8px rgba(29,37,43,.025);
}

/* Intro / completion */
.intro-card{padding:0;overflow:hidden;max-width:720px}
.intro-header{
  padding:32px 34px 27px;
  border-bottom:1px solid var(--line);
  background:#fbfaf6;
}
.intro-header .eyebrow{margin:0 0 14px}
.intro-header h1{font-size:clamp(2rem,5.5vw,3.15rem);max-width:610px;margin:.55rem 0 .75rem}
.intro-subtitle{max-width:620px;margin:0;color:#4f5a63;font-size:1.02rem;line-height:1.55}
.intro-meta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.78rem;padding-top:11px;border-top:1px solid var(--line)}
.intro-body{padding:25px 34px 5px}
.intro-body p{margin:.1rem 0 1rem}
.intro-privacy{font-size:.93rem!important;padding:13px 0 1px;border-top:1px solid var(--line)}
.intro-form{padding:4px 34px 26px}
.study-footer{margin:0;padding:13px 34px 14px;border-top:1px solid var(--line);background:#fbfaf6;color:var(--muted);font-size:.74rem!important;letter-spacing:.01em}
.done-card{max-width:650px;padding:36px}.done-card h1{font-size:2.35rem}.done-card .secondary-button{margin-top:20px!important}

/* Form controls */
.field{margin:18px 0}
.field label{font-weight:650;margin-bottom:8px;font-size:.94rem}
.field select,.field textarea,.field input[type="text"],.field input[type="password"],.field input:not([type]){
  border:1px solid var(--line-strong);
  border-radius:8px;
  padding:12px 13px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 1px 0 rgba(20,28,34,.02);
}
.field select:focus,.field textarea:focus,.field input:focus{
  outline:none;
  border-color:#6f8798;
  box-shadow:0 0 0 3px rgba(23,54,77,.09);
}
.consent{gap:11px;margin:21px 0 20px;padding-top:16px;border-top:1px solid var(--line);font-size:.92rem;line-height:1.5}
.consent input{accent-color:var(--accent);width:18px;height:18px;margin-top:3px}
.primary-button,.secondary-button{
  min-height:48px;
  border-radius:8px;
  padding:0 18px;
  font-weight:650;
  letter-spacing:.005em;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.primary-button{background:var(--accent)}
.primary-button:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 6px 18px rgba(23,54,77,.14)}
.secondary-button{background:#fffefa;border:1px solid var(--line-strong)}
.secondary-button:hover:not(:disabled){border-color:#89929a;background:#fbfaf7}
.primary-button:focus-visible,.secondary-button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(23,54,77,.13)}
.primary-button:disabled,.secondary-button:disabled{opacity:.42}

/* Participant instrument */
.shell.survey-wide{width:min(1420px,100%);padding:24px 22px 36px}
.vignette-card{padding:20px 22px 18px;border-radius:12px;box-shadow:0 14px 40px rgba(29,37,43,.045)}
.vignette-progress{margin-bottom:16px;padding:0 2px}
.progress-meta{font-size:.72rem;letter-spacing:.025em;color:var(--muted);margin-bottom:8px}
.progress-line{height:2px;background:#dcdad4;border-radius:0}
.progress-fill{background:var(--accent);border-radius:0}
.vignette-layout{grid-template-columns:minmax(260px,.82fr) minmax(430px,1.38fr) minmax(260px,.82fr);gap:14px}
.rating-panel,.scenario-panel{border:1px solid var(--line);border-radius:9px;padding:18px;background:#fffefa}
.rating-panel{background:#f8f7f3}
.scenario-panel{padding:18px 20px}
.rating-panel .eyebrow,.scenario-panel .eyebrow{font-size:.66rem;letter-spacing:.13em;margin-bottom:9px}
.scenario-panel .context{
  margin:7px 0 13px;
  padding:11px 12px;
  border:0;
  border-left:2px solid #7c8f9d;
  border-radius:0;
  background:#f6f7f6;
  font-size:.88rem;
  line-height:1.47;
}
.scenario-panel .cues.cue-cards{gap:0;border-top:1px solid var(--line)}
.scenario-panel .cues.cue-cards .cue-item{
  grid-template-columns:minmax(130px,.78fr) minmax(0,1.9fr);
  gap:14px;
  padding:11px 2px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
.cue-meta{gap:7px}.cue-title{font-size:.71rem;font-weight:700;line-height:1.2}.cue-text{font-size:.88rem;line-height:1.42}
.cue-level{width:62px;gap:3px}.cue-level i{height:3px;border:0;border-radius:0;background:#dad8d2}.cue-level i.active{background:#566875;border-color:transparent}
.rating-panel .question-title{font-size:.93rem;line-height:1.38;font-weight:650;margin-bottom:7px}
.rating-panel .snap-help{font-size:.69rem;line-height:1.35;margin-bottom:10px}
.rating-panel .snap-track{border:1px solid var(--line);border-radius:8px;padding:12px 8px 9px;background:#fffefa}
.rating-panel .snap-rail{height:42px;margin:0 15px}
.rating-panel .snap-line,.rating-panel .snap-fill{top:19px;height:2px}
.rating-panel .snap-line{background:#cfd0cc}.rating-panel .snap-fill{background:var(--accent)}
.rating-panel .snap-tick{top:12px;width:16px;height:16px;border:2px solid #77818a;background:#fffefa;box-shadow:0 0 0 3px #fffefa}
.rating-panel .snap-tick:hover{border-color:var(--accent);transform:translateX(-50%) scale(1.04)}
.rating-panel .snap-tick.selected{background:var(--accent);border-color:var(--accent)}
.rating-panel .snap-thumb{top:9px;width:22px;height:22px;border:3px solid #fffefa;box-shadow:0 0 0 1px var(--accent),0 2px 7px rgba(23,54,77,.14)}
.rating-panel .snap-labels{gap:4px;margin-top:3px}
.rating-panel .snap-label{font-size:.66rem;line-height:1.18;min-height:38px;padding:6px 3px;border-radius:5px;color:#64707a;font-weight:550}
.rating-panel .snap-label.selected{background:#e8eef1;color:var(--accent);font-weight:700}
.rating-panel .snap-selection{margin-top:9px;min-height:65px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:10px 1px 2px;font-size:.77rem;line-height:1.42}
.rating-panel .snap-selection.empty{border-style:solid;background:transparent}
.rating-panel .snap-selection b{font-size:.80rem;font-weight:700;color:var(--ink)}
.vignette-footer{margin-top:14px}.vignette-footer .nav-row{margin-top:8px;justify-content:flex-end}
.vignette-footer .primary-button{max-width:320px;flex:0 1 320px}
.vignette-footer .secondary-button{width:auto;min-width:92px;padding:0 16px}
.status{border-radius:7px;border:1px solid transparent}.status.warn{background:#fbf6eb;border-color:#ead9b8;color:#765722}.status.ok{background:#edf5f0;border-color:#cfe0d6;color:#315c47}

/* Admin: same restrained visual language */
.admin-shell{padding-top:28px}
.admin-topbar{border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:13px}
.admin-topbar h1{font-size:2.35rem}
.panel,.kpi,.analysis-kpi,.viz-card,.freeze-card{border-radius:9px;box-shadow:none}
.admin-tab{border-radius:7px;font-weight:650}.admin-tab.active{background:var(--accent);border-color:var(--accent)}
.kpi b,.analysis-kpi b{font-family:ui-serif,Georgia,"Times New Roman",serif;font-weight:500}
.theme-toggle{border-radius:7px;box-shadow:0 4px 14px rgba(0,0,0,.07);font-weight:600;font-size:.78rem}

@media(max-width:1050px){
  .shell.survey-wide{width:min(920px,100%)}
  .vignette-layout{grid-template-columns:1fr 1fr;gap:12px}
}
@media(max-width:700px){
  body{background:#fffefa;font-size:16px}
  .shell.survey-wide{padding:0}
  .vignette-card{padding:12px 12px 18px;background:#fffefa}
  .scenario-panel,.rating-panel{border-radius:7px;padding:12px}
  .rating-panel{background:#f8f7f3}
  .scenario-panel .cues.cue-cards .cue-item{grid-template-columns:1fr;gap:5px;padding:9px 1px}
  .cue-meta{flex-direction:row;align-items:center;justify-content:space-between}
  .rating-panel .snap-track{border:0;background:transparent;padding:0}
  .rating-panel .snap-labels{gap:6px}
  .rating-panel .snap-label{
    min-height:42px;
    border:1px solid var(--line-strong);
    border-radius:6px;
    background:#fffefa;
    font-size:.70rem;
    color:#4f5a63;
  }
  .rating-panel .snap-label.selected{background:var(--accent);border-color:var(--accent);color:#fff}
  .rating-panel .snap-selection{margin-top:7px;padding-top:8px}
  .vignette-footer .nav-row{display:grid;grid-template-columns:92px 1fr}
  .vignette-footer .primary-button{max-width:none;width:100%}
  .vignette-footer .secondary-button{width:100%;min-width:0}
  .shell:not(.survey-wide){padding:0;background:#fffefa}
  .shell:not(.survey-wide)>.card{background:#fffefa;padding:0;min-height:100vh}
  .shell:not(.survey-wide)>.card:not(.intro-card){padding:24px 18px}
  .intro-card{max-width:none}
  .intro-header{padding:25px 19px 22px}
  .intro-header h1{font-size:2.15rem}
  .intro-meta{font-size:.72rem}
  .intro-body{padding:21px 19px 3px}
  .intro-form{padding:3px 19px 24px}
  .study-footer{padding:13px 19px 15px}
  .consent{font-size:.90rem}
}

/* Final participant refinements */
@media(min-width:701px){
  .rating-panel{align-self:start}
}
@media(max-width:700px){
  .rating-panel .snap-labels.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rating-panel .snap-labels.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* v3.4 — Decision dossier
   Visual direction: technical decision sheet / regulatory assessment.
   Flat surfaces, cool neutral palette, compact type hierarchy, semantic radio choices.
   Designed to avoid generic templated/SaaS motifs: no warm-cream editorial serif, pills, gradients,
   decorative shadows, oversized hero type, or slider-as-decoration. */
:root{
  --bg:#f3f5f6;
  --card:#ffffff;
  --ink:#1d252c;
  --muted:#626d76;
  --line:#d5dade;
  --line-strong:#aeb7bd;
  --accent:#315d73;
  --accent-hover:#244b60;
  --accent-soft:#edf3f5;
  --surface-soft:#f6f8f9;
  --ok:#315f4a;
  --warn:#79591f;
  --radius:4px;
}
html{
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}
body{background:var(--bg);color:var(--ink);font-size:16px;line-height:1.5}
h1,h2,h3{font-family:inherit;color:var(--ink);font-weight:500;letter-spacing:-.012em}
h1{font-size:2rem;line-height:1.14}
h2{font-size:1.25rem;line-height:1.25}
p{line-height:1.55}
.eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.shell{width:min(980px,100%);padding:48px 20px 56px;display:block}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:none}

/* Intro: structured study sheet rather than marketing card */
.intro-card{max-width:920px;margin:0 auto;padding:0;overflow:hidden}
.intro-header{padding:30px 34px 28px;background:#fff;border-bottom:1px solid var(--line)}
.intro-kicker{display:flex;justify-content:space-between;gap:16px;align-items:center;padding-bottom:12px;border-bottom:2px solid var(--ink);font-size:.78rem;font-weight:500;color:var(--muted)}
.study-code{font-size:.72rem;letter-spacing:.06em;color:var(--ink)}
.intro-title-row{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:42px;padding-top:25px;align-items:start}
.intro-header h1{font-family:inherit;font-size:clamp(1.85rem,3.6vw,2.45rem);line-height:1.12;font-weight:500;letter-spacing:-.025em;max-width:620px;margin:0 0 10px}
.intro-subtitle{max-width:620px;margin:0;color:#53606a;font-size:1rem;line-height:1.5}
.intro-facts{margin:2px 0 0;display:grid;gap:11px}
.intro-facts div{display:grid;grid-template-columns:64px 1fr;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.intro-facts dt{margin:0;font-size:.69rem;color:var(--muted)}
.intro-facts dd{margin:0;font-size:.79rem;font-weight:500;color:var(--ink)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:0}
.intro-body{padding:30px 34px 34px;border-right:1px solid var(--line)}
.intro-body h2{font-size:.98rem;font-weight:600;margin:0 0 16px}
.intro-body p{font-size:.94rem;line-height:1.62;margin:0 0 16px;max-width:570px}
.intro-privacy{margin-top:24px!important;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem!important}
.intro-form{padding:30px 30px 32px;background:var(--surface-soft)}
.form-heading{padding-bottom:17px;border-bottom:1px solid var(--line);margin-bottom:18px}
.form-heading>span{display:block;font-size:.78rem;font-weight:600;margin-bottom:4px}
.form-heading p{margin:0;font-size:.82rem;line-height:1.45;color:var(--muted)}
.field{margin:0 0 18px}
.field label{font-size:.82rem;line-height:1.35;font-weight:500;margin-bottom:7px}
.field select,.field textarea,.field input[type="text"],.field input[type="password"],.field input:not([type]){
  width:100%;min-height:44px;border:1px solid var(--line-strong);border-radius:2px;padding:10px 11px;background:#fff;color:var(--ink);box-shadow:none
}
.field textarea{min-height:auto}
.field select:focus,.field textarea:focus,.field input:focus{outline:2px solid rgba(49,93,115,.3);outline-offset:1px;border-color:var(--accent);box-shadow:none}
.consent{display:grid;grid-template-columns:18px 1fr;gap:10px;margin:21px 0 20px;padding-top:18px;border-top:1px solid var(--line);font-size:.80rem;line-height:1.48}
.consent input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--accent)}
.primary-button,.secondary-button{min-height:44px;border-radius:2px;padding:0 18px;font-size:.88rem;font-weight:500;letter-spacing:0;box-shadow:none;transition:background .12s ease,border-color .12s ease,color .12s ease}
.primary-button{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.primary-button:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:none}
.primary-button:disabled{background:#e1e5e7;color:#7a858d;border-color:#d5dade;opacity:1}
.secondary-button{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.secondary-button:hover:not(:disabled){background:#f4f6f7;border-color:#89949c}
.secondary-button:disabled{background:#fafafa;color:#a4abb0;border-color:#e1e4e6;opacity:1}
.primary-button:focus-visible,.secondary-button:focus-visible{outline:2px solid rgba(49,93,115,.35);outline-offset:2px;box-shadow:none}
.intro-form .primary-button{width:100%}
.study-footer{margin:0;padding:10px 34px 11px;border-top:1px solid var(--line);background:#fff;color:#78828a;font-size:.70rem!important;letter-spacing:.01em}

/* Case / decision dossier */
.shell.survey-wide{width:min(1260px,100%);padding:30px 22px 42px}
.vignette-card{padding:0;border-radius:4px;overflow:hidden;background:#fff;box-shadow:none}
.case-progress{padding:14px 20px 0;background:#fff}
.case-progress>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:10px;font-size:.73rem;color:var(--muted)}
.case-count{font-weight:600;color:var(--ink)}
.progress-line{height:2px;background:#e3e6e8;border-radius:0;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);border-radius:0;transition:width .15s ease}
.vignette-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(360px,.8fr);gap:0;align-items:stretch}
.scenario-panel,.rating-panel{border:0;border-radius:0;background:#fff;padding:26px 26px 28px}
.scenario-panel{border-right:1px solid var(--line)}
.rating-panel{align-self:stretch;background:#f7f8f9;padding:26px 24px 28px}
.section-heading{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;margin-bottom:20px}
.section-index{display:block;font-size:.72rem;font-weight:600;color:var(--muted);padding-top:3px}
.section-kicker{margin:0 0 2px;font-size:.72rem;line-height:1.2;color:var(--muted);font-weight:500}
.section-heading h1,.section-heading h2{margin:0;font-family:inherit;font-weight:500;letter-spacing:-.015em}
.section-heading h1{font-size:1.48rem}.section-heading h2{font-size:1.26rem}
.context{display:grid;grid-template-columns:132px 1fr;gap:18px;margin:0 0 23px;padding:15px 0;border:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);border-radius:0;background:#fff;font-size:.88rem;line-height:1.5}
.context b{font-weight:600}.context span{color:#38434b}
.cue-table-head{display:grid;grid-template-columns:minmax(145px,.62fr) minmax(0,1.38fr);gap:20px;padding:0 0 8px;border-bottom:1px solid var(--line-strong);font-size:.67rem;font-weight:500;color:var(--muted)}
.scenario-panel .cues.cue-cards{display:grid;gap:0;border:0;margin:0;padding:0}
.scenario-panel .cues.cue-cards .cue-item{display:grid;grid-template-columns:minmax(145px,.62fr) minmax(0,1.38fr);gap:20px;align-items:start;padding:12px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.cue-meta{display:flex;flex-direction:column;gap:7px;min-width:0}
.cue-title{font-size:.76rem;line-height:1.25;font-weight:600;color:var(--ink)}
.cue-level{display:grid;grid-template-columns:repeat(3,14px);gap:3px;width:auto;max-width:none}
.cue-level i{display:block;width:14px;height:3px;border:0;border-radius:0;background:#d7dcdf}
.cue-level i.active{background:#526b78;border:0}
.cue-text{font-size:.86rem;line-height:1.48;color:#29343c}

.decision-heading{margin-bottom:22px}
.rating-block{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid var(--line)}
.rating-block:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.rating-label{margin:0 0 8px;font-size:.72rem;font-weight:600;color:var(--accent)}
.decision-group{border:0;padding:0;margin:0;min-width:0}
.decision-group legend{padding:0;margin:0 0 5px;font-size:.91rem;line-height:1.42;font-weight:600;color:var(--ink)}
.decision-help{margin:0 0 11px;font-size:.72rem;line-height:1.4;color:var(--muted)}
.decision-options{display:grid;gap:6px}
.decision-option{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;padding:9px 10px;border:1px solid #cdd3d7;border-radius:2px;background:#fff;cursor:pointer;transition:border-color .1s ease,background .1s ease}
.decision-option:hover{border-color:#8f9ba3}
.decision-option.selected{border-color:var(--accent);background:var(--accent-soft)}
.decision-option input{width:16px;height:16px;margin:1px 0 0;accent-color:var(--accent)}
.decision-option input:focus-visible{outline:2px solid rgba(49,93,115,.35);outline-offset:2px}
.decision-option-label{font-size:.80rem;line-height:1.3;font-weight:500;color:var(--ink)}
.decision-selection{margin-top:11px;padding:10px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-height:54px;font-size:.75rem;line-height:1.4;color:var(--muted)}
.decision-selection.empty{justify-content:flex-start}
.decision-selection .selection-label{font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:#79838a}
.decision-selection b{font-size:.77rem;font-weight:600;color:var(--ink)}
.vignette-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:16px;padding:15px 20px 18px;border-top:1px solid var(--line);background:#fff;margin-top:0}
.vignette-footer #syncStatus{margin-right:auto;max-width:620px}
.vignette-footer .nav-row{display:flex;gap:8px;margin:0}
.vignette-footer .primary-button{width:auto;min-width:150px;max-width:none;flex:none}
.vignette-footer .secondary-button{width:auto;min-width:92px}
.status{border-radius:2px;margin:0;padding:9px 10px;font-size:.78rem}.status.warn{background:#fff8e9;border:1px solid #e4d4ab;color:#6f551d}.status.ok{background:#eef6f1;border:1px solid #cddfd4;color:#315f4a}

/* Finish / done */
.shell:not(.survey-wide)>.card:not(.intro-card){max-width:760px;margin:0 auto;border-radius:4px;padding:34px}
.shell:not(.survey-wide)>.card:not(.intro-card) h1{font-family:inherit;font-size:1.9rem;font-weight:500}
.done-card{max-width:650px!important}

/* Admin inherits the same measured language without changing functionality */
.admin-shell{width:min(1180px,100%);padding:30px 20px 48px}
.admin-topbar{padding-bottom:15px;border-bottom:2px solid var(--ink)}
.admin-topbar h1{font-family:inherit;font-size:1.9rem;font-weight:500}
.panel,.kpi,.analysis-kpi,.viz-card,.freeze-card,.stat{border-radius:3px;box-shadow:none;background:#fff}
.admin-tab{border-radius:2px;font-size:.82rem;font-weight:500}.admin-tab.active{background:var(--accent);border-color:var(--accent)}
.kpi b,.analysis-kpi b{font-family:inherit;font-weight:500}
.theme-toggle{border-radius:2px;box-shadow:none;font-weight:500}

@media(max-width:900px){
  .shell.survey-wide{width:min(760px,100%)}
  .vignette-layout{grid-template-columns:1fr}
  .scenario-panel{border-right:0;border-bottom:1px solid var(--line)}
  .rating-panel{background:#f7f8f9}
  .intro-title-row{grid-template-columns:1fr;gap:22px}
  .intro-facts{grid-template-columns:repeat(3,1fr);gap:10px}
  .intro-facts div{display:block}.intro-facts dt{margin-bottom:2px}
  .intro-grid{grid-template-columns:1fr}
  .intro-body{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:600px){
  body{background:#fff;font-size:16px}
  .shell,.shell.survey-wide{padding:0;background:#fff}
  .card,.vignette-card,.intro-card{border-left:0;border-right:0;border-top:0;border-radius:0;min-height:100vh}
  .intro-header{padding:22px 18px 20px}
  .intro-kicker{align-items:flex-start;font-size:.72rem}
  .intro-title-row{padding-top:20px}
  .intro-header h1{font-size:1.9rem}
  .intro-facts{grid-template-columns:1fr 1fr 1fr;gap:7px}
  .intro-facts div{padding-bottom:6px}.intro-facts dd{font-size:.73rem}.intro-facts dt{font-size:.63rem}
  .intro-body{padding:23px 18px 24px}
  .intro-form{padding:24px 18px 26px}
  .study-footer{padding:10px 18px 12px}
  .case-progress{padding:12px 14px 0}
  .scenario-panel,.rating-panel{padding:21px 16px 24px}
  .section-heading{grid-template-columns:26px 1fr;gap:9px;margin-bottom:17px}
  .section-heading h1{font-size:1.32rem}.section-heading h2{font-size:1.2rem}
  .context{grid-template-columns:1fr;gap:5px;padding:12px 0;margin-bottom:20px}
  .cue-table-head{display:none}
  .scenario-panel .cues.cue-cards .cue-item{grid-template-columns:1fr;gap:6px;padding:11px 0}
  .cue-meta{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .cue-title{font-size:.78rem}.cue-text{font-size:.88rem}
  .decision-option{padding:10px}.decision-option-label{font-size:.84rem}
  .vignette-footer{display:block;padding:14px 16px 18px}
  .vignette-footer #syncStatus{margin:0 0 10px;max-width:none}
  .vignette-footer .nav-row{display:grid;grid-template-columns:92px 1fr}
  .vignette-footer .primary-button,.vignette-footer .secondary-button{width:100%;min-width:0}
  .shell:not(.survey-wide)>.card:not(.intro-card){border:0;padding:25px 18px;min-height:100vh}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* v3.4.1 restraint pass: remove decorative section numbering. */
.section-heading{display:block}
.section-heading .section-kicker{margin-bottom:3px}
@media(max-width:600px){.section-heading{display:block}}

/* v3.5 — Plain Research UI
   Participant-facing interface only. The visual goal is a conventional,
   neutral research form rather than a branded product or dashboard. */
.shell:not(.admin-shell),
.shell.survey-wide{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;
  color:#20262c;
}
body{background:#f4f5f6}

.shell:not(.admin-shell){
  width:min(820px,100%);
  margin:0 auto;
  padding:42px 18px 54px;
  display:block;
}
.shell:not(.admin-shell)>.card{
  background:#fff;
  border:1px solid #d7dce0;
  border-radius:3px;
  box-shadow:none;
}
.shell:not(.admin-shell) h1,
.shell:not(.admin-shell) h2,
.shell:not(.admin-shell) h3{
  font-family:inherit;
  color:#20262c;
  letter-spacing:0;
}
.shell:not(.admin-shell) h1{font-size:1.85rem;line-height:1.2;font-weight:600}
.shell:not(.admin-shell) h2{font-size:1.05rem;line-height:1.35;font-weight:600}
.shell:not(.admin-shell) p{line-height:1.55}

/* Start page: one straightforward reading column and one form column below it. */
.shell:not(.admin-shell) .intro-card{max-width:760px;margin:0 auto;padding:0;overflow:hidden}
.shell:not(.admin-shell) .intro-header{
  padding:32px 34px 25px;
  background:#fff;
  border:0;
}
.shell:not(.admin-shell) .survey-type{
  margin:0 0 10px;
  font-size:.79rem;
  color:#66717a;
}
.shell:not(.admin-shell) .intro-header h1{
  margin:0 0 9px;
  max-width:none;
  font-size:2rem;
  line-height:1.18;
  font-weight:600;
  letter-spacing:0;
}
.shell:not(.admin-shell) .intro-subtitle{
  margin:0;
  max-width:650px;
  color:#3f4951;
  font-size:1rem;
  line-height:1.5;
}
.shell:not(.admin-shell) .survey-meta{
  margin:17px 0 0;
  padding-top:14px;
  border-top:1px solid #e0e3e5;
  font-size:.82rem;
  color:#66717a;
}
.shell:not(.admin-shell) .intro-body{
  padding:24px 34px 8px;
  border:0;
  border-top:1px solid #d7dce0;
  background:#fff;
}
.shell:not(.admin-shell) .intro-body h2,
.shell:not(.admin-shell) .intro-form h2{
  margin:0 0 13px;
  font-size:1rem;
  font-weight:600;
}
.shell:not(.admin-shell) .intro-body p{
  max-width:660px;
  margin:0 0 14px;
  font-size:.94rem;
  line-height:1.58;
}
.shell:not(.admin-shell) .intro-privacy{
  margin:19px 0 0!important;
  padding:16px 0 0!important;
  border-top:1px solid #e0e3e5;
  color:#59636b;
  font-size:.86rem!important;
}
.shell:not(.admin-shell) .intro-form{
  padding:24px 34px 31px;
  background:#fff;
}
.shell:not(.admin-shell) .intro-form .field{margin:0 0 16px}
.shell:not(.admin-shell) .field label{
  margin-bottom:6px;
  font-size:.86rem;
  line-height:1.4;
  font-weight:600;
}
.shell:not(.admin-shell) .field select,
.shell:not(.admin-shell) .field textarea,
.shell:not(.admin-shell) .field input{
  min-height:43px;
  border:1px solid #aeb7be;
  border-radius:3px;
  padding:9px 10px;
  background:#fff;
  color:#20262c;
  box-shadow:none;
}
.shell:not(.admin-shell) .field select:focus,
.shell:not(.admin-shell) .field textarea:focus,
.shell:not(.admin-shell) .field input:focus{
  outline:2px solid #7899ae;
  outline-offset:1px;
  border-color:#486f87;
}
.shell:not(.admin-shell) .consent{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:9px;
  margin:22px 0 20px;
  padding-top:18px;
  border-top:1px solid #e0e3e5;
  font-size:.84rem;
  line-height:1.48;
}
.shell:not(.admin-shell) .consent input{
  width:16px;
  height:16px;
  margin:2px 0 0;
  accent-color:#315f7a;
}
.shell:not(.admin-shell) .primary-button,
.shell:not(.admin-shell) .secondary-button{
  min-height:43px;
  border-radius:3px;
  padding:0 17px;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:0;
  box-shadow:none;
}
.shell:not(.admin-shell) .primary-button{
  background:#315f7a;
  color:#fff;
  border:1px solid #315f7a;
}
.shell:not(.admin-shell) .primary-button:hover:not(:disabled){background:#284f66;border-color:#284f66}
.shell:not(.admin-shell) .primary-button:disabled{
  background:#e4e7e9;
  color:#8b949a;
  border-color:#d6dade;
  opacity:1;
}
.shell:not(.admin-shell) .secondary-button{
  background:#fff;
  color:#2d363d;
  border:1px solid #aeb7be;
}
.shell:not(.admin-shell) .secondary-button:hover:not(:disabled){background:#f6f7f7}
.shell:not(.admin-shell) .secondary-button:disabled{color:#a4abb0;border-color:#dce0e2;background:#fafafa;opacity:1}
.shell:not(.admin-shell) .intro-form .primary-button{width:auto;min-width:170px}

/* Vignette: assessment – information – assessment. */
.shell.survey-wide{
  width:min(1380px,100%);
  padding:28px 18px 40px;
}
.shell.survey-wide>.vignette-card{
  width:100%;
  padding:0;
  overflow:hidden;
  border:1px solid #d1d7db;
  border-radius:3px;
  background:#fff;
  box-shadow:none;
}
.shell.survey-wide .case-progress{
  display:block;
  padding:12px 18px;
  border-bottom:1px solid #dfe3e5;
  background:#fff;
}
.shell.survey-wide .case-count{
  display:block;
  font-size:.78rem;
  font-weight:600;
  color:#505a62;
}
.shell.survey-wide .vignette-layout{
  display:grid;
  grid-template-columns:minmax(235px,.72fr) minmax(500px,1.75fr) minmax(235px,.72fr);
  grid-template-areas:"left scenario right";
  align-items:stretch;
  gap:0;
}
.shell.survey-wide .scenario-panel{
  grid-area:scenario;
  padding:25px 28px 30px;
  border:0;
  border-left:1px solid #dfe3e5;
  border-right:1px solid #dfe3e5;
  border-radius:0;
  background:#fff;
}
.shell.survey-wide .rating-left{grid-area:left}
.shell.survey-wide .rating-right{grid-area:right}
.shell.survey-wide .rating-panel{
  padding:25px 20px 28px;
  border:0;
  border-radius:0;
  background:#fff;
  align-self:stretch;
}
.shell.survey-wide .scenario-panel h1{
  margin:0 0 18px;
  font-size:1.35rem;
  line-height:1.25;
  font-weight:600;
}
.shell.survey-wide .rating-panel h2{
  margin:0 0 16px;
  font-size:.98rem;
  line-height:1.35;
  font-weight:600;
}
.shell.survey-wide .context{
  display:block;
  margin:0 0 18px;
  padding:0 0 17px;
  border:0;
  border-bottom:1px solid #dfe3e5;
  border-radius:0;
  background:#fff;
  font-size:.88rem;
  line-height:1.55;
}
.shell.survey-wide .context b{
  display:block;
  margin-bottom:5px;
  font-weight:600;
  color:#20262c;
}
.shell.survey-wide .context span{color:#354048}
.shell.survey-wide .cues.cue-cards{
  display:block;
  list-style:none;
  margin:0;
  padding:0;
  border:0;
}
.shell.survey-wide .cues.cue-cards .cue-item{
  display:grid;
  grid-template-columns:minmax(150px,.58fr) minmax(0,1.42fr);
  gap:20px;
  align-items:start;
  margin:0;
  padding:11px 0;
  border:0;
  border-bottom:1px solid #e2e5e7;
  border-radius:0;
  background:transparent;
}
.shell.survey-wide .cues.cue-cards .cue-item:first-child{padding-top:0}
.shell.survey-wide .cue-title{
  font-size:.78rem;
  line-height:1.35;
  font-weight:600;
  color:#273039;
}
.shell.survey-wide .cue-text{
  font-size:.86rem;
  line-height:1.5;
  color:#354048;
}

.shell.survey-wide .decision-group{
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}
.shell.survey-wide .decision-group legend{
  margin:0 0 12px;
  padding:0;
  font-size:.86rem;
  line-height:1.5;
  font-weight:400;
  color:#313a41;
}
.shell.survey-wide .decision-options{display:block}
.shell.survey-wide .decision-option{
  display:grid;
  grid-template-columns:17px 1fr;
  gap:8px;
  align-items:start;
  margin:0;
  padding:9px 0;
  border:0;
  border-top:1px solid #e2e5e7;
  border-radius:0;
  background:transparent;
  cursor:pointer;
  transition:none;
}
.shell.survey-wide .decision-option:last-child{border-bottom:1px solid #e2e5e7}
.shell.survey-wide .decision-option:hover,
.shell.survey-wide .decision-option.selected{background:transparent;border-color:#e2e5e7}
.shell.survey-wide .decision-option input{
  width:15px;
  height:15px;
  margin:2px 0 0;
  accent-color:#315f7a;
}
.shell.survey-wide .decision-option-label{
  font-size:.82rem;
  line-height:1.38;
  font-weight:400;
  color:#273039;
}
.shell.survey-wide .decision-help,
.shell.survey-wide .decision-selection,
.shell.survey-wide .rating-label,
.shell.survey-wide .section-heading,
.shell.survey-wide .section-kicker,
.shell.survey-wide .cue-table-head,
.shell.survey-wide .cue-level,
.shell.survey-wide .progress-line,
.shell.survey-wide .case-progress-label{display:none!important}

.shell.survey-wide .vignette-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  margin:0;
  padding:13px 18px 15px;
  border-top:1px solid #dfe3e5;
  background:#fff;
}
.shell.survey-wide .vignette-footer #syncStatus{margin-right:auto}
.shell.survey-wide .vignette-footer .nav-row{display:flex;gap:8px;margin:0}
.shell.survey-wide .vignette-footer .primary-button,
.shell.survey-wide .vignette-footer .secondary-button{width:auto;min-width:92px}

@media (max-width:980px){
  .shell.survey-wide{width:min(760px,100%)}
  .shell.survey-wide .vignette-layout{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"scenario scenario" "left right";
  }
  .shell.survey-wide .scenario-panel{
    border-left:0;
    border-right:0;
    border-bottom:1px solid #dfe3e5;
  }
  .shell.survey-wide .rating-left{border-right:1px solid #dfe3e5}
}

@media (max-width:640px){
  body{background:#fff}
  .shell:not(.admin-shell),
  .shell.survey-wide{width:100%;padding:0}
  .shell:not(.admin-shell)>.card,
  .shell.survey-wide>.vignette-card{
    min-height:100vh;
    border:0;
    border-radius:0;
  }
  .shell:not(.admin-shell) .intro-header{padding:25px 18px 22px}
  .shell:not(.admin-shell) .intro-header h1{font-size:1.68rem}
  .shell:not(.admin-shell) .intro-body{padding:21px 18px 6px}
  .shell:not(.admin-shell) .intro-form{padding:22px 18px 28px}
  .shell:not(.admin-shell) .intro-form .primary-button{width:100%}

  .shell.survey-wide .case-progress{padding:11px 16px}
  .shell.survey-wide .vignette-layout{
    display:flex;
    flex-direction:column;
  }
  .shell.survey-wide .scenario-panel{order:1;padding:21px 16px 24px;border:0;border-bottom:1px solid #dfe3e5}
  .shell.survey-wide .rating-left{order:2;border:0;border-bottom:1px solid #dfe3e5}
  .shell.survey-wide .rating-right{order:3;border:0}
  .shell.survey-wide .rating-panel{padding:21px 16px 24px}
  .shell.survey-wide .cues.cue-cards .cue-item{grid-template-columns:1fr;gap:4px;padding:10px 0}
  .shell.survey-wide .scenario-panel h1{font-size:1.22rem;margin-bottom:15px}
  .shell.survey-wide .rating-panel h2{font-size:1rem;margin-bottom:12px}
  .shell.survey-wide .decision-group legend{font-size:.88rem}
  .shell.survey-wide .decision-option-label{font-size:.88rem}
  .shell.survey-wide .vignette-footer{padding:12px 16px 16px}
  .shell.survey-wide .vignette-footer .nav-row{width:100%}
  .shell.survey-wide .vignette-footer .secondary-button{flex:0 0 auto}
  .shell.survey-wide .vignette-footer .primary-button{flex:1}
}

/* v3.6 — restore functional cue-level scan bars and clarify terminology.
   The bars are monochrome, rectangular and cumulative: more filled segments
   always correspond to the higher coded cue level. They are a redundant visual
   encoding of the vignette text, not an additional rating control. */
.shell:not(.admin-shell) .term-note{
  margin:15px 0 0;
  padding:12px 14px;
  border-left:3px solid #9aa6ad;
  background:#f7f8f8;
  color:#465159;
  font-size:.86rem;
  line-height:1.5;
}
.shell:not(.admin-shell) .term-note b{color:#273039}

.shell.survey-wide .cue-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  min-width:0;
}
.shell.survey-wide .cue-level{
  display:grid!important;
  grid-template-columns:repeat(3,20px);
  gap:3px;
  width:auto;
  max-width:100%;
  flex:0 0 auto;
}
.shell.survey-wide .cue-level i{
  display:block;
  width:20px;
  height:5px;
  border:0;
  border-radius:0;
  background:#d9dee1;
}
.shell.survey-wide .cue-level i.active{
  background:#506672;
  border-color:transparent;
}

@media (max-width:640px){
  .shell.survey-wide .cue-meta{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .shell.survey-wide .cue-level{grid-template-columns:repeat(3,18px)}
  .shell.survey-wide .cue-level i{width:18px;height:5px}
  .shell:not(.admin-shell) .term-note{padding:10px 12px;font-size:.84rem}
}

/* v3.6.1 corporate-browser compatibility fallbacks.
   These rules do not change the intended modern-browser design. They provide
   usable layout fallbacks where CSS Grid, min() or other newer syntax is absent. */
.shell:not(.admin-shell){width:96%;max-width:820px}
.shell.survey-wide{width:96%;max-width:1380px}
.shell.survey-wide .vignette-layout{display:-ms-flexbox;display:flex}
.shell.survey-wide .rating-panel{-ms-flex:0 0 24%;flex:0 0 24%;max-width:24%}
.shell.survey-wide .scenario-panel{-ms-flex:1 1 auto;flex:1 1 auto;max-width:52%}
.shell.survey-wide .rating-left{-ms-flex-order:1;order:1}
.shell.survey-wide .scenario-panel{-ms-flex-order:2;order:2}
.shell.survey-wide .rating-right{-ms-flex-order:3;order:3}
.shell.survey-wide .cues.cue-cards .cue-item{display:-ms-flexbox;display:flex}
.shell.survey-wide .cue-meta{-ms-flex:0 0 150px;flex:0 0 150px;margin-right:20px}
.shell.survey-wide .cue-text{-ms-flex:1 1 auto;flex:1 1 auto}
.shell.survey-wide .decision-option{display:-ms-flexbox;display:flex}
.shell.survey-wide .decision-option input{-ms-flex:0 0 15px;flex:0 0 15px;margin-right:8px}
.compat-loading{max-width:760px;margin:0 auto}

@supports (display:grid){
  .shell.survey-wide .vignette-layout{display:grid}
  .shell.survey-wide .rating-panel,.shell.survey-wide .scenario-panel{max-width:none}
  .shell.survey-wide .cues.cue-cards .cue-item{display:grid}
  .shell.survey-wide .cue-meta{margin-right:0}
  .shell.survey-wide .decision-option{display:grid}
  .shell.survey-wide .decision-option input{margin-right:0}
}

@media (max-width:980px){
  .shell.survey-wide .vignette-layout{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}
  .shell.survey-wide .scenario-panel{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;-ms-flex-order:1;order:1}
  .shell.survey-wide .rating-panel{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
  .shell.survey-wide .rating-left{-ms-flex-order:2;order:2}
  .shell.survey-wide .rating-right{-ms-flex-order:3;order:3}
  @supports (display:grid){
    .shell.survey-wide .vignette-layout{display:grid}
    .shell.survey-wide .scenario-panel,.shell.survey-wide .rating-panel{max-width:none}
  }
}
@media (max-width:640px){
  .shell:not(.admin-shell),.shell.survey-wide{width:100%;max-width:none}
  .shell.survey-wide .vignette-layout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}
  .shell.survey-wide .scenario-panel,.shell.survey-wide .rating-panel{-ms-flex:0 0 auto;flex:0 0 auto;max-width:100%;width:100%}
  .shell.survey-wide .scenario-panel{-ms-flex-order:1;order:1}
  .shell.survey-wide .rating-left{-ms-flex-order:2;order:2}
  .shell.survey-wide .rating-right{-ms-flex-order:3;order:3}
  .shell.survey-wide .cues.cue-cards .cue-item{display:block}
  .shell.survey-wide .cue-meta{margin:0 0 4px 0}
}


/* v3.6.2 — optional participant dark mode.
   Deliberately plain: same information architecture, spacing and controls as the
   light presentation. Only surface, text, border and control colors change. */
.theme-toggle{
  position:fixed;
  right:12px;
  bottom:12px;
  z-index:50;
  min-height:34px;
  padding:0 10px;
  border:1px solid #aeb7be;
  border-radius:3px;
  background:#fff;
  color:#2d363d;
  box-shadow:none;
  font:500 .78rem/1 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  cursor:pointer;
}
.theme-toggle:hover{background:#f5f6f7}
.theme-toggle:focus{outline:2px solid #7899ae;outline-offset:2px}

:root[data-theme="dark"] .theme-toggle{
  background:#11161d;
  color:#edf2f7;
  border-color:#56616c;
}
:root[data-theme="dark"] .theme-toggle:hover{background:#171d25}

:root[data-theme="dark"] body{background:#0b0f14;color:#edf2f7}
:root[data-theme="dark"] .shell:not(.admin-shell)>.card,
:root[data-theme="dark"] .shell:not(.admin-shell) .intro-header,
:root[data-theme="dark"] .shell:not(.admin-shell) .intro-body,
:root[data-theme="dark"] .shell:not(.admin-shell) .intro-form,
:root[data-theme="dark"] .shell.survey-wide>.vignette-card,
:root[data-theme="dark"] .shell.survey-wide .case-progress,
:root[data-theme="dark"] .shell.survey-wide .scenario-panel,
:root[data-theme="dark"] .shell.survey-wide .rating-panel,
:root[data-theme="dark"] .shell.survey-wide .context,
:root[data-theme="dark"] .shell.survey-wide .vignette-footer{
  background:#11161d;
  color:#edf2f7;
}

:root[data-theme="dark"] .shell:not(.admin-shell) .survey-type,
:root[data-theme="dark"] .shell:not(.admin-shell) .survey-meta,
:root[data-theme="dark"] .shell:not(.admin-shell) .intro-privacy,
:root[data-theme="dark"] .shell:not(.admin-shell) .tiny,
:root[data-theme="dark"] .shell.survey-wide .case-count{
  color:#a8b2bc;
}
:root[data-theme="dark"] .shell:not(.admin-shell) .intro-subtitle,
:root[data-theme="dark"] .shell.survey-wide .context span,
:root[data-theme="dark"] .shell.survey-wide .cue-text,
:root[data-theme="dark"] .shell.survey-wide .decision-group legend,
:root[data-theme="dark"] .shell.survey-wide .decision-option-label{
  color:#d4dbe1;
}
:root[data-theme="dark"] .shell:not(.admin-shell) h1,
:root[data-theme="dark"] .shell:not(.admin-shell) h2,
:root[data-theme="dark"] .shell:not(.admin-shell) h3,
:root[data-theme="dark"] .shell.survey-wide .context b,
:root[data-theme="dark"] .shell.survey-wide .cue-title,
:root[data-theme="dark"] .shell:not(.admin-shell) .term-note b{
  color:#f1f5f8;
}

:root[data-theme="dark"] .shell:not(.admin-shell) .survey-meta,
:root[data-theme="dark"] .shell:not(.admin-shell) .intro-body,
:root[data-theme="dark"] .shell:not(.admin-shell) .intro-privacy,
:root[data-theme="dark"] .shell:not(.admin-shell) .consent,
:root[data-theme="dark"] .shell.survey-wide>.vignette-card,
:root[data-theme="dark"] .shell.survey-wide .case-progress,
:root[data-theme="dark"] .shell.survey-wide .scenario-panel,
:root[data-theme="dark"] .shell.survey-wide .context,
:root[data-theme="dark"] .shell.survey-wide .cues.cue-cards .cue-item,
:root[data-theme="dark"] .shell.survey-wide .decision-option,
:root[data-theme="dark"] .shell.survey-wide .vignette-footer{
  border-color:#2f3943;
}

:root[data-theme="dark"] .shell:not(.admin-shell) .term-note{
  background:#151b22;
  color:#c8d0d7;
  border-left-color:#677681;
}

:root[data-theme="dark"] .shell:not(.admin-shell) .field select,
:root[data-theme="dark"] .shell:not(.admin-shell) .field textarea,
:root[data-theme="dark"] .shell:not(.admin-shell) .field input{
  background:#0f141a;
  color:#edf2f7;
  border-color:#56616c;
}
:root[data-theme="dark"] .shell:not(.admin-shell) .field select:focus,
:root[data-theme="dark"] .shell:not(.admin-shell) .field textarea:focus,
:root[data-theme="dark"] .shell:not(.admin-shell) .field input:focus{
  outline-color:#7fa7bf;
  border-color:#7fa7bf;
}
:root[data-theme="dark"] .shell:not(.admin-shell) .consent input,
:root[data-theme="dark"] .shell.survey-wide .decision-option input{accent-color:#7fa7bf}

:root[data-theme="dark"] .shell:not(.admin-shell) .primary-button{
  background:#4d7890;
  color:#fff;
  border-color:#4d7890;
}
:root[data-theme="dark"] .shell:not(.admin-shell) .primary-button:hover:not(:disabled){background:#5a879f;border-color:#5a879f}
:root[data-theme="dark"] .shell:not(.admin-shell) .primary-button:disabled{
  background:#242c33;
  color:#78838d;
  border-color:#343e47;
}
:root[data-theme="dark"] .shell:not(.admin-shell) .secondary-button{
  background:#11161d;
  color:#e3e8ec;
  border-color:#56616c;
}
:root[data-theme="dark"] .shell:not(.admin-shell) .secondary-button:hover:not(:disabled){background:#171d25}
:root[data-theme="dark"] .shell:not(.admin-shell) .secondary-button:disabled{background:#11161d;color:#68737d;border-color:#343e47}

:root[data-theme="dark"] .shell.survey-wide .cue-level i{background:#39434c}
:root[data-theme="dark"] .shell.survey-wide .cue-level i.active{background:#9fb4c0}

@media (max-width:640px){
  :root[data-theme="dark"] body{background:#11161d}
  .theme-toggle{right:8px;bottom:8px}
}

/* Survey question help: concise explanation of the organisational escalation levels. */
.shell.survey-wide .decision-legend-row{
  display:flex;
  align-items:flex-start;
  gap:7px;
}
.shell.survey-wide .decision-legend-text{
  flex:1 1 auto;
  min-width:0;
}
.shell.survey-wide .question-help{
  position:relative;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  margin-top:1px;
  border:1px solid #9aa5ac;
  border-radius:50%;
  color:#52616a;
  background:#fff;
  font-size:.72rem;
  line-height:1;
  font-weight:700;
  cursor:help;
  outline:none;
  z-index:5;
}
.shell.survey-wide .question-help:hover,
.shell.survey-wide .question-help:focus,
.shell.survey-wide .question-help:focus-visible{
  border-color:#315f7a;
  color:#315f7a;
}
.shell.survey-wide .question-help:focus-visible{
  box-shadow:0 0 0 3px rgba(49,95,122,.16);
}
.shell.survey-wide .question-help-tooltip{
  position:absolute;
  top:26px;
  right:-6px;
  width:min(330px, calc(100vw - 42px));
  padding:12px 13px;
  border:1px solid #cbd2d6;
  background:#fff;
  box-shadow:0 8px 24px rgba(24,35,42,.14);
  color:#273039;
  font-size:.72rem;
  line-height:1.4;
  text-align:left;
  font-weight:400;
  visibility:hidden;
  opacity:0;
  transform:translateY(-3px);
  pointer-events:none;
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
  z-index:30;
}
.shell.survey-wide .question-help:hover .question-help-tooltip,
.shell.survey-wide .question-help:focus .question-help-tooltip,
.shell.survey-wide .question-help:focus-within .question-help-tooltip{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}
.shell.survey-wide .question-help-title{
  display:block;
  margin-bottom:7px;
  font-size:.75rem;
  font-weight:650;
  color:#1f2930;
}
.shell.survey-wide .question-help-step{
  display:block;
  padding:7px 0;
  border-top:1px solid #e3e6e8;
}
.shell.survey-wide .question-help-step b,
.shell.survey-wide .question-help-step span{
  display:block;
}
.shell.survey-wide .question-help-step b{
  margin-bottom:2px;
  font-size:.72rem;
  font-weight:650;
  color:#273039;
}
.shell.survey-wide .question-help-step span{
  color:#58646c;
}
:root[data-theme="dark"] .shell.survey-wide .question-help{
  border-color:#6b7782;
  background:#11161c;
  color:#c5ced5;
}
:root[data-theme="dark"] .shell.survey-wide .question-help:hover,
:root[data-theme="dark"] .shell.survey-wide .question-help:focus{
  border-color:#78a8c1;
  color:#9cc5da;
}
:root[data-theme="dark"] .shell.survey-wide .question-help-tooltip{
  border-color:#39434c;
  background:#171d24;
  color:#e2e7eb;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
}
:root[data-theme="dark"] .shell.survey-wide .question-help-title,
:root[data-theme="dark"] .shell.survey-wide .question-help-step b{
  color:#edf1f4;
}
:root[data-theme="dark"] .shell.survey-wide .question-help-step{
  border-top-color:#343d45;
}
:root[data-theme="dark"] .shell.survey-wide .question-help-step span{
  color:#b6c0c8;
}

/* v3.6.3 — per-option help icons for BCM and DORA; avoids oversized legend tooltip. */
.shell.survey-wide .rating-panel{position:relative;z-index:2;overflow:visible}
.shell.survey-wide .scenario-panel{position:relative;z-index:1}
.shell.survey-wide .decision-option-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px;
  gap:7px;
  align-items:start;
  margin:0;
  border-top:1px solid #e2e5e7;
}
.shell.survey-wide .decision-option-row:last-child{border-bottom:1px solid #e2e5e7}
.shell.survey-wide .decision-option-row .decision-option{
  min-width:0;
  padding:9px 0;
  border:0!important;
}
.shell.survey-wide .decision-option-row .decision-option:last-child{border-bottom:0!important}
.shell.survey-wide .option-help{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  margin-top:8px;
  border:1px solid #9aa5ac;
  border-radius:50%;
  color:#52616a;
  background:#fff;
  font-size:.72rem;
  line-height:1;
  font-weight:700;
  cursor:help;
  outline:none;
}
.shell.survey-wide .option-help:hover,
.shell.survey-wide .option-help:focus,
.shell.survey-wide .option-help:focus-visible,
.shell.survey-wide .option-help:focus-within{
  z-index:100;
  border-color:#315f7a;
  color:#315f7a;
}
.shell.survey-wide .option-help:focus-visible{box-shadow:0 0 0 3px rgba(49,95,122,.16)}
.shell.survey-wide .option-help-tooltip{
  position:absolute;
  top:25px;
  width:300px;
  max-width:calc(100vw - 48px);
  padding:10px 11px;
  border:1px solid #cbd2d6;
  background:#fff;
  box-shadow:0 8px 24px rgba(24,35,42,.14);
  color:#273039;
  font-size:.72rem;
  line-height:1.42;
  text-align:left;
  font-weight:400;
  visibility:hidden;
  opacity:0;
  transform:translateY(-3px);
  pointer-events:none;
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
  z-index:60;
}
.shell.survey-wide .option-help-left .option-help-tooltip{left:-2px;right:auto}
.shell.survey-wide .option-help-right .option-help-tooltip{right:-2px;left:auto}
.shell.survey-wide .option-help:hover .option-help-tooltip,
.shell.survey-wide .option-help:focus .option-help-tooltip,
.shell.survey-wide .option-help:focus-within .option-help-tooltip{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}
.shell.survey-wide .option-help-tooltip b,
.shell.survey-wide .option-help-tooltip span{display:block}
.shell.survey-wide .option-help-tooltip b{
  margin-bottom:4px;
  font-size:.73rem;
  line-height:1.35;
  font-weight:650;
  color:#273039;
}
.shell.survey-wide .option-help-tooltip span{color:#58646c}

:root[data-theme="dark"] .shell.survey-wide .option-help{
  border-color:#6b7782;
  background:#11161c;
  color:#c5ced5;
}
:root[data-theme="dark"] .shell.survey-wide .option-help:hover,
:root[data-theme="dark"] .shell.survey-wide .option-help:focus{
  border-color:#78a8c1;
  color:#9cc5da;
}
:root[data-theme="dark"] .shell.survey-wide .option-help-tooltip{
  border-color:#39434c;
  background:#171d24;
  color:#e2e7eb;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
}
:root[data-theme="dark"] .shell.survey-wide .option-help-tooltip b{color:#edf1f4}
:root[data-theme="dark"] .shell.survey-wide .option-help-tooltip span{color:#b6c0c8}

@media (max-width:640px){
  .shell.survey-wide .option-help-left .option-help-tooltip,
  .shell.survey-wide .option-help-right .option-help-tooltip{
    right:-2px;
    left:auto;
    width:290px;
  }
}

/* Keep the small help cards inside their assessment column on two-column/mobile layouts,
   and let the lower options open upward so following panels cannot cover the tooltip. */
.shell.survey-wide .decision-option-row:nth-last-child(-n+2) .option-help-tooltip{
  top:auto;
  bottom:25px;
}
@media (max-width:980px){
  .shell.survey-wide .option-help-left .option-help-tooltip,
  .shell.survey-wide .option-help-right .option-help-tooltip{
    right:-2px;
    left:auto;
  }
}