/* self-hosted fonts (latin subset, variable) — no cross-origin handshake */
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:200 700; font-display:swap;
  src:url('/fonts/oswald.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Source Sans 3'; font-style:normal; font-weight:200 900; font-display:swap;
  src:url('/fonts/source-sans-3.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Source Sans 3'; font-style:italic; font-weight:200 900; font-display:swap;
  src:url('/fonts/source-sans-3-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{
    --display:'Oswald', system-ui, sans-serif;
    --body:'Source Sans 3','Source Sans Pro', system-ui, sans-serif;
    --lyric-scale:1;
    --content: min(90rem, 100% - 2rem);
    --gutter: 1.37rem;   /* label-to-lyric gutter (desktop/tablet); ~35% tighter */
    --lyric-px: 20px;
    --bar-h: 4.4rem;
  }
  /* smaller lyric/chord text: tablets split the difference (18px), phones go to 17px */
  @media (max-width:1024px){ :root{ --lyric-px: 18px; } }
  @media (max-width:700px){  :root{ --lyric-px: 17px; } }
  /* tablet + mobile: trim the fixed bottom bar to roughly match the top bar */
  @media (max-width:1024px){ :root{ --bar-h: 3.6rem; } }
  /* ── THEMES ──────────────────────────────────────────────────── */
  :root[data-theme="dark"]{
    --bg:#1A1D1C; --bg-elev:#242827;
    --text:#E7E8EA; --muted:#9A9DA3; --faint:#5F6268;
    --accent:#FEA858; --accent-2:#E8913F; --accent-ink:#1A1D1C;
    --chord:#FEA858;
    --danger:#FF6B6B;
    --line:rgba(231,232,234,.13); --line-soft:rgba(231,232,234,.07);
    --bar-bg:rgba(26,29,28,.86);
    --bar-shadow:rgba(0,0,0,.2);
    --cd-white:#E9EAEE; --cd-black:#34363C; --cd-edge:#0d0e10;   /* piano keys (a keyboard reads the same in either theme) */
  }
  :root[data-theme="light"]{
    --bg:#F5F5F5; --bg-elev:#FFFFFF;
    --text:#252525; --muted:#6A6E76; --faint:#A6AAB2;
    --accent:#FEA858; --accent-2:#E8913F; --accent-ink:#1A1D1C;
    --chord:#A85A0A;
    --danger:#D92D20;
    --line:rgba(37,37,37,.14); --line-soft:rgba(37,37,37,.07);
    --bar-bg:rgba(245,245,245,.88);
    --bar-shadow:rgba(0,0,0,.035);
    --cd-white:#FBFBFC; --cd-black:#2B2D33; --cd-edge:#C2C4C9;   /* piano keys */
  }

  *{box-sizing:border-box; margin:0; padding:0}
  html{-webkit-text-size-adjust:100%}
  /* iOS: stop rapid taps (e.g. the +/− text-size steppers) from firing double-tap-to-zoom.
     'manipulation' keeps single tap + pinch-zoom; drag handles (.sl-grip / .fgrip) keep their
     own touch-action:none via higher specificity. */
  button{ touch-action:manipulation }
  body{
    font-family:var(--body); background:var(--bg); color:var(--text);
    min-height:100vh; line-height:1.55;
    padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
    -webkit-font-smoothing:antialiased;
    transition:background .35s ease, color .35s ease;
  }
  .wrap{position:relative; z-index:1; width:95%; margin:0 auto; overflow-x:clip}

  /* return-to-setlist link — only shown when arriving from a setlist page */
  #chart-back{ padding:2rem 0; text-align:left }
  /* prevent display:flex below from overriding the hidden attribute */
  #chart-back[hidden]{ display:none !important }
  @media (min-width:768px){
    /* left:2.5% matches the .wrap left margin (width:95%; margin:0 auto → (100-95)/2 = 2.5%)
       bottom mirrors the fbar's base position; height matches the fbar pill height */
    #chart-back{
      position:fixed; left:2.5%; padding:0;
      bottom: .75rem;
      height: 3.5rem; display:flex; align-items:center; z-index:50;
    }
  }
  @media (min-width:768px) and (min-height:600px){
    /* fbar floats higher on desktop/tablet — keep the link level with it */
    #chart-back{ bottom: calc(env(safe-area-inset-bottom) + 1.2rem); }
  }
  /* long chart: page scrolls → put the link in-flow below the lyrics */
  @media (min-width:768px){
    #chart-back.chart-back--flow{ position:static; height:auto; padding:2rem 0; }
  }
  .chart-back-link{
    color:var(--muted); font-family:var(--display); font-weight:600; font-size:.78rem;
    text-decoration:none; text-transform:uppercase; letter-spacing:.06em;
    transition:color .15s ease }
  .chart-back-link:hover{ color:var(--accent) }
  .chart-back-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

  /* ── masthead (setup controls) ──────────────────────────────── */
  /* full-width nav, identical on every page */
  header.top{
    display:flex; align-items:center; justify-content:space-between;
    gap:.5rem; padding:.7rem 1rem; flex-wrap:wrap; width:100%; box-sizing:border-box;
    position:sticky; top:0; z-index:30;
    background:var(--bar-bg); backdrop-filter:blur(16px) saturate(1.2);
    box-shadow:0 .6rem 1.6rem 0 var(--bar-shadow); transition:transform .2s ease, box-shadow .2s ease;
  }
  body.nav-hidden header.top{ transform:translateY(-100%); box-shadow:none }
  body.nav-hidden .bar{ transform:translateY(100%); box-shadow:none }
  /* left nav: hamburger + record (home) + dropdown menu */
  .nav-left{position:relative; display:flex; align-items:center; gap:.4rem}
  .iconbtn{
    width:2.3rem; height:2.3rem; flex:0 0 auto; border-radius:.5rem;
    border:1px solid var(--line); background:var(--bg-elev); color:var(--text);
    display:grid; place-items:center; cursor:pointer; text-decoration:none;
    transition:border-color .18s ease, color .18s ease, transform .1s ease;
  }
  .iconbtn:hover{border-color:var(--accent); color:var(--accent)}
  .iconbtn:active{transform:scale(.94)}
  .iconbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .iconbtn svg{width:1.2rem; height:1.2rem}
  .menu{
    position:absolute; top:calc(100% + .5rem); left:0; z-index:40; min-width:11rem;
    background:var(--bg-elev); border:1px solid var(--line); border-radius:.6rem;
    padding:.4rem; display:flex; flex-direction:column;
    box-shadow:0 1.2rem 2.4rem -1rem rgba(0,0,0,.45);
  }
  .menu[hidden]{display:none}
  .menu a{
    font-family:var(--display); font-weight:500; font-size:1.05rem; letter-spacing:.01em;
    color:var(--text); text-decoration:none; padding:.6rem .7rem; border-radius:.4rem;
    transition:background .14s ease, color .14s ease;
  }
  .menu a:hover{background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent)}
  .menu a[aria-current="page"]{color:var(--accent); font-weight:700}
  .menu-btn-item{
    text-align:left; cursor:pointer; background:none; border:0;
    font-family:var(--display); font-weight:500; font-size:.95rem; letter-spacing:.01em;
    color:var(--text); padding:.6rem .7rem; border-radius:.4rem;
    transition:background .14s ease, color .14s ease;
  }
  .menu-btn-item:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent) }
  /* theme toggle inside the menu — only on mobile (desktop uses the toolbar icon) */
  .menu-theme{
    display:none; text-align:left; cursor:pointer; background:none; border:0;
    padding:.45rem .7rem;
    font-family:var(--display); font-weight:500; font-size:.84rem; color:var(--muted);
  }
  .menu-theme:hover{ color:var(--accent) }
  @media (max-width:680px){
    .menu-theme{ display:block }
    #toggle-theme{ display:none }      /* moved into the hamburger menu */
  }
  .tools{display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; justify-content:flex-end}
  .tbtn{
    height:2.3rem; min-width:2.3rem; padding:0 .55rem; border-radius:.5rem;
    border:1px solid var(--line); background:var(--bg-elev); color:var(--text);
    font-family:var(--display); font-weight:500; font-size:.9rem; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
    transition:border-color .18s ease, color .18s ease, background .18s ease, transform .1s ease;
  }
  .tbtn:hover{border-color:var(--accent); color:var(--accent)}
  .tbtn.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
  #toggle-chords .ic-off{display:none}
  #toggle-chords.off{color:var(--faint)}
  #toggle-chords.off .ic-on{display:none}
  #toggle-chords.off .ic-off{display:block}
  .tbtn:active{transform:scale(.95)}
  .tbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .tbtn svg{width:1.05rem; height:1.05rem}
  /* reset button: two A's, a small one snugged up to a larger one */
  .tbtn--sz b{display:inline-flex; align-items:baseline; gap:.05em; font-weight:700; line-height:1}
  .tbtn--sz .fa-sm{font-size:.72rem}
  .tbtn--sz .fa-lg{font-size:1.12rem}
  .tbtn--pm{min-width:1.75rem; padding:0 .3rem; font-size:1.05rem}   /* bare +/− need less room than "A−" */
  /* tap targets: kill double-tap-to-zoom from rapid +/− (and other) taps; pinch-zoom still works */
  .tbtn, .iconbtn, .capo-btn, .capo-auto, .tuning-btn, .tuning-opt, .key, .seg-b,
  .deck-tbtn, .deck-dot, .deck-exit, .deck-leave{ touch-action:manipulation; }
  /* chart top bar: transparent fills (match the bottom bar buttons); .on stays accent */
  header.top .iconbtn{ background:transparent }
  header.top .tbtn:not(.on){ background:transparent }
  .fontgrp{display:flex; height:2.3rem; border:1px solid var(--line); border-radius:.5rem; overflow:hidden; background:transparent}
  .fontgrp .tbtn{height:100%; border:0; border-radius:0; background:transparent}
  .fontgrp .tbtn + .tbtn{border-left:1px solid var(--line)}
  /* keep the chart top bar on a single row at smaller widths */
  @media (max-width:680px){
    header.top{ gap:.4rem; padding:.6rem .75rem }
    .iconbtn{ width:2.3rem; height:2.3rem }
    .tbtn{ height:2.3rem; min-width:2.3rem; padding:0 .5rem }
    .tbtn--pm{ min-width:1.8rem; padding:0 .34rem }   /* bare +/− stay narrower than "A" */
    .tbtn svg, .iconbtn svg{ width:1.12rem; height:1.12rem }
    .tools{ gap:.4rem }
    .nav-left{ gap:.4rem }
    #toggle-cols{ display:none }            /* columns are pointless on a phone-width chart */
    #song-search{ width:calc(100vw - 1.5rem) }   /* match the top bar content width (.75rem padding each side); #id beats the .song-search base */
  }
  @media (max-width:410px){
    header.top{ gap:.3rem; padding:.55rem .55rem }
    .iconbtn{ width:2.3rem; height:2.3rem }
    .tbtn{ height:2.3rem; min-width:2.2rem; padding:0 .34rem }
    .tbtn--pm{ min-width:1.65rem; padding:0 .28rem }   /* bare +/− stay narrower than "A" */
    .tbtn--sz{ min-width:2.3rem }                      /* the reset "Aa" never narrower than the hamburger */
    .tools{ gap:.3rem }
    .nav-left{ gap:.3rem }
    #song-search{ width:calc(100vw - 1.1rem) }   /* match the tighter .55rem padding here */
  }
  .picker-wrap{position:relative}
  select#song-picker{
    appearance:none; font-family:var(--display); font-weight:500; font-size:.86rem;
    letter-spacing:.02em; color:var(--text); background:var(--bg-elev);
    border:1px solid var(--line); border-radius:.5rem; padding:.5rem 1.9rem .5rem .8rem;
    height:2.3rem; cursor:pointer; transition:border-color .18s ease;
  }
  select#song-picker:hover{border-color:var(--accent)}
  select#song-picker:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .picker-wrap::after{content:"▾"; position:absolute; right:.7rem; top:50%;
    transform:translateY(-50%); color:var(--muted); pointer-events:none; font-size:.66rem}

  /* ── song head: title left, artist + meta right, one row ─────── */
  .song-head{
    padding:calc(.4rem + 5px) 0 .8rem; border-bottom:1px solid var(--line);
    display:flex; align-items:flex-end; justify-content:space-between; gap:1rem 1.5rem;
    flex-wrap:wrap;
  }
  .song-title{
    font-family:var(--display); font-weight:600; font-size:clamp(2rem,5vw,3.3rem);
    line-height:1; letter-spacing:-.005em;
  }
  .song-info{display:flex; flex-direction:column; align-items:flex-end; gap:.45rem; text-align:right}
  .song-artist{font-style:italic; font-size:1.02rem; color:var(--muted)}
  .meta{
    display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.4rem;
    font-family:var(--display); font-weight:500; font-size:.72rem;
    letter-spacing:.12em; text-transform:uppercase;
  }
  /* the editor preview still uses bare meta spans; the chart page uses deck chips (below) */
  .meta > span:not([class*="deck-"]){padding:.26rem .55rem; border:1px solid var(--line); border-radius:.35rem; color:var(--muted)}
  .meta > span:not([class*="deck-"]):first-child{color:var(--text); border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
  /* chart-page key chip: accent like the perform key chip, but keeps the "WRITTEN IN" label uppercase */
  .deck-chip--keylabel{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)) }
  /* chosen key matches a reference recording → full accent border; matches a singer → filled */
  .deck-chip--keylabel.is-refkey{ border-color:var(--accent) }
  .deck-chip--keylabel.is-singerkey{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
  .keyname{ text-transform:none }  /* keep key letters proper-cased (Eb, not EB) inside upper-cased labels */

  /* ── chart: left gutter + lyric body ────────────────────────── */
  #chart{padding:1.5rem 0 4rem}
  /* two-column toggle (matches the old site's CSS multi-column) */
  #chart.cols{ columns:21rem 2; column-gap:1rem; }
  #chart.cols .sec{ break-inside:avoid; }

  /* ── reference recordings: revealed by scrolling below the chart ─── */
  /* reference info on the left, the streaming links on the right; all controls
     share one height (--ref-h) so the dropdown and links read as one set */
  .refs{ --ref-h:2.4rem; --ref-gap:.5rem; width:95%; margin:0 auto; padding:2.2rem 0 1.4rem; border-top:1px solid var(--line) }
  .refs-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem 1.5rem }
  .refs-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:.7rem 1rem }
  /* dropdown + "Play in <key>" share the same gap as the music buttons */
  .refs-pickrow{ display:flex; align-items:center; gap:var(--ref-gap) }
  .refs-eyebrow{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted) }
  .ref-pick{ position:relative; display:inline-flex }
  .ref-pick::after{ content:"▾"; position:absolute; right:.62rem; top:50%; transform:translateY(-50%);
    pointer-events:none; color:var(--muted); font-size:.7rem }
  .ref-select{ height:var(--ref-h); font-family:var(--display); font-weight:500; font-size:.88rem; color:var(--text);
    background:var(--bg-elev); border:1px solid var(--line); border-radius:.5rem;
    padding:0 1.9rem 0 .75rem; appearance:none; -webkit-appearance:none; cursor:pointer }
  .ref-select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
  .ref-key{ height:var(--ref-h); display:inline-flex; align-items:center; gap:.32em;
    font-family:var(--display); font-weight:600; font-size:.78rem; letter-spacing:.05em;
    text-transform:uppercase; color:var(--accent); cursor:pointer;
    background:color-mix(in srgb, var(--accent) 13%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    border-radius:.5rem; padding:0 .8rem; transition:background .15s ease, transform .1s ease }
  .ref-key:hover{ background:color-mix(in srgb, var(--accent) 22%, transparent) }
  .ref-key:active{ transform:scale(.97) }
  .ref-key:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
  .ref-links{ display:flex; gap:var(--ref-gap); flex-wrap:wrap }
  .ref-link{ height:var(--ref-h); display:inline-flex; align-items:center; justify-content:center; gap:.42rem;
    font-family:var(--body); font-size:.88rem; color:var(--muted); text-decoration:none; background:var(--bg-elev);
    border:1px solid var(--line); border-radius:.5rem; padding:0 .8rem;
    transition:color .15s ease, border-color .15s ease, transform .1s ease }
  .ref-link svg{ width:1.05rem; height:1.05rem; flex:0 0 auto }
  .ref-link:hover{ color:var(--text); border-color:var(--accent) }
  .ref-link:active{ transform:scale(.97) }
  .ref-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
  .ref-link--spotify:hover{ color:#1DB954; border-color:#1DB954 }
  .ref-link--apple:hover{ color:#FA2D48; border-color:#FA2D48 }
  .ref-link--youtube:hover{ color:#FF3D3D; border-color:#FF3D3D }
  /* mobile: stack into two rows — reference info on top, links on a single row below */
  @media (max-width:560px){
    .refs{ --ref-gap:.4rem; padding-top:1.8rem }
    .refs-inner{ flex-direction:column; align-items:stretch; gap:1.1rem }   /* a touch more between the two rows */
    .refs-meta{ flex-wrap:nowrap }
    .refs-pickrow{ flex:1; min-width:0 }                                    /* dropdown grows to fill the row */
    .ref-pick{ flex:1; min-width:0 }
    .ref-select{ width:100% }
    .ref-links{ width:100%; flex-wrap:nowrap }
    .ref-link{ flex:1 1 0; min-width:0; padding:0 .4rem; font-size:.82rem }
    .ref-link span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  }

  .sec{
    display:grid; grid-template-columns:var(--gutter) minmax(0,1fr);
    column-gap:.76rem; margin-bottom:1.3rem;   /* label↔lyric gap (desktop/tablet); ~5px more than the tightened value */
  }
  .sec-label{
    grid-column:1; position:sticky; top:.6rem; align-self:start;
    padding-top:1.9em;                         /* drops label to the first lyric row */
    font-family:var(--display); font-weight:600; font-size:.72rem;
    letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
    white-space:nowrap;
  }
  .sec--chords .sec-label{ padding-top:.05em; }
  .sec-body{
    grid-column:2; min-width:0;
    font-family:var(--body); font-size:calc(var(--lyric-px) * var(--lyric-scale));
    line-height:1.45; letter-spacing:-.005em; color:var(--text);
  }

  /* Chord-over-lyric — exact technique from the old site:
     the chord is a ZERO-WIDTH inline marker; its name floats above via .cn,
     so lyrics wrap as plain text and a chord with no word never drops down. */
  .line{ display:block; }
  .chord{
    position:relative; display:inline-block; width:0; white-space:nowrap;
    vertical-align:text-bottom; height:1.1em; margin-bottom:1.1em; top:2em;
    -webkit-user-select:none; user-select:none;
  }
  .cn{
    position:absolute; top:-2.25em; left:0; line-height:1; white-space:nowrap;
    font-family:var(--body); font-weight:600; font-size:.85em; letter-spacing:-.02em;
    color:var(--chord); cursor:pointer;
    transition:transform .24s cubic-bezier(.2,.8,.25,1), opacity .24s ease;
  }
  .cn.swap{ transform:translateY(-.3em); opacity:0; }
  /* tappable: chords open a fingering diagram */
  .cn:hover, .cn--inline:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
  .cn:focus-visible, .cn--inline:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:.2rem; }

  /* chord-only line (intro / turnaround) — same chord size, just spaced inline.
     Single-spaced when stacked: tight line-height, minimal row gap. */
  .line--chords{ margin:0; line-height:1.15; }
  .line--chords + .line--chords{ margin-top:.06em; }
  .sec-body > .line--chords:last-child{ margin-bottom:.35em; }

  /* tablet + mobile: tighten the vertical rhythm a small bit (room is tight) —
     trim the chord-row reservation + line-height without crowding the chord names */
  @media (max-width:1024px){
    .sec-body{ line-height:1.41; }
    .chord{ margin-bottom:1em; }
    .cn{ top:-2.45em; }        /* keep chords centered in the (slightly looser) row */
  }
  .cn--inline{
    position:static; display:inline-block; margin-right:1.1em;
    font-family:var(--body); font-weight:600; font-size:.85em; letter-spacing:-.02em;
    color:var(--chord); cursor:pointer;
    transition:transform .24s cubic-bezier(.2,.8,.25,1), opacity .24s ease;
  }
  /* invisible spacer ([-]) — blank inline width, in the inline-chord scale */
  .cn-sp{ display:inline-block; font-size:.85em }
  /* auto stretch-dash: fills a mid-word overlap gap so it reads as one word.
     No overflow:hidden — that quirk re-bases the inline-block and lifts the dash;
     the box stays the exact gap width, the dash just centers (and may spill a
     hair on very small gaps, which is fine). */
  .wordgap{ display:inline-block; text-align:center; white-space:nowrap }   /* inherits the lyric color (→ black in print) */

  /* hide-chords → clean lyric sheet (chord markers + their leading collapse) */
  body.hide-chords .chord{ display:none; }
  body.hide-chords .line--chords{ display:none; }
  body.hide-chords .sec--chords{ display:none; }
  body.hide-chords .sec-label{ padding-top:.05em; }

  footer.foot{
    font-family:var(--display); font-weight:400; font-size:.68rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
    padding:.4rem 0 1.6rem;
  }

  /* ── floating key strip (live transpose) ────────────────────── */
  .bar{
    position:fixed; left:0; right:0; bottom:0; z-index:20;
    height:calc(var(--bar-h) + env(safe-area-inset-bottom));
    /* reserve the FULL home-indicator inset as bottom padding so the buttons centre
       within exactly --bar-h (matching the top bar) instead of being pushed down */
    padding-bottom:env(safe-area-inset-bottom);
    background:var(--bar-bg); backdrop-filter:blur(16px) saturate(1.2);
    box-shadow:0 -.6rem 1.6rem 0 var(--bar-shadow); display:flex; align-items:center;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  /* sheet open on mobile: don't cast the bar's shadow onto the card behind it */
  body.sheet-up .bar{ box-shadow:none }
  .bar-inner{width:100%; margin:0 auto; padding:0 .7rem; display:flex; align-items:center; gap:.5rem; min-width:0}
  .ctrl{
    width:2.5rem; height:2.5rem; flex:0 0 auto; border-radius:.55rem;
    border:1px solid var(--line); background:var(--bg-elev); color:var(--text);
    display:grid; place-items:center; cursor:pointer;
    transition:border-color .18s ease, color .18s ease, transform .1s ease;
  }
  .ctrl:hover{border-color:var(--accent); color:var(--accent)}
  .ctrl:active{transform:scale(.94)}
  .ctrl:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .ctrl.off{color:var(--faint)}
  .ctrl .ic-off{display:none}
  .ctrl.off .ic-on{display:none}
  .ctrl.off .ic-off{display:block}
  .ctrl svg{width:1.15rem; height:1.15rem}

  /* keys fill the whole bar; scroll only when they can't all fit */
  .rail{
    flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:.3rem;
    overflow-x:auto; overflow-y:hidden; padding:.45rem 0;
  }
  .rail::-webkit-scrollbar{height:0}
  .rail-div{flex:0 0 auto; width:1px; height:1.4rem; background:var(--line); margin:0 .15rem}
  .key{
    flex:1 1 0; scroll-snap-align:center;
    font-family:var(--display); font-weight:500; font-size:.84rem; letter-spacing:.02em;
    min-width:2.2rem; height:2.3rem; padding:0 .35rem; border-radius:.5rem;
    border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer;
    transition:color .15s ease, border-color .15s ease, background .15s ease, transform .14s cubic-bezier(.2,.8,.25,1);
  }
  .key--nns{flex:1.2 1 0; font-weight:700; letter-spacing:.06em; color:var(--text)}
  .key:hover{color:var(--text); border-color:var(--accent)}
  .key:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .key.active{
    color:var(--accent-ink); font-weight:700; border-color:transparent;
    background:linear-gradient(180deg,var(--accent),var(--accent-2));
    box-shadow:0 .3rem .8rem -.3rem rgba(77,155,255,.4), inset 0 1px 0 rgba(255,255,255,.18);
  }
  @media (max-width:640px){ .key{ flex:0 0 auto; } }   /* small screens: natural width + scroll */

  /* ── mobile: hide gutter, lyrics get full width ─────────────── */
  @media (max-width:640px){
    :root{--content: calc(100% - 1.4rem); --gutter:0}
    .sec{grid-template-columns:minmax(0,1fr); column-gap:0; margin-bottom:1rem}
    .sec + .sec{padding-top:.5rem}   /* tight spacing, no divider line */
    .sec-label{ display:block; position:static; padding-top:0; margin-bottom:.1rem;
      font-size:.64rem; letter-spacing:.1em; color:var(--muted); }   /* label as a tight heading above the section */
    .sec--chords .sec-label{ padding-top:0 }
    .sec-body{grid-column:1}
    .song-artist{font-size:.95rem}
    .brand{font-size:.74rem}
    /* stack the artist + meta on their own row beneath the title, left-aligned */
    .song-head{ flex-direction:column; align-items:flex-start; gap:.5rem }
    .song-info{ align-items:flex-start; text-align:left }
    .meta{ justify-content:flex-start }
  }
  @media (prefers-reduced-motion:reduce){ *{transition:none !important} }

/* ───────────────────────── editor page ───────────────────────── */
.menu-accent{ color:color-mix(in srgb, var(--accent) 75%, var(--muted)) !important; }
/* hamburger: divider after Singers — the items below (import / print / updates /
   theme) read as a quieter, smaller secondary group */
.menu-sep{ height:1px; background:var(--line); margin:.6rem .25rem .35rem; }
.menu a.menu-accent{ font-size:.84rem; }
.menu .menu-btn-item{ color:var(--muted); font-size:.84rem; padding:.45rem .7rem; }
.ed-top{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1.1rem; background:var(--bar-bg); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.ed-top h1{ font-family:var(--display); font-weight:600; font-size:1.1rem; letter-spacing:.01em; flex:1 }
.ed-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:0;
  min-height:calc(100vh - 3.4rem);
}
.ed-input{ padding:1.4rem 1.4rem 4rem; border-right:1px solid var(--line); min-width:0 }
.ed-preview{ padding:1.1rem 1.2rem 4rem; min-width:0; background:color-mix(in srgb,var(--text) 2.5%,var(--bg)) }
.ed-preview .wrap{ width:100% }
.ed-preview .song-head{ padding-top:0 }

.ed-tabs{ display:flex; gap:.4rem; margin-bottom:1rem }
.ed-tab{
  font-family:var(--display); font-weight:500; font-size:.84rem; letter-spacing:.02em;
  padding:.5rem .85rem; border:1px solid var(--line); border-radius:.5rem;
  background:var(--bg-elev); color:var(--muted); cursor:pointer;
}
.ed-tab.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.ed-pane{ display:none } .ed-pane.active{ display:block }

.ed-label{
  display:block; font-family:var(--display); font-weight:600; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:1rem 0 .4rem;
}
.ed-input textarea, .ed-input input, .ed-input select{
  width:100%; font-family:var(--body); font-size:.95rem; color:var(--text);
  background:var(--bg-elev); border:1px solid var(--line); border-radius:.5rem; padding:.6rem .7rem;
}
.ed-input textarea{ resize:vertical; line-height:1.5 }
#ed-paste{ min-height:11rem; font-family:ui-monospace,Menlo,monospace; font-size:.82rem; white-space:pre }
#ed-source{ min-height:14rem; font-family:ui-monospace,Menlo,monospace; font-size:.84rem }
.ed-input :is(textarea,input,select):focus-visible{ outline:2px solid var(--accent); outline-offset:1px }
.ed-row{ display:flex; gap:.7rem; flex-wrap:wrap } .ed-row > div{ flex:1 1 7rem; min-width:0 }
.ed-btn{
  font-family:var(--display); font-weight:600; font-size:.9rem; letter-spacing:.02em;
  padding:.65rem 1.1rem; border-radius:.55rem; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink); cursor:pointer; transition:transform .1s ease;
}
.ed-btn:active{ transform:scale(.97) } .ed-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.ed-btn--ghost{ background:transparent; color:var(--text); border-color:var(--line) }
.ed-btn--danger{ background:transparent; color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, var(--line)) }
.ed-btn--danger:hover{ background:color-mix(in srgb, var(--danger) 12%, transparent); border-color:var(--danger) }
.ed-actions{ display:flex; gap:.6rem; align-items:center; margin-top:1.3rem; flex-wrap:wrap }
.ed-status{ font-size:.85rem; color:var(--muted) } .ed-status.ok{ color:var(--accent) }
.ed-hint{ font-size:.8rem; color:var(--muted); line-height:1.5; margin-top:.5rem }

/* reference-recordings editor */
.ed-refs{ margin-top:1.6rem; border-top:1px solid var(--line); padding-top:1.2rem }
.ed-refs-h{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-family:var(--display); font-weight:600; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.7rem }
.ed-ref{ display:flex; flex-direction:column; gap:.5rem; padding:.7rem; margin-bottom:.7rem;
  border:1px solid var(--line); border-radius:.6rem; background:color-mix(in srgb, var(--text) 2.5%, var(--bg)) }
.ed-ref-top{ display:flex; align-items:center; gap:.5rem }
.ed-ref-top .ed-ref-name{ flex:1; width:auto }
.ed-ref-top .ed-ref-key{ flex:0 0 auto; width:auto; min-width:5.5rem }
.ed-ref-rm{ flex:0 0 auto; width:2.3rem; height:2.3rem; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:.5rem; background:var(--bg-elev); color:var(--muted);
  font-size:1.3rem; line-height:1; cursor:pointer; transition:color .15s ease, border-color .15s ease }
.ed-ref-rm:hover{ color:var(--danger); border-color:var(--danger) }
.ed-ref-add{ font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent); background:none; cursor:pointer;
  border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius:.5rem;
  padding:.4rem .7rem; transition:background .15s ease }
.ed-ref-add:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent) }
.ed-soon{
  border:1px dashed var(--line); border-radius:.6rem; padding:1.2rem; color:var(--muted);
  font-size:.9rem; line-height:1.6;
}
.ed-prevbar{ display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem }
.ed-prevbar label{ font-family:var(--display); font-weight:600; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.ed-prevbar select{ font-family:var(--display); font-size:.85rem; background:var(--bg-elev); color:var(--text); border:1px solid var(--line); border-radius:.45rem; padding:.35rem .6rem }
@media (max-width:820px){ .ed-grid{ grid-template-columns:1fr } .ed-input{ border-right:0; border-bottom:1px solid var(--line) } }

/* screenshot drop zone */
.ed-drop{
  border:2px dashed var(--line); border-radius:.7rem; padding:1.8rem 1.2rem; text-align:center;
  color:var(--muted); transition:border-color .15s ease, background .15s ease;
}
.ed-drop.over{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent) }
.ed-drop-ic{ width:2rem; height:2rem; color:var(--muted); margin-bottom:.5rem }
.ed-drop p{ margin:.2rem 0 }
.ed-link{ background:none; border:0; padding:0; color:var(--accent); font:inherit; cursor:pointer; text-decoration:underline }
.ed-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ───────────────────────── hub pages (Charts / Setlists / Singers) ───────────────────────── */
.hub{ width:95%; max-width:1100px; margin:1.2rem auto 5rem; }
.hub-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:.8rem 1.2rem; flex-wrap:wrap; margin-bottom:1.1rem }
.hub-title{
  font-family:var(--display); font-weight:700; font-size:clamp(2.2rem,6vw,3.4rem);
  text-transform:uppercase; letter-spacing:-.01em; line-height:1;
}
.hub-count{ font-family:var(--display); font-weight:500; font-size:.86rem; letter-spacing:.06em;
  text-transform:none; color:var(--faint); margin-left:.5rem; vertical-align:middle }
