/* Tawings Fleet – landing and sign-in screen (v8).
   Styles only #login.tl, so nothing else in the app is affected. */
#login.tl{
  --n900:#08122A; --n800:#0E1C3D; --n700:#16264A; --n500:#2A4278;
  --g500:#D9A132; --g400:#E8B652; --g300:#F3CF85;
  --cream:#FBF8F1; --cream2:#F3EEE2; --ink:#14203A; --mut:#5E6A80; --err:#B3342B;
  position:fixed; inset:0; z-index:40; display:block; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; padding:0; color:#fff; font-family:"Barlow",system-ui,sans-serif;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(217,161,50,.20), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(42,66,120,.65), transparent 60%),
    linear-gradient(160deg,var(--n800) 0%,var(--n900) 55%,#050C1E 100%);
  opacity:1; visibility:visible; transition:opacity .55s ease, visibility 0s linear 0s;
}
/* the app hides the screen with the hidden attribute: fade it out instead of snapping */
#login.tl[hidden]{display:flex!important; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .55s ease, visibility 0s linear .55s}
/* while the app checks for an existing session, show the screen as a splash */
#login.tl.boot[hidden], #login.tl.welcome[hidden]{opacity:1; visibility:visible; transition:none}
html.tl-lock, html.tl-lock body{overflow:hidden}

/* background motion: a slow sheen like light across a freshly washed panel */
#login.tl .tl-sheen{position:fixed; inset:-20%; pointer-events:none; z-index:0;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.055) 49%, rgba(243,207,133,.08) 50%, rgba(255,255,255,.04) 51%, transparent 58%);
  transform:translateX(-60%); animation:tlSheen 9s ease-in-out 1.2s infinite}
@keyframes tlSheen{0%{transform:translateX(-60%)}55%,100%{transform:translateX(60%)}}
#login.tl .tl-grid{position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(ellipse at 30% 40%,#000 0%,transparent 70%); -webkit-mask-image:radial-gradient(ellipse at 30% 40%,#000 0%,transparent 70%)}
#login.tl .tl-swoosh{position:fixed; left:-8%; top:-6%; width:120%; height:auto; pointer-events:none; z-index:0; opacity:.9}
#login.tl .tl-swoosh path{fill:none; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:tlDraw 2.4s cubic-bezier(.6,.05,.2,1) .2s forwards}
#login.tl .tl-swoosh path + path{animation-delay:.45s}
@keyframes tlDraw{to{stroke-dashoffset:0}}
#login.tl .tl-bubbles{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
#login.tl .tl-bubbles i{position:absolute; bottom:-30px; border-radius:50%; border:1px solid rgba(243,207,133,.35); background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),rgba(255,255,255,.02) 60%); animation:tlRise linear infinite}
@keyframes tlRise{0%{transform:translate(0,0) scale(.8);opacity:0}10%{opacity:.9}100%{transform:translate(30px,-110vh) scale(1.1);opacity:0}}

/* layout */
#login.tl .tl-page{position:relative; z-index:1; min-height:100%; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center;
  gap:clamp(24px,5vw,72px); max-width:1240px; margin:0 auto; box-sizing:border-box;
  padding:max(40px,env(safe-area-inset-top,0px)) max(40px,env(safe-area-inset-right,0px)) max(32px,env(safe-area-inset-bottom,0px)) max(40px,env(safe-area-inset-left,0px))}

/* hero */
#login.tl .tl-hero{min-width:0}
#login.tl .tl-eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--g300);
  padding:7px 14px 7px 10px; border:1px solid rgba(243,207,133,.28); border-radius:99px; background:rgba(217,161,50,.08)}
#login.tl .tl-eyebrow b{width:8px; height:8px; border-radius:50%; background:var(--g400); box-shadow:0 0 0 4px rgba(232,182,82,.18); animation:tlPulse 2.4s ease-in-out infinite}
@keyframes tlPulse{50%{box-shadow:0 0 0 8px rgba(232,182,82,0)}}
#login.tl h1.tl-h1{font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.005em; line-height:.92;
  font-size:clamp(46px,7.2vw,104px); margin:22px 0 18px; color:#fff; text-wrap:balance}
