/* THE ONE PAGE — the staff surface for a job.
 *
 * ONE type system, ONE palette (the order's finding 7). This is an NWB
 * INTERNAL surface, so it follows the brand bible's NWB rules to the letter:
 * a workhorse sans for display, near-black on near-white, magenta only for
 * the primary action, JetBrains Mono reserved for technical values. No serif
 * — the serif belongs to PNWRF and to the client-facing delivery page, which
 * is a different surface with a different job.
 *
 * Everything below is expressed in these tokens. If a colour or a face is not
 * here, it does not appear on the page.
 */
:root {
  --bg:#faf9f8; --card:#ffffff; --ink:#141110; --mute:#6d6660; --faint:#9a938c;
  --line:#e7e2dd; --line-2:#f0ece8;
  --accent:#d23264;                 /* the one CTA colour */
  --ok:#2f7d55; --ok-bg:#eaf5ee;
  --warn:#8a5300; --warn-bg:#fdf3e0;
  --bad:#b3261e;  --bad-bg:#fdecea;
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:12px; --pad:20px;
  --shadow:0 1px 2px rgba(20,17,16,.05), 0 8px 24px rgba(20,17,16,.05);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;}
body{padding-bottom:64px;}
button,input{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;}

/* labels / technical values — the ONLY place mono appears */
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.04em;}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);}

/* ── the one bar ─────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;background:rgba(250,249,248,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);}
.bar-in{max-width:1120px;margin:0 auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.mark{font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink);
  text-decoration:none;}
.bar-date{display:flex;align-items:center;gap:6px;}
.bar-date input[type=date]{border:1px solid var(--line);background:var(--card);
  border-radius:10px;padding:8px 10px;font-size:14px;min-height:40px;}
.step,.today{border:1px solid var(--line);background:var(--card);border-radius:10px;
  min-width:40px;min-height:40px;padding:0 10px;font-size:15px;color:var(--mute);}
.today{font-size:13px;}
.step:hover,.today:hover{border-color:var(--ink);color:var(--ink);}
.bar-state{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint);}
/* At 390 the date group ran 12px past the viewport and took the whole page
   sideways with it. The controls stay 40px tall (thumb-sized) and give up
   width instead. */
@media (max-width:430px){
  .bar-in{gap:10px;}
  /* wrap INSIDE the group too: WebKit's date input keeps an intrinsic
     min-content width that min-width:0 alone does not defeat, so the row
     stayed 382px wide inside a 350px box and took the page sideways. */
  .bar-date{flex:1 1 100%;order:3;flex-wrap:wrap;}
  .bar-date input[type=date]{flex:1 1 120px;min-width:0;width:100%;}
  .bar-state{margin-left:auto;}
}

/* ── the day's jobs ──────────────────────────────────────────── */
.jobs{max-width:1120px;margin:0 auto;padding:14px var(--pad) 0;
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;}
.jobs::-webkit-scrollbar{height:6px;}
.jobs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
.jchip{flex:0 0 auto;border:1px solid var(--line);background:var(--card);
  border-radius:999px;padding:9px 14px;font-size:13px;color:var(--mute);
  min-height:40px;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.jchip:hover{border-color:var(--ink);color:var(--ink);}
.jchip[aria-current=true]{background:var(--ink);border-color:var(--ink);color:#fff;}
.jchip .dot{width:7px;height:7px;border-radius:50%;background:var(--faint);}
.jchip .dot.ok{background:var(--ok);} .jchip .dot.bad{background:var(--bad);}
.jchip .dot.warn{background:var(--warn);}

/* ── the job ─────────────────────────────────────────────────── */
.job{max-width:1120px;margin:0 auto;padding:18px var(--pad);}
.empty{color:var(--faint);padding:48px 0;text-align:center;}
.addr{font-size:clamp(26px,4.4vw,40px);font-weight:700;letter-spacing:-.02em;
  line-height:1.1;margin-bottom:8px;}
.meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:var(--mute);font-size:14px;
  margin-bottom:18px;}
.meta .sep{color:var(--line);}
.unlinked{color:var(--warn);}

/* the answer strip — what's done, what's missing, can I deliver */
.answer{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px;margin-bottom:18px;}
.answer-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.answer-head{font-size:17px;font-weight:700;letter-spacing:-.01em;}
.answer-sub{color:var(--mute);font-size:14px;}
.meter{height:6px;background:var(--line-2);border-radius:3px;margin:12px 0 4px;
  overflow:hidden;}
.meter i{display:block;height:100%;background:var(--ok);border-radius:3px;
  transition:width .4s cubic-bezier(.16,1,.3,1);}
.blockers{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.blocker{font-size:13px;color:var(--warn);display:flex;gap:8px;}
.blocker b{font-weight:600;color:var(--ink);}
.deliver{margin-top:14px;background:var(--accent);color:#fff;border-radius:10px;
  padding:12px 20px;font-size:14px;font-weight:600;min-height:44px;width:100%;}
.deliver[disabled]{background:var(--line);color:var(--faint);cursor:not-allowed;}
@media(min-width:720px){.deliver{width:auto;}}

/* ── sections ────────────────────────────────────────────────── */
.sec{margin:26px 0 0;}
.sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;}
.sec-h h2{font-size:13px;font-weight:700;letter-spacing:.02em;}
.sec-h .n{font-family:var(--mono);font-size:11px;color:var(--faint);}

.slots{display:grid;gap:10px;grid-template-columns:1fr;}
@media(min-width:760px){.slots{grid-template-columns:1fr 1fr;}}
.slot{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;display:flex;flex-direction:column;gap:8px;}
.slot-top{display:flex;align-items:center;gap:10px;}
.slot-name{font-weight:600;font-size:15px;letter-spacing:-.01em;flex:1;}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:4px 8px;
  border-radius:999px;text-transform:uppercase;}
