/* ═══════════════════════════════════════════════════════════════════════════
   YCM Assessment — The Essential Five self-assessment
   Light-ground rebuild for achievecentre.com.

   SCOPING. The source CSS assumed it owned the document: it set :root, styled
   body, and targeted bare elements. Nothing here does. Every rule is scoped to
   .ycm-root or #ycm-quiz, and the token block rides on those rather than :root.

   The ACHIEVE theme (measured live, 2026-09-12) styles bare h1-h6, p and a, and
   sets `input,button,textarea,select{font:inherit}`. None of those use
   !important, so a class or ID scope beats them on specificity. The reset block
   below re-establishes the properties that inherit through anyway.

   COLOUR. ACHIEVE's own palette — green #206426, gold #E0C968, ink #444444 —
   taken by usage frequency from the live theme stylesheet. Ratios in the
   comments are measured against #FFFFFF, which is both the real page ground and
   the modal's panel. Green is the system colour; gold appears only on the CTA.

   TYPE. nunito-sans, served by the theme's existing Typekit kit, so this plugin
   enqueues no font. The kit has four static weights (300/400/700/900) and no
   width axis, so the hierarchy is built from those plus size and colour — there
   are no font-variation-settings anywhere in this file for that reason.

   Nothing glows. There is no coloured box-shadow in this file: rings and
   borders are `border`/`outline`, and the only box-shadows left are neutral
   black drop shadows for depth.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────────
   ACHIEVE's own palette, taken by usage frequency from the live theme stylesheet
   rather than from a style guide: green #206426 (232 uses), gold #E0C968 (218),
   ink #444444 (155), plus #094409, #D1E2D0, #DDDDDD, #EDEDED and #D32F2F.

   Green is the SYSTEM colour — headings, accents, the answer scale. Gold is the
   ACTION colour and appears in exactly one place, the primary button. That split
   is ACHIEVE's own, and keeping it is why the CTA reads as the CTA.

   Ratios are measured against #FFFFFF, which is the real page ground and also the
   modal's panel. ───────────────────────────────────────────────────────────── */
.ycm-root,
#ycm-quiz {
  /* Grounds */
  --ycm-page: #FFFFFF;                /* page and modal panel */
  --ycm-surface: #F4F7F3;             /* dial column — a mint-biased quiet grey */

  /* Ink */
  --ycm-ink: #444444;                 /*  9.74:1  body text */
  --ycm-ink-2: #5F5F5F;               /*  6.39:1  secondary text */
  --ycm-ink-3: #6E6E6E;               /*  5.10:1  text floor */
  --ycm-ink-4: #AAAAAA;               /*  2.32:1  marks only, never words */
  --ycm-hair: #DDDDDD;                /*  decorative rule */
  --ycm-hair-2: #EDEDED;              /*  decorative rule, lighter */
  --ycm-edge: #767676;                /*  4.54:1  interactive boundary, WCAG 1.4.11 */

  /* Brand */
  --ycm-green: #206426;               /*  7.21:1  primary — headings, accent, focus */
  --ycm-green-deep: #094409;          /* 11.40:1  pressed, emphasis */
  --ycm-mint: #D1E2D0;                /*  unfilled track, tint */
  --ycm-gold: #E0C968;                /*  THE CTA fill. Nowhere else. */
  --ycm-gold-deep: #C9A81B;           /*  CTA hover */
  --ycm-alert: #D32F2F;               /*  4.98:1  validation */

  /* The answer scale: one hue, light to dark. More green means more.
     These are FILL ONLY and carry no text, which is what frees them from the
     4.5:1 bar the old cover ramp had to satisfy. The value is carried in text by
     the numeral row, the word above the knob, and each radio's aria-label. */
  --ycm-ramp-1: #CAE5CA;
  --ycm-ramp-2: #9CC49C;
  --ycm-ramp-3: #6DA16E;
  --ycm-ramp-4: #418344;
  --ycm-ramp-5: #206426;
  --ycm-ramp-grad: linear-gradient(90deg,
    #CAE5CA, #CAE5CA, #9CC49C, #6DA16E, #418344, #206426, #206426);

  /* The knob is a constant #206426 at every value, so its numeral is white at
     every value — 7.21:1, with no per-stop flipping rule to get wrong. */
  --ycm-knob-ink: #FFFFFF;

  --ycm-m-prose: 32em;
  --ycm-m-wide: 40em;
  --ycm-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* nunito-sans is served by the ACHIEVE theme's Adobe Typekit kit, which is
     already loaded on every page, so this plugin enqueues no font at all and
     makes no third-party request. Typekit licensing forbids self-hosting, hence
     the open-source "Nunito Sans" (same typeface) as the fallback for anywhere
     the kit is absent — a preview, a staging box, a different theme. */
  --ycm-sans: 'nunito-sans', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────────────────────
   The properties that inherit through from the theme, re-established. Scoped to
   the two roots so nothing leaks back out onto the host page. */
.ycm-root,
.ycm-root *,
.ycm-root *::before,
.ycm-root *::after,
#ycm-quiz,
#ycm-quiz *,
#ycm-quiz *::before,
#ycm-quiz *::after {
  box-sizing: border-box;
}

#ycm-quiz {
  /* The theme has no dark-mode CSS, but a bare <dialog> still resolves Canvas /
     CanvasText from the UA. Pinning the scheme keeps the panel light even in a
     browser set to dark. */
  color-scheme: light;
  font-family: var(--ycm-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ycm-ink);
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
}

#ycm-quiz h1,
#ycm-quiz h2,
#ycm-quiz h3,
#ycm-quiz h4,
#ycm-quiz p,
#ycm-quiz ul,
#ycm-quiz ol,
#ycm-quiz li,
#ycm-quiz fieldset,
#ycm-quiz legend,
#ycm-quiz figure,
#ycm-quiz blockquote {
  margin: 0;
  padding: 0;
}

