/* ============================================================
   Quill on the iPhone Duo.

   The installed Duo is identified before styles load by an intentionally
   shareable ?duo=1 launch marker or by two reported horizontal viewport
   segments. Geometry narrows these rules to the supplied Duo shapes, but
   geometry never identifies the device by itself. Every installed-only
   rule therefore requires both html.is-standalone and html.is-duo.

   Safari keeps Quill's normal phone layout. An explicitly identified
   unfolded installed Duo keeps Ali's comfortable middle layout in either
   orientation: the phone dock plus a compact, scrollable notation rail.
   A fine-pointer desktop window at 951 x 585 keeps the desktop ribbons.
   ============================================================ */

/* An explicitly identified Safari Duo gets full-screen panels on its outer
   portrait screen, without activating the installed app's system rail. */
@media (min-width: 370px) and (max-width: 395px) and (min-height: 560px) and (max-height: 630px) and (orientation: portrait) and (pointer: coarse) and (hover: none) {
  html.is-duo .floatpanel,
  html.is-duo #wizard {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    transform: none;
    border-radius: 0;
    box-sizing: border-box;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  html.is-duo body.modal-open #mobileDock {
    display: none;
  }
}

/* Any coarse-pointer phone on its side gets panel-only full-screen geometry.
   Width is capped so a very wide short touch desktop is left unchanged.
   A full-screen panel keeps its controls out of the side sensor housing and
   rounded corners of an ordinary iPhone on its side (review 2026-10-27);
   the installed Duo rule below gives its right edge back to the rail. */
@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) and (hover: none) {
  .floatpanel,
  #wizard {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    transform: none;
    border-radius: 0;
    box-sizing: border-box;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  body.modal-open #mobileDock {
    display: none;
  }
}

/* A modal that is not a floating panel (Help, the practice room) covers the
   phone dock's band, so the dock steps aside. Upright floating panels such as
   the Mixer sit above the dock, which keeps Play and Undo in reach as it did
   before round 14 (review 2026-10-27). The explicit installed Duo rule below
   restores its side rail. */
@media (max-width: 1400px) and (pointer: coarse) and (hover: none) {
  body.modal-open:not(.modal-float) #mobileDock {
    display: none;
  }
  body.modal-open #help {
    z-index: 90;
  }
}

/* ---------- installed Duo: full-height system/status column ---------- */
/* Requested and observed CSS viewports:
     outer upright     390 x 844 and 466 x 678
     outer sideways    844 x 390 and 678 x 466
     inner landscape   953 x 670
     inner portrait    670 x 953
   The 80 px column is empty for its first 260 px, then the quick controls
   continue below it. On a short sideways screen the controls scroll. */
