/* ============================================================================
   Components — shared Material Design 3 building blocks.
   Every geometry/colour value below comes from css/tokens.css, which is
   transcribed from the M3 spec token tables (spec/generated/SPEC_CHEATSHEET.md).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Buttons — spec sizes XS 32 / S 40 (default) / M 56 / L 96 / XL 136.
   Shape: full round at rest, pressed morphs to 8/12/16 (spec pressed shape).
   Leading/trailing space: XS 12, S 16, M 24. Icon: 20/24. Label: label-large.
   --------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-comp-button-icon-label-space);
  height: var(--md-comp-button-container-height);
  min-height: 0; /* neutralise legacy @layer min-height:36px clamp */
  padding: 0 var(--md-comp-button-leading-space);
  border: 1px solid transparent;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-primary);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-comp-button-label-text-size);
  line-height: var(--md-comp-button-label-text-line);
  font-weight: var(--md-comp-button-label-text-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: border-radius var(--md-sys-motion-duration-short4)
      var(--md-sys-motion-easing-emphasized-decelerate),
    background-color var(--md-sys-motion-duration-short3)
      var(--md-sys-motion-easing-standard);
}
.btn svg { flex-shrink: 0; width: var(--md-comp-button-icon-size); height: var(--md-comp-button-icon-size); }
/* state layer — spec: hover 8%, focus 10%, pressed 10% in the button's own
   label/icon colour (currentColor keeps the pairing correct for every variant) */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}
.btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
.btn:focus-visible::after { opacity: var(--md-sys-state-focus-opacity); }
.btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }
.btn:focus-visible {
  outline: var(--md-sys-state-focus-indicator-thickness) solid
    var(--md-sys-state-focus-indicator-color);
  outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
}
.btn:active { border-radius: var(--md-comp-button-pressed-container-shape); }

.btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.btn-secondary,
.btn-tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.btn-tertiary {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.btn-outlined {
  border-color: var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-primary);
}
.btn-text {
  padding: 0 var(--md-sys-measurement-space150);
  background: transparent;
  border-color: transparent;
  color: var(--md-sys-color-primary);
}
.btn-danger {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}
.btn-soft {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.btn-elevated {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level1);
}
.btn-elevated:hover { box-shadow: var(--md-sys-elevation-level2); }

/* size variants */
.btn-large {
  height: 56px;
  min-height: 0;
  padding: 0 var(--md-sys-measurement-space300);
  gap: var(--md-sys-measurement-space100);
  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);
  border-radius: var(--md-sys-shape-corner-full);
}
.btn-large svg { width: 24px; height: 24px; }
.btn-large:active { border-radius: var(--md-sys-shape-corner-medium); }
.btn-sm,
.btn-small {
  height: 32px;
  min-height: 0;
  padding: 0 var(--md-sys-measurement-space150);
  gap: var(--md-sys-measurement-space50);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
}
.btn-sm svg,
.btn-small svg { width: 20px; height: 20px; }

/* disabled — spec: filled container on-surface 12%, label on-surface 38% */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: default;
  box-shadow: none;
}
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-tonal:disabled,
.btn-tertiary:disabled,
.btn-danger:disabled,
.btn-soft:disabled,
.btn-elevated:disabled {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
.btn-outlined:disabled,
.btn-text:disabled {
  background: transparent;
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
.btn:disabled::after { display: none; }

/* Minimum target area 48×48 without changing the 40px visual height/width. */
.btn::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - 100%) / -2) 0;
  min-height: var(--md-comp-target-size);
  border-radius: inherit;
}
.icon-button::before {
  content: "";
  position: absolute;
  inset: calc((var(--md-comp-target-size) - var(--md-comp-icon-button-container-height)) / -2);
  min-height: var(--md-comp-target-size);
  min-width: var(--md-comp-target-size);
  border-radius: inherit;
}
.btn-icon-only {
  width: var(--md-comp-button-container-height);
  padding: 0;
  border-radius: var(--md-sys-shape-corner-full);
}

/* Legacy pill filter buttons → M3 filter chips (kept as class alias). */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-measurement-space100);
  height: var(--md-comp-chip-container-height);
  padding: 0 var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-comp-chip-container-shape);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  white-space: nowrap;
  transition: background-color var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}
