/* ============================================================================
   Quiz · Fiszki · Wzory — view layer (Material Design 3)

   Owner: ui-quiz (task-4). Scope: this file only.

   Views covered:
     - quiz config (topic checkboxes, filters, length, mode, start CTA)
     - quiz question (question card, answer list, lifelines, progress,
       question navigator, single bottom action bar)
     - quiz result (score hero, per-chapter breakdown, answer review)
     - flashcards (3D flip card, self-grade, progress)
     - formulas (search bar, formula cards, memory mode, KaTeX)

   Values come from css/tokens.css (transcribed from the M3 spec token tables —
   see spec/generated/SPEC_CHEATSHEET.md). No raw colours/radii/font-sizes.
   Shared components (.btn, .card, .pill, .segmented, .field, .bar,
   .mui-topic-*, .search-field, .bookmark, .notice, .feedback) are styled in
   css/components.css and are consumed here; only view-specific anatomy,
   layout and state wiring lives below.

   M3 pattern mapping (no “quiz” component exists in the spec — only these
   published patterns are used):
     answer option   → list item + selection state (selected = secondary-container)
                       graded feedback = success(tertiary)/error containers + icon
     question nav    → compact pagination strip (custom; not a spec component)
     config filters  → filter chips (32dp, 8dp corner, checkmark when selected)
     length/mode     → segmented buttons / selectable cards with radio
     bottom actions  → M3 bottom action-bar pattern (fixed above safe-area,
                       content reserves its height so nothing is covered)
     flashcards      → filled card (12dp) + emphasized motion
     formulas        → outlined cards + search bar (56dp, full round)
     score hero      → display-small number in a progress ring (4dp progress spec)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. View frame
   --------------------------------------------------------------------------- */
.quiz-shell,
.flash-layout {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

/* Metadata line above the progress bar ("Pytanie 3 / 10 • Tryb nauki"). */
.quiz-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space25) var(--md-sys-measurement-space150);
  flex-wrap: wrap;
  margin-bottom: var(--md-sys-measurement-space100);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.quiz-top > span { min-width: 0; }
.quiz-top > span:first-child {
  color: var(--md-sys-color-on-surface);
  font-variant-numeric: tabular-nums;
}
.quiz-top > span:last-child {
  text-align: right;
  overflow-wrap: anywhere;
}
.quiz-top .retry-badge { margin-left: var(--md-sys-measurement-space75); }
@media (max-width: 599px) {
  .quiz-top > span:last-child {
    flex: 1 1 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.quiz-shell > .bar,
.flash-layout > .bar { margin: 0 0 var(--md-sys-measurement-space200); }

/* ---------------------------------------------------------------------------
   1. Question navigator — siatka kwadratowych pól dotyku 48 dp (chip 32 dp);
   przy długich podejściach lista przewija się w pionie (widoczny scrollbar).
   --------------------------------------------------------------------------- */
.quiz-nav-dots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--md-comp-target-size), 1fr));
  gap: var(--md-sys-measurement-space50);
  max-height: 216px;
  margin: 0 0 var(--md-sys-measurement-space200);
  padding: var(--md-sys-measurement-space25);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.quiz-dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: var(--md-comp-target-size);
  min-height: var(--md-comp-target-size);
  padding: 0;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: 1;
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transform: none;
  box-shadow: none;
  transition: background-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard);
}
.quiz-dot:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-on-surface-variant);
}
.quiz-dot:focus-visible {
  outline: var(--md-sys-state-focus-indicator-thickness) solid
    var(--md-sys-state-focus-indicator-color);
  outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
}
.quiz-dot.answered {
  background: var(--md-sys-color-primary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-primary-container);
}
.quiz-dot.right {
  background: var(--md-sys-color-success-container);
  border-color: transparent;
  color: var(--md-sys-color-on-success-container);
}
.quiz-dot.wrong {
  background: var(--md-sys-color-error-container);
  border-color: transparent;
  color: var(--md-sys-color-on-error-container);
}
.quiz-dot.current {
  background: var(--md-sys-color-primary);
  border-color: transparent;
  color: var(--md-sys-color-on-primary);
  font-weight: var(--md-sys-typescale-weight-semibold);
}
/* Graded dots carry a non-colour marker (✓ / ✗) as well. */
.quiz-dot.right::after,
.quiz-dot.wrong::after {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: 1;
  font-weight: var(--md-sys-typescale-weight-semibold);
}
.quiz-dot.right::after { content: "✓"; }
.quiz-dot.wrong::after { content: "✗"; }

/* Mobile: jeden poziomy rząd chipów 40 dp z przewijaniem, snap i edge fade
   (M3 scrollable chips; pole dotyku 48 dp przez pseudo-element). */
@media (max-width: 599px) {
  .quiz-nav-dots {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--md-sys-measurement-space100);
    max-height: none;
    padding: var(--md-sys-measurement-space25);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, var(--md-sys-color-scrim) 0,
        var(--md-sys-color-scrim) calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, var(--md-sys-color-scrim) 0,
        var(--md-sys-color-scrim) calc(100% - 32px), transparent 100%);
  }
  .quiz-nav-dots::-webkit-scrollbar { display: none; }
  .quiz-dot {
    flex: 0 0 auto;
    width: var(--md-comp-target-size);
    min-width: var(--md-comp-target-size);
    height: var(--md-comp-target-size);
    min-height: var(--md-comp-target-size);
    scroll-snap-align: start;
  }
  .quiz-dot::before {
    content: "";
    position: absolute;
    inset: -4px;
    border: 0;
    border-radius: inherit;
  }
}

/* ---------------------------------------------------------------------------
   2. Question card
   --------------------------------------------------------------------------- */
.quiz-card {
  position: relative;
  padding: var(--md-sys-measurement-space200);
  /* Karta pytania = M3 outlined card (surface + 1 dp outline-variant, 12 dp);
     bez dużych wypełnień tonalnych w jasnym motywie. */
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  box-shadow: none;
}
@media (min-width: 600px) {
  .quiz-card { padding: var(--md-sys-measurement-space300); }
}
@media (min-width: 1024px) {
  .quiz-card { padding: var(--md-sys-measurement-space400); }
}

