/* ============================================================================
   Home / dashboard / study plan.
   Material Design 3: layered tonal surfaces, 12dp cards, calm statistics,
   one clear primary action per section. Every value below comes from
   css/tokens.css (transcribed from the M3 spec token tables).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Home — subject chooser
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: var(--md-sys-measurement-space600) var(--md-sys-measurement-space400);
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  overflow: hidden;
}
.hero .eyebrow { color: var(--md-sys-color-primary); }
.hero .badge {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.hero h1 {
  margin: var(--md-sys-measurement-space200) 0 0;
  max-width: 22ch;
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  color: var(--md-sys-color-on-surface);
}
.hero p {
  margin: var(--md-sys-measurement-space200) 0 0;
  max-width: 68ch;
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  color: var(--md-sys-color-on-surface-variant);
}
@media (min-width: 840px) {
  .hero h1 {
    font-size: var(--md-sys-typescale-display-small-size);
    line-height: var(--md-sys-typescale-display-small-line);
    letter-spacing: var(--md-sys-typescale-display-small-tracking);
    font-weight: var(--md-sys-typescale-display-small-weight);
  }
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--md-sys-measurement-space150);
  margin: var(--md-sys-measurement-space250) 0;
}
.stats-row .stat-card { background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); }
.stats-row .stat-card strong { font-size: var(--md-sys-typescale-headline-medium-size); line-height: var(--md-sys-typescale-headline-medium-line); }

.subject-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--md-sys-measurement-space200);
}
@media (min-width: 720px) { .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .subject-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }

/* Interactive card = M3 outlined card (surface + 1px outline-variant, 12dp). */
.subject-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space100);
  width: 100%;
  padding: var(--md-sys-measurement-space250);
  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: left;
  isolation: isolate;
  transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
/* M3 state layer: on-surface at 8% hover / 10% pressed, clipped to the card. */
.subject-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.subject-card:hover::after { opacity: var(--md-sys-state-hover-opacity); }
.subject-card:active::after { opacity: var(--md-sys-state-pressed-opacity); }
.subject-card: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);
}
.subject-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--md-sys-measurement-space150); }
.subject-icon {
  display: inline-grid;
  place-items: center;
  width: var(--md-comp-icon-button-container-height);
  height: var(--md-comp-icon-button-container-height);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--subject-accent-container);
  color: var(--subject-on-accent-container);
  font-size: var(--md-sys-typescale-title-small-size);
  font-weight: var(--md-sys-typescale-title-small-weight);
}
.subject-pct-pill {
  padding: var(--md-sys-measurement-space50) var(--md-sys-measurement-space150);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  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;
}
.subject-card h2 {
  margin: var(--md-sys-measurement-space50) 0 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-title-large-weight);
  color: var(--md-sys-color-on-surface);
}
.subject-card p {
  margin: 0;
  flex: 1 1 auto;
  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);
  overflow-wrap: break-word;
}
.subject-card .bar { margin: var(--md-sys-measurement-space50) 0 var(--md-sys-measurement-space25); }
.subject-card .bar > span { background: var(--subject-accent); }
.subject-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space50);
  margin-top: var(--md-sys-measurement-space25);
}
.subject-meta span {
  padding: var(--md-sys-measurement-space50) 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: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  white-space: nowrap;
}
.subject-card .go {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space50);
  margin-top: 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-label-large-weight);
  color: var(--md-sys-color-primary);
}

.method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--md-sys-measurement-space150);
  margin: var(--md-sys-measurement-space150) 0;
}
@media (min-width: 720px) { .method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.method {
  padding: var(--md-sys-measurement-space200);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.method b {
  display: block;
  margin-bottom: var(--md-sys-measurement-space75);
  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);
  color: var(--md-sys-color-on-surface);
}
.method p {
  margin: 0;
  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);
}

/* ---------------------------------------------------------------------------
   Dashboard — next step + today + module tiles
   --------------------------------------------------------------------------- */
