/* Rapple Logistics client portal, in the house look (draft 7, RL skin; Leon approved the house look 26 Sept 2026).
   Same tokens as the staff OS (os.css, data-brand="rl", depth stone): Figtree for everything, Marcellus for the big
   greeting and page titles, IBM Plex Mono for references. Stone canvas, white panels, 12px panel corners, 8px controls.
   Shell = the house trade portal (RappleOS Cleanup\Design\mockups\portal-account.html): dark top bar, tabs on desktop,
   bottom bar on phones. Fonts are our own files (SIL Open Font License); nothing is loaded from anyone else. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin.woff2) format('woff2')}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/marcellus-400-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-latin.woff2) format('woff2')}
:root{
  /* RL skin */
  --ink:#121A26;--text:#121A26;--text2:#4A5668;--steel:#1D5E9E;--link:#1D5E9E;--mist:#8494A9;--silver:#C3CCD8;
  --bg:#E6EAF0;--paper:#FFFFFF;--sunk:#F7F9FB;--line:#DCE2EA;--line2:#E9EDF2;--field:#8494A9;--mute:#4A5668;--mute2:#56637A;
  --btn:#121A26;--btn-fg:#FFFFFF;--btn-hover:#22324A;
  --top:#0F1621;--top-2:#16202E;--top-text:#C9D2DE;--top-muted:#8494A9;--accent:#58A6E8;--accent-bg:#E3EFFA;
  /* house states: info = moving, idle = waiting, bad = held, warn = needs you, ok = released */
  --moving:#2F5575;--moving-bg:#E3ECF3;--wait:#5E594F;--wait-bg:#ECE9E2;--hold:#A1322B;--hold-bg:#F8E3E0;
  --needs:#8A5A00;--needs-bg:#FBF0D6;--needs-line:#C58A18;--needs-panel:#FFFBF2;--needs-edge:#EDD49A;
  --ok:#2E6B3A;--ok-bg:#E6F0E4;--done:#121A26;--done-bg:#E8ECF1;--muted:#56637A;--muted-bg:#EEF1F5;
  --bubble-me:#E9F2FB;--bubble-me-line:#C9DDF2;
  --r:12px;--rs:8px;--pill:999px;
  --disp:'Marcellus',Georgia,serif;--body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --shadow:0 1px 2px rgba(18,26,38,.05);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--body);font-feature-settings:"tnum" 1,"cv11" 1}
a{color:var(--link)}
h1,h2,h3{margin:0;font-weight:600}
h1{font-family:var(--disp);font-size:32px;line-height:1.05;letter-spacing:.2px}
h2{font-size:16px}
h3{font-size:16px}
p{margin:0 0 10px}
.i{flex:none;vertical-align:-4px}
.mono{font-feature-settings:"tnum" 1;letter-spacing:.2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--mute)} .small{font-size:14px}
.hint{color:var(--mute);font-size:14px;margin:8px 0 0}
.fine{color:var(--mute2);font-size:12px;margin:8px 0 0}
.nowrap{white-space:nowrap}

