/* Thumb-first, one-handed, in a gym. Every tap target is >=48px; the primary ones are much
   bigger. Dark because the phone is in a bright room and the screen stays on between sets. */

:root {
  --bg: #0d1013;
  --surface: #161b20;
  --surface-2: #1e252c;
  --line: #2b333c;
  --text: #eef2f5;
  --muted: #93a1ae;
  --accent: #4da3ff;
  --accent-ink: #05121f;
  --ok: #35c48a;
  --warn: #f0a238;
  --danger: #ff6b6b;
  --radius: 14px;
  --tap: 52px;
  font-size: 17px;
}

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

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-rounded, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  overscroll-behavior-y: contain;
}

.app {
  max-width: 640px;
  margin: 0 auto;
  /* Bottom padding clears the fixed tab bar (~64px) plus the home indicator. */
  padding: max(12px, env(safe-area-inset-top)) 14px calc(96px + env(safe-area-inset-bottom));
}

/* ---------- typography ---------- */

h1 { font-size: 1.4rem; margin: 4px 0 2px; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; margin: 22px 0 8px; letter-spacing: -0.01em; }
.sub { color: var(--muted); font-size: 0.85rem; margin: 0 0 16px; }
.muted { color: var(--muted); }
.tiny { font-size: 0.78rem; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */

.topbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; min-height: 44px;
}
.topbar h1 { flex: 1; }
.back {
  background: none; border: none; color: var(--accent);
  font-size: 1rem; padding: 10px 10px 10px 0; cursor: pointer;
  min-height: 44px;
}

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.card.tight { padding: 10px 12px; }

/* ---------- buttons ---------- */

button { font: inherit; font-weight: 600; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--tap);
  padding: 14px 16px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text);
  cursor: pointer;
}
.btn:active { transform: scale(0.985); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; color: var(--danger); border-color: #55302f; }
.btn.big { min-height: 62px; font-size: 1.1rem; }
.btn + .btn { margin-top: 10px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.row > .btn + .btn { margin-top: 0; }

/* ---------- list rows ---------- */

.item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--tap);
  padding: 13px 14px; margin-bottom: 8px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-align: left; cursor: pointer;
}
.item:active { background: var(--surface-2); }
.item .grow { flex: 1; min-width: 0; }
.item .name { font-weight: 600; }
.item .meta { color: var(--muted); font-size: 0.8rem; margin-top: 3px; }
.item .chev { color: var(--muted); }

.group-label {
  color: var(--muted); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 18px 0 8px;
}

/* ---------- steppers ---------- */