.hub-search{
  display:flex; align-items:center; gap:.5rem; border:1px solid var(--line);
  border-radius:.6rem; padding:.42rem .7rem; background:var(--bg-elev);
  transition:border-color .15s ease;
}
.hub-search:focus-within{ border-color:var(--accent) }
.hub-search svg{ width:1rem; height:1rem; color:var(--muted); flex:0 0 auto }
.hub-search input{ border:0; background:none; color:var(--text); font-family:var(--body);
  font-size:.95rem; outline:none; min-width:11rem }
.hub-search input::placeholder{ color:var(--faint) }

.ct-head, .ct-row{ display:grid; grid-template-columns:minmax(0,1fr) 3.9rem 3.9rem; align-items:center; column-gap:15px }
.ct-head{ padding:.2rem 0 .6rem; border-bottom:1px solid var(--line) }
.ct-sort{
  position:relative; justify-self:start; white-space:nowrap;        /* content-sized pill; never wraps */
  font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.36rem 1.5em .36rem .7rem; border-radius:.5rem; border:1px solid var(--line); background:transparent; color:var(--muted);
  cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.ct-sort.ct-colnum{ justify-self:stretch }   /* fill the fixed column → uniform width, flush right */
/* sort caret: both arrows stacked when inactive; on sort the active one slides to
   centre while the other slides out of view. ::before = up, ::after = down. */
.ct-sort::before, .ct-sort::after{
  position:absolute; right:.62em; top:50%; font-size:.6em; line-height:1; color:currentColor; opacity:.5;
  transition:transform .2s ease, opacity .2s ease; pointer-events:none;
}
.ct-sort::before{ content:'\25B2'; transform:translateY(-105%) }   /* ▲ upper slot */
.ct-sort::after{  content:'\25BC'; transform:translateY(5%) }      /* ▼ lower slot */
.ct-sort.active::before, .ct-sort.active::after{ opacity:1 }
.ct-sort.active[data-dir="asc"]::before{ transform:translateY(-62%) }            /* up centres (nudged for glyph baseline) */
.ct-sort.active[data-dir="asc"]::after{  transform:translateY(165%); opacity:0 } /* down exits */
.ct-sort.active[data-dir="desc"]::after{  transform:translateY(-62%) }           /* down centres */
.ct-sort.active[data-dir="desc"]::before{ transform:translateY(-165%); opacity:0 } /* up exits */
.ct-sort:hover{ color:var(--text); border-color:var(--accent) }
.ct-sort.active{ background:var(--text); color:var(--bg); border-color:var(--text) }
.ct-sort:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.ct-row{
  text-decoration:none; color:inherit; padding:.72rem .55rem; margin:0 -.55rem;
  border-bottom:1px solid var(--line-soft); border-radius:.45rem;
  transition:background .12s ease;
}
.ct-row:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent) }
.ct-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }
.ct-title{ display:flex; flex-direction:column; gap:.04rem; min-width:0 }
.ct-name{
  font-family:var(--body); font-weight:600; font-size:1.22rem; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ct-artist{
  font-family:var(--body); font-weight:400; font-style:italic; font-size:.86rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ct-songs{
  font-family:var(--body); font-weight:400; font-size:.86rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ct-num{ font-family:var(--body); font-weight:500; font-size:1rem; color:var(--muted);
  text-align:center; font-variant-numeric:tabular-nums }
.ct-key{ color:var(--text); font-weight:600 }
.ct-empty{ color:var(--muted); padding:1.4rem 0; font-style:italic }

/* Singers index = 2 cols (Singer · Songs); single singer = 4 cols (Song · Key1 · Key2 · BPM) */
.hub--singers .ct-head, .hub--singers .ct-row{ grid-template-columns:minmax(0,1fr) 4.4rem }
.hub--singer  .ct-head, .hub--singer  .ct-row{ grid-template-columns:minmax(0,1fr) 3.9rem 3.9rem 3.9rem }
.ct-key--1{ color:var(--accent) }   /* a singer's #1 key, highlighted */

/* breadcrumb on the single-singer / single-setlist title — small faint back-link
   sitting beside (not inside) the big title, so it reads as a true crumb */
.hub-crumb{ display:flex; align-items:center; gap:.1rem; min-width:0 }
.hub-crumb .hub-title{ min-width:0 }
.hub-back{ color:var(--faint); text-decoration:none; transition:color .15s ease }
.hub-back:hover{ color:var(--text) }
.hub-sep{ color:var(--faint); margin:0 .35rem; font-weight:300 }

@media (max-width:560px){
  .ct-head, .ct-row{ grid-template-columns:minmax(0,1fr) 3.3rem 3.3rem; column-gap:10px }
  .hub--singers .ct-head, .hub--singers .ct-row{ grid-template-columns:minmax(0,1fr) 4rem }
  .hub--singer  .ct-head, .hub--singer  .ct-row{ grid-template-columns:minmax(0,1fr) 3.1rem 3.1rem 3.1rem; column-gap:8px }
  .ct-sort{ padding:.32rem 1.35em .32rem .4rem }   /* keep room for the sort caret */
  .ct-name{ font-size:1.08rem }
  /* search drops to its own full-width row beneath the title */
  .hub-actions{ flex:1 1 100%; width:100% }   /* setlists: search lives in this wrapper */
  .hub-search{ flex:1 1 100%; width:100%; box-sizing:border-box }
  .hub-search input{ flex:1; min-width:0; width:100% }
}

/* capo control (bottom bar) — a compact chip that opens a popover */
.capo{ display:flex; align-items:center; flex:0 0 auto; position:relative }
.capo.disabled{ opacity:.4; pointer-events:none }
.capo-lbl{ font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted) }
/* the bar chip — matches the key buttons (size / radius / type) */
.capo-tab{
  height:2.3rem; min-width:4.7rem; padding:0 .7rem; border:1px solid var(--line); background:transparent; color:var(--muted);
  border-radius:.5rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:space-around; gap:.25rem;
  font-family:var(--display); font-weight:500; font-size:.84rem; letter-spacing:.02em;
  transition:color .15s ease, border-color .15s ease;
}
.capo-tab .capo-lbl{ color:inherit }
.capo-tab:hover{ color:var(--accent); border-color:var(--accent) }
.capo-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.capo.on .capo-tab{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent) }
.capo-tab svg{ width:1rem; height:1rem }
.capo-tab-n{ font-family:var(--display); font-weight:500; font-size:.84rem; line-height:1 }
/* the popover — −/+, ✨ easy-capo, and the shape readout, all on one row */
.capo-pop{
  position:absolute; bottom:calc(100% + .55rem); left:0; z-index:40; padding:.5rem .55rem;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:.6rem;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55);
}
.capo-pop[hidden]{ display:none }
.capo-pop-row{ display:flex; align-items:center; justify-content:center; gap:.4rem }
.capo-btn, .capo-auto{
  height:2rem; border:1px solid var(--line); background:transparent; color:var(--muted);
  border-radius:.45rem; cursor:pointer; display:grid; place-items:center;
  transition:color .15s ease, border-color .15s ease;
}
.capo-btn{ width:2rem; font-size:1.15rem; line-height:1 }
.capo-auto{ width:2.2rem; margin-left:.15rem }
.capo-auto svg{ width:1.05rem; height:1.05rem }
.capo-reset svg{ width:1rem; height:1rem }
.capo-reset{ margin-right:.15rem }   /* slight separation from the −/+ stepper */
.capo-btn:hover, .capo-auto:hover{ color:var(--accent); border-color:var(--accent) }
.capo-btn:focus-visible, .capo-auto:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
/* the number + played-key sit together as one readout: "0 → G" */
.capo-readout{ display:inline-flex; align-items:center; gap:.3rem }
.capo-n{ font-family:var(--display); font-weight:700; font-size:1rem; min-width:1.2rem;
  text-align:center; color:var(--text) }
