/* ─── tokens ─────────────────────────────────────────────── */
:root {
  --bg:        #0b0c0f;
  --bg-2:      #101216;
  --surface:   #14171d;
  --surface-2: #1a1e26;
  --border:    #262a33;
  --border-2:  #323844;
  --text:      #e7e9ee;
  --muted:     #8d93a1;
  --muted-2:   #5b6170;
  --accent:    #ffffff;

  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px -16px rgba(0,0,0,.6);

  --font:      ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:      ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ─── base ───────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, #181c25 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #11141a 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ─── topbar ─────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) 14px calc(24px + env(safe-area-inset-left, 0px));
  background: rgba(11,12,15,.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand .dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: conic-gradient(from 210deg, #ef4444, #f59e0b, #10b981, #06b6d4, #6366f1, #d946ef, #ef4444);
  box-shadow: 0 0 0 3px rgba(255,255,255,.04), 0 0 18px -2px rgba(99,102,241,.55);
}
.brand .tag {
  color: var(--muted);
  font-size: 12.5px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  margin-left: 2px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lab-link {
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
  padding: 9px 4px 9px 10px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
  white-space: nowrap;
  transition: color .15s ease;
}
.lab-link:hover { color: var(--text); }

/* ─── footer ─────────────────────────────────────────────── */
.sitefooter {
  padding: 18px 24px calc(18px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.sitefooter p {
  margin: 0;
  font-size: 12px;
  color: var(--muted-2);
}
.sitefooter a {
  color: var(--muted);
  text-decoration: none;
}
.sitefooter a:hover { color: var(--text); text-decoration: underline; }

/* ─── buttons ────────────────────────────────────────────── */
.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background .15s ease, border-color .15s ease, transform .05s ease, color .15s ease;
}
.btn:hover  { background: var(--surface-2); border-color: var(--border-2); }
.btn:active { transform: translateY(1px); }

.btn.primary {
  background: linear-gradient(180deg, #f5f6f8 0%, #d9dde3 100%);
  color: #0b0c0f;
  border-color: transparent;
  font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.05); }

.btn.ghost   { background: transparent; }
.btn.ghost:hover { background: var(--surface); }

.btn.sm  { padding: 7px 11px; font-size: 12.5px; border-radius: 8px; }
.btn.xs  { padding: 5px 9px;  font-size: 12px;   border-radius: 7px; }
.btn.lg  { padding: 12px 18px; font-size: 14.5px; }
.btn.icon{ padding: 8px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }

#muteBtn .mute-x { opacity: 0; transition: opacity .15s ease; }
#muteBtn[aria-pressed="true"] .mute-x { opacity: 1; }
#muteBtn[aria-pressed="true"] { color: var(--muted); }

/* ─── board ──────────────────────────────────────────────── */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  padding: 22px;
  max-width: 1480px;
  margin: 0 auto;
}
.board[hidden] { display: none; }

/* ─── empty state ────────────────────────────────────────── */
.empty {
  display: grid;
  place-items: center;
  padding: 60px 22px;
}
.empty[hidden] { display: none; }
.empty-card {
  max-width: 460px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  box-shadow: var(--shadow);
}
.empty-card h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.empty-card p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ─── card ───────────────────────────────────────────────── */
.card {
  --accent: #6366f1;
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 6%, var(--surface)) 0%, var(--surface) 80%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55;
}
.card.running {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
  box-shadow:
    var(--shadow),
    0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent),
    0 0 38px -6px color-mix(in oklab, var(--accent) 40%, transparent);
}

/* ── card head ── */
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.swatch {
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent), 0 0 10px color-mix(in oklab, var(--accent) 60%, transparent);
  flex: none;
}
.name {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  outline: none;
  transition: background .15s, border-color .15s;
}
.name:hover  { background: var(--surface-2); }
.name:focus  { background: var(--surface-2); border-color: var(--border-2); }

.iconbtn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.iconbtn.remove:hover { color: #ef4444; border-color: color-mix(in oklab, #ef4444 40%, var(--border)); }

/* ── ring ── */
.ring-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 240px;
  margin: 4px auto 2px;
}
.ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 6;
}
.ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 565.486; /* 2πr, r=90 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .25s linear, stroke .3s ease;
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--accent) 45%, transparent));
}
.ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 2px;
  text-align: center;
}
.time {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 7vw, 46px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.state {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.card.running .state { color: var(--accent); }

/* ── presets ── */
.presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.chip {
  appearance: none;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 4px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { background: color-mix(in oklab, var(--accent) 10%, var(--surface-2)); border-color: var(--border-2); }
.chip.active {
  background: color-mix(in oklab, var(--accent) 22%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  color: var(--text);
}

/* ── custom ── */
.custom {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 6px;
}
.custom-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-right: 4px;
}
.custom input {
  appearance: textfield;
  -moz-appearance: textfield;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  width: 100%;
  outline: none;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.custom input::-webkit-outer-spin-button,
.custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.custom input:focus { border-color: var(--border-2); background: var(--surface); }
.custom .colon { color: var(--muted); font-weight: 600; }

/* ── main controls ── */
.controls {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}
.controls .play {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 92%, white) 0%, var(--accent) 100%);
  color: #0b0c0f;
  border-color: transparent;
}
.card.running .controls .play {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.card.running .controls .play:hover { background: var(--surface); }

/* ── reps ── */
.reps {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px solid var(--border);
}
.reps-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.reps-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  text-align: right;
  letter-spacing: -0.02em;
}
.reps-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── pulse on tick ── */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0    color-mix(in oklab, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 18px color-mix(in oklab, var(--accent) 0%,  transparent); }
}
.card.pulse .swatch { animation: pulse .6s ease-out; }

