/* Phone view (js/phoneview.js): on a window 900 px or wider, the app in a centred phone frame on a plain dark page.
   html.pv is only ever set on the web at 900 px or more; nothing here applies on phones or in the store apps. */
html.pv { height: 100%; overflow: hidden; background: #0d0f13; }
html.pv body {
  --pv-h: min(844px, calc(100vh - 72px)); --pv-w: min(390px, calc(var(--pv-h) * .462), calc(100vw - 80px));
  position: relative; width: var(--pv-w); height: var(--pv-h); margin: calc((100vh - var(--pv-h)) / 2) auto 0;
  border-radius: 44px; overflow: hidden; isolation: isolate;
  transform: translateZ(0);            /* makes the phone the containing block for every position: fixed child */
  box-shadow: 0 0 0 10px #1d2026, 0 0 0 11px #343842, 0 30px 90px rgba(0, 0, 0, .6);
}
/* Sizes written for a phone screen in vh/vw, measured against the phone instead of the whole window */
html.pv .confetti { width: 100%; height: 100%; }
html.pv .pc-sheet { max-height: calc(var(--pv-h) * .88); }
html.pv .sg-card { max-height: calc(var(--pv-h) * .86); }
html.pv .sup-full img { max-height: calc(var(--pv-h) - 140px); }
html.pv #toast { max-width: calc(var(--pv-w) - 2 * var(--edge, 16px)); }
html.pv .st-body > .st-bgyear { font-size: 168px; }
html.pv .fm-chip { max-width: 280px; }
html.pv .iv-view { max-height: calc(var(--pv-h) * .56); }
html.pv .pin-map { min-height: calc(var(--pv-h) * .5); }
html.pv .ob-creating { padding-top: calc(var(--pv-h) * .18); }
html.pv .ob-done { padding-top: calc(var(--pv-h) * .12); }

/* The "Phone view / Full width" switch: only on wide windows, outside the phone (top right of the page); in full width
   it sits small at the bottom left, above the tab bar. */
#pv-switch { display: none; }
html.pv-wide #pv-switch {
  display: flex; position: fixed; z-index: 2147483000; top: 16px; right: 16px; padding: 3px; gap: 2px;
  border-radius: 999px; background: rgba(30, 33, 40, .92); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3); font: 600 13px/1 "Plus Jakarta Sans", system-ui, sans-serif;
}
html.pv-wide:not(.pv) #pv-switch { top: auto; right: auto; left: 12px; bottom: calc(64px + 12px); opacity: .85; }
#pv-switch button { appearance: none; border: 0; margin: 0; cursor: pointer; padding: 8px 12px; border-radius: 999px;
  background: transparent; color: #c9ccd3; font: inherit; white-space: nowrap; }
#pv-switch button:hover { color: #fff; }
#pv-switch button[aria-pressed="true"] { background: #fff; color: #15171c; }
#pv-switch button:focus-visible { outline: 2px solid #ffb21e; outline-offset: 2px; }
/* no desktop scroll bars inside the phone (a phone shows none); the wheel and trackpad still scroll */
html.pv body, html.pv body * { scrollbar-width: none; }
html.pv body ::-webkit-scrollbar { display: none; }

/* Presenter mode (js/presenter.js): the "Presenter mode · tap to exit" pill, above the tab bar (at the foot when a
   full-screen page hides the tabs) */
#presenter-pill { position: fixed; z-index: 2147482000; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h, 64px) + var(--safe-bot, 0px) + 10px);
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: #15171c; color: #fff; font: 700 13px/1.1 var(--font, system-ui), sans-serif; white-space: nowrap; box-shadow: 0 4px 18px rgba(0, 0, 0, .3); }
#presenter-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #ffb21e; box-shadow: 0 0 0 3px rgba(255, 178, 30, .3); }
body.overlay-open #presenter-pill { bottom: calc(var(--safe-bot, 0px) + 12px); }
:root[data-theme="dark"] #presenter-pill { background: #fff; color: #15171c; }
/* (Hearth, 10 Oct) in full width the switch covered the last line over a page's button ("Catch the 385 … at 6:07 pm" above Start,
   "Cross … to reach the stop" in a trip): it steps away while a page is open over the tabs */
html.pv-wide:not(.pv):has(body.overlay-open) #pv-switch { display: none; }