.capo.on .capo-n{ color:var(--accent) }
.capo-shape{ display:inline-flex; align-items:center; gap:.28rem; font-family:var(--display); font-weight:600;
  font-size:1rem; color:var(--accent); white-space:nowrap }   /* same size as the number */
/* fixed width so the row never shifts between 1- and 2-character keys */
.capo-shape-k{ display:inline-block; min-width:1.4rem; text-align:center }
.bar-div{ width:1px; height:1.6rem; background:var(--line); margin:0 .55rem; flex:0 0 auto }

/* key stepper (mobile) — one connected unit like the text-sizer: [‹|cur|›].
   The centre key (accent) opens the key sheet; the arrows nudge ±1 semitone. */
.key-stepper{ display:none; align-items:center; flex:0 0 auto; margin-inline:auto; position:relative;
  height:2.3rem; border:1px solid var(--line); border-radius:.5rem; overflow:hidden; background:transparent }
.kstep{
  width:2.1rem; height:100%; flex:0 0 auto; border:0; border-radius:0; background:transparent;
  color:var(--muted); cursor:pointer; display:grid; place-items:center;
  transition:color .15s ease, background .15s ease, opacity .15s ease;
}
.kstep svg{ width:1.05rem; height:1.05rem }
.kstep:hover{ color:var(--accent) }
.kstep:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }
.kstep:disabled{ opacity:.3; pointer-events:none }
.kstep-cur{
  min-width:4.6rem; height:100%; padding:0 .6rem; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.02em;
  color:var(--accent-ink); background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
.kstep-cur:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }
.kstep-grid{ width:.85rem; height:.85rem; opacity:.75; flex:0 0 auto }

