/* ============================================================================
   exercises — Material Design 3 layer for the exercises view family
   Scope (owned by exercises-fixer):
     • exercise header tabs (.mode-tabs / [data-ex-tab] / .zb-subtabs)
     • generator rail + content card (.exercise-layout / .exercise-list /
       .exercise-card / .exercise-head / .article-footer)
     • task statement data cells, formula hint, calculated fields, score banners
     • classifier tab (.classifier-* / .cat-pill*)
     • cloze tab (.cloze-* / .cloze-select)
     • Hero trainer (.hero-* + .t-account-*): shells, module chips, stepper,
       answer fields, choice buttons, financial tables, chart figures
     • Zbiory zadań — test abcd + open questions (.zb-*)

   Shared component anatomy (buttons, cards, text fields, tabs, chips, lists,
   progress, statement cards, chart cards) lives in css/components.css and
   css/base.css — this file only adds the exercises-specific layering.

   Every value comes from css/tokens.css (transcribed from
   spec/generated/SPEC_CHEATSHEET.md + spec/generated/components/*.md):
     • tabs     — primary-navigation-tab: 48dp container, 3dp primary indicator,
                  divider 1dp surface-variant, title-small label
     • chips    — filter-chip: 32dp container, 8dp corner, 1dp outline-variant,
                  selected = secondary-container + on-secondary-container
     • fields   — outlined text field: 56dp, 4dp corner, 1dp outline, 2dp primary
                  focus, body-large input text, body-small supporting text
     • cards    — corner medium (12dp), outlined = surface + 1dp outline-variant
     • lists    — container 16dp corner, two-line item 72dp, selected 16dp
                  secondary-container
     • divider  — 1dp outline-variant; targets ≥ 48dp; focus indicator =
                  secondary 3px / 2px offset (tabs use the inner −3dp offset)
   ========================================================================== */

/* ============================================================================
   1. Tabs — exercises header (components.css owns the base primary-tab anatomy,
      scrolling + edge fade). Scope additions: spec snap targets, the tabs focus
      indicator inner offset and the active-tab state layers.
   ========================================================================== */
/* Components already provide `scroll-snap-align: start`; keep the snap port
   aligned with the 16dp tab inline padding so labels never sit half-cut.
   The legacy @layer sheet still ships padding/overflow/margins for this class;
   declare the layout properties here so the layered rules cannot inject space
   (they DO win for properties no unlayered rule declares). */
.mode-tabs {
  scroll-padding-inline: var(--md-sys-measurement-space200);
  margin-bottom: var(--md-sys-measurement-space250);
  padding: 0;
  overflow-y: hidden;
  /* Keep a visible overflow affordance: fade the trailing/leading edge so the
     next tab is obviously reachable (spec §6 / tabs.md "scrollable tabs"). */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    var(--md-sys-color-scrim) var(--md-sys-measurement-space300),
    var(--md-sys-color-scrim) calc(100% - var(--md-sys-measurement-space300)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    var(--md-sys-color-scrim) var(--md-sys-measurement-space300),
    var(--md-sys-color-scrim) calc(100% - var(--md-sys-measurement-space300)),
    transparent 100%
  );
}

/* spec/components/tabs.md: primary-navigation-tab.focus.indicator.outline.offset
   = -3dp (inner offset) — the only component that uses the inner focus ring. */
.mode-tab:focus-visible {
  outline-offset: var(--md-sys-state-focus-indicator-inner-offset);
}

/* spec/components/tabs.md: active hover layer = primary 8 %, active pressed =
   primary 10 % (inactive hover uses on-surface, provided by components.css). */
@media (hover: hover) {
  .mode-tab.active:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
    color: var(--md-sys-color-primary);
  }
}
.mode-tab:active {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
}
.mode-tab.active:active {
  color: var(--md-sys-color-primary);
}

/* Zbiory zadań sub-navigation re-uses the tab rail as M3 *secondary* tabs:
   48dp, 2dp `primary` indicator, active label `on-surface`
   (spec md.comp.secondary-navigation-tab). */
.zb-subtabs {
  margin-bottom: var(--md-sys-measurement-space150);
  border-bottom-color: var(--md-sys-color-outline-variant);
}
.zb-subtabs .mode-tab::after {
  height: 2px;
  border-radius: 0;
}
.zb-subtabs .mode-tab.active {
  color: var(--md-sys-color-on-surface);
}

/* ============================================================================
   2. Generator / classifier rail + content card
   M3 lists: container corner 16dp, two-line item height 72dp, label body-large,
   selected container secondary-container with 16dp corner (spec lists.md).
   ========================================================================== */
.exercise-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--md-sys-measurement-space200);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.exercise-list {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space25);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 var(--md-sys-measurement-space50);
  padding: var(--md-sys-measurement-space100);
  background: var(--md-sys-color-surface);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  /* base (compact/medium/narrow-expanded): vertical list, no sticky */
  position: static;
  top: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-height: calc(var(--md-sys-measurement-space600) * 5);
}

