/* Home and the four tools: Pads, Time Calculator, Key Transitions, Songs. Tokens, the shell and
   shared pieces (buttons, chips, panels, tiles, the hero) are in
   lib/theme.css. Mobile first: base rules are for a phone, then wider
   screens add columns. */

.section{margin-top:28px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.section-head.tight{margin-bottom:6px}
.l{font-weight:700}
/* The hero's cropped mark overflows it; clip (not just hide) so focusing a
   button inside can't scroll the card. */
.hero{overflow:clip}
.s{font-size:var(--fs-md);color:var(--ink-3);line-height:1.4}
.q{font-size:.62em;margin-left:1px}
/* iOS zooms into any field under 16px; keep phones from jumping. */
@media(pointer:coarse){.input,.search .input{font-size:16px}}
@media(max-width:860px){.topbar .sub{font-size:var(--fs-base)}}

.opts{display:grid;gap:16px}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.opt-row .s{max-width:34ch}
.opt-row.vol{flex-wrap:nowrap}
input[type=range]{flex:1;min-width:0;max-width:320px;accent-color:var(--ink);height:28px;cursor:pointer}

/* ---------------------------------------------------------------- home
   The front door. One decorated surface (the hero, with the rail, the
   cropped W and the drifting wash), a pad one tap away, then the tools. */
@media(max-width:860px){.tabbar{grid-template-columns:repeat(5,1fr)}}
.home-hero{padding:26px 20px 20px}
.home-grid{display:grid;gap:22px;align-items:center}
.home-kicker{color:var(--orange-text)}
.display.home-title{margin-top:12px;font-size:clamp(40px,11.5vw,72px);line-height:1.02;letter-spacing:-.02em}
.home-lede{margin-top:14px;font-size:var(--fs-lg);line-height:1.6;color:var(--ink-2);max-width:46ch}
@media(prefers-reduced-motion:no-preference){
  .home-hero .glow i{animation:gateDrift 18s ease-in-out infinite alternate}
  .home-hero .glow i:nth-child(2){animation-duration:23s;animation-delay:-6s}
  .home-hero .glow i:nth-child(3){animation-duration:27s;animation-delay:-11s}
}
@media(min-width:900px){
  .home-hero{padding:52px 52px 48px}
  .home-grid{grid-template-columns:1.3fr 1fr;gap:44px}
}

.home-pad{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:14px 14px 14px 18px;
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-md)}
.home-pad-key{display:flex;flex-direction:column;gap:2px;text-decoration:none;min-width:0}
.home-pad-big{font-family:var(--font-display);font-weight:700;font-size:56px;line-height:1;letter-spacing:-.02em}
.home-pad.on .label{color:var(--orange-text)}
.home-pad-steps{display:flex;gap:6px}
.home-pad-steps .icon-btn{width:42px;height:42px;border-radius:var(--r-full)}
.home-pad-go{width:64px;height:64px;flex:none;border-radius:50%;border:none;background:var(--grad);color:#fff;display:grid;place-items:center;
  box-shadow:var(--sh-md);transition:transform var(--dur-fast) var(--ease)}
.home-pad-go svg{width:22px;height:22px}
.home-pad-go:active{transform:scale(.94)}
.home-pad.on .home-pad-go{background:var(--ink);color:var(--surface)}
@media(prefers-reduced-motion:no-preference){.home-pad.on .home-pad-go{animation:padPulse 2.4s ease-out infinite}}
@keyframes padPulse{from{box-shadow:0 0 0 0 rgba(238,65,55,.4)}to{box-shadow:0 0 0 18px rgba(238,65,55,0)}}
@media(min-width:900px){.home-pad{padding:22px 22px 22px 26px}.home-pad-big{font-size:88px}.home-pad-go{width:76px;height:76px}}

