/* The desk (computer pages) and the QR label print view. Same language as the phones: ink on white, Knelsen green
   for the one primary action and for where you are, square corners, no shadows. A dark side menu; toolbars and
   section headings on light grey bands; strong edges between the main area and the side card; storage units in
   their kind's colour. */


/* ---------------------------------------------------------------- compact pages on a tablet
   compact: phone layout. The top bar and the bottom nav are always the full width. */
/* step 6: one width rule for every compact page (Find, the part, Receive, My pulls and the desk pages alike): from
   600px the content is a centred column up to 760px with 24px gutters (8px here + the pages' own 16px) */
@media (min-width: 600px) {
  body.compact:not(.page-login) #view { max-width: 808px; margin-left: auto; margin-right: auto; padding-left: 8px; padding-right: 8px; }
  body.compact #toast { max-width: 760px; margin: 0 auto; }
}

/* ---------------------------------------------------------------- desk frame: the side menu on the left */
body.desk { min-width: 1024px; overflow-x: auto; }
body.desk #hdr { position: fixed; top: 0; left: 0; bottom: 0; width: 220px; z-index: 15; background: var(--side); border-right: 1px solid var(--line2); }
body.desk #view { margin-left: 220px; padding: 0; height: 100vh; height: 100dvh; overflow: hidden; }
body.desk .menu { top: auto; right: auto; bottom: 14px; left: 232px; }
body.desk #toast { left: 244px; right: auto; width: 460px; bottom: 16px; }
/* the build, at the foot of the side menu */
body.desk #nav { left: 0; right: auto; bottom: 0; width: 220px; height: 30px; z-index: 16; background: transparent; }
.menu .build { margin: 10px 0 0; font-size: 12px; color: var(--g1); }
.flbl { font-size: 13px; font-weight: 600; color: var(--g1); line-height: 1.2; }
.phint { font-size: 13px; color: var(--g1); line-height: 1.4; }
.muted.small { font-size: 13px; }
.dfill { flex: 1; }
kbd { font-family: var(--mono); font-size: 13px; border: 1px solid var(--line); border-radius: 2px; padding: 0 4px; background: var(--wash); }

/* step 6: a light grey side menu (the reference): ink words and icons, the open page a solid green block with white
   words, counts in small white boxes with a hairline; the person and Log out at the bottom */