.exercise-list button {
  display: block;
  width: 100%;
  min-height: calc(var(--md-comp-list-item-height) + var(--md-sys-measurement-space200));
  margin: 0;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border: 0;
  border-radius: var(--md-comp-card-container-shape);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  text-align: left;
  font-family: var(--md-ref-typeface-plain);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
/* M3 list label: body-large regular; supporting text body-small. */
.exercise-list button b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  font-weight: var(--md-sys-typescale-body-large-weight);
  overflow-wrap: break-word;
}
.exercise-list button small {
  display: block;
  margin-top: var(--md-sys-measurement-space25);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) {
  .exercise-list button:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  }
}
.exercise-list button:active {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
/* Rail items must never shrink: a constrained max-height would otherwise
   compress the flex children and stack their text on top of each other. */
.exercise-list > button,
.exercise-list > .ex-group-label {
  flex-shrink: 0;
}

.exercise-list button.active,
.exercise-list button.active:hover {
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.exercise-list button.active small {
  color: var(--md-sys-color-on-secondary-container);
}

/* List group headers (chapter sections) — label role, inset divider. */
.exercise-list .ex-group-label {
  margin: var(--md-sys-measurement-space100) var(--md-sys-measurement-space100) 0;
  padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space100) var(--md-sys-measurement-space50);
  border-top: var(--md-comp-divider-thickness) 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: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: var(--md-sys-typescale-label-medium-weight);
}
.exercise-list .ex-group-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* --- exercise content card: M3 outlined card (12dp corner) ---------------- */
.exercise-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  color: var(--md-sys-color-on-surface);
}
/* The cloze tab renders a single card directly under the tab bar. */
#app > .exercise-card {
  max-width: var(--layout-content-max);
  margin-inline: auto;
}

@media (min-width: 600px) {
  .exercise-card {
    padding: var(--md-sys-measurement-space300);
  }
}
/* Compact → narrow expanded: the generator list becomes a horizontal chip rail
   above the task card, so the task itself is immediately reachable (and the
   side rail only appears once the content column can carry it). */
@media (max-width: 1199px) {
  .exercise-list {
    flex-direction: row;
    align-items: stretch;
    gap: var(--md-sys-measurement-space100);
    max-height: none;
    padding: var(--md-sys-measurement-space100);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--md-sys-measurement-space100);
    /* Visible affordance for the horizontal rail (spec §6). */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      var(--md-sys-color-scrim) var(--md-sys-measurement-space200),
      var(--md-sys-color-scrim) calc(100% - var(--md-sys-measurement-space200)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      var(--md-sys-color-scrim) var(--md-sys-measurement-space200),
      var(--md-sys-color-scrim) calc(100% - var(--md-sys-measurement-space200)),
      transparent 100%
    );
  }
  .exercise-list button {
    flex: 0 0 auto;
    width: 240px;
    min-height: 72px;
    scroll-snap-align: start;
  }
  /* Group subheaders would break the rail; each card keeps the chapter subtitle. */
  .exercise-list .ex-group-label {
    display: none;
  }
}
/* Phones: the generator selector is a single-column M3 list again — full-width
   rows and 2-line titles read clearly and are unambiguous tap targets. The
   horizontal snap rail is kept for 600–1199px where a full-width list would be
   too wide. */
@media (max-width: 599px) {
  .exercise-list {
    flex-direction: column;
    align-items: stretch;
    max-height: calc(var(--md-sys-measurement-space900) * 4 + var(--md-sys-measurement-space200));
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
    padding: var(--md-sys-measurement-space100);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .exercise-list button {
    width: 100%;
    min-height: calc(var(--md-comp-list-item-height) + var(--md-sys-measurement-space200));
    scroll-snap-align: none;
  }
  .exercise-list .ex-group-label {
    display: block;
  }
}

@media (min-width: 1200px) {
  .exercise-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--md-sys-measurement-space300);
  }
  .exercise-list {
    flex: 0 0 248px;
    width: 248px;
    position: sticky;
    top: calc(var(--layout-topbar-height) + var(--md-sys-measurement-space200));
    max-height: calc(100dvh - var(--layout-topbar-height) - var(--md-sys-measurement-space600));
    margin-bottom: 0;
  }
  .exercise-card {
    flex: 1 1 auto;
    min-width: 0;
  }
}
@media (min-width: 1440px) {
  .exercise-list {
    flex-basis: 272px;
    width: 272px;
  }
}

/* --- action hierarchy ---------------------------------------------------- */
/* app.js labels every secondary action .btn-secondary. Rendering them all as
   tonal containers would put 4–5 filled pills next to the single filled
   primary action, so secondaries use the M3 outlined pairing here; .btn-soft
   stays tonal (it marks the selected data-source toggle). */
.exercise-card .btn-secondary,
.hero-trainer-wrap .btn-secondary,
.zb-test-wrap .btn-secondary {
  background: transparent;
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-primary);
}
/* On a tonal feedback surface the secondary action becomes a text button. */
.score-banner .btn-secondary {
  border-color: transparent;
  background: transparent;
  color: inherit;
}

/* --- exercise head -------------------------------------------------------- */
.exercise-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space200);
  padding-bottom: var(--md-sys-measurement-space200);
  margin-bottom: var(--md-sys-measurement-space250);
  border-bottom: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
}
.exercise-head > div:first-child {
  flex: 1 1 320px;
  min-width: 0;
}
.exercise-head p {
  margin: var(--md-sys-measurement-space75) 0 0;
  max-width: var(--layout-prose-max);
  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);
}
.exercise-head .pill-row {
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: var(--md-sys-measurement-space100);
}

