/* Today (lane O1): the lede and its figures, the board of lanes, Needs a look, the List, the route map. Built on the base components
   in styles.css (.lede, .fig, .mk, .btn, .seg, .dot, .st, .empty, .notice, .toast); only what Today alone draws is here. Every value
   is a token (office/tokens.gen.css). Scoped to .today where the name is a common one, so another screen's table is not touched. */

.today { padding-top: 0; }
.today .t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); }
.today a { text-decoration: none; }
.today ol, .today ul { list-style: none; margin: 0; padding: 0; }
.today .lede { padding: 4px 0 8px; }
.today .lede-p { max-width: 84ch; }
.today .fig .m { font-size: var(--fs-sec); line-height: var(--lh-sec); min-height: 16px; color: var(--ink-3); }
.today .fig.left .m { color: var(--ink-2); }
.today a.fig .v { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.today .fig .m a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.today .figs { flex: none; gap: 8px 32px; }
.today .fig .v { white-space: nowrap; }
.today .fig.money .v { display: block; }
.today .skel-n { width: 6ch; height: 22px; }
/* the late rule, printed once under the figures (late-words.js LATE_RULE) */
.today .late-rule { margin: 0 0 4px; max-width: 84ch; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }

/* ---------- a section: its head, one hairline of air, the thing itself ---------- */
.today .sec { margin-top: 36px; scroll-margin-top: 64px; }
.today .sec.day { margin-top: 12px; }
.today .sec:focus { outline: 0; }
.today .sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 8px; min-height: 28px; }
.today .sec-h .n { font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }
.today .sec-h .grow { flex: 1; }
.today .sec-h .seg, .today .sec-h .jump-link, .today .sec-h .pick-btn, .today .sec-h .tech-find { align-self: center; }
.today .sec-h .tech-find { margin: 0 16px 0 0; max-width: 260px; }
.today .sec-h .tech-find .input { height: 32px; max-width: 220px; }
.today .sec-h .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.today .cnt { font-weight: var(--w-regular); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.day-seg { overflow: visible; }
.seg-text { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 148px; padding: 0 14px; font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink); white-space: nowrap; }
.seg-text .d-short { display: none; }
.seg > .seg-text { border-left: 1px solid var(--edge); border-right: 1px solid var(--edge); }
.jump-link { display: inline-flex; align-items: center; gap: 8px; margin-right: 16px; padding: 0; border: 0; background: none; font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-2); cursor: pointer; }
.jump-link .jn { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: var(--w-semibold); }
@media (hover: hover) { .jump-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }

/* plain facts: ink-2, ink-3 */
.today .c-2 { color: var(--ink-2); } .today .c-3 { color: var(--ink-3); }
.today .nm { font-weight: var(--w-semibold); }
.over-w { color: var(--amber-text); font-weight: var(--w-medium); }
.map-note { font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }

/* ---------- table and list rows: no card, hairlines divide ---------- */
.today .tbl { --cols: 96px minmax(0, 1fr) auto 64px; }
.today .tbl.need-t { --cols: 128px minmax(0, 1fr) auto 76px; }
.today .tbl-h, .today .tbl-r { display: grid; grid-template-columns: var(--cols); column-gap: 16px; align-items: center; padding: 0 12px; }
.today .tbl-h { height: 32px; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--ink-3); border-bottom: 1px solid var(--hair); }
.today .tbl-r { min-height: var(--h-row); border-bottom: 1px solid var(--hair); font-size: var(--fs-body); line-height: var(--lh-body); transition: background-color var(--dur-state) var(--ease); }
.today .tbl.dense .tbl-r { min-height: var(--h-row-dense); }
.today .tbl-r > .time, .today .tbl-h > .time { text-align: right; font-size: var(--fs-sec); color: var(--ink-3); white-space: nowrap; }
.today .tbl-r .who { color: var(--ink-3); font-size: var(--fs-sec); margin-left: 8px; }
.today .tbl-r .type { font-size: var(--fs-sec); color: var(--ink-2); }
.today .tbl-r[aria-selected="true"] { background: var(--sel); }
.today .tbl-r[aria-selected="true"] .time, .today .tbl-r[aria-selected="true"] .who { color: var(--ink-2); }
@media (hover: hover) { .today .tbl-r:hover:not([aria-selected="true"]) { background: var(--hover); } }
.today .tbl-r:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* text on the section's own edge; the tint and the hairlines run 8px past it, so the focus ring is whole */
.today .tbl.inset { margin: 0 -8px; }
.today .tbl.inset .tbl-h, .today .tbl.inset .tbl-r { padding-left: 8px; padding-right: 8px; }
/* a row's action: words until the row is selected or under the pointer */
.btn.xs.q { border-color: transparent; color: var(--ink-2); }
.need-r:hover .btn.xs.q, .need-r:focus-within .btn.xs.q, .need-r[aria-selected="true"] .btn.xs.q, .stop-row:hover .btn.xs.q, .stop-row:focus-within .btn.xs.q, .btn.xs.q[aria-expanded="true"] { border-color: var(--edge); color: var(--ink); }
.need-r > span { min-width: 0; }
.need-r { cursor: default; }

