| /* wave 41 lane stylesheet: map. Kept separate so no lane edits index.css. | |
| Tokens live in index.css :root and customer-grid/theme.ts -- declare there, consume here. */ | |
| /* SELECTED PIN (wave 41 item 18): deliberately NO rule here, and that is the point of this note. | |
| Every pin colour on the map is painted from customer-grid/MapView.tsx as an SVG PRESENTATION | |
| ATTRIBUTE (SERIES, DEFAULT_PIN, OVERFLOW, and now LP_MAP_SELECTED), so the selected fill and | |
| ring live in TS beside their siblings instead of being split across two seams. | |
| Two reasons not to move any of that here: | |
| 1. Any CSS declaration outranks a presentation attribute, so a `fill:` or `stroke:` rule added | |
| to this file would SILENTLY WIN over the TS value. The constant would go dead, the pin would | |
| still paint, and nothing would look wrong in a diff. | |
| 2. This file is scanned by neither gate: verify_icons.py reads a hardcoded STYLESHEETS list of | |
| five files that does not include it, and verify_map.py's css_scan reads | |
| customer-grid/map.css, a different file. A rule placed here is unverified by both. | |
| To change the selected pin colour, change theme.ts::LP_MAP_SELECTED and its --lp-map-selected | |
| mirror in index.css :root, which is the pair verify_icons.py::token_parity actually compares. | |
| The .cg-map-pin.is-selected { paint-order: stroke } rule stays in index.css and is what makes | |
| the ring paint OUTSIDE the fill disc rather than straddling its edge. */ | |
| /* ROUTE FOOT ROW (wave 41 item 19 / R13): THREE BUTTONS NOW, NOT TWO. | |
| `Update calculation` joins `Save route` / `Update route` and `Clear route` in .cg-route-foot, | |
| so the row that was built for a pair has to carry a trio without any of them changing shape. | |
| index.css gives every button in that row `flex: 1 1 0`, which is equal thirds: inside a 360px | |
| panel that is roughly 109px each, and only one of the three labels needs more than that. The | |
| result would be a middle button wrapped onto two lines between two single-line neighbours, | |
| which is a new control shape by accident (DESIGN.md §4 authorises none). `flex-basis: auto` | |
| sizes each button from its own label and still shares the leftover width, so the three read as | |
| siblings. `nowrap` keeps a label whole and `flex-wrap` is what pays for it: on a narrowed panel | |
| the ROW breaks between whole buttons instead of squeezing every label past reading width. | |
| ⚠ SPECIFICITY, NOT ORDER, AND THE DIFFERENCE IS LOAD-BEARING HERE. This file is @imported near | |
| the TOP of index.css, so its rules sit BEFORE the .cg-route-foot rules in the cascade and an | |
| equal-specificity selector would lose every tie to them. The .cg-route-popover prefix wins | |
| outright whatever the order. The second selector below exists for the same reason and not as a | |
| duplicate: `.cg-route-popover .cg-btn.cg-route-cta` already sets `white-space: normal` at three | |
| classes, which is exactly the weight of the first selector here, so only a four-class selector | |
| can answer it. Clear route and Update calculation both carry that class. | |
| ⚠ UNGATED, SAID OUT LOUD. Per this file's own note above, neither verify_icons.py nor | |
| verify_map.py::css_scan reads this stylesheet, and verify_map.py's `css route-foot-is-a-row` | |
| leg reads src/index.css by name. Nothing reds if these two rules are deleted; the foot row | |
| simply goes back to equal thirds with one wrapped label. */ | |
| .cg-route-popover .cg-route-foot { | |
| flex-wrap: wrap; | |
| } | |
| .cg-route-popover .cg-route-foot .cg-btn, | |
| .cg-route-popover .cg-route-foot .cg-btn.cg-route-cta { | |
| flex: 1 1 auto; | |
| white-space: nowrap; | |
| } | |