:root {
  --accent: #E60000;
  --accent-dark: #c20000;
  --accent-tint: #fdecec;
  --ink: #212529;
  --muted: #5f666d;
  --bg: #f4f6f9;
  --border: #c2c8cf;
  --success-bg: #d4edda;
  --success-text: #155724;
  --success: #2e9e4f;
  --warning-bg: #fff3cd;
  --warning: #c89b04;
  --warning-text: #856404;
  /* Fixed score buckets — anchors mirror _COLOUR_STOPS in routes/results.py; keep in sync. */
  --score-neg: #d9534f;        /* red */
  --score-zero: #e0a800;       /* amber — fills/markers */
  --score-zero-text: #b8860b;  /* darker amber — legible as text on light */
  --score-pos: #1e7e34;        /* green */
  --radius: 8px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; color: var(--ink); background: var(--bg); line-height: 1.6; overflow-x: hidden; }
header { background: var(--ink); color: white; padding: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: #484848 15px solid; position: relative; }
header h1 { font-size: 20px; font-weight: 700; }
/* Equal-width flex sides centre the in-flow Home link on narrow screens; on wider
   ones the media query below lifts it out of flow and pins it to the content's left edge. */
.header-side { flex: 1 1 0; display: flex; align-items: center; gap: 16px; min-width: 0; }
.header-side-right { justify-content: flex-end; }
.header-home { flex-shrink: 0; color: rgba(255,255,255,0.85); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 0.15s; }
.header-home:hover { color: #fff; text-decoration: underline; }
/* On wide screens line "Home" up with .container's left edge (above "← Back") rather
   than the header centre. Absolutely positioned so the logo/Sign Out corners and the
   landing page's empty Home slot are unaffected. The max() floor (≈ logo+title width)
   stops it overlapping the title as the column narrows; 860px tracks .container's width. */
@media (min-width: 961px) {
  .header-home { position: absolute; top: 50%; transform: translateY(-50%); left: max(470px, calc((100% - 860px) / 2 + 20px)); }
}
@media (max-width: 560px) { header { padding: 8px; } .header-title { display: none; } }
@media (max-width: 480px) { .status-row, .title-row { flex-direction: column; align-items: flex-start !important; gap: 10px; } }
.header-logout { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,0.4); padding: 7px 16px; border-radius: 5px; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s; }
.header-logout svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
button.header-logout { background: transparent; font-family: inherit; cursor: pointer; }
.header-logout:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); color: #fff; }
.container { max-width: 860px; margin: 40px auto; padding: 0 20px 60px; }
.page-landing .container { margin-bottom: 0; }
h2 { font-size: 22px; margin-bottom: 8px; color: var(--ink); }
h3 { font-size: 17px; color: var(--ink); }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 6px 14px; color: var(--muted); font-size: 14px; line-height: 1.2; background: #fff; border: 1px solid var(--border); border-radius: 5px; text-decoration: none; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.back-link:hover { background: var(--bg); border-color: #9aa1a9; color: var(--ink); }
.text-muted { color: var(--muted); }
.card { background: white; border-radius: var(--radius); padding: 32px; box-shadow: 0 4px 8px rgba(0,0,0,0.06); margin-bottom: 24px; }
.card-title { font-size: 17px; color: var(--ink); margin-bottom: 4px; }
/* narrow centred column for the sign-in card (and its flash/sent notices) on /retrieve */
.auth-panel { max-width: 560px; margin: 8px auto 0; }
.auth-panel .card { padding: 40px 36px; }
.error-banner { background: #fde8e8; border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: 4px; margin-bottom: 20px; color: #a31515; }
/* status notices — green for success, amber for warnings (mirror .error-banner) */
.notice { padding: 12px 16px; border-radius: 4px; margin-bottom: 20px; font-size: 14px; border-left: 4px solid; }
.notice-success { background: var(--success-bg); border-left-color: var(--success); color: var(--success-text); }
.notice-warning { background: var(--warning-bg); border-left-color: var(--warning); color: var(--warning-text); }
label { display: block; font-weight: 700; margin-bottom: 4px; margin-top: 16px; font-size: 15px; }
.card label:first-child { margin-top: 0; }
.req { color: var(--accent); margin-left: 2px; }
input[type=text], input[type=email], select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 5px; font-size: 15px; font-family: inherit; background: white; }
input[type=text]:focus, input[type=email]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,0,0,0.15); }
/* custom chevron — the native one sits flush against the right edge, which looks stranded on full-width selects */
select { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #484848; color: white; padding: 10px 24px; border: none; border-radius: 5px; font-size: 15px; font-family: inherit; line-height: normal; cursor: pointer; margin-top: 24px; text-decoration: none; transition: background-color 0.15s, box-shadow 0.15s; }
.btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.btn:hover { background: #2e2e2e; color: white; }
.btn:focus-visible { outline: 3px solid rgba(72,72,72,0.35); outline-offset: 2px; }
.btn-secondary { background: #076a9c; color: white; border: none; }
.btn-secondary:hover { background: #055a87; color: white; }
.btn-dark { background: var(--ink); }
.btn-dark:hover { background: #000; }
.btn-danger { background: white; color: var(--accent); border: 1px solid var(--accent); }
.btn-danger:hover { background: var(--accent); color: white; }
.btn-sm { padding: 8px 16px; font-size: 14px; margin-top: 0; }
.btn:disabled { opacity: 0.85; cursor: default; }
/* in-flight spinner for submit buttons (Save, Submit All Responses) */
.btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; border-radius: 50%; animation: btn-spin 0.6s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation: none; } }
.domain-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; }
@media (max-width: 560px) { .domain-chips { grid-template-columns: repeat(2, 1fr); } }
.meter { background: #e9ecef; border-radius: 20px; height: 12px; overflow: hidden; margin: 8px 0 4px; }
.meter-fill { background: var(--success); height: 100%; border-radius: 20px; transition: width 0.3s ease; }
.option { display: flex; gap: 13px; align-items: flex-start; padding: 8px 12px; border-radius: 8px; border: 1px solid #dde0e4; font-weight: 400; cursor: pointer; transition: background-color 0.12s, border-color 0.12s; margin-top: 0; }
.option:not(.readonly):hover { background: #f7f8fa; border-color: var(--border); }
.option input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-dot { width: 20px; height: 20px; border: 2px solid #c2c8cf; border-radius: 50%; flex-shrink: 0; margin-top: 2px; position: relative; transition: border-color 0.12s; }
.option input:checked ~ .radio-dot, .radio-dot.checked { border-color: var(--accent); }
.option input:checked ~ .radio-dot::after, .radio-dot.checked::after { content: ""; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; border-radius: 50%; background: var(--accent); }
.option input:focus-visible ~ .radio-dot { box-shadow: 0 0 0 3px rgba(230,0,0,0.18); }
.option:has(input:checked), .option.selected { background: var(--accent-tint); border-color: var(--accent); }
.option.readonly { cursor: default; }
.score-num { font-weight: 700; color: var(--accent); margin-right: 6px; }
/* info "i" button + its popover (e.g. the Sharing card) */
.info-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 2px; cursor: pointer; color: var(--muted); transition: color 0.12s; }
.info-btn svg { width: 17px; height: 17px; }
.info-btn:hover { color: var(--ink); }
.info-btn:focus-visible { outline: 3px solid rgba(33,37,41,0.3); outline-offset: 2px; border-radius: 50%; }
.info-pop { display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 100; width: min(340px, 80vw); background: white; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 14px 16px; font-size: 13.5px; font-weight: 400; color: #555; line-height: 1.55; }
/* dashed empty-state box (e.g. "not shared with anyone yet") */
.empty-state { display: flex; align-items: center; justify-content: center; gap: 8px; background: #f8f9fa; border: 1px dashed var(--border); border-radius: 8px; padding: 16px; color: var(--muted); font-size: 14px; }
.empty-state svg { width: 17px; height: 17px; flex-shrink: 0; }
/* landing sections */
.section { margin-top: 56px; }
/* fsm-style landing type: display-6 titles, light 20px leads */
.section-title { font-size: clamp(26px, 1.375rem + 1.5vw, 40px); font-weight: 300; line-height: 1.2; margin-bottom: 8px; }
.section-lead { color: var(--muted); font-size: 20px; font-weight: 300; margin-bottom: 20px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; }
.step { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 22px; }
.step-num { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.step h4 { font-size: 18px; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 14px; }
.faq { background: white; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; }
.faq summary { padding: 18px 20px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 24px; font-weight: 400; line-height: 1; flex-shrink: 0; }
.faq[open] summary::after { content: "\2013"; }
.faq-body { padding: 0 18px 16px; color: #444; }
.quote { border-left: 4px solid var(--accent); padding: 4px 0 4px 16px; margin: 18px 0; color: #333; }
.quote p { font-style: italic; }
.quote cite { display: block; font-style: normal; font-weight: 700; color: var(--muted); font-size: 13px; margin-top: 8px; }
.video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; margin-bottom: 12px; }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
/* testimonial carousel */
.testimonial-card { margin-bottom: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
@media (max-width: 560px) { .testimonial-card { padding: 20px; } }
.carousel { position: relative; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 100%; scroll-snap-align: center; padding: 4px; }
.carousel-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 10px; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.carousel-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.12s, border-color 0.12s; }
.carousel-arrow:hover { background: #f1f3f6; border-color: #b9c0c8; }
.carousel-arrow:focus-visible { outline: 3px solid rgba(230,0,0,0.35); outline-offset: 2px; }
.carousel-dots { display: flex; gap: 8px; align-items: center; }
.carousel-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: #c2c8cf; cursor: pointer; padding: 0; transition: background-color 0.12s, transform 0.12s; }
.carousel-dots button.active { background: var(--accent); transform: scale(1.2); }
/* gradient hero — fsm.lgfl.net style (soft red, big light heading, wave below) */
.hero-gradient { background: linear-gradient(to bottom, #d52c2c, #dd5757); color: #fff; text-align: center; padding: 80px 20px 50px; position: relative; }
@media (max-width: 1024px) { .hero-gradient { padding: 70px 15px 50px; } }
@media (max-width: 768px) { .hero-gradient { padding: 50px 10px 30px; } }
@media (max-width: 480px) { .hero-gradient { padding: 35px 10px 30px; } }
.hero-inner { max-width: 800px; margin: 0 auto; text-wrap: balance; }
.hero-image { opacity: .75; margin-top: 40px; margin-bottom: 80px; height: 300px; max-width: 100%; object-fit: contain; }
@media (max-width: 1366px) { .hero-image { height: 225px; margin-top: 30px; margin-bottom: 50px; } }
@media (max-width: 1024px) { .hero-image { height: 200px; margin-top: 20px; margin-bottom: 50px; } }
@media (max-width: 768px) { .hero-image { height: 180px; margin-top: 15px; margin-bottom: 50px; } }
@media (max-width: 480px) { .hero-image { height: 160px; margin-top: 10px; margin-bottom: 50px; } }
.hero-gradient h1 { font-size: clamp(30px, 1.475rem + 2.7vw, 56px); font-weight: 300; margin-bottom: 12px; line-height: 1.2; }
.hero-lead { font-size: 20px; font-weight: 300; opacity: 0.95; max-width: 580px; margin: 0 auto 16px; }
/* layered wave dividers (svg markup lives in landing.html, copied from fsm.lgfl.net) */
.wave-container { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
.wave-container svg { position: relative; display: block; width: calc(100% + 1.3px); height: 70px; }
.wave-container .shape-fill { fill: #f9f9f9; } /* must match the top of the .landing-bg gradient */
.footer-wave-container { position: relative; width: 100%; overflow: hidden; line-height: 0; margin-bottom: -2px; background-color: #dcdcdc; } /* bottom of the .landing-bg gradient */
.footer-wave-container svg { position: relative; display: block; width: calc(100% + 1.3px); height: 70px; }
/* subtle card gradient, fsm-style */
.step { background: linear-gradient(to bottom, #ffffff, #f7f8fa); }
/* dark gradient footer (matches fsm.lgfl.net) */
.site-footer { background: linear-gradient(to bottom, #1f1f1f, #000); color: #fff; text-align: center; padding: 48px 20px; }
.site-footer a { color: #fff; }
.footer-logo { display: inline-block; margin-bottom: 4px; }
.footer-logo img { height: 120px; }
.footer-reg { font-weight: 300; font-size: 13px; line-height: 1.65; opacity: 0.85; max-width: 660px; margin: 0 auto 16px; }
.footer-links { font-size: 14px; margin-bottom: 20px; }
.footer-links a { text-decoration: underline; }
/* analytics note + opt-out; the button is styled as a link so it reads as part of
   the footer's small print rather than a call to action */
.footer-analytics { font-weight: 300; font-size: 12px; line-height: 1.65; opacity: 0.75; max-width: 660px; margin: 0 auto 20px; }
.footer-analytics form { display: inline; }
.footer-analytics button { background: none; border: 0; padding: 0; margin: 4px 0 0; width: auto; color: #fff; font: inherit; text-decoration: underline; cursor: pointer; }
.footer-social-label { font-size: 14px; margin-bottom: 12px; }
.social-icons { display: flex; gap: 16px; justify-content: center; }
.social-icons img { height: 30px; width: 30px; transition: transform 0.15s; }
.social-icons a:hover img { transform: translateY(-2px); }
/* buttons for coloured backgrounds (hero + dark CTA) */
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.hero-actions .btn { margin-top: 0; padding: 12px 32px; font-size: 16px; }
.btn-light { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.btn-light:hover { background: #eee; color: var(--ink); }
.btn-charcoal { background: #484848; color: #fff; border: 1px solid var(--ink); }
.btn-charcoal:hover { background: var(--ink); color: #fff; }
/* floating scroll-to-top / scroll-to-bottom buttons */
.scroll-fab { width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--ink); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.3); display: none; align-items: center; justify-content: center; padding: 0; transition: background-color 0.15s; }
.scroll-fab:hover { background: #000; }
.scroll-fab:focus-visible { outline: 3px solid rgba(33,37,41,0.4); outline-offset: 2px; }
/* landing sections on a single fsm-style gradient (bands are transparent) */
.landing-bg { position: relative; left: 50%; width: 100vw; margin-left: -50vw; margin-top: -40px; margin-bottom: -60px; background: linear-gradient(to bottom, #f9f9f9, #dcdcdc); }
.band { padding: 52px 20px; }
.band-inner { max-width: 920px; margin: 0 auto; }
#how .band-inner { max-width: 820px; }
.band .section-lead { margin-bottom: 20px; }

/* ===== Confirm sign-in (verify.html) ===== */
.verify-card { text-align: center; max-width: 520px; margin-left: auto; margin-right: auto; padding: 48px 40px 36px; animation: verify-in 0.18s ease-out; }
.verify-lead { margin: 0 auto 28px; max-width: 42ch; }
.verify-who { font-size: 14px; margin: 0 0 2px; }
.verify-name { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 2px; overflow-wrap: anywhere; }
.verify-email { font-size: 14px; margin: 0; overflow-wrap: anywhere; }
.verify-btn { width: 100%; margin-top: 24px; padding: 12px 24px; font-size: 16px; }
.verify-note { border-top: 1px solid #e5e8ec; margin: 28px 0 0; padding-top: 18px; font-size: 13.5px; line-height: 1.5; }
@keyframes verify-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .verify-card { animation: none; } }

/* ===== Domain question form (domain.html) ===== */
.sticky-actions { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e0e0e0; box-shadow: 0 -2px 10px rgba(0,0,0,0.08); z-index: 100; padding: 12px 20px; }
.sticky-actions-inner { max-width: 860px; margin: 0 auto; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sticky-scroll { display: flex; gap: 8px; margin-left: auto; }
/* when the answered-count is present (edit mode) it owns the right-push, so the scroll group just sits beside it */
.q-count ~ .sticky-scroll { margin-left: 0; }
/* ghost/secondary scroll arrows — recede behind the Save CTA */
.sticky-scroll .scroll-fab { display: flex; width: 36px; height: 36px; box-shadow: none; background: transparent; border: 1px solid var(--border); color: var(--muted); }
.sticky-scroll .scroll-fab:hover { background: rgba(33,37,41,0.06); border-color: var(--muted); color: var(--ink); }
/* answered-question count + "show only unanswered" toggle */
.q-count { display: inline-flex; align-items: center; margin-left: auto; font-size: 14px; line-height: 1; color: var(--muted); white-space: nowrap; }
.q-toggle { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; line-height: 1; color: var(--ink); cursor: pointer; user-select: none; white-space: nowrap; }
.q-toggle input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
/* collapsed (answered) question summary row */
.q-card { transition: padding 0.7s ease; }
.q-card .q-summary { display: none; width: 100%; background: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; align-items: center; gap: 12px; color: var(--ink); }
.q-card.collapsed { padding: 16px 20px; margin-bottom: 12px; }
.q-card.collapsed .q-summary { display: flex; animation: q-summary-in 0.7s ease both; }
@keyframes q-summary-in { from { opacity: 0; } to { opacity: 1; } }
/* soften the close: animate the body's height (grid-rows 1fr→0fr) and fade it, instead of an instant display:none swap */
.q-collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.7s ease, opacity 0.5s ease; }
.q-collapse > .q-body { overflow: hidden; min-height: 0; }
.q-card.collapsed .q-collapse { grid-template-rows: 0fr; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .q-card, .q-collapse { transition: none; }
  .q-card.collapsed .q-summary { animation: none; }
}
.q-summary:hover .q-summary-text { text-decoration: underline; text-decoration-color: var(--border); }
.q-summary-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* min-width:0 lets the answer line ellipsise */
.q-summary-text { font-weight: 600; }
.q-summary-answer { font-weight: 400; font-size: 16px; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.q-summary-score { flex-shrink: 0; font-weight: 700; font-size: 16px; min-width: 1.4em; text-align: center; }
.q-summary-edit { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.q-hidden { display: none !important; }

/* ===== Results page (results.html) ===== */
.results-bar { position: relative; margin-top: 8px; }
.results-bar .meter { height: 16px; margin: 0; }
/* dotted midpoint (score 0) */
.mid-marker { position: absolute; top: -3px; bottom: -3px; left: 50%; border-left: 2px dotted #9aa3ad; }
/* all-schools average — solid line with a small pin on top (line + triangle share one centre) */
.avg-marker { position: absolute; top: -5px; bottom: -3px; width: 22px; transform: translateX(-50%); cursor: help; }
.avg-marker::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: #1f1f1f; }
.avg-marker::before { content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #1f1f1f; }
/* summary card — two-column hero (overall score | takeaways); stacks on narrow */
.summary-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; align-items: center; }
.summary-takeaways { border-left: 1px solid #eee; padding-left: 28px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 560px) {
  .summary-grid { grid-template-columns: 1fr; gap: 20px; }
  .summary-takeaways { border-left: 0; padding-left: 0; border-top: 1px solid #eee; padding-top: 20px; }
}
/* answers section (separate card, with score filter) */
.answer-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; }
.fbtn { border: 1px solid var(--border); background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 14px; cursor: pointer; }
.fbtn:hover { filter: brightness(0.97); }
.fbtn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* score-coloured filter buttons (echo the bar colours) */
.fbtn[data-score="-2"], .fbtn[data-score="-1"] { color: var(--score-neg); border-color: #ecc3c0; }
.fbtn[data-score="0"] { color: var(--score-zero-text); border-color: #e8d7a3; }
.fbtn[data-score="1"], .fbtn[data-score="2"] { color: var(--score-pos); border-color: #bcdcc6; }
.fbtn[data-score="-2"].active, .fbtn[data-score="-1"].active { background: var(--score-neg); border-color: var(--score-neg); color: #fff; }
.fbtn[data-score="0"].active { background: var(--score-zero); border-color: var(--score-zero); color: #1f1f1f; }
.fbtn[data-score="1"].active, .fbtn[data-score="2"].active { background: var(--score-pos); border-color: var(--score-pos); color: #fff; }
.answer-domain { border-top: 1px solid #eee; }
.answer-domain > summary { padding: 13px 0; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.answer-domain > summary::-webkit-details-marker { display: none; }
.answer-domain > summary::after { content: "\25be"; color: var(--muted); }
.answer-domain[open] > summary::after { content: "\25b4"; }
.answer-list { padding-bottom: 10px; }
.answer-row { padding: 14px 0; border-top: 1px solid #f0f0f0; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
.answer-main { min-width: 0; }
/* score badge — the visual anchor for each answer, colour-coded by score */
.score-badge { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.score-badge.s-pos { background: #e7f4ec; color: var(--score-pos); }
.score-badge.s-neg { background: #fbeae9; color: var(--score-neg); }
.score-badge.s-zero { background: #fbf3da; color: var(--score-zero-text); }
.answer-q { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.answer-a { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.answer-median { font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.median-compare { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; padding: 4px 11px; border-radius: 11px; }
/* Only the per-answer badges carry the median tooltip (the overall card reuses
   .median-compare without one), so scope the help cursor to those. */
.answer-median .median-compare { cursor: help; }
.median-compare.above { color: var(--score-pos); background: #e7f4ec; }
.median-compare.below { color: var(--score-neg); background: #fbeae9; }
.median-compare.same { color: var(--muted); background: #f1f3f5; }
/* Folded into the .median-compare badge tooltip on screen; revealed in print
   (see @media print) so the PDF still carries the peer-median figure. */
.median-label { display: none; color: var(--muted); white-space: nowrap; }
.median-label strong { color: var(--ink); }
.adcount { font-weight: 400; font-size: 13px; }
/* Same affordance as the .guidance-link pill in the focus list (book icon,
   soft red) — a compact labelled pill that sits inline on the answer's
   meta footer, next to the peer-comparison info. */
.answer-help { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 12px; border: 1px solid #ecc3c0; background: #fff; color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.12s, color 0.12s, border-color 0.12s; }
.answer-help:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-tint); }
.answer-help svg { width: 13px; height: 13px; flex-shrink: 0; }
/* share modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; }
.modal-overlay[hidden] { display: none; }
.modal-box { background: #fff; border-radius: var(--radius); padding: 28px; max-width: 460px; width: 100%; position: relative; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.modal-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px; }
.modal-close:hover { color: var(--ink); }
/* quiet text-buttons for the sharing line under the title */
.link-btn { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.link-btn:hover { color: var(--accent-dark); text-decoration: underline; }

/* ===== Results focus list (_results_focus.html) ===== */
/* Mirrors the answers list: a badge anchors each row, content beside it,
   and only two small type sizes (14px question, 12px everything else). */
.focus-item { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-top: 1px solid #f0f0f0; list-style: none; }
.focus-item:last-child { padding-bottom: 0; }
.focus-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.focus-domain { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.focus-q { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.45; margin-top: 2px; }
.focus-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--muted); }
.focus-meta strong { color: var(--ink); }
.guidance-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--accent); background: #fff; border: 1px solid #ecc3c0; border-radius: 12px; padding: 2px 10px; text-decoration: none; transition: background-color 0.12s, border-color 0.12s; }
.guidance-link:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-dark); }
.guidance-link svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ===== Compare page (compare.html) ===== */
/* Bars, badges, filter buttons and the collapsible domain sections reuse the
   results-page classes above; this block is just the two-column chrome. */
/* Picker: the two selects share the card's full width (the button sits on its
   own row below), so long "School — Name · DTT-00047 · 12 Mar 2026" labels fit. */
.compare-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 20px; }
.compare-picker-actions { grid-column: 1 / -1; margin-top: 16px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.compare-bar-row { display: grid; grid-template-columns: minmax(72px, 190px) 1fr 74px; gap: 12px; align-items: center; margin-top: 8px; }
.compare-bar-label { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare-bar-label strong { color: var(--ink); }
.compare-bar-value { text-align: right; white-space: nowrap; font-size: 14px; }
/* Muted "no answer recorded" badge — the drift case where a question only
   existed for one of the two assessments. */
.score-badge.s-none { background: #f1f3f5; color: var(--muted); font-weight: 600; cursor: help; }
.compare-cols { display: grid; grid-template-columns: 34px 34px 1fr; column-gap: 10px; padding: 8px 0 2px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.compare-cols span { text-align: center; }
.compare-row { padding: 12px 0; border-top: 1px solid #f0f0f0; display: grid; grid-template-columns: 34px 34px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.compare-q { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.compare-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; font-size: 12px; }
@media (max-width: 560px) {
  .compare-picker { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; gap: 16px; }
  .compare-bar-row { grid-template-columns: minmax(60px, 110px) 1fr 60px; gap: 8px; }
}

/* ===== Print / Save-as-PDF (results page): a clean, fileable one-off report ===== */
@media print {
  @page { margin: 16mm; }
  /* Keep the coloured maturity bars, median pills and score colours — browsers
     drop background graphics by default. */
  body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Drop interactive / navigation chrome. */
  header,
  .no-print,
  .modal-overlay,
  .answer-filter,
  .answer-help,
  .answer-domain > summary::after,
  .admin-bar,
  .admin-filters,
  .admin-queue,
  .sticky-actions,
  a[href="/retrieve"] { display: none !important; }
  /* Flatten cards for paper; avoid splitting a card or a single answer across pages. */
  .card { box-shadow: none !important; border: 1px solid #ccc; break-inside: avoid; }
  #answers-card { break-inside: auto; }          /* long list may span pages */
  #compare-answers { break-inside: auto; }
  .answer-row, .compare-row { break-inside: avoid; }
  .answer-domain > summary { cursor: default; }
  .median-label { display: inline; }            /* tooltip can't print — show the figure */
  .adcount { display: none !important; }
}


/* ===== Admin area (/admin/*) — internal LGfL content tooling =====
   Deliberately plainer than the school-facing pages: a dark nav bar in place of
   the marketing hero, so it is obvious at a glance which side of the app you are
   looking at. */
.admin-bar { background: var(--ink); color: #fff; border-bottom: 3px solid var(--accent); }
.admin-bar-inner { max-width: 860px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.admin-bar-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.admin-bar-who { margin-left: auto; font-size: 13px; color: #c9ced4; }
.admin-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-nav a { color: #dde1e6; text-decoration: none; font-size: 14px; padding: 5px 12px; border-radius: var(--radius); }
.admin-nav a:hover { background: #3a3f44; color: #fff; }
.admin-nav a.is-current { background: var(--accent); color: #fff; font-weight: 600; }
.admin-bar-email { color: #9aa1a9; }
/* Filter/search bar above the resource list. A plain GET form, so the current
   filters live in the URL and an editor can bookmark their own corner of the library. */
.admin-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
/* max-width so the row the filters wrap onto keeps their width, rather than
   two leftover controls stretching to fill it. */
.admin-filter { flex: 1 1 150px; min-width: 0; max-width: 220px; }
.admin-filter-wide { flex: 3 1 260px; max-width: none; }
.admin-filter label { margin-top: 0; margin-bottom: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.admin-filter-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.admin-clear { font-size: 14px; color: var(--muted); }
.admin-clear:hover { color: var(--ink); }
/* A button that has to read as a link: used where the control is an in-page
   action rather than navigation, so it must not be an <a href> with no target. */
.admin-linkish { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.admin-linkish:hover { color: var(--ink); }
/* The four filters an editor reaches for occasionally, folded away so arriving at
   the library means three controls rather than seven. Full-width flex item, so it
   takes a line of its own inside .admin-filters however the row above wraps. */
.admin-more { flex: 1 1 100%; }
.admin-more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding: 2px 0; }
.admin-more > summary:hover { color: var(--ink); }
.admin-more-on { font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.admin-more-body { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 10px; }
/* The standing to-do list at the top of the resource library. Chips rather than a
   sentence because each one is a link to exactly the rows it counted, and the
   number is the point: an editor should be able to read "nothing waiting" from
   across the desk. */
.admin-queue { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--warning); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.admin-queue-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.admin-queue-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--warning-bg); color: var(--warning-text); border-radius: 20px; padding: 4px 14px 4px 10px; text-decoration: none; font-weight: 600; }
.admin-queue-chip:hover { background: #ffe9a8; color: var(--ink); }
.admin-queue-n { font-size: 15px; font-weight: 700; }
/* Nothing outstanding is worth saying out loud, and in green: it is the only
   state where this strip is reassurance rather than a job list. */
.admin-queue-clear { border-left-color: var(--success); color: var(--success-text); background: var(--success-bg); border-color: var(--success); }
.admin-count { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
/* The table scrolls sideways inside its own box on a narrow screen rather than
   pushing the page wider. */
.admin-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table td { padding: 12px 14px; border-bottom: 1px solid #e9ecef; vertical-align: top; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: #f8f9fa; }
.admin-row-title { font-weight: 600; text-decoration: none; }
.admin-row-title:hover { text-decoration: underline; }
.admin-row-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.admin-row-url { word-break: break-all; }
.admin-cell-kind, .admin-cell-updated { white-space: nowrap; color: var(--muted); }
/* One line of the description, with the rest on hover — enough to recognise the
   row, not enough to bury the ones that have none. */
.admin-clip { display: block; max-width: 320px; color: var(--muted); }
.admin-flag-missing { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-tint); border-radius: 4px; padding: 2px 8px; }
.admin-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); background: #eceff2; border-radius: 4px; padding: 2px 7px; margin-left: 6px; vertical-align: 2px; }
.admin-badge-live { color: var(--warning-text); background: var(--warning-bg); }
.admin-badge-universal { color: #fff; background: var(--ink); }
/* The td rule paints over the row's hover colour, so an inactive row needs its
   own hover state or it looks unclickable. */
.row-inactive td { background: #fbfbfc; }
.row-inactive:hover td { background: #f2f4f6; }
.row-inactive .admin-row-title, .row-inactive .admin-clip { color: var(--muted); }
/* The resource editor's own header: the heading and its provenance line on the
   left, Delete on the right. Delete used to be a card at the foot of the page,
   below a row for every question, which read as caution and was really just hard
   to find. Up here it is one click from arriving and still behind a confirm. */
.admin-edit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
@media (max-width: 480px) { .admin-edit-head { flex-direction: column; } }
/* The resource editor. The description is a textarea rather than an input, so it
   needs the same border/focus treatment the shared input rule gives the rest. */
.admin-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 5px; font-family: inherit; font-size: 15px; line-height: 1.6; background: #fff; resize: vertical; }
.admin-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,0,0,0.15); }
.admin-check { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e9ecef; }
.admin-check-label { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; cursor: pointer; }
.admin-check-label input { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }
.admin-check-hint { margin-top: 5px; margin-left: 26px; font-size: 13px; color: var(--muted); }
/* "Show this in every report", and the order it takes in that section. The order
   only means something once the box is ticked, so it is revealed rather than
   always shown — hidden, not disabled, so unticking the box and saving does not
   throw away the position an editor chose. */
.universal-check .universal-sort { display: none; }
.universal-check.is-on .universal-sort { display: block; margin: 12px 0 0 26px; max-width: 160px; }
.universal-check.is-on .universal-sort label { margin-top: 0; }

/* The mapping panel: one collapsible section per domain, one row per question.
   A statement is clipped to a single line with the full text in its title
   attribute, so a long row never pushes the checkbox and the uid off-screen. */
.map-count { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 14px; }
/* A universal resource collapses the question list to its summary line: mapping
   is optional for it, but it may legitimately be both, so the list stays one
   click away rather than disappearing. With the box unticked the summary is
   hidden, which leaves the <details open> permanently open and the panel exactly
   as it reads for every other resource. */
.map-targets-summary { display: none; }
#mapping-panel.is-universal .map-targets-summary { display: list-item; cursor: pointer; font-size: 14px; color: var(--muted); padding: 2px 0; }
#mapping-panel.is-universal .map-targets-summary:hover { color: var(--ink); }
#mapping-panel.is-universal .map-intro, #mapping-panel.is-universal .map-count,
/* The open-all control goes with them: the sections it opens are behind the
   summary above, so pressing it would do nothing anyone can see. */
#mapping-panel.is-universal .map-expand { display: none; }
.map-domain { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: #fff; }
.map-domain > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 15px; list-style-position: inside; }
.map-domain > summary:hover { background: #f8f9fa; }
.map-domain-count { font-size: 12px; font-weight: 600; color: var(--muted); background: #eceff2; border-radius: 10px; padding: 1px 8px; margin-left: 6px; }
/* Tinted where this section already has ticks in it, so a collapsed panel still
   shows at a glance which sections hold the mappings. */
.map-domain-count.is-mapped { color: #fff; background: var(--accent); }
.map-expand { margin: -6px 0 12px; }
.map-row { border-top: 1px solid #e9ecef; padding: 8px 14px; }
.map-row.is-mapped { background: var(--accent-tint); }
.map-tick-label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; cursor: pointer; min-width: 0; }
.map-tick { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }
.map-uid { font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; min-width: 26px; }
.map-statement { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.map-empty { padding: 10px 14px; margin: 0; font-size: 14px; color: var(--muted); border-top: 1px solid #e9ecef; }
/* "More options" is closed on the common path, so the note and the score gate
   never crowd out the one thing most rows need, which is the checkbox. */
.map-extra > summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-left: 46px; padding: 2px 0; }
.map-extra > summary:hover { color: var(--ink); }
.map-extra-body { margin: 6px 0 8px 46px; }
.map-extra-body label { margin-top: 6px; margin-bottom: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.map-extra-body input[type="text"]:disabled, .map-extra-body select:disabled { background: #f4f5f7; color: var(--muted); cursor: not-allowed; }
.map-gate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.map-gate select { width: auto; min-width: 110px; }
.map-gate-label { font-size: 13px; color: var(--muted); font-weight: 600; }

/* The question the resource list has been filtered down to, when an editor
   followed a link from the coverage screen. */
.admin-question-banner { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; }
.admin-question-label { font-size: 14px; font-weight: 700; }
.admin-question-domain { font-size: 12px; font-weight: 600; color: var(--muted); background: #eceff2; border-radius: 10px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }

/* The coverage screen. One table per section, and the two colours that make it
   a work queue rather than a report: red where a question has nothing at all,
   amber where it has only just enough. The td rule paints over .admin-table's
   row hover, so each state needs its own hover colour as well — same reason
   .row-inactive does. */
/* The headline figure, above the tables. Same numbers the sections carry, but a
   young library is a screenful of red rows, and a bar reads as a job in progress
   where the rows alone read as failure. */
.coverage-progress { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; }
.coverage-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; }
.coverage-progress-top span { font-size: 20px; font-weight: 700; color: var(--success); }
.coverage-progress-note { margin: 0; font-size: 13px; color: var(--muted); }
.coverage-section { margin-bottom: 24px; }
.coverage-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.coverage-heading-meta { font-size: 13px; font-weight: 400; color: var(--muted); }
/* The universal set, listed above the tables and counted in none of them: an
   editor still needs to see what lands in every school's report, and this is the
   only screen where naming that set is worth the space. */
.coverage-universal { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--ink); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; }
.coverage-universal h3 { margin-bottom: 4px; }
.coverage-universal ol { margin: 10px 0 0 20px; font-size: 14px; }
.coverage-universal li { margin-bottom: 6px; }
.coverage-universal-order { font-size: 12px; font-weight: 700; color: var(--muted); }

/* One expandable card per question, in place of the table this screen used to be.
   Closed it is the same one-line row: uid, statement, and the two counts, on a
   grid so the columns line up down the list. Open it is the question as a school
   meets it — the five descriptors, what we can offer against it, the guidance
   link. The grid lives on a span *inside* the summary, because setting display on
   a <summary> loses the disclosure marker in Chrome.
   Prefixed cov- because .q-card / .q-summary / .q-body / .q-count are already
   the school-facing form's collapsible answer cards further up this file, and
   `.q-card .q-summary` there is specific enough to hide this grid outright. */
.cov-list { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
/* One count column, not two. There were two, "Resources" and "No Description",
   and between them they took 210px of an 820px row off the question to hold two
   single digits, one of which is a dash on nearly every row. The blank count now
   rides beside the total as a red flag instead. */
.cov-head, .cov-summary { display: grid; grid-template-columns: 26px minmax(0, 1fr) 96px; gap: 14px; align-items: baseline; }
/* The left padding is the disclosure triangle's gutter. A native ::marker is
   drawn outside the summary's box, in its left margin, so that margin is what
   keeps the triangle off the card's edge — and the head is padded to the same
   place so its labels line up with the row underneath. */
.cov-head { padding: 10px 16px 10px 34px; border-bottom: 1px solid var(--border); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cov-card { border-bottom: 1px solid #e9ecef; break-inside: avoid; }
.cov-card:last-child { border-bottom: none; }
.cov-card > summary { cursor: pointer; padding: 10px 16px 10px 0; list-style-position: outside; margin-left: 34px; }
.cov-card > summary:hover { background: #f8f9fa; }
/* Shown in full, wrapping where it needs to. It was clipped to keep every row one
   line, which made the list shorter and every long question a guess. Set at the
   same 14px the admin tables use: at body size, bold, it was the loudest thing on
   a screen whose point is the counts beside it. */
.coverage-statement { min-width: 0; font-size: 14px; line-height: 1.45; }
.cov-card[open] > summary { background: #f8f9fa; border-bottom: 1px solid #e9ecef; }
/* The total and, when there is one, the flag counting the descriptions still to
   write. Wraps rather than overflows on a question with a lot of both. */
.cov-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; color: var(--muted); white-space: nowrap; }
/* One mark, on the rows that need an editor: nothing mapped, or a description
   still to write. Nothing else is tinted or striped, so the marks are what the
   eye finds scrolling and the screen needs no key to explain them. On the card
   rather than the summary, so it runs the height of an open one, and an inset
   shadow rather than a border so no row shifts sideways by 4px. */
.coverage-action { box-shadow: inset 4px 0 0 var(--accent); }
/* Left-padded to the summary's own gutter, so an open question's descriptors
   start under its statement rather than 2px off it. */
.cov-body { padding: 14px 16px 16px 34px; }
/* What a school would actually be offered against this question. Set apart from
   the descriptors above it, because the descriptors are the assessment and this
   is our answer to them. */
.cov-offer { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e9ecef; }
.cov-offer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cov-offer-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cov-offer-count { font-size: 13px; color: var(--muted); }
.cov-offer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cov-offer li { font-size: 14px; }
.cov-offer-provider { font-size: 12px; font-weight: 600; color: var(--muted); background: #eceff2; border-radius: 10px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
.cov-offer-desc { color: var(--muted); line-height: 1.45; margin-top: 2px; }
/* The one place a mapping's note is shown against the question it was written
   for, so it is quoted rather than just printed. */
.cov-offer-note { margin-top: 4px; padding-left: 10px; border-left: 3px solid var(--border); font-size: 13px; color: var(--ink); }
.cov-offer-gate { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cov-offer-empty { margin: 0; font-size: 14px; color: var(--muted); }
/* "Open Every Question" — a plain link to ?open=1, so it works with scripts off
   and the expanded state can be bookmarked or printed. */
.coverage-openall { margin: 0 0 12px; font-size: 13px; }
.coverage-openall a { font-weight: 600; }
.coverage-openall span { color: var(--muted); margin-left: 8px; }
@media (max-width: 640px) {
  /* The count drops under the statement rather than squeezing it to nothing, and
     names itself: the column header is hidden here, so a bare number would have
     nothing to say what it counts. */
  .cov-head { display: none; }
  .cov-summary { grid-template-columns: 26px minmax(0, 1fr); }
  .cov-count { grid-column: 2; font-size: 13px; }
  .cov-count::before { content: "Resources:"; }
}

/* The descriptor ladder inside an open question card. Nothing here is clipped:
   the point is the five descriptors in full, and a school picks between exactly
   these. (These rules had a screen of their own, /admin/assessment, until it was
   folded into /admin/questions.) */
.assess-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.assess-ladder li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
/* Same colour language as the school-facing form and results page, in a smaller
   badge: .score-badge's colours are scoped to that class, so they are restated. */
.assess-score { flex-shrink: 0; width: 26px; text-align: center; border-radius: 6px; font-weight: 800; font-size: 13px; padding: 2px 0; }
.assess-score.s-neg { background: #fbeae9; color: var(--score-neg); }
.assess-score.s-zero { background: #fbf3da; color: var(--score-zero-text); }
.assess-score.s-pos { background: #e7f4ec; color: var(--score-pos); }
.assess-descriptor { color: var(--ink); line-height: 1.45; }
.assess-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e9ecef; font-size: 13px; }