/* ============================================================================
   Rapid Fire („Szybki sprint”) — view layer (Material Design 3)

   Owner: quiz-rapid-fixer (task-5). Scope: this file only.

   Views covered:
     - config: presets (filter chips), scope (radio cards), mastery matrix,
       topic list (M3 list + checkbox), sprint length (segmented), start CTA,
       explanation card
     - session: HUD (streak / progress / counter), knowledge card, micro
       calculators (M3 sliders), T-account, answer list, inline feedback with
       the 4-layer breakdown, single fixed bottom action bar on compact
     - summary: score hero, stats, primary + secondary actions

   Values come from css/tokens.css (M3 spec token tables — see
   spec/generated/SPEC_CHEATSHEET.md). No raw colours/radii/font sizes.
   Shared components (.btn, .card, .chip, .segmented, .field, .stat-card,
   .empty-state …) are styled in css/components.css and consumed here.

   Accent policy for this module: primary = actions (spec buttons); the
   module's own “energy” accent is the spec **tertiary** tonal container
   (streak, topic, calculator output, mnemonic); **warning** is reserved for
   caution semantics (learning status, trap analysis) — never a generic accent.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. Layout
   --------------------------------------------------------------------------- */
.rapid-container {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space200);
}
.rapid-config-grid {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md-sys-measurement-space200);
  align-items: start;
}
@media (min-width: 1024px) {
  .rapid-config-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: var(--md-sys-measurement-space300);
  }
}
.rapid-config-grid > .card { min-width: 0; }
@media (min-width: 600px) {
  .rapid-config-grid > .card { padding: var(--md-sys-measurement-space300); }
}

/* Numbered step headings inside the config card — title-medium role. */
#app .rapid-config-grid h2 {
  margin-bottom: var(--md-sys-measurement-space150);
  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);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  color: var(--md-sys-color-on-surface);
}
#app .rapid-config-grid > .card:not(.config-card) h3 {
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
}
.rapid-config-grid > .card:not(.config-card) ul {
  margin: var(--md-sys-measurement-space100) 0 0;
  padding-left: 1.15em;
}
.rapid-config-grid > .card:not(.config-card) li {
  line-height: 1.65;
  color: var(--md-sys-color-on-surface);
}
.rapid-config-grid > .card:not(.config-card) kbd { margin-inline: var(--md-sys-measurement-space25); }

/* ---------------------------------------------------------------------------
   1. Presets — M3 filter chips (32dp visual, 48dp target, checkmark selected)
   --------------------------------------------------------------------------- */
.rapid-presets-bar {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
  margin: 0 0 var(--md-sys-measurement-space250);
}
.rapid-presets-label {
  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: 0;
  text-transform: none;
}
.rapid-presets-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100);
}
.preset-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space75);
  max-width: 100%;
  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-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);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  text-align: left;
  white-space: normal;
  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);
}
/* 32dp visual + 8dp expansion = 48dp effective target */
.preset-chip::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - 100%) / -2);
}
.preset-chip:hover {
  transform: none;
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}
.preset-chip:active {
  transform: none;
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-pressed-opacity) * 100%), transparent);
}
.preset-chip.active {
  padding-left: var(--md-sys-measurement-space600);
  border-color: transparent;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
/* Selected filter chip shows a checkmark (not colour-only). */
.preset-chip.active::after {
  content: "";
  position: absolute;
  left: var(--md-sys-measurement-space200);
  top: 50%;
  width: var(--md-comp-chip-icon-size);
  height: var(--md-comp-chip-icon-size);
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: 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 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: 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 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
   2. Scope — selectable cards with M3 radio (20dp, 2dp outline, primary)
   --------------------------------------------------------------------------- */
.rapid-scope-selector {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md-sys-measurement-space100);
  margin-top: var(--md-sys-measurement-space150);
}
.rapid-scope-opt {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 72px;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200)
    var(--md-sys-measurement-space150) var(--md-sys-measurement-space600);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  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);
}
.rapid-scope-opt:hover {
  border-color: var(--md-sys-color-outline);
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-hover-opacity) * 100%), var(--md-sys-color-surface));
}
.rapid-scope-opt.active {
  border-color: transparent;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.rapid-scope-opt:focus-within {
  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);
}
/* invisible native radio, 48dp target; the M3 visual is drawn on the label */
.rapid-scope-opt input[type="radio"] {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--md-comp-target-size);
  height: var(--md-comp-target-size);
  margin: 0;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
}
.rapid-scope-opt::before {
  content: "";
  position: absolute;
  left: var(--md-sys-measurement-space200);
  top: var(--md-sys-measurement-space200);
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  transition: border-color var(--md-sys-motion-duration-short2)
    var(--md-sys-motion-easing-standard);
}
.rapid-scope-opt::after {
  content: "";
  position: absolute;
  left: calc(var(--md-sys-measurement-space200) + 6px);
  top: calc(var(--md-sys-measurement-space200) + 6px);
  width: 8px;
  height: 8px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2)
    var(--md-sys-motion-easing-standard);
}
.rapid-scope-opt.active::before { border-color: var(--md-sys-color-primary); }
.rapid-scope-opt.active::after { opacity: 1; }
.rapid-scope-opt strong {
  display: block;
  color: inherit;
  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);
  overflow-wrap: break-word;
}
.rapid-scope-opt.active strong { color: var(--md-sys-color-on-secondary-container); }
.rapid-scope-opt small {
  display: block;
  margin-top: var(--md-sys-measurement-space50);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.55;
  overflow-wrap: break-word;
}
.rapid-scope-opt.active small { color: var(--md-sys-color-on-secondary-container); }

/* ---------------------------------------------------------------------------
   3. Mastery matrix — diagnostic chips of every chapter
   --------------------------------------------------------------------------- */
.mastery-matrix-section {
  margin-top: var(--md-sys-measurement-space250);
  padding: 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-container-low);
}
.mastery-matrix-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
  flex-wrap: wrap;
  margin-bottom: var(--md-sys-measurement-space100);
}
.mastery-matrix-title {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  min-width: 0;
  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);
}
.mastery-matrix-stats {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space75) var(--md-sys-measurement-space150);
  flex-wrap: wrap;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-small-size);
}
.mastery-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space75);
  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);
  white-space: nowrap;
}
.mastery-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
  gap: var(--md-sys-measurement-space100);
  max-height: 336px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}
/* Each cell is a >= 56 dp target and part of the sprint selection. Three tonal
   states (below); the state is also written out in the status label and carried
   by a distinct glyph, so colour is never the only signal. */
.mastery-chip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 56px;
  padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space150);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard);
}
.mastery-chip:hover {
  border-color: var(--md-sys-color-outline);
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-hover-opacity) * 100%),
    var(--md-sys-color-surface-container-high));
}
/* --- state: mastered -> tertiary (success) tonal container + check glyph --- */
.mastery-chip.status-mastered,
.mastery-chip:has(.mastery-dot.mastered) {
  border-color: transparent;
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  font-weight: var(--md-sys-typescale-weight-medium);
}
.mastery-chip.status-mastered:hover,
.mastery-chip:has(.mastery-dot.mastered):hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container)
        calc(var(--md-sys-state-hover-opacity) * 100%),
    var(--md-sys-color-tertiary-container));
}
/* --- state: in progress -> secondary tonal container + dot glyph --- */
.mastery-chip.status-learning,
.mastery-chip:has(.mastery-dot.learning) {
  border-color: transparent;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.mastery-chip.status-learning:hover,
.mastery-chip:has(.mastery-dot.learning):hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container)
        calc(var(--md-sys-state-hover-opacity) * 100%),
    var(--md-sys-color-secondary-container));
}
/* --- state: to learn -> neutral surface-container-high + outline-variant --- */
.mastery-chip.status-unseen,
.mastery-chip:has(.mastery-dot.unseen) {
  border-color: var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}