/* ---------- shell: the house trade portal (dark top bar; tabs on desktop; bottom bar on phones) */
.brand{text-decoration:none}
.ptop{position:sticky;top:0;z-index:20;background:var(--top);color:#fff;padding-top:env(safe-area-inset-top)}
.ptop-in{display:flex;align-items:center;gap:12px;max-width:1240px;margin:0 auto;min-height:60px;padding:8px 16px}
/* the logo may shrink (200% text, narrow phones) so the bar never scrolls sideways; phones get the wordmark without the tagline */
.plogo{display:flex;align-items:center;min-height:44px;flex:0 1 auto;min-width:0}
.plogo picture{display:block;min-width:0;max-width:100%}
.plogo img{display:block;width:auto;height:auto;max-width:100%;max-height:28px}
.ptop .sp{flex:1}
.pwho{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;color:#fff;text-decoration:none}
.pwho .co{text-align:right;min-width:0}
.co b{display:block;font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.co span{display:block;font-size:12px;color:var(--top-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.pav{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--top-2);color:var(--top-text);font:700 13px var(--body);letter-spacing:.02em}
.ptabs{display:none;background:var(--paper);border-bottom:1px solid var(--line)}
.ptabs-in{display:flex;gap:4px;max-width:1240px;margin:0 auto;padding:0 12px;overflow-x:auto;scrollbar-width:none}
.ptabs a{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;color:var(--text2);text-decoration:none;font:600 14px var(--body);white-space:nowrap}
.ptabs a.on{color:var(--text)}
.ptabs a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--text);border-radius:2px 2px 0 0}
.ptabs .badge{position:static}
main{padding:20px 16px 108px;max-width:1240px;margin:0 auto}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;min-height:68px;min-width:0;color:var(--mute2);text-decoration:none;font-size:12px;font-weight:600;transition:transform .1s ease}
.tabs a span{max-width:100%;white-space:nowrap}
.tabs a .i{width:22px;height:22px}
/* very narrow (200% text on a phone): icons only, the names stay for screen readers */
@media (max-width:300px){.tabs a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.tabs a:active{transform:scale(.96)}
.tabs a.on{color:var(--text)}
.tabs .badge{position:absolute;top:8px;left:calc(50% + 6px)}
.badge{display:inline-block;min-width:18px;height:18px;padding:0 6px;border-radius:var(--pill);background:#A1322B;color:#fff;font:700 12px/18px var(--body);text-align:center;font-style:normal}
.demobar{background:var(--needs-bg);color:var(--needs);font-size:14px;padding:8px 16px;text-align:center;border-bottom:1px solid var(--needs-edge)}
.demobar a{color:var(--needs);font-weight:700}
.previewbar{background:var(--moving-bg);color:var(--moving);padding:10px 14px;border-radius:var(--r);margin:0 0 14px;font-size:14px}
@media (min-width:960px){
  .tabs{display:none}
  .ptabs{display:block}
  .ptop-in{min-height:64px;padding:8px 24px}
  .plogo img{max-height:32px}
  .ptabs-in{padding:0 20px}
  main{padding:32px 24px 56px}
  .co b,.co span{max-width:320px}
}
@media (hover:hover){.ptabs a:hover{color:var(--text)}.pwho:hover .pav{background:#22324A}}
@media (max-width:600px){.plogo img{max-height:18px}}
@media (max-width:420px){.co span{display:none}}
@media (max-width:300px){.pwho .co{display:none}}
/* the sticky action on phones (house .pfab): sits above the bottom bar while something is asked of the client */
.pfab{display:none}
@media (max-width:959px){
  .pfab{display:block;position:fixed;left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));bottom:calc(80px + env(safe-area-inset-bottom));z-index:29}
  .pfab .quickup{margin:0}
  .pfab .quickup .btn{width:100%;min-height:52px;font-size:16px;box-shadow:0 6px 18px rgba(18,26,38,.22)}
  body.has-pfab main{padding-bottom:180px}
}

/* ---------- buttons, chips, forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--btn);background:var(--btn);color:var(--btn-fg);font:600 14px/1 var(--body);padding:12px 16px;border-radius:var(--r);text-decoration:none;cursor:pointer;min-height:44px;transition:transform .1s ease,background .15s}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn.off{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--paper);color:var(--text);border-color:var(--field)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--link);padding:8px 10px}
.btn.small{font-size:14px;padding:8px 12px}
.btn.wide{width:100%}
.btn.busy{opacity:.7}
@media (hover:hover){.btn:hover{background:var(--btn-hover)}.btn.ghost:hover{border-color:var(--text);background:var(--paper)}.btn.quiet:hover{background:var(--line2)}}
.chip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;line-height:1.2;padding:4px 8px;border-radius:var(--rs);vertical-align:1px;max-width:100%}
.t-moving{background:var(--moving-bg);color:var(--moving)} .t-wait{background:var(--wait-bg);color:var(--wait)}
.t-hold{background:var(--hold-bg);color:var(--hold)} .t-needs{background:var(--needs-bg);color:var(--needs)}
.t-ok{background:var(--ok-bg);color:var(--ok)} .t-done{background:var(--done-bg);color:var(--done)} .t-muted{background:var(--muted-bg);color:var(--muted)}
label{display:block;font-size:14px;font-weight:600;color:var(--text2);margin:0 0 4px}
input,select,textarea{width:100%;font:16px/1.4 var(--body);color:var(--text);background:var(--paper);border:1px solid var(--field);border-radius:var(--r);padding:10px 12px;min-height:44px}
textarea{min-height:88px;resize:vertical}
input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible,button:focus-visible,.stg:focus-within{outline:2px solid var(--steel);outline-offset:2px}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;margin:4px 0 0;accent-color:var(--steel)}
.stack>*+*{margin-top:12px}
.form>*+*{margin-top:12px}
.grid2,.grid3{display:grid;gap:12px}
.grid2>*,.grid3>*{min-width:0}
@media (min-width:640px){.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr}.grid2 .span2,.grid3 .span2{grid-column:span 2}}
@media (min-width:1100px){.grid3{grid-template-columns:1fr 1fr 1fr}.scol .grid3{grid-template-columns:1fr 1fr}}
.tick{display:flex;gap:10px;align-items:center;font-weight:500;font-size:14px;color:var(--text2);margin:10px 0}
.file{position:relative;display:flex;align-items:center;gap:8px;border:1px dashed var(--field);border-radius:var(--r);padding:12px;background:var(--sunk);cursor:pointer;font-weight:500;color:var(--mute);margin:0;min-height:48px}
.file input{position:absolute;inset:-1px;opacity:0;cursor:pointer;min-height:0}
.file.has{border-style:solid;color:var(--text)}
.quickup{margin:0}
.reqs div>.quickup{margin-top:10px}
.sadlink{display:inline-flex;align-items:center;min-height:44px}
.quickup label.btn{position:relative;overflow:hidden;margin:0;color:var(--btn-fg)}
.quickup input{position:absolute;inset:-1px;opacity:0;cursor:pointer;min-height:0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 16px}
.card h2{margin:0 0 12px}
.card h2+h2,.card .grid2+h2{margin-top:24px}
.switch{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line2);margin:0;font-weight:400}
.switch span b{display:block;font-size:16px;font-weight:600}
.switch span small{color:var(--mute);font-size:14px}
.switch.locked{opacity:.75}
.switch input{flex:none;margin-top:4px}
.flash{padding:12px 14px;border-radius:var(--r);margin:0 0 14px;font-size:14px}
.f-ok{background:var(--ok-bg);color:var(--ok)} .f-err{background:var(--hold-bg);color:var(--hold)} .f-info{background:var(--moving-bg);color:var(--moving)}

/* ---------- headings */
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 16px}
.phead .sub{color:var(--mute);margin:6px 0 0;max-width:640px}
.pacts{display:flex;gap:8px;flex-wrap:wrap}
.hello{margin:0 0 16px}
.hello .hi{color:var(--mute);font-size:16px;margin:0 0 2px}
.hello h1{font-size:32px}
.hello h1.needs-h{color:var(--needs)}
.hello .sub{font-size:16px;color:var(--mute);margin:6px 0 0}
@media (min-width:960px){.hello h1{font-size:40px}}
.block{margin:0 0 24px}
.block>h2{margin:0 0 10px}
.bhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px}
.more{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;text-decoration:none}
.cols{display:grid;gap:24px}
@media (min-width:1100px){.cols{grid-template-columns:1.2fr 1fr}}
/* Home on wide screens: what needs you and what is on the go on the left, updates and your controller in a 380px side column */
.homegrid>*{min-width:0}
@media (min-width:1100px){.homegrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}.hside .person{grid-template-columns:44px 1fr}.hside .person .pacts{grid-column:1 / -1}}
.backlink{display:inline-flex;align-items:center;gap:4px;color:var(--mute);text-decoration:none;font-size:14px;margin:0 0 8px;min-height:44px}
.searchnote{font-size:14px;color:var(--mute);margin:-4px 0 12px}

