/* Inter (variable, Latin subset, weights 100-900), served locally so the app works without internet (OFL, see fonts/OFL.txt) */
@font-face{font-family:Inter;font-weight:100 900;font-style:normal;font-display:swap;src:url(/static/fonts/inter-latin.woff2) format("woff2")}
/* Tokens. Dark is the default. Light is the [data-theme=light] block, repeated for "system" when the OS is light,
   because CSS cannot share one rule between a selector and a media query; the tests keep both copies identical. */
:root{
  --top-h:60px;   /* the sticky header's height, measured by core.js (fitTop) */
  /* Material 3 roles on Verkly's own palette (owner, 2026-10-16: keep the grey-blue base): the neutral surfaces
     are the grey-blue ones from before, the primary is the workshop's amber. The old names keep working and
     carry the M3 roles: --bg surface, --panel surface-container-low, --ink on-surface, --muted
     on-surface-variant, --line outline-variant, --field outline, --accent primary. */
  color-scheme:dark;
  --bg:#12171A; --panel:#1C2429; --ink:#E3E8EA; --muted:#93A0A6; --line:#2B3840; --field:#5C6C74;
  --accent:#E09A2B; --accent-ink:#241A06; --accent-text:#E8A93F;
  --tape-bg:#F3F3EC; --tape-ink:#15181A;
  --ok:#5DBB8E; --on-ok:#0B2418; --bad:#E07A68; --on-bad:#161C1F;
  --ok-bg:#254036; --ok-ink:#86D9AF; --warn-bg:#43361C; --warn-ink:#F0BC63;
  --bad-bg:#472925; --bad-ink:#F0A090; --info-bg:#1F3550; --info-ink:#8DBCF0; --mute-bg:#2B353B; --mute-ink:#A9B6BC;
  --card-border:#2B3840; --card-shadow:none;
  --md-primary-container:#4A3410; --md-on-primary-container:#FBDDB0;
  --md-secondary-container:#2C3E48; --md-on-secondary-container:#CFE4EF;
  --md-surface-lowest:#0E1316; --md-surface-container:#161C20; --md-surface-high:#242F35; --md-surface-highest:#2B353B;
  --md-inverse-surface:#E3E8EA; --md-inverse-on-surface:#1F272B; --md-inverse-primary:#8A5300;
  --md-scrim:rgba(0,0,0,.55);
  /* shape, type and motion scales of M3 */
  --shape-xs:4px; --shape-s:8px; --shape-m:12px; --shape-l:16px; --shape-xl:28px; --shape-full:999px;
  --ease:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.05,.7,.1,1); --dur:200ms;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#EDF0F2; --panel:#FFFFFF; --ink:#1C262B; --muted:#5D6A71; --line:#DCE2E5; --field:#8A979E;
  --accent:#E09A2B; --accent-ink:#241A06; --accent-text:#8A5300;
  --tape-bg:#15181A; --tape-ink:#F6F6F0;
  --ok:#2F7A58; --on-ok:#FFFFFF; --bad:#B0412F; --on-bad:#FFFFFF;
  --ok-bg:#D9EFE4; --ok-ink:#1C5E41; --warn-bg:#FBEACB; --warn-ink:#7A4B04;
  --bad-bg:#F8DCD6; --bad-ink:#8A2C1C; --info-bg:#DCEAF9; --info-ink:#1D4C83; --mute-bg:#E4E9EC; --mute-ink:#46535A;
  --card-border:#D5DCE0; --card-shadow:none;
  --md-primary-container:#FBEACB; --md-on-primary-container:#7A4B04;
  --md-secondary-container:#D3E3EC; --md-on-secondary-container:#1B3340;
  --md-surface-lowest:#FFFFFF; --md-surface-container:#E5EAED; --md-surface-high:#DFE5E8; --md-surface-highest:#D8DFE3;
  --md-inverse-surface:#2B353B; --md-inverse-on-surface:#EDF0F2; --md-inverse-primary:#E8A93F;
  --md-scrim:rgba(0,0,0,.32);
}
@media (prefers-color-scheme:light){
  :root[data-theme="system"]{
    color-scheme:light;
    --bg:#EDF0F2; --panel:#FFFFFF; --ink:#1C262B; --muted:#5D6A71; --line:#DCE2E5; --field:#8A979E;
    --accent:#E09A2B; --accent-ink:#241A06; --accent-text:#8A5300;
    --tape-bg:#15181A; --tape-ink:#F6F6F0;
    --ok:#2F7A58; --on-ok:#FFFFFF; --bad:#B0412F; --on-bad:#FFFFFF;
    --ok-bg:#D9EFE4; --ok-ink:#1C5E41; --warn-bg:#FBEACB; --warn-ink:#7A4B04;
    --bad-bg:#F8DCD6; --bad-ink:#8A2C1C; --info-bg:#DCEAF9; --info-ink:#1D4C83; --mute-bg:#E4E9EC; --mute-ink:#46535A;
    --card-border:#D5DCE0; --card-shadow:none;
    --md-primary-container:#FBEACB; --md-on-primary-container:#7A4B04;
    --md-secondary-container:#D3E3EC; --md-on-secondary-container:#1B3340;
    --md-surface-lowest:#FFFFFF; --md-surface-container:#E5EAED; --md-surface-high:#DFE5E8; --md-surface-highest:#D8DFE3;
    --md-inverse-surface:#2B353B; --md-inverse-on-surface:#EDF0F2; --md-inverse-primary:#E8A93F;
    --md-scrim:rgba(0,0,0,.32);
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* a class that sets display (form.grid, .bar) must not override hidden */
html{-webkit-text-size-adjust:100%;touch-action:manipulation}   /* no double-tap zoom on a quick second tap; pinch still zooms */
/* The page never pans sideways on a phone. `clip`, not `hidden`: hidden would make body a scroll container and
   unstick the sticky header. Wide things (a drawer map, a table) scroll inside their own wrapper. */
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);accent-color:var(--accent);
  font:16px/1.45 Inter, system-ui, sans-serif;
  padding-bottom:calc(76px + env(safe-area-inset-bottom))}
a{color:inherit}
h1{font-size:28px;line-height:1.15;margin:.3rem 0 0;font-weight:700;letter-spacing:-.01em}
h2{font-size:17px;line-height:1.3;margin:0 0 .75rem;font-weight:600}
small{font-size:13px}
small,.muted{color:var(--muted)}
.page-sub{margin:.3rem 0 0;color:var(--muted);font-size:14px}
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.top{position:sticky;top:0;z-index:15;display:flex;gap:10px;align-items:center;
  padding:calc(8px + env(safe-area-inset-top)) 16px 8px;
  background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:1.25rem;text-decoration:none;letter-spacing:-.01em;display:inline-flex;align-items:center;min-width:0}
.brand-logo{height:22px;width:22px;object-fit:contain;border-radius:3px;margin-right:7px;flex:none}
.has-logo .brand-logo{height:28px;width:auto;max-width:120px;border-radius:0}
.brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:11em}
@media (max-width:599px){.brand .brand-name{max-width:5em}.brand.has-logo .brand-name{display:none}.top form{min-width:6.5em}}
.top form{flex:1;display:flex;justify-content:flex-end}
.top input{width:min(260px,100%);background:var(--bg);color:var(--ink);border:1px solid var(--field);
  border-radius:999px;padding:8px 14px;font:500 14px var(--mono)}
.top input::placeholder{color:var(--muted)}
#jumpHits{position:absolute;left:12px;right:12px;top:100%;margin-top:4px;z-index:30;background:var(--panel);
  border:1px solid var(--card-border);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.35);max-height:65vh;overflow:auto}
#jumpHits .hit{display:flex;flex-direction:column;gap:2px;padding:10px 14px;color:var(--ink);text-decoration:none;
  border-top:1px solid var(--card-border);min-height:44px;justify-content:center}
#jumpHits .hit:first-child{border-top:0}
#jumpHits .hit small{color:var(--muted);overflow-wrap:anywhere}
#jumpHits .hit .kind{font-size:12px;color:var(--accent-text);text-transform:uppercase;letter-spacing:.04em}
#jumpHits .hit.all{color:var(--accent-text);font-weight:600}
#jumpHits .none{padding:12px 14px;color:var(--muted)}
/* On a phone the code box is narrow; while it has focus it takes the whole header (the brand, theme and printer
   step aside, the scan button stays) and shows the long hint. It shrinks back when it loses focus. */
@media (max-width:899px){
  /* the search field's own focus, not the header's: a tap on a header button focuses that button */
  .top:has(#jump input:focus) :is(.brand,#themeBtn,a[href="#/printer"],.lang-menu){display:none}
  .top:has(#jump input:focus) input{width:100%}
  .lang-code{display:none}
}

main{max-width:760px;margin:0 auto;padding:16px}
section,.rows,.tile,.figs>div{background:var(--panel);border:1px solid var(--card-border);border-radius:12px;box-shadow:var(--card-shadow)}
section{padding:20px;margin:0 0 16px}
section.head{background:none;border:0;box-shadow:none;padding:4px 0 8px}

/* One nav, two layouts: a bottom bar on phones (four main tabs + More, which opens the other seven as a sheet
   above the bar) and, from 900 px, a fixed sidebar with all eleven. Icons come from the inline sprite. */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(60,minmax(0,1fr));
  background:var(--panel);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
.tabs a,.tabs .tab-more{order:20;grid-column:span 12;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-height:52px;padding:6px 2px;border:0;border-radius:12px;background:none;color:var(--muted);cursor:pointer;
  font:600 10px/1.2 Inter, system-ui, sans-serif;letter-spacing:.01em;text-decoration:none}
.tabs a.tab-extra{order:10;grid-column:span 15;display:none}
/* The More sheet: two full rows of four, most used first (the sidebar keeps the DOM order). The bar's first tab
   always starts a new row, so a short last row of the sheet can never pull Home up into it. */
.tabs a[data-tab=stats]{order:1} .tabs a[data-tab=exp]{order:2} .tabs a[data-tab=jrnl]{order:3}
.tabs a[data-tab=diag]{order:4} .tabs a[data-tab=data]{order:5} .tabs a[data-tab=cal]{order:6}
.tabs a.tab-sub{display:none}   /* Stock's own pages: the sidebar lists them under Stock, the phone has the strip */
.tabs a.tab-main[data-tab=home]{grid-column:1 / span 12}
/* While the sheet is open, the bar keeps its top line: a full-width divider sits between the sheet and the bar
   (a grid item of its own, ordered after the sheet entries and before the bar). */
.tabs::before{content:"";display:none;order:15;grid-column:1 / -1;height:1px;margin:4px -4px;background:var(--line)}
.tabs.open::before{display:block}
.tabs.open a.tab-extra{display:flex}
.tabs.open{box-shadow:0 -12px 32px rgba(0,0,0,.35)}
.tabs a.on,.tabs .tab-more.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text)}
.tabs .side-brand{display:none}

.tape{display:inline-block;font:600 14px/1 var(--mono);background:var(--tape-bg);color:var(--tape-ink);
  padding:7px 9px;border-radius:4px;white-space:nowrap}
.head .tape{font-size:18px;padding:9px 12px}

.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.bi-order{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;border-top:1px solid var(--field);padding:6px 0}
.bi-box{display:flex;justify-content:center;padding-top:6px}
.bi-box input{width:22px;height:22px;margin:0}
.bi-main{min-width:0;overflow-x:auto}
.page-head{align-items:flex-start;margin-bottom:16px}
.page-head h1{margin:0}
.page-head>div:first-child{flex:1 1 180px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:2px}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;
  padding:6px 14px;font-family:inherit;font-weight:500;font-size:14px;white-space:nowrap;cursor:pointer}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip small{color:inherit;opacity:.6}

.rows{list-style:none;margin:0;padding:0;overflow:hidden}
.rows li+li{border-top:1px solid var(--line)}
.row{display:flex;gap:12px;align-items:center;padding:14px 16px;text-decoration:none}
.row:focus-visible{outline-offset:-3px}
.row .main{flex:1;min-width:0;display:flex;flex-direction:column}
.row .main b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.row .main small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.row .side b{white-space:nowrap}
.row .side small{white-space:nowrap}
/* A list inside a card is not a card in a card: drop its frame, keep the hairlines between rows. */
section .rows{background:none;border:0;border-radius:0;box-shadow:none}
section .row{padding-left:0;padding-right:0}
.pos{color:var(--ok)} .neg{color:var(--bad)}

/* Status capsules: a tinted pill with deep text, one hue per meaning. */
.st{display:inline-block;font-size:12px;font-weight:600;line-height:1.5;padding:1px 10px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap;background:var(--mute-bg);color:var(--mute-ink)}
.st-sold{background:var(--ok);color:var(--on-ok)}
.st-ready,.st-listed{background:var(--ok-bg);color:var(--ok-ink)}
.st-repair,.st-awaiting_parts,.st-diagnosing,.st-in_repair{background:var(--warn-bg);color:var(--warn-ink)}
.st-problem{background:var(--bad-bg);color:var(--bad-ink)}
.st-in_transit,.st-accepted,.st-info_received,.st-out_for_delivery,.st-pickup{background:var(--info-bg);color:var(--info-ink)}
.st-delivered{background:var(--ok-bg);color:var(--ok-ink)}
.row-actions{display:flex;justify-content:flex-end;padding:0 14px 10px}
.order-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:600}
.sorts{margin-left:auto}
.saas-bar{max-width:760px;margin:8px auto 0;padding:0 16px}
.saas-bar p{margin:0 0 6px;padding:8px 14px;border-radius:12px;font-size:15px}
.saas-bad{background:var(--bad-bg);color:var(--bad-ink)} .saas-warn{background:var(--warn-bg);color:var(--warn-ink)}
.saas-info{background:var(--info-bg);color:var(--info-ink)}
.saas-bar a{color:inherit;font-weight:600}
/* the device catalog in the forms: "＋ Add …" turns a select into a field in place; a long model list gets a search */
.tax-add{display:flex;gap:6px;align-items:center}
.tax-add input{flex:1;min-width:0}
.tax-add button{min-width:44px;padding:0 10px}
.tax-find{margin-bottom:6px}
.pack-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px}
/* a hint beside a field: level with the input box, not with the label above it */
.beside-hint{margin:0;align-self:end;min-height:44px;display:flex;align-items:center}
/* Home's first steps lead here: the block they are about glows for a few seconds */
.spotlight{outline:3px solid var(--accent);outline-offset:4px;border-radius:12px;animation:spot 1.2s ease-in-out 3}
@keyframes spot{50%{outline-color:transparent}}
@media (prefers-reduced-motion:reduce){.spotlight{animation:none}}
.notice{background:var(--ok-bg);color:var(--ok-ink);border-radius:12px;padding:10px 14px;margin:0 0 10px}
.mono{font-family:var(--mono)}
.st-donor{background:var(--mute-bg);color:var(--mute-ink);border:1px dashed var(--field)}
.dx-st{display:inline-flex;align-items:center;gap:4px}
.dx-st button{font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;border:1px solid var(--field);background:var(--panel);color:var(--muted);cursor:pointer}
.dx-open button{color:var(--muted)}
.dx-ordered button{border-color:var(--accent);color:var(--accent-text)}
.dx-arrived button{background:var(--ok);color:var(--on-ok);border-color:var(--ok)}
.dx-status{white-space:nowrap}
.dx-st select{font-size:13px;padding:2px 26px 2px 8px;background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%}
.rsv-chip{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;
  padding:2px 10px;border-radius:999px;background:var(--warn-bg);color:var(--warn-ink)}
