/* ==========================================================================
   Running pace calculator
   Adds three things to the shared calculator layout: a row of three small
   time boxes, and two side-by-side panels under the answer — the splits on
   the left, what the same effort is worth elsewhere on the right.
   ========================================================================== */

/* Hours, minutes, seconds. Even thirds, because none of the three is more
   important than the others and a wide "hours" box invites a time typed
   entirely into it. */
.ci-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}

/* The two panels sit level with each other and scroll independently, so a
   marathon's splits do not push the predictions off the bottom of the page. */
.pace-cols{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:22px;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
}
@media (max-width:760px){
  .pace-cols{grid-template-columns:1fr;gap:18px;}
}

.pace-col h4{
  margin:0 0 6px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
}

/* Twenty-six rows is a useful table and a bad page. Capped, and scrolled
   inside its own box rather than made shorter by throwing rows away. */
.pace-splits{
  max-height:290px;overflow-y:auto;
  border-top:1px solid var(--rule);
}
.pace-splits .res-row{padding:8px 0;font-size:.88rem;}
.pace-splits .res-row.total{border-top:1px solid var(--rule);}

/* The shared .res-rows draws its own top border; inside this column it would
   double up with the heading rule. */
.pace-col .res-rows{margin-top:0;}
.pace-col .ci-hint{margin-top:10px;}