#login.tl h1.tl-h1 span{display:block; opacity:0; transform:translateY(18px); animation:tlUp .8s cubic-bezier(.2,.8,.2,1) forwards}
#login.tl h1.tl-h1 span:nth-child(2){animation-delay:.12s}
#login.tl h1.tl-h1 span:nth-child(3){animation-delay:.24s; background:linear-gradient(90deg,var(--g300),var(--g500) 60%,#B97E16); -webkit-background-clip:text; background-clip:text; color:transparent}
@keyframes tlUp{to{opacity:1; transform:none}}
#login.tl .tl-lead{font-size:clamp(16px,1.35vw,19px); line-height:1.55; color:rgba(255,255,255,.74); max-width:520px; margin:0 0 30px; opacity:0; animation:tlUp .8s .36s forwards}
#login.tl .tl-feats{list-style:none; margin:0 0 34px; padding:0; display:grid; gap:14px; max-width:520px}
#login.tl .tl-feats li{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center; opacity:0; animation:tlUp .7s forwards}
#login.tl .tl-feats li:nth-child(1){animation-delay:.48s} #login.tl .tl-feats li:nth-child(2){animation-delay:.58s} #login.tl .tl-feats li:nth-child(3){animation-delay:.68s}
#login.tl .tl-feats .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(145deg,rgba(232,182,82,.22),rgba(232,182,82,.06)); border:1px solid rgba(243,207,133,.25); color:var(--g300)}
#login.tl .tl-feats .ic svg{width:22px; height:22px}
#login.tl .tl-feats b{display:block; font-weight:600; font-size:16px; color:#fff}
#login.tl .tl-feats small{display:block; font-size:14px; color:rgba(255,255,255,.6); margin-top:1px}
#login.tl .tl-truck{display:block; width:100%; max-width:520px; height:auto; color:var(--g400); opacity:.95}
#login.tl .tl-truck .ln{fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:tlDraw 2.6s cubic-bezier(.5,0,.2,1) .6s forwards}
#login.tl .tl-truck .soft{stroke:rgba(255,255,255,.22)}
#login.tl .tl-truck .drop{fill:var(--g300); opacity:0; animation:tlDrop 2.2s ease-in infinite}
#login.tl .tl-truck .spark{fill:#fff; opacity:0; transform-box:fill-box; transform-origin:center; animation:tlTwinkle 3.2s ease-in-out infinite}
@keyframes tlDrop{0%{opacity:0; transform:translateY(-8px)}15%{opacity:.95}100%{opacity:0; transform:translateY(46px)}}
@keyframes tlTwinkle{0%,100%{opacity:0; transform:scale(.4)}45%{opacity:1; transform:scale(1)}}

/* sign-in card */
#login.tl .tl-side{min-width:0; display:grid; justify-items:center; gap:18px}
#login.tl form#loginForm.tl-card{
  width:100%; max-width:420px; box-sizing:border-box; display:grid; gap:16px; margin:0;
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream2) 100%); color:var(--ink);
  border:1px solid rgba(255,255,255,.6); border-radius:22px; padding:30px 28px 24px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 30px 80px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(217,161,50,.18), 0 0 120px -30px rgba(217,161,50,.45);
  position:relative; opacity:0; transform:translateY(22px) scale(.985); animation:tlCard .9s cubic-bezier(.2,.8,.2,1) .25s forwards}
