:root {
  --bg: #0f1115; --panel: #171a21; --panel-2: #1f232c; --line: #2b303b;
  --text: #e8eaef; --muted: #8b93a3; --accent: #f5a524; --accent-ink: #1a1305;
  --gig: #f5a524; --rehearsal: #4cc38a; --other: #7c8cff; --danger: #ef5350;
  --radius: 10px; --player-h: 92px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f6f6f3; --panel: #ffffff; --panel-2: #f0f0ec; --line: #deded8; --text: #1b1d22; --muted: #6b7180; --accent: #c77700; --accent-ink: #fff; color-scheme: light; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.hidden { display: none !important; }
body:not(.is-admin) .admin-only { display: none !important; }
body:not(.can-calendar) .calendar-only { display: none !important; }
.role-badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line); text-transform: capitalize; }
.role-badge.admin { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.role-badge.calendar { background: var(--rehearsal); color: #0d2318; border-color: var(--rehearsal); text-transform: none; }
.sl-view-notes { color: var(--muted); margin: 0 0 12px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .error { color: var(--danger); min-height: 1.2em; }
h1, h2, h3 { margin: 0; } h2 { font-size: 20px; } h3 { font-size: 15px; margin: 24px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
input, select, textarea { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; }
textarea { min-height: 70px; resize: vertical; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }

.btn { font: inherit; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 7px 12px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); }
.btn.small { padding: 4px 9px; font-size: 13px; }
.btn.icon { width: 38px; height: 38px; justify-content: center; padding: 0; border-radius: 50%; background: transparent; font-size: 14px; }
.btn.icon.big { width: 46px; height: 46px; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-size: 18px; }
.btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Sign-in page: the band photo fills the screen, kept to the right so the band stays in view, and the
   sign-in box sits top right where the photo's QR code is. On tall screens (phones, iPad portrait) the
   photo becomes a full-width banner with the sign-in box below it. */
/* The photo is always shown at the full width of the screen (it's 2:1, so it's half as tall as it is wide),
   so nobody in it is ever cropped. Below it, the page fades into the photo's desert-ground colour.
   The QR code sits from 76% to 88% across and about 3.5% down the photo, so the box is placed over it. */
.login { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden;
  background:
    linear-gradient(to bottom, transparent calc(50vw - 120px), #241c14 50vw) top / 100% 100% no-repeat,
    url("login-bg.jpg") center top / 100% auto no-repeat,
    #241c14; }
.login-card { position: absolute; width: 300px;
  left: clamp(16px, calc(85vw - 150px), calc(100vw - 316px));
  top: max(16px, env(safe-area-inset-top), 1.5vw);
  padding: 18px 20px 16px; display: grid; gap: 9px; color: #f4ece4;
  background: rgba(24, 17, 15, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(236, 211, 185, .25); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.login-card label { color: #d9c8b8; }
.login-card input { background: rgba(255, 255, 255, .08); border-color: rgba(236, 211, 185, .3); color: #fff; }
.login-card input:focus { outline: 2px solid #e8a33a; outline-offset: 1px; }
.login-card .btn.primary { justify-content: center; margin-top: 4px; }
.login-head { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.login-head .login-title, .login-head .login-sub { text-align: left; }
.band-logo { width: 92px; height: 92px; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.band-logo .logo-arc { font-family: Rye, Georgia, serif; }
.band-logo .logo-band { font-family: Ultra, Rockwell, Georgia, serif; }
.login-title { font: 400 26px/1.1 Rye, Georgia, serif; text-align: center; color: #ecd3b9; letter-spacing: .5px; }
.login-sub { margin: 4px 0 0; text-align: center; font-size: 13px; color: #c8b5a3; letter-spacing: .08em; text-transform: uppercase; }
/* Tall screens (phones, iPad portrait): the photo is a full-width banner and the box sits below it. */
@media (max-aspect-ratio: 5/4) {
  .login { overflow: visible; display: flex; flex-direction: column; align-items: center;
    background:
      linear-gradient(to bottom, transparent calc(50vw - 90px), #241c14 50vw) top / 100% 100% no-repeat,
      url("login-bg-small.jpg") center top / 100% auto no-repeat,
      #241c14;
    padding: calc(50vw - 28px) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  /* No blur here: the box sits on plain ground colour, and a blur would trap the logo inside the box. */
  .login-card { position: static; width: min(380px, 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* The logo moves up onto the photo, over the QR code (about 82% across, 7.6% of the width down). */
  .band-logo { position: absolute; width: 18vw; height: 18vw; left: 73vw; top: max(4px, env(safe-area-inset-top), calc(7.6vw - 9vw)); }
  .login-head { justify-content: center; }
  .login-head .login-title, .login-head .login-sub { text-align: center; }
}
@media (max-width: 700px) and (max-aspect-ratio: 5/4) {
  .login { padding-top: calc(50vw + 4px); } /* start just below the photo on phones */
}
.login-card .error { margin: 0; min-height: 0; }
.login-card .error:empty { display: none; }
@media (min-width: 701px) and (max-aspect-ratio: 5/4) {
  .login { background:
      linear-gradient(to bottom, transparent calc(50vw - 90px), #241c14 50vw) top / 100% 100% no-repeat,
      url("login-bg.jpg") center top / 100% auto no-repeat,
      #241c14; }
}
/* Phones turned sideways: the photo fills the short screen and the box can scroll. */
@media (max-height: 500px) and (min-aspect-ratio: 5/4) {
  .login { overflow: auto; background: #241c14 url("login-bg-small.jpg") center / cover no-repeat; }
  .band-logo { width: 84px; height: 84px; }
  .login-card { top: 12px; left: auto; right: max(16px, env(safe-area-inset-right)); }
}

.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap;
  padding: max(10px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left)); }
.brand { font-weight: 700; font-size: 17px; }
.tabs { display: flex; gap: 4px; flex: 1; }
.tab { font: inherit; background: none; border: 0; color: var(--muted); padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.tab.active { color: var(--text); background: var(--panel-2); }
.who { display: flex; gap: 8px; align-items: center; color: var(--muted); }

main { padding: 20px; padding-bottom: calc(var(--player-h) + 32px); max-width: 1200px; margin: 0 auto; }
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input[type=search] { max-width: 260px; }
.spacer { flex: 1; }
.legend { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; }
.dot.gig, .ev.gig { background: var(--gig); } .dot.rehearsal, .ev.rehearsal { background: var(--rehearsal); } .dot.other, .ev.other { background: var(--other); }

/* Calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); gap: 1px; }
.cal-dow { background: var(--panel-2); padding: 6px 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; }
.cal-day { background: var(--panel); min-height: 96px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.cal-day:hover { background: var(--panel-2); }
.cal-day.out { opacity: .4; }
.cal-day .num { font-size: 12px; color: var(--muted); }
.cal-day.today .num { color: var(--accent-ink); background: var(--accent); border-radius: 10px; padding: 0 6px; align-self: flex-start; font-weight: 700; }
.ev { font-size: 12px; color: #111; border-radius: 5px; padding: 1px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
/* Calendar boxes: times on the first line, the title below. */
.cal-day .ev { padding: 2px 6px; line-height: 1.3; }
.cal-day .ev-time { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.cal-day .ev-title { display: block; overflow: hidden; text-overflow: ellipsis; }
.upcoming { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.upcoming li { display: flex; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; }
.upcoming .date { min-width: 120px; font-weight: 600; }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; color: #111; text-transform: capitalize; }

/* Set lists */
.split { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pick-list li { padding: 10px 12px; cursor: pointer; }
.pick-list li.active { border-color: var(--accent); }
.detail-col { min-width: 0; }
.empty { padding: 40px; text-align: center; }
.sl-form { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 14px; }
.sl-form .full { grid-column: 1 / -1; }
.sl-items { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; counter-reset: n; }
.sl-items li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.sl-items li.dragging { opacity: .4; } .sl-items li.over { border-color: var(--accent); }
.sl-items .grip { cursor: grab; color: var(--muted); user-select: none; }
.sl-items .n { width: 22px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.sl-items .t { flex: 1; min-width: 0; } .sl-items .t small { color: var(--muted); margin-left: 6px; }
.sl-items input { max-width: 200px; padding: 4px 8px; font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Songs */
.song-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.song { padding: 14px; display: grid; gap: 8px; }
.song h4 { margin: 0; font-size: 16px; } .song .meta { color: var(--muted); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); display: inline-flex; gap: 6px; align-items: center; }
.chip a { color: inherit; text-decoration: none; } .chip button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; }

/* Player. Its real height is measured in app.js and stored in --player-h, so content and the
   sheet music viewer always stop just above it. */
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--panel); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 2fr) auto; grid-template-areas: "now controls seek practice";
  gap: 8px 16px; align-items: center;
  padding: 10px max(20px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.player .now { grid-area: now; min-width: 0; } .player .controls { grid-area: controls; }
.player .seek { grid-area: seek; } .player .practice { grid-area: practice; }
.np-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controls { display: flex; gap: 6px; align-items: center; }
.seek { display: flex; align-items: center; gap: 10px; }
.seek-wrap { position: relative; flex: 1; }
.seek-wrap input { width: 100%; padding: 0; accent-color: var(--accent); background: none; border: 0; }
.loop-band { position: absolute; top: 50%; height: 14px; transform: translateY(-50%); background: color-mix(in srgb, var(--accent) 30%, transparent); border: 1px solid var(--accent); border-radius: 4px; pointer-events: none; }
.time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; min-width: 40px; text-align: center; }
.practice { display: flex; gap: 6px; align-items: center; }
.practice label { display: flex; align-items: center; gap: 6px; } .practice select { width: auto; padding: 4px 6px; }
.practice input[type=range] { width: 80px; padding: 0; border: 0; background: none; accent-color: var(--accent); }

/* Sheet drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: var(--player-h); width: min(720px, 100%); z-index: 9; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,.3); }
.drawer-head { display: flex; gap: 8px; align-items: center; padding: max(10px, env(safe-area-inset-top)) 12px 10px; border-bottom: 1px solid var(--line); }
.drawer-head strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-head select { width: auto; max-width: 200px; padding: 4px 8px; }
.sheet-view { flex: 1; overflow: auto; background: #fff; }
.sheet-view iframe { width: 100%; height: 100%; border: 0; }
.sheet-view img { width: 100%; display: block; }
.sheet-view pre { color: #111; padding: 16px; white-space: pre-wrap; margin: 0; }
.sheet-view .muted { padding: 30px; text-align: center; }

/* Modal + toast */
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
.modal-box { width: min(520px, 100%); max-height: 90vh; max-height: 90dvh; overflow: auto; -webkit-overflow-scrolling: touch; padding: 22px; display: grid; gap: 12px; }
.modal-box .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-box .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.modal-box .actions .left { margin-right: auto; }
.toast { position: fixed; bottom: calc(var(--player-h) + 16px); left: 50%; transform: translateX(-50%); z-index: 30; background: var(--text); color: var(--bg); padding: 8px 16px; border-radius: 20px; font-size: 14px; }

/* Tablets (iPad portrait and landscape): player on two rows, tabs on their own row, full-width sheet viewer. */
@media (max-width: 1100px) {
  .player { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "now controls practice" "seek seek seek"; }
}
@media (max-width: 1000px) {
  .topbar { row-gap: 6px; padding-bottom: 6px; }
  .brand { flex: 1; }
  .tabs { order: 3; flex-basis: 100%; }
  .tab { flex: 1; text-align: center; }
  .drawer { width: 100%; border-left: 0; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .cal-day { min-height: 64px; } .ev { font-size: 10px; padding: 0 3px; }
  main { padding: 16px; padding-bottom: calc(var(--player-h) + 24px); }
  .sl-form, .modal-box .grid2 { grid-template-columns: 1fr; }
}
/* Phones: player on three rows. */
@media (max-width: 700px) {
  .player { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "now controls" "seek seek" "practice practice"; }
  .practice { flex-wrap: wrap; gap: 4px; }
  .speed-label { display: none; }
  .practice .btn.small { padding: 6px 10px; }
}

/* Touch screens (iPad, iPhone): finger-sized targets, no zoom when a field is tapped. */
@media (pointer: coarse) {
  button, a, select, .cal-day, .tab, .pick-list li, .upcoming li { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .btn { min-height: 44px; padding: 8px 14px; }
  .btn.small { min-height: 40px; padding: 6px 12px; font-size: 14px; }
  .btn.icon { width: 44px; height: 44px; min-height: 44px; font-size: 16px; }
  .btn.icon.big { width: 54px; height: 54px; font-size: 20px; }
  .tab { padding: 11px 14px; font-size: 16px; }
  input, select, textarea { font-size: 16px; }
  input:not([type=range]):not([type=file]):not([type=checkbox]), select { min-height: 44px; }
  .practice select { min-height: 40px; padding: 4px 8px; }
  .sl-items input { font-size: 16px; padding: 6px 10px; }
  .chip { font-size: 14px; padding: 6px 10px; }
  .chip button { min-width: 28px; min-height: 28px; font-size: 14px; }
  .pick-list li { padding: 14px; }
  .sl-items li { padding: 8px 10px; }
  .drawer-head select { min-height: 40px; }
  .seek-wrap input[type=range] { height: 32px; }
  /* iPad and iPhone ignore page volume controls; the device's own buttons set the volume. */
  #pl-vol { display: none; }
  .cal-day:hover { background: var(--panel); }
}

/* Printable set list for the stage */
@media print {
  .topbar, .player, .drawer, .list-col, .no-print, .toast { display: none !important; }
  body, main { background: #fff; color: #000; padding: 0; }
  .split { display: block; }
  .print-only { display: block !important; }
  .sl-items li { border: 0; background: none; font-size: 26px; font-weight: 700; padding: 4px 0; color: #000; }
  .sl-items .t small { font-size: 16px; color: #444; }
}
.print-only { display: none; }
.sheet-view { display: flex; flex-direction: column; }
.sheet-view iframe { flex: 1; min-height: 0; }
/* PDFs are drawn page by page (PDF.js), because iPad Safari shows only page 1 of a PDF inside a page. */
.sheet-view.pdf { background: #d9d9d4; }
.pdf-pages { padding: 8px; display: grid; gap: 8px; justify-items: center; }
.pdf-page { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.pdf-status { padding: 30px; text-align: center; color: #555b66; }
.link-note { background: #fff7e0; color: #5a4300; font-size: 12px; padding: 6px 12px; border-bottom: 1px solid #f0dca0; }
.web-card { margin: auto; max-width: 420px; padding: 32px 24px; text-align: center; color: #1b1d22; display: grid; gap: 12px; justify-items: center; }
.web-card h3 { color: #1b1d22; text-transform: none; letter-spacing: 0; font-size: 18px; margin: 0; }
.web-card .muted { color: #555b66; }
.web-icon { font-size: 40px; }
.edit-sheets { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.edit-sheets li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }

/* ===================================================================================
   iPhone layout. Everything below applies only at phone sizes: narrower than 700px, or a touch
   screen shorter than 500px (an iPhone turned sideways). Every iPad is larger in both directions,
   so the desktop and iPad layouts are unaffected. The same rule is in app.js as phoneQuery.
   =================================================================================== */
.phone-only { display: none !important; }
.day-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.day-events li { display: flex; gap: 10px; align-items: center; padding: 12px; cursor: pointer; }

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .acct-btn.phone-only, .sheet-zoom.phone-only, .expand.phone-only { display: inline-flex !important; }
  .mini-progress.phone-only { display: block !important; }

  /* Header: brand and an account button on one row, tabs below. */
  .topbar { gap: 8px; row-gap: 4px; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); }
  .brand { flex: 1; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .acct-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); font: 700 16px/1 system-ui, -apple-system, sans-serif; align-items: center; justify-content: center; cursor: pointer; }
  .who { display: none; position: absolute; top: calc(100% - 4px); right: max(12px, env(safe-area-inset-right)); z-index: 6; min-width: 230px;
    flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; color: var(--text);
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
  .topbar.acct-open .who { display: flex; }
  .who #who { font-weight: 600; } .who .role-badge { align-self: flex-start; }
  .who .btn { justify-content: center; }
  .tabs { order: 3; flex-basis: 100%; }
  .tab { flex: 1; text-align: center; padding: 9px 4px; }

  main { padding: 12px max(12px, env(safe-area-inset-right)) calc(var(--player-h) + 16px) max(12px, env(safe-area-inset-left)); }
  h2 { font-size: 18px; }
  .toolbar { gap: 8px; }
  .toolbar input[type=search] { max-width: none; flex: 1; min-width: 0; }

  /* Calendar: events become colored dots; tapping a day lists them. */
  #tab-calendar .toolbar h2 { flex: 1; text-align: center; font-size: 17px; }
  #tab-calendar .toolbar .spacer { display: none; }
  #tab-calendar .legend { order: 5; flex: 1; font-size: 12px; }
  #cal-add { order: 6; }
  .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal-dow { padding: 4px 0; text-align: center; font-size: 11px; }
  .cal-day { min-height: 52px; padding: 4px 2px; align-items: center; gap: 3px; }
  .cal-day .num { font-size: 14px; color: var(--text); }
  .cal-day.out .num { color: var(--muted); }
  .cal-day .ev { width: 8px; height: 8px; padding: 0; border-radius: 50%; font-size: 0; flex: none; }
  .upcoming li { flex-wrap: wrap; gap: 4px 10px; }
  .upcoming .date { min-width: 0; flex-basis: 100%; font-size: 13px; color: var(--muted); }

  /* Set lists: title on the first line, note box and buttons on the second. */
  .sl-items li { flex-wrap: wrap; gap: 6px 8px; }
  .sl-items .grip { display: none; }
  .sl-items .n { width: auto; }
  .sl-items .t { flex: 1 1 calc(100% - 40px); }
  .sl-items .t small { display: block; margin-left: 0; }
  .sl-items input[data-note] { flex: 1 1 80px; max-width: none; }
  .song .row .btn.small { flex: 1 1 auto; justify-content: center; }

  /* Forms slide up from the bottom of the screen. */
  .modal { padding: 0; place-items: end stretch; }
  .modal-box { width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; border-bottom: 0;
    padding: 18px max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .modal-box .actions { flex-wrap: wrap; }
  .modal-box .actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Sheet music viewer: compact header, zoom buttons, room to scroll sideways when zoomed. */
  .drawer-head { gap: 4px; padding: max(8px, env(safe-area-inset-top)) 8px 8px; flex-wrap: wrap; }
  .drawer-head strong { order: -2; flex: 1 1 calc(100% - 60px); font-size: 15px; }
  .drawer-head #sheet-close { order: -1; }
  .drawer-head select { flex: 1; max-width: none; }
  .drawer-head .btn.small { min-width: 44px; justify-content: center; }
  .pdf-pages { padding: 6px; gap: 6px; }

  /* Player: a slim bar with play/pause and a progress line; the arrow shows every control. */
  .player { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "now controls expand" "seek seek seek" "practice practice practice";
    gap: 6px 8px; padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .player .expand { grid-area: expand; }
  .player .controls { gap: 2px; }
  .np-title { font-size: 15px; }
  #np-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini-progress { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--line); }
  #mini-bar { height: 100%; width: var(--progress, 0%); background: var(--accent); }
  .player.collapsed .seek, .player.collapsed .practice, .player.collapsed .controls > :not(#pl-play) { display: none; }
  .player:not(.collapsed) .mini-progress.phone-only { display: none !important; }
  .player:not(.collapsed) { grid-template-areas: "now now expand" "controls controls controls" "seek seek seek" "practice practice practice"; }
  .player:not(.collapsed) .controls { justify-content: space-between; }
  .player:not(.collapsed) #pl-expand { transform: rotate(180deg); }
  .practice { justify-content: space-between; }
}

/* iPhone turned sideways: let the header scroll away to leave room for the music. */
@media (max-height: 500px) and (pointer: coarse) {
  .topbar { position: relative; }
  .player:not(.collapsed) { grid-template-areas: "now controls expand" "seek seek seek" "practice practice practice"; }
}

/* Calendar events: who's playing and directions. */
.musician-picks { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.musician-picks legend { font-size: 13px; color: var(--muted); padding: 0 6px; display: flex; align-items: center; gap: 8px; }
label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); font-size: 14px; cursor: pointer; }
label.check input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--accent); flex: none; }
label.check:has(input:checked) { border-color: var(--accent); }
.map-help { margin: -4px 0 0; } .map-help a { color: var(--accent); white-space: nowrap; }
.venue { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.playing { color: var(--text); }
.upcoming li { flex-wrap: wrap; }
.ev-extra { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.ev-extra .playing { color: var(--muted); }
.dir-link { color: var(--accent); text-decoration: none; font-weight: 600; padding: 4px 0; }
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .musician-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-link { padding: 8px 0; font-size: 15px; }
}
@media (pointer: coarse) { label.check { min-height: 44px; font-size: 15px; } label.check input { width: 22px; height: 22px; } }

/* Set lists: personal practice lists and who can see a band list. */
body:not(.can-practice) .practice-only { display: none !important; }
.personal-lists { margin-top: 24px; }
.personal-help { margin: -6px 0 10px; }
.personal-badge { margin: 0; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--rehearsal) 18%, transparent); color: var(--text); font-size: 14px; }
.sl-visibility { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sl-visibility legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.vis-people { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin-top: 4px; }
.vis-people .muted { grid-column: 1 / -1; margin: 2px 0 0; }