/* IRONLINE shipper app. Same direction as the site: white, navy, one blue, 4px radius.
   Denser than the site, mono figures, light surface. */
:root{--navy:#0b2a5b;--navy-d:#061a3a;--blue:#1f6fd6;--sky:#eef4fc;--line:#dbe3ee;--ink:#13213a;--mute:#566177;--ok:#11653a;--okb:#e3f6ea;--warn:#8a5a00;--warnb:#fff3d6;--r:4px;--logo-a:#3d9bff}
*{box-sizing:border-box;margin:0;padding:0}
body{font:400 15px/1.5 "Source Sans 3",system-ui,sans-serif;color:var(--ink);background:#dfe6f0;display:grid;place-items:start center;min-height:100vh;padding:clamp(0px,3vw,32px) 0;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
a{color:var(--blue)}
.ic,.ic-lg,.ic-xl{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic .a{stroke:var(--blue)}
:focus-visible{outline:3px solid #7fb4ff;outline-offset:2px}

.app{width:min(400px,100vw);height:min(820px,100vh);background:#fff;position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(6,26,58,.25)}
@media (max-width:440px){.app{border-radius:0;box-shadow:none;height:100vh;height:100dvh}body{padding:0}}
.sb{display:flex;justify-content:space-between;padding:10px 20px 4px;font:600 12px "IBM Plex Mono",monospace;color:#c7d3e6;background:var(--navy)}
.top{display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:#fff;padding:10px 18px 18px}
.brand{display:flex;gap:10px;align-items:center}
.brand .mark{width:34px;height:34px;color:#fff}
.brand b{display:block;font-weight:800;letter-spacing:.08em;font-size:16px;line-height:1}
.brand span{font-size:12.5px;color:#b6c5dc}
.icon-btn{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r);background:rgba(255,255,255,.08);color:#fff}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:#ff6b5a;border:2px solid var(--navy)}

main{flex:1;overflow-y:auto;padding:18px 18px 96px}
.view{display:none}
.view.on{display:block;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}}

.sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.sum div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 10px 8px;box-shadow:0 6px 16px rgba(6,26,58,.08)}
.sum b{font:600 22px "IBM Plex Mono",monospace;color:var(--navy);display:block;line-height:1.1}
.sum span{font-size:12px;color:var(--mute)}
.chips{display:flex;gap:8px;margin-bottom:12px}
.chip{padding:7px 14px;border:1px solid var(--line);border-radius:var(--r);font-weight:600;font-size:14px;color:var(--mute)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}

.loads li{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px}
.loads button{width:100%;text-align:left;padding:14px;display:block}
.ld-h{display:flex;justify-content:space-between;align-items:center;font:600 12.5px "IBM Plex Mono",monospace;color:var(--mute)}
.st{font:600 11px "IBM Plex Mono",monospace;font-style:normal;padding:4px 7px;border-radius:var(--r);background:var(--sky);color:var(--blue)}
.st.ok{background:var(--okb);color:var(--ok)}
.st.warn{background:var(--warnb);color:var(--warn)}
.ld-r{font-weight:700;font-size:16.5px;color:var(--navy);margin:6px 0 8px;display:flex;align-items:center;gap:6px}
.ld-r .ic{width:1em;height:1em;color:var(--mute)}
.pbar{height:5px;background:var(--line);border-radius:var(--r);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--blue)}
.ld-f{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);margin-top:8px}
.ld-f b{color:var(--ink);font-weight:600}

.back{display:inline-flex;align-items:center;gap:4px;color:var(--blue);font-weight:600;margin-bottom:10px}
.back .ic{transform:rotate(180deg)}
.det-h{display:flex;justify-content:space-between;align-items:center;font:600 13px "IBM Plex Mono",monospace;color:var(--mute)}
#dRoute,.vh{font-size:22px;font-weight:800;color:var(--navy);margin:6px 0 4px;line-height:1.2}
.vp{color:var(--mute);margin-bottom:16px}
.lane svg{width:100%;height:auto}
.l-bg{fill:none;stroke:var(--line);stroke-width:4}
.l-fg{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round}
.l-end{fill:var(--navy)}
.l-truck{fill:#fff;stroke:var(--blue);stroke-width:4}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 18px}
.kv div{background:var(--sky);border-radius:var(--r);padding:10px 12px}
.kv span{display:block;font-size:12px;color:var(--mute)}
.kv b{font:600 15px "IBM Plex Mono",monospace;color:var(--navy)}
.sub{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:18px 0 10px}
.tl{border-left:2px solid var(--line);margin-left:7px}
.tl li{position:relative;padding:0 0 14px 20px}
.tl li::before{content:"";position:absolute;left:-8px;top:4px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.tl li.d::before{background:var(--blue);border-color:var(--blue)}
.tl li.n::before{border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,111,214,.18)}
.tl b{display:block;font-weight:700}
.tl span{font:500 12.5px "IBM Plex Mono",monospace;color:var(--mute)}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:var(--r);background:var(--blue);color:#fff;font-weight:700}
.btn.ghost{background:#fff;border:1.5px solid var(--navy);color:var(--navy)}
.btn.full{width:100%;margin-top:14px}
.toast{margin-top:12px;font-weight:600;color:var(--ok);min-height:1.5em}

.form label{display:block;font-weight:600;font-size:13.5px;margin:12px 0 6px}
select,input{width:100%;font:inherit;padding:11px 12px;border:1px solid #b9c5d6;border-radius:var(--r);background:#fff;color:var(--ink)}
input[type=range]{padding:0;border:0;accent-color:var(--blue)}
.rng{font:600 14px "IBM Plex Mono",monospace;color:var(--navy)}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{padding:10px;font-weight:700;color:var(--mute)}
.seg button.on{background:var(--navy);color:#fff}
.quote{margin-top:18px;background:var(--navy);color:#fff;border-radius:var(--r);padding:18px}
.quote span{font-size:13px;color:#b6c5dc}
.quote b{display:block;font:600 36px "IBM Plex Mono",monospace;letter-spacing:-.02em}
.quote small{color:#d4def0;font-size:13px}
.quote .btn{background:#fff;color:var(--navy)}

.docs li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.docs li>.ic{color:var(--navy)}
.docs div{flex:1;min-width:0}
.docs b{display:block;font-weight:700;font-size:14.5px}
.docs span{font-size:12.5px;color:var(--mute)}
.docs button{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r);background:var(--sky);color:var(--blue)}

.acct{display:flex;gap:12px;align-items:center;margin:8px 0 4px}
.av{width:52px;height:52px;border-radius:var(--r);background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800}
.acct b{display:block;font-size:17px}
.acct span{color:var(--mute);font-size:13.5px}
.tog li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.sw{width:44px;height:26px;border-radius:13px;background:var(--line);position:relative;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw.on{background:var(--blue)}
.sw.on::after{transform:translateX(18px)}
.planner{display:flex;gap:12px;align-items:center;background:var(--sky);padding:12px;border-radius:var(--r)}
.planner .ic{color:var(--navy);width:28px;height:28px}
.planner b{display:block}
.planner span{font-size:13px;color:var(--mute)}
.site{display:block;text-align:center;margin-top:22px;font-weight:600}

.tabbar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid var(--line);padding:8px 6px calc(10px + env(safe-area-inset-bottom))}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--mute);padding:4px 0}
.tabbar .ic{width:24px;height:24px}
.tabbar button.on{color:var(--navy)}
.tabbar button.on .ic .a{stroke:var(--blue)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* photography: always darkened */
.top{background:linear-gradient(rgba(8,30,66,.9),rgba(8,30,66,.78)),url(https://images.unsplash.com/photo-1786081061738-ed1e6abd3ac5?w=900&q=70&auto=format&fit=crop) center/cover no-repeat,var(--navy)}