/* The Music library: the creative view and the pro table, the song drawer,
   the sheets that rise over it, the mini-player, and the receipts an audio
   upload leaves.

   THE LOOK IS THE SEPTEMBER 22 MOCKUP'S, and its tokens are HQ's own: the
   mockup was drawn from the House palette, so --g-ground is --ground and so
   on, in light and in dark. They are named here as aliases rather than copied
   as hex, so a published House look and the dark room both still reach the
   library. The one set of colors that is the library's own is the vocal
   stoplight -- green, red and amber -- which means the same thing in every look.

   Every selector is scoped to something this feature owns (.mlib, .mpanel,
   .msheet, .mplayer, .mrcpt, .mb, .mplay and their children), so nothing on
   the release workspace, the song page or Media changes because this file
   exists. Status is never color alone: every cube row, microphone and pill
   also carries words, on screen or to a screen reader. */

.mlib,#mpanelwrap,#msheetwrap,.mplayer,.mrcpt,.mselbar{
  --g-ground:var(--ground); --g-sunk:var(--sunk); --g-raised:var(--raised); --g-lift:var(--lift);
  --g-ink:var(--ink); --g-soft:var(--soft); --g-muted:var(--muted); --g-faint:var(--faint);
  --g-line:var(--line); --g-firm:var(--firm);
  --g-accent:var(--accent); --g-cta:var(--cta); --g-oncta:var(--oncta);
  --g-good:var(--good); --g-warn:var(--warn); --g-stop:var(--stop);
  --g-warnbg:color-mix(in srgb, var(--warn) 10%, transparent);
  --g-goodbg:color-mix(in srgb, var(--good) 10%, transparent);
  --g-accentbg:color-mix(in srgb, var(--accent) 8%, transparent);
  --g-neutralbg:color-mix(in srgb, var(--muted) 9%, transparent);
  --g-shadow:0 12px 32px rgba(56,36,47,.10);
  --g-serif:"Instrument Serif", var(--f-l), Georgia, serif;
  --g-sans:"Instrument Sans", var(--f-s), system-ui, sans-serif;
  /* THE MIC WEARS THE STAGE BARS' GREEN (Jay, D6, October 4, 2026). The
     October 1 ruling -- a fixed mint and gold for the microphone in every
     look -- is retired: the stage bars already read the look's own --good and
     --warn through app.css's .stage-done / .stage-mid, so the mic pill reads
     the same two, one green per row, theme-aware (tones.js `vocal`). Memo red
     is its own. */
  --mic-final:var(--good); --mic-memo:#E5484D; --mic-mid:var(--warn);
  /* Delete, on the Recordings card's menu and its sheet (the approved mockup's red). */
  --g-danger:#C0392B;
}
html[data-theme="dark"] .mlib,html[data-theme="dark"] #mpanelwrap,html[data-theme="dark"] #msheetwrap,
html[data-theme="dark"] .mplayer,html[data-theme="dark"] .mrcpt,
html[data-theme="dark"] .mselbar{
  --g-shadow:0 12px 32px rgba(0,0,0,.45);
  --mic-memo:#F0717A;
  --g-danger:#F4847E;
}

/* ------------------------------------------------------------ the column */
@media (min-width:900px){ #view > .mlib{max-width:1180px} }
.mlib{padding-bottom:24px;font-family:var(--g-sans);color:var(--g-ink)}
.mlib *,#mpanelwrap *,#msheetwrap *,.mplayer *{box-sizing:border-box}

/* ------------------------------------------------------------ header

   ONE COMPACT HEADING ROW (Jay, 2026-09-28). The tab's name, the view control,
   "+ Add a song" and a magnifier, on one line that never wraps -- where there
   used to be a heading row, a toolbar row that became a second row on a phone,
   and a search pill the width of the screen. There is no upload pill: the app
   bar's mark is the one door (public/app/music.js mHeadHTML).

   The heading row is scoped to .mlib, because `.mhead` is not this feature's
   name alone: app.css gives the same class to the People screen's member cards
   (app/people.js), which have their own rule for it -- a name and a role on one
   baseline, with no padding. Unscoped, this file had been quietly restyling
   them since September 22; scoped, each screen keeps the row it wrote. */
.mlib .mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;
  padding:14px 0 4px}
.mtitle{min-width:0;margin:0;font-family:var(--g-serif);font-weight:400;font-size:40px;line-height:1;
  letter-spacing:-.01em;color:var(--g-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mlib .mhead-acts{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;flex:none}
/* The magnifier, drawn like the Writing Room's and Media's: a 44pt target with
   no box until it is open, and then the tint of the control it reveals. */
.mhbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;
  padding:0;border:0;border-radius:999px;background:none;color:var(--g-ink);cursor:pointer}
.mhbtn svg{width:19px;height:19px}
.mhbtn:hover{color:var(--g-accent)}
.mhbtn[aria-expanded="true"]{color:var(--g-accent);background:var(--g-sunk)}
.mhbtn:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.msearchbar{margin:12px 0 0}
.msearchbar[hidden]{display:none}
.mhead-acts .choices .choice svg{width:15px;height:15px}
.msearch{display:flex;align-items:center;gap:10px;background:var(--g-raised);border:1px solid var(--g-line);
  border-radius:14px;padding:0 14px;margin:0;min-height:46px}
.msearch:focus-within{border-color:var(--g-accent)}
.msearch svg{width:16px;height:16px;flex:none;opacity:.55}
.msearch input{border:0;background:transparent;outline:0;width:100%;min-height:44px;font:400 16px var(--g-sans);color:var(--g-ink)}
.msearch input::placeholder{color:var(--g-faint)}
.mchips{display:flex;gap:8px;padding:12px 0 2px;flex-wrap:wrap}

/* ------------------------------------------------------------ buttons */
/* .mbtn is an alias of the one button set (app.css). Its bare class is the
   SECONDARY, the outline; the filled one says `primary`. `.ghost` keeps meaning
   "the outline beside a primary", which is what the bare class is now, so it
   needs no rule. Hover is only where a pointer hovers: on a phone :hover sticks
   to whatever is under the finger when a sheet closes (2026-09-29). */
.mbtn.wide{width:100%}
.miconbtn{border:0;background:none;cursor:pointer;min-width:40px;min-height:40px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--g-faint)}
.miconbtn:hover{background:var(--g-sunk)}
.miconbtn svg{width:17px;height:17px}
.miconbtn.ring{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--g-line);color:var(--g-ink)}
.miconbtn.ring:hover{border-color:var(--g-accent);color:var(--g-accent);background:transparent}
/* Kept for the upload receipts and the move form. */
.mlib-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;
  padding:0 16px;border-radius:999px;border:1px solid var(--firm);background:var(--raised);
  color:var(--ink);font-family:var(--f-s);font-size:14px;font-weight:500;cursor:pointer;
  text-decoration:none;white-space:nowrap}
.mlib-btn:hover{border-color:var(--accent)}
.mlib-btn.solid{background:var(--cta);color:var(--oncta);border-color:var(--cta)}
.mlib-btn:disabled{opacity:.55;cursor:default}

/* Play: its own control, never inside the link that opens the song. */
.mplay{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;
  border-radius:999px;border:1px solid var(--line);background:var(--sunk);
  color:var(--ink);cursor:pointer;padding:0;font:600 13.5px var(--f-s);flex:none}
.mplay .mpi{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center}
.mplay .mpi svg{width:16px;height:16px}
.mplay .mpi .mg{width:15px;height:15px}
.mplay.labeled{padding-right:18px}
.mplay.labeled .mpi{width:36px;margin-right:-4px}
.mplay.solid{background:var(--cta);color:var(--oncta);border-color:var(--cta)}
.mplay.on{background:var(--cta);color:var(--oncta);border-color:var(--cta);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cta) 22%, transparent)}
.mplay.busy .mpi{animation:mpulse 1s ease-in-out infinite}
.mplay.off{opacity:.4;cursor:default;background:var(--sunk);color:var(--ink);border-color:var(--line)}
.mplay:not(.off):active{transform:scale(.96)}
@keyframes mpulse{50%{opacity:.35}}
.mtip{display:block;font-size:12.5px;color:var(--warn);margin-top:6px}

