/* Screen-only workspace; existing print layout and output engines are retained. */
@media screen{
body{font-family:var(--sans);font-size:16px;line-height:1.6}button,input,select,textarea{font-family:inherit}button,a,input,select,textarea{touch-action:manipulation}button,a{transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus,var(--accent,#427d8a));outline-offset:3px}.product-kicker{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}.product-note{font-size:14px;color:var(--muted);margin:12px 0 0}input,select,textarea{font-size:16px}h1,h2,h3{font-family:var(--sans)}[hidden]{display:none!important}
}
@media screen and (max-width:640px){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
@media screen{
:root{--sans:'Workspace Sans','Avenir Next',sans-serif;--desk:#eff4f5;--ink:#213f46;--ink2:#516b71;--blue:#327d8e;--rule:#c6d6da;--hair:#dee9ec;--tint:#f0f8fa;--tint2:#e5f3f6;--focus:#327d8e}
body{background:var(--desk)}.topbar{max-width:none;margin:0;background:#213f46;color:#fff;padding:20px max(28px,calc((100vw - 1440px)/2));min-height:78px}.brand span{font-size:24px;letter-spacing:-.7px}.brand em{color:#d3e2e5;border-color:#678186;font-size:13px}.topbar nav a{color:#e7f2f4;font-size:14px;border-radius:6px}.topbar nav a:hover{background:#395e66;color:#fff;text-decoration:none}main{max-width:1440px;padding:28px;margin:auto}.sheet{border:1px solid #d4e2e6;border-radius:12px;box-shadow:0 8px 30px #264c5508;overflow:hidden}.titleblock{grid-template-columns:minmax(0,1fr) 220px 120px;border-bottom:0;background:linear-gradient(120deg,#fff,#eff7f9)}.titleblock>div{padding:28px}.formno{font:700 13px var(--sans);letter-spacing:.1em;color:var(--blue);margin-top:0}.titleblock h1{font:700 40px/1.1 var(--sans);letter-spacing:-1.4px;margin:12px 0}.titleblock h1 span{display:block;font-size:24px;letter-spacing:-.7px;margin-top:6px}.lede{font-size:16px;max-width:75ch;line-height:1.65}.formula-line{font-size:14px;color:var(--ink2)}.tb-field{align-self:center}.lbl{font-size:13px;line-height:1.5}.tb-field input{min-height:46px;border-radius:7px}.settings{margin:0 24px 22px;border:1px solid var(--hair);border-radius:8px;overflow:hidden;background:#f7fafb}.settings .field{padding:14px 16px}.settings select{font-size:16px;border:1px solid var(--rule);border-radius:6px;min-height:44px;background-color:#fff}.lbl i{background:#dff1f5;color:var(--blue);font-family:var(--sans)}.lines-head{padding:18px 24px 12px}.lines-head h2{font-size:22px}.lines-head p{font-size:15px}.stamp{font-family:var(--sans);font-size:13px;transform:none;border-radius:5px;background:#ecf7f9;border-color:#bfdee5}.lines th{background:#f0f7f9;font:700 13px var(--sans);padding-top:14px;padding-bottom:14px;color:#496a71}.lines input{font-family:var(--sans);font-size:16px;border-radius:5px}.lines td{padding-top:11px;padding-bottom:11px}.lines tbody tr:nth-child(even){background:#f8fbfb}.table-wrap{margin-bottom:0}.line-actions{padding:16px 24px}.btn{font-family:var(--sans);font-size:15px;min-height:44px;border-radius:7px}.totals{border:0;margin:20px 24px 24px;background:#213f46;border-radius:9px;color:#fff;overflow:hidden}.totals>div{padding:20px 24px;border-color:#4f7179}.totals .key{background:#387684}.totals .lbl,.totals small{color:#deecf0}.totals strong{font-size:31px}.totals .key strong{font-size:36px}.charges{gap:16px;border:0;margin:0 24px 28px}.charge{border:1px solid #d6e6e9!important;background:#f8fdfe;border-radius:9px;padding:20px!important}.charge h3{font-size:17px}.charge h3 span{font-size:13px;color:#57747b;line-height:1.5}.charge strong{font-size:25px;color:#2b6876}.charge p{font-size:14px;line-height:1.6}.ctr-block{padding:24px;border-top:1px solid var(--hair);border-bottom:0}.ctr-intro{grid-template-columns:280px 1fr;gap:24px}.ctr-intro h2{font-size:23px;letter-spacing:-.6px}.ctrs{border:0;gap:16px}.ctr{border:1px solid #cee0e4!important;border-radius:9px;padding:20px;background:linear-gradient(#f4fafb,#fff)}.ctr-h b{font-size:22px}.ctr-h span{font-size:13px;line-height:1.6}.ctr .bar{height:44px;margin:20px 0;border:2px solid #31636e;background:repeating-linear-gradient(90deg,#e4eff2 0 18px,#cadde2 18px 19px);border-radius:4px;overflow:hidden}.ctr .bar i{height:100%;background:#d6a455;border-right:2px solid #9e6b23}.ctr dt,.ctr dd small{font-size:13px}.ctr dd{font-size:17px}.note{font-size:14px}.doc-actions{padding:20px 24px;background:#f3f9fa;border-top:1px solid var(--hair)}.annex{gap:28px}.toc{border-radius:9px;border-color:#d7e5e9}.ref section{background:#fff;border:1px solid #d7e5e9;padding:26px;border-radius:9px;margin-bottom:18px}.ref h2{font-size:25px}.ref h3{font-size:19px}.ref p,.ref li{font-size:16px}.data th,.data td,.pertype td,.pertype th{font-size:14px}.footer{background:#213f46;color:#fff}.footer a{color:inherit}
}
@media screen and (max-width:1100px){.topbar{flex-wrap:wrap;padding:18px 24px;gap:14px}.topbar nav{width:100%;margin:0}.titleblock{grid-template-columns:minmax(0,1fr) 190px}.tb-date{display:none}.settings{grid-template-columns:repeat(3,1fr)}.titleblock>div{padding:24px}.ctrs{gap:12px}.totals>div{padding:18px}.ctr{padding:16px}.ctr-intro{grid-template-columns:1fr}.annex{grid-template-columns:180px minmax(0,1fr)}}
@media screen and (max-width:760px){main{padding:18px 12px}.topbar{padding:16px}.brand em{font-size:12px}.topbar nav{gap:0}.topbar nav a{font-size:13px;padding:8px}.titleblock{display:block}.titleblock>div{padding:20px}.titleblock h1{font-size:32px}.titleblock h1 span{font-size:21px}.tb-ref{border-top:1px solid var(--hair)}.tb-date{display:none}.settings{margin:0 16px 18px;grid-template-columns:1fr 1fr}.settings .field{padding:12px}.settings .field:last-child{grid-column:1/-1}.lines-head{padding:16px;display:flex;flex-wrap:wrap;gap:8px}.lines th,.lines td{font-size:14px}.lines input{min-height:44px}.totals{grid-template-columns:1fr 1fr;margin:18px 16px}.totals>div{padding:16px}.totals strong,.totals .key strong{font-size:25px}.charges{grid-template-columns:1fr;margin:0 16px 20px;gap:12px}.charge{padding:18px!important}.ctr-block{padding:20px 16px}.ctrs{grid-template-columns:1fr}.ctr .bar{height:36px}.line-actions,.doc-actions{padding:16px;gap:10px;flex-wrap:wrap}.doc-actions .btn{flex:1}.annex{display:block}.ref section{padding:20px}.ref h2{font-size:23px}.toc{margin-bottom:18px}.topbar .brand{min-width:0}}
@media screen{.topbar .brand{color:#fff}.tb-date{padding-left:12px!important;padding-right:12px!important}.tb-date output{font-size:16px;white-space:nowrap}.titleblock{grid-template-columns:minmax(0,1fr) 200px 150px}.topbar .brand svg{color:#b1dde6}.topbar .brand em{font-style:normal}}@media screen and (max-width:1100px){.titleblock{grid-template-columns:minmax(0,1fr) 190px}}@media screen and (max-width:760px){.titleblock{display:block}}
@media screen{.sheet,.annex,.ref{min-width:0}.table-wrap{min-width:0;max-width:100%;overflow-x:auto}.formula-line{padding:0 24px 18px;margin:0;font-size:14px}.titleblock .lede{max-width:70ch}}@media screen and (max-width:760px){.formula-line{padding:0 16px 16px}.titleblock .tb-ref{padding:16px 20px}.titleblock .lede{margin-bottom:0}}

@media screen and (max-width:900px){
  .lines thead{display:none}
  .lines,.lines tbody,.lines tfoot{display:block}
  .lines tr{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--rule);margin:0}
  .lines tbody tr:first-child{border-top:1px solid var(--rule)}
  .lines td{display:flex;flex-direction:column;height:auto;border:0;border-bottom:1px solid var(--hair);width:auto!important;min-width:0}
  .lines td+td{border-left:0}
  .lines td.in,.lines td.out{border-left:1px solid var(--hair)}
  .lines td:nth-child(3),.lines td:nth-child(6),.lines td:nth-child(9){border-left:0}
  .lines td::before{content:attr(data-label);font:600 13px var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);padding:8px 10px 0;text-align:left}
  .lines td.no{grid-column:1/3;grid-row:1;flex-direction:row;align-items:center;background:var(--tint);font-size:14px;text-align:left;padding:0 10px}
  .lines td.no::before{content:"Line";padding:0 6px 0 0}
  .lines td.in input{text-align:left}
  .lines td:nth-child(10){grid-column:span 2}
  .lines td.rm{grid-column:3;grid-row:1;background:var(--tint);align-items:flex-end;justify-content:center}
  .lines td.rm::before{display:none}
  .lines td.name{grid-column:1/-1;grid-row:2}
  .lines input{height:44px}
  .lines td.out{text-align:left;padding:0 10px 10px;font-size:15px;justify-content:flex-start}
  .lines td.out::before{padding:8px 0 4px}
  .lines tfoot tr{grid-template-columns:repeat(3,1fr);border-top:2px solid var(--rule)}
  .lines tfoot th,.lines tfoot td{display:flex;align-items:center;border:0;height:44px}
  .lines tfoot td:empty{display:none}
  .lines tfoot th{grid-column:1/-1;justify-content:flex-start;background:var(--tint)}
  .lines tfoot td::before{content:attr(data-m);font:600 13px var(--sans);color:var(--ink2);padding:0 6px 0 0}

}

@media screen{
/* Current page. The eight pages already carried aria-current="page" in some
   places and nothing rendered it, so the navigation never said where you were. */
.topbar nav a[aria-current="page"]{background:#325861;color:#fff}

/* The data table scrolls inside its own box. Without a positioned ancestor the
   visually hidden .sr caption resolves against the viewport, so a 1237px table
   widened the whole document between 768 and 1190px instead of scrolling here. */
.table-wrap{position:relative;overscroll-behavior-x:contain}

/* A placeholder is a hint, not a value: it rendered in the same ink and weight
   as typed text, so "e.g. PO-2291" read as an already filled shipment reference. */
input::placeholder,textarea::placeholder{color:#668085;opacity:1}
input:focus::placeholder,textarea:focus::placeholder{color:#668085}
}

@media screen and (max-width:760px){
/* Five links wrapped to three rows and pushed the header to 210px on a 390px
   phone, a quarter of the viewport. One scrolling row keeps it to one. */
.topbar nav{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:2px;mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
.topbar nav::-webkit-scrollbar{width:0;height:0}
.topbar nav a{flex:0 0 auto;white-space:nowrap;min-height:44px}
}

@media screen{
/* Whenever a wide data table does overflow, say so: a clipped edge with an
   invisible scrollbar reads as a broken layout rather than a scrollable one. */
.table-wrap{scrollbar-width:thin;scrollbar-color:#a2bec4 #eaf2f4}
.table-wrap::-webkit-scrollbar{height:10px}
.table-wrap::-webkit-scrollbar-track{background:#eaf2f4;border-radius:5px}
.table-wrap::-webkit-scrollbar-thumb{background:#a2bec4;border-radius:5px}
.table-wrap::-webkit-scrollbar-thumb:hover{background:#84a4ac}
}

@media screen{
/* A lone "back" link is a control, not a word in a sentence, so it needs a
   real hit area: it rendered at 22px tall with nothing around it. */
p.back{margin:22px 0 0}
p.back a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font-weight:600}
}