/* ==========================================================================
   SUPPLY HOUSE — components
   Requires tokens.css. Step 02 of the build order.
   These classes can land BESIDE the old ones — nothing here overrides
   an existing selector. Convert one screen at a time.

   Surface rule: put .on-dark on the phone <body> (or any dark container).
   Every component reads the right ink from it. There is one component set,
   not two.
   ========================================================================== */

/* ------------------------------------------------------------- surfaces */
.sh-light{background:var(--paper);color:var(--espresso)}
.sh-dark,.on-dark{background:var(--deepest);color:var(--ink-on-dark)}
.on-dark{--_ink:var(--ink-on-dark);--_muted:var(--muted-on-dark);--_line:var(--line-on-dark);
  --_surface:var(--surface-on-dark);--_red:var(--red-on-dark);--_gold:var(--gold-on-dark);
  --_green:var(--green-on-dark);--_amber:var(--amber-on-dark)}
.sh-light,:root{--_ink:var(--espresso);--_muted:var(--muted);--_line:var(--border);
  --_surface:#fff;--_red:var(--red);--_gold:var(--gold);--_green:var(--green);--_amber:var(--amber)}

/* ----------------------------------------------------------- type atoms */
.sh-label{font-family:var(--font-mono);font-size:var(--label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--_muted)}
.sh-meta{font-family:var(--font-mono);font-size:var(--meta);letter-spacing:.08em;color:var(--_muted)}
.sh-title{font-family:var(--font-ui);font-size:var(--title);font-weight:700;
  text-transform:uppercase;line-height:1.05;margin:0}
.sh-num{font-family:var(--font-num);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.sh-num.xl{font-size:var(--num-xl)}
.sh-num.lg{font-size:var(--num-lg)}
.sh-partno{font-family:var(--font-mono);font-size:var(--meta);letter-spacing:.08em;color:var(--_gold)}

/* -------------------------------------------------------------- buttons */
.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 16px;border-radius:var(--r1);border:var(--bw) solid transparent;
  font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;background:transparent;color:var(--_ink);
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
  touch-action:manipulation;text-decoration:none}
.on-dark .sh-btn,.sh-btn.tall{height:48px;font-size:15px}
.sh-btn.pri{background:var(--red);color:#fff;border-color:var(--red);font-weight:700}
.sh-btn.pri.tall{height:52px;font-size:16px}
.sh-btn.sec{border-color:currentColor}
.sh-btn.ghost{border-color:transparent;font-family:var(--font-mono);font-size:10px;
  font-weight:500;letter-spacing:.14em;color:var(--_muted);height:36px}
.sh-btn:hover:not(.pri){background:var(--paper-alt)}
.on-dark .sh-btn:hover:not(.pri){background:var(--surface-on-dark)}
.sh-btn.pri:hover{background:#a52a1e}
.sh-btn:active{transform:scale(.98)}
.sh-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sh-btn[disabled],.sh-btn[aria-disabled=true]{background:var(--paper-alt);color:#a3927b;
  border-color:var(--border);cursor:not-allowed;transform:none}
.on-dark .sh-btn[disabled]{background:var(--surface-on-dark);color:var(--muted);
  border-color:var(--line-on-dark)}
.sh-btn.wide{width:100%}

/* --------------------------------------------------------------- inputs */
.sh-input,.sh-select{width:100%;height:var(--tap);padding:0 14px;border-radius:var(--r1);
  border:var(--bw) solid var(--_line);background:var(--_surface);color:var(--_ink);
  font-family:var(--font-ui);font-size:16px}          /* 16px stops iOS zoom */
.on-dark .sh-input,.on-dark .sh-select{height:52px}
.sh-input:focus,.sh-select:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(200,134,46,.25)}
.sh-input[aria-invalid=true]{border-color:var(--_red)}
.sh-input::placeholder{color:var(--_muted)}

/* -------------------------------------------------------------- stepper */
.sh-step{display:inline-flex;align-items:center;border:var(--bw) solid var(--_ink);
  border-radius:var(--r1);overflow:hidden}
.sh-step button{width:44px;height:44px;border:0;background:transparent;color:inherit;
  font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sh-step button:first-child{border-right:var(--bw) solid currentColor}
.sh-step button:last-child{border-left:var(--bw) solid currentColor}
.sh-step button:active{background:var(--paper-alt)}
.on-dark .sh-step{border-color:var(--line-on-dark)}
.on-dark .sh-step button:first-child{border-right-color:var(--line-on-dark)}
.on-dark .sh-step button:last-child{border-left-color:var(--line-on-dark)}
.sh-step .v{width:44px;text-align:center;font-family:var(--font-num);font-weight:700;
  font-size:24px;background:none;border:0;color:inherit;font-variant-numeric:tabular-nums}
.sh-step.is-short .v{color:var(--_red)}
.sh-step.is-over  .v{color:var(--_amber)}
.sh-step.is-blank .v{color:var(--_muted)}          /* renders an em-dash, not 0 */
.sh-step.admin button{width:36px;height:36px}
.sh-step.admin .v{font-size:20px}

/* ------------------------------------------------------- chips / filter */
.sh-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}   /* WRAPS. never scrolls. */
.sh-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;
  border:var(--bw) solid var(--_line);border-radius:var(--r1);background:transparent;
  color:var(--_ink);font-family:var(--font-ui);font-size:13px;font-weight:500;cursor:pointer}
.sh-chip .n{font-family:var(--font-mono);font-size:10px;color:var(--_muted)}
.sh-chip[aria-pressed=true]{background:var(--_ink);color:var(--paper);border-color:var(--_ink)}
.on-dark .sh-chip[aria-pressed=true]{background:var(--ink-on-dark);color:var(--deepest)}
.sh-chip[aria-pressed=true] .n{color:inherit}
.sh-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------------------------------------------------------- status pill */
/* A status is ALWAYS a word. Never a bare dot. Outline = informational,
   filled = needs action (only SHORT and OVERDUE fill). */
.sh-pill{display:inline-flex;align-items:center;font-family:var(--font-mono);
  font-size:var(--meta);letter-spacing:.14em;text-transform:uppercase;
  padding:4px 8px;border-radius:2px;border:var(--bw) solid currentColor;white-space:nowrap}
.sh-pill.ready,.sh-pill.at-par{color:var(--_green)}
.sh-pill.out,.sh-pill.over,.sh-pill.pending{color:var(--_amber)}
.sh-pill.unknown{color:var(--_muted)}
.sh-pill.short,.sh-pill.overdue{background:var(--red);color:#fff;border-color:var(--red)}
.on-dark .sh-pill.short,.on-dark .sh-pill.overdue{background:var(--red-on-dark);color:var(--deepest);
  border-color:var(--red-on-dark)}
/* status as bare text in a table cell */
.sh-stat{font-family:var(--font-mono);font-size:var(--meta);letter-spacing:.14em;
  text-transform:uppercase}
.sh-stat.short{color:var(--_red);font-weight:600}
.sh-stat.over{color:var(--_amber)}
.sh-stat.at-par{color:var(--_green)}
.sh-stat.unknown{color:var(--_muted)}

/* --------------------------------------------------------- stat strip */
/* Replaces the four-tile KPI row on EVERY admin screen. */
.sh-strip{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 36px;
  padding-bottom:14px;border-bottom:2px solid var(--espresso)}
.sh-strip .v{font-family:var(--font-num);font-weight:700;font-size:32px;line-height:1;
  font-variant-numeric:tabular-nums}
.sh-strip .v small{font-size:18px;color:var(--muted);font-weight:600}
.sh-strip .k{font-family:var(--font-mono);font-size:var(--meta);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:5px}
.sh-strip .hot .v{color:var(--red)}
.sh-strip .warn .v{color:var(--amber)}

/* Espresso tile — hero use only (inside the Truck modal). */
.sh-tile{background:var(--espresso);color:var(--ink-on-dark);padding:14px 16px}
.sh-tile .k{font-family:var(--font-mono);font-size:var(--meta);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-on-dark)}
.sh-tile .v{font-family:var(--font-num);font-weight:700;font-size:34px;line-height:1;margin-top:6px}
.sh-tile .s{font-family:var(--font-mono);font-size:var(--meta);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-on-dark);margin-top:6px}
.sh-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-on-dark)}