/* the List: every stop of the day, written out (the technician on a group's first row) */
.today .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 40px; margin-bottom: 4px; }
.flt { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.flt button { padding: 4px 0; border: 0; border-bottom: 1.5px solid transparent; background: none; font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-3); cursor: pointer; }
.flt button .cnt { margin-left: 2px; }
.flt button[aria-pressed="true"] { color: var(--ink); font-weight: var(--w-semibold); border-bottom-color: var(--ink); }
@media (hover: hover) { .flt button:hover:not([aria-pressed="true"]) { color: var(--ink); } }
.flt button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }
.today .filters .rows-pick { margin-left: auto; order: 2; display: inline-flex; align-items: center; gap: 8px; }
.today .filters .rows-label { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-3); font-weight: var(--w-medium); }
.today .tbl.listday { --cols: 152px 92px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr) 64px; }
.listday .tbl-r { padding-top: 6px; padding-bottom: 6px; font-size: var(--fs-sec); line-height: var(--lh-sec); cursor: pointer; }
.listday .tbl-r.grp { border-top: 1px solid var(--edge); }
.listday .tbl-h + .tbl-r.grp { border-top: 0; }
.listday .tbl-r.dim { opacity: .6; }
.listday .tbl-r > span { min-width: 0; overflow-wrap: anywhere; }
.listday .tbl-r .span-all { grid-column: 2 / -1; }
.listday .two { display: grid; gap: 0; }
.listday .sec, .listday .tbl-r .sec { display: block; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); margin: 0; }
.listday .stands { display: grid; gap: 0; }
.listday .warn-text { display: block; color: var(--amber-text); font-weight: var(--w-medium); }
.listday .dense .sec, .listday.dense .two .sec, .listday.dense .stands .sec, .listday.dense .c-rec .sec { display: none; }
.listday .acts { display: flex; justify-content: flex-end; }
.listday .fold-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px 0 0; margin-left: -2px; border: 0; border-radius: var(--r-2); background: none; font-size: var(--fs-sec); font-weight: var(--w-semibold); color: var(--ink); text-align: left; }
.listday .fold-toggle .ic, .listday .fold-toggle svg { transition: transform var(--dur-state) var(--ease); }
.listday .fold-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
@media (hover: hover) { .listday .fold-toggle:hover { color: var(--ink); background: var(--hover); } }
.listday .tbl-r .nm a { color: var(--ink); }

