/* ---- tokens: dark-first (the practice room), light theme is the paper log sheet ---- */
:root{
  --ground:#14161a; --surface:#1b1e24; --surface-2:#22262d; --raised:#282d35;
  --line:#2e333c; --line-soft:#242830;
  --ink:#e8e6e1; --ink-dim:#99a0aa; --ink-faint:#767e8a;
  --amber:#e8a33d; --amber-ink:#14161a; --amber-glow:rgba(232,163,61,.14);
  --slate:#6e8f93;
  --warn:#c9765f;
  --focus:#e8a33d;
  --bar-h:4px;

  /* This design is dark in every viewer's theme, so say so — it makes the
     browser render scrollbars and the seek slider dark to match. */
  color-scheme:dark;
}

*{box-sizing:border-box}

/* An author `display` beats the UA stylesheet's [hidden] rule, so anything
   styled display:flex ignores the attribute entirely. This keeps `hidden`
   meaning hidden. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Barlow,"Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.5;
  padding-bottom:172px;   /* replaced at runtime by the measured player height */
}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:2px}
.mono{font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}

.wrap{max-width:900px; margin:0 auto; padding:0 20px}

/* ---- masthead ---- */
header{border-bottom:1px solid var(--line); background:var(--surface)}
.masthead{display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px 32px; padding:34px 20px 26px; max-width:900px; margin:0 auto}
.title-block{flex:1 1 320px; min-width:0}
.eyebrow{
  font-family:"Barlow Condensed",Barlow,sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin:0 0 8px;
  display:flex; align-items:center; gap:9px;
}
.rec-dot{width:7px; height:7px; border-radius:50%; background:var(--amber); flex:none}
h1{
  font-family:"JetBrains Mono",monospace; font-weight:700;
  font-size:clamp(24px,5.2vw,38px); line-height:1.1; letter-spacing:-.02em;
  margin:0; color:var(--ink); overflow-wrap:anywhere;
}
.subtitle{margin:10px 0 0; color:var(--ink-dim); font-size:15px; max-width:56ch}

.stats{display:flex; gap:26px; flex:none}
.stat{display:flex; flex-direction:column; gap:2px}
.stat .n{font-family:"JetBrains Mono",monospace; font-size:22px; font-weight:500; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.stat .l{font-family:"Barlow Condensed",sans-serif; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}

/* ---- controls bar ---- */
.controls{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:14px 20px; max-width:900px; margin:0 auto;
}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--surface)}
.seg button{
  appearance:none; border:0; background:transparent; color:var(--ink-dim); cursor:pointer;
  font-family:"Barlow Condensed",sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; padding:8px 16px;
}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--amber); color:var(--amber-ink)}
.seg button:not([aria-pressed="true"]):hover{color:var(--ink); background:var(--surface-2)}
.hint{font-size:13px; color:var(--ink-faint)}
.hint kbd{
  font-family:"JetBrains Mono",monospace; font-size:11px; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:3px; padding:1px 5px; color:var(--ink-dim); background:var(--surface)
}

/* ---- song groups ---- */
main{padding-top:6px}
.group{margin:0 0 30px}
.group-head{
  display:flex; align-items:baseline; gap:12px; padding:0 20px 8px;
  border-bottom:1px solid var(--line); margin-bottom:2px;
}
.group-head h2{
  font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:21px;
  letter-spacing:.04em; text-transform:uppercase; margin:0; color:var(--ink); text-wrap:balance;
}
.group-head .count{
  font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--slate);
  letter-spacing:.02em; white-space:nowrap;
}

