/* Guest-facing share page (routes_share.py, static/share.js). Reuses
   app.css's tokens/.chip/.sheet-family classes for visual consistency with
   the hosted app rather than redefining them — this is genuinely the same
   app, just a read-only, no-login surface of it. */

body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,"Segoe UI",system-ui,sans-serif}

.sharewrap{min-height:100vh;display:flex;flex-direction:column}

/* ── first-visit name/role prompt ─────────────────────────────────────── */
.shareprompt{flex:1;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.sharecard{width:100%;max-width:22rem;background:var(--panel);border:1px solid var(--line);
  border-radius:1rem;padding:1.6rem 1.4rem;box-shadow:0 10px 40px rgba(0,0,0,.12);
  box-sizing:border-box;text-align:center}
.sharecard h1{font-size:1.15rem;margin:0 0 .3rem}
.sharecard .dim{font-size:.85rem;color:var(--muted);margin-bottom:1.1rem;line-height:1.4}
.sharefield{text-align:left;margin-bottom:.9rem}
.sharefield label{font-size:.72rem;font-weight:650;color:var(--muted);display:block;margin-bottom:.35rem}
.sharefield input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r);
  padding:.65rem .7rem;font-size:.92rem;background:var(--panel);color:var(--fg)}
.sharefield .hint{font-size:.7rem;color:var(--muted);margin-top:.3rem}
.sharecard button.primary{width:100%;background:var(--accent);color:var(--accent-fg);border:0;
  border-radius:var(--r);padding:.75rem;font-size:.95rem;font-weight:650}
.sharefoot{font-size:.7rem;color:var(--muted);margin-top:.9rem;line-height:1.4}
.shareerror{font-size:.9rem;color:var(--bad);text-align:center;padding:2rem 1rem}