#ycm-quiz h1,
#ycm-quiz h2,
#ycm-quiz h3,
#ycm-quiz h4 {
  /* The theme repaints every bare heading #206426 at 41.6px. Take it back. */
  font-family: var(--ycm-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ycm-ink);
}

#ycm-quiz p {
  font-size: 1rem;
  line-height: 1.5;
  color: inherit;
}

#ycm-quiz ul,
#ycm-quiz ol {
  list-style: none;
}

#ycm-quiz a {
  color: var(--ycm-green);
}

#ycm-quiz button,
#ycm-quiz input,
#ycm-quiz select,
#ycm-quiz textarea {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: inherit;
  margin: 0;
}

#ycm-quiz button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  text-align: inherit;
}

/* ── Shared type roles ───────────────────────────────────────────────────── */
#ycm-quiz .ycm-silk {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78125rem;
  letter-spacing: .005em;
  line-height: 1.45;
  color: var(--ycm-ink-3);
}

/* Measured values: scores, tick numerals, scale bounds, counters.
   Previously Martian Mono. Now nunito-sans with tabular figures, so columns still
   line up while the page stays in one brand typeface. */
#ycm-quiz .ycm-mono {
  font-family: var(--ycm-sans);
  font-weight: 400;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── Trigger ─────────────────────────────────────────────────────────────── */
.ycm-root {
  font-family: var(--ycm-sans);
}

.ycm-root .ycm-trigger {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-block;
  font-family: var(--ycm-sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: .002em;
  color: var(--ycm-ink);
  background: var(--ycm-gold);
  border: none;
  border-radius: 999px;
  padding: 16px 28px;
  transition: transform .18s var(--ycm-ease);
}

.ycm-root .ycm-trigger:hover {
  background: var(--ycm-gold-deep);
  transform: translateY(-1px);
}

.ycm-root .ycm-trigger:active {
  transform: translateY(0);
}

.ycm-root .ycm-trigger:focus-visible {
  outline: 2px solid var(--ycm-green);
  outline-offset: 3px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
#ycm-quiz .ycm-btn-lit,
#ycm-quiz .ycm-btn-ink {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  font-family: var(--ycm-sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .002em;
  color: var(--ycm-ink);
  background: var(--ycm-gold);
  border: none;
  border-radius: 999px;
  padding: 16px 28px;
  /* NOTE: `background` is deliberately NOT transitioned.
     "Next set" goes disabled -> enabled, and the disabled state has a different
     fill. If the fill only arrives via a transition, then anywhere the document
     timeline is not advancing — a throttled or not-yet-painted tab — the
     transition pins at its start value and the primary CTA renders as
     ground-coloured text on the ground: invisible, and still clickable. The
     fill is state, so it switches instantly; only the lift is animated. */
  transition: transform .18s var(--ycm-ease);
}

#ycm-quiz .ycm-btn-ink {
  font-size: 0.96875rem;
  padding: 15px 24px;
}

#ycm-quiz .ycm-btn-lit:hover,
#ycm-quiz .ycm-btn-ink:hover {
  background: var(--ycm-gold-deep);
  transform: translateY(-1px);
}

#ycm-quiz .ycm-btn-lit:active,
#ycm-quiz .ycm-btn-ink:active {
  transform: translateY(0);
  background: var(--ycm-gold-deep);
}

#ycm-quiz .ycm-btn-lit:focus-visible,
#ycm-quiz .ycm-btn-ink:focus-visible {
  outline: 2px solid var(--ycm-green);
  outline-offset: 3px;
}

#ycm-quiz .ycm-btn-lit[disabled] {
  cursor: not-allowed;
  transform: none;
  background: transparent;
  border: 1.5px solid var(--ycm-edge);
  color: var(--ycm-ink-3);
  padding: 14.5px 26.5px;   /* border replaces 1.5px of the fill's box */
}

#ycm-quiz .ycm-btn-etch {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
  color: var(--ycm-ink-2);
  border: 1.5px solid var(--ycm-edge);
  border-radius: 999px;
  font-family: var(--ycm-sans);
  font-weight: 700;
  font-size: 0.90625rem;
  padding: 11.5px 18.5px;
  transition: border-color .18s var(--ycm-ease), color .18s var(--ycm-ease),
              transform .18s var(--ycm-ease);
}

#ycm-quiz .ycm-btn-etch:hover {
  color: var(--ycm-ink);
  border-color: var(--ycm-ink);
  transform: translateY(-1px);
}

#ycm-quiz .ycm-btn-etch:active {
  transform: translateY(0);
}

#ycm-quiz .ycm-btn-etch:focus-visible {
  outline: 2px solid var(--ycm-green);
  outline-offset: 2px;
}

/* Disabled controls are exempt from WCAG 1.4.3, but "exempt" is not a reason to
   make them unreadable — and --ink-4 is marks-only by rule, never words. The
   text stays at the floor (5.37:1) and "disabled" is carried by the softened
   border, the cursor, and the disabled attribute itself, which AT announces. */
#ycm-quiz .ycm-btn-etch[disabled] {
  cursor: not-allowed;
  transform: none;
  color: var(--ycm-ink-3);
  border-color: var(--ycm-hair);
}

/* ── Dialog shell ────────────────────────────────────────────────────────── */
#ycm-quiz {
  width: min(1340px, 100vw - 26px);
  /* A modal dialog gets inset:0 + margin:auto from the UA, so height:auto
     stretches to the viewport. fit-content sizes it to its contents. */
  height: fit-content;
  min-height: min(560px, 100dvh - 26px);
  max-height: calc(100dvh - 26px);
  max-width: none;
  padding: 0;
  border: 1px solid var(--ycm-edge);
  border-radius: 20px;
  background: var(--ycm-page);
  overflow: hidden;
  /* Neutral, not coloured. The panel is 1.07:1 against the theme's white page,
     so its edge is carried by this border, this shadow and the backdrop — not
     by the ground colour, which cannot do it. */
  box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.38);
}

#ycm-quiz::backdrop {
  background: rgba(9, 68, 9, 0.55);
  backdrop-filter: blur(6px);
}