/* key grid popover — NNS / 123 modes above a grid of every key. Fixed + centred
   in the viewport (the stepper sits right-of-centre, so anchoring to it would
   overflow the screen edge) and floated just above the bar. */
.key-grid-pop{
  position:fixed; left:50%; transform:translateX(-50%); z-index:40;
  bottom:calc(var(--bar-h) + .7rem + env(safe-area-inset-bottom));
  width:min(20rem, calc(100vw - 1rem)); padding:.6rem;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:.7rem;
  box-shadow:0 1.4rem 2.8rem -1rem rgba(0,0,0,.5);
}
.key-grid-pop[hidden]{ display:none }
.kg-modes{ display:flex; gap:.4rem; margin-bottom:.5rem }
.kg-mode{
  flex:1 1 0; height:2.2rem; border:1px solid var(--line); background:transparent; color:var(--text);
  border-radius:.5rem; font-family:var(--display); font-weight:700; letter-spacing:.05em; font-size:.82rem;
  cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.kg-mode:hover{ border-color:var(--accent); color:var(--accent) }
.kg-mode.active{ color:var(--accent-ink); border-color:transparent;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)) }
.kg-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:.35rem }
.kg-key{
  height:2.5rem; border:1px solid var(--line); background:transparent; color:var(--muted);
  border-radius:.5rem; font-family:var(--display); font-weight:600; font-size:.92rem; cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.kg-key:hover{ border-color:var(--accent); color:var(--text) }
.kg-key.active{ color:var(--accent-ink); border-color:transparent; font-weight:700;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)) }

/* singers & reference (bottom bar, far right) */
.bar-singers{
  flex:0 0 auto; width:2.3rem; height:2.3rem; border:1px solid var(--line); background:transparent;
  color:var(--muted); border-radius:.5rem; display:grid; place-items:center; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.bar-singers svg{ width:1.2rem; height:1.2rem }
/* lit when the current key matches a singer's preferred key (like .capo.on) —
   hover / open rules below override with the full accent border */
.bar-singers.keyed{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent) }
.bar-singers:hover{ color:var(--accent); border-color:var(--accent) }
.bar-singers.on{ color:var(--accent); border-color:var(--accent) }
.bar-singers:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ── mobile control sheet ──────────────────────────────────────────
   One card that slides up from BEHIND the bottom bar and hosts whichever
   control was tapped (tuning / capo / key grid / singers). The real popover
   elements are moved in on open and returned to their bar homes on close, so
   their existing handlers keep working. Desktop keeps the anchored popovers. */
.bar-sheet-scrim{ position:fixed; inset:0; z-index:14; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .25s ease }
.bar-sheet-scrim.on{ opacity:1; pointer-events:auto }
.bar-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:16;          /* below the bar (z 20) → tucks behind it */
  background:var(--bg-elev); border-top:1px solid var(--line); border-radius:1.1rem 1.1rem 0 0;
  box-shadow:0 -1rem 2.4rem -.6rem rgba(0,0,0,.55);
  padding:1.5rem 1.1rem calc(var(--bar-h) + 1.2rem + env(safe-area-inset-bottom));   /* clear the bar */
  transform:translateY(120%); transition:transform .25s ease;
}
.bar-sheet.open{ transform:translateY(0) }
.bar-sheet-grip{ position:absolute; top:.6rem; left:50%; transform:translateX(-50%);
  width:2.4rem; height:.3rem; padding:0; border:0; border-radius:.3rem; background:var(--line); cursor:pointer }
.bar-sheet-title{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-align:center; margin:.25rem 0 .9rem }
.bar-sheet-body{ max-height:60vh; overflow-y:auto }
/* neutralise each popover's anchored chrome while it's hosted in the sheet */
.bar-sheet-body > *{ position:static !important; transform:none !important; inset:auto !important;
  width:100% !important; min-width:0 !important; box-shadow:none !important; border:0 !important;
  background:transparent !important; padding:0 !important; display:block !important }
.bar-sheet-body .sgpop-h{ display:none }   /* the sheet header already names the panel */
/* bigger, easier tap targets for the capo + singers/reference controls in the card */
.bar-sheet-body .capo-pop-row{ gap:.5rem }
.bar-sheet-body .capo-btn, .bar-sheet-body .capo-auto{ height:2.6rem }
.bar-sheet-body .capo-btn{ width:2.6rem; font-size:1.3rem }
.bar-sheet-body .capo-auto{ width:2.9rem }
.bar-sheet-body .capo-auto svg, .bar-sheet-body .capo-reset svg{ width:1.2rem; height:1.2rem }
.bar-sheet-body .capo-n{ font-size:1.2rem; min-width:1.4rem }
.bar-sheet-body .capo-shape{ font-size:1.2rem }   /* same size as the number */
.bar-sheet-body .capo-shape-k{ min-width:1.7rem }
.bar-sheet-body .sg-chip{ font-size:1rem; min-width:2.5rem; padding:.4rem .55rem }
.bar-sheet-body .ref-ic{ width:2.4rem; height:2.4rem }
.bar-sheet-body .ref-ic svg{ width:1.2rem; height:1.2rem }
.bar-sheet-body .sg-edit{ width:2.4rem; height:2.4rem }
.bar-sheet-body .sg-edit svg{ width:1.25rem; height:1.25rem }
.bar-sheet-body .sg-set{ padding:.6rem .85rem; font-size:.92rem }
/* active bar control while its sheet is open */
.tuning-btn.sheet-on, .capo-tab.sheet-on, .bar-singers.sheet-on{ color:var(--accent); border-color:var(--accent) }

/* ── chord fingering diagram ───────────────────────────────────────
   Tap a chord → fret diagram (guitar/uke) or keyboard (piano). Desktop:
   anchored popover. Mobile (≤640px): slide-up sheet, like the bar controls. */
.cd-scrim{ position:fixed; inset:0; z-index:44; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease }
.cd-scrim.on{ opacity:1; pointer-events:auto }
.cd-pop{
  position:fixed; z-index:46; width:16rem; max-width:calc(100vw - 1rem);
  display:none; padding:.85rem .9rem 1rem;
  background:var(--bg-elev); border:0; border-radius:1.4rem;
  box-shadow:0 1.2rem 2.8rem -.7rem rgba(0,0,0,.5);
}
.cd-pop.open{ display:block }
.cd-grip{ display:none }
.cd-close{
  margin-left:auto; width:2rem; height:2rem; flex-shrink:0;
  border:0; border-radius:.5rem; background:transparent; color:var(--muted);
  cursor:pointer; display:grid; place-items:center;
  transition:color .15s ease, background .15s ease }
.cd-close:hover{ color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent) }
.cd-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.cd-close svg{ width:1.1rem; height:1.1rem }
.cd-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.7rem }
.cd-sym{ font-family:var(--display); font-weight:700; font-size:1.45rem; line-height:1;
  letter-spacing:.01em; color:var(--text) }
.cd-capo{ font-family:var(--display); font-weight:600; font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-ink); background:var(--accent);
  padding:.18rem .4rem; border-radius:.3rem }
.cd-capo[hidden]{ display:none }
.cd-seg{ display:flex; gap:.3rem; margin-bottom:.85rem }
.cd-seg[hidden]{ display:none }
.cd-seg-b{
  flex:1 1 0; height:2.1rem; border:1px solid var(--line); background:transparent; color:var(--muted);
  border-radius:.5rem; font-family:var(--display); font-weight:600; font-size:.82rem; cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.cd-seg-b:hover{ color:var(--accent); border-color:var(--accent) }
.cd-seg-b:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.cd-seg-b.on{ color:var(--accent-ink); border-color:transparent; font-weight:700;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)) }
.cd-stage{ display:grid; place-items:center; min-height:8.5rem; color:var(--text) }
.cd-fret, .cd-piano{ display:block; height:auto }
.cd-fret{ width:auto; max-height:10.5rem }
.cd-piano{ width:100%; max-width:14.5rem }
.cd-hint{ margin:0; padding:1.4rem .4rem; text-align:center; color:var(--muted);
  font-family:var(--body); font-size:.95rem; line-height:1.4 }
.cd-foot{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.45rem; margin-top:.7rem; min-height:.5rem; padding-bottom:.75rem }
.cd-voi{ display:inline-flex; align-items:center; gap:.65rem }
.cd-voi[hidden]{ display:none }
.cd-chev{
  width:2rem; height:2rem; border:1px solid var(--line); background:transparent; color:var(--muted);
  border-radius:.45rem; font-size:1.15rem; line-height:1; cursor:pointer; display:grid; place-items:center;
  transition:color .15s ease, border-color .15s ease;
}
.cd-chev:hover{ color:var(--accent); border-color:var(--accent) }
.cd-chev:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.cd-voi-n{ font-family:var(--display); font-weight:600; font-size:.85rem; color:var(--muted);
  min-width:4.6rem; text-align:center; letter-spacing:.04em }
.cd-bass{ font-family:var(--body); font-size:.82rem; color:var(--muted); text-align:center }
.cd-bass[hidden]{ display:none }
.cd-note{ font-family:var(--body); font-size:.78rem; color:var(--muted); text-align:center;
  line-height:1.35; max-width:13rem; text-wrap:balance }
.cd-note[hidden]{ display:none }

/* "All ›" and "‹ One" nav buttons inside the tab row — shrink to content width */
.cd-seg-b--all, .cd-seg-b--one{ flex:0 0 auto; padding:0 1rem; word-spacing:.2em }

.cd-grid-head{ display:flex; align-items:center; gap:.55rem; margin-bottom:.8rem }
.cd-grid-title{ font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--text) }
.cd-capo--grid{ margin-left:auto }

.cd-grid{ display:grid; gap:.5rem; color:var(--text);
  grid-template-columns:repeat(auto-fill, minmax(6.5rem, 1fr)) }
.cd-grid--piano{ grid-template-columns:1fr }
.cd-cell{ display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:.5rem .4rem; border:1px solid var(--line); border-radius:.55rem;
  background:transparent; color:inherit; cursor:pointer;
  transition:border-color .15s ease, background .15s ease }
.cd-cell:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent) }
.cd-cell:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.cd-cell-sym{ font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--text) }
.cd-cell-dia{ display:grid; place-items:center }
.cd-cell-dia .cd-fret{ max-height:7rem }
.cd-cell-x{ color:var(--muted); font-size:1.4rem; padding:1.2rem 0 }
.cd-grid--piano .cd-cell{ flex-direction:row; gap:.75rem; justify-content:flex-start; padding:.5rem .7rem }
.cd-grid--piano .cd-cell-sym{ min-width:3.6rem; text-align:left }
.cd-grid--piano .cd-cell-dia .cd-piano{ max-width:11rem }

/* mode visibility — single shows head/stage/foot; grid shows grid-head/grid.
   .cd-seg sits outside both groups, so it stays visible in both modes. */
.cd-pop:not(.grid) .cd-grid-head, .cd-pop:not(.grid) .cd-grid{ display:none }
.cd-pop.grid .cd-head, .cd-pop.grid .cd-stage, .cd-pop.grid .cd-foot{ display:none }
.cd-pop.grid{ width:30rem; max-width:calc(100vw - 2rem);
  left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%, -50%);
  max-height:80vh; display:flex; flex-direction:column }