/* ── rep flash ── */
@keyframes flash {
  0%   { transform: scale(1);   color: var(--text); }
  35%  { transform: scale(1.18); color: var(--accent); }
  100% { transform: scale(1);   color: var(--text); }
}
.reps-value.flash { animation: flash .7s ease-out; transform-origin: right center; }

/* ── alerting (rep complete, awaiting coach) ── */
@keyframes alertGlow {
  0%, 100% {
    box-shadow:
      var(--shadow),
      0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent),
      0 0 26px -4px color-mix(in oklab, var(--accent) 55%, transparent);
  }
  50% {
    box-shadow:
      var(--shadow),
      0 0 0 2px color-mix(in oklab, var(--accent) 75%, transparent),
      0 0 60px  2px color-mix(in oklab, var(--accent) 70%, transparent);
  }
}
.card.alerting {
  border-color: color-mix(in oklab, var(--accent) 65%, var(--border));
  animation: alertGlow 1.05s ease-in-out infinite;
}
.card.alerting .time,
.card.alerting .state { color: var(--accent); }
.card.alerting .controls .play {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 92%, white) 0%, var(--accent) 100%);
  color: #0b0c0f;
  border-color: transparent;
}

/* ── linear progress bar (mobile) ── */
.bar {
  display: none;
  height: 4px;
  width: 100%;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: 999px;
  transform-origin: left center;
  transition: width .25s linear;
  box-shadow: 0 0 10px -2px color-mix(in oklab, var(--accent) 60%, transparent);
}

/* ── expand toggle (mobile only) ── */
.expand-toggle {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background .15s, color .15s, border-color .15s;
}
.expand-toggle:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.expand-chev { transition: transform .2s ease; }
.expand-toggle[aria-expanded="true"] .expand-chev { transform: rotate(180deg); }
.expand-label-less { display: none; }
.expand-toggle[aria-expanded="true"] .expand-label-more { display: none; }
.expand-toggle[aria-expanded="true"] .expand-label-less { display: inline; }

/* ─── mobile lane layout ─────────────────────────────────── */
@media (max-width: 640px) {
  .topbar {
    padding: calc(10px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 10px calc(12px + env(safe-area-inset-left, 0px));
    gap: 8px;
    flex-wrap: wrap;
  }
  .actions { flex-wrap: wrap; gap: 6px; }
  .actions .btn { padding: 7px 10px; font-size: 12px; }
  .brand .tag { display: none; }
  .lab-link { display: none; }

  .board {
    padding: 10px calc(10px + env(safe-area-inset-right, 0px)) 10px calc(10px + env(safe-area-inset-left, 0px));
    gap: 8px;
    grid-template-columns: 1fr;
  }

  /* The card becomes a slim row. Children of card-head, dial, controls and
     reps are unwrapped (display: contents) so we can grid-area them
     individually into either the compact lane or the expanded panel. */
  .card {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    grid-template-areas:
      "swatch  name     name     remove"
      "time    time     reps     play"
      "bar     bar      bar      bar"
      "expand  expand   expand   expand"
      "presets presets  presets  presets"
      "custom  custom   custom   custom"
      "reset   reset    reset    reset"
      "repctrl repctrl  repctrl  repctrl";
    column-gap: 10px;
    row-gap: 6px;
    padding: 12px 14px;
    overflow: hidden;
  }

  /* unwrap groups so children flow into the grid */
  .card-head,
  .ring-wrap,
  .ring-center,
  .controls,
  .reps {
    display: contents;
  }

  .swatch    { grid-area: swatch; align-self: center; width: 10px; height: 10px; }
  .name      { grid-area: name; padding: 4px 6px; font-size: 14.5px; align-self: center; }
  .remove    { grid-area: remove; align-self: center; width: 28px; height: 28px; }
  .ring      { display: none; }

  /* readout: time large, state small below */
  .time {
    grid-area: time;
    align-self: center;
    font-size: 30px;
    letter-spacing: -0.025em;
    line-height: 1;
  }
  .state {
    /* hide the standalone "state" text on mobile - the play button label
       conveys the same info, the alert glow handles the rest */
    display: none;
  }

  .bar { display: block; grid-area: bar; }

  /* mobile rep summary shown in the brief row */
  .reps-value {
    grid-area: reps;
    align-self: center;
    text-align: right;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
  }
  .reps-value::after {
    content: " reps";
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    margin-left: 3px;
    letter-spacing: 0.02em;
  }

  /* play button big and tappable on the right of the brief row */
  .play {
    grid-area: play;
    align-self: center;
    min-width: 78px;
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }

  .expand-toggle { display: inline-flex; grid-area: expand; }

  .presets { grid-area: presets; }
  .custom  { grid-area: custom; }

  .reset {
    grid-area: reset;
    width: 100%;
  }

  /* full rep controls when expanded */
  .reps-label { display: none; }
  .reps-controls {
    grid-area: repctrl;
    justify-content: flex-end;
    gap: 8px;
  }
  .reps-controls .iconbtn { width: 34px; height: 34px; }

  /* Collapsed: hide the expanded-only rows */
  .card:not(.expanded) .presets,
  .card:not(.expanded) .custom,
  .card:not(.expanded) .reset,
  .card:not(.expanded) .reps-controls {
    display: none;
  }
  /* Collapsed: tighten card so multiple fit on screen */
  .card:not(.expanded) { padding-bottom: 10px; }

  /* Hide the desktop circle glow during alert; keep card glow */
  .card.running { box-shadow: var(--shadow), 0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent); }
}

@media (min-width: 1100px) {
  .board { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
}

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