/* Scorecard, demo dashboard and admin: forms, meters, tables.
   Load only on /scorecard/, /scorecard/demo/ and /admin/scorecard/, after site.css:
   <link rel="stylesheet" href="/assets/scorecard.css?v=1">
   Uses the site.css tokens. Scores are not verdicts, so meters and tier badges use one
   neutral accent at different strengths, never red, amber or green. */

/* --------------------------------------------------------- tokens */
:root{--danger:#B3261E; --danger-hover:#8F1E18; --danger-ink:#FFFFFF; --danger-soft:#FBE9E7; --meter-track:var(--line)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--danger:#F2937F; --danger-hover:#F6B0A1; --danger-ink:#1A0B08; --danger-soft:#3A2220}
}
:root[data-theme="dark"]{--danger:#F2937F; --danger-hover:#F6B0A1; --danger-ink:#1A0B08; --danger-soft:#3A2220}

/* ---------------------------------------------------- question fieldsets */
/* JS shows one at a time; without JS they stack, each with a rule above */
.sc-q{border:0;margin:0 0 var(--s-7);padding:0;min-width:0}
.sc-q + .sc-q{padding-top:var(--s-7);border-top:1px solid var(--line)}
/* floated so the legend sits in normal flow: fieldset padding and border then behave */
.sc-q-legend{float:left;width:100%;display:flex;align-items:flex-start;gap:14px;padding:0;margin:0 0 var(--s-4);
  font:600 var(--fs-lg)/1.3 var(--font-serif);color:var(--ink);letter-spacing:-.006em}
.sc-q > :not(legend){clear:both}
.sc-q-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-top:-3px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line);
  font:600 14px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.sc-q-hint{margin:-4px 0 var(--s-4) 48px;color:var(--muted);font-size:var(--fs-sm)}
@media (max-width:480px){.sc-q-hint{margin-left:0}}

.sc-options{display:grid;gap:10px}
.sc-option{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;min-height:52px;padding:14px 16px;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer;line-height:1.45;
  transition:border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.sc-option:hover{border-color:var(--accent-line);background:color-mix(in srgb,var(--accent-faint) 60%,var(--panel))}
.sc-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.sc-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.sc-option-text{min-width:0}
.sc-option-text b{font-weight:600}
.sc-option-quiet{border-style:dashed;background:transparent;color:var(--muted)}
.sc-option-quiet:has(input:checked){color:var(--ink)}

/* custom radio and checkbox: drawn in CSS, native semantics kept */
.sc-option input[type="radio"],.sc-option input[type="checkbox"],.field-check input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border:1.5px solid var(--line-strong);
  background:var(--panel);display:grid;place-content:center;cursor:pointer;transition:border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.sc-option input[type="radio"]{border-radius:50%}
.sc-option input[type="radio"]:checked{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 4.5px,var(--panel) 5px)}
.sc-option input[type="checkbox"],.field-check input[type="checkbox"]{border-radius:5px}
.sc-option input[type="checkbox"]:checked,.field-check input[type="checkbox"]:checked{border-color:var(--accent);background:var(--accent)}
.sc-option input[type="checkbox"]:checked::after,.field-check input[type="checkbox"]:checked::after{content:"";width:10px;height:5px;margin-top:-2px;
  border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg)}
.sc-option input:focus-visible{outline:none} /* the whole option carries the ring */
.field-check input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* sector picker: cards, two columns above 600px */
.sc-options-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){.sc-options-cards{grid-template-columns:1fr}}
.sc-option-card{grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;padding:14px 16px;min-height:72px}
.sc-option-card .card-icon{margin:0;grid-column:1;grid-row:1}
.sc-option-card .sc-option-text{grid-column:2;grid-row:1}
.sc-option-card input[type="radio"]{grid-column:3;grid-row:1;margin:0}

/* category group heading inside the form */
.sc-group{margin-bottom:var(--s-7)}
.sc-group > .eyebrow{margin-bottom:var(--s-5)}

