/* quiz-skin.css: cosmetic skin for the quiz page (single quiz posts). Presentation only.
   Loaded by modules/quiz-skin.php after the other quiz CSS.
   Roll back: remove 'quiz-skin.php' from the loader list in cefr-quiz-plugin.php (or delete this file).
   Scope: everything sits under #esirl-deck-unique (only the deck page prints it), so try-it, classroom and the
   homepage are untouched. The mobile dock rules use body:has(#esirl-deck-unique) for the same reason.
   Blank style: QUIET (decided 2026-11-04). A written line at rest; a tray only on focus, correct, wrong and hint. */

#esirl-deck-unique{
  --q-ink:#0f172a; --q-text:#1e293b; --q-muted:#475569; --q-faint:#64748b;
  --q-line:#e2e8f0; --q-line-strong:#cbd5e1; --q-surface:#ffffff; --q-tint:#f1f4fb;
  --q-brand:#7d92ff; --q-brand-soft:#eef1ff;
  --q-ok:#15803d; --q-ok-bg:#e8f8ee; --q-bad:#be123c; --q-bad-bg:#fff1f4;
  --q-r:14px; --q-ease:cubic-bezier(.2,.7,.2,1);
}

/* ── Card ─────────────────────────────────────────────── */
#esirl-deck-unique .esirl-deck-content{
  background:var(--q-surface);
  border:1px solid #e9ecf6;
  border-radius:24px;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 18px 48px -20px rgba(15,23,42,.18);
}

/* ── Control island: [Start/Stop] [ring] [Customize] [audio] ─ */
#esirl-deck-unique .sir-start-audio-row{gap:12px;align-items:center}

/* Start quiz (primary): periwinkle fill, INK text (white on #7d92ff is 2.8:1) */
#esirl-deck-unique #start-quiz-button.cefr-start-btn{
  background:var(--q-brand) !important;color:var(--q-ink) !important;
  border:0 !important;border-radius:999px !important;min-height:48px !important;padding:0 24px !important;
  font-weight:600;letter-spacing:.005em;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 8px 20px -8px rgba(125,146,255,.7) !important;
  transition:transform .16s var(--q-ease), box-shadow .16s var(--q-ease), background .16s;
}
#esirl-deck-unique #start-quiz-button.cefr-start-btn:hover{box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 24px -8px rgba(125,146,255,.8)}
#esirl-deck-unique #start-quiz-button.cefr-start-btn:active{transform:scale(.98)}
/* Stop quiz: solid ink + white text (was white on #059669 = 3.8:1). Reads as "stop", unlike audio play */
#esirl-deck-unique #start-quiz-button.cefr-start-btn.is-active{
  background:var(--q-ink) !important;color:#fff !important;box-shadow:0 8px 20px -10px rgba(15,23,42,.55) !important;
}

/* Customize: quiet outline pill */
#esirl-deck-unique .sir-customize-btn{
  background:transparent;color:var(--q-ink);border:1px solid var(--q-line-strong);
  border-radius:999px;min-height:48px;padding:0 18px;font-weight:500;
  transition:border-color .16s,background .16s;
}
#esirl-deck-unique .sir-customize-btn:hover{border-color:var(--q-ink);background:var(--q-tint)}

/* Audio player: round play + slim scrubber */
#esirl-deck-unique .sir-audio-player{
  background:var(--q-surface);border:1px solid var(--q-line);border-radius:999px;
  box-shadow:none;padding:6px 16px 6px 6px;gap:12px;
}
#esirl-deck-unique .sir-audio-play{
  width:40px;height:40px;border-radius:50%;
  background:var(--q-brand);color:var(--q-ink);box-shadow:none;
}
#esirl-deck-unique .sir-audio-play:hover{background:#6b81f5;transform:none;box-shadow:none}
#esirl-deck-unique .sir-audio-time{color:var(--q-muted);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* Scrubber (shared by desktop .sir-audio-progress and mobile .cefr-mb-scrubber).
   Fill follows --p (set by 1 line of JS; without it the track simply stays unfilled). */