@media (min-width: 380px) and (max-width: 410px) and (min-height: 830px) and (max-height: 860px) and (orientation: portrait), (min-width: 450px) and (max-width: 480px) and (min-height: 660px) and (max-height: 700px) and (orientation: portrait), (min-width: 830px) and (max-width: 860px) and (min-height: 380px) and (max-height: 410px) and (orientation: landscape), (min-width: 660px) and (max-width: 700px) and (min-height: 450px) and (max-height: 480px) and (orientation: landscape), (min-width: 820px) and (max-width: 1000px) and (min-height: 500px) and (max-height: 700px) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 7/4), (min-width: 660px) and (max-width: 680px) and (min-height: 940px) and (max-height: 970px) and (orientation: portrait) {
  html.is-standalone.is-duo {
    --duo-layout-active: 1;
    --duo-safe-right: env(safe-area-inset-right, 0px);
    --duo-side-rail: max(80px, var(--duo-safe-right));
    --duo-rail-head: 260px;
    --duo-tool-rail: 60px;
  }

  html.is-standalone.is-duo body {
    padding-right: var(--duo-side-rail);
  }
  html.is-standalone.is-duo body::after {
    content: "";
    position: fixed;
    z-index: 79;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--duo-side-rail);
    box-sizing: border-box;
    pointer-events: none;
    background: var(--sms-paper, #000);
    border-left: 1px solid var(--sms-line, #333);
  }

  html.is-standalone.is-duo #mobileDock {
    position: fixed;
    z-index: 80;
    left: auto;
    right: 0;
    top: var(--duo-rail-head);
    bottom: 0;
    width: var(--duo-side-rail);
    box-sizing: border-box;
    display: flex;
    grid-template-columns: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: start;
    gap: 4px;
    padding: 0 0 calc(6px + env(safe-area-inset-bottom, 0px)) 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--sms-paper, #000);
    color: var(--sms-ink, #e8e8e8);
    border-top: 0;
    border-left: 1px solid var(--sms-line, #333);
    box-shadow: -6px 0 20px rgba(0, 0, 0, .28);
  }
  html.is-standalone.is-duo body.modal-open #mobileDock {
    display: flex;
  }
  html.is-standalone.is-duo #mobileDock button {
    flex: 0 0 auto;
    width: 100%;
    min-width: 44px;
    min-height: 48px;
    margin: 0;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
  }
  html.is-standalone.is-duo #mobileDock button.on {
    background: #990814;
    color: #fff;
  }
  html.is-standalone.is-duo #mobileDock button:active {
    background: rgba(153, 8, 20, .18);
  }
  html.is-standalone.is-duo #mobileDock button:focus-visible {
    outline: 2px solid #990814;
    outline-offset: -2px;
  }
  html.is-standalone.is-duo #mobileDock button:disabled {
    opacity: .42;
  }
  html.is-standalone.is-duo #mobileDock .qicon,
  html.is-standalone.is-duo #mobileDock .mobile-dock-symbol {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
  }
  html.is-standalone.is-duo #mobileDock .mobile-dock-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
  }
  html.is-standalone.is-duo #mobileDock .mobile-dock-note {
    font-family: 'Bravura', Georgia, serif;
    font-size: 22px;
  }

  /* The installed Duo keeps its touch-first shell when a paired pointer
     changes the primary pointer/hover media features. */
  html.is-standalone.is-duo .logo { font-size: 17px; }
  html.is-standalone.is-duo .logo .tag { display: none; }
  html.is-standalone.is-duo .touchhelp { display: block; }
  html.is-standalone.is-duo .keyhelp,
  html.is-standalone.is-duo .keyonly { display: none; }
  html.is-standalone.is-duo #topbar {
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px calc(10px + env(safe-area-inset-left, 0px));
    gap: 8px;
    justify-content: center;
  }
  html.is-standalone.is-duo .filebtns { display: contents !important; }
  html.is-standalone.is-duo .filebtns > button,
  html.is-standalone.is-duo .filebtns > input { display: none !important; }
  html.is-standalone.is-duo #toolbar,
  html.is-standalone.is-duo #toolbar2 { display: none !important; }
  html.is-standalone.is-duo,
  html.is-standalone.is-duo body { overflow-x: hidden; }

  html.is-standalone.is-duo #scorewrap {
    max-width: 100%;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }
  html.is-standalone.is-duo #sheet {
    max-width: none;
    overflow: visible;
  }
  html.is-standalone.is-duo body.pianoopen #scorewrap {
    padding-bottom: calc(250px + env(safe-area-inset-bottom, 0px));
  }

  html.is-standalone.is-duo #help,
  html.is-standalone.is-duo #tour,
  html.is-standalone.is-duo #stand,
  html.is-standalone.is-duo #installsheet,
  html.is-standalone.is-duo #micsheet,
  html.is-standalone.is-duo #palette,
  html.is-standalone.is-duo #addsheet,
  html.is-standalone.is-duo #startsheet,
  html.is-standalone.is-duo #setsheet,
  html.is-standalone.is-duo #asksheet {
    right: var(--duo-side-rail);
  }
  html.is-standalone.is-duo #help .card,
  html.is-standalone.is-duo #palcard,
  html.is-standalone.is-duo #installsheet .card,
  html.is-standalone.is-duo #micsheet .card,
  html.is-standalone.is-duo #addsheet .card,
  html.is-standalone.is-duo #startsheet .card,
  html.is-standalone.is-duo #setsheet .card,
  html.is-standalone.is-duo #asksheet .card {
    max-width: calc(100% - 16px);
  }

  html.is-standalone.is-duo .floatpanel {
    left: 8px;
    right: calc(var(--duo-side-rail) + 8px);
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    min-width: 0;
    max-width: calc(100vw - var(--duo-side-rail) - 16px);
  }
  html.is-standalone.is-duo #wizard {
    left: 8px;
    right: calc(var(--duo-side-rail) + 8px);
    width: auto;
    min-width: 0;
    transform: none;
  }
  html.is-standalone.is-duo #wizard .wzrow {
    gap: 4px;
  }
  html.is-standalone.is-duo #wizard #wzden + label {
    min-width: 0;
    margin-left: 0 !important;
  }
  html.is-standalone.is-duo #wizard #wztempo {
    width: 52px !important;
  }
  html.is-standalone.is-duo #msgstack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: fixed;
    left: 8px;
    right: calc(var(--duo-side-rail) + 8px);
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    pointer-events: none;
  }
  html.is-standalone.is-duo #msgstack > #toast,
  html.is-standalone.is-duo #msgstack > #hintline,
  html.is-standalone.is-duo #msgstack > #status {
    position: static;
    transform: none;
    margin: 0;
    max-width: 100%;
    left: auto;
    right: auto;
    bottom: auto;
  }
  html.is-standalone.is-duo #msgstack > #toast {
    align-self: center;
    pointer-events: auto;
    transition: none;
  }
  html.is-standalone.is-duo #msgstack > #toast:not(.show) {
    display: none;
  }
  html.is-standalone.is-duo #msgstack > #hintline {
    padding: 6px 10px;
    background: var(--sms-card, #111);
    border: 1px solid var(--sms-line, #333);
    text-align: left;
  }
  html.is-standalone.is-duo #msgstack > #hintline:empty,
  html.is-standalone.is-duo #msgstack > #status:empty {
    display: none;
  }
  html.is-standalone.is-duo #piano {
    right: var(--duo-side-rail);
    bottom: 0;
    padding-right: 8px;
  }

  html.is-standalone.is-duo #annotbar,
  html.is-standalone.is-duo #toast,
  html.is-standalone.is-duo #tappad {
    left: calc((100vw - var(--duo-side-rail)) / 2);
    max-width: calc(100vw - var(--duo-side-rail) - 16px);
  }
  html.is-standalone.is-duo #annotbar {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  html.is-standalone.is-duo #tappad {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  html.is-standalone.is-duo #status {
    max-width: calc(100vw - var(--duo-side-rail) - 16px);
  }
  html.is-standalone.is-duo #focusexit,
  html.is-standalone.is-duo .room-theme-menu {
    right: calc(var(--duo-side-rail) + 10px);
  }
  html.is-standalone.is-duo #savedpill {
    right: calc(var(--duo-side-rail) + 16px);
  }
  html.is-standalone.is-duo body.focusmode::before {
    right: var(--duo-side-rail);
  }

  html.is-standalone.is-duo #bubble,
  html.is-standalone.is-duo #bubble2 {
    max-width: calc(100vw - var(--duo-side-rail) - 12px);
  }
  html.is-standalone.is-duo #tourbox {
    left: auto !important;
    right: 10px;
    width: min(310px, calc(100vw - var(--duo-side-rail) - 20px)) !important;
  }
  html.is-standalone.is-duo #standtop {
    gap: 8px;
    padding-right: 16px;
  }
  html.is-standalone.is-duo #standtitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* A paired mouse must not shrink the installed app's touch targets back to
     their desktop sizes. Keep every panel action and field reachable. */
  html.is-standalone.is-duo .mxtitle button,
  html.is-standalone.is-duo #helpclose {
    width: 44px;
    height: 44px;
  }
  html.is-standalone.is-duo .sprow button,
  html.is-standalone.is-duo .mxrow button,
  html.is-standalone.is-duo .minibtn,
  html.is-standalone.is-duo #wizard button,
  html.is-standalone.is-duo #setbody button,
  html.is-standalone.is-duo #installsheet button,
  html.is-standalone.is-duo #stand button,
  html.is-standalone.is-duo #micsheet button,
  html.is-standalone.is-duo .toastact,
  html.is-standalone.is-duo #annotbar button,
  html.is-standalone.is-duo #annotbar input,
  html.is-standalone.is-duo .about-apps a,
  html.is-standalone.is-duo #bubble button,
  html.is-standalone.is-duo #bubble2 button,
  html.is-standalone.is-duo #padrow button,
  html.is-standalone.is-duo .sheetclose,
  html.is-standalone.is-duo .filebtns .room-theme-option {
    min-width: 44px;
    min-height: 44px;
  }
  html.is-standalone.is-duo input[type="text"],
  html.is-standalone.is-duo input[type="password"],
  html.is-standalone.is-duo input[type="number"],
  html.is-standalone.is-duo input[type="search"],
  html.is-standalone.is-duo input:not([type]),
  html.is-standalone.is-duo select {
    min-height: 44px;
  }
  html.is-standalone.is-duo input,
  html.is-standalone.is-duo select,
  html.is-standalone.is-duo textarea {
    font-size: 16px !important;
  }
  html.is-standalone.is-duo input[type="range"] {
    height: 44px;
  }
  html.is-standalone.is-duo input[type="checkbox"],
  html.is-standalone.is-duo input[type="color"] {
    width: 44px;
    height: 44px;
  }
  html.is-standalone.is-duo .setrow {
    min-height: 44px;
  }
  html.is-standalone.is-duo #mixer input.mxcol {
    width: 44px;
    height: 44px;
  }
  html.is-standalone.is-duo [contenteditable] {
    min-height: 44px;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.35;
  }
  html.is-standalone.is-duo #title,
  html.is-standalone.is-duo #subtitle {
    text-align: center;
  }
  html.is-standalone.is-duo #composer {
    text-align: right;
  }
}

