/* BAB-0059: the Sounds 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 bot's face is the screen, on a dark bench; the sound's shape is a slim strip under it; a strip of packs rides above the thumb bar; everything else is a sheet (phone-sound.js). */
html.phone { --sd-pack: 104px; --sd-wave: 64px; }
html.phone-land { --sd-pack: 88px; --sd-wave: 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; box-shadow: none; overflow: hidden; animation: none;
  background: radial-gradient(120% 90% at 50% 0%, #1B242E 0%, #0B0F14 62%, #080B0F 100%); }
html.phone #stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px); background-size: 16px 16px; pointer-events: none; }
html.phone #h-stage, html.phone #stage > .playrow, html.phone #stage > .help, html.phone #stage > .stagegrid, html.phone #glass-note { display: none; }
/* the face: a box that ends where the strips (or a sheet) start; fit() in sound.js sizes the picture to it */
html.phone #stage > #glassbox { position: absolute; left: 0; top: var(--ph-top); right: var(--ph-sheet-w, var(--ph-rail)); bottom: var(--ph-sheet-h, calc(var(--ph-bar) + var(--sd-pack) + var(--sd-wave) + 8px + var(--bots-cc-h, 0px)));
  display: grid; place-items: center; padding: 66px 8px 6px; }
html.phone-land #stage > #glassbox { padding: 6px 84px 6px 8px; }                                            /* Stop is beside the face, not on it */
html.phone #glass { border-radius: 18px; background: #000; box-shadow: 0 0 0 3px #1A2028, 0 0 0 4px rgba(var(--hue-rgb), .6), 0 0 44px -6px rgba(var(--hue-rgb), .75), 0 22px 44px -18px rgba(0, 0, 0, .9); cursor: pointer; }
/* Stop: a round button on the view, beside the thumb */
html.phone .sd-hud { position: absolute; z-index: 6; right: calc(14px + var(--ph-rail) + var(--ph-edge-r)); top: calc(var(--ph-top) + 12px); display: flex; gap: 8px; }
html.phone-land .sd-hud { right: calc(14px + var(--ph-rail)); }
html.phone .sd-hud .btn { min-width: 56px; min-height: 56px; padding: 0 16px; border-radius: 28px; border: 2px solid rgba(var(--hue-rgb), .8); background: rgba(255, 255, 255, .1); color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 0 18px -6px rgba(var(--hue-rgb), .9); }
html.phone .sd-hud .btn:active { background: rgba(var(--hue-rgb), .35); }
/* the sound's shape: a slim strip under the face, the playhead running along it */
html.phone .sd-wave { height: var(--sd-wave); bottom: calc(var(--ph-bar) + var(--sd-pack) + var(--bots-cc-h, 0px)); left: calc(12px + var(--ph-edge-l)); right: calc(12px + var(--ph-rail)); }
html.phone-land .sd-wave { display: none; }
html.phone .sd-wave .viz { height: 100%; }
html.phone .sd-wave .viz figcaption, html.phone .sd-wave .axis { display: none; }
html.phone .sd-wave .vizwrap { height: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(var(--hue-rgb), .5), 0 0 22px -8px rgba(var(--hue-rgb), .8); }
html.phone .sd-wave canvas { height: 100% !important; border: 0; border-radius: 12px; }
/* the packs: text cards, the list scrolling sideways with the next one peeking in */
html.phone .sd-packs { height: var(--sd-pack); bottom: calc(var(--ph-bar) + var(--bots-cc-h, 0px)); }
html.phone #stock { display: flex; gap: 10px; height: 100%; margin: 0; padding: 8px 28px 10px calc(14px + var(--ph-edge-l)); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-left: 14px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; }
html.phone #stock::-webkit-scrollbar { display: none; }
html.phone #stock li { flex: 0 0 auto; width: 176px; scroll-snap-align: start; }
html.phone .sd-packs .stockbtn { height: 100%; min-height: 0; padding: 6px 12px; border: 2px solid rgba(255, 255, 255, .16); border-radius: 18px; background: rgba(255, 255, 255, .07); color: #fff; align-items: flex-start; text-align: left; touch-action: pan-x; }
html.phone .sd-packs .stockbtn b { font-size: 16px; line-height: 1.15; }
html.phone .sd-packs .stockbtn small { font-size: 14px; line-height: 1.2; color: #B8C3D0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.phone .sd-packs .stockbtn[aria-pressed="true"] { border-color: var(--hue); background: rgba(var(--hue-rgb), .2); box-shadow: 0 0 18px -4px rgba(var(--hue-rgb), .9); }
html.phone .sd-packs .stockbtn:active { transform: scale(.97); }
html.phone-land #stock li { width: 160px; }

/* the sheets' contents */
html.phone .ph-sh-body > #p-controls > h2:first-child, html.phone .ph-sh-body > #p-controls > .help:first-of-type { display: none; }
html.phone .ph-sh-body > section[aria-labelledby="h-files"] > h2 { 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 .slist li { grid-template-columns: 72px minmax(0, 1fr); }
html.phone .ph-sh-body .slist .btn { min-height: 52px; }
html.phone .ph-sh-body details[data-key="sounds"] { border-top: 0; }
html.phone .ph-sh-body details[data-key="sounds"] > summary { display: none; }
html.phone .ph-sh-body .fourh { margin: 12px 0 6px; }
html.phone .ph-sh-body .talkrow { flex-wrap: wrap; }
html.phone .ph-sh-body .talkrow input { flex: 1 1 200px; min-height: 52px; }
html.phone .ph-sh-body .talkrow .btn { flex: 1 1 100px; min-height: 52px; }
html.phone .ph-sh-body .moodstrip .btn { flex: 1 1 96px; }
html.phone .ph-sh-body .levelbox { flex: 1 1 100%; }
html.phone .ph-sh-body .vizcol { gap: 14px; }
html.phone .ph-sh-body > .vizcol .viz canvas { width: 100%; }
/* a switch row in the Mix sheet: the whole row is the target (the label reaches under the 24 px box, which lets the press through to it) */
html.phone .ctl.check { position: relative; }
html.phone .ctl.check input[type="checkbox"] { pointer-events: none; }
html.phone .ctl.check label { margin-left: -48px; padding-left: 48px; }