#esirl-deck-unique .sir-audio-progress,
body:has(#esirl-deck-unique) .cefr-mb-scrubber{
  -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;
  height:24px;width:168px;margin:0;padding:0;
}
#esirl-deck-unique .sir-audio-progress::-webkit-slider-runnable-track,
body:has(#esirl-deck-unique) .cefr-mb-scrubber::-webkit-slider-runnable-track{
  height:4px;border-radius:999px;
  background:linear-gradient(to right,var(--q-ink,#0f172a) var(--p,0%),#dde3f3 var(--p,0%));
}
#esirl-deck-unique .sir-audio-progress::-moz-range-track,
body:has(#esirl-deck-unique) .cefr-mb-scrubber::-moz-range-track{height:4px;border-radius:999px;background:#dde3f3}
#esirl-deck-unique .sir-audio-progress::-moz-range-progress,
body:has(#esirl-deck-unique) .cefr-mb-scrubber::-moz-range-progress{height:4px;border-radius:999px;background:#0f172a}
#esirl-deck-unique .sir-audio-progress::-webkit-slider-thumb,
body:has(#esirl-deck-unique) .cefr-mb-scrubber::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;margin-top:-5px;
  width:14px;height:14px;border-radius:50%;background:#0f172a;border:2px solid #fff;
  box-shadow:0 1px 4px rgba(15,23,42,.35);transform:scale(.0);transition:transform .14s var(--q-ease);
}
#esirl-deck-unique .sir-audio-progress::-moz-range-thumb,
body:has(#esirl-deck-unique) .cefr-mb-scrubber::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;background:#0f172a;border:2px solid #fff;
  box-shadow:0 1px 4px rgba(15,23,42,.35);transform:scale(0);transition:transform .14s var(--q-ease);
}
/* thumb appears on hover / focus / drag (always visible on touch, where hover does not exist) */
#esirl-deck-unique .sir-audio-progress:hover::-webkit-slider-thumb,
#esirl-deck-unique .sir-audio-progress:focus-visible::-webkit-slider-thumb,
#esirl-deck-unique .sir-audio-progress:active::-webkit-slider-thumb{transform:scale(1.15)}
#esirl-deck-unique .sir-audio-progress:hover::-moz-range-thumb,
#esirl-deck-unique .sir-audio-progress:focus-visible::-moz-range-thumb,
#esirl-deck-unique .sir-audio-progress:active::-moz-range-thumb{transform:scale(1.15)}
body:has(#esirl-deck-unique) .cefr-mb-scrubber::-webkit-slider-thumb{transform:scale(1.1)}
body:has(#esirl-deck-unique) .cefr-mb-scrubber::-moz-range-thumb{transform:scale(1.1)}
#esirl-deck-unique .sir-audio-progress:focus-visible,
body:has(#esirl-deck-unique) .cefr-mb-scrubber:focus-visible{outline:2px solid var(--q-ink);outline-offset:4px;border-radius:6px}

/* ── Copy around the card ─────────────────────────────── */
#esirl-deck-unique .sir-quiz-subtitle{color:var(--q-faint);font-size:13px}
#esirl-deck-unique .sir-quiz-start-hint{color:var(--q-muted)}
/* "Logging results…" was a loud yellow gradient bar: make it a quiet status line */
#esirl-deck-unique .practice-indicator{
  background:var(--q-tint)!important;color:var(--q-muted)!important;border:0!important;
  border-radius:10px!important;font-style:normal!important;font-size:13px;padding:8px 12px!important;
}

/* ── Sentence + blanks ─────────────────────────────────── */
#esirl-deck-unique #quiz-form-id{text-align:left;line-height:2.55;font-size:18px;color:var(--q-text)}
#esirl-deck-unique .inline_block{margin:0 0 6px 8px}

#esirl-deck-unique .single_input{
  font-family:inherit;font-size:1em;font-weight:500;color:var(--q-ink) !important;text-align:center;
  height:2.1em;padding:0 .15em !important;outline:0;box-shadow:none !important;
  transition:background .16s,border-color .16s,box-shadow .16s,color .16s;
}

/* ── Tools row: Hint / Show / Clear / 85% ─────────────── */
#esirl-deck-unique .quiz-action-btn{
  min-height:44px;border-radius:999px;background:#fff;color:var(--q-ink);
  border:1px solid var(--q-line-strong);font-weight:500;
  transition:border-color .16s,background .16s;
}
#esirl-deck-unique .quiz-action-btn:hover{border-color:var(--q-ink);background:var(--q-tint)}
#esirl-deck-unique .quiz-action-btn--clear{color:var(--q-bad)}
#esirl-deck-unique .quiz-action-btn:focus-visible{outline:2px solid var(--q-ink);outline-offset:2px}

/* ── Episode strip: pills, current one taller with ink ring ── */
#esirl-deck-unique .sir-seg{border:0;border-radius:999px;height:10px;opacity:.55;box-shadow:none}
#esirl-deck-unique .sir-seg.is-current{height:16px;opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--q-ink)}
#esirl-deck-unique .sir-strip__track{gap:4px}
#esirl-deck-unique .sir-strip__count{color:var(--q-muted)}

/* ── Prev / Next ─────────────────────────────────────── */
#esirl-deck-unique .esirl-deck-btn--next,
#esirl-deck-unique .esirl-deck-btn--disabled,
#esirl-deck-unique .esirl-deck-btn--series-link{border-radius:999px}
#esirl-deck-unique .esirl-deck-btn--next{background:var(--q-ink);color:#fff;border:0;min-height:44px}
#esirl-deck-unique .esirl-deck-btn--disabled{color:var(--q-faint)}

/* ── Study guide teaser (inline-styled in markup → !important) ── */
#esirl-deck-unique .study-guide-teaser{
  background:var(--q-surface)!important;border:1px solid var(--q-line);border-radius:20px!important;
  text-align:left!important;padding:20px 24px!important;margin-top:1.25rem!important;
}
#esirl-deck-unique .study-guide-teaser h3{font-size:1.05rem;margin:0 0 .4rem!important}
#esirl-deck-unique .study-guide-teaser p{margin:0 0 1rem!important}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width:767px){
  #esirl-deck-unique #quiz-form-id{font-size:17px;line-height:2.5}
  #esirl-deck-unique .esirl-deck-content{border-radius:20px}
  /* the in-flow audio card duplicates the sticky bar: keep, but make it calm */
  #esirl-deck-unique .sir-audio-player.is-active{background:var(--q-surface)!important;border:1px solid var(--q-line)!important;box-shadow:none!important;border-radius:999px!important}
  body:has(#esirl-deck-unique) .cefr-mobile-bar{border-top:1px solid var(--q-line);box-shadow:0 -12px 32px -16px rgba(15,23,42,.18)}
}

@media (prefers-reduced-motion:reduce){
  #esirl-deck-unique *{transition:none!important;animation:none!important}
}

/* ── Mobile sticky bar: one calm system (was 4 accent colours; orange 85% = 1.9:1 on white) ── */
body:has(#esirl-deck-unique) .cefr-mobile-bar{background:rgba(255,255,255,.96)!important;-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-mb-play{background:#7d92ff!important;color:#0f172a!important;border:0!important;border-radius:16px!important;width:52px!important;height:52px!important;box-shadow:0 8px 18px -8px rgba(125,146,255,.8)!important}
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-mb-rewind,
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-mb-slow,
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-mb-hint{background:#fff!important;color:#0f172a!important;border:1px solid #cbd5e1!important;border-radius:12px!important;width:44px!important;height:44px!important;font-weight:600!important}
/* Slow down is the same shape, wider: it carries words ("Slow down" / "85% speed"), not just "85%". The ring stays a circle: it is a meter. */
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-mb-slow{width:auto!important;min-width:96px!important;padding:0 14px!important;font-size:13px!important;line-height:1!important;white-space:nowrap}
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-mb-slow[aria-pressed="true"],
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-mb-slow.is-active{background:#7d92ff!important;color:#0f172a!important;border-color:#7d92ff!important}
body:has(#esirl-deck-unique) .cefr-mobile-bar button:focus-visible{outline:2px solid #0f172a!important;outline-offset:2px!important}
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-ring-label{color:#0f172a;font-weight:600}
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-ring-fill{stroke:#0f172a!important}
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-ring-track{stroke:#dde3f3!important}

/* ══ v2 additions (2026-11-03): leaks fixed + tier 2 motion/depth ═════════════════════════ */

/* leak: tool row (Hint / Show / Clear / 85%) — old irl-quiz-ui colours win with !important */
#esirl-deck-unique .quiz-action-btn.btn{
  background:#fff!important;color:#0f172a!important;border:1px solid #cbd5e1!important;
  border-radius:999px!important;min-height:44px!important;padding:0 16px!important;font-weight:500!important;
  box-shadow:none!important;
  transition:transform .14s cubic-bezier(.2,.7,.2,1),border-color .16s,background .16s!important;
}
#esirl-deck-unique .quiz-action-btn.btn:hover{border-color:#0f172a!important;background:#f1f4fb!important}
#esirl-deck-unique .quiz-action-btn.btn:active{transform:scale(.96)}
#esirl-deck-unique .quiz-action-btn--clear.btn{color:#be123c!important}
#esirl-deck-unique .quiz-action-btn.btn svg{color:currentColor!important;stroke:currentColor}

/* leak: Previous / Next */
#esirl-deck-unique .esirl-deck-btn--next{background:#0f172a!important;color:#fff!important;border:0!important;border-radius:999px!important;min-height:44px!important;padding:0 22px!important;transition:transform .14s cubic-bezier(.2,.7,.2,1)}
#esirl-deck-unique .esirl-deck-btn--next:active{transform:scale(.97)}
#esirl-deck-unique .esirl-deck-btn--disabled{background:transparent!important;border:1px solid #e2e8f0!important;color:#64748b!important;border-radius:999px!important;min-height:44px!important}

/* leak: mobile scrubber thumb/track (old: 20px periwinkle) */
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-mb-scrubber::-webkit-slider-thumb{width:16px!important;height:16px!important;background:#0f172a!important;border:2px solid #fff!important;box-shadow:0 1px 5px rgba(15,23,42,.35)!important;margin-top:-6px!important}
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-mb-scrubber::-moz-range-thumb{width:14px!important;height:14px!important;background:#0f172a!important;border:2px solid #fff!important}

/* tier 2 — state change on Start → Stop is eased, not snapped */
#esirl-deck-unique #start-quiz-button.cefr-start-btn{transition:background .28s cubic-bezier(.2,.7,.2,1),color .28s,transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .28s!important}

/* tier 2 — a blank "wakes up" on focus; a correct answer gives one soft pop */
#esirl-deck-unique .single_input{transition:background .18s,border-color .18s,box-shadow .18s,color .18s,transform .18s cubic-bezier(.2,.7,.2,1)!important}
#esirl-deck-unique .single_input:focus{transform:translateY(-1px)}
@keyframes q-pop{0%{transform:scale(1)}35%{transform:scale(1.09)}100%{transform:scale(1)}}
#esirl-deck-unique .single_input.is_correct{animation:q-pop .38s cubic-bezier(.2,.7,.2,1) 1}

/* tier 2 — reading size and rhythm */
#esirl-deck-unique #quiz-form-id{letter-spacing:.003em;font-size:18.5px}
@media (min-width:768px){#esirl-deck-unique .esirl-deck-content{padding:44px 48px 48px}}

/* tier 2 — ring counter eases between numbers */
body:has(#esirl-deck-unique) .cefr-ring .cefr-ring-fill{transition:stroke-dashoffset .35s cubic-bezier(.2,.7,.2,1)!important}

/* tier 2 — mobile dock: a rounded floating tray instead of a flat full-width bar */
@media (max-width:767px){
  body:has(#esirl-deck-unique) .cefr-mobile-bar{left:8px!important;right:8px!important;width:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;border-radius:22px!important;border:1px solid #e2e8f0!important;box-shadow:0 14px 40px -12px rgba(15,23,42,.35)!important}
  body:has(#esirl-deck-unique){scroll-padding-bottom:140px}
}
@media (prefers-reduced-motion:reduce){#esirl-deck-unique .single_input.is_correct{animation:none!important}}

/* ══ v3 additions (2026-11-03 evening): feedback round ══════════════════════════════════
   Colour logic reuses what the plugin already defines (front.css / irl-quiz-ui):
     correct = green (#22c55e family)   wrong = rose   hint / "Show all" = purple (#a97dff / #7c3aed on #faf5ff)
   Reveal ("Show all") puts .is_hint on blanks, so it reads as "hint used" by design. */

/* strip: ghost only what is CAPTURED (class the plugin already sets), not everything */
#esirl-deck-unique .sir-seg{opacity:1}
#esirl-deck-unique .sir-seg.is-captured{opacity:.38}
#esirl-deck-unique .sir-seg:not(.is-current):hover{height:16px;opacity:1}
#esirl-deck-unique .sir-seg{transition:height .16s cubic-bezier(.2,.7,.2,1),opacity .16s}


/* ── Desktop tools: order = Hint, 85%, Show all, Clear; keep icons; ACTIVE / USED states ── */
#esirl-deck-unique .quiz-action-buttons{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
#esirl-deck-unique .quiz-action-btn--hint{order:1}
#esirl-deck-unique .quiz-action-btn--slow{order:2}
#esirl-deck-unique .quiz-action-btn--reveal{order:3}
#esirl-deck-unique .quiz-action-btn--clear{order:4}
/* Slow down ON = "85% speed" (plugin adds .is-active and slows audio to 0.85×): periwinkle with ink text, not navy */
#esirl-deck-unique .quiz-action-btn--slow.btn.is-active{background:#7d92ff!important;color:#0f172a!important;border-color:#7d92ff!important}
/* hint / reveal USED (blanks carry .is_hint) — pure CSS via :has() */
#esirl-deck-unique:has(.single_input.is_hint) .quiz-action-btn--hint.btn{background:#faf5ff!important;color:#7c3aed!important;border-color:#a97dff!important}

/* ── Mobile dock tools: ON / USED ── */
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-mb-slow.is-slow{background:#7d92ff!important;color:#0f172a!important;border-color:#7d92ff!important}
body:has(#esirl-deck-unique .single_input.is_hint) .cefr-mobile-bar .cefr-mb-hint{background:#faf5ff!important;color:#7c3aed!important;border-color:#a97dff!important}
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-mb-rewind:active{background:#eef1ff!important;border-color:#7d92ff!important;transform:scale(.94)}
body:has(#esirl-deck-unique) .cefr-mobile-bar .cefr-mb-hint:active,.cefr-mobile-bar .cefr-mb-slow:active{transform:scale(.94)}

/* ── Customize drawer: [Type answers] with [A few gaps…] focusing on [Keywords] ── */
#esirl-deck-unique .irl-dropdown-trigger{
  background:#fff!important;color:#0f172a!important;border:1px solid #cbd5e1!important;border-style:solid!important;
  border-radius:999px!important;min-height:40px!important;padding:0 14px!important;font-weight:500!important;
  transition:border-color .16s,background .16s!important;
}
#esirl-deck-unique .irl-dropdown-trigger:hover{border-color:#0f172a!important}
#esirl-deck-unique .irl-dropdown-trigger.has-selection{background:#eef1ff!important;border-color:#7d92ff!important;color:#0f172a!important}
#esirl-deck-unique .irl-dropdown-trigger:focus-visible{outline:2px solid #0f172a;outline-offset:2px}
#esirl-deck-unique .irl-difficulty-madlib{color:#475569;font-size:14px;gap:8px;align-items:center}
#esirl-deck-unique .irl-dropdown-menu{border-radius:16px!important;border:1px solid #e2e8f0!important;box-shadow:0 18px 44px -14px rgba(15,23,42,.28)!important;background:#fff!important}
#esirl-deck-unique .irl-dropdown-option{min-height:44px;color:#0f172a;border-radius:10px}
#esirl-deck-unique .irl-dropdown-option:hover{background:#f1f4fb}
#esirl-deck-unique .irl-dropdown-option.selected{background:#eef1ff;font-weight:600}

/* v3 fixes */
/* ON state must survive :hover */
#esirl-deck-unique .quiz-action-btn--slow.btn.is-active:hover{background:#7d92ff!important;color:#0f172a!important;border-color:#7d92ff!important}
#esirl-deck-unique:has(.single_input.is_hint) .quiz-action-btn--hint.btn:hover{background:#f3e8ff!important}
#esirl-deck-unique .irl-difficulty-madlib span,#esirl-deck-unique .irl-difficulty-madlib .irl-madlib-text{color:#475569!important}

/* ===== v4 (2026-11-04): phone layout =====
   1) The quiz container is forced to full viewport width on phones (negative margins + left offset),
      so Start / Customize / the sentence sat outside the card padding. Put it back inside the card.
   2) Customize on a phone = one stacked panel, three labelled full-width rows, menu opens inline. */
@media (max-width:767px){
  #esirl-deck-unique .single_word_container,
  #esirl-deck-unique .tw-bs4.single_word_container{
    width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;left:auto!important;right:auto!important;padding-left:0!important;padding-right:0!important;overflow-x:visible!important}
  #esirl-deck-unique .esirl-deck-content{padding:28px 20px 32px!important}

  #esirl-deck-unique .sir-start-audio-row{gap:10px}
  #esirl-deck-unique #sir-customize-btn{align-self:flex-start}

  #esirl-deck-unique .sir-customize-drawer.is-open{margin:12px 0 4px;max-height:none!important;overflow:visible!important}
  #esirl-deck-unique .irl-dropdowns-row{
    display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:14px!important;overflow:visible!important;
    padding:16px!important;background:var(--q-tint)!important;border:1px solid var(--q-line)!important;border-radius:18px!important}
  #esirl-deck-unique .irl-dropdowns-row::before{
    content:"Customize this quiz";font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#475569}
  #esirl-deck-unique .irl-difficulty-madlib{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;width:100%!important}
  #esirl-deck-unique .irl-difficulty-madlib .irl-madlib-text{font-size:13px!important;font-weight:500;color:#475569!important;order:-1;text-transform:capitalize}
  #esirl-deck-unique .irl-difficulty-dropdown{width:100%!important;position:relative}
  #esirl-deck-unique .irl-dropdown-trigger{width:100%!important;min-height:48px;justify-content:space-between!important;padding:0 16px!important;border-radius:14px!important}
  #esirl-deck-unique .irl-difficulty-dropdown:not(.is-open) .irl-dropdown-menu{display:none!important}
  #esirl-deck-unique .irl-dropdown-menu{
    position:static!important;width:100%!important;min-width:0!important;margin-top:6px!important;transform:none!important;box-shadow:none!important;border:1px solid var(--q-line)!important}
  /* The menu is an inline list here (static), so front.js's phone overlay (fixed, z-index 999, switched on at <=600px) sat on top of it:
     taps landed on the overlay, which only closed the menu and never selected the level. Outside taps still close it (document click handler). */
  #esirl-deck-unique .irl-dropdown-overlay{display:none!important}
}
@media (max-width:767px){
  /* before Start the in-flow player is invisible but still reserves ~86px: collapse it (phones use the dock) */
  #esirl-deck-unique .sir-audio-player-wrap:not(:has(.sir-audio-player.is-active)){display:none!important}
}

/* ===== v5 (2026-11-04): reading rhythm, Customize type, nav buttons ===== */
/* 1) Reading rhythm. The plugin pads every word ~10px each side AND margins it ~5px, so gaps were ~30px.
      Words sit like a sentence: a normal word space between them, tighter lines, punctuation hugging. */
#esirl-deck-unique #quiz-form-id{line-height:2.05!important;font-size:19px!important;letter-spacing:0!important}
#esirl-deck-unique #quiz-form-id .inline_block{margin:0 0 6px 0!important;padding:0 .12em!important}
#esirl-deck-unique #quiz-form-id .inline_block.symbol,
#esirl-deck-unique #quiz-form-id .inline_block.no_left{padding-left:0!important;margin-left:0!important}
@media (max-width:767px){
  #esirl-deck-unique #quiz-form-id{font-size:18px!important;line-height:2.1!important}
}

/* 2) Customize: trigger, label and option text share one face, size and weight */
#esirl-deck-unique .irl-dropdown-trigger,
#esirl-deck-unique .irl-dropdown-trigger .irl-dropdown-label,
#esirl-deck-unique .irl-dropdown-option .irl-option-label{font-family:inherit!important;font-size:15px!important;font-weight:500!important;letter-spacing:0!important}
#esirl-deck-unique .irl-dropdown-option.selected .irl-option-label{font-weight:600!important}
#esirl-deck-unique .irl-difficulty-madlib .irl-madlib-text{font-size:14px!important}

/* 3) Previous / Next: same pill, same height. Next = the secondary (outline) button, Previous keeps its periwinkle outline */
#esirl-deck-unique .esirl-deck-btn--next,
#esirl-deck-unique .esirl-deck-btn--prev{border-radius:999px!important;min-height:44px!important;padding:0 22px!important;display:inline-flex;align-items:center;gap:8px;font-weight:600}
#esirl-deck-unique .esirl-deck-btn--next{background:#fff!important;color:#0f172a!important;border:1px solid #cbd5e1!important}
#esirl-deck-unique .esirl-deck-btn--next:hover{border-color:#0f172a!important}
/* Root cause of the uneven gaps: every shown word is a 50px-minimum box with its text right-aligned,
   so "la", "de", "que" float inside empty space. Let shown words be as wide as their letters. */
#esirl-deck-unique #quiz-form-id .inline_block.is_visible{min-width:0!important;width:auto!important;text-align:left!important}

/* ===== v6 (2026-11-04): easy-read transcript for non-native readers, vote buttons ===== */
/* Words are adjacent spans with NO whitespace between them, so word spacing is all padding.
   Put the space BEFORE each word (not after) so a comma/period glued after a word stays glued. */
#esirl-deck-unique #quiz-form-id .inline_block{padding:0!important;margin:0 0 8px .3em!important}
#esirl-deck-unique #quiz-form-id{font-size:20px!important;line-height:2.25!important;word-spacing:0}
@media (max-width:767px){#esirl-deck-unique #quiz-form-id{font-size:19px!important;line-height:2.25!important}}

/* Vote: "Did this feel right for your level?" */
#esirl-deck-unique .irl-difficulty-vote{background:var(--q-tint)!important;border:1px solid var(--q-line)!important;border-radius:20px!important;padding:18px 16px!important;box-shadow:none!important}
#esirl-deck-unique .irl-vote-question{font-size:15px!important;font-weight:500!important;color:#0f172a!important}
#esirl-deck-unique .irl-vote-buttons{display:flex!important;gap:10px!important;justify-content:center!important;margin-top:12px!important}
#esirl-deck-unique .irl-vote-btn{
  border-radius:999px!important;min-height:44px!important;padding:0 20px!important;background:#fff!important;color:#0f172a!important;
  font-family:inherit!important;font-size:15px!important;font-weight:600!important;display:inline-flex!important;align-items:center;gap:8px;
  border:1.5px solid #cbd5e1!important;transition:background .16s,border-color .16s,transform .14s cubic-bezier(.2,.7,.2,1)}
#esirl-deck-unique .irl-vote-btn:active{transform:scale(.97)}
#esirl-deck-unique .irl-vote-easy svg{color:#15803d}
#esirl-deck-unique .irl-vote-hard svg{color:#be123c}
#esirl-deck-unique .irl-vote-easy:hover,#esirl-deck-unique .irl-vote-easy:focus-visible{background:#e8f8ee!important;border-color:#22c55e!important}
#esirl-deck-unique .irl-vote-hard:hover,#esirl-deck-unique .irl-vote-hard:focus-visible{background:#fff1f4!important;border-color:#e11d48!important}

/* ===== v7 (2026-11-04): Study guide = a tool button (after Clear) + drawer, no emoji ===== */
#esirl-deck-unique .q-guide-btn.is-locked{color:#475569}
#esirl-deck-unique .q-guide-btn .q-lock{display:inline-flex;margin-left:2px;color:#475569}
#esirl-deck-unique .q-guide-btn.is-active{background:#0f172a!important;color:#fff!important;border-color:#0f172a!important}
#esirl-deck-unique .q-guide-btn.is-active .q-lock{color:#fff}
/* open state must survive hover (the generic .btn:hover rule above would turn it pale with white text) */
#esirl-deck-unique .quiz-action-btn.q-guide-btn.btn.is-active,
#esirl-deck-unique .quiz-action-btn.q-guide-btn.btn.is-active:hover,
#esirl-deck-unique .quiz-action-btn.q-guide-btn.btn.is-active:focus{background:#0f172a!important;color:#fff!important;border-color:#0f172a!important}
#esirl-deck-unique .quiz-action-btn.q-guide-btn.btn.is-active span{color:#fff!important}
#esirl-deck-unique .q-guide-drawer{margin:14px 0 4px;padding:18px;background:var(--q-tint);border:1px solid var(--q-line);border-radius:18px}
#esirl-deck-unique .q-guide-drawer[hidden]{display:none}
#esirl-deck-unique .q-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:767px){#esirl-deck-unique .q-guide-grid{grid-template-columns:1fr;gap:14px}}
#esirl-deck-unique .q-guide-lab{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#475569}
#esirl-deck-unique .q-guide-txt{margin:0;font-size:17px;line-height:1.7;color:#0f172a}
#esirl-deck-unique .q-guide-tr{color:#1e293b}
#esirl-deck-unique .q-kv{border-bottom:2px dotted #7d92ff;cursor:pointer}
#esirl-deck-unique .q-guide-foot{margin:14px 0 0;font-size:12px;color:#475569}
#esirl-deck-unique .q-guide-lockrow{display:flex;gap:14px;align-items:flex-start}
#esirl-deck-unique .q-guide-lockicon{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--q-line);display:inline-flex;align-items:center;justify-content:center;color:#0f172a}
#esirl-deck-unique .q-guide-msg{margin:0;font-size:16px;line-height:1.6;color:#0f172a}
#esirl-deck-unique .q-guide-cta{display:inline-flex;align-items:center;margin-top:14px;min-height:44px;padding:0 22px;border-radius:999px;background:#7d92ff;color:#0f172a;font-weight:600;font-size:15px;text-decoration:none}

/* v7 fixes */
#esirl-deck-unique .q-guide-btn{order:5}
#esirl-deck-unique .q-guide-btn>span:first-of-type{font-size:11px;font-weight:700;line-height:1}
/* elisions (m', c', d', j') are their own spans: they need the normal word space before them, and the word after them none */
#esirl-deck-unique #quiz-form-id .symbol-container{margin-left:.3em!important;padding:0!important}
#esirl-deck-unique #quiz-form-id .symbol-container + .inline_block{margin-left:0!important}

/* Line-break rule (elision c' d' j' qu' and hyphen never end or start a line): needs a wrapper in the markup.
   CSS alone cannot do it: Chrome always allows a break between two inline-blocks (tested: display:contents,
   U+2060 as ::after and as text node all fail). Preview wraps with skin.js; ship path = PHP wraps the group. */
#esirl-deck-unique .q-keep{white-space:nowrap}
#esirl-deck-unique #quiz-form-id .symbol-container.q-hy{margin-left:0!important}

/* Blanks: line at rest, tray where you type or have answered */
#esirl-deck-unique .single_input{caret-color:#4338ca;background:transparent!important;border:0!important;border-bottom:2px solid #94a3b8!important;border-radius:0!important;box-shadow:none!important}
#esirl-deck-unique .single_input:focus{background:#dfe5ff!important;border:2px solid #0f172a!important;border-radius:10px!important;box-shadow:0 0 0 4px rgba(125,146,255,.55)!important;color:#0f172a!important}
#esirl-deck-unique .single_input.is_hint,
#esirl-deck-unique .single_input.is_hint.is_correct{background:#faf5ff!important;border:1.5px solid #a97dff!important;border-radius:10px!important;color:#7c3aed!important}
#esirl-deck-unique .single_input.is_error{background:#fff1f4!important;border:2px solid #e11d48!important;border-radius:10px!important;color:#be123c!important}
#esirl-deck-unique .single_input.is_correct:not(.is_hint){background:#e8f8ee!important;border:2px solid #22c55e!important;border-radius:10px!important;color:#14532d!important}

/* ── Round 2 (2026-11-04) ───────────────────────────────────────────────── */
/* 1) Quiz settings gear: hidden on the quiz page (the button is built by front.js; CSS hides it, nothing else changes) */
#esirl-deck-unique .quiz-action-btn--settings{display:none!important}

/* 2) 85% button: Phosphor "speedometer" (regular) replaces the sliders icon. Mask = takes the button's text colour. */
#esirl-deck-unique .quiz-action-btn--slow .wps-slow-icon-wrap>svg{display:none!important}
#esirl-deck-unique .quiz-action-btn--slow .wps-slow-icon-wrap::before{
  content:"";flex:none;display:inline-block;width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M114.34,154.34l96-96a8,8,0,0,1,11.32,11.32l-96,96a8,8,0,0,1-11.32-11.32ZM128,88a63.9,63.9,0,0,1,20.44,3.33,8,8,0,1,0,5.11-15.16A80,80,0,0,0,48.49,160.88,8,8,0,0,0,56.43,168c.29,0,.59,0,.89-.05a8,8,0,0,0,7.07-8.83A64.92,64.92,0,0,1,64,152,64.07,64.07,0,0,1,128,88Zm99.74,13a8,8,0,0,0-14.24,7.3,96.27,96.27,0,0,1,5,75.71l-181.1-.07A96.24,96.24,0,0,1,128,56h.88a95,95,0,0,1,42.82,10.5A8,8,0,1,0,179,52.27a112,112,0,0,0-156.66,137A16.07,16.07,0,0,0,37.46,200H218.53a16,16,0,0,0,15.11-10.71,112.35,112.35,0,0,0-5.9-88.3Z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M114.34,154.34l96-96a8,8,0,0,1,11.32,11.32l-96,96a8,8,0,0,1-11.32-11.32ZM128,88a63.9,63.9,0,0,1,20.44,3.33,8,8,0,1,0,5.11-15.16A80,80,0,0,0,48.49,160.88,8,8,0,0,0,56.43,168c.29,0,.59,0,.89-.05a8,8,0,0,0,7.07-8.83A64.92,64.92,0,0,1,64,152,64.07,64.07,0,0,1,128,88Zm99.74,13a8,8,0,0,0-14.24,7.3,96.27,96.27,0,0,1,5,75.71l-181.1-.07A96.24,96.24,0,0,1,128,56h.88a95,95,0,0,1,42.82,10.5A8,8,0,1,0,179,52.27a112,112,0,0,0-156.66,137A16.07,16.07,0,0,0,37.46,200H218.53a16,16,0,0,0,15.11-10.71,112.35,112.35,0,0,0-5.9-88.3Z%22/%3E%3C/svg%3E") center/contain no-repeat}

/* 3) "See all clips in series": the link was stretched to the full header width; make it as wide as its text */
#esirl-deck-unique .esirl-deck-btn--series-link{align-self:flex-start!important;width:fit-content!important;max-width:100%}

/* 4) MCQ: a word with no good options is shown as plain text. Its block is vertical-align:middle (input blocks)
      while normal shown words sit on the baseline, so it floated up. Put it on the baseline like its neighbours. */
#esirl-deck-unique .inline_block.is-mcq-prose{vertical-align:baseline!important}
#esirl-deck-unique .inline_block.is-mcq-prose .sir-mcq-nopts-word{font:inherit!important;color:inherit!important;vertical-align:baseline!important}

/* 5) Blank fit. The plugin sizes each blank as (letters + 1.5)ch, which is too tight for wide letters (m, u, n, d, o):
      "mundo" had 2px spare, "même" clipped. content-box makes that width the TEXT room, then .35em padding each side is added
      on top. Input text matches the sentence size (plugin made inputs 16.8px next to 16px words). */
#esirl-deck-unique #quiz-form-id .single_input{
  font-size:1em!important;box-sizing:content-box!important;
  padding-left:.35em!important;padding-right:.35em!important;height:calc(2.1em - 2px)!important}

/* 6) Font: the real Poppins (self-hosted, modules/fonts.php) on the quiz page. It is declared as the private family
      "SIR Poppins" so nothing outside this page changes. Without the files the stack falls back to what the page had. */
#esirl-deck-unique,
#esirl-deck-unique :is(p,span,div,a,button,input,label,form,h1,h2,h3,h4,h5,li,small,strong,em),
body:has(#esirl-deck-unique) .cefr-mobile-bar,
body:has(#esirl-deck-unique) .cefr-mobile-bar :is(button,span,div){
  font-family:"SIR Poppins","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important}

/* 7) Exact blank width. modules/blank-width.php adds --bw (the answer's real width in em) to each blank's style attribute
      when SIR_EXACT_BLANK_WIDTH allows it. Blanks without --bw keep the rule from section 5. Skin box = content-box, so:
      text room + .45em slack, then .2em padding each side = about .85em of air in total. */
#esirl-deck-unique #quiz-form-id .single_input[style*="--bw"]{
  width:calc(var(--bw) + .45em)!important;padding-left:.2em!important;padding-right:.2em!important;
  /* irl-quiz-ui.css forces min-width:5ch on every blank (about 57px): that is why "no" and "a" had huge gaps. Keep a tap-friendly floor instead. */
  min-width:2.1em!important}

/* 8) Reading size and tool labels.
      The plugin forces words to 16px (front.css, !important), so the 19-20px set on the form never reached them. */
#esirl-deck-unique #quiz-form-id .inline_block{font-size:18px!important}
@media (max-width:767px){#esirl-deck-unique #quiz-form-id .inline_block{font-size:17px!important}}
/* Tool labels were 11px at weight 700 (heavy and hard to read). 13px / 500. Hint, Show, Clear, MCQ come from ::after. */
#esirl-deck-unique .quiz-action-btn--hint::after,
#esirl-deck-unique .quiz-action-btn--reveal::after,
#esirl-deck-unique .quiz-action-btn--clear::after,
#esirl-deck-unique .quiz-action-btn--mcq::after{font-size:13px!important;font-weight:500!important;line-height:1!important}
#esirl-deck-unique .quiz-action-btn--slow .wps-slow-label{font-size:13px!important;font-weight:500!important}
#esirl-deck-unique .q-guide-btn>span:first-of-type{font-size:13px!important;font-weight:500!important}

/* Study guide drawer: the member's guide (translation grid, vocabulary, about) keeps its markup; calm it down inside the drawer */
#esirl-deck-unique .q-guide-drawer #study-guide-content section{background:#fff!important;padding:18px!important;margin-bottom:14px!important;border:1px solid var(--q-line);border-radius:14px!important}
#esirl-deck-unique .q-guide-drawer #study-guide-content section:last-child{margin-bottom:0!important}
#esirl-deck-unique .q-guide-drawer #study-guide-content h3{font-size:1.05rem;margin:0 0 .9rem!important}
#esirl-deck-unique .q-guide-drawer #study-guide-content p{font-size:16px;line-height:1.7}
@media (max-width:767px){#esirl-deck-unique .q-guide-drawer .translation-grid{grid-template-columns:1fr!important;gap:1rem!important}}