/* Scoped to [open] so the closed dialog still gets the UA's display:none. */
#ycm-quiz[open] {
  display: flex;
  flex-direction: column;
  animation: ycm-quiz-in .34s var(--ycm-ease);
}

@keyframes ycm-quiz-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

#ycm-quiz .ycm-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#ycm-quiz .ycm-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--ycm-hair);
}

#ycm-quiz .ycm-head-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

#ycm-quiz .ycm-head .ycm-mono {
  font-size: 0.75rem;
  color: var(--ycm-ink-3);
}

#ycm-quiz .ycm-pips {
  display: flex;
  gap: 5px;
}

#ycm-quiz .ycm-pips i {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--ycm-hair);
}

#ycm-quiz .ycm-pips i.on {
  background: var(--ycm-green);
}

/* The current set is marked by shape as well as colour: on-vs-now was a 1.27:1
   hue step in the source, which is nothing in greyscale. */
#ycm-quiz .ycm-pips i.now {
  background: transparent;
  border: 1.5px solid var(--ycm-green);
  height: 8px;
  margin-top: -2px;
  border-radius: 3px;
}

#ycm-quiz .ycm-close {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: none;
  border-radius: 999px;
  border: 1.5px solid var(--ycm-edge);
  padding: 9px 15px;
  min-height: 40px;
  font-family: var(--ycm-sans);
  font-weight: 700;
  font-size: 0.84375rem;
  letter-spacing: .02em;
  color: var(--ycm-ink);
  transition: border-color .2s var(--ycm-ease), color .2s var(--ycm-ease),
              background .2s var(--ycm-ease);
}

#ycm-quiz .ycm-close:hover {
  color: var(--ycm-page);
  background: var(--ycm-green);
  border-color: var(--ycm-green);
}

#ycm-quiz .ycm-close:focus-visible {
  outline: 3px solid var(--ycm-green);
  outline-offset: 2px;
}

/* ── Body grid ───────────────────────────────────────────────────────────── */
#ycm-quiz .ycm-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 38%);
  transition: grid-template-columns .45s var(--ycm-ease);
}

/* At the reading the words are the content, so give them the width. */
#ycm-quiz .ycm-body.is-result {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 34%);
}

/* Only this column ever scrolls, so the page behind never moves. */
#ycm-quiz .ycm-stage-wrap {
  overflow-y: auto;
  padding: 26px 30px 30px;
  min-height: 0;
}

#ycm-quiz .ycm-dial {
  border-left: 1px solid var(--ycm-hair);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
  background: var(--ycm-surface);
}

#ycm-quiz .ycm-dial svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 200px;
  max-height: 330px;
  margin: 0 auto;
}

#ycm-quiz .ycm-dial-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--ycm-hair-2);
  padding-top: 12px;
  margin-top: auto;
}

#ycm-quiz #ycm-dialNote .ycm-silk {
  display: block;
  margin-bottom: 11px;
}

#ycm-quiz #ycm-dialNote:not(:empty) {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ycm-hair-2);
}

#ycm-quiz #ycm-dialNote .ycm-compound {
  margin-top: 20px;
}

#ycm-quiz .ycm-stage {
  min-height: 0;
}

/* ── Dial ────────────────────────────────────────────────────────────────── */
#ycm-quiz .ycm-eng-ring {
  fill: none;
  stroke: var(--ycm-hair);
  stroke-width: 1;
}

#ycm-quiz .ycm-eng-ring.major {
  stroke: var(--ycm-edge);
  fill: var(--ycm-surface);
}

#ycm-quiz .ycm-eng-num {
  font-family: var(--ycm-sans);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: .01em;
  fill: var(--ycm-ink-3);
}

#ycm-quiz .ycm-eng-num.on { fill: var(--ycm-green); }

#ycm-quiz .ycm-eng-num.low {
  fill: var(--ycm-ink);
  font-weight: 700;
}

/* A soft petal along the weakest spoke — emphasis, not a target. */
#ycm-quiz .ycm-mark-petal {
  fill: var(--ycm-green);
  opacity: .26;
}

#ycm-quiz .ycm-mark-dot {
  fill: var(--ycm-green);
  stroke: var(--ycm-page);
  stroke-width: 2;
}

#ycm-quiz .ycm-trace {
  fill: rgba(32, 100, 38, 0.16);
  stroke: var(--ycm-green);
  stroke-width: 2.25;
  stroke-linejoin: round;
}

#ycm-quiz .ycm-trace[hidden] { display: none; }

#ycm-quiz .ycm-node {
  fill: var(--ycm-green);
  stroke: var(--ycm-page);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}

#ycm-quiz .ycm-web line {
  stroke: var(--ycm-green);
  stroke-width: 1;
  opacity: 0;
}

#ycm-quiz .ycm-web line.on {
  opacity: .30;
  transition: opacity .6s var(--ycm-ease);
}

@keyframes ycm-node-breathe {
  0%, 100% { r: 3.5; opacity: .75; }
  50%      { r: 5.4; opacity: 1; }
}

#ycm-quiz .ycm-node.breathing {
  animation: ycm-node-breathe 1.05s ease-in-out infinite;
}

/* ── Level header ────────────────────────────────────────────────────────── */
#ycm-quiz .ycm-lvl-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--ycm-hair-2);
}

#ycm-quiz .ycm-lvl-head .ycm-mono {
  font-size: 0.75rem;
  color: var(--ycm-ink-3);
}

#ycm-quiz .ycm-lvl-head .of { color: var(--ycm-green); }

/* ── Statement + 5-stop track ────────────────────────────────────────────── */
#ycm-quiz .ycm-stmt {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--ycm-hair-2);
  opacity: 0;
  transform: translateY(10px);
  animation: ycm-stmt-in .42s var(--ycm-ease) forwards;
}

#ycm-quiz .ycm-stmt:nth-child(2) { animation-delay: .04s; }
#ycm-quiz .ycm-stmt:nth-child(3) { animation-delay: .10s; }
#ycm-quiz .ycm-stmt:nth-child(4) { animation-delay: .16s; }

