/* The part panel on the desk (Parts): a fixed top (the drawing, name, brand and number, a big location chip in the
   kind colour, the status tags), then underline tabs (step 6: the open one ink with a 3px ink line under it): Details,
   Stock, Supplier, Fits, History. A tab shows a count of changed fields, an amber dot for something to check or a red
   mark for a problem. The markup is panelC() in js/desk/parts.js; what all fields share is in desk.css. */

.pc-top { padding: 16px 20px 12px; }
.pc-top .phead { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding-right: 36px; }
.pc-top .pimg img { width: 88px; height: 88px; }
.pc-id { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.pc-name { font-size: 22px; font-weight: 800; line-height: 1.15; }
.pc-pn { font-size: 14px; letter-spacing: 0.02em; color: var(--soft); }
.pc-loc { margin-top: 6px; }
.pc-loc .lchip { padding: 6px 11px; }
.pc-loc .lchip.nobin { background: var(--band); color: var(--g1); font-size: 14px; font-weight: 700; padding: 8px 10px; }

.ctabs { display: flex; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--line2); flex: none; background: #FFFFFF; }
.ctabb { flex: none; min-width: 0; height: 48px; border: 0; background: none; color: var(--ink-2); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 2px; box-shadow: inset 0 -3px 0 transparent; }
.ctabb:hover { color: var(--ink); box-shadow: inset 0 -3px 0 var(--line); }
.ctabb[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.tmark { min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; line-height: 1; }
.tmark.chg { background: var(--ink); color: #FFFFFF; }      /* a count of changes: a square ink mark (amber is the field's own marker) */
.tmark.warn { color: var(--chg-mark); font-size: 26px; padding: 0 1px; min-width: 0; }
.tmark.bad { background: var(--red); color: #FFFFFF; }

.pscroll { padding: 18px 20px 20px; }
.ctab { display: flex; flex-direction: column; gap: 14px; }
.ctab[hidden] { display: none; }
.cstock { display: flex; flex-direction: column; gap: 16px; }
.ccount { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cstep { width: 54px; height: 54px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); font-size: 30px; font-weight: 800; line-height: 1; padding: 0; }
.cstep:hover { border-color: var(--ink); }
.cbig { width: 120px; height: 54px; font-size: 32px; font-weight: 800; text-align: center; }
.ccount .stag { margin-left: 6px; }

/* the picker: Suggested, the part's category, a search box, All pictures (closed) */
.picker2 { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 12px; background: var(--band); }
.picker2 .pk-h { font-size: 13px; font-weight: 800; color: var(--ink); margin: 2px 0 0; }
.picker2 .pk-h .muted { font-weight: 400; }
.picker2 .picker { margin: 0; background: var(--paper); max-height: none; }
.picker2 .pk-cat { max-height: 252px; }
.picker2 .pk-sug .dpick { border-color: var(--green); }
.picker2 .pk-find { height: 40px; background: var(--paper); }
.picker2 .pk-find svg { color: var(--g1); }
.picker2 #pk-found { max-height: 252px; }
.picker2 #pk-found .muted { grid-column: 1 / -1; padding: 6px; font-size: 13px; }
.picker2 .pk-all > summary { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 700; list-style: none; text-decoration: underline; text-decoration-color: var(--hover); text-underline-offset: 4px; }
.picker2 .pk-all > summary::-webkit-details-marker { display: none; }
.picker2 .pk-all > summary .muted { font-weight: 400; text-decoration: none; }
.picker2 .pk-all > .picker { max-height: 300px; margin-top: 6px; }

/* ================================================================ compact: phone layout
   The part panel as a full-screen sheet (.msheet-part, js/desk/parts.js openPartSheet): the top scrolls away, the five
   tabs stick in equal columns (a change count rides at the corner), SAVE sits in the sheet's foot. The name is the
   sheet's title, so the top shows the picture, brand and number, and the location. Used on a phone (the Parts list, EDIT on the part
   page), so these rules hold at every width. */
.pc-print { display: none; }
.msheet-part .msheet-body { padding: 0; display: flex; flex-direction: column; }
.msheet-part .cpanel { flex: 1 0 auto; height: auto; min-height: 0; border-left: 0; display: block; width: 100%; max-width: 632px; margin: 0 auto; }
.msheet-part .pc-top { padding: 14px 16px 10px; }
.msheet-part .pc-top .phead { grid-template-columns: max-content minmax(0, 1fr); gap: 14px; padding-right: 0; align-items: center; }
.msheet-part .pc-top .pimg img { width: 72px; height: 72px; }
.msheet-part .pc-top .pimg span { font-size: 14px; min-height: 40px; text-align: center; white-space: nowrap; }
.msheet-part .px { display: none; }
.msheet-part .pc-name { display: none; }
.msheet-part .pc-pn { font-size: 15px; overflow-wrap: anywhere; }
.msheet-part .pc-print { display: inline-flex; padding-left: 0; margin-top: 2px; }
.msheet-part .ctabs { position: sticky; top: 0; z-index: 2; background: #FFFFFF; }
.msheet-part .ctabs { gap: 0; padding: 0; }
.msheet-part .ctabb { flex: 1 1 0; min-width: 0; height: 52px; padding: 0 2px 10px; align-items: flex-end; font-size: 14px; position: relative; letter-spacing: 0; }
.msheet-part .ctabb .tmark { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 1px 4px 0; font-size: 12.5px; }
.msheet-part .ctabb .tmark.warn { top: -4px; right: 5px; font-size: 22px; }
.msheet-part .pform { display: block; }
.msheet-part .pscroll { overflow: visible; padding: 16px 16px 24px; }
.msheet-part .msheet-foot { flex-direction: column; align-items: stretch; gap: 6px; }
.msheet-part .msheet-foot .perr { margin: 0; }
.msheet-part .pfoot { border: 0; padding: 0; gap: 8px; background: none; }
.msheet-part .pfoot .dfill, .msheet-part .pfoot [data-print] { display: none; }
.msheet-part .pfoot [data-cancel] { flex: none; padding: 0 12px; }
.msheet-part .pfoot .dgo { flex: 1; min-height: 52px; }
.msheet-part .ploc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msheet-part .ploc > select:first-child { grid-column: 1 / -1; }
.msheet-part .ploc .pcode { grid-column: 1 / -1; text-align: left; }
.msheet-part .picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.msheet-part .picker2 .picker, .msheet-part .picker2 .pk-cat, .msheet-part .picker2 #pk-found, .msheet-part .picker2 .pk-all > .picker { max-height: none; overflow: visible; }
.msheet-part .picker2 .pk-h { font-size: 14px; }
.msheet-part .picker2 .pk-find { height: 48px; }
.msheet-part .picker2 .pk-all > summary { min-height: 48px; font-size: 15px; }
.msheet-part .dpick { font-size: 13px; min-height: 96px; }
.msheet-part .padd .pin { flex: 1; width: auto; }
.msheet-part .cstep { width: 56px; height: 56px; }
.msheet-part .cbig { width: 112px; height: 56px; }
.msheet-part .pchk input { width: 24px; height: 24px; }
/* the history as stacked rows: when, what and who on the left, the qty at the right, the unit / WO / reason below */
.msheet-part .htable, .msheet-part .htable tbody { display: block; font-size: 15px; }
.msheet-part .htable thead { display: none; }
.msheet-part .htable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line2); }
.msheet-part .htable td { border: 0; padding: 0; }
.msheet-part .htable td:nth-child(1) { grid-area: 1 / 1; font-size: 14px; color: var(--g1); }
.msheet-part .htable td:nth-child(2) { grid-area: 2 / 1; font-weight: 700; }
.msheet-part .htable td:nth-child(3) { grid-area: 1 / 2 / 3 / 3; align-self: center; font-size: 20px; }
.msheet-part .htable td:nth-child(4) { grid-area: 3 / 1 / 4 / 3; font-size: 14px; color: var(--soft); }
.msheet-part .htable td:nth-child(5) { grid-area: 4 / 1 / 5 / 3; font-size: 14px; }
.msheet-part .htable td:nth-child(5):empty { display: none; }
.msheet-part .htable .mono { font-size: 14px; }
.msheet-part .htable .flag { font-size: 13px; }

/* the Parts list on a phone: the search and Filter (n) (category, location and sort, in a sheet), the quick views as
   square tabs (they scroll sideways when they don't fit, with a fade at the edge), ADD PART and SELECT TO PRINT on one
   row, the summary, then cards */
@media (max-width: 1023.98px) {
  .cparts { display: block; height: auto; }
  .cparts .dmain { padding: 12px 16px 0; display: block; }
  .cp-search { display: flex; gap: 8px; }
  .cp-search .dfield { height: 48px; min-height: 48px; }      /* (not .grow's 52px: the row matches Filter) */
  .cp-search .dfield input { font-size: 17px; }
  .cp-filter { flex: none; min-width: 92px; height: 48px; font-size: 15px; }
  .cp-filter.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  /* the quick views: two rows of square tabs that always fit (All, Low, Out; then On order, Needs attention) */
  /* (a 1px pad under them: the tabs overlap by 1px, so the bottom row's line would sit under the first card; the
     same 4px gap above the cards whether the summary band shows or not) */
  .cparts .qviews { margin: 4px 0 4px; padding-bottom: 1px; }
  .cparts .qrow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
  .cparts .qv { grid-column: span 2; min-width: 0; height: 48px; margin: 0 0 -1px -1px; padding: 0 4px; justify-content: center; gap: 5px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 700; }
  .cparts .qv:nth-child(3n + 1) { margin-left: 0; }
  .cparts .qv[data-view="order"] { grid-column: span 3; margin-left: 0; }
  .cparts .qv[data-view="attention"] { grid-column: span 3; }
  .cparts .qv span { white-space: nowrap; }
  .cparts .qv.on { position: relative; z-index: 1; background: var(--green); border-color: var(--green); color: #FFFFFF; }
  .cparts .qv.on b { color: #FFFFFF; }
  .cp-sum { margin: 0 -16px; padding: 0 16px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--band); font-size: 14px; color: var(--soft); line-height: 1.35; }
  .cp-sum[hidden] { display: none; }
  .cp-sum b { color: var(--ink); }
  .cp-sum .linkbtn { flex: none; font-size: 15px; }
  /* step 6: "Parts 104", ADD PART and the select-to-print button on one row, the totals under it (look.css: .pghead);
     kept tight so the first card still starts in the top 40% of a small phone (360 × 740). */
  .cparts .dmain { padding-top: 2px; }
  .pghead.cpact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 2px; padding: 4px 0 6px; margin-bottom: 4px; }
  .pghead.cpact .pgt { display: contents; }
  .pghead.cpact h1 { grid-row: 1; grid-column: 1; }
  .pghead.cpact .pgact { grid-row: 1; grid-column: 2; flex-wrap: nowrap; gap: 8px; }
  .pghead.cpact .pgsum { grid-row: 2; grid-column: 1 / -1; font-size: 14px; line-height: 1.3; }
  .pghead.cpact .pgact .dgo { height: 48px; padding: 0 14px; font-size: 15px; }
  .cp-sel { width: 48px; min-width: 48px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .cp-sel[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .cparts .qviews { margin-top: 4px; }
  .pcards { margin: 0 -16px; border-top: 1px solid var(--line2); }
  .pcard { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--line2); background: var(--paper); }
  .pcard[data-uc] { box-shadow: inset 6px 0 0 var(--uc); }
  .pcard.sel { background: var(--wash); }
  .pc-a { flex: 1; min-width: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 88px; padding: 10px 16px 10px 18px; color: var(--ink); text-decoration: none; }
  .pc-a:active { background: var(--wash); }
  .pc-pic img { width: 56px; height: 56px; }
  .pc-mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .pc-nm { font-size: 17px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
  .pc-bn { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--soft); overflow-wrap: anywhere; }
  .pc-bn .nw { white-space: nowrap; }
  .pc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 3px; }
  .pc-tags .lchip[data-uc] { padding: 4px 8px; }
  .pc-tags .lchip.nobin { background: var(--band); color: var(--g1); font-size: 13px; font-weight: 700; padding: 5px 8px; }
  .pc-qty { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
  .pc-qty b { font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
  .pc-qty span { font-size: 13px; color: var(--g1); white-space: nowrap; }
  .pc-ck { flex: none; width: 56px; display: flex; align-items: center; justify-content: center; padding-left: 8px; cursor: pointer; }
  .pc-ck input { width: 24px; height: 24px; margin: 0; accent-color: var(--ink); }
  .pcards.selmode .pc-a { padding-left: 4px; grid-template-columns: 48px minmax(0, 1fr) auto; }
  .pcards.selmode .pc-pic img { width: 48px; height: 48px; }
  .pcards.selmode { margin-bottom: 76px; }
  .pgrp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 14px 16px 10px; background: var(--band); font-size: 16px; }
  .pgrp .muted { font-size: 14px; }
  .pgrp .gwhy { flex-basis: 100%; font-size: 14px; color: var(--soft); line-height: 1.35; }
  .cparts .empty { padding: 20px 0; }
  .cp-selbar { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); z-index: 19; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); background: var(--paper); border-top: 2px solid var(--ink); }
  .cp-selbar .dgo, .cp-selbar .dbtn { height: 52px; min-height: 52px; padding: 0 12px; }
}
.msheet-part .uchip .nf { font-size: 13px; }
.editbtn { margin-top: 14px; }
/* a tablet (640 to 1023px): two columns of cards */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcards > .pcard:nth-child(odd of .pcard) { border-right: 1px solid var(--line2); }
  .pcards > .pgrp { grid-column: 1 / -1; }
}

/* the Filter sheet (Parts on a phone): category, location, sort */
.cp-fsheet { display: flex; flex-direction: column; gap: 18px; }
.cp-fsheet .dsel { max-width: none; width: 100%; height: 52px; font-size: 16px; }
.cp-sorts { border: 0; margin: 0; padding: 0; min-width: 0; }
.cp-sorts legend { padding: 0; margin-bottom: 4px; }
.cp-sorts .pchk { display: flex; min-height: 52px; border-bottom: 1px solid var(--line2); font-size: 16px; }
.cp-sorts .pchk input { width: 22px; height: 22px; accent-color: var(--green); }
.msheet-filter .msheet-foot .dbtn { flex: none; min-height: 52px; padding: 0 18px; }
.pcat { display: flex; flex-direction: column; gap: 8px; }