/* Nordic Wristbands UK desks – one look for Desks UK, Sales Desk UK and Landed Cost Desk UK (30.10.2026).
   Built on the EU customer portal (portal.nordicwristbands.com /my/): paper background, ink header with pill menu,
   white rounded cards, Archivo + Instrument Serif, pill buttons, mono figures. Same file in each desk's assets. */
:root{
  --paper:#F4F2ED;--card:#FFFFFF;--ink:#0B1416;--ink2:#1E2A2C;--muted:#5C6660;--stone:#E0DCD3;--field:#CFCAC0;
  --teal:#0F7C8C;--teal-d:#0A4E59;--teal-l:#B9D9DD;--teal-bg:#E1EFED;
  --lime:#8CC63F;--moss:#5C8A2A;--moss-bg:#EDF3DC;--moss-d:#3F5F1C;--pine:#9FB0AE;
  --warn:#8A5A00;--warn-bg:#FFF4D6;--bad:#8A2414;--bad-bg:#FBE4E1;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:'Instrument Serif',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans)}
a{color:var(--teal-d)}a:hover{color:var(--teal)}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}.small{font-size:13px}.mono,td.n,td.r{font-family:var(--mono);font-size:13.5px}
.serif{font-family:var(--serif);font-style:italic;font-weight:400}

