/* ─────────────────────────────────────────────────────────────
   Reps — workout tracker
   Dark-first. Light mode is a selected set of steps, not a flip.
   Series colours are the validated categorical slots (violet /
   orange / aqua); see README.
   ───────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --plane:      #0b0c10;
  --surface:    #16181f;
  --surface-2:  #1e212b;
  --hairline:   rgba(255, 255, 255, 0.09);
  --grid:       rgba(255, 255, 255, 0.07);

  --ink:        #f2f3f7;
  --ink-2:      #a8adbd;
  --ink-muted:  #878ea2;

  --accent:     #8b5cf6;
  --accent-ink: #ffffff;
  --danger:     #e66767;

  /* Categorical slots — dark steps */
  --s1: #9085e9;
  --s2: #d95926;
  --s3: #199e70;

  /* Annotation layer. Aliased, not copied, so the light-mode override of --s2
     below carries through without a second declaration. */
  --avg: var(--s2);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --pad-x: 18px;
  --nav-h: 50px;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Home-indicator clearance for the bottom nav. In a browser tab --safe-b is
     0; in an installed PWA it's ~34px, which made the bar look much taller than
     in the browser. Reserve only what's needed to clear the indicator (trim
     12px) so the installed nav reads nearly as slim as the browser one. */
  --nav-safe: max(var(--safe-b) - 12px, 0px);
}

/* Light is keyed off the resolved [data-theme] attribute, not off
   prefers-color-scheme. The inline script in index.html sets that attribute
   before first paint — from the device setting on Auto, or from the user's
   stored choice — so one rule covers both without the two disagreeing. */
:root[data-theme="light"] {
  color-scheme: light;

  --plane:      #f4f4f7;
  --surface:    #ffffff;
  --surface-2:  #f4f4f7;
  --hairline:   rgba(11, 11, 11, 0.10);
  --grid:       rgba(11, 11, 11, 0.08);

  --ink:        #14161c;
  --ink-2:      #565c6b;
  --ink-muted:  #767c8d;

  --accent:     #6d3ee0;
  --danger:     #cf3838;

  --s1: #4a3aa7;
  --s2: #eb6834;
  --s3: #1baf7a;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  /* dvh tracks the mobile address bar as it collapses; the 100% above is the
     fallback. `overflow: hidden` keeps the page itself from scrolling, so the
     only scroller is .screen and the nav is always pinned to the viewport. */
  height: 100dvh;
  overflow: hidden;
  background: var(--plane);
  color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

button, input {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

h1, h2, p { margin: 0; }

/* ── Shell ──────────────────────────────────────────────────── */

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-t) + 20px) var(--pad-x) 28px;
}

.screen[hidden] { display: none; }

.screen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.screen-head h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Today header: the date stands in for the old "Today" title. */
.today-head { line-height: 1.1; }

.today-date {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Exercise cards ─────────────────────────────────────────── */

.cards { display: grid; gap: 12px; }

.card {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease;
}

.card:active { transform: scale(.985); }

.card.is-selected { border-color: var(--tint); }

.card-ring { flex: none; position: relative; width: 58px; height: 58px; }
.card-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.card-ring .track { stroke: var(--grid); }
.card-ring .fill { stroke: var(--tint); stroke-linecap: round; transition: stroke-dashoffset .45s cubic-bezier(.3,.9,.3,1); }

.card-ring-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.card-body { flex: 1; min-width: 0; }

.card-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink-2);
}

.card-meta .done { color: var(--s3); font-weight: 600; }

.card-add {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tint);
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

/* ── Keypad sheet ───────────────────────────────────────────── */

.pad-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.pad-scrim.is-open { opacity: 1; pointer-events: auto; }

.pad {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  width: min(100%, 560px);
  transform: translate(-50%, 100%);
  padding: 12px var(--pad-x) calc(var(--safe-b) + 14px);
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, .38);
  transition: transform .26s cubic-bezier(.22, 1, .3, 1);
  user-select: none;
  -webkit-user-select: none;
}

.pad.is-open { transform: translate(-50%, 0); }

.pad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
}

.pad-for { font-weight: 650; letter-spacing: -0.01em; }
.pad-for::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--tint);
  vertical-align: 1px;
}

.pad-close {
  padding: 7px 15px;
  background: var(--surface-2);
  border: 0;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.pad-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 6px 0 12px;
}

