/* ==================================================================
   P1 VENDOR HUB, PRECISION base (portal v1.87, 2026-10-04).
   Tokens and the shared pieces every Precision screen uses. Loaded after
   portal.html's own <style>, so it wins on equal specificity. Screen
   specific rules live in precision-shell.css, precision-today.css and
   precision-job.css. rules/design.md: light surfaces, hairline borders,
   quiet status text, no gradients, no emoji, no red buttons.
   ================================================================== */
:root{
  --pz-page:#f6f7f9; --pz-surface:#ffffff; --pz-surface-2:#f8fafc; --pz-hover:#f1f5f9;
  --pz-line:#e2e8f0; --pz-line-2:#cbd5e1;
  --pz-ink:#0f172a; --pz-ink-2:#334155; --pz-ink-3:#64748b; --pz-ink-4:#94a3b8;
  --pz-red:#ED2024; --pz-late:#dc2626; --pz-due:#b45309; --pz-due-2:#d97706; --pz-good:#15803d; --pz-good-2:#16a34a; --pz-info:#1d4ed8;
  --pz-radius:12px; --pz-radius-sm:8px;
  --pz-shadow:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
  --pz-shadow-pop:0 12px 40px rgba(15,23,42,.18);
  --pz-font:'Oxygen',system-ui,-apple-system,"Segoe UI",sans-serif;
  --pz-hfont:'Zalando Sans Expanded','Oxygen',system-ui,sans-serif;
  --pz-nav:248px; --pz-top:60px;
}
.pzi{display:inline-block;vertical-align:-3px;flex-shrink:0}
.pzring{display:inline-block;vertical-align:-3px;flex-shrink:0}
.pznum{font-variant-numeric:tabular-nums}

/* Status words: plain colored text, sentence case, no fill (design.md 2026-09-03). */
.pzs{font-weight:700;font-size:13px}
.pzs.late{color:var(--pz-late)} .pzs.due{color:var(--pz-due)} .pzs.ready{color:var(--pz-good)}
.pzs.info{color:var(--pz-info)} .pzs.quiet{color:var(--pz-ink-3);font-weight:600}

/* Buttons: dark primary, white outlined secondary, text link tertiary. Never red. */
.pzbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--pz-radius-sm);
  border:1px solid var(--pz-line-2);background:var(--pz-surface);color:var(--pz-ink);font:600 13.5px/1 var(--pz-font);
  cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,box-shadow .12s}
.pzbtn:hover{background:var(--pz-hover)}
.pzbtn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.pzbtn.pri{background:var(--pz-ink);border-color:var(--pz-ink);color:#fff}
.pzbtn.pri:hover{background:#1e293b}
.pzbtn.pri .pzkbd{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.pzbtn[disabled],.pzbtn.busy{opacity:.55;cursor:default}
.pzbtn.sm{height:30px;padding:0 10px;font-size:12.5px}
.pzlink{background:none;border:0;padding:0;color:var(--pz-ink-2);font:500 13.5px/1.3 var(--pz-font);cursor:pointer;text-decoration:none}
.pzlink:hover{color:var(--pz-ink);text-decoration:underline;text-underline-offset:3px}
.pzlink.u{text-decoration:underline;text-underline-offset:3px}
.pzlink:focus-visible{outline:2px solid #2563eb;outline-offset:2px;border-radius:3px}

.pzkbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:4px;
  border:1px solid var(--pz-line-2);background:var(--pz-surface);color:var(--pz-ink-3);font:600 10.5px/1 var(--pz-font);
  box-shadow:0 1px 0 var(--pz-line)}
.pzav{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pz-hover);
  border:1px solid var(--pz-line);color:var(--pz-ink-2);font:700 10px/1 var(--pz-font);letter-spacing:.02em;flex-shrink:0}
.pzav.lg{width:34px;height:34px;font-size:11.5px}

/* Cards */
.pzcard{background:var(--pz-surface);border:1px solid var(--pz-line);border-radius:var(--pz-radius);box-shadow:var(--pz-shadow)}
.pzcard-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--pz-line)}
.pzcard-h h3{margin:0;font:700 15px/1.3 var(--pz-font);color:var(--pz-ink)}
.pzcard-b{padding:16px 20px}
.pzdisp{font-family:var(--pz-hfont);font-weight:700;letter-spacing:.01em;word-spacing:-.28em;color:var(--pz-ink)}

/* Skeleton: same height as the real row, so nothing jumps when data lands. */
.pzsk{display:block;border-radius:6px;background:linear-gradient(90deg,#eef2f6 0,#f6f8fa 50%,#eef2f6 100%);background-size:200% 100%;
  animation:pzsk 1.2s ease-in-out infinite}
@keyframes pzsk{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion: reduce){ .pzsk{animation:none} }

/* The Undo toast (dark, bottom center, check + message + Undo Z). */
.toast.pzundo{background:var(--pz-ink);color:#fff;padding:12px 14px 12px 16px;border-radius:10px;gap:12px;font:500 13.5px/1.4 var(--pz-font);max-width:min(560px,92vw)}
.toast.pzundo .pzt-ic{color:#4ade80;display:flex}
.toast.pzundo .pzt-msg{flex:1}
.pzt-undo{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:8px;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:#fff;font:600 13px/1 var(--pz-font);cursor:pointer}
.pzt-undo .pzkbd{background:transparent;border-color:rgba(255,255,255,.35);color:#fff;box-shadow:none}
@media (max-width:760px){ .toast.pzundo{bottom:84px;width:calc(100vw - 24px);max-width:none;box-sizing:border-box} }

/* Touch screens have no keyboard: hide the key chips inside buttons. */
@media (hover: none) and (pointer: coarse){ .pzbtn .pzkbd{display:none} }

/* Plain messages while an Undo waits: a second line above the Undo toast. */
.pztoast2{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(10px);max-width:min(560px,92vw);
  background:#fff;color:var(--pz-ink);border:1px solid var(--pz-line);border-radius:10px;box-shadow:var(--pz-shadow-pop);
  padding:10px 14px;font:500 13px/1.4 var(--pz-font);z-index:99;opacity:0;pointer-events:none;transition:all .15s}
.pztoast2.on{opacity:1;transform:translateX(-50%)}
@media (max-width:760px){ .pztoast2{bottom:144px} }