.home-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
@media(min-width:900px){.home-tools{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}}
.tool{display:flex;flex-direction:column;gap:4px;padding:16px;min-height:176px;text-decoration:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur-fast)}
.tool:hover{border-color:var(--line-strong);box-shadow:var(--sh-md);transform:translateY(-2px)}
.tool:active{transform:scale(.98)}
.tool-icon{width:40px;height:40px;border-radius:var(--r-md);background:var(--line-soft);display:grid;place-items:center;margin-bottom:8px;color:var(--ink)}
.tool-icon svg{width:20px;height:20px}
.tool-name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);line-height:1.15}
.tool-line{font-size:var(--fs-md);color:var(--ink-2);line-height:1.4}
.tool-peek{margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft);font-size:var(--fs-sm);color:var(--ink-3);line-height:1.4}
.tool-peek b{color:var(--ink)}
.tool-peek b.over{color:var(--err)}
.tool-peek .stars{vertical-align:-1px;margin-left:2px}

.install{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px;margin-top:12px}
.install-icon{width:52px;height:52px;flex:none;border-radius:12px}
.install-text{flex:1;min-width:190px}
.install-text .small{margin-top:3px;color:var(--ink-2);line-height:1.5}
.install-share{display:inline-flex;vertical-align:-3px;color:var(--ink)}
.install-share svg{width:16px;height:16px}
.install-acts{display:flex;gap:6px;margin-left:auto}
.home-foot{max-width:48ch;margin:28px auto 0;text-align:center;font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5}

/* ---------------------------------------------------------------- pads */
.pads-grid{display:grid;gap:14px}
.pads-side{display:grid;gap:14px;align-content:start}
@media(min-width:1000px){.pads-grid{grid-template-columns:1.1fr 1fr;align-items:start;gap:20px}.pads-side{gap:16px}}