/* ------------------------------------------------------------- progress */
.sc-progress{margin:0 0 var(--s-6)}
.sc-progress-label{margin:0 0 8px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.sc-progress-label b{color:var(--ink);font-weight:600}
.sc-progress-bar{-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;border:0;border-radius:var(--r-pill);
  background:var(--meter-track);color:var(--accent);overflow:hidden}
.sc-progress-bar::-webkit-progress-bar{background:var(--meter-track);border-radius:var(--r-pill)}
.sc-progress-bar::-webkit-progress-value{background:var(--accent);border-radius:var(--r-pill);transition:width var(--dur-3) var(--ease-out)}
.sc-progress-bar::-moz-progress-bar{background:var(--accent);border-radius:var(--r-pill)}

/* ----------------------------------------------------------- step buttons */
.sc-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:var(--s-6)}
.sc-nav .btn.ghost{margin-right:auto}
.sc-nav > :only-child:not(.ghost){margin-left:auto}
@media (max-width:480px){
  .sc-nav{flex-direction:column-reverse;align-items:stretch}
  .sc-nav .btn{width:100%}
  .sc-nav .btn.ghost{margin-right:0}
}

/* honeypot: off-screen, not display:none (some bots skip hidden fields) */
.sc-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------- fields */
.field{display:grid;gap:6px;margin:0 0 18px;min-width:0}
.field > label{font-weight:600;font-size:var(--fs-sm);color:var(--ink)}
.field input:not([type="checkbox"]):not([type="radio"]),.field select,.field textarea{
  width:100%;min-height:48px;padding:11px 14px;font:400 16px/1.4 var(--font-sans);color:var(--ink);background:var(--panel);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-faint);outline:2px solid var(--accent);outline-offset:2px}
/* select: native control, chevron drawn with gradients so it follows the theme (no image URL) */
.field select{-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
/* .field > p beats .card p, so hints and errors keep their colour inside cards */
.field > .field-hint{margin:0;font-size:14px;color:var(--muted)}
.field > .field-error{margin:0;font-size:14px;font-weight:500;color:var(--danger)}
.field.is-invalid :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]),
.field :is(input,select,textarea)[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]){border-color:var(--danger)}
.field.is-invalid :is(input,select,textarea):focus-visible,
.field :is(input,select,textarea)[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 3px var(--danger-soft);outline-color:var(--danger)}
.field-check{grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start}
.field-check label{font-weight:400;font-size:var(--fs-sm);line-height:1.5;color:var(--ink);cursor:pointer;min-height:44px;padding-top:0}
p.form-status{min-height:1.5em;margin:12px 0 0;font-size:var(--fs-sm);color:var(--muted)}
p.form-status:empty{min-height:0}
p.form-status.is-error{color:var(--danger);font-weight:500}
p.form-status.is-ok{color:var(--accent);font-weight:500}
p.form-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}

/* ------------------------------------------------------------ score hero */
.sc-score{display:grid;gap:var(--s-4);justify-items:start}
.sc-score p{margin:0}
.sc-score-num{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px}
.sc-score-num .num{font:600 clamp(72px,8vw + 40px,120px)/.9 var(--font-serif);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.sc-score-of{font-size:var(--fs-md);color:var(--muted)}
.sc-score .sc-meter{height:12px;max-width:520px}
.sc-score .lede{margin:var(--s-2) 0 0}

/* meter: one accent, whatever the value (overrides the browsers' red/amber/green) */
.sc-meter{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;border:0;border-radius:var(--r-pill);
  background:var(--meter-track);overflow:hidden}
.sc-meter::-webkit-meter-inner-element{display:block}
.sc-meter::-webkit-meter-bar{height:100%;border:0;border-radius:var(--r-pill);background:var(--meter-track)}
.sc-meter::-webkit-meter-optimum-value,
.sc-meter::-webkit-meter-suboptimum-value,
.sc-meter::-webkit-meter-even-less-good-value{background:var(--accent);border-radius:var(--r-pill)}
.sc-meter::-moz-meter-bar{background:var(--accent);border-radius:var(--r-pill)}
.sc-meter:-moz-meter-optimum::-moz-meter-bar,
.sc-meter:-moz-meter-sub-optimum::-moz-meter-bar,
.sc-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--accent)}