.mastery-chip.status-unseen:hover,
.mastery-chip:has(.mastery-dot.unseen):hover {
  border-color: var(--md-sys-color-outline-variant);
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-hover-opacity) * 100%),
    var(--md-sys-color-surface-container-high));
}
/* --- selected for the sprint: primary 2 dp inset ring over any state --- */
.mastery-chip.selected {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}
.mastery-chip: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);
}
.mastery-chip-main {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space75);
  min-width: 0;
  flex: 1 1 auto;
}
.mastery-chip-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mastery-chip-status {
  flex: 0 0 auto;
  align-self: flex-start;
  color: inherit;
  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);
  font-variant-numeric: tabular-nums;
}
/* Status glyphs: check (mastered), filled dot (in progress), hollow dot
   (to learn) — the shape carries the state on its own. */
.mastery-dot {
  display: inline-grid;
  place-items: center;
  box-shadow: none;
  opacity: 1;
  flex: 0 0 var(--md-sys-measurement-space200);
  width: var(--md-sys-measurement-space200);
  height: var(--md-sys-measurement-space200);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
}
.mastery-dot::before {
  content: "";
  display: block;
}
.mastery-dot.mastered::before {
  width: var(--md-sys-measurement-space200);
  height: var(--md-sys-measurement-space200);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mastery-dot.learning::before {
  width: 10px;
  height: 10px;
  border-radius: var(--md-sys-shape-corner-full);
  background: currentColor;
}
.mastery-dot.unseen::before {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: var(--md-sys-shape-corner-full);
}
/* Legend glyph colours — the text labels carry the meaning. */
.mastery-stat-pill:has(.mastery-dot.mastered) .mastery-dot { color: var(--md-sys-color-tertiary); }
.mastery-stat-pill:has(.mastery-dot.learning) .mastery-dot { color: var(--md-sys-color-secondary); }

/* ---------------------------------------------------------------------------
   4. Topic list — M3 list (56dp items, inset outline-variant dividers)
   --------------------------------------------------------------------------- */
.rapid-topic-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
  margin-top: var(--md-sys-measurement-space150);
}
.rapid-topic-toolbar .form-input { width: 100%; max-width: 100%; }
.rapid-topic-toolbar .pill-row { gap: var(--md-sys-measurement-space100); }

.rapid-topics-box {
  display: flex;
  flex-direction: column;
  margin-top: var(--md-sys-measurement-space100);
  /* scroll container: rows keep their content height instead of shrinking */
  min-height: 0;
  padding: var(--md-sys-measurement-space50) 0;
  max-height: 336px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
}
.rapid-topics-box > * { flex: 0 0 auto; }
.rapid-topic-group-title {
  position: sticky;
  top: calc(var(--md-sys-measurement-space50) * -1);
  z-index: 1;
  margin: 0;
  padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200)
    var(--md-sys-measurement-space50);
  background: var(--md-sys-color-surface);
  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);
  letter-spacing: 0;
  text-transform: none;
}
.rapid-topic-row {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  min-height: var(--md-comp-list-item-height);
  padding: 0 var(--md-sys-measurement-space200);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  transition: background-color var(--md-sys-motion-duration-short2)
    var(--md-sys-motion-easing-standard);
}
.rapid-topic-row:last-child { border-bottom: 0; }
.rapid-topic-row:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}
.rapid-topic-row.selected { background: var(--md-sys-color-secondary-container); }
.rapid-topic-row:has(.rapid-topic-cb:focus-visible) {
  outline: var(--md-sys-state-focus-indicator-thickness) solid
    var(--md-sys-state-focus-indicator-color);
  outline-offset: calc(var(--md-sys-state-focus-indicator-outer-offset) * -1);
}
.rapid-topic-row label {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--md-comp-list-item-height);
  padding-left: var(--md-sys-measurement-space600);
  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);
  font-weight: var(--md-sys-typescale-weight-regular);
  overflow-wrap: break-word;
  cursor: pointer;
}
.rapid-topic-row.selected label { color: var(--md-sys-color-on-secondary-container); }
/* native input is the 48dp target; the M3 checkbox is drawn on the label */
.rapid-topic-cb {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--md-comp-target-size);
  height: var(--md-comp-target-size);
  margin: 0;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
}
.rapid-topic-row label::before {
  content: "";
  position: absolute;
  left: var(--md-sys-measurement-space50);
  top: 50%;
  width: var(--md-comp-checkbox-size);
  height: var(--md-comp-checkbox-size);
  margin-top: calc(var(--md-comp-checkbox-size) / -2);
  box-sizing: border-box;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-comp-checkbox-shape);
  background: 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);
}
.rapid-topic-row label::after {
  content: "";
  position: absolute;
  left: calc(var(--md-sys-measurement-space50) + 6px);
  top: 50%;
  width: 5px;
  height: 10px;
  margin-top: -7px;
  border: solid var(--md-sys-color-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2)
    var(--md-sys-motion-easing-standard);
}
.rapid-topic-row.selected label::before {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}
.rapid-topic-row.selected label::after { opacity: 1; }
.rapid-topic-badge {
  flex: 0 0 auto;
  padding: 0 var(--md-sys-measurement-space100);
  min-height: var(--md-sys-measurement-space300);
  display: inline-grid;
  place-items: center;
  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-medium-size);
  line-height: 1.4;
  font-weight: var(--md-sys-typescale-label-medium-weight);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rapid-topic-row.selected .rapid-topic-badge {
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-focus-opacity) * 100%), transparent);
  color: var(--md-sys-color-on-secondary-container);
}
.rapid-config-grid .muted.small {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
}

/* ---------------------------------------------------------------------------
   5. Sprint length — M3 segmented buttons (40dp visual, 48dp target)
   --------------------------------------------------------------------------- */
.rapid-len-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100);
  margin-top: var(--md-sys-measurement-space150);
}
.rapid-len-selector .btn {
  flex: 1 1 auto;
  min-height: var(--md-comp-button-container-height);
  padding-inline: var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface);
}
.rapid-len-selector .btn:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}
.rapid-len-selector .btn-primary {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.rapid-len-selector .btn-primary:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container)
        calc(var(--md-sys-state-hover-opacity) * 100%), var(--md-sys-color-secondary-container));
}

/* ---------------------------------------------------------------------------
   6. Start row + compact sticky CTA (above the navigation bar)
   --------------------------------------------------------------------------- */
.rapid-start-row {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
  align-items: stretch;
}
.rapid-start-row .muted {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
}
.rapid-start-row .btn-primary {
  width: 100%;
  height: var(--md-comp-fab-container-height);
  min-height: var(--md-comp-fab-container-height);
  padding: var(--md-sys-measurement-space50) var(--md-sys-measurement-space300);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  white-space: normal;
}
.rapid-config-warning {
  margin-top: var(--md-sys-measurement-space100);
  color: var(--md-sys-color-error);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
}
@media (max-width: 599px) {
  .rapid-start-row {
    position: sticky;
    bottom: calc(var(--layout-nav-bar-height) + var(--layout-safe-bottom) +
          var(--md-sys-measurement-space100));
    z-index: var(--z-sticky);
    margin: var(--md-sys-measurement-space100) calc(var(--md-sys-measurement-space100) * -1)
      calc(var(--md-sys-measurement-space100) * -1);
    padding: var(--md-sys-measurement-space100);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container-low);
    box-shadow: none;
  }
  /* the sticky CTA must not cover the end of the config card */
  .rapid-config-grid { padding-bottom: calc(var(--md-comp-target-size) +
        var(--md-sys-measurement-space400)); }
}

/* ---------------------------------------------------------------------------
   7. Session HUD — streak · progress · counter/actions
   --------------------------------------------------------------------------- */
