/* Dialogs: one size model for every form, picker, read view and workout.
 * Header / scrolling body / footer are grid rows, never overlapping layers.
 * A definite height prevents auto-height + zero-basis flex collapse on mobile.
 */
body.dialog-open { overflow: hidden; overscroll-behavior: none; }
#modal {
  --dialog-viewport-width: 100vw;
  --dialog-viewport-height: 100dvh;
  --dialog-viewport-top: 0px;
  --dialog-viewport-left: 0px;
  --dialog-height: 740px;
  --dialog-width: 600px;
  position: fixed;
  inset: var(--dialog-viewport-top) auto auto var(--dialog-viewport-left);
  margin: 0;
  margin-inline-start: max(16px, calc((var(--dialog-viewport-width) - var(--dialog-width)) / 2));
  margin-block-start: max(16px, calc((var(--dialog-viewport-height) - var(--dialog-height)) / 2));
  inline-size: min(var(--dialog-width), calc(var(--dialog-viewport-width) - 32px));
  block-size: min(var(--dialog-height), calc(var(--dialog-viewport-height) - 32px));
  max-inline-size: none;
  max-block-size: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 16px 56px #19251e26;
  overflow: hidden;
}
#modal:not([open]) { display: none; }
#modal[open] { display: block; }
#modal::backdrop { background: #19251e55; }
#modal.compact-dialog { --dialog-height: 460px; }
#modal.workout-dialog { --dialog-width: 960px; --dialog-height: 800px; }
.dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  block-size: 100%;
  min-block-size: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
}
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  min-inline-size: 0;
}
.dialog-heading { min-inline-size: 0; }
.dialog-head h2 { font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.dialog-head h2:focus { outline: none; }
.dialog-head small { display: block; margin-top: 4px; font-size: 11px; }
#modal .dialog-head .icon-btn { inline-size: 44px; block-size: 44px; }
.dialog-body {
  min-block-size: 0;
  min-inline-size: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 16px;
  padding: 22px;
}
.dialog-body > :last-child { margin-bottom: 0; }
.dialog-body input, .dialog-body select, .dialog-body textarea { min-inline-size: 0; font-size: 16px; }
.dialog-body .field, .dialog-body .form-grid, .dialog-body .form-more { min-inline-size: 0; }
.dialog-body input[type=file] { font-size: 13px; }
.dialog-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  min-inline-size: 0;
  background: var(--surface);
}
#modal .dialog-foot .btn { min-height: 44px; white-space: normal; line-height: 1.25; }
.dialog-foot .grow { min-inline-size: 0; }

