/*
 * handoff.css — design-team handoff CSS, deduped from the four
 * handoff prototypes:
 *   /Users/jelle/Downloads/kazi-fit-report-v1/project/Dashboard.html
 *   /Users/jelle/Downloads/kazi-fit-report-v1/project/Fit Report.html
 *   /Users/jelle/Downloads/kazi-fit-report-v1/project/Full Breakdown.html
 *   /Users/jelle/Downloads/kazi-fit-report-v1/project/Gap Report.html
 *
 * Adopted wholesale rather than translated piece-by-piece. Class
 * names are verbatim from the handoff (`.brand`, `.scope-toggle`,
 * `.nav-section`, `.nav-item`, `.scan-list`, `.scan-list__item`,
 * `.dim-card`, `.sev-pill`, `.sev-card`, `.chart-card`, etc.) so
 * future merges back to the prototype stay diffable.
 *
 * Token strategy:
 *   - Where the handoff's local :root variable has a `--kz-*`
 *     equivalent in tokens.css, references go through `var(--kz-…)`.
 *   - Where it doesn't (very specific paddings/sizes like 14px 22px,
 *     11px font-sizes, 0.14em letter-spacing), the handoff's literal
 *     value stays.
 *   - The handoff's own short aliases (`--ink`, `--muted`, `--line`,
 *     `--series-a`, etc.) are NOT redefined here — their values live
 *     in tokens.css under the `--kz-*` namespace and are referenced
 *     directly. The colour palette is byte-identical: tokens.css
 *     mirrors the handoff's stone neutrals + severity hues.
 *   - Universal resets (* box-sizing, body font/colour) and the
 *     `:root` block are NOT duplicated — they live in components.css
 *     and tokens.css respectively.
 *
 * Loaded AFTER components.css in base.html so that handoff classes
 * win on cascade where they overlap (e.g. `.card`, `.btn-secondary`).
 */


/* ═══════════════════════════════════════════════════════════════
   TYPE SCALE — display + sans utilities
   ═══════════════════════════════════════════════════════════════ */

.t-display {
    font-family: var(--kz-font-display);
    font-weight: 400;
    letter-spacing: -0.015em;
    font-optical-sizing: auto;
}

.t-h1 {
    font-family: var(--kz-font-display);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.t-h2 {
    font-family: var(--kz-font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.t-h3 {
    font-family: var(--kz-font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -0.003em;
}

.t-body {
    font-size: 14px;
    color: var(--kz-color-text);
}

.t-body-muted {
    font-size: 14px;
    color: var(--kz-color-text-muted);
    line-height: 1.55;
}

.t-xs {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--kz-color-text-muted);
}

.t-xxs {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.tnum {
    font-variant-numeric: tabular-nums;
}

.t-quote {
    font-family: var(--kz-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--kz-color-text);
    letter-spacing: -0.005em;
    text-wrap: pretty;
}


/* ═══════════════════════════════════════════════════════════════
   APP LAYOUT  — 264px sidebar + flexible main
   ═══════════════════════════════════════════════════════════════ */

.app {
    display: grid;
    grid-template-columns: var(--kz-sidebar-width) 1fr;
    min-height: 100vh;
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — chrome (handoff `.sidebar`)
   ═══════════════════════════════════════════════════════════════ */

aside.sidebar {
    background: #fafaf9;
    border-right: 1px solid var(--kz-color-border);
    padding: 22px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
}

.brand {
    font-family: var(--kz-font-display);
    font-size: 24px;
    color: var(--kz-color-text);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    font-weight: 400;
    letter-spacing: -0.02em;
    padding: 0 6px;
}

.brand .dot,
.brand-dot {
    color: var(--kz-color-series-a);
}

/* Full Kazi logo lockup (icon + wordmark) top-left, replacing the text
   wordmark (#21484). Scales by height; width follows the aspect ratio. */
.brand-logo {
    display: block;
    height: 38px;
    width: auto;
}

.scope-toggle {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--kz-color-border);
    border-radius: 999px;
    padding: 3px;
    align-self: flex-start;
    margin: 0 6px;
}

.scope-toggle button,
.scope-toggle__pill {
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    background: transparent;
    border: 0;
    color: var(--kz-color-text-muted);
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: -0.002em;
    text-decoration: none;
}

.scope-toggle button.on,
.scope-toggle__pill.is-active {
    background: var(--kz-color-text);
    color: #fff;
}

/* The pending-count badge must not inflate the pill height — Me and
   My Team stay vertically aligned when a count renders (#21438). */
.scope-toggle__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.scope-toggle__pill .badge {
    padding: 0 6px;
    font-size: 10.5px;
    line-height: 16px;
    border-radius: 999px;
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — nav sections (handoff `.nav-section`)
   ═══════════════════════════════════════════════════════════════ */

.nav-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-section .heading,
.nav-section .eyebrow {
    font-family: var(--kz-font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a8a29e;
    padding: 0 8px;
    margin-bottom: 2px;
}

/* ── Sidebar three-tier hierarchy (#21438, #21478) ─────────
   The block headings were the lightest text in the panel while the
   most important structural anchors; scans, journey rows, and
   utilities all sat at one flat level. Three tiers instead:
     1. block heading  → full ink, the anchor
     2. journey / profile rows → normal ink, the content
     3. nested scans + utilities → indented under a left rail
   Applied to both the Me (#21438) and Team (#21478) sidebars. */
:is(.sidebar--me, .sidebar--team) .nav-section .heading {
    color: var(--kz-color-text);
    font-size: 11px;
    letter-spacing: 0.09em;
    margin-bottom: 6px;
}

/* Separate blocks so each reads as its own unit. */
:is(.sidebar--me, .sidebar--team) .nav-section + .nav-section {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--kz-color-border);
}

/* Nested detail hangs under its parent on a light guide rail. */
:is(.sidebar--me, .sidebar--team) .nav-nest {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 2px 11px;
    padding-left: 11px;
    border-left: 1.5px solid var(--kz-color-border);
}

.nav-sub {
    /* Override the legacy .nav-sub rule in components.css that adds a
       border-top — handoff has no horizontal rule between sub-eyebrows. */
    border-top: 0;
    font-family: var(--kz-font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a8a29e;
    padding: 6px 8px 2px;
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — nav items (handoff `.nav-item` + scan list rows)
   ═══════════════════════════════════════════════════════════════ */

.nav-item,
.scan-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--kz-color-text-soft);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    line-height: 1.3;
}

.nav-item:hover,
.scan-list__item:hover {
    background: rgba(0, 0, 0, 0.035);
}

/* Handoff uses `<a class="nav-item">` containing `<span class="label">`.
   Our scan list uses `<li class="scan-list__item">` containing
   `<a class="label">`, so `.nav-item .label` doesn't match. We extend the
   selector to cover both shapes. `color: inherit` lets the link pick up the
   muted color set on `.scan-list__item:not(.is-active)` rather than fall
   back to the browser's default link color. */
.nav-item .label,
.scan-list__item .label,
.scan-list__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.nav-item .label .date,
.scan-list__date {
    color: var(--kz-color-text-muted);
    font-size: 12px;
}

.nav-item.muted {
    color: var(--kz-color-text-muted);
}

.nav-item.ghost,
.nav-add {
    color: var(--kz-color-text-muted);
    font-style: normal;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

.nav-item.ghost:hover,
.nav-add:hover {
    background: rgba(0, 0, 0, 0.035);
}

.nav-item.ghost .label {
    color: var(--kz-color-text-muted);
}

.nav-item.ghost .plus,
.nav-add__plus {
    color: #a8a29e;
    font-weight: 500;
    width: 13px;
    display: inline-grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
}

/* Inactive scan rows are clearly muted (handoff applies .nav-item.muted
   explicitly; we apply the same color via :not(.is-active)). */
.scan-list__item:not(.is-active) {
    color: var(--kz-color-text-muted);
}

.nav-item.active,
.nav-add.is-active,
.scan-list__item.is-active,
.scan-list__item.is-current {
    background: #f5f5f4;
    border: 1px solid transparent;
    box-shadow: inset 2px 0 0 var(--kz-color-series-a);
    font-weight: 600;
    color: var(--kz-color-text);
    border-radius: 6px;
}

/* Two-line scan label: title on top, smaller muted date below.
   Templates render scan.label split on ' — ' into these two slots. */
.scan-list__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    flex: 1;
}

.scan-list__title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scan-list__date {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--kz-color-text-muted);
    line-height: 1.3;
    margin-top: 1px;
}

.nav-item .tag,
.scan-list__item .tag {
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    background: #f5f5f4;
    color: var(--kz-color-text-muted);
    border: 1px solid var(--kz-color-border);
}

.nav-item .tag.current,
.nav-item .tag--current,
.scan-list__item .tag--current,
.tag--current {
    background: var(--kz-color-tag-current-bg);
    color: var(--kz-color-tag-current-text);
    border-color: #bfdbfe;
}

.nav-item .tag--muted,
.scan-list__item .tag--muted,
.tag--muted {
    background: var(--kz-color-tag-neutral-bg);
    color: var(--kz-color-tag-neutral-text);
    border-color: var(--kz-color-border);
}

.nav-item .tag--warn,
.scan-list__item .tag--warn,
.tag--warn {
    background: var(--kz-color-warning-bg);
    color: #9a3412;
    border-color: var(--kz-color-warning-border);
}

.nav-item.pending,
.scan-list__item.is-coming-soon {
    color: #a8a29e;
    border: 1px dashed var(--kz-color-border);
    background: transparent;
    padding: 7px 8px;
}

.nav-item .arrow,
.scan-list__arrow {
    color: #a8a29e;
    font-size: 14px;
    line-height: 1;
}

.nav-item.locked,
.scan-list__item.is-locked {
    color: #a8a29e;
    cursor: not-allowed;
}

.nav-item.locked .lock,
.scan-list__lock {
    width: 11px;
    height: 11px;
    display: inline-block;
    margin-left: auto;
    opacity: 0.5;
}

/* sub-item indented under an active scan (e.g. "View Full Breakdown") */
.nav-sub-item {
    font-size: 12.5px !important;
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — scan list (handoff `.scan-list`)
   ═══════════════════════════════════════════════════════════════ */

.scan-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scan-list__icon {
    color: currentColor;
    opacity: 0.7;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    display: inline-block;
}

/* Solid-circle variant — used when the icon role is a coloured dot
 * (e.g. the experience-scan list) rather than an SVG glyph.  Pair with
 * a .dot--series-X modifier for the fill. */
.scan-list__icon--dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 1;
}

.scan-list__overflow {
    list-style: none;
    padding: 4px 8px 0;
}

.scan-list__view-all {
    background: transparent;
    border: 0;
    color: var(--kz-color-text-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.scan-list__view-all:hover {
    color: var(--kz-color-text);
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — bottom (lang switch + user row)
   ═══════════════════════════════════════════════════════════════ */

.sidebar-bottom,
.sidebar__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--kz-color-border);
}

.lang-switch {
    display: inline-flex;
    gap: 2px;
    padding: 0 2px;
    font-size: 11px;
    color: var(--kz-color-text-muted);
    font-weight: 500;
}

.lang-switch button,
.lang-switch__opt {
    font: inherit;
    background: transparent;
    border: 0;
    color: var(--kz-color-text-muted);
    padding: 3px 7px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}

.lang-switch button.on,
.lang-switch__opt.is-active {
    background: #fff;
    color: var(--kz-color-text);
    border: 1px solid var(--kz-color-border);
}

.user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 4px 4px 4px 2px;
    border-radius: 8px;
    position: relative;
}

.user-row:hover {
    background: rgba(0, 0, 0, 0.035);
}

/* Current-page marker when the open page lives in the user dropdown
   (My Reports, Settings) — the row hints location while collapsed. */
.user-row.is-active {
    background: #f5f5f4;
    box-shadow: inset 2px 0 0 var(--kz-color-series-a);
}

.sidebar__user-dropdown-item.is-active {
    font-weight: 600;
    color: var(--kz-color-text);
    box-shadow: inset 2px 0 0 var(--kz-color-series-a);
}

.user-row .left,
.user-row__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.user-row .more,
.user-row__more {
    color: #a8a29e;
    font-size: 16px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    letter-spacing: 1px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.user-row:hover .more,
.user-row:hover .user-row__more {
    color: var(--kz-color-text-muted);
}

.avatar,
.user-row__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fde68a, #fca5a5);
    color: var(--kz-color-text);
    font-family: var(--kz-font-display);
    font-size: 13px;
    display: grid;
    place-items: center;
    font-weight: 500;
    border: 1px solid var(--kz-color-border);
}

.user-row .who,
.user-row__name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--kz-color-text);
}

.user-row .who small,
.user-row__name small {
    display: block;
    color: var(--kz-color-text-muted);
    font-weight: 400;
    font-size: 11px;
}


/* ═══════════════════════════════════════════════════════════════
   MAIN — content area
   ═══════════════════════════════════════════════════════════════ */

main.content,
section.content,
.app > .content {
    padding: 40px 56px 80px;
    max-width: 1176px;
}

.wrap {
    max-width: var(--kz-content-max);
}

.lede {
    max-width: 720px;
    margin: 14px 0 0;
    color: var(--kz-color-text-muted);
    font-size: 15.5px;
    line-height: 1.55;
}

.subtitle-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-quote {
    max-width: 820px;
    margin: 22px 0 0;
}


/* ═══════════════════════════════════════════════════════════════
   PAGE HEAD — breadcrumb + title block
   ═══════════════════════════════════════════════════════════════ */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--kz-font-body);
    font-size: 12.5px;
    color: var(--kz-color-text-muted);
    margin-top: 2px;
}