/* ---------- the board: one 64 px lane for each tech on the line ---------- */
.lanes-scroll { overflow-x: auto; scrollbar-width: thin; }
.lanes { --label-w: 248px; position: relative; }
.lane-axis, .lane { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); }
.lane-axis { height: 24px; align-items: end; }
.lane-axis .track { height: 24px; position: relative; }
.tick { position: absolute; bottom: 4px; transform: translateX(-50%); font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); white-space: nowrap; }
.tick.first { transform: none; } .tick.last { transform: translateX(-100%); }
.now-chip { position: absolute; bottom: 2px; transform: translateX(-50%); padding: 0 6px; height: 18px; line-height: 18px; border-radius: var(--r-1); background: var(--ink); color: var(--bg); font-size: var(--fs-meta); font-weight: var(--w-semibold); }
.lane { height: 64px; border-top: 1px solid var(--hair); }
.lane-list > .lane:last-child { border-bottom: 1px solid var(--hair); }
.lane-who { padding: 4px 12px 0 0; min-width: 0; }
.lane-who .nm { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; line-height: 20px; }
.lane-who .nm .cnt { font-size: var(--fs-sec); flex: none; }
.lane-who { position: relative; }
.lane-who .state { margin-top: 0; display: flex; min-width: 0; font-size: var(--fs-sec); line-height: 15px; color: var(--ink-2); white-space: nowrap; }
.lane-who .state .head { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lane-who .state .tail { flex: none; }
/* a tech with stops to do who closed the last one more than half an hour ago: the words "Between stops" are amber (board.js IDLE_AFTER), the minutes stay ink */
.lane-who .state .head.out { color: var(--ink); font-weight: var(--w-semibold); } /* a tech who is out: ink at weight 600, never red or amber (not late, not a thing to fix) */
.lane-who .state .head.idle { color: var(--amber-text); font-weight: var(--w-medium); }
/* the row under the state line: Out sick on every truck that has stops to hand on, Back in on one that is out; a late lane with no room on its track adds its buttons */
.lane-foot { position: absolute; left: 0; right: 12px; top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
/* a late lane with no room on its track: Call and Reassign sit in the foot beside Out sick, in the flow, so on a narrow column they wrap and the lane grows
   (a 64 px lane is only its minimum) instead of squeezing a button to a sliver */
.lane-foot.has-acts { position: static; margin-top: -4px; }
.lane:has(.lane-foot.has-acts) { height: auto; min-height: 64px; }
.lane-foot .sick-menu, .sd-sick .sick-menu, .wk-sick .sick-menu { display: flex; }
.btn.sick { height: 28px; gap: 4px; padding: 0 6px 0 4px; margin-left: -4px; font-size: var(--fs-sec); line-height: 26px; color: var(--ink-2); }
.btn.sick svg { color: var(--ink-3); }
.sick-none { font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }
@media (hover: hover) { .btn.sick:hover { background: var(--hover); border-color: var(--edge); color: var(--ink); } }
/* the same control on the Schedule: under a lane's name on the Day view, under a tech's name in the Week grid */
.sd-lw { display: grid; align-content: center; min-width: 0; }
.sd-lw .sd-l { padding-bottom: 2px; }
.sd-sick { display: block; padding: 0 12px 8px 8px; }
.wk-sick, .wk-who .sd-sick { display: block; margin-top: 4px; padding: 0; }
.sick-list .sick-h { padding: 6px 10px 4px; max-width: 250px; white-space: normal; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }
/* an open Out sick menu lifts the sticky name cell that holds it above the cells under it, the tab bar and the rows after it (a phone keeps the name column in view while the track scrolls) */
.lane-who:has(.sick-list), .wk-who:has(.sick-list) { z-index: 40; }
.sick-list { max-height: min(60vh, 360px); overflow-y: auto; width: max-content; min-width: 0; }
/* a late lane with no clear room on its track: its two buttons sit under the state line, as quiet words */
.lane-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-width: 0; max-width: 100%; flex: 0 1 auto; }
.lane-acts .row-menu { display: flex; }
.lane-acts .btn { display: inline-flex; align-items: center; }
/* a long first name ("Call Christopher") gives way to an ellipsis before it runs into the track */
.lane-acts > .btn { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-acts .btn.xs, .lane-acts .btn.xs.q { height: 28px; line-height: 26px; padding: 0 4px; margin-left: -4px; border-color: transparent; background: none; font-size: var(--fs-meta); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .lane-acts .btn.xs:hover { background: var(--hover); color: var(--ink); } }
.lane-menu { position: relative; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 48px); }
.lane-name { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 0 4px; margin-left: -4px; border: 0; border-radius: var(--r-2); background: none; font-size: var(--fs-body); line-height: 20px; text-align: left; color: var(--ink); }
.lane-name b { font-weight: var(--w-semibold); white-space: nowrap; }
.lane-name svg { flex: none; color: var(--ink-3); opacity: 0; }
.lane-name:focus-visible svg, .lane-name[aria-expanded="true"] svg { opacity: 1; }
@media (hover: hover) { .lane-name:hover { background: var(--hover); } .lane-name:hover svg { opacity: 1; } }
@media (hover: none) { .lane-name svg { opacity: 1; } }
.lane .track { position: relative; height: 100%; background-image: repeating-linear-gradient(to right, var(--hair) 0 1px, transparent 1px calc(100% / var(--hours, 10))); background-size: 100% 100%; }
.now-line { position: absolute; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: var(--ink); z-index: 1; pointer-events: none; }
.ln { position: absolute; top: 17px; height: 0; border-top: 2px solid var(--saguaro); z-index: 1; }
.ln.ahead { border-top: 1.5px dashed var(--edge-strong); }
.ln.late { border-top-color: var(--red); }
.blk { position: absolute; top: 7px; height: 22px; border-radius: var(--r-1); z-index: 2; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sec); line-height: 1; font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; background: var(--bg); color: inherit; text-decoration: none; }
/* the words in a box are cut with an ellipsis where the box is narrower than they are, never over its edge */
.blk-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.blk:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; overflow: visible; z-index: 6; }
.blk.done, .blk.here { background: var(--saguaro); color: var(--on-saguaro); }
.blk.here { overflow: visible; outline: 1.5px solid var(--saguaro); outline-offset: 2px; }
.blk.here.join { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.blk.here:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.blk.rest { border: 1.5px solid var(--edge-strong); border-left: 0; border-radius: 0 var(--r-1) var(--r-1) 0; }
.blk.over { background: var(--amber); color: var(--on-amber); border-top-left-radius: 0; border-bottom-left-radius: 0; font-weight: var(--w-semibold); z-index: 3; padding: 0; }
.blk.ahead { border: 1.5px solid var(--edge-strong); color: var(--ink-3); }
.blk.call { border: 1.5px solid var(--amber); color: var(--amber-text); font-weight: var(--w-semibold); }
.blk.late { border: 1.5px solid var(--red); background: var(--red-tint); color: var(--red-text); font-weight: var(--w-semibold); }
.blk.fail { border: 1.5px solid var(--red); background: var(--red-tint); color: var(--red-text); }
.blk.missed { border: 1.5px dashed var(--edge-strong); background: transparent; }
.blk-name { position: absolute; top: 33px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 0 3px; margin-left: -3px; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink); background: var(--bg); z-index: 2; pointer-events: none; }
.blk-name.l2 { top: 49px; }
.lane.two { height: 80px; }
.blk-name.l3 { top: 65px; }
.lane.three { height: 96px; }
.blk-name.r { text-align: right; margin-left: 0; margin-right: -3px; }
.blk-name.c3 { color: var(--ink); }
.blk-name.dn { color: var(--ink-2); }
.lane-act { position: absolute; top: 4px; display: flex; gap: 6px; z-index: 5; }
.lane-act .btn { background: var(--bg); }
@media (hover: hover) { .lane-act .btn:hover { background: var(--hover); } }
.legend { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
.legend .l-done { background: var(--saguaro); }
.legend .l-here { background: var(--saguaro); outline: 1.5px solid var(--saguaro); outline-offset: 1.5px; width: 14px; margin: 0 2px; }
.legend .l-over { background: var(--amber); }
.legend .l-ahead { border: 1.5px solid var(--edge-strong); }
.legend .l-call { border: 1.5px solid var(--amber); }
.legend .l-late, .legend .l-fail { border: 1.5px solid var(--red); background: var(--red-tint); }
.legend .l-missed { border: 1.5px dashed var(--edge-strong); }
.board > .map-note { margin-top: 8px; }

/* a small menu from a lane's name or a row's Move: the base .menu, set in the system */
.today .menu, .menu.floating { background: var(--raise); border: 0; border-radius: var(--r-3); box-shadow: var(--shadow-pop); padding: 4px; }
.lane-menu .menu { min-width: 0; width: max-content; }
.today .menu [role="menuitem"] { padding: 6px 10px; border-radius: var(--r-2); font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); }