/* --- footer action row ---------------------------------------------------- */
.exercise-card .article-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  margin-top: var(--md-sys-measurement-space250);
  padding-top: var(--md-sys-measurement-space200);
  border-top: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
}
.exercise-card .article-footer .pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
}
.exercise-card .article-footer .muted.small {
  flex: 1 1 100%;
  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);
}

/* Phones: stack the footer actions — one full-width primary action. */
@media (max-width: 599px) {
  .exercise-card .article-footer .pill-row,
  .hero-task-card > .pill-row {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .exercise-card .article-footer .btn,
  .hero-task-card > .pill-row .btn {
    width: 100%;
  }
  /* Header utilities: 2×2 grid instead of four stacked rows. */
  .exercise-head .pill-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--md-sys-measurement-space100);
    width: 100%;
  }
  .exercise-head .pill-row .btn {
    width: 100%;
  }
}

/* ============================================================================
   3. Task statement data display (key/value cells).
   Not an M3 component — tonal container + body-small label / title-medium value
   is the closest valid pairing (noted in reports/exercises.md).
   ========================================================================== */
.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--md-sys-measurement-space150);
  margin: var(--md-sys-measurement-space150) 0 var(--md-sys-measurement-space200);
}
.hero-task-card .data-grid {
  margin: 0;
}
.data-cell {
  min-width: 0;
  padding: var(--md-sys-measurement-space150);
  background: var(--md-sys-color-surface-container-low);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}
.data-cell span {
  display: block;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: 1.4;
  overflow-wrap: break-word;
}
.data-cell strong {
  display: block;
  margin-top: var(--md-sys-measurement-space25);
  color: var(--md-sys-color-on-surface);
  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;
}
/* ============================================================================
   4. Formula / hint callout — M3 tonal callout (primary-container pairing).
   ========================================================================== */
.exercise-card .formula {
  margin: var(--md-sys-measurement-space200) 0;
  padding: var(--md-sys-measurement-space200);
  background: var(--md-sys-color-primary-container);
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-primary-container);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.65;
  overflow-wrap: break-word;
}
.exercise-card .formula b {
  display: block;
  margin-bottom: var(--md-sys-measurement-space50);
  color: var(--md-sys-color-on-primary-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);
}

/* ============================================================================
   5. Calculated fields — outlined text fields (shared anatomy) in graded rows.
   ========================================================================== */
.calc-fields {
  display: grid;
  gap: var(--md-sys-measurement-space150);
  margin: var(--md-sys-measurement-space250) 0;
}
.calc-row {
  min-width: 0;
  padding: var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.calc-row:focus-within {
  border-color: var(--md-sys-color-primary);
}
.calc-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space50) var(--md-sys-measurement-space150);
  margin-bottom: var(--md-sys-measurement-space150);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  font-weight: var(--md-sys-typescale-weight-medium);
}
.calc-label > span:first-child {
  flex: 1 1 220px;
  min-width: 0;
}
.calc-label > span + span {
  flex: 0 1 auto;
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  font-weight: var(--md-sys-typescale-body-small-weight);
}
.calc-input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-measurement-space100) var(--md-sys-measurement-space150);
  min-width: 0;
}
/* Shared components.css provides the 56dp outlined-field anatomy. */
.calc-input {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 320px;
  font-variant-numeric: tabular-nums;
}
/* Graded text fields use the spec error outline / success (tertiary) outline;
   input text colour stays on-surface (outlined text-field spec). */
.calc-input.is-correct {
  border-color: var(--md-sys-color-success);
}
.calc-input.is-wrong {
  border-color: var(--md-sys-color-error);
}
.calc-unit {
  flex: 0 0 auto;
  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-weight-medium);
}
/* Row-level graded feedback uses the valid container / on-container pairs. */
.calc-row.correct {
  background: var(--md-sys-color-success-container);
  border-color: transparent;
  color: var(--md-sys-color-on-success-container);
}
.calc-row.wrong {
  background: var(--md-sys-color-error-container);
  border-color: transparent;
  color: var(--md-sys-color-on-error-container);
}
/* Step-by-step solution: tonal surface card with a title-small heading role. */
.calc-explain {
  margin-top: var(--md-sys-measurement-space150);
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface-container);
  border: 0;
  border-radius: var(--md-comp-card-container-shape);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.65;
  overflow-wrap: break-word;
}
.calc-explain > b:first-child {
  display: block;
  margin-bottom: var(--md-sys-measurement-space50);
  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-medium);
}
.calc-explain b {
  color: inherit;
  font-weight: var(--md-sys-typescale-weight-semibold);
}
.calc-row.correct .calc-explain,
.classifier-item.correct .calc-explain,
.cloze-item.correct .calc-explain {
  background: transparent;
  border-radius: 0;
  border-top: var(--md-comp-divider-thickness) solid
    color-mix(in srgb, var(--md-sys-color-on-success-container) 22%, transparent);
  padding: var(--md-sys-measurement-space150) 0 0;
  color: var(--md-sys-color-on-success-container);
}
.calc-row.correct .calc-explain b,
.classifier-item.correct .calc-explain b,
.cloze-item.correct .calc-explain b {
  color: var(--md-sys-color-on-success-container);
}
.calc-row.wrong .calc-explain,
.classifier-item.wrong .calc-explain,
.cloze-item.wrong .calc-explain {
  background: transparent;
  border-radius: 0;
  border-top: var(--md-comp-divider-thickness) solid
    color-mix(in srgb, var(--md-sys-color-on-error-container) 22%, transparent);
  padding: var(--md-sys-measurement-space150) 0 0;
  color: var(--md-sys-color-on-error-container);
}
.calc-row.wrong .calc-explain b,
.classifier-item.wrong .calc-explain b,
.cloze-item.wrong .calc-explain b {
  color: var(--md-sys-color-on-error-container);
}