.rapid-hud {
  position: sticky;
  top: calc(var(--layout-topbar-height) + var(--md-sys-measurement-space100));
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--md-sys-measurement-space100) var(--md-sys-measurement-space150);
  align-items: center;
  padding: var(--md-sys-measurement-space100) 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-container-low);
  box-shadow: none;
}
.rapid-hud > div { min-width: 0; }
.rapid-hud > div:first-child {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  flex-wrap: wrap;
}
/* progress takes the full second row on compact */
.rapid-hud > div:nth-child(2) {
  grid-column: 1 / -1;
  grid-row: 2;
}
.rapid-hud > div:last-child {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.rapid-hud .muted.small {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
}
/* HUD utilities are quiet text actions; the card CTA is the only filled one. */
.rapid-hud .btn {
  padding-inline: var(--md-sys-measurement-space150);
  border-color: transparent;
  background: transparent;
  color: var(--md-sys-color-primary);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  white-space: nowrap;
}
.rapid-hud .btn:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary)
        calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}
.rapid-hud-counter {
  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);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rapid-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space75);
  min-height: var(--md-sys-measurement-space400);
  padding: 0 var(--md-sys-measurement-space150);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
  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);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  animation: none;
  transform: none;
  box-shadow: none;
}
.rapid-progress-bar {
  width: 100%;
  max-width: none;
  height: var(--md-comp-progress-track-thickness);
  margin: var(--md-sys-measurement-space25) 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-comp-progress-track-color);
  overflow: hidden;
}
.rapid-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--md-comp-progress-indicator-color);
  transition: width var(--md-sys-motion-duration-medium2)
    var(--md-sys-motion-easing-emphasized-decelerate);
}
@media (max-width: 599px) {
  /* one compact chrome row: streak chip · counter · progress (never wraps) */
  .rapid-hud {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto;
    gap: var(--md-sys-measurement-space100);
    padding: var(--md-sys-measurement-space75) var(--md-sys-measurement-space150);
  }
  .rapid-hud > div:first-child {
    grid-column: 1;
    grid-row: 1;
    flex-wrap: nowrap;
  }
  .rapid-hud > div:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }
  .rapid-hud > div:last-child {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  /* the card CTA is the only action bar on phones */
  .rapid-hud > div:last-child .btn { display: none; }
}
@media (min-width: 768px) {
  .rapid-hud {
    grid-template-columns: auto minmax(120px, 1fr) auto;
    grid-template-rows: auto;
    padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
  }
  .rapid-hud > div:nth-child(2) { grid-column: auto; grid-row: auto; }
  .rapid-hud > div:last-child { grid-column: auto; grid-row: auto; }
  .rapid-hud .muted.small { display: inline; }
}

/* ---------------------------------------------------------------------------
   8. Session card + knowledge/test content
   --------------------------------------------------------------------------- */
.rapid-card {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space200);
  min-width: 0;
  padding: var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-top: 4px solid var(--md-sys-color-primary-container);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  box-shadow: none;
}
@media (min-width: 600px) {
  .rapid-card { padding: var(--md-sys-measurement-space300); gap: var(--md-sys-measurement-space250); }
}
@media (min-width: 1024px) {
  .rapid-card { padding: var(--md-sys-measurement-space400); }
}
.rapid-card > * { min-width: 0; }

.rapid-card-topic {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space75);
  flex-wrap: wrap;
  max-width: 100%;
  padding: 0 var(--md-sys-measurement-space150);
  min-height: var(--md-comp-chip-container-height);
  border-radius: var(--md-comp-chip-container-shape);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: 1.45;
  font-weight: var(--md-sys-typescale-label-large-weight);
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap: break-word;
}
.rapid-category-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space50);
  flex: 0 0 auto;
  min-height: var(--md-sys-measurement-space300);
  padding: 0 var(--md-sys-measurement-space100);
  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-medium-size);
  line-height: 1.4;
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
/* one calm neutral tone for every category */
.rapid-category-pill.math,
.rapid-category-pill.balance,
.rapid-category-pill.case,
.rapid-category-pill.law {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  border: 0;
}

.rapid-scenario-card {
  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);
  overflow-wrap: break-word;
}
html[data-theme="dark"] .rapid-scenario-card {
  background: var(--md-sys-color-surface-container);
}
.rapid-scenario-label {
  margin-bottom: var(--md-sys-measurement-space75);
  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);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}
.rapid-scenario-summary {
  padding: 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-container);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  overflow-wrap: break-word;
}
.rapid-scenario-summary b { color: var(--md-sys-color-on-surface); }
html[data-theme="dark"] .rapid-scenario-summary {
  background: var(--md-sys-color-surface-container-high);
}

.rapid-question-prompt {
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line);
  font-weight: var(--md-sys-typescale-weight-regular);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  overflow-wrap: break-word;
}

/* Hint — expandable list item (48dp trigger) */
.rapid-hint-details {
  padding: 0 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);
}
html[data-theme="dark"] .rapid-hint-details {
  background: var(--md-sys-color-surface-container);
}
.rapid-hint-details summary {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  min-height: var(--md-comp-target-size);
  padding: var(--md-sys-measurement-space100) 0;
  color: var(--md-sys-color-primary);
  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);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.rapid-hint-details summary::-webkit-details-marker { display: none; }
.rapid-hint-details summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: auto;
  margin-right: var(--md-sys-measurement-space25);
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}
.rapid-hint-details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.rapid-hint-details summary: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);
  border-radius: var(--md-sys-shape-corner-extra-small);
}
.rapid-hint-content {
  margin: 0 0 var(--md-sys-measurement-space150);
  padding-top: var(--md-sys-measurement-space100);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.65;
  overflow-wrap: break-word;
}
.rapid-card .btn-large {
  max-width: 100%;
  height: var(--md-comp-fab-container-height);
  min-height: var(--md-comp-fab-container-height);
  padding-block: var(--md-sys-measurement-space50);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  white-space: normal;
}

/* ---------------------------------------------------------------------------
   9. Micro-calculator (surface container + sliders + live result)
   --------------------------------------------------------------------------- */
.rapid-calc-widget {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space150);
  min-width: 0;
  padding: var(--md-sys-measurement-space150);
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
  box-shadow: none;
}
@media (min-width: 600px) {
  .rapid-calc-widget { padding: var(--md-sys-measurement-space200); }
}
.rapid-calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100) var(--md-sys-measurement-space150);
  flex-wrap: wrap;
}
.rapid-calc-title {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space75);
  min-width: 0;
  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);
  overflow-wrap: break-word;
}
.rapid-calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md-sys-measurement-space100);
}
@media (min-width: 600px) {
  .rapid-calc-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
.rapid-calc-field {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
/* The label row is an M3 outlined text-field container (56 dp): label on the
   start, live value on the end. The slider below it edits the value. */
.rapid-calc-field label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space50) var(--md-sys-measurement-space150);
  min-height: var(--md-comp-text-field-container-height);
  padding: var(--md-sys-measurement-space100) 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-variant);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
}
.rapid-calc-field label b {
  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);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* M3 expressive slider: 16 dp full-round track (active primary, inactive
   secondary-container), 4 × 44 dp full-round handle, 48 dp touch target. */