.cd-pop.grid .cd-grid{ overflow-y:auto; flex:1 1 auto }

@media (max-width:640px){
  /* Chord panel shares the fbar's bottom anchor + concentric bottom corners so they read
     as one unit. padding-bottom (4.7rem) clears the taller fbar so content is never hidden. */
  .cd-pop{
    left: max(env(safe-area-inset-left), .75rem); right: max(env(safe-area-inset-right), .75rem);
    top: auto; bottom: .75rem;
    width: auto; max-width: 30rem; margin-inline: auto;
    z-index: 60;
    border: 0; border-radius: var(--fbar-r-top, 1.4rem) var(--fbar-r-top, 1.4rem) var(--fbar-r-bottom, 1.8rem) var(--fbar-r-bottom, 1.8rem);
    padding: .8rem 1.1rem 4.7rem;
    transform: translateY(100%); opacity: 0;
    pointer-events: none;
    transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
    display: block;
  }
  .cd-pop.open{
    transform: translateY(0); opacity: 1; pointer-events: auto;
    box-shadow: 0 -1.2rem 2.8rem -.7rem rgba(0,0,0,.5);
  }
  /* All-chords grid on mobile: same slide-up, taller.
     Must explicitly reset the desktop .cd-pop.grid centering (left:50%/top:50%/
     transform:translate) because .cd-pop.grid has higher specificity than .cd-pop */
  .cd-pop.grid{
    left: max(env(safe-area-inset-left), .75rem); right: max(env(safe-area-inset-right), .75rem);
    top: auto; bottom: .75rem; width: auto; max-width: 30rem;
    max-height: 82vh;
    transform: translateY(100%);
  }
  .cd-pop.grid.open{ transform: translateY(0) }
  /* Grip pill */
  .cd-grip{
    display: block; width: 2.6rem; height: .3rem; margin: 0 auto .55rem;
    padding: 0; border: 0; border-radius: .3rem; background: var(--line); cursor: pointer }
  /* Larger touch targets + scaled diagrams */
  .cd-sym{ font-size:1.7rem }
  .cd-seg-b{ height:2.5rem; font-size:.9rem }
  .cd-chev{ width:2.5rem; height:2.5rem }
  .cd-stage{ min-height:10rem }
  .cd-fret{ max-height:13rem }
  .cd-piano{ max-width:19rem }
  .cd-cell-dia .cd-fret{ max-height:8rem }
  .cd-grid--piano .cd-cell-dia .cd-piano{ max-width:14rem }
}

/* down-tuning / baritone control (bottom bar) — opens a popover of tunings */
.tuning{ display:flex; align-items:center; gap:.25rem; flex:0 0 auto; position:relative }
.tuning.disabled{ opacity:.4; pointer-events:none }
.tuning-btn{
  height:2.3rem; min-width:4.7rem; padding:0 .7rem; border:1px solid var(--line); background:transparent; color:var(--muted);
  border-radius:.5rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:space-around; gap:.25rem;
  font-family:var(--display); font-weight:500; font-size:.84rem; letter-spacing:.02em;
  transition:color .15s ease, border-color .15s ease;
}
.tuning-btn svg{ width:.95rem; height:.95rem }
.tuning-btn:hover{ color:var(--accent); border-color:var(--accent) }
.tuning-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.tuning.on .tuning-btn{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent) }
.tuning-val{ font-family:var(--display); font-weight:500; font-size:.84rem; line-height:1; letter-spacing:.02em }
.tuning-pop{
  position:absolute; bottom:calc(100% + .55rem); left:0; z-index:40; padding:.55rem; width:18.5rem; max-width:calc(100vw - 1.5rem);
  background:var(--bg-elev); border:1px solid var(--line); border-radius:.6rem;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55);
}
.tuning-pop[hidden]{ display:none }
/* desktop / tablet popup titles (the mobile sheet supplies its own header) */
.tuning-pop-h, .capo-pop-h{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-align:center; margin:.1rem 0 .65rem }
.bar-sheet-body .tuning-pop-h, .bar-sheet-body .capo-pop-h{ display:none }
/* tuning options as a two-column button grid */
.tuning-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem }
.tuning-opt{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.13rem;
  padding:.5rem .35rem; border:1px solid var(--line); border-radius:.5rem; background:transparent; color:var(--text);
  cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.tuning-opt:hover{ border-color:var(--accent); color:var(--accent) }
.tuning-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.tuning-opt.on{ color:var(--accent-ink); border-color:transparent; background:linear-gradient(180deg,var(--accent),var(--accent-2)) }
.tuning-opt .to-key{ font-family:var(--display); font-weight:700; font-size:1rem; line-height:1.05 }
.tuning-opt .to-sub{ font-size:.66rem; color:var(--muted); white-space:nowrap; line-height:1 }
.tuning-opt.on .to-sub{ color:color-mix(in srgb, var(--accent-ink) 72%, transparent) }
.tuning-opt .to-dot{ margin:0 .3em }

/* mobile + tablet: divider matches the key-button height; the key strip fills to
   the right edge and scrolls flush against the divider, keeping the initial NNS
   gap as scrollable left padding (.35 bar-div margin + .5 flex gap = .85rem) */
@media (max-width:1024px){
  .bar-div{ height:2.3rem; margin:0 .35rem }
  /* rail scrolls flush against BOTH dividers, with the initial NNS / final-key gap
     preserved as scrollable padding on each side (.35 bar-div margin + .5 flex gap) */
  .rail{ margin-left:-.85rem; padding-left:.85rem; margin-right:-.85rem; padding-right:.85rem }
  /* singers button keeps a comfortable desktop-like width (not the cramped key width) */
  .bar-singers{ width:2.9rem }
}
/* mobile: the scrolling key rail is replaced by the compact stepper + sheet */
@media (max-width:640px){
  #key-rail{ display:none }
  .key-stepper{ display:flex }
  .bar-div{ display:none }            /* centred stepper needs no inline dividers */
  /* tune+capo sit at the left; stepper + singers group at the right (mirrors the
     top bar's right-justified tools). Gap matches the top-bar .tools gap. */
  .bar-inner{ gap:.4rem; padding:0 .55rem }
  .key-stepper{ margin-left:auto; margin-right:0; width:6rem }   /* same total width as the text-sizer */
  .kstep{ width:1.6rem }
  .kstep-cur{ flex:1; min-width:0; padding:0 .25rem; gap:0 }
  .kstep-grid{ display:none }   /* no room beside the label (NNS/123); the accent fill + arrows signal tap */
  .bar-singers{ width:2.3rem }        /* stays square on mobile (override the tablet width) */
}
@media (max-width:410px){
  .bar-inner{ gap:.3rem }             /* track the top bar's tighter gap at this width */
  .key-stepper{ width:5.75rem }       /* matches the text-sizer here; keeps the centre key ≥ hamburger */
}

/* nav search reveal (shared hub nav) */
.iconbtn.active{ border-color:var(--accent); color:var(--accent) }
.nav-search{
  display:flex; align-items:center; gap:.6rem; width:100%;
  padding:.7rem 1.1rem; border-bottom:1px solid var(--line); background:var(--bg-elev);
}
.nav-search[hidden]{ display:none }
.nav-search > svg{ width:1.1rem; height:1.1rem; color:var(--muted); flex:0 0 auto }
.nav-search input{ flex:1; min-width:0; border:0; background:none; color:var(--text);
  font-family:var(--body); font-size:1.05rem; outline:none; appearance:none; -webkit-appearance:none }
.nav-search input::placeholder{ color:var(--faint) }
.nav-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; display:none }
.nav-search-x{ flex:0 0 auto; width:1.9rem; height:1.9rem; border:0; background:none;
  color:var(--muted); font-size:1.5rem; line-height:1; cursor:pointer; border-radius:.4rem }
.nav-search-x:hover{ color:var(--text) }

/* song search (single chart page) — quick-switcher panel under the search icon */
.song-search{
  position:absolute; top:calc(100% + .5rem); left:0; z-index:40; width:min(22rem, 92vw);
  background:var(--bg-elev); border:1px solid var(--line); border-radius:.6rem; overflow:hidden;
  box-shadow:0 1.2rem 2.4rem -1rem rgba(0,0,0,.45);
}
.song-search[hidden]{ display:none }
.song-search-bar{ display:flex; align-items:center; gap:.5rem; padding:.6rem .7rem; border-bottom:1px solid var(--line) }
.song-search-bar svg{ width:1rem; height:1rem; color:var(--muted); flex:0 0 auto }
.song-search-bar input{ flex:1; min-width:0; border:0; background:none; color:var(--text);
  font-family:var(--body); font-size:1rem; outline:none; appearance:none; -webkit-appearance:none }
.song-search-bar input::placeholder{ color:var(--faint) }
.song-search-bar input::-webkit-search-cancel-button{ -webkit-appearance:none; display:none }
.song-search-results{ list-style:none; margin:0; padding:.3rem; max-height:60vh; overflow-y:auto }
.ssr{ display:flex; flex-direction:column; gap:.02rem; width:100%; text-align:left; border:0;
  background:none; cursor:pointer; padding:.5rem .6rem; border-radius:.4rem; color:var(--text) }
.ssr:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent) }
.ssr.on{ background:color-mix(in srgb, var(--accent) 16%, transparent) }
.ssr-t{ font-family:var(--body); font-weight:600; font-size:1rem }
.ssr-a{ font-family:var(--body); font-style:italic; font-size:.82rem; color:var(--muted) }
.ssr-empty{ color:var(--muted); font-style:italic; padding:.6rem }

/* ───────────────────────── Singers popover (chart page) ───────────────────────── */
.sgpop{
  position:fixed; z-index:60; width:min(20rem, calc(100vw - 1rem));
  background:var(--bg-elev); border:1px solid var(--line); border-radius:.7rem; padding:.7rem;
  box-shadow:0 1.4rem 2.8rem -1rem rgba(0,0,0,.5);
}
.sgpop[hidden]{ display:none }
.sgpop-h{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:.1rem .15rem .7rem }