.quiz-card .lifeline-bar {
  padding-top: 0;
  gap: var(--md-sys-measurement-space100) var(--md-sys-measurement-space150);
}
.quiz-card .lifeline-bar .pill-row { gap: var(--md-sys-measurement-space100); }
/* Lifeline chips keep the spec 32dp chip visual; the touch target is 48dp. */
.quiz-card .pill { position: relative; }
.quiz-card .pill::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - 100%) / -2) 0;
}
.quiz-card .question-label {
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}

/* „Seria: N” — neutralna informacja o serii (bez amberowego akcentu;
   rola warning zarezerwowana wyłącznie dla ostrzeżeń). */
.quiz-card .streak-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--md-comp-button-container-height);
  padding: 0 var(--md-sys-measurement-space150);
  border: 0;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-variant-numeric: tabular-nums;
}

/* Lifeline'y: kompaktowe M3 outlined buttons 40 dp (auto szerokość, gap 8);
   pole dotyku rozszerzone pseudo-elementem, ikona 18 dp po lewej. */
.quiz-card .lifeline-bar .pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-measurement-space100);
  height: var(--md-comp-button-container-height);
  min-height: var(--md-comp-button-container-height);
  padding: 0 var(--md-sys-measurement-space150) 0
    var(--md-sys-measurement-space400);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-primary);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  isolation: isolate;
  transition: background-color var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}
.quiz-card .lifeline-bar .pill::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - 100%) / -2);
  border-radius: inherit;
}
.quiz-card .lifeline-bar .pill:hover:not(:disabled) {
  background: color-mix(in srgb, var(--md-sys-color-primary)
        calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}
.quiz-card .lifeline-bar .pill:disabled {
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-disabled-opacity) * 100%), transparent);
  cursor: default;
}
/* Ikony lifeline'ów (mask SVG, kolor = currentColor).
   Legacy `.pill::after` jest warstwą stanu (opacity: 0, z-index: -1), więc
   trzeba jawnie przywrócić widoczność ikony — inaczej ::after zostaje ukryty. */
.quiz-card .lifeline-bar .pill::after {
  content: "";
  position: absolute;
  left: var(--md-sys-measurement-space150);
  top: 50%;
  width: var(--md-comp-chip-icon-size);
  height: var(--md-comp-chip-icon-size);
  transform: translateY(-50%);
  background: currentColor;
  opacity: 1;
  z-index: 1;
  -webkit-mask: var(--quiz-lifeline-icon) center / contain no-repeat;
  mask: var(--quiz-lifeline-icon) center / contain no-repeat;
  pointer-events: none;
}
.quiz-card .lifeline-bar .pill[data-action="quiz-lifeline-5050"] {
  --quiz-lifeline-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.25 5.61C6.27 8.2 10 13 10 13v6c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-6s3.72-4.8 5.74-7.39C20.25 4.95 19.78 4 18.95 4H5.04c-.83 0-1.3.95-.79 1.61z'/%3E%3C/svg%3E");
}
.quiz-card .lifeline-bar .pill[data-action="quiz-lifeline-hint"] {
  --quiz-lifeline-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z'/%3E%3C/svg%3E");
}
/* Kompakt: zakres nad rzędem lifeline'ów, przyciski auto-szerokości. */
@media (max-width: 599px) {
  .quiz-card .lifeline-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--md-sys-measurement-space100);
  }
  .quiz-card .lifeline-bar .pill-row {
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: var(--md-sys-measurement-space100);
  }
}

/* Question text — tytuł karty: title-large (mobile) / headline-small (600 dp+). */
#app .quiz-card h2 {
  margin: var(--md-sys-measurement-space250) 0 var(--md-sys-measurement-space200);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: 1.4;
  font-weight: var(--md-sys-typescale-title-large-weight);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  overflow-wrap: break-word;
}
@media (min-width: 600px) {
  #app .quiz-card h2 {
    font-size: var(--md-sys-typescale-headline-small-size);
    line-height: var(--md-sys-typescale-headline-small-line);
    letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  }
}
.quiz-card > .notice { margin: 0 0 var(--md-sys-measurement-space200); }

/* ---------------------------------------------------------------------------
   3. Answer options — M3 list items with selection + graded feedback
   --------------------------------------------------------------------------- */
.answers {
  display: grid;
  gap: var(--md-sys-measurement-space100);
  margin: 0;
  padding: 0;
  counter-reset: answer-hint;
}
.answer {
  counter-increment: answer-hint;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space150);
  width: 100%;
  min-height: var(--md-comp-list-item-height);
  margin: 0;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  font-weight: var(--md-sys-typescale-body-large-weight);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transform: none;
  box-shadow: none;
  animation: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard);
}
/* Legacy state-layer pseudo (bez własnej animacji) — nie renderujemy. */
.answer::after { content: none; }
.answer:hover:not(:disabled) {
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}
.answer:active:not(:disabled) {
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-pressed-opacity) * 100%), transparent);
}
.answer:focus-visible {
  outline: var(--md-sys-state-focus-indicator-thickness) solid
    var(--md-sys-state-focus-indicator-color);
  outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
}
.answer:disabled { cursor: default; }

