/* Delivery Orders and the packing list (2026-10-20). The DO follows the ELYON Store Desk's DO and today's
   AutoCount layout (sample DO2610-3065); the packing list follows Packing-List-Layout.html (approved by
   Toms 2026-10-19). Both are A4, black on white, and carry no price. */
.bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0}
.bar .grow, .grow{flex:1 1 220px}
.btn{display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font-size:14px}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.dorow{display:flex; justify-content:space-between; gap:12px; align-items:center; color:inherit; margin-bottom:8px; text-decoration:none}
.dorow .donum{text-align:right; white-space:nowrap}
.tick{display:flex; gap:10px; align-items:flex-start; padding:6px 0; cursor:pointer}
.tick input{width:20px; height:20px; flex:none; margin-top:2px}
.warn{color:var(--warn)}
table.pricet{width:100%; border-collapse:collapse}
table.pricet th, table.pricet td{padding:6px 4px; border-bottom:1px solid var(--line); text-align:left; font-size:14px}
table.pricet .n{text-align:right}

/* ---------------------------------------------------------------- the paper */
.note{background:#fff; color:#000; border:1px solid var(--line); border-radius:var(--radius); padding:24px; max-width:800px; margin:10px 0 18px}
.note table{width:100%; border-collapse:collapse}
.note .co{text-align:center; line-height:1.45; font-size:13px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #000}
.note .coname{font-size:19px}
.note .reg{font-size:10.5px}
.note .addr{white-space:pre-line}
.note .void-stamp{color:var(--bad); font-size:26px; font-weight:800; border:3px solid var(--bad); display:inline-block; padding:2px 12px; transform:rotate(-4deg); margin:6px 0}
.note.do{font-size:14px}
.note.do .dotitle{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:4px 60px; margin:2px 0 10px}
.note.do .dotitle .title{font-size:20px; font-weight:800}
.note.do .dono{font-size:14px; min-width:230px}
.note.do .dohead{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:12px 40px}
.note.do .tobox{position:relative; flex:1 1 260px; max-width:480px; padding:6px 12px 8px; min-height:120px; display:flex; flex-direction:column; justify-content:space-between; line-height:1.5}
.note.do .tobox .c{position:absolute; width:26px; height:22px; border:0 solid #000}
.note.do .c.tl{top:0; left:0; border-top-width:1px; border-left-width:1px}
.note.do .c.tr{top:0; right:0; border-top-width:1px; border-right-width:1px}
.note.do .c.bl{bottom:0; left:0; border-bottom-width:1px; border-left-width:1px}
.note.do .c.br{bottom:0; right:0; border-bottom-width:1px; border-right-width:1px}
.note.do .telfax{display:flex; gap:12px; margin-top:14px}
.note.do .telfax span{flex:1}
.note.do table.kv{width:auto; min-width:230px; flex:0 1 auto}
.note.do table.kv td{border:0; padding:4px 10px 4px 0; font-size:14px}
.note.do table.lines{margin:14px 0 0}
.note.do table.lines th{font-weight:400; font-size:13px; border-top:1px solid #000; border-bottom:1px solid #000; padding:5px 4px; text-align:left; white-space:nowrap}
.note.do table.lines td{border:0; font-size:13px; padding:4px; vertical-align:top}
.note.do table.lines tbody tr:first-child td{padding-top:10px}
.note.do table.lines tr{break-inside:avoid}
.note.do td.q, .note.do th.q{text-align:right; white-space:nowrap}
.note.do .pkl{font-size:12.5px}
.note.do .donote{font-weight:700; white-space:pre-line; margin:14px 0 0 4px; break-inside:avoid}
.note.do .dofoot{padding-top:24px; break-inside:avoid}
.note.do .dototal{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:10px 20px; border-top:1px solid #000; padding-top:8px}
.note.do .fine{font-size:10px; line-height:1.4}
.note.do .notice{margin-top:10px}
.note.do .tot{display:flex; align-items:center; gap:12px; font-size:13px; margin-left:auto}
.note.do .totbox{display:inline-block; min-width:140px; border:1px solid #000; text-align:right; font-weight:700; padding:2px 4px}
.note.do .sigs{display:grid; grid-template-columns:1fr 1fr; gap:20px 30%; margin-top:48px}
.note.do .sig{text-align:center; font-size:13px}
.note.do .sig em{display:block; font-family:Georgia,serif; font-weight:700; border-bottom:1px solid #000; padding-bottom:3px; margin-bottom:5px}
.note.do.measure{width:178mm!important; max-width:none!important; border:0!important; padding:0!important}

/* the packing list */
.note.pl{font-size:12px; line-height:1.4}
.note.pl .pltitle{font-size:18px; letter-spacing:1px; margin:10px 0 8px; text-align:center}
.note.pl .plhead{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:10px}
.note.pl .plbox{border:1px solid #222; padding:6px 8px}
.note.pl .kv2{display:grid; grid-template-columns:96px 1fr; row-gap:3px}
.note.pl .kv2 span:nth-child(odd){color:#555}
.note.pl table th, .note.pl table td{border:1px solid #222; padding:5px 6px; vertical-align:top}
.note.pl table th{background:#eee; font-size:11px; text-align:left}
.note.pl .n{text-align:right} .note.pl .c{text-align:center}
.note.pl .sub{color:#555; font-size:11px}
.note.pl tr.total td{font-weight:700; background:#f4f4f4}
.note.pl .plrem{margin-top:10px; border:1px solid #222; padding:6px 8px; min-height:40px}
.note.pl .plrem table{margin-top:4px}
.note.pl .pltot{margin:8px 0 0; font-weight:700}
.note.pl .plsign{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
.note.pl .plsign div{border-top:1px solid #222; padding-top:4px; font-size:11px}
@media(max-width:600px){ .note{padding:14px; overflow-x:auto} .note.pl .plhead{grid-template-columns:1fr} .note.pl table{font-size:10.5px}
  .note.do .sigs{gap:12px} .note.do .dotitle{justify-content:space-between; gap:4px 12px} .note.do .dono{min-width:0} }

/* ---------------------------------------------------------------- print: only the paper, and only for those who print */
@page do{size:A4; margin:10mm 10mm 27.6mm}
@media print{
  @page{size:A4; margin:10mm}
  html, body{background:#fff!important}
  header.top, .noprint, .gen-fab, .gen-panel, .glass-stats, .lightbox, .back, .err, .ok{display:none!important}
  .wrap{padding:0!important; max-width:none!important; background:none!important}
  .note{border:0; padding:0; max-width:none; margin:0; box-shadow:none; background:#fff!important}
  body:not(.canprint) .note{display:none!important}
  .note.do{page:do; padding:0 6mm}
  .note.do .dogap{height:var(--do-gap,0)}
  .note.do.onepage .dogap{height:0}
  .note.do.onepage .dofoot{position:absolute; left:6mm; right:6mm; bottom:0}
}