/* ---------- search, segments */
.search{position:relative;display:flex;align-items:center;min-width:0;flex:1 1 260px;max-width:380px}
.search .i{position:absolute;left:11px;color:var(--mute2)}
.search input{padding-left:36px}
.seg{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 0 10px;padding-bottom:2px}
.seg::-webkit-scrollbar{display:none}
.seg a{flex:none;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--mute);font-weight:500;font-size:14px;padding:10px 12px;border-radius:var(--rs);border:1px solid transparent;transition:transform .1s ease}
.seg a:active,.mchip:active{transform:scale(.97)}
.seg a.on{background:var(--paper);border-color:var(--line);color:var(--text);font-weight:600}
.seg a em{font-style:normal;color:var(--mute2);font-weight:500;margin-left:2px}
.mchips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.mchip{display:inline-flex;align-items:center;gap:4px;text-decoration:none;font-size:14px;font-weight:500;color:var(--text2);border:1px solid var(--line);background:var(--paper);padding:8px 12px;border-radius:var(--pill);min-height:44px;transition:transform .1s ease}
.mchip.on{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 12px}
.toolbar .seg{margin:0}
/* phones: the search takes the full row, status tabs and mode chips each stay on one line that scrolls (house .stychips) */
@media (max-width:959px){
  .toolbar .search,.phead .search,.phead .pacts.psearch{flex:1 1 100%;max-width:none}
  .mchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .mchips::-webkit-scrollbar{display:none}
  .mchip{flex:none}
  .seg,.mchips{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
}

/* ---------- shipment rows */
.rows{display:flex;flex-direction:column;gap:8px}
.srow{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 14px 12px;text-decoration:none;color:var(--text);transition:border-color .15s,transform .1s ease}
.srow:active{transform:scale(.99)}
@media (hover:hover){.srow:hover{border-color:var(--mist)}}
/* no coloured card edges (house rule): the chip carries the state in words */
.glyph{width:40px;height:40px;border-radius:var(--r);background:var(--bg);display:grid;place-items:center;color:var(--steel)}
.smain{min-width:0;display:flex;flex-direction:column;gap:4px}
.sref{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:14px}
.sref b{font-weight:600;letter-spacing:.2px}
.sref span{color:var(--mute2)}
.sref i{font-style:normal;color:var(--mute);font-size:12px;border:1px solid var(--line);border-radius:var(--rs);padding:0 6px}
.sdesc{font-weight:600;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.sline{color:var(--mute);font-size:14px;line-height:1.45}
.sline .chip{margin-right:4px}
.eta{text-align:right;min-width:64px}
.eta small{display:block;color:var(--mute2);font-size:12px}
.eta strong{display:block;font-family:var(--disp);font-size:24px;font-weight:600;line-height:1;margin-top:2px;white-space:nowrap}
.eta .was{display:block;color:var(--hold);font-size:12px;margin-top:4px;text-decoration:line-through}
.eta.none strong,.eta.done strong{color:var(--mute)}
.rows.compact .srow{padding:10px 12px}
.rows.compact .eta strong{font-size:20px}
@media (max-width:420px){.srow{grid-template-columns:1fr auto}.glyph{display:none}}
@media (max-width:300px){.srow{grid-template-columns:1fr}.eta{text-align:left}}

/* ---------- needs you */
.needs{background:var(--needs-panel);border:1px solid var(--needs-edge);border-radius:var(--r);padding:14px 16px;margin:0 0 20px}
.needs h2{display:flex;align-items:center;gap:8px;color:var(--needs);margin:0 0 8px}
.reqs{list-style:none;margin:0;padding:0}
.reqs li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--needs-edge);scroll-margin-top:84px}
.reqs li:first-child{border-top:0}
.reqs li>.i{color:var(--needs);margin-top:2px}
.reqs b{display:block;font-size:16px}
.reqs p{margin:4px 0;color:var(--text2);font-size:14px}
.reqs span{display:block;color:var(--mute);font-size:14px}
.reqs span a{color:var(--mute);display:inline-flex;align-items:center;min-height:44px}
.reqs em{display:block;font-style:normal;font-weight:600;color:var(--needs)} .reqs em.late{color:var(--hold)}
.reqs.full li{grid-template-columns:22px 1fr}
@media (max-width:360px){.reqs li{grid-template-columns:22px 1fr}.reqs li>form,.reqs li>a.btn{grid-column:2}}
.reqs li>div{min-width:0}
/* 200% text on a phone (under 300 CSS px): fewer nested paddings, no icon column, so words fit their card */
@media (max-width:300px){
  .reqs li,.reqs.full li{grid-template-columns:minmax(0,1fr)}.reqs li>.i{display:none}.reqs li>form,.reqs li>a.btn{grid-column:1}
}
.upl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0}
.upl .file{flex:1 1 220px}
.reqs.staff li{border-top-color:var(--line2);grid-template-columns:22px 1fr auto}
.reqs.staff li>.i{color:var(--steel)}
.reqs form{display:flex;gap:2px}

