/* mobile.css — loaded only via media="(max-width:720px)"; never applied >=768px.
   All phone styling lives here. Existing @media(max-width:720px) blocks in
   app.css will be migrated here in later tasks. */
:root { --mnav-h: 58px; }         /* bottom tab bar height, referenced by later tasks */
body { /* marker used by the parity/guard test; harmless */ }

/* bottom sheet */
.msheet[hidden] { display:none; }
/* The sheet spans the whole screen, but only its panel (and, when shown, its
   scrim) may capture touches — otherwise this full-bleed overlay swallows every
   swipe/tap over the score, the coverage strip and the floating tools beneath. */
.msheet { position:fixed; inset:0; z-index:60; pointer-events:none; }
.msheet__scrim { position:absolute; inset:0; background:rgba(15,20,35,.42); opacity:0; transition:opacity .2s; pointer-events:auto; }
.msheet__panel { pointer-events:auto; }
.msheet__panel button { touch-action:manipulation; }   /* immediate taps, no double-tap-zoom delay */
.msheet.is-open .msheet__scrim { opacity:1; }
.msheet__panel { position:absolute; left:0; right:0; bottom:0; background:#fff;
  border-radius:20px 20px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.28);
  padding:8px 16px calc(16px + env(safe-area-inset-bottom)); transform:translateY(100%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1); max-height:92dvh; overflow:auto; }