/* The short sideways rail keeps duration copy concise while the controls
   remain below the reserved status area. Keep the full duration in the
   button's aria-label and use deliberate visible copy instead of an ellipsis. */
@media (min-width: 830px) and (max-width: 860px) and (min-height: 380px) and (max-height: 410px) and (orientation: landscape),
       (min-width: 660px) and (max-width: 700px) and (min-height: 450px) and (max-height: 480px) and (orientation: landscape) {
  html.is-standalone.is-duo #mobiledurbtn .mobile-dock-label-full {
    display: none;
  }
  html.is-standalone.is-duo #mobiledurbtn .mobile-dock-label-short {
    display: block !important;
    overflow: visible;
    text-overflow: clip;
    font-size: 12px;
  }
}

/* At the reported Mac window the ribbons fit horizontally but consume nearly
   half the short viewport. They stay intact and scroll away with the page. */
@media (min-width: 940px) and (max-width: 960px) and (min-height: 570px) and (max-height: 600px) and (pointer: fine) and (hover: hover) {
  #chrome {
    position: static;
  }
  #scorewrap {
    overflow-x: hidden;
  }
}

/* Overlay work fills the usable screen on either folded outer orientation.
   The entire 80 px status/navigation column remains outside the panel. */
@media (min-width: 380px) and (max-width: 410px) and (min-height: 830px) and (max-height: 860px) and (orientation: portrait),
       (min-width: 450px) and (max-width: 480px) and (min-height: 660px) and (max-height: 700px) and (orientation: portrait),
       (min-width: 830px) and (max-width: 860px) and (min-height: 380px) and (max-height: 410px) and (orientation: landscape),
       (min-width: 660px) and (max-width: 700px) and (min-height: 450px) and (max-height: 480px) and (orientation: landscape) {
  html.is-standalone.is-duo .floatpanel,
  html.is-standalone.is-duo #wizard {
    left: 0;
    right: var(--duo-side-rail);
    top: 0;
    bottom: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    transform: none;
    border-radius: 0;
    box-sizing: border-box;
    padding-right: 14px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  html.is-standalone.is-duo #scorewrap {
    width: 100%;
    padding: 12px 0 calc(190px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }
  html.is-standalone.is-duo body.pianoopen #scorewrap {
    padding-bottom: calc(310px + env(safe-area-inset-bottom, 0px));
  }
  html.is-standalone.is-duo #sheet {
    padding: 18px 0 26px;
    border-radius: 0;
    max-width: none;
    overflow: visible;
  }
  html.is-standalone.is-duo #title {
    font-size: 22px;
    margin: 0 20px 2px;
  }
  html.is-standalone.is-duo #help .cols {
    grid-template-columns: 1fr;
  }
  html.is-standalone.is-duo .waygrid {
    grid-template-columns: repeat(2, 1fr);
  }
  html.is-standalone.is-duo #bubble2 {
    display: none !important;
  }
}

