/* The installable app's own styles (pwa.js, tabbar.js): the home page install card, the iPhone how-to and, inside the
   installed app, its tab bar. Loaded only when one of them shows; app.css stays within its budget. Tokens come from
   app.css. */
.pwa-chip{position:fixed;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:34;
  display:flex;align-items:center;gap:10px;max-width:min(460px,calc(100vw - 32px));padding:8px 8px 8px 10px;border-radius:14px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.pwa-chip[hidden]{display:none}
.pwa-chip img{flex:none;border-radius:8px}
.pwa-chip-t{flex:1;min-width:0;font-weight:600;font-size:14px;line-height:1.3}
/* "I have the app" under the title: a 44 px target that overlaps the chip's padding rather than growing it. */
.pwa-have{display:flex;align-items:center;min-height:44px;margin:-10px 0 -12px;font-weight:400;font-size:13px}
.pwa-chip .btn.small{flex:none;height:44px}
.pwa-chip .icon-btn{flex:none;width:44px;height:44px}
/* Above the help button, the product page's buy bar and the toast. */
body:has(#helpBtn:not([hidden])) .pwa-chip{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body.has-buybar .pwa-chip{display:none}
.pwa-steps{margin:0;padding-left:22px;display:grid;gap:10px}
.pwa-steps li{padding-left:4px}
.pwa-dlg .icon-btn{width:44px;height:44px}
#footApp{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px}
#footApp[hidden]{display:none}
#footApp .link{min-height:44px;display:inline-flex;align-items:center}
/* The computer box under a scanner page's form (scan-button.js) and the /app page's get-it box (views/apppage.js).
   The QR codes are black on white in both themes, so any phone camera reads them. */
.scan-phone{display:flex;gap:16px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.scan-phone img,.app-get img{flex:none;border-radius:6px}
.scan-phone h2{font-size:17px;margin:0}
.scan-phone p{margin:4px 0 0;color:var(--muted);font-size:14px;max-width:56ch}
.app-get{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:24px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.app-get p{margin:0;max-width:40ch}
@media (pointer:coarse){.app-qr{display:none}.app-get:not(:has(#appInstall>*)){display:none}}
/* The installed app's tab bar (tabbar.js; html.in-app, never on the website): Home, Search, Scan (raised, in the
   middle), Sell, Account. What sits at the bottom of the screen moves above it: the product page's buy bar, the help
   button, toasts. Hidden while typing, so the keyboard keeps the room. */
.in-app{--tabs:calc(60px + env(safe-area-inset-bottom,0px))}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:36;display:flex;align-items:stretch;height:var(--tabs);
  padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px -14px rgb(0 0 0 / .35)}
.tabs[hidden]{display:none}
.tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 2px;
  border:0;background:none;color:var(--muted);font:inherit;font-size:11px;font-weight:600;line-height:1.1;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.tab>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab-i{display:grid;place-items:center}
.tab[aria-current=page]{color:var(--spruce)}
.tab:focus-visible{outline:2px solid var(--spruce);outline-offset:-4px;border-radius:12px}
.tab-scan{color:var(--ink)}
.tab-scan .tab-i{width:54px;height:54px;margin-top:-30px;border-radius:50%;background:var(--red);color:var(--red-ink);
  box-shadow:0 6px 16px -6px rgb(0 0 0 / .45);border:3px solid var(--surface)}
:root[data-theme="dark"] .tab-scan .tab-i{background:#C8102E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tab-scan .tab-i{background:#C8102E}}
/* The home page's scan bar (home.js): hidden on the website, shown in the app. */
.in-app .app-scan{display:flex;align-items:center;gap:10px;width:100%;margin:14px 0 0;padding:12px 14px;border:0;border-radius:12px;
  background:var(--red);color:var(--red-ink);font:inherit;font-size:15px;font-weight:700;line-height:1.3;text-align:left;cursor:pointer}
.in-app .app-scan::before{content:"";flex:0 0 22px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8V5h3M17 5h3v3M20 16v3h-3M7 19H4v-3'/%3E%3Crect x='8.5' y='7.5' width='7' height='9' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8V5h3M17 5h3v3M20 16v3h-3M7 19H4v-3'/%3E%3Crect x='8.5' y='7.5' width='7' height='9' rx='1'/%3E%3C/svg%3E") center/contain no-repeat}
.in-app .app-scan:focus-visible{outline:2px solid var(--spruce);outline-offset:2px}
.in-app[data-theme="dark"] .app-scan{background:#C8102E}
@media (prefers-color-scheme:dark){.in-app:not([data-theme="light"]) .app-scan{background:#C8102E}}
.in-app footer{padding-bottom:var(--tabs)}
.in-app .buybar{bottom:var(--tabs);padding-bottom:10px}
.in-app .toast,.in-app .snack,.in-app .help-fab{bottom:calc(var(--tabs) + 16px)}
.in-app body.has-buybar .toast,.in-app body.has-buybar .snack,.in-app body.has-buybar .help-fab{bottom:calc(var(--tabs) + 80px)}
.in-app body:has(:is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,[contenteditable=true]):focus) .tabs{display:none}