/* ==========================================================================
   Live MyGeotab-style widgets (.lw*) — animated recreations of the real
   dashboard crops. Injected by js/widgets.js into [data-lw] containers.
   Base state = final, correct, static (no-JS / reduced-motion safe).
   html.motion adds entrance + subtle "live" loops. .lw--in plays entrance.
   ========================================================================== */
.lw, .lw * { box-sizing: border-box; }
.lw {
  --lw-blue: #0084C2;
  --lw-navy: #25477B;
  --lw-amber: #F2A32C;
  --lw-red: #E15540;
  --lw-link: #2A6FC0;
  --lw-slate: #3F4E5E;
  --lw-ink: #23324a;
  --lw-mut: #6b7a90;
  --lw-line: #E7ECF2;
  --ease: cubic-bezier(0.3, 0.75, 0.18, 1);
  color: var(--lw-ink);
  border-radius: 12px;
  padding: 18px;
  background:
    radial-gradient(120% 90% at 12% 0%, #eaf4fc 0%, rgba(234,244,252,0) 60%),
    linear-gradient(150deg, #e9f3fb 0%, #f6fafe 46%, #e8f2fb 100%);
  border: 1px solid var(--gray-100);
  font-family: var(--font);
}
.lw__card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(18, 35, 63, 0.14);
  overflow: hidden;
  transition: box-shadow .28s ease, transform .28s ease;
}
.lw:hover .lw__card { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(18, 35, 63, 0.2); }
/* Guard: when a widget renders inside a .step card, site.css's card typography
   (.step > b / .step > p, incl. .on-dark variants) must NOT restyle widget internals —
   site.css scopes those to direct children, and .lw sets its own base color above so
   nothing inherits a dark band's white text. These same-specificity resets (later
   stylesheet wins) cover any remaining page-level b/p rules; the widget-specific
   rules below still win over the guard. */
.lw b { display: inline; font-size: inherit; line-height: inherit; color: inherit; margin: 0; }
.lw p { font-size: inherit; line-height: inherit; color: inherit; margin: 0; }
.lw-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--lw-navy); }
.lw-ico svg { width: 100%; height: 100%; }
.lw-dots { display: inline-flex; flex-direction: column; gap: 2.5px; margin-left: auto; padding: 4px; }
.lw-dots i { width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--lw-navy); display: block; }

/* live pulse dot */
.lw-livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); margin-left: 6px; vertical-align: middle; }
html.motion .lw-livedot { box-shadow: 0 0 0 0 rgba(31, 138, 91, .5); animation: lwPulse 2s infinite; }
@keyframes lwPulse { 70% { box-shadow: 0 0 0 6px rgba(31, 138, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0); } }

