/* ═══ PHONE SHELL, COLLECTR STYLE (Ian 2026-09-28) ══════════════════════════════════════════
   Ian tried a bottom dock and did not like search at the bottom. This copies Collectr:
     top      a slim see-through search bar frozen at the top: 👁 buyer lock · search · yellow +
     filters  the rail (Sort, Filters, Bin, Select, 4/2) under it, scrolling away with the page
     bottom   no bar. One round button, bottom right. Tap it and the pages rise out of it as a tall
              column up the right edge, over a backdrop that is dark at the edge and clear from the
              middle (02-pdNavFab.js opens and closes it)
     glass    about 50% everywhere, with a light frost: the tile band, bars, buttons and sheets
   Desktop is untouched: every rule is inside the 760px query.

   The pieces are the app's own controls, placed with position:fixed, so every handler, id, tour
   anchor and permission gate keeps working. nav.tabs IS the page bar; its hidden Stats, Expenses
   and Businesses buttons are shown again inside it. Fixed children only reach the screen if no
   ancestor makes a new layer, so the header goes static, main loses its z-index and the view
   fade drops its 4px slide. */
.lg-cartadd{display:none}
@media (max-width:760px){
  body{--pd-safe:env(safe-area-inset-bottom,0px);--pd-top:env(safe-area-inset-top,0px);--pd-bar:56px;
    --pd-glass:rgba(14,17,24,.5);--pd-glass-hi:rgba(255,255,255,.06);--pd-edge:rgba(255,255,255,.1);--pd-blur:blur(6px) saturate(1.3)}
  /* ~50% everywhere (Ian 2026-09-28): half tint, light frost. A heavy blur is what made glass read as solid. */

  /* ---- type (Ian 2026-09-29): one notch smaller everywhere. Form fields stay at 16px, since
     iOS zooms the whole page into any field set smaller. The search hint is smaller than what
     you type, so the bar still reads slim. ---- */
  body{font-size:14px}
  .btn{font-size:13px}
  #hqSidebar .sb-foot button{font-size:13px}
  .modal-head h3{font-size:15px}
  #hqPanel.stg-new #stgHeadTitle{font-size:17px!important}
  body.stg-ios.iu-page #hqPanel .stgnav .nv-name{font-size:14px}
  :is(#view-metrics,#view-expenses,#view-funds) .toolbar .section-title{font-size:14px!important}
  :is(.chart-card,.pos-side)>h4{font-size:13px}
  body.lg-full .pcard.lg-card .lg-price{font-size:13.5px}
  #view-inventory .toolbar .search-wrap input::placeholder{font-size:14px}

  /* ---- layers ---- */
  /* 120px of bottom room: the last row always scrolls clear of the round button (round 3) */
  main{z-index:auto;padding-top:calc(var(--pd-top) + 12px);padding-bottom:calc(var(--pd-safe) + 120px)!important}
  body.pd-v-inventory main{padding-top:calc(var(--pd-top) + var(--pd-bar) + 8px)}
  .view{animation:pdFade .18s ease}
  @keyframes pdFade{from{opacity:0}to{opacity:1}}

  /* ---- the header folds away; its useful children are placed below ---- */
  header{position:static;height:0;min-height:0;padding:0;border:0;background:none;box-shadow:none;overflow:visible;gap:0}
  header::after{display:none}
  body header :is(.brand,#invPill,#cartPill,#activeSaleChip,#btnIanBack,#btnIanMenu,#btnPrepareOfflinePhone){display:none!important}
  body.iu-page :is(#btnManual,header #btnViewer),body.iu-page #view-inventory .toolbar .search-wrap{display:none!important}

  /* ---- top bar (Inventory): no band (Ian 2026-09-29), three controls float on the cards.
     Search holds the left edge; the eye and the yellow + sit together on the right. Each carries
     its own frost, since nothing sits behind them any more. ---- */
  #view-inventory .toolbar .search-wrap{position:fixed!important;z-index:801;left:12px;right:112px;top:calc(var(--pd-top) + 8px);margin:0!important;
    backdrop-filter:var(--pd-blur);-webkit-backdrop-filter:var(--pd-blur);
    min-width:0!important;min-height:40px;height:40px;flex:none!important;padding-top:0!important;padding-bottom:0!important;
    border-radius:20px!important;background:var(--pd-glass)!important;border:1px solid var(--pd-edge)!important;box-shadow:0 4px 16px rgba(0,0,0,.25)!important}
  #view-inventory .toolbar .search-wrap:focus-within{background:rgba(14,17,24,.62)!important;border-color:rgba(47,143,255,.55)!important}
  #view-inventory .toolbar .search-wrap input{font-size:16px!important;background:transparent!important}
  #btnManual{position:fixed!important;z-index:801;right:12px;top:calc(var(--pd-top) + 8px);
    width:40px;height:40px;min-height:40px!important;padding:0!important;border-radius:20px;font-size:0!important;
    background:rgba(255,203,5,.9)!important;border:0!important;color:#111!important;box-shadow:0 4px 14px rgba(255,203,5,.25)}
  #btnManual::after{content:'+';font:800 26px/1 system-ui}
  /* Inside a catalog the + is the way back to your own cards (ui/phone/06-pdAddMenu.js, 2026-10-05).
     The desktop sheet hides it there; the phone has no Exit catalog chip. */
  body.cat-on #btnManual{display:inline-flex!important}
  body.cat-on #btnManual::after{content:'←'}
  header #btnViewer.hdr-viewer{position:fixed!important;z-index:801;right:60px;top:calc(var(--pd-top) + 8px);
    width:40px;height:40px;min-height:40px;margin:0!important;padding:0!important;border-radius:20px;font-size:0!important;
    background:var(--pd-glass);backdrop-filter:var(--pd-blur);-webkit-backdrop-filter:var(--pd-blur);border:1px solid var(--pd-edge);-webkit-touch-callout:none;user-select:none}
  header #btnViewer.hdr-viewer::after{content:'👁';font-size:18px}
  :is(#btnManual,header #btnViewer)::before{content:'';position:absolute;inset:-2px}   /* 44pt reach on a 40px circle */

  /* ---- buyer view: the eye becomes a yellow Exit viewer button, the page buttons go away ---- */
  /* Buyer view (Ian 2026-09-29): the eye becomes a labelled Exit viewer pill, the only way out, and a
     plain tap on it ends Buyer view. A customer can reach nothing else: tiles open nothing, the page
     button and the filters are gone, and the / filter menu (business and label names) stays shut. */
  body.viewer-on header #btnViewer.hdr-viewer{right:12px;width:auto;padding:0 14px!important;background:var(--accent);border-color:var(--accent);color:#111}
  body.viewer-on header #btnViewer.hdr-viewer::after{content:'🔒 Exit viewer';font:800 13px 'Segoe UI',system-ui,sans-serif;white-space:nowrap}
  body.viewer-on #view-inventory .toolbar .search-wrap{right:150px}
  body.viewer-on #invChipMenu,body.viewer-on #invChips{display:none!important}

  /* ---- inventory head and the frozen filter rail ---- */
  #view-inventory .toolbar{margin-bottom:2px;flex-wrap:nowrap;align-items:center;min-height:40px}
  #view-inventory .toolbar #invStockLine{display:block!important;margin-left:auto;font:600 12px var(--font-mono-ish);letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);white-space:nowrap}
  /* Buyer view shows prices only: how many cards you hold is the shop's business (break test 2026-10-05) */
  body.viewer-on #view-inventory .toolbar #invStockLine{display:none!important}
  #_invTitle{display:none!important}
  #invFilterRow{display:none!important}
  /* The filter row scrolls away with the page (Ian 2026-09-28); only the search bar stays. */
  #_sortBar{position:static;margin:0 0 8px;padding:6px 0!important;flex-wrap:nowrap!important;gap:4px!important;border-bottom:0!important;overflow:visible;background:none}
  /* A re-render behind an open catalog (live sync, a saved edit) used to bring the rail back over it (2026-10-05) */
  body.cat-on #_sortBar{display:none!important}
  /* Buttons keep their text width; only the sort dropdown gives way. In the iPhone's font the rail ran
     13px over and squeezed Filters and Bin below their labels, off centre (Ian 2026-09-30). */
  #_sortBar>*{flex:0 0 auto;min-width:0}
  #_sortBar select,#_sortBar .btn,#_sortBar #invColsToggle{height:40px;min-height:40px!important;border-radius:20px;font-size:12px!important;
    font-weight:700;padding:0 9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #_sortBar #_sortSel{flex:0 1 88px;width:88px;min-width:70px}
  #_sortBar select{font-size:16px!important}   /* under 16px the iPhone zooms the page on focus */
  #_sortBar>div[style*="width: 1px"],#_sortBar>div[style*="width:1px"]{display:none}
  #_sortBar #_invControls{margin-left:auto!important;flex:none;flex-basis:auto!important;width:auto}
  #_sortBar #_invControls #invColsToggle{padding:0!important;display:flex}
  #_sortBar #_invControls #invColsToggle button{min-width:38px;padding:0 6px}
  #_sortBar #btnBins.primary{background:var(--accent)!important;border-color:var(--accent)!important;color:#111!important}
  #_sortBar:has(#_selModeBtn.primary) :is(#_invFilterBtn,#btnBins){display:none}

  /* ---- see-through buttons, like Collectr ---- */
  main :is(.btn,select,.seg):not(.primary):not(.green):not(.danger):not(#btnManual){background:var(--pd-glass-hi)!important;
    border-color:var(--pd-edge)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  main .seg button.active{background:rgba(255,255,255,.14)!important;border-color:transparent!important}

  /* ---- the page bar: nav.tabs, grown out of the round button (02-pdNavFab.js) ---- */
  #pdNavBtn{display:grid;place-items:center;position:fixed;z-index:911;right:14px;bottom:calc(var(--pd-safe) + 14px);width:56px;height:56px;
    border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(28,32,44,.5);color:var(--txt);font-size:22px;
    backdrop-filter:var(--pd-blur);-webkit-backdrop-filter:var(--pd-blur);box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .15s}
  #pdNavBtn::after{content:'☰'}
  body.pd-nav-open #pdNavBtn::after{content:'✕';font-size:19px}
  #pdNavBtn:active{transform:scale(.94)}
  nav.tabs{position:fixed;z-index:910;display:flex!important;gap:2px;padding:4px;margin:0;border-radius:28px;
    background:rgba(24,28,39,.5);backdrop-filter:var(--pd-blur);-webkit-backdrop-filter:var(--pd-blur);
    border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.45);overflow:auto;scrollbar-width:none;
    opacity:0;pointer-events:none;transition:opacity .18s ease,transform .2s ease}
  nav.tabs::-webkit-scrollbar{display:none}
  body.ianui nav.tabs{width:72px;order:0}   /* app.css stretches the phone tab bar to 100% at this weight */
  body.pd-nav-open nav.tabs{opacity:1;pointer-events:auto;transform:none!important}
  /* Up only, on every page (Ian 2026-09-28): a tall column above the button that scrolls when
     the pages outgrow the screen. */
  nav.tabs{left:auto;right:10px;width:72px;height:auto;max-height:calc(100dvh - var(--pd-top) - var(--pd-safe) - 100px);
    bottom:calc(var(--pd-safe) + 80px);flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border-radius:36px;
    overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transform:translateY(24px) scale(.97)}
  nav.tabs button{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    width:64px;height:64px;min-height:64px;padding:0!important;border:0!important;border-radius:22px!important;background:none!important;
    color:rgba(255,255,255,.72);font-size:10.5px!important;font-weight:700;letter-spacing:.01em;white-space:nowrap;gap:4px}
  nav.tabs button::before{font-size:24px;line-height:1}
  nav.tabs button.active{background:rgba(255,255,255,.14)!important;color:var(--txt)}
  nav.tabs button[data-tab="inventory"]::before{content:'🃏'}
  nav.tabs button[data-tab="pos"]::before{content:'🛒'}
  nav.tabs button[data-tab="metrics"]::before{content:'📊'}
  nav.tabs button[data-tab="expenses"]::before{content:'🧾'}
  nav.tabs button[data-tab="funds"]::before{content:'💼'}
  nav.tabs button[data-tab="admin"]{font-size:0!important}
  nav.tabs button[data-tab="admin"]::after{content:'HQ';font-size:10.5px}
  nav.tabs button[data-tab="admin"]::before{content:'🐱'}
  nav.tabs #pdGoSettings::before{content:'⚙️'}
  nav.tabs #pdGoShop::before{content:'🏪'}
  nav.tabs #pdGoOffline::before{content:'📴'}
  body:not(.offline-prep-needed) nav.tabs #pdGoOffline{display:none!important}
  /* app.css hides the three secondary tabs on the phone; the page bar shows them again.
     .hidden (HQ for everyone but the owner) and the viewer and feature gates still win. */
  body.ianui nav.tabs button[data-tab]:not(.hidden){display:flex}
  body.feat-businesses-off nav.tabs button[data-tab="funds"]{display:none!important}
  body.tabs-hid nav.tabs{transform:none}
  /* Behind the open bar (Ian 2026-09-28): dark at the right edge, clearing to nothing by the middle.
     02-pdNavFab.js: a tap on the clear half closes the bar, a tap on the dark side does nothing. */
  #pdNavScrim{position:fixed;inset:0;z-index:909;opacity:0;pointer-events:none;touch-action:none;transition:opacity .22s ease;
    background:linear-gradient(to left,rgba(4,6,10,.94) 0%,rgba(4,6,10,.94) 20%,rgba(4,6,10,0) 50%)}
  body.pd-nav-open #pdNavScrim{opacity:1;pointer-events:auto}
  body.viewer-on :is(nav.tabs,#pdNavBtn,#pdNavScrim){display:none!important}
  body:has(#hqSidebar.open) #pdNavBtn,body.ta-open #pdNavBtn{display:none}
  /* The cart's docked card search puts its Add buttons where the round button floats (2026-10-05) */
  body.pd-v-pos:has(.pd-pick-host #modalRoot .overlay) #pdNavBtn{display:none}
  body:has(#menuRoot .context-menu) #pdNavBtn{display:none}   /* a bottom sheet owns that corner while it is up */
  html[data-theme="light"] :is(nav.tabs,#pdNavBtn),html[data-theme="sakura"] :is(nav.tabs,#pdNavBtn){background:rgba(255,255,255,.85)}

  /* ---- sync: a dot on the round button while all is well, a pill that says why when it is not ---- */
  #syncPill{position:fixed;z-index:912;right:8px;bottom:calc(var(--pd-safe) + 58px);height:22px!important;min-width:0!important;min-height:0!important;
    padding:0 9px!important;border-radius:11px;display:flex!important;align-items:center;gap:6px;font:700 10.5px var(--font-mono-ish);letter-spacing:.04em;
    background:rgba(40,28,12,.85)!important;border:1px solid rgba(255,159,67,.35)!important;backdrop-filter:blur(10px)}
  #syncPill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
  #syncPill[style*="muted"]{width:14px;height:14px!important;padding:0!important;font-size:0;border-radius:50%;
    background:rgba(18,21,29,.9)!important;border:2px solid rgba(18,21,29,.9)!important;justify-content:center}
  #syncPill[style*="muted"]::before{width:10px;height:10px;background:var(--green)}
  #syncPill::after{content:'';position:absolute;inset:-12px}
  body.viewer-on #syncPill,body:has(#hqSidebar.open) #syncPill{display:none!important}

  /* ---- messages: one at a time (03-kfCheck.js), in the empty bottom-left corner beside the
     round button, half the screen wide, small type (Ian 2026-09-30). While a sheet is open they
     sit at the top, in the strip above it, so they never cover its buttons or its own error
     line; over the select bar they rise above it. ---- */
  #notifyRoot{top:auto!important;bottom:calc(var(--pd-safe) + 22px)!important;left:12px!important;right:auto!important;width:50vw!important}
  body:has(#_selFooter:not([style*="none"])) #notifyRoot{bottom:calc(var(--pd-safe) + 76px)!important}
  body:has(> #modalRoot > .overlay, > #pickerHold > .overlay) #notifyRoot{top:calc(var(--pd-top) + 10px)!important;bottom:auto!important}
  body:has(> #modalRoot > .overlay, > #pickerHold > .overlay) .ntc{top:0!important;bottom:auto!important}
  .ntc{top:auto!important;bottom:0!important;background:rgba(24,28,39,.6)!important;backdrop-filter:var(--pd-blur);-webkit-backdrop-filter:var(--pd-blur);
    border-radius:14px!important;border-left-width:3px!important;padding:8px 10px 10px 11px!important;font-size:12px!important;line-height:1.3!important}
  .toast{bottom:calc(var(--pd-safe) + 84px)!important}

  /* ---- glass tile: the card is the tile, the numbers float on a thin frosted band ---- */
  .grid .pcard.lg-card{box-shadow:0 8px 22px rgba(0,0,0,.35)!important;border:0!important;border-radius:16px!important}
  /* 50% (Ian 2026-09-28): the card under the band shows at half strength. A flat half tint and
     only a 2px frost; a heavier blur is what turned the art to mush, not the tint. */
  .grid.cols2 .pcard.lg-card .lg-cap{background:rgba(10,12,18,.5)!important;
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-top:1px solid rgba(255,255,255,.12)!important}
  .grid.cols4 .pcard.lg-card .lg-cap{background:rgba(10,12,18,.5)!important;backdrop-filter:none!important;border-top:0!important}
  .grid .pcard.lg-card .lg-price,.grid .pcard.lg-card .lg-nm,.grid .pcard.lg-card .lg-set{text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9)}
  .grid .pcard.lg-card .lg-cap .lg-stats{border-top:0!important;gap:10px!important;margin-top:4px!important}
  .grid .pcard.lg-card .lg-cap .lg-stats .lg-stat{background:none!important;border:0!important;padding:0!important;flex:none!important;
    font-size:9px!important;color:rgba(255,255,255,.62)!important;text-shadow:0 1px 2px rgba(0,0,0,.8)}
  .grid .pcard.lg-card .lg-cap .lg-stats .lg-stat b{color:#fff!important;font-size:10.5px!important}
  .grid .pcard.lg-card .lg-cap .lg-stats .lg-stat.up b{color:var(--green)!important}
  .grid .pcard.lg-card .lg-cap .lg-stats .lg-stat.down b{color:var(--red)!important}
  .grid.cols2 .lg-priceline{justify-content:space-between}
  body.viewer-on .grid.cols2 .pcard .price{display:flex;align-items:center;justify-content:space-between;gap:6px}
  body.viewer-on .grid.cols2 .pcard .price .lg-cartadd{margin:0}
  .grid.cols2 .lg-cartadd{display:grid;place-items:center;flex:none;width:40px;height:32px;margin:-4px -4px -4px 0;border-radius:16px;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:14px;color:#fff}
  .pcard.lg-card .lg-dots{width:34px;height:34px;top:5px;right:5px;border-radius:17px;background:rgba(10,12,18,.35)!important;
    backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12)}
  .pcard.lg-card .lg-dots::before{content:'';position:absolute;inset:-5px}

  /* ---- sheets: every ⋮ menu and every form comes up from the bottom, frosted ---- */
  #menuRoot:has(.context-menu)::before{content:'';position:fixed;inset:0;z-index:949;background:rgba(0,0,0,.45)}
  .context-menu{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;z-index:950!important;
    min-width:0!important;max-height:80vh!important;overflow:auto;border-radius:22px 22px 0 0!important;padding:14px 10px calc(10px + var(--pd-safe))!important;
    background:rgba(14,17,24,.5)!important;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid var(--pd-edge)!important;border-bottom:0!important;box-shadow:0 -12px 40px rgba(0,0,0,.5)!important;animation:pdUp .2s ease}
  /* The light themes keep the text dark, so the sheet behind it has to be light too (2026-10-05) */
  html[data-theme="light"] .context-menu,html[data-theme="sakura"] .context-menu{background:rgba(255,255,255,.82)!important}
  .context-menu::before{content:'';display:block;width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);margin:-4px auto 8px}
  .context-menu button{min-height:50px;font-size:15px!important;font-weight:700;padding:0 12px!important}
  .context-menu.lot-dd{z-index:970!important}
  .overlay{place-items:end stretch!important;padding:0!important;background:rgba(0,0,0,.4)!important}
  /* Sheets size in svh, which the iPhone does not change while Safari's toolbar slides in and out
     (dvh did, so an open sheet resized under the thumb), and the page behind cannot scroll. */
  body:has(> #modalRoot > .overlay),html:has(body > #modalRoot > .overlay){overflow:hidden}
  .overlay,.overlay .modal{overscroll-behavior:contain}
  .overlay .modal{max-width:100%!important;width:100%!important;max-height:92svh!important;border-radius:22px 22px 0 0!important;
    padding-bottom:var(--pd-safe);animation:pdUp .22s ease;background:rgba(14,17,24,.5)!important;background-image:none!important;
    backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--pd-edge)!important;border-bottom:0!important}
  .overlay .modal .modal-head,.overlay .modal .modal-foot{background:transparent!important}
  /* A sheet that fills the screen is solid (Ian 2026-09-30, ui/phone/05 marks it) */
  .overlay .modal.pd-full{background:var(--panel)!important;backdrop-filter:none;-webkit-backdrop-filter:none}
  .overlay .modal .modal-foot{padding-bottom:calc(14px + var(--pd-safe))}
  .overlay .modal .modal-foot .btn{min-height:46px}
  @keyframes pdUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
  @media (prefers-reduced-motion:reduce){.context-menu,.overlay .modal,nav.tabs{animation:none;transition:none}}
}