.breadcrumb a {
    color: var(--kz-color-text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--kz-color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.breadcrumb .crumb-sep {
    color: #a8a29e;
}

.breadcrumb .crumb-here {
    color: var(--kz-color-text);
}

.page-head {
    margin-top: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

.page-head-left {
    min-width: 0;
}

.page-head-left .t-h1 {
    margin: 0;
}

.page-head-left .page-meta {
    margin-top: 10px;
    font-family: var(--kz-font-body);
    font-size: 13px;
    color: var(--kz-color-text-muted);
}

.page-head-left .page-meta .sep {
    margin: 0 8px;
    color: #a8a29e;
}

.page-head-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    padding-top: 6px;
}


/* ═══════════════════════════════════════════════════════════════
   SELECTOR ROW — chips + actions
   ═══════════════════════════════════════════════════════════════ */

.selector-row {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.chip-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.chip,
.scan-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--kz-color-border);
    border-radius: 999px;
    padding: 7px 14px 7px 12px;
    font-size: 13px;
    color: var(--kz-color-text);
    cursor: pointer;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
}

.chip:hover,
.scan-pill:hover {
    background: #f5f5f4;
}

.chip .dot,
.scan-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.chip .caret,
.scan-pill__caret {
    color: #a8a29e;
    font-size: 10px;
    margin-left: 2px;
}

.chip-vs {
    /* Matches the report browser's plain "vs" (#21438) — same body
       font and muted tone on both pages. */
    color: var(--kz-color-text-muted);
    font-size: 13px;
}

.actions,
.head-actions {
    display: inline-flex;
    gap: 10px;
}

/* version pill (page head) */
.version-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.version-label {
    font-family: var(--kz-font-body);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
    font-weight: 600;
}

.version-pill {
    font: inherit;
    font-family: var(--kz-font-body);
    font-size: 12.5px;
    color: var(--kz-color-text);
    background: #fff;
    border: 1px solid var(--kz-color-border);
    border-radius: 999px;
    padding: 5px 12px 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.version-pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.version-pill .current-mark {
    color: var(--kz-color-text-muted);
    margin-left: -2px;
}

.version-pill .caret {
    color: #a8a29e;
    margin-left: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS  (handoff `.btn`)
   ═══════════════════════════════════════════════════════════════ */

.btn {
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    padding: 9px 16px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
    letter-spacing: -0.002em;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: var(--kz-color-text);
    color: #fff;
    border-color: var(--kz-color-text);
}

.btn-primary:hover {
    background: #000;
}

.btn-secondary {
    background: #fff;
    color: var(--kz-color-text);
    border-color: var(--kz-color-border);
}

.btn-secondary:hover {
    background: #f5f5f4;
}


/* ═══════════════════════════════════════════════════════════════
   CARD — generic surface
   ═══════════════════════════════════════════════════════════════ */

.card {
    background: var(--kz-color-surface);
    border: 1px solid var(--kz-color-border);
    border-radius: 14px;
}


/* ═══════════════════════════════════════════════════════════════
   SUMMARY PANEL  — donut + tier text + legend chips
   ═══════════════════════════════════════════════════════════════ */

.summary {
    margin-top: 26px;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 36px;
    align-items: center;
}

.donut-wrap {
    display: grid;
    place-items: center;
}

.donut-ratio {
    position: relative;
    width: 160px;
    height: 160px;
}

.donut-ratio svg {
    width: 100%;
    height: 100%;
    display: block;
}

.donut-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
}

.donut-center .n {
    font-family: var(--kz-font-display);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.donut-center .slash {
    color: #a8a29e;
    margin: 0 2px;
}

.donut-center .lbl {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
    margin-top: 6px;
    font-weight: 600;
}

.summary-body .tier {
    font-family: var(--kz-font-body);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.005em;
    color: var(--kz-color-text);
    line-height: 1.15;
}

.summary-body .tier .accent {
    color: #92400e;
}

.summary-body .sub {
    color: var(--kz-color-text-muted);
    font-size: 15px;
    margin-top: 10px;
    max-width: 56ch;
    line-height: 1.55;
}

.legend-chips {
    display: inline-flex;
    gap: 6px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: #f5f5f4;
    color: var(--kz-color-text);
    border: 1px solid var(--kz-color-border);
    font-weight: 500;
}

.legend-chip .swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-chip .n {
    font-variant-numeric: tabular-nums;
    color: var(--kz-color-text-muted);
    margin-left: 2px;
    font-weight: 500;
}

.legend-chip.zero {
    opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════
   ANALYSIS GRID — chart + severity cards stacked
   ═══════════════════════════════════════════════════════════════ */

.analysis-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.analysis-grid .col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}


/* ═══════════════════════════════════════════════════════════════
   CHART CARD
   ═══════════════════════════════════════════════════════════════ */

.chart-card {
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chart-card .title {
    font-family: var(--kz-font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--kz-color-text);
}

.chart-card .hint {
    font-size: 12.5px;
    color: var(--kz-color-text-muted);
}

/* Radar SVGs: fill the card width (the SVG's width attribute is smaller
   than its viewBox, which otherwise scales the whole drawing — and its
   labels — down ~30%), and let labels extend past the viewBox instead
   of clipping (#21438). */
.chart-card svg {
    /* Natural-size rendering (#21438): the SVG declares its viewBox size
       as width, so labels have ONE true pixel size; max-width only
       shrinks it on narrow cards — it never scales text up with layout. */
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    overflow: visible;
}

.chart-svg {
    width: 100%;
    aspect-ratio: 480 / 360;
    display: block;
    overflow: visible;
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 2px;
    border-top: 1px solid var(--kz-color-border);
    padding-top: 14px;
}

.chart-legend .item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--kz-color-text);
}

.chart-legend .sw {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.chart-legend .name {
    font-weight: 500;
}

.chart-card .chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.chart-card .chart-eyebrow {
    font-family: var(--kz-font-body);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
    font-weight: 600;
}

.chart-card .top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid #f5f5f4;
    margin-top: 4px;
}

.chart-card .top-eyebrow {
    font-family: var(--kz-font-body);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
    font-weight: 600;
    margin-right: 4px;
}

.fb-chart-card {
    padding: 14px 14px 10px;
}

.fb-chart-card .chart-svg {
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   SEVERITY  — section, pills, cards
   ═══════════════════════════════════════════════════════════════ */

.sev-section {
    margin-top: 34px;
}

.sev-section > .eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--kz-color-text-muted);
    margin-bottom: 12px;
}

.sev-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sev-card {
    border-radius: 14px;
    padding: 18px 20px 20px;
    background: var(--kz-color-surface);
    border: 1px solid var(--kz-color-border);
}

.sev-card .head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

/* Severity heading — a colour-dotted label (not a filled chip), so it reads
   as a heading above the status-coloured .dim-tag pills rather than twinning
   them. #21484 */
.sev-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--kz-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.sev-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 7px;
    background: var(--sev-dot, currentColor);
    flex: none;
}

