* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  /* Clears the tab bar, plus the home indicator on a notched iPhone. */
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 480px; margin: 0 auto; padding: 16px 20px 0; }
.num { font-variant-numeric: tabular-nums; }
.hero { font-size: 60px; font-weight: 700; letter-spacing: -0.022em; line-height: 1; }
.h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.022em; }
.sub { font-size: 14px; color: var(--text-2); }
.muted { color: var(--text-3); }

.card { background: var(--surface); border-radius: var(--radius-card); padding: 14px 16px; }

.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 52px; padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
}
.row:last-child { border-bottom: none; }
.row-label { font-size: 16px; font-weight: 500; }

.check {
  width: 44px; height: 44px; border: none; background: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.check i {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--border); display: block;
  transition: background var(--tap) var(--ease), border-color var(--tap) var(--ease);
}
.check[aria-pressed='true'] i { background: var(--text-1); border-color: var(--text-1); }

/* Set confirmation. Motion is the only feedback channel available -- a PWA on
   iOS cannot trigger haptics -- so the tap has to read as landing. */
@keyframes set-confirmed {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.check.just-logged i { animation: set-confirmed 260ms var(--ease); }

.bar { height: 6px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--text-1); border-radius: var(--radius-pill); transition: width var(--sheet) var(--ease); }

.pill {
  font-size: 14px; font-weight: 600; color: var(--bg); background: var(--text-1);
  border: none; border-radius: var(--radius-pill); padding: 12px 24px;
  min-height: 44px; cursor: pointer;
  transition: transform var(--tap) var(--ease);
}
.pill:active { transform: scale(0.97); }

.field {
  font: inherit; font-variant-numeric: tabular-nums; color: inherit;
  background: none; border: none; width: 100%;
  font-size: 60px; font-weight: 700; letter-spacing: -0.022em;
}
.field:focus { outline: none; }
.field::placeholder {
  color: var(--text-3); opacity: 1;
  font-size: 26px; font-weight: 500; letter-spacing: -0.01em;
}

/* iOS Safari force-zooms the page when a focused input is under 16px.
   Every input in this app must therefore be 16px or larger. Do not use
   maximum-scale=1 to suppress it -- that disables pinch-zoom entirely. */
input, select, textarea { font-size: 16px; }

.inline-num {
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: none;
  border: none;
  text-align: right;
  min-height: 44px;
}
.inline-num:focus { outline: none; color: var(--text-1); }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around;
  padding: 10px 0 calc(22px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid var(--border);
}
.tabs button {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: -0.01em;
  min-width: 88px; min-height: 44px;
  transition: color var(--tap) var(--ease);
}
.tabs button[aria-current='true'] { color: var(--text-1); font-weight: 600; }

.screen { display: none; }
.screen[data-active='true'] { display: block; }

.alert {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  padding: 14px 20px calc(14px + env(safe-area-inset-top));
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--bg); background: var(--text-1);
}
.alert[hidden] { display: none; }

.set-input {
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  background: none;
  border: none;
  min-height: 44px;
}
.set-input:focus { outline: none; }
.set-input:disabled { opacity: 0.5; }

.rest {
  position: fixed; left: 0; right: 0; z-index: 5;
  bottom: calc(76px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid var(--border);
}
.rest[hidden] { display: none; }

/* The rest bar floats over the page, so the page has to make room for it or the
   last set of the last exercise sits underneath it, unreachable mid-rest. */
body.resting { padding-bottom: calc(144px + env(safe-area-inset-bottom)); }
.rest-clock {
  flex: 1;
  font-size: 22px; font-weight: 700; letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.rest-dismiss {
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-2); background: none; border: none; cursor: pointer;
  min-height: 44px; min-width: 60px;
}