fieldset.line{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
fieldset.chip-part{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 12px}
fieldset.chip-part .grid{margin-top:8px}
fieldset.line legend{font-weight:600;padding:0 4px}
fieldset.line .share{grid-column:1/-1;color:var(--ok);font-weight:600}

.ln{display:flex;justify-content:space-between;padding:4px 0;font-variant-numeric:tabular-nums}
.ln.sum{border-top:1px solid var(--ink);margin-top:4px;padding-top:8px;font-weight:700;font-size:1.1rem}
.ln.sub{color:var(--muted)}

form.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
form.grid .full{grid-column:1/-1}
.tax{display:grid;grid-template-columns:1fr 1fr;gap:12px;grid-column:1/-1;padding-bottom:4px}
@media(max-width:520px){.tax{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:500;color:var(--muted)}
/* One look for every field (owner, 2026-10-16): the value in the ink colour at 15 px and normal weight, whatever
   the label around it says; a select is drawn like an input with our own chevron, never the system's control. */
input,select,textarea{font:inherit;font-size:15px;font-weight:400;line-height:1.35;color:var(--ink);background-color:var(--bg);
  border:1px solid var(--field);border-radius:8px;padding:10px 12px;width:100%;min-height:44px}
select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:disabled,input:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
::placeholder{color:var(--muted);opacity:.8}
textarea{min-height:70px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}
.radio{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
.radio input{width:auto}

.btn,button{font-family:inherit;font-weight:600;font-size:16px;line-height:1.3;border:0;border-radius:10px;padding:10px 18px;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none}
/* The 44 px glove rule is for real buttons; these are compact by design. */
.chip,.link,.cat-x,.cat-chev,.pri-set,.qthumb button,#lbClose{min-height:0}
button:disabled{opacity:.55;cursor:progress}   /* in flight: .busy */
.ghost{background:none;color:var(--ink);border:1px solid var(--field)}
/* A date field typed as DD/MM/YYYY: the browser's own date input follows the browser locale (month first in
   en-US) and cannot be forced, so it stays underneath (ISO value, name, picker) and a text field shows the date. */
.ddate{display:flex;gap:6px;align-items:stretch;position:relative}
.ddate .ddate-txt{flex:1;min-width:0}
.ddate .ddate-pick{flex:0 0 44px;padding:0;font-size:1.05rem}
 dialog.bulk{background:var(--panel);color:var(--ink);border:1px solid var(--card-border);border-radius:12px;padding:20px;width:min(560px,94vw)}
dialog.bulk::backdrop{background:rgba(0,0,0,.55)}
dialog.whatsnew ul,.changes{margin:.4rem 0 1rem;padding-left:1.2rem;line-height:1.5}
dialog.whatsnew h3{margin:.6rem 0 0;font-size:15px}
.ddate .ddate-native{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.danger{background:none;color:var(--bad);border:1px solid var(--bad)}
.link{background:none;color:var(--muted);padding:2px 6px;font-weight:500;text-decoration:underline}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.inline label{flex:1 1 180px;min-width:0}

.label-img{display:block;max-width:100%;height:auto;image-rendering:pixelated;background:#fff;
  border:1px solid var(--line);padding:6px;border-radius:8px}
.icon-btn{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;color:inherit;
  background:none;border-radius:10px}
.layout-block{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.layout-block h3{font-size:1rem;margin:0 0 6px;font-weight:600}
.checks{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
details summary{cursor:pointer;font-weight:600}
details[open] summary{margin-bottom:12px}
/* A collapsible block of a card: the summary is the tap target of a closed block, so pad it to 44 px; the negative
   margins give that height back, so a closed block takes the room a plain 23 px line did. */
details.fold>summary{padding:12px 0;margin:-12px 0}
details.fold[open]>summary{margin-bottom:0}
.dev-hero{margin:0 0 16px}
.dev-hero:empty{display:none}

.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0}

.table{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:15px}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* Number tiles: a big figure under a caps label. .figs (Summary, lot card) is the same thing in older markup. */
.tiles,.figs{display:grid;gap:12px;margin-bottom:16px}
.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles.tiles-4{grid-template-columns:repeat(2,minmax(0,1fr))}   /* Tools & supplies: four figures, two per row on a phone */
@media (min-width:900px){.tiles.tiles-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.figs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile,.figs>div{display:flex;flex-direction:column;justify-content:space-between;gap:4px;padding:12px 14px;min-width:0}
.tile small,.figs small{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;line-height:1.3;text-transform:uppercase}
.tile b,.figs b{display:block;overflow-wrap:anywhere;font-size:24px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}

.empty{padding:28px 16px;text-align:center;color:var(--muted)}
.embed{width:100%;height:calc(100vh - 220px);min-height:520px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.hint{font-size:14px;color:var(--muted);margin:.4rem 0 0}
#toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:25;
  background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}
#toast.show{opacity:1}
.update-bar{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:24;
  display:flex;align-items:center;gap:14px;background:var(--panel);color:var(--ink);border:1px solid var(--accent);
  padding:8px 8px 8px 16px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:92vw;white-space:nowrap}
.update-bar button{min-height:44px}
#toast.bad{background:var(--bad);color:var(--on-bad)}
@media (max-width:520px){form.grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}
@media (hover:hover){.row:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}}

/* Repair journal */
.jentry{border-top:1px solid var(--line);padding:10px 0}
.jentry:first-child{border-top:0}
.jentry header{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-weight:600}
.jentry header .jhead{flex:1 1 12em;min-width:0}
.jentry header .jby{color:var(--muted);font-weight:400;white-space:nowrap}
.jentry header .jacts{margin-left:auto;display:flex;gap:6px}
.jentry p{margin:.3rem 0 0;white-space:pre-wrap}
.thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer}
.thumbs.mini{gap:4px;margin-top:6px}
.thumbs.mini img{width:40px;height:40px}
.dropzone{border:2px dashed var(--field);border-radius:12px;padding:14px;text-align:center;cursor:pointer;
  margin-top:8px;color:var(--muted);transition:border-color .15s,background .15s}
.dropzone:focus,.dropzone.drag{border-color:var(--ink);background:var(--bg);outline:none}
.dropzone .dz-label{pointer-events:none}
.snip{display:block;white-space:normal;overflow:hidden}
.row-thumb{flex:0 0 auto;width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
/* Phones: a row has three fixed costs (code chip, optional thumbnail, right-hand column) and the title gets what is
   left. Measured at 390 px: with the full spacing Microsoft and Aluminium broke mid-word; trimmed, nothing does. */
@media (max-width:420px){
.row{gap:10px;padding-left:14px;padding-right:14px}
.row .tape{font-size:13px;padding:6px 7px}
.row-thumb{width:40px;height:40px}
}
.sel:not(tr){flex:0 0 auto;display:flex;align-items:center}   /* not tr: the diagnosis checklist also marks ticked <tr class=sel> */
.sel input{width:26px;height:26px;accent-color:var(--accent)}
/* Selection mode is opt-in: checkboxes hide until the toolbar turns it on */
.rows.no-sel .sel{display:none}
.batch-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.list-tools{position:sticky;top:var(--top-h);z-index:12;background:var(--bg);margin:0 -16px;padding:6px 16px 2px}
.list-tools:empty,.list-tools:has(> .batch-bar[hidden]:only-child){padding:0}
.list-tools .bar{margin:0 0 6px}
.list-tools input[type=search]{max-width:none!important;flex:1}
.list-tools .batch-bar{gap:6px 8px}
.list-tools .batch-bar button{padding:8px 12px}
.batch-bar #bc{flex:1}
.batch-bar .bb-break{flex-basis:100%;height:0}
.batch-bar label.sel{flex-direction:row;align-items:center;gap:6px;margin:0}
.batch-bar[hidden]{display:none}  /* author display:flex would otherwise beat the UA [hidden] rule */
.batch-bar span{color:var(--muted)}
.line-photo{flex:0 0 auto;width:64px;height:64px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);cursor:pointer}
#queue{display:flex;flex-wrap:wrap;gap:6px}
.qthumb{position:relative}
.qthumb img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.qthumb button{position:absolute;top:-6px;right:-6px;background:var(--ink);color:var(--bg);
  border-radius:50%;width:20px;height:20px;padding:0;line-height:1;font-size:14px}
.qthumb .pri-mark{position:absolute;left:-6px;top:-6px;background:var(--accent);color:var(--accent-ink);border-radius:50%;
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1}
.qthumb .pri-set{position:absolute;left:-6px;top:-6px;background:var(--panel);color:var(--muted);
  border:1px solid var(--field);border-radius:50%;width:20px;height:20px;font-size:12px;line-height:1}
.ld-hero-wrap{margin-bottom:10px}
.ld-hero{width:100%;max-width:360px;height:auto;max-height:280px;object-fit:contain;
  border-radius:12px;border:1px solid var(--line);cursor:pointer;display:block}
#lightbox{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.92);display:flex;
  align-items:center;justify-content:center;padding:20px}
#lightbox[hidden]{display:none}
#lbImg{max-width:100%;max-height:100%;object-fit:contain}
#lbClose{position:absolute;top:12px;right:16px;background:none;color:#fff;font-size:32px;
  border:0;cursor:pointer;line-height:1}
.dxlist{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.dxrow{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid var(--line)}
.dxrow:first-child{border-top:0}
.dxrow .zone{font-weight:500;min-width:0}
.dxrow .zone .sub{display:block;font-weight:400;color:var(--muted);font-size:14px}
.dxpart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 64px;gap:6px;align-items:center;padding:6px 10px 8px;border-top:1px solid var(--line);background:var(--bg)}
.dxpart .dxzone{font-size:14px;color:var(--muted)}
.dxpart input{width:100%}
.dxhead{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:6px 10px;background:var(--panel);font-weight:600;color:var(--muted);font-size:14px;border-bottom:1px solid var(--line)}
.dxhead .r{text-align:right}
.tbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.tbl th,.tbl td{padding:8px 10px;text-align:left;border-top:1px solid var(--line);white-space:normal}
.tbl td.dx-status{white-space:nowrap}
.tbl thead th{border-top:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
/* Diagnosis checklist: clicking a row ticks it and shades the row like a selected Excel line. */
.tbl.checklist tbody tr{cursor:pointer}
.tbl.checklist tbody tr.sel{background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
.tbl.checklist td.chk{width:32px;text-align:center}
.tbl.checklist td.zone{font-weight:500}
.tbl.checklist td.part{color:var(--muted);font-size:14px}
.tbl.checklist td.part em{font-style:normal;font-weight:600}
.tbl .r{text-align:right}
.tbl tr.err td{color:var(--bad)}
code{background:var(--bg);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:.92em}
.atts{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.att{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 8px;border-radius:8px}
.att-name{font-weight:600}
.att-size{color:var(--muted);font-size:.85em}
.att-pre{flex-basis:100%;max-height:300px;overflow:auto;background:var(--bg);border:1px solid var(--line);padding:8px;font-family:var(--mono);font-size:12px;white-space:pre-wrap;margin:4px 0 0}
.att-thumb{max-width:60px;max-height:60px;cursor:pointer;border-radius:6px}

/* Camera scanner: a full-screen layer over everything, the video in a square with a frame to aim with. */
div#scan{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));overflow-y:auto}
div#scan[hidden]{display:none}
.scan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.scan-top b{font-size:18px}
.scan-view{position:relative;width:min(100%,420px);aspect-ratio:1;margin:0 auto;border-radius:12px;overflow:hidden;background:var(--panel)}
.scan-view video{width:100%;height:100%;object-fit:cover;display:block}
.scan-frame{position:absolute;inset:14%;border:3px solid var(--accent);border-radius:12px;pointer-events:none;transition:border-color .15s}
.scan-frame.hit{border-color:var(--ok)} .scan-frame.miss{border-color:var(--bad)}
.scan-msg{margin:0;text-align:center;color:var(--muted);min-height:1.45em}
.scan-type{display:flex;gap:8px;width:min(100%,420px);margin:0 auto}
.scan-type input{flex:1;min-width:0;font-family:var(--mono)}
.scan-log{list-style:none;margin:0 auto;padding:0;width:min(100%,420px);display:flex;flex-direction:column;gap:6px}
.scan-log li{padding:8px 12px;border-radius:10px;background:var(--ok-bg);color:var(--ok-ink);font-size:14px}
.scan-log li.bad{background:var(--bad-bg);color:var(--bad-ink)}
/* Counting a box: big tick boxes and a − / + stepper, usable with gloves. */
.count-row{display:flex;gap:10px;align-items:center;padding:10px 0}
.count-row .main{flex:1;min-width:0;display:flex;flex-direction:column}
.count-row .main b{overflow-wrap:anywhere}
.count-row.found .main b::before{content:"✓ ";color:var(--ok)}
.ctick input{width:28px;height:28px;margin:0}
.stepper{display:flex;align-items:center;gap:4px;flex:none}
.stepper button{min-width:44px;padding:0;font-size:20px}
.stepper input{width:64px;text-align:center;padding:8px 4px}
.count-diff{color:var(--warn-ink);font-weight:600}
.count-foot{position:sticky;bottom:calc(61px + env(safe-area-inset-bottom));z-index:5;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.count-foot .grow{flex:1;min-width:120px;font-weight:600}
label.chip:has(input:checked){background:var(--ink);color:var(--bg);border-color:var(--ink)}
label.chip input{margin:0 4px 0 0}
.loose-row{display:flex;gap:10px;align-items:center;padding:10px 0}
.loose-row input[type=checkbox]{width:24px;height:24px;margin:0;flex:none}
.loose-row .main{flex:1;min-width:0;display:flex;flex-direction:column}
@media (min-width: 900px){.count-foot{bottom:12px}}

/* Home: the quick buttons (two per row on a phone, big enough for gloves), the first-steps checklist, the page tips. */
.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0 0 16px}
.quick-btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:96px;padding:14px;border-radius:12px;
  background:var(--panel);border:1px solid var(--card-border);box-shadow:var(--card-shadow);text-decoration:none;color:var(--ink)}
.quick-btn .ic{color:var(--accent-text);width:28px;height:28px}
.quick-btn b{font-size:15px;line-height:1.25}
.quick-btn small{color:var(--muted);line-height:1.3}
.progress{height:8px;border-radius:999px;background:var(--mute-bg);overflow:hidden;margin:-4px 0 8px}
.progress span{display:block;height:100%;background:var(--ok)}
.step-mark{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;
  border:2px solid var(--field);color:var(--on-ok);font-weight:700}
.step-mark.done{background:var(--ok);border-color:var(--ok)}
.steps .row .main small{white-space:normal}
.att-n{flex:none;min-width:36px;text-align:center;font-size:20px;font-weight:700;color:var(--accent-text)}
.tip{display:flex;gap:8px;align-items:flex-start;background:var(--info-bg);color:var(--info-ink);border-radius:12px;padding:10px 6px 10px 14px;margin:0 0 14px}
.tip p{margin:0;flex:1;font-size:14px}
.tip .link{color:inherit;text-decoration:none;font-size:22px;line-height:1;padding:0 8px;min-height:32px}

.parcel{display:flex;flex-direction:column;gap:4px;padding:12px 0}
.parcel small{color:var(--muted)}
.parcel-actions{display:flex;align-items:center;gap:10px;margin-top:4px}
.parcel-actions select{flex:1;min-width:0}

/* Nested boxes: the path above a box, the tree indent, and the gridfinity map of a drawer (front at the bottom). */
.crumbs{margin:0 0 6px;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.tree-pad{flex:none;color:var(--muted);text-align:right;font-size:13px}
.gf-wrap{overflow-x:auto;padding-bottom:4px}
.gf{display:grid;gap:4px;min-width:min-content;justify-content:center}
.gf-cell{min-height:44px;padding:0;border:1px dashed var(--field);border-radius:8px;background:none;color:var(--muted);
  font:500 12px var(--mono);cursor:pointer}
.gf-bin{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;padding:4px 6px;border-radius:8px;
  background:var(--ok-bg);color:var(--ok-ink);text-decoration:none;overflow:hidden}
.gf-bin b{font-size:12px;line-height:1.2;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.gf-bin small{color:inherit;font-size:11px;font-weight:600}
.gf-bin.here{outline:3px solid var(--accent);outline-offset:1px}
.gf-empty{cursor:default}
.gf-front{margin:6px 0 0;text-align:center;font-size:12px;color:var(--muted);border-top:2px solid var(--field);padding-top:4px}

/* Signed out: only the sign-in card, no nav or header tools. */
body.signed-out .tabs,body.signed-out #jump,body.signed-out #scanBtn,body.signed-out .top a[href="#/printer"]{display:none}
.auth-card{max-width:440px;margin:24px auto}
.auth-card .big{width:100%;min-height:56px;font-size:17px}
.auth-codes{font:600 16px/1.9 var(--mono);columns:2;margin:8px 0;padding:12px 16px;background:var(--bg);border-radius:12px;list-style:none}
.auth-qr{display:block;margin:8px auto;background:#fff;padding:8px;border-radius:12px;max-width:220px;width:100%;image-rendering:pixelated}
.demo-card{border:1px dashed var(--accent)}
.money-line{display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:10px;align-items:start}
.money-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.money-fields:empty{display:none}
.pf-edit{display:flex;gap:8px;align-items:center}
.pf-edit input{flex:1;min-width:0}
.bk-row{flex-wrap:wrap;row-gap:8px}
.bk-row .main{flex:1 1 100%}
.bk-actions{display:flex;gap:8px;flex-wrap:wrap}
.copy-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.copy-row code,.copy-row .auth-secret{font-size:16px;padding:6px 10px;min-width:0;overflow-wrap:anywhere}
.copyable{user-select:all;-webkit-user-select:all}
.auth-secret{font:600 14px var(--mono);word-break:break-all;user-select:all}
@media (min-width: 900px){body.signed-out main,body.signed-out .top{margin-left:0}}
/* signed out, the card carries the workshop's name and logo: the header's would show it twice */
body.signed-out .top .brand{display:none}

/* Desktop: the nav becomes a fixed 220 px sidebar with all ten tabs, icon and label side by side. */
@media (min-width: 900px){
.tabs{position:fixed;left:0;top:0;bottom:0;right:auto;width:220px;display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;padding:16px 12px;border-top:0;border-right:1px solid var(--line)}
.tabs a,.tabs a.tab-extra{order:0;flex:0 0 auto;display:flex;flex-direction:row;justify-content:flex-start;gap:12px;
  min-height:44px;padding:10px 14px;font-size:15px;font-weight:500;letter-spacing:0}
.tabs .tab-more{display:none}
.tabs::before,.tabs.open::before{display:none}
.tabs .side-brand{display:flex;align-items:center;gap:10px;min-height:0;padding:6px 14px 18px;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.side-brand img{border-radius:6px;height:28px;width:28px}
.side-brand.has-logo{flex-direction:column;align-items:flex-start}
.side-brand.has-logo img{width:auto;height:40px;max-width:180px;border-radius:0}
.side-brand .brand-name{white-space:normal;max-width:180px;line-height:1.2;overflow-wrap:anywhere}
.side-brand.has-logo .brand-name{font-size:15px}
.top{margin-left:220px;padding-left:32px;padding-right:32px}
.top .brand{display:none}
main{margin-left:220px;max-width:none;padding:28px max(32px,calc((100vw - 220px - 1040px) / 2)) 40px}
.saas-bar{margin:12px 0 0 220px;max-width:none;padding:0 max(32px,calc((100vw - 220px - 1040px) / 2))}
body{padding-bottom:0}
#toast{bottom:24px}
.update-bar{bottom:24px}
.tabs.open{box-shadow:none}
}

/* iOS Safari zooms into any field whose text is under 16 px when it gets focus, and the page stays zoomed and
   wobbles sideways. On touch screens every field is at least 16 px. */
@media (pointer:coarse){input,select,textarea{font-size:16px !important}}

/* ---- UI/UX audit, 2026-10 ---- */
/* A tile with a filter key is a button: it looks like the other tiles, the figures sit on one line. */
button.tile{font:inherit;color:var(--ink);text-align:left;align-items:stretch;justify-content:space-between;cursor:pointer}
button.tile small{color:var(--muted)}
.tile b{margin-top:auto}
/* A small labelled select: the sort order and the colour filter of a list. */
.inline-select{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.inline-select select{width:auto;min-height:40px;padding:6px 34px 6px 10px}
@media (max-width:520px){.wide-only{display:none}}
/* Checkboxes and radios a gloved finger can hit. */
.radio{min-height:44px}
.radio input[type=checkbox],.radio input[type=radio]{width:22px;height:22px;flex:0 0 22px;accent-color:var(--accent)}
/* The New device form: its fields live in one swappable block that joins the form's grid. */
#own-fields{display:contents}
/* Three buttons on a phone: the main one full width, the other two side by side. */
@media (max-width:520px){
  .actions:has(> button:nth-child(3):last-child){display:grid;grid-template-columns:1fr 1fr}
  .actions:has(> button:nth-child(3):last-child) > :first-child{grid-column:1 / -1}
}
/* The More sheet dims the page behind it, and More stays lit while it is open. */
@media (max-width:899px){
  .tabs.open{box-shadow:0 0 0 100vmax rgba(0,0,0,.45),0 -12px 32px rgba(0,0,0,.35)}
  .tabs .tab-more[aria-expanded=true]{color:var(--accent-text)}
}
/* Search results: the snippet shows why it matched, the box path on its own line. */
#sres section{padding:12px 16px}
#sres section h2{margin:0 0 4px;font-size:16px}
#sres .row .main small{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Long lines of text stay readable on a wide screen. */
.changes,.readable{max-width:72ch}
section .changes{margin-bottom:0}
.embed{background:var(--panel)}
.notice .actions{margin-top:8px}
/* A side link of a Home row: a chevron, the accent only where something is still to do. */
.row .side .go{font-size:22px;line-height:1;color:var(--muted)}
.row .side .todo{color:var(--accent-text);font-weight:600}
/* A row's own small buttons (Edit / Delete on a list row): smaller than a form's button, still glove-sized. */
button.sm,.btn.sm{min-height:40px;padding:6px 12px;font-size:14px}
.row-btns{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.exp-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
.list li.editing{background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:8px}
/* A button that can't be pressed yet is not "busy": it says so by looking inactive. */
button:disabled:not(.busy){cursor:not-allowed}
button:not(.ghost):not(.danger):disabled:not(.busy){background:none;color:var(--muted);border:1px solid var(--field);opacity:1}
input[type=checkbox],input[type=radio],input[type=range],input[type=color]{min-height:0}
.top input{min-height:40px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.proj{border-top:1px solid var(--line);padding-top:12px}
.proj h3{margin:0 0 10px}
.proj .ln.sum{margin-top:12px}
.settings-links .quick-btn{min-height:72px}
/* The journal entry form: under the list for a new entry; moved into the entry's place and framed while editing one. */
#jform{margin-top:14px}
.jform-head{margin:0;font-size:16px}
#jform.jediting{border:2px solid var(--accent);border-radius:12px;padding:14px;margin:10px 0;
  background:color-mix(in srgb,var(--accent) 7%,transparent)}
#jform.jediting .jform-head{color:var(--accent-text)}
/* A file field: its button looks like the app's ghost buttons, not the browser's grey one. */
input[type=file]{padding:6px}
input[type=file]::file-selector-button{font:600 15px Inter, system-ui, sans-serif;color:var(--ink);background:none;
  border:1px solid var(--field);border-radius:8px;padding:8px 14px;margin-right:10px;cursor:pointer}
.bar.opts{flex-wrap:nowrap}.bar.opts .inline-select{min-width:0}.bar.opts select{max-width:100%;min-width:0}
/* Diagnosis: the part's status pill is a real button; a saved row shows a plain tick. */
.dx-st button{min-height:40px;padding:6px 14px;font-size:14px}
.dx-st{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.dx-st select{width:auto;max-width:100%}
.tbl.checklist .tick{color:var(--accent-text);font-weight:700}
#dx-checklist{margin-top:12px}
/* Device card header: the status capsule, the one next step, the full status menu. */
.dev-status{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.dev-status .st{font-size:14px;padding:6px 12px}
.nowrap{white-space:nowrap}
.ddate-pick .ic{width:20px;height:20px}
/* Using a part: on a phone the part picker takes the whole row, quantity and buttons go under it. */
#use label.qty{flex:0 0 80px}
@media (max-width:520px){
  #use label:first-child,#pay label:last-of-type{flex:1 1 100%}
  #use button,#pay button{flex:1 1 auto}
  form.grid#sell{grid-template-columns:1fr 1fr}
}
.dev-status select{font-weight:600}
/* A list row's box path: its own line, wrapped, so the bin at the end is never cut off. */
.row .main small.where{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.rows li.out .row{opacity:.6}
/* One swipeable row of chips on a phone (it scrolls inside itself, the page never pans). */
@media (max-width:899px){.chips.scroll-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}
  .chips.scroll-row::-webkit-scrollbar{display:none}.chips.scroll-row .chip{flex:0 0 auto}}
.st-out{background:var(--mute-bg);color:var(--mute-ink)}
.st-low{background:var(--warn-bg);color:var(--warn-ink)}
.stuck-note{flex-basis:100%;margin:6px 0 0;font-size:14px;color:var(--warn-ink)}
#applies-wrap:not([hidden]){display:grid;gap:12px}
#lcount label.qty{flex:0 0 120px}
label.chip input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
label.chip{position:relative}
fieldset.line .line-remove{grid-column:1/-1;justify-self:end;margin-top:-4px}
fieldset.line .share{text-align:right;font-size:16px}
.add-lines button{flex:1 1 0}
@media (max-width:520px){fieldset.line{grid-template-columns:1fr}}
/* Purchase inspection: three equal choices a glove can hit; "Not as described" turns the problem colour. */
#insp-pick{display:flex;flex-wrap:wrap;gap:6px}
.chip.insp{min-height:44px}
.chip.insp.insp-bad.on{background:var(--bad-bg);color:var(--bad-ink);border-color:var(--bad-ink)}
/* Wide tables scroll inside themselves; the first column stays put while they do. */
.table th:first-child,.table td:first-child{position:sticky;left:0;background:var(--panel);z-index:1}
.add-head{margin:6px 0 0;font-weight:600;color:var(--ink);border-top:1px dashed var(--field);padding-top:10px}
.inline-num{display:flex;align-items:center;gap:10px;color:var(--ink)}.inline-num input{max-width:110px}
.jrows .row{align-items:flex-start}
/* Device card top. Phone: header, status, big photo, facts, Device details, Label, one column, in that order.
   Wide screen: header, facts and Label on the left; status and the big photo on the right; Device details below. */
.dev-status{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.dev-facts{padding:12px 16px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 16px;margin:0}
.facts div{min-width:0}
.facts dt{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:2px 0 0;overflow-wrap:anywhere}
@media (min-width:1200px){
  .dev-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);column-gap:16px;align-items:start}
  .dev-top > .head{grid-column:1;grid-row:1}
  .dev-top > .dev-facts{grid-column:1;grid-row:2}
  .dev-top > .dev-label{grid-column:1;grid-row:3}
  .dev-top > .dev-status{grid-column:2;grid-row:1;flex-direction:column;align-items:stretch;align-self:end;
    background:var(--panel);border:1px solid var(--card-border);border-radius:12px;padding:12px;margin-bottom:16px}
  .dev-top > .dev-status .inline-select{justify-content:space-between}
  .dev-top > .dev-status .inline-select select{flex:1}
  .dev-top > .dev-hero{grid-column:2;grid-row:2 / span 2}
  .dev-top > .dev-hero .ld-hero{max-width:100%;max-height:420px;width:100%}
  .dev-top > .dev-details{grid-column:1 / -1;grid-row:4}
}
/* A computer (a fine pointer that hovers) has no camera pointed at the shelf: the scan buttons are for phones and
   tablets. Codes are typed there instead (Put here by code, the count's Type codes). */
.desk-only{display:none !important}
@media (hover:hover) and (pointer:fine) {
  .scan-only{display:none !important}
  .desk-only{display:inline-flex !important}
}
div#scan.no-camera .scan-view{display:none}
/* A section heading with its action on the right (Repair journal → New entry). */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.sec-head h2{margin:0}
/* The new journal entry opens on top of the block, ruled off from the entries below it. */
#jform:not(.jediting){margin:12px 0 6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
/* A bin with a photo on the drawer's map: the shot fills the cell, its name and cell stay readable on top. */
.gf-bin.has-img{position:relative;isolation:isolate}
.gf-bin.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;z-index:-1;border-radius:inherit}
.gf-bin.has-img b,.gf-bin.has-img small{text-shadow:0 0 4px var(--ok-bg)}
/* The way back from a card to its section's list ("‹ Boxes"), on top of the card. */
.back-link{display:inline-flex;align-items:center;min-height:40px;margin:-6px 0 4px;color:var(--accent-text);font-weight:600;text-decoration:none}
/* Phones: the section from behind More you work in joins the bar as a sixth slot until you leave it. */
@media (max-width:899px) {
  .tabs.pinned a.tab-main,.tabs.pinned .tab-more,.tabs.pinned a.tab-extra.on{grid-column:span 10}
  .tabs.pinned a.tab-main[data-tab=home]{grid-column:1 / span 10}
  .tabs.pinned a.tab-extra.on{display:flex;order:21}
  .tabs.pinned .tab-more{order:22}
  /* A long name gets its short form in the bar (Tools & supplies → Tools); the More sheet and the sidebar keep it whole. */
  .tabs.pinned a.tab-extra.on:has(.tab-short) span:not(.tab-short){display:none}
  .tabs.pinned a.tab-extra.on .tab-short{display:inline}
  .tabs a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

.tabs .tab-short{display:none}

/* Repair prices: one row per sheet item, the price range at the side. */
.price-row{display:flex;align-items:center;gap:12px;padding:10px 14px;flex-wrap:wrap}
.price-row .main{flex:1 1 180px;min-width:0;display:flex;flex-direction:column}
.price-in{display:flex;align-items:center;gap:6px}
.price-in input{width:6.5em}
.dx-estimate{margin:10px 0 0}
.dx-estimate b{font-size:18px}
.est-use{display:flex;flex-wrap:wrap;align-items:center;gap:6px}

/* Client contacts and warranty on the card. */
.client-contacts{margin:0 0 .4rem}
.client-contacts a{color:inherit}
.warranty{margin:.2rem 0 .5rem;font-weight:600}
.warranty.on{color:var(--ok-ink)}
.warranty.off{color:var(--muted)}
.fold-lite{margin-top:10px}
.fold-lite summary{cursor:pointer;min-height:44px;display:flex;align-items:center}

/* A printed page (the intake receipt, the invoice): black on white in either theme, A4 when printed. */
.paper{background:#fff;color:#1b1b1b;border-radius:12px;padding:28px 24px;max-width:800px;font-size:15px;line-height:1.45}
.paper h1{font-size:22px;margin:18px 0 12px;color:#1b1b1b}
.paper .pre{white-space:pre-line}
.paper-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2px solid #1b1b1b;padding-bottom:12px}
.paper-head .shop{font-size:20px;display:block}
.paper-ref{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.paper-ref b{font-family:ui-monospace,monospace;font-size:22px}
.paper-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 24px}
.paper-tbl{width:100%;border-collapse:collapse;margin:8px 0}
.paper-tbl caption{text-align:left;font-weight:700;padding-bottom:4px;text-transform:uppercase;font-size:12px;letter-spacing:.06em}
.paper-tbl th,.paper-tbl td{text-align:left;vertical-align:top;padding:4px 8px 4px 0;border-bottom:1px solid #ddd}
.paper-tbl th{font-weight:600;width:7em;color:#555}
.paper-tbl .r{text-align:right;white-space:nowrap}
.paper-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid #1b1b1b;padding-top:10px;margin-top:14px;font-size:17px}
.paper .terms{font-size:13px;color:#444}
.paper-sign{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px}
.paper-sign div{border-top:1px solid #1b1b1b;padding-top:6px;font-size:13px}
@media (max-width:600px){.paper-ref{align-items:flex-start;text-align:left}}
.paper-qr{display:flex;gap:14px;align-items:center;margin-top:20px;font-size:13px}
.paper-qr img{width:96px;height:96px;image-rendering:pixelated}
.paper-link{word-break:break-all;font-family:ui-monospace,monospace;font-size:11px}
.paper-sub{display:flex;justify-content:space-between;margin:4px 0}
.paper .muted-p{color:#555;font-size:13px;margin-top:2px}
.track-box{margin:12px 0 4px;padding:12px;border:1px solid var(--line);border-radius:10px}
.track-url{word-break:break-all;margin:4px 0;font-size:14px}
/* Labels on paper: real-size pictures in rows, a dashed line to cut along (white paper in either theme). */
.sheet{display:flex;flex-wrap:wrap;gap:3mm;background:#fff;padding:4mm;border-radius:12px}
.sheet img.cut{display:block;width:auto;max-width:100%;outline:1px dashed #9aa0a6;outline-offset:1mm;margin:1mm;image-rendering:pixelated}

@media print{
  @page{size:A4;margin:14mm}
  .sheet{padding:0;border-radius:0}
  .top,.tabs,.back-link,.no-print,.update-bar,#toast{display:none !important}
  html,body,main{background:#fff !important;padding:0 !important;margin:0 !important}
  .paper{border-radius:0;padding:0;max-width:none}
}

/* Workshop & documents: the logo preview; the logo on the papers. */
/* Workshop & documents → Texts on your papers: the fields on the left, the paper as it will look on the right */
.doc-tabs{margin:4px 0 6px}
.doc-edit{display:grid;gap:18px;align-items:start}
@media (min-width:1100px){.doc-edit{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.doc-preview{position:sticky;top:calc(var(--top-h, 60px) + 12px)}}
.doc-fields{display:grid;gap:14px}
.doc-field{display:flex;flex-direction:column;gap:4px;font-weight:600}
.doc-field small{font-weight:400}
.doc-field input,.doc-field textarea{font-weight:400}
.doc-reset{align-self:flex-start;font-weight:400;font-size:14px;min-height:32px;padding:0}
.doc-vars{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.doc-vars .chip small{color:var(--muted);font-weight:400}
.doc-pv-label{margin:0 0 6px;font-size:13px}
.doc-preview .paper{font-size:13px;padding:18px 16px;max-width:none;max-height:75vh;overflow:auto}
.doc-preview .paper h1{font-size:18px}
.qr-stand{width:72px;height:72px;flex:none;background:repeating-conic-gradient(#1b1b1b 0 25%,#fff 0 50%) 0 0/12px 12px;border:4px solid #fff;outline:1px solid #1b1b1b}
.client-pv .pv-brand{display:flex;align-items:center;gap:10px;font-size:16px}
.client-pv .pv-brand img{max-height:36px;max-width:110px;object-fit:contain}
.client-pv h1{margin:10px 0 2px}
.client-pv h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;color:#555}
.pv-card{border:1px solid #e3e6e8;border-radius:10px;padding:12px;margin-top:12px}
.pv-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pv-steps li{background:#eef1f2;color:#555;border-radius:8px;padding:8px 6px;text-align:center;font-size:12px}
.pv-steps li.done{background:#d9efe4;color:#1c5e41}.pv-steps li.now{background:#1c5e41;color:#fff;font-weight:700}
.pv-mail{border:1px solid #e3e6e8;border-radius:10px;padding:12px;margin-bottom:12px}
.pv-subj{margin:0 0 8px;font-weight:700}.pv-subj span{color:#555;font-weight:400;margin-right:6px}
.logo-box{min-height:48px;display:flex;align-items:center;margin-bottom:10px}
.logo-preview{max-height:96px;max-width:240px;background:#fff;padding:8px;border-radius:8px}
.paper-brand{display:flex;gap:14px;align-items:flex-start}
.paper-logo{max-height:64px;max-width:150px;object-fit:contain}
body.signed-out .back-link{display:none}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-weight:700;font-size:18px}
.auth-brand img{max-height:40px;max-width:140px;object-fit:contain}

/* languages as a flag and a code (owner, 2026-10-15): Data → Language and under the sign-in card */
/* Data → Part categories: one row per category, renamed in place */
/* The header's language list: the page's flag (and its code on a computer) opens it under the button. */
.lang-menu{position:relative;flex:none}
#langBtn{gap:6px;padding:0 8px;font-weight:600;font-size:.875rem}
#langList{position:absolute;right:0;top:100%;margin-top:6px;z-index:30;min-width:200px;padding:6px;background:var(--panel);
  border:1px solid var(--card-border);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.35)}
#langList button{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:44px;padding:0 12px;background:none;
  color:var(--ink);border:0;border-radius:8px;text-align:left;font-weight:400}
#langList button:hover{background:var(--line)}
#langList button.on{box-shadow:inset 0 0 0 1px var(--accent)}
#langList b{min-width:24px}
#langList span{color:var(--muted)}
.flag{width:20px;height:14px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px var(--card-border);flex:none}
.lang-pick{display:flex;flex-wrap:wrap;gap:8px}
.lang-pick button{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.lang-pick button.on{border-color:var(--accent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}
.auth-langs{margin-top:18px;display:flex;justify-content:center}

/* the note a client sees under the status (client repairs) */
.client-note{margin-top:10px}
.client-note textarea{width:100%}
.client-note .hint{margin:4px 0 0}

/* a technician never sees the owner's pages or money (the server takes the data out; this hides the frames) */
.role-tech .owner-only{display:none !important}

/* A technician's phone bar has no Purchases (owner-only): Home, Devices, Parts and More share the row in quarters,
   and a pinned section makes it five. */

/* Data → Users: a row's name, role and actions stack under the user's line */
.user-row .main{display:flex;flex-direction:column;gap:6px;width:100%}
.user-edit{margin:4px 0 0}
.user-row .actions{margin:0;align-items:center}

/* ===== Material 3 layer (m3.material.io): the components restyled on the M3 roles above. It sits last so it wins
   over the older rules without moving any markup, id or name. ===== */
html{--fl-bg:var(--bg)}
section,.rows,.tile,.figs>div{--fl-bg:var(--panel)}
dialog{--fl-bg:var(--md-surface-high)}

/* Type scale: Headline Medium for the page title, Title Medium for a block, Body for the rest. */
h1{font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}
h2{font-size:16px;line-height:24px;font-weight:500;letter-spacing:.01em}
.page-sub{font-size:14px;line-height:20px;letter-spacing:.016em}

/* Surfaces: cards are filled containers (no stroke in dark, a level-1 shadow in light), 12 px corners. */
section,.rows,.tile,.figs>div{border-radius:var(--shape-m)}
.rows li+li{border-top-color:color-mix(in srgb,var(--line) 70%,transparent)}

/* Top app bar: the page colour, the search a full-round surface-high field. */
.top{background:var(--bg);border-bottom:0;box-shadow:0 1px 0 color-mix(in srgb,var(--line) 60%,transparent)}
.top input{background:var(--md-surface-high);border:0;border-radius:var(--shape-full);padding:10px 18px;
  font:400 15px Inter, system-ui, sans-serif;min-height:44px}
.top input:focus-visible{outline:2px solid var(--accent);outline-offset:0}
#jumpHits{background:var(--md-surface-container);border:0;border-radius:var(--shape-l);box-shadow:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3)}

/* Buttons: filled (primary), outlined (.ghost), text (.link), danger outlined; full-round, Label Large type.
   A state layer of the text colour shows hover (8 %) and press (12 %); a press also gives a little (Emil). */
.btn,button{border-radius:var(--shape-full);font-weight:500;font-size:15px;letter-spacing:.01em;padding:10px 24px;
  transition:transform 160ms var(--ease-out),box-shadow var(--dur) var(--ease)}
.btn:not(.ghost):not(.danger):not(.link):not(.chip),button:not(.ghost):not(.danger):not(.link):not(.chip):not(.tile):not(.icon-btn){
  box-shadow:none}
@media (hover:hover){
  .btn:hover,button:not(:disabled):not(.tab-more):hover{background-image:linear-gradient(color-mix(in srgb,currentColor 8%,transparent),color-mix(in srgb,currentColor 8%,transparent))}
  .btn:not(.ghost):not(.danger):not(.link):hover,button:not(.ghost):not(.danger):not(.link):not(.chip):not(.tile):not(.icon-btn):not(:disabled):hover{
    box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15)}
}
.btn:active,button:not(:disabled):not(.tab-more):active{background-image:linear-gradient(color-mix(in srgb,currentColor 12%,transparent),color-mix(in srgb,currentColor 12%,transparent));
  transform:scale(.97)}
.ghost{color:var(--accent-text);border:1px solid var(--field)}
.danger{border-color:var(--field)}
.link{color:var(--accent-text);text-decoration:none;font-weight:500;border-radius:var(--shape-full);padding:4px 10px}
.link:hover{text-decoration:underline}
button.sm,.btn.sm{padding:6px 16px}
.icon-btn{border-radius:var(--shape-full)}
button:not(.ghost):not(.danger):disabled:not(.busy){background:color-mix(in srgb,var(--ink) 12%,transparent);color:color-mix(in srgb,var(--ink) 38%,transparent);border:0}
@media (prefers-reduced-motion:reduce){.btn,button{transition:none}.btn:active,button:active{transform:none}}

/* Filter chips: 8 px corners, 32 px tall; selected = secondary container with a tick-free fill. */
.chip{border-radius:var(--shape-s);border-color:var(--field);background:transparent;padding:5px 16px;font-size:14px;font-weight:500;
  min-height:32px;transition:background-color var(--dur) var(--ease)}
.chip.on,label.chip:has(input:checked){background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-color:transparent}
.chip small{opacity:.75}

/* Status capsules: M3 small badges, 8 px corners, Label Medium. */
.st{border-radius:var(--shape-s);font-weight:500;letter-spacing:.03em;padding:2px 10px}

/* Fields: M3 outlined text fields. 1 px outline, 2 px primary on focus, 4 px corners, the label floats into the
   outline (core.js `floatLabel` gives the label `.tf` and its leading words `.fl`). */
input,select,textarea{border-radius:var(--shape-xs);background-color:transparent;min-height:48px;padding:12px 14px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
select:not([multiple]){padding-right:36px}
input:hover:not(:disabled):not(:focus),select:hover:not(:disabled):not(:focus),textarea:hover:not(:disabled):not(:focus){border-color:var(--ink)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);outline:0}
input:invalid:not(:placeholder-shown):not(:focus){border-color:var(--bad)}
select option{background:var(--md-surface-high);color:var(--ink)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0}
label.tf{position:relative;margin-top:6px}
label.tf>.fl{position:absolute;z-index:1;left:10px;top:24px;transform:translateY(-50%);max-width:calc(100% - 44px);padding:0 4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;font-size:15px;font-weight:400;color:var(--muted);
  background:transparent;transition:top var(--dur) var(--ease),font-size var(--dur) var(--ease),color var(--dur) var(--ease)}
label.tf.tf-up>.fl,label.tf:has(>input:focus)>.fl,label.tf:has(>input:not(:placeholder-shown))>.fl,label.tf:has(>textarea:focus)>.fl,
label.tf:has(>textarea:not(:placeholder-shown))>.fl{top:0;font-size:12px;line-height:16px;background:var(--fl-bg);max-width:calc(100% - 20px)}
label.tf:has(>:focus)>.fl,label.tf:has(.ddate-txt:focus)>.fl{color:var(--accent-text)}
label.tf:not(.tf-up)>input:not(:focus)::placeholder,label.tf>textarea:not(:focus)::placeholder{color:transparent}
@media (prefers-reduced-motion:reduce){label.tf>.fl{transition:none}}

/* Navigation bar (phone): surface container, a pill indicator in secondary container behind the active icon. */
.tabs{background:var(--md-surface-container);border-top:0}
.tabs a,.tabs .tab-more{border-radius:var(--shape-l);font:500 11px/16px Inter, system-ui, sans-serif;letter-spacing:.03em;gap:4px;color:var(--muted)}
.tabs a .ic,.tabs .tab-more .ic{box-sizing:content-box;width:24px;height:24px;padding:4px 18px;border-radius:var(--shape-full)}
.tabs a.on,.tabs .tab-more.on{background:none;color:var(--ink);font-weight:600}
.tabs a.on .ic,.tabs .tab-more.on .ic{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
@media (max-width:899px){.tabs.open{box-shadow:0 0 0 100vmax var(--md-scrim),0 -4px 8px 3px rgba(0,0,0,.15);border-radius:var(--shape-l) var(--shape-l) 0 0}}
.tabs::before{background:var(--line)}
@media (hover:hover){.tabs a:hover .ic,.tabs .tab-more:hover .ic{background-color:color-mix(in srgb,var(--ink) 8%,transparent)}
  .tabs a.on:hover .ic{background:var(--md-secondary-container)}}
/* Navigation drawer (from 900 px): full-round items, the active one filled with secondary container. */
@media (min-width:900px){
  .tabs{background:var(--md-surface-container);border-right:0;padding:12px}
  .tabs a,.tabs a.tab-extra{border-radius:var(--shape-full);min-height:52px;padding:0 16px;font-size:14px;font-weight:500;letter-spacing:.01em;gap:12px}
  .tabs a .ic{padding:0;background:none !important}
  .tabs a.on{background:var(--md-secondary-container);color:var(--md-on-secondary-container);font-weight:600}
  .tabs .side-brand{padding:12px 16px 20px;font-size:22px;font-weight:500;background:none !important}
  .tabs a:not(.on):not(.side-brand):hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
}

/* Dialogs: surface container high, 28 px corners, a scrim behind; they rise in (interruptible, from @starting-style). */
dialog.bulk{background:var(--md-surface-high);border:0;border-radius:var(--shape-xl);padding:24px;
  box-shadow:0 8px 12px 6px rgba(0,0,0,.15),0 4px 4px rgba(0,0,0,.3);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
dialog.bulk[open]{opacity:1;transform:none}
@starting-style{dialog.bulk[open]{opacity:0;transform:translateY(8px) scale(.98)}}
dialog.bulk::backdrop{background:var(--md-scrim)}
@media (prefers-reduced-motion:reduce){dialog.bulk{transition:none}}

/* Snackbar: inverse surface, 4 px corners, slides up a little as it shows. */
#toast{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);border-radius:var(--shape-xs);padding:14px 16px;
  font-size:14px;line-height:20px;box-shadow:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);
  transform:translate(-50%,8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease-out)}
#toast.show{transform:translate(-50%,0)}
#toast.bad{background:var(--bad-bg);color:var(--bad-ink)}
.update-bar{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);border:0;border-radius:var(--shape-xs)}
.update-bar button{background:none;color:var(--md-inverse-primary)}

/* Number tiles: filled cards, the label in Label Medium (no shouting caps), the figure in Headline Small. */
.tile,.figs>div{padding:16px}
.tile small,.figs small{font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:none;line-height:16px}
.tile b,.figs b{font-size:24px;line-height:32px;font-weight:500}
button.tile{transition:background-color var(--dur) var(--ease)}
th{text-transform:none;font-size:12px;letter-spacing:.03em;font-weight:500}

/* Lists and folds */
@media (hover:hover){.row:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}}
details summary{font-weight:500}
details.fold>summary{border-radius:var(--shape-s)}
.label-img{border-radius:var(--shape-s)}
.tape{border-radius:var(--shape-xs)}
.facts dt{font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:none}

/* Motion, with restraint (Emil Kowalski's rules): only occasional surfaces move, under 250 ms, transform and opacity
   only, always interruptible; navigation, search hits and lists never animate. */
#langList{background:var(--md-surface-container);border:0;border-radius:var(--shape-xs);
  box-shadow:0 2px 6px 2px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.3);transform-origin:top right;
  transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out)}
@starting-style{#langList{opacity:0;transform:scale(.96)}}
#langList button{border-radius:var(--shape-xs)}
#langList button:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
#langList button.on{box-shadow:none;background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.tabs.open a.tab-extra{transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out)}
@starting-style{.tabs.open a.tab-extra{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){#langList,.tabs.open a.tab-extra{transition:none}}
/* the language picker on Data and the sign-in card: the chosen one is a tonal fill */
.lang-pick button.on{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-color:transparent;box-shadow:none}

/* a notice or card the owner can put away (× at its top right, the same memory as the page tips) */
.has-x{position:relative;padding-right:44px}
.has-x>.tip-x{position:absolute;top:6px;right:6px;font-size:22px;line-height:1;min-height:36px;min-width:36px;padding:0;color:inherit;text-decoration:none}
/* a long request in flight (the demo load): a dialog with a spinner nobody can close by accident */
.busy-dlg{text-align:center}
.spinner{width:36px;height:36px;margin:8px auto 14px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);
  animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}
/* a fold whose summary is an action ("Edit Mira's contacts"): drawn as an outlined button with a pencil, so it reads
   as something to tap and not as a caption */
summary.edit-btn{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;
  border:1px solid var(--field);border-radius:var(--shape-full);color:var(--accent-text);font-weight:500;width:max-content;max-width:100%}
summary.edit-btn::-webkit-details-marker{display:none}
summary.edit-btn .ic{width:18px;height:18px}
details[open]>summary.edit-btn{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-color:transparent}

/* The Add wizard (owner, 2026-10-16): a list's add form in steps, over the list; a bottom sheet on a phone. */
dialog.wizard{width:min(640px,calc(100vw - 24px));max-height:92dvh;overflow:auto;padding:20px 20px 24px}
dialog.wizard .wz-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
dialog.wizard .wz-head h2{margin:0;font-size:22px;line-height:28px;font-weight:600}
dialog.wizard .wz-head .tip-x{position:static;font-size:26px;color:var(--muted)}
.wz-dots{display:flex;gap:6px;margin:12px 0 16px}
.wz-dots span{flex:1;height:4px;border-radius:var(--shape-full);background:var(--line)}
.wz-dots span.on{background:var(--accent)}
fieldset.wstep{border:0;margin:0;padding:0;min-width:0}
fieldset.wstep[hidden]{display:none}
.wz-nav{justify-content:space-between}
.wz-nav [data-wz-next]{margin-left:auto}
.wz-ways{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;border-radius:var(--shape-m);background:var(--md-surface-container)}
.wz-ways .muted{flex-basis:100%;font-size:14px}
.kind-pick{display:grid;gap:4px}
@media (max-width:600px){
  dialog.wizard{width:100%;max-width:100%;margin:auto 0 0;border-radius:var(--shape-xl) var(--shape-xl) 0 0;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));max-height:94dvh}
  @starting-style{dialog.wizard[open]{transform:translateY(24px)}}
}

/* One drop-down for every list (pickSelect in core.js): the field is a button drawn like an outlined field with our
   chevron; the <select> stays underneath, invisible, so the form and the browser's checks still see it. */
.pick{position:relative;display:block;min-width:0}
.pick>.pick-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.pick-btn{width:100%;min-height:48px;display:flex;align-items:center;justify-content:flex-start;text-align:left;
  padding:12px 36px 12px 14px;border:1px solid var(--field);border-radius:var(--shape-xs);background-color:transparent;
  color:var(--ink);font:inherit;font-size:15px;font-weight:400;line-height:1.35;cursor:pointer;box-shadow:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%) !important;
  background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
@media (pointer:coarse){.pick-btn{font-size:16px}}
.pick-btn:active{transform:none}
.pick-btn:hover:not(:disabled){border-color:var(--ink)}
.pick-btn:focus-visible,.pick-btn[aria-expanded="true"]{outline:0;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
/* a locked field reads as a plain value: no chevron, no fill (the disabled-button rule above must not reach it) */
.pick .pick-btn:disabled{background:transparent !important;color:var(--muted);border:1px solid var(--line);opacity:1;cursor:not-allowed}
.pick-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
label.tf:has(.pick-btn:focus)>.fl,label.tf:has(.pick-btn[aria-expanded="true"])>.fl{color:var(--accent-text)}
.pick-pop{position:fixed;inset:auto;margin:0;padding:6px;border:0;border-radius:var(--shape-xs);background:var(--md-surface-container);color:var(--ink);
  box-shadow:0 2px 6px 2px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.3);max-height:360px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.pick-pop:popover-open{display:flex}
.pick-pop .pick-q{min-height:44px;border-radius:var(--shape-full);background:var(--md-surface-high);border:0;padding:10px 16px}
.pick-list{list-style:none;margin:0;padding:0;overflow:auto;overscroll-behavior:contain;flex:0 1 auto;min-height:0}
.pick-list [role=option]{min-height:44px;display:flex;align-items:center;padding:8px 12px;border-radius:var(--shape-xs);cursor:pointer;overflow-wrap:anywhere}
.pick-list [role=option].active{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.pick-list [role=option][aria-selected="true"]{background:var(--md-secondary-container);color:var(--md-on-secondary-container);font-weight:500}
.pick-list [aria-disabled]{opacity:.5;cursor:default}
.pick-list .pick-add{color:var(--accent-text);font-weight:500}
.pick-group{padding:10px 12px 4px;font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.03em}
.pick-none{padding:12px;color:var(--muted)}
.pick-pop.sheet{left:0;right:0;bottom:0;top:auto;width:100%;max-height:72dvh;border-radius:var(--shape-xl) var(--shape-xl) 0 0;
  padding:8px 12px calc(12px + env(safe-area-inset-bottom))}
.pick-pop.sheet::backdrop{background:var(--md-scrim)}
.pick-title{font-weight:500;padding:10px 12px 4px}
.pick-pop.sheet::before{content:"";align-self:center;width:32px;height:4px;border-radius:2px;background:var(--field);margin:4px 0}

/* Stock (owner, 2026-10-16: the bar is Home · Repairs · Clients · Stock · More): Parts, Tools & supplies, Boxes and
   Purchases side by side on top of their lists, a full-width strip of M3 tabs. */
.subtabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;box-shadow:inset 0 -1px 0 var(--line)}
.subtabs::-webkit-scrollbar{display:none}
.subtabs a{flex:1 0 auto;text-align:center;padding:12px 14px;min-height:48px;text-decoration:none;color:var(--muted);font-weight:500;font-size:14px;
  border-bottom:3px solid transparent;border-radius:3px 3px 0 0;white-space:nowrap}
.subtabs a.on{color:var(--accent-text);border-bottom-color:var(--accent-text)}
@media (hover:hover){.subtabs a:not(.on):hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}}
@media (min-width:900px){
  .subtabs{display:none}   /* the sidebar lists them under Stock */
  .tabs a.tab-sub{display:flex;min-height:40px;padding:0 16px 0 52px;font-size:14px;font-weight:400}
  .tabs a.tab-sub.on{background:none;color:var(--accent-text);font-weight:600}
}
/* a client row's round initial (the Clients list) */
.avatar{flex:none;width:40px;height:40px;border-radius:var(--shape-full);display:grid;place-items:center;font-weight:600;
  background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.rows .side .st{margin-left:4px}
.rows li.rows-head{padding:14px 16px 6px;font-size:12px;font-weight:500;letter-spacing:.03em;color:var(--muted);border-top:0}
.rows li.rows-head+li{border-top:0}

/* The device card's actions and tabs (owner, 2026-10-16) */
.dev-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px;margin:4px 0 16px}
.dev-actions .act{flex-direction:column;gap:4px;min-height:64px;padding:8px 4px;border-radius:var(--shape-l);font-size:13px;font-weight:500;color:var(--ink);border-color:var(--line)}
.dev-actions .act .ic{width:22px;height:22px;color:var(--accent-text)}
.dev-tabs{display:flex;gap:4px;margin:0 0 16px;box-shadow:inset 0 -1px 0 var(--line);position:sticky;top:var(--top-h);z-index:5;background:var(--bg)}
.dev-tabs button{flex:1;background:none;color:var(--muted);border:0;border-bottom:3px solid transparent;border-radius:3px 3px 0 0;min-height:48px;padding:10px 8px;font-size:15px;font-weight:500;box-shadow:none !important}
.dev-tabs button[aria-selected="true"]{color:var(--accent-text);border-bottom-color:var(--accent-text)}
.dev-tabs button:active{transform:none}
.dev-panel[hidden]{display:none}
.timer-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.timer-row button{min-height:44px}
.timer-clock{font-variant-numeric:tabular-nums;font-weight:600}
.dev-status .assign{display:flex;align-items:center;gap:8px}
/* Home's Today: the most pressing counts as big tiles, the rest folded below */
.today-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:900px){.today-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.today-tile{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--shape-m);background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);text-decoration:none;min-height:88px}
.today-tile b{font-size:28px;line-height:32px;font-weight:500;font-variant-numeric:tabular-nums}
.today-tile span{font-size:14px;line-height:18px}
.today-tile:first-child{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.today details.fold{margin-top:12px}
.steps-fold>summary{list-style:none;cursor:pointer}
.steps-fold>summary::-webkit-details-marker{display:none}
.steps-fold>summary h2{display:inline-flex;align-items:center;gap:8px}
.steps-fold>summary h2::after{content:"▾";font-size:14px;color:var(--muted)}
.steps-fold:not([open])>summary h2::after{content:"▸"}

/* Diagnosis (UI stage 4): the faults as big tiles to tap, several at once; the saved faults as rows with their
   part's status; the "ordered in which purchase" list. */
.dx-h{font-size:14px;font-weight:600;color:var(--muted);margin:14px 0 8px}
.dx-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.dx-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:10px 12px;text-align:left;
  border-radius:var(--shape-m);border:1px solid var(--field);background:var(--panel);color:var(--ink);font-weight:500;white-space:normal}
.dx-tile small{color:var(--muted);font-size:13px;font-weight:400}
.dx-tile[aria-pressed="true"]{border-color:var(--accent);background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.dx-tile[aria-pressed="true"] small{color:inherit}
.dx-picked{margin:10px 0 0;min-height:1em}
.dx-found .dx-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.dx-found .dx-row:last-child{border-bottom:0}
.dx-found .main{flex:1;display:flex;flex-direction:column;min-width:0}
.dx-found .main small{color:var(--muted)}
.dx-found .side{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.oi-list{display:flex;flex-direction:column;gap:6px;margin:10px 0;max-height:50vh;overflow:auto}
.oi-row{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--field);border-radius:var(--shape-s)}
.oi-row:has(input:checked){border-color:var(--accent)}
.share-list{margin:0 0 8px;padding-left:18px}
.share-list li{margin:4px 0}
.share-list small{display:block}
/* The sheet editor (Repair prices): one line per symptom or work, edited in place. */
.sheet-rows{display:flex;flex-direction:column;gap:10px}
.sheet-row{display:grid;grid-template-columns:2fr 1.5fr 70px 100px 100px 44px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.sheet-row .sr-del{align-self:center}
@media (max-width:899px){.sheet-row{grid-template-columns:1fr 1fr 44px}.sheet-row .sr-label{grid-column:1/-1}.sheet-row .sr-part{grid-column:1/3}
  .sheet-row .sr-qty{grid-column:3}.sheet-row .sr-price{grid-column:span 1}.sheet-row .sr-del{grid-column:3;grid-row:3}}

/* Device catalog (owner, 2026-10-17: "make it nice and handy"): a card per category, makers that fold, models with
   their board revisions as chips. Deleting stays quiet: a muted ×, red on hover, shown on hover with a mouse. */
.cat-toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.cat-toolbar #cat-filter,#pcatAdd>input,#pcatAdd>label{flex:1;min-width:180px}
.cat-import{border:1px solid var(--line);border-radius:var(--shape-m);padding:12px;margin-bottom:12px;background:var(--bg)}
.cat-import .hint{margin:0 0 6px}
.cat-import textarea{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:13px}
.cat-import .actions{margin-top:6px}
.cat-tree{display:flex;flex-direction:column;gap:10px}
.cat-card{border:1px solid var(--line);border-radius:var(--shape-m);background:var(--bg);overflow:hidden}
.cat-head,.cat-mrow{display:flex;align-items:center;gap:4px;min-height:52px;padding:4px 8px 4px 4px}
.cat-head{padding-top:6px;padding-bottom:6px}
.cat-card.open>.cat-head{border-bottom:1px solid var(--line)}
.cat-title{flex:1;min-width:0;display:flex;flex-direction:column;cursor:pointer;padding:4px 0}
.cat-title b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-head .cat-title b{font-size:17px}
.cat-mrow .cat-title b{font-weight:500}
.cat-title small{color:var(--muted);font-size:13px}
.cat-chev{width:40px;height:40px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;color:var(--muted);border-radius:var(--shape-full);padding:0;cursor:pointer}
.cat-chev svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur) var(--ease-out)}
.cat-chev.open svg{transform:rotate(90deg)}
.cat-x{width:36px;height:36px;flex-shrink:0;border:0;background:none;color:var(--muted);font-size:18px;line-height:1;border-radius:var(--shape-full);padding:0;cursor:pointer}
.cat-x:hover{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.cat-head .link,.cat-mrow .link{white-space:nowrap;font-size:14px}
.cat-makers{padding:4px 0}
.cat-maker+.cat-maker{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.cat-mrow{padding-left:16px}
.cat-models{list-style:none;margin:0 0 8px;padding:0 8px 0 60px;display:flex;flex-direction:column}
.cat-model{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 0;border-top:1px dashed color-mix(in srgb,var(--line) 70%,transparent)}
.cat-model:first-child{border-top:0}
.cat-mname{flex:0 1 auto;min-width:120px;font-weight:500}
.cat-revs{flex:1;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.cat-rev{display:inline-flex;align-items:center;gap:2px;white-space:nowrap;height:30px;padding:0 4px 0 10px;border-radius:var(--shape-s);background:var(--md-surface-high);
  font-size:13px;font-family:var(--mono);color:var(--ink)}
.cat-rev .cat-x{width:24px;height:24px;font-size:15px}
.cat-rev.add{border:1px dashed var(--field);background:none;color:var(--muted);padding:0 10px;font-family:inherit;cursor:pointer;min-height:0;height:30px;font-weight:400}
.cat-rev.add:hover{color:var(--accent-text);border-color:var(--accent)}
.cat-model>.cat-x{margin-left:auto}
.cat-model .cat-addrow{flex-basis:100%}
.cat-addrow{display:flex;gap:8px;align-items:center;padding:6px 12px 10px}
.cat-model .cat-addrow{padding:0}
.cat-addrow input{flex:1;min-width:0}
.cat-addrow button{white-space:nowrap}
.cat-none{color:var(--muted);font-size:14px;padding:8px 16px;margin:0;list-style:none}
.cat-tree mark{background:color-mix(in srgb,var(--accent) 30%,transparent);color:inherit;border-radius:2px}
@media (hover:hover) and (pointer:fine){
  .cat-head>.cat-x,.cat-mrow>.cat-x,.cat-model>.cat-x,.cat-rev .cat-x{opacity:0;transition:opacity var(--dur)}
  .cat-head:hover>.cat-x,.cat-mrow:hover>.cat-x,.cat-model:hover>.cat-x,.cat-rev:hover .cat-x,.cat-x:focus-visible{opacity:1}
}
.cat-addbtn span{margin-left:4px}
@media (max-width:599px){.cat-models{padding-left:16px}.cat-mrow{padding-left:4px}.cat-mname{flex-basis:100%}
  .cat-addbtn span{display:none}.cat-head .cat-addbtn,.cat-mrow .cat-addbtn{font-size:22px;min-width:40px;font-weight:400}.cat-head,.cat-mrow{padding-right:4px}}
@media (prefers-reduced-motion:reduce){.cat-chev svg{transition:none}}
/* Users: the role and "switched off" badges keep their own width beside the name */
.user-row .main>.st{align-self:flex-start;margin-top:4px}

/* Part categories: the device catalog's card, a row per category; the name is edited in place (a field only on
   hover and focus), the count opens Parts filtered to it. */
.pcat-card{padding:4px 0}
.pcat{display:flex;align-items:center;gap:6px;min-height:52px;padding:4px 8px 4px 8px}
.pcat+.pcat{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.pcat .pcat-name{flex:1 1 auto;min-width:0;min-height:40px;padding:6px 10px;border:1px solid transparent;background:none;font-weight:500;border-radius:var(--shape-xs)}
.pcat .pcat-name:hover{border-color:var(--line)}
.pcat .pcat-name:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pcat .pcat-n{flex:none;white-space:nowrap;font-size:14px;padding:6px 10px;border-radius:var(--shape-full)}
.pcat a.pcat-n{color:var(--accent-text);text-decoration:none}
.pcat a.pcat-n:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.pcat button{flex:none}
@media (hover:hover) and (pointer:fine){.pcat>.cat-x{opacity:0;transition:opacity var(--dur)}.pcat:hover>.cat-x,.pcat>.cat-x:focus-visible{opacity:1}}

/* ===== Workbench layer (owner, 2026-10-17, from the Stitch mock-ups "Workbench Ledger"): hairline-framed cards on a
   deeper slate, tinted capital status pills, amber code pills, square-ish buttons and slate secondary buttons, icon-led
   section heads, number tiles with an icon and a foot line. It sits last, over the M3 layer; Inter stays the font. */
section,.rows,.tile,.figs>div{border-radius:14px}
section{padding:18px}
h1{font-weight:650;letter-spacing:-.015em}
h2{font-size:18px;line-height:24px;font-weight:600;letter-spacing:0}
/* a section head led by an amber line icon: <h2 class="sh"><svg class="ic">…</svg>Title <small>meta</small></h2> */
h2.sh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h2.sh>.ic{width:22px;height:22px;color:var(--accent-text)}
h2.sh>small{font-size:12px;font-weight:500;font-family:var(--mono);color:var(--muted);letter-spacing:.02em}
.sh-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sh-row h2{margin:0}

/* Status pills: capital, bold, tinted. */
.st{font-size:11px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:6px}
.dev-status .st{font-size:12px;padding:5px 10px}
/* Codes (RS-0004, BX-0017): an amber pill in the mono face, like the sticker on the box. */
.tape{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-text);
  border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:6px;font-weight:600;letter-spacing:.02em}
.head .tape{font-size:16px;padding:7px 10px}
/* a box chip: where the thing lies */
.where-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 10px;border-radius:8px;border:1px solid var(--line);
  background:var(--md-surface-container);color:var(--ink);font-size:13px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.where-chip .ic{width:16px;height:16px;color:var(--accent-text)}

/* Buttons: 10 px corners; the primary amber and bold, the secondary a slate surface with a hairline. */
.btn,button{border-radius:10px;font-weight:600}
.ghost{background:var(--md-surface-high);color:var(--ink);border:1px solid var(--line)}
.ghost .ic{color:var(--accent-text)}
@media (hover:hover){.ghost:not(:disabled):hover{border-color:var(--field)}}
.danger{background:transparent;color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 45%,transparent)}
.link{border-radius:8px}
summary.edit-btn{border-radius:10px;background:var(--md-surface-high);color:var(--ink);border-color:var(--line)}

/* Filter chips: full round, 38 px, the chosen one amber; a count inside its own little pill. */
.chip{border-radius:var(--shape-full);min-height:38px;padding:7px 14px;border-color:var(--line);background:var(--md-surface-container);
  display:inline-flex;align-items:center;gap:8px}
.chip small{display:inline-block;min-width:20px;padding:0 6px;border-radius:6px;background:color-mix(in srgb,var(--ink) 10%,transparent);
  font-size:12px;font-weight:600;line-height:18px;text-align:center;opacity:1}
.chip.on,label.chip:has(input:checked){background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip.on small{background:color-mix(in srgb,var(--accent-ink) 16%,transparent)}
.chip.alert{color:var(--bad-ink);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.chip.alert.on{background:var(--bad);color:var(--on-bad);border-color:var(--bad)}
/* a row of chips that scrolls sideways fades out at its end, so it reads as more to the right */
.chips.scroll-row{mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);padding-right:24px}

/* Number tiles: a capital label, an icon at the top right, the figure, and a foot line. */
.tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-height:96px}
.tile small{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-right:30px}
.tile b{font-size:30px;line-height:34px;font-weight:700}
.tile>.ic{position:absolute;top:12px;right:12px;width:20px;height:20px;color:var(--accent-text)}
.tile .foot{font-size:12px;color:var(--muted);font-family:var(--mono);margin-top:auto}
@media (hover:hover){button.tile:hover,a.tile:hover{border-color:var(--field)}}
a.tile{text-decoration:none;color:var(--ink)}

/* Navigation: amber for where you are. */
.tabs a.on,.tabs .tab-more.on{color:var(--accent-text)}
.tabs a.on .ic,.tabs .tab-more.on .ic{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text)}
@media (min-width:900px){
  .tabs{border-right:1px solid var(--line)}
  .tabs a.on{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-text);box-shadow:inset 3px 0 0 var(--accent)}
  .tabs a,.tabs a.tab-extra{border-radius:10px}
}
.top{box-shadow:0 1px 0 var(--line)}
.subtabs a.on{color:var(--accent-text)}
.dev-tabs{gap:6px;padding:4px;border-radius:12px;background:var(--md-surface-container);box-shadow:none;border:1px solid var(--line)}
.dev-tabs button{border-bottom:0;border-radius:9px;min-height:44px;font-weight:600}
.dev-tabs button[aria-selected="true"]{background:var(--md-surface-high);color:var(--accent-text)}
.dev-tabs button small{font-weight:500;color:var(--muted);margin-left:4px}

/* The device card (Workbench look): a line with the code, the status (a pill that is the status picker) and the box;
   the head card with the title, how long it has been here, the photo beside the facts; the actions as a row of pills;
   the tabs; and on a phone a dock above the bar with the timer and the next step, under the thumb. */
.dc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.dc-meta .tape{font-size:14px;padding:5px 9px}
.dc-meta .where-chip{margin-left:auto;max-width:60%}
.st-pick{position:relative;display:inline-flex;align-items:center;gap:6px;padding-right:22px;cursor:pointer}
.st-pick::after{content:"";position:absolute;right:9px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.st-pick select{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;cursor:pointer;font-size:16px}
section.dc-head{padding:16px;margin:0 0 12px;background:var(--panel);border:1px solid var(--card-border);border-radius:14px}
.dc-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dc-title h1{font-size:24px;line-height:30px;margin:0}
.dc-days{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--md-surface-high);
  color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap}
.dc-days .ic{width:15px;height:15px}
.dc-sub{margin:6px 0 12px;font-size:14px}
.dc-sub a{color:var(--accent-text)}
.dc-specs{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.dc-specs:has(.dev-hero:not(:empty)){grid-template-columns:128px minmax(0,1fr)}
.dc-specs .dev-hero{position:relative;margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.dc-specs .dev-hero .ld-hero{display:block;width:100%;height:130px;max-width:none;object-fit:cover;border-radius:0;margin:0}
.dvh-n{position:absolute;right:6px;bottom:6px;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.65);color:#fff;font:600 12px var(--mono)}
.dc-specs .facts{display:flex;flex-direction:column;gap:6px}
.dc-specs .facts{gap:8px}
.dc-specs .facts div{display:flex;flex-direction:column;gap:0}
.dc-specs .facts dt{font:500 11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dc-specs .facts dd{margin:0;font-size:15px;line-height:20px;overflow-wrap:break-word}
.dc-specs .dev-hero .ld-hero{height:128px}
.dc-specs:not(:has(.dev-hero:not(:empty))) .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.dc-head .assign{margin-top:12px}
.dc-head .stuck-note{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn-ink)}
.dc-head .stuck-note .ic{width:18px;height:18px;flex:none;margin-top:2px}
.dc-bar{margin:0 0 12px}
.dev-actions{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0;padding:2px 0}
.dev-actions::-webkit-scrollbar{display:none}
.dev-actions .act{flex:0 0 auto;flex-direction:row;gap:8px;min-height:52px;padding:0 16px;border-radius:12px;font-size:15px;font-weight:600}
.dev-actions .act .ic{width:20px;height:20px}
.dc-dock{display:flex;gap:10px}
.dc-dock button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:16px;border-radius:12px}
.dc-dock #nextStep{flex:1 1 auto}
.dc-dock .ic{width:20px;height:20px}
.dock-timer{flex:0 0 auto;font-weight:600}
.dock-timer .timer-clock{font-family:var(--mono)}
.dock-timer.on{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.dock-timer .rec{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.dc-main{min-width:0}
@media (max-width:899px){
  .dc-dock{position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));z-index:19;padding:10px 16px;
    background:var(--md-surface-container);border-top:1px solid var(--line)}
  body:has(.dc-dock){padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  .tabs.open ~ * .dc-dock,body:has(.tabs.open) .dc-dock{display:none}
}
@media (min-width:900px){
  .dc-bar{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
  .dc-dock #nextStep{padding:0 28px}
  .dev-actions{flex:1 1 auto}
}
/* the wide card: the title and the bar across, the tabs on the left, the photo and the facts on the right */
@media (min-width:1200px){
  .dc{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:20px;align-items:start}
  .dc-meta{grid-column:1/-1;grid-row:1}
  .dc-head{display:contents}
  .dc-title{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:16px}
  .dc-title h1{font-size:30px;line-height:36px}
  .dc-sub{grid-column:1/-1;grid-row:3}
  .dc-bar{grid-column:1/-1;grid-row:4;margin-bottom:16px}
  .dc-main{grid-column:1;grid-row:5 / span 3}
  .dc-specs{grid-column:2;grid-row:5;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;background:var(--panel);border:1px solid var(--card-border);border-radius:14px;overflow:hidden}
  .dc-specs .dev-hero{border:0;border-radius:0}
  .dc-specs .dev-hero .ld-hero{height:240px}
  .dc-specs .facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
  .dc-specs .facts div{flex-direction:column;gap:2px;padding:12px 14px;background:var(--panel)}
    .dc-head .assign{grid-column:2;grid-row:6;margin-top:12px}
  .dc-head .stuck-note{grid-column:2;grid-row:7}
}

/* Diagnosis faults as cards (Workbench look): an icon, the fault and its part, a badge for where the part stands,
   the piece on the shelf with "Use now", and the next step for the part. */
.dx-cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dx-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--md-surface-container)}
.dx-card-open{border-left:3px solid var(--bad)}
.dx-card-ordered{border-left:3px solid var(--info-ink)}
.dx-card-arrived{border-left:3px solid var(--accent)}
.dx-card-used{opacity:.8}
.dx-top{display:flex;gap:10px;align-items:flex-start}
.dx-ic{flex:none;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--md-surface-high);color:var(--accent-text)}
.dx-ic .ic{width:19px;height:19px}
.dx-card-used .dx-ic{color:var(--ok-ink)}
.dx-card-open .dx-ic{color:var(--bad-ink)}
.dx-top .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dx-top .main b{font-size:16px;line-height:21px}
.dx-top .main small{color:var(--muted);font-size:13px}
.dx-top .side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.dx-price{font:600 14px var(--mono);color:var(--accent-text);white-space:nowrap}
.dxb-open{background:var(--bad-bg);color:var(--bad-ink)}
.dxb-ordered{background:var(--info-bg);color:var(--info-ink)}
.dxb-arrived{background:var(--warn-bg);color:var(--warn-ink)}
.dxb-used{background:var(--ok-bg);color:var(--ok-ink)}
.dx-stock{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--md-surface-high);font-size:14px}
.dx-stock .ic{width:16px;height:16px;color:var(--accent-text);flex:none}
.dx-sname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-have{flex:none;padding:2px 8px;border-radius:6px;background:var(--info-bg);color:var(--info-ink);font:600 12px var(--mono)}
.dx-where{margin-top:8px}
.dx-link{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--mono);color:var(--accent-text);text-decoration:none}
.dx-link .ic{width:15px;height:15px}
.dx-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dx-acts button{flex:1 1 140px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px}
.dx-acts button .ic{width:18px;height:18px}
.dx-acts select{flex:1 1 100%}

/* The repair journal as a timeline: a dot per entry on a line, the date in amber mono. */
.jsec #jlist,.jsec .jentries{position:relative}
.jentry{position:relative;margin-left:18px;padding:12px 0 12px 14px;border-top:0;border-left:2px solid var(--line)}
.jentry::before{content:"";position:absolute;left:-7px;top:17px;width:12px;height:12px;border-radius:50%;background:var(--md-surface-high);border:2px solid var(--field)}
.jentry:first-of-type::before{background:var(--accent);border-color:var(--accent)}
.jentry header{gap:8px;flex-wrap:nowrap;align-items:flex-start}
.jentry header .jhead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.jentry .jacts{flex:none}
.jentry .jdate{font:600 14px var(--mono);color:var(--accent-text)}
.jentry .jtitle{font-weight:600}
.jentry .jacts .link{min-height:36px;padding:4px 8px;font-size:14px}
.jentry .jacts .danger{border:0}
.jentry p{color:var(--ink);line-height:1.5}

/* The Repairs list as cards (Workbench look) */
.tiles.tiles-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.tiles.tiles-row .tile{min-height:0;padding:10px 10px 12px;gap:2px}
.tiles.tiles-row .tile small{font-size:10px;letter-spacing:.06em;padding-right:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tiles.tiles-row .tile>.ic{top:9px;right:8px;width:16px;height:16px}
.tiles.tiles-row .tile b{font-size:24px;line-height:28px}
@media (min-width:900px){.tiles.tiles-row{gap:12px}.tiles.tiles-row .tile{padding:14px 16px;min-height:88px}.tiles.tiles-row .tile small{font-size:11px}
  .tiles.tiles-row .tile>.ic{width:20px;height:20px;top:12px;right:12px}.tiles.tiles-row .tile b{font-size:30px;line-height:34px}}
.chips.scroll-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chips.scroll-row::-webkit-scrollbar{display:none}
.chips.scroll-row .chip{flex:0 0 auto}
.ic.sm{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.dcards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dcards li.rows-head{display:flex;align-items:center;gap:8px;padding:10px 2px 0;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:0}
.dcards li.rows-head .ic{width:20px;height:20px;color:var(--accent-text)}
.dcard{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--card-border);
  text-decoration:none;color:var(--ink)}
@media (hover:hover){.dcard:hover{border-color:var(--field)}}
.dcard-top{display:flex;align-items:center;gap:8px}
.dcard-money{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.dcard-money b{font:700 18px var(--mono);white-space:nowrap}
.dcard-money small{font:500 11px var(--mono);color:var(--muted)}
.dcard-mid{display:flex;gap:12px;align-items:center}
.dcard-img{flex:none;width:52px;height:52px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.dcard-ph{display:grid;place-items:center;background:var(--md-surface-high);color:var(--muted)}
.dcard-mid .main{min-width:0;display:flex;flex-direction:column;gap:2px}
.dcard-mid .main b{font-size:16px;line-height:21px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.dcard-mid .main small{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard-mid .dot{margin:0 6px;opacity:.6}
.dc-box{color:var(--accent-text)}
.dcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-size:13px}
.dcard-what{display:flex;align-items:center;gap:8px;min-width:0;font-family:var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard-foot small{flex:none;font:500 12px var(--mono);color:var(--muted)}
.fdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--warn-ink)}
.fdot-ok{background:var(--ok)} .fdot-bad{background:var(--bad)} .fdot-info{background:var(--info-ink)}
@media (max-width:899px){
  .tiles.tiles-row .tile>.ic{display:none}
  .tiles.tiles-row .tile small{padding-right:0;white-space:normal;line-height:13px;min-height:26px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
}
@media (min-width:900px){
  .dcard{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mid top" "foot foot";column-gap:16px;row-gap:10px;align-items:center}
  .dcard-top{grid-area:top;justify-content:flex-end;gap:10px}
  .dcard-mid{grid-area:mid}
  .dcard-foot{grid-area:foot}
  .dcard-money{min-width:96px}
}

/* Home (Workbench look): the intake button, Today's tiles with a capital name, an icon and the long words as a foot
   line, the device that stood still, compact quick actions, the first steps as a progress bar and the next two. */
.home-intake{display:inline-flex;align-items:center;gap:8px}
.home-intake .ic{width:20px;height:20px}
@media (max-width:599px){.page-head:has(.home-intake){flex-direction:column;align-items:stretch}.page-head:has(.home-intake)>div:first-child{flex:none}.home-intake{justify-content:center;min-height:52px;font-size:16px}}
.today{background:none;border:0;padding:0}
.today>h2{margin-bottom:10px}
.today-tile{position:relative;gap:6px;padding:14px;border-radius:14px;background:var(--panel);color:var(--ink);border:1px solid var(--card-border);min-height:120px}
.today-tile:first-child{background:var(--panel);color:var(--ink);border-top:3px solid var(--accent)}
.today-tile small{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text);padding-right:26px}
.today-tile>.ic{position:absolute;top:12px;right:12px;width:20px;height:20px;color:var(--accent-text)}
.today-tile b{font-size:32px;line-height:36px;font-weight:700}
.today-tile span{margin-top:auto;font-size:13px;color:var(--muted);display:flex;align-items:flex-end;justify-content:space-between;gap:6px}
.today-tile span .go{width:16px;height:16px;flex:none;color:var(--muted)}
@media (hover:hover){.today-tile:hover{border-color:var(--field)}}
.radar{border-left:3px solid var(--accent);padding:14px 16px}
.radar-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text)}
.radar-head .ic{width:18px;height:18px}
.radar-head .tape{margin-left:auto;font-size:12px;padding:3px 7px}
.radar-title{display:block;margin:8px 0 2px;font-size:17px}
.radar p{margin:0;color:var(--muted);font-size:14px}
.radar .actions{margin-top:12px}
.radar .btn{display:inline-flex;align-items:center;gap:8px}
.radar .btn .ic{width:18px;height:18px}
.quick-h{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:4px 0 8px}
.quick-btn{border:1px solid var(--card-border);border-radius:14px}
.quick-btn .q-short{display:none}
/* Home's quick actions shrink to icon + short word on a phone; the Settings tiles share .quick but keep their words */
@media (max-width:599px){
  .quick:not(.settings-links){grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px}
  .quick:not(.settings-links) .quick-btn{min-height:72px;padding:10px 4px;align-items:center;justify-content:center;gap:6px;text-align:center}
  .quick:not(.settings-links) .quick-btn .ic{width:24px;height:24px}
  .quick:not(.settings-links) .quick-btn b,.quick:not(.settings-links) .quick-btn small{display:none}
  .quick:not(.settings-links) .quick-btn .q-short{display:block;font-size:12px;font-weight:600;line-height:1.2}
  .settings-links{grid-template-columns:1fr 1fr;gap:8px}
}
.steps-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.steps-head h2{margin:0}
.steps-n{flex:none;padding:6px 9px;border-radius:8px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-text);font:700 14px var(--mono)}
#stepsSec .progress{height:6px;margin:0 0 10px}
#stepsSec .progress span{background:var(--accent)}
.steps-next .row{padding:12px;margin:6px 0;border-radius:12px;background:var(--md-surface-container);border:1px solid var(--line)}
.steps-next li+li{border-top:0}
.steps-next .step-mark{width:14px;height:14px;background:var(--accent);border:3px solid color-mix(in srgb,var(--accent) 35%,var(--panel))}
.steps-next .btn{pointer-events:none}
#stepsSec .steps-fold{margin-top:8px}
#stepsSec .steps-fold>summary{color:var(--accent-text);font-weight:600;padding:8px 0}

/* Parts as cards (Workbench look): the code and category over the name, the box path, the pieces large on the
   right, a bar of what is left and "Use on…"; a part running low gets a red edge. */
ul.pcards{background:none;border:0;box-shadow:none;display:flex;flex-direction:column;gap:10px;overflow:visible}
ul.pcards>li{background:var(--panel);border:1px solid var(--card-border);border-radius:14px;overflow:hidden}
ul.pcards>li+li{border-top:1px solid var(--card-border)}
ul.pcards>li[data-low]{border-left:3px solid var(--bad)}
ul.pcards .row{align-items:flex-start;padding:12px 14px 8px}
ul.pcards .row-thumb{width:52px;height:52px;border-radius:10px}
.pc-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.pc-top .tape{font-size:12px;padding:3px 7px}
.pc-cat{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:var(--md-surface-high);color:var(--muted)}
ul.pcards .main b{font-size:16px;line-height:21px}
ul.pcards .main small.where{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:2px}
.pc-qty{font:700 17px var(--mono);white-space:nowrap}
.pc-each{font:500 12px var(--mono)}
ul.pcards li[data-low] .pc-qty{color:var(--bad-ink)}
.pc-foot{display:flex;align-items:center;gap:12px;padding:0 14px 12px}
.pc-bar{flex:1;height:5px;border-radius:999px;background:var(--md-surface-high);overflow:hidden}
.pc-bar i{display:block;height:100%;background:var(--accent);border-radius:inherit}
ul.pcards li[data-low] .pc-bar i{background:var(--bad)}
.pc-use{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px}
.pc-use .ic{width:17px;height:17px}
.rows:not(.no-sel) .pc-use{visibility:hidden}
ul.pcards li.out .row{opacity:.6}
@media (min-width:900px){.pc-foot{padding-top:0}.pc-use{min-height:38px}.pc-bar{max-width:420px}}
.chip.alert .ic{color:inherit;margin-right:0}

/* Clients (Workbench look, Stitch block 1): cards with the initial, the pills stacked on the right and what is unpaid
   in mono; the client's card leads with their devices and the money, the contacts folded last. */
.tile b.tb-text{font-family:var(--mono);white-space:nowrap;letter-spacing:-.02em}
@media (max-width:899px){.tiles-row .tile b.tb-text{font-size:17px;line-height:28px}}
.wz-dots:empty{margin:6px 0 0}
ul.ccards{background:none;border:0;box-shadow:none;display:flex;flex-direction:column;gap:10px;overflow:visible}
ul.ccards>li{background:var(--panel);border:1px solid var(--card-border);border-radius:14px}
ul.ccards>li+li{border-top:1px solid var(--card-border)}
ul.ccards .row{padding:14px;min-height:72px}
ul.ccards .avatar{width:44px;height:44px;background:var(--md-surface-high);color:var(--ink);font-size:17px}
ul.ccards .main b{font-size:17px}
ul.ccards .side{gap:5px}
.c-unpaid{font:500 12px var(--mono);color:var(--muted)}
@media (min-width:900px){
  ul.ccards{gap:0;border:1px solid var(--card-border);border-radius:14px;background:var(--panel);overflow:hidden}
  ul.ccards>li{border:0;border-radius:0}
  ul.ccards>li+li{border-top:1px solid var(--line)}
}
.head-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.head-acts .btn,.head-acts button{display:inline-flex;align-items:center;gap:8px;min-height:48px}
.head-acts .ic{width:18px;height:18px}
@media (max-width:599px){.page-head:has(.head-acts){flex-direction:column;align-items:stretch}.page-head:has(.head-acts)>div:first-child{flex:none}
  .head-acts{width:100%}.head-acts button{flex:1 1 auto;justify-content:center}}
.sh-sum{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:600}
.sh-sum .ic{width:22px;height:22px;color:var(--accent-text)}
.pay-list{margin-top:10px;border-top:1px solid var(--line)}
.pay-amt{font-family:var(--mono)}
section .dcards{margin-top:4px}

/* The header on a phone (Stitch block 1): the workshop's name has the room, the search is a magnifier button that
   opens into the whole header on a tap (the focus rule above), the scan button beside it. */
#jump{position:relative;align-items:center}
.jump-ic{display:none;position:absolute;right:11px;z-index:1;width:22px;height:22px;color:var(--ink);pointer-events:none}
@media (max-width:599px){
  .brand .brand-name{max-width:9em}
  .top .brand{flex:0 1 auto;overflow:hidden;margin-right:auto}
  .top form{min-width:0;flex:0 0 auto}
  .top:has(#jump input:focus) form{flex:1 1 auto}
  .top{gap:4px;padding-left:12px;padding-right:10px}
  .top .icon-btn{min-width:40px;width:40px;padding:0}
  .top input:not(:focus){width:44px;min-width:44px;padding:0;color:transparent;caret-color:transparent}
  .top input:not(:focus)::placeholder{color:transparent}
  .top #jump:not(:has(input:focus)) .jump-ic{display:block}
}

/* Long forms in groups (New device, Device details): an amber icon and a title over each group, a hairline above. */
h3.fgroup{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:15px;font-weight:600;color:var(--ink)}
h3.fgroup .ic{width:20px;height:20px;color:var(--accent-text)}
form.grid>h3.fgroup:first-child,#own-fields>h3.fgroup:first-child{margin-top:0;padding-top:4px;border-top:0}
.proj h3.fgroup{border-top:0;padding-top:0;margin:0 0 10px}
.client-switch{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--md-surface-container);font-weight:600}
.client-switch:has(input:checked){border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.form-dock button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.form-dock .ic{width:18px;height:18px}
@media (max-width:899px){
  .form-dock{position:sticky;bottom:calc(68px + env(safe-area-inset-bottom));z-index:6;margin:8px -18px -18px;padding:12px 18px;
    background:var(--md-surface-container);border-top:1px solid var(--line);border-radius:0 0 14px 14px}
  .form-dock button[value="print"]{flex:1 1 100%;min-height:52px;font-size:16px}
  .form-dock .ghost{flex:1 1 0}
}
@media (max-width:899px){
  .form-dock .ghost{min-height:44px;font-size:14px;padding:0 10px;white-space:nowrap}
  #packs .pack-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  #packs .pack-row::-webkit-scrollbar{display:none}
  #packs .pack-row .muted{flex:none;white-space:nowrap}
  #packs .pack-row .chip{flex:0 0 auto}
}

/* Tools & supplies (Workbench look, Stitch block 2): rows as Parts cards (a supply with its bar and Use 1), four
   tiles, two by two on a phone; the card leads with the code, the kind and the box like a device card. */
@media (max-width:899px){.tiles.tiles-row.tiles-4{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles.tiles-row.tiles-4 .tile>.ic{display:block}
  .tiles.tiles-row.tiles-4 .tile small{padding-right:20px;min-height:0;white-space:nowrap;display:block}}
.it-bar{flex-wrap:wrap;gap:8px}
.it-bar .chips{flex:1 1 260px;min-width:0}
ul.pcards li.out .row img{filter:grayscale(.6)}
section.it-head{padding:16px}
.it-use #useForm button{display:inline-flex;align-items:center;gap:8px}
.it-use #useForm button .ic{width:18px;height:18px}
.wz-next{display:inline-flex;align-items:center;gap:8px}
.wz-next .ic{width:18px;height:18px}
/* the Supply / Tool choice as two big options */
.kind-pick{gap:8px}
.kind-pick label.radio{min-height:56px;padding:10px 14px;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-high);cursor:pointer;line-height:20px}
.kind-pick label.radio:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
.kind-pick input[type=radio]{accent-color:var(--accent);width:20px;height:20px;flex:none}
/* a supply's Use: how many and the date, then the note and the button, the log under it */
.it-use #useForm{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:end}
.it-use #useForm label{flex:none !important}
.it-use #useForm button{min-height:48px;justify-content:center}
@media (min-width:600px){.it-use #useForm{grid-template-columns:110px 190px minmax(0,1fr) auto}}
.it-use .list{margin-top:12px}
.it-use .list .exp-side b{font-family:var(--mono)}
.it-head .dc-meta .where-chip{margin-left:0;max-width:100%;min-width:0}
.it-head .where-chip span,.it-head .where-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the Label block: Copies and Tape as two outlined selects wide enough for their floating names */
.inline-select:has(#copies-pick),.inline-select.lb-tape{min-width:104px}
.inline-select:has(#copies-pick) .pick-btn,.inline-select.lb-tape .pick-btn{width:100%}

/* Boxes (Workbench look, Stitch block 3): the list is a tree of cards, a box standing on its own framed, the boxes
   inside it hanging under it on a line; the drawer's bins carry their count in a pill; from 1200 px the card is two
   columns, the map and what is inside on the left, putting, photos, the label and details on the right. */
ul.bxtree{background:none;border:0;box-shadow:none;display:flex;flex-direction:column;overflow:visible}
ul.bxtree>li{background:var(--panel);border:1px solid var(--card-border);border-radius:14px;margin-top:10px}
ul.bxtree>li+li{border-top:1px solid var(--card-border)}
ul.bxtree>li:first-child{margin-top:0}
ul.bxtree>li[data-depth]:not([data-depth="0"]){margin-top:4px;background:var(--md-surface-container);border-radius:10px;position:relative}
ul.bxtree>li[data-depth="1"]{margin-left:16px}
ul.bxtree>li[data-depth="2"]{margin-left:32px}
ul.bxtree>li[data-depth="3"],ul.bxtree>li[data-depth="4"]{margin-left:48px}
ul.bxtree>li[data-depth]:not([data-depth="0"])::before{content:"";position:absolute;left:-9px;top:-5px;bottom:50%;border-left:1px solid var(--line);border-bottom:1px solid var(--line);width:8px;border-bottom-left-radius:6px}
ul.bxtree>li[data-depth]:not([data-depth="0"]) .row{min-height:52px;padding-top:8px;padding-bottom:8px}
ul.bxtree>li[data-depth="2"] .main b,ul.bxtree>li[data-depth="3"] .main b{font-size:15px}
ul.bxtree .tree-pad{width:auto;font-size:14px;color:var(--muted)}
ul.bxtree .side small{font-size:11px;letter-spacing:.04em}
.bx-pos{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:5px;background:var(--md-surface-high);color:var(--muted);font:600 11px var(--mono);vertical-align:2px}
section.bx-head{padding:16px}
.bx-head .dc-meta{margin-bottom:8px}
.bx-head .crumbs{margin:0;font-size:14px}
.bx-acts{align-items:center;margin-top:12px}
.bx-acts .btn,.bx-acts button{display:inline-flex;align-items:center;gap:8px}
.bx-acts .ic{width:18px;height:18px}
.bx-checked{margin:0}
.sh-n{font:500 12px var(--mono);color:var(--muted);margin-left:4px}
.gf-bin{position:relative}
.gf-bin small{font-family:var(--mono)}
.gf-n{position:absolute;top:4px;right:4px;font:700 11px var(--mono);font-style:normal;padding:0 5px;border-radius:5px;background:var(--accent);color:var(--accent-ink);line-height:16px}
.gf-bin b{padding-right:18px}
.gf-front{color:var(--accent-text);border-top-color:var(--accent);letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:700}
#kidf .actions button{display:inline-flex;align-items:center;gap:8px}
#kidf .actions button .ic{width:18px;height:18px}
.bx-code input{text-transform:uppercase;font-family:var(--mono)}
.bx-cols{display:contents}
.bx-main,.bx-side{display:contents}
@media (min-width:1200px){
  .bx-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
  .bx-main,.bx-side{display:flex;flex-direction:column;gap:16px;min-width:0}
  .bx-main>section,.bx-side>section{margin:0}
}
ul.bxtree .tree-pad{display:none}

/* Purchases (Workbench look, Stitch block 2A): rows as Parts cards (code and status pills on top, the cost big in
   mono, Order ↗ under it); the card leads with code, status and Mark received (beside the title from 900 px), money
   in mono, parcels as framed rows, and from 1200 px money, lines and parcels left, labels, photos, inspection right. */
ul.pocards>li{position:relative}
ul.pocards .row-actions{position:absolute;right:6px;top:38px;padding:0}
ul.pocards>li.has-order .main{padding-right:64px}
ul.pocards .order-link{font-size:13px;min-height:40px}
ul.pocards .main small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
section.po-head{padding:16px}
.po-acts{margin-top:14px}
.po-acts #receive{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.po-acts .ic{width:18px;height:18px}
@media (max-width:599px){.po-acts #receive{flex:1 1 100%;min-height:52px}}
@media (min-width:900px){section.po-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
  .po-acts{margin-top:0;flex:none}}
.po-money .ln span:last-child,.po-lines .pc-qty{font-family:var(--mono);font-weight:600;white-space:nowrap}
.po-money .ln.sum span:last-child{font-size:18px;font-weight:700}
.po-parcels .parcel{border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container);padding:12px 14px;margin-bottom:8px}
.po-parcels ul.rows.parcels{background:none;border:0;box-shadow:none}
.po-parcels .parcel+.parcel{border-top:1px solid var(--card-border)}
.danger-text{color:var(--bad-ink) !important}
@media (min-width:1200px){.bx-side form.grid>label{grid-column:1/-1}}
/* the New purchase form (Stitch 2A): each line a framed card with its head and Remove line in red, + Devices line /
   + Parts line side by side, the save buttons in the dock; a received purchase offers Print all labels on top */
fieldset.line{background:var(--md-surface-container);border:1px solid var(--card-border);border-radius:14px;padding:14px;margin:4px 0 12px;position:relative;--fl-bg:var(--md-surface-container)}
fieldset.line legend{float:left;width:auto;padding:0;margin:0;font-size:16px;font-weight:650;line-height:36px;display:flex;align-items:center;gap:8px}
fieldset.line legend::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
fieldset.line[data-kind="parts"] legend::before{background:var(--info-ink)}
fieldset.line legend+*{clear:both}
fieldset.line .line-remove{position:absolute;top:12px;right:12px;margin:0;color:var(--bad-ink);border-color:transparent;background:none;display:inline-flex;align-items:center;gap:6px;min-height:36px}
fieldset.line .line-remove .ic{width:16px;height:16px}
fieldset.line .share{font-family:var(--mono)}
.add-lines button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.add-lines .ic{width:18px;height:18px;color:var(--accent-text)}
#f>h3.fgroup:first-child{margin-top:0}
.po-print{align-items:center}
.po-print #print-all{display:inline-flex;align-items:center;justify-content:center;gap:8px}
@media (max-width:599px){.po-print #print-all{flex:1 1 auto;min-height:52px}}
.po-locked{padding:10px 12px;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container)}
.add-lines button{white-space:nowrap;padding:0 12px}

/* A part's card (Workbench look, Stitch block 2B): code, category, running low and the box on top, four tiles, Use on…
   right under them (a part always goes on a device), Reserved and Used in as rows, the Details form in groups. */
.lot-use{margin:0 0 16px}
.lot-use #useOnBtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;font-size:16px}
.lot-use .ic{width:20px;height:20px}
.lot-use .hint{margin:6px 0 0;text-align:center}
@media (min-width:900px){.lot-use #useOnBtn{width:auto;display:inline-flex;padding:0 28px}.lot-use .hint{text-align:left}}
.lot-rsv .list li,.lot-used li{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lot-used li>span:first-child{display:flex;align-items:center;gap:8px;min-width:0}
.lu-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.lu-side small{font:500 12px var(--mono);color:var(--muted)}
#edit>h3.fgroup:first-child{margin-top:0}
/* the add wizard's other ways in: full-width rows with an arrow; step 2's price per piece as it is typed */
.wz-ways{display:grid;gap:8px;padding:0;background:none}
.wz-ways .muted{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.wz-ways .btn{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 16px;border-radius:10px;text-align:left}
.wz-ways .btn::after{content:"›";font-size:22px;color:var(--muted);margin-left:12px}
.unit-note{margin:0;padding:10px 12px;border-radius:10px;background:var(--md-surface-container);border:1px solid var(--card-border);font-family:var(--mono)}
.unit-note:empty{display:none}
.money-fields .unit-note{grid-column:1/-1}
/* Chips from a photo (Stitch block 2B): a big photo zone, the model in a line, Recognise full width; each chip found
   a framed card with its marking, the confidence and what is already in stock; the box, price and Save in the dock. */
.chip-zone{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.chip-zone>.ic{width:34px;height:34px;color:var(--accent-text)}
.chip-model{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin:12px 0 0;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container)}
.chip-model b{font-size:13px;overflow-wrap:anywhere}
.chip-model a{margin-left:auto}
.chip-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px}
.chip-go .ic{width:18px;height:18px}
@media (max-width:599px){.chip-go{flex:1 1 100%}}
fieldset.chip-part{background:var(--md-surface-container);border:1px solid var(--card-border);border-radius:14px;padding:14px;--fl-bg:var(--md-surface-container)}
.cp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cp-head b{font-size:18px}
.cp-head input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}
.cp-stock{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:8px 10px;border-radius:8px;background:var(--md-surface-high);font-size:14px}
.cp-stock a{font-family:var(--mono);color:var(--accent-text)}
@media (max-width:599px){.cp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cp-grid>label{grid-column:auto}.cp-grid>label.full{grid-column:1/-1}}
.cp-dock #cpSave{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px}
@media (max-width:599px){.cp-dock #cpSave{flex:1 1 100%}}
.cp-grid,.cp-dock .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.cp-grid>label.full{grid-column:1/-1}

/* Expenses and a device's money (Workbench look, Stitch block 3A): expenses as cards with the day in mono and the
   category pill, chips by category; the Money tab as ledgers (the cost basis with its parts, the sale with its
   margin large), the sale form with the platforms as chips and the margin it would leave; a donor's harvest as
   part cards under three figures. */
.excards .ex-date{font:600 12px var(--mono);color:var(--accent-text)}
.excards .ex-rc{display:inline-flex;align-items:center;gap:4px}
.excards .thumbs.mini{margin-top:6px}
.ex-foot{justify-content:flex-end;gap:6px}
.ex-foot .ghost{display:inline-flex;align-items:center;gap:6px}
#exl li.editing{border-color:var(--accent)}
.mn-card .ln>span:last-child,.sale-calc .ln>span:last-child{font-family:var(--mono);white-space:nowrap}
.mn-card .ln.sum,.sale-calc .ln.sum{border-top-color:var(--card-border)}
.mn-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.mn-head h2{margin:0}
.mn-total{font:700 22px var(--mono);white-space:nowrap}
.mn-parts{margin:0 0 4px 12px;padding-left:10px;border-left:2px solid var(--card-border)}
.mn-parts .ln{font-size:14px;padding:2px 0}
.mn-parts .ln small{color:var(--muted)}
.sale-plats{margin:0 0 4px}
.sale-plats .chip small{font-family:var(--mono)}
.sale-calc:empty{display:none}
.sale-calc{background:var(--md-surface-high);border-radius:10px;padding:10px 14px}
.sale-calc .ln.sum{font-size:1.15rem}
.dn-sec .tiles{margin:6px 0 12px}
.dn-sec ul.pcards{margin-bottom:12px}
.dn-add>summary.btn{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;list-style:none}
.dn-add>summary.btn::-webkit-details-marker{display:none}
.dn-add[open]>summary.btn{display:none}
.dn-off{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--card-border)}
.dn-off span{color:var(--muted)}
.mn-parts .ln>span:first-child{min-width:0}
.mn-parts .ln small{display:block}
.mn-sold{margin-top:12px;padding-top:12px;border-top:1px solid var(--card-border)}
.mn-sold>p:first-child{margin-top:0;color:var(--muted)}
@media (min-width:900px){.excards>li{display:flex;align-items:center}.excards>li>.row{flex:1;min-width:0;padding-bottom:12px}.excards .ex-foot{padding:0 14px 0 0}}

/* The Journal tab as a timeline (Workbench look, Stitch block 3B): a day's date in amber mono with its weekday, its
   entries as framed cards on a line: the device's code, name and client, whether the client sees it, the note, photos,
   files and the way to the card. From 900 px the date stands in its own column on the left. */
.jtl{display:flex;flex-direction:column;gap:18px}
.jday-head{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.jday-head b{font:600 14px var(--mono);color:var(--accent-text)}
.jday-head small{font:500 11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.jday-list{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:10px}
.jcard{position:relative;background:var(--panel);border:1px solid var(--card-border);border-radius:14px;padding:12px 14px}
.jcard::before{content:"";position:absolute;left:-21px;top:18px;width:10px;height:10px;border-radius:50%;background:var(--md-surface-high);border:2px solid var(--field)}
.jday:first-child .jcard:first-child::before{background:var(--accent);border-color:var(--accent)}
.jcard.jc-here{border-color:var(--accent)}
.jc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jc-top .tape{font-size:12px;padding:3px 7px}
.jc-dev{font-weight:600;min-width:0}
.jc-dev small{font-weight:400;color:var(--muted)}
.jc-title{display:block;font-size:17px;line-height:23px;margin-top:8px}
.jc-body{margin:6px 0 0;line-height:1.5;color:var(--ink);white-space:pre-line}
.jc-ph{margin-top:10px}
.jc-ph img{width:88px;height:88px;object-fit:cover;border-radius:10px;cursor:zoom-in}
.jc-att{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.jc-att a{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--card-border);border-radius:10px;text-decoration:none;color:var(--ink);font:500 13px var(--mono);min-width:0}
.jc-att a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-att a small{color:var(--muted)}
.jc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.jc-foot .btn{display:inline-flex;align-items:center;gap:6px}
@media (min-width:900px){
  .jday{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 16px}
  .jday-head{flex-direction:column;align-items:flex-end;gap:2px;margin:14px 0 0;text-align:right}
  .jc-ph img{width:120px;height:120px}
}

/* Device details on its own tab (Stitch block 3B): the fold's own title is gone (the tab says it), the groups are
   numbered heads in small mono capitals, Save carries a tick. */
details.fold:has(#edit)>summary{display:none}
#edit,#f{counter-reset:fg}
#edit>h3.fgroup,#f>h3.fgroup{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
#edit>h3.fgroup .ic,#f>h3.fgroup .ic{width:18px;height:18px}
#edit>h3.fgroup>span::before,#f>h3.fgroup>span::before{content:counter(fg) ". ";counter-increment:fg}
#edit .actions button:first-child{display:inline-flex;align-items:center;gap:8px;min-width:180px;justify-content:center}
.jtl>section.jday{background:none;border:0;box-shadow:none;padding:0;margin:0}
@media (max-width:899px){#edit .actions button:first-child{flex:1 1 100%}}

/* The Diagnosis tab (Stitch block 3B): to buy and ordered as framed rows (the part and the devices waiting for it,
   then needed / free / buy in mono, buy large in amber), the sheets as cards with their devices and lines. */
ul.need-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
ul.need-rows>li{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,56px);gap:8px;align-items:center;padding:10px 12px;
  border:1px solid var(--card-border);border-radius:12px;}
ul.need-rows>li:has(.nr-fig:only-of-type){grid-template-columns:minmax(0,1fr) 56px}
.nr-name{display:flex;flex-direction:column;gap:6px;min-width:0}
.nr-name b{overflow-wrap:anywhere}
.nr-devs{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.nr-devs .tape{font-size:11px;padding:2px 6px;text-decoration:none}
.nr-po{display:inline-flex;align-items:center;gap:4px;font:600 12px var(--mono)}
.nr-fig{display:flex;flex-direction:column;align-items:center;text-align:center}
.nr-fig small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nr-fig b{font:600 17px var(--mono)}
.nr-buy b{font-size:22px;color:var(--accent-text)}
ul.sheet-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.sheet-card{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--card-border);border-radius:12px}
.sheet-card .sc-scope{font:700 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.sheet-card b{font-size:16px}
.sheet-card .sc-meta{font-size:12px;color:var(--muted)}
.sheet-card button{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:6px}

/* Repair prices (Stitch block 3B): the lines of a sheet with the prices in mono; on a phone each line is a framed
   card; Add a line and Save at the foot, the sheet's devices, name and New sheet on the right from 1200 px. */
.sheet-row input[name=price],.sheet-row input[name=price_max],.sheet-row input[name=qty_per_unit]{font-family:var(--mono)}
.sheet-acts{justify-content:space-between;margin-top:14px}
.sheet-acts button{display:inline-flex;align-items:center;gap:8px}
@media (max-width:899px){
  .sheet-rows{gap:10px}
  .sheet-row{border:1px solid var(--card-border);border-radius:12px;padding:12px;--fl-bg:var(--panel)}
  .sheet-acts{position:sticky;bottom:calc(68px + env(safe-area-inset-bottom));z-index:5;background:var(--panel);padding:10px 0;margin-bottom:-10px}
  .sheet-acts button{flex:1 1 0}
}
@media (min-width:1200px) and (max-width:1499px){.bx-cols.pr-cols{display:block}.bx-cols.pr-cols>.bx-side{margin-top:16px}}
@media (min-width:1500px){.bx-cols.pr-cols{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}}
@media (max-width:899px){ul.sheet-cards{grid-template-columns:1fr 1fr;gap:8px}.sheet-card{padding:10px}.sheet-card b{font-size:15px}}

/* Workshop & documents (Stitch block 3B): the form in groups, the logo as a tile beside Change / Remove (picking a
   file uploads it), the paper tabs as a segmented row. */
.logo-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo-row .logo-box{width:96px;height:96px;display:flex;align-items:center;justify-content:center;border:1px solid var(--card-border);border-radius:12px;overflow:hidden;padding:8px;margin:0}
.logo-row .logo-preview{max-width:100%;max-height:100%;object-fit:contain}
.logo-none{font-size:11px;color:var(--muted);text-align:center;line-height:1.3}
.logo-row form{display:flex;gap:8px;flex-wrap:wrap}
.logo-row label.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
#wsf .actions button{display:inline-flex;align-items:center;gap:8px}
.doc-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;background:var(--md-surface-container);padding:4px;border-radius:12px;gap:4px}
.doc-tabs .chip{border:0;flex:1 0 auto;justify-content:center}
@media (max-width:899px){.sheet-row{grid-template-columns:1fr 1fr 72px}}
/* Workbench look, block 3C: Search, the header's drop-down, the More sheet, Calibrate. */
.sr-bar{position:relative;display:flex;align-items:center}
.sr-bar>.ic{position:absolute;left:14px;color:var(--muted);pointer-events:none}
.sr-bar input{padding-left:44px}
.search-chips{margin:4px 0 12px}
.sr-sec{margin-bottom:18px}
.sr-rows .pc-top:empty{display:none}
.sr-rows .main b,#jumpHits .hit-main b{overflow-wrap:anywhere}
.sr-rows mark,#jumpHits mark{background:color-mix(in srgb,var(--accent) 30%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.sr-snip{display:block;color:var(--muted);overflow-wrap:anywhere}
.sr-rows .where{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.sr-rows .go{color:var(--muted);font-size:20px}
#jumpHits .hg-head{display:flex;align-items:center;gap:8px;padding:10px 14px 4px;color:var(--muted);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
#jumpHits .hg-head .ic{color:var(--accent-text)}
#jumpHits .hg-head small{margin-left:auto;font-family:var(--mono);font-weight:500;text-transform:none;letter-spacing:0}
#jumpHits .hit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;flex-direction:row;border-top:0}
#jumpHits .hit-main{display:flex;flex-direction:column;min-width:0}
#jumpHits .hit-main small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jumpHits .hit.on,#jumpHits .hit:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
#jumpHits .hit-foot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--card-border);padding:0 14px 0 0}
#jumpHits .hit-foot .hit.all{display:flex;flex:1}
.hit-keys{font-size:12px;color:var(--muted);white-space:nowrap}
.hit-keys kbd{font:500 11px var(--mono);border:1px solid var(--card-border);border-radius:4px;padding:1px 5px;margin:0 2px;color:var(--ink)}
@media (min-width:900px){#jumpHits{left:auto;right:12px;width:min(600px,calc(100vw - 260px))}}
.tab-desc{display:none}
@media (max-width:899px){
  .tabs.open a.tab-extra{grid-column:span 30;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;
    align-items:center;justify-items:start;text-align:left;padding:10px 12px;font-size:13px}
  .tabs.open a.tab-extra .ic{grid-row:1 / span 2}
  .tabs.open a.tab-extra .tab-desc{display:block;font-size:11px;font-weight:400;color:var(--muted);line-height:1.25}
  .tabs.open a.tab-extra .tab-short{display:none}
  .tabs.pinned:not(.open) a.tab-extra.on .tab-desc{display:none}
}
.cal-need{display:flex;gap:12px;align-items:flex-start;padding:14px 16px}
.cal-need p{margin:0;color:var(--muted)}
.cal-need-ic{color:var(--accent-text);flex:0 0 auto}
.cal-frame{border:1px solid var(--card-border);border-radius:10px;overflow:hidden;background:var(--panel)}
.cal-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--card-border);flex-wrap:wrap}
.cal-url{flex:1;min-width:0;font:500 12px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-frame .embed{border:0;border-radius:0;display:block}
ul.need-rows .nr-act{grid-column:1 / -1;justify-self:end;display:inline-flex;align-items:center;gap:6px}
/* Workbench look, block 4A: the Settings hub and Printer & labels. */
.settings-links{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.st-tile{gap:6px;padding:16px;min-height:132px;justify-content:flex-start}
.stt-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%;margin-bottom:6px}
.stt-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--md-surface-container);
  border:1px solid var(--card-border);color:var(--accent-text);flex:none}
.stt-ic .ic{width:22px;height:22px}
.stt-pill{font:700 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;
  background:var(--md-surface-container);color:var(--muted);border:1px solid var(--card-border);white-space:nowrap}
.stt-pill.ok{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text);border-color:transparent}
.st-tile b{font-size:16px}
.stt-wide{grid-column:1 / -1;flex-direction:row;align-items:center;min-height:0;gap:14px}
.stt-words{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.stt-go{color:var(--muted)}
@media (max-width:599px){
  .settings-links{grid-template-columns:1fr 1fr;gap:8px}
  .st-tile{padding:12px;min-height:118px}
  .stt-ic{width:36px;height:36px}
  .st-tile b{font-size:15px}
  .stt-pill{font-size:9px;padding:3px 6px}
}
.pr-status{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--card-border);border-radius:10px;
  background:var(--md-surface-container);margin-bottom:14px;flex-wrap:wrap}
.pr-dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--muted)}
.pr-dot.wait{background:var(--warn-ink)}
.pr-dot.ok{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 25%,transparent)}
.pr-dot.quiet{background:var(--warn-ink)}
.pr-dot.bad{background:var(--bad)}
.pr-who{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.pr-who small{color:var(--muted);overflow-wrap:anywhere}
.pr-status .ghost,#pscan button{display:inline-flex;align-items:center;gap:6px}
#host,#pscan{margin-bottom:10px}
.pr-port{flex:0 0 110px}
input.mono{font-family:var(--mono)}
ul.pr-found{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
ul.pr-found:empty{display:none}
ul.pr-found>li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--card-border);border-radius:10px}
ul.pr-found>li.on{border-color:var(--accent)}
.pr-fic{color:var(--muted)}
.sh-sub{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.seg{display:flex;padding:4px;gap:4px;border-radius:12px;background:var(--md-surface-container);border:1px solid var(--card-border);margin-bottom:14px}
.seg label{flex:1;margin:0;display:block}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:grid;place-items:center;min-height:44px;border-radius:8px;font:600 14px var(--mono);color:var(--muted);cursor:pointer}
.seg input:checked+span{background:var(--accent);color:var(--accent-ink)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.switch-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--card-border);border-radius:10px;margin:0;cursor:pointer}
.switch-row>span{display:flex;flex-direction:column;gap:2px;flex:1}
.switch-row small{color:var(--muted)}
input.sw{appearance:none;-webkit-appearance:none;width:48px;height:28px;flex:none;border-radius:999px;background:var(--md-surface-container);
  border:1px solid var(--field);position:relative;cursor:pointer;transition:background var(--dur) var(--ease)}
input.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--muted);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
input.sw:checked{background:var(--accent);border-color:var(--accent)}
input.sw:checked::after{transform:translateX(20px);background:var(--accent-ink)}
.sym-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}
.sym-pick label{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:0;padding:14px 8px;
  border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container);cursor:pointer}
.sym-pick input{position:absolute;opacity:0;pointer-events:none}
.sym-pick .sym-ic{color:var(--muted)}
.sym-pick .sym-ic .ic{width:28px;height:28px}
.sym-pick small{color:var(--muted);font-size:12px;line-height:1.3}
.sym-pick label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--md-surface-container))}
.sym-pick label:has(input:checked) .sym-ic{color:var(--accent-text)}
@media (max-width:599px){.sym-pick small{display:none}}
#lkinds{margin-bottom:12px}
.pr-page .layout-block{border-top:0;margin-top:0;padding-top:0;margin-bottom:16px}
.checks .tick{margin:0}
.tick input{position:absolute;opacity:0;pointer-events:none}
.tick span{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--card-border);
  color:var(--muted);cursor:pointer;font-size:14px}
.tick span .ic{display:none}
.tick input:checked+span{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent-text);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.tick input:checked+span .ic{display:inline}
.tick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.pr-page .checks{gap:6px}
.lbl-prev{padding:14px;border-radius:10px;background:var(--md-surface-container);border:1px solid var(--card-border);display:grid;place-items:center}
.lbl-prev .label-img{box-shadow:0 0 0 1px rgba(0,0,0,.08)}
#samplePng{display:inline-flex;align-items:center;gap:6px}
form .switch-row,#tape .switch-row{flex-direction:row;align-items:center;text-align:left}
#tape .switch-row>span{align-items:flex-start}
.pr-who{flex:1 1 180px}
@media (max-width:599px){.pr-status #test{width:100%;justify-content:center}}
/* Workbench look, block 4B: the sign-in screens. The workshop's logo and name above one card, the languages below. */
.auth-page{max-width:460px;margin:40px auto 24px;display:flex;flex-direction:column;align-items:center;gap:18px}
.auth-page .auth-brand{flex-direction:column;gap:12px;margin:0;font-size:24px;letter-spacing:-.01em}
.auth-logo{display:grid;place-items:center;width:68px;height:68px;border-radius:16px;background:var(--panel);border:1px solid var(--card-border)}
.auth-logo img{max-width:44px;max-height:44px;object-fit:contain}
.auth-page .auth-card{width:100%;margin:0;padding:24px;border:1px solid var(--card-border);border-radius:14px;background:var(--panel)}
.auth-card h1{font-size:26px;margin:0}
.auth-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.auth-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--md-surface-container);
  border:1px solid var(--card-border);color:var(--accent-text);flex:none}
.auth-ic.big{width:52px;height:52px;border-radius:50%;margin-bottom:12px}
.auth-ic.big .ic{width:26px;height:26px}
.auth-center{text-align:center}
.auth-card p.auth-center a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none}
.auth-card p.auth-center a:hover{color:var(--ink)}
.auth-card .big{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.auth-card button.ghost.big{width:100%;min-height:52px;font-size:16px}
.auth-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--card-border)}
.auth-warn{display:flex;gap:12px;padding:12px 14px;margin-bottom:18px;border-radius:10px;background:var(--warn-bg);color:var(--warn-ink)}
.auth-warn>.ic{flex:none;margin-top:2px}
.auth-warn>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.auth-warn p{margin:0;color:var(--ink)}
.auth-warn code{font:500 13px var(--mono);background:color-mix(in srgb,var(--bg) 60%,transparent);padding:1px 6px;border-radius:4px;overflow-wrap:anywhere}
.auth-warn small{color:var(--muted)}
.auth-box{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container)}
.auth-box p{margin:0;color:var(--muted)}
.auth-box button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.auth-sub{font-size:16px;margin:20px 0 10px}
.auth-note{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:10px;background:var(--md-surface-container);
  border:1px solid var(--card-border);color:var(--muted);font-size:14px}
.auth-note .ic{color:var(--accent-text);flex:none;margin-top:2px}
.auth-page .auth-langs{margin-top:0;padding:4px;border-radius:999px;border:1px solid var(--card-border);background:var(--panel)}
.auth-page .auth-langs .lang-pick{gap:4px}
.auth-page .auth-langs button{border:0;min-height:36px;border-radius:999px;background:none}
.auth-page .auth-langs button.on{box-shadow:none;background:var(--md-surface-container);color:var(--accent-text)}
label.has-eye{position:relative}
label.has-eye input{padding-right:48px}
.pw-eye{position:absolute;right:4px;bottom:4px;width:40px;height:40px;min-height:0;padding:0;border:0;background:none;color:var(--muted);
  display:grid;place-items:center;border-radius:8px}
.pw-eye.on{color:var(--accent-text)}
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.otp input{height:58px;min-height:0;padding:0;text-align:center;font:600 24px var(--mono);border-radius:10px}
.otp-time{display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding:8px 12px;border-radius:8px;background:var(--md-surface-container);
  font-size:12px;color:var(--muted)}
.otp-time b{font:700 12px var(--mono);color:var(--accent-text)}
@media (max-width:599px){
  .auth-page{margin-top:20px}
  .auth-page .auth-card{padding:18px}
  .otp{gap:6px}
  .otp input{height:52px;font-size:22px}
}
.auth-card .page-sub{margin:4px 0 18px}
.otp-time b{white-space:nowrap}
/* Workbench look, block 4C: the papers (black on white in either theme). */
.paper{padding:40px 44px}
.paper .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.paper-head{border-bottom:0;padding-bottom:0;align-items:flex-start}
.paper-brand{align-items:center}
.paper-brand .shop{font-size:22px}
.paper-logo{max-height:52px;max-width:140px}
.paper-contact{text-align:right;font-size:13px;color:#555;line-height:1.55}
.paper-title{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:26px 0 18px;padding-bottom:16px;border-bottom:1px solid #d9dde0}
.paper-title h1{margin:0;font-size:26px}
.paper-ref span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#666}
.paper-ref span:last-child{font:12px ui-monospace,monospace;letter-spacing:0;text-transform:none}
.paper-ref b{font-size:24px}
.pbox{border:1px solid #d9dde0;border-radius:8px;padding:14px 16px;margin:0 0 14px;break-inside:avoid}
.paper-cols{gap:14px}
.paper-cols .pbox{margin:0}
.paper-cols{margin-bottom:14px}
.pbox .paper-tbl{margin:0}
.pbox .paper-tbl th,.pbox .paper-tbl td{border-bottom:0;padding:3px 8px 3px 0}
.paper-tbl caption,.p-cap{text-align:left;font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:#666;padding-bottom:8px}
.p-fault{margin:0 0 14px;padding:10px 12px;border:1px solid #e3e6e8;border-radius:6px;font-style:italic;white-space:pre-line}
.p-split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.p-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.p-checks li{display:flex;gap:8px;align-items:baseline}
.p-checks .p-tick{display:inline-grid;place-items:center;width:15px;height:15px;flex:none;border-radius:3px;background:#1b1b1b;color:#fff;font-size:11px}
.p-checks .r{margin-left:auto;white-space:nowrap;font-size:13px}
.p-price{background:#f5f6f7;border-radius:6px;padding:12px 14px}
.p-price b{display:block;font-size:22px}
.p-price small{color:#666}
.p-warranty{display:flex;gap:10px;align-items:flex-start;border:1px solid #d9dde0;border-radius:8px;padding:12px 14px;background:#fafbfb;font-size:14px}
.p-ic{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;background:#fde9b8;color:#7a5300;font-weight:700;font-size:12px}
.paper-qr{justify-content:space-between;border:1.5px dashed #c5cbcf;border-radius:8px;padding:14px 16px;margin:14px 0}
.paper-qr p{margin:4px 0 8px;color:#555}
.paper-qr img{width:110px;height:110px;flex:none;border:1px solid #e3e6e8;border-radius:6px;padding:4px;background:#fff}
.paper-link{font-size:12px;background:#f1f3f4;padding:3px 8px;border-radius:4px}
.paper .terms{font-size:11px;color:#777}
.paper-sign{margin-top:56px}
.paper-sign div{border-top-color:#9aa3a8;font-size:13px;font-weight:600}
@media (max-width:600px){
  .paper{padding:20px 16px}
  .paper-contact{text-align:left}
  .p-split{grid-template-columns:1fr}
}
@media print{.paper{padding:0}}
.pbox{min-width:0;overflow-wrap:anywhere}
.pbox .paper-tbl{table-layout:fixed}
.pbox .paper-tbl th{width:6.5em}
.paper-cols{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.p-sums{display:grid;grid-template-columns:1fr minmax(0,320px);gap:16px;align-items:center;margin:4px 0 14px}
.p-sums .paper-total{margin-top:0}
.p-stamp{justify-self:start;transform:rotate(-6deg);border:2px solid #1f7a4f;color:#1f7a4f;border-radius:6px;padding:6px 12px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:14px}
@media (max-width:600px){.p-sums{grid-template-columns:1fr}}
/* Workbench look, block 4A: Users and Sign-in & security. */
ul.ucards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ucard{border:1px solid var(--card-border);border-radius:12px;background:var(--panel)}
.ucard>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
.ucard>summary::-webkit-details-marker{display:none}
.ucard[open]>summary{border-bottom:1px solid var(--card-border)}
ul.ucards li.off .ucard{opacity:.6}
.u-av{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--md-surface-container);
  border:1px solid var(--card-border);font:700 15px var(--mono);color:var(--muted)}
.u-av.own{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.u-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.u-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.u-top b{font-size:16px}
.u-main small{color:var(--muted);overflow-wrap:anywhere}
.u-role{align-self:flex-start;flex:none}
.st-mine{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text)}
.u-body{padding:14px 16px}
.u-link{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:10px 0}
.u-link button{display:inline-flex;align-items:center;gap:6px}
.u-roles{display:flex;flex-direction:column;gap:10px}
.u-roles>div{border:1px solid var(--card-border);border-radius:10px;padding:12px 14px;background:var(--md-surface-container)}
.u-roles p{margin:8px 0 0;color:var(--muted);font-size:14px}
#uAddBtn{display:inline-flex;align-items:center;gap:6px}
.sec-level{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:0 0 16px;border:1px solid var(--card-border);border-radius:12px;background:var(--panel)}
.sec-level>.ic{width:28px;height:28px;flex:none}
.sec-level>div{display:flex;flex-direction:column;gap:2px}
.sec-level small{color:var(--muted)}
.sec-level.ok>.ic{color:var(--ok)} .sec-level.warn>.ic{color:var(--warn-ink)} .sec-level.bad>.ic{color:var(--bad)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sec-head h2{margin:0}
.sec-head button{display:inline-flex;align-items:center;gap:6px}
.sec-more>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;margin-bottom:12px}
.sec-more>summary::-webkit-details-marker{display:none}
.sec-more[open]>summary{margin-bottom:14px}
ul.sec-keys{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
ul.sec-keys>li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container)}
.sk-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:8px;border:1px solid var(--card-border);color:var(--accent-text)}
.sk-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sk-main small{color:var(--muted)}

/* Backup (Stitch block 4A, part 5): settings saved as they change, the copies as cards with the restore asked in place,
   a file uploaded in pieces with its progress before Confirm restore. */
h2.sh .sh-note{margin-left:auto;font-family:inherit;letter-spacing:0;font-size:12px;font-weight:500;color:var(--muted)}
.bk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:900px){.bk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bk-grid .stepper input{font-family:var(--mono);font-weight:700;color:var(--accent-text)}
.bk-err{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:10px 14px;border:1px solid var(--bad);border-radius:10px;
  background:var(--bad-bg);color:var(--bad-ink);font-family:var(--mono);font-size:13px}
.bk-err .ic{flex:none;margin-top:2px}
.bk-now{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:16px}
.bk-now>button{display:inline-flex;align-items:center;gap:8px}
.bk-now .radio{margin:0}
@media (max-width:599px){.bk-now>button{width:100%;justify-content:center}}
.bk-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bk-item{border:1px solid var(--card-border);border-radius:10px;padding:12px 14px;background:var(--panel)}
.bk-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.bk-top .mono{font-size:13px}
.bk-ph{font-size:12px;padding:2px 8px;border-radius:6px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent-text)}
.bk-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.bk-acts button{display:inline-flex;align-items:center;gap:6px}
.bk-kept{font-style:italic}
@media (max-width:599px){.bk-acts{flex-wrap:nowrap;gap:6px}.bk-acts button{flex:1 1 0;min-width:0;justify-content:center;padding:0 6px;font-size:14px}
  .bk-acts button .ic{width:18px;height:18px}}
.bk-ask{margin-top:12px;padding:12px 14px;border:1px solid var(--accent);border-radius:10px}
.bk-ask p{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px}
.bk-ask p .ic{flex:none;color:var(--accent-text);margin-top:2px}
.bk-ask .actions{margin:0;justify-content:flex-end}
@media (max-width:599px){.bk-ask .actions button{flex:1}}
.bk-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px;border-color:var(--card-border)}
.bk-drop .dz-label{font-weight:600}
.bk-up{border:1px solid var(--card-border);border-radius:10px;padding:14px;display:grid;gap:8px}
.bk-up .bk-top{justify-content:space-between}
.bk-up .bk-top b{color:var(--accent-text)}
.bk-bar{height:6px;border-radius:999px;background:var(--md-surface-container);overflow:hidden}
.bk-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s var(--ease)}
.bk-foot{text-align:center;color:var(--muted);font-size:12px;margin:18px 0 8px}
.bk-grid .switch-row b{color:var(--ink);font-size:15px}

/* Summary (Stitch block 5A): money tiles, the months as a table on a computer and as cards on a phone, the tools'
   payback as a bar, the settings as small cards in the right column from 1200 px with Save in the dock. */
.sm-tiles .tile b{font-size:22px}
.sm-tiles .tile .ic{color:var(--accent-text)}
.sm-table td,.sm-table th{text-align:right;white-space:nowrap}
.sm-table td:first-child,.sm-table th:first-child{text-align:left}
.sm-table th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sm-table .b{font-weight:700}
.sm-months{list-style:none;margin:0;padding:0;display:none;gap:8px}
.sm-months li{border:1px solid var(--card-border);border-radius:10px;padding:12px 14px;background:var(--md-surface-container)}
.sm-mh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sm-mh .mono:first-child{font-weight:600}
.sm-net{font-size:18px;font-weight:700}
.sm-months small{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:6px;color:var(--muted)}
.sm-months small .mono{color:var(--ink)}
@media (max-width:699px){.sm-table{display:none}.sm-months{display:grid}}
h2.sh .sm-total{margin-left:auto;font-size:13px;font-weight:500;color:var(--muted);padding:4px 10px;border:1px solid var(--card-border);border-radius:8px;white-space:nowrap}
h2.sh .sm-total .mono{font-weight:700;margin-left:4px}
.sm-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;padding:12px 14px;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container)}
.sm-figs small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sm-figs .mono{font-size:18px;font-weight:700}
.sm-figs .sm-pct{color:var(--accent-text)}
.sm-bar{height:8px;border-radius:999px;background:var(--md-surface-container);overflow:hidden;margin:12px 0 4px}
.sm-bar i{display:block;height:100%;background:var(--accent)}
.sm-set #cfg{display:block;max-width:1100px}
@media (min-width:900px){.sm-set #cfg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;align-items:start}.sm-set #cfg>.sm-rare{align-self:start}}
.sm-set fieldset.sm-card{display:grid;grid-template-columns:1fr;margin:0 0 12px}
.sm-set fieldset.sm-card legend{margin-bottom:4px}
.sm-set fieldset.sm-card legend::before{display:none}
.sm-set fieldset.sm-card legend .ic{width:20px;height:20px;color:var(--accent-text)}
.sm-set fieldset.sm-card .beside-hint{min-height:0;align-self:auto}
.sm-set label.pf-row{flex-direction:row;font-size:15px;color:var(--ink)}
.sm-set .pf-name{flex:1;min-width:0}
.sm-set .pf-row{display:flex;align-items:center;gap:10px;margin:0;padding:6px 0 6px 12px;border:1px solid var(--card-border);border-radius:10px;background:var(--panel)}
.sm-set .pf-row .pf-edit{margin-left:auto}
.sm-set .pf-edit input{width:72px;flex:none;text-align:right;font-family:var(--mono);min-height:40px}
.sm-set .pf-pc{color:var(--muted);font-family:var(--mono)}
.sm-set .pf-edit .danger{border-color:transparent;background:none;min-width:40px}
.sm-set .add-head{border-top:0;padding-top:4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sm-rare{margin:0 0 12px;padding:10px 14px;border:1px solid var(--card-border);border-radius:10px}
.sm-save{margin:4px 0 0}
.sm-save button{width:100%;min-height:48px;display:inline-flex;justify-content:center;align-items:center;gap:8px}

/* Count a box, its Finish dialog, Stocktake and the scanner layer (Stitch block 5A). */
.cnt-where{display:inline-flex;align-items:center;gap:6px;margin:-6px 0 12px;padding:4px 10px;border:1px solid var(--card-border);border-radius:8px;font-size:13px;color:var(--muted)}
.cnt-where .ic{width:16px;height:16px;color:var(--accent-text)}
.cnt-top{border:1px solid var(--card-border);border-radius:10px;background:var(--panel);padding:14px;margin-bottom:16px}
.cnt-acts{display:flex;flex-wrap:wrap;gap:10px}
.cnt-acts button,.cnt-acts .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
@media (max-width:599px){.cnt-acts>*{flex:1 1 0}}
.cnt-prog{display:flex;justify-content:space-between;gap:10px;margin:14px 0 8px}
.cnt-prog b{color:var(--accent-text)}
.cnt-bar{height:6px;border-radius:999px;background:var(--md-surface-container);overflow:hidden}
.cnt-bar i{display:block;height:100%;background:var(--accent)}
.cnt-sec{background:none;border:0;padding:0}
.cnt-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cnt-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--card-border);border-left-width:3px;border-radius:10px;background:var(--panel)}
.cnt-row.found{border-left-color:var(--ok)}
.cnt-row.extra{border-left-color:var(--accent)}
.cnt-row .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cnt-row .main b{overflow-wrap:anywhere;font-weight:600}
.cnt-row .main small{color:var(--muted)}
.cnt-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cnt-diff{padding:1px 7px;border-radius:6px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:12px}
.cnt-row .ctick input{width:30px;height:30px}
.cnt-row.diff .stepper input{color:var(--accent-text);font-weight:700}
.cnt-row .stepper input{font-family:var(--mono)}
.cnt-warn{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--warn-bg);color:var(--warn-ink);flex:none}
.cnt-x{min-width:44px;padding:0;display:inline-grid;place-items:center}
.cnt-side{display:flex;flex-direction:column;gap:10px}
.cnt-photo{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px}
.cnt-tally b{font-size:18px}
.cnt-side #cDone{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px}
.cnt-side #cDrop{align-self:center}
@media (max-width:1199px){
  .cnt-side{position:sticky;bottom:calc(68px + env(safe-area-inset-bottom));z-index:6;margin-top:16px;box-shadow:0 -8px 20px var(--bg)}
  .cnt-photo{display:none}
}
@media (min-width:900px) and (max-width:1199px){.cnt-side{bottom:12px}}
@media (min-width:1200px){.cnt-side{position:sticky;top:calc(var(--top-h,64px) + 12px)}}
.cnt-dlg .cnt-sum{list-style:none;margin:0;padding:12px 14px;display:grid;gap:8px;border:1px solid var(--card-border);border-radius:10px}
.cnt-dlg .cnt-sum li{display:flex;gap:10px;align-items:flex-start}
.cnt-dlg .cnt-sum .ic{width:18px;height:18px;flex:none;margin-top:2px;color:var(--accent-text)}
.cnt-choice{display:grid;gap:8px}
.cnt-choice label{display:flex;flex-direction:row;color:var(--ink);font-size:15px;gap:12px;align-items:flex-start;margin:0;padding:12px 14px;border:1px solid var(--card-border);border-radius:10px;cursor:pointer}
.cnt-choice label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.cnt-choice input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.cnt-note{display:flex;gap:10px;align-items:flex-start;margin:0}
.cnt-note .ic{width:18px;height:18px;flex:none}
.cnt-dlg .actions button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.inv-tiles .tile .ic{color:var(--accent-text)}
.inv-bar{display:block;height:4px;border-radius:999px;background:var(--md-surface-container);overflow:hidden;margin-top:6px}
.inv-bar i{display:block;height:100%;background:var(--accent)}
.inv-rows,.inv-loose,.cnt-rows{grid-template-columns:minmax(0,1fr)}
.inv-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.inv-rows a{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container);color:var(--ink);text-decoration:none}
.inv-rows .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.inv-rows .main small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-go{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;flex:none;color:var(--accent-text)}
.inv-go .ic{width:16px;height:16px}
@media (max-width:599px){.inv-rows a{flex-wrap:wrap}.inv-rows .main{flex-basis:calc(100% - 110px)}.inv-go{margin-left:auto}}
.inv-how{border:1px solid var(--card-border);border-radius:10px;background:var(--panel);padding:12px 14px;margin-bottom:16px}
.inv-how summary{display:flex;align-items:center;gap:8px;font-weight:650;cursor:pointer;min-height:36px}
.inv-how summary .ic{color:var(--accent-text)}
.inv-how ol{margin:10px 0;padding-left:1.4rem;color:var(--muted);display:grid;gap:6px}
.inv-how ol li::marker{color:var(--accent-text);font-family:var(--mono);font-weight:700}
.inv-how .actions .btn,.inv-how .actions button{display:inline-flex;align-items:center;gap:8px}
.inv-loose{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.inv-loose .loose-row{padding:10px 12px;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container)}
.inv-loose .main{text-decoration:none;color:var(--ink);gap:4px}
.inv-put{display:grid;gap:10px;margin-top:12px}
.inv-put .actions button{display:inline-flex;align-items:center;gap:8px}
@media (max-width:599px){.inv-put .actions>*{flex:1 1 0;justify-content:center}}
div#scan .scan-top{padding:4px 2px}
.scan-loghead{display:flex;justify-content:space-between;align-items:center;width:min(100%,560px);margin:6px auto 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.scan-loghead b{color:var(--accent-text);font-size:13px}
div#scan .scan-type,div#scan .scan-log{width:min(100%,560px)}
.scan-log li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--card-border);border-radius:10px;background:var(--panel);color:var(--ink)}
.scan-log li .sl-name{flex:1;min-width:0;overflow-wrap:anywhere}
.scan-log li .sl-st{flex:none;font-family:var(--mono);font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--ok-bg);color:var(--ok-ink)}
.scan-log li.move .sl-st{background:var(--warn-bg);color:var(--warn-ink)}
.scan-log li.bad{background:var(--panel);border-color:var(--bad);color:var(--bad-ink)}
.scan-log li:not(:has(.tape)){display:block;background:var(--ok-bg);color:var(--ok-ink);border-color:transparent}
.scan-frame{border:0;background:
  linear-gradient(var(--accent),var(--accent)) top left/28px 4px no-repeat,linear-gradient(var(--accent),var(--accent)) top left/4px 28px no-repeat,
  linear-gradient(var(--accent),var(--accent)) top right/28px 4px no-repeat,linear-gradient(var(--accent),var(--accent)) top right/4px 28px no-repeat,
  linear-gradient(var(--accent),var(--accent)) bottom left/28px 4px no-repeat,linear-gradient(var(--accent),var(--accent)) bottom left/4px 28px no-repeat,
  linear-gradient(var(--accent),var(--accent)) bottom right/28px 4px no-repeat,linear-gradient(var(--accent),var(--accent)) bottom right/4px 28px no-repeat}
.scan-frame.hit{outline:3px solid var(--ok);outline-offset:-3px}
.scan-frame.miss{outline:3px solid var(--bad);outline-offset:-3px}
div#scan.no-camera .scan-type{padding:22px;border:1px solid var(--card-border);border-top:2px solid var(--accent);border-radius:10px;background:var(--panel)}
div#scan.no-camera .scan-type input{font-size:22px;letter-spacing:.08em;min-height:56px;text-align:center}
div#scan.no-camera .scan-type button{min-height:56px;padding:0 24px}
div#scan.no-camera .scan-msg{margin-top:10vh}

.cnt-dlg .actions{flex-wrap:wrap}
@media (max-width:599px){.cnt-dlg .actions>*{flex:1 1 100%}
  .cnt-side{padding:12px 14px;gap:8px}.cnt-tally b{font-size:15px}.cnt-side #cDrop{min-height:32px}}
.bx-side>.inv-how{margin:0}

/* The settings pages (Stitch block 5B): section heads with an icon and a status pill, keys as one mono row,
   the catalog in two columns from 1200 px, email and the device page with a right column, import as a grid. */
h2.sh .stt-pill{margin-left:auto}
.set-cols{align-items:start}
.cat-cols{display:contents}
@media (min-width:1200px){.cat-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px;align-items:start}
  .cat-cols>div{display:flex;flex-direction:column;gap:16px;min-width:0}.cat-cols section{margin:0}}
.set-stack{display:grid;gap:16px;max-width:920px}
.set-stack section{margin:0}
.key-row{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container)}
.key-row .ic{width:20px;height:20px;color:var(--accent-text);flex:none}
.key-row .auth-secret{font-family:var(--mono);color:var(--accent-text)}
.mail-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.mail-opt{display:block;margin:0;cursor:pointer}
.mail-opt input{position:absolute;opacity:0;pointer-events:none}
.mail-opt>span{display:flex;flex-direction:column;gap:4px;height:100%;padding:12px 14px;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container)}
.mail-opt small{color:var(--muted);font-size:13px;line-height:1.35}
.mail-opt input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.mail-opt input:checked+span b{color:var(--accent-text)}
.mail-opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
#mailTest .actions button{display:inline-flex;align-items:center;gap:8px}
.set-reply{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border:1px solid var(--card-border);border-radius:10px;font-size:14px}
.set-reply .ic{width:18px;height:18px;color:var(--accent-text);flex:none;margin-top:2px}
.set-reply b{color:var(--accent-text);overflow-wrap:anywhere}
.set-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.set-what{margin-top:12px;padding:10px 14px;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container)}
.set-what summary{font-weight:600;cursor:pointer}
.set-note{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 14px;border:1px solid var(--card-border);border-radius:10px;background:var(--panel);font-size:14px;color:var(--muted)}
.set-note .ic{width:18px;height:18px;flex:none;color:var(--accent-text);margin-top:2px}
.imp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.imp-grid .imp-card{margin:0}
.imp-exp{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.imp-exp .ic{width:18px;height:18px}
.imp-fold{margin-top:10px}
.imp-card:has(.imp-fold[open]){grid-column:1/-1}

/* Group, Feedback, What's new and the snackbars (Stitch block 5B, part 2). */
.grp-two{display:grid;gap:16px}
@media (min-width:900px){.grp-two{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.grp-two section{margin:0}}
.grp-inv{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.grp-inv .main{flex:1;min-width:0;display:flex;flex-direction:column}
.grp-inv .main small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.grp-inv .main b{font-size:24px;color:var(--accent-text);letter-spacing:.06em}
.grp-inv .hint{flex-basis:100%;margin:0}
.grp-chip{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--md-surface-container);color:var(--accent-text);flex:none}
.grp-hits,.grp-members{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.grp-hits li,.grp-members li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container)}
.grp-hits .main,.grp-members .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.grp-hits small,.grp-members small{color:var(--muted);display:inline-flex;align-items:center;gap:6px;overflow-wrap:anywhere}
.grp-hits small .ic{width:14px;height:14px}
.grp-members .u-av{flex:none}
.grp-n{font-size:12px;color:var(--muted);white-space:nowrap}
.fb-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fb-kind>span{flex-direction:row;align-items:center;justify-content:center;gap:8px;min-height:52px;text-align:center}
.fb-kind .ic{width:18px;height:18px;flex:none}
@media (max-width:599px){.fb-kinds{grid-template-columns:minmax(0,1fr)}}
.fb-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 14px;border-color:var(--card-border)}
.fb-drop>.ic{color:var(--accent-text)}
.fb-drop .dz-label{font-weight:600}
.fb-what{list-style:none;margin:0;padding:0;display:grid;gap:0;border:1px solid var(--card-border);border-radius:10px;background:var(--md-surface-container)}
.fb-what li{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--card-border);font-size:14px}
.fb-what li:first-child{border-top:0}
.fb-what li span{color:var(--muted)}
.fb-what li b{font-weight:600;text-align:right;overflow-wrap:anywhere}
.fb-never{display:flex;gap:10px;align-items:center;margin:12px 0 0;color:var(--ok-ink);font-size:14px}
.fb-never .ic{width:18px;height:18px}
#fbf .actions button{display:inline-flex;align-items:center;gap:8px}
#toast{display:flex;align-items:center;gap:10px}
#toast .ic{width:18px;height:18px;flex:none;color:var(--ok)}
#toast.bad .ic{color:inherit}
.update-bar{display:flex;align-items:center;gap:12px}
.update-bar>.ic{width:18px;height:18px;color:var(--accent-text);flex:none}
.update-bar b{color:var(--accent-text)}
body:has(.update-bar) #toast{bottom:calc(92px + 72px + env(safe-area-inset-bottom))}
@media (min-width:900px){.update-bar{left:auto;right:24px;transform:none}
  body:has(.update-bar) #toast{bottom:24px;left:calc(50% + 110px)}}
.whatsnew{padding:0;display:flex;flex-direction:column;max-height:min(80vh,720px)}
.whatsnew[open]{display:flex}
.wn-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 22px 12px;border-bottom:1px solid var(--card-border)}
.wn-head h2{margin:0}
.wn-body{overflow:auto;padding:8px 22px}
.wn-body h3{display:flex;align-items:center;gap:8px;margin:14px 0 6px}
.wn-foot{justify-content:flex-end;padding:12px 22px 18px;margin:0;border-top:1px solid var(--card-border)}
ul.changes li::marker{color:var(--accent-text)}
.wn-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
details.wn-ver{margin:0 0 12px;padding:12px 18px;border:1px solid var(--card-border);border-radius:10px;background:var(--panel)}
details.wn-ver summary{cursor:pointer;font-weight:600}
.wn-body:focus,.wn-body:focus-visible{outline:none}
dialog.wizard fieldset.wstep{grid-column:1/-1;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
dialog.wizard fieldset.wstep[hidden]{display:none}
dialog.wizard fieldset.wstep>*{grid-column:1/-1}

/* Verkly Bridge on Printer & labels: how the printer is reached, the computers, the three steps to connect one */
.pr-via{margin:0 0 12px}
ul.pr-found>li .pr-who{flex:1;min-width:0}
ul.pr-found>li .bk-err{display:block;white-space:normal}
ol.pr-steps{list-style:none;counter-reset:prstep;padding:0;margin:12px 0 8px;display:grid;gap:10px}
ol.pr-steps>li{counter-increment:prstep;display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px 12px;padding:12px;border:1px solid var(--card-border);border-radius:10px}
ol.pr-steps>li::before{content:counter(prstep);grid-row:span 3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font:700 13px/1 var(--mono)}
ol.pr-steps>li>b,ol.pr-steps>li>span,ol.pr-steps>li>.copy-row{grid-column:2}
ol.pr-steps>li>span{color:var(--muted);font-size:14px}
ol.pr-steps .copy-row.cmd code{white-space:pre-wrap;word-break:break-all}
/* the feedback's screenshot, shown before it is sent */
.fb-prev{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}
.fb-prev img{max-width:100%;max-height:260px;border:1px solid var(--card-border);border-radius:8px;display:block}
ul.pr-found .br-pick{display:block;margin:6px 0 2px;font-size:13px;color:var(--muted)}
ul.pr-found .br-pick select{display:block;width:100%;margin-top:4px;font:14px var(--mono)}

/* Copy a picked catalog name, and the facts on a device card (Alexander L., 2026-10-19) */
.pick.has-copy .pick-btn{padding-right:72px}
.pick-copy{position:absolute;right:34px;top:50%;transform:translateY(-50%);width:32px;height:32px;min-height:0;padding:0;display:grid;place-items:center;
  border:0;border-radius:var(--shape-full);background:transparent;color:var(--muted);box-shadow:none;cursor:pointer}
.pick-copy svg,.fact-copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pick-copy:hover,.pick-copy:focus-visible,.fact-copy:hover,.fact-copy:focus-visible{color:var(--accent-text);background:var(--md-secondary-container)}
.dev-facts dd{display:flex;align-items:center;gap:4px;min-width:0}
.fact-v{user-select:text;-webkit-user-select:text;min-width:0;overflow-wrap:anywhere}
.fact-copy{flex:none;width:28px;height:28px;min-height:0;padding:0;display:grid;place-items:center;border:0;border-radius:var(--shape-full);
  background:transparent;color:var(--muted);box-shadow:none;cursor:pointer;opacity:.7}
@media (hover:hover) and (pointer:fine){.fact-copy{opacity:0}.dev-facts div:hover .fact-copy,.fact-copy:focus-visible{opacity:1}}

/* The fault in words and its pictures (Alexander L., 2026-10-19) */
.fault-zone .dropzone{min-height:56px}
.fault-zone .thumbs:empty{display:none}
.fault-text{margin:0 0 10px;padding:10px 14px;border-left:3px solid var(--accent);background:var(--md-secondary-container);border-radius:0 var(--shape-xs) var(--shape-xs) 0;white-space:pre-wrap}

/* Colour swatches (owner, 2026-10-19): a small round sample beside a colour's name, framed so white shows */
.sw{display:inline-block;flex:none;width:14px;height:14px;border-radius:50%;margin-right:8px;vertical-align:-2px;box-shadow:inset 0 0 0 1px var(--card-border),0 0 0 1px var(--line)}
.pick-list li .sw,.pick-val .sw{margin-right:10px}
.cat-colours{flex-basis:100%}
.cat-col{padding-left:8px;font-family:inherit}
.cat-col .sw{margin-right:6px}
.colour-add input[type=color],.cat-addrow input[type=color]{flex:none;width:44px;height:44px;padding:2px;border:1px solid var(--field);border-radius:var(--shape-xs);background:none;cursor:pointer}
/* With a mouse a row of chips can't be swiped (owner, 2026-10-20: the Repair prices sheets past the edge were out of
   reach), so it wraps onto more lines; a phone keeps the one swiped row */
@media (hover:hover) and (pointer:fine){
  .chips.scroll-row{flex-wrap:wrap;overflow-x:visible;mask-image:none;-webkit-mask-image:none;padding-right:0}
}
/* Furniture (owner, 2026-10-21): a unit of drawers or shelves drawn from the front in its own colour (--fc, set
   inline from the box). Light colours get dark ink (.fv-light). Boxes on a shelf stand left to right. */
.fv-wrap{overflow-x:auto;padding:4px 2px 2px}
.fv{--fv-ink:var(--ink)}
.fv.fv-light{--fv-ink:#1c262b}
.fv-unit{width:220px;padding:8px;border-radius:8px;background:var(--fc);border:1px solid color-mix(in srgb,var(--fc) 70%,#000);display:flex;flex-direction:column;gap:6px}
.fv-drw{position:relative;display:flex;align-items:flex-end;justify-content:center;height:58px;padding-bottom:10px;border-radius:4px;text-decoration:none;
  background:color-mix(in srgb,var(--fc) 92%,#fff);border:1px solid color-mix(in srgb,var(--fc) 70%,#000);color:var(--fv-ink)}
.fv-drw:hover{outline:2px solid var(--accent);outline-offset:1px}
.fv-drw.here{outline:2px solid var(--accent);outline-offset:2px}
.fv-drw.fv-none{opacity:.5}
.fv-h{display:block;width:30%;height:6px;border-radius:3px;background:color-mix(in srgb,var(--fc) 50%,#888)}
.fv-lb{position:absolute;left:8px;top:6px;font:600 11px var(--mono);max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-n{position:absolute;right:7px;top:6px;font:600 11px var(--mono);background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 6px}
.fv-n.empty{background:transparent;color:inherit;opacity:.6;border:1px solid currentColor}
.fv-shelf{min-width:300px;border:4px solid var(--fc);border-top-width:10px;border-radius:6px;background:var(--bg);padding:0 8px}
.fv-lvl{position:relative;display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:22px;border-bottom:6px solid var(--fc)}
.fv-lvl:last-child{border-bottom:0}
.fv-tag{position:absolute;left:0;top:4px;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.fv-col{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%;min-width:0}
.fv-bx{display:flex;flex-direction:column;justify-content:flex-end;height:var(--h);min-height:18px;padding:3px 6px;border-radius:4px;overflow:hidden;text-decoration:none;
  font-size:11px;line-height:1.2;color:var(--ink);background:color-mix(in srgb,var(--muted) 16%,transparent);border:1px solid var(--field)}
.fv-bx.tint{background:color-mix(in srgb,var(--fc) 45%,transparent);border-color:var(--fc)}
.fv-bx.tint-l{background:color-mix(in srgb,var(--fc) 22%,transparent);border-color:var(--fc)}
.fv-bx:hover,.fv-bx.here{outline:2px solid var(--accent);outline-offset:1px}
.fv-bx b{font:600 10px var(--mono);color:var(--accent-text)}
.fv-bx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-free{flex:1 1 auto;align-self:flex-end;height:24px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);border-radius:4px;
  font:500 10px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden}
.fv-back{position:absolute;right:0;top:3px;font:600 10px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 6px;background:var(--panel)}
.fv.mini.fv-unit{width:110px;padding:5px;gap:4px}
.fv.mini .fv-drw{height:24px;padding-bottom:5px}
.fv.mini.fv-shelf{min-width:0;width:200px;border-width:3px;border-top-width:7px;padding:0 5px}
.fv.mini .fv-lvl{height:48px;padding-top:5px;border-bottom-width:4px;gap:3px}
.fv-row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end}
.fv-card{display:flex;flex-direction:column;gap:4px;max-width:220px}
.fv-card>a{color:var(--ink);text-decoration:none}
.fv-card small{color:var(--muted);font-size:11px}
.fv-fill{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;gap:6px 10px;align-items:center;margin-top:10px;font-size:12px}
.fill-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.fill-bar i{display:block;height:100%;background:var(--ok)}
.fill-bar.warn i{background:var(--accent)}
.fill-bar.over i{background:var(--bad)}
.bad-text{color:var(--bad)}
.fv-colours{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.fv-sw{width:28px;height:28px;min-height:0;padding:0;border-radius:50%;border:2px solid var(--line)}
.fv-sw.on{outline:2px solid var(--accent);outline-offset:2px}
.fv-colours input[type=color]{width:36px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:none}
.fv-dlg{width:min(620px,94vw)}
.fv-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;max-height:44vh;overflow:auto}
.fv-t{position:relative;display:flex;align-items:center;gap:12px;text-align:left;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);min-height:0}
.fv-t.on{border-color:var(--accent);outline:1px solid var(--accent)}
.fv-t{height:auto;justify-content:flex-start;align-content:center}.fv-tpls{grid-auto-rows:min-content}
.fv-t b{display:block}.fv-t small{display:block;color:var(--muted);font-size:11px}
.fv-t .fv.mini.fv-unit{width:40px;padding:3px;gap:2px}.fv-t .fv.mini .fv-drw{height:8px;padding:0}.fv-t .fv-h{display:none}
.fv-t .fv.mini.fv-shelf{width:60px;border-top-width:4px}.fv-t .fv.mini .fv-lvl{height:14px;padding:0;border-bottom-width:2px}
.fv-tdel{position:absolute;right:8px;top:4px;font-size:16px}
.fv-g{position:absolute;left:8px;bottom:5px;font:600 10px var(--mono);opacity:.75}
.fv.mini .fv-g{display:none}
.fv-grid{display:flex;flex-direction:column;gap:6px}
.fv-drw.fv-add{opacity:1;align-items:center;padding:0;border-style:dashed;background:transparent;color:var(--fv-ink);font:600 12px Inter,system-ui,sans-serif;min-height:0;cursor:pointer}
.gf-cell.sel{background:color-mix(in srgb,var(--accent) 22%,transparent);border:1px solid var(--accent);color:var(--accent-text)}
.gf-cell{user-select:none;-webkit-user-select:none}
.gf-selbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:10px;padding:10px 12px;border:1px solid var(--accent);border-radius:12px}
.gf-selbar [data-what]{font-weight:600}
.gf-selbar [data-why]:empty{display:none}
.ask-dlg{width:min(440px,94vw)}
.bsk{flex:none;display:block;--bs-ink:color-mix(in srgb,var(--ink) 78%,var(--fc));--bs-paper:color-mix(in srgb,var(--fc) 14%,var(--panel))}
.bsk polygon,.bsk path,.bsk polyline{stroke:var(--bs-ink);stroke-width:.9;stroke-linejoin:round;fill:var(--bs-paper)}
.bsk .bs-in,.bsk .bs-in2{fill:color-mix(in srgb,var(--fc) 8%,var(--panel));stroke-width:.6}
.bsk .bs-win{fill:none;stroke-width:.6}
.bsk .bs-lid{fill:color-mix(in srgb,var(--fc) 45%,var(--panel))}
.bsk .bs-clip{fill:none;stroke-width:1.6;stroke-linecap:round}
.fv-pic{display:block;border-radius:8px}.fv-pic:hover .fv,.fv-pic:focus-visible .fv{outline:2px solid var(--accent);outline-offset:3px}
.bx-types button{width:100%;justify-content:flex-start;gap:8px}
.fv-linkrow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.fv-linkrow label{flex:1 1 260px}
.fv-draft{padding:12px;border:1px solid var(--line);border-radius:12px}

/* Layers of a box (1.47.0): the stack drawn top first, each layer's map read-only; a layer's card lists its mates. */
.ly-stack{display:flex;flex-direction:column;gap:10px}
.ly{border:1px solid var(--card-border);border-radius:10px;padding:10px;background:var(--panel)}
.ly-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.ly-head a{color:var(--ink);text-decoration:none}
.ly-n{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text)}
.ly-c{margin-left:auto;font-size:12px;color:var(--muted)}
.ly .gf-wrap{margin:0}
.ly-mini{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.ly-mini a{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--card-border);border-radius:8px;color:var(--ink);text-decoration:none}
.ly-mini a.here{border-color:var(--accent);outline:1px solid var(--accent)}
.ly-mini .mono{color:var(--accent-text);font-weight:700}

/* Heights of the levels of a piece of furniture (1.48.0): one small field per drawer or shelf. */
.fv-heights{display:flex;flex-direction:column;gap:6px}
.fv-hrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}

/* Moving a device between my own and a client's (1.49.0): a quiet row under Device details. */
.side-switch{margin-top:14px;padding-top:12px;border-top:1px solid var(--card-border)}
.side-switch .hint{margin:6px 0 0}

/* Device photos and the fault's (1.50.0): the zone a paste goes to is outlined; ⇄ moves a photo to the other
   block, and a block takes a photo dragged onto it. */
.dropzone.paste-here{border-color:var(--accent);border-style:solid}
.qthumb .mv{top:auto;bottom:-6px;right:-6px;background:var(--accent);color:var(--accent-ink);font-size:12px}
section.drop-here{outline:2px dashed var(--accent);outline-offset:4px}
.qthumb img[draggable=true]{cursor:grab}

/* Videos of the fault (1.51.0): a poster with a play mark and the length, "being made" with a spinner, the player in
   a dialog. */
.vlist{display:flex;flex-wrap:wrap;gap:10px}
.vlist:not(:empty){margin:10px 0}
.qthumb.qvid{display:inline-flex;align-items:center;justify-content:center}
.qthumb.qvid video{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--bg)}
.qthumb.qvid .vplay{width:26px;height:26px;pointer-events:none}.qthumb.qvid .vplay svg{width:12px;height:12px}
.vcard{width:180px;display:flex;flex-direction:column;gap:6px}
.vposter{position:relative;display:flex;align-items:center;justify-content:center;width:180px;height:110px;padding:0;border-radius:10px;
  overflow:hidden;background:var(--bg);border:1px solid var(--card-border);color:var(--muted)}
.vposter img{width:100%;height:100%;object-fit:cover}
.vplay{position:absolute;inset:auto;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--bg) 70%,transparent);
  display:flex;align-items:center;justify-content:center;color:var(--ink)}
.vplay svg{width:18px;height:18px}
.vdur{position:absolute;right:6px;bottom:6px;font-size:11px;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,var(--bg) 75%,transparent);color:var(--ink)}
.vmeta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;font-size:13px}
.vmeta label.vpub{display:flex;flex-direction:row;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--muted)}
.vmeta label.vpub input{width:auto;min-height:0;margin:0}
.vcard.bad .vposter svg{width:22px;height:22px;color:var(--bad)}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--card-border);border-top-color:var(--accent);animation:spin 1s linear infinite}
.fv-prog{display:flex;align-items:center;gap:10px;margin-top:8px}.fv-prog .fill-bar{flex:1}
dialog.vid-dlg{max-width:min(960px,96vw);padding:12px;background:var(--panel);display:flex;flex-direction:column;gap:10px}
dialog.vid-dlg:not([open]){display:none}
dialog.vid-dlg video{width:100%;max-height:78vh;border-radius:10px;background:#000}

/* Read from USB (owner, 2026-10-21): the button with a word on what it does, and the check before saving. */
.pad-read{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 12px;border:1px dashed var(--card-border);border-radius:10px}
.pad-read .muted{font-size:13px;flex:1 1 220px}
dialog.pad-dlg{max-width:min(560px,96vw);display:flex;flex-direction:column;gap:10px}
dialog.pad-dlg:not([open]){display:none}
.pad-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:55vh;overflow:auto}
.pad-rows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.pad-rows b{font-weight:500;overflow-wrap:anywhere}
.pad-rows .tick{margin:0;font-size:13px;white-space:nowrap}
dialog.pad-dlg h3.sh{margin:0;display:flex;align-items:center;gap:10px}
dialog.pad-dlg>.tick{align-self:flex-start}
#padDup{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}#padDup:empty{display:none}

/* Printer & labels after the review (2026-10-22): the address folded under the status, one Labels card, a sample
   value under each tick, the tape in use leading the layout, and on Windows one line instead of a USB card. */
.pr-more{margin-top:12px}
.pr-more>summary{font-weight:600;color:var(--accent-text);cursor:pointer}
.pr-more[open]>summary{margin-bottom:12px}
#tape .sh-sub+.sym-pick,#tape~.sh-sub{margin-top:16px}
.tick .tk-w small{display:block;font-size:11px;font-weight:400;color:var(--muted);font-family:var(--mono);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tick .tk-w{display:flex;flex-direction:column;line-height:1.2;padding:4px 0;border:0;min-height:0}
.layout-block.mine .sh-sub{color:var(--accent-text)}
.layout-block>small.muted{display:block;margin:-4px 0 8px;font-size:12px}
#usbSec:has(.usb-note){background:none;border:0;box-shadow:none;padding:0 4px}
#usbSec .usb-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
#usbSec .usb-note .ic{color:var(--muted);flex:none}
#usbSec .usb-note .link{padding:0;min-height:0}
#usbSec>details.fold>summary{display:flex;align-items:center;gap:8px;font-weight:600}
#usbSec .usb-note>span{flex:1 1 260px;min-width:0}