/* Assessment page — "The Report" design. Requires site.css for tokens and shared components.
   Markup comes from lib/render-assessment.js; behaviour from site/js/assess.js. */

/* ---------- Header variant ---------- */
.page-assess .site-header .container { gap: 1.25rem; }
.header-model { display: none; font: 600 16px/1.2 var(--serif); }
.contents-toggle { display: none; padding: 0.45rem 0.55rem; }

.assess-progress .container { display: none; }
.progress-track { height: 2px; background: transparent; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.25s ease; }

/* ---------- Intro ---------- */
.model-intro {
    display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 3rem;
    align-items: end;
    padding: 3.25rem 0 2.25rem;
}
.model-title {
    font: 400 60px/1.04 var(--serif);
    letter-spacing: -0.015em;
    margin: 1rem 0 1rem;
    text-wrap: balance;
}
.model-title-sub { display: block; font-size: 22px; line-height: 1.4; color: var(--muted); letter-spacing: 0; margin-top: 0.35rem; }
.model-lede { font: 400 20px/1.55 var(--serif); max-width: 44ch; }
.model-meta {
    list-style: none;
    border-left: 1px solid var(--rule);
    padding-left: 1.25rem;
    font-size: 14px; line-height: 1.75; color: var(--muted);
}

/* ---------- Framework strip ---------- */
.framework {
    display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 2.5rem;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    padding: 1.6rem 0 1.5rem;
}
.fw-label { margin-bottom: 0.9rem; }
.fw-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.fw-pillar { border-top: 2px solid var(--rule-strong); padding-top: 0.6rem; }
.fw-pillar-title { font: 600 15px/1.3 var(--sans); }
.fw-pillar-sub { font: italic 400 14px/1.4 var(--serif); color: var(--muted); margin-top: 0.1rem; }
.fw-areas { list-style: none; margin-top: 0.6rem; }
.fw-areas li { border-top: 1px solid var(--rule); }
.fw-areas a { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); padding: 0.3rem 0; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.4; }
.fw-areas a:hover { color: var(--focus); }
.fw-areas .num, .contents-list .num { font: 12px var(--mono); color: var(--muted); }
.fw-levels-panel { border-left: 1px solid var(--rule); padding-left: 2rem; }
.fw-levels { list-style: none; }
.fw-levels li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; padding: 0.45rem 0; border-top: 1px solid var(--rule); }
.fw-levels li:first-child { border-top: 2px solid var(--rule-strong); }
.fw-level-n { font: 400 22px/1 var(--serif); color: var(--muted); }
.fw-levels b { display: block; font: 600 15px/1.3 var(--sans); }
.fw-level-sum { display: block; font-size: 13.5px; color: var(--muted); }

/* ---------- Three-column body ---------- */
.assess-grid {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 260px;
    gap: 3rem;
    padding-top: 2.75rem;
    padding-bottom: 4rem;
    align-items: start;
}

/* Contents (left) */
.contents { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; padding-bottom: 1rem; }
.contents-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.contents-close { display: none; }
.contents-list { list-style: none; }
.contents-list li { border-top: 1px solid var(--rule); padding: 0.55rem 0 0.6rem; }
.contents-list a { color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.35; display: block; }
.contents-list a:hover { color: var(--focus); }
.contents-list a.is-active { font-weight: 600; }
.dashes { display: flex; gap: 4px; margin-top: 0.4rem; }
.dashes i { width: 14px; height: 2px; background: var(--rule); }
.dashes i.done { background: var(--accent); }
.contents-results { border-top: 1px solid var(--rule); padding-top: 0.6rem; font-size: 14px; }

/* Questions (centre) */
.area { scroll-margin-top: 88px; }
.area + .area { margin-top: 3.5rem; }
.area-head { margin-bottom: 1.5rem; }
.area-head h2 { font: 400 32px/1.15 var(--serif); display: flex; gap: 0.7rem; align-items: baseline; }
.area-num { font: 600 20px/1 var(--serif); color: var(--focus); font-variant-numeric: lining-nums; }
.area-head > p { color: var(--muted); margin: 0.4rem 0 0 calc(20px + 1.6rem); max-width: 60ch; }
.area-head .area-progress { display: none; }

