:root{
  --paper:#F6F8F6; --surface:#FFFFFF; --surface2:#EEF2F0; --surface3:#E5EBE8;
  --ink:#141A19; --ink2:#44514E; --ink3:#74827E;
  --line:#D7DEDA; --line2:#BFC9C4;
  --accent:#0B5D63; --accentSoft:#E0EEEE; --accentInk:#08464B;
  --ok:#2C7A45; --okSoft:#E2F0E7;
  --warn:#9C5F0A; --warnSoft:#F9EDDA;
  --alert:#A03526; --alertSoft:#F7E5E1;
  --info:#3D4C9B; --infoSoft:#E6EAF6;
  --laneProd:#FBF6ED; --laneStore:#EDF4F4;
  --shadow:0 1px 2px rgba(20,26,25,.05), 0 10px 26px -14px rgba(20,26,25,.28);
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1312; --surface:#151D1C; --surface2:#1C2624; --surface3:#243030;
    --ink:#E8EEEB; --ink2:#A7B5B1; --ink3:#7C8A86;
    --line:#2A3634; --line2:#3B4946;
    --accent:#54B6BB; --accentSoft:#123030; --accentInk:#84D3D6;
    --ok:#5FC07C; --okSoft:#122A1C;
    --warn:#DCA65C; --warnSoft:#2D2312;
    --alert:#E48575; --alertSoft:#331B16;
    --info:#909DE9; --infoSoft:#1A2036;
    --laneProd:#1B1A14; --laneStore:#131E1E;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0D1312; --surface:#151D1C; --surface2:#1C2624; --surface3:#243030;
  --ink:#E8EEEB; --ink2:#A7B5B1; --ink3:#7C8A86;
  --line:#2A3634; --line2:#3B4946;
  --accent:#54B6BB; --accentSoft:#123030; --accentInk:#84D3D6;
  --ok:#5FC07C; --okSoft:#122A1C;
  --warn:#DCA65C; --warnSoft:#2D2312;
  --alert:#E48575; --alertSoft:#331B16;
  --info:#909DE9; --infoSoft:#1A2036;
  --laneProd:#1B1A14; --laneStore:#131E1E;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Archivo", ui-sans-serif, system-ui, sans-serif; margin:0; text-wrap:balance; letter-spacing:-.01em}
.mono,.num{font-family:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
a{color:var(--accent)}

.lbl{
  font-family:"Archivo",sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink3);
}

/* ---------- shell ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:0 18px}
header.top{
  border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:0; z-index:30;
}
.topbar{display:flex; align-items:center; gap:14px; height:58px}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.mark{
  width:30px;height:30px;border-radius:7px;background:var(--accent);color:var(--surface);
  display:grid;place-items:center;font-family:"Archivo",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:-.02em; flex:none;
}
.brandname{font-family:"Archivo",sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.brandsub{font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.tabs{display:flex; gap:4px; margin-left:auto; align-items:stretch}
nav.tabs button{
  background:none;border:0;padding:0 14px;border-radius:7px;cursor:pointer;
  font-family:"Archivo",sans-serif;font-weight:600;font-size:13.5px;color:var(--ink2);
  min-height:44px; white-space:nowrap; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
nav.tabs button:hover{background:var(--surface2)}
nav.tabs button:active{background:var(--surface3); transform:scale(.97)}
nav.tabs button[aria-current="true"]{background:var(--accentSoft);color:var(--accentInk)}
.themebtn{white-space:nowrap;margin-right:8px}
@media (max-width:640px){.themebtn{padding:4px 8px;font-size:12px}}
.userchip{
  display:flex;align-items:center;gap:8px;padding:5px 6px 5px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);cursor:pointer;
}
.avat{width:24px;height:24px;border-radius:50%;background:var(--surface3);display:grid;place-items:center;
  font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;color:var(--ink2)}
.demoband{
  background:var(--warnSoft); color:var(--warn); border-bottom:1px solid var(--line);
  font-size:12.5px;
}
.demoband .wrap{display:flex;align-items:center;gap:10px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.demoband strong{font-family:"Archivo",sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
main{padding:22px 0 80px}

/* ---------- generic ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.stack{display:flex;flex-direction:column}
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.muted{color:var(--ink3)}
.small{font-size:13px}
.tiny{font-size:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:8px;border:1px solid var(--line2);background:var(--surface);
  font-family:"Archivo",sans-serif;font-weight:600;font-size:13.5px;cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.btn:hover{background:var(--surface2)}
/* Something visible has to happen the instant a finger lands, otherwise a slow response
   reads as a missed tap and people press again. */
.btn:active{transform:scale(.97); filter:brightness(.96)}
.btn{min-height:40px; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.btn.sm{min-height:34px}
.acct:active, tbody tr.clickable:active{background:var(--surface3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:none;color:var(--ink2)}
.btn.ghost:hover{background:var(--surface2)}
.btn.danger{color:var(--alert)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:999px;
  font-family:"Archivo",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.02em;
  border:1px solid transparent;white-space:nowrap;
}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.s-draft{background:var(--surface2);color:var(--ink2);border-color:var(--line)}
.s-verify{background:var(--infoSoft);color:var(--info)}
.s-receive{background:var(--accentSoft);color:var(--accentInk)}
.s-query{background:var(--warnSoft);color:var(--warn)}
.s-received{background:var(--okSoft);color:var(--ok)}

.field{display:flex;flex-direction:column;gap:5px}
.field input,.field select,.field textarea{
  padding:8px 10px;border:1px solid var(--line2);border-radius:7px;background:var(--surface);
  font-size:14px;width:100%;
}
.field input:disabled{background:var(--surface2);color:var(--ink3)}
.field textarea{resize:vertical;min-height:70px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:860px){.grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:620px}
th{
  font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--line);background:var(--surface2);white-space:nowrap;
}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--surface2)}