/* ---------------------------------------------------------------- rows */
.sh-sechead{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:8px;border-bottom:var(--bw) solid var(--_gold)}
.sh-sechead .n{font-family:var(--font-mono);font-size:var(--label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--_gold)}
.sh-sechead .c{font-family:var(--font-mono);font-size:var(--meta);letter-spacing:.14em;
  text-transform:uppercase;color:var(--_muted)}

.sh-row{display:flex;align-items:center;gap:var(--s3);min-height:var(--row-phone);
  border-bottom:var(--bw) solid var(--_line);animation:shRise var(--t-base) var(--ease) both;
  animation-delay:var(--d,0ms)}
.sh-row.count{min-height:var(--row-count)}
.sh-row .g{flex:1;min-width:0}
.sh-row .nm{font-size:var(--row);font-weight:600;line-height:1.25}
.sh-row .sub{font-family:var(--font-mono);font-size:var(--meta);letter-spacing:.1em;
  text-transform:uppercase;color:var(--_muted);margin-top:3px}
/* stop the stagger after the 8th row — a 108-line truck must not take 3s */
.sh-row:nth-child(n+9){animation-delay:0ms}

/* table row — admin. NO row tint: the status column carries the meaning. */
.sh-trow{display:grid;align-items:center;min-height:var(--row-admin);padding:0 14px;
  gap:16px;border-bottom:var(--bw) solid var(--border)}