/* Leading letter badge (A–D) */
.answer-letter {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: 1;
  font-weight: var(--md-sys-typescale-label-large-weight);
  transform: none;
  transition: background-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard);
}
.answer-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Keyboard shortcut hint (1–4) */
.answer::before {
  content: counter(answer-hint);
  order: 3;
  flex: 0 0 auto;
  min-width: var(--md-sys-measurement-space250);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  font-weight: var(--md-sys-typescale-label-small-weight);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.answer:disabled::before,
.answer.eliminated::before { content: none; }

/* Marker oceny (✓ / ✗) — app.js dodaje go tylko po sprawdzeniu. */
.answer-mark {
  order: 4;
  flex: 0 0 auto;
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: 1;
  font-weight: var(--md-sys-typescale-weight-semibold);
  animation: none;
  transform: none;
}

/* Selected (exam mode / before checking) — tonal secondary container */
.answer.selected {
  border-color: transparent;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.answer.selected .answer-letter {
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}
.answer.selected::before { color: var(--md-sys-color-on-secondary-container); }

/* Correct — success (= spec tertiary) container + ✓ marker */
.answer.correct {
  border-color: transparent;
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
  animation: none;
}
.answer.correct .answer-letter {
  background: var(--md-sys-color-success);
  color: var(--md-sys-color-on-success);
}
.answer.correct .answer-mark { color: var(--md-sys-color-on-success-container); }

/* Wrong — error container + ✗ marker */
.answer.incorrect {
  border-color: transparent;
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  animation: none;
}
.answer.incorrect .answer-letter {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}
.answer.incorrect .answer-mark { color: var(--md-sys-color-on-error-container); }

/* 50/50 eliminated — tonalnie wyciszona, treść przekreślona (bez dashed/opacity
   jako jedynego sygnału). */
.answer.eliminated {
  border-color: var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
}
.answer.eliminated .answer-letter {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
}
.answer.eliminated .answer-text {
  text-decoration: line-through;
  text-decoration-color: currentColor;
}

/* Feedback block under the answers */
.quiz-card .feedback {
  margin-top: var(--md-sys-measurement-space250);
  padding: var(--md-sys-measurement-space200);
  border-radius: var(--md-sys-shape-corner-medium);
}
.quiz-card .feedback b {
  display: block;
  margin-bottom: var(--md-sys-measurement-space75);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-title-medium-weight);
}
.quiz-card .feedback .explanation {
  margin-top: var(--md-sys-measurement-space75);
  color: inherit;
}
.quiz-card .feedback .source {
  display: inline-block;
  color: inherit;
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: 1.45;
}
.quiz-card .feedback .pill { margin-top: var(--md-sys-measurement-space100); }

/* ---------------------------------------------------------------------------
   4. Footer / bottom action bar
   Desktop: in-flow row at the card bottom.
   Compact: one fixed action bar; single chrome bar (bottom nav is hidden by
   body.is-immersive), content reserves its height + safe area.
   --------------------------------------------------------------------------- */
.quiz-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space150);
  flex-wrap: wrap;
  margin-top: var(--md-sys-measurement-space250);
  padding-top: var(--md-sys-measurement-space200);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.quiz-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100);
  margin-left: auto;
}
/* Bookmark: przycisk 40 dp — pole dotyku rozszerzone do 48 dp (spec minimum). */
.quiz-footer .bookmark { position: relative; }
.quiz-footer .bookmark::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - 100%) / -2);
  border-radius: inherit;
}

@media (max-width: 599px) {
  .quiz-card .quiz-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-navbar);
    margin: 0;
    padding: var(--md-sys-measurement-space100) var(--layout-gutter)
      calc(var(--md-sys-measurement-space100) + var(--layout-safe-bottom));
    background: var(--md-sys-color-surface-container);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 0;
    box-shadow: var(--md-sys-elevation-level2);
    flex-wrap: nowrap;
    gap: var(--md-sys-measurement-space100);
  }
  /* Fallback when the shell has not hidden the navigation bar yet: sit on top
     of it instead of overlapping it. */
  body:not(.is-immersive) .quiz-card .quiz-footer {
    bottom: calc(var(--layout-nav-bar-height) + var(--layout-safe-bottom));
  }
  .quiz-card .quiz-footer > div {
    flex: 1 1 auto;
    margin-left: 0;
    flex-wrap: nowrap;
  }
  .quiz-card .quiz-footer > div .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--md-sys-measurement-space150); }
  /* Bookmark na kompakcie: kwadratowy przycisk ikonowy 48×48 dp. */
  .quiz-card .quiz-footer .bookmark {
    flex: 0 0 var(--md-comp-target-size);
    width: var(--md-comp-target-size);
    min-height: var(--md-comp-target-size);
    padding: 0;
    font-size: 0;
    gap: 0;
  }
  .quiz-card .quiz-footer .bookmark::before { inset: 0; }
  .quiz-card .quiz-footer .bookmark::after {
    content: "";
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: var(--quiz-bookmark-icon) center / contain no-repeat;
    mask: var(--quiz-bookmark-icon) center / contain no-repeat;
  }
  .quiz-card .quiz-footer .bookmark {
    --quiz-bookmark-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z'/%3E%3C/svg%3E");
  }
  .quiz-card .quiz-footer .bookmark.active {
    --quiz-bookmark-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
  }

  /* Content clearance for the fixed bar (48 target + 16 padding + 8 gap). */
  .quiz-shell {
    padding-bottom: calc(var(--md-comp-target-size) + var(--md-sys-measurement-space300) +
          var(--layout-safe-bottom));
  }
  body.is-immersive #app { padding-bottom: var(--md-sys-measurement-space400); }
}

/* ---------------------------------------------------------------------------
   5. Quiz config
   --------------------------------------------------------------------------- */
.config-card:has(.mui-topic-selector-card) {
  max-width: 960px;
  margin-inline: auto;
}
#app .config-card:has(.mui-topic-selector-card) > h2 {
  margin: 0 0 var(--md-sys-measurement-space50);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line);
  font-weight: var(--md-sys-typescale-title-large-weight);
}
.config-card:has(.mui-topic-selector-card) .field { margin-top: var(--md-sys-measurement-space300); }
.config-card:has(.mui-topic-selector-card) > .notice { margin: var(--md-sys-measurement-space300) 0 0; }
@media (min-width: 600px) {
  .config-card:has(.mui-topic-selector-card) .config-actions { justify-content: flex-end; }
}
/* Topic list inside the selector card: kontener M3 list 16 dp, item 56 dp,
   divider inset 16 dp. Zaznaczenie niesie checkbox — wiersz NIE dostaje
   wypełnienia (24 niebieskie bloki dawały ciężki, mętny obraz). */