.rapid-calc-field input[type="range"] {
  width: 100%;
  max-width: 100%;
  height: var(--md-comp-target-size);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--md-sys-color-primary);
  -webkit-appearance: none;
  appearance: none;
}
.rapid-calc-field input[type="range"]::-webkit-slider-runnable-track {
  height: var(--md-comp-slider-track-thickness);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
}
.rapid-calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--md-comp-slider-handle-width);
  height: var(--md-comp-slider-handle-height);
  margin-top: calc((var(--md-comp-slider-track-thickness) - var(--md-comp-slider-handle-height)) / 2);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  box-shadow: none;
}
.rapid-calc-field input[type="range"]::-moz-range-track {
  height: var(--md-comp-slider-track-thickness);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
}
.rapid-calc-field input[type="range"]::-moz-range-progress {
  height: var(--md-comp-slider-track-thickness);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
}
.rapid-calc-field input[type="range"]::-moz-range-thumb {
  width: var(--md-comp-slider-handle-width);
  height: var(--md-comp-slider-handle-height);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  box-shadow: none;
}
.rapid-calc-field > div {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: 1.5;
}
.rapid-calc-output-box {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space50);
  min-width: 0;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.rapid-calc-out-label {
  color: inherit;
  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);
  letter-spacing: 0;
  text-transform: none;
}
.rapid-calc-out-val {
  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);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.rapid-calc-formula {
  max-width: 100%;
  margin-top: var(--md-sys-measurement-space75);
  padding-top: var(--md-sys-measurement-space100);
  border-top: 1px solid color-mix(in srgb,
        var(--md-sys-color-on-primary-container) 24%, transparent);
  color: inherit;
  overflow: hidden;
}
.rapid-calc-formula .katex-display { margin: var(--md-sys-measurement-space50) 0; }
.rapid-calc-formula .katex-display:first-child { margin-top: 0; }
.rapid-calc-formula .katex-display:last-child { margin-bottom: 0; }
/* A multi-term financial formula cannot fit a compact window; the live result
   value above already states the answer, so the strip is shown from tablet up. */
@media (max-width: 1023px) {
  .rapid-calc-formula { display: none; }
}

/* ---------------------------------------------------------------------------
   10. T-account (shared with exercises; scoped to the rapid card here)
   --------------------------------------------------------------------------- */
.rapid-card .t-account-card {
  min-width: 0;
  margin: 0;
  box-shadow: none;
  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);
  overflow: hidden;
}
.rapid-card .t-account-head {
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: 1.4;
  font-weight: var(--md-sys-typescale-title-small-weight);
  text-align: center;
  overflow-wrap: break-word;
}
.rapid-card .t-account-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.rapid-card .t-account-col {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
  min-width: 0;
  padding: var(--md-sys-measurement-space150);
}
.rapid-card .t-account-col.left { border-right: 1px solid var(--md-sys-color-outline-variant); }
.rapid-card .t-account-col-title {
  padding-bottom: var(--md-sys-measurement-space75);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: 1.45;
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  overflow-wrap: break-word;
}
.rapid-card .t-account-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--md-sys-measurement-space25);
  min-width: 0;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.45;
  overflow-wrap: break-word;
}
.rapid-card .t-account-item > span:first-child { min-width: 0; }
.rapid-card .t-account-item .val {
  flex-shrink: 0;
  color: var(--md-sys-color-on-surface);
  font-weight: var(--md-sys-typescale-weight-medium);
  font-variant-numeric: tabular-nums;
}
.rapid-card .t-account-total {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--md-sys-measurement-space25);
  margin-top: auto;
  padding-top: var(--md-sys-measurement-space100);
  border-top: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: 1.4;
  font-weight: var(--md-sys-typescale-label-large-weight);
}
.rapid-card .t-account-total .val { font-variant-numeric: tabular-nums; }
@media (min-width: 600px) {
  .rapid-card .t-account-col { padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space250); }
  .rapid-card .t-account-item {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--md-sys-measurement-space100);
    font-size: var(--md-sys-typescale-body-small-size);
  }
  .rapid-card .t-account-total {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--md-sys-measurement-space100);
  }
}

/* ---------------------------------------------------------------------------
   11. Answer options — M3 outlined list items with graded states
   --------------------------------------------------------------------------- */
.rapid-options-grid {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
}
.rapid-option-btn {
  position: relative;
  display: flex;
  transform: none;
  align-items: center;
  gap: var(--md-sys-measurement-space150);
  width: 100%;
  min-height: var(--md-comp-list-item-height);
  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-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  font-weight: var(--md-sys-typescale-weight-regular);
  text-align: left;
  overflow-wrap: break-word;
  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);
}
.rapid-option-btn:hover {
  transform: none;
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
}
.rapid-option-btn:active {
  transform: none;
  background: color-mix(in srgb, var(--md-sys-color-on-surface)
        calc(var(--md-sys-state-pressed-opacity) * 100%), transparent);
}
.rapid-option-btn: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);
}
.rapid-option-btn > span:last-child { min-width: 0; flex: 1 1 auto; }
.rapid-opt-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  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);
  line-height: 1;
  font-weight: var(--md-sys-typescale-label-large-weight);
}
/* Graded states (kept ready for in-place grading) — not colour-only: the
   badge is filled and the ✓/✗ marker can be added by the caller. */