/* (a short window: the menu scrolls, the person, Log out and the build stay under the pages, never on top of them) */
.dside { height: 100%; display: flex; flex-direction: column; padding: 22px 0 10px; overflow-y: auto; overscroll-behavior: contain; color: var(--ink); }
.dside .dbuild { flex: none; padding: 6px 20px 0; font-size: 13px; color: var(--ink-3); }
.dside .brand { font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1.2; padding: 0 20px; color: var(--ink-2); }
.dside .dh1 { font-size: 20px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.1; white-space: nowrap; padding: 2px 20px 0; color: var(--ink); }
.dnav { display: flex; flex-direction: column; gap: 0; margin-top: 24px; }
.navi { height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 20px; text-decoration: none; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.navi .sico { flex-shrink: 0; }
.navi:hover { background: var(--side-hover); color: var(--ink); }
.navi[aria-current="page"] { background: var(--side-on); color: #FFFFFF; font-weight: 700; }
.dhfill { margin: auto 0 8px; padding: 0 20px; display: flex; align-items: center; gap: 12px; }
.doff { font-size: 13px; font-weight: 700; color: var(--st-out); background: var(--st-out-bg); padding: 4px 8px; border-radius: var(--rc); }
.dside .dwho { border-top: 1px solid var(--line2); padding-top: 10px; display: flex; flex-direction: column; }
.dside .who { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; padding: 0 20px; color: var(--ink); font-size: 15px; font-weight: 700; text-align: left; }
.dside .who .nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dside .who .nm small { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.dside .who:hover { background: var(--side-hover); }
.dside .dout { min-height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border: 0; background: none; color: var(--ink-2); font-size: 15px; font-weight: 600; text-align: left; width: 100%; }
.dside .dout:hover { background: var(--side-hover); color: var(--ink); }
.dside :focus-visible { outline-color: var(--focus); outline-offset: -3px; }

/* ---------------------------------------------------------------- controls */
.tbtn { min-height: 48px; padding: 0 10px; border: 0; background: none; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--hover); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tbtn:hover { text-decoration-color: var(--ink); background: var(--wash); }
.tbtn:disabled { color: var(--disabled); text-decoration: none; cursor: default; background: none; }
.tbtn:disabled svg { opacity: 0.4; }
.tbtn.strong { color: var(--red); }
.dbtn { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.dbtn:hover { border-color: var(--ink); }
.dbtn.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dbtn.ink:hover { background: var(--ink-hover); }
.dbtn:disabled { color: var(--g1); cursor: not-allowed; }
.dbtn.danger { color: var(--red); border-color: var(--red); }
.dbtn.danger:hover { box-shadow: inset 0 0 0 1px var(--red); }
.dgo { height: 48px; padding: 0 22px; background: var(--green); color: var(--paper); border: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; text-decoration: none; }
.dgo:hover, .dgo:active { background: var(--green-d); }
.dgo:disabled { background: var(--go-off2); cursor: default; }
.pin { height: 44px; width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--paper); padding: 0 10px; font-size: 16px; font-weight: 600; color: var(--ink); border-radius: 0; }
.pin.big { font-size: 20px; font-weight: 800; height: 48px; }
.pin.mono { font-family: var(--mono); font-weight: 600; text-transform: uppercase; }
textarea.pin { height: auto; padding: 8px 10px; font-weight: 400; font-size: 15px; resize: vertical; line-height: 1.35; }
select.pin { padding-right: 6px; }
.pin:hover { border-color: var(--hover2); }
.pin:focus, .pin:focus-visible { outline: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pin:disabled { color: var(--g1); background: var(--wash); }
.pf { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pf.nolbl > .flbl { display: none; }
/* the part panel (all three layouts): a field that differs from the saved part is soft yellow with an amber marker */
.pf.chg .pin, .pf.chg > .pchk, .pf.chg #pfits { background: var(--chg-bg); border-left: 3px solid var(--chg-mark); }
.pf.chg > .pchk, .pf.chg #pfits { padding-left: 8px; }
/* an invalid field: a red outline and the message under it */
.pf.bad .pin, .pf.bad .unitin2 { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.pf.bad .flbl { color: var(--red); }
.pf.bad .phint { display: none; }
.ferr { display: flex; align-items: flex-start; gap: 5px; font-size: 13px; font-weight: 700; color: var(--red); line-height: 1.3; }
.ferr svg { flex-shrink: 0; margin-top: 1px; }
.pgrid { display: grid; gap: 14px 12px; }
.pgrid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf.s2 { grid-column: span 2; }
.pchk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; cursor: pointer; }
.pchk input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }
.pmoney { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.segm, .seg2 { display: flex; }
.segm button, .seg2 button { flex: 1; min-height: 44px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 700; padding: 0 10px; white-space: nowrap; }
.segm button + button, .seg2 button + button { margin-left: -1px; }
.segm button:hover, .seg2 button:hover { border-color: var(--hover2); position: relative; }
.segm button[aria-pressed="true"], .seg2 button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); position: relative; }
.perr { color: var(--red); font-size: 14px; font-weight: 700; display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; line-height: 1.35; }
.perr svg { flex-shrink: 0; margin-top: 2px; }
.pwarn { color: var(--amber); font-size: 14px; font-weight: 700; display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; line-height: 1.35; }
.pwarn svg { flex-shrink: 0; margin-top: 3px; }
.dprow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.lv-band-A { background: var(--lv-A); } .lv-band-B { background: var(--lv-B); } .lv-band-C { background: var(--lv-C); } .lv-band-D { background: var(--lv-D); }
.dtop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dtitle { font-size: 26px; font-weight: 800; margin: 0 4px 0 0; white-space: nowrap; line-height: 1.1; }
.dtitle .n { color: var(--g1); font-weight: 700; margin-left: 4px; }
.dtop > .muted { font-size: 14px; }

/* ---------------------------------------------------------------- a sheet that comes later */
.dnext { max-width: 720px; padding: 48px; }
.dnext h2 { font-size: 30px; font-weight: 800; margin: 4px 0 12px; }
.dnext p { font-size: 17px; line-height: 1.5; margin: 0 0 14px; }
.dnext .tbtn { padding-left: 0; }

/* ---------------------------------------------------------------- PARTS */
.dparts { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; }
.dparts.has-panel { grid-template-columns: minmax(0, 1fr) 470px; }
.dmain { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dparts .dmain { padding: 20px 28px 0; }
.dtop.row2 { margin-top: 14px; flex-wrap: nowrap; }
.dfield { height: 48px; border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--paper); }
.dfield.grow { flex: 1; min-width: 200px; }
.dfield input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 16px; font-weight: 600; height: 100%; color: var(--ink); }
.dfield input::placeholder { color: var(--g1); font-weight: 400; }
.dfield:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dsel { height: 48px; border: 1px solid var(--line); background: var(--paper); padding: 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); max-width: 210px; border-radius: 0; }
.dsel:focus { outline: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.qviews { margin-top: 10px; padding-bottom: 12px; }
.qrow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.qv { height: 44px; border: 1px solid var(--line); padding: 2px 12px 0; display: inline-flex; align-items: center; gap: 7px; background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
.qv + .qv { margin-left: -1px; }
.qv b { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.qv:hover { border-color: var(--hover2); position: relative; }
/* one tab style: the open one is a solid green block with white text (the part panel, Review and To order too) */
.qv.on { color: #FFFFFF; background: var(--green); border-color: var(--green); font-weight: 800; position: relative; }
.qv.on b { color: #FFFFFF; }
.qv.on svg { filter: brightness(0) invert(1); }
.tablewrap { flex: 1; min-height: 0; overflow: auto; }
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.dtable th { position: sticky; top: 0; z-index: 1; background: var(--band); font-size: 13px; font-weight: 800; color: var(--ink); text-align: left; height: 40px; padding: 0 10px; white-space: nowrap; }
.dtable th button { background: none; border: 0; padding: 0; height: 40px; font: inherit; color: inherit; cursor: pointer; }
.dtable th button:hover { color: var(--ink); }
.dtable th[aria-sort="ascending"], .dtable th[aria-sort="descending"] { color: var(--ink); }
.dtable th.num, .dtable td.num { text-align: right; }
.dtable td { padding: 6px 10px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.dtable tbody tr[data-id] { cursor: pointer; }
.dtable tbody tr[data-id]:hover td { background: var(--row-hover); }
.dtable tbody tr.sel td { background: var(--wash); }
.dtable tbody tr.open td { background: var(--row-open); }
.dtable tbody tr.open td:first-child { box-shadow: inset 4px 0 0 var(--ink); }
/* each row has a 6px edge in its unit's colour */
.dtable tr[data-uc] td:first-child { box-shadow: inset 6px 0 0 var(--uc); }
.dtable tbody tr.open[data-uc] td:first-child { box-shadow: inset 6px 0 0 var(--uc), inset 10px 0 0 var(--paper); }
.dtable .ck { width: 46px; padding-right: 0; padding-left: 16px; }
.dtable .ck input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; vertical-align: middle; }
.dtable .dr { width: 72px; padding: 4px 8px 4px 2px; }
.dtable .pt a { display: block; font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.25; }
.dtable .pt a:hover { text-decoration: underline; }
.dtable .pt .mono { display: block; font-size: 13px; letter-spacing: 0.02em; color: var(--soft); margin-top: 2px; }
.dbar { flex: none; display: flex; flex-direction: column; background: var(--band); margin: -20px -28px 0; padding: 18px 28px 0; border-bottom: 2px solid var(--ink); }
.dtable .c-loc { width: 130px; }
.dtable td.lc { white-space: nowrap; }
.dtable .c-qty { width: 190px; }
.dtable td.oh { white-space: nowrap; }
.dtable td.oh svg { vertical-align: -1px; margin-right: 6px; }
.dtable td.oh b { font-size: 17px; }
.dtable .c-price { width: 110px; }
.dtable td.pr { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable .muted { color: var(--g1); }
.dtable tr.grp th { position: static; height: auto; padding: 10px; color: var(--ink); white-space: normal; font-size: 15px; background: var(--band); }
.dtable tr.grp .gname { font-weight: 800; }
.dtable tr.grp .gn { font-weight: 800; margin-left: 2px; }
.dtable tr.grp .muted { font-weight: 400; font-size: 13px; }
.dtable tr.grp .gwhy { font-weight: 400; font-size: 13px; color: var(--g1); margin-left: 14px; }
.tablewrap .empty { padding: 16px 0; }
.flag { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--ink); margin: 2px 12px 2px 0; }
.flag.red { color: var(--st-out); background: var(--st-out-bg); padding: 3px 7px 3px 5px; }
.flag.amber { color: var(--st-low); background: var(--st-low-bg); padding: 3px 7px 3px 5px; }
.flag.blue { color: var(--st-order); background: var(--st-order-bg); padding: 3px 7px 3px 5px; }


/* the part panel: a full-height sheet at the right */
.dpanel { border-left: 2px solid var(--ink); display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--paper); }
.dpanel[hidden] { display: none !important; }
/* step 6: below 1440px (js/desk/parts.js SLIDE_MQ) the part panel slides in from the right over the dimmed list, like the unit panel */
.pscrim { display: none; }
.dparts.slide.has-panel { grid-template-columns: minmax(0, 1fr); }
.dparts.slide.has-panel .pscrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(21, 24, 27, 0.42); animation: up-fade 0.22s ease-out; }
.dparts.slide .dpanel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 26; width: min(500px, calc(100vw - 240px)); height: auto; border-left: 0; box-shadow: -10px 0 30px rgba(21, 24, 27, 0.2); animation: up-in 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) { .dparts.slide .dpanel, .dparts.slide.has-panel .pscrim { animation: none; } }
.dpanel .ph { padding: 18px 24px 12px; position: relative; }
.phead { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: start; padding-right: 36px; }
.pimg { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 0; color: var(--ink); font-size: 13px; font-weight: 700; }
.pimg img { width: 120px; height: 120px; border: 1px solid var(--line2); }
.pimg span { text-decoration: underline; text-decoration-color: var(--hover); text-underline-offset: 3px; min-height: 28px; display: flex; align-items: center; }
.pimg:hover img { border-color: var(--ink); }
.phf { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pflags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.pflags .stag { margin: 0; }
.dpanel .px { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border: 0; background: none; display: flex; align-items: center; justify-content: center; padding: 0; }
.dpanel .px:hover { background: var(--wash); }
.pform { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: 0; }
.pscroll { flex: 1; min-height: 0; overflow: auto; padding: 4px 24px 20px; }
.pform > .perr { padding: 0 24px; }
.pfoot { border-top: 1px solid var(--line); padding: 10px 20px 10px 14px; display: flex; gap: 8px; align-items: center; background: var(--paper); }
.psect { padding: 14px 0; border-top: 1px solid var(--line2); }
.psect > .flbl { display: block; margin-bottom: 6px; }
.ploc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: center; }
.ploc .pcode { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; text-align: left; }      /* step 5: the code, its names beside it */
.ploc .pcode .lcn { margin-top: 0; }
.pcode { min-width: 0; text-align: right; }
.pcode .muted { font-size: 13px; }
.prow2 { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 12px; align-items: end; }
.ponhand { display: flex; flex-direction: column; gap: 5px; }
.ohrow { display: flex; align-items: center; gap: 6px; height: 44px; }
.ohrow b { font-size: 30px; font-weight: 800; line-height: 1; }
.ohrow .tbtn { min-height: 44px; }
.padjust { padding: 14px 16px 16px; margin: 0 0 6px; background: var(--wash); }
.padjust p.muted { font-size: 13px; margin: 0 0 10px; }
.pmore > summary { min-height: 52px; padding: 0 10px; background: var(--band); display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 800; list-style: none; }
.pmore > summary::-webkit-details-marker { display: none; }
.pmore > summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform 0.12s; }
.pmore[open] > summary::before { transform: rotate(45deg); }
.pmore > summary .muted { font-weight: 400; font-size: 13px; }
.pmore > summary:hover { text-decoration: underline; }
.psub2 { margin-top: 18px; }
.psub2 > .flbl { display: block; margin-bottom: 4px; }
.picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; max-height: 320px; overflow: auto; border: 1px solid var(--line); padding: 6px; }
.dpick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid var(--line2); background: var(--paper); font-size: 12px; line-height: 1.2; text-align: center; min-height: 92px; }
.dpick:hover { border-color: var(--g1); }
.dpick.on { border: 2px solid var(--ink); background: var(--wash); }
.uchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.uchip { display: inline-flex; align-items: center; gap: 6px; height: 36px; border: 1px solid var(--line); padding: 0 0 0 10px; font-size: 15px; }
.uchip button { width: 34px; height: 34px; border: 0; background: none; display: flex; align-items: center; justify-content: center; padding: 0; }
.uchip button:hover { background: var(--wash); }
.uchip.odd { border-style: dashed; border-color: var(--amber); }
.uchip .nf { font-size: 12px; color: var(--amber); font-weight: 700; }
.padd { display: flex; gap: 8px; align-items: center; }
.padd .pin { width: 170px; }
.htable { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.htable th { font-size: 12.5px; font-weight: 600; color: var(--g1); text-align: left; padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); }
.htable td { padding: 6px 6px 6px 0; border-bottom: 1px solid var(--line2); vertical-align: top; }
.htable .num { text-align: right; }
.htable .flag { font-size: 12px; margin: 0; }
.htable td.nw { white-space: nowrap; }
.htable .mono { font-family: var(--mono); font-size: 12px; font-weight: 600; }