.lane{border-radius:var(--radius);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:14px}
.lane.prod{background:var(--laneProd)}
.lane.store{background:var(--laneStore)}
.lanehead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lanetag{font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;background:var(--surface);border:1px solid var(--line2);color:var(--ink2)}

.stamp{border-top:1px solid var(--line2);padding-top:10px;display:flex;flex-direction:column;gap:2px}
.stamp .who{font-family:"Archivo",sans-serif;font-weight:600;font-size:14px}
.stamp .when{font-size:12px;color:var(--ink3)}
.stamp .empty{font-size:13px;color:var(--ink3);font-style:italic}

.modalbg{position:fixed;inset:0;background:rgba(10,16,15,.55);display:grid;place-items:center;z-index:100;padding:18px}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  width:min(440px,100%);padding:22px;display:flex;flex-direction:column;gap:14px}
.pinbox{display:flex;gap:9px;justify-content:center}
.pinbox input{width:52px;height:58px;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:22px;
  border:1px solid var(--line2);border-radius:9px;background:var(--surface2)}

.kv{display:flex;flex-direction:column;gap:3px;min-width:0}
.kv .v{font-size:14.5px;font-weight:500;overflow-wrap:anywhere}
.kv .v.mono{font-size:14px}

.empty-state{padding:56px 20px;text-align:center;color:var(--ink3);display:flex;flex-direction:column;gap:8px;align-items:center}

.progbar{height:7px;border-radius:99px;background:var(--surface3);overflow:hidden}
.progbar > span{display:block;height:100%;background:var(--accent);border-radius:99px}

.thumb{width:52px;height:52px;object-fit:cover;border-radius:6px;border:1px solid var(--line2);cursor:zoom-in}

/* ---------- production pipeline ---------- */
.pipe{display:flex;gap:6px;overflow-x:auto;padding-bottom:5px}
.seg{
  flex:1 1 0;min-width:132px;border-radius:8px;padding:9px 10px;
  border:1px solid var(--line);display:flex;flex-direction:column;gap:2px;
}
.segname{font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.segstate{font-size:11.5px;font-weight:500;line-height:1.3}
.segtime{font-size:10.5px;font-family:"IBM Plex Mono",monospace;opacity:.72;line-height:1.35}
.g-pending{background:var(--surface2);color:var(--ink3)}
.g-wip{background:var(--accentSoft);color:var(--accentInk);border-color:var(--accent)}
.g-done{background:var(--warnSoft);color:var(--warn);border-color:var(--warn)}
.g-approved{background:var(--okSoft);color:var(--ok);border-color:var(--okSoft)}
.g-hold{background:var(--alertSoft);color:var(--alert);border-color:var(--alert)}
.stn{border:1px solid var(--line);border-radius:9px;padding:12px 13px}
.stn.g-pending{background:var(--surface2)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);vertical-align:middle;margin-left:5px}

