@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/BarlowCondensed-500.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/BarlowCondensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/BarlowCondensed-700.woff2) format('woff2')}

/* System type for text so it sits with your other apps; condensed numerals for weights and timers.
   Plate colours follow competition plates: red 25, blue 20, yellow 15, green 10, white 5. */
:root {
  --bg: #F2F2F0;
  --card: #FFFFFF;
  --fill: rgba(118, 118, 128, 0.12);
  --fill-2: rgba(118, 118, 128, 0.22);
  --ink: #1A1A1C;
  --muted: #6E6E73;
  --sep: rgba(60, 60, 67, 0.16);
  --accent: #D0212B;
  --on-accent: #FFFFFF;
  --ok: #2E9E4F;
  --focus: #1F5FBF;
  --shaft: #A3A8AD;
  --collar: #6E6E73;
  --scrim: rgba(0, 0, 0, 0.32);
  --text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Barlow', system-ui, sans-serif;
  --num: 'Barlow Condensed', -apple-system, system-ui, sans-serif;
  --tabbar-h: 56px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1C1C1E;
    --fill: rgba(118, 118, 128, 0.24);
    --fill-2: rgba(118, 118, 128, 0.38);
    --ink: #F5F5F7;
    --muted: #98989F;
    --sep: rgba(84, 84, 88, 0.6);
    --accent: #F0353F;
    --ok: #34B35A;
    --focus: #79A6F2;
    --shaft: #6C7177;
    --collar: #98989F;
    --scrim: rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.4 var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
body.locked { overflow: hidden; }
main {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 18px) 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 40px);
}
button, input { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
svg { display: block; }

/* ---------- Icons ---------- */
.i { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i .solid { fill: currentColor; stroke: none; }

/* ---------- Page header ---------- */
.date { margin: 0 0 2px; color: var(--muted); font-size: 13px; font-weight: 600; }
.large { margin: 0; font: 700 34px/1.12 var(--text); letter-spacing: -0.02em; }
.sub { margin: 4px 0 0; color: var(--muted); font-size: 15px; }

/* ---------- Week strip (Today) ---------- */
.week {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 20px 0 22px;
}
.wk {
  padding: 0 0 4px;
  border: 0;
  background: none;
  text-align: left;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.wk i { display: block; height: 4px; margin-bottom: 8px; border-radius: 2px; background: var(--fill-2); }
.wk.is-done i { background: var(--muted); }
.wk[aria-pressed="true"] { color: var(--ink); }
.wk[aria-pressed="true"] i { background: var(--accent); }

.group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 4px 8px;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Inset grouped list ---------- */
.list { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--card); overflow: hidden; }
.list > li { position: relative; }
.list > li + li::before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 66px;
  border-top: 0.5px solid var(--sep);
}
.row {
  display: grid;
  grid-template-columns: 36px 1fr 10px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 70px;
  padding: 12px 16px;
  border: 0;
  background: none;
  text-align: left;
}
.row:active { background: var(--fill); }
.row-title { display: block; font-weight: 600; }
.row-sub { display: block; margin-top: 1px; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.chev { width: 8px; height: 14px; color: var(--muted); opacity: 0.55; }
.chev .i { stroke-width: 2.2; }

.ring { position: relative; width: 36px; height: 36px; }
.ring svg { width: 36px; height: 36px; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font: 600 17px/1 var(--num); }
.ring-track { fill: none; stroke: var(--fill-2); stroke-width: 3; }
.ring-prog { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.ring-fill { fill: var(--ok); }
.ring-check { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Banner ---------- */
.banner {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card);
  font-size: 15px;
}
.banner .dot { width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: #fff; padding: 6px; }
.banner .dot .i { stroke-width: 2.8; }
.banner p { margin: 0; }

/* ---------- Buttons ---------- */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin: 20px 0 0;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.cta.ink { background: var(--ink); color: var(--bg); }
.cta:active { opacity: 0.85; }
.quiet {
  display: block;
  margin: 8px auto 0;
  padding: 10px 14px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}

/* ---------- Rest pill ---------- */
.rest-pill {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px);
  z-index: 9;
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
  font-weight: 600;
  transform: translateX(-50%);
}
.rest-pill b, .rest-chip b { font: 600 20px/1 var(--num); font-variant-numeric: tabular-nums; }

/* ---------- Logging sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 30; }
.backdrop { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 0.3s; }
.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: 560px;
  max-height: calc(100% - env(safe-area-inset-top) - 16px);
  margin: 0 auto;
  padding: 8px 20px calc(env(safe-area-inset-bottom) + 18px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 24px 24px 0 0;
  background: var(--card);
  transform: translateY(100%);
  transition: transform 0.36s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.sheet-wrap.open .backdrop { opacity: 1; }
.sheet-wrap.open .sheet { transform: none; }
.grabber { width: 38px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--fill-2); }
.sheet-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.sheet-head h2 { margin: 0; font: 700 24px/1.2 var(--text); letter-spacing: -0.015em; }
.sheet-head p { margin: 3px 0 0; color: var(--muted); font-size: 15px; }
.icon-btn {
  width: 32px; height: 32px;
  padding: 9px;
  border: 0; border-radius: 50%;
  background: var(--fill);
  color: var(--muted);
}
.icon-btn .i { stroke-width: 2.4; }
.rest-chip {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  margin: 10px 0 0 !important;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink) !important;
  font-weight: 600;
}

.demo { height: 150px; margin: 10px 0 0; }
.how { margin: 2px 8px 0; text-align: center; color: var(--muted); font-size: 15px; }
.stage { margin: 16px 0 18px; padding: 14px 14px 16px; border-radius: 20px; background: var(--fill); }
.bar { width: 100%; height: auto; }
.bar .shaft { fill: var(--shaft); }
.bar .collar { fill: var(--collar); }
.bar .plate-white { stroke: rgba(0, 0, 0, 0.14); stroke-width: 1; }
.readout { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 4px; }
.readout output { font: 600 88px/1 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.readout span { color: var(--muted); font: 500 26px/1 var(--num); }
.load { margin: 4px 0 0; text-align: center; color: var(--muted); font-size: 14px; }

.ctl { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 14px; }
.step {
  width: 44px; height: 44px;
  padding: 13px;
  border: 0; border-radius: 50%;
  background: var(--fill);
}
.step:active { background: var(--fill-2); }
.step .i { stroke-width: 2.4; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 2px 0; }
.field-head span { color: var(--muted); font-size: 15px; font-weight: 500; }
.field-head output { font: 600 34px/1 var(--num); font-variant-numeric: tabular-nums; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--p, 50%), var(--fill-2) var(--p, 50%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.18);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--fill-2); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 4px 0 12px;
  border-radius: 999px;
  background: var(--fill);
  font: 600 18px/1 var(--num);
  font-variant-numeric: tabular-nums;
}
.chip small { color: var(--muted); font: 600 12px/1 var(--text); }
.chip button { width: 26px; height: 26px; padding: 8px; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.last { margin: 16px 0 0; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- Stretch ---------- */
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.pick {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  font-size: 15px;
  font-weight: 600;
}
.pick:active { opacity: 0.7; }
.pick[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.routine .row { grid-template-columns: 58px 1fr auto; min-height: 64px; cursor: default; }
.routine > li + li::before { left: 88px; }
.thumb { display: block; width: 58px; height: 46px; padding: 2px; border-radius: 10px; background: var(--fill); }
.routine .row:active { background: none; }
.idx { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fill); color: var(--muted); font: 600 17px/1 var(--num); }
.time { color: var(--muted); font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.player { margin-top: 18px; padding: 22px 20px 24px; border-radius: 24px; background: var(--card); text-align: center; }
.player .count { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.dial { position: relative; width: 236px; height: 236px; margin: 14px auto 0; }
.dial-fig { position: absolute; inset: 40px 30px 34px; }
.dial > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial .track { fill: none; stroke: var(--fill); stroke-width: 10; }
.dial .prog { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; }
.dial-in { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; }
.clock { margin: 12px 0 0; font: 600 64px/1 var(--num); font-variant-numeric: tabular-nums; }
.side { margin: 2px 0 0; color: var(--accent); font-size: 15px; font-weight: 600; }
.player h2 { margin: 14px 0 0; font: 700 24px/1.2 var(--text); letter-spacing: -0.015em; }
.player .cue { max-width: 32ch; margin: 6px auto 0; color: var(--muted); font-size: 15px; }
.controls { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 22px; }
.round { width: 56px; height: 56px; padding: 16px; border: 0; border-radius: 50%; background: var(--fill); }
.round.big { width: 76px; height: 76px; padding: 22px; background: var(--accent); color: var(--on-accent); }
.round:disabled { opacity: 0.35; }
.player .next { margin: 20px 0 0; color: var(--muted); font-size: 14px; }

/* ---------- History ---------- */
.thisweek { margin: 20px 0 26px; padding: 16px; border-radius: 16px; background: var(--card); }
.thisweek ol { display: grid; grid-template-columns: repeat(7, 1fr); margin: 0; padding: 0; list-style: none; text-align: center; }
.thisweek li span { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.thisweek li.today span { color: var(--ink); }
.thisweek li i { display: block; width: 26px; height: 26px; margin: 8px auto 0; border-radius: 50%; background: var(--fill); }
.thisweek li.lift i { background: var(--accent); }
.thisweek li.str:not(.lift) i { background: none; box-shadow: inset 0 0 0 3px var(--ok); }
.thisweek p { margin: 14px 0 0; color: var(--muted); font-size: 15px; }

.history > li + li::before { left: 16px; }
.session summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 12px;
  padding: 13px 16px;
  list-style: none;
  cursor: pointer;
}
.session summary::-webkit-details-marker { display: none; }
.session summary:active { background: var(--fill); }
.session .what { font-weight: 600; }
.session .when { color: var(--muted); font-size: 15px; }
.session .meta { grid-column: 1 / -1; color: var(--muted); font-size: 15px; }
.session ul { list-style: none; margin: 0; padding: 0 16px 10px; }
.session ul li { padding: 8px 0; border-top: 0.5px solid var(--sep); }
.session ul .nm { display: block; font-size: 15px; font-weight: 600; }
.session ul small { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--muted); font: 500 17px/1.3 var(--num); font-variant-numeric: tabular-nums; }

.empty { padding: 28px 20px; border-radius: 16px; background: var(--card); color: var(--muted); text-align: center; }
.empty p { margin: 0; }

.settings { margin-top: 28px; }
.settings .row { grid-template-columns: 1fr 10px; min-height: 50px; }
.settings > li + li::before { left: 16px; }
.foot { margin: 8px 16px 0; color: var(--muted); font-size: 13px; }

/* ---------- Tab bar ---------- */
.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 0.5px solid var(--sep);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}
.tab svg { width: 26px; height: 26px; }
.tab .i { stroke-width: 1.9; }
.tab[aria-current="page"] { color: var(--accent); }

.toast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 10px);
  z-index: 40;
  width: max-content;
  max-width: calc(100% - 32px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
  font-weight: 600;
  transform: translate(-50%, -12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

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

/* ---------- Demo figures ---------- */
.demo-svg { display: block; width: 100%; height: 100%; }
.demo-svg .floor { fill: none; stroke: var(--sep); stroke-width: 2; stroke-linecap: round; }
.fig path { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.fig .limb { stroke-width: 7; }
.fig .torso { stroke-width: 10; }
.fig .head { fill: var(--ink); }
.far { opacity: 0.3; }
.demo-svg .eq { fill: var(--fill-2); }
.demo-svg .eq-l { fill: none; stroke: var(--fill-2); stroke-width: 4; stroke-linecap: round; }
.demo-svg .eq-pad { fill: none; stroke: var(--fill-2); stroke-width: 9; stroke-linecap: round; }
.demo-svg .eq-frame { fill: none; stroke: var(--fill-2); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.demo-svg .mat { fill: var(--fill); }
.demo-svg .plate { fill: #D7262E; }
.demo-svg .hub { fill: var(--card); }
.demo-svg .db { fill: var(--muted); }
.demo-svg .cable { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.demo-svg .pulley { fill: var(--card); stroke: var(--muted); stroke-width: 2; }