/* Only running-pace-time-distance pages load this stylesheet. */
:root {
  --rp-surface: #fff;
  --rp-soft: #f1f5f9;
  --rp-text: #0f172a;
  --rp-muted: #475569;
  --rp-border: #94a3b8;
  --rp-accent: #075985;
  --rp-active: #075985;
  --rp-result: #edf8ff;
  --rp-error: #a11212;
}
:root.dark {
  --rp-surface: #102438;
  --rp-soft: #152e44;
  --rp-text: #f1f5f9;
  --rp-muted: #cbd5e1;
  --rp-border: #64748b;
  --rp-accent: #7dd3fc;
  --rp-active: #075985;
  --rp-result: #102b3d;
  --rp-error: #ffb4b4;
}
body[data-calculator-slug="running-pace-time-distance"] { color: var(--rp-text); background: var(--rp-surface); }
body[data-calculator-slug="running-pace-time-distance"] .card { color: var(--rp-text); background: var(--rp-surface); }
.hero-card { background: var(--rp-soft); }
.eyebrow { font-weight: 800; color: var(--rp-accent); }
.lead { font-size: 1.05rem; }
main a, h1 { overflow-wrap: anywhere; }
.layout { display: grid; gap: 16px; }
.two-col { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }
.layout > *, .field-grid > *, .stat-grid > *, .result-shell { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--rp-border); border-radius: 12px; background: var(--rp-surface); }
.field-grid, .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 10px; }
.field[role="group"] .field-grid { grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr)); }
.field.has-error .input { border-color: var(--rp-error); }
.field .input { width: 100%; min-width: 0; color: var(--rp-text); background: var(--rp-surface); }
.field .input::placeholder { color: var(--rp-muted); opacity: 1; }
.field small, .muted, .note, .preset-note { color: var(--rp-muted); }
[hidden], .is-hidden { display: none !important; }
.chip-row, .mode-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .mode-switch button { border: 1px solid var(--rp-border); background: var(--rp-surface); color: var(--rp-text); border-radius: 10px; padding: 10px 12px; font-weight: 700; cursor: pointer; white-space: normal; }
.chip { border-radius: 999px; }
.chip.is-active, .mode-switch button.is-active { background: var(--rp-active); color: #fff; border-color: var(--rp-active); }
:root.dark body[data-calculator-slug="running-pace-time-distance"] .chip.is-active { background: var(--rp-active); color: #fff; border-color: var(--rp-accent); }
#running-pace-form :focus-visible { outline: 3px solid var(--rp-accent); outline-offset: 3px; }
#running-pace-controls { border: 0; padding: 0; margin: 0; min-inline-size: 0; display: grid; gap: 12px; }
.running-presets { margin-top: 8px; }
.pill { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--rp-soft); color: var(--rp-text); font-weight: 700; }
.result-shell { color: var(--rp-text); background: var(--rp-result); border: 1px solid var(--rp-border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.primary-label { font-weight: 800; color: var(--rp-muted); }
.primary-value { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; margin: 4px 0 8px; color: var(--rp-text); overflow-wrap: anywhere; text-align: start; }
.stat, .stat.is-plain { background: var(--rp-surface); color: var(--rp-text); padding: 12px; border-radius: 12px; border: 1px solid var(--rp-border); }
.stat .label { color: var(--rp-muted); font-size: .95rem; }
.stat .value { font-size: 1.4rem; font-weight: 800; color: var(--rp-text); overflow-wrap: anywhere; }
.result-summary { font-weight: 600; color: var(--rp-text); }
.lap-shell { margin-top: 12px; border-top: 1px solid var(--rp-border); padding-top: 10px; }
.lap-shell .two-col { grid-template-columns: minmax(0, 1fr); }
.lap-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lap-table th, .lap-table td { color: var(--rp-text); background: transparent; text-align: start; padding: 6px; border-bottom: 1px solid var(--rp-border); overflow-wrap: anywhere; }
.lap-table td[dir="ltr"] { text-align: end; font-variant-numeric: tabular-nums; }
.lap-table tr[data-finish] { font-weight: 700; }
.finish-label { display: inline; }
.error-text, #form-error { color: var(--rp-error); }
.error-text { min-height: 1.1em; }
#running-pace-form .sticky-bar { position: static; }
#running-pace-form .button { color: var(--rp-text); background: var(--rp-surface); border-color: var(--rp-border); white-space: normal; overflow-wrap: anywhere; }
#running-pace-form .button.primary { color: #fff; background: var(--rp-active); }
#running-pace-form button:disabled { cursor: default; }
#running-pace-controls:disabled { opacity: .7; }
@media (max-width: 400px) {
  .result-shell { padding: 10px; }
  .field { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #running-pace-form * { transition: none !important; animation: none !important; }
}