/* ── the reader itself ─────────────────────────────────────────────────── */
.sharehead{background:var(--panel);border-bottom:1px solid var(--line);box-sizing:border-box}
.shareheadrow{height:var(--head,46px);display:flex;align-items:center;gap:.6rem;padding:0 .9rem;box-sizing:border-box}
.shareheadrow .t{flex:1;min-width:0;font-size:.9rem;font-weight:650;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Hidden until a rehearsal/perform session is actually running (Phase 2's
   polling sets .on) — never shown as a static, possibly-stale badge. */
.sharelivepill{display:none;align-items:center;gap:.3rem;background:var(--p1bg,#fdeaea);
  color:var(--p1fg,#b42318);font-size:.68rem;font-weight:700;padding:.18rem .5rem;
  border-radius:999px;flex:none}
.sharelivepill.on{display:inline-flex}
.sharelivepill .dot{width:.4rem;height:.4rem;border-radius:999px;background:currentColor}
.shareviewpill{background:var(--panel2);color:var(--muted);border-radius:999px;padding:.2rem .6rem;
  font-size:.7rem;font-weight:650;white-space:nowrap}
.sharepassbtn,.sharelistcopy{background:none;border:1px solid var(--line);color:var(--fg);border-radius:999px;
  min-height:32px;padding:0 .7rem;font-size:.75rem;font-weight:650;white-space:nowrap;cursor:pointer}
.sharesavebar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;padding:0 .9rem .6rem}
.sharesavebtn{background:var(--accent);color:var(--accent-fg);border:0;border-radius:999px;min-height:36px;
  padding:0 .95rem;font-size:.82rem;font-weight:700;cursor:pointer}
.sharesavebtn:disabled{opacity:.6;cursor:default}
.sharesaveopts{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;font-size:.82rem}
.sharesaveopts[hidden]{display:none}
.sharesaveopts a{color:var(--accent);font-weight:650}
.shareintro{margin:0;padding:0 .9rem .6rem;font-size:.9rem;white-space:pre-line;color:var(--fg)}
.sharelower{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;padding:.2rem 0 .5rem;font-size:.82rem}
.sharelower label{font-weight:650}
.sharelower select{font:inherit;margin-left:.3rem}
.sharelowerhint{color:var(--accent)}
#sharePrint{display:none}
@media print{
  body > :not(#sharePrint){display:none!important}
  #sharePrint{display:block;font:13pt/1.3 Georgia,"Times New Roman",serif;color:#000;background:#fff}
  #sharePrint h1{font-size:22pt;margin:0 0 .3em}
  #sharePrint .intro{font-size:11pt;margin:0 0 .6em;white-space:pre-line}
  #sharePrint ol{list-style:none;padding:0;margin:0}
  #sharePrint li{display:flex;gap:.6em;align-items:baseline;padding:.12em 0;border-bottom:.5pt solid #bbb;break-inside:avoid}
  #sharePrint .n{min-width:1.8em;text-align:right;color:#444}
  #sharePrint .t{flex:1;min-width:0}
  #sharePrint small{display:block;font-size:10.5pt;color:#444;font-style:italic}
  #sharePrint .r{font-size:11pt;color:#333;white-space:nowrap}
  #sharePrint .tot{font-size:11pt;margin:0 0 .5em;color:#333}
  #sharePrint .madewith{margin-top:.8em;font:9pt Arial,sans-serif;color:#555}
}
.shareflash{position:fixed;left:.9rem;right:.9rem;bottom:4.5rem;z-index:7;background:var(--fg);color:var(--bg);
  border-radius:.7rem;padding:.7rem .9rem;font-size:.85rem;text-align:center;word-break:break-all}
.shareguests{display:flex;gap:.35rem;flex-wrap:wrap;padding:0 .9rem .55rem}
.shareguest{display:inline-flex;align-items:center;gap:.25rem;background:var(--panel2);
  border-radius:999px;padding:.18rem .55rem;font-size:.72rem;font-weight:600}
.shareguest span{color:var(--muted);font-weight:500}
/* Watching live is always visible (BAND_SHARE_PLAN.md §2b). */
.shareguest.watching{background:var(--p1bg,#fdeaea);color:var(--p1fg,#b42318)}
.shareguest.watching::before{content:"👁"}
.sharereport{border:0;background:none;color:var(--muted);font:inherit;padding:0 .1rem;margin:-.3rem -.35rem -.3rem 0;min-width:28px;min-height:28px;cursor:pointer}
.sharewatchcount{display:inline-flex;align-items:center;font-size:.72rem;font-weight:650;color:var(--muted);padding:0 .2rem}
.sharestatus{display:flex;align-items:center;gap:.4rem;padding:.45rem .9rem .55rem;
  border-top:1px solid var(--line2);font-size:.74rem;font-weight:650;color:var(--muted)}
.sharestatusdot{width:.48rem;height:.48rem;border-radius:50%;background:currentColor;flex:none}
.sharestatus.synced{color:var(--p4fg,#157347)}
.sharestatus.browsing{color:var(--accent)}
.sharestatus.reconnecting{color:var(--bad,#b42318)}

/* Phase 4: a leader-sent cue, fixed near the top so it's visible regardless
   of scroll position — flashes for a few seconds (see showCue() in
   share.js) then fades on its own, never needs a dismiss tap. */
.sharecuetoast{position:fixed;left:.9rem;right:.9rem;top:.6rem;z-index:6;
  background:var(--accent);color:var(--accent-fg);border-radius:.7rem;padding:.7rem .9rem;
  font-size:.92rem;font-weight:700;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.25);
  opacity:0;transform:translateY(-.5rem);pointer-events:none;
  transition:opacity .25s,transform .25s}
.sharecuetoast.on{opacity:1;transform:translateY(0)}

/* Shown only while the guest has scrolled away from the leader's live song
   — see paintBanner() in share.js. */
.sharebanner{display:none;position:fixed;left:.9rem;right:.9rem;bottom:4.6rem;z-index:5;
  background:var(--fg);color:var(--bg);border-radius:.7rem;padding:.6rem .8rem;
  align-items:center;gap:.6rem;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.sharebanner .t{font-size:.78rem;font-weight:650}
.sharebanner .sub{font-size:.72rem;opacity:.75}
.sharebanner button{flex:none;background:var(--bg);color:var(--fg);border:0;border-radius:.45rem;
  padding:.4rem .65rem;font-size:.75rem;font-weight:700}

.sharesong{padding:.9rem 1.1rem .2rem}
.sharesong .title{font-size:1.15rem;font-weight:700}
.sharesong .sub{font-size:.8rem;color:var(--muted);margin-top:.15rem}
.sharecapobtn{margin-top:.4rem;font:inherit;font-size:.78rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--fg);cursor:pointer}
.sharecapobtn.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.sharechart{padding:.6rem 1.1rem 1rem;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  line-height:1.65;font-size:calc(.92rem * var(--sharescale,1))}
/* Unbox app.css's .chordpro (there, a scrollable card in a materials list)
   into flowing full-page content — same override app.css's own
   .readermaterials .chordpro applies for the hosted reader. */
.sharechart .chordpro{font-size:calc(.88rem * var(--sharescale,1));line-height:1.7;
  max-height:none;overflow:visible;background:none;border-radius:0;padding:0;margin-top:0}
/* Phase 5 ("Follow along"): the leader's current line, on the current song
   only — see paintLine() in share.js. */
.sharechart .followline{background:color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius:.35rem;margin:0 -.5rem;padding:0 .5rem;box-shadow:inset 3px 0 0 var(--accent)}

.sharenotefield{width:100%;box-sizing:border-box;margin-top:.6rem;border:1px solid var(--line);
  border-radius:var(--r);padding:.55rem .65rem;font-size:.85rem;background:var(--panel);color:var(--fg);
  resize:vertical;min-height:2.6rem;font-family:inherit}

.sharenav{position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem calc(.6rem + var(--safeb));box-sizing:border-box}
.sharenav button{flex:1;min-height:2.6rem;border-radius:var(--r);border:1px solid var(--line);
  background:var(--panel);color:var(--fg);font-size:.85rem;font-weight:600}
.sharenav button:disabled{opacity:.4}
.sharenav .pos{font-size:.78rem;color:var(--muted);white-space:nowrap;min-width:3.2rem;text-align:center}
.sharenav button.pos{flex:none;border:0;background:none;text-decoration:underline dotted;cursor:pointer;padding:0 .4rem}

/* The set as a table — where the page opens (paintSetList() in share.js). */
.sharelist{padding:.4rem 0 calc(2rem + var(--safeb))}
.sharelisthead{display:flex;align-items:center;gap:.6rem;padding:.5rem 1.1rem}
.sharelistsum{flex:1;min-width:0;font-size:.82rem}
.sharelistsum .dim{color:var(--muted)}
.sharesort{display:flex;align-items:center;gap:.35rem;padding:0 1.1rem .55rem;overflow-x:auto;scrollbar-width:none}
.sharesort .dim{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-right:.15rem}
.sharesort .chip{flex:none;min-height:36px;padding:0 .75rem;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--fg);font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap}
.sharesort .chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
/* app.css's phone layout turns every table into stacked blocks (its catalog
   cards) — this one stays a real table at every width. */
.sharelisttab{display:table;width:100%;border-collapse:collapse;table-layout:auto}
.sharelisttab tbody{display:table-row-group}
.sharelisttab tr{display:table-row;padding:0}
.sharelisttab td{display:table-cell;width:auto;white-space:normal;border-top:1px solid var(--line2);
  padding:.55rem .3rem;vertical-align:middle;overflow:visible;text-overflow:clip}
.sharelisttab tr.open{cursor:pointer}
.sharelisttab tr.open:active{background:var(--panel2)}
.sharelisttab td.n{width:1.6rem;padding-left:1rem;color:var(--muted);font-size:.85rem}
.sharelisttab td.song{min-width:0}
.sharelisttab .t{font-size:.95rem;font-weight:650;overflow-wrap:anywhere}
.sharelisttab .sub{font-size:.76rem;color:var(--muted);margin-top:.1rem}
.sharelisttab .setnote{font-size:.76rem;margin-top:.15rem}
.sharelisttab .liveflag{margin-left:.4rem;font-size:.62rem;font-weight:750;color:var(--bad,#b42318);vertical-align:.1rem}
.sharelisttab td.votes{white-space:nowrap;text-align:right}
.sharelistvote{min-width:44px;min-height:44px;padding:0 .35rem;margin-left:.15rem;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--fg);font-size:.8rem;font-weight:650;cursor:pointer}
.sharelistvote.on{border-color:var(--accent);background:var(--rndbg,#e6ecfd);color:var(--rndfg,#1849a9)}
.sharelisttab td.go{width:.8rem;padding-right:.8rem;color:var(--muted);font-size:1.2rem;text-align:right}
.sharelistfoot{padding:.8rem 1.1rem;font-size:.78rem;color:var(--muted)}
/* Band level: a native select dressed as a level pill (p1-p5 colours from app.css). */
.sharelvl{appearance:none;-webkit-appearance:none;min-height:36px;padding:0 .7rem;border-radius:999px;
  border:1px dashed var(--line);background:transparent;color:var(--muted);font:inherit;font-size:.78rem;
  font-weight:650;cursor:pointer;max-width:100%}
.sharelvl.p1,.sharelvl.p2,.sharelvl.p3,.sharelvl.p4,.sharelvl.p5{border-style:solid;border-color:transparent}
.sharelvl.p1{background:var(--p1bg);color:var(--p1fg)}
.sharelvl.p2{background:var(--p2bg);color:var(--p2fg)}
.sharelvl.p3{background:var(--p3bg);color:var(--p3fg)}
.sharelvl.p4{background:var(--p4bg);color:var(--p4fg)}
.sharelvl.p5{background:var(--p5bg);color:var(--p5fg)}
.sharecompact{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem}
.sharecompact .sharelvl{min-height:30px;padding:0 .6rem;font-size:.74rem}
.sharebandtag:not(:empty){margin-top:.45rem}
/* Phones: one column of song info; the meta columns fold into .sharecompact. */
.sharelisttab thead,.sharelisttab td.meta,.sharelisttab td.lvl{display:none}
/* Wider screens: a centred, readable table with real columns. */
@media (min-width:700px){
  .sharelist{width:100%;max-width:64rem;margin:0 auto;padding:1rem 1.25rem calc(2rem + var(--safeb));box-sizing:border-box}
  .sharelisthead{padding:.5rem 0 .7rem}
  .sharelistsum{font-size:.95rem}
  .sharesort{padding:0 0 .9rem}
  .sharelisttab{background:var(--panel);border:1px solid var(--line);border-radius:.8rem;
    border-collapse:separate;border-spacing:0;overflow:hidden}
  .sharelisttab thead{display:table-header-group}
  .sharelisttab thead tr{display:table-row}
  .sharelisttab th{display:table-cell;position:static;background:var(--panel2);padding:.6rem .6rem;
    border-bottom:1px solid var(--line)}
  .sharelisttab th.n{padding-left:1.1rem}
  .sharelisttab tbody tr:first-child td{border-top:0}
  .sharelisttab td{padding:.75rem .6rem}
  .sharelisttab td.n{width:2rem;padding-left:1.1rem;font-size:.95rem;font-variant-numeric:tabular-nums}
  .sharelisttab .t{font-size:1.08rem}
  .sharelisttab .sub,.sharelisttab .setnote{font-size:.85rem}
  .sharelisttab td.meta{display:table-cell;white-space:nowrap;font-size:.9rem;color:var(--fg);
    font-variant-numeric:tabular-nums}
  .sharelisttab td.meta.dim{color:var(--muted)}
  .sharelisttab td.lvl{display:table-cell;width:8.5rem}
  .sharelisttab .sharecompact{display:none}
  .sharelisttab tbody tr{background:var(--panel)}
  .sharelisttab th:not(.song),.sharelisttab td:not(.song){width:1%}
  .sharelisttab th.meta,.sharelisttab td.meta{padding-inline:.9rem}
  .sharelisttab tr.open:hover{background:var(--panel2)}
  .sharelisttab td.go{padding-right:1rem}
}

/* Listening-playlist picker (showListen) — a bottom sheet. */
.shareoverviewback{position:fixed;inset:0;z-index:8;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;justify-content:center}
.shareoverview{background:var(--panel);width:min(100%,36rem);max-height:80vh;overflow:auto;border-radius:.9rem .9rem 0 0;padding:.4rem 0 1rem}
.shareoverviewhead{display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;position:sticky;top:0;background:var(--panel)}
.shareoverviewhead .t{flex:1;font-weight:700}
.shareoverviewhead button{min-height:40px;border:1px solid var(--line);background:none;color:var(--fg);border-radius:var(--r);padding:0 .8rem}
.shareoverviewrow{display:flex;align-items:center;gap:.6rem;width:100%;min-height:48px;padding:0 .9rem;border:0;
  border-top:1px solid var(--line2);background:none;color:var(--fg);text-align:left;font-size:.9rem;cursor:pointer}
.shareoverviewrow.on{background:var(--panel2)}
.shareoverviewrow .n{color:var(--muted);min-width:1.4rem}
.shareoverviewrow .title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shareoverviewrow .tally{font-size:.78rem;white-space:nowrap}
.shareoverviewrow .liveflag{font-size:.65rem;font-weight:750;color:var(--bad,#b42318)}

.sharefab{position:fixed;right:.9rem;bottom:calc(4.2rem + var(--safeb));display:flex;flex-direction:column;
  gap:.5rem;background:color-mix(in srgb, var(--panel2) 55%, transparent);border:1px solid var(--line);
  border-radius:1.1rem;padding:.4rem}
.sharefab button{width:2.4rem;height:2.4rem;border-radius:999px;border:0;background:none;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--fg)}
.sharefab button.on{background:var(--accent);color:var(--accent-fg)}

/* Phase 6 ("shared pen" / personal pen): a freehand canvas over the chart —
   the guest-facing twin of app.css's .readerannotwrap/.readerannot for the
   owner's own reader. Sits over .sharechart, not inside it, so a poll-
   triggered repaint of the chart text never has to touch (or interrupt) it. */
.sharechartwrap{position:relative;margin-bottom:calc(6rem + var(--safeb))}
.sharedrawcanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;pointer-events:none}
.sharedrawcanvas.active{touch-action:none;cursor:crosshair}
.sharedrawpicker{display:none;gap:.4rem;flex-wrap:wrap;padding:0 1.1rem .6rem;position:sticky;
  top:0;z-index:4;background:var(--bg)}
.sharedrawpicker .chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:.3rem .65rem;font-size:.74rem;font-weight:650;color:var(--fg)}
.sharedrawpicker .chip.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}

/* iPad landscape: keep the chart broad, but constrain the fixed controls
   to a comfortable reading column and restore touch-sized targets after
   app.css switches from its phone layout to the wide reader layout. */
@media (min-width:861px) and (max-width:1180px){
  .shareheadrow{min-height:3.25rem;height:auto;padding:.55rem 1.1rem}
  .shareheadrow .t{font-size:1rem}
  .shareguests{padding:0 1.1rem .65rem}
  .shareguest{font-size:.78rem;padding:.28rem .65rem}
  .sharestatus{padding:.55rem 1.1rem .65rem;font-size:.82rem}
  .sharesong{padding:1rem 1.35rem .3rem}
  .sharesong .title{font-size:1.25rem}
  .sharechart{padding:.7rem 1.35rem 1.2rem;font-size:calc(1rem * var(--sharescale,1))}
  .sharechart .chordpro{font-size:calc(.98rem * var(--sharescale,1))}
  .sharenotefield{min-height:4rem;font-size:1rem}
  .sharenav{left:50%;right:auto;width:min(100%,52rem);transform:translateX(-50%);
    border-left:1px solid var(--line);border-right:1px solid var(--line);
    border-radius:.8rem .8rem 0 0;padding:.7rem 1rem calc(.7rem + var(--safeb))}
  .sharenav button{min-height:48px;font-size:.92rem}
  .sharefab{right:max(.9rem,calc((100vw - 52rem)/2 + .9rem));bottom:calc(5rem + var(--safeb));
    flex-direction:row}
  .sharefab button{width:2.75rem;height:2.75rem;font-size:.92rem}
  .sharebanner,.sharecuetoast{left:50%;right:auto;width:min(calc(100vw - 1.8rem),50rem);
    transform:translateX(-50%)}
  .sharecuetoast{transform:translate(-50%,-.5rem)}
  .sharecuetoast.on{transform:translate(-50%,0)}
}

/* Follow toggle (share.js) — the guest's own on/off for tracking the leader. */
.sharefollowbtn{margin-left:auto;flex:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);
  border-radius:999px;padding:.3rem .7rem;font-size:.74rem;font-weight:700;min-height:2rem}
.sharefollowbtn:not(.on){background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.sharefollowbtn.on{border-color:currentColor;color:var(--p4fg,#157347)}
.sharestatus .sharestatustext{min-width:0}

/* Material tabs and file charts (PDF pages, alphaTab scores). */
.sharemattabs{display:none;gap:.4rem;flex-wrap:wrap;padding:.4rem 1.1rem 0}
.sharemattabs .chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:.35rem .75rem;font-size:.8rem;font-weight:650;color:var(--fg)}
.sharemattabs .chip.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.sharechart.filechart{white-space:normal;font-family:inherit}
.sharepdf{display:flex;flex-direction:column;gap:.5rem}
.sharepdfpage{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.sharescorehost{background:#fff;color:#000;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}

/* Guest autoscroll speed, shown while it runs. */
.sharespeed{display:none;align-items:center;justify-content:center;gap:.15rem;font-size:.75rem;font-weight:700}
.sharefab .sharespeed button{width:1.9rem;height:1.9rem}

/* Fixed controls over scrolling text: solid, so the chart doesn't show
   through them mid-scroll. */
.sharefab{background:var(--panel);box-shadow:0 4px 18px rgba(0,0,0,.14)}
.sharedrawsep{width:1px;align-self:stretch;background:var(--line);margin:0 .15rem}
.sharedrawpicker .chip:disabled{opacity:.45}
.sharenotesheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:1.2rem}
.sharenotesheet .sharecard{text-align:left}
.sharenotesheet .sharenotefield{margin:0 0 .7rem;font-size:1rem;min-height:4.5rem}
.sharenotebtns{display:flex;gap:.5rem;margin-top:.6rem}
.sharenotebtns button{flex:1;background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-radius:var(--r);padding:.6rem;font-size:.9rem}
.sharenotebtns .sharenotedel{color:var(--bad)}

/* Listening playlist (BAND_SHARE_PLAN.md §3). */
.sharelistenplayer{display:flex;flex-direction:column;gap:.5rem;padding:.6rem .9rem 0}
.sharelistenplayer iframe{width:100%;height:352px;border:0;border-radius:.6rem;background:var(--panel2)}
.sharelistenopen{font-size:.85rem;font-weight:650;color:var(--accent);min-height:40px;display:inline-flex;align-items:center}

/* Desktop: the header lines up with the centred set table instead of
   hugging the window's left edge. */
@media (min-width:1181px){
  .shareheadrow,.shareguests,.sharestatus{padding-inline:max(1.25rem,calc((100vw - 64rem)/2 + 1.25rem))}
  .shareheadrow{min-height:3.4rem;height:auto}
  .shareheadrow .t{font-size:1.15rem}
  .sharestatus{font-size:.85rem}
}

.sharecredit{margin:1.5rem 0 1rem;text-align:center;font-size:.85rem;color:var(--muted)}
.sharecredit:empty{display:none}