/* Shared identity, theme controls, and the public 3D cargo choreography. */
.theme-toggle{width:37px;height:37px;border:1px solid #d3d2cf;background:transparent;color:#171718;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;padding:3px;border-radius:50%;cursor:pointer;transition:.25s}.theme-toggle span{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;font:15px/1 var(--display)}.theme-toggle .theme-moon{background:#171718;color:#fff;font-size:10px}.theme-toggle:hover{border-color:#e30613;transform:rotate(15deg)}
/* The elevated port scene uses real depth planes — the truck enters, the container is picked, and the vehicle exits. */
.hero-scene{perspective:1100px;perspective-origin:47% 48%;overflow:visible}.hero-scene .road-3d{position:absolute;left:-20%;right:-20%;bottom:3%;height:220px;background:linear-gradient(90deg,rgba(15,15,16,.12),rgba(15,15,16,.28) 48%,rgba(15,15,16,.12)),repeating-linear-gradient(90deg,transparent 0 95px,rgba(255,255,255,.55) 95px 130px,transparent 130px 225px);border:1px solid rgba(0,0,0,.18);transform:rotateX(67deg) translateZ(-22px);transform-origin:bottom;overflow:hidden}.hero-scene .road-3d:before,.hero-scene .road-3d:after{content:"";position:absolute;left:0;right:0;border-top:3px solid #e30613}.hero-scene .road-3d:before{top:15px}.hero-scene .road-3d:after{bottom:15px}.hero-scene .road-3d i{position:absolute;width:68px;border-top:2px solid rgba(255,255,255,.8);left:var(--road-x);top:50%;animation:road-flow 1.25s linear infinite}.hero-scene .road-3d i:nth-child(1){--road-x:4%;animation-delay:-.1s}.hero-scene .road-3d i:nth-child(2){--road-x:27%;animation-delay:-.35s}.hero-scene .road-3d i:nth-child(3){--road-x:50%;animation-delay:-.65s}.hero-scene .road-3d i:nth-child(4){--road-x:72%;animation-delay:-.92s}.hero-scene .road-3d i:nth-child(5){--road-x:93%;animation-delay:-1.2s}@keyframes road-flow{to{transform:translateX(-140px)}}
.gantry-crane{position:absolute;z-index:5;right:4%;bottom:15%;width:300px;height:285px;transform-style:preserve-3d;transform:rotateX(4deg) rotateY(-10deg)}.crane-top{position:absolute;left:2px;right:0;top:7px;height:22px;background:linear-gradient(#e30613,#9c0009);box-shadow:0 8px 0 #101011,0 18px 20px rgba(0,0,0,.2);transform:translateZ(30px)}.crane-top:before{content:"";position:absolute;left:20px;right:20px;top:6px;border-top:2px solid rgba(255,255,255,.65)}.crane-top i{position:absolute;right:50px;top:22px;height:229px;border-left:2px solid #2c2d2e;transform-origin:top;animation:crane-line 12s cubic-bezier(.5,0,.4,1) infinite}.crane-top i:after{content:"";position:absolute;left:-7px;bottom:-4px;width:12px;height:9px;background:#e30613;border-radius:0 0 3px 3px}.crane-leg{position:absolute;top:27px;bottom:0;width:17px;background:linear-gradient(90deg,#8e0009,#e30613 42%,#700007);transform:skewX(-5deg) translateZ(8px);box-shadow:7px 0 0 rgba(0,0,0,.2)}.crane-leg:after{content:"";position:absolute;bottom:-3px;left:-13px;width:42px;height:6px;background:#151516}.crane-leg-one{left:23px}.crane-leg-two{right:8px;transform:skewX(5deg) translateZ(8px)}.crane-trolley{position:absolute;top:2px;left:138px;width:31px;height:28px;background:#111;transform:translateZ(39px);animation:crane-trolley 12s cubic-bezier(.5,0,.4,1) infinite}.crane-trolley i{position:absolute;left:6px;right:6px;top:-5px;border-top:3px solid #ddd}.crane-trolley b{position:absolute;top:12px;left:11px;width:8px;height:8px;border-radius:50%;background:#e30613}@keyframes crane-line{0%,10%{transform:scaleY(.24)}20%,28%{transform:scaleY(.92)}36%,42%{transform:scaleY(.3)}54%,62%{transform:scaleY(.92)}72%,100%{transform:scaleY(.24)}}@keyframes crane-trolley{0%,14%{transform:translateZ(39px) translateX(-8px)}30%,48%{transform:translateZ(39px) translateX(58px)}64%,100%{transform:translateZ(39px) translateX(-8px)}}
.lifted-container{position:absolute;z-index:6;left:10%;bottom:43%;width:210px;height:70px;transform-style:preserve-3d;animation:lift-container 12s cubic-bezier(.5,0,.4,1) infinite}.container-box{position:absolute;width:205px;height:64px;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(-28deg);filter:drop-shadow(16px 18px 9px rgba(0,0,0,.25))}.container-box i{position:absolute;display:block;font-style:normal}.container-side{inset:0;background:linear-gradient(135deg,#e30613,#a4000c);border:2px solid #730007;color:#fff;font:700 12px var(--display);letter-spacing:.14em;padding:23px 18px;transform:translateZ(19px)}.container-side:after{content:"";position:absolute;inset:8px;border-top:1px solid rgba(255,255,255,.42);border-bottom:1px solid rgba(0,0,0,.3)}.container-front{width:38px;height:64px;right:-19px;top:0;background:#850008;border:2px solid #730007;transform:rotateY(90deg) translateZ(19px)}.container-top{height:38px;width:205px;top:-19px;left:0;background:#f04a50;border:2px solid #a4000c;transform:rotateX(90deg) translateZ(19px)}@keyframes lift-container{0%,14%{transform:translate3d(0,0,0)}28%,46%{transform:translate3d(160px,-100px,40px)}60%,100%{transform:translate3d(0,0,0)}}
.truck-3d{position:absolute;z-index:4;bottom:20%;left:10%;width:308px;height:105px;transform-style:preserve-3d;animation:truck-route 12s cubic-bezier(.55,0,.45,1) infinite}.truck-trailer{position:absolute;bottom:24px;left:0;width:202px;height:69px;transform-style:preserve-3d;transform:rotateX(-13deg) rotateY(-25deg)}.truck-trailer i,.truck-cab i{position:absolute;display:block}.trailer-side{inset:0;background:linear-gradient(135deg,#151516,#363638);border:2px solid #080809;color:#fff;font:700 12px var(--display);letter-spacing:.12em;padding:25px 17px;transform:translateZ(19px)}.trailer-side:after{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.25)}.trailer-front{right:-19px;top:0;width:38px;height:69px;background:#151516;border:2px solid #080809;transform:rotateY(90deg) translateZ(19px)}.trailer-top{left:0;top:-19px;width:202px;height:38px;background:#404043;border:2px solid #080809;transform:rotateX(90deg) translateZ(19px)}.truck-cab{position:absolute;bottom:24px;left:203px;width:73px;height:59px;transform-style:preserve-3d;transform:rotateX(-13deg) rotateY(-25deg)}.cab-side{inset:0;background:linear-gradient(135deg,#e30613,#a9000c);clip-path:polygon(0 0,60% 0,100% 38%,100% 100%,0 100%);border:2px solid #800008;transform:translateZ(19px)}.cab-side:after{content:"";position:absolute;left:9px;top:8px;width:33px;height:21px;background:#d9e0e1;border:1px solid #7b7f80}.cab-front{right:-19px;bottom:0;width:38px;height:59px;background:#96000a;border:2px solid #800008;transform:rotateY(90deg) translateZ(19px)}.cab-top{left:0;top:-19px;width:56px;height:38px;background:#f04a50;border:2px solid #800008;transform:rotateX(90deg) translateZ(19px)}.truck-wheel{position:absolute;bottom:5px;width:29px;height:29px;border-radius:50%;background:radial-gradient(circle,#c6c6c7 0 19%,#202023 22% 43%,#060607 45% 100%);border:2px solid #4a4a4d;transform:rotateX(-25deg);animation:wheel-spin 1.4s linear infinite}.tw-one{left:25px}.tw-two{left:151px}.tw-three{left:225px}@keyframes wheel-spin{to{rotate:360deg}}@keyframes truck-route{0%{transform:translate3d(-450px,20px,-120px) scale(.74)}18%,64%{transform:translate3d(20px,0,0) scale(1)}84%,100%{transform:translate3d(570px,-18px,80px) scale(.82)}}

/* Public site dark mode. */
.dark body{--paper:#161617;background:#161617;color:#f4f3f1}.dark .site-header,.dark .tracking-bar,.dark .intro,.dark .network,.dark .portal{background:#161617;color:#f5f4f2}.dark .site-header{border-color:#303031}.dark .hero-grid{background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px)}.dark .hero-sub,.dark .intro-copy>p,.dark .network-head>p,.dark .tracking-note,.dark .eyebrow,.dark .hero-live{color:#aaa}.dark .hero-live b{color:#f4f3f1}.dark .site-header nav.open{background:#161617;border-color:#303031}.dark .menu-toggle i{background:#f4f3f1}.dark .login-link,.dark .text-link,.dark .hero-counter{color:#f4f3f1;border-color:#f4f3f1}
/* Needs to out-rank .dark .login-link above, or the hover never shows in dark mode. */
.dark .login-link:hover{color:var(--red)}.dark .theme-toggle{border-color:#555;color:#fff}.dark .theme-toggle .theme-sun{background:#fff;color:#111;font-size:12px}.dark .theme-toggle .theme-moon{background:transparent;color:#fff}.dark .tracking-bar{border-top:1px solid #303031;border-bottom:1px solid #303031}.dark .track-form input{background:#202021;border-color:#555;color:#fff}.dark .intro-stats div{border-color:#3c3c3d}.dark .intro-stats span,.dark .vertical-text{color:#aaa}.dark .map-panel{border:1px solid #383839}.dark .portal-grid article:first-child{background:#252526;color:#fff}.dark .portal-grid article:first-child p{color:#bbb}.dark .portal-grid article:first-child .button{border-color:#ddd;color:#fff}.dark .hero-scene .road-3d{background-color:#303032}.dark .city span{background:#f1f1ef}.dark .road-3d{filter:brightness(.7)}

/* Operations app theme. */
.login-theme{position:absolute;z-index:2;right:38px;top:76px;border-color:#4b4b4d;color:#fff}.login-theme .theme-sun{color:#fff}.login-theme .theme-moon{background:#fff;color:#111}.dark .login-theme{border-color:#d0d0cc;color:#171718}.dark .login-theme .theme-sun{color:#171718}.dark .login-theme .theme-moon{background:#171718;color:#fff}.dark .app-shell,.dark .workspace{background:#171718;color:#f4f3f1}.dark .kpi-grid article,.dark .attention-card,.dark .live-map,.dark .shipment-table,.dark .activity-card,.dark .route-card{background:#202021;color:#f4f3f1;border-color:#39393a}.dark .kpi-grid p,.dark .header-sub,.dark .system-live,.dark .section-label,.dark .attention-row p,.dark .route-list small,.dark .activity p,.dark .activity small{color:#aaa}.dark .attention-card header,.dark .live-map header,.dark .shipment-table header,.dark .activity-card header,.dark .route-card header,.dark .attention-row,.dark td,.dark .view-shipments,.dark .activity>div{border-color:#3a3a3b}.dark th{background:#29292a;color:#aaa}.dark .table-actions button,.dark .activity-card header button,.dark .route-card header button,.dark .icon-button,.dark .notification{background:#29292a;color:#fff;border-color:#4a4a4b}.dark .theme-toggle{border-color:#555;color:#fff}.dark .theme-toggle .theme-sun{background:#fff;color:#111;font-size:12px}.dark .theme-toggle .theme-moon{background:transparent;color:#fff}.dark .attention-row:hover,.dark tbody tr:hover{background:#27272b}.dark .map-detail,.dark .drawer-note{background:#29292a;color:#fff}.dark .map-detail button{color:#fff;border-color:#fff}.dark .route-list span{background:#404042}.dark .shipment-drawer article{background:#202021;color:#fff}.dark .drawer-route{border-color:#414143}.dark .drawer-note span{color:#aaa}.dark .drawer-note p{color:#ddd}.dark .resolve{background:#e30613}.dark .staff-login{background:#050506}.dark .login-card{background:#202021;color:#fff}.dark .login-card input{color:#fff;border-color:#555}.dark .login-card .login-copy,.dark .login-checks div{color:#bbb}.dark .login-checks b{color:#fff}.dark .login-checks{border-color:#414143}
@media(max-width:1700px){.gantry-crane{right:-60%;bottom:16%;transform:rotateX(4deg) rotateY(-10deg);transform-origin:bottom right}.lifted-container{left:7%;bottom:44%;transform-origin:bottom left;animation-name:lift-container-compact}.truck-3d{left:7%;bottom:21%;transform-origin:bottom left;scale:.78}}
@keyframes lift-container-compact{0%,14%{transform:translate3d(0,0,0)}28%,46%{transform:translate3d(50px,-100px,20px)}60%,100%{transform:translate3d(0,0,0)}}
@media(max-width:800px){.header-actions{display:flex!important;gap:8px}.header-actions .login-link,.header-actions .button{display:none}.theme-toggle{width:34px;height:34px}.hero-scene .road-3d{height:150px;bottom:1%}.gantry-crane{right:-12%;bottom:16%;transform:scale(.73) rotateX(4deg) rotateY(-10deg);transform-origin:bottom right}.lifted-container{left:7%;bottom:44%;transform-origin:bottom left}.truck-3d{left:7%;bottom:21%;transform-origin:bottom left;scale:.78}.scene-stat{z-index:8}.login-theme{right:20px;top:70px}.logo-box img{width:160px;transform:translate(-63px,-25px)}}
@media(max-width:460px){.gantry-crane{right:-26%;scale:.6}.lifted-container{scale:.72;left:3%;bottom:48%}.truck-3d{scale:.62;left:0;bottom:23%}.hero-scene{min-height:310px;height:310px}.city{bottom:15%}.scene-stat{bottom:14%}.label-origin{top:40%}}
@media(prefers-reduced-motion:reduce){.motion-dot,.truck-3d,.lifted-container,.crane-top i,.crane-trolley,.road-3d i,.truck-wheel,.moving-vessel{animation:none!important}}

/* The logo's black parts turn white on a dark page (the red stays), so it reads on
   either background. Pages carry both versions and show one. */
body img.logo-on-dark { display: none; }
.dark img.logo-on-light { display: none; }
.dark img.logo-on-dark { display: block; }

/* Line icons drawn as SVG, in the text colour. Characters like ↗ ↩ ⚙ show as colour
   emoji on some systems (ChromeOS ignores the text-style selector), so these replace them. */
.icon {
  display: inline-block;
  width: .85em;
  height: .85em;
  vertical-align: -.08em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: square;
  stroke-linejoin: miter;
  overflow: visible;
}

/* --- Theme switch -----------------------------------------------------------
 *
 * A sliding pill rather than the old circular button: the knob's position says
 * which mode you are in before you read the icon, which a pair of symbols side
 * by side never did.
 *
 * The icon shown is the mode you are in, and the knob rests on the opposite
 * side — sun on the left with the knob right in daylight, moon on the right
 * with the knob left at night.
 *
 * Written last in this file so it supersedes the circular rules above, and
 * spelled out for .login-theme too, whose own dark-mode rules are more specific
 * than a bare .theme-toggle selector. */

.theme-toggle,
.login-theme {
  width: 52px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: #e6e5e2;
  border: 1px solid #d3d2cf;
  transition: background .28s ease, border-color .28s ease;
}

/* Position is set per place, not shared: the switch in a header sits in the flow,
   while the one on a sign-in screen is pinned to the corner of the page. Both
   establish a positioning context for the knob, which is what it needs.

   Collapsing these two into one `position: relative` dropped the sign-in switch
   out of its corner and into the middle of the page. */
.theme-toggle { position: relative; }
.login-theme { position: absolute; right: 38px; top: 76px; }

/* The pill is 28px tall; a fingertip wants 44. This extends what can be tapped
   without making the control look heavier. */
.theme-toggle::before,
.login-theme::before {
  content: '';
  position: absolute;
  inset: -8px -6px;
}

/* The knob. */
.theme-toggle::after,
.login-theme::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: #2a2a2c;
  transform: translateX(24px);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), background .28s ease;
}

.theme-toggle span,
.login-theme span,
.dark .theme-toggle span,
.dark .login-theme span {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 100%;
  display: grid;
  place-items: center;
  background: none;
  border-radius: 0;
  font-size: 11px;
  line-height: 1;
  transition: opacity .2s ease;
}

/* Daylight: the sun, with the knob out of its way on the right. */
.theme-toggle .theme-sun,
.login-theme .theme-sun { opacity: 1; color: #2a2a2c; }
.theme-toggle .theme-moon,
.login-theme .theme-moon { opacity: 0; }

/* Night: the track darkens, the knob slides left and turns pale, the moon shows. */
.dark .theme-toggle,
.dark .login-theme {
  background: #1b1b1d;
  border-color: #3c3c3e;
}
.dark .theme-toggle::after,
.dark .login-theme::after {
  background: #f4f3f1;
  transform: translateX(0);
}
.dark .theme-toggle .theme-sun,
.dark .login-theme .theme-sun { opacity: 0; background: none; }
.dark .theme-toggle .theme-moon,
.dark .login-theme .theme-moon { opacity: 1; color: #f4f3f1; background: none; }

/* The old button rotated on hover, which a sliding switch should not do. */
.theme-toggle:hover,
.login-theme:hover { transform: none; border-color: var(--red, #e30613); }


/* --- The switch in the site header ------------------------------------------
   The same switch serves the staff dashboard and the sign-in screens, which are
   sized for their own chrome; this is only the one in the public header, grown
   to match the nav and buttons beside it. Every number here is the one above
   scaled by the same amount, knob and travel included, or the knob stops short
   of the end of its track. */

.site-header .theme-toggle { width: 62px; height: 34px; }

.site-header .theme-toggle::after {
  width: 24px;
  height: 24px;
  margin-top: -12px;
  transform: translateX(30px);
}

.dark .site-header .theme-toggle::after { transform: translateX(0); }

.site-header .theme-toggle span { width: 29px; font-size: 13px; }

/* Back to the smaller switch where the header has no room to be bigger; this
   matches the step in styles.css. */
@media (max-width: 1360px) {
  .site-header .theme-toggle { width: 52px; height: 28px; }

  .site-header .theme-toggle::after {
    width: 20px;
    height: 20px;
    margin-top: -10px;
    transform: translateX(24px);
  }

  .dark .site-header .theme-toggle::after { transform: translateX(0); }

  .site-header .theme-toggle span { width: 24px; font-size: 11px; }
}

/* --- The header's call to action in dark mode ---------------------------------
   .button-dark is near-black on paper, which is right on a light page and
   invisible on a dark one: the bar is rgb(22,22,23) and the button rgb(11,11,12),
   a contrast of 1.09:1. It was a box nobody could see with text floating in it.

   Red is what the site already uses for a primary action, and it measures
   3.7:1 against the bar with 4.9:1 for the text on it. */
.dark .site-header .button-dark { background: var(--red); color: #fff; }
.dark .site-header .button-dark:hover { background: #ff1f2b; }

/* The switch had the brightest element in the header -- a white knob at 16:1,
   louder than the thing we actually want pressed. Still clearly readable,
   no longer shouting over the button beside it. */
.dark .site-header .theme-toggle::after { background: #cfcfcb; }