/* Midi2Score, iOS skin. A variant of the PHONE surface, loaded after app.css and
   chosen per browser with /?ui=ios, dropped with /?ui=paper. Every rule here
   sits inside the same max-width:900px query app.css uses, so the desktop cannot
   see this file at all.

   It briefly held the desktop's information architecture too — for one day,
   2026-08-10, so the owner could approve the new desktop before Cecilia met it.
   That block now lives in `app.css` where it belongs, and the cookie is back to
   meaning one thing: which phone skin you get.

   What changes: the editorial page becomes a native-feeling app. System text for
   every piece of chrome, the brand serif kept for the large title alone;
   hairline-ruled runs become inset grouped cards on a recessed ground; the
   offset-plate button becomes a filled iOS control; the dock becomes a real
   button row over a frosted tab bar with Phosphor glyphs.

   Three elements `app.css` now emits on every page are hidden below 901px there;
   this file puts two of them back in phone shapes — the appearance control as a
   44px glyph, the decisions pointer as a grouped-card row. The nav stays hidden:
   down here the dock is the navigation.

   Donors, per the taste corpus: attio (colour discipline, type roles), maven
   (motion), hoxton (full-bleed layout). The palette is not a donor's: the
   paper/ink/accent tokens are this product's brand and carry over unchanged,
   with two recessed-ground values added because a grouped list needs a card
   lighter than the field behind it. */

