/* =========================================================================
YER AI Readiness Scan — styles
Palette taken directly from the YER logo: navy #19224C + amber #EEAB00.
All brand values are CSS variables — swap here to re-skin the whole app.
========================================================================= */
:root {
--navy: #19224C; /* primary — logo wordmark */
--navy-2: #2C3766; /* lighter navy for gradients/hover */
--amber: #EEAB00; /* accent — logo symbol */
--amber-dk: #CE9200; /* accent hover */
--steel: #6E86B8; /* third data series */
--ink: #1c2233;
--mute: #6b7690;
--bg: #f4f5f9;
--card: #ffffff;
--line: #e3e7f0;
--line-2: #eef1f7;
--shadow: 0 1px 2px rgba(25,34,76,.06), 0 10px 30px rgba(25,34,76,.06);
--radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
background: var(--bg); color: var(--ink); line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--navy); }
/* ---------- header ---------- */
header.top { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; }
.top-inner { max-width: 1120px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.top-inner .logo { height: 40px; width: auto; display: block; }
.top-inner .logo path[fill="#19224C"] { fill: #ffffff; } /* wordmark reads white on navy */
.top-title { border-left: 1px solid rgba(255,255,255,.22); padding-left: 20px; font-size: 14px; opacity: .85; }
.top-title strong { display: block; font-size: 17px; opacity: 1; font-weight: 600; }
/* ---------- tabs ---------- */
nav.tabs { background: var(--navy); position: sticky; top: 0; z-index: 30; border-top: 1px solid rgba(255,255,255,.08); }
.tabs-inner { max-width: 1120px; margin: 0 auto; display: flex; gap: 2px; overflow-x: auto; padding: 0 16px; }
.tab { appearance: none; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.66);
font: inherit; font-weight: 600; font-size: 14px; padding: 14px 18px; white-space: nowrap;
border-bottom: 3px solid transparent; transition: color .15s; display: flex; align-items: center; gap: 2px; }
.tab:hover { color: #fff; }
.tab.active { color: #fff; border-bottom-color: var(--amber); }
.tab .badge { font-size: 10px; font-weight: 700; background: var(--amber); color: var(--navy); padding: 1px 7px; border-radius: 20px; margin-left: 6px; }
.tab .check { color: var(--amber); font-weight: 800; margin-left: 6px; }
/* ---------- layout ---------- */
main { max-width: 1120px; margin: 0 auto; padding: 30px 22px 80px; }
.panel { display: none; }
.panel.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
h1.section { font-size: 26px; margin: 0 0 6px; }
p.lead { color: var(--mute); margin: 0 0 26px; max-width: 720px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; margin-bottom: 20px; }
/* ---------- welcome form ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--navy); }
.field input, .field select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(44,55,102,.14); }
.hint { font-size: 12.5px; color: var(--mute); margin-top: 4px; }
.welcome-facts { display: flex; gap: 26px; flex-wrap: wrap; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line-2); }
.welcome-facts .f { font-size: 13px; color: var(--mute); }
.welcome-facts .f b { display: block; font-size: 22px; color: var(--navy); }
/* ---------- buttons ---------- */
.btn { appearance: none; border: none; cursor: pointer; font: inherit; font-weight: 700; background: var(--amber); color: var(--navy); padding: 12px 24px; border-radius: 10px; transition: background .15s, transform .05s; }
.btn:hover { background: var(--amber-dk); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--navy); border: 1px solid var(--line); }
.btn.ghost:hover { background: #eef1f7; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.submit-status { margin: 8px 0 0; font-size: .9rem; min-height: 1.1em; color: #5b6478; }
.submit-status.ok { color: #1a7f4b; font-weight: 600; }
.submit-status.muted { color: #7a8093; }
/* ---------- perspective intro ---------- */
.level-intro { display: flex; gap: 16px; align-items: flex-start; background: linear-gradient(120deg, rgba(25,34,76,.05), rgba(238,171,0,.10)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; }
.level-intro .dot { flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--navy); color: var(--amber); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; }
.level-intro h2 { margin: 0 0 3px; font-size: 18px; }
.level-intro p { margin: 0; font-size: 14px; color: var(--mute); }
.persp-pill { font-size: 11px; font-weight: 700; vertical-align: middle; background: rgba(25,34,76,.07); color: var(--navy-2); border: 1px solid var(--line); padding: 2px 9px; border-radius: 20px; margin-left: 8px; }
/* ---------- audience + scale legend ---------- */
.level-intro .audience { font-size: 12.5px; color: var(--navy-2); margin-top: 6px; }
.scale-legend { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 12.5px; }
.scale-legend .sl-title { font-weight: 700; color: var(--navy); }
.scale-legend .sl { color: var(--mute); }
.scale-legend .sl b { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; background: var(--navy); color: var(--amber); border-radius: 5px; font-size: 12px; margin-right: 4px; }
/* ---------- dimension blocks + questions ---------- */
.dim-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 26px 16px; margin-bottom: 16px; }
.dim-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 6px; }
.dim-chip { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--navy); background: #eef1f7; padding: 5px 12px; border-radius: 7px; border-left: 3px solid var(--amber); }
.dim-count { font-size: 11.5px; color: var(--mute); white-space: nowrap; }
.q { padding: 16px 0; border-top: 1px solid var(--line-2); }
.q-text { font-weight: 600; font-size: 15px; }
.likert { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.lk { appearance: none; cursor: pointer; font: inherit; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 9px 5px; color: var(--mute); text-align: center; transition: all .12s; line-height: 1.2; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.lk:hover { border-color: var(--navy-2); color: var(--navy); }
.lk.sel { background: var(--navy); border-color: var(--navy); color: #fff; }
.lk .num { font-size: 15px; font-weight: 800; color: var(--navy); }
.lk .lbl { font-size: 11px; }
.lk.sel .num { color: var(--amber); }
/* benchmark reveal */
.bench { margin-top: 10px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.bench summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--navy-2); list-style: none; }
.bench summary::-webkit-details-marker { display: none; }
.bench summary::before { content: "▸ "; color: var(--amber); font-weight: 800; }
.bench[open] summary::before { content: "▾ "; }
.bench-body { margin-top: 8px; font-size: 13px; color: var(--ink); }
.bench-body p { margin: 6px 0; }
.bench-body .s1 { color: #C15A3F; margin-right: 6px; }
.bench-body .s5 { color: #3E6FB0; margin-right: 6px; }
.level-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.level-progress { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; font-size: 13px; color: var(--mute); }
.bar { flex: 1; height: 8px; background: #e9edf4; border-radius: 20px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--amber); width: 0; transition: width .3s; }
/* ---------- results ---------- */
.res-h { font-size: 18px; margin: 26px 0 14px; }
.res-h.flush { margin-top: 0; }
.res-sub { font-size: 13px; color: var(--mute); margin: -8px 0 16px; }
.empty { text-align: center; padding: 44px 22px; }
.empty-lead { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.empty p { color: var(--mute); }
/* alignment headline */
.align-pending p { color: var(--mute); font-size: 14px; margin: 0; }
.align-hero { border-top: 4px solid var(--amber); }
.align-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--amber-dk); }
.align-name { font-size: 27px; margin: 4px 0 10px; }
.align-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.gap-pill { font-size: 12px; font-weight: 700; color: #fff; padding: 4px 12px; border-radius: 20px; }
.gap-pill.aligned { background: #4faa54; }
.gap-pill.moderate { background: #E0862A; }
.gap-pill.severe { background: #C15A3F; }
.gap-num { font-size: 14px; font-weight: 700; color: var(--navy); }
.gap-num small { font-weight: 400; color: var(--mute); }
.align-shape { font-size: 13.5px; color: var(--navy-2); margin: 0 0 10px; }
.align-happening { font-size: 15px; margin: 0 0 16px; }
.align-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.align-grid > div { border-radius: 10px; padding: 14px 16px; font-size: 13.5px; line-height: 1.5; }
.ag-risk { background: #fbf1ec; border: 1px solid #f0d8cd; }
.ag-action { background: #eef4fb; border: 1px solid #d6e3f2; }
.ag-h { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; color: var(--navy); }
/* three-level compare */
.levelcompare { margin-top: 6px; }
.lc-scale { position: relative; height: 18px; margin-left: 96px; margin-right: 46px; margin-bottom: 4px; }
.lc-scale span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--mute); }
.lc-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.lc-name { flex: 0 0 84px; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.lc-track { position: relative; flex: 1; height: 22px; background: #eef1f7; border-radius: 20px; overflow: hidden; }
.lc-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 20px; min-width: 3px; transition: width .3s; }
.lc-num { flex: 0 0 34px; text-align: right; font-size: 15px; font-weight: 800; color: var(--navy); }
/* per-level result card */
.level-result { padding-top: 20px; }
.lr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lr-sub { font-size: 12.5px; color: var(--mute); }
.lr-none { font-size: 13px; color: var(--mute); }
.lr-score { text-align: right; }
.lr-num { display: block; font-size: 40px; font-weight: 800; line-height: 1; }
.lr-num small { font-size: 16px; color: var(--mute); font-weight: 600; }
.tier-badge { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: #fff; padding: 4px 12px; border-radius: 20px; }
.bn-callout { margin: 14px 0; font-size: 13px; background: #fbf1ec; border: 1px solid #f0d8cd; border-radius: 10px; padding: 10px 14px; }
.bn-callout.ok { background: #eef7ef; border-color: #d3e7d5; color: #2f6b36; }
.lr-body { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: center; margin-top: 6px; }
.lr-radar { display: flex; justify-content: center; }
.dim-row { display: flex; align-items: center; gap: 12px; margin: 9px 0; }
.dim-row .name { flex: 0 0 200px; font-size: 13px; font-weight: 600; color: var(--navy); }
.dim-row.bottleneck .name { color: #C15A3F; }
.dim-row .track { flex: 1; height: 10px; background: #eef1f7; border-radius: 20px; overflow: hidden; }
.dim-row .track > span { display: block; height: 100%; background: linear-gradient(90deg, var(--navy), var(--amber)); }
.dim-row.bottleneck .track > span { background: #C15A3F; }
.dim-row .pct { flex: 0 0 34px; text-align: right; font-size: 13px; font-weight: 800; color: var(--navy); }
.bn-tag { font-size: 10px; font-weight: 700; color: #C15A3F; background: #f7e3db; padding: 1px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: .3px; }
.tier-next { margin-top: 16px; background: #f7f8fb; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; }
.tier-next .tn-h { font-weight: 700; color: var(--navy); }
.tier-next p { margin: 8px 0 0; color: var(--ink); }
.size-note { font-size: 13px; color: var(--navy-2); font-style: italic; margin: 12px 0 0; }
/* ---------- footer ---------- */
footer { text-align: center; color: var(--mute); font-size: 12.5px; padding: 26px; }
footer .proto { background: #eef1f7; color: var(--navy); font-weight: 700; padding: 2px 10px; border-radius: 20px; font-size: 11px; letter-spacing: .3px; margin-right: 6px; }
/* ---------- responsive ---------- */
@media (max-width: 820px) {
.grid2, .align-grid { grid-template-columns: 1fr; }
.top-title { border-left: none; padding-left: 0; }
.lr-body { grid-template-columns: 1fr; }
.lr-radar { order: 2; }
.dim-row .name { flex: 0 0 150px; }
}
@media (max-width: 560px) {
.likert { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.lk { padding: 7px 2px; }
.lk .lbl { font-size: 9.5px; }
.lr-head { flex-direction: column; }
.lr-score { text-align: left; }
.uc-grid { grid-template-columns: 1fr 1fr; }
.roi-stats { grid-template-columns: 1fr 1fr; }
.uc-res-totals { grid-template-columns: 1fr; }
.uc-imp-row { flex-wrap: wrap; gap: 6px; }
.uc-imps { flex: 1 1 100%; }
.uc-imp { flex: 1; min-width: 0; padding: 6px 4px; }
}
/* ---------- behavioural questions (v0.6) ---------- */
.dim-sub { font-size: 12.5px; color: var(--navy-2); margin: 2px 0 2px; }
.q-tags { margin-left: 8px; white-space: nowrap; }
.q-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 1px 7px; border-radius: 10px; margin-left: 4px; vertical-align: middle; }
.q-tag.t-beh { color: var(--navy); background: #fbeecb; }
.q-tag.t-bm { color: #fff; background: var(--steel); }
.q-note { font-size: 12px; color: var(--mute); margin-top: 8px; font-style: italic; }
.likert-beh .lk { padding: 8px 4px; }
.likert-beh .lk .lbl { font-size: 10px; line-height: 1.15; }
/* ---------- benchmarking (v0.6) ---------- */
.bm-card { border-top: 4px solid var(--steel); }
.bm-row { padding: 12px 0; border-top: 1px solid var(--line-2); }
.bm-row:first-of-type { border-top: none; }
.bm-line { font-size: 14.5px; }
.bm-src { font-size: 11.5px; color: var(--mute); margin-top: 4px; }
.bm-dir { color: #C15A3F; font-weight: 700; }
/* ---------- skills matrix (v0.6) ---------- */
.skills-controls { padding: 16px 26px; }
.prof-likert { grid-template-columns: repeat(5, 1fr); }
.skill-q .q-text { font-weight: 700; }
.skill-def { display: block; font-weight: 400; font-size: 12.5px; color: var(--mute); margin-top: 3px; }
.sk-exp-tag { font-size: 10.5px; font-weight: 700; color: var(--navy); background: #eef1f7; padding: 1px 8px; border-radius: 10px; margin-left: 4px; white-space: nowrap; }
.sk-exp-tag.short { color: #C15A3F; background: #f7e3db; }
.skills-gap { margin-top: 18px; border-top: 1px solid var(--line-2); padding-top: 6px; }
.skill-gaps-list { margin-top: 6px; }
.skill-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.skill-row .sk-name { flex: 0 0 200px; font-size: 13px; font-weight: 600; color: var(--navy); }
.skill-row.gap .sk-name { color: #C15A3F; }
.sk-track { position: relative; flex: 1; height: 12px; background: #eef1f7; border-radius: 20px; }
.sk-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 20px; min-width: 3px; background: linear-gradient(90deg, var(--navy), var(--amber)); }
.skill-row.gap .sk-fill { background: #C15A3F; }
.sk-exp { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--navy); }
.sk-exp::after { content: ""; position: absolute; top: -5px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--navy); }
.sk-num { flex: 0 0 42px; text-align: right; font-size: 13px; font-weight: 800; color: var(--navy); }
.sk-num small { color: var(--mute); font-weight: 600; }
.skills-legend { font-size: 12px; color: var(--mute); margin-top: 12px; }
.skills-legend .lg-fill, .skills-legend .lg-exp { display: inline-block; vertical-align: middle; }
.skills-legend .lg-fill { width: 22px; height: 8px; border-radius: 6px; background: linear-gradient(90deg, var(--navy), var(--amber)); }
.skills-legend .lg-exp { width: 2px; height: 14px; background: var(--navy); margin: 0 3px; }
.skills-clusterbars { margin-top: 8px; }
/* ---------- 360 funnel: reference banner + email gate (v0.6.1) ---------- */
.ref-banner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
font-size: 12.5px; color: var(--mute); background: #fff; border: 1px solid var(--line);
border-radius: 10px; padding: 9px 15px; margin-bottom: 16px; }
.ref-banner b { color: var(--navy); }
.ref-persp { color: var(--navy-2); }
.gate { border-top: 4px solid var(--amber); text-align: center; max-width: 640px; margin: 0 auto 20px; }
.gate p { color: var(--mute); font-size: 14px; margin: 0 auto 14px; max-width: 460px; }
/* ---------- use-case ROI module (v0.6) ---------- */
.uc-guide { padding: 16px 22px; border-left: 3px solid var(--amber); }
.uc-guide-h { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--navy); }
.uc-guide-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink); }
.uc-guide-list li { margin: 4px 0; }
.uc-empty { text-align: center; padding: 30px 22px; }
.uc-card { padding: 18px 24px 20px; }
.uc-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.uc-idx { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--navy); background: #eef1f7; padding: 5px 12px; border-radius: 7px; border-left: 3px solid var(--amber); }
.uc-remove { appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--mute); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px; transition: all .12s; }
.uc-remove:hover { color: #C15A3F; border-color: #e6c3b8; background: #fbf1ec; }
.uc-in { margin-bottom: 4px; }
.uc-in.wide { margin-bottom: 14px; }
.uc-in label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--navy); }
.uc-in input, .uc-in select, .uc-freq input, .uc-freq select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.uc-in input:focus, .uc-in select:focus, .uc-freq input:focus, .uc-freq select:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(44,55,102,.14); }
.uc-in-hint { display: block; font-size: 11.5px; color: var(--mute); margin-top: 4px; }
.uc-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.uc-block-h { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.uc-block-h small { font-weight: 400; color: var(--mute); font-size: 12px; }
/* impact matrix: one row per business value driver + a None/Low/Med/High selector */
.uc-impacts { display: flex; flex-direction: column; }
.uc-imp-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-2); }
.uc-imp-row:first-child { border-top: none; }
.uc-imp-name { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--navy); cursor: help; }
.uc-imp-name.primary::after { content: " €"; color: var(--amber-dk); font-weight: 800; }
.uc-imps { display: flex; gap: 5px; flex: 0 0 auto; }
.uc-imp { appearance: none; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px; color: var(--mute); transition: all .12s; min-width: 52px; text-align: center; }
.uc-imp:hover { border-color: var(--navy-2); color: var(--navy); }
.uc-imp.sel { background: var(--navy); border-color: var(--navy); color: #fff; }
.uc-imp.none.sel { background: #eef1f7; border-color: var(--line); color: var(--mute); }
.uc-bv { margin-top: 12px; font-size: 12.5px; color: var(--navy); }
.uc-bv-lbl { font-weight: 700; }
.uc-bv.muted { color: var(--mute); }
.uc-rate-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.uc-rate-cap { font-size: 11.5px; color: var(--mute); flex: 0 0 auto; width: 78px; }
.uc-rate-cap:last-child { text-align: right; }
.uc-rates { display: flex; gap: 6px; flex: 1; }
.uc-rate { appearance: none; cursor: pointer; font: inherit; font-weight: 700; flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 0; color: var(--navy); transition: all .12s; }
.uc-rate:hover { border-color: var(--navy-2); }
.uc-rate.sel { background: var(--navy); border-color: var(--navy); color: var(--amber); }
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
.uc-freq { display: flex; gap: 8px; }
.uc-freq input { flex: 1 1 55%; }
.uc-freq select { flex: 1 1 45%; }
.uc-readout { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.roi-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.roi-stat { background: #f7f8fb; border: 1px solid var(--line); border-radius: 10px; padding: 12px 10px; text-align: center; }
.roi-val { display: block; font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.roi-lbl { display: block; font-size: 11px; color: var(--mute); margin-top: 4px; }
.roi-fit { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.roi-fit-lbl { font-size: 12.5px; font-weight: 600; color: var(--navy); flex: 0 0 auto; }
.roi-fit .track { flex: 1; height: 10px; background: #eef1f7; border-radius: 20px; overflow: hidden; }
.roi-fit .track > span { display: block; height: 100%; background: linear-gradient(90deg, var(--navy), var(--amber)); }
.roi-fit-num { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--navy); }
.roi-fit-num small { color: var(--mute); font-weight: 600; }
.uc-nudge { margin: 12px 0 0; font-size: 12.5px; background: #fbf1ec; border: 1px solid #f0d8cd; border-radius: 10px; padding: 9px 13px; color: var(--ink); }
/* use-case results card */
.uc-res-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.uc-res-list { border-top: 1px solid var(--line-2); }
.uc-res-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.uc-res-main { min-width: 0; }
.uc-res-name { display: block; font-size: 14px; font-weight: 700; color: var(--navy); }
.uc-res-meta { display: block; font-size: 11.5px; color: var(--mute); margin-top: 2px; }
.uc-res-nums { text-align: right; flex: 0 0 auto; }
.uc-res-hrs { display: block; font-size: 13px; font-weight: 700; color: var(--navy); }
.uc-res-val { display: block; font-size: 12px; color: var(--mute); }
/* =========================================================================
v0.7 CONVERSATION SURFACE (Feature C) — chat + live heat map
========================================================================= */
.top-inner .top-link { margin-left: auto; color: #fff; font-size: 13px; font-weight: 600;
text-decoration: none; opacity: .82; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; padding: 7px 12px; }
.top-inner .top-link:hover { opacity: 1; background: rgba(255,255,255,.08); }
.ai-notice { background: #fff8e6; border-bottom: 1px solid #f0e2b8; color: #6a5a1f;
font-size: 13px; padding: 9px 24px; display: flex; align-items: center; gap: 10px; }
.ai-notice .ai-dot { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--navy);
background: var(--amber); border-radius: 6px; padding: 2px 7px; }
main.scan { max-width: 1180px; display: grid; grid-template-columns: 1fr 460px; gap: 22px;
align-items: start; padding: 24px 22px 60px; }
/* ---------- chat column ---------- */
.chat-col { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; height: calc(100vh - 220px); min-height: 520px; }
.stage-rail { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: #fbfcfe; }
.stage-rail .st { font-size: 11.5px; font-weight: 600; color: var(--mute); background: #eef1f7;
border-radius: 20px; padding: 3px 11px; transition: all .2s; }
.stage-rail .st.active { color: #fff; background: var(--navy); }
.stage-rail .st.done { color: var(--navy); background: #e5eddf; }
.stage-rail .st.done::before { content: "✓ "; color: #4faa54; font-weight: 800; }
.chat-log { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 88%; }
.msg-who { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
color: var(--mute); margin: 0 0 4px 2px; }
.msg-body { font-size: 14.5px; line-height: 1.55; padding: 11px 15px; border-radius: 14px; white-space: pre-wrap; }
.msg-assistant { align-self: flex-start; }
.msg-assistant .msg-body { background: #f1f4fa; color: var(--ink); border-bottom-left-radius: 4px; }
.msg-user { align-self: flex-end; }
.msg-user .msg-who { text-align: right; margin-right: 2px; }
.msg-user .msg-body { background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.msg-error .msg-body { background: #fbf1ec; color: #8a3b26; border: 1px solid #f0d8cd; }
.msg.streaming.has-text .msg-body::after { content: "▍"; color: var(--amber); font-weight: 700; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* "Thinking" indicator shown while a reply is forming but no text has streamed
yet — the Claude 5 family thinks silently before replying, so this keeps an
empty bubble reading as working rather than hung. */
.msg .typing { display: inline-flex; gap: 5px; align-items: center; padding: 2px 0; }
.msg .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); display: inline-block; animation: blink 1.2s infinite ease-in-out; }
/* Keyed off type, not position: the branded word is the first child, so
nth-child would shift every dot's delay by one and kill the stagger. */
.msg .typing i:nth-of-type(2) { animation-delay: .18s; }
.msg .typing i:nth-of-type(3) { animation-delay: .36s; }
.msg .typing .typing-word { font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
color: var(--mute); opacity: .75; margin-right: 2px; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.chat-input { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line-2); background: #fff; }
.chat-input textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
font: inherit; color: var(--ink); line-height: 1.45; max-height: 160px; transition: border-color .15s, box-shadow .15s; }
.chat-input textarea:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(44,55,102,.14); }
.chat-input .btn { align-self: flex-end; }
.chat-hint { font-size: 12.5px; color: var(--mute); padding: 0 16px 12px; margin: 0; min-height: 1em; }
/* ---------- tappable answers ----------
Most of what this scan asks is really a choice, and typing "not yet" is the
slowest possible way to say it. Chips are a SHORTCUT, never a narrowing: the
textarea stays live underneath, and the agent is told to include an out
("Not sure") so an honest no-idea costs one tap. Protocol: js/options.js. */
.chips { align-self: flex-start; max-width: 88%; display: flex; flex-wrap: wrap; gap: 7px; margin: 1px 0 2px; }
.chips-hint { flex-basis: 100%; font-size: 11px; color: var(--mute); margin: 0 0 1px 2px; }
.chips-group { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font: inherit; font-size: 13.5px; line-height: 1.2; padding: 8px 13px; border-radius: 999px;
border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer;
transition: background .15s, border-color .15s, transform .1s; }
.chip:hover { border-color: var(--navy-2); background: #f1f4fa; }
.chip:active { transform: translateY(1px); }
.chip:focus-visible { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(44,55,102,.18); }
/* The ordered variant — a slider without the numbers. Least to most, left to
right, with the fill deepening along the row so the ORDER reads at a glance.
It cannot carry a 1-5 scale: respondents don't see scores during the scan,
so the words have to do that work. */
.chips-scale .chip { flex: 1 1 auto; text-align: center; border-color: transparent; }
.chips-scale .chip:hover { border-color: var(--navy-2); }
/* Replay only (js/preview.js): chips are shown, then the recorded answer lights
the one that was tapped. Nothing here is clickable — it is a recording. */
.chips-replay .chip { cursor: default; }
.chips.chips-done .chip { opacity: .4; }
.chips .chip.chip-picked { opacity: 1; background: var(--navy); border-color: var(--navy); color: #fff; }
/* ---------- live heat-map panel ---------- */
.map-col { position: sticky; top: 68px; }
.map-card { padding: 20px 22px; }
.map-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.map-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--amber-dk); }
.map-title { font-size: 19px; margin: 2px 0 0; }
.overall { text-align: right; }
.overall-num { display: block; font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1; }
.overall-tier { display: block; font-size: 11.5px; font-weight: 700; margin-top: 3px; color: var(--mute); max-width: 150px; }
text-align: center; padding-bottom: 2px; }
font-size: 14px; font-weight: 800; color: #fff; }
/* Progress mode: "we have this area", carrying no score. Brand navy so the
grid still visibly fills as the conversation goes, which is the part
respondents said they liked, without giving the numbers away. */
/* Left blank because they couldn't say. Present, but visibly not a finding. */
100% { transform: scale(1); opacity: 1; } }
.map-picked { margin-top: 4px; }
.pk-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.pk-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--navy); margin-bottom: 8px; }
.pk-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink); }
.pk-list li { margin: 5px 0; }
.pk-uc { color: var(--amber-dk); font-weight: 600; }
.pk-ideal { margin: 0; font-size: 13.5px; color: var(--navy-2); font-style: italic; }
.map-legend { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.map-legend .lg-row { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.map-legend .lg-item { font-size: 11px; color: var(--mute); display: flex; align-items: center; gap: 5px; }
.map-legend .lg-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.map-legend .lg-note { font-size: 11px; color: var(--mute); margin-top: 8px; }
/* Darker than the tier labels: this is the line that has to be read first. */
.map-legend .lg-scale { font-size: 11.5px; color: var(--ink); margin-bottom: 7px; }
.map-legend .lg-band { font-variant-numeric: tabular-nums; color: var(--ink); }
.review-open { width: 100%; margin-top: 14px; }
.review-open:not(:disabled) { border-color: var(--amber); color: var(--amber-dk); font-weight: 700; }
@media (max-width: 900px) {
main.scan { grid-template-columns: 1fr; }
.chat-col { height: 60vh; min-height: 420px; }
.map-col { position: static; }
}
/* ---------- back-stage review modal (Feature D) ---------- */
body.modal-open { overflow: hidden; }
.review-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(25,34,76,.5);
display: flex; align-items: flex-start; justify-content: center; padding: 40px 18px; overflow-y: auto; }
.review-overlay[hidden] { display: none; }
.review-modal { background: var(--card); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(25,34,76,.35);
width: 100%; max-width: 640px; padding: 24px 26px 28px; }
.review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.review-head h2 { font-size: 21px; margin: 2px 0 0; }
.review-close { appearance: none; background: none; border: none; cursor: pointer; font-size: 26px;
line-height: 1; color: var(--mute); padding: 0 4px; }
.review-close:hover { color: var(--navy); }
.review-intro { font-size: 13.5px; color: var(--mute); margin: 10px 0 18px; }
.review-intro b { font-weight: 700; }
/* ---- example replay (preview.js) -------------------------------------------
Reuses .msg-* and .hm-* wholesale so the recorded example looks exactly like
the real thing; only the overlay chrome below is new. */
.top-inner button.top-link { appearance: none; border: none; cursor: pointer; font: inherit; }
.pv-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(25,34,76,.5);
display: flex; align-items: flex-start; justify-content: center; padding: 32px 18px; overflow-y: auto; }
.pv-overlay[hidden] { display: none; }
.pv-modal { background: var(--card); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(25,34,76,.35);
width: 100%; max-width: 940px; padding: 22px 24px 24px; }
.pv-head-actions { display: flex; align-items: center; gap: 10px; }
.pv-head-actions .btn { padding: 8px 14px; font-size: 13px; }
.pv-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
.pv-chat { display: flex; flex-direction: column; gap: 12px; height: 46vh; min-height: 300px;
overflow-y: auto; padding: 16px; background: #fbfcfe; border: 1px solid var(--line); border-radius: 12px; }
.pv-map { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.pv-map-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pv-map-head .overall-num { font-size: 26px; }
.pv-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.pv-note { font-size: 12.5px; color: var(--mute); }
@media (max-width: 820px) {
.pv-body { grid-template-columns: 1fr; }
.pv-chat { height: 38vh; }
}
.rv-theme { border-top: 1px solid var(--line-2); padding: 14px 0 10px; }
.rv-theme:first-of-type { border-top: none; padding-top: 4px; }
.rv-theme-h { margin-bottom: 8px; }
.rv-theme-name { display: block; font-size: 14px; font-weight: 700; color: var(--navy); }
.rv-theme-desc { display: block; font-size: 12px; color: var(--mute); margin-top: 1px; }
.rv-row { display: flex; align-items: center; gap: 12px; margin: 7px 0; }
.rv-level { flex: 0 0 66px; font-size: 12.5px; font-weight: 600; color: var(--navy-2); }
.rv-seg { display: flex; gap: 4px; }
.rv-num { appearance: none; cursor: pointer; font: inherit; font-weight: 700; width: 34px; height: 32px;
background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--navy); transition: all .12s; }
.rv-num:hover { border-color: var(--navy-2); }
.rv-num.sel { background: var(--navy); border-color: var(--navy); color: var(--amber); }
.rv-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
padding: 2px 9px; border-radius: 20px; margin-left: auto; }
.rv-empty { color: var(--mute); background: #eef1f7; text-transform: none; font-weight: 600; letter-spacing: 0; }
.cf-stated { color: #2f6b36; background: #e5f1e6; }
.cf-inferred { color: #8a5a12; background: #fbeecb; }
.cf-assumed { color: #8a3b26; background: #f7e0d7; }
/* "couldn't say" is a real answer, not a gap — reads as neutral, not as a
warning, so nobody feels chased to fill it in. */
.cf-unknown { color: #4a5568; background: #e8ecf3; text-transform: none;
font-weight: 600; letter-spacing: 0; }
b.cf-inferred, b.cf-assumed { padding: 0 4px; border-radius: 4px; }
.rv-block { border-top: 1px solid var(--line-2); margin-top: 8px; padding-top: 14px; }
.rv-block-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--navy); margin-bottom: 10px; }
.rv-none { font-size: 13px; color: var(--mute); margin: 0; }
.rv-proc { margin-bottom: 14px; }
.rv-input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font: inherit;
font-size: 13.5px; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.rv-input:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(44,55,102,.14); }
.rv-sub { margin-top: 6px; font-size: 13px; }
.rv-remove { appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; margin-top: 6px;
color: var(--mute); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px; transition: all .12s; }
.rv-remove:hover { color: #C15A3F; border-color: #e6c3b8; background: #fbf1ec; }
/* ---------- print / save-as-PDF ---------- */
/* ================= END-OF-FLOW GATE (Feature G) ========================= */
/* The composer is display:flex, which beats the [hidden] attribute's UA rule —
without this the "closed" input row stays visible under the gate. */
.chat-input[hidden] { display: none; }
/* Once the gate takes over, the chat column grows with its content instead of
clipping the gate at its fixed conversation height; the transcript keeps its
own bounded scroll so the gate stays reachable. */
.chat-col.wrapped { height: auto; min-height: 0; }
.chat-col.wrapped .chat-log { flex: 0 1 auto; max-height: 42vh; }
.gate { margin-top: 14px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.gate-title { margin: 0 0 4px; font-size: 17px; }
.gate-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--mute); }
.gate-opt { color: var(--mute); font-weight: 400; }
.gate-tz { margin: 10px 0 0; font-size: 12px; color: var(--mute); }
.gate-tz b { color: var(--navy); }
.gate-submit { width: 100%; margin-top: 4px; }
.gate-status { margin: 10px 0 0; font-size: 13px; min-height: 18px; text-align: center; }
.gate-status.ok { color: #2f7d4f; font-weight: 600; }
.gate-status.err { color: #C15A3F; }
/* ================= ONE-PAGER (Feature H) — overlay + report ============= */
.op-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(25,34,76,.55); overflow-y: auto; padding: 24px 16px 48px; }
.op-toolbar { max-width: 820px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; }
.op-toolbar-title { font-weight: 700; font-size: 15px; }
.op-toolbar-actions { display: flex; gap: 8px; }
.onepager { max-width: 820px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(25,34,76,.35); overflow: hidden; }
.op-head { display: flex; justify-content: space-between; align-items: stretch; gap: 20px; padding: 24px 28px; background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; }
.op-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.op-h1 { color: #fff; margin: 6px 0 8px; font-size: 24px; }
.op-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; opacity: .9; }
.op-head-r { display: flex; align-items: center; }
.op-overall { background: #fff; border-radius: 12px; border-top: 5px solid; padding: 12px 18px; text-align: center; min-width: 130px; }
.op-overall-num { display: block; font-size: 34px; font-weight: 800; line-height: 1; }
.op-overall-tier { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--navy); }
.op-overall-cap { display: block; margin-top: 3px; font-size: 10.5px; color: var(--mute); }
.op-body { padding: 22px 28px 26px; }
.op-block { margin-bottom: 24px; }
.op-h2 { font-size: 15px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.op-block-sub { margin: -4px 0 12px; font-size: 12px; color: var(--mute); }
.op-lg-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.op-gap-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.op-gap-now, .op-gap-goal { text-align: center; }
.op-gap-now span, .op-gap-goal span { display: block; font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.op-gap-now b, .op-gap-goal b { font-size: 26px; color: var(--navy); }
.op-gap-goal b { color: var(--steel); }
.op-gap-arrow { font-size: 22px; color: var(--mute); }
.op-gap-quote { font-size: 13.5px; font-style: italic; color: var(--navy); margin: 8px 0; }
.op-gap-board { font-size: 12.5px; color: var(--ink); margin: 6px 0; }
.op-gap-list-h { font-size: 12px; font-weight: 700; color: var(--navy); margin: 10px 0 6px; }
.op-gap-item { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; border-top: 1px solid var(--line-2); }
.op-gap-item em { color: var(--mute); font-style: normal; }
.op-gap-item-nums { font-weight: 700; color: var(--navy); }
.op-uc-list { display: flex; flex-direction: column; gap: 10px; }
.op-uc { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.op-uc-desc { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.op-uc-cand { font-size: 12.5px; color: var(--navy-2); margin-top: 3px; }
.op-uc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.op-tag { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.op-tag-cat { background: var(--line-2); color: var(--navy); }
.op-tag-pain { background: #fbeee9; color: #C15A3F; }
.op-tag-val { background: #eef4fb; color: var(--steel); }
.op-next { background: var(--line-2); border-radius: 10px; padding: 16px 18px; margin-bottom: 0; }
.op-next p { font-size: 13.5px; margin: 0 0 6px; }
.op-next-sig { font-weight: 700; color: var(--navy); }
.op-foot { padding: 12px 28px; border-top: 1px solid var(--line); font-size: 11px; color: var(--mute); text-align: center; }
@media (max-width: 560px) {
.op-head { flex-direction: column; }
}
@media print {
/* Force background colours + SVG fills to render. Without this, Chrome's
"Save as PDF" strips every CSS background — so the compare bars, dimension
bars, tier badges, gap pills and the navy header all print blank. */
*, *::before, *::after {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
@page { margin: 14mm; }
nav.tabs, .btn-row, .submit-status, .level-foot, details.bench { display: none !important; }
.panel { display: block !important; }
#panel-welcome, #panel-organizational, #panel-team, #panel-personal, #panel-skills, #panel-usecases { display: none !important; }
#panel-results { display: block !important; }
body { background: #fff; }
main { padding: 16px 0 0; max-width: none; }
header.top { border-radius: 0; }
/* keep visual units intact across page breaks */
.card, .dim-block, .level-result, .align-hero, .lr-body, .lr-radar, svg,
.bm-card, .bm-row, .skills-summary, .skill-row {
box-shadow: none;
break-inside: avoid;
page-break-inside: avoid;
}
/* fit the radar + dimensions to the printable width reliably */
.lr-body { grid-template-columns: 280px 1fr; }
.lr-radar svg { max-width: 280px; height: auto; }
a[href]::after { content: ""; } /* no URL suffixes in print */
}
/* When downloading the one-pager (Download sets body.print-onepager), print ONLY
the report — hide the whole app chrome and the overlay's own toolbar, and lift
the report out of the dimmed, rounded on-screen overlay onto a clean page. */
@media print {
body.print-onepager > * { display: none !important; }
body.print-onepager #op-overlay {
display: block !important;
position: static !important;
inset: auto !important;
background: #fff !important;
padding: 0 !important;
overflow: visible !important;
}
body.print-onepager .op-toolbar { display: none !important; }
body.print-onepager .onepager {
max-width: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
body.print-onepager .op-block { break-inside: avoid; page-break-inside: avoid; }
}
/* ---------- intro / front door ----------
Sits above the scan until the visitor starts. It is a full section rather
than a modal because it has to be readable, not dismissed: it carries the
AI-processing disclosure, which now lands before the first model call. */
.intro { max-width: 1120px; margin: 0 auto; padding: 32px 24px 48px; }
.intro-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 36px 40px 34px; }
.intro-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
text-transform: uppercase; color: var(--amber-dk); }
.intro-title { margin: 0 0 10px; font-size: 30px; line-height: 1.2; letter-spacing: -.4px; }
.intro-lede { margin: 0 0 26px; font-size: 16.5px; color: var(--mute); max-width: 62ch; }
.intro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 34px;
padding: 24px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.intro-item h2 { margin: 0 0 5px; font-size: 13px; font-weight: 700; letter-spacing: .3px;
text-transform: uppercase; color: var(--navy); }
.intro-item p { margin: 0; font-size: 14.5px; color: var(--mute); }
.intro-map, .intro-data { padding: 22px 0 0; }
.intro-map h2, .intro-data h2 { margin: 0 0 6px; font-size: 13px; font-weight: 700;
letter-spacing: .3px; text-transform: uppercase; color: var(--navy); }
.intro-map p, .intro-data p { margin: 0 0 8px; font-size: 14.5px; color: var(--mute); max-width: 78ch; }
.intro-map b, .intro-data b { color: var(--ink); }
.intro-data { border-top: 1px solid var(--line-2); margin-top: 20px; }
.intro-start { margin-top: 26px; font-size: 16px; padding: 14px 32px; }
.intro-sub { margin: 12px 0 0; font-size: 13px; color: var(--mute); }
.intro-link { appearance: none; background: none; border: none; padding: 0; font: inherit;
color: var(--navy); font-weight: 600; text-decoration: underline; cursor: pointer; }
/* The scan itself is hidden while the intro is up, so nothing below it is
reachable by scrolling past the disclosure. */
body.pre-start main.scan { display: none; }
body.pre-start .ai-notice { display: none; }
@media (max-width: 760px) {
.intro-card { padding: 26px 22px 24px; }
.intro-title { font-size: 24px; }
.intro-grid { grid-template-columns: 1fr; gap: 18px; }
}
/* ---------- one-pager: what your score means ---------- */
.op-mean-list { list-style: none; margin: 10px 0 12px; padding: 0; display: flex;
flex-wrap: wrap; gap: 6px 18px; }
.op-mean-row { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
color: var(--mute); }
.op-mean-row b { font-weight: 600; color: var(--mute); }
.op-mean-here b { color: var(--navy); font-weight: 800; }
.op-mean-tag { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
color: var(--navy); background: var(--amber); padding: 1px 7px; border-radius: 20px; }
.op-mean-focus, .op-mean-steps { margin: 0 0 6px; font-size: 13.5px; color: var(--ink); }
.op-mean-steps { color: var(--mute); }
/* ---------- radar (spider) charts ----------
The report's centrepiece. The reader sees a shape before they see numbers,
which is the whole point: "strong here, thin there" lands in a second, where
a grid of seventeen figures asks them to do the comparing themselves. */
.op-radar-main { display: flex; justify-content: center; margin: 4px 0 2px; }
.op-radar-main .radar { max-width: 100%; height: auto; }
.op-radar-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 6px 16px; font-size: 11.5px; color: var(--mute); margin-bottom: 6px; }
.op-rk { display: inline-flex; align-items: center; gap: 6px; }
/* These three swatches MUST match the strokes radar.js actually draws. They
drifted once already: the chart strokes were darkened for contrast and the
legend was left on the old values, so the key showed one colour and the chart
another for the same series. If you change a colour here, change it in
radar.js (INK / targetColor / benchmarkColor) too. */
.op-rk i { width: 20px; height: 0; border-top: 3px solid #19224C; display: inline-block; }
/* Qualified with the parent so it outranks `.op-rk i` on specificity. The
bare `.op-rk-goal` loses to it and the swatch silently falls back to a
solid navy line, which is what an earlier !important was hiding. */
.op-rk i.op-rk-goal { border-top-style: dashed; border-top-color: #E09600; }
.op-rk-note { font-style: italic; }
/* ---------- what a score means ---------- */
.op-scale-list { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 3px; }
.op-scale-row { display: flex; gap: 10px; font-size: 12px; line-height: 1.45; }
.op-scale-row b { flex: 0 0 108px; color: var(--navy); font-weight: 700; }
.op-scale-row span { color: var(--mute); }
.op-mean-def { font-size: 13.5px; color: var(--ink); margin: 0 0 10px;
padding-left: 10px; border-left: 3px solid var(--amber); }
/* ---------- bottlenecks ---------- */
.op-bn-list { display: grid; gap: 4px; }
.op-bn-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px;
padding: 5px 0; border-top: 1px solid var(--line-2); }
.op-bn-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.op-bn-name { flex: 1; color: var(--navy); font-weight: 600; }
.op-bn-name em { color: var(--mute); font-style: normal; font-weight: 500; }
.op-bn-score { font-weight: 800; color: var(--navy); }
.op-bn-severe .op-bn-name { color: #9c3f26; }
/* ---------- the gap, with a track per priority ---------- */
.op-gap-goal i { display: block; font-size: 11px; font-style: normal; color: var(--mute); }
.op-gap-distance { font-size: 12.5px; color: var(--ink); margin: 0 0 8px; }
.op-gap-item { align-items: center; gap: 10px; }
.op-gap-rank { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--navy);
color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.op-gap-item-main { flex: 1; display: grid; gap: 2px; }
.op-gap-item-name { font-weight: 700; color: var(--navy); }
.op-gap-item-why { font-size: 11px; color: var(--mute); }
.op-gap-track { position: relative; height: 6px; border-radius: 999px; background: #eef1f7; margin: 2px 0; }
.op-gap-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--navy); }
.op-gap-goalmark { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--amber); }
.op-gap-more { font-size: 11px; color: var(--mute); margin: 6px 0 0; }
.op-gap-none { font-size: 12.5px; color: var(--ink); margin: 6px 0 0; }
/* The live pane's radar. Sits above the grid: the shape is what a respondent
watches fill in, the grid is the detail they check afterwards. */
.pane-radar { display: flex; justify-content: center; margin: -4px 0 10px; }
.pane-radar .radar { max-width: 100%; height: auto; }
/* One circle per level, under the main radar. These replaced the heat-map grid:
org / team / personal is the instrument's real finding, and three small
shapes are read at a glance where a 24-cell grid had to be decoded. */
.pane-radar-row, .op-radar-row { display: flex; flex-wrap: wrap; justify-content: center;
gap: 8px 12px; margin-top: 2px; }
.pane-radar-small, .op-radar-small { margin: 0; text-align: center; }
.pane-radar-small .radar, .op-radar-small .radar { max-width: 100%; height: auto; }
.pane-radar-small figcaption, .op-radar-small figcaption { font-size: 10px; font-weight: 700;
color: var(--mute); text-transform: uppercase; letter-spacing: .04em; margin-top: -4px; }
/* ---------- industry comparison ----------
Named organisations with links: the citation is what gives the comparison
authority, and every score behind it rests on published evidence. */
.op-rk i.op-rk-front { border-top-style: dotted; border-top-color: #5c6b8a; }
.op-ind-weak, .op-ind-level { font-size: 12.5px; color: var(--ink); margin: 0 0 8px; }
.op-ind-level { padding-left: 10px; border-left: 3px solid var(--navy); }
.op-ind-list { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 6px; }
.op-ind-org { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline;
font-size: 12px; padding-top: 6px; border-top: 1px solid var(--line-2); }
.op-ind-name { font-weight: 700; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--amber); }
.op-ind-country { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--mute); }
.op-ind-why { color: var(--mute); line-height: 1.45; }
.op-ind-caveat { font-size: 10.5px; color: var(--mute); font-style: italic; margin: 6px 0 0; }
/* The closer recaps the three things to act on, so it earns the last word on a
long page instead of restating the covering email. */
.op-next-list { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 5px; }
.op-next-list li { font-size: 12.5px; line-height: 1.5; color: var(--ink); }
/* ---------- front door (v0.8): consent + work email ----------
Sits at the bottom of the intro card, immediately above Start, because that
is where the decision is made. Everything here is drawn from the same CSS
variables as the rest of the app, so the YER theme re-skins it for free and
dropping the theme still leaves it coherent. */
.door { margin-top: 26px; padding: 20px 22px; background: var(--bg);
border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); }
.door h2 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .3px;
text-transform: uppercase; color: var(--navy); }
.door-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px;
line-height: 1.6; color: var(--ink); background: var(--card); border: 1px solid var(--line-2);
border-radius: var(--radius-sm, 10px); padding: 12px 14px; margin-bottom: 16px; cursor: pointer; }
.door-consent input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px;
accent-color: var(--navy); cursor: pointer; }
.door-consent b { color: var(--navy); font-weight: 600; }
.door-field > label { display: block; font-size: 12.5px; font-weight: 700; color: var(--navy);
margin-bottom: 6px; }
.door-req { color: #B4390F; font-weight: 700; }
.door-field input[type="email"] { width: 100%; max-width: 420px; display: block; font: inherit;
font-size: 15px; padding: 11px 13px; background: var(--card); color: var(--ink);
border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); }
.door-field input[type="email"]:focus { outline: none; border-color: var(--navy-2, var(--navy));
box-shadow: 0 0 0 3px rgba(25,34,76,.14); }
/* The refusal state is deliberately loud on the field itself: the message sits
below the hint, and without the border people re-read the hint instead. */
.door-field input.door-input-err { border-color: #C15A3F; box-shadow: 0 0 0 3px rgba(193,90,63,.14); }
.door-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--mute); max-width: 56ch; }
.door-err { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #C15A3F; max-width: 56ch; }
/* A disabled Start is the normal state here, not an error, so it reads as
"not yet" rather than "broken". */
.intro-start:disabled { opacity: .45; cursor: not-allowed; }
/* ---------- meeting format (v0.9) ----------
Appears under the planner once a slot exists. Same chip shape as the rest of
the form so it reads as one more choice, not a second form appearing. */
.gate-fmt { margin: 14px 0 0; padding: 14px 0 0;
border-top: 1px solid var(--line, #d8dbe2); }
.gate-fmt[hidden] { display: none; }
.gate-fmt-label { display: block; font-size: 12.5px; font-weight: 700;
color: var(--navy); margin: 0 0 8px; }
.gate-fmt-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.gate-fmt-opt { display: inline-flex; align-items: center; gap: 8px;
font-size: 13.5px; padding: 9px 14px; background: #fff;
border: 1px solid var(--line, #d8dbe2); border-radius: 10px;
cursor: pointer; }
.gate-fmt-opt:has(input:checked) { border-color: var(--navy);
box-shadow: 0 0 0 2px rgba(16,32,72,.10); }
.gate-fmt-opt input { width: 16px; height: 16px; flex: 0 0 auto; }
.gate-fmt-opt:has(input:disabled) { opacity: .55; cursor: default; }
.gate-fmt-addr { margin: 12px 0 0; }
.gate-fmt-addr[hidden] { display: none; }
.gate-fmt-addr label { display: block; font-size: 12.5px; font-weight: 700;
color: var(--navy); margin: 0 0 6px; }
.gate-fmt-addr textarea { width: 100%; box-sizing: border-box; resize: vertical;
font: inherit; font-size: 14px; padding: 10px 12px;
background: #fff; border-radius: 10px;
border: 1px solid var(--line, #d8dbe2); }
.gate-fmt-addr textarea:focus { outline: none; border-color: var(--navy);
box-shadow: 0 0 0 3px rgba(25,34,76,.14); }
.gate-fmt-addr textarea:disabled { background: #f5f6f8; color: var(--mute); }
.gate-fmt-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--mute);
max-width: 56ch; }
/* ---------- date + time planner (v0.8) ----------
The "datumprikker" at the end of the scan. Built from buttons rather than an
so the offer — weekdays, business hours — is visible
without opening anything. See js/datepicker.js. */
.gate-plan { margin: 18px 0 4px; padding: 18px; text-align: left;
border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); background: var(--bg); }
.gate-plan-h { margin: 0 0 4px; font-size: 14px; color: var(--navy); }
.gate-plan-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--mute); }
.cal { background: var(--card); border: 1px solid var(--line-2);
border-radius: var(--radius-sm, 10px); padding: 14px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-bottom: 10px; }
.cal-title { font-size: 14px; font-weight: 700; color: var(--navy); }
.cal-nav { appearance: none; background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius-sm, 8px); width: 32px; height: 32px; font-size: 17px; line-height: 1;
color: var(--navy); cursor: pointer; }
.cal-nav:hover:not(:disabled) { background: var(--bg); }
.cal-nav:disabled { color: var(--line); cursor: default; }
/* One 7-column rhythm shared by the weekday labels and the days, so the
columns line up even though they are two separate grids. */
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
text-transform: uppercase; color: var(--mute); padding-bottom: 4px; }
.cal-blank { display: block; }
.cal-day { appearance: none; background: var(--card); border: 1px solid transparent;
border-radius: var(--radius-sm, 8px); aspect-ratio: 1 / 1; min-height: 34px; font: inherit;
font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; padding: 0; }
.cal-day:hover:not(:disabled) { background: var(--bg); border-color: var(--line); }
.cal-day:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(25,34,76,.16); }
/* Two different disabled states, told apart on purpose: a weekend is "never
offered", a past or too-distant day is "not this one". Same non-interactive
result, but the calendar reads as a schedule rather than as broken. */
.cal-day:disabled { cursor: default; }
.cal-weekend { color: var(--line); background: transparent; }
.cal-out { color: var(--mute); opacity: .38; }
.cal-day.cal-picked { background: var(--amber); border-color: var(--amber);
color: var(--navy); }
.cal-times { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.cal-times-h { display: block; font-size: 12px; font-weight: 700; letter-spacing: .3px;
text-transform: uppercase; color: var(--navy); margin-bottom: 9px; }
.cal-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-slot { appearance: none; background: var(--card); border: 1px solid var(--line);
border-radius: 20px; padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 600;
color: var(--navy); cursor: pointer; }
.cal-slot:hover { background: var(--bg); }
.cal-slot:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(25,34,76,.16); }
.cal-slot.cal-picked { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.cal-summary { margin: 12px 0 0; font-size: 12.5px; color: var(--mute); min-height: 18px; }
.cal-summary-set { color: var(--navy); font-weight: 600; }
.gate-addr { color: var(--navy); }
@media (max-width: 560px) {
.cal { padding: 10px; }
.cal-day { min-height: 30px; font-size: 12.5px; }
.cal-slot { padding: 6px 11px; font-size: 12.5px; }
}
/* The standing route back to the report (v0.9). Sits above the review button
in the map card and only appears once there is a report to open. */
.report-open { width: 100%; margin-top: 12px; font-weight: 700; }
.report-open[hidden] { display: none; }