.pad-digits {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pad-digits.is-empty { color: var(--ink-muted); opacity: .35; }

.pad-hint { font-size: 13px; color: var(--ink-muted); }

.pad.is-saved .pad-digits { color: var(--s3); }

.keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.key {
  height: 62px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: 25px;
  font-weight: 550;
  cursor: pointer;
  transition: transform .08s ease, background .12s ease;
}

.key:active { transform: scale(.94); background: var(--tint); color: #fff; }
.key-aux { font-size: 21px; color: var(--ink-2); }
.key-ok { background: var(--tint); color: #fff; border-color: transparent; }
.key-ok:disabled { opacity: .35; cursor: default; }
.key-ok:disabled:active { transform: none; }

.log {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 32px;
  align-items: center;
  padding: 0 0 12px;
}

.log-empty { font-size: 13px; color: var(--ink-muted); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.chip span { color: var(--ink-muted); font-size: 15px; line-height: 1; }
.chip:active { border-color: var(--danger); }

/* ── Today's sets ───────────────────────────────────────────── */

.sets { margin-top: 26px; }
.sets[hidden] { display: none; }

.sets-title {
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.sets-list { margin: 0; padding: 0; list-style: none; }

.set-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14.5px;
}

.set-row:last-child { border-bottom: 0; }

.set-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tint);
}

.set-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-time { color: var(--ink-muted); font-size: 13px; }

.set-reps {
  min-width: 34px;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Panels, tabs, tiles ────────────────────────────────────── */

.panel {
  padding: 16px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}

.panel-title { font-size: 16px; font-weight: 650; }

.panel-note {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
}

.tab {
  flex: 1;
  min-width: 0;
  padding: 9px 6px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab.is-active {
  background: var(--tint);
  border-color: transparent;
  color: #fff;
}

/* Legend. Marks mirror what they key: a rect for the bars, a stroke for the
   reference lines. Labels wear ink tokens — never the series colour. */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.chart-legend[hidden] { display: none; }

.legend-item { display: inline-flex; align-items: center; gap: 7px; }

.legend-key { flex: none; display: block; }
.legend-key.rect { width: 10px; height: 10px; border-radius: 2px; background: var(--key); }
.legend-key.line { width: 14px; height: 0; border-top: 2px solid var(--key); }
.legend-key.line.dashed { border-top-style: dashed; }

.legend-value { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }

.chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -4px;
  padding: 0 4px;
  -webkit-overflow-scrolling: touch;
}

/* Shrink-wraps the SVG so the tooltip's absolute coordinates are the SVG's own
   user units — the svg is rendered at exactly its viewBox size. */
.chart-plot {
  position: relative;
  width: max-content;
  min-width: 100%;
}

.chart-wrap svg { display: block; }
.chart-wrap [data-day] { cursor: pointer; }
.chart-wrap .bar { cursor: pointer; }
.chart-wrap .axis-line { stroke: var(--hairline); stroke-width: 1; }
.chart-wrap .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart-wrap .goal-line { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
.chart-wrap .avg-line { stroke: var(--avg); stroke-width: 2; stroke-linecap: round; }
.chart-wrap .tick {
  fill: var(--ink-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.chart-wrap .peak-label {
  fill: var(--ink);
  font-size: 11px;
  font-weight: 650;
  text-anchor: middle;
}

.chart-empty {
  padding: 34px 8px;
  color: var(--ink-muted);
  font-size: 14px;
  text-align: center;
}

/* Floating tooltip, anchored to the tapped bar. Sits above the bar by default
   and flips below when the bar is too tall to leave room. */
.chart-tip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  transform: translate(-50%, -100%);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

.chart-tip.is-below { transform: translate(-50%, 0); }
.chart-tip[hidden] { display: none; }

/* Value leads, date follows — the reader already knows which day they tapped. */
.chart-tip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-tip .tip-date { color: var(--ink-muted); font-size: 12px; }

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.tile {
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}

.tile-label {
  font-size: 11.5px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tile-value {
  margin-top: 3px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.table-view summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}

.table-scroll { max-height: 300px; overflow-y: auto; margin-top: 10px; }

.table-scroll table { width: 100%; border-collapse: collapse; font-size: 14px; }

.table-scroll th, .table-scroll td {
  padding: 7px 4px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}

.table-scroll th {
  position: sticky;
  top: 0;
  background: var(--surface);
  font-size: 12px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table-scroll td:last-child, .table-scroll th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Settings ───────────────────────────────────────────────── */

.ex-settings { display: grid; gap: 14px; margin-top: 14px; }

.ex-row {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 9px;
  align-items: end;
}

.field { display: grid; gap: 5px; min-width: 0; }

.field label {
  font-size: 11.5px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field input {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  outline: none;
}

.field input:focus { border-color: var(--accent); }

.ex-row .swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--tint);
  vertical-align: 0;
}

/* Segmented single-choice control (Appearance). */
.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 14px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

.seg-btn {
  padding: 9px 6px;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

.seg-btn[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

.btn {
  flex: 1;
  min-width: 130px;
  padding: 12px 16px;
  background: var(--accent);
  border: 0;
  border-radius: var(--r-sm);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.btn:active { filter: brightness(.9); }

.btn-danger {
  width: 100%;
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}

.version {
  padding: 6px 4px 0;
  color: var(--ink-muted);
  font-size: 12px;
  text-align: center;
}

/* ── Nav ────────────────────────────────────────────────────── */

.nav {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--nav-h) + var(--nav-safe));
  padding-bottom: var(--nav-safe);
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: 0;
  color: var(--ink-muted);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}

.nav-btn svg { width: 19px; height: 19px; fill: currentColor; }
.nav-btn.is-active { color: var(--accent); }

/* ── Toast ──────────────────────────────────────────────────── */

.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(var(--safe-b) + 78px);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 11px 12px 11px 16px;
  transform: translate(-50%, 12px);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  font-size: 14px;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.toast.is-up { opacity: 1; transform: translate(-50%, 0); }
.toast[hidden] { display: none; }

.toast-undo {
  padding: 5px 13px;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  color: var(--accent-ink);
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
}

/* Toast sits above the keypad sheet when that is open. */
body.pad-open .toast { bottom: calc(var(--safe-b) + 12px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}