:root{
  --ios-ground:#EDF1F6; --ios-card:#FFFFFF; --ios-sep:rgba(20,24,33,.1);
  --ios-fill:rgba(20,24,33,.05);
  --ios-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --ios-title:1.0625rem;   /* 17px: a row label, a bar button, body */
  --ios-large:2.125rem;    /* 34px: the large title */
  --ios-cap:.8125rem;      /* 13px: section headers and footnotes */
  --ios-tab:.625rem;       /* 10px: tab bar labels */
  --ios-r:.75rem;          /* the one corner system: cards and controls */
  --ios-r-sm:.5rem;
  --ios-bar:2.75rem;       /* nav bar */
  --ios-tabbar:3.0625rem;  /* tab bar, before the home indicator */
  --ios-row:2.75rem;       /* minimum row height, and the tap target floor */
  --weight-semibold:600;  /* iOS chrome sits a step above app.css's medium */
}
/* Three states, and the order matters: the phone's preference applies
   unless Light was chosen explicitly, and an explicit Dark wins outright.
   A bare media query cannot be beaten by an attribute, which is why the
   `:not()` guard is here rather than relying on source order. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ios-ground:#0A0D11; --ios-card:#171D25; --ios-sep:rgba(230,234,241,.1);
    --ios-fill:rgba(230,234,241,.05);
  }
}
:root[data-theme="dark"]{
    --ios-ground:#0A0D11; --ios-card:#171D25; --ios-sep:rgba(230,234,241,.1);
    --ios-fill:rgba(230,234,241,.05);
  }

@media(max-width:900px){
  body{background:var(--ios-ground); font-family:var(--ios-font)}
  .wrap{padding-inline:var(--space-4)}
  .rule2{display:none}

  /* ── nav bar ── */
  /* No safe-area padding here. Insets are only non-zero under
     `viewport-fit=cover`, which this page no longer asks for: it is a normal
     page, not an edge-to-edge app, so the browser keeps us inside the safe
     viewport itself. Android Chrome was reporting a ~50px top inset anyway,
     and paying it put a band of dead space above a header that is already a
     44px bar. The bar hugs the top of whatever viewport it is given. */
  .masthead{background:var(--ios-ground)}
  .masthead .wrap{min-height:var(--ios-bar); align-items:center; padding-block:0}
  /* The wordmark, the account name and Sign out are all `app.css`'s now: one
     header on both surfaces was the point, and three overrides here were most of
     what made the phone a different product (2026-08-21, app.css section 11).
     What is still the phone's own: the bar is centred rather than baseline-set,
     and the project half of the account label is dropped — this bar has room for
     one word, and the username is the half that is always meaningful. */
  .mast-nav{gap:var(--space-4); align-items:center}
  .mast-nav .chip .proj{display:none}
  .mast-nav a[href="/review"]{display:none}
  /* Appearance: `app.css` draws it — same glyph, same three states, same size on
     both surfaces. All the phone adds is the thumb: a 44px box around an 18px
     glyph, which is a bigger target without being a bigger-looking control. */
  .mast-nav .theme{width:var(--ios-row); height:var(--ios-row);
    margin-right:calc(-1 * var(--space-2))}
  .mast-nav .theme:active{opacity:.4}

  /* Mini buttons elsewhere on the phone stay the platform's tinted text. The one
     in the masthead is not one of them any more — see `.mast-nav .btn.mini`. */
  .btn.mini{font-family:var(--ios-font); font-size:var(--ios-title);
    text-transform:none; letter-spacing:-.01em; font-weight:var(--weight-regular);
    color:var(--accent); background:none; border:0; box-shadow:none; padding:0}
  .btn.mini:active{transform:none; box-shadow:none; opacity:.4}

  /* ── large title ── */
  .titleband{background:var(--ios-ground)}
  .titleband .wrap{padding-block:var(--space-1) var(--space-3); border-bottom:0}
  .kicker{display:none}
  /* The large title is the one place the brand serif is kept: an iOS shell
     around a publisher's voice, rather than a system app wearing a wordmark. */
  h1{font-family:var(--font-serif); font-size:var(--ios-large);
    font-weight:var(--weight-medium); line-height:1.08;
    letter-spacing:-.022em; margin:0}
  .dek.facts{font-family:var(--ios-font); font-size:var(--text-sm);
    color:var(--ink-muted); margin-top:var(--space-1)}
  .later{background:var(--ios-card); border:0; border-radius:var(--ios-r);
    font-family:var(--ios-font); font-size:var(--ios-cap);
    padding:var(--space-3) var(--space-4); margin-top:var(--space-3);
    line-height:var(--leading-snug)}

  /* The four tabs are links to routes, so a route shows everything it has as
     one scrolling page instead of hiding most of itself behind panel buttons.
     The review queue keeps its own one-at-a-time column, which app.css sets on
     the `open` panel and the script drives. */
  .panel{display:block}
  /* Each rail belongs to whichever tab owns its job. House style and the
     settled rows are the Project tab; what a cue left out is part of Score. */
  [data-here="new"] .rail, [data-here="review"] .rail{display:none}
  /* Decisions have one home. Score ends with a row that opens it. */
  [data-here="cue"] .look{display:none}
  /* "Next: set another cue" was a link to a screen that is now a permanent tab,
     which is why the agreed map dropped it. The desktop rail keeps it. */
  .rail-block.next{display:none}
  .pointer{display:flex; align-items:center; justify-content:space-between;
    gap:var(--space-3); margin-top:var(--space-5);
    background:var(--ios-card); border-radius:var(--ios-r);
    padding:var(--space-3) var(--space-4); min-height:var(--ios-row);
    font-family:var(--ios-font); font-size:var(--ios-title);
    letter-spacing:-.01em; color:var(--ink)}
  .pointer .go{color:var(--accent); font-size:var(--ios-cap)}
  .pointer .go::after{content:" \203A"}
  /* The weight is pinned, not inherited: `app.css` now carries this line for the
     paper skin too and sets it at 300, which is the editorial footnote weight.
     iOS chrome is regular, and without this the phone's line quietly lightened. */
  .unsaved{font-family:var(--ios-font); font-size:var(--ios-cap);
    font-weight:var(--weight-regular); color:var(--ink-muted);
    padding-inline:var(--space-4); margin:var(--space-4) 0 0}

  .stage{background:var(--ios-ground)}
  /* The stage is a flex column and .wrap centres itself with auto inline
     margins, which opts it out of stretching: it then shrink-to-fits, and on
     the delivered screen the meter chips push that all the way to the 1160px
     cap, carrying every card off the right edge. On a phone the wrap is the
     screen. (The same happens under the paper skin; this only fixes the
     variant.) */
  .stage > .wrap{width:100%; max-width:100%; margin-inline:0}
  .cols > .main, .cols > .rail{padding-block:var(--space-2) var(--space-4)}

  /* ── grouped lists ──
     A run of sibling rows becomes one inset card: every row carries the top
     radius and loses it when another row precedes it, and carries the bottom
     radius unless another row follows. Separators inset to the label, iOS's
     own tell that the rows belong to one group. */
  .style-row, .stave, .field:not(.block), .desk, .item, .meters div{
    background:var(--ios-card); border:0; position:relative;
    border-radius:var(--ios-r) var(--ios-r) 0 0;
  }
  .style-row + .style-row, .stave + .stave, .desk + .desk, .item + .item,
  .field:not(.block) + .field:not(.block){border-radius:0}
  .style-row:not(:has(+ .style-row)), .stave:not(:has(+ .stave)),
  .desk:not(:has(+ .desk)), .item:not(:has(+ .item)),
  .field:not(.block):not(:has(+ .field:not(.block))){
    border-bottom-left-radius:var(--ios-r); border-bottom-right-radius:var(--ios-r)}
  .style-row + .style-row::before, .stave + .stave::before,
  .desk + .desk::before, .item + .item::before,
  .field:not(.block) + .field:not(.block)::before{
    content:""; position:absolute; left:var(--space-4); right:0; top:0;
    height:1px; background:var(--ios-sep)}

  .style-row{padding:var(--space-3) var(--space-4); min-height:var(--ios-row)}
  .style-row .what{font-family:var(--ios-font); font-size:var(--ios-title);
    font-weight:var(--weight-regular); letter-spacing:-.01em; line-height:var(--leading-snug)}
  .style-row .src{font-family:var(--ios-font); font-size:var(--ios-cap);
    color:var(--ink-muted); margin-top:1px}
  .rail a.lnk{color:var(--accent); border-bottom:0}

  /* Section headers and footnotes sit outside the card, as they do in Settings. */
  .rail h2, .look > h2{font-family:var(--ios-font); font-size:var(--ios-cap);
    text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);
    font-weight:var(--weight-regular); margin:0 0 var(--space-2); padding-inline:var(--space-4)}
  .rail h2 + .rail-sub, .look > .sub, .rail-foot, .consequence, .field.block > .note{
    font-family:var(--ios-font); font-size:var(--ios-cap); color:var(--ink-muted);
    padding-inline:var(--space-4); line-height:var(--leading-snug)}
  .rail h2 + .rail-sub{margin:calc(-1 * var(--space-1)) 0 var(--space-2)}
  .rail-foot{margin-top:var(--space-2)}
  .rail-block{margin-top:var(--space-5)}

  /* Starting a project is one more cell under the list it adds to, with its
     action inline — the desktop's bordered field and plated button would be the
     only two of their kind on this screen. */
  .newproj{background:var(--ios-card); border-radius:var(--ios-r); align-items:center;
    padding:0 var(--space-4); gap:var(--space-3);
    min-height:var(--ios-row); margin-top:var(--space-4)}
  /* `min-height:0` left this one 20px tall — a text line with a stroke drawn
     round it, inside a card that was doing the looking-like-a-row. The owner, on
     his phone (2026-08-21): "the new project naming text input should be
     taller." So the field IS the row now: a full 44px, which is the tap target
     the platform asks for and the height every other cell on this screen has.
     The card gives up its vertical padding in exchange, or the row would grow to
     60px and be the tallest thing on the page. */
  .newproj .tin{font-family:var(--ios-font); font-size:var(--ios-title); border:0;
    background:none; min-height:var(--ios-row); padding-block:0; letter-spacing:-.01em}
  .newproj .tin:focus-visible{outline:0}

  /* ── the bounce, and the empty state ── */
  .bounce{background:var(--ios-card); border:0; border-radius:var(--ios-r);
    padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4)}
  .bounce-file .name{font-size:var(--ios-cap)}
  .bounce-file .swap{font-family:var(--ios-font); font-size:var(--ios-cap);
    color:var(--accent); border:0}
  .readout{border-top:1px solid var(--ios-sep); gap:var(--space-2)}
  .readout .v{font-size:var(--text-md)}
  .readout .l{font-family:var(--ios-font); font-size:var(--text-xs)}

  .drop{background:var(--ios-card); border:0; border-radius:var(--ios-r);
    padding:var(--space-7) var(--space-4)}
  .drop::before{content:""; display:block; width:2.25rem; height:2.25rem;
    margin:0 auto var(--space-3); background:var(--accent);
    -webkit-mask:var(--g) center/contain no-repeat; mask:var(--g) center/contain no-repeat;
    --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M56,96v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0ZM88,24a8,8,0,0,0-8,8V224a8,8,0,0,0,16,0V32A8,8,0,0,0,88,24Zm40,32a8,8,0,0,0-8,8V192a8,8,0,0,0,16,0V64A8,8,0,0,0,128,56Zm40,32a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V96A8,8,0,0,0,168,88Zm40-16a8,8,0,0,0-8,8v96a8,8,0,0,0,16,0V80A8,8,0,0,0,208,72Z'/%3E%3C/svg%3E")}
  .drop.over{background:var(--accent-wash)}
  .drop .big{font-family:var(--ios-font); font-size:var(--ios-title);
    font-weight:var(--weight-semibold); letter-spacing:-.01em}
  .drop .small{font-family:var(--ios-font); font-size:var(--ios-cap)}

  /* ── form rows ── */
  .field, .field:last-of-type{border:0}
  .field:not(.block){padding:var(--space-2) var(--space-4); min-height:var(--ios-row);
    align-items:center}
  .field-label{font-family:var(--ios-font); font-size:var(--ios-title);
    font-weight:var(--weight-regular); letter-spacing:-.01em}
  .prov{font-family:var(--ios-font); font-size:var(--text-xs); text-transform:none;
    letter-spacing:var(--tracking-body); color:var(--ink-muted)}
  .prov.yours{color:var(--accent)}
  .value{font-size:var(--ios-title)}
  .field .tin{font-family:var(--ios-font); font-size:var(--ios-title);
    font-weight:var(--weight-regular); border:0; background:none; color:var(--ink-muted);
    padding:var(--space-1) 0; letter-spacing:-.01em}
  .field select.tin{font-family:var(--ios-font); font-size:var(--ios-title);
    color:var(--ink-muted); text-align:right; max-width:13rem}
  .field .tin:focus-visible{outline:0; color:var(--ink)}

  /* Desks: a section header, a card of rows, a footnote. */
  .field.block{padding:var(--space-5) 0 0}
  .field.block .field-top{display:flex; align-items:baseline; gap:var(--space-3);
    padding-inline:var(--space-4); margin-bottom:var(--space-2)}
  .field.block .field-label{font-size:var(--ios-cap); text-transform:uppercase;
    letter-spacing:.06em; color:var(--ink-muted)}
  .field.block > .note{margin-top:var(--space-2); border-left:0; padding-left:var(--space-4)}
  .desks{gap:0; display:block}
  .desk{display:flex; align-items:center; padding:0 var(--space-2) 0 var(--space-4);
    min-height:var(--ios-row)}
  .desk .who{font-family:var(--ios-font); font-size:var(--ios-title);
    font-weight:var(--weight-regular); letter-spacing:-.01em; padding:var(--space-2) 0}
  /* The stepper is one tinted control with a divider, not two loose buttons. */
  .spin{border:0; background:var(--ios-fill); border-radius:var(--ios-r-sm);
    align-items:stretch; overflow:hidden; margin-block:var(--space-2)}
  .spin-b{min-width:2.5rem; font-family:var(--ios-font); font-size:var(--text-md);
    color:var(--ink); background:none}
  .spin-b:active{background:var(--ios-sep)}
  .spin-n{background:none; color:var(--ink); border-inline:1px solid var(--ios-sep);
    font-family:var(--ios-font); font-size:var(--ios-title); min-width:2.25rem}

  /* ── buttons: filled, tinted, and the row they sit in ── */
  .btn{font-family:var(--ios-font); font-size:var(--ios-title); font-weight:var(--weight-semibold);
    letter-spacing:-.01em; min-height:3.125rem; border:0; border-radius:var(--ios-r);
    box-shadow:none; padding-inline:var(--space-4)}
  .btn:active{transform:scale(.985); box-shadow:none; opacity:.82}
  .btn.ghost:not(.mini){background:var(--accent-wash); color:var(--accent)}
  @media (prefers-reduced-motion:reduce){
    .btn:active{transform:none; box-shadow:none; opacity:.82}
    .btn.mini:active{box-shadow:none}
  }

  /* ── delivered ── */
  .collect{background:var(--ios-card); border:0; border-radius:var(--ios-r);
    padding:var(--space-3) var(--space-4)}
  .collect .file{font-size:var(--ios-cap)}
  .collect .meta{font-family:var(--ios-font); font-size:var(--ios-cap)}
  .summary{font-family:var(--ios-font); font-size:var(--ios-cap);
    color:var(--ink-muted); padding-inline:var(--space-4); margin-bottom:var(--space-4)}
  .summary b{color:var(--ink)}
  .meters{border:0; gap:var(--space-2); margin-top:var(--space-4); overflow-x:auto;
    padding-inline:0; scrollbar-width:none}
  .meters div{border:0; border-radius:var(--ios-r-sm); padding:var(--space-2) var(--space-3);
    font-size:var(--ios-cap); text-align:center}
  .meters div span{font-family:var(--ios-font); font-size:var(--text-xs)}

  .family{font-family:var(--ios-font); font-size:var(--ios-cap);
    text-transform:uppercase; letter-spacing:.06em; border-bottom:0;
    padding:var(--space-5) var(--space-4) var(--space-2)}
  .family:first-child{padding-top:var(--space-2)}
  .stave{padding:var(--space-2) var(--space-4); min-height:var(--ios-row)}
  .stave .name{font-family:var(--ios-font); font-size:var(--ios-title);
    font-weight:var(--weight-regular); letter-spacing:-.01em}
  .stave .from{font-family:var(--ios-font); font-size:var(--ios-cap)}
  .stave .n{font-family:var(--ios-font); font-size:var(--ios-title);
    color:var(--ink-muted)}
  .stave.marked{border-left:0; margin-left:0; padding-left:var(--space-4)}

  /* ── decisions ── */
  .look{margin-top:var(--space-5)}
  .look > .sub{margin-bottom:var(--space-3)}
  .item{padding:var(--space-3) var(--space-4); border:0}
  .item .claim{font-family:var(--ios-font); font-size:var(--ios-title);
    font-weight:var(--weight-regular); letter-spacing:-.01em}
  .item .claim strong{font-weight:var(--weight-semibold)}
  .item .why{font-family:var(--ios-font); font-size:var(--ios-cap)}
  .item .ev{font-family:var(--ios-font); font-size:var(--text-xs)}
  .choices{gap:var(--space-2)}
  .choices .btn{flex:1 1 0; min-height:2.75rem; padding-inline:var(--space-3);
    font-size:var(--text-sm)}
  .pager{border-bottom:0; padding:0 var(--space-4) var(--space-2)}
  .pager .where{font-family:var(--ios-font); font-size:var(--ios-cap);
    text-transform:none; letter-spacing:var(--tracking-body)}
  .pager .step button{font-size:var(--text-lg); color:var(--accent)}
  .consequence{border-top:0; margin-top:var(--space-5)}

  .err{background:var(--accent-wash); border-left:0; border-radius:var(--ios-r);
    padding:var(--space-3) var(--space-4); margin-inline:0}
  .err b{font-weight:var(--weight-semibold)}
  .err p{font-family:var(--ios-font); font-size:var(--ios-cap)}

  /* ── sign in ── */
  .signin{background:var(--ios-card); border:0; border-radius:var(--ios-r);
    padding:0; margin-top:var(--space-4)}
  .signin .row{padding:var(--space-2) var(--space-4); display:flex;
    align-items:center; gap:var(--space-4); min-height:var(--ios-row)}
  .signin .row + .row{margin-top:0; border-top:1px solid var(--ios-sep)}
  .signin label{font-family:var(--ios-font); font-size:var(--ios-title);
    text-transform:none; letter-spacing:-.01em; color:var(--ink);
    margin:0; flex:0 0 6.5rem}
  .signin .tin{font-family:var(--ios-font); font-size:var(--ios-title);
    font-weight:var(--weight-regular); border:0; background:none; padding:var(--space-2) 0;
    min-height:0; letter-spacing:-.01em}
  .signin .tin:focus-visible{outline:0}

  /* ── the dock: a button row over a frosted tab bar ── */
  /* The dock stays in the flow, as a flex child beside the stage, so the stage
     is exactly the height that is left and its last row is always reachable.
     It used to be `position:fixed` with the stage reserving room for it in
     `padding-bottom`, which silently did nothing: `.stage` is a flex scroll
     container, and a scroll container's bottom padding is dropped from the
     scroll extent, so the tail of every tall page sat under the bar. A bar
     nothing scrolls under has no use for a backdrop filter either. */
  .dock{box-shadow:none; background:var(--ios-card);
    border-top:1px solid var(--ios-sep)}
  .dock-action{flex-direction:column-reverse; gap:var(--space-2);
    padding:var(--space-3) var(--space-4)}
  .dock-action.pair{flex-direction:row; padding:var(--space-3) var(--space-4)}
  .dock-action.pair .btn{font-size:var(--text-sm); padding-inline:var(--space-3)}
  .dock-action .btn{flex:1 1 0; width:100%}
  .dock-note{font-family:var(--ios-font); font-size:var(--ios-cap)}

  .tabs{background:none; border-top:1px solid var(--ios-sep)}
  .tab{position:relative; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:2px; min-height:var(--ios-tabbar);
    padding:var(--space-2) 2px calc(var(--space-1) + var(--safe-bot));
    font-family:var(--ios-font); font-size:var(--ios-tab); text-transform:none;
    letter-spacing:var(--tracking-body); color:var(--ink-muted); border-top:0; margin-top:0}
  .tabs.four .tab{letter-spacing:var(--tracking-body)}
  .tab.on{color:var(--accent); background:none; border-top:0}
  .tab::before{content:""; width:1.625rem; height:1.625rem; background:currentColor;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:contain; mask-size:contain}
  /* Phosphor regular, masked so the glyph takes the tab's own tint. */
  .tab[data-tab="cue"]::before{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M56,96v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0ZM88,24a8,8,0,0,0-8,8V224a8,8,0,0,0,16,0V32A8,8,0,0,0,88,24Zm40,32a8,8,0,0,0-8,8V192a8,8,0,0,0,16,0V64A8,8,0,0,0,128,56Zm40,32a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V96A8,8,0,0,0,168,88Zm40-16a8,8,0,0,0-8,8v96a8,8,0,0,0,16,0V80A8,8,0,0,0,208,72Z'/%3E%3C/svg%3E")}
    .tab[data-tab="score"]::before{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M212.92,17.69a8,8,0,0,0-6.86-1.45l-128,32A8,8,0,0,0,72,56V166.08A36,36,0,1,0,88,196V110.25l112-28v51.83A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.69ZM52,216a20,20,0,1,1,20-20A20,20,0,0,1,52,216ZM88,93.75V62.25l112-28v31.5ZM180,184a20,20,0,1,1,20-20A20,20,0,0,1,180,184Z'/%3E%3C/svg%3E")}
    .tab[data-tab="review"]::before{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'/%3E%3C/svg%3E")}
  .tab[data-tab="project"]::before{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,16V152h-28.7A15.86,15.86,0,0,0,168,156.69L148.69,176H107.31L88,156.69A15.86,15.86,0,0,0,76.69,152H48V48Zm0,160H48V168H76.69L96,187.31A15.86,15.86,0,0,0,107.31,192h41.38A15.86,15.86,0,0,0,160,187.31L179.31,168H208v40Z'/%3E%3C/svg%3E")}
        .tab::before{-webkit-mask-image:var(--g); mask-image:var(--g)}
  /* A tab with no panel behind it is a label, not a control. */
  span.tab::before{opacity:.4}

  /* The count rides the glyph as a badge, the way an unread count does. */
  .tab .flag{position:absolute; top:var(--space-1); left:50%; margin-left:.4rem;
    min-width:var(--space-4); height:var(--space-4); padding-inline:var(--space-1);
    border-radius:var(--ios-r-sm);
    background:var(--accent); color:var(--accent-fg); font-size:var(--text-xs);
    display:flex; align-items:center; justify-content:center; line-height:1}
  .mast-nav .flag{color:var(--accent)}
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCORE INK — the phone skin, same language.                     2026-08-21
   Everything here sits inside the skin's own max-width:900px query, so none of
   it can reach the desktop. iOS's own radii are already close to MuseScore's
   web scale, so the work here is mostly removing hairlines and re-seating the
   accent, not re-shaping.
   ═════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* Cards lose their stroke and gain MuseScore's layering: the card is lighter
     than its ground and carries a soft elevation, never an outline. */
  .bounce, .collect, .item, .drop, .rail-block, .style-row{
    box-shadow:0 1px 2px rgba(20,24,33,.05)}
  .tin{background:var(--ios-card); box-shadow:inset 0 0 0 1px var(--ios-sep)}
  .tin:focus, .tin:focus-visible{box-shadow:inset 0 0 0 2px var(--accent); outline:0}
  /* A field that is now drawn with a stroke needs the inset the Settings-era
     rules above took away: they zeroed side padding for a value that hung in
     the row with no edge of its own, so the caret ended up on the stroke. */
  .signin .tin, .field .tin, .newproj .tin{padding-inline:var(--space-4)}

  /* The primary control keeps the platform's full-width pill, but takes the
     accent fill and the semibold label from the desktop language so the two
     skins are the same product. */
  .btn{border-radius:var(--ios-r); font-weight:var(--weight-semibold);
    font-family:var(--font-ui); box-shadow:none}
  .btn.ghost:not(.mini){background:var(--tonal); color:var(--ink)}

  .tab.on{color:var(--accent); background:none}
  .tabs{padding:0; gap:0}
  .mast-nav .flag, .tab .flag{font-weight:var(--weight-semibold)}
}