.pill::before {
  content: "";
  position: absolute;
  inset: -8px 0;
  min-height: var(--md-comp-target-size);
  border-radius: inherit;
}
.pill:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.pill.active,
.pill[aria-pressed="true"] {
  background: var(--md-sys-color-secondary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-secondary-container);
}
.pill:disabled { opacity: var(--md-sys-state-disabled-opacity); cursor: default; }
.cat-pill,
.toc-pill {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--md-sys-measurement-space100);
  min-height: 24px;
  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);
  font-weight: var(--md-sys-typescale-label-medium-weight);
}

/* ---------------------------------------------------------------------------
   Icon buttons — 40dp, 24dp icon, full round, 48dp target.
   --------------------------------------------------------------------------- */
.icon-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--md-comp-icon-button-container-height);
  min-width: var(--md-comp-icon-button-container-height);
  height: var(--md-comp-icon-button-container-height);
  padding: 0;
  border: 0;
  flex-shrink: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  isolation: isolate;
  transition: background-color var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}
.icon-button svg {
  width: var(--md-comp-icon-button-icon-size);
  height: var(--md-comp-icon-button-icon-size);
}
.icon-button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.icon-button:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.icon-button[aria-pressed="true"],
.icon-button.active {
  color: var(--md-sys-color-on-secondary-container);
  background: var(--md-sys-color-secondary-container);
}

/* ---------------------------------------------------------------------------
   Chips — assist / filter / input / suggestion. 32dp, 8dp corner, label-large.
   Flat chip: 1px outline-variant. Selected filter: secondary-container.
   --------------------------------------------------------------------------- */
.chip {
  position: relative;
  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-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);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  white-space: nowrap;
  transition: background-color var(--md-sys-motion-duration-short2)
    var(--md-sys-motion-easing-standard);
}
.chip svg { width: var(--md-comp-chip-icon-size); height: var(--md-comp-chip-icon-size); flex-shrink: 0; }
.chip::before {
  content: "";
  position: absolute;
  inset: -8px 0;
  min-height: var(--md-comp-target-size);
  border-radius: inherit;
}
.chip:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.chip:focus-visible {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}
.chip.selected,
.chip[aria-pressed="true"],
.chip[aria-checked="true"] {
  background: var(--md-sys-color-secondary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-secondary-container);
}
.chip.selected:hover,
.chip[aria-pressed="true"]:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%,
      var(--md-sys-color-secondary-container));
}
.chip .chip-check { display: none; }
.chip.selected .chip-check { display: inline-block; }
.chip:disabled {
  opacity: var(--md-sys-state-disabled-opacity);
  cursor: default;
}

/* ---------------------------------------------------------------------------
   Cards — 12dp corner.
   outlined (default app card): surface + 1px outline-variant
   filled: surface-container-highest · elevated: surface-container-low + level 1
   --------------------------------------------------------------------------- */
.card {
  display: block;
  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);
  color: var(--md-sys-color-on-surface);
  box-shadow: none;
}
.card > h2:first-child,
.card > h3:first-child { margin-top: 0; }
.card h2 {
  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);
  margin: 0 0 var(--md-sys-measurement-space150);
}
.card h3 {
  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);
  margin: 0 0 var(--md-sys-measurement-space100);
}
.card + .card { margin-top: var(--md-sys-measurement-space150); }
.card-flat,
.card-filled {
  background: var(--md-sys-color-surface-container-highest);
  border-color: transparent;
}
.card-elevated {
  background: var(--md-sys-color-surface-container-low);
  border-color: transparent;
  box-shadow: var(--md-sys-elevation-level1);
}
.card > .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100);
  padding-top: var(--md-sys-measurement-space200);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space25);
  padding: var(--md-sys-measurement-space200);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  min-width: 0;
}
.stat-card strong {
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  color: var(--md-sys-color-on-surface);
}
.stat-card span {
  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);
}

