/* Cadence — all styles. Loaded by index.html; cached by sw.js. */
:root{
  --bg:#000000;
  --white:#ffffff;
  --dim:#4d4d4d;
  --dim-2:#2a2a2a;
  --mid:#a8a8a8;
  --alert:#e05a44;
  --font: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:var(--font);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  min-height:100dvh;
  padding: max(18px, env(safe-area-inset-top)) 22px max(16px, env(safe-area-inset-bottom));
  overflow:hidden;
  touch-action:manipulation;   /* kill iOS double-tap-to-zoom on repeated taps */
}

/* ---- top bar ---- */
.topbar{
  width:100%; max-width:440px;
  display:flex; justify-content:space-between; align-items:center;
}
.sig-group{ display:flex; align-items:center; gap:14px; }
.sig{
  display:flex; flex-direction:column;
  font-size:15px; font-weight:600; line-height:1.05;
  padding:2px 4px; border-radius:5px;
}
.sig:active{ background:var(--dim-2); }
.subdiv-group{
  display:flex; align-items:center;
  border:1px solid var(--dim-2); border-radius:8px; overflow:hidden;
}
.subdiv-btn{
  background:transparent; border:none; border-right:1px solid var(--dim-2);
  color:var(--dim); font-size:15px; line-height:1; padding:7px 12px; min-width:40px;
}
.subdiv-btn:last-child{ border-right:none; }
.subdiv-btn.active{ color:var(--bg); background:var(--white); }
.menu-dots{ display:flex; gap:4px; padding:10px; }
.menu-dots span{ width:4px; height:4px; border-radius:50%; background:var(--white); }

/* ---- BPM, centred inside the ring ---- */
.dial-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  /* the ring underneath owns the drag; the readout must not intercept it */
  pointer-events:none;
}
.bpm-number{
  font-size:min(21vw, 116px); font-weight:700;
  letter-spacing:-0.02em; line-height:1;
  font-variant-numeric:tabular-nums;
  transition:transform 70ms ease-out;
}
.bpm-number.pulse{ transform:scale(1.03); }
.bpm-label{ font-size:14px; font-weight:700; letter-spacing:0.06em; margin-top:2px; }
.status-line{
  font-size:10px; letter-spacing:0.14em; color:var(--dim);
  min-height:13px; text-align:center;
}
.status-line.alert{ color:var(--alert); }

/* ---- dial ---- */
.dial-wrap{
  position:relative;
  width:min(66vw, 250px); height:min(66vw, 250px);
  margin:6px 0; touch-action:none;
}
.dial-hint{
  width:100%; text-align:center;
  font-size:10px; letter-spacing:0.14em; color:var(--dim-2);
}
.dial-svg{ width:100%; height:100%; display:block; }
.dial-track-arc{ stroke:var(--dim-2); fill:none; }
.dial-value-arc{ stroke:var(--white); fill:none; stroke-linecap:round; }
.dial-handle{ fill:var(--white); }

/* The dots used to live inside the ring, capped at 62% of its width. Out here
   they get the full content width — roughly twice the room — which is what
   makes 12/8 in triplets legible and tappable. */
