/* =============================================================================
   QUIZ-WORLD button system: Deep Space Blue + Steel Blue + Papaya Whip (Fiery Ocean)
   -----------------------------------------------------------------------------
   One stylesheet for every button on the site. Loaded LAST on every page, so it
   restyles the existing class names (.primary, .button, .btn, .btn-outline,
   .danger, .icon-btn, .text-button, …) without any markup change.

   Variants    primary (signature dark glass) · secondary (glass + hairline)
               ghost (underline draws in) · danger (rose) · icon (round) · chip
   States      hover · press · loading · success · error · disabled · focus
   New markup  may use explicit classes: .qb-primary .qb-secondary .qb-ghost
               .qb-danger .qb-icon .qb-chip (+ .qb-compact .qb-large .qb-dark .qb-light)
   JavaScript  qw-buttons.js: pointer spotlight, magnetic pull, touch press and
               setBtnState(btn, 'loading' | 'success' | 'error').

   How the selectors work
   - Lists are tag-qualified (button / a / input) and wrapped in
     :where(), so a ".primary" class on a <div> is never a button and every list
     has equal strength: the ORDER of the blocks decides (secondary first, then
     primary, danger, ghost, icon, chip).
   - The :not(#qb) suffix lifts visual rules above older stylesheets without
     !important. Layout rules (display, position, gap) are deliberately NOT lifted,
     so older responsive rules that hide or place a button keep working.
   - test/buttons.spec.ts checks that this file, the page links and the palette stay
     consistent.

   Colour rule: no gold, no Cyprus green and no bright blue in here. Both live only inside the logo.
   ============================================================================= */

/* ---------- 0. Registered properties (progressive enhancement) ----------------
   Without @property support the gradient edge simply stays still: 0deg and 360deg
   render identically, so nothing flickers. */
@property --qb-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --qb-fill { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --qb-spot { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --qb-kind { syntax: "*"; inherits: false; }

/* ---------- 1. Palette and tokens (single source of truth) ------------------------ */
:root {
  --ink: var(--text);
  --ink-2: var(--text);
  --sapphire: var(--surface-hover);
  --violet: var(--surface-hover);
  --platinum: var(--surface-hover);
  --rose: var(--danger);

  /* Derived steps, kept beside the palette so nobody invents a new blue. */
  --ink-3: var(--text);
  --ink-4: var(--text);
  --sapphire-deep: var(--surface-hover);
  --sapphire-soft: var(--surface-hover);
  --sapphire-tint: var(--surface-hover);
  --violet-soft: var(--surface-hover);
  --violet-tint: var(--surface-hover);
  --platinum-2: var(--surface);
  --platinum-3: var(--surface-hover);
  --slate: var(--text-muted);
  --slate-soft: var(--surface-hover);
  --rose-deep: var(--danger);
  --rose-soft: color-mix(in srgb, var(--danger) 12%, var(--bg));
  --rose-tint: color-mix(in srgb, var(--danger) 12%, var(--bg));

  /* Motion */
  --qb-ease: cubic-bezier(.22, 1, .36, 1);
  --qb-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Surface tokens: light page (default) */
  --qb-fg: var(--ink);
  --qb-fill-a: var(--surface-hover);
  --qb-fill-b: var(--surface-hover);
  --qb-on-fill: var(--bg);
  --qb-link: var(--sapphire-deep);
  --qb-glass: var(--bg);
  --qb-glass-hover: var(--bg);
  --qb-base: var(--bg);
  --qb-hl: var(--bg);
  --qb-hair-1: color-mix(in srgb, var(--sapphire) 58%, transparent);
  --qb-hair-2: color-mix(in srgb, var(--violet) 46%, transparent);
  --qb-hair-3: color-mix(in srgb, var(--slate) 34%, transparent);
  --qb-glow: color-mix(in srgb, var(--sapphire) 44%, transparent);
  --qb-halo: var(--ink);
  --qb-danger-fg: var(--rose-deep);
  --qb-danger-glass: color-mix(in srgb, var(--rose) 9%, var(--bg));
  --qb-danger-glass-hover: color-mix(in srgb, var(--rose) 18%, var(--bg));
  --qb-edge-1: var(--violet);
  --qb-edge-2: var(--sapphire-soft);
  --qb-edge-3: var(--platinum);
  --qb-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071a21' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --qb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8l5.2 5.2L19.5 7'/%3E%3C/svg%3E");
}
/* Dark pages and always-dark surfaces */
html[data-theme="dark"], .sidebar, .result-card, .qb-dark {
  --qb-fg: var(--platinum);
  --qb-link: var(--sapphire-soft);
  --qb-glass: var(--surface-hover);
  --qb-glass-hover: var(--surface-hover);
  --qb-base: var(--ink-2);
  --qb-hl: var(--surface-hover);
  --qb-hair-1: color-mix(in srgb, var(--sapphire-soft) 64%, transparent);
  --qb-hair-2: color-mix(in srgb, var(--violet-soft) 50%, transparent);
  --qb-hair-3: color-mix(in srgb, var(--platinum) 22%, transparent);
  --qb-glow: color-mix(in srgb, var(--sapphire) 55%, transparent);
  --qb-danger-fg: var(--rose-soft);
  --qb-danger-glass: color-mix(in srgb, var(--rose) 14%, var(--ink-2));
  --qb-danger-glass-hover: color-mix(in srgb, var(--rose) 26%, var(--ink-2));
}
/* Light panels inside dark pages */
.qb-light, .surface-light, .flow-section, .creator-section, .faq-section, .button.white {
  --qb-fg: var(--ink);
  --qb-link: var(--sapphire-deep);
  --qb-glass: var(--bg);
  --qb-glass-hover: var(--bg);
  --qb-base: var(--bg);
  --qb-hl: var(--bg);
  --qb-hair-1: color-mix(in srgb, var(--sapphire) 58%, transparent);
  --qb-hair-2: color-mix(in srgb, var(--violet) 46%, transparent);
  --qb-hair-3: color-mix(in srgb, var(--slate) 34%, transparent);
  --qb-glow: color-mix(in srgb, var(--sapphire) 44%, transparent);
  --qb-danger-fg: var(--rose-deep);
  --qb-danger-glass: color-mix(in srgb, var(--rose) 9%, var(--bg));
  --qb-danger-glass-hover: color-mix(in srgb, var(--rose) 18%, var(--bg));
}

/* ---------- 2. Keyframes ---------------------------------------------------------------- */
@keyframes qb-orbit { to { --qb-angle: 360deg; } }
@keyframes qb-sweep {
  from { background-position: 0 0, 100% 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 0% 0, 0 0, 0 0, 0 0; }
}
@keyframes qb-spin { to { rotate: 360deg; } }
@keyframes qb-ring { from { --qb-fill: 0deg; } to { --qb-fill: 360deg; } }
@keyframes qb-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes qb-pulse {
  0% { outline: 2px solid color-mix(in srgb, var(--violet) 70%, transparent); outline-offset: 0; }
  100% { outline: 2px solid transparent; outline-offset: 14px; }
}
@keyframes qb-shake {
  0%, 100% { translate: 0 0; }
  16% { translate: -5px 0; }
  34% { translate: 4px 0; }
  52% { translate: -3px 0; }
  70% { translate: 2px 0; }
  86% { translate: -1px 0; }
}
@keyframes qb-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- 3. Shared structure (every variant) --------------------------------------------- */
/* Layout: not lifted, so older responsive rules (display:none on small screens, fixed or
   absolute placement) still win. */
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter) {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
}
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter)[hidden] { display: none; }

/* Look: lifted above older stylesheets. */
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb) {
  --qb-h: 46px;
  --qb-px: 22px;
  --qb-pr: var(--qb-px);
  --qb-fs: .95rem;
  min-width: 44px;
  min-height: max(44px, var(--qb-h));
  padding: calc((max(44px, var(--qb-h)) - var(--qb-content, 1.15em)) / 2 - 1px) var(--qb-px);
  font-family: inherit;
  font-size: var(--qb-fs);
  font-weight:600;
  line-height: 1.15;
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  color: var(--qb-fg);
  background: none;
  border: 1px solid transparent;
  border-radius:999px;
  box-shadow: none;
  filter: none;
  translate: var(--qb-tx, 0px) calc(var(--qb-ty, 0px) + var(--qb-lift, 0px));
  scale: var(--qb-s, 1);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  transition:
    translate .38s var(--qb-ease), scale .62s var(--qb-spring), box-shadow .35s var(--qb-ease), --qb-spot .35s var(--qb-ease),
    background-color .25s, color .2s, border-color .25s, opacity .2s, filter .25s, width .42s var(--qb-ease);
}
/* Press: spring squish. Works for mouse, pen, touch and keyboard (JS adds .is-pressed). */
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):is(:active, .is-pressed):not(:disabled, [aria-disabled="true"]) {
  --qb-s: .96;
  --qb-lift: 0px;
  --qb-spot: 1;
  transform: none;
  transition:
    translate .14s var(--qb-ease), scale .12s var(--qb-ease), box-shadow .14s ease-out,
    background-color .25s, color .2s, border-color .25s, opacity .2s, filter .25s, width .42s var(--qb-ease);
}
@media (hover: hover) and (pointer: fine) {
  :is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) { --qb-lift: -2px; --qb-spot: 1; transform: none; }
}
/* Focus: 2px platinum ring with a dark keyline so it also shows on light pages. */
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):focus-visible {
  outline: 2px solid var(--platinum);
  outline-offset: 2px;
  --qb-ring: 0 0 0 5px var(--qb-halo);
  transform: none;
}
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):focus:not(:focus-visible) { outline: none; }