/* ---------- wide, short screen: inner landscape ---------- */
/* This shape keeps the phone dock and adds back only note values and marks
   as a compact notation rail. Coarse/no-hover prevents a 951 x 585 Mac
   window from receiving this layout. */
@media (min-width: 820px) and (max-width: 1000px) and (min-height: 500px) and (max-height: 700px) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 7/4) and (pointer: coarse) and (hover: none) {
  #toolbar {
    display: flex !important;
    position: fixed;
    z-index: 35;
    top: calc(66px + env(safe-area-inset-top, 0px));
    right: 0;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    width: 60px;
    padding: 8px 6px;
    overflow-y: auto;
    background: var(--sms-paper, #000);
    border-left: 1px solid var(--sms-line, #333);
  }
  #toolbar .grp {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: 0;
  }
  #toolbar .grp:not([data-cap="notes"]):not([data-cap="marks"]),
  #toolbar .advctl,
  #toolbar select {
    display: none !important;
  }
  #toolbar button {
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    height: auto;
    padding: 0;
    font-size: 20px;
  }
  #toolbar button.mus {
    line-height: 44px;
    font-size: 20px;
  }
  #scorewrap { padding-right: 60px; }
  #piano { right: 60px; }

  .waygrid { grid-template-columns: repeat(3, 1fr); }
  #help .cols { grid-template-columns: 1fr 1fr; }
  #mixer .mxrow {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  #mixer .mxname {
    flex: 1 0 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .floatpanel {
    left: auto;
    right: 68px;
    width: min(440px, calc(50% - 76px));
    max-height: calc(100dvh - 160px - env(safe-area-inset-bottom, 0px));
  }
  #msgstack { right: 68px; }
  #wizard {
    left: 25%;
    right: auto;
    transform: translateX(-50%);
    width: min(440px, calc(50% - 16px));
    bottom: auto;
    max-height: calc(100dvh - 170px);
  }

  html.is-standalone.is-duo #toolbar {
    right: var(--duo-side-rail);
    bottom: env(safe-area-inset-bottom, 0px);
  }
  html.is-standalone.is-duo #scorewrap {
    padding-right: var(--duo-tool-rail);
  }
  html.is-standalone.is-duo #piano {
    right: calc(var(--duo-side-rail) + var(--duo-tool-rail));
  }
  html.is-standalone.is-duo .floatpanel {
    left: auto;
    right: calc(var(--duo-side-rail) + 68px);
    width: min(440px, calc(50% - var(--duo-side-rail) - 76px));
  }
  html.is-standalone.is-duo #msgstack {
    right: calc(var(--duo-side-rail) + 68px);
  }
  html.is-standalone.is-duo #wizard {
    left: 25%;
    right: auto;
    width: min(440px, calc(50% - 16px));
    transform: translateX(-50%);
  }
}

