/* Storm Station 247: Fleet, the dispatch tool (src/fleet-edge.js, fleet.js).
 *
 * Owner, Oct 3, a review taken on the same day: "Use a paper background,
 * ink text, and a single accent. Risk colors stay dull and limited to the
 * road: green proceed, amber lengthen or slow, red exit, gray unknown. No
 * glow, no grid, no monospace for sentences. Mono only for mileposts and
 * segment ids." And later that day: the map is the site's own, the page is the
 * map, and the work sits in small windows opened from a row of tools, "a
 * true tool set". */
/* Owner, Oct 3, later: "i didnt mean to use that airport color theme across
 * the board, just as how the dots should look ... improve the entire color
 * schematics, this needs to be top of the line, professional, elegant".
 * So: a graphite ground, quiet under the work; one accent for what the
 * reader chose; and for the road a palette that says what to do at a
 * glance, each colour its own: sage proceed (drawn thin, so the eye goes
 * to what is not), ochre lengthen the gap, amber slow, violet route
 * around, signal red exit; not known gray and dashed, never a colour. The
 * dots are the airfield map's: a filled disc in a thin dark ring. Tags are
 * tinted, not painted. Dark by default; the light sheet is the same set,
 * deepened for paper. */
:root, html[data-fleet-theme="dark"]{
  --paper:#0b0d10; --card:#12161b; --card-a:rgba(18, 22, 27, .9); --ink:#e8ebef; --dim:#9aa3ae; --faint:#6c7682; --line:#232a32; --soft:#1b2128;
  --accent:#5b9dff; --accent-ink:#0b0d10;
  --land:#15191e; --land-edge:#2c343e; --water:#0b0d10; --water-edge:#1d232a; --water-ink:#46505c; --state-ink:#4f5966; --cty:#2a323c;
  --proceed:#4fb38a; --gap:#d8b04c; --slow:#e8873a; --avoid:#c46ad6; --exit:#ef5350; --unk:#6c7682; --none:#39424d;
  --s-dry:#7d8794; --s-wet:#4c9be8; --s-slush:#7fc8c4; --s-snow:#dfe7f2; --s-ice:#b48cff;
  --h0:#4fb38a; --h1:#d8b04c; --h2:#ef5350;
  --i-air:#5b9dff; --i-road:#b48cff; --i-dcp:#4fb3b0; --i-ref:#8a939e; --i-cit:#f2c14e;
  --wash:rgba(239, 83, 80, .14); --gapband:#6c7682; --halo:#0b0d10;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  --radar-ramp: 10 #3f9a8c 0, 15 #48ad96 .45, 20 #4dbd80 .7, 30 #37a456 .84, 38 #e6c648 .9, 45 #f19d3a .93, 50 #ee5d3c .95, 55 #dc3752 .96, 62 #cf55a6 .97, 70 #ae86ee .98;
  --radar-rate-ramp: .01 #48ad96 .45, .05 #4dbd80 .7, .1 #37a456 .84, .25 #e6c648 .9, .5 #f19d3a .93, 1 #ee5d3c .95, 2 #dc3752 .96, 3 #cf55a6 .97, 4 #ae86ee .98;
  --radar-total-ramp: .005 #3f7fae .5, .1 #4f9bd6 .7, .25 #5fb0ec .82, .5 #7cc4ff .88, 1 #4dbd80 .9, 2 #e6c648 .92, 3 #f19d3a .94, 5 #ee5d3c .96, 8 #cf55a6 .97, 12 #ae86ee .98;
  --sans:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme:dark;
}
html[data-fleet-theme="light"]{
  --paper:#f5f6f8; --card:#ffffff; --card-a:rgba(255, 255, 255, .92); --ink:#14181d; --dim:#56606b; --faint:#7d8792; --line:#e1e5ea; --soft:#eef1f4;
  --accent:#2a62d6; --accent-ink:#ffffff;
  --land:#eceff3; --land-edge:#c3cad3; --water:#dfe6ee; --water-edge:#c3cfdc; --water-ink:#8090a3; --state-ink:#9aa3ae; --cty:#d6dce3;
  --proceed:#2f8f68; --gap:#b8891a; --slow:#d06a1f; --avoid:#9a46b0; --exit:#d23b38; --unk:#8a939e; --none:#c3cad3;
  --s-dry:#8a939e; --s-wet:#2f78c4; --s-slush:#3b9c97; --s-snow:#5d6f8c; --s-ice:#7b52d9;
  --h0:#2f8f68; --h1:#b8891a; --h2:#d23b38;
  --i-air:#2a62d6; --i-road:#7b52d9; --i-dcp:#2f8f8c; --i-ref:#7d8792; --i-cit:#8a6400;
  --wash:rgba(210, 59, 56, .12); --gapband:#8a939e; --halo:#ffffff;
  --shadow:0 1px 2px rgba(20,24,29,.06), 0 8px 24px rgba(20,24,29,.10);
  --radar-ramp: 10 #6fc4b3 0, 15 #57b39b .45, 20 #2e9567 .7, 30 #1d7038 .84, 38 #cfa92b .9, 45 #dc8420 .93, 50 #c9441f .95, 55 #a81b35 .96, 62 #861c6c .97, 70 #6330a8 .98;
  --radar-rate-ramp: .01 #6fc4b3 .45, .05 #2e9567 .7, .1 #1d7038 .84, .25 #cfa92b .9, .5 #dc8420 .93, 1 #c9441f .95, 2 #a81b35 .96, 3 #861c6c .97, 4 #6330a8 .98;
  --radar-total-ramp: .005 #9ec9e2 .5, .1 #5b9fd0 .7, .25 #2f78bd .82, .5 #1f5aa0 .88, 1 #2a8a5c .9, 2 #cfa92b .92, 3 #dc8420 .94, 5 #c9441f .96, 8 #861c6c .97, 12 #6330a8 .98;
  color-scheme:light;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html, body{ margin:0; }
body.fa-body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.45; -webkit-text-size-adjust:100%; }
body.fa-appbody{ height:100vh; height:100dvh; overflow:hidden; }
a{ color:var(--accent); }
.fa-mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.fa-dim{ color:var(--dim); }
.fa-quiet{ color:var(--dim); padding:16px; }
.fa-fine{ font-size:12.5px; color:var(--faint); margin:6px 0 0; }
.fa-none{ color:var(--dim); font-size:13.5px; padding:4px 0; list-style:none; }

/* ── the bar, 48 px ──────────────────────────────────────────────────── */
.fa-bar{ position:sticky; top:0; z-index:30; height:48px; display:flex; align-items:center; gap:14px; padding:0 16px; background:var(--card); border-bottom:1px solid var(--line); }
.fa-brand{ font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap; }
.fa-app{ color:var(--accent); font-weight:600; padding-left:12px; border-left:1px solid var(--line); }
.fa-tabs{ display:flex; gap:2px; margin-left:8px; overflow-x:auto; scrollbar-width:none; }
.fa-tabs a{ color:var(--dim); text-decoration:none; padding:13px 10px; font-size:14px; white-space:nowrap; border-bottom:2px solid transparent; }
.fa-tabs a:hover{ color:var(--ink); }
.fa-tabs a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); font-weight:600; }
.fa-theme{ margin-left:auto; font:inherit; font-size:13px; color:var(--dim); background:none; border:1px solid var(--line); border-radius:6px; padding:5px 10px; cursor:pointer; }

/* ── the workspace: the map is the page ──────────────────────────────── */
.fa-ws{ position:relative; height:calc(100vh - 48px); height:calc(100dvh - 48px); overflow:hidden; background:var(--water); }
.fa-ws > .us-frame{ position:absolute; inset:0; }
.fa-host{ position:absolute; inset:0; overflow:hidden; outline:none; user-select:none; -webkit-user-select:none; touch-action:none; cursor:grab; }
.fa-host:active{ cursor:grabbing; }
.fa-host:focus-visible{ box-shadow:inset 0 0 0 2px var(--accent); }
.fa-host > svg{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; overflow:hidden; }
.fa-host > svg:not(.ax-sheet){ z-index:1; }
.fa-host .radar-c{ position:absolute; left:0; top:0; z-index:2; pointer-events:none; }
.fa-host .ax-sheet{ z-index:3; pointer-events:none; }
/* the country, quiet under the road; the states are not links here */
.fa-host .us-a{ pointer-events:none; }
.fa-host .us-st{ fill:var(--land); stroke:var(--land-edge); stroke-width:.8; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.fa-host .us-k{ fill:var(--state-ink); font-family:var(--sans); font-weight:600; letter-spacing:.06em; pointer-events:none; opacity:.75; }
.fa-host .us-w{ fill:var(--water); stroke:var(--water-edge); stroke-width:.6; vector-effect:non-scaling-stroke; }
.fa-host .us-wk, .fa-host .us-sea{ fill:var(--water-ink); font-family:var(--sans); font-style:italic; letter-spacing:.06em; pointer-events:none; }
.fa-host .us-led{ stroke:var(--land-edge); stroke-width:1; fill:none; vector-effect:non-scaling-stroke; }

/* the map's own buttons (mapzoom.js), over the map on the right */
.us-zoom{ display:flex; gap:6px; }
.us-zoom.in-map{ position:absolute; right:12px; top:12px; z-index:8; flex-direction:column; gap:0; background:var(--card-a); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.us-zoom button{ width:38px; height:38px; display:grid; place-items:center; padding:0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:400 19px/1 var(--sans); cursor:pointer; }
/* the radar, on or off, always at hand */
.us-zoom button.fa-rdrbtn{ color:var(--faint); }
.us-zoom button.fa-rdrbtn[aria-pressed="true"]{ color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
.us-zoom button:last-child{ border-bottom:0; }
.us-zoom button:hover{ background:var(--soft); }
.us-zoom button:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.us-zoom svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* the page is already the map: no full screen of its own */
.fa-ws .us-zoom [data-z="full"]{ display:none; }

/* ── the road and what is over it ────────────────────────────────────── */
.fa-sheet path{ fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.fa-sheet .fa-a, .fa-sheet .fa-hit{ pointer-events:visibleStroke; cursor:pointer; }
.fa-sheet .fa-hit{ stroke:transparent; stroke-width:18; }
.fa-sheet .fa-a{ stroke-width:4; }
/* a dark edge under the whole road, so every colour reads crisp on the ground and over the radar */
.fa-sheet .fa-case{ stroke:var(--halo); stroke-width:7.5; opacity:.85; }
.fa-ws[data-zl="2"] .fa-sheet .fa-case{ stroke-width:9.5; }
.fa-ws[data-zl="2"] .fa-sheet .fa-a{ stroke-width:5.5; }
.fa-a-none{ stroke:var(--none); stroke-dasharray:1 4; }
.fa-a-proceed{ stroke:var(--proceed); } .fa-a-gap{ stroke:var(--gap); } .fa-a-slow{ stroke:var(--slow); } .fa-a-avoid{ stroke:var(--avoid); } .fa-a-exit{ stroke:var(--exit); }
/* proceed is drawn thin and a little quiet: the eye goes to what is not */
.fa-sheet .fa-a-proceed{ stroke-width:3; opacity:.9; } .fa-ws[data-zl="2"] .fa-sheet .fa-a-proceed{ stroke-width:4; }
.fa-sheet .fa-a-slow{ stroke-width:5; } .fa-sheet .fa-a-exit{ stroke-width:6.5; } .fa-sheet .fa-a-avoid{ stroke-width:6.5; stroke-dasharray:7 3; }
.fa-sheet .fa-a-unk{ stroke:var(--unk); stroke-dasharray:2 3; }
.fa-s-dry{ stroke:var(--s-dry); } .fa-s-wet{ stroke:var(--s-wet); } .fa-s-slush{ stroke:var(--s-slush); } .fa-s-snow{ stroke:var(--s-snow); } .fa-s-ice{ stroke:var(--s-ice); }
.fa-sheet .fa-s-unknown{ stroke:var(--unk); stroke-dasharray:2 3; } .fa-sheet .fa-s-ice{ stroke-width:6.5; }
.fa-h-0{ stroke:var(--h0); } .fa-h-1{ stroke:var(--h1); } .fa-h-2{ stroke:var(--h2); }
.fa-sheet .fa-h-2{ stroke-width:6.5; }
.fa-a-h0{ stroke:var(--h0); } .fa-a-h1{ stroke:var(--h1); } .fa-a-h2{ stroke:var(--h2); }
.fa-sheet .fa-washp{ stroke:var(--wash); stroke-width:20; stroke-linecap:butt; }
/* the counties, close in: hairlines under the road */
.fa-sheet .fa-ctyp{ stroke:var(--cty); stroke-width:.8; fill:none; }
.fa-ws[data-zl="0"] .fa-cty, .fa-off-cty .fa-cty{ display:none; }
/* no instrument within 15 miles: a soft shade behind the road, not a second line */
.fa-sheet .fa-gapband{ stroke:var(--gapband); stroke-width:14; stroke-linecap:round; opacity:.22; }
.fa-ws:not([data-mode="act"]) .fa-gaps{ display:none; }
.fa-sheet .fa-sel{ stroke:var(--accent); stroke-width:13; opacity:.32; }
.fa-sheet circle{ vector-effect:non-scaling-stroke; }
.fa-sheet text{ font-size:calc(var(--fa-u, 1) * 12px); paint-order:stroke; stroke:var(--halo); stroke-width:calc(var(--fa-u, 1) * 3px); stroke-linejoin:round; pointer-events:none; }
/* bridges and the instruments: off unless asked */
.fa-br{ fill:var(--card); stroke:var(--ink); stroke-width:1; }
.fa-sheet .fa-ia{ pointer-events:auto; cursor:pointer; }
.fa-i{ fill:var(--i-air); stroke:var(--halo); stroke-width:1.2; }
.fa-i-rwis{ fill:var(--i-road); } .fa-i-dcp{ fill:var(--i-dcp); } .fa-i-uscrn, .fa-i-scan{ fill:var(--i-ref); } .fa-i-cwop{ fill:var(--i-cit); }
.fa-i-quiet{ fill-opacity:.3; }
.fa-sheet .fa-it{ font-family:var(--mono); font-size:calc(var(--fa-u, 1) * 10.5px); fill:var(--ink); }
.fa-ws[data-zl="0"] .fa-it, .fa-ws[data-zl="1"] .fa-it{ display:none; }
.fa-ws:not(.fa-on-bridge) .fa-bridges, .fa-ws:not(.fa-on-inst) .fa-insts{ display:none; }
.fa-ws[data-zl="0"] .fa-bridges{ display:none; }
/* the stops */
.fa-pin{ pointer-events:auto; cursor:pointer; outline:none; }
.fa-pin circle{ fill:var(--pc, var(--none)); stroke:var(--halo); stroke-width:1.2; }
.fa-pin:focus-visible circle{ stroke:var(--accent); stroke-width:3; }
.fa-pin.fa-pc-proceed{ --pc:var(--proceed); } .fa-pin.fa-pc-gap{ --pc:var(--gap); } .fa-pin.fa-pc-slow{ --pc:var(--slow); } .fa-pin.fa-pc-avoid{ --pc:var(--avoid); } .fa-pin.fa-pc-exit{ --pc:var(--exit); } .fa-pin.fa-pc-unk{ --pc:var(--unk); }
.fa-pin-rest circle{ stroke:var(--faint); }
/* a truck stop: a ring of the ink, so it reads as a place to stop among the rest */
.fa-pin-truckstop circle{ stroke:var(--ink); stroke-width:1.6; }
.fa-pk-truckstop{ box-shadow:0 0 0 1.5px var(--halo), 0 0 0 3px var(--ink); }
.fa-pin-charger circle{ stroke:var(--accent); stroke-width:2; }
.fa-ws[data-zl="0"]:not([data-view="stops"]) .fa-pin-parking{ display:none; }
/* the places and the miles, more of them closer in */
.fa-sheet .fa-pl{ pointer-events:auto; }
.fa-pl circle{ fill:var(--ink); stroke:var(--halo); stroke-width:1; }
.fa-pl text{ font-family:var(--sans); font-size:calc(var(--fa-u, 1) * 12.5px); font-weight:600; fill:var(--ink); text-anchor:middle; }
.fa-pl-t text{ font-weight:500; font-size:calc(var(--fa-u, 1) * 11.5px); fill:var(--dim); }
.fa-pl:hover text{ fill:var(--accent); }
.fa-ws[data-zl="0"] .fa-pl, .fa-ws[data-zl="1"] .fa-pl-t{ display:none; }
.fa-mm circle{ fill:var(--dim); }
.fa-mm text{ font-family:var(--mono); font-size:calc(var(--fa-u, 1) * 10.5px); fill:var(--dim); }
.fa-mm.fa-m100 text{ font-weight:700; fill:var(--ink); }
.fa-ws[data-zl="0"] .fa-mm:not(.fa-m100), .fa-ws[data-zl="1"] .fa-mm.fa-m10{ display:none; }
/* the truck and the units */
.fa-truck circle{ fill:var(--accent); stroke:var(--card); stroke-width:2.5; }
.fa-truck text, .fa-units text{ font-family:var(--sans); font-weight:700; fill:var(--ink); }
.fa-units circle{ fill:var(--card); stroke:var(--accent); stroke-width:2.5; }
/* the layers turned off */
.fa-sheet .fa-hide text{ display:none; }
.fa-off-alert .fa-wash, .fa-off-stop .fa-pins, .fa-off-places .fa-pl, .fa-off-miles .fa-mm, .fa-off-gaps .fa-gaps{ display:none !important; }

/* ── the control card, top left ──────────────────────────────────────── */
.fa-card, .fa-tools, .fa-win, .fa-drawer, .fa-rdr, .fa-chip, .us-zoom.in-map{ -webkit-backdrop-filter:blur(12px) saturate(1.1); backdrop-filter:blur(12px) saturate(1.1); }
.fa-card{ background:var(--card-a); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.fa-ctl{ position:absolute; left:12px; top:12px; z-index:10; padding:10px 12px; max-width:calc(100% - 84px); display:grid; gap:8px; }
.fa-ctlh{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.fa-ctlh h1{ font-size:17px; margin:0; font-weight:700; letter-spacing:-.01em; }
.fa-asof{ margin:0; color:var(--dim); font-size:12.5px; }
.fa-ctlrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fa-narrow{ display:none; }
.fa-seg{ display:inline-flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.fa-opt{ font:inherit; font-size:13px; color:var(--ink); background:var(--card); border:0; border-right:1px solid var(--line); padding:5px 10px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.fa-opt:last-child{ border-right:0; }
.fa-opt:hover{ background:var(--soft); }
.fa-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.fa-opt[aria-pressed="true"], .fa-opt[aria-current="page"]{ background:color-mix(in srgb, var(--accent) 18%, var(--card)); color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent); font-weight:600; }
.fa-time{ display:inline-flex; gap:6px; align-items:center; }
.fa-play{ width:31px; height:31px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--ink); cursor:pointer; }
.fa-play svg{ width:14px; height:14px; fill:currentColor; }
.fa-play .i-pause, .fa-play[aria-pressed="true"] .i-play{ display:none; }
.fa-play[aria-pressed="true"] .i-pause{ display:inline; }
.fa-play[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); }
.fa-narrow select{ font:inherit; font-size:14px; flex:1 1 0; min-width:0; padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); }

/* ── the tools, a column down the left ───────────────────────────────── */
.fa-tools{ position:absolute; left:12px; top:var(--fa-tools-top, 128px); z-index:10; display:flex; flex-direction:column; background:var(--card-a); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.fa-tool{ position:relative; width:46px; height:44px; display:grid; place-items:center; padding:0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; }
.fa-tool:last-child{ border-bottom:0; }
.fa-tool svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.fa-tool:hover{ color:var(--ink); background:var(--soft); }
.fa-tool:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.fa-tool[aria-expanded="true"]{ color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, var(--card)); box-shadow:inset 3px 0 0 var(--accent); }
.fa-tl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.fa-badge{ position:absolute; right:3px; top:3px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--exit); color:#fff; font:600 10px/16px var(--sans); text-align:center; box-shadow:0 0 0 2px var(--card); }
.fa-tool[data-win="alerts"] .fa-badge{ background:var(--slow); }
.fa-tool[data-win="gaps"] .fa-badge, .fa-tool[data-win="stops"] .fa-badge{ background:var(--faint); }

/* ── the windows: small, beside the tools ────────────────────────────── */
.fa-win{ position:absolute; left:68px; top:var(--fa-tools-top, 128px); z-index:11; width:350px; max-height:calc(100% - var(--fa-tools-top, 128px) - 64px); display:flex; flex-direction:column;
  background:var(--card-a); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.fa-winh{ display:flex; align-items:center; gap:8px; padding:8px 8px 8px 14px; border-bottom:1px solid var(--line); flex:none; }
.fa-winh h2{ font-size:14px; margin:0; font-weight:650; flex:1; }
.fa-close{ width:30px; height:30px; display:grid; place-items:center; padding:0; font:400 20px/1 var(--sans); background:none; border:0; border-radius:6px; color:var(--dim); cursor:pointer; }
.fa-close:hover{ background:var(--soft); color:var(--ink); }
.fa-winb{ overflow-y:auto; padding:10px 14px 14px; font-size:13.5px; overscroll-behavior:contain; }
.fa-winb h3{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin:12px 0 6px; font-weight:600; }
.fa-winb h3:first-child{ margin-top:0; }
.fa-h{ font-size:12px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; margin:4px 0 6px; }
/* the exceptions: six, then all */
.fa-exlist, .fa-gaplist, .fa-stoplist{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.fa-exlist .fa-more, .fa-gaplist .fa-more{ display:none; }
.fa-exlist.fa-all .fa-more, .fa-gaplist.fa-all .fa-more{ display:block; }
.fa-ex{ width:100%; text-align:left; font:inherit; background:color-mix(in srgb, var(--soft) 60%, transparent); color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:7px 10px; cursor:pointer; display:grid; gap:3px; transition:border-color .12s, background .12s; }
.fa-ex:hover, .fa-ex:focus-visible{ border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); background:var(--soft); outline:none; }
.fa-exl{ font-size:13px; color:var(--ink); }
.fa-exr{ font-size:12.5px; color:var(--dim); }
.fa-showall{ font:inherit; font-size:13px; color:var(--accent); background:none; border:0; padding:4px 0; cursor:pointer; }
.fa-sums{ margin:12px 0 0; display:grid; gap:10px; }
/* the miles by action, set as the airfield map's key is */
.fa-keyh{ margin:0 0 6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.fa-keyl{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.fa-keyl li{ display:grid; grid-template-columns:12px minmax(0, 1fr) 70px 52px; gap:8px; align-items:center; font-size:12.5px; color:var(--dim); }
.fa-keyl .fa-kd{ width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 1.5px var(--halo), 0 0 0 2.5px var(--line); }
.fa-keyl .fa-kb{ display:block; height:6px; border-radius:3px; background:var(--soft); overflow:hidden; }
.fa-keyl .fa-kb i{ display:block; height:100%; border-radius:3px; }
.fa-keyl b{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); text-align:right; font-size:12.5px; font-weight:600; }
.fa-sum{ display:block; }
.fa-stack{ display:flex; height:8px; border-radius:3px; overflow:hidden; background:var(--soft); }
.fa-stack i{ display:block; height:100%; }
/* a tag is tinted, not painted: the colour in its word and a whisper behind it */
.fa-tag{ display:inline-flex; align-items:center; gap:5px; justify-self:start; font-size:11.5px; font-weight:600; letter-spacing:.01em; padding:1px 8px 1px 7px; border-radius:999px; white-space:nowrap;
  color:var(--c, var(--unk)); background:color-mix(in srgb, var(--c, var(--unk)) 14%, transparent); border:1px solid color-mix(in srgb, var(--c, var(--unk)) 34%, transparent); }
.fa-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.fa-t-proceed{ --c:var(--proceed); } .fa-t-gap{ --c:var(--gap); } .fa-t-slow{ --c:var(--slow); } .fa-t-avoid{ --c:var(--avoid); } .fa-t-exit{ --c:var(--exit); }
.fa-t-unk{ --c:var(--unk); border-style:dashed; background:transparent; }
/* the alerts, condensed: one line an event, every word a press away */
.fa-al{ list-style:none; margin:0; padding:0; }
.fa-al > li{ border-bottom:1px solid var(--line); }
.fa-al > li:last-child{ border-bottom:0; }
.fa-al summary{ cursor:pointer; padding:7px 0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; list-style:none; }
.fa-al summary::-webkit-details-marker{ display:none; }
.fa-al summary::after{ content:"+"; margin-left:auto; color:var(--faint); }
.fa-al details[open] summary::after{ content:"\2212"; }
.fa-al summary svg, .fa-al summary .ax-sw{ flex:none; }
.fa-ali{ padding:0 0 8px; }
.fa-ali p{ margin:4px 0; }
.fa-pre{ white-space:pre-line; }
.fa-site{ display:flex; flex-wrap:wrap; gap:4px 12px; padding:10px 0 0; margin:6px 0 0; border-top:1px solid var(--line); font-size:13px; }
.fa-site a{ color:var(--dim); }
.fa-tsm{ font-size:12.5px; margin:0 0 6px; }
.fa-tsm th, .fa-tsm td{ padding:4px 6px; }
.fa-cov{ margin:6px 0 0; font-size:12.5px; color:var(--dim); }
.fa-stoplist{ margin:0 0 10px; }
.fa-winb h3 .fa-dim{ font-weight:400; }
.fa-stopl{ display:flex; align-items:center; gap:8px; min-width:0; }
.fa-sname{ flex:1 1 auto; min-width:0; font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fa-smi{ flex:none; font-size:11.5px; color:var(--dim); }
.fa-stopbtn .fa-exr{ padding-left:19px; }
.fa-pk{ flex:none; width:11px; height:11px; margin:0; border-radius:50%; background:var(--pc, var(--none)); box-shadow:0 0 0 1.5px var(--halo), 0 0 0 2.5px var(--line); }
.fa-pk.fa-pc-proceed{ --pc:var(--proceed); } .fa-pk.fa-pc-gap{ --pc:var(--gap); } .fa-pk.fa-pc-slow{ --pc:var(--slow); } .fa-pk.fa-pc-avoid{ --pc:var(--avoid); } .fa-pk.fa-pc-exit{ --pc:var(--exit); } .fa-pk.fa-pc-unk{ --pc:var(--unk); }
.fa-pk-charger{ box-shadow:0 0 0 1.5px var(--halo), 0 0 0 3px var(--accent); }
/* the chips that show one kind of stop */
.fa-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.fa-chipf{ font:inherit; font-size:12px; padding:3px 10px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; }
.fa-chipf b{ font-weight:600; color:var(--faint); margin-left:2px; font-variant-numeric:tabular-nums; }
.fa-chipf[aria-pressed="true"]{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); background:color-mix(in srgb, var(--accent) 16%, transparent); }
.fa-chipf[aria-pressed="true"] b{ color:var(--accent); }
.fa-ws[data-sf="truckstop"] .fa-pin:not(.fa-pin-truckstop), .fa-ws[data-sf="truckstop"] .fa-stoplist li:not([data-kind="truckstop"]), .fa-ws[data-sf="rest"] .fa-pin:not(.fa-pin-rest), .fa-ws[data-sf="parking"] .fa-pin:not(.fa-pin-parking), .fa-ws[data-sf="charger"] .fa-pin:not(.fa-pin-charger), .fa-ws[data-sf="mw"] .fa-pin:not([data-mw="1"]),
.fa-ws[data-sf="rest"] .fa-stoplist li:not([data-kind="rest"]), .fa-ws[data-sf="parking"] .fa-stoplist li:not([data-kind="parking"]), .fa-ws[data-sf="charger"] .fa-stoplist li:not([data-kind="charger"]), .fa-ws[data-sf="mw"] .fa-stoplist li:not([data-mw="1"]){ display:none; }
/* the forms */
.fa-winb form{ display:grid; gap:8px; margin:0 0 8px; }
.fa-winb label{ display:grid; gap:3px; font-size:13px; color:var(--dim); }
.fa-winb select, .fa-winb input:not([type=checkbox]), .fa-winb textarea{ font:inherit; font-size:14px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:6px 8px; width:100%; }
.fa-winb button[type=submit]{ font:inherit; font-size:14px; background:var(--accent); color:var(--accent-ink); border:0; border-radius:6px; padding:7px 12px; cursor:pointer; justify-self:start; }
.fa-route-out ul, .fa-units-out ul{ list-style:none; margin:6px 0; padding:0; display:grid; gap:3px; }
.fa-winb .fa-chk{ display:flex; grid-template-columns:none; flex-direction:row; gap:8px; align-items:center; font-size:14px; color:var(--ink); padding:3px 0; }
.fa-winb .fa-seg{ margin:0 0 10px; }
/* the key */
.fa-legend{ list-style:none; margin:0 0 10px; padding:0; display:grid; gap:4px; font-size:13px; color:var(--dim); }
.fa-legend li{ display:flex; align-items:center; gap:8px; }
.fa-leg-act, .fa-leg-surf, .fa-leg-hole{ display:none; }
[data-mode="act"] .fa-leg-act, [data-mode="surf"] .fa-leg-surf, [data-mode="hole"] .fa-leg-hole{ display:grid; }
.fa-k{ display:inline-block; width:20px; height:5px; border-radius:2px; flex:none; }
.fa-k-proceed{ background:var(--proceed); } .fa-k-gap{ background:var(--gap); } .fa-k-slow{ background:var(--slow); } .fa-k-avoid{ background:var(--avoid); } .fa-k-exit{ background:var(--exit); }
.fa-k-unk{ background:repeating-linear-gradient(90deg, var(--unk) 0 2px, transparent 2px 5px); }
.fa-k.fa-k-gapband{ height:10px; border-radius:5px; background:color-mix(in srgb, var(--gapband) 30%, transparent); }
.fa-k.fa-k-wash{ height:10px; background:var(--wash); }
.fa-k-s-dry{ background:var(--s-dry); } .fa-k-s-wet{ background:var(--s-wet); } .fa-k-s-slush{ background:var(--s-slush); } .fa-k-s-snow{ background:var(--s-snow); } .fa-k-s-ice{ background:var(--s-ice); }
.fa-k-s-unknown{ background:repeating-linear-gradient(90deg, var(--unk) 0 2px, transparent 2px 5px); }
.fa-k-h-0{ background:var(--h0); } .fa-k-h-1{ background:var(--h1); } .fa-k-h-2{ background:var(--h2); }
.fa-stack .fa-k-proceed, .fa-stack .fa-k-unk{ opacity:.85; }

/* ── the radar's time, a strip at the bottom right ───────────────────── */
.fa-rdr{ position:absolute; right:12px; bottom:12px; z-index:9; width:300px; margin:0; padding:7px 10px; background:var(--card-a); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  font-family:var(--mono); font-size:11.5px; color:var(--dim); }
.fa-rdr .rdr-key, .fa-rdr .rdr-span, .fa-rdr .rdr-say{ display:none; }
/* compact at rest: the loop and the time; what it shows opens when the box is pointed at or reached by key */
@media (hover:hover){ .fa-rdr:not(:hover):not(:focus-within) .rdr-show, .fa-rdr:not(:hover):not(:focus-within) .rdr-lay{ display:none; } }
/* what the radar shows (the site's radar: echoes, rain rate, rain over the last hour to three days), small */
.rdr-show{ display:flex; flex-wrap:wrap; align-items:center; gap:3px; margin:0 0 6px; }
.rdr-show span{ color:var(--faint); margin-right:3px; }
.rdr-show button{ font:inherit; font-size:10.5px; min-height:22px; padding:1px 7px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--dim); cursor:pointer; }
.rdr-show button[aria-pressed="true"]{ border-color:var(--ink); color:var(--ink); font-weight:600; }
.rdr-show button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
/* what is over the radar (storm cells), the same small pills */
.rdr-lay{ display:flex; flex-wrap:wrap; align-items:center; gap:3px; margin:6px 0 0; }
.rdr-lay span{ color:var(--faint); margin-right:3px; }
.rdr-lay button{ font:inherit; font-size:10.5px; min-height:22px; padding:1px 7px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--dim); cursor:pointer; }
.rdr-lay button[aria-pressed="true"]{ border-color:var(--ink); color:var(--ink); font-weight:600; }
/* on Fleet only the strong and severe cells are marked: the ordinary ones read as stops */
.fa-host .rdr-cell:not(.lv-strong):not(.lv-severe){ display:none; }
/* the storm cells the radar finds: a quiet dot where it is and a line where it goes; strong in amber, severe in red, rotation dashed */
.fa-host .rdr-cells{ position:absolute; z-index:3; overflow:visible; pointer-events:none; }
.rdr-cell circle{ fill:var(--ink); fill-opacity:.55; stroke:none; pointer-events:visiblePainted; }
.rdr-cell .rdr-go{ fill:none; stroke:var(--ink); stroke-width:1.2px; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.7; }
.rdr-cell.lv-strong circle{ vector-effect:non-scaling-stroke; stroke:var(--slow); stroke-width:1.8px; fill:var(--slow); fill-opacity:.22; }
.rdr-cell.lv-strong .rdr-go{ stroke:var(--slow); }
.rdr-cell.lv-severe circle{ vector-effect:non-scaling-stroke; stroke:var(--exit); stroke-width:2.2px; fill:var(--exit); fill-opacity:.28; }
.rdr-cell.lv-severe .rdr-go{ stroke:var(--exit); stroke-width:1.8px; }
.rdr-cell.is-rot circle{ stroke-dasharray:3 2; }
.rdr-row{ display:flex; align-items:center; gap:8px; }
.rdr-play{ flex:none; width:28px; height:28px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--ink); cursor:pointer; }
.rdr-play svg{ width:13px; height:13px; fill:currentColor; }
.rdr-play .i-pause, .rdr-play.is-on .i-play{ display:none; }
.rdr-play.is-on .i-pause{ display:inline; }
.rdr-scrub{ flex:1 1 auto; min-width:60px; height:22px; margin:0; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; }
.rdr-scrub::-webkit-slider-runnable-track{ height:2px; background:var(--line); }
.rdr-scrub::-moz-range-track{ height:2px; background:var(--line); }
.rdr-scrub::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; margin-top:-5px; border-radius:50%; background:var(--ink); border:2px solid var(--card); }
.rdr-scrub::-moz-range-thumb{ width:10px; height:10px; border-radius:50%; background:var(--ink); border:2px solid var(--card); }
.rdr-t{ margin:0; flex:none; display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
.rdr-t b{ color:var(--ink); font-weight:600; font-size:12px; font-variant-numeric:tabular-nums; }
.rdr-ago{ font-size:10.5px; }
.ss-rdr.is-wait .rdr-at::after{ content:" \00b7 loading"; color:var(--faint); font-weight:400; }

/* ── the truck's chip, bottom centre ─────────────────────────────────── */
.fa-chip{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; z-index:12; width:max-content; max-width:min(460px, calc(100% - 24px)); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 34px 8px 12px; font-size:13.5px; box-shadow:var(--shadow); }
/* the road under the pointer, read at a glance (a desk) */
.fa-hover{ position:absolute; z-index:13; pointer-events:none; max-width:280px; padding:6px 9px; border-radius:9px; background:var(--card-a); border:1px solid var(--line); box-shadow:var(--shadow); font-size:12.5px; line-height:1.35; color:var(--ink); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.fa-hover b{ font-weight:650; } .fa-hover .fa-mono{ color:var(--dim); font-size:11.5px; } .fa-hover .fa-tag{ margin-top:4px; }
.fa-chipx{ position:absolute; right:4px; top:4px; width:26px; height:26px; border:0; background:none; color:var(--dim); font:400 18px/1 var(--sans); cursor:pointer; border-radius:6px; }

/* ── the drawer: one segment, on the right ───────────────────────────── */
.fa-drawer{ position:absolute; right:12px; top:12px; bottom:12px; z-index:14; width:380px; max-width:calc(100% - 24px); background:var(--card-a); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow-y:auto; padding:12px 16px 24px; overscroll-behavior:contain; }
.fa-segopen .fa-rdr, .fa-segopen .us-zoom.in-map{ right:404px; }
.fa-x{ float:right; width:30px; height:30px; display:grid; place-items:center; padding:0; font:400 20px/1 var(--sans); background:none; border:0; border-radius:6px; color:var(--dim); cursor:pointer; }
.fa-x:hover{ background:var(--soft); color:var(--ink); }
.fa-dbody h2{ font-size:17px; margin:2px 0 2px; }
.fa-dbody h3{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin:16px 0 6px; }
.fa-dbody p{ margin:4px 0; font-size:14px; }
.fa-dbody ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:14px; }
.fa-acts{ display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:start; font-size:14px; }
.fa-probs li{ display:grid; grid-template-columns:62px 1fr 40px; gap:8px; align-items:center; }
.fa-probs i{ height:7px; background:var(--soft); border-radius:3px; overflow:hidden; display:block; }
.fa-probs b{ display:block; height:100%; background:var(--accent); }
.fa-probs em{ font-style:normal; font-family:var(--mono); font-size:12.5px; text-align:right; }
.fa-figs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:0; }
.fa-figs div{ background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:6px 9px; }
.fa-figs dt{ font-size:11.5px; color:var(--faint); }
.fa-figs dd{ margin:0; font-family:var(--mono); font-size:14px; }
.fa-tline{ display:flex; gap:8px; flex-wrap:wrap; font-size:13px; }

/* the tip and the tables (the site's script, storm.js) */
.ss-tip{ position:fixed; z-index:40; max-width:300px; background:var(--ink); color:var(--paper); font-size:13px; line-height:1.4; padding:7px 10px; border-radius:6px; white-space:pre-line; pointer-events:none; }
.ss-tip[hidden]{ display:none; }
.tb-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 8px; }
.tb-q{ flex:0 1 280px; min-width:0; width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 9px; }
.tb-n{ font-size:12.5px; color:var(--dim); }
th.tb-s{ cursor:pointer; user-select:none; }
th.tb-s[aria-sort="ascending"]::after{ content:" \2191"; color:var(--accent); }
th.tb-s[aria-sort="descending"]::after{ content:" \2193"; color:var(--accent); }

/* ── the document pages: Rules ───────────────────────────────────────── */
.fa-doc{ max-width:1100px; margin:0 auto; padding:22px 16px 40px; }
.fa-dochead h1{ font-size:28px; margin:0 0 4px; }
.fa-dochead p{ color:var(--dim); margin:0 0 20px; max-width:70ch; }
.fa-sec{ margin:0 0 30px; }
.fa-sec h2{ font-size:19px; margin:0 0 8px; }
.fa-sec p{ max-width:72ch; }
.fa-scroll{ overflow-x:auto; margin:0 0 12px; }
.fa-t{ border-collapse:separate; border-spacing:0; width:100%; font-size:14px; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.fa-t tbody tr:hover{ background:var(--soft); }
.fa-t tr:last-child > *{ border-bottom:0; }
.fa-t th, .fa-t td{ padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.fa-t thead th{ font-size:11px; color:var(--faint); font-weight:600; text-transform:uppercase; letter-spacing:.07em; background:var(--soft); }
.fa-t th[scope=row]{ font-weight:500; min-width:12em; }
.fa-dl{ display:grid; gap:8px; margin:0; }
.fa-dl > div{ display:grid; grid-template-columns:minmax(150px, 12em) 1fr; gap:10px; align-items:baseline; }
.fa-dl dd{ margin:0; color:var(--dim); }
.fa-foot{ display:flex; flex-wrap:wrap; gap:6px 16px; padding:14px 16px; border-top:1px solid var(--line); background:var(--card); font-size:13.5px; color:var(--dim); }
.fa-foot a{ color:var(--dim); }
/* the copyright, under the footer of a document, in the map's corner on the app */
.fa-copy{ margin:0; padding:8px 16px 14px; font-size:12px; color:var(--faint); background:var(--card); }
.fa-appbody .fa-copy{ position:fixed; left:12px; bottom:10px; z-index:7; padding:0; background:none; font-size:11px; pointer-events:none; }

/* ── a phone: the map, a bar of tools at the bottom, windows that rise ── */
@media (max-width:760px){
  .fa-tabs{ margin-left:0; }
  .fa-app{ display:none; }
  .fa-bar{ gap:6px; padding:0 10px; }
  .fa-brand{ font-size:14px; }
  .fa-bw{ display:none; }
  .fa-tabs a{ padding:13px 7px; font-size:13.5px; }
  .fa-theme{ padding:4px 7px; }
  .fa-ctl{ left:8px; right:56px; top:8px; max-width:none; padding:8px 10px; gap:6px; }
  .fa-ctlh h1{ font-size:15px; }
  .fa-asof{ font-size:12px; }
  .fa-wide{ display:none; }
  .fa-narrow{ display:flex; flex-wrap:nowrap; gap:6px; }
  .fa-narrow select{ font-size:13.5px; padding:5px 6px; }
  .us-zoom.in-map, .fa-segopen .us-zoom.in-map{ right:8px; top:8px; }
  .fa-tools{ left:0; right:0; top:auto; bottom:0; flex-direction:row; border-radius:0; border-width:1px 0 0; overflow-x:auto; scrollbar-width:none; padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 10px rgba(0,0,0,.06); }
  .fa-tool{ flex:1 1 0; min-width:0; width:auto; height:54px; padding:0 1px; border-bottom:0; border-right:1px solid var(--line); grid-template-rows:22px 13px; gap:2px; align-content:center; }
  .fa-tool:last-child{ border-right:0; }
  .fa-tool[data-win="exc"]{ flex-grow:1.6; }
  .fa-tl{ position:static; width:auto; max-width:100%; height:auto; overflow:hidden; clip:auto; font-size:9.5px; line-height:13px; letter-spacing:-.01em; text-overflow:clip; }
  .fa-badge{ right:calc(50% - 22px); top:4px; }
  .fa-win, .fa-drawer{ left:0; right:0; top:auto; bottom:calc(55px + env(safe-area-inset-bottom)); width:auto; max-width:none; max-height:58%; border-radius:14px 14px 0 0; border-width:1px 0 0; box-shadow:0 -8px 24px rgba(0,0,0,.14); }
  .fa-drawer{ max-height:54%; }
  .fa-winh{ padding:6px 6px 6px 14px; }
  .fa-winh::before{ content:""; position:absolute; left:50%; top:5px; width:36px; height:4px; margin-left:-18px; border-radius:2px; background:var(--line); }
  .fa-winh{ position:relative; padding-top:12px; }
  .fa-rdr{ left:8px; right:auto; bottom:calc(80px + env(safe-area-inset-bottom)); width:min(300px, calc(100% - 16px)); }
  .fa-winopen .fa-rdr, .fa-segopen .fa-rdr{ display:none; }
  .fa-rdr .rdr-show, .fa-rdr .rdr-lay{ display:none; }
  .fa-chip{ bottom:calc(126px + env(safe-area-inset-bottom)); }
  .fa-dl > div{ grid-template-columns:1fr; gap:3px; }
  .fa-appbody .fa-copy{ left:10px; bottom:calc(61px + env(safe-area-inset-bottom)); font-size:10.5px; }
}
@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; } }

/* Driverless (driverless-edge.js): the service areas a quiet wash in the
   accent, under the road; the truck lanes a band beside it, solid where no
   one is aboard, dashed where a safety driver is; the credit the areas'
   licence asks for, in the map's corner while they are shown */
.fa-areas{ display:none; }
.fa-on-areas .fa-areas{ display:inline; }
.fa-sheet .fa-area{ fill:color-mix(in srgb, var(--accent) 20%, transparent); stroke:var(--accent); stroke-width:1.6; stroke-linejoin:round; }
.fa-off-lanes .fa-lanes{ display:none; }
.fa-sheet .fa-lane{ fill:none; stroke:var(--avoid); stroke-opacity:.5; stroke-width:11; stroke-linecap:round; stroke-linejoin:round; }
.fa-sheet .fa-lane-s{ stroke-dasharray:12 9; stroke-linecap:butt; stroke-opacity:.38; }
.fa-credit{ position:absolute; left:8px; bottom:30px; margin:0; font-size:11px; color:var(--dim); background:var(--card-a); padding:2px 7px; border-radius:6px; display:none; z-index:2; }
.fa-credit a{ color:inherit; }
.fa-on-areas .fa-credit{ display:block; }
.drv-k{ display:inline-block; width:18px; height:5px; border-radius:3px; background:var(--avoid); opacity:.75; flex:none; }
.drv-k-s{ background:repeating-linear-gradient(90deg, var(--avoid) 0 5px, transparent 5px 9px); }
.drv-t th[scope=row]{ min-width:9em; }
.drv-top{ display:block; font-size:11.5px; font-weight:400; }
.drv-ops{ margin:4px 0 8px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.drv-ops b{ margin-right:4px; font-size:13px; }
.drv-area{ font:inherit; font-size:12px; padding:2px 9px; border-radius:999px; border:1px solid var(--line); background:var(--soft); color:var(--ink); cursor:pointer; }
.drv-area:hover{ border-color:var(--accent); }