/* ============================================================================
   6. Score banner — inline M3 tonal feedback (success / caution / error).
      success = app extension mapped to the spec tertiary family.
   ========================================================================== */
.score-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
  margin: var(--md-sys-measurement-space200) 0;
  padding: 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.55;
  font-weight: var(--md-sys-typescale-weight-medium);
}
.score-banner > span:first-child {
  flex: 1 1 260px;
  min-width: 0;
  overflow-wrap: break-word;
}
.score-banner .pill-row {
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100);
}
.score-banner.good {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}
.score-banner.mid {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}
.score-banner.bad {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
/* Icon + text status (never colour alone). Hero banners already open with ✓/✗
   in their copy, so the icon is scoped to the generator/classifier/cloze and
   Zbiory banners. */
.exercise-card > .score-banner::before,
.zb-test-wrap > .score-banner::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: currentColor;
}
.exercise-card > .score-banner.good::before,
.zb-test-wrap > .score-banner.good::before {
  -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-1.2 14.4-4.2-4.2 1.4-1.4 2.8 2.8 5.8-5.8 1.4 1.4-7.2 7.2Z'/%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-1.2 14.4-4.2-4.2 1.4-1.4 2.8 2.8 5.8-5.8 1.4 1.4-7.2 7.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.exercise-card > .score-banner.mid::before,
.zb-test-wrap > .score-banner.mid::before {
  -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='M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z'/%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='M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.exercise-card > .score-banner.bad::before,
.zb-test-wrap > .score-banner.bad::before {
  -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-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%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-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero-trainer-wrap .score-banner::before {
  display: none;
}

/* ============================================================================
   7. Classifier tab
   ========================================================================== */
.classifier-list {
  display: grid;
  gap: var(--md-sys-measurement-space150);
  margin: var(--md-sys-measurement-space200) 0;
}
.classifier-item {
  min-width: 0;
  padding: var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition:
    background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.classifier-item > p {
  margin: 0 0 var(--md-sys-measurement-space150);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: 1.5;
  font-weight: var(--md-sys-typescale-weight-medium);
  overflow-wrap: break-word;
}
.classifier-item.correct {
  background: var(--md-sys-color-success-container);
  border-color: transparent;
  color: var(--md-sys-color-on-success-container);
}
.classifier-item.wrong {
  background: var(--md-sys-color-error-container);
  border-color: transparent;
  color: var(--md-sys-color-on-error-container);
}
.classifier-item.correct > p,
.classifier-item.wrong > p {
  color: inherit;
}

.cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100);
}

/* M3 filter chips (spec chips.md): 32dp container, 8dp corner, 1dp
   outline-variant, label-large, state layers 8/10/10 %; the 48dp touch target
   is extended with ::before without changing the visual height. */
.cat-pill {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-measurement-space50);
  height: var(--md-comp-chip-container-height);
  max-width: 100%;
  padding: 0 var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-chip-container-shape);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-comp-chip-label-text-size);
  line-height: var(--md-sys-typescale-label-large-line);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  font-weight: var(--md-sys-typescale-label-large-weight);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
/* 48dp hit area (min target) while the chip keeps its 32dp visual height. */
.cat-pill::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - 100%) / -2) 0;
  border-radius: inherit;
  pointer-events: none;
}
/* M3 state layer in the chip's own content colour. */
.cat-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
@media (hover: hover) {
  .cat-pill:hover::after {
    opacity: var(--md-sys-state-hover-opacity);
  }
}
.cat-pill:focus-visible::after {
  opacity: var(--md-sys-state-focus-opacity);
}
.cat-pill:active::after {
  opacity: var(--md-sys-state-pressed-opacity);
}
/* Selected filter chip: secondary-container + on-secondary-container. */
.cat-pill.selected {
  background: var(--md-sys-color-secondary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-secondary-container);
}
/* Graded answers: valid success (tertiary) / error container pairings. */
.cat-pill.right-choice {
  background: var(--md-sys-color-success-container);
  border-color: transparent;
  color: var(--md-sys-color-on-success-container);
}
.cat-pill.wrong-choice {
  background: var(--md-sys-color-error-container);
  border-color: transparent;
  color: var(--md-sys-color-on-error-container);
}
/* Selected / graded state icon (spec: filter chip selected shows a checkmark;
   the graded chips pair the container with a check / close glyph). Icon is
   rendered with a mask so it inherits currentColor in both themes. */
