/* Run It Back styles. Colours are tokens on :root (light) with a dark-mode override; sections follow the page from top to bottom. */
:root{
  --bg:#f5f5f8;--panel:#fff;--panel2:#eef0f5;--line:#dcdfe8;--text:#16181f;--muted:#5f6675;
  --accent:#e6317a;--accent-ink:#fff;--ok:#1a9d63;--warn:#b7791f;--shadow:0 1px 2px rgba(0,0,0,.06);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0e1015;--panel:#171a21;--panel2:#20242e;--line:#2b303c;--text:#eef0f5;--muted:#9aa3b3;
  --accent:#ff5c9a;--accent-ink:#1a0b13;--ok:#3ecf8e;--warn:#e8b04a;--shadow:none}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom)}
body.noscroll{overflow:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
.app{max-width:760px;margin:0 auto;padding:0 16px 40px}
body.pm .app{max-width:1920px}
.top{display:flex;align-items:center;gap:8px;padding:12px 0 10px}
.top h1{font-size:18px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ghost{background:none;border:1px solid var(--line);border-radius:10px;min-width:40px;height:40px;padding:0 12px}
.btn{background:var(--panel2);border:1px solid var(--line);border-radius:10px;min-height:40px;padding:6px 14px}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.sm{min-height:34px;padding:4px 10px;font-size:14px}
.btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:disabled{opacity:.35;cursor:default;background:transparent}
.ico{background:var(--panel2);border:1px solid var(--line);border-radius:8px;width:30px;height:34px;padding:0;font-size:14px;line-height:1}
.ico:disabled{opacity:.35}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow);margin-top:12px}
.card h2{font-size:15px;margin:0 0 8px}
.muted{color:var(--muted)}
.small{font-size:13px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row.between{justify-content:space-between}
input[type=text]{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px}
input[type=number]{width:60px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 6px;min-height:36px}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent);margin:0;flex:none}
input[type=range]{accent-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* header: the logo on the home page; Share and Log only while practising (the debug log is in the home page footer) */
.logo{width:30px;height:30px;border-radius:8px;flex:none}
body.pm .logo{display:none}
body:not(.pm) #dbgBtn, body:not(.pm) #shareBtn{display:none}
.shareBtn{flex:none;height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--accent);background:transparent;
  color:var(--accent);font-weight:700;font-size:15px;white-space:nowrap}
.shareBtn:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.linkBtn{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;font-size:inherit;cursor:pointer}