/* Status labels (tonal, never colour-only: callers add text/icons). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space50);
  padding: 0 var(--md-sys-measurement-space100);
  min-height: 24px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge.b-e { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.badge.b-b { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.badge.b-p { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.badge.b-r { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.badge-dot {
  width: var(--md-comp-badge-small-size);
  height: var(--md-comp-badge-small-size);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-error);
  flex-shrink: 0;
}
.badge-count {
  min-width: var(--md-comp-badge-large-height);
  height: var(--md-comp-badge-large-height);
  padding: 0 var(--md-sys-measurement-space50);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-small-weight);
  display: inline-grid;
  place-items: center;
}
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space75);
  height: var(--md-comp-chip-container-height);
  padding: 0 var(--md-sys-measurement-space150);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-variant-numeric: tabular-nums;
}
.retry-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--md-sys-measurement-space100);
  min-height: 24px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-small-weight);
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Tabs (primary navigation tabs) — 48dp, 3dp active indicator, label-large.
   --------------------------------------------------------------------------- */
.mode-tabs,
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--md-sys-measurement-space250);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--md-sys-color-surface-variant);
  scroll-snap-type: x proximity;
  /* M3: scrollable tabs must signpost overflow — soft edge fade on both sides. */
  -webkit-mask-image: linear-gradient(to right, transparent 0,
    var(--md-sys-color-surface) var(--md-sys-measurement-space200),
    var(--md-sys-color-surface) 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%);
}
.mode-tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
/* Horizontal tabs are scrollable on compact: fade the trailing edge so the
   affordance is discoverable (spec: scrollable regions must reveal themselves). */
.mode-tabs, .tabs {
  -webkit-mask-image: linear-gradient(to right, var(--md-sys-color-scrim) calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, var(--md-sys-color-scrim) calc(100% - 28px), transparent 100%);
}
.mode-tab, .tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-measurement-space100);
  height: var(--md-comp-tabs-container-height);
  padding: 0 var(--md-sys-measurement-space200);
  border: 0;
  border-radius: var(--md-sys-shape-corner-none);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}
.mode-tab svg, .tab svg { width: var(--md-comp-tabs-icon-size); height: var(--md-comp-tabs-icon-size); }
.mode-tab:hover, .tab:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  color: var(--md-sys-color-on-surface);
}
.mode-tab::after, .tab::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: var(--md-comp-tabs-active-indicator-height);
  border-radius: var(--md-comp-tabs-active-indicator-shape)
    var(--md-comp-tabs-active-indicator-shape) 0 0;
  background: var(--md-sys-color-primary);
  transition: left var(--md-sys-motion-duration-medium2)
      var(--md-sys-motion-easing-emphasized-decelerate),
    right var(--md-sys-motion-duration-medium2)
      var(--md-sys-motion-easing-emphasized-decelerate);
}
.mode-tab:focus-visible, .tab:focus-visible {
  /* spec: tabs use the focus indicator's inner offset (-3dp) */
  outline-offset: var(--md-sys-state-focus-indicator-inner-offset);
  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
}
.mode-tab.active, .mode-tab[aria-selected="true"],
.tab.active, .tab[aria-selected="true"] {
  color: var(--md-sys-color-primary);
}
.mode-tab.active::after, .mode-tab[aria-selected="true"]::after,
.tab.active::after, .tab[aria-selected="true"]::after { left: 0; right: 0; }

