/* Mister Canoe design system: sky-blue ground, white panels, Glass Antiqua display, Outfit text,
   lake-blue for selection and hover, sand-tan fills, guitar-brown highlights, one striped sun. Single (day) theme by design. */
:root{
  --sky:#56aeef; --lake:#1f5ba6; --brown:#8a5a12; --sand:#e9c79a; --ink:#141414; --white:#ffffff;
  --muted:#4b4038;            /* ink-family text for secondary lines on white and sand */
  --edge:#8a7a66;             /* control borders on white, 4:1 */
  --line:#eadfce;             /* hairline dividers inside panels */
  --display:"Glass Antiqua", Georgia, serif;
  --sans:Outfit, system-ui, sans-serif;
  --r-sm:6px; --r-md:16px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--sand)}
body{background:var(--sand);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}
.wrap{max-width:760px;margin:0 auto;padding-block:var(--s4) 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:var(--s3)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* header: reverse canoe mark + display title on sky, the striped sun to the right */
header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s4)}
.brand{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;min-width:0}
.brand .logo{width:clamp(170px,40vw,250px);height:auto;display:block}
h1{font-family:var(--display);font-weight:400;font-size:clamp(48px,11vw,64px);line-height:.9;margin:0;color:var(--lake);text-transform:lowercase}
.sun{width:clamp(64px,16vw,104px);height:auto;align-self:start}
.tabs{display:flex;background:var(--white);border-radius:var(--r-pill);padding:4px;flex:none}
.tabs button{border:0;background:none;padding:8px 20px;border-radius:var(--r-pill);font-weight:700;color:var(--ink)}
.tabs button:hover{background:var(--sand)}
#poolnote{display:none}
.tabs button[aria-selected="true"]{background:var(--lake);color:var(--white)}