.mui-topic-selector-card {
  border-radius: var(--md-sys-shape-corner-large);
}
.mui-topic-selector-card .mui-topic-list {
  max-height: min(52vh, 420px);
}
.mui-topic-selector-card .mui-topic-item {
  position: relative;
  border-bottom: 0;
}
.mui-topic-selector-card .mui-topic-item::after {
  content: "";
  position: absolute;
  left: var(--md-sys-measurement-space200);
  right: var(--md-sys-measurement-space200);
  bottom: 0;
  height: 1px;
  background: var(--md-sys-color-outline-variant);
}
.mui-topic-selector-card .mui-topic-item:last-child::after { display: none; }
.mui-topic-selector-card .mui-topic-item.selected {
  background: transparent;
  border-radius: 0;
}
.mui-topic-selector-card .mui-topic-item:focus-within {
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-focus-opacity) * 100%), transparent);
}
/* Nagłówek „Wszystkie tematy”: lekki ton (surface-container-low) + tri-state
   checkbox. */
.mui-topic-selector-card .mui-topics-header {
  background: var(--md-sys-color-surface-container-low);
}
/* „Wszystkie / Odznacz / Odwróć” — M3 text buttons (rozmiar XS, 32 dp). */
.mui-topic-selector-card .mui-topics-btn-group { gap: var(--md-sys-measurement-space25); }
.mui-topic-selector-card .mui-topics-btn-group .btn {
  min-height: 32px;
  padding: 0 var(--md-sys-measurement-space150);
  border: 0;
  background: transparent;
  color: var(--md-sys-color-primary);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
}
/* Podsumowanie wyboru („Wybrano: 3 z 24…”) — wsparcie decyzji nad listą. */
.mui-topic-selector-card .mui-master-sub b { font-variant-numeric: tabular-nums; }

/* --- Wyszukiwarka tematów: M3 outlined text field 56 dp / 4 dp ----------- */
.mui-topic-selector-card .mui-topic-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--md-comp-text-field-container-height);
  margin: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200)
    var(--md-sys-measurement-space100);
  padding: 0;
  border: 0;
  border-radius: var(--md-comp-text-field-container-shape);
  background: transparent;
  box-shadow: none;
}
.mui-topic-selector-card .mui-topic-search-wrap:focus-within {
  outline: none;
  box-shadow: none;
}
.mui-topic-selector-card .mui-search-icon {
  position: absolute;
  left: var(--md-sys-measurement-space200);
  top: 50%;
  width: var(--md-comp-text-field-leading-icon-size);
  height: var(--md-comp-text-field-leading-icon-size);
  transform: translateY(-50%);
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
}
.mui-topic-selector-card .mui-topic-search-wrap:focus-within .mui-search-icon {
  color: var(--md-sys-color-primary);
}
.mui-topic-selector-card .mui-topic-search-input {
  width: 100%;
  height: var(--md-comp-text-field-container-height);
  min-height: var(--md-comp-text-field-container-height);
  padding: 0 var(--md-sys-measurement-space600) 0
    calc(var(--md-sys-measurement-space200) +
      var(--md-comp-text-field-leading-icon-size) +
      var(--md-sys-measurement-space200));
  border: var(--md-comp-text-field-outline-width) solid
    var(--md-sys-color-outline);
  border-radius: var(--md-comp-text-field-container-shape);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}
.mui-topic-selector-card .mui-topic-search-input:hover:not(:disabled) {
  border-color: var(--md-sys-color-on-surface);
}
.mui-topic-selector-card .mui-topic-search-input:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 calc(var(--md-comp-text-field-focus-outline-width) -
        var(--md-comp-text-field-outline-width)) var(--md-sys-color-primary);
  outline: none;
}
.mui-topic-selector-card .mui-search-clear {
  position: absolute;
  right: var(--md-sys-measurement-space100);
  top: 50%;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: 1;
}
.mui-topic-selector-card .mui-search-clear::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - 100%) / -2);
}

/* Filter chips — 32dp visual + 8dp expansion = 48dp target. */
#quizFilterMode {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100);
  width: 100%;
  margin: 0;
  border: 0;
}
#quizFilterMode > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space75);
  flex: 0 1 auto;
  min-height: var(--md-comp-chip-container-height);
  padding: 0 var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-comp-chip-container-shape);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  white-space: normal;
  text-align: left;
  transition: background-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard);
}
#quizFilterMode > button::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - 100%) / -2);
}
#quizFilterMode > button:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}
#quizFilterMode > button.active {
  background: var(--md-sys-color-secondary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-secondary-container);
}
#quizFilterMode > button.active::after {
  content: "✓";
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: 1;
}

/* Question-length segmented buttons — spec 40dp height, 48dp target. */
#quizCount {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100);
  width: 100%;
}
#quizCount > button {
  position: relative;
  flex: 1 1 auto;
  min-height: var(--md-comp-button-container-height);
  font-variant-numeric: tabular-nums;
}
#quizCount > button::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - 100%) / -2) 0;
}

/* Mode — selectable cards with radio indicator (M3 list/selection pattern). */
#quizMode {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md-sys-measurement-space100);
  width: 100%;
  margin: 0;
  border: 0;
}
#quizMode > button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--md-sys-measurement-space25);
  min-height: 68px;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space600)
    var(--md-sys-measurement-space150);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line);
  font-weight: var(--md-sys-typescale-title-small-weight);
  text-align: left;
  transition: background-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard);
}
#quizMode > button::before {
  content: "";
  position: absolute;
  top: var(--md-sys-measurement-space150);
  right: var(--md-sys-measurement-space150);
  width: 20px;
  height: 20px;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  box-sizing: border-box;
}
#quizMode > button:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-hover-opacity) * 100%), var(--md-sys-color-surface));
}
#quizMode > button.active {
  background: var(--md-sys-color-secondary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-secondary-container);
}
#quizMode > button.active::before {
  border: 6px solid var(--md-sys-color-primary);
  background: var(--md-sys-color-surface);
}
#quizMode > button .muted {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: 1.4;
  font-weight: var(--md-sys-typescale-weight-regular);
  color: var(--md-sys-color-on-surface-variant);
}
#quizMode > button.active .muted { color: var(--md-sys-color-on-secondary-container); }
@media (min-width: 600px) {
  #quizMode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Primary start CTA — one clear primary action (56dp). */
.config-card:has(.mui-topic-selector-card) #startQuizBtn {
  flex: 1 1 100%;
  white-space: normal;
  height: auto;
  min-height: 56px;
  padding-block: var(--md-sys-measurement-space150);
}
@media (min-width: 600px) {
  .config-card:has(.mui-topic-selector-card) #startQuizBtn { flex: 0 1 auto; }
}