.stepper { display: flex; align-items: stretch; gap: 10px; }
.stepper button {
  width: 68px; min-height: 68px; flex: none;
  font-size: 1.7rem; line-height: 1;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.stepper button:active { background: var(--accent); color: var(--accent-ink); }
.stepper .value {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stepper .value input {
  width: 100%; border: none; background: none; color: var(--text);
  font: 700 2rem/1 inherit; text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.stepper .value input::-webkit-outer-spin-button,
.stepper .value input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .value input:focus { outline: none; }
.stepper .value .unit { color: var(--muted); font-size: 0.75rem; margin-top: 2px; }

.field-label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 16px 0 8px; font-size: 0.85rem; color: var(--muted);
}

/* ---------- segmented pickers (0-3 scores, RIR) ---------- */

.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; min-height: var(--tap);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.seg.scale button[aria-pressed="true"][data-v="0"] { background: var(--ok); }
.seg.scale button[aria-pressed="true"][data-v="2"] { background: var(--warn); color: #201402; }
.seg.scale button[aria-pressed="true"][data-v="3"] { background: var(--danger); color: #200606; }
.seg-legend { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.72rem; margin-top: 6px; }

/* ---------- notices ---------- */

.notice {
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  font-size: 0.88rem; line-height: 1.45;
  border: 1px solid;
}
.notice.warn { background: #2a1f0d; border-color: #5c421a; color: #ffd79a; }
.notice.danger { background: #2a1414; border-color: #5c2626; color: #ffb3b3; }
.notice.info { background: #10202e; border-color: #24455f; color: #b9dcfa; }
.notice.ok { background: #0f2620; border-color: #1f5343; color: #a6e8cd; }
.notice strong { display: block; margin-bottom: 3px; }
.notice .btn { margin-top: 10px; }

/* ---------- set log list ---------- */

.setlist { margin: 6px 0 0; padding: 0; list-style: none; }
.setlist li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin-bottom: 6px;
  background: var(--surface-2); border-radius: 11px;
  font-variant-numeric: tabular-nums;
}
.setlist .idx {
  width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 8px;
  font-size: 0.75rem; color: var(--muted); font-weight: 700;
}
.setlist .grow { flex: 1; }
.setlist .warmup { color: var(--muted); font-size: 0.72rem; }
.setlist .flag { color: var(--warn); font-size: 0.78rem; }
.setlist .del {
  background: none; border: none; color: var(--muted);
  font-size: 1.1rem; padding: 6px 4px; cursor: pointer; min-height: 40px;
}

/* ---------- pills ---------- */

.pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 0.72rem; color: var(--muted); font-weight: 600;
}
.pill.press { color: var(--warn); border-color: #5c421a; }
.pill.knee { color: var(--danger); border-color: #5c2626; }
.pill.new { color: var(--accent); border-color: #24455f; }

/* ---------- week strip ---------- */

/* Pick a date, not a week. Rest days are visibly not tappable, so the split is legible at a
   glance rather than being something you have to remember. */
.weekstrip { display: flex; gap: 5px; margin-bottom: 10px; }
.weekstrip button {
  flex: 1; min-height: 58px; padding: 7px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
}
.weekstrip button .wd { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.weekstrip button .dom { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.weekstrip button:disabled { opacity: .35; cursor: default; background: transparent; }
.weekstrip button.planned { border-color: #2f4256; }
.weekstrip button.sel { background: var(--accent); border-color: transparent; }
.weekstrip button.sel .wd { color: var(--accent-ink); opacity: .75; }
.weekstrip button.sel .dom { color: var(--accent-ink); }

/* ---------- demo strip ---------- */

/* Sits directly above the fixed tab bar, so it is present on every screen. Mistaking demo
   data for the real log is the worst thing that could happen here, so it is loud and it is
   never out of view. */
.demo-strip {
  position: fixed; left: 0; right: 0; z-index: 41;
  bottom: calc(65px + env(safe-area-inset-bottom));
  width: 100%; border: 0; border-top: 1px solid var(--line);
  background: var(--warn); color: #1a1200;
  font: 600 11px/1 var(--font); letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 10px; text-align: center; cursor: pointer;
}
.demo-strip:active { filter: brightness(.92); }

/* ---------- tab bar ---------- */

/* Persistent, because hiding navigation until there is data means a screen can only be
   discovered by someone who already knows it exists. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.tabbar button {
  flex: 1; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 0.66rem; font-weight: 600;
  border-radius: 12px; padding: 4px 2px;
}
.tabbar button svg { width: 21px; height: 21px; }
.tabbar button[aria-current="true"] { color: var(--accent); }
.tabbar button:active { background: var(--surface-2); }

/* Notices that are also buttons (tap-through to the screen that resolves them). */
button.notice { font: inherit; display: block; }
button.notice strong { font-weight: 700; }

/* ---------- confirm sheet ---------- */

/* Replaces window.confirm(), which PWA webviews may suppress — returning false with no dialog,
   so a destructive button silently does nothing. */
.backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .62);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
  animation: fade .14s ease-out;
}
.sheet {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  animation: rise .18s cubic-bezier(.2, .8, .3, 1);
}
.sheet strong { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.sheet p { margin: 0 0 16px; line-height: 1.45; }
.sheet .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { transform: translateY(14px) } to { transform: translateY(0) } }

@media (prefers-reduced-motion: reduce) {
  .backdrop, .sheet { animation: none; }
}

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 20px; font-size: 0.88rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  max-width: 90vw; text-align: center; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { border-color: #1f5343; }
.toast.warn { border-color: #5c421a; }

/* ---------- misc ---------- */

.spacer { height: 10px; }
.divider { height: 1px; background: var(--line); margin: 18px 0; }
.empty { color: var(--muted); text-align: center; padding: 26px 10px; line-height: 1.5; }
.stat { display: flex; justify-content: space-between; padding: 7px 0; }
.stat + .stat { border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:active { transform: none; }
}

/* ---------- charts ---------- */

/* Inline SVG, no charting library — a CDN dependency would put the network in the load path
   of an app whose premise is working in a basement with no signal. */
:root {
  --chart-junk: rgba(240, 162, 56, .10);
  --chart-productive: rgba(53, 196, 138, .09);
  --chart-over: rgba(255, 107, 107, .10);
}

.chart { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .gl { stroke-width: 1; stroke-dasharray: 4 3; }
.chart .gl-mv { stroke: var(--muted); }
.chart .gl-mev { stroke: var(--ok); }
.chart .gl-mrv { stroke: var(--danger); }
.chart .lbl { font-size: 8px; font-weight: 700; }
.chart .lbl-mv { fill: var(--muted); }
.chart .lbl-mev { fill: var(--ok); }
.chart .lbl-mrv { fill: var(--danger); }
.chart .tick { font-size: 8.5px; fill: var(--muted); }
.chart .val { font-size: 8.5px; fill: var(--text); font-weight: 700; }

.chart .series { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-load { stroke: var(--ok); }
.chart .series-target { stroke: var(--muted); stroke-dasharray: 5 4; stroke-width: 1.5; }
.chart .series-actual { stroke: var(--accent); }

.chart .dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.chart .dot-load { fill: var(--ok); }
.chart .dot-junk, .chart .dot-below-mv, .chart .dot-near-mrv { fill: var(--warn); }
.chart .dot-over-mrv { fill: var(--danger); }
.chart .dot-mv, .chart .dot-mev, .chart .dot-productive { fill: var(--ok); }
.chart .dot-none { fill: var(--muted); }

.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.chart-legend .key { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.chart-legend .key::before {
  content: ''; width: 11px; height: 3px; border-radius: 2px; background: currentColor;
}
.chart-legend .key-sets::before { background: var(--accent); }
.chart-legend .key-mev::before { background: var(--ok); }
.chart-legend .key-mrv::before { background: var(--danger); }
.chart-legend .key-mv::before { background: var(--muted); }
.chart-legend .key-target::before { background: var(--muted); }
.chart-legend .key-actual::before { background: var(--accent); }
.chart-legend .key-load::before { background: var(--ok); }