/* ===========================================================================
   Music Lab — music.admon.cloud / stackfire.io/music
   Self-contained stylesheet: shares nothing with the portal or the
   institutional site so the music brand can evolve on its own.
   Mobile and iPad first — this is read from a music stand.
   =========================================================================== */

:root {
  /* Brand gradient, taken from the Music Lab logo. */
  --ml-pink: #f20b7e;
  --ml-rose: #fb3d6e;
  --ml-coral: #ff7a54;
  --ml-grad: linear-gradient(135deg, var(--ml-pink), var(--ml-coral));

  --ml-bg: #0c0710;
  --ml-bg-2: #140c1b;
  --ml-surface: rgba(255, 255, 255, .045);
  --ml-surface-2: rgba(255, 255, 255, .07);
  --ml-line: rgba(255, 255, 255, .11);
  --ml-line-strong: rgba(255, 255, 255, .2);

  --ml-text: #f6eef5;
  --ml-muted: #b6a7bb;
  --ml-dim: #8c7d93;

  --ml-violet: #a855f7;
  --ml-amber: #f6a723;
  --ml-cyan: #22d3ee;
  --ml-emerald: #34d399;

  --ml-radius: 18px;
  --ml-radius-sm: 12px;
  --ml-max: 1180px;
  --ml-nav-h: 64px;
  /* Where the Ensamble menu and the pinned strip stick: under the nav and the
     instrument bar (full screen hides both and moves it to the top). */
  --ml-stick-top: calc(var(--ml-nav-h) + 68px);

  --ml-shadow: 0 18px 50px rgba(0, 0, 0, .45);

  /* Surfaces that were hardcoded before the day theme existed. */
  --ml-grad-text: var(--ml-grad);          /* gradient used as text (hero, login) */
  --ml-nav-bg: rgba(12, 7, 16, .82);       /* glass nav + sticky instrument bar */
  --ml-popover-bg: #171020;                /* submenu, mobile menu, bot panel */
  --ml-bar-bg: rgba(0, 0, 0, .22);         /* chord bars in the structure and sheet */
  --ml-sub-bg: rgba(0, 0, 0, .3);          /* mobile accordion submenu */
  --ml-dot: rgba(255, 255, 255, .28);      /* metronome beat dots */
  --ml-dot-on: #fff;
  --ml-key-white: rgba(255, 255, 255, .10);/* piano diagram keys */
  --ml-key-black: #1b1220;
  --ml-alt-wash: rgba(255, 255, 255, .022);/* alternate section band */
  --ml-on-accent: #140a11;                 /* text placed on an accent-coloured chip */
  --ml-wash-opacity: 1;                    /* body radial washes, hero glow */
}

/* Accent tokens — one class sets the local accent for a whole card. */
.ml-accent--violet  { --ml-accent: var(--ml-violet); }
.ml-accent--amber   { --ml-accent: var(--ml-amber); }
.ml-accent--cyan    { --ml-accent: var(--ml-cyan); }
.ml-accent--emerald { --ml-accent: var(--ml-emerald); }
.ml-accent--rose    { --ml-accent: var(--ml-rose); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Auto-scroll moves the page a pixel at a time; smooth scrolling would animate
   each step and stutter. */
html.is-autoscrolling { scroll-behavior: auto; }

.ml-body {
  margin: 0;
  background: var(--ml-bg);
  color: var(--ml-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient brand wash behind everything. */
.ml-body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(242, 11, 126, .20), transparent 62%),
    radial-gradient(700px 420px at 8% 4%, rgba(255, 122, 84, .13), transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: var(--ml-wash-opacity);
}

.ml-main { position: relative; z-index: 1; }

h1, h2, h3 {
  font-family: "Space Grotesk", Inter, sans-serif;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0;
}

a { color: inherit; }

.ml-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ml-pink); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0;
}
.ml-skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--ml-coral); outline-offset: 3px; border-radius: 6px; }

/* ── Nav ─────────────────────────────────────────────────────────────── */
.ml-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--ml-nav-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--ml-line);
}
.ml-nav__in {
  max-width: var(--ml-max); margin: 0 auto;
  min-height: var(--ml-nav-h);
  padding: 0 16px;
  display: flex; align-items: center; gap: 14px;
}

.ml-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.ml-brand__logo { width: 38px; height: 38px; display: block; }
.ml-brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.ml-brand__txt strong { font-family: "Space Grotesk", sans-serif; font-size: 17px; letter-spacing: -.02em; }
.ml-brand__txt small { font-size: 11px; color: var(--ml-dim); letter-spacing: .06em; text-transform: uppercase; }

.ml-burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--ml-line); border-radius: 11px;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  cursor: pointer; padding: 0;
}
.ml-burger span { display: block; width: 18px; height: 2px; background: var(--ml-text); border-radius: 2px; transition: transform .22s, opacity .22s; }
.ml-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ml-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ml-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.ml-menu { display: flex; align-items: center; gap: 4px; }
.ml-menu__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; color: var(--ml-muted);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  font-family: inherit;
  transition: color .18s, background .18s;
}
.ml-menu__link:hover, .ml-menu__link.is-active { color: var(--ml-text); background: var(--ml-surface); }

.ml-has-sub { position: relative; }
.ml-sub {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 260px; padding: 8px;
  background: var(--ml-popover-bg); border: 1px solid var(--ml-line); border-radius: 15px;
  box-shadow: var(--ml-shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.ml-has-sub:hover .ml-sub,
.ml-has-sub:focus-within .ml-sub,
.ml-has-sub.is-open .ml-sub { opacity: 1; visibility: visible; transform: translateY(0); }

.ml-sub__item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 11px;
  text-decoration: none; color: var(--ml-text);
}
.ml-sub__item:hover { background: var(--ml-surface-2); }
.ml-sub__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ml-accent, var(--ml-pink)); flex: none; }
.ml-sub__txt { display: flex; flex-direction: column; line-height: 1.25; }
.ml-sub__txt strong { font-size: 14.5px; font-weight: 600; }
.ml-sub__txt small { font-size: 12px; color: var(--ml-dim); }
.ml-sub__item--all { font-size: 13.5px; color: var(--ml-muted); border-top: 1px solid var(--ml-line); margin-top: 4px; padding-top: 12px; border-radius: 0 0 11px 11px; }
/* The signed-in ensemble's songs, under the public levels. */
.ml-sub__ens { border-top: 1px solid var(--ml-line); margin-top: 6px; padding-top: 8px; }
.ml-sub__ens[hidden] { display: none; }
.ml-sub__ens-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 12px 6px; }
.ml-sub__ens-head strong { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-dim); }
.ml-sub__ens-pick { max-width: 150px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--ml-line-strong); background: var(--ml-surface); color: var(--ml-text); font-family: inherit; font-size: 12.5px; }
.ml-sub__ens-pick[hidden] { display: none; }
.ml-sub__ens-list { max-height: min(46vh, 360px); overflow-y: auto; }
.ml-sub__ens-empty { margin: 0; padding: 6px 12px 10px; font-size: 13px; color: var(--ml-muted); }
.ml-sub__ens .ml-sub__item { padding: 8px 12px; }
.ml-sub__ens .ml-sub__item[hidden] { display: none; }
/* `.ml-sub__item` is a flex box: without this, `hidden` would not hide it. */
.ml-sub__item[hidden] { display: none; }
/* A category still on the roadmap: listed so the menu reads complete, never a link. */
.ml-sub__item--soon { opacity: .55; cursor: default; }
.ml-sub__item--soon:hover { background: transparent; }
.ml-sub__item--soon .ml-sub__dot { background: var(--ml-line-strong); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.ml-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 12px;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .16s, box-shadow .16s, background .16s, border-color .16s;
  white-space: nowrap;
}
.ml-btn--lg { padding: 14px 24px; font-size: 16px; border-radius: 14px; }
.ml-btn--primary { background: var(--ml-grad); color: #fff; box-shadow: 0 10px 28px rgba(242, 11, 126, .32); }
.ml-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(242, 11, 126, .42); }
.ml-btn--ghost { border-color: var(--ml-line-strong); color: var(--ml-text); background: var(--ml-surface); }
.ml-btn--ghost:hover { background: var(--ml-surface-2); transform: translateY(-2px); }
.ml-btn--login { background: var(--ml-grad); color: #fff; margin-left: 6px; }
.ml-btn--login:hover { transform: translateY(-1px); }
.ml-btn--login[hidden] { display: none; }

/* Account button and menu: replaces the login button once signed in. */
.ml-session { position: relative; margin-left: 6px; }
.ml-session[hidden] { display: none; }
.ml-avatar {
  --ml-avatar-h: 320;
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--ml-avatar-h) 78% 56%), hsl(calc(var(--ml-avatar-h) + 40) 80% 60%));
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.ml-avatar--lg { width: 42px; height: 42px; font-size: 15px; }
.ml-avatar--xl { width: 72px; height: 72px; font-size: 26px; }
.ml-session__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 5px; min-height: 42px; border-radius: 999px;
  border: 1px solid var(--ml-line-strong); background: var(--ml-surface);
  color: var(--ml-text); font-family: inherit; font-size: 14px; cursor: pointer;
  max-width: 260px; white-space: nowrap; text-align: left;
}
.ml-session__btn:hover, .ml-session__btn[aria-expanded="true"] { background: var(--ml-surface-2); }
.ml-session__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ml-session__txt strong { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ml-session__txt small { font-size: 11.5px; color: var(--ml-muted); overflow: hidden; text-overflow: ellipsis; }
.ml-session__txt small:empty { display: none; }
.ml-session__caret { flex: none; color: var(--ml-muted); transition: transform .15s ease; }
.ml-session__btn[aria-expanded="true"] .ml-session__caret { transform: rotate(180deg); }
.ml-session__menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 290px; z-index: 60;
  padding: 6px; border-radius: 16px; border: 1px solid var(--ml-line);
  background: var(--ml-popover-bg); box-shadow: var(--ml-shadow);
}
.ml-session__menu[hidden] { display: none; }
.ml-session__head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.ml-session__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ml-session__who strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-session__who small { font-size: 12.5px; color: var(--ml-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-session__group { padding: 6px 0; border-top: 1px solid var(--ml-line); }
.ml-session__group[hidden] { display: none; }
.ml-session__label { margin: 2px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ml-dim); }
.ml-session__ens { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.ml-session__ens-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ml-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.ml-session__ens-opt:hover { background: var(--ml-surface-2); }
.ml-session__ens-opt .ml-session__ens-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-session__ens-opt small { font-size: 11px; color: var(--ml-muted); }
.ml-session__check { width: 16px; flex: none; color: var(--ml-pink); font-weight: 800; text-align: center; }
.ml-session__ens-opt[aria-checked="true"] { font-weight: 700; }
.ml-session__link, .ml-session__out {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ml-text); font-family: inherit; font-size: 14px; font-weight: 500;
  text-decoration: none; text-align: left; cursor: pointer;
}
.ml-session__link svg, .ml-session__out svg { flex: none; color: var(--ml-muted); }
.ml-session__link:hover, .ml-session__link:focus-visible, .ml-session__out:hover, .ml-session__out:focus-visible { background: var(--ml-surface-2); outline: none; }
.ml-session__link[hidden] { display: none; }
.ml-session__out:hover svg { color: var(--ml-coral); }

/* ── Hero ────────────────────────────────────────────────────────────── */
.ml-hero { position: relative; padding: 76px 16px 64px; overflow: hidden; }
.ml-hero__glow {
  position: absolute; left: 50%; top: -220px; transform: translateX(-50%);
  width: 900px; height: 560px;
  background: radial-gradient(closest-side, rgba(242, 11, 126, .34), transparent 72%);
  filter: blur(30px); pointer-events: none;
  opacity: var(--ml-wash-opacity);
}
.ml-hero__in { position: relative; max-width: 940px; margin: 0 auto; text-align: center; }

.ml-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--ml-line-strong); background: var(--ml-surface);
  font-size: 13px; color: var(--ml-muted); margin-bottom: 22px;
}
.ml-kicker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ml-coral); animation: ml-pulse 2.1s ease-in-out infinite; }
@keyframes ml-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.78); } }