.cat-pill.selected::after,
.cat-pill.right-choice::after,
.cat-pill.wrong-choice::after {
  content: "";
  position: static;
  inset: auto;
  z-index: auto;
  order: -1;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: 1;
  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.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%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.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cat-pill.wrong-choice::after {
  -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='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4Z'/%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='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================================================
   8. Cloze tab
   ========================================================================== */
.cloze-list {
  display: grid;
  gap: var(--md-sys-measurement-space150);
  margin: var(--md-sys-measurement-space200) 0;
}
.cloze-item {
  min-width: 0;
  padding: var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: 1.75;
  overflow-wrap: break-word;
}
.cloze-item > div:first-child {
  min-width: 0;
}
.cloze-item.correct {
  background: var(--md-sys-color-success-container);
  border-color: transparent;
  color: var(--md-sys-color-on-success-container);
}
.cloze-item.wrong {
  background: var(--md-sys-color-error-container);
  border-color: transparent;
  color: var(--md-sys-color-on-error-container);
}

/* M3 outlined select text field (spec text-fields.md: outlined-select 56dp /
   4dp corner / 1dp outline), used inline inside a sentence. */
.cloze-select {
  display: inline-block;
  width: auto;
  min-width: 140px;
  max-width: 100%;
  margin: var(--md-sys-measurement-space50);
  padding-right: var(--md-sys-measurement-space600);
  vertical-align: middle;
  font-weight: var(--md-sys-typescale-weight-medium);
  cursor: pointer;
}
.cloze-item.correct .cloze-select {
  border-color: var(--md-sys-color-success);
}
.cloze-item.wrong .cloze-select {
  border-color: var(--md-sys-color-error);
}

/* ============================================================================
   9. Hero trainer — shells
   ========================================================================== */
.hero-trainer-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space200);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
@media (min-width: 900px) {
  .hero-trainer-wrap {
    gap: var(--md-sys-measurement-space300);
  }
}

/* --- module status bar (tonal container) ---------------------------------- */
.hero-status-bar {
  display: flex;
  /* the legacy @layer sheet flips this to `column` on narrow screens; the
     wrapping row is what keeps the title/pills layout intact at every width */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  padding: var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface-container-low);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}
/* Score / streak pills carry their semantics from the shared component; only
   the surface/fit is refined here. */
.hero-status-bar .hero-stat-pill {
  min-height: 32px;
  border: 1px solid var(--md-sys-color-outline-variant);
}
.hero-status-bar .hero-stat-pill--warning {
  border-color: transparent;
}
.hero-status-bar > div:first-child {
  min-width: 0;
  flex: 1 1 220px;
}
.hero-status-bar .pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
}

/* --- module sub-navigation: M3 filter chips in a discoverable scroller ----- */
.hero-subnav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  /* vertical padding keeps the 3px focus ring clear of the scroll clip */
  padding: var(--md-sys-measurement-space75) var(--md-sys-measurement-space25);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  /* scroll affordance: soft edge fade so the overflow is visible (spec §6) */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    var(--md-sys-color-scrim) var(--md-sys-measurement-space200),
    var(--md-sys-color-scrim) calc(100% - var(--md-sys-measurement-space200)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    var(--md-sys-color-scrim) var(--md-sys-measurement-space200),
    var(--md-sys-color-scrim) calc(100% - var(--md-sys-measurement-space200)),
    transparent 100%
  );
}
.hero-subnav-btn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  height: var(--md-comp-chip-container-height);
  padding: 0 var(--md-sys-measurement-space150);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-chip-container-shape);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-comp-chip-label-text-size);
  line-height: var(--md-sys-typescale-label-large-line);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  font-weight: var(--md-sys-typescale-label-large-weight);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
/* 48dp hit area without growing the 32dp chip (spec minimum target). */
.hero-subnav-btn::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - 100%) / -2) 0;
  border-radius: inherit;
}
@media (hover: hover) {
  .hero-subnav-btn:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
  }
}
.hero-subnav-btn:active {
  background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
}
/* Selected filter chip: secondary-container; a check mark pairs with the
   colour change so the state is never colour-only. */
.hero-subnav-btn.active,
.hero-subnav-btn[aria-current="step"] {
  background: var(--md-sys-color-secondary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-secondary-container);
}
.hero-subnav-btn.active::after,
.hero-subnav-btn[aria-current="step"]::after {
  content: "";
  flex: 0 0 auto;
  width: var(--md-comp-chip-icon-size);
  height: var(--md-comp-chip-icon-size);
  margin-inline-start: var(--md-sys-measurement-space50);
  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.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%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.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) {
  .hero-subnav-btn.active:hover {
    background: color-mix(
      in srgb,
      var(--md-sys-color-on-secondary-container) 8%,
      var(--md-sys-color-secondary-container)
    );
  }
}
.hero-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: var(--md-comp-chip-icon-size);
  height: var(--md-comp-chip-icon-size);
  padding: 0 var(--md-sys-measurement-space25);
  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);
  line-height: 1;
  font-weight: var(--md-sys-typescale-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.hero-subnav-btn.active .hero-num-badge,
.hero-subnav-btn[aria-current="step"] .hero-num-badge {
  background: var(--md-sys-color-on-secondary-container);
  color: var(--md-sys-color-secondary-container);
}

/* --- theory + pitfall card (outlined card) -------------------------------- */
.hero-theory-card {
  padding: var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.7;
  overflow-wrap: break-word;
}
@media (min-width: 768px) {
  .hero-theory-card {
    padding: var(--md-sys-measurement-space300);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: 1.75;
  }
}
.hero-theory-card h3 {
  margin: 0 0 var(--md-sys-measurement-space150);
  color: var(--md-sys-color-on-surface);
}
/* Long-form explanatory copy stays inside a readable measure. */
.hero-theory-card > div:not(.hero-pitfall-box),
.hero-theory-card > p,
.hero-theory-card li {
  max-width: var(--layout-prose-max);
}
.hero-theory-card ul,
.hero-theory-card ol {
  margin: var(--md-sys-measurement-space100) 0;
  padding-left: 1.3em;
}
.hero-theory-card li + li {
  margin-top: var(--md-sys-measurement-space50);
}
/* Caution callout: error-container is the spec's semantic warning-adjacent
   emphasis; pitfall copy is “do not do this”, so error roles are correct. */
.hero-pitfall-box {
  margin-top: var(--md-sys-measurement-space200);
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  background: var(--md-sys-color-error-container);
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-error-container);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.6;
  overflow-wrap: break-word;
}
.hero-pitfall-box b,
.hero-pitfall-box strong {
  color: var(--md-sys-color-on-error-container);
  font-weight: var(--md-sys-typescale-weight-semibold);
}