.sh-thead{display:grid;gap:16px;padding:10px 14px;border-bottom:var(--bw) solid var(--espresso);
  font-family:var(--font-mono);font-size:var(--meta);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.sh-trow:hover{background:var(--paper-alt)}
.sh-trow .num{text-align:right;font-family:var(--font-mono);font-size:13px;
  font-variant-numeric:tabular-nums}
.sh-trow .num.par{color:var(--muted)}        /* par is reference */
.sh-trow .num.on{font-weight:600}            /* what was counted is the fact */

/* ----------------------------------------------------------- callout */
.sh-callout{padding:12px 14px;border-left:2px solid var(--gold);background:var(--paper-alt);
  font-size:var(--body);line-height:1.55}
.on-dark .sh-callout{background:var(--surface-on-dark);border-left-color:var(--gold-on-dark);
  color:var(--ink-on-dark)}

/* ------------------------------------------------------ banner / toast */
.sh-banner{display:flex;gap:var(--s3);align-items:center;padding:10px 16px;
  font-size:13px;font-weight:600}
.sh-banner.offline{background:var(--amber-on-dark);color:var(--deepest)}
.sh-banner.offline .k{font-family:var(--font-mono);font-size:var(--meta);
  letter-spacing:.14em;text-transform:uppercase}
.sh-toast{position:fixed;left:var(--gutter);right:var(--gutter);bottom:100px;z-index:200;
  display:flex;gap:var(--s3);align-items:center;padding:14px 16px;border-radius:var(--r1);
  background:var(--ink-on-dark);color:var(--deepest);font-size:var(--body);font-weight:600;
  animation:shRise var(--t-base) var(--ease) both}
.sh-toast .k{font-family:var(--font-mono);font-size:var(--meta);letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--green)}
.sh-toast.err{background:var(--red-on-dark)}
.sh-toast.err .k{color:var(--deepest)}
@media(min-width:760px){.sh-toast{left:auto;right:24px;bottom:24px;max-width:420px}}

