/* Native iOS time controls can paint beyond their CSS box. Keep their
   presentation inside a separate boundary, without clipping the field label. */
.segment-timing-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
}
.segment-timing-row > *,
.segment-time-control {
  min-width: 0;
  max-width: 100%;
}
.segment-time-control {
  overflow: hidden;
  border-radius: 4px;
}
.segment-time-control:focus-within {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
.segment-calculator .segment-time-control input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
}
.segment-time-control input::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}
.segment-time-control input::-webkit-datetime-edit {
  min-width: 0;
  padding: 0;
}
/* Touch devices receive roomier timing fields even on a wide tablet.
   The normal Day/Segment/Distance/Elevation grid remains independent. */
@media (max-width: 1100px), (any-pointer: coarse) {
  .segment-timing-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .segment-timing-row { grid-template-columns: minmax(0, 1fr); }
}