/* ---------------------------------------------------------------------------
   Segmented buttons (outlined) — 40dp, 1px outline, selected secondary-container.
   --------------------------------------------------------------------------- */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--md-sys-measurement-space100);
  max-width: 100%;
}
.segmented > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-measurement-space50);
  height: var(--md-comp-segmented-button-height);
  min-height: var(--md-comp-segmented-button-height);
  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-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);
  text-align: center;
  transition: background-color var(--md-sys-motion-duration-short2)
    var(--md-sys-motion-easing-standard);
}
.segmented > button svg { width: 24px; height: 24px; }
.segmented > button:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.segmented > button.active,
.segmented > button[aria-pressed="true"],
.segmented > button[aria-checked="true"] {
  background: var(--md-sys-color-secondary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-secondary-container);
}
.segmented > button .muted {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-weight-regular);
  opacity: .85;
}
/* Supporting text under a segmented control / field (M3 supporting-text role). */
.field-support,
.field .field-support {
  margin: var(--md-sys-measurement-space50) 0 0;
  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);
}
.segmented > button .muted + .muted { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Text fields (outlined, 56dp, 4dp corner, 1dp outline → 2dp primary focus).
   Markup contract: bare input/select/textarea, optionally wrapped in .field
   with an external <label> + helper/supporting text.
   --------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space50);
  margin-top: var(--md-sys-measurement-space250);
  min-width: 0;
}
.field > label,
.field > .field-label {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
.field small,
.field .field-hint {
  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);
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select {
  width: 100%;
  max-width: 100%;
  height: var(--md-comp-text-field-container-height);
  padding: 0 var(--md-sys-measurement-space200);
  border: var(--md-comp-text-field-outline-width) solid var(--md-sys-color-outline);
  border-radius: var(--md-comp-text-field-container-shape);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  outline: none;
  transition: border-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard);
}
textarea {
  height: auto;
  min-height: 112px;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  resize: vertical;
  line-height: 1.55;
}
input::placeholder,
textarea::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 1; }
input:hover:not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled) { border-color: var(--md-sys-color-on-surface); }
input:focus,
textarea:focus,
select:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 calc(var(--md-comp-text-field-focus-outline-width) -
        var(--md-comp-text-field-outline-width)) var(--md-sys-color-primary);
}
input:disabled,
textarea:disabled,
select:disabled {
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  cursor: default;
}
select {
  padding-right: var(--md-sys-measurement-space600);
  cursor: pointer;
}
input[aria-invalid="true"],
textarea[aria-invalid="true"],
.field.is-error input,
.field.is-error textarea,
.field.is-error select {
  border-color: var(--md-sys-color-error);
}
.field.is-error > label { color: var(--md-sys-color-error); }

/* Search field / search bar — 56dp, full round, surface-container-high. */
.mui-topic-search-wrap,
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  margin: var(--md-sys-measurement-space150) 0;
  padding-left: var(--md-sys-measurement-space600);
  border: 0;
  border-radius: var(--md-comp-search-bar-container-shape);
  background: var(--md-comp-search-bar-container-color);
  min-height: var(--md-comp-search-bar-container-height);
}
.mui-topic-search-wrap:focus-within,
.search-field:focus-within {
  outline: var(--md-sys-state-focus-indicator-thickness) solid
    var(--md-sys-state-focus-indicator-color);
  outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
}
.mui-search-icon,
.search-field > svg {
  position: absolute;
  left: var(--md-sys-measurement-space200);
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
  width: var(--md-comp-search-bar-icon-size, 24px);
  height: var(--md-comp-search-bar-icon-size, 24px);
}
.mui-topic-search-input,
.search-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: calc(var(--md-comp-search-bar-container-height) - 4px);
  padding: 0 var(--md-sys-measurement-space100) 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.mui-topic-search-input:hover,
.mui-topic-search-input:focus,
.search-field input:hover,
.search-field input:focus { border: 0; box-shadow: none; }
.mui-search-clear {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: var(--md-sys-measurement-space50);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: 1;
}
.mui-search-clear:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

/* ---------------------------------------------------------------------------
   Checkbox / radio / switch / slider (spec selection controls)
   --------------------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--md-sys-color-primary);
  width: 18px;
  height: 18px;
  margin: 0;
}

/* Custom topic-selector checkbox (M3: 18dp box, 2dp radius, primary fill) */
.mui-checkbox {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: -13px;
  color: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color var(--md-sys-motion-duration-short2)
    var(--md-sys-motion-easing-standard);
}
.mui-checkbox:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.mui-checkbox-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
/* 18dp box, 2dp radius, 2dp outline (spec md.comp.checkbox.*) */
.mui-checkbox-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--md-comp-checkbox-size);
  height: var(--md-comp-checkbox-size);
  border-radius: var(--md-comp-checkbox-shape);
  border: 2px solid var(--md-sys-color-on-surface-variant);
  background: transparent;
  transition: background-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short2)
      var(--md-sys-motion-easing-standard);
}
.mui-checkbox-native:focus-visible + .mui-checkbox-icon {
  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);
}
/* The legacy markup ships SVG box icons; the M3 visual is the CSS box, so never
   double-render them. */