.rapid-option-btn.selected {
  border-color: transparent;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.rapid-option-btn.selected .rapid-opt-badge {
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}
.rapid-option-btn.correct {
  border-color: transparent;
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}
.rapid-option-btn.correct .rapid-opt-badge {
  background: var(--md-sys-color-success);
  color: var(--md-sys-color-on-success);
}
.rapid-option-btn.wrong {
  border-color: transparent;
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.rapid-option-btn.wrong .rapid-opt-badge {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}
.rapid-card .btn-sm { min-height: var(--md-comp-button-container-height); }

/* ---------------------------------------------------------------------------
   12. Inline feedback + 4-layer breakdown
   --------------------------------------------------------------------------- */
.rapid-feedback-card {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space75);
  padding: var(--md-sys-measurement-space200);
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}
.rapid-feedback-card.good {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}
.rapid-feedback-card.bad {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.rapid-feedback-title {
  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);
}
.rapid-feedback-card small,
.rapid-feedback-card .statement-line small {
  color: inherit;
  opacity: 0.92;
}
.rapid-feedback-body {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.65;
  overflow-wrap: break-word;
}

.rapid-box-title {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space75);
  margin-bottom: var(--md-sys-measurement-space75);
  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);
  letter-spacing: 0;
  text-transform: none;
}
.rapid-step-box,
.rapid-trap-box,
.rapid-mnemonic-box {
  min-width: 0;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow-wrap: break-word;
}
.rapid-step-box {
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
html[data-theme="dark"] .rapid-step-box {
  background: var(--md-sys-color-surface-container);
}
.rapid-step-box .rapid-box-title { color: var(--md-sys-color-primary); }
.rapid-trap-box {
  border: 0;
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}
.rapid-trap-box .rapid-box-title { color: inherit; }
.rapid-mnemonic-box {
  border: 0;
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.rapid-mnemonic-box .rapid-box-title { color: inherit; }

/* ---------------------------------------------------------------------------
   13. Session bottom action bar (compact) — single bar, content reserved
   --------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .rapid-card > .pill-row:last-child {
    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));
    border-top: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 0;
    background: var(--md-sys-color-surface-container-low);
    box-shadow: none;
    gap: var(--md-sys-measurement-space100);
    flex-wrap: nowrap;
  }
  /* If the shell has not hidden the nav bar yet, sit directly above it. */
  body:not(.is-immersive) .rapid-card > .pill-row:last-child {
    bottom: calc(var(--layout-nav-bar-height) + var(--layout-safe-bottom));
  }
  .rapid-card > .pill-row:last-child .btn {
    flex: 1 1 auto;
    white-space: nowrap;
  }
  /* the HUD already exposes the calculator — drop the duplicate in the bar */
  .rapid-card > .pill-row:last-child .btn-secondary { display: none; }
  /* reserve the fixed bar height so no content is covered */
  .rapid-container {
    padding-bottom: calc(var(--md-comp-fab-container-height) +
          var(--md-sys-measurement-space400) + var(--layout-safe-bottom));
  }
  .rapid-card > .pill-row:last-child .btn-large { min-height: var(--md-comp-target-size); }
  .rapid-hud .desktop-inline { display: none; }
}

/* ---------------------------------------------------------------------------
   14. Summary
   --------------------------------------------------------------------------- */
.rapid-summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: none;
  gap: var(--md-sys-measurement-space100);
  padding: var(--md-sys-measurement-space300) 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);
  text-align: center;
}
@media (min-width: 600px) {
  .rapid-summary-card { padding: var(--md-sys-measurement-space400); }
}
.rapid-summary-emoji {
  font-size: var(--md-sys-typescale-display-small-size);
  line-height: 1;
}
#app .rapid-summary-card h1 {
  margin: 0;
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
}
.rapid-summary-lead {
  max-width: 60ch;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
}
.rapid-summary-card .stats-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--md-sys-measurement-space100);
  width: 100%;
  margin: var(--md-sys-measurement-space250) 0;
}
@media (min-width: 768px) {
  .rapid-summary-card .stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rapid-summary-card .stat-card {
  align-items: flex-start;
  text-align: left;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface-container-low);
}
.rapid-summary-card .stat-card strong {
  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);
  overflow-wrap: anywhere;
}
/* efficiency hero carries the module tonal accent */
.rapid-summary-card .stat-card:first-child {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.rapid-summary-card .stat-card:first-child strong,
.rapid-summary-card .stat-card:first-child span { color: inherit; }
.rapid-summary-card .stat-card:first-child strong {
  font-size: var(--md-sys-typescale-display-small-size);
  line-height: var(--md-sys-typescale-display-small-line);
}
.rapid-summary-card .pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--md-sys-measurement-space100);
  width: 100%;
}
.rapid-summary-card .pill-row .btn { min-height: var(--md-comp-target-size); }
@media (max-width: 599px) {
  .rapid-summary-card .pill-row { flex-direction: column; align-items: stretch; }
  .rapid-summary-card .pill-row .btn {
    width: 100%;
    height: auto;
    min-height: var(--md-comp-target-size);
    padding-block: var(--md-sys-measurement-space150);
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------------
   15. Layout helpers emitted by the rapid renderers
   (these replaced the previous inline flex / margin styles in app.js)
   --------------------------------------------------------------------------- */
.rapid-hud-row {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space150);
  flex-wrap: wrap;
  min-width: 0;
}
.rapid-hud-row--tight {
  gap: var(--md-sys-measurement-space100);
  justify-content: space-between;
}
.rapid-row-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100) var(--md-sys-measurement-space150);
  min-width: 0;
}
.rapid-row-split--top { align-items: flex-start; }
.rapid-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100);
  margin-top: var(--md-sys-measurement-space100);
}
.rapid-next-cta { flex: 1 1 auto; }
.rapid-section-title { margin-top: var(--md-sys-measurement-space300); }
.rapid-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  margin-top: var(--md-sys-measurement-space50);
}
.rapid-hint-row { margin-top: var(--md-sys-measurement-space100); }
.rapid-calc-note {
  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);
}
.rapid-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
}
.rapid-summary-stats { margin: var(--md-sys-measurement-space300) 0; }
.rapid-summary-actions { justify-content: center; }

/* Rapid config page head stays on the 960px measure; the long Polish eyebrow
   is toned down to label-large and the desktop measure is capped for prose. */
#app > .page-head:has(+ .rapid-config-grid) {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}
#app > .page-head:has(+ .rapid-config-grid) .eyebrow {
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  letter-spacing: 0;
  text-transform: none;
}
#app > .page-head:has(+ .rapid-config-grid) p {
  max-width: var(--layout-prose-max);
}

/* ---------------------------------------------------------------------------
   17. Narrow phones (≤359px)
   --------------------------------------------------------------------------- */
@media (max-width: 359px) {
  .rapid-config-grid > .card,
  .rapid-card,
  .rapid-summary-card { padding: var(--md-sys-measurement-space150); }
  .rapid-card .t-account-col { padding: var(--md-sys-measurement-space100); }
  .rapid-calc-widget { padding: var(--md-sys-measurement-space100); }
  .rapid-calc-output-box { padding: var(--md-sys-measurement-space100); }
  .rapid-question-prompt { font-size: var(--md-sys-typescale-title-medium-size); }
}

/* ---------------------------------------------------------------------------
   18. Print
   --------------------------------------------------------------------------- */
@media print {
  .rapid-hud,
  .rapid-start-row,
  .rapid-card > .pill-row:last-child { position: static; box-shadow: none; }
  .rapid-hud { border: 1px solid var(--md-sys-color-outline-variant); }
}

/* ==========================================================================
   Rapid Fire — UX overhaul (M3 Expressive): one clear flow, less noise.
   ========================================================================== */
.rapid-container { width: 100%; max-width: var(--layout-content-max); margin: 0 auto; }
.rapid-container .page-head { margin-bottom: var(--md-sys-measurement-space300); }
.rapid-container .page-head p { max-width: 72ch; }

/* --- config: single readable column, numbered steps --- */
.rapid-config-grid {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space250);
  max-width: 100%;
}
.rapid-config-grid > .card {
  padding: var(--md-sys-measurement-space300);
  border-radius: var(--md-comp-card-container-shape);
}
.rapid-section-title {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  margin: var(--md-sys-measurement-space400) 0 var(--md-sys-measurement-space150);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-weight-semibold);
}
.rapid-step-num {
  display: inline-grid;
  place-items: center;
  width: var(--md-sys-measurement-space300);
  height: var(--md-sys-measurement-space300);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-weight-bold);
  font-variant-numeric: tabular-nums;
}
.rapid-presets-label { margin-bottom: var(--md-sys-measurement-space100); 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); }
.rapid-presets-row { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space75); }
.preset-chip {
  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);
  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);
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.preset-chip:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.preset-chip.active { background: var(--md-sys-color-secondary-container); border-color: transparent; color: var(--md-sys-color-on-secondary-container); }

/* scope selector = M3 list of radio rows */
.rapid-scope-selector { display: flex; flex-direction: column; gap: var(--md-sys-measurement-space75); }
.rapid-scope-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--md-sys-measurement-space150);
  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: transparent;
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.rapid-scope-opt:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.rapid-scope-opt.active {
  border-color: transparent;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.rapid-scope-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rapid-scope-opt strong {
  display: block;
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  font-weight: var(--md-sys-typescale-weight-medium);
}
.rapid-scope-opt small {
  display: block;
  margin-top: var(--md-sys-measurement-space25);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  color: var(--md-sys-color-on-surface-variant);
}
.rapid-scope-opt.active small { color: var(--md-sys-color-on-secondary-container); }

/* collapsible mastery radar */
.rapid-mastery-details { margin-top: var(--md-sys-measurement-space200); }
.rapid-mastery-details > summary {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  min-height: var(--md-comp-target-size);
  padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space150);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  cursor: pointer;
  list-style: none;
  background: var(--md-sys-color-surface-container-low);
}
.rapid-mastery-details > summary::-webkit-details-marker { display: none; }
.rapid-mastery-summary-text { display: flex; flex-direction: column; }
.rapid-mastery-summary-text b { font-size: var(--md-sys-typescale-body-medium-size); color: var(--md-sys-color-on-surface); }
.rapid-mastery-summary-text span { font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
.rapid-mastery-body { margin-top: var(--md-sys-measurement-space100); }
.mastery-matrix-header { display: flex; flex-direction: column; gap: var(--md-sys-measurement-space75); margin-bottom: var(--md-sys-measurement-space100); }
.mastery-matrix-stats { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space75); }
.mastery-stat-pill { display: inline-flex; align-items: center; gap: var(--md-sys-measurement-space50); min-height: var(--md-sys-measurement-space300); padding: 0 var(--md-sys-measurement-space100); 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-small-size); }
.mastery-matrix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--md-sys-measurement-space50); }
.mastery-chip { display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: var(--md-sys-measurement-space75) var(--md-sys-measurement-space100); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); background: transparent; text-align: left; cursor: pointer; }
.mastery-chip.selected { border-color: transparent; background: var(--md-sys-color-secondary-container); }
.mastery-chip-main { display: flex; align-items: center; gap: var(--md-sys-measurement-space75); }
.mastery-chip-title { font-size: var(--md-sys-typescale-body-small-size); line-height: 1.35; color: var(--md-sys-color-on-surface); }
.mastery-chip-status { font-size: var(--md-sys-typescale-label-small-size); color: var(--md-sys-color-on-surface-variant); padding-left: var(--md-sys-measurement-space200); }
.mastery-chip.selected .mastery-chip-status { color: var(--md-sys-color-on-secondary-container); }

