/* Fonts served from this site (no third-party font requests): Manrope and Archivo (variable weight) and IBM Plex Mono, SIL OFL 1.1, see fonts-OFL.txt */
@font-face{font-family:'Manrope';font-style:normal;font-display:optional;font-weight:200 800;src:url(/fonts/manrope-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-display:optional;font-weight:200 800;src:url(/fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:optional;font-weight:200 800;src:url(/fonts/manrope-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Manrope';font-style:normal;font-display:optional;font-weight:200 800;src:url(/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:optional;font-weight:200 800;src:url(/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* 10-24: sized like Manrope until it arrives; Manrope is optional (not swapped in late): late fonts moved the page by 0.05 on tool pages */
@font-face{font-family:'Manrope Fallback';font-style:normal;font-weight:100 549;src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans"),local("Roboto"),local("Roboto-Regular");size-adjust:104%;ascent-override:102.5%;descent-override:28.8%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB,U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Manrope Fallback';font-style:normal;font-weight:550 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold"),local("Roboto Bold"),local("Roboto-Bold");size-adjust:101%;ascent-override:105.5%;descent-override:29.7%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB,U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;src:url(font-archivo-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;src:url(font-archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;src:url(font-archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:optional;font-weight:500;src:url(font-plexmono-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:optional;font-weight:700;src:url(font-plexmono-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme:dark;
  --desk:#0A1020; --panel:#0F182B; --panel-2:#141E33; --panel-3:#1C2A47; --field:#0B1426; --field-line:#5C6E90;
  --ink:#E6EAF2; --muted:#9AA6BC; --soft:#C9D3E6; --line:rgba(148,163,184,.17); --line-2:rgba(148,163,184,.30);
  --accent:#8FB4FF; --accent-ink:#0A1020; --accent-soft:rgba(79,139,255,.15);
  --brand:#2F62E8; --brand-hi:#4F80F5; --glow:rgba(79,139,255,.9);
  --ok:#5CD69A; --warn:#F5B544; --bad:#F48B82; --warn-soft:rgba(245,181,68,.14); --bad-soft:rgba(244,139,130,.14);
  --seller:#8FB4FF; --seller-soft:rgba(79,139,255,.15); --buyer:#F5B544; --buyer-soft:rgba(245,181,68,.14);
  --r-panel:18px; --r-ctl:12px; --r-field:10px;
  --f-ui:"Manrope","Manrope Fallback","Archivo","Noto Sans","IBM Plex Sans KR","Noto Sans Arabic","Noto Sans Devanagari","Noto Sans Bengali","Noto Sans SC","Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
html[lang="ja"]{--f-ui:"Manrope","Manrope Fallback","Noto Sans JP","Noto Sans",system-ui,sans-serif}
/* 10-23: Chinese pages use the system's Chinese face and never fetch Noto Sans SC (about 100 files per weight from Google Fonts, often slow from mainland China; the late swap moved the text) */
html[lang="zh"]{--f-ui:"Manrope","Manrope Fallback","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC","Noto Sans",system-ui,sans-serif}
html[lang="ko"]{--f-ui:"Manrope","Manrope Fallback","IBM Plex Sans KR","Noto Sans",system-ui,sans-serif}
html[lang="ar"],html[lang="ur"]{--f-ui:"Noto Sans Arabic","Manrope","Manrope Fallback",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--desk); color:var(--ink); font:16px/1.6 var(--f-ui); -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.wrap{max-width:980px; margin:0 auto; padding-inline:20px}
@media (max-width:420px){.wrap{padding-inline:16px}}
.top{background:var(--panel); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; min-height:60px; padding-block:8px}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px; color:var(--ink); text-decoration:none; letter-spacing:-.01em}
.brand svg{flex:none}
.top nav{display:flex; gap:10px 16px; align-items:center; flex-wrap:wrap; margin-inline-start:auto; font-size:14px}
.top nav a{text-decoration:none; font-weight:600}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 16px; border-radius:10px; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink)!important; font:600 15px/1.2 var(--f-ui); text-decoration:none; cursor:pointer}
.btn.ghost{background:transparent; color:var(--accent)!important}
.top select{font:14px var(--f-ui); padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); width:150px; max-width:150px}
main{padding-block:24px 56px}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:10px}
.crumbs a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent)}
h1{font-size:clamp(28px,5vw,40px); line-height:1.15; margin:0 0 10px; letter-spacing:-.02em; text-wrap:balance; overflow-wrap:break-word}
.lead{font-size:17px; color:var(--muted); margin:0 0 24px; max-width:68ch}
h2{font-size:22px; line-height:1.25; margin:40px 0 12px; letter-spacing:-.01em; text-wrap:balance}
h3{font-size:16px; margin:20px 0 8px}
p{max-width:70ch}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:16px}
label{font-size:13px; font-weight:600; color:var(--muted)}
input,select{font:16px var(--f-ui); color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:9px 10px; width:100%; min-height:42px}
input[type=radio],input[type=checkbox]{width:auto; min-height:0; accent-color:var(--accent)}
.opts{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin:4px 0 14px}
.opts label{display:inline-flex; gap:6px; align-items:center; color:var(--ink); font-weight:500; font-size:15px}
.opts .k{font-size:13px; font-weight:700; color:var(--muted)}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px}
@media (max-width:640px){.grid2{grid-template-columns:minmax(0,1fr)}}
.field{display:flex; flex-direction:column; gap:4px}
.num{font-family:var(--f-mono); direction:ltr; text-align:start}
html[dir=rtl] .num{text-align:right}
/* CBM rows */
.crow{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) auto; gap:10px; align-items:end; padding:12px 0; border-top:1px dashed var(--line)}
.crow:first-child{border-top:0; padding-top:0}
@media (max-width:640px){.crow{grid-template-columns:repeat(3,minmax(0,1fr))} .crow .del{grid-column:span 3; justify-self:end}}
.del{background:none; border:0; color:var(--muted); font:14px var(--f-ui); cursor:pointer; padding:8px; min-height:42px}
.add{background:none; border:1px dashed var(--accent); color:var(--accent); border-radius:10px; padding:10px 14px; font:600 14px var(--f-ui); cursor:pointer; margin-top:6px}
.kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
@media (max-width:560px){.kpis{grid-template-columns:minmax(0,1fr)}}
.kpi{background:var(--panel-2); border-radius:10px; padding:12px 14px}
.kpi span{display:block; font-size:13px; color:var(--muted); font-weight:600}
.kpi b{display:block; font:700 22px/1.3 var(--f-mono); direction:ltr; unicode-bidi:isolate}
html[dir=rtl] .kpi b{text-align:right}
.bar{margin:10px 0 14px}
.bar .lbl{display:flex; flex-direction:row; justify-content:space-between; align-items:baseline; gap:12px; font:inherit; font-size:14px; flex-wrap:wrap;
  width:auto; height:auto; padding:0; background:none; color:inherit; overflow:visible}   /* the shipping-mark label rule .lbl (white paper) must not reach the CBM container bars */
.bar .lbl b{font-weight:700}
.bar .track{height:12px; border-radius:6px; background:var(--panel-2); overflow:hidden; margin-top:6px}
.bar .fill{height:100%; background:var(--accent); border-radius:6px; width:0; transition:width .25s}
.bar.over .fill{background:var(--warn)}
.charge{display:grid; gap:10px}
/* 10-23: the calculators fill their result boxes after the first paint, and the notes and buttons below jumped (CLS 0.02-0.08, phone CBM 0.080).
   While a box is still empty it keeps the smallest filled height measured in the 15 languages at that width (it can only grow a little, never shrink) */