/* ---------- 4. Secondary: glass with a gradient hairline --------------------------------------- */
:is(button, a, input):where(.qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip):not(#qb) {
  --qb-kind: secondary;
  color: var(--qb-fg);
  background: var(--surface);
  box-shadow: none;
}
:is(button, a, input):where(.qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip):not(#qb)::before { content: none; }
@media (hover: hover) and (pointer: fine) {
  :is(button, a, input):where(.qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) {
    background: var(--surface);
    box-shadow: none;
  }
}
:is(button, a, input):where(.qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip):not(#qb):is(:active, .is-pressed):not(:disabled, [aria-disabled="true"], [data-qb-state]) {
  box-shadow: none;
}

/* ---------- 5. Primary: dark glass pill, rotating gradient edge -------------------------------- */
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb) {
  --qb-kind: primary;
  --qb-h: 48px;
  --qb-content: 28px; /* the arrow chip is taller than the text line */
  --qb-pr: calc(var(--qb-px) - 8px);
  color: var(--qb-on-fill);
  padding-right: var(--qb-pr);
  border: 1.5px solid transparent;
  background: var(--surface);
  background-position: 0 0, 100% 0, 0 0, 0 0, 0 0;
  box-shadow: none;
  text-shadow: none;
  animation: qb-orbit 9s linear infinite;
}
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb)::before { content: none; }
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb)::after {
  content: "";
  display: var(--qb-chip, inline-block);
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0 0 0 2px;
  vertical-align: middle;
  border-radius:50%;
  background: var(--surface);
  box-shadow: none;
  transition: translate .5s var(--qb-spring), scale .5s var(--qb-spring), box-shadow .3s var(--qb-ease);
}
@media (hover: hover) and (pointer: fine) {
  :is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) {
    box-shadow: none;
    animation: qb-orbit 9s linear infinite, qb-sweep .95s var(--qb-ease) 1 both;
  }
  :is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state])::after { translate: 5px 0; }
}
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb):focus-visible:not([data-qb-state]) { animation: qb-orbit 9s linear infinite, qb-sweep .95s var(--qb-ease) 1 both; }
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb):focus-visible:not([data-qb-state])::after { translate: 5px 0; }
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb):is(:active, .is-pressed):not(:disabled, [aria-disabled="true"], [data-qb-state]) {
  box-shadow: none;
}
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb):is(:active, .is-pressed):not(:disabled, [aria-disabled="true"], [data-qb-state])::after { scale: .9; translate: 2px 0; }

/* ---------- 6. Danger: rose, for destructive actions only ------------------------------------------ */
:is(button, a, input):where(.qb-danger, .danger, .btn-danger):not(#qb) {
  --qb-kind: danger;
  --qb-hair-1: var(--rose);
  --qb-hair-2: color-mix(in srgb, var(--rose) 60%, var(--violet));
  --qb-hair-3: var(--rose-soft);
  --qb-glow: color-mix(in srgb, var(--rose) 52%, transparent);
  color: var(--qb-danger-fg);
  background: var(--surface);
  box-shadow: none;
}
:is(button, a, input):where(.qb-danger, .danger, .btn-danger):not(#qb)::before { content: none; }
@media (hover: hover) and (pointer: fine) {
  :is(button, a, input):where(.qb-danger, .danger, .btn-danger):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) {
    background: var(--surface);
    box-shadow: none;
  }
}
:is(button, a, input):where(.qb-danger, .danger, .btn-danger):not(#qb):is(:active, .is-pressed):not(:disabled, [aria-disabled="true"], [data-qb-state]) {
  box-shadow: none;
}

/* ---------- 7. Ghost: text only, the underline draws in ----------------------------------------------- */
:is(button, a, input):where(.qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link):not(#qb) {
  --qb-kind: ghost;
  --qb-px: 8px;
  padding: calc((max(44px, var(--qb-h)) - 1.15em) / 2) var(--qb-px);
  border: 0;
  border-radius:var(--radius-pill);
  color: var(--qb-link);
  font-weight:600;
  background: var(--surface);
  box-shadow: var(--qb-ring, 0 0 0 0 transparent);
  transition:
    background-size .42s var(--qb-ease), translate .38s var(--qb-ease), scale .62s var(--qb-spring), box-shadow .3s, color .2s, opacity .2s, width .42s var(--qb-ease);
}
:is(button, a, input):where(.qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link):not(#qb)::before { content: none; }
@media (hover: hover) and (pointer: fine) {
  :is(button, a, input):where(.qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) { background-size: 100% 2px; }
}
:is(button, a, input):where(.qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link):not(#qb):focus-visible { background-size: 100% 2px; }
:is(button, a, input):where(.qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link):not(#qb):is(:active, .is-pressed):not(:disabled, [aria-disabled="true"], [data-qb-state]) { background-size: 100% 2px; }

/* ---------- 8. Icon: round glass --------------------------------------------------------------------------- */
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help) { width: 44px; height: 44px; border-radius:50%; }
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb) {
  --qb-kind: icon;
  --qb-px: 0px;
  --qb-h: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  gap: 0;
  color: var(--qb-fg);
  background: var(--surface);
  box-shadow: none;
}
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb) svg { width: 20px; height: 20px; }
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb)::before { content: none; }
@media (hover: hover) and (pointer: fine) {
  :is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) {
    background: var(--surface);
    box-shadow: none;
  }
}
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb):is(:active, .is-pressed):not(:disabled, [aria-disabled="true"], [data-qb-state]) {
  box-shadow: none;
}
/* An icon button that is switched on (focus-mode tools, pen, theme toggles) */
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb):is(.active, [aria-pressed="true"], [aria-expanded="true"]) {
  color: var(--qb-on-fill);
  background: var(--surface);
}
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb):is(.active-red) {
  color: var(--rose-soft);
  background: var(--surface);
}

