/* MusicMin modern UI layer — intentionally loaded after the legacy styles. */
:root {
  --mm-blue-50:#eff6ff;
  --mm-blue-100:#dbeafe;
  --mm-blue-500:#3b82f6;
  --mm-blue-600:#2563eb;
  --mm-blue-700:#1d4ed8;
  --mm-navy-950:#080b1d;
  --mm-slate-950:#0f172a;
  --mm-slate-900:#172033;
  --mm-slate-700:#334155;
  --mm-slate-600:#475569;
  --mm-slate-500:#64748b;
  --mm-slate-300:#cbd5e1;
  --mm-slate-200:#e2e8f0;
  --mm-slate-100:#f1f5f9;
  --mm-slate-50:#f8fafc;
  --mm-amber-50:#fffbeb;
  --mm-amber-200:#fde68a;
  --mm-amber-700:#b45309;
  --mm-green-50:#ecfdf5;
  --mm-green-600:#059669;
  --mm-red-50:#fef2f2;
  --mm-red-600:#dc2626;
  --mm-space-1:4px;
  --mm-space-2:8px;
  --mm-space-3:12px;
  --mm-space-4:16px;
  --mm-space-5:20px;
  --mm-space-6:24px;
  --mm-space-8:32px;
  --mm-radius-sm:10px;
  --mm-radius-md:14px;
  --mm-radius-lg:20px;
  --mm-radius-xl:26px;
  --mm-shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 6px rgba(15,23,42,.04);
  --mm-shadow-md:0 12px 34px rgba(15,23,42,.10);
  --mm-shadow-lg:0 24px 64px rgba(15,23,42,.18);
  --primary:var(--mm-blue-600);
  --primary-dark:var(--mm-blue-700);
  --bg-light:var(--mm-slate-50);
  --surface-light:#fff;
  --border-light:var(--mm-slate-200);
  --text-light:var(--mm-slate-950);
  --bg-dark:var(--mm-navy-950);
  --surface-dark:var(--mm-slate-900);
  --border-dark:rgba(203,213,225,.15);
  --text-dark:#f8fafc;
  --card-bg:#fff;
  --border:var(--mm-slate-200);
  --muted:var(--mm-slate-500);
}