/* ---------------------------------------------------------------------------
   6. Quiz result
   --------------------------------------------------------------------------- */
.score-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md-sys-measurement-space150);
  padding: var(--md-sys-measurement-space400) var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  /* Hero wyniku = outlined card (surface + outline-variant 12 dp). */
  background: var(--md-sys-color-surface);
  box-shadow: none;
  text-align: center;
}
#app .score-hero h2 {
  margin: var(--md-sys-measurement-space50) 0 0;
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  max-width: 34ch;
  text-wrap: balance;
}
@media (min-width: 600px) {
  #app .score-hero h2 {
    font-size: var(--md-sys-typescale-headline-medium-size);
    line-height: var(--md-sys-typescale-headline-medium-line);
    letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  }
}
.score-hero p {
  max-width: 60ch;
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: 1.6;
}
.score-hero p b {
  color: var(--md-sys-color-on-surface);
  font-variant-numeric: tabular-nums;
}
.score-hero .pill-row {
  width: 100%;
  justify-content: center;
  gap: var(--md-sys-measurement-space100);
  margin-top: var(--md-sys-measurement-space100);
}
@media (max-width: 599px) {
  .score-hero .pill-row .btn { flex: 1 1 160px; }
}

/* Wynik jako typografia display (bez gradientowego pierścienia — hero wyniku
   buduje liczba + headline, nie dekoracja). */
.score-ring {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: var(--md-sys-measurement-space50) auto 0;
  border-radius: 0;
  background: none;
  isolation: auto;
  animation: none;
}
.score-ring::before,
.score-ring::after { content: none; display: none; }
.score-ring > strong {
  color: var(--md-sys-color-primary);
  font-size: var(--md-sys-typescale-display-small-size);
  line-height: var(--md-sys-typescale-display-small-line);
  font-weight: var(--md-sys-typescale-weight-regular);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
  font-variant-numeric: tabular-nums;
  animation: none;
}
@media (min-width: 600px) {
  .score-ring > strong {
    font-size: var(--md-sys-typescale-display-medium-size);
    line-height: var(--md-sys-typescale-display-medium-line);
    letter-spacing: var(--md-sys-typescale-display-medium-tracking);
  }
}

/* Per-chapter breakdown — M3 list: tytuł + wspierający tekst + akcja;
   separatory outline-variant; opcjonalny pasek postępu 4 dp (.bar). */
.chapter-breakdown {
  display: block;
  margin: 0 0 var(--md-sys-measurement-space100);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface);
  overflow: hidden;
}
html[data-theme="dark"] .chapter-breakdown {
  background: var(--md-sys-color-surface-container-low);
}
.breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
  flex-wrap: wrap;
  min-height: 72px;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
}
.breakdown-row .bar {
  flex: 1 1 100%;
  margin-top: var(--md-sys-measurement-space50);
}
.breakdown-row + .breakdown-row {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
#app .breakdown-row b {
  display: block;
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line);
  font-weight: var(--md-sys-typescale-title-small-weight);
}
.breakdown-row .muted.small { font-variant-numeric: tabular-nums; }
.breakdown-row .pill-row { margin-left: auto; }

/* Answer review cards */
.review-item {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
  margin: 0 0 var(--md-sys-measurement-space150);
  padding: var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
html[data-theme="dark"] .review-item {
  background: var(--md-sys-color-surface-container-low);
}
#app .review-item h3 {
  margin: 0;
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  overflow-wrap: break-word;
}
.review-item p {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.6;
  overflow-wrap: break-word;
}
.review-item p.right { color: var(--md-sys-color-tertiary); font-weight: var(--md-sys-typescale-weight-medium); }
.review-item p.wrong { color: var(--md-sys-color-error); font-weight: var(--md-sys-typescale-weight-medium); }
.review-item .source { margin-top: var(--md-sys-measurement-space25); }

/* ---------------------------------------------------------------------------
   7. Flashcards
   --------------------------------------------------------------------------- */
.flash-layout .grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md-sys-measurement-space200);
  margin: 0 0 var(--md-sys-measurement-space100);
}
.flash-layout .grid-2 .field { margin-top: 0; }
@media (min-width: 600px) {
  .flash-layout .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
.flash-layout .flash-modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100);
  width: 100%;
}
.flash-layout .flash-modes > button {
  position: relative;
  flex: 1 1 auto;
  padding-inline: var(--md-sys-measurement-space150);
}
.flash-layout .flash-modes > button::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - 100%) / -2) 0;
}
.flash-layout > .quiz-top { margin-top: var(--md-sys-measurement-space100); }

/* Pool statistics — assist chips (32dp, non-interactive) */
.flash-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100);
  margin: 0 0 var(--md-sys-measurement-space200);
}
.flash-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space50);
  min-height: var(--md-comp-chip-container-height);
  padding: 0 var(--md-sys-measurement-space150);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-chip-container-shape);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.flash-stat.good {
  border-color: transparent;
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}
.flash-stat.box {
  border: 1px solid var(--md-sys-color-outline-variant);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
}

/* Optional “type the answer first” field */
.flash-selfcheck {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--md-sys-measurement-space100);
  margin: 0 0 var(--md-sys-measurement-space200);
}
.flash-selfcheck input { flex: 1 1 220px; min-width: 0; }
.flash-selfcheck .btn { flex: 0 0 auto; }

/* 3D flip card — filled M3 card (12dp), 200ms emphasized decelerate. */
.flashcard {
  position: relative;
  height: 320px;
  margin: 0 0 var(--md-sys-measurement-space200);
  perspective: 1200px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 600px) { .flashcard { height: 340px; } }

.flash-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-emphasized-decelerate);
}
.flashcard.flipped .flash-inner { transform: rotateY(180deg); }

.flash-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-measurement-space150);
  padding: var(--md-sys-measurement-space600) var(--md-sys-measurement-space300)
    var(--md-sys-measurement-space400);
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  /* Fiszka = outlined card (surface + 1 dp outline-variant, 12 dp). */
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  box-shadow: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flash-face.back {
  transform: rotateY(180deg);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-outline-variant);
  box-shadow: none;
}