#cont:empty{min-height:149px} #charge:empty{min-height:255px}
@media (max-width:767px){ #clOut:empty{min-height:759px} #vwOut:empty{min-height:1012px} }
@media (min-width:768px){ #clOut:empty{min-height:293px} #vwOut:empty{min-height:434px} }
#emInfo:empty, #hsRes:empty, #sbList:empty{min-height:42px}   /* the one-line hint the script puts there (email templates, HS search, shipment tracker): 42-62 px in every language */
.charge div{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 12px; background:var(--panel-2); border-radius:10px}
.charge b{font-family:var(--f-mono); direction:ltr; unicode-bidi:isolate}
.charge small{display:block; width:100%; color:var(--muted); font-size:13px}
.note{font-size:13px; color:var(--muted); margin:14px 0 0}
.warn{background:var(--warn-soft); color:var(--warn); border-radius:10px; padding:8px 12px; font-size:14px; margin:8px 0}
/* words */
.out{display:block; font:600 17px/1.55 var(--f-mono); direction:ltr; text-align:left; background:var(--panel-2); border-radius:10px; padding:14px; margin:8px 0 10px; word-break:break-word; min-height:56px}
.out[dir="rtl"]{direction:rtl; text-align:right}
/* incoterms */
.ttable{width:100%; border-collapse:separate; border-spacing:0; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:14px}
.ttable th,.ttable td{padding:10px 12px; text-align:start; vertical-align:top; border-bottom:1px solid var(--line)}
.ttable thead th{background:var(--panel-2); font-size:13px; color:var(--muted)}
.ttable tbody tr:last-child td,.ttable tbody tr:last-child th{border-bottom:0}
.ttable .code{font:800 17px var(--f-mono); color:var(--accent); display:block}
.ttable .nm{font-size:13px; color:var(--muted); font-weight:500}
.ttable tr.grp td{background:var(--accent-soft); font-weight:700; color:var(--accent); font-size:13px}
.who{display:inline-block; padding:2px 8px; border-radius:999px; font-weight:700; font-size:13px; white-space:nowrap}
.who.s{background:var(--seller-soft); color:var(--seller)}
.who.b{background:var(--buyer-soft); color:var(--buyer)}
.who.n{color:var(--muted); font-weight:500; padding-inline:0}
@media (max-width:760px){
  .ttable thead{display:none}
  .ttable, .ttable tbody, .ttable tr, .ttable td, .ttable th{display:block; width:100%}
  .ttable tr{border-bottom:1px solid var(--line); padding:6px 0}
  .ttable td,.ttable th{border:0; padding:4px 14px}
  .ttable td[data-h]{display:flex; justify-content:space-between; align-items:baseline; gap:12px; text-align:end}
  .ttable td[data-h]::before{content:attr(data-h); font-size:12px; color:var(--muted); font-weight:600; text-align:start; flex:0 1 45%}
  .ttable td.dl{display:block; text-align:start}
  .ttable td.dl::before{display:block}
  .obtbl td[data-h]{display:block; text-align:start}
  .obtbl td[data-h]::before{display:block; margin-bottom:2px}
}
/* templates */
.tcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:760px){.tcards{grid-template-columns:minmax(0,1fr)}}
.tcard{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px}
.tcard h3, .tcard h2{margin:0; font-size:18px}
.tcard p{margin:0; color:var(--muted); font-size:15px; flex:1}
.hub{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:640px){.hub{grid-template-columns:minmax(0,1fr)}}
.hub a{display:block; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; text-decoration:none; color:var(--ink)}
.hub a b{display:block; font-size:18px; margin-bottom:4px; color:var(--accent)}
.hub a span{color:var(--muted); font-size:15px}
/* cta, guide, faq */
.cta{background:var(--accent); color:var(--accent-ink); border-radius:16px; padding:22px; margin:32px 0 8px}
.cta h2{margin:0 0 6px; color:inherit; font-size:20px}
.cta p{margin:0 0 14px; opacity:.9}
.cta .btn{background:var(--accent-ink); color:var(--accent)!important; border-color:var(--accent-ink)}
.guide p{color:var(--muted)}
details{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:10px}
summary{font-weight:700; cursor:pointer}
details p{color:var(--muted); margin:8px 0 0}
.related{display:flex; flex-wrap:wrap; gap:10px}
.related a{background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 14px; text-decoration:none; font-weight:600; font-size:14px}
footer.site{border-top:1px solid var(--line); padding-block:20px 40px; font-size:13px; color:var(--muted)}
footer.site .langs{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px}
.copyrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.copied{color:var(--ok); font-size:14px; font-weight:600}
/* container table, Incoterms rule pages */
.ttable small{display:block; color:var(--muted); font-size:12px; font-weight:500}
.ctable td{white-space:nowrap}
@media (max-width:760px){.ctable td{white-space:normal}}
.glance h2{margin:0 0 12px; font-size:18px}
.gl{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px}
@media (max-width:560px){.gl{grid-template-columns:minmax(0,1fr)}}
.gl div{background:var(--panel-2); border-radius:10px; padding:10px 12px}
.gl > div > span{display:block; font-size:12px; color:var(--muted); font-weight:600}
.gl b{font-weight:600; font-size:15px}
.cost{max-width:620px}
.cost td{width:40%}
a.code{text-decoration:none}
a.code:hover{text-decoration:underline}
.ttable .nm2{display:block; font-weight:700; font-size:14px; color:var(--ink)}
.ctable th[scope=row]{min-width:150px}
main ul{padding-inline-start:20px; margin:8px 0 0}
main li{margin:6px 0; color:var(--muted); max-width:70ch}
.grid2 section h2{margin-top:28px}
/* shipping marks, LC checklist */
.lclist{display:flex; flex-direction:column; gap:2px}
.lcrow{display:flex; align-items:flex-start; gap:10px; padding:10px 4px; border-top:1px dashed var(--line); cursor:pointer; font-weight:400}
.lcrow:first-child{border-top:0}
.lcrow input{margin-top:4px}
.lcrow span{color:var(--ink); font-size:15px; max-width:60ch}
/* glossary */
.glossary{margin:0}
.glitem{padding:12px 0; border-top:1px dashed var(--line)}
.glitem:first-child{border-top:0}
.glitem dt{font-weight:700; font-size:15px; margin:0 0 4px}
.glitem dt a{text-decoration:none}
.glitem dt a:hover{text-decoration:underline}
.glitem dd{margin:0; color:var(--muted); font-size:14px; max-width:65ch}
[hidden]{display:none!important}
/* tool cards (hub, next steps) */
.tl-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px}
.tl{display:flex; gap:12px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s}
.tl:hover{border-color:var(--accent); transform:translateY(-1px)}
.tl-ic{flex:none; width:40px; height:40px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center}
.tl-tx b{display:block; font-size:15px; line-height:1.3}
.tl-tx small{display:block; color:var(--muted); font-size:13px; line-height:1.4; margin-top:2px}
@media (prefers-reduced-motion:reduce){.tl{transition:none} .tl:hover{transform:none}}
.hubg h2{font-size:17px; margin:28px 0 10px; color:var(--muted); text-transform:none}
.hub-ask{background:var(--accent); color:var(--accent-ink); border-radius:16px; padding:18px; margin:0 0 18px}
.hub-ask label{display:flex; align-items:center; gap:8px; color:inherit; font-size:17px; margin-bottom:10px}
.hub-ask .ask-row{display:flex; gap:8px}
.hub-ask input{flex:1; min-width:0; background:var(--panel); border-color:transparent}
.hub-ask .btn{background:var(--accent-ink); color:var(--accent)!important; border-color:var(--accent-ink); min-height:42px}
.hub-search input{max-width:420px}
.hub-none{margin-top:18px; color:var(--muted)}
.next{margin:6px 0 0}
.next h2{font-size:15px; margin:18px 0 8px; color:var(--muted)}
.next-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px}
.tl-next .tl-ic{width:34px; height:34px}
.tl-next b::after{content:" →"}
html[dir=rtl] .tl-next b::after{content:" ←"}
.btn svg{flex:none}
/* header AI link, ask box, support line */
.top nav .ai-link{display:inline-flex; align-items:center; gap:5px}
.askbox{display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:32px 0 8px}
.askbox b{display:block; font-size:16px}
.askbox p{margin:2px 0 0; color:var(--muted); font-size:14px}
.supportline{margin:28px 0 0; font-size:14px; color:var(--muted)}
/* affiliate partner box (always labelled) */
.aff{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 18px 12px; margin:28px 0 8px}
.aff .afftag{display:inline-block; font-size:12px; font-weight:600; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 9px; margin:0 0 8px}
.aff p{margin:0 0 10px; font-size:14px; color:var(--muted)}
.aff p.affh{margin:0 0 4px; color:inherit}
.aff p.affh b{font-size:16px}
.aff p.affnote{margin:10px 0 0; font-size:12.5px}
.supportline a{font-weight:700; text-decoration:none}
/* AI assistant */
.chat{padding:14px 16px}
.chat-top{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.chat-top .opts{margin:0}
.msgs{display:flex; flex-direction:column; gap:10px; min-height:200px; max-height:min(62vh, 640px); overflow-y:auto; padding:12px 2px; margin:8px 0; border-block:1px solid var(--line); overscroll-behavior:contain}
.msg{display:flex}
.msg.user{justify-content:flex-end}
.bubble{max-width:min(92%, 700px); padding:10px 14px; border-radius:14px; font-size:15px; line-height:1.6; background:var(--panel-2); color:var(--ink); overflow-wrap:anywhere}
.msg.user .bubble{background:var(--accent); color:var(--accent-ink); border-end-end-radius:4px}
.msg.user .bubble a{color:inherit}
.msg.bot .bubble{border-end-start-radius:4px}
.bubble p{margin:0 0 8px; max-width:none}
.bubble p:last-child{margin-bottom:0}
.bubble ul,.bubble ol{margin:4px 0 8px; padding-inline-start:20px}
.bubble li{margin:3px 0; color:inherit; max-width:none}
.bubble .mdh{font-weight:700; margin-top:8px}
.bubble code{font-family:var(--f-mono); font-size:13px; background:var(--panel); padding:1px 5px; border-radius:4px}
.bubble .mdt{overflow-x:auto; margin:6px 0 10px}
.bubble table{border-collapse:collapse; font-size:13px; min-width:100%}
.bubble th,.bubble td{border:1px solid var(--line); padding:5px 8px; text-align:start; vertical-align:top}
.bubble th{background:var(--panel)}
.srcs{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; font-size:12px}
.srcs span{color:var(--muted); font-weight:600}
.srcs a{background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px 10px; text-decoration:none; font-weight:600}
.mini-copy{margin-top:8px; background:none; border:1px solid var(--line); border-radius:8px; padding:3px 10px; font:600 12px var(--f-ui); color:var(--muted); cursor:pointer}
.typing{color:var(--muted); animation:tpulse 1.2s ease-in-out infinite}
@keyframes tpulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.typing{animation:none}}
.warnmsg{color:var(--warn)}
.chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 12px}
.chips .k{font-size:13px; font-weight:700; color:var(--muted)}
@media (max-width:640px) and (max-height:760px){ #aiChips > .k{display:none} #aiChips{margin-top:6px} }   /* short phones: the first question above the fixed box (10-25 QA 8: 360x740 cut by 7 px) */
.chip{background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:7px 12px; font:500 14px/1.35 var(--f-ui); color:var(--ink); cursor:pointer; text-align:start}
.chip:hover{border-color:var(--accent)}
.ask{display:flex; gap:8px; align-items:flex-end}
.ask textarea{flex:1; min-width:0; font:16px/1.5 var(--f-ui); color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; resize:vertical; min-height:50px; max-height:220px}
.ask .btn{min-height:50px; padding-inline:20px}
.ask .btn:disabled{opacity:.55; cursor:wait}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* support page */
.promise{font-size:16px; border-inline-start:4px solid var(--accent)}
.promise p{margin:0 0 10px; color:var(--ink)}
.promise .sign{color:var(--muted); font-size:15px; margin:6px 0 0}
.sp-ways{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}
.sp-ways .tcard{gap:12px}
.btnrow{display:flex; flex-wrap:wrap; gap:8px}
.sp-qr{width:168px; height:168px; background:#fff; border-radius:10px; padding:8px}
.sp-qr:empty{display:none}
.sp-qr svg{width:152px; height:152px; display:block}
.sp-addr{display:block; font:600 13px var(--f-mono); background:var(--panel-2); border-radius:8px; padding:8px 10px; overflow-wrap:anywhere; direction:ltr; text-align:start}
.sp-list{margin:0; padding-inline-start:18px}
.sp-list li{margin:4px 0}
.sp-form label{display:block; margin:10px 0 4px}
.sp-form textarea{width:100%; font:16px/1.5 var(--f-ui); color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:9px 10px; resize:vertical}
.rate{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:8px; font-size:13px; color:var(--muted)}
.rate button[data-r]{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:2px 9px; font-size:15px; cursor:pointer; line-height:1.4}
.rate button[data-r]:hover{border-color:var(--accent)}
.rate a{font-weight:700}
/* container loading calculator */
.cl-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 14px}
@media (max-width:760px){.cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cl-up{display:inline-flex; gap:8px; align-items:center; margin-top:14px; font-weight:600; font-size:15px; color:var(--ink)}
.cl-up input{width:18px; height:18px; accent-color:var(--accent)}
.cltable td small, .cltable th small{display:block; font-size:12px; color:var(--muted); font-weight:500}
.cl-n{font:800 20px var(--f-mono); color:var(--accent)}
.cl-warn{color:var(--warn) !important; font-weight:600 !important}
.cl-best{display:inline-block; margin-inline-start:8px; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:700; white-space:nowrap}
.cltable tr.cl-top th, .cltable tr.cl-top td{background:var(--accent-soft)}
.cltable td.num{white-space:nowrap}
.cltable .cv{display:block}
.cl-lay, .cltable small{white-space:nowrap}
@media (max-width:760px){.cltable td.num{white-space:normal} .cltable .cv{text-align:end}}
/* HS code lookup */
.hs-find label{display:block; font-weight:700; margin-bottom:8px}
.hs-find .ask-row{display:flex; gap:8px}
.hs-find input{flex:1; min-width:0; font-size:17px; min-height:48px}
.hs-find .btn{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; min-height:48px}
@media (max-width:520px){.hs-find .ask-row{flex-direction:column} .hs-find .btn{justify-content:center}}
.hs-dec{margin-bottom:14px}
.hs-dec b small{display:block; font-size:13px; font-weight:500; color:var(--muted); margin-top:2px; line-height:1.4}
.hsl{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel)}
.hsr{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 12px; align-items:start; padding:10px 12px; border-top:1px solid var(--line)}
.hsr:first-child{border-top:0}
.hsr.on{background:var(--accent-soft)}
.hsr-code{font:800 15px var(--f-mono); color:var(--accent); background:var(--accent-soft); border:0; border-radius:8px; padding:5px 8px; cursor:pointer; direction:ltr; white-space:nowrap}
.hsr-code:hover{background:var(--accent); color:var(--accent-ink)}
.hsr-tx{font-size:14px; line-height:1.45; text-align:start}
.hsr-tx small{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.hsr-act{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.hsr-act .btn{padding:5px 10px; font-size:13px}
@media (max-width:560px){.hsr{grid-template-columns:auto minmax(0,1fr)} .hsr-act{grid-column:1 / -1; justify-content:flex-start}}
.hs-ai{border-color:var(--accent)}
.hs-ai h3{margin-top:0}
.hs-ai-h{margin:10px 0 14px}
.hs-kids{margin:6px 0 0; margin-inline-start:22px}
/* clean line breaks in every language: no Korean words split in the middle, no one-word last lines,
   balanced headings, and wider text columns for CJK (a "ch" is only half a CJK character wide) */
html:lang(ko) body{word-break:keep-all; overflow-wrap:break-word}
html:lang(ja) body{line-break:strict; word-break:auto-phrase; overflow-wrap:anywhere}
h1,h2,h3,.lead,summary,.tl-tx b{text-wrap:balance}
p,li,dd,small,.bubble,.note,label,button,.btn{text-wrap:pretty}
html:lang(ko) p, html:lang(ja) p, html:lang(zh) p,
html:lang(ko) .lead, html:lang(ja) .lead, html:lang(zh) .lead,
html:lang(ko) main li, html:lang(ja) main li, html:lang(zh) main li,
html:lang(ko) .glitem dd, html:lang(ja) .glitem dd, html:lang(zh) .glitem dd{max-width:48em}
.promise p, .card p.note, .tcard p{max-width:none}
/* volumetric weight */
.kpis2{grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:12px}
.vwtable .vw-c{font:800 16px var(--f-mono); color:var(--accent); display:block}
.vwtable small{display:block; font-size:12px; font-weight:600}
.vwtable .vw-size{color:var(--warn)}
.vwtable .vw-wt{color:var(--muted)}
.vwtable td.num{white-space:nowrap}
@media (max-width:760px){.vwtable td.num{white-space:normal} .vwtable td[data-h] .vw-c{display:inline}}
/* trade notes */
.nlist{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}   /* 11-03 QA 27: one shrinkable column (an auto track let a card grow to 334 px on a 320 px phone) */
.ncard{min-width:0; overflow-wrap:break-word}
.ncard h2{margin:0 0 6px; font-size:19px; line-height:1.35}
.ncard h2 a{color:var(--ink); text-decoration:none}
.ncard h2 a:hover{color:var(--accent)}
.ncard p{margin:0 0 10px; color:var(--muted)}
.nchecked{margin:-12px 0 16px}
.nbody h2{margin-top:28px}
.nsteps{padding-inline-start:0; list-style:none; counter-reset:st; display:grid; gap:8px}
.nsteps li{counter-increment:st; display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:start; color:var(--ink); max-width:none}
.nsteps li::before{content:counter(st); width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font:700 13px/26px var(--f-ui); text-align:center}
.nissues{display:grid; gap:10px}
.nissue{background:var(--panel); border:1px solid var(--line); border-inline-start:4px solid var(--warn); border-radius:10px; padding:12px 14px}
.nissue b{display:block; color:var(--ink)}
.nissue p{margin:6px 0 0; color:var(--muted); max-width:none}
.nissue p span{font-weight:700; color:var(--ok)}
.nsrc{padding-inline-start:20px}
.nsrc li{margin:6px 0; overflow-wrap:anywhere}
.nsrc small{color:var(--muted)}
.nshare{margin-top:24px; border-color:var(--accent)}
.nshare h2{margin-top:0}
.nshare textarea, .nshare input[type=email]{width:100%}
.nok{display:flex; gap:8px; align-items:flex-start; margin:10px 0; font-size:14px; color:var(--ink)}
/* phones: compact header — brand and language on one line, the three links on the next */
@media (max-width:640px){
  .top .wrap{position:relative; gap:6px; padding-block:8px 10px}
  .top select{position:absolute; top:12px; inset-inline-end:16px; width:auto; max-width:128px; height:32px; min-height:0; padding:3px 6px; font-size:13px}
  .top nav{width:100%; margin:0; gap:6px 12px; font-size:13px; justify-content:space-between}
  .top nav .hub-link{display:none}          /* the tools list is one tap away in the breadcrumb and the footer */
  .top nav .btn{padding:7px 12px; font-size:13px; white-space:normal; text-align:center}
}
/* container check */
.ct-msg{margin:12px 0 6px; font-weight:600}
.ct-msg.ok{color:var(--ok)} .ct-msg.bad{color:var(--bad, #b42318)} .ct-msg.warn{color:var(--warn)}
#ctOut .btnrow{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0}
/* port codes */
.pc-types .chip[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.pctable td small{color:var(--muted)}
.pc-t{display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--panel-2); margin:1px 0}
.pc-p{background:var(--accent-soft); color:var(--accent)}
/* pallet calculator and landed cost per unit */
.kpis4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.kpis4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi b.pal-big{color:var(--accent); font-size:26px}
.pal-extra{margin:12px 0 0; font-size:14px; line-height:1.7; max-width:none}
.pal-extra .dot{color:var(--muted)}
.pal-fig{margin:16px 0 0}
.pal-fig figcaption{font-size:13px; color:var(--muted); font-weight:600; margin-bottom:8px}
.pal-svg{display:block; max-width:100%; height:auto}
.pal-svg .pl{fill:#E6D7BC; stroke:#A88A58; stroke-width:1.5}
.pal-svg .bx{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.2}
.pal-svg .bx2{fill:var(--warn-soft); stroke:var(--warn)}
@media (prefers-color-scheme:dark){.pal-svg .pl{fill:#3A3122; stroke:#8C7449}}
.pal-type{max-width:360px}
#palFit h3{margin-top:22px}
.genload{margin:0 0 4px; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; max-width:none}
.genload:has(> .btn[hidden]):has(> .copied:empty){display:none}
.field .hint{display:block; font-size:12px; color:var(--muted); margin-top:4px}
.lu-row{display:grid; grid-template-columns:minmax(0,2.2fr) repeat(5,minmax(0,1fr)) auto; gap:10px; align-items:end; padding:10px 0; border-bottom:1px solid var(--line)}
.lu-row:first-child{padding-top:0}
.lu-row .del{align-self:end; min-height:42px}
body.lu-total .lu-rate{visibility:hidden}
@media (max-width:760px){.lu-row{grid-template-columns:repeat(2,minmax(0,1fr))} .lu-row .lu-name{grid-column:1 / -1} .lu-row .del{grid-column:1 / -1; justify-self:end; min-height:36px} body.lu-total .lu-rate{display:none}}
.lutable td.num{white-space:nowrap}
.lutable th small{display:block; font-size:12px; color:var(--muted); font-weight:500}
.lutable tr.lu-tot th, .lutable tr.lu-tot td{background:var(--panel-2); font-weight:700}
@media (max-width:760px){.lutable td.num{white-space:normal}}
#luAct{margin-top:12px}
/* demurrage and detention */
.dd-terms h4{margin:14px 0 8px; font-size:14px}
.dd-comb{display:none}
body.dd-combined .dd-comb{display:block}
body.dd-combined .dd-sep{display:none}
.dd-dates input[type=date]{font-family:var(--f-ui)}
.dd-res{margin-bottom:18px}
.dd-res h3{margin:0 0 10px}
.kpi b.dd-bad{color:var(--warn)}
.kpi b.dd-ok{color:var(--ok)}
.kpi b.dd-date{font:700 16px/1.35 var(--f-ui); direction:inherit}
.dd-bar{display:flex; height:26px; border-radius:8px; overflow:hidden; margin-top:10px; font-size:12px; font-weight:700; line-height:26px; white-space:nowrap}
.dd-bar span{padding-inline:8px; overflow:hidden; text-overflow:ellipsis; min-width:0}
.dd-f{background:var(--accent-soft); color:var(--accent)}
.dd-c{background:var(--warn-soft); color:var(--warn)}
.dd-by{margin:10px 0 0; font-weight:700; color:var(--ink)}
.dd-tot{margin:8px 0 0; font-size:14px}
.dd-grand{margin:4px 0 0; font-size:17px; padding-top:12px; border-top:1px solid var(--line); max-width:none}
.dd-grand b{font:800 20px var(--f-mono); color:var(--accent)}
@media (max-width:560px){.kpis4 .kpi b{font-size:18px}}
/* carton labels */
.lb-ship .lb-wide{grid-column:1 / -1}
.lb-ship textarea{width:100%; font:16px/1.4 var(--f-ui); color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:9px 10px; resize:vertical}
.lb-row{display:grid; grid-template-columns:minmax(0,2fr) repeat(7,minmax(0,1fr)) auto; gap:8px; align-items:end; padding:10px 0; border-bottom:1px solid var(--line)}
.lb-row:first-child{padding-top:0}
.lb-row label{font-size:12px; line-height:1.25}
@media (max-width:900px){.lb-row{grid-template-columns:repeat(4,minmax(0,1fr))} .lb-row .lb-d{grid-column:1 / -1} .lb-row .del{grid-column:1 / -1; justify-self:end; min-height:36px}}
@media (max-width:480px){.lb-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lb-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:12px}
.lb-bar .btn{margin-inline-start:auto}
.lb-bar .btn:disabled{opacity:.5; cursor:not-allowed}
.lb-prev{display:flex; flex-wrap:wrap; gap:12px; zoom:var(--z,1)}
.lbl{width:var(--lw); height:var(--lh); box-sizing:border-box; padding:4.5mm; background:#fff; color:#000; font:var(--fs,11pt)/1.25 Arial,"Helvetica Neue",sans-serif; display:flex; flex-direction:column; gap:.18em; overflow:hidden; text-align:left}
.lbl > *{flex-shrink:0}
.lb-prev .lbl{border:1px solid #999; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.08)}
.lbl small{display:block; font-size:.6em; font-weight:700; letter-spacing:.04em; color:#444; line-height:1.3}
.lbl b{display:block; font-weight:700; overflow-wrap:anywhere}
.lb-top,.lb-2,.lb-4,.lb-to{border-bottom:.35mm solid #000; padding-bottom:.45em; margin-bottom:.3em}
.lb-top,.lb-2,.lb-4{display:grid; gap:0 .8em}
.lb-top{grid-template-columns:1fr auto; align-items:start}
.lb-2{grid-template-columns:1fr 1fr}
.lb-4{grid-template-columns:repeat(4,auto); justify-content:space-between}
.lb-cno{text-align:right}
.lb-cno b{font-size:2.3em; line-height:1; white-space:nowrap}
.lb-to b{font-size:1.45em; line-height:1.15}
.lb-to span{display:block; font-size:.85em; line-height:1.3; margin-top:.15em}
.lb-2 b{font-size:1.1em}
.lb-desc b{font-size:1.3em; line-height:1.2}
.lb-4 b{font-size:1em; white-space:nowrap}
.lb-foot{margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; gap:.8em}
.lb-foot b{font-size:1.3em}
.lb-foot span{display:block; font-size:.9em; font-weight:700; margin-top:.2em}
.lb-bcw{flex:0 0 48%; text-align:center}
.lb-bc{display:block; width:100%; height:calc(var(--fs,11pt) * 4); fill:#000}
.lb-bcw small{margin-top:.25em; font-size:.7em; font-weight:400; letter-spacing:.08em; color:#000}
#lbPrintArea{display:none}
/* Printing (Ctrl+P / "Save as PDF"): the page's own content, dark text on white, without the site menu, footer, ads and the
   sign-up, share and "ask AI" boxes. Label sheets: lb.js / il.js add body.lb-printing just before printing, and then only
   #lbPrintArea prints (before 2026-10-11 that rule applied to every page, so printing a guide gave a blank page). */
@media print{
  :root{color-scheme:light; --desk:#fff; --panel:#fff; --panel-2:#F3F5F9; --ink:#000; --muted:#3A4150; --line:#BFC5D2;
    --accent:#1F2E80; --accent-ink:#fff; --accent-soft:#E1E6F7; --ok:#1D7447; --warn:#94520A; --warn-soft:#FBEFD8;
    --seller:#1F2E80; --seller-soft:#E1E6F7; --buyer:#8A4B08; --buyer-soft:#FBEFD8}
  html, body{background:#fff !important}
  html{-webkit-print-color-adjust:exact; print-color-adjust:exact}   /* keep the risk and cost bars, chips and table shading */
  body{margin:0}
  .top, footer.site, ins.adsbygoogle, .google-auto-placed, .nlbox, .nsharebar, .nshare, .askbox, aside.cta, aside.aff, nav.next, .rel, .mbar, .skip{display:none !important}
  .card{box-shadow:none}
  main::after{content:"triplicatedocs.com"; display:block; margin-top:18px; padding-top:6px; border-top:1px solid var(--line); font-size:10pt; color:var(--muted)}
  body.lb-printing > *:not(#lbPrintArea){display:none !important}
  body.lb-printing #lbPrintArea{display:block}
  #lbPrintArea .lb-sheet{width:var(--pw); height:var(--ph); display:grid; overflow:hidden; break-after:page; page-break-after:always}
  #lbPrintArea.lb-a4 .lb-sheet{grid-template-columns:repeat(auto-fill, var(--lw)); grid-auto-rows:var(--lh); align-content:start}
  #lbPrintArea.lb-a4 .lbl{outline:.2mm dashed #bbb; outline-offset:-.1mm}
  #lbPrintArea .lb-sheet:last-child{break-after:auto; page-break-after:auto}
}
/* table of contents on trade notes, related notes and guides */
.ntoc b{display:block; font-size:14px; margin-bottom:6px}
.ntoc ol{margin:0; padding-inline-start:20px; display:grid; gap:3px; font-size:14.5px}
.ntoc li{max-width:none}
.ntoc a{text-decoration:none}
.ntoc a:hover{text-decoration:underline}
.nbody h2, #steps, #docs, #issues{scroll-margin-top:16px}
.rel h2{font-size:19px; margin:32px 0 10px}
.rel-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.rel-card{display:block; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; text-decoration:none; color:var(--ink)}
.rel-card:hover{border-color:var(--accent)}
.rel-card b{display:block; font-size:15.5px; line-height:1.35; margin-bottom:4px; text-wrap:balance}
.rel-card small{display:block; font-size:13px; line-height:1.45; color:var(--muted)}
.nfilter{margin:4px 0 16px}
.nfilter .chip[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.nfilter .nfcount{margin-inline-start:auto}
.ncard[hidden]{display:none}
.nsharebar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:18px 0 6px}
.nsharebar b{font-size:14px; margin-inline-end:4px}
.nsharebar .btn{padding:7px 12px; font-size:14px}
.dev .card{margin:0 0 16px}
.dev h3{margin:16px 0 6px; font-size:16px}
.dev-code{background:#0f172a; color:#e2e8f0; border-radius:10px; padding:12px 14px; overflow-x:auto; font:13px/1.5 var(--f-mono, ui-monospace, monospace); margin:8px 0 12px; white-space:pre}
.dev code{font-family:var(--f-mono, ui-monospace, monospace); font-size:.92em}
.dev-code code{font-size:inherit}
.dev .card{min-width:0}
.dev-code{max-width:100%}
.dev :not(pre) > code{overflow-wrap:anywhere}
.dev li, .dev p{overflow-wrap:anywhere}
.tcard .tmore{font-size:14px; text-align:center}
.tpl-fields{margin:0 0 14px; padding-left:20px; display:grid; gap:6px}
.tpl-fields li{line-height:1.5}
.tpl-dl{display:flex; flex-wrap:wrap; gap:10px; margin:0}
#ctOut .ct-lines{gap:6px}
#ctOut .ct-lines .chip{text-decoration:none}
.linkbtn{background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; cursor:pointer; font:inherit}
.ep-exw{font-weight:600; margin:12px 0 0; min-height:1.4em}
.ex-top{margin:4px 0 0}
.cbm-top{margin:12px 0 0}
.ex-top[hidden]{display:none}
.ep-table th small{display:block; font-weight:400; color:var(--muted); font-size:12px}
.ep-table td:last-child{white-space:nowrap}
.ep-table .code{font-family:var(--f-mono); letter-spacing:.02em}
#epForm h3{margin:18px 0 8px}
#epForm select{width:100%}
#epForm .field{display:flex; flex-direction:column}
#epForm .field label{flex:1}
.gl-az{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 12px}
.gl-az span{font-size:13px; color:var(--muted); margin-inline-end:4px}
.gl-az a{display:inline-flex; min-width:30px; height:30px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; background:var(--panel); text-decoration:none; font-weight:600; font-size:14px}
.glitem{scroll-margin-top:80px}
.hs-chlist{columns:2; column-gap:28px; padding-left:0; list-style:none; margin:10px 0 0}
.hs-chlist li{break-inside:avoid; margin:0 0 8px; line-height:1.4}
.hs-chlist small{color:var(--muted); font-size:12px}
@media (max-width:700px){.hs-chlist{columns:1}}
.hs-head h2{font-size:17px; margin:0 0 8px}
.hs-subs{margin:0; padding-left:18px; display:grid; gap:4px}
.hs-subs b{margin-inline-end:6px}
.card > h2:first-child{margin-top:0}
.pcc-sec h2{margin:0 0 12px; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px} .pcc-sec h2 small{color:var(--muted); font-size:14px; font-weight:600}
.pcc-sec p{margin:0}
.isel-q{border:0; margin:0 0 18px; padding:0; min-width:0}
.isel-q legend{font-weight:700; font-size:17px; margin:0 0 10px; padding:0}
.isel-opt{display:flex; align-items:flex-start; gap:10px; padding:11px 14px; margin:0 0 8px; border:1.5px solid var(--line); border-radius:10px; background:var(--panel-2); cursor:pointer; line-height:1.45}
.isel-opt:hover{border-color:var(--accent)}
.isel-opt input{margin:3px 0 0; accent-color:var(--accent); flex:none}
.isel-opt:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.isel-opt[hidden]{display:none}
.isel-res h2{margin-top:0}
.isel-code{font-size:20px; margin:0 0 12px}
.isel-code b{font-family:var(--f-mono); font-size:28px; color:var(--accent); margin-inline-end:8px}
.isel-r h3{font-size:16px; margin:16px 0 4px}
.isel-r p{margin:0 0 8px}
#iselPlaceRow{margin:16px 0 4px; display:flex; flex-direction:column; gap:6px; max-width:420px}
#iselPlaceRow label{font-weight:600; font-size:14px}
#iselPlaceRow[hidden]{display:none}
.isel-opt span{font-weight:500}
.kc-gl small{display:block; color:var(--muted); font-size:13px; margin-top:2px}
.hsfor-list li{display:flex; gap:10px; align-items:baseline}
.hsfor-list .hsr-code{flex:none}
.hsfor-gl b{font-weight:600; font-size:14px; line-height:1.45}
[dir=rtl] .hsfor-list span[dir=ltr], [dir=rtl] .hsfor-gl b[dir=ltr]{text-align:left; display:block}
.hs-tariffs{margin:8px 0 0; padding-left:18px; columns:2 220px; column-gap:24px}
.hs-tariffs li{margin:2px 0}
.hs-head h2 a{text-decoration:none}
.hs-prod{border:1.5px solid var(--accent); border-radius:14px; padding:12px 14px; margin:0 0 14px; background:var(--accent-soft)}
.hs-prod h3{margin:0 0 8px}
.hs-prod-more{margin:10px 0 0; font-weight:700}
.card.callout{border-inline-start:4px solid var(--accent)}
.card.callout h2{margin-top:0}
.em-out input, .em-out textarea{width:100%; box-sizing:border-box; font:15px/1.5 var(--f-ui); padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink)}
.em-out textarea{min-height:420px; resize:vertical}
.em-out label{display:block; font-weight:700; margin:0 0 6px}
.em-pick{display:flex; flex-wrap:wrap; gap:8px}
.em-pre{white-space:pre-wrap; font:14px/1.5 var(--f-ui); background:var(--panel-2); border-radius:10px; padding:12px 14px; margin:8px 0}
.em-all details{border-top:1px solid var(--line); padding:10px 0}
.em-all summary{cursor:pointer; font-weight:700}
.em-all summary small{font-weight:400; color:var(--muted)}
.obtbl th[scope=row]{font-size:13px; color:var(--accent); width:22%}
.obtbl td{font-size:14px; line-height:1.5}
.obtbl td:nth-child(2){background:color-mix(in srgb, var(--seller-soft) 35%, transparent)}
.obtbl td:nth-child(3){background:color-mix(in srgb, var(--buyer-soft) 35%, transparent)}
.vwtable tr.vw-focus th,.vwtable tr.vw-focus td{background:var(--accent-soft)}
.vwtable tr.vw-focus th{color:var(--accent)}
.iq-opts{display:grid; gap:8px; margin-top:6px}
.iq-opts .btn{justify-content:flex-start; text-align:start; white-space:normal; height:auto; padding:10px 14px}
.iq-opts .iq-ok{border-color:var(--ok); color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, transparent)}
.iq-opts .iq-bad{border-color:var(--warn); color:var(--warn); background:var(--warn-soft)}
/* template pages: file first, then a picture of it next to the field list (2026-10-13) */
.tpl-grid{display:grid; grid-template-columns:minmax(0,280px) 1fr; gap:18px 24px; align-items:start; margin-top:16px}
.tpl-prev img{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; background:#fff}
@media (max-width:640px){.tpl-grid{grid-template-columns:1fr} .tpl-prev{max-width:260px}}
/* phone tables: a long value (a list of prefixes, a warning, a long link) wraps under its label instead of being cut off */
@media (max-width:760px){.ttable td[data-h]{flex-wrap:wrap} .ttable td a{overflow-wrap:anywhere}
  /* the label of a number cell (.num: monospace, left-to-right) is text in the page language: Arabic letters were drawn apart */
  .ttable td[data-h]::before{font-family:var(--f-ui)} html[dir=rtl] .ttable td[data-h]::before{direction:rtl}}

/* ---------- PART A2: design B component layer (append at the END of tools.css) ---------- */
@media screen{
/* page */
body{background:radial-gradient(1100px 620px at 72% -12%, rgba(47,98,232,.24), rgba(47,98,232,0) 62%),
  radial-gradient(700px 420px at -10% 30%, rgba(47,98,232,.08), rgba(47,98,232,0) 70%), var(--desk); background-repeat:no-repeat}
html[dir=rtl] body{background-position:100% 0, 0 0, 0 0; background-image:radial-gradient(1100px 620px at 28% -12%, rgba(47,98,232,.24), rgba(47,98,232,0) 62%),
  radial-gradient(700px 420px at 110% 30%, rgba(47,98,232,.08), rgba(47,98,232,0) 70%)}
::selection{background:rgba(79,139,255,.35)}
:focus-visible{outline:2px solid var(--brand-hi); outline-offset:2px}
a:hover{color:#C2D6FF}

/* header: no white bar, the logo and actions sit on the desk as on the generator */
.top{background:transparent; border-bottom:0}
.top .wrap{min-height:72px; padding-block:14px 10px}
.brand{gap:10px; color:#F4F6FB; font-weight:800; font-size:18px; letter-spacing:-.01em}
.brand .logo-svg{display:block; height:21px; width:auto; fill:#F4F6FB; filter:drop-shadow(0 0 14px rgba(79,139,255,.35))}   /* PART B wordmark */
.brand .logo-svg .c{fill:var(--brand-hi)}
.brand > svg:not(.logo-svg){width:32px; height:32px; border-radius:10px; box-shadow:0 10px 24px -10px var(--glow)}   /* if the old icon stays */
.brand > svg:not(.logo-svg) stop:first-child{stop-color:#5B8CFF} .brand > svg:not(.logo-svg) stop:last-child{stop-color:#2F62E8}
.top nav{gap:8px 18px; font-size:14px}
.top nav a:not(.btn){color:var(--muted); font-weight:700} .top nav a:not(.btn):hover{color:#fff}
.top nav .ai-link svg{color:var(--accent)}
.top select{min-height:40px; height:40px; width:auto; max-width:190px; padding-block:0; padding-inline:34px 10px; border:0; border-radius:var(--r-ctl);
  background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA6BC' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E") no-repeat 11px 50%;
  box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink); cursor:pointer;
  font:700 14px system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif}   /* not Manrope: Chrome sizes a select from ALL its options, so
     "Русский" and "Tiếng Việt" pulled 22 KB of extra subsets on every page and re-wrapped the header when they arrived (CLS 0.20 on /vi/) */
html[dir=rtl] .top select{background-position:calc(100% - 11px) 50%}
select option{background:#141E33; color:#E6EAF2}

/* breadcrumbs, title, lead */
main{padding-block:12px 56px}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:8px}
.crumbs a{color:var(--soft); text-decoration-color:var(--line-2)} .crumbs a:hover{color:#fff; text-decoration-color:currentColor}
h1{font-weight:800; font-size:clamp(28px,4.4vw,40px); line-height:1.12; letter-spacing:-.025em; margin:0 0 10px}
h2{font-weight:800; font-size:21px; letter-spacing:-.015em; margin-top:36px}
h3{font-weight:700}
html:is([lang=ar],[lang=ur],[lang=hi],[lang=bn]) :is(h1,h2,h3){letter-spacing:0}   /* tracking breaks joined and Indic scripts */
html:is([lang=ko],[lang=ja],[lang=zh]) h1{letter-spacing:-.01em; line-height:1.25}
.lead{font-size:17px; line-height:1.6; color:var(--muted); margin-bottom:22px}

/* panels: the generator's raised .sec */
.card{border:1px solid var(--line); border-radius:var(--r-panel); padding:18px 18px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 120px), var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 22px 40px -30px rgba(0,0,0,.9)}
.card > h2:first-child, .card > h3:first-child{font-size:17px; font-weight:800; letter-spacing:-.01em; margin-top:0}
.lead + .card{border-color:rgba(91,140,255,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 24px 48px -30px var(--glow)}   /* the tool itself: the one lit panel, like AI quick fill */
.tcard, .hub a, .tl, .rel-card, .askbox, .aff, details, .ttable, .hsl, .nissue, .gl-az a{border-color:var(--line)}
.tcard, .askbox, .aff, .ttable, .hsl{border-radius:16px}
.kpi, .gl div, .charge div, .out, .em-pre{box-shadow:inset 0 0 0 1px var(--line)}
.kpi b, .cl-n, .dd-grand b, .isel-code b, .kpi b.pal-big{color:#fff}
.ttable thead th{background:var(--panel-2); color:var(--muted)}
.ttable tr.grp td{background:var(--accent-soft); color:var(--accent)}

/* buttons: one primary per area (brand gradient), the rest panel buttons */
.btn{min-height:42px; padding:8px 16px; border:0; border-radius:var(--r-ctl); font:700 15px/1.2 var(--f-ui); color:#fff!important;
  background:linear-gradient(180deg,#3A6CF0,#2A58D6); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 12px 24px -12px var(--glow);
  transition:background-color .15s, box-shadow .15s, transform .15s}
.btn:hover{background:linear-gradient(180deg,#3566E6,#2652C8); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 14px 28px -12px var(--glow)}
.btn:active{transform:translateY(1px)}
.btn.ghost, .top nav .btn, .nsharebar .btn, .hsr-act .btn, .iq-opts .btn{
  background:var(--panel-2); color:var(--ink)!important; box-shadow:inset 0 0 0 1px var(--line-2)}
.top nav .btn{font-weight:700}   /* tools.css line 31 (.top nav a{font-weight:600}) is more specific than .btn */
.btn.ghost:hover, .top nav .btn:hover, .nsharebar .btn:hover, .hsr-act .btn:hover, .iq-opts .btn:hover{background:#18233B; box-shadow:inset 0 0 0 1px rgba(143,180,255,.55)}
.btn:disabled, .btn[disabled]{opacity:.5; box-shadow:inset 0 0 0 1px var(--line)}
.iq-opts .iq-ok{box-shadow:inset 0 0 0 1.5px var(--ok); color:var(--ok)!important}
.iq-opts .iq-bad{box-shadow:inset 0 0 0 1.5px var(--warn); color:var(--warn)!important}
.add{border-color:rgba(143,180,255,.55); border-radius:var(--r-ctl); color:var(--accent)}
.linkbtn{color:var(--accent)}

/* fields: the generator's .f input */
input:not([type=radio]):not([type=checkbox]):not([type=range]), select:not(.top select), textarea{
  background:var(--field); border:1px solid var(--field-line); border-radius:var(--r-field); color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35); transition:border-color .15s, box-shadow .15s}
input:not([type=radio]):not([type=checkbox]):hover, textarea:hover, select:not(.top select):hover{border-color:#7688AA}
input:focus, select:focus, textarea:focus, input:not([type=radio]):not([type=checkbox]):not([type=range]):focus, select:not(.top select):focus{border-color:var(--accent)!important; box-shadow:0 0 0 3px rgba(79,139,255,.28), inset 0 1px 2px rgba(0,0,0,.35); outline:none}   /* 10-23: the field rule above (three :not()) outranked plain input:focus, so the focus ring never showed: only the 1 px border changed colour */
input::placeholder, textarea::placeholder{color:#7F8BA3}
.nlbox input[type=email]{background:var(--field)!important; border-color:var(--field-line)!important; border-radius:var(--r-field)!important}   /* inline style in nl_box() */
label{color:var(--muted)}
input[type=radio], input[type=checkbox]{accent-color:var(--brand-hi)}

/* chips: the generator's pills; the pressed one is lit (was missing on the email picker) */
.chip, .related a, .gl-az a{border:0; background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink); border-radius:999px; font-weight:600}
.chip{padding:8px 13px; min-height:36px}
.chip:hover, .related a:hover, .gl-az a:hover{box-shadow:inset 0 0 0 1px rgba(143,180,255,.55); color:#fff}
.chip[aria-pressed="true"], .pc-types .chip[aria-pressed="true"], .nfilter .chip[aria-pressed="true"]{background:var(--panel-3); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(79,139,255,.75)}
.who.s{background:var(--seller-soft)} .who.b{background:var(--buyer-soft)}

/* FAQ and other <details>: the generator's .qa rows with a "+" */
details{border-radius:14px; background:var(--panel); padding:0}
details > summary{padding:12px 44px 12px 16px; min-height:44px}
html[dir=rtl] details > summary{padding:12px 16px 12px 44px}
details > :not(summary){margin-inline:16px}
details[open] > :last-child{margin-bottom:14px}
summary{list-style:none; position:relative; padding-inline-end:28px; font-weight:700; line-height:1.45}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; top:11px; inset-inline-end:16px; font:600 22px/1 var(--f-ui); color:var(--accent); transition:transform .15s}
details[open] > summary::after{transform:rotate(45deg)}
.em-all details{background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:0}
.em-all details > summary{padding:12px 28px 12px 0; min-height:44px}
html[dir=rtl] .em-all details > summary{padding:12px 0 12px 28px}
.em-all details > summary::after{inset-inline-end:0}
.em-all details > :not(summary){margin-inline:0}

/* calls to action: the generator's AI quick fill panel instead of a solid accent block */
.cta, .hub-ask{color:var(--ink); border-radius:var(--r-panel);
  background:radial-gradient(420px 170px at 0% 0%, rgba(79,139,255,.26), rgba(79,139,255,0) 70%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--panel);
  box-shadow:inset 0 0 0 1px rgba(91,140,255,.55), 0 24px 48px -30px var(--glow)}
html[dir=rtl] :is(.cta, .hub-ask){background:radial-gradient(420px 170px at 100% 0%, rgba(79,139,255,.26), rgba(79,139,255,0) 70%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--panel)}
.cta p{color:var(--muted); opacity:1}
.cta .btn, .hub-ask .btn{background:linear-gradient(180deg,#3A6CF0,#2A58D6); color:#fff!important; border:0}
.hub-ask input{background:var(--field)}
/* 10-24: the order box in the generator call to action (the text goes to the generator's chat) */
.cta-f{display:flex; gap:10px; align-items:flex-end; margin:0 0 12px}
.cta-f textarea{flex:1 1 auto; min-width:0; min-height:56px; max-height:200px; font:16px/1.45 var(--f-ui); padding:10px 12px; resize:vertical; box-sizing:border-box}
.cta-f .btn{flex:none; min-height:48px; white-space:nowrap}
.cta-alt{display:inline-flex; align-items:center; min-height:44px; font-size:14.5px; font-weight:600; color:var(--soft)!important; text-decoration:underline; text-underline-offset:3px}
@media (max-width:640px){ .cta-f{flex-direction:column; align-items:stretch; gap:8px} .cta-f textarea{min-height:92px} .cta-f .btn{justify-content:center} }
/* 10-24: the microphone beside the button (only where the browser has speech recognition; added by common.js) */
.cta-mic{flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:48px; min-height:48px; padding:0 16px; border-radius:12px; border:1px solid rgba(91,140,255,.65); background:rgba(79,139,255,.10); color:var(--ink); font-size:15px; font-weight:600; white-space:nowrap; cursor:pointer}
.cta-mic:not(.on) svg{color:#8FB4FF; flex:none}
.cta-mic:hover{border-color:var(--accent); background:rgba(79,139,255,.18)}
.cta-mic.on{background:#C62828; border-color:#C62828; color:#fff; animation:ctapulse 1.2s ease-in-out infinite}
@keyframes ctapulse{0%,100%{box-shadow:0 0 0 0 rgba(198,40,40,.55)} 50%{box-shadow:0 0 0 7px rgba(198,40,40,0)}}
@media (prefers-reduced-motion:reduce){ .cta-mic.on{animation:none} }
.cta-mic-msg{margin:-4px 0 12px; font-size:14.5px; color:var(--soft)} .cta-mic-msg.bad{color:var(--warn, #F0B44C)}
/* phones: the box, the button, then "Say your order" (each a full row; the microphone comes after the button in the page too) */
.cta-mic[hidden]{display:none}
.ask.has-mic{flex-wrap:wrap} .ask .cta-mic{min-height:50px} .ask .cta-mic-msg{order:-1; flex:1 0 100%; max-width:none; margin:0 0 2px}   /* its own row (p{max-width:70ch} put it beside the box and squeezed the box to 107 px; 10-24 QA) */
@media (max-width:640px){ .ask.has-mic textarea{flex:1 0 100%} .ask.has-mic .btn, .ask.has-mic .cta-mic{flex:1 1 auto; justify-content:center} }   /* the box on its own row, then [Say your order][button] (two rows when they do not fit) */
@media (max-width:640px){ #aiForm .cta-mic{flex:1 1 0; min-width:0; padding:0 10px; gap:6px; font-size:14px; line-height:1.15; text-align:center; white-space:normal} #aiForm #aiSend{flex:none; min-width:96px; padding-inline:16px} }   /* the assistant's fixed box: one row in every language, the voice label on two lines if it must (10-25 QA 9: es, pt, fr, id, ru stacked them, 202 px, the first question under it) */
/* 10-24: the one line under the summary on the invoice, packing list and proforma pages */
.gc-hint{margin:-4px 0 16px} .nchecked + .gc-hint{margin:10px 0 18px}
.gc-hint a{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px; border-radius:12px; font-weight:600; font-size:15px; line-height:1.35; color:var(--ink)!important; text-decoration:none;
  background:rgba(79,139,255,.10); box-shadow:inset 0 0 0 1px rgba(91,140,255,.45)}
.gc-hint a::before{content:"✍️"; flex:none}
.gc-hint a:hover{background:rgba(79,139,255,.18)}
.cta-f .btn[aria-busy="true"]{opacity:.6; cursor:progress}   /* 10-26 (QA 14): the order is on its way to the generator */
.gc-hint .gc-free{display:block; margin:6px 4px 0; font-size:13.5px; font-weight:600; color:var(--muted)}   /* 10-25 (usability 16): the generator is free, said where the line is */
@media print{ .gc-hint{display:none} }

/* lists of links and cards */
.tl, .rel-card, .hub a{background:var(--panel); border-radius:14px}
.tl:hover, .rel-card:hover{border-color:rgba(143,180,255,.55)}
.tl-ic{background:linear-gradient(145deg, rgba(91,140,255,.28), rgba(47,98,232,.18)); color:#BFD3FF; box-shadow:inset 0 0 0 1px rgba(79,139,255,.35)}
.nsteps li::before, .hw-st i{background:linear-gradient(145deg,#5B8CFF,var(--brand)); color:#fff; box-shadow:0 6px 14px -6px var(--glow)}
.nissue{border-inline-start-color:var(--warn)}
.ntoc a, .glitem dt a{color:var(--accent)}
.pal-svg .pl{fill:#3A3122; stroke:#8C7449}   /* the dark pallet colours, now for everyone */
.pal-svg .bx{fill:#22335C} .pal-svg .bx2{fill:#4A3712}   /* solid carton fills: the translucent accent-soft turned muddy grey over the pallet */
.dev-code{background:#070C18; box-shadow:inset 0 0 0 1px var(--line)}
.msg.user .bubble{background:linear-gradient(180deg,#3A6CF0,#2A58D6); color:#fff}
.hsr-code{color:#BFD3FF}

/* footer: the generator's .gf look, same markup */
footer.site{border-top:1px solid var(--line-2); padding-block:22px 40px; font-size:13.5px}
footer.site a{color:var(--soft); text-decoration:none; font-weight:600} footer.site a:hover{color:#fff}
footer.site .langs{gap:6px; margin-top:12px; font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif}   /* language names in their own scripts: no extra Manrope/Archivo subsets (Русский, Tiếng Việt cost 22 KB) */
footer.site .langs a{padding:6px 11px; border-radius:999px; color:var(--muted); font-weight:500; box-shadow:inset 0 0 0 1px var(--line)}
footer.site .langs a:hover{color:#fff; box-shadow:inset 0 0 0 1px var(--line-2)}

/* "More free tools": six related tools and one link to the hub (PART B markup) */
.more-tools{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:8px}
.more-tools li{margin:0; max-width:none; color:inherit}
.more-tools a{display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 12px; border-radius:12px; background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); text-decoration:none; font-weight:700; font-size:14px; line-height:1.3}
.more-tools a:hover{box-shadow:inset 0 0 0 1px rgba(143,180,255,.55); color:#fff}
.more-tools .ic{flex:none; width:20px; height:20px; color:var(--accent)}
.more-tools .more-all a{background:transparent; box-shadow:inset 0 0 0 1px rgba(79,139,255,.45); color:var(--accent); justify-content:center}
.more-tools .more-all a::after{content:" →"} html[dir=rtl] .more-tools .more-all a::after{content:" ←"}

/* phones */
@media (max-width:640px){
  .top .wrap{min-height:0; padding-block:10px 8px; gap:8px 12px}
  .brand{min-height:36px}   /* the logo row is as tall as the language select next to it (no overlap with the second row) */
  .brand .logo-svg{height:17px}
  .top select{top:10px; height:36px; min-height:36px; font-size:16px; font-weight:600; padding-inline:30px 6px; max-width:9.5em; background-position:9px 50%}   /* 16px: iOS zooms smaller selects */
  html[dir=rtl] .top select{background-position:calc(100% - 9px) 50%}
  .top nav{flex-wrap:nowrap}   /* Manrope is wider than Archivo: at 360 px the button fell onto a third row; now its text wraps inside it */
  .top nav .ai-link{flex:none; white-space:nowrap; min-height:36px}
  .top nav .btn{flex:0 1 auto; min-width:0; min-height:38px; padding:6px 12px; font-size:13.5px; line-height:1.2; white-space:normal}
  main{padding-block:8px 40px}
  h1{font-size:28px}
  .lead{font-size:15.5px; line-height:1.55; margin-bottom:16px}
  .card{border-radius:16px; padding:16px}
  h2{font-size:19px; margin-top:30px}
  .chip{font-size:13.5px; padding:7px 11px; min-height:34px}
  .more-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .more-tools a{min-height:52px; font-size:13.5px; padding:8px 10px; gap:8px}
  .more-tools .more-all{grid-column:1 / -1}
  /* shorter bottom of page: same text, less padding */
  .cta{padding:16px; margin-top:24px} .cta h2{font-size:17px} .cta p{font-size:14.5px; margin-bottom:12px}
  .askbox{padding:14px 16px; margin-top:24px} .askbox p{font-size:13.5px}
  .rel-card small{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
  .rel-row{gap:8px}
  .em-all details:not([open]) summary small{display:none}   /* the subject line shows once the template is opened */
  details > summary{padding:11px 42px 11px 14px} html[dir=rtl] details > summary{padding:11px 14px 11px 42px} details > :not(summary){margin-inline:14px}
  .em-all details > summary{padding:11px 28px 11px 0} html[dir=rtl] .em-all details > summary{padding:11px 0 11px 28px} .em-all details > :not(summary){margin-inline:0}
}
@media (prefers-reduced-motion:reduce){.btn, input, select, textarea, summary::after{transition:none}}
}

/* 2026-10-21: the generator's left rail on every page (wide screens only; phones and tablets keep the header menu). Collapsed to icons,
   labels slide out on hover or keyboard focus, the current page is marked. Mirrors build.py .quick at 1280 px. */
.rail{display:none}
@media screen and (min-width:1280px){
  body.has-rail{padding-inline-start:78px}   /* only pages that carry the rail (a page cached from before keeps its full width) */
  .rail{position:fixed; z-index:45; top:0; bottom:0; inset-inline-start:0; width:78px; display:flex; flex-direction:column; gap:4px; padding:84px 15px 18px;
    overflow:hidden; overflow-y:auto; scrollbar-width:none; background:linear-gradient(180deg, #0C1427, #090F1F); box-shadow:inset -1px 0 0 var(--line);
    transition:width .18s ease, box-shadow .18s ease}
  [dir=rtl] .rail{box-shadow:inset 1px 0 0 var(--line)}
  .rail::-webkit-scrollbar{display:none}
  .rl-logo{position:absolute; top:20px; inset-inline-start:18px; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff;
    background:linear-gradient(145deg, #5B8CFF, #2F62E8); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 24px -10px var(--glow)}
  .rl{flex:none; display:flex; align-items:center; gap:15px; min-height:46px; padding:0 13px; border-radius:13px; overflow:hidden; white-space:nowrap;
    color:var(--muted); text-decoration:none; font:700 14px var(--f-ui)}
  .rl .ic{flex:none; color:inherit}
  .rl > span{opacity:0; transition:opacity .12s ease}
  .rl:hover, .rl:focus-visible{background:rgba(79,139,255,.15); color:#fff; box-shadow:inset 0 0 0 1px rgba(79,139,255,.35); text-decoration:none}
  .rl[aria-current]{position:relative; background:rgba(79,139,255,.2); color:#fff; box-shadow:inset 0 0 0 1px rgba(79,139,255,.5)}
  .rl[aria-current]::before{content:""; position:absolute; inset-inline-start:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--accent)}
  .rl-all{margin-top:6px; color:var(--accent)}
  /* 11-05 usability 24: a pointer crossing the left edge opened the rail over the heading and the Download button; on hover it opens after a short pause */
  .rail:hover{transition-delay:.25s}
  .rail:hover, .rail:focus-within{width:312px; box-shadow:inset -1px 0 0 var(--line-2), 30px 0 70px -24px rgba(0,0,0,.85)}
  [dir=rtl] .rail:hover, [dir=rtl] .rail:focus-within{box-shadow:inset 1px 0 0 var(--line-2), -30px 0 70px -24px rgba(0,0,0,.85)}
  .rail:hover .rl > span, .rail:focus-within .rl > span{opacity:1}
}
@media (prefers-reduced-motion: reduce){.rail, .rl > span{transition:none}}
/* AdSense: a slot that got no ad folds away instead of leaving a blank block (Google's documented rule, support.google.com/adsense/answer/10762946; owner 10-22 screenshot of the email page) */
ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
/* 10-22 usability test: on short laptop windows the last rail items were cut off (14 items need 804 px) */
@media screen and (min-width:1280px) and (max-height:830px){ .rail{padding:72px 15px 10px; gap:2px} .rl{min-height:42px} .rl-logo{top:14px} }
@media screen and (min-width:1280px) and (max-height:700px){ .rail{padding-top:64px; padding-bottom:8px; gap:0} .rl{min-height:36px} .rl-all{margin-top:4px} .rl-logo{top:12px; width:40px; height:40px} }
/* 10-22: three result numbers side by side on phones (one column was 244 px, results fell below the fold) */
@media (max-width:560px){
  .kpis:has(> .kpi:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  .kpis:has(> .kpi:nth-child(3):last-child) .kpi{padding:10px 9px}
  .kpis:has(> .kpi:nth-child(3):last-child) .kpi span{font-size:11.5px; line-height:1.3}
  .kpis:has(> .kpi:nth-child(3):last-child) .kpi b, .kpis:has(> .kpi:nth-child(3):last-child) .kpi b.pal-big{font-size:15px; overflow-wrap:anywhere}
}

/* ---- 10-22 day release (design and usability tests of the new tool pages) ---- */
/* 1) desktop header in one line in every language: the hub link wraps es/ru to 3 lines; the rail (1280+) and the breadcrumb lead to the hub */
@media screen and (min-width:1024px){ .top nav .hub-link{display:none} }
/* 2) pallet and container tables on phones: the warning under a cell wrapped out of its box (ru, fr, tr, pt) */
@media (max-width:760px){ .cltable small, .cl-lay{white-space:normal} }
/* 4) long rail labels (ru, es, fr, ja, pt) take two lines instead of being cut */
@media screen and (min-width:1280px){ .rl > span{min-width:0; line-height:1.2; overflow:hidden; text-overflow:ellipsis} }   /* 10-23: labels stay on one line when the rail opens (312px); wrapping changed the rows' heights and every hover was a layout shift (CLS 0.11 on the generator's rail) */
/* 6) small buttons of the shipment tracker and label tool in the dark design (they were browser-default grey) */
.mini{font:700 13px/1.2 var(--f-ui); color:var(--ink); background:var(--panel-2); border:0; border-radius:var(--r-ctl); padding:8px 12px; min-height:36px; cursor:pointer; box-shadow:inset 0 0 0 1px var(--line-2)}
.mini:hover{background:#18233B; box-shadow:inset 0 0 0 1px rgba(143,180,255,.55)}
.mini[aria-pressed="true"]{background:var(--panel-3); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(79,139,255,.75)}
/* 8) white explanation diagrams sit in the dark page instead of glaring white blocks (screen only; print keeps them as drawn) */
@media screen{ main img[src$=".svg"]{filter:invert(.92) hue-rotate(180deg); mix-blend-mode:lighten; border-color:var(--line-2)!important} }
/* 9) AI assistant on phones: the question box stays in view (it started 1,171 px down) */
@media (max-width:640px){
  #aiForm{position:sticky; bottom:0; z-index:5; background:var(--panel); padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px)); box-shadow:0 -14px 14px -10px var(--panel)}
  #chat .msgs{min-height:120px}
  /* 10-23 usability round 7: the conversation is part of the page (a box inside the page, under the question bar, showed 211 px of the
     answer and caught the swipe); answers use the full width, headings stand out, wide tables scroll sideways instead of squeezing */
  #chat .msgs{max-height:none; overflow:visible; overscroll-behavior:auto; border-block:0; padding-bottom:4px}
  #chat .msg .bubble{max-width:100%}
  #chat .msg.user .bubble{max-width:92%}
  .bubble .mdh{font-size:16px}
  .bubble th, .bubble td{min-width:6.5em}
  #chat .msg{scroll-margin-top:12px}
  /* before the first question there is nothing to clear: no "New chat" (42 px more for the examples) */
  #chat:not(:has(.msg.user)) #aiNew{display:none}
}
@media (pointer:coarse){ .srcs a, .mini-copy, .rate button[data-r], #aiNew{min-height:44px; display:inline-flex; align-items:center} }
/* 10) email templates on phones: one swipeable row of templates (29 chips took 1,000 px), the email shows right below */
@media (max-width:640px){
  .em-pick{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; margin-inline:-16px; padding:2px 16px 6px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 34px),transparent)}
  html[dir=rtl] .em-pick{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 16px,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(to left,transparent 0,#000 16px,#000 calc(100% - 34px),transparent)}
  .em-pick::-webkit-scrollbar{display:none}
  .em-pick .chip{flex:none; scroll-snap-align:center; white-space:nowrap; min-height:44px}
}
/* 12) breadcrumb in one line on phones (the last part is the page title right below) */
@media (max-width:640px){
  .crumbs{display:flex; flex-wrap:nowrap; align-items:center; gap:0 6px; white-space:nowrap; overflow:hidden}
  .crumbs .cur{min-width:0; overflow:hidden; text-overflow:ellipsis}
  .crumbs a{padding-block:4px; margin-block:-4px}
}
/* 13) keyboard: a skip link past the header and the rail */
.skip{position:absolute; inset-inline-start:12px; top:-60px; z-index:60; padding:10px 16px; border-radius:var(--r-ctl); background:var(--panel-3); color:#fff; font-weight:700; text-decoration:none}
.skip:focus{top:12px}
main:focus{outline:none}
/* 15) phones and tablets: the rail's tools as one swipeable chip row under the header, like the generator's "Free tools" row */
@media screen and (max-width:1279px){
  .rail{display:flex; gap:8px; align-items:center; overflow-x:auto; scrollbar-width:none; max-width:980px; margin:0 auto; padding:2px 16px 4px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
  [dir=rtl] .rail{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
  .rail::-webkit-scrollbar{display:none}
  .rail .rl-logo{display:none}
  .rl{flex:none; display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 13px; border-radius:999px; background:var(--panel-2);
    box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink); text-decoration:none; font:700 13.5px var(--f-ui); white-space:nowrap}
  .rl .ic{color:var(--accent); width:18px; height:18px}
  .rl[aria-current]{background:var(--panel-3); box-shadow:inset 0 0 0 1.5px rgba(79,139,255,.75); color:#fff}
  .rl-all{color:var(--accent)}
}
@media print{ .rail{display:none!important} }
/* "Make the packing list from these cartons" under the CBM and container-load results */
.to-pl{margin:16px 0 2px}
@media (max-width:560px){ .to-pl .btn{width:100%; white-space:normal} }
@media print{ .to-pl{display:none!important} }
/* 10-22 landing pages (ChatGPT and Bing visitors land on templates, container prefixes and notes) */
.gl > div > span{word-spacing:.1em}   /* "B/L numbers" read as "B/Lnumbers" at 12px */
.nshare textarea{font:16px/1.5 var(--f-ui); min-height:96px}
#pcRes > .note:first-child{margin-top:0}
.lead-more{display:none}
@media (max-width:560px){
  main .t-jump{flex-wrap:nowrap; overflow-x:auto; margin-inline:-16px; padding-inline:16px; scrollbar-width:none}
  main .t-jump::-webkit-scrollbar{display:none}
  main .t-jump a{flex:none; white-space:nowrap}
  /* container pages: label and value on one line, so the tracking button and the number box are on the first screen */
  main:has(#ctForm) .glance .gl{gap:6px}
  main:has(#ctForm) .glance .gl > div{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 10px; padding:8px 12px}
  main:has(#ctForm) .glance .gl > div > span{display:inline}
}
@media (max-width:640px){
  .top nav .btn{text-wrap:balance; min-height:44px}
  /* breadcrumb: a sideways row that opens at its end (parents and this page); the cut start fades */
  .crumbs{overflow-x:auto; scrollbar-width:none}
  .crumbs::-webkit-scrollbar{display:none}
  .crumbs .cur{flex:0 0 auto; max-width:62vw}
  .crumbs.scrolled{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px); mask-image:linear-gradient(90deg,transparent 0,#000 28px)}
  [dir=rtl] .crumbs.scrolled{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 28px); mask-image:linear-gradient(270deg,transparent 0,#000 28px)}
  .crumbs a{padding-block:11px; margin-block:-11px}
  /* long note summaries: six lines and "Show more", so the facts card is on the first screen */
  main > .lead.long:not(.open){display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden}
  main > .lead.long + .lead-more{display:inline-flex; align-items:center; min-height:44px; margin:-8px 0 12px; padding:0; border:0; background:none; color:var(--accent); font:700 14px/1.3 var(--f-ui); cursor:pointer}
  main > .lead.open + .lead-more{display:none}
}
@media (pointer:coarse){ .tcard .tmore{display:inline-flex; align-items:center; justify-content:center; min-height:40px} .chip{min-height:40px} }
@media print{ .lead.long{display:block!important; -webkit-line-clamp:none!important; overflow:visible!important} .lead-more{display:none!important} }
/* note pages: the generator right after "Documents you need"; container prefix pages: other prefixes folded */
.n-gen{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:16px 0}
.n-gen p{margin:0; flex:1 1 260px; font-weight:600; color:var(--ink)}
.cpx-all{margin:24px 0 8px}
.cpx-all .related{margin-top:4px}
.cpx-hub{margin:8px 0 24px}
.nlf input[type=email]{font-size:16px!important}   /* iOS zooms into inputs under 16px */
@media print{ .n-gen{display:none!important} }
.cpx-lines-h{margin:14px 0 6px; font-size:13.5px; font-weight:700; color:var(--muted)}
.cpx-lines{margin:0}
/* 10-22 QA: long words in the tool tiles may wrap; the prefix list of a line with many prefixes stays two lines on phones;
   link chips reach 40 px on touch screens */
.more-tools a > span{min-width:0; overflow-wrap:anywhere}
@media (max-width:560px){ main:has(#ctForm) .glance h2 + .gl > div:nth-child(2) > b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} }
@media (pointer:coarse){ .related a{min-height:40px; display:inline-flex; align-items:center} }
/* shipment tracker: how far the dates moved since first entered, the change log, the shared status view (10-22) */
.sb-shift{list-style:none; margin:2px 0 8px; padding:0; font-size:13.5px; font-weight:600}
.sb-shift .late{color:var(--warn)} .sb-shift .early{color:var(--ok)}
.sb-log{margin:8px 0 0; background:transparent; border:0; border-radius:0}
.sb-log > summary{padding:6px 28px 6px 0; min-height:36px; font-size:13.5px}
html[dir=rtl] .sb-log > summary{padding:6px 0 6px 28px}
.sb-log > summary::after{top:5px; inset-inline-end:0}
.sb-log > :not(summary){margin-inline:0}
.sb-log ul{margin:4px 0 0; padding-inline-start:18px; font-size:13.5px; color:var(--muted)}
.sb-view{box-shadow:inset 0 0 0 1.5px rgba(79,139,255,.55)}
.sb-view .sb-card{margin-bottom:6px}
.sb-share-msg{margin:8px 0 0; font-size:13.5px}
span.sb-st{cursor:default}
#sbPasteT{width:100%; box-sizing:border-box; font:15px/1.45 var(--f-ui); color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; resize:vertical; white-space:pre; overflow-x:auto}
@media (max-width:640px){ #sbPasteT{font-size:16px} }
/* tracker cards: long unbroken values wrap; touch targets */
.sb-top > div{min-width:0} .sb-top b, .sb-party, .sb-meta{overflow-wrap:anywhere}
.sb-acts{flex:none}
@media (pointer:coarse){ .sb-acts .mini, .sb-filters .mini{min-height:40px} .sb-st{min-height:40px} }

/* 10-22: Chinese headings keep document names on one line (build_tools.h1_html) */
.nw{white-space:nowrap}
/* 10-22 design round 8 */
/* phones: the chip row under the header starts with the generator and the AI assistant, so the header does not repeat those two links (44 px back on every page);
   the generator chip takes the header button's place as the one filled button */
@media (max-width:640px){
  body:has(.rail) .top nav > a{display:none}   /* the language select stays (it sits at the top right of the logo row) */
  body:has(.rail) .top nav{width:auto; margin:0}
  .rail{scroll-padding-inline-start:232px}   /* a chip reached with Tab is not left under the pinned generator chip */
  .rail .rl-logo + .rl{background:transparent; color:var(--accent-ink); position:sticky; inset-inline-start:0; z-index:1; box-shadow:none}
  .rail .rl-logo + .rl::before{content:""; position:absolute; z-index:-1; top:-3px; bottom:-3px; inset-inline-start:-16px; inset-inline-end:-8px; background:var(--desk)}   /* chips passing underneath do not show */
  .rail .rl-logo + .rl::after{content:""; position:absolute; z-index:-1; inset:0; border-radius:inherit; background:var(--accent)}
  .rail .rl-logo + .rl .ic{color:var(--accent-ink)}   /* it stays at the row's start while the row scrolls to the current tool */
}
/* reading width: 70ch was 82–100 characters a line on desktop (the font's 0 is wider than its average letter) */
p, main li{max-width:min(70ch, 38em)}
.lead{max-width:min(68ch, 38em)}
@media (max-width:560px){ .kpis:has(> .kpi:nth-child(3):last-child) .kpi span{font-size:12px} }   /* no label under 12 px */
/* shipment tracker: what a paste added or changed */
.sb-card.sb-new{outline:2px solid var(--accent); outline-offset:2px}
.sb-done{margin:0 0 10px; scroll-margin-top:16px}
bdi{unicode-bidi:isolate}
/* shipment tracker on phones (design review round 8): the name and route get the full width, Add and Paste side by side, paired date fields, 16 px notes */
@media (max-width:480px){
  .sb-top{flex-wrap:wrap} .sb-top > div{flex:1 1 100%} .sb-acts{display:flex; gap:6px}
  .card > .btnrow:has(#sbNew){display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px} .card > .btnrow:has(#sbNew) .btn{width:100%; white-space:normal} #sbGen{grid-column:1 / -1}
}
@media (max-width:640px){ #sbForm .grid2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px} }
#sb_notes{font:inherit; font-size:16px; min-height:84px; box-sizing:border-box; width:100%}
/* the status link a buyer opens: the status first, stages read as a record (not buttons), carrier tracking as a button */
.sb-shared main .lead{display:none}
.sb-view span.sb-st{border-radius:6px; border-style:dashed} .sb-view span.sb-st:not(.on){opacity:.6}
.sb-view .sb-no a{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; margin-top:4px; border-radius:var(--r-ctl); box-shadow:inset 0 0 0 1px var(--line-2); text-decoration:none; font-weight:700}
/* 10-22 QA: an unbroken list of names in a sub-heading pushed the HS pages sideways on phones */
ul.hs-subs li{min-width:0; overflow-wrap:anywhere}
.dl-next{margin:14px 0 0} .dl-next h2{margin-top:0}   /* 10-23: next steps opened under a template's download row */
.tcard[hidden], .tcards[hidden], .t-grp[hidden]{display:none}   /* 10-23: template search */
/* 10-23: the link chips right under a page's intro (amount in words: 8 currencies, port codes: 8 countries) took about 330 px on a phone
   before the tool itself; on phones they are one row that scrolls sideways (the links stay the same) */
@media (max-width:640px){ .lead + p.related{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; scroll-padding-inline:16px; margin-inline:-16px; padding-inline:16px; padding-bottom:2px}
  .lead + p.related::-webkit-scrollbar{display:none} .lead + p.related a{flex:none; white-space:nowrap} }
#smOut.sm-ex{color:var(--muted)}   /* 10-23: the example shown before anything is typed */
/* 10-23: shipment tracker, the current stage stands out (accent fill) and the stages already done carry a check (before, done and
   current had almost the same pale blue) */
.sb-stages .sb-st.cur{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.sb-st.on:not(.cur)::before{content:"✓\00a0"; content:"✓\00a0" / ""}
/* 10-23 design round 9: on touch screens the buttons (42 px), chips (40 px) and footer language links (34 px) pass WCAG 2.5.8 (24 px) but
   are under the 44 px Apple and web.dev recommend for fingers; touch screens get 44 px (desktop sizes unchanged) */
@media (pointer:coarse){ .btn{min-height:44px} .rail .rl{min-height:44px} .related a{min-height:44px} footer.site .langs a{display:inline-flex; align-items:center; min-height:44px} .tcard .tmore{display:inline-flex; align-items:center; min-height:44px} }
/* 11-01 design 22 #3: on phones the language select and the logo link in the header were 36 px tall (the generator's are 44 px) */
@media (pointer:coarse) and (max-width:640px){ .brand{min-height:44px} .top select{height:44px; min-height:44px} }

/* 10-23 design round 10 — trade notes. Lists in the note read like its paragraphs (they were muted grey, 7.7:1 against 15.7:1) */
.nbody li, ol.nsteps li, #docs + ul li{color:var(--ink)}
@media (max-width:560px){
  /* the contents: one sideways row of chips right under the summary (a 450 to 565 px list after the facts card before) */
  .ntoc{padding:10px 0 12px; margin:0 0 14px; background:none; border:0; box-shadow:none; border-radius:0}
  .ntoc b{font-size:13px; color:var(--muted); margin-bottom:8px}
  .ntoc ol{display:flex; gap:8px; overflow-x:auto; margin:0 -16px; padding:0 16px 2px; list-style:none; scrollbar-width:none}
  .ntoc ol::-webkit-scrollbar{display:none}
  .ntoc li{flex:none; margin:0}
  .ntoc a{display:inline-block; line-height:44px; min-height:44px; max-width:78vw;   /* 11-03 QA 26 M2: inline-block, not inline-flex: a flex box made each <bdi> its own item and dropped the spaces around it (ar/ur chips) */
    padding:0 14px; border-radius:999px; background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink); font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  /* the facts card: the first four, then "Show more" (it was 886 to 4,011 px tall) */
  .glance .gl.fold:not(.open) > div:nth-child(n+5){display:none}
  .glance .gl + .lead-more, .rel .rel-row + .lead-more{display:inline-flex; align-items:center; min-height:44px; margin:8px 0 0; padding:0; border:0; background:none; color:var(--accent); font:700 14px/1.3 var(--f-ui); cursor:pointer}
  .glance .gl.open + .lead-more, .rel .rel-row.open + .lead-more{display:none}
  /* related notes: the first six cards, then "Show more" (22 to 48 cards were 3 to 7 screens) */
  .rel .rel-row.fold:not(.open) > .rel-card:nth-child(n+7){display:none}
  /* trade notes hub: the topic chips in one sideways row (five rows, seven in Arabic); the count is at the row's end */
  .nfilter{flex-wrap:nowrap; overflow-x:auto; margin-inline:-16px; padding-inline:16px; scrollbar-width:none}
  .nfilter::-webkit-scrollbar{display:none}
  .nfilter .chip{flex:none; white-space:nowrap}
  .nfilter .nfcount{flex:none; padding-inline:4px 16px; white-space:nowrap}
}
@media print{ .glance .gl > div{display:block!important} .rel .rel-row > .rel-card{display:block!important} .glance .lead-more, .rel .lead-more{display:none!important} }
/* 10-23 usability round 6 — HS code pages: each usual code with "Add to invoice" and Copy under it; the other subheadings fold */
.hsfor-list li:has(.hsf-act){flex-wrap:wrap}
.hsfor-list li:has(.hsf-act) > span[lang]{flex:1 1 0; min-width:0}   /* the text stays beside the code; only the buttons take a line of their own */
.hsfor-list .hsf-act{flex:1 0 100%; display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 6px}
.hsfor-list .hsf-act .btn{min-height:40px; display:inline-flex; align-items:center}
.hsfor-list .hsr-code{min-width:6.6em; text-align:center}   /* "✓ 3401.30" fits, so the chip does not grow when copied (a 0.004 shift) */
.hsf-rest{margin:14px 0 0}
.hsf-rest > summary{cursor:pointer; padding:10px 0; color:var(--ink)}
.hsf-rest > summary h3{display:inline; margin:0; font-size:16px}
.hsf-rest[open] > summary{margin-bottom:6px}
@media (pointer:coarse){ .hsr-code{min-height:44px; min-width:44px} #hsMore{min-height:44px} .hsfor-gl a{display:inline-block; padding-block:10px; margin-block:-10px} .hsfor-list .hsf-act .btn{min-height:44px} }
/* search results on phones: the chapter line under a result is cut at two lines (up to five lines made rows 309 px tall) */
@media (max-width:560px){ .hsr-tx small{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} }
/* AI assistant: an order typed as a question gets one button that prepares the shipment from it (10-23) */
.bubble .as-try{margin-top:10px}
.bubble .as-try .btn{min-height:44px; white-space:normal; text-align:start}
.bubble .as-checks li.as-sev-error{color:var(--warn); font-weight:600}
.bubble .as-terms{margin:4px 0 0; font-weight:600}   /* 10-24: Incoterm, place and buyer as read from the order */
.bubble .as-try .as-ask{min-height:44px}
.bubble .as-try{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px}
.bubble .as-gen{display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:var(--accent)!important; text-decoration:underline; text-underline-offset:3px}
.msgs > .as-offer{margin:0 0 10px} .msgs > .as-offer .btn{min-height:44px; white-space:normal; text-align:start}   /* 10-24: the shipment offer above the answer */
/* 10-24: the order and question boxes take each line's direction from its words (an English order on an Arabic page showed "ceramic mugs 2,400") */
.ask textarea, form[data-chat] textarea{unicode-bidi:plaintext}
.cta-mic[disabled], #aiNew[disabled]{opacity:.55; cursor:default}   /* while an answer is coming (10-24 QA 7) */
.cta-add{margin:6px 0 0; font-size:13px; color:var(--muted)} .cta-add[hidden]{display:none}   /* the calculator's cartons going with the order (10-24 usability 12) */
@media (pointer:coarse){ .rate button[data-r]{min-width:44px; justify-content:center} }   /* 39 px wide (design 13) */
/* 10-25 (design 13, QA 7 F10): phones before the first question: the greeting repeats the lead above it, and the starters sat under the
   fixed question box (0 of 6 in view at 390); without it they come into the first screen. It is there again with the first question. */
@media (max-width:640px){ #chat:not(:has(.msg.user)) #aiMsgs{min-height:0; padding:0; margin:0; border:0} #chat:not(:has(.msg.user)) #aiMsgs > .msg.bot:only-child{display:none} }
.ai-pad{position:relative} .ai-next{position:absolute; inset:8px 0 auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center; animation:aifade .3s ease-out}   /* starters in the room under a short answer (10-25) */
.ai-next .k{flex:1 0 100%; font-size:13px; font-weight:700; color:var(--muted)}
@keyframes aifade{from{opacity:0} to{opacity:1}} @media (prefers-reduced-motion:reduce){ .ai-next{animation:none} }
/* 10-25 (design 13): the answer style on touch screens as two 44 px pills in one row (24 px radios on two lines before) */
@media (pointer:coarse){
  #aiLvl{display:flex; flex-wrap:nowrap; gap:4px; padding:3px; border-radius:12px; background:var(--field, #0B1426); box-shadow:inset 0 0 0 1px var(--line-2, #2A3A5A); align-items:stretch}
  #aiLvl .k{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  #aiLvl label{position:relative; flex:1 1 0; margin:0; cursor:pointer}
  #aiLvl input{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer}
  #aiLvl label span{display:flex; align-items:center; justify-content:center; min-height:44px; padding:6px 10px; border-radius:9px; font-size:14px; line-height:1.25; text-align:center; color:var(--muted)}
  #aiLvl input:checked + span{background:var(--panel-3, #22314F); color:#fff; box-shadow:inset 0 0 0 1px rgba(79,139,255,.6)}
  #aiLvl input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
  .chat-top{flex-wrap:wrap} .chat-top #aiLvl{flex:1 1 auto}
}

/* 10-25 (UX 13): files first on the template catalog and the Incoterms chart; the language of a template's file; the next steps after a
   download from a catalog card take the whole row; chips and the catalog's jump links 44 px tall on touch screens */
.top-dl{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.top-dl .btn{margin:0}
.tpl-lang{margin:8px 0 0; font-size:13.5px; color:var(--muted)}
.tcards .dl-next{grid-column:1 / -1}
@media (pointer:coarse){ .chip, .t-jump a{min-height:44px; display:inline-flex; align-items:center} }
.cpx-lessor .cpx-lines-h{margin-top:0}   /* a lessor page's shipping lines, in their own card under the number box (10-25 UX 13) */
.pc-cn{margin:0 0 10px; padding:8px 12px; border-radius:10px; background:rgba(79,139,255,.10); box-shadow:inset 0 0 0 1px rgba(79,139,255,.35); font-size:14px; line-height:1.5}   /* China's split port codes (10-25) */
.tcards:has(> .dl-next){grid-auto-flow:row dense}   /* the next steps take a whole row; the cards after the downloaded one fill its row first (10-25 QA 10: two empty cells) */
@media (pointer:coarse){ #ctOut .ct-save a{display:inline-flex; align-items:center; min-height:44px} }   /* "+ Add a shipment · Shipment tracker" (22 px) */
.w-peek{display:none}
@media (max-width:640px){ .w-peek{display:flex; gap:8px; align-items:center; margin:12px 0 0; padding:8px 8px 8px 12px; border-radius:12px; background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--line-2)}
  .w-peek-t{flex:1; min-width:0; font:600 13px/1.45 var(--f-mono); min-height:calc(3 * 1.45em); display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere}
  .w-peek .btn{flex:none; min-height:44px; padding-inline:12px} }   /* amount in words: the words under the amount on phones, always three lines tall (nothing moves as they change) */
/* 11-03 design 24 + QA 30: up to eight lines, so "… ONLY" is not cut at 360 px (999,999,999.99 needs seven in es/ru); three stay reserved */
#hsIn{scroll-margin-top:48px}
/* 10-25 (UX 14): trade notes — the TOC chips snap and fade at the edge (9 chips, 2,450 px, one and a half on screen); the notes count
   under the search box (it sat at the end of the chip row, off screen); footer links 44 px on touch (18 px); body lines up to 70 characters */
@media (max-width:640px){ .ntoc ol{scroll-snap-type:x proximity; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  [dir=rtl] .ntoc ol{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)}
  .ntoc li{scroll-snap-align:start} .ntoc ol{scroll-padding-inline:16px} }   /* snap keeps the row's 16 px edge (QA 11: the first chip touched the screen edge) */
.nfcount-row{margin:-4px 0 12px; font-size:13px; color:var(--muted)}
@media (pointer:coarse){ footer.site a{display:inline-flex; align-items:center; min-height:44px}
  .supportline a{display:inline-block; padding-block:11px; margin-block:-11px} }   /* inside a sentence: a taller tap area without spreading the lines */
.nbody p, .nbody li{max-width:70ch}
/* 10-25 (UX 14): a note's "Checked against official sources" line goes to its sources; the cosmetics comparison's country chips;
   summaries in a brighter grey (they are the answer; 7.7:1 against the body's 15.7:1) */
.nchecked .nck{color:inherit; text-decoration:underline dotted; text-underline-offset:3px}
main > .lead.long + .lead-more{position:relative; z-index:1}   /* 10-25 (QA 11): the checked line's link right below took taps on the button's lower edge */
.cc-row{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line)}
.cc-row b{flex-basis:100%; font-size:13px; color:var(--muted)}
.cc-row .chip{text-decoration:none}
@media (pointer:coarse){ .cc-row .chip{display:inline-flex; align-items:center; min-height:44px} }
@media screen{ main > .lead{color:var(--soft)} }
@media (pointer:coarse){ .nsharebar .btn{min-width:44px; justify-content:center} #nEmail, #tnQ{min-height:44px} }   /* the X share button was 33 px wide; the notes search and e-mail boxes 42 px */
/* 11-02 design 23 (the pages Bing sends visitors to): */
@media (max-width:640px){ html:lang(ja) h1{font-size:min(28px, calc((100vw - 32px) / 12.5))} }   /* R2: a Japanese H1's longest katakana word fits one line at 360 px (it broke mid-word) */
html:is(:lang(zh),:lang(ja),:lang(ko)) :is(small,.note,label){font-size:14px}   /* R3: Chinese, Japanese and Korean small text at least 14 px (37% of the zh amount page was 13 px) */
html:is(:lang(zh),:lang(ja)) h1{text-spacing-trim:trim-start}   /* usability 23: a full-width bracket at the start of the second H1 line no longer looks indented */
@media (pointer:coarse){ a.ep-use, a.code{display:inline-flex; align-items:center; min-height:44px} .opts label{min-height:44px} }   /* R4: 44 px touch targets (were 19-24 px) */
/* 11-03 date pilot: "Updated <date>" under the heading (English tool pages) */
.upd{margin:-4px 0 10px;font-size:13px;color:var(--muted)}
/* 11-03 usability 23 #6: Incoterms chart on phones: rule name on one line, where delivery happens, then freight, insurance, export and import as a 2 x 2 grid */
@media (max-width:760px){
  .inco-tbl tbody tr:not(.grp){display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; padding:10px 14px}
  .inco-tbl tbody tr:not(.grp) > th, .inco-tbl tbody tr:not(.grp) > td.dl{grid-column:1 / -1; padding:0}
  .inco-tbl tbody tr:not(.grp) > th{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
  .inco-tbl tbody tr:not(.grp) > th .code{display:inline-flex}
  .inco-tbl td[data-h]:not(.dl){display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; padding:0; text-align:start}
  .inco-tbl td[data-h]:not(.dl)::before{flex:none; font-size:11.5px; line-height:1.25}
}
/* 11-03 design 23 R7: carrier table on phones: the line's name and "Open" on one 44 px row, the prefixes under them */
@media (max-width:760px){
  .ct-tbl tbody tr{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center}
  .ct-tbl tbody tr > th[scope=row]{grid-column:1; grid-row:1}
  .ct-tbl tbody tr > th[scope=row] a{display:flex; align-items:center; min-height:44px}
  .ct-tbl tbody tr > td:not(.dl){grid-column:2; grid-row:1; padding:0}
  .ct-tbl tbody tr > td:not(.dl)::before{display:none}
  .ct-tbl tbody tr > td:not(.dl) a{display:inline-flex; align-items:center; min-height:44px; padding-inline:10px}
  .ct-tbl tbody tr > td.dl{grid-column:1 / -1; grid-row:2}
}
/* 11-03 QA 27 low 4: the prefix links in the carrier table were 16 px tall; spaced lines keep each tap target about 24 px apart (WCAG 2.5.8) */
/* 11-04 design 25: inline-block let a line start with the comma after a prefix ("MSRU / , MSZU"); inline links keep the comma on the same line, the padding still widens the tap area */
@media (pointer:coarse){ .ct-tbl td.dl{line-height:2.1} .ct-tbl td.dl a{padding:2px 3px} }
/* 11-03 QA 27 low 1: in Arabic and Urdu a chip cut with an ellipsis showed the cut inside a Latin word or number ("OSS…" for IOSS); those chips wrap instead */
@media (max-width:560px){
  .ntoc:is(:lang(ar),:lang(ur)) ol{align-items:center}
  .ntoc:is(:lang(ar),:lang(ur)) a{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.4; padding:12px 14px; border-radius:22px}
}

/* 11-04 design 26: the bottom result bar of the LCL charges and export price calculators (common.js); phones and tablets only */
.sumbar{display:none}
@media (max-width:899px){
  html{scroll-padding-bottom:72px}
  .sumbar{display:block; position:fixed; inset-inline:0; bottom:0; z-index:40; background:var(--panel-3); border-top:1px solid var(--line-2); box-shadow:0 -6px 16px rgba(0,0,0,.35); padding:0 0 env(safe-area-inset-bottom,0px)}
  .sumbar.sb-off{visibility:hidden; transform:translateY(100%)}
  .sumbar a{display:flex; flex-wrap:nowrap; align-items:center; gap:8px 18px; min-height:48px; padding:6px 16px; color:var(--ink); text-decoration:none; overflow-x:auto; scrollbar-width:none}
  .sumbar a::-webkit-scrollbar{display:none}
  .sumbar a > span{display:flex; flex:none; align-items:baseline; gap:6px; font-size:13px; white-space:nowrap}
  .sumbar a > span:only-child{flex:1 1 auto; justify-content:space-between; gap:12px; font-size:14px; white-space:normal}
  .sumbar span > span{color:var(--muted); font-weight:600}
  .sumbar b{font:700 16px/1.3 var(--f-mono); direction:ltr; unicode-bidi:isolate; color:var(--ink)}
  .sumbar a:focus-visible{outline-offset:-3px}
}
@media print{.sumbar{display:none !important}}

/* 11-04 design 26: Arabic and Urdu carrier table on phones: the prefix list (td.dl, direction ltr from .num) was left-aligned by .ttable td.dl{text-align:start} under right-aligned labels; align it right like other .num cells (the prefixes themselves still read left to right) */
html[dir=rtl] .ttable td.dl{text-align:right}

/* 11-06 support bar (common.js): after a tool was used; fixed over the top so the page does not move; the site's panel and accent colours */
.sbar{position:fixed; z-index:70; top:0; inset-inline:0; display:flex; align-items:center; padding:8px 56px 8px 18px;
  background:var(--panel-2); border-bottom:1px solid var(--line-2); box-shadow:0 10px 24px rgba(0,0,0,.35); transform:translateY(-110%); transition:transform .25s ease}
[dir=rtl] .sbar{padding:8px 18px 8px 56px}
.sbar.on{transform:none}
.sbar-t{margin:0; max-width:none; color:var(--soft); font-size:14px; line-height:1.4}
.sbar-a{color:var(--accent); font-weight:700; text-decoration:none; white-space:nowrap; padding:6px 0}
.sbar-a:hover{text-decoration:underline}
.sbar-x{position:absolute; top:50%; inset-inline-end:6px; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:22px; line-height:1; cursor:pointer}
.sbar-x:hover{background:var(--panel-3); color:var(--ink)}
.sbar-x:focus-visible, .sbar-a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:640px){ .sbar{padding:8px 52px 8px 14px} [dir=rtl] .sbar{padding:8px 14px 8px 52px} .sbar-t{font-size:13.5px} }
@media (prefers-reduced-motion:reduce){ .sbar{transition:none} }
@media print{ .sbar{display:none} }
/* 11-05 design 27 (11-06 qa35: 78px, the bar is 74px when it takes three lines): the result bar's tap and keyboard focus stop below the support bar; the skip link shows over it */
html:has(.sbar){scroll-padding-top:78px}
.skip:focus, .skip:focus-visible{z-index:80}