/* ---------------------------------------------------------------- SETUP: the parts room */
.dsetup { display: grid; grid-template-columns: minmax(0, 1fr) 320px; height: 100%; }
.smain { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
/* step 6: while dragging, a small note at the top left of the plan (the toolbar has no hint line any more) */
.sdrag { position: absolute; top: 66px; left: 16px; z-index: 2; margin: 0; padding: 4px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--rc); font-size: 14px; color: var(--ink-2); pointer-events: none; }
.stool { flex: none; height: 56px; display: flex; align-items: center; gap: 2px; padding: 0 16px 0 18px; background: var(--band); border-bottom: 2px solid var(--ink); }
.stool .tbtn { font-size: 14.5px; padding: 0 9px; }
.stool .tsep { width: 1px; height: 26px; background: var(--line); margin: 0 8px; flex: none; }
.shint { flex: 1; min-width: 0; margin: 0 12px 0 4px; font-size: 14px; color: var(--g1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.splan { flex: 1; min-height: 360px; position: relative; outline: none; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.splan:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.splan svg { display: block; }
.splan svg text { -webkit-user-select: none; user-select: none; }
.splan [data-k="unit"], .splan [data-k="area"] { cursor: grab; }
.splan.dragging, .splan.dragging * { cursor: grabbing !important; }
.splan [data-k="unit"]:hover .hov { stroke: var(--ink); }
.splan [data-k="unit"].on .hov { stroke: var(--ink); }
.splan [data-k="end"].ew, .splan [data-k="wall"][data-w="e"], .splan [data-k="wall"][data-w="w"] { cursor: ew-resize; }
.splan [data-k="end"].ns, .splan [data-k="wall"][data-w="n"], .splan [data-k="wall"][data-w="s"] { cursor: ns-resize; }
.splan [data-k="corner"][data-c="nw"], .splan [data-k="corner"][data-c="se"] { cursor: nwse-resize; }
.splan [data-k="corner"][data-c="ne"], .splan [data-k="corner"][data-c="sw"] { cursor: nesw-resize; }
.splan [data-k="wall"]:hover .grip, .splan [data-k="corner"]:hover .grip { stroke: var(--ink); stroke-width: 2; }
.splan [data-k="door"] { cursor: grab; }
.splan [data-k="door"]:hover circle + circle { fill: var(--wash); stroke-width: 3; }
.splan [data-k="area"]:hover rect { stroke: var(--ink); }
.splan .sbtn { cursor: pointer; }
.splan .sbtn:hover rect { stroke: var(--ink); }
.sside { border-left: 2px solid var(--ink); overflow: auto; padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 22px; }
.scard { display: flex; flex-direction: column; gap: 12px; }
.sc-h { display: flex; gap: 12px; align-items: flex-start; }
.sc-h > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sc-code { flex: none; min-width: 44px; height: 44px; padding: 0 8px; background: var(--uc, var(--ink)); color: var(--paper); font-family: var(--mono); font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.sc-name { height: 44px; border: 1px solid transparent; padding: 0 6px; margin-left: -6px; font-size: 19px; font-weight: 800; color: var(--ink); background: none; width: calc(100% + 6px); border-radius: 0; }
.sc-name::placeholder { color: var(--g1); font-weight: 600; }
.sc-name:hover { border-color: var(--line); }
.sc-name:focus { outline: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sc-title { font-size: 20px; font-weight: 800; line-height: 1.2; }
.sc-sub { font-size: 13px; color: var(--g1); line-height: 1.35; }
.sc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.sc-row > span:first-child { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; flex-direction: column; gap: 1px; }
.sc-row small { font-size: 13px; font-weight: 400; color: var(--g1); }
.sc-row .seg2 { min-width: 168px; }
.stepper2 { display: flex; align-items: center; border: 1px solid var(--line); }
.stepper2 .tbtn.sq { width: 40px; min-height: 40px; height: 40px; padding: 0; font-size: 22px; font-weight: 600; text-decoration: none; }
.stepper2 output { min-width: 34px; text-align: center; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-elev svg { display: block; max-width: 100%; height: auto; }
.sc-acts { display: flex; flex-direction: column; align-items: flex-start; }
.sc-acts .tbtn { padding-left: 0; }
.sc-exact > summary, .sc-codes > summary { min-height: 48px; padding: 0 10px; background: var(--band); display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 700; list-style: none; }
.sc-exact > summary::-webkit-details-marker, .sc-codes > summary::-webkit-details-marker { display: none; }
.sc-exact > summary::before, .sc-codes > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); margin: 0 3px 0 1px; transition: transform 0.12s; }
.sc-exact[open] > summary::before, .sc-codes[open] > summary::before { transform: rotate(45deg); }
.sc-exact > summary:hover, .sc-codes > summary:hover { text-decoration: underline; }
.xgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.xf { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--g1); }
.xf .seg2 button { min-height: 40px; }
.unitin2 { display: flex; align-items: center; height: 40px; border: 1px solid var(--line); padding: 0 8px; gap: 4px; background: var(--paper); }
.unitin2 input { border: 0; outline: none; width: 100%; min-width: 0; font-size: 16px; font-weight: 700; color: var(--ink); background: none; height: 100%; }
.unitin2 span { color: var(--g1); font-weight: 400; }
.unitin2:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pb-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; align-items: end; }
.pb-letter { text-transform: uppercase; font-family: var(--mono); font-size: 20px; text-align: center; }
.pb-code { margin: 0 0 12px; font-size: 14px; color: var(--soft); }
.pb-code b { font-family: var(--mono); font-size: 16px; color: var(--ink); }
.sc-hint { font-size: 14px; line-height: 1.45; color: var(--soft); }
/* step 5: the shelf's own code (in its colour square), its levels and bins (a code and a name each), what a save rewrote */
.sc-codein { padding: 0; }
.sc-codein input { width: 64px; height: 100%; border: 0; background: none; color: var(--paper); font: inherit; text-align: center; text-transform: uppercase; padding: 0 4px; border-radius: 0; }
.sc-codein input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.sc-codein:hover input { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.7); }
.sc-codes > summary { flex-wrap: wrap; row-gap: 0; padding-top: 6px; padding-bottom: 6px; }
.sc-codes > summary .muted { flex-basis: 100%; padding-left: 21px; font-weight: 600; font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.sc-codesin { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 4px; }
.sc-codesin .sc-hint { font-size: 13px; }
.cclist { display: flex; flex-direction: column; gap: 6px; }
.ccrow { display: grid; grid-template-columns: auto 64px minmax(0, 1fr); align-items: center; column-gap: 8px; }
.ccrow:not(:has(.ccsw)) { grid-template-columns: 64px minmax(0, 1fr); }
.ccrow .ccerr { grid-column: 1 / -1; margin: 2px 0 0; }
.ccsw { width: 14px; height: 30px; border: 1.2px solid var(--ink); }
.cccode { text-align: center; padding: 0 4px; }
span.cccode { display: flex; align-items: center; justify-content: center; height: 44px; font-weight: 600; border: 1px solid var(--line); background: var(--wash); }
.ccname { font-weight: 600; }
.ccname::placeholder { color: var(--g1); font-weight: 400; }
.pin[aria-invalid="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.sc-relabel { border: 1px solid var(--ink); border-left-width: 6px; padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; }
.sc-relabel p { margin: 0; }
.sc-tips { list-style: disc; padding-left: 18px; font-size: 14px; line-height: 1.45; color: var(--soft); display: flex; flex-direction: column; gap: 6px; }
.sc-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-pick > span { font-size: 13px; font-weight: 600; color: var(--g1); width: 100%; }
.chip2 { min-height: 40px; min-width: 44px; padding: 0 10px; border: 1px solid var(--line); background: var(--paper); font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.chip2:hover { border-color: var(--ink); }
.chip2[data-uc] { background: var(--uc); border-color: var(--uc); color: var(--paper); }
.chip2[data-uc]:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.sok { font-size: 14px; line-height: 1.4; color: var(--green-d); font-weight: 700; }
.sshop { display: flex; flex-direction: column; gap: 6px; }
.sshop-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px; background: var(--band); }
.sshop-h h2 { font-size: 16px; font-weight: 800; margin: 0; }
.sshop-h .muted { font-size: 13px; }
.sshop-list { display: flex; flex-direction: column; }
.srow { width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 60px; padding: 6px 4px 6px 6px; border: 0; border-bottom: 1px solid var(--line2); background: var(--paper); text-align: left; color: var(--ink); }
.srow:hover { background: var(--wash); }
.srow.on { box-shadow: inset 4px 0 0 var(--ink); background: var(--wash); }
.srow[data-uc] { box-shadow: inset 6px 0 0 var(--uc); padding-left: 14px; }
.srow.on[data-uc] { box-shadow: inset 6px 0 0 var(--uc), inset 9px 0 0 var(--ink); }
.srow svg { display: block; }
.srow .c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.srow .t { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .t .mono { font-size: 14px; margin-right: 2px; }
.srow .s { font-size: 13px; color: var(--g1); }
.sshop-none { padding: 8px 0; font-size: 14px; }
.sshop-add { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sshop-note { margin: 0; font-size: 13px; line-height: 1.4; }
/* the first day: no parts room yet (an empty database): its size and its door, with a drawing that follows */
.dsetup-new { height: 100%; overflow: auto; padding: 22px 28px 32px; }
.snew { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 440px); gap: 24px 40px; align-items: start; padding-top: 20px; }
.snew-form { display: flex; flex-direction: column; gap: 14px; }
.snew-h { font-size: 22px; font-weight: 800; margin: 0; }
.snew-p, .snew-hint { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.snew .xgrid { margin-bottom: 0; }
.snew .xf > span:first-child { font-size: 14px; }
.snew .seg2 button { min-height: 44px; }
.snew-go { align-self: flex-start; min-width: 240px; }
.snew-pic { border: 1px solid var(--line2); padding: 12px; background: var(--paper); }
.snew-pic svg { display: block; width: 100%; height: auto; }
/* Parts with no parts at all: what to do first */
.pnone { font-size: 16px; line-height: 1.5; }
.pnone-acts { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; }
.unone { padding: 18px 0; font-size: 16px; line-height: 1.5; max-width: 640px; }
.unone p { margin: 0; }
.sshop > .tbtn { align-self: flex-start; padding-left: 0; }
.scodes > summary { min-height: 48px; padding: 0 10px; background: var(--band); display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 800; list-style: none; }
.scodes > summary::-webkit-details-marker { display: none; }
.scodes > summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); margin-right: 4px; transition: transform 0.12s; }
.scodes[open] > summary::before { transform: rotate(45deg); }
.scodes > summary .muted { font-weight: 400; font-size: 13px; }
.scodes > summary:hover { text-decoration: underline; }
.scodes-in { padding: 0 0 12px; }
.ctable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ctable th { font-size: 13px; font-weight: 600; color: var(--g1); text-align: left; padding: 4px 0; border-bottom: 1px solid var(--line); }
.ctable td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line2); }
.ctable .num { text-align: right; padding-right: 0; }
.ctable td.muted { color: var(--g1); }
.cfoot { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--g1); }
.dmodal-bg { position: fixed; inset: 0; z-index: 69; background: var(--scrim); }
.dmodal { position: fixed; z-index: 70; left: 50%; top: 30%; transform: translateX(-50%); width: 460px; background: var(--paper); border: 1px solid var(--ink); padding: 22px 24px 18px; }
.dmodal h2 { font-size: 21px; font-weight: 800; margin: 0 0 8px; }
.dmodal p { font-size: 15px; line-height: 1.45; margin: 0 0 16px; color: var(--soft); }
.dmodal-b { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- PEOPLE */
.dpeople { height: 100%; overflow: auto; }
.dpeople .dmain { padding: 22px 28px 32px; max-width: 1180px; display: block; }
.ptable { width: 100%; border-collapse: collapse; margin-top: 16px; }
.ptable th { font-size: 13px; font-weight: 800; color: var(--ink); text-align: left; height: 34px; padding-left: 8px; background: var(--band); }
.ptable td:first-child { padding-left: 8px; }
.ptable td { border-bottom: 1px solid var(--line2); height: 64px; padding: 0 12px 0 0; font-size: 15px; }
.ptable td.nm { white-space: nowrap; }
.ptable td.nm b { font-size: 17px; font-weight: 800; }
.ptable .you { font-size: 13px; color: var(--g1); margin-left: 4px; }
.ptable td.acts { padding-right: 0; }
.ptable td:last-child { text-align: right; }
.abtns { display: inline-flex; gap: 2px; justify-content: flex-end; align-items: center; }
.note2 { font-size: 13px; color: var(--g1); line-height: 1.25; text-align: left; margin-left: 10px; max-width: 220px; }
.lockd { color: var(--red); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.actrow td { height: auto; padding: 0 0 14px; border-bottom: 1px solid var(--line2); text-align: left !important; }
.abox { padding: 16px 18px; background: var(--wash); display: flex; flex-direction: column; gap: 12px; }
.abox .dprow { margin-top: 0; }
.addbox { margin-top: 14px; }
.arow { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.arow > b { align-self: center; font-size: 15px; min-width: 130px; }
.arow .phint { align-self: center; max-width: 280px; }
.arow .dfield { display: flex; flex-direction: column; align-items: stretch; gap: 5px; height: auto; border: 0; padding: 0; background: none; }
.arow .dfield input { height: 44px; border: 1px solid var(--line); background: var(--paper); padding: 0 10px; font-size: 18px; font-weight: 800; width: 260px; flex: none; }
.arow .dfield input:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.arow .dfield.sm input { width: 130px; letter-spacing: 0.2em; }
.arow .segm { min-width: 330px; }
/* step 6: the column heads over a 2px ink rule (no band), like the other desk tables */
.ptable { margin-top: 24px; }
.ptable thead th { background: none; border-bottom: 2px solid var(--ink); height: 40px; }
/* step 6: the login column: the login in mono with a pencil, a button that opens "Login for …" under the row */
.ptable td.plogin { white-space: nowrap; }
.ptable .lgbtn { padding: 0 8px; margin-left: -8px; gap: 8px; font-weight: 600; color: var(--ink); }
.ptable .lgbtn .mono { font-size: 15px; }
.ptable .lgbtn svg { color: var(--ink-3); }
.ptable .lgbtn:hover svg, .ptable .lgbtn[aria-expanded="true"] svg { color: var(--ink); }
.ptable td.plogin > .mono { font-size: 15px; color: var(--ink-2); }
.arow .dfield.lgin input { font-family: var(--mono); font-weight: 600; letter-spacing: 0; }
.arow .dfield.lgin input[aria-invalid="true"] { border-color: var(--bad); }
.abox .lgrow { align-items: flex-end; }
.abox .arow > .perr { flex-basis: 100%; margin-top: 0; }      /* under the login field, not off to the right */
.cpe-login { display: flex; flex-direction: column; gap: 6px; }
.cpe-login .dfield { display: flex; flex-direction: column; gap: 5px; height: auto; border: 0; padding: 0; background: none; }
.cpe-login .dfield input { height: 48px; border: 1px solid var(--field); border-radius: var(--rc); padding: 0 12px; font-family: var(--mono); font-size: 18px; font-weight: 600; background: var(--paper); width: 100%; }
.cpe-login .dfield input[aria-invalid="true"] { border-color: var(--bad); }
.cpe-login .perr { margin-top: 0; }
.arow .dfield:focus-within, .cpe-login .dfield:focus-within, .msheet-people .dfield:focus-within { box-shadow: none; }     /* the input shows the focus, not its label */
.ptable tbody.gone tr.sep th { text-align: left; color: var(--ink); padding: 26px 0 8px; border-bottom: 1px solid var(--line); height: auto; font-size: 18px; text-transform: none; letter-spacing: 0; background: none; }
.ptable tbody.gone tr.sep b { font-weight: 800; }
.ptable tbody.gone tr.sep .muted { font-size: 13px; font-weight: 400; margin-left: 8px; }
.pnotes { font-size: 13px; color: var(--g1); margin: 14px 0 0; line-height: 1.5; }
.wcdw { margin-top: 18px; }
.wcdw > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font-size: 15px; font-weight: 700; list-style: none; text-decoration: underline; text-decoration-color: var(--hover); text-underline-offset: 4px; }
.wcdw > summary::-webkit-details-marker { display: none; }
.wcdw > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); margin: 0 3px 0 1px; transition: transform 0.12s; }
.wcdw[open] > summary::before { transform: rotate(45deg); }
.wcdw-in { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 360px); gap: 32px; align-items: start; padding-top: 6px; }
.wcdw-notes p { font-size: 14px; line-height: 1.5; color: var(--soft); margin: 0 0 10px; }
.mtable { width: 100%; border-collapse: collapse; }
.mtable thead th { width: 96px; padding: 0 0 6px; text-align: center; vertical-align: bottom; font-size: 13px; font-weight: 600; color: var(--g1); border-bottom: 1px solid var(--line); }
.mtable thead th:first-child { width: auto; }
.mtable tbody th { text-align: left; font-size: 14px; font-weight: 600; padding: 0 8px 0 0; }
.mtable tbody tr { border-bottom: 1px solid var(--line2); height: 36px; }
.mtable td { text-align: center; color: var(--g1); }