.flash-face small {
  position: absolute;
  top: var(--md-sys-measurement-space200);
  left: 0;
  right: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  text-transform: uppercase;
}
.flash-face.back small { color: var(--md-sys-color-primary); }
#app .flash-face h2 {
  margin: 0;
  max-width: 100%;
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line);
  font-weight: var(--md-sys-typescale-title-large-weight);
  overflow-wrap: break-word;
}
.flash-face p {
  max-width: 100%;
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  overflow-wrap: break-word;
}
@media (min-width: 600px) {
  #app .flash-face h2 { font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line); }
  .flash-face p { font-size: var(--md-sys-typescale-prose-size); line-height: var(--md-sys-typescale-prose-line); }
}
.flash-hint {
  position: absolute;
  bottom: var(--md-sys-measurement-space200);
  left: 0;
  right: 0;
  padding: 0 var(--md-sys-measurement-space200);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
}
.flash-face.back .flash-hint { color: var(--md-sys-color-on-surface-variant); }

/* Self-grade — one filled primary (Umiem), tonal (Trudne), outlined (Jeszcze raz) */
.flash-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--md-sys-measurement-space100);
  margin: 0 0 var(--md-sys-measurement-space100);
}
.flash-actions .btn {
  flex-direction: column;
  gap: var(--md-sys-measurement-space25);
  height: auto;
  min-height: 56px;
  padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space100);
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}
.flash-actions .btn small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-measurement-space50);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  font-weight: var(--md-sys-typescale-label-small-weight);
  opacity: 0.9;
}
/* Jeszcze raz — outlined hierarchy */
.flash-actions .rate-again {
  background: transparent;
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-primary);
}
.flash-actions .rate-again:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary)
        calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}
/* Trudne — tonal hierarchy (kept from .btn-secondary) */
.flash-actions .rate-hard { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
/* Umiem — filled primary hierarchy (kept from .btn-primary) */

/* Prev/next footer */
.flash-layout .quiz-footer {
  justify-content: space-between;
  margin-top: var(--md-sys-measurement-space200);
}
.flash-layout .quiz-footer .muted {
  flex: 1 1 100%;
  order: 3;
  text-align: center;
}
@media (min-width: 600px) {
  .flash-layout .quiz-footer .muted { flex: 1 1 auto; order: 0; }
}

/* Empty pool */
.flash-layout .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  text-align: center;
}
#app .flash-layout .empty h2 { font-size: var(--md-sys-typescale-title-large-size); }
.flash-layout .empty p { color: var(--md-sys-color-on-surface-variant); }

/* ---------------------------------------------------------------------------
   8. Formulas
   --------------------------------------------------------------------------- */
/* Toolbar: search field + live result count (compact = stacked full width). */
.formula-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
  margin: 0 0 var(--md-sys-measurement-space200);
}
.formula-count {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 600px) {
  .formula-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--md-sys-measurement-space200);
  }
  .formula-toolbar #formulaSearch { flex: 1 1 auto; }
  .formula-count { flex: 0 0 auto; }
}
#app:has(#formulaSearch) .empty-state {
  margin: 0 0 var(--md-sys-measurement-space200);
}

/* Wyszukiwarka wzorów — M3 outlined text field: 56 dp, 4 dp, 1 px outline,
   2 px primary na fokusie (spec md.comp.outlined-text-field). */
#formulaSearch {
  display: block;
  width: 100%;
  height: var(--md-comp-text-field-container-height);
  padding: 0 var(--md-sys-measurement-space200);
  border: var(--md-comp-text-field-outline-width) solid
    var(--md-sys-color-outline);
  border-radius: var(--md-comp-text-field-container-shape);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}
#formulaSearch:hover:not(:disabled) {
  border-color: var(--md-sys-color-on-surface);
}
#formulaSearch:focus,
#formulaSearch:focus-visible {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 calc(var(--md-comp-text-field-focus-outline-width) -
        var(--md-comp-text-field-outline-width)) var(--md-sys-color-primary);
  outline: none;
}