/* topic picker */
.rapid-topic-toolbar { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space100); margin-bottom: var(--md-sys-measurement-space100); }
.rapid-topic-toolbar .form-input { flex: 1 1 260px; }
.rapid-toolbar-row { flex: 0 0 auto; }
.rapid-topics-box {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  padding: var(--md-sys-measurement-space50);
}
.rapid-topic-group-title { padding: var(--md-sys-measurement-space100); color: var(--md-sys-color-primary); font-size: var(--md-sys-typescale-label-large-size); font-weight: var(--md-sys-typescale-label-large-weight); }
.rapid-topic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100);
  min-height: var(--md-comp-list-item-height);
  padding: var(--md-sys-measurement-space50) var(--md-sys-measurement-space100);
  border-radius: var(--md-sys-shape-corner-small);
}
.rapid-topic-row:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.rapid-topic-row.selected { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.rapid-topic-row label { display: flex; align-items: center; gap: var(--md-sys-measurement-space100); flex: 1 1 auto; min-height: var(--md-comp-target-size); cursor: pointer; font-size: var(--md-sys-typescale-body-medium-size); }
.rapid-topic-badge { flex: 0 0 auto; padding: 0 var(--md-sys-measurement-space100); min-height: var(--md-sys-measurement-space300); display: inline-flex; align-items: center; 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-small-size); white-space: nowrap; }
.rapid-topic-row.selected .rapid-topic-badge { background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); color: var(--md-sys-color-on-secondary-container); }
.rapid-hint-row { margin: var(--md-sys-measurement-space150) 0; }

/* sprint length + sticky start */
.rapid-len-selector { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space100); }
.rapid-len-selector .btn { flex: 1 1 auto; }
.rapid-start-row {
  position: sticky;
  bottom: var(--md-sys-measurement-space150);
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-measurement-space150);
  margin-top: var(--md-sys-measurement-space300);
  padding: var(--md-sys-measurement-space150);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container);
}
.rapid-start-row .btn-large { flex: 1 1 320px; }
.rapid-config-warning { flex: 1 1 100%; color: var(--md-sys-color-error); font-size: var(--md-sys-typescale-body-small-size); }
.rapid-why-details > summary { cursor: pointer; font-size: var(--md-sys-typescale-title-small-size); font-weight: var(--md-sys-typescale-weight-medium); list-style: none; min-height: var(--md-comp-target-size); display: flex; align-items: center; }
.rapid-why-details > summary::-webkit-details-marker { display: none; }
.rapid-why-details .rapid-checklist { margin-top: var(--md-sys-measurement-space100); }

/* --- session: compact HUD, single statement, clear options --- */
.rapid-hud {
  position: sticky;
  top: calc(var(--layout-topbar-height) + var(--md-sys-measurement-space50));
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space75);
  margin-bottom: var(--md-sys-measurement-space200);
  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-large);
  background: var(--md-sys-color-surface-container);
}
.rapid-hud-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--md-sys-measurement-space100); }
.rapid-streak-badge { display: inline-flex; align-items: center; min-height: var(--md-sys-measurement-space300); padding: 0 var(--md-sys-measurement-space100); border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); font-size: var(--md-sys-typescale-label-large-size); font-weight: var(--md-sys-typescale-label-large-weight); font-variant-numeric: tabular-nums; }
.rapid-hud-counter { font-size: var(--md-sys-typescale-label-large-size); font-weight: var(--md-sys-typescale-label-large-weight); color: var(--md-sys-color-on-surface); }
.rapid-m3-progress { display: block; width: 100%; }
.rapid-progress-bar, .rapid-progress-fill { display: none; }
.rapid-container .rapid-card {
  max-width: 920px;
  margin: 0 auto;
  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;
}
.rapid-row-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--md-sys-measurement-space100); }
.rapid-card-topic { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-measurement-space50); 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); }
.rapid-category-pill { display: inline-flex; align-items: center; min-height: var(--md-sys-measurement-space300); padding: 0 var(--md-sys-measurement-space100); 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-small-size); }
.rapid-scenario-card {
  margin: var(--md-sys-measurement-space150) 0;
  padding: var(--md-sys-measurement-space200);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-prose-line);
}
.rapid-scenario-label { margin-bottom: var(--md-sys-measurement-space75); color: var(--md-sys-color-primary); font-size: var(--md-sys-typescale-label-large-size); font-weight: var(--md-sys-typescale-label-large-weight); }
.rapid-question-prompt { margin: var(--md-sys-measurement-space150) 0; font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line); font-weight: var(--md-sys-typescale-weight-medium); }
.rapid-hint-details { margin: var(--md-sys-measurement-space100) 0; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); }
.rapid-hint-details > summary { display: flex; align-items: center; min-height: var(--md-comp-target-size); padding: 0 var(--md-sys-measurement-space150); cursor: pointer; font-size: var(--md-sys-typescale-label-large-size); color: var(--md-sys-color-primary); list-style: none; }
.rapid-hint-details > summary::-webkit-details-marker { display: none; }
.rapid-hint-content { padding: var(--md-sys-measurement-space150); border-top: 1px solid var(--md-sys-color-outline-variant); font-size: var(--md-sys-typescale-body-medium-size); line-height: 1.65; }
.rapid-tools { margin: var(--md-sys-measurement-space150) 0; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-lowest); }
.rapid-tools > summary { display: flex; align-items: center; min-height: var(--md-comp-target-size); padding: 0 var(--md-sys-measurement-space150); cursor: pointer; font-size: var(--md-sys-typescale-label-large-size); color: var(--md-sys-color-primary); list-style: none; }
.rapid-tools > summary::-webkit-details-marker { display: none; }
.rapid-tools-body { padding: var(--md-sys-measurement-space150); border-top: 1px solid var(--md-sys-color-outline-variant); }
.rapid-options-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--md-sys-measurement-space100); margin: var(--md-sys-measurement-space150) 0; }
.rapid-option-btn { display: flex; align-items: center; gap: var(--md-sys-measurement-space150); width: 100%; min-height: 64px; 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); }
.rapid-option-btn:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.rapid-option-btn.selected, .rapid-option-btn[aria-pressed="true"] { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.rapid-opt-badge { 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); }
.rapid-feedback-card { margin: var(--md-sys-measurement-space150) 0; padding: var(--md-sys-measurement-space200); border-radius: var(--md-sys-shape-corner-medium); }
.rapid-feedback-card.good { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.rapid-feedback-card.bad { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.rapid-feedback-title { font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line); font-weight: var(--md-sys-typescale-weight-semibold); margin-bottom: var(--md-sys-measurement-space50); }
.rapid-actions-sticky { position: sticky; bottom: var(--md-sys-measurement-space150); z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--md-sys-measurement-space150); margin-top: var(--md-sys-measurement-space250); padding: var(--md-sys-measurement-space150); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container); }
.rapid-actions-hint { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-small-size); }
.rapid-actions-sticky .btn-large { flex: 1 1 260px; }
@media (max-width: 639px) {
  .rapid-container .rapid-card { padding: var(--md-sys-measurement-space200); }
  .rapid-config-grid > .card { padding: var(--md-sys-measurement-space200); }
  .mastery-matrix-grid { grid-template-columns: minmax(0, 1fr); }
  .rapid-hud { top: var(--layout-topbar-height); }
}