/* --- interactive task card (outlined card) -------------------------------- */
.hero-task-card {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space200);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  color: var(--md-sys-color-on-surface);
}
@media (min-width: 768px) {
  .hero-task-card {
    padding: var(--md-sys-measurement-space300);
    gap: var(--md-sys-measurement-space250);
  }
}

/* Compact: the prev/next pair fills the row (thumb-sized actions) and the
   module meta wraps instead of pushing the progress bar off-screen. */
@media (max-width: 599px) {
  .hero-stepper-actions {
    margin-top: var(--md-sys-measurement-space100);
  }
  .hero-stepper-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ============================================================================
   10. T-accounts + Hero financial tables
   Table basics (sticky header surface-container-high, 1dp outline-variant
   separators, embedded horizontal-scroll fades) come from css/base.css.
   ========================================================================== */
.t-account-card {
  min-width: 0;
  margin: 0;
  background: var(--md-sys-color-surface);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
}
.t-account-head {
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface-container-high);
  border-bottom: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  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);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  font-weight: var(--md-sys-typescale-title-small-weight);
  text-align: center;
  overflow-wrap: break-word;
}
.t-account-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.t-account-col {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space150);
  min-width: 0;
  padding: var(--md-sys-measurement-space200);
}
.t-account-col.left {
  border-right: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
}
.t-account-col-title {
  padding-bottom: var(--md-sys-measurement-space100);
  border-bottom: var(--md-comp-divider-thickness) 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: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  overflow-wrap: break-word;
}
.t-account-col .hero-input {
  width: 100%;
  max-width: 100%;
}
.t-account-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space150);
  padding: var(--md-sys-measurement-space25) 0;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.45;
}
.t-account-item .val {
  flex: 0 0 auto;
  font-weight: var(--md-sys-typescale-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Balance / total row: emphasised title-small bold over an outline divider. */
.t-account-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space150);
  margin-top: auto;
  padding-top: var(--md-sys-measurement-space150);
  border-top: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  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);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  font-weight: var(--md-sys-typescale-weight-bold);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 600px) {
  .t-account-col {
    padding: var(--md-sys-measurement-space200) var(--md-sys-measurement-space300);
    gap: var(--md-sys-measurement-space150);
  }
  .t-account-head {
    padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space300);
  }
}

/* Hero financial tables: only specifics on top of base.css table anatomy. */
.hero-empty-table {
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.hero-empty-table tfoot td {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-weight: var(--md-sys-typescale-weight-semibold);
  border-top: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-bottom: 0;
}
/* Balance-sheet totals (A = P) are highlighted with the success container. */
.hero-trainer-wrap .t-account-card .hero-empty-table tfoot td {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
  border-top: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline);
}
.hero-trainer-wrap .t-account-card .table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.hero-empty-table tfoot tr:last-child td {
  border-bottom: 0;
}
.hero-empty-table .katex {
  font-size: inherit;
}
.hero-empty-table .katex-display {
  margin: var(--md-sys-measurement-space50) 0;
  /* The table wrapper owns horizontal scrolling; never nest a second scroller. */
  overflow: visible;
}
.hero-empty-table .hero-input,
.hero-empty-table select,
.hero-empty-table input {
  max-width: 100%;
}
.hero-empty-table .hero-input {
  width: 100%;
}

/* ============================================================================
   11. Hero answer fields — shared 56dp outlined text-field anatomy, ledger
       amounts right-aligned with tabular figures.
   ========================================================================== */
.hero-input {
  display: inline-block;
  width: calc(var(--md-sys-measurement-space900) + var(--md-sys-measurement-space500));
  max-width: 100%;
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.hero-input::placeholder {
  text-align: right;
}
/* Graded state = spec error outline / success (tertiary) outline. */
.hero-input.is-correct {
  border-color: var(--md-sys-color-success);
}
.hero-input.is-wrong {
  border-color: var(--md-sys-color-error);
}
@media (min-width: 768px) {
  .hero-input {
    width: calc(var(--md-sys-measurement-space900) + var(--md-sys-measurement-space600));
  }
}

/* ============================================================================
   12. Hero choice buttons — M3 segmented-button anatomy (outlined, full round,
       selected secondary-container), 48dp target.
   ========================================================================== */
.hero-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md-sys-measurement-space100);
  min-width: 0;
}
@media (min-width: 600px) {
  .hero-choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }
}
.hero-choice-btn {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-measurement-space100);
  min-height: var(--md-comp-button-container-height);
  min-width: 0;
  padding: 0 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);
  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);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  font-weight: var(--md-sys-typescale-label-large-weight);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