/* ---------- login ---------- */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.loginbox{width:min(430px,100%);display:flex;flex-direction:column;gap:20px}
.acct{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);cursor:pointer;text-align:left;width:100%}
.acct:hover{border-color:var(--accent);background:var(--accentSoft)}
.acct .nm{font-family:"Archivo",sans-serif;font-weight:600;font-size:14.5px}
.acct .rl{font-size:12px;color:var(--ink3)}

/* A summary laid out as a flex row loses the browser's own disclosure triangle, so it
   carries its own. Only this kind: everywhere else the default marker is doing its job. */
summary.foldhead{
  cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  list-style:none;
}
summary.foldhead::-webkit-details-marker{display:none}
summary.foldhead .caret{display:inline-block;transition:transform .15s ease;color:var(--ink3)}
details[open] > summary.foldhead .caret{transform:rotate(90deg)}

/* ---------- a list that is cards on a phone and a table on a computer ---------- */
.plist{display:flex;flex-direction:column;gap:9px}
.pcard{
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow);
}
.pcard:active{background:var(--surface2)}
.pcard .ptop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pcard .pso{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px}
.pcard .pname{font-size:14.5px;font-weight:500;line-height:1.3}
.pcard .pmeta{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12px;color:var(--ink3)}
.pcard .pmeta b{color:var(--ink2);font-weight:600}
.pcard .btn{width:100%}

/* ---------- phone ----------
   QC and Store work this on a phone: the incoming check happens standing at a pallet and
   the store tick happens at the door. Everyone else is at a computer. So this is not a
   responsive rebuild of everything, it is the lists those two people use turned into
   cards, plus the handful of things that make a form usable with a thumb. */