/* --- follow-up fixes: start row stays in flow; HUD rows read left-to-right --- */
.rapid-start-row {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.rapid-container .rapid-start-row .btn-primary {
  width: auto;
  height: auto;
  min-height: var(--md-comp-button-container-height);
  flex: 1 1 320px;
  padding: 0 var(--md-sys-measurement-space300);
}
.rapid-hud-row { justify-content: flex-start; gap: var(--md-sys-measurement-space150); }
.rapid-hud-row--tight { justify-content: space-between; }
.rapid-hud-row--tight .btn { min-height: var(--md-sys-measurement-space400); padding-inline: var(--md-sys-measurement-space150); font-size: var(--md-sys-typescale-label-large-size); }

/* Mobile HUD: keep exit/calculator actions visible and lay rows left-to-right. */
.rapid-container .rapid-hud {
  display: flex;
  flex-direction: column;
}
.rapid-container .rapid-hud .rapid-hud-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--md-sys-measurement-space100);
}
.rapid-container .rapid-hud .rapid-hud-row--tight {
  justify-content: space-between;
}
.rapid-container .rapid-hud .rapid-hud-row > .btn { flex: 0 0 auto; }
@media (max-width: 899px) {
  .rapid-container .rapid-hud .rapid-hud-row--tight .btn { display: inline-flex; }
}

/* Topic search keeps the M3 text-field geometry (never stretched by flex). */
.rapid-container .rapid-topic-toolbar {
  flex-direction: row;
  align-items: stretch;
}
.rapid-container .rapid-topic-toolbar .form-input {
  flex: 1 1 260px;
  min-width: 0;
  height: var(--md-comp-text-field-container-height);
  min-height: var(--md-comp-text-field-container-height);
}

/* Config view is not wrapped in .rapid-container — scope the field fix here. */
.rapid-config-grid .rapid-topic-toolbar {
  flex-direction: row;
  align-items: stretch;
}
.rapid-config-grid .rapid-topic-toolbar .form-input {
  flex: 1 1 260px;
  min-width: 0;
  height: var(--md-comp-text-field-container-height);
  min-height: var(--md-comp-text-field-container-height);
}

/* ==========================================================================
   Rapid Fire — embedded tools overhaul: M3 microcalculator, T-account,
   feedback blocks and a compact one-line HUD. These widgets are what the
   session actually renders as "the generator", so they must read as M3.
   ========================================================================== */
.rapid-container .rapid-hud {
  position: sticky;
  top: calc(var(--layout-topbar-height) + var(--md-sys-measurement-space50));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  padding: var(--md-sys-measurement-space100) 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-container);
}
.rapid-container .rapid-hud-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
}
.rapid-container .rapid-hud-actions {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space25);
  margin-left: auto;
}
.rapid-container .rapid-hud-actions .btn-text {
  min-height: var(--md-sys-measurement-space400);
}
.rapid-container .rapid-m3-progress {
  flex: 1 1 100%;
  order: 3;
  display: block;
  width: 100%;
}
.rapid-container .rapid-streak-badge { min-height: var(--md-sys-measurement-space400); }
.rapid-container .rapid-hud-counter {
  padding: 0 var(--md-sys-measurement-space100);
  min-height: var(--md-sys-measurement-space400);
  display: inline-flex;
  align-items: center;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-label-large-size);
  font-variant-numeric: tabular-nums;
}

/* topic strip + context */
.rapid-container .rapid-card-topic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-measurement-space75);
  padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space150);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
  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);
}
.rapid-container .rapid-scenario-summary {
  margin: var(--md-sys-measurement-space100) 0;
  padding: var(--md-sys-measurement-space150);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  color: var(--md-sys-color-on-surface-variant);
}

/* --- microcalculator --- */
.rapid-container .rapid-calc-widget {
  margin: var(--md-sys-measurement-space150) 0;
  padding: 0;
  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;
  box-shadow: none;
}
.rapid-container .rapid-calc-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100);
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.rapid-container .rapid-calc-title {
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line);
  font-weight: var(--md-sys-typescale-weight-semibold);
  color: var(--md-sys-color-on-surface);
}
.rapid-container .rapid-calc-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--md-sys-measurement-space300);
  padding: 0 var(--md-sys-measurement-space100);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  white-space: nowrap;
}
.rapid-container .rapid-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--md-sys-measurement-space150);
  padding: var(--md-sys-measurement-space200);
}
.rapid-container .rapid-calc-field {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
  min-width: 0;
  padding: 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);
}
.rapid-container .rapid-calc-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100);
  margin: 0;
  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);
  color: var(--md-sys-color-on-surface-variant);
}
.rapid-container .rapid-calc-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rapid-container .rapid-calc-field label { flex-wrap: nowrap; }
.rapid-container .rapid-calc-field label b {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--md-sys-measurement-space400);
  padding: 0 var(--md-sys-measurement-space100);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rapid-container .rapid-calc-field input[type="range"] {
  width: 100%;
  height: 44px;
  margin: 0;
  accent-color: var(--md-sys-color-primary);
  cursor: pointer;
}
.rapid-container .rapid-calc-output-box {
  margin: 0 var(--md-sys-measurement-space200) var(--md-sys-measurement-space200);
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
}
.rapid-container .rapid-calc-out-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);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--md-sys-measurement-space50);
}
.rapid-container .rapid-calc-out-val {
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-weight-semibold);
  color: var(--md-sys-color-primary);
  font-variant-numeric: tabular-nums;
}
.rapid-container .rapid-calc-formula {
  margin-top: var(--md-sys-measurement-space100);
  padding-top: var(--md-sys-measurement-space100);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.7;
  color: var(--md-sys-color-on-surface);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.rapid-container .rapid-calc-formula .katex-display { margin: var(--md-sys-measurement-space50) 0; }
.rapid-container .rapid-calc-formula .katex { font-size: 1em; }

/* --- T-account visualisation --- */
.rapid-container .t-account-card {
  margin: var(--md-sys-measurement-space150) 0;
  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;
}
.rapid-container .t-account-head {
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line);
  font-weight: var(--md-sys-typescale-weight-semibold);
  color: var(--md-sys-color-on-surface);
}
.rapid-container .t-account-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.rapid-container .t-account-col { min-width: 0; padding: var(--md-sys-measurement-space200); }
.rapid-container .t-account-col + .t-account-col { border-left: 1px solid var(--md-sys-color-outline-variant); }
.rapid-container .t-account-col-title {
  margin-bottom: var(--md-sys-measurement-space100);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-weight-semibold);
  color: var(--md-sys-color-primary);
}
.rapid-container .t-account-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100);
  padding: var(--md-sys-measurement-space100) 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
}
.rapid-container .t-account-item .val {
  flex: 0 0 auto;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
}
.rapid-container .t-account-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100);
  margin-top: var(--md-sys-measurement-space100);
  padding: var(--md-sys-measurement-space100) 0 0;
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-weight-semibold);
  color: var(--md-sys-color-on-surface);
}
@media (max-width: 639px) {
  .rapid-container .t-account-body { grid-template-columns: minmax(0, 1fr); }
  .rapid-container .t-account-col + .t-account-col {
    border-left: 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
  }
  .rapid-container .rapid-calc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- feedback blocks (step / trap / mnemonic) --- */
.rapid-container :is(.rapid-step-box, .rapid-trap-box, .rapid-mnemonic-box) {
  margin: var(--md-sys-measurement-space150) 0;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.7;
}
.rapid-container .rapid-step-box { background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); }
.rapid-container .rapid-trap-box { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.rapid-container .rapid-mnemonic-box { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.rapid-container :is(.rapid-step-box, .rapid-trap-box, .rapid-mnemonic-box) .rapid-box-title {
  margin-bottom: var(--md-sys-measurement-space75);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-weight-semibold);
}
.rapid-container .rapid-feedback-card { padding: var(--md-sys-measurement-space200); }
.rapid-container .rapid-feedback-title {
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line);
  font-weight: var(--md-sys-typescale-weight-semibold);
  margin-bottom: var(--md-sys-measurement-space75);
}
.rapid-container .rapid-feedback-note {
  display: inline-block;
  margin-top: var(--md-sys-measurement-space75);
  font-size: var(--md-sys-typescale-body-small-size);
}
.rapid-container .rapid-feedback-body { font-size: var(--md-sys-typescale-body-medium-size); line-height: 1.7; }