/* ---- take rows ---- */
.take{
  display:grid; grid-template-columns:34px 1fr 132px 56px 34px;
  align-items:center; gap:0 14px;
  width:100%; text-align:left; background:transparent; border:0;
  border-bottom:1px solid var(--line-soft);
  padding:11px 20px; cursor:pointer; color:inherit; font:inherit;
}
.take:hover{background:var(--surface)}
.take[aria-current="true"]{background:var(--amber-glow)}
.take .num{
  font-family:"JetBrains Mono",monospace; font-size:13px; font-weight:500;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.take[aria-current="true"] .num{color:var(--amber); font-weight:700}
.take.played .num{color:var(--slate)}
.take .name{min-width:0}
.take .name b{font-weight:500; font-size:16px; color:var(--ink); display:block; overflow-wrap:anywhere}
.take .note{
  display:inline-block; margin-top:2px; font-family:"Barlow Condensed",sans-serif;
  font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--slate);
}
.take .meter{height:var(--bar-h); background:var(--line); border-radius:1px; overflow:hidden}
.take .meter i{display:block; height:100%; background:var(--slate); border-radius:1px}
.take[aria-current="true"] .meter i{background:var(--amber)}
.take .dur{
  font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--ink-dim);
  text-align:right; font-variant-numeric:tabular-nums;
}
.dl{
  display:grid; place-items:center; width:30px; height:30px; border-radius:3px;
  color:var(--ink-faint); text-decoration:none; font-size:15px; line-height:1;
}
.dl:hover{color:var(--amber); background:var(--surface-2)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); margin-top:34px; padding:24px 20px 34px; color:var(--ink-faint); font-size:14px}
footer .wrap{padding:0; max-width:900px}
footer p{margin:0 0 9px; max-width:66ch}
footer b{color:var(--ink-dim); font-weight:500}

/* ---- docked player ---- */
.player{
  position:fixed; inset:auto 0 0 0; z-index:20;
  background:var(--surface); border-top:1px solid var(--line);
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
}
.player-inner{max-width:900px; margin:0 auto; display:flex; align-items:center; gap:14px}
.pbtn{
  appearance:none; border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  width:34px; height:34px; border-radius:50%; cursor:pointer; display:grid; place-items:center; flex:none; padding:0;
}
.pbtn:hover:not(:disabled){border-color:var(--amber); color:var(--amber)}
.pbtn:disabled{opacity:.35; cursor:default}
.pbtn.main{width:44px; height:44px; background:var(--amber); border-color:var(--amber); color:var(--amber-ink)}
.pbtn.main:hover:not(:disabled){filter:brightness(1.08); color:var(--amber-ink)}
.pbtn svg{width:15px; height:15px; fill:currentColor; display:block}
.pbtn.main svg{width:17px; height:17px}
.now{flex:1 1 auto; min-width:0}
.now-title{
  font-family:"Barlow Condensed",sans-serif; font-size:16px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.now-title .tk{color:var(--amber); font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:500; margin-right:8px; letter-spacing:0}
.now-idle{color:var(--ink-faint); text-transform:none; letter-spacing:0; font-family:Barlow,sans-serif; font-weight:400; font-size:14px}

@media (max-width:660px){
  .take{grid-template-columns:30px 1fr 50px 30px; gap:0 10px; padding:10px 16px}
  .take .meter{grid-column:2 / 4; grid-row:2; margin-top:7px}
  .take .num{grid-row:1}
  .take .name{grid-row:1}
  .take .dur{grid-row:1}
  .dl{grid-row:1}
  .group-head,.take{padding-left:16px; padding-right:16px}
  .masthead{padding:26px 16px 20px; gap:18px}
  .stats{gap:20px}
  .controls{padding:12px 16px}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
main.wrap{padding:0}
footer .fine{margin-top:16px; color:var(--ink-faint)}

/* ================= index: the list of practice days ================= */
body.home{padding-bottom:0}
.home-title{
  font-family:"Barlow Condensed",Barlow,sans-serif; font-weight:600;
  /* Always one line. The 4.2vw middle term keeps it inside the title column
     even at the tightest point, just before the stats wrap underneath. */
  font-size:clamp(26px,4.2vw,46px); letter-spacing:.02em; line-height:1;
  white-space:nowrap;
}
.section-head{padding:26px 20px 10px; border-bottom:1px solid var(--line)}
.section-head h2{
  font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:15px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin:0;
}
.days{display:flex; flex-direction:column}
.empty{padding:28px 20px; color:var(--ink-faint)}

.day{
  display:grid; grid-template-columns:74px 1fr 28px; align-items:center; gap:0 20px;
  padding:18px 20px; border-bottom:1px solid var(--line-soft);
  text-decoration:none; color:inherit;
}
.day:hover{background:var(--surface)}
.day:hover .go{color:var(--amber); transform:translateX(3px)}

.when{display:flex; flex-direction:column; align-items:flex-start; gap:1px}
.when .dom{
  font-family:"JetBrains Mono",monospace; font-size:27px; font-weight:500; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.when .mon{
  font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--amber);
  letter-spacing:.04em; margin-top:3px;
}
.when .dow{
  font-family:"Barlow Condensed",sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);
}

.day .body{display:flex; flex-direction:column; gap:9px; min-width:0}
.day .meta{
  font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-dim);
  font-variant-numeric:tabular-nums;
}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  display:inline-flex; align-items:baseline; gap:5px;
  font-family:"Barlow Condensed",sans-serif; font-size:13px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:2px; padding:3px 8px;
}
.chip i{
  font-style:normal; font-family:"JetBrains Mono",monospace; font-size:10px;
  color:var(--slate); letter-spacing:0;
}
.day .go{
  font-size:19px; color:var(--ink-faint); text-align:right;
  transition:color .15s ease, transform .15s ease;
}