.mui-checkbox .mui-check-svg,
.mui-checkbox .mui-unchecked-icon,
.mui-checkbox .mui-checked-icon,
.mui-checkbox .mui-indeterminate-icon { display: none; }
.mui-checkbox.checked .mui-checkbox-icon,
.mui-checkbox.indeterminate .mui-checkbox-icon {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary);
}
.mui-checkbox.checked .mui-checkbox-icon::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--md-sys-color-on-primary);
  border-bottom: 2px solid var(--md-sys-color-on-primary);
  transform: translateY(-1px) rotate(-45deg);
}
.mui-checkbox.indeterminate .mui-checkbox-icon::after {
  content: "";
  width: 10px;
  height: 2px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-on-primary);
}
.mui-checkbox.checked, .mui-checkbox.indeterminate { color: var(--md-sys-color-primary); }

/* Topic selector list (M3 list) */
.mui-topic-selector-card {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  overflow: hidden;
}
.mui-topics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space150);
  flex-wrap: wrap;
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.mui-master-label {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space100);
  min-width: 0;
  cursor: pointer;
  min-height: 48px;
}
.mui-master-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.mui-master-title {
  font-size: var(--md-sys-typescale-title-small-size);
  font-weight: var(--md-sys-typescale-title-small-weight);
}
.mui-master-sub { font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
.mui-master-sub b { color: var(--md-sys-color-on-surface); }
.mui-topics-btn-group { display: flex; flex-wrap: wrap; gap: var(--md-sys-measurement-space75); }
.mui-topic-list {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mui-topic-item {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space150);
  min-height: var(--md-comp-list-item-height);
  padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
  margin: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short1)
    var(--md-sys-motion-easing-standard);
}
.mui-topic-item:last-child { border-bottom: 0; }
.mui-topic-item:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.mui-topic-item.selected { background: transparent; }
.mui-topic-item.selected .mui-topic-title { font-weight: var(--md-sys-typescale-weight-medium); }
.mui-topic-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.mui-topic-num { font-size: var(--md-sys-typescale-label-small-size); color: var(--md-sys-color-on-surface-variant); }
.mui-topic-title { font-size: var(--md-sys-typescale-body-large-size); overflow-wrap: anywhere; }
.mui-topic-badge {
  flex-shrink: 0;
  padding: 0 var(--md-sys-measurement-space100);
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  white-space: nowrap;
}
.mui-topic-empty {
  padding: var(--md-sys-measurement-space250) var(--md-sys-measurement-space200);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
}

/* Expressive slider (M3 2025): 16dp track, 4×44dp handle. */
input[type="range"] {
  --range-p: 50%;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: var(--md-comp-slider-track-thickness);
  border-radius: var(--md-sys-shape-corner-full);
  background: linear-gradient(
    to right,
    var(--md-sys-color-primary) 0 var(--range-p),
    var(--md-sys-color-secondary-container) var(--range-p) 100%
  );
}
input[type="range"]::-moz-range-track {
  height: var(--md-comp-slider-track-thickness);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
}
input[type="range"]::-moz-range-progress {
  height: var(--md-comp-slider-track-thickness);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--md-comp-slider-handle-width);
  height: var(--md-comp-slider-handle-height);
  margin-top: calc((var(--md-comp-slider-track-thickness) - var(--md-comp-slider-handle-height)) / 2);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level1);
}
input[type="range"]::-moz-range-thumb {
  width: var(--md-comp-slider-handle-width);
  height: var(--md-comp-slider-handle-height);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: var(--md-sys-state-focus-indicator-thickness) solid
    var(--md-sys-state-focus-indicator-color);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Callouts / feedback / notes (tonal containers, never decorative gradients)
   --------------------------------------------------------------------------- */
.notice,
.callout {
  padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
}
.notice b, .callout b { font-weight: var(--md-sys-typescale-weight-semibold); }
.notice.warning, .callout.warning,
.notice.is-warning, .callout.is-warning {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}
.notice.danger, .callout.danger,
.notice.is-danger, .callout.is-danger {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.notice.success, .callout.success,
.notice.is-success, .callout.is-success {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.feedback {
  padding: var(--md-sys-measurement-space200);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.6;
}
.feedback.good, .feedback.is-correct {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.feedback.bad, .feedback.is-wrong {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.feedback .explanation { margin-top: var(--md-sys-measurement-space100); }
.explanation, .calc-explain {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.65;
  color: var(--md-sys-color-on-surface);
}
.explanation .katex, .calc-explain .katex { font-size: 1.02em; }
.source {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: 1.45;
  color: var(--md-sys-color-on-surface-variant);
}
.muted { color: var(--md-sys-color-on-surface-variant); }
.small { font-size: var(--md-sys-typescale-body-small-size); }
.highlight {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 0 var(--md-sys-measurement-space50);
}
.empty {
  padding: var(--md-sys-measurement-space400) var(--md-sys-measurement-space250);
  text-align: center;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
}
.config-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-measurement-space150);
  margin-top: var(--md-sys-measurement-space300);
  padding-top: var(--md-sys-measurement-space200);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.config-actions .btn { flex: 1 1 220px; }
@media (min-width: 600px) { .config-actions .btn { flex: 0 0 auto; } }

/* ---------------------------------------------------------------------------
   Progress — 4dp rounded, primary indicator on secondary-container track.
   --------------------------------------------------------------------------- */
.bar {
  position: relative;
  width: 100%;
  height: var(--md-comp-progress-track-thickness);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-comp-progress-track-color);
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--md-comp-progress-indicator-color);
  transition: width var(--md-sys-motion-duration-medium2)
    var(--md-sys-motion-easing-emphasized-decelerate);
}
.lifeline-bar {
  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);
}
.question-label {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  color: var(--md-sys-color-on-surface-variant);
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space150);
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}