/* 48dp target for the 40dp container. */
.hero-choice-btn::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - 100%) / -2) 0;
  border-radius: inherit;
}
/* M3 state layer in the option's own content colour. */
.hero-choice-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
@media (hover: hover) {
  .hero-choice-btn:hover::after {
    opacity: var(--md-sys-state-hover-opacity);
  }
}
.hero-choice-btn:focus-visible::after {
  opacity: var(--md-sys-state-focus-opacity);
}
.hero-choice-btn:active::after {
  opacity: var(--md-sys-state-pressed-opacity);
}
.hero-choice-btn.selected {
  background: var(--md-sys-color-secondary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-secondary-container);
}
.hero-choice-btn.correct-choice {
  background: var(--md-sys-color-success-container);
  border-color: transparent;
  color: var(--md-sys-color-on-success-container);
  font-weight: var(--md-sys-typescale-weight-medium);
}
.hero-choice-btn.wrong-choice {
  background: var(--md-sys-color-error-container);
  border-color: transparent;
  color: var(--md-sys-color-on-error-container);
  font-weight: var(--md-sys-typescale-weight-medium);
}
/* Graded state icon — the result is never colour-only. */
.hero-choice-btn.correct-choice::after,
.hero-choice-btn.wrong-choice::after {
  content: "";
  position: static;
  inset: auto;
  z-index: auto;
  flex: 0 0 auto;
  margin-inline-start: var(--md-sys-measurement-space50);
  width: 18px;
  height: 18px;
  opacity: 1;
  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.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%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.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero-choice-btn.wrong-choice::after {
  -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='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4Z'/%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='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================================================
   13. Hero chart figures (shared chart-card/caption anatomy from
       components.css; hero adds the collapsible disclosure shell).
   ========================================================================== */
.hero-chart-box {
  margin: 0;
  background: var(--md-sys-color-surface-container-low);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
}
/* Disclosure header: 48dp target + label-large, hover state layer per spec. */
.hero-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space150);
  min-height: var(--md-comp-target-size);
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface-container);
  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);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
@media (hover: hover) {
  .hero-chart-header:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container));
  }
}
.hero-chart-header > span:first-child {
  min-width: 0;
  overflow-wrap: break-word;
}
.hero-chart-header .toggle-icon {
  flex: 0 0 auto;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: 1;
  transition: transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.hero-chart-box.is-collapsed .toggle-icon {
  transform: rotate(-90deg);
}
.hero-chart-body {
  padding: var(--md-sys-measurement-space200);
}
.hero-chart-box.is-collapsed .hero-chart-body {
  display: none;
}
.hero-chart-body .chart-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md-sys-measurement-space200);
  margin: 0;
}
@media (min-width: 900px) {
  .hero-chart-body .chart-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.hero-task-card .chart-card {
  margin: 0;
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
}
.hero-task-card .chart-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--md-sys-measurement-space600) * 3);
  padding: var(--md-sys-measurement-space100);
  background: var(--md-sys-color-surface-container-lowest);
  border-bottom: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  cursor: zoom-in;
  overflow: hidden;
}
.hero-task-card .chart-img-wrap img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
}
.hero-task-card .chart-zoom-badge {
  position: absolute;
  top: var(--md-sys-measurement-space100);
  right: var(--md-sys-measurement-space100);
  padding: var(--md-sys-measurement-space50) var(--md-sys-measurement-space125);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  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);
  pointer-events: none;
}
.hero-task-card .chart-caption-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-measurement-space50) var(--md-sys-measurement-space100);
  margin-bottom: var(--md-sys-measurement-space25);
}
.hero-task-card .chart-source-tag {
  display: inline-block;
  padding: var(--md-sys-measurement-space25) 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);
  line-height: var(--md-sys-typescale-label-small-line);
  font-weight: var(--md-sys-typescale-label-small-weight);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  white-space: nowrap;
}

/* ============================================================================
   14. KaTeX — formulas never widen the page. Standalone display formulas scroll
       in place; the scroll affordance uses the local/scroll gradient trick from
       base.css so the fade only appears while content continues off-screen.
   ========================================================================== */
.exercise-card .katex-display,
.hero-trainer-wrap .katex-display {
  max-width: 100%;
  padding-bottom: var(--md-sys-measurement-space25);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--md-sys-color-surface) 40%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--md-sys-color-surface) 40%, transparent) right center / 32px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--md-sys-color-on-surface) 22%, transparent), transparent) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--md-sys-color-on-surface) 22%, transparent), transparent) right center / 14px 100% no-repeat scroll;
}
.exercise-card .katex,
.hero-trainer-wrap .katex {
  max-width: 100%;
}

/* ============================================================================
   15. Zbiory zadań — pytania testowe abcd
   ========================================================================== */
.zb-test-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space200);
}
/* .zb-test-head uses the shared .card (outlined, 12dp corner). */
.zb-test-head .eyebrow {
  margin-bottom: var(--md-sys-measurement-space100);
}
.zb-test-head p {
  margin: var(--md-sys-measurement-space100) 0 0;
  max-width: var(--layout-prose-max);
  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);
}
.zb-test-head p.muted.small {
  margin-top: var(--md-sys-measurement-space75);
}
.zb-question-list {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space150);
}
.zb-question {
  min-width: 0;
  padding: var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-surface);
}
/* Graded question state: the card itself stays a quiet outlined surface; the
   status is carried by the options plus the .zb-explain success/error card
   below it (never by a coloured border or by colour alone). */
