/* Assessments, runner, results, dashboard, trends. Builds on site.css tokens. Two extra tokens for
   the apps' score colouring (amber = at/above a cutoff, teal = within range), stepped for AA text
   contrast on each theme's surface. */
:root { --elev: #8A5A00; --within: #1D6F66; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --elev: #E9C46A; --within: #5FD3C4; } }
:root[data-theme="dark"] { --elev: #E9C46A; --within: #5FD3C4; }

.assess .small, .small { font-size: .9rem; }
.crumbs { margin-bottom: 4px; }
.runner-title { font-size: clamp(1.4rem, 3.6vw, 2rem); }

/* picker */
.pick-section h2 { margin-bottom: .2em; }
.pick-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.pick-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pick h3 { margin: 0; font-size: 1.25rem; }
.pick h3 a { color: var(--accent); text-decoration: none; }
.pick h3 a:hover { text-decoration: underline; }
.pick-sub { margin: 0; color: var(--within); font-weight: 600; font-size: .92rem; }
.pick-meta { margin: 0; display: flex; gap: 8px; align-items: center; font-size: .92rem; }
.pro-badge { display: inline-flex; gap: 4px; align-items: center; }
.pick-links { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }

/* runner */
fieldset.q-md legend span { display: block; }
fieldset.q-md legend span + span { margin-top: .6em; font-weight: 500; font-size: .92em; }
.help-panels { display: grid; gap: 8px; margin-top: 20px; }
details.help { background: var(--card); border-radius: 12px; }
details.help > summary { cursor: pointer; padding: 12px 14px; min-height: 44px; font-weight: 600; color: var(--accent); list-style-position: inside; }
details.help .help-body { padding: 0 14px 12px; }
details.help ul { padding-left: 1.2em; margin: 0; }
details.help ul.sub { list-style: circle; margin-top: 4px; }
details.help li { margin-bottom: 4px; }
.citation { font-size: .8rem; color: var(--muted); margin-top: 12px; }
.citation p { margin: 0 0 6px; }
.burnout-intro hr, .card hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.paywall .btn svg, .btn svg { flex: none; }
.followup .fu { margin: 14px 0; display: block; border: 1px solid var(--line); }
.followup fieldset.fu, .fu-item { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.followup fieldset.card.fu { padding: 18px; border: 1px solid var(--line); }
.fu-item legend { font-weight: 650; margin-bottom: 6px; padding: 0; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.choice input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.choice label { flex: 1; min-height: 28px; cursor: pointer; }
.followup details.help { margin: 2px 0 10px 32px; }

/* results */
.result { margin-top: 8px; }
.result > h2 { margin-top: 1.4em; }
.scorecard .big { color: var(--text); }
.status-line { font-weight: 600; color: var(--within); margin: 6px 0 2px; }
.status-line.elevated, .elevated { color: var(--elev); }
.within { color: var(--within); }
.notice { font-style: italic; color: var(--muted); }
.assess .card { margin: 12px 0; }
.assess .card > h3:first-child, .assess .card > h2:first-child { margin-top: 0; }
.meaning p:last-child, .card > p:last-child { margin-bottom: 0; }
.dims { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.dim-row { display: flex; justify-content: space-between; gap: 12px; }
.bar { height: 8px; border-radius: 4px; background: var(--card); overflow: hidden; margin-top: 4px; }
.bar > span { display: block; height: 100%; border-radius: 4px; background: var(--teal); }
table.bands tr.current th, table.bands tr.current td { font-weight: 700; background: var(--accent-soft); }
.caveat { font-style: italic; }
.ai-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-head h3 { margin: 0; }
.ai-text { margin-top: 10px; }
details.answers { margin: 12px 0; }
details.answers > summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-weight: 600; color: var(--accent); }
details.answers ol { padding-left: 1.4em; }
details.answers li { margin-bottom: 10px; }
details.answers li span { display: inline; }

/* dashboard */
.btn.big { min-height: 56px; font-size: 1.05rem; width: 100%; max-width: 420px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.section-head h2 { margin-bottom: .1em; }
.section-head p { margin: 0; }
.result-cards { list-style: none; padding: 0; display: grid; gap: 10px; margin: 12px 0; }
.result-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 64px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; }
.result-card:hover { border-color: var(--accent); }
.rc-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rc-title strong { color: var(--accent); }
.rc-score { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.chev { font-size: 1.6rem; color: var(--muted); }
.ews { border-left: 4px solid var(--elev); }
.ews.level-watch { border-left-color: var(--within); }
.ews h2 { margin-top: 0; font-size: 1.15rem; }
.synth h2, .next h2, .empty h2 { margin-top: 0; font-size: 1.25rem; }

/* trends */
svg.trend { margin: 8px 0 12px; overflow: visible; }
svg.trend .grid { stroke: var(--line); stroke-width: 1; }
svg.trend .threshold { stroke: var(--elev); stroke-width: 1.5; stroke-dasharray: 5 4; }
svg.trend .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
svg.trend .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
svg.trend .hit { fill: transparent; }
svg.trend .pt:focus-visible .dot, svg.trend .pt:hover .dot { r: 7; }
svg.trend .pt:focus { outline: none; }
.trend-card h2 { margin-top: 0; font-size: 1.2rem; }

@media print { .ai-card .actions, details.help { display: none; } }
/* Dashboard: results first, then a short overview with next steps, then the full interpretation. */
.dash h1 { margin-bottom: 16px; }
.dash-results { margin-bottom: 20px; }
.dash-results .section-head .chip { align-self: flex-start; }
.dash-overview h2 { margin-top: 0; }
.dash-next-h { font-size: 1rem; margin: 16px 0 8px; }
.dash-next { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dash-more { margin: 14px 0 0; }
details.full-interp { margin-top: 8px; }
details.full-interp > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--accent); color: var(--accent); font-weight: 650; cursor: pointer; list-style: none; }
details.full-interp > summary::-webkit-details-marker { display: none; }
details.full-interp > summary::after { content: '▾'; margin-left: 8px; }
details.full-interp[open] > summary::after { content: '▴'; }
details.full-interp .fi-close, details.full-interp[open] .fi-open { display: none; }
details.full-interp[open] .fi-close { display: inline; }
details.full-interp[open] > summary { margin-bottom: 12px; }