/* Only the navigation shell sticks. Headers inside cards remain in document flow. */
:root{--haul-header-height:100px}html{scroll-padding-top:calc(var(--haul-header-height) + 16px)}
.app>header,.phase10 .app>header{position:sticky;top:0;z-index:100;isolation:isolate;background:#fff;backdrop-filter:none;border-radius:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;width:100%;box-sizing:border-box}
.app>header .head-tools{min-width:0;flex-wrap:wrap;justify-content:flex-end}.app>header .p10-navigation{grid-column:1/-1;min-width:0;width:100%;box-sizing:border-box;flex-wrap:wrap}
#publicLanding .public-nav{position:sticky;top:0;z-index:100;background:#fff;backdrop-filter:none;isolation:isolate}
.topbar{z-index:100;isolation:isolate}.account-menu{top:calc(var(--haul-header-height) + 8px)!important;z-index:120!important}
.haul-map-canvas{position:relative;isolation:isolate;z-index:0}.haul-job-sites,.phase6-assignment,.demo-driver-preview,[data-job-site-map],#work-assignment{scroll-margin-top:calc(var(--haul-header-height) + 16px)}
.haul-site-focus{margin:0 0 16px;min-height:42px;background:#fff;border:1px solid #91a4af;border-radius:6px;padding:10px 12px;color:#17252c;font-weight:700}
.haul-route-estimate{font-size:13px;padding:12px 16px;background:#f2f6f8;border-top:1px solid #cfdae0;border-radius:0 0 9px 9px}.haul-route-estimate summary{cursor:pointer;font-weight:700;line-height:1.5}.haul-route-estimate p{line-height:1.5;margin:12px 0;overflow-wrap:anywhere}.haul-route-estimate label{display:block;font-weight:600}.haul-route-estimate label[hidden]{display:none}.haul-route-estimate input{display:block;width:100%;font-size:16px;margin:8px 0 12px;min-height:44px}.haul-route-estimate button{min-height:42px;border:1px solid #abbcc6;background:#fff;color:#17252c;border-radius:6px;padding:8px 12px;font-weight:700}.haul-route-estimate small{display:block;font-size:12px;line-height:1.5;color:#435e6b}.haul-route-estimate [data-route-result]:empty{display:none}
.haul-truck-option{min-width:0;border:1px solid #cad7de;background:#fff;border-radius:10px;overflow:hidden}.haul-truck-option .p16-truck-choice,.haul-truck-option .schedule-choice{border:0;border-radius:0;height:auto;margin:0}.haul-current-work{padding:0 16px 14px;font-size:12px}.haul-current-work strong{display:block;margin-bottom:6px}.haul-current-work button{border:0;background:none;text-align:left;color:#164d69;text-decoration:underline;padding:6px 0;line-height:1.5;cursor:pointer;display:block;font-weight:650;min-height:40px}.haul-current-work small{display:block;line-height:1.5;color:#4d6370}
@media(max-width:600px){.app>header,.phase10 .app>header{padding:10px 12px;gap:8px}.app>header .brand{font-size:16px}.app>header .head-tools{gap:5px}.app>header .p10-navigation{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start}.app>header .p10-navigation button{flex-shrink:0}.app>header .account-chip{max-width:112px}#publicLanding .public-nav-inner{box-sizing:border-box;flex-wrap:wrap;gap:10px}#publicLanding .public-actions{min-width:0;flex-wrap:wrap;gap:6px}}

.dispatch-map-panel{top:calc(var(--haul-header-height) + 16px)}.dispatch-job{scroll-margin-top:calc(var(--haul-header-height) + 16px)}.auth-gate{z-index:150}

/* The sticky header belongs to the full-width shell. Only page content is capped.
   Percentage widths stay inside the viewport even when a scrollbar is present. */
.phase10 .app{--haul-content-width:1080px;--haul-header-gutter:30px;width:100%;max-width:none}
.phase10.hm-operations .app{--haul-content-width:1440px;max-width:none}
.phase10 .app>main,.phase10 .app>.demo-mode-strip{width:100%;max-width:var(--haul-content-width);margin-inline:auto}
.phase10 .app>header{width:100%;max-width:none;margin-inline:0;padding-inline:max(var(--haul-header-gutter),calc((100% - var(--haul-content-width))/2 + var(--haul-header-gutter)))}
body>.topbar{width:100%;max-width:none;box-sizing:border-box}
@media(max-width:700px){.phase10 .app{--haul-header-gutter:18px}}
@media(max-width:600px){.phase10 .app{--haul-header-gutter:16px}}