/* ---------------------------------------------------------------------------
   Lists
   --------------------------------------------------------------------------- */
.list-item {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space200);
  min-height: var(--md-comp-list-item-height);
  padding: 0 var(--md-sys-measurement-space200);
  border-radius: var(--md-sys-shape-corner-none);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-large-size);
  text-align: left;
  width: 100%;
  transition: background-color var(--md-sys-motion-duration-short1)
    var(--md-sys-motion-easing-standard);
}
.list-item:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.list-item.selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-radius: var(--md-sys-shape-corner-large);
}
.list-item > svg { width: var(--md-comp-list-icon-size); height: var(--md-comp-list-icon-size); flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Menus (surface-container, 4dp corner, 48dp items, level 2)
   --------------------------------------------------------------------------- */
.menu,
.menu-surface {
  min-width: 200px;
  max-width: 320px;
  padding: var(--md-sys-measurement-space100) 0;
  border-radius: var(--md-comp-menu-container-shape);
  background: var(--md-comp-menu-container-color);
  box-shadow: var(--md-sys-elevation-level2);
  color: var(--md-sys-color-on-surface);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--md-sys-measurement-space150);
  width: 100%;
  min-height: var(--md-comp-menu-item-height);
  padding: 0 var(--md-sys-measurement-space150);
  background: transparent;
  border: 0;
  border-radius: var(--md-sys-shape-corner-none);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  text-align: left;
}
.menu-item:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.menu-item.selected { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.menu-divider { height: 1px; background: var(--md-sys-color-outline-variant); margin: var(--md-sys-measurement-space100) 0; }

/* ---------------------------------------------------------------------------
   Dividers, kbd, bookmarks, misc shared
   --------------------------------------------------------------------------- */
.divider {
  height: var(--md-comp-divider-thickness);
  background: var(--md-comp-divider-color);
  border: 0;
  margin: var(--md-sys-measurement-space250) 0;
}
kbd {
  display: inline-block;
  padding: 0 var(--md-sys-measurement-space75);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: 1.4;
}
.bookmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-measurement-space100);
  height: var(--md-comp-button-container-height);
  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-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  transition: background-color var(--md-sys-motion-duration-short2)
    var(--md-sys-motion-easing-standard);
}
.bookmark svg { width: 20px; height: 20px; }
.bookmark::before {
  content: "";
  position: absolute;
  inset: -4px;
  min-width: var(--md-comp-target-size);
  min-height: var(--md-comp-target-size);
  border-radius: inherit;
}
.bookmark:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.bookmark.active {
  background: var(--md-sys-color-warning-container);
  border-color: transparent;
  color: var(--md-sys-color-on-warning-container);
}
.settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sys-measurement-space150);
  margin-top: var(--md-sys-measurement-space300);
  padding-top: var(--md-sys-measurement-space200);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--md-sys-measurement-space100);
  padding: var(--md-sys-measurement-space300);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.empty-state h3 {
  font-size: var(--md-sys-typescale-title-medium-size);
  margin: 0;
}