@keyframes ycm-stmt-in {
  to { opacity: 1; transform: none; }
}

#ycm-quiz .ycm-stmt-text {
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.42;
  color: var(--ycm-ink);
  margin: 0 0 18px;
  max-width: 34em;
}

#ycm-quiz .ycm-stmt.answered .ycm-stmt-text { color: var(--ycm-ink-2); }

#ycm-quiz .ycm-track {
  border: none;
  margin: 0;
  padding: 0;
  position: relative;
  min-width: 0;
}

#ycm-quiz .ycm-track legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#ycm-quiz .ycm-track-rail {
  position: relative;
  height: 52px;
  touch-action: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  overflow-x: clip;
  overflow-y: visible;
}

/* The scale carries the whole ramp, dimmed: you can see where an answer would
   take you before you give it. Answering lights the same ramp to your position. */
#ycm-quiz .ycm-track-rail::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 15px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 4px;
  background: var(--ycm-ramp-grad);
  opacity: .20;
  transition: opacity .28s var(--ycm-ease);
}

#ycm-quiz .ycm-stmt.answered .ycm-track-rail::before { opacity: .28; }

/* clip-path rather than scaleX: scaling would stretch the gradient with the bar,
   so the colour under the knob would not match the knob's own value. */
#ycm-quiz .ycm-track-fill {
  position: absolute;
  left: 10%;
  top: 15px;
  height: 8px;
  width: 80%;
  transform: translateY(-50%);
  border-radius: 4px;
  background: var(--ycm-ramp-grad);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .34s var(--ycm-ease);
}

#ycm-quiz .ycm-track-stop {
  position: relative;
  display: grid;
  place-items: center;
  height: 52px;
  grid-template-rows: 1fr auto;
}

#ycm-quiz .ycm-track-stop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

#ycm-quiz .ycm-track-stop .dot {
  grid-row: 1;
  align-self: center;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ycm-ink-3);
  transition: background .2s var(--ycm-ease), transform .16s var(--ycm-ease),
              opacity .2s var(--ycm-ease);
  pointer-events: none;
}

#ycm-quiz .ycm-track-stop:hover .dot {
  transform: scale(1.7);
  background: var(--ycm-ink);
}

#ycm-quiz .ycm-track-stop.past .dot,
#ycm-quiz .ycm-track-stop.at .dot { opacity: 0; }

#ycm-quiz .ycm-track-stop .num {
  grid-row: 2;
  font-family: var(--ycm-sans);
  font-weight: 400;
  font-feature-settings: 'tnum' 1;
  font-size: 0.875rem;
  color: var(--ycm-ink-2);
  pointer-events: none;
  transition: color .2s var(--ycm-ease);
}

/* The numerals stay ink. The scale lives in the bar's fill, not in the type —
   which is what lets the fill be a true single-hue brand ramp instead of five
   colours each forced to clear 4.5:1 as text.

   A reached numeral darkens to the brand green; the chosen one is additionally
   marked by weight, so the selection survives a colour-vision difference and
   never depends on hue alone. */
#ycm-quiz .ycm-track-stop.past .num { color: var(--ycm-green); }

#ycm-quiz .ycm-track-stop.at .num {
  font-weight: 700;
  color: var(--ycm-green-deep);
}

#ycm-quiz .ycm-track-stop input:focus-visible ~ .dot {
  opacity: 1;
  background: var(--ycm-green);
  transform: scale(1.7);
}

/* The knob sits over the selected stop and swallowed its focus ring entirely,
   so the indicator goes on the stop's own box where nothing can cover it. */
#ycm-quiz .ycm-track-stop:has(input:focus-visible) {
  outline: 2.5px solid var(--ycm-green);
  outline-offset: -2px;
  border-radius: 6px;
}

#ycm-quiz .ycm-knob-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform .34s var(--ycm-ease);
}

#ycm-quiz .ycm-knob {
  position: absolute;
  top: 15px;
  left: 10%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: var(--ycm-green);
  /* Neutral drop shadow, not a glow: it lifts the knob off the rail. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform .28s var(--ycm-ease);
  display: grid;
  place-items: center;
}

#ycm-quiz .ycm-knob span {
  font-family: var(--ycm-sans);
  font-weight: 400;
  /* line-height:1 keeps the numeral inside the 26px knob when the reader's
     browser font-size preference scales this rem up.
     This is the one label left under the 12px floor the rest of the component
     holds, and it stays there deliberately: it is bounded by the 26px knob, and
     it is not the only carrier of the value — the selected word sits above it,
     the numeral row below it, and the radio's own aria-label announces it. */
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--ycm-knob-ink);
}

/* The knob is a constant brand green at every value, so its numeral is white at
   every value. ACHIEVE green is dark and ACHIEVE gold is light, so a knob that
   took each answer's own colour would land stops 3 and 4 in a band where neither
   a white nor a dark label clears 4.5:1. A constant knob removes that problem
   rather than tuning around it, and the value is already carried by the knob's
   position, the numeral row, and the word above it. */

#ycm-quiz .ycm-stmt.answered .ycm-knob {
  transform: translate(-50%, -50%) scale(1);
}

#ycm-quiz .ycm-track-rail.dragging .ycm-knob-layer {
  transition: transform .12s var(--ycm-ease);
}

/* The fill has to keep pace with the knob under the finger, or it trails it. */
#ycm-quiz .ycm-track-rail.dragging .ycm-track-fill {
  transition: clip-path .12s var(--ycm-ease);
}

#ycm-quiz .ycm-track-rail.dragging .ycm-knob {
  transform: translate(-50%, -50%) scale(1.14);
}

#ycm-quiz .ycm-track-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  padding: 0 calc(10% - 14px);
}

#ycm-quiz .ycm-track-ends span {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ycm-ink-3);
}