.question { border: 0; min-width: 0; margin: 0 0 2.25rem; scroll-margin-top: 100px; position: relative; padding-left: 3.25rem; }
.question legend { display: contents; }
.q-id {
    position: absolute; left: 0; top: 0.35rem;
    width: 2.75rem;
    font: 12px/1.3 var(--mono); color: var(--muted);
    word-break: break-all;
}
.q-text { display: block; font: 600 22px/1.3 var(--serif); margin-bottom: 0.45rem; text-wrap: pretty; }
.q-hint { color: var(--muted); margin-bottom: 1rem; max-width: 62ch; }

.answer-row { cursor: pointer; }
.answer-row:hover { background: color-mix(in srgb, var(--accent-tint) 55%, var(--card)); }
.answer-row.is-selected:hover { background: var(--accent-tint); }
.answer-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.answer-row:has(.answer-input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; }
.question.highlight .answer-box { box-shadow: 0 0 0 3px var(--focus); transition: box-shadow 0.3s; }

/* Score panel (right) */
.score-panel { position: sticky; top: 88px; }
.score-summary { border-top: 2px solid var(--rule-strong); padding-top: 0.75rem; }
.score-line { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.5rem; }
.score-big { font: 400 64px/1 var(--serif); letter-spacing: -0.02em; }
.score-of { font-size: 15px; color: var(--muted); }
.score-phrase { font: italic 400 18px/1.4 var(--serif); margin-top: 0.4rem; }
.drawer-toggle { display: none; }
.score-details { margin-top: 1.5rem; }
.radar { max-width: 240px; margin: 0 auto 1.25rem; }
.radar svg { width: 100%; height: auto; overflow: visible; }
.radar-grid { fill: none; stroke: var(--rule); stroke-width: 1; }
.radar-axis { stroke: var(--rule); stroke-width: 1; }
.radar-today { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 1.75; stroke-linejoin: round; }
.radar-target { fill: none; stroke: var(--focus); stroke-width: 1.25; stroke-dasharray: 4 3; }
.radar-label { font: 10px var(--mono); fill: var(--muted); }
.radar-tick { font: 9px var(--sans); fill: var(--muted); }

.label-focus { color: var(--focus); border-top: 1px solid var(--rule); padding-top: 1rem; margin-bottom: 0.6rem; }
.margin-notes { list-style: none; counter-reset: note; }
.margin-notes li { counter-increment: note; position: relative; padding-left: 1.4rem; font-size: 14px; line-height: 1.45; margin-bottom: 0.85rem; }
.margin-notes li::before { content: counter(note); position: absolute; left: 0; top: -0.1rem; font: 600 17px/1.2 var(--serif); color: var(--focus); }
.margin-notes li.empty { padding-left: 0; color: var(--muted); }
.margin-notes li.empty::before { content: none; }
.margin-notes a { color: var(--ink); text-decoration: none; }
.margin-notes a:hover { color: var(--focus); }
.note-id { font: 11.5px var(--mono); color: var(--muted); margin-right: 0.3rem; }
.note-next { display: block; color: var(--muted); font-size: 13px; }

.panel-actions { border-top: 1px solid var(--rule); padding-top: 0.9rem; margin-top: 0.5rem; font-size: 13.5px; color: var(--muted); display: flex; gap: 0.4rem; flex-wrap: wrap; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; font-size: inherit; }
.link-btn:hover { color: var(--focus); }

/* ---------- Results / report ---------- */
.results { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 3.5rem 0 3rem; scroll-margin-top: 64px; }
.report-sheet { max-width: 820px; margin: 0 auto; }
.report-ready { text-align: center; margin: -1.5rem 0 1.5rem; font-size: 14px; }
.report { background: var(--card); border: 1px solid var(--rule); padding: 3rem 3.25rem 2.75rem; }
.report-top { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--rule-strong); margin-bottom: 1.75rem; }
.report-date { font: 600 11px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.report-title { font: 400 40px/1.1 var(--serif); letter-spacing: -0.01em; }
.report-empty { font: 400 18px/1.6 var(--serif); color: var(--muted); margin-top: 1rem; max-width: 52ch; }
.report-hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 2rem; align-items: center; }
.report-score { display: flex; align-items: baseline; gap: 0.6rem; margin: 0.75rem 0 1rem; }
.report-score .score-big { font-size: 104px; }
.report-summary { font: 400 18px/1.55 var(--serif); max-width: 36ch; }
.report-summary strong { font-weight: 600; }
.report-status { font-size: 13.5px; color: var(--muted); margin-top: 0.75rem; }

