/* ===========================================================================
   Songbook — mobile-first stylesheet
   =========================================================================== */
:root{
  --bg:#f6f5f2; --panel:#fff; --panel-2:#faf9f7; --border:#e3e0d9;
  --text:#242220; --text-dim:#6d685f;
  --accent:#b45f2e; --accent-ink:#fff; --accent-soft:#fbe9dc;
  --good:#5c7f52;
  --chord:#a04617;
  --danger:#b3432f;
  --radius:12px;
  --shadow:0 1px 2px rgba(30,27,20,.05), 0 6px 18px rgba(30,27,20,.07);
  --maxw:1080px;
  color-scheme:light;
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,"Noto Sans Tamil","Nirmala UI","Latha",sans-serif;
}
:root[data-theme="dark"]{
  --bg:#141317; --panel:#1d1c22; --panel-2:#232228; --border:#34333c;
  --text:#eeebe4; --text-dim:#a39e92;
  --accent:#e08a52; --accent-ink:#1a1206; --accent-soft:#3a2a1e;
  --good:#9dba8f;
  --chord:#f0a066;
  --danger:#e58273;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    --bg:#141317; --panel:#1d1c22; --panel-2:#232228; --border:#34333c;
    --text:#eeebe4; --text-dim:#a39e92;
    --accent:#e08a52; --accent-ink:#1a1206; --accent-soft:#3a2a1e;
    --good:#9dba8f;
    --chord:#f0a066;
    --danger:#e58273;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
/* An author `display` rule outranks the UA stylesheet's [hidden] rule, so
   without this the hidden attribute silently stops working on .tb-btn etc. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  padding-top:calc(56px + env(safe-area-inset-top));
  overflow-wrap:break-word;
}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{margin:0;line-height:1.25}

/* ---------- Top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:calc(56px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 12px 0;
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border-bottom:1px solid var(--border);
}
/* The name lives only here now, so it carries the page. Sized up on wider
   screens; a phone keeps it small enough not to be cut off. */
.brand{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:900;font-size:16.5px;min-width:0;letter-spacing:-.01em}
@media(min-width:560px){.brand{font-size:19px;gap:10px}}
/* On a phone the four buttons leave too little room, and the name was being
   cut mid-word ("Chicag…"). Drop the suffix rather than the church's name. */
.brand-tail{display:none}
@media(min-width:560px){.brand-tail{display:inline}}
/* And make room for it: on a phone the four buttons were taking 224px of
   375, leaving the name 124 where it needed 165. Tighter buttons, a smaller
   logo, and no "0" badge on an empty setlist give it back about fifty. */
@media(max-width:420px){
  /* The theme button goes: the app follows the device's own light/dark
     setting unless told otherwise, so on a phone it is the control least
     likely to be missed — and it is the last 40px the church's name needs. */
  #themeBtn{display:none}
  .brand{font-size:15px;gap:7px}
  img.brand-mark{width:24px;height:24px}
  .tb-btn{padding:5px 8px;font-size:12.5px}
  .tb-btn.icon{padding:5px 7px}
  .topbar{gap:6px;padding-left:10px;padding-right:10px}
  .topbar-actions{gap:5px}
  .badge.zero{display:none}
}
@media(min-width:860px){.brand{font-size:21px}}
.brand-mark{font-size:19px}
img.brand-mark{width:28px;height:28px;border-radius:7px;object-fit:cover;flex:0 0 auto}
@media(min-width:560px){img.brand-mark{width:32px;height:32px}}
.brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.tb-btn{
  border:1px solid var(--border);background:var(--panel-2);color:var(--text);
  padding:7px 11px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.tb-btn:hover{border-color:var(--accent)}
.tb-btn.icon{padding:7px 10px}
.tb-btn.editor{background:var(--good);border-color:var(--good);color:#fff}
.badge{
  background:var(--accent);color:var(--accent-ink);border-radius:20px;
  min-width:19px;height:19px;padding:0 5px;font-size:11.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}
.badge.zero{background:var(--border);color:var(--text-dim)}

.sync-bar{
  position:fixed;top:calc(56px + env(safe-area-inset-top));left:0;right:0;z-index:40;
  padding:7px 14px;font-size:12.5px;text-align:center;
  background:var(--accent-soft);color:var(--chord);border-bottom:1px solid var(--border);
}
.sync-bar.err{background:#fbe3de;color:var(--danger)}
:root[data-theme="dark"] .sync-bar.err{background:#3a201c}

.view{max-width:var(--maxw);margin:0 auto;padding:16px 14px 72px}

/* ---------- Library ---------- */
.lib-head{margin-bottom:14px}
/* Was under an h1; now it is the first thing on the page. */
.lib-head .lib-sub:first-child{margin-top:2px}
.lib-head h1{font-size:22px;margin-bottom:4px}
.lib-sub{color:var(--text-dim);font-size:13.5px}
.searchwrap{position:relative;margin:14px 0 10px}
.search{
  width:100%;padding:13px 14px 13px 40px;font-size:16px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--panel);
}
.search:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.searchwrap::before{
  content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:19px;color:var(--text-dim);pointer-events:none;
}
.chips{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch}
.chip{
  border:1px solid var(--border);background:var(--panel);color:var(--text-dim);
  padding:7px 13px;border-radius:20px;font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;flex:0 0 auto;
}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip-removed{border-style:dashed}
.chip-removed.on{background:var(--text-dim);border-color:var(--text-dim);color:var(--panel)}
/* Remove / Restore, beside the song's category */
.tag-btn{
  border:1px solid var(--border);background:var(--panel-2);color:var(--text-dim);
  padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700;cursor:pointer;
}
.tag-btn:hover{border-color:var(--danger);color:var(--danger)}
.tag-btn.restored{border-color:var(--good);color:var(--good)}
.tag-btn.restored:hover{border-color:var(--good);color:var(--good)}
@media print{.tag-btn{display:none!important}}

.songgrid{display:grid;gap:9px;grid-template-columns:1fr}
@media(min-width:640px){.songgrid{grid-template-columns:1fr 1fr}}
@media(min-width:940px){.songgrid{grid-template-columns:1fr 1fr 1fr}}
.card{
  display:flex;align-items:center;gap:11px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:13px 13px;cursor:pointer;text-align:left;width:100%;
}
.card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.card-main{min-width:0;flex:1}
.card-title{font-weight:600;font-size:15.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{color:var(--text-dim);font-size:11.5px;margin-top:3px;display:flex;gap:7px;flex-wrap:wrap}
.keytag{
  background:var(--accent-soft);color:var(--chord);font-weight:800;font-size:11.5px;
  padding:3px 8px;border-radius:20px;flex:0 0 auto;
}
/* A scan is a song too. It used to wear a grey "PDF", a file format in the
   place where every other card says its key; now it says what it is. */
.keytag.sheet{background:var(--accent-soft);color:var(--chord);opacity:.8}
.card-add{
  border:1px solid var(--border);background:var(--panel-2);border-radius:9px;
  width:34px;height:34px;flex:0 0 auto;cursor:pointer;font-size:17px;line-height:1;
  color:var(--text-dim);
}
.card-add:hover{border-color:var(--accent);color:var(--accent)}
.card-add.on{background:var(--good);border-color:var(--good);color:#fff}

.empty{padding:40px 16px;text-align:center;color:var(--text-dim)}
.empty-big{font-size:34px;margin-bottom:8px}

/* ---------- Song page ---------- */
.song-head{margin-bottom:10px}
.crumb{color:var(--text-dim);font-size:13px;display:inline-block;margin-bottom:8px}
.song-head h1{font-size:21px;margin-bottom:6px}
.song-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--text-dim)}

.toolbar{
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  margin:12px 0;padding:9px;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);
  position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:30;
}
.tgroup{display:flex;align-items:center;gap:1px;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:2px}
.tgroup button{
  border:none;background:transparent;padding:8px 11px;border-radius:7px;
  cursor:pointer;font-size:13.5px;font-weight:700;min-width:38px;
}
.tgroup button:hover{background:var(--border)}
/* The ♯/♭ button holds a setting rather than firing an action, so it shows
   which spelling is currently in force. */
.tgroup button.on{background:var(--accent);color:var(--accent-ink)}
.tgroup button.on:hover{background:var(--accent)}
.tgroup .tlabel{font-size:10.5px;color:var(--text-dim);padding:0 7px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.keyval{min-width:74px;text-align:center;font-weight:800;color:var(--chord);font-size:13.5px}
.tspacer{flex:1}

/* ---------- Services ---------- */
.svc-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.svc-why{flex-basis:100%;margin-top:2px}
.svc-head{
  font-size:11px;font-weight:800;color:var(--text-dim);text-transform:uppercase;
  letter-spacing:.06em;margin:18px 0 8px;
}
.svc-list{display:flex;flex-direction:column;gap:8px}
.svc-card{cursor:pointer}
.svc-date{font-size:12px;font-weight:800;color:var(--chord);letter-spacing:.02em}
.svc-name{font-weight:700;margin-top:2px}
.svc-notes{font-size:12.5px;color:var(--text-dim);margin-top:3px}
.svc-songs{display:flex;flex-direction:column;gap:8px}
.set-meta{font-size:12.5px;color:var(--text-dim);margin-top:3px}
.backlink{display:inline-block;font-size:12.5px;color:var(--text-dim);margin-bottom:6px}
/* Last sung, and in what key — small, but it is what decides whether a song
   goes in this week. */
.song-hist{
  font-size:12.5px;color:var(--text-dim);
  margin:10px 0 2px;padding:7px 11px;
  background:var(--panel-2);border:1px solid var(--border);border-radius:9px;
}
.fl{display:block;font-size:11.5px;font-weight:700;color:var(--text-dim);margin:9px 0 3px}

/* ---------- Picking songs and parts ---------- */
.pk-q{
  width:100%;padding:11px 13px;font-size:16px;margin-bottom:9px;
  border:1px solid var(--border);border-radius:10px;background:var(--panel-2);
}
.pk-list{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:5px}
.pk-row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;flex:0 0 auto;
  padding:9px 11px;border:1px solid var(--border);border-radius:10px;
  background:var(--panel);cursor:pointer;color:inherit;font:inherit;
}
.pk-row:hover{border-color:var(--accent)}
.pk-row.on{background:var(--accent-soft);border-color:var(--accent)}
.pk-row.had{opacity:.5;cursor:default}
.pk-main{display:flex;flex-direction:column;min-width:0;flex:1}
.pk-title{font-weight:650;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-meta{font-size:11.5px;color:var(--text-dim);margin-top:2px}
.pk-tick{font-size:16px;font-weight:800;color:var(--accent);flex:0 0 auto}
.pk-count{margin-top:9px}

.pk-cats{display:flex;gap:6px;overflow-x:auto;padding:2px 0 9px}
.pk-cats .chip{padding:6px 11px;font-size:12px}

/* The whole song, grouped, with a box beside each part — you can read what
   dropping a verse actually costs. */
.sec-song{max-height:58vh;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
/* flex:0 0 auto matters: .sec-song is a column flex container with a max
   height, and flex items shrink to fit by default — every block was being
   squeezed to its header and the song clipped away by overflow:hidden. */
.sec-block{border:1px solid var(--border);border-radius:10px;overflow:hidden;flex:0 0 auto}
.sec-head{
  display:flex;align-items:center;gap:9px;padding:8px 11px;cursor:pointer;
  background:var(--panel-2);border-bottom:1px solid var(--border);
}
.sec-head input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--accent)}
.sec-lab{font-weight:700;font-size:13px}
.sec-n{margin-left:auto;font-size:11px;color:var(--text-dim)}
.sec-body{padding:9px 11px;font-size:14px}
.sec-body .line{padding:0 2px}
/* Turned off: still readable, plainly not being sung. */
.sec-block.off{opacity:.42}
.sec-block.off .sec-body{text-decoration:line-through;text-decoration-thickness:1px}
.btn.icon{min-width:34px;padding:8px 10px}

/* ---------- Voice parts ---------- */
.parts{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--panel);padding:11px 12px;margin:12px 0;
}
.parts-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.parts-title{font-weight:700;font-size:13.5px}
.parts-loop{margin-left:auto;padding:6px 11px;font-size:12.5px}
.parts-loop.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.parts-tabs{display:flex;gap:6px;flex-wrap:wrap}
.parts-tab{padding:7px 13px}
.parts-tab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.parts-stage:not(:empty){margin-top:10px;position:relative}
/* Sits over the top-right corner of whatever is playing. */
.parts-close{
  position:absolute;top:6px;right:6px;z-index:2;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
}
.parts-close:hover{border-color:var(--accent);color:var(--accent)}
/* 16:9 for the embed; Shorts are portrait but YouTube letterboxes them. */
.parts-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#000}
.parts-audio{display:block;width:100%;margin-top:2px}
@media print{.parts{display:none!important}}

/* ---------- Sheet music ---------- */
.sheetimgs{display:flex;flex-direction:column;gap:12px}
/* Scans of paper. White background regardless of theme — inverting a
   photograph of a page would just make it look broken. */
.sheetimg{
  display:block;width:100%;height:auto;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);
}
/* A page of music is about 1.5 times taller than it is wide, and it was
   sized to the WIDTH of the screen with nothing capping its height. On an
   iPad in landscape that put half the hymn below the fold, and pinching
   out shrank the whole site rather than the page. So the page is fitted to
   the height of the screen instead -- the top bar and the toolbar taken
   off -- and the width follows from that. The image scales down to fit and
   never up past its own pixels, so it stays sharp. On a phone, held
   upright, the width is the tighter limit anyway and nothing changes. */
.sheetimg{
  /* Only the fixed top bar comes off the height: a hymn page has no sticky
     toolbar, unlike a chord sheet. The 12px is the breathing room at the
     top and bottom that lets the page sit clear of both edges. */
  max-height:calc(100vh - 56px - env(safe-area-inset-top) - 24px);
  max-height:calc(100dvh - 56px - env(safe-area-inset-top) - 24px);
  width:auto;max-width:100%;margin:0 auto;object-fit:contain;
  /* Whatever scrolls the page into view -- the next/previous pager, a
     link, a tap -- lands it just under the bar rather than beneath it. */
  scroll-margin-top:calc(56px + env(safe-area-inset-top) + 12px);
}
/* A position picker in a reordering list: the same small pill as the
   buttons beside it, showing the number the row is at. */
.pos-pick{
  border:1px solid var(--border);background:var(--panel-2);color:var(--text);
  border-radius:8px;height:31px;padding:0 6px;font-weight:700;font-size:13px;
  cursor:pointer;flex:0 0 auto;
}
.set-item .pos-pick{height:34px;border-radius:9px;padding:0 8px}
.bk-img{display:block;width:100%;height:auto}

/* ---------- Paging between songs ---------- */
.pager{
  display:flex;align-items:stretch;gap:7px;margin:10px 0 2px;
}
.pg{
  flex:1;display:flex;align-items:center;gap:9px;min-width:0;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:9px 11px;cursor:pointer;text-align:left;color:inherit;font:inherit;
}
.pg:hover:not(:disabled){background:var(--panel-2);border-color:var(--accent)}
.pg:disabled{opacity:.35;cursor:default}
.pg.next{flex-direction:row-reverse;text-align:right}
.pg-g{font-size:21px;line-height:1;color:var(--accent);font-weight:700}
.pg-t{display:flex;flex-direction:column;min-width:0}
.pg-lab{font-size:10px;font-weight:800;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.pg-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-mid{
  align-self:center;font-size:11px;color:var(--text-dim);
  white-space:nowrap;padding:0 4px;
}
@media (max-width:520px){
  .pg-name{max-width:31vw}
  .pg-mid{display:none}
}

/* ---------- Booklet ---------- */
.booklet{display:flex;flex-direction:column;gap:22px}
.bk-cover{border:1px solid var(--border);border-radius:var(--radius);padding:22px;background:var(--panel)}
.bk-church{font-size:12px;font-weight:800;color:var(--chord);text-transform:uppercase;letter-spacing:.07em}
.bk-cover h1{margin:6px 0 2px;font-size:24px}
.bk-date{color:var(--text-dim);font-size:13.5px}
.bk-toc{margin:16px 0 0;padding-left:22px;line-height:1.9}
.bk-song{border:1px solid var(--border);border-radius:var(--radius);padding:18px;background:var(--panel)}
.bk-song h2{margin:0 0 3px;font-size:19px}
.bk-key{font-size:12.5px;font-weight:700;color:var(--chord);margin-bottom:10px}
.bk-miss{color:var(--text-dim);font-size:13px}
.bk-link{font-size:11.5px;word-break:break-all}

.notice{
  background:var(--accent-soft);color:var(--chord);border-radius:10px;
  padding:10px 12px;font-size:12.5px;line-height:1.55;margin-bottom:12px;
  display:flex;gap:9px;align-items:flex-start;
}
.notice button{margin-left:auto;border:none;background:transparent;color:inherit;cursor:pointer;font-size:15px;flex:0 0 auto}

/* --- the chord sheet itself --- */
.sheet{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 14px}
.line{position:relative;padding:1px 4px;border-radius:7px}
.line.gap{margin-top:19px}
/* Prelude / Interlude / Bridge and friends: played, not sung. Give them a
   tinted band so a player scanning a scrolling page can find the next one
   without reading. Uses the accent tokens, so it follows the theme. */
.line.section{
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  padding:4px 8px;margin:6px 0;
  display:inline-block;
}
.line.section .ly{font-weight:800;color:var(--chord);letter-spacing:.01em}
.line.section .ro-line{display:none}
.line-flow{display:flex;flex-wrap:wrap;align-items:flex-end}
.seg{display:inline-flex;flex-direction:column;align-items:flex-start}
.seg .ch{
  font-size:.78em;font-weight:800;color:var(--chord);line-height:1.5;
  white-space:pre;padding-right:.5em;min-height:1.5em;
}
.seg .ly{white-space:pre;line-height:1.6}
.seg .ly.empty{min-width:1.7em}
.seg.tail-chord .ly,.seg.tail-chord .ro{display:none}
.seg.tail-chord{align-self:flex-start;margin-left:.4em}
/* Romanised row sits under the Tamil it belongs to. Slightly smaller and
   dimmer so the Tamil still reads as the primary text in "Both" mode. */
.seg .ro{white-space:pre;line-height:1.5;font-size:.82em;color:var(--text-dim)}
/* In "Both" mode the reading is a whole-line gloss under the Tamil rather than
   a per-segment one, so chords landing mid-word cannot pull the Tamil apart. */
.ro-line{
  white-space:pre-wrap;line-height:1.5;font-size:.82em;
  color:var(--text-dim);margin-top:.1em;
}
.sheet.script-en .seg .ly{display:none}
.sheet.script-en .seg .ro{font-size:1em;color:var(--text)}
.scriptbtn{min-width:62px}
.sheet.editing .line{border:1px dashed transparent}
.sheet.editing .line:hover{border-color:var(--border);background:var(--panel-2)}
.sheet.editing .ch{cursor:pointer;border-radius:4px}
.sheet.editing .ch:hover{background:var(--accent-soft);outline:1px solid var(--chord)}
.line-tools{
  position:absolute;top:-2px;right:2px;display:none;
  background:var(--panel);border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow);
}
.sheet.editing .line:hover .line-tools{display:flex}
.line-tools button{border:none;background:transparent;padding:5px 8px;cursor:pointer;font-size:13px;color:var(--text-dim)}
.line-tools button:hover{color:var(--text);background:var(--border)}
.addline{margin-top:12px}

.sheetlink{
  display:block;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 18px;text-align:center;
}
.sheetlink .big{font-size:32px;margin-bottom:8px}

.notes-wrap{margin-top:14px}
.notes-wrap label{display:block;font-size:11px;font-weight:800;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.notes-wrap textarea{
  width:100%;min-height:58px;padding:10px 11px;border:1px solid var(--border);
  border-radius:10px;background:var(--panel);resize:vertical;font-size:14px;
}
.notes-read{
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:10px 11px;font-size:14px;white-space:pre-wrap;color:var(--text);
}

/* ---------- Performance panel ---------- */
.perf{margin-top:16px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.perf-tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--border);background:var(--panel-2)}
.perf-tab{
  border:none;background:transparent;padding:12px 15px;font-size:13px;font-weight:700;
  color:var(--text-dim);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;
}
.perf-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.perf-body{padding:14px}
.hint{font-size:12.5px;color:var(--text-dim);line-height:1.6;margin:0 0 11px}
.hint code{background:var(--panel-2);border:1px solid var(--border);padding:1px 5px;border-radius:4px;font-size:12px}
.rowctl{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.bpm{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-dim)}
.bpm input{width:60px;padding:6px;border:1px solid var(--border);border-radius:7px;background:var(--panel-2);text-align:center}

.steps{display:flex;gap:4px}
.step{
  flex:1;min-width:0;border:1px solid var(--border);background:var(--panel-2);
  border-radius:8px;padding:9px 0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.step .bl{font-size:9.5px;color:var(--text-dim)}
.step .sv{font-weight:800;font-size:14px}
.step.head{outline:2px solid var(--accent);outline-offset:1px}
.sv.D{color:var(--good)} .sv.U{color:#3f77a8} .sv.X{color:var(--danger)}
:root[data-theme="dark"] .sv.U{color:#8fbde0}
.drow{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.dlab{width:50px;font-size:11.5px;font-weight:700;color:var(--text-dim);flex:0 0 auto}
.dcells{display:flex;gap:3px;flex:1}
.dcell{flex:1;min-width:0;height:30px;border:1px solid var(--border);background:var(--panel-2);border-radius:6px;cursor:pointer;padding:0}
.dcell.on{background:var(--good);border-color:var(--good)}
.dcell.q{border-left:2px solid var(--text-dim)}
.dcell.head{outline:2px solid var(--accent);outline-offset:1px}

.drop{border:2px dashed var(--border);border-radius:var(--radius);padding:22px 16px;text-align:center;background:var(--panel-2)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.player{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:13px}
.player-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.player-name{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seek{width:100%;margin:9px 0}
.abrow{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.ablabel{font-size:12.5px;color:var(--text-dim)}
.ablabel.on{color:var(--good);font-weight:700}
.field{margin-bottom:12px}
.field label{display:block;font-size:11px;font-weight:800;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.field input[type=text]{width:100%;max-width:420px;padding:9px 11px;border:1px solid var(--border);border-radius:9px;background:var(--panel)}

/* ---------- Setlist ---------- */
.set-item{
  display:flex;align-items:center;gap:11px;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:8px;
}
.set-num{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--chord);
  font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.set-main{flex:1;min-width:0;cursor:pointer}
.set-title{font-weight:650;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-meta{font-size:12px;color:var(--text-dim);margin-top:2px}
.set-actions{display:flex;gap:3px;flex:0 0 auto}
.set-actions button{border:1px solid var(--border);background:var(--panel-2);border-radius:8px;
  width:31px;height:31px;cursor:pointer;color:var(--text-dim);font-size:13px;padding:0}
.set-actions button:hover{border-color:var(--accent);color:var(--accent)}
.setbar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}

/* ---------- Buttons / modal / toast ---------- */
.btn{
  padding:10px 15px;border-radius:10px;border:1px solid var(--border);
  background:var(--panel);font-size:14px;font-weight:650;cursor:pointer;
}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small{padding:7px 11px;font-size:13px}
.btn.on{background:var(--good);border-color:var(--good);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.overlay{position:fixed;inset:0;background:rgba(20,18,14,.5);z-index:100;
  display:flex;align-items:flex-end;justify-content:center;padding:0}
@media(min-width:640px){.overlay{align-items:center;padding:20px}}
.modal{
  background:var(--panel);width:100%;max-width:560px;max-height:88vh;
  border-radius:16px 16px 0 0;display:flex;flex-direction:column;box-shadow:var(--shadow);
}
@media(min-width:640px){.modal{border-radius:16px}}
/* Wider, for the dialog that shows a whole song rather than a short form. */
.modal.wide{max-width:760px;max-height:92vh}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 8px}
.modal-head h3{font-size:16.5px}
.modal-body{padding:4px 16px 12px;overflow-y:auto}
.modal-body input[type=text],.modal-body input[type=email],.modal-body textarea{
  width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--panel-2);font-size:16px;
}
.modal-body textarea{line-height:1.8;min-height:90px}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:10px 16px calc(16px + env(safe-area-inset-bottom))}
.xbtn{border:none;background:transparent;font-size:17px;cursor:pointer;color:var(--text-dim);padding:4px 8px}
.preview{margin-top:12px;border:1px solid var(--border);border-radius:10px;padding:9px 11px;background:var(--panel-2)}
.preview-lab{font-size:10px;font-weight:800;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.preview-body{margin-top:5px;font-size:16px}

#toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);
  background:#211f1c;color:#fff;padding:11px 18px;border-radius:22px;font-size:13.5px;
  opacity:0;transition:.2s;pointer-events:none;z-index:200;max-width:88vw;text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Print ---------- */
@media print{
  .topbar,.toolbar,.perf,.notice,.line-tools,.addline,.notes-wrap,.sync-bar,#toast{display:none!important}
  body{padding-top:0;background:#fff}
  .view{max-width:none;padding:0}
  .sheet{border:none;padding:0}
  .line{break-inside:avoid}
  /* Tinted bands turn to mud on a mono printer — keep the rule and the weight,
     which is what makes the section findable on paper. */
  .line.section{background:none;border-left:3px solid #000;padding:2px 8px}
  .line.section .ly{color:#000;font-weight:800}
  .set-item{break-inside:avoid;border:none;padding:4px 0}
  a{color:#000}

  /* The booklet: a cover sheet, then one song to a page, which is how the
     team reads it on a stand. */
  .noprint,.pager{display:none!important}
  .booklet{display:block;gap:0}
  .bk-cover,.bk-song{
    border:none;background:none;padding:0;
    break-after:page;page-break-after:always;
  }
  .booklet > *:last-child{break-after:auto;page-break-after:auto}
  .bk-cover h1{font-size:22pt}
  .bk-song h2{font-size:15pt;margin-bottom:2pt}
  .bk-key{font-size:10pt;color:#000;margin-bottom:8pt}
  .bk-church,.bk-date{color:#000}
  .bk-miss{color:#000;border:1px dashed #999;padding:10pt;border-radius:4pt}
  /* Each scanned page gets its own sheet of paper. */
  .bk-img{max-width:100%;max-height:24cm;object-fit:contain}
  .bk-img-next{break-before:page;page-break-before:always}
}

/* ---- practice console -------------------------------------------------
   Speed and phrase repeat, shown only while a part is actually playing so
   the hymn page stays quiet until someone asks to practise. */
.parts-ctl{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem}
.parts-speeds,.parts-ab{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.parts-lab{font-size:.8rem;color:var(--text-dim);min-width:3.4rem}
.parts-rate,.parts-ab-btn{font-size:.8rem;padding:.2rem .55rem}
.parts-rate.on,.parts-ab-btn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.parts-span{font-size:.8rem;color:var(--text-dim);font-variant-numeric:tabular-nums}

/* the keyboard voice for a song: free text, because every keyboard
   numbers and names its voices differently */
.kb-input{flex:1 1 auto;min-width:0;max-width:26rem;padding:.4rem .6rem;
  border:1px solid var(--border);border-radius:8px;
  background:var(--panel);color:var(--text);font-size:.95rem}
.kb-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.kb-input:disabled{opacity:.7}

/* the progression in the key actually being played */
.prog-now{display:flex;gap:.45rem;align-items:baseline;margin-top:.35rem;flex-wrap:wrap}
.prog-now[hidden]{display:none}
.prog-lab{font-size:.8rem;color:var(--text-dim)}
.prog-chords{font-weight:600;color:var(--chord);letter-spacing:.01em}

/* adding and changing voice-part links, editors only */
.parts-edit,.parts-del{padding:.15rem .4rem;font-size:.75rem;opacity:.72}
.parts-edit:hover,.parts-del:hover{opacity:1}
.parts-del:hover{border-color:var(--danger);color:var(--danger)}
.parts-add{border-style:dashed;font-weight:600}
.fl{display:block;font-size:.8rem;color:var(--text-dim);margin:.6rem 0 .2rem}
.pname,.purl{width:100%;padding:.45rem .6rem;border:1px solid var(--border);
  border-radius:8px;background:var(--panel);color:var(--text);font-size:.95rem}

/* ---- Adding a hymn from a PDF ---- */
.searchwrap{display:flex;gap:8px;align-items:center}
.searchwrap .search{flex:1 1 auto;min-width:0}
.add-hymn{flex:0 0 auto;white-space:nowrap}
.ah-status{margin:6px 0 2px;min-height:1.2em}
.ah-preview{
  display:flex;gap:8px;overflow-x:auto;padding:4px 0;
  -webkit-overflow-scrolling:touch;
}
/* The pages are the thing being checked before saving, so they are shown big
   enough to tell one hymn from another rather than as icons. */
.ah-thumb{
  height:190px;width:auto;flex:0 0 auto;background:#fff;
  border:1px solid var(--line);border-radius:6px;
}
.ah-preview:empty{display:none}

/* ================= Type roles =================
   Three faces, each with one job, self-hosted from fonts.css.

   Newsreader for names: the church, a song, a Sunday. It is the face of the
   printed hymnal, and a title in it is found from a step back while a
   service scrolls past.

   Tiro Tamil for the words that are sung: a serif drawn for reading long
   Tamil, so the vowel signs and the pulli stay distinct at phone size.

   Source Sans for everything that is operated -- chords, keys, buttons. A
   chord stands off the lyric because it is a different KIND of letter, not
   only a different colour, which is the whole job at a music stand. */
h1,h2,h3,.brand,.card-title,.set-title,.svc-name,.modal-head h3,.pager .pg-title{
  font-family:"Newsreader",Georgia,"Times New Roman",serif;font-weight:600;
  letter-spacing:0;font-optical-sizing:auto;
}
.brand{font-weight:600;font-size:18px}
@media(min-width:560px){.brand{font-size:21px}}
.song-head h1{font-size:26px;line-height:1.15}
.seg .ly{font-family:"Tiro Tamil","Newsreader",Georgia,serif}
/* The reading is a gloss, so it is set as one: italic, quieter than the
   Tamil above it. When it is the ONLY text on the page it goes upright --
   a whole song in italics is tiring to sing from. */
.seg .ro,.ro-line{font-family:"Newsreader",Georgia,serif;font-style:italic}
.sheet.script-en .seg .ro{font-style:normal}
.line.section .ly{font-family:"Source Sans 3",sans-serif}
.seg .ch,.keyval,.keytag,.bk-key{font-family:"Source Sans 3",sans-serif}

/* Top-bar buttons say what they do on a screen with room for it. */
.tb-label{margin-left:5px}
@media(max-width:640px){.tb-label{display:none}}

/* The song toolbar in two rows: what is used mid-song on the first, the
   rest on a quieter second, instead of eight equal pills fighting. */
.toolbar{row-gap:6px}
.trow{display:flex;gap:7px;flex-wrap:wrap;align-items:center;width:100%}
.trow.secondary .tgroup{background:transparent;border-color:transparent;padding:0}
.trow.secondary .tgroup button,.trow.secondary .btn{
  background:transparent;border-color:transparent;color:var(--text-dim);font-weight:600}
.trow.secondary .tgroup button:hover,.trow.secondary .btn:hover{
  background:var(--panel-2);border-color:var(--border);color:var(--text)}
.trow.secondary .btn.on{background:var(--good);border-color:var(--good);color:#fff}

/* Where the words came from: a footnote under the sheet rather than an
   orange box above it on every song. */
.transcribed{font-size:12.5px;color:var(--text-dim);margin:10px 4px 0;line-height:1.55}
.transcribed button{border:none;background:transparent;color:var(--accent);cursor:pointer;
  font:inherit;padding:0;text-decoration:underline dotted;text-underline-offset:3px}
.transcribed .more{display:none;margin-top:4px}
.transcribed.open .more{display:block}

/* Service rows: a numbered place in the order, and the key as the same
   badge the library cards wear, so the page reads like the rest. */
.set-titlerow{display:flex;align-items:center;gap:8px;min-width:0}
.set-titlerow .set-title{flex:1;min-width:0}

/* A service row that opens on tap. It has to look tappable now that the
   button is gone, and show where the keyboard is. */
.set-item.set-open{cursor:pointer}
.set-item.set-open:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.set-item.set-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Rename, beside Remove on a song and in the subtitle of a service. Remove
   goes red on hover because it takes something away; Rename does not, so it
   takes the accent instead. */
.tag-btn.rename:hover{border-color:var(--accent);color:var(--accent)}
.lib-sub .tag-btn.rename{margin-left:8px;vertical-align:middle}
.ren-in{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:9px;
  background:var(--panel);color:var(--text);font-size:15px;
  font-family:"Newsreader",Georgia,serif;font-weight:600;
}
.ren-in:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
/* which parts of a song a service sings, above the sheet */
.svc-parts{font-size:13px;color:var(--text-dim);margin:0 4px 10px;line-height:1.5}
.svc-parts button{border:none;background:transparent;color:var(--accent);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
@media print{.svc-parts{display:none}}

/* ---------- Labels ---------- */
/* Outlined in the chord colour, so a label never reads as a category. */
.label-row{position:relative}
.chip.lbl{border-color:var(--accent);color:var(--chord);background:var(--panel)}
.chip.lbl.on{background:var(--chord);border-color:var(--chord);color:var(--accent-ink)}
.chip.lbl-manage{padding:7px 11px}
.chip.lbl-cta{border-style:dashed;color:var(--text-dim)}
.chip.lbl-cta:hover,.chip.lbl-manage:hover{border-color:var(--accent);color:var(--accent)}
.chip.lbl-ticked{border-style:dashed}
.label-banner{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:8px 8px 8px 12px;
  background:var(--accent-soft);border:1px solid var(--border);border-radius:var(--radius);font-size:13.5px;
}
.label-banner .lb-text{flex:1;min-width:0}
.lb-btn{
  border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:20px;
  padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer;
}
.lb-btn:hover{border-color:var(--accent);color:var(--accent)}
.lb-x{border:none;background:transparent;color:var(--text-dim);font-size:17px;cursor:pointer;padding:4px 8px;min-height:32px}
.lb-x:hover{color:var(--accent)}
.card-meta .lbl{color:var(--chord)}
.lbl-tags{display:contents}
.lbl-tag{border:1px solid var(--accent);color:var(--chord);border-radius:20px;padding:2px 9px;font-size:11.5px;font-weight:700}
.lbl-tag:hover{background:var(--accent-soft)}
/* .tag-btn turns red on hover, which suits Remove and not this. */
.tag-btn.lbl-btn:hover{border-color:var(--accent);color:var(--accent)}
.labels-list{display:grid;gap:8px;margin-bottom:18px}
@media(min-width:640px){.labels-list{grid-template-columns:1fr 1fr}}
.label-item{
  display:flex;align-items:center;gap:6px;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);padding:4px 8px 4px 2px;
}
.label-main{
  flex:1;min-width:0;min-height:48px;display:flex;flex-direction:column;justify-content:center;
  padding:6px 10px;color:var(--text);
}
a.label-main:hover .label-name{color:var(--accent)}
.label-name{font-weight:700;font-size:15.5px}
.label-count{font-size:12px;color:var(--text-dim);margin-top:2px}
.labels-list.removed .label-item{background:var(--panel-2);border-style:dashed}
.label-sub{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:20px 0 8px}
.label-suggest{flex-wrap:wrap;overflow:visible}
.lbl-err{color:var(--danger)}
.lbl-toggles{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.lbl-toggle{
  border:1px solid var(--border);background:var(--panel);color:var(--text-dim);border-radius:20px;
  padding:9px 14px;min-height:42px;font-size:14px;font-weight:600;cursor:pointer;
}
.lbl-toggle.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lbl-toggle.on::before{content:"✓ "}
.lbl-new{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.lbl-new .ren-in{flex:1;min-width:0}
.lbl-danger{border-top:1px solid var(--border);margin-top:16px;padding-top:12px}
.lbl-danger .btn{color:var(--danger)}
.pk-history{margin:0 0 8px}
.pk-history:empty{display:none}
@media print{.label-row,.label-banner,.lbl-btn{display:none!important}}
/* a medley: each part opens with the name of the song it is from */
.line.part-head{margin-top:22px;padding:0 0 3px;border-bottom:1px solid var(--border)}
.line.part-head:first-child{margin-top:0}
.line.part-head span,.line.part-head a{font-family:"Newsreader",serif;font-style:italic;font-weight:600;font-size:1.02em;color:var(--text-dim);text-decoration:none}
.line.part-head a:hover{color:var(--accent);text-decoration:underline}
/* the medley dialog */
.md-parts{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.md-part{border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.md-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.md-ctl{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.md-ssel{font:inherit;font-size:13px;padding:4px 6px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text);max-width:100%}
.md-n{font-size:12px;color:var(--text-dim);min-width:16px}
.md-name{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:6px;font-size:13px}
.md-key{display:inline-flex;align-items:center;gap:6px}
.md-klab{color:var(--text-dim)}
.md-results{display:flex;flex-direction:column;gap:4px;margin:0 0 6px}
.md-hit{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid var(--border);background:transparent;border-radius:8px;padding:7px 10px;cursor:pointer;font:inherit;color:inherit}
.md-hit:hover{border-color:var(--accent)}
.md-hit-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media print{.line.part-head{border-color:#000}.line.part-head span,.line.part-head a{color:#000}}
.md-ksel{font:inherit;font-size:13px;padding:4px 6px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text)}