/* BAB-0074: the Make page on a phone. Loaded last (after make.css and shared/ui/phone.css). Every rule is under html.phone, so desktop and tablet are exactly as they were.
   The bot is the screen. Under it, always: the six steps as tabs and one strip of picture cards. The thumb bar holds the actions; the price panel is a sheet (phone-make.js). */
html.phone { --mk-dock-h: 220px; --cw: 104px; --mk-dock-b: calc(var(--ph-bar) + var(--bots-cc-h, 0px)); }
html.phone-land { --mk-dock-w: min(46vw, 330px); --cw: 100px; --mk-dock-b: calc(env(safe-area-inset-bottom, 0px) + var(--bots-cc-h, 0px)); }
html.phone-land.ph-sheet-open { --ph-sheet-w: calc(var(--ph-rail) + min(440px, 60vw)); }
html.phone .make { display: block; position: fixed; inset: 0; z-index: 1; gap: 0; }
html.phone .stage { position: absolute; inset: 0; border: 0; border-radius: 0; background: #E6EBF1; }
/* the view runs from under the top bar to where the dock starts (with a sheet open: to where the sheet starts, so the bot stays in sight) */
html.phone .stage .view { position: absolute; left: 0; top: var(--ph-top); right: var(--ph-sheet-w, var(--ph-rail)); bottom: calc(var(--ph-sheet-h, var(--mk-dock-b) + var(--mk-dock-h))); }
html.phone.ph-sheet-open .stage .view { bottom: var(--ph-sheet-h, 0px); }
html.phone-land .stage .view { left: var(--mk-dock-w); bottom: 0; }
html.phone-land.ph-sheet-open .stage .view { left: 0; }
html.phone #cube { top: 10px; right: calc(12px + var(--ph-edge-r)); }
html.phone .loading { padding-top: var(--ph-top); }
html.phone .notice { display: none; }

/* the dock: tabs, then the strip of cards */
html.phone .dock { position: fixed; z-index: 20; left: 0; right: var(--ph-rail); bottom: var(--mk-dock-b); margin: 0; padding: 8px 8px 6px; gap: 6px; border: 0; border-top: 1px solid var(--hair); border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -6px 14px -12px rgba(20, 26, 33, .55); }
html.phone .dock::before { left: 22px; top: -1px; width: 56px; }
html.phone.ph-sheet-open .dock { display: none; }
html.phone .tabs { gap: 2px; }
html.phone .tab { flex: 1 1 auto; min-width: 44px; padding: 0 4px; gap: 0; font-size: 14px; min-height: 44px; border-radius: 12px; }
html.phone .tab .ico { display: none; }
html.phone .nav { display: none; }
html.phone .stripwrap { height: calc(var(--cw) * 0.75 + 92px); }
html.phone .strip { padding: 4px 28px 6px 2px; gap: 8px; scrollbar-width: none; touch-action: pan-x; }
html.phone .strip::-webkit-scrollbar { display: none; }
html.phone .pick { padding: 4px 4px 6px; gap: 3px; border-radius: 12px; }
html.phone .pick b { font-size: 14px; }
html.phone .pick small { font-size: 14px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.phone .pick[aria-pressed="true"]::after { top: 9px; right: 9px; width: 20px; height: 20px; }
html.phone .pick[aria-pressed="true"]::before { top: 14px; right: 13.5px; width: 9px; height: 5px; border-width: 0 0 2.5px 2.5px; }
html.phone .pick.person[aria-pressed="true"]::after { top: 7px; right: 7px; } html.phone .pick.person[aria-pressed="true"]::before { top: 12px; right: 11.5px; }
html.phone .pick.person { width: 190px; padding: 8px 10px; }
html.phone .pick.person small { -webkit-line-clamp: 3; }
html.phone .pick.note { width: 190px; }
html.phone .colours { padding: 0; gap: 6px; }
html.phone .roles { flex-wrap: nowrap; gap: 6px; }
html.phone .role { flex: 1 1 0; min-width: 0; padding: 4px 8px 4px 6px; gap: 6px; font-size: 14px; }
html.phone .role small { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11ch; }
html.phone .swatches { gap: 5px; }
html.phone .sw { width: 44px; height: 44px; border-radius: 10px; }
html.phone .sw .dot { width: 28px; height: 28px; }
/* a short screen: only a card's name, so the bot keeps its room (a greyed card still says why) */
@media (max-height: 700px) { html.phone:not(.phone-land) .pick:not([aria-disabled="true"]) small { display: none; } html.phone:not(.phone-land) { --mk-dock-h: 190px; } }

/* sideways: the dock is a column on the left, the cards two across and scrolling up and down inside it */
html.phone-land .dock { top: var(--ph-top); bottom: 0; right: auto; left: 0; width: var(--mk-dock-w); border-radius: 0 18px 0 0; border-top: 0; border-right: 1px solid var(--hair); padding: 8px 8px 8px calc(8px + var(--ph-edge-l)); grid-template-rows: auto minmax(0, 1fr); box-shadow: 6px 0 14px -12px rgba(20, 26, 33, .55); }
html.phone-land .dock::before { display: none; }
html.phone-land .tabs { flex-wrap: wrap; }
html.phone-land .tab { flex: 1 1 30%; }
html.phone-land .stripwrap { height: auto; min-height: 0; }
html.phone-land .strip { flex-wrap: wrap; align-content: flex-start; overflow-x: hidden; overflow-y: auto; padding: 4px 2px 8px 2px; scroll-snap-type: none; touch-action: pan-y; }
html.phone-land .pick { --cw: calc((var(--mk-dock-w) - 30px) / 2); }
html.phone-land .pick:not([aria-disabled="true"]) small { display: none; }
html.phone-land .pick.person, html.phone-land .pick.note { width: 100%; }
html.phone-land .colours { flex: 1 1 100%; }

/* the price panel in its sheet */
html.phone .ph-sh-body > #p-sum > h2:first-child { display: none; }
html.phone .ph-sh-body > #p-sum { display: flex; flex-direction: column; gap: 10px; overflow: visible; }
html.phone .ph-sh-body > #p-sum .acts { margin-top: 4px; }
html.phone .ph-sh-body > #p-sum .acts .btn { min-height: 56px; font-size: 17px; }
html.phone .ph-slot { display: block; }
html.phone .price dd:not(.n) { font-size: 28px; }

/* left-handed (More): the cube goes to the other corner */
html.phone.lefty #cube { right: auto; left: calc(12px + var(--ph-edge-l)); }