.sg-list{ list-style:none; margin:0 0 .2rem; padding:0; display:flex; flex-direction:column }
.sg-row{ display:flex; align-items:center; gap:.5rem; padding:.4rem .15rem; border-bottom:1px solid var(--line-soft) }
.sg-row:last-child{ border-bottom:0 }
.sg-name{ flex:1; min-width:0; font-family:var(--body); font-weight:600; font-size:1.1rem; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sg-chips{ display:flex; gap:.3rem; flex:0 0 auto }
.sg-chip{
  position:relative; font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.01em;
  min-width:1.9rem; padding:.18rem .4rem; border-radius:.42rem;
  border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer;
  transition:color .12s ease, border-color .12s ease, background .12s ease;
}
.sg-chip--1{ color:var(--text) }
.sg-chip:hover{ border-color:var(--accent); color:var(--text) }
.sg-chip.on{ background:var(--accent); border-color:var(--accent); color:#fff }

/* edit mode: each chip becomes a "remove this key" target — × overlays on hover */
.sg-chip-rm{ display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  font-size:1.05rem; line-height:1; border-radius:inherit }
.sg-chip--edit{ border-color:color-mix(in srgb, var(--danger) 55%, var(--line)) }
.sg-chip--edit:hover{ border-color:var(--danger); background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger) }
.sg-chip--edit:hover .sg-chip-k{ opacity:0 }
.sg-chip--edit:hover .sg-chip-rm{ display:flex; color:var(--danger) }

.sg-edit{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:1.7rem; height:1.7rem; border:1px solid transparent; background:none; color:var(--faint);
  cursor:pointer; border-radius:.4rem; transition:color .12s ease, background .12s ease, border-color .12s ease }
.sg-edit svg{ width:1rem; height:1rem }
.sg-edit:hover{ color:var(--text); background:var(--line-soft) }
.sg-edit.on{ color:var(--accent); border-color:var(--accent) }

.sg-empty{ color:var(--muted); font-style:italic; font-size:.92rem; padding:.2rem .15rem .5rem }

/* artist-reference section inside the singers popup */
.sgpop-sec{ border-top:1px solid var(--line); margin-top:.8rem; padding-top:.55rem }
.sg-row--ref .sg-name{ font-weight:400; font-size:.92rem; color:var(--muted) }   /* lighter than singer names */
.ref-ics{ display:flex; gap:.3rem; flex:0 0 auto }
.ref-ic{ display:inline-flex; align-items:center; justify-content:center; width:1.7rem; height:1.7rem;
  border:1px solid var(--line); border-radius:.42rem; background:transparent; color:var(--muted); cursor:pointer;
  text-decoration:none; transition:color .12s ease, border-color .12s ease }
.ref-ic svg{ width:.95rem; height:.95rem }
.ref-ic--spotify:hover{ color:#1DB954; border-color:#1DB954 }
.ref-ic--apple:hover{ color:#FA2D48; border-color:#FA2D48 }
.ref-ic--youtube:hover{ color:#FF3D3D; border-color:#FF3D3D }

.sg-add{ border-top:1px solid var(--line); margin-top:.4rem; padding-top:.6rem }
.sg-add-l{ display:block; font-family:var(--body); font-size:.86rem; color:var(--muted); margin-bottom:.4rem }
.sg-add-l b{ color:var(--accent); font-weight:700 }
/* font-size must be ≥16px or iOS Safari auto-zooms the page when it's focused */
.sg-input{ width:100%; box-sizing:border-box; font-family:var(--body); font-size:16px;
  color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:.5rem;
  padding:.45rem .6rem; outline:none; transition:border-color .15s ease }
.sg-input:focus{ border-color:var(--accent) }
.sg-input::placeholder{ color:var(--faint) }
.sg-add-btns{ display:flex; gap:.4rem; margin-top:.5rem }
.sg-set{
  font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  flex:1; padding:.5rem .6rem; border-radius:.5rem; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  transition:filter .12s ease, background .12s ease;
}
.sg-set:hover{ filter:brightness(1.08) }
.sg-set--2{ flex:0 0 auto; background:transparent; color:var(--accent) }
.sg-set--2:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); filter:none }
.sg-set:focus-visible, .sg-chip:focus-visible, .sg-x:focus-visible, .sg-input:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px }

/* ───────────────────────── Setlists (index + editor) ───────────────────────── */
.hub-actions{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
.hub-new{ font-family:var(--display); font-weight:600; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap; color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:.6rem;
  padding:.5rem .9rem; cursor:pointer; transition:filter .12s ease }
.hub-new:hover{ filter:brightness(1.08) }
.hub-new:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.hub--setlists .ct-head, .hub--setlists .ct-row{ grid-template-columns:minmax(0,1fr) 4.3rem 4rem }
@media (max-width:560px){
  /* phones: drop the songs-count column */
  .hub--setlists .ct-head, .hub--setlists .ct-row{ grid-template-columns:minmax(0,1fr) 4.3rem }
  .hub--setlists .ct-sort[data-sort="count"], .hub--setlists .ct-row .ct-num:last-child{ display:none }
}

/* editor header */
.sl-top{ display:flex; align-items:center; justify-content:space-between; gap:.7rem 1rem; flex-wrap:wrap; margin-bottom:1rem }
.sl-titlewrap{ display:flex; align-items:center; gap:.1rem; min-width:0; flex:1 1 18rem }
.sl-name-input{ flex:1; min-width:0; font-family:var(--display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.6rem,4.5vw,2.6rem); text-transform:uppercase; color:var(--text);
  background:none; border:0; border-bottom:1px solid transparent; padding:.1rem .2rem }
.sl-name-input:hover{ border-bottom-color:var(--line) }
.sl-name-input:focus{ outline:none; border-bottom-color:var(--accent) }
.sl-meta{ display:flex; align-items:center; gap:1rem; flex:0 0 auto }
.sl-date-input{ font-family:var(--body); font-size:.9rem; color:var(--text); background:var(--bg-elev);
  border:1px solid var(--line); border-radius:.5rem; padding:.4rem .55rem }
.sl-date-input:focus{ outline:2px solid var(--accent); outline-offset:1px }
/* compact date trigger (admin) — shows "Jun 29" (no year), opens the native picker */
.sl-date-btn{ font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:none; border:1px solid var(--line); border-radius:.5rem; padding:.46rem .7rem; cursor:pointer;
  transition:color .12s ease, border-color .12s ease }
.sl-date-btn--set{ color:var(--text) }
.sl-date-btn:hover{ color:var(--text); border-color:var(--accent) }
.sl-date-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
/* keep the native input in the render tree (so showPicker can fire) but out of sight */
.sl-date-input--off{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; opacity:0; pointer-events:none }
.sl-date-text{ font-family:var(--display); font-weight:500; font-size:.86rem; letter-spacing:.04em; color:var(--muted) }
.sl-delete{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:none; border:1px solid var(--line); border-radius:.5rem; padding:.42rem .7rem; cursor:pointer }
.sl-delete:hover{ color:var(--danger); border-color:var(--danger) }

/* song rows */
.sl-list{ list-style:none; margin:.4rem 0 0; padding:0 }
.sl-row{ display:flex; align-items:center; gap:.6rem; padding:.55rem .4rem;
  border-bottom:1px solid var(--line-soft); border-radius:.5rem; background:var(--bg) }
.sl-row.dragging{ opacity:.4; pointer-events:none }   /* let elementFromPoint see the row beneath */
.sl-row.drop-before{ box-shadow:inset 0 2px 0 0 var(--accent) }
.sl-row.drop-after{ box-shadow:inset 0 -2px 0 0 var(--accent) }
.sl-grip{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  cursor:grab; border:0; background:none; color:var(--faint); font-size:1.15rem; line-height:1;
  min-width:2.1rem; min-height:2.1rem; padding:.2rem; touch-action:none; -webkit-user-select:none; user-select:none }
.sl-grip:hover{ color:var(--muted) }
.sl-grip:active{ cursor:grabbing }
.sl-idx{ flex:0 0 1.4rem; text-align:left; font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--muted) }
.sl-song{ flex:1 1 8rem; min-width:0; display:flex; flex-direction:column; gap:.02rem }
.sl-name{ font-family:var(--body); font-weight:600; font-size:1.05rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sl-artist{ font-family:var(--body); font-style:italic; font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sl-fields{ display:flex; align-items:flex-end; gap:.5rem; flex:0 0 auto; flex-wrap:wrap }
.sl-f{ display:flex; flex-direction:column; gap:.15rem }
.sl-f-l{ font-family:var(--display); font-weight:500; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding-left:.1rem }
.sl-f select, .sl-f input{ font-family:var(--body); font-size:.9rem; color:var(--text); background:var(--bg-elev);
  border:1px solid var(--line); border-radius:.45rem; padding:.34rem .5rem; cursor:pointer }
.sl-f--sm select{ min-width:3.4rem }
.sl-f--tune select{ min-width:7rem }
.sl-bpm{ width:4.2rem; cursor:text }   /* BPM override; blank = use the song's own */
.sl-f select:focus, .sl-f input:focus{ outline:2px solid var(--accent); outline-offset:1px }
.sl-rowactions{ display:flex; align-items:center; gap:.05rem; flex:0 0 auto }
.sl-move{ border:0; background:none; color:var(--faint); cursor:pointer; font-size:.68rem; line-height:1; padding:.22rem .26rem; border-radius:.3rem }
.sl-move:hover:not(:disabled){ color:var(--text); background:var(--line-soft) }
.sl-move:disabled{ opacity:.3; cursor:default }
.sl-rm{ border:0; background:none; color:var(--faint); cursor:pointer; font-size:1.15rem; line-height:1; padding:.05rem .3rem; border-radius:.35rem }
.sl-rm:hover{ color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, transparent) }

.sl-empty{ color:var(--muted); font-style:italic; padding:1rem .4rem }
.sl-add{ margin-top:1rem }
.sl-add-btn{ width:100%; font-family:var(--display); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); background:none; border:1px dashed color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius:.55rem; padding:.65rem 1rem; cursor:pointer; transition:background .12s ease, border-color .12s ease }
.sl-add-btn:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); border-style:solid }
.sl-add-panel{ margin-top:.5rem; background:var(--bg-elev); border:1px solid var(--line); border-radius:.6rem; overflow:hidden }
.sl-add-panel[hidden]{ display:none }
.sl-add-panel .song-search-bar{ border-bottom:1px solid var(--line) }
.sl-add-panel .song-search-results{ max-height:40vh }

@media (max-width:620px){
  /* grid layout: grip in its own left column (centered, spanning both rows);
     the song title and the fields share column 2, so they left-align */
  .sl-row{
    display:grid; align-items:center; gap:.4rem .6rem;
    grid-template-columns:2.6rem minmax(0,1fr) auto;
    grid-template-areas:
      "grip song actions"
      "grip fields fields";
  }
  .sl-grip{ grid-area:grip; align-self:center; justify-self:center; min-width:0; min-height:0; padding:.3rem }
  .sl-song{ grid-area:song; flex:initial }
  .sl-rowactions{ grid-area:actions }
  /* fields as a 3-col grid: Singer and Tuning take full rows (so long singer
     names get room without squeezing Key/Capo); Key · Capo · BPM share the
     middle row at equal width (BPM keeps its size) */
  .sl-fields{ grid-area:fields; display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:.45rem .5rem; margin-left:0 }
  .sl-f{ min-width:0 }
  .sl-f--singer, .sl-f--tune{ grid-column:1 / -1 }
  .sl-f select, .sl-f input{ width:100% }
  /* touch-friendly reorder controls: drop the index, enlarge + space the
     arrows, and push the delete × clear of them so it isn't hit by accident */
  .sl-row:not(.sl-row--ro) .sl-idx{ display:none }   /* admin rows only; read-only keeps its number column */
  .sl-rowactions{ gap:.5rem }
  .sl-move{ font-size:.95rem; padding:.4rem .55rem }
  .sl-rm{ margin-left:.8rem; font-size:1.3rem; padding:.4rem .55rem }
  /* Print → icon-only so Perform · Print · date · Delete all fit the top row (aria-label keeps it accessible) */
  .sl-print-t{ display:none }
  .sl-print{ gap:0; padding:.46rem .55rem }
}

/* read-only setlist row (public view) — aligned columns: Song · Singer · Capo · Key */
/* each row is its own grid, so the column tracks must be FIXED widths (not
   content-based) — otherwise rows with/without a capo chip size differently and
   the singer/key columns don't line up between rows */
.sl-row--ro{ display:grid; grid-template-columns:1.7rem minmax(0,1fr) 7rem 8rem 3.2rem;
  align-items:center; gap:.4rem .8rem; cursor:default }
/* capo + tuning each get a fixed lane, so the tuning chip stays aligned even
   when a row has no capo chip (scoped to beat the later .sl-col{display:flex}) */
.sl-row--ro .sl-col--capo{ display:grid; grid-template-columns:3.7rem auto; align-items:center; justify-items:start; column-gap:.35rem }
.sl-row--ro .sl-col--capo .sl-rochip--tune{ grid-column:2 }
.sl-row--ro:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent) }
.sl-song-link{ display:flex; min-width:0; text-decoration:none; color:inherit }
.sl-song-link:hover .sl-name{ color:var(--accent) }
.sl-col{ display:flex; align-items:center; min-width:0 }
.sl-col--key{ justify-content:flex-end }     /* key right-aligned at the row's edge */
.sl-col--singer{ font-family:var(--body); font-size:.92rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block }
.sl-rochip{ font-family:var(--display); font-weight:600; font-size:.76rem; letter-spacing:.02em; color:var(--muted);
  border:1px solid var(--line); border-radius:.42rem; padding:.2rem .5rem; white-space:nowrap }
.sl-rochip--key{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)) }

@media (max-width:560px){
  /* phones: drop singer + capo so the song title has room; keep just the key */
  .sl-row--ro{ grid-template-columns:1.5rem minmax(0,1fr) 3rem; gap:.3rem .5rem }
  .sl-row--ro .sl-col--singer, .sl-row--ro .sl-col--capo{ display:none }
}

.sl-perform{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--display); font-weight:600;
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent);
  border:1px solid var(--accent); border-radius:.5rem; padding:.46rem .8rem; cursor:pointer; text-decoration:none;
  transition:filter .12s ease }
.sl-perform:hover{ filter:brightness(1.08) }
.sl-perform:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
/* secondary, outline sibling of Perform — opens the deck straight into print mode */
.sl-print{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--display); font-weight:600;
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:.5rem; padding:.46rem .8rem; cursor:pointer; text-decoration:none;
  transition:color .12s ease, border-color .12s ease }
.sl-print svg{ width:1rem; height:1rem; flex:0 0 auto }
.sl-print:hover{ color:var(--text); border-color:var(--accent) }
.sl-print:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ───────────────────────── Performance deck ───────────────────────── */
.deck-body{ overflow:hidden }
.deck{ position:fixed; inset:0; display:flex; flex-direction:column; background:var(--bg) }

.deck-track{ flex:1; min-height:0; display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; outline:none; scrollbar-width:none }
.deck-track::-webkit-scrollbar{ display:none }
.deck-card{ flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; height:100%; overflow-y:auto;
  padding:1.4rem clamp(1rem,4vw,2.4rem) calc(env(safe-area-inset-bottom) + 3.5rem); box-sizing:border-box }

/* card head — title left, artist + chips opposite (mirrors the single-chart page) */
.deck-cardhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem 1.4rem; flex-wrap:wrap; margin-bottom:2rem }
.deck-songtitle{ font-family:var(--display); font-weight:700; letter-spacing:-.01em; line-height:1.02;
  font-size:clamp(1.7rem,5vw,2.6rem); color:var(--text); margin:0 }
.deck-songinfo{ display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; min-width:0; text-align:right }
.deck-artist{ font-family:var(--body); font-style:italic; font-size:.95rem; color:var(--muted); margin:0 }
.deck-chips{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:flex-end }
.deck-chip{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:.45rem; padding:.26rem .55rem }
.deck-chip--key{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); text-transform:none }
/* singer chip matches the other chips' font + size (no body-font / spacing override) */
/* capo+tune / tempo+time render as one connected unit (like the text-resizer's ± ends).
   The wrapper carries the border + radius, so a lone chip inside still reads as normal;
   two chips share a hairline divider between them. */