.area-table { width: 100%; border-collapse: collapse; margin-top: 2.25rem; border-top: 1px solid var(--rule); }
.area-table th { font: 600 11px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0.9rem 0 0.6rem; border-bottom: 2px solid var(--rule-strong); }
.area-table td { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.area-table .col-bar { width: 34%; padding: 0 1.25rem; }
.area-table .col-score { width: 4rem; text-align: right; font: 400 26px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.area-table .col-target { width: 6.5rem; text-align: right; }
.area-table th.col-score, .area-table th.col-target { font: 600 11px/1.3 var(--sans); }
.bar-scale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: right; }
.bar-scale span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.area-name { font: 600 17px/1.3 var(--serif); display: block; }
.area-level { font: 600 11px/1.3 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.area-level.is-low { color: var(--focus); }
.area-level.is-none { color: var(--muted); }

.bar { position: relative; height: 18px; background: var(--bar-track); }
.bar::before, .bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--card); z-index: 1; }
.bar::before { left: 33.333%; }
.bar::after { left: 66.667%; }
.bar-today { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.bar-gap { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, var(--focus) 0 1.5px, transparent 1.5px 5px); opacity: 0.85; }
.bar-target { z-index: 2; position: absolute; top: -4px; bottom: -4px; width: 2.5px; background: var(--focus); transform: translateX(-1px); }

.target-select {
    font-size: 13px;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--rule); border-radius: 4px;
    background: var(--paper); color: var(--ink);
}

.bar-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 0.9rem; }
.bar-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.swatch { display: inline-block; width: 16px; height: 10px; }
.swatch-today { background: var(--accent); }
.swatch-gap { background: repeating-linear-gradient(-45deg, var(--focus) 0 1.5px, transparent 1.5px 5px); }
.swatch-target { width: 2.5px; height: 14px; background: var(--focus); }