/* ---------------------------------------------------------------- QR labels: print view */
.printview { position: fixed; inset: 0; z-index: 60; background: var(--print-bg); overflow: auto; }
.pv-bar { position: sticky; top: 0; z-index: 1; background: var(--paper); border-bottom: 1px solid var(--ink); display: flex; align-items: center; gap: 14px; padding: 8px 24px; }
.pv-bar h2 { font-size: 18px; font-weight: 800; margin: 0; }
.pv-bar .muted { font-size: 14px; flex: 1; }
.pv-sheets { padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.sheet { width: 8.5in; height: 11in; padding: 0.5in 0.25in; background: var(--paper); border: 1px solid var(--sheet-line); display: grid; grid-template-columns: repeat(4, 2in); grid-auto-rows: 2in; align-content: start; flex-shrink: 0; }
.qlabel { width: 2in; height: 2in; padding: 0 0.09in 0.06in; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); outline: 1px dashed var(--sheet-line); outline-offset: -1px; color: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.qlabel .band { display: block; height: 0.17in; margin: 0 -0.09in; border-bottom: 1.5px solid var(--ink); flex-shrink: 0; }
.qlabel .band.none { background: var(--paper); }
.qlabel .code { display: block; font-size: 0.4in; font-weight: 800; line-height: 1; margin: 0.07in 0 0.05in; white-space: nowrap; letter-spacing: -0.01em; }
.qlabel .code.long { font-size: 0.31in; }
.qlabel .code.nobin { font-size: 0.26in; margin-top: 0.1in; }
.qlabel .code.xlong { font-size: 0.24in; }
.qlabel .code.xxlong { font-size: 0.2in; }
/* step 5: the level and bin names, small under the code (two lines at most, so the QR code keeps its size) */
.qlabel .code.named { margin-bottom: 0.02in; }
.qlabel .lnames { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.08in; font-weight: 700; line-height: 1.12; margin-bottom: 0.03in; flex-shrink: 0; overflow-wrap: anywhere; }
.qlabel .bottom { display: flex; gap: 0.06in; align-items: flex-start; }
.qlabel .qr { width: 1.02in; height: 1.02in; flex-shrink: 0; margin-left: -0.05in; }
.qlabel .txt { display: flex; flex-direction: column; min-width: 0; padding-top: 0.05in; }
.qlabel .brand { font-family: var(--mono); font-size: 0.1in; font-weight: 600; line-height: 1.2; }
.qlabel .num { font-size: 0.14in; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.qlabel .num.long { font-size: 0.11in; }
.qlabel .nm { font-size: 0.095in; line-height: 1.2; margin-top: 0.03in; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

@media print {
  @page { size: letter; margin: 0; }
  html, body { background: var(--paper) !important; min-width: 0 !important; }
  body.printing #app, body.printing #nav, body.printing #toast { display: none !important; }
  body.printing .printview { position: static; overflow: visible; background: none; }
  body.printing .pv-bar { display: none; }
  body.printing .pv-sheets { padding: 0; gap: 0; display: block; }
  body.printing .sheet { border: 0; margin: 0; break-after: page; page-break-after: always; }
  body.printing .sheet:last-child { break-after: auto; page-break-after: auto; }
  body.printing .qlabel { outline: 0; }
}

@media (max-width: 1360px) {
  .dparts.has-panel { grid-template-columns: minmax(0, 1fr) 430px; }
  .dsetup { grid-template-columns: minmax(0, 1fr) 300px; }
  .dtable .c-qty { width: 150px; }
}

/* Every scrolling area is the positioning box for what is inside it, so nothing (like the hidden screen-reader
   labels) can escape it and stretch the page: one scrollbar per area, never a second one for the whole page. */
.tablewrap, .pscroll, .sside, .dpeople, .dp-scroll, .dunit-side, .picker { position: relative; }

/* ================================================================ compact: phone layout
   Below 1024px wide (the same test as isCompact() in js/ui.js) every page uses the phone frame: a sticky top bar with
   the page title and the menu (≡), a bottom nav, pages that scroll as the whole document (no inner scrollers, no
   fixed heights), and full-screen sheets (.msheet) in place of side panels. Inputs 16px or more (no zoom on an
   iPhone), targets 48px or more, safe areas for the notch and the home bar. The nav, the drawer and the sheets below
   are for every width; the layout overrides are in the media query. */

/* ---- the bottom nav: an icon over a word; where you are is a solid green block (like the desk side menu) */
.nav.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nav a { position: relative; flex-direction: column; gap: 3px; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; padding: 6px 2px 0; min-width: 0; }
.nav.n4 a { font-size: 13px; letter-spacing: 0.03em; }
.nav a .t { white-space: nowrap; line-height: 1.1; }
.nav a .sico { flex: none; }
.nav a:active { background: var(--g4); }
.nav a[aria-current="page"] { background: var(--green); color: #FFFFFF; }
/* counts are square: ink with white in the bottom nav, white with ink on the dark menu (amber, red and blue are status) */
.cbadge { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 22px; height: 21px; padding: 1px 6px 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #FFFFFF; font-size: 13px; font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums; line-height: 1; }
.nav a[aria-current="page"] .cbadge { box-shadow: 0 0 0 1.5px #FFFFFF; }
.mdrawer .navi .nbadge, .mdrawer .navi .nbadge[data-badge="review"], .mdrawer .navi[aria-current="page"] .nbadge { background: #FFFFFF; color: var(--ink); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line); }

/* ---- the menu (≡): a dark drawer from the right, over a dark backdrop */
html.layer-open, html.layer-open body { overflow: hidden; }
.mdrawer-wrap { position: fixed; inset: 0; z-index: 46; }
.mdrawer-scrim { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; background: rgba(10, 10, 10, 0.5); cursor: default; touch-action: none; animation: mfade 0.16s ease-out; }
.mdrawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: var(--side); color: var(--ink); display: flex; flex-direction: column; box-shadow: var(--shadow);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) 0; overflow-y: auto; overscroll-behavior: contain; animation: mdrawer-in 0.18s ease-out; }
@keyframes mdrawer-in { from { transform: translateX(100%); } }
@keyframes mfade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mdrawer, .mdrawer-scrim { animation: none; } }
.mdrawer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px 4px 0 20px; }
.mdrawer-brand { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.mdrawer-brand .brand { font-size: 13px; font-weight: 700; color: var(--ink-2); line-height: 1.2; }
.mdrawer-brand h2 { font-size: 20px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.1; color: var(--ink); }
.mdrawer-x { width: 48px; height: 48px; flex: none; border: 0; background: none; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--ink); border-radius: var(--rc); }
.mdrawer-x:hover, .mdrawer-x:active { background: var(--side-hover); }
.mdrawer-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.mdrawer .navi { min-height: 52px; height: auto; font-size: 17px; }
.mdrawer-foot { margin-top: auto; padding: 18px 20px 16px; border-top: 1px solid var(--line2); display: flex; flex-direction: column; gap: 10px; }
.mdrawer-foot .who { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; flex-wrap: wrap; }
.mdrawer-foot .tag { border-color: var(--ink-2); color: var(--ink-2); border-radius: var(--rc); }
.mdrawer-foot .note { margin: 0; min-height: 0; padding: 0; background: none; font-size: 14px; color: var(--ink-2); }
.mdrawer-foot .mbtn { min-height: 48px; width: 100%; border: 1px solid var(--field); border-radius: var(--rc); background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; }
.mdrawer-foot .mbtn:hover, .mdrawer-foot .mbtn:active { border-color: var(--ink-3); background: var(--surface-2); }
.mdrawer-foot .build { font-size: 13px; color: var(--ink-3); margin: 2px 0 0; }
.mdrawer :focus-visible { outline-color: var(--focus); outline-offset: -3px; }
/* step 6: on the desk the name opens a small card beside the foot of the side menu (the side menu already lists the pages) */
.mdrawer-wrap.dpop .mdrawer-scrim { background: transparent; animation: none; }
.mdrawer-wrap.dpop .mdrawer { top: auto; right: auto; left: 228px; bottom: 16px; width: 300px; height: auto; padding: 14px 16px 12px; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); animation: none; overflow: visible; }
.dpop-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dpop-who { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; min-width: 0; }
.dpop-who h2 { font-size: 18px; font-weight: 800; line-height: 1.2; }
.dpop-who > span { font-size: 14px; color: var(--ink-2); }
.dpop .mdrawer-x { width: 40px; height: 40px; margin: -4px -6px 0 0; }
.dpop .note { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.dpop .mbtn { min-height: 44px; width: 100%; border: 1px solid var(--field); border-radius: var(--rc); background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.dpop .mbtn:hover { border-color: var(--ink-3); background: var(--surface-2); }
.dpop .build { margin: 0; font-size: 13px; color: var(--ink-3); }

/* ---- a full-screen sheet: Back and the title on top, the body scrolls, the buttons stay at the bottom */
.msheet { position: fixed; inset: 0; z-index: 44; background: var(--paper); display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
.msheet-bar { flex: none; display: flex; align-items: center; gap: 4px; min-height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0 4px; border-bottom: 4px solid var(--green); background: var(--paper); }
.msheet-back { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--ink); padding: 0; }
.msheet-back:hover, .msheet-back:active { background: var(--g4); }
.msheet-bar h2 { flex: 1; min-width: 0; font-size: 20px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msheet-body { flex: 1; min-height: 0; position: relative; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px max(16px, calc((100% - 600px) / 2)) 28px; }
.msheet-foot { flex: none; display: flex; gap: 8px; align-items: center; padding: 8px max(16px, calc((100% - 600px) / 2)) calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--ink); background: var(--paper); }
/* on a tablet the sheet's content is a 600px column in the middle (the bar and the foot's line stay full width) */
.msheet-foot > .dgo, .msheet-foot > .go, .msheet-foot > .grow1 { flex: 1; }
.msheet-foot .dgo, .msheet-foot .dbtn, .msheet-foot .tbtn { min-height: 52px; }
.msheet-foot .muted { font-size: 14px; }

@media (max-width: 1023.98px) {
  /* the frame: the page scrolls as the document; the top bar sticks; nothing sits under the notch */
  body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .app { padding-top: 0; }
  #hdr { position: sticky; top: 0; z-index: 15; background: var(--paper); padding-top: env(safe-area-inset-top, 0px); }
  #nav { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  #toast { z-index: 48; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); }
  body.desk { min-width: 0; overflow-x: hidden; }
  body.desk #hdr { position: sticky; top: 0; left: auto; bottom: auto; width: auto; z-index: 15; background: var(--paper); }
  body.desk #view { margin-left: 0; height: auto; overflow: visible; padding-bottom: calc(var(--nav-h) + var(--safe-b) + var(--toast-h) + 24px); }
  body.desk #nav { left: 0; right: 0; bottom: 0; width: auto; height: auto; z-index: 20; background: var(--paper); }
  body.desk #toast { left: 8px; right: 8px; width: auto; bottom: calc(var(--nav-h) + var(--safe-b) + 8px); }
  .hdr.ctop { padding-left: 16px; }
  .hdr.ctop .back { gap: 8px; margin-left: -6px; padding-left: 6px; }
  .hdr .doff { white-space: nowrap; }

  /* touch sizes on the desk pages: 48px targets, 16px text in fields */
  .dbtn, .segm button, .seg2 button, .pchk, .sc-row .seg2 button, .xf .seg2 button { min-height: 48px; }
  .pin { height: 48px; font-size: 16px; }
  textarea.pin { height: auto; font-size: 16px; }
  .dsel { font-size: 16px; }
  .unitin2 { height: 48px; }
  .stepper2 .tbtn.sq { width: 48px; height: 48px; min-height: 48px; }
  .uchip { height: 48px; }
  .uchip button { width: 46px; height: 46px; }
  .flbl { font-size: 14px; }
  .phint, .muted.small, .ferr { font-size: 14px; }
  /* the app's question boxes: flush with the bottom over a dark backdrop that covers the nav and any sheet's foot */
  .dmodal { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; border: 0; border-top: 2px solid var(--ink); padding: 20px 16px calc(16px + var(--safe-b)); }
  .dmodal-bg { background: rgba(10, 10, 10, 0.55); }
  .dnext { padding: 20px 16px; }
  .dsetup-new { height: auto; padding: 0 0 24px; }
  .snew { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px 16px 0; }
  .snew .seg2 button, .snew .unitin2 { min-height: 48px; }
  .snew-go { align-self: stretch; min-width: 0; }
  .pnone-acts > * { flex: 1 1 100%; justify-content: center; }
  .dnext h2 { font-size: 26px; }
  .pv-bar { flex-wrap: wrap; gap: 8px 12px; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; }
  .pv-bar .muted { flex-basis: 100%; order: 3; }
  .pv-sheets { padding: 16px; align-items: flex-start; }
}
/* ---- end compact: phone layout (shared frame) */

/* ---- compact: Setup on a phone. The note, the tools in two rows (SAVE under them), the plan the width of the phone
   (touch dragging on the plan only), then the room card, In the shop and the codes. A tapped shelf opens its card as a
   full-screen sheet (.msheet-scard). */
.msheet-scard .msheet-body { padding: 16px 16px 28px; }
.msheet-scard .msheet-foot .dbtn { flex: none; min-height: 52px; padding: 0 18px; }
.msheet-scard .msheet-foot .dgo { flex: 1; min-height: 52px; }
.msheet-scard .sc-row .seg2 { min-width: 150px; }
.msheet-scard .sc-name { font-size: 20px; height: 48px; }
.msheet-scard .sc-sub { font-size: 14px; }
.msheet-scard .sc-row small { font-size: 14px; }
.msheet-scard .xf { font-size: 14px; }
.msheet-scard .sc-acts .tbtn { min-height: 48px; }
.msheet-scard .pb-row { grid-template-columns: 88px minmax(0, 1fr); }
.msheet-scard .sc-code { min-width: 48px; height: 48px; }
.msheet-scard .ccrow { grid-template-columns: auto 72px minmax(0, 1fr); }
.msheet-scard .ccrow:not(:has(.ccsw)) { grid-template-columns: 72px minmax(0, 1fr); }
.msheet-scard span.cccode { height: 48px; }
.msheet-scard .sc-relabel .dbtn { min-height: 48px; }
@media (max-width: 1023.98px) {
  .csetup { display: block; height: auto; }
  .cs-note { margin: 0; padding: 10px 16px; background: var(--band); font-size: 15px; line-height: 1.35; color: var(--soft); border-bottom: 1px solid var(--line2); }
  .csetup .smain { display: block; }
  .csetup .stool { height: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2px; padding: 4px 8px 10px; }
  .csetup .stool .tbtn { flex-direction: column; gap: 3px; min-height: 58px; padding: 4px 2px 2px; font-size: 13.5px; line-height: 1.1; white-space: normal; text-align: center; text-decoration: none; }
  .csetup .stool .tsep, .csetup .shint { display: none; }
  .csetup .stool .dgo { grid-column: 1 / -1; height: 52px; margin-top: 4px; }
  .csetup .splan { flex: none; min-height: 0; }
  .csetup .sside { border-left: 0; overflow: visible; padding: 18px 16px 24px; gap: 24px; }
  .csetup .sc-tips { font-size: 15px; }
  .csetup .sc-pick > span { font-size: 14px; }
  .csetup .chip2 { min-height: 48px; min-width: 52px; font-size: 15px; }
  .csetup .srow { min-height: 64px; }
  .csetup .srow .s { font-size: 14px; }
  .csetup .scodes > summary { min-height: 52px; }
  .csetup .ctable, .csetup .cfoot { font-size: 14px; }
}

/* ---- compact: People on a phone. Cards (name, role, PIN state, last active); a card opens the person's sheet with
   the actions, ADD PERSON a sheet with the form (.msheet-people). */
.msheet-people .cpe-who { margin: 0 0 18px; border-top: 1px solid var(--line2); }
.msheet-people .cpe-who > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line2); font-size: 16px; }
.msheet-people .cpe-who dt { color: var(--g1); font-weight: 600; }
.msheet-people .cpe-who dd { margin: 0; font-weight: 700; text-align: right; }
.msheet-people .cpe-acts { display: flex; flex-direction: column; gap: 8px; }
.msheet-people .cpe-acts .dbtn { min-height: 52px; font-size: 16px; justify-content: flex-start; padding: 0 16px; }
.msheet-people .cpe-acts .phint { margin-top: 4px; }
.msheet-people .cpe-form { display: flex; flex-direction: column; gap: 16px; }
.msheet-people .arow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 10px; align-items: end; }
.msheet-people .arow > b, .msheet-people .arow > span, .msheet-people .arow > .segm, .msheet-people .arow > .phint { grid-column: 1 / -1; }
.msheet-people .arow > b { font-size: 18px; min-width: 0; }
.msheet-people .arow > span { font-size: 15px; line-height: 1.4; }
.msheet-people .cpe-pins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.msheet-people .cpe-pins .phint { grid-column: 1 / -1; }
.msheet-people .dfield { display: flex; flex-direction: column; align-items: stretch; gap: 5px; height: auto; border: 0; padding: 0; background: none; box-shadow: none; }
.msheet-people .dfield input { width: 100%; height: 52px; border: 1px solid var(--line); background: var(--paper); padding: 0 12px; font-size: 18px; font-weight: 800; flex: none; }
.msheet-people .dfield input:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.msheet-people .dfield.sm input { letter-spacing: 0.2em; }
.msheet-people .xf .segm { margin-top: 2px; }
.msheet-people .segm button { min-height: 52px; font-size: 15px; padding: 0 6px; }
.msheet-people .phint { font-size: 14px; }
.msheet-people .msheet-foot .dbtn { flex: none; min-height: 52px; padding: 0 18px; }
.msheet-people .msheet-foot .dgo { flex: 1; min-height: 52px; }
@media (max-width: 1023.98px) {
  .cpeople { height: auto; overflow: visible; }
  .cpeople .dmain { padding: 14px 16px 24px; max-width: none; }
  .cpe-sum { font-size: 15px; color: var(--soft); line-height: 1.4; }
  .cpe-sum b { color: var(--ink); }
  .cpe-add { width: 100%; height: 52px; margin-top: 12px; }
  .pecards { margin: 16px -16px 0; border-top: 1px solid var(--line); }
  .pecard { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 80px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line2); background: var(--paper); color: var(--ink); text-align: left; }
  .pecard:active { background: var(--wash); }
  .pecard .c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .pecard .t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pecard .t b { font-size: 18px; font-weight: 800; }
  .pecard .you { font-size: 14px; color: var(--g1); }
  .pecard .s { font-size: 14px; color: var(--soft); }
  .pecard.locked { box-shadow: inset 6px 0 0 var(--red); }
  .pecard .chev { flex: none; color: var(--g1); }
  .pegone { margin-top: 26px; }
  .pegone h2 { font-size: 17px; font-weight: 800; padding: 9px 10px; background: var(--band); margin: 0 -16px; padding-left: 16px; }
  .pegone > p { font-size: 14px; margin: 8px 0 4px; }
  .pegone li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; border-bottom: 1px solid var(--line2); }
  .pegone li .c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pegone li .muted { font-size: 14px; }
  .cpeople .pnotes { font-size: 14px; }
  .cpeople .wcdw-in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cpeople .mtable thead th { width: 64px; font-size: 13px; }
  .cpeople .mtable tbody th { font-size: 14px; padding: 8px 8px 8px 0; }
  .cpeople .wcdw-notes p { font-size: 15px; }
}
.msheet-people .arow .dfield input, .msheet-people .arow .dfield.sm input { width: 100%; }
.msheet-people .arow .phint { max-width: none; align-self: start; }

