:root{--red:#e30613;--ink:#101011;--paper:#f5f4f2;--line:#deddda;--muted:#777776;--mono:"DM Mono",monospace;--display:"Space Grotesk",sans-serif;--body:"Manrope",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#eef0ef;color:var(--ink);font-family:var(--body);font-size:13px}button,input{font:inherit}.staff-login[hidden],.app-shell[hidden]{display:none}.staff-login{min-height:100vh;background:var(--ink);color:#fff;display:grid;place-items:center;position:relative;overflow:hidden}.login-noise{position:absolute;inset:0;opacity:.55;background:radial-gradient(ellipse at 18% 12%,rgba(227,6,19,.28),transparent 31%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,55px 55px}.login-brand,.app-brand{position:absolute;top:31px;left:38px;display:flex;align-items:center;gap:10px;color:#fff;z-index:1;text-decoration:none;line-height:.85;font-family:var(--display);letter-spacing:.08em}.login-brand b,.app-brand b{font-size:16px}.login-brand small,.app-brand small{display:block;font:7px var(--mono);letter-spacing:.32em;margin-top:5px}.brand-box{display:grid;place-items:center;width:33px;height:35px;color:#fff;flex:0 0 auto}.brand-box svg{width:100%;height:100%;display:block;overflow:visible}.brand-box img{width:100%;height:100%;display:block;object-fit:contain;background:none}.security-pill{position:absolute;right:38px;top:34px;z-index:1;font:9px var(--mono);letter-spacing:.08em;color:#aaa;border:1px solid #3d3d3f;padding:8px 10px}.security-pill span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3abb69;margin:0 6px 1px 0}.login-card{position:relative;z-index:1;width:390px;max-width:calc(100% - 40px);padding:38px;background:#f6f5f2;color:var(--ink);box-shadow:0 35px 90px #000}.eyebrow,.section-label{font:9px var(--mono);letter-spacing:.09em;color:#777;margin:0}.login-card .eyebrow{color:var(--red)}.login-card h1{font:500 55px/.9 var(--display);letter-spacing:-.075em;margin:19px 0}.login-copy{font-size:12px;color:#626262;line-height:1.75;max-width:280px;margin-bottom:28px}.login-card label{display:block;font:9px var(--mono);letter-spacing:.08em;margin:18px 0}.login-card input{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid #c8c7c3;padding:10px 0;color:var(--ink);outline-color:var(--red);font:13px var(--body)}.sign-in{border:0;width:100%;background:var(--red);color:#fff;padding:15px;margin-top:7px;font:700 12px var(--display);display:flex;justify-content:space-between;transition:.2s}.sign-in:hover,.new-shipment:hover{background:#bb000d}.login-error{font:10px var(--mono);color:var(--red);margin:11px 0 0;min-height:13px;letter-spacing:.03em;line-height:1.5;text-align:center}.login-checks{border-top:1px solid #deddd8;margin-top:16px;padding-top:15px;display:grid;gap:9px}.login-checks div{display:flex;gap:8px;align-items:center;font:8px var(--mono);color:#777}.login-checks i{font-style:normal;color:#269b57;font-size:11px}.login-checks b{color:#333;font-weight:500}.login-footer{position:absolute;z-index:1;left:38px;bottom:28px;font:8px var(--mono);letter-spacing:.07em;color:#747474}.login-footer a{color:#fff;text-decoration:none}.app-shell{display:grid;grid-template-columns:227px 1fr;min-height:100vh}.sidebar{background:var(--ink);color:#fff;min-height:100vh;padding:26px 13px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.app-brand{position:static;margin-left:9px}.workspace-tag{margin:42px 10px 14px;font:8px var(--mono);letter-spacing:.06em;color:#777}.workspace-tag b{display:block;color:#e2e2e2;font-size:10px;margin-top:7px;font-weight:400}.workspace-tag span{float:right;color:#aaa;font-size:14px;margin-top:-10px}.app-nav{border-top:1px solid #2e2e2f;padding-top:12px;display:grid;gap:4px}.app-nav a,.sidebar-bottom>a{color:#949497;text-decoration:none;padding:10px 10px;display:flex;gap:12px;align-items:center;border-radius:2px;font-size:11px;font-weight:600}.app-nav a i,.sidebar-bottom>a i{font-style:normal;width:14px;font-size:15px;text-align:center}.app-nav a b{margin-left:auto;background:var(--red);color:#fff;font:8px var(--mono);padding:3px 5px}.app-nav a,.sidebar-bottom>a{transition:background .18s ease,color .18s ease}.app-nav a:hover,.sidebar-bottom>a:hover{background:#1e1e20;color:#e6e6e6}.app-nav a.active{background:#2c2c2f;color:#fff;box-shadow:inset 3px 0 var(--red)}.app-nav a.active:hover{background:#343438}.sidebar-bottom{margin-top:auto}.sidebar-bottom>a{border-top:1px solid #2e2e2f;border-radius:0;padding-top:16px}.sidebar-bottom button{background:transparent;border:0;color:#888;padding:11px 10px;font-size:11px;cursor:pointer}.user-mini{padding:15px 9px 0;margin-top:3px;border-top:1px solid #2e2e2f;display:flex;align-items:center;gap:8px}.user-mini>span,.avatar{width:29px;height:29px;border-radius:50%;background:var(--red);display:grid;place-items:center;font:9px var(--mono);color:#fff}.user-mini b{display:block;font-size:10px}.user-mini small{display:block;color:#888;font:8px var(--mono);margin-top:3px}.user-mini>i{font-style:normal;margin-left:auto;color:#777}.workspace{padding:40px clamp(22px,4.2vw,60px) 60px;overflow:hidden}.app-header{display:flex;align-items:start;justify-content:space-between;margin-bottom:33px}.system-live{font:9px var(--mono);letter-spacing:.08em;color:#747474;margin:0 0 10px}.system-live span,.section-label span{display:inline-block;width:6px;height:6px;background:#32a766;border-radius:50%;margin:0 6px 1px 0}.app-header h1{font:500 clamp(31px,3vw,43px)/1 var(--display);letter-spacing:-.065em;margin:0}.header-sub{margin:10px 0 0;color:#757575;font-size:11px}.header-tools{display:flex;gap:8px;align-items:center}.icon-button,.notification{width:35px;height:35px;background:#fff;border:1px solid var(--line);font-size:19px}.notification{position:relative}.notification span{position:absolute;right:-4px;top:-5px;background:var(--red);color:#fff;border-radius:50%;font:8px var(--mono);width:15px;height:15px;padding-top:3px}.new-shipment{border:0;background:var(--red);color:#fff;padding:11px 14px;font:700 11px var(--display);transition:.2s}.overview-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:18px}.kpi-grid{grid-column:span 2;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpi-grid article,.attention-card,.live-map,.shipment-table,.activity-card,.route-card{background:#fff;border:1px solid #e1e1df}.kpi-grid article{padding:18px;min-height:135px;position:relative;overflow:hidden}.kpi-grid p{font:8px var(--mono);letter-spacing:.08em;color:#777;margin:0}.kpi-grid article>b{font:500 28px var(--display);letter-spacing:-.07em;display:block;margin:12px 0 7px}.kpi-grid article>span{font:9px var(--mono);position:relative;z-index:1}.kpi-grid .up{color:#218c4a}.kpi-grid .down{color:var(--red)}.kpi-grid span i{color:#999;font-style:normal}.red-text{color:var(--red)!important}.spark,.bars,.alert-lines{position:absolute;bottom:16px;right:16px;display:flex;align-items:end;gap:3px;height:35px}.spark i{height:var(--h);width:5px;background:#dededc;display:block}.spark i:nth-child(1){height:10px}.spark i:nth-child(2){height:17px}.spark i:nth-child(3){height:13px}.spark i:nth-child(4){height:26px;background:var(--red)}.spark i:nth-child(5){height:19px}.spark i:nth-child(6){height:29px;background:var(--red)}.spark i:nth-child(7){height:35px;background:var(--red)}.ring{position:absolute;right:14px;bottom:10px;width:49px}.ring svg{width:100%;transform:rotate(-90deg)}.ring path{fill:none;stroke-width:3}.ring-bg{stroke:#e4e4e2}.ring-value{stroke:#28a360}.alert-lines{flex-direction:column;align-items:start;gap:5px}.alert-lines i{display:block;background:#e3e2df;height:3px;width:33px}.alert-lines i:nth-child(1),.alert-lines i:nth-child(3){background:var(--red);width:46px}.bars i{display:block;width:6px;background:#e1e1df}.bars i:nth-child(1){height:10px}.bars i:nth-child(2){height:20px}.bars i:nth-child(3){height:15px}.bars i:nth-child(4){height:31px;background:var(--red)}.bars i:nth-child(5){height:25px}.bars i:nth-child(6){height:35px;background:var(--red)}.attention-card header,.live-map header,.shipment-table header,.activity-card header,.route-card header{display:flex;align-items:center;justify-content:space-between;padding:20px 21px;border-bottom:1px solid #e3e2df}.section-label{font-size:8px}.section-label span{background:var(--red);width:16px;height:2px;border-radius:0;vertical-align:middle}.attention-card h2,.live-map h2,.shipment-table h2,.route-card h2{font:500 20px var(--display);letter-spacing:-.05em;margin:8px 0 0}.attention-card h2 b{color:var(--red);font:500 12px var(--mono);margin-left:4px}.attention-card header>a{font:10px var(--mono);color:#555;text-decoration:none}.attention-list{padding:0 20px}.attention-row{width:100%;padding:14px 0;border:0;border-bottom:1px solid #e7e6e4;background:transparent;display:grid;grid-template-columns:29px 1fr 46px 12px;gap:9px;align-items:center;text-align:left;cursor:pointer}.attention-row:last-child{border:0}.attention-icon{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;font:700 11px var(--mono)}.attention-icon.delay{background:#fde5e6;color:var(--red)}.attention-icon.docs{background:#fff2d8;color:#bf7100}.attention-icon.custom{background:#e6efff;color:#3671ce}.attention-row b{font:600 10px var(--mono)}.attention-row p{font-size:10px;color:#777;margin:4px 0 0}.attention-row time{font:8px var(--mono);color:#999}.attention-row>i{font-style:normal;color:#777}.live-map{min-height:385px}.live-map header{padding-bottom:16px}.live-map h2 small{font:8px var(--mono);color:#999;margin-left:7px}/* Keyboard focus, in brand red rather than the browser's default blue ring. */
.staff-login :focus-visible,.app-shell :focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}
/* Row hover feedback — these are clickable but previously gave none. */
.attention-row,tbody tr{transition:background .18s ease}
.attention-row:hover{background:#faf9f8}
tbody tr:hover{background:#faf9f8}.ops-map{height:305px;position:relative;overflow:hidden;background:#121213;color:#fff}.map-detail{position:absolute;right:13px;bottom:13px;background:#f5f4f2;color:var(--ink);padding:12px;width:190px}.map-detail span{font:7px var(--mono);letter-spacing:.07em;color:#777}.map-detail b{font:600 18px var(--display);letter-spacing:-.05em;display:block;margin:5px 0}.map-detail p{font:8px var(--mono);margin:0;color:#289952}.map-detail p i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#289952;margin:0 4px 1px 0}.map-detail button{font:8px var(--mono);border:0;background:transparent;padding:0;margin-top:8px;border-bottom:1px solid var(--ink)}.shipment-table{grid-row:span 2}.table-actions,.activity-card header button,.route-card header button{display:flex;gap:7px}.table-actions button,.activity-card header button,.route-card header button{border:1px solid var(--line);background:#fff;font:8px var(--mono);padding:7px 9px;color:#555}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:635px}th{text-align:left;padding:13px 19px;font:8px var(--mono);letter-spacing:.08em;color:#777;background:#f7f7f6;font-weight:400}td{padding:13px 19px;border-top:1px solid #e8e7e4;font-size:10px;white-space:nowrap}td>b{font:500 10px var(--mono)}td small{display:block;font:8px var(--mono);color:#888;margin-top:4px}td i{font-style:normal;color:#999;margin:0 2px}.mode{font:9px var(--mono)}.mode.ocean{color:#426eaf}.table-status{font:9px var(--mono)}.table-status.moving{color:#259954}.table-status.delayed{color:var(--red)}.table-status.docs{color:#b67300}.table-status.customs{color:#3975cb}.more{border:0;background:transparent;color:#777;font-weight:bold}.view-shipments{padding:15px 20px;display:block;border-top:1px solid #e8e7e4;font:9px var(--mono);text-decoration:none;color:#222}.view-shipments span{float:right;font-size:15px}.activity-card,.route-card{align-self:start}.activity-card header,.route-card header{padding:16px 19px}.activity{padding:3px 19px 12px}.activity>div{display:flex;gap:9px;padding:13px 0;border-bottom:1px solid #e8e7e4}.activity>div:last-child{border:0}.activity p{font-size:10px;line-height:1.45;margin:0;color:#555}.activity p b{color:#111}.activity small{display:block;font:8px var(--mono);color:#999;margin-top:4px}.avatar{width:24px;height:24px;flex:0 0 auto;font-size:7px}.avatar.black{background:#333}.avatar.light{background:#e5e3df;color:#444}.route-card h2{padding:0 19px;margin:17px 0}.route-list{padding:0 19px 21px;display:grid;gap:17px}.route-list div{display:grid;grid-template-columns:1fr auto;gap:7px;font:9px var(--mono)}.route-list b{font-weight:400}.route-list small{color:#888}.route-list span{grid-column:span 2;height:5px;background:#e4e4e1;display:block}.route-list span i{display:block;background:var(--red);height:100%}.shipment-drawer{display:none;position:fixed;inset:0;z-index:20}.shipment-drawer.open{display:block}.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.38)}.shipment-drawer article{position:absolute;right:0;top:0;height:100%;width:min(420px,100%);background:#f5f4f2;padding:39px 31px;box-shadow:-16px 0 40px rgba(0,0,0,.18);animation:drawer .28s both}@keyframes drawer{from{transform:translateX(100%)}to{transform:none}}.drawer-close{position:absolute;right:18px;top:12px;background:transparent;border:0;font-size:28px}.shipment-drawer .eyebrow{color:var(--red)}.shipment-drawer h2{font:500 36px var(--display);letter-spacing:-.06em;margin:14px 0 6px}.drawer-status{font:9px var(--mono);color:var(--red)}.drawer-route{margin:32px 0;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.drawer-route b{font:500 16px var(--display);display:block}.drawer-route small{font:8px var(--mono);color:#777;margin-top:4px}.drawer-route i{font-style:normal;color:var(--red)}.drawer-note{background:#fff;padding:16px}.drawer-note span{font:8px var(--mono);letter-spacing:.07em;color:#777}.drawer-note p{font-size:11px;line-height:1.7;margin:10px 0 0}.resolve{position:absolute;bottom:31px;left:31px;right:31px;background:var(--ink);color:#fff;border:0;padding:15px;font:700 11px var(--display);display:flex;justify-content:space-between}.toast{position:fixed;z-index:50;bottom:20px;right:20px;background:var(--ink);color:#fff;padding:13px 17px;font-size:11px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:none}@media(max-width:1030px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.overview-grid{grid-template-columns:1fr}.kpi-grid{grid-column:auto}.shipment-table{grid-row:auto}.live-map{min-height:350px}}@media(max-width:720px){.app-shell{display:block}.sidebar{position:relative;height:auto;min-height:auto;padding:15px 15px}.app-brand{margin:0}.workspace-tag{display:none}.app-nav{border:0;margin-top:17px;padding:0;display:flex;overflow-x:auto;gap:3px}.app-nav a{white-space:nowrap;padding:0 11px;font-size:10px;min-height:44px;display:inline-flex;align-items:center}.app-nav a i,.app-nav a b{display:none}.sidebar{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:13px}.app-brand{grid-column:1;grid-row:1}.sidebar-bottom{grid-column:2;grid-row:1;display:flex;align-items:center;gap:2px;margin:0;padding:0;border-top:0}.sidebar-bottom>a,.sidebar-bottom button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 6px;border-top:0;border-radius:2px}.sidebar-bottom>a i{display:block;width:auto;font-size:0}.sidebar-bottom>a i svg,.sidebar-bottom button svg{width:15px;height:15px}.sidebar-bottom>a,.sidebar-bottom button{font-size:0}.user-mini{margin-left:4px;border:0;padding:0}.user-mini>div,.user-mini>i{display:none}.user-mini>span{width:32px;height:32px;font-size:9px}.app-nav{grid-column:1/-1;grid-row:2}.workspace{padding:27px 15px}.app-header{display:block}.header-tools{margin-top:20px}.header-tools .icon-button{margin-left:auto}.new-shipment{padding:11px}.kpi-grid{grid-template-columns:1fr 1fr}.kpi-grid article{min-height:122px}.attention-card header,.live-map header,.shipment-table header{padding:17px 15px}.attention-list{padding:0 15px}.attention-row{grid-template-columns:27px 1fr 12px}.attention-row time{display:none}.map-detail{width:168px}.login-brand{left:20px;top:20px}.security-pill{right:20px;top:23px;font-size:7px}.login-footer{left:20px;bottom:20px}.login-card{margin-top:35px}.login-card input{padding:13px 0}.sign-in{padding:17px 15px}.staff-login .login-footer a,.login-checks a{display:inline-flex;align-items:center;min-height:44px}.ops-map{height:290px}}@media(max-width:390px){.kpi-grid{grid-template-columns:1fr}.login-card{padding:29px 25px}.login-card h1{font-size:47px}.security-pill{display:none}}

/* --- Showing a password -------------------------------------------------------
   Built by revealPasswords() in app-ui.js, which wraps every password field in
   both the client portal and the staff dashboard. This file is loaded by both,
   so the control is described once.

   The wrapper is what the fields already were -- a block the width of the label
   -- so nothing above it has to change; only the button is new. */

.password-field {
  display: block;
  position: relative;
}

/* Room for the button, so a long password does not run underneath it. */
.password-field input {
  padding-right: 38px !important;
}

.password-reveal {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a8a88;
  cursor: pointer;
  transition: color .18s ease;
}

.password-reveal svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.password-reveal:hover { color: var(--red); }

.password-reveal:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.dark .password-reveal { color: #9a9a98; }
.dark .password-reveal:hover { color: #ff6066; }

/* A fingertip wants more than the icon. The button stays 32px; what grows is
   the area that answers to a tap. */
@media (max-width: 720px) {
  .password-reveal::before {
    content: '';
    position: absolute;
    inset: -6px -8px;
  }

  /* The same for the brand (35px tall) and the language button (33x28) on
     the sign-in screens. The language button sits 16px below the theme
     switch's own tap area (language.css), so 8px up still leaves 8px clear. */
  .login-brand::after {
    content: '';
    position: absolute;
    inset: -5px 0;
  }
  .lang-picker.on-login > summary::before {
    content: '';
    position: absolute;
    inset: -8px -6px;
  }
}

/* --- The assurance lines under the sign-in ------------------------------------
   The link in each row needs a fingertip's worth of tap area on a phone, and
   giving it min-height: 44px made the row 44px tall. The tick beside it is
   aligned to the top of the row on purpose -- a wrapped line in French should
   hang below its tick, not float beside the middle of it -- so a tall link left
   the tick stranded above the words.

   The tap area grows without the line growing with it. */

@media (max-width: 720px) {
  .login-checks a {
    display: inline;
    min-height: 0;
    position: relative;
  }

  .login-checks a::after {
    content: '';
    position: absolute;
    /* 12px of link plus 16px each side is the 44px the rule is for. */
    inset: -16px -6px;
  }
}