/* BAB-0059: the Moves page on a phone. Loaded last (after alive.css and shared/ui/phone.css). Every rule is under html.phone, so desktop and tablet are exactly as they were.
   The 3D bot is the screen; its face, its lean, Reset and a slim player sit on it; the rest is in sheets (phone-moves.js moves the panels in and back). */
html.phone { --ph-hud-b: calc(var(--ph-bar) + var(--bots-cc-h, 0px)); --ph-hud-r: var(--ph-edge-r); }
html.phone.ph-sheet-open { --ph-hud-b: 0px; }
html.phone-land { --ph-hud-b: calc(env(safe-area-inset-bottom, 0px) + var(--bots-cc-h, 0px)); --ph-hud-r: 0px; }
html.phone-land.ph-sheet-open { --ph-sheet-w: calc(var(--ph-rail) + min(440px, 60vw)); }
html.phone .fgrid { display: block; position: fixed; inset: 0; z-index: 1; gap: 0; }
html.phone #p-right { display: none; }
html.phone #stage { position: absolute; inset: 0; display: block; padding: 0; border: 0; border-radius: 0; background: #E6EBF1; box-shadow: none; overflow: hidden; animation: none; }
html.phone #h-stage, html.phone #stage > #status { display: none; }
html.phone #viewbox { position: absolute; left: 0; top: 0; right: var(--ph-sheet-w, var(--ph-rail)); bottom: var(--ph-sheet-h, 0px); height: auto; min-height: 0; flex: none; border-radius: 0; box-shadow: none; }
html.phone-land #viewbox { bottom: 0; }
html.phone .loading { padding-top: var(--ph-top); }
html.phone .empty.start { top: calc(50% + 4px); max-width: min(92%, 440px); max-height: calc(100% - var(--ph-top) - var(--ph-bar) - 16px); overflow: auto; padding: 14px; }
html.phone-land .empty.start { max-height: calc(100% - var(--ph-top) - 12px); top: calc(50% + 24px); }
html.phone .empty.start .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.phone .empty.start .btn { flex: none; }

/* on the view: its face in a small round window (top left), how far it leans (top right), Reset, the player (bottom) */
html.phone #viewbox > .facebox { position: absolute; z-index: 4; left: calc(10px + var(--ph-edge-l)); top: calc(var(--ph-top) + 10px); width: 112px; margin: 0; padding: 6px 4px; border-radius: 16px; background: #080B0F; box-shadow: 0 0 0 2px rgba(var(--hue-rgb), .8), 0 0 18px -4px rgba(var(--hue-rgb), .8); }
html.phone #viewbox > .facebox canvas { position: static; inset: auto; border-radius: 8px; max-width: 100%; }   /* style.css makes every canvas in a view fill it; this one is a picture of its own size */
html.phone #viewbox > .leanrow { position: absolute; z-index: 4; right: calc(10px + var(--ph-hud-r)); top: calc(var(--ph-top) + 10px); display: grid; gap: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 6px rgba(20, 23, 23, .22); }
html.phone #viewbox > .leanrow .lean.soft { display: none; }
html.phone #viewbox > .leanrow .lean { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
html.phone .view .btn.reset { left: auto; top: auto; right: calc(10px + var(--ph-hud-r)); bottom: calc(var(--ph-hud-b) + 118px); min-height: 44px; padding: 0 14px; background: #fff; }
html.phone .readout { left: auto; right: calc(10px + var(--ph-hud-r)); top: calc(var(--ph-top) + 62px); }
html.phone .tipped { top: calc(var(--ph-top) + 70px); left: 12px; right: 12px; max-width: none; transform: none; }
html.phone #viewbox > .transport { position: absolute; z-index: 4; left: calc(10px + var(--ph-edge-l)); right: calc(10px + var(--ph-hud-r)); bottom: calc(var(--ph-hud-b) + 8px); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(20, 23, 23, .25); }
html.phone #viewbox > .transport .btn { min-height: 44px; padding: 0 10px; }
html.phone #viewbox > .transport .scrub { grid-column: 1 / -1; order: -1; min-height: 44px; flex: none; }
html.phone-land #viewbox > .transport { grid-template-columns: auto auto minmax(160px, 1fr); right: calc(10px + var(--ph-hud-r)); }
html.phone-land #viewbox > .transport .scrub { grid-column: auto; order: 0; }
html.phone-land .view .btn.reset { bottom: calc(var(--ph-hud-b) + 76px); }

/* the sheets' contents */
html.phone .ph-sh-body > #p-list > h2:first-child { display: none; }
html.phone .ph-sh-body > #b-play { width: 100%; min-height: 56px; margin: 0 0 8px; font-size: 16px; }
html.phone .ph-sh-body > .ph-play2 { width: 100%; min-height: 56px; margin: 0 0 10px; font-size: 16px; }
html.phone .ph-sh-body > section[aria-labelledby="h-files"] > h2, html.phone .ph-sh-body > section[aria-labelledby="h-face"] > h2 { display: none; }
html.phone .ph-sh-body > #p-joints > h2:first-child { display: none; }
html.phone .ph-sh-body > #tl { padding: 0; background: transparent; }
html.phone .ph-sh-body .mvsel { min-height: 64px; }
html.phone .ph-sh-body .mvplay { min-width: 56px; }
html.phone .ph-sh-body .mvplay .pt { display: none; }
html.phone .ph-sh-body .tlact .btn { flex: 1 1 120px; }
html.phone svg.strip { touch-action: pan-y; }
html.phone .kf, html.phone .kf * { touch-action: none; }
html.phone .ph-sh-body .acts4 { grid-template-columns: 1fr 1fr; }
html.phone .ph-sh-body .kfgrid { grid-template-columns: 1fr; }
html.phone .ph-sh-body .mvmeta { grid-template-columns: 1fr; }
html.phone .ph-sh-body .facebox { display: none; }
/* with a sheet open the bot has half the screen: the player and Reset step aside (they are back the moment the sheet closes; Edit has its own Play) */
html.phone.ph-sheet-open #viewbox > .transport, html.phone.ph-sheet-open .view .btn.reset { display: none; }
html.phone .ph-sh-body:has(> #p-joints:not([hidden])) > .ph-empty { display: none; }
html.phone .ph-sh-body > .ph-empty { margin: 8px 2px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; background: #FAFBFC; }
html.phone-land.ph-sheet-open #viewbox > .leanrow, html.phone-land.ph-sheet-open .readout { display: none; }   /* a sideways sheet leaves the bot a narrow strip: the face stays, the numbers step aside */

/* BAB-0061 left-handed (More): the Reset button goes to the left */
html.phone.lefty .view .btn.reset { right: auto; left: calc(10px + var(--ph-edge-l)); }