/* ============================================================
   DIY Printz shared design tokens + components
   Source of truth: Print Studio (design.diyprintz.com).
   Used by the print-status dashboard, admin and customer pages.
   See DESIGN-TOKENS.md for the job board.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;500;600;700&display=swap');

:root{
  --ink:#0a0a0a; --paper:#fff; --fog:#f4f4f2; --mist:#ebebe8; --hair:#dedede; --muted:#8a8a8a;
  --c:#00aeef; --m:#ff009d; --y:#ffe600;
  --rail:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--ink) 75% 100%);
  --display:"Bebas Neue",Impact,sans-serif; --ui:Barlow,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* stage colours (CMYK family) */
  --st-queued:var(--mist); --st-printing:var(--c); --st-printed:var(--m);
  --st-cut:var(--y); --st-ready:var(--ink); --st-picked:var(--hair);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:30;background:var(--paper)}
.topbar-row{min-height:72px;display:flex;align-items:center;gap:16px;padding:0 18px;max-width:1280px;margin:0 auto}
.cmyk-stripe{height:8px;background:var(--rail)}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:34px;width:auto;display:block}
.nav-links{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav-links a{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:6px 10px;border-radius:2px;font-size:18px}
.nav-links a.active,.nav-links a:hover{background:var(--ink);color:var(--paper)}

/* ---- layout ---- */
.page{max-width:1280px;margin:0 auto;padding:22px 18px 72px}
.page-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;flex-wrap:wrap;margin:10px 0 18px}
h1,h2,h3,.display{font-family:var(--display);font-weight:400;letter-spacing:.04em;text-transform:uppercase;margin:0}
h1{font-size:56px;line-height:.9}
h2{font-size:26px;margin-bottom:10px}
h3{font-size:20px}
.lede{margin:8px 0 0;max-width:40rem}
.muted{color:var(--muted)}
.label{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:16px}
.grid{display:grid;gap:16px}
.grid.printers{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}h1{font-size:44px}}

/* ---- cards ---- */
.card{background:var(--paper);border:1px solid var(--ink);border-radius:4px;box-shadow:3px 3px 0 var(--m);padding:16px}
.card.c{box-shadow:3px 3px 0 var(--c)} .card.y{box-shadow:3px 3px 0 var(--y)} .card.k{box-shadow:3px 3px 0 var(--ink)}
.card.flat{box-shadow:none}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}

/* ---- printer card ---- */
.printer .pid{font-family:var(--display);font-size:30px;letter-spacing:.04em;line-height:1}
.printer .sub{font-size:13px;color:var(--muted)}
.printer .job{font-family:var(--display);font-size:34px;letter-spacing:.03em;line-height:1;margin:14px 0 8px;word-break:break-word}
.printer .idle{font-size:15px;color:var(--muted);margin:14px 0 6px}
.printer.offline{box-shadow:3px 3px 0 var(--hair);border-color:var(--muted)}
.printer.offline .pid{color:var(--muted)}
.meter{height:14px;border:1px solid var(--ink);border-radius:2px;background:var(--fog);overflow:hidden}
.meter > i{display:block;height:100%;background:var(--c);transition:width .8s var(--ease)}
.meter.paused > i{background:var(--y)}
.meter-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.pct{font-family:var(--display);font-size:28px;line-height:1}
.facts{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);margin-top:10px}
.facts b{color:var(--ink);font-weight:600}