.panel{background:var(--white);border-radius:var(--r-md);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
@media (max-width:480px){.panel{padding:var(--s3)}}
label.f{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
label.f span,.lbl{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
input[type=text],input[type=search],textarea{width:100%;border:1px solid var(--edge);background:var(--white);border-radius:var(--r-sm);padding:10px 12px;min-width:0}
.name input{font-weight:700;font-size:20px}

.controls{display:flex;flex-direction:column;gap:var(--s3)}
.row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.chip{border:1px solid var(--edge);background:var(--white);border-radius:var(--r-pill);padding:6px 14px;font-size:14px;font-weight:700}
.chip:hover{background:var(--sand);border-color:var(--sand)}
.chip[aria-pressed="true"]{background:var(--lake);border-color:var(--lake);color:var(--white)}
.seg{display:inline-flex;border:1px solid var(--edge);border-radius:var(--r-sm);overflow:hidden}
.seg button{border:0;background:var(--white);padding:8px 14px;font-size:15px;font-weight:700;min-width:48px}
.seg button+button{border-left:1px solid var(--edge)}
.seg button:hover{background:var(--sand)}
.seg button[aria-pressed="true"]{background:var(--lake);color:var(--white)}
.btn{border:0;background:var(--white);border-radius:var(--r-sm);padding:10px 18px;font-weight:700;display:inline-flex;align-items:center;gap:var(--s2);box-shadow:inset 0 0 0 1px var(--edge)}
.btn:hover{background:var(--lake);color:var(--white);box-shadow:none}
.btn.primary{background:var(--sky);color:var(--ink);box-shadow:none}
.btn.primary:hover{background:var(--lake);color:var(--white)}
.btn.ghost{background:none;box-shadow:none;text-decoration:underline;text-underline-offset:3px}
.btn.ghost:hover{background:var(--sand);color:var(--ink)}
.btn.danger{color:var(--brown);box-shadow:inset 0 0 0 1px var(--brown)}
.btn.danger:hover{background:var(--brown);color:var(--white)}
.btn svg{width:18px;height:18px}
.btn:disabled{opacity:.5;cursor:default}
.spacer{flex:1}

.sethead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.sethead h2,.ph{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.05;margin:0}
.tally{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
ol.set{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
ol.set li{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:var(--s2);padding:8px 6px;border-bottom:1px solid var(--line);border-radius:var(--r-sm)}
ol.set li:last-child{border-bottom:0}
.num{font-weight:700;font-size:20px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.song{min-width:0}
.song small{color:var(--muted);font-size:13px}
.tag{display:inline-block;font-size:11px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:1px 8px;border-radius:var(--r-pill);background:var(--sand);color:var(--ink);margin-left:var(--s2);vertical-align:2px}
.tag.unk{background:var(--white);box-shadow:inset 0 0 0 1px var(--ink)}
li.locked{background:var(--sand);border-bottom-color:transparent}
li.locked .num{color:var(--brown)}
li.locked .song small{color:var(--ink)}
.acts{display:flex;gap:2px}
.icon{border:0;background:none;width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink)}
.icon:hover{background:var(--lake);color:var(--white)}
.icon svg{width:18px;height:18px}
.icon.lock[aria-pressed="true"]{color:var(--brown)}
.icon.lock[aria-pressed="true"]:hover{color:var(--white)}
.icon:disabled{opacity:.3;cursor:default}
.icon:disabled:hover{background:none;color:var(--ink)}
.empty{color:var(--muted);text-align:center;padding:var(--s4) var(--s2)}

.search{position:relative}
.results{display:flex;flex-direction:column;max-height:300px;overflow:auto;border:1px solid var(--edge);border-radius:var(--r-sm);margin-top:var(--s2)}
.results button{border:0;background:none;text-align:left;padding:10px 12px;display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line)}
.results button:first-child{border-top:0}
.results button:hover,.results button:focus-visible{background:var(--sand)}
.results button[disabled]{opacity:.5}
.results small{color:var(--muted)}

.lib{display:flex;flex-direction:column;gap:var(--s3)}
.card{background:var(--white);border-radius:var(--r-md);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.card h3{margin:0;font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;overflow-wrap:anywhere}
.card .sub{color:var(--brown);font-size:14px;font-weight:700}
.card .peek{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.confirm{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;font-size:14px}
.note{font-size:13px;color:var(--muted)}
#storenote{color:var(--ink)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--lake);color:var(--white);padding:10px 20px;border-radius:var(--r-pill);font-weight:700;font-size:14px;z-index:40}
details summary{cursor:pointer;font-weight:700}
.song .open{border:0;background:none;padding:0;text-align:left;font-weight:700;font-size:17px;display:block;width:100%;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:var(--sand);text-decoration-thickness:2px;text-underline-offset:4px}
.song .open:hover{text-decoration-color:var(--lake)}

.syncbar{display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;font-size:14px;color:var(--ink);padding:0}
.syncbar #sync-status{display:none}
.syncbar .spacer{flex:1}
.syncbar .btn{padding:7px 14px;border-radius:var(--r-pill)}
.syncbar .btn.big{padding:10px 22px;font-size:17px}
@media (max-width:560px){.syncbar{row-gap:var(--s2)}}
#first-run p{margin:0;max-width:62ch}
h2.group{font-family:var(--display);font-weight:400;font-size:36px;line-height:1.05;margin:var(--s2) 0 calc(-1 * var(--s1));color:var(--ink)}

.opts{display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s4);align-items:start}
@media (max-width:560px){.opts{grid-template-columns:1fr}}
.opt{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
#mix{width:100%;accent-color:var(--lake);margin:0;padding:0;display:block}
.opt.mix{gap:4px}
.opt.mix #mix{height:22px}
.mixhead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.mixhead output{font-weight:700;color:var(--brown);font-size:14px;font-variant-numeric:tabular-nums}
details.draw{border-radius:var(--r-sm);padding:10px 14px;background:var(--white);box-shadow:inset 0 0 0 1px var(--edge)}
details.draw[open]{background:var(--white)}
details.draw summary{display:flex;gap:var(--s2);align-items:baseline;font-weight:400;list-style:none}
details.draw summary::-webkit-details-marker{display:none}
details.draw summary::after{content:"▾";margin-left:auto;color:var(--ink)}
details.draw[open] summary::after{content:"▴"}
#draw-sum{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
details.draw #docchips{margin-top:var(--s3)}

/* Song viewer: lake-blue bar (depth), white sheet, guitar-brown chords */
.viewer{position:fixed;inset:0;z-index:30;background:var(--white);display:flex;flex-direction:column}
.vtop{background:var(--lake);color:var(--white);padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.vtop-in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.vpos{font-weight:700;font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:.08em;background:var(--sand);color:var(--ink);border-radius:var(--r-pill);padding:4px 12px}
.vtitle{flex:1 1 220px;min-width:0}
.vtitle h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(30px,6vw,40px);line-height:1.05;text-wrap:balance;overflow-wrap:anywhere}
.vtitle small{font-size:13px}
.vtools{display:flex;gap:var(--s1);align-items:center;flex-wrap:wrap}
.vtools .icon{color:var(--white)}
.vtools .icon:hover{background:var(--white);color:var(--lake)}
.vtools .seg{border-color:var(--white)}
.vtools .seg button{background:transparent;color:var(--white)}
.vtools .seg button+button{border-left-color:var(--white)}
.vtools .seg button:hover{background:rgba(255,255,255,.18)}
.vtools .seg button[aria-pressed="true"]{background:var(--white);color:var(--lake)}
.seg.small button{padding:6px 12px;min-width:0}
#v-ver{border:0;background:var(--white);color:var(--ink);border-radius:var(--r-sm);padding:6px 8px;font-size:14px;font-weight:700;max-width:160px}
.vbody{flex:1;overflow:auto;padding-block:var(--s4) var(--s5);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.vbody-in{max-width:760px;margin:0 auto}
.sheet{white-space:pre-wrap;font-size:calc(20px * var(--zoom,1));line-height:1.55;margin:0;font-family:var(--sans);overflow-wrap:anywhere}
.sheet.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:calc(16px * var(--zoom,1));white-space:pre;overflow-x:auto;overflow-wrap:normal}
.sheet .ch{color:var(--brown);font-weight:700;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.85em}
.sheet .sec{display:inline-block;font-family:var(--sans);font-weight:700;font-size:13px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;background:var(--sand);color:var(--ink);border-radius:var(--r-pill);padding:2px 10px;margin:4px 0}
.sheet .mt{color:var(--muted);font-size:.8em}
.vnone{color:var(--muted);display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.vfoot{background:var(--white);border-top:1px solid var(--line);padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.vfoot-in{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:var(--s2)}
.vfoot .btn{justify-content:center;padding:14px}
.vnext{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.vnext small{font-weight:400;font-size:13px;overflow-wrap:anywhere}
a.icon{text-decoration:none}
a.btn{text-decoration:none;color:inherit}
@media (prefers-reduced-motion:no-preference){ol.set li,.btn,.chip,.icon{transition:background-color .15s,color .15s}}
.fsec{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.chip .n{font-weight:400;opacity:.7;font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"] .n{opacity:.85}
.vtags{background:var(--sand);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:8px}
.vtags>summary{max-width:760px;margin:0 auto;display:flex;gap:var(--s2) var(--s3);align-items:baseline;list-style:none;cursor:pointer;font-weight:400}
.vtags>summary::-webkit-details-marker{display:none}
.vtags>summary::after{content:"▾";margin-left:auto;color:var(--ink)}
.vtags[open]>summary::after{content:"▴"}
#v-tagsum{font-size:14px;color:var(--brown);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vtags-in{max-width:760px;margin:var(--s2) auto 0;display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap}
.vtags .chip{background:var(--white);border-color:transparent;box-shadow:inset 0 0 0 1px var(--edge)}
.vtags .chip[aria-pressed="true"]{background:var(--lake);color:var(--white);box-shadow:none}
.vtags .chip:hover{background:var(--brown);color:var(--white);box-shadow:none}
.newtag{display:flex;gap:var(--s2);margin-left:auto}
.newtag input{width:11ch;border-radius:var(--r-pill);padding:6px 14px;font-size:14px;border-color:var(--edge)}
.newtag .btn{padding:6px 14px;border-radius:var(--r-pill)}
details.tagsec{padding:0}
details.tagsec summary{display:flex;gap:var(--s2);align-items:baseline;font-weight:400;list-style:none;cursor:pointer}
details.tagsec summary::-webkit-details-marker{display:none}
details.tagsec summary::after{content:"▾";margin-left:auto;color:var(--ink)}
details.tagsec[open] summary::after{content:"▴"}
#tag-sum{font-size:14px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.tagsec #tagchips{margin-top:var(--s2);max-height:none}
.vmeta{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap;margin-top:2px}
.vmeta span{background:var(--sand);color:var(--ink);border-radius:var(--r-pill);padding:2px 10px;font-size:13px;line-height:18px;font-weight:700}
.vmeta small{color:var(--white);font-size:13px}
/* two-column sheet: only where a column stays wide enough to read */
@media (min-width:600px){
  .sheet.cols{column-count:2;column-gap:var(--s5);column-rule:1px solid var(--line)}
  .sheet.cols .sec{break-after:avoid;page-break-after:avoid}
  .vbody:has(.sheet.cols) .vbody-in{max-width:1100px}
}
.vtools .icon[aria-pressed="true"]{background:var(--white);color:var(--lake)}
.chip.hide[aria-pressed="false"]{color:var(--muted);box-shadow:inset 0 0 0 1px var(--edge);border-color:transparent;background:none}
.chip.hide[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.vtags .chip.hide[aria-pressed="true"]{background:var(--ink);color:var(--white);box-shadow:none}
.rolepill{background:var(--ink);color:var(--white);border-radius:var(--r-pill);padding:3px 12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#v-tagchips.static .chip{pointer-events:none}
/* set name and Save share a line */
.nameline{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:end}
.sethead .acts-row{display:flex;gap:var(--s2);align-items:center}
.nameline .btn{padding:11px 22px}

/* every-song tab */
.songlist{display:flex;flex-direction:column;gap:2px;max-height:none}
.songrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s2);padding:9px 6px;border-bottom:1px solid var(--line)}
.songrow:last-child{border-bottom:0}
.songrow.hid{opacity:.55}
.songrow .t{min-width:0}
.songrow .t b{font-weight:700;font-size:17px;overflow-wrap:anywhere}
.songrow .t small{display:block;color:var(--muted);font-size:13px}
.songrow .btn{padding:7px 16px;font-size:15px}

/* a request waiting on you */
.banner{background:var(--sand);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.banner .head{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap}
.banner .ask{font-family:var(--display);font-size:30px;line-height:1.05;margin:0;overflow-wrap:anywhere}
.banner .from{font-size:14px;font-weight:700;color:var(--brown)}
.banner .row .btn{background:var(--white)}
.banner .row .btn.primary{background:var(--lake);color:var(--white)}

/* ---- the site build: sign-in, requests, QR ---- */
.gate{max-width:420px;margin:12vh auto;display:flex;flex-direction:column;gap:14px}
.qrbox{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;margin-top:var(--s3)}
.qrbox .qr{background:var(--white);padding:10px;border-radius:var(--r-sm);line-height:0}
.qrbox .qr img,.qrbox .qr canvas{display:block;width:180px;height:180px}
.qrlink{font-size:14px;word-break:break-all;color:var(--muted)}
.showpill{background:var(--lake);color:var(--white);border-radius:var(--r-pill);padding:3px 12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.showpill.off{background:var(--ink)}
.reqcount{background:var(--brown);color:var(--white);border-radius:var(--r-pill);padding:1px 9px;font-size:12px;font-weight:700;margin-left:4px}
.rolepill{background:var(--ink);color:var(--white);border-radius:var(--r-pill);padding:3px 12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.banner .note-text{font-size:15px;margin:0;overflow-wrap:anywhere}
@media print{.wrap>*:not(#view-show),.syncbar,.btn,header{display:none!important}}