/* ---------- the route: a pale road map, the picked tech's line the only colour ---------- */
.route-who { display: flex; align-items: flex-end; gap: 8px; margin: 0 0 12px; min-height: 0; }
.route-who:empty { display: none; }
.route-who .muted { align-self: center; font-size: var(--fs-sec); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 32px; align-items: start; }
.map-col { min-width: 0; }
.map-frame { position: relative; }
.map { position: relative; width: 100%; aspect-ratio: 760 / 450; min-height: 300px; border: 1px solid var(--hair); background: var(--map-land); overflow: hidden; }
.map-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 8px; }
.map-col > .map-note, .map-lost { margin-top: 6px; }
.map-lost summary { cursor: pointer; list-style: none; }
.map-lost summary::-webkit-details-marker { display: none; }
.map-lost summary .linkish { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.map-lost[open] summary .linkish { display: none; }
.map-lost ul { margin: 8px 0 0; display: grid; gap: 4px; font-size: var(--fs-sec); line-height: var(--lh-sec); }
.m-stop { position: relative; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-meta); line-height: 1; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums;
  background: var(--saguaro); color: var(--on-saguaro); box-shadow: 0 0 0 2px var(--map-land); cursor: pointer; }
.m-stop.here { box-shadow: 0 0 0 2px var(--map-land), 0 0 0 3.5px var(--saguaro); }
.m-stop.todo, .m-stop.missed, .m-stop.anytime { background: var(--map-land); color: var(--saguaro-text); box-shadow: inset 0 0 0 2px var(--saguaro), 0 0 0 2px var(--map-land); }
.m-stop.call { background: var(--map-land); color: var(--amber-text); box-shadow: inset 0 0 0 2px var(--amber), 0 0 0 2px var(--map-land); }
.m-stop.late, .m-stop.fail { background: var(--map-land); color: var(--red-text); box-shadow: inset 0 0 0 2px var(--red), 0 0 0 2px var(--map-land); }
.m-stop.cancelled { opacity: .5; }
.m-stop.picked { box-shadow: 0 0 0 2px var(--map-land), 0 0 0 4px var(--ink); z-index: 2; }
.m-stop.dim { width: 10px; height: 10px; font-size: 0; background: var(--ink-4); box-shadow: 0 0 0 2px var(--map-land); }
.m-stop.dim.todo, .m-stop.dim.missed, .m-stop.dim.anytime, .m-stop.dim.call, .m-stop.dim.late, .m-stop.dim.fail { background: var(--map-land); box-shadow: inset 0 0 0 1.5px var(--ink-4), 0 0 0 2px var(--map-land); }
.m-stop.dim::after { content: ''; position: absolute; inset: -8px; }
.m-stop.dim.picked { box-shadow: 0 0 0 2px var(--map-land), 0 0 0 4px var(--ink); }
.m-stop:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.m-card { position: absolute; left: 10px; bottom: 10px; z-index: 3; width: min(300px, calc(100% - 20px)); display: grid; gap: 6px; padding: 12px; border-radius: var(--r-3); background: var(--raise); box-shadow: var(--shadow-pop); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.m-card .row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.m-card .st { gap: 8px; }
/* MapLibre's own controls, in the office's colours (its icons are dark drawings, turned light in dark) */
:root { --map-icon: none; }
:root[data-scheme="dark"] { --map-icon: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --map-icon: invert(1); } }
.map .maplibregl-ctrl-group { background: var(--raise); border: 1px solid var(--edge); border-radius: var(--r-2); box-shadow: none; }
.map .maplibregl-ctrl-group button + button { border-top-color: var(--hair); }
.map .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: var(--map-icon); }
.map .maplibregl-ctrl.maplibregl-ctrl-attrib { background: var(--map-land); opacity: .92; margin: 0; padding: 2px 6px; color: var(--ink-3); font: var(--w-regular) var(--fs-meta)/var(--lh-meta) var(--font-sans); }
.map .maplibregl-ctrl-attrib a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.map .maplibregl-ctrl-attrib-button { display: none; }
.map .maplibregl-canvas { outline: 0; }