/* ---- pills / chips ---- */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:16px;line-height:1;padding:6px 10px 5px;border:1px solid var(--ink);border-radius:2px;background:var(--paper);white-space:nowrap}
.pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.printing{background:var(--c);color:var(--ink)}
.pill.printing .dot{background:var(--ink);animation:pulse 1.1s ease-in-out infinite}
.pill.paused{background:var(--y)}
.pill.head_cleaning{background:var(--mist)}
.pill.idle{background:var(--paper)}
.pill.offline{background:var(--fog);color:var(--muted);border-color:var(--muted)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.stage{display:inline-block;font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:15px;line-height:1;padding:5px 8px 4px;border:1px solid var(--ink);border-radius:2px;white-space:nowrap}
.stage.queued{background:var(--st-queued)}
.stage.printing{background:var(--st-printing)}
.stage.printed{background:var(--st-printed);color:var(--paper)}
.stage.cut_pressed{background:var(--st-cut)}
.stage.ready_for_pickup{background:var(--st-ready);color:var(--paper)}
.stage.picked_up{background:var(--st-picked);color:var(--muted);border-color:var(--muted)}

/* ---- sheet dots (1 per sheet) ---- */
.sheets{display:inline-flex;gap:3px;vertical-align:middle}
.sheets i{width:12px;height:12px;border:1px solid var(--ink);border-radius:1px;background:var(--paper)}
.sheets i.done{background:var(--m)}
.sheets i.printing{background:var(--c)}

/* ---- tables / lists ---- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:var(--display);font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:15px;padding:8px;border-bottom:1px solid var(--ink)}
td{padding:9px 8px;border-bottom:1px solid var(--hair);vertical-align:middle}
tr:last-child td{border-bottom:0}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair)}
.list li:last-child{border-bottom:0}
.num{font-family:var(--display);font-size:20px;letter-spacing:.04em}
.empty{color:var(--muted);padding:12px 0;text-align:center}

/* ---- forms / buttons ---- */
input,select,textarea{width:100%;border:1px solid var(--ink);border-radius:2px;background:var(--paper);padding:10px 12px;outline:none}
input:focus,select:focus,textarea:focus{box-shadow:3px 3px 0 var(--c)}
.field{display:grid;gap:6px}
.btn{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:17px;border:1px solid var(--ink);border-radius:2px;background:var(--ink);color:var(--paper);padding:9px 14px 8px;min-height:42px;box-shadow:3px 3px 0 var(--m);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--m)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.sm{min-height:34px;font-size:15px;padding:6px 10px 5px}
.row-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- banners / misc ---- */
.banner{border:1px solid var(--ink);border-radius:2px;padding:8px 12px;font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.banner.open{background:var(--fog)} .banner.closed{background:var(--y)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(120px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:2px;box-shadow:3px 3px 0 var(--m);transition:transform .3s var(--ease);z-index:99}
.toast.show{transform:translateX(-50%) translateY(0)}
.footer{border-top:1px solid var(--ink);margin-top:40px;padding:18px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:14px}
.footer a{text-decoration:none;font-weight:600}
.live{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--m);animation:pulse 1.4s infinite}
.wa{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;background:#25d366;border:1px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;z-index:40}
@media (max-width:560px){
  .topbar-row{min-height:60px;padding:0 12px}.brand img{height:24px}.nav-links a{font-size:16px;padding:5px 7px}
  .page{padding:16px 12px 72px}h1{font-size:38px}.printer .job{font-size:28px}
  .grid.printers{grid-template-columns:1fr}
  .hide-sm{display:none}
}

/* ============================================================
   v3 components: clickable printer buttons, drawer, job rows,
   empty states. Reusable by the job board (see DESIGN-TOKENS.md).
   ============================================================ */
.chip{color:var(--ink);display:inline-flex;align-items:center;gap:5px;font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:14px;line-height:1;padding:4px 7px 3px;border:1px solid var(--ink);border-radius:2px;background:var(--paper);white-space:nowrap}
.chip.dtf{background:var(--c)} .chip.uv{background:var(--y)} .chip.uv-dtf{background:var(--m);color:var(--paper)}
.chip.ghost{border-color:var(--hair);color:var(--muted)}
.chip.reprint{background:var(--ink);color:var(--paper)}

/* printer card as a button */
a.printer{display:block;text-decoration:none;color:var(--ink);position:relative;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
a.printer:hover,a.printer:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--m);outline:none}
a.printer.c:hover,a.printer.c:focus-visible{box-shadow:6px 6px 0 var(--c)}
a.printer.offline:hover,a.printer.offline:focus-visible{box-shadow:6px 6px 0 var(--muted)}
a.printer:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
a.printer.selected{outline:3px solid var(--ink);outline-offset:3px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.tile{border:1px solid var(--ink);border-radius:2px;padding:9px 10px 8px;background:var(--fog);min-width:0}
.tile .k{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:14px;color:var(--muted);line-height:1}
.tile .v{font-family:var(--display);font-size:34px;line-height:1;margin-top:4px}
.tile .s{font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.next{background:var(--paper);box-shadow:inset 4px 0 0 var(--c)}
.tile.done{background:var(--paper);box-shadow:inset 4px 0 0 var(--m)}
.open-cta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--hair);font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:16px}
.open-cta .arr{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--ink);border-radius:2px;background:var(--ink);color:var(--paper);font-family:var(--ui);font-size:16px;transition:transform .15s var(--ease)}
a.printer:hover .open-cta .arr{transform:translateX(3px)}

/* lanes (up next by printer) */
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.lane{border:1px solid var(--ink);border-radius:4px;padding:12px 14px;background:var(--paper)}
.lane-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.lane-head .t{font-family:var(--display);font-size:22px;letter-spacing:.05em}

/* job rows */
.jobs{list-style:none;margin:0;padding:0}
.jobs li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair)}
.jobs li:last-child{border-bottom:0}
.jobs .pos{width:34px;height:34px;border:1px solid var(--ink);border-radius:2px;display:grid;place-items:center;font-family:var(--display);font-size:20px;background:var(--paper)}
.jobs li:first-child .pos.q{background:var(--c)}
.jobs .pos.ok{background:var(--m);color:var(--paper);font-family:var(--ui);font-size:16px;font-weight:700}
.jobs .pos.int{background:var(--fog);color:var(--muted);border-color:var(--hair)}
.jobs .main{min-width:0}
.jobs .ord{font-family:var(--display);font-size:24px;letter-spacing:.04em;line-height:1}
.jobs .ord.int{color:var(--muted);font-size:20px}
.jobs .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:5px;font-size:13px;color:var(--muted)}
.jobs .when{text-align:right;font-size:13px;color:var(--muted);white-space:nowrap}
.jobs .when b{display:block;color:var(--ink);font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.04em;line-height:1}
.jobs.compact li{padding:7px 0;grid-template-columns:28px 1fr auto}
.jobs.compact .pos{width:28px;height:28px;font-size:17px}
.jobs.compact .ord{font-size:20px}