.zb-question.is-correct,
.zb-question.is-wrong {
  background: var(--md-sys-color-surface-container-low);
  border-color: var(--md-sys-color-outline-variant);
}
.zb-q-head {
  display: flex;
  align-items: flex-start;
  gap: var(--md-sys-measurement-space100);
  margin-bottom: var(--md-sys-measurement-space150);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: 1.5;
  font-weight: var(--md-sys-typescale-weight-medium);
}
.zb-q-num {
  flex: 0 0 auto;
  color: var(--md-sys-color-primary);
  font-weight: var(--md-sys-typescale-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.zb-q-text {
  min-width: 0;
}
.zb-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md-sys-measurement-space100);
}
@media (min-width: 760px) {
  .zb-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Answer option: M3 selectable list-row anatomy (48dp row, 8dp corner,
   1dp outline-variant, body-medium label). */
.zb-option {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  gap: var(--md-sys-measurement-space100);
  min-height: var(--md-comp-target-size);
  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-small);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
/* M3 state layer in the option's own content colour. */
.zb-option::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
@media (hover: hover) {
  .zb-option:hover:not([disabled])::after {
    opacity: var(--md-sys-state-hover-opacity);
  }
}
.zb-option:focus-visible::after {
  opacity: var(--md-sys-state-focus-opacity);
}
.zb-option:active:not([disabled])::after {
  opacity: var(--md-sys-state-pressed-opacity);
}
.zb-option.selected {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.zb-option.correct {
  border-color: transparent;
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}
.zb-option.wrong {
  border-color: transparent;
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.zb-option[disabled] {
  cursor: default;
}
.zb-option .zb-letter {
  flex: 0 0 auto;
  min-width: 1.1em;
  font-weight: var(--md-sys-typescale-weight-semibold);
  font-variant-numeric: tabular-nums;
}
/* Selection / grading marker so the state is never colour-only. */
.zb-option.selected::after,
.zb-option.correct::after,
.zb-option.wrong::after {
  content: "";
  position: static;
  inset: auto;
  z-index: auto;
  flex: 0 0 auto;
  margin-inline-start: auto;
  width: 18px;
  height: 18px;
  opacity: 1;
  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.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%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.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.zb-option.wrong::after {
  -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='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4Z'/%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='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Per-question result: inline success / error feedback card + icon. */
.zb-explain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--md-sys-measurement-space50);
  margin-top: var(--md-sys-measurement-space150);
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border: 0;
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.6;
  overflow-wrap: break-word;
}
.zb-explain.good {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}
.zb-explain.bad {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.zb-explain.good::before,
.zb-explain.bad::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 20px;
  height: 20px;
  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.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%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.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.zb-explain.bad::before {
  -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='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4Z'/%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='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.zb-explain > b {
  color: inherit;
}
.zb-explain .muted.small {
  flex: 1 1 100%;
  margin-top: var(--md-sys-measurement-space50);
  color: inherit;
  opacity: 0.85;
}
.zb-test-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100);
  margin-top: var(--md-sys-measurement-space25);
}
@media (max-width: 599px) {
  .zb-test-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .zb-test-actions .btn {
    width: 100%;
  }
}

/* ============================================================================
   16. Zbiory zadań — pytania otwarte (M3 expanded list rows)
   ========================================================================== */
.zb-open-list {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
}
.zb-open-item {
  background: var(--md-sys-color-surface);
  border: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-surface);
  overflow: hidden;
}
.zb-open-item summary {
  display: flex;
  align-items: flex-start;
  gap: var(--md-sys-measurement-space100);
  min-height: var(--md-comp-target-size);
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: 1.5;
  font-weight: var(--md-sys-typescale-weight-medium);
  text-align: left;
  cursor: pointer;
  list-style: none;
}
.zb-open-item summary::-webkit-details-marker {
  display: none;
}
.zb-open-item summary::after {
  content: "";
  flex: 0 0 auto;
  margin-inline-start: auto;
  align-self: center;
  width: 24px;
  height: 24px;
  background-color: var(--md-sys-color-on-surface-variant);
  -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='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6 1.4-1.4Z'/%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='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6 1.4-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.zb-open-item[open] summary::after {
  transform: rotate(180deg);
}
.zb-open-item summary .zb-q-num {
  margin-top: 1px;
}
.zb-open-item[open] summary {
  border-bottom: var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
}
.zb-open-item .quick-check-body {
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200) var(--md-sys-measurement-space200);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.65;
}
.zb-open-item .quick-check-body p {
  margin: 0 0 var(--md-sys-measurement-space100);
  max-width: var(--layout-prose-max);
}
.zb-open-item .quick-check-body p:last-child {
  margin-bottom: 0;
}

/* Cloze items: one border only — the item is a tonal card, the M3 <m-select>
   keeps its own outlined field. Removes the previous card-border + select-border
   double frame. */
.cloze-item {
  border: 0;
  background: var(--md-sys-color-surface-container-low);
}
.cloze-item.correct { background: var(--md-sys-color-success-container); }
.cloze-item.wrong { background: var(--md-sys-color-error-container); }

/* White cards for the cloze list (single M3 select outline, no second frame). */
.cloze-item {
  background: var(--md-sys-color-surface-container-lowest);
  border: 0;
}