/* Mode facts extend the existing Velvet Frequency catalog. */
.mode-facts {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.mode-facts > div {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 12px;
  align-items: baseline;
}
.mode-facts dt {
  color: var(--muted-light);
  font-size: var(--type-caption);
  line-height: 1.6;
}
.mode-facts dd {
  min-width: 0;
  color: var(--white);
  font-size: var(--type-ui);
  line-height: 1.6;
}
.mode-current {
  display: block;
  font-variant-numeric: lining-nums tabular-nums;
}
.mode-current + .mode-current { margin-top: 4px; }
.battery-runtime {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px 48px;
  border-top: 1px solid var(--surface-hover);
  margin-top: var(--space-block);
  padding-top: var(--space-block);
}
.battery-runtime h3 {
  font-family: var(--display);
  font-size: var(--type-h3);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin-bottom: 12px;
  text-wrap: balance;
}
.battery-runtime-headline,
.battery-runtime-note {
  font-size: var(--type-ui);
  line-height: 1.65;
  max-width: var(--measure-prose);
  margin: 0;
}
.battery-runtime-headline { color: var(--white); }
.battery-runtime-note { color: var(--muted-light); }
@media (max-width: 760px) {
  .battery-runtime {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
@media (max-width: 360px) {
  .mode-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Full-width wording keeps the sound explanation readable at card widths. */
.mode-facts > .mode-sound-fact { grid-template-columns: minmax(0, 1fr); gap: 4px; }

/* Explain mode drain and battery quality before readers compare the figures. */
.battery-runtime--guide { margin: 0 0 32px; padding: 24px; border: 1px solid var(--surface-hover); background: var(--paper); }
.battery-use-explanation { margin: 0 0 16px; color: var(--white); font-size: 16px; line-height: 24px; text-wrap: pretty; }
.battery-runtime--guide .battery-runtime-note { line-height: 24px; text-wrap: pretty; }