/* 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: 2.1rem;
    --lyric-px: 20px;
    --bar-h: 4.4rem;
  }
  /* smaller lyric/chord text on phones (matches the old site's mobile reduction) */
  @media (max-width:768px){ :root{ --lyric-px: 17px; } }
  /* ── THEMES ──────────────────────────────────────────────────── */
  :root[data-theme="dark"]{
    --bg:#17181A; --bg-elev:#212328;
    --text:#E7E8EA; --muted:#9A9DA3; --faint:#5F6268;
    --accent:#4D9BFF; --accent-2:#2E7BE0; --accent-ink:#0B1220;
    --danger:#FF6B6B;
    --line:rgba(231,232,234,.13); --line-soft:rgba(231,232,234,.07);
    --bar-bg:rgba(23,24,26,.86);
  }
  :root[data-theme="light"]{
    --bg:#FFFFFF; --bg-elev:#F2F3F5;
    --text:#252525; --muted:#6A6E76; --faint:#A6AAB2;
    --accent:#0069EA; --accent-2:#0055C4; --accent-ink:#FFFFFF;
    --danger:#D92D20;
    --line:rgba(37,37,37,.14); --line-soft:rgba(37,37,37,.07);
    --bar-bg:rgba(255,255,255,.88);
  }

  *{box-sizing:border-box; margin:0; padding:0}
  html{-webkit-text-size-adjust:100%}
  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}

  /* ── 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);
    border-bottom:1px solid var(--line); transition:transform .3s ease;
  }
  body.nav-hidden header.top{ transform:translateY(-100%) }
  body.nav-hidden .bar{ transform:translateY(100%) }
  /* 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:.95rem; 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}
  /* 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;
    margin-top:.25rem; border-top:1px solid var(--line); padding:.65rem .7rem .5rem;
    font-family:var(--display); font-weight:500; font-size:.95rem; color:var(--text);
  }
  .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}
  .tbtn--sz b{font-size:1.02rem}
  .fontgrp{display:flex; border:1px solid var(--line); border-radius:.5rem; overflow:hidden; background:var(--bg-elev)}
  .fontgrp .tbtn{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.4rem; height:2.4rem }
    .tbtn{ height:2.4rem; min-width:2.4rem; padding:0 .5rem }
    .tbtn svg, .iconbtn svg{ width:1.12rem; height:1.12rem }
    .tools{ gap:.4rem }
    .nav-left{ gap:.4rem }
  }
  @media (max-width:410px){
    header.top{ gap:.3rem; padding:.55rem .55rem }
    .iconbtn{ width:2.2rem; height:2.2rem }
    .tbtn{ height:2.2rem; min-width:2.2rem; padding:0 .34rem }
    .tools{ gap:.3rem }
    .nav-left{ gap:.3rem }
  }
  .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:.4rem 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;
  }
  .meta span{padding:.26rem .55rem; border:1px solid var(--line); border-radius:.35rem; color:var(--muted)}
  .meta span:first-child{color:var(--text); border-color:color-mix(in srgb, var(--accent) 45%, transparent)}

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

  .sec{
    display:grid; grid-template-columns:var(--gutter) minmax(0,1fr);
    column-gap:.7rem; margin-bottom:1.3rem;
  }
  .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(--accent);
    transition:transform .24s cubic-bezier(.2,.8,.25,1), opacity .24s ease;
  }
  .cn.swap{ transform:translateY(-.3em); opacity:0; }

  /* 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; }
  .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(--accent);
    transition:transform .24s cubic-bezier(.2,.8,.25,1), opacity .24s ease;
  }

  /* 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));
    padding-bottom:calc(env(safe-area-inset-bottom) / 2);   /* buttons read centered, still clears the home indicator */
    background:var(--bar-bg); backdrop-filter:blur(16px) saturate(1.2);
    border-top:1px solid var(--line); display:flex; align-items:center;
    transition:transform .3s ease;
  }
  .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}
    /* when the artist + meta wrap under the title, align them left */
    .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:var(--accent) !important; }
.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 }
.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{
  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 .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 */
/* reserve the arrow slot always, so sorting never changes a button's width */
.ct-sort::after{ content:attr(data-arrow); display:inline-block; width:.8em; margin-left:.1em; text-align:center }
.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 .4rem }
  .ct-name{ font-size:1.08rem }
  .hub-search input{ min-width:8rem }
}

/* capo control (bottom bar) */
.capo{ display:flex; align-items:center; gap:.25rem; flex:0 0 auto }
.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); margin-right:.15rem }
.capo-btn, .capo-auto{
  height:1.9rem; 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:1.7rem; font-size:1.05rem; line-height:1 }
.capo-auto{ width:1.9rem }
.capo-auto svg{ width:1rem; height:1rem }
.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 }
.capo-n{ font-family:var(--display); font-weight:700; font-size:.95rem; min-width:1rem;
  text-align:center; color:var(--muted) }