html { color-scheme:light; scroll-behavior:smooth; }
html:has(body.dark) { color-scheme:dark; }
body.mm-modern {
  min-height:100dvh;
  overflow-x:hidden;
  font-family:var(--mm-font-sans, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.mm-modern.light { background:var(--mm-slate-50); color:var(--mm-slate-950); --card-bg:#fff; --border:var(--mm-slate-200); --muted:var(--mm-slate-500); }
body.mm-modern.light { --mm-chord-color:#16a34a; }
body.mm-modern.dark { background:var(--mm-navy-950); color:#f8fafc; --card-bg:var(--mm-slate-900); --border:rgba(203,213,225,.15); --muted:var(--mm-slate-300); --mm-chord-color:#fff; }
body.mm-modern[data-mm-chord-color="blue"] { --mm-chord-color:#2563eb; }
body.mm-modern[data-mm-chord-color="white"] { --mm-chord-color:#fff; }
body.mm-modern[data-mm-chord-color="green"] { --mm-chord-color:#16a34a; }
body.mm-modern[data-mm-chord-color="black"] { --mm-chord-color:#111827; }
body.mm-modern.dark[data-mm-chord-color="black"] { --mm-chord-color:#fff; }
body.mm-modern[data-mm-chord-color="amber"] { --mm-chord-color:#f59e0b; }
body.mm-modern button,
body.mm-modern input,
body.mm-modern select,
body.mm-modern textarea { font:inherit; }
body.mm-modern button,
body.mm-modern a,
body.mm-modern [role="button"] { -webkit-tap-highlight-color:transparent; }

body.mm-modern :where(button,a,input,select,textarea,[role="button"]):focus { outline:none; }
body.mm-modern :where(button,a,input,select,textarea,[role="button"]):focus-visible {
  outline:3px solid rgba(59,130,246,.42);
  outline-offset:2px;
}
body.mm-modern ::selection { background:var(--mm-blue-100); color:var(--mm-slate-950); }

/* The status-bar / camera-cutout height. env() carries it on iOS and modern
   Android WebViews; the Capacitor app also injects --safe-area-inset-top, so
   take whichever is larger. Zero on desktop. */
:root { --mm-safe-top:max(env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px)); }

/* Compact role-aware application header */
body.mm-modern .header {
  position:sticky;
  top:0;
  z-index:900;
  min-height:76px;
  margin:0;
  padding:calc(10px + var(--mm-safe-top)) clamp(16px,3vw,36px) 10px;
  flex-wrap:nowrap;
  gap:var(--mm-space-4);
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--card-bg) 90%,transparent);
  box-shadow:0 1px 0 rgba(15,23,42,.02);
  backdrop-filter:blur(18px) saturate(1.15);
}
body.mm-modern .app-brand-logo { width:50px; height:50px; border-radius:14px; box-shadow:0 8px 22px rgba(15,23,42,.18); }
body.mm-modern .header h1 { font-size:21px; letter-spacing:-.035em; }
body.mm-modern .app-brand-version { font-size:12px; }
body.mm-modern .app-brand-tagline { font-size:11px; color:var(--muted); }
body.mm-modern .header-controls { margin-left:auto; gap:9px; flex-wrap:nowrap; }
body.mm-modern .app-selector,
body.mm-modern #theme-btn,
body.mm-modern #join-organization-btn,
body.mm-modern #superuser-portal-btn,
body.mm-modern #logout-btn { display:none !important; }
body.mm-modern #organization-header-control { max-width:260px !important; }
body.mm-modern #organization-switcher {
  width:min(250px,24vw);
  min-height:40px;
  padding:8px 34px 8px 12px !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  background:var(--card-bg) !important;
  color:inherit !important;
  box-shadow:var(--mm-shadow-sm);
  font-size:13px;
}
body.mm-modern #connection-status {
  min-height:36px;
  padding:7px 11px !important;
  border:1px solid color-mix(in srgb,currentColor 16%,transparent);
}
.mm-account { position:relative; }
.mm-icon-button {
  width:42px;
  height:42px;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--card-bg);
  color:inherit;
  box-shadow:var(--mm-shadow-sm);
  cursor:pointer;
}
.mm-account-menu {
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(300px,calc(100vw - 24px));
  padding:8px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card-bg);
  box-shadow:var(--mm-shadow-lg);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:.18s ease;
  z-index:1200;
  /* The phone rule below has capped and scrolled this menu for a while; the desktop rule never
     did, so on a short laptop window it simply grew past the bottom of the screen and the last
     items — Download Android app, and Log out under it — could not be reached at all. The value
     is a safety net for a missing or late script; openAccountMenu() measures the real gap and
     replaces it, which is what makes this correct at any header height or page zoom. */
  /* 96px is the header plus the 10px this menu hangs below it, with a little room under the last
     row. A measured-in-JS version was tried and dropped: this rule already bounds the menu
     correctly, and an inline max-height competing with it only made the height ambiguous while
     the transition above — which covers every property — was still running. */
  max-height:calc(100dvh - 96px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.mm-account.open .mm-account-menu { opacity:1; visibility:visible; transform:none; }
.mm-account-summary { padding:10px 11px 12px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.mm-account-summary strong { display:block; font-size:14px; }
.mm-account-summary span { display:block; margin-top:2px; color:var(--muted); font-size:12px; }
.mm-account-org { padding:7px 10px 10px; }
.mm-account-org label { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
.mm-account-org select { width:100%; min-height:40px; padding:7px 30px 7px 10px; }
.mm-account-setting { padding:7px 10px 10px; }
.mm-account-setting label { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
.mm-account-setting select { width:100%; min-height:40px; padding:7px 30px 7px 10px; }
.mm-menu-button {
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.mm-menu-button:hover { background:var(--mm-blue-50); color:var(--mm-blue-700); }
body.dark .mm-menu-button:hover { background:rgba(59,130,246,.14); color:#bfdbfe; }
.mm-menu-button.danger { color:var(--mm-red-600); }

/* Desktop sidebar shell */
body.mm-modern .container { width:100%; max-width:1600px; margin:0 auto; padding:24px clamp(16px,2.4vw,36px) 48px; }
body.mm-modern #maestro-app,
body.mm-modern #members-app { grid-template-columns:230px minmax(0,1fr); gap:24px; align-items:start; }
body.mm-modern #maestro-app:not([style*="display: none"]):not([style*="display:none"]),
body.mm-modern #members-app:not([style*="display: none"]):not([style*="display:none"]) { display:grid !important; }
body.mm-modern .main-nav {
  position:sticky;
  top:100px;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-height:calc(100dvh - 124px);
  margin:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--card-bg);
  box-shadow:var(--mm-shadow-sm);
}
body.mm-modern .nav-btn {
  position:relative;
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  padding:10px 12px 10px 42px;
  border-radius:11px;
  color:var(--mm-slate-600);
  font-size:14px;
  font-weight:650;
  text-align:left;
}
body.dark.mm-modern .nav-btn { color:var(--mm-slate-300); }
body.mm-modern .nav-btn::before {
  content:attr(data-mm-icon);
  position:absolute;
  left:13px;
  width:20px;
  color:inherit;
  font-size:16px;
  text-align:center;
}
body.mm-modern .nav-btn.active {
  background:linear-gradient(135deg,var(--mm-blue-600),var(--mm-blue-500));
  color:#fff;
  box-shadow:0 8px 18px rgba(37,99,235,.2);
}
body.mm-modern .nav-btn:hover:not(.active) { background:var(--mm-blue-50); color:var(--mm-blue-700); opacity:1; }
body.dark.mm-modern .nav-btn:hover:not(.active) { background:rgba(59,130,246,.12); color:#bfdbfe; }
body.mm-modern .nav-btn.download-btn { margin:4px 0 0; border:0; background:var(--mm-green-50); color:var(--mm-green-600) !important; box-shadow:none; }
.mm-more-toggle { display:none !important; }
.mm-nav-collapse { margin-top:8px; border-top:1px solid var(--border) !important; border-radius:0 0 10px 10px !important; }
.mm-help-toggle { margin-top:auto; border:1px solid var(--border) !important; background:var(--card-bg) !important; color:var(--mm-slate-600) !important; }
.mm-help-toggle:hover { background:var(--mm-blue-50) !important; color:var(--mm-blue-700) !important; }
.mm-workspace-toggle { margin-top:0; border:1px solid rgba(37,99,235,.24) !important; background:var(--mm-blue-50) !important; color:var(--mm-blue-700) !important; }
body.dark .mm-workspace-toggle { background:rgba(59,130,246,.13) !important; color:#bfdbfe !important; }
body.dark .mm-help-toggle { background:rgba(15,23,42,.35) !important; color:var(--mm-slate-300) !important; }
html.member-session .mm-workspace-toggle,
body.member-access .mm-workspace-toggle { display:none !important; }
body.mm-nav-collapsed #maestro-app:not([style*="display: none"]):not([style*="display:none"]),
body.mm-nav-collapsed #members-app:not([style*="display: none"]):not([style*="display:none"]) { grid-template-columns:78px minmax(0,1fr); }
body.mm-nav-collapsed .main-nav .nav-btn { justify-content:center; padding:11px; font-size:0; }
body.mm-nav-collapsed .main-nav .nav-btn::before { position:static; font-size:18px; }

body.mm-modern .content-area {
  min-width:0;
  min-height:calc(100dvh - 124px);
  padding:clamp(18px,2.2vw,32px);
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--card-bg);
  box-shadow:var(--mm-shadow-sm);
}
body.mm-modern .section > h2:first-child,
body.mm-modern .section > div:first-child + h2 {
  margin-bottom:8px !important;
  font-size:clamp(24px,2.5vw,32px);
  line-height:1.15;
  letter-spacing:-.035em;
}
.mm-section-kicker { margin:0 0 4px; color:var(--primary); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.mm-section-description { max-width:720px; margin:0 0 22px; color:var(--muted); font-size:14px; }

/* Shared controls and cards */
body.mm-modern .btn,
body.mm-modern .theme-toggle {
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 15px;
  border:1px solid transparent;
  border-radius:11px;
  background:linear-gradient(135deg,var(--mm-blue-600),var(--mm-blue-500));
  box-shadow:0 5px 14px rgba(37,99,235,.16);
  font-size:14px;
  font-weight:700;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
body.mm-modern .btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(37,99,235,.22); }
body.mm-modern .btn:active { transform:translateY(0); }
body.mm-modern .btn-secondary { border-color:var(--border); background:var(--card-bg); color:var(--mm-slate-700); box-shadow:var(--mm-shadow-sm); }
body.dark.mm-modern .btn-secondary { color:var(--mm-slate-200); }
body.mm-modern .btn-secondary:hover { border-color:var(--mm-blue-500); background:var(--mm-blue-50); color:var(--mm-blue-700); }
body.dark.mm-modern .btn-secondary:hover { background:rgba(59,130,246,.14); color:#bfdbfe; }
body.mm-modern .btn-danger { background:var(--mm-red-600); }
body.mm-modern .btn-small { min-height:36px; padding:7px 11px; font-size:12px; }
body.mm-modern :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.search-input,.song-search-input,.team-member-search) {
  border:1px solid var(--border) !important;
  border-radius:11px !important;
  background:var(--card-bg) !important;
  color:inherit !important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.025);
  transition:border-color .16s ease,box-shadow .16s ease;
}
body.mm-modern :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus {
  border-color:var(--mm-blue-500) !important;
  box-shadow:0 0 0 4px rgba(59,130,246,.12) !important;
}
/* wrap: on a desktop nothing ever wraps, but in the 769-980 tablet band the events bar's five
   controls overflowed the viewport by ~50px rather than break line. */
body.mm-modern .search-bar { align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
body.mm-modern .search-input { min-height:46px; padding:11px 14px 11px 42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:14px center !important;
}
body.mm-modern .stats-grid { gap:14px; margin-bottom:28px; }
body.mm-modern .stat-card {
  min-height:126px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:20px;
  border:1px solid var(--border);
  border-radius:17px;
  background:linear-gradient(145deg,var(--card-bg),color-mix(in srgb,var(--mm-blue-50) 35%,var(--card-bg)));
  text-align:left;
  box-shadow:var(--mm-shadow-sm);
}
body.dark.mm-modern .stat-card { background:linear-gradient(145deg,var(--card-bg),rgba(37,99,235,.08)); }
body.mm-modern .stat-number { font-size:34px; letter-spacing:-.04em; }
body.mm-modern .stat-label { color:var(--muted); font-size:13px; font-weight:650; }
body.mm-modern .song-list { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:14px; }
body.mm-modern .song-card,
body.mm-modern .session-card {
  padding:18px;
  border:1px solid var(--border) !important;
  border-radius:16px;
  background:var(--card-bg) !important;
  box-shadow:var(--mm-shadow-sm);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
body.mm-modern .song-card:hover,
body.mm-modern .session-card:hover { transform:translateY(-2px); border-color:rgba(59,130,246,.45) !important; box-shadow:var(--mm-shadow-md); }
body.mm-modern .song-title { margin-bottom:3px; color:inherit; font-size:17px; font-weight:760; letter-spacing:-.015em; }
body.mm-modern .song-artist { color:var(--muted); opacity:1; font-size:13px; }
body.mm-modern .song-key,
body.mm-modern .song-capo,
body.mm-modern .song-bpm,
body.mm-modern .event-badge,
body.mm-modern .access-badge {
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:4px 9px;
  margin:0;
  border-radius:999px;
  background:var(--mm-blue-50);
  color:var(--mm-blue-700);
  font-size:11px;
  font-weight:750;
}
body.dark.mm-modern .song-key,
body.dark.mm-modern .song-capo,
body.dark.mm-modern .song-bpm,
body.dark.mm-modern .event-badge,
body.dark.mm-modern .access-badge { background:rgba(59,130,246,.14); color:#bfdbfe; }
body.mm-modern .song-capo { background:var(--mm-green-50); color:var(--mm-green-600); }
body.dark.mm-modern .song-capo { background:rgba(16,185,129,.14); color:#a7f3d0; }
body.mm-modern .song-bpm { background:#fff7ed; color:#c2410c; }
body.dark.mm-modern .song-bpm { background:rgba(249,115,22,.15); color:#fdba74; }
body.mm-modern .access-badge-team,
body.dark.mm-modern .access-badge-team {
  background:var(--mm-green-600);
  color:#fff;
  box-shadow:0 2px 8px rgba(5,150,105,.18);
}
body.mm-modern .mm-session-card-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-bottom:8px;
}
body.mm-modern .mm-session-card-title {
  min-width:0;
  margin:0;
  color:var(--mm-slate-900);
  font-size:17px;
  font-weight:780;
  letter-spacing:-.015em;
  line-height:1.25;
}
body.dark.mm-modern .mm-session-card-title { color:var(--mm-slate-100); }
body.mm-modern .mm-session-team-badges {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
  margin-left:auto;
}
body.mm-modern .mm-member-team-badges {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:7px 0 9px;
}
body.mm-modern .song-card-info { min-width:0; }
body.mm-modern .song-album { color:color-mix(in srgb,var(--muted) 88%,var(--primary)); }
body.mm-modern .song-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:9px; }
body.mm-modern .song-actions { gap:7px; padding-top:13px; border-top:1px solid var(--border); }
body.mm-modern .quick-export-btn {
  border:0 !important;
  background:var(--mm-slate-100);
  color:var(--mm-slate-700);
  box-shadow:none;
}
body.mm-modern .quick-export-btn:hover { background:var(--mm-blue-50); color:var(--mm-blue-700); }
body.dark.mm-modern .quick-export-btn { background:rgba(148,163,184,.13); color:var(--mm-slate-200); }
body.dark.mm-modern .quick-export-btn:hover { background:rgba(59,130,246,.16); color:#dbeafe; }
.mm-quick-export-dialog { max-width:540px; }
.mm-quick-export-heading { display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.mm-quick-export-heading h2 { margin:0 0 3px; }
.mm-quick-export-heading p { margin:0; color:var(--muted); font-size:14px; }
.mm-quick-export-icon {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:13px;
  background:var(--mm-blue-50);
  color:var(--mm-blue-700);
  font-size:24px;
  font-weight:800;
}
body.dark .mm-quick-export-icon { background:rgba(59,130,246,.16); color:#bfdbfe; }
.mm-quick-export-version-summary { margin-top:7px; color:var(--muted); font-size:12px; font-weight:650; }
.mm-quick-export-option {
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin:4px 0 22px;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--mm-slate-50);
  cursor:pointer;
}
body.dark .mm-quick-export-option { background:rgba(15,23,42,.34); }
.mm-quick-export-option input { width:auto; margin-top:3px; accent-color:var(--primary); }
.mm-quick-export-option span { display:grid; gap:2px; }
.mm-quick-export-option small { color:var(--muted); font-size:12px; font-weight:500; }
.mm-quick-export-actions { display:flex; justify-content:flex-end; gap:9px; }
@media(max-width:520px) {
  .mm-quick-export-heading { align-items:flex-start; }
  .mm-quick-export-actions .btn { flex:1 1 0; }
}

/* Event session and song hierarchy */
body.mm-modern .event-session-block { margin:14px 0 6px; }
body.mm-modern .event-session-groups {
  display:grid;
  gap:8px;
  overflow:visible;
  padding:8px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--mm-slate-50);
}
body.dark.mm-modern .event-session-groups { background:rgba(15,23,42,.34); }
body.mm-modern .event-session-group {
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card-bg);
  box-shadow:0 1px 2px rgba(15,23,42,.035);
}
body.mm-modern .event-session-group + .event-session-group { border-top:1px solid var(--border); }
body.mm-modern .event-session-heading {
  min-height:46px;
  padding:10px 12px;
  border-bottom:1px solid transparent;
  background:linear-gradient(135deg,var(--card-bg),var(--mm-blue-50));
}
body.dark.mm-modern .event-session-heading { background:linear-gradient(135deg,var(--card-bg),rgba(59,130,246,.1)); }
body.mm-modern .event-session-groups.expanded .event-session-heading { border-bottom-color:var(--border); }
body.mm-modern .event-session-name { font-size:14px; font-weight:780; color:var(--mm-slate-900); }
body.dark.mm-modern .event-session-name { color:var(--mm-slate-100); }
body.mm-modern .event-session-count {
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:4px 9px;
  border-radius:999px;
  background:var(--mm-blue-100);
  color:var(--mm-blue-700);
  font-size:11px;
  font-weight:780;
}
body.dark.mm-modern .event-session-count { background:rgba(59,130,246,.18); color:#bfdbfe; }
body.mm-modern .event-session-songs { gap:7px; padding:9px; background:var(--card-bg); }
body.mm-modern .event-song-row {
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.025);
}
body.dark.mm-modern .event-song-row { background:rgba(15,23,42,.5); }
body.mm-modern .event-song-order {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--mm-slate-100);
  color:var(--mm-slate-500) !important;
  font-size:11px;
  font-weight:800 !important;
}
body.dark.mm-modern .event-song-order { background:rgba(148,163,184,.14); color:var(--mm-slate-300) !important; }
body.mm-modern .event-song-main { min-width:0; }
body.mm-modern .event-song-title { display:block; color:var(--mm-slate-900); font-size:13px; line-height:1.3; }
body.dark.mm-modern .event-song-title { color:var(--mm-slate-100); }
body.mm-modern .event-song-secondary { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:4px; }
body.mm-modern .event-song-artist { color:var(--muted); font-size:11px; }
body.mm-modern .event-song-section,
body.mm-modern .event-song-key,
body.mm-modern .event-song-capo,
body.mm-modern .event-song-bpm {
  display:inline-flex;
  align-items:center;
  min-height:22px;
  width:max-content;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  line-height:1;
}
body.mm-modern .event-song-section-default { background:var(--mm-slate-100); color:var(--mm-slate-600); }
body.mm-modern .event-song-section-opening { background:var(--mm-blue-100); color:var(--mm-blue-700); }
body.mm-modern .event-song-section-response { background:#ede9fe; color:#6d28d9; }
body.mm-modern .event-song-section-closing { background:#fef3c7; color:#a16207; }
body.dark.mm-modern .event-song-section-default { background:rgba(148,163,184,.14); color:var(--mm-slate-300); }
body.dark.mm-modern .event-song-section-opening { background:rgba(59,130,246,.18); color:#bfdbfe; }
body.dark.mm-modern .event-song-section-response { background:rgba(139,92,246,.2); color:#ddd6fe; }
body.dark.mm-modern .event-song-section-closing { background:rgba(245,158,11,.18); color:#fde68a; }
body.mm-modern .event-song-musical-meta { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:5px; }
body.mm-modern .event-song-key { background:var(--mm-blue-50); color:var(--mm-blue-700); }
body.mm-modern .event-song-capo { background:var(--mm-green-50); color:var(--mm-green-600); }
body.mm-modern .event-song-bpm { background:#fff7ed; color:#c2410c; }
body.dark.mm-modern .event-song-key { background:rgba(59,130,246,.14); color:#bfdbfe; }
body.dark.mm-modern .event-song-capo { background:rgba(16,185,129,.14); color:#a7f3d0; }
body.dark.mm-modern .event-song-bpm { background:rgba(249,115,22,.15); color:#fdba74; }
body.mm-modern .session-song-summary {
  display:grid;
  grid-template-columns:8px minmax(0,1fr);
  align-items:start;
  column-gap:6px;
  margin:5px 0;
  color:var(--mm-slate-700);
  font-size:13px;
  line-height:1.45;
}
body.dark.mm-modern .session-song-summary { color:var(--mm-slate-200); }
body.mm-modern .session-song-summary-bullet { line-height:1.45; text-align:center; }
body.mm-modern .session-song-summary-content { min-width:0; }
body.mm-modern .session-song-summary-heading {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px 7px;
  min-width:0;
}
body.mm-modern .session-song-section { flex:0 0 auto; }
body.mm-modern .session-song-summary-title {
  display:inline;
  min-width:0;
  color:var(--mm-slate-900);
  overflow-wrap:anywhere;
}
body.dark.mm-modern .session-song-summary-title { color:var(--mm-slate-100); }
body.mm-modern .session-song-summary-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1px 10px;
  margin-top:1px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
body.mm-modern .session-song-summary-meta > span { white-space:nowrap; }
body.mm-modern .session-song-summary-performers { color:var(--muted); }
body.mm-modern .session-song-list { margin:5px 0; }
body.mm-modern .session-song-list-overflow { display:none; }
body.mm-modern .session-song-list.expanded .session-song-list-overflow { display:block; }
body.mm-modern .session-songs-more {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  margin:8px auto 0;
  padding:6px 13px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--card-bg);
  color:var(--primary);
  box-shadow:var(--mm-shadow-sm);
  font:inherit;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}
body.mm-modern .session-songs-more:hover { border-color:var(--primary); background:var(--mm-blue-50); }
body.dark.mm-modern .session-songs-more:hover { background:rgba(59,130,246,.14); }
body.mm-modern .session-song-list.expanded .session-songs-more .toggle-chevron { transform:rotate(180deg); }
body.mm-modern .event-song-empty { padding:18px; color:var(--muted); font-size:12px; text-align:center; }
body.mm-modern .event-songs-toggle {
  min-height:34px;
  margin-top:8px;
  padding:6px 11px;
  border-color:var(--border);
  background:var(--card-bg);
  box-shadow:var(--mm-shadow-sm);
}
.mm-song-browser-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-6px 0 14px; }
.mm-song-result-count { color:var(--muted); font-size:13px; font-weight:650; }
.mm-view-toggle { display:inline-flex; gap:3px; padding:3px; border:1px solid var(--border); border-radius:11px; background:var(--mm-slate-50); }
body.dark .mm-view-toggle { background:rgba(15,23,42,.45); }
.mm-view-toggle button { min-width:38px; min-height:34px; padding:5px 9px; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }
.mm-view-toggle button.active { background:var(--card-bg); color:var(--primary); box-shadow:var(--mm-shadow-sm); }
.mm-view-list.song-list { grid-template-columns:1fr !important; }
.mm-view-tiles .song-title { display:inline-block; width:auto; padding:3px 9px 4px; border-radius:999px; background:var(--mm-blue-50); color:var(--mm-blue-700); }
body.dark .mm-view-tiles .song-title { background:rgba(59,130,246,.15); color:#dbeafe; }
.mm-view-list .song-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; padding:14px 16px; }
body.mm-modern .mm-view-list .song-actions { min-width:max-content; margin:0; padding:0; border:0; }
.mm-search-highlight { padding:.04em .32em .1em; border-radius:.5em; background:var(--mm-blue-100); color:var(--mm-blue-700); font-weight:inherit; }
body.dark .mm-search-highlight { background:rgba(96,165,250,.24); color:#dbeafe; }
.mm-pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin:20px 0 0; }
.mm-pagination[hidden], .mm-song-empty[hidden] { display:none; }
.mm-song-empty { margin-top:16px; }
.mm-pagination button { min-width:40px; min-height:38px; padding:7px 11px; border:1px solid var(--border); border-radius:10px; background:var(--card-bg); color:inherit; cursor:pointer; }
.mm-pagination button:disabled { opacity:.45; cursor:not-allowed; }
.mm-pagination span { min-width:88px; color:var(--muted); font-size:12px; font-weight:700; text-align:center; }
/* Pinned under the sticky header rather than to the bottom of the viewport.
   Bottom-anchoring put it on top of .mm-pagination at the end of a list and, on
   mobile, inside the strip occupied by the fixed .main-nav tab bar, so it covered
   controls people needed to tap. The exact `top` is set from the measured header
   height in updateFloatingSearch(); the value here is only a fallback.
   z-index sits below the header (900) and above page content. */
.mm-floating-search {
  position:fixed;
  left:50%;
  top:86px;
  bottom:auto;
  z-index:880;
  width:min(620px,calc(100vw - 32px));
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in srgb,var(--card-bg) 92%,transparent);
  box-shadow:var(--mm-shadow-lg);
  backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-14px);
  transition:.18s ease;
}
.mm-floating-search.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
.mm-floating-search input { flex:1; min-width:0; min-height:42px; padding:9px 12px 9px 40px !important; }
.mm-floating-search button { width:38px; height:38px; border:0; border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; }

/* Announcement center */
.mm-announcement-toolbar {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  margin:0 0 20px;
}
.mm-announcement-toolbar .search-input { width:100%; }
#announcements-list,
#member-announcements { display:grid; gap:14px; }
body.mm-modern .announcement-box {
  position:relative;
  margin:0;
  padding:20px 20px 18px 24px;
  overflow:hidden;
  border:1px solid var(--border);
  border-left:0;
  border-radius:16px;
  background:var(--card-bg);
  box-shadow:var(--mm-shadow-sm);
}
body.mm-modern .announcement-box::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,var(--mm-blue-500),#8b5cf6);
}
body.mm-modern .announcement-box h3 { margin:0 0 8px; padding-right:140px; font-size:17px; letter-spacing:-.01em; }
.mm-announcement-label { display:block; margin-bottom:5px; color:var(--primary); font-size:10px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.mm-announcement-meta { display:flex; gap:8px; align-items:center; margin-top:14px; color:var(--muted); font-size:12px; }
body.mm-modern .announcement-actions { top:16px; right:16px; display:flex; gap:6px; }
#member-announcements { gap:10px; }
#member-announcements .announcement-box { padding:17px 18px 16px 22px; }
#member-announcements .announcement-box h3 { margin-bottom:6px; padding-right:0; }
#member-announcements .member-announcement-content { margin:0; line-height:1.5; }
#member-announcements .announcement-box .btn { margin-top:11px !important; }
#member-announcements .mm-announcement-meta { margin-top:11px; }
.mm-empty-state {
  min-height:180px;
  display:grid;
  place-items:center;
  padding:28px;
  border:1px dashed var(--border);
  border-radius:16px;
  color:var(--muted);
  text-align:center;
}
.mm-empty-state strong { color:var(--text); font-size:16px; }
.mm-empty-state span { display:inline-block; max-width:480px; margin-top:5px; line-height:1.5; }
.mm-empty-actions { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.program-song-empty .mm-empty-actions { margin-top:12px; }
.mm-announcement-composer-help { margin:-8px 0 18px; color:var(--muted); font-size:13px; }
.mm-composer-footer { display:flex; justify-content:space-between; gap:12px; margin-top:-12px; color:var(--muted); font-size:12px; }
.mm-announcement-preview { margin:16px 0; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--mm-slate-50); }
body.dark .mm-announcement-preview { background:rgba(15,23,42,.5); }
/* Direct child only: this styles the preview's own title line. As a descendant
   selector it also caught every <strong> the renderer emits in the body below,
   which turned "**When:** 7pm" into two lines instead of one. */
.mm-announcement-preview > strong { display:block; margin-bottom:6px; }
.mm-announcement-preview .mm-rich { color:var(--muted); }

/* Formatted announcement bodies.

   Markers written in the composer are turned into this markup by
   assets/app-richtext.v1.0.js, which emits only the tags styled below. */
.mm-rich { line-height:1.6; }
.mm-rich > :first-child { margin-top:0; }
.mm-rich > :last-child { margin-bottom:0; }
.mm-rich p { margin:0 0 10px; }
.mm-rich strong { font-weight:750; }
.mm-rich a { color:var(--primary); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.mm-rich ul,
.mm-rich ol { margin:0 0 10px; padding-left:22px; }
.mm-rich li { margin:2px 0; }
/* A highlight has to stay legible in both themes, so the text colour is set
   alongside the background rather than inherited from the card. */
.mm-rich mark { padding:0 3px; border-radius:3px; background:var(--mm-amber-200); color:var(--mm-slate-950); }
body.dark .mm-rich mark { background:rgba(250,204,21,.30); color:#fef9c3; }

/* A five-column roster is wider than a phone. Scrolling the table inside its
   own card is the alternative to the card scrolling the page sideways. */
.mm-rich-table-wrap { margin:0 0 10px; overflow-x:auto; }
.mm-rich table { width:100%; border-collapse:collapse; font-size:14px; }
.mm-rich th,
.mm-rich td { padding:6px 9px; border:1px solid var(--border); text-align:left; vertical-align:top; }
.mm-rich th { font-weight:700; background:color-mix(in srgb, var(--border) 40%, transparent); }

/* Collapsed announcements are clamped by height rather than cut by character
   count, so a table or a list is never sliced in half. The button is revealed
   by syncAnnouncementClamps() in app-ui.v1.6.js only when the body overflows. */
.mm-clamp { position:relative; max-height:7.5em; overflow:hidden; }
/* mm-clamp-faded is added by syncAnnouncementClamps() only when the body really
   does overflow, so an announcement that fits is not made to look truncated. */
.mm-clamp.mm-clamp-faded::after {
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2.4em;
  background:linear-gradient(180deg,transparent,var(--card-bg));
  pointer-events:none;
}
/* flex rather than the inline-flex every .btn gets: it puts the toggle on its
   own line instead of alongside the "Posted:" date, and width:fit-content keeps
   it button-sized rather than stretched across the card. Scoped to
   body.mm-modern to outrank the .btn rule further up this file. */
body.mm-modern .mm-announcement-toggle { display:flex; width:fit-content; margin:10px 0 4px; }
body.mm-modern .mm-announcement-toggle[hidden] { display:none; }

/* Composer: formatting toolbar, syntax help, template picker */
.mm-format-toolbar { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.mm-format-button {
  min-width:34px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--card-bg);
  color:inherit;
  font:inherit;
  font-size:13px;
  line-height:1.2;
  cursor:pointer;
}
.mm-format-button:hover { border-color:var(--primary); color:var(--primary); }
.mm-format-button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.mm-format-help { margin:0 0 10px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--mm-slate-50); }
body.dark .mm-format-help { background:rgba(15,23,42,.5); }
.mm-format-help ul { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.mm-format-help li { display:flex; gap:10px; align-items:baseline; font-size:12px; color:var(--muted); }
.mm-format-help code { flex:0 0 auto; min-width:132px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:inherit; }
.mm-template-row { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.mm-template-row select { flex:1 1 220px; min-width:0; }

/* Dialogs, sheets, and feedback */
body.mm-modern .modal { padding:24px; background:rgba(8,11,29,.66); backdrop-filter:blur(7px); }
body.mm-modern .modal-content {
  width:min(760px,100%);
  max-height:min(90dvh,900px);
  padding:26px;
  border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
  border-radius:22px;
  background:var(--card-bg);
  box-shadow:var(--mm-shadow-lg);
}
body.mm-modern .song-modal-content { width:min(1400px,calc(100vw - 48px)); max-width:1400px; }
body.mm-modern .sync-conflict-modal .modal-content { width:min(1050px,calc(100vw - 48px)); max-width:1050px; }
body.mm-modern #song-import-modal .modal-content { width:min(960px,calc(100vw - 48px)); max-width:960px !important; }
/* Name, event picker, access matrix and the whole song list share this dialog. */
body.mm-modern #session-modal .modal-content { width:min(1040px,calc(100vw - 48px)); max-width:1040px; }
body.mm-modern .org-modal-card { position:relative; width:min(900px,calc(100vw - 48px)); max-width:900px; }
body.mm-modern .org-onboarding-card { padding-top:30px; }
body.mm-modern .org-modal-close {
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card-bg);
  color:var(--mm-slate-700);
  box-shadow:var(--mm-shadow-sm);
  font-size:25px;
  line-height:1;
  cursor:pointer;
}
body.dark.mm-modern .org-modal-close { color:var(--mm-slate-100); }
body.mm-modern .org-modal-close:hover { border-color:var(--primary); color:var(--primary); }
body.mm-modern .org-onboarding-card > h2,
body.mm-modern .org-onboarding-card > p { padding-right:48px; }
body.mm-modern .org-code-label {
  display:block;
  margin-bottom:9px;
  color:var(--mm-slate-900);
  font-size:15px;
  font-weight:780;
}
body.dark.mm-modern .org-code-label { color:var(--mm-slate-100); }
body.mm-modern .org-code-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:10px;
}
body.mm-modern .org-code-row input {
  width:100%;
  min-width:0;
  min-height:46px;
  padding:10px 12px;
  box-sizing:border-box;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card-bg);
  color:inherit;
  font:inherit;
  font-size:14px;
}
body.mm-modern .org-code-row .btn { min-height:46px; white-space:nowrap; }
body.mm-modern .modal-content > h2:first-child { margin:0 0 8px; font-size:24px; letter-spacing:-.025em; }
body.mm-modern .form-group { margin-bottom:17px; }
body.mm-modern .form-group label { margin-bottom:6px; font-size:13px; font-weight:720; }
body.mm-modern .optional-label { color:var(--muted); font-size:11px; font-weight:550; }
body.mm-modern .form-group :where(input,select,textarea) { min-height:44px; padding:10px 12px; }
/* :where() adds no specificity, so the rule above ties with
   `body.mm-modern .search-input` and wins on source order alone. That dropped a
   search field's left padding from 42px to 12px while its magnifying-glass icon
   stayed pinned at 14px (background-position is !important), so the icon sat
   underneath the first characters typed. Only the session editor showed it —
   it holds the one search field that lives inside a .form-group. */
body.mm-modern .form-group .search-input { padding:11px 14px 11px 42px; }
body.mm-modern .form-group textarea { line-height:1.55; }
/* Checkboxes are not text fields. The generic field sizing above, plus
   `.form-group input{width:100%}` in app.html, stretched every option checkbox
   in the searchable multi-selects to full width and 44px tall, which pushed its
   label onto the next line. Specificity here has to clear both rules, so these
   selectors are deliberately heavier than they look. */
.team-member-option input[type="checkbox"],
.mm-checkbox-inline input[type="checkbox"],
.program-item-check input[type="checkbox"],
.mm-toggle-row input[type="checkbox"],
body.mm-modern .form-group .team-member-option input[type="checkbox"],
body.mm-modern .form-group .mm-checkbox-inline input[type="checkbox"],
body.mm-modern .form-group .program-item-check input[type="checkbox"],
body.mm-modern .form-group .mm-toggle-row input[type="checkbox"] {
  flex:0 0 auto;
  width:17px;
  min-width:17px;
  height:17px;
  min-height:0;
  margin:0;
  padding:0;
  accent-color:var(--primary);
}
/* These option rows are <label>s mounted inside .form-group, so `.form-group
   label{display:block}` (0,1,1) outranked `.team-member-option{display:flex}`
   (0,1,0) and collapsed the row into inline flow — the checkbox and its text
   ended up touching. Scoping to the container makes this (0,2,0): two classes
   outrank one class plus a type, so the component owns its own layout wherever
   it is mounted, without !important. */
.team-member-options .team-member-option {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:0;
  margin:0;
  padding:9px 10px;
  font-size:14px;
  font-weight:550;
  line-height:1.35;
}
.team-member-options .team-member-option span { flex:1 1 auto; min-width:0; }
.team-member-options .team-member-option input[type="checkbox"] { margin:0; }
/* api-override injects `.org-row input{flex:1;min-width:150px}` at runtime. Inside
   a half-width org panel that leaves the invite field at its 150px floor, which
   clips "Username or email". Two classes plus the type outrank that rule, so the
   field can claim its own row and stop truncating. */
.org-panel .org-row input { min-width:180px; padding:10px 12px; border-radius:9px; }
.org-panel .org-row select { min-height:40px; padding:9px 10px; border-radius:9px; }
.org-panel .org-row input#member-invite-identity { flex:1 1 100%; min-width:0; }
body.mm-modern .version-metadata-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:4px;
}
body.mm-modern .version-metadata-summary {
  margin-top:6px;
  color:var(--muted);
  font-size:11px;
  font-weight:650;
}

/* Help and user guide */
body.mm-modern .mm-help-modal { z-index:2400; padding:24px; }
body.mm-modern .mm-help-dialog {
  width:min(1180px,96vw) !important;
  max-width:1180px !important;
  height:min(90dvh,900px);
  max-height:90dvh !important;
  display:flex;
  flex-direction:column;
  padding:0 !important;
  overflow:hidden !important;
  overflow:clip !important;
  border-radius:24px;
}
.mm-help-header {
  min-height:0;
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:24px 26px 20px;
  position:relative;
  z-index:2;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,var(--card-bg),var(--mm-blue-50));
}
body.dark .mm-help-header { background:linear-gradient(135deg,var(--card-bg),rgba(59,130,246,.1)); }
.mm-help-header h2 { margin:0; font-size:clamp(24px,3vw,34px); letter-spacing:-.035em; }
.mm-help-header > div > p:last-child { margin:6px 0 0; color:var(--muted); font-size:14px; }
.mm-help-close {
  width:42px;
  height:42px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--card-bg);
  color:inherit;
  font-size:25px;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--mm-shadow-sm);
}
.mm-help-layout { height:auto; min-height:0; flex:1 1 auto; display:grid; grid-template-columns:220px minmax(0,1fr); overflow:hidden; }
.mm-help-toc {
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:18px 14px;
  overflow:auto;
  border-right:1px solid var(--border);
  background:var(--mm-slate-50);
}
body.dark .mm-help-toc { background:rgba(15,23,42,.28); }
.mm-help-toc a {
  padding:10px 12px;
  border-radius:9px;
  color:var(--mm-slate-600);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}
body.dark .mm-help-toc a { color:var(--mm-slate-300); }
.mm-help-toc a:hover,
.mm-help-toc a:focus-visible { background:var(--mm-blue-100); color:var(--mm-blue-700); outline:none; }
body.dark .mm-help-toc a:hover,
body.dark .mm-help-toc a:focus-visible { background:rgba(59,130,246,.16); color:#bfdbfe; }
.mm-help-content { min-height:0; overflow:auto; padding:24px clamp(18px,3vw,34px) 42px; scroll-behavior:smooth; scroll-padding-top:18px; }
.mm-help-section {
  padding:0 0 28px;
  margin:0 0 28px;
  border-bottom:1px solid var(--border);
  scroll-margin-top:18px;
}
.mm-help-section:last-child { margin-bottom:0; border-bottom:0; }
.mm-help-section-heading { display:flex; align-items:flex-start; gap:13px; margin-bottom:16px; }
.mm-help-section-icon {
  width:38px;
  height:38px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--mm-blue-100);
  color:var(--mm-blue-700);
  font-size:16px;
  font-weight:850;
}
body.dark .mm-help-section-icon { background:rgba(59,130,246,.18); color:#bfdbfe; }
.mm-help-section-heading h3 { margin:0; color:var(--mm-slate-900); font-size:20px; letter-spacing:-.02em; }
body.dark .mm-help-section-heading h3 { color:var(--mm-slate-100); }
.mm-help-section-heading p { margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.mm-install-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.mm-install-card,
.mm-guide-grid article {
  padding:17px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--card-bg);
  box-shadow:var(--mm-shadow-sm);
}
.mm-platform-icon {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  margin-bottom:12px;
  border-radius:10px;
  background:var(--mm-slate-100);
  color:var(--mm-slate-700);
  font-size:18px;
  font-weight:800;
}
body.dark .mm-platform-icon { background:rgba(148,163,184,.14); color:var(--mm-slate-200); }
.mm-install-card h4,
.mm-guide-grid h4 { margin:0 0 9px; color:var(--mm-slate-900); font-size:14px; }
body.dark .mm-install-card h4,
body.dark .mm-guide-grid h4 { color:var(--mm-slate-100); }
.mm-install-card ol { margin:0; padding-left:20px; color:var(--mm-slate-600); font-size:12px; line-height:1.55; }
body.dark .mm-install-card ol { color:var(--mm-slate-300); }
.mm-install-card li + li { margin-top:5px; }
.mm-help-note { margin:12px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.mm-help-callout {
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(245,158,11,.3);
  border-radius:12px;
  background:#fffbeb;
  color:#854d0e;
  font-size:12px;
  line-height:1.5;
}
body.dark .mm-help-callout { background:rgba(245,158,11,.11); color:#fde68a; }
.mm-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.mm-guide-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.mm-guide-steps { display:grid; gap:8px; }
.mm-guide-steps details {
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card-bg);
}
.mm-guide-steps summary {
  position:relative;
  padding:12px 42px 12px 14px;
  color:var(--mm-slate-800);
  font-size:13px;
  font-weight:760;
  cursor:pointer;
  list-style:none;
}
body.dark .mm-guide-steps summary { color:var(--mm-slate-100); }
.mm-guide-steps summary::-webkit-details-marker { display:none; }
.mm-guide-steps summary::after { content:'+'; position:absolute; top:50%; right:15px; transform:translateY(-50%); color:var(--primary); font-size:18px; }
.mm-guide-steps details[open] summary { border-bottom:1px solid var(--border); background:var(--mm-blue-50); }
body.dark .mm-guide-steps details[open] summary { background:rgba(59,130,246,.1); }
.mm-guide-steps details[open] summary::after { content:'−'; }
.mm-guide-steps details p { margin:0; padding:13px 14px 15px; color:var(--muted); font-size:12px; line-height:1.65; }
.mm-guide-steps code { padding:2px 5px; border-radius:5px; background:var(--mm-slate-100); color:var(--mm-slate-700); }
body.dark .mm-guide-steps code { background:rgba(148,163,184,.14); color:var(--mm-slate-200); }
.mm-help-numbered { margin:0; padding-left:22px; color:var(--mm-slate-600); font-size:13px; line-height:1.6; }
body.dark .mm-help-numbered { color:var(--mm-slate-300); }
.mm-help-numbered li + li { margin-top:9px; }

#add-chord-btn,#version-add-chord { border-color:#16a34a !important; background:#16a34a !important; color:#fff !important; }
#add-chord-btn:hover,#version-add-chord:hover { background:#15803d !important; }
#add-section-btn,#version-add-section { border-color:var(--mm-blue-600) !important; background:var(--mm-blue-600) !important; color:#fff !important; }
.mm-import-destination { margin-top:14px; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--mm-blue-50); }
body.dark .mm-import-destination { background:rgba(37,99,235,.09); }
.mm-import-destination h4 { margin:0 0 5px; }
.mm-import-destination p { margin:0 0 10px; color:var(--muted); font-size:12px; }
.mm-import-choice { display:flex; flex-wrap:wrap; gap:8px; }
.mm-import-choice label { display:flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid var(--border); border-radius:10px; background:var(--card-bg); cursor:pointer; }
.mm-import-target { margin-top:10px; }
.mm-import-target select { width:100%; min-height:42px; }
.mm-merge-note { margin:10px 0 16px; padding:11px 13px; border-radius:11px; background:var(--mm-amber-50); color:var(--mm-amber-700); font-size:13px; }
body.dark .mm-merge-note { background:rgba(245,158,11,.12); color:#fde68a; }
.mm-live-chord-color { grid-column:span 2; display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; padding:5px 8px; border-radius:8px; background:#fff; color:var(--primary); }
.mm-live-chord-color label { flex:0 0 auto; font-size:11px; font-weight:750; }
.mm-live-chord-color select { flex:0 1 auto; min-width:0; padding:4px 22px 4px 6px; border:1px solid #cbd5e1 !important; border-radius:7px !important; background:#fff !important; color:#0f172a !important; font-size:11px; }
@media (max-width:768px) { .mm-live-chord-color { grid-column:span 2; } }
.live-view-content .chord-line,
.live-view-content .live-seg-chord { color:var(--mm-chord-color) !important; }
.mm-toast-region {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:5000;
  display:grid;
  gap:9px;
  width:min(380px,calc(100vw - 32px));
  pointer-events:none;
}
.mm-toast {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:start;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(15,23,42,.96);
  color:#fff;
  box-shadow:var(--mm-shadow-lg);
  opacity:0;
  transform:translateY(10px);
  transition:.2s ease;
}
.mm-toast.show { opacity:1; transform:none; }
.mm-toast strong { display:block; font-size:13px; }
.mm-toast span { display:block; margin-top:2px; color:#cbd5e1; font-size:12px; }

/* More sheet used by mobile navigation */
.mm-more-backdrop {
  position:fixed;
  inset:0;
  z-index:1100;
  display:none;
  align-items:flex-end;
  background:rgba(8,11,29,.56);
  backdrop-filter:blur(4px);
}
.mm-more-backdrop.open { display:flex; }
.mm-more-sheet {
  width:100%;
  max-height:78dvh;
  padding:12px 16px calc(18px + env(safe-area-inset-bottom));
  overflow:auto;
  border-radius:22px 22px 0 0;
  background:var(--card-bg);
  box-shadow:0 -20px 54px rgba(15,23,42,.25);
  animation:mmSheetUp .2s ease;
}
.mm-sheet-handle { width:42px; height:4px; margin:0 auto 15px; border-radius:99px; background:var(--border); }
.mm-more-sheet h2 { margin:0 0 12px; font-size:19px; }
.mm-more-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mm-more-grid .mm-menu-button { border:1px solid var(--border); background:var(--card-bg); }
@keyframes mmSheetUp { from{ transform:translateY(30px); opacity:.4 } }

/* Live View: content first, quieter controls */
body.mm-modern .live-view {
  inset:0;
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
  padding:var(--mm-safe-top) 0 0;
  overflow:hidden;
  box-sizing:border-box;
  isolation:isolate;
  background:#fff;
}
body.dark.mm-modern .live-view { background:var(--mm-navy-950,#080b1d); }
body.mm-modern.live-view-open {
  overflow:hidden;
  overscroll-behavior:none;
}
body.mm-modern.live-view-open #app {
  visibility:hidden;
  pointer-events:none;
}
body.mm-modern.live-view-open .mm-floating-search {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.mm-modern .live-header-shell,
body.mm-modern .live-view-main,
body.mm-modern .live-view-content { background:inherit; }
body.mm-modern .live-view-main,
body.mm-modern .live-view-content { min-height:0; }
body.mm-modern .live-view-header {
  min-height:70px;
  padding:9px 74px 9px 120px;
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--card-bg) 92%,transparent);
  box-shadow:0 5px 20px rgba(15,23,42,.07);
  backdrop-filter:blur(16px);
}
body.mm-modern .live-section-badge { margin:0 0 4px; padding:3px 10px; }
body.mm-modern .live-header-exit-btn,
body.mm-modern .live-header-collapse-btn { min-height:40px; border-radius:12px; }
body.mm-modern .live-header-exit-btn {
  width:40px;
  height:40px;
  padding:0;
  background:var(--mm-slate-950);
  box-shadow:none;
  font-size:17px;
  line-height:1;
}
body.mm-modern .live-header-collapse-btn {
  position:absolute;
  left:auto;
  right:clamp(8px,1.2vw,15px);
  top:50%;
  width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  transform:translateY(-50%);
  border:1px solid rgba(37,99,235,.35);
  border-radius:12px;
  font-size:0;
  touch-action:manipulation;
  z-index:2004;
}
body.mm-modern .live-header-collapse-btn::after {
  content:'›';
  display:inline-block;
  font-size:28px;
  font-weight:400;
  line-height:1;
  transform:rotate(-90deg);
  transition:transform .2s ease;
}
body.mm-modern .live-view-header.collapsed .live-header-collapse-btn::after {
  content:'›';
  transform:rotate(90deg);
}
body.mm-modern .live-view-main { gap:0; padding-top:0; }
body.mm-modern .live-sidebar {
  width:270px;
  padding:16px;
  border-right:1px solid var(--border);
  border-radius:0;
  background:var(--card-bg);
}
body.mm-modern .flow-item { min-height:46px; margin-bottom:5px; border:1px solid transparent; border-radius:11px; }
body.mm-modern .flow-item:hover { transform:none; border-color:var(--mm-blue-300,#93c5fd); background:var(--mm-blue-50); color:var(--mm-slate-950); }
body.mm-modern .live-sidebar-toggle { border-radius:0 12px 12px 0; box-shadow:none; }
body.mm-modern .live-view-content {
  padding:18px clamp(22px,4vw,64px) calc(var(--live-controls-height, 130px) + 24px);
  line-height:1.12;
  scrollbar-width:thin;
  scrollbar-color:rgba(100,116,139,.4) transparent;
}
body.mm-modern .floating-controls {
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(15,23,42,.88);
  box-shadow:var(--mm-shadow-lg);
  backdrop-filter:blur(16px);
}
body.mm-modern .floating-controls > div { margin-bottom:0; }
body.mm-modern .floating-controls button { background:rgba(59,130,246,.9); }
body.mm-modern .floating-controls button:hover { transform:translateX(-2px); }
body.mm-modern .floating-controls-toggle,
body.mm-modern .floating-youtube-shortcut { border:1px solid rgba(255,255,255,.26); }

/* Two conditions for one idea: the rail belongs to everything in the 769-980 band EXCEPT a
   landscape phone (short AND coarse-pointered — that gets the phone block below). Tall screens
   (iPad portrait) match the first; short desktop windows are fine-pointered and match the
   second. Written as a pair because media queries have OR and AND but no NOT-group. */
@media (max-width:980px) and (min-width:769px) and (min-height:501px),
       (max-width:980px) and (min-width:769px) and (pointer:fine) {
  body.mm-modern #maestro-app,
  body.mm-modern #members-app { grid-template-columns:78px minmax(0,1fr); gap:16px; }
  body.mm-modern .nav-btn { justify-content:center; padding:11px; font-size:0; }
  body.mm-modern .nav-btn::before { position:static; font-size:18px; }
}

/* Phones, both ways up. The second condition is the landscape phone: wider than 768px but
   short and coarse-pointered — it must get the same bottom tab bar and sheet layout, not the
   desktop sidebar it used to fall into. */
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  /* Typing on a phone: the keyboard docks the bottom tab bar right above it, on top of the box
     being typed in and its Send/Save. The bar steps aside until the keyboard closes. */
  body.mm-modern:has(:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=color]):not([type=file]), textarea, [contenteditable="true"]):focus) .main-nav { display:none; }
  .mm-account-menu {
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    bottom:auto;
    width:min(348px,calc(100vw - 24px));
    max-height:calc(100dvh - 156px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding-bottom:14px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
  }
  .mm-account-menu .mm-menu-button:last-child { margin-bottom:4px; }
  body.mm-modern { padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
  body.mm-modern .header {
    min-height:64px;
    padding:8px 12px;
    align-items:center;
  }
  body.mm-modern .app-brand { gap:9px; }
  body.mm-modern .app-brand-logo { width:42px; height:42px; border-radius:12px; }
  body.mm-modern .header h1 { font-size:18px; }
  body.mm-modern .app-brand-tagline { display:none; }
  body.mm-modern .header-controls { display:flex; width:auto; margin-left:auto; gap:7px; }
  body.mm-modern #organization-header-control { display:none !important; }
  body.mm-modern #connection-status {
    width:34px !important;
    min-width:34px;
    min-height:34px;
    padding:0 !important;
    overflow:hidden;
    color:transparent !important;
    font-size:0 !important;
    justify-content:center;
  }
  body.mm-modern #connection-status::after { content:""; width:9px; height:9px; border-radius:50%; background:currentColor; color:var(--mm-green-600); }
  body.mm-modern .container { padding:14px 12px 20px; }
  body.mm-modern #maestro-app,
  body.mm-modern #members-app { grid-template-columns:none; }
  body.mm-modern #maestro-app:not([style*="display: none"]):not([style*="display:none"]),
  body.mm-modern #members-app:not([style*="display: none"]):not([style*="display:none"]) { display:block !important; }
  body.mm-modern #maestro-app[style*="display: none"],
  body.mm-modern #maestro-app[style*="display:none"],
  body.mm-modern #members-app[style*="display: none"],
  body.mm-modern #members-app[style*="display:none"],
  body.mm-modern.member-access #maestro-app { display:none !important; }
  body.mm-modern .content-area {
    min-height:calc(100dvh - 166px);
    padding:18px 14px 22px;
    border-radius:18px;
  }
  body.mm-modern .main-nav {
    position:fixed;
    inset:auto 0 0;
    z-index:1000;
    min-height:0;
    height:calc(66px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:2px;
    padding:5px 5px env(safe-area-inset-bottom);
    overflow:visible;
    border:0;
    border-top:1px solid var(--border);
    border-radius:0;
    background:color-mix(in srgb,var(--card-bg) 94%,transparent);
    box-shadow:0 -8px 26px rgba(15,23,42,.09);
    backdrop-filter:blur(18px);
  }
  body.mm-modern .nav-btn {
    min-width:0;
    min-height:56px;
    justify-content:flex-end;
    padding:6px 2px 5px;
    flex-direction:column;
    gap:1px;
    overflow:hidden;
    color:var(--muted);
    font-size:10px;
    line-height:1.15;
    text-align:center;
    white-space:nowrap;
  }
  body.mm-modern .nav-btn::before { position:static; width:auto; font-size:18px; line-height:1.1; }
  body.mm-modern .nav-btn.active { background:var(--mm-blue-50); color:var(--mm-blue-700); box-shadow:none; }
  body.dark.mm-modern .nav-btn.active { background:rgba(59,130,246,.14); color:#bfdbfe; }
  body.mm-modern .main-nav .mm-mobile-hidden { display:none !important; }
  body.mm-modern .main-nav .download-btn { display:none !important; }
  body.mm-modern .main-nav .mm-nav-collapse { display:none !important; }
  body.mm-modern .main-nav .mm-help-toggle { display:none !important; }
  body.mm-modern .main-nav .mm-workspace-toggle { display:none !important; }
  body.mm-modern .mm-more-toggle { display:flex !important; }
  /* app.html's own mobile rule sets flex-direction:column on .search-bar, which
     silently defeats everything below: in a column these flex bases apply to
     height, and align-items:center then shrinks each control to its own text
     width. The result was four narrow pills stacked down the middle, roughly
     250px of chrome -- more than a whole song card -- before the first song.
     Restated here at higher specificity so the intended layout actually wins. */
  body.mm-modern .search-bar { flex-direction:row; flex-wrap:wrap; align-items:stretch; gap:8px; margin-bottom:14px; }
  body.mm-modern .search-bar .search-input { flex:1 0 100%; }
  /* Sort takes the room the buttons leave, so the whole control set is two rows. */
  body.mm-modern .search-bar .user-filter-select { flex:1 1 120px; min-width:0; }
  /* Compact on small screens; no longer competes with the bottom tab bar. */
  .mm-floating-search { top:74px; width:calc(100vw - 20px); padding:6px; border-radius:14px; }
  .mm-floating-search input { min-height:38px; }
  body.mm-modern .search-bar .btn { flex:0 1 auto; width:auto; white-space:nowrap; }
  body.mm-modern .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  body.mm-modern .stat-card { min-height:108px; padding:15px; }
  body.mm-modern .stat-number { font-size:29px; }
  body.mm-modern .song-list { grid-template-columns:1fr; }
  /* Tightened for the phone. Cards grew taller when songs gained themes -- four
     theme chips wrap to a second row -- so the surrounding padding was reclaimed
     to pay for the information rather than the whitespace. Touch targets are
     untouched: only padding and gaps move, never button heights. */
  body.mm-modern .song-card,
  body.mm-modern .session-card { padding:13px; }
  body.mm-modern .song-meta { gap:5px; margin-top:7px; }
  body.mm-modern .song-theme { padding:2px 7px; }
  body.mm-modern .song-actions { padding-top:10px; margin-top:2px; }
  body.mm-modern .song-card { width:100%; min-width:0; max-width:100%; overflow:hidden; }
  body.mm-modern .song-actions {
    width:100%;
    min-width:0 !important;
    max-width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:stretch;
    overflow:visible;
  }
  body.mm-modern .song-actions .btn {
    width:100%;
    min-width:0;
    padding-right:8px;
    padding-left:8px;
    white-space:normal;
  }
  body.mm-modern .song-actions > :only-child { grid-column:1 / -1; }
  .mm-view-list .song-card { display:block; }
  body.mm-modern .mm-view-list .song-actions { margin-top:13px; padding:0; border:0; min-width:0; }
  body.mm-modern .event-session-groups { padding:6px; }
  body.mm-modern .event-session-heading { min-height:42px; padding:9px 10px; }
  body.mm-modern .event-session-songs { padding:7px; }
  body.mm-modern .event-song-row { grid-template-columns:25px minmax(0,1fr); gap:8px; padding:9px; }
  body.mm-modern .event-song-order { width:23px; height:23px; border-radius:7px; }
  body.mm-modern .event-song-musical-meta { grid-column:2; justify-content:flex-start; }
  /* Superseded: the bar is pinned under the header now, so it must not also be
     bottom-anchored — setting both stretched it to fill the whole viewport. */
  .mm-floating-search { bottom:auto; width:calc(100vw - 20px); }
  body.mm-modern .announcement-box { padding:18px 16px 16px 20px; }
  body.mm-modern .announcement-box h3 { padding-right:0; }
  body.mm-modern .announcement-actions { position:static; margin-top:14px; }
  .mm-announcement-toolbar { grid-template-columns:1fr; }
  /* The toolbar keeps its buttons side by side and wraps; only the template
     row stacks, because a select squeezed next to two buttons is unusable.
     Stacking flips the flex main axis to vertical, so the select's flex-basis
     has to be cleared or it becomes a 220px-tall control instead of a 220px-wide one. */
  .mm-template-row { flex-direction:column; align-items:stretch; }
  .mm-template-row select { flex:0 0 auto; width:100%; }
  .mm-format-help code { min-width:0; flex:0 0 118px; }
  body.mm-modern .modal { padding:0; align-items:flex-end; }
  body.mm-modern .modal-content {
    width:100%;
    max-height:94dvh;
    padding:20px 16px calc(18px + env(safe-area-inset-bottom));
    border-width:1px 0 0;
    border-radius:22px 22px 0 0;
  }
  body.mm-modern .song-modal-content,
  body.mm-modern .sync-conflict-modal .modal-content,
  body.mm-modern #song-import-modal .modal-content,
  body.mm-modern #session-modal .modal-content,
  body.mm-modern .org-modal-card { width:100%; max-width:none !important; }
  body.mm-modern .org-onboarding-card { padding-top:28px; }
  body.mm-modern .org-modal-close { top:14px; right:14px; }
  body.mm-modern .org-code-panel { padding:14px; }
  body.mm-modern .org-code-row { grid-template-columns:1fr; }
  body.mm-modern .org-code-row .btn { width:100%; }
  body.mm-modern .version-metadata-grid { grid-template-columns:1fr; gap:0; }
  body.mm-modern #song-modal .modal-content { height:94dvh; max-height:94dvh; }
  /* Full screen hands the height to app.html's visualViewport vars so the soft
     keyboard cannot cover the end of the lyrics. This rule exists only because
     the one above matches with the same specificity from a later sheet and
     would otherwise pin the modal at 94dvh with the keyboard up. */
  body.mm-modern #song-modal.fullscreen .modal-content {
    height:var(--song-modal-vh,100dvh);
    max-height:var(--song-modal-vh,100dvh);
  }
  body.mm-modern .mm-help-modal .mm-help-dialog {
    width:100% !important;
    height:94dvh;
    max-height:94dvh !important;
    border-radius:22px 22px 0 0;
  }
  .mm-help-header { min-height:0; padding:max(16px,env(safe-area-inset-top)) 16px 14px; gap:14px; }
  .mm-help-header h2 { font-size:24px; }
  .mm-help-header > div > p:last-child { display:none; }
  .mm-help-layout { height:auto; flex:1 1 auto; display:block; overflow:hidden; }
  .mm-help-toc {
    height:48px;
    min-height:48px;
    padding:7px 10px;
    flex-direction:row;
    gap:5px;
    overflow-x:auto;
    overflow-y:hidden;
    border-right:0;
    border-bottom:1px solid var(--border);
    scrollbar-width:none;
  }
  .mm-help-toc::-webkit-scrollbar { display:none; }
  .mm-help-toc a { flex:0 0 auto; padding:8px 10px; white-space:nowrap; }
  .mm-help-content { height:calc(100% - 48px); padding:18px 14px calc(32px + env(safe-area-inset-bottom)); }
  .mm-help-section { padding-bottom:22px; margin-bottom:22px; }
  .mm-install-grid,
  .mm-guide-grid { grid-template-columns:1fr; }
  .mm-help-section-heading h3 { font-size:18px; }
  .mm-toast-region { right:12px; bottom:calc(78px + env(safe-area-inset-bottom)); }
  body.mm-modern .live-view { padding-bottom:0; }
  body.mm-modern .header { flex-direction:row; justify-content:space-between; align-items:center; }
  body.mm-modern .app-brand { flex:1 1 auto; justify-content:flex-start; }
  body.mm-modern .header-controls { flex:0 0 auto; }
  body.mm-modern .live-view-header { padding:7px 52px; min-height:62px; }
  body.mm-modern .live-header-exit-btn { left:8px; width:40px; height:40px; min-height:40px; padding:0; font-size:0; border-radius:12px; }
  body.mm-modern .live-header-exit-btn::after { content:'✕'; font-size:17px; }
  body.mm-modern .hamburger-menu {
    position:fixed;
    left:0;
    top:50%;
    width:30px;
    height:68px;
    padding:0;
    transform:translateY(-50%);
    border:1px solid rgba(37,99,235,.35);
    border-left:0;
    border-radius:0 14px 14px 0;
    background:rgba(37,99,235,.94);
    box-shadow:5px 0 18px rgba(15,23,42,.2);
  }
  body.mm-modern .hamburger-menu span { display:none; }
  body.mm-modern .hamburger-menu::after { content:'›'; color:#fff; font-size:28px; line-height:1; }
  body.mm-modern .hamburger-menu.active { left:min(86vw,320px); background:#0f172a; }
  body.mm-modern .hamburger-menu.active::after { content:'‹'; }
  body.mm-modern .live-view-content { padding:10px 58px calc(122px + env(safe-area-inset-bottom)) 38px; }
  body.mm-modern .floating-controls { left:8px; right:8px; bottom:calc(68px + env(safe-area-inset-bottom)); grid-template-columns:repeat(5,minmax(0,1fr)); }
  body.mm-modern .floating-controls button:hover { transform:none; }
}

@media (orientation:landscape) and (max-height:600px) and (max-width:1000px) {
  body.mm-modern .header { position:relative; min-height:54px; padding:6px 12px; }
  body.mm-modern .app-brand-logo { width:38px; height:38px; }
  body.mm-modern .container { padding-top:8px; }
  body.mm-modern .content-area { min-height:calc(100dvh - 80px); }
  body.mm-modern .modal-content { max-height:96dvh; }
  body.mm-modern .live-view-header { min-height:52px; padding-top:4px; padding-bottom:4px; }
  body.mm-modern .live-view-content { padding-top:8px; }
}

/* Landscape phone only (coarse pointer keeps short desktop windows out — they still have the
   sidebar, not the tab bar). With ≤500px of height the 66px tab bar is a fifth of the screen;
   trim it. */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse) {
  body.mm-modern { padding-bottom:calc(62px + env(safe-area-inset-bottom)); }
  body.mm-modern .main-nav { height:calc(56px + env(safe-area-inset-bottom)); }
  body.mm-modern .main-nav .nav-btn { min-height:46px; }
}

/* Live navigation stays neutral so blue song-section badges remain the focus. */
body.light.mm-modern .live-header-collapse-btn {
  border-color:#cbd5e1;
  background:#f1f5f9;
  color:#334155;
  box-shadow:0 5px 18px rgba(15,23,42,.12);
}
body.dark.mm-modern .live-header-collapse-btn {
  border-color:#334155;
  background:#1e293b;
  color:#cbd5e1;
  box-shadow:0 5px 18px rgba(0,0,0,.28);
}
body.light.mm-modern .hamburger-menu,
body.light.mm-modern .hamburger-menu.active {
  border-color:#cbd5e1;
  background:#f1f5f9;
  color:#334155;
  box-shadow:5px 0 18px rgba(15,23,42,.12);
}
body.light.mm-modern .hamburger-menu::after { color:#334155; }
body.light.mm-modern .live-sidebar-toggle {
  border-color:#cbd5e1;
  background:#f1f5f9;
  color:#334155;
  box-shadow:5px 0 18px rgba(15,23,42,.12);
}
body.light.mm-modern .live-sidebar-toggle:hover { background:#e2e8f0; }
body.dark.mm-modern .hamburger-menu,
body.dark.mm-modern .hamburger-menu.active {
  border-color:#334155;
  background:#1e293b;
  color:#cbd5e1;
  box-shadow:5px 0 18px rgba(0,0,0,.28);
}
body.dark.mm-modern .hamburger-menu::after { color:#cbd5e1; }
body.dark.mm-modern .live-sidebar-toggle {
  border-color:#334155;
  background:#1e293b;
  color:#cbd5e1;
  box-shadow:5px 0 18px rgba(0,0,0,.28);
}
body.dark.mm-modern .live-sidebar-toggle:hover { background:#334155; }
body.light.mm-modern .live-header-exit-btn {
  border:1px solid #fecdd3;
  background:#fff1f2;
  color:#be123c;
  box-shadow:0 5px 18px rgba(190,18,60,.12);
}
body.dark.mm-modern .live-header-exit-btn {
  border:1px solid #881337;
  background:#3f1d2e;
  color:#fda4af;
  box-shadow:0 5px 18px rgba(0,0,0,.28);
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------------------------------------------------------------- event program editor
   The event modal's running order. An item is a row you can drag; a section is a heading,
   a song is read-only (it comes from the library or a session), and everything else is
   editable in place. */
#event-program-editor { margin-bottom: 10px; }
.program-empty {
  padding: 14px; border: 1px dashed var(--border, #cbd5e1); border-radius: 8px;
  opacity: .7; font-size: 13px; line-height: 1.45;
}
.program-list { display: flex; flex-direction: column; gap: 6px; }
/* Link wide, Start/Stop narrow. The label text sits above its input rather than beside it —
   an inline label with a full-width input overflows sideways into the next column, which is
   how these fields ended up drawn on top of each other on a phone. */
.program-videolink-edit { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px; gap: 8px; margin-top: 8px; }
.program-videolink-edit label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; font-weight: 650; }
.program-videolink-edit input { width: 100%; box-sizing: border-box; }
@media (max-width: 700px) {
  .program-videolink-edit { grid-template-columns: 1fr 1fr; }
  .program-videolink-edit label:first-child { grid-column: 1 / -1; }
}
.program-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border, #cbd5e1); border-radius: 8px;
  background: var(--card, #fff); cursor: grab;
}
/* Dark mode: --card is never defined, so the card stayed white under the theme's white text. */
body.dark .program-item { background: rgba(15, 23, 42, .6); border-color: rgba(148, 163, 184, .28); }
.program-item.dragging { opacity: .5; }
.program-item-grip { padding-top: 4px; opacity: .45; cursor: grab; user-select: none; }
.program-item-kind {
  flex: 0 0 auto; margin-top: 3px; padding: 2px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(100, 116, 139, .16); color: inherit; opacity: .8;
}
.program-item-kind-title { background: rgba(59, 130, 246, .18); }
.program-item-kind-song { background: rgba(16, 185, 129, .18); }
.program-item-kind-text { background: rgba(245, 158, 11, .2); }
/* The rest of the kinds had no colour of their own and read as one grey mass in a long running
   order. A glance down the list should tell you the shape of the service. */
.program-item-kind-timer { background: rgba(168, 85, 247, .2); }
.program-item-kind-image { background: rgba(236, 72, 153, .18); }
.program-item-kind-video { background: rgba(239, 68, 68, .18); }
.program-item-kind-videolink { background: rgba(239, 68, 68, .3); }
.program-item-kind-scripture { background: rgba(20, 184, 166, .2); }
.program-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.program-item-title { font-size: 14px; overflow-wrap: anywhere; }
.program-item-secondary { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.program-item-source { font-size: 11px; opacity: .6; }
.program-item-label, .program-item-body {
  width: 100%; padding: 5px 8px; border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px; font: inherit; font-size: 13px; background: transparent; color: inherit;
}
.program-item-body { resize: vertical; line-height: 1.4; }
.program-item-actions { display: flex; gap: 4px; }
.program-item-btn {
  padding: 3px 7px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: inherit; font-size: 12px; cursor: pointer; opacity: .65;
}
.program-item-btn:hover { opacity: 1; background: rgba(100, 116, 139, .14); }
.program-item-btn:disabled { opacity: .25; cursor: default; }
/* An item carrying its own styling reads as "on" rather than needing to be opened to find out. */
.program-item-btn.is-on { opacity: 1; border-color: rgba(99, 102, 241, .55); background: rgba(99, 102, 241, .14); }

/* Scoped away from the global .form-group field sizing: the program editor lives inside a
   .form-group, whose width:100% / min-height:44px / padding:10px rules were never meant for the
   compact inline controls of a program row — they are what crushed the media rows on phones. */
body.mm-modern .form-group .program-item .program-item-check select,
.form-group .program-item .program-item-check select {
  width: auto; min-height: 34px; padding: 4px 8px; font-size: 13px;
}
body.mm-modern .form-group .program-item .program-item-label,
.form-group .program-item .program-item-label {
  width: 100%; min-height: 38px; padding: 6px 9px; font-size: 16px; font-family: inherit;
}
body.mm-modern .form-group .program-item .program-item-body,
.form-group .program-item .program-item-body {
  width: 100%; min-height: 64px; padding: 6px 9px; font-size: 14px; font-family: inherit;
}
.program-item-check { flex-wrap: wrap; }

/* Phones: the full actions row moves under the title — eight icons never fit beside a title on a
   358px sheet, and squeezing them there is what wrapped titles one word per line and scrolled the
   whole dialog sideways. */
@media (max-width: 600px) {
  .program-item { flex-wrap: wrap; }
  .program-item-actions {
    flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; gap: 6px;
    margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(148, 163, 184, .3);
  }
  .program-item-kind { padding: 2px 6px; letter-spacing: .02em; }
  .program-item-style label { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .program-item-style select { width: 100%; }
}
/* Touch cannot drag these rows (there is no touch drag path), so the grip is dead weight there
   and the ↑↓ buttons are the reorder controls — size every row button for a finger. */
@media (max-width: 600px), ((hover: none) and (pointer: coarse)) {
  .program-item-grip { display: none; }
  .program-item-btn {
    min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; opacity: .8;
  }
  body.mm-modern .form-group .program-item .program-item-check select,
  .form-group .program-item .program-item-check select { min-height: 40px; }
}
/* ⋯ and its menu exist for phones only. There a row keeps ↑ ↓ ✎ and puts the rest (Preview,
   Look, Duplicate, Hide, Remove) behind ⋯ with words beside the icons — eight 40px icons wrapped
   and left ✕ alone on a second line. */
.program-item-more, .program-item-menu { display: none; }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .program-item-actions { position: relative; }
  .program-item-actions .program-item-btn.is-overflow { display: none; }
  .program-item-actions .program-item-more { display: inline-flex; margin-left: auto; font-size: 18px; font-weight: 800; }
  /* Above the rows after it, below the dialog's sticky heading and footer (z-index 3). */
  .program-item.menu-open { position: relative; z-index: 2; }
  .program-item-menu:not([hidden]) {
    display: flex; flex-direction: column;
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 5;
    min-width: 220px; max-width: calc(100vw - 48px); padding: 6px;
    border: 1px solid var(--border, #cbd5e1); border-radius: 12px;
    background: var(--card-bg, #fff); color: inherit;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
  }
  body.dark .program-item-menu:not([hidden]) { background: #1e293b; border-color: rgba(148, 163, 184, .35); }
  .program-item-menu [role="menuitem"] {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
    border: 0; border-radius: 8px; background: transparent; color: inherit;
    font: inherit; font-size: 15px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer;
  }
  .program-item-menu [role="menuitem"] > span { width: 22px; text-align: center; flex: none; }
  .program-item-menu [role="menuitem"] small { font-weight: 500; opacity: .65; }
  .program-item-menu [role="menuitem"]:hover,
  .program-item-menu [role="menuitem"]:focus-visible { background: rgba(100, 116, 139, .14); outline: none; }
  .program-item-menu [role="menuitem"]:focus-visible { box-shadow: inset 0 0 0 2px var(--primary, #4f46e5); }
  .program-item-menu [role="menuitem"].is-danger { color: #dc2626; }
  body.dark .program-item-menu [role="menuitem"].is-danger { color: #f87171; }
}
.program-background-actions { grid-column:1/-1; display:grid; grid-template-columns:minmax(190px,1fr) auto auto; gap:7px; align-items:center; }
.program-background-scope { min-width:0; }
.program-video-loop-options { grid-column:1/-1; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:8px 10px; border-radius:9px; background:rgba(59,130,246,.08); }
@media (max-width:680px) { .program-background-actions { grid-template-columns:1fr; } }
.mm-event-background-panel { padding:14px; border:1px solid rgba(59,130,246,.28); border-radius:12px; background:rgba(59,130,246,.05); }
.mm-event-background-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.mm-event-background-head label { display:block; margin-bottom:3px; font-size:15px; font-weight:800; }
.mm-event-background-head small { display:block; opacity:.7; line-height:1.4; }
.mm-event-background-buttons { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.mm-field-kicker { display:block; margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.66; }
.mm-event-background-body { display:grid; grid-template-columns:minmax(220px,1fr) 220px; gap:12px; align-items:start; }
#event-background-video-options { margin-top:9px; display:grid; gap:7px; }
#event-background-video-options[hidden] { display:none; }
.mm-event-background-preview { position:relative; width:100%; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:#07101f; color:#94a3b8; font-size:11px; text-align:center; }
.mm-event-background-preview img,.mm-event-background-preview video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:640px) { .mm-event-background-head { flex-direction:column; } .mm-event-background-body { grid-template-columns:1fr; } .mm-event-background-preview { max-width:320px; } }
@media (max-width:430px) {
  .mm-event-background-panel { padding:10px; }
  .mm-event-background-head { gap:8px; }
  /* It is a preview, not the editor — on a phone it earns a corner, not a third of the sheet. */
  .mm-event-background-preview { max-width:200px; }
  .mm-media-pick { flex-wrap:wrap; }
  .mm-media-pick-thumb { flex-basis:56px; height:35px; }
  .mm-media-pick .btn { flex:1 1 auto; }
}

/* From/To side by side where there is room, stacked on a narrow phone. Extracted from an inline
   style, which no media query could reach. */
.mm-time-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:430px) { .mm-time-range { grid-template-columns:1fr; } }

/* Cancel / Save stay in reach however long the program grows. background:inherit picks up the
   sheet's own themed background so scrolled content never shows through. */
.mm-event-footer { display:flex; gap:10px; justify-content:flex-end; }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  /* A focused field is scrolled clear of the sticky footer, not to the edge underneath it. */
  #event-modal .modal-content { scroll-padding-bottom:96px; }
  .mm-event-footer {
    /* bottom matches the sheet's own bottom padding, or an 18px strip of the form shows below. */
    position:sticky; bottom:calc(-18px - env(safe-area-inset-bottom)); z-index:3;
    margin:14px -16px calc(-18px - env(safe-area-inset-bottom));
    padding:10px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(148,163,184,.28); background:inherit;
  }
  .mm-event-footer .btn { flex:1 1 auto; justify-content:center; }
}

#event-background-rules-modal { z-index:11003; }
.mm-background-rules-dialog { width:min(920px,94vw); max-width:920px; }
.mm-background-rules-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; }
.mm-background-rules-head h2 { margin:0 0 4px; }
.mm-background-rules-head p { margin:0; opacity:.7; }
.mm-background-precedence { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:16px; padding:10px 12px; border-radius:10px; background:rgba(59,130,246,.08); color:#64748b; font-size:12px; font-weight:750; }
.mm-background-precedence span:last-child { color:#2563eb; }
.mm-background-rules-list { display:grid; gap:8px; }
.mm-rule-section-title { margin:20px 0 4px; font-size:15px; }
.mm-rule-section-help { margin:0 0 10px; color:#64748b; font-size:12px; }
.mm-background-rule-row { display:grid; grid-template-columns:minmax(220px,.9fr) minmax(260px,1.1fr); align-items:center; gap:18px; padding:12px 14px; border:1px solid rgba(148,163,184,.28); border-radius:11px; background:rgba(148,163,184,.045); }
.mm-background-rule-row:first-child { border-color:rgba(59,130,246,.42); background:rgba(59,130,246,.07); }
.mm-background-rule-copy { display:grid; gap:3px; }
.mm-background-rule-copy strong { font-size:14px; }
.mm-background-rule-copy small { opacity:.66; line-height:1.35; }
.mm-background-rule-select { width:100%; }
.mm-transition-rule-controls { display:grid; grid-template-columns:minmax(180px,1fr) minmax(160px,.8fr); align-items:center; gap:12px; }
.mm-transition-rule-select { width:100%; }
.mm-transition-rule-speed { display:grid; grid-template-columns:auto auto; justify-content:space-between; gap:4px 8px; font-size:12px; }
.mm-transition-rule-speed input { grid-column:1/-1; width:100%; }
.mm-background-rules-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; margin-top:18px; padding-top:14px; border-top:1px solid rgba(148,163,184,.25); }
.mm-background-rules-actions > span { margin-right:auto; color:#64748b; font-size:12px; }
.mm-control-event-backgrounds .btn { width:100%; justify-content:center; }
.projector-diagnostics { margin:0 0 14px; padding:9px 10px; border:1px solid rgba(148,163,184,.22); border-radius:9px; background:rgba(148,163,184,.07); color:#94a3b8; font-size:12px; line-height:1.4; }
.projector-diagnostics[data-state="live"] { border-color:rgba(52,211,153,.28); background:rgba(16,185,129,.08); color:#6ee7b7; }
.mm-global-background-setting #projector-background-video-options { display:grid; gap:6px; margin-top:9px; }
.mm-global-background-setting #projector-background-video-options[hidden] { display:none; }
.presenter-slide-canvas,.presenter-next-slide-preview { isolation:isolate; }
.presenter-slide-canvas.is-exact-projector-preview { padding:0; display:block; background:#000; }
.mm-control-projector-frame { width:100%; height:100%; border:0; display:block; background:#000; pointer-events:none; }
.mm-preview-background-media,.mm-preview-background-scrim { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.mm-preview-background-media { z-index:-2; display:block; }
.mm-preview-background-scrim { z-index:-1; background:#000; }
.program-background-hint { display:block; grid-column:1/-1; margin-top:-4px; color:#64748b; line-height:1.35; }
@media (max-width:680px) { .mm-background-rule-row { grid-template-columns:1fr; gap:8px; } .mm-transition-rule-controls { grid-template-columns:1fr; } .mm-background-rules-actions { flex-wrap:wrap; } .mm-background-rules-actions > span { flex-basis:100%; } }
.program-item-remove:hover { background: rgba(239, 68, 68, .16); }

/* Per-item style override, shown under the item it belongs to. */
.program-item-style {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  margin-top: 8px; padding: 8px 10px; border: 1px solid rgba(148, 163, 184, .3); border-radius: 8px;
  background: rgba(100, 116, 139, .08);
}
.program-item-style label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; opacity: .85; }
.program-item-style select { padding: 4px 6px; font-size: 12px; }
/* An inline yes/no on the item itself — whether the room hears a clip is a planning decision.
   The checkbox's own size is set with the other inline checkboxes above, because the program
   editor lives inside a .form-group and `.form-group input{width:100%;padding:10px}` blew it up
   into a 55px tile. */
.program-item-check { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; opacity: .85; cursor: pointer; }
.program-item-hidden { opacity: .5; }
.program-item-hidden .program-item-title { text-decoration: line-through; }
.program-item-orphan { border-color: rgba(239, 68, 68, .55); }
.program-badge {
  padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 750;
}
.program-badge-warn { background: rgba(239, 68, 68, .16); color: #b91c1c; }
.program-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.program-add-row select { flex: 1 1 200px; margin: 0; }
.program-reconcile {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .1);
}
.program-reconcile-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; font-size:12px; font-weight:750; }
.program-reconcile-help { margin:0 0 6px; font-size:11px; line-height:1.4; opacity:.72; }
.program-unplaced-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 4px 0; font-size: 13px;
}
@media (max-width:620px) { .program-reconcile-heading,.program-unplaced-row { align-items:stretch; flex-direction:column; } }
.event-program-heading {
  margin: 8px 0 4px; font-size: 12px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; opacity: .75;
}
.event-program-note { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 13px; opacity: .8; }
.event-program-note-kind {
  padding: 1px 6px; border-radius: 999px; font-size: 10px;
  font-weight: 750; text-transform: uppercase; background: rgba(100, 116, 139, .16);
}
@media (prefers-color-scheme: dark) {
  .program-badge-warn { color: #fca5a5; }
}

/* ------------------------------------------------------- program song picker
   Type a title, or type what the song should be about and let the library answer. The results
   say why each one matched, because "these came back for 'grace'" is only useful if you can see
   whether it was the title, a theme, or a line in the lyrics. */
.program-song-picker { position: relative; margin-top: 8px; }
.program-song-picker input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px; font: inherit; font-size: 13px; background: transparent; color: inherit;
}
.program-song-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  max-height: 320px; overflow-y: auto; display: none;
  border: 1px solid var(--border, #cbd5e1); border-radius: 10px;
  background: var(--card-bg, #fff); box-shadow: 0 14px 38px rgba(15, 23, 42, .18);
}
/* --card-bg is the page's card colour; outside body.mm-modern there is none, so dark sets it here. */
body.dark .program-song-results { background: #1e293b; border-color: rgba(148, 163, 184, .3); }
.program-song-results.open { display: block; }
.program-song-result {
  display: block; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border, #e2e8f0);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.program-song-result:last-child { border-bottom: 0; }
.program-song-result:hover,
.program-song-result.active { background: rgba(59, 130, 246, .12); }
.program-song-result-title { font-size: 13px; font-weight: 700; }
.program-song-result-meta { margin-top: 2px; font-size: 11px; opacity: .65; }
.program-song-reasons { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; }
.program-song-reason {
  padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 650;
  background: rgba(100, 116, 139, .16);
}
.program-song-reason-theme { background: rgba(16, 185, 129, .18); }
.program-song-reason-lyric { background: rgba(245, 158, 11, .2); }
.program-song-reason-title { background: rgba(59, 130, 246, .18); }
.program-song-result-line { margin-top: 3px; font-size: 11px; font-style: italic; opacity: .75; }
.program-song-group {
  padding: 6px 12px; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; opacity: .55; background: rgba(100, 116, 139, .07);
}
.program-song-empty { padding: 12px; font-size: 12px; opacity: .7; }

/* The section a song was planned for in its session — Gathering, Worship, Closing. Coloured the
   same way the event cards colour them, so a section reads the same wherever it appears. */
.program-item-section {
  padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 750;
  letter-spacing: .02em; background: rgba(100, 116, 139, .16);
}
.program-item-section-opening  { background: rgba(59, 130, 246, .18); }
.program-item-section-response { background: rgba(16, 185, 129, .18); }
.program-item-section-closing  { background: rgba(245, 158, 11, .2); }

/* Heading between program items in the presenter's slide navigator, so a list that now spans the
   whole service still reads as an order of service rather than one long run of slides. */
#presenter-view-container .presenter-slide-list-group {
  position: sticky; top: -1px; z-index: 2;
  margin: 10px 0 5px; padding: 6px 8px;
  border-radius: 6px;
  /* Opaque, deliberately. This heading sticks while the list scrolls under it, and with the
     translucent tint it had, the row passing behind showed straight through the letters — which
     read as two lines of text printed on top of each other. The solid layer underneath is the
     slide-list card's own colour, so the tint sits on something rather than on the rows. */
  background: linear-gradient(rgba(148, 163, 184, .16), rgba(148, 163, 184, .16)), rgb(17, 29, 46);
  box-shadow: 0 1px 0 rgba(148, 163, 184, .18), 0 4px 8px -6px rgba(0, 0, 0, .8);
  color: var(--presenter-accent, #93c5fd);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  /* A long item name is cut with an ellipsis rather than wrapping. min-height is what keeps that
     from destroying the row: the list is a grid, and `overflow: hidden` gives a grid item an
     automatic minimum size of zero, so the track collapsed under the content and clipped the
     heading to its own padding — 12px of box around 27px of text. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 27px; line-height: 15px;
}
#presenter-view-container .presenter-slide-list-group:first-child { margin-top: 0; }

/* The current item in the Order of service.

   It was already being marked active, but only with a 16%-opacity tint and a translucent border
   — next to the slide navigator, which uses a solid border and a filled number badge, it read as
   nothing at all. Stepping through the service with the up and down arrows is the one time the
   operator needs to see where they are at a glance, so this now matches the navigator's weight
   and adds a bar down the leading edge. */
#presenter-view-container #presenter-flow-list .flow-item.active {
  position: relative;
  border-color: rgb(96, 165, 250);
  background: rgba(37, 99, 235, .2);
  padding-left: 14px !important;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, .35);
}
#presenter-view-container #presenter-flow-list .flow-item.active::before {
  content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: rgb(96, 165, 250);
}
#presenter-view-container #presenter-flow-list .flow-item.active .flow-section {
  color: rgb(147, 197, 253); font-weight: 800;
}
#presenter-view-container #presenter-flow-list .flow-item.active .flow-title { font-weight: 800; }

/* Playback controls for a video slide. They live here, in the control view, and never on the
   projected copy — a play bar across the bottom of a clip is not something a congregation should
   be looking at. The buttons drive the projector's copy, which is the one the room hears. */
#presenter-view-container .presenter-video-bar {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 8px 10px;
  border: 1px solid var(--presenter-border, rgba(148, 163, 184, .25));
  border-radius: 10px; background: rgba(148, 163, 184, .08);
}
#presenter-view-container .presenter-video-bar[hidden] { display: none; }
#presenter-view-container .presenter-video-btn {
  min-width: 38px; min-height: 34px; padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, .28); border-radius: 8px;
  background: rgba(148, 163, 184, .12); color: inherit;
  font-size: 14px; line-height: 1; cursor: pointer;
}
#presenter-view-container .presenter-video-btn:hover { background: rgba(96, 165, 250, .22); border-color: rgba(96, 165, 250, .5); }
#presenter-view-container .presenter-video-bar input[type="range"] { flex: 1 1 auto; min-width: 80px; margin: 0; accent-color: #60a5fa; }
#presenter-view-container .presenter-video-time {
  flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8;
}
/* The volume slider is a passenger beside the position bar, not an equal to it. */
#presenter-view-container .presenter-video-bar #presenter-video-volume { flex: 0 0 74px; min-width: 0; }
/* Google Drive's player, or one that never loaded. Buttons that cannot do anything are shown
   plainly unable to, rather than left looking live for somebody to press during a service. */
#presenter-view-container .presenter-video-bar.is-uncontrollable { opacity: .72; }
#presenter-view-container .presenter-video-btn:disabled,
#presenter-view-container .presenter-video-bar input[type="range"]:disabled {
  opacity: .45; cursor: not-allowed;
}
#presenter-view-container .presenter-video-btn:disabled:hover {
  background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .28);
}
#presenter-view-container .presenter-video-bar.is-uncontrollable .presenter-video-time { flex: 1 1 auto; opacity: .9; }

/* ------------------------------------------------------------------ event card
   The card answers three questions before you open anything: when is it, what is in it, and is
   there anything about it that will go wrong on the day. */
.event-card { padding: 14px !important; margin-bottom: 10px; }
.event-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.event-card-title { min-width: 0; }
.event-card-title h3 { margin: 0; font-size: 16px; line-height: 1.25; }
.event-card-when { margin-top: 2px; font-size: 13px; opacity: .75; }
.event-card-venue { margin-top:4px; color:var(--muted); font-size:13px; font-weight:600; }
.event-card-speaker { margin-top:3px; color:var(--muted); font-size:13px; font-weight:600; }

.event-when {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 750; white-space: nowrap;
  background: rgba(100, 116, 139, .16);
}
.event-when-today { background: rgba(220, 38, 38, .16); color: #b91c1c; }
/* Tomorrow is the one that changes tonight's plans — it gets its own colour between today's
   red and the calm blue of "in N days", loud enough to catch a glance. */
.event-when-tomorrow { background: rgba(249, 115, 22, .2); color: #c2410c; }
.event-when-soon { background: rgba(37, 99, 235, .16); color: #1d4ed8; }
.event-when-past { background: rgba(100, 116, 139, .14); opacity: .75; }
.event-when-unscheduled { background: rgba(245, 158, 11, .18); color: #b45309; }

.event-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 4px; }
.event-stat {
  padding: 3px 9px; border-radius: 999px; font-size: 11px;
  background: rgba(100, 116, 139, .12);
}
.event-stat strong { font-weight: 800; }
.event-stat-muted { opacity: .6; }
.event-stat-empty { background: rgba(245, 158, 11, .16); }

/* Things that only reveal themselves mid-service unless they are said here. */
.event-warnings { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.event-warning {
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 650;
  background: rgba(245, 158, 11, .18); color: #92400e;
}
.event-card-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

@media (prefers-color-scheme: dark) {
  .event-when-today { color: #fca5a5; }
  .event-when-tomorrow { color: #fdba74; }
  .event-when-soon { color: #93c5fd; }
  .event-when-unscheduled { color: #fcd34d; }
  .event-warning { color: #fcd34d; }
}
body.dark .event-when-today { color: #fca5a5; }
body.dark .event-when-tomorrow { color: #fdba74; }
body.dark .event-when-soon { color: #93c5fd; }
body.dark .event-when-unscheduled { color: #fcd34d; }
body.dark .event-warning { color: #fcd34d; }

/* Collapsed, the program list should take no room at all. It kept its padding and border, which
   left a stray grey strip sitting under every card. */
.event-session-groups:not(.expanded) { display: none; }

/* A disabled action needs to look disabled. Start Live Flow and Present are correctly disabled on
   an event with nothing in it, but they were still rendering as live blue buttons. */
.event-card-actions .btn[disabled],
.event-card-actions .btn:disabled {
  opacity: .45; cursor: not-allowed; filter: grayscale(.4);
}
.event-card-actions .btn[disabled]:hover { transform: none; }

/* ------------------------------------------------- event card actions
   Two rows on every screen: the service itself (Start Live Flow, Present), then the preparation
   tools as icon buttons (Edit, Team, Checklist, Stage), with the rarer actions behind ⋯ More.
   On a phone the tools are an even row of tiles — icon over a short label — so nothing wraps into
   ragged rows, and More opens as a sheet along the bottom where Delete sits apart from the rest.
   The second media condition is the landscape-phone case. */
.event-card-actions { align-items: center; column-gap: 14px; }
.event-actions-main, .event-actions-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.event-card-actions .event-icon { flex: none; width: 17px; height: 17px; }
.event-actions-main .btn { gap: 7px; }
.event-card-actions .btn.event-tool { gap: 6px; }
.event-more { position: relative; display: inline-flex; }
/* Song and session cards use the same two rows. The song list's own action grid is set aside. */
body.mm-modern .song-actions.event-card-actions { display: flex; justify-content: flex-start; }
.mm-view-list .song-actions.event-card-actions { flex-wrap: nowrap; }
.event-more-menu {
  position: fixed; z-index: 1001; min-width: 210px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card-bg, #fff); color: inherit; border: 1px solid rgba(100,116,139,.25); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15,23,42,.18);
}
.event-more-menu[hidden] { display: none; }
.event-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px;
  border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 550;
  text-align: left; cursor: pointer;
}
.event-menu-item:hover, .event-menu-item:focus-visible { background: rgba(59,130,246,.1); outline: none; }
.event-menu-item.event-menu-danger { color: #dc2626; margin-top: 4px; border-top: 1px solid rgba(100,116,139,.18); border-radius: 0 0 8px 8px; }
.event-menu-item.event-menu-danger:hover { background: rgba(220,38,38,.08); }
.event-more-backdrop { position: fixed; inset: 0; z-index: 1000; background: transparent; }
body.dark .event-more-menu { background: #1e293b; border-color: rgba(148,163,184,.3); }
body.dark .event-menu-item.event-menu-danger { color: #f87171; }

@media (max-width: 768px), ((orientation: landscape) and (max-height: 500px) and (pointer: coarse)) {
  .event-card-head { flex-wrap: wrap; row-gap: 6px; }
  .event-card-head .event-when { flex: 0 0 auto; }
  .event-stats, .event-warnings { gap: 5px; }
  .event-card-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  body.mm-modern .song-actions.event-card-actions { flex-direction: column; align-items: stretch; }
  body.mm-modern .mm-view-list .song-actions.event-card-actions { margin-top: 12px; }
  /* body.mm-modern: .btn-small's 36px would otherwise win. */
  body.mm-modern .event-actions-main .btn { flex: 1 1 0; min-height: 46px; padding: 9px 10px; justify-content: center; }
  .event-actions-tools { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .event-more { display: grid; }
  .event-card-actions .btn.event-tool {
    flex-direction: column; justify-content: center; gap: 3px; min-height: 56px; padding: 7px 4px;
    font-size: 11.5px; line-height: 1.15; white-space: nowrap;
  }
  .event-card-actions .btn.event-tool .event-icon { width: 20px; height: 20px; }
  /* More is a sheet along the bottom, above the tab bar, with a dimmed page behind. */
  .event-more-menu {
    /* The inline top/right place the dropdown on a computer; the sheet ignores them. */
    top: auto !important; left: 0; right: 0 !important; bottom: 0; min-width: 0;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(15,23,42,.25);
  }
  .event-more-menu::before { content: ""; align-self: center; width: 40px; height: 4px; margin: 0 0 8px; border-radius: 4px; background: rgba(100,116,139,.35); }
  .event-menu-item { min-height: 48px; font-size: 15px; }
  .event-more-backdrop { background: rgba(15,23,42,.45); }
  /* Three main buttons in a third of a 360px card each wrapped "Start Live Flow" onto three lines
     and "MD View" onto two. Start Live Flow takes the whole first line; MD View and Present share
     the second, each on one line. */
  .event-actions-main:has(> .btn-stage-view:not([hidden])) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-actions-main:has(> .btn-stage-view:not([hidden])) > .btn:first-child { grid-column: 1 / -1; }
  /* 📜 Prompter (only when the service has a script): its own line under MD View and Present; a
     member has no MD View, so Present and Prompter share the second line. */
  .event-actions-main:has(> .btn-stage-view:not([hidden])) > .btn-prompter { grid-column: 1 / -1; }
  .event-actions-main:has(> .btn-prompter):not(:has(> .btn-stage-view:not([hidden]))) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-actions-main:has(> .btn-prompter):not(:has(> .btn-stage-view:not([hidden]))) > .btn:first-child { grid-column: 1 / -1; }
  .event-actions-main .btn { white-space: nowrap; }
  /* Five equal tiles across: "Checklist" ran edge to edge of its tile. A tile is never narrower
     than its word plus a margin now; the shorter ones give up the difference. */
  .event-actions-tools { grid-auto-columns: minmax(min-content, 1fr); }
  .event-card-actions .btn.event-tool { padding-inline: 6px; font-size: 11px; }
  /* Events toolbar: four buttons in one sideways-scrolling line cut "⚙ Event types" in half and hid
     Media Library off-screen with no sign it was there. Two rows of two instead. */
  #events-section > .search-bar > .search-bar-actions { flex-wrap: wrap; overflow: visible; }
  #events-section > .search-bar > .search-bar-actions > .btn { flex: 1 1 calc(50% - 4px); min-width: 0; justify-content: center; }
}

/* ------------------------------------------------------- standby screen dialog
   One dialog for what the room looks at when nothing is being projected. The options are shown
   together because they are one decision, and only the fields the chosen kind uses are visible. */
.mm-standby-dialog { width: min(760px, calc(100vw - 40px)); max-width: 760px; }
.mm-standby-intro { margin: 0 0 16px; opacity: .8; font-size: 14px; }
.mm-standby-body { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.15fr); gap: 20px; align-items: start; }
.mm-standby-choices { display: grid; gap: 8px; min-width: 0; }
.mm-standby-choice {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .32); border-radius: 10px; cursor: pointer;
}
.mm-standby-choice:hover { border-color: rgba(99, 102, 241, .55); background: rgba(99, 102, 241, .07); }
.mm-standby-choice:has(input:checked) { border-color: rgba(99, 102, 241, .85); background: rgba(99, 102, 241, .13); }
.mm-standby-choice input { margin: 3px 0 0; flex: none; }
.mm-standby-choice span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-standby-choice strong { font-size: 14px; font-weight: 700; }
.mm-standby-choice small { font-size: 12px; opacity: .72; line-height: 1.35; }
.mm-standby-fields { display: grid; gap: 12px; min-width: 0; }
.mm-standby-fields .form-group { margin: 0; }
.mm-standby-fields textarea { resize: vertical; }
.mm-standby-preview-wrap { display: grid; gap: 5px; }
.mm-standby-preview-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .65; }
/* Capped by height as well as shape: a projector is usually driven from a laptop, and on a short
   screen an unbounded 16:9 preview pushed the buttons off the bottom of the dialog. */
.mm-standby-preview { width: 100%; aspect-ratio: 16 / 9; max-height: 24vh; margin-inline: auto; border-radius: 10px; }
.mm-standby-video-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Kept in reach however far the dialog scrolls. */
.mm-standby-actions {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, .22);
  background-color: inherit;
}
/* The Insert dialog grew a live slide preview, so it scrolls often — buttons floating over the
   preview while scrolling read as broken. There they sit at the end of the content instead. */
.mm-insert-dialog .mm-standby-actions { position: static; }
/* The gear sits against the Standby button it belongs to. */
.presenter-safety-setup { padding-left: 9px; padding-right: 9px; }
#projector-transition-settings {
  border-radius: 12px;
  transition: background-color .2s ease, box-shadow .2s ease;
}
#projector-transition-settings.is-settings-target {
  background: rgba(37, 99, 235, .16);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, .72);
}

@media (max-width: 640px) {
  .mm-standby-body { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ "something outranks these controls"
   The event's Look and an item's own style beat the settings on this device. Saying so is the
   difference between a deliberate order of precedence and a control that appears to be broken. */
.mm-look-override {
  margin: 8px 0 12px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid rgba(245, 158, 11, .42); background: rgba(245, 158, 11, .1);
  font-size: 12px; line-height: 1.45;
}
.mm-look-override p { margin: 0 0 6px; opacity: .9; }
.mm-look-override ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
.mm-look-override-src { opacity: .7; font-style: italic; }
.mm-look-override-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

/* The insert dialog reuses the standby dialog's choice cards — one pattern, learned once. */
.mm-insert-dialog { width: min(560px, calc(100vw - 40px)); max-width: 560px; }
.mm-insert-intro { margin: 0 0 16px; opacity: .8; font-size: 14px; }
.mm-insert-dialog .mm-standby-choices { margin-bottom: 16px; }
.mm-insert-dialog textarea { resize: vertical; }
/* Heading row: the ✕ is for phones only (desktop keeps Cancel in reach without it). */
.mm-insert-dialog .mm-insert-head { margin-bottom: 8px; flex-wrap: nowrap; }
.mm-insert-x { display: none; }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  /* On a phone the dialog is ~2000px tall: the heading (with a ✕) stays at the top and Cancel /
     Add stay at the bottom. Both are opaque, so nothing reads through them; a focused field is
     scrolled clear of the footer by scroll-padding. (Desktop keeps the static footer above.) */
  .mm-insert-dialog { scroll-padding-top: 64px; scroll-padding-bottom: 96px; }
  .mm-insert-dialog .mm-insert-head {
    position: sticky; top: -20px; z-index: 3;
    margin: -20px -16px 8px; padding: 12px 12px 10px 16px;
    background-color: inherit;
    border-bottom: 1px solid rgba(148, 163, 184, .22);
  }
  body.mm-modern .mm-insert-dialog .mm-insert-head > h2 { font-size: 20px; min-width: 0; }
  .mm-insert-x {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; padding: 0; margin-left: auto;
    border: 1px solid var(--border, rgba(148, 163, 184, .4)); border-radius: 12px;
    background: var(--card-bg, #fff); color: inherit;
    font-size: 25px; line-height: 1; cursor: pointer;
  }
  .mm-insert-dialog .mm-standby-actions {
    position: sticky; bottom: -18px; z-index: 3;
    margin: 16px -16px -18px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background-color: inherit;
    flex-wrap: nowrap;
  }
  .mm-insert-dialog .mm-standby-actions .btn { min-width: 0; }
  .mm-insert-dialog .mm-standby-actions #insert-confirm { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Once a kind is picked the ten cards fold into one row of chips that scrolls sideways — the
     choice stays visible and switchable, and the form comes up on the first screen. */
  #insert-modal.kinds-collapsed .mm-insert-intro { display: none; }
  #insert-modal.kinds-collapsed .mm-insert-kinds {
    display: flex; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 -16px 14px; padding: 2px 16px 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent);
  }
  #insert-modal.kinds-collapsed .mm-insert-kinds::-webkit-scrollbar { display: none; }
  #insert-modal.kinds-collapsed .mm-insert-kinds .mm-standby-choice {
    flex: none; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px;
  }
  #insert-modal.kinds-collapsed .mm-insert-kinds .mm-standby-choice input { margin: 0; }
  #insert-modal.kinds-collapsed .mm-insert-kinds .mm-standby-choice small { display: none; }
  #insert-modal.kinds-collapsed .mm-insert-kinds .mm-standby-choice strong { white-space: nowrap; }
}
/* A phone on its side with the keyboard up has ~190px left: pinned heading and buttons would take
   it all, so there they scroll with the form. Two ways to know: the keyboard watcher's class (a
   keyboard over the page), or a window that has itself shrunk that short (the Android app). */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse) {
  body.mm-kb-open .mm-insert-dialog .mm-insert-head,
  body.mm-kb-open .mm-insert-dialog .mm-standby-actions { position: static; }
}
@media (orientation:landscape) and (max-height:260px) and (pointer:coarse) {
  .mm-insert-dialog .mm-insert-head,
  .mm-insert-dialog .mm-standby-actions { position: static; }
}
/* A checkbox that reads as a sentence rather than a stray box above a label. */
.mm-toggle-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* The caption / alert dialog. Shares the standby dialog's furniture. */
.mm-overlay-dialog { width: min(720px, calc(100vw - 40px)); max-width: 720px; }
.mm-overlay-intro { margin: 0 0 16px; opacity: .8; font-size: 14px; }
.mm-overlay-dialog textarea { resize: vertical; }
.mm-timer-form-row { display:grid; grid-template-columns:minmax(170px,.8fr) minmax(240px,1.2fr); gap:14px; align-items:end; }
.mm-timer-duration,.mm-timer-position { min-width:0; margin:0; padding:0; border:0; }
.mm-timer-duration legend,.mm-timer-position legend { margin-bottom:6px; font-size:13px; font-weight:700; }
.mm-timer-duration { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mm-timer-duration legend { grid-column:1/-1; }
.mm-timer-duration label { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:7px; }
.mm-timer-duration label span,.mm-optional { font-size:12px; opacity:.68; font-weight:500; }
.mm-timer-position { margin-top:14px; }
.mm-timer-position-grid { display:grid; grid-template-columns:repeat(3,44px); gap:6px; }
.mm-timer-position-grid label { position:relative; cursor:pointer; }
.mm-timer-position-grid input { position:absolute; opacity:0; pointer-events:none; }
.mm-timer-position-grid span { display:grid; place-items:center; width:44px; height:36px; border:1px solid rgba(148,163,184,.38); border-radius:8px; font-size:18px; line-height:1; }
.mm-timer-position-grid label:hover span { border-color:rgba(59,130,246,.7); background:rgba(59,130,246,.08); }
.mm-timer-position-grid input:checked + span { border-color:#3b82f6; background:#2563eb; color:#fff; box-shadow:0 0 0 2px rgba(59,130,246,.2); }
.mm-timer-position-grid input:focus-visible + span { outline:2px solid #60a5fa; outline-offset:2px; }
.mm-insert-timer-preview-wrap { margin-top:14px; }
.mm-insert-timer-preview-wrap .projection-text-layer { padding:4.5%; }
/* position:relative so the foreground layer has something to sit inside; the projector's own
   .projection-foreground is absolute against .projection-root. */
.mm-overlay-preview { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 24vh; border-radius: 10px; overflow: hidden; }
.mm-overlay-preview .projection-foreground { position: absolute; inset: 0; }
@media (max-width:560px) { .mm-timer-form-row { grid-template-columns:1fr; } }

/* ------------------------------------------------------- reusable Media Library */
/* Specific enough to beat the generic 760px modern-dialog rule. The library is a visual browser,
   so it should use the screen like one while still leaving a clear margin around the modal. */
body.mm-modern #media-library-modal .mm-media-library-dialog,
#media-library-modal .mm-media-library-dialog { width:min(1180px,calc(100vw - 48px)); max-width:1180px; height:min(86dvh,860px); max-height:calc(100dvh - 32px); padding:0; overflow:hidden; display:flex; flex-direction:column; }
.mm-media-library-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:20px 22px 14px; border-bottom:1px solid rgba(148,163,184,.22); }
.mm-media-library-head h2 { margin:0 0 4px; }
.mm-media-library-head p { margin:0; font-size:13px; opacity:.7; }
.mm-media-library-close { flex:0 0 auto; width:36px; height:36px; padding:0; border:1px solid rgba(148,163,184,.3); border-radius:10px; background:transparent; color:inherit; font-size:24px; cursor:pointer; }
/* Search first, on its own full row, with the filters and buttons wrapping beneath it. */
.mm-media-library-toolbar { display:flex; flex-wrap:wrap; gap:9px; padding:14px 22px; }
.mm-media-library-toolbar input[type="search"] { flex:1 1 100%; }
.mm-media-library-toolbar select,.mm-media-library-toolbar .btn { flex:0 1 auto; }
.mm-media-library-toolbar input,.mm-media-library-toolbar select { min-height:42px; }
.mm-media-storage-summary { flex:1 1 100%; color:#64748b; font-size:12px; font-weight:650; }
body.dark .mm-media-storage-summary { color:#94a3b8; }
.mm-media-library-status { min-height:20px; padding:0 22px 8px; font-size:12px; opacity:.75; }
.mm-media-library-grid { flex:1 1 auto; min-height:0; padding:0 22px 22px; overflow:auto; scrollbar-gutter:stable; }
.mm-media-group + .mm-media-group { margin-top:24px; padding-top:20px; border-top:1px solid rgba(148,163,184,.24); }
.mm-media-group-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:11px; }
.mm-media-group-heading h3 { margin:0; font-size:15px; }
.mm-media-group-heading p { margin:3px 0 0; font-size:11px; opacity:.65; }
.mm-media-group-heading > span { min-width:28px; padding:3px 8px; border-radius:999px; background:rgba(37,99,235,.14); color:var(--primary); font-size:11px; font-weight:800; text-align:center; }
.mm-media-group-local .mm-media-group-heading > span { background:rgba(245,158,11,.16); color:#b45309; }
body.dark .mm-media-group-local .mm-media-group-heading > span { color:#fbbf24; }
.mm-media-group-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.mm-media-group-empty { grid-column:1/-1; padding:18px; border:1px dashed rgba(148,163,184,.34); border-radius:11px; text-align:center; font-size:12px; opacity:.62; }
.mm-media-card { min-width:0; overflow:hidden; border:1px solid rgba(148,163,184,.3); border-radius:12px; background:rgba(148,163,184,.06); }
.mm-media-thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background:#020617; }
.mm-media-thumb img,.mm-media-thumb video { width:100%; height:100%; display:block; object-fit:cover; }
.mm-media-kind { position:absolute; left:8px; top:8px; padding:3px 7px; border-radius:999px; background:rgba(2,6,23,.78); color:#fff; font-size:10px; font-weight:800; text-transform:uppercase; }
.mm-media-card-body { padding:10px; display:grid; gap:6px; }
.mm-media-card-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:750; }
.mm-media-card-meta { font-size:11px; opacity:.66; }
.mm-media-card-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.mm-media-card-actions .btn { width:100%; min-width:0; justify-content:center; white-space:normal; line-height:1.15; }
.mm-media-empty { padding:36px; text-align:center; opacity:.72; }
body.mm-modern #media-preview-modal .mm-media-preview-dialog,
#media-preview-modal .mm-media-preview-dialog { width:min(1100px,calc(100vw - 48px)); max-width:1100px; height:min(86dvh,820px); padding:0; overflow:hidden; display:flex; flex-direction:column; }
.mm-media-preview-stage { position:relative; flex:1 1 0; min-width:0; min-height:0; margin:18px; overflow:hidden; background:#020617; border-radius:12px; }
/* Removed from grid sizing entirely: large source dimensions must never enlarge the preview track
   or push the useful part of an image below the viewport. The stage is the viewport; media is
   fitted inside it, centred, and never cropped. */
.mm-media-preview-stage img,.mm-media-preview-stage video { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; object-position:center; background:#020617; }
@media (max-width:900px) { .mm-media-group-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; } }
/* The landscape-phone condition keeps an 844px-wide phone out of the desktop-density layout
   this dialog wears between 641 and 900px. */
@media (max-width:640px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  body.mm-modern #media-library-modal .mm-media-library-dialog,
  #media-library-modal .mm-media-library-dialog { width:100%; max-width:none; height:min(92dvh,760px); max-height:92dvh; border-radius:20px 20px 0 0; }
  .mm-media-library-toolbar { padding-block:10px; }
  .mm-media-library-toolbar select,.mm-media-library-toolbar .btn { flex:1 1 calc(50% - 5px); min-width:0; }
  .mm-media-library-grid { padding:0 12px calc(14px + env(safe-area-inset-bottom)); }
  .mm-media-group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mm-media-library-head,.mm-media-library-toolbar { padding-inline:14px; }
  .mm-media-library-head p { display:none; }
  body.mm-modern #media-preview-modal .mm-media-preview-dialog,
  #media-preview-modal .mm-media-preview-dialog { width:100%; max-width:none; height:92dvh; max-height:92dvh; border-radius:20px 20px 0 0; }
  .mm-media-preview-stage { margin:8px; }
}
@media (max-width:430px) { .mm-media-group-grid { grid-template-columns:1fr; } .mm-media-thumb { aspect-ratio:16/9; } }
@media (max-height:700px) and (min-width:641px) {
  body.mm-modern #media-library-modal .mm-media-library-dialog,
  #media-library-modal .mm-media-library-dialog { height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); }
  .mm-media-library-head { padding-block:13px 10px; }
  .mm-media-library-toolbar { padding-block:9px; }
}
/* Shared-vs-device must survive every grouping mode, so it lives on the card, not only in the
   old two-section layout. */
.mm-media-storage-badge { position:absolute; right:8px; top:8px; padding:3px 7px; border-radius:999px; background:rgba(2,6,23,.78); color:#fff; font-size:10px; font-weight:800; text-transform:uppercase; }
/* Pick mode. The z-index override is load-bearing, not cosmetic: the library normally sits at
   11001, below the insert modal (later in DOM order at the same 11001) and the background-rules
   modal (11003) — both of which can now open the library to choose from. The preview must in
   turn clear a picking library. */
#media-library-modal.mm-picking { z-index:11010; }
#media-preview-modal { z-index:11011; }
.mm-picking #media-library-select-toggle { display:none; }
/* Card footer: one primary action + the ⋯ menu (or a single full-width Use in pick mode). */
.mm-media-actions-split { grid-template-columns:minmax(0,1fr) 42px; }
.mm-media-actions-single { grid-template-columns:1fr; }
.mm-media-kebab { font-size:18px; line-height:1; letter-spacing:1px; }
.mm-media-thumb[role="button"] { cursor:pointer; }
.mm-media-thumb[role="button"]:focus-visible { outline:3px solid var(--primary); outline-offset:-3px; }
/* The ⋯ menu itself: fixed so the scrolling grid cannot clip it; above every media layer. */
.mm-media-card-menu { position:fixed; z-index:11015; min-width:180px; padding:6px; display:grid; gap:2px;
  border:1px solid rgba(148,163,184,.35); border-radius:12px; background:#fff; color:#0f172a;
  box-shadow:0 12px 32px rgba(2,6,23,.35); }
body.dark .mm-media-card-menu { background:#0f172a; color:#e2e8f0; }
/* The category picker. Sized for a thumb on a phone as much as a pointer on a laptop, because
   filing media happens on whatever device took the photo. */
/* The category picker rides the app's own .modal, which already centres, contains its scroll,
   dims the page and becomes a bottom sheet on a phone. A bare <dialog> needed margin:auto to
   centre at all under the global reset, and still had none of the rest. */
/* Above the Media Library it is opened from. That stack runs 11001 for the library itself up to
   11015 for a card's ··· menu — which is the very control that opens this — so the base .modal
   z-index of 1000 put the picker behind the thing that launched it. Below .presenter-song-picker
   (11040) and the projector output (12000), neither of which this is ever opened over. */
.mm-category-modal { z-index:11020; }
.mm-category-sheet { width:min(460px,calc(100vw - 32px)); max-width:460px; padding:22px; }
.mm-category-head h2 { margin:0; font-size:18px; }
.mm-category-head p { margin:4px 0 0; font-size:13px; opacity:.7;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-category-chips { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; }
.mm-category-chip {
  min-height:40px; padding:8px 14px; border:1px solid rgba(148,163,184,.45); border-radius:999px;
  background:transparent; color:inherit; font:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
  /* Categories are free text up to 80 characters, and the ones already in the wild were typed
     into a prompt() with nothing to keep them short. An 80-character name is an 872px chip in a
     460px sheet, so it is clamped here and the whole name kept in the title and the accessible
     name instead. */
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mm-category-chip:hover { border-color:var(--primary); }
.mm-category-chip:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
/* Where it is filed now, so the answer is visible without opening anything. */
.mm-category-chip.is-current {
  border-color:var(--primary); color:var(--primary);
  background:color-mix(in srgb, var(--primary) 12%, transparent);
}
.mm-category-none { opacity:.75; }
.mm-category-new { border-style:dashed; }
.mm-category-adder { display:flex; gap:8px; margin-top:12px; }
.mm-category-adder[hidden] { display:none; }
.mm-category-adder input {
  flex:1 1 auto; min-width:0; min-height:44px; padding:0 12px;
  border:1px solid rgba(148,163,184,.5); border-radius:10px;
  background:transparent; color:inherit; font:inherit;
}
.mm-category-actions { display:flex; justify-content:flex-end; margin-top:20px; }

.mm-media-menu-item { display:block; width:100%; padding:9px 12px; border:0; border-radius:8px;
  background:transparent; color:inherit; font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.mm-media-menu-item:hover,.mm-media-menu-item:focus-visible { background:rgba(37,99,235,.14); }
.mm-media-menu-danger { color:#dc2626; }
.mm-media-menu-danger:hover,.mm-media-menu-danger:focus-visible { background:rgba(220,38,38,.14); }
/* Selection mode: the whole card is the checkbox. */
.mm-media-selectable { cursor:pointer; }
.mm-media-selectable:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
.mm-media-selectable .mm-media-kind { left:38px; }
.mm-media-select-box { position:absolute; left:8px; top:8px; z-index:2; width:22px; height:22px;
  display:grid; place-items:center; border:2px solid #fff; border-radius:7px; background:rgba(2,6,23,.55);
  color:transparent; font-size:13px; font-weight:900; }
.mm-media-selected { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary); }
.mm-media-selected .mm-media-select-box { background:var(--primary); color:#fff; }
/* Bulk bar pins to the dialog's bottom edge (the dialog is a flex column). */
.mm-media-bulk-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 22px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid rgba(148,163,184,.25); font-size:13px; font-weight:700; }
/* display:flex outranks the browser's own [hidden] rule — same trap as .btn[hidden] above.
   .mm-media-card-menu is display:grid and was missed here, which is how an emptied, "hidden" kebab
   menu stayed on screen as a bare 180px rounded box floating over the library at whatever
   position:fixed coordinates it was last opened at. */
.mm-media-bulk-bar[hidden],.mm-media-drop-overlay[hidden],.mm-media-card-menu[hidden] { display:none; }
.mm-media-bulk-actions { display:flex; gap:8px; flex-wrap:wrap; }
/* Drop target highlight; pointer-events:none keeps dragleave from flickering. */
.mm-media-library-dialog { position:relative; }
.mm-media-drop-overlay { position:absolute; inset:8px; z-index:5; pointer-events:none;
  display:flex; align-items:center; justify-content:center; border:2px dashed var(--primary);
  border-radius:16px; background:rgba(37,99,235,.12); font-size:17px; font-weight:750; }
/* Details strip in the preview dialog. */
.mm-media-preview-details { padding:0 22px 4px; display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12px; opacity:.75; }
/* Inline picker rows that replaced the old filename <select>s. */
/* min-width:0 is load-bearing, not tidiness. As a flex item this row's automatic minimum size is
   its min-content width, and the thumb, the Browse button and the ✕ are all unshrinkable — so in a
   narrow column (the event program's per-item style panel is ~300px) it refused to shrink and hung
   142px outside the panel, buttons and all. The name inside already carries its own min-width:0;
   the row needs one too or the floor never drops. */
.mm-media-pick { display:flex; align-items:center; gap:10px; min-width:0; min-height:48px; padding:6px; border:1px solid rgba(148,163,184,.3); border-radius:10px; }
.mm-media-pick-thumb { flex:0 0 72px; height:45px; border-radius:7px; overflow:hidden; background:#020617; }
.mm-media-pick-thumb:empty { background:rgba(148,163,184,.14); }
.mm-media-pick-thumb img,.mm-media-pick-thumb video { width:100%; height:100%; object-fit:cover; display:block; }
.mm-media-pick-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.mm-media-pick-empty .mm-media-pick-name { opacity:.6; }
.mm-media-pick .btn { flex:0 0 auto; }
/* Per-item slide preview from the program editor. Must clear the event modal and the control
   view (11000-11001) but stay under a picking media library (11010). */
#program-item-preview-modal { z-index:11005; }
body.mm-modern #program-item-preview-modal .mm-program-preview-dialog,
#program-item-preview-modal .mm-program-preview-dialog { width:min(920px,calc(100vw - 48px)); max-width:920px; max-height:min(88dvh,860px); padding:0; overflow:hidden; display:flex; flex-direction:column; }
.mm-program-preview-body { flex:1 1 auto; min-height:0; overflow:auto; padding:0 22px 22px; }
.mm-program-preview-body .preview-slide { width:100%; }
@media (max-width:640px) {
  body.mm-modern #program-item-preview-modal .mm-program-preview-dialog,
  #program-item-preview-modal .mm-program-preview-dialog { width:100%; max-width:none; max-height:92dvh; border-radius:20px 20px 0 0; }
  .mm-program-preview-body { padding:0 12px calc(14px + env(safe-area-inset-bottom)); }
}
/* Live slide preview inside the Insert dialog for sections and text pages. */
#insert-slide-preview { max-height:340px; overflow:auto; border-radius:12px; }
#insert-slide-preview:empty { display:none; }
#insert-slide-preview .preview-slide { width:100%; }
/* Font colour row in the per-item style panel. */
.program-style-color { display:flex; align-items:center; gap:8px; }
.program-style-color input[type="color"] { width:52px; height:34px; padding:2px; border:1px solid rgba(148,163,184,.3); border-radius:8px; background:transparent; cursor:pointer; }

/* A .btn declares display:flex, which outranks the browser's own [hidden] { display:none } — so
   hiding a button by setting .hidden had no effect at all, and "Take it off screen" stayed on a
   dialog for something that was not on screen. */
.btn[hidden] { display: none !important; }

/* The overlay preview is redrawn on every keystroke, which restarted the caption's and the alert's
   slide-in animation each time — so the preview jittered and flashed while a message was typed.
   The animation belongs on the wall, where a caption appears once. */
.mm-overlay-preview .projection-lower-third,
.mm-overlay-preview .projection-alert { animation: none; }

/* ------------------------------------------------- adding to the program
   One obvious way in — Insert… — with a shortcut for each type beside it for anyone who already
   knows what they want. The pickers that need a field of their own stay below. */
.program-insert-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.program-insert-primary { font-weight: 700; }
.program-insert-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; }
.program-chip {
  padding: 5px 10px; border: 1px solid rgba(148, 163, 184, .42); border-radius: 999px;
  background: transparent; color: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background .15s ease, border-color .15s ease;
}
.program-chip:hover { border-color: rgba(99, 102, 241, .65); background: rgba(99, 102, 241, .12); }
.program-fullscreen-btn { margin-left: auto; }
/* On phones the eight chips would wrap into four rows and eat a screenful — one thumb-swipeable
   row instead, the same pattern the song editor's button bar uses. */
@media (max-width: 600px), ((hover: none) and (pointer: coarse)) {
  .program-insert-shortcuts {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; max-width: 100%; padding-bottom: 2px;
  }
  .program-insert-shortcuts::-webkit-scrollbar { display: none; }
  .program-insert-shortcuts > * { flex: 0 0 auto; }
  .program-chip { min-height: 38px; display: inline-flex; align-items: center; }
}

/* Building an order of service wants the whole window; a long program in a fixed dialog is mostly
   scrolling. Follows the song modal's fullscreen mode rather than inventing a second convention. */
body.mm-modern #event-modal.fullscreen .modal-content,
#event-modal.fullscreen .modal-content {
  width: calc(100vw - 24px);
  max-width: calc(100vw - 24px);
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
}
/* A phone's sheet is already the whole screen; fullscreen must not turn it back into a floating
   24px-inset box fighting the ≤768 rules. */
@media (max-width: 768px) {
  body.mm-modern #event-modal.fullscreen .modal-content,
  #event-modal.fullscreen .modal-content {
    width: 100%; max-width: 100%;
    height: auto; max-height: 100dvh;
    border-radius: 22px 22px 0 0;
  }
}
#event-modal.fullscreen #event-program-editor { max-height: none; }

@media (max-width: 640px) {
  .program-fullscreen-btn { margin-left: 0; }
}

/* A modal heading with an action beside the title. The h2 is no longer `.modal-content > h2`, so
   the size and spacing that rule gave it are restated here rather than silently lost. */
.mm-modal-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 20px; flex-wrap: wrap;
}
.mm-modal-heading h2 { margin: 0; }
body.mm-modern .mm-modal-heading > h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.mm-modal-heading .program-fullscreen-btn { margin-left: auto; flex: none; }

/* Picking a passage: book, then chapter and verses side by side. */
.mm-verse-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; margin-top: 10px; }
.mm-verse-fields label { display: block; margin-bottom: 3px; }
.mm-verse-resolved { margin-top: 8px; font-size: 12px; font-weight: 600; opacity: .85; min-height: 16px; }
.mm-verse-resolved.is-bad { color: #f87171; opacity: 1; }
.mm-bible-book-list {
  display:grid; gap:3px; max-height:188px; margin-top:6px; padding:5px;
  overflow-y:auto; border:1px solid rgba(148,163,184,.38); border-radius:11px;
  background:var(--card-bg,#fff); box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.mm-bible-book-option {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; min-height:38px; padding:8px 11px; border:1px solid transparent;
  border-radius:8px; background:transparent; color:inherit; font:inherit;
  font-size:14px; text-align:left; cursor:pointer;
}
.mm-bible-book-option:hover { background:rgba(59,130,246,.08); }
.mm-bible-book-option:focus-visible { outline:3px solid rgba(59,130,246,.28); outline-offset:1px; }
.mm-bible-book-option.is-selected {
  border-color:rgba(79,70,229,.55); background:rgba(79,70,229,.12);
  color:var(--primary,#4f46e5); font-weight:750;
}
.mm-bible-book-check {
  display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px;
  border-radius:999px; background:var(--primary,#4f46e5); color:#fff; font-size:12px;
}
.mm-bible-book-empty { padding:11px; color:var(--muted); font-size:13px; text-align:center; }
body.dark .mm-bible-book-list { background:#111827; box-shadow:0 10px 28px rgba(0,0,0,.24); }

/* The Insert dialog's result lists. They reuse .program-song-result so a song reads the same here
   as it did in the picker this replaced — but they sit in the page rather than dropping over it.

   `display: block` is the point: the base class is a dropdown that stays `display: none` until it
   is given `.open`. These lists are always on screen and never get that class, so without this they
   were filled correctly and drawn nowhere. */
.program-song-results.insert-results {
  display: block;
  position: static; margin-top: 6px; max-height: 210px; overflow-y: auto;
  border: 1px solid rgba(148, 163, 184, .3); border-radius: 9px;
  box-shadow: none;
}
.mm-insert-upload { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mm-text-format-toolbar {
  display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin:5px 0 7px; padding:6px;
  border:1px solid var(--border); border-radius:10px; background:rgba(100,116,139,.06);
}
.mm-text-format-toolbar button {
  min-width:36px; min-height:34px; padding:5px 9px; border:1px solid transparent; border-radius:7px;
  background:var(--card-bg,#fff); color:inherit; font:inherit; font-size:13px; cursor:pointer;
}
.mm-text-format-toolbar button:hover { border-color:rgba(59,130,246,.4); background:rgba(59,130,246,.1); }
.mm-text-format-toolbar button:focus-visible { outline:3px solid rgba(59,130,246,.25); }
.mm-text-format-separator { width:1px; height:25px; margin:0 2px; background:var(--border); }
.mm-highlight-sample { padding:1px 3px; border-radius:3px; background:#fde047; color:#111827; }
.mm-rich-text-editor {
  min-height:132px; max-height:280px; padding:11px 12px; overflow-y:auto;
  border:1.5px solid var(--border); border-radius:10px; background:var(--card-bg,#fff);
  color:var(--text); font:inherit; font-size:14px; line-height:1.55; white-space:pre-wrap;
}
/* Full-screen writing (4.0.0): the script's toolbar and editor moved into a layer over everything,
   with the teleprompter preview beside them on a wide screen. */
.mm-script-full { position:fixed; inset:0; z-index:12000; display:flex; flex-direction:column; box-sizing:border-box;
  padding:12px max(16px, env(safe-area-inset-right)) calc(12px + var(--mm-kb, 0px)) max(16px, env(safe-area-inset-left));
  background:var(--card-bg,#fff); color:var(--text,#0f172a); }
body.dark .mm-script-full { background:#0b1220; color:#f8fafc; }
body.mm-script-full-open { overflow:hidden; }
.mm-script-full-head { display:flex; align-items:center; gap:12px; padding:2px 0 10px; border-bottom:1px solid var(--border,#e2e8f0); }
.mm-script-full-head strong { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; }
.mm-script-full-count { flex:0 0 auto; font-size:13px; color:var(--muted,#64748b); white-space:nowrap; }
.mm-script-full-head .btn { min-height:40px; padding:0 18px; }
.mm-script-full-body { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding-top:10px; }
.mm-script-full .form-group { display:flex; flex-direction:column; min-height:0; margin:0; }
.mm-script-full .form-group > label, .mm-script-full .form-group > small { display:none; }
.mm-script-full .mm-text-format-toolbar { flex:0 0 auto; margin-top:0; }
.mm-script-full .mm-rich-text-editor { flex:1 1 auto; min-height:0; max-height:none; padding:16px 18px; font-size:18px; line-height:1.6; }
.mm-script-full #insert-prompter-preview { display:none; }
@media (min-width: 900px) {
  .mm-script-full-body.has-preview { grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
  .mm-script-full #insert-prompter-preview { display:flex; flex-direction:column; min-height:0; margin:0; }
  .mm-script-full #insert-prompter-preview .mm-pp-screen { flex:1 1 auto; aspect-ratio:auto; max-height:none; }
}
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .mm-script-full { padding-top:max(10px, env(safe-area-inset-top)); }
  .mm-script-full-count { display:none; }
  .mm-script-full .mm-rich-text-editor { padding:12px; font-size:16px; }
}
.mm-rich-text-editor:focus { border-color:var(--primary); outline:0; box-shadow:0 0 0 4px rgba(37,99,235,.12); }
.mm-rich-text-editor:empty::before { content:attr(data-placeholder); color:var(--muted); pointer-events:none; }
.mm-rich-text-editor p,.mm-rich-text-editor div { margin:0; }
.mm-rich-text-editor ul,.mm-rich-text-editor ol { margin:0; padding-left:1.65em; }
.mm-rich-text-editor mark { padding:1px 3px; border-radius:3px; background:#fde047; color:#111827; }
.mm-rich-text-editor .mm-text-page-break { margin:10px 0 !important; display:flex; align-items:center; gap:9px; color:#2563eb; font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; user-select:none; }
.mm-rich-text-editor .mm-text-page-break::before,.mm-rich-text-editor .mm-text-page-break::after { content:""; flex:1; border-top:2px dashed currentColor; opacity:.55; }
body.dark .mm-rich-text-editor .mm-text-page-break { color:#60a5fa; }
body.dark .mm-rich-text-editor { background:#111827; }

/* Teleprompter scripts and imported slides in the Insert dialog (3.9.0). The rich editor serves
   text pages and scripts; the dialog's data-kind says which, and a few controls belong to one. */
#insert-modal:not([data-kind="prompter"]) .mm-prompter-only { display:none !important; }
#insert-modal[data-kind="prompter"] .mm-text-only { display:none !important; }
.mm-rich-text-editor .mm-prompter-cue-pill { margin:6px 0 !important; user-select:none; }
.mm-rich-text-editor .mm-prompter-cue-pill span,.mm-pp-cue {
  display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px;
  background:#dcfce7; color:#166534; font-size:12px; font-weight:800; white-space:nowrap;
}
body.dark .mm-rich-text-editor .mm-prompter-cue-pill span { background:#14532d; color:#bbf7d0; }
.mm-prompter-cue-picker { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0; padding:10px;
  border:1px solid var(--border,#d1d5db); border-radius:12px; background:var(--surface-2,#f8fafc); }
.mm-prompter-cue-picker label { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; }
.mm-prompter-cue-picker select { max-width:min(320px,60vw); }
.mm-prompter-cue-picker input[type=number] { width:4.5em; }
.mm-prompter-cue-picker[hidden] { display:none !important; }
.mm-prompter-cue-count { font-size:13px; color:var(--muted); }
.mm-prompter-design { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px 14px; align-items:end; }
.mm-prompter-design label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; color:var(--muted); }
.mm-prompter-design input[type=color] { width:100%; height:34px; padding:2px; border-radius:8px; }
.mm-prompter-check { flex-direction:row !important; align-items:center; gap:7px !important; font-size:13px !important; color:var(--text) !important; }
.mm-prompter-check input[type=checkbox] { width:18px !important; height:18px !important; min-width:0; flex:0 0 18px; margin:0; padding:0; }
.mm-prompter-preview { margin-top:12px; }
.mm-pp-screen { position:relative; overflow:hidden; aspect-ratio:16/9; max-height:260px; border-radius:12px;
  background:var(--pp-bg); color:var(--pp-fg); box-sizing:border-box;
  font-size:calc(15px * var(--pp-size)); line-height:var(--pp-line); font-weight:600;
  /* min-height:0 stops a long script stretching the 16:9 box (the words spilled out under it);
     the words scroll inside it instead, past the fixed reading line. */
  display:flex; flex-direction:column; min-height:0; }
.mm-pp-text { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:14px var(--pp-margin); }
.mm-pp-text::after { content:""; display:block; height:40%; }
.mm-pp-screen.is-mirrored .mm-pp-text { transform:scaleX(-1); }
.mm-pp-screen mark { background:none; color:var(--pp-hl); font-weight:800; }
.mm-pp-marker { position:absolute; left:0; right:0; top:33%; border-top:2px solid var(--pp-hl); opacity:.35; pointer-events:none; }
.mm-pp-gap { height:.6em; }
.mm-pp-break { margin:.5em 0; border-top:1px dashed currentColor; opacity:.35; }
.mm-pp-cue { margin:.2em 0; font-size:12px; }
.mm-pp-empty { opacity:.55; font-size:14px; }
.mm-pp-heading { margin:.25em 0 .1em; font-size:1.3em; font-weight:850; line-height:1.2; color:var(--pp-hl); }
.mm-pp-heading mark { background:var(--pp-hl); color:var(--pp-bg); padding:0 .12em; border-radius:.12em; }
.mm-pp-note { margin:.15em 0; padding-left:.6em; border-left:3px solid currentColor; font-size:.72em; font-style:italic; font-weight:500; opacity:.6; }
.mm-pp-li { display:flex; gap:.45em; }
.mm-pp-li-mark { flex:0 0 auto; min-width:1.1em; color:var(--pp-hl); }
.mm-pp-pause { color:var(--pp-hl); font-weight:800; }
/* A script's heading and note lines in the editor. */
.mm-rich-text-editor > [data-line="heading"] { font-size:1.25em; font-weight:800; }
.mm-rich-text-editor > [data-line="note"] { padding-left:8px; border-left:3px solid #94a3b8; color:var(--muted,#64748b); font-style:italic; }
.mm-rich-text-editor > [data-line="note"]::before { content:"Note: "; font-style:normal; font-weight:700; font-size:.85em; }
.mm-slides-progress { height:6px; margin:8px 0; border-radius:999px; background:var(--border,#e5e7eb); overflow:hidden; }
.mm-slides-progress span { display:block; height:100%; width:0; background:#2563eb; transition:width .2s ease; }
.mm-slides-progress[hidden] { display:none; }
.mm-slides-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-top:10px; max-height:240px; overflow:auto; }
.mm-slides-thumbs figure { margin:0; position:relative; }
.mm-slides-thumbs img { width:100%; aspect-ratio:16/9; object-fit:contain; background:#000; border-radius:6px; display:block; }
.mm-slides-thumbs figcaption { position:absolute; left:4px; bottom:4px; padding:0 5px; border-radius:4px; background:rgba(0,0,0,.65); color:#fff; font-size:11px; font-weight:700; }
#insert-slides-notes-wrap[hidden] { display:none !important; }
.mm-pp-full .mm-pp-screen { aspect-ratio:auto; max-height:none; min-height:240px; }
.mm-pp-full .mm-pp-text { overflow:visible; }
.mm-pp-full .mm-pp-text::after { display:none; }
.mm-insert-upload > span { font-size: 12px; opacity: .65; }

/* The words themselves, before the passage is committed. */
.mm-verse-preview {
  margin-top: 8px; padding: 10px 12px; max-height: 200px; overflow-y: auto;
  border: 1px solid rgba(148, 163, 184, .3); border-radius: 9px;
  background: rgba(100, 116, 139, .07); font-size: 13px; line-height: 1.5;
}
.mm-verse-preview p { margin: 0 0 8px; }
.mm-verse-preview p:last-child { margin-bottom: 0; }
.mm-verse-preview sup { margin-right: .3em; font-weight: 800; opacity: .7; }
.mm-verse-preview-empty { opacity: .7; font-style: italic; }

/* Six stacked cards pushed the field you actually came to fill in below the fold, so the chooser
   is a compact grid: the choice stays one glance, and the search and its results are on screen
   without scrolling for them. */
.mm-insert-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 6px;
}
.mm-insert-kinds .mm-standby-choice { padding: 8px 10px; gap: 7px; }
.mm-insert-kinds .mm-standby-choice strong { font-size: 13px; }
.mm-insert-kinds .mm-standby-choice small { font-size: 11px; line-height: 1.3; }
.mm-insert-dialog .program-song-results.insert-results { max-height: 168px; }
/* Song rows carry two lines of lyrics, so the song list gets the room the session list does not need. */
.mm-insert-dialog #insert-song-results { max-height: 260px; }
.insert-results .program-song-result-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insert-results .program-song-result-line b { font-style: normal; font-weight: 700; }

/* A chosen result has to look chosen. `.active` is the keyboard-highlight state and uses the same
   tint as :hover, so in a list you click rather than arrow through, "selected" was indistinguishable
   from "the pointer is here". This is a different thing and says so. */
.program-song-result.is-chosen {
  background: rgba(99, 102, 241, .16);
  box-shadow: inset 3px 0 0 var(--primary, #4f46e5);
  font-weight: 700;
}
.program-song-result.is-chosen::after {
  content: "✓";
  float: right; margin-left: 8px;
  color: var(--primary, #4f46e5); font-weight: 900;
}
.program-song-result.is-chosen:hover { background: rgba(99, 102, 241, .22); }

/* What you picked, shown as itself. A marked row says where you clicked; this says what will be
   added — which matters most for a session, where one click brings in several songs. */
.mm-insert-chosen {
  margin-top: 8px; padding: 10px 12px;
  border: 1px solid rgba(99, 102, 241, .45); border-radius: 9px;
  background: rgba(99, 102, 241, .09);
}
.mm-insert-chosen-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.mm-insert-chosen-title { margin-top: 2px; font-size: 15px; font-weight: 750; line-height: 1.25; }
.mm-insert-chosen-meta { margin-top: 2px; font-size: 12px; opacity: .75; }
.mm-insert-chosen-list { margin: 6px 0 0; padding-left: 20px; font-size: 12px; line-height: 1.6; opacity: .85; }

/* ------------------------------------------------------------- video link fields */
.mm-insert-link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mm-insert-link-row input[type="url"] { flex: 1 1 240px; min-width: 0; }
.mm-insert-chosen-thumb {
  display: block; width: 100%; max-width: 260px; margin-top: 6px;
  border-radius: 7px; aspect-ratio: 16 / 9; object-fit: cover; background: #000;
}
/* Stated rather than discovered on the day, so it reads as part of the item and not as an error. */
.mm-insert-warn {
  display: block; margin-top: 8px; padding: 7px 10px;
  border-radius: 8px; background: rgba(217, 119, 6, .12);
  color: #b45309; font-size: 12px; line-height: 1.45;
}
.mm-videolink-options { margin-top: 10px; display: grid; gap: 8px; }
.mm-videolink-times { display: flex; gap: 10px; flex-wrap: wrap; }
.mm-videolink-times label { flex: 1 1 130px; min-width: 0; font-size: 12px; font-weight: 650; }
.mm-videolink-times label span { font-weight: 500; opacity: .6; }
.mm-videolink-times input { width: 100%; margin-top: 3px; }
/* Drive's player takes no instruction, so its switches go dead with the reason on them. */
.mm-videolink-options label.is-disabled { opacity: .5; cursor: not-allowed; }
.btn-present {
  background:#050505 !important;
  border-color:#050505 !important;
  color:#fff !important;
}
.btn-present:hover:not(:disabled) {
  background:#1f2937 !important;
  border-color:#1f2937 !important;
}
body.dark .btn-present {
  background:#fff !important;
  border-color:#fff !important;
  color:#050505 !important;
}
body.dark .btn-present:hover:not(:disabled) {
  background:#e2e8f0 !important;
  border-color:#e2e8f0 !important;
}
.song-present-shortcut,
body.dark .song-present-shortcut {
  background:#050505 !important;
  border-color:#050505 !important;
  color:#fff !important;
}
.song-present-shortcut:hover:not(:disabled),
body.dark .song-present-shortcut:hover:not(:disabled) {
  background:#1f2937 !important;
  border-color:#1f2937 !important;
  color:#fff !important;
}

/* ── Roles & access ──────────────────────────────────────────────────────────────
   The matrix is a table because it genuinely is one: permissions down, roles across,
   and the answer read at the intersection. The per-account pane is a list rather than
   a table, because there each row is a decision rather than a lookup. */
.access-intro {
  color:var(--muted);
  margin:0 0 16px;
  max-width:70ch;
  line-height:1.55;
}
.access-subhead {
  margin:32px 0 8px;
  font-size:18px;
}
.access-table-wrap {
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card-bg);
  margin-bottom:8px;
}
.access-table {
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  min-width:520px;
}
.access-table th,
.access-table td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
.access-table thead th { font-weight:700; white-space:nowrap; }
.access-table td { text-align:center; width:1%; white-space:nowrap; }
.access-table tbody tr:last-child th,
.access-table tbody tr:last-child td { border-bottom:0; }
.access-table .access-group th {
  background:var(--mm-slate-100,#f1f5f9);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  padding:8px 14px;
}
body.dark .access-table .access-group th { background:var(--mm-slate-900,#0f172a); }

.access-cap { display:block; font-weight:600; }
.access-cap-note { display:block; color:var(--muted); font-size:12.5px; line-height:1.45; margin-top:2px; max-width:52ch; font-weight:400; }
.access-yes { color:var(--mm-green-600,#16a34a); font-weight:700; }
.access-no { color:var(--muted); }

.access-group-head {
  margin:20px 0 6px;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}
.access-row {
  display:flex;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card-bg);
  margin-bottom:8px;
}
.access-row-text { flex:1 1 260px; min-width:0; }
.access-row.is-locked { opacity:.72; }
.access-choices { display:flex; gap:6px; flex-wrap:wrap; }
.access-effective { flex:0 0 auto; align-self:center; font-size:16px; }
.access-choice {
  font:inherit;
  font-size:12.5px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  white-space:nowrap;
}
.access-choice:hover:not(:disabled) { border-color:var(--primary); }
.access-choice.is-on {
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  font-weight:600;
}
.access-choice:disabled { cursor:not-allowed; opacity:.6; }

@media (max-width:768px) {
  .access-row { gap:10px; }
  .access-effective { align-self:flex-start; }
}

/* Member picker on the access page. A list of buttons rather than a select, because the
   useful thing to see before choosing is who already has exceptions. */
.access-count { color:var(--muted); font-size:13px; margin:0 0 8px; }
.access-actions { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 8px; }
#access-member-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:8px;
  margin-bottom:8px;
}
.access-member {
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:flex-start;
  text-align:left;
  font:inherit;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card-bg);
  color:inherit;
  cursor:pointer;
}
.access-member:hover { border-color:var(--primary); }
.access-member.is-selected {
  border-color:var(--primary);
  box-shadow:inset 0 0 0 1px var(--primary);
}
.access-member-name { font-weight:600; }
.access-member-meta { color:var(--muted); font-size:12.5px; }
.access-badges { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.access-badge {
  font-size:11px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  white-space:nowrap;
}
.access-badge.is-custom {
  border-color:var(--mm-blue-500,#3b82f6);
  color:var(--mm-blue-700,#1d4ed8);
  background:var(--mm-blue-50,#eff6ff);
}
body.dark .access-badge.is-custom { background:transparent; color:var(--mm-blue-100,#dbeafe); }
.access-badge.is-warn { border-color:#d97706; color:#b45309; }
body.dark .access-badge.is-warn { color:#fbbf24; }

/* AI services pane. One card per service in the order they are tried, which is the order
   that explains a result: the second card only ever answers when the first one could not. */
.access-ai {
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card-bg);
  padding:14px 15px;
  margin-bottom:10px;
}
.access-ai-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.access-ai-field {
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  max-width:420px;
}
/* Its own input rather than .search-input: that one carries a magnifying glass, and this
   field is not a search — it is the exact string the provider is asked for, which is also
   why it is monospaced and never autocapitalized. */
.access-ai-field .access-ai-model {
  width:100%;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:9px;
  background:transparent;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;
  font-weight:500;
  color:inherit;
}
.access-ai-field .access-ai-model:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
.access-ai-field .access-ai-model:disabled { opacity:.7; }
.access-ai .access-actions { margin:12px 0 0; }
.access-ai-note { margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.access-ai-note.is-ok { color:#15803d; }
body.dark .access-ai-note.is-ok { color:#4ade80; }
.access-ai-note.is-error { color:#b91c1c; }
body.dark .access-ai-note.is-error { color:#fca5a5; }

/* Update banner. Not a toast: mm-toast self-dismisses after 3.6s and its region is
   pointer-events:none, so nothing inside it can be clicked. This one waits for an answer. */
.mm-update-banner {
  position:fixed;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);
  z-index:5200;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  width:min(520px,calc(100vw - 24px));
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(15,23,42,.97);
  color:#fff;
  box-shadow:var(--mm-shadow-lg);
  opacity:0;
  transition:.2s ease;
}
.mm-update-banner.show { opacity:1; transform:translate(-50%,0); }
/* It waits for an answer, so it must never sit on what is being worked on: not over an open
   dialog (it comes back when the dialog closes), and not on the toasts (they move up). */
body:has(.modal.active) .mm-update-banner { display:none; }
body:has(.mm-update-banner.show) .mm-toast-region { bottom:calc(118px + env(safe-area-inset-bottom)); }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  /* On a phone the bottom belongs to the tab bar and the toasts: the banner goes to the top. */
  .mm-update-banner { top:calc(10px + env(safe-area-inset-top)); bottom:auto; transform:translate(-50%,-14px); }
  body:has(.mm-update-banner.show) .mm-toast-region { bottom:calc(78px + env(safe-area-inset-bottom)); }
}
.mm-update-banner-copy { flex:1 1 220px; min-width:0; }
.mm-update-banner-copy strong { display:block; font-size:13px; }
.mm-update-banner-copy span { display:block; margin-top:2px; color:#cbd5e1; font-size:12px; }
.mm-update-banner-actions { display:flex; gap:8px; flex:0 0 auto; }
.mm-update-banner-actions button {
  min-height:38px;
  padding:8px 14px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:#e2e8f0;
}
.mm-update-banner-actions .mm-update-reload { background:var(--primary,#2563eb); border-color:transparent; color:#fff; }

@media (max-width: 768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  /* At the top on a phone (see above), clear of the tab bar, the floating buttons and the toasts. */
  .mm-update-banner-actions { flex:1 1 100%; }
  .mm-update-banner-actions button { flex:1; }
}

/* ------------------------------------------------------------ event checklists
   The count that rides in the stat strip, and the dialog behind it. The chip is a button so that
   the surfaces with no room for an action row — the two dashboards and the member event list —
   still get a way into the list rather than only a number. It inherits .event-stat so it sits in
   the same row as the song and section counts without a second set of measurements. */
.event-stat-checklist {
  border: 0; cursor: pointer; font: inherit; font-size: 11px; line-height: inherit;
  color: inherit; background: rgba(100, 116, 139, .12);
}
.event-stat-checklist:hover { background: rgba(100, 116, 139, .22); }
.event-stat-checklist[data-state="done"] { background: rgba(16, 185, 129, .18); color: #065f46; }
.event-stat-checklist[data-state="partial"] { background: rgba(245, 158, 11, .18); color: #92400e; }
/* Something on the list was wanted before now and is still open. Red rather than amber, because
   this is the one state that wants somebody to do something today. */
.event-stat-checklist[data-state="late"] { background: rgba(220, 38, 38, .16); color: #b91c1c; font-weight: 650; }

/* The checklist dialog, after the checklist apps people already use: a heading with the event
   under it and one ⋯ for the list-wide actions; a progress ring; All / Mine / To do; sections that
   fold away, each ending in a line to type the next job into; round ticks; who and when as small
   chips; one ⋯ per row for Edit, Move and Remove. */
.mm-checklist-heading { flex-wrap: nowrap; align-items: flex-start; }
.mm-checklist-titles { flex: 1 1 auto; min-width: 0; }
body.mm-modern .mm-checklist-heading h2 { margin: 0; }
.mm-checklist-subtitle { margin: 2px 0 0; font-size: 13px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-checklist-menu-wrap { position: relative; flex: none; }
.mm-checklist-icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(100, 116, 139, .25);
  background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.mm-checklist-icon-btn:hover, .mm-checklist-icon-btn[aria-expanded="true"] { background: rgba(100, 116, 139, .12); }
.mm-checklist-menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 200px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; border-radius: 12px;
  background: var(--card-bg, #fff); color: inherit; border: 1px solid rgba(100, 116, 139, .25);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
}
.mm-checklist-menu[hidden] { display: none; }
.mm-checklist-menu button {
  display: block; width: 100%; text-align: left; border: 0; background: none; color: inherit;
  font: inherit; font-size: 14px; padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.mm-checklist-menu button:hover:not(:disabled), .mm-checklist-menu button:focus-visible { background: rgba(59, 130, 246, .1); outline: none; }
.mm-checklist-menu button:disabled { opacity: .4; cursor: default; }
.mm-checklist-menu button[hidden] { display: none; }
.mm-checklist-menu button.is-danger { color: #dc2626; }
body.dark .mm-checklist-menu { background: #1e293b; border-color: rgba(148, 163, 184, .3); }

.mm-checklist-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mm-space-3, 12px);
  flex-wrap: wrap; margin: 4px 0 12px;
}
.mm-checklist-progress { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.mm-checklist-progress-text { display: flex; flex-direction: column; line-height: 1.25; }
.mm-checklist-progress-text small { font-size: 12px; opacity: .65; }
.mm-checklist-ring { flex: none; transform: rotate(-90deg); }
.mm-checklist-ring circle { fill: none; stroke-width: 4; }
.mm-checklist-ring-track { stroke: rgba(100, 116, 139, .2); }
.mm-checklist-ring-fill { stroke: var(--primary, #2563eb); stroke-linecap: round; transition: stroke-dashoffset .35s ease; }
.mm-checklist-ring.is-complete .mm-checklist-ring-fill { stroke: #16a34a; }
.mm-checklist-ring text { transform: rotate(90deg); transform-origin: 18px 18px; font-size: 9px; font-weight: 700; fill: currentColor; }
.mm-checklist-none { opacity: .7; }
.mm-checklist-bar {
  display: inline-block; width: 120px; height: 6px; border-radius: 999px;
  background: rgba(100, 116, 139, .2); overflow: hidden;
}
.mm-checklist-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.mm-checklist-sync { font-size: 12px; opacity: .7; }
.mm-checklist-sync[data-state="offline"] { color: #92400e; opacity: 1; }
.mm-checklist-sync[data-state="error"] { color: #b91c1c; opacity: 1; }

.mm-checklist-filters { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 14px; border-radius: 10px; background: rgba(100, 116, 139, .12); }
.mm-checklist-filters[hidden] { display: none; }
.mm-checklist-filters button {
  border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 8px; cursor: pointer; opacity: .75;
}
.mm-checklist-filters button[aria-pressed="true"] { background: var(--card-bg, #fff); opacity: 1; box-shadow: 0 1px 3px rgba(15, 23, 42, .14); }
body.dark .mm-checklist-filters button[aria-pressed="true"] { background: #334155; }

.mm-checklist-start {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; margin: 0 0 16px;
  border-radius: 12px; border: 1px dashed rgba(100, 116, 139, .35); background: rgba(100, 116, 139, .05);
}
.mm-checklist-start span { font-size: 13px; opacity: .75; }

.mm-checklist-group { margin-bottom: 14px; }
#event-checklist-modal .mm-checklist-group h3 { margin: 0 0 6px; font-size: 12px; }
#event-checklist-modal .mm-checklist-group-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; border: 0; background: none;
  color: inherit; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; text-align: left;
}
.mm-checklist-group-title { opacity: .75; }
.mm-checklist-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -3px 2px 0; opacity: .55; transition: transform .15s ease; }
.mm-checklist-group.is-collapsed .mm-checklist-chevron { transform: rotate(-45deg); margin-top: 0; }
.mm-checklist-group.is-collapsed .mm-checklist-group-body { display: none; }
.mm-checklist-group.is-complete .list-group-count { background: rgba(22, 163, 74, .16); color: #15803d; }
.mm-checklist-empty { margin: 0 0 6px; opacity: .6; font-size: 13px; }

.mm-checklist-row {
  position: relative; display: flex; align-items: flex-start; gap: 6px;
  padding: 2px 4px 2px 2px; border-radius: 10px; margin-bottom: 2px;
}
.mm-checklist-row:hover { background: rgba(100, 116, 139, .06); }
.mm-checklist-tick { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 auto; min-width: 0; margin: 0; padding: 9px 6px; cursor: pointer; }
/* A round tick, filled when done — the shape every list app has taught people to tap. */
.mm-checklist-tick input {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 50%;
  border: 2px solid rgba(100, 116, 139, .55); background: transparent; cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.mm-checklist-tick input::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg) scale(0); transition: transform .15s ease; }
.mm-checklist-tick input:checked { background: #16a34a; border-color: #16a34a; }
.mm-checklist-tick input:checked::after { transform: rotate(45deg) scale(1); }
.mm-checklist-tick input:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }
.mm-checklist-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mm-checklist-label { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.mm-checklist-row.is-done .mm-checklist-label { text-decoration: line-through; opacity: .55; }
.mm-checklist-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.mm-checklist-who, .mm-checklist-due, .mm-checklist-by {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 999px; background: rgba(100, 116, 139, .12);
}
.mm-checklist-due, .mm-checklist-by { padding-left: 8px; }
.mm-checklist-avatar {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary, #2563eb); color: #fff; font-size: 9px; font-weight: 700;
}
.mm-checklist-avatar.is-team { background: #7c3aed; font-size: 10px; }
.mm-checklist-by { opacity: .75; }
/* An assignee who can no longer open the event keeps their name and says so. Dropping them
   silently would leave a job looking as though nobody was ever given it. */
.mm-checklist-who.is-stranded { background: rgba(245, 158, 11, .2); color: #92400e; }
.mm-checklist-due.is-overdue { background: rgba(220, 38, 38, .16); color: #b91c1c; font-weight: 650; }

.mm-checklist-controls { position: relative; display: flex; gap: 4px; margin-left: auto; padding-top: 5px; }
.mm-checklist-icon {
  border: 0; background: transparent; cursor: pointer; font-size: 16px; line-height: 1;
  width: 34px; height: 34px; border-radius: 50%; color: inherit; opacity: .55;
}
.mm-checklist-icon:hover, .mm-checklist-icon[aria-expanded="true"] { opacity: 1; background: rgba(100, 116, 139, .16); }
.mm-checklist-row-menu { min-width: 160px; }

.mm-checklist-quick {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 0; padding: 4px 6px 4px 8px;
  border-radius: 10px; color: inherit;
}
.mm-checklist-quick[hidden] { display: none; }
.mm-checklist-quick:focus-within { background: rgba(59, 130, 246, .07); }
.mm-checklist-quick-plus { flex: none; width: 22px; text-align: center; font-size: 20px; line-height: 1; color: var(--primary, #2563eb); }
/* The app's input style is !important, so the borderless line has to say so too. */
body.mm-modern #event-checklist-modal .mm-checklist-quick input[type="text"] {
  flex: 1 1 auto; min-width: 0; margin: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 8px 0; font-size: 15px; min-height: 0;
}
body.mm-modern #event-checklist-modal .mm-checklist-quick input[type="text"]:focus { outline: none; box-shadow: none; border: 0; }
.mm-checklist-link {
  flex: none; border: 0; background: none; padding: 4px 2px; color: var(--primary, #2563eb);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .15s ease;
}
.mm-checklist-quick:focus-within .mm-checklist-link, .mm-checklist-quick:hover .mm-checklist-link { opacity: 1; }
/* Add shows once you are in the line or have typed — and stays while there is text, so a tap that
   takes focus off the box (Safari does not focus buttons) cannot hide it under the finger. */
.mm-checklist-quick > .btn.mm-checklist-quick-add { display: none; flex: none; min-height: 36px; margin: 0; padding: 6px 14px; }
.mm-checklist-quick:focus-within > .btn.mm-checklist-quick-add,
.mm-checklist-quick:has(input:not(:placeholder-shown)) > .btn.mm-checklist-quick-add { display: inline-flex; align-items: center; }

.mm-checklist-editor {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; margin: 4px 0 10px;
  border-radius: var(--mm-radius-2, 10px); background: rgba(100, 116, 139, .08);
}
.mm-checklist-editor-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mm-checklist-editor-row > select { flex: 1 1 160px; }
.mm-checklist-editor-actions { display: flex; gap: 8px; }
.mm-checklist-avatar.is-all { background: #0d9488; font-size: 10px; }
.mm-checklist-waiting { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: rgba(245, 158, 11, .14); color: #92400e; }
.mm-checklist-row.is-mine-ticked .mm-checklist-label { opacity: .75; }
.mm-checklist-tick input:disabled { opacity: .45; cursor: not-allowed; }

/* Who a job is for: a closed line that reads like a select, opening to ticks for All, teams and
   people; and, once there is more than one of them, who ticks it. */
.mm-who { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.mm-who-pick { flex: 1 1 240px; min-width: 0; position: relative; }
.mm-who-summary {
  list-style: none; cursor: pointer; padding: 8px 30px 8px 12px; border-radius: 8px; font-size: 14px;
  border: 1px solid rgba(100, 116, 139, .35); background: var(--mm-surface, #fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;
}
.mm-who-summary::-webkit-details-marker { display: none; }
.mm-who-summary::after { content: '\25BE'; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); opacity: .6; }
.mm-who-pick[open] .mm-who-summary { border-color: var(--primary, #2563eb); }
.mm-who-list {
  margin-top: 4px; max-height: 320px; overflow: auto; padding: 0 6px 6px; border-radius: 8px;
  border: 1px solid rgba(100, 116, 139, .25); background: var(--mm-surface, #fff);
}
/* Search and filters stay put while the names scroll under them. */
.mm-who-find {
  position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; gap: 6px;
  margin: 0 -6px; padding: 6px; background: var(--mm-surface, #fff); border-bottom: 1px solid rgba(100, 116, 139, .15);
}
body.mm-modern .mm-who-find .mm-who-search { margin: 0; min-height: 36px; padding: 6px 10px; font-size: 14px; }
.mm-who-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.mm-who-filters button {
  border: 1px solid rgba(100, 116, 139, .3); background: transparent; color: inherit; font: inherit; font-size: 12px;
  padding: 3px 10px; border-radius: 999px; cursor: pointer;
}
.mm-who-filters button[aria-pressed="true"] { background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff; font-weight: 600; }
.mm-who-option[hidden], .mm-who-section[hidden], .mm-who-none[hidden] { display: none; }
.mm-who-none { margin: 10px 6px 4px; font-size: 13px; opacity: .7; }
.mm-who-head { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .6; padding: 8px 6px 2px; }
.mm-who-option { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.mm-who-option:hover { background: rgba(100, 116, 139, .1); }
.mm-who-option input { width: auto; margin: 0; flex: none; }
.mm-who-option small { opacity: .65; }
.mm-who-tick { display: inline-flex; align-items: center; gap: 0; border-radius: 999px; border: 1px solid rgba(100, 116, 139, .35); overflow: hidden; }
.mm-who-tick[hidden] { display: none; }
.mm-who-tick-label { font-size: 12px; opacity: .7; padding: 0 8px 0 12px; }
.mm-who-tick button { border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; padding: 7px 12px; cursor: pointer; }
.mm-who-tick button[aria-checked="true"] { background: var(--primary, #2563eb); color: #fff; font-weight: 600; }
.mm-template-who { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }
.mm-template-who-label { font-size: 13px; }
.mm-checklist-loading { padding: 18px; opacity: .7; }
.mm-checklist-rowline { font-size: 13px; opacity: .85; }

/* Applying a template, and saving one, happen in a panel above the list rather than in a browser
   prompt — so the list you are deciding about stays on screen while you decide, and every answer
   can be changed before you commit to any of them. */
.mm-checklist-panel {
  border: 1px solid rgba(100, 116, 139, .22); border-radius: var(--mm-radius-2, 10px);
  background: rgba(100, 116, 139, .06); padding: 14px; margin-bottom: 14px;
}
.mm-checklist-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mm-checklist-panel-head h3 { margin: 0; font-size: 14px; }
.mm-checklist-panel-note, .mm-checklist-panel-empty { margin: 0 0 12px; font-size: 13px; opacity: .78; }
.mm-checklist-panel input[type="text"] { margin-bottom: 10px; }
.mm-checklist-panel-actions { display: flex; gap: 8px; margin-top: 12px; }

.mm-checklist-picks { display: flex; flex-direction: column; gap: 6px; }
.mm-checklist-pick {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0;
  padding: 10px 12px; border-radius: var(--mm-radius-2, 10px);
  border: 1px solid rgba(100, 116, 139, .2); background: var(--mm-surface, #fff);
}
.mm-checklist-pick:hover { border-color: var(--primary); }
.mm-checklist-pick:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.mm-checklist-pick input { width: auto; margin: 3px 0 0; flex: none; }
.mm-checklist-pick-body { display: flex; flex-direction: column; gap: 2px; }
.mm-checklist-pick-name { font-weight: 650; font-size: 14px; }
.mm-checklist-pick-note { font-size: 12px; opacity: .72; }
.mm-checklist-pick-count { font-size: 11px; opacity: .6; }

.mm-checklist-modes { border: 0; padding: 0; margin: 14px 0 0; }
.mm-checklist-modes legend { padding: 0; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.mm-checklist-mode { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 8px 0 0; }
.mm-checklist-mode input { width: auto; margin: 3px 0 0; flex: none; }
.mm-checklist-mode span { display: flex; flex-direction: column; gap: 2px; }
.mm-checklist-mode strong { font-size: 13px; font-weight: 650; }
.mm-checklist-mode small { font-size: 12px; opacity: .72; line-height: 1.45; }

.mm-checklist-template-card h3 { margin: 0 0 4px; }
.mm-checklist-template-note { margin: 0 0 6px; font-size: 13px; opacity: .75; }
.mm-checklist-template-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.mm-checklist-template-row .mm-template-label { flex: 2 1 220px; }
.mm-checklist-template-row select { flex: 1 1 140px; }

@media (prefers-color-scheme: dark) {
  .event-stat-checklist[data-state="done"] { color: #6ee7b7; }
  .event-stat-checklist[data-state="partial"] { color: #fdba74; }
  .event-stat-checklist[data-state="late"] { color: #fca5a5; }
  .mm-checklist-who.is-stranded { color: #fdba74; }
  .mm-checklist-waiting { color: #fdba74; }
  .mm-checklist-due.is-overdue { color: #fca5a5; }
  .mm-checklist-sync[data-state="offline"] { color: #fdba74; }
  .mm-checklist-sync[data-state="error"] { color: #fca5a5; }
}

/* The shared phone condition, not a breakpoint of its own: a phone held sideways is still a
   phone, and this file and app.html have to agree about that. */
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .mm-checklist-controls { padding-top: 4px; }
  /* A thumb needs more than a hover target's worth of room. */
  .mm-checklist-icon { width: 40px; height: 40px; }
  .mm-checklist-tick input { width: 24px; height: 24px; }
  .mm-checklist-editor-row > select { flex: 1 1 100%; }
  .mm-who-pick, .mm-who-tick { flex: 1 1 100%; }
  .mm-who-tick button { flex: 1 1 0; padding: 10px 12px; }
  .mm-who-filters button { flex: 1 1 auto; padding: 6px 10px; }
  body.mm-modern .mm-who-find .mm-who-search { min-height: 40px; font-size: 16px; }
  /* No hover on a phone: More options shows whenever the line is in use. */
  .mm-checklist-link { opacity: 1; }
  .mm-checklist-filters { display: flex; }
  .mm-checklist-filters button { flex: 1 1 0; }
  .mm-checklist-template-row > * { flex: 1 1 100% !important; }
  .mm-checklist-panel-actions > .btn { flex: 1 1 auto; }
  /* A radio the width of a thumb needs the whole row to be the target, which it already is. */
  .mm-checklist-pick, .mm-checklist-mode { padding-block: 12px; }
}

/* ------------------------------------------------- checklist ministries
   The groups a job belongs to — Music Ministry, Digital, the Breakfast Team. A short hand-ordered
   list shown on the Checklists page beside the templates that use it, and edited in Teams ›
   Ministries & service roles — the same ministries the service roles sit in. Labels only: they
   grant nobody access to anything. */
.mm-ministry-panel {
  border: 1px solid rgba(100, 116, 139, .2); border-radius: var(--mm-radius-2, 10px);
  padding: 14px; margin-bottom: 18px; background: rgba(100, 116, 139, .05);
}
.mm-ministry-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mm-ministry-head h3 { margin: 0; font-size: 14px; }
.mm-ministry-note { margin: 6px 0 12px; font-size: 12px; opacity: .72; max-width: 62ch; }
.mm-ministry-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mm-ministry-chips li {
  padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--mm-surface, #fff); border: 1px solid rgba(100, 116, 139, .2);
}
body.dark .mm-ministry-chips li { background: rgba(15, 23, 42, .5); border-color: rgba(148, 163, 184, .3); }
.mm-checklist-icon[disabled] { opacity: .25; cursor: default; }

/* Inside the checklist, a ministry is a quiet subheading rather than a chip on every line: the
   run of items under it says which jobs are yours far faster than reading a label per row. */
.mm-checklist-ministry { margin: 0 0 10px; }
.mm-checklist-ministry h4 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 5px;
  font-size: 12px; font-weight: 700; opacity: .85;
}
.mm-checklist-ministry-count {
  font-size: 10px; font-weight: 600; opacity: .7;
  padding: 1px 7px; border-radius: 999px; background: rgba(100, 116, 139, .16);
}

/* Template editor: keep each task together and actions within reach. */
#event-checklist-template-modal .modal-content {
  display: flex; flex-direction: column; max-height: calc(100dvh - 32px);
  overflow: hidden; padding: 0; width: min(760px, calc(100vw - 24px));
}
#event-checklist-template-modal .mm-modal-heading,
#event-checklist-template-modal .mm-event-footer {
  flex: none; padding: 18px 24px; margin: 0;
}
#event-checklist-template-modal .mm-modal-heading { border-bottom: 1px solid rgba(100,116,139,.18); }
#event-checklist-template-modal .mm-event-footer { border-top: 1px solid rgba(100,116,139,.18); }
.mm-template-scroll { overflow-y: auto; min-height: 0; padding: 20px 24px; overscroll-behavior: contain; }
.mm-template-items-heading { font-size: 15px; margin: 0 0 6px; }
.mm-template-help { font-size: 13px; line-height: 1.5; opacity: .75; margin: 0 0 16px; }
#event-checklist-template-modal .mm-checklist-template-row {
  position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 14px 16px; min-width: 0; padding: 42px 16px 16px; margin: 0 0 18px;
  border: 1px solid rgba(100,116,139,.25); border-radius: 12px;
  background: rgba(100,116,139,.035);
}
.mm-template-task-number { padding: 0 6px; font-size: 13px; font-weight: 650; }
#event-checklist-template-modal .mm-template-remove { position: absolute; top: 4px; right: 12px; min-height: 36px; }
#event-checklist-template-modal .mm-checklist-template-row label {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; font-size: 12px; font-weight: 600;
}
#event-checklist-template-modal .mm-template-task-field { grid-column: 1 / -1; }
#event-checklist-template-modal .mm-checklist-template-row input,
#event-checklist-template-modal .mm-checklist-template-row select {
  width: 100%; min-width: 0; margin: 0; flex: none; min-height: 44px; font-size: 14px; font-weight: 400;
}
#event-checklist-template-modal [aria-invalid="true"] { border-color: #dc2626; }
/* The picker inside a template task: the whole width, and its own small rows and ticks, not the
   form's stacked labels and 44px inputs. */
#event-checklist-template-modal .mm-template-who { grid-column: 1 / -1; font-size: 12px; font-weight: 600; }
#event-checklist-template-modal .mm-checklist-template-row .mm-who-option {
  flex-direction: row; align-items: center; gap: 8px; font-size: 14px; font-weight: 400;
}
#event-checklist-template-modal .mm-checklist-template-row .mm-who-option input {
  width: auto; min-height: 0; flex: none;
}
#event-checklist-template-modal .mm-checklist-template-row .mm-who-search { min-height: 36px; }
#event-checklist-template-modal .mm-who-summary { min-height: 44px; display: flex; align-items: center; font-weight: 400; }
#mm-template-undo { margin-top: 12px; font-size: 13px; }
#mm-template-undo .btn { margin-left: 8px; }
@media (max-width: 540px) {
  #event-checklist-template-modal .mm-checklist-template-row { grid-template-columns: minmax(0,1fr); }
  #event-checklist-template-modal .mm-modal-heading,
  #event-checklist-template-modal .mm-event-footer { padding: 14px 16px; }
  .mm-template-scroll { padding: 16px; }
  #event-checklist-template-modal .mm-template-remove { min-height: 44px; }
  #event-checklist-template-modal .mm-checklist-template-row { padding-top: 50px; }
}

.mm-template-field-error { color: #dc2626; font-size: 12px; display: block; margin-top: 5px; }
body.dark .mm-template-field-error { color: #fca5a5; }

/* ------------------------------------------------------- event dialogs on phones
   One pattern for every dialog opened from an event (Edit, Checklist, Stage & gear, Readiness &
   team, Event record, templates): a sheet rising from the bottom edge; a heading that stays put
   while the body scrolls, with the title on the left and a round ✕ on the right; secondary tools
   below the title, primary actions at the bottom. The <dialog> ones (app-sync, app-service,
   app-history…) load later, so their rules here carry body.mm-modern to outrank those sheets. */
.mm-checklist-recovery {
  border: 0; background: none; padding: 4px 0; color: #b45309; font: inherit; font-size: 12px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
body.dark .mm-checklist-recovery { color: #fcd34d; }
@media (max-width: 768px), ((orientation: landscape) and (max-height: 500px) and (pointer: coarse)) {
  body.mm-modern dialog.mm-sync-dialog {
    width: 100%; max-width: none; max-height: 94dvh; margin: auto 0 0; padding: 0 16px calc(18px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: 22px 22px 0 0; box-sizing: border-box;
  }
  body.mm-modern dialog.mm-sync-dialog .mm-sync-head {
    position: sticky; top: 0; z-index: 3; margin: 0 -16px 8px; padding: 14px 16px 12px;
    background: inherit; border-bottom: 1px solid rgba(100,116,139,.18);
  }
  body.mm-modern #event-modal .mm-modal-heading,
  body.mm-modern #event-checklist-modal .mm-modal-heading {
    position: sticky; top: -20px; z-index: 3; margin: -20px -16px 12px; padding: 16px 16px 12px;
    background: inherit; border-bottom: 1px solid rgba(100,116,139,.18); flex-wrap: nowrap;
  }
  body.mm-modern #event-modal .modal-content,
  body.mm-modern #event-checklist-modal .modal-content { background-clip: padding-box; }
  /* The title: one size everywhere, two lines at most. */
  body.mm-modern .mm-modal-heading > h2,
  body.mm-modern dialog.mm-sync-dialog .mm-sync-head h2,
  body.mm-modern #event-stageplot-modal .sp-heading h2 {
    flex: 1 1 0; min-width: 0; margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.01em;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
  }
  /* Close becomes a round ✕. The word stays in the button — clipped and transparent, not removed
     — so it is still the accessible name. In an .mm-sync-head the last button is always Close or
     Cancel. */
  body.mm-modern #close-event-checklist,
  body.mm-modern #close-event-stageplot,
  body.mm-modern dialog.mm-sync-dialog .mm-sync-head > button:last-child {
    position: relative; flex: none; width: 40px; height: 40px; min-height: 40px; min-width: 40px; max-width: 40px;
    margin: 0 0 0 auto; padding: 0; border-radius: 50%; overflow: hidden; white-space: nowrap; color: transparent;
  }
  /* Action rows in these dialogs: an even two-column grid instead of ragged wrapping; an odd
     last button takes the full width. */
  body.mm-modern dialog.mm-sync-dialog .mm-sync-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.mm-modern dialog.mm-sync-dialog .mm-sync-actions > button { width: 100%; margin: 0; white-space: normal; line-height: 1.2; }
  body.mm-modern dialog.mm-sync-dialog .mm-sync-actions > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.mm-modern #close-event-checklist::before,
  body.mm-modern #close-event-stageplot::before,
  body.mm-modern dialog.mm-sync-dialog .mm-sync-head > button:last-child::before {
    content: "\2715" / ""; position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 16px; line-height: 1; font-weight: 600; color: var(--mm-slate-700, #334155);
  }
  body.dark.mm-modern #close-event-checklist::before,
  body.dark.mm-modern #close-event-stageplot::before,
  body.dark.mm-modern dialog.mm-sync-dialog .mm-sync-head > button:last-child::before { color: #e2e8f0; }
}

/* ------------------------------------------------------- page toolbars (Songs, Sessions, Events)
   On a computer the action buttons sit in the toolbar's own row as before (display:contents).
   On a phone the toolbar is three tidy rows: search, then the filters side by side, then one
   line of actions with the main one (+ Add, + Create) first and the rest scrolling beside it —
   instead of buttons wrapping into three or four ragged rows above the list. */
.search-bar-actions { display: contents; }
@media (max-width: 768px), ((orientation: landscape) and (max-height: 500px) and (pointer: coarse)) {
  #songs-section > .search-bar, #sessions-section > .search-bar, #events-section > .search-bar {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  #songs-section > .search-bar > .search-input, #sessions-section > .search-bar > .search-input, #events-section > .search-bar > .search-input {
    order: -1; flex: 1 1 100%; margin: 0;
  }
  #songs-section > .search-bar > select, #sessions-section > .search-bar > select, #events-section > .search-bar > select,
  #songs-section > .search-bar > .song-filter-toggle {
    flex: 1 1 0; min-width: 0; margin: 0;
  }
  #songs-section > .search-bar > .song-filter-toggle { flex: 0 0 auto; }
  .search-bar > .search-bar-actions {
    display: flex; flex: 1 1 100%; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -2px; padding: 2px; overscroll-behavior-x: contain;
  }
  .search-bar > .search-bar-actions::-webkit-scrollbar { display: none; }
  .search-bar > .search-bar-actions > .btn { flex: none; min-height: 40px; padding: 8px 14px; font-size: 13.5px; white-space: nowrap; margin: 0; }
  .search-bar > .search-bar-actions > .btn:not(.btn-secondary) { order: -1; }
  .search-bar > .search-bar-actions > [hidden] { display: none; }
}

/* ------------------------------------------------------- song library on a phone (4.0)
   The Songs toolbar becomes: search; the two selects side by side (short labels from app-ui JS);
   then Filters, Suggest and one "+ Add" menu that holds Add / Import / Tag themes — instead of a
   sideways-scrolling row where Import was half cut off. On a computer nothing changes. */
#songs-section .mm-song-add-menu { display: none; }
.event-menu-item[hidden] { display: none; }
.mm-load-more { display: flex; justify-content: center; margin: 18px 0 0; }
.mm-load-more[hidden] { display: none; }
.mm-load-more .btn { width: 100%; max-width: 420px; min-height: 46px; justify-content: center; }
.song-filter-sheet-head, .song-filter-sheet-foot, .song-filter-backdrop { display: none; }
@media (max-width: 768px), ((orientation: landscape) and (max-height: 500px) and (pointer: coarse)) {
  #songs-section > .search-bar > select { flex: 1 1 calc(50% - 4px); }
  #songs-section > .search-bar > .search-bar-actions { display: contents; }
  #songs-section > .search-bar > .song-filter-toggle,
  #songs-section > .search-bar > .search-bar-actions > .btn,
  #songs-section .mm-song-add-menu { flex: 1 1 0; min-width: 0; min-height: 40px; margin: 0; padding: 8px 10px; justify-content: center; white-space: nowrap; }
  #songs-section #add-song-btn, #songs-section #import-song-btn, #songs-section #theme-tagger-open { display: none !important; }
  #songs-section .mm-song-add-menu { display: flex; padding: 0; }
  #songs-section .mm-song-add-toggle { flex: 1 1 auto; min-height: 40px; margin: 0; padding: 8px 10px; justify-content: center; font-size: 13.5px; white-space: nowrap; }

  /* Filters open as a sheet from the bottom, above the tab bar, with the list dimmed behind. The
     keyboard (--sheet-kb, set by app.html while a BPM box has focus) lifts it so they stay visible. */
  .song-filter-panel.is-sheet {
    position: fixed; left: 0; right: 0; bottom: var(--sheet-kb, 0px); z-index: 1001; margin: 0;
    max-height: min(80dvh, calc(100dvh - var(--sheet-kb, 0px) - 24px));
    overflow-y: auto; overscroll-behavior: contain; padding: 0 16px;
    scroll-padding: 76px 0 96px;   /* a field scrolled into view clears the sticky heading and footer */
    border: 0; border-radius: 18px 18px 0 0; background: var(--card-bg, #fff);
    box-shadow: 0 -12px 40px rgba(15,23,42,.25);
  }
  .song-filter-panel.is-sheet .song-filter-sheet-head {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 -16px 10px; padding: 14px 16px 10px; background: inherit; border-bottom: 1px solid rgba(100,116,139,.18);
  }
  .song-filter-sheet-head h2 { margin: 0; font-size: 18px; line-height: 1.25; }
  .song-filter-sheet-close {
    flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(100,116,139,.14); color: inherit; font-size: 15px; cursor: pointer;
  }
  .song-filter-panel.is-sheet .song-filter-field select,
  .song-filter-panel.is-sheet .song-filter-bpm input { min-height: 44px; font-size: 16px; }
  .song-filter-panel.is-sheet .song-filter-sheet-foot {
    position: sticky; bottom: 0; z-index: 2; display: flex; gap: 8px;
    margin: 14px -16px 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: inherit;
    border-top: 1px solid rgba(100,116,139,.18);
  }
  .song-filter-sheet-foot .btn { flex: 1 1 0; min-height: 46px; margin: 0; justify-content: center; }
  .song-filter-sheet-foot [data-sheet-done] { flex: 2 1 0; }
  .song-filter-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.45); touch-action: none; }
}

/* A session card's songs read as one tidy list — rows split by hairlines inside a soft panel, like
   an event's program — rather than bulleted lines floating in padding. */
body.mm-modern .session-card .session-song-list { margin: 8px 0 4px; padding: 2px 12px; border: 1px solid var(--border); border-radius: 12px; }
body.mm-modern .session-card .session-song-summary { grid-template-columns: minmax(0, 1fr); margin: 0; padding: 8px 0; }
body.mm-modern .session-card .session-song-summary { border-top: 1px solid rgba(100, 116, 139, .15); }
body.mm-modern .session-card .session-song-list-visible > .session-song-summary:first-child { border-top: 0; }
body.mm-modern .session-card .session-song-summary-bullet { display: none; }
body.mm-modern .session-card .session-songs-more { margin: 4px 0 8px; }

/* Email reminders and the calendar link (app-notify, 3.1). */
.mm-notify-card { max-width: 540px; }
.mm-notify-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
/* The title and ✕ stay at hand however far a long sheet (Practice, history) is scrolled. */
.mm-notify-card > .mm-notify-head { position: sticky; top: -1px; z-index: 2; background: inherit; padding-block: 8px; }
.mm-notify-head h2 { margin: 0; }
.mm-notify-close { border: 0; background: rgba(100, 116, 139, .14); color: inherit; width: 36px; height: 36px; border-radius: 50%; font-size: 15px; cursor: pointer; flex: none; }
.mm-notify-muted { font-size: 14px; opacity: .78; line-height: 1.5; }
.mm-notify-small { font-size: 12.5px; }
.mm-notify-error { color: #dc2626; }
.mm-notify-note { border-radius: 10px; padding: 10px 12px; margin: 6px 0 12px; background: rgba(245, 158, 11, .14); color: #92400e; font-size: 13.5px; }
.mm-notify-note p { margin: 0; }
.mm-notify-note p + p { margin-top: 6px; }
.mm-notify-options { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.mm-notify-option {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; cursor: pointer;
  border: 1px solid rgba(100, 116, 139, .25); border-radius: 10px; flex-wrap: wrap;
}
.mm-notify-option:has(input:checked) { border-color: var(--primary, #2563eb); }
.mm-notify-option input[type="checkbox"], .mm-notify-option input[type="radio"] { width: auto; margin: 3px 0 0; flex: none; }
.mm-notify-option span { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; }
.mm-notify-option small { font-size: 12.5px; opacity: .72; font-weight: 400; }
.mm-notify-option select { flex: 0 0 auto; width: auto; margin: 0 0 0 auto; }
.mm-notify-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.mm-notify-actions a.btn { text-decoration: none; }
.mm-notify-preview { margin: 8px 0 4px; padding: 12px; border-radius: 10px; background: rgba(100, 116, 139, .08); }
.mm-notify-preview h4 { margin: 12px 0 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.mm-notify-subject { font-weight: 650; }
.mm-notify-item { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px solid rgba(100, 116, 139, .15); }
.mm-notify-item small { opacity: .72; }
.mm-notify-item > strong { display: block; }
.mm-notify-flag { display: inline-block; align-self: flex-start; margin: 2px 0; padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11.5px; font-weight: 600; }
.mm-notify-org { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(100, 116, 139, .2); }
.mm-notify-org h3 { margin: 0 0 8px; font-size: 15px; }
.mm-notify-spaced { margin-top: 10px; }
.mm-notify-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; margin: 0; }
.mm-notify-row select { width: auto; margin: 0; min-height: 40px; }
.mm-notify-row input[type="checkbox"] { width: 20px; height: 20px; }
.mm-notify-row small { opacity: .65; }
.mm-notify-link-box { margin: 12px 0; padding: 12px; border-radius: 10px; background: rgba(37, 99, 235, .07); }
.mm-notify-link-box p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.mm-notify-url { width: 100%; font-size: 12px; margin: 4px 0 0; }
.mm-notify-danger { color: #dc2626; }
@media (prefers-color-scheme: dark) {
  .mm-notify-note { color: #fcd34d; }
  .mm-notify-flag { background: rgba(245, 158, 11, .25); color: #fcd34d; }
}
body.dark .mm-notify-note { color: #fcd34d; }
body.dark .mm-notify-flag { background: rgba(245, 158, 11, .25); color: #fcd34d; }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  .mm-notify-actions > .btn { flex: 1 1 auto; text-align: center; }
  .mm-notify-option select { margin: 6px 0 0 30px; }
}

/* Change history (app-changes, 3.2): the History button in editors, an item's history, Recently deleted. */
.mm-changes-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.mm-changes-heading h2 { margin: 0 !important; }
.mm-changes-open { flex: none; margin-left: auto; }
.mm-changes-open[hidden] { display: none !important; }
.song-modal-header .mm-changes-open, .mm-modal-heading .mm-changes-open { margin-left: 8px; }
.mm-changes-card { max-width: 620px; }
.mm-changes-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mm-changes-entry { border: 1px solid rgba(100, 116, 139, .22); border-radius: 10px; overflow: hidden; }
.mm-changes-row {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 12px;
  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.mm-changes-row:hover, .mm-changes-row[aria-expanded="true"] { background: rgba(100, 116, 139, .08); }
.mm-changes-static { cursor: default; }
.mm-changes-static:hover { background: transparent; }
.mm-changes-when { font-size: 12.5px; opacity: .7; }
.mm-changes-now { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: rgba(22, 163, 74, .15); color: #15803d; font-size: 11px; font-weight: 650; }
.mm-changes-what { font-size: 14px; }
.mm-changes-summary { font-size: 13px; opacity: .8; line-height: 1.45; overflow-wrap: anywhere; }
.mm-changes-detail { padding: 4px 12px 12px; }
.mm-changes-lead { margin: 6px 0 4px; font-size: 13.5px; font-weight: 600; }
.mm-changes-changes { margin: 0 0 8px; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.mm-changes-entry > .mm-notify-actions { padding: 0 12px 10px; margin: 0; }

/* Speaker panel (3.9.0): the timer and messages the digital team or the MD send to the
   teleprompter. Opened from Presenter's 🎤 button and MD View's Teleprompter menu, over both, so
   it is dark like them. */
.mm-spk-panel { position:fixed; z-index:10070; top:72px; right:16px; width:min(380px,calc(100vw - 16px)); max-height:calc(100vh - 90px); overflow:auto;
  padding:14px; border-radius:16px; background:#0b1119; color:#e8edf4; border:1px solid rgba(250,204,21,.4); box-shadow:0 22px 60px rgba(0,0,0,.6); font:14px/1.35 Inter,system-ui,sans-serif; }
.mm-spk-head { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.mm-spk-head strong { font-size:16px; }
.mm-spk-head span { color:#9fb0c4; font-size:12px; flex:1; }
.mm-spk-x { all:unset; cursor:pointer; padding:2px 6px; border-radius:6px; color:#9fb0c4; }
.mm-spk-x:hover { background:rgba(255,255,255,.08); }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) {
  /* A phone: a sheet from the top edge that never runs past the bottom (openPanel's anchored
     top/left are for a laptop), with a ✕ a finger can hit. */
  .mm-spk-panel { top:calc(8px + env(safe-area-inset-top)) !important; left:8px !important; right:8px; width:auto;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior:contain; }
  .mm-spk-x { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:0; font-size:18px; }
}
.mm-spk-panel section { padding:10px 0; border-top:1px solid rgba(255,255,255,.1); }
.mm-spk-panel h3 { margin:0 0 6px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9fb0c4; }
.mm-spk-clock { font-size:40px; font-weight:850; font-variant-numeric:tabular-nums; line-height:1.05; }
.mm-spk-clock.is-off { color:#64748b; }
.mm-spk-clock.is-warn { color:#fbbf24; }
.mm-spk-clock.is-last, .mm-spk-clock.is-over { color:#f87171; }
.mm-spk-elapsed { color:#9fb0c4; font-size:12px; margin-bottom:8px; }
.mm-spk-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.mm-spk-row label { display:flex; align-items:center; gap:6px; font-size:12px; color:#cbd5e1; }
.mm-spk-panel input[type=number] { width:4.5em; }
.mm-spk-panel input[type=text] { flex:1; min-width:0; }
/* !important: the app's own form and button rules are more specific and would make these light. */
body .mm-spk-panel input[type=number], body .mm-spk-panel input[type=text], body .mm-spk-panel select {
  width:auto; min-height:0; padding:6px 8px !important; border-radius:8px !important; border:1px solid rgba(255,255,255,.18) !important;
  background:#111a26 !important; color:#e8edf4 !important; font:inherit !important; box-shadow:none !important; }
body .mm-spk-panel input[type=text] { flex:1; min-width:0; }
body .mm-spk-panel button:not(.mm-spk-x) { width:auto; min-height:0; padding:7px 11px !important; border-radius:9px !important; border:1px solid rgba(255,255,255,.18) !important;
  background:#16202e !important; color:#e8edf4 !important; font:600 13px/1 Inter,system-ui,sans-serif !important; cursor:pointer; box-shadow:none !important; }
body .mm-spk-panel button:not(.mm-spk-x):hover { background:#1e2a3b !important; }
body .mm-spk-panel button.mm-spk-go { background:#facc15 !important; border-color:#facc15 !important; color:#111 !important; }
body .mm-spk-panel button.mm-spk-go:hover { background:#fde047 !important; }
.mm-spk-chips { display:flex; flex-wrap:wrap; gap:6px; }
.mm-spk-check { gap:6px; }
.mm-spk-check input { width:16px; height:16px; margin:0; }
.mm-spk-said { margin-top:6px; color:#fde047; font-size:12px; min-height:1em; }
.mm-spk-status { color:#9fb0c4; font-size:12px; min-height:1em; }
.mm-spk-extra:empty { display:none; }
.mm-spk-extra { padding-bottom:8px; }
.mm-overlay-to-speaker { display:inline-flex; margin-top:8px; }
.mm-overlay-to-speaker[hidden] { display:none; }

/* The keyboard over a dialog (4.0, see watchKeyboard in app-ui): the open dialog stops above it,
   and its content scrolls within what is left. The song editor sizes itself. */
body.mm-kb-open .modal.active:not(#song-modal) { padding-bottom:var(--mm-kb, 0px); box-sizing:border-box; }
body.mm-kb-open .modal.active:not(#song-modal) > .modal-content { max-height:calc(100dvh - var(--mm-kb, 0px) - 16px); overflow:auto; }

/* Chapter storage meter (4.7.0): Media library, rehearsal recordings, Superuser Portal. */
.mm-media-quota { padding:0 22px 10px; display:flex; flex-direction:column; gap:6px; }
.mm-media-quota .mm-storage-meter { margin-top:0; }
@media (max-width:768px), ((orientation:landscape) and (max-height:500px) and (pointer:coarse)) { .mm-media-quota { padding-inline:14px; } }
.mm-storage-meter { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.mm-storage-text { font-size:12px; color:#475569; }
body.dark .mm-storage-text { color:#94a3b8; }
.mm-storage-bar { height:6px; border-radius:4px; background:rgba(100,116,139,.22); overflow:hidden; }
.mm-storage-bar span { display:block; height:100%; background:#22c55e; border-radius:4px; }
.mm-storage-meter.is-warn .mm-storage-bar span { background:#f59e0b; }
.mm-storage-meter.is-full .mm-storage-bar span { background:#ef4444; }
.mm-storage-tidy { font-size:12px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }