/* DriverLog AU V8.9.1R1 — final responsive reconciliation layer.
   Loaded last. Uses viewport/pointer/orientation instead of user-agent device sniffing. */
:root{
  --dl-left-wide:232px;
  --dl-right-wide:292px;
  --dl-left-tablet:92px;
  --dl-left-landscape:82px;
  --dl-header-wide:66px;
  --dl-header-tablet:60px;
  --dl-header-landscape:56px;
  --dl-bottom-nav:72px;
  --dl-content-max:1160px;
  --dl-gap:16px;
  --dl-safe-top:env(safe-area-inset-top,0px);
  --dl-safe-right:env(safe-area-inset-right,0px);
  --dl-safe-bottom:env(safe-area-inset-bottom,0px);
  --dl-safe-left:env(safe-area-inset-left,0px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;min-width:0;overflow-x:hidden}
body{min-height:100dvh}
#appShell,#appShell>header,#appShell>main,#appShell>nav,.page,.card,.grid,.formgrid,.actions,.header-row,.heroTop,.heroActions{min-width:0;max-width:100%}
img,svg,video,canvas,iframe{max-width:100%}
button,input,select,textarea{max-width:100%}
button,.nav-label,.brand,.sub,.metric,.card,.notice,.successbox{overflow-wrap:anywhere}
.table-wrap,.report-tabs{max-width:100%;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:max-content}
.grid-report{max-width:none}
.page{scroll-margin-top:18px}

/* Accessible interaction polish */
button{touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
nav button[aria-current="page"]{box-shadow:inset 0 0 0 2px #60a5fa,0 3px 12px #2563eb22}
@media (pointer:coarse),(hover:none){
  button,.auth-link,.password-eye{min-height:44px}
  input,select,textarea{min-height:44px;font-size:16px}
  nav button{min-height:44px}
  button:hover{transform:none!important}
}

/* One coordinate system for desktop. This fixes the old 12–22px nav/header/main overlap. */
@media (min-width:1280px) and (pointer:fine){
  body.driverlog-pro-web:not(.auth-locked) #appShell{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;padding-left:var(--dl-left-wide)!important;padding-right:0!important;padding-bottom:0!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:var(--dl-left-wide)!important;height:100dvh!important;padding:18px 14px!important;overflow-y:auto!important;overflow-x:hidden!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header{position:fixed!important;left:var(--dl-left-wide)!important;right:0!important;top:0!important;height:var(--dl-header-wide)!important;margin:0!important;padding-top:max(10px,var(--dl-safe-top))!important;z-index:80!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main{position:fixed!important;left:var(--dl-left-wide)!important;right:0!important;top:var(--dl-header-wide)!important;bottom:0!important;width:auto!important;max-width:none!important;margin:0!important;padding:var(--dl-gap)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main>.page{width:min(100%,var(--dl-content-max))!important;margin:0 auto!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::before,
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::after{left:var(--dl-left-wide)!important;right:0!important}
  body.driverlog-pro-web:not(.auth-locked) .dl-left-brand{max-width:100%!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav>button{width:100%!important;min-height:42px!important;flex:0 0 auto!important}
}

/* Wide desktop gets true three-rail layout; medium desktop uses right brief as drawer. */
@media (min-width:1500px) and (pointer:fine){
  body.driverlog-pro-web:not(.auth-locked) #appShell{padding-right:var(--dl-right-wide)!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header{right:var(--dl-right-wide)!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main{right:var(--dl-right-wide)!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::before,
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::after{right:var(--dl-right-wide)!important}
  body.driverlog-pro-web:not(.auth-locked) .driver-brief{display:block!important;position:fixed!important;top:0!important;right:0!important;bottom:0!important;width:var(--dl-right-wide)!important;max-width:var(--dl-right-wide)!important;overflow-y:auto!important;z-index:70!important}
  body.driverlog-pro-web:not(.auth-locked) .driver-brief.open{display:block!important}
  body.driverlog-pro-web:not(.auth-locked) .dl-brief-toggle{display:none!important}
}
@media (min-width:1280px) and (max-width:1499px) and (pointer:fine){
  body.driverlog-pro-web:not(.auth-locked) .driver-brief:not(.open){display:none!important}
  body.driverlog-pro-web:not(.auth-locked) .driver-brief.open{position:fixed!important;display:block!important;right:14px!important;top:calc(var(--dl-header-wide) + 10px)!important;bottom:14px!important;width:min(340px,calc(100vw - var(--dl-left-wide) - 28px))!important;max-width:340px!important;overflow-y:auto!important;z-index:150!important;box-shadow:0 20px 60px #0f172a40!important}
  body.driverlog-pro-web:not(.auth-locked) .dl-brief-toggle{display:flex!important}
}

/* Tablet / compact desktop mode. Coarse pointer keeps iPad Pro 1366 out of desktop geometry. */
@media (min-width:900px) and (max-width:1279px),
       (min-width:900px) and (max-width:1366px) and (pointer:coarse){
  body.driverlog-pro-web:not(.auth-locked) #appShell{height:100dvh!important;min-height:100dvh!important;padding:0 0 0 var(--dl-left-tablet)!important;overflow:hidden!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:var(--dl-left-tablet)!important;height:100dvh!important;padding:8px 7px max(8px,var(--dl-safe-bottom))!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:90!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav>button{width:100%!important;min-width:0!important;min-height:48px!important;flex:0 0 auto!important;padding:6px 3px!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav .nav-icon{font-size:18px!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav .nav-label{font-size:10px!important;line-height:1.1!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header{position:fixed!important;left:var(--dl-left-tablet)!important;right:0!important;top:0!important;height:var(--dl-header-tablet)!important;margin:0!important;padding:8px 14px!important;z-index:85!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main{position:fixed!important;left:var(--dl-left-tablet)!important;right:0!important;top:var(--dl-header-tablet)!important;bottom:0!important;width:auto!important;max-width:none!important;margin:0!important;padding:14px!important;overflow-y:auto!important;overflow-x:hidden!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main>.page{width:min(100%,var(--dl-content-max))!important;margin:0 auto!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::before,
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::after{left:var(--dl-left-tablet)!important;right:0!important}
  body.driverlog-pro-web:not(.auth-locked) .dl-left-brand,
  body.driverlog-pro-web:not(.auth-locked) .dl-left-pulse,
  body.driverlog-pro-web:not(.auth-locked) .web-sidebar-foot,
  body.driverlog-pro-web:not(.auth-locked) .dl-calendar-nav{display:none!important}
  body.driverlog-pro-web:not(.auth-locked) .driver-brief:not(.open){display:none!important}
  body.driverlog-pro-web:not(.auth-locked) .driver-brief.open{display:block!important;position:fixed!important;right:12px!important;top:calc(var(--dl-header-tablet) + 10px)!important;bottom:12px!important;width:min(340px,calc(100vw - var(--dl-left-tablet) - 24px))!important;overflow-y:auto!important;z-index:150!important}
  body.driverlog-pro-web:not(.auth-locked) .dl-brief-toggle{display:flex!important}
}

/* Phone landscape: replace bottom overlay with a compact vertical rail when space is short. */
@media (min-width:700px) and (max-width:899px) and (orientation:landscape) and (max-height:520px){
  body.driverlog-pro-web:not(.auth-locked){padding-bottom:0!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell{height:100dvh!important;min-height:100dvh!important;padding:0 0 0 var(--dl-left-landscape)!important;overflow:hidden!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{position:fixed!important;left:0!important;top:0!important;bottom:0!important;right:auto!important;width:var(--dl-left-landscape)!important;height:100dvh!important;padding:5px 5px max(5px,var(--dl-safe-bottom))!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:2px!important;overflow-y:auto!important;overflow-x:hidden!important;border-top:0!important;border-right:1px solid #cbd5e1!important;z-index:95!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav>button{width:100%!important;min-width:0!important;min-height:44px!important;height:auto!important;flex:0 0 auto!important;padding:4px 2px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav .nav-icon{font-size:16px!important;line-height:1!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav .nav-label{font-size:9px!important;line-height:1!important;white-space:nowrap!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header{position:fixed!important;left:var(--dl-left-landscape)!important;right:0!important;top:0!important;height:var(--dl-header-landscape)!important;padding:7px 10px!important;margin:0!important;z-index:90!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main{position:fixed!important;left:var(--dl-left-landscape)!important;right:0!important;top:var(--dl-header-landscape)!important;bottom:0!important;width:auto!important;max-width:none!important;margin:0!important;padding:10px 12px 18px!important;overflow-y:auto!important;overflow-x:hidden!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::before,
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::after{left:var(--dl-left-landscape)!important;right:0!important}
  body.driverlog-pro-web:not(.auth-locked) .dl-left-brand,
  body.driverlog-pro-web:not(.auth-locked) .dl-left-pulse,
  body.driverlog-pro-web:not(.auth-locked) .web-sidebar-foot,
  body.driverlog-pro-web:not(.auth-locked) .dl-calendar-nav{display:none!important}
  body.driverlog-pro-web:not(.auth-locked) .driver-brief:not(.open){display:none!important}
  body.driverlog-pro-web:not(.auth-locked) .driver-brief.open{display:block!important;position:fixed!important;right:8px!important;top:calc(var(--dl-header-landscape) + 6px)!important;bottom:8px!important;width:min(330px,calc(100vw - var(--dl-left-landscape) - 16px))!important;overflow-y:auto!important;z-index:160!important}
  body.driverlog-pro-web:not(.auth-locked) .hero-art,.driverlog-hero-scene{opacity:.28!important;max-width:38%!important}
}

/* Portrait phone/tablet + ordinary narrow browser: sticky header + safe bottom navigation. */
@media (max-width:899px){
  body.driverlog-pro-web:not(.auth-locked){padding-bottom:calc(var(--dl-bottom-nav) + var(--dl-safe-bottom))!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell{min-height:100dvh!important;height:auto!important;padding:0!important;overflow:visible!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header{position:sticky!important;left:auto!important;right:auto!important;top:0!important;width:100%!important;height:auto!important;min-height:58px!important;margin:0!important;padding:8px max(10px,var(--dl-safe-right)) 8px max(10px,var(--dl-safe-left))!important;z-index:90!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;max-width:none!important;margin:0!important;padding:12px max(10px,var(--dl-safe-right)) calc(var(--dl-bottom-nav) + var(--dl-safe-bottom) + 18px) max(10px,var(--dl-safe-left))!important;overflow:visible!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::before,
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::after{left:0!important;right:0!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;height:calc(var(--dl-bottom-nav) + var(--dl-safe-bottom))!important;padding:5px var(--dl-safe-right) max(5px,var(--dl-safe-bottom)) var(--dl-safe-left)!important;display:grid!important;align-items:stretch!important;gap:2px!important;overflow-y:hidden!important;z-index:120!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav>button{height:62px!important;min-height:62px!important;margin:0!important;padding:4px 2px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;white-space:normal!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav .nav-icon{font-size:18px!important;line-height:1.05!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav .nav-label{font-size:9px!important;line-height:1.05!important;white-space:nowrap!important;overflow:visible!important}
  body.driverlog-pro-web:not(.auth-locked) .dl-left-brand,
  body.driverlog-pro-web:not(.auth-locked) .dl-left-pulse,
  body.driverlog-pro-web:not(.auth-locked) .web-sidebar-foot,
  body.driverlog-pro-web:not(.auth-locked) .dl-calendar-nav{display:none!important}
  body.driverlog-pro-web:not(.auth-locked) .driver-brief:not(.open){display:none!important}
  body.driverlog-pro-web:not(.auth-locked) .driver-brief.open{display:block!important;position:fixed!important;left:max(8px,var(--dl-safe-left))!important;right:max(8px,var(--dl-safe-right))!important;top:max(68px,var(--dl-safe-top))!important;bottom:calc(var(--dl-bottom-nav) + var(--dl-safe-bottom) + 8px)!important;width:auto!important;max-width:none!important;overflow-y:auto!important;z-index:170!important}
  .header-row{width:100%!important;min-width:0!important;flex-wrap:nowrap!important;align-items:center!important}
  .header-row>div:first-child{min-width:0!important;flex:1 1 auto!important;max-width:calc(100% - 88px)!important}
  .brand{font-size:clamp(15px,4.4vw,19px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .sub{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .header-user{display:none!important}
  .header-signout{flex:0 0 auto!important;min-width:68px!important;min-height:42px!important;padding:8px 10px!important}
  .actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
  .actions button{flex:1 1 128px!important;min-width:0!important}
  .heroTop,.heroActions,.drill-head{min-width:0!important}
  .card,.hero,.drill-shell{padding-left:clamp(12px,3vw,16px)!important;padding-right:clamp(12px,3vw,16px)!important}
  .modal,.shift-start-card,.auth-card,[role="dialog"]{max-width:calc(100vw - var(--dl-safe-left) - var(--dl-safe-right) - 20px)!important;max-height:calc(100dvh - var(--dl-safe-top) - var(--dl-safe-bottom) - 20px)!important;overflow-y:auto!important}
}
@media (min-width:610px) and (max-width:899px){
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{grid-template-columns:repeat(8,minmax(0,1fr))!important;overflow-x:hidden!important}
}
@media (max-width:609px){
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{grid-auto-flow:column!important;grid-auto-columns:72px!important;grid-template-columns:none!important;justify-content:start!important;overflow-x:auto!important;scroll-snap-type:x proximity!important;scrollbar-width:none!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav::-webkit-scrollbar{display:none!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav>button{scroll-snap-align:center!important}
}
@media (max-width:430px){
  .hero h1,.hero.compact h1{font-size:clamp(22px,7vw,28px)!important}
  .heroTop>div:first-child{max-width:70%!important}
  .metric{padding:10px!important}
  .metric b{font-size:clamp(17px,5.6vw,21px)!important}
  .formgrid,.signup-grid{grid-template-columns:1fr!important}
  .formgrid .full,.signup-grid .full{grid-column:auto!important}
}
@media (max-width:360px){
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{grid-auto-columns:68px!important}
  .grid,.vehicle-smart-grid{grid-template-columns:1fr!important}
}

/* Short-height laptops: preserve real click targets; remove low-value rail density instead of crushing buttons. */
@media (min-width:1280px) and (pointer:fine) and (max-height:760px){
  body.driverlog-pro-web:not(.auth-locked) .dl-left-pulse{display:none!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{padding-top:10px!important;padding-bottom:10px!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav>button{min-height:40px!important;padding-top:6px!important;padding-bottom:6px!important}
  body.driverlog-pro-web:not(.auth-locked) .dl-left-brand{margin-bottom:6px!important}
}

/* Keyboard / visual viewport resilience for authentication and dialogs. */
.auth-gate{height:var(--dl-visual-height,100dvh)!important;min-height:var(--dl-visual-height,100dvh)!important;padding-top:max(16px,var(--dl-safe-top))!important;padding-bottom:max(16px,var(--dl-safe-bottom))!important}
.auth-card{max-height:calc(var(--dl-visual-height,100dvh) - var(--dl-safe-top) - var(--dl-safe-bottom) - 24px)!important;overflow-y:auto!important;overscroll-behavior:contain!important}

/* Reduce decorative competition on constrained/accessible displays without making the site dull. */
@media (max-height:520px),(max-width:390px){
  .driverlog-watermark,.community-watermark,.world-watermark{opacity:.035!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  #appShell>nav,.driver-brief,.dl-brief-toggle{display:none!important}
  #appShell,#appShell>main{position:static!important;padding:0!important;margin:0!important;width:auto!important;height:auto!important;overflow:visible!important}
}

/* Final landscape override must follow the general <=899px rules in the cascade. */
@media (min-width:700px) and (max-width:899px) and (orientation:landscape) and (max-height:520px){
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked){padding-bottom:0!important}
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) #appShell{height:100dvh!important;min-height:100dvh!important;padding:0 0 0 var(--dl-left-landscape)!important;overflow:hidden!important}
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) #appShell>nav{position:fixed!important;left:0!important;top:0!important;bottom:0!important;right:auto!important;width:var(--dl-left-landscape)!important;height:100dvh!important;padding:5px 5px max(5px,var(--dl-safe-bottom))!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:2px!important;overflow-y:auto!important;overflow-x:hidden!important;border-top:0!important;border-right:1px solid #cbd5e1!important;z-index:120!important}
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) #appShell>nav>button{width:100%!important;min-width:0!important;min-height:44px!important;height:44px!important;flex:0 0 44px!important;padding:3px 2px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important}
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) #appShell>nav .nav-icon{font-size:15px!important;line-height:1!important}
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) #appShell>nav .nav-label{font-size:8.5px!important;line-height:1!important;white-space:nowrap!important}
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) #appShell>header{position:fixed!important;left:var(--dl-left-landscape)!important;right:0!important;top:0!important;width:auto!important;height:var(--dl-header-landscape)!important;min-height:var(--dl-header-landscape)!important;padding:6px 10px!important;margin:0!important;z-index:110!important}
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) #appShell>main{position:fixed!important;left:var(--dl-left-landscape)!important;right:0!important;top:var(--dl-header-landscape)!important;bottom:0!important;width:auto!important;max-width:none!important;height:auto!important;margin:0!important;padding:10px 12px 18px!important;overflow-y:auto!important;overflow-x:hidden!important}
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) #appShell>main::before,
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) #appShell>main::after{left:var(--dl-left-landscape)!important;right:0!important}
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) .dl-left-brand,
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) .dl-left-pulse,
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) .web-sidebar-foot,
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) .dl-calendar-nav{display:none!important}
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) .driver-brief:not(.open){display:none!important}
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) .driver-brief.open{display:block!important;position:fixed!important;left:auto!important;right:8px!important;top:calc(var(--dl-header-landscape) + 6px)!important;bottom:8px!important;width:min(330px,calc(100vw - var(--dl-left-landscape) - 16px))!important;overflow-y:auto!important;z-index:170!important}
}

/* Mobile controls are comfortably tappable even when a browser reports a fine pointer. */
@media (max-width:899px){
  .header-signout{min-height:42px!important}
  .home-actions button,.actions button,.smallbtn{min-height:42px}
  .password-eye{min-width:40px!important;min-height:40px!important}
}
@media (min-width:700px) and (max-width:899px) and (orientation:landscape) and (max-height:520px){
  body.driverlog-pro-web.dl-mode-phone-landscape:not(.auth-locked) #appShell>nav{
    height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
  }
}