/* back link in a session masthead */
.eyebrow .back{
  color:var(--slate); text-decoration:none;
  border-bottom:1px solid transparent;
}
.eyebrow .back:hover{color:var(--amber); border-bottom-color:var(--amber)}
.eyebrow .sep{color:var(--line); margin:0 2px}

@media (max-width:660px){
  .day{grid-template-columns:56px 1fr 20px; gap:0 14px; padding:15px 16px}
  .when .dom{font-size:22px}
  .section-head{padding:20px 16px 9px}
}


/* ================= installed to the home screen =================
   In standalone mode there is no browser chrome, so the page runs edge to
   edge: the masthead sits under the status bar / notch, and the docked
   player sits over the home indicator. viewport-fit=cover plus these insets
   is what keeps content clear of both. The insets are 0 in a normal tab. */
header{padding-top:env(safe-area-inset-top)}
.masthead,.controls,.wrap,.group-head,.take,.day{
  padding-left:calc(20px + env(safe-area-inset-left));
  padding-right:calc(20px + env(safe-area-inset-right));
}
.player{
  padding-left:calc(20px + env(safe-area-inset-left));
  padding-right:calc(20px + env(safe-area-inset-right));
}

/* Standalone has no browser back button, so the one in the masthead is the
   only way back to the day list — give it a real target size for a thumb. */
@media (display-mode:standalone){
  .eyebrow .back{padding:6px 0; display:inline-block}
  .take{padding-top:14px; padding-bottom:14px}
  .day{padding-top:20px; padding-bottom:20px}
}

@media (max-width:660px){
  .masthead,.controls,.wrap,.group-head,.take,.day,.player{
    padding-left:calc(16px + env(safe-area-inset-left));
    padding-right:calc(16px + env(safe-area-inset-right));
  }
}




@media (max-width:660px){
  /* Thumbs are less precise than a mouse: bigger targets everywhere. */
        }


/* ================= practice controls ================= */
/* The scrubber sits over a band showing the looped section, so the part you
   are drilling is visible on the timeline rather than only in two numbers. */

.pgroup{display:inline-flex; align-items:center; gap:5px}
.pbtn-sm{
  appearance:none; cursor:pointer; flex:none;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; font-weight:500;
  color:var(--ink-dim); background:var(--surface-2);
  border:1px solid var(--line); border-radius:3px;
  padding:4px 0; line-height:1; min-width:30px; text-align:center;
}
.pbtn-sm:hover:not(:disabled){color:var(--ink); border-color:var(--slate)}
.pbtn-sm[aria-pressed="true"]{background:var(--amber); color:var(--amber-ink); border-color:var(--amber)}
.pbtn-sm:disabled{opacity:.35; cursor:default}

@media (max-width:660px){
    .pbtn-sm{padding:7px 0; min-width:38px; font-size:12px}
    }