.deck-chipgrp{ display:inline-flex; border:1px solid var(--line); border-radius:.45rem; overflow:hidden }
.deck-chipgrp .deck-chip{ border:0; border-radius:0 }
.deck-chipgrp .deck-chip + .deck-chip{ border-left:1px solid var(--line) }
/* live capo/tune toggles: keep the survivor reading as a standalone chip, and hide an emptied group.
   Order is tune→capo, so when tune (first) is hidden, capo (the survivor) drops its divider. */
.deck.tune-off .deck-chipgrp--ct .deck-chip--capo{ border-left:0 }
.deck.capo-off .deck-chipgrp--ct:not(:has(.deck-chip--tune)){ display:none }
.deck.tune-off .deck-chipgrp--ct:not(:has(.deck-chip--capo)){ display:none }
.deck.capo-off.tune-off .deck-chipgrp--ct{ display:none }
/* screen shows the full uppercase tuning name (e.g. D STANDARD); print swaps to the short mixed-case form */
.deck-chip--tune .dc-short{ display:none }   /* print swaps to the arrow form; both render uppercase ("D STD") */

/* two-column toggle mirrors the chart page's #chart.cols */
.deck-chart.cols{ columns:21rem 2; column-gap:2.2rem }
.deck-chart.cols .sec{ break-inside:avoid }


/* ── One-button deck nav ──────────────────────────────────────────── */
/* Single floating pill (bottom-right): shows position counter, tapped to open
   the control sheet. Same glass treatment as the chart floating bar. */
/* The pill: always-visible position counter in the bottom-right corner.
   Fades out as the sheet opens (the counter reappears in the sheet's dk-foot). */
.dk-btn{
  position:fixed; right:max(env(safe-area-inset-right), .75rem); bottom:.75rem;
  z-index:65; width:3.6rem; height:3.6rem; padding:0;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:var(--bar-bg); backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 .1rem 0 rgba(255,255,255,.06) inset,
             0 1.2rem 2.4rem -.7rem rgba(0,0,0,.5),
             0 .3rem .8rem -.4rem var(--bar-shadow);
  font-family:var(--display); font-weight:600; font-size:1rem;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
  cursor:pointer; transition:transform .1s ease, opacity .18s ease }
.dk-btn:active{ transform:scale(.95) }
.dk-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.dk-btn--hidden{ opacity:0; pointer-events:none }
.dk-cur{ color:var(--accent); }
.dk-tot{ color:var(--muted); }

/* Sheet: same width as the chart floating bar; bottom edge aligns with the button
   so the counter in dk-foot occupies the same visual corner. Scales up from
   bottom-right (the button's corner) to give the "pill expands to sheet" feel. */
.dk-sheet{
  position:fixed;
  left:max(env(safe-area-inset-left), .75rem); right:max(env(safe-area-inset-right), .75rem);
  bottom:.75rem;
  max-width:30rem; margin-inline:auto;
  z-index:64;
  background:var(--bg-elev); border-radius:2.2rem;   /* symmetric ≈35px: bottom is concentric with the screen corner, top matches (deck page isn't .floating-ui, so literal not var); shared across breakpoints */
  box-shadow:0 .8rem 2.4rem -.5rem rgba(0,0,0,.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(.06); transform-origin:bottom right;
  transition:opacity .2s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s .24s }
.dk-sheet.open{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity .2s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s }
@media (min-width:768px){
  /* Right-anchor: remove left pin and centering so the sheet grows leftward from #dk-btn.
     Explicit width so the sheet fills to a comfortable desktop size (not content-shrunk).
     Keeps the shared 2.2rem radius (set on the base rule) for cross-breakpoint consistency. */
  .dk-sheet{ left:auto; margin-inline:0; width:30rem; max-width:calc(100vw - 1.5rem) }
}
.dk-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.75rem 1rem .6rem; border-bottom:1px solid var(--line) }
.dk-title{
  font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap }
.dk-close{
  flex:0 0 auto; width:1.8rem; height:1.8rem; display:grid; place-items:center;
  border:0; border-radius:.4rem; background:transparent; color:var(--muted);
  cursor:pointer; transition:color .15s ease }
.dk-close:hover{ color:var(--text) }
.dk-close svg{ width:1rem; height:1rem }
.dk-body{ padding:.75rem 1rem 1rem; display:flex; flex-direction:column; gap:.75rem }

/* 4 toggle tiles — icon + label, 2×2 grid */
.dk-toggles{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem }
.dk-tog{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; padding:.65rem .2rem; min-height:3.5rem;
  border:1px solid var(--line); border-radius:.6rem;
  background:var(--bg); color:var(--text); cursor:pointer;
  font-family:var(--display); font-weight:500; font-size:.68rem; letter-spacing:.02em;
  transition:border-color .15s ease, color .15s ease, background .15s ease }
.dk-tog svg{ width:1.1rem; height:1.1rem }
.dk-tog:hover{ border-color:var(--accent); color:var(--accent) }
.dk-tog:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.dk-tog.on{
  border-color:transparent; color:var(--accent-ink); font-weight:700;
  background:linear-gradient(180deg, var(--accent), var(--accent-2)) }
.dk-tog.on svg{ color:var(--accent-ink) }
/* chords icon swap: ic-on shown normally, ic-off shown when .off */
#deck-chords .ic-off{ display:none }
#deck-chords.off .ic-on{ display:none }
#deck-chords.off .ic-off{ display:block }
#deck-chords.off{ color:var(--faint) }

/* middle row: font stepper on left, prev/next on right */
.dk-mid-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem }
.dk-fontgrp{ display:flex; gap:.3rem; align-items:center; flex:0 0 auto }
.dk-fstep{
  width:2.5rem; height:2.5rem; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:.6rem;
  background:var(--bg); color:var(--text); cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:1.2rem; line-height:1;
  transition:border-color .15s ease, color .15s ease, transform .1s ease }
.dk-fstep--val{ width:3.4rem; font-size:.88rem; color:var(--muted) }
.dk-aa-sm{ font-size:.68em; vertical-align:baseline }   /* small A in the AA size indicator */
.dk-fstep:hover{ border-color:var(--accent); color:var(--accent) }
.dk-fstep:active{ transform:scale(.94) }
.dk-fstep:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.dk-navgrp{ display:flex; gap:.4rem; flex:0 0 auto }
.dk-nav{
  height:2.5rem; padding:0 .75rem; display:flex; align-items:center; justify-content:center; gap:.3rem;
  border:1px solid var(--line); border-radius:.6rem;
  background:var(--bg); color:var(--text); cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:.88rem;
  transition:border-color .15s ease, color .15s ease, opacity .15s ease }
.dk-nav svg{ width:.85rem; height:.85rem }
.dk-nav:hover:not(:disabled){ border-color:var(--accent); color:var(--accent) }
.dk-nav:active:not(:disabled){ transform:scale(.97) }
.dk-nav:disabled{ opacity:.28; cursor:default }
.dk-nav:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* footer row: Leave on left, counter on right — same height as the pill button
   so the counter stays in its corner as the sheet scales up from it */
/* footer row — height matches button so counter lands in the exact same spot */
.dk-foot{
  display:flex; justify-content:space-between; align-items:center;
  height:3.6rem; padding:0 0 0 1rem;
  border-top:1px solid var(--line) }
.dk-leave{
  border:0; background:none; color:var(--muted); cursor:pointer; padding:0;
  font-family:var(--display); font-weight:500; font-size:.82rem;
  transition:color .15s ease }
.dk-leave:hover{ color:var(--text) }
.dk-leave:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:.3rem }
/* 3.6rem × 3.6rem cell — exact mirror of the button — counter appears in the same corner */
#dk-foot-counter{
  width:3.6rem; height:3.6rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; white-space:nowrap;
  font-family:var(--display); font-weight:600; font-size:1rem;
  font-variant-numeric:tabular-nums; letter-spacing:.01em }

/* two-column layout is pointless on a phone-width chart — match floating-bar.css rule */
@media (max-width: 600px) { #deck-cols { opacity:.4; pointer-events:none } }

/* keep capo/tune chip visibility in sync with their toggles */
.deck.capo-off .deck-chip--capo{ display:none }
.deck.tune-off .deck-chip--tune{ display:none }

.deck-empty{ margin:auto; color:var(--muted); font-style:italic; text-align:center; padding:2rem }
.deck-empty a{ color:var(--accent) }
.deck-scratch{ position:fixed; left:-200vw; top:0; visibility:hidden; pointer-events:none }

@media (max-width:700px){
  /* stack the card head on mobile: title, then chips below it; hide artist */
  .deck-cardhead{ flex-direction:column; align-items:flex-start; gap:.55rem }
  .deck-artist{ display:none }
  .deck-songinfo{ align-items:flex-start; text-align:left }
  .deck-chips{ justify-content:flex-start }
}

/* ───────────────────────── Admin gating ─────────────────────────
   Edit affordances are hidden for everyone except a signed-in admin
   (body.is-admin). Default-hidden so they never flash for the public. */
body:not(.is-admin) .home-import,
body:not(.is-admin) .menu-accent,
body:not(.is-admin) #edit-song,
body:not(.is-admin) #new-setlist,
body:not(.is-admin) .sl-add,
body:not(.is-admin) #sl-delete { display: none !important; }

.home-foot{ text-align:center; padding:1.5rem 0 2.5rem }
.home-signin{ font-family:var(--display); font-weight:500; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); background:none; border:0; cursor:pointer; padding:.5rem .8rem; border-radius:.7rem; transition:color .15s ease }
.home-signin:hover{ color:var(--muted) }
.home-signin:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
body.is-admin .home-signin{ color:var(--accent) }

/* ───────────────────────── Homepage ─────────────────────────
   Built to live in the same family as the floating bar + sheets: lifted bg-elev
   control surfaces, soft rounded corners, the layered floating shadow, accent-glow
   focus, the signature orange gradient on press (exactly how keys/toggles feel in
   the app), and a staggered bottom-up rise on load (echoing how the sheets rise
   from the bar). */
.home-top{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem clamp(1rem,4vw,2rem) }
.home-brand{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--text) }
.home-brand svg{ width:1.55rem; height:1.55rem; color:var(--accent) }
.home-brand span{ font-family:var(--display); font-weight:600; font-size:1.08rem; letter-spacing:.02em }

.home{ width:min(92%,56rem); margin:0 auto; padding:clamp(1.8rem,6vw,3.6rem) 0 3rem }
.home-hero{ text-align:center; margin-bottom:clamp(1.5rem,3.6vw,2.1rem) }
.home-h1{ font-family:var(--display); font-weight:700; letter-spacing:-.022em; line-height:1.0;
  font-size:clamp(2.5rem,8vw,4.2rem); color:var(--text); margin:0 }
.home-h1 em{ font-style:normal; color:var(--accent) }
.home-sub{ font-family:var(--body); font-size:clamp(1rem,2.3vw,1.16rem); color:var(--muted);
  line-height:1.55; max-width:32rem; margin:1.1rem auto 0 }

/* Search — the primary action, a lifted control surface like a sheet */
.home-search{ position:relative; max-width:33rem; margin:0 auto; text-align:left }
.home-search-bar{ display:flex; align-items:center; gap:.75rem; padding:.95rem 1.2rem; background:var(--bg-elev);
  border:1px solid var(--line); border-radius:1.6rem; box-shadow:0 .7rem 1.8rem -1rem rgba(0,0,0,.5);
  transition:border-color .18s ease, box-shadow .18s ease }
.home-search:focus-within .home-search-bar{ border-color:color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow:0 .8rem 2.2rem -.7rem color-mix(in srgb, var(--accent) 42%, transparent) }
.home-search-bar svg{ width:1.2rem; height:1.2rem; color:var(--muted); flex:0 0 auto; transition:color .18s ease }
.home-search:focus-within .home-search-bar svg{ color:var(--accent) }
.home-search-bar input{ flex:1; min-width:0; border:0; background:none; color:var(--text); font-family:var(--body); font-size:1.05rem; outline:none }
.home-search-bar input::placeholder{ color:var(--faint) }
.home-search-bar input::-webkit-search-cancel-button{ -webkit-appearance:none; display:none }
.home-results{ position:absolute; left:0; right:0; top:calc(100% + .5rem); z-index:10; list-style:none; margin:0; padding:.4rem;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:1.2rem; box-shadow:0 1.2rem 2.8rem -.9rem rgba(0,0,0,.55); max-height:50vh; overflow-y:auto }
.home-results[hidden]{ display:none }
.home-res{ display:flex; flex-direction:column; gap:.05rem; padding:.6rem .8rem; border-radius:.85rem; text-decoration:none; color:var(--text) }
.home-res:hover{ background:color-mix(in srgb, var(--accent) 13%, transparent) }
.home-res-t{ font-family:var(--body); font-weight:600; font-size:1rem }
.home-res-a{ font-family:var(--body); font-style:italic; font-size:.82rem; color:var(--muted) }
.home-res-empty{ color:var(--muted); font-style:italic; padding:.65rem .8rem }

