/* Parts & Inventory (mobile) — Parts module, 2026-06-17 (Chunk 1 read view).
   Dark theme, aligned with theme-v2. Write-view styles (stepper, sheets,
   detail page) land with the write chunk. */
#parts-content { padding: 0 0 80px; }
.pt-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 12px; }
.pt-head h1 { font-size: 20px; font-weight: 600; margin: 0; color: #f5f5f7; }
.pt-funnel { position: relative; flex: 0 0 auto; width: 46px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; background: #161616; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; color: rgba(235,235,245,.7); cursor: pointer; }
.pt-funnel.on { border-color: #c49060; color: #c49060; }
.pt-fbadge { position: absolute; top: -6px; right: -6px; background: #c49060; color: #1a1208; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 1px 5px; min-width: 16px; text-align: center; }

/* Filter panel — same collapse mechanic as the category sections
   (grid-template-rows 1fr↔0fr). The 12px gap lives on .pt-fpanel so it's
   clipped with the panel when closed. */
.pt-fwrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.30s cubic-bezier(0.22, 1, 0.36, 1); }
.pt-fwrap.collapsed { grid-template-rows: 0fr; transition: grid-template-rows 0.30s cubic-bezier(0.4, 0, 1, 1); }
.pt-fpanel-inner { overflow: hidden; min-height: 0; }
.pt-fpanel { display: block; margin: 0 0 12px; background: #161616; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; }
.pt-fsearch, .pt-fsel { width: 100%; box-sizing: border-box; background: #0e0e0e; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: #f5f5f7; font-size: 14px; padding: 10px 12px; margin-bottom: 8px; }
.pt-gbrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pt-gbrow > span { font-size: 12px; color: rgba(235,235,245,.45); font-weight: 600; margin-right: auto; }
.pt-gbtabs { display: flex; gap: 6px; }
.pt-gb { border: 1px solid rgba(255,255,255,.08); background: transparent; color: rgba(235,235,245,.7); border-radius: 8px; padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.pt-gb.on { border-color: #c49060; color: #c49060; }
.pt-ftog { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: #f5f5f7; padding: 6px 0; }
.pt-fclear { margin-top: 8px; width: 100%; border: 1px solid rgba(255,255,255,.08); background: transparent; color: rgba(235,235,245,.7); border-radius: 9px; padding: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }

.pt-grp { cursor: pointer; }
.pt-grp:hover { border-color: rgba(255,255,255,.18); }
.pt-grp .pt-grp-n { color: rgba(235,235,245,.85); }
.pt-grp .pt-grp-r { display: inline-flex; align-items: center; gap: 8px; color: rgba(235,235,245,.4); }
/* layout-edit mode ▲▼ (Reorder groups) */
.pt-gmv { width: 40px; height: 34px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: rgba(235,235,245,.75); border-radius: 8px; font-size: 13px; line-height: 1; cursor: pointer; }
.pt-caret { font-size: 13px; }

/* Group collapse/expand — same mechanic as the Task Board priority sections
   (boards.css .task-grid-wrap): grid-template-rows 1fr↔0fr animates the body's
   natural height; chevron rotates -90deg when collapsed. Same easings/durations. */
.pt-grp-sec { display: block; }
.pt-caret { display: inline-block; line-height: 1; transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1); }
.pt-grp-sec.collapsed .pt-caret { transform: rotate(-90deg); transition: transform 0.30s cubic-bezier(0.4, 0, 1, 1); }
.pt-grpwrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.30s cubic-bezier(0.22, 1, 0.36, 1); }
.pt-grp-sec.collapsed .pt-grpwrap { grid-template-rows: 0fr; transition: grid-template-rows 0.30s cubic-bezier(0.4, 0, 1, 1); }
.pt-grpbody { overflow: hidden; min-height: 0; }

/* Machine pills (replaced .pt-shared + "fits ..." text) — rounded-rect
   (8px, NOT capsule), neutral grey per color-for-meaning-only rule.
   Shown on the Details page; inert info, not buttons. */
.pt-eqpills { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-eqpill { display: inline-block; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: rgba(235,235,245,.85); border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }

/* header tools + add-item form */
.pt-htools { display: flex; align-items: center; gap: 8px; }
.pt-addnew { border: 1.5px solid #c49060; background: transparent; color: #c49060; border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 700; cursor: pointer; }
.pt-fin { width: 100%; box-sizing: border-box; background: #0e0e0e; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: #f5f5f7; font-size: 14px; padding: 11px 12px; margin-bottom: 9px; }
.pt-frow { display: flex; gap: 8px; }
.pt-addtoggle { margin-bottom: 12px; }
.pt-fnote { min-height: 62px; resize: vertical; font-family: inherit; line-height: 1.4; }
/* Needed-form photo row */
.pt-addphoto-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 1px dashed rgba(255,255,255,.2); border-radius: 9px; color: rgba(235,235,245,.7); font-size: 14px; font-weight: 600; padding: 12px; cursor: pointer; }
.pt-addphoto-btn svg { width: 18px; height: 18px; }
.pt-nlphoto { margin-bottom: 9px; }
.pt-nlphoto-thumb { position: relative; display: inline-block; }
.pt-nlphoto-thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); display: block; }
.pt-nlphoto-x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: none; background: #1e1e1e; color: #f5f5f7; font-size: 15px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* Needed-row note + photo */
.pt-neednote { margin-top: 6px; font-size: 12.5px; color: rgba(235,235,245,.6); line-height: 1.35; white-space: pre-wrap; }
.pt-needpic { margin-top: 9px; width: 72px; height: 72px; object-fit: cover; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); cursor: pointer; display: block; }
.pt-flabel { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: rgba(235,235,245,.45); font-weight: 700; margin: 4px 0 8px; }
.pt-eqpick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.pt-eqgrp { width: 100%; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: rgba(235,235,245,.4); font-weight: 700; margin: 4px 0 2px; }
.pt-eqchip { border: 1px solid rgba(255,255,255,.12); background: transparent; color: rgba(235,235,245,.8); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pt-eqchip.on { border-color: #c49060; color: #c49060; background: rgba(196,144,96,.12); }

/* add-form combobox pickers (mirror prototype .ep) */
.pt-ep { position: relative; margin-bottom: 9px; }
.pt-ep-field { width: 100%; box-sizing: border-box; height: 44px; display: flex; align-items: center; justify-content: space-between; background: #0e0e0e; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: #f5f5f7; font-size: 14px; padding: 0 12px; cursor: pointer; }
.pt-ep-caret { color: rgba(235,235,245,.45); font-size: 15px; line-height: 1; }
.pt-ep-pop { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #141414; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; box-shadow: 0 12px 28px rgba(0,0,0,.5); overflow: hidden; }
.pt-ep.open .pt-ep-pop { display: block; }
.pt-ep-search { width: 100%; box-sizing: border-box; background: #0e0e0e; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #f5f5f7; font-size: 13.5px; padding: 10px 12px; outline: none; }
.pt-ep-list { max-height: 230px; overflow-y: auto; padding: 4px 0; }
.pt-ep-grp { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: rgba(235,235,245,.7); padding: 10px 12px; cursor: pointer; border-top: 1px solid rgba(255,255,255,.04); }
.pt-ep-grp:hover { background: rgba(255,255,255,.04); }
.pt-ep-gcaret { color: rgba(235,235,245,.45); font-size: 13px; }
.pt-ep-opt { padding: 8px 12px 8px 24px; font-size: 13.5px; color: #f5f5f7; cursor: pointer; }
.pt-ep-opt:hover { background: rgba(255,255,255,.05); }
.pt-ep-opt.sel { color: #C8956C; }
.pt-ep-all { padding: 9px 12px; font-size: 13.5px; color: rgba(235,235,245,.7); cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.08); }
.pt-ep-all:hover { background: rgba(255,255,255,.05); }
.pt-ep-grp.loctop { text-transform: none; letter-spacing: 0; font-weight: 600; color: #f5f5f7; font-size: 13.5px; padding: 0; }
.pt-ep-grp.loctop .loc-name { flex: 1; padding: 9px 12px; cursor: pointer; }
.pt-ep-grp.loctop .loc-name.sel { color: #C8956C; }
.pt-ep-grp.loctop .loc-name:hover { background: rgba(255,255,255,.05); }
.pt-ep-grp.loctop .loc-caret { padding: 9px 14px; cursor: pointer; color: rgba(235,235,245,.45); font-size: 15px; line-height: 1; }
.pt-eqchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.pt-eqchip { display: inline-flex; align-items: center; gap: 6px; background: rgba(196,144,96,.12); border: 1px solid rgba(196,144,96,.4); color: #c49060; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.pt-eqchip b { cursor: pointer; font-weight: 700; }

/* photos */
.pt-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }
.pt-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); cursor: pointer; }
.pt-campic { width: 64px; height: 64px; border: 1px dashed rgba(255,255,255,.2); background: transparent; color: rgba(235,235,245,.6); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pt-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 1500; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.pt-lightbox.show { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.pt-lightbox img { max-width: 100%; max-height: 80vh; border-radius: 12px; }
.pt-lightbox .pt-back { position: absolute; top: 16px; left: 16px; }

/* type tabs — full-width segmented, gold active (mirror prototype .tabs) */
.pt-tabs { display: flex; gap: 6px; background: #161616; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 4px; margin: 2px 0 12px; position: relative; touch-action: none; }
.pt-tab { flex: 1; border: 0; background: transparent; color: rgba(235,235,245,.7); font-size: 15px; font-weight: 600; padding: 11px; border-radius: 9px; cursor: pointer; position: relative; z-index: 1; transition: color .18s ease; }
.pt-tab.active { background: transparent; color: #C8956C; }

/* Tab-change content slide — clone-swipe (mirrors #board-stage). Only the
   outgoing clone goes absolute; the new content stays in flow + holds height. */
.pt-stage { position: relative; }
.pt-stage.is-transitioning { overflow: hidden; }
.pt-below-leaving-clone { position: absolute; top: 0; left: 0; width: 100%; }
.pt-below-leaving-clone.nav-leaving.go-left  { animation: navOutShortRight 0.25s ease-out forwards; }
.pt-below-leaving-clone.nav-leaving.go-right { animation: navOutShortLeft  0.25s ease-out forwards; }
#pt-below.nav-entering.go-left  { animation: navInShortLeft  0.25s ease-out forwards; }
#pt-below.nav-entering.go-right { animation: navInShortRight 0.25s ease-out forwards; }

/* In Stock / Needed toggle + funnel on one row (mirror prototype .ctrlrow) */
.pt-ctrlrow { display: flex; gap: 8px; align-items: stretch; margin: 0 0 12px; }
.pt-sub { flex: 1; display: flex; gap: 6px; }
.pt-subbtn { flex: 1; border: 1px solid rgba(255,255,255,.08); background: #161616; color: rgba(235,235,245,.6); border-radius: 11px; padding: 11px 0; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pt-subbtn.on { border-color: #C8956C; color: #C8956C; }
.pt-nbadge { display: inline-block; background: #C8956C; color: #1a1208; font-size: 11px; font-weight: 700; border-radius: 9px; padding: 1px 6px; min-width: 16px; text-align: center; margin-left: 4px; }

/* Needed list */
.pt-grp-static { cursor: default; }
.pt-grp-static:hover { border-color: rgba(255,255,255,.08); }
.pt-addline { display: block; width: 100%; margin: 0 0 10px; border: 1px dashed rgba(255,255,255,.2); background: transparent; color: rgba(235,235,245,.7); border-radius: 10px; padding: 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pt-needacts { display: flex; gap: 6px; flex: 0 0 auto; }
.pt-needbtn { border: 1px solid rgba(255,255,255,.12); background: transparent; color: rgba(235,235,245,.8); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pt-needbtn.on { border-color: #c49060; color: #c49060; }
.pt-needbtn.accept { border-color: rgba(123,212,155,.5); color: #7bd49b; }
.pt-chip.ord { color: #c49060; border-color: rgba(196,144,96,.4); background: rgba(196,144,96,.1); }

/* In Stock card — block layout, name/part#/location + camera top-right, then row2 (mirror prototype .item/.ihead) */
.pt-ihead { display: flex; align-items: flex-start; gap: 10px; }
.pt-iheadL { flex: 1; min-width: 0; cursor: pointer; }
.pt-cardcam { flex: 0 0 auto; width: 34px; height: 32px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: rgba(235,235,245,.7); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
/* corner photo (card + detail): thumbnail replaces camera, with a small + */
.pt-cornwrap { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
.pt-cornpic { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); cursor: pointer; display: block; }
.pt-cornadd { width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: rgba(235,235,245,.6); border-radius: 6px; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
/* detail header: name/location left, photo top-right */
.pt-dhead { display: flex; align-items: flex-start; gap: 12px; }
.pt-dheadL { flex: 1; min-width: 0; }
.pt-dphoto { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; max-width: 140px; }
.pt-sub2 { font-size: 12.5px; color: rgba(235,235,245,.45); margin-top: 2px; }
.pt-loc { font-size: 12.5px; color: #8cc0ee; margin-top: 3px; }
.pt-row2 { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: nowrap; }
.pt-row2 .pt-needbtn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-spacer { flex: 1; }
/* Needed-view rows (flex) */
.pt-needrow { display: flex; align-items: center; gap: 10px; background: #161616; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 13px; margin-bottom: 9px; }
.pt-needrow-main { flex: 1; min-width: 0; }
/* Needed-line card (mirror prototype .need) */
.pt-need { background: #161616; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 11px 12px; margin-bottom: 9px; }
.pt-needq { float: right; font-size: 14px; font-weight: 700; color: #C8956C; }
.pt-neednm { font-size: 15px; font-weight: 600; color: #f5f5f7; }
.pt-needmeta { font-size: 12px; color: rgba(235,235,245,.45); margin-top: 2px; }
.pt-needfor { font-size: 12px; color: #c49060; margin-top: 3px; }
.pt-needstock { font-size: 12px; color: #7bd49b; margin-top: 3px; }
.pt-needbtns { display: flex; gap: 8px; margin-top: 10px; }
.pt-needbtns button { flex: 1; border: 1px solid rgba(255,255,255,.12); background: transparent; color: rgba(235,235,245,.7); border-radius: 8px; padding: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pt-needbtns button.pt-ord.on { border-color: #c49060; color: #c49060; }
.pt-needbtns .pt-acc { border-color: #C8956C; color: #C8956C; }
/* inline Accept accordion (mirror prototype .accept) */
/* Accept accordion — same grid-template-rows collapse as the category
   sections. Driven by .acc-open on the .pt-need card so the chevron and the
   panel share one state. (Renamed off .pt-accept, which is the sheet button.) */
.pt-acc-caret { display: inline-block; line-height: 1; transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1); }
.pt-need:not(.acc-open) .pt-acc-caret { transform: rotate(-90deg); transition: transform 0.30s cubic-bezier(0.4, 0, 1, 1); }
.pt-acc-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.30s cubic-bezier(0.4, 0, 1, 1); }
.pt-need.acc-open .pt-acc-wrap { grid-template-rows: 1fr; transition: grid-template-rows 0.30s cubic-bezier(0.22, 1, 0.36, 1); }
.pt-acc-inner { overflow: hidden; min-height: 0; }
.pt-acccard { margin-top: 10px; border: 1.5px solid #c49060; border-radius: 11px; padding: 13px; }
.pt-acclbl { font-size: 11px; color: rgba(235,235,245,.45); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.pt-acco { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #f5f5f7; padding: 8px 0; cursor: pointer; }
.pt-acco input { accent-color: #C8956C; width: 17px; height: 17px; flex: 0 0 auto; }
.pt-acco small { color: rgba(235,235,245,.45); display: block; font-size: 11.5px; }
.pt-accnote { font-size: 12.5px; color: rgba(235,235,245,.45); padding: 6px 0; }
.pt-accgo { margin-top: 9px; width: 100%; border: 1.5px solid #7bd49b; background: transparent; color: #7bd49b; border-radius: 9px; padding: 10px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.pt-needrm { margin-top: 8px; width: 100%; border: 1px solid rgba(226,87,76,.4); background: transparent; color: #eb8b83; border-radius: 9px; padding: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* filter toggle pills */
.pt-tog { border: 1px solid rgba(255,255,255,.12); background: transparent; color: rgba(235,235,245,.7); border-radius: 8px; padding: 5px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pt-tog.on { border-color: #c49060; color: #c49060; }

/* detail page: needed + remove */
.pt-drow2 { display: flex; align-items: center; margin-top: 16px; }

.pt-list { padding: 0; }
.pt-grp { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: rgba(235,235,245,.5); padding: 12px 14px; margin-bottom: 9px; background: #1e1e1e;
  border: 1px solid rgba(255,255,255,.08); border-radius: 11px; display: flex;
  align-items: center; justify-content: space-between; }
.pt-grp span { color: rgba(235,235,245,.4); font-weight: 600; }

/* In-Stock item — skinny row only (name + part# + on-hand + chevron).
   Tap anywhere → Details overlay, which holds all actions. */
.pt-item { display: block; background: #161616;
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 0; margin-bottom: 9px; overflow: hidden; }
.pt-minrow { display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; min-height: 44px; box-sizing: border-box; }
.pt-minL { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.pt-mnm { font-size: 14.5px; font-weight: 600; color: #f5f5f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.pt-mpn { font-size: 12px; color: rgba(235,235,245,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.pt-minR { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.pt-mqty { font-size: 14px; font-weight: 700; color: #f5f5f7; }
.pt-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.pt-dot.low { background: #e2574c; }
.pt-dot.ord { background: #c49060; }
.pt-minrow .pt-go { font-size: 17px; line-height: 1; }
.pt-nm { font-size: 15px; font-weight: 600; color: #f5f5f7; }
.pt-chips { margin-top: 6px; }
.pt-chip { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 7px;
  border: 1px solid rgba(255,255,255,.08); color: rgba(235,235,245,.7); }
.pt-chip.low { color: #e2574c; border-color: rgba(226,87,76,.4); background: rgba(226,87,76,.1); }

.pt-qty { display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 0 0 auto; padding: 4px 8px; }
.pt-qty b { font-size: 17px; font-weight: 700; color: #f5f5f7; }
.pt-qty small { font-size: 10.5px; font-weight: 600; color: rgba(235,235,245,.45); }

.pt-empty { text-align: center; color: rgba(235,235,245,.45); padding: 50px 20px; }
.pt-go { color: rgba(235,235,245,.35); font-weight: 400; }
/* topbar scan button — QR icon only, neutral, sits left of Add */
.pt-scanbtn { border-color: rgba(255,255,255,.2) !important; color: rgba(235,235,245,.85) !important; padding: 0 11px !important; }
/* scan sheet location options */
.pt-scanopt { display: block; width: 100%; text-align: left; background: #0e0e0e; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 13px 14px; margin-bottom: 8px; color: #f5f5f7; font-size: 14px; font-weight: 600; cursor: pointer; }
.pt-scanopt:hover { border-color: rgba(255,255,255,.2); }
/* "Showing: <location>" banner */
.pt-locbar { display: flex; align-items: center; margin: 0 0 10px; background: rgba(91,155,213,.1); border: 1px solid rgba(91,155,213,.35); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: #a9cdf0; }
.pt-locx { margin-left: auto; cursor: pointer; font-weight: 700; }

/* card actions / stepper */
.pt-actions { display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; flex: 0 0 auto; }
.pt-actions.big { margin: 14px auto 0; width: max-content; }
.pt-use, .pt-add { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; width: 52px; background: #1e1e1e; border: 0; font-size: 19px; font-weight: 700; cursor: pointer; padding: 8px 0; }
.pt-use small, .pt-add small { font-size: 10px; font-weight: 700; margin-top: 3px; }
.pt-use { color: #eb8b83; } .pt-add { color: #7bd49b; }
.pt-qty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 78px; padding: 7px 8px; cursor: pointer; border-left: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(255,255,255,.1); }
.pt-qty b { font-size: 16px; font-weight: 700; color: #f5f5f7; }
.pt-qty small { font-size: 10px; font-weight: 600; color: rgba(235,235,245,.45); }

/* detail overlay */
.pt-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 1200; display: flex; justify-content: center; visibility: hidden; transition: background .25s ease, visibility 0s linear .25s; }
.pt-overlay.show { background: rgba(0,0,0,.55); visibility: visible; transition: background .25s ease; }
.pt-panel { width: 100%; max-width: 480px; background: #0a0a0a; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.22,1,.36,1); will-change: transform; }
.pt-overlay.show .pt-panel { transform: translateX(0); }
.pt-top { padding: 13px 14px; border-bottom: 1px solid rgba(255,255,255,.08); flex: 0 0 auto; }
.pt-back { border: 1px solid rgba(255,255,255,.12); color: #f5f5f7; background: transparent; border-radius: 9px; padding: 9px 15px; font-size: 14px; font-weight: 600; cursor: pointer; }
.pt-body { padding: 18px 16px 44px; overflow-y: auto; flex: 1; }
.pt-dn { font-size: 22px; font-weight: 700; margin: 0 0 5px; color: #f5f5f7; }
.pt-dpn { font-size: 15px; color: rgba(235,235,245,.7); margin-bottom: 9px; }
.pt-dpn b { color: #f5f5f7; font-weight: 600; }
.pt-dmeta { font-size: 14px; color: #8cc0ee; margin-bottom: 5px; }
.pt-dfits { margin-top: 10px; } /* machine pills live here now (was "Fits ..." text) */
.pt-dqty { display: flex; }
.pt-sec { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: rgba(235,235,245,.45); font-weight: 700; margin: 22px 0 6px; }
.pt-hist .pt-e { font-size: 13px; color: rgba(235,235,245,.7); padding: 7px 0; display: flex; gap: 8px; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.05); }
.pt-hist .pt-e .d { margin-left: auto; color: rgba(235,235,245,.45); white-space: nowrap; font-size: 12px; }
.pt-e .pos { color: #7bd49b; font-weight: 700; } .pt-e .neg { color: #eb8b83; font-weight: 700; } .pt-e .adj { color: #c49060; font-weight: 700; }

/* bottom sheet */
.pt-sheet-ovl { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 1300; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; transition: background .25s ease, visibility 0s linear .3s; }
.pt-sheet-ovl.show { background: rgba(0,0,0,.6); visibility: visible; transition: background .25s ease; }
.pt-sheet { background: #1a1a1a; border: 1px solid rgba(255,255,255,.08); border-radius: 16px 16px 0 0; width: 100%; max-width: 480px; padding: 16px 16px 26px; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 10px); overflow-y: auto; transform: translateY(100%); transition: transform .3s cubic-bezier(.22,1,.36,1); will-change: transform; }
.pt-sheet-ovl.show .pt-sheet { transform: translateY(0); }
.pt-sheet h3 { margin: 0 0 4px; font-size: 17px; color: #f5f5f7; }
.pt-sub2 { font-size: 13px; color: rgba(235,235,245,.45); margin: 0 0 12px; }
.pt-qrow { display: flex; align-items: center; justify-content: space-between; background: #0e0e0e; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 9px 14px; margin-bottom: 14px; }
.pt-qrow > span { font-size: 14px; font-weight: 600; color: #f5f5f7; }
.pt-step { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; overflow: hidden; }
.pt-step button { width: 40px; height: 38px; border: 0; background: #1e1e1e; color: #f5f5f7; font-size: 20px; cursor: pointer; }
.pt-step span { min-width: 48px; text-align: center; font-size: 17px; font-weight: 700; color: #f5f5f7; }
.pt-uglabel { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: rgba(235,235,245,.45); font-weight: 700; margin: 14px 0 8px; }
.pt-usearch { width: 100%; box-sizing: border-box; background: #0e0e0e; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: #f5f5f7; font-size: 14px; padding: 11px 12px; margin-bottom: 8px; }

/* Detail-page sizing (2026-07-03): the detail overlay is now the ONLY place
   with the stepper / photo / needed-list controls, so they get roomier,
   glove-friendly sizes — scoped to #pt-detail so sheets/lists are untouched. */
#pt-detail .pt-use, #pt-detail .pt-add { width: 64px; font-size: 22px; padding: 12px 0; }
#pt-detail .pt-use small, #pt-detail .pt-add small { font-size: 11px; margin-top: 4px; }
#pt-detail .pt-qty { min-width: 88px; }
#pt-detail .pt-qty b { font-size: 20px; }
#pt-detail .pt-qty small { font-size: 11px; }
/* stepper centered on its own line; needed/edit/remove moved to the
   bottom action tray (.pt-dtray) */
#pt-detail .pt-drow2 { justify-content: center; }

/* Bottom action tray — mirrors .task-detail-tray (Task Detail): grey
   icon-over-label buttons, hairline vertical dividers, sits at the bottom
   of the panel flex column with safe-area clearance. */
.pt-dtray { display: flex; flex-shrink: 0; background: #1c1c1e; border-top: 1px solid rgba(255,255,255,.08); padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px)) 0; }
.pt-dtbtn { flex: 1 1 0; min-width: 0; min-height: 64px; padding: 10px 4px; background: transparent; border: 0; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 700; line-height: 1.15; text-align: center; color: rgba(235,235,245,.6); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pt-dtbtn + .pt-dtbtn { border-left: 1px solid rgba(255,255,255,.055); }
.pt-dtbtn svg { width: 21px; height: 21px; flex-shrink: 0; }
.pt-dtbtn.on { color: #c49060; } /* on-needed-list state — gold like other .on states */
#pt-detail .pt-cornpic { width: 58px; height: 58px; border-radius: 10px; }
#pt-detail .pt-cornadd { width: 30px; height: 30px; font-size: 17px; border-radius: 8px; }
#pt-detail .pt-cardcam { width: 50px; height: 46px; border-radius: 11px; }
#pt-detail .pt-cardcam svg { width: 22px; height: 22px; }
.pt-uopt { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #0e0e0e; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 14px; margin-bottom: 8px; color: #f5f5f7; font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; }
.pt-uopt small { font-size: 11px; color: rgba(235,235,245,.45); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.pt-uopt.general { justify-content: center; color: rgba(235,235,245,.7); border-style: dashed; font-size: 13.5px; }
.pt-uopt.sel { border-color: #c49060; background: rgba(196,144,96,.12); }
.pt-uopt.sel small { color: #c49060; }
.pt-accept { width: 100%; margin-top: 14px; border: 1.5px solid #c49060; background: transparent; color: #c49060; border-radius: 11px; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer; }

/* Glove sizing (2026-07-03): sheet form controls bigger. 16px inputs also
   stop iOS Safari's auto-zoom on focus. Scoped to .pt-sheet so the dense
   list/filter controls are untouched. */
.pt-sheet h3 { font-size: 19px; margin-bottom: 10px; }
.pt-sheet .pt-fin { padding: 16px 14px; font-size: 16px; border-radius: 11px; margin-bottom: 11px; }
.pt-sheet .pt-ep { margin-bottom: 11px; }
.pt-sheet .pt-ep-field { height: 56px; font-size: 16px; border-radius: 11px; }
.pt-sheet .pt-ep-search { font-size: 16px; padding: 14px; }
.pt-sheet .pt-ep-opt, .pt-sheet .pt-ep-all, .pt-sheet .pt-ep-grp { padding: 14px; font-size: 15px; }
.pt-sheet .pt-addtoggle .pt-subbtn { padding: 15px 0; font-size: 15px; }
.pt-sheet .pt-addphoto-btn { padding: 16px; font-size: 15px; }
.pt-sheet .pt-eqchip { padding: 9px 15px; font-size: 14px; }
.pt-sheet .pt-accept { padding: 16px; font-size: 16px; }
.pt-ep-hint { color: rgba(235,235,245,.4) !important; cursor: default; }
/* explicit create-category row at the top of the category picker */
.pt-catnew { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pt-catnew input { flex: 1; min-width: 0; box-sizing: border-box; background: #0e0e0e; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: #f5f5f7; font-size: 16px; padding: 12px; }
.pt-catnew button { flex: 0 0 auto; border: 1.5px solid #c49060; background: transparent; color: #c49060; border-radius: 9px; padding: 0 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.pt-ep-optrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-catx { flex: 0 0 auto; color: #eb8b83; font-size: 19px; line-height: 1; padding: 4px 10px; cursor: pointer; }
/* In sheets the picker pop opens IN-FLOW (pushes content down) instead of
   floating — bottom-of-form pickers were covering the save button and
   couldn't be scrolled past (Isaiah 2026-07-03). */
.pt-sheet .pt-ep-pop { position: static; box-shadow: none; margin-top: 6px; }
/* sheet header: back top-left, title centered (spacer balances the button) */
.pt-shead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pt-shead h3 { flex: 1; text-align: center; margin: 0; }
.pt-shead .pt-back { flex: 0 0 auto; min-width: 76px; }
.pt-shead-sp { flex: 0 0 auto; width: 76px; }
.pt-accept:disabled { opacity: .45; cursor: default; border-color: rgba(255,255,255,.1); color: rgba(235,235,245,.45); }

/* toast (fallback if app has none) */
.pt-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(12px); background: #2a2a2a; color: #f5f5f7; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 11px 16px; font-size: 13px; z-index: 1400; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 88%; text-align: center; }
.pt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }