/* TruckRouteViewer — shared by the developer sandbox and the truck-route showcase.
   Light/dark via html[data-theme="dark"]; stacks (map above plan) under 820 px. */
.trv { --trv-bg:#FBFCFA; --trv-sfc:#EFF2EC; --trv-line:rgba(23,30,26,.12); --trv-on1:#171E1A; --trv-on2:rgba(23,30,26,.64);
  --trv-go:#067A46; --trv-gps:#1663D8; --trv-warn:#B85C00; --trv-alert:#C7291E; --trv-route:#1A73E8;
  color:var(--trv-on1); font-size:.9rem; line-height:1.35; min-width:0; max-width:100%; box-sizing:border-box; }
html[data-theme="dark"] .trv { --trv-bg:#171C22; --trv-sfc:#212831; --trv-line:rgba(244,247,245,.10); --trv-on1:#F4F7F5; --trv-on2:rgba(244,247,245,.66);
  --trv-go:#35C979; --trv-gps:#58A6FF; --trv-warn:#FFC24B; --trv-alert:#FF6B5E; --trv-route:#669DF6; }
.trv *, .trv *::before, .trv *::after { box-sizing:border-box; }
.trv-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.trv.trv-wide .trv-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start; }
.trv.trv-wide .trv-mapcol { position:sticky; top:12px; }
.trv.trv-wide .trv-plan { max-height:560px; overflow-y:auto; }
.trv-map { height:420px; border-radius:14px; overflow:hidden; background:#E9ECE6; display:flex; align-items:center; justify-content:center; border:1px solid var(--trv-line); }
html[data-theme="dark"] .trv-map { background:#14181D; }
@media (max-width:600px) { .trv-map { height:300px; } }
.trv-ph, .trv-nogeom { font-size:.85rem; color:var(--trv-on2); }
.trv-legend { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.trv-legend label { display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 6px; border:1px solid var(--trv-line); border-radius:999px; background:var(--trv-bg); font-size:.78rem; font-weight:600; cursor:pointer; user-select:none; }
.trv-legend input { margin:0; accent-color:var(--trv-route); }
.trv-legend small { color:var(--trv-on2); font-weight:500; }
.trv-legend img { width:18px; height:18px; object-fit:contain; }
.trv-exp { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 10px; font-size:.82rem; }
.trv-exp > span { font-weight:600; color:var(--trv-on2); }
.trv-xb { display:inline-block; padding:5px 10px; border:1px solid var(--trv-line); border-radius:8px; background:var(--trv-sfc); color:var(--trv-on1); text-decoration:none; font-weight:600; }
.trv-xb:hover { border-color:var(--trv-route); }
.trv-totals { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px; }
.trv-totals div { border:1px solid var(--trv-line); border-radius:12px; padding:8px 10px; background:var(--trv-bg); min-width:0; }
.trv-totals span { display:block; font-size:.72rem; color:var(--trv-on2); text-transform:uppercase; letter-spacing:.04em; }
.trv-totals strong { display:block; font-size:1rem; overflow-wrap:anywhere; }
.trv-totals em { display:block; font-style:normal; font-size:.74rem; color:var(--trv-on2); }
.trv-countries { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; font-size:.8rem; }
.trv-cl { font-weight:600; color:var(--trv-on2); margin-right:2px; }
.trv-chip { padding:3px 8px; border-radius:999px; background:var(--trv-sfc); border:1px solid var(--trv-line); }
.trv-alt { opacity:.85; }
.trv-warn { margin:8px 0 0; padding:8px 10px 8px 26px; border-radius:10px; background:rgba(255,176,32,.14); border:1px solid rgba(184,92,0,.3); font-size:.8rem; }
.trv-warn li { margin:2px 0; }
.trv-planhead { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:14px 0 6px; }
.trv-planhead h3 { margin:0; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--trv-on2); }
.trv-fit { border:1px solid var(--trv-line); background:var(--trv-sfc); color:var(--trv-on1); border-radius:8px; padding:4px 10px; font:inherit; font-size:.78rem; font-weight:600; cursor:pointer; }
.trv-plan { list-style:none; margin:0; padding:10px 8px; border:1px solid var(--trv-line); border-radius:18px; background:var(--trv-bg); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.trv-row { position:relative; display:flex; align-items:flex-start; gap:10px; padding:8px 6px 8px 4px; border-radius:12px; cursor:pointer; min-width:0; }
.trv-row:hover, .trv-row:focus-visible, .trv-row.on { background:var(--trv-sfc); outline:none; }
.trv-row::before { content:""; position:absolute; left:17px; top:0; bottom:0; width:3px; background:var(--trv-line); z-index:0; }
.trv-plan > li:first-child::before { top:22px; } .trv-plan > li:last-child::before { bottom:calc(100% - 22px); }
.trv-ic { position:relative; z-index:1; flex:0 0 28px; width:28px; height:28px; object-fit:contain; margin-top:1px; }
.trv-row.trv-k-weigh .trv-ic { width:22px; height:22px; flex-basis:22px; margin:4px 3px 0; }
.trv-no { position:absolute; z-index:2; left:22px; top:4px; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:#171E1A; color:#fff; border:1.5px solid #fff; font:700 9px/12px system-ui,sans-serif; text-align:center; font-style:normal; }
.trv-tx { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.trv-tx strong { font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trv-tx span { font-size:.8rem; color:var(--trv-on2); overflow-wrap:anywhere; }
.trv-tx .trv-kind { font-weight:600; color:var(--trv-gps); }
.trv-k-start .trv-kind, .trv-k-start .trv-tx > span:first-of-type { color:var(--trv-go); }
.trv-k-daily .trv-kind, .trv-k-ban .trv-kind { color:var(--trv-warn); }
.trv-k-weekly .trv-kind, .trv-k-end .trv-kind { color:var(--trv-alert); }
.trv-k-weigh .trv-kind { color:#6E7781; }
.trv-k-fuel .trv-kind { color:#12A150; }
.trv-k-border .trv-kind { color:var(--trv-go); }
.trv-ex { color:var(--trv-on1) !important; }
.trv-km { flex:0 0 auto; color:var(--trv-go); font-weight:900; font-size:.86rem; white-space:nowrap; padding-top:2px; }
.trv-seg { position:relative; padding:2px 6px 2px 40px; font-size:.76rem; color:var(--trv-on2); }
.trv-seg::before { content:""; position:absolute; left:17px; top:0; bottom:0; width:3px; background:repeating-linear-gradient(var(--trv-route) 0 5px, transparent 5px 9px); opacity:.6; }
.trv-price { display:inline-block; padding:1px 7px; border-radius:999px; border:1.5px solid var(--trv-route); font-weight:800; color:var(--trv-on1); background:var(--trv-bg); }
.trv-flag { display:inline-block; padding:1px 7px; border-radius:6px; background:rgba(255,176,32,.2); color:var(--trv-warn); font-weight:700; font-size:.74rem; }
.trv-flag.ok { background:rgba(6,122,70,.14); color:var(--trv-go); }
.trv-why { display:block; font-size:.76rem; color:var(--trv-on2); }
.trv-pop .maplibregl-popup-content { font-size:.82rem; line-height:1.35; padding:10px 12px; border-radius:10px; color:#171E1A; }
.trv-pop .maplibregl-popup-content div { margin-top:3px; }
.trv-pop .maplibregl-popup-content span:not(.trv-flag):not(.trv-price) { color:rgba(23,30,26,.64); }
.trv-pop .trv-kind { font-weight:600; color:#1663D8 !important; display:block; }
.trv-pop strong { display:block; }
.trv-pop .maplibregl-popup-content > span { display:block; }
.trv-pop .trv-pt { border-collapse:collapse; margin-top:4px; }
.trv-pop .trv-pt td { padding:1px 8px 1px 0; }
.trv-pop-dark .maplibregl-popup-content { background:#171C22; color:#F4F7F5; }
.trv-pop-dark .maplibregl-popup-content span:not(.trv-flag):not(.trv-price) { color:rgba(244,247,245,.7); }
.trv-pop-dark.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color:#171C22; }
.trv-pop-dark.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color:#171C22; }
.trv-pop-dark .maplibregl-popup-close-button { color:#F4F7F5; }
/* Sandbox tab toggle + run counter */
.trv-tabs { display:flex; gap:6px; margin:0 0 10px; flex-wrap:wrap; }
.trv-tabs button { border:1px solid var(--dv2-line, #cfd9e4); background:var(--dv2-surface, #fff); color:inherit; border-radius:999px; padding:6px 14px; font:inherit; font-size:.86rem; font-weight:600; cursor:pointer; }
.trv-tabs button[aria-selected="true"] { background:#1A73E8; border-color:#1A73E8; color:#fff; }
html[data-theme="dark"] .trv-tabs button { background:var(--dv2-surface, #1c2636); border-color:var(--dv2-line, #344459); }
html[data-theme="dark"] .trv-tabs button[aria-selected="true"] { background:#669DF6; border-color:#669DF6; color:#06141F; }
.trv-osm { display:block; width:100%; font-size:.72rem; color:var(--trv-on2); margin-top:2px; }
.trv-pop .trv-osm { color:inherit; opacity:.7; margin-top:4px; }