/* ================= docked player ================= */
.player{padding:0 0 env(safe-area-inset-bottom)}

/* The timeline spans the full width and sits flush on the player's top edge,
   right against the song list. Full width means the whole song is the whole
   strip, so a glance tells you where you are in it. */
/* The timeline is the control that matters most in practice, so it gets real
   height rather than a token strip. */
.wave{
  display:block; width:100%; height:76px; margin:0; cursor:pointer;
  background:var(--surface-2); border-bottom:1px solid var(--line);
  touch-action:none;          /* a drag scrubs, it does not scroll the page */
}
.wave:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}

.player-inner{
  max-width:900px; margin:0 auto; display:flex; align-items:center; gap:14px;
  padding:10px calc(20px + env(safe-area-inset-right)) 10px calc(20px + env(safe-area-inset-left));
}
.transport{display:flex; align-items:center; gap:10px; flex:none}
.now{flex:1 1 auto; min-width:0}

.pgroup{display:inline-flex; align-items:center; gap:5px}

@media (max-width:660px){
  .wave{height:88px}          /* a thumb needs more to aim at than a mouse */
  .player-inner{
    gap:12px;
    padding:10px calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));
  }
  }


/* ---- nudge: the control you hammer ----
   Sized and weighted like a game controller's shoulder buttons — big target,
   obvious press state, instant feedback. The label is the seconds, the arrow
   says which way. */
.nudge{
  appearance:none; cursor:pointer; flex:none; position:relative;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  width:46px; height:46px; padding:0;
  color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px;
}
.nudge svg{width:17px; height:17px; fill:currentColor; display:block}
.nudge b{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; font-weight:500;
  line-height:1; letter-spacing:.02em; color:var(--ink-dim);
}
.nudge:hover:not(:disabled){border-color:var(--slate); background:var(--surface)}
.nudge:active:not(:disabled){transform:translateY(1px)}
.nudge:disabled{opacity:.35; cursor:default}

/* A press must read even when presses come faster than the audio can seek. */
.nudge.hit{animation:nudgeHit .22s ease-out}
@keyframes nudgeHit{
  0%   {background:var(--amber); border-color:var(--amber); color:var(--amber-ink)}
  100% {background:var(--surface-2); border-color:var(--line); color:var(--ink)}
}
.nudge.hit b{animation:nudgeHitLabel .22s ease-out}
@keyframes nudgeHitLabel{0%{color:var(--amber-ink)} 100%{color:var(--ink-dim)}}
@media (prefers-reduced-motion:reduce){
  .nudge.hit,.nudge.hit b{animation:none}
  .nudge.hit{background:var(--surface)}
}

.transport{gap:9px}

@media (max-width:660px){
  /* Five controls plus a title will not share one line on a phone, so the
     title takes its own and the transport centres under it. */
  .player-inner{flex-wrap:wrap; gap:8px}
  .transport{order:2; width:100%; justify-content:center; gap:12px}
  .now{order:1; width:100%}
  .nudge{width:52px; height:52px}
  .nudge svg{width:19px; height:19px}
  .nudge b{font-size:10px}
  }


/* ---- clear loop: named, not a bare glyph, and dead until there is
   something to clear, so it never invites a pointless press ---- */