/* Chart figures — tonal card, caption supporting text */
.chart-card {
  padding: var(--md-sys-measurement-space150);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
}
.chart-img-wrap {
  border-radius: var(--md-sys-shape-corner-small);
  overflow: hidden;
  background: var(--md-sys-color-surface);
}
.chart-caption { padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space50) 0; }
.chart-caption-title {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  color: var(--md-sys-color-on-surface);
  margin: 0;
}
.chart-caption-desc {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  margin: var(--md-sys-measurement-space25) 0 0;
}

/* Formula rows (shared by formulas view and sandboxes) */
.formula-item {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  padding: var(--md-sys-measurement-space200) 0;
}
.formula-item:last-child { border-bottom: 0; }
.formula-item-name {
  font-size: var(--md-sys-typescale-title-small-size);
  font-weight: var(--md-sys-typescale-title-small-weight);
  color: var(--md-sys-color-on-surface);
  margin: 0 0 var(--md-sys-measurement-space50);
}
.formula-item-raw {
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
}
.formula-item-calc {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}
.formula-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--md-sys-measurement-space100);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
}


/* ---------------------------------------------------------------------------
   Hero-training primitives shared by the exercise modules (tonal surfaces)
   --------------------------------------------------------------------------- */
.statement-card {
  padding: var(--md-sys-measurement-space200);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}
.statement-card--strong {
  font-size: var(--md-sys-typescale-body-large-size);
  font-weight: var(--md-sys-typescale-weight-medium);
}
.statement-line {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: 1.5;
  margin: 0;
}
.statement-line--strong { font-weight: var(--md-sys-typescale-weight-medium); }
.hero-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sys-measurement-space50);
  min-height: 32px;
  padding: 0 var(--md-sys-measurement-space150);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-label-large-size);
  font-variant-numeric: tabular-nums;
}
.hero-stat-pill--warning {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}
.val-bad { color: var(--md-sys-color-error); }
.val-good { color: var(--md-sys-color-tertiary); }
tr.row-max { background: var(--md-sys-color-tertiary-container); }
tr.row-min { background: var(--md-sys-color-error-container); }
.hero-stepper {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-measurement-space75);
  margin: var(--md-sys-measurement-space100) 0 var(--md-sys-measurement-space200);
}
.hero-stepper-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100);
  flex-wrap: wrap;
  font-size: var(--md-sys-typescale-label-large-size);
  color: var(--md-sys-color-on-surface-variant);
}
.hero-stepper-meta b { color: var(--md-sys-color-on-surface); font-variant-numeric: tabular-nums; }
.hero-stepper-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-measurement-space100);
  margin-top: var(--md-sys-measurement-space50);
}
.hero-stepper-actions .btn { flex: 1 1 auto; }
@media (min-width: 600px) { .hero-stepper-actions .btn { flex: 0 0 auto; } }


/* ---------------------------------------------------------------------------
   M3 ripple — transient state-layer feedback (state layer 10%, emphasized
   decelerate, ~450ms). Injected by app.js and clipped by the rounded host.
   --------------------------------------------------------------------------- */
.m3-ripple-host { position: relative; overflow: hidden; }
.m3-ripple {
  position: absolute;
  border-radius: var(--md-sys-shape-corner-full);
  background: currentColor;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  animation: m3-ripple-in var(--md-sys-motion-duration-long1)
    var(--md-sys-motion-easing-emphasized-decelerate) forwards;
}
@keyframes m3-ripple-in {
  0% { opacity: var(--md-sys-state-pressed-opacity); transform: scale(0); }
  100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .m3-ripple { display: none; }
}

/* Focus / selection tones used by views */
::target-text { background: var(--md-sys-color-primary-container); }