/* the stops in order, beside the map: the same rail logic as a visit (done solid, ahead hollow) */
.route-side { min-width: 0; }
.stops { border-top: 1px solid var(--hair); }
.stop { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 36px; border: 0; border-bottom: 1px solid var(--hair); background: none; text-align: left; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink); }
.stops.techs .stop { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 0; }
.stop .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: var(--fs-meta); font-weight: var(--w-semibold); background: var(--saguaro); color: var(--on-saguaro); }
.stop .n.here { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--saguaro); }
.stop .n.todo, .stop .n.missed { background: var(--bg); color: var(--saguaro-text); box-shadow: inset 0 0 0 2px var(--saguaro); }
.stop .n.call { background: var(--bg); color: var(--amber-text); box-shadow: inset 0 0 0 2px var(--amber); }
.stop .n.late, .stop .n.fail { background: var(--bg); color: var(--red-text); box-shadow: inset 0 0 0 2px var(--red); }
.stop .who { min-width: 0; font-weight: var(--w-medium); color: var(--ink); overflow-wrap: anywhere; }
.stop .when { color: var(--ink-3); text-align: right; }
.stop.dim .who { color: var(--ink-2); font-weight: var(--w-regular); }
@media (hover: hover) { .stop:hover { background: var(--hover); } }
.stop:focus-visible { outline-offset: -2px; }
.better { display: grid; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-2); }
.better .row { display: flex; flex-wrap: wrap; gap: 8px; }

/* the schedule's changes (the day's third view) */
.changes { list-style: none; margin: 0; padding: 0; }
.changes .tbl-r { cursor: default; }
.changes .tbl-r.undone { color: var(--ink-3); }

/* the one slim notice sits right under the page bar */
.today > .notice { margin: 8px 0 0; }