.sev-pill__n {
    margin-left: 5px;
    font-weight: 600;
    color: var(--kz-color-text-faint);
}

/* Severity accents — colour the label text + its leading dot (headings) and
   the status chips (.dim-tag--{sev}). */
.severity--match {
    color: var(--kz-color-match);
    --sev-dot: var(--kz-color-match);
}

.severity--tension {
    color: #92400e;
    --sev-dot: var(--kz-color-tension);
}

.severity--mismatch {
    color: var(--kz-color-mismatch);
    --sev-dot: var(--kz-color-mismatch);
}

.severity--boomerang {
    color: var(--kz-color-boomerang);
    --sev-dot: var(--kz-color-boomerang);
}

.sev-card .note {
    font-size: 13.5px;
    color: var(--kz-color-text-muted);
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
   DIM TAGS  (dimension chips)
   ═══════════════════════════════════════════════════════════════ */

.dim-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dim-tag {
    display: inline-block;
    background: var(--kz-color-tag-bg);
    color: var(--kz-color-tag-text);
    border: 1px solid #fed7aa;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.002em;
    line-height: 1.2;
}

/* Status-coloured chips — each dimension carries its severity colour so the
   status is legible without tracing back to the heading. #21484 */
.dim-tag--match {
    background: var(--kz-color-match-soft);
    color: var(--kz-color-match);
    border-color: transparent;
}

.dim-tag--tension {
    background: var(--kz-color-tension-soft);
    color: #92400e;
    border-color: transparent;
}

.dim-tag--mismatch {
    background: var(--kz-color-mismatch-soft);
    color: var(--kz-color-mismatch);
    border-color: transparent;
}

.dim-tag--boomerang {
    background: var(--kz-color-boomerang-soft);
    color: var(--kz-color-boomerang);
    border-color: transparent;
}

/* Top-2 value — a numbered chip (rank in a teal disc), distinct from the
   status pills so "your top priorities" don't read as match/mismatch. #21484 */
.top-value {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--kz-color-surface);
    border: 1px solid var(--kz-color-border-heavy);
    border-radius: 999px;
    padding: 3px 13px 3px 4px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.002em;
    line-height: 1.2;
    color: var(--kz-color-text);
}

.top-value__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--kz-color-series-a);
    color: var(--kz-color-text-inverse);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex: none;
}


/* ═══════════════════════════════════════════════════════════════
   FULL BREAKDOWN  — fb-section, dim-grid, dim-card, score-bars
   ═══════════════════════════════════════════════════════════════ */

.fb-section {
    margin-top: 48px;
}