.capo.on .capo-n{ color:var(--accent) }
.capo-shape{ font-family:var(--display); font-weight:600; font-size:.82rem; color:var(--accent);
  margin-left:.2rem; white-space:nowrap }
.bar-div{ width:1px; height:1.6rem; background:var(--line); margin:0 .55rem; flex:0 0 auto }
@media (max-width:640px){
  .capo-lbl, .capo-shape{ display:none }
  .bar-div{ margin:0 .35rem }
}

/* 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 .55rem }

.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: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 }

.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 }
.sg-input{ width:100%; box-sizing:border-box; font-family:var(--body); font-size:.95rem;
  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 }
.tbtn.on{ border-color:var(--accent); color:var(--accent) }

/* ───────────────────────── 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:.6rem; 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 }
.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 }
.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; cursor:grab; border:0; background:none; color:var(--faint); font-size:1.05rem; line-height:1; padding:.2rem .1rem }
.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{ 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 select: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){
  .sl-row{ flex-wrap:wrap }
  .sl-fields{ flex:1 1 100%; order:3; margin-left:1.6rem }
  .sl-f{ flex:1 1 auto }
  .sl-f select{ width:100% }
}

/* read-only setlist row (public view) — aligned columns: Song · Singer · Capo · Key */
.sl-row--ro{ display:grid; grid-template-columns:1.7rem minmax(0,1fr) minmax(4rem,11rem) 4.4rem 3.2rem;
  align-items:center; gap:.4rem .8rem; cursor:default }
.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:#fff; 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 }

/* ───────────────────────── 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) 2rem; 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 }
.deck-chip--singer{ text-transform:none; letter-spacing:0; font-family:var(--body); font-weight:600 }

/* 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 }

/* progress dots — in-flow row just above the bar */
.deck-dots{ flex:0 0 auto; display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; padding:.5rem .6rem }
.deck-dot{ width:.55rem; height:.55rem; border-radius:50%; border:0; padding:0; background:var(--faint); opacity:.5;
  cursor:pointer; transition:opacity .15s ease, background .15s ease, transform .15s ease }
.deck-dot:hover{ opacity:.85 }
.deck-dot.on{ background:var(--accent); opacity:1; transform:scale(1.15) }

/* control bar — fixed at the BOTTOM on desktop/tablet */
.deck-bar{ flex:0 0 auto; display:flex; align-items:center; gap:.8rem;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg-elev) }
.deck-handle{ display:none }
.deck-leave{ display:none }   /* mobile sheet only — exit performance */
.deck-exit{ display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; flex:0 0 auto;
  border:1px solid var(--line); border-radius:.5rem; color:var(--muted); background:none; cursor:pointer }
.deck-exit svg{ width:1.1rem; height:1.1rem }
.deck-exit:hover{ color:var(--text); border-color:var(--accent) }
.deck-title{ flex:1; min-width:0; font-family:var(--display); font-weight:600; font-size:1rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.deck-toolbar{ display:flex; align-items:center; gap:.4rem; flex:0 0 auto }
.deck-counter{ font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--muted); font-variant-numeric:tabular-nums; margin-right:.25rem }
.deck-tbtn{ display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; flex:0 0 auto;
  border:1px solid var(--line); border-radius:.5rem; background:var(--bg-elev); color:var(--muted); cursor:pointer;
  transition:color .12s ease, border-color .12s ease, opacity .12s ease }
.deck-tbtn svg{ width:1.15rem; height:1.15rem }
/* font group matches the single-chart top nav (merged segments) */
.deck-fontgrp{ display:flex; align-items:center; flex:0 0 auto; border:1px solid var(--line); border-radius:.5rem; overflow:hidden; background:var(--bg-elev) }
.deck-fontgrp .deck-tbtn{ border:0; border-radius:0; background:transparent }
.deck-fontgrp .deck-tbtn + .deck-tbtn{ border-left:1px solid var(--line) }
.deck-tbtn--txt{ font-family:var(--display); font-weight:600; font-size:.95rem }
.deck-counter{ display:none }   /* position is shown by the dots */
.deck-tbtn:hover:not(:disabled){ color:var(--text); border-color:var(--accent) }
.deck-tbtn:disabled{ opacity:.32; cursor:default }
.deck-tbtn.on{ color:var(--accent); border-color:var(--accent) }
.deck-tbtn.off{ color:var(--faint) }
#deck-chords .ic-off{ display:none }
#deck-chords.off .ic-on{ display:none }
#deck-chords.off .ic-off{ display:inline }
.deck.capo-off .deck-chip--capo{ display:none }

/* mobile grid FAB → opens the control sheet (hidden on desktop) */
.deck-fab{ display:none; position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:25;
  width:3.2rem; height:3.2rem; border-radius:50%; border:0; background:var(--accent); color:#fff; cursor:pointer;
  align-items:center; justify-content:center; box-shadow:0 .6rem 1.4rem -.4rem rgba(0,0,0,.5) }
.deck-fab svg{ width:1.4rem; height:1.4rem }