/* ---------- the skeleton: shaped like the lede and the lanes (shown after 150 ms, still, no shimmer) ---------- */
.skel-day { display: block; }
.skel-lede { display: flex; justify-content: space-between; gap: 32px; padding: 16px 0 24px; }
.skel-lede-l { display: grid; gap: 10px; align-content: start; flex: 1; }
.skel-figs { display: flex; gap: 32px; }
.skel-fig { display: grid; gap: 8px; width: 72px; }
.skel-lanes { margin-top: 36px; }
.skel-lane { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 64px; border-top: 1px solid var(--hair); }
.skel-lane:last-child { border-bottom: 1px solid var(--hair); }
.skel-lane-who { display: grid; gap: 8px; align-content: center; padding-right: 24px; }
.skel-track { position: relative; }
.skel-blk { position: absolute; top: 17px; height: 22px; border-radius: var(--r-1); }

/* ---------- a window as narrow as a phone ---------- */
@media (max-width: 900px) {
  .today .fig .v > .mk { position: static; display: inline-block; margin: 0 6px 1px 0; vertical-align: middle; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .today .tbl.listday { --cols: 120px 84px minmax(0, 1fr) minmax(0, 1.1fr) 64px; }
  .listday .c-svc, .listday .c-rec { display: none; }
  .today .lede { flex-wrap: wrap; gap: 16px; }
  .today .figs { flex: 1 1 100%; }
}
@media (max-width: 700px) {
  .seg-text { min-width: 0; padding: 0 10px; }
  .seg-text .d-long { display: none; }
  .seg-text .d-short { display: inline; }
  .lanes { --label-w: 132px; min-width: 640px; }
  .lane-axis, .lane { grid-template-columns: var(--label-w) minmax(0, 1fr); }
  .lane-who .nm .cnt { display: none; }
  .lane-who .state { font-size: var(--fs-meta); }
  .lane-who, .lane-axis > :first-child { position: sticky; left: 0; z-index: 7; background: var(--bg); }
  .map { aspect-ratio: 1 / 1; min-height: 320px; }
  .today .figs { gap: 12px 24px; }
  .skel-lane { grid-template-columns: 132px minmax(0, 1fr); }
  .skel-figs { display: none; }
  .today .tbl.need-t { --cols: minmax(0, 1fr) auto; }
  .need-t .tbl-h { display: none; }
  .need-r { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding-top: 8px; padding-bottom: 8px; }
  .need-r > :nth-child(3) { grid-column: 1; grid-row: 3; margin-left: -10px; }
  .need-r > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .need-r > :nth-child(4) { grid-column: 2; grid-row: 1; }
  .today .tbl.listday { --cols: minmax(0, 1fr) minmax(0, 1fr); }
  .listday .tbl-r > .acts { grid-column: 1 / -1; }
  .listday .tbl-r > .acts:empty { display: none; }
  .listday .tbl-h { display: none; }
  .listday .tbl-r > :nth-child(2) { display: none; }
  .listday .tbl-r > :nth-child(1) { grid-column: 1 / -1; }
  .listday .tbl-r .span-all { grid-column: 1 / -1; }
}

/* the Records menu item: termite reports past the state's deadline, in red like the other late numbers */
.nav .nav-count.late, .nav-more-list .nav-count.late { color: var(--red-text); font-weight: var(--w-semibold); }
.nav-more-list .nav-count { margin-left: auto; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }

.out-note { color: var(--ink); font-weight: var(--w-semibold); }

/* the sick-call in a tech's own card of the List (the phone's day): under the name, quiet */
.listday .nm .list-sick { display: block; margin-top: 4px; }
.listday .nm .list-sick .btn.sick, .listday .nm > .btn.sick { margin-left: 0; }

/* the day on paper (day-sheet.js): not on the screen; the only thing a future day prints */
.day-sheet { display: none; }
@media print {
  .day-sheet { display: block; }
  .day-sheet h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin: 0 0 12px; }
  .day-sheet h2 { font-size: var(--fs-body); line-height: var(--lh-body); margin: 14px 0 4px; }
  .day-sheet h2 small { font-weight: var(--w-regular); color: var(--ink-3); }
  .day-sheet .sheet-block { break-inside: avoid-page; }
  .day-sheet .sheet-t { width: 100%; }
  .day-sheet .sheet-t th, .day-sheet .sheet-t td { padding: 4px 8px 4px 0; vertical-align: top; text-align: left; }
}