/* ---------- identified installed Duo: unfolded middle layout ---------- */
/* The explicit Duo identity, not the current primary pointer, owns this
   layout. A paired mouse or trackpad cannot bring the dense desktop ribbons
   back over the installed app. Inner portrait uses the same compact notation
   rail so unfolded Quill remains the approved middle layout either way up. */
@media (min-width: 820px) and (max-width: 1000px) and (min-height: 500px) and (max-height: 700px) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 7/4),
       (min-width: 660px) and (max-width: 680px) and (min-height: 940px) and (max-height: 970px) and (orientation: portrait) {
  /* The touch shell keeps the second note bubble hidden; a paired pointer
     must not bring it back in the installed middle layout (review
     2026-10-27). */
  html.is-standalone.is-duo #bubble2 {
    display: none !important;
  }
  html.is-standalone.is-duo #toolbar {
    display: flex !important;
    position: fixed;
    z-index: 35;
    top: calc(66px + env(safe-area-inset-top, 0px));
    right: var(--duo-side-rail);
    bottom: env(safe-area-inset-bottom, 0px);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    width: var(--duo-tool-rail);
    padding: 8px 6px;
    overflow-y: auto;
    background: var(--sms-paper, #000);
    border-left: 1px solid var(--sms-line, #333);
  }
  html.is-standalone.is-duo #toolbar .grp {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: 0;
  }
  html.is-standalone.is-duo #toolbar .grp:not([data-cap="notes"]):not([data-cap="marks"]),
  html.is-standalone.is-duo #toolbar .advctl,
  html.is-standalone.is-duo #toolbar select {
    display: none !important;
  }
  html.is-standalone.is-duo #toolbar .grp[data-cap]::before {
    display: none;
  }
  html.is-standalone.is-duo #toolbar button {
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    height: auto;
    padding: 0;
    font-size: 20px;
  }
  html.is-standalone.is-duo #toolbar button.mus {
    line-height: 44px;
    font-size: 20px;
  }
  html.is-standalone.is-duo #toolbar2 { display: none !important; }
  html.is-standalone.is-duo #scorewrap { padding-right: var(--duo-tool-rail); }
  html.is-standalone.is-duo #piano {
    right: calc(var(--duo-side-rail) + var(--duo-tool-rail));
  }
  html.is-standalone.is-duo .waygrid { grid-template-columns: repeat(3, 1fr); }
  html.is-standalone.is-duo #help .cols { grid-template-columns: 1fr 1fr; }
  html.is-standalone.is-duo #mixer .mxrow {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  html.is-standalone.is-duo #mixer .mxname {
    flex: 1 0 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