@keyframes tlCard{to{opacity:1; transform:none}}
#login.tl form#loginForm.tl-card::before{content:""; position:absolute; left:28px; right:28px; top:0; height:3px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,transparent,var(--g500),transparent)}
#login.tl .tl-logo{display:flex; justify-content:center; padding:4px 0 2px}
#login.tl .tl-logo img{height:64px; width:auto; display:block}
#login.tl .tl-hello{text-align:center}
#login.tl .tl-hello h2{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:30px; letter-spacing:.02em; text-transform:uppercase; color:var(--n700); margin:0; line-height:1}
#login.tl .tl-hello p{margin:6px 0 0; color:var(--mut); font-size:14.5px}
#login.tl .tl-field{display:grid; gap:6px}
#login.tl .tl-field > span.tl-lab{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); display:flex; justify-content:space-between; align-items:baseline}
#login.tl .tl-field > span.tl-lab a{letter-spacing:0; text-transform:none; font-weight:600; color:var(--n500); text-decoration:none; cursor:pointer}
#login.tl .tl-field > span.tl-lab a:hover{text-decoration:underline}
#login.tl .tl-in{position:relative; display:flex; align-items:center}
#login.tl .tl-in > svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:#8A93A6; pointer-events:none}
#login.tl .tl-in input{width:100%; box-sizing:border-box; font:500 17px "Barlow",system-ui,sans-serif; color:var(--ink); background:#fff; border:1.5px solid #DCD5C4; border-radius:12px;
  padding:14px 14px 14px 44px; outline:none; transition:border-color .2s, box-shadow .2s; text-transform:none; letter-spacing:0}
#login.tl .tl-in input:focus{border-color:var(--g500); box-shadow:0 0 0 4px rgba(217,161,50,.18)}
#login.tl .tl-in input#lPin{letter-spacing:.42em; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:19px; padding-right:52px}
#login.tl .tl-in input#lPin::placeholder{letter-spacing:.1em; font-family:"Barlow",sans-serif; font-size:16px; color:#A9AFBC}
#login.tl .tl-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; border-radius:10px; background:transparent; color:#7A8396; display:grid; place-items:center; cursor:pointer; padding:0}
#login.tl .tl-eye:hover{background:rgba(22,38,74,.06)}
#login.tl .tl-eye svg{width:20px; height:20px}
#login.tl .tl-dots{display:flex; gap:7px; justify-content:center; height:8px; margin-top:4px}
#login.tl .tl-dots i{width:8px; height:8px; border-radius:50%; background:#E2DBCB; transition:background .2s, transform .2s}
#login.tl .tl-dots i.on{background:var(--g500); transform:scale(1.15)}
#login.tl .tl-dots i.opt{background:transparent; box-shadow:inset 0 0 0 1.5px #E2DBCB}
#login.tl .tl-dots i.opt.on{background:var(--g500); box-shadow:none}
#login.tl button#lBtn{position:relative; width:100%; border:0; border-radius:12px; cursor:pointer; padding:16px 18px; margin-top:2px;
  font:700 18px "Barlow Condensed",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,#1E3466,var(--n700)); box-shadow:0 10px 24px -10px rgba(22,38,74,.8), inset 0 1px 0 rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; gap:10px; overflow:hidden; transition:transform .15s, box-shadow .2s}