.pill.filled{background:var(--ok-bg);color:var(--ok);}
.pill.partial{background:var(--warn-bg);color:var(--warn);}
.pill.empty{background:var(--line-2);color:var(--faint);}
.slot-files{display:flex;flex-direction:column;gap:4px;}
.file{font-size:13px;color:var(--mute);display:flex;gap:8px;align-items:center;}
.file .tick{color:var(--ok);}
.slot-accepts{font-family:var(--mono);font-size:10px;color:var(--faint);}

/* ── every upload's life ─────────────────────────────────────── */
.lives{display:flex;flex-direction:column;gap:8px;}
.life{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.life .nm{flex:1;min-width:180px;font-size:14px;word-break:break-word;}
.life .fate{font-size:13px;}
.life.ok .fate{color:var(--ok);}
.life.flight{border-color:#8ec5ff;background:#f2f8ff;}
.life.flight .fate{color:#1c5fa8;}
.life.lost{border-color:var(--bad);background:var(--bad-bg);}
.life.lost .fate{color:var(--bad);font-weight:600;}

/* ── dropping files on a slot ────────────────────────────────── */
.drop{margin-top:4px;border:1px dashed var(--line);border-radius:10px;
  padding:14px;text-align:center;color:var(--faint);font-size:13px;
  cursor:pointer;transition:border-color .15s,background .15s;min-height:56px;}
.drop:hover,.drop:focus-visible{border-color:var(--ink);color:var(--mute);outline:none;}
.drop.over{border-color:var(--accent);background:#fdf0f4;color:var(--accent);}
.drop-rows{display:flex;flex-direction:column;gap:6px;}
.drop-rows:not(:empty){margin-top:10px;}

/* one row per file, from picked to landed or failed — nothing is silent */
.up{background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;text-align:left;cursor:default;}
.up-top{display:flex;align-items:center;gap:10px;}
.up-name{flex:1;font-size:13px;color:var(--ink);word-break:break-word;}
.up-state{font-family:var(--mono);font-size:10px;color:var(--mute);white-space:nowrap;}
.up-bar{height:3px;background:var(--line-2);border-radius:2px;margin-top:7px;overflow:hidden;}
.up-bar i{display:block;height:100%;width:0;background:var(--accent);
  border-radius:2px;transition:width .25s linear;}
.up.ok{border-color:#bfe0cd;background:var(--ok-bg);}
.up.ok .up-state{color:var(--ok);}
.up.ok .up-bar i{background:var(--ok);}
.up.failed{border-color:var(--bad);background:var(--bad-bg);}
.up.failed .up-state{color:var(--bad);font-weight:600;white-space:normal;}
.up-retry{border:1px solid var(--bad);color:var(--bad);border-radius:999px;
  padding:5px 12px;font-size:12px;font-weight:600;min-height:32px;}
.up-retry:hover{background:var(--bad);color:#fff;}

/* the uploads that worked: present, countable, folded */
.fold{margin-top:8px;}
.fold > summary{cursor:pointer;list-style:none;color:var(--mute);font-size:13px;
  padding:10px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;min-height:40px;display:flex;align-items:center;gap:8px;}
.fold > summary::-webkit-details-marker{display:none;}
.fold > summary::before{content:'▸';color:var(--faint);}
.fold[open] > summary::before{content:'▾';}
.fold > summary:hover{border-color:var(--ink);color:var(--ink);}
.fold .lives{margin-top:8px;}

/* the needs-a-decision tray — a file we will not guess about */
.tray{background:var(--warn-bg);border:1px solid #e5c06a;border-radius:var(--r);
  padding:14px;display:flex;flex-direction:column;gap:12px;}
.tray-why{font-size:13px;color:var(--warn);}
.decide{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.decide .nm{font-weight:600;font-size:14px;flex:1;min-width:160px;word-break:break-word;}
.choice{border:1px solid var(--ink);border-radius:999px;padding:9px 16px;font-size:13px;
  font-weight:600;background:var(--card);min-height:40px;}
.choice:hover{background:var(--ink);color:#fff;}
.choice[aria-pressed=true]{background:var(--ink);color:#fff;}
.choice[disabled]{opacity:.5;cursor:progress;}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;
  font-size:14px;z-index:200;box-shadow:var(--shadow);max-width:92vw;}