/* In landscape, floating work stays on the right screen with eight pixels at
   the physical midpoint, then stops before both right-side rails. */
@media (min-width: 820px) and (max-width: 1000px) and (min-height: 500px) and (max-height: 700px) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 7/4) {
  html.is-standalone.is-duo .floatpanel {
    left: auto;
    right: calc(var(--duo-side-rail) + 68px);
    width: min(440px, calc(50% - var(--duo-side-rail) - 76px));
    max-height: calc(100dvh - 160px - env(safe-area-inset-bottom, 0px));
  }
  html.is-standalone.is-duo #msgstack {
    right: calc(var(--duo-side-rail) + 68px);
  }
  html.is-standalone.is-duo #wizard {
    left: 25%;
    right: auto;
    width: min(440px, calc(50% - 16px));
    transform: translateX(-50%);
    bottom: auto;
    max-height: calc(100dvh - 170px);
  }
}

/* Portrait has no side-by-side pane. Panels use all content width left of the
   notation and system rails instead of squeezing into half the screen. */
@media (min-width: 660px) and (max-width: 680px) and (min-height: 940px) and (max-height: 970px) and (orientation: portrait) {
  html.is-standalone.is-duo .floatpanel,
  html.is-standalone.is-duo #wizard {
    left: 8px;
    right: calc(var(--duo-side-rail) + var(--duo-tool-rail) + 8px);
    width: auto;
    max-width: none;
    transform: none;
  }
  html.is-standalone.is-duo #msgstack {
    right: calc(var(--duo-side-rail) + var(--duo-tool-rail) + 8px);
  }
}

/* ---------- the reported fold ---------- */
/* Viewport segments refine panel placement when the browser exposes them.
   The ordinary fallback above already leaves eight pixels at the hinge. */
@media (min-width: 820px) and (max-width: 1000px) and (min-height: 500px) and (max-height: 700px) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 7/4) and (pointer: coarse) and (hover: none) and (horizontal-viewport-segments: 2) {
  .floatpanel {
    width: calc(env(viewport-segment-width 1 0) - 76px);
  }
  html.is-standalone.is-duo .floatpanel {
    width: calc(env(viewport-segment-width 1 0) - var(--duo-side-rail) - 76px);
  }
  #wizard {
    left: calc(env(viewport-segment-width 0 0) / 2);
    width: min(440px, calc(env(viewport-segment-width 0 0) - 16px));
  }
}

/* The installed identity also keeps segment refinement when a paired pointer
   changes pointer/hover media features. */
@media (min-width: 820px) and (max-width: 1000px) and (min-height: 500px) and (max-height: 700px) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 7/4) and (horizontal-viewport-segments: 2) {
  html.is-standalone.is-duo .floatpanel {
    width: calc(env(viewport-segment-width 1 0) - var(--duo-side-rail) - 76px);
  }
  html.is-standalone.is-duo #wizard {
    left: calc(env(viewport-segment-width 0 0) / 2);
    width: min(440px, calc(env(viewport-segment-width 0 0) - 16px));
  }
}