/* Section tiles — lifted cards that behave like the app's controls:
   hover lifts to an accent border; press fills with the signature gradient. */
.home-hubs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,1.7vw,1rem); margin-top:clamp(1.5rem,4vw,2.2rem) }
.home-hub{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.65rem;
  text-decoration:none; color:var(--text); background:var(--bg-elev); border:1px solid var(--line);
  border-radius:1.6rem; padding:1.35rem 1.35rem 1.2rem; box-shadow:0 .6rem 1.6rem -1rem rgba(0,0,0,.5);
  transition:transform .16s cubic-bezier(.22,.61,.36,1), border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease }
.home-hub:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow:0 1rem 2.4rem -.7rem color-mix(in srgb, var(--accent) 40%, transparent) }
.home-hub:hover .home-hub-ic{ background:color-mix(in srgb, var(--accent) 22%, transparent) }
.home-hub:active{ transform:translateY(-1px);
  background:linear-gradient(180deg, var(--accent), var(--accent-2)); border-color:transparent; color:var(--accent-ink) }
.home-hub:active .home-hub-ic{ background:color-mix(in srgb, var(--accent-ink) 14%, transparent); color:var(--accent-ink) }
.home-hub:active .home-hub-count{ color:var(--accent-ink); opacity:.78 }
.home-hub:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.home-hub-ic{ display:inline-flex; width:2.7rem; height:2.7rem; flex:0 0 auto; align-items:center; justify-content:center;
  border-radius:.9rem; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent);
  transition:background .16s ease, color .16s ease }
.home-hub-ic svg{ width:1.4rem; height:1.4rem }
.home-hub-name{ font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:.01em; margin-top:.15rem }
.home-hub-count{ font-family:var(--display); font-weight:500; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); transition:color .16s ease }

.home-import{ display:block; margin:clamp(1.6rem,4vw,2.4rem) auto 0; text-align:center; width:100%;
  font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); text-decoration:none; padding:.4rem }
.home-import:hover{ text-decoration:underline }

/* Bottom-up rise on load — echoes the sheets rising from the bar. fill-mode
   'backwards' applies the start state during the stagger delay (no pre-flash) but
   does NOT hold the end transform, so :hover / :active transforms still work. */
@keyframes home-rise{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.home-hero{   animation:home-rise .55s cubic-bezier(.22,.61,.36,1) backwards }
.home-search{ animation:home-rise .55s cubic-bezier(.22,.61,.36,1) .07s backwards }
.home-hub{    animation:home-rise .55s cubic-bezier(.22,.61,.36,1) backwards }
.home-hub:nth-child(1){ animation-delay:.13s }
.home-hub:nth-child(2){ animation-delay:.19s }
.home-hub:nth-child(3){ animation-delay:.25s }
.home-import{ animation:home-rise .55s cubic-bezier(.22,.61,.36,1) .3s backwards }
@media (prefers-reduced-motion:reduce){
  .home-hero, .home-search, .home-hub, .home-import{ animation:none }
}

/* desktop / tablet: fill the viewport, vertically center the content, footer at bottom */
@media (min-width:621px){
  /* zero the body's bottom-bar reserve (there's no fixed bar on the homepage) so
     the footer can reach the bottom edge */
  .home-body{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; padding-bottom:0 }
  .home{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; padding:2rem 0 4rem }
  .home-foot{ padding:1.5rem 0 2.75rem }
  /* desktop cards: icon top-left + count top-right (mirrored), name anchoring below —
     uses the card's width instead of stacking everything on the left */
  .home-hub{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic count" "name name";
    align-items:center; row-gap:1rem; column-gap:.6rem; padding:1.4rem }
  .home-hub-ic{ grid-area:ic }
  .home-hub-count{ grid-area:count; justify-self:end }
  .home-hub-name{ grid-area:name; margin-top:0 }
}

/* mobile: section tiles become full-width tactile rows (icon · name · count) */
@media (max-width:620px){
  .home-hubs{ grid-template-columns:1fr; gap:.7rem }
  .home-hub{ flex-direction:row; align-items:center; gap:1rem; padding:1.05rem 1.2rem }
  .home-hub-name{ margin-top:0; flex:1; font-size:1.2rem }
  .home-hub-count{ flex:0 0 auto }
}

/* ── iOS/touch: 16px floor on text fields so Safari never zooms on focus ──────
   Mobile Safari (and iPadOS) zooms the whole page whenever a focused text-entry
   field is under 16px. Scoped to coarse pointers so desktop (mouse) sizing is
   untouched — notably the editor's compact mono source areas. This only raises
   fields that were below 16px; larger fields (setlist-name, etc.) keep theirs.
   .sg-input is already 16px globally; .song-/.home-/.nav-search inputs are ≥16px. */
@media (pointer: coarse) {
  .hub-search input,
  .ed-input input, .ed-input textarea,
  #ed-paste, #ed-source,
  .sl-date-input { font-size: 16px; }
}

/* ───────────────────────── Print options dialog ───────────────────────── */
.pdlg{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); padding:1rem }
.pdlg[hidden]{ display:none }
.pdlg-card{ width:min(22rem,100%); background:var(--bg-elev); border:1px solid var(--line);
  border-radius:.9rem; padding:1.3rem 1.3rem 1.1rem; box-shadow:0 1.5rem 3rem -1rem rgba(0,0,0,.55) }
.pdlg-h{ font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:-.01em; margin-bottom:1rem }
.pdlg-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.85rem }
.pdlg-l{ font-family:var(--display); font-weight:500; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted) }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:.5rem; overflow:hidden; background:var(--bg) }
.seg-b{ font-family:var(--display); font-weight:600; font-size:.85rem; padding:.42rem .85rem; min-width:2.6rem;
  border:0; background:transparent; color:var(--muted); cursor:pointer; transition:background .15s ease, color .15s ease }
.seg-b + .seg-b{ border-left:1px solid var(--line) }
.seg-b.on{ background:var(--accent); color:var(--accent-ink) }
.seg-b:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }
.pdlg-note{ font-family:var(--body); font-size:.82rem; color:var(--muted); margin-top:.2rem }
.pdlg-actions{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.2rem }
.pdlg-btn{ font-family:var(--display); font-weight:600; font-size:.85rem; letter-spacing:.02em;
  padding:.55rem 1.1rem; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  border-radius:.5rem; cursor:pointer; transition:filter .15s ease }
.pdlg-btn:hover{ filter:brightness(1.06) }
.pdlg-btn--ghost{ background:transparent; color:var(--muted); border-color:var(--line) }
.pdlg-btn--ghost:hover{ filter:none; color:var(--text); border-color:var(--accent) }

/* Off-screen measurement state for deck.js autoColumnsForPrint(): forces the
   exact print layout (16px lyrics, desktop rhythm, single print-column width,
   gutter layout) so the 2-column decision is identical on phone, tablet, and
   desktop — it can never be swayed by the current screen width. Mirrors the
   @media print rules below. */
.deck-chart.print-measure{ width:725px !important; columns:1 !important }
.deck-chart.print-measure .sec-body{ font-size:16px !important; line-height:1.45 !important; grid-column:2 !important; grid-row:1 !important }
.deck-chart.print-measure .sec-label{ grid-column:1 !important; grid-row:1 !important }
.deck-chart.print-measure .sec{ grid-template-columns:1.3rem minmax(0,1fr) !important; column-gap:.4rem !important; margin-bottom:1.3rem !important }
.deck-chart.print-measure .sec + .sec{ padding-top:0 !important }
.deck-chart.print-measure .chord{ margin-bottom:1.1em !important }
.deck-chart.print-measure .cn{ top:-2.25em !important; transform:none !important }

/* ───────────────────────── Print ───────────────────────── */
@media print {
  /* clean white page; chords keep the site orange */
  *{ transition:none !important; animation:none !important }   /* no fades in the print render */
  html, body, .deck-body{ background:#fff !important }
  body{ color:#000 !important; padding:0 !important; min-height:0 !important }
  /* NOTE: don't force background printing page-wide (print-color-adjust:exact on
     body) — Safari then paints the dark screen background onto the page. Scope it
     to the chord text below so the orange ink survives without dark backgrounds. */
  header.top, .bar, .bar-sheet, .bar-sheet-scrim, .refs, #refs, .sgpop, .song-search, #menu, .pdlg,
  .cd-pop, .cd-scrim, .cd-grid, .cd-grid-head,
  .dk-btn, .dk-sheet, .deck-dots,
  #nav-mount{ display:none !important }
  @page{ margin:7mm 12mm 10mm }                    /* title sits higher on the page */

  /* single chart page */
  .wrap{ width:100% !important; min-height:0 !important; overflow:visible !important; margin:0 !important }
  #chart{ padding:1.4rem 0 0 !important }          /* breathing room under the title row */
  .song-head{ padding:0 0 .45rem !important; border-bottom:1px solid #999 !important; break-after:avoid }
  .song-title{ color:#000 !important }
  .song-artist{ color:#222 !important; font-size:.82rem !important }
  /* chart meta now uses deck chips (printed via the .deck-chip rules below); this
     only covers the editor preview's bare spans should it ever be printed */
  .meta > span:not([class*="deck-"]){ color:#222 !important; border-color:#bbb !important; font-size:.6rem !important; padding:.18rem .42rem !important }
  /* tighter gutter + smaller section labels, dropped to the lyric row */
  .sec{ grid-template-columns:1.3rem minmax(0,1fr) !important; column-gap:.4rem !important; margin-bottom:1.3rem !important }
  .sec + .sec{ padding-top:0 !important }     /* desktop section spacing; the ≤640 padding tweak must not leak into print */
  /* force the gutter layout in print — otherwise the mobile stacked rule
     (.sec-body{grid-column:1}) drops the lyrics into the tiny label column */
  .sec-label{ grid-column:1 !important; grid-row:1 !important; color:#444 !important; font-size:.6rem !important; padding-top:1.2rem !important }
  .sec-body{ grid-column:2 !important; grid-row:1 !important }
  .sec--chords .sec-label{ padding-top:.1rem !important }
  .line{ color:#000 !important }
  .cn, .cn--inline{ color:#A85A0A !important; -webkit-print-color-adjust:exact; print-color-adjust:exact }   /* chords keep the site's orange on white */
  .cn{ transform:none !important; top:-2.25em !important }   /* drop the edge clamp; use the desktop chord-row offset */
  .chord{ margin-bottom:1.1em !important }          /* desktop chord-row reservation (the ≤1024 tweak must not leak into print) */
  .sec, .line{ break-inside:avoid }

  /* performance deck → each song on its own page */
  .deck, .deck-track{ display:block !important; height:auto !important; max-height:none !important;
    overflow:visible !important; transform:none !important; position:static !important; background:#fff !important }
  .deck-card{ display:block !important; width:100% !important; min-width:0 !important; height:auto !important;
    padding:0 !important; background:#fff !important; break-after:page; page-break-after:always }
  .deck-card:last-child{ break-after:auto; page-break-after:auto }
  .deck-cardhead{ break-after:avoid; margin-bottom:1.4rem !important }   /* space under the title row */
  .deck-songtitle{ font-size:1.7rem !important }
  .deck-songtitle, .deck-songinfo, .deck-artist, .deck-chip, .deck-chipgrp{ color:#000 !important; border-color:#bbb !important }
  .deck-chipgrp .deck-chip + .deck-chip{ border-left-color:#bbb !important }   /* divider matches the print border */
  .deck-chip--tune .dc-long{ display:none !important }            /* print: streamlined "↓ B Std" */
  .deck-chip--tune .dc-short{ display:inline !important }
  .deck-artist{ font-size:.8rem !important }
  .deck-chip{ font-size:.62rem !important; padding:.18rem .42rem !important }
  .deck-scratch{ display:none !important }

  /* fixed, page-friendly lyric size (the on-screen scale is an inline style, so
     override the rendered text directly rather than the --lyric vars) */
  .sec-body{ font-size:16px !important; line-height:1.45 !important }   /* fixed size + desktop rhythm on every device */

  /* columns. Chart page: the print dialog's 1/2 choice. Deck/setlist: auto —
     deck.js adds .print-cols to any song too tall for one page. */
  #chart, #chart.cols{ columns:1 !important }
  body.print-cols-2 #chart{ columns:2 !important; column-gap:10px !important }
  .deck-chart{ columns:1 !important }                              /* ignore the on-screen perform 2-col toggle */
  .deck-chart.print-cols{ columns:2 !important; column-gap:10px !important }
  /* chords. Chart page: the dialog's show/hide (decoupled from the screen
     toggle). Deck/setlist: follows the deck's own chord state. */
  body.print-no-chords .chord{ display:none !important }
  body.print-no-chords .line--chords, body.print-no-chords .sec--chords{ display:none !important }
  body:not(.deck-body).hide-chords .chord{ display:inline !important }
  body:not(.deck-body).hide-chords .line--chords, body:not(.deck-body).hide-chords .sec--chords{ display:block !important }
}