.ml-hero__title { font-size: clamp(2.5rem, 8.2vw, 4.6rem); font-weight: 700; margin-bottom: 18px; }
.ml-grad { background: var(--ml-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; }
.ml-hero__sub { font-size: clamp(1.02rem, 2.6vw, 1.3rem); color: var(--ml-muted); max-width: 660px; margin: 0 auto 30px; }
.ml-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.ml-hero__stats {
  list-style: none; margin: 46px 0 0; padding: 0;
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.ml-hero__stats li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 22px; min-width: 132px;
  border: 1px solid var(--ml-line); border-radius: var(--ml-radius-sm); background: var(--ml-surface);
}
.ml-hero__stats strong { font-family: "Space Grotesk", sans-serif; font-size: 1.5rem; }
.ml-hero__stats span { font-size: 12.5px; color: var(--ml-dim); }

/* Equalizer strip under the hero. */
.ml-eq {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74px;
  display: flex; align-items: flex-end; gap: 4px; padding: 0 8px;
  opacity: .30; pointer-events: none;
}
.ml-eq i {
  flex: 1; border-radius: 4px 4px 0 0; background: var(--ml-grad);
  height: 18%;
  animation: ml-eq 1.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.09s);
}
@keyframes ml-eq { from { height: 12%; } to { height: 88%; } }
@media (prefers-reduced-motion: reduce) {
  .ml-eq i, .ml-kicker__dot { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Sections ────────────────────────────────────────────────────────── */
.ml-section { position: relative; max-width: var(--ml-max); margin: 0 auto; padding: 64px 16px; }
.ml-section--alt { max-width: none; background: linear-gradient(180deg, transparent, var(--ml-alt-wash), transparent); }
.ml-section--alt > * { max-width: var(--ml-max); margin-left: auto; margin-right: auto; }

.ml-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; margin-bottom: 34px; flex-wrap: wrap; }
.ml-section__head h2 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); margin: 8px 0 10px; }
.ml-section__head p { color: var(--ml-muted); max-width: 620px; margin: 0; }
.ml-eyebrow { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ml-coral); font-weight: 600; }
.ml-h2 { font-size: clamp(1.5rem, 3.6vw, 2rem); margin-bottom: 24px; }
.ml-h3 { font-size: 1.08rem; margin-bottom: 14px; color: var(--ml-text); }

/* ── Grids and cards ─────────────────────────────────────────────────── */
.ml-grid { display: grid; gap: 18px; }
.ml-grid--songs  { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
.ml-grid--tools  { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
.ml-grid--curric { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ml-grid--levels { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }

.ml-song-card, .ml-tool-card, .ml-level-card, .ml-curric-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--ml-surface); border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius); padding: 22px;
  text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.ml-song-card::before, .ml-tool-card::before, .ml-level-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--ml-accent, var(--ml-pink)); opacity: .85;
}
.ml-song-card:hover, .ml-tool-card:hover, .ml-level-card:hover, .ml-curric-card:hover {
  transform: translateY(-4px);
  border-color: var(--ml-line-strong);
  background: var(--ml-surface-2);
  box-shadow: var(--ml-shadow);
}

.ml-song-card__top { display: flex; gap: 8px; margin-bottom: 12px; }
.ml-song-card__key, .ml-song-card__bpm {
  font-family: "Space Grotesk", sans-serif; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ml-line-strong); color: var(--ml-muted);
}
.ml-song-card__key { background: var(--ml-accent, var(--ml-pink)); color: var(--ml-on-accent); border-color: transparent; }
.ml-song-card h3 { font-size: 1.32rem; margin-bottom: 3px; }
.ml-song-card__artist { color: var(--ml-coral); font-size: 13.5px; margin: 0 0 11px; font-weight: 500; }
.ml-song-card__sum { color: var(--ml-muted); font-size: 14px; margin: 0 0 15px; flex: 1; }
.ml-song-card__go {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ml-text); margin-top: auto;
}
.ml-song-card:hover .ml-song-card__go svg { transform: translateX(3px); }
.ml-song-card__go svg { transition: transform .18s; }

.ml-instr-pills, .ml-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 15px; }
.ml-instr-pills li, .ml-tags li {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ml-muted);
  padding: 4px 9px; border: 1px solid var(--ml-line); border-radius: 8px;
}
.ml-instr-pills svg { width: 13px; height: 13px; }

.ml-tool-card__icon {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 14px;
  background: color-mix(in srgb, var(--ml-accent, var(--ml-pink)) 16%, transparent);
  color: var(--ml-accent, var(--ml-pink));
  border: 1px solid color-mix(in srgb, var(--ml-accent, var(--ml-pink)) 32%, transparent);
}
.ml-tool-card__icon svg { width: 22px; height: 22px; }
.ml-tool-card h3 { font-size: 1.18rem; margin-bottom: 6px; }
.ml-tool-card__tag { color: var(--ml-coral); font-size: 13.5px; margin: 0 0 9px; font-weight: 500; }
.ml-tool-card__desc { color: var(--ml-muted); font-size: 14px; margin: 0 0 14px; flex: 1; }
.ml-tool-card__meta { font-size: 12px; color: var(--ml-dim); margin-top: auto; }

.ml-badge {
  position: absolute; top: 20px; right: 20px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.ml-badge--live { background: rgba(52, 211, 153, .17); color: var(--ml-emerald); border: 1px solid rgba(52, 211, 153, .34); }
.ml-badge--soon { background: var(--ml-surface-2); color: var(--ml-dim); border: 1px solid var(--ml-line); }
.ml-page-head .ml-badge { position: static; display: inline-block; margin-bottom: 14px; }

.ml-level-card__count { font-family: "Space Grotesk", sans-serif; font-size: 2.4rem; color: var(--ml-accent, var(--ml-pink)); line-height: 1; margin-bottom: 8px; }
.ml-level-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.ml-level-card p { color: var(--ml-muted); font-size: 14px; margin: 0 0 15px; flex: 1; }

.ml-curric-card { flex-direction: row; padding: 0; }
.ml-curric-card__bar { width: 5px; background: var(--ml-accent, var(--ml-pink)); flex: none; }
.ml-curric-card__body { padding: 22px; position: relative; }
.ml-curric-card__meta { font-size: 12px; color: var(--ml-dim); display: flex; gap: 7px; margin-bottom: 8px; }
.ml-curric-card h3 { font-size: 1.16rem; margin-bottom: 9px; padding-right: 96px; }
.ml-curric-card p { color: var(--ml-muted); font-size: 14px; margin: 0 0 14px; }

/* ── CTA ─────────────────────────────────────────────────────────────── */
.ml-cta { padding: 20px 16px 84px; }
.ml-cta__in {
  max-width: 860px; margin: 0 auto; text-align: center;
  border: 1px solid var(--ml-line-strong); border-radius: 26px; padding: 52px 28px;
  background: linear-gradient(160deg, rgba(242, 11, 126, .13), rgba(255, 122, 84, .07));
}
.ml-cta h2 { font-size: clamp(1.55rem, 4vw, 2.3rem); margin-bottom: 14px; }
.ml-cta p { color: var(--ml-muted); max-width: 620px; margin: 0 auto 26px; }
.ml-cta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Page head / prose ───────────────────────────────────────────────── */
.ml-page-head { max-width: var(--ml-max); margin: 0 auto; padding: 48px 16px 8px; }
.ml-page-head h1 { font-size: clamp(2.05rem, 6vw, 3.2rem); margin-bottom: 14px; }
.ml-lead { color: var(--ml-muted); font-size: 1.06rem; max-width: 680px; margin: 0; }

.ml-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ml-dim); margin-bottom: 18px; }
.ml-crumbs a { color: var(--ml-muted); text-decoration: none; }
.ml-crumbs a:hover { color: var(--ml-coral); }

.ml-prose { max-width: 680px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ml-prose p { color: var(--ml-muted); margin: 0; }
.ml-note {
  border-left: 3px solid var(--ml-coral); padding: 12px 16px;
  background: var(--ml-surface); border-radius: 0 10px 10px 0; font-size: 14px;
}
.ml-empty { text-align: center; padding: 56px 20px; border: 1px dashed var(--ml-line-strong); border-radius: var(--ml-radius); }
.ml-empty h2 { font-size: 1.3rem; margin-bottom: 10px; }
.ml-empty p { color: var(--ml-muted); margin: 0 0 20px; }

/* ── Song page ───────────────────────────────────────────────────────── */
.ml-song-head { border-bottom: 1px solid var(--ml-line); padding: 42px 16px 30px; background: linear-gradient(180deg, color-mix(in srgb, var(--ml-accent, var(--ml-pink)) 12%, transparent), transparent); }
.ml-song-head__in { max-width: var(--ml-max); margin: 0 auto; }
.ml-song-head h1 { font-size: clamp(2.1rem, 7vw, 3.4rem); margin-bottom: 6px; }
.ml-song-head__artist { color: var(--ml-coral); font-size: 1rem; font-weight: 500; margin: 0 0 20px; }

.ml-song-head__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 20px; }
.ml-song-head__meta li {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 16px; border: 1px solid var(--ml-line); border-radius: var(--ml-radius-sm); background: var(--ml-surface);
  min-width: 104px;
}
.ml-song-head__meta small { font-size: 11px; color: var(--ml-dim); text-transform: uppercase; letter-spacing: .07em; }
.ml-song-head__meta strong { font-family: "Space Grotesk", sans-serif; font-size: 1.16rem; }
/* Shown only while the song is transposed: the key it is written in, which
   is the one the theory note and the tips below refer to. */
.ml-key-origin { font-size: 11.5px; color: var(--ml-dim); font-style: normal; }
.ml-song-head__sum { color: var(--ml-muted); max-width: 720px; margin: 0 0 16px; }

.ml-goal { display: flex; flex-direction: column; gap: 3px; border-left: 3px solid var(--ml-accent, var(--ml-pink)); padding: 10px 16px; background: var(--ml-surface); border-radius: 0 10px 10px 0; margin: 0; max-width: 720px; font-size: 14.5px; }
.ml-goal span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ml-dim); }

