/* BAB-0058: the editor on a phone. Loaded last. Every rule is under html.phone (shared/ui/phone-boot.js), so desktop and tablet are exactly as they were.
   The page is one screen: the 3D view fills it behind a slim top bar and the thumb bar; the panels live in sheets (phone-edit.js moves them in and back). */
html.phone { --ph-pad: 10px; }
html.phone-land.ph-sheet-open { --ph-sheet-w: calc(var(--ph-rail) + min(440px, 60vw)); }
html.phone .layout.edit { display: block; position: fixed; inset: 0; z-index: 1; gap: 0; }
html.phone .side, html.phone .tabs, html.phone .stage > .status, html.phone .stage > .toolbar { display: none !important; }
html.phone .stage { position: absolute; inset: 0; border: 0; border-radius: 0; background: #E9EDF2; box-shadow: none; display: block; animation: none; }
/* the view runs behind the bars; with a sheet open it ends where the sheet starts (so the bot stays in sight above a half sheet) */
html.phone .stage .view { position: absolute; left: 0; top: 0; right: var(--ph-sheet-w, var(--ph-rail)); bottom: var(--ph-sheet-h, 0px); min-height: 0; height: auto; flex: none; box-shadow: none; }
html.phone-land .stage .view { bottom: 0; }
html.phone #cube { top: calc(var(--ph-top) + 10px); right: calc(14px + var(--ph-edge-r)); }
html.phone-land #cube { right: 14px; }
html.phone .drophint { top: calc(var(--ph-top) + 8px); max-width: 86%; }
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 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; }

/* the sheets' contents */
html.phone .ph-sh-body > #p-add > h2:first-child, html.phone .ph-sh-body > #p-checks > h2:first-child, html.phone .ph-sh-body > #p-pieces > h2:first-child { display: none; }
html.phone .ph-sh-body > #p-sel > h2:first-child, html.phone .ph-sh-body > #p-bot > h2:first-child { display: flex; }
html.phone .ph-sh-body > #p-sel + #p-bot { border-top: 2px solid var(--hue); margin-top: 14px; padding-top: 4px; }
html.phone .ph-sh-body > .warns { margin: 0 0 8px; }
html.phone .subtabs { top: 0; margin-top: 0; padding-top: 2px; }
html.phone .ph-slot { display: block; }
html.phone .ph-slot > .filebar, html.phone .ph-slot > .toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; background: transparent; justify-content: flex-start; }
html.phone .ph-slot .filebar .tb, html.phone .ph-slot .toolbar .tb { flex: 1 1 78px; max-width: 150px; min-width: 64px; flex-direction: column; min-height: 56px; font-size: 14px; white-space: normal; text-align: center; }
html.phone .ph-slot .toolbar { flex-direction: column; align-items: stretch; }
html.phone .ph-slot .toolbar .tg { justify-content: flex-start; gap: 8px; }
html.phone .ph-slot .toolbar .tglabel { flex-basis: 100%; text-align: left; padding: 0; }
html.phone .ph-slot .toolbar .tb[data-snap] { flex-direction: row; max-width: none; }
html.phone .ph-slot .toolbar .tb[data-mode] { flex-basis: 110px; flex-direction: row; max-width: none; }
html.phone .ph-slot .toolbar .tb[data-view="perspective"] { flex-basis: 110px; }
html.phone .nfrow3 .nf input, html.phone .nf input { font-size: 16px !important; }

/* the move pad, bottom left in the thumb's reach: arrows plus up and down, the snap on the middle button */
html.phone .ph-pad { position: fixed; z-index: 20; left: calc(10px + var(--ph-edge-l)); bottom: calc(var(--ph-bar) + var(--bots-cc-h, 0px) + 12px); display: grid; grid-template-columns: repeat(4, 52px); grid-template-rows: repeat(3, 52px); gap: 6px; touch-action: none; user-select: none; -webkit-user-select: none; }
html.phone-land .ph-pad { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: calc(12px + var(--ph-edge-l)); }
html.phone .ph-pad[hidden], html.phone.ph-sheet-open .ph-pad { display: none !important; }
html.phone .padb2, html.phone .padsnap {
  width: 52px; height: 52px; min-width: 52px; min-height: 52px; padding: 2px; margin: 0; flex-direction: column; gap: 0; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line, #D6DBE3); border-radius: 16px; background: rgba(255, 255, 255, .94); color: var(--ink, #242830); font-size: 14px; font-weight: 700; line-height: 1.05;
  box-shadow: 0 2px 8px -3px rgba(20, 26, 33, .45); touch-action: none;
}
html.phone .padb2 .ico { width: 22px; height: 22px; }
html.phone .padb2:active { background: rgba(var(--hue-rgb), .2); border-color: var(--hue); transform: scale(.94); }
html.phone .padsnap { background: var(--night, #141A21); color: #fff; border-color: var(--night, #141A21); box-shadow: 0 0 0 1px rgba(var(--hue-rgb), .65), 0 6px 14px -8px rgba(var(--hue-rgb), .9); }
html.phone .padsnap span { font-size: 16px; font-weight: 800; }
html.phone .padsnap small { font-size: 14px; font-weight: 600; opacity: .85; }
html.phone .padb2.ax-x { border-top-color: var(--ax-x); } html.phone .padb2.ax-y { border-top-color: var(--ax-y); } html.phone .padb2.ax-z { border-top-color: var(--ax-z); }

/* BAB-0061 left-handed (More): the move pad goes to the right */
html.phone.lefty .ph-pad { left: auto; right: calc(10px + var(--ph-edge-r)); }

/* BAB-0063: the header's other tabs live in the Go to sheet and the strip under the view is for a desktop (the same fields are in Settings); the cost panel is a sheet */
html.phone .placesnav, html.phone .props { display: none !important; }
html.phone .ph-sh-body > #p-cost > h2:first-child { display: none; }
html.phone .ph-sh-body > #p-cost { border: 0; padding-top: 0; }
html.phone .pcdetail { margin: 8px 0 2px; }
html.phone .costlist li { font-size: 14px; }
html.phone .showme { min-height: 48px; }
/* the status pill is one line on a phone: the state; what it costs is one tap away (More, What it costs) */
html.phone .top .chip .l1 { display: inline; }
html.phone .top .chip .l2 { display: none; }

/* BAB-0071: when nothing needs fixing, the pill is the price of the built bot, and it opens What it costs */
html.phone .top .chip:not(.bad) .l3 { display: inline; font-weight: 700; }
html.phone .top .chip:not(.bad):has(.l3) .l1 { display: none; }

/* BAB-0071: on a phone the View menu's contents sit in More as before (the whole toolbar moves into that sheet) */
html.phone .vm > #b-viewmenu { display: none; }
html.phone .vm-pop, html.phone .vm-pop[hidden] { display: contents; position: static; }