/* ------------------------------------------------------------- meters */
.sh-meter{display:flex;height:4px;gap:2px}
.sh-meter i{transform-origin:left;animation:shBar var(--t-slow) var(--ease) both}
.sh-meter .ok{background:var(--ink-on-dark)}
.sh-meter .short{background:var(--red-on-dark);animation-delay:120ms}
/* never counted: a dashed rule, NOT a full bar reading 100% */
.sh-meter.unknown{height:4px;background:repeating-linear-gradient(90deg,
  var(--line-on-dark) 0 6px,transparent 6px 12px)}

/* ---------------------------------------------------------- bottom dock */
.sh-dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
  background:var(--deepest);border-top:var(--bw) solid var(--line-on-dark);
  padding:8px 0 calc(20px + env(safe-area-inset-bottom,0px))}
.sh-dock a,.sh-dock button{flex:1;display:flex;flex-direction:column;align-items:center;
  gap:8px;padding:6px 0;background:none;border:0;cursor:pointer;text-decoration:none;
  color:var(--muted-on-dark);font-family:var(--font-mono);font-size:var(--meta);
  letter-spacing:.14em;text-transform:uppercase}
.sh-dock i{display:block;width:22px;height:3px;background:transparent}
.sh-dock [aria-current=page]{color:var(--ink-on-dark)}
.sh-dock [aria-current=page] i{background:var(--red)}
/* five tabs (admin only) — measured to fit 390px */
.sh-dock.five a,.sh-dock.five button{font-size:9px;letter-spacing:.12em}

/* ------------------------------------------------------------ sheet */
.sh-scrim{position:fixed;inset:0;z-index:100;background:rgba(36,24,17,.7);
  display:flex;align-items:flex-end;justify-content:center}
.sh-sheet{width:100%;max-width:620px;max-height:92vh;overflow-y:auto;
  background:var(--surface-on-dark);border-top:2px solid var(--gold-on-dark);
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  animation:shRise var(--t-base) var(--ease) both}
.sh-sheet .grab{width:36px;height:3px;background:var(--line-on-dark);margin:0 auto 14px}
@media(min-width:640px){.sh-scrim{align-items:center;padding:24px}}

/* ------------------------------------------------------------ scanner */
.sh-scan{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sh-scan .frame{width:190px;height:190px;position:relative}
.sh-scan .frame span{position:absolute;width:28px;height:28px;border:0 solid var(--gold-on-dark)}
.sh-scan .frame .tl{top:0;left:0;border-top-width:3px;border-left-width:3px}
.sh-scan .frame .tr{top:0;right:0;border-top-width:3px;border-right-width:3px}
.sh-scan .frame .bl{bottom:0;left:0;border-bottom-width:3px;border-left-width:3px}
.sh-scan .frame .br{bottom:0;right:0;border-bottom-width:3px;border-right-width:3px}
.sh-scan .line{position:absolute;left:0;right:0;top:50%;height:2px;width:auto;
  background:var(--red);animation:shScan 2.4s ease-in-out infinite}
.sh-scan.hit .frame span{border-color:var(--green-on-dark)}
.sh-scan.hit .line{display:none}

/* ----------------------------------------------------- 3D logo (sign-in) */
/* The one flourish. Sign-in and the admin sidebar. Nowhere else. */
.sh-logo3d{perspective:1000px}
.sh-logo3d img{display:block;width:100%;height:auto;transform-style:preserve-3d;
  animation:shSpin3d 9s linear infinite}

/* ------------------------------------------------------------- utility */
.sh-enter{animation:shIn var(--t-base) var(--ease) both}
.sh-enter.back{animation-name:shOut}
.sh-syncing{animation:shPulse 1.6s ease-in-out infinite}
.sh-skel{background:var(--surface-on-dark)}   /* skeleton block. no shimmer. */