/* ==========================================================================
   Rapid Fire — refactored setup screen (simple 2–3 step choice, M3 components)
   ========================================================================== */
.rapid-setup { max-width: 980px; margin: 0 auto; }
.rapid-setup .page-head { margin-bottom: var(--md-sys-measurement-space300); }
.rapid-setup .page-head p { max-width: 66ch; }
.rapid-setup-card {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space300);
  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);
}
.rapid-setup-section { display: flex; flex-direction: column; gap: var(--md-sys-measurement-space150); }
.rapid-setup-title {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  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-weight-semibold);
  color: var(--md-sys-color-on-surface);
}
.rapid-setup .rapid-step-num {
  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-primary);
  color: var(--md-sys-color-on-primary);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-weight-bold);
  font-variant-numeric: tabular-nums;
}
.rapid-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--md-sys-measurement-space100);
}
.rapid-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--md-sys-measurement-space125);
  min-height: 84px;
  margin: 0;
  padding: 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);
  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);
}
.rapid-choice:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.rapid-choice.is-selected {
  border-color: transparent;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.rapid-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rapid-choice-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--md-sys-measurement-space250);
  height: var(--md-sys-measurement-space250);
  margin-top: 2px;
  border-radius: var(--md-sys-shape-corner-full);
  border: 2px solid var(--md-sys-color-on-surface-variant);
}
.rapid-choice.is-selected .rapid-choice-mark { border-color: var(--md-sys-color-primary); }
.rapid-choice.is-selected .rapid-choice-mark::after {
  content: "";
  width: var(--md-sys-measurement-space125);
  height: var(--md-sys-measurement-space125);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
}
.rapid-choice-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rapid-choice-title {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  font-weight: var(--md-sys-typescale-weight-medium);
  color: var(--md-sys-color-on-surface);
  overflow-wrap: anywhere;
}
.rapid-choice.is-selected .rapid-choice-title { color: var(--md-sys-color-on-secondary-container); }
.rapid-choice-desc {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  color: var(--md-sys-color-on-surface-variant);
}
.rapid-choice.is-selected .rapid-choice-desc { color: var(--md-sys-color-on-secondary-container); }
.rapid-choice-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--md-sys-measurement-space300);
  padding: 0 var(--md-sys-measurement-space75);
  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-small-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  white-space: nowrap;
}
.rapid-choice.is-selected .rapid-choice-badge {
  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 14%, transparent);
  color: var(--md-sys-color-on-secondary-container);
}
.rapid-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-measurement-space100); }
.rapid-filter-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);
  color: var(--md-sys-color-on-surface-variant);
}
.rapid-chip-row { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space75); }

/* connected M3 segmented control for sprint length */
.rapid-len-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 720px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
  background: var(--md-sys-color-surface);
}
.rapid-len-segmented button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--md-sys-measurement-space75) var(--md-sys-measurement-space150);
  border: 0;
  border-left: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  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);
  cursor: pointer;
}
.rapid-len-segmented button:first-child { border-left: 0; }
.rapid-len-segmented button small {
  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);
  color: var(--md-sys-color-on-surface-variant);
}
.rapid-len-segmented button.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.rapid-len-segmented button.active small { color: var(--md-sys-color-on-secondary-container); }

/* question-type chip counts */
.rapid-chip-count {
  display: inline-grid;
  place-items: center;
  min-width: var(--md-sys-measurement-space250);
  height: var(--md-sys-measurement-space250);
  padding: 0 4px;
  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-small-size);
  font-variant-numeric: tabular-nums;
}
.preset-chip.active .rapid-chip-count {
  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 14%, transparent);
  color: var(--md-sys-color-on-secondary-container);
}
.preset-chip:disabled {
  opacity: var(--md-sys-state-disabled-opacity);
  cursor: default;
}
.preset-chip:disabled:hover { background: transparent; }

/* start bar inside the refactored setup */
.rapid-setup .rapid-start-row {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space200);
  margin-top: 0;
  padding: var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container);
}
.rapid-setup .rapid-start-summary { display: flex; flex-direction: column; gap: 2px; }
.rapid-setup .rapid-start-summary b {
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line);
  font-weight: var(--md-sys-typescale-weight-semibold);
  color: var(--md-sys-color-on-surface);
  font-variant-numeric: tabular-nums;
}
.rapid-setup .rapid-start-summary span {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  color: var(--md-sys-color-on-surface-variant);
}
.rapid-setup .rapid-start-row .btn { flex: 0 0 auto; }
.rapid-setup .rapid-start-row .btn-large {
  height: var(--md-comp-fab-container-height);
  min-height: 0;
}
.rapid-setup .rapid-start-row .btn-large:active { border-radius: var(--md-sys-shape-corner-medium); }
.rapid-setup .rapid-config-warning { margin-top: calc(-1 * var(--md-sys-measurement-space150)); }

/* optional custom chapter picker inside the new setup */
.rapid-setup .rapid-topic-toolbar { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.rapid-setup .rapid-topic-toolbar .form-input {
  flex: 1 1 260px;
  min-width: 0;
  height: var(--md-comp-text-field-container-height);
  min-height: var(--md-comp-text-field-container-height);
}

/* advanced info collapsed at the bottom */
.rapid-advanced-details {
  margin-top: 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-container-low);
}
.rapid-advanced-details > summary {
  display: flex;
  align-items: center;
  min-height: var(--md-comp-target-size);
  padding: 0 var(--md-sys-measurement-space200);
  cursor: pointer;
  list-style: none;
  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);
}
.rapid-advanced-details > summary::-webkit-details-marker { display: none; }
.rapid-advanced-body { padding: 0 var(--md-sys-measurement-space200) var(--md-sys-measurement-space200); }
.rapid-advanced-body .rapid-checklist { margin: 0; padding-left: 1.3em; }
.rapid-advanced-body .rapid-checklist li + li { margin-top: var(--md-sys-measurement-space75); }

@media (max-width: 639px) {
  .rapid-setup-card { padding: var(--md-sys-measurement-space200); gap: var(--md-sys-measurement-space250); }
  .rapid-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .rapid-len-segmented { grid-template-columns: minmax(0, 1fr); border-radius: var(--md-sys-shape-corner-medium); }
  .rapid-len-segmented button { border-left: 0; border-top: 1px solid var(--md-sys-color-outline); }
  .rapid-len-segmented button:first-child { border-top: 0; }
  .rapid-setup .rapid-start-row .btn { flex: 1 1 100%; }
  .rapid-setup .rapid-start-row { justify-content: center; text-align: center; }
  .rapid-choice-badge { display: none; }
}