.fb-section:first-of-type {
    margin-top: 44px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.section-title {
    font-family: var(--kz-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kz-color-text);
    margin: 0;
    flex-shrink: 0;
}

.section-rule {
    flex: 1;
    height: 1px;
    background: var(--kz-color-border);
}

.fb-chart-row {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.score-bars {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 14px;
    padding: 4px 0;
}

/* Each bar-row is display:contents so its SVG track and label
 * become direct grid items of .score-bars. This makes every track
 * in the group share one column (consistent scale) and every
 * label share another (auto-sized to the longest in the group). */
.bar-row {
    display: contents;
}

/* SVG fill bar: <svg class="bar-track"> clips its content to a pill
 * (rounding the fill's left end), a <rect class="bar-fill"> paints the
 * fill, and a round-capped zero-length <line class="bar-ball"> paints a
 * darker "ball" at the tip — a true circle under the stretched
 * (preserveAspectRatio=none) viewBox, and no inline style needed. An
 * rx on the rect would smear into a point, hence the clip + cap. #21484 */
.bar-track {
    display: block;
    width: 100%;
    height: 6px;
    background: #f5f5f4;
    border-radius: 999px;
    overflow: hidden;
}

.bar-fill {
    fill: var(--kz-color-series-a);
}

.bar-ball {
    stroke: var(--kz-color-series-a-deep);
    stroke-width: 6;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Team Roles bars — logo-coral accent (#21519). */
.score-bars--tr .bar-fill {
    fill: var(--kz-color-series-tr);
}

.score-bars--tr .bar-ball {
    stroke: var(--kz-color-series-tr-deep);
}

.bar-label {
    font-family: var(--kz-font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--kz-color-text);
    white-space: nowrap;
}

.dim-grid {
    margin-top: 32px;
    display: grid;
    gap: 18px;
}

.dim-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dim-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dim-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dim-card {
    background: var(--kz-color-surface);
    border: 1px solid var(--kz-color-border);
    border-radius: 14px;
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dim-card.dim-card-top {
    border-left: 3px solid var(--kz-color-series-a);
    padding-left: 20px;
}

/* Team Roles top-2 accents — logo-coral (#21519). */
.fb-section--tr .dim-card.dim-card-top {
    border-left-color: var(--kz-color-series-tr);
}

.fb-section--tr .rank-badge.rank-top {
    background: var(--kz-color-series-tr);
    border-color: var(--kz-color-series-tr);
}

.dim-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rank-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-family: var(--kz-font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--kz-color-text-muted);
    background: #fff;
    border: 1px solid var(--kz-color-border);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.rank-badge.rank-top {
    background: var(--kz-color-series-a);
    color: #fff;
    border-color: var(--kz-color-series-a);
}

.dim-card-name {
    font-family: var(--kz-font-body);
    font-weight: 600;
    font-size: 17px;
    color: var(--kz-color-text);
    line-height: 1.25;
}

.dim-card-body {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--kz-color-text);
    text-wrap: pretty;
}


/* ═══════════════════════════════════════════════════════════════
   REPORTS-USING-THIS-PROFILE  (Full Breakdown footer)
   ═══════════════════════════════════════════════════════════════ */

.report-row-grid {
    display: grid;
    gap: 14px;
}

.report-row {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.report-row-body {
    min-width: 0;
    flex: 1;
}

.report-row-kicker {
    font-family: var(--kz-font-body);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.report-row-title {
    font-family: var(--kz-font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--kz-color-text);
}

.report-row-meta {
    font-family: var(--kz-font-body);
    font-size: 12.5px;
    color: var(--kz-color-text-muted);
    margin-top: 2px;
}

.report-row .btn {
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   NEXT STEPS  — Gap / Fit / Why blocks on the Ideal Work profile
   (#21475). Three fixed slots: each prompts an action or links a
   report. Question-led (doors), report name on the artifact.
   ═══════════════════════════════════════════════════════════════ */

.journey-next-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.journey-next-block {
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
}

/* Eyebrow: report-family label with a colour mark tying it to that
   report's chart series (Gap→Experience, Fit→Expectation, Why→neutral). */
.journey-next-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--kz-font-body);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kz-color-text-soft);
    font-weight: 600;
    margin-bottom: 10px;
}

.journey-next-mark {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--_jn-accent, var(--kz-color-text-faint));
    flex-shrink: 0;
}

.journey-next-block--gap { --_jn-accent: var(--kz-color-series-c); }
.journey-next-block--fit { --_jn-accent: var(--kz-color-series-b); }
.journey-next-block--why { --_jn-accent: var(--kz-color-wv); }

/* Share card (#21485) — the mark hints the profile being shared:
   Gap report → Role Experience (series-c), Fit report → Ideal Work (series-a). */
.journey-next-block--share-gap { --_jn-accent: var(--kz-color-series-c); }
.journey-next-block--share-fit { --_jn-accent: var(--kz-color-series-a); }

/* Manager-side team blocks (#21487): Fit → expectation (series-b),
   Reality → experience (series-c), Prep → neutral Work-Values blue. */
.journey-next-block--team_fit_person { --_jn-accent: var(--kz-color-series-b); }
.journey-next-block--team_fit_self { --_jn-accent: var(--kz-color-series-b); }
.journey-next-block--team_fit_role { --_jn-accent: var(--kz-color-series-b); }
.journey-next-block--team_reality { --_jn-accent: var(--kz-color-series-c); }
.journey-next-block--team_prep { --_jn-accent: var(--kz-color-wv); }
.journey-next-block--team_ask_experience { --_jn-accent: var(--kz-color-series-c); }
.journey-next-block--team_ask_ideal_work { --_jn-accent: var(--kz-color-series-a); }

.journey-next-title {
    font-family: var(--kz-font-body);
    font-weight: 600;
    font-size: 16.5px;
    line-height: 1.28;
    color: var(--kz-color-text);
    margin: 0 0 8px;
}

/* Persistent one-line answer — stays in every state for context. */
.journey-next-blurb {
    font-family: var(--kz-font-body);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--kz-color-text-muted);
    margin: 0;
}

/* Actions / reports pinned to the card bottom so they line up across
   the three cards even when blurb length differs. */
.journey-next-foot {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.journey-next-note {
    font-family: var(--kz-font-body);
    font-size: 12.5px;
    color: var(--kz-color-text-muted);
    margin: 0;
}

.journey-next-reports {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.journey-next-report {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.journey-next-report-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.journey-next-report-label {
    font-family: var(--kz-font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kz-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journey-next-report-date {
    font-family: var(--kz-font-body);
    font-size: 12px;
    color: var(--kz-color-text-muted);
    margin-top: 1px;
}

.journey-next-report .btn {
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .journey-next-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════
   INSIGHT  — single quote card with left stripe
   ═══════════════════════════════════════════════════════════════ */

.eyebrow-label {
    font-family: var(--kz-font-body);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
    font-weight: 600;
    margin-top: 44px;
    margin-bottom: 10px;
}

.eyebrow-label.next-label {
    margin-top: 44px;
}

.insight-card {
    background: var(--kz-color-surface);
    border: 1px solid var(--kz-color-border);
    border-left: 3px solid var(--kz-color-series-a);
    border-radius: 14px;
    padding: 24px 28px;
}

.insight-card__label {
    font-family: var(--kz-font-body);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
    font-weight: 600;
    margin-bottom: 14px;
}

.insight-quote {
    margin: 0;
    max-width: 880px;
}

/* Stacked narratives (top-2 per axis) need breathing room between them. */
.insight-quote + .insight-quote {
    margin-top: 14px;
}

.insight-attr {
    margin-top: 14px;
    font-family: var(--kz-font-body);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════
   WHAT'S NEXT  — two-card grid
   ═══════════════════════════════════════════════════════════════ */

.next-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.next-card {
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.next-card .next-title {
    font-family: var(--kz-font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--kz-color-text);
    line-height: 1.3;
}

.next-card .next-body {
    font-size: 13.5px;
    color: var(--kz-color-text-muted);
    line-height: 1.55;
    margin: 0;
}

.next-card .next-cta {
    margin-top: 10px;
}

.breakdown-row {
    margin-top: 20px;
}

/* Compact horizontal gap variant — for inline breakdown rows whose
 * children sit side-by-side rather than stacking. */
.breakdown-row--gap-3 {
    gap: var(--kz-space-3);
}


/* ═══════════════════════════════════════════════════════════════
   END HINT  — page footer note
   ═══════════════════════════════════════════════════════════════ */

.end-hint {
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--kz-color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--kz-color-text-muted);
    font-size: 12.5px;
}

.end-hint .meta .sep {
    margin: 0 8px;
    color: #a8a29e;
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR ICON GLYPHS
   ═══════════════════════════════════════════════════════════════ */

.g {
    width: 13px;
    height: 13px;
    display: inline-block;
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.7;
}


/* ═══════════════════════════════════════════════════════════════
   TINY HELPERS
   ═══════════════════════════════════════════════════════════════ */

.row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mt-6 { margin-top: 6px; }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }


/* ═══════════════════════════════════════════════════════════════
   SCAN QUESTIONNAIRE — ported from new Scan.html handoff (G.5.4)
   Source: ~/Downloads/kazi-fit-report-v1\ 3/project/Scan.html
   Token translation: same scheme as elsewhere in this file
   (--display → --kz-font-display, --ink → --kz-color-text, etc.)
   Skipped sections: anonymous shell, signup/claim, resume-banner
   toast, state-gallery headers, handoff-intro page header.
   ═══════════════════════════════════════════════════════════════ */

    /* =========================================================
          SCAN — outer layout
          The questionnaire main is built as a vertical stack:
              [scan__chrome-top]  — section pills (sticky)
              [scan__stage]        — the question / intro / etc. content
              [scan__chrome-bot]   — keyboard hint + progress + back/next
          ========================================================= */
    .scan {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .scan__chrome-top {
        position: sticky;
        top: 0;
        z-index: 5;
        background: rgba(255,255,255,0.92);
        backdrop-filter: saturate(140%) blur(6px);
        border-bottom: 1px solid var(--kz-color-border);
        padding: 14px 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .scan__breadcrumb {
        font-size: 11.5px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--kz-color-text-muted);
        font-weight: 600;
    }
    .scan__breadcrumb b { color: var(--kz-color-text-soft); font-weight: 600; }
    .scan__sections {
        display: inline-flex; gap: 6px; align-items: center;
    }
    .scan__section-pill {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 5px 12px 5px 8px; border-radius: 999px;
        background: var(--kz-color-bg-subtle); color: var(--kz-color-text-muted);
        font-size: 12px; font-weight: 500; border: 1px solid var(--kz-color-border);
    }
    .scan__section-pill .ico {
        width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--kz-color-text-faint);
        display: inline-grid; place-items: center; flex-shrink: 0;
        background: #fff;
    }
    .scan__section-pill.is-current {
        background: #fff; color: var(--kz-color-text); border-color: var(--kz-color-text);
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,0.06);
    }
    .scan__section-pill.is-current .ico { border-color: var(--kz-color-series-a); background: var(--kz-color-series-a); }
    .scan__section-pill.is-done { color: var(--kz-color-text-soft); background: #fff; border-color: var(--kz-color-border); }
    .scan__section-pill.is-done .ico { background: var(--kz-color-match); border-color: var(--kz-color-match); color: #fff; }
    .scan__section-pill.is-done .ico::after {
        content: ""; width: 6px; height: 3px;
        border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
        transform: rotate(-45deg) translate(0px,-1px);
    }
    .scan__sections-sep { color: var(--kz-color-text-faint); font-size: 11px; padding: 0 2px; }

    .scan__exit-btn {
        font: inherit; font-size: 12.5px; color: var(--kz-color-text-muted);
        background: transparent; border: 0; cursor: pointer;
        padding: 6px 10px; border-radius: 8px;
    }
    .scan__exit-btn:hover { background: var(--kz-color-bg-subtle); color: var(--kz-color-text-soft); }

    /* the centered stage where the question/intro lives */
    .scan__stage {
        flex: 1;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 56px 56px 120px;
    }
    /* Likert sections (TR / IPIP) need tighter stage padding so 5-6 rows
       fit on a typical laptop viewport without the chrome overlapping
       the bottom row. Other sections (intro, prime, welcome-back,
       transition, complete, WV) keep the roomy default. */
    .scan[data-section="tr"] .scan__stage,
    .scan[data-section="ipip"] .scan__stage {
        padding: 24px 56px 76px;
    }
    .scan__stage-inner {
        width: 100%;
        max-width: 720px;
    }
    .scan__stage-inner.is-wide { max-width: 880px; }

    /* Each scan section caps its own width so the flow has a consistent
       visual frame instead of stretching to fit the longest line of
       content.  720px for narrative screens; 880px for likert grids
       (TR / IPIP) where 5 rating buttons need horizontal room. */
    .scan__intro,
    .scan__welcome,
    .scan__prime,
    .scan__transition,
    .scan__complete {
        max-width: 720px;
        margin-inline: auto;
    }
    .scan__question {
        max-width: 720px;
        margin-inline: auto;
    }
    .scan[data-section="tr"] .scan__question,
    .scan[data-section="ipip"] .scan__question {
        max-width: 880px;
    }

    /* bottom chrome: progress, hint, back/next */
    .scan__chrome-bot {
        position: sticky;
        bottom: 0;
        background: rgba(255,255,255,0.95);
        backdrop-filter: saturate(140%) blur(6px);
        border-top: 1px solid var(--kz-color-border);
        padding: 14px 56px 18px;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 18px;
        align-items: center;
    }
    .scan__progress-stack {
        display: flex; flex-direction: column; gap: 8px;
        grid-column: 1 / -1;
    }
    .scan__progress-row {
        display: flex; align-items: center; gap: 14px;
    }
    .scan__progress-label {
        font-size: 11.5px; color: var(--kz-color-text-muted); font-weight: 500;
        font-variant-numeric: tabular-nums; min-width: 110px;
    }
    .scan__progress-label b { color: var(--kz-color-text-soft); font-weight: 600; }
    .scan__progress-track {
        flex: 1; height: 4px; background: var(--kz-color-bg-subtle);
        border-radius: 999px; overflow: hidden;
        display: flex;
    }
    .scan__progress-fill {
        height: 100%;
        width: 0;  /* runtime width set by scan.js as the user advances */
        background: var(--kz-color-series-a);
        border-radius: 999px 0 0 999px;
        transition: width .3s ease;
    }
    .scan__progress-fill.is-tr { background: var(--kz-color-tr); }
    .scan__progress-fill.is-ipip { background: var(--kz-color-text); }

    /* Trailing percentage label sits flush right of the bar — it carries
     * only "0%" / "47%", so the left-label's 110 px reservation would
     * leave a visible gap. */
    .scan__progress-label--pct {
        min-width: auto;
        text-align: right;
    }

    .scan__hint-row {
        display: flex; align-items: center; justify-content: space-between;
        gap: 14px;
    }
    .scan__hint {
        font-size: 12px; color: var(--kz-color-text-muted);
        display: inline-flex; gap: 6px; align-items: center;
    }
    .scan__hint kbd {
        font-family: var(--kz-font-body);
        font-size: 11px; font-weight: 600;
        background: #fff; border: 1px solid var(--kz-color-border);
        border-bottom-width: 2px;
        border-radius: 4px;
        padding: 1px 5px;
        color: var(--kz-color-text-soft);
        line-height: 1;
    }
    .scan__hint .dismiss {
        background: transparent; border: 0; color: var(--kz-color-text-faint);
        font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1;
    }
    .scan__nav {
        display: inline-flex; gap: 10px;
    }

    /* shared button vocab */
    .btn {
        font: inherit; font-size: 13px; font-weight: 500;
        border-radius: 8px; padding: 9px 16px;
        border: 1px solid transparent; cursor: pointer; line-height: 1.2;
        letter-spacing: -0.002em; white-space: nowrap;
    }
    .btn-primary { background: var(--kz-color-text); color: #fff; border-color: var(--kz-color-text); }
    .btn-primary:hover { background: #000; }
    .btn-primary[disabled] {
        background: var(--kz-color-bg-subtle); color: var(--kz-color-text-faint);
        border-color: var(--kz-color-border); cursor: not-allowed;
    }
    .btn-secondary { background: #fff; color: var(--kz-color-text-soft); border-color: var(--kz-color-border); }
    .btn-secondary:hover { background: var(--kz-color-bg-subtle); }
    .btn-ghost { background: transparent; color: var(--kz-color-text-muted); border-color: transparent; }
    .btn-ghost:hover { background: var(--kz-color-bg-subtle); color: var(--kz-color-text-soft); }

    /* =========================================================
          INTRO SCREEN  (.scan__intro)
          ========================================================= */
    .scan__intro-eyebrow {
        font-family: var(--kz-font-body);
        font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--kz-color-text-muted); font-weight: 600; margin-bottom: 14px;
        display: inline-flex; gap: 8px; align-items: center;
    }
    .scan__intro-eyebrow .swatch {
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--kz-color-series-a);
    }
    .scan__intro-eyebrow.is-job .swatch { background: var(--kz-color-series-b); }
    .scan__intro-eyebrow.is-experience .swatch { background: var(--kz-color-series-c); }
    .scan__intro-eyebrow.is-ipip .swatch { background: var(--kz-color-text); }

    .scan__intro h1 { margin: 0; font-size: 38px; }
    .scan__intro-lead {
        margin: 18px 0 0;
        color: var(--kz-color-text-muted);
        font-size: 16.5px;
        line-height: 1.55;
        max-width: 60ch;
    }
    .scan__intro-meta {
        display: inline-flex; gap: 20px;
        margin-top: 22px;
        padding: 14px 18px;
        border: 1px solid var(--kz-color-border);
        border-radius: 12px;
        background: var(--kz-color-bg-subtle);
        font-size: 13px;
        color: var(--kz-color-text-soft);
    }
    .scan__intro-meta .item { display: inline-flex; gap: 8px; align-items: center; }
    .scan__intro-meta .item b { font-weight: 600; }
    .scan__intro-meta .sep { color: var(--kz-color-text-faint); }

    .scan__intro-bullets {
        margin: 28px 0 0;
        padding: 0;
        list-style: none;
        display: flex; flex-direction: column; gap: 16px;
    }
    .scan__intro-bullet {
        display: grid;
        grid-template-columns: 22px 1fr;
        gap: 14px;
        align-items: start;
    }
    .scan__intro-bullet .b-num {
        font-family: var(--kz-font-display);
        font-size: 16px; font-weight: 400;
        color: var(--kz-color-text-faint);
        font-variant-numeric: tabular-nums;
        line-height: 1.5;
        border-right: 1px solid var(--kz-color-border);
        padding-right: 10px;
        text-align: right;
    }
    .scan__intro-bullet .b-text {
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--kz-color-text-soft);
    }
    .scan__intro-bullet .b-text strong { color: var(--kz-color-text); font-weight: 600; }

    .scan__intro-note {
        margin-top: 24px;
        font-size: 12.5px;
        color: var(--kz-color-text-muted);
        font-style: italic;
        font-family: var(--kz-font-display);
    }

    /* =========================================================
          PRIME SCREEN
          ========================================================= */
    .scan__prime { text-align: left; }
    .scan__prime h2 {
        font-family: var(--kz-font-display); font-weight: 400;
        font-size: 30px; letter-spacing: -0.02em; line-height: 1.15;
        margin: 0;
    }
    .scan__prime-body {
        margin-top: 22px;
        font-size: 16.5px;
        line-height: 1.65;
        color: var(--kz-color-text-soft);
        max-width: 58ch;
    }
    .scan__prime-emphasis {
        margin-top: 22px;
        padding: 16px 20px;
        border-left: 3px solid var(--kz-color-series-a);
        background: var(--kz-color-bg-subtle);
        border-radius: 0 8px 8px 0;
        font-family: var(--kz-font-display);
        font-style: italic;
        font-size: 17px;
        line-height: 1.5;
        color: var(--kz-color-text);
    }
    .scan__prime-emphasis.is-job { border-left-color: var(--kz-color-series-b); }
    .scan__prime-emphasis.is-experience { border-left-color: var(--kz-color-series-c); }

    .scan__prime-fields {
        margin-top: 28px;
        display: grid; gap: 16px;
        max-width: 480px;
    }
    .scan__field { display: flex; flex-direction: column; gap: 6px; }
    .scan__field-label {
        font-size: 12.5px; font-weight: 500; color: var(--kz-color-text-soft);
    }
    .scan__field-label .req { color: var(--kz-color-tr); margin-left: 4px; }
    .scan__field-input {
        font: inherit; font-size: 14px;
        padding: 10px 12px;
        border: 1px solid var(--kz-color-border);
        border-radius: 8px;
        background: #fff;
        color: var(--kz-color-text);
    }
    .scan__field-input:focus {
        outline: none; border-color: var(--kz-color-series-a);
        box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }
    .scan__field-help {
        font-size: 11.5px; color: var(--kz-color-text-muted);
    }

    /* refs #21436 — optional pre-scan goal reflection */
    .scan__prime-goal { margin-top: 28px; }
    .scan__goal-input {
        resize: vertical;
        min-height: 88px;
        line-height: var(--kz-line-height);
    }
    .scan__prime-goal-note {
        font-size: 11.5px;
        color: var(--kz-color-text-muted);
        margin: 6px 0 0;
    }

    /* =========================================================
          WORK VALUES (forced choice) — .scan__wv
          ========================================================= */
    .scan__question-stem {
        font-family: var(--kz-font-display);
        font-weight: 400;
        font-size: 28px;
        line-height: 1.25;
        letter-spacing: -0.015em;
        color: var(--kz-color-text);
        margin: 0;
        text-wrap: pretty;
    }
    .scan__perspective {
        font-size: 12.5px;
        color: var(--kz-color-text-muted);
        margin-top: 10px;
        letter-spacing: 0.01em;
        font-style: italic;
        font-family: var(--kz-font-display);
    }
    .scan__wv-options {
        list-style: none;
        margin: 28px 0 0; padding: 0;
        display: flex; flex-direction: column; gap: 10px;
    }
    .scan__option {
        display: grid;
        grid-template-columns: 36px 1fr auto;
        gap: 14px;
        align-items: center;
        width: 100%;
        text-align: left;
        background: #fff;
        border: 1px solid var(--kz-color-border);
        border-radius: 12px;
        padding: 18px 18px 18px 14px;
        cursor: pointer;
        font: inherit;
        color: var(--kz-color-text-soft);
        font-size: 15.5px;
        line-height: 1.45;
        transition: border-color .15s ease, background .15s ease, transform .12s ease;
    }
    .scan__option strong { font-weight: 600; color: var(--kz-color-text); }
    .scan__option:hover {
        border-color: var(--kz-color-text-soft);
        background: #fdfdfc;
    }
    .scan__option:focus-visible {
        outline: none;
        border-color: var(--kz-color-series-a);
        box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }
    .scan__option.is-selected {
        border-color: var(--kz-color-text);
        background: var(--kz-color-text);
        color: #fff;
        animation: scanOptionConfirm 240ms ease-out;
    }
    .scan__option.is-selected strong { color: #fff; }
    .scan__option-key {
        width: 28px; height: 28px;
        display: inline-grid; place-items: center;
        border: 1px solid var(--kz-color-border);
        border-bottom-width: 2px;
        border-radius: 6px;
        font-size: 12.5px; font-weight: 600;
        color: var(--kz-color-text-muted);
        background: #fff;
        font-variant-numeric: tabular-nums;
    }
    .scan__option.is-selected .scan__option-key {
        background: #fff; color: var(--kz-color-text); border-color: #fff;
    }
    .scan__option-arrow {
        color: var(--kz-color-text-faint);
        font-size: 18px;
        line-height: 1;
        opacity: 0;
        transition: opacity .15s ease, transform .15s ease;
    }
    .scan__option:hover .scan__option-arrow {
        opacity: 1;
    }
    /* When selected, replace → with a green ✓ that pops in to confirm the answer
       was recorded before the auto-advance fires. */
    .scan__option.is-selected .scan__option-arrow {
        opacity: 1;
        color: transparent;
        position: relative;
    }
    .scan__option.is-selected .scan__option-arrow::after {
        content: "✓";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--kz-color-match);
        font-size: 22px;
        font-weight: 800;
        animation: scanOptionCheck 280ms cubic-bezier(.34, 1.56, .64, 1);
    }

    @keyframes scanOptionConfirm {
        0%   { transform: scale(1); }
        45%  { transform: scale(1.015); }
        100% { transform: scale(1); }
    }
    @keyframes scanOptionCheck {
        0%   { transform: scale(0.4); opacity: 0; }
        60%  { transform: scale(1.2); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
    }

    /* Question slide transition — the JS adds .scan__question--exit /
       --enter-back classes; without these @keyframes the card swap was
       silent and the user couldn't tell auto-advance had fired. */
    @keyframes scanQuestionExit {
        0%   { opacity: 1; transform: translateX(0); }
        100% { opacity: 0; transform: translateX(-32px); }
    }
    @keyframes scanQuestionExitBack {
        0%   { opacity: 1; transform: translateX(0); }
        100% { opacity: 0; transform: translateX(32px); }
    }
    @keyframes scanQuestionEnter {
        0%   { opacity: 0; transform: translateX(32px); }
        100% { opacity: 1; transform: translateX(0); }
    }
    @keyframes scanQuestionEnterBack {
        0%   { opacity: 0; transform: translateX(-32px); }
        100% { opacity: 1; transform: translateX(0); }
    }
    .scan__question {
        animation: scanQuestionEnter 220ms ease-out;
    }
    .scan__question--enter-back {
        animation: scanQuestionEnterBack 220ms ease-out;
    }
    .scan__question--exit {
        animation: scanQuestionExit 220ms ease-in forwards;
    }
    .scan__question--exit-back {
        animation: scanQuestionExitBack 220ms ease-in forwards;
    }

    @media (prefers-reduced-motion: reduce) {
        .scan__option.is-selected,
        .scan__option.is-selected .scan__option-arrow::after,
        .scan__question,
        .scan__question--enter-back,
        .scan__question--exit,
        .scan__question--exit-back {
            animation: none !important;
        }
    }

    /* =========================================================
          TRANSITION SCREEN — between WV and TR
          ========================================================= */
    .scan__transition {
        text-align: left;
        padding-top: 8px;
    }
    .scan__check {
        width: 48px; height: 48px;
        border-radius: 50%;
        background: var(--kz-color-match-soft);
        color: var(--kz-color-match);
        display: inline-grid; place-items: center;
        margin-bottom: 22px;
        border: 1px solid #bbf7d0;
    }
    .scan__check svg { width: 22px; height: 22px; }
    .scan__transition h2 {
        font-family: var(--kz-font-display); font-weight: 400;
        font-size: 32px; letter-spacing: -0.02em; line-height: 1.15;
        margin: 0;
    }
    .scan__transition-summary {
        margin-top: 16px;
        font-size: 16px; color: var(--kz-color-text-soft); line-height: 1.6;
        max-width: 56ch;
    }
    .scan__transition-next {
        margin-top: 18px;
        font-size: 15px; color: var(--kz-color-text-muted); line-height: 1.6;
        max-width: 56ch;
    }
    .scan__transition-next strong { color: var(--kz-color-text); font-weight: 600; }

    /* =========================================================
          TEAM ROLES / IPIP — Likert groups (.scan__likert)
          ========================================================= */
    .scan__dim-header {
        display: flex; align-items: baseline; gap: 14px;
        margin-bottom: 22px;
        padding-bottom: 18px;
        border-bottom: 1px solid var(--kz-color-border);
    }
    .scan__dim-eyebrow {
        font-family: var(--kz-font-body);
        font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--kz-color-text-muted); font-weight: 600;
        flex-shrink: 0;
    }
    .scan__dim-name {
        display: inline-block;
        background: var(--kz-color-tag-bg);
        color: var(--kz-color-tr);
        border: 1px solid #fed7aa;
        border-radius: 999px;
        padding: 4px 12px;
        font-size: 13px;
        font-weight: 500;
        flex-shrink: 0;
    }
    .scan__dim-desc {
        font-size: 14px;
        color: var(--kz-color-text-muted);
        line-height: 1.55;
        margin: 0;
    }

    .scan__likert-list {
        list-style: none; margin: 0; padding: 0;
        display: flex; flex-direction: column;
        gap: 4px;
    }
    .scan__likert-item {
        padding: 6px 0 8px;
        border-bottom: 1px solid var(--kz-color-bg-subtle);
    }
    .scan__likert-item:last-child { border-bottom: 0; }

    .scan__likert-statement {
        font-size: 14.5px;
        line-height: 1.5;
        color: var(--kz-color-text-soft);
        margin: 0 0 6px;
        text-wrap: pretty;
    }
    .scan__likert-statement .stem-grey { color: var(--kz-color-text-muted); }
    .scan__likert-statement .stem-bold { color: var(--kz-color-text); font-weight: 600; }

    .scan__likert-row {
        display: flex; align-items: stretch; gap: 8px;
    }
    .scan__likert-btn {
        flex: 1;
        background: #fff;
        border: 1px solid var(--kz-color-border);
        border-radius: 10px;
        padding: 4px 8px;
        font: inherit;
        font-size: 13px;
        font-weight: 500;
        color: var(--kz-color-text-soft);
        cursor: pointer;
        line-height: 1.25;
        text-align: center;
        transition: border-color .12s ease, background .12s ease, color .12s ease;
        display: flex; flex-direction: column; gap: 4px;
        align-items: center; justify-content: center;
        min-height: 38px;
    }
    .scan__likert-btn:hover {
        border-color: var(--kz-color-text-soft);
        background: #fdfdfc;
    }
    .scan__likert-btn:focus-visible {
        outline: none;
        border-color: var(--kz-color-series-a);
        box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }
    .scan__likert-btn.is-selected {
        background: var(--kz-color-text);
        color: #fff;
        border-color: var(--kz-color-text);
    }
    .scan__likert-btn .num {
        font-family: var(--kz-font-body);
        font-size: 11px;
        font-weight: 600;
        color: var(--kz-color-text-muted);
        letter-spacing: 0.04em;
    }
    .scan__likert-btn.is-selected .num { color: rgba(255,255,255,0.7); }
    .scan__likert-btn.is-numeric .num {
        font-size: 16px;
        color: var(--kz-color-text);
        font-weight: 500;
    }
    .scan__likert-btn.is-selected.is-numeric .num { color: #fff; }
    .scan__likert-btn .word {
        font-size: 12px;
        font-weight: 500;
    }

    .scan__likert-anchors {
        display: flex; justify-content: space-between;
        margin-top: 3px;
        font-size: 10.5px;
        color: var(--kz-color-text-muted);
        letter-spacing: 0.02em;
    }

    /* IPIP-specific tighter density */
    .scan__likert--ipip .scan__likert-item {
        padding: 14px 0 16px;
    }
    .scan__likert--ipip .scan__likert-statement { font-size: 15px; margin-bottom: 10px; }

    /* IPIP fatigue helpers */
    .scan__pace {
        margin-top: 6px;
        padding: 10px 14px;
        background: var(--kz-color-bg-subtle);
        border: 1px solid var(--kz-color-border);
        border-radius: 10px;
        font-size: 12.5px;
        color: var(--kz-color-text-muted);
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 22px;
    }
    .scan__pace b { color: var(--kz-color-text-soft); font-weight: 600; }
    .scan__pace-bullet { color: var(--kz-color-text-faint); }

    /* =========================================================
          COMPLETION
          ========================================================= */
    .scan__complete { text-align: center; padding-top: 32px; }
    .scan__complete .scan__check {
        width: 64px; height: 64px;
        margin: 0 auto 24px;
    }
    .scan__complete .scan__check svg { width: 28px; height: 28px; }
    .scan__complete h1 {
        font-family: var(--kz-font-display); font-weight: 400;
        font-size: 36px; letter-spacing: -0.02em; line-height: 1.15;
        margin: 0;
    }
    .scan__complete-body {
        margin: 18px auto 0;
        font-size: 16px; color: var(--kz-color-text-soft); line-height: 1.6;
        max-width: 52ch;
    }
    .scan__complete-privacy {
        margin: 18px auto 0;
        font-size: 13.5px; color: var(--kz-color-text-muted); line-height: 1.6;
        max-width: 50ch;
        font-family: var(--kz-font-display); font-style: italic;
    }
    .scan__complete-actions {
        margin-top: 32px;
        display: inline-flex; gap: 12px;
    }

    /* Anonymous-flow completion: account creation is the reward.
          The whole frame becomes one continuous moment — celebration heading,
          then signup as a card directly underneath. No "Confirm" button —
          creating the account IS the confirm. */
    .scan__complete--signup { padding-top: 24px; }
    .scan__complete--signup .scan__check {
        width: 56px; height: 56px;
        background: color-mix(in oklab, var(--kz-color-match) 18%, transparent);
        color: var(--kz-color-match);
        border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        margin-bottom: 18px;
    }
    .scan__complete--signup .scan__check svg { width: 24px; height: 24px; }
    .scan__complete-eyebrow {
        margin: 0 0 10px;
        font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--kz-color-match); font-weight: 600;
    }
    .scan__complete--signup h1 {
        font-size: 38px; line-height: 1.1;
    }
    .scan__complete--signup .scan__complete-body {
        margin: 14px auto 0;
        font-size: 15px;
    }

    .scan__signup-card {
        margin: 32px auto 0;
        max-width: 420px;
        background: #fff;
        border: 1px solid var(--kz-color-border);
        border-radius: 14px;
        padding: 24px 24px 22px;
        text-align: left;
        box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 12px 32px -16px rgba(15,15,12,0.12);
    }
    .scan__signup-card-head {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--kz-color-bg-subtle);
    }
    .scan__signup-eyebrow {
        font-family: var(--kz-font-display);
        font-size: 17px;
        color: var(--kz-color-text);
        font-weight: 500;
    }
    .scan__signup-meta {
        font-size: 11px; color: var(--kz-color-text-muted);
        text-align: right;
        line-height: 1.4;
        max-width: 18ch;
    }

    .scan__signup-form {
        display: flex; flex-direction: column; gap: 12px;
    }
    .scan__signup-field {
        display: flex; flex-direction: column; gap: 5px;
    }
    .scan__signup-field .lbl {
        font-size: 12px; color: var(--kz-color-text-muted); font-weight: 500;
        display: flex; justify-content: space-between; align-items: baseline;
    }
    .scan__signup-field .lbl .hint { font-weight: 400; color: var(--kz-color-text-muted); opacity: 0.7; font-size: 11px; }
    .scan__signup-field input {
        font: inherit; font-size: 14px;
        padding: 10px 12px;
        background: var(--kz-color-bg);
        border: 1px solid var(--kz-color-border);
        border-radius: 8px;
        color: var(--kz-color-text);
        transition: border-color 120ms ease, background 120ms ease;
    }
    .scan__signup-field input:focus {
        outline: none;
        border-color: var(--kz-color-text-soft);
        background: #fff;
    }
    .scan__signup-field input::placeholder { color: var(--kz-color-text-muted); opacity: 0.55; }

    .scan__signup-sso-divider {
        display: flex; align-items: center; gap: 10px;
        margin: 6px 0 2px;
        color: var(--kz-color-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
    }
    .scan__signup-sso-divider::before,
    .scan__signup-sso-divider::after {
        content: ""; flex: 1; height: 1px; background: var(--kz-color-border);
    }
    .scan__signup-sso { display: flex; gap: 8px; }
    .scan__sso-btn {
        flex: 1;
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        font: inherit; font-size: 13px; font-weight: 500;
        padding: 9px 12px;
        background: #fff;
        border: 1px solid var(--kz-color-border);
        color: var(--kz-color-text);
        border-radius: 8px;
        cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease;
    }
    .scan__sso-btn:hover { background: var(--kz-color-bg-subtle); border-color: var(--kz-color-text-soft); }

    .scan__signup-submit {
        margin-top: 8px;
        width: 100%;
        justify-content: center;
        padding: 12px 14px;
        font-size: 14px;
    }

    .scan__signup-fineprint {
        margin: 6px 0 0;
        font-size: 11px; color: var(--kz-color-text-muted); line-height: 1.5;
        text-align: center;
    }
    .scan__signup-fineprint a { color: var(--kz-color-text-soft); text-decoration: underline; text-underline-offset: 2px; }

    .scan__complete-already {
        margin: 22px auto 0;
        font-size: 13px; color: var(--kz-color-text-muted);
    }
    .scan__complete-already a {
        color: var(--kz-color-text-soft); text-decoration: underline; text-underline-offset: 2px;
        font-weight: 500;
    }

    /* =========================================================
          SAVE INDICATOR  (.scan__save)
          idle | saving | saved | error
          ========================================================= */
    .scan__save {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 11.5px; color: var(--kz-color-text-muted);
        padding: 4px 10px; border-radius: 999px;
        background: transparent;
        transition: background .2s, color .2s;
    }
    .scan__save .dot {
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--kz-color-text-faint);
    }
    .scan__save.is-saving .dot {
        background: var(--kz-color-series-a);
        animation: scanPulse 1.1s ease-in-out infinite;
    }
    .scan__save.is-saved .dot { background: var(--kz-color-match); }
    .scan__save.is-error {
        background: var(--kz-color-mismatch-soft); color: var(--kz-color-mismatch);
        border: 1px solid var(--kz-color-mismatch);
        padding: 4px 10px;
    }
    .scan__save.is-error .dot { background: var(--kz-color-mismatch); }
    @keyframes scanPulse {
        0%,100% { opacity: 0.4; transform: scale(0.8); }
        50%     { opacity: 1;   transform: scale(1.1); }
    }

    /* save-failure modal — only when user tries to advance */
    .scan__save-modal {
        position: fixed; inset: 0;
        background: rgba(28,25,23,0.45);
        display: flex; align-items: center; justify-content: center;
        padding: 24px;
        z-index: 50;
    }
    .scan__save-modal-card {
        background: #fff;
        border: 1px solid var(--kz-color-border);
        border-radius: 14px;
        padding: 28px 28px 24px;
        max-width: 440px;
        width: 100%;
        box-shadow: 0 18px 40px rgba(28,25,23,0.18);
    }
    .scan__save-modal-card h3 {
        margin: 0;
        font-family: var(--kz-font-display);
        font-weight: 400;
        font-size: 22px;
        letter-spacing: -0.01em;
    }
    .scan__save-modal-card p {
        margin: 12px 0 0;
        color: var(--kz-color-text-muted);
        font-size: 14px;
        line-height: 1.55;
    }
    .scan__save-modal-actions {
        margin-top: 20px;
        display: flex; gap: 10px; justify-content: flex-end;
    }


    /* responsive @media — likert reflows on phone */
    /* =========================================================
          RESPONSIVE — likert reflows vertically on phone
          ========================================================= */
    @media (max-width: 720px) {
        .app { grid-template-columns: 1fr; }
        aside.sidebar { display: none; }
        .scan__chrome-top, .scan__chrome-bot { padding-left: 20px; padding-right: 20px; }
        .scan__stage { padding: 32px 20px 96px; }
        .scan__likert-row { flex-direction: column; gap: 6px; }
        .scan__likert-btn { flex-direction: row; justify-content: flex-start; padding: 12px 14px; min-height: 44px; }
        .scan__likert-btn .num { width: 22px; }
        .scan__likert-btn .word { text-align: left; }
        .scan__likert-anchors { display: none; }
        .scan__intro h1 { font-size: 30px; }
        .scan__option { font-size: 14.5px; padding: 14px; }
        .gallery-frame { margin: 0 12px 24px; }
        .gallery-marker { padding: 0 12px; }
        .handoff-intro { padding: 32px 20px 8px; }
    }


/* ═══════════════════════════════════════════════════════════════
   SCAN — Kazi-specific additions on top of the handoff (G.5.4)
   ═══════════════════════════════════════════════════════════════ */

/* Logged-in chrome bar — replaces the design's anonymous brand bar
   (.scan-shell--anonymous / .scan-anon-bar). Used while a user is
   taking a scan inside the authenticated app. The design's full
   anonymous flow (no-account-needed start, Save progress link,
   signup-at-completion) is parked under #21202 for follow-up. */
.scan-shell--app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--kz-color-bg);
}

.scan-app-bar {
    height: 56px;
    border-bottom: 1px solid var(--kz-color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: var(--kz-color-surface);
    position: sticky;
    top: 0;
    z-index: 6;
}
.scan-app-bar .brand {
    font-family: var(--kz-font-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--kz-color-text);
    text-decoration: none;
    padding: 0;
}
.scan-app-bar .brand .dot { color: var(--kz-color-series-a); }

.scan-app-bar-right {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.scan-app-bar-right .lang-switch {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--kz-color-border);
    border-radius: 999px;
    padding: 2px;
}
.scan-app-bar-right .lang-switch a,
.scan-app-bar-right .lang-switch button {
    background: none;
    border: none;
    padding: 4px 10px;
    font: inherit;
    font-size: 11.5px;
    color: var(--kz-color-text-muted);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
}
.scan-app-bar-right .lang-switch a.on,
.scan-app-bar-right .lang-switch button.on {
    background: var(--kz-color-text);
    color: #fff;
}
/* refs #21310 — "stay on this question" opt-in, sat next to the language
   toggle.  Sizing mirrors the adjacent .lang-switch (11.5px, literal micro
   values) so the two controls read as one cluster; colours are tokenised. */
.scan-app-bar-right .scan__lang-stay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.2;
    color: var(--kz-color-text-muted);
    cursor: pointer;
    user-select: none;
}
.scan-app-bar-right .scan__lang-stay:hover {
    color: var(--kz-color-text);
}
.scan-app-bar-right .scan__lang-stay-input {
    width: 13px;
    height: 13px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--kz-color-text);
}
.scan-app-bar-right .scan__lang-stay-text {
    white-space: nowrap;
}
.scan-app-bar-right .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--kz-color-text);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Welcome-back state — shown when resuming a partially-completed
   scan. Replaces the design's resume-banner toast pattern with a
   full-screen landing that frames where the user left off and
   offers Continue or Start over. */
.scan__welcome {
    padding: 32px 0 16px;
}
.scan__welcome-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    background: var(--kz-color-bg-subtle);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 12.5px;
    color: var(--kz-color-text-soft);
    margin: 16px 0 22px;
}
.scan__welcome-meta b {
    color: var(--kz-color-text);
    font-weight: 600;
}
.scan__welcome-meta .sep {
    color: var(--kz-color-text-faint);
}
.scan__welcome-next {
    border-left: 2px solid var(--kz-color-series-a);
    padding: 8px 0 8px 16px;
    color: var(--kz-color-text-soft);
    font-size: 14.5px;
    margin: 8px 0 24px;
}
.scan__welcome-next b { color: var(--kz-color-text); }
.scan__welcome-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
}
.scan__welcome-startover {
    background: none;
    border: none;
    color: var(--kz-color-text-muted);
    font: inherit;
    font-size: 13px;
    padding: 10px 14px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.scan__welcome-startover:hover {
    color: var(--kz-color-text-soft);
}

/* Chrome positioning fix — drop the design's `min-height: 100vh`
   on .scan so the bottom chrome flows close to the content
   instead of getting pushed to the viewport bottom on short
   stages. Sticky positioning still kicks in when content
   actually fills the viewport. */
.scan {
    min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE REFLECTIONS (#21437) — agreement slider on each dimension
   card, insightfulness slider, fixed bottom "Profile match" tracker.
   Injected by static/profile_reflections.js (owner-only).
   ═══════════════════════════════════════════════════════════════ */

.dim-agree {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--kz-color-border);
}
/* Anchor words flank the slider on one row (#21476). On narrow screens
   they drop below it (see media query) so the track never gets squeezed. */
.dim-agree__control {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 0.85rem;
}
.dim-agree__end {
    font-size: 0.72rem;
    color: var(--kz-color-text-muted);
    white-space: nowrap;
}
.dim-agree__end--high { text-align: right; }
.dim-agree__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--kz-color-series-a) 0%,
        var(--kz-color-series-a) var(--fill, 44%),
        rgba(0, 0, 0, 0.10) var(--fill, 44%),
        rgba(0, 0, 0, 0.10) 100%);
    cursor: pointer;
    margin: 0;
    outline-offset: 4px;
}
.dim-agree__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--kz-color-surface);
    border: 2px solid var(--kz-color-series-a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    cursor: grab;
}
.dim-agree__range:active::-webkit-slider-thumb { cursor: grabbing; }
.dim-agree__range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--kz-color-surface);
    border: 2px solid var(--kz-color-series-a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    cursor: grab;
}
.dim-agree__range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: transparent;
}
/* Narrow screens: slider on its own row, anchor words below it so the
   track keeps full width instead of being squeezed between them. */