/* a YouTube thumbnail (My covers, a shared practice); the grey box shows when it can't load */
.thumb{width:96px;aspect-ratio:16/9;border-radius:8px;background:var(--panel2);overflow:hidden;flex:none}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* home: a share link was opened (the card at the top, see "sharing" in app.js) */
.sharedCard{border-color:var(--accent);margin-top:16px}
.sharedCard .shHead{display:flex;gap:12px;align-items:center}
.sharedCard .thumb{width:112px}
.sharedCard .kicker{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.sharedCard .shTitle{font-weight:700;margin:2px 0}
.sharedCard .switchRow{margin:12px 0 0}
.sharedCard .note{margin:10px 0 0}
.sharedCard .row{margin-top:12px}

/* home: the headline, the paste box, and the 5-6-7-8 / 1-8 count strip */
.hero{position:relative;padding:22px 4px 8px;text-align:center}
.hero::before{content:"";position:absolute;inset:-40px -16px auto;height:280px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent)}
.heroTitle{font-size:clamp(28px, 7.5vw, 44px);line-height:1.08;letter-spacing:-.02em;margin:0 auto 12px;max-width:18ch;font-weight:800;text-wrap:balance}
.heroTitle .hl{color:var(--accent);white-space:nowrap}
.heroSub{color:var(--muted);margin:0 auto 18px;max-width:46ch}
.heroForm{max-width:520px;margin:0 auto}
.heroForm .btn.primary{min-height:48px;padding:6px 22px;font-size:17px}
.heroForm input[type=text]{min-height:48px;background:var(--panel);font-size:16px}
.err{color:var(--warn);margin:8px 0 0;font-size:14px}
.heroCounts{display:flex;justify-content:center;gap:3px;margin:18px auto 10px}
.heroCounts span{width:min(26px, calc((100vw - 70px) / 12));height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.heroCounts .ci{color:var(--muted);border:1px dashed var(--line)}
.heroCounts .c{background:var(--panel2);border:1px solid var(--line)}
.heroCounts .c.one{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.heroCounts .ci + .c{margin-left:6px}
.heroTags{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.heroTags li{padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}

/* home: My covers, How it works, Guides */
.recent{list-style:none;margin:0;padding:0}
.recent li{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line)}
.recent li:first-child{border-top:0}
.recent .open{flex:1;display:flex;align-items:center;gap:12px;text-align:left;background:none;border:0;padding:10px 0;min-width:0}
.recent .meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.recent .t{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.how{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.how li{display:flex;gap:12px;align-items:flex-start}
.how .howT{display:block}
.howIco{width:38px;height:38px;border-radius:10px;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}

.guideCards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.guideCards a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);
  text-decoration:none;color:var(--text);font-size:14px}
.guideCards a:hover{border-color:var(--accent)}

/* home on a computer: wider, two columns under the headline */
@media (min-width:900px){
  body:not(.pm) .app{max-width:1040px}
  .hero{padding-top:36px}
  .heroTitle{max-width:none}
  .homeCols{display:grid;grid-template-columns:3fr 2fr;gap:16px;align-items:start}
  .homeCols > * > .card:first-child:not([hidden]){margin-top:12px}
}

/* player layout: video first, big */
.stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:14px}
/* zooming in (see zoom.js): the layer holding the video is scaled and moved; the masks above it still hide YouTube's bars */
.zoomLayer{position:absolute;inset:0;transform-origin:0 0;pointer-events:none}
#playerWrap{position:absolute;pointer-events:none}
#playerWrap.mirror{transform:scaleX(-1)}
#playerWrap iframe{width:100%;height:100%;border:0;display:block}
.mask{position:absolute;left:0;right:0;background:#000;z-index:2;pointer-events:none}
#maskT{top:0}#maskB{bottom:0}
.stageMsg{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:20px;background:rgba(0,0,0,.7);font-size:14px}
/* phones (and any short window, like a phone on its side): the video sits full width at the top and stays there while you scroll */
@media (max-width:899px), (max-height:599px){
  .vcol{position:sticky;top:0;z-index:6;background:var(--bg);margin:0 -16px;padding-bottom:6px}
  .vcol .stage{border-radius:0}
  #ctlMainHome{padding:0 16px}
}
/* on its side, the full-width video would be taller than the screen: cap it so the count and controls fit, and let it
   scroll away normally (a sticky video would cover the whole screen and hide the panels) */
@media (orientation:landscape) and (max-height:599px){
  .vcol{position:relative}
  .vcol .stage:not(.fs){aspect-ratio:auto;height:calc(100vh - 165px);height:calc(100dvh - 165px)}
}
@media (min-width:900px) and (min-height:600px){
  /* computer: the video takes everything except a 360px control column, as big as the window height allows */
  body.pm .app{padding:0 24px 24px}
  .playerGrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
  .vcol{position:sticky;top:8px}
  .stage{width:min(100%,calc((100vh - 150px)*16/9));margin:0 auto}
  .pcol{max-height:calc(100vh - 70px);overflow-y:auto;padding-right:4px}
  body.pm .top{padding:8px 0 6px}
}

/* controls (move into the stage in full screen) */
.count{display:flex;align-items:center;gap:12px;margin-top:8px}
.count .num{font-size:36px;font-weight:700;line-height:1;width:40px;text-align:center;font-variant-numeric:tabular-nums}
.count .segs{flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.count .segs i{height:10px;border-radius:5px;background:var(--panel2);border:1px solid var(--line)}
.count .segs i.on{background:var(--accent);border-color:var(--accent)}
.count .segs i.one.on{background:var(--ok);border-color:var(--ok)}
.count .lbl{min-width:80px;text-align:right;font-size:13px;color:var(--muted)}
.bar{display:flex;align-items:center;gap:8px;margin-top:8px}
.bar input[type=range]{flex:1;min-width:0}
.time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{background:var(--panel2);border:0;border-right:1px solid var(--line);padding:6px 10px;min-height:38px;font-size:14px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.seg button:disabled{opacity:.5;cursor:default}
#ctlOpts{margin-top:10px}
/* under the video (not in full screen): speeds across the full width, then the four toggles in equal columns */
#ctlOptsHome #ctlOpts{display:grid;grid-template-columns:repeat(5, 1fr);gap:6px}
#ctlOptsHome #rateSeg{grid-column:1 / -1;display:flex}
#ctlOptsHome #rateSeg button{flex:1}
#ctlOptsHome #ctlOpts > .btn{padding:4px 6px;white-space:nowrap}
.miniSess{display:none;align-items:center;gap:8px;flex-wrap:wrap;width:100%}
.miniSess .ms{flex:1;min-width:120px;font-size:13px}

/* full screen: the video fills the screen. Controls are one slim row that fades out while playing; speed, mirror and the
   practice buttons sit behind the ⋯ button, and the count is a small chip in the corner that stays visible. */
.fsBar,.fsCount,#moreBtn{display:none}
.stage.fs{position:relative;width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;margin:0}
.stage.fs.pseudo{position:fixed;inset:0;z-index:100;width:auto;height:auto}
/* the video column is its own layer (it is sticky), so lift the whole column above the control panel while full screen */
body.fsmode .vcol{z-index:150}
.stage.fs .fsBar{display:block;position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:14px calc(12px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));color:#fff;transition:opacity .25s;
  --text:#fff;--muted:#d3d7e0;--panel2:rgba(255,255,255,.18);--line:rgba(255,255,255,.3)}
.stage.fs.idle .fsBar{opacity:0;pointer-events:none}
.stage.fs.idle{cursor:none}
.stage.fs #ctlMain .bar{margin-top:0}
.stage.fs #moreBtn{display:inline-flex;align-items:center;justify-content:center}
.stage.fs #ctlOpts{display:none;margin-top:0;margin-bottom:8px}
.stage.fs.more #ctlOpts{display:flex}
.stage.fs .miniSess{display:flex}
.stage.fs .fsCount{display:block;position:absolute;z-index:5;top:calc(8px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));
  max-width:60%;text-align:right;color:#fff;background:rgba(0,0,0,.42);border-radius:12px;padding:4px 12px;
  --text:#fff;--muted:#e3e6ee;--panel2:rgba(255,255,255,.2);--line:rgba(255,255,255,.3)}
.stage.fs .fsCount{width:min(520px,62%)}
@media (max-width:599px){ .stage.fs .fsCount{width:auto;max-width:none;left:calc(12px + env(safe-area-inset-left))} }
.stage.fs .fsCount .count{margin:0;gap:10px}
.stage.fs .fsCount .count .num{font-size:30px;width:auto;min-width:28px}
.stage.fs .fsCount .count .segs i{height:12px}
.stage.fs .fsCount .count .lbl{min-width:0;white-space:nowrap}
/* beat check: a ring that flashes on every count, green on the 1 */
.flash{position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 6px var(--accent);opacity:0;transition:opacity .12s ease-out}
.flash.on{opacity:.9;transition:none}
.flash.one{box-shadow:inset 0 0 0 10px var(--ok)}
.count .num.pulse{color:var(--accent)}
.twoOnes .status{font-size:14px;margin-top:10px}
.twoOnes .status b{font-variant-numeric:tabular-nums}
.fsStat{font-size:11px;opacity:.9;line-height:1.2}
.stage.fs.ad .fsBar{top:0;bottom:auto;padding:8px calc(12px + env(safe-area-inset-right)) 14px calc(12px + env(safe-area-inset-left));background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}
/* a clear layer over the video: tapping the picture (including YouTube's own big play button) plays or pauses */
/* your camera ("📷 Me", see camera.js): a small window in one corner of the video, mirrored like a studio mirror.
   Drag it and it moves to the nearest corner. In full screen it keeps clear of the count (top) and controls (bottom). */
.meBox{position:absolute;z-index:4;width:clamp(84px, 24%, 220px);aspect-ratio:3/4;max-height:50%;border-radius:12px;overflow:hidden;
  border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 18px rgba(0,0,0,.5);background:#000;touch-action:none;cursor:grab}
.meBox.dragging{cursor:grabbing;opacity:.85;transition:none}
.meBox video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block;pointer-events:none}
.meBox.tl{top:10px;left:10px}.meBox.tr{top:10px;right:10px}.meBox.bl{bottom:10px;left:10px}.meBox.br{bottom:10px;right:10px}
.stage.fs .meBox.tl,.stage.fs .meBox.tr{top:calc(64px + env(safe-area-inset-top))}
.stage.fs .meBox.bl,.stage.fs .meBox.br{bottom:calc(76px + env(safe-area-inset-bottom))}
.meClose{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;
  font-size:13px;line-height:26px;padding:0}
/* ● REC on the camera window while recording (the Record tab) */
.meRecBadge{display:none;position:absolute;top:6px;left:6px;padding:1px 6px;border-radius:6px;background:#e02424;color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.04em}
.meBox.recording{border-color:#e02424}
.meBox.recording .meRecBadge{display:block}
.recStatus{font-weight:600;margin:0 0 12px;font-variant-numeric:tabular-nums}
.recStatus.on{color:#e02424}
#rRec[aria-pressed=true]{background:#e02424;border-color:#e02424;color:#fff}

/* watching a run back: the video on the left half, your recording on the right, mirrored like the live view.
   The recording sits above the masks but under the tap layer, so tapping still plays and pauses both. */
.takeVideo{position:absolute;top:0;right:0;width:50%;height:100%;object-fit:contain;background:#000;transform:scaleX(-1);
  z-index:3;pointer-events:none}
.stage.review .meBox{display:none}
.reviewBar{position:absolute;z-index:5;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  padding:6px 8px 6px 14px;border-radius:999px;background:rgba(14,16,21,.88);color:#fff;white-space:nowrap;max-width:calc(100% - 16px)}
.stage.fs .reviewBar{top:auto;bottom:calc(72px + env(safe-area-inset-bottom))}   /* the count is at the top in full screen */
.reviewLbl{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.reviewBar .btn:not(.primary){background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}

/* while practice has the video paused (a break, waiting for you, done, or paused), this card covers the middle of the
   picture, where YouTube draws its big play button; tapping it does what the main practice button does */
.pauseCard{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);min-width:min(240px,70%);min-height:96px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 22px;border:0;border-radius:18px;
  background:#0e1015;color:#fff;box-shadow:0 6px 30px rgba(0,0,0,.45);text-align:center}   /* solid: nothing shows through */
.pauseCard.fading{pointer-events:none;animation:pauseCardFade 1.1s forwards}   /* see PAUSE_CARD_FADE_MS in app.js */
@keyframes pauseCardFade{0%,65%{opacity:1}100%{opacity:0}}
.pauseCard .pcHead{font-size:13px;font-weight:600;opacity:.8;letter-spacing:.02em}
.pauseCard .pcAct{font-size:18px;font-weight:800;color:#ff5c9a}
.shield{position:absolute;inset:0;z-index:3;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.stage.zoomed .shield{touch-action:none;cursor:grab}   /* zoomed in: a drag moves the picture instead of the page */
/* the 🔍 button, on the video in the bottom-left corner (bottom right when your camera window is there; above the
   controls in full screen) */
.zoomBtn{position:absolute;z-index:4;left:10px;bottom:10px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(14,16,21,.6);color:#fff;font-size:17px;line-height:1;padding:0}
.zoomBtn[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}
.stage:has(.meBox.bl:not([hidden])) .zoomBtn{left:auto;right:10px}
.stage.fs .zoomBtn{bottom:calc(76px + env(safe-area-inset-bottom))}
.stage.ad .zoomBtn,.stage.review .zoomBtn{display:none}   /* not over an ad; not while watching back */
.stage.ad .shield{display:none}
.stage.ad #playerWrap{pointer-events:auto;transform:none}
.stage.ad .mask{display:none}
.adNote{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.35}
.stage.fs .adNote{color:#fff}

.tabs{display:flex;gap:6px;margin-top:14px}
.tabs button{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;min-height:42px;font-weight:600;white-space:nowrap;padding:0 6px}
@media (max-width:360px){.tabs button{font-size:14px}}
.tabs button[aria-selected=true]{background:var(--text);color:var(--bg);border-color:var(--text)}

/* beats */
.tap{width:100%;min-height:110px;font-size:22px;font-weight:700;border-radius:16px;border:2px solid var(--accent);background:var(--panel2);touch-action:manipulation}
.tap:active,.tap.hit{background:var(--accent);color:var(--accent-ink)}
.bpm{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
/* "Listen for the beat" (listen.js): the button, and what it heard or why it couldn't */
.listenRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.listenRow #listenBtn{min-height:44px}
#listenMsg.problem{color:var(--warn)}
#listenBtn[aria-pressed=true]{background:var(--panel2);color:var(--text);border-color:var(--line)}

/* trim window */
.tTrack{position:relative;height:64px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.tIn{position:absolute;left:16px;right:16px;top:0;bottom:0}
.tSel{position:absolute;top:0;bottom:0;background:rgba(230,49,122,.2);border-top:4px solid var(--accent);border-bottom:4px solid var(--accent);box-shadow:0 0 0 200vmax rgba(0,0,0,.32);pointer-events:none}
.tTick{position:absolute;top:10px;bottom:10px;width:1px;background:var(--accent);opacity:.55;pointer-events:none}
.tHead{position:absolute;top:0;bottom:0;width:20px;margin-left:-10px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:ew-resize;touch-action:none;z-index:2}
.tHead::before{content:'';position:absolute;top:-6px;bottom:-6px;left:-12px;right:-12px}
.tHead::after{content:'';width:3px;height:26px;border-radius:2px;background:var(--accent-ink);opacity:.85}
.tHead.drag{filter:brightness(1.15)}
.tPlay{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--text);opacity:.85;pointer-events:none;z-index:1}
.tLbl{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.tLbl b{color:var(--text)}
.nudges{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.nudges .g{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* plan */
.stepsHead{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:12px;color:var(--muted);margin-bottom:4px}
.srow{display:flex;align-items:center;gap:8px;margin-top:8px}
.srow .num{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
.srow .mv{display:flex;gap:4px;margin-left:auto}
.opt{display:flex;align-items:center;gap:10px;margin-top:12px}
.opt label{flex:1}
.sess .title{font-size:20px;font-weight:700}
.sess #sSub{white-space:pre-line}
/* the practice buttons: the main one full width, then Again and Next speed side by side, then the block buttons */
.sBtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sBtns #sMain{grid-column:1 / -1;min-height:48px;font-size:17px}
.sNav{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px;margin-top:8px}
.sNav2{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sNav2 .btn{flex:1}
/* practice plan: presets, and the detailed plan folded away */
.presetSeg{display:flex}
.presetSeg button{flex:1;min-height:42px;font-size:15px}
.planMore{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.planMore summary{cursor:pointer;font-weight:600;color:var(--accent);padding:4px 0;list-style-position:inside}
.planMore .sub{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.planMore .sub:first-of-type{border-top:0;margin-top:6px}
.planMore h3{font-size:14px;margin:0 0 6px}
.prog{height:6px;background:var(--panel2);border-radius:3px;overflow:hidden;margin:10px 0}
.prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin-top:12px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 4px;text-align:center;min-height:52px}
.chip b{display:block;font-size:16px}
.chip span{font-size:11px;color:var(--muted)}
.chip.playing{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip.playing span{color:var(--accent-ink)}
.cue{position:absolute;left:14px;top:8px;z-index:3;font-size:clamp(44px,9vw,96px);font-weight:800;line-height:1;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.75);pointer-events:none;font-variant-numeric:tabular-nums}
.cgrp{margin-top:12px}
.cgrp .cl{font-size:12px;color:var(--muted);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgrp .chips{margin-top:0}
.chip.conn{border-style:dashed;border-color:var(--accent)}
/* pop-up panels: the debug log and Share */
.dbgPanel{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);display:flex;padding:12px}
.dbgBox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;width:min(760px,100%);max-height:100%;margin:auto;display:flex;flex-direction:column;gap:10px}
.dbgBox h2{margin:0;font-size:16px}
.dbgBox textarea{flex:1;min-height:220px;height:55vh;font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px;resize:none;white-space:pre}
.shareBox{width:min(520px,100%)}
#shareLink{font-size:13px;color:var(--muted)}
[hidden]{display:none!important}

/* an on/off switch with a label and a note (Share panel, shared practice card) */
.switchRow{display:flex;gap:12px;align-items:center;padding:10px 12px;margin-bottom:12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.switchRow > span{display:flex;flex-direction:column;gap:2px}
input[role=switch]{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;flex:none;margin:0;cursor:pointer;transition:background .15s}
input[role=switch]::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
input[role=switch]:checked{background:var(--accent)}
input[role=switch]:checked::after{transform:translateX(18px)}

/* installed to the home screen: on iPhone the page runs under a see-through status bar, so keep content below it
   (html.standalone is set by js/pwa.js) */
html.standalone body{padding-top:env(safe-area-inset-top)}
html.standalone body::before{content:'';position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top);background:var(--bg);z-index:50}
html.standalone .vcol{top:env(safe-area-inset-top)}

/* tips: the Support card on the home page, and the box on the practice card when a range is complete (outlined there,
   so it doesn't compete with Start again) */
.btn.tipBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 18px;
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none}
.tipCard{border-color:var(--accent)}
/* ad spaces (ads.js): hidden until an ad loads, with a small label so it's clear what it is */
.adSlot{margin-top:12px}
.adLabel{font-size:11px;color:var(--muted);text-align:center;margin:0 0 4px;letter-spacing:.04em}
.tipCard p{margin:0 0 10px}
.tipBox{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0 2px;padding:10px 12px;
  border:1px solid var(--accent);border-radius:12px;font-size:14px}
.tipBox .btn.tipBtn{background:transparent;color:var(--accent);min-height:40px}

/* footers, and the text pages (privacy, guides) */
.siteFoot{margin-top:24px;text-align:center}
.siteFoot a,.doc a,.tipLink{color:var(--accent)}
.siteFoot p{margin:4px 0}
.doc h1{font-size:22px;margin:8px 0 4px}
.doc h2{font-size:16px;margin:20px 0 6px}
.doc p,.doc li{max-width:65ch}
.doc li{margin:4px 0}
.doc .top{justify-content:space-between}
.doc .lead{font-size:18px}
.doc .more{margin-top:28px;border-top:1px solid var(--line);padding-top:4px}
.doc .more a,.guideList a{color:var(--accent)}
.guideList{padding-left:18px}
.guideList li{margin:12px 0}
.ctaBox{margin:22px 0;text-align:center}
.btn.cta{display:inline-flex;align-items:center;min-height:46px;padding:8px 22px;text-decoration:none;font-size:17px;margin-bottom:6px}