/* ---- compact: the scanner with no live camera (a plain http address, no camera, or the camera refused): a photo of
   the label, read in the app. Also "Hard to scan? Take a photo of the label" under the typed number. */
.scan .sph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px 20px 96px; text-align: center; }
.sphoto { position: relative; min-height: 64px; width: min(100%, 380px); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; background: var(--paper); color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; }
.sphoto:active { background: var(--g4); }
.sphoto:focus-within { outline: 3px solid var(--paper); outline-offset: 3px; }
.sph-why { max-width: 360px; font-size: 16px; line-height: 1.45; color: var(--paper); }
.sph-why:empty { display: none; }
.sphoto2 { position: relative; display: flex; align-items: center; min-height: 48px; margin-top: 6px; padding: 0; cursor: pointer; }
.sphoto2:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.scan .msg[hidden] { display: none; }

/* ---- compact: print views from a phone. On screen the pages shrink to the screen's width (--pvz, js/ui.js); printing
   (iOS too) is actual size, without the sheets or the menu over it. */
@media screen and (max-width: 1023.98px) {
  .pv-sheets > .sheet, .pv-sheets > .osheet { zoom: var(--pvz, 1); }
  .pv-sheets { align-items: center; }
  .pv-bar .dgo { flex: 1; }
}
@media print {
  html.layer-open, html.layer-open body { overflow: visible !important; height: auto !important; }
  body.printing .msheet, body.printing .mdrawer-wrap { display: none !important; }
}