.pad-stage{padding:18px 18px 20px;display:flex;flex-direction:column;gap:14px;touch-action:pan-y}
.stage-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pad-stage.on #padStatus{color:var(--orange-text)}
.stage-key{display:flex;align-items:center;justify-content:space-between;gap:10px;user-select:none;-webkit-user-select:none}
.key-read{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:160px}
.key-big{font-family:var(--font-display);font-weight:700;font-size:132px;line-height:.95;letter-spacing:-.02em;transition:transform var(--dur) var(--ease)}
.key-alt{margin-top:8px;font-size:var(--fs-md);font-weight:700;color:var(--ink-3)}
.step-btn{flex:none;width:64px;height:64px;border-radius:var(--r-full);border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast)}
.step-btn svg{width:22px;height:22px}
.step-btn span{font-size:var(--fs-xs);font-weight:800;color:var(--ink-3);line-height:1;margin-top:1px}
.step-btn:hover{border-color:var(--ink-3)}
.step-btn:active{transform:scale(.93)}
.pad-go{width:100%;min-height:56px;font-size:var(--fs-lg)}
.pad-go[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.stage-hint{text-align:center;font-size:var(--fs-sm);color:var(--ink-3)}
/* While a pad plays, the wash behind it breathes. */
.pad-stage .glow i{transition:opacity 1.2s var(--ease)}
.pad-stage.on .glow i{opacity:.22}
html[data-theme=dark] .pad-stage.on .glow i{opacity:.32}
@media(prefers-reduced-motion:no-preference){
  .pad-stage.on .glow i{animation:breathe 7s ease-in-out infinite alternate}
  .pad-stage.on .glow i:nth-child(2){animation-duration:9s;animation-delay:-3s}
  .pad-stage.on .glow i:nth-child(3){animation-duration:11s;animation-delay:-5s}
}
@keyframes breathe{to{transform:translate3d(-24px,12px,0) scale(1.18)}}
@media(min-width:600px){.key-big{font-size:168px}.key-read{min-height:200px}.step-btn{width:72px;height:72px}}
@media(min-width:1000px){.pad-stage{padding:26px 28px 26px;min-height:480px;justify-content:space-between}}

.keygrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
@media(min-width:520px){.keygrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.keybtn{min-height:58px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:all var(--dur-fast);padding:4px}
.keybtn b{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.05}
.keybtn small{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3);line-height:1.1}
.keybtn:hover{border-color:var(--ink-3)}
.keybtn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.keybtn[aria-pressed=true] small{color:var(--surface);opacity:.7}

/* The pad's remote on the other tools. */
.mini{position:fixed;z-index:49;left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));animation:rise var(--dur-slow) var(--ease-panel) backwards}
.mini-in{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;background:var(--ink);color:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.mini-key{display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-decoration:none;font-weight:700;font-size:var(--fs-base);min-height:40px}
.mini-key b{font-family:var(--font-display);font-size:var(--fs-xl);line-height:1}
.mini .icon-btn{background:transparent;border-color:rgba(127,127,127,.45);color:var(--surface);width:42px;height:42px}
.mini .icon-btn.stop{background:var(--surface);color:var(--ink);border-color:var(--surface)}
.mini-wave{display:inline-flex;align-items:center;gap:2px;height:16px}
.mini-wave i{width:3px;height:6px;border-radius:2px;background:var(--grad)}
@media(prefers-reduced-motion:no-preference){
  .mini-wave i{animation:wave 1.4s ease-in-out infinite alternate}
  .mini-wave i:nth-child(2){animation-delay:-.5s}
  .mini-wave i:nth-child(3){animation-delay:-.9s}
}
@keyframes wave{to{height:16px}}
body.has-mini main.main{padding-bottom:calc(160px + env(safe-area-inset-bottom))}
body.has-mini .toasts{bottom:calc(144px + env(safe-area-inset-bottom))}
/* Fingers, not cursors: the small controls grow on touch screens. */
@media(pointer:coarse){
  .fchips .chip{min-height:40px;padding:8px 14px}
  .theme{min-height:34px;padding:6px 12px}
  .song-acts .icon-btn{width:40px;height:40px}
  .song-acts .btn-sm{min-height:40px}
  .srow-more{height:44px}
  .frow{min-height:52px}
}
@media(min-width:861px){
  .mini{left:auto;right:24px;bottom:24px;width:340px}
  body.has-mini main.main{padding-bottom:120px}
  body.has-mini .toasts{bottom:96px}
}

/* ---------------------------------------------------------------- set time */
.set-grid{display:grid;gap:14px}
.set-main{display:grid;gap:14px;align-content:start}
@media(min-width:1000px){
  .set-grid{grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
  .set-sum{grid-column:2;grid-row:1;position:sticky;top:28px}
  .set-main{grid-column:1;grid-row:1}
}
.set-sum{padding:18px 18px 16px;display:grid;gap:14px}
.sum-big{font-family:var(--font-display);font-weight:700;font-size:64px;line-height:1;letter-spacing:-.02em;margin:6px 0 6px;font-variant-numeric:tabular-nums}
.set-sum.over .sum-big,.set-sum.over .label{color:var(--err)}
.sum-note{margin-top:-6px}
.bar{position:relative;display:flex;height:14px;border-radius:var(--r-full);background:var(--line-soft);overflow:hidden}
.bar i{display:block;height:100%;flex:none}
.bar .seg-song{background:var(--ink);box-shadow:inset -2px 0 0 var(--surface)}
.bar .gap{background:transparent}
.bar-over{position:absolute;top:0;bottom:0;right:0;background:repeating-linear-gradient(-45deg,var(--err) 0 4px,transparent 4px 8px);opacity:.75}
.bar-mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--err);margin-left:-1px}
.allot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.stepper{display:flex;align-items:center;gap:6px}
.stepper .icon-btn{width:44px;height:44px;border-radius:var(--r-full)}
.allot-in{width:88px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);padding:8px 6px;font-variant-numeric:tabular-nums}

