/* One stylesheet. The app has a handful of screens and a single job — be
   readable at arm's length, one-handed, in bad light, with chalk on your
   fingers. Everything here serves that.

   Targets are 56px minimum because the user is often holding something.
   Contrast is checked against WCAG 2.2 AA on both themes. */

:root {
  --bg: #fbfaf8;
  --ink: #16181d;
  --muted: #5b6472;
  --line: #e2e0dc;
  --accent: #a8402f;
  --accent-ink: #ffffff;
  --surface: #ffffff;
  --danger: #a3241a;
  --tap: 3.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12131a;
    --ink: #f0f1f5;
    --muted: #9aa6b8;
    --line: #2a2d38;
    --accent: #e08a6d;
    --accent-ink: #1a1005;
    --surface: #1a1c25;
    --danger: #f08b7f;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 32rem;
  margin: 0 auto;
  padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem
    max(1.5rem, env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
  padding-block: 1rem;
}

.screen.centred {
  justify-content: center;
  text-align: center;
  align-items: stretch;
}

h1 {
  font-size: 1.9rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 650;
}

.session-name {
  font-size: 3rem;
  letter-spacing: -0.03em;
}

.exercise-name {
  font-size: 2.1rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.9rem;
}

.reason {
  font-size: 0.95rem;
}

.error {
  color: var(--danger);
  font-size: 0.95rem;
}

.or {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

/* --- the weight, which is the point of the screen --- */

.load {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-block: 0.5rem;
}

.load-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  flex: 1;
}

.load-input {
  font-size: clamp(3.5rem, 22vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  width: 100%;
  max-width: 6em;
  text-align: right;
  border: none;
  background: none;
  color: inherit;
  font-family: inherit;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.load-input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: 0.25rem;
}

.load .unit {
  font-size: 1.25rem;
  color: var(--muted);
  font-weight: 500;
}

.load.bodyweight .load-value {
  font-size: 2rem;
  font-weight: 650;
  justify-content: center;
}

.nudge {
  width: var(--tap);
  height: var(--tap);
  flex: none;
  /* Flex-centred, with the base button's padding cleared — a fixed height plus
     inherited vertical padding squeezes the content box. The mark inside is
     drawn rather than typed (see .nudge-icon), so this centres a box whose
     contents are already centred, instead of hoping a font agrees. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

/* Two bars, centred by geometry rather than by font metrics. */
.nudge-icon {
  position: relative;
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}

.nudge-bar {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  border-radius: 1px;
}

.nudge-bar.upright {
  inset: 0 50% auto auto;
  width: 2px;
  height: 100%;
  margin: 0 -1px 0 0;
}

.set-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 1.05rem;
}

.set-label {
  color: var(--muted);
}

.reps-input {
  width: 3.5rem;
  height: var(--tap);
  font-size: 1.5rem;
  font-weight: 650;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface);
  color: inherit;
  font-family: inherit;
}

.set-target {
  color: var(--muted);
}

/* --- buttons --- */

button {
  font: inherit;
  min-height: var(--tap);
  border-radius: 0.75rem;
  cursor: pointer;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
}

button:disabled {
  opacity: 0.55;
  cursor: default;
}

button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
  border: none;
}

.primary.big {
  min-height: 4rem;
  font-size: 1.2rem;
}

.secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  font-weight: 550;
}

.quiet {
  background: none;
  color: var(--muted);
  border: none;
  min-height: 2.75rem;
  font-size: 0.95rem;
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.choice {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-start;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 1.1rem 1.25rem;
  font-weight: 550;
}

.choice .muted {
  font-size: 0.9rem;
  font-weight: 400;
}

/* --- forms --- */

.stack,
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stack {
  gap: 1rem;
}

label {
  font-weight: 550;
  font-size: 0.95rem;
}

input[type="email"],
input[type="text"]:not(.load-input) {
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0 0.9rem;
  font: inherit;
  background: var(--surface);
  color: inherit;
  width: 100%;
}

.with-unit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.with-unit .unit {
  color: var(--muted);
}

/* --- rest timer --- */

.timer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

.timer-track {
  height: 0.4rem;
  background: var(--line);
  border-radius: 0.2rem;
  overflow: hidden;
}

.timer-bar {
  height: 100%;
  background: var(--accent);
  transition: width 1s linear;
}

.timer-readout {
  font-size: clamp(3rem, 18vw, 4.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  text-align: center;
}

.timer-readout.over {
  color: var(--muted);
}

.timer-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.adjust {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  flex: 1;
  font-variant-numeric: tabular-nums;
}

.up-next {
  font-size: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .timer-bar {
    transition: none;
  }
}

/* --- coaching --- */

.lift-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lift {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
}

.lift-name {
  font-weight: 600;
}

.lift-load {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  text-align: right;
}

.lift .muted {
  grid-column: 1 / -1;
}

.choice.waiting {
  opacity: 0.7;
  cursor: default;
}

.invite-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}

/* --- the rest of the session, folded --- */

.upcoming {
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  margin-top: auto;
}

.upcoming summary {
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.upcoming summary::marker {
  color: var(--muted);
}

.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 0.5rem;
}

.upcoming-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
}

.overdue {
  color: var(--danger);
}

.quiet-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

/* --- history --- */

.history {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.session {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
}

.session-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.session-day {
  font-weight: 650;
}

.session-lift {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
}