/* Gareth's STANDOUT Agency Scorecard (ACCEPTANCE-M6): what his page needs on top of scorecard.css (design/tokens.css)
   and motion.css (Callum's v3 look and motion, shared: line 6 as amended, D106): the 1–5 scale, the question
   number, the result name line and the eight lever cards, and how those sit in the v3 look (his answers on the
   dark question screen, his description beside the book). Band colours are his (getBandColor), used for bars,
   pills and the score only. */

.form-note { font-size: 14px; color: var(--aoc-muted); margin-top: var(--s-3); }

/* Questions: his 1–5 scale. The radio fills its label, so the whole circle is the tap target. */
.question-num { font-size: 14px; font-weight: var(--fw-sub); margin-bottom: var(--s-2); }
.likert-row { display: grid; grid-template-columns: repeat(5, minmax(44px, 72px)); justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.likert-option { position: relative; display: flex; align-items: center; justify-content: center; min-height: 56px; min-width: 44px; border: 2px solid var(--aoc-line); border-radius: 50%; aspect-ratio: 1 / 1; font-size: 20px; font-weight: var(--fw-head); color: var(--aoc-black); background: var(--aoc-white); cursor: pointer; user-select: none; }
.likert-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.likert-option:hover { border-color: var(--aoc-black); }
.likert-option.selected { border-color: var(--aoc-black); background: var(--aoc-yellow); }
.likert-option:focus-within { outline: 3px solid var(--aoc-black); outline-offset: 2px; }
.likert-labels { display: flex; justify-content: space-between; font-size: 13px; font-weight: var(--fw-sub); color: var(--aoc-muted); margin-bottom: var(--s-5); }

/* Results */
.result-name { font-size: 20px; font-weight: var(--fw-head); color: var(--aoc-black); margin-top: var(--s-2); }
.result-tagline { font-size: 15px; color: var(--aoc-muted); }
.result-tagline:empty { display: none; }
.desc-label { font-size: 13px; font-weight: var(--fw-sub); letter-spacing: 0.04em; text-transform: uppercase; color: var(--aoc-black); margin-bottom: var(--s-2); }
.score-widget-label { margin: var(--s-3) 0 0; }
.levers-section { margin-bottom: var(--s-6); }
.levers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.lever-card { border: 2px solid var(--aoc-line); border-radius: var(--s-2); padding: var(--s-4); min-width: 0; }
.lever-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-2); }
.lever-name { font-size: 18px; font-weight: var(--fw-head); color: var(--aoc-black); }
.lever-pct { font-size: 22px; font-weight: var(--fw-display); color: var(--aoc-black); }
.lever-bar { height: 6px; background: var(--aoc-line); border-radius: 3px; overflow: hidden; margin-bottom: var(--s-2); }
.lever-bar-fill { height: 100%; border-radius: 3px; }
.lever-band-pill { display: inline-block; font-size: 12px; font-weight: var(--fw-sub); letter-spacing: 0.04em; text-transform: uppercase; color: var(--aoc-black); border: 2px solid var(--aoc-line); border-radius: var(--s-4); padding: 0 var(--s-2); margin-bottom: var(--s-2); }
.lever-desc { font-size: 15px; line-height: 1.6; }

/* In the v3 look (motion.css): his 1–5 answers on the dark question screen, white circles turning yellow when picked */
html[data-scorecard="gareth-v1"] #screen-questions .likert-option { background: none; border-color: #333; color: var(--aoc-white); transition: border-color 200ms, background-color 260ms, color 200ms; }
html[data-scorecard="gareth-v1"] #screen-questions .likert-option.selected { border-color: var(--aoc-yellow); background: var(--aoc-yellow); color: var(--aoc-black); }
html[data-scorecard="gareth-v1"] #screen-questions .likert-option:focus-within { outline-color: var(--aoc-yellow); }
html[data-scorecard="gareth-v1"] #screen-questions .likert-labels,
html[data-scorecard="gareth-v1"] #screen-questions .question-num { color: #a3a3a3; }
@media (hover: hover) {
  html[data-scorecard="gareth-v1"] #screen-questions .likert-option:hover { border-color: var(--aoc-white); }
  html[data-scorecard="gareth-v1"] #screen-questions .likert-option.selected:hover { border-color: var(--aoc-yellow); }
}
/* The logo is the real file as an image (not typed text); motion.css's background copy of it is not needed.
   On the dark question screen the mark and wordmark (motion.js) stand in for it, as on Callum's v3. */
html[data-scorecard="gareth-v1"] .logo { background: none; }
.logo img { display: block; width: 133px; height: 40px; object-fit: contain; object-position: left center; }
#screen-questions .logo img { display: none; }
/* His band paragraph sits under the score, beside the book (v3's grid areas) */
html[data-scorecard="gareth-v1"] .overall-desc { grid-area: desc; }
/* The map section: more room above it than v3's (his hero has the name and role lines too), so on a 1280 x 900
   screen its heading starts below the first view and the letters fill as they are scrolled to, as v3's do (D118) */
html[data-scorecard="gareth-v1"] .map-section { padding-top: var(--s-7); }

@media (max-width: 900px) {
  .levers-grid { grid-template-columns: 1fr; }
  .likert-row { grid-template-columns: repeat(5, minmax(44px, 1fr)); }
  .likert-option { font-size: 18px; }
}