.beat-row{
  width:100%; max-width:440px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.beat-dots{
  display:flex; gap:14px; align-items:center;
  flex-wrap:wrap; justify-content:center; width:100%;
}
/* One wrapper per beat: rows break between beats, never inside one. */
.beat-group{ display:flex; gap:7px; align-items:center; }
.beat-dot{
  position:relative;
  width:17px; height:17px; border-radius:50%;
  border:1.5px solid var(--dim-2); background:transparent;
  transition:background 80ms linear, transform 80ms linear, border-color 80ms linear;
}
/* Invisible touch target, so small dots stay tappable without visual bulk. */
.beat-dot::after{ content:''; position:absolute; inset:-6px; border-radius:50%; }
.beat-dots.dense .beat-dot::after{ inset:-3px; }
.beat-group.group-start{ margin-left:10px; }
/* Offbeat positions read as subordinate to the beats they sit between. */
.beat-dot.sub-dot{ width:12px; height:12px; border-width:1px; }
.beat-dots.dense{ gap:10px; }
.beat-dots.dense .beat-group{ gap:5px; }
.beat-dots.dense .beat-dot{ width:15px; height:15px; }
.beat-dots.dense .beat-dot.sub-dot{ width:10px; height:10px; }
.beat-dot.accent{ border-color:var(--white); }
.beat-dot.medium{ border-color:var(--mid); }
.beat-dot.normal{ border-color:var(--dim); }
.beat-dot.silent{ border-color:var(--dim-2); opacity:0.4; }
.beat-dot.lit{ background:var(--dim); transform:scale(1.12); }
.beat-dot.lit.medium{ background:var(--mid); transform:scale(1.22); }
.beat-dot.lit.accent{ background:var(--white); transform:scale(1.35); }

/* ---- transport ---- */
.bottom-controls{
  display:flex; flex-direction:column; align-items:center;
  gap:12px; width:100%; max-width:440px;
}
.transport{ display:flex; align-items:center; gap:22px; }
.step-btn{
  width:38px; height:38px; border-radius:50%; border:none;
  background:transparent; color:var(--white);
  font-size:24px; font-weight:300;
  display:flex; align-items:center; justify-content:center;
}
.play-btn{
  width:62px; height:62px; border-radius:50%; border:none;
  background:transparent; color:var(--white);
  display:flex; align-items:center; justify-content:center;
}
.play-btn svg{ width:42px; height:42px; }
.tap-btn{
  font-size:10px; font-weight:700; letter-spacing:0.12em;
  color:var(--dim); background:transparent;
  border:1px solid var(--dim-2); border-radius:50%;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
}
.tap-btn:active{ color:var(--white); border-color:var(--white); }

.mode-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.mode-chip{
  font-size:10px; font-weight:600; letter-spacing:0.1em;
  color:var(--dim); background:transparent;
  border:1px solid var(--dim-2); border-radius:14px; padding:6px 12px;
}
.mode-chip.active{ color:var(--bg); background:var(--white); border-color:var(--white); }

.session-timer{
  font-size:10px; letter-spacing:0.14em; color:var(--dim);
  font-variant-numeric:tabular-nums;
}

/* ---- sheet ---- */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  opacity:0; pointer-events:none; transition:opacity 180ms ease; z-index:9;
}
.sheet-backdrop.open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  background:#0c0c0c; border-top:1px solid var(--dim-2);
  border-radius:16px 16px 0 0;
  padding:18px 22px max(22px, env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform 220ms cubic-bezier(.32,.72,0,1);
  max-height:82dvh; overflow-y:auto;
}
.sheet.open{ transform:translateY(0); }
.sheet-grip{
  width:36px; height:4px; border-radius:2px; background:var(--dim-2);
  margin:0 auto 16px;
}
.sheet-section{ margin-bottom:22px; }
.sheet-title{
  font-size:10px; font-weight:700; letter-spacing:0.16em;
  color:var(--dim); margin-bottom:10px;
}
.row{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 0; gap:12px;
}
.row-label{ font-size:13px; color:var(--white); }
.row-sub{ font-size:10px; color:var(--dim); margin-top:2px; letter-spacing:0.04em; }
.num-input{
  background:transparent; border:1px solid var(--dim-2); border-radius:7px;
  color:var(--white); font-family:var(--font); font-size:13px;
  width:58px; padding:6px 8px; text-align:center;
}
.toggle{
  width:44px; height:26px; border-radius:13px;
  background:var(--dim-2); border:none; position:relative; flex:none;
  transition:background 160ms ease;
}
.toggle::after{
  content:''; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%; background:var(--dim);
  transition:transform 160ms ease, background 160ms ease;
}
.toggle.on{ background:var(--white); }
.toggle.on::after{ transform:translateX(18px); background:var(--bg); }

.mini-btn{
  font-size:10px; font-weight:600; letter-spacing:0.08em;
  background:transparent; border:1px solid var(--dim-2);
  color:var(--dim); border-radius:12px; padding:5px 10px;
}
.mini-btn:active{ color:var(--white); border-color:var(--white); }
.drill-row{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 4px; }
.sig-selects{ display:flex; align-items:center; gap:6px; }
.sig-select{
  background:transparent; border:1px solid var(--dim-2); border-radius:7px;
  color:var(--white); font-family:var(--font); font-size:13px; padding:6px 8px;
}
button{cursor:pointer; touch-action:manipulation;}
input{ -webkit-user-select:text; user-select:text; }