.srows{display:grid}
.srow{display:grid;grid-template-columns:14px minmax(0,1fr) 46px 66px 32px;align-items:center;gap:6px;padding:10px 10px 10px 12px;border-bottom:1px solid var(--line-soft)}
.srow-n{font-size:var(--fs-sm);font-weight:800;color:var(--ink-3);text-align:center}
.srow .input{padding:10px 10px;font-size:var(--fs-base)}
.srow-len{text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.srow-len.bad{border-color:var(--err);background:var(--err-bg)}
button.srow-len{cursor:pointer;padding:10px 4px}
.srow-len .ph{color:var(--ink-3);font-weight:400}
.srow-key{height:44px;border-radius:var(--r-md);border:1.5px dashed var(--line-strong);background:transparent;color:var(--ink-3);font-size:var(--fs-sm);font-weight:700;transition:all var(--dur-fast)}
.srow-key.has{border-style:solid;border-color:var(--line);background:var(--surface-2);color:var(--ink);font-family:var(--font-display);font-size:var(--fs-xl)}
.srow-key:hover{border-color:var(--ink-3)}
.srow-more{width:32px;height:40px;border-color:transparent}
@media(pointer:coarse){.srow .input{font-size:16px}}
@media(min-width:600px){.srow{grid-template-columns:22px minmax(0,1fr) 60px 84px 40px;gap:10px;padding:10px 16px}}
.bridge{display:flex;align-items:center;gap:8px;margin:0 12px;padding:6px 10px 6px 20px;font-size:var(--fs-sm);color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.bridge>svg{width:14px;height:14px;margin-left:auto;color:var(--ink-3)}
.bridge:hover{color:var(--ink)}
.bridge>span:first-child{font-weight:700;color:var(--ink)}
.bridge-l{color:var(--ink-3)}
.srows-foot{padding:12px}
.add-song{width:100%;border-style:dashed}
.set-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------------------------------------------------------------- key transitions
   Stars say how musically pleasing a move is; they're ink, like anything
   chosen or rated, never the gradient. */
.stars{display:inline-flex;align-items:center;gap:2px;flex:none}
.stars svg{width:15px;height:15px;fill:var(--line);stroke:none}
.stars svg.on{fill:var(--ink)}
.stars.small svg{width:12px;height:12px}
.stars.big svg{width:26px;height:26px}
.fc-rate{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.fc-rate-l{font-weight:800;font-size:var(--fs-lg)}
.levels{display:flex;width:100%;max-width:440px;margin-bottom:12px}
.levels button{flex:1;min-height:38px}
.flow-solo{max-width:720px}
.flow-solo .more-ways{display:inline-flex;align-items:center;gap:6px;margin-top:14px}
.flow-solo .more-ways svg{width:14px;height:14px}
.fc-interval{margin-top:10px;font-weight:700;color:var(--ink-2)}
.pad-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.pad-picks.one{grid-template-columns:minmax(0,1fr);max-width:260px}
.pad-pick{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px 8px 8px;border-radius:var(--r-lg);
  border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);text-align:left;transition:all var(--dur-fast)}
.pad-pick:hover{border-color:var(--ink-3)}
.pad-pick-ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--line-soft)}
.pad-pick-ic svg{width:14px;height:14px}
.pad-pick-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.pad-pick-t b{font-size:var(--fs-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pad-pick-t small{font-size:var(--fs-xs);color:var(--ink-3);font-weight:600}
.pad-pick[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.pad-pick[aria-pressed=true] .pad-pick-ic{background:rgba(127,127,127,.3)}
.pad-pick[aria-pressed=true] small{color:var(--surface);opacity:.7}
.more-ways{margin-top:8px}
.why-link{display:inline-flex;align-items:center;gap:5px;margin-left:4px;padding:2px 0;border:none;background:none;
  font:inherit;font-weight:700;color:var(--orange-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.why-link svg{width:15px;height:15px}
.why{display:grid;gap:16px;padding-bottom:6px}
.why-item p{margin-top:4px;font-size:var(--fs-lg);line-height:1.55;color:var(--ink-2)}
.why-stars{list-style:none;display:grid;gap:10px;margin-top:8px}
.why-stars li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px}
.why-stars li span{font-weight:700}
.why-stars li small{grid-column:2;font-size:var(--fs-md);color:var(--ink-3)}
.nudges{display:grid;gap:8px}
@media(min-width:600px){.nudges{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nudge{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;padding:12px 14px;text-align:left;
  transition:border-color var(--dur-fast),box-shadow var(--dur)}
.nudge:hover{border-color:var(--line-strong);box-shadow:var(--sh-md)}
.nudge-keys{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);line-height:1}
.nudge-keys svg{width:14px;height:14px;color:var(--ink-3)}
.nudge .stars{justify-self:end}
.nudge-how{grid-column:1/-1;font-size:var(--fs-sm);color:var(--ink-3)}
.bridge:has(+ .bridge-fix){border-bottom:none}
.bridge-fix{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 12px;padding:2px 10px 10px 20px;font-size:var(--fs-sm);color:var(--ink-3);border-bottom:1px solid var(--line-soft)}
.bridge-fix .chip{min-height:30px;padding:4px 10px;font-size:var(--fs-sm)}
.paths.one{grid-template-columns:minmax(0,1fr)}
.flow-grid.simple .flow-side h2{margin-bottom:4px}
.kgroup{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.kgroup:last-child{border-bottom:none;padding-bottom:0}
.kgroup-head{display:flex;align-items:center;gap:8px;font-size:var(--fs-md);font-weight:700;color:var(--ink-2);margin-bottom:8px}
.kchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
.keybtn.kchip{min-height:48px}
.keybtn.kchip b{font-size:20px}
.keybtn.kchip[aria-pressed=true] .stars svg{fill:var(--surface)}

.picker{display:flex;align-items:stretch;gap:10px;padding:10px;margin-bottom:14px}
.pick{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border-radius:var(--r-md);border:1.5px solid var(--line);
  background:var(--surface-2);text-align:left;transition:border-color var(--dur-fast)}
.pick:hover{border-color:var(--ink-3)}
.pick-key{font-family:var(--font-display);font-weight:700;font-size:var(--fs-3xl);line-height:1.05}
.picker .swap{align-self:center;border-radius:var(--r-full);width:42px;height:42px}

.flow-grid{display:grid;gap:14px}
.flow-main,.flow-side{min-width:0}
@media(min-width:1000px){.flow-grid{grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}.flow-side{position:sticky;top:28px}}
.flow-card{padding:20px 18px}
.fc-keys{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-weight:700;font-size:56px;line-height:1}
.fc-keys svg{width:30px;height:30px;color:var(--ink-3)}
.fc-feel{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:14px}
.feel{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border-radius:var(--r-full);background:var(--ink);color:var(--surface);font-weight:800;font-size:var(--fs-base)}
.feel .energy{background:rgba(127,127,127,.3);color:var(--surface)}
.fc-move{font-weight:700;color:var(--ink-2);font-size:var(--fs-base)}
.fc-say{margin-top:12px;font-size:var(--fs-lg);line-height:1.6;color:var(--ink-2);max-width:60ch}
.fc-shared{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:var(--fs-md);color:var(--ink-2);line-height:1.45}
.fc-shared b{color:var(--ink)}
.fc-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.fc-note{margin-top:10px;font-size:var(--fs-md);color:var(--ink-3);line-height:1.5;max-width:60ch}
@media(min-width:600px){.flow-card{padding:26px 28px}.fc-keys{font-size:72px}}

.energy{flex:none;width:28px;height:28px;border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;background:var(--line-soft);color:var(--ink-2)}
.energy svg{width:15px;height:15px}
.dots{flex:none;display:inline-flex;gap:3px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--ink)}

.paths{display:grid;gap:10px}
@media(min-width:700px){.paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
.path{padding:16px;display:flex;flex-direction:column;gap:10px}
.path-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.path-head .h3{margin-top:2px}
.path-how{font-size:var(--fs-base);color:var(--ink-2);line-height:1.55}
.path .tiles{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto}
.path .tile.small{min-width:52px}
.path .tile .big{font-size:22px}
.path .tile.to{border-color:var(--ink-3)}
.path .arrow svg{width:14px;height:14px;color:var(--ink-3)}
.path>.btn{align-self:flex-start}

.circle{width:100%;max-width:300px;margin:6px auto 14px}
.circle .ring{fill:none;stroke:var(--line-soft);stroke-width:1}
.cnode{cursor:pointer;outline:none}
.cnode circle{fill:var(--ink);stroke:var(--line);stroke-width:1;transition:stroke var(--dur-fast)}
.cnode text{fill:var(--ink);font-family:var(--font);font-weight:700;font-size:13px;text-anchor:middle;pointer-events:none}
.cnode.min text{font-size:10.5px;fill:var(--ink-2)}
.cnode:hover circle,.cnode:focus-visible circle{stroke:var(--ink-3)}
.cnode.is-from circle{stroke:var(--ink)}
.cnode.is-from text{fill:var(--surface)}
.cnode.is-to circle{stroke:var(--orange);stroke-width:2.5}
.targets{display:flex;margin-bottom:8px}
.targets button{flex:1}
.flow-list{display:grid;gap:4px}
.frow{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:none;
  padding:8px 10px;border-radius:var(--r-md);transition:background var(--dur-fast);min-height:48px}
.frow:hover{background:var(--line-soft)}
.frow-key{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);line-height:1}
.frow-mid{display:flex;flex-direction:column;min-width:0}
.frow-feel{font-weight:700;font-size:var(--fs-base)}
.frow-move{font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow.sel{background:var(--ink);color:var(--surface)}
.frow.sel .frow-move{color:var(--surface);opacity:.7}
.frow.sel .dots i{background:rgba(127,127,127,.4)}
.frow.sel .dots i.on{background:var(--surface)}
.frow.sel .stars svg{fill:rgba(127,127,127,.45)}
.frow.sel .stars svg.on{fill:var(--surface)}

/* ---------------------------------------------------------------- songs */
.songs-tools{display:grid;gap:10px;margin-bottom:14px}
.fchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:2px 14px;-webkit-overflow-scrolling:touch}
.fchips::-webkit-scrollbar{display:none}
.fchips .chip{flex:none}
.chip svg{width:12px;height:12px;opacity:.7}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chip .n{font-weight:600;opacity:.6;margin-left:2px}
@media(min-width:861px){.fchips{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;margin-bottom:10px;font-size:var(--fs-md);font-weight:700;color:var(--ink-2)}
.song-list{display:grid;gap:10px}
@media(min-width:700px){.song-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1300px){.song-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.song{padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.song-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.song-id{min-width:0}
.song-t{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);line-height:1.2}
.song-a{font-size:var(--fs-md);color:var(--ink-2);font-weight:600;margin-top:2px}
.keybadge{flex:none;display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:var(--r-md);background:var(--line-soft);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl)}
.song-facts{font-size:var(--fs-md);font-weight:700;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 6px}
.song-facts i{font-style:normal;color:var(--ink-3)}
.song-themes{display:flex;flex-wrap:wrap;gap:5px}
.theme{border:none;background:var(--line-soft);color:var(--ink-2);font-size:var(--fs-sm);font-weight:700;padding:4px 10px;border-radius:var(--r-full);min-height:28px;transition:all var(--dur-fast)}
.theme:hover{color:var(--ink)}
.theme.on{background:var(--ink);color:var(--surface)}
.song-flow{display:flex;align-items:center;gap:8px;font-size:var(--fs-md);color:var(--ink-2);text-decoration:none}
.song-flow{flex-wrap:wrap;gap:6px}
.song-flow b{color:var(--ink)}
.song-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:4px}
.song-acts{display:flex;gap:6px;flex:none}
.song-acts .icon-btn{width:34px;height:34px;border-radius:var(--r-full)}
.more{display:flex;justify-content:center;margin-top:16px}
.empty-actions{margin-top:16px;display:flex;justify-content:center}

/* Song Finder, until it's released. */
.soon{padding:28px 22px 26px;max-width:760px}
.soon-kicker{color:var(--orange-text)}
.display.soon-title{margin-top:10px;font-size:clamp(40px,10vw,64px)}
.soon-lede{margin-top:12px;font-size:var(--fs-lg);line-height:1.6;color:var(--ink-2);max-width:52ch}
.soon-list{list-style:none;display:grid;gap:12px;margin-top:22px}
.soon-list li{display:flex;align-items:center;gap:12px;font-weight:700;font-size:var(--fs-base)}
.soon-ic{flex:none;width:38px;height:38px;border-radius:var(--r-md);background:var(--line-soft);display:grid;place-items:center}
.soon-ic svg{width:18px;height:18px}
.soon-note{margin-top:22px;font-size:var(--fs-md);color:var(--ink-3)}
@media(min-width:900px){.soon{padding:44px 48px 40px}}

/* ---------------------------------------------------------------- sheets
   A bottom sheet on phones, a dialog on wider screens. */
dialog.sheet{border:none;padding:0;background:var(--surface);color:var(--ink);box-shadow:var(--sh-lg);
  width:100%;max-width:100%;margin:auto 0 0;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:88vh;overflow:hidden}
dialog.sheet[open]{display:flex;animation:sheetUp var(--dur-slow) var(--ease-panel)}
dialog.sheet::backdrop{background:rgba(26,22,18,.45)}
html[data-theme=dark] dialog.sheet::backdrop{background:rgba(0,0,0,.62)}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.4}}
.sheet-body{display:flex;flex-direction:column;width:100%;max-height:88vh;padding:8px 18px calc(16px + env(safe-area-inset-bottom))}
.sheet-grip{width:38px;height:4px;border-radius:var(--r-full);background:var(--line);margin:0 auto 10px}
.sheet-body .modal-head{margin-bottom:12px}
.sheet-content{overflow-y:auto;min-height:0;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.sheet-content .keygrid{margin-top:0}
.sheet-seg{display:flex;margin-bottom:12px}
.sheet-seg button{flex:1}
.sheet-p{margin-bottom:10px}
.sheet-find{display:block;margin-bottom:12px}
.sheet-none{width:100%;margin-top:10px}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--line-soft);margin-top:12px}
.sheet-foot .btn-primary{flex:1;max-width:260px}
.sheet .chips{gap:8px}
.sheet .chip{min-height:40px;padding:8px 14px;font-size:var(--fs-base)}
@media(min-width:861px){
  dialog.sheet{width:min(480px,calc(100vw - 28px));margin:auto;border-radius:var(--r-xl);border:1px solid var(--line)}
  .sheet-grip{display:none}
  .sheet-body{padding:20px 22px 20px}
}
/* A song's length on a phone: two wheels that snap to rows (the row in the
   band is the value), or two fields. */
.len-read{text-align:center;font-family:var(--font-display);font-weight:700;font-size:44px;line-height:1.1;font-variant-numeric:tabular-nums;margin:2px 0 6px}
.wheels{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;height:220px;margin-bottom:4px;user-select:none;-webkit-user-select:none}
.wheel-band{position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px;border-radius:var(--r-md);background:var(--line-soft);pointer-events:none}
.wheel-col{position:relative;display:flex;align-items:center;gap:6px}
.wheel{position:relative;width:72px;height:220px;padding:88px 0;overflow-y:scroll;scroll-snap-type:y mandatory;overscroll-behavior:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none;border-radius:var(--r-md);
  -webkit-mask-image:linear-gradient(transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(transparent,#000 32%,#000 68%,transparent)}
.wheel::-webkit-scrollbar{display:none}
.wheel:focus-visible{box-shadow:var(--focus)}
.wheel-item{height:44px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--ink-3);font-variant-numeric:tabular-nums;transition:color var(--dur-fast)}
.wheel-item[aria-selected=true]{color:var(--ink)}
.wheel-unit{width:30px;font-size:var(--fs-md);font-weight:700;color:var(--ink-3)}
.len-type{display:flex;align-items:center;justify-content:center;gap:18px;padding:18px 0 26px}
.len-field{display:flex;align-items:center;gap:8px;font-size:var(--fs-md);font-weight:700;color:var(--ink-3)}
.len-field .input{width:84px;text-align:center;font-family:var(--font-display);font-size:30px;font-weight:700;padding:8px 6px;font-variant-numeric:tabular-nums}

.menu{display:grid;gap:2px}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 12px;border:none;background:none;border-radius:var(--r-md);
  font-size:var(--fs-lg);font-weight:700;color:var(--ink);text-align:left}
.menu-item svg{width:19px;height:19px;color:var(--ink-3)}
.menu-item:hover{background:var(--line-soft)}
.menu-item.danger,.menu-item.danger svg{color:var(--err)}