/*
 * The planetary registry (#pp-idle) on a narrow frame and on a touch
 * screen: the sheet from the bottom edge on a phone, upright or on its side,
 * and what stands down in flight on a touch screen. css/idle.css draws the
 * registry and seats it on a desktop; this file loads after it and moves the
 * pieces for these frames, so every rule here overrides one of its.
 *
 * WHERE THINGS STAND, measured in the rig. Upright at 375 by 812 the way into
 * flight stands two rail rows off the bottom (667 to 706) over the two rails,
 * and the header is 54 tall; on its side at 812 by 375 one row of rails and
 * buttons holds the bottom edge (309 to 351) under an 84 px header. In
 * flight on a touch screen the stick holds the bottom left (607 to 735
 * upright), the pad the bottom right, the ticker the band over them and the
 * range readout the foot.
 */

/* In flight on a touch screen the thumbs, the ticker and the range readout
   own the frame (css/touch-hud.css), and a tap on a body is the way in: the
   cards, the probe's pill and the toast stand down, and idle-ui.js holds the
   toasts that come in until the landing. */
body.pp-touch-device.fly-mode #pp-idle .panes,
body.pp-touch-device.fly-mode #pp-idle .pill,
body.pp-touch-device.fly-mode #pp-idle .toast { display: none; }

/*
 * A phone: a sheet from the bottom edge, the full width of the frame. It
 * stands over the corner rail and the sound button while it is open (they
 * share the bottom edge in browse) and under the header; css/touch-hud.css
 * draws only in flight, and flight closes the panel (idle-ui.js). Closed, the
 * registry card sits under the header on the right as the way back in.
 */
@media (max-width: 759px), (orientation: landscape) and (max-height: 500px) {
    #pp-idle .panes { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: min(62vh, calc(100vh - 64px)); box-sizing: border-box; display: block; padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; background: #080c18; z-index: 99; font-size: 12px; }
    #pp-idle:not(.open) .panes { top: 58px; left: auto; right: var(--pi-rm); bottom: auto; width: min(230px, 62vw); height: auto; padding: 0; background: none; border-radius: 0; }
    #pp-idle .tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-top: 12px; }
    #pp-idle .tabs button { padding: 11px 8px 12px; font-size: 13px; }
    #pp-idle h1 { margin: 4px 0 8px; font-size: 26px; }
    #pp-idle .rtop { letter-spacing: .16em; }
    #pp-idle .main { margin-bottom: 14px; }
    #pp-idle .card { padding: 14px 14px 16px; }
    #pp-idle .tiles { grid-template-columns: 1fr; }
    #pp-idle .kv { font-size: 13px; }
    #pp-idle:not(.open) .gal, #pp-idle:not(.open) .rt3, #pp-idle:not(.open) .rt2 { display: none; }
    #pp-idle:not(.open) .reg { padding: 8px 10px; }
    #pp-idle:not(.open) .rt1 { font-size: 14px; }
    #pp-idle:not(.open) .rt4 b { font-size: 13px; }
    /* Over the sheet the pill steps aside while a toast is up (they share
       the band); closed, it stands under the header, the bottom edge being
       the rails' and the way into flight's. The toast stands over the way
       into flight, which is two rail rows up at this width. */
    #pp-idle .pill { bottom: calc(62vh + 10px); }
    #pp-idle:not(.open) .pill { top: calc(var(--pp-head-h, 84px) + 10px); bottom: auto; }
    #pp-idle.open .toast:not([hidden]) ~ .pill { display: none; }
    #pp-idle .toast, #pp-idle.open .toast { left: 50%; bottom: calc(62vh + 12px); max-width: calc(100vw - 32px); }
    #pp-idle:not(.open) .toast { bottom: calc(var(--pp-band, 0px) + var(--pp-edge, 12px) + 3 * var(--pp-rail-h, 39px) + 26px); }
}
/* A phone on its side: one row of rails on the bottom edge and the comms
   ticker right over it (263 to 295 at 812 by 375), so the toast stands over
   the band the ticker can reach, as the open columns do on a desktop, and
   narrow enough to pass the place card on the right. The registry card drops
   its hint, and idle-ui.js seats it over the place card when under it would
   reach that band. */
@media (orientation: landscape) and (max-height: 500px) {
    #pp-idle:not(.open) .hint { display: none; }
    #pp-idle:not(.open) .toast { bottom: calc(var(--pp-band, 0px) + 156px); max-width: calc(100vw - 2 * (var(--pi-rm) + 130px)); }
}