.next-step-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space200);
  flex-wrap: wrap;
  padding: var(--md-sys-measurement-space200);
  margin-bottom: var(--md-sys-measurement-space200);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.next-step-banner > div:first-child {
  min-width: 0;
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space50);
}
.next-step-banner b {
  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);
}
.next-step-banner span {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
}
/* Banner buttons: M3 filled on the tonal banner keeps the pair valid (primary/on-primary). */
.next-step-banner .btn-soft {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.next-step-banner .btn-secondary {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

/* “today” card: outlined card, streak + daily goal */
.today-card {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space200);
  padding: var(--md-sys-measurement-space200);
  margin-bottom: var(--md-sys-measurement-space200);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.today-main { display: flex; align-items: center; gap: var(--md-sys-measurement-space300); flex-wrap: wrap; }
.today-streak { display: flex; align-items: center; gap: var(--md-sys-measurement-space150); flex-shrink: 0; }
.today-streak .flame { font-size: var(--md-sys-typescale-headline-small-size); line-height: 1; }
.today-streak b {
  display: block;
  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);
}
.today-streak small { font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
.today-goal { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--md-sys-measurement-space75); }
.goal-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100);
  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);
  flex-wrap: wrap;
}
.goal-top b { color: var(--md-sys-color-on-surface); font-weight: var(--md-sys-typescale-label-large-weight); }
.small { font-size: var(--md-sys-typescale-body-small-size); }
.today-actions { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space125); }
.today-actions .btn { flex: 1 1 240px; }
@media (min-width: 720px) { .today-actions .btn { flex: 0 0 auto; } }

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--md-sys-measurement-space150);
}
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .grid-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.action-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space75);
  width: 100%;
  padding: var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface);
  text-align: left;
  color: var(--md-sys-color-on-surface);
  isolation: isolate;
  transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.action-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.action-card:hover::after { opacity: var(--md-sys-state-hover-opacity); }
.action-card:active::after { opacity: var(--md-sys-state-pressed-opacity); }
.action-card: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);
}
.action-icon {
  display: inline-grid;
  place-items: center;
  width: var(--md-comp-icon-button-container-height);
  height: var(--md-comp-icon-button-container-height);
  margin-bottom: var(--md-sys-measurement-space75);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: var(--md-sys-typescale-title-medium-weight);
}
.action-card h3 {
  margin: 0;
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-title-medium-weight);
}
.action-card p {
  margin: 0;
  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);
}

/* Chapter progress rows = M3 list items (56dp min, 1px inset divider). */
.chapter-row-item {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space150);
  justify-content: space-between;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.chapter-row-item:last-child { border-bottom: 0; }
.chapter-row-item .chapter-progress {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--md-sys-measurement-space125);
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--md-comp-list-item-height);
  margin: 0;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  text-align: left;
  white-space: normal;
  border: 0;
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent;
  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);
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.chapter-row-item .chapter-progress:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.chapter-row-item .chapter-progress:focus-visible {
  outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-state-focus-indicator-color);
  outline-offset: calc(-1 * var(--md-sys-state-focus-indicator-outer-offset));
}
.chapter-row-item .chapter-progress .muted { font-size: var(--md-sys-typescale-body-small-size); }

/* subject info banners (study collections / hero trainer) */
.info-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space200);
  flex-wrap: wrap;
  padding: var(--md-sys-measurement-space200);
  margin-bottom: var(--md-sys-measurement-space200);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface-container);
}
.info-banner > div:first-child { min-width: 0; flex: 1 1 420px; display: flex; flex-direction: column; gap: var(--md-sys-measurement-space50); }
.info-banner h3 {
  margin: 0;
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-title-medium-weight);
}
.info-banner p {
  margin: 0;
  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);
}

/* ---------------------------------------------------------------------------
   Plan — M3 list of study days
   --------------------------------------------------------------------------- */
.plan-list { display: flex; flex-direction: column; gap: var(--md-sys-measurement-space100); }
.plan-day {
  display: flex;
  align-items: flex-start;
  gap: var(--md-sys-measurement-space200);
  padding: var(--md-sys-measurement-space200);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  cursor: pointer;
  transition: border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.plan-day:hover { border-color: var(--md-sys-color-outline); }
.plan-day.done {
  background: var(--md-sys-color-tertiary-container);
  border-color: transparent;
}
.plan-day.done h3,
.plan-day.done p,
.plan-day.done .plan-day-title,
.plan-day.done .plan-day-text { color: var(--md-sys-color-on-tertiary-container); }
.day-number {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: var(--md-sys-measurement-space500);
  height: var(--md-sys-measurement-space500);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: var(--md-sys-typescale-title-small-size);
  font-weight: var(--md-sys-typescale-title-small-weight);
  font-variant-numeric: tabular-nums;
}
.plan-day.done .day-number {
  background: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
}
.plan-day > div { flex: 1 1 auto; min-width: 0; }
.plan-day h3 {
  margin: 0 0 var(--md-sys-measurement-space25);
  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);
}
.plan-day p {
  margin: 0;
  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);
}
.plan-check {
  flex-shrink: 0;
  width: var(--md-comp-checkbox-size);
  height: var(--md-comp-checkbox-size);
  margin-top: var(--md-sys-measurement-space75);
  accent-color: var(--md-sys-color-primary);
  cursor: pointer;
}