/* --------------------------------------------------------------- badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:transparent;color:var(--muted);font:600 12.5px/1.5 var(--font-sans);letter-spacing:.01em;white-space:nowrap}
/* tiers and bands: strength of one accent, not a traffic light */
.badge-tier-low,.badge-band-low{border-color:var(--line-strong);color:var(--ink)}
.badge-tier-mid,.badge-band-mid{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.badge-tier-high,.badge-band-high{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}

/* ---------------------------------------------------------- category bars */
.sc-bars{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sc-bar{display:grid;grid-template-columns:minmax(0,12em) minmax(0,1fr) 3.2ch;gap:6px 16px;align-items:center}
.sc-bar-label{font-size:var(--fs-sm);color:var(--ink);min-width:0}
.sc-bar-value{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:560px){
  .sc-bar{grid-template-columns:minmax(0,1fr) 3.2ch}
  .sc-bar-label{grid-column:1/-1}
}
.sc-bars.compact{gap:8px}
.sc-bars.compact .sc-bar{grid-template-columns:minmax(0,16em) minmax(0,1fr) 3.2ch}
.sc-bars.compact .sc-bar-label{font-size:13.5px;color:var(--muted)}
.sc-bars.compact .sc-meter{height:6px}
.sc-bars.compact .sc-bar-value{font-size:13.5px;font-weight:500}
@media (max-width:560px){.sc-bars.compact .sc-bar{grid-template-columns:minmax(0,1fr) 3.2ch}}

/* --------------------------------------------------------------- gate */
.sc-gate{max-width:640px}
.sc-gate h2{font-size:var(--fs-xl)}
.sc-gate > p{color:var(--muted)}
.sc-gate-form{margin-top:var(--s-5)}
.sc-gate-form .btn{width:100%;margin-top:4px}
@media (min-width:600px){.sc-gate-form .btn{width:auto}}

/* ------------------------------------------------------- result rhythm */
/* .sc-result is a <section>, so undo site.css's section padding and rule; one column, one
   width for every result card, and even spacing between everything in it */
section.sc-result{padding:0;border-top:0;max-width:760px}
.sc-result > *{margin-top:0;margin-bottom:0}
.sc-result > * + *{margin-top:var(--s-6)}
.sc-result > h2 + *{margin-top:var(--s-5)}
.sc-result > .sc-score + p{margin-top:var(--s-3)}
.sc-result > .form-note{margin-top:var(--s-4)}
.sc-result .sc-gate,.sc-result .sc-report{max-width:none}
/* the section after the hero loses its rule when the one between is hidden by the result */
.page-hero + section[hidden] + section{border-top:0}

/* --------------------------------------------------------------- report */
.sc-report{max-width:760px}
.sc-report > h3{margin:var(--s-7) 0 var(--s-3)}
.sc-report > h2 + p,.sc-report > p{margin-top:var(--s-3)}
.sc-report > .sc-score{margin-top:var(--s-5)}
.sc-report > .sc-bars{margin-top:var(--s-4)}
.sc-cat{padding:var(--s-6) 0;border-top:1px solid var(--line)}
.sc-cat h3,.sc-cat h4{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 var(--s-3);font:600 var(--fs-base)/1.4 var(--font-sans)}
.sc-cat:first-of-type{margin-top:var(--s-4)}
.sc-cat p:last-child{margin-bottom:0}
.sc-next{margin-top:var(--s-4)}
.sc-next h4{font:600 var(--fs-lg)/1.3 var(--font-serif);letter-spacing:-.006em;margin:0 0 var(--s-2)}
.sc-insight + .sc-insight{margin-top:var(--s-4)}
.sc-cat .sc-bar{margin-bottom:var(--s-4)}
.sc-cat p{color:var(--ink)}
.sc-insight{margin:var(--s-5) 0;padding:18px 20px;border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--accent-faint)}
.sc-insight p{margin:0}
.sc-insight p + p{margin-top:8px}
.sc-insight-label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sc-source{font-size:13px;color:var(--muted)}

/* --------------------------------------------------------------- notices */
.notice{margin:0 0 var(--s-6);padding:14px 18px;border:1px solid var(--accent-line);border-left:3px solid var(--accent);border-radius:var(--r-sm);
  background:var(--accent-faint);color:var(--ink);font-size:var(--fs-sm)}
.notice p{margin:0}
.notice p + p{margin-top:6px}
.notice.notice-quiet{border:1px solid var(--line);background:transparent;color:var(--muted);font-size:14px}

/* -------------------------------------------------------------- dashboard */
.dash-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin:0 0 var(--s-4)}
.dash-filters .field{flex:1 1 180px;margin:0}
.dash-filters .btn{flex:none}
.dash-count{margin:0 0 12px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}

