/* Granular staff visibility (perms node present) — mirrors the legacy role-staff rules. */
body.pm-seeMetrics-off nav.tabs button[data-tab="metrics"],
body.pm-seeExpenses-off nav.tabs button[data-tab="expenses"],
body.pm-seeSplits-off nav.tabs button[data-tab="funds"],
body.pm-seeSplits-off .tile-own, body.pm-seeSplits-off #invFundFilter,
body.pm-seeCosts-off .s-cost, body.pm-seeCosts-off .tile-cost,
body.pm-seeHistory-off #soldHistory, body.pm-seeHistory-off .section-title:has(#histModeSel),
body.pm-seeCustomers-off #metricViewSeg button[data-view="people"],
/* Per-add-on access (2026-08-26). Same shape as the seeCustomers rule above — each of these
   add-ons is exactly one view button, which is why they are the four that got their own
   switch. The other three add-ons have no single anchor and deliberately have no switch. */
body.pm-addon_moneyDash-off   #metricViewSeg button[data-view="money"],
body.pm-addon_aging-off       #metricViewSeg button[data-view="aging"],
body.pm-addon_priceChanges-off #metricViewSeg button[data-view="prices"],
body.pm-addon_taxForms-off    #metricViewSeg button[data-view="taxform"]{display:none!important}
/* Action-surface hiding, same screen-level honesty. Add-ons are shop-wide, so the whole
   🧩 Add-on features settings section goes — Interface/theme stays, it is personal. */
body.pm-invAdd-off #btnManual, body.pm-invBulk-off #_selModeBtn,
body.pm-dataShare-off #shareBox,
body.pm-setAddons-off #hqPanel [data-stgtab="advanced"]{display:none!important}
/* invFunds (Ian 2026-08-28): the CSS half hides the chips, need('invFunds') at the save is
   the half that actually refuses. CODE-MAP records why both are mandatory: a PERM_DEFS row
   on its own ships a switch that saves and enforces nothing. */
body.pm-invFunds-off #fundChips,body.pm-invFunds-off #qaFunds{display:none!important}
/* ---- Team tab cards (2026-08-23 redesign) ---- */
/* ═══ TEAM PANE 2b + SETTINGS CHROME (Ian 2026-08-23, design handoff "team-settings-2b") ═══
   Everything is theme-vars so Light theme stays readable — no hardcoded dark hexes except
   the fixed dark ends of the avatar gradients. */