/* Formula card grid — view-scoped via :has so notes' .formula-item stays as-is */
.formula-grid:has(> .formula-item > .formula-eq) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md-sys-measurement-space150);
  margin: 0 0 var(--md-sys-measurement-space100);
}
@media (min-width: 840px) {
  .formula-grid:has(> .formula-item > .formula-eq) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--md-sys-measurement-space200);
  }
}
@media (min-width: 1200px) {
  .formula-grid:has(> .formula-item > .formula-eq) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.formula-item:has(> .formula-eq) {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
  min-width: 0;
  padding: var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  box-shadow: none;
  break-inside: avoid;
  page-break-inside: avoid;
  transition: border-color var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}
@media (min-width: 600px) {
  .formula-item:has(> .formula-eq) { padding: var(--md-sys-measurement-space250); }
}
.formula-item:has(> .formula-eq):hover {
  border-color: var(--md-sys-color-outline);
  box-shadow: none;
  transform: none;
}
#app .formula-item:has(> .formula-eq) > b {
  display: block;
  margin: 0;
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  overflow-wrap: break-word;
}
/* KaTeX never widens the page: scroll inside the tonally recessed box. */
.formula-eq {
  display: block;
  max-width: 100%;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: 1.9;
  font-weight: var(--md-sys-typescale-body-large-weight);
  white-space: normal;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.formula-eq .katex-display { margin: var(--md-sys-measurement-space50) 0; }
.formula-eq .katex-display:first-child { margin-top: 0; }
.formula-eq .katex-display:last-child { margin-bottom: 0; }
.formula-eq .katex { font-size: 1em; }
.formula-note {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* Tryb pamięciowy — stan tonalny (nie opacity/blur): wzór jest zastąpiony
   kontenerem surface-container-high z jawnym CTA „Odsłoń”; tytuł karty i
   informacja o akcji pozostają widoczne. */
.formula-item.masked:has(> .formula-eq) { position: relative; cursor: pointer; }
.formula-item.masked:has(> .formula-eq) .formula-eq,
.formula-item.masked:has(> .formula-eq) .formula-note {
  position: relative;
  min-height: var(--md-comp-text-field-container-height);
  border-color: transparent;
  background: var(--md-sys-color-surface-container-low);
  color: transparent;
  filter: none;
  opacity: 1;
  user-select: none;
}
.formula-item.masked:has(> .formula-eq) .formula-eq > *,
.formula-item.masked:has(> .formula-eq) .formula-note > * {
  visibility: hidden;
}
.formula-item.masked:has(> .formula-eq) .formula-eq::after,
.formula-item.masked:has(> .formula-eq) .formula-note::after {
  content: "Odsłoń wzór";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: visible;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
}
.formula-item.masked:has(> .formula-eq) .formula-note::after {
  content: "Odsłoń wskazówkę";
}
.formula-item.masked:has(> .formula-eq):hover .formula-eq,
.formula-item.masked:has(> .formula-eq):hover .formula-note {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%,
      var(--md-sys-color-surface-container-low));
}
/* The whole card is keyboard-activable (role="button"); keep the spec ring. */
.formula-item:has(> .formula-eq):focus-visible {
  outline: var(--md-sys-state-focus-indicator-thickness) solid
    var(--md-sys-state-focus-indicator-color);
  outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
}

/* ---------------------------------------------------------------------------
   9. Shared corrections for these views only
   --------------------------------------------------------------------------- */
/* Page-heads: layout (row ≥768, column + pełna szerokość akcji na kompakcie)
   pochodzi z css/base.css — bez lokalnych nadpisań. */

/* Neutralizacja starych efektów z warstwy @layer legacy w TYCH widokach:
   brak podnoszenia/scale na hover, brak cieni na przyciskach, brak
   springowych animacji odpowiedzi. (Nie ruszamy komponentów współdzielonych
   poza zakresem tych trzech widoków.) */
.quiz-shell .btn,
.config-card:has(.mui-topic-selector-card) .btn,
.flash-layout .btn,
.page-head:has([data-action="flash-shuffle"]) .btn,
.page-head:has([data-action="toggle-formula-mask"]) .btn {
  transform: none;
  box-shadow: none;
}
.quiz-shell .btn:hover,
.quiz-shell .btn:active,
.config-card:has(.mui-topic-selector-card) .btn:hover,
.config-card:has(.mui-topic-selector-card) .btn:active,
.flash-layout .btn:hover,
.flash-layout .btn:active,
.page-head:has([data-action="flash-shuffle"]) .btn:hover,
.page-head:has([data-action="toggle-formula-mask"]) .btn:hover {
  transform: none;
}
.quiz-card .streak-badge,
.quiz-card .feedback { animation: none; }
.flashcard,
.flashcard:hover,
.flashcard:active { transform: none; }
.flashcard { transition: none; }

/* Maths stay inline so long expressions wrap inside cards. */
.quiz-card h2 .math,
.answer .math,
.quiz-card .feedback .math,
.review-item .math,
.flash-face .math,
.formula-eq .math,
.formula-note .math,
.formula-item:has(> .formula-eq) > b .math {
  display: inline;
  font-weight: inherit;
}
.math-frac { max-width: 100%; }

/* Feedback fade-in (reduced motion is clamped globally in base.css) */
@keyframes quiz-feedback-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .quiz-card .feedback {
    animation: quiz-feedback-in var(--md-sys-motion-duration-short4)
      var(--md-sys-motion-easing-standard) both;
  }
}

/* Compact phones (≤359px) */
@media (max-width: 359px) {
  .quiz-card { padding: var(--md-sys-measurement-space150); }
  .answer { padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space150); }
  .flashcard { height: 300px; }
}

/* ---------------------------------------------------------------------------
   10. Print
   --------------------------------------------------------------------------- */
@media print {
  .quiz-card .quiz-footer {
    position: static;
    margin: var(--md-sys-measurement-space250) 0 0;
    padding: var(--md-sys-measurement-space200) 0 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .formula-item:has(> .formula-eq) { break-inside: avoid; page-break-inside: avoid; }
  /* Tryb pamięciowy: w druku wzory zawsze odsłonięte. */
  .formula-item.masked:has(> .formula-eq) .formula-eq,
  .formula-item.masked:has(> .formula-eq) .formula-note {
    min-height: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
  }
  .formula-item.masked:has(> .formula-eq) .formula-eq > *,
  .formula-item.masked:has(> .formula-eq) .formula-note > * {
    visibility: visible;
  }
  .formula-item.masked:has(> .formula-eq) .formula-eq::after,
  .formula-item.masked:has(> .formula-eq) .formula-note::after { content: none; }
}

/* ==========================================================================
   Quiz — UX overhaul (M3 Expressive): clear question flow, calm chrome,
   obvious answer selection and one primary action.
   ========================================================================== */
.quiz-shell { width: 100%; max-width: 880px; margin: 0 auto; }

/* meta row + real M3 progress */
.quiz-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space75) var(--md-sys-measurement-space200);
  margin-bottom: var(--md-sys-measurement-space100);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
}
.quiz-top > span:last-child {
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quiz-progress { display: block; width: 100%; margin: 0 0 var(--md-sys-measurement-space200); }

/* question navigator = compact scrollable chips */
.quiz-nav-dots {
  display: flex;
  gap: var(--md-sys-measurement-space50);
  padding: var(--md-sys-measurement-space50) 0 var(--md-sys-measurement-space150);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.quiz-nav-dots::-webkit-scrollbar { display: none; }
.quiz-nav-dots .quiz-dot {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: var(--md-comp-target-size);
  width: var(--md-comp-target-size);
  height: var(--md-comp-target-size);
  padding: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  cursor: pointer;
}
.quiz-nav-dots .quiz-dot.current {
  border-color: transparent;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.quiz-nav-dots .quiz-dot.right { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border-color: transparent; }
.quiz-nav-dots .quiz-dot.wrong { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border-color: transparent; }
.quiz-nav-dots .quiz-dot.answered { background: var(--md-sys-color-surface-container-high); }

/* question card */
.quiz-card {
  max-width: 100%;
  padding: var(--md-sys-measurement-space300);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface);
  box-shadow: none;
}
#app .quiz-card h2 {
  margin: var(--md-sys-measurement-space200) 0 var(--md-sys-measurement-space250);
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line);
  font-weight: var(--md-sys-typescale-weight-medium);
  letter-spacing: 0;
}
.quiz-card .lifeline-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100);
  padding: 0 0 var(--md-sys-measurement-space150);
  margin-bottom: var(--md-sys-measurement-space100);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.quiz-card .question-label { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-label-large-size); font-weight: var(--md-sys-typescale-label-large-weight); }
