/* ==============================================================
   AI-Native Self Assessment — page-specific styles.
   Layers on top of marketing.css; inherits its tokens (--ink,
   --panel, --hairline, --blue, --terra, --sans, --mono).
   ============================================================== */

.assessment-page main {
    position: relative;
    z-index: 2;
}

/* ---------- Hero ---------- */
.assess-hero {
    max-width: 820px;
    margin: 0 auto;
    padding: 120px 24px 56px;
    text-align: center;
}

.assess-title {
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-top: 18px;
}

.assess-lede {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--ink-soft);
    margin-top: 16px;
}

.assess-intro {
    margin-top: 28px;
    text-align: left;
    color: var(--ink-soft);
}
.assess-intro p { margin-bottom: 14px; }
.assess-intro p:last-child { margin-bottom: 0; }
.assess-intro strong { color: var(--ink); font-weight: 600; }

.assess-hero .hero-actions {
    margin-top: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.assess-copy-note {
    min-height: 1.4em;
    margin-top: 14px;
    font-size: 0.9rem;
    color: var(--terra);
}

/* ---------- Scoreboard (sticky while answering) ---------- */
.assess-scoreboard {
    position: sticky;
    top: 12px;
    z-index: 20;
    margin: 0 auto 28px;
    max-width: 880px;
}

.assess-scoreboard-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 12px 20px;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    background: rgba(7, 7, 20, 0.88);
    backdrop-filter: blur(10px);
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.assess-score-total strong,
.assess-score-label strong {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.btn-sm {
    padding: 5px 14px;
    font-size: 0.82rem;
}

/* ---------- The rubric / form ---------- */
.assess-form {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.assess-section-label {
    margin-top: 26px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--terra);
}
.assess-section-label:first-child { margin-top: 0; }

.assess-q {
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: var(--panel);
    padding: 22px 24px;
    transition: border-color 160ms ease, background 160ms ease;
}
.assess-q[data-answered="true"] {
    border-color: rgba(59, 130, 246, 0.45);
    background: var(--panel-strong);
}

/* A <legend> is laid out on the fieldset's border box by default, which puts
   the question text outside the card. Floating it opts out of that special
   layout while keeping the element (and its accessible-name semantics) intact;
   the siblings below clear the float. */
.assess-q legend {
    float: left;
    width: 100%;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink);
    padding: 0;
}

.assess-q-num {
    display: inline-block;
    min-width: 1.8em;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.assess-q-note {
    clear: both;
    margin-top: 8px;
    font-size: 0.86rem;
    color: var(--ink-mute);
    font-style: italic;
}

.assess-options {
    clear: both;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assess-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 0.94rem;
    line-height: 1.5;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.assess-option:hover { background: rgba(255, 255, 255, 0.04); }
.assess-option:focus-within { border-color: var(--hairline-strong); }
.assess-option input { margin-top: 5px; accent-color: var(--blue); flex-shrink: 0; }
.assess-option input:checked ~ .assess-option-text { color: var(--ink); }

.assess-option-score {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--hairline-strong);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--mono);
    color: var(--ink-mute);
}
.assess-option input:checked ~ .assess-option-score {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

/* Progressive enhancement, fail-safe direction: radios are hidden until
   assessment.js confirms it ran (body.js-on). If the script 404s or throws,
   visitors get a clean readable rubric instead of controls that do nothing. */
.assess-option { cursor: default; }
.assess-option input { display: none; }
body.js-on .assess-option { cursor: pointer; }
body.js-on .assess-option input { display: block; }

/* ---------- Result panel ---------- */
.assess-result {
    max-width: 880px;
    /* The topnav is fixed, so a bare scrollIntoView parks the panel's first
       line underneath it — which is exactly where the "scored from your
       agent's answers" note sits on an ?a= arrival. */
    scroll-margin-top: 96px;
    margin: 30px auto 0;
    padding: 30px 28px;
    border: 1px solid rgba(59, 130, 246, 0.42);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.16), rgba(255, 255, 255, 0.02));
}

.assess-result-origin {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.86rem;
    color: var(--terra);
}

.assess-result-score {
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.assess-result-score span { font-size: 0.42em; color: var(--ink-mute); font-weight: 400; }

.assess-result-band {
    margin-top: 6px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--terra);
}

.assess-result p { margin-top: 12px; color: var(--ink-soft); }

.assess-result h3 {
    margin-top: 26px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.assess-gaps {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}
.assess-gaps li {
    padding: 14px 16px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.94rem;
    color: var(--ink-soft);
}
.assess-gaps strong { color: var(--ink); font-weight: 600; }
.assess-gaps a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(59, 130, 246, 0.4); }
.assess-gaps a:hover { color: #fff; border-bottom-color: #fff; }

.assess-result-actions {
    margin-top: 26px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.assess-share {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.assess-share-label {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-right: 2px;
}

/* ---------- Band cards ---------- */
/* One box per row (Gilad, 2026-08-29). Width matches the rubric above so the
   two stacks line up down the page. */
.band-grid {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.band-card {
    padding: 22px 20px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: var(--panel);
}
.band-card-range {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--terra);
    font-weight: 600;
    flex-shrink: 0;
    min-width: 4.5em;
}
.band-card-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.band-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}
.band-card p { margin-top: 10px; font-size: 0.92rem; color: var(--ink-soft); }
.band-card .band-next {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hairline);
    font-size: 0.9rem;
    color: var(--ink-mute);
}
.band-card .band-next strong { color: var(--ink-soft); font-weight: 600; }

.assess-closing {
    max-width: 720px;
    margin: 30px auto 0;
    text-align: center;
    font-size: 0.94rem;
    color: var(--ink-mute);
}

.assess-updated {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--ink-faint);
}

@media (max-width: 620px) {
    .assess-hero { padding: 96px 18px 40px; }
    .assess-q { padding: 18px 16px; }
    .assess-scoreboard-inner { gap: 14px; padding: 10px 14px; font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .assess-q, .assess-option { transition: none; }
}