/* =============================================================
   Rowing pace calculator. Page-only styles on top of instrument.css (the
   shared card-free tool layout). Only what is unique to this tool: the
   linked watts / cal-per-hour fields, the piece result inside the readout,
   the custom target field and the four-column split chart.
   ============================================================= */

/* The split is text (m:ss.t), so the stepper field needs a wider measure. */
.erg .inst-step__field input { max-width: 6.4ch; }

/* Linked fields: two hairline-underlined numbers side by side. */
.erg-linked { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.erg-linked label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.erg-linked__k { font-size: 13px; font-weight: 600; color: #8A8A93; }
.erg-linked__field { display: flex; align-items: baseline; gap: 6px; border-bottom: 1px solid #2A2A2E; transition: border-color .2s ease; }
.erg-linked__field:focus-within { border-color: #fff; }
.erg-linked input {
  width: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; color: #fff; padding: 0 0 6px;
  font: 800 28px/1.15 'Inter', sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.erg-linked input:focus { outline: none; }
.erg-linked__field span { font-size: 13px; font-weight: 700; color: #71717A; white-space: nowrap; }
.erg-hint { margin-top: 14px; font-size: 14px; line-height: 1.55; color: #E4E4E7; border-left: 2px solid var(--accent); padding-left: 14px; }
.erg-hint[hidden] { display: none; }

/* Piece result: part of the readout, set off by a hairline, one size down. */
.erg-piece__res { margin-top: 30px; padding-top: 22px; border-top: 1px solid #1F1F1F; }
.erg-piece__big { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.erg-piece__big b { font-family: 'Archivo Black', 'Inter', sans-serif; font-style: italic; font-weight: 400; font-size: clamp(52px, 14vw, 84px); line-height: .88; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.erg-piece__big span { font-size: 18px; font-weight: 800; color: #8A8A93; }
.erg-piece__note { margin-top: 12px; font-size: 14px; color: #A0A0A0; line-height: 1.5; }

/* Custom target: a hairline field under the chips, never a box. */
.erg-custom-wrap { display: block; margin-top: 16px; max-width: 280px; }
.erg-custom {
  width: 100%; min-height: 44px; padding: 0 0 6px; border: 0; border-bottom: 1px solid #2A2A2E; border-radius: 0; background: transparent;
  color: #fff; font: 700 16px/1.3 'Inter', sans-serif; transition: border-color .2s ease;
}
.erg-custom::placeholder { color: #52525B; font-weight: 600; }
.erg-custom:focus { outline: none; border-color: #fff; }

/* Split chart: four columns on desktop, the 2k column drops on phones. */
.erg-thead, .erg .erg-r { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
.erg-thead { display: grid; gap: 16px; margin-top: 12px; padding: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #52525B; }
.erg-thead span:not(:first-child), .erg-r .inst-r__s, .erg-r .inst-r__v { text-align: right; }
.erg .erg-r .erg-r__k { text-align: left; }
@media (max-width: 559px) {
  .erg-thead, .erg .erg-r { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.3fr); }
  .erg .erg-t { display: none; }
}
@media (max-width: 400px) { .erg-linked input { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .erg-linked__field, .erg-custom { transition: none; } }

/* The split is six characters wide (2:00.0), so the shared answer size
   overruns the column. Scale it to fit, and let "/500m" drop under it on
   narrow phones rather than clip. */
.erg .inst__num { flex-wrap: wrap; row-gap: 4px; }
.erg .inst__num b { font-size: clamp(64px, 20vw, 124px); }
@media (min-width: 960px) { .erg .inst__num b { font-size: clamp(88px, 8.4vw, 124px); } }

/* "Your piece" sits beside a three-way pill; on phones the pill drops to
   its own line at full width rather than squeezing the label onto two. */
.erg .inst__row-h { flex-wrap: wrap; row-gap: 12px; }
.erg .inst__row-h .inst__k { white-space: nowrap; }
@media (max-width: 480px) { .erg #erg-tabs { width: 100%; } }