@media (max-width: 560px) {
    .dim-agree__control {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "slider slider" "low high";
        row-gap: 0.5rem;
    }
    .dim-agree__range { grid-area: slider; }
    .dim-agree__end--low { grid-area: low; }
    .dim-agree__end--high { grid-area: high; }
}
.dim-agree__reason[hidden] { display: none; }
.dim-agree__reason { margin-top: 0.9rem; }
.dim-agree__reason-label {
    display: block;
    font-size: 0.8rem;
    color: var(--kz-color-text);
    margin-bottom: 0.4rem;
}
.dim-agree__reason-input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--kz-color-border-heavy);
    border-radius: 8px;
    resize: vertical;
    color: var(--kz-color-text);
    background: var(--kz-color-surface);
}
.dim-agree__reason-input:focus {
    outline: none;
    border-color: var(--kz-color-series-a);
}

/* Quiet "+ add a note" affordance — shown instead of the open box for
   agree/neutral answers so the page stays short (#21476). */
.dim-agree__addnote {
    margin-top: 0.7rem;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--kz-color-text-muted);
    cursor: pointer;
}
.dim-agree__addnote[hidden] { display: none; }
.dim-agree__addnote:hover { color: var(--kz-color-text); text-decoration: underline; }

/* Untouched slider — grey track + pulsing thumb until moved */
@keyframes kz-thumb-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(61, 124, 140, 0.45); }
    70%  { box-shadow: 0 0 0 9px rgba(61, 124, 140, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 124, 140, 0); }
}
.dim-agree__range.is-untouched {
    background: rgba(0, 0, 0, 0.10);
}
.dim-agree__range.is-untouched::-webkit-slider-thumb {
    background: var(--kz-color-series-a);
    border-color: var(--kz-color-series-a);
    animation: kz-thumb-pulse 1.5s ease-out infinite;
}
.dim-agree__range.is-untouched::-moz-range-thumb {
    background: var(--kz-color-series-a);
    border-color: var(--kz-color-series-a);
    animation: kz-thumb-pulse 1.5s ease-out infinite;
}