#login.tl button#lBtn:hover{transform:translateY(-1px); box-shadow:0 14px 28px -10px rgba(22,38,74,.9), inset 0 1px 0 rgba(255,255,255,.12)}
#login.tl button#lBtn:active{transform:translateY(0)}
#login.tl button#lBtn svg{width:20px; height:20px; color:var(--g400); transition:transform .2s}
#login.tl button#lBtn:hover svg{transform:translateX(3px)}
#login.tl button#lBtn::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%); transform:translateX(-100%)}
#login.tl button#lBtn:hover::after{transform:translateX(100%); transition:transform .8s}
#login.tl button#lBtn:disabled{cursor:progress; opacity:1}
#login.tl button#lBtn:disabled .tl-btxt{opacity:.0}
#login.tl button#lBtn:disabled svg{opacity:0}
#login.tl button#lBtn:disabled::before{content:""; position:absolute; width:22px; height:22px; border-radius:50%; border:2.5px solid rgba(255,255,255,.25); border-top-color:var(--g400); animation:tlSpin .8s linear infinite}
@keyframes tlSpin{to{transform:rotate(360deg)}}
#login.tl #lMsg{margin:0; min-height:0; font-size:14px; text-align:center; color:var(--err); font-weight:600}
#login.tl #lMsg:empty{display:none}
#login.tl #lMsg:not(:empty){background:#FBE6E3; border:1px solid #F1C3BD; border-radius:10px; padding:10px 12px}
#login.tl .tl-card.shake{animation:tlShake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes tlShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
#login.tl .tl-meta{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--mut); border-top:1px solid #E6DFCF; padding-top:14px}
#login.tl .tl-meta span{display:inline-flex; align-items:center; gap:6px}
#login.tl .tl-meta svg{width:14px; height:14px}
#login.tl .tl-net i{width:7px; height:7px; border-radius:50%; background:#2E9B62; box-shadow:0 0 0 3px rgba(46,155,98,.18)}
#login.tl .tl-net.off i{background:#C2412F; box-shadow:0 0 0 3px rgba(194,65,47,.18)}
#login.tl .tl-help{font-size:13px; color:rgba(255,255,255,.62); text-align:center; max-width:420px; margin:0}
#login.tl .tl-help b{color:rgba(255,255,255,.88); font-weight:600}
#login.tl .tl-foot{grid-column:1/-1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12.5px; color:rgba(255,255,255,.45); border-top:1px solid rgba(255,255,255,.08); padding-top:18px; margin-top:8px}

/* splash (checking session) and welcome states */
#login.tl .tl-wait, #login.tl .tl-welcome{display:none; text-align:center; padding:14px 0 8px}
#login.tl .tl-wait i{display:block; width:34px; height:34px; margin:6px auto 14px; border-radius:50%; border:3px solid #E6DFCF; border-top-color:var(--g500); animation:tlSpin .9s linear infinite}
#login.tl .tl-wait p, #login.tl .tl-welcome p{margin:0; color:var(--mut); font-size:14.5px}
#login.tl .tl-welcome b{display:block; font-family:"Barlow Condensed",sans-serif; font-size:30px; text-transform:uppercase; letter-spacing:.02em; color:var(--n700); margin-bottom:4px}
#login.tl .tl-welcome svg{width:48px; height:48px; color:#2E9B62; margin:4px auto 10px; display:block}
#login.tl .tl-welcome svg path{stroke-dasharray:1; stroke-dashoffset:1; animation:tlDraw .6s .1s ease-out forwards}
#login.tl .tl-form{display:grid; gap:16px}
#login.tl.boot .tl-form, #login.tl.welcome .tl-form{display:none}
#login.tl.boot .tl-wait{display:block}
#login.tl.welcome .tl-welcome{display:block}

/* tablets and phones */
@media (max-width:900px){
  #login.tl .tl-page{grid-template-columns:1fr; gap:22px; align-content:start;
    padding:max(26px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) max(22px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
  #login.tl .tl-hero{text-align:left}
  #login.tl h1.tl-h1{font-size:clamp(40px,11.5vw,68px); margin:16px 0 10px}
  #login.tl .tl-lead{font-size:15.5px; margin-bottom:14px}
  #login.tl .tl-feats{display:none}
  #login.tl .tl-truck{max-width:340px; margin:4px 0 -6px auto; opacity:.9}
  #login.tl form#loginForm.tl-card{max-width:520px; padding:24px 20px 20px; border-radius:20px}
  #login.tl .tl-logo img{height:54px}
  #login.tl .tl-swoosh{width:190%; left:-45%; top:-2%}
}
@media (max-width:600px){
  #login.tl .tl-truck{display:none}
  #login.tl h1.tl-h1{font-size:clamp(36px,10.5vw,52px); margin:14px 0 8px}
  #login.tl .tl-lead{font-size:15px; line-height:1.45; margin-bottom:4px}
  #login.tl .tl-eyebrow{font-size:12.5px; padding:5px 12px 5px 9px}
}
@media (max-width:380px){
  #login.tl h1.tl-h1{font-size:38px}
  #login.tl .tl-hello h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  #login.tl *, #login.tl *::before, #login.tl *::after{animation-duration:.01ms!important; animation-iteration-count:1!important; animation-delay:0s!important; transition:none!important}
  #login.tl .tl-sheen, #login.tl .tl-bubbles{display:none}
}

/* ---------- v9: fit the screen ----------
   Sizes follow the screen height as well as its width, decoration steps aside on short screens,
   and landing.js applies a final gentle zoom (--tlz) if anything would still need scrolling. */
#login.tl{display:flex!important; flex-direction:column}
#login.tl .tl-page{min-height:0; flex:0 0 auto; margin:auto; width:100%; zoom:var(--tlz,1);
  padding-top:max(clamp(14px,4vh,40px),env(safe-area-inset-top,0px)); padding-bottom:max(clamp(12px,3vh,32px),env(safe-area-inset-bottom,0px));
  row-gap:clamp(10px,2.2vh,22px)}