/* empty states */
.empty-state{border:1px dashed var(--ink);border-radius:4px;padding:22px 16px;text-align:center;background:repeating-linear-gradient(135deg,var(--paper) 0 12px,var(--fog) 12px 24px)}
.empty-state .blocks{display:inline-flex;gap:4px;margin-bottom:10px}
.empty-state .blocks i{width:14px;height:14px;border:1px solid var(--ink);border-radius:1px}
.empty-state .blocks i:nth-child(1){background:var(--c)} .empty-state .blocks i:nth-child(2){background:var(--m)}
.empty-state .blocks i:nth-child(3){background:var(--y)} .empty-state .blocks i:nth-child(4){background:var(--ink)}
.empty-state .t{font-family:var(--display);font-size:26px;letter-spacing:.05em;line-height:1}
.empty-state p{margin:6px auto 0;max-width:30rem;color:var(--muted);font-size:14px}
.empty-state.sm{padding:14px 12px}.empty-state.sm .t{font-size:20px}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(10,10,10,.45);z-index:50;opacity:0;transition:opacity .2s var(--ease)}
.scrim.show{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--paper);border-left:1px solid var(--ink);box-shadow:-6px 0 0 var(--m);z-index:60;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .25s var(--ease)}
.drawer.show{transform:translateX(0)}
.drawer .dr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--ink)}
.drawer .dr-title{font-family:var(--display);font-size:40px;letter-spacing:.04em;line-height:.95;margin:0}
.drawer .dr-sub{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--muted)}
.drawer .x{width:42px;height:42px;border:1px solid var(--ink);border-radius:2px;background:var(--paper);font-size:22px;line-height:1;box-shadow:3px 3px 0 var(--ink);flex:none}
.drawer .x:hover{background:var(--ink);color:var(--paper)}
.drawer .dr-body{overflow-y:auto;padding:4px 18px 28px;flex:1;overscroll-behavior:contain}
.drawer .sec-h{position:sticky;top:0;background:var(--paper);z-index:1;display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:16px 0 8px;border-bottom:1px solid var(--ink);margin-bottom:2px}
.drawer .sec-h h2{margin:0;font-size:28px}
.drawer .sec-h .count{font-family:var(--display);font-size:16px;letter-spacing:.08em;background:var(--ink);color:var(--paper);padding:4px 8px 3px;border-radius:2px}
.now-box{margin-top:14px;border:1px solid var(--ink);border-radius:4px;padding:12px 14px;box-shadow:3px 3px 0 var(--c)}
.now-box.paused{box-shadow:3px 3px 0 var(--y)}
.now-box .k{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:15px;color:var(--muted)}
.now-box .job{font-family:var(--display);font-size:30px;line-height:1;margin:4px 0 8px;letter-spacing:.03em}
.hint{font-size:12px;color:var(--muted);margin-top:8px}
body.drawer-open{overflow:hidden}
@media (max-width:560px){
  .drawer{top:auto;width:100vw;height:88vh;border-left:0;border-top:1px solid var(--ink);box-shadow:0 -6px 0 var(--m);transform:translateY(105%);border-radius:8px 8px 0 0}
  .drawer.show{transform:translateY(0)}
  .drawer .dr-title{font-size:34px}
  .tile .v{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.drawer,.scrim,a.printer{transition:none}}

/* v3b: stacked printer cards (UV first), recently printed on the card, Up next button */
.grid.printers.stack{grid-template-columns:1fr}
article.printer{cursor:pointer;transition:box-shadow .15s var(--ease)}
article.printer:hover,article.printer:focus-visible{box-shadow:6px 6px 0 var(--m);outline:none}
article.printer.c:hover,article.printer.c:focus-visible{box-shadow:6px 6px 0 var(--c)}
article.printer.selected{outline:3px solid var(--ink);outline-offset:3px}
.status-col{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.card-sec{border-top:1px solid var(--hair);padding-top:10px;margin-top:12px}
.card-sec .sec-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:2px}
.card-sec .sec-row a{font-weight:600}
.card-sec.now-sec .job{margin-top:6px}
.card-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.btn.upnext-btn{background:var(--c);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.btn.upnext-btn:hover{background:var(--ink);color:var(--paper)}
@media (min-width:900px){
  /* wide screens: recently printed (left) and printing now (right) side by side would break the top-to-bottom read, so keep stacked but cap width */
  .grid.printers.stack{max-width:980px}
}

/* v3b: "Up next" empty state: live status + friendly message + last print (never a blank box) */
.upnext-empty{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--ink);border-radius:4px;padding:14px 16px;margin-top:10px;
  background:linear-gradient(90deg,var(--c) 0 6px,transparent 6px),var(--paper);padding-left:22px;box-shadow:3px 3px 0 var(--c)}
.upnext-empty .ue-ico{width:48px;height:48px;flex:none}
.upnext-empty .ue-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:22px;letter-spacing:.05em;text-transform:uppercase;line-height:1.05}
.upnext-empty .ue-dot{width:12px;height:12px;border-radius:50%;border:1px solid var(--ink);flex:none;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25);animation:pulse 1.8s infinite}
.upnext-empty .ue-hint{font-size:13px;margin-top:3px;font-weight:600}
.upnext-empty .ue-msg{font-size:14px;margin-top:6px}
.upnext-empty .ue-last{font-size:13px;color:var(--muted);margin-top:4px}
.upnext-empty.st-printing .ue-dot{background:var(--c);box-shadow:0 0 0 3px rgba(0,174,239,.25)}
.upnext-empty.st-paused{background:linear-gradient(90deg,var(--y) 0 6px,transparent 6px),var(--paper);box-shadow:3px 3px 0 var(--y)}
.upnext-empty.st-paused .ue-dot{background:var(--y);box-shadow:0 0 0 3px rgba(255,230,0,.35)}
.upnext-empty.st-cleaning .ue-dot{background:var(--mist);animation:none}
.upnext-empty.st-offline{background:linear-gradient(90deg,var(--hair) 0 6px,transparent 6px),var(--fog);box-shadow:3px 3px 0 var(--muted);border-color:var(--muted)}
.upnext-empty.st-offline .ue-dot{background:#9ca3af;box-shadow:none;animation:none}
.upnext-empty.st-offline .ue-status{color:#555}
.upnext-empty.st-offline .ue-hint{color:#b42318}
.upnext-empty.sm{padding:10px 12px 10px 18px}.upnext-empty.sm .ue-ico{width:38px;height:38px}.upnext-empty.sm .ue-status{font-size:19px}