:root{
  --bg:#1b2530; --panel:#243140; --panel2:#2c3b4c; --line:#3a4b5e; --text:#e8eef4; --muted:#93a4b6;
  --green:#3fb24f; --blue:#2f9bd6; --amber:#f0a92e; --red:#e2524a; --purple:#9d6ce0;
  --radius:6px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--blue);text-decoration:none}
button{font:inherit;cursor:pointer}
.app{display:grid;grid-template-columns:64px minmax(0,1fr);min-height:100vh}
.app > div{min-width:0}
.side{background:#141c25;display:flex;flex-direction:column;align-items:center;padding-top:0}
.side .logo{width:64px;height:56px;background:var(--green);display:grid;place-items:center;font-weight:800;font-size:22px;color:#fff}
.side a{width:64px;height:56px;display:grid;place-items:center;color:var(--muted)}
.side a.on{background:var(--green);color:#fff}
.side a:hover{color:#fff}
.side svg{width:22px;height:22px}
.top{display:flex;align-items:center;gap:16px;padding:0 20px;height:56px;border-bottom:1px solid var(--line);background:#18212b}
.top .brand{font-weight:700;letter-spacing:.3px}
.top .brand span{color:var(--muted);font-weight:400}
.top .sp{flex:1}
.pill{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--panel2);color:var(--muted)}
.pill.warn{background:#4a3a14;color:#ffd27a}
.pill.err{background:#4a1c1a;color:#ff9b93}
main{padding:20px 24px;overflow:auto}
h1{font-size:22px;font-weight:500;margin:0 0 4px}
.crumbs{color:var(--muted);font-size:12px;margin-bottom:16px}
.crumbs a{color:var(--green)}
.btn{background:var(--blue);color:#fff;border:0;border-radius:4px;padding:8px 12px;font-size:13px}
.btn.green{background:var(--green)}
.btn.ghost{background:var(--panel2);color:var(--text)}
.btn.amber{background:var(--amber);color:#1b1b1b}
.btn:disabled{opacity:.5;cursor:default}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
input[type=search],input[type=text],input[type=number],input[type=password],textarea,select{background:#111922;border:1px solid var(--line);color:var(--text);border-radius:4px;padding:8px 10px;font:inherit}
/* job list */
table.jobs{width:100%;border-collapse:collapse;background:var(--panel);border-radius:var(--radius);overflow:hidden}
table.jobs th{text-align:left;font-weight:600;font-size:12px;color:var(--muted);padding:10px;border-bottom:1px solid var(--line);background:var(--panel2);white-space:nowrap}
table.jobs td{padding:9px 10px;white-space:nowrap;border-bottom:1px solid #2f3e4f;vertical-align:middle}
table.jobs tr:hover td{background:#2a394a;cursor:pointer}
.tier{font-size:11px;font-weight:700;padding:2px 7px;border-radius:3px;white-space:nowrap}
.t0{background:var(--red);color:#fff}.t1{background:var(--purple);color:#fff}.t2{background:var(--amber);color:#1b1b1b}.t3{background:#3b6a8f;color:#fff}.t4,.t5{background:var(--panel2);color:var(--muted)}
.mini-steps{display:flex;gap:3px}
.mini-steps i{width:10px;height:10px;border-radius:50%;background:#3d4f63;display:block}
.mini-steps i.done{background:var(--green)}.mini-steps i.active{background:var(--blue)}.mini-steps i.current{background:#fff}.mini-steps i.stuck{background:var(--amber)}
/* job page */
.hdr{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;background:var(--panel);padding:14px 16px;border-radius:var(--radius);margin-bottom:14px}
.hdr .title{background:#fff;color:#111;font-weight:700;font-size:17px;padding:8px 12px;border-radius:3px}
.kv small{display:block;color:var(--muted);font-size:12px}
.kv b{font-size:16px;font-weight:600}
.section{background:var(--panel);border-radius:var(--radius);margin-bottom:14px}
.section > h3{margin:0;padding:10px 14px;font-size:13px;font-weight:600;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.section .body{padding:14px}
.track{display:flex;justify-content:space-between;position:relative;padding:10px 6px 4px}
.track:before{content:"";position:absolute;left:40px;right:40px;top:22px;height:2px;background:#3d4f63}
.step{position:relative;text-align:center;flex:1;font-size:12px;color:var(--muted)}
.dot{width:24px;height:24px;border-radius:50%;background:#3d4f63;margin:0 auto 6px;display:grid;place-items:center;color:#fff;font-size:13px;position:relative;z-index:1}
.step.done .dot{background:var(--green)}
.step.active .dot{background:var(--blue);box-shadow:0 0 0 5px rgba(47,155,214,.25)}
.step.current .dot{background:var(--blue);width:30px;height:30px;margin-top:-3px}
.step.stuck .dot{background:var(--amber)}
.step.done,.step.current,.step.active{color:var(--text)}
.step .note{font-size:11px;color:var(--muted);margin-top:2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 18px}
.grid .kv b{font-size:14px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.cols2{grid-template-columns:1fr}}
table.mach{width:100%;border-collapse:collapse}
table.mach td,table.mach th{padding:8px;border-bottom:1px solid #2f3e4f;text-align:left}
table.mach th{color:var(--muted);font-size:12px;font-weight:600}
.time{color:var(--green);font-weight:700}
.muted{color:var(--muted)}
.warnbox{background:#3d3317;color:#ffd98a;padding:8px 12px;border-radius:4px;margin-bottom:10px;font-size:13px}
.art-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.art{background:#1c2733;border:1px solid var(--line);border-radius:4px;padding:8px;font-size:12px;word-break:break-all}
.art img{width:100%;height:110px;object-fit:contain;background:#fff;border-radius:2px;margin-bottom:6px}
.art .ph{height:110px;display:grid;place-items:center;background:#0f161e;color:var(--muted);border-radius:2px;margin-bottom:6px;font-weight:700}
.drop{border:2px dashed var(--line);border-radius:6px;padding:16px;text-align:center;color:var(--muted);margin-top:10px}
.drop.over{border-color:var(--green);color:var(--text)}
.hist{font-size:12px;color:var(--muted);max-height:180px;overflow:auto}
.hist div{padding:3px 0;border-bottom:1px solid #2f3e4f}
/* schedule */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.col{background:var(--panel);border-radius:var(--radius);min-width:270px;width:270px;flex-shrink:0}
.col h4{margin:0;padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px}
.col h4 .sub{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:2px}
.col .list{padding:8px;min-height:80px;display:flex;flex-direction:column;gap:8px}
.card{background:#1c2733;border:1px solid var(--line);border-left:4px solid #3d4f63;border-radius:4px;padding:8px 10px;cursor:grab;font-size:13px}
.card.t0{border-left-color:var(--red)}.card.t1{border-left-color:var(--purple)}.card.t2{border-left-color:var(--amber)}.card.t3{border-left-color:#3b6a8f}
.card .n{font-weight:600;margin-bottom:3px}
.card .meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;gap:6px}
.card.dragging{opacity:.4}
.col .list.over{background:#2a394a}
.status-chip{font-size:11px;padding:1px 6px;border-radius:3px;background:var(--panel2)}
.status-chip.working{background:var(--blue);color:#fff}
/* login + proof */
.center{min-height:100vh;display:grid;place-items:center;padding:16px}
.card-box{background:var(--panel);border-radius:8px;padding:24px;width:100%;max-width:380px}
.toast{position:fixed;bottom:18px;right:18px;background:var(--green);color:#fff;padding:10px 14px;border-radius:4px;z-index:10}
[hidden]{display:none!important}

/* v2: orders + lines */
.top{flex-wrap:wrap;min-height:56px;height:auto;padding-block:8px}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tablewrap{overflow-x:auto;border-radius:var(--radius)}
table.jobs td{white-space:nowrap}
table.jobs td.wrap{white-space:normal;min-width:200px}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.src{font-size:11px;font-weight:600;padding:2px 7px;border-radius:3px;background:var(--panel2);color:var(--muted)}
.src-manual{background:#264a33;color:#9fe2b0}.src-woo{background:#3a2c55;color:#cdb6ff}.src-email{background:#2d3f55;color:#a9cdf3}
.btn.small{padding:5px 9px;font-size:12px}
.small{font-size:12px}
.pill.ok{background:#1f4a2a;color:#a9eab8}
.infobox{background:#1d3347;color:#b9d8f2;padding:10px 14px;border-radius:4px;margin-bottom:14px;font-size:13px}
.okbox{background:#17352a;color:#b9f3c8;padding:10px 12px;border-radius:4px;margin:8px 0;font-size:13px}
.okbox input{width:100%;margin-top:6px}
.lines-title{font-size:16px;font-weight:600;margin:18px 0 10px}
.line{background:var(--panel);border-radius:var(--radius);margin-bottom:14px;border-left:3px solid var(--blue)}
.line-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lineno{background:#fff;color:#111;font-weight:700;border-radius:3px;padding:1px 7px;font-size:13px}
.track-wrap{overflow-x:auto;padding:0 14px}
.track{min-width:560px}
.line-body{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;padding:12px 14px}
@media(max-width:900px){.line-body{grid-template-columns:1fr}}
.notes{margin-top:12px}
label.inline{display:flex;gap:8px;align-items:center;margin-top:10px;color:var(--muted);font-size:13px}
.art-row{border-top:1px solid var(--line);padding:12px 14px}
.art-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.art{display:flex;flex-direction:column;gap:2px;color:var(--text)}
.drop{display:grid;place-items:center;text-align:center;min-height:150px;border:2px dashed var(--line);border-radius:4px;color:var(--muted);cursor:pointer;font-size:13px;padding:8px;margin:0}
.drop.over{border-color:var(--green);color:var(--text)}
.order-edit{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.order-edit label,label.block{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.order-edit label.grow{flex:1;min-width:200px}
label.block{margin-top:12px}
label.block textarea{width:100%}
h3.sub{font-size:13px;margin:16px 0 8px}
table.form-lines{width:100%;border-collapse:collapse;min-width:980px}
table.form-lines th{font-size:12px;color:var(--muted);text-align:left;padding:4px;font-weight:600}
table.form-lines td{padding:3px 4px}
table.form-lines input[type=text]{width:100%}
table.form-lines .num{width:74px}
table.form-lines td.c{text-align:center}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.err{color:var(--red)}
.section.narrow{max-width:560px}
.hist div{padding:4px 0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,tr:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:600px){main{padding:16px}.hdr{gap:14px}}
/* v3: people */
.card-box label.block input{width:100%}
.side a[hidden]{display:none}
#who{text-decoration:none}
.who{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#3a2c55;color:#d9c9ff;font-size:11px;font-weight:700}
.myjobs{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr))}
.job{background:var(--panel);border-radius:var(--radius);border-left:5px solid #3d4f63;padding:14px;display:flex;flex-direction:column;gap:10px}
.job.t0{border-left-color:var(--red)}.job.t1{border-left-color:var(--purple)}.job.t2{border-left-color:var(--amber)}.job.t3{border-left-color:#3b6a8f}
.job-top{display:flex;gap:10px;align-items:center;justify-content:space-between}
.job-main{display:grid;grid-template-columns:120px 1fr;gap:14px}
.job h3{margin:0 0 2px;font-size:17px}
.job .spec{font-size:14px;margin-top:4px}
.thumb{width:120px;height:120px;background:#0f161e;border-radius:4px;display:grid;place-items:center;color:var(--muted);font-weight:700;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.job-actions{display:flex;flex-wrap:wrap;gap:8px}
.job-actions .btn{padding:12px 16px;font-size:15px}
@media(max-width:480px){.job-main{grid-template-columns:80px 1fr}.thumb{width:80px;height:80px}}

/* v4: art previews */
.art .ph.loading { opacity: .6; animation: pulse 1.2s ease-in-out infinite; }
.art .ph.nopreview { opacity: .8; }
@keyframes pulse { 50% { opacity: .3; } }
.art img { background: #fff; object-fit: contain; }
.viewer { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.82); display: flex; flex-direction: column; }
.viewer-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel, #1e2633); color: var(--text, #e8edf3); flex-wrap: wrap; }
.viewer-bar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; }
.viewer-bar .grow { flex: 1; }
.viewer-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px; overflow: auto; }
.viewer-body img, .viewer-body canvas { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.5); }

/* v5: customer notes */
.notebox { background: #3a2f12; border-left: 4px solid #f0b429; color: #ffe7a8; padding: 10px 14px; border-radius: 4px; margin-bottom: 14px; }
.notebox small { display: block; color: #d9b45a; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; margin-bottom: 4px; }
.notebox div { white-space: pre-wrap; font-size: 14px; line-height: 1.45; }
.custnote { background: #3a2f12; color: #ffe7a8; border-left: 3px solid #f0b429; padding: 6px 8px; border-radius: 3px; font-size: 13px; margin: 6px 0; white-space: pre-wrap; }

/* v6: production notes (prepress -> printer) */
.pnotes-row { border-top: 1px solid var(--line); padding: 12px 14px; }
.pnote { background: #16304a; border-left: 4px solid #4aa3ff; color: #d6ebff; padding: 8px 12px; border-radius: 4px; margin: 0 0 8px; }
.pnote-meta { font-size: 12px; color: #9cc6ee; margin-bottom: 3px; }
.pnote-body { white-space: pre-wrap; font-size: 14px; line-height: 1.45; }
.pnote-add { display: flex; gap: 8px; align-items: flex-start; }
.pnote-add textarea { flex: 1; min-height: 44px; resize: vertical; background: #0f161e; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 8px; font: inherit; }
.linkbtn { background: none; border: 0; color: #9cc6ee; text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0 0 0 6px; }
.pnote-card { background: #16304a; border-left: 3px solid #4aa3ff; color: #d6ebff; padding: 6px 8px; border-radius: 3px; font-size: 13px; margin: 6px 0; white-space: pre-wrap; }
.pnote-card div + div { margin-top: 4px; }

/* v7: rush badges in Monday's colors */
.rush-chip { display: inline-block; font-weight: 800; font-size: 11px; letter-spacing: .03em; padding: 2px 7px; border-radius: 3px; margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.rush-chip.big { font-size: 15px; padding: 6px 12px; border-radius: 4px; margin-left: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }

/* v8: replaced files, add-ons and extra charges */
.art-wrap { display: flex; flex-direction: column; gap: 4px; }
.art-wrap .art { position: relative; }
.art-wrap.voided .art { opacity: .38; filter: grayscale(1); }
.art-wrap.voided .art:hover { opacity: .6; }
.replaced-tag { position: absolute; top: 14px; left: 10px; z-index: 2; background: #c62828; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .05em; padding: 2px 6px; border-radius: 3px; }
.art-wrap .linkbtn { align-self: flex-start; padding-left: 2px; }
.added-chip { background: #7b3fe4; color: #fff; font-weight: 800; font-size: 11px; padding: 2px 7px; border-radius: 3px; letter-spacing: .03em; }
.chargebox { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #23203a; border-left: 4px solid #7b3fe4; padding: 8px 12px; border-radius: 4px; margin-bottom: 10px; }
.chargebox.due { border-left-color: #ff9800; background: #3a2a12; }
.chargebox input, .chargebox select { background: #0f161e; color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; }
.chargebox input.num { width: 90px; }
.chargebox .grow { flex: 1; min-width: 180px; } .chargebox .grow input { width: 100%; }
.extrabox { background: #3a2a12; border-left: 4px solid #ff9800; color: #ffe0b2; padding: 10px 14px; border-radius: 4px; margin-bottom: 14px; }
.extrabox.web { background: #4a1616; border-left-color: #ff5252; color: #ffd6d6; }
.extrabox b { display: block; letter-spacing: .03em; margin-bottom: 3px; }
.extra-chip { display: inline-block; background: #ff9800; color: #2b1a00; font-weight: 800; font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-left: 6px; white-space: nowrap; }
.lines-title .btn { margin-left: 10px; vertical-align: middle; }

/* v8: each order line gets its own color so lines are easy to tell apart */
.line { margin-bottom: 22px !important; border-left: 6px solid var(--lc) !important; background: var(--lcbg) !important; box-shadow: 0 0 0 1px var(--lc) inset; }
.line .line-head { background: var(--lc); color: #fff; }
.line .line-head .muted { color: rgba(255,255,255,.85); }
.line .line-head .lineno { background: #fff; color: #111; }
.line .line-head .btn.ghost { background: rgba(0,0,0,.25); color: #fff; border-color: rgba(255,255,255,.4); }
.line.lc0 { --lc: #1e88e5; --lcbg: #17283b; }
.line.lc1 { --lc: #e67e22; --lcbg: #332518; }
.line.lc2 { --lc: #2e9e5b; --lcbg: #172e22; }
.line.lc3 { --lc: #9b59b6; --lcbg: #2a1f35; }
.line.lc4 { --lc: #c0392b; --lcbg: #331b1b; }
.line.lc5 { --lc: #00897b; --lcbg: #14302d; }

/* v9: cutting / shape */
.cut-chip { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: #eef0f3; color: #445; border: 1px solid #d5d9e0; white-space: nowrap; vertical-align: middle; }
.cut-chip.shape { background: #7b3fe4; color: #fff; border-color: #7b3fe4; }

/* orders list: material column */
table.jobs td.mat { max-width: 220px; font-size: 13px; }

/* v10: multi-page PDFs */
.art { position: relative; }
.pages-badge { position: absolute; top: 6px; left: 6px; z-index: 2; background: #e2445c; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 9px; letter-spacing: .3px; }
.pages-badge.inline { position: static; display: inline-block; margin-right: 4px; }
.pagesbox { border: 2px solid #e2445c; background: rgba(226, 68, 92, .12); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; }
.pagesbox .pb-ways { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0; }
.pages-count { color: #ff8a9c; }
.viewer-main { display: flex; justify-content: center; }
.pagestrip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 4px 4px; max-width: 92vw; margin: 0 auto; align-items: flex-end; }
.pagestrip button { position: relative; flex: 0 0 auto; background: #fff; border: 3px solid transparent; border-radius: 4px; padding: 0; min-width: 60px; min-height: 60px; cursor: pointer; }
.pagestrip button.on { border-color: #e2445c; }
.pagestrip button canvas { display: block; max-height: 110px; width: auto; }
.pagestrip .pn { position: absolute; bottom: 2px; right: 4px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; padding: 0 5px; border-radius: 6px; }
.viewer-body:has(.pagestrip) { flex-direction: column; }
.viewer-main canvas { max-height: 72vh; }
.qty-raw { color: #ffcb00; font-weight: 600; }
table.jobs .num { text-align: right; white-space: nowrap; }
table.jobs td.wrap { max-width: 230px; }
table.jobs th, table.jobs td { padding-left: 8px; padding-right: 8px; }
table.jobs td.cust { max-width: 170px; }
 table.jobs td.wrap { max-width: 200px; }
.via-monday { margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 8px; background: #2d3b55; color: #9fb4d9; }

/* ===== v12: order page redesign (Micky's mockups, Oct 2026) + finishing tiles ===== */
:root{
  --bg:#0b1728; --panel:#11213a; --panel2:#172c49; --line:#21395a; --text:#eef3fa; --muted:#8fa3bf;
  --green:#34c24a; --blue:#2f7bf0; --amber:#f59a23; --red:#e5333f; --purple:#9d6ce0;
  --radius:10px;
}
.side{background:#081220}
.top{background:#0a1626;border-bottom-color:var(--line)}
input[type=search],input[type=text],input[type=number],input[type=password],input[type=date],textarea,select{background:#0c1a2e;border-color:#2a4368}
table.jobs td{border-bottom-color:#1b304d}
table.jobs tr:hover td{background:#172c49}
.hist div,table.mach td,table.mach th{border-bottom-color:#1b304d}
.card{background:#0e1d33}
.art{background:#0e1d33}
.art .ph,.thumb{background:#0a1626}

/* order header */
.oh{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 0;margin:0 0 16px}
.oh-main{margin-right:auto;padding-right:28px;min-width:260px}
.oh h1{font-size:34px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px;line-height:1.1}
.oh-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:22px;font-weight:500}
.oh-title .rush-chip.big{font-size:14px;padding:6px 12px;border-radius:5px;box-shadow:none}
.oh-kv{padding:2px 26px;border-left:1px solid var(--line)}
.oh-kv small{display:block;color:#7fb2ee;font-size:14px;margin-bottom:4px}
.oh-kv b{font-size:17px;font-weight:600;display:flex;align-items:center;gap:10px}
.oh-kv .tier{font-size:12px;padding:4px 9px;border-radius:5px}

/* line */
.panel{background:var(--panel);border:1px solid #1a3050;border-radius:var(--radius)}
.line{background:transparent !important;border:0 !important;border-left:5px solid var(--lc) !important;box-shadow:none !important;border-radius:0 !important;padding-left:12px;margin-bottom:34px !important;display:flex;flex-direction:column;gap:14px}
.line .line-head{background:transparent;color:var(--text);border-bottom:1px solid #1a3050;padding:12px 16px}
.line .line-head .muted{color:var(--muted)}
.line .line-head .lineno{background:var(--lc);color:#fff;font-size:17px;font-weight:800;padding:4px 10px;border-radius:5px}
.line .line-head .btn.ghost{background:var(--panel2);color:var(--text)}
.lname{font-size:20px;font-weight:600}
.track-wrap.panel{padding:14px 18px 10px}
.track{padding:6px 6px 2px}
.track:before{left:8%;right:8%;top:22px;height:2px;background:#27405f}
.step{font-size:14px;color:var(--muted)}
.dot{width:30px;height:30px;font-size:16px;font-weight:800;background:#33496a;margin-bottom:10px}
.step.done .dot{background:var(--green);box-shadow:0 0 0 3px rgba(52,194,74,.25)}
.step.current .dot,.step.active .dot{background:var(--blue);width:30px;height:30px;margin-top:0;box-shadow:0 0 0 4px rgba(47,123,240,.3)}
.lgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
@media(max-width:1100px){.lgrid{grid-template-columns:1fr}}
.lbody{display:grid;grid-template-columns:minmax(220px,.62fr) minmax(0,1fr);gap:16px;padding:14px 16px 16px}
@media(max-width:760px){.lbody{grid-template-columns:1fr}}
.lspecs{display:flex;flex-direction:column;gap:12px}
.bigbox{background:var(--panel2);border:1px solid #223a5c;border-radius:8px;padding:10px 16px 12px;display:flex;flex-direction:column}
.bigbox small{color:#7fb2ee;font-weight:800;font-size:15px;letter-spacing:.04em}
.bigbox b{font-size:64px;font-weight:900;line-height:1.05;letter-spacing:-.02em}
.bigbox b.size{font-size:clamp(30px,3.6vw,52px);white-space:nowrap}
.bigbox b.unk{color:#ffcb00}
.sidesbox{border:0;border-radius:8px;padding:18px 10px;font-size:clamp(34px,4.2vw,58px);font-weight:900;letter-spacing:-.01em;color:#fff;line-height:1;cursor:pointer}
.sidesbox.one{background:var(--green)}
.sidesbox.two{background:#f97316}
.sidesbox.unk{background:#33496a;color:#ffcb00}
.sidesbox:hover{filter:brightness(1.08)}
.sides-legend{display:flex;gap:18px;font-size:13px;color:var(--text);align-items:center;flex-wrap:wrap}
.sides-legend i{display:inline-block;width:18px;height:18px;border-radius:4px;vertical-align:-4px;margin-right:6px}
.sides-legend i.one{background:var(--green)}.sides-legend i.two{background:#f97316}
.lart{display:flex;flex-direction:column;gap:12px;min-width:0}
.bigart{position:relative;display:grid;place-items:center;height:clamp(240px,30vw,360px);border-radius:8px;overflow:hidden;
  background-color:#fff;background-image:linear-gradient(45deg,#e9edf2 25%,transparent 25%),linear-gradient(-45deg,#e9edf2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9edf2 75%),linear-gradient(-45deg,transparent 75%,#e9edf2 75%);
  background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}
.bigart img{width:100%;height:100%;object-fit:contain;background:transparent;margin:0}
.bigart .ph{width:100%;height:100%;display:grid;place-items:center;background:transparent;color:#5b6b80;font-weight:800;font-size:28px;margin:0}
.bigart.empty{background:#0c1a2e;color:var(--muted);font-weight:700}
.bigart .pages-badge{top:10px;left:10px;font-size:13px;padding:4px 10px}
.files-badge{position:absolute;top:10px;right:10px;z-index:2;background:rgba(11,23,40,.85);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:9px}
.lart-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lart-btns .btn{padding:13px 10px;font-size:15px;font-weight:600;text-align:center;border-radius:7px}
.lart-btns .btn.ghost{background:var(--panel2);border:1px solid #2a4368;color:var(--text)}
.matbox{display:flex;gap:14px;align-items:center;background:var(--panel2);border:1px solid #223a5c;border-radius:8px;padding:10px 16px}
.matbox .fi svg{width:28px;height:28px;color:#9db7d8}
.matbox small{display:block;color:#7fb2ee;font-size:14px}
.matbox b{font-size:19px;font-weight:700}

/* production panel */
.lprod{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.lprod-head,.lfin-head{display:flex;align-items:center;gap:12px;font-size:22px}
.gear{color:var(--green);font-size:26px;line-height:1}
.lprod table.mach{border:1px solid #1a3050;border-radius:8px;border-collapse:separate;border-spacing:0;overflow:hidden}
.lprod table.mach th{color:#7fb2ee;font-size:14px;padding:10px 12px}
.lprod table.mach td{padding:10px 12px;font-size:16px}
.lprod table.mach tr:last-child td{border-bottom:0}
select.plain{background:transparent;border:0;border-bottom:1px solid #2a4368;border-radius:0;padding:4px 2px;font-size:16px;color:var(--text)}
.stsel{display:inline-block;border:0;border-radius:99px;padding:6px 14px;font-weight:700;font-size:14px;color:#fff;background:#3a4d69}
select.stsel{cursor:pointer;appearance:auto}
.stsel.st-done{background:#1f8a37}.stsel.st-work{background:var(--blue)}.stsel.st-ready{background:#7b3fe4}.stsel.st-stuck{background:var(--red)}.stsel.st-review{background:#b7791f}
select.stsel option{background:#0c1a2e;color:#fff}
.prow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;padding:4px 0}
.prow select{font-size:15px;min-width:160px}
.pico{font-size:18px;opacity:.9}
.pblock{border-top:1px solid #1a3050;padding-top:12px}
.pb-h{display:flex;align-items:center;gap:10px;font-size:16px;margin-bottom:4px}
.pb-t{white-space:pre-wrap;font-size:15px;line-height:1.5;padding-left:30px}
.lprod .pnotes-row{border-top:1px solid #1a3050;padding:12px 0 0}
.lprod .pnote-add{flex-direction:column;align-items:stretch}
.lprod .pnote-add textarea{min-height:70px;background:#0c1a2e}
.lprod .pnote-add .btn{align-self:flex-end;background:var(--green)}

/* finishing tiles */
.lfin{background:var(--panel);border:1px solid #1a3050;border-radius:var(--radius);padding:14px 16px 16px}
.lfin-head{margin-bottom:12px;flex-wrap:wrap}
.lfin-head b{letter-spacing:.02em}
.ftiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.ftile{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i l" "v v" "s s";align-items:center;justify-items:center;gap:2px 10px;
  min-height:112px;padding:14px 10px 10px;border-radius:9px;border:1px solid #2a4368;background:var(--panel2);color:#b9cbe3;cursor:pointer;text-align:center}
.ftile .fi{grid-area:i;justify-self:end}
.ftile .fi svg{width:30px;height:30px;display:block}
.ftile .fl{grid-area:l;justify-self:start;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:left;line-height:1.15}
.ftile .fv{grid-area:v;font-size:24px;font-weight:800;line-height:1.1;color:#9db7d8}
.ftile .fs{grid-area:s;font-size:11px;opacity:.85}
.ftile.on{background:var(--green);border-color:var(--green);color:#fff}
.ftile.on .fv{color:#fff}
.ftile.na{opacity:.45}
.ftile:hover{filter:brightness(1.1);opacity:1}
.finmenu{position:fixed;z-index:60;min-width:220px;max-width:320px;background:#0c1a2e;border:1px solid #2a4368;border-radius:8px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px}
.finmenu button{background:transparent;border:0;color:var(--text);text-align:left;padding:10px 12px;border-radius:5px;font-size:15px}
.finmenu button:hover{background:var(--panel2)}
.finmenu button.cur{color:#7ee08d;font-weight:700}
.finmenu button.off{border-top:1px solid #1a3050;margin-top:4px;color:#ffb4b4}
.fm-note{font-size:12px;color:#ffd98a;background:#3d3317;padding:8px 10px;border-radius:5px;margin-bottom:4px}
.fin-chips{display:flex;flex-wrap:wrap;gap:5px}
.fin-chip{background:var(--green);color:#fff;font-weight:700;font-size:12px;padding:2px 8px;border-radius:10px}

/* files row */
.lfiles{padding:12px 16px 16px}
.lfiles .art-list{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.lfiles .art img,.lfiles .art .ph{height:84px}
.lfiles .drop{min-height:120px}
.line > .chargebox,.line > .pagesbox{margin:0}
.bigart > img,.bigart > .ph{position:absolute;inset:0;width:100%;height:100%}
.bigart > img{object-fit:contain;padding:10px}

/* ===== v14: Order Management list (sections, one priority badge, machine chips) ===== */
:root{
  --sides-1:#22c55e; --sides-2:#f97316;
  --priority-late:#ef4444; --priority-rush:#f59e0b; --priority-today:#3b82f6;
  --warn-data:#eab308; --stale:#64748b;
  --stage-order:#6d4fe0; --stage-review:#0e9db5; --stage-print:#2f7bf0; --stage-finishing:#8b5cf6; --stage-ready:#1f9d45; --stage-delivered:#475569;
}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--panel);border:1px solid #1a3050;border-radius:var(--radius);padding:10px 12px;margin-bottom:14px}
.filterbar input[type=search]{min-width:240px}
.filterbar .grow{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--panel2);border:1px solid #2a4368;color:var(--text);border-radius:8px;padding:7px 12px;font-size:14px}
.chip span{color:var(--muted);font-size:12px;margin-left:4px}
.chip.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.chip.on span{color:#eaffef}
.switch{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;color:var(--text);font-size:14px;padding:4px 2px}
.switch i{position:relative;width:40px;height:22px;border-radius:99px;background:#33496a;display:inline-block;transition:background .15s}
.switch i:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.switch[aria-checked=true] i{background:var(--green)}
.switch[aria-checked=true] i:after{left:21px}
table.olist{border-collapse:separate;border-spacing:0;background:transparent}
table.olist th{background:var(--panel);font-size:13px;color:#9fc0ea;padding:12px 10px;border-bottom:1px solid #1a3050}
table.olist td{padding:13px 10px;background:var(--panel);border-bottom:1px solid #16294399;white-space:normal;vertical-align:middle}
table.olist tr.orow:hover td{background:var(--panel2);cursor:pointer}
table.olist td.pcell{border-left:4px solid transparent;white-space:nowrap}
tr.pb-late td.pcell{border-left-color:var(--priority-late)}
tr.pb-rush td.pcell{border-left-color:var(--priority-rush)}
tr.pb-today td.pcell{border-left-color:var(--priority-today)}
.pbadge{display:inline-block;min-width:58px;text-align:center;font-weight:700;font-size:13px;padding:5px 10px;border-radius:6px;color:#fff}
.pbadge.late{background:var(--priority-late)}
.pbadge.rush{background:var(--priority-rush);color:#231400}
.pbadge.rush:before{content:"⚡ "}
.pbadge.today{background:var(--priority-today)}
.pbadge.done{background:var(--stage-delivered)}
tr.sec td{background:transparent !important;padding:14px 0 6px !important;border:0 !important}
.sec-btn{display:flex;align-items:center;gap:12px;width:100%;background:var(--panel);border:1px solid #1a3050;border-left:5px solid var(--sec,#33496a);border-radius:8px;color:var(--text);padding:9px 14px;font-size:15px;text-align:left}
.sec-btn:hover{background:var(--panel2)}
.sec-btn .chev{width:14px;font-size:18px;color:var(--muted)}
.sec-name{font-weight:800;letter-spacing:.03em;background:var(--sec,#33496a);color:#fff;padding:3px 10px;border-radius:6px}
.sec-count{background:var(--panel2);border-radius:99px;min-width:30px;text-align:center;padding:2px 9px;font-weight:700}
.sec-late{--sec:var(--priority-late)}.sec-today{--sec:var(--priority-today)}.sec-tomorrow{--sec:#16a34a}.sec-week{--sec:#7c3aed}.sec-later{--sec:#0e7490}.sec-nodate{--sec:#475569}.sec-stale{--sec:var(--stale)}.sec-done{--sec:var(--stage-delivered)}
tr.sec-stale .sec-btn,tr.sec-done .sec-btn{opacity:.75}
table.olist td.jobc{min-width:190px;max-width:280px}
table.olist td.mono{white-space:nowrap}
table.olist td.cust{max-width:170px;color:#9fc0ea}
table.olist td.mat{max-width:170px}
table.olist td.due{white-space:nowrap}
table.olist td.size{max-width:170px;white-space:nowrap}
table.olist td.size .clamp2.long{white-space:normal;font-size:12px;line-height:1.3;word-break:break-word}
table.olist td.mach{max-width:150px;white-space:normal}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qtybig{font-size:20px;font-weight:700}
.qtycell{display:table-cell}
.qty-bad{display:block;color:var(--warn-data);font-weight:800;font-size:17px;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;margin-left:auto}
.checkqty{display:inline-block;border:1px solid var(--warn-data);color:var(--warn-data);background:rgba(234,179,8,.12);font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;white-space:nowrap}
.qtycell .small{display:block}
.sides-pill{display:inline-block;font-weight:800;font-size:12px;padding:5px 11px;border-radius:7px;color:#fff;white-space:nowrap}
.sides-pill.one{background:var(--sides-1)}.sides-pill.two{background:var(--sides-2)}.sides-pill.mix{background:#475569}
td.fin{max-width:230px}
.minichip{display:inline-block;background:#2a3d5c;color:#dbe7f7;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;margin:2px 4px 2px 0;white-space:nowrap}
.minichip.more{background:transparent;border:1px solid #2a4368;color:var(--muted)}
.stage{display:inline-block;font-weight:700;font-size:13px;padding:5px 12px;border-radius:6px;color:#fff;white-space:nowrap;background:var(--stage-order)}
.stage.st-review{background:var(--stage-review)}.stage.st-print{background:var(--stage-print)}.stage.st-finishing{background:var(--stage-finishing)}.stage.st-ready{background:var(--stage-ready)}.stage.st-delivered{background:var(--stage-delivered)}
.stage.stuck{box-shadow:0 0 0 2px var(--warn-data) inset}
/* order page QTY box is clickable */
button.bigbox{font:inherit;color:inherit;text-align:left;cursor:pointer;align-items:flex-start}
button.bigbox:hover{filter:brightness(1.12)}
.bigbox.bad{border-color:var(--warn-data)}
.bigbox.bad b{font-size:36px;word-break:break-word}
.sidesbox.one{background:var(--sides-1)}.sidesbox.two{background:var(--sides-2)}
.sides-legend i.one{background:var(--sides-1)}.sides-legend i.two{background:var(--sides-2)}
@media(max-width:1640px){
  table.olist th,table.olist td{padding:10px 6px;font-size:13px}
  table.olist td.mono{font-size:11.5px}
  table.olist td.jobc{min-width:140px;max-width:200px}
  table.olist td.cust{max-width:120px}
  table.olist td.mat{max-width:120px}
  td.fin{max-width:150px}
  table.olist td.mach{max-width:110px}
  .pbadge{min-width:46px;padding:4px 7px;font-size:12px}
  .sides-pill{padding:4px 8px;font-size:11px}
  .minichip{padding:3px 8px;font-size:11px}
  .stage{padding:4px 8px;font-size:12px}
  .qtybig{font-size:18px}
  main{padding:16px 14px}
}
table.olist td.mat .clamp2,table.olist td.jobc .clamp2{word-break:break-word}

/* long free text from Monday must never stretch the table: every text cell is capped and wraps */
.tablewrap table.olist{table-layout:auto;width:100%}
.qty-bad{white-space:normal;word-break:break-word;font-size:15px;max-width:130px}
table.olist td.qtycell{max-width:140px}
@media(max-width:1640px){table.olist td.size{max-width:120px}}

/* ===== v15: My jobs cards (days late, spec tiles, split stage button, Stuck, notes) + notification bell ===== */
:root{ --due-today:var(--sides-2); --due-tomorrow:var(--warn-data); --due-later:#3d5777; --btn-off:#2a3c58; }
.mysub{font-size:17px;color:#7fb2ee;margin-top:2px}
.myjobs{grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:18px;align-items:start}
.jobcard{background:var(--panel);border:1px solid #1a3050;border-left:6px solid #2a4368;border-radius:var(--radius);padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.jobcard.due-late{border-left-color:var(--priority-late)}
.jobcard.due-today{border-left-color:var(--due-today)}
.j-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.j-ref{color:var(--muted);font-size:15px}
.duebadge{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.03em;text-transform:uppercase;padding:5px 11px;border-radius:6px;color:#fff;white-space:nowrap;background:var(--due-later)}
.duebadge.late,.duebadge.stuck{background:var(--priority-late)}
.duebadge.today{background:var(--due-today)}
.duebadge.tomorrow{background:var(--due-tomorrow);color:#231c00}
.duebadge.none{background:#33496a;color:var(--muted)}
.j-main{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:start}
.jobcard .thumb{width:128px;height:128px;border-radius:8px;border:1px solid #223a5c}
.jobcard h3{margin:2px 0 2px;font-size:20px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.j-cust{color:#7fb2ee;font-size:15px;margin-bottom:10px;min-height:4px}
.spectiles{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr) minmax(0,1fr);gap:10px}
.spectiles .bigbox{padding:8px 12px 10px;min-width:0;min-height:86px}
.spectiles .bigbox small{font-size:13px}
.spectiles .bigbox b{font-size:36px;line-height:1.15;white-space:nowrap}
.spectiles .bigbox b.size{font-size:clamp(22px,2.1vw,34px)}
.spectiles .bigbox.bad b{font-size:30px;white-space:normal;overflow-wrap:anywhere;line-height:1.1}
.spectiles .qtybox.bad b{font-size:22px}
.spectiles .bigbox.bad b:only-of-type{max-height:70px;overflow:hidden}
.spectiles .sidestile .sides-pill{margin-top:8px;font-size:15px;padding:7px 10px;border-radius:8px;text-align:center;align-self:stretch}
.bigbox.sizebox.bad,.bigbox.sidestile.bad{border-color:var(--warn-data)}
.specflag{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1.5px solid var(--warn-data);background:rgba(234,179,8,.12);color:#ffe27a;border-radius:8px;padding:9px 12px;font-size:15px;font-weight:600}
.specflag svg{color:var(--warn-data);flex:none}
.stuckbox{border:1.5px solid var(--priority-late);background:rgba(239,68,68,.12);color:#ffd0d0;border-radius:8px;padding:9px 12px;font-size:14px;overflow-wrap:anywhere}
.jobcard .fin-chips{gap:8px}
.jobcard .fin-chip{font-size:14px;padding:5px 12px;border-radius:8px;background:var(--sides-1)}
.j-meta{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;font-size:15px}
.j-m{display:inline-flex;align-items:center;gap:8px}
.j-m svg{color:#7fb2ee;flex:none}
.j-now{color:#7fb2ee;font-weight:700}
.j-machine{font-size:15px;font-weight:700;color:#bcd9ff;text-decoration:none;padding:0}
.j-machine:hover{text-decoration:underline}
.btn.setmachine{background:var(--warn-data);color:#231c00;font-weight:800;padding:6px 14px;border-radius:7px;font-size:14px}
.j-mat{font-size:14px;overflow-wrap:anywhere}
b.unk{color:#ffcb00}
/* notes: 3 lines, then Show all */
.clampnote{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--warn-data);border-left-width:1.5px;background:rgba(234,179,8,.1);color:#ffe9a8;border-radius:8px;padding:9px 12px;margin:0;font-size:14px;white-space:normal}
.clampnote .cn-ico{color:var(--warn-data);flex:none;margin-top:1px}
.clampnote .cn-body{min-width:0;flex:1;display:flex;gap:6px 12px;align-items:flex-end;flex-wrap:wrap}
.clampnote .cn-text{flex:1 1 220px;min-width:0;white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.clampnote.open .cn-text{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.clampnote .cn-more{color:#ffe27a;font-size:13px;white-space:nowrap;padding:0}
/* actions */
.j-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:2px}
.jbtn{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;font-size:15px;border:1px solid #2a4368;border-radius:8px;background:#10233d;color:var(--text)}
.jbtn:hover{background:var(--panel2)}
.jbtn[disabled]{opacity:.55;cursor:not-allowed}
.split{display:inline-flex;border-radius:8px;overflow:hidden;flex:1 1 210px;max-width:300px}
.split-main{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;background:var(--green);color:#fff;font-size:16px;font-weight:800;padding:11px 16px;cursor:pointer;min-width:0}
.split-main span{white-space:nowrap}
.split-caret{border:0;border-left:1px solid rgba(0,0,0,.28);background:var(--green);color:#fff;padding:0 11px;cursor:pointer;display:inline-flex;align-items:center}
.split-main:hover:not([disabled]),.split-caret:hover:not([disabled]){filter:brightness(1.1)}
.split.off .split-main{background:var(--btn-off);color:#93a8c6;cursor:not-allowed;font-weight:700}
.split.off .split-caret{background:var(--btn-off);color:#93a8c6;border-left-color:#1c2c45}
.split-caret[disabled]{cursor:not-allowed;opacity:.6}
.j-hint{color:var(--muted);font-size:14px;margin-top:-4px;padding-left:4px}
.finmenu button.done{color:#8fa3bf}
.finmenu button[disabled]{opacity:.45;cursor:not-allowed}
.finmenu button[disabled]:hover{background:transparent}
.finmenu button.cur[disabled]{opacity:1}
/* Stuck modal */
.modal-back{position:fixed;inset:0;z-index:70;background:rgba(3,9,18,.72);display:grid;place-items:center;padding:16px}
.modal{background:var(--panel);border:1px solid #2a4368;border-radius:12px;padding:20px 22px;width:100%;max-width:460px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal h3{margin:0;font-size:19px;overflow-wrap:anywhere}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.reason{position:relative;display:block}
.reason input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.reason span{display:block;text-align:center;padding:11px 6px;border:1px solid #2a4368;border-radius:8px;background:#10233d;font-weight:700;font-size:15px}
.reason input:checked + span{background:var(--priority-late);border-color:var(--priority-late);color:#fff}
.reason input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}
.modal textarea{width:100%;resize:vertical}
.btn.red{background:var(--priority-late);color:#fff}
/* bell */
.btn.bell{position:relative;display:inline-flex;align-items:center;padding:7px 10px}
.btn.bell.has{color:#fff;background:#3a2330}
#bell-n{position:absolute;top:-6px;right:-6px;background:var(--priority-late);color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;line-height:18px;border-radius:9px;padding:0 4px;text-align:center}
.bellpanel{position:fixed;z-index:65;width:min(380px,calc(100vw - 16px));max-height:70vh;overflow:auto;background:#0c1a2e;border:1px solid #2a4368;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.bp-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #1a3050}
.bp-item{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-bottom:1px solid #152841;color:var(--text);font-size:14px;overflow-wrap:anywhere}
.bp-item:hover{background:var(--panel2)}
.bp-item.new{border-left:4px solid var(--priority-late);background:#14233a}
.bp-empty{padding:14px}
@media(max-width:560px){
  .j-main{grid-template-columns:84px minmax(0,1fr);gap:10px}
  .jobcard .thumb{width:84px;height:84px}
  .spectiles{grid-template-columns:1fr 1fr}
  .spectiles .sidestile{grid-column:1 / -1;min-height:0}
  .split{max-width:none;flex-basis:100%}
}
.myhead h1{font-size:34px;font-weight:800;letter-spacing:-.01em;margin:0 0 2px}
.j-ref{flex:1 1 120px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.j-top .via-monday{margin-left:0;flex:none;font-size:12px;padding:3px 9px}
.specflag .sf-how{margin-left:auto;font-weight:400;font-size:13px;color:#d9c98a}
.spectiles .qtybox.bad b{font-size:26px}
@media(max-width:560px){
  .j-main{display:block}
  .jobcard .thumb{float:left;margin:0 12px 8px 0}
  .spectiles{clear:both;padding-top:4px}
  .spectiles .bigbox b.size{font-size:26px}
  .j-actions .jbtn{flex:1;justify-content:center}
}
.spectiles .bigbox b.size.long{font-size:clamp(18px,1.5vw,25px);line-height:1.6}
.spectiles .bigbox{overflow:hidden}

/* ===== v16: packing checklist. A white sheet on screen, and the only thing on paper when printed. ===== */
.art-new{color:var(--warn-data);font-weight:700}
.cl-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cl-sheet{background:#fff;color:#111;max-width:8.5in;margin:0 auto 30px;padding:.45in .5in;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.5);font-size:12.5px;line-height:1.35}
.cl-sheet small{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#555;font-weight:700}
.cl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:3px solid #111;padding-bottom:8px}
.cl-kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#444}
.cl-sheet h1{font-size:30px;font-weight:900;margin:2px 0 0;letter-spacing:-.01em;font-family:ui-monospace,Menlo,Consolas,monospace}
.cl-title{font-size:16px;font-weight:600}
.cl-rush{border:3px solid #111;font-weight:900;font-size:17px;padding:6px 12px;white-space:nowrap}
.cl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 18px;margin:10px 0}
.cl-kv b{font-size:14px;overflow-wrap:anywhere}
.cl-kv.wide{grid-column:1 / -1}
.cl-kv.wide b{font-size:16px}
.cl-blank{color:#888;font-weight:400;font-style:italic}
.cl-notes{border:1.5px solid #111;padding:6px 9px;margin:0 0 10px;white-space:pre-line;overflow-wrap:anywhere}
.cl-table{width:100%;border-collapse:collapse}
.cl-table th{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid #111;padding:4px 6px}
.cl-table td{padding:7px 6px;vertical-align:top}
.cl-line{border-bottom:1px solid #999;break-inside:avoid;page-break-inside:avoid}
.cl-c{width:46px;text-align:center}
.cl-p{width:1.05in}
.cl-q{width:.95in;text-align:right}
.cl-q b{font-size:26px;font-weight:900;line-height:1}
.cl-s{width:1.15in;font-weight:700;font-size:14px;white-space:nowrap}
.cl-d{width:.85in}
.cl-item b{font-size:14px;overflow-wrap:anywhere}
.cl-item > div{overflow-wrap:anywhere}
.cl-fin{font-weight:700}
.cl-note{color:#444;font-size:11.5px;white-space:pre-line}
.cl-box{display:inline-block;width:22px;height:22px;border:2px solid #111;border-radius:2px;flex:none;background:#fff}
.cl-pic{width:.95in;height:.95in;border:1px solid #bbb;display:grid;place-items:center;overflow:hidden;background:#fff;color:#888;font-size:10px}
.cl-pic.sm{width:.8in;height:.8in}
.cl-pic img,.cl-pic canvas{max-width:100%;max-height:100%;width:auto !important;height:auto !important;object-fit:contain}
.cl-pic.none{background:#f2f2f2;font-weight:700}
.cl-tag{border:1.5px solid #111;font-size:10px;font-weight:800;padding:1px 5px;white-space:nowrap}
.cl-warn{display:inline-block;border:2px solid #111;font-weight:900;font-size:11px;padding:1px 5px;white-space:nowrap;background:#ffe45c;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cl-raw{font-size:11px;color:#444;overflow-wrap:anywhere}
.cl-fill{font-size:16px;font-weight:700;margin-top:6px}
.cl-sides{display:inline-block;font-weight:900;font-size:12px;padding:3px 7px;white-space:nowrap;border:2px solid #111;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cl-sides.two{background:#111;color:#fff}
.cl-sub-h td{padding:0 6px 2px;font-size:11.5px;font-weight:700}
.cl-designs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 10px;padding-bottom:4px}
.cl-design{display:flex;gap:7px;align-items:flex-start;break-inside:avoid;page-break-inside:avoid}
.cl-design > div:last-child{min-width:0;display:flex;flex-direction:column;gap:2px}
.cl-design small{text-transform:none;letter-spacing:0;font-weight:400;overflow-wrap:anywhere}
.cl-count{font-weight:700;margin-top:4px}
.cl-foot{display:grid;grid-template-columns:1.3fr .8fr 1.2fr 1.2fr 1fr;gap:12px;border-top:3px solid #111;margin-top:14px;padding-top:10px;break-inside:avoid;page-break-inside:avoid}
.cl-foot b{display:block;font-size:14px;margin-top:10px;white-space:nowrap}
.cl-printed{margin-top:12px;font-size:10px;color:#666}
@media print{
  @page{size:letter;margin:.45in}
  html,body{background:#fff !important;color:#000}
  .side,.top,.toast,.cl-bar,.bellpanel,.finmenu{display:none !important}
  .app{display:block;min-height:0}
  main{padding:0;overflow:visible}
  .cl-sheet{box-shadow:none;margin:0;padding:0;max-width:none;border-radius:0}
  .cl-table thead{display:table-header-group}
}
.cl-pic{flex:none}

/* v16: qty per file (items with several files) */
.fileqty{background:#10233d;border:1px dashed var(--warn-data);color:#ffe27a;border-radius:6px;padding:3px 8px;font-size:12px;font-weight:700;cursor:pointer;align-self:flex-start;margin:2px 0}
.fileqty.set{border:1px solid var(--sides-1);background:rgba(34,197,94,.14);color:#b8f5c6;font-size:14px}
.fileqty:hover{filter:brightness(1.2)}
.fq-sum{margin-left:auto;font-size:13px;font-weight:700;padding:2px 9px;border-radius:6px}
.fq-sum.ok{color:#b8f5c6;background:rgba(34,197,94,.14)}
.fq-sum.warn{color:#ffe27a;background:rgba(234,179,8,.14)}
.fq-list{margin:4px 0 2px;font-size:14px;overflow-wrap:anywhere}
.fq-list b{font-size:16px}
.cl-dq{font-size:17px;font-weight:900}
.cl-count i{font-weight:400;font-size:10.5px}

/* ===== v17: Preview board (shipping): cards with pictures of the files ===== */
.pboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:16px;align-items:start}
.pcard{background:var(--panel);border:1px solid #1a3050;border-radius:var(--radius);display:flex;flex-direction:column;cursor:pointer;min-width:0;overflow:hidden}
.pcard:hover{border-color:#3b5f92;box-shadow:0 0 0 1px #3b5f92}
.pcard.done{opacity:.88}
.pcard.done .pc-top{background:rgba(71,85,105,.25)}
.pc-top{display:flex;align-items:center;gap:8px;padding:9px 12px;flex-wrap:wrap}
.pc-top .stage{font-size:12px;padding:4px 9px}
.pc-top .pbadge{min-width:0;font-size:12px;padding:4px 8px}
.pc-no{font-size:13px;color:var(--muted)}
.pc-when{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.pc-big{position:relative;background:#fff;aspect-ratio:4 / 3;display:grid}
.pc-big .pages-badge{top:8px;left:8px}
.pic{display:grid;place-items:center;overflow:hidden;background:#fff;color:#7a8799;font-weight:800;font-size:13px;position:relative;min-width:0;min-height:0}
.pic img{width:100%;height:100%;object-fit:contain;display:block}
.pic.big{width:100%;height:100%;position:absolute;inset:0;font-size:20px}
.pic.none{background:#0a1626;color:var(--muted)}
.pic.nopreview{background:#e9edf3}
.pc-small{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:5px;padding:6px 8px;background:#0a1626}
.pic.sm{aspect-ratio:1;border-radius:4px;font-size:11px}
.pic.sm.more{font-size:14px;color:#cfe0f7;background:#172c49}
.pic-qty{position:absolute;right:2px;bottom:2px;background:#111;color:#fff;font-size:11px;font-weight:800;padding:0 5px;border-radius:4px;line-height:1.5}
.pc-body{padding:10px 12px 4px;display:flex;flex-direction:column;gap:5px;min-width:0}
.pc-body h3{margin:0;font-size:17px;line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.pc-cust{color:#7fb2ee;font-size:13px;overflow-wrap:anywhere}
.pc-desc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:2px}
.pc-qty{font-size:18px;font-weight:900;white-space:nowrap}
.pc-qty.unk{color:#ffcb00}
.pc-size{font-size:15px;font-weight:700;white-space:nowrap}
.pc-desc .sides-pill{font-size:11px;padding:3px 8px}
.pc-mat{font-size:14px;color:#d5e2f3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-ship{align-self:flex-start;font-size:13px;font-weight:800;padding:3px 10px;border-radius:6px;background:#1d3d6b;color:#cfe3ff;letter-spacing:.02em;text-transform:uppercase}
.pc-ship.none{background:transparent;border:1px dashed #3d5777;color:var(--muted);font-weight:400;text-transform:none}
.pc-actions{display:flex;gap:8px;padding:10px 12px 12px;margin-top:auto}
.pc-actions .btn{flex:1;text-align:center;padding:9px 8px;font-size:14px}

/* v18: purchase orders sent with the art: tagged, never the main picture */
.po-tag{position:absolute;top:6px;right:6px;z-index:2;background:#475569;color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:9px;letter-spacing:.3px}
.pic[data-tag]::after{content:attr(data-tag);position:absolute;right:2px;bottom:2px;background:#111;color:#fff;font-size:11px;font-weight:800;padding:0 5px;border-radius:4px;line-height:1.5}
.pic.po[data-tag]::after{background:#475569}
.pic.po img{opacity:.7}
.po-tag.zip{background:#1d4ed8}

/* v19: Order Management as cards (same card as the preview board) */
.seg{display:inline-flex;border:1px solid #2a4368;border-radius:8px;overflow:hidden}
.seg button{background:var(--panel2);border:0;color:var(--text);padding:7px 14px;font-size:14px;cursor:pointer}
.seg button + button{border-left:1px solid #2a4368}
.seg button[aria-pressed=true]{background:var(--green);color:#fff;font-weight:700}
.csec{margin:16px 0 10px}
.csec:first-child{margin-top:0}
.csec .sec-btn{width:100%}
#ocards .pboard{margin-bottom:6px}
.pcard.pb-late{border-left:5px solid var(--priority-late)}
.pcard.pb-rush{border-left:5px solid var(--priority-rush)}
.pcard.pb-today{border-left:5px solid var(--priority-today)}
.pc-fin{display:flex;flex-wrap:wrap;gap:4px}
.pc-mach{font-size:14px;font-weight:700;color:#bcd9ff}
.pc-mach.none{color:var(--muted);font-weight:400}

/* v20: scan box (header), the banner a scan leaves on the order, camera scan */
.scanbox{display:flex;align-items:center;gap:8px;background:#0f1b2b;border:1px solid #2a4368;border-radius:9px;padding:0 6px 0 10px;height:38px;flex:0 1 340px;min-width:200px;color:var(--muted)}
.scanbox:focus-within{border-color:var(--green);color:var(--text)}
.scanbox input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font-size:15px;height:100%}
.scanbox input::placeholder{color:var(--muted)}
.scanbox button{background:transparent;border:0;color:inherit;cursor:pointer;display:grid;place-items:center;width:32px;height:30px;border-radius:6px}
.scanbox button:hover,.scanbox button:focus-visible{background:#1d3d6b;color:#fff}
.scanned{display:flex;gap:14px;align-items:stretch;border:2px solid #2f6fd0;background:#0f2038;border-radius:12px;margin:0 0 14px;overflow:hidden}
.scanned .sc-method{display:grid;place-items:center;text-align:center;min-width:150px;padding:10px 14px;font-size:20px;font-weight:800;letter-spacing:.03em;background:#1d4ed8;color:#fff}
.scanned.k-pickup{border-color:#64748b}.scanned.k-pickup .sc-method{background:#64748b}
.scanned.k-local{border-color:#0e7490}.scanned.k-local .sc-method{background:#0e7490}
.scanned.k-none{border-color:var(--red)}.scanned.k-none .sc-method{background:var(--red)}
.scanned .sc-main{flex:1;min-width:0;padding:10px 0;display:flex;flex-direction:column;gap:6px}
.scanned small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.scanned .sc-what b{font-size:19px;overflow-wrap:anywhere}
.scanned .sc-what span{color:#bcd9ff;margin-left:6px}
.scanned .sc-to b{font-size:22px;line-height:1.25;overflow-wrap:anywhere}
.scanned .sc-bad{color:#fff;background:var(--red);padding:1px 8px;border-radius:6px}
.scanned .sc-items{font-size:15px;color:#d5e2f3}
.scanned .sc-items.warn{color:#111;background:#facc15;font-weight:700;padding:4px 10px;border-radius:6px;align-self:flex-start}
.scanned > .btn{align-self:flex-start;margin:10px 10px 0 0}
.line.scan-hit{outline:3px solid #facc15;outline-offset:2px}
.modal.cam{max-width:560px}
.cam-view{background:#000;border-radius:8px;overflow:hidden;aspect-ratio:4/3}
.cam-view video{width:100%;height:100%;object-fit:cover;display:block}
.scan-fail .modal{border-color:var(--red)}
.scan-fail h3{color:#ff8a8a}
@media (max-width:720px){.scanbox{flex:1 1 100%;order:5}.scanned{flex-direction:column;gap:0}.scanned .sc-method{min-width:0}.scanned .sc-main{padding:10px 12px}.scanned > .btn{margin:0 12px 12px}}
.top{position:sticky;top:0;z-index:40}
@media (max-width:720px){.top{position:static}}

/* v21: shipping rule of the customer (order page, scan banner, checklist) and its settings table */
.shiprule{border:2px solid #f97316;background:#2a1708;border-radius:12px;margin:0 0 14px;overflow:hidden}
.shiprule .sr-head{background:#f97316;color:#111;font-size:21px;font-weight:800;letter-spacing:.02em;padding:8px 14px;overflow-wrap:anywhere}
.shiprule .sr-body{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;padding:10px 14px}
.shiprule small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.shiprule b.mono{font-size:22px;letter-spacing:.04em;user-select:all}
.shiprule .sr-missing{background:var(--red);color:#fff;font-weight:700;padding:3px 10px;border-radius:6px}
.shiprule .sr-missing a{color:#fff;text-decoration:underline}
.shiprule .sr-note{color:#fed7aa}
.scanned .sc-rule{align-self:flex-start;background:#f97316;color:#111;font-size:18px;font-weight:800;padding:4px 10px;border-radius:6px;overflow-wrap:anywhere}
.srules{width:100%;border-collapse:collapse}
.srules th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:0 6px 6px 0;white-space:nowrap}
.srules td{padding:4px 6px 4px 0;vertical-align:middle}
.srules input{width:100%;min-width:110px}
.srules td:nth-child(2) input{min-width:300px}
.srules .sr-act{white-space:nowrap}
.cl-rule{border:3px solid #000;padding:6px 10px;margin:8px 0;display:flex;flex-direction:column;gap:2px}
.cl-rule b{font-size:17px}
.cl-rule span{font-size:13px}

/* v22: shipping label screen */
.labelsbox{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;align-items:flex-start}
.lb-row{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;background:#0f2038;border:1px solid #2a4368;border-radius:8px;padding:8px 12px;width:100%}
.lb-row b{color:#7ee2a8}
.lb-row.void{opacity:.6}.lb-row.void b{color:var(--muted)}
.shipblock{background:var(--red);color:#fff;font-weight:800;font-size:18px;padding:12px 16px;border-radius:10px;margin:0 0 12px}
.shipblock.small{font-size:14px;padding:6px 10px;grid-column:1/-1}
.shipgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.shipaddr{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.shipaddr label,.shipbox label,.shipbuy label.wide{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.shipaddr label.wide{grid-column:1/-1}
.shipaddr input{width:100%;font-size:16px}
.shipaddr .btn{grid-column:1/-1;justify-self:start}
.blindfrom input{border-color:#f97316}
.shipitems{display:flex;flex-direction:column;gap:8px}
.shipitem{display:grid;grid-template-columns:28px 64px minmax(0,1fr);gap:10px;align-items:center;background:#0f1b2b;border:1px solid #2a4368;border-radius:8px;padding:8px;cursor:pointer}
.shipitem input{width:22px;height:22px}
.shipitem .si-pic .pic{width:64px;height:64px;border-radius:4px}
.shipitem .si-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.shipitem .si-txt b{overflow-wrap:anywhere}
.shipitem small{color:var(--muted)}
.shipitem em{align-self:flex-start;font-style:normal;font-weight:800;font-size:12px;background:var(--red);color:#fff;padding:1px 8px;border-radius:6px}
.shipitem.notready{opacity:.75;cursor:not-allowed}
.shipitem:has(input:checked){border-color:var(--green);background:#0d2a1c}
.shipbox{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.shipbox input{width:110px;font-size:18px}
.rates{display:flex;flex-direction:column;gap:6px}
.rate{display:grid;grid-template-columns:24px 190px minmax(0,1fr) auto;gap:10px;align-items:center;background:#0f1b2b;border:1px solid #2a4368;border-radius:8px;padding:9px 12px;cursor:pointer}
.rate.on{border-color:var(--green);background:#0d2a1c}
.rate b{font-size:18px}
.rate .rt-car{color:var(--muted)}
.addrcheck{margin-bottom:10px;padding:6px 10px;border-radius:6px;font-weight:700}
.addrcheck.ok{background:#0d2a1c;color:#7ee2a8}
.addrcheck.warn{background:#facc15;color:#111}
.shipbuy{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.shipbuy label.wide{width:100%}
.shipbuy label.wide input{width:100%;font-size:16px}
.shipbuy .chk{display:flex;gap:8px;align-items:center;font-size:15px}
.shipbuy .chk input{width:20px;height:20px}
.btn.big{font-size:19px;padding:13px 22px}
.shipdone{margin:0 0 14px}
.labelframe{width:100%;height:520px;border:0;border-radius:8px;margin-top:10px;background:#fff}
.scanned .sc-note{color:#d5e2f3;white-space:pre-wrap;overflow-wrap:anywhere}
.scanned .sc-go{align-self:flex-start;margin:10px 0 0}
.srules .sr-chk label{display:flex;gap:6px;align-items:center;white-space:nowrap;font-size:13px}
.srules .sr-chk input{width:18px;min-width:18px;height:18px}
@media (max-width:900px){.shipgrid{grid-template-columns:1fr}.rate{grid-template-columns:24px minmax(0,1fr) auto}.rate .rt-car{display:none}}

/* v23: only the shop's services; locked to what the customer asked for */
.svclock{background:#f97316;color:#111;font-weight:700;padding:8px 12px;border-radius:8px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.svclock.off{background:var(--red);color:#fff}
.svclock .btn{background:#111;color:#fff;border-color:#111}
.rate.locked{opacity:.5;cursor:not-allowed}
.rate em{font-style:normal;font-size:12px;color:#fdba74;margin-left:8px}
.svcmodal{max-width:520px;border-color:#f97316}
.svcmodal h3{color:#fdba74}
.svcmodal ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.svcmodal .chk{display:flex;gap:8px;align-items:flex-start;font-size:15px}
.svcmodal .chk input{width:20px;height:20px;flex:0 0 auto;margin-top:2px}

/* v24: stakes are a row of their own on the packing checklist and on the label screen */
.cl-stakes td{border-top:1px dashed #999;background:#fff7d6}
.cl-stakes .cl-pic{background:#fff}
.shipitem.stake{margin-left:38px;border-style:dashed;border-color:#facc15}
@media print{.cl-stakes td{background:#fff7d6!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* v25: the three ship-service buttons on the order page */
.shipflags{display:flex;flex-direction:column;gap:6px;flex:1 1 100%;grid-column:1/-1}
.shipflags small{color:var(--muted);font-size:12px}
.sf-row{display:flex;flex-wrap:wrap;gap:8px}
.sf-btn{background:#0f1b2b;border:2px solid #2a4368;color:var(--text);border-radius:9px;padding:10px 16px;font-size:15px;font-weight:700;cursor:pointer}
.sf-btn:hover{border-color:#f97316}
.sf-btn.on{background:#f97316;border-color:#f97316;color:#111}

/* v26: the label button lives in the shipping part of the order page; stakes window */
.section .labelsbox{flex:1 1 100%;grid-column:1/-1;margin:0}
.modal-pic{display:flex;justify-content:center}
.modal-pic img{width:120px;height:120px;object-fit:contain;background:#fff;border-radius:10px}

/* v27: an order in several boxes */
.boxcount{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.boxcount span{color:var(--muted);font-size:13px}
.boxcount b{font-size:20px;min-width:22px;text-align:center}
.boxcount .btn{font-size:18px;line-height:1;padding:6px 14px}
.shipbox + .shipbox{margin-top:8px}
.shipbox .boxno{align-self:flex-end;min-width:54px;padding-bottom:9px;color:#fdba74}
.donelist{display:flex;flex-direction:column;gap:6px;margin:10px 0 6px}
.donelist > div{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;background:#0f2038;border:1px solid #2a4368;border-radius:8px;padding:8px 12px}
.pendingbox{border:2px solid #f97316}
.pend-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 6px}
#get-rates{margin-top:12px}
.pendingbox .lb-row{margin-top:6px}

/* v28: Mascot Junction PO sheet: file qty from the PO */
.pobox{margin:8px 0 10px;border:1px solid #2a4368;border-radius:8px;background:#0f2038;padding:8px 12px;font-size:13px}
.pobox.ok{border-color:#1f7a45}.pobox.warn{border-color:#eab308}.pobox.wait{color:var(--muted)}
.pobox summary{cursor:pointer;font-size:14px}
.pobox.ok summary{color:#b8f5c6}.pobox.warn summary{color:#ffe27a}
.potable{width:100%;border-collapse:collapse;margin:8px 0}
.potable th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;padding:3px 8px;border-bottom:1px solid var(--line)}
.potable td{padding:4px 8px;border-bottom:1px solid #22324a;vertical-align:top}
.potable .r{text-align:right}
.potable tr.bad td{background:rgba(220,38,38,.16);color:#fecaca}
.potable em{font-style:normal;color:#ffe27a;font-weight:700}.potable em.ok{color:#b8f5c6}
.po-loose{color:#ffe27a;margin:4px 0 8px}
.po-src{font-size:11px;color:#b8f5c6;align-self:flex-start}
.po-src.warn{color:#ffe27a;font-weight:700}

/* v29: real times */
.took{font-size:12px;color:#7ee2a8;font-weight:700;margin-top:2px}
table.times{width:100%;border-collapse:collapse}
table.times th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;padding:6px 10px;border-bottom:1px solid var(--line)}
table.times td{padding:7px 10px;border-bottom:1px solid #22324a;vertical-align:top}
table.times .r{text-align:right}
table.times b.slow{color:#fca5a5}table.times b.fast{color:#7ee2a8}

/* v30: pages of a multi-page file under the big picture on the order */
.bigart > canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pgstrip{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 4px;align-items:stretch}
.pgstrip button{position:relative;flex:0 0 auto;width:92px;height:70px;background:#fff;border:3px solid transparent;border-radius:6px;padding:0;cursor:pointer;overflow:hidden;display:grid;place-items:center;color:#334155;font-weight:800;font-size:18px}
.pgstrip button.on{border-color:#e2445c}
.pgstrip button:hover{border-color:#f97316}
.pgstrip button img,.pgstrip button canvas{width:100%;height:100%;object-fit:contain;display:block}
.pgstrip button.on:hover{border-color:#e2445c}
.pgstrip .pn{position:absolute;bottom:2px;right:4px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;padding:0 5px;border-radius:6px;font-weight:700}
.pgstrip .pg-more{align-self:center;color:var(--muted);font-size:12px;white-space:nowrap;padding:0 6px}

/* v31: the shipping row of an order, on one line */
.shipbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 14px}
.sb-method{display:flex;align-items:center;gap:12px;font-size:19px;padding-right:18px;border-right:1px solid #2a4368;white-space:nowrap}
.shipbar.k-none .sb-method{color:#ffe27a}
.sb-addr{display:flex;align-items:center;gap:10px;flex:1 1 260px;min-width:0;font-size:15px;padding-right:18px;border-right:1px solid #2a4368}
.sb-addr span{overflow-wrap:anywhere}
.sb-copy{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center;flex:0 0 auto}
.sb-copy:hover{color:var(--text);background:#1b2c45}
.shipflags.seg{flex:0 0 auto;flex-direction:row;gap:0;border:1px solid #2a4368;border-radius:9px;overflow:hidden;grid-column:auto}
.shipflags.seg .sf-btn{border:0;border-radius:0;background:transparent;padding:9px 18px;font-size:14px;font-weight:600}
.shipflags.seg .sf-btn + .sf-btn{border-left:1px solid #2a4368}
.shipflags.seg .sf-btn:hover{background:#1b2c45}
.shipflags.seg .sf-btn.on{background:#2f6fed;color:#fff}
.sb-pill{border:1px solid #3a4b5e;border-radius:9px;padding:7px 12px;font-size:13px;color:var(--muted);white-space:nowrap}
.sb-pill.warn{border-color:#eab308;color:#ffe27a;font-weight:700}
.shipbar .sb-label{margin-left:auto;font-size:15px;padding:10px 16px;font-weight:700}
.shipbar-labels{display:flex;flex-direction:column;gap:6px;margin:-6px 0 14px}
@media (max-width:900px){.sb-method,.sb-addr{border-right:0;padding-right:0}.sb-addr{flex-basis:100%}}

/* v32: stations */
.sttabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.sttab{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-weight:700;display:flex;gap:10px;align-items:center;color:var(--text);text-decoration:none}
.sttab small{display:block;color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.sttab b{background:var(--panel2);border-radius:99px;padding:1px 9px;font-size:13px}
.sttab.late b{background:#b42318;color:#fff}
.sttab.on{background:#2f6fed;border-color:#2f6fed;color:#fff}.sttab.on small{color:#dbe7ff}.sttab.on b{background:#fff;color:#1746b8}
.stgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
@media (max-width:1100px){.stgrid{grid-template-columns:1fr}}
.stbody{padding:0 !important}.stempty{padding:16px}
.stnow{display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:18px;padding:16px;align-items:center;border-left:6px solid #37b24d;border-top:1px solid var(--line)}
.stnow:first-child{border-top:0}
.stpic{position:relative}.stpic .pic{margin:0;border-radius:8px}.stpic .pic.big{position:relative;inset:auto;height:150px;width:100%}.stpic.sm .pic{width:110px;height:74px;aspect-ratio:auto}
.stname{font-size:20px;font-weight:800;color:var(--text);text-decoration:none}.stname:hover{text-decoration:underline}
.strow .stname{font-size:17px}
.strush{background:#ffcb00;color:#2b2300;font-weight:800;border-radius:6px;padding:2px 8px;font-size:12px;margin-left:8px}
.stcust{color:var(--muted)}
.stfacts{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.stf{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-weight:700;max-width:100%;overflow-wrap:anywhere}
.stf small{display:block;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.6px}
.stf.do{background:#37b24d;border-color:#37b24d;color:#fff}.stf.do small{color:#e2ffe8}
.stf.two{background:#f08c3a;border-color:#f08c3a;color:#fff}.stf.two small{color:#fff3e6}
.stf.sp{border-color:#eab308;color:#ffe27a}
.sttimer{color:#7ee2a8;font-weight:700}
.stacts{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.btn.stgo{background:#37b24d;color:#fff;font-size:20px;font-weight:800;padding:20px 24px;min-width:260px;line-height:1.2;border-radius:10px}
.btn.stgo small{display:block;font-size:13px;font-weight:600;opacity:.9}
.btn.ststart{background:#2f6fed;color:#fff;font-size:17px;font-weight:800;padding:16px 24px;min-width:130px;border-radius:10px}
.strow{display:flex;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.strow:first-child{border-top:0}.strow .stmid{flex:1;min-width:0}
.strow.dim{opacity:.7}
.stdue{font-weight:800;border-radius:7px;padding:4px 10px;font-size:13px;white-space:nowrap;background:var(--panel2);color:var(--text);text-align:center}
.stdue.late{background:#b42318;color:#fff}.stdue.today{background:#eab308;color:#111}
.stfrom{color:var(--muted);font-size:13px}.stfrom b{color:var(--text)}
.stwhere{color:#8fb4ff;font-weight:700;font-size:13px;white-space:nowrap}
.stkv > div{display:flex;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--line)}
.stkv > div:first-child{border-top:0}.stkv b{font-size:17px}.stkv span{color:var(--muted)}.stkv b.bad{color:#fca5a5}
.ststuck{padding:12px 16px;border-top:1px solid var(--line)}.ststuck:first-child{border-top:0}.ststuck .btn{margin-top:6px}
.ftile.special .fv.long{font-size:15px;line-height:1.2}
@media (max-width:800px){.stnow{grid-template-columns:1fr}.strow{flex-wrap:wrap}}
.section .body.stkv{padding:0}

/* v33: the same customer's other orders, with where each one goes */
.othersbox{border:2px solid #eab308;background:rgba(234,179,8,.10);border-radius:10px;padding:12px 14px;margin:0 0 12px;display:flex;flex-direction:column;gap:6px;color:var(--text)}
.othersbox.bad{border-color:#e03131;background:rgba(224,49,49,.14)}
.othersbox.same{border-color:#3a4b5e;background:var(--panel)}
.othersbox > b{font-size:16px}.othersbox.bad > b{color:#ffb4b4}
.ob-here{display:flex;gap:10px;align-items:baseline;font-size:14px}.ob-here span{color:var(--muted);min-width:76px}
.ob-row{display:grid;grid-template-columns:minmax(140px,1.2fr) 130px minmax(160px,2fr) auto;gap:10px;align-items:center;background:rgba(0,0,0,.22);border-radius:7px;padding:7px 10px;color:var(--text);text-decoration:none;font-size:14px}
.ob-row:hover{background:rgba(0,0,0,.36)}
.ob-t{font-weight:700;overflow-wrap:anywhere}.ob-s{color:var(--muted);font-size:12px}.ob-a{overflow-wrap:anywhere}
.othersbox em{font-style:normal;font-weight:800;font-size:12px;border-radius:6px;padding:3px 8px;white-space:nowrap;justify-self:end}
.ob-diff{background:#e03131;color:#fff}.ob-same{background:#2b8a3e;color:#fff}.ob-unk{background:#eab308;color:#111}
.ob-foot{color:var(--muted);font-size:12px}
.chk.only-this{border:1px solid #eab308;border-radius:8px;padding:8px 10px}
.scanned .othersbox{margin:6px 0 0}
@media (max-width:800px){.ob-row{grid-template-columns:1fr}.othersbox em{justify-self:start}}

/* v34: shared computer (the shipping Mac): the "who is using this" button and its picker */
.pill.whobtn{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;font-size:15px;font-weight:800;color:#fff;background:#1d4ed8;border:1px solid #3b82f6;cursor:pointer;text-decoration:none}
.pill.whobtn small{font-weight:600;font-size:11px;color:#c7dbff;border-left:1px solid rgba(255,255,255,.3);padding-left:8px}
.pill.whobtn.ask{background:#b45309;border-color:#f59e0b;animation:whoask 1.4s ease-in-out infinite}
@keyframes whoask{50%{box-shadow:0 0 0 6px rgba(245,158,11,.25)}}
.modal.whomodal{max-width:720px}
.whogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;max-height:60vh;overflow:auto}
.whoname{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;border:1px solid #2a4368;background:var(--panel2);color:var(--text,#e8eef4);font-size:18px;font-weight:700;cursor:pointer;text-align:left}
.whoname:hover,.whoname:focus-visible{border-color:#3b82f6;background:#16305a}
.whoname.on{border-color:#22c55e;background:#12351f}
.whoname .av{display:grid;place-items:center;width:40px;height:40px;border-radius:99px;background:#2f6fed;color:#fff;font-size:15px;flex:none}

/* v35: an order whose Monday item is gone (deleted, archived, moved to another board) */
.gonebox{margin:0 0 12px;padding:10px 14px;border-radius:10px;border:1px solid #6b5a1e;background:#3a3010;color:#fde68a}
.gonebox.removed{border-color:#ef4444;background:#3a0f14;color:#fecaca;font-size:15px}
.sc-items.bad{color:#fecaca;font-weight:800}

/* v36: the "no artwork" window */
.modal.noartmodal{border-color:#ef4444;max-width:520px}
.modal.noartmodal h3{color:#fecaca}
.modal.noartmodal ul{margin:0;padding-left:20px;font-weight:700}
.modal.noartmodal p{margin:0}

/* v37: where the order form says the job is delivered (Wyffels SR signs) */
.deliverbox{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center;margin:0 0 12px;padding:12px 16px;border-radius:10px;border:2px solid #f59e0b;background:#33270a;color:#fde68a}
.deliverbox small{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#d9b45a}
.deliverbox .dv-to b{font-size:28px;font-weight:900;color:#fff;letter-spacing:.5px}
.deliverbox .dv-more{display:flex;flex-wrap:wrap;gap:6px 26px}.deliverbox .dv-more b{color:#fff;font-size:16px}
.deliverbox .dv-note{grid-column:1/-1;color:#fff;font-weight:700}
.deliverbox .dv-foot{grid-column:1/-1;font-size:13px}
.scanned .sc-rule.deliver{background:#f59e0b;color:#111}

/* v38: the Print label button on the delivery box */
.deliverbox .dv-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.deliverbox .dv-print{background:#f59e0b;color:#111;font-weight:800;font-size:15px;padding:8px 16px}
.deliverbox .dv-print:disabled{opacity:.6}
.deliverbox .dv-see{color:#fde68a;font-size:13px}

/* v39: the Proofs page and the "emailed to" line on a job */
.proofsent{font-size:13px;color:var(--muted)}.proofsent b{color:var(--text,#e8eef4)}
.proofbatch h3{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pb-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:10px}
.pb-facts small{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.pb-facts b{font-size:17px}.pb-facts b.w{color:#fde68a}.pb-facts b.ok{color:#86efac}.pb-facts b.chg{color:#fca5a5}
.pb-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.proofbatch details{margin-top:6px}.proofbatch summary{cursor:pointer;color:var(--muted)}
.pb-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px;margin-top:8px}
.pb-item{display:flex;flex-direction:column;padding:7px 10px;border-radius:8px;background:var(--panel2);border:1px solid #22324a;text-decoration:none;color:inherit}
.pb-item em{font-style:normal;font-size:12px;color:var(--muted)}
.pb-item.approved{border-color:#1f7a3d}.pb-item.approved em{color:#86efac}
.pb-item.changes{border-color:#d98a00}.pb-item.changes em{color:#fde68a}
.pb-log{font-size:13px;color:var(--muted);margin-top:6px;display:flex;flex-direction:column;gap:3px}.pb-log .bad{color:#fca5a5}

/* v40: Settings: a menu on the left, status cards, and an overview (Micky's layout) */
main:has(.setwrap),#view:has(> .setwrap){padding:0}
.setwrap{display:grid;grid-template-columns:262px minmax(0,1fr);min-height:calc(100vh - 57px)}
.setnav{border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,.12)}
.setnav h1{font-size:28px;font-weight:500;margin:6px 0 18px 14px}
.setnav a{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:8px;color:#c9d6e8;font-size:17px;text-decoration:none}
.setnav a svg{width:26px;height:26px;flex:none;color:#9db4d6}
.setnav a:hover{background:var(--panel2);color:#fff}
.setnav a.on{background:linear-gradient(90deg,#2f8f3f,#1f5a2c);color:#fff}.setnav a.on svg{color:#fff}
.setmain{padding:26px 28px 40px;min-width:0}
.set-h{font-size:28px;font-weight:500;margin:6px 0 16px}
.stcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:34px}
.stcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:10px;min-height:230px}
.stcard .st-h{display:flex;align-items:center;gap:16px}.stcard .st-h b{font-size:22px;font-weight:500}
.stcard .st-h i{width:26px;height:26px;border-radius:50%;background:#58c765;flex:none}
.stcard p{margin:0;font-size:18px;line-height:1.45;color:#b9c8dc;overflow-wrap:anywhere;flex:1}
.stcard .st-btn{align-self:flex-start;min-width:126px;text-align:center;padding:10px 22px;border:2px solid #58c765;border-radius:8px;color:#7be08a;font-size:17px;text-decoration:none}
.stcard .st-btn:hover{background:rgba(88,199,101,.14)}
.stcard.bad{border:2px solid #f0545c}.stcard.bad .st-h i{background:#f0545c}.stcard.bad .st-btn{border-color:#f0545c;color:#ff7a80}.stcard.bad .st-btn:hover{background:rgba(240,84,92,.14)}
.stcard.warn{border:2px solid #f0a92e}.stcard.warn .st-h i{background:#f0a92e}.stcard.warn .st-btn{border-color:#f0a92e;color:#ffc766}.stcard.warn .st-btn:hover{background:rgba(240,169,46,.14)}
.set-two{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:26px;align-items:start}.set-two.one{grid-template-columns:minmax(0,640px)}
.setpanel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}
.setpanel h2{font-size:27px;font-weight:500;margin:0 0 8px}.setpanel > p.muted{font-size:17px;margin:0 0 14px}
.ovrules{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:18px}
.ovrules th{text-align:left;font-weight:400;font-size:17px;color:#c9d6e8;padding:20px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.ovrules td{padding:22px 14px;font-size:17px;vertical-align:top;border-bottom:1px solid var(--line)}.ovrules tr:last-child td{border-bottom:0}
.ovrules td b{font-weight:700;color:#fff}.ovrules .pill{font-size:15px;padding:5px 11px;border-radius:6px}.ovrules .pill.warn{background:#f0a92e;color:#1b1b1b}
.switch{display:inline-flex;align-items:center;gap:14px;cursor:pointer;white-space:nowrap;font-size:17px;color:var(--text)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch i{width:56px;height:30px;border-radius:99px;background:#33465f;position:relative;flex:none;transition:background .15s}
.switch i::after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
.switch input:checked + i{background:#58c765}.switch input:checked + i::after{left:30px}
.switch input:focus-visible + i{outline:2px solid #fff;outline-offset:2px}
.btn.big{display:inline-block;font-size:18px;padding:12px 22px;border-radius:6px;text-decoration:none;color:#fff}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin:6px 0 22px}
.mcard{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.14)}
.mcard b{font-size:17px;font-weight:500;color:var(--text)}.mcard input{width:100%;font-size:20px;padding:10px 14px}.mcard small{font-size:16px;color:#b9c8dc}
.setmain .section{border:1px solid var(--line);border-radius:10px}.setmain .section > h3{font-size:16px;padding:14px 18px}.setmain .section .body{padding:18px}
@media (max-width:1100px){.setwrap{grid-template-columns:1fr}.setnav{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:12px}.setnav h1{flex-basis:100%;margin:0 0 6px 4px;font-size:22px}.setnav a{padding:8px 12px;font-size:15px;gap:8px}.setnav a svg{width:20px;height:20px}.set-two{grid-template-columns:1fr}.setmain{padding:18px 14px}}

/* v41: the "Send the proof to the customer" window on an order */
.proofmodal{max-width:640px}
.proofmodal .pm-step{display:flex;flex-direction:column;gap:12px}.proofmodal .pm-step[hidden]{display:none}
.proofmodal label.block input,.proofmodal label.block textarea{width:100%;font-size:15px}
.pm-jobs{display:flex;flex-direction:column;gap:6px}.pm-jobs small{font-size:12px;color:var(--muted)}
.pm-jobs label{display:flex;gap:8px;align-items:center;font-size:15px}.pm-jobs label.off{color:var(--muted)}.pm-jobs em{font-style:normal;color:var(--muted);font-size:13px}
.pm-jobs input{width:18px;height:18px}
.pm-err{color:#fca5a5;font-weight:600;min-height:1.2em}
.pm-head{display:flex;gap:10px;font-size:14px}.pm-head span{color:var(--muted);min-width:60px}
.pm-mail pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.5 system-ui,sans-serif;background:#0b1626;border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:10px 0;max-height:46vh;overflow:auto}
.pm-done .okbox input{width:100%;margin-top:6px}

/* v42: Help: topics on the left, a video and the steps with pictures */
.helpnav a{align-items:flex-start;gap:12px;padding:10px 14px;font-size:16px}
.helpnav a b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--panel2);color:#fff;display:grid;place-items:center;font-size:14px}
.helpnav a.on b{background:#ffd400;color:#1b1b1b}
.helpnav a span{display:flex;flex-direction:column;line-height:1.25}.helpnav a small{font-size:12px;color:#9db4d6}.helpnav a.on small{color:#d8f5dd}
.helpdl{display:flex;flex-direction:column;gap:8px;margin-top:18px;padding:16px 4px 0;border-top:1px solid var(--line)}.helpdl .btn{text-align:center;text-decoration:none}
.helpmain{max-width:1280px}
.helphead{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}.helphead > div{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.helphead .set-h{margin:0}.helphead .btn{text-decoration:none}
.helpvideo{width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;border:1px solid var(--line);display:block}
.helpnote{font-size:15px;margin:10px 0 22px}
.helpsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.helpsteps li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
.hs-head{display:flex;gap:16px;align-items:flex-start}
.hs-head > b{flex:none;width:46px;height:46px;border-radius:50%;background:#ffd400;color:#1b1b1b;font-size:24px;display:grid;place-items:center}
.hs-head h3{margin:4px 0 4px;font-size:23px;font-weight:600;line-height:1.25}.hs-head p{margin:0;font-size:18px;line-height:1.45;color:#c9d6e8}
.helpsteps img{width:100%;height:auto;aspect-ratio:16/9;border-radius:8px;border:1px solid var(--line);margin-top:14px;display:block;background:#0b1626}
.helpnext{display:flex;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap}.helpnext .btn{text-decoration:none}
@media (max-width:1100px){.helpnav a small{display:none}.helpdl{flex-direction:row;border-top:0;margin:0;padding:0;flex-basis:100%}.hs-head h3{font-size:19px}.hs-head p{font-size:16px}}
@media print{.helpnav,.helpvideo,.helpnext,.helphead .btn{display:none}}
.helpafter{display:block;text-align:center;margin-top:10px}

/* v43: the list of a dropdown is always dark with light letters. A dropdown with a see-through box (the machine picker
   on an order) used to open as light letters on the computer's white list. */
select{color-scheme:dark}
select option,select optgroup{background:#0c1a2e;color:#eef3fa}
select option:disabled{color:#7f93b0}

/* v44: My jobs: every card the same size (Micky). All rows are as tall as the tallest card, and the buttons sit at the
   bottom of the card so they line up across the page. On a phone (one column) cards keep their own height. */
@media (min-width:700px){
  .myjobs{align-items:stretch;grid-auto-rows:1fr}
  .myjobs .jobcard .j-actions{margin-top:auto}
}