#ycm-quiz .ycm-track-word {
  position: absolute;
  top: -21px;
  left: 10%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 0.78125rem;
  color: var(--ycm-green);
  opacity: 0;
  white-space: nowrap;
  transition: opacity .22s var(--ycm-ease);
}

#ycm-quiz .ycm-stmt.answered .ycm-track-word { opacity: 1; }

/* ── Level nav ───────────────────────────────────────────────────────────── */
#ycm-quiz .ycm-lvl-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 4px;
}

#ycm-quiz .ycm-lvl-nav .left {
  display: flex;
  gap: 10px;
  align-items: center;
}

#ycm-quiz .ycm-lvl-count {
  font-family: var(--ycm-sans);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ycm-ink-3);
}

/* ── The settling beat ───────────────────────────────────────────────────── */
#ycm-quiz .ycm-settling {
  display: grid;
  align-content: center;
  gap: 18px;
  max-width: 32em;
  min-height: 320px;
}

#ycm-quiz .ycm-settling .ycm-silk { color: var(--ycm-ink-2); }

#ycm-quiz .ycm-settling-bar {
  height: 2px;
  border-radius: 2px;
  background: var(--ycm-hair);
  overflow: hidden;
}

#ycm-quiz .ycm-settling-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ycm-green);
  transform-origin: left center;
  transform: scaleX(0);
  animation: ycm-settle-fill 1.45s var(--ycm-ease) forwards;
}

@keyframes ycm-settle-fill {
  to { transform: scaleX(1); }
}

#ycm-quiz .ycm-settling-note {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ycm-ink-2);
}

/* ── The reading ─────────────────────────────────────────────────────────── */
#ycm-quiz .ycm-result { animation: ycm-result-in .6s var(--ycm-ease) both; }
#ycm-quiz .ycm-result > * { animation: ycm-result-child .5s var(--ycm-ease) both; }
#ycm-quiz .ycm-result > *:nth-child(1) { animation-delay: .08s; }
#ycm-quiz .ycm-result > *:nth-child(2) { animation-delay: .13s; }
#ycm-quiz .ycm-result > *:nth-child(3) { animation-delay: .18s; }
#ycm-quiz .ycm-result > *:nth-child(4) { animation-delay: .23s; }
#ycm-quiz .ycm-result > *:nth-child(5) { animation-delay: .28s; }
#ycm-quiz .ycm-result > *:nth-child(6) { animation-delay: .33s; }
#ycm-quiz .ycm-result > *:nth-child(7) { animation-delay: .38s; }
#ycm-quiz .ycm-result > *:nth-child(8) { animation-delay: .43s; }

@keyframes ycm-result-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ycm-result-child {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

#ycm-quiz .ycm-result h3 {
  color: var(--ycm-green-deep);
  font-size: 1.72rem;
  letter-spacing: -0.028em;
  line-height: 1.12;
  margin: 12px 0 0;
  /* 900 is what the ACHIEVE theme uses for h1, and the kit ships it. */
  font-weight: 900;
  text-wrap: balance;
}

#ycm-quiz .ycm-result h3:focus { outline: none; }

#ycm-quiz .ycm-result h3:focus-visible {
  outline: 2px solid var(--ycm-green);
  outline-offset: 4px;
  border-radius: 4px;
}

/* One sentence, set larger than the body, so the eye lands before the detail. */
#ycm-quiz .ycm-result .ycm-why {
  margin: 12px 0 0;
  max-width: 34em;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ycm-ink);
}

#ycm-quiz .ycm-r-block {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--ycm-hair-2);
}

#ycm-quiz .ycm-r-block > .ycm-silk {
  display: block;
  margin-bottom: 12px;
}

#ycm-quiz .ycm-r-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  max-width: 36em;
}

#ycm-quiz .ycm-r-bullets li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 11px;
  align-items: start;
  font-size: .97rem;
  line-height: 1.45;
  color: var(--ycm-ink-2);
}

#ycm-quiz .ycm-r-bullets li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: .5em;
  border-radius: 50%;
  background: var(--ycm-ink-2);
}

/* The ranked sequence: start here, then, then. */
#ycm-quiz .ycm-r-order {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--ycm-m-wide);
}

#ycm-quiz .ycm-r-order li {
  display: grid;
  grid-template-columns: 7.6em minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--ycm-hair-2);
}

#ycm-quiz .ycm-r-order li:last-child { border-bottom: none; }

/* The step reads first and at the size of the thing it labels, so the row scans
   as "Start here — Advance the work", not as a name with a footnote. */
#ycm-quiz .ycm-r-order .tag {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.008em;
  color: var(--ycm-ink-2);
  white-space: nowrap;
}

#ycm-quiz .ycm-r-order li.first .tag { color: var(--ycm-green); }

#ycm-quiz .ycm-r-order .nm {
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ycm-ink);
  display: flex;
  align-items: baseline;
  gap: 9px;
}

#ycm-quiz .ycm-r-order li.first .nm {
  color: var(--ycm-green-deep);
  font-weight: 700;
}

#ycm-quiz .ycm-r-order .k {
  font-family: var(--ycm-sans);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ycm-ink-3);
}

#ycm-quiz .ycm-r-order .sc {
  font-family: var(--ycm-sans);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ycm-ink-3);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

#ycm-quiz .ycm-r-order li.held .nm {
  font-weight: 400;
}

#ycm-quiz .ycm-r-order li.held .tag,
#ycm-quiz .ycm-r-order li.held .sc { color: var(--ycm-ink-3); }

/* The authored `strength` copy, when surfaced. Set quieter than .ycm-why: the
   reading leads with the weakest Essential, and this must not compete with it. */
#ycm-quiz .ycm-strength {
  margin: 0;
  max-width: 36em;
  font-size: .97rem;
  line-height: 1.55;
  color: var(--ycm-ink-2);
}

#ycm-quiz .ycm-r-total {
  margin-top: 16px;
  font-size: 0.90625rem;
  line-height: 1.5;
  color: var(--ycm-ink-2);
  max-width: var(--ycm-m-prose);
}

