/* BAB-0058: the phone shell. Used by every app page (editor, test room, and next the face, sounds, moves and behaviour pages: see shared/ui/PHONE.md).
   EVERY rule below is under html.phone (set by phone-boot.js: the narrow side under 600 px, or a short sideways screen), so desktop and tablet are untouched.
   The look is the live layer's (alive.css): a light page, white sheets with a neon tick, night and neon only on the one main action, 44 px targets, 14 px text,
   inputs 16 px (no zoom on iOS), a solid 2 px focus ring. No blur on a phone (it costs frames). Heights follow the screen (100dvh) and the insets
   (env(safe-area-inset-*)), never fixed pixels, so a notch or the home bar never covers a control.
   Parts: the page is one screen; the slim top bar (.top); the thumb bar (.ph-bar: a row along the bottom, a column on the right edge when sideways);
   sheets (.ph-sheet: handle, title, close, own scroll; peek / half / full; a side panel when sideways); a toast (.ph-toast); big menu rows (.ph-row). */
html.phone {
  --ph-top: calc(48px + env(safe-area-inset-top, 0px));
  --ph-bar: calc(60px + env(safe-area-inset-bottom, 0px));
  --ph-rail: 0px;
  --ph-edge-l: env(safe-area-inset-left, 0px);
  --ph-edge-r: env(safe-area-inset-right, 0px);
  height: 100%; overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
html.phone-land { --ph-bar: 0px; --ph-rail: calc(72px + env(safe-area-inset-right, 0px)); }
html.phone body { position: fixed; inset: 0; height: 100dvh; display: block; padding: 0; gap: 0; overflow: hidden; background: #E6EBF1; background-image: none; overscroll-behavior: none; }
html.phone * { -webkit-tap-highlight-color: transparent; }
html.phone button, html.phone a, html.phone summary, html.phone label, html.phone select { touch-action: manipulation; }
html.phone .skip { display: none; }

/* the shell's own parts do not exist above the breakpoint */
html:not(.phone) .ph-bar, html:not(.phone) .ph-sheet, html:not(.phone) .ph-scrim, html:not(.phone) .ph-toast, html:not(.phone) .ph-pad, html:not(.phone) .ph-page, html:not(.phone) .ph-pill, html:not(.phone) .ph-strip { display: none !important; }
html:not(.phone) .fc-cap, html:not(.phone) .sd-hud, html:not(.phone) .bh-hud { display: none !important; }     /* BAB-0059: the parts the Face, Sounds, Moves and Behaviour scripts add (empty above the breakpoint, but never in the layout) */

html.phone .ph-sheet[hidden], html.phone .ph-scrim[hidden], html.phone .ph-toast[hidden] { display: none !important; }

/* a finger has no hover: nothing lifts or glows because the last finger touched it */
html.phone button:not(.vc-face):not([disabled]):not([aria-disabled="true"]):not([aria-pressed="true"]):hover, html.phone a.btn:hover, html.phone .step a:hover { transform: none; box-shadow: none; }
html.phone .card { -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
html.phone .card::before { display: none; }
html.phone input, html.phone select, html.phone textarea { font-size: 16px !important; }

/* ---- the slim top bar: logo, the step switcher, the status pill. Information only; nothing here is a thumb action ---- */
html.phone .top {
  position: fixed; z-index: 30; left: 0; right: 0; top: 0; height: var(--ph-top); min-height: 0; margin: 0; flex-wrap: nowrap; align-items: center; gap: 6px;
  padding: env(safe-area-inset-top, 0px) calc(8px + var(--ph-edge-r)) 0 calc(8px + var(--ph-edge-l)); background: #fff; border-bottom: 1px solid var(--hair, #D6DBE3); box-shadow: 0 6px 14px -12px rgba(20, 26, 33, .55);
}
html.phone .top .brand { flex: none; min-width: 44px; min-height: 44px; margin: 0; justify-content: center; }
html.phone .top .brand span, html.phone .top .bots-me, html.phone .top .filebar, html.phone .top .drawerbtn { display: none; }
html.phone .top .brand img { width: 30px; height: 30px; }
html.phone .top .steps { flex: none; order: 0; width: auto; gap: 2px; margin: 0; padding: 0 2px; background: var(--raised, #ECEFF3); border-radius: 14px; }
html.phone .top .step, html.phone .top .step.is-link { flex: 0 0 auto; }
html.phone .top .step { min-height: 44px; padding: 0 10px; gap: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
html.phone .top .step .n, html.phone .top .step em { display: none; }
html.phone .top .step a, html.phone .top .stepbtn { flex: 0 0 auto; min-height: 44px; padding: 0 10px; gap: 0; margin: 0 -10px; justify-content: center; border-radius: 12px; font-size: 14px; }
html.phone .top .step.is-link { padding: 0 10px; }
html.phone .top .step.is-now { background: var(--night, #141A21); color: #fff; box-shadow: 0 0 0 1px rgba(var(--hue-rgb), .7), 0 4px 12px -6px rgba(var(--hue-rgb), .9); }
html.phone .top .step:has(a):hover, html.phone .top .stepbtn:hover { background: transparent; border-color: transparent; }
html.phone .top #b-getit[aria-disabled="false"] { background: var(--night, #141A21) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(var(--hue-rgb), .7); }
html.phone .top #b-getit[aria-disabled="true"] { color: #5A6472; }
html.phone .top .chip {
  flex: 1 1 0; order: 0; min-width: 44px; max-width: none; margin: 0 0 0 auto; min-height: 44px; padding: 0 10px 0 24px; display: block; line-height: 42px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 14px; text-align: left; border-radius: 22px; cursor: pointer;
}
html.phone .top .chip::before { left: 10px; }

/* ---- the thumb bar: upright a row along the bottom, sideways a column on the right edge ---- */
html.phone .ph-bar {
  position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; height: var(--ph-bar); display: flex; align-items: stretch; justify-content: space-between; gap: 4px;
  padding: 6px calc(8px + var(--ph-edge-r)) env(safe-area-inset-bottom, 0px) calc(8px + var(--ph-edge-l)); background: #fff; border-top: 1px solid var(--hair, #D6DBE3); box-shadow: 0 -6px 14px -12px rgba(20, 26, 33, .55);
}
html.phone .ph-b {
  position: relative; flex: 1 1 0; min-width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 0; margin: 0;
  border: 0; border-radius: 14px; background: transparent; color: var(--ink, #242830); font-size: 14px; font-weight: 600; line-height: 1.1; cursor: pointer;
  transition: background-color .15s var(--ease, ease), box-shadow .15s var(--ease, ease), transform .12s var(--ease, ease);
}
html.phone .ph-b .ico { width: 26px; height: 26px; color: var(--hue-ink, #087F75); }
html.phone .ph-b:active:not([disabled]) { transform: scale(.94); background: rgba(var(--hue-rgb), .16); }
html.phone .ph-b[aria-pressed="true"], html.phone .ph-b[aria-expanded="true"] { background: rgba(var(--hue-rgb), .13); box-shadow: inset 0 -3px 0 var(--hue); }
html.phone .ph-b[disabled] { opacity: .38; }
html.phone .ph-b.main { background: var(--night, #141A21); color: #fff; box-shadow: 0 0 0 1px rgba(var(--hue-rgb), .6), 0 8px 18px -10px rgba(var(--hue-rgb), .95); }
html.phone .ph-b.main .ico { color: var(--hue); }
html.phone .ph-b[data-badge]:not([data-badge=""])::after { content: attr(data-badge); position: absolute; top: 2px; right: calc(50% - 26px); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--bad, #BC3030); color: #fff; font-size: 14px; line-height: 18px; text-align: center; }
html.phone-land .ph-bar { left: auto; top: var(--ph-top); width: var(--ph-rail); height: auto; flex-direction: column; justify-content: center; gap: 4px; padding: 6px var(--ph-edge-r) 6px 6px; border-top: 0; border-left: 1px solid var(--hair, #D6DBE3); box-shadow: -6px 0 14px -12px rgba(20, 26, 33, .55); }
html.phone-land .ph-b { flex: 0 1 52px; width: 100%; }

/* ---- sheets ---- */
html.phone .ph-scrim { position: fixed; z-index: 39; inset: 0; background: rgba(20, 26, 33, .14); }
html.phone .ph-sheet {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-height: 92dvh; display: flex; flex-direction: column; background: #fff; border-radius: 22px 22px 0 0;
  box-shadow: 0 0 0 1px var(--hair, #D6DBE3), 0 -12px 36px -10px rgba(20, 26, 33, .5); transform: translateY(102%); padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform .26s var(--ease, ease), height .22s var(--ease, ease); will-change: transform; overscroll-behavior: contain;
}
html.phone .ph-sheet.is-open { transform: none; }
html.phone .ph-sheet::before { content: ""; position: absolute; left: 22px; top: -1px; width: 56px; height: 3px; border-radius: 0 0 3px 3px; background: var(--hue); box-shadow: 0 0 12px rgba(var(--hue-rgb), .7); pointer-events: none; }
html.phone .ph-sh-head { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 58px; padding: 12px 6px 0 16px; touch-action: none; border-bottom: 1px solid var(--hair, #D6DBE3); }
html.phone .ph-sh-head h2 { position: relative; margin: 0; font-size: 18px; flex: 1 1 auto; min-width: 0; pointer-events: none; }
html.phone .ph-sh-head h2:focus { outline: none; }
/* the handle: a bar drawn at the top, and the whole title row is the thing you press and drag (a 44 px target, not a 5 px line) */
html.phone .ph-grip { position: absolute; left: 0; right: 52px; top: 0; bottom: 0; min-height: 44px; display: block; cursor: grab; touch-action: none; border-radius: 22px 0 0 0; }
html.phone .ph-grip i { position: absolute; left: 50%; top: 8px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: #C3CBD6; }
html.phone .ph-grip:focus-visible { outline: 2px solid var(--hue-ink); outline-offset: -4px; }
html.phone .ph-x { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 12px; cursor: pointer; }
html.phone .ph-x .ico { width: 24px; height: 24px; }
html.phone .ph-sh-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 14px 18px; }
/* a desktop panel living in a sheet: no card chrome of its own (a page hides a first title that repeats the sheet's own) */
html.phone .ph-sh-body > .card, html.phone .ph-sh-body > section, html.phone .ph-sh-body > aside { border: 0; box-shadow: none; background: transparent; padding: 0; margin: 0 0 8px; border-radius: 0; overflow: visible; min-height: 0; max-height: none; position: static; }
html.phone-land .ph-sheet { top: var(--ph-top); bottom: 0; left: auto; right: var(--ph-rail); width: min(440px, 60vw); height: auto !important; max-height: none; border-radius: 18px 0 0 0; transform: translateX(104%); padding-bottom: env(safe-area-inset-bottom, 0px); }
html.phone-land .ph-sheet.is-open { transform: none; }
html.phone-land .ph-sheet::before { left: -1px; top: 22px; width: 3px; height: 56px; border-radius: 0 3px 3px 0; }
html.phone-land .ph-grip i { display: none; }
html.phone-land .ph-sh-head { padding-top: 0; min-height: 52px; }
html.phone-land .ph-scrim { left: 0; right: 0; }

/* ---- a toast instead of a status line ---- */
html.phone .ph-toast {
  position: fixed; z-index: 50; left: 50%; top: calc(var(--ph-top) + 10px); transform: translateX(-50%); width: max-content; max-width: min(92vw, 440px); margin: 0; padding: 10px 16px;
  border-radius: 14px; background: var(--night, #141A21); color: #fff; font-size: 14px; line-height: 1.35; text-align: center; box-shadow: 0 0 0 1px rgba(var(--hue-rgb), .65), 0 12px 26px -12px rgba(var(--hue-rgb), .95); pointer-events: none;
}
html.phone .ph-toast.bad { background: #fff; color: var(--bad, #BC3030); box-shadow: 0 0 0 2px var(--bad-line, #E7B3B3), 0 12px 26px -12px rgba(188, 48, 48, .6); font-weight: 600; }
html.phone .ph-toast.in { animation: ph-toast-in .32s var(--ease, ease) both; }
html.phone-land .ph-toast { left: calc(50% - var(--ph-rail) / 2); }
/* a toast is information, so it sits at the top (feedback beside the thumb, not under it) */
@keyframes ph-toast-in { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- big menu rows (the More menu and quick menus) ---- */
html.phone .ph-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
html.phone .ph-row { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 6px 12px; border: 1px solid var(--line, #D6DBE3); border-radius: 14px; background: #fff; color: var(--ink, #242830); text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
html.phone .ph-row:active { background: rgba(var(--hue-rgb), .12); border-color: var(--hue); }
html.phone .ph-row .ico { width: 26px; height: 26px; flex: none; }
html.phone .ph-noico { width: 26px; flex: none; }
html.phone .ph-rt { display: grid; gap: 1px; min-width: 0; }
html.phone .ph-rt b { font-size: 16px; font-weight: 700; }
html.phone .ph-rt small { font-size: 14px; color: var(--ink2, #566070); }
html.phone .ph-rows[data-cols="2"] { grid-template-columns: 1fr 1fr; }
html.phone .ph-h { margin: 14px 0 6px; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink2, #566070); font-weight: 700; }

/* the dialogs (a question, Get it, the keys) are bottom sheets too */
html.phone dialog, html.phone #getit, html.phone #keys { width: 100vw; max-width: 100vw; margin: auto 0 0 0; border-radius: 22px 22px 0 0; max-height: 92dvh; overflow: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
html.phone dialog .row { flex-wrap: wrap; }
html.phone dialog .row .btn { flex: 1 1 140px; }

/* the cookie choice sits above the bottom bar, never over it (telemetry.js puts it at the bottom of the screen) */
html.phone .bots-stack { bottom: calc(var(--ph-bar) + 8px); left: 8px; right: 8px; }                  /* BAB-0061: the cookie choice and the Add to Home Screen card share this slim stack */
html.phone-land .bots-stack { bottom: 8px; left: 8px; right: calc(var(--ph-rail) + 8px); }
html.phone.ph-sheet-open .bots-stack { display: none; }                                                /* a sheet is the one thing open: the choice waits behind it */

@media (prefers-reduced-motion: reduce) {
  html.phone .ph-sheet, html.phone .ph-b, html.phone .ph-toast.in { transition: none !important; animation: none !important; }
}

/* ---- BAB-0059: the four design pages (Face, Sounds, Moves, Behaviour) share these: the page button in the top bar, the Pages sheet, the strip of cards at the bottom of the view ---- */
html.phone .top .ph-page { flex: 0 1 auto; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0 8px 0 14px; border: 0; border-radius: 14px; background: var(--night, #141A21); color: #fff; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 0 0 1px rgba(var(--hue-rgb), .7), 0 4px 12px -6px rgba(var(--hue-rgb), .9); }
html.phone .top .ph-page .ico { width: 22px; height: 22px; color: var(--hue); }
html.phone .top .ph-page[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--hue), 0 4px 12px -6px rgba(var(--hue-rgb), .9); }
html.phone .top > nav, html.phone .top > a.btn, html.phone .top > .steps { display: none; }                                     /* moved into the Pages sheet; until it is there they stay out of the bar */
html.phone .ph-sh-body > nav { margin: 0; }
html.phone .ph-sh-body .steps { display: grid; gap: 6px; width: auto; margin: 0; padding: 0; }
html.phone .ph-sh-body .step { flex: none; width: 100%; min-height: 56px; padding: 0 14px; justify-content: flex-start; border-radius: 14px; font-size: 16px; font-weight: 700; }
html.phone .ph-sh-body .step > a { flex: 1; min-height: 56px; margin: 0 -14px; padding: 0 14px; font-size: 16px; }
html.phone .ph-sh-body .step em { font-weight: 500; }
html.phone .ph-sh-body > a.btn { width: 100%; min-height: 56px; margin: 10px 0 0; font-size: 16px; text-decoration: none; }
html.phone .top .chip { cursor: default; }
html.phone .top .chip[role="button"] { cursor: pointer; }
/* a strip of cards at the bottom of the view (presets, personalities, packs): swipe sideways, the next one peeks in, the thumb bar is under it */
html.phone .ph-strip { position: fixed; z-index: 20; left: 0; right: var(--ph-rail); bottom: calc(var(--ph-bar) + var(--bots-cc-h, 0px)); overflow: hidden; }
html.phone.ph-sheet-open .ph-strip { display: none; }

/* ---- BAB-0061: one app, one way around ---- */
/* the place switcher: the "Go to" sheet is a grid of big tiles; the place you are in is lit (night tile, neon ring) */
html.phone .ph-rows[data-cols="2"] { gap: 8px; }
html.phone .ph-rows[data-cols="2"] .ph-row { min-height: 72px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 12px; }
html.phone .ph-rows[data-cols="2"] .ph-rt small { line-height: 1.25; }
html.phone .ph-row .ico { color: var(--rh, var(--hue-ink, #087F75)); }
html.phone .ph-row.is-now { background: var(--night, #141A21); border-color: var(--night, #141A21); color: #fff; box-shadow: 0 0 0 1px rgba(var(--hue-rgb), .7), 0 8px 18px -12px rgba(var(--hue-rgb), .95); }
html.phone .ph-row.is-now .ico { color: var(--hue); }
html.phone .ph-row.is-now small { color: #C9D2DC; }
html.phone .ph-row[aria-pressed="true"] { border-color: var(--hue); box-shadow: inset 4px 0 0 var(--hue); }
html.phone .top .ph-page[data-ready="1"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 8px var(--hue); }       /* the editor's checks pass: Get it is ready */
html.phone .top .ph-page span { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* left-handed (More): the thumb bar runs the other way; the pages' phone CSS swap the stick, pad and round buttons */
html.phone.lefty .ph-bar { flex-direction: row-reverse; }
html.phone-land.lefty .ph-bar { flex-direction: column; }