.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){
  .deck-fab{ display:flex }
  .deck-card{ padding-bottom:5rem }            /* clear the floating FAB */
  /* the bar becomes a bottom-sheet the FAB slides up */
  .deck-bar{ position:fixed; left:0; right:0; bottom:0; z-index:30; flex-wrap:wrap; justify-content:center; gap:.6rem;
    border-radius:1.1rem 1.1rem 0 0; box-shadow:0 -1rem 2.4rem -.6rem rgba(0,0,0,.55);
    padding:1.5rem 1rem calc(1.3rem + env(safe-area-inset-bottom));
    transform:translateY(120%); transition:transform .25s ease }
  .deck.sheet-open .deck-bar{ transform:translateY(0) }
  .deck-handle{ display:block; position:absolute; top:.5rem; left:50%; transform:translateX(-50%);
    width:2.4rem; height:.3rem; padding:0; border:0; border-radius:.3rem; background:var(--line); cursor:pointer }
  .deck-title{ flex:1 1 100%; text-align:center; order:-1; margin-top:.3rem }
  .deck-exit{ position:absolute; top:.7rem; right:.8rem }     /* closes the sheet on mobile */
  .deck-toolbar{ flex:1 1 100%; justify-content:center; gap:.8rem }
  .deck-tbtn{ width:2.7rem; height:2.7rem }
  .deck-counter{ font-size:1rem }
  #deck-cols{ display:none }                                  /* columns are unnecessary on mobile */
  /* stack the head: title, then key/capo/singer on the row beneath 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 }
  .deck-leave{ display:block; flex:1 1 100%; margin-top:.2rem; padding:.55rem; text-align:center;
    font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); background:none; border:0; border-top:1px solid var(--line); cursor:pointer }
  .deck-leave:hover{ color:var(--text) }
}

/* ───────────────────────── 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:.4rem .6rem; border-radius:.4rem; transition:color .15s ease }
.home-signin:hover{ color:var(--muted) }
body.is-admin .home-signin{ color:var(--accent) }

/* ───────────────────────── Homepage ───────────────────────── */
.home-top{ display:flex; align-items:center; justify-content:space-between; padding: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.5rem; height:1.5rem; color:var(--accent) }
.home-brand span{ font-family:var(--display); font-weight:600; font-size:1.05rem; letter-spacing:.01em }

.home{ width:92%; max-width:880px; margin:0 auto; padding:clamp(2rem,7vw,4.5rem) 0 4rem }
.home-hero{ text-align:center; margin-bottom:clamp(2rem,5vw,3.2rem) }
.home-h1{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(2.6rem,8vw,4.6rem); 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.4vw,1.18rem); color:var(--muted);
  line-height:1.55; max-width:34rem; margin:1rem auto 0 }

.home-search{ position:relative; max-width:32rem; margin:1.8rem auto 0; text-align:left }
.home-search-bar{ display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; background:var(--bg-elev);
  border:1px solid var(--line); border-radius:.8rem; transition:border-color .15s ease, box-shadow .15s ease }
.home-search:focus-within .home-search-bar{ border-color:var(--accent);
  box-shadow:0 .4rem 1.4rem -.6rem color-mix(in srgb, var(--accent) 55%, transparent) }
.home-search-bar svg{ width:1.15rem; height:1.15rem; color:var(--muted); flex:0 0 auto }
.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% + .4rem); z-index:10; list-style:none; margin:0; padding:.3rem;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:.7rem; box-shadow:0 1.2rem 2.4rem -1rem rgba(0,0,0,.45); max-height:50vh; overflow-y:auto }
.home-results[hidden]{ display:none }
.home-res{ display:flex; flex-direction:column; gap:.02rem; padding:.55rem .7rem; border-radius:.45rem; text-decoration:none; color:var(--text) }
.home-res:hover{ background:color-mix(in srgb, var(--accent) 12%, 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:.6rem .7rem }

.home-hubs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,2vw,1.1rem) }
.home-hub{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; text-decoration:none; color:var(--text);
  background:var(--bg-elev); border:1px solid var(--line); border-radius:.9rem; padding:1.2rem 1.2rem 1.1rem;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease }
.home-hub:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 50%, var(--line));
  box-shadow:0 .9rem 2rem -.8rem color-mix(in srgb, var(--accent) 42%, transparent) }
.home-hub:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.home-hub-ic{ display:inline-flex; width:2.4rem; height:2.4rem; align-items:center; justify-content:center;
  border-radius:.6rem; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent) }
.home-hub-ic svg{ width:1.35rem; height:1.35rem }
.home-hub-name{ font-family:var(--display); font-weight:600; font-size:1.25rem; letter-spacing:.01em; margin-top:.2rem }
.home-hub-count{ font-family:var(--display); font-weight:500; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint) }

.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 }
.home-import:hover{ text-decoration:underline }

@media (max-width:620px){
  .home-hubs{ grid-template-columns:1fr }
  .home-hub{ flex-direction:row; align-items:center; gap:.9rem; padding:1rem 1.1rem }
  .home-hub-name{ margin-top:0; flex:1 }
}