#ycm-quiz .ycm-r-total b {
  font-family: var(--ycm-sans);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--ycm-green);
  font-weight: 400;
}

/* ── The certificate block ───────────────────────────────────────────────── */
#ycm-quiz .ycm-compound {
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: 11px;
  border: 1px solid var(--ycm-hair);
  background: var(--ycm-surface);
}

#ycm-quiz .ycm-compound p {
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ycm-ink);
  max-width: var(--ycm-m-prose);
}

#ycm-quiz .ycm-compound-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  align-items: center;
}

#ycm-quiz .ycm-compound-actions .ycm-btn-etch {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

#ycm-quiz .ycm-retake {
  margin-top: 20px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--ycm-sans);
  font-size: 0.86rem;
  color: var(--ycm-ink-2);
  border-bottom: 1px solid var(--ycm-edge);
}

#ycm-quiz .ycm-retake:hover { color: var(--ycm-ink); }

#ycm-quiz .ycm-retake:focus-visible {
  outline: 2px solid var(--ycm-green);
  outline-offset: 3px;
}

/* ── Capture ─────────────────────────────────────────────────────────────── */
#ycm-quiz .ycm-capture {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ycm-hair-2);
}

#ycm-quiz .ycm-capture > .ycm-silk {
  display: block;
  margin-bottom: 10px;
}

/* On narrow viewports the dial column carries the capture and nothing else, so
   #ycm-dialNote's top rule and the capture's own would stack into a double line. */
#ycm-quiz #ycm-dialNote .ycm-capture:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

#ycm-quiz .ycm-capture .ycm-capture-label {
  display: block;
  margin-bottom: 12px;
  font-size: .97rem;
  line-height: 1.5;
  color: var(--ycm-ink-2);
}

#ycm-quiz .ycm-capture .ycm-capture-label b {
  color: var(--ycm-ink);
  font-weight: 700;
}

#ycm-quiz .ycm-fine {
  margin-top: 11px;
  font-size: 0.78125rem;
  line-height: 1.5;
  color: var(--ycm-ink-3);
  max-width: 38em;
}

#ycm-quiz .ycm-confirmed {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ycm-ink);
}

#ycm-quiz .ycm-confirmed:focus { outline: none; }

#ycm-quiz .ycm-confirmed:focus-visible {
  outline: 2px solid var(--ycm-green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── The capture form ────────────────────────────────────────────────────────
   Ours. The previous build spent 150 lines overriding a third-party form plugin's
   theme framework and the ACHIEVE theme's gold-pill restyle of its buttons; owning
   the markup deletes that whole fight.

   Still ID-scoped (#ycm-quiz), because the theme's own form rules still apply inside
   the dialog and an ID outranks its class chains. */

/* Hidden ONLY while parked, i.e. while the [hidden] attribute is on it. An
   unconditional display:none here silently survives the JS clearing `hidden`, and
   the whole capture form renders at 0x0 — which looks like a working result panel
   right up until nobody can type in it. That shipped once. */
#ycm-quiz .ycm-capture-source[hidden] { display: none !important; }

#ycm-quiz .ycm-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

#ycm-quiz .ycm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

#ycm-quiz .ycm-field-label {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ycm-ink);
}

#ycm-quiz .ycm-form input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ycm-ink);
  background: var(--ycm-page);
  /* --ycm-edge is the 4.54:1 token, kept for WCAG 1.4.11: an input boundary is a
     meaningful graphic and needs 3:1 against its surround. */
  border: 1px solid var(--ycm-edge);
  border-radius: 6px;
  appearance: none;
}

#ycm-quiz .ycm-form input[type="email"]::placeholder {
  color: var(--ycm-ink-3);
  opacity: 1;              /* Firefox dims placeholders by default. */
}

#ycm-quiz .ycm-form input[type="email"]:focus-visible {
  outline: 2px solid var(--ycm-green);
  outline-offset: 2px;
  border-color: var(--ycm-green);
}

#ycm-quiz .ycm-consent {
  margin: 0;
  font-size: 0.78125rem;
  line-height: 1.5;
  color: var(--ycm-ink-3);
}

#ycm-quiz .ycm-consent a {
  color: var(--ycm-green);
  text-decoration: underline;
}

#ycm-quiz .ycm-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

#ycm-quiz .ycm-consent-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ycm-green);
}

/* Cloudflare renders into an iframe of its own; this only reserves the room so the
   submit button does not jump when the widget arrives. */
#ycm-quiz .ycm-turnstile {
  min-height: 65px;
  margin: 2px 0;
}

#ycm-quiz .ycm-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--ycm-ink);
  /* THE gold CTA. Gold appears nowhere else in the component. */
  background: var(--ycm-gold);
  border: 1px solid var(--ycm-gold-deep);
  border-radius: 999px;
  cursor: pointer;
  /* No `background` in the transition list. A background transition pinned at its
     start value renders this as ground-coloured text on the ground: invisible, and
     still clickable. */
  transition: transform .18s ease, box-shadow .18s ease;
}

#ycm-quiz .ycm-submit:hover { transform: translateY(-1px); }

#ycm-quiz .ycm-submit:focus-visible {
  outline: 2px solid var(--ycm-ink);
  outline-offset: 3px;
}

#ycm-quiz .ycm-submit[disabled] {
  cursor: default;
  transform: none;
  /* The text floor, never --ycm-ink-4: that token is documented marks-only at
     2.32:1 and a disabled control still has to be readable. */
  color: var(--ycm-ink-3);
  background: var(--ycm-hair);
  border-color: var(--ycm-edge);
}

#ycm-quiz .ycm-form-error {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ycm-alert);
}

/* ── Input method ────────────────────────────────────────────────────────────
   Keyed on pointer/hover rather than width: a laptop can have a touchscreen and
   a tablet can have a trackpad. */
@media (hover: none) {
  /* A lift that never un-lifts is worse than no lift. */
  #ycm-quiz .ycm-btn-lit:hover,
  #ycm-quiz .ycm-btn-etch:hover,
  #ycm-quiz .ycm-btn-ink:hover,
  .ycm-root .ycm-trigger:hover { transform: none; }
  #ycm-quiz .ycm-track-stop:hover .dot { transform: none; }
}