/* header */
.ptop{background:var(--ink);color:var(--paper)}
.ptop .wrap{max-width:1400px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding-top:14px;padding-bottom:14px}
.pbrand{display:flex;align-items:center;gap:10px;color:var(--paper);text-decoration:none;flex:none}
.pbrand img{height:20px;width:auto;display:block}
.pbrand i{font-family:var(--serif);font-size:19px;color:var(--pine);position:relative;top:1px;white-space:nowrap}
.pbrand:hover{color:var(--paper)}
.ptop nav{display:flex;flex-wrap:wrap;gap:2px;align-items:center}
.ptop nav a{color:var(--paper);text-decoration:none;padding:7px 13px;border-radius:99px;font-size:14px;white-space:nowrap;line-height:1.3}
.ptop nav a:hover{background:var(--ink2);color:var(--paper)}
.ptop nav a.on{background:var(--paper);color:var(--ink);font-weight:600}
.ptop nav .count{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:var(--lime);color:var(--ink);font:600 11px/18px var(--sans);text-align:center}
.pwho{margin-left:auto;display:flex;flex-wrap:nowrap;align-items:center;gap:12px;font-size:13px;color:var(--pine);white-space:nowrap}
.pwho b{color:var(--paper);font-weight:500}
.pwho a{color:var(--pine)}.pwho a:hover{color:var(--paper)}
.pwho a.chipl{color:var(--pine);text-decoration:none;font-size:13px}.pwho a.chipl::after{content:'·';margin-left:12px;color:#3A4A4E}
.pwho a.chipl:hover{color:var(--paper)}

/* page */
main,.pmain{max-width:1240px;margin:0 auto;padding:32px 24px 64px;display:flex;flex-direction:column;gap:20px}
main>*{min-width:0}
h1{margin:0;font-size:clamp(26px,3.4vw,38px);line-height:1.08;font-weight:800;letter-spacing:-.02em;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
h1 .serif{color:var(--teal)}
h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
h3{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
p{margin:0}
.eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.lede{color:var(--muted);font-size:16px;max-width:760px}
.foot,footer{text-align:center;color:var(--muted);font:11px var(--mono);padding:8px 16px 32px}

/* cards */
.card{background:var(--card);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:16px;min-width:0;border:0}
.card.narrow{max-width:520px;width:100%;margin:24px auto}
.card > h2:first-child{margin-top:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* KPI tiles */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat,.kpi{background:var(--card);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.stat b,.kpi .v{font:500 28px/1.1 var(--mono);order:2}
.stat span,.kpi .k{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);order:1;display:flex;align-items:center;gap:6px}
.stat.green{background:var(--moss-bg)}

/* buttons */
button,.btn{font:600 14px/1.2 var(--sans);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:99px;border:0;background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;white-space:nowrap}
button:hover,.btn:hover{background:var(--ink2);color:var(--paper)}
button.primary,.btn.primary,.btn.lime{background:var(--lime);color:var(--ink)}
button.primary:hover,.btn.primary:hover,.btn.lime:hover{filter:brightness(1.05);background:var(--lime);color:var(--ink)}
button.ghost,.btn.ghost,.btn.light,button.light{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
button.ghost:hover,.btn.ghost:hover,.btn.light:hover{background:var(--ink);color:var(--paper)}
button.link{background:none;color:var(--teal-d);padding:0;border-radius:0;font-weight:500;text-decoration:underline}
button.link:hover{background:none;color:var(--teal)}
button:disabled,button[disabled],.btn.disabled{opacity:.4;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
form.inline{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}

/* forms */
label{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:600;font-size:13px;color:var(--ink)}
label > input:not([type=checkbox]):not([type=radio]),label > select,label > textarea,label > .inl,label > .muted + input{flex:1 1 100%}
input,select,textarea{font:400 15px var(--sans);color:var(--ink);background:#fff;border:1px solid var(--field);border-radius:10px;padding:10px 12px;width:100%;min-width:0}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);border-color:var(--teal)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--teal)}
label.check{flex-wrap:nowrap;align-items:center;gap:10px;font-weight:400}
.form2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;align-items:start}
.form2 .wide,.form2 fieldset{grid-column:1/-1}
fieldset{border:1px solid var(--stone);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
legend{font-weight:700;font-size:13px;padding:0 6px}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bar input[type=search],.bar input[name=s]{flex:1 1 280px;width:auto}
.bar select{width:auto}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tabs a{padding:8px 14px;border-radius:99px;text-decoration:none;background:var(--card);color:var(--ink);font-weight:600;font-size:14px}
.tabs a.on{background:var(--ink);color:var(--paper)}
.copy{display:flex;gap:8px}.copy input{flex:1;font-family:var(--mono);font-size:13px}

/* tables */
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--stone)}
td{padding:11px 10px;border-top:1px solid var(--stone);vertical-align:top}
tr:first-child td{border-top:0}
thead + tbody tr:first-child td{border-top:0}
.r,td.r,th.r{text-align:right;white-space:nowrap}
tr.sum td{font-weight:700;border-top:2px solid var(--ink)}
tbody tr:hover td{background:#FAF9F6}
.tbl,.scroll{overflow-x:auto}
.card > table,.card > .tbl{margin:0 -8px;width:calc(100% + 16px)}
td a{font-weight:600}

/* badges, notices */
.badge{display:inline-block;font:600 12px/1.2 var(--sans);padding:5px 10px;border-radius:99px;white-space:nowrap;background:var(--teal-bg);color:var(--teal-d);letter-spacing:0;text-transform:none;vertical-align:middle}
.s-draft{background:var(--stone);color:var(--ink)}
.s-sent{background:var(--teal-bg);color:var(--teal-d)}
.s-accepted,.s-ordered{background:var(--moss-bg);color:var(--moss-d)}
.s-invoiced{background:#E6E8F5;color:#2E3A7A}
.s-paid{background:var(--ink);color:var(--paper)}
.s-declined,.s-cancelled{background:var(--bad-bg);color:var(--bad)}
.flash{padding:12px 16px;border-radius:12px;background:var(--moss-bg);color:var(--moss-d)}
.flash.err,.err{background:var(--bad-bg);color:var(--bad)}
p.err{padding:10px 14px;border-radius:12px}
.warn{color:var(--warn)}
p.warn{background:var(--warn-bg);padding:10px 14px;border-radius:12px}
.internal{color:var(--warn)}
th.internal{color:var(--warn)}

/* key-value lists, logs */
dl.kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:8px 18px;margin:0;font-size:14px}
dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;overflow-wrap:anywhere}
ul.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
ul.log li{padding-bottom:8px;border-bottom:1px dashed var(--stone)}
ul.log .muted{font-family:var(--mono);font-size:12px;margin-right:6px}

/* search results (customer pickers, Companies House) */
ul.res{list-style:none;margin:0;padding:0;border-radius:12px;overflow:hidden}
ul.res:empty{display:none}
ul.res li{padding:10px 14px;background:#fff;border:1px solid var(--stone);border-top:0;cursor:pointer;font-size:14px}
ul.res li:first-child{border-top:1px solid var(--stone);border-radius:12px 12px 0 0}
ul.res li:last-child{border-radius:0 0 12px 12px}
ul.res li:only-child{border-radius:12px}
ul.res li:hover,ul.res li:focus{background:var(--teal-bg);outline:0}
.lookrow{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.inl{display:flex;gap:8px}.inl input{flex:1}

/* help tips */
.tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--teal-bg);color:var(--teal-d);font:700 11px/1 var(--sans);cursor:help;position:relative;flex:none;text-transform:none;letter-spacing:0}
.tip .tip-box{display:none;position:absolute;left:50%;top:24px;transform:translateX(-50%);width:min(300px,80vw);background:var(--ink);color:var(--paper);font:400 13px/1.45 var(--sans);padding:10px 12px;border-radius:10px;z-index:20;text-align:left;box-shadow:0 8px 24px rgba(11,20,22,.25)}
.tip:hover .tip-box,.tip:focus .tip-box,.tip.open .tip-box{display:block}

/* manual */
.manual{background:var(--card);border-radius:18px;padding:28px;max-width:900px;display:flex;flex-direction:column;gap:12px}
.manual h2{margin-top:12px}.manual ul,.manual ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}

/* sign-in */
.signin{max-width:460px;margin:40px auto;background:var(--card);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:14px}

@media (max-width:1300px){.pwho{margin-left:0;width:100%;justify-content:flex-end}}
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2,.grid3,.lookrow{grid-template-columns:1fr}
  .pwho{margin-left:0;width:100%}
}
@media (max-width:640px){
  .wrap,main,.pmain{padding-left:16px;padding-right:16px}
  main,.pmain{padding-top:20px;gap:16px}
  .form2,fieldset{grid-template-columns:1fr}
  .card{padding:18px;border-radius:16px}
  .pbrand img{height:16px}
  .ptop nav{width:calc(100% + 32px);margin:0 -16px;padding:0 16px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .ptop nav::-webkit-scrollbar{display:none}
  .ptop nav a{padding:5px 11px;font-size:13px}
  .stat b,.kpi .v{font-size:22px}
  table{display:block;overflow-x:auto;max-width:100%}
  .card > table,.card > .tbl{margin:0;width:100%}
  .pbrand i{font-size:15px}
  .pwho{font-size:12px;gap:8px;flex-wrap:wrap;white-space:normal}
  h1{font-size:26px}
  button,.btn{padding:9px 15px}
}
@media print{.ptop,.foot,footer,.actions,.noprint{display:none!important}body{background:#fff}}