.tm-wrap{display:flex;gap:26px;align-items:flex-start}
.tm-main{flex:1;min-width:0}
.tm-title{font-size:21px;font-weight:800}
.tm-desc{font-size:13px;color:var(--muted);margin:4px 0 14px}
.tm-list{display:flex;flex-direction:column}
.tm-row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line2)}
.tm-row.tm-click{cursor:pointer;transition:background .15s;border-radius:8px}
.tm-row.tm-click:hover{background:var(--panel2)}
.tm-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--purple),#4f3a8f)}
.tm-avatar.own{background:linear-gradient(135deg,var(--accent2),#1c4f8f)}
.tm-mid{flex:1;min-width:0}
.tm-name{font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-you{color:var(--muted);font-weight:600}
.tm-sub{font-size:12.5px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-access{color:var(--accent2);font-weight:600}
.tm-ownmeta{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--accent)}
.tm-go{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--muted)}
.tm-click:hover .tm-go{color:var(--accent2)}
.tm-rolesel{flex:0 0 auto;width:auto;padding:4px 6px;font-size:12px;background:var(--panel);border:1px solid var(--line2);color:var(--txt);border-radius:8px}
.tm-slot{display:flex;align-items:center;gap:14px;padding:14px 4px;opacity:.5}
.tm-slotav{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1.5px dashed var(--line2);display:grid;place-items:center;color:var(--muted);font-size:18px}
.tm-slottxt{font-size:13px;color:var(--muted);font-style:italic}
.tm-switch{display:flex;gap:8px;align-items:center;margin-top:18px}
.tm-invite{flex:0 0 300px;background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;gap:16px}
.tm-ivtitle{font-size:15.5px;font-weight:800}
.tm-ivsub{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:3px}
.tm-field{display:flex;flex-direction:column;gap:6px}
.tm-flab{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tm-invite input{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line2);color:var(--txt);border-radius:8px;padding:11px 14px;font-size:14px}
.tm-invite input:focus{border-color:var(--accent2);outline:none}
.tm-invite input::placeholder{color:var(--muted)}
.tm-frow{display:flex;justify-content:space-between;align-items:baseline}
.tm-genlink{background:none;border:none;padding:0;font-size:12px;font-weight:700;color:var(--accent2);cursor:pointer;font-family:inherit}
.tm-seg{display:flex;background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:4px;gap:4px}
.tm-segbtn{flex:1;text-align:center;padding:8px 0;border-radius:6px;border:none;background:none;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.tm-segbtn.active{background:var(--panel2);color:var(--accent2);font-weight:800}
@supports (background:color-mix(in srgb,red 50%,blue)){
  .tm-segbtn.active{background:color-mix(in srgb,var(--accent2) 16%,var(--panel))}
}
.tm-fhelp{font-size:11.5px;color:var(--muted);line-height:1.5}
/* Design 2b calls for a blue Add button, not the app's red primary — the doubled class
   outranks .btn.primary. */
.btn.primary.tm-addbtn{width:100%;padding:12px 0;border-radius:10px;font-weight:800;font-size:14px;background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none}
.btn.primary.tm-addbtn:hover{filter:brightness(1.12)}
@media(max-width:900px){.tm-wrap{flex-direction:column}.tm-invite{flex:1 1 auto;width:100%;box-sizing:border-box}}
/* ── Settings chrome (redesigned panel only): breadcrumb, green-dot Saved, blue active bar ── */
#hqPanel.stg-new #stgHeadTitle{font-size:19px;font-weight:800}
#hqPanel.stg-new .stg-crumb{font-size:14px;font-weight:700;color:var(--muted);display:flex;align-items:baseline;gap:10px}
#hqPanel.stg-new .stg-crumb:not(:empty)::before{content:'/';opacity:.5;font-size:13px}
body.stg-drill #hqPanel .stg-crumb{display:none}
#hqPanel.stg-new .stg-saved{display:flex;align-items:center;gap:7px;border:none;border-radius:0;padding:0;font-size:12px;font-weight:700}
#hqPanel.stg-new .stg-saved::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}
#hqPanel.stg-new #pnlX{width:34px;height:34px;border-radius:8px;background:var(--panel2);display:grid;place-items:center}
/* align-items must re-win against `#hqPanel .panel-nav button` (higher-specificity center) */
#hqPanel.stg-new .stgnav{border-radius:8px;align-items:stretch}
#hqPanel.stg-new .stgnav .nv-name::before{content:'';width:3px;height:16px;border-radius:2px;background:var(--accent2);opacity:0;flex:0 0 auto;transition:opacity .15s}
#hqPanel.stg-new .stgnav.active{border-color:transparent;background:var(--panel2)}
#hqPanel.stg-new .stgnav.active .nv-name{color:var(--txt)}
#hqPanel.stg-new .stgnav.active .nv-name::before{opacity:1}
#hqPanel.stg-new .stgnav .nv-status{padding-left:12px}
/* ═══ Ledger Glass card blocks (design "Card Block - Ledger Glass", Ian 2026-08-23) ═══
   Glass rides ON the photo, so its darks are hardcoded like .ct-cap's — readable in every
   theme. .lg-dot/.lg-cap fund + strip markup exists only on the Inventory tile; cart and
   picker tiles get the CSS-only reskin below via body.lgx. */
.pcard.lg-card{position:relative;padding:0;overflow:hidden;border-radius:14px;background:#10141e;border:none;box-shadow:0 0 0 1px rgba(59,130,246,.35),0 6px 18px rgba(0,0,0,.45)}
.pcard.lg-card .lg-ph{position:relative;margin:0;border-radius:0}
.pcard.lg-card .lg-ph::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(16,20,30,.45) 0,transparent 18%,transparent 55%,rgba(10,13,19,.9) 100%)}
.lg-dot{position:absolute;top:10px;left:10px;z-index:3;width:18px;height:18px;border-radius:50%;border:2px solid #0e1220}
.lg-dots{position:absolute;top:8px;right:8px;z-index:3;width:26px;height:26px;border:none;border-radius:8px;background:rgba(10,13,19,.6);backdrop-filter:blur(6px);color:#dfe5ef;font-size:14px;line-height:1;cursor:pointer}
.lg-dots:hover{background:rgba(59,130,246,.9)}
.lg-cap{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;border-radius:10px;background:rgba(16,20,30,.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);padding:9px 11px 8px}
.lg-priceline{display:flex;align-items:baseline;gap:8px;min-width:0}
.lg-price{font-size:19px;font-weight:800;color:#f5b83d;white-space:nowrap}
.lg-delta{font:700 10.5px ui-monospace,Menlo,monospace;white-space:nowrap}
.lg-nm{font-size:13px;font-weight:600;color:#eef2f8;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-num{color:#aab2c5;font-weight:600}
.lg-nm .nm-paren{color:#aab2c5;font-weight:400;font-size:11px}
.lg-stats{display:flex;margin-top:7px;border-top:1px solid rgba(255,255,255,.1);padding-top:6px}
.lg-stat{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.lg-stat+.lg-stat{border-left:1px solid rgba(255,255,255,.1);padding-left:9px}
.lg-stat span{font:600 8px ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#6b7488}
.lg-stat b{font:600 11px ui-monospace,Menlo,monospace;color:#c8cfdc;white-space:nowrap}
/* staff: COST/MARGIN cells hide via .tile-cost; AGE then loses its divider so nothing dangles */
body.role-staff .lg-stat:not(.tile-cost),body.pm-seeCosts-off .lg-stat:not(.tile-cost){border-left:none;padding-left:0}
/* cart + picker photo tiles: glass reskin only — no cost data ever renders in these */
body.lgx .cart-tile,body.lgx .pick-tile{border-radius:14px;border-color:transparent;box-shadow:0 0 0 1px rgba(59,130,246,.28),0 4px 14px rgba(0,0,0,.35)}
body.lgx .cart-tile .ct-cap{left:6px;right:6px;bottom:6px;border-radius:10px;background:rgba(16,20,30,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);padding:8px 9px 7px}
/* Full-photo variant (Ian 2026-09-04, body.lg-full via lgFullOn, his account only for now): the
   photo IS the block in every grid, not just the 4-wide one, and the ledger is an opaque panel
   in the app's own surface grey with no blur. The bottom scrim goes with it; only a faint top
   scrim stays so the options button reads. Text colours and weights are the ones above. */
body.lg-full .pcard.lg-card .lg-ph{aspect-ratio:63/88;height:auto;background:#10141e}
body.lg-full .pcard.lg-card .lg-ph img{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0;filter:none}
body.lg-full .pcard.lg-card .lg-ph img.fit-contain{object-fit:contain}
body.lg-full .pcard.lg-card .lg-ph::after{background:linear-gradient(180deg,rgba(16,20,30,.45) 0,transparent 24%)}
/* 2026-09-04 second pass (Ian): half transparent, and flush to the card's edges and bottom, so
   the photo shows through and the panel reads as the card's own footer. Only the top edge keeps
   a border; the card's own overflow rounds the bottom corners. */
body.lg-full .lg-cap{background:rgba(36,42,54,.6);backdrop-filter:none;left:0;right:0;bottom:0;border-radius:0;border:0;border-top:1px solid #334155}
/* Third pass (Ian): the tiny COST/MARGIN/AGE labels and values through a half-transparent panel
   over a bright card. A lighter palette grey for the labels and a faint dark text shadow on the
   strip, which shows on a yellow card and vanishes on a dark one. Nothing else in the text moves. */
body.lg-full .lg-stat span{color:#aab2c5;text-shadow:0 1px 2px rgba(0,0,0,.6)}
body.lg-full .lg-stat b{text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* PHONE (Ian 2026-09-06: the photo should be the entire pokeblock on the phone too, like the
   desktop). Three app.css rules written for padded tiles outranked the glass here: the ianui
   4-wide photo bleed (margin -10/-11px, 63/96, rounded top), the 230px .pcard floor (an 86px
   tile kept a 120px photo over a dark hole), and panel text sized for a 329px tile. In 4-wide
   the strip keeps price and name only (gain, number, printing, stats, owner line hide); 2-wide
   keeps the full panel with smaller text. All under lg-full, Ian's account only for now. */
body.lg-full.ianui .grid.cols4 .pcard.lg-card .lg-ph{margin:0;aspect-ratio:63/88;border-radius:0}
body.lg-full.ianui .grid.cols4 .pcard.lg-card .lg-ph img{border-radius:0}
body.lg-full .pcard.lg-card{min-height:0}
@media(max-width:760px){
  body.lg-full .lg-cap{padding:6px 8px 5px}
  body.lg-full .lg-price{font-size:15px}
  body.lg-full .lg-nm{font-size:11px}
  body.lg-full .lg-stats{margin-top:5px;padding-top:4px}
  body.lg-full .lg-stat b{font-size:10px}
  body.lg-full.ianui .grid.cols4 .pcard.lg-card .lg-cap{padding:4px 6px}
  body.lg-full.ianui .grid.cols4 .pcard.lg-card .lg-price{font-size:12px}
  body.lg-full.ianui .grid.cols4 .pcard.lg-card .lg-nm{font-size:9.5px;margin-top:1px}
  body.lg-full.ianui .grid.cols4 .pcard.lg-card .lg-delta,body.lg-full.ianui .grid.cols4 .pcard.lg-card .lg-num,body.lg-full.ianui .grid.cols4 .pcard.lg-card .lg-nm .nm-paren,body.lg-full.ianui .grid.cols4 .pcard.lg-card .lg-stats,body.lg-full.ianui .grid.cols4 .pcard.lg-card .lg-cap .tile-own{display:none}
}
/* ---- /Team/<uid> page ---- */
#taPage{display:none}
body.ta-open #taPage{display:block;position:fixed;inset:0;z-index:905;background:var(--bg,#0d0f14);overflow:auto}
body.ta-open > header, body.ta-open > main, body.ta-open nav.tabs{display:none!important}
.ta-wrap{max-width:820px;margin:0 auto;padding:26px 20px 40px}
.ta-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ta-who{font-size:21px;font-weight:800}
.ta-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.ta-badge{border:1px solid var(--line2);border-radius:20px;padding:1px 9px;font-size:11px;font-weight:700;color:var(--accent)}
.ta-group{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:4px 16px;margin-bottom:6px}
.ta-avatar{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--panel2);border:1px solid var(--line2);display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--accent)}
@media(min-width:900px){.ta-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}.ta-cols>div{min-width:0}}
.ta-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line2)}
.ta-row:last-child{border-bottom:0}
.ta-rtxt{flex:1;min-width:0}
.ta-rname{font-size:13.5px;font-weight:700}
.ta-rdesc{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.ta-switch{flex:0 0 auto;width:42px;height:24px;border-radius:24px;border:1px solid var(--line2);background:var(--panel);position:relative;cursor:pointer;transition:background .18s,border-color .18s}
.ta-switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:left .18s,background .18s}
.ta-switch.on{background:var(--accent);border-color:var(--accent)}
.ta-switch.on::after{left:20px;background:#1a1a1a}
.ta-foot{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:var(--panel);border-top:1px solid var(--line2)}
body:not(.ta-open) .ta-foot{display:none}