.focus-section { margin-top: 2.5rem; border-top: 2px solid var(--rule-strong); padding-top: 1.5rem; }
.focus-section h3 { font: 400 26px/1.2 var(--serif); margin-bottom: 0.5rem; }
.focus-list { list-style: none; counter-reset: focus; }
.focus-list > li { counter-increment: focus; display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.focus-list > li::before { content: counter(focus); font: 400 24px/1.1 var(--serif); color: var(--focus); }
.focus-q { font: 600 17px/1.35 var(--serif); margin-bottom: 0.35rem; }
.focus-q a { color: var(--ink); text-decoration: none; }
.focus-q a:hover { color: var(--focus); }
.focus-today { font-size: 14px; color: var(--muted); }
.focus-next { background: var(--accent-tint); padding: 0.85rem 1rem; font-size: 14px; line-height: 1.5; }
.focus-next .label { color: var(--accent); display: block; margin-bottom: 0.25rem; }
.focus-empty { color: var(--muted); padding: 1rem 0; border-top: 1px solid var(--rule); }

.report-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ---------- About this model + related ---------- */
.after-report { padding-top: 3.5rem; padding-bottom: 4rem; }
.model-guide > .label { margin-bottom: 0.75rem; }
.model-guide .faq-question { font-size: 18px; }
.model-guide .faq-item > p { font-size: 17px; }
.related-models { margin-top: 3.5rem; border-top: 2px solid var(--rule-strong); padding-top: 1.25rem; max-width: var(--measure); }
.related-models h2 { margin-bottom: 0.75rem; }
.related-models .index-list { margin-left: 0; }

/* ---------- Mobile / tablet ---------- */
@media (max-width: 1024px) {
    .page-assess .site-header .container { min-height: 56px; }
    .header-crumbs { display: none; }
    .header-model { display: block; flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .page-assess .logo-text { display: none; }
    .header-actions { margin-left: 0; gap: 0.4rem; }
    .header-actions [data-action="share"] { display: none; }
    .page-assess .theme-toggle-label { display: none; }
    .contents-toggle { display: inline-flex; }

    .assess-progress .container { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); padding-bottom: 0.45rem; }
    .progress-track { background: var(--rule); }

    .model-intro { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 0 1.5rem; }
    .model-title { font-size: 40px; }
    .model-title-sub { font-size: 18px; }
    .model-lede { font-size: 18px; }
    .model-meta { border-left: 0; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }

    .framework { grid-template-columns: 1fr; gap: 1.5rem; }
    .fw-levels-panel { border-left: 0; padding-left: 0; }

    .assess-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 2rem; padding-bottom: 7rem; }

    /* Contents becomes a sheet opened from the header */
    .contents {
        position: fixed; inset: 0 0 0 auto;
        width: min(340px, 88vw); max-height: none; height: 100%;
        background: var(--paper);
        border-left: 1px solid var(--rule);
        padding: 1.25rem 1.25rem 2rem;
        z-index: 300;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        visibility: hidden;
    }
    .contents.is-open { transform: none; visibility: visible; box-shadow: 0 0 0 100vmax rgba(10, 12, 16, 0.45); }
    .contents-close { display: inline-flex; padding: 0.3rem 0.6rem; font-size: 13px; }

    .area-head > p { margin-left: 0; }
    .area-head h2 { font-size: 26px; }
    .question { padding-left: 0; }
    .q-id { position: static; display: block; width: auto; margin-bottom: 0.25rem; }
    .q-text { font-size: 21px; }

    /* Score panel becomes a bottom drawer */
    .score-panel {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        background: var(--paper);
        border-top: 1px solid var(--rule);
        z-index: 250;
        max-height: 78vh; overflow-y: auto;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
    }
    .score-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0 0.75rem; border-top: 0; padding: 0.7rem var(--gutter) 0.8rem; position: relative; }
    .score-summary::before { content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 3px; border-radius: 2px; background: var(--rule); transform: translateX(-50%); }
    .score-label { display: none; }
    .score-line { margin: 0; }
    .score-big { font-size: 34px; }
    .score-of { display: none; }
    .score-phrase { font-size: 14px; margin: 0; font-style: normal; font-family: var(--sans); color: var(--muted); }
    .drawer-toggle { display: inline-flex; gap: 0.3rem; align-items: center; background: none; border: 0; color: var(--focus); font-size: 13.5px; cursor: pointer; padding: 0.4rem 0; }
    .drawer-caret { display: inline-block; font-size: 10px; transition: transform 0.2s; }
    .score-panel.is-open .drawer-caret { transform: rotate(180deg); }
    .score-details { display: none; margin: 0; padding: 0 var(--gutter) 1.25rem; }
    .score-panel.is-open .score-details { display: block; }

    .results { padding: 2rem 0; }
    .report { padding: 1.75rem 1.25rem; }
    .report-title { font-size: 30px; }
    .report-hero { grid-template-columns: 1fr; }
    .report-score .score-big { font-size: 72px; }
    .area-table thead { display: none; }
    .area-table, .area-table tbody, .area-table tr, .area-table td { display: block; width: 100%; }
    .area-table tr { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
    .area-table td { border: 0; padding: 0; }
    .area-table .col-bar { grid-column: 1 / -1; padding: 0; width: auto; }
    .area-table .col-score { text-align: right; width: auto; }
    .area-table .col-target { grid-column: 1 / -1; text-align: left; width: auto; }
    .focus-list > li { grid-template-columns: 1.5rem minmax(0, 1fr); }
    .focus-next { grid-column: 2; }
}

@media (max-width: 760px) {
    .model-title { font-size: 34px; }
    .fw-pillars { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---------- Print (the on-screen report; the PDF export builds its own document) ---------- */
@media print {
    .model-intro, .framework, .assess-grid, .after-report, .report-actions, .target-select { display: none !important; }
    .results { background: #fff; border: 0; padding: 0; }
    .report { border: 0; padding: 0; }
}