/* small inline rows used on dashboard/plan */
.pill-row .btn { flex-shrink: 0; }

.mini-progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100);
  margin-bottom: var(--md-sys-measurement-space25);
}
.mini-progress-label b { color: var(--md-sys-color-on-surface); font-weight: var(--md-sys-typescale-label-large-weight); }
.today-streak-icon { color: var(--md-sys-color-warning); display: inline-flex; }
.chapter-read-state {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: var(--md-sys-measurement-space300);
  height: var(--md-sys-measurement-space300);
  margin-top: var(--md-sys-measurement-space25);
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: 1;
}
.chapter-read-state.is-read {
  border-color: transparent;
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.chapter-row-text { display: flex; flex-direction: column; gap: var(--md-sys-measurement-space25); min-width: 0; }
.chapter-row-title {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  color: var(--md-sys-color-on-surface);
}
.chapter-row-meta { font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space150);
  flex-wrap: wrap;
  padding: var(--md-sys-measurement-space150) 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);
}
.session-row:last-child { border-bottom: 0; }
.session-date { color: var(--md-sys-color-on-surface-variant); }
.session-row b { font-weight: var(--md-sys-typescale-label-large-weight); font-variant-numeric: tabular-nums; }
.plan-day-body { display: flex; flex-direction: column; gap: var(--md-sys-measurement-space25); flex: 1 1 auto; min-width: 0; }
.plan-day-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-title-small-weight); }
.plan-day-text {
  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);
}

/* ---------------------------------------------------------------------------
   Postęp w rozdziałach — M3 two-line list inside a filled card (readable
   status chips, numbers, hover state, clear action). Overrides the legacy
   single-line experiment above.
   --------------------------------------------------------------------------- */
.card.chapter-progress-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-comp-card-container-shape);
  background: var(--md-sys-color-surface);
}
.chapter-progress-overview {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space300);
  padding: var(--md-sys-measurement-space200) var(--md-sys-measurement-space300);
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.chapter-progress-overview .bar { flex: 1 1 auto; }
.chapter-progress-numbers { display: flex; flex-direction: column; flex: 0 0 auto; }
.chapter-progress-numbers b {
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line);
  font-weight: var(--md-sys-typescale-weight-medium);
  color: var(--md-sys-color-on-surface);
  font-variant-numeric: tabular-nums;
}
.chapter-progress-numbers 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);
}
.chapter-row-item {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  padding: var(--md-sys-measurement-space25) var(--md-sys-measurement-space150)
    var(--md-sys-measurement-space25) var(--md-sys-measurement-space25);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  justify-content: flex-start;
}
.chapter-row-item:last-child { border-bottom: 0; }
.chapter-row-item .chapter-progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--md-sys-measurement-space150);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 72px;
  margin: 0;
  padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space150);
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  text-align: left;
  white-space: normal;
  transition: background-color var(--md-sys-motion-duration-short2)
    var(--md-sys-motion-easing-standard);
}
.chapter-row-item .chapter-progress:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.chapter-row-index {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: var(--md-sys-measurement-space500);
  height: var(--md-sys-measurement-space500);
  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: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  font-variant-numeric: tabular-nums;
}
.chapter-row-item.is-read .chapter-row-index {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.chapter-row-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--md-sys-measurement-space25);
  min-width: 0;
}
.chapter-row-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-label-large-weight);
  color: var(--md-sys-color-on-surface);
  overflow-wrap: anywhere;
}
.chapter-row-meta {
  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);
}
.chapter-row-item .chapter-read-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space25);
  width: auto;
  height: auto;
  min-height: var(--md-sys-measurement-space300);
  margin: 0;
  padding: 0 var(--md-sys-measurement-space100);
  border: 0;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  white-space: nowrap;
}
.chapter-row-item .chapter-read-state.is-read {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.chapter-row-action { flex: 0 0 auto; }
@media (max-width: 639px) {
  .chapter-row-item .chapter-read-state { display: none; }
  .chapter-row-group .chapter-row-action { display: none; }
  .chapter-row-item .chapter-progress { min-height: 64px; }
  .chapter-progress-overview { padding: var(--md-sys-measurement-space150); gap: var(--md-sys-measurement-space150); }
  .chapter-progress-numbers b { font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line); }
}

/* Plan nauki — authored session text may contain inline math markup. */
.plan-day-text .math {
  font-variant-numeric: tabular-nums;
  color: var(--md-sys-color-on-surface);
}
.plan-day-text sub,
.plan-day-text sup { font-size: 0.72em; }