/* Load after visual themes. Keep compact layouts usable with touch and keyboards. */
.set-head,
.set-row {
  grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 44px 44px;
  gap: 6px;
}

.set-head.duration,
.set-row.duration {
  grid-template-columns: 22px minmax(0, 1fr) 44px 44px;
}

.done-set,
.remove-set {
  min-width: 44px;
  min-height: 44px;
}

.done-set::before,
.remove-set::before {
  inset: 0;
}

.exercise-title-row .text-button {
  min-height: 44px;
}

/* Existing separate labels remain generous targets while rows become labels. */
.toggle-row > label {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 44px;
  margin: 0;
}

input::placeholder,
textarea::placeholder {
  color: #86664d;
  opacity: 1;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #a13426;
}

/* Reserve space for the sticky action footer when a field receives focus. */
#sheet-content {
  scroll-padding-block: 24px calc(104px + env(safe-area-inset-bottom));
}

#sheet-content :is(input, select, textarea, button, a, summary) {
  scroll-margin-block: 16px;
}

:where(h1, h2, h3, h4)[id] {
  scroll-margin-block-start: 24px;
}

@media (min-width: 600px) {
  .set-head,
  .set-row {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 44px 44px;
    gap: 10px;
  }

  .set-head.duration,
  .set-row.duration {
    grid-template-columns: 30px minmax(0, 1fr) 44px 44px;
  }
}

@media (max-width: 1059px) {
  html {
    scroll-padding-block-end: calc(112px + env(safe-area-inset-bottom));
  }

  :where(main button, main input, main select, main textarea, main a, main summary) {
    scroll-margin-block-end: calc(112px + env(safe-area-inset-bottom));
  }
}

@media (forced-colors: active) {
  :is(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid Highlight;
  }

  button[aria-pressed="true"],
  a[aria-current="page"] {
    outline: 2px solid Highlight;
    outline-offset: -3px;
  }
}