/* 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;
}
.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;
}
body.mm-modern .search-bar { align-items:center; gap:10px; margin-bottom:20px; }
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 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); }

@media (max-width:980px) and (min-width:769px) {
  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; }
}

@media (max-width:768px) {
  .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; }
}

/* 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;
}
.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: 10px; 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; }
.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); }
.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; } }

#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 {
  grid-column: 1 / -1; 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, #fff); box-shadow: 0 14px 38px rgba(15, 23, 42, .18);
}
.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-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; }

/* ------------------------------------------------------- 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 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; }
/* 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; }
.mm-media-library-toolbar { display:grid; grid-template-columns:minmax(180px,1fr) minmax(170px,auto) auto auto; gap:9px; padding:14px 22px; }
.mm-media-library-toolbar input,.mm-media-library-toolbar select { min-height:42px; }
.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; } }
@media (max-width:640px) {
  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 { grid-template-columns:1fr; padding-block:10px; }
  .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; }
}

/* 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; }

/* 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);
}
#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;
}
.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; }
body.dark .mm-rich-text-editor { background:#111827; }
.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; }

/* 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;
}