/* Bottom progress tracker — one clickable segment per slider */
.wrap.has-reflect-tracker { padding-bottom: 110px; }

.progress-tracker {
    position: fixed;
    left: var(--kz-sidebar-width);
    right: 0;
    bottom: 0;
    z-index: 900;
    background: var(--kz-color-surface);
    border-top: 1px solid var(--kz-color-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    /* 56px sides = .content padding, so the inner block lines up with
       the page's content column (left-aligned, not centered). */
    padding: 0.7rem 56px 0.85rem;
}
.progress-tracker[hidden] { display: none; }
.progress-tracker__inner {
    /* .content is max-width 1176px border-box with 56px side padding,
       so the page's content column is 1064px — mirror it exactly. */
    max-width: calc(1176px - 2 * 56px);
    margin: 0;
}
.progress-tracker__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.progress-tracker__meta-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.progress-tracker__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--kz-color-border-heavy);
    border-radius: 6px;
    background: var(--kz-color-surface);
    color: var(--kz-color-text-muted);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.progress-tracker__toggle:hover {
    background: var(--kz-color-surface-sunken, rgba(0, 0, 0, 0.04));
    color: var(--kz-color-text);
}
.progress-tracker__title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
}
.progress-tracker__count {
    font-size: 0.78rem;
    color: var(--kz-color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Overall "feels right" % as a blue badge (#21476). The pill also fills
   left-to-right in the dimension blue to the % level — the same colour
   the 14 segments use — so the score reads at a glance without a
   separate label. --match-fill is set by profile_reflections.js. Navy
   text stays readable over both the fill and the light track. */
.progress-tracker__match {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--kz-color-series-a) 0 var(--match-fill, 0%),
        var(--kz-color-series-a-soft) var(--match-fill, 0%) 100%
    );
    color: #08335c;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.progress-tracker__match[hidden] { display: none; }
.progress-tracker__segments {
    display: flex;
    gap: 4px;
    height: 26px;
}
.progress-seg {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.09);
    overflow: visible;
    cursor: pointer;
    transition: background 0.2s ease;
}
.progress-seg:hover { background: rgba(0, 0, 0, 0.16); }
.progress-seg.is-filled { background: rgba(61, 124, 140, 0.16); }
.progress-seg.is-filled:hover { background: rgba(61, 124, 140, 0.26); }
.progress-seg__fill {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 0;
    border-radius: 4px;
    background: var(--kz-color-series-a);
    transition: height 0.25s ease;
}
.progress-seg__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--kz-color-text-soft);
    color: var(--kz-color-text-inverse);
    font-size: 0.7rem;
    padding: 3px 7px;
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1;
}
.progress-seg:hover .progress-seg__tip { opacity: 1; }

/* Collapsed pill — auto once complete, or on manual minimise (#21476).
   Floats bottom-right; the whole pill re-expands the bar on click. */
.progress-tracker--collapsed {
    left: auto;
    right: 24px;
    bottom: 20px;
    width: auto;
    padding: 0.5rem 0.7rem 0.5rem 0.9rem;
    border: 1px solid var(--kz-color-border);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    cursor: pointer;
}
.progress-tracker--collapsed .progress-tracker__inner { max-width: none; }
.progress-tracker--collapsed .progress-tracker__meta { margin-bottom: 0; }
.progress-tracker--collapsed .progress-tracker__title,
.progress-tracker--collapsed .progress-tracker__segments { display: none; }
.progress-tracker--collapsed .progress-tracker__count { font-size: 0.8rem; }

/* Once collapsed to a pill, the page no longer needs the tall reserve. */
body.reflect-tracker-collapsed .wrap.has-reflect-tracker { padding-bottom: 32px; }

/* Keep the floating "back to top" clear of the reflection tracker so the
   two don't overlap (#21476): lift it above the full bar, and just above
   the pill when collapsed. */
body.reflect-tracker-active .back-to-top {
    bottom: calc(var(--kz-space-5) + 84px);
}
body.reflect-tracker-active.reflect-tracker-collapsed .back-to-top {
    bottom: calc(var(--kz-space-5) + 44px);
}

@media (max-width: 720px) {
    .progress-tracker { left: 0; padding-inline: 1.5rem; }
    .progress-tracker--collapsed { left: auto; right: 16px; padding-inline: 0.7rem 0.9rem; }
}