/* launch-shell.css: Go mode launch styles (2026-10-09), loaded after styles.css. The app's shell on a phone (a tab bar
   at the bottom, the bell in the top bar) and its motion (a tab's content coming in, presses). goapp.js draws the bar
   (#ga-bar) and rolls the figures that change (PriorsGoApp.roll); account-notify.js moves the bell. Every movement
   here is only for a reader who has not asked for less (prefers-reduced-motion: no-preference). */

/* ---- a phone (640 px or less): the tabs used most in a bar at the bottom, More for the rest (the sidebar). It takes
   the menu button's place; the bell moves up into the top bar, so nothing floats over the page ---- */
.ga-bar, .gn-slot { display: none; }
@media (max-width: 640px) {
  body.goapp { --ga-bar-h: 62px; }
  body.goapp .ga-menu-btn { display: none; }
  body.goapp .ga-top { padding: 0 12px 0 16px; }
  .ga-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 29; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: var(--ga-bar-h); padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); box-sizing: content-box; background: color-mix(in srgb, var(--paper) 95%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-top: 1px solid var(--card-edge); }
  .ga-bt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; margin: 0; padding: 0 2px; border: 0; border-radius: 0; background: none; color: var(--muted); font: 500 11px/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .ga-bt-i { position: relative; display: grid; place-items: center; width: 54px; height: 30px; border-radius: 0; }
  .ga-bt-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the tab open: its icon green under the sidebar's 2 px green rule, laid along the bar's top edge (no tint, no pill);
     More, for a tab behind it */
  .ga-bt.on, .ga-more[aria-expanded="true"] { color: var(--ink); font-weight: 600; }
  .ga-bt.on .ga-bt-i, .ga-more[aria-expanded="true"] .ga-bt-i { background: none; color: var(--green); box-shadow: none; }
  .ga-bt.on::before, .ga-more[aria-expanded="true"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 2px; margin-left: -14px; background: var(--green); }
  .ga-bt:focus-visible { outline: none; }
  .ga-bt:focus-visible .ga-bt-i { outline: 2px solid var(--green); outline-offset: 2px; }
  /* a tab's count on its icon's corner (the sidebar's, goapp.js badges); More's dot for the tabs behind it */
  .ga-bt-i > .ga-badge { position: absolute; top: 1px; left: calc(50% + 9px); gap: 3px; font-size: 10.5px; padding: 0 2px; background: var(--paper); }
  .ga-more.ga-dot .ga-bt-i::after { content: ""; position: absolute; top: 3px; left: calc(50% + 10px); width: 6px; height: 6px; border-radius: 0; background: var(--green); box-shadow: 0 0 0 2px var(--paper); }
  .ga-more.ga-dot.r .ga-bt-i::after { background: var(--red); }
  /* the page's foot clears the bar, and the notes in the corner sit above it. The bar always shows at this width, so
     neither needs :has (older iOS Safari has none); the :has copies outrank styles.css's own :has rules for the bell */
  html body.goapp > main { padding-bottom: calc(var(--ga-bar-h) + env(safe-area-inset-bottom) + 32px); }
  html body.goapp .ga-toasts { bottom: calc(var(--ga-bar-h) + env(safe-area-inset-bottom) + 10px); }
  html body.goapp:has(> .ga-bar:not([hidden])) > main { padding-bottom: calc(var(--ga-bar-h) + env(safe-area-inset-bottom) + 32px); }
  html body.goapp:has(> .ga-bar:not([hidden])) .ga-toasts { bottom: calc(var(--ga-bar-h) + env(safe-area-inset-bottom) + 10px); }

  /* the bell in the top bar, before the account's button (account-notify.js .gn-top); its panel drops from the bar */
  .ga-top .gn-slot { display: block; flex: none; width: 40px; height: 40px; } /* the bell's room before it comes (account-notify.js) */
  .gn.gn-top { position: static; flex-direction: row; align-items: center; gap: 0; pointer-events: auto; }
  body.ga-drawer .gn.gn-top:not([hidden]) { display: flex; } /* under the sidebar's shade, as the rest of the bar */
  .gn.gn-top .gn-bell { width: 40px; height: 40px; border-radius: 0; box-shadow: none; }
  .gn.gn-top .gn-bell .px-ico { width: 20px; height: 20px; }
  .gn.gn-top .gn-n { top: -4px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; }
  .gn.gn-top .gn-panel { position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; width: auto; max-height: calc(100vh - var(--ga-top) - var(--ga-bar-h) - 28px); max-height: calc(100dvh - var(--ga-top) - var(--ga-bar-h) - env(safe-area-inset-bottom) - 28px); transform-origin: 100% 0; }
  /* the top bar's right side: the USDG chip, the bell and the account's button, each 40 px tall; the account's a
     round button like the bell's (its name shows in its menu) */
  .ga-top .ga-right { gap: 10px; }
  body.goapp .ga-me-btn { padding: 4px; gap: 0; }
  body.goapp .ga-cash { min-height: 40px; box-sizing: border-box; align-items: center; }
}

/* ---- a touch screen (a phone or a tablet, pointer: coarse), on the Go pages: every control a finger can hit, at least
   44 px each way (a control that must stay small gets the room around it instead, as .hint-btn already has), fields at
   16 px so a phone does not zoom in on them, and the tab bar's names at 12 px. A mouse and a trackpad see no change ---- */