@media (pointer: coarse) {
  /* Marks stay small; the targets around them do not. */
  #ycm-quiz .ycm-btn-etch { min-height: 46px; }
  #ycm-quiz .ycm-close { padding: 12px 6px; margin: -12px -6px; }
  #ycm-quiz .ycm-retake { padding: 10px 0; }
  #ycm-quiz .ycm-track-rail { height: 60px; }
  #ycm-quiz .ycm-track-stop { height: 60px; }
  #ycm-quiz .ycm-track-stop .dot { width: 12px; height: 12px; }
}

/* ── A statement on one row ──────────────────────────────────────────────────
   Text plus a ruler belong on one row at this width, which takes a statement
   from ~175px to ~96px and keeps a whole set above the fold. */
@media (min-width: 1060px) {
  #ycm-quiz .ycm-stmt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
  }
  #ycm-quiz .ycm-stmt-text { margin-bottom: 0; font-size: 1.02rem; }
  #ycm-quiz .ycm-track-rail { height: 44px; }
  #ycm-quiz .ycm-track-stop { height: 44px; }
  #ycm-quiz .ycm-track-rail::before,
  #ycm-quiz .ycm-track-fill { top: 13px; }
  #ycm-quiz .ycm-knob { top: 13px; }
}

/* ── Phone: full bleed, dial as a compact bar on top ─────────────────────── */
@media (max-width: 820px) {
  #ycm-quiz {
    inset: 0;
    margin: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  #ycm-quiz .ycm-head {
    padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
             12px max(18px, env(safe-area-inset-left));
  }
  #ycm-quiz .ycm-head #ycm-quizTitle { display: none; }
  #ycm-quiz .ycm-head-right { width: 100%; justify-content: space-between; gap: 12px; }
  #ycm-quiz .ycm-body,
  #ycm-quiz .ycm-body.is-result {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  #ycm-quiz .ycm-dial {
    order: 1;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    border-left: none;
    border-bottom: 1px solid var(--ycm-hair);
    padding: 12px 18px;
  }
  /* min-height MUST be reset here. The base rule sets min-height:200px, and when a
     min- exceeds a max-, the min wins — so a bare `max-height:104px` leaves the
     bar 200px tall and pushes a set of three statements into scrolling at
     390x844. Carried over from the source, which has the same omission. */
  #ycm-quiz .ycm-dial svg {
    flex: 0 0 104px;
    width: 104px;
    min-height: 0;
    max-height: 104px;
    margin: 0;
  }
  /* Numerals would render at ~4px in a 104px bar; the reading names the axes in text. */
  #ycm-quiz .ycm-body:not(.is-result) .ycm-dial .ycm-eng-num { display: none; }

  /* While answering on a phone, the pentagon is the one purely decorative thing
     here: its axis numerals are already hidden at this size, so it plots an
     unlabelled shape. It costs ~104px, and three statements need that height more
     than the picture does — a set never scrolling is the whole reason this is an
     overlay. The running tallies STAY (they are the aria-live progress), the
     header pips still carry set progress, and the dial returns in full at the
     reading, where it is the payoff rather than an ornament. */
  #ycm-quiz .ycm-body:not(.is-result) .ycm-dial svg { display: none; }
  #ycm-quiz .ycm-body:not(.is-result) .ycm-dial { padding: 8px 18px; }
  #ycm-quiz .ycm-dial-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    border-top: none;
    padding-top: 0;
    margin: 0;
  }
  /* Hidden only while statements need the room. At the reading this column
     carries the capture form, so hiding it unconditionally is what removed the
     only conversion control on phones once. Scoped to state, never deleted. */
  #ycm-quiz .ycm-body:not(.is-result) #ycm-dialNote { display: none; }
  #ycm-quiz .ycm-body.is-result .ycm-dial {
    order: 3;
    display: block;
    border-left: none;
    border-top: 1px solid var(--ycm-hair);
    margin-top: 8px;
    padding-top: 20px;
    background: none;
  }
  #ycm-quiz .ycm-body.is-result .ycm-dial svg {
    flex: none;
    width: 100%;
    max-width: 320px;
    max-height: none;
    margin: 0 auto 4px;
  }
  #ycm-quiz .ycm-body.is-result .ycm-dial-foot {
    flex-direction: row;
    justify-content: space-between;
    border-top: 1px solid var(--ycm-hair-2);
    padding-top: 12px;
    margin-top: 16px;
  }
  #ycm-quiz .ycm-stage-wrap {
    order: 2;
    padding: 16px max(18px, env(safe-area-inset-right))
             max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }

  /* Tightened so a set of three statements fits 390x844 without scrolling — the
     one thing this component is an overlay in order to guarantee. Measured, not
     guessed: at the source's spacing the set overflowed by 216px.
     Only the space between controls gives. The stop stays a 70x51 touch target,
     comfortably past the 44x44 bar, and the type sizes are untouched. */
  #ycm-quiz .ycm-body:not(.is-result) .ycm-lvl-head {
    padding-bottom: 10px;
    margin-bottom: 16px;
  }
  #ycm-quiz .ycm-body:not(.is-result) .ycm-stmt { padding: 8px 0 10px; }
  /* The selected word (".ycm-track-word") hangs 21px ABOVE the rail. In the
     stacked narrow layout the statement text sits directly over it, so this
     margin is clearance, not decoration — drop it and the word lands on the last
     line of the statement. The height it costs is bought back from the rail
     below, which can afford it; the text cannot. */
  #ycm-quiz .ycm-body:not(.is-result) .ycm-stmt-text {
    margin-bottom: 24px;
    font-size: 1rem;
    line-height: 1.38;
  }
  #ycm-quiz .ycm-body:not(.is-result) .ycm-lvl-nav { margin-top: 14px; }
  #ycm-quiz .ycm-body:not(.is-result) .ycm-track-ends { margin-top: 2px; }
  /* 52px keeps the stop a 70x51 touch target — past the 44x44 bar with room. */
  #ycm-quiz .ycm-body:not(.is-result) .ycm-track-rail,
  #ycm-quiz .ycm-body:not(.is-result) .ycm-track-stop { height: 52px; }
}