.only-phone{display:none}
@media (max-width:760px){
  .only-phone{display:block}
  .only-desk{display:none !important}

  .wrap{padding:0 12px}
  .topbar{height:auto;flex-wrap:wrap;padding:9px 0;gap:9px}
  .brandsub{display:none}
  nav.tabs{order:3;width:100%;margin-left:0;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs button{padding:0 12px;font-size:13px}
  .userchip{margin-left:auto;padding:5px}
  .userchip .stack{display:none}
  main{padding:14px 0 56px}
  h1{font-size:20px !important}

  /* Under 16px, iOS zooms the whole page the moment a field takes focus, which throws
     the layout sideways in the middle of typing. */
  input,select,textarea{font-size:16px !important}

  .btn{min-height:46px;padding:12px 15px}
  .btn.sm{min-height:40px;padding:10px 13px;font-size:13px}

  /* A modal comes up from the bottom, where the thumb already is. */
  .modalbg{padding:0;place-items:end stretch}
  .modal{
    width:100%;max-width:none;border-radius:16px 16px 0 0;max-height:92dvh;overflow-y:auto;
    padding:18px 15px calc(20px + env(safe-area-inset-bottom));
  }
  .pinbox input{width:58px;height:64px}
  .thumb{width:64px;height:64px}
  .card{border-radius:10px}
  .stn{padding:11px}

  /* Eight short facts about a job, one per line, is a screenful of scrolling before
     the stations, which is what somebody opened the job for. Two across. */
  .jobmeta{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:11px}

  /* What a station recorded reads fine two across, and six one-line facts stacked is
     most of a phone screen for a station that is already finished. */
  .strec{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px}

  /* The filter chips are one swipeable row instead of three stacked ones. */
  .chiprow{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px;padding:0 12px 4px}
  .chiprow::-webkit-scrollbar{display:none}
  .chiprow .btn{flex:none}
}

/* ---------- A4 print sheet ---------- */
.sheet{
  background:#fff;color:#111;width:210mm;max-width:100%;min-height:297mm;margin:0 auto;padding:14mm 14mm 12mm;
  border:1px solid var(--line);box-shadow:var(--shadow);
  font-family:"IBM Plex Sans",sans-serif;font-size:10.5px;line-height:1.4;
}
.sheetscroll{overflow-x:auto}
.sheet .lh{display:flex;gap:12px;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:8px}
.sheet .lhmark{width:46px;height:46px;border:1.5px solid #111;border-radius:6px;display:grid;place-items:center;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:15px;flex:none;color:#111}
.sheet .lhname{font-family:"Archivo",sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em;color:#111}
.sheet .lhline{font-size:9.5px;color:#333;line-height:1.45}
.sheet .lhform{margin-left:auto;text-align:right;font-size:9px;color:#444;white-space:nowrap}
.sheet h2.doctitle{
  font-family:"Archivo",sans-serif;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;margin:10px 0 2px;color:#111;
}
.sheet .docsub{text-align:center;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#555;margin-bottom:10px}
.sheet .hdrgrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #111}
.sheet .hdrgrid > div{padding:5px 7px;border-right:1px solid #bbb;border-bottom:1px solid #bbb}
.sheet .hdrgrid > div:nth-child(4n){border-right:0}
.sheet .hdrgrid .k{font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:#666;font-family:"Archivo",sans-serif;font-weight:600}
.sheet .hdrgrid .v{font-size:11px;font-weight:600;color:#111;overflow-wrap:anywhere}
.sheet table.st{width:100%;min-width:0;border-collapse:collapse;margin-top:10px;border:1px solid #111}
.sheet table.st th{background:#EDEDEA;color:#111;border:1px solid #999;padding:5px 6px;font-size:8px;letter-spacing:.06em}
.sheet table.st td{border:1px solid #bbb;padding:5px 6px;font-size:10.5px;color:#111}
.sheet table.st tfoot td{background:#F5F5F2;font-weight:700}
.sheet .blk{margin-top:10px;border:1px solid #111}
.sheet .blkh{background:#EDEDEA;padding:4px 7px;font-family:"Archivo",sans-serif;font-size:8.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid #999;color:#111}
.sheet .blkb{padding:7px}
.sheet .sigs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;border:1px solid #111}
.sheet .sig{padding:8px 9px 9px;border-right:1px solid #999;min-height:72px}
.sheet .sig:last-child{border-right:0}
.sheet .sig .k{font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:#666;font-family:"Archivo",sans-serif;font-weight:600}
.sheet .sig .n{font-family:"Archivo",sans-serif;font-weight:700;font-size:13px;margin-top:12px;color:#111}
.sheet .sig .d{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:#333;margin-top:1px}
.sheet .sig .pend{font-size:10px;color:#999;font-style:italic;margin-top:12px}
.sheet .foot{margin-top:10px;display:flex;justify-content:space-between;gap:14px;font-size:8.5px;color:#666;
  border-top:1px solid #ccc;padding-top:5px}
.sheettools{display:flex;gap:9px;align-items:center;justify-content:center;margin:0 0 16px;flex-wrap:wrap}

@media print{
  header.top,.demoband,.sheettools,#appview{display:none !important}
  body{background:#fff}
  .sheet{width:auto;min-height:0;margin:0;padding:0;border:0;box-shadow:none}
  main{padding:0}
  .wrap{padding:0;max-width:none}
  @page{size:A4;margin:12mm}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}

/* ======================================================================
   Customer portal (.cust-)
   Everything above is the Production Desk vocabulary, copied whole so the internal screens
   and this one read as the same family. Everything below is the one screen an outside
   customer sees. It is prefixed so the internal app, written in parallel, can never collide
   with it, and it is written mobile first: a customer opens this on a phone, and a desk
   width is the exception that earns a wider grid. Nothing here names a station, a batch or
   a person, because nothing on this screen may. */

.cust-main{padding:16px 0 80px}
.cust-topright{margin-left:auto;display:flex;align-items:center;gap:6px;min-width:0}
/* On a phone the brand and the buttons fill the bar, so the customer's name moves under the
   heading instead of wrapping the bar onto a second row. */
.cust-who{display:none;font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The bar fits the brand and two buttons at 375px and not a character more, so the Chinese
   half of "Account" waits for a width that has room for it. The sheet itself is bilingual. */
.cust-acctcn{display:none}
.cust-forwho{font-size:13.5px;color:var(--ink2);margin-top:2px}

.cust-sec{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.cust-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cust-sechead h1{font-size:21px}
.cust-sechead h2{font-size:18px}
.cust-sechead .cn{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;font-weight:400;font-size:13px;color:var(--ink3);margin-left:7px;letter-spacing:0}

/* The refresh line sits right under the heading because an ETA with no timestamp is how a
   customer ends up quoting a stale date back at us. */
.cust-fresh{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink3);white-space:nowrap}
.cust-fresh i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.cust-fresh.stale{color:var(--warn)}
.cust-fresh.stale i{background:var(--warn)}

.cust-grid{display:grid;grid-template-columns:1fr;gap:12px}
.cust-job{padding:15px 15px 14px;display:flex;flex-direction:column;gap:12px}
.cust-job .cust-pname{font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:15.5px;line-height:1.3;overflow-wrap:anywhere}
.cust-job .cust-pmeta{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12.5px;color:var(--ink3);margin-top:4px}
.cust-job .cust-pmeta b{color:var(--ink2);font-weight:500}

/* The ETA is the biggest thing on the card. That is the whole reason the card exists. */
.cust-eta{display:flex;flex-direction:column;gap:1px;padding:11px 13px;border-radius:9px;background:var(--surface2);border:1px solid var(--line)}
.cust-eta .d{
  font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:27px;
  letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;
}
.cust-eta .rel{font-size:13px;color:var(--ink2)}
.cust-eta.tbc .d{font-size:19px;color:var(--ink2);font-weight:600}
.cust-eta.late{background:var(--warnSoft);border-color:var(--warnSoft)}
.cust-eta.late .rel{color:var(--warn);font-weight:500}
.cust-eta.soon{background:var(--accentSoft);border-color:var(--accentSoft)}
.cust-eta.soon .d{color:var(--accentInk)}
.cust-eta.done{background:var(--okSoft);border-color:var(--okSoft)}
.cust-eta.done .d{color:var(--ok)}

/* One segment per track word, as many as the card draws. It is a progress bar and nothing
   more: it does not move inside `production`, because the factory's stations are not this
   screen's business. A terminal stage (closed) draws no track at all: see .cust-closed. */
.cust-track{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.cust-track span{height:5px;border-radius:99px;background:var(--surface3)}
.cust-track span.on{background:var(--accent)}
.cust-track.done span.on{background:var(--ok)}
.cust-stage{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cust-stage b{font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:14px}
.cust-stage .cn{font-size:13px;color:var(--ink3)}

.cust-fold summary.foldhead{padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.cust-fold[open] summary.foldhead{border-radius:var(--radius) var(--radius) 0 0;border-bottom:0}
.cust-fold .cust-foldbody{border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);padding:12px;background:var(--surface2)}

/* A request is the customer talking, never an order. The banner says so before the button. */
.cust-note{background:var(--accentSoft);color:var(--accentInk);padding:10px 13px;border-radius:9px;font-size:13.5px;line-height:1.45}
.cust-note .cn{display:block;font-size:12.5px;opacity:.85;margin-top:2px}

.cust-req{padding:13px 14px;display:flex;flex-direction:column;gap:8px}
.cust-req .cust-reqtop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.cust-req .cust-reqkind{font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:14.5px}
.cust-req .cust-reqkind .cn{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;font-weight:400;font-size:12.5px;color:var(--ink3);margin-left:6px}
.cust-req .cust-reqwhen{font-size:12px;color:var(--ink3)}
.cust-req dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13.5px}
.cust-req dt{color:var(--ink3)}
.cust-req dd{margin:0;overflow-wrap:anywhere}
.cust-req .cust-reqmsg{font-size:13.5px;color:var(--ink2);line-height:1.45;border-top:1px solid var(--line);padding-top:8px}
.cust-req .cust-reqso{display:block;margin-top:5px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;font-size:17px;color:var(--ok);white-space:nowrap}
.cust-req .cust-reqnote{font-size:13px;color:var(--ink2);background:var(--surface2);padding:8px 10px;border-radius:7px}
.cust-req .cust-reqfoot{display:flex;justify-content:flex-end}

/* Request status pills. Kept separate from the desk's .s-* so a rename over there cannot
   quietly recolour what a customer sees. */
.cust-s-new{background:var(--infoSoft);color:var(--info)}
.cust-s-seen{background:var(--accentSoft);color:var(--accentInk)}
.cust-s-converted{background:var(--okSoft);color:var(--ok)}
.cust-s-declined{background:var(--alertSoft);color:var(--alert)}
.cust-s-cancelled{background:var(--surface2);color:var(--ink3);border-color:var(--line)}

/* An order the factory closed without shipping. No track, no date, no green: one badge and
   one sentence in place of the ETA box. Neutral on purpose. It is a fact, not an alarm, and
   the customer already knows more about why than this screen ever will. */
.cust-closed{display:flex;flex-direction:column;gap:6px;padding:11px 13px;border-radius:9px;background:var(--surface2);border:1px solid var(--line2)}
.cust-closed .pill{align-self:flex-start}
.cust-closed .line{font-size:13.5px;color:var(--ink2);line-height:1.45}
.cust-closed .line.cn{font-size:12.5px;color:var(--ink3)}
.cust-s-closed{background:var(--surface3);color:var(--ink2);border-color:var(--line2)}

/* Kind picker inside the raise modal: four big targets, one per REQUEST_KINDS entry. */
.cust-kinds{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cust-kind{
  display:flex;flex-direction:column;gap:2px;padding:13px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);cursor:pointer;text-align:left;min-height:64px;-webkit-tap-highlight-color:transparent;
}
.cust-kind:hover{border-color:var(--accent);background:var(--accentSoft)}
.cust-kind:active{transform:scale(.98)}
.cust-kind b{font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:14px}
.cust-kind span{font-size:12.5px;color:var(--ink3)}
.cust-form{display:flex;flex-direction:column;gap:12px}
.cust-form .field label{font-size:13px;color:var(--ink2)}
.cust-form .field label .opt{color:var(--ink3);font-size:12px;margin-left:5px}
.cust-err{color:var(--alert);font-size:13px;background:var(--alertSoft);padding:8px 11px;border-radius:7px}
.cust-modalfoot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.cust-modalfoot .btn{flex:1 1 auto}

/* First sign in: the passcode we handed out gets replaced before anything else is shown. */
.cust-reset{width:min(420px,100%);display:flex;flex-direction:column;gap:16px}
.cust-reset .cust-resethead{display:flex;flex-direction:column;gap:6px;text-align:center;align-items:center}
.cust-reset h1{font-size:20px}

/* The account sheet. Plain sign out, the passcode change and the lost-phone control share
   one sheet, calm at the top and emergency at the bottom. The lost-phone control is boxed
   in red so a thumb in a hurry lands on it, and so it can never be read as a second copy
   of the plain sign out above it. */
.cust-acct h3 .cn{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;font-weight:400;font-size:13px;color:var(--ink3);margin-left:7px;letter-spacing:0}
.cust-acct h4{font-size:14.5px}
.cust-acct h4 .cn{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;font-weight:400;font-size:12.5px;color:var(--ink3);margin-left:6px;letter-spacing:0}
.cust-acctrow{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink2)}
.cust-acctrow .cn{display:block;font-size:12.5px;color:var(--ink3)}
.cust-acctrow .btn{flex:none}
.cust-acctsec{padding-top:14px;border-top:1px solid var(--line)}
.cust-danger{display:flex;flex-direction:column;gap:8px;padding:12px 13px;border-radius:9px;border:1px solid var(--alert);background:var(--alertSoft)}
.cust-danger h4{color:var(--alert)}
.cust-danger p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.45}
.cust-danger p.cn{font-size:12.5px;color:var(--ink3)}
.cust-danger .btn.danger{border-color:var(--alert);background:var(--surface)}
.cust-danger .btn.primary{background:var(--alert);border-color:var(--alert)}

.cust-toast{
  position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-size:13.5px;
  box-shadow:var(--shadow);z-index:200;max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.cust-foot{margin-top:36px;font-size:12px;color:var(--ink3);text-align:center;line-height:1.6}

@media (min-width:760px){
  .cust-main{padding:26px 0 90px}
  .cust-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .cust-sechead h1{font-size:24px}
  .cust-eta .d{font-size:30px}
  .cust-modalfoot .btn{flex:0 0 auto}
  .cust-who{display:inline;max-width:260px}
  .cust-acctcn{display:inline}
  .cust-forwho{display:none}
}
@media (min-width:1100px){
  .cust-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}