/* Instrument tabs: sticky right under the nav, horizontally scrollable. */
.ml-instr-bar {
  position: sticky; top: var(--ml-nav-h); z-index: 40;
  display: flex; gap: 8px; padding: 12px 16px;
  max-width: var(--ml-max); margin: 0 auto;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: var(--ml-nav-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.ml-instr-bar::-webkit-scrollbar { display: none; }
.ml-instr-tab {
  flex: none; padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--ml-line-strong); background: var(--ml-surface);
  color: var(--ml-muted); font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; min-height: 44px;
  transition: background .18s, color .18s, transform .14s;
}
.ml-instr-tab:hover { color: var(--ml-text); }
.ml-instr-tab.is-active { background: var(--ml-grad); color: #fff; border-color: transparent; }

/* Toolbar */
.ml-tools {
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: var(--ml-max); margin: 0 auto; padding: 4px 16px 18px;
}
.ml-tools[hidden] { display: none; }
.ml-tool {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; min-height: 46px;
  border: 1px solid var(--ml-line); border-radius: 13px; background: var(--ml-surface);
  font-family: inherit; font-size: 13.5px; color: var(--ml-text);
}
.ml-tool--btn { cursor: pointer; transition: background .18s, border-color .18s; }
.ml-tool--btn:hover { background: var(--ml-surface-2); }
.ml-tool--btn[aria-pressed="true"] { background: var(--ml-grad); border-color: transparent; color: #fff; }
/* Auto-scroll held while the page is being moved by hand: still armed, so
   the button stays pressed and only dims for the moment it waits. */
.ml-tool--btn.is-waiting { opacity: .62; }
.ml-tool__label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ml-dim); }
.ml-tool__icon { display: grid; place-items: center; }
.ml-tool__icon svg { width: 18px; height: 18px; }

.ml-stepper { display: flex; align-items: center; gap: 4px; }
.ml-step {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--ml-line-strong); background: var(--ml-surface-2);
  color: var(--ml-text); font-size: 18px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; font-family: inherit;
}
.ml-step:hover { background: var(--ml-accent, var(--ml-pink)); color: #fff; }
.ml-stepper output { min-width: 40px; text-align: center; font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 600; }

.ml-beats { display: flex; gap: 4px; }
.ml-beats i { width: 7px; height: 7px; border-radius: 50%; background: var(--ml-dot); transition: transform .08s, background .08s; }
.ml-beats i.is-on { background: var(--ml-dot-on); transform: scale(1.5); }
/* On the pressed (gradient) button the dots are always white. */
.ml-tool--btn[aria-pressed="true"] .ml-beats i { background: rgba(255, 255, 255, .45); }
.ml-tool--btn[aria-pressed="true"] .ml-beats i.is-on { background: #fff; }

/* Panels */
.ml-panel { max-width: var(--ml-max); margin: 0 auto; padding: 8px 16px 40px; }
.ml-panel[hidden] { display: none; }
.ml-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
.ml-panel__head h2 { font-size: 1.55rem; }
.ml-panel__facts { display: flex; flex-wrap: wrap; gap: 7px; }
.ml-chip { font-size: 12px; color: var(--ml-muted); padding: 5px 11px; border: 1px solid var(--ml-line); border-radius: 999px; background: var(--ml-surface); }

.ml-block { margin-bottom: 30px; }

/* Chord diagrams */
.ml-diagrams { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.ml-diagram {
  background: var(--ml-surface); border: 1px solid var(--ml-line); border-radius: var(--ml-radius-sm);
  padding: 12px 8px 10px; text-align: center;
}
.ml-diagram__name { font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.ml-diagram svg { width: 100%; height: auto; max-width: 104px; display: block; margin: 0 auto; color: var(--ml-text); }
.ml-diagram__notes { font-size: 11.5px; color: var(--ml-dim); margin-top: 7px; }

/* Chord zoom: the chord, big, over a chord chip (hover or long press). */
.ml-chord[data-chord] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (hover: hover) { .ml-chord[data-chord] { cursor: zoom-in; } }
.ml-chord-zoom {
  position: fixed; z-index: 70; pointer-events: none;
  border-radius: 16px; background: var(--ml-popover-bg); box-shadow: var(--ml-shadow);
  animation: ml-zoom-in .12s ease-out;
}
.ml-chord-zoom[hidden] { display: none; }
.ml-chord-zoom .ml-diagram { width: 200px; padding: 14px 14px 12px; border-color: var(--ml-line-strong); background: var(--ml-popover-bg); }
.ml-chord-zoom .ml-diagram__name { font-size: 1.9rem; margin-bottom: 10px; }
.ml-chord-zoom .ml-diagram svg { max-width: 172px; }
.ml-chord-zoom .ml-diagram__notes { font-size: 14px; margin-top: 10px; color: var(--ml-muted); }
.ml-chord-zoom[data-kind="piano"] .ml-diagram,
.ml-chord-zoom[data-kind="pentagrama"] .ml-diagram { width: 240px; }
.ml-chord-zoom[data-kind="piano"] .ml-diagram svg,
.ml-chord-zoom[data-kind="pentagrama"] .ml-diagram svg { max-width: 212px; }
.ml-chord-zoom .ml-diagram--bare { min-height: 0; }
@keyframes ml-zoom-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ml-chord-zoom { animation: none; } }
@media print { .ml-chord-zoom { display: none !important; } }

/* Rhythm pattern */
.ml-pattern { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ml-pattern li {
  flex: 1; min-width: 46px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 4px; border-radius: 11px;
  border: 1px solid var(--ml-line); background: var(--ml-surface);
}
.ml-pattern li.is-hit { border-color: color-mix(in srgb, var(--ml-accent, var(--ml-pink)) 44%, transparent); background: color-mix(in srgb, var(--ml-accent, var(--ml-pink)) 13%, transparent); }
.ml-pattern li.is-playing { outline: 2px solid var(--ml-coral); outline-offset: 1px; }
.ml-pattern__sym { font-family: "Space Grotesk", sans-serif; font-size: 1.1rem; font-weight: 700; }
.ml-pattern__count { font-size: 11px; color: var(--ml-dim); }
.ml-hint { font-size: 12.5px; color: var(--ml-dim); margin: 0; }

/* Drum grid */
.ml-drumgrid { display: flex; flex-direction: column; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ml-drumrow { display: flex; align-items: center; gap: 7px; }
.ml-drumrow__name { flex: none; width: 76px; font-size: 12.5px; color: var(--ml-muted); }
.ml-drumrow__cells { display: flex; gap: 5px; flex: 1; }
.ml-cell {
  flex: 1; min-width: 30px; height: 36px; border-radius: 8px;
  border: 1px solid var(--ml-line); background: var(--ml-surface);
}
.ml-cell.is-on { background: var(--ml-grad); border-color: transparent; }
.ml-cell.is-playing { outline: 2px solid var(--ml-coral); outline-offset: 1px; }

/* Structure */
.ml-structure { display: flex; flex-direction: column; gap: 10px; }
.ml-sec {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--ml-line); border-radius: var(--ml-radius-sm); background: var(--ml-surface);
}
.ml-sec__name { flex: none; min-width: 116px; display: flex; flex-direction: column; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15px; }
.ml-sec__name small { font-family: Inter, sans-serif; font-size: 11px; color: var(--ml-dim); font-weight: 400; }
.ml-sec__bars { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.ml-bar {
  min-width: 62px; padding: 9px 12px; text-align: center;
  border: 1px solid var(--ml-line-strong); border-radius: 9px; background: var(--ml-bar-bg);
}
.ml-chord { font-family: "Space Grotesk", sans-serif; font-size: 1.02rem; font-weight: 700; color: var(--ml-coral); }

.ml-tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.ml-tips li { color: var(--ml-muted); font-size: 14.5px; }
.ml-tips li::marker { color: var(--ml-coral); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.ml-footer { position: relative; z-index: 1; border-top: 1px solid var(--ml-line); background: var(--ml-bg-2); padding: 52px 16px 0; }
.ml-footer__in { max-width: var(--ml-max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.ml-footer__brand { max-width: 330px; display: flex; gap: 13px; align-items: flex-start; }
.ml-footer__brand p { margin: 0; font-size: 13.5px; color: var(--ml-muted); }
.ml-footer__brand strong { display: block; font-family: "Space Grotesk", sans-serif; font-size: 16px; color: var(--ml-text); margin-bottom: 4px; }
.ml-footer__brand a { color: var(--ml-coral); }
.ml-footer__cols { display: flex; gap: 44px; flex-wrap: wrap; }
.ml-footer__cols h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ml-dim); margin-bottom: 12px; }
.ml-footer__cols div { display: flex; flex-direction: column; gap: 9px; }
.ml-footer__cols a { font-size: 14px; color: var(--ml-muted); text-decoration: none; }
.ml-footer__cols a:hover { color: var(--ml-coral); }
.ml-footer__bar {
  max-width: var(--ml-max); margin: 40px auto 0; padding: 18px 0 24px;
  border-top: 1px solid var(--ml-line);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ml-dim);
}

/* ── Responsive: phone and iPad ──────────────────────────────────────── */
@media (max-width: 900px) {
  .ml-burger { display: flex; }

  .ml-menu {
    position: fixed; inset: var(--ml-nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 14px 16px 24px;
    background: var(--ml-popover-bg); border-bottom: 1px solid var(--ml-line);
    max-height: calc(100vh - var(--ml-nav-h)); overflow-y: auto;
    transform: translateY(-14px); opacity: 0; visibility: hidden;
    transition: transform .2s, opacity .2s, visibility .2s;
  }
  .ml-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  .ml-menu__link { justify-content: space-between; padding: 14px 12px; font-size: 16px; min-height: 48px; }
  .ml-menu__link--sub svg { transition: transform .2s; }
  .ml-has-sub.is-open .ml-menu__link--sub svg { transform: rotate(180deg); }

  /* On touch the submenu is an accordion, never a hover flyout. */
  .ml-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: var(--ml-sub-bg); border-radius: 12px;
    display: none; margin: 2px 0 8px;
  }
  .ml-has-sub:hover .ml-sub, .ml-has-sub:focus-within .ml-sub { display: none; }
  .ml-has-sub.is-open .ml-sub { display: block; }

  .ml-btn--login { margin: 10px 0 0; justify-content: center; padding: 14px; font-size: 16px; }
  .ml-session { margin: 10px 0 0; }
  .ml-session__btn { width: 100%; max-width: none; padding: 8px 14px 8px 8px; }
  .ml-session__caret { margin-left: auto; }
  .ml-session__menu { position: static; width: auto; margin-top: 8px; box-shadow: none; }

  .ml-section__head { flex-direction: column; align-items: flex-start; }
  .ml-sec { flex-direction: column; align-items: stretch; }
  .ml-sec__name { flex-direction: row; align-items: baseline; gap: 8px; }
  .ml-bar { flex: 1; min-width: 56px; }
  .ml-curric-card h3 { padding-right: 0; }
  .ml-curric-card .ml-badge { position: static; display: inline-block; margin-bottom: 10px; }
}

@media (max-width: 560px) {
  .ml-hero { padding: 52px 16px 52px; }
  .ml-hero__cta .ml-btn { width: 100%; }
  .ml-hero__stats li { flex: 1; min-width: 96px; padding: 12px 14px; }
  .ml-section { padding: 48px 16px; }
  .ml-tools { gap: 8px; }
  /* At phone width the stepper tools get a full row each, otherwise the
     "Transponer" / "Tempo" labels are squeezed off the edge. */
  .ml-tool { min-width: 0; }
  .ml-tool:not(.ml-tool--btn) { flex: 1 1 100%; justify-content: space-between; }
  .ml-tool--btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .ml-drumrow__name { width: 58px; font-size: 11.5px; }
  .ml-diagrams { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); }
  .ml-footer__cols { gap: 28px; }
}

/* Keep the sticky instrument bar usable in landscape on a phone. */
@media (max-height: 520px) and (orientation: landscape) {
  .ml-instr-bar { position: static; }
}

@media print {
  .ml-nav, .ml-instr-bar, .ml-tools, .ml-footer, .ml-hero__glow, .ml-eq { display: none !important; }
  .ml-body { background: #fff; color: #000; }
  .ml-panel[hidden] { display: block !important; }
}


/* ── Provenance, riff and theory blocks ──────────────────────────────── */

/* The songbook distinguishes what came from the ensemble's notes from what was
   reconstructed by ear. That distinction is load-bearing for a musician, so it
   is visible rather than buried in a footnote. */
.ml-warn {
  display: flex; flex-direction: column; gap: 4px;
  border-left: 3px solid var(--ml-amber);
  padding: 11px 16px; margin: 0 0 16px; max-width: 720px;
  background: rgba(246, 167, 35, .09);
  border-radius: 0 10px 10px 0; font-size: 14px; color: var(--ml-muted);
}
.ml-warn span {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ml-amber); font-weight: 700;
}

.ml-order {
  display: flex; flex-direction: column; gap: 3px;
  margin: 14px 0 0; max-width: 720px; font-size: 13.5px; color: var(--ml-muted);
}
.ml-order span {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-dim);
}

.ml-chip--proposed {
  border-color: rgba(246, 167, 35, .4);
  background: rgba(246, 167, 35, .12);
  color: var(--ml-amber);
}

.ml-flag {
  display: inline-block; margin-bottom: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(246, 167, 35, .13); color: var(--ml-amber);
  border: 1px solid rgba(246, 167, 35, .32);
}

.ml-song-head__meta i {
  font-style: normal; font-size: 11px; color: var(--ml-dim); margin-top: 1px;
}
.ml-song-head__composer { color: var(--ml-muted); }

.ml-hint--lead { font-size: 14px; color: var(--ml-muted); margin-bottom: 8px; }

/* Riff tablature */
.ml-riff { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.ml-riff table {
  border-collapse: collapse; font-family: "Space Grotesk", monospace; font-size: 13px;
  min-width: 100%;
}
.ml-riff th {
  text-align: right; padding: 0 10px 0 0; color: var(--ml-dim);
  font-weight: 500; font-size: 11.5px; white-space: nowrap;
}
.ml-riff td {
  text-align: center; min-width: 34px; padding: 5px 2px;
  color: var(--ml-text); border-bottom: 1px solid var(--ml-line);
}
.ml-riff tr:last-child td { border-bottom: 0; }
.ml-riff td.is-note {
  color: var(--ml-coral); font-weight: 700;
  background: color-mix(in srgb, var(--ml-accent, var(--ml-pink)) 12%, transparent);
  border-radius: 5px;
}
.ml-riff .ml-riff__names td {
  color: var(--ml-dim); font-size: 11.5px; border-bottom: 0; padding-top: 7px;
}

/* ===========================================================================
   Chord colours — one swatch per pitch class, keyed by root (Am and A share).
   Hue follows the chromatic circle so the roots that share a progression
   (C G Am F · D F#m Bm A · Am Dm E · Em C G D) land far apart on the wheel.
   Dark values are bright on the night background; the day theme overrides
   them with the darker shades below so chord names stay AA on light paper.
   =========================================================================== */
:root {
  --ml-root-c:  #ff6b6b;
  --ml-root-cs: #ff9f43;
  --ml-root-d:  #ffd43b;
  --ml-root-ds: #c0eb75;
  --ml-root-e:  #51cf66;
  --ml-root-f:  #38d9a9;
  --ml-root-fs: #22d3ee;
  --ml-root-g:  #4dabf7;
  --ml-root-gs: #748ffc;
  --ml-root-a:  #b197fc;
  --ml-root-as: #e599f7;
  --ml-root-b:  #ff8fab;
}

.ml-root-c, .ml-chord.ml-root-c { color: var(--ml-root-c); }
.ml-root-cs, .ml-chord.ml-root-cs { color: var(--ml-root-cs); }
.ml-root-d, .ml-chord.ml-root-d { color: var(--ml-root-d); }
.ml-root-ds, .ml-chord.ml-root-ds { color: var(--ml-root-ds); }
.ml-root-e, .ml-chord.ml-root-e { color: var(--ml-root-e); }
.ml-root-f, .ml-chord.ml-root-f { color: var(--ml-root-f); }
.ml-root-fs, .ml-chord.ml-root-fs { color: var(--ml-root-fs); }
.ml-root-g, .ml-chord.ml-root-g { color: var(--ml-root-g); }
.ml-root-gs, .ml-chord.ml-root-gs { color: var(--ml-root-gs); }
.ml-root-a, .ml-chord.ml-root-a { color: var(--ml-root-a); }
.ml-root-as, .ml-chord.ml-root-as { color: var(--ml-root-as); }
.ml-root-b, .ml-chord.ml-root-b { color: var(--ml-root-b); }

/* ── Tools row additions ─────────────────────────────────────────────── */
.ml-tool-hint {
  flex-basis: 100%; margin: 2px 0 0;
  font-size: 12.5px; line-height: 1.45; color: var(--ml-muted);
}
.ml-tool-hint[hidden] { display: none; }
.ml-step[data-lyrsize] { width: auto; min-width: 34px; padding: 0 8px; font-size: 13px; font-weight: 700; }

/* ── Chord diagrams: themed parts drawn from JS ──────────────────────── */
.ml-key--white { fill: var(--ml-key-white); }
.ml-key--black { fill: var(--ml-key-black); }
/* Lit keys are always brand pink: currentColor would be near-black in day
   mode and a lit black key would look exactly like an unlit one. */
.ml-key.is-on { fill: var(--ml-pink); }
.ml-finger { fill: var(--ml-bg); }

/* Compact strip at the top of the lyrics tab */
.ml-block--strip { margin-bottom: 22px; }
/* The strip heading doubles as the disclosure control. */
.ml-strip__summary {
  display: flex; align-items: center; gap: 8px; margin-bottom: 0;
  cursor: pointer; list-style: none; user-select: none;
}
.ml-strip__summary::-webkit-details-marker { display: none; }
.ml-strip__summary::after {
  content: ''; width: 8px; height: 8px; margin-left: 2px;
  border-right: 2px solid var(--ml-dim); border-bottom: 2px solid var(--ml-dim);
  transform: rotate(-45deg); transition: transform .15s;
}
.ml-block--strip[open] > .ml-strip__summary::after { transform: rotate(45deg); }
.ml-block--strip[open] > .ml-strip__summary { margin-bottom: 12px; }
.ml-strip__count { color: var(--ml-dim); font-weight: 500; }
.ml-diagrams--strip { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; }
.ml-diagrams--strip .ml-diagram { padding: 9px 6px 8px; }
.ml-diagrams--strip .ml-diagram svg { max-width: 84px; }
.ml-diagrams--strip .ml-diagram__name { font-size: .98rem; margin-bottom: 5px; }

/* ===========================================================================
   Lyrics sheet — chords sit on their own row above the syllable they change on
   (cifra style). Each [chord]text chunk is a two-row inline cell, so when a
   long line wraps on a phone the chord stays glued to its syllable instead of
   drifting the way a monospaced two-line layout does.
   =========================================================================== */
.ml-note--lyrics { margin-bottom: 18px; }

.ml-lyrics {
  /* --ml-lyr-size is set by the A−/A+ stepper (music-song.js); 19px default. */
  font-size: var(--ml-lyr-size, 19px);
  line-height: 1.7;
  letter-spacing: .005em;
  max-width: 72ch;
  color: var(--ml-text);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 720px) {
  .ml-lyrics { font-size: calc(var(--ml-lyr-size, 19px) * 1.1); }
}

.ml-lyr-section {
  font-family: "Space Grotesk", sans-serif;
  font-size: .78em; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ml-dim);
  margin: 1.7em 0 .55em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--ml-line);
}
.ml-lyr-section:first-child { margin-top: .2em; }

.ml-lyr-comment {
  font-size: .82em; font-style: italic; color: var(--ml-muted);
  margin: .1em 0 .5em;
}

/* Entry cue: the first words of a part, so the band knows where it starts
   before the full lyric is pasted in. Reads as sung text, not as a note. */
.ml-lyr-cue {
  margin: 0 0 .4em;
  font-style: italic;
  color: var(--ml-text);
}
.ml-lyr-cue::before { content: '♪ '; color: var(--ml-pink); font-style: normal; }

.ml-lyr-blank { height: .8em; }

.ml-lyr-line { display: block; margin: .1em 0; white-space: pre-wrap; }

/* The anchor: the chord card and the first word after it, one unbreakable
   inline-block, so a card never ends a line with its word on the next.
   Baseline-aligned so it sits on the line of the surrounding text. */
.ml-lyr-chunk {
  display: inline-block;
  vertical-align: baseline;
  white-space: pre;            /* the anchor word never breaks internally */
}

/* Everything after the first word flows as plain text and wraps at its own
   spaces, so a long line never leaves a ragged gap on a phone. */
.ml-lyr-rest { white-space: pre-wrap; }

/* Chord cards: the chord name in a rounded box, white by day and dark by
   night, framed in the chord's own colour. The inline card sits in the line
   right before the word it is played on, centred on the text, so the eye
   meets it while singing; the chord-only rows use the same card. */
.ml-lyr-chord, .ml-lyr-bar .ml-chord {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-width: 2.4em; min-height: 1.8em; padding: 0 .5em;
  border: 1.5px solid color-mix(in srgb, currentColor 48%, transparent);
  border-radius: 9px; background: var(--ml-bar-bg);
  font-family: "Space Grotesk", sans-serif; font-weight: 700; line-height: 1;
  white-space: nowrap;
}
.ml-lyr-chord {
  vertical-align: middle; position: relative; top: -.08em;
  margin: 0 .42em .1em 0;
  font-size: .78em;
}

.ml-lyr-text { display: inline; }

/* Instrumental bars: a row of chord cards */
.ml-lyr-bars { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: .2em 0 .5em; }

/* ── Riff card: a TAB block of the sheet (src/js/lib/sheet-riff.js) ──────
   Without JavaScript it is the raw TAB, never wrapped; enhanced, it is the
   Mástil / TAB card. Note colours come from --ml-root-* through --note. */
.ml-tabriff { margin: .4em 0 1em; padding: 12px; border: 1px solid var(--ml-line); border-radius: 18px; background: var(--ml-bg-2); font-size: 15px; line-height: 1.4; }
.ml-tabriff__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ml-tabriff__title { display: block; font: 700 16px "Space Grotesk", sans-serif; color: var(--ml-text); }
.ml-tabriff__sub { display: block; font-size: 12px; color: var(--ml-dim); }
.ml-tabriff__raw { margin: 0; overflow-x: auto; white-space: pre; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ml-text); }
.ml-tabriff__rawbox { margin-top: 10px; font-size: 12.5px; color: var(--ml-dim); }
.ml-tabriff__rawbox summary { cursor: pointer; }
.ml-tabriff__rawbox .ml-tabriff__raw { margin-top: 6px; padding: 8px; border-radius: 10px; background: var(--ml-surface); }
.ml-tabriff__seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--ml-line); border-radius: 11px; background: var(--ml-surface); flex: none; }
.ml-tabriff__segb { min-height: 32px; padding: 5px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--ml-muted); font: 700 12.5px Inter, sans-serif; cursor: pointer; }
.ml-tabriff__segb.is-on { background: var(--ml-grad); color: #fff; }
.ml-tabriff button:focus-visible { outline: 2px solid var(--ml-coral); outline-offset: 2px; }

/* Mástil */
.ml-tabriff__board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ml-tabriff__neck { display: block; width: 100%; min-width: 300px; height: auto; }
.ml-tabriff__wood { fill: color-mix(in srgb, var(--ml-bg-2) 70%, #c89a6a); }
.ml-tabriff__fret { stroke: var(--ml-line-strong); stroke-width: 1.5; }
.ml-tabriff__nut { stroke: var(--ml-text); stroke-width: 4; }
.ml-tabriff__string { stroke: color-mix(in srgb, var(--ml-muted) 70%, transparent); }
.ml-tabriff__inlay { fill: color-mix(in srgb, var(--ml-muted) 35%, transparent); }
.ml-tabriff__slabel { fill: var(--ml-text); font: 700 11px Inter, sans-serif; }
.ml-tabriff__fnum { fill: var(--ml-dim); font: 600 10.5px Inter, sans-serif; }
.ml-tabriff__dot { color: var(--note); opacity: .38; transition: opacity .15s; }
.ml-tabriff__dot.is-phrase, .ml-tabriff__dot.is-next, .ml-tabriff__dot.is-now { opacity: 1; }
.ml-tabriff__halo { fill: var(--note); opacity: 0; transition: opacity .15s; }
.ml-tabriff__disc { fill: var(--ml-bg-2); stroke: var(--note); stroke-width: 2; }
.ml-tabriff__dtext { fill: var(--note); font: 800 10px Inter, sans-serif; }
.ml-tabriff__dot.is-next .ml-tabriff__disc { stroke-width: 3; stroke-dasharray: 3 2; }
.ml-tabriff__dot.is-now .ml-tabriff__halo { opacity: .25; }
.ml-tabriff__dot.is-now .ml-tabriff__disc { fill: var(--note); }
.ml-tabriff__dot.is-now .ml-tabriff__dtext { fill: #fff; }
.ml-tabriff__arrow { fill: none; stroke: var(--ml-pink); stroke-width: 2; stroke-dasharray: 4 3; opacity: 0; }
.ml-tabriff__arrow.is-on { opacity: 1; }
.ml-tabriff__arrowhead { fill: var(--ml-pink); }

.ml-tabriff__nowrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 10px 0 8px; }
.ml-tabriff__now { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--ml-line); border-radius: 14px; }
.ml-tabriff__now small { display: block; font: 800 10px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-dim); }
.ml-tabriff__now strong { display: block; font-size: 13px; line-height: 1.3; color: var(--ml-text); }
.ml-tabriff__latin { display: block; font-size: 11.5px; color: var(--ml-dim); }
.ml-tabriff__disc-big { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 21px; background: var(--note, var(--ml-surface-2)); color: #fff; font: 800 15px "Space Grotesk", sans-serif; }
.ml-tabriff__now--next .ml-tabriff__disc-big { background: var(--ml-bg-2); color: var(--note, var(--ml-dim)); border: 2px dashed var(--note, var(--ml-line-strong)); }

.ml-tabriff__strips { display: grid; gap: 6px; }
.ml-tabriff__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ml-tabriff__phrase { flex-basis: 100%; font: 800 10px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-dim); }
.ml-tabriff__on { font: 800 10.5px Inter, sans-serif; font-style: normal; color: var(--ml-dim); margin: 0 1px 0 4px; }
.ml-tabriff__chip { min-width: 30px; height: 32px; padding: 0 6px; border: 1.5px solid var(--note); border-radius: 8px; background: var(--ml-bg-2); color: var(--note); font: 800 13px "Space Grotesk", sans-serif; cursor: pointer; transition: transform .1s; }
.ml-tabriff__chip.is-done { opacity: .38; }
.ml-tabriff__chip.is-now { background: var(--ml-pink); border-color: var(--ml-pink); color: #fff; transform: translateY(-2px); }

/* TAB */
.ml-tabriff__tabs { display: grid; gap: 8px; }
.ml-tabriff__system { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ml-tabriff__staff { display: block; width: 100%; min-width: 300px; height: auto; }
.ml-tabriff__tline { stroke: var(--ml-line-strong); stroke-width: 1; }
.ml-tabriff__tbar { stroke: var(--ml-text); stroke-width: 1.5; }
.ml-tabriff__tend { fill: var(--ml-text); }
.ml-tabriff__tlabel { fill: var(--ml-dim); font: 700 9px Inter, sans-serif; }
.ml-tabriff__tcol { fill: var(--ml-pink); opacity: 0; }
.ml-tabriff__tcol.is-now { opacity: .16; }
.ml-tabriff__mask { fill: var(--ml-bg-2); }
.ml-tabriff__tnote { cursor: pointer; }
.ml-tabriff__fret { font: 800 11px "Space Grotesk", sans-serif; }
.ml-tabriff__tnote.is-now .ml-tabriff__fret { font-size: 13px; }
.ml-tabriff__name { font: 700 8.5px Inter, sans-serif; }

/* Controls */
.ml-tabriff__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ml-tabriff__btn { width: 40px; height: 40px; border: 1px solid var(--ml-line-strong); border-radius: 11px; background: var(--ml-bg-2); color: var(--ml-muted); font-size: 15px; cursor: pointer; }
.ml-tabriff__btn.is-on { background: var(--ml-grad); color: #fff; border-color: transparent; }
.ml-tabriff__play { width: 46px; height: 46px; border: 0; border-radius: 23px; background: var(--ml-grad); color: #fff; font-size: 16px; cursor: pointer; box-shadow: 0 6px 14px color-mix(in srgb, var(--ml-pink) 30%, transparent); }
.ml-tabriff__speed { margin-left: auto; }
.ml-tabriff__hint { margin: 8px 0 0; font-size: 12px; color: var(--ml-dim); }
@media (max-width: 420px) {
  .ml-tabriff { padding: 10px; }
  .ml-tabriff__speed { margin-left: 0; }
  .ml-tabriff__now { padding: 7px 8px; gap: 8px; }
  .ml-tabriff__disc-big { width: 36px; height: 36px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-tabriff__dot, .ml-tabriff__halo, .ml-tabriff__chip { transition: none; }
}
.ml-lyr-bar { display: inline-flex; font-size: .9em; }
/* 1em (not the 1.02rem of the base .ml-chord) so the A−/A+ stepper scales
   the chord names inside the cards too, not only the cards. */
.ml-lyr-bar .ml-chord { font-size: 1em; }

@media print {
  .ml-lyrics { font-size: 13pt; max-width: none; }
  .ml-lyr-bar .ml-chord, .ml-lyr-chord { background: #fff; border-color: #999; }
}

/* ===========================================================================
   Day theme. Activated by html[data-ml-theme="light"] (set before first paint
   by music-theme.js, same key and schedule as stackfire.com). Every value here
   was checked against the day background (#fdf8fb):
     text 15.6:1 · muted 7.6:1 · dim 4.9:1 · coral-as-text 4.6:1 · chord roots ≥ 4.5:1
   Accents darken so the badge and chip text they colour stays readable on
   light surfaces, and the gradient deepens when it is used as text.
   =========================================================================== */
[data-ml-theme="light"] {
  --ml-bg: #fdf8fb;
  --ml-bg-2: #f6edf3;
  --ml-surface: rgba(26, 9, 20, .04);
  --ml-surface-2: rgba(26, 9, 20, .075);
  --ml-line: rgba(26, 9, 20, .11);
  --ml-line-strong: rgba(26, 9, 20, .2);

  --ml-text: #1a0d16;
  --ml-muted: #5a4655;
  --ml-dim: #7a6474;

  --ml-pink: #d10a6e;
  --ml-rose: #be123c;
  --ml-coral: #c9421a;
  --ml-grad: linear-gradient(135deg, #e0107a, #ef5f36);
  --ml-grad-text: linear-gradient(135deg, #b80c61, #bf3f16);

  --ml-violet: #6d28d9;
  --ml-amber: #b45309;
  --ml-cyan: #0e7490;
  --ml-emerald: #047857;

  --ml-shadow: 0 18px 50px rgba(26, 9, 20, .14);
  --ml-nav-bg: rgba(253, 248, 251, .86);
  --ml-popover-bg: #ffffff;
  --ml-bar-bg: #ffffff;
  --ml-sub-bg: rgba(26, 9, 20, .05);
  --ml-dot: rgba(26, 9, 20, .25);
  --ml-dot-on: #1a0d16;
  --ml-key-white: #ffffff;
  --ml-key-black: #2a1a25;
  --ml-alt-wash: rgba(26, 9, 20, .03);
  --ml-on-accent: #ffffff;
  --ml-wash-opacity: .5;

  --mlb-orange: #b05739;   /* Lucy's tone, darkened for text on light surfaces */

  /* Chord roots: Open Color 8/9 shades, all ≥ 4.5:1 on the day background. */
  --ml-root-c:  #c92a2a;
  --ml-root-cs: #c9420d;
  --ml-root-d:  #8a6e00;
  --ml-root-ds: #4e7d0b;
  --ml-root-e:  #28813a;
  --ml-root-f:  #08815c;
  --ml-root-fs: #0b7285;
  --ml-root-g:  #1971c2;
  --ml-root-gs: #3b5bdb;
  --ml-root-a:  #6741d9;
  --ml-root-as: #9c36b5;
  --ml-root-b:  #c2255c;
}

/* Elements whose dark styling was decorative and reads too heavy on paper. */
[data-ml-theme="light"] .ml-eq { opacity: .2; }
[data-ml-theme="light"] .ml-hero__glow { background: radial-gradient(closest-side, rgba(242, 11, 126, .22), transparent 72%); }
[data-ml-theme="light"] .ml-cta__in { background: linear-gradient(160deg, rgba(242, 11, 126, .08), rgba(255, 122, 84, .05)); }
[data-ml-theme="light"] .ml-song-head { background: linear-gradient(180deg, color-mix(in srgb, var(--ml-accent, var(--ml-pink)) 9%, transparent), transparent); }
[data-ml-theme="light"] .ml-btn--primary { box-shadow: 0 10px 24px rgba(209, 10, 110, .22); }
[data-ml-theme="light"] .ml-btn--primary:hover { box-shadow: 0 14px 32px rgba(209, 10, 110, .3); }
[data-ml-theme="light"] .ml-badge--live { background: rgba(4, 120, 87, .1); border-color: rgba(4, 120, 87, .3); }
[data-ml-theme="light"] .ml-warn { background: rgba(180, 83, 9, .08); }
[data-ml-theme="light"] .ml-flag,
[data-ml-theme="light"] .ml-chip--proposed { background: rgba(180, 83, 9, .1); border-color: rgba(180, 83, 9, .3); }
[data-ml-theme="light"] .ml-tool-card__icon { background: color-mix(in srgb, var(--ml-accent, var(--ml-pink)) 12%, transparent); }
[data-ml-theme="light"] .ml-pattern li.is-hit { background: color-mix(in srgb, var(--ml-accent, var(--ml-pink)) 10%, transparent); }
[data-ml-theme="light"] .ml-riff td.is-note { background: color-mix(in srgb, var(--ml-accent, var(--ml-pink)) 10%, transparent); }
[data-ml-theme="light"] .mlb-fab { box-shadow: 0 14px 34px rgba(26, 9, 20, .16); }
[data-ml-theme="light"] .mlb-panel { box-shadow: 0 26px 70px rgba(26, 9, 20, .18); }
[data-ml-theme="light"] .mlb-head { background: linear-gradient(180deg, rgba(194, 96, 63, .1), transparent); }
[data-ml-theme="light"] .mlb-chip { background: rgba(194, 96, 63, .08); border-color: rgba(194, 96, 63, .35); }
[data-ml-theme="light"] .mlb-chip:hover { background: rgba(194, 96, 63, .16); }
[data-ml-theme="light"] .mlb-fab { border-color: rgba(194, 96, 63, .45); }
/* Containers that sat on the page as 4% tints now need a step more so their
   shape survives on near-white paper. */
[data-ml-theme="light"] .ml-sec,
[data-ml-theme="light"] .ml-note,
[data-ml-theme="light"] .ml-goal,
[data-ml-theme="light"] .ml-cell,
[data-ml-theme="light"] .mlb-msg--bot .mlb-bubble,
[data-ml-theme="light"] .ml-song-card .ml-instr-pills li,
[data-ml-theme="light"] .ml-tags li { background: var(--ml-surface-2); }
[data-ml-theme="light"] .ml-cell { border-color: var(--ml-line-strong); }
/* The tint above must not hide a hit: an on cell keeps the accent. */
[data-ml-theme="light"] .ml-cell.is-on { background: var(--ml-grad); border-color: transparent; }
[data-ml-theme="light"] .ml-lyr-bar .ml-chord, [data-ml-theme="light"] .ml-lyr-chord { box-shadow: 0 1px 2px rgba(26, 9, 20, .08); }
[data-ml-theme="light"] .ml-bar { box-shadow: 0 1px 2px rgba(26, 9, 20, .06); }
/* Brand washes tint the paper without greying the text on top of them. */
[data-ml-theme="light"] .ml-body::before { mix-blend-mode: multiply; }

/* ── Theme toggle button in the nav ─────────────────────────────────── */
.ml-theme {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--ml-line); border-radius: 11px;
  background: var(--ml-surface); color: var(--ml-muted);
  cursor: pointer; padding: 0;
  transition: color .18s, background .18s, border-color .18s;
}
.ml-theme:hover { color: var(--ml-text); background: var(--ml-surface-2); border-color: var(--ml-line-strong); }
.ml-theme svg { display: none; }
/* Show the icon of the mode you would switch TO. */
[data-ml-theme="dark"] .ml-theme__sun { display: block; }
[data-ml-theme="light"] .ml-theme__moon { display: block; }
html:not([data-ml-theme]) .ml-theme__sun { display: block; }

@media (max-width: 900px) {
  .ml-theme { order: 1; }
  .ml-burger { order: 2; }
}

/* ===========================================================================
   Tonalidad card + key picker.
   =========================================================================== */
.ml-song-head__key { cursor: pointer; position: relative; padding-right: 28px; }
.ml-song-head__key::after {
  content: ''; position: absolute; right: 13px; top: 15px; width: 7px; height: 7px;
  border-right: 2px solid var(--ml-dim); border-bottom: 2px solid var(--ml-dim); transform: rotate(45deg);
}
.ml-song-head__key:hover, .ml-song-head__key:focus-visible { border-color: var(--ml-pink); outline: none; }
.ml-keypick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: -8px 0 20px; max-width: 440px; }
.ml-keypick[hidden] { display: none; }
.ml-keypick__key {
  padding: 9px 0; border: 1px solid var(--ml-line-strong); border-radius: 9px;
  background: var(--ml-surface); color: var(--ml-text); cursor: pointer;
  font: 600 14px "Space Grotesk", sans-serif;
}
.ml-keypick__key:hover { border-color: var(--ml-pink); }
.ml-keypick__key.is-current { background: var(--ml-grad); color: #fff; border-color: transparent; }

/* ===========================================================================
   Ensamble tab: sign-in, toolbar, video, editor.
   =========================================================================== */
.ml-ens { max-width: 760px; }
.ml-ens__kicker {
  font-family: "Space Grotesk", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ml-pink); margin: 0 0 6px;
}
.ml-ens__lead { color: var(--ml-muted); margin: 0 0 6px; }
.ml-ens__login {
  display: flex; flex-direction: column; gap: 10px; max-width: 420px; padding: 18px;
  border: 1px solid var(--ml-line); border-radius: 14px; background: var(--ml-surface);
}
.ml-input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--ml-line-strong); border-radius: 10px;
  background: var(--ml-bg-2); color: var(--ml-text); font: inherit; font-size: 16px; /* 16px: no zoom on iOS */
}
.ml-input:focus { outline: none; border-color: var(--ml-pink); }
.ml-input--area {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5;
  min-height: 300px; resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
.ml-ens__error { color: var(--ml-coral); font-size: 14px; margin: 0; }
.ml-ens__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
/* Letra | Partitura, at the right end of the bar, only when the sheet has a score. */
.ml-ens__seg { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-left: auto; }
.ml-ens__seg .ml-side__segbtn { min-height: 36px; padding: 6px 14px; }

/* The score. abcjs draws in currentColor, so the ink follows the theme; the
   SVG scales to the box (responsive: resize) and reflows on width changes. */
.ml-score { margin: 4px 0 20px; color: var(--ml-text); overflow-x: auto; }
.ml-score svg { display: block; max-width: 100%; height: auto; }
@media print {
  .ml-score { color: #000; }
  .ml-ens__seg { display: none; }
}
/* Where the sheet stands on this device, as one button that opens the three
   moves. Green cloud: shown from the cloud, nothing kept here. Green phone: a
   copy kept here, in step with the cloud. Amber phone: a draft the cloud has
   not seen. A coral dot on top: the cloud moved on since the draft. */
.ml-ens__store { position: relative; }
.ml-ens__src {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--ml-line); background: var(--ml-surface); color: var(--ml-muted); padding: 0;
  cursor: pointer; font-family: inherit; transition: background .18s, box-shadow .18s;
}
.ml-ens__src svg { width: 20px; height: 20px; }
.ml-ens__src:hover { background: var(--ml-surface-2); }
.ml-ens__src[aria-expanded="true"] { background: var(--ml-surface-2); }
.ml-ens__src.is-cloud, .ml-ens__src.is-device { color: var(--ml-emerald); border-color: color-mix(in srgb, var(--ml-emerald) 45%, transparent); }
.ml-ens__src.is-dirty {
  color: var(--ml-amber); border-color: color-mix(in srgb, var(--ml-amber) 55%, transparent);
  background: color-mix(in srgb, var(--ml-amber) 12%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ml-amber) 14%, transparent);
}
.ml-ens__src-dot {
  position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ml-coral); border: 2px solid var(--ml-bg);
}
.ml-ens__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(320px, calc(100vw - 32px));
  padding: 6px; border-radius: 14px; border: 1px solid var(--ml-line);
  background: var(--ml-popover-bg); box-shadow: var(--ml-shadow);
}
.ml-ens__menu[hidden] { display: none; }
.ml-ens__menu-head {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 12px;
  border-bottom: 1px solid var(--ml-line); margin-bottom: 6px;
}
.ml-ens__menu-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--ml-emerald); }
.ml-ens__menu-dot.is-dirty { background: var(--ml-amber); }
.ml-ens__menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ml-ens__menu-text strong { font-family: "Space Grotesk", sans-serif; font-size: 14px; color: var(--ml-text); }
.ml-ens__menu-text small { font-size: 12px; color: var(--ml-muted); line-height: 1.4; overflow-wrap: anywhere; }
.ml-ens__menu-refresh {
  flex: none; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--ml-line);
  background: transparent; color: var(--ml-muted); font: 600 12px Inter, sans-serif; cursor: pointer;
}
.ml-ens__menu-refresh:hover:not(:disabled) { color: var(--ml-text); background: var(--ml-surface-2); }
.ml-ens__menu-refresh:disabled { opacity: .6; cursor: default; }
.ml-ens__menu-list { display: flex; flex-direction: column; gap: 2px; }
.ml-ens__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
  padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ml-text);
  font: inherit; cursor: pointer; transition: background .15s;
}
.ml-ens__item:hover:not(:disabled) { background: var(--ml-surface-2); }
.ml-ens__item:focus-visible { background: var(--ml-surface-2); outline: 2px solid var(--ml-coral); outline-offset: -2px; }
.ml-ens__item:disabled { cursor: default; opacity: .7; }
.ml-ens__item-label { font-weight: 600; font-size: 14px; }
.ml-ens__item-detail { font-size: 12px; color: var(--ml-muted); line-height: 1.4; }
.ml-ens__item.is-danger:not(:disabled) .ml-ens__item-label { color: var(--ml-coral); }
.ml-ens__field-hint { font-size: 12px; color: var(--ml-dim); line-height: 1.4; }
@media print { .ml-ens__store { display: none; } }
.ml-btn--sm { padding: 8px 12px; font-size: 13.5px; border-radius: 10px; }
.ml-chip--ok { border-color: color-mix(in srgb, var(--ml-emerald) 55%, transparent); color: var(--ml-emerald); }
.ml-ens__toast {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 10px;
  background: var(--ml-surface-2); color: var(--ml-text); font-size: 14px;
}
.ml-ens__toast.is-error { border-left: 3px solid var(--ml-coral); }
.ml-ens__chords { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 14px; }
.ml-ens__chord { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.02rem; }
.ml-ens__label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-dim); margin-right: 4px; }
.ml-ens__editor { display: flex; flex-direction: column; gap: 12px; }
.ml-ens__field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ml-muted); }
.ml-ens__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .ml-ens__grid { grid-template-columns: 1fr; } }
.ml-ens__row { display: flex; flex-wrap: wrap; gap: 8px; }
.ml-ens__preview { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--ml-line); }
/* Which ensemble's sheet (a person in several). */
.ml-ens__pick { width: auto; max-width: 220px; padding: 7px 10px; font-size: 14px; }