/* ---------- shipment page */
.shead{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);grid-template-areas:"info" "needs" "date";background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 16px}
.sh-l{grid-area:info;min-width:0}
.shead .needs.inhead{grid-area:needs;margin:0}
.shead .bigdate{grid-area:date}
@media (min-width:760px){.shead{grid-template-columns:minmax(0,1fr) 240px;grid-template-areas:"info date" "needs needs";padding:20px}}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;color:var(--mute);font-size:14px;margin:0 0 8px}
.kicker a{color:var(--mute)}
.shead h1{font-size:32px;margin:0 0 12px;overflow-wrap:anywhere}
.now{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.now p{margin:0;font-size:20px;line-height:1.4;font-weight:500;color:var(--text)}
.note{display:flex;gap:8px;align-items:flex-start;background:var(--sunk);border-radius:var(--r);padding:10px 12px;margin:12px 0 0;color:var(--text2);font-size:14px}
.note .i{color:var(--steel);margin-top:2px} .note i{color:var(--mute);font-style:normal}
.upd{color:var(--mute2);font-size:12px;margin:10px 0 0}
.bigdate{border-top:1px solid var(--line2);padding-top:12px;display:flex;flex-direction:column;gap:4px;background:none;color:var(--text)}
@media (min-width:760px){.bigdate{border-top:0;border-left:1px solid var(--line2);padding:0 0 0 20px}}
.bigdate small{color:var(--mute);font-size:14px}
.bigdate strong{font-family:var(--disp);font-size:40px;font-weight:600;line-height:1;color:var(--text)}
.bigdate.t-hold strong{color:var(--hold)} .bigdate.t-ok strong,.bigdate.t-done strong{color:var(--ok)}
.bigdate span{color:var(--mute);font-size:14px}
.bigdate .was{color:var(--hold);font-weight:500}
.bigdate .fine{font-size:12px;margin:4px 0 0}
.sgrid{display:flex;flex-direction:column}
.scol{display:contents}
.b-journey{order:1}.b-customs{order:2}.b-docs{order:3}.b-money{order:4}.b-msgs{order:5}.b-refs{order:6}.b-details{order:7}.sgrid .person{order:8}
.docs-first .b-docs{order:0}
@media (min-width:1100px){.sgrid{display:grid;gap:0 24px;grid-template-columns:1.35fr 1fr}.scol{display:block;min-width:0}}
.sgrid .block{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 16px}
@media (min-width:960px){.sgrid .block{padding:20px}}
details.fold summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;cursor:pointer;list-style:none;min-height:44px}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary span{color:var(--link);font-size:14px}
details.fold[open] summary{margin-bottom:12px}
details.fold[open] summary span{display:none}
.journey{list-style:none;margin:0;padding:0}
.journey li{position:relative;display:grid;grid-template-columns:24px 1fr;gap:10px;padding:0 0 16px}
.journey li:last-child{padding-bottom:0}
.journey li::before{content:"";position:absolute;left:11px;top:22px;bottom:-2px;width:2px;background:var(--line)}
.journey li:last-child::before{display:none}
.journey li.j-done::before{background:var(--text)}
.journey .dot{width:24px;height:24px;border-radius:var(--pill);border:2px solid var(--field);background:var(--paper);display:grid;place-items:center;color:var(--paper);z-index:1}
.journey .j-done .dot{background:var(--text);border-color:var(--text)}
.journey .j-now .dot{border-color:var(--moving);box-shadow:0 0 0 4px var(--moving-bg)}
.journey b{font-size:16px;font-weight:600}
.journey .j-todo b,.journey .j-next b{color:var(--mute);font-weight:500}
.journey time{display:block;color:var(--mute);font-size:14px}
.journey .j-now time{color:var(--moving)}
.journey p{margin:4px 0 0;color:var(--text2);font-size:14px}
.journey em{display:inline-block;font-style:normal;font-size:12px;font-weight:600;color:var(--moving);background:var(--moving-bg);border-radius:var(--rs);padding:2px 6px;margin-top:4px}
.cs-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px}
.code{color:var(--mute2);font-size:12px}
.customs>p{color:var(--text2);font-size:16px}
.facts{display:grid;gap:12px 16px;margin:12px 0 0}
.facts.two{grid-template-columns:1fr 1fr}
.facts div{min-width:0}
.facts dt{color:var(--mute2);font-size:12px}
.facts dd{margin:2px 0 0;font-size:16px;font-weight:500;overflow-wrap:anywhere}
@media (min-width:640px){.customs .facts{grid-template-columns:repeat(3,1fr)}}
.refs{display:flex;flex-direction:column;gap:10px}
.refrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ref{display:flex;flex-direction:column;min-width:0;max-width:100%}
.ref small{color:var(--mute2);font-size:12px}
.copy{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--sunk);border-radius:var(--rs);padding:8px 10px;font:600 16px var(--body);color:var(--text);cursor:pointer;min-height:44px;max-width:100%;overflow-wrap:anywhere;text-align:left;transition:transform .1s ease}
.copy:active{transform:scale(.97)}
.copy .i{color:var(--mute2)}
.copy.done{border-color:var(--ok);color:var(--ok)}
.ext{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;text-decoration:none;margin-top:14px;min-height:44px}
.check{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:2px}
.check li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:14px;color:var(--mute);padding:4px 0}
.check li.ok{color:var(--text)} .check li.ok .i{color:var(--ok)}
.check li.need{color:var(--text)} .check li.need .i,.check li.need span{color:var(--needs);font-weight:600}
.check li span{font-size:12px;color:var(--mute2)} .check li.ok span{color:var(--ok)}
.docs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.docs li{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;gap:8px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line2)}
.docs li>.i{color:var(--steel)}
.docs b{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.docs span{display:block;color:var(--mute);font-size:12px}
.docs .btn.small{min-height:44px;min-width:44px}
.docs.wide{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:0 16px}
.docs.wide li{grid-template-columns:20px minmax(0,1fr) auto auto auto}
.docs.wide li:last-child{border-bottom:0}
.dship{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
@media (max-width:560px){.docs.wide li{grid-template-columns:20px minmax(0,1fr) auto auto}.dship{grid-column:2;grid-row:2}}
@media (max-width:300px){.docs li,.docs.wide li{grid-template-columns:20px 1fr}.docs li>a,.docs li>form{grid-column:2}}
.staffdocs li{grid-template-columns:20px minmax(0,1fr) auto auto auto}
.staffdocs li.internal b::after{content:" · staff only";color:var(--hold);font-weight:500;font-size:12px}
.staffdocs form{margin:0}
details.send{margin:12px 0 0;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
details.send summary{cursor:pointer;font-weight:600;font-size:14px;display:flex;gap:6px;align-items:center;list-style:none;min-height:44px}
details.send summary::-webkit-details-marker{display:none}
details.send[open] summary{margin-bottom:12px}
.money{width:100%;border-collapse:collapse;font-size:14px}
.money td{padding:8px 0;border-bottom:1px solid var(--line2);vertical-align:top}
.money td small{display:block;color:var(--mute2);font-size:12px}
.money .num{text-align:right;white-space:nowrap;font-weight:500;padding-left:10px}
.money tfoot td{border-bottom:0;font-weight:700;font-size:16px;padding-top:12px}
.thread{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px}
.thread li{display:flex;flex-direction:column;max-width:88%}
.thread .bubble{background:var(--paper);border:1px solid var(--line);border-radius:12px 12px 12px 4px;padding:10px 12px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.thread small{color:var(--mute2);font-size:12px;margin:4px 4px 0}
.thread .mine{align-self:flex-end;align-items:flex-end}
.thread .mine .bubble{background:var(--bubble-me);border-color:var(--bubble-me-line);border-radius:12px 12px 4px 12px}
.compose{display:flex;flex-direction:column;gap:8px;max-width:720px}
.compose .btn{align-self:flex-end}
.handled{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;background:var(--needs-bg);color:var(--needs);border-radius:var(--rs);padding:4px 4px 4px 12px;margin:0 0 10px;font-size:14px}
.person{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 16px}
.person>div{min-width:0}
.person .av,.people .av{width:44px;height:44px;border-radius:var(--pill);background:#0A0B0C;color:#C9CFD7;display:grid;place-items:center;font-family:var(--disp);font-size:20px;font-weight:600}
.person small{color:var(--mute2);font-size:12px} .person b{display:block;font-size:16px} .person p{margin:2px 0 0;color:var(--mute);font-size:14px;overflow-wrap:anywhere}
.person .pacts{grid-column:1 / -1}
@media (min-width:560px){.person{grid-template-columns:44px 1fr auto}.person .pacts{grid-column:auto}}

/* ---------- feed, threads, lists */
.feed{list-style:none;margin:0;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.feed li a{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line2);text-decoration:none;color:var(--text);transition:background .1s}
.feed li a:active{background:var(--sunk)}
.feed li:last-child a{border-bottom:0}
.feed .i{color:var(--steel);margin-top:2px}
.feed .k-hold .i,.feed .k-request .i{color:var(--hold)}
.feed b{display:block;font-size:14px;font-weight:600}
.feed i{font-style:normal;color:var(--mute2);font-size:12px;margin-right:6px}
.feed small{color:var(--mute);font-size:14px}
.feed time{color:var(--mute2);font-size:12px;white-space:nowrap}
@media (max-width:300px){.feed li a{grid-template-columns:20px 1fr}.feed time{grid-column:2}}
.threads{list-style:none;margin:0;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.threads a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:12px 14px;border-bottom:1px solid var(--line2);text-decoration:none;color:var(--text)}
.threads a:active{background:var(--sunk)}
.threads li:last-child a{border-bottom:0}
.threads span{color:var(--mute);font-size:14px;grid-column:1} .threads small{color:var(--text2);font-size:14px;grid-column:1}
.threads time{grid-column:2;grid-row:1;color:var(--mute2);font-size:12px} .threads .badge{grid-column:2;grid-row:2;justify-self:end}
.menu{list-style:none;margin:0 0 20px;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.menu a{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line2);text-decoration:none;color:var(--text);min-height:56px}
.menu a:active{background:var(--sunk)}
.menu li:last-child a{border-bottom:0}
.menu .i{color:var(--steel)} .menu b{display:block;font-size:16px} .menu small{display:block;color:var(--mute);font-size:14px;overflow-wrap:anywhere}
.menu a>span{min-width:0}
.people{list-style:none;margin:0 0 16px;padding:0}
.people li{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line2)}
.people li.off{opacity:.55}
.people b{display:block} .people span{display:block;color:var(--mute);font-size:14px;overflow-wrap:anywhere} .people small{color:var(--mute2);font-size:12px}
.people form{margin:0}
@media (max-width:420px){.people li{grid-template-columns:44px 1fr}.people li>form{grid-column:2}}
.keys{list-style:none;margin:0 0 12px;padding:0}
.keys li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;padding:10px 0;border-bottom:1px solid var(--line2)}
.keys span{color:var(--mute);font-size:14px;grid-column:1}
.keys form{grid-row:1 / span 2;grid-column:2;align-self:center}
.signout{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:10px 0}
.help p{color:var(--text2)}
.empty{background:var(--paper);border:1px dashed var(--field);border-radius:var(--r);padding:24px 20px;text-align:center}
.empty h3{font-size:20px;margin:0 0 6px} .empty p{color:var(--mute);max-width:440px;margin:0 auto 12px}
.pager{display:flex;gap:14px;align-items:center;justify-content:center;margin:16px 0;font-size:14px;color:var(--mute)}
.pager a{min-height:44px;display:inline-flex;align-items:center}
.offer{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;background:#0A0B0C;color:#E9ECF0;border:1px solid #2A3038;border-radius:var(--r);padding:14px 16px;margin:0 0 16px}
.offer b{color:#fff} .offer p{margin:2px 0 0;color:#B7C0CA;font-size:14px} .offer .hint{color:#B7C0CA}
.offer .btn{background:#fff;color:#0A0B0C;border-color:#fff}
.offer-acts{grid-column:1 / -1}
@media (min-width:640px){.offer{grid-template-columns:30px 1fr auto}.offer-acts{grid-column:auto}}
.undo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--ok-bg);color:var(--ok);border-radius:var(--r);padding:8px 8px 8px 14px;margin:0 0 14px;font-size:14px}
.undo span{flex:1 1 200px} .undo form{margin:0}

/* ---------- staff */
.todo{list-style:none;margin:0;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.todo a{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line2);text-decoration:none;color:var(--text)}
.todo a:active{background:var(--sunk)}
.todo li:last-child a{border-bottom:0}
.todo b{display:block;font-size:14px} .todo small{color:var(--mute);font-size:14px} .todo time{color:var(--mute2);font-size:12px;white-space:nowrap}
.todo .p1 .i,.todo .p3 .i{color:var(--hold)} .todo .i{color:var(--steel);margin-top:2px}
.lanes{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
@media (min-width:1200px){.lanes{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}}
.lane h3{font-family:var(--disp);font-size:20px;font-weight:600;margin:0 0 8px;display:flex;gap:6px;align-items:baseline}
.lane h3 em{font-family:var(--body);font-style:normal;font-size:12px;color:var(--mute2)}
.lcard{display:flex;flex-direction:column;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin:0 0 8px;text-decoration:none;color:var(--text);transition:transform .1s ease}
.lcard:active{transform:scale(.99)}
.lc-top{display:flex;justify-content:space-between;align-items:center;font-size:14px} .lc-top .i{color:var(--mute2)}
.lc-co{font-size:12px;color:var(--mute)} .lc-d{font-size:14px;font-weight:500;line-height:1.3}
.lc-b{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:space-between;align-items:center;margin-top:4px}
.lc-b time{font-family:var(--disp);font-size:20px;white-space:nowrap;margin-left:auto}
.staffhead{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin:0 0 16px}
.staffhead h1{font-size:32px;margin:0 0 10px;overflow-wrap:anywhere}
fieldset.stagebar{border:0;margin:0;padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:6px}
fieldset.stagebar legend{padding:0;margin:0 0 8px;font-size:14px}
.stg{position:relative;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);border-radius:var(--pill);padding:9px 14px;font:500 14px var(--body);color:var(--text2);cursor:pointer;min-height:44px;margin:0;transition:transform .1s ease}
.stg:active{transform:scale(.97)}
.stg input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.stg small{color:var(--mute2);font-size:12px}
.stg.done{background:var(--done-bg);border-color:var(--done-bg);color:var(--text)}
.stg.cur{border-color:var(--moving)}
.stg:has(input:checked){background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.stg:has(input:checked) small{color:inherit}
@media (hover:hover){.stg:hover{border-color:var(--text)}}
.stagex{display:grid;gap:10px;width:100%}
@media (min-width:640px){.stagex{grid-template-columns:200px 1fr}}
.log{list-style:none;margin:12px 0 0;padding:0;font-size:14px;color:var(--mute)}
.log li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--line2)}
.grid{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14px}
.grid th{text-align:left;font-size:12px;color:var(--mute);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--sunk)}
.grid td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
.grid td small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.grid td .chip+small{margin-top:4px}
.grid a{text-decoration:none;color:var(--text)}
@media (max-width:720px){.grid thead{display:none}.grid tr{display:grid;grid-template-columns:1fr 1fr;padding:8px 0;border-bottom:1px solid var(--line2)}.grid td{border:0;padding:4px 12px;min-width:0}.grid td:first-child,.grid td:nth-child(3){grid-column:1 / -1}}
.edit{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.edit th{text-align:left;font-size:12px;color:var(--mute);font-weight:600;padding:0 4px 6px}
.edit th:nth-child(1){width:34%}.edit th:nth-child(2){width:27%}.edit th:nth-child(3){width:17%}.edit th:nth-child(4){width:14%}.edit th:nth-child(5){width:8%}
.edit td{padding:3px 4px}
.edit input,.edit select{min-height:44px;padding:8px;font-size:16px;min-width:0}
.edit td:nth-child(5){text-align:center}
@media (max-width:640px){.edit{table-layout:auto}.edit thead{display:none}.edit tr{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px 0;border-bottom:1px solid var(--line2)}.edit td{min-width:0}.edit td:first-child{grid-column:1 / -1}}
.quotes{list-style:none;margin:0;padding:0}
.quotes li{display:grid;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 10px}
@media (min-width:720px){.quotes li{grid-template-columns:1fr 230px}}
.quotes b{display:block} .quotes span{display:block;color:var(--text2);font-size:14px} .quotes small{display:block;color:var(--mute);font-size:12px;margin-top:4px} .quotes p{margin:6px 0 0;font-size:14px}
.quotes form{display:flex;gap:6px;align-items:center}

/* ---------- sign-in pages */
body.plain{background:#0A0B0C;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}
.plainbox{width:100%;max-width:440px;background:var(--paper);border-radius:var(--r);padding:24px;margin:0}
.plainbox .brand{display:inline-block;background:#0A0B0C;border-radius:var(--rs);padding:6px 10px;margin:0 0 16px}
.plainbox h1{font-size:32px;margin:0 0 10px}
.lead{color:var(--text2);font-size:16px;margin:0 0 16px}
.or{display:flex;align-items:center;gap:10px;color:var(--mute2);font-size:14px;margin:16px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.err{color:var(--hold);font-size:14px;margin:8px 0 0}
.split{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border-top:1px solid var(--line2);margin-top:16px;padding-top:16px}
.split p{margin:0;color:var(--mute);font-size:14px;flex:1 1 200px}
.plainfoot{color:#8B96A3;font-size:12px;margin-top:16px;text-align:center}
.tick input{flex:none;margin:0}

/* ---------- phones and tablets: reading text 16px, captions 14px (the rail layout from 960px keeps the denser desktop sizes) */
@media (max-width:959px){
  .reqs p,.reqs span,.sline,.feed b,.feed small,.thread .bubble,.journey time,.journey p,.check li,.docs b,.money,.note,.threads span,.threads small,.menu small,.switch span small,.hint,.kicker,.fine,.bigdate .fine,.bigdate span,.person p,.tick,.qtot span,.qduty span{font-size:16px}
  .eta small,.docs span,.check li span,.feed i,.feed time,.threads time,.thread small,.upd,.facts dt,.ref small,.person small,.money td small,.code,.sref i,.lc-co{font-size:14px}
  .chip{font-size:13px}
}
@media (max-width:300px){.money tr{display:grid}.money .num{text-align:left;padding-left:0}.check li span{grid-column:2}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Quotes (Rapple Logistics OS, v2.1): the list, one quote, the answer. Client prices only, excl. VAT. */
.qrows{margin:0 0 8px}
.qrow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;text-decoration:none;color:var(--text);min-height:72px}
@media (hover:hover){.qrow:hover{border-color:var(--field)}}
.qi{width:40px;height:40px;border-radius:var(--rs);background:var(--sunk);display:grid;place-items:center;color:var(--steel)}
.qmain{min-width:0;display:flex;flex-direction:column;gap:2px}
.qtop{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.qtop b{font-size:14px;letter-spacing:.02em}
.qwhat{font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qsub{color:var(--mute);font-size:14px}
.qamt{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.qamt small{color:var(--mute2);font-size:12px}
.qamt strong{font:600 22px/1.1 var(--disp);white-space:nowrap}
.qdate{color:var(--mute);font-size:14px}
.qhero{display:grid;gap:10px;margin:0 0 12px}
.qtot,.qduty{border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:2px}
.qtot{background:var(--ink);color:#fff}
.qtot small{color:#AFC4DA;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.qtot strong{font:600 40px/1.05 var(--disp)}
.qtot span{color:#C9CFD7;font-size:14px}
.qduty{background:var(--paper);border:1px solid var(--line)}
.qduty small{color:var(--mute2);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.qduty strong{font:600 26px/1.1 var(--disp)}
.qduty span{color:var(--mute);font-size:14px}
.qdecide{background:var(--paper);border:1px solid var(--needs-edge);border-radius:var(--r);padding:14px 16px;margin:0 0 16px}
.qaccept .tick{margin:0 0 12px;align-items:flex-start;font-size:16px;color:var(--text)}
.qaccept .tick input{width:22px;height:22px;flex:none;margin:1px 0 0}
.qdecline{margin:12px 0 0;border-top:1px solid var(--line2);padding-top:6px}
.qdecline summary{cursor:pointer;color:var(--link);font-size:14px;font-weight:600;min-height:44px;display:flex;align-items:center;list-style:none}
.qdecline summary::-webkit-details-marker{display:none}
.qdecline textarea{width:100%}
.qans{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 16px}
.qans>.i{flex:none;margin-top:2px;color:var(--steel)}
.qans b{display:block;font-size:16px}
.qans p{margin:4px 0 8px;color:var(--mute);font-size:14px}
.qans.ok{background:var(--ok-bg);border-color:transparent}
.qans.ok>.i,.qans.ok b{color:var(--ok)}
.qans.wait{background:var(--needs-panel);border-color:var(--needs-edge)}
.qfacts{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:0}
.qfacts div{min-width:0}
.qfacts dt{color:var(--mute2);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.qfacts dd{margin:2px 0 0;font-weight:600;font-size:14px;overflow-wrap:anywhere}
.qlines{list-style:none;margin:0;padding:0}
.qlines li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2)}
.qlines li span{min-width:0;display:flex;flex-direction:column}
.qlines li b{font-weight:600;font-size:14px}
.qlines li small{color:var(--mute);font-size:12px}
.qlines li strong{font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap}
.qlines li.sum{border-bottom:0;border-top:2px solid var(--text);margin-top:2px}
.qlines li.sum strong{font:600 22px/1.1 var(--disp)}
.qnudge{display:flex;gap:12px;align-items:center;background:var(--needs-panel);border:1px solid var(--needs-edge);border-radius:var(--r);padding:14px 16px;margin:0 0 16px;text-decoration:none;color:var(--text)}
.qnudge>.i{color:var(--needs);flex:none}
.qnudge span{min-width:0;flex:1;display:flex;flex-direction:column}
.qnudge b{font-size:16px}
.qnudge small{color:var(--mute);font-size:14px}
.qnudge .go{flex:none;font-weight:600;font-size:14px;color:var(--link)}
/* phones: reading text on the quote screens at 16px, like the rest of the portal */
@media (max-width:959px){.qtot span,.qduty span,.qans p,.qnudge small{font-size:16px}}
@media (min-width:760px){
  .qhero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .qfacts{grid-template-columns:repeat(3,1fr)}
  .qdecide{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:8px 20px;align-items:start}
  .qdecide .qaccept{display:contents}
  .qdecide .qaccept .tick{grid-column:1;margin:10px 0 0}
  .qdecide .qaccept .btn{grid-column:2;grid-row:1}
  .qdecline{grid-column:1/-1}
}
@media (max-width:420px){
  .qrow{grid-template-columns:minmax(0,1fr) auto;padding:12px 14px}
  .qrow .qi{display:none}
  .qamt strong{font-size:20px}
}
@media (min-width:1100px){
  .qcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0 28px;align-items:start}
  .qcols .qfacts{grid-template-columns:1fr 1fr}
}

/* "by SilverLion" with the lion, at the foot of every portal page and the sign-in pages */
.mainfoot{display:flex;justify-content:center;margin:32px 0 0}
.bysl{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--mute2);font-size:12px;text-decoration:none}
.bysl img{width:18px;height:18px;border-radius:4px}
.bysl.dark{color:#8B96A3;margin-top:8px}
@media (hover:hover){.bysl:hover{color:var(--text)}.bysl.dark:hover{color:#fff}}

/* ---------- house look, component layer (v2.4, 26 Sept 2026): Marcellus only for page titles and the greeting (it has
   one weight); dates, amounts and counts in Figtree bold with even figures; controls on 8px corners, panels on 12px. */
h1{font-weight:400}
.eta strong{font:700 22px/1 var(--body);letter-spacing:-.2px}
.bigdate strong{font:700 36px/1 var(--body);letter-spacing:-.5px}
.lane h3{font:700 16px/1.2 var(--body)}
.lc-b time{font:700 16px var(--body)}
.qamt strong{font:700 20px/1.1 var(--body)}
.qtot strong{font:700 36px/1.05 var(--body);letter-spacing:-.5px}
.qduty strong{font:700 24px/1.1 var(--body)}
.qlines li.sum strong{font:700 20px/1.1 var(--body)}
.person .av,.people .av{background:var(--top);color:var(--top-text);font:700 15px var(--body)}
.btn,input,select,textarea,.file,.copy,.flash,.previewbar,.note,.glyph,.undo{border-radius:var(--rs)}
.card,.srow,.shead,.sgrid .block,.docs.wide,.feed,.threads,.menu,.empty,.person,.todo,.lcard,.staffhead,.grid,.quotes li,.qrow,.qtot,.qduty,.qdecide,.qans,.qnudge,.needs,details.send{border-radius:var(--r);box-shadow:var(--shadow)}
.offer{background:var(--top);border-color:#22324A}
.offer .btn{color:var(--top)}
body.plain{background:var(--top)}
.plainbox .brand{background:var(--top)}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:0}
/* headings that carry numbers ("1 x 40ft", "2 things need you") use Figtree: Marcellus draws 1 like I and 0 like O */
.shead h1,.hello h1,h1.hnum{font:700 30px/1.15 var(--body);letter-spacing:-.4px}
@media (min-width:960px){.shead h1,.hello h1,h1.hnum{font-size:34px}}
@media (max-width:300px){.shead h1,.hello h1,h1.hnum{font-size:24px;hyphens:auto}.shead,.shead .needs.inhead,.needs{padding:12px}}
.mainfoot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;color:var(--mute2);font-size:14px}
.mainfoot .fco{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.mainfoot a{min-height:44px;display:inline-flex;align-items:center}
.mainfoot .ftel{color:var(--text2);font-weight:600;text-decoration:none}
.mainfoot .bysl{font-size:14px}
/* references (order numbers, our refs, quote numbers) read the same everywhere: IBM Plex Mono */
.sref b,.sref span,.feed i,.threads b,.qtop b,.dship{font-family:var(--mono);font-weight:500;letter-spacing:0}
input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible,a:focus-visible{outline:2px solid var(--steel);outline-offset:2px}
.ptop a:focus-visible{outline-color:var(--accent)}

/* ---------- money on the portal (v2.5, 26 Sept 2026): what to pay and how, invoices, the statement, quote groups */
.qgroup{font:600 12px/1.3 var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--steel);margin:16px 0 4px}
.paybox{display:grid;gap:12px;margin:12px 0 0;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--rs)}
.payamt small{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--mute2)}
.payamt strong{display:block;font:700 26px/1.1 var(--body);font-variant-numeric:tabular-nums;color:var(--text)}
.payamt span{display:block;font-size:14px;color:var(--mute)}
.paybank{display:grid;grid-template-columns:1fr;gap:8px;margin:0}
.paybank div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px;align-items:center}
.paybank dt{font-size:14px;color:var(--mute)}
.paybank dd{margin:0;font-weight:600;min-width:0}
.invlist{list-style:none;margin:0;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.invlist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line2)}
.invlist li:first-child{border-top:0}
.invlist small{display:block;font-size:14px;color:var(--mute)}
.invlist .num{text-align:right}
.invlist .num strong{font:700 16px var(--body);font-variant-numeric:tabular-nums}
.invlist li>.chip{justify-self:start}
@media (min-width:760px){.invlist.wide li{grid-template-columns:minmax(0,1fr) 160px 120px auto}.invlist li>.chip{justify-self:end}}
.stmthero{display:grid;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 16px;box-shadow:var(--shadow)}
.stmthero small{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--mute2)}
.stmthero strong{display:block;font:700 32px/1.1 var(--body);font-variant-numeric:tabular-nums}
.stmthero dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:0}
.stmthero dt{font-size:14px;color:var(--mute)}
.stmthero dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.stmthero .late dd{color:var(--hold)}
@media (min-width:760px){.stmthero{grid-template-columns:240px 1fr;align-items:center}.stmthero dl{grid-template-columns:repeat(4,1fr)}}
.packlink{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0}
@media (max-width:959px){.paybank dt,.invlist small,.stmthero dt,.payamt span{font-size:16px}}
.vatblock{margin-top:32px}.vatblock h2{margin:0 0 8px}
/* free time at the port (storage and demurrage clocks) */
.clocks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.clocks li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 12px;align-items:start}
.clocks li>.chip{justify-self:start}
.clocks li p{margin:2px 0 0;color:var(--text2)}