/* chart card shared */
.lw-chart__card { padding: 15px 16px 14px; }
.lw-chart__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lw-chart__head b { font-size: 13.5px; font-weight: 700; color: var(--lw-ink); letter-spacing: -0.01em; }
.lw-chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.lw-ax { stroke: var(--lw-line); stroke-width: 1; }
.lw-axtxt { fill: #9aa6b6; font-size: 9px; font-family: var(--font); }
.lw-axlab { fill: #7b8798; font-size: 9.5px; font-weight: 600; font-family: var(--font); }
.lw-axtxt--s { font-size: 7.5px; }
.lw-axlab--s { font-size: 7.5px; }
.lw-sleg { fill: #4a5a70; font-size: 8.5px; font-weight: 600; font-family: var(--font); }
.lw-vlab { fill: var(--lw-ink); font-size: 10px; font-weight: 700; font-family: var(--font); font-feature-settings: "tnum" 1; }
.lw-vlab--in { fill: #fff; font-size: 7px; font-weight: 600; }
.lw-vlab--bar { fill: #14304F; font-size: 9.5px; }

/* vertical bars grow from baseline */
.lw-bar { transform-box: fill-box; transform-origin: 50% 100%; }
html.motion .lw-bar { transform: scaleY(0); }
html.motion .lw--in .lw-bar { transition: transform 1.15s var(--ease); transform: scaleY(1); }
html.motion .lw--in .lw-bar.d1 { transition-delay: .05s; }
html.motion .lw--in .lw-bar.d2 { transition-delay: .16s; }
html.motion .lw--in .lw-bar.d3 { transition-delay: .27s; }
html.motion .lw--in .lw-bar.d4 { transition-delay: .38s; }
html.motion .lw--in .lw-bar.d5 { transition-delay: .49s; }
html.motion .lw--in .lw-bar.d6 { transition-delay: .60s; }
html.motion .lw--in .lw-bar.d7 { transition-delay: .71s; }
/* horizontal bars grow from left */
.lw-hbar { transform-box: fill-box; transform-origin: 0% 50%; }
html.motion .lw-hbar { transform: scaleX(0); }
html.motion .lw--in .lw-hbar { transition: transform 1.1s var(--ease); transform: scaleX(1); }
html.motion .lw--in .lw-hbar.d1 { transition-delay: .04s; }
html.motion .lw--in .lw-hbar.d2 { transition-delay: .10s; }
html.motion .lw--in .lw-hbar.d3 { transition-delay: .16s; }
html.motion .lw--in .lw-hbar.d4 { transition-delay: .22s; }
html.motion .lw--in .lw-hbar.d5 { transition-delay: .28s; }
html.motion .lw--in .lw-hbar.d6 { transition-delay: .34s; }
html.motion .lw--in .lw-hbar.d7 { transition-delay: .40s; }
/* value labels fade after bars */
.lw-vlab, .lw-trenddot, .lw-trendlab { }
html.motion .lw-vlab, html.motion .lw-trendlab { opacity: 0; }
html.motion .lw--in .lw-vlab, html.motion .lw--in .lw-trendlab { transition: opacity .5s ease .55s; opacity: 1; }

/* dotted trend line draws */
.lw-trend { fill: none; stroke: var(--lw-amber); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.5 6; }
.lw-trend--navy { stroke: #2B5384; stroke-width: 2.6; stroke-dasharray: 0.5 4.5; }
html.motion .lw-trend { stroke-dashoffset: 220; opacity: .001; }
html.motion .lw--in .lw-trend { transition: stroke-dashoffset 1.85s var(--ease) .5s, opacity .01s linear .5s; stroke-dashoffset: 0; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lw-trend { stroke-dashoffset: 0 !important; } }

/* ---- live-position card ---- */
.lw-vpos .lw__card { padding: 16px 18px; }
.lw-vpos__row { display: flex; gap: 13px; align-items: flex-start; }
.lw-vpos__row + .lw-vpos__row { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--lw-line); }
.lw-vpos .lw-ico { width: 25px; height: 24px; margin-top: 1px; }
.lw-vpos__name { font-size: 16px; font-weight: 800; color: var(--lw-ink); line-height: 1.1; }
.lw-vpos__meta { font-size: 12.5px; color: #33455C; margin-top: 4px; line-height: 1.35; font-feature-settings: "tnum" 1; }
.lw-vpos__meta b { font-weight: 800; color: var(--lw-navy); }
.lw-vpos__grp { font-size: 11.5px; color: #9aa6b6; margin-top: 3px; }
.lw-vpos__addr { font-size: 13.5px; font-weight: 700; color: var(--lw-ink); line-height: 1.3; }
.lw-vpos .lw-ico.pin { color: var(--lw-navy); }

/* ---- trip summary ---- */
.lw-trip__hd { display: flex; align-items: center; gap: 10px; background: var(--lw-slate); color: #fff; padding: 13px 14px 8px; }
.lw-trip__hd > span:first-child { font-size: 13px; font-weight: 500; }
.lw-trip__hd b { font-weight: 800; margin-left: 3px; }
.lw-trip__btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--lw-navy); font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 6px; white-space: nowrap; }
.lw-trip__btn svg { width: 13px; height: 13px; }
.lw-trip__totals { display: grid; grid-template-columns: max-content auto; justify-content: start; gap: 4px 22px; padding: 7px 14px 14px; background: var(--lw-slate); color: rgba(255,255,255,.75); font-size: 11.5px; }
.lw-trip__totals b { color: #fff; font-weight: 700; text-align: left; font-feature-settings: "tnum" 1; }
.lw-trip__stop { display: flex; align-items: stretch; }
.lw-trip__num { flex: none; width: 28px; background: var(--lw-blue); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.lw-trip__body { flex: 1; padding: 12px 14px 12px 34px; position: relative; }
.lw-trip__line { position: absolute; left: 15px; top: 0; bottom: 0; width: 0; border-left: 2px dashed #8FB8DC; }
.lw-trip__dot { position: absolute; left: -24px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: #2E7DC2; box-shadow: 0 0 0 2px #fff; }
html.motion .lw-trip__dot { animation: lwPulseBlue 2.2s infinite; }
@keyframes lwPulseBlue { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(46,125,194,.45); } 70% { box-shadow: 0 0 0 2px #fff, 0 0 0 9px rgba(46,125,194,0); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(46,125,194,0); } }
.lw-trip__addr { font-size: 11.5px; font-weight: 600; color: var(--lw-link); margin-bottom: 8px; line-height: 1.35; }
.lw-trip__grid { display: grid; grid-template-columns: 86px auto; justify-content: start; gap: 4px 8px; font-size: 11px; color: var(--lw-mut); position: relative; }
.lw-trip__grid b { color: var(--lw-link); font-weight: 700; text-align: left; font-feature-settings: "tnum" 1; }
html.motion .lw-trip__stop, html.motion .lw-trip__totals b { }
html.motion .lw--in .lw-trip__num { animation: lwFillBar .85s var(--ease); }
@keyframes lwFillBar { from { opacity: .3; } to { opacity: 1; } }

/* ---- safety scorecard (donut) ---- */
.lw-score .lw__card { padding: 15px 16px 16px; display: flex; flex-direction: column; }
.lw-score__head { display: flex; align-items: center; margin-bottom: 4px; }
.lw-score__head b { font-size: 13.5px; font-weight: 700; color: var(--lw-ink); }
.lw-donut { display: block; margin: 2px 0 0; align-self: center; width: 168px; height: 168px; }
.lw-donut circle { fill: none; stroke-width: 16; transform: rotate(-90deg); transform-origin: 50% 50%; }
.lw-donut__ring { transform-origin: 50% 50%; }
html.motion .lw-donut__ring { opacity: 0; transform: scale(.82) rotate(-28deg); }
html.motion .lw--in .lw-donut__ring { transition: opacity 1s var(--ease) .1s, transform 1.2s var(--ease) .1s; opacity: 1; transform: none; }
.lw-score__lab { fill: var(--lw-navy); font-size: 6.6px; font-weight: 700; text-anchor: middle; font-family: var(--font); }
.lw-score__val { fill: var(--lw-ink); font-size: 15px; font-weight: 800; text-anchor: middle; font-family: var(--font); font-feature-settings: "tnum" 1; }
.lw-score__pct { fill: #fff; font-size: 6.2px; font-weight: 700; text-anchor: middle; font-family: var(--font); }
.lw-score__leg { display: grid; grid-template-columns: repeat(2, minmax(104px, max-content)); justify-content: center; gap: 6px 24px; margin-top: 12px; }
.lw-leg { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #4a5a70; }
.lw-leg i { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ---- rules list ---- */
.lw-rules .lw__card { padding: 6px 0; }
.lw-rules .lw-rp__hd { padding: 9px 15px; border-bottom: 1px solid #f1f4f8; }
.lw-rule { display: flex; align-items: center; gap: 11px; padding: 8px 15px; position: relative; }
.lw-rule + .lw-rule { border-top: 1px solid #f1f4f8; }
.lw-rule i { width: 7px; height: 15px; border-radius: 1.5px; flex: none; }
.lw-rule__txt b { display: block; font-size: 12px; font-weight: 700; color: var(--lw-link); line-height: 1.2; }
.lw-rule__txt span { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; color: #aab4c2; margin-top: 1px; }
.lw-rule__badge { margin-left: auto; font-size: 9.5px; font-weight: 800; color: #fff; background: var(--lw-red); border-radius: 999px; padding: 2px 7px; opacity: 0; transform: scale(.6); }
html.motion .lw--in .lw-rule { opacity: 0; transform: translateX(-6px); animation: lwRowIn .8s var(--ease) forwards; }
html.motion .lw--in .lw-rule:nth-child(2) { animation-delay: .04s; }
html.motion .lw--in .lw-rule:nth-child(3) { animation-delay: .10s; }
html.motion .lw--in .lw-rule:nth-child(4) { animation-delay: .16s; }
html.motion .lw--in .lw-rule:nth-child(5) { animation-delay: .22s; }
html.motion .lw--in .lw-rule:nth-child(6) { animation-delay: .28s; }
html.motion .lw--in .lw-rule:nth-child(7) { animation-delay: .34s; }
html.motion .lw--in .lw-rule:nth-child(8) { animation-delay: .40s; }
html.motion .lw--in .lw-rule:nth-child(9) { animation-delay: .46s; }
html.motion .lw--in .lw-rule:nth-child(10) { animation-delay: .52s; }
@keyframes lwRowIn { to { opacity: 1; transform: translateX(0); } }
html.motion .lw-rule.live .lw-rule__badge { animation: lwBadge 4.85s var(--ease) infinite; }
@keyframes lwBadge { 0%, 55% { opacity: 0; transform: scale(.6); } 62%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }
/* scanning highlight */
.lw-rules__scan { position: absolute; left: 0; right: 0; height: 34px; pointer-events: none; background: linear-gradient(90deg, rgba(0,132,194,0) 0%, rgba(0,132,194,.09) 50%, rgba(0,132,194,0) 100%); opacity: 0; }
html.motion .lw--in .lw-rules__scan { animation: lwScan 5s linear 1s infinite; }
@keyframes lwScan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(280px); opacity: 0; } }

/* ---- work orders table ---- */
.lw-wo .lw__card { padding: 0; }
.lw-wo__tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; }
.lw-wo__tbl col.c1 { width: 48%; } .lw-wo__tbl col.c2 { width: 33%; } .lw-wo__tbl col.c3 { width: 19%; }
.lw-wo__tbl th { text-align: left; font-size: 8.5px; font-weight: 700; letter-spacing: .02em; color: #8b96a6; padding: 9px 8px; border-bottom: 1px solid var(--lw-line); text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-wo__tbl th:last-child, .lw-wo__tbl td:last-child { text-align: right; }
.lw-wo__tbl td { padding: 8px 10px; border-bottom: 1px solid #f2f5f8; vertical-align: middle; }
.lw-wo__tbl tr:last-child td { border-bottom: 0; }
.lw-wo__asset { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lw-wo__ic { width: 22px; height: 22px; border-radius: 50%; background: var(--lw-blue); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.lw-wo__ic svg { width: 12px; height: 12px; }
.lw-wo__asset > div { min-width: 0; }
.lw-wo__asset b { display: block; font-size: 11px; font-weight: 700; color: var(--lw-link); line-height: 1.15; }
.lw-wo__asset span { display: block; font-size: 8.5px; color: #a2acbb; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-wo__type { color: var(--lw-link); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-wo__sev { display: inline-block; font-size: 9.5px; font-weight: 800; color: var(--lw-red); background: rgba(225,85,64,.12); border-radius: 999px; padding: 2px 8px; }
html.motion .lw--in .lw-wo__tbl tbody tr { opacity: 0; transform: translateY(6px); animation: lwRowUp .8s var(--ease) forwards; }
html.motion .lw--in .lw-wo__tbl tbody tr:nth-child(1) { animation-delay: .08s; }
html.motion .lw--in .lw-wo__tbl tbody tr:nth-child(2) { animation-delay: .15s; }
html.motion .lw--in .lw-wo__tbl tbody tr:nth-child(3) { animation-delay: .22s; }
html.motion .lw--in .lw-wo__tbl tbody tr:nth-child(4) { animation-delay: .29s; }
html.motion .lw--in .lw-wo__tbl tbody tr:nth-child(5) { animation-delay: .36s; }
html.motion .lw--in .lw-wo__tbl tbody tr:nth-child(6) { animation-delay: .43s; }
@keyframes lwRowUp { to { opacity: 1; transform: translateY(0); } }

/* ---- mini live map (public-map) ---- */
.lw-map .lw__card { padding: 0; background: #eaeef2; }
.lw-map__svg { width: 100%; height: auto; display: block; }
.lw-map__road { stroke: #fff; stroke-linecap: round; fill: none; }
.lw-map__road-bg { stroke: #d7dee6; stroke-linecap: round; fill: none; }
.lw-map__green { fill: #d4e8cf; }
.lw-map__water { fill: #bcdcef; }
.lw-map__route { fill: none; stroke: var(--lw-navy); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
html.motion .lw-map__route { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.motion .lw--in .lw-map__route { animation: lwDraw 2s var(--ease) .25s forwards; }
@keyframes lwDraw { to { stroke-dashoffset: 0; } }
.lw-map__runner { fill: var(--lw-navy); stroke: #fff; stroke-width: 2.5; }
.lw-map__pin path { fill: var(--lw-blue); stroke: #fff; stroke-width: 2; }
.lw-map__pin circle { fill: #fff; }
.lw-map__warn { }
.lw-map__lbl { fill: #26364d; }
.lw-map__lbltxt { fill: #fff; font-size: 10px; font-weight: 700; font-family: var(--font); }
.lw-map__pop { position: absolute; top: 10px; right: 12px; left: 42%; background: #fff; border-radius: 9px; box-shadow: 0 6px 18px rgba(18,35,63,.2); padding: 8px 10px; }
.lw-map__pop .r { display: flex; gap: 8px; align-items: flex-start; }
.lw-map__pop .r + .r { margin-top: 5px; }
.lw-map__pop .lw-ico { width: 17px; height: 15px; margin-top: 1px; color: var(--lw-navy); }
.lw-map__pop b { display: block; font-size: 11.5px; font-weight: 800; color: var(--lw-ink); line-height: 1.15; }
.lw-map__pop small { display: block; font-size: 9px; color: #6b7a90; margin-top: 1px; line-height: 1.3; font-feature-settings: "tnum" 1; overflow-wrap: anywhere; }
.lw-map__pop .r:first-child small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-map__ctrls { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.lw-map__ctrls span { width: 26px; height: 26px; border-radius: 6px; background: #fff; box-shadow: 0 2px 6px rgba(18,35,63,.18); display: flex; align-items: center; justify-content: center; color: #55637a; }
.lw-map__ctrls span svg { width: 14px; height: 14px; }
.lw-map__live { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.94); border-radius: 999px; padding: 3px 9px 3px 8px; font-size: 10px; font-weight: 800; color: var(--success); box-shadow: 0 2px 6px rgba(18,35,63,.14); }
.lw-map__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
html.motion .lw-map__live i { animation: lwPulse 2s infinite; }

/* reduced motion: everything final, no loops */
@media (prefers-reduced-motion: reduce) {
  html.motion .lw-bar, html.motion .lw-hbar { transform: none !important; }
  html.motion .lw-vlab, html.motion .lw-trendlab { opacity: 1 !important; }
  html.motion .lw-donut__ring { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.motion .lw--in .lw-rule, html.motion .lw--in .lw-wo__tbl tbody tr { opacity: 1 !important; transform: none !important; animation: none !important; }
  html.motion .lw-rules__scan, html.motion .lw-rule.live .lw-rule__badge,
  html.motion .lw-livedot, html.motion .lw-trip__dot, html.motion .lw-map__live i { animation: none !important; }
  html.motion .lw-map__route { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ---- line chart (collision-trend) ---- */
.lw-line .lw__card { padding: 13px 15px 11px; }
.lw-line__ttl b { font-size: 12.5px; font-weight: 700; color: var(--lw-ink); }
.lw-line__ttl span { font-size: 10.5px; font-weight: 500; color: #8b96a6; margin-left: 4px; }
.lw-line__sub { display: flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--lw-mut); margin: 4px 0 3px; }
.lw-line__sub i { width: 7px; height: 7px; border-radius: 50%; background: #2E7DC2; }
.lw-line__row { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.lw-line__val { font-size: 17px; font-weight: 800; color: var(--lw-ink); font-feature-settings: "tnum" 1; }
.lw-chip { font-size: 9.5px; font-weight: 700; color: #44604F; background: #EDF2EE; border-radius: 999px; padding: 2.5px 9px; }
.lw-chip--dn { color: var(--success); background: rgba(31,138,91,.12); font-weight: 800; }
.lw-ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lw-ln--fleet { stroke: #2E86D8; stroke-width: 2.5; }
.lw-ln--bench { stroke: #E8934D; stroke-width: 2; stroke-dasharray: 3 3.5; }
.lw-ln--low { stroke: #3FA56B; stroke-width: 2; stroke-dasharray: 2 4; }
.lw-ln__area { fill: rgba(84,104,168,.10); stroke: none; }
html.motion .lw-line__plot { clip-path: inset(0 100% 0 0); }
html.motion .lw--in .lw-line__plot { transition: clip-path 11s var(--ease) .2s; clip-path: inset(0 0 0 0); }

/* ---- stacked bars (aggressive) ---- */
.lw-agg .lw__card { padding: 14px 15px 12px; }
.lw-agg__head { display: flex; align-items: center; margin-bottom: 2px; }
.lw-agg__head b { font-size: 12.5px; font-weight: 700; color: var(--lw-ink); }
.lw-stack { transform-box: fill-box; transform-origin: 50% 100%; }
html.motion .lw-stack { transform: scaleY(0); }
html.motion .lw--in .lw-stack { transition: transform 1.05s var(--ease); transform: scaleY(1); }
html.motion .lw--in .lw-stack.s1 { transition-delay: .05s; }
html.motion .lw--in .lw-stack.s2 { transition-delay: .13s; }
html.motion .lw--in .lw-stack.s3 { transition-delay: .21s; }
html.motion .lw--in .lw-stack.s4 { transition-delay: .29s; }
html.motion .lw--in .lw-stack.s5 { transition-delay: .37s; }


/* ---- EV recommendations table ---- */
.lw-ev .lw__card { padding: 0; }
.lw-ev__hd { padding: 11px 13px 10px; border-bottom: 2px solid var(--lw-blue); }
.lw-ev__hd b { display: block; font-size: 12.5px; font-weight: 700; color: var(--lw-navy); line-height: 1.2; }
.lw-ev__tog { display: flex; gap: 7px; margin-top: 8px; }
.lw-ev__tog span { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; color: #55637a; }
.lw-ev__cb { width: 12px; height: 12px; flex: none; }
.lw-ev__tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 10.5px; }
.lw-ev__tbl col.e1 { width: 30%; } .lw-ev__tbl col.e2 { width: 46%; } .lw-ev__tbl col.e3 { width: 24%; }
.lw-ev__tbl th { text-align: left; font-size: 8px; font-weight: 700; color: #5A6880; padding: 8px 10px; background: #E4E9F1; }
.lw-ev__tbl th:last-child, .lw-ev__tbl td:last-child { text-align: right; }
.lw-ev__tbl td { padding: 8px 10px; border-bottom: 1px solid #f2f5f8; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-ev__tbl tr:last-child td { border-bottom: 0; }
.lw-ev__veh { font-weight: 600; color: #35485E; }
.lw-ev__rec { color: #46566d; }
.lw-ev__sav { font-weight: 700; color: #2B3A4E; font-feature-settings: "tnum" 1; }
html.motion .lw--in .lw-ev__tbl tbody tr { opacity: 0; transform: translateY(6px); animation: lwRowUp .8s var(--ease) forwards; }
html.motion .lw--in .lw-ev__tbl tbody tr:nth-child(1) { animation-delay: .1s; }
html.motion .lw--in .lw-ev__tbl tbody tr:nth-child(2) { animation-delay: .18s; }
html.motion .lw--in .lw-ev__tbl tbody tr:nth-child(3) { animation-delay: .26s; }
html.motion .lw--in .lw-ev__tbl tbody tr:nth-child(4) { animation-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  html.motion .lw-line__plot { clip-path: none !important; transition: none !important; }
  html.motion .lw-stack { transform: none !important; }
  html.motion .lw--in .lw-ev__tbl tbody tr { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ==========================================================================
   Added widgets (July 8, 2026): trip-progress (Dump Truck callout), DVIR,
   HOS availability, safety (mobile), fleet savings, alert email. mph/mi only.
   ========================================================================== */

/* ---- trip progress (Dump Truck map callout) ---- */
.lw-tp__card { padding: 17px 18px 19px; }
.lw-tp__hd { font-size: 18px; font-weight: 800; color: var(--lw-navy); margin-bottom: 15px; letter-spacing: -0.01em; }
.lw-tp__row + .lw-tp__row { margin-top: 13px; }
.lw-tp__lbls { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: #33455C; margin-bottom: 6px; font-feature-settings: "tnum" 1; }
.lw-tp__track { height: 7px; border-radius: 999px; background: #E7ECF2; overflow: hidden; }
.lw-tp__fill { display: block; height: 100%; border-radius: 999px; width: var(--w); }
html.motion .lw-tp__fill { width: 0; }
html.motion .lw--in .lw-tp__fill { width: var(--w); transition: width 1.2s var(--ease); }
html.motion .lw--in .lw-tp__fill.d2 { transition-delay: .1s; }
html.motion .lw--in .lw-tp__fill.d3 { transition-delay: .2s; }
html.motion .lw--in .lw-tp__fill.d4 { transition-delay: .3s; }

/* ---- DVIR (Driver Vehicle Inspection Report) ---- */
.lw-dvir__card { padding: 16px 17px 17px; }
.lw-dvir__hd { font-size: 15px; font-weight: 800; color: var(--lw-navy); margin-bottom: 13px; letter-spacing: -0.01em; }
.lw-dvir__row + .lw-dvir__row { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--lw-line); }
.lw-dvir__veh { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; color: var(--lw-navy); }
.lw-dvir__veh .lw-ico { width: 22px; height: 20px; color: var(--lw-navy); }
.lw-dvir__line { display: flex; align-items: center; gap: 11px; margin-top: 9px; flex-wrap: wrap; }
.lw-dvir__badge { display: inline-flex; align-items: center; gap: 7px; background: #1F8A5B; color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px 5px 8px; border-radius: 6px; }
.lw-dvir__chk { width: 15px; height: 15px; flex: none; }
.lw-dvir__time { font-size: 12px; color: #6b7a90; font-feature-settings: "tnum" 1; }

/* ---- HOS availability ---- */
.lw-hos__card { padding: 15px 16px 8px; }
.lw-hos__hd { font-size: 13.5px; font-weight: 700; color: var(--lw-navy); margin-bottom: 8px; }
.lw-hos__row { display: flex; align-items: center; gap: 9px; padding: 8px 0; }
.lw-hos__row + .lw-hos__row { border-top: 1px solid #f1f4f8; }
.lw-hos__badge { flex: none; min-width: 30px; text-align: center; font-size: 9.5px; font-weight: 800; color: #fff; border-radius: 4px; padding: 3px 5px; letter-spacing: .02em; }
.lw-hos__badge.off { background: #55637a; }
.lw-hos__badge.d { background: #2E7D46; }
.lw-hos__badge.on { background: #E8A33D; }
.lw-hos__drv { font-size: 12px; font-weight: 700; color: var(--lw-ink); flex: none; }
.lw-hos__ico { width: 16px; height: 16px; flex: none; }
.lw-hos__txt { font-size: 11px; color: #6b7a90; line-height: 1.25; }

/* ---- safety (mobile driver app) ---- */
.lw-safm__card { padding: 0; }
.lw-safm__hero { padding: 18px 16px 14px; text-align: center; }
.lw-safm__chk { width: 46px; height: 46px; display: block; margin: 0 auto 10px; }
.lw-safm__risk { font-size: 19px; font-weight: 800; color: var(--lw-ink); }
.lw-safm__sub { font-size: 12px; color: #46566d; margin-top: 5px; }
.lw-safm__sub b { font-weight: 800; color: var(--lw-ink); }
.lw-safm__chip { display: inline-block; margin-top: 9px; font-size: 10.5px; font-weight: 700; color: #1F8A5B; background: rgba(31,138,91,.12); border-radius: 999px; padding: 3px 10px; }
.lw-safm__spark { width: 100%; height: 32px; display: block; margin: 10px 0 7px; overflow: visible; }
.lw-safm__you { fill: none; stroke: #2E86D8; stroke-width: 2; }
.lw-safm__top { fill: none; stroke: #8A9A2E; stroke-width: 1.6; stroke-dasharray: 3 3; }
.lw-safm__leg { display: flex; justify-content: center; gap: 16px; font-size: 10px; color: #55637a; }
.lw-safm__leg i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.lw-safm__leg .you { background: #2E86D8; }
.lw-safm__leg .top { background: #8A9A2E; }
.lw-safm__pfttl { font-size: 12px; font-weight: 700; color: #46566d; padding: 13px 16px 2px; background: #F4F6F9; margin-top: 4px; }
.lw-safm__pf { background: #F4F6F9; padding: 9px 16px; }
.lw-safm__pf:last-child { padding-bottom: 16px; }
.lw-safm__pfhd { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.lw-safm__pfname { font-size: 12.5px; font-weight: 700; color: var(--lw-ink); }
.lw-safm__tag { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.lw-safm__tag.risk { color: #C0392B; background: #FBE7E4; }
.lw-safm__tag.under { color: #9A6A1A; background: #FBEFD8; }
.lw-safm__tag.avg { color: #2A6FC0; background: #E5EFFA; }
.lw-safm__tag.best { color: #1F8A5B; background: #E1F1E9; }
.lw-safm__track { position: relative; height: 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #E3E9F0; margin-bottom: 9px; }
.lw-safm__fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; width: var(--w); }
.lw-safm__track.risk .lw-safm__fill { background: #C0392B; }
.lw-safm__track.under .lw-safm__fill { background: #C98A1E; }
.lw-safm__track.avg .lw-safm__fill { background: #2A6FC0; }
.lw-safm__track.best .lw-safm__fill { background: #1F8A5B; }
.lw-safm__mark { position: absolute; top: 100%; margin-top: 3px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #2E7D46; transform: translateX(-50%); }
html.motion .lw-safm__fill { width: 0; }
html.motion .lw--in .lw-safm__fill { width: var(--w); transition: width 1.2s var(--ease); }
html.motion .lw--in .lw-safm__fill.d2 { transition-delay: .08s; }
html.motion .lw--in .lw-safm__fill.d3 { transition-delay: .16s; }
html.motion .lw--in .lw-safm__fill.d4 { transition-delay: .24s; }

/* ---- fleet savings summary ---- */
.lw-sav__card { padding: 15px 16px 14px; }
.lw-sav__hd { display: flex; align-items: center; margin-bottom: 4px; }
.lw-sav__hd b { font-size: 13.5px; font-weight: 700; color: var(--lw-ink); }
.lw-sav__leg { display: flex; justify-content: center; gap: 18px; font-size: 10.5px; color: #55637a; margin-bottom: 13px; }
.lw-sav__leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.lw-sav__leg .b { background: var(--lw-blue); }
.lw-sav__leg .g { background: #2FA045; }
.lw-sav__row { display: grid; grid-template-columns: 128px 1fr auto; align-items: center; gap: 10px; margin-bottom: 9px; }
.lw-sav__lbl { font-size: 11px; color: #46566d; text-align: right; line-height: 1.2; }
.lw-sav__bar { display: flex; height: 13px; background: #EEF2F6; border-radius: 3px; overflow: hidden; }
.lw-sav__blue { display: block; height: 100%; background: var(--lw-blue); width: var(--w); }
.lw-sav__green { display: block; height: 100%; background: #2FA045; width: var(--w); }
.lw-sav__val { font-size: 11.5px; font-weight: 700; color: #2B3A4E; font-feature-settings: "tnum" 1; }
.lw-sav__note { font-size: 9.5px; color: #9aa6b6; text-align: right; margin-top: 6px; }
html.motion .lw-sav__blue, html.motion .lw-sav__green { width: 0; }
html.motion .lw--in .lw-sav__blue { width: var(--w); transition: width 1.1s var(--ease); }
html.motion .lw--in .lw-sav__green { width: var(--w); transition: width 1.1s var(--ease) .12s; }

/* ---- alert email ---- */
.lw-mail__card { padding: 15px 16px 15px; background: linear-gradient(155deg, #DCEEFB 0%, #EAF4FC 100%); box-shadow: 0 10px 26px rgba(18,35,63,.12); }
.lw-mail__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.lw-mail__ico { width: 18px; height: 18px; color: var(--lw-blue); }
.lw-mail__from { font-size: 12px; font-weight: 800; color: var(--lw-navy); }
.lw-mail__now { margin-left: auto; font-size: 11px; color: #7b8798; font-style: italic; }
.lw-mail__subj { font-size: 16px; font-weight: 800; color: var(--lw-ink); line-height: 1.15; margin-bottom: 6px; }
.lw-mail__txt { font-size: 12.5px; color: #3a4a5f; line-height: 1.4; }
.lw-mail__more { font-size: 11px; color: #55637a; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html.motion .lw-tp__fill, html.motion .lw-safm__fill, html.motion .lw-sav__blue, html.motion .lw-sav__green { width: var(--w) !important; transition: none !important; }
}

/* ---- rules settings (On/Off rule list) ---- */
.lw-rs__card { padding: 4px 0; }
.lw-rs__cat { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #8b96a6; padding: 12px 16px 8px; }
.lw-rs__row { display: flex; align-items: flex-start; gap: 13px; padding: 11px 16px; }
.lw-rs__row + .lw-rs__row { border-top: 1px solid #f1f4f8; }
.lw-rs__tog { flex: none; display: inline-flex; border: 1px solid #cdd6e0; border-radius: 6px; overflow: hidden; }
.lw-rs__tog b { font-size: 10.5px; font-weight: 700; padding: 4px 9px; color: #6b7a90; }
.lw-rs__tog.on b:first-child { background: var(--lw-blue); color: #fff; }
.lw-rs__tog.off b:last-child { background: var(--lw-blue); color: #fff; }
.lw-rs__name { display: block; font-size: 12.5px; font-weight: 700; color: var(--lw-ink); }
.lw-rs__desc { display: block; font-size: 11px; color: #6b7a90; margin-top: 2px; line-height: 1.3; }
html.motion .lw--in .lw-rs__row { opacity: 0; transform: translateX(-6px); animation: lwRowIn .8s var(--ease) forwards; }
html.motion .lw--in .lw-rs__row:nth-child(3) { animation-delay: .05s; }
html.motion .lw--in .lw-rs__row:nth-child(4) { animation-delay: .1s; }
html.motion .lw--in .lw-rs__row:nth-child(5) { animation-delay: .15s; }
html.motion .lw--in .lw-rs__row:nth-child(6) { animation-delay: .2s; }

/* ---- engine faults table ---- */
.lw-ef__card { padding: 0; }
.lw-ef__hd { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 10px; }
.lw-ef__hd b { font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-ef__cnt { font-size: 10.5px; color: #8b96a6; }
.lw-ef__tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; }
.lw-ef__tbl th { text-align: left; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--lw-navy); padding: 8px 12px; }
.lw-ef__tbl td { padding: 9px 12px; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
.lw-ef__tbl tr:last-child td { border-bottom: 0; }
.lw-ef__code { font-weight: 700; color: var(--lw-ink); font-feature-settings: "tnum" 1; }
.lw-ef__desc { color: #46566d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-ef__stat { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #46566d; }
.lw-ef__stat i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lw-ef__stat.active i { background: #E15540; }
.lw-ef__stat.pending i { background: #E8A33D; }
html.motion .lw--in .lw-ef__tbl tbody tr { opacity: 0; transform: translateY(6px); animation: lwRowUp .8s var(--ease) forwards; }
html.motion .lw--in .lw-ef__tbl tbody tr:nth-child(1) { animation-delay: .08s; }
html.motion .lw--in .lw-ef__tbl tbody tr:nth-child(2) { animation-delay: .15s; }
html.motion .lw--in .lw-ef__tbl tbody tr:nth-child(3) { animation-delay: .22s; }
html.motion .lw--in .lw-ef__tbl tbody tr:nth-child(4) { animation-delay: .29s; }

/* ---- active insights (savings cards) ---- */
.lw-ins__card { padding: 14px 15px; }
.lw-ins__hd { font-size: 11.5px; color: #55637a; margin-bottom: 12px; line-height: 1.35; }
.lw-ins__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lw-ins__c { border: 1px solid #e7ecf2; border-radius: 10px; padding: 12px; }
.lw-ins__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.lw-ins__name { font-size: 13px; font-weight: 800; color: var(--lw-ink); line-height: 1.2; }
.lw-ins__badge { flex: none; font-size: 9px; font-weight: 800; color: #fff; background: var(--lw-blue); border-radius: 5px; padding: 3px 7px; white-space: nowrap; }
.lw-ins__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.lw-ins__box { background: #F4F7FA; border-radius: 8px; padding: 8px 10px; }
.lw-ins__box span { display: block; font-size: 9px; color: #7b8798; margin-bottom: 3px; }
.lw-ins__box b { font-size: 17px; font-weight: 800; color: var(--lw-ink); font-feature-settings: "tnum" 1; }
.lw-ins__desc { font-size: 10.5px; color: #55637a; line-height: 1.35; margin-bottom: 11px; }
.lw-ins__act { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--lw-link); border: 1px solid #d5deea; border-radius: 7px; padding: 6px 11px; }
html.motion .lw--in .lw-ins__c { opacity: 0; transform: translateY(8px); animation: lwRowUp .85s var(--ease) forwards; }
html.motion .lw--in .lw-ins__c:nth-child(2) { animation-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
  html.motion .lw--in .lw-rs__row, html.motion .lw--in .lw-ef__tbl tbody tr, html.motion .lw--in .lw-ins__c { opacity: 1 !important; transform: none !important; animation: none !important; }
  .lw:hover .lw__card { transform: none !important; }
}

/* ---- interactive threshold tuning (draggable slider + segmented) ---- */
.lw-th__card { padding: 4px 0; }
.lw-th__cat { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #8b96a6; padding: 12px 16px 6px; }
.lw-th__row { padding: 13px 16px; }
.lw-th__row + .lw-th__row { border-top: 1px solid #f1f4f8; }
.lw-th__head { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.lw-th__name { font-size: 12.5px; font-weight: 700; color: var(--lw-ink); }
.lw-th__lab { display: block; font-size: 11px; color: #6b7a90; margin-bottom: 9px; }
.lw-th__val { font-weight: 800; color: var(--lw-ink); }
.lw-th__slide { display: flex; align-items: center; gap: 13px; }
.lw-th__read { font-size: 12px; color: #46566d; white-space: nowrap; }
.lw-th__num { font-size: 15px; font-weight: 800; color: var(--lw-blue); }
.lw-th__range { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 6px; border-radius: 6px; background: linear-gradient(var(--lw-blue), var(--lw-blue)) 0 / var(--p, 30%) 100% no-repeat, #dbe3ec; cursor: pointer; }
.lw-th__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--lw-blue); box-shadow: 0 1px 5px rgba(18, 35, 63, 0.3); cursor: grab; }
.lw-th__range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.08); }
.lw-th__range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--lw-blue); box-shadow: 0 1px 5px rgba(18, 35, 63, 0.3); cursor: grab; }
.lw-th__range:focus-visible { outline: 2px solid var(--lw-blue); outline-offset: 4px; }
.lw-th__desc { font-size: 10.5px; color: #6b7a90; line-height: 1.35; margin-top: 10px; }
.lw-seg { display: inline-flex; border: 1px solid #cdd6e0; border-radius: 7px; overflow: hidden; }
.lw-seg__opt { font-size: 10.5px; font-weight: 700; color: #52627a; background: #fff; border: 0; border-right: 1px solid #e2e8f0; padding: 7px 12px; cursor: pointer; font-family: inherit; transition: background .15s ease, color .15s ease; }
.lw-seg__opt:last-child { border-right: 0; }
.lw-seg__opt:hover { background: #eef4fb; }
.lw-seg__opt.on { background: var(--lw-blue); color: #fff; }
.lw-rs__tog, .lw-rs__tog b { cursor: pointer; user-select: none; }
.lw-th__row.is-off .lw-th__ctl, .lw-th__row.is-off .lw-th__name, .lw-rs__row.is-off .lw-rs__txt { opacity: .42; transition: opacity .2s ease; }
html.motion .lw--in .lw-th__row { opacity: 0; transform: translateY(8px); animation: lwRowUp .85s var(--ease) forwards; }
html.motion .lw--in .lw-th__row:nth-child(3) { animation-delay: .08s; }

/* ---- driver safety scorecard donut ---- */
.lw-do__card { padding: 15px 16px; }
.lw-do__hd { font-size: 13px; font-weight: 800; color: var(--lw-ink); margin-bottom: 12px; }
.lw-do__body { display: flex; align-items: center; gap: 18px; }
.lw-do__ring { position: relative; width: 130px; height: 130px; flex: none; }
.lw-do__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lw-do__seg { fill: none; stroke-width: 16; }
html.motion .lw--in .lw-do__ring svg { animation: lwSpinIn 1.15s var(--ease) both; }
@keyframes lwSpinIn { from { transform: rotate(-150deg); opacity: 0; } to { transform: rotate(-90deg); opacity: 1; } }
.lw-do__ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lw-do__ctr span { font-size: 8.5px; color: #7b8798; }
.lw-do__ctr b { font-size: 24px; font-weight: 800; color: var(--lw-ink); font-feature-settings: "tnum" 1; }
.lw-do__leg { display: grid; gap: 8px; flex: 1; }
.lw-do__li { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #46566d; }
.lw-do__li b { margin-left: auto; font-weight: 700; color: var(--lw-ink); }
.lw-do__dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  html.motion .lw--in .lw-th__row { opacity: 1 !important; transform: none !important; animation: none !important; }
  html.motion .lw--in .lw-do__ring svg { animation: none !important; transform: rotate(-90deg) !important; opacity: 1 !important; }
}

/* ---- keyless mobile (interactive lock / unlock) ---- */
.lw-kl__card { max-width: 300px; margin: 0 auto; padding: 0; }
.lw-kl__top { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #eef2f6; }
.lw-kl__back { font-size: 20px; color: #52627a; line-height: 1; }
.lw-kl__ttl { font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-kl__veh { padding: 15px 16px 6px; display: grid; gap: 3px; }
.lw-kl__name { font-size: 15px; font-weight: 800; color: var(--lw-ink); }
.lw-kl__vin { font-size: 10.5px; color: #8b96a6; }
.lw-kl__bt { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #1E8E5A; margin-top: 5px; }
.lw-kl__bt i { width: 7px; height: 7px; border-radius: 50%; background: #1E8E5A; box-shadow: 0 0 0 3px rgba(30, 142, 90, 0.18); }
.lw-kl__state { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px 16px 16px; }
.lw-kl__ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #EAF1FA; color: var(--lw-blue); transition: background .2s ease, color .2s ease; }
.lw-kl__ico svg { width: 24px; height: 24px; }
.lw-kl__o { display: none; }
.lw-kl__state[data-locked="0"] .lw-kl__c { display: none; }
.lw-kl__state[data-locked="0"] .lw-kl__o { display: grid; background: #FCEEEA; color: #E15540; }
.lw-kl__statetxt { font-size: 13px; font-weight: 800; color: var(--lw-ink); }
.lw-kl__acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 0 14px 16px; }
.lw-kl__btn { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: #52627a; background: #F4F7FA; border: 1px solid #e6ecf3; border-radius: 10px; padding: 10px 4px; cursor: pointer; font-family: inherit; transition: transform .12s ease, background .15s ease, color .15s ease; }
.lw-kl__btn .lw-ico { display: grid; place-items: center; }
.lw-kl__btn .lw-ico svg { width: 18px; height: 18px; }
.lw-kl__btn:active { transform: scale(.94); }
.lw-kl__btn.is-on { background: var(--lw-blue); color: #fff; border-color: var(--lw-blue); }

/* ---- top drivers (animated stacked bars) ---- */
.lw-td__card { padding: 15px 16px; }
.lw-td__hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.lw-td__hd b { font-size: 13.5px; font-weight: 800; color: var(--lw-ink); }
.lw-td__sub { font-size: 10px; color: #8b96a6; }
.lw-td__leg { display: flex; gap: 14px; margin-bottom: 13px; }
.lw-td__leg span { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: #55637a; }
.lw-td__leg i { width: 9px; height: 9px; border-radius: 2px; }
.lw-td__rows { display: grid; gap: 10px; }
.lw-td__row { display: flex; align-items: center; gap: 10px; }
.lw-td__name { flex: none; width: 74px; font-size: 11px; font-weight: 700; color: var(--lw-ink); }
.lw-td__track { flex: 1; display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: #eef2f6; }
.lw-td__seg { height: 100%; width: var(--w); }
.lw-td__tot { flex: none; width: 22px; text-align: right; font-size: 11px; font-weight: 800; color: var(--lw-ink); font-feature-settings: "tnum" 1; }
html.motion .lw--in .lw-td__seg { animation: lwGrowX 1s var(--ease) var(--d) both; }
@keyframes lwGrowX { from { width: 0; } }

/* ---- Geotab Ace answer card (interactive Show SQL) ---- */
.lw-ace__card { padding: 15px 16px; }
.lw-ace__q { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; font-weight: 700; color: var(--lw-ink); margin-bottom: 12px; line-height: 1.35; }
.lw-ace__spark { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(135deg, var(--lw-blue), #6E4CE0); color: #fff; }
.lw-ace__spark svg { width: 13px; height: 13px; }
.lw-ace__a { background: #F5F8FB; border: 1px solid #e7edf3; border-radius: 10px; padding: 12px; }
.lw-ace__ans { font-size: 11.5px; color: #46566d; line-height: 1.45; margin-bottom: 11px; }
.lw-ace__ans b { color: var(--lw-ink); }
.lw-ace__tbl { width: 100%; border-collapse: collapse; font-size: 10.5px; margin-bottom: 11px; background: #fff; border-radius: 7px; overflow: hidden; }
.lw-ace__tbl th { text-align: left; font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; color: #7b8798; background: #eef3f8; padding: 6px 9px; }
.lw-ace__tbl td { padding: 6px 9px; border-top: 1px solid #eef2f6; color: #46566d; }
.lw-ace__acts { display: flex; gap: 7px; flex-wrap: wrap; }
.lw-ace__b { font-size: 10.5px; font-weight: 700; color: var(--lw-link); background: #fff; border: 1px solid #d5deea; border-radius: 7px; padding: 6px 10px; cursor: pointer; font-family: inherit; transition: background .15s ease; }
.lw-ace__b:hover { background: #eef4fb; }
.lw-ace__sql { display: none; margin: 11px 0 0; background: #10233f; color: #cfe0f5; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; line-height: 1.55; padding: 11px 12px; border-radius: 8px; white-space: pre; overflow-x: auto; }
.lw-ace__card.is-open .lw-ace__sql { display: block; }
html.motion .lw--in .lw-ace__a { opacity: 0; transform: translateY(8px); animation: lwRowUp .85s var(--ease) .1s forwards; }

@media (prefers-reduced-motion: reduce) {
  html.motion .lw--in .lw-td__seg { animation: none !important; }
  html.motion .lw--in .lw-ace__a { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---- sparkline (shared) ---- */
.lw-spark { display: block; width: 100%; height: 34px; }
.lw-spark__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.motion .lw--in .lw-spark__line { stroke-dasharray: 300; stroke-dashoffset: 300; animation: lwDraw 1.1s var(--ease) .15s forwards; }
@keyframes lwDraw { to { stroke-dashoffset: 0; } }

/* ---- predictive safety & benchmarking (3 stat cards) ---- */
.lw-ps__card { padding: 15px 16px; }
.lw-ps__hd { font-size: 13px; font-weight: 800; color: var(--lw-ink); margin-bottom: 13px; }
.lw-ps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lw-ps__c { border: 1px solid #e7ecf2; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; }
.lw-ps__lab { font-size: 10px; font-weight: 700; color: #6b7a90; line-height: 1.3; min-height: 26px; }
.lw-ps__val { font-size: 27px; font-weight: 800; color: var(--lw-ink); line-height: 1.1; margin-top: 6px; font-feature-settings: "tnum" 1; }
.lw-ps__unit { font-size: 9.5px; color: #8b96a6; margin-top: 2px; }
.lw-ps__spark { margin-top: 8px; }
.lw-ps__delta { font-size: 10px; font-weight: 700; margin-top: 8px; }
.lw-ps__delta.down { color: #1E8E5A; }
.lw-ps__delta.up { color: #E15540; }
.lw-ps__delta.flat { color: #8b96a6; }

/* ---- sustainability center (sparkline trio) ---- */
.lw-ss__card { padding: 15px 16px; }
.lw-ss__hd { font-size: 13px; font-weight: 800; color: var(--lw-ink); margin-bottom: 13px; }
.lw-ss__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lw-ss__c { border: 1px solid #e7ecf2; border-radius: 10px; padding: 12px; }
.lw-ss__lab { font-size: 10.5px; font-weight: 700; color: #6b7a90; }
.lw-ss__row { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.lw-ss__val { font-size: 24px; font-weight: 800; color: var(--lw-ink); font-feature-settings: "tnum" 1; }
.lw-ss__delta { font-size: 11px; font-weight: 700; }
.lw-ss__delta.good { color: #1E8E5A; }
.lw-ss__delta.bad { color: #E15540; }
.lw-ss__unit { display: block; font-size: 9.5px; color: #8b96a6; margin-top: 2px; }
.lw-ss__spark { margin-top: 10px; }

/* ---- rewards mobile (interactive categories + tab bar) ---- */
.lw-rw__card { max-width: 300px; margin: 0 auto; padding: 16px 0 0; }
.lw-rw__hd { font-size: 18px; font-weight: 800; color: var(--lw-ink); padding: 0 16px 12px; }
.lw-rw__credits { display: flex; align-items: center; gap: 10px; padding: 0 16px 6px; }
.lw-rw__coin { color: #E08A3C; display: grid; place-items: center; }
.lw-rw__coin svg { width: 22px; height: 22px; }
.lw-rw__ctxt { font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-rw__bal { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--lw-blue); background: #EAF1FA; border-radius: 20px; padding: 4px 12px; }
.lw-rw__exp { font-size: 10.5px; color: #8b96a6; padding: 0 16px 14px; border-bottom: 1px solid #eef2f6; }
.lw-rw__sub { font-size: 13px; font-weight: 800; color: var(--lw-ink); padding: 14px 16px 6px; }
.lw-rw__cats { padding: 0 8px; }
.lw-rw__cat { display: flex; align-items: center; gap: 12px; width: 100%; font-size: 12.5px; font-weight: 600; color: #34435a; background: none; border: 0; border-radius: 9px; padding: 11px 8px; cursor: pointer; font-family: inherit; text-align: left; transition: background .15s ease; }
.lw-rw__cat:hover { background: #f4f7fa; }
.lw-rw__cat.is-active { background: #EAF1FA; color: var(--lw-ink); font-weight: 700; }
.lw-rw__cico { color: var(--lw-blue); display: grid; place-items: center; flex: none; }
.lw-rw__cico svg { width: 20px; height: 20px; }
.lw-rw__chev { margin-left: auto; color: #b7c1cf; font-size: 16px; }
.lw-rw__cat.is-active .lw-rw__chev { color: var(--lw-blue); }
.lw-rw__nav { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #eef2f6; margin-top: 12px; }
.lw-rw__tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9px; font-weight: 600; color: #8b96a6; background: none; border: 0; padding: 10px 2px; cursor: pointer; font-family: inherit; transition: color .15s ease; }
.lw-rw__tab.is-active { color: var(--lw-blue); }
.lw-rw__tico { display: grid; place-items: center; }
.lw-rw__tico svg { width: 19px; height: 19px; }

@media (prefers-reduced-motion: reduce) {
  html.motion .lw--in .lw-spark__line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ---- maintenance work-order detail (interactive selects) ---- */
.lw-md__card { padding: 15px 16px; }
.lw-md__hd { font-size: 15px; font-weight: 800; color: var(--lw-ink); }
.lw-md__meta { font-size: 10.5px; color: #8b96a6; margin: 3px 0 14px; }
.lw-md__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.lw-md__f { display: grid; gap: 5px; align-content: start; }
.lw-md__f label { font-size: 10px; font-weight: 700; color: #6b7a90; }
.lw-md__val { font-size: 12px; color: var(--lw-ink); background: #F4F7FA; border: 1px solid #e6ecf3; border-radius: 7px; padding: 8px 10px; }
.lw-md__date { display: flex; align-items: center; gap: 7px; }
.lw-md__date .lw-ico { display: grid; place-items: center; }
.lw-md__date .lw-ico svg { width: 15px; height: 15px; color: #8b96a6; }
.lw-md__sel { font-size: 12px; color: var(--lw-ink); background-color: #fff; border: 1px solid #cdd6e0; border-radius: 7px; padding: 8px 26px 8px 10px; font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.lw-md__sel:focus { outline: 2px solid var(--lw-blue); outline-offset: 1px; border-color: var(--lw-blue); }

/* ---- driver profile mobile (diverging bars + toggle) ---- */
.lw-dp__card { max-width: 320px; margin: 0 auto; padding: 14px 16px 16px; }
.lw-dp__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.lw-dp__title { font-size: 15px; font-weight: 800; color: var(--lw-ink); }
.lw-dp__logout { font-size: 12px; font-weight: 700; color: #E15540; }
.lw-dp__user { display: flex; align-items: center; gap: 11px; border: 1px solid #e7edf3; border-radius: 12px; padding: 11px; margin-bottom: 15px; }
.lw-dp__ava { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--lw-navy); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.lw-dp__ui { flex: 1; display: grid; gap: 2px; }
.lw-dp__ui b { font-size: 13.5px; font-weight: 800; color: var(--lw-ink); }
.lw-dp__ui span { font-size: 11px; color: #8b96a6; }
.lw-dp__badge { flex: none; font-size: 12px; font-weight: 800; color: var(--lw-blue); border: 1px solid var(--lw-blue); border-radius: 8px; padding: 5px 9px; }
.lw-dp__sh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.lw-dp__st { font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-dp__seg { display: inline-flex; background: #eef2f6; border-radius: 8px; padding: 3px; }
.lw-dp__opt { font-size: 11px; font-weight: 700; color: #52627a; background: none; border: 0; border-radius: 6px; padding: 5px 11px; cursor: pointer; font-family: inherit; transition: background .15s ease, color .15s ease; }
.lw-dp__opt.is-active { background: #6E7E92; color: #fff; }
.lw-dp__leg { display: flex; gap: 16px; margin-bottom: 10px; justify-content: center; }
.lw-dp__leg span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #55637a; }
.lw-dp__leg i { width: 14px; height: 8px; border-radius: 2px; }
.lw-dp__chart { display: flex; align-items: flex-start; gap: 6px; }
.lw-dp__col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.lw-dp__up { width: 100%; height: 52px; display: flex; align-items: flex-end; justify-content: center; }
.lw-dp__dn { width: 100%; height: 52px; display: flex; align-items: flex-start; justify-content: center; }
.lw-dp__up span, .lw-dp__dn span { width: 62%; height: var(--h); border-radius: 2px; }
.lw-dp__up span { background: #9EC7EC; }
.lw-dp__dn span { background: #E7A9A0; }
.lw-dp__lab { font-size: 8px; color: #8b96a6; margin-top: 5px; white-space: nowrap; }
html.motion .lw--in .lw-dp__up span, html.motion .lw--in .lw-dp__dn span { animation: lwGrowY .6s var(--ease) var(--d) both; }
@keyframes lwGrowY { from { height: 0; } }

/* ---- notifications mobile (coaching list) ---- */
.lw-nt__card { max-width: 320px; margin: 0 auto; padding: 0 0 12px; }
.lw-nt__top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; }
.lw-nt__back { font-size: 20px; color: #52627a; line-height: 1; }
.lw-nt__ttl { font-size: 15px; font-weight: 800; color: var(--lw-ink); }
.lw-nt__day { text-align: center; font-size: 11px; color: #8b96a6; padding: 12px 0 8px; }
.lw-nt__item { position: relative; display: flex; gap: 11px; align-items: flex-start; margin: 0 14px 9px; padding: 12px; background: #F1F6FC; border-radius: 12px; }
.lw-nt__item.is-unread::before { content: ""; position: absolute; left: 3px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: #E15540; }
.lw-nt__ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #DCEAF8; color: var(--lw-blue); display: grid; place-items: center; }
.lw-nt__ic svg { width: 18px; height: 18px; }
.lw-nt__c { flex: 1; min-width: 0; }
.lw-nt__row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lw-nt__row b { font-size: 12px; font-weight: 800; color: var(--lw-ink); }
.lw-nt__row time { flex: none; font-size: 10px; color: #8b96a6; }
.lw-nt__c p { margin: 3px 0 0; font-size: 11px; color: #55637a; line-height: 1.35; }
html.motion .lw--in .lw-nt__item { opacity: 0; transform: translateY(8px); animation: lwRowUp .85s var(--ease) forwards; }
html.motion .lw--in .lw-nt__item:nth-child(3) { animation-delay: .06s; }
html.motion .lw--in .lw-nt__item:nth-child(4) { animation-delay: .12s; }
html.motion .lw--in .lw-nt__item:nth-child(6) { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  html.motion .lw--in .lw-dp__up span, html.motion .lw--in .lw-dp__dn span { height: var(--h) !important; animation: none !important; }
  html.motion .lw--in .lw-nt__item { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---- asset-tracking map (multi-pin) ---- */
.lw-am__pin { stroke: #fff; stroke-width: 1.5; }
.lw-am__pin.on { fill: var(--lw-blue); }
.lw-am__pin.off { fill: #9aa6b4; }
.lw-am__pin.warn { fill: #E8A33D; }
.lw-am__dot { fill: #fff; }
.lw-am__pulse { fill: none; stroke: #E8A33D; stroke-width: 2; opacity: .55; }
html.motion .lw--in .lw-am__pulse { animation: lwAmPulse 2.2s ease-out infinite; }
@keyframes lwAmPulse { 0% { r: 7; opacity: .55; } 100% { r: 22; opacity: 0; } }
html.motion .lw--in .lw-am__g { opacity: 0; animation: lwFade .85s var(--ease) var(--d) forwards; }
@keyframes lwFade { to { opacity: 1; } }

/* ---- asset detail panel (active exceptions) ---- */
.lw-ad__card { padding: 15px 16px; }
.lw-ad__hd { display: flex; align-items: center; gap: 11px; }
.lw-ad__ico { width: 34px; height: 34px; border-radius: 9px; background: #EAF1FA; color: var(--lw-blue); display: grid; place-items: center; flex: none; }
.lw-ad__ico svg { width: 19px; height: 19px; }
.lw-ad__hd b { font-size: 15px; font-weight: 800; color: var(--lw-ink); display: block; }
.lw-ad__stat { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #55637a; margin-top: 2px; }
.lw-ad__stat i { width: 7px; height: 7px; border-radius: 50%; background: #1E8E5A; box-shadow: 0 0 0 3px rgba(30, 142, 90, 0.18); }
.lw-ad__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0; }
.lw-ad__chips span { font-size: 10px; font-weight: 700; color: #46566d; background: #eef3f8; border-radius: 20px; padding: 4px 10px; }
.lw-ad__drv { display: flex; align-items: center; gap: 11px; border-top: 1px solid #eef2f6; border-bottom: 1px solid #eef2f6; padding: 12px 0; }
.lw-ad__avg { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--lw-navy); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.lw-ad__drvx { display: grid; gap: 2px; }
.lw-ad__drvn { font-size: 12.5px; font-weight: 800; color: var(--lw-ink); }
.lw-ad__drvr { font-size: 10.5px; color: #8b96a6; }
.lw-ad__sec { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8b96a6; margin: 13px 0 9px; }
.lw-ad__exc { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.lw-ad__exc + .lw-ad__exc { border-top: 1px solid #f1f4f8; }
.lw-ad__sev { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.lw-ad__sev.high { background: #E15540; }
.lw-ad__sev.med { background: #E8A33D; }
.lw-ad__sev.low { background: #38A7E0; }
.lw-ad__excb { display: flex; justify-content: space-between; flex: 1; gap: 8px; align-items: baseline; }
.lw-ad__excn { font-size: 12px; font-weight: 700; color: var(--lw-ink); }
.lw-ad__exct { font-size: 10px; color: #8b96a6; flex: none; }
html.motion .lw--in .lw-ad__exc { opacity: 0; transform: translateX(-6px); animation: lwRowIn .8s var(--ease) forwards; }
html.motion .lw--in .lw-ad__exc:nth-child(6) { animation-delay: .06s; }
html.motion .lw--in .lw-ad__exc:nth-child(7) { animation-delay: .12s; }

/* ---- idle-fuel donut extras ---- */
.lw-if__link { font-size: 11px; font-weight: 700; color: var(--lw-link); cursor: pointer; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  html.motion .lw--in .lw-am__g { opacity: 1 !important; animation: none !important; }
  html.motion .lw--in .lw-am__pulse { animation: none !important; opacity: 0 !important; }
  html.motion .lw--in .lw-ad__exc { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---- trips history (dark summary header + stop/drive timeline) ---- */
.lw-tr__card { padding: 0; overflow: hidden; }
.lw-tr__hd { background: var(--lw-navy); color: #fff; padding: 14px 16px; }
.lw-tr__hdtop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.lw-tr__hdtop b { font-size: 14px; font-weight: 800; }
.lw-tr__hdtop span { font-size: 11px; color: #b9c6da; }
.lw-tr__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lw-tr__sum div { display: grid; gap: 2px; }
.lw-tr__sum span { font-size: 8.5px; color: #b9c6da; text-transform: uppercase; letter-spacing: .04em; }
.lw-tr__sum b { font-size: 15px; font-weight: 800; font-feature-settings: "tnum" 1; }
.lw-tr__tl { position: relative; padding: 15px 16px 15px 40px; }
.lw-tr__tl::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: #e2e8f0; }
.lw-tr__stop { position: relative; }
.lw-tr__node { position: absolute; left: -27px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--lw-blue); border: 2px solid #fff; box-shadow: 0 0 0 2px #cfe0f5; }
.lw-tr__row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lw-tr__row b { font-size: 12px; font-weight: 700; color: var(--lw-ink); }
.lw-tr__row time { flex: none; font-size: 10.5px; color: #8b96a6; }
.lw-tr__sub { font-size: 10.5px; color: #8b96a6; }
.lw-tr__drive { color: #7b8798; font-size: 10.5px; padding: 7px 0; }
html.motion .lw--in .lw-tr__stop, html.motion .lw--in .lw-tr__drive { opacity: 0; transform: translateY(6px); animation: lwRowUp .8s var(--ease) forwards; }
html.motion .lw--in .lw-tr__tl > *:nth-child(2) { animation-delay: .05s; }
html.motion .lw--in .lw-tr__tl > *:nth-child(3) { animation-delay: .1s; }
html.motion .lw--in .lw-tr__tl > *:nth-child(4) { animation-delay: .15s; }
html.motion .lw--in .lw-tr__tl > *:nth-child(5) { animation-delay: .2s; }
html.motion .lw--in .lw-tr__tl > *:nth-child(6) { animation-delay: .25s; }
html.motion .lw--in .lw-tr__tl > *:nth-child(7) { animation-delay: .3s; }

/* ---- maintenance reminders table ---- */
.lw-mr__card { padding: 0; }
.lw-mr__hd { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 10px; }
.lw-mr__hd b { font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-mr__cnt { font-size: 10.5px; color: #8b96a6; }
.lw-mr__tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; }
.lw-mr__tbl th { text-align: left; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--lw-navy); padding: 8px 8px; }
.lw-mr__tbl td { padding: 9px 8px; border-bottom: 1px solid #eef2f6; color: #46566d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-mr__tbl tr:last-child td { border-bottom: 0; }
.lw-mr__nm { font-weight: 700; color: var(--lw-ink); }
.lw-mr__tbl td:last-child, .lw-mr__tbl th:last-child { overflow: visible; text-overflow: clip; padding-left: 9px; padding-right: 9px; }
.lw-mr__rep { font-size: 10px; font-weight: 700; border-radius: 20px; padding: 2px 9px; }
.lw-mr__rep.yes { color: #1E8E5A; background: #E4F3EB; }
.lw-mr__rep.no { color: #7b8798; background: #eef2f6; }
html.motion .lw--in .lw-mr__tbl tbody tr { opacity: 0; transform: translateY(6px); animation: lwRowUp .8s var(--ease) forwards; }
html.motion .lw--in .lw-mr__tbl tbody tr:nth-child(2) { animation-delay: .06s; }
html.motion .lw--in .lw-mr__tbl tbody tr:nth-child(3) { animation-delay: .12s; }
html.motion .lw--in .lw-mr__tbl tbody tr:nth-child(4) { animation-delay: .18s; }
html.motion .lw--in .lw-mr__tbl tbody tr:nth-child(5) { animation-delay: .24s; }

/* ---- exception rules (numbered rows + native dropdowns) ---- */
.lw-xr__card { padding: 4px 0; }
.lw-xr__hd { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 16px 8px; }
.lw-xr__hd b { font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-xr__hd span { font-size: 10px; color: #8b96a6; text-transform: uppercase; letter-spacing: .04em; }
.lw-xr__row { display: flex; align-items: center; gap: 11px; padding: 9px 16px; }
.lw-xr__row + .lw-xr__row { border-top: 1px solid #f1f4f8; }
.lw-xr__n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #eef2f6; color: #6b7a90; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.lw-xr__name { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--lw-ink); }
.lw-xr__sel { flex: none; width: 98px; padding-top: 6px; padding-bottom: 6px; font-size: 11px; }
html.motion .lw--in .lw-xr__row { opacity: 0; transform: translateX(-6px); animation: lwRowIn .8s var(--ease) forwards; }
html.motion .lw--in .lw-xr__row:nth-child(3) { animation-delay: .05s; }
html.motion .lw--in .lw-xr__row:nth-child(4) { animation-delay: .1s; }
html.motion .lw--in .lw-xr__row:nth-child(5) { animation-delay: .15s; }
html.motion .lw--in .lw-xr__row:nth-child(6) { animation-delay: .2s; }
html.motion .lw--in .lw-xr__row:nth-child(7) { animation-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
  html.motion .lw--in .lw-tr__stop, html.motion .lw--in .lw-tr__drive, html.motion .lw--in .lw-mr__tbl tbody tr, html.motion .lw--in .lw-xr__row { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---- data connector BI hero ---- */
.lw-dc__card { padding: 0; overflow: hidden; }
.lw-dc__hero { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(120deg, #1B355C, #25477B); color: #fff; padding: 16px 18px; }
.lw-dc__htxt { flex: 1; min-width: 0; }
.lw-dc__ttl { font-size: 16px; font-weight: 800; }
.lw-dc__sub { font-size: 12px; font-weight: 700; color: #bcd4ec; margin-top: 5px; }
.lw-dc__desc { font-size: 10.5px; color: #cfdcec; line-height: 1.45; margin: 8px 0 12px; max-width: 360px; }
.lw-dc__btns { display: flex; gap: 8px; }
.lw-dc__btn { font-size: 11px; font-weight: 700; color: #fff; background: var(--lw-blue); border-radius: 7px; padding: 7px 13px; }
.lw-dc__btn--o { background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); }
.lw-dc__ok { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; color: #1B355C; background: #fff; border-radius: 8px; padding: 8px 11px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
.lw-dc__okico { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #1B355C; color: #fff; }
.lw-dc__okico svg { width: 11px; height: 11px; }
.lw-dc__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 18px 16px; }
.lw-dc__panel { border: 1px solid #e7ecf2; border-radius: 10px; padding: 11px 12px; }
.lw-dc__ph { font-size: 10.5px; font-weight: 700; color: #55637a; margin-bottom: 8px; }
.lw-dc__pfoot { display: flex; justify-content: space-between; font-size: 9px; color: #9aa6b4; margin-top: 4px; }
.lw-dc__frow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lw-dc__frow:last-child { margin-bottom: 0; }
.lw-dc__flab { flex: none; width: 52px; font-size: 9.5px; color: #55637a; }
.lw-dc__ftrack { flex: 1; height: 10px; background: #eef2f6; border-radius: 3px; overflow: hidden; }
.lw-dc__fbar { display: block; height: 100%; width: var(--w); background: var(--lw-navy); border-radius: 3px; }
html.motion .lw--in .lw-dc__fbar { animation: lwGrowX 1s var(--ease) both; }

/* ---- MyGeotab dashboard composite ---- */
.lw-gt__card { padding: 0; display: grid; grid-template-columns: 152px 1fr; overflow: hidden; }
.lw-gt__side { background: #fff; border-right: 1px solid #eef2f6; padding: 12px 10px; }
.lw-gt__brand { font-size: 13px; color: var(--lw-navy); font-weight: 500; margin: 2px 4px 10px; letter-spacing: .01em; }
.lw-gt__brand b { font-weight: 800; }
.lw-gt__search { font-size: 10px; color: #9aa6b4; background: #f4f7fa; border: 1px solid #e6ecf3; border-radius: 6px; padding: 6px 9px; margin-bottom: 9px; }
.lw-gt__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 11px; }
.lw-gt__quick span { font-size: 9.5px; font-weight: 700; color: #52627a; background: #f4f7fa; border-radius: 6px; padding: 6px 4px; text-align: center; }
.lw-gt__quick .is-active { background: #EAF1FA; color: var(--lw-blue); }
.lw-gt__navs { display: grid; gap: 1px; }
.lw-gt__nav { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; color: #34435a; padding: 6px 4px; }
.lw-gt__navico { flex: none; color: var(--lw-navy); display: grid; place-items: center; }
.lw-gt__navico svg { width: 15px; height: 15px; }
.lw-gt__navplus { margin-left: auto; color: #c2ccd8; font-weight: 700; }
.lw-gt__main { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; background: #F4F7FA; align-content: start; }
.lw-gt__tile { background: #fff; border: 1px solid #eef2f6; border-radius: 9px; padding: 10px 11px; min-width: 0; }
.lw-gt__tile--wide { grid-column: 1 / -1; }
.lw-gt__th { font-size: 10.5px; font-weight: 800; color: var(--lw-ink); margin-bottom: 9px; }
.lw-gt__remrow { display: flex; justify-content: space-between; font-size: 10px; color: #46566d; padding: 4px 0; border-top: 1px solid #f1f4f8; }
.lw-gt__remrow:first-of-type { border-top: 0; }
.lw-gt__remt { color: #8b96a6; }
.lw-gt__bars { display: flex; align-items: flex-end; gap: 8px; height: 58px; }
.lw-gt__fb { flex: 1; background: #F2B21E; border-radius: 2px 2px 0 0; height: var(--h); }
.lw-gt__bars--d { gap: 4px; }
.lw-gt__db { flex: 1; background: var(--lw-blue); border-radius: 2px 2px 0 0; height: var(--h); }
html.motion .lw--in .lw-gt__fb, html.motion .lw--in .lw-gt__db { animation: lwGrowY .6s var(--ease) var(--d) both; }
.lw-gt__pierow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lw-gt__pie { flex: none; width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(#38A7E0 0 48%, #1B355C 48% 66%, #5B7CA8 66% 84%, #9DB4CE 84% 100%); }
.lw-gt__pleg { display: grid; gap: 5px; min-width: 0; }
.lw-gt__pleg span { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; color: #55637a; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-gt__pleg i { width: 8px; height: 8px; border-radius: 2px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  html.motion .lw--in .lw-dc__fbar { animation: none !important; }
  html.motion .lw--in .lw-gt__fb, html.motion .lw--in .lw-gt__db { height: var(--h) !important; animation: none !important; }
}

/* ==========================================================================
   Fill-the-grid widgets (July 10, 2026): camera-event, driver-feedback,
   privacy-controls, video-request, alert-feed, ev-charge, security-settings,
   marketplace, fault-alert, service-due, vehicle-health. mph/mi only.
   ========================================================================== */

/* ---- camera event review (dual road/driver views) ---- */
.lw-ce__card { padding: 13px 14px 14px; }
.lw-ce__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.lw-ce__hd b { font-size: 12.5px; font-weight: 800; color: var(--lw-ink); }
.lw-ce__ai { flex: none; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #fff; background: linear-gradient(135deg, var(--lw-blue), #6E4CE0); border-radius: 999px; padding: 3px 9px; }
.lw-ce__views { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lw-ce__view { position: relative; border-radius: 8px; overflow: hidden; background: #141F2D; }
.lw-ce__scene { display: block; width: 100%; height: auto; }
.lw-ce__lab { position: absolute; left: 7px; bottom: 6px; font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #C7D3E2; background: rgba(13, 21, 32, 0.72); border-radius: 4px; padding: 2px 6px; }
.lw-ce__rec { position: absolute; left: 7px; top: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 800; letter-spacing: .06em; color: #fff; background: rgba(13, 21, 32, 0.72); border-radius: 4px; padding: 2px 6px; }
.lw-ce__rec i { width: 5px; height: 5px; border-radius: 50%; background: #E15540; }
html.motion .lw-ce__rec i { animation: lwBlink 1.6s steps(1) infinite; }
@keyframes lwBlink { 50% { opacity: .15; } }
.lw-ce__tag { position: absolute; right: 6px; top: 6px; font-size: 8px; font-weight: 700; color: #fff; border-radius: 4px; padding: 2px 6px; max-width: 74%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-ce__tag--warn { background: rgba(190, 116, 16, 0.92); }
.lw-ce__tag--ok { background: rgba(23, 110, 68, 0.92); }
.lw-ce__box { fill: none; stroke: #F2A32C; stroke-width: 1.6; stroke-dasharray: 5 3; }
.lw-ce__box.ok { stroke: #3FCF8A; }
html.motion .lw--in .lw-ce__box { animation: lwBoxPulse 2.6s ease-in-out infinite; }
@keyframes lwBoxPulse { 50% { opacity: .45; } }
.lw-ce__scrub { position: relative; height: 5px; border-radius: 999px; background: #E7ECF2; margin: 12px 2px 7px; }
.lw-ce__prog { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; border-radius: 999px; background: var(--lw-blue); }
html.motion .lw--in .lw-ce__prog { animation: lwProg 7s linear infinite; }
@keyframes lwProg { from { width: 4%; } to { width: 97%; } }
.lw-ce__mark { position: absolute; left: 38%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg); background: #E15540; border: 1.5px solid #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(18, 35, 63, 0.3); }
.lw-ce__meta { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; color: #6b7a90; font-feature-settings: "tnum" 1; }
.lw-ce__info { display: flex; flex-direction: column; justify-content: center; gap: 6px; border-radius: 8px; background: #F1F5F9; padding: 9px 11px; }
.lw-ce__evt { font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--lw-blue); }
.lw-ce__info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.lw-ce__info li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 10px; color: #6b7a90; }
.lw-ce__info li b { font-size: 11px; font-weight: 800; color: var(--lw-ink); font-feature-settings: "tnum" 1; }

/* ---- in-cab driver feedback (spoken alert + settings rows) ---- */
.lw-df__card { padding: 4px 0 6px; }
.lw-df__now { display: flex; align-items: center; gap: 10px; margin: 10px 13px 4px; padding: 11px 12px; background: #EAF3FB; border: 1px solid #D8E7F5; border-radius: 10px; }
.lw-df__spk { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--lw-blue); color: #fff; display: grid; place-items: center; }
.lw-df__spk svg { width: 16px; height: 16px; }
.lw-df__wave { display: inline-flex; align-items: center; gap: 2.5px; height: 22px; flex: none; }
.lw-df__wave i { width: 3px; border-radius: 2px; background: var(--lw-blue); transform-origin: 50% 50%; }
.lw-df__wave i:nth-child(1) { height: 7px; }
.lw-df__wave i:nth-child(2) { height: 14px; }
.lw-df__wave i:nth-child(3) { height: 20px; }
.lw-df__wave i:nth-child(4) { height: 12px; }
.lw-df__wave i:nth-child(5) { height: 6px; }
html.motion .lw--in .lw-df__wave i { animation: lwWave .8s ease-in-out infinite alternate; }
html.motion .lw--in .lw-df__wave i:nth-child(2) { animation-delay: .12s; }
html.motion .lw--in .lw-df__wave i:nth-child(3) { animation-delay: .24s; }
html.motion .lw--in .lw-df__wave i:nth-child(4) { animation-delay: .36s; }
html.motion .lw--in .lw-df__wave i:nth-child(5) { animation-delay: .48s; }
@keyframes lwWave { from { transform: scaleY(.4); } to { transform: scaleY(1); } }
.lw-df__txt { min-width: 0; }
.lw-df__txt b { display: block; font-size: 12px; font-weight: 800; color: var(--lw-ink); }
.lw-df__txt span { display: block; font-size: 10px; color: #55637a; margin-top: 1px; }

/* ---- camera privacy note ---- */
.lw-pc__note { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #6b7a90; padding: 10px 16px 8px; border-top: 1px solid #f1f4f8; margin-top: 4px; }
.lw-pc__note .lw-ico { width: 13px; height: 13px; color: #8b96a6; }

/* ---- video requests (VOD queue) ---- */
.lw-vr__card { padding: 4px 0 6px; }
.lw-vr__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 15px 8px; }
.lw-vr__hd b { font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-vr__new { flex: none; font-size: 10.5px; font-weight: 700; color: var(--lw-link); }
.lw-vr__row { display: flex; align-items: center; gap: 11px; padding: 9px 15px; }
.lw-vr__row + .lw-vr__row { border-top: 1px solid #f1f4f8; }
.lw-vr__thumb { position: relative; flex: none; width: 52px; height: 34px; border-radius: 6px; background: linear-gradient(150deg, #1C2B39, #31445A); color: #fff; display: grid; place-items: center; overflow: hidden; }
.lw-vr__thumb svg { width: 16px; height: 16px; opacity: .92; }
.lw-vr__thumb.is-proc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%); transform: translateX(-100%); }
html.motion .lw-vr__thumb.is-proc::after { animation: lwShimmer 1.6s linear infinite; }
@keyframes lwShimmer { to { transform: translateX(100%); } }
.lw-vr__txt { flex: 1; min-width: 0; }
.lw-vr__txt b { display: block; font-size: 11.5px; font-weight: 700; color: var(--lw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-vr__txt span { display: block; font-size: 10px; color: #8b96a6; margin-top: 1px; font-feature-settings: "tnum" 1; }
.lw-vr__chip { flex: none; font-size: 9.5px; font-weight: 800; border-radius: 999px; padding: 3px 9px; }
.lw-vr__chip.ready { color: #1E8E5A; background: #E4F3EB; }
.lw-vr__chip.proc { color: #9A6A1A; background: #FBEFD8; }

/* ---- exception alert feed ---- */
.lw-af__card { padding: 4px 0 6px; }
.lw-af__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 15px 8px; }
.lw-af__hd b { font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-af__hd span { flex: none; font-size: 10.5px; color: #8b96a6; }
.lw-af__row { display: flex; align-items: center; gap: 11px; padding: 9px 15px; }
.lw-af__row + .lw-af__row { border-top: 1px solid #f1f4f8; }
.lw-af__row > i { width: 7px; height: 26px; border-radius: 2px; flex: none; }
.lw-af__txt { flex: 1; min-width: 0; }
.lw-af__txt b { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--lw-link); line-height: 1.2; }
.lw-af__txt span { display: block; font-size: 10px; color: #8b96a6; margin-top: 1px; }
.lw-af__new { flex: none; font-size: 9px; font-weight: 800; color: #fff; background: var(--lw-red); border-radius: 999px; padding: 1.5px 7px; }
html.motion .lw--in .lw-af__new { animation: lwBadge 4.85s var(--ease) infinite; }
.lw-af__time { flex: none; font-size: 10px; color: #8b96a6; font-feature-settings: "tnum" 1; }

/* ---- EV charge status ---- */
.lw-ec__card { padding: 14px 16px 10px; }
.lw-ec__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.lw-ec__hd b { font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-ec__sub { flex: none; font-size: 10.5px; color: #8b96a6; }
.lw-ec__row { padding: 9px 0; }
.lw-ec__row + .lw-ec__row { border-top: 1px solid #f1f4f8; }
.lw-ec__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.lw-ec__top b { font-size: 12px; font-weight: 700; color: var(--lw-ink); }
.lw-ec__chip { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; border-radius: 999px; padding: 2.5px 9px; }
.lw-ec__chip svg { width: 9px; height: 9px; }
.lw-ec__chip.chg { color: #1E8E5A; background: #E4F3EB; }
.lw-ec__chip.ready { color: #2A6FC0; background: #E5EFFA; }
.lw-ec__chip.sched { color: #55637a; background: #EEF2F6; }
.lw-ec__line { display: flex; align-items: center; gap: 10px; }
.lw-ec__track { flex: 1; height: 8px; border-radius: 999px; background: #EEF2F6; overflow: hidden; }
.lw-ec__fill { display: block; height: 100%; border-radius: 999px; width: var(--w); background: linear-gradient(90deg, #2FA045, #4CC06A); }
.lw-ec__fill.low { background: linear-gradient(90deg, #E8A33D, #F2BC66); }
.lw-ec__val { flex: none; font-size: 10.5px; font-weight: 700; color: #46566d; font-feature-settings: "tnum" 1; }
html.motion .lw-ec__fill { width: 0; }
html.motion .lw--in .lw-ec__fill { width: var(--w); transition: width 1.2s var(--ease); }
html.motion .lw--in .lw-ec__fill.d2 { transition-delay: .1s; }
html.motion .lw--in .lw-ec__fill.d3 { transition-delay: .2s; }
html.motion .lw--in .lw-ec__fill.d4 { transition-delay: .3s; }

/* ---- security settings ---- */
.lw-sec__card { padding: 14px 16px 8px; }
.lw-sec__hd { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.lw-sec__ico { flex: none; width: 28px; height: 28px; border-radius: 8px; background: #EAF1FA; color: var(--lw-navy); display: grid; place-items: center; }
.lw-sec__ico svg { width: 16px; height: 16px; }
.lw-sec__hd b { font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-sec__ok { margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 62%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; font-weight: 700; color: #1E8E5A; background: #E4F3EB; border-radius: 999px; padding: 3px 9px; }
.lw-sec__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; }
.lw-sec__row + .lw-sec__row { border-top: 1px solid #f1f4f8; }
.lw-sec__lab { font-size: 12px; font-weight: 600; color: #34435a; }
.lw-sec__badge { flex: none; font-size: 10px; font-weight: 800; border-radius: 6px; padding: 3px 9px; font-feature-settings: "tnum" 1; }
.lw-sec__badge.green { color: #1E8E5A; background: #E4F3EB; }
.lw-sec__badge.blue { color: #2A6FC0; background: #E5EFFA; }
.lw-sec__badge.gray { color: #55637a; background: #EEF2F6; }
.lw-sec__badge.navy { color: #fff; background: var(--lw-navy); }

/* ---- Geotab Marketplace add-ins ---- */
.lw-mk__card { padding: 14px 15px 15px; }
.lw-mk__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.lw-mk__hd b { font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-mk__hd span { flex: none; font-size: 10.5px; color: #8b96a6; }
.lw-mk__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lw-mk__tile { border: 1px solid #e7ecf2; border-radius: 10px; padding: 11px 12px; display: grid; gap: 3px; justify-items: start; }
.lw-mk__ico { width: 30px; height: 30px; border-radius: 8px; background: #EAF1FA; color: var(--lw-navy); display: grid; place-items: center; margin-bottom: 4px; }
.lw-mk__ico svg { width: 16px; height: 16px; }
.lw-mk__tile b { font-size: 11.5px; font-weight: 800; color: var(--lw-ink); line-height: 1.2; }
.lw-mk__cat { font-size: 9.5px; color: #8b96a6; }
.lw-mk__inst { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; color: #1E8E5A; margin-top: 5px; }
.lw-mk__inst svg { width: 12px; height: 12px; }
.lw-mk__inst.inc { color: #2A6FC0; }

/* ---- fault alert email extras ---- */
.lw-fa__row { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.lw-fa__rule { font-size: 10.5px; color: #55637a; }

/* ---- service due (reminder progress) ---- */
.lw-sd__card { padding: 14px 16px 10px; }
.lw-sd__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.lw-sd__hd b { font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-sd__cnt { flex: none; font-size: 10.5px; color: #8b96a6; }
.lw-sd__row { padding: 9px 0 10px; }
.lw-sd__row + .lw-sd__row { border-top: 1px solid #f1f4f8; }
.lw-sd__top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.lw-sd__top b { font-size: 12px; font-weight: 700; color: var(--lw-ink); }
.lw-sd__veh { font-size: 10.5px; color: #8b96a6; }
.lw-sd__chip { margin-left: auto; flex: none; font-size: 9.5px; font-weight: 800; border-radius: 999px; padding: 2.5px 9px; }
.lw-sd__chip.due { color: #9A6A1A; background: #FBEFD8; }
.lw-sd__chip.over { color: #C0392B; background: #FBE7E4; }
.lw-sd__chip.ok { color: #2A6FC0; background: #E5EFFA; }
.lw-sd__track { display: block; height: 7px; border-radius: 999px; background: #EEF2F6; overflow: hidden; }
.lw-sd__fill { display: block; height: 100%; border-radius: 999px; width: var(--w); }
.lw-sd__fill.due { background: #E8A33D; }
.lw-sd__fill.over { background: #E15540; }
.lw-sd__fill.ok { background: var(--lw-blue); }
.lw-sd__sub { display: block; font-size: 10px; color: #8b96a6; margin-top: 5px; text-align: right; font-feature-settings: "tnum" 1; }
html.motion .lw-sd__fill { width: 0; }
html.motion .lw--in .lw-sd__fill { width: var(--w); transition: width 1.2s var(--ease); }
html.motion .lw--in .lw-sd__fill.d2 { transition-delay: .1s; }
html.motion .lw--in .lw-sd__fill.d3 { transition-delay: .2s; }

/* ---- vehicle health snapshot ---- */
.lw-vh__card { padding: 14px 16px 15px; }
.lw-vh__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lw-vh__ico { width: 34px; height: 34px; border-radius: 9px; background: #EAF1FA; color: var(--lw-navy); display: grid; place-items: center; flex: none; }
.lw-vh__ico svg { width: 19px; height: 19px; }
.lw-vh__hd b { display: block; font-size: 14px; font-weight: 800; color: var(--lw-ink); }
.lw-vh__sub { display: block; font-size: 10px; color: #8b96a6; margin-top: 1px; }
.lw-vh__badge { margin-left: auto; flex: none; font-size: 9.5px; font-weight: 800; color: #1E8E5A; background: #E4F3EB; border-radius: 999px; padding: 3px 10px; }
.lw-vh__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lw-vh__box b { font-size: 15px; }
.lw-vh__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; vertical-align: middle; margin-left: 2px; margin-top: -2px; }
.lw-vh__dot.ok { background: #1E8E5A; }
.lw-vh__dot.warn { background: #E8A33D; }

/* ---- staggered entrances for new list/tile widgets ---- */
html.motion .lw--in .lw-vr__row, html.motion .lw--in .lw-af__row, html.motion .lw--in .lw-sec__row,
html.motion .lw--in .lw-mk__tile, html.motion .lw--in .lw-sd__row, html.motion .lw--in .lw-vh__box,
html.motion .lw--in .lw-ec__row { opacity: 0; transform: translateY(6px); animation: lwRowUp .8s var(--ease) forwards; }
html.motion .lw--in .lw-vr__row:nth-child(3), html.motion .lw--in .lw-af__row:nth-child(3),
html.motion .lw--in .lw-sec__row:nth-child(3), html.motion .lw--in .lw-sd__row:nth-child(3),
html.motion .lw--in .lw-ec__row:nth-child(3), html.motion .lw--in .lw-mk__tile:nth-child(2),
html.motion .lw--in .lw-vh__box:nth-child(2) { animation-delay: .07s; }
html.motion .lw--in .lw-vr__row:nth-child(4), html.motion .lw--in .lw-af__row:nth-child(4),
html.motion .lw--in .lw-sec__row:nth-child(4), html.motion .lw--in .lw-sd__row:nth-child(4),
html.motion .lw--in .lw-ec__row:nth-child(4), html.motion .lw--in .lw-mk__tile:nth-child(3),
html.motion .lw--in .lw-vh__box:nth-child(3) { animation-delay: .14s; }
html.motion .lw--in .lw-af__row:nth-child(5), html.motion .lw--in .lw-sec__row:nth-child(5),
html.motion .lw--in .lw-ec__row:nth-child(5), html.motion .lw--in .lw-mk__tile:nth-child(4),
html.motion .lw--in .lw-vh__box:nth-child(4) { animation-delay: .21s; }
html.motion .lw--in .lw-sec__row:nth-child(6), html.motion .lw--in .lw-vh__box:nth-child(5) { animation-delay: .28s; }
html.motion .lw--in .lw-vh__box:nth-child(6) { animation-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  html.motion .lw-ce__rec i, html.motion .lw--in .lw-ce__box, html.motion .lw--in .lw-ce__prog,
  html.motion .lw--in .lw-df__wave i, html.motion .lw-vr__thumb.is-proc::after,
  html.motion .lw--in .lw-af__new { animation: none !important; }
  html.motion .lw-ec__fill, html.motion .lw-sd__fill { width: var(--w) !important; transition: none !important; }
  html.motion .lw--in .lw-vr__row, html.motion .lw--in .lw-af__row, html.motion .lw--in .lw-sec__row,
  html.motion .lw--in .lw-mk__tile, html.motion .lw--in .lw-sd__row, html.motion .lw--in .lw-vh__box,
  html.motion .lw--in .lw-ec__row { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---- Accordion-fill widgets (July 12): tracking profile rows + notes ---- */
.lw-cm__card { padding: 14px 16px 12px; }
.lw-cm__row { display: flex; gap: 11px; align-items: flex-start; border: 1px solid #E3EAF2; border-radius: 10px; padding: 11px 12px; margin-top: 8px; }
.lw-cm__row.on { border-color: #0084C2; background: #F2F9FD; box-shadow: inset 0 0 0 1px #0084C2; }
.lw-cm__ico { flex: none; width: 30px; height: 30px; border-radius: 8px; background: #EAF1FA; color: #0084C2; display: grid; place-items: center; }
.lw-cm__ico svg { width: 16px; height: 16px; }
.lw-cm__txt { display: grid; gap: 2px; }
.lw-cm__txt b { font-size: 12px; font-weight: 700; color: #22334c; display: flex; align-items: center; gap: 8px; }
.lw-cm__txt span { font-size: 10.5px; color: #55637a; line-height: 1.45; }
.lw-cm__sel { font-size: 9px; font-weight: 800; color: #0084C2; background: #E5F3FB; border-radius: 20px; padding: 2px 8px; }
.lw-ti__note { margin-top: 10px; font-size: 10.5px; color: #8A6D1F; background: #FBF3DC; border-radius: 8px; padding: 8px 10px; }
.lw-au__card .lw-ins__grid { grid-template-columns: 1fr; }
html.motion .lw--in .lw-cm__row { opacity: 0; transform: translateY(6px); animation: lwRowUp .8s var(--ease) forwards; }
html.motion .lw--in .lw-cm__row:nth-of-type(2) { animation-delay: .08s; }
html.motion .lw--in .lw-cm__row:nth-of-type(3) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  html.motion .lw--in .lw-cm__row { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ==========================================================================
   VEHICLE SCENES (.vscene) — a vehicle photo with live widgets pinned to it.
   Pin anchor sits at --px/--py (%% of the image). The widget card floats
   --stem px above the anchor, connected by a stem line + pulsing dot.
   White-bg vehicle JPEGs (assets/vehicles/) blend on WHITE sections only.
   Base state = final (no-JS / reduced-motion safe); entrance rides the
   widget's own .lw--in under html.motion. Per-pin vars: --px --py --stem
   --pw (card width) --vd (extra delay). Cards always center on the stem.
   Scene var: --pt = top padding reserved for the floating cards.
   ========================================================================== */
.vscene { padding-top: var(--pt, 210px); width: min(1500px, calc(100vw - 40px)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.vscene__stage { position: relative; }
.vscene__veh { display: block; width: 100%; height: auto; }
/* Full-bleed live scenes (panoramic rows / environmental shots like dirt): span the whole viewport. Pins are % of the image, so geometry holds at any width; host section clips the scrollbar-gutter overflow of 100vw. */
.vscene--bleed { width: 100vw; }
section:has(.vscene--bleed) { overflow-x: clip; }
/* Accordion media host (go-focus / go-focus-plus "What it does"): the scene
   must fill its grid column, never the full-bleed breakout width above —
   1500px inside a 0.95fr track blows the grid and crushes the list column.
   The host also drops .acc__media's 4:3 crop so the pt+stage height fits. */
.acc__media:has(.vscene) { aspect-ratio: auto; display: block; }
/* Bottom-align device scenes to the accordion list (GO9/GO10 "What it does"); standalone widget cards center instead of sagging to the section corner. */
.acc__media.acc__media--flush { display: flex; flex-direction: column; justify-content: center; align-self: stretch; position: relative; }
.acc__media--flush .vscene--solo { max-width: min(480px, 100%) !important; }
/* Device scenes (device + pinned card) pin their BOTTOM to the accordion list
   bottom so the device never hangs below the list; a scene taller than the list
   overflows UPWARD into the section's top padding. Solo widget cards stay centered. */
.acc__media--flush:not(:has(.vscene--solo)) .vscene { position: absolute; left: 0; right: 0; bottom: 0; }
.acc__media .vscene { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; transform: none; }
.vscene__pin { position: absolute; left: var(--px, 50%); top: var(--py, 20%); z-index: 2; --vtf: translateX(-50%) scale(var(--vs, 1)); }
.vscene__pin:has(.lw:empty) { display: none; }
.vscene__dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #0084C2; box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .92), 0 2px 8px rgba(18, 35, 63, .3); }
.vscene__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(0, 132, 194, .5); opacity: 0; }
html.motion .vscene__dot::after { animation: vscRing 2.8s ease-out calc(1.1s + var(--vd, 0s)) infinite; }
.vscene__stem { position: absolute; left: -1px; bottom: 6px; width: 2px; height: var(--stem, 80px); border-radius: 1px; background: linear-gradient(180deg, rgba(0, 132, 194, .9), rgba(0, 132, 194, .28)); transform-origin: bottom; }
.vscene__stem::before { content: ""; position: absolute; left: -1px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #0084C2; }
.vscene__card { position: absolute; left: 0; bottom: calc(var(--stem, 80px) + 12px); width: var(--pw, 320px); transform: var(--vtf); transform-origin: bottom center; }
.vscene__card .lw__card { box-shadow: 0 22px 44px -14px rgba(18, 35, 63, .3), 0 4px 14px rgba(18, 35, 63, .08); }
html.motion .vscene__pin:has(.lw--in) .vscene__dot { animation: vscPop .6s cubic-bezier(.34, 1.56, .64, 1) var(--vd, 0s) backwards; }
html.motion .vscene__pin:has(.lw--in) .vscene__stem { animation: vscStem .65s cubic-bezier(.25, .8, .25, 1) calc(.18s + var(--vd, 0s)) backwards; }
html.motion .vscene__pin:has(.lw--in) .vscene__card { animation: vscCard .9s cubic-bezier(.22, 1, .36, 1) calc(.48s + var(--vd, 0s)) backwards; }
@keyframes vscPop { from { transform: scale(0); } }
@keyframes vscStem { from { transform: scaleY(0); } }
@keyframes vscCard { from { opacity: 0; transform: var(--vtf) translateY(18px) scale(.96); } }
@keyframes vscRing { 0% { transform: scale(.4); opacity: .9; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@media (max-width: 980px) {
  .vscene { padding-top: calc(var(--pt, 210px) * .82); }
  .vscene__pin { --vs: .78; }
  .vscene__stem { height: calc(var(--stem, 80px) * .78); }
  .vscene__card { bottom: calc(var(--stem, 80px) * .78 + 10px); }
}
@media (max-width: 840px) {
  .vscene { padding-top: calc(var(--pt, 210px) * .68); }
  .vscene__pin { --vs: .62; }
  .vscene__stem { height: calc(var(--stem, 80px) * .62); }
  .vscene__card { bottom: calc(var(--stem, 80px) * .62 + 8px); }
}
@media (max-width: 700px) {
  .vscene { padding-top: 0; }
  .vscene__pin { position: static; }
  .vscene__stem, .vscene__dot { display: none; }
  .vscene__card { position: static; width: min(var(--pw, 320px), 100%); margin: 14px auto 0; transform: none; animation: none !important; }
}

/* Half-width live scenes: .vscene-duo grid puts the section text beside a
   contained scene instead of a full-bleed image (owner request July 17: the
   panoramic scenes were huge). Cards run the .62 pin scale at ALL widths
   >=901px because the scene column is ~half the old bleed width; --pt is a
   fixed per-scene inline px value tuned for that column (the old bleed
   vw-formulas assumed a 100vw image, so they were replaced in the HTML). */
.vscene-duo { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: 26px 60px; align-items: center; }
.vscene-duo__txt .lead { margin: 0; }
@media (min-width: 901px) {
  .vscene-duo .vscene { width: 100%; margin-left: 0; transform: none; padding-top: var(--pt, 190px); }
  .vscene-duo .vscene__pin { --vs: .62; }
  .vscene-duo .vscene__stem { height: calc(var(--stem, 80px) * .62); }
  .vscene-duo .vscene__card { bottom: calc(var(--stem, 80px) * .62 + 8px); }
}
@media (min-width: 901px) and (max-width: 1160px) {
  .vscene-duo .vscene__pin { --vs: .52; }
  .vscene-duo .vscene__stem { height: calc(var(--stem, 80px) * .52); }
  .vscene-duo .vscene__card { bottom: calc(var(--stem, 80px) * .52 + 8px); }
}
@media (max-width: 900px) {
  .vscene-duo { grid-template-columns: 1fr; }
  .vscene-duo__txt { text-align: center; max-width: 620px; margin: 0 auto; }
  .vscene-duo__txt .lead { margin: 0 auto; }
}

/* ---- fleet utilization (vertical day bars, SVG) ---- */
.lw-fu__card { padding: 14px 16px 11px; }
.lw-fu__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lw-fu__ttl b { display: block; font-size: 13.5px; font-weight: 800; color: var(--lw-ink); }
.lw-fu__ttl span { font-size: 10px; color: var(--lw-mut); }
.lw-fu__kpi { text-align: right; flex: none; }
.lw-fu__kpi b { display: block; font-size: 21px; font-weight: 800; line-height: 1; color: var(--lw-navy); font-feature-settings: "tnum" 1; }
.lw-fu__kpi i { font-style: normal; font-size: 9px; font-weight: 800; color: #1E8E5A; }
.lw-fu__svg { display: block; width: 100%; height: auto; }
.lw-fu__svg text { font-family: var(--font); }
.lw-fu__gl { stroke: #E1E8EF; stroke-width: 1; }
.lw-fu__gl--soft { stroke: #EFF3F8; }
.lw-fu__bar { fill: url(#lwFuG); }
.lw-fu__bar.wkend { fill: #C7D6E5; }
.lw-fu__val { font-size: 8.5px; font-weight: 700; fill: #55637a; text-anchor: middle; font-feature-settings: "tnum" 1; }
.lw-fu__val--in { fill: #fff; }
.lw-fu__day { font-size: 9px; font-weight: 600; fill: #97A3B4; text-anchor: middle; }
.lw-fu__pill rect { fill: var(--lw-navy); }
.lw-fu__pill text { font-size: 8.5px; font-weight: 800; fill: #fff; text-anchor: middle; }
.lw-fu__hit { fill: transparent; }
.lw-fu__tip { opacity: 0; transform: translateY(3px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.lw-fu__tip rect { fill: #1C2B39; opacity: .95; }
.lw-fu__tip text { font-size: 8.5px; font-weight: 700; fill: #fff; text-anchor: middle; }
.lw-fu__g:hover .lw-fu__tip { opacity: 1; transform: translateY(0); }
.lw-fu__ft { display: flex; align-items: center; gap: 6px; border-top: 1px solid #f1f4f8; margin-top: 8px; padding-top: 8px; font-size: 9.5px; color: var(--lw-mut); }
.lw-fu__live { width: 7px; height: 7px; border-radius: 50%; background: #2FA045; flex: none; }
html.motion .lw-fu__live { animation: lwFuPulse 2.4s ease-in-out 1.2s infinite; }
@keyframes lwFuPulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { html.motion .lw-fu__live { animation: none !important; } }

/* ---- vehicle-scene support widgets (pto / route / stops / assignments) ---- */
.lw-pto__ft { font-size: 9.5px; color: var(--lw-mut); border-top: 1px solid #f1f4f8; margin-top: 8px; padding-top: 8px; }
.lw-rp__card { padding: 14px 16px 12px; }
.lw-rp__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lw-rp__hd b { font-size: 13px; font-weight: 800; color: var(--lw-ink); }
.lw-rp__big { margin-top: 10px; font-size: 11.5px; color: var(--lw-mut); }
.lw-rp__big b { font-size: 20px; font-weight: 800; color: var(--lw-navy); font-feature-settings: "tnum" 1; }
.lw-rp__big i { font-style: normal; float: right; font-size: 13px; font-weight: 800; color: var(--lw-blue); margin-top: 6px; }
.lw-rp__row { display: grid; grid-template-columns: 92px 1fr 36px; gap: 9px; align-items: center; margin-top: 10px; }
.lw-rp__row > span { font-size: 10.5px; font-weight: 600; color: #55637a; }
.lw-rp__row .lw-sav__val { text-align: right; }
/* Guard: section-level paragraph typography must not restyle widget captions
   (.lw p notes render inside .section vscenes on several pages). */
.lw .lw-sav__note, .section .lw .lw-sav__note { font-size: 9.5px; font-weight: 400; color: #9aa6b6; text-align: right; margin: 6px 0 0; line-height: 1.4; }
.lw-sec__badge.red { color: #C0392B; background: #FBE9E6; }
.lw-sec__badge.amber { color: #A96A00; background: #FBF1DC; }
.vscene__pin--off { display: none; }
/* Standalone mode (data-media="standalone" on the acc item): widget card only, no device photo */
.vscene--solo { padding-top: 0; }
.vscene--solo .vscene__veh, .vscene--solo .vscene__stem, .vscene--solo .vscene__dot { display: none; }
.vscene--solo .vscene__pin { position: static; }
.vscene--solo .vscene__card { position: static; width: min(400px, 100%); margin: 0 auto; transform: none; animation: none !important; }

/* ---- camera dashboard widgets (from pilot screenshots) ---- */
.lw-evchip { font-size: 9.5px; font-weight: 800; color: #C0392B; background: #FBE9E6; border-radius: 999px; padding: 2px 8px; flex: none; }
.lw-evf__card { padding: 14px 16px 12px; }
.lw-evf__grp { margin-top: 10px; }
.lw-evf__grp > span { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #97A3B4; margin-bottom: 5px; }
.lw-evf__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lw-evf__chips i { font-style: normal; font-size: 8.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #EEF2F6; color: #55637a; }
.lw-evf__chips i.on { background: var(--lw-blue); color: #fff; }
.lw-td__card { padding: 14px 16px 12px; }
.lw-td__stop { display: flex; gap: 9px; margin-top: 11px; }
.lw-td__stop i { width: 9px; height: 9px; border: 2px solid var(--lw-navy); border-radius: 50%; margin-top: 3px; flex: none; }
.lw-td__stop--end { margin-top: 0; }
.lw-td__stop--end i { border-radius: 2px; background: var(--lw-navy); }
.lw-td__stop b { display: block; font-size: 10.5px; font-weight: 700; color: var(--lw-ink); }
.lw-td__stop span { font-size: 9.5px; color: var(--lw-mut); font-feature-settings: "tnum" 1; }
.lw-td__line { width: 2px; height: 12px; background: #C7D2DE; margin: 2px 0 2px 5.5px; }
.lw-td__stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; padding-top: 9px; border-top: 1px solid #f1f4f8; }
.lw-td__stats span { display: block; font-size: 9px; color: var(--lw-mut); }
.lw-td__stats b { font-size: 12px; font-weight: 800; color: var(--lw-navy); font-feature-settings: "tnum" 1; }
.lw-tr__tgl { width: 26px; height: 15px; border-radius: 999px; background: var(--lw-blue); flex: none; position: relative; }
.lw-tr__tgl::after { content: ""; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.lw-tr__card .lw-sec__lab { margin-right: auto; }
.lw-cr__card { padding: 14px 16px 12px; }
.lw-cr__grp { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; margin-top: 11px; }
.lw-cr__grp > span { font-size: 10.5px; font-weight: 600; color: #55637a; }
.lw-cr__seg { display: flex; gap: 3px; flex-wrap: wrap; }
.lw-cr__seg i { font-style: normal; font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: #EEF2F6; color: #55637a; font-feature-settings: "tnum" 1; }
.lw-cr__seg i.on { background: var(--lw-navy); color: #fff; }
.lw-cr__split { display: flex; height: 16px; border-radius: 4px; overflow: hidden; }
.lw-cr__split b { background: var(--lw-blue); color: #fff; font-size: 8.5px; font-weight: 700; display: flex; align-items: center; padding-left: 6px; white-space: nowrap; overflow: hidden; }
.lw-cr__split b.ev { background: #F2A32C; justify-content: center; padding: 0; }
.lw-ci__card { padding: 14px 16px 12px; }
.lw-ci__stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.lw-ci__up { font-style: normal; font-size: 8.5px; font-weight: 800; color: #1E8E5A; }
.lw-ci__ins { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 10.5px; font-weight: 700; color: #1E8E5A; background: #E4F3EB; border-radius: 8px; padding: 7px 10px; }
.lw-ci__ins i { width: 7px; height: 7px; border-radius: 50%; background: #2FA045; flex: none; }
.lw-sdi__chk { width: 14px; height: 14px; border-radius: 4px; background: var(--lw-blue); flex: none; position: relative; }
.lw-sdi__chk::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lw-sdi__chk.off { background: #fff; border: 1.5px solid #C7D2DE; }
.lw-sdi__chk.off::after { display: none; }
.lw-sdi__card .lw-sec__lab { margin-right: auto; }
.lw-ssp__pair { display: flex; align-items: center; gap: 9px; margin-top: 13px; flex-wrap: wrap; }
.lw-ssp__sign { width: 36px; height: 42px; border: 2px solid #2B3A4E; border-radius: 6px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 1px 3px rgba(18, 35, 63, .18); flex: none; }
.lw-ssp__sign span { font-size: 5.5px; font-weight: 700; letter-spacing: .04em; color: #1C2B39; text-align: center; line-height: 1.15; }
.lw-ssp__sign b { font-size: 14px; font-weight: 800; color: #1C2B39; line-height: 1; font-feature-settings: "tnum" 1; }
.lw-ssp__arrow { color: #97A3B4; font-size: 13px; }
.lw-ssp__chip { font-size: 9.5px; font-weight: 800; border-radius: 999px; padding: 3px 9px; }
.lw-ssp__chip.over { color: #C0392B; background: #FBE9E6; }
.lw-ssp__chip.link { color: #2A6FC0; background: #E5EFFA; }
.lw-vc__chips { display: flex; align-items: center; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.lw-vc__chips > b { font-size: 11.5px; font-weight: 700; color: var(--lw-ink); }
.lw-vc__more { font-size: 9.5px; font-weight: 800; color: #55637a; background: #EEF2F6; border-radius: 999px; padding: 2px 8px; }
.lw-vc__meta { font-size: 10px; color: var(--lw-mut); margin-top: 10px; }
.lw-ds__card { padding: 14px 16px 12px; }
.lw-ds__row { display: grid; grid-template-columns: 1fr 30px 92px; gap: 9px; align-items: center; margin-top: 10px; }
.lw-ds__row > span { font-size: 11px; font-weight: 600; color: #34435a; }
.lw-ds__row > b { font-size: 11.5px; font-weight: 800; text-align: right; font-feature-settings: "tnum" 1; }
.lw-ds__bar { display: flex; gap: 2px; }
.lw-ds__bar i { height: 8px; flex: 1; border-radius: 2px; background: #EEF2F6; }
.lw-ds__bar i.on { background: var(--c, #0084C2); }

/* Ambient loop fade (JS adds .lw--loop at init, .lw--out before each reset) */
html.motion .lw--loop .lw__card > * { transition: opacity .75s ease; }
html.motion .lw--loop.lw--out .lw__card > * { opacity: 0 !important; }

/* ---- tap-to-try states (event-filters chips, retention segments, tamper toggles, driver-id checks, in-cab mode badges) ---- */
.lw-evf__chips i, .lw-cr__seg i, .lw-tr__tgl, .lw-sdi__chk, .lw-icc__mode { cursor: pointer; user-select: none; -webkit-user-select: none; }
.lw-evf__chips i { transition: background .22s ease, color .22s ease, transform .12s ease; }
.lw-evf__chips i:hover:not(.on), .lw-cr__seg i:hover:not(.on) { background: #DFE7F0; }
.lw-evf__chips i:active { transform: scale(.93); }
.lw-cr__seg i { transition: background .22s ease, color .22s ease; }
.lw-tr__tgl { transition: background .25s ease; }
.lw-tr__tgl::after { transition: transform .25s ease; }
.lw-tr__tgl.off { background: #C7D2DE; }
.lw-tr__tgl.off::after { transform: translateX(-11px); }
.lw-sec__row.is-off .lw-sec__lab { color: #97A3B4; }
.lw-sec__row.is-off .lw-sec__badge { opacity: .55; }
.lw-icc__mode { transition: background .22s ease, color .22s ease; }

/* ---- ace-welcome (lw-awl): welcome screen w/ topic chips + suggested questions; chips/suggestions are tap-to-try ---- */
.lw-awl__card { padding: 18px 16px 12px; }
.lw-awl__t { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14.5px; font-weight: 500; color: #354254; }
.lw-awl__spark { display: inline-flex; width: 15px; color: #0071CF; }
.lw-awl__spark svg { width: 100%; }
.lw-awl__sub { font-size: 10.5px; color: #5C6B7A; text-align: center; margin-top: 4px; }
.lw-awl__inp { display: flex; gap: 6px; margin: 12px 0 10px; }
.lw-awl__inp input { flex: 1; min-width: 0; border: 1px solid #C9D4E0; border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 11.5px; color: #354254; background: #fff; }
.lw-awl__inp input::placeholder { color: #97A3B4; }
.lw-awl__inp input:focus { outline: 2px solid rgba(0, 132, 194, .35); outline-offset: -1px; }
.lw-awl__send { flex: 0 0 auto; width: 32px; border: 0; border-radius: 6px; background: #0084C2; color: #fff; cursor: pointer; display: grid; place-items: center; }
.lw-awl__send svg { width: 15px; }
.lw-awl__send:hover { background: #0071CF; }
.lw-awl__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.lw-awl__chip { border: 1px solid #C9D4E0; border-radius: 999px; padding: 4px 10px; font-size: 10.5px; color: #354254; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background .22s ease, border-color .22s ease, color .22s ease, transform .12s ease; }
.lw-awl__chip:hover:not(.on) { background: #DFE7F0; }
.lw-awl__chip:active { transform: scale(.93); }
.lw-awl__chip.on { background: #E7F4FB; border-color: #0084C2; color: #0071CF; font-weight: 500; }
.lw-awl__sug { display: none; margin-top: 10px; border-top: 1px solid #E4EAF1; padding-top: 6px; }
.lw-awl__sug.on { display: block; }
.lw-awl__s { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 11px; color: #354254; cursor: pointer; }
.lw-awl__s:hover { background: #F2F6FA; }
.lw-awl__s svg { flex: 0 0 auto; width: 12px; color: #1E8E5A; }
.lw-awl__ft { font-size: 9.5px; color: #97A3B4; text-align: center; margin-top: 10px; }
html.motion .lw--in .lw-awl__t, html.motion .lw--in .lw-awl__sub { animation: lwAwIn .5s cubic-bezier(.2, .7, .2, 1) backwards; }
html.motion .lw--in .lw-awl__inp { animation: lwAwIn .5s cubic-bezier(.2, .7, .2, 1) .12s backwards; }
html.motion .lw--in .lw-awl__chip { animation: lwAwIn .4s cubic-bezier(.2, .7, .2, 1) backwards; }
html.motion .lw--in .lw-awl__chip:nth-child(1) { animation-delay: .2s; }
html.motion .lw--in .lw-awl__chip:nth-child(2) { animation-delay: .26s; }
html.motion .lw--in .lw-awl__chip:nth-child(3) { animation-delay: .32s; }
html.motion .lw--in .lw-awl__chip:nth-child(4) { animation-delay: .38s; }
html.motion .lw--in .lw-awl__chip:nth-child(5) { animation-delay: .44s; }
html.motion .lw--in .lw-awl__sug .lw-awl__s { animation: lwAwIn .4s cubic-bezier(.2, .7, .2, 1) backwards; }
html.motion .lw--in .lw-awl__sug .lw-awl__s:nth-child(1) { animation-delay: .5s; }
html.motion .lw--in .lw-awl__sug .lw-awl__s:nth-child(2) { animation-delay: .58s; }
html.motion .lw--in .lw-awl__sug .lw-awl__s:nth-child(3) { animation-delay: .66s; }
@keyframes lwAwIn { from { opacity: 0; transform: translateY(7px); } }

/* ---- ace-answer (lw-aa): question bubble > thinking skeleton > answer; ambient loop replays the sequence ---- */
.lw-aa__card { padding: 14px 16px 12px; }
.lw-aa__u { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 10px; color: #5C6B7A; }
.lw-aa__av { width: 16px; height: 16px; border-radius: 50%; background: #E7F4FB; border: 1px solid #9CCBE8; color: #0071CF; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.lw-aa__bub { margin: 6px 0 12px auto; width: fit-content; max-width: 85%; background: #E7F4FB; border: 1px solid #C6E4F4; border-radius: 10px 10px 3px 10px; padding: 7px 11px; font-size: 11.5px; color: #253243; }
.lw-aa__who { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; color: #354254; margin-bottom: 6px; }
.lw-aa__spark { display: inline-flex; width: 13px; color: #0071CF; }
.lw-aa__spark svg { width: 100%; }
.lw-aa__zone { display: grid; }
.lw-aa__zone > * { grid-area: 1 / 1; }
.lw-aa__skel { display: none; }
.lw-aa__sk { display: block; height: 11px; border-radius: 4px; margin-bottom: 7px; background: linear-gradient(90deg, #EEF2F7 25%, #DFE7F0 37%, #EEF2F7 63%); background-size: 400% 100%; }
.lw-aa__tip { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #5C6B7A; margin-top: 10px; }
.lw-aa__tip b { font-weight: 700; }
.lw-aa__spin { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #C6E4F4; border-top-color: #0084C2; }
.lw-aa__ans { border: 1px solid #E4EAF1; border-radius: 8px; padding: 10px 12px 8px; }
.lw-aa__ans p { margin: 0; font-size: 11.5px; color: #253243; }
.lw-aa__row { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #E4EAF1; border-bottom: 1px solid #E4EAF1; margin-top: 9px; padding: 7px 2px; font-size: 10.5px; color: #5C6B7A; }
.lw-aa__row b { color: #253243; font-size: 11.5px; }
.lw-aa__acts { display: flex; gap: 12px; padding: 8px 2px 2px; color: #7b8798; }
.lw-aa__acts svg { width: 13px; }
html.motion .lw--in .lw-aa__bub { animation: lwAwIn .45s cubic-bezier(.2, .7, .2, 1) backwards; }
html.motion .lw--in .lw-aa__who { animation: lwAwIn .45s cubic-bezier(.2, .7, .2, 1) .3s backwards; }
html.motion .lw--in .lw-aa__skel { display: block; animation: lwAaSkel 2.5s ease forwards; }
html.motion .lw--in .lw-aa__sk { animation: lwAaShim 1.1s linear infinite; }
html.motion .lw--in .lw-aa__ans { animation: lwAaAns .55s cubic-bezier(.2, .7, .2, 1) 2.5s backwards; }
@keyframes lwAaSkel { 0%, 80% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes lwAaShim { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes lwAaAns { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }

/* ---- asset-sidebar (lw-asb): status-sorted asset list w/ battery + no-signal rows ---- */
.lw-asb__sort { font-size: 10px; color: #7b8798; }
.lw-asb__card { padding: 13px 15px 12px; }
.lw-asb__r { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid #EEF2F7; }
.lw-asb__r:last-of-type { border-bottom: 0; }
.lw-asb__ico { flex: 0 0 auto; width: 20px; height: 20px; }
.lw-asb__ico svg { width: 100%; height: 100%; }
.lw-asb__m { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.lw-asb__m b { font-size: 11px; color: #253243; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-asb__m span { font-size: 10px; color: #5C6B7A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-asb__meta { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.lw-asb__bat { width: 22px; height: 10px; border: 1px solid #C9D4E0; border-radius: 2.5px; padding: 1.5px; display: inline-block; position: relative; }
.lw-asb__bat::after { content: ""; position: absolute; right: -3px; top: 2.5px; width: 2px; height: 5px; background: #C9D4E0; border-radius: 0 1px 1px 0; }
.lw-asb__bat i { display: block; height: 100%; border-radius: 1px; }
.lw-asb__meta em { font-style: normal; font-size: 9.5px; color: #5C6B7A; }
.lw-asb__r--off .lw-asb__m b, .lw-asb__r--off .lw-asb__m span { color: #97A3B4; }
.lw-asb__flag { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #B54708; background: #FEF0E6; border-radius: 999px; padding: 2px 7px; }
html.motion .lw--in .lw-asb__r { animation: lwAwIn .45s cubic-bezier(.2, .7, .2, 1) backwards; }
html.motion .lw--in .lw-asb__r:nth-of-type(2) { animation-delay: .1s; }
html.motion .lw--in .lw-asb__r:nth-of-type(3) { animation-delay: .2s; }
html.motion .lw--in .lw-asb__r:nth-of-type(4) { animation-delay: .3s; }
html.motion .lw--in .lw-asb__r:nth-of-type(5) { animation-delay: .4s; }

/* ---- go-device (lw-gd): GO Anywhere device card + tap-to-try mode radios ---- */
.lw-gd__card { padding: 14px 15px 12px; }
.lw-gd__hd { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #E4EAF1; }
.lw-gd__hd b { font-size: 12.5px; color: #253243; }
.lw-gd__ser { margin-left: auto; font-size: 9.5px; color: #97A3B4; }
.lw-gd__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px 0; font-size: 11px; color: #5C6B7A; }
.lw-gd__batwrap { display: flex; align-items: center; gap: 7px; }
.lw-gd__batwrap b { font-size: 11.5px; color: #253243; }
.lw-gd__batbar { width: 74px; height: 7px; border-radius: 4px; background: #EEF2F7; overflow: hidden; }
.lw-gd__batbar i { display: block; height: 100%; border-radius: 4px; background: #1E8E5A; }
html.motion .lw--in .lw-gd__batbar i { animation: lwGdBat 1s cubic-bezier(.2, .7, .2, 1) .3s backwards; }
@keyframes lwGdBat { from { width: 0 !important; } }
.lw-gd__note { font-size: 9.5px; color: #97A3B4; text-align: right; padding: 2px 2px 0; }
.lw-gd__ok { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #1E8E5A; }
.lw-gd__ok svg { width: 14px; }
.lw-gd__lab { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7b8798; margin: 12px 2px 5px; }
.lw-gd__opt { display: flex; gap: 9px; align-items: flex-start; padding: 7px 8px; border: 1px solid #E4EAF1; border-radius: 8px; margin-bottom: 6px; cursor: pointer; user-select: none; -webkit-user-select: none; transition: border-color .22s ease, background .22s ease; }
.lw-gd__opt:hover:not(.on) { background: #F2F6FA; }
.lw-gd__opt.on { border-color: #0084C2; background: #F0F8FC; }
.lw-gd__rad { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 1px; border-radius: 50%; border: 1.5px solid #C9D4E0; position: relative; transition: border-color .2s ease; }
.lw-gd__opt.on .lw-gd__rad { border-color: #0071CF; }
.lw-gd__opt.on .lw-gd__rad::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #0071CF; }
.lw-gd__opt b { display: block; font-size: 11px; color: #253243; }
.lw-gd__opt span { font-size: 10px; color: #5C6B7A; }

/* ---- zone-draw (lw-zd): zone creation map; draw sequence replays via ambient loop ---- */
.lw-zd__card { padding: 0 0 11px; }
.lw-zd__card .lw-rp__hd { padding: 13px 15px 0; }
.lw-zd__card .lw-pto__ft { margin: 11px 15px 0; padding-top: 9px; }
.lw-zd__map { display: block; width: 100%; height: auto; border-radius: 0; margin-top: 11px; }
.lw-zd__btns { display: flex; gap: 6px; }
.lw-zd__btns i { font-style: normal; font-size: 10px; font-weight: 600; border-radius: 5px; padding: 3px 9px; }
.lw-zd__cancel { color: #B42318; background: #FBEAE8; }
.lw-zd__save { color: #fff; background: #0084C2; }
html.motion .lw--in .lw-zd__zone { animation: lwZdZone .8s ease .15s backwards; transform-origin: 172px 128px; }
html.motion .lw--in .lw-zd__ztag { animation: lwAwIn .4s ease .7s backwards; }
html.motion .lw--in .lw-zd__zone2 { animation: lwZdZone .7s ease .55s backwards; transform-origin: 368px 106px; }
html.motion .lw--in .lw-zd__h { animation: lwZdFade .3s ease .8s backwards; }
@keyframes lwZdZone { from { opacity: 0; transform: scale(.6); } }
@keyframes lwZdLine { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes lwZdFade { from { opacity: 0; } }
@keyframes lwZdDot { from { opacity: 0; r: 1; } }

/* ---- trip-replay (lw-rpl): replay player; internal infinite progress, play btn pauses ---- */
.lw-rpl__card { padding: 14px 16px 12px; }
.lw-rpl__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 9px 0 11px; }
.lw-rpl__st { background: #F5F8FB; border-radius: 7px; padding: 6px 8px; }
.lw-rpl__st b { display: block; font-size: 12px; color: #253243; }
.lw-rpl__st span { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: #7b8798; }
.lw-rpl__bar { display: flex; align-items: center; gap: 9px; background: #12233F; border-radius: 8px; padding: 8px 11px; }
.lw-rpl__play { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #0084C2; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s ease, transform .12s ease; }
.lw-rpl__play:hover { background: #00AEFF; }
.lw-rpl__play:active { transform: scale(.9); }
.lw-rpl__play svg { width: 13px; }
.lw-rpl__pi { display: none; }
.lw-rpl__pa, .lw-rpl__pi { line-height: 0; }
.lw-rpl__card.paused .lw-rpl__pi { display: block; }
.lw-rpl__card.paused .lw-rpl__pa { display: none; }
.lw-rpl__track { position: relative; flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.lw-rpl__fill { position: absolute; inset: 0 auto 0 0; width: 66%; border-radius: 3px; background: #00AEFF; }
html.motion .lw--in .lw-rpl__fill { animation: lwRplGo 9s linear infinite; }
html.motion .lw-rpl__card.paused .lw-rpl__fill { animation-play-state: paused; }
.lw-rpl__dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; color: #12233F; font-style: normal; font-size: 8.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.lw-rpl__time { font-size: 10px; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }
.lw-rpl__spd { font-size: 9px; font-weight: 700; color: #12233F; background: #fff; border-radius: 4px; padding: 2px 5px; }
@keyframes lwRplGo { from { width: 0; } to { width: 100%; } }

/* ---- polish: asset-sidebar live pulse + trip-replay stop dots light with the playhead ---- */
.lw-asb__ico--live { position: relative; }
.lw-asb__ico--live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(0, 132, 194, .45); opacity: 0; }
html.motion .lw--in .lw-asb__ico--live::after { animation: vscRing 2.6s ease-out 1s infinite; }
.lw-rpl__track .lw-rpl__dot:nth-of-type(2), .lw-rpl__track .lw-rpl__dot:nth-of-type(3), .lw-rpl__track .lw-rpl__dot:nth-of-type(4) { background: #00AEFF; color: #fff; }
html.motion .lw--in .lw-rpl__track .lw-rpl__dot:nth-of-type(2) { animation: lwRplD1 9s linear infinite; }
html.motion .lw--in .lw-rpl__track .lw-rpl__dot:nth-of-type(3) { animation: lwRplD2 9s linear infinite; }
html.motion .lw--in .lw-rpl__track .lw-rpl__dot:nth-of-type(4) { animation: lwRplD3 9s linear infinite; }
html.motion .lw--in .lw-rpl__track .lw-rpl__dot:nth-of-type(5) { animation: lwRplD4 9s linear infinite; }
html.motion .lw--in .lw-rpl__track .lw-rpl__dot:nth-of-type(6) { animation: lwRplD5 9s linear infinite; }
html.motion .lw-rpl__card.paused .lw-rpl__dot { animation-play-state: paused; }
@keyframes lwRplD1 { 0%, 11.9% { background: #fff; color: #12233F; } 12%, 100% { background: #00AEFF; color: #fff; } }
@keyframes lwRplD2 { 0%, 30.9% { background: #fff; color: #12233F; } 31%, 100% { background: #00AEFF; color: #fff; } }
@keyframes lwRplD3 { 0%, 49.9% { background: #fff; color: #12233F; } 50%, 100% { background: #00AEFF; color: #fff; } }
@keyframes lwRplD4 { 0%, 70.9% { background: #fff; color: #12233F; } 71%, 100% { background: #00AEFF; color: #fff; } }
@keyframes lwRplD5 { 0%, 87.9% { background: #fff; color: #12233F; } 88%, 100% { background: #00AEFF; color: #fff; } }

/* ---- fleet-live (lw-fl): live ops map, labeled pins + one detail popup; replaces deleted cluster-map ---- */
.lw-fl__card { padding: 13px 15px 12px; }
.lw-fl__live { font-size: 10px; font-weight: 700; color: #1E8E5A; letter-spacing: .03em; }
.lw-fl__wrap { position: relative; margin-top: 8px; }
.lw-fl__clip { position: relative; border-radius: 8px; overflow: hidden; }
.lw-fl__map { display: block; width: 100%; height: auto; }
.lw-fl__pin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.lw-fl__flag { background: #12233F; color: #fff; font-size: 8.5px; font-weight: 600; border-radius: 4px; padding: 2px 6px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.lw-fl__ico { width: 19px; height: 19px; position: relative; }
.lw-fl__ico svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(18, 35, 63, .35)); }
.lw-fl__pin--hot .lw-fl__ico::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(0, 132, 194, .5); opacity: 0; }
html.motion .lw--in .lw-fl__pin--hot .lw-fl__ico::after { animation: vscRing 2.6s ease-out 1.4s infinite; }
.lw-fl__pop { position: absolute; right: 10px; bottom: 10px; background: #fff; border-radius: 8px; box-shadow: 0 6px 18px rgba(18, 35, 63, .18); padding: 8px 11px; display: flex; flex-direction: column; gap: 2px; max-width: 60%; }
.lw-fl__pop b { font-size: 10.5px; color: #253243; }
.lw-fl__pop span { font-size: 9.5px; color: #5C6B7A; }
.lw-fl__pop em { font-style: normal; font-size: 9px; color: #97A3B4; }
html.motion .lw--in .lw-fl__pin { animation: lwFlPop .5s cubic-bezier(.34, 1.56, .64, 1) .15s backwards; }
html.motion .lw--in .lw-fl__pin:nth-of-type(2) { animation-delay: .3s; }
html.motion .lw--in .lw-fl__pin:nth-of-type(3) { animation-delay: .45s; }
html.motion .lw--in .lw-fl__pop { animation: lwAwIn .5s cubic-bezier(.2, .7, .2, 1) .9s backwards; }
@keyframes lwFlPop { from { opacity: 0; transform: translate(-50%, -68%) scale(.4); } }

/* ---- entrances for previously-static cards (owner note July 17: "some widgets have no animation"):
   retention groups, coaching/fuel stat boxes, smart-speeding pieces, video-coaching chips,
   trip-detail stops, idling-group rows, and card footers. Base state stays final (no-JS safe). ---- */
html.motion .lw--in .lw-cr__grp, html.motion .lw--in .lw-ins__box, html.motion .lw--in .lw-ssp__pair > *,
html.motion .lw--in .lw-vc__chips, html.motion .lw--in .lw-vc__meta, html.motion .lw--in .lw-td__card .lw-td__stop,
html.motion .lw--in .lw-td__stats, html.motion .lw--in .lw-ig__row, html.motion .lw--in .lw-ig__r { opacity: 0; transform: translateY(6px); animation: lwRowUp .7s var(--ease) forwards; }
html.motion .lw--in .lw-cr__grp:nth-child(3), html.motion .lw--in .lw-ins__box:nth-child(2), html.motion .lw--in .lw-ssp__pair > *:nth-child(2), html.motion .lw--in .lw-ig__row:nth-child(3), html.motion .lw--in .lw-ig__r:nth-child(3) { animation-delay: .10s; }
html.motion .lw--in .lw-cr__grp:nth-child(4), html.motion .lw--in .lw-ins__box:nth-child(3), html.motion .lw--in .lw-ssp__pair > *:nth-child(3), html.motion .lw--in .lw-vc__meta, html.motion .lw--in .lw-ig__row:nth-child(4), html.motion .lw--in .lw-ig__r:nth-child(4) { animation-delay: .20s; }
html.motion .lw--in .lw-ssp__pair > *:nth-child(4), html.motion .lw--in .lw-td__card .lw-td__stop--end, html.motion .lw--in .lw-ig__row:nth-child(5), html.motion .lw--in .lw-ig__r:nth-child(5) { animation-delay: .30s; }
html.motion .lw--in .lw-td__stats { animation-delay: .45s; }
html.motion .lw--in .lw-td__card .lw-td__line { transform-origin: top; animation: lwGrowY .45s var(--ease) .22s both; }
@keyframes lwGrowY { from { transform: scaleY(0); } }
html.motion .lw-pto__ft, html.motion .lw-sav__note { opacity: 0; }
html.motion .lw--in .lw-pto__ft, html.motion .lw--in .lw-sav__note { transition: opacity .6s ease .55s; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.motion .lw--in .lw-cr__grp, html.motion .lw--in .lw-ins__box, html.motion .lw--in .lw-ssp__pair > *,
  html.motion .lw--in .lw-vc__chips, html.motion .lw--in .lw-vc__meta, html.motion .lw--in .lw-td__card .lw-td__stop,
  html.motion .lw--in .lw-td__stats, html.motion .lw--in .lw-ig__row, html.motion .lw--in .lw-ig__r { opacity: 1 !important; transform: none !important; animation: none !important; }
  html.motion .lw--in .lw-td__card .lw-td__line { animation: none !important; }
  html.motion .lw-pto__ft, html.motion .lw-sav__note { opacity: 1 !important; }
}

/* ---- improvement pass batch 1 (July 17): entrances for the seven static cards
   (dvir, hos-availability, email-alert, keyless-mobile, predictive-safety,
   rewards-mobile, maint-detail). Base state stays final; motion-only. ---- */
html.motion .lw--in .lw-dvir__row, html.motion .lw--in .lw-dvir__r, html.motion .lw--in .lw-hos__row, html.motion .lw--in .lw-hos__r,
html.motion .lw--in .lw-mail__subj, html.motion .lw--in .lw-mail__txt, html.motion .lw--in .lw-mail__more,
html.motion .lw--in .lw-kl__veh, html.motion .lw--in .lw-kl__state, html.motion .lw--in .lw-kl__row,
html.motion .lw--in .lw-ps__c, html.motion .lw--in .lw-rw__cat, html.motion .lw--in .lw-md__f { opacity: 0; transform: translateY(6px); animation: lwRowUp .7s var(--ease) forwards; }
html.motion .lw--in .lw-dvir__row:nth-child(3), html.motion .lw--in .lw-dvir__r:nth-child(3), html.motion .lw--in .lw-hos__row:nth-child(3), html.motion .lw--in .lw-hos__r:nth-child(3),
html.motion .lw--in .lw-mail__txt, html.motion .lw--in .lw-kl__state, html.motion .lw--in .lw-ps__c:nth-child(2), html.motion .lw--in .lw-rw__cat:nth-child(2), html.motion .lw--in .lw-md__f:nth-child(2) { animation-delay: .10s; }
html.motion .lw--in .lw-hos__row:nth-child(4), html.motion .lw--in .lw-hos__r:nth-child(4), html.motion .lw--in .lw-mail__more,
html.motion .lw--in .lw-kl__row, html.motion .lw--in .lw-ps__c:nth-child(3), html.motion .lw--in .lw-rw__cat:nth-child(3), html.motion .lw--in .lw-md__f:nth-child(3) { animation-delay: .20s; }
html.motion .lw--in .lw-hos__row:nth-child(5), html.motion .lw--in .lw-hos__r:nth-child(5), html.motion .lw--in .lw-rw__cat:nth-child(4), html.motion .lw--in .lw-md__f:nth-child(4) { animation-delay: .30s; }
html.motion .lw--in .lw-md__f:nth-child(5) { animation-delay: .40s; }
html.motion .lw--in .lw-md__f:nth-child(6) { animation-delay: .50s; }
html.motion .lw--in .lw-dvir__chk, html.motion .lw--in .lw-hos__ico { transform: scale(0); animation: lwPop .5s cubic-bezier(.34, 1.56, .64, 1) .4s forwards; }
@keyframes lwPop { to { transform: scale(1); } }
html.motion .lw--in .lw-mail__ico { transform-origin: 50% 10%; animation: lwRock .9s var(--ease) .25s; }
@keyframes lwRock { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } }
html.motion .lw--in .lw-ps__spark polyline, html.motion .lw--in .lw-ps__spark path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: lwSparkDraw 1.4s var(--ease) .45s forwards; }
@keyframes lwSparkDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.motion .lw--in .lw-dvir__row, html.motion .lw--in .lw-dvir__r, html.motion .lw--in .lw-hos__row, html.motion .lw--in .lw-hos__r,
  html.motion .lw--in .lw-mail__subj, html.motion .lw--in .lw-mail__txt, html.motion .lw--in .lw-mail__more,
  html.motion .lw--in .lw-kl__veh, html.motion .lw--in .lw-kl__state, html.motion .lw--in .lw-kl__row,
  html.motion .lw--in .lw-ps__c, html.motion .lw--in .lw-rw__cat, html.motion .lw--in .lw-md__f,
  html.motion .lw--in .lw-dvir__chk, html.motion .lw--in .lw-hos__ico { opacity: 1 !important; transform: none !important; animation: none !important; }
  html.motion .lw--in .lw-mail__ico { animation: none !important; }
  html.motion .lw--in .lw-ps__spark polyline, html.motion .lw--in .lw-ps__spark path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* review fixes July 17 (owner): recovery-mode "new" badge is brand blue (alert-feed stays red); Ace SQL block clears its own scrollbar + buttons; fleet-live hot-unit ring */
.lw-rm .lw-af__new { background: var(--lw-link); }
.lw-ace__sql { overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin; }
.lw-aq__card .lw-ace__sql { margin-bottom: 12px; }
.lw-fl__hotring { transform-box: fill-box; transform-origin: center; opacity: 0; }
html.motion .lw-fl__hotring { animation: lwFlRing 2.4s ease-out infinite; }
@keyframes lwFlRing { 0% { transform: scale(.55); opacity: .7; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.motion .lw-fl__hotring { animation: none !important; } }

/* Diagnostics + Maintenance Overview (GO Anywhere Plus health scene) */
.lw-dg__card, .lw-mo__card { padding: 14px 18px 12px; }
.lw-dg__hd { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 2px solid #E7EDF4; }
.lw-dg__hd b { font-size: 14.5px; color: #1C2B39; }
.lw-dg__hd .lw-ico { width: 20px; height: 20px; }
.lw-dg__hdico { color: #0084C2; }
.lw-dg__row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid #EEF2F7; }
.lw-dg__row:last-child { border-bottom: 0; padding-bottom: 4px; }
.lw-dg__row .lw-ico { width: 20px; height: 20px; color: #3D5468; }
.lw-dg__bd { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.lw-dg__bd span { font-size: 11.5px; color: #5B7186; }
.lw-dg__bd b { font-size: 16px; color: #1C2B39; }
.lw-dg__bd i { font-style: normal; font-size: 11px; color: #5B7186; font-weight: 600; }
.lw-dg__chev { color: #9FB1C1; font-size: 19px; line-height: 1; }
.lw-mo__row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #EEF2F7; font-size: 13px; color: #3D5468; }
.lw-mo__row:last-child { border-bottom: 0; padding-bottom: 4px; }
.lw-mo__row b { color: #0060A9; font-size: 15.5px; }