/* =============================================================
   Running pace calculator. Page-only styles on top of instrument.css (the
   shared card-free tool layout). Only what is unique to this tool: the
   solve-for pill, the free-text time and distance fields, and the in-row
   "finish" / "your run" tags.
   ============================================================= */

/* Solve for spans the sheet: three equal segments, the widest control. */
.pace-solve { display: grid; width: 100%; }
.pace-solve button { min-width: 0; padding: 0 12px; }
.pace .inst__row-h { align-items: center; }

.pace-field[hidden] { display: none; }
/* A big typed figure. The row's own hairline is its underline (a second
   rule under the input read as a double line), and it turns white while
   the field has focus. */
.pace-input { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pace-field { transition: border-color .2s ease; }
.pace-field:focus-within { border-bottom-color: #fff; }
.pace-input input {
  flex: 1 1 auto; width: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; color: #fff;
  font: 800 clamp(36px, 10vw, 48px)/1.1 'Inter', sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  padding: 0; cursor: text;
}
.pace-input input:focus { outline: none; }
.pace-input input::placeholder { color: #3F3F46; }
.pace-input > span { flex: none; font-size: 15px; font-weight: 700; color: #71717A; }
.pace-input > span b { font-weight: 700; }
.pace-chips { margin-top: 16px; }

/* Marathon in km is 43 rows: scroll inside the table, not the page. */
.pace-scroll { max-height: 510px; overflow-y: auto; overscroll-behavior: contain; }
.inst-r__k em { font-style: normal; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #71717A; }
.inst-r.is-on .inst-r__k em { color: #0A0A0A; }
.pace-note { margin-top: 14px; font-size: 13px; line-height: 1.55; color: #71717A; }

@media (prefers-reduced-motion: reduce) { .pace-field { transition: none; } }