.pbtn-sm.clear{
  display:inline-flex; align-items:center; gap:4px;
  min-width:auto; padding:4px 8px;
  font-family:"Barlow Condensed",sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
}
.pbtn-sm.clear svg{width:12px; height:12px; fill:currentColor; display:block}
.pbtn-sm.clear:hover:not(:disabled){
  color:var(--warn); border-color:var(--warn); background:var(--surface);
}
.pbtn-sm.clear:active:not(:disabled){background:var(--warn); color:#14161a; border-color:var(--warn)}

@media (max-width:660px){
  .pbtn-sm.clear{padding:7px 10px; font-size:13px}
  .pbtn-sm.clear svg{width:13px; height:13px}
}

/* ---- loop edge controls ---- */

@media (max-width:660px){
        }

/* The loop cluster grew past a phone's width and pushed Clear off screen.
   Let every control group wrap, and stop the player from being able to
   overflow sideways at all. */
.pgroup{flex-wrap:wrap; row-gap:7px}
.player,.player-inner,.now{min-width:0}

@media (max-width:660px){
  /* Times and Clear finish the first line; the A/B edge pairs take the next. */
    }


/* ================= player, tidied =================
   The bar had five stacked rows. The clock moved onto the timeline it
   measures, and the loose pills became segmented groups — fewer floating
   rectangles, so the eye reads groups instead of counting buttons. */
.timeline{position:relative; line-height:0}
.tl-time{
  position:absolute; bottom:5px; pointer-events:none;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
  padding:1px 5px; border-radius:3px;
  background:rgba(20,22,26,.72); backdrop-filter:blur(2px);
}
.tl-time.left{left:6px; color:var(--ink)}
.tl-time.right{right:6px; color:var(--ink-dim)}

.pgroup{display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px}

/* joined buttons read as one control */
.segs{display:inline-flex; align-items:center; gap:6px}
.segs > b{
  font-family:"Barlow Condensed",sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);
}
.seg-btns{
  display:inline-flex; border:1px solid var(--line); border-radius:4px;
  overflow:hidden; background:var(--surface-2);
}
.seg-btns > button{
  appearance:none; cursor:pointer; border:0; border-radius:0; background:transparent;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; font-weight:500;
  color:var(--ink-dim); padding:5px 0; min-width:30px; line-height:1; text-align:center;
}
.seg-btns > button + button{border-left:1px solid var(--line)}
.seg-btns > button:hover:not(:disabled){color:var(--ink); background:var(--surface)}
.seg-btns > button:active:not(:disabled){background:var(--line)}
.seg-btns > button[aria-pressed="true"]{background:var(--amber); color:var(--amber-ink)}

.loop-edit{display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.loop-times{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  color:var(--amber); font-variant-numeric:tabular-nums; white-space:nowrap;
}

@media (max-width:660px){
  .tl-time{font-size:12px; bottom:6px}
  .seg-btns > button{padding:8px 0; min-width:40px; font-size:12px}
  }


/* ================= player: layout A, practice behind the gear ================= */
.now-head{display:flex; align-items:center; gap:10px; min-width:0}
.now-head .now-title{flex:1 1 auto; min-width:0}

.pill.loop{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-family:"Barlow Condensed",sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; padding:7px 11px;
}
.pill.loop svg{width:13px; height:13px; fill:currentColor; display:block}
.pill.loop:hover:not(:disabled){color:var(--ink); border-color:var(--slate)}
.pill.loop[aria-pressed="true"]{background:var(--amber); color:var(--amber-ink); border-color:var(--amber)}
.pill.loop:disabled{opacity:.35; cursor:default}

.gear{
  appearance:none; cursor:pointer; flex:none;
  display:grid; place-items:center; width:36px; height:36px; padding:0;
  border:1px solid var(--line); border-radius:6px;
  background:var(--surface-2); color:var(--ink-dim);
}
.gear svg{width:17px; height:17px; fill:currentColor; display:block}
.gear:hover:not(:disabled){color:var(--ink); border-color:var(--slate)}
.gear.open{color:var(--amber); border-color:var(--amber); background:var(--surface)}
.gear:disabled{opacity:.35; cursor:default}

.practice{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin-top:9px; padding-top:9px; border-top:1px solid var(--line-soft);
}

@media (max-width:660px){
  .gear{width:42px; height:42px}
  .gear svg{width:19px; height:19px}
  .pill.loop{padding:10px 13px; font-size:14px}
  .practice{gap:11px 14px; margin-top:10px; padding-top:10px}
  .loop-edit{width:100%; gap:11px 14px}
  .segs.speed{margin-left:auto}
}

/* Clear shares the speed row's spare width instead of taking a line of its own. */
@media (max-width:660px){
  .practice > .pbtn-sm.clear{margin-left:auto}
  .segs.speed{margin-left:0}
}