.table-wrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);-webkit-overflow-scrolling:touch}
.table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.data-table th,.data-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);white-space:nowrap}
.data-table td{color:var(--ink)}
.data-table th{position:sticky;top:0;z-index:1;background:var(--panel);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  box-shadow:inset 0 -1px 0 var(--line-strong)}
.data-table .num{text-align:right}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr{transition:background-color var(--dur-2) var(--ease-out)}
.data-table tbody tr:hover td{background:var(--accent-faint)}
.data-table tbody tr.is-selected td{background:var(--accent-soft)}
.data-table tbody tr.is-selected td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.th-sort{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin:-6px -8px;padding:6px 8px;border:0;border-radius:var(--r-xs);background:none;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.th-sort:hover{color:var(--ink)}
.th-sort::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.3}
th[aria-sort] .th-sort{color:var(--ink)}
th[aria-sort] .th-sort::after{opacity:1}
th[aria-sort="ascending"] .th-sort::after{transform:rotate(180deg)}
.data-table th.num .th-sort{flex-direction:row-reverse}
.data-table.compact th,.data-table.compact td{padding:8px 12px}
@media (pointer:coarse){.th-sort{min-height:44px}}

.dash-lead h2,.dash-lead h3{margin-bottom:var(--s-4)}
.dash-dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.dash-dl > div{padding:10px 0;border-top:1px solid var(--line);min-width:0}
.dash-dl dt{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dash-dl dd{margin:2px 0 0;color:var(--ink);overflow-wrap:anywhere}
@media (max-width:560px){.dash-dl{grid-template-columns:1fr}}
.dash-prep{margin-top:var(--s-5);padding:18px 20px;border:1px dashed var(--accent-line);border-radius:var(--r-sm);background:var(--accent-faint)}
.dash-prep p,.dash-prep li{color:var(--ink)}
.dash-prep > :first-child{margin-top:0}
.dash-prep > :last-child{margin-bottom:0}
.dash-prep ul{padding-left:1.2em}
.dash-agg{display:grid;gap:var(--s-6)}
.dash-agg h3{margin-bottom:var(--s-3)}

/* ---------------------------------------------------------------- danger */
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--danger-ink)}
.btn.danger:hover{background:var(--danger-hover);border-color:var(--danger-hover);color:var(--danger-ink);box-shadow:none}
.btn.danger:focus-visible{outline-color:var(--danger)}
.btn.ghost.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn.ghost.danger:hover{background:var(--danger-soft);color:var(--danger)}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion:reduce){
  .sc-progress-bar::-webkit-progress-value{transition:none}
}

/* ----------------------------------------------------------------- print */
@media print{
  .sc-noprint,.sc-nav,.sc-gate,.sc-hp,.dash-filters,form{display:none!important}
  :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{--meter-track:#ddd;--danger:#8F1E18}
  .sc-report{max-width:none}
  .sc-cat,.sc-insight,.sc-bar,.card{break-inside:avoid}
  .sc-meter,.sc-progress-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sc-meter::-webkit-meter-optimum-value,.sc-meter::-webkit-meter-suboptimum-value,.sc-meter::-webkit-meter-even-less-good-value{background:#1D5C4A}
  .sc-meter::-moz-meter-bar{background:#1D5C4A}
  .sc-insight{background:none;border-left-color:#1D5C4A}
  .badge{border-color:#999;background:none;color:#000}
  .sc-score-num .num{font-size:64pt}
  .table-wrap{max-height:none;overflow:visible;border:0}
  .data-table th{position:static}
}
@page{size:A4}