/* ── the phone turned sideways ────────────────────────────────────────────
   The activity declares no screenOrientation and handles orientation and
   screenSize itself, so a rotation is a RESIZE: no state is lost and the
   layout is the only thing that has to answer. Two queries do it. The player
   sheet is the surface whose portrait shape cannot survive a wide viewport —
   its artwork is a square sized by WIDTH, so at 915x411 the cover came out
   879px tall and the title, the lane, the transport and the face buttons all
   sat below the bottom of a sheet that does not scroll. That is aspect, not
   height, so its rule keys off orientation alone and a tablet gets it too;
   everything under it is a phone-sized query.

   These rules are appended, and the order is load-bearing: the side-inset
   longhands below have to come after .gbar's padding shorthand, .mini's
   left/right and .toast's left/right to win at equal specificity. */

/* the side insets: the cutout and the gesture pill, from the edges */
.gbar { padding-left: calc(6px + var(--inset-left)); padding-right: calc(8px + var(--inset-right)); }
.nav { padding-left: var(--inset-left); padding-right: var(--inset-right); }
.mini { left: calc(8px + var(--inset-left)); right: calc(8px + var(--inset-right)); }
.screen { padding-left: var(--inset-left); padding-right: var(--inset-right); }
.np { padding-left: var(--inset-left); padding-right: var(--inset-right); }
.halfsheet { padding-left: var(--inset-left); padding-right: var(--inset-right); }
.syncroom { padding-left: var(--inset-left); padding-right: var(--inset-right); }
.toast { left: calc(12px + var(--inset-left)); right: calc(12px + var(--inset-right)); }

/* ── the player sheet, beside itself ─────────────────────────────────── */
@media (orientation: landscape) {
    .np {
        display: grid;
        grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
        grid-template-areas:
            "head head"
            "left slack"
            "left meta"
            "left scrub"
            "left trans"
            "left foot";
        column-gap: 6px;
        /* insurance for a viewport shorter than the controls themselves —
           the keyboard up on a small phone — where the sheet would clip */
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .np-head { grid-area: head; }
    .np-art { grid-area: left; padding: 10px 4px 10px var(--pad); }
    /* the square is sized by whichever is smaller, the column or the height */
    .np-frame { width: min(100%, calc(100vh - var(--inset-top) - var(--inset-bottom) - 92px)); }
    .np-spacer { grid-area: slack; padding: 10px var(--pad) 0; justify-content: center; }
    .np-face { grid-area: left; }
    .np-meta { grid-area: meta; padding-top: 2px; }
    .np-scrub { grid-area: scrub; padding-top: 8px; }
    .np-transport { grid-area: trans; padding-top: 10px; justify-self: center; width: min(100%, 430px); }
    .np-foot { grid-area: foot; padding-top: 8px; }
    /* a face is up: it takes the artwork's column and the thumbnail goes —
       the record is already the ground behind the whole sheet */
    .np.small { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); }
    .np.small .np-art { display: none; }
}

/* ── a phone turned sideways: 411 pixels of height to spend ───────────── */
@media (orientation: landscape) and (max-height: 560px) {
    /* the nav comes down to Android's own 48dp minimum and the mini bar to a
       60dp row over the same lane strip: 22 pixels back, 46% of the height as
       chrome down to 40% */
    :root { --nav-h: 48px; --mini-h: 60px; }
    .nav button .gl { height: 22px; }
    .nav button .lb { font-size: 9.5px; }
    .nav button .pill { top: 3px; height: 24px; }
    .mini { padding-bottom: 24px; }
    .mini .art { width: 34px; height: 34px; }
    .mini .mini-lane { bottom: 5px; }

    /* the hero stops being a portrait and becomes the banner the desktop's
       hero has always been */
    .hero { height: 190px; }
    .hero-name { font-size: 27px; }
    .hero-logo { max-height: 64px; }

    /* the record head puts the cover beside the title, again the desktop's
       own shape; .pl needs naming because its own rule is more specific */
    .rec-head { flex-direction: row; align-items: center; gap: 22px; padding: calc(var(--bar-h) + 12px) var(--pad) 4px; }
    .rec-head .rec-cover, .rec-head.pl .rec-cover { width: 34%; max-width: 240px; }
    .rec-meta { text-align: left; }
    .rec-title { margin-top: 0; }
    .rec-chips { justify-content: flex-start; }
    .rec-acts { justify-content: flex-start; padding: 14px 0 4px; }

    /* 76% of 411 is 312; a half sheet may take all but a strip */
    .halfsheet { max-height: calc(100% - 36px); }
}