.quiz-card .lifeline-bar .pill { min-height: var(--md-sys-measurement-space400); border-radius: var(--md-sys-shape-corner-small); }
.quiz-card .streak-badge { height: var(--md-comp-button-container-height); }

/* answers = M3 selection list */
.quiz-card .answers { display: flex; flex-direction: column; gap: var(--md-sys-measurement-space100); margin: var(--md-sys-measurement-space150) 0; }
.quiz-card .answer {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space150);
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard);
}
.quiz-card .answer:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.quiz-card .answer .answer-letter {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: var(--md-sys-measurement-space400);
  height: var(--md-sys-measurement-space400);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
}
.quiz-card .answer .answer-text { flex: 1 1 auto; min-width: 0; }
.quiz-card .answer.selecting,
.quiz-card .answer.selected {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding: calc(var(--md-sys-measurement-space150) - 1px) calc(var(--md-sys-measurement-space200) - 1px);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.quiz-card .answer.selected .answer-letter { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.quiz-card .answer.correct {
  border-color: transparent;
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.quiz-card .answer.correct .answer-letter { background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); }
.quiz-card .answer.incorrect {
  border-color: transparent;
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.quiz-card .answer.incorrect .answer-letter { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.quiz-card .answer.eliminated {
  opacity: var(--md-sys-state-disabled-opacity);
  text-decoration: line-through;
  text-decoration-color: var(--md-sys-color-outline);
}
.quiz-card .answer:disabled { cursor: default; }
.quiz-card .answer-mark { margin-left: auto; font-size: var(--md-sys-typescale-title-medium-size); }

/* feedback */
.quiz-card .feedback { margin: var(--md-sys-measurement-space200) 0; border-radius: var(--md-sys-shape-corner-medium); }
.quiz-card .feedback .explanation { margin-top: var(--md-sys-measurement-space100); }

/* sticky action bar */
.quiz-card .quiz-footer {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100);
  margin: var(--md-sys-measurement-space250) calc(-1 * var(--md-sys-measurement-space300))
    calc(-1 * var(--md-sys-measurement-space300));
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space300);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container);
}
.quiz-card .quiz-footer > div { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space100); }
/* Dopasowanie do rzędu akcji: wizualnie 40 dp jak przyciski,
   48 dp pole dotyku zapewnia ::before (inset -4 dp). */
.quiz-card .quiz-footer .bookmark {
  height: var(--md-comp-button-container-height);
  min-height: var(--md-comp-button-container-height);
}
.quiz-card .quiz-footer .btn { min-height: var(--md-comp-button-container-height); }

/* config view tidy */
.quiz-shell .config-card { max-width: 100%; }
.quiz-shell .mui-topic-list { max-height: 360px; }
.quiz-shell .mui-topic-item { border-bottom: 0; border-radius: var(--md-sys-shape-corner-small); margin: 0 var(--md-sys-measurement-space50); }
.quiz-shell .mui-topic-item:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.quiz-shell .mui-topic-selector-card { border-radius: var(--md-sys-shape-corner-medium); }
@media (max-width: 639px) {
  .quiz-card { padding: var(--md-sys-measurement-space200); }
  .quiz-card .quiz-footer {
    margin: var(--md-sys-measurement-space200) calc(-1 * var(--md-sys-measurement-space200))
      calc(-1 * var(--md-sys-measurement-space200));
    padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
  }
  .quiz-card .quiz-footer .bookmark { flex: 1 1 100%; }
  .quiz-card .quiz-footer > div { flex: 1 1 100%; }
  .quiz-card .quiz-footer > div .btn { flex: 1 1 auto; }
}

/* Distraction fix: keyboard shortcut digits next to answers are removed. */
.quiz-card .answer::before { content: none; }

/* Mobile: actions sit after the answers (no sticky overlay), compact lifelines. */
@media (max-width: 767px) {
  .quiz-card .quiz-footer {
    position: static;
    margin: var(--md-sys-measurement-space200) calc(-1 * var(--md-sys-measurement-space200))
      calc(-1 * var(--md-sys-measurement-space200));
    padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
  }
  .quiz-card .quiz-footer .bookmark { flex: 0 1 auto; }
  .quiz-card .quiz-footer > div { flex: 1 1 auto; justify-content: flex-end; }
  .quiz-card .lifeline-bar .question-label { display: none; }
  .quiz-card .lifeline-bar { gap: var(--md-sys-measurement-space50); }
  .quiz-card .lifeline-bar .pill { min-height: var(--md-sys-measurement-space400); font-size: var(--md-sys-typescale-label-medium-size); }
  .quiz-card .lifeline-bar .streak-badge { height: var(--md-sys-measurement-space400); }
}

/* Question dots keep the 48dp M3 target (visual chip 48×48). */
.quiz-nav-dots .quiz-dot {
  min-width: var(--md-comp-target-size);
  height: var(--md-comp-target-size);
}

/* ---------------------------------------------------------------------------
   Compact (<= 599 dp): bookmark becomes a square 48×48 icon button in the
   quiz footer. Kept last so it wins over the row-alignment rule above.
   The mask icon is centred absolutely so it stays optically centred.
   --------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .quiz-card .quiz-footer .bookmark {
    flex: 0 0 var(--md-comp-target-size);
    width: var(--md-comp-target-size);
    height: var(--md-comp-target-size);
    min-height: var(--md-comp-target-size);
    padding: 0;
    gap: 0;
    font-size: 0;
    justify-content: center;
  }
  .quiz-card .quiz-footer .bookmark::after {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 24px;
    height: 24px;
  }
}