: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-pnote{font-size:12px;margin-top:3px;padding:3px 6px;border:1.5px solid #111;white-space:pre-line;overflow-wrap:anywhere} /* production note on the packing checklist (Oct 13 2026) */
.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:#579bfc}
.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}
}

/* v45: the pricing area of an order. Only people who may see prices get it. */
.pricing .pr-table{width:100%;border-collapse:collapse;font-size:15px}
.pricing .pr-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:6px 10px;border-bottom:1px solid var(--line)}
.pricing .pr-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.pricing .pr-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pricing .pr-table th:nth-child(2){width:80px}.pricing .pr-table th:nth-child(3),.pricing .pr-table th:nth-child(4){width:130px}.pricing .pr-table th:nth-child(5){width:170px}
.pricing .pr-in{width:110px;text-align:right;font-variant-numeric:tabular-nums;padding:6px 8px}
.pricing .pr-in.empty{border-color:var(--amber)}
.pricing .pr-label{width:min(420px,60%);padding:6px 8px}
.pricing #pr-new-label{width:100%}
.pricing .pr-src{font-size:12px;color:var(--muted);margin-left:6px;white-space:nowrap}
.pricing .pr-src.web{color:#9fd0ff}.pricing .pr-src.mon{color:#c9b6ff}
.pricing .pr-tag{font-size:11px;font-weight:700;letter-spacing:.04em;background:#3b2a63;color:#e3d6ff;border-radius:4px;padding:2px 6px;margin-left:4px}
.pricing .pr-note{font-size:13px;color:#ffd98a;margin-top:3px}.pricing .pr-note.bad{color:#ffb4ae}
.pricing .pr-warn{color:#ffd27a;font-weight:600;margin-left:6px}
.pricing .pr-rush td{background:rgba(245,154,35,.08)}.pricing .pr-rush.off td{background:none;color:var(--muted)}
.pricing .pr-add td{border-bottom:0;padding-top:12px}
.pricing tfoot td{border-bottom:0;padding:5px 10px;color:var(--muted)}
.pricing tfoot tr:first-child td{padding-top:12px;border-top:2px solid var(--line)}
.pricing tfoot .pr-total td{font-size:20px;font-weight:700;color:var(--text)}
.pricing .pr-paid{background:#17352a;color:#b9f3c8;border-left:4px solid var(--green);padding:10px 14px;border-radius:4px;margin-bottom:12px}
.pricing .pr-paid .small{font-size:13px;opacity:.85;margin-top:2px}
.pricing .pr-inv{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pricing .pr-inv-l{font-weight:700}
.pricing .pr-inv .pill{font-size:14px;padding:5px 12px}
.pricing .pr-inv .grow{flex:1}
.pricing .pr-no input{width:130px;padding:6px 8px;margin-left:4px}
/* a phone: the table keeps its shape and slides sideways inside its box */
@media (max-width:700px){.pricing .tablewrap{overflow-x:auto}.pricing .pr-table{min-width:620px}.pricing .pr-in{width:84px}.pricing .pr-src{white-space:normal;display:block;margin-left:0}}

/* v46: My jobs cards at their normal size again (Micky: "they are huge, make them normal... if needs to be bigger just
   cut that info, I can always click open order"). Every part that used to grow is now held to a fixed size: the title is
   2 lines, the finishing chips are one row, and everything under the machine line (stuck, check specs, files, shop notes,
   material, customer notes) is one block of single lines, cut after 3. Cards in a row are still the same height and the buttons still line up. */
.jobcard h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jobcard .j-cust{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jobcard .fin-chips{flex-wrap:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.jobcard .fin-chip{white-space:nowrap;flex:none}
.j-more{font-size:14px;line-height:22px;max-height:66px;overflow:hidden;position:relative;color:#c9d6e8}
.j-more .jm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.j-more .jm.warn{color:#ffd98a}.j-more .jm.warn b{color:#ffe7a8}
.j-more .jm.pn{color:#bcd9ff}
.j-more .jm.bad{color:#ffb9b4}.j-more .jm.bad b{color:#ffd0d0}
.j-more.cut::after{content:'more on the order';position:absolute;right:0;bottom:0;line-height:22px;padding:0 0 0 46px;font-size:12px;color:var(--muted);background:linear-gradient(90deg,transparent,var(--panel) 40px)}

/* v47: choose the files that go on a proof; delete a proof */
.proofmodal{max-width:760px}
.pm-files{margin:2px 0 8px 26px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:rgba(255,255,255,.02)}
.pm-files.off{opacity:.4;pointer-events:none}
.pm-fhead{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:8px}.pm-fhead span{flex:1}.pm-fhead b{color:var(--text)}
.pm-fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;max-height:300px;overflow:auto}
.pm-jobs label.pm-file{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 6px;align-items:start;padding:6px;border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:12px}
.pm-jobs label.pm-file:has(input:checked){border-color:var(--green);background:rgba(52,194,74,.08)}
.pm-file .pm-th{grid-column:1 / -1;height:74px;background:#fff;border-radius:4px;display:grid;place-items:center;overflow:hidden;color:#33496a;font-weight:700}
.pm-file .pm-th img{max-width:100%;max-height:74px;object-fit:contain;display:block}
.pm-file .pm-fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.linkbtn.proofdel{align-self:flex-start;color:#ffb4ae;font-size:13px}
.btn.ghost.danger{color:#ffb4ae;border-color:#6b2a2a}

/* v48: the files of a job as small pictures under the big one (the pages of a PDF already sit there) */
.artview{display:flex;flex-direction:column;gap:8px;min-width:0}
.filestrip{min-width:0}
.filestrip small{display:block;font-size:12px;color:var(--muted);margin:2px 2px 4px}
/* every file is in sight: the row wraps; a job with a great many files scrolls inside its own box after 3 rows */
.fs-row{display:flex;flex-wrap:wrap;gap:10px 8px;max-height:336px;overflow-y:auto;padding:2px 2px 6px;align-items:flex-start}
.fs-row button{flex:0 0 auto;width:112px;background:none;border:0;padding:0;cursor:pointer;color:var(--text);font:inherit;text-align:left}
.fs-pic{position:relative;display:grid;place-items:center;height:80px;background:#fff;border:3px solid transparent;border-radius:6px;overflow:hidden;color:#334155;font-weight:800;font-size:16px}
.fs-row button.on .fs-pic{border-color:var(--blue)}
.fs-row button:hover .fs-pic{border-color:#f97316}.fs-row button.on:hover .fs-pic{border-color:var(--blue)}
.fs-pic > img,.fs-pic > canvas,.fs-pic > .ph{position:absolute;inset:0;width:100%;height:100%}
.fs-pic > img,.fs-pic > canvas{object-fit:contain;display:block;padding:2px}
.fs-pic > .ph{display:grid;place-items:center;margin:0;background:transparent;color:#5b6b80;font-size:16px}
.fs-pic .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}
.fs-pic .fs-pg{position:absolute;top:2px;left:3px;background:#e2445c;color:#fff;font-size:10px;padding:0 5px;border-radius:6px;font-weight:700}
.fs-name{display:block;font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c9d6e8}
.fs-row button.on .fs-name{color:#fff;font-weight:700}

/* v49: an order on hold (the same as Stuck on My jobs and Stations), put on and taken off from the order page */
.holdbox{display:flex;gap:16px;align-items:center;background:#4a1616;border:2px solid var(--priority-late);border-left-width:8px;color:#ffe1df;border-radius:8px;padding:14px 18px;margin-bottom:14px}
.holdbox .hb-main{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.holdbox .hb-main > b{font-size:22px;letter-spacing:.04em;color:#fff}
.holdbox .hb-why{font-size:18px;font-weight:700;overflow-wrap:anywhere}
.holdbox .hb-who,.holdbox .hb-note,.holdbox .hb-row i{font-size:13px;color:#f3b9b4;font-style:normal}
.holdbox .hb-row{font-size:15px;overflow-wrap:anywhere}
.holdbox .btn{background:#fff;color:#7a1410;font-weight:700;white-space:nowrap}
.holdline{background:rgba(239,68,68,.14);border-left:4px solid var(--priority-late);color:#ffd0d0;padding:8px 12px;border-radius:4px;font-size:14px;overflow-wrap:anywhere}
.holdline b{color:#fff;margin-right:6px}.holdline i{font-style:normal;color:#f3b9b4;font-size:12px;margin-left:6px}.holdline .linkbtn{margin-left:10px;color:#fff}
.line > .holdline{margin:0}
.held-chip{background:var(--priority-late);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:6px}
.hold-jobs{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.hold-jobs small{color:var(--muted);font-size:12px}.hold-jobs label{display:flex;gap:8px;align-items:center;font-size:15px}.hold-jobs input{width:18px;height:18px}
@media (max-width:700px){.holdbox{flex-direction:column;align-items:stretch}}

/* v50: a job on hold is not worked on: its controls are off */
.btn.held-off{opacity:.6;cursor:not-allowed;color:#ffb4ae;border-color:#6b2a2a !important}
.line.is-held select:disabled{opacity:.55;cursor:not-allowed}
.viewer-bar .held-chip{align-self:center}

/* v51: the rush dropdown of an order, next to "Put on hold" */
.rushpick{display:inline-flex;align-items:center;gap:6px;margin-left:6px;font-size:13px;font-weight:700;vertical-align:middle}
.rushpick span{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.rushpick select{padding:5px 8px;font-size:13px;font-weight:700;border-radius:6px}
.rushpick.on select{border:2px solid var(--rc,var(--red));box-shadow:0 0 0 2px color-mix(in srgb,var(--rc,var(--red)) 30%,transparent)}
.rushmodal .rm-change,.blindmodal .rm-change{display:flex;gap:12px;align-items:center;font-size:17px;margin:4px 0}
.rushmodal .rm-change span,.blindmodal .rm-change span{padding:6px 12px;border-radius:8px;background:var(--panel2)}
.rushmodal .rm-change .to{background:#3a1420;color:#fff;font-weight:800;border:1px solid var(--priority-late)}
.rushmodal .rm-what,.blindmodal .rm-what{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:#c9d6e8}
.rushmodal .rm-what li.warn,.blindmodal .rm-what li.warn{color:#ffd98a}
.rushmodal #rm-due{width:100%;font-size:16px;margin-top:4px}

.lines-title .btn{white-space:nowrap}

/* v52 feet or inches */
.unitmodal{max-width:520px}
.um-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 12px}
.um-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 10px;border-radius:12px;border:2px solid var(--line,#2a3a5c);background:rgba(255,255,255,.04);color:inherit;cursor:pointer;font:inherit}
.um-opt b{font-size:26px;line-height:1.1}
.um-opt span{font-weight:800;letter-spacing:.08em;font-size:13px;color:#ffcb00}
.um-opt small{opacity:.7;font-size:12px}
.um-opt:hover,.um-opt:focus-visible{border-color:#ffcb00;background:rgba(255,203,0,.1);outline:none}
@media (max-width:480px){.um-pick{grid-template-columns:1fr}}

/* v53 blind ship */
.blindbtn{background:#579bfc;border-color:#4387e8;color:#04142e;font-weight:800}
.blindbtn:hover{background:#7ab0ff}
.shipbar.is-blind .sb-method b{color:#8fc0ff}
.blindbox{margin:12px 0;padding:14px 16px;border-radius:12px;border:2px solid #579bfc;background:rgba(87,155,252,.12);display:flex;flex-direction:column;gap:10px}
.blindbox.need{border-color:#e2445c;background:rgba(226,68,92,.12)}
.bb-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.bb-head b{font-size:20px;letter-spacing:.06em;color:#8fc0ff}
.blindbox.need .bb-head b{color:#ff8a9b}
.bb-from{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.bb-from small{flex-basis:100%;text-transform:uppercase;letter-spacing:.08em;font-size:11px;opacity:.75}
.bb-from b{font-size:16px}
.bb-from b.bad{color:#ff8a9b}
.blindmodal{max-width:640px}
.blindmodal .bm-lead{margin:14px 0 8px}
.blindmodal .bm-form{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.blindmodal .bm-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;grid-column:span 2}
.blindmodal .bm-form label.wide{grid-column:span 4}
.blindmodal .bm-form label.tiny{grid-column:span 1}
.blindmodal .rm-change .to.blind{background:rgba(87,155,252,.22);border:1px solid #579bfc;color:#cfe3ff;font-weight:800}
.blindmodal .rm-change{margin:12px 0 4px}
.blindmodal .rm-what{margin-top:14px}
.shipaddr.blindfrom{border-top:2px solid #579bfc;background:rgba(87,155,252,.08)}
.shipaddr.blindfrom.need{border-top-color:#e2445c;background:rgba(226,68,92,.08)}
.bf-head{grid-column:1/-1;flex-basis:100%;display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.bf-head b{color:#8fc0ff;letter-spacing:.04em}
.bf-head span{font-size:12px;opacity:.8}
@media (max-width:560px){.blindmodal .bm-form{grid-template-columns:1fr 1fr}.blindmodal .bm-form label,.blindmodal .bm-form label.wide{grid-column:span 2}.blindmodal .bm-form label.tiny{grid-column:span 1}}
.cl-blind{border:3px solid #111;padding:8px 12px;margin-bottom:10px;font-size:15px;font-weight:700;color:#111;background:#fff}
.cl-blind b{display:inline-block;background:#111;color:#fff;padding:2px 10px;margin-right:10px;letter-spacing:.08em}
.modal{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto}
.sb-pill.blind-off{opacity:.75;font-style:italic;white-space:normal}
.shipblind{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:10px 0;padding:10px 14px;border-radius:10px;border:1px dashed #579bfc;background:rgba(87,155,252,.07)}
.shipblind span{font-size:14px;opacity:.9}
.bf-off{margin-top:6px}
.bm-found{color:#7ee2a8}

/* v54 production note: the yellow box at the top of Production */
.pnote-alert{display:flex;gap:14px;align-items:flex-start;margin:0 0 12px;padding:12px 16px;border-radius:8px;border:1.5px solid #eab308;border-left-width:5px;background:rgba(234,179,8,.10)}
.pnote-alert .pa-ico{flex:none;width:30px;height:30px;border-radius:50%;background:#facc15;color:#1a1400;font-weight:900;font-size:19px;line-height:30px;text-align:center;margin-top:2px}
.pnote-alert .pa-main{flex:1;min-width:0}
.pnote-alert .pa-title{display:block;color:#facc15;font-size:16px;margin-bottom:2px}
.pnote-alert .pa-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.4;color:#fff}
.pnote-alert .pa-meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-top:4px;font-size:13px;color:#8fb8e6}
.pnote-alert .pa-meta .linkbtn{color:#b9c8dc;font-size:13px}
.pnote-alert.flash{animation:pnflash 1.1s ease-out}
@keyframes pnflash{0%{box-shadow:0 0 0 0 rgba(250,204,21,.9)}100%{box-shadow:0 0 0 14px rgba(250,204,21,0)}}
.pnote-pill{display:inline-block;margin-left:10px;padding:3px 10px;border-radius:999px;border:0;background:#facc15;color:#1a1400;font-weight:800;font-size:12px;cursor:pointer;white-space:nowrap;vertical-align:middle}
.pnote-pill:hover{background:#fde047}
@media print{.pnote-alert{border-color:#000;background:#fff}.pnote-alert .pa-title,.pnote-alert .pa-body,.pnote-alert .pa-meta{color:#000}}

/* v55 imprint signs: remake, and the signs waiting for a proof */
.imprintbox{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 12px;border-radius:8px;border:1px solid #2a4368;background:rgba(74,163,255,.08);font-size:14px}
.imprintbox.warn{border:1.5px solid #eab308;background:rgba(234,179,8,.10)}
.imprintq{border:1.5px solid #eab308}
.iq-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.iq-sign{display:inline-block;padding:6px 12px;border-radius:999px;background:#16304a;border:1px solid #2a4368;color:#e6f0ff;font-weight:700;text-decoration:none;font-size:14px}
.iq-sign:hover{border-color:#4aa3ff}
.iq-sign.fixed{border-color:#22c55e}
.iq-sign small{font-weight:600;color:#7ee2a8;margin-left:4px}
.iq-todo{margin-bottom:12px;padding:10px 12px;border-radius:8px;border:1px solid #e2445c;background:rgba(226,68,92,.10);font-size:14px;display:flex;flex-direction:column;gap:4px}
.iq-todo small{opacity:.8}
.iq-note textarea{width:100%;margin-top:4px}
.imprintq .pb-actions{margin-top:10px}

/* v56: an order placed by the customer on the Quick Order page */
.quickbox{margin:12px 0;padding:12px 16px;border-radius:12px;border:2px solid #22c55e;background:rgba(34,197,94,.10);display:flex;flex-direction:column;gap:6px}
.quickbox.test{border-color:#facc15;background:rgba(250,204,21,.12)}
.quickbox .qb-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.quickbox .qb-head b{font-size:16px;letter-spacing:.5px;color:#7ee2a0}
.quickbox.test .qb-head b{color:#facc15}
.quickbox .qb-head span{font-size:13px;color:#b9c6d6}
.quickbox .qb-who,.quickbox .qb-row{font-size:14px}
.quickbox .qb-fix{margin-top:4px;padding:10px 12px;border-radius:8px;background:#e2445c;color:#fff;font-size:14px}
.quickbox .qb-warn{margin-top:4px;padding:8px 12px;border-radius:8px;background:rgba(234,179,8,.18);color:#ffe08a;font-size:14px}

/* v57: an order blocked until the customer approves its proof */
.proofhold{margin:12px 0;padding:14px 16px;border-radius:12px;border:2px solid #f59e0b;background:rgba(245,158,11,.12);display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.proofhold .ph-main{display:flex;flex-direction:column;gap:5px;min-width:0}
.proofhold .ph-main>b{font-size:17px;letter-spacing:.5px;color:#fbbf24}
.proofhold .ph-row{font-size:14px}.proofhold .ph-row i{color:#b9c6d6;font-style:normal;margin-left:6px;font-size:13px}
.proofhold .ph-note{font-size:13px;color:#d6dde6;margin-top:2px}

/* v58: printing at the shipping bench from any computer */
.shipprint{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.shipprint .muted{flex-basis:100%}

/* v59: insurance on the label screen */
.shipbox label.ins input{width:120px}
.shipbox label.ins.on{color:var(--amber,#f5b942)}
.shipbox label.ins.on input{border-color:var(--amber,#f5b942)}
.insnote{margin:6px 0 10px}
.insbox{border:1px solid var(--amber,#f5b942);border-radius:8px;padding:8px 12px;margin:8px 0;font-size:14px}
.tag-ins{color:var(--amber,#f5b942);font-size:13px}
.okline{margin-top:8px;color:var(--green);font-weight:600}

/* v60: the QR code of the order on the packing checklist */
.cl-right{display:flex;align-items:flex-start;gap:12px}
.cl-qr{width:1in;text-align:center;flex:none}
.cl-qr img{display:block;width:1in;height:1in}
.cl-qr small{font-size:6.5px!important;letter-spacing:.04em;margin-top:1px}

/* v61: Needs prepress switch, and the rush level on the cards */
.sw-count{display:inline-block;min-width:22px;text-align:center;font-weight:700;font-size:12px;padding:1px 6px;border-radius:99px;background:var(--panel2);color:var(--text)}
.sw-count:empty{display:none}
.switch[aria-checked=true] .sw-count{background:var(--green);color:#06210b}
.noprinter{display:block;font-size:11.5px;color:var(--amber);white-space:nowrap}
.pc-mach .noprinter{display:inline}
.pbadge.rushlvl{background:var(--priority-rush);color:#231400;white-space:nowrap;min-width:0;font-weight:800;letter-spacing:.02em}

/* v62: pick several orders on Order Management and change them together */
.selcell{width:34px;text-align:center;padding-left:10px!important;padding-right:4px!important}
.selcell input,.pc-sel input{width:18px;height:18px;accent-color:var(--green);cursor:pointer}
.pc-sel{display:inline-flex;align-items:center;margin-right:2px;cursor:pointer}
tr.orow.picked td{background:rgba(63,178,79,.10)}
.pcard.picked{outline:2px solid var(--green);outline-offset:-1px}
.bulkbar{position:fixed;left:64px;right:0;bottom:0;z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 20px;background:#0f1d33;border-top:2px solid var(--green);box-shadow:0 -8px 30px rgba(0,0,0,.45)}
.bulkbar[hidden]{display:none}
.bulkbar .bk-n{display:flex;align-items:center;gap:8px;font-size:15px}
.bulkbar .bk-n b{font-size:20px}
.bulkbar label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.bulkbar label.chk{color:var(--text)}
.bulkbar label.chk input{width:18px;height:18px;accent-color:var(--green)}
.bulkbar select{min-width:150px}
.bulkbar .bk-sep{width:1px;align-self:stretch;background:var(--line,#24344f)}
body.has-bulkbar #view{padding-bottom:110px}
@media (max-width:900px){.bulkbar{left:0}}
@media print{.bulkbar{display:none!important}}

/* v63: Proofs page: the picture of each proof's file, and a button to its order */
.pb-items{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:8px}
.pb-item{flex-direction:row;align-items:flex-start;gap:10px;padding:8px}
.pb-item .pic.sm,.pb-pic{width:96px;height:96px;flex:none;border-radius:6px}
.pb-pic{display:block;cursor:zoom-in}
.pb-pic .pic.sm{width:100%;height:100%}
.pb-pic .pic.sm img,.pb-pic .pic.sm canvas{width:100%;height:100%;object-fit:contain}
.pb-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.pb-name{color:inherit;text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.pb-name:hover{text-decoration:underline}
.pb-open{align-self:flex-start;margin-top:4px}

/* v64: the Material drop-down of Order Management */
.filterbar #mat{max-width:230px}
.filterbar #mat.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}

/* v65: ShipStation's delivery date on the label screen */
.rate{grid-template-columns:24px 190px minmax(0,1fr) auto auto}
.rate .rt-eta{font-size:13px;color:#9fd3ff;white-space:nowrap;padding-right:6px;text-align:right}
@media (max-width:900px){.rate{grid-template-columns:24px minmax(0,1fr) auto auto}}
.rate .rt-eta em{font-style:normal;font-weight:700}
.rate .rt-eta.ok em{color:#86efac}
.rate .rt-eta.late{color:#fecaca}.rate .rt-eta.late em{color:#fff;background:var(--red);padding:1px 6px;border-radius:4px}
.rate .rt-eta.none{color:var(--muted)}
.etabox{border:1px solid #2f6ea5;border-radius:8px;padding:8px 12px;margin:8px 0;font-size:14px}
.etabox.late{border-color:var(--red);background:rgba(226,82,74,.12)}
.tag-eta{color:#9fd3ff;font-size:13px}

/* v66: the label of one item of an order with several (Oct 7 2026) */
.prow.itemlbl .btn.small{padding:4px 10px;font-size:13px}
.prow.itemlbl .dv-see{color:var(--muted);font-size:13px}

/* v67: the Shipping row of the pricing area (Oct 7 2026) */
.pr-table tr.pr-ship.off td{opacity:.75}
.pr-pack{margin-top:5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pr-pack label{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.pr-pack .pr-in{width:84px}

/* v68: Blind Ship and rush in red on the packing checklist, as on the printed slip (Oct 8 2026) */
.cl-blind{background:#d91212;border-color:#d91212;color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cl-blind b{background:#fff;color:#d91212}
.cl-rush{background:#d91212;border-color:#d91212;color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* ---- ship to many addresses (lib/shipMany.js) ---- */
.manybar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;background:var(--panel);border:1px dashed var(--line);border-radius:10px;padding:10px 14px;margin:0 0 12px}
.manybar.on{border:2px solid var(--blue);background:#0f2038}
.manyhead{margin:6px 0 10px}
.manysum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 12px}
.manysum>div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.manysum b{display:block;font-size:24px}
.manysum span{color:var(--muted);font-size:12px}
.manysum .bad{border-color:var(--amber)} .manysum .bad b{color:var(--amber)}
.manysum .good b{color:#7ee2a8}
.manyfile{margin:10px 0 6px}
.manymap{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 12px;margin:8px 0}
.manymap label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.manymap select,.manymap input{width:100%}
.manycount{margin:10px 0 6px}
.bad{color:#ff9b93}
.tablewrap{overflow-x:auto;max-width:100%}
.manytable{width:100%;border-collapse:collapse;font-size:13px}
.manytable th{text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);padding:6px 8px;white-space:nowrap}
.manytable td{border-bottom:1px solid var(--line);padding:6px 8px;vertical-align:top}
.manytable tr.st-error td,.manytable tr.st-dup td{background:rgba(226,82,74,.10)}
.manytable tr.st-have td{opacity:.6}
.manytable tr.st-done td{background:rgba(63,178,79,.08)}
.manytable td.acts{white-space:nowrap}
.manytable input.wt{width:70px}
.manyedit{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 10px;align-items:end}
.manyedit label{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}
.manyrun .bar{height:8px;background:rgba(255,255,255,.12);border-radius:99px;margin-top:8px;overflow:hidden}
.manyrun .bar i{display:block;height:100%;background:var(--green)}
/* ---- several orders in one box ---- */
.together-in{margin-top:12px;padding:10px 12px;border:2px dashed var(--blue);border-radius:10px}
.together-in .ti-head{font-weight:700;margin-bottom:6px}
.together-in .ti-order{display:flex;gap:8px;align-items:flex-start;margin:6px 0}
.together-in .ti-order.off{opacity:.6}
.together-in .ti-order em{color:#ffd27a;font-style:normal}
.together-in .shipitem.with{margin-left:22px}
.okbox.together a{color:#fff;text-decoration:underline}
.attachbox .lb-row{margin-top:6px}
/* ---- finished and out of the shop (lib/handoff.js) ---- */
.donechip{display:inline-flex;align-items:center;gap:4px;background:var(--green);color:#fff;font-weight:800;letter-spacing:.04em;padding:3px 14px;border-radius:99px;font-size:15px}
.donebanner{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;background:#17a44a;color:#fff;border-left:8px solid #b9f3c8;border-radius:10px;padding:16px 22px;margin:10px 0 14px}
.donebanner .db-check{width:72px;height:72px;border-radius:50%;background:#fff;color:#17a44a;display:grid;place-items:center;flex:none}
.donebanner .db-check svg{width:44px;height:44px}
.donebanner .db-main{flex:1;min-width:240px}
.donebanner h2{margin:0;font-size:34px;line-height:1.1;font-weight:800;color:#fff}
.donebanner .db-sub{font-size:17px;margin-top:6px;color:#eafff0}
.donebanner .db-sub a{color:#fff;text-decoration:underline}
.dot-sep{opacity:.7;margin:0 4px}
.donebanner .db-track{background:#fff;color:#0b5f2a;border-radius:12px;padding:10px 16px;display:flex;flex-direction:column;gap:2px;max-width:100%}
.donebanner .db-track small{font-weight:700;font-size:12px;letter-spacing:.03em}
.donebanner .db-track.muted-on{color:#3c6b4c}
.trk{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.trk .mono{font-size:15px;font-weight:700;word-break:break-all}
.trk.big .mono{font-size:24px;letter-spacing:.02em}
.trk svg{flex:none}
a.trk:hover .mono{text-decoration:underline}
.sb-done{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--green);background:#0f2a1a;color:#fff;border-radius:8px;padding:6px 12px;font-size:16px}
.sb-done svg{width:22px;height:22px;background:var(--green);border-radius:50%;padding:3px;color:#fff}
.shipped-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;border:2px solid var(--green);background:#0f2a1a;border-radius:8px;padding:6px 14px;margin:6px 0 10px;font-size:16px}
.shipped-strip>svg{width:22px;height:22px;background:var(--green);border-radius:50%;padding:3px;color:#fff}
.shipped-strip>b{color:#7ee2a8;font-size:18px}
.shipped-strip .trk{background:#fff;color:#0b5f2a;border-radius:8px;padding:2px 10px}
.shipped-strip .trk svg{width:18px;height:18px}
.shipped-strip .muted-on{color:#cfe9d7}
.step.final .dot{width:40px;height:40px;margin-top:-8px;box-shadow:0 0 0 6px rgba(63,178,79,.25)}
.step.final .final-l{display:block;color:#7ee2a8;font-weight:800;font-size:16px}
@media (max-width:640px){.donebanner h2{font-size:24px}.donebanner .db-check{width:52px;height:52px}.donebanner .db-check svg{width:32px;height:32px}.trk.big .mono{font-size:18px}}

/* ---- To invoice (lib/invoicing.js), Micky's design of Oct 10 2026 ---- */
.invtop{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 14px}
.invtop h2{margin:0 8px 0 0;font-size:28px}
.invtop input[type=search]{min-width:220px;flex:1;max-width:400px}
.invtop .sp,.invbox-h .sp,.invbar .sp,.ic-top .sp,.cghead .sp{flex:1}
.invtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 14px}
.itab{display:flex;align-items:center;gap:16px;text-align:left;background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:14px 22px;color:var(--text);cursor:pointer}
.itab b{font-size:38px;font-weight:800;min-width:44px}
.itab span{display:flex;flex-direction:column}
.itab strong{font-size:18px;font-weight:600}
.itab small{color:var(--muted);font-size:14px}
.itab.amber b{color:#f5a524}.itab.green b{color:#33d17a}.itab.blue b{color:var(--muted)}
.itab.amber.on{border-color:#f5a524;background:#2d2511}.itab.amber.on strong{color:#f5a524}
.itab.green.on{border-color:#33d17a;background:#0f2a1a}.itab.green.on strong{color:#7ee2a8}
.itab.blue.on{border-color:var(--blue);background:#0f2038}
.idot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;margin-right:8px;vertical-align:middle}
.idot.amber{background:#f5a524}.idot.green{background:#33d17a}.idot.blue{background:var(--blue)}
.invbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:96px}
.invbox-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:14px 20px;border-bottom:1px solid var(--line)}
.invbox-h>b{font-size:18px}
.invbox-h select{width:auto}
.invt{width:100%;border-collapse:collapse;font-size:15px}
.invt th{text-align:left;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.invt td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.invt th.r,.invt td.r{text-align:right}
.invt td.ck,.invt th.ck{width:34px;text-align:center}
.invt input[type=checkbox],.icard input[type=checkbox],.cghead input[type=checkbox],.invbar input[type=checkbox]{width:18px;height:18px}
.invt tr.ghead td{background:#13233a;font-size:16px;padding:10px}
.invt tr.ghead td.r{white-space:nowrap}
.gtoggle{background:none;border:0;color:var(--muted);font-size:14px;padding:0 6px 0 0;cursor:pointer}
.gname{font-weight:700}.gcount{color:var(--muted)}
.gpill{display:inline-block;border-radius:99px;padding:3px 12px;font-weight:700;font-size:14px;margin-right:6px}
.gpill.amber{background:#3a2e10;color:#f5a524}.gpill.green{background:#123821;color:#7ee2a8}.gpill.blue{background:#13304d;color:#9cc6ee}
.invt tr.jrow.on td{background:rgba(47,155,214,.08)}
.invt td.ono{white-space:nowrap}.invt td.ono a{color:#7fb6ff;font-weight:600}
.invt td.ijobc small{display:block}
.invt td.fin{white-space:nowrap;color:var(--muted)}
.invt td.act{white-space:nowrap}
.setqty{color:#f5a524;font-weight:700}
.openlink{color:var(--muted)}
.pbox{display:inline-flex;align-items:center;gap:2px;border:2px solid;border-radius:6px;padding:0 8px;min-width:120px;height:36px}
.pbox span{opacity:.8}
.pbox input{background:none;border:0;color:inherit;font-weight:700;font-size:16px;text-align:right;width:100%;padding:0;outline:none}
.pbox.amber{border-color:#d08b10;background:#2b220f;color:#f5c66b}
.pbox.amber input::placeholder{color:#d9a542}
.pbox.green{border-color:#2fbf63;background:#0f2a1a;color:#fff}
.pbox.ro{opacity:.95}.pbox.ro input{cursor:default}
.pbox.saved{box-shadow:0 0 0 3px rgba(51,209,122,.25)}
.pbox:focus-within{box-shadow:0 0 0 3px rgba(47,155,214,.45)}
.invfoot{padding:14px 20px;color:var(--muted)}
.invfoot .linkbtn{font-size:inherit;color:#7fb6ff}
.invempty{padding:30px 20px;color:var(--muted)}
.invbar{position:fixed;left:84px;right:20px;bottom:16px;z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:#13233a;border:1px solid #2a4368;border-radius:12px;padding:12px 18px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.invbar>b{font-size:18px}
.invbar .vsep{width:1px;height:28px;background:var(--line)}
.btn.amberbtn{background:#f5a524;color:#1b1406;font-weight:700}
.invmodal{max-width:520px}
.invcardwrap{padding:12px 16px}
.cghead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 4px;font-size:16px}
.invcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:0 0 12px}
.icard{background:var(--panel2);border:1px solid var(--line);border-top:4px solid #f5a524;border-radius:10px;display:flex;flex-direction:column;overflow:hidden}
.icard.green{border-top-color:#33d17a}.icard.blue{border-top-color:var(--blue)}
.icard.on{outline:2px solid var(--blue)}
.ic-top{display:flex;align-items:center;gap:6px;padding:8px 10px}
.ic-top a{color:#7fb6ff;font-weight:600;font-size:13px}
.ic-body{padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.ic-body h3{margin:0;font-size:15px}
.ic-cust,.ic-qty{color:var(--muted);font-size:13px}
.ic-prices{display:flex;gap:6px;margin-top:4px}
.ic-prices .pbox{min-width:0;flex:1}
.ic-act{padding:0 10px 10px;text-align:right}
@media (max-width:900px){.invtabs{grid-template-columns:1fr}.invbar{left:12px;right:12px}}
/* the art of the job, as on the order cards: the white picture box with the file's first page (Micky, Oct 10 2026) */
.ic-pic{display:block;position:relative;margin:0 10px;aspect-ratio:4 / 3;background:#fff;border-radius:8px;overflow:hidden}
.ic-pic .pic.big{position:absolute;inset:0;width:100%;height:100%}

/* ---- QuickBooks invoice window and product settings ---- */
.qbmodal{max-width:980px}
.qbopts{display:flex;flex-wrap:wrap;gap:8px 20px}
.qbinv{border:1px solid var(--line);border-left:5px solid #33d17a;border-radius:8px;padding:10px 12px;margin:4px 0;display:flex;flex-direction:column;gap:6px}
.qbinv.bad{border-left-color:#f5a524}
.qbinv-h{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 14px}
.qbinv-h small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.qbinv-h .arrow{color:var(--muted);font-size:20px;margin-top:8px}
.qbinv-h .sp{flex:1}
.qbinv-h .qbtotal{font-size:20px;color:#7ee2a8}
.qbcust{min-width:260px;flex:1}
.qbsearch{margin-top:6px}.qbsearch input{width:100%}
.qbres{display:flex;flex-direction:column;gap:4px;margin-top:6px;max-height:220px;overflow:auto}
.qbhit{text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 10px;color:var(--text);cursor:pointer}
.qbhit:hover{border-color:var(--blue)}
.qbhit span{margin-left:6px;font-size:12px}
.qblines{width:100%;border-collapse:collapse;font-size:13px}
.qblines th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;padding:4px 6px;border-bottom:1px solid var(--line)}
.qblines td{padding:4px 6px;border-bottom:1px solid var(--line)}
.qblines .r{text-align:right;white-space:nowrap}
.qbmap select{min-width:240px}.qbmap .pct input{width:80px}
/* ---- Settings, Integrations (Oct 10 2026 design) ---- */
.ig{--ok:#3fd07a;--warn:#f5a524;--bad:#f0545c;--ig-panel:#1c2a3b;--ig-line:#2c3d52;max-width:1240px}
.ig h2{font-size:24px;font-weight:600;margin:0}
.ig-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ig-top p{margin:2px 0 0}
.ig-legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.ig-legend span{display:inline-flex;align-items:center;gap:6px}
.ig-legend i,.ig-pst i{width:8px;height:8px;border-radius:50%;display:inline-block}
i.ok{background:var(--ok)} i.warn{background:var(--warn)} i.bad{background:var(--bad)}
.ig-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:18px}
.ig-card{background:var(--ig-panel);border:1px solid var(--ig-line);border-top:3px solid var(--ok);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ig-card.warn{border-top-color:var(--warn)} .ig-card.bad{border-top-color:var(--bad)}
.ig-ch{display:flex;gap:12px;align-items:center}
.ig-ch b,.ig-st b{display:block;font-size:15px;font-weight:600;color:var(--text)}
.ig-ch small,.ig-st small{display:block;color:var(--muted);font-size:12px}
.ig-ico{width:38px;height:38px;border-radius:9px;display:inline-grid;place-items:center;flex:none;font-weight:800;color:#fff}
.ig-ico svg{width:22px;height:22px}
.ig-ico.mon{background:#232a45;display:inline-flex;gap:3px;align-items:center;justify-content:center}
.ig-ico.mon i{width:7px;height:7px;border-radius:50%;background:#ff3d57}.ig-ico.mon i:nth-child(2){background:#ffcb00}.ig-ico.mon i:nth-child(3){background:#00ca72}
.ig-ico.qbo{background:#2ca01c;font-size:17px;letter-spacing:-.5px}
.ig-ico.ss{background:#84c341;color:#fff}
.ig-ico.pn{background:#2563eb}
.ig-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;font-size:13px;font-weight:600;border:1px solid}
.ig-pill i{width:8px;height:8px;border-radius:50%}
.ig-pill.ok{color:#7ee2a5;background:rgba(63,208,122,.12);border-color:rgba(63,208,122,.45)}.ig-pill.ok i{background:var(--ok)}
.ig-pill.warn{color:#ffc65c;background:rgba(245,165,36,.12);border-color:rgba(245,165,36,.5)}.ig-pill.warn i{background:var(--warn)}
.ig-pill.bad{color:#ff8a90;background:rgba(240,84,92,.12);border-color:rgba(240,84,92,.5)}.ig-pill.bad i{background:var(--bad)}
.ig-line{margin:0;color:#b6c4d6;font-size:13px;flex:1;overflow-wrap:anywhere}
.ig-manage{width:100%;background:transparent;border:1px solid var(--ig-line);color:var(--text);border-radius:6px;padding:8px;font-weight:600}
.ig-manage:hover{background:#24364b}
.ig-sec{background:var(--ig-panel);border:1px solid var(--ig-line);border-radius:10px;margin-bottom:14px;scroll-margin-top:12px}
.ig-sh{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
.ig-st{flex:1;min-width:0}
.ig-chev{background:none;border:0;color:var(--muted);font-size:16px;transition:transform .15s;padding:4px}
.ig-sec.closed .ig-chev{transform:rotate(-90deg)}
.ig-sec.closed .ig-sb{display:none}
.ig-sb{border-top:1px solid var(--ig-line);padding:16px}
.ig-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:18px 28px;margin-bottom:6px}
.ig-cap{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:10px}
.ig-kv{display:grid;grid-template-columns:110px 1fr;margin:0 0 12px}
.ig-kv dt,.ig-kv dd{margin:0;padding:8px 0;border-bottom:1px solid var(--ig-line);font-size:13px}
.ig-kv dt{color:var(--muted)} .ig-kv dd{font-weight:600;overflow-wrap:anywhere}
.ig-bad{color:#ff8a90}
.ig-note{border:1px solid var(--ig-line);border-radius:8px;padding:12px 14px;color:#b6c4d6;font-size:13px;align-self:start}
.ig-tag{font-size:12px;padding:2px 8px;border-radius:5px;font-weight:600}
.ig-tag.ok{background:rgba(63,208,122,.15);color:#7ee2a5}.ig-tag.warn{background:rgba(245,165,36,.18);color:#ffc65c}
.ig-uri{display:flex;align-items:center;gap:10px;justify-content:space-between}
.ig-uri code{background:#111a26;border:1px solid var(--ig-line);border-radius:4px;padding:3px 8px;font-size:12px;font-weight:400;overflow-wrap:anywhere}
.ig-link{background:none;border:0;color:#60a5fa;font-size:13px;padding:0;white-space:nowrap}
.ig-keys{border:1px solid var(--ig-line);border-radius:8px;margin:10px 0}
.ig-keys-h{display:flex;align-items:center;gap:12px;padding:10px 12px}
.ig-keys-h > div{flex:1;min-width:0}.ig-keys-h b{display:block;font-size:13px}.ig-keys-h small{color:var(--muted);font-size:12px}
.ig-key-ico{color:var(--muted);font-size:16px}
.ig-keys-f{border-top:1px solid var(--ig-line);padding:12px}
.ig-keys-f form{margin-bottom:8px}
.btn.small{padding:5px 10px;font-size:12px}
.ig-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.ig-banner{display:flex;align-items:center;gap:14px;border-radius:8px;padding:12px 16px;margin-bottom:16px;border:1px solid}
.ig-banner > div{flex:1}.ig-banner b{display:block}.ig-banner small{display:block;font-size:12px;opacity:.9}
.ig-banner.warn{background:rgba(245,165,36,.1);border-color:var(--warn);color:#ffc65c}
.ig-banner.warn small{color:#e8d3a8}
.ig-banner.bad{background:rgba(240,84,92,.1);border-color:var(--bad);color:#ff8a90}
.ig-banner.bad small{color:#f0c4c6}
.ig-b-ico{font-size:20px;font-weight:800;width:26px;text-align:center}
.ig-banner.bad .ig-b-ico{border:2px solid currentColor;border-radius:50%;width:24px;height:24px;font-size:14px;line-height:20px}
.ig-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:2px 9px;border-radius:99px;border:1px solid;letter-spacing:.05em}
.ig-badge i{width:7px;height:7px;border-radius:50%}
.ig-badge.warn{color:#ffc65c;border-color:rgba(245,165,36,.5)}.ig-badge.warn i{background:var(--warn)}
.ig-badge.ok{color:#7ee2a5;border-color:rgba(63,208,122,.45)}.ig-badge.ok i{background:var(--ok)}
.ig-prod{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0}
.ig-prod b{display:block;font-size:13px}.ig-prod small{display:block;color:var(--muted);font-size:11px}
.ig select{max-width:230px;width:230px;background:#111a26;border:1px solid var(--ig-line);border-radius:6px;padding:6px 8px;font-size:12px}
.ig select.unset{border-color:var(--warn);color:#ffc65c;background:rgba(245,165,36,.06)}
.ig select.set{border-color:#2e6b48}
.ig-cc{display:flex;gap:6px;align-items:center}.ig-cc select{width:170px}
.ig-pct{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.ig-pct input{width:62px;padding:6px;font-size:12px}
#qbmats{border-top:1px solid var(--ig-line);margin-top:14px;padding-top:14px}
.ig-mh{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ig-mh .ig-cap{margin-bottom:2px}
.ig-mtools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ig-mtools input{width:190px;padding:6px 10px;font-size:12px}
.ig-mtools select{width:150px}
.ig-seg{display:inline-flex;border:1px solid var(--ig-line);border-radius:6px;overflow:hidden}
.ig-seg button{background:none;border:0;color:var(--muted);font-size:12px;padding:6px 10px}
.ig-seg button.on{background:#2a3d55;color:#fff}
.ig-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:4px 26px}
.ig-mat{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0}
.ig-mat > span{min-width:0;font-size:13px}.ig-mat small{color:var(--muted);font-size:11px;font-weight:400}
.ig-mat select{width:140px}
.ig-carriers{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}
.ig-carrier{display:flex;gap:10px;align-items:center;background:rgba(63,208,122,.07);border:1px solid rgba(63,208,122,.35);border-radius:8px;padding:12px}
.ig-carrier i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.ig-carrier b{display:block;font-size:13px}.ig-carrier span{color:#7ee2a5;font-weight:700;font-size:16px}
.ig-from{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--ig-line);border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.55}
.ig-from > div{flex:1}.ig-pin{color:var(--muted);font-size:16px}
.ig-opt{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--ig-line)}
.ig-opt b{display:block;font-size:13px}.ig-opt small{display:block;color:var(--muted);font-size:12px}
.ig .switch i{width:44px;height:24px}.ig .switch i::after{width:18px;height:18px;top:3px;left:3px}.ig .switch input:checked + i::after{left:23px}
.ig-ptable{border:1px solid var(--ig-line);border-radius:8px;overflow:hidden;margin:6px 0 12px}
.ig-pr{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(220px,1.2fr) 120px 140px;gap:12px;align-items:center;padding:10px 12px;border-top:1px solid var(--ig-line);border-left:3px solid transparent}
.ig-pr.head{border-top:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;background:rgba(0,0,0,.12)}
.ig-pr.off,.ig-pr.gone{border-left-color:var(--bad);background:rgba(240,84,92,.06)}
.ig-pr small{display:block;color:var(--muted);font-size:11px}
.ig-pr select{width:100%;max-width:none}
.ig-size{font-style:normal;font-size:11px;background:#2a3d55;border-radius:4px;padding:1px 6px;margin-left:4px;color:#c9d6e8}
.ig-pst{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px}
.ig-pr.on .ig-pst{color:#7ee2a5}.ig-pr.off .ig-pst,.ig-pr.gone .ig-pst{color:#ff8a90}.ig-pr.none .ig-pst{color:#ffc65c}
@media (max-width:760px){.ig-sh{flex-wrap:wrap}.ig-st{flex:1 1 calc(100% - 60px)}.ig-sh > span[data-igpill]{margin-left:50px}.ig-pr{grid-template-columns:1fr}.ig-pr.head{display:none}.ig select{width:100%;max-width:none}.ig-prod,.ig-mat{flex-direction:column;align-items:stretch}}
/* To invoice, Invoiced tab: when, and the invoice in QuickBooks */
.seg.invspan button{padding:5px 10px;font-size:12px}
a.qbo-open{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#7ee2a5;border:1px solid rgba(63,208,122,.45);border-radius:99px;padding:2px 9px;white-space:nowrap;text-decoration:none}
a.qbo-open:hover{background:rgba(63,208,122,.12)}
.tag-mon{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;color:#c7b8ff;background:rgba(157,108,224,.16);border:1px solid rgba(157,108,224,.5);border-radius:99px;padding:1px 8px;white-space:nowrap}
.qbo-none{font-size:11px;color:#ffc65c;white-space:nowrap}
.icard .ic-act{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;align-items:center}
.qbpo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;font-size:13px;font-weight:600}
.qbpo input{width:260px;padding:6px 8px}
.qbpo small{flex-basis:100%;font-weight:400}
/* ---- Real times (Oct 10 2026 design) ---- */
.rt{--rt-panel:#16233a;--rt-line:#24344e;--rt-blue:#3b82f6;--rt-amber:#f5a524;--rt-green:#3fd07a;--rt-purple:#a78bfa;--rt-teal:#2dd4bf;max-width:1500px}
.rt h1{font-size:30px;font-weight:700;margin:0}
.rt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.rt-head p{margin:2px 0 0}
.rt-days a{display:inline-block;padding:9px 18px;color:#c9d6e8;text-decoration:none;font-size:15px;background:var(--panel2)}
.rt-days a + a{border-left:1px solid #2a4368}
.rt-days a.on{background:var(--green);color:#fff;font-weight:700}
.rt-coverbox{display:flex;align-items:center;gap:0;background:var(--rt-panel);border:1px solid var(--rt-line);border-radius:12px;padding:14px 18px;margin-bottom:18px;flex-wrap:wrap;row-gap:12px}
.rt-cov{flex:1 1 240px;padding:0 18px;border-right:1px solid var(--rt-line);min-width:0}
.rt-cov:first-child{padding-left:0}
.rt-cov:nth-child(3){border-right:0}
.rt-cov > div{display:flex;gap:6px;align-items:baseline;font-size:14px;color:#c9d6e8;margin-bottom:8px}
.rt-cov b{color:#fff}
.rt-pct{margin-left:auto;font-weight:700;color:#fff}
.rt-pct.muted{font-weight:400;color:var(--muted)}
.rt-track{display:block;height:8px;border-radius:99px;background:#26364f;overflow:hidden}
.rt-track > i{display:block;height:100%;border-radius:99px;background:var(--rt-amber)}
.rt-track > i.grey{background:#3b4b63}
.rt-why{background:none;border:1px solid #2f5ea8;color:#7fb2ff;border-radius:8px;padding:8px 14px;font-weight:600;margin-left:14px}
.rt-whybox{background:var(--rt-panel);border:1px solid var(--rt-line);border-radius:10px;padding:4px 18px;margin:-8px 0 18px;color:#c9d6e8;font-size:13px}
.rt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:20px}
.rt-kpi{background:var(--rt-panel);border:1px solid var(--rt-line);border-top:3px solid var(--rt-blue);border-radius:12px;padding:16px 18px}
.rt-kpi.green{border-top-color:var(--rt-green)}.rt-kpi.purple{border-top-color:var(--rt-purple)}.rt-kpi.amber{border-top-color:var(--rt-amber)}
.rt-kpi small{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700;color:#9fb0c8}
.rt-big{font-size:34px;font-weight:800;margin:6px 0 2px;line-height:1.1}
.rt-big span{font-size:17px;font-weight:500;color:#dbe6f5}
.rt-big .amb{color:var(--rt-amber);font-size:34px;font-weight:800}
.rt-kpi p{margin:0;color:#b6c4d6;font-size:14px}
.rt-sec{background:var(--rt-panel);border:1px solid var(--rt-line);border-radius:12px;margin-bottom:20px;overflow:hidden}
.rt-sec > header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--rt-line);flex-wrap:wrap}
.rt-sec h2{font-size:19px;margin:0}
.rt-sec header small{color:#9fb0c8;font-size:13px}
.rt-legend{display:flex;gap:18px;font-size:13px;color:#b6c4d6;flex-wrap:wrap}
.rt-legend span{display:inline-flex;align-items:center;gap:8px}
.rt-legend i.bar{width:22px;height:8px;border-radius:99px;background:var(--rt-blue)}
.rt-legend i.bar.purple{background:var(--rt-purple)}.rt-legend i.bar.teal{background:var(--rt-teal)}
.rt-legend i.mark{width:2px;height:14px;background:#fff}
.rt-mrow{display:grid;grid-template-columns:minmax(170px,1.3fr) 90px 100px 90px minmax(260px,2.6fr) minmax(220px,1.5fr);gap:18px;align-items:center;padding:14px 22px;border-top:1px solid var(--rt-line)}
.rt-mrow.head,.rt-frow.head,.rt-srow.head{border-top:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#9fb0c8;padding-top:12px;padding-bottom:12px}
.rt-mrow .r,.rt-frow .r,.rt-srow .r{text-align:right}
.rt-mrow.dim > div:not(:last-child),.rt-frow.dim{opacity:.6}
.rt-mname{display:flex;gap:10px;align-items:flex-start}
.rt-mname b{display:block;font-size:16px}.rt-mname small{color:#9fb0c8}
.rt-dot{width:10px;height:10px;border-radius:3px;background:var(--rt-blue);margin-top:6px;flex:none}
.rt-mrow.dim .rt-dot{background:#64748b}
.rt-mrow b{font-size:16px}
.rt-few{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;border:1px solid #475569;border-radius:4px;padding:1px 6px;margin-left:6px;color:#b6c4d6}
.rt-speed small{display:block;color:#b6c4d6;font-size:13px;margin-top:6px}.rt-speed small b{font-size:14px;color:#fff}
.rt-bar{position:relative;display:block;height:12px;border-radius:99px;background:#26364f;margin-top:18px}
.rt-bar > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2563eb,#60a5fa)}
.rt-mrow.dim .rt-bar > i{background:#64748b}
.rt-mark{position:absolute;top:-6px;width:2px;height:24px;background:#fff;transform:translateX(-1px)}
.rt-mark em{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-style:normal;font-size:12px;color:#c9d6e8;white-space:nowrap}
.rt-acc{display:inline-block;border:1px solid var(--rt-line);border-radius:8px;padding:8px 14px;background:rgba(255,255,255,.02)}
.rt-acc b{display:block;font-size:14px}.rt-acc small{display:block;font-size:12px;color:#c9d6e8}
.rt-acc.bad{border-color:rgba(245,165,36,.7);background:rgba(245,165,36,.1)}.rt-acc.bad small{color:#ffc65c}
.rt-acc.ok,.rt-acc.fast{border-color:rgba(63,208,122,.5)}
.rt-acc.few,.rt-acc.none{border-style:dashed;opacity:.75}
.rt-alert{display:flex;gap:14px;align-items:flex-start;background:rgba(245,165,36,.08);border-top:1px solid rgba(245,165,36,.4);padding:14px 22px;color:#dbe6f5}
.rt-alert > span{color:var(--rt-amber);font-size:22px;line-height:1}
.rt-alert p{margin:0;font-size:14px}.rt-alert b{color:var(--rt-amber)}
.rt-foot{padding:10px 22px;margin:0;border-top:1px solid var(--rt-line);font-size:13px}
.rt-empty{padding:16px 22px;margin:0;color:var(--muted)}
.rt-frow{display:grid;grid-template-columns:minmax(150px,1.5fr) 110px minmax(240px,2.4fr) 90px minmax(240px,2fr) 80px;gap:18px;align-items:center;padding:12px 22px;border-top:1px solid var(--rt-line)}
.rt-srow{display:grid;grid-template-columns:minmax(150px,2fr) 110px 110px 110px;gap:18px;align-items:center;padding:12px 22px;border-top:1px solid var(--rt-line)}
.rt-fbar{display:flex;align-items:center;gap:12px}
.rt-fbar .rt-bar{flex:1;margin-top:0;height:10px}
.rt-fbar .rt-bar > i.purple{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.rt-fbar .rt-bar > i.teal{background:linear-gradient(90deg,#0d9488,#2dd4bf)}
.rt-frow.dim .rt-bar > i{background:#64748b}
.rt-fbar b{min-width:64px;text-align:right}
.rt-prep{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;align-items:center;padding:18px 22px}
.rt-prep p{margin:0;color:#c9d6e8;padding-right:20px}
.rt-prep > div{border-left:1px solid var(--rt-line);padding-left:24px}
.rt-prep small{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700;color:#9fb0c8}
.rt-prep b{font-size:36px;font-weight:800}
.rt-rtab button{padding:7px 16px}
table.rt-recent{width:100%;border-collapse:collapse}
table.rt-recent th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9fb0c8;padding:10px 12px;border-bottom:1px solid var(--rt-line);white-space:nowrap}
table.rt-recent td{padding:9px 12px;border-bottom:1px solid #1e2c43;font-size:13px;white-space:nowrap}
table.rt-recent th.r,table.rt-recent td.r{text-align:right}
table.rt-recent tr[data-go]{cursor:pointer}
table.rt-recent tr[data-go]:hover td{background:#1c2c46}
table.rt-recent tr.over td{background:rgba(245,165,36,.07)}
.rt-over{font-style:normal;color:var(--rt-amber);font-weight:700;margin-left:4px}
@media (max-width:1100px){.rt-mrow{grid-template-columns:1fr 70px 80px 80px;row-gap:8px}.rt-mrow > div:nth-child(5),.rt-mrow > div:nth-child(6){grid-column:1/-1}.rt-mrow.head > div:nth-child(5),.rt-mrow.head > div:nth-child(6){display:none}
  .rt-frow{grid-template-columns:1fr 90px 80px}.rt-frow > div:nth-child(3),.rt-frow > div:nth-child(5){grid-column:1/-1}.rt-frow.head > div:nth-child(3),.rt-frow.head > div:nth-child(5),.rt-frow > div:nth-child(6){display:none}}
@media (max-width:700px){.rt-prep{grid-template-columns:1fr 1fr 1fr}.rt-prep p{grid-column:1/-1;margin-bottom:12px}.rt-prep > div{border-left:0;padding-left:0}.rt-prep b{font-size:26px}.rt-cov{border-right:0;padding:0;flex-basis:100%}.rt-why{margin-left:0}}
table.rt-recent td.rt-cut{max-width:260px;overflow:hidden;text-overflow:ellipsis}
table.rt-recent tr.rt-morerow td{text-align:center;padding:12px}
@media (max-width:700px){.rt-mrow{grid-template-columns:minmax(0,1fr) 64px 78px;gap:10px;padding:12px 14px}.rt-mrow > div:nth-child(4){display:none}
  .rt-frow{grid-template-columns:minmax(0,1fr) 70px;gap:10px;padding:12px 14px}.rt-frow > div:nth-child(4){display:none}
  .rt-srow{grid-template-columns:minmax(0,1fr) 60px 70px;gap:10px;padding:12px 14px}.rt-srow > div:nth-child(4){display:none}
  .rt-sec > header{padding:14px}.rt-mname b{font-size:15px}.rt-big{font-size:28px}}
.rt-acc b{color:#fff}
/* ---- Proofs (Oct 10 2026 design) ---- */
.pf{--pf-line:#22324a;--pf-amber:#f5a524;--pf-green:#3fd07a;--pf-blue:#3b82f6;max-width:1500px}
.pf-head h1{font-size:30px;font-weight:700;margin:0}
.pf-head p{margin:2px 0}
.pf-bar1{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:16px 0 0;border-bottom:1px solid var(--pf-line)}
.pf-tabs{display:flex;gap:4px;flex-wrap:wrap}
.pf-tabs button{background:none;border:0;border-bottom:3px solid transparent;color:#9fb0c8;font-size:15px;padding:10px 14px}
.pf-tabs button em{font-style:normal;font-size:12px;background:#24344c;color:#c9d6e8;border-radius:99px;padding:1px 8px;margin-left:4px}
.pf-tabs button.on{color:#fff}
.pf-tabs button.needs.on{color:var(--pf-amber);border-bottom-color:var(--pf-amber)}.pf-tabs button.needs em{background:var(--pf-amber);color:#1b1b1b;font-weight:700}
.pf-tabs button.waiting.on,.pf-tabs button.all.on{border-bottom-color:#7fb2ff}.pf-tabs button.approved.on{border-bottom-color:var(--pf-green)}
.pf-bar1 input{width:290px;margin-bottom:8px}
.pf-custsel{display:inline-flex;align-items:center;gap:8px;color:#9fb0c8;font-size:13px;margin-bottom:8px;border:1px solid var(--pf-line);border-radius:6px;padding:0 0 0 10px}
.pf-custsel select{border:0;background:transparent;font-weight:700}
.pf-table{background:#141f31;border:1px solid var(--pf-line);border-radius:10px;margin-top:14px;overflow:hidden}
.pf-main{display:grid;grid-template-columns:22px 150px minmax(200px,1.5fr) minmax(140px,1fr) 210px minmax(150px,1fr) 110px 150px;gap:14px;align-items:center;padding:14px 16px;cursor:pointer}
.pf-main.head{cursor:default;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8fa1ba;font-weight:700;padding:12px 16px;border-bottom:1px solid var(--pf-line)}
.pf-main .r,.pf-btns{text-align:right;justify-content:flex-end}
.pf-row{border-top:1px solid var(--pf-line);border-left:3px solid transparent}
.pf-row:first-of-type{border-top:0}
.pf-row.needs{border-left-color:var(--pf-amber)}
.pf-row:hover > .pf-main{background:#172539}
.pf-chev{color:#7f8ea6;font-size:11px}
.pf-thumbs{display:flex;align-items:center}
.pf-th{width:44px;height:44px;border-radius:6px;background:#fff;overflow:hidden;display:grid;place-items:center;border:2px solid #0f1a2a;margin-left:-8px;flex:none;font-size:10px;color:#475569}
.pf-th:first-child{margin-left:0}
.pf-th .pic{width:100%;height:100%;min-height:0;border:0;border-radius:0;background:#fff}
.pf-th.none{background:#22324a;color:#9fb0c8}
.pf-more{margin-left:6px;font-size:12px;font-weight:700;color:#c9d6e8;background:#22324a;border-radius:6px;padding:12px 8px}
.pf-job b,.pf-cust b,.pf-act b{display:block;font-size:15px}
.pf-job small,.pf-cust small,.pf-act small{display:block;color:#8fa1ba;font-size:12px}
.pf-job .a{color:var(--pf-amber)}
.pf-bar{display:flex;height:6px;border-radius:99px;background:#2a3a52;overflow:hidden;width:150px}
.pf-bar i.g{background:var(--pf-green)}.pf-bar i.a{background:var(--pf-amber)}
.pf-count{font-size:13px;color:#9fb0c8;margin:5px 0}.pf-count b.g{color:var(--pf-green)}.pf-count b.a{color:var(--pf-amber)}
.pf-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border:1px solid;border-radius:99px;padding:2px 10px}
.pf-pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.pf-pill.amber{color:var(--pf-amber);border-color:rgba(245,165,36,.6);background:rgba(245,165,36,.08)}
.pf-pill.green{color:var(--pf-green);border-color:rgba(63,208,122,.5)}
.pf-pill.grey{color:#b6c4d6;border-color:#3b4b63}
.pf-pill.red{color:#ff8a90;border-color:rgba(240,84,92,.6)}
.pf-pill.warn{color:#ffd27a;border-color:#6b5520}
.pf-next{color:#9fb0c8}
.pf-btns{display:flex;gap:8px;align-items:center}
.pf-mwrap{position:relative}
.pf-dots{width:32px;padding:5px 0;font-weight:800}
.pf-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;background:#1b2a42;border:1px solid #2f4566;border-radius:8px;min-width:240px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;text-align:left}
.pf-menu[hidden]{display:none}
.pf-menu a,.pf-menu button{background:none;border:0;color:#dbe6f5;text-align:left;padding:8px 10px;border-radius:6px;font-size:13px;text-decoration:none}
.pf-menu a:hover,.pf-menu button:hover{background:#26395a}
.pf-menu .danger{color:#ff8a90}
.pf-change{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:16px;padding:0 16px 14px 56px}
.pf-cbox{border:1px solid rgba(245,165,36,.55);background:rgba(245,165,36,.06);border-radius:8px;padding:12px 16px}
.pf-cwho{font-size:13px;color:#d6dfeb}.pf-cwho > b{color:var(--pf-amber)}.pf-cwho b.w{color:#fff}.pf-cwho span{color:#8fa1ba}
.pf-cbox q{display:block;font-style:italic;color:#e8eef4;margin:6px 0 2px;font-size:14px;line-height:1.5}
.pf-handled{margin-top:10px;border:1px solid rgba(63,208,122,.5);background:rgba(63,208,122,.08);border-radius:6px;padding:7px 12px;font-size:13px;color:#d6f5e1}
.pf-handled b{color:var(--pf-green)}
.pf-handled.wait{border-color:#3b4b63;background:rgba(255,255,255,.03);color:#c9d6e8}.pf-handled.wait b{color:#c9d6e8}
.pf-cact{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.pf-cact .btn{text-align:center;padding:9px 12px}
.btn.blue{background:var(--pf-blue,#3b82f6);color:#fff}
.pf-cact .linkbtn{color:#c9d6e8;text-align:center}
.pf-detail{display:grid;grid-template-columns:minmax(0,1fr) 260px;border-top:1px dashed var(--pf-line);background:#111b2b}
.pf-dmain{padding:16px 16px 18px 56px;min-width:0}
.pf-note{display:grid;grid-template-columns:140px 1fr;gap:12px;margin-bottom:14px}
.pf-note small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8fa1ba;font-weight:700;padding-top:3px}
.pf-note p{margin:0;color:#dbe6f5;line-height:1.5}
.pf-whath{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.pf-seg button{padding:4px 10px;font-size:12px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.pf-card{display:flex;gap:10px;align-items:flex-start;background:#16233a;border:1px solid var(--pf-line);border-radius:8px;padding:8px;color:#e8eef4;text-decoration:none}
.pf-card:hover{border-color:#3b5578}
.pf-card.open{border-color:var(--pf-amber);background:rgba(245,165,36,.07)}
.pf-card .pf-th{margin-left:0;width:48px;height:48px}
.pf-card b{display:block;font-size:13px}.pf-card small{display:block;font-size:12px}.pf-card small.g{color:var(--pf-green)}.pf-card small.a{color:var(--pf-amber)}
.pf-card em{display:block;font-size:12px;color:#ffd27a}
.pf-side{border-left:1px solid var(--pf-line);padding:16px}
.pf-side h5{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8fa1ba;margin:0 0 8px}
.pf-side h5 + *{margin-top:0}
.pf-side h5:not(:first-child){margin-top:16px}
.pf-ev{display:flex;gap:9px;margin-bottom:8px}
.pf-ev i{width:8px;height:8px;border-radius:50%;background:#64748b;margin-top:6px;flex:none}
.pf-ev.g i{background:var(--pf-green)}.pf-ev.a i{background:var(--pf-amber)}.pf-ev.b i{background:var(--pf-blue)}.pf-ev.bad i{background:#f0545c}
.pf-ev b{display:block;font-size:13px}.pf-ev small{display:block;font-size:12px;color:#8fa1ba}
.pf-link{font-size:13px;margin-top:14px}
.pf-empty{padding:24px;color:#9fb0c8;text-align:center}
.pf-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#8fa1ba;font-size:13px;padding:10px 4px}
@media (max-width:1250px){.pf-main{grid-template-columns:22px 110px minmax(160px,1.4fr) minmax(120px,1fr) 190px 130px}.pf-main > :nth-child(6),.pf-main > :nth-child(7){display:none}}
@media (max-width:800px){.pf-main{grid-template-columns:18px minmax(0,1fr) auto;row-gap:8px}.pf-main.head{display:none}.pf-main > :nth-child(2){grid-column:2/4}.pf-main > :nth-child(3){grid-column:2/4}.pf-main > :nth-child(4),.pf-main > :nth-child(5){grid-column:2/4}.pf-main > :nth-child(8){grid-column:2/4;justify-content:flex-start}
  .pf-change{grid-template-columns:1fr;padding-left:16px}.pf-detail{grid-template-columns:1fr}.pf-dmain{padding-left:16px}.pf-side{border-left:0;border-top:1px solid var(--pf-line)}.pf-note{grid-template-columns:1fr}.pf-bar1 input{width:100%}}
.pf-custsel select{width:auto;max-width:220px;padding:7px 8px}
.pf-bar1 input{width:250px}
.pf-card em{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Order Management: archive (X) and the Archived list (Oct 11 2026) */
.olist .xcell{width:44px;text-align:center;padding-left:0;padding-right:6px}
.xarch{width:28px;height:28px;border-radius:50%;border:1px solid transparent;background:none;color:var(--muted, #8b9098);font-size:20px;line-height:1;cursor:pointer;opacity:.55}
.orow:hover .xarch,.xarch:focus-visible{opacity:1;border-color:#e2564b55;color:#e2564b}
.xarch:hover{background:#e2564b22}
.stage.st-archived{background:#3a3d44;color:#c9cdd3}
.pc-arch{margin:6px 12px 0;font-size:12px;color:#c9cdd3;background:#3a3d44;border-radius:6px;padding:5px 8px}
.pc-actions .xarch{margin-left:auto;flex:none}

/* Apps page (Oct 11 2026) */
.appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:6px}
.apptile{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:14px;background:var(--panel, #1a1f2b);border:1px solid #2a3140;color:inherit;text-decoration:none;transition:border-color .15s, transform .15s}
.apptile:hover{border-color:#4caf50;transform:translateY(-1px)}
.appicon{flex:none;width:56px;height:56px;border-radius:12px;background:#c8102e;color:#fff;display:flex;align-items:center;justify-content:center}
.appicon svg{width:34px;height:34px}
.appt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.appt b{font-size:17px}
.appt small{color:#9aa3b2;font-size:13.5px;line-height:1.35}
.appgo{font-size:20px;color:#9aa3b2}
.apptag{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#ff6b81}

.errback{z-index:90}
.errmodal{border-color:var(--red)}
.errmodal h3{color:#ff8a8a}
.errmodal ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.4}

/* Rush order: a banner nobody can miss and the rush color down both sides of the order page */
.rushbanner{display:flex;align-items:center;justify-content:center;gap:18px;background:var(--rc);color:var(--rf);border-radius:10px;padding:14px 20px;margin:4px 0 14px;box-shadow:0 0 0 3px rgba(255,255,255,.12),0 8px 28px color-mix(in srgb,var(--rc) 45%,transparent);animation:rushpulse 1.6s ease-in-out 3}
.rushbanner .rb-main{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.1}
.rushbanner .rb-main b{font-size:40px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.rushbanner .rb-main span{font-size:18px;font-weight:800;margin-top:4px;letter-spacing:.02em}
.rushbanner .rb-bolt{font-size:38px;line-height:1}
@keyframes rushpulse{50%{transform:scale(1.015);box-shadow:0 0 0 6px color-mix(in srgb,var(--rc) 55%,transparent),0 8px 28px color-mix(in srgb,var(--rc) 45%,transparent)}}
#view.rushview{box-shadow:inset 8px 0 0 var(--rc),inset -8px 0 0 var(--rc)}
@media (max-width:720px){.rushbanner .rb-main b{font-size:26px}.rushbanner .rb-main span{font-size:14px}.rushbanner .rb-bolt{font-size:24px}#view.rushview{box-shadow:inset 5px 0 0 var(--rc),inset -5px 0 0 var(--rc)}}
@media (prefers-reduced-motion:reduce){.rushbanner{animation:none}}
@media print{.rushbanner{border:4px solid #000;box-shadow:none}#view.rushview{box-shadow:none}}

/* Partial shipment window: the items not finished, and the reason */
.partialmodal{max-width:560px;border-color:var(--red)}
.partialmodal h3{color:#ff8a8a;font-size:22px}
.partialmodal p{margin:0;line-height:1.4}
.partialmodal .pm-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.partialmodal .pm-list li span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.partialmodal .pm-list li em{font-style:normal;font-weight:700;color:#facc15}
.partialmodal .pm-why{display:flex;flex-direction:column;gap:6px;font-weight:700}
.partialmodal textarea{width:100%;font:inherit;padding:8px 10px;border-radius:6px}
.partialmodal textarea.bad{outline:2px solid var(--red)}

/* A finished order: a green COMPLETE block in white letters, not the small grey Done (Micky, Oct 16 2026) */
.stage.st-complete{background:#16a34a;color:#fff;font-weight:900;letter-spacing:.08em;border-radius:5px;padding:5px 12px;border:0;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.pc-top .stage.st-complete{font-size:13px;padding:5px 12px}
.pcard.done .pc-top{background:rgba(22,163,74,.14)}

/* ---- order page layout (Oct 26 2026, Micky's mockup) ---- */
.od-head{display:flex;gap:18px;align-items:stretch;justify-content:space-between;flex-wrap:wrap;margin:0 0 14px}
.od-id{min-width:260px;flex:1}
.od-sub{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-bottom:6px}
.od-sub b.mono{color:var(--text);font-size:15px}
.od-id h1{font-size:34px;font-weight:800;letter-spacing:-.01em;line-height:1.12;margin:0 0 6px}
.od-cards{display:flex;gap:12px}
.od-card{min-width:190px;border-radius:10px;padding:12px 16px;border:2px solid var(--line);background:var(--panel);display:flex;flex-direction:column;gap:2px}
.od-card small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.od-card b{font-size:28px;font-weight:800;line-height:1.1}
.od-card span{font-size:13px;color:var(--muted)}
.od-card input[type=date]{margin-top:6px;padding:4px 8px;font-size:13px}
.od-card.due-late{background:#5a1d1a;border-color:var(--red)}.od-card.due-late b{color:#ff9b93}.od-card.due-late span{color:#ffc9c4}
.od-card.due-soon{background:#4a3a14;border-color:var(--amber)}.od-card.due-soon b{color:#ffd27a}
.od-card.due-done{border-color:var(--green)}.od-card.due-done b{color:#7ee08a}
.od-card.due-none b{color:var(--muted)}
.od-card.rush.on{background:var(--rc);border-color:var(--rc)}.od-card.rush.on b,.od-card.rush.on small{color:var(--rf,#fff)}
.od-card .rushpick{margin-top:6px;display:block}.od-card .rushpick span{display:none}.od-card .rushpick select{width:100%;padding:4px 8px;font-size:13px}
.od-next{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:10px;padding:12px 16px;margin:0 0 14px;background:var(--panel2);border-left:6px solid var(--blue)}
.od-next b{font-size:20px;font-weight:800}
.od-next .od-next-k{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.od-next .od-next-n{color:var(--muted)}
.od-next .btn{margin-left:auto}
.od-next.n-amber{background:#4a3a14;border-color:var(--amber)}.od-next.n-amber b{color:#ffd27a}
.od-next.n-green{background:#183a20;border-color:var(--green)}.od-next.n-green b{color:#7ee08a}
.od-next.n-purple{border-color:var(--purple)}
.od-track{margin-bottom:14px;padding:6px 14px 8px}
.od-track .track{min-width:0}
.notebox.says{border-left-color:#f0b429}
.notebox.says small{font-weight:800;color:#ffd27a}
.notebox.says.inline{margin:10px 0 0}
.od-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.od-aside{display:flex;flex-direction:column;gap:14px}
.od-aside > *{margin:0}
.od-side{padding:14px 16px}
.od-side h3{margin:0 0 10px;font-size:16px}
.od-cust > div{margin:3px 0}
.od-cust .od-big{font-size:18px;font-weight:700}
.od-kvs{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.od-kvs small{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.od-stack{flex-direction:column;align-items:stretch}
.od-stack label,.od-stack label.grow{min-width:0;width:100%}
.od-stack select,.od-stack input{width:100%}
.od-wide{width:100%;margin-top:8px}
.od-early{border:1px dashed var(--line);border-radius:8px;padding:8px 10px}
.od-early summary{cursor:pointer;color:var(--muted);font-size:13px}
.od-ship .shipbar{flex-wrap:wrap}
.sf-ground{cursor:pointer}
.od-aside .section{margin:0}
.od-aside table{font-size:12.5px}
.od-aside .pr-in{width:76px}
.od-items{padding:10px 14px;margin-bottom:14px}
.od-items h3{margin:0 0 6px;font-size:15px}
.od-item{display:grid;grid-template-columns:40px minmax(0,1.6fr) minmax(0,1fr) 120px;gap:10px;align-items:center;padding:7px 6px;border-top:1px solid var(--line);color:var(--text)}
.od-item:hover{background:var(--panel2)}
.od-item b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.od-st{font-size:12px;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--panel2);text-align:center}
.od-st.done{background:#183a20;color:#7ee08a}.od-st.stuck{background:#4a3a14;color:#ffd27a}.od-st.current{background:#13324a;color:#8fd0f7}
.od-one .line .track-wrap{display:none}
.od-hist summary{list-style:none;cursor:pointer}.od-hist summary::-webkit-details-marker{display:none}
.od-hist summary h3:after{content:" ▾";color:var(--muted)}
.od-main .lgrid{grid-template-columns:minmax(0,1fr)}
@media (max-width:1250px){.od-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.od-id h1{font-size:26px}.od-cards{width:100%}.od-card{flex:1;min-width:0}.od-card b{font-size:22px}.od-item{grid-template-columns:34px minmax(0,1fr) 96px}.od-item .muted{display:none}}
.fitbox{display:flex;gap:10px;align-items:flex-start;border-radius:8px;padding:8px 12px;margin:8px 0 0;font-size:13px}
.fitbox i{font-style:normal;font-weight:800;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;color:#111}
.fitbox b{display:block;font-size:14px}.fitbox span{color:var(--muted)}
.fitbox.good{background:#183a20;border:1px solid #2f7a3b}.fitbox.good i{background:var(--green)}.fitbox.good b{color:#7ee08a}
.fitbox.warn{background:#4a3a14;border:1px solid #8a6a1f}.fitbox.warn i{background:var(--amber)}.fitbox.warn b{color:#ffd27a}
.fitbox.none{background:var(--panel2);border:1px solid var(--line)}.fitbox.none i{background:var(--muted)}
.od-aside .pricing .body{padding:10px}
.od-aside .pr-table td,.od-aside .pr-table th{padding:6px 4px}
.od-aside .pr-add{flex-wrap:wrap}

/* item card (Oct 27 2026) */
.od-main .lbody{grid-template-columns:minmax(250px,.8fr) minmax(0,1.5fr)}
.lleft{display:flex;flex-direction:column;gap:12px;min-width:0}
.mattile{border-left:5px solid var(--purple)}
.mattile .mt-row{display:flex;align-items:center;gap:14px;margin-top:4px}
.mattile .fi svg{width:40px;height:40px;color:#c9d6e8}
.mattile b{font-size:clamp(20px,1.8vw,30px);font-weight:900;line-height:1.1}
.lfin2{background:var(--panel2);border:1px solid #223a5c;border-radius:8px;padding:10px 12px 12px}
.lfin2-h{display:flex;gap:10px;align-items:baseline;margin-bottom:8px}.lfin2-h b{color:#7fb2ee;letter-spacing:.05em}.lfin2-h span{color:var(--muted);font-size:12px;font-style:italic}
.ft2s{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ft2{display:grid;grid-template-columns:26px minmax(0,1fr) 20px;align-items:center;gap:8px;text-align:left;background:var(--panel);border:1.5px solid #2a4368;border-radius:8px;padding:9px 10px;color:var(--text);min-height:54px}
.ft2:hover{border-color:#4c74a8}
.ft2 .fi svg{width:24px;height:24px;display:block;color:#c9d6e8}
.ft2-t{min-width:0}.ft2-t b{display:block;font-size:13px;font-weight:600;line-height:1.2;hyphens:auto}
.ft2-v{display:inline-block;margin-top:3px;font-size:12px;padding:1px 8px;border-radius:99px;background:#2b4a6f;color:#cfe3ff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft2-c{width:20px;height:20px;border-radius:50%;border:1.5px solid #6b7f96;display:grid;place-items:center;font-size:13px;font-weight:900}
.ft2.on{background:#123a22;border-color:var(--green)}.ft2.on .ft2-c{background:var(--green);border-color:var(--green);color:#fff}.ft2.on .fi svg{color:#fff}
.ft2-more{margin-top:8px}.ft2-more summary{cursor:pointer;color:var(--blue);font-size:13px;text-decoration:underline}.ft2-more .ft2s{margin-top:8px}
@media (max-width:640px){.od-main .lbody{grid-template-columns:minmax(0,1fr)}}

/* production under the preview (Oct 27 2026) */
.lart .filestrip > small{display:none}
.lart .fs-name{display:block;max-width:150px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.prod2{background:var(--panel);border:1px solid #2a4368;border-radius:12px;padding:14px 16px 16px;margin-top:10px}
.prod2-h{display:flex;gap:12px;align-items:center;margin:0 0 12px}
.prod2-h b{color:var(--text);font-size:22px;font-weight:800;letter-spacing:0}
.p2-gear{color:#7fb2ee;font-size:24px;line-height:1}
.p2-of{color:var(--muted);font-size:15px}
.p2-lbl{background:transparent;border:1.5px solid var(--blue);color:var(--text);border-radius:8px;padding:7px 14px;font-weight:600}
.prod2-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:10px}
.p2c{background:var(--panel2);border:1px solid #2a4368;border-radius:10px;padding:12px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.p2c small{color:#7fb2ee;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.p2-row{display:flex;align-items:center;gap:10px}
.p2-big{overflow-wrap:anywhere;font-size:21px;font-weight:800;line-height:1.15;color:var(--text)}
.p2-big.dim{color:var(--muted);font-weight:600}
.p2-big i{font-style:normal;font-size:16px;color:var(--muted)}
.p2-av{width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;font-size:24px;flex:none}
.p2-av.none{background:#33496a;color:#9db7d8}
.p2-pick{position:relative;display:inline-block;color:#7fb2ee;text-decoration:underline;font-size:14px;cursor:pointer}
.p2-pick.big{text-decoration:none;color:var(--text)}
.p2-pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.p2c .stsel{align-self:flex-start;max-width:100%;font-size:15px;padding:6px 14px;border-radius:99px}
.prod2 .pblock{margin-top:10px}
.p2-addnote{width:100%;margin-top:12px;background:transparent;border:1.5px dashed #3d5a80;border-radius:10px;color:#9db7d8;padding:12px 16px;text-align:left;font-size:15px}
.p2-addnote:hover{border-color:#7fb2ee;color:#fff}
.prod2-note{margin-top:10px}.prod2-note .pnotes-row{background:#4a3f12;border:1px solid #8a7420;border-radius:8px;padding:8px 12px}
.prod2-note .art-head b{color:#ffd27a}.prod2-note textarea{background:#1f1a08;border-color:#6b5a1a}
@media (max-width:900px){.prod2-cards{grid-template-columns:1fr}}
@media (max-width:640px){
  .od-track{overflow-x:auto}.od-track .track{min-width:560px}
  .ft2s{grid-template-columns:1fr}
  .prod2-h{flex-wrap:wrap}.prod2-h .p2-lbl{width:100%}
  .lines-title{flex-wrap:wrap}
}


/* ship service buttons in the Shipping card: 2 x 2 grid, always inside the card (Oct 27 2026) */
.od-ship .shipflags,.od-ship .shipflags.seg{display:block;flex:1 1 100%;width:100%;min-width:0;overflow:visible;border:0;border-radius:0}
.od-ship .shipflags .sf-row,.od-ship .shipflags.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.od-ship .shipflags .sf-btn,.od-ship .shipflags.seg .sf-btn{width:100%;min-width:0;padding:9px 8px;font-size:13.5px;border:1px solid #2a4368;border-radius:8px;white-space:normal;line-height:1.15}
.od-ship .shipflags.seg .sf-btn + .sf-btn{border-left:1px solid #2a4368}
.od-ship .sf-ground{cursor:pointer;opacity:1}
.od-ship .shipbar{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.od-ship .shipbar .sb-label{margin-left:0;text-align:center}
.od-ship .sb-addr{min-width:0}.od-ship .sb-addr span{white-space:normal}
.od-ship .shipbar > *{flex:0 0 auto;border-left:0;border-right:0;padding-left:0;padding-right:0;margin:0}.od-ship .shipbar .sb-addr{display:flex;gap:8px;align-items:flex-start}
/* Pricing in the narrow sidebar: nothing sticks out (Oct 27 2026) */
.od-aside .pricing .tablewrap{overflow:visible}
.od-aside .pr-table{width:100%}
.od-aside .pr-in{width:62px}
.od-aside .pr-table td:first-child{overflow-wrap:anywhere}

.od-aside .pricing > h3{flex-wrap:wrap;gap:4px}
.od-aside .pr-table{table-layout:fixed}
.od-aside .pr-table th:nth-child(2){width:40px}.od-aside .pr-table th:nth-child(3){width:68px}.od-aside .pr-table th:nth-child(4){width:72px}.od-aside .pr-table th:nth-child(5){width:34px}
.od-aside .pr-table .pr-in{width:100%;box-sizing:border-box;padding:6px 6px}
.od-aside .pr-table td,.od-aside .pr-table th{overflow-wrap:anywhere}
.od-aside .pr-table tfoot td{white-space:normal}
.pr-addrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pr-addrow #pr-new-label{flex:1 1 220px;min-width:0}.pr-addrow #pr-new-amt{width:80px}
.od-aside .pr-addrow #pr-new-label{flex:1 1 100%}.od-aside .pr-addrow #pr-new-amt{flex:1;width:auto}
@media (max-width:700px){.od-aside .pricing .pr-table{min-width:0}.od-aside .pricing .pr-in{width:100%}}

@keyframes odflash{0%{box-shadow:0 0 0 0 rgba(255,210,122,.9)}100%{box-shadow:0 0 0 14px rgba(255,210,122,0)}}
.od-flash{animation:odflash 1.2s ease-out 2;border-radius:12px}

/* Tracking email on the label screen (Oct 27 2026) */
.trackmail { border-top: 1px solid var(--line, #e5e7eb); display: flex; flex-direction: column; gap: 8px; }
.trackmail.need { background: rgba(249,115,22,.10); border: 2px solid #f97316; border-radius: 8px; }
.trackmail .tm-head { display: flex; flex-direction: column; gap: 2px; }
.trackmail .tm-head span { font-size: 12px; color: var(--muted, #6b7280); }
.trackmail .tm-now { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; word-break: break-all; }
.trackmail .tm-found { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trackmail .tm-found > span { flex-basis: 100%; }
.tm-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; border: 1px solid #60a5fa; background: rgba(59,130,246,.12); color: inherit; border-radius: 8px; cursor: pointer; text-align: left; max-width: 100%; }
.tm-chip b { font-size: 13px; word-break: break-all; }
.tm-chip small { font-size: 11px; opacity: .75; }
.tm-chip:hover { background: rgba(59,130,246,.22); }
.trackmail .tm-type { display: flex; gap: 6px; flex-wrap: wrap; }
.trackmail .tm-type input { flex: 1 1 220px; min-width: 0; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; }
.tm-to { margin: 6px 0; font-size: 14px; word-break: break-all; }
.od-mail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; word-break: break-all; }
.od-mail.none span { color: #f97316; font-weight: 600; }
.od-mail .linkbtn { background: none; border: 0; padding: 0; color: inherit; opacity: .7; text-decoration: underline; cursor: pointer; font-size: 12px; }
.emailmodal .tm-found { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.emailmodal .tm-found > span { flex-basis: 100%; }
.emailmodal .tm-type { display: flex; gap: 6px; flex-wrap: wrap; }
.emailmodal .tm-type input { flex: 1 1 220px; min-width: 0; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; }
/* Split an item into two jobs (Oct 28 2026) */
.splitmodal { max-width: 640px; width: calc(100vw - 32px); }
.splitmodal .sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.splitmodal .sp-side { border: 1px solid rgba(148,163,184,.35); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.splitmodal .sp-side h4 { margin: 0; font-size: 14px; }
.splitmodal label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; min-width: 0; }
.splitmodal input[type=text], .splitmodal input[type=number] { padding: 7px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; min-width: 0; width: 100%; box-sizing: border-box; }
.splitmodal .sp-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.splitmodal .sp-files { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.splitmodal .sp-files label.chk { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; word-break: break-all; }
.split-chip { background: rgba(168,85,247,.18); color: #c084fc; }
@media (max-width: 560px) { .splitmodal .sp-grid { grid-template-columns: 1fr; } }
/* Production, one row (Micky's mockup, Oct 29 2026) */
.prod2.p3{background:transparent;border:0;border-top:1px solid #2a4368;border-radius:0;padding:12px 0 4px}
.p3 .prod2-h{margin:0 0 8px}
.p3 .prod2-h b{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.p3 .p2-of{font-size:13px}
.p3row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} /* 4 across in the art column; 2 x 2 when the column is narrow */
.lart{container-type:inline-size}
@container (max-width:620px){.p3row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.p3f{display:flex;flex-direction:column;gap:6px;min-width:0}
.p3f small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.p3sel{position:relative;display:flex;align-items:center;min-width:0}
.p3sel select,.p3sel .p3ro{width:100%;min-width:0;box-sizing:border-box;appearance:none;-webkit-appearance:none;background:#0f1b2e;color:var(--text);border:1px solid #33496a;border-radius:8px;padding:9px 30px 9px 12px;font-size:15px;line-height:1.2;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239db7d8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:calc(100% - 12px) 50%;background-size:12px 8px;background-repeat:no-repeat}
.p3sel .p3ro{cursor:default;background-image:none}
.p3sel select:hover{border-color:#5b7cad}.p3sel select:focus{outline:2px solid var(--blue);outline-offset:1px}
.p3sel select:disabled{opacity:.55;cursor:not-allowed}
.p3f.st .p3sel select,.p3f.st .p3sel .p3ro{padding-left:28px}
.p3dot{position:absolute;left:12px;width:9px;height:9px;border-radius:50%;background:#7a8aa3;pointer-events:none;z-index:1}
.p3dot.st-done{background:#22c55e}.p3dot.st-work{background:#f59e0b}.p3dot.st-ready{background:#7b3fe4}.p3dot.st-stuck{background:#ef4444}.p3dot.st-review{background:#a78bfa}
.p3sel select.st-done,.p3sel select.st-work,.p3sel select.st-ready,.p3sel select.st-stuck,.p3sel select.st-wait,.p3sel select.st-review{color:var(--text)}
.p3 .p2-addnote.p3note{width:auto;border:0;padding:8px 0 0;margin:0;color:#7fb2ee;font-size:14px;background:none}
.p3 .p2-addnote.p3note:hover{color:#fff;text-decoration:underline}
.p3mp{margin-top:6px}
@media (max-width:700px){.p3row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lart .prod2.p3{border-top:0;padding-top:4px}
.p3sel select option{background:#0c1a2e;color:#fff}
/* the customer chose NO grommets on a banner (Nov 1 2026): loud, easy to see */
.ft2.nogrom{border:2px solid #ef4444;background:rgba(239,68,68,.14)}
.ft2.nogrom b{color:#fca5a5;font-weight:900;letter-spacing:.04em}
.ft2.nogrom .ft2-c{color:#ef4444;font-weight:900}
.od-woo{margin-left:6px}.od-woo-l{font-size:12px;color:#7fb2ee;white-space:nowrap}