@media (max-width: 420px) {
  #ycm-quiz .ycm-track-ends span { font-size: 0.75rem; }
}

/* ── The reading on narrow or short viewports ────────────────────────────────
   Two grid rows fight for height here: the dial column needs its content and the
   reading's 1fr collapses to a line. One scrolling column instead. */
@media (max-width: 820px), (max-height: 620px) {
  #ycm-quiz .ycm-body.is-result {
    display: block;
    overflow-y: auto;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  #ycm-quiz .ycm-body.is-result .ycm-stage-wrap {
    overflow: visible;
    min-height: 0;
    padding-bottom: 8px;
  }
  #ycm-quiz .ycm-body.is-result .ycm-dial { overflow: visible; }
}

/* ── Short viewports (landscape phone, small laptop windows) ─────────────────
   Keyed on height, so it fires where width queries cannot see the problem. */
@media (max-height: 620px) {
  #ycm-quiz {
    inset: 0;
    margin: 0;
    width: 100vw;
    height: 100dvh;
    border: none;
    border-radius: 0;
    max-width: none;
    box-shadow: none;
  }
  #ycm-quiz .ycm-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }
  #ycm-quiz .ycm-body.is-result {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  /* Same reasoning: give statements the height, but never delete the capture. */
  #ycm-quiz .ycm-body:not(.is-result) .ycm-dial { display: none; }
  #ycm-quiz .ycm-body.is-result .ycm-dial { border-left: 1px solid var(--ycm-hair); }
  #ycm-quiz .ycm-head { padding: 10px 18px; flex-wrap: nowrap; }
  #ycm-quiz .ycm-head #ycm-quizTitle { display: none; }
  #ycm-quiz .ycm-head-right { width: 100%; justify-content: flex-end; gap: 14px; }
  #ycm-quiz .ycm-head-right .ycm-mono { margin-right: auto; }
  #ycm-quiz .ycm-stmt { padding: 14px 0 16px; }
  #ycm-quiz .ycm-stmt-text { margin-bottom: 12px; font-size: 1rem; }
  #ycm-quiz .ycm-lvl-head { margin-bottom: 16px; }
}

/* ── Windows High Contrast / forced-colors ───────────────────────────────────
   The component draws controls with background-color, and the radios are
   opacity:0, so under forced colours there would be nothing left to see. Redraw
   with system colours rather than opting out with forced-color-adjust. */
@media (forced-colors: active) {
  .ycm-root .ycm-trigger,
  #ycm-quiz .ycm-btn-lit,
  #ycm-quiz .ycm-btn-ink,
  #ycm-quiz .ycm-btn-etch,
  #ycm-quiz .ycm-close,
  #ycm-quiz .ycm-submit {
    border: 1px solid ButtonBorder;
    background: ButtonFace;
    color: ButtonText;
    forced-color-adjust: none;
  }
  .ycm-root .ycm-trigger:hover,
  #ycm-quiz .ycm-btn-lit:hover,
  #ycm-quiz .ycm-btn-ink:hover,
  #ycm-quiz .ycm-btn-etch:hover,
  #ycm-quiz .ycm-close:hover,
  #ycm-quiz .ycm-submit:hover {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
  #ycm-quiz .ycm-btn-lit[disabled],
  #ycm-quiz .ycm-btn-etch[disabled] { color: GrayText; border-color: GrayText; }
  #ycm-quiz .ycm-form input { border: 1px solid ButtonBorder; }
  /* The scale: give every layer a real border, and mark state with Highlight. */
  #ycm-quiz .ycm-track-rail::before { background: CanvasText; opacity: 1; }
  #ycm-quiz .ycm-track-fill { background: Highlight; }
  #ycm-quiz .ycm-track-stop .dot {
    border: 1.5px solid CanvasText;
    background: Canvas;
    forced-color-adjust: none;
  }
  #ycm-quiz .ycm-track-stop.past .dot,
  #ycm-quiz .ycm-track-stop.at .dot { background: Highlight; border-color: Highlight; }
  #ycm-quiz .ycm-knob {
    border: 2px solid CanvasText;
    background: Highlight;
    box-shadow: none;
    forced-color-adjust: none;
  }
  #ycm-quiz .ycm-knob span { color: HighlightText; }
  #ycm-quiz .ycm-track-stop input:focus-visible ~ .dot {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
  #ycm-quiz .ycm-pips i { background: Canvas; border: 1px solid CanvasText; }
  #ycm-quiz .ycm-pips i.on { background: Highlight; }
  #ycm-quiz .ycm-pips i.now { background: CanvasText; }
  #ycm-quiz .ycm-eng-ring,
  #ycm-quiz .ycm-eng-ring.major { stroke: CanvasText; fill: none; }
  #ycm-quiz .ycm-eng-num { fill: CanvasText; }
  #ycm-quiz .ycm-trace { stroke: Highlight; fill: none; stroke-width: 3; }
  #ycm-quiz .ycm-node { fill: Highlight; stroke: Canvas; }
  #ycm-quiz .ycm-mark-petal { fill: Highlight; opacity: .4; }
  #ycm-quiz .ycm-mark-dot { fill: Highlight; stroke: Canvas; }
  #ycm-quiz .ycm-compound { background: Canvas; border: 1px solid CanvasText; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────
   Scoped, not global: the source set this on * for the whole document, which is
   not this plugin's to do. The JS also skips the settle sequence outright. */
@media (prefers-reduced-motion: reduce) {
  .ycm-root *,
  .ycm-root *::before,
  .ycm-root *::after,
  #ycm-quiz,
  #ycm-quiz *,
  #ycm-quiz *::before,
  #ycm-quiz *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}