/* ---------- 9. Chip: tabs, filters, toggles ------------------------------------------------------------------- */
:is(button, a, input):where(.qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb) {
  --qb-kind: chip;
  --qb-h: 44px;
  --qb-px: 16px;
  --qb-fs: .9rem;
  color: var(--qb-fg);
  background: transparent;
  border: 1px solid var(--qb-hair-3);
  box-shadow: var(--qb-ring, 0 0 0 0 transparent);
}
:is(button, a, input):where(.qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb)::before { content: none; }
@media (hover: hover) and (pointer: fine) {
  :is(button, a, input):where(.qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) {
    background: var(--qb-glass-hover);
    border-color: var(--qb-hair-1);
  }
}
:is(button, a, input):where(.qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):is(.active, [aria-pressed="true"], [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
  color: var(--qb-on-fill);
  background: var(--surface);
  box-shadow: none;
}
.question-navigator button:not(#qb) { min-width: 44px; padding-inline: 8px; border-radius: var(--radius-input); }
.question-navigator button.answered:not(#qb, .active) {
  color: var(--sapphire-deep);
  background: var(--surface);
}
html[data-theme="dark"] .question-navigator button.answered:not(#qb, .active) {
  color: var(--platinum);
  background: var(--surface);
}

/* ---------- 9b. Navigation row: the workspace sidebar ------------------------------------------------------------------- */
:is(button, a, input):where(.nav-button):not(#qb) {
  --qb-kind: nav;
  min-height: 44px;
  color: var(--platinum);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-input);
  box-shadow: var(--qb-ring, 0 0 0 0 transparent);
  scale: var(--qb-s, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: scale .5s var(--qb-spring), background-color .2s, color .2s, box-shadow .3s, --qb-spot .35s var(--qb-ease);
}
:is(button, a, input):where(.nav-button):not(#qb)::before { content: none; }
@media (hover: hover) and (pointer: fine) {
  :is(button, a, input):where(.nav-button):not(#qb):hover { --qb-spot: 1; background: var(--surface); transform: none; }
}
:is(button, a, input):where(.nav-button):not(#qb):is(:active, .is-pressed) { --qb-s: .98; --qb-spot: 1; transform: none; transition-duration: .12s; }
:is(button, a, input):where(.nav-button):not(#qb):is(.active, [aria-current="page"]) {
  color: var(--text);
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--sapphire-soft), var(--qb-ring, 0 0 0 0 transparent);
}
:is(button, a, input):where(.nav-button):not(#qb):focus-visible { outline: 2px solid var(--platinum); outline-offset: 2px; --qb-ring: 0 0 0 5px var(--ink); }
:is(button, a, input):where(.nav-button):not(#qb):focus:not(:focus-visible) { outline: none; }

/* ---------- 10. Sizes and dense places ------------------------------------------------------------------------------ */
:is(button, a, input):where(.btn-small, .compact-action, .nav-pill, .qw-cta, .button.small, .nav-action, .social-btn, .menu-control, .menu-link, .pt-action, .tsq-mini-btn, .theme-switch, .dock-primary, .menu-toggle, .qb-compact, .lms-workspace-link, .skip-link, .skip):not(#qb), .list-actions :is(button, a, input):not(#qb),
td :is(button, a, input):not(#qb),
th :is(button, a, input):not(#qb),
.mobile-controls :is(button, a, input):not(#qb),
.split-top-links :is(button, a, input):not(#qb),
.notification-head :is(button, a, input):not(#qb),
.lms-player-tools :is(button, a, input):not(#qb),
.player-actions .middle :is(button, a, input):not(#qb),
.qb-compact-zone :is(button, a, input):not(#qb) { --qb-h: 44px; --qb-px: 16px; --qb-pr: var(--qb-px); --qb-fs: .875rem; --qb-chip: none; --qb-content: 1.15em; }
:is(button, a, input):where(.btn-primary-lg, button:is(.join-page-card *), .qb-large):not(#qb) { --qb-h: 56px; --qb-px: 28px; --qb-pr: calc(var(--qb-px) - 8px); --qb-fs: 1.05rem; --qb-chip: inline-block; --qb-content: 32px; }
:is(button, a, input):where(.btn-primary-lg, button:is(.join-page-card *), .qb-large):not(#qb)::after { width: 32px; height: 32px; background-size: 17px 17px, auto; }

/* ---------- 11. States -------------------------------------------------------------------------------------------------- */
/* Disabled: desaturated, no glow, no motion */
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):is(:disabled, [aria-disabled="true"], .is-disabled):not([data-qb-state]) {
  cursor: not-allowed;
  filter: saturate(.2) brightness(.96);
  opacity: .58;
  box-shadow: none;
  animation: none;
  --qb-lift: 0px;
  --qb-s: 1;
  --qb-spot: 0;
}
a:where(.button, .btn, .primary, .secondary, .danger)[aria-disabled="true"]:not(#qb) { pointer-events: none; }

/* Any active state: the button holds still and the label steps aside */
[data-qb-state]:not(#qb) {
  pointer-events: none;
  cursor: progress;
  overflow: hidden;
  white-space: nowrap;
  --qb-lift: 0px;
}
[data-qb-state="loading"]:not(#qb), [data-qb-state="success"]:not(#qb) {
  padding-inline: 0;
  gap: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
[data-qb-state="loading"]:not(#qb) > *, [data-qb-state="success"]:not(#qb) > * { opacity: 0; transition: opacity .15s; }
[data-qb-state="loading"]:not(#qb)::after, [data-qb-state="success"]:not(#qb)::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius:50%;
  translate: none;
  scale: 1;
  background: var(--surface);
  box-shadow: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), var(--bg) calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), var(--bg) calc(100% - 1.5px));
  animation: qb-spin .85s linear infinite;
}
/* Success: ring completes, check draws itself, soft pulse. No green. */
[data-qb-state="success"]:not(#qb) { animation: qb-pulse .9s ease-out .55s 1 both; }
[data-qb-state="success"]:not(#qb)::after {
  background: var(--surface);
  animation: qb-ring .5s var(--qb-ease) 1 both;
}
[data-qb-state="success"]:not(#qb)::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  background: var(--bg);
  -webkit-mask: var(--qb-check) center / contain no-repeat;
  mask: var(--qb-check) center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  animation: qb-draw .4s cubic-bezier(.65, 0, .35, 1) .38s 1 both;
}
/* Every variant turns into the same dark disc while the white check shows (an inset shadow covers any glass). */
[data-qb-state="success"]:not(#qb) {
  box-shadow: inset 0 0 0 60px var(--ink-2), 0 0 0 1px var(--ink-3), 0 10px 24px -12px var(--qb-glow), var(--qb-ring, 0 0 0 0 transparent);
}
/* Error: gentle shake and a rose flash */
[data-qb-state="error"]:not(#qb) {
  --qb-edge-1: var(--rose);
  --qb-edge-2: var(--rose-soft);
  --qb-edge-3: var(--rose);
  --qb-hair-1: var(--rose);
  --qb-hair-2: var(--rose-soft);
  --qb-hair-3: var(--rose);
  --qb-glow: color-mix(in srgb, var(--rose) 62%, transparent);
  animation: qb-shake .5s cubic-bezier(.36, .07, .19, .97) 1 both;
  box-shadow: none;
  cursor: default;
}

/* ---------- 12. Small pieces ----------------------------------------------------------------------------------------------------- */
.qb-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Colour swatches in the pen toolbar: 44px target, the colour disc stays 22px */
.pt-swatch:not(#qb) { width: 44px; height: 44px; min-width: 44px; padding: 11px; border: 2px solid transparent; border-radius:50%; background-clip: content-box; box-sizing: border-box; cursor: pointer; transition: scale .5s var(--qb-spring), border-color .2s; }
.pt-swatch.active:not(#qb) { border-color: var(--platinum); box-shadow: 0 0 0 2px var(--ink); scale: 1.08; transform: none; }
html[data-theme="light"] .pt-swatch.active:not(#qb) { border-color: var(--ink); box-shadow: none; }
.pt-swatch:focus-visible:not(#qb) { outline: 2px solid var(--platinum); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
/* The old click ripple on the public pages is replaced by the press squish */
.press-ripple { display: none !important; }

/* ---------- 13. Reduced motion, forced colours, print --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --qb-spring: ease-out; }
  :is(button, a, input), :is(button, a, input)::before, :is(button, a, input)::after { animation: none !important; transition-duration: .01ms !important; }
  [data-qb-state]:not(#qb) { animation: none !important; }
  :is(button, a, input):is(:hover, :focus-visible, :active, .is-pressed):not(#qb) { translate: none; scale: 1; }
  [data-qb-state]:not(#qb)::after { animation: qb-breathe 1.4s ease-in-out infinite !important; }
  [data-qb-state="success"]:not(#qb)::after { animation: none !important; }
  [data-qb-state="success"]:not(#qb)::before { animation: none !important; clip-path: none; }
  [data-qb-state="error"]:not(#qb) { animation: none !important; }
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --qb-spring: linear(0, .32 4%, .74 9%, 1.07 15%, 1.3 20%, 1.38 24%, 1.32 29%, 1.14 36%, .95 44%, .88 50%, .93 58%, 1.02 68%, 1.01 78%, 1 100%); }
  @media (prefers-reduced-motion: reduce) { :root { --qb-spring: ease-out; } }
}
@media (forced-colors: active) {
  :is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb) { border: 1px solid ButtonText; forced-color-adjust: auto; }
  :is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):focus-visible { outline: 2px solid Highlight; }
}

/* Floating help button: the visible text is replaced by a "?" glyph (see experience-lms.css), so the label itself stays hidden. */
:is(a, button):where(.lms-help):not(#qb) { font-size: 0; }

/* =============================================================================
   Theme layer (appended to qw-buttons.css by build.mjs, so it loads last on every QUIZ-WORLD page)
   ---------------------------------------------------------------------------
   Light mode is LIGHT: cream page, white cards, mint tints, green actions. No large near-black slabs.
   Dark mode is MATTE BLACK: neutral charcoal surfaces, hairline borders, the brand green only as an accent.
   The tokens below replace the old deep-green dark palette everywhere that reads them; the rules after
   them handle the places that used to be always-dark (workspace hero, dock, sheets, community, join, home).
   ============================================================================= */

/* ---------- Dark: matte black tokens ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: var(--text); --ink-2: var(--text); --ink-3: var(--text); --ink-4: var(--text);
  --slate: var(--text-muted); --slate-soft: var(--surface-hover);
  --surface-page: var(--bg); --surface-card: var(--surface); --surface-subtle: var(--surface); --border-subtle: var(--border);
  --text-primary: var(--accent);
  --paper: var(--bg); --white: var(--surface); --legacy-ink: var(--text); --muted: var(--text-muted); --line: var(--border);
  --mint: var(--accent); --mint-pale: var(--accent); --forest: var(--surface-hover); --forest-2: var(--bg);
  --brand-soft: var(--accent); --brand-highlight: var(--accent); --brand-focus: var(--accent);
  --danger-pale: var(--surface-hover); --amber-pale: var(--surface);
  --shadow: none;
  --qu-card: var(--surface); --qu-text: var(--text); --qu-muted: var(--text-muted); --qu-line: var(--border);
  --qd-glass: var(--surface); --qd-line: var(--border);
  --qd-shadow: none;
  --qd-text: var(--text-muted); --qd-active: var(--accent-text); --qd-pill: var(--surface-hover); --qd-pill-shadow: none;
  --qd-sheet: var(--surface); --qd-sheet-line: var(--border); --qd-tile: var(--surface-hover); --qd-tile-on: var(--surface-hover); --qd-muted: var(--text-muted);
}
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] .qw-header { --qw-bg: var(--bg); --qw-text: var(--text); --qw-muted: var(--text-muted); --qw-border: var(--border); --qw-hover: var(--surface); }
html[data-theme="dark"] .qw-banner-info { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .qw-banner-success { background: var(--surface); color: var(--platinum, var(--text)); }
html[data-theme="dark"] .qw-banner-warning { background: var(--surface); color: var(--text-muted); border-bottom-color: var(--border); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--bg); }
html[data-theme="dark"] .meta span, html[data-theme="dark"] .tabs { background: var(--surface); }
html[data-theme="dark"] .qc-tabs button.on, html[data-theme="dark"] .qc-seg button.on { background: var(--surface-hover) !important; color: var(--text-muted) !important; }

/* ---------- Light: nothing is a dark slab ---------- */
/* The workspace hero is a soft mint-to-cream panel in light mode and a matte panel with a faint green glow in dark. */
html:not([data-theme="dark"]) .workspace-hero {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: none;
}
html:not([data-theme="dark"]) .workspace-hero h2, html:not([data-theme="dark"]) .workspace-hero h1 { color: var(--ink); }
html:not([data-theme="dark"]) .workspace-hero p { color: var(--slate); }
html:not([data-theme="dark"]) .workspace-hero .eyebrow { color: var(--sapphire-deep); }
html[data-theme="dark"] .workspace-hero {
  background: var(--surface);
  border: 1px solid var(--border);
}
@media (max-width: 900px) {
  html:not([data-theme="dark"]) .workspace-hero { background: var(--surface); }
  html[data-theme="dark"] .workspace-hero { background: var(--surface); }
}

/* Light pages: the app's own header chips and cards stay white on cream */
html:not([data-theme="dark"]) .quick-action-bar { background: var(--bg); }

/* ---------- Dark: component fixes for rules that used deep green ---------- */
html[data-theme="dark"] .panel, html[data-theme="dark"] .card, html[data-theme="dark"] .metric, html[data-theme="dark"] .list-row { background-color: var(--surface); }
html[data-theme="dark"] .list-row:hover, html[data-theme="dark"] a.list-row:hover { background: var(--surface); }
html[data-theme="dark"] .qc-card, html[data-theme="dark"] .qc-row, html[data-theme="dark"] .qc-lb { background: var(--surface-hover); border-color: var(--border); }
html[data-theme="dark"] .qc-tabs { background: var(--surface-hover); }
html[data-theme="dark"] .qd-sheet { color: var(--text); }
html[data-theme="dark"] .qd-progress i { box-shadow: none; }

/* Community hero: light panel in light mode, matte in dark mode */
html:not([data-theme="dark"]) .qc-hero { background: var(--surface); color: var(--ink, var(--text)); border: 1px solid var(--border); box-shadow: none; }
html:not([data-theme="dark"]) .qc-hero .eyebrow { color: var(--text); }
html:not([data-theme="dark"]) .qc-hero-copy p { color: var(--text-muted); }
html:not([data-theme="dark"]) .qc-stat { background: var(--bg); border-color: var(--border); }
html:not([data-theme="dark"]) .qc-stat span { color: var(--text-muted); }
html[data-theme="dark"] .qc-hero { background: var(--surface); border: 1px solid var(--border); }
html[data-theme="dark"] .qc-stat { background: var(--surface-hover); border-color: var(--border); }

/* QUIZ-WORLD landing: dark by design, so it uses the same matte black as the dark theme */
html:has(body.quizworld-home-page), body.quizworld-home-page { background: var(--bg); }
body.quizworld-home-page .feature-band, body.quizworld-home-page .section:not(.surface-light):not(.flow-section):not(.creator-section):not(.faq-section) { --band: var(--bg); }

/* =============================================================================
   Light theme v2 (owner brief, 2026-10-11): minimal "Notion-style" academic look. Warm sepia page, pure white
   cards with a 1px border and no drop shadows, warm charcoal text, deep muted teal actions.
   Dark mode above stays matte black. Everything here only applies to the light theme.
   ============================================================================= */
html:not([data-theme="dark"]) {
  --ink: var(--text); --ink-2: var(--text); --ink-3: var(--text); --ink-4: var(--text);
  --slate: var(--text-muted); --slate-soft: var(--surface-hover);
  --sapphire: var(--surface-hover); --sapphire-deep: var(--surface-hover); --sapphire-soft: var(--surface-hover); --sapphire-tint: var(--surface-hover);
  --violet: var(--surface-hover); --violet-soft: var(--surface-hover); --violet-tint: var(--surface-hover);
  --platinum: var(--surface-hover); --platinum-2: var(--surface-hover); --platinum-3: var(--surface-hover);
  --paper: var(--surface-hover); --white: var(--bg); --legacy-ink: var(--text); --muted: var(--text-muted); --line: var(--border);
  --mint: var(--accent); --mint-pale: var(--accent); --forest: var(--surface-hover); --forest-2: var(--surface-hover);
  --surface-page: var(--surface-hover); --surface-card: var(--bg); --surface-subtle: var(--surface); --border-subtle: var(--border);
  --text-primary: var(--accent);
  --brand-primary: var(--accent); --brand-primary-strong: var(--accent); --brand-navigation: var(--accent); --brand-soft: var(--accent);
  --brand-focus: var(--accent); --brand-highlight: var(--accent); --brand-cream: var(--accent);
  --status-success: var(--ok); --status-success-soft: var(--ok-bg); --status-info: var(--surface-hover); --status-info-soft: var(--surface-hover);
  --shadow: none; --shadow-soft: none;
  --qb-fg: var(--text); --qb-fill-a: var(--surface-hover); --qb-fill-b: var(--surface-hover); --qb-link: var(--accent);
  --qu-card: var(--bg); --qu-text: var(--text); --qu-muted: var(--text-muted); --qu-line: var(--border);
  --qd-glass: var(--bg); --qd-line: var(--border); --qd-shadow: none; --qd-text: var(--text-muted); --qd-active: var(--accent-text);
  --qd-pill: var(--surface-hover); --qd-pill-shadow: none; --qd-sheet: var(--bg); --qd-sheet-line: var(--border); --qd-tile: var(--surface); --qd-tile-on: var(--surface-hover); --qd-muted: var(--text-muted);
}
html:not([data-theme="dark"]) body { background: var(--surface-hover); color: var(--text); }
html:not([data-theme="dark"]) :is(.panel, .card, .metric, .list-row, .quick-action-bar, .qc-card, .qc-row, .qc-lb, .qc-stat, .qd-sheet, .qd-bar, .share-ready, .share-manage-card, .shared-hero, .input-card, .stat, .modal, .dialog) {
  background-color: var(--bg); border: 1px solid var(--border); box-shadow: none;
}
html:not([data-theme="dark"]) .qd-wrap .qd-dock, html:not([data-theme="dark"]) .qd-dock { background: var(--bg); border: 1px solid var(--border); box-shadow: none; }
html:not([data-theme="dark"]) .workspace-hero, html:not([data-theme="dark"]) .qc-hero { background: var(--bg); border: 1px solid var(--border); box-shadow: none; }
html:not([data-theme="dark"]) .workspace-hero p, html:not([data-theme="dark"]) .qc-hero-copy p { color: var(--text-muted); }
html:not([data-theme="dark"]) .workspace-hero .eyebrow, html:not([data-theme="dark"]) .qc-hero .eyebrow, html:not([data-theme="dark"]) .eyebrow { color: var(--text); }
/* Primary actions: flat deep teal, darker on hover. Secondary: white with a hairline border. */

/* Minimal look: no drop shadows or glows on any button in light mode. */
html:not([data-theme="dark"]) :is(button, a, input, label):not(#qb):not(#qb2) { box-shadow: none !important; }
html:not([data-theme="dark"]) :is(button, a, input):not(#qb):not(#qb2)::before, html:not([data-theme="dark"]) :is(button, a, input):not(#qb):not(#qb2)::after { box-shadow: none !important; }

/* =============================================================================
   Motion v3 (round 14): paper-plane send buttons, pogo navigation, readable focus ring, press feedback on clickable cards.
   ============================================================================= */
:root { --qb-fx: var(--surface-hover); }
html[data-theme="dark"] { --qb-fx: var(--surface-hover); }

/* ---- Send buttons (Share, Assign, Create link): icon + label inside, the flight happens on a fixed overlay (qw-buttons.js) ---- */
:is(button, a)[data-qb-send]:not(#qb) { gap: .6em; overflow: hidden; padding-right: var(--qb-px); transition: translate .38s var(--qb-ease), scale .62s var(--qb-spring), width .42s var(--qb-spring), padding .38s var(--qb-ease), gap .38s var(--qb-ease), background-color .25s, border-color .25s, color .2s; }
:is(button, a)[data-qb-send]:not(#qb)::before, :is(button, a)[data-qb-send]:not(#qb)::after { content: none; display: none; }
.qb-plane { display: inline-grid; place-items: center; flex: none; width: 1.15em; height: 1.15em; transition: opacity .14s ease, transform .3s var(--qb-ease); }
.qb-plane svg { width: 100%; height: 100%; fill: currentColor; }
.qb-label { display: inline-block; transition: opacity .22s ease, transform .3s var(--qb-ease); }
@media (hover: hover) and (pointer: fine) {
  :is(button, a)[data-qb-send]:not([data-qb-state]):hover .qb-plane { transform: translate(2px, -2px) rotate(-8deg) scale(1.08); }
}
:is(button, a)[data-qb-send]:not([data-qb-state]):active .qb-plane { transform: translate(5px, -5px) scale(.9); }
.qb-check { position: absolute; inset: 0; margin: auto; width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; pointer-events: none; }
.qb-check.on { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .34s var(--qb-ease), opacity .08s; }
/* while the plane is away the button is a circle holding only the check */
:is(button, a)[data-qb-send][data-qb-state="send"]:not(#qb) { padding-left: 0; padding-right: 0; gap: 0; color: inherit; -webkit-text-fill-color: currentColor; cursor: default; }
[data-qb-send][data-qb-state="send"] .qb-plane, [data-qb-send][data-qb-state="send"] .qb-label { position: absolute; opacity: 0; transform: scale(.3) rotate(25deg); }
[data-qb-send][data-qb-state="send"] > * { opacity: 1; }
/* then it grows into a pill with the check and a short message */
:is(button, a)[data-qb-send][data-qb-state="sent"]:not(#qb) { cursor: default; color: inherit; -webkit-text-fill-color: currentColor; transition: translate .38s var(--qb-ease), scale .62s var(--qb-spring), width .42s var(--qb-spring), background-color .25s, border-color .25s; }
[data-qb-send][data-qb-state="sent"] .qb-plane { display: none; }
[data-qb-send][data-qb-state="sent"] .qb-check { position: static; order: -1; flex: none; margin: 0; }
[data-qb-send][data-qb-state="sent"] > * { opacity: 1; }
.qb-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147483000; pointer-events: none; overflow: visible; }
.qb-fx .qb-trail { fill: none; stroke: var(--qb-fx); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.qb-fx .qb-plane-shape { fill: var(--qb-fx); }
.qb-ring { position: fixed; z-index: 2147483001; box-sizing: border-box; border: 2px solid var(--qb-fx); border-radius:999px; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }

/* ---- Focus: a visible ring on the cream and white pages (the old cream ring vanished on them) ---- */
html:not([data-theme="dark"]) :is(button, a, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible:not(#qb) { outline: 2px solid var(--border); outline-offset: 3px; }
html[data-theme="dark"] :is(button, a, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible:not(#qb) { outline: 2px solid var(--border); outline-offset: 3px; }

/* ---- Clickable cards, choices and tiles: the same lift on hover and squish on press as buttons ---- */
:is(.share-choice, .qd-tile, .qd-action, .qh-go, a.list-row, .qc-card[tabindex]) { transition: transform .32s var(--qb-spring), border-color .2s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) { :is(.share-choice, .qh-go, a.list-row):hover { transform: translateY(-2px); } }
:is(.share-choice, .qd-tile, .qd-action, .qh-go, a.list-row):active { transform: scale(.975); }
.share-choice.on { animation: qb-choice .45s var(--qb-spring); }
@keyframes qb-choice { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: none; } }

/* ---- Disabled buttons look disabled and never lift ---- */
:is(button, a, input):is(:disabled, [aria-disabled="true"]):not([data-qb-state]):not(#qb) { opacity: .5; cursor: not-allowed; translate: none; scale: 1; }

@media (prefers-reduced-motion: reduce) {
  .share-choice.on { animation: none; }
  :is(.share-choice, .qh-go, a.list-row):hover, :is(.share-choice, .qd-tile, .qd-action, .qh-go, a.list-row):active { transform: none; }
}

/* ---- Flat teal for the last gradient and shadow leftovers in light mode (Notion-style: no shadows, one teal) ---- */
html:not([data-theme="dark"]) { --qd-plus-a: var(--surface-hover); --qd-plus-b: var(--surface-hover); --qd-accent: var(--accent-text); --qd-accent-2: var(--accent); }
html:not([data-theme="dark"]) :is(.qh-profile, .qh-pen, .qh-next-ico, .qd-plus, .qd-badge, .qw-dock, .qd) { box-shadow: none !important; }
html:not([data-theme="dark"]) :is(.qh-avatar, .qh-next-ico, .qd-avatar) { background: var(--surface-hover) !important; }
html:not([data-theme="dark"]) .qd-plus { animation: none; }
html:not([data-theme="dark"]) .qh-profile { background-image: none; }

/* =============================================================================
   Round 15 component layer: flat black surfaces, orange main action, teal details, cyprus tint. NO green, no gradients, no shadows.
   Processed like template.css (group placeholders) and appended LAST by build.mjs, so it wins over everything above it.
   One set of tokens (tokens.css) drives the whole app. Fonts: one family, weights 400 and 600 only. Shapes (round 16): pill 999px for controls, 14px fields, 20px cards, 6px checkboxes.
   The only coloured things left are the logo artwork, the logo loader (.mr-*) and danger red on delete actions.
   ============================================================================= */
:where(a:any-link) { color: inherit; }
/* ---- Legacy variable names all resolve to the neutral tokens, so old rules that read them turn neutral too ---- */
:root, html[data-theme="dark"], html:not([data-theme="dark"]) {
  --ink: var(--text); --ink-2: var(--surface); --ink-3: var(--surface-hover); --ink-4: var(--border);
  --slate: var(--text-muted); --slate-soft: var(--text-muted);
  --sapphire: var(--text); --sapphire-deep: var(--text); --sapphire-soft: var(--text-muted); --sapphire-tint: var(--surface-hover);
  --violet: var(--text); --violet-soft: var(--text-muted); --violet-tint: var(--surface-hover);
  --platinum: var(--text); --platinum-2: var(--bg); --platinum-3: var(--border);
  --paper: var(--bg); --white: var(--surface); --legacy-ink: var(--text); --muted: var(--text-muted); --line: var(--border);
  --mint: var(--surface-hover); --mint-pale: var(--surface-hover); --forest: var(--text); --forest-2: var(--surface);
  --surface-page: var(--bg); --surface-card: var(--surface); --surface-subtle: var(--surface); --border-subtle: var(--border);
  --text-primary: var(--text);
  --brand-primary: var(--accent); --brand-primary-strong: var(--accent-text); --brand-navigation: var(--text);
  --brand-soft: var(--surface-hover); --brand-focus: var(--accent); --brand-highlight: var(--surface-hover); --brand-cream: var(--bg);
  --status-success: var(--ok); --status-success-soft: var(--ok-bg); --status-info: var(--text); --status-info-soft: var(--surface-hover);
  --status-warning: var(--text); --status-warning-soft: var(--surface-hover);
  --shadow: none; --shadow-soft: none;
  --qb-fg: var(--text); --qb-fill-a: var(--primary); --qb-fill-b: var(--primary); --qb-on-fill: var(--on-primary); --qb-link: var(--text);
  --qb-glass: transparent; --qb-glass-hover: var(--surface-hover); --qb-base: var(--bg); --qb-hl: transparent;
  --qb-hair-1: var(--border); --qb-hair-2: var(--border); --qb-hair-3: var(--border); --qb-glow: transparent; --qb-halo: transparent;
  --qb-fx: var(--accent); --qb-page: var(--bg);
  --qu-card: var(--surface); --qu-text: var(--text); --qu-muted: var(--text-muted); --qu-line: var(--border);
  --qd-glass: var(--surface); --qd-line: var(--border); --qd-shadow: none; --qd-text: var(--text-muted); --qd-active: var(--accent-text);
  --qd-pill: var(--surface-hover); --qd-pill-shadow: none; --qd-sheet: var(--surface); --qd-sheet-line: var(--border); --qd-tile: var(--surface); --qd-tile-on: var(--surface-hover); --qd-muted: var(--text-muted);
  --qd-plus-a: var(--surface-hover); --qd-plus-b: var(--surface-hover); --qd-accent: var(--accent-text); --qd-accent-2: var(--accent);
  --danger-pale: color-mix(in srgb, var(--danger) 12%, var(--bg)); --amber-pale: var(--surface-hover);
}

html { background-color: var(--bg); }
html, body { color: var(--text); font-family: var(--font); }
body.theme-teal, body.quizworld-home-page, body.lv-body { color: var(--text); }
button, input, select, textarea { font-family: inherit; }
b, strong, th, h1, h2, h3, h4, h5, h6, label { font-weight: 600; }
body, p, li, td, span, small, small * { font-weight: 400; }
h1, h2, h3, h4, h5, h6, b, strong, th, label, button, .eyebrow, .qb-label, summary { font-weight: 600; }
.eyebrow { color: var(--text-muted); letter-spacing: .06em; }

/* ---- Surfaces: solid, hairline border, rounded card radius ---- */
:is(.panel, .card, .metric, .list-row, .quick-action-bar, .qc-card, .qc-row, .qc-lb, .qc-stat, .qd-sheet, .qd-bar, .share-ready, .share-manage-card, .shared-hero, .input-card, .stat, .modal, .dialog, .workspace-hero, .qc-hero, .qd-dock, .qw-dock, .result-card, .sidebar) {
  background: var(--surface); background-image: none; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: none;
}
html:not([data-theme="dark"]) :is(.panel, .card, .metric, .list-row, .quick-action-bar, .qc-card, .qc-row, .qc-lb, .qc-stat, .qd-sheet, .qd-bar, .share-ready, .share-manage-card, .shared-hero, .input-card, .stat, .modal, .dialog, .workspace-hero, .qc-hero, .qd-dock, .qw-dock) { background-color: var(--surface); border-color: var(--border); }
:is(a.list-row, .list-row, .qc-row):hover { background: var(--surface-hover); }
.workspace-hero p, .qc-hero-copy p, .muted, small { color: var(--text-muted); }
.workspace-hero .eyebrow, .qc-hero .eyebrow { color: var(--text-muted); }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-input); box-shadow: none; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--text-muted); box-shadow: none; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--bg); }
hr, .divider { border-color: var(--border); }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
::selection { background: color-mix(in srgb, var(--text) 22%, transparent); }
/* Badges and pills are plain neutral */
:is(.badge, .pill, .chip, .tag, .status, .meta span, .qh-badge, .qd-badge) { background: var(--surface-hover); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: none; }
/* Progress */
:is(progress, .progress, .bar, .qd-progress, .progress-bar) { accent-color: var(--text); }
:is(.qd-progress i, .progress i, .bar i, .progress-bar i, .progress-fill) { background: var(--text); box-shadow: none; }
/* No decorative overlays or glow anywhere */
.hero-sheen, .halo, .qb-fx-glow { display: none !important; }   /* the pointer halo (.qw-halo) is back: final pass */
/* Doodle wallpaper (round 16: medical line art mixed with study icons). ONE tiled SVG (public/assets/brand/doodle.svg, about 10 KB) used as a mask,
   so the stroke colour is the --doodle token in every theme: 7% on normal pages, 3.5% on the quiz-attempt screen. Cards have solid backgrounds, so it never sits behind text. */
html { background-color: var(--bg); }
html body:not(#qb) { background: transparent !important; background-image: none !important; }
html body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--doodle); opacity: var(--doodle-opacity); -webkit-mask: url("/assets/brand/doodle.svg") 0 0 / 1200px 1200px; mask: url("/assets/brand/doodle.svg") 0 0 / 1200px 1200px; }
html body[data-page="quiz"]::before { opacity: var(--doodle-opacity-quiet); }
html[data-bg="plain"] body::before { display: none; }
@media print { body::before { display: none !important; } }

/* ---- Focus ring: the text colour at 40% ---- */
:is(button, a, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible:not(#qb) { outline: 2px solid var(--focus); outline-offset: 2px; }
*:focus-visible { outline-color: var(--focus); }

/* ---- Buttons: one flat set. Primary = filled text colour, Secondary = hairline, Danger = muted red, Ghost = text ---- */
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb) {
  min-height: 40px; --qb-h: 40px; --qb-px: 16px; --qb-fs: .9rem; --qb-content: 1.15em; --qb-pr: 16px;
  border-radius: var(--radius-pill); font-weight: 600; letter-spacing: 0; text-shadow: none; box-shadow: none; filter: none; background-image: none; animation: none;
}
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb)::before, :is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb)::after { box-shadow: none; }
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb), :is(button, a, input):where(.qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip):not(#qb), :is(button, a, input):where(.qb-danger, .danger, .btn-danger):not(#qb), :is(button, a, input):where(.qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb), :is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb) { background-image: none; box-shadow: none; animation: none; }
/* the old arrow chip on primary buttons and the orbit edge are gone */
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb)::after, :is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb)::before { content: none; display: none; }
:is(button, a, input):where(.btn-primary-lg, button:is(.join-page-card *), .qb-large):not(#qb) { --qb-h: 48px; --qb-px: 20px; --qb-fs: 1rem; --qb-pr: 20px; }
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb) { background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); text-shadow: none; padding-right: var(--qb-px); }
:is(button, a, input):where(.qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip):not(#qb) { background: transparent; color: var(--text); border: 1px solid var(--border); }
:is(button, a, input):where(.qb-danger, .danger, .btn-danger):not(#qb) { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
:is(button, a, input):where(.qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link):not(#qb) { background: none; color: var(--accent-text); border: 0; }
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help) { width: 40px; height: 40px; border-radius: var(--radius-pill); }
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb) { background: transparent; color: var(--text); border: 1px solid transparent; min-width: 40px; min-height: 40px; }
:is(button, a, input):where(.qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb) { background: transparent; color: var(--text-muted); border: 1px solid transparent; }
@media (hover: hover) and (pointer: fine) {
  :is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) { background: var(--primary-hover); border-color: var(--primary-hover); --qb-lift: 0px; animation: none; }
  :is(button, a, input):where(.qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]), :is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]), :is(button, a, input):where(.qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) { background: var(--surface-hover); border-color: var(--border); --qb-lift: 0px; box-shadow: none; }
  :is(button, a, input):where(.qb-danger, .danger, .btn-danger):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) { background: color-mix(in srgb, var(--danger) 12%, transparent); --qb-lift: 0px; box-shadow: none; }
  :is(button, a, input):where(.qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) { background: var(--surface-hover); color: var(--text); }
}
:is(button, a, input):where(.qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link):not(#qb):focus-visible { background: var(--surface-hover); }
:is(button, a, input):where(.qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):is(.active, [aria-pressed="true"], [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
  background: var(--cyprus); color: var(--cyprus-text); border-color: transparent; border-radius: var(--radius-pill); box-shadow: none;
}
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb):is(.active, [aria-pressed="true"], [aria-expanded="true"]) { background: var(--cyprus); color: var(--cyprus-text); border-color: transparent; box-shadow: none; }
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb):is(.active-red) { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.question-navigator button.answered:not(#qb, .active) { background: var(--cyprus); color: var(--cyprus-text); border-color: transparent; }
:is(button, a, input):where(.nav-button):not(#qb) { background: transparent; color: var(--text-muted); border-radius: var(--radius-pill); }
:is(button, a, input):where(.nav-button):not(#qb):is(.active, [aria-current="page"]) { background: var(--cyprus); color: var(--cyprus-text); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { :is(button, a, input):where(.nav-button):not(#qb):hover { background: var(--surface-hover); color: var(--text); } }
/* Dark surfaces inside light pages follow the same tokens (no separate dark glass) */
html[data-theme="dark"], .sidebar, .result-card, .qb-dark { --qb-fg: var(--text); --qb-glass: transparent; --qb-glass-hover: var(--surface-hover); --qb-base: var(--bg); }
:is(button, a, input):is(:disabled, [aria-disabled="true"]):not([data-qb-state]):not(#qb) { opacity: .45; filter: none; }
.icon-chip, .qh-ico { background: var(--surface-hover); color: var(--text); }

/* Success/loading states reuse the primary colours */
[data-qb-state="success"]:not(#qb) { box-shadow: inset 0 0 0 60px var(--surface-hover); }
[data-qb-state="success"]:not(#qb)::before { background: var(--accent); }
.qb-fx .qb-plane-shape { fill: var(--accent); }
.qb-fx .qb-trail { stroke: var(--accent); }
.qb-ring { border-color: var(--accent); }

/* ---- Selection controls: 20px box, 6px radius, 40px hit area (the label or the margin supplies the extra 10px each side) ---- */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex: none; cursor: pointer; margin: 10px; }
input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; border: 2px solid var(--text-muted); border-radius: var(--radius-check); background: transparent; }
input[type="checkbox"]::before { content: ""; width: 10px; height: 6px; border: solid var(--bg); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .12s ease; }
input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
input[type="checkbox"]:indeterminate::before { width: 10px; height: 0; border-width: 0 0 2px 0; transform: none; }
label > input[type="checkbox"], label > input[type="radio"] { margin: 0; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }

/* ---- Tables, tabs, tooltips ---- */
table { border-color: var(--border); }
th { color: var(--text-muted); background: transparent; border-bottom: 1px solid var(--border); }
td { border-bottom: 1px solid var(--border); }
tbody tr:hover { background: var(--surface-hover); }

/* ---- Teal for the small things: links, tab underline, toggles; cyprus for info and selection ---- */
a:not([class]), .link, .text-link { color: var(--accent-text); }
:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress, meter) { accent-color: var(--accent); }
:is(.notice, .info, .qw-banner-info, .callout, .hint, .alert-info) { background: var(--cyprus); color: var(--cyprus-text); border: 1px solid transparent; border-radius: var(--radius-card); }
:is(.list-row.selected, tr.selected, [aria-selected="true"]:not(button), .is-selected) { background: var(--cyprus); color: var(--cyprus-text); }
:is(.qh-avatar, .qd-avatar, .avatar, .qh-ico, .icon-chip) { background: var(--cyprus); color: var(--cyprus-text); }
:is(.qd-progress i, .progress i, .bar i, .progress-bar i, .progress-fill) { background: var(--accent); }
/* The dock and sheets sit on a flat surface */
:is(.qw-dock, .qd-dock, .qd-sheet) { background: var(--surface); }
/* Overlays behind dialogs are a flat tint, never a blur or gradient */
:is(.modal-backdrop, .qw-modal-backdrop, .qd-scrim, .overlay) { background: var(--overlay); backdrop-filter: none; }
/* Danger red only on delete controls */
:is(.danger, .qb-danger, .btn-danger, [data-delete], [data-qw-delete]) { color: var(--danger); }
/* Round 15: only the first main action of a screen keeps the orange fill; qw-buttons.js marks the rest data-qb-demote */
:is(button, a, input)[data-qb-demote]:not(#qb) { background: transparent; color: var(--text); border: 1px solid var(--border); }

/* Header and navigation call-to-actions are never the screen's one orange button */
:is(.qw-header, header.qw-header, .nav-pill, .qw-cta, .qh-profile .primary, .lms-workspace-link):is(button, a):not(#qb) { background: transparent; color: var(--text); border: 1px solid var(--border); }
/* Right and wrong answers: teal outline and cyprus tint for right, danger outline for wrong (no green, no fills) */
:is(.correct, .is-correct, .option.correct, .answer.correct, .option-correct):not(button) { background: var(--cyprus); color: var(--cyprus-text); border-color: var(--accent); }
:is(.wrong, .is-wrong, .incorrect, .option.wrong, .answer.wrong, .option-wrong):not(button) { background: color-mix(in srgb, var(--danger) 12%, var(--bg)); border-color: var(--danger); }
/* Floating things (dock, menus, dialogs, sheets) get one soft shadow so they read as detached; flat surfaces and buttons stay flat */
:is(.lms-menu-dock, .qw-menu, .modal, .dialog, [role="dialog"], .mob-nav-drawer, .qd-sheet, .qw-dock, .qd-dock, .ql-menu, .qu-toast) { box-shadow: var(--shadow-float); border-radius: var(--radius-card); }
:is(.skip-link, .skip):is(a, label, button):not(#qb) { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.workspace-tabs, .profile-photo { border-color: var(--border); box-shadow: none; }
.workspace-tabs li.active { box-shadow: none; }
.preset-summary { color: var(--text-muted); }

/* Submitting a quiz is not a delete: red stays for delete only */
:is(button, a)#submitBtn:not(#qb), :is(button, a)#mobSubmitBtn:not(#qb) { color: var(--text); border-color: var(--border); background: transparent; }

/* The quiz player (its own .btn family): one orange main action, everything else hairline. Teal is never a button fill. */
:is(button, a)#nextBtn:not(#qb), :is(button, a)#startQuizBtn:not(#qb), :is(button, a).btn-primary-lg:not(#qb), .modal-actions :is(button, a).btn:last-child:not(.btn-outline):not(#qb) { background: var(--primary) !important; color: var(--on-primary) !important; border: 1px solid var(--primary) !important; }
:is(button, a).btn:not(#nextBtn, #startQuizBtn, .btn-primary-lg):not(#qb):not(.modal-actions .btn:last-child) { background: transparent; color: var(--text); border: 1px solid var(--border); }
:is(button, a)#submitBtn:not(#qb), :is(button, a)#mobSubmitBtn:not(#qb) { background: transparent !important; color: var(--text) !important; border: 1px solid var(--border) !important; }

/* =============================================================================
   FINAL PRE-LAUNCH PASS (overrides neutral.css; colours still only from tokens.css)
   - every button is a coloured, rounded pill with hover and press states (no colourless or text-only buttons)
   - modals, menus, sheets, the dock and panels use a blurred, tinted "glass" background, with a flat fallback
   - right answers are green, wrong answers are red, everywhere
   ============================================================================= */
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb) { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .14s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease; }
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb) { background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--primary) 75%, transparent); }
:is(button, a, input):where(.qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip):not(#qb) { background: var(--tone-teal-bg); color: var(--tone-teal-ink); border: 1px solid color-mix(in srgb, var(--tone-teal) 40%, transparent); }
:is(button, a, input):where(.qb-danger, .danger, .btn-danger):not(#qb) { background: var(--tone-rose-bg); color: var(--bad-text); border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent); }
:is(button, a, input):where(.qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link):not(#qb) { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); padding-inline: 14px; }
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb) { background: var(--surface-hover); color: var(--text); border: 1px solid var(--border); }
:is(button, a, input):where(.qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb) { background: var(--surface-hover); color: var(--text); border: 1px solid var(--border); }
:is(button, a, input):where(.nav-button):not(#qb) { color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  :is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--primary) 85%, transparent); }
  :is(button, a, input):where(.qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) { background: color-mix(in srgb, var(--tone-teal) 24%, var(--surface)); color: var(--tone-teal-ink); border-color: var(--tone-teal); transform: translateY(-1px); }
  :is(button, a, input):where(.qb-danger, .danger, .btn-danger):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) { background: color-mix(in srgb, var(--danger) 24%, var(--surface)); border-color: var(--danger); transform: translateY(-1px); }
  :is(button, a, input):where(.qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
  :is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]), :is(button, a, input):where(.qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):hover:not(:disabled, [aria-disabled="true"], [data-qb-state]) { background: var(--tone-teal-bg); color: var(--tone-teal-ink); border-color: color-mix(in srgb, var(--tone-teal) 45%, transparent); }
}
:is(button, a, input):where(.qb-primary, .primary, .primary-button, .btn:not(.btn-outline, .btn-danger, .btn-ghost, .btn-secondary, .icon-btn, .text-btn), .btn-primary-lg, .btn-check, .start-quiz, .dock-primary, .nav-pill:not(.ghost), .qw-cta, .tsq-btn:not(.secondary), .tsq-mini-btn:not(.secondary), .button.small, .lms-workspace-link, .skip-link, .skip, .qb-secondary, button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .secondary, .button, .btn.btn-outline, .btn-secondary, .social-btn, .menu-control, .menu-link, .nav-action, .compact-action, .pt-action, .qw-pick, .menu-toggle, .admin-menu-tools :is(button, a), .experience-actions :is(button, a), .privacy-actions :is(button, a), button:is(.lms-player-tools *, .notification-head *), .theme-switch, .tsq-btn.secondary, .tsq-mini-btn.secondary, .quiz-brand-chip, .qb-danger, .danger, .btn-danger, .qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link, .qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help, .qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):active:not(:disabled, [aria-disabled="true"]) { transform: translateY(1px) scale(.97); box-shadow: none; transition-duration: .06s; }
:is(button, a, input):where(.qb-ghost, .text-button, .ghost, .link-button, .nav-pill.ghost, button:is(.quiz-breadcrumb *, .lms-intro *), .qw-link):not(#qb):focus-visible { background: color-mix(in srgb, var(--text) 12%, transparent); }
:is(button, a, input):where(.qb-chip, .tab, button:is(.workspace-tabs *, .filter-chips *, .filter-row *, .search-suggestions *, .question-navigator *), [data-show-more], .breadcrumb-item, .pt-size, .qw-letter):not(#qb):is(.active, [aria-pressed="true"], [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { background: var(--accent-fill); color: var(--on-accent-fill); border-color: var(--accent-fill); }
:is(button, a, input):where(.qb-icon, .icon-btn, .icon-button, .focus-btn, .modal-close, .experience-close, .cut-option, .theme-toggle, .unified-icon-button, .menu-button, .notification-button, .qw-theme, .qw-burger, :is(button, a):is(.drm-floating-tools *), button:is(.story-lightbox *), .btn.text-btn, .icon-link, .scroll-cue, .lms-help):not(#qb):is(.active, [aria-pressed="true"], [aria-expanded="true"]) { background: var(--accent-fill); color: var(--on-accent-fill); border-color: var(--accent-fill); }
:is(button, a, input):where(.nav-button):not(#qb):is(.active, [aria-current="page"]) { background: var(--tone-teal-bg); color: var(--tone-teal-ink); }
/* a demoted second "primary" and header call-to-actions are secondary (teal), never colourless */
:is(button, a, input)[data-qb-demote]:not(#qb), :is(.qw-header, header.qw-header, .nav-pill, .qw-cta, .qh-profile .primary, .lms-workspace-link):is(button, a):not(#qb) {
  background: var(--tone-teal-bg); color: var(--tone-teal-ink); border: 1px solid color-mix(in srgb, var(--tone-teal) 40%, transparent);
}
/* the quiz player's own .btn family: orange main action, teal secondary, never a hairline-only button */
:is(button, a).btn:not(#nextBtn, #startQuizBtn, .btn-primary-lg):not(#qb):not(.modal-actions .btn:last-child) { background: var(--tone-teal-bg); color: var(--tone-teal-ink); border: 1px solid color-mix(in srgb, var(--tone-teal) 40%, transparent); }
:is(button, a)#submitBtn:not(#qb), :is(button, a)#mobSubmitBtn:not(#qb) { background: var(--tone-amber-bg) !important; color: var(--tone-amber-ink) !important; border: 1px solid var(--tone-amber) !important; }

/* Badges, pills and chips are softly coloured (a component may pick another tone with data-tone) */
:is(.badge, .pill, .chip, .tag, .status, .qh-badge, .qd-badge):not([data-tone]) { background: var(--tone-teal-bg); color: var(--tone-teal-ink); border: 1px solid color-mix(in srgb, var(--tone-teal) 30%, transparent); }
:is(.badge, .pill, .chip, .tag, .status)[data-tone] { background: var(--tone-bg); color: var(--tone-ink); border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); }
:is(.qh-avatar, .qd-avatar, .avatar) { background: var(--tone-orange); color: var(--on-primary); }
:is(.qh-ico, .icon-chip) { background: var(--tone-teal-bg); color: var(--tone-teal); }
:is(.qd-progress i, .progress i, .bar i, .progress-bar i, .progress-fill) { background: var(--accent); }

/* Right and wrong answers: green for right, red for wrong (also in the result review and the teacher's reports) */
:is(.correct, .is-correct, .option.correct, .answer.correct, .option-correct, .ans-correct-row):not(button):not(#qb) { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
:is(.wrong, .is-wrong, .incorrect, .option.wrong, .answer.wrong, .option-wrong):not(button):not(#qb) { background: var(--bad-bg); color: var(--bad-text); border-color: var(--bad-border); }
html body #optionsList .option-item.correct:not(#qb), html body #optionsList .option-item.correct:not(#qb):hover,
html body .option-item.correct:not(#qb), html[data-theme] body .option-item.correct.correct:not(#qb) {
  background: var(--ok-bg) !important; color: var(--ok-text) !important; border: 2px solid var(--ok-border) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent) !important; opacity: 1 !important;
}
html body #optionsList .option-item:is(.wrong, .incorrect):not(#qb), html body #optionsList .option-item:is(.wrong, .incorrect):not(#qb):hover,
html body .option-item:is(.wrong, .incorrect):not(#qb), html[data-theme] body .option-item:is(.wrong.wrong, .incorrect.incorrect):not(#qb) {
  background: var(--bad-bg) !important; color: var(--bad-text) !important; border: 2px solid var(--bad-border) !important; box-shadow: none !important; opacity: 1 !important;
}
html body .option-item:is(.correct, .wrong, .incorrect):not(#qb) .opt-key { color: inherit !important; }
html body #optionsList .option-item.correct:not(#qb) .opt-key { background: var(--ok); color: var(--bg) !important; }
html body #optionsList .option-item:is(.wrong, .incorrect):not(#qb) .opt-key { background: var(--danger); color: var(--bg) !important; }

/* Glass: dialogs, menus, dropdowns, sheets, side panels, the dock and the notification panel sit on a blurred tint.
   The backdrop behind a dialog is a soft blur too. Browsers without backdrop-filter get a solid surface instead. */
:is(.qu-modal-back, .modal-backdrop, .qw-modal-backdrop, .qd-scrim, .overlay, .qw-suggest-backdrop, .experience-dialog, .ql-sheet-back, .qd-sheet-back, .modal-overlay, .qwl-backdrop) {
  background: color-mix(in srgb, var(--bg) 38%, transparent) !important; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
}
:is(.qu-modal, .qw-suggest-card, .ql-menu, .qw-menu, .qd-sheet, .ql-sheet, .notification-panel, .mob-nav-drawer, .qb-pop, .qw-dock, .qd-dock, .dropdown-menu, .menu-panel, .qwl-panel) {
  background: var(--glass-strong) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5); border: 1px solid var(--glass-border);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :is(.qu-modal-back, .modal-backdrop, .qw-modal-backdrop, .qd-scrim, .overlay, .qw-suggest-backdrop, .experience-dialog, .ql-sheet-back, .qd-sheet-back, .modal-overlay, .qwl-backdrop) { background: var(--overlay) !important; }
  :is(.qu-modal, .qw-suggest-card, .ql-menu, .qw-menu, .qd-sheet, .ql-sheet, .notification-panel, .mob-nav-drawer, .qb-pop, .qw-dock, .qd-dock, .dropdown-menu, .menu-panel, .qwl-panel) { background: var(--surface) !important; }
}

/* Expandable action group (qw-buttons.js QWButtons.group / [data-qb-group]): one button that opens the related actions */
.qb-group { position: relative; display: inline-flex; }
.qb-group-trigger .qb-chev { width: 16px; height: 16px; transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.qb-group-trigger[aria-expanded="true"] .qb-chev { transform: rotate(180deg); }
.qb-pop { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; min-width: 220px; max-width: min(320px, calc(100vw - 24px)); display: grid; gap: 6px; padding: 8px; border-radius: var(--radius-card); box-shadow: var(--shadow-float);
  transform-origin: top right; opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none; visibility: hidden; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility 0s linear .22s; }
.qb-pop.qb-pop-left { right: auto; left: 0; transform-origin: top left; }
.qb-pop.qb-pop-up { top: auto; bottom: calc(100% + 8px); transform-origin: bottom right; }
.qb-group.is-open .qb-pop { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.qb-pop > :is(button, a, label, select) { width: 100%; justify-content: flex-start; text-align: left; }
.qb-pop > :is(button, a):not(#qb) { justify-content: flex-start; }
.qb-pop > [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .qb-pop, .qb-group-trigger .qb-chev { transition: none; } }

/* Results review (player results page and shared results): the filter chips and the coloured answers */
.review-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
:is(button).review-chip:not(#qb) { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-pill); background: var(--tone-bg); color: var(--tone-ink); border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); font-weight: 700; }
:is(button).review-chip:not(#qb) b { min-width: 24px; padding: 1px 7px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--tone) 22%, transparent); text-align: center; }
:is(button).review-chip[aria-selected="true"]:not(#qb) { background: var(--tone-ink); color: var(--bg); border-color: var(--tone-ink); }
:is(button).review-chip[aria-selected="true"]:not(#qb) b { background: color-mix(in srgb, var(--bg) 25%, transparent); }
html body .review-item:not(#qb) { border-left: 5px solid var(--border); }
html body .review-item.correct:not(#qb) { background: var(--surface); color: var(--text); border-left-color: var(--ok); }
html body .review-item.wrong:not(#qb) { background: var(--surface); color: var(--text); border-left-color: var(--danger); }
html body .review-item.unanswered:not(#qb) { border-left-color: var(--tone-amber); }
.review-item[hidden] { display: none !important; }
.review-status { padding: 2px 10px; border-radius: var(--radius-pill); font-weight: 700; font-size: .8rem; }
.review-status-correct { background: var(--ok-bg); color: var(--ok-text); }
.review-status-wrong { background: var(--bad-bg); color: var(--bad-text); }
.review-status-skipped { background: var(--tone-amber-bg); color: var(--tone-amber-ink); }
html body .ans-val:is(.ans-correct, .ans-wrong, .ans-skipped):not(#qb) { display: inline-block; margin-top: 4px; padding: 6px 12px; border-radius: var(--radius-input); font-weight: 600; }
html body .ans-val.ans-correct:not(#qb) { background: var(--ok-bg); color: var(--ok-text) !important; border: 1px solid var(--ok-border); }
html body .ans-val.ans-wrong:not(#qb) { background: var(--bad-bg); color: var(--bad-text) !important; border: 1px solid var(--bad-border); }
html body .ans-val.ans-skipped:not(#qb) { background: var(--tone-amber-bg); color: var(--tone-amber-ink) !important; border: 1px solid var(--tone-amber); }
html body :is(.stat-correct .stat-num):not(#qb) { color: var(--ok) !important; }
html body :is(.stat-wrong .stat-num):not(#qb) { color: var(--danger) !important; }
html body .exp-box:not(#qb) { background: var(--tone-teal-bg); color: var(--text); border-left: 4px solid var(--tone-teal); }
html body .exp-box .exp-title:not(#qb) { color: var(--tone-teal-ink); }

/* The option letter in the player is a round badge (it turns green or red when the answer is revealed) */
html body #optionsList .option-item .opt-key:not(#qb) { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--radius-pill); line-height: 1; }
.review-status { align-self: center; line-height: 1.5; }
.qb-pop-label { margin-left: 8px; }
.qb-pop > :is(button, a):not(#qb) { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 42px; padding: 8px 14px !important; justify-content: flex-start !important; gap: 10px; border-radius: var(--radius-pill); font-size: .9rem; }
.qb-pop > :is(button, a):not(#qb) svg { flex: none; width: 18px; height: 18px; }
@media (max-width: 520px) {
  .qb-group-trigger > span { display: none; }
  .qb-group-trigger { padding-inline: 12px !important; }
  .quiz-header .back-to-quizzes:not(#qb) { font-size: 0 !important; width: 40px; min-width: 40px; padding: 0 !important; justify-content: center; }
  .quiz-header .back-to-quizzes:not(#qb)::before { content: "←"; font-size: 18px; }
  .quiz-header .header-left, .quiz-header .header-right { gap: 6px; min-width: 0; }
}
/* Under 980px the player moves these tools to its bottom bar and drawer, so the Tools button would be empty there */
@media (max-width: 980px) { body:not(.focus-clean) .quiz-header .qb-group { display: none; } }

/* Old player/menu labels that used the bright teal as text: the AA-safe teal on light and sepia */
:is(.about-label, .creator-name-link, .menu-kicker, .collection-badge, .collection-cta, .qd-tour-count) { color: var(--accent-text) !important; }

/* ---- Batch 2: phone toolbar of the quiz player (assets/js/mobile-tools.js): icon-only, 44px, one row under the header ---- */
.mt-bar { display: none; }
@media (max-width: 980px) {
  .mt-bar:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid var(--border); background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); position: relative; z-index: 40; scrollbar-width: none; }
  .mt-bar::-webkit-scrollbar { display: none; }
  .mt-btn:not(#qb):not([hidden]) { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-hover); color: var(--text); touch-action: manipulation; -webkit-touch-callout: none; user-select: none; transition: transform 120ms ease, background 140ms ease; }
  .mt-btn:not(#qb):hover { background: var(--tone-teal-bg); color: var(--tone-teal-ink); }
  .mt-btn:not(#qb):active { transform: scale(.92); }
  .mt-btn:not(#qb).on { background: var(--accent-fill); color: var(--on-accent-fill); border-color: transparent; }
  .mt-btn:not(#qb):disabled { opacity: .45; }
}
body.focus-mode .mt-bar { display: none !important; }
.mt-tip { position: fixed; z-index: 6000; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font: 700 .82rem/1.2 var(--font); pointer-events: none; box-shadow: var(--shadow-float); animation: mtTip 140ms ease; }
@keyframes mtTip { from { opacity: 0; transform: translateY(-3px); } }

/* =============================================================================
   TOKENS: the one place colours are defined (round 15 palette: black, orange, teal, cyprus).
   Built into qw-buttons.css, which every app page loads last. No other file may hard-code a colour.
   Dark is the default; light is chosen with <html data-theme="light">.
   Orange = the single main action of a screen. Teal = small things only (underline, link, checkbox, focus ring, toggle).
   Cyprus = a quiet tint for selected/active rows and info notices. Danger = delete only.
   ============================================================================= */
:root, html[data-theme="dark"] {
  --bg: #000000; --surface: #0D0D0D; --surface-hover: #161616; --border: #222222; --border-strong: #4A5555;
  --text: #F5F5F5; --text-muted: #8F9696;
  --primary: #FF7A2F; --on-primary: #000000; --primary-hover: #FF8F4F;
  --accent: #1FC2C2; --accent-text: #1FC2C2;
  --cyprus: #0C3B3D; --cyprus-text: #9EE0DF;
  --danger: #E5484D;
  --focus: #1FC2C2;
  /* shape tokens (round 16): pills for controls, soft cards, rounded fields */
  --radius-pill: 999px; --radius-card: 20px; --radius-input: 14px; --radius-check: 6px; --radius: var(--radius-input);
  --shadow-color: rgba(0, 0, 0, .5);
  --doodle: #8FB8B6; --doodle-opacity: .13; --doodle-opacity-quiet: .06;   /* dark: a cool grey-teal line, a little stronger so the medical doodles read on black */
  --shadow-float: 0 10px 30px var(--shadow-color);
  --shadow-soft: 0 4px 16px var(--shadow-color);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --overlay: rgba(0, 0, 0, .6);
  /* data-visualisation series (grids and charts only): orange, teal, amber, pale teal, grey, red */
  --chart-1: #FF7A2F; --chart-2: #1FC2C2; --chart-3: #E8B64A; --chart-4: #9EE0DF; --chart-5: #8F9696; --chart-6: #E5484D;
  /* final pass: answer feedback (green = correct, red = wrong), glass for overlays, six tones for colourful cards */
  --accent-fill: #1FC2C2; --on-accent-fill: #000000;
  --ok: #2FBF71; --ok-bg: #0E2A1B; --ok-text: #7EE2A8; --ok-border: #2FBF71;
  --bad-bg: #2E1213; --bad-text: #FF9EA1; --bad-border: #E5484D;
  --glass: rgba(18, 18, 18, .62); --glass-strong: rgba(13, 13, 13, .86); --glass-border: rgba(255, 255, 255, .10); --glass-blur: 18px;
  --tone-orange: #FF7A2F; --tone-orange-bg: #2B1609; --tone-orange-ink: #FFB48A;
  --tone-teal: #1FC2C2; --tone-teal-bg: #062728; --tone-teal-ink: #8EE6E6;
  --tone-amber: #F5B83D; --tone-amber-bg: #2A2008; --tone-amber-ink: #FAD58A;
  --tone-rose: #F0577A; --tone-rose-bg: #2D0E16; --tone-rose-ink: #FFA3B8;
  --tone-violet: #9B7BF2; --tone-violet-bg: #1D1530; --tone-violet-ink: #CBB8FF;
  --tone-lime: #7BC86C; --tone-lime-bg: #142410; --tone-lime-ink: #B7E8AC;
  color-scheme: dark;
}
/* Sepia (the old site's reading theme, now a token set like the others): warm paper, same orange / teal / cyprus roles. */
html[data-theme="sepia"] {
  --bg: #F4ECD8; --surface: #FBF5E6; --surface-hover: #EFE5CC; --border: #DCCFB0; --border-strong: #A8956A;
  --text: #2B2418; --text-muted: #6B5F48;
  --primary: #E8651A; --on-primary: #000000; --primary-hover: #F2792F;
  --accent: #0F7F7F; --accent-text: #0B6666;
  --cyprus: #DDE9E2; --cyprus-text: #0C3B3D;
  --danger: #C62828;
  --focus: #0F7F7F;
  --overlay: rgba(43, 36, 24, .45);
  --shadow-color: rgba(43, 36, 24, .18);
  --chart-1: #E8651A; --chart-2: #0F7F7F; --chart-3: #B7791F; --chart-4: #6BB8B6; --chart-5: #6B5F48; --chart-6: #C62828;
  --accent-fill: #0B6666; --on-accent-fill: #FFFFFF;
  --doodle: #8A6A3B; --doodle-opacity: .15; --doodle-opacity-quiet: .06;   /* sepia: warm brown ink, like a pencil sketch on paper */
  --ok: #2E8B57; --ok-bg: #DCEFD9; --ok-text: #1E5E39; --ok-border: #2E8B57;
  --bad-bg: #F6D9D3; --bad-text: #8E1C1C; --bad-border: #C62828;
  --glass: rgba(251, 245, 230, .72); --glass-strong: rgba(251, 245, 230, .92); --glass-border: rgba(43, 36, 24, .14); --glass-blur: 18px;
  --tone-orange: #D9600F; --tone-orange-bg: #F8DEC8; --tone-orange-ink: #8A3A05;
  --tone-teal: #0F7F7F; --tone-teal-bg: #D3EAE4; --tone-teal-ink: #0B5454;
  --tone-amber: #B7791F; --tone-amber-bg: #F4E3B8; --tone-amber-ink: #6E4708;
  --tone-rose: #C2415E; --tone-rose-bg: #F5D5D8; --tone-rose-ink: #7C1E33;
  --tone-violet: #7356C8; --tone-violet-bg: #E5DCF0; --tone-violet-ink: #432C86;
  --tone-lime: #4F8A3C; --tone-lime-bg: #DDEBCB; --tone-lime-ink: #2D5420;
  color-scheme: light;
}
html[data-theme="light"] {
  --bg: #FFFFFF; --surface: #F7F7F5; --surface-hover: #EFEFEC; --border: #E6E6E3; --border-strong: #A3A8A6;
  --text: #111111; --text-muted: #5F6666;
  --primary: #F26A1B; --on-primary: #000000; --primary-hover: #FF7F36;
  --accent: #0F8F8F; --accent-text: #0B7272;   /* accent-text is the same teal, darkened so link text passes 4.5:1 on white */
  --cyprus: #E3F1F0; --cyprus-text: #0C3B3D;
  --danger: #D92D20;
  --focus: #0F8F8F;
  --overlay: rgba(17, 17, 17, .45);
  --shadow-color: rgba(17, 17, 17, .16);
  --chart-1: #F26A1B; --chart-2: #0F8F8F; --chart-3: #C98A12; --chart-4: #6BB8B6; --chart-5: #5F6666; --chart-6: #D92D20;
  --accent-fill: #0B7272; --on-accent-fill: #FFFFFF;
  --doodle: #0B7272; --doodle-opacity: .12; --doodle-opacity-quiet: .05;   /* light: teal ink at 12%: visible, never louder than the text */
  --ok: #1F9D55; --ok-bg: #E3F6EA; --ok-text: #135E33; --ok-border: #1F9D55;
  --bad-bg: #FDE7E6; --bad-text: #9B1C14; --bad-border: #D92D20;
  --glass: rgba(255, 255, 255, .70); --glass-strong: rgba(255, 255, 255, .92); --glass-border: rgba(17, 17, 17, .10); --glass-blur: 18px;
  --tone-orange: #F26A1B; --tone-orange-bg: #FFEADB; --tone-orange-ink: #9A3D06;
  --tone-teal: #0F8F8F; --tone-teal-bg: #DDF3F1; --tone-teal-ink: #0A5C5C;
  --tone-amber: #C98A12; --tone-amber-bg: #FFF2D2; --tone-amber-ink: #6F4A05;
  --tone-rose: #D63A60; --tone-rose-bg: #FDE3E9; --tone-rose-ink: #8A1B36;
  --tone-violet: #7A5AE0; --tone-violet-bg: #EDE7FC; --tone-violet-ink: #44289A;
  --tone-lime: #3F9A3A; --tone-lime-bg: #E3F4DD; --tone-lime-ink: #245A20;
  color-scheme: light;
}

/* Tones: a component sets data-tone="orange|teal|amber|rose|violet|lime" and uses var(--tone), var(--tone-bg), var(--tone-ink). */
[data-tone="orange"] { --tone: var(--tone-orange); --tone-bg: var(--tone-orange-bg); --tone-ink: var(--tone-orange-ink); }
[data-tone="teal"] { --tone: var(--tone-teal); --tone-bg: var(--tone-teal-bg); --tone-ink: var(--tone-teal-ink); }
[data-tone="amber"] { --tone: var(--tone-amber); --tone-bg: var(--tone-amber-bg); --tone-ink: var(--tone-amber-ink); }
[data-tone="rose"] { --tone: var(--tone-rose); --tone-bg: var(--tone-rose-bg); --tone-ink: var(--tone-rose-ink); }
[data-tone="violet"] { --tone: var(--tone-violet); --tone-bg: var(--tone-violet-bg); --tone-ink: var(--tone-violet-ink); }
[data-tone="lime"] { --tone: var(--tone-lime); --tone-bg: var(--tone-lime-bg); --tone-ink: var(--tone-lime-ink); }

/* Private aliases used by stylesheets that are shared with the V14.1 public site (experience-lms.css and friends, converted
   with scripts/tokenize-colors.mjs --fallback): they exist only where this token file is loaded, so the V14.1 pages keep
   their original colours. */
:root {
  --qwt-bg: var(--bg); --qwt-surface: var(--surface); --qwt-surface-hover: var(--surface-hover); --qwt-border: var(--border);
  --qwt-text: var(--text); --qwt-text-muted: var(--text-muted); --qwt-accent: var(--accent); --qwt-accent-text: var(--accent-text);
  --qwt-danger: var(--danger); --qwt-overlay: var(--overlay);
}