/* ------------------------------------------------------------ pills */
.mpill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;white-space:nowrap;line-height:1.2}
.mpill svg{width:12px;height:12px}
.mdot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.mpill-new{background:var(--warn);color:#fff}
html[data-theme="dark"] .mpill-new{color:#1B1020}
.mpill-final{background:var(--g-goodbg);color:var(--g-good)}
.mpill-warn{background:var(--g-warnbg);color:var(--g-warn)}
.mpill-memo{background:color-mix(in srgb, var(--mic-memo) 12%, transparent);color:var(--g-stop)}
.mpill-neutral{background:var(--g-neutralbg);color:var(--g-muted)}
.mpill-plan{background:var(--g-accentbg);color:var(--g-accent)}
.mfaint{color:var(--g-faint)}

/* ------------------------------------------------------------ stage cubes */
.mstage{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.mcubes{display:inline-flex;gap:3px}
.mcube{width:9px;height:9px;border-radius:2.5px;border:1px solid var(--g-firm);background:transparent}
.mcube.on{background:var(--stage-on);border-color:var(--stage-on)}
.mstage-n{font-size:12.5px;font-weight:600;color:var(--g-soft);white-space:nowrap}
.mstage-n.unset{color:var(--g-faint);font-weight:500}

/* ------------------------------------------------------------ vocal mic */
.mmic{display:inline-flex;vertical-align:middle;flex:none}
.mmic svg{width:17px;height:17px}
.mmic-none{color:var(--g-faint)}
.mmic-memo{color:var(--mic-memo)}
.mmic-mid{color:var(--mic-mid)}
.mmic-final{color:var(--mic-final)}

/* A decided take, in the card's status line: mic + uppercase word on a
   tint, in the one stage mint or gold (top of this file), the same in every look. */
.mvpill{display:inline-flex;align-items:center;gap:5px;font:700 11px/1 var(--f-s);letter-spacing:.04em;
  padding:5px 9px 5px 7px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.mvpill svg{width:13px;height:13px}
.mvpill-good{background:color-mix(in srgb, var(--good) 12%, transparent);color:var(--good)}
.mvpill-warn{background:color-mix(in srgb, var(--warn) 12%, transparent);color:var(--warn)}
button.miconbtn.mmic-btn{width:auto;height:auto;min-width:40px;min-height:40px;border-radius:999px;padding:2px}

/* Stage as a tappable row (§10): the cube meter stands in for the mdrop
   value, but the row is otherwise the one dropdown pattern. */
.mstage-drop{justify-content:space-between}
.mstage-drop .mstage{flex:1;min-width:0}

/* ------------------------------------------------------------ artwork tile */
.mtile{position:relative;flex:none;width:60px;height:60px;border-radius:14px;overflow:hidden;padding:0;border:0;
  display:flex;align-items:center;justify-content:center;font-family:"Instrument Serif", var(--f-l), serif;font-size:22px;
  color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
button.mtile{cursor:pointer}
.mtile-up{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,10,16,.5);
  color:#fff;font:600 11px var(--f-s);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .15s;text-shadow:none}
button.mtile:hover .mtile-up,button.mtile:focus-visible .mtile-up{opacity:1}
button.mtile.busy .mtile-up{opacity:1;animation:mpulse 1s ease-in-out infinite}
button.mtile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mtile.sm{width:34px;height:34px;border-radius:9px;font-size:14px}
.mtile.lg{width:72px;height:72px;border-radius:16px;font-size:26px}
@media (hover:none){ button.mtile:not(.busy) .mtile-up{display:none} }

/* ------------------------------------------------------------ avatar */
.mav{width:var(--mav,28px);height:var(--mav,28px);min-width:var(--mav,28px);cursor:inherit}
.mav .initials{font:700 calc(var(--mav,28px) * .38) var(--g-sans);letter-spacing:.02em;color:var(--g-soft)}
.mav img{position:absolute;inset:0}
.mprod{display:inline-flex;align-items:center;gap:8px;font:inherit;color:inherit;text-align:left;min-width:0}
.mprod-pick{cursor:pointer;border-radius:10px;padding:4px 6px;margin:-4px -6px;border:0;background:transparent;min-height:40px}
.mprod-pick:hover{background:var(--g-accentbg)}
.mprod-pick:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.mpname{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpname em{font-style:normal;font-weight:400;color:var(--g-muted);font-size:12px}

/* ------------------------------------------------------------ sections */
.msec{padding:20px 0 0}
.msec-h{margin:0 0 4px;font-family:var(--g-serif);font-style:italic;font-weight:400;font-size:21px;color:var(--g-ink)}
.msec-sub{margin:0 0 12px;font-size:13px;color:var(--g-muted)}
.msec-sub:empty{display:none}
.mempty{padding:40px 24px;text-align:center;color:var(--g-muted)}
.mempty.sm{padding:18px}
.mempty p{margin:0}
.mempty-big, .mempty[data-empty] > p{font-family:var(--g-serif);font-style:italic;font-size:24px;color:var(--g-soft);margin-bottom:6px!important}

/* ------------------------------------------------------------ New / Released
   The iOS segmented control from the 2026-09-26 mockup: a sunk track, the
   chosen half raised on it. Color-only across themes -- every size here is
   fixed, so switching a theme or a mode moves nothing. */
.mnr{display:flex;background:var(--g-sunk);border-radius:13px;padding:3px;margin:12px 0 2px}
.mnr button{flex:1;min-height:40px;border:0;background:transparent;border-radius:10px;cursor:pointer;
  font:600 14px var(--g-sans);color:var(--g-muted);-webkit-tap-highlight-color:transparent}
.mnr button[aria-selected="true"]{background:var(--g-raised);color:var(--g-ink);box-shadow:0 1px 5px rgba(56,36,47,.16)}
.mnr button:focus-visible{outline:2px solid var(--g-accent);outline-offset:1px}
/* A dark room has no light for a shadow to read against, so the chosen half
   is the lifted surface with a hairline -- a color change, never a size one. */
html[data-room="dark"] .mnr button[aria-selected="true"]{background:var(--g-lift);
  box-shadow:inset 0 0 0 1px var(--g-firm)}
.mnr + .msearchbar{margin-top:12px}
/* Coming soon's heading takes focus when a release address lands on it, so a
   screen reader starts there; a finger did not put it there, so no ring. */
.msec-h[tabindex="-1"]:focus{outline:none}

/* Start a release: the way into planning, first under Coming soon. */
.mstartrel{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;
  margin:0 0 10px;background:var(--g-cta);color:var(--g-oncta);border:0;border-radius:16px;cursor:pointer;
  font:600 15px var(--g-sans)}
.mstartrel::before{content:"+";font-size:18px;line-height:1}
.mstartrel:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}

/* A release card: title and kind, when, and where it stands. */
.mrelcards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mrelcard{display:block;background:var(--g-raised);border:1px solid var(--g-line);border-radius:18px;
  padding:15px 16px;color:var(--g-ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.mrelcard-li{position:relative}
.mrelmore{position:absolute;top:8px;right:8px}
.mrelcard-li .mrelcard-top{padding-right:36px}
.mrelcard:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.mrelcard-top{display:flex;align-items:center;gap:10px}
.mrelcard-h{flex:1;min-width:0;font-family:var(--g-serif);font-size:20px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkind{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--g-muted);border:1px solid var(--g-line);border-radius:999px;padding:3px 9px}
.mrelcard-meta{display:block;margin-top:5px;font-size:13px;color:var(--g-muted)}
.mrelcard-foot{display:flex;align-items:center;gap:8px;margin-top:11px}
.mrelcard-st{min-width:0;font-size:12.5px;font-weight:600;color:var(--g-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mchev{margin-left:auto}
/* Status is semantic, never thematic: on-track green, needs-attention amber,
   in every theme (the locked rule from the build 13 punch list). */
.mrdot{width:8px;height:8px;border-radius:50%;flex:none}
/* The release card's dot reads tones.js's one map (Jay, October 4, 2026):
   the .stage-* class sets --stage-on from the look's --good/--warn/--stop. */
.mrdot{background:var(--stage-on, var(--muted))}
/* Released is one list (punch list item 6). A song on an EP carries a quiet
   badge beside its title; the sort is a three-way segmented control. */
.mep{padding:2px 7px;font-size:10px}
.msortseg{margin:0}
/* The sort control and the finger that says it can be tapped (Jay, 2026-10-01). */
.msortrow{display:flex;align-items:center;gap:6px;margin:2px 0 12px}
.msort-finger{display:inline-flex;flex:none;color:var(--g-muted)}
.msort-finger svg{width:20px;height:20px}
.msortseg .choice{min-width:72px;justify-content:center}
@media (min-width:900px){ .mrelcards{display:grid;grid-template-columns:1fr 1fr;gap:12px} }

/* The releases a song is on, under its row: the connection, both ways. */
.mrow-on{margin:3px 0 0;font-size:12.5px;color:var(--g-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow-on a{color:var(--g-soft);text-decoration:none;font-weight:600}
/* Hover only where there is a pointer that hovers, so a card or link tapped
   on a phone does not stay in its hover color afterwards. */
@media (hover:hover){
  .mrelcard:hover{border-color:var(--g-firm)}
  .mrow-on a:hover{color:var(--g-accent)}
}

/* ------------------------------------------------------------ rows */
.mrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mrow{display:flex;align-items:center;gap:14px;background:var(--g-raised);border:1px solid var(--g-line);
  border-radius:18px;padding:12px 14px 12px 12px;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
@media (hover:hover){ .mrow:hover{transform:translateY(-1px);box-shadow:var(--g-shadow)} }
.mrow-meta{flex:1;min-width:0}
.mband{display:flex;align-items:center;gap:8px;min-width:0}
.mrow-title{flex:1;min-width:0;font-family:var(--g-serif);font-size:19px;line-height:1.2;color:var(--g-ink);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow-title:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px;border-radius:4px}
.mband .mpill-new{flex:none}
.mrow-play{margin-left:auto;min-width:40px;min-height:40px;width:40px;height:40px}
.mrow-play .mpi{width:38px;height:38px}
.mrow-listen{margin:3px 0 0;font-size:13px;color:var(--g-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtags{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;align-items:center}
/* The stage word is a column, not a phrase (build 10, item 18). The
   microphone followed it, so "Mastering", "Mixing" and "Recording" put every
   row's microphone somewhere different. Sized to the longest of the six
   names, so the microphones line up down the list. */
.mtags > .mstage .mstage-n{display:inline-block;min-width:6.1em}

/* --------------------------------------------- compact rows (Working on)
   THE SONGS, AT SPOTIFY AND APPLE MUSIC DENSITY (Jay, 2026-09-28), IN THE
   APPROVED V2 LAYOUT (public/app/music.js mWorkRow; the mockup is
   indyhouse-rounds/ready/song-rows-v2-mockup.html).

   One 72px band per song instead of a ~124px card: a 52px artwork thumb
   inside 10px of padding (the mockup's own, within the 72px Jay set for the
   first cut), the title over one subtitle beside it, the controls trailing. The list is ONE grouped surface with hairlines inset past the thumb
   (docs/ui-conventions.md §4), not a card per song. New and Released draw the
   same row.

   What v2 changed, from Jay's notes on build 29: the play button is the app's
   standard 40px circle instead of the row's biggest thing; the stage bars are
   bigger (18 by 5) and lead the subtitle instead of hiding at the right; the
   microphone is a tinted pill; the ••• opens the app's long-press menu (.hqm,
   shell.css), which a long press on the row opens too.
   Every control keeps a hit area at least 40px tall. */
.mwrows{gap:0;background:var(--g-raised);border:1px solid var(--g-line);border-radius:20px;overflow:hidden}
.mwrow{position:relative;display:flex;align-items:center;gap:10px;min-height:72px;
  padding:10px 10px 10px 12px;cursor:pointer;background:transparent;border:0;border-radius:0}
.mwrow + .mwrow::before{content:"";position:absolute;left:74px;right:0;top:0;height:1px;background:var(--g-line)}
@media (hover:hover){ .mwrow:hover{background:var(--g-sunk)} }
.mwrow:active{background:var(--g-sunk)}
.mtile.mw{width:52px;height:52px;border-radius:14px;font-size:19px}
.mwrow-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.mwrow-top{display:flex;align-items:center;gap:6px;min-width:0}
.mwrow-title{min-width:0;font-family:var(--g-serif);font-size:19px;line-height:1.25;color:var(--g-ink);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mwrow-title:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px;border-radius:4px}
/* The subtitle: the stage bars first, then stage · type · date. The words
   ellipsize; the bars never do. */
/* No overflow clip on the line itself: it would clip the bars' hit area. */
.mwrow-sub{display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;line-height:18px;color:var(--g-muted);
  white-space:nowrap}
.mwrow-subt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A new recording, as a dot: the Latest section above says what it is in words,
   so the row only has to say that there is one. */
.mwnew{flex:none;width:8px;height:8px;border-radius:50%;background:var(--warn)}
.mwrow-acts{display:flex;align-items:center;gap:10px;flex:none}
/* THE SIX STAGE CUBES, STOOD UP AS SIX BARS, 18 TALL AND 5 WIDE, leading the
   subtitle. The box is a 40px-tall control drawn around 18px of bars: its
   padding is given back by a negative margin, so the line stays 18px high
   while the thumb still finds a full-height target. */
.mwstage{flex:none;display:inline-flex;align-items:center;justify-content:center;height:40px;
  padding:11px 8px;margin:-11px -8px;border:0;background:transparent;border-radius:10px}
button.mwstage{cursor:pointer}
@media (hover:hover){ button.mwstage:hover{background:var(--g-sunk)} }
button.mwstage:focus-visible{outline:2px solid var(--g-accent);outline-offset:-2px}
.mwbars{display:inline-flex;align-items:center;gap:3px}
.mwbar{width:5px;height:18px;border-radius:3px;background:var(--g-firm);opacity:.45}
/* A filled bar wears the stage's tone (app.css, .stage-done/-mid/-early); unfilled bars stay dim. */
.mwbar.on{background:var(--stage-on);opacity:1}
/* The microphone as the mockup's pill: 44 by 32, the glyph alone, tinted by
   the answer: the stage mint, the stage gold, or the House's stop red. Its box
   is 40px tall around the 32px pill. */
.mwmicbox{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;
  padding:0;border:0;background:transparent;color:inherit;border-radius:16px}
button.mwmicbox{cursor:pointer}
button.mwmicbox:focus-visible{outline:2px solid var(--g-accent);outline-offset:1px}
.mwmic{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:32px;padding:0 10px;
  border-radius:16px;background:var(--g-neutralbg);color:var(--g-faint)}
.mwmic svg{width:16px;height:16px}
.mwmic-good{background:color-mix(in srgb, var(--good) 12%, transparent);color:var(--good)}
.mwmic-warn{background:color-mix(in srgb, var(--warn) 12%, transparent);color:var(--warn)}
.mwmic-memo{background:color-mix(in srgb, var(--g-stop) 12%, transparent);color:var(--g-stop)}
button.mwmicbox:active{filter:brightness(.95)}
/* Play: the app's own player circle, 40px, plum with a paper triangle. */
.mwplay{min-width:40px;min-height:40px;width:40px;height:40px}
.mwplay .mpi{width:40px;height:40px}
.mwplay .mpi svg{width:15px;height:15px;margin-left:2px}
/* •••: the one .more-btn (app.css), 44 square. The row itself already opens the
   song, so it pulls in at the edge instead of widening the row. */
.mwmore{margin:0 -4px 0 -6px}
/* Narrower than any phone in the matrix: everything tightens rather than
   overflowing, and the title keeps its room. */
@media (max-width:360px){
  .mwrow{gap:8px;padding:10px 8px 10px 10px}
  .mwrow + .mwrow::before{left:62px}
  .mtile.mw{width:44px;height:44px;border-radius:12px;font-size:16px}
  .mwrow-acts{gap:6px}
  .mwmic{min-width:40px;padding:0 8px}
  .mwmicbox{min-width:40px}
  .mwplay{min-width:36px;width:36px}
  .mwplay .mpi{width:36px}
}


/* ------------------------------------------------------------ the table */
.mtbl-wrap{margin:18px 0 0;border:1px solid var(--g-line);border-radius:16px;overflow:auto;background:var(--g-raised)}
.mtbl-wrap:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.mtbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:980px}
.mtbl thead th{text-align:left;padding:0;border-bottom:1px solid var(--g-line);background:var(--g-sunk);white-space:nowrap}
.mth{display:flex;align-items:center;gap:5px;width:100%;border:0;background:none;cursor:pointer;min-height:42px;
  padding:0 14px;font:700 11px var(--g-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--g-muted);text-align:left}
.mth:hover{color:var(--g-ink)}
.mth:focus-visible{outline:2px solid var(--g-accent);outline-offset:-2px}
.marr{opacity:.6;font-size:10px}
.mtbl th.mt-c .mth{justify-content:center}
.mtbl tbody td{padding:9px 14px;border-bottom:1px solid var(--g-line);vertical-align:middle}
.mtbl tbody tr:last-child td{border-bottom:0}
.mtbl tbody tr{cursor:pointer}
.mtbl tbody tr:hover{background:var(--g-sunk)}
.mtbl td.mt-c{text-align:center}
/* The table's trailing ••• (Round 5, October 4, 2026): the same menu button the compact row has. */
.mtbl td.mt-more,.mtbl th.mt-more{width:44px;padding-left:4px;padding-right:8px;text-align:right}
.mtbl td.mt-more .mwmore{margin:0}
.mt-song{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0}
.mt-title{color:var(--g-ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.mt-title:hover{text-decoration:underline}
.mt-play{min-width:40px;min-height:40px;width:40px;height:40px}
.mt-play .mpi{width:38px;height:38px}
.mt-empty{text-align:center;color:var(--g-muted);padding:28px!important}
.mtbl-note{padding:10px 4px 0}
.mcell{display:inline-flex;align-items:center;gap:8px;font:inherit;color:inherit;text-align:left}
.mcal-btn{border:0;background:none;cursor:pointer;padding:3px 4px;border-radius:8px;min-height:40px}
.mcal-btn:hover{background:var(--g-accentbg)}
.mcal{width:28px;height:32px;color:var(--g-accent);flex:none;display:inline-flex}
.mcal svg{width:100%;height:100%}
.mcal.none{color:var(--g-faint)}
.mcal-l{font-size:12.5px;color:var(--g-muted);white-space:nowrap}
.mnotes-w{position:relative;display:inline-flex}
.mnotes-w i{position:absolute;top:-4px;right:-7px;min-width:15px;height:15px;border-radius:8px;background:var(--g-accent);
  color:var(--g-ground);font:700 9.5px/15px var(--g-sans);font-style:normal;text-align:center;padding:0 3px}
html[data-theme="dark"] .mnotes-w i{color:#1B1020}
.mnotes.has{color:var(--g-accent)}

/* ------------------------------------------------------------ questions (upload receipts) */
.mlib-asks{display:flex;flex-direction:column;gap:10px;margin:14px 0 0}
.mlib-asks:empty{display:none}
.mrcpt{border:1px solid var(--line);border-left:4px solid var(--good);border-radius:12px;
  background:var(--raised);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.mrcpt.ask,.mrcpt.wait{border-left-color:var(--warn)}
.mrcpt.same{border-left-color:var(--blue)}
.mrcpt p{margin:0}
.mr-h{font-size:15.5px;color:var(--ink)}
.mr-h b{font-family:var(--f-d);font-weight:400;font-size:17px}
.mr-sub{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--soft)}
.mr-file{font-family:var(--f-m);font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.mr-acts{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.mr-prep{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.mr-choices{display:flex;flex-wrap:wrap;gap:6px}
.mr-c{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;
  border:1px solid var(--firm);border-radius:999px;cursor:pointer;font-size:14px;background:var(--ground)}
.mr-c:has(input:checked){border-color:var(--accent);background:var(--tint)}
.mr-other select,.mr-new input{width:100%;max-width:360px;box-sizing:border-box}
.mr-new label,.mr-other label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}
.mr-ai{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--soft)}
.mr-ai.muted{color:var(--muted)}
.uprow.music{border:0;padding:0;margin:0 0 10px;background:none}
.mp-said{font-size:13px;color:var(--good);margin:0}
.mp-said.bad{color:var(--stop)}
.mp-said:empty{display:none}
.mp-move{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.mp-move[hidden]{display:none}
.mp-move label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}

/* The receipts' labeled badges: a glyph and words together. */
.mb{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-s);font-size:12px;
  line-height:1.25;padding:3px 9px 3px 6px;border-radius:999px;border:1px solid;
  max-width:100%;box-sizing:border-box}
.mb > span{min-width:0;overflow-wrap:anywhere}
.mg{width:12px;height:12px;flex:none;display:block}
.mb-sub{font-style:normal;opacity:.85;font-size:11px;margin-left:2px}
.mb-sub::before{content:"·";margin:0 3px 0 1px}
.mb-work{color:var(--blue);border-color:color-mix(in srgb, var(--blue) 38%, transparent);
  background:color-mix(in srgb, var(--blue) 9%, transparent)}
.mb-plan{color:var(--mauve);border-color:color-mix(in srgb, var(--mauve) 38%, transparent);
  background:color-mix(in srgb, var(--mauve) 9%, transparent)}
.mb-attn{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 42%, transparent);
  background:color-mix(in srgb, var(--warn) 10%, transparent)}
.mb-unset{color:var(--muted);border-color:var(--line);background:var(--sunk)}
.mb-done,.mb-rel{color:var(--good);border-color:color-mix(in srgb, var(--good) 42%, transparent);
  background:color-mix(in srgb, var(--good) 9%, transparent)}
.mb-bad{color:var(--stop);border-color:color-mix(in srgb, var(--stop) 45%, transparent);
  background:color-mix(in srgb, var(--stop) 8%, transparent)}

/* ------------------------------------------------------------ the drawer */
#mpanelwrap .mpanel-scrim{position:fixed;inset:0;z-index:39;background:rgba(20,10,16,.35);opacity:0;transition:opacity .25s}
#mpanelwrap.on .mpanel-scrim{opacity:1}
.mpanel{position:fixed;z-index:39;top:0;right:0;bottom:0;width:min(460px, 100vw);background:var(--g-ground);
  border-left:1px solid var(--g-line);box-shadow:var(--g-shadow);display:flex;flex-direction:column;outline:none;
  font-family:var(--g-sans);color:var(--g-ink);transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
#mpanelwrap.on .mpanel{transform:none}
@media (max-width:899px){
  /* The bottom navigation stays, as it does under a pushed page in Apple
     Music; the drawer ends where it begins. */
  .mpanel{bottom:calc(54px + env(safe-area-inset-bottom, 0px))}
}
@media (max-width:520px){
  #mpanelwrap .mpanel-scrim{display:none}
  .mpanel{left:0;width:auto;border-left:0;box-shadow:none;padding-top:env(safe-area-inset-top, 0px)}
}
html.mpanel-open body{overflow:hidden}
.mpanel-loading{padding:24px;color:var(--g-muted)}
.mpanel-err{padding:0 20px}
/* The visible way back to the catalog from a song's own panel (Phase 4 punch
   list, §9). The panel's ✕ still closes it the same way; this just names
   where that goes, the way the full song page's own back link does. */
/* Back and the song's ••• share the top line (Round 5). */
.mpanel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 12px 0 18px;flex:none}
.mpanel-top .mpanel-back{margin:0}
.mpanel-back{display:inline-flex;align-items:center;gap:3px;flex:none;margin:12px 18px 0;
  min-height:32px;border:0;background:none;padding:0;cursor:pointer;
  font:600 13.5px var(--g-sans);color:var(--g-accent)}
.mpanel-back:hover{text-decoration:underline}
.mpanel-back span{font-size:17px;line-height:1}
.mpanel-head{padding:18px 18px 0;display:flex;gap:14px;align-items:center;flex:none}
.mpanel-ht{flex:1;min-width:0}
.mpanel-h{margin:0;font-family:var(--g-serif);font-weight:400;font-size:26px;line-height:1.1;overflow-wrap:anywhere;outline:none}
.mpanel-stage{display:flex;align-items:center;gap:8px;min-width:0;margin:5px 0 0;font-size:14px;white-space:nowrap}
.mpanel-stage b{font-weight:650}
.mtake-chip{display:inline-block;padding:2px 8px;border-radius:999px;font:600 11.5px/1.35 var(--f-s);
  vertical-align:1px;background:color-mix(in srgb, var(--stage-on) 15%, transparent);color:var(--stage-on)}
.mpanel-sub{margin:3px 0 0;font-size:13px;color:var(--g-muted)}
.mx{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--g-line);background:var(--g-raised);
  color:var(--g-ink);cursor:pointer;font-size:15px;line-height:1}
.mx:hover{border-color:var(--g-accent)}
.mpanel-tabs{display:flex;gap:2px;padding:12px 18px 0;border-bottom:1px solid var(--g-line);flex:none;overflow-x:auto;scrollbar-width:none}
.mpanel-tab{flex:none;border:0;background:none;font:600 13.5px var(--g-sans);color:var(--g-muted);padding:0 12px;
  min-height:44px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.mpanel-tab[aria-selected="true"]{color:var(--g-ink);border-bottom-color:var(--g-cta)}
.mpanel-tab:focus-visible{outline:2px solid var(--g-accent);outline-offset:-2px}
.mpanel-n{font-size:11.5px;color:var(--g-muted);font-weight:500}
.mpanel-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:18px 18px 40px}
.mfield{margin:0 0 20px}
.mfl{margin:0 0 7px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g-muted)}
.mfl-sub{color:var(--g-faint);font-weight:400;text-transform:none;letter-spacing:0}
.mfv{font-size:15px}
.mfv-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mhint{font-size:13px;color:var(--g-muted);margin:6px 0 0;line-height:1.45}
.mhint.center{text-align:center}
.mby{font-size:12px;color:var(--g-faint);margin:6px 0 0;display:flex;align-items:center;gap:6px}
.mby .mav{vertical-align:middle}
.mnone{margin:0;color:var(--g-soft);font-size:14.5px}
.mrowbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 0}
.mnow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mnow-play{width:48px;height:48px}
.mnow-t{min-width:0;flex:1}
.mnow-t b{font-size:15.5px}
.mnow-t .mmic{margin-left:4px}
.mnow-t small{display:block;font-size:12.5px;color:var(--g-muted);margin-top:2px}
.mnow > .minline-seek{flex-basis:100%}
.mstage-edit{margin-top:12px}
.mstage-edit[hidden]{display:none}
.mstage-chips,.mvocals{display:flex;flex-wrap:wrap;gap:6px;border:0;margin:0;padding:0}
.mvocals legend{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--g-muted);margin:0 0 6px;padding:0}
.mvocals[hidden]{display:none}
.mlabel{display:flex;flex-direction:column;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--g-muted);margin:0 0 10px}
.mlabel[hidden]{display:none}
.mlabel input,.mlabel select{text-transform:none;letter-spacing:0;font-weight:400}
.mwait{margin:0}
.mwait-d{margin:8px 0 0;font-size:14px;color:var(--g-muted)}
.mwait-d b{color:var(--g-ink)}
.mcard{border:1px solid var(--g-line);border-radius:16px;background:var(--g-raised);padding:4px 16px}
.mcal-edit{padding:14px 16px}
.mcal-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--g-line)}
.mcard .mcal-row:last-child{border-bottom:0}
.mcal-ic{flex:none;width:36px;height:36px;border-radius:11px;background:var(--g-accentbg);color:var(--g-accent);
  display:flex;align-items:center;justify-content:center}
.mcal-ic svg{width:17px;height:17px}
.mcal-t{flex:1;min-width:0;display:flex;flex-direction:column}
.mcal-k{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--g-muted)}
.mcal-v{font-size:14.5px;font-weight:600;margin-top:2px}
.mcal-v.none{color:var(--g-faint);font-weight:400}
.mcal-foot{display:flex;justify-content:flex-end;margin:0;padding:2px 0 6px}
.mnotes-l{list-style:none;margin:0;padding:0}
.mnote{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--g-line)}
.mnote:last-child{border-bottom:0}
.mnote-b{flex:1;min-width:0}
.mnote-h{margin:0 0 3px;font-size:12px;color:var(--g-muted)}
.mnote-h b{color:var(--g-ink);font-weight:600}
.mnote-t{margin:0;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.mnote-acts{display:flex;gap:6px;margin:4px 0 0 -4px}
.mnote-acts[hidden],.mnote-t[hidden]{display:none}
.mnote-edit textarea{width:100%;border:1px solid var(--g-accent);border-radius:12px;background:var(--g-raised);
  color:var(--g-ink);font:400 16px var(--g-sans);padding:10px 12px;min-height:76px;resize:vertical;outline:none}
.mcomposer{margin-top:12px;border:1px solid var(--g-line);border-radius:14px;background:var(--g-raised);padding:12px}
.mcomposer:focus-within{border-color:var(--g-accent)}
.mcomposer textarea{width:100%;border:0;background:transparent;resize:vertical;min-height:54px;
  font:400 16px var(--g-sans);color:var(--g-ink);outline:none}
.mcomposer textarea::placeholder{color:var(--g-faint)}
.mcomposer-row{display:flex;gap:8px;margin-top:8px;align-items:center;justify-content:space-between}
.mcomposer select{border:1px solid var(--g-line);border-radius:999px;background:var(--g-ground);color:var(--g-ink);
  font:600 12.5px var(--g-sans);padding:0 12px;min-height:36px;max-width:60%;opacity:1;-webkit-appearance:none;appearance:none}
.mlink-card{border:1px solid var(--g-line);border-radius:14px;padding:12px 14px;margin-bottom:8px;background:var(--g-raised)}
.mlink-card.dead{opacity:.72}
.mlink-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.mlink-to{font-weight:700;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mlink-stats{display:flex;gap:14px;font-size:12.5px;color:var(--g-muted)}
.mlink-stats b{color:var(--g-ink);font-size:13.5px}
.mlink-meta{font-size:12px;color:var(--g-faint);margin:6px 0 0}
.mlink-card .mrowbtns{margin-top:10px}
.mlink-card .mrowbtns:empty{display:none}
#mfirst{margin-bottom:10px}

/* Add to calendar and Clear date under the date, lined up with its words: beside
   it, on a phone, they squeezed "Next session" and the date onto two lines each. */
.mcal-row:has(.mcal-acts){flex-wrap:wrap;row-gap:0}
.mcal-acts{display:flex;align-items:center;gap:14px;flex:1 0 100%;padding-left:52px;margin-top:-6px}
.mcal-acts .mlink{display:inline-flex;align-items:center;min-height:40px}
.mdc-btn .mdrop-chev{margin-left:auto;padding-right:4px}

/* Choosers: the calendar that opens a date picker, the target, the mic */
.mdc{flex:1;min-width:0}
.mdc-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;border:0;background:none;padding:0;
  cursor:pointer;text-align:left;font:inherit;color:inherit;border-radius:12px}
.mdc-btn:hover .mdc-ic{background:color-mix(in srgb, var(--accent) 14%, transparent)}
.mdc-btn:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.mdc-ic{flex:none;width:40px;height:44px;border-radius:11px;background:var(--g-accentbg);color:var(--g-accent);
  display:flex;align-items:center;justify-content:center;padding:4px 5px}
.mdc-ic svg{width:100%;height:100%}
.mdc-ic.none{color:var(--g-faint)}
.mdc-ic.none svg[viewBox="0 0 16 16"]{width:17px;height:17px;color:var(--g-accent)}
.mcal-host.picking .mdc-btn{display:none}
.mcal-host.mdc.picking .mcal-in{width:100%;max-width:240px;min-height:44px;font-size:16px}
.mtarget{flex-wrap:wrap;row-gap:8px}
.mtarget .choices{flex:none}
.mrel-cell{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.mplan-link{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  color:var(--g-accent);text-decoration:none;flex:none}
.mplan-link svg{width:15px;height:15px}
.mplan-link:hover{background:var(--g-accentbg)}
.mplan-link:focus-visible{outline:2px solid var(--g-accent);outline-offset:1px}
.mrel-btn{border:0;background:none;cursor:pointer;padding:4px;margin:-4px;border-radius:999px;min-height:36px}
.mrel-btn:hover .mpill,.mrel-btn:hover .mfaint{box-shadow:0 0 0 1px var(--g-accent)}
.mrel-btn .mfaint{display:inline-block;padding:4px 10px;border-radius:999px;border:1px dashed var(--g-firm)}
.mrel-btn:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.mmic-btn{border-radius:50%}
.mmic-slot{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;vertical-align:middle}
.mmic-btn:hover{background:var(--g-sunk)}
.mmic-btn:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.mvic .mmic svg{width:24px;height:24px}
.mvic{flex:none;width:36px;height:36px;border-radius:50%;background:var(--g-sunk);display:flex;align-items:center;justify-content:center}
.mvocal-now{margin-top:14px}
.mlyr-prop{margin-top:12px}
.jayi-act svg{flex:none}

/* Recordings */
.mvers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mver{padding:12px;border:1px solid var(--g-line);border-radius:14px;background:var(--g-raised)}
.mver-top{display:flex;align-items:flex-start;gap:12px}
.mver-play{min-width:40px;min-height:40px;width:40px;height:40px}
.mver-play .mpi{width:38px;height:38px}
.mver-t{flex:1;min-width:0}
.mver-l{margin:0;font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.mver-s{margin:2px 0 0;font-size:12.5px;color:var(--g-muted);overflow-wrap:anywhere}
.mver-s:empty{display:none}
/* A listening copy that could not be made, and the way to try again (src/listening.js). */
.mcopy{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.mcopy .mcopy-again{min-height:44px}
.mver-f{font-family:var(--f-m);font-size:11.5px}
.mver-cur{margin:4px 0 0;font-size:11px;font-weight:700;color:var(--g-good);letter-spacing:.06em;text-transform:uppercase}
.mver-facts{margin:4px 0 0;font-size:12px;color:var(--g-faint)}
.mver-side{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none}
.mvocal-btn{border:0;background:none;padding:0;cursor:pointer;border-radius:999px;min-height:32px}
.mvocal-btn:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.mver .mvocals{margin-top:10px}
.mver .mrowbtns:empty{display:none}

/* ONE ··· PER RECORDING (Jay, 2026-10-01; ready/recordings-dropdown-mockup.html,
   approved). The circular trigger sits right under the vocal pill, right-aligned;
   it fills with ink while its menu is open. The menu is the app's long-press
   menu (.hqm, shell.css), which a long press on the card opens too, and
   Delete asks in a bottom sheet (.mdel-*). */
.mrec-more{-webkit-tap-highlight-color:transparent}
.mrec-more[aria-expanded="true"]{background:var(--g-ink);color:var(--g-ground)}
.mver-dl:empty,.mver-dl:has(> .dl-slot:empty){display:none}
.mver-dl{margin:4px 0 0;font-size:12px;color:var(--g-muted)}
.mver{transition:opacity .3s,transform .3s}
.mver.mver-going{opacity:0;transform:translateX(24px)}
/* The take a new-version notification opened (?take=). */
.mver.mver-landed{border-color:var(--g-accent);box-shadow:0 0 0 1px var(--g-accent)}
@media (prefers-reduced-motion:reduce){ .mver{transition:none} }


/* The Delete sheet's verb is its header's right button, in the recording's red. */
.msheet .sheet-head .r[data-mdel-go]:not(:disabled){color:var(--g-danger)}
.mdel-body{margin:0;font-size:15px;line-height:1.55;color:var(--g-soft)}
.mdel-fine{margin:10px 0 0;font-size:13px;color:var(--g-muted)}
.mdel-warn{margin:12px 0 0;padding:12px 14px;border:1px solid color-mix(in srgb, var(--g-warn) 30%, transparent);
  border-radius:14px;background:color-mix(in srgb, var(--g-warn) 8%, var(--g-raised));color:var(--g-warn);
  font-size:14px;line-height:1.5}
.mdel-warn[hidden]{display:none}
.mlyrics{font-family:var(--g-serif);font-size:18px;line-height:1.75;color:var(--g-soft);white-space:pre-wrap;overflow-wrap:anywhere}
.mlyrics-in{width:100%;min-height:320px;font:400 16px/1.6 var(--g-sans)}
.mlyrvers{margin:14px 0 0}
.mlyrvers summary{font-size:14px;color:var(--g-muted);cursor:pointer;min-height:36px;display:flex;align-items:center;gap:8px;list-style:none}
.mlyrvers summary::-webkit-details-marker{display:none}
.mlyrvers summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
.mlyrvers[open] summary::after{transform:translateY(1px) rotate(225deg)}
.mlyrvers[open]{padding:4px 14px 14px;border-radius:12px;background:var(--g-sunk)}
.mlyrvers .lyrtray-k{margin:8px 0 6px}
.mlyrvers .mlyrics{font-size:16px;color:var(--g-muted)}
.mchecks{list-style:none;margin:0;padding:0}
.mchecks li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:var(--g-muted);border-bottom:1px solid var(--g-line)}
.mchecks li:last-child{border-bottom:0}
.mchecks li.ok{color:var(--g-ink)}
.mcheck{width:22px;height:22px;border-radius:50%;border:1px solid var(--g-firm);flex:none;display:flex;align-items:center;justify-content:center}
.mchecks li.ok .mcheck{background:var(--g-goodbg);border-color:transparent;color:var(--g-good)}
.mcheck svg{width:13px;height:13px}
.mrels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mrel{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--g-line);
  border-radius:12px;background:var(--g-raised)}
.mrel small{display:block;color:var(--g-muted);font-size:12.5px}

/* ------------------------------------------------------------ sheets */
/* A bottom sheet on a phone; a centered modal from 700px up. */
#msheetwrap .msheet-scrim{position:fixed;inset:0;z-index:62;background:rgba(27,16,32,.45);opacity:0;pointer-events:none;transition:opacity .2s}
#msheetwrap.on .msheet-scrim{opacity:1;pointer-events:auto}
.msheet-wrap{position:fixed;inset:0;z-index:63;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.msheet{pointer-events:auto;background:var(--g-raised);border:1px solid var(--g-line);border-bottom:0;border-radius:22px 22px 0 0;
  width:100%;max-width:560px;max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:10px 20px calc(24px + env(safe-area-inset-bottom, 0px));font-family:var(--g-sans);color:var(--g-ink);
  transform:translateY(24px);opacity:0;visibility:hidden;transition:transform .22s ease,opacity .22s,visibility 0s .22s;outline:none}
#msheetwrap:not(.on) .msheet{pointer-events:none}
#msheetwrap.on .msheet{transform:none;opacity:1;visibility:visible;transition:transform .22s ease,opacity .22s}
@media (min-width:700px){
  .msheet-wrap{align-items:center;padding:20px}
  .msheet{border-bottom:1px solid var(--g-line);border-radius:22px;max-height:calc(100vh - 40px);
    padding-bottom:24px;box-shadow:var(--g-shadow)}
  .msheet-grab{display:none}
}
html.msheet-open body{overflow:hidden}
.msheet-grab{width:44px;height:5px;border-radius:99px;background:var(--g-firm);margin:4px auto 14px}
.msheet .sheet-head{margin:-4px -8px 10px}
.msheet-sub{margin:0 0 16px;font-size:13.5px;color:var(--g-muted)}
.msheet-err{background:var(--g-stop);color:#fff;font-size:13.5px;font-weight:600;border-radius:12px;padding:10px 14px;margin:0 0 14px;outline:none}
.msheet-btns{display:flex;gap:10px;margin-top:18px}
.msheet-btns .mbtn{flex:1}
.mpeople{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.mperson{display:flex;align-items:center;gap:12px;width:100%;border:1px solid var(--g-line);background:var(--g-ground);
  border-radius:14px;padding:10px 12px;cursor:pointer;text-align:left;font:inherit;color:inherit;min-height:56px}
.mperson:hover,.mperson:focus-visible{border-color:var(--g-accent);outline:none}
.mperson[aria-current="true"]{border-color:var(--g-good)}
.mperson-t{flex:1;min-width:0}
.mperson-t b{display:block;font-size:14.5px}
.mperson-t span{font-size:12.5px;color:var(--g-muted)}
.mcur{margin-left:auto;font-size:11px;font-weight:700;color:var(--g-good);text-transform:uppercase;letter-spacing:.06em;flex:none}
.mcur.soft{color:var(--g-muted)}
.mfld{margin-bottom:14px}
.mfld > label,.mfld-l{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--g-muted);margin:0 0 6px}
.mfld input[type="text"],.mfld input[type="email"],.mfld textarea{width:100%;background:var(--g-ground);border:1px solid var(--g-line);
  border-radius:12px;padding:10px 12px;font:400 16px var(--g-sans);color:var(--g-ink);min-height:44px}
.mfld textarea{min-height:76px;resize:vertical}
.mfld input:focus,.mfld textarea:focus{outline:2px solid var(--g-accent);outline-offset:1px;border-color:var(--g-accent)}
.mshsong{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.mshsong .mtile{width:48px;height:48px;font-size:18px;border-radius:12px}
.mshsong b{display:block;font-size:15px}
.mshsong span span{font-size:12.5px;color:var(--g-muted)}
.mpurgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mpur{border:1px solid var(--g-line);border-radius:14px;padding:10px 12px;cursor:pointer;background:var(--g-ground);
  text-align:left;font:inherit;color:inherit}
.mpur[aria-pressed="true"]{border-color:var(--g-accent);background:var(--g-accentbg);box-shadow:0 0 0 1px var(--g-accent)}
.mpur:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.mpur b{display:block;font-size:13.5px;margin-bottom:2px}
.mpur span{font-size:12px;color:var(--g-muted);display:block;line-height:1.35}
.mpur small{display:block;margin-top:6px;font-size:11px;color:var(--g-accent);font-weight:600}
.mverpick{display:flex;flex-direction:column;gap:6px}
.mveropt{display:flex;align-items:center;gap:10px;border:1px solid var(--g-line);border-radius:12px;padding:0 12px;min-height:46px;
  cursor:pointer;background:var(--g-ground);font:inherit;color:inherit;text-align:left;width:100%}
.mveropt[aria-pressed="true"]{border-color:var(--g-accent);background:var(--g-accentbg);box-shadow:0 0 0 1px var(--g-accent)}
.mveropt:disabled{opacity:.55;cursor:default}
.mveropt-l{flex:1;font-weight:600;font-size:14px}
.mveropt-l small{font-weight:400;color:var(--g-muted);font-size:12px}
.mexp{display:flex;gap:6px;flex-wrap:wrap}
.mask{margin:0;font-size:14px;background:var(--g-sunk);border-radius:12px;padding:10px 12px}
.mdone{text-align:center;padding:8px 0 4px}
.mdone-ic{width:56px;height:56px;border-radius:50%;background:var(--g-goodbg);color:var(--g-good);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.mdone-ic svg{width:26px;height:26px}
.mlinkbox{display:flex;gap:8px;align-items:center;background:var(--g-sunk);border:1px solid var(--g-line);border-radius:12px;padding:8px 8px 8px 12px;margin:14px 0}
.mlinkbox code{flex:1;min-width:0;font:400 12.5px var(--f-m);color:var(--g-accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------------------------------------ mini-player */
.mplayer{position:fixed;z-index:38;left:10px;right:10px;bottom:calc(66px + env(safe-area-inset-bottom, 0px));
  display:grid;grid-template-columns:46px 1fr 44px 40px;column-gap:12px;align-items:center;
  padding:10px 10px 14px 10px;border-radius:18px;background:var(--g-raised);border:1px solid var(--g-line);
  box-shadow:var(--g-shadow);font-family:var(--g-sans);color:var(--g-ink)}
.mplayer[hidden]{display:none}
.mp-art{display:block;width:46px;height:46px;border-radius:11px;overflow:hidden;text-decoration:none}
.mp-art .mtile{width:46px;height:46px;border-radius:11px;font-size:17px}
.mp-meta{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none;line-height:1.25}
.mp-meta b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-meta small{font-size:12px;color:var(--g-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-st.bad{color:var(--g-stop)}
.mp-btn{width:44px;height:44px;border-radius:50%;border:0;background:var(--g-cta);color:var(--g-oncta);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.mp-btn .mpi{display:flex}
.mp-btn svg{width:16px;height:16px}
.mp-retry{width:auto;padding:0 12px;font:600 12.5px var(--g-sans);border-radius:999px;grid-column:3 / span 2}
.mp-x{width:40px;height:40px;border:0;background:none;color:var(--g-muted);font-size:15px;cursor:pointer;border-radius:50%}
.mp-x:hover{background:var(--g-sunk)}
/* The thin bar along the bottom edge is the seek control itself. */
.mp-bar{position:absolute;left:16px;right:16px;bottom:3px;height:10px;display:flex;align-items:center}
.mp-bar input{-webkit-appearance:none;appearance:none;width:100%;height:10px;margin:0;background:transparent;cursor:pointer;--mpct:0%}
.mp-bar input::-webkit-slider-runnable-track{height:2px;border-radius:2px;
  background:linear-gradient(to right, var(--g-cta) var(--mpct), var(--g-line) var(--mpct))}
.mp-bar input::-moz-range-track{height:2px;border-radius:2px;background:var(--g-line)}
.mp-bar input::-moz-range-progress{height:2px;border-radius:2px;background:var(--g-cta)}
.mp-bar input::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--g-cta);margin-top:-4px;opacity:0;transition:opacity .15s}
.mp-bar input::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--g-cta);opacity:0}
.mplayer:hover .mp-bar input::-webkit-slider-thumb,.mp-bar input:focus-visible::-webkit-slider-thumb{opacity:1}
.mplayer:hover .mp-bar input::-moz-range-thumb,.mp-bar input:focus-visible::-moz-range-thumb{opacity:1}
.mp-at{display:none}

/* The row itself, as the player: shown only for the recording currently
   loaded (Phase 4 punch list, §11). Real waveform seeking when the peaks
   are ready, the same slim line as the mini-player when they are not. */
.minline-seek{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:2px;padding-top:4px}
.minline-seek[hidden]{display:none}
.mseek-wrap{position:relative;flex:1;min-width:0;height:38px;display:flex;align-items:center;touch-action:pan-y;cursor:pointer}
.mver .minline-seek{margin:6px 0 0}

/* Two copies of the same bars (Phase 4 punch list, §11: read from the peaks
   the full song page already draws, via waveHTML -- one pipeline). The
   second copy is clipped to the played fraction and painted in the accent,
   so the waveform itself shows progress the way songs.js's own does. */
.mseek-wave{position:absolute;inset:0;display:flex;align-items:flex-end;gap:1px;pointer-events:none}
.mseek-wave i{flex:1;min-width:1px;background:var(--g-line);border-radius:1px}
.mseek-played{width:0%;overflow:hidden;white-space:nowrap}
.mseek-played i{background:var(--g-cta)}

/* A real range input, invisible but on top: dragging or tapping it seeks
   exactly as a visible slider would, and being a native control it also
   takes a keyboard -- one thing songs.js's click-only wave does not have. */
.mseek-wrap .mp-seek{position:relative;z-index:1;-webkit-appearance:none;appearance:none;
  width:100%;height:100%;margin:0;background:transparent;cursor:pointer;opacity:0}
/* The thumb stays small -- most of the row is track, not thumb. A native
   range input only jumps to where you tapped when the tap lands on the
   track; a thumb sized to the whole control (this used to be 100%x100%)
   makes every tap start a drag from wherever the value already was, so nothing
   seemed to happen on a plain tap. */
.mseek-wrap .mp-seek::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:100%}
.mseek-wrap .mp-seek::-moz-range-thumb{width:10px;height:100%;border:0;background:transparent}
.mseek-wrap.plain{height:20px}
.mseek-wrap.plain .mp-seek{opacity:1;height:20px;--mpct:0%}
.mseek-wrap.plain .mp-seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(to right, var(--g-cta) var(--mpct), var(--g-line) var(--mpct))}
.mseek-wrap.plain .mp-seek::-moz-range-track{height:4px;border-radius:2px;background:var(--g-line)}
.mseek-wrap.plain .mp-seek::-moz-range-progress{height:4px;border-radius:2px;background:var(--g-cta)}
.mseek-wrap.plain .mp-seek::-webkit-slider-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--g-cta);margin-top:-5px}
.mseek-wrap.plain .mp-seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--g-cta)}
.mseek-nowave{flex-basis:100%;margin:0;font-size:11px;color:var(--g-faint)}
.minline-seek .mp-at{display:block;flex:none;font:600 11.5px var(--g-sans);color:var(--g-muted);min-width:74px;text-align:right}
body.mp-on{padding-bottom:calc(94px + 96px + env(safe-area-inset-bottom, 0px))}
/* Over the drawer and its scrim, so pause, seek and close stay usable while a
   song is open (still under the sheets). The drawer leaves room for it. */
html.mpanel-open .mplayer{z-index:40}
body.mp-on .mpanel-body{padding-bottom:110px}
@media (min-width:900px){
  .mplayer{left:50%;right:auto;transform:translateX(-50%);width:min(760px, calc(100vw - 80px));bottom:14px}
  html.mpanel-open .mplayer{left:24px;transform:none;width:calc(100vw - min(460px, 100vw) - 48px)}
  body.mp-on{padding-bottom:120px}
}

/* ------------------------------------------------ songs for a First link
   Select, beside the New / Released switch, as Photos and Mail put it by the
   list it acts on. While choosing, each row wears a round mark, the chosen
   ones filled; the bar with the count and "Send First link" takes the
   mini-player's place, and the player steps aside until choosing is over
   (public/app/music.js mPickStart). */
.mnrrow{display:flex;align-items:center;gap:10px;margin:12px 0 2px}
.mnrrow .mnr{flex:1;min-width:0;margin:0}
.mnrrow + .msearchbar{margin-top:12px}
/* Select as a round glyph button (Jay, 2026-10-01), in the header's button
   language (.hdrup/.prof: 36 across, a ring, the raised ground), with a 1.5px
   ring like the Recordings ···; the finger still gets 44. Ink-filled while
   choosing. */
.mselect{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin:0 4px;padding:0;border:1.5px solid var(--g-firm);border-radius:50%;
  background:var(--g-raised);color:var(--g-soft);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mselect::after{content:'';position:absolute;inset:-5px;border-radius:50%}
.mselect svg{width:20px;height:20px}
.mselect[aria-pressed="true"]{background:var(--g-ink);border-color:var(--g-ink);color:var(--g-ground)}
.mselect:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.mpick{flex:none;width:44px;height:44px;margin:-6px -6px -6px -8px;padding:0;border:0;background:none;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mpick span{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--g-firm);
  display:inline-flex;align-items:center;justify-content:center;color:var(--g-oncta)}
.mpick[aria-pressed="true"] span{background:var(--g-accent);border-color:var(--g-accent)}
.mpick svg{width:13px;height:13px}
.mpick:focus-visible{outline:2px solid var(--g-accent);outline-offset:-2px;border-radius:999px}
.mrow.mpicked{border-color:var(--g-accent)}
.mwrow.mpicked{background:var(--g-sunk)}
.mselbar{position:fixed;z-index:41;left:10px;right:10px;bottom:calc(66px + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;
  border-radius:18px;background:var(--g-raised);border:1px solid var(--g-line);box-shadow:var(--g-shadow);
  font-family:var(--g-sans);color:var(--g-ink)}
.mselbar-n{margin:0;min-width:0;font-size:14px;color:var(--g-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.msel-on .mplayer{visibility:hidden}
body.msel-on .mlib{padding-bottom:110px}
@media (min-width:900px){
  .mselbar{left:50%;right:auto;transform:translateX(-50%);width:min(760px, calc(100vw - 80px));bottom:14px}
}

/* ------------------------------------------------------------ small screens */
@media (max-width:520px){
  /* The compact row on a phone: the name smaller, the view control down to its
     two marks, and the button and the magnifier beside them -- one row, still,
     at 390pt. Nothing here gives up its 44pt target. */
  .mtitle{font-size:30px}
  .mlib .mhead{padding-top:8px;gap:10px}
  .mlib .mhead-acts{gap:6px}
  .mlib .mhead-acts .mbtn{padding:0 12px;font-size:13px}
  .mhead-acts .choices .choice span{display:none}
  .mhead-acts .choices .choice{padding:0 11px}
  .mpurgrid{grid-template-columns:1fr}
}
@media (max-width:360px){
  .mpanel-body{padding-left:14px;padding-right:14px}
  .mpanel-head{padding-left:14px;padding-right:14px;gap:10px}
  .mpanel-tabs{padding-left:10px;padding-right:10px}
  .mpanel-tab{padding:0 8px;font-size:13px}
  .mtile.lg{width:60px;height:60px;font-size:22px}
  .mpanel-h{font-size:23px}
  .mrow{gap:10px;padding:10px}
  .mrow .mtile{width:52px;height:52px;font-size:19px}
  /* The narrowest phones: "+ Add a song" keeps its plus and its spoken name. */
  .mlib .mhead-acts .mbtn span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mrow,.mpanel,.msheet,#msheetwrap .msheet-scrim,#mpanelwrap .mpanel-scrim,.mtile-up{transition:none!important}
  .mplay.busy .mpi,button.mtile.busy .mtile-up{animation:none!important}
}

/* Downloaded audio (installed app only; public/app/downloads.js). A whisper
   beside the row's own buttons: nothing here exists on the web. */
.dl-slot{display:inline-flex;align-items:center;gap:2px;min-height:0}
.dl-slot:empty{display:none}
.dl-mark{font:500 12px var(--g-sans, inherit);color:var(--muted);white-space:nowrap}
.dl-mark[data-dl-done]::before{content:"\2713\00a0";color:var(--muted)}
.dl-off{color:var(--faint);opacity:.8}
.dl-fail{color:var(--stop)}
.dl-quiet .dl-mark{font-size:inherit}
.dl-quiet::before{content:"\00a0\00b7\00a0";color:var(--muted)}
.dl-memo{display:block}
.dl-memo .dl-slot{margin-top:2px}
.dl-unavail{opacity:.4;cursor:default}

/* Phase 3 punch list, item 1: the filter chips are one row that scrolls
   sideways, never two. */
.mchips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--edge, 20px));
  padding-left:var(--edge, 20px);padding-right:var(--edge, 20px);scroll-padding-inline:var(--edge, 20px)}
.mchips::-webkit-scrollbar{display:none}


/* Punch list item 8: approving a final master happens on the song, in place. */
.mapprove-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.mapprove-list .mbtn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Punch list item 9: a paperwork row on the song page. A long filename is one
   line ending in an ellipsis (the full name is its title), never a word broken
   in the middle; its pills wrap below it. Here rather than app.css because the
   paperwork list belongs to the song and this sheet loads on every screen. */
.kvr .v a.doc-title{display:block;max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;overflow-wrap:normal}

/* Archived: one quiet row under the library, and the list it opens
   (app/shelf.js). Every tappable row has a trailing chevron. */
.march-row{display:flex;align-items:center;gap:12px;min-height:48px;margin:22px 0 0;padding:0 14px;
  border:1px solid var(--g-line);border-radius:12px;background:var(--g-raised);
  color:var(--g-muted);text-decoration:none;font:500 14px var(--g-sans)}
.march-row:active{background:var(--g-sunk)}
.march-t{flex:1;min-width:0}
.march-back{margin:12px 0 0}
.march-h{margin:6px 0 14px}
.march-h[tabindex="-1"]:focus{outline:none}
.march-item{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;
  border-bottom:1px solid var(--g-line)}
.march-it{flex:1;min-width:0}
.march-it b{display:block;font:500 15px var(--g-sans);color:var(--g-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.march-it small{display:block;margin-top:2px;font:400 12.5px var(--g-sans);color:var(--g-muted)}
.march-empty{padding:18px 0;color:var(--g-muted)}

/* Review N past-due: the way into the release card queue (app/release-review.js). */
.mreviewpast{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:0 0 10px;
  background:transparent;color:var(--g-ink);border:1px solid var(--g-line,currentColor);border-radius:16px;
  cursor:pointer;font:600 14px var(--g-sans)}
.mreviewpast:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.mreviewpast{gap:7px}
/* The amber attention badge (music.js mAttnBadge): the New pill's fill, as a count. */
.mbadge-attn{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  padding:0 7px;border-radius:999px;background:var(--warn);color:#fff;font:700 13px/1 var(--g-sans);
  font-variant-numeric:tabular-nums}
html[data-theme="dark"] .mbadge-attn{color:#1B1020}

/* ---- One song page: the Credits entry and the credits page (Round 5, Oct 4, 2026)
   The panel's Overview ends with ONE row to the credits page: an icon tile, a
   bold title, a muted one-line summary and a chevron (every tappable row has
   one). The credits page's own heading is serif, the panel's voice, with the
   song title as the way back. Approved mockup screen 3. */
.mcredits{display:flex;align-items:center;gap:12px;margin:8px 0 20px;padding:12px 14px;min-height:56px;
  border:1px solid var(--g-line);border-radius:14px;background:var(--g-raised);color:var(--g-ink);
  text-decoration:none;font-family:var(--g-sans)}
.mcredits:active{background:var(--g-sunk)}
.mcredits:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.mcredits-ic{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:10px;background:var(--g-accentbg);color:var(--g-accent)}
.mcredits-t{flex:1;min-width:0}
.mcredits-t b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.mcredits-t small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--g-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcredits-chev{flex:none;color:var(--g-faint)}
.credits-head{margin:0 0 8px}
.credits-back{display:inline-flex;align-items:center;gap:3px;min-height:32px;margin:0 0 6px;
  font:500 15px/1 var(--f-s);color:var(--accent);text-decoration:none}
.credits-h{margin:0;font-family:var(--g-serif);font-weight:400;font-size:34px;line-height:1.05;color:var(--ink)}
.credits-sub{margin:6px 0 12px;font:400 14px/1.4 var(--f-s);color:var(--muted)}