/* Workout execution: compact switcher in portrait, list + exercise in landscape. */
.workout-progress { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; font-size: 12px; color: var(--muted); }
.workout-run { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; gap: 22px; min-inline-size: 0; }
.exercise-select { display: none; }
.exercise-nav { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.exercise-nav button { min-height: 44px; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 11px; font-size: 12px; overflow-wrap: anywhere; }
.exercise-nav button.active { background: var(--tint); border-color: #C4D6BC; }
.exercise-nav button small { display: block; margin-top: 3px; font-size: 10px; }
.exercise-current { min-inline-size: 0; }
.exercise-current h2 { font-size: 21px; line-height: 1.3; overflow-wrap: anywhere; }
.exercise-current .between > div { min-inline-size: 0; }
.set-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 44px; align-items: end; gap: 10px; margin: 14px 0; }
.set-index { color: var(--muted); font-size: 13px; align-self: center; padding-top: 17px; }
.set-row label { min-inline-size: 0; font-size: 10px; color: var(--muted); }
.set-row input { margin-top: 5px; min-height: 48px; font-size: 16px; }
.set-row .check { margin: 0 0 2px; width: 44px; height: 44px; border-radius: 10px; }
.set-row .check .i { width: 21px; height: 21px; }
.rest-timer { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--tint); border: 1px solid #E1EBDC; border-radius: 12px; padding: 12px 15px; margin: 18px 0; }
.rest-timer strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.rest-timer small { font-size: 11px; }
#modal .rest-timer .btn { min-height: 44px; }

/* Phones in either orientation. The shell follows the visual viewport/keyboard. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 550px) and (max-width: 1100px) {
  #modal {
    inline-size: var(--dialog-viewport-width);
    block-size: var(--dialog-viewport-height);
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .dialog-head {
    padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  }
  .dialog-head h2 { font-size: 18px; line-height: 1.3; }
  .dialog-head small { font-size: 11px; margin-top: 3px; }
  .dialog-body {
    padding: 18px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px));
  }
  .dialog-foot {
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    gap: 8px;
  }
  #modal[data-keyboard='1'] .dialog-foot { padding-bottom: 10px; }
  #modal .dialog-foot .btn { min-height: 46px; padding: 10px 14px; font-size: 13px; }
  #modal.workout-dialog .dialog-foot .btn { flex: 1 1 0; }
  .dialog-body .btn:not(.small) { min-height: 44px; }
  .workout-progress { margin-bottom: 14px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .workout-run { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .exercise-nav { display: none; }
  .exercise-select { display: block; margin-bottom: 18px; }
  .exercise-select span { display: block; margin-bottom: 6px; font-size: 11px; color: var(--muted); }
  .exercise-select select { min-height: 48px; }
}
@media (max-width: 420px) and (orientation: portrait) {
  #modal .form-grid { grid-template-columns: minmax(0, 1fr); }
  #modal .field.full { grid-column: 1 / -1; }
  .set-row { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; }
  .set-row input { padding: 10px; }
}
@media (orientation: landscape) and (max-height: 550px) and (max-width: 1100px) {
  .dialog-head { padding-top: max(6px, env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
  .dialog-head h2 { font-size: 17px; }
  .dialog-head small { display: none; }
  .dialog-body { padding-top: 12px; padding-bottom: 14px; }
  .dialog-foot { padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  #modal .dialog-foot .btn { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  #modal .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #modal .field.full { grid-column: 1 / -1; }
  .workout-run { grid-template-columns: minmax(130px, 24%) minmax(0, 1fr); gap: 16px; }
  .exercise-nav button { font-size: 11px; padding: 9px; }
  .exercise-current h2 { font-size: 18px; }
  .workout-progress { margin-bottom: 10px; }
  .rest-timer { margin: 12px 0; padding: 9px 12px; }
}
/* Under an open keyboard, preserve content instead of a large title/subtitle. */
#modal[data-keyboard='1'] .dialog-head { padding-top: 6px; padding-bottom: 6px; }
#modal[data-keyboard='1'] .dialog-head small { display: none; }
#modal[data-keyboard='1'] .dialog-head h2 { font-size: 16px; }

/* Four overlay roles share the same scrolling and focus lifecycle. */
.dialog-mobile-back, .sheet-grip { display: none; }
.dialog-close { border: 0; background: transparent; color: var(--muted); flex-shrink: 0; }
.dialog-desktop-close { display: flex; align-items: center; justify-content: center; }
#modal[data-kind='dialog'] { --dialog-width: 440px; --dialog-height: 250px; }
.confirm-message { font-size: 15px; line-height: 1.65; }
#modal .field > label { font-size: 12px; font-weight: 600; color: #59625c; }
#modal .field > small { font-size: 12px; line-height: 1.5; }
#modal .form-grid { gap: 20px 16px; }
#modal .dialog-body input, #modal .dialog-body select, #modal .dialog-body textarea { border-radius: 8px; border-color: #dce2dd; }
#modal .dialog-body :is(input, select, textarea):focus { outline: 2px solid #427a6359; outline-offset: 1px; border-color: var(--green); }
@media (max-width: 700px), (orientation: landscape) and (max-height: 550px) and (max-width: 1100px) {
  .dialog-mobile-back { display: inline; font-size: 24px; font-weight: 400; }
  .dialog-desktop-close { display: none; }
  .dialog-close { order: -1; margin-left: -10px; }
  .dialog-heading { flex: 1; }
  .dialog-head { gap: 8px; }
  #modal[data-submit-top='1'] .dialog-foot { display: none; }
  #modal[data-submit-top='1'] .dialog-shell { grid-template-rows: auto minmax(0, 1fr) auto; }
  #modal .dialog-head [type=submit] { padding: 8px 10px; min-height: 44px; background: transparent; color: var(--green); font-size: 14px; font-weight: 650; border: 0; border-radius: 8px; max-width: 40%; }
  #modal[data-kind='sheet'] { block-size: min(540px, calc(var(--dialog-viewport-height) - 24px)); margin-block-start: max(24px, calc(var(--dialog-viewport-height) - 540px)); border-radius: 18px 18px 0 0; }
  #modal[data-kind='sheet'] .dialog-shell { grid-template-rows: 16px auto minmax(0, 1fr) auto; }
  .sheet-grip { display: block; width: 64px; height: 16px; padding: 0; margin: auto; touch-action: none; }
  .sheet-grip::before { content: ''; display: block; width: 32px; height: 4px; border-radius: 4px; margin: auto; background: #c8cfc9; }
  #modal[data-kind='sheet'] .dialog-head { padding-top: 2px; }
  #modal[data-kind='dialog'] { inline-size: min(440px, calc(var(--dialog-viewport-width) - 32px)); block-size: min(260px, calc(var(--dialog-viewport-height) - 32px)); margin-inline-start: max(16px, calc((var(--dialog-viewport-width) - 440px) / 2)); margin-block-start: max(16px, calc((var(--dialog-viewport-height) - 260px) / 2)); border-radius: 14px; }
  #modal[data-kind='dialog'] .dialog-head { padding-top: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  #modal[open] { animation: overlay-enter 160ms ease-out; }
  #modal[data-kind='sheet'][open] { animation: sheet-enter 180ms ease-out; }
  @keyframes overlay-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes sheet-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}