@media (pointer: coarse) {
  html[data-go-page] :is(.btn, .ag-chip, .add-way, .hm-q, select, .ag-switch button, .se-view button, .gd-term, .acct .tl-start a, .gd-toc a) { min-height: 44px; }
  html[data-go-page] :is(.ag-chip, .gd-term) { min-width: 44px; }
  html[data-go-page] .gd-toc a { display: flex; align-items: center; }
  /* fields under 16 px (the agents' sort, the Tools payer…) make a phone zoom in on them; the larger ones (a 2FA code,
     an amount) keep their size. The Desk's own are with the Desk's styles in styles.css, which ship only with it */
  html[data-go-page] :is(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):not(.tf-code):not(.lc-amt input) { font-size: 16px !important; }
  html[data-go-page] :is(.ga-me-btn, .ga-menu-btn, .ga-cash) { min-width: 44px; min-height: 44px; }
  html[data-go-page] body.goapp .ga-menu-btn { justify-content: center; align-items: center; }
  html[data-go-page] .gn.gn-top .gn-bell { width: 44px; height: 44px; }
  html[data-go-page] .ga-top .gn-slot { width: 44px; height: 44px; }
  /* text-sized buttons keep their look; the area a finger can hit grows around them */
  html[data-go-page] :is(.ac-link, .ac-fig-btn, .hm-card > header a.k, .ac-figs a.k, .tl-how > summary, .tl-code > summary, .nav .prefs-btn) { position: relative; }
  html[data-go-page] :is(.ac-link, .ac-fig-btn, .hm-card > header a.k, .ac-figs a.k, .nav .prefs-btn)::before { content: ""; position: absolute; inset: -12px -6px; }
  html[data-go-page] :is(.tl-how > summary, .tl-code > summary)::after { content: ""; position: absolute; inset: -12px -6px; }
  html[data-go-page] .nav .prefs-btn::before { inset: -7px; } /* 30 px on a phone: 44 around it */
  /* the sign-in screen's links, and the public header the start and Stocks pages show signed out */
  html[data-go-page] #ac-in.gt .ac-gate-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  html[data-go-page] #ac-in.gt .ac-gate-links .gt-x { min-width: 44px; }
  html[data-go-page] .nav :is(.brand, .links > a, .right .btn.sm) { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-go-page] .sk-check input[type="checkbox"] { width: 20px; height: 20px; }
  /* the segmented choices (the Launchpad's term), the Launchpad's agent chips, the account menu's rows and switches, and
     the closes (×) of the bell, a notice, the agent panel and the Buy sheet: 44 px each way */
  html[data-go-page] :is(.lc-seg button, .lc-chip, .ga-me-menu :is(button, a):not(.addr-tog)) { min-height: 44px; }
  html[data-go-page] :is(.gn-x, .gn-close, .ga-notice-x, .ap-x) { min-width: 44px; min-height: 44px; }
  /* the small "details" summaries (the start page's own-wallet and AI key links, the Tools' details for developers;
     Back agents' and agent001's are with their own styles): a real 44 px box, the text in its middle and the marker
     kept, so no tap area reaches past it into the next control. The FAQs' summaries are taller already; the Tools' How
     it works and code summaries have their own tap area */
  html[data-go-page] :is(.st-own, .st-key-ai, .tl-dev) > summary { box-sizing: border-box; min-height: 44px; padding-block: 12px; }
}
/* a touch phone: the sign-in screen's links, now 44 px targets each, sit closer, so the mark and its Go mode tag keep
   their one line */
@media (pointer: coarse) and (max-width: 640px) { html[data-go-page] #ac-in.gt .gt-top { gap: 8px; } html[data-go-page] #ac-in.gt .ac-gate-links { gap: 10px; } }
/* a touch phone's link strip in the public header (start, Stocks signed out): the menus' links it shows inline are as
   tall as the others, all on one line */
@media (pointer: coarse) and (max-width: 560px) { html[data-go-page] .nav .links { align-items: center; } html[data-go-page] .nav .links .dd-menu a { padding-block: 13px; } }
/* a phone: no word smaller than 12 px (the tab bar's names, the figures' labels) */
@media (max-width: 640px) {
  .ga-bt { font-size: 12px; }
  body.goapp :is(.hm-dl dt, .ga-stat dt, .hm-card > header .sub) { font-size: 12px; }
}

/* ---- motion: a tab's content comes in with a short rise; a press gives a little under the finger ---- */
@keyframes ga-tab-in { from { opacity: 0; translate: 0 6px; } }
@media (prefers-reduced-motion: no-preference) {
  /* the account page's tab (account-page.js marks its sections .ga-on): each time one shows */
  body.goapp #main.account > .ga-on { animation: ga-tab-in .24s var(--ease) backwards; }
  body.goapp .btn { transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, scale .16s var(--ease); }
  body.goapp .btn:not(:disabled):active { scale: .97; }
  .ga-tab, .ga-me-btn, .ga-menu-btn, .gn-bell, .ga-door, .ga-bt-i { transition: scale .16s var(--ease), background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
  .ga-tab:active, .ga-door:active { scale: .98; }
  .ga-me-btn:active, .ga-menu-btn:active, .gn-bell:active { scale: .94; }
  .ga-bt:active .ga-bt-i { scale: .9; }
}