#login.tl h1.tl-h1{font-size:clamp(34px,min(7.2vw,9.6vh),104px); margin:clamp(10px,2.4vh,22px) 0 clamp(8px,1.8vh,18px)}
#login.tl .tl-lead{margin-bottom:clamp(10px,2.6vh,30px)}
#login.tl .tl-feats{gap:clamp(8px,1.5vh,14px); margin-bottom:clamp(10px,2.6vh,34px)}
#login.tl .tl-feats .ic{width:clamp(34px,5vh,44px); height:clamp(34px,5vh,44px)}
#login.tl .tl-truck{max-height:clamp(70px,19vh,190px); width:auto; max-width:min(520px,100%)}
#login.tl .tl-side{gap:clamp(10px,1.8vh,18px)}
#login.tl form#loginForm.tl-card{padding:clamp(16px,3vh,30px) clamp(18px,2.4vw,28px) clamp(14px,2.4vh,24px); gap:clamp(10px,1.7vh,16px)}
#login.tl .tl-form{gap:clamp(10px,1.7vh,16px)}
#login.tl .tl-logo img{height:clamp(40px,6.4vh,64px)}
#login.tl .tl-hello h2{font-size:clamp(22px,3.4vh,30px)}
#login.tl .tl-in input{padding-top:clamp(10px,1.5vh,14px); padding-bottom:clamp(10px,1.5vh,14px)}
#login.tl button#lBtn{padding-top:clamp(11px,1.9vh,16px); padding-bottom:clamp(11px,1.9vh,16px)}
#login.tl .tl-meta{padding-top:clamp(8px,1.4vh,14px)}
#login.tl .tl-foot{padding-top:clamp(8px,1.6vh,18px); margin-top:0}
/* computers: short screens drop the drawing, then the feature list */
@media (min-width:901px) and (max-height:820px){ #login.tl .tl-truck{display:none} }
@media (min-width:901px) and (max-height:640px){ #login.tl .tl-feats{display:none} }
/* phones and tablets */
@media (max-width:900px){
  #login.tl .tl-page{row-gap:clamp(10px,1.8vh,18px); padding-top:max(clamp(14px,2.6vh,26px),env(safe-area-inset-top,0px))}
  #login.tl h1.tl-h1{font-size:clamp(30px,min(11vw,6vh),68px); margin:clamp(8px,1.6vh,16px) 0 clamp(6px,1.2vh,10px)}
  #login.tl .tl-foot{display:none}
  #login.tl .tl-help{font-size:12.5px}
  #login.tl .tl-truck{max-height:16vh}
}
@media (max-width:900px) and (max-height:900px){ #login.tl .tl-truck{display:none} }
@media (max-width:900px) and (max-height:760px){ #login.tl .tl-lead{display:none} #login.tl .tl-eyebrow{display:none} }
@media (max-width:900px) and (max-height:620px){ #login.tl .tl-help{display:none} }
/* phones turned sideways: put the words beside the card */
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  #login.tl .tl-page{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center}
  #login.tl .tl-lead,#login.tl .tl-eyebrow{display:none}
  #login.tl h1.tl-h1{font-size:clamp(26px,9vh,40px)}
}