/* ── Song manager (/canciones/gestor) ─────────────────────────────────── */
.ml-mgr { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.ml-mgr .ml-input--area { min-height: 84px; white-space: pre-wrap; font-family: inherit; font-size: 15px; }
.ml-mgr__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ml-mgr__head .ml-ens__field { min-width: min(100%, 320px); }
.ml-mgr__head .ml-ens__seg { margin-left: 0; }
.ml-mgr__bar { align-items: center; }
.ml-mgr__bar .ml-input { width: auto; max-width: 100%; }
.ml-mgr__panel {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border: 1px solid var(--ml-line); border-radius: 14px; background: var(--ml-surface);
}
.ml-mgr__search { display: flex; gap: 8px; }
.ml-mgr__search .ml-input { flex: 1; min-width: 0; }
.ml-mgr__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ml-mgr__results li {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border: 1px solid var(--ml-line); border-radius: 12px; background: var(--ml-bg-2);
}
.ml-mgr__results img, .ml-mgr__cover { width: 44px; height: 44px; border-radius: 8px; flex: none; background: var(--ml-surface-2); object-fit: cover; }
.ml-mgr__res-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.ml-mgr__res-txt strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-mgr__res-txt small { font-size: 12.5px; color: var(--ml-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-mgr__form { display: flex; flex-direction: column; gap: 12px; }
.ml-mgr__grid3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) { .ml-mgr__grid3 { grid-template-columns: 1fr; } }
.ml-mgr__count { margin: 0; font-size: 13px; color: var(--ml-dim); }
.ml-mgr__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ml-mgr__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--ml-line); border-left: 3px solid var(--ml-accent, var(--ml-line-strong));
  border-radius: 12px; background: var(--ml-surface);
}
.ml-mgr__row > .ml-mgr__info:first-child { grid-column: 1 / 3; }
.ml-mgr__move { display: flex; flex-direction: column; gap: 4px; }
.ml-mgr__icon {
  width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--ml-line-strong);
  background: var(--ml-bg-2); color: var(--ml-text); font: inherit; font-size: 15px; cursor: pointer;
}
.ml-mgr__icon:disabled { opacity: .35; cursor: default; }
.ml-mgr__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ml-mgr__title { font-weight: 700; font-size: 15.5px; color: var(--ml-text); text-decoration: none; overflow-wrap: anywhere; }
a.ml-mgr__title:hover { text-decoration: underline; }
.ml-mgr__info small { font-size: 12.5px; color: var(--ml-muted); }
.ml-mgr__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-mgr__badge {
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--ml-line-strong); color: var(--ml-muted);
}
.ml-mgr__badge.is-own { border-color: color-mix(in srgb, var(--ml-emerald) 55%, transparent); color: var(--ml-emerald); }
.ml-mgr__badge.is-edited { border-color: color-mix(in srgb, var(--ml-amber, #f59e0b) 55%, transparent); color: var(--ml-amber, #f59e0b); }
.ml-mgr__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.ml-mgr__public { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ml-text); cursor: pointer; margin-right: 4px; }
.ml-mgr__public input { width: 18px; height: 18px; accent-color: var(--ml-pink); }
.ml-mgr__danger { color: var(--ml-coral); }
.ml-mgr__edit { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--ml-line); }
@media (max-width: 640px) {
  .ml-mgr__row { grid-template-columns: auto 1fr; }
  .ml-mgr__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ml-mgr__search { flex-direction: column; }
}

/* ===========================================================================
   Print. Paper is white whatever the theme says, so the sheet takes the day
   palette (every chord root ≥ 4.5:1 on white, so it also survives a black and
   white printer) and the text goes to ink. Declared last on purpose: it has to
   outrank both theme token blocks above, which share its specificity.
   =========================================================================== */
@media print {
  :root {
    --ml-text: #000;
    --ml-muted: #333;
    --ml-dim: #555;
    --ml-coral: #c9421a;
    --ml-line: #ccc;
    --ml-line-strong: #999;
    --ml-bar-bg: #fff;
    --ml-root-c:  #c92a2a;
    --ml-root-cs: #c9420d;
    --ml-root-d:  #8a6e00;
    --ml-root-ds: #4e7d0b;
    --ml-root-e:  #28813a;
    --ml-root-f:  #08815c;
    --ml-root-fs: #0b7285;
    --ml-root-g:  #1971c2;
    --ml-root-gs: #3b5bdb;
    --ml-root-a:  #6741d9;
    --ml-root-as: #9c36b5;
    --ml-root-b:  #c2255c;
  }
}

/* ===========================================================================
   Ensamble tab — side menu, reference strip and the words.
   Wide screens: the menu is a column beside the words. Phones: a drawer over
   them, opened from the "Opciones" button. The strip above the words keeps
   the chosen instrument's chords, pattern and metronome in view.
   =========================================================================== */
.ml-ens-layout { display: flex; gap: 0 22px; align-items: flex-start; }
.ml-ens-main { flex: 1; min-width: 0; }
/* Signed out: only the sign-in form. */
.ml-ens-layout.is-locked .ml-side-fold, .ml-ens-layout.is-locked .ml-ens-ref { display: none; }

.ml-side-fold {
  flex: none; width: 272px;
  /* Stays at hand while the words scroll under it. */
  position: sticky; top: var(--ml-stick-top);
  max-height: calc(100vh - var(--ml-stick-top)); overflow-y: auto; scrollbar-width: thin;
}
.ml-side-fold__sum { display: none; }
.ml-side { display: flex; flex-direction: column; gap: 12px; }
.ml-side__group {
  display: flex; flex-direction: column;
  border: 1px solid var(--ml-line); border-radius: 14px; background: var(--ml-surface); overflow: hidden;
}
.ml-side__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; min-height: 52px;
  border-bottom: 1px solid var(--ml-line); color: var(--ml-text); font-family: inherit; font-size: 14px;
  background: transparent; text-align: left; width: 100%;
}
.ml-side__row:last-child { border-bottom: 0; }
.ml-side__row--stack { flex-direction: column; align-items: stretch; }
.ml-side__row--btn { cursor: pointer; border-left: 0; border-right: 0; border-top: 0; transition: background .18s; }
.ml-side__row--btn:hover { background: var(--ml-surface-2); }
.ml-side__row--btn[aria-pressed="true"] { background: var(--ml-grad); color: #fff; }
.ml-side__row--btn[aria-pressed="true"] .ml-side__label { color: #fff; }
.ml-side__row--btn.is-waiting { opacity: .72; }
.ml-side__row--btn[aria-pressed="true"] .ml-beats i { background: rgba(255, 255, 255, .45); }
.ml-side__row--btn[aria-pressed="true"] .ml-beats i.is-on { background: #fff; }
.ml-side__row--split { padding: 0; gap: 0; align-items: stretch; }
/* A hidden group (Canción without a URL) must stay out of layout: the
   group's display: flex would otherwise beat the hidden attribute. */
.ml-side__group[hidden], .ml-side__player[hidden], .ml-side__note[hidden] { display: none; }
.ml-side__note { margin: 0; padding: 0 14px 12px; font-size: 12.5px; line-height: 1.45; color: var(--ml-muted); }
/* The Canción player, under its row: a small YouTube frame the row's button drives. */
/* The player, at the smallest size YouTube's terms allow (200×200 px, in
   view, never audio-only): under the Canción row on a wide screen, and on a
   phone in a floating box in the bottom corner, above the Music Bot button,
   since the drawer that holds the row closes to read the words. */
.ml-side__player { display: flex; justify-content: center; padding: 0 12px 12px; }
.ml-side__player iframe, .ml-song-mini__frame iframe { display: block; width: 200px; height: 200px; border: 0; border-radius: 10px; background: #000; }
.ml-song-mini {
  position: fixed; right: 18px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 45; width: 200px;
  border: 1px solid var(--ml-line-strong); border-radius: 12px; overflow: hidden;
  background: var(--ml-popover-bg); box-shadow: var(--ml-shadow);
}
.ml-song-mini[hidden] { display: none; }
.ml-song-mini__bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 4px 3px 10px; }
.ml-song-mini__state { font-size: 12px; font-weight: 600; color: var(--ml-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-song-mini__close {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ml-text); font: 20px/1 Inter, sans-serif; cursor: pointer;
}
.ml-song-mini__close:hover { background: var(--ml-surface-2); }
.ml-song-mini__frame iframe { border-radius: 0; }
@media print { .ml-song-mini { display: none; } }
.ml-side__btn {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; min-height: 52px; border: 0; background: transparent; color: var(--ml-text);
  font-family: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background .18s;
}
.ml-side__btn:hover { background: var(--ml-surface-2); }
.ml-side__btn[aria-pressed="true"] { background: var(--ml-grad); color: #fff; }
.ml-side__btn[aria-pressed="true"] .ml-side__label { color: #fff; }
.ml-side__btn[aria-pressed="true"] .ml-beats i { background: rgba(255, 255, 255, .45); }
.ml-side__btn[aria-pressed="true"] .ml-beats i.is-on { background: #fff; }
.ml-side__pin {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 14px;
  border-left: 1px solid var(--ml-line); font-size: 13px; color: var(--ml-muted); cursor: pointer; user-select: none;
}
.ml-side__label { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ml-text); }
.ml-side__label svg { width: 18px; height: 18px; color: var(--ml-accent, var(--ml-pink)); flex: none; }
.ml-side__label--sub { font-weight: 500; color: var(--ml-muted); padding-left: 28px; }
.ml-side__state { font-size: 12.5px; color: var(--ml-muted); }
.ml-side__row--btn[aria-pressed="true"] .ml-side__state { color: rgba(255, 255, 255, .85); }
.ml-side .ml-stepper output { min-width: 34px; }
.ml-side .ml-step { width: 32px; height: 32px; }
.ml-side__seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 10px; }
.ml-side__segbtn {
  padding: 9px 8px; min-height: 40px; border-radius: 10px;
  border: 1px solid var(--ml-line-strong); background: var(--ml-surface-2);
  color: var(--ml-muted); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.ml-side__segbtn:hover { color: var(--ml-text); }
.ml-side__segbtn.is-active { background: var(--ml-grad); color: #fff; border-color: transparent; }
.ml-side__select {
  padding: 8px 10px; min-height: 36px; border-radius: 9px;
  border: 1px solid var(--ml-line-strong); background: var(--ml-surface-2); color: var(--ml-text);
  font-family: inherit; font-size: 14px; font-weight: 600;
}
.ml-side__check { width: 20px; height: 20px; accent-color: var(--ml-pink); cursor: pointer; }

/* Reference strip */
.ml-ens-ref {
  margin: 0 0 18px; padding: 8px 12px 10px;
  border: 1px solid var(--ml-line); border-radius: 14px;
  background: var(--ml-nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.ml-ens-ref.is-stuck { position: sticky; top: var(--ml-stick-top); z-index: 30; }
.ml-ens-ref__head { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.ml-ens-ref__title {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-dim); font-weight: 600;
}
.ml-ens-ref__metro {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  padding: 6px 12px; min-height: 36px; border-radius: 999px;
  border: 1px solid var(--ml-line-strong); background: var(--ml-surface);
  color: var(--ml-text); font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ml-ens-ref__metro svg { width: 16px; height: 16px; }
.ml-ens-ref__metro[aria-pressed="true"] { background: var(--ml-grad); color: #fff; border-color: transparent; }
.ml-ens-ref__metro[aria-pressed="true"] .ml-beats i { background: rgba(255, 255, 255, .45); }
.ml-ens-ref__metro[aria-pressed="true"] .ml-beats i.is-on { background: #fff; }
.ml-ens-ref:not(.is-pinned) .ml-ens-ref__metro, .ml-ens-ref:not(.is-pinned) .ml-ens-ref__pattern { display: none; }
/* The strip's own buttons: the pushpin (pin / unpin) and full screen. */
.ml-ens-ref__tools { display: flex; gap: 6px; flex: none; margin-left: 4px; }
.ml-ens-ref:not(.is-pinned) .ml-ens-ref__tools { margin-left: auto; }
.ml-ens-ref__icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--ml-line); border-radius: 10px; background: transparent; color: var(--ml-muted);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ml-ens-ref__icon:hover { color: var(--ml-text); background: var(--ml-surface-2); }
.ml-ens-ref__icon svg { width: 18px; height: 18px; }
.ml-ens-ref__icon[aria-pressed="true"] { background: var(--ml-grad); color: #fff; border-color: transparent; }
/* A loose pin leans over; a pinned one stands up, filled. */
.ml-ens-ref__icon--pin svg { transform: rotate(45deg); transition: transform .15s; }
.ml-ens-ref__icon--pin[aria-pressed="true"] svg { transform: none; }
.ml-ens-ref__icon--pin[aria-pressed="true"] .ml-pin-head { fill: currentColor; }
.ml-ens-ref__icon--full .ml-icon-exit,
.ml-ens-ref__icon--full[aria-pressed="true"] .ml-icon-enter { display: none; }
.ml-ens-ref__icon--full[aria-pressed="true"] .ml-icon-exit { display: block; }
@media (pointer: coarse) {
  .ml-ens-ref__icon { width: 42px; height: 42px; }
}
/* 320-400px phones: title, metronome pill and both buttons still fit. */
@media (max-width: 400px) {
  .ml-ens-ref__head { gap: 6px; }
  .ml-ens-ref__metro { padding: 6px 10px; gap: 6px; }
}
.ml-ens-ref__body { padding-top: 8px; }
.ml-ens-ref__block[hidden] { display: none; }
.ml-ens-ref .ml-diagrams--strip {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 4px;
}
.ml-ens-ref .ml-diagrams--strip::-webkit-scrollbar { display: none; }
.ml-ens-ref .ml-diagrams--strip .ml-diagram { flex: none; width: 88px; padding: 6px 4px; }
.ml-ens-ref .ml-diagrams--strip .ml-diagram svg { max-width: 72px; }
.ml-ens-ref .ml-diagrams--strip .ml-diagram__notes { display: none; }
.ml-ens-ref .ml-diagrams--strip[data-diagrams="pentagrama"] .ml-diagram { width: 104px; }
.ml-staff__clef { font-family: "Noto Music", "Bravura", "Apple Symbols", "Segoe UI Symbol", serif; }
/* A chord the catalog has no shape for (pasted into a private sheet) still
   gets its card, name only, so the strip lists every chord of the sheet. */
.ml-diagram--bare { display: grid; place-items: center; min-height: 72px; }
.ml-diagram--bare .ml-diagram__name { margin: 0; }
.ml-ens-ref__pattern { display: flex; align-items: center; gap: 10px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; }
.ml-ens-ref__pattern::-webkit-scrollbar { display: none; }
.ml-ens-ref__pname { flex: none; font-size: 11.5px; color: var(--ml-dim); max-width: 120px; }
.ml-ens-ref .ml-pattern { margin: 0; }
.ml-ens-ref .ml-pattern li { min-width: 34px; padding: 4px 0; }
.ml-ens-ref .ml-drumgrid { gap: 4px; }
.ml-ens-ref .ml-drumrow__name { width: 58px; font-size: 11px; }
.ml-ens-ref .ml-cell { width: 18px; height: 18px; }

.ml-ens-public[hidden] { display: none; }

@media (max-width: 900px) {
  .ml-ens-layout { display: block; }
  .ml-side-fold { position: static; width: auto; max-height: none; overflow: visible; margin: 0 0 14px; }
  .ml-side-fold__sum {
    display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
    padding: 11px 14px; min-height: 46px;
    border: 1px solid var(--ml-line); border-radius: 12px; background: var(--ml-surface);
    color: var(--ml-text); font-size: 14px; font-weight: 600;
  }
  .ml-side-fold__sum::-webkit-details-marker { display: none; }
  .ml-side-fold__sum svg { width: 18px; height: 18px; color: var(--ml-accent, var(--ml-pink)); flex: none; }
  .ml-side-fold__sum::after {
    content: ''; margin-left: auto; width: 8px; height: 8px;
    border-right: 2px solid var(--ml-dim); border-bottom: 2px solid var(--ml-dim);
    transform: rotate(45deg); transition: transform .15s;
  }
  .ml-side-fold[open] > .ml-side-fold__sum::after { transform: rotate(-135deg); }
  .ml-side-fold[open] > .ml-side-fold__sum { margin-bottom: 10px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .ml-ens-ref.is-stuck { position: static; }
}

@media print {
  .ml-side-fold, .ml-ens-ref__metro, .ml-ens-ref__tools, .ml-focus-exit { display: none !important; }
  .ml-ens-ref.is-stuck { position: static; }
}

/* ── Full screen: only the menu, the strip and the words ──────────────
   The whole page goes full screen (the window keeps scrolling, so the
   auto-scroll and the sticky menu and strip work as always) and everything
   that is not the Ensamble panel hides. Where the browser has no Fullscreen
   API (iPhone) the class alone still clears the page. */
html.ml-focus { --ml-stick-top: 0px; }
@media screen {
  html.ml-focus .ml-nav,
  html.ml-focus .ml-skip,
  html.ml-focus .ml-footer,
  html.ml-focus .mlb,
  html.ml-focus .ml-main > :not(.ml-panel--ens) { display: none !important; }
}
/* More room for the words and the strip: a wide screen shows every chord. */
html.ml-focus .ml-panel--ens { max-width: 1600px; padding-top: 12px; }
/* The wide, sticky menu column; a phone's fold keeps its natural height. */
@media (min-width: 901px) {
  html.ml-focus .ml-side-fold { top: 12px; max-height: calc(100vh - 24px); }
}
html.ml-focus .ml-ens-ref.is-stuck { border-top-left-radius: 0; border-top-right-radius: 0; }
@media (max-width: 900px) {
  html.ml-focus .ml-panel--ens { padding: 8px 10px 40px; }
}

/* The way out while the strip's own button has scrolled away (a phone has
   no Esc key, and an iPhone keeps no browser exit for a page). */
.ml-focus-exit {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 44px;
  border: 1px solid var(--ml-line-strong); border-radius: 999px;
  background: var(--ml-popover-bg); color: var(--ml-text); box-shadow: var(--ml-shadow);
  font: 600 14px/1 Inter, sans-serif; cursor: pointer;
}
.ml-focus-exit[hidden] { display: none; }
.ml-focus-exit svg { width: 18px; height: 18px; }

/* ===========================================================================
   Sign-in dialog (lib/login-dialog.js) and "Tus canciones" (lib/my-songs.js).
   =========================================================================== */
.ml-login-dialog {
  width: min(420px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0;
  border-radius: var(--ml-radius); background: var(--ml-popover-bg); color: var(--ml-text);
  box-shadow: var(--ml-shadow);
}
.ml-login-dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
.ml-login-dialog__form { max-width: none; border: 0; background: transparent; }
.ml-login-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ml-login-dialog__head .ml-ens__kicker { margin: 0; }
.ml-login-dialog__close {
  width: 36px; height: 36px; border: 1px solid var(--ml-line); border-radius: 10px;
  background: var(--ml-surface); color: var(--ml-text); font-size: 20px; line-height: 1; cursor: pointer;
}
.ml-login-dialog__link {
  align-self: flex-start; padding: 4px 0; border: 0; background: none; color: var(--ml-muted);
  font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer;
}
.ml-sub__signin { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.ml-section--my:has(> .ml-my:empty) { display: none; }
.ml-my__signin {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px; border: 1px solid var(--ml-line); border-radius: var(--ml-radius); background: var(--ml-surface);
}
.ml-my__signin .ml-h2 { margin-top: 0; }
.ml-my__signin .ml-lead { margin: 0; }
.ml-my__list + .ml-my__list { margin-top: 28px; }
.ml-my__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 14px; }
.ml-my__name { margin: 0; font-size: 20px; }
.ml-my__note { color: var(--ml-muted); }
.ml-my__head .ml-btn { margin-left: auto; }

/* The manager's unsaved changes: a bar that stays in view (bottom of the
   screen) until «Guardar» or «Descartar». */
.ml-mgr__savebar {
  position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid var(--ml-pink); border-radius: var(--ml-radius-sm); background: var(--ml-popover-bg);
  box-shadow: var(--ml-shadow);
}
.ml-mgr__savebar-txt { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; flex: 1 1 240px; }
.ml-mgr__savebar-txt small { color: var(--ml-muted); }
.ml-mgr__savebar-actions { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 700px) {
  /* Above the Music Bot button, which sits at the bottom right. */
  .ml-mgr__savebar { bottom: 84px; }
}

/* Which lists a song is in (song manager). */
.ml-mgr__lists { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.ml-mgr__lists small { color: var(--ml-muted); }
.ml-mgr__chip {
  padding: 2px 9px; border: 1px solid var(--ml-line-strong); border-radius: 999px; background: transparent;
  color: var(--ml-text); font: inherit; font-size: 12px; line-height: 1.5; cursor: pointer;
}
.ml-mgr__chip:hover:not(:disabled) { border-color: var(--ml-pink); color: var(--ml-pink); }
.ml-mgr__chip.is-here { border-color: transparent; background: var(--ml-surface-2); color: var(--ml-muted); cursor: default; }
.ml-mgr__row.is-all { grid-template-columns: 1fr auto; }
@media (max-width: 700px) {
  .ml-mgr__row.is-all { grid-template-columns: 1fr; }
}

.ml-mgr__badge.is-public { border-color: color-mix(in srgb, var(--ml-pink) 55%, transparent); color: var(--ml-pink); }

/* «Agregar existentes»: search, a checkbox per song, «Agregar (n)». */
.ml-mgr__picker-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ml-mgr__picker-head .ml-ens__kicker { margin: 0; }
.ml-mgr__picker-head .ml-input { flex: 1 1 240px; max-width: 420px; }
.ml-mgr__picks {
  list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 2px;
  max-height: min(52vh, 440px); overflow-y: auto; border: 1px solid var(--ml-line); border-radius: 12px; background: var(--ml-bg-2);
}
.ml-mgr__picks > .ml-hint { padding: 10px; }
.ml-mgr__pick { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.ml-mgr__pick:hover { background: var(--ml-surface-2); }
.ml-mgr__pick input { width: 18px; height: 18px; flex: none; accent-color: var(--ml-pink); }
.ml-mgr__pick:has(input:checked) { background: color-mix(in srgb, var(--ml-pink) 12%, transparent); }
.ml-mgr__pick-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ml-mgr__pick-txt strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-mgr__pick-txt small { font-size: 12px; color: var(--ml-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-mgr__picker-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ml-mgr__pick-count { font-size: 13px; color: var(--ml-muted); }

/* «Ensambles y visibilidad»: a dropdown with a checkbox per ensemble. */
.ml-mgr__place { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ml-mgr__edit > .ml-mgr__place { margin-bottom: 12px; }
.ml-mgr__place-btn {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; text-align: left;
  padding: 7px 12px; min-width: min(100%, 260px); max-width: 100%;
  border: 1px solid var(--ml-line-strong); border-radius: 10px; background: var(--ml-surface);
  color: var(--ml-text); font: inherit; cursor: pointer;
}
.ml-mgr__place-btn small { grid-column: 1; font-size: 11px; color: var(--ml-muted); }
.ml-mgr__place-btn span:not(.ml-mgr__place-caret) { grid-column: 1; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-mgr__place-caret { grid-column: 2; grid-row: 1 / 3; color: var(--ml-muted); }
.ml-mgr__place-btn:hover:not(:disabled), .ml-mgr__place-btn.is-open { border-color: var(--ml-pink); }
.ml-mgr__place-btn:disabled { opacity: .5; cursor: default; }
.ml-mgr__place-panel {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; min-width: min(100%, 300px);
  border: 1px solid var(--ml-line-strong); border-radius: 12px; background: var(--ml-bg-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
.ml-mgr__place-panel .ml-hint { margin: 0; }
.ml-mgr__place-title { margin: 4px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-muted); }
.ml-mgr__place-list, .ml-mgr__place-vis { display: flex; flex-direction: column; gap: 2px; }
.ml-mgr__place-opt { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.ml-mgr__place-opt:hover { background: var(--ml-surface-2); }
.ml-mgr__place-opt input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--ml-pink); }
.ml-mgr__place-opt input:disabled + span { opacity: .75; }
.ml-mgr__place-opt > small { margin-left: auto; font-size: 11.5px; color: var(--ml-muted); }
.ml-mgr__place-opt span { display: flex; flex-direction: column; }
.ml-mgr__place-opt span small { font-size: 12px; color: var(--ml-muted); }
.ml-mgr__row.is-all .ml-mgr__actions { align-items: flex-end; flex-direction: column; }
@media (max-width: 700px) {
  .ml-mgr__row.is-all .ml-mgr__actions { align-items: stretch; }
}

/* ── «Mi cuenta» ─────────────────────────────────────────────────────── */
.ml-page-head--compact { padding-bottom: 8px; }
.ml-acct { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.ml-avatar--sm { width: 26px; height: 26px; font-size: 10.5px; }
.ml-acct__hero {
  display: flex; align-items: center; gap: 18px; padding: 20px;
  border: 1px solid var(--ml-line); border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ml-pink) 16%, transparent), transparent 60%),
    var(--ml-surface);
}
.ml-acct__hero-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ml-acct__hero-txt h2 { margin: 0; font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
.ml-acct__hero-txt p { margin: 0 0 4px; color: var(--ml-muted); font-size: 14px; overflow-wrap: anywhere; }
.ml-acct__body { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
.ml-acct__tabs { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 4px; }
.ml-acct__tab {
  padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--ml-muted);
  font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.ml-acct__tab:hover { background: var(--ml-surface); color: var(--ml-text); }
.ml-acct__tab.is-on { background: var(--ml-surface-2); color: var(--ml-text); box-shadow: inset 3px 0 0 var(--ml-pink); }
.ml-acct__panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ml-acct__card { padding: 20px; border: 1px solid var(--ml-line); border-radius: 18px; background: var(--ml-surface); }
.ml-acct__card-head { margin-bottom: 14px; }
.ml-acct__card-head h2 { margin: 0; font-size: 18px; }
.ml-acct__card-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--ml-muted); }
.ml-acct__form, .ml-acct__stack { display: flex; flex-direction: column; gap: 14px; }
.ml-acct__form .ml-input[readonly] { opacity: .75; cursor: default; }
.ml-acct__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ml-acct__actions--start { justify-content: flex-start; margin-top: 0; }
.ml-acct__left { margin-right: auto; }
.ml-acct__dirty { color: var(--ml-amber, #f59e0b); font-size: 12.5px; font-weight: 600; }
.ml-acct__settings { display: flex; flex-direction: column; }
.ml-acct__setting { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid var(--ml-line); }
.ml-acct__setting:first-child { border-top: 0; padding-top: 0; }
.ml-acct__setting-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ml-acct__setting-txt strong { font-size: 15px; }
.ml-acct__setting-txt small { font-size: 12.5px; color: var(--ml-muted); }
.ml-acct__setting-ctl { flex: none; max-width: 100%; }
.ml-acct__setting-ctl .ml-input { min-width: 200px; }
.ml-acct__inline { display: flex; align-items: center; gap: 12px; }
.ml-acct__sample { display: inline-grid; place-items: center; width: 44px; font-weight: 700; line-height: 1; }
.ml-acct__seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--ml-line-strong); border-radius: 12px; background: var(--ml-bg-2); }
.ml-acct__seg-opt {
  padding: 7px 12px; min-height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--ml-muted);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ml-acct__seg-opt:hover { color: var(--ml-text); }
.ml-acct__seg-opt.is-on { background: var(--ml-grad); color: #fff; }
.ml-acct__enslist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ml-acct__ens { border: 1px solid var(--ml-line); border-radius: 14px; background: var(--ml-bg-2); }
.ml-acct__ens.is-open { border-color: color-mix(in srgb, var(--ml-pink) 45%, var(--ml-line)); }
.ml-acct__ens-main { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ml-acct__ens-icon {
  display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: var(--ml-surface-2); color: var(--ml-text); font-weight: 800; font-size: 13px;
}
.ml-acct__ens-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ml-acct__ens-txt strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.ml-acct__ens-txt small { font-size: 12.5px; color: var(--ml-muted); }
.ml-acct__ens-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ml-acct__people, .ml-acct__new { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-top: 1px solid var(--ml-line); }
.ml-acct__new { border: 1px solid var(--ml-line); border-radius: 14px; background: var(--ml-bg-2); }
.ml-acct__new .ml-acct__people { padding: 0; border: 0; }
.ml-acct__new .ml-ens__kicker { margin: 0; }
.ml-acct__plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ml-acct__prow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.ml-acct__prow:hover { background: var(--ml-surface); }
.ml-acct__pmail { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-acct__pmail small { color: var(--ml-muted); }
.ml-acct__prole { width: auto; min-width: 110px; padding-top: 6px; padding-bottom: 6px; }
.ml-acct__premove {
  width: 32px; height: 32px; flex: none; border: 1px solid var(--ml-line-strong); border-radius: 9px;
  background: transparent; color: var(--ml-muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.ml-acct__premove:hover:not(:disabled) { color: var(--ml-coral); border-color: var(--ml-coral); }
.ml-acct__premove:disabled { opacity: .35; cursor: default; }
.ml-acct__padd { display: flex; flex-wrap: wrap; gap: 8px; }
.ml-acct__padd .ml-input[type=email] { flex: 1 1 220px; min-width: 0; }
.ml-acct__signin { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; border: 1px solid var(--ml-line); border-radius: 20px; background: var(--ml-surface); }
.ml-acct__signin h2 { margin: 0; }
.ml-acct__signin .ml-ens__kicker, .ml-acct__signin .ml-ens__lead { margin: 0; }
@media (max-width: 820px) {
  .ml-acct__body { grid-template-columns: 1fr; gap: 14px; }
  .ml-acct__tabs { position: static; flex-direction: row; overflow-x: auto; padding: 3px; border: 1px solid var(--ml-line); border-radius: 14px; background: var(--ml-surface); }
  .ml-acct__tab { flex: 1; text-align: center; white-space: nowrap; }
  .ml-acct__tab.is-on { box-shadow: none; background: var(--ml-grad); color: #fff; }
}
@media (max-width: 600px) {
  .ml-acct__hero { padding: 16px; gap: 14px; }
  .ml-acct__hero .ml-avatar--xl { width: 56px; height: 56px; font-size: 20px; }
  .ml-acct__hero-txt h2 { font-size: 20px; }
  .ml-acct__card { padding: 16px; }
  .ml-acct__setting { flex-direction: column; align-items: stretch; gap: 10px; }
  .ml-acct__setting-ctl .ml-input { width: 100%; min-width: 0; }
  .ml-acct__seg { display: flex; }
  .ml-acct__seg-opt { flex: 1; padding-left: 6px; padding-right: 6px; }
  .ml-acct__ens-main { flex-wrap: wrap; }
  .ml-acct__ens-actions { width: 100%; justify-content: flex-start; }
  .ml-acct__prow { flex-wrap: wrap; }
  .ml-acct__pmail { flex-basis: calc(100% - 40px); }
  .ml-acct__prole { flex: 1; }
}
.ml-mgr__people { margin-left: auto; align-self: center; }
/* A button that waits (nothing to save yet) reads as waiting. */
.ml-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; filter: saturate(.6); }
@media (max-width: 600px) {
  .ml-acct__inline .ml-acct__seg { flex: 1; }
  .ml-acct__inline .ml-acct__sample { width: 36px; }
}