/* ---- the desk (1024px and up): Find, a part, Take, Charge to and My pulls inside the desk frame. The side menu lists
   them under the desk pages; the page's own bar and body sit in a 640px column that scrolls by itself. */
.dnav2 { display: flex; flex-direction: column; gap: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line2); }
.dphone .dph-scroll { position: relative; height: 100%; overflow: auto; background: var(--band); }
.dphone .dph-col { max-width: 640px; min-height: 100%; margin: 0 auto; background: var(--paper); border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding-bottom: 48px; }
.dphone .dph-bar { position: sticky; top: 0; z-index: 3; background: var(--paper); }
body.desk #view.dphone { display: block; min-height: 0; }
.dphone .dph-bar .tagbtn { display: none; }      /* the desk has its own menu: no second one inside the column */
/* the part page's back arrow, before the job */
/* step 6: the part page's back arrow carries the page title, like the other sub-pages (the job is a row below) */
.hdr .hback { flex: 0 1 auto; min-width: 0; }

/* ---- Setup on a narrower desk (1024 to 1279px): the tools on one row, SAVE across the drawing column under them, so
   "SAVE 12 CHANGES" never runs under the side card */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .dsetup .stool { flex-wrap: wrap; height: auto; row-gap: 6px; padding: 6px 16px 8px 18px; }
  .dsetup .shint { display: none; }
  .dsetup .stool .dgo { flex: 1 0 100%; }
}

/* ---- the Parts search with a unit number: the unit's parts by category, folded (js/unit-parts.js) */
.p-unit { padding: 6px 2px 28px; max-width: 760px; }
.p-unit[hidden], #ptable[hidden], #pcards[hidden], #qviews[hidden], #p-total2[hidden] { display: none !important; }