.msheet.is-open .msheet__panel { transform:translateY(0); }
.msheet.is-peek .msheet__panel { transform:translateY(0); }   /* peek height set by content */
.msheet__grab { width:38px; height:4px; border-radius:4px; background:#D9D3C4; margin:2px auto 12px; }
.msheet.is-dragging .msheet__panel { transition:none; }

/* app chrome: two-row app bar + bottom tab bar */
.topbar { display:none; }                       /* desktop bar hidden on phones */
body { padding-top:96px; padding-bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom)); }
.mtopbar { display:block; position:fixed; top:0; left:0; right:0; z-index:50; color:#fff;
  background:linear-gradient(180deg,#1F2C49,#16203A); padding:calc(10px + env(safe-area-inset-top)) 14px 12px; }
.mtopbar__row { display:flex; align-items:center; justify-content:space-between; }
.morgchip { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2); color:#fff; font:inherit; font-size:13px; font-weight:600;
  padding:6px 11px; border-radius:22px; }
.morgchip__dot { width:16px; height:16px; border-radius:5px; background:#A8791F; display:grid; place-items:center; font-size:10px; }
.morgchip__name { max-width:52vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mtopbar__upload { width:34px; height:34px; border-radius:50%; background:#A8791F; color:#fff; display:grid; place-items:center; }
.mtopbar__upload svg { width:19px; height:19px; }
.mtopbar__title { font-family:var(--font-display); font-size:22px; font-weight:600; margin-top:9px; }
.mtabbar { position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; background:#fff;
  border-top:1px solid #E7E2D6; height:calc(var(--mnav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom); }
.mtab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10px; color:#74777F; }
.mtab svg { width:22px; height:22px; }
.mtab.is-on { color:#1F2C49; font-weight:600; }
.msheet__label { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#74777F; margin:0 0 8px; }
.morow { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:0;
  font:inherit; color:#1B1D24; padding:11px 8px; border-radius:11px; }
.morow.is-active { background:#F2E9D2; }
.morow__av { width:30px; height:30px; border-radius:8px; background:#26324f; color:#fff; display:grid; place-items:center; font-size:12px; font-weight:600; }
.morow form { margin:0; }

/* menu tab (settings page): org switch + account links + logout */
.mobile-only { display:block; }           /* visible on phones (this file only loads <=720px) */
.desktop-only { display:none; }           /* the wide desktop table is replaced by cards on phones */

/* Jobs: grouped attention cards (Needs review / Processing / Done) */
.mjobs__grp { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#74777F; margin:8px 2px; }
.mjcard { background:#fff; border:1px solid #E7E2D6; border-radius:13px; padding:11px 12px; margin-bottom:9px; }
.mjcard__top { display:flex; align-items:center; gap:8px; }
.mjcard__name { font-family:var(--font-display); font-size:15px; font-weight:600; }
.mjstat { margin-left:auto; font-size:10px; font-weight:600; padding:3px 8px; border-radius:20px; }
.s-review{ background:#F2E9D2; color:#8C6515; } .s-proc{ background:#E7EDF7; color:#2C4778; }
.s-done{ background:#E6F0EA; color:#356B4F; } .s-fail{ background:#F5E4E1; color:#A6362F; }
.mjcard__btn { display:block; width:100%; text-align:center; margin-top:9px; background:#1F2C49; color:#fff; padding:9px; border-radius:9px; font-weight:600; }
/* Secondary action on a card (Run again): present but never competing with the
   primary one above it. */
.mjcard__btn--ghost { background:transparent; color:#1F2C49; border:1px solid #C9D2E4; }
.mjbar { margin-top:9px; height:5px; border-radius:5px; background:#E7E2D6; overflow:hidden; } .mjbar i{ display:block; height:100%; background:#2C4778; }
.mjcard__meta { font-size:11px; color:#74777F; margin-top:5px; }
.mmenu { margin-bottom:18px; }
.mmenu__card { background:#fff; border:1px solid #E7E2D6; border-radius:14px; padding:13px; margin-bottom:12px; }
.mmenu__label { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#74777F; margin-bottom:9px; }
.mmenu__row { display:flex; align-items:center; width:100%; text-align:left; background:none; border:0; font:inherit;
  color:#1B1D24; padding:11px 2px; font-size:15px; }
.mmenu__row + .mmenu__row { border-top:1px solid #F0ECE0; }
.mmenu__go { margin-left:auto; color:#8C6515; font-weight:600; font-size:13px; }
.mmenu__row--danger { color:#A6362F; }

/* Library + piece-detail: full-width cards on phones (Task 2.2) */
.collection.is-cards, .collection.is-rows { display:flex; flex-direction:column; gap:11px; }
.collection .item { display:flex; gap:12px; background:#fff; border:1px solid #E7E2D6; border-radius:14px;
  padding:10px; box-shadow:0 1px 2px rgba(27,29,36,.05); align-items:flex-start; }
.collection .item__cover { width:52px; height:68px; border-radius:8px; flex:none; }
.collection .item__title { font-family:var(--font-display); font-size:16px; }
.collection .item__meta { margin-top:4px; }
/* The card/rows toggle is irrelevant on phones — one card layout, nothing to
   switch between. Named by its own attribute rather than by `.seg`: a bare
   `.toolbar .seg` once swallowed the sort switch too, which shared the class
   and the toolbar, and left no way to reorder parts on a phone at all. */
.toolbar .seg[data-view-group] { display:none; }
.toolbar .search { max-width:none; flex-basis:100%; }


/* redundant in-page heading: the app bar already shows the section title.
   Keep pagehead actions (Trash/Upload etc.) reachable — only hide the
   heading/eyebrow/sub text, and only on the Library + piece-detail pages. */
.page-library .pagehead h1, .page-library .pagehead .sub, .page-library .pagehead .eyebrow,
.page-piece-detail .pagehead h1, .page-piece-detail .pagehead .sub, .page-piece-detail .pagehead .eyebrow { display:none; }
.page-library .pagehead, .page-piece-detail .pagehead { margin-bottom:10px; }
.page-library .pagehead .actions, .page-piece-detail .pagehead .actions { display:flex; }

/* Full-bleed gesture score viewer (Mobile.Viewer, Task 3.1/3.2) */
.mviewer { position:absolute; inset:0; background:#0e1119; overflow:hidden; touch-action:none; }
.mviewer__img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  max-width:98%; max-height:98%; will-change:transform; user-select:none; -webkit-user-drag:none; }
.mviewer__under { visibility:hidden; }                         /* the next page, revealed beneath the top sheet */
.mviewer__img.is-lifting { box-shadow:0 12px 34px rgba(0,0,0,.55); }   /* the top sheet lifts off the stack */
/* drag-left-then-down "add next page" gesture hint */
.mviewer--addcand::after { content:"↓ now drag down to add the next page"; position:absolute;
  top:15%; left:50%; transform:translateX(-50%); background:rgba(20,26,40,.9); color:#fff;
  font-size:12px; font-weight:600; padding:8px 13px; border-radius:20px; z-index:5; white-space:nowrap;
  box-shadow:0 3px 12px rgba(0,0,0,.4); }
.mviewer--addcand.mviewer--addarmed::after { content:"Release to add the page"; background:#356B4F; }
.mviewer__dots { position:absolute; left:0; right:0; bottom:8px; display:flex; gap:5px; justify-content:center; z-index:3; }
.mviewer__dots span { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); }
.mviewer__dots span.on { background:#fff; }

/* Immersive simple-review wizard (Task 4.1): full-bleed viewer + question sheet */
.mreview { position:fixed; inset:0; top:0; z-index:40; background:#0e1119; }
.is-reviewing .mtabbar, .is-reviewing .mtopbar { display:none; }   /* immersive: hide app chrome during review */
/* Stop the browser's pull-to-refresh from reloading mid-drag, and keep a scrolling
   card from chaining its scroll to the page. */
body.is-reviewing { overscroll-behavior:none; }
.mreview .msheet__panel, .mexpert .msheet__panel { overscroll-behavior:contain; }
.mreview__stage { position:absolute; inset:0; }
.mq__title { font-family:var(--font-display); font-size:16px; font-weight:600; margin-bottom:10px; text-align:center; }
.mq__btn { display:block; width:100%; padding:13px; border-radius:12px; font-size:15px; font-weight:600; margin-bottom:9px; border:0; }
.mq__btn.yes { background:#356B4F; color:#fff; } .mq__btn.no { background:#fff; color:#1B1D24; border:1px solid #D9D3C4; }

/* Wizard secondary actions + instrument editor sheet (Task 4.2) */
.mq__links { display:flex; justify-content:space-between; gap:8px; margin-top:2px; }
.mq__links .lk { flex:1; background:none; border:0; font:inherit; font-size:12.5px; font-weight:600;
  color:#74777F; padding:12px 4px; text-align:center; min-height:44px; }   /* full-height tap target */
.mq__edit-sel, .mq__edit-voice { display:block; width:100%; padding:11px; margin-bottom:10px;
  border-radius:10px; border:1px solid #D9D3C4; font:inherit; font-size:15px; background:#fff; color:#1B1D24; }
.mq__edit-save[disabled] { opacity:.45; }
.mq__hint { font-size:12px; color:#74777F; text-align:center; margin-bottom:10px; }
.mq__morehint { font-size:11px; color:#A7A290; text-align:center; margin:2px 0 2px; letter-spacing:.01em; }

/* Immersive expert reviewer (Tasks 5.1/5.2): full-bleed viewer + coverage + editor sheet */
.mexpert { position:fixed; inset:0; z-index:40; background:#0e1119; }
.mexpert__stage { position:absolute; inset:0; }
.mcov { position:absolute; top:calc(10px + env(safe-area-inset-top)); left:14px; right:14px; height:6px; display:flex; gap:2px; z-index:3; }
.mcov i { flex:1; border-radius:2px; background:rgba(255,255,255,.25); }
.mcov i.ok { background:#356B4F; } .mcov i.cur { background:#A8791F; }

/* Shared review controller (both modes) */
.mrv__stage { position:absolute; inset:0; }
.mcov i.gap { background:#C6532B; } .mcov i.col { background:#B58A2E; }   /* gap=uncovered, col=overlap */

/* End-of-part actions (advanced) */
.mend { margin-top:12px; padding-top:12px; border-top:1px solid #EFEBDF; display:flex; flex-direction:column; gap:8px; }
.mend.is-hidden { display:none; }
.mend__label { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:#74777F; }
.mend__btn { padding:11px; border-radius:10px; border:1px solid #D9D3C4; background:#fff; font:inherit; font-size:14px; font-weight:600; color:#1B1D24; }
.mend__btn.ok { background:#356B4F; color:#fff; border-color:#356B4F; }
.mwarn { font-size:11.5px; font-weight:600; color:#8C4A2F; background:#FBEEE7; border:1px solid #EAD3C7; border-radius:8px; padding:6px 9px; margin-bottom:9px; }

/* Floating rotate + undo controls (both modes). z-index above the sheet (60) so
   an expanded card never covers them; deliberately different shapes/colours so
   they're never mistaken for each other. */
.mrv__tools { position:absolute; right:12px; top:calc(28px + env(safe-area-inset-top)); z-index:62;
  display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.mrv__tool { border:0; color:#fff; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 3px 12px rgba(0,0,0,.45); -webkit-tap-highlight-color:transparent; transition:transform .1s ease; }
.mrv__tool:active { transform:scale(.9); }
.mrv__tool--rotate { width:52px; height:52px; border-radius:50%; background:#A8791F; font-size:23px; }   /* brass circle, icon only */
.mrv__tool--undo { height:44px; padding:0 15px; border-radius:22px; gap:5px; background:#26324F; font-size:17px; font-weight:600; }  /* navy pill, labelled */
.mrv__tool__lbl { font-size:14px; letter-spacing:.01em; }
.mrv__tool[disabled] { opacity:.3; }
.mstep { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.mstep span { font-size:12.5px; font-weight:600; color:#3C404B; }
.mstep .arw { width:44px; height:44px; border-radius:11px; border:1px solid #E7E2D6; background:#fff; font-size:20px; color:#1F2C49; }
.mpart { display:flex; align-items:center; gap:9px; }
.mpart b { font-family:var(--font-display); font-size:16px; }
.mrg { font-family:var(--font-mono); font-size:11px; color:#74777F; }
.mchk { margin-left:auto; font-size:12px; font-weight:600; color:#356B4F; background:#E6F0EA; border:1px solid #BBD6C5; padding:10px 14px; border-radius:20px; min-height:40px; }
.mchk.on { background:#356B4F; color:#fff; }
.mlab { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:#74777F; display:block; margin:11px 0 4px; }
.minp { width:100%; border:1px solid #D9D3C4; border-radius:9px; padding:9px 11px; font:inherit; font-size:14px; }
.mtwo { display:flex; gap:9px; } .mtwo > div { flex:1; }
.macts { display:flex; gap:9px; margin-top:11px; }
.macts button { flex:1; padding:10px; border-radius:10px; font-weight:600; font-size:13px; border:1px solid; }
.macts .mk { background:#E6F0EA; color:#356B4F; border-color:#BBD6C5; }
.macts .rm { background:#fff; color:#A6362F; border-color:#E3C7C2; }
.mconfirm { display:block; width:100%; margin-top:12px; padding:14px; border-radius:12px; background:#A8791F; color:#fff; font-size:15px; font-weight:600; border:0; }

/* Upload form: full-width on phones (Task 6.1) */
.page-upload .panel { max-width:none !important; padding:16px; }
.page-upload .form-row > * { flex:1 1 100% !important; width:auto !important; }
.page-upload .field[style*="max-width"] { max-width:none !important; }
.page-upload input[type=file] { width:100%; }
.mexit { display:block; width:100%; margin-top:10px; padding:9px; background:none; border:0;
  color:#74777F; font:inherit; font-size:13px; text-align:center; }

/* Review control card: floating drag-to-slide bottom card (interactive sheet).
   Peek has nothing to scroll — a drag anywhere expands. Only an over-tall
   EXPANDED body scrolls, and the grab handle still owns the collapse gesture. */
.mreview .msheet__panel, .mexpert .msheet__panel {
  left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  border-radius:20px; box-shadow:0 12px 36px rgba(0,0,0,.45);
  overflow:hidden;                       /* peek: nothing scrolls */
  transition:height .24s cubic-bezier(.22,.61,.36,1), transform .24s;
}
.mreview .msheet.is-expanded .msheet__panel,
.mexpert .msheet.is-expanded .msheet__panel { overflow-y:auto; -webkit-overflow-scrolling:touch; }
.msheet.is-dragging .msheet__panel { transition:none; }
.msheet__grab { cursor:grab; height:4px; padding:14px 0; margin:-12px auto 6px;   /* larger touch target */
  width:38px; box-sizing:content-box; background-clip:content-box; background-color:#D9D3C4; border-radius:4px; }
/* the drag-revealed section (secondary actions / full editor) */
.mmore { margin-top:12px; padding-top:12px; border-top:1px solid #EFEBDF; }
.mq__links.mmore { display:flex; flex-direction:column; gap:8px; }

/* ---------- programs & printing (round 2 mobile pass) ---------- */
/* program detail: bigger drag hitbox, rows stay on one line (name ellipsizes) */
.progpiece { flex-wrap: nowrap; gap: 8px; }
.progpiece__drag { padding: 12px 10px; margin: -12px -4px -12px -10px;
  font-size: 17px; }
.progpiece__name { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.progpiece .mono, .progpiece .muted { white-space: nowrap; }
/* print page: rows stack — name/meta full width, stepper on its own line right */
.printrow { flex-wrap: wrap; row-gap: 6px; }
.printrow .stepper { margin-left: auto; }
.printrow--exc { padding-left: 28px; }
/* The quick bar scrolls horizontally instead of wrapping into a wall. Named
   by id, not by `.toolrow`: this also applies to the PDF-order row below it,
   and `overflow` other than visible clips absolutely positioned descendants —
   it swallowed the sort menu whole. That row wraps like any other toolrow. */
#print-quickbar { flex-wrap: nowrap; overflow-x: auto;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
#print-quickbar > * { flex-shrink: 0; }
/* sticky footer must sit above the bottom tab bar */
.printfooter { bottom: calc(var(--mnav-h) + env(safe-area-inset-bottom) + 10px); }
/* chips and add-reveal: full-width friendly */
.searchfield { min-width: 0; width: 100%; }
.addreveal { display: block; }
/* config form: single column, steppers right-aligned */
.rulerow { flex-wrap: wrap; }
.rulerow__text { flex-basis: calc(100% - 50px); }
#base-rule-stepper { margin-left: auto; }
.cfg-item { flex-wrap: wrap; }
.cfg-item .select { flex-basis: 100%; }
.cfg-item .stepper { margin-left: auto; }
/* part print modal: full-width card */
#modal-printpart .modal__card { width: calc(100vw - 24px); max-width: none; }

/* ============================================================================
   Row-based lists and wide toolbars on phones.

   Several screens are laid out for a wide row and were never adjusted for a
   390px viewport, so they overran the viewport and the page scrolled sideways.
   Found by walking every route at 390px.
   ========================================================================== */

/* ---- parts list (piece page) ----------------------------------------------
   `.collection.is-rows` puts an 86px page-range pill, then the title and meta
   side by side with the meta pushed right (app.css). On a phone the row ran off
   the card and the "Print" button was clipped; the page range also appeared
   twice, once in the pill and once in the meta. */
.collection.is-rows .item { flex-wrap:wrap; align-items:center; row-gap:10px; }
.collection.is-rows .item__rowcat { width:auto; flex:none; }
.collection.is-rows .item__body { flex:1 1 100%; min-width:0; flex-direction:column;
  align-items:stretch; gap:10px; }
.collection.is-rows .item__title { white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
.collection.is-rows .item__meta { margin-left:0; flex-wrap:wrap; gap:8px; }
.collection.is-rows .item__meta > .mono.muted { display:none; }   /* the pill already has it */
.collection.is-rows .item__meta .btn { flex:1 1 0; min-width:7.5rem; min-height:42px; }
.collection.is-rows .item__actions { flex:1 1 100%; margin-left:0; gap:8px; }
.collection.is-rows .item__actions .btn { flex:1 1 0; min-height:42px; }

/* ---- print planner --------------------------------------------------------
   The toolrow puts a label, a 260px select and three buttons on one line. The
   sticky footer parked on top of the instrument list and behind the tab bar,
   covering the very rows you set counts on. */
.toolrow .label { flex:1 1 100%; }
.toolrow .select, .toolrow .select--sm { max-width:none; flex:1 1 100%; }
.toolrow .btn { flex:1 1 auto; min-height:40px; }
.toolrow .seg { flex:1 1 100%; }

/* Two lines per row — caret and name, then count and stepper.

   Ordering the items alone was not enough: flex wraps only once a line is full,
   so a short name like "Bassklarinette" still left room for the count beside it
   while "1st C Baritones · 2" pushed it down. Rows then differed in shape from
   one instrument to the next. The existing .spacer is repurposed as a hard line
   break (flex-basis:100%), which makes every row identical regardless of how
   long the German instrument name happens to be. */
.printrow { flex-wrap:wrap; row-gap:6px; padding:12px; }
.printrow__toggle { order:1; flex:0 0 auto; }
.printrow__name { order:2; flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.printrow .spacer { order:3; flex:0 0 100%; height:0; margin:0; }
.printrow__meta { order:4; flex:0 0 auto; }
.printrow .stepper { order:5; margin-left:auto; }
.printrow--exc { padding-left:22px; }

.printfooter { flex-direction:column; align-items:stretch; row-gap:8px;
  bottom: calc(var(--mnav-h) + env(safe-area-inset-bottom) + 10px); padding:10px 12px; }
.printfooter > span:first-child { font-size:13.5px; }
.printfooter__actions { flex-wrap:wrap; }
.printfooter__actions .btn { flex:1 1 auto; min-height:42px; font-size:13.5px; }
#print-app { padding-bottom: calc(var(--mnav-h) + 90px); }   /* clear the sticky footer */

/* ---- programmes ---------------------------------------------------------- */
.progrow { flex-wrap:wrap; row-gap:8px; }
.progrow__main { flex:1 1 100%; min-width:0; flex-wrap:wrap; row-gap:2px; }
.progrow__actions { flex:1 1 100%; }
.progrow__actions .btn { flex:1 1 auto; }
.progpiece { flex-wrap:wrap; row-gap:6px; padding:12px; }
.progpiece__name { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.progpiece .spacer { flex-basis:100%; height:0; }

/* Flip the info tooltip left near the right edge so it cannot widen the page. */
.infoicon::after { left:auto; right:0; top:22px; max-width:min(78vw, 260px); }

/* The reveal-to-search control must not impose a minimum width. */
.addreveal, .addreveal__btn { max-width:100%; }
.searchfield { min-width:0; max-width:100%; }
.searchfield .dropdown__menu { max-width:100%; }