/* schedule.css -- session 424 (mh-schedule-mockups-v1, boards 1, 2, 3, 4, 4b; their own stylesheets copied here as the specification): the Schedule
   page (schedule.js). The title row, band and filter card are the shared core header (core-header.css); this file draws the columns under it.
   Every selector starts with this file's own class (check-screen-styles.mjs). Colours are the mockups' own. */

.sx { --sx-teal: #154A50; --sx-teal2: #1d6e77; --sx-ink: #16181a; --sx-mute: #6b747b; --sx-line: #dfe3e6; --sx-soft: #f0f2f3; --sx-gold: #d9a441; --sx-red: #e8452c;
  --sx-or: #9a4a0e; --sx-green: #2e9c7c; --sx-purple: #7a5cc7; --sx-near: #dceff0; --sx-dark: #14555B; }
/* room for the "Settings for this page" strip, which pulls itself 48px up under every page (settings-hub.css .mh-page-settings): session 429, the core
   frame's own 72px bottom padding gives it (the old frame had none) */
.sx { padding-bottom: 0; }
.sx-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sx-card { margin-top: 16px; }
.sxv-body { margin-top: 16px; }   /* session 434: the Availability tab, the old page under Schedule's own title row */
.sx-day { height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid #D2D8DD; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: #1E2428; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.sx-day .c { font-size: 12px; font-weight: 600; color: #6B737A; }
.sx-day.on { background: #154A50; border-color: #154A50; color: #fff; }
.sx-day.on .c { color: #BFE3E4; }
.sx-day:hover { border-color: #9aa3a9; }
.sx-day:focus-visible, .sx-tg:focus-visible, .sx-par:focus-visible, .sx-lb:focus-visible, .sx-plus:focus-visible, .sx-x:focus-visible, .sx-tab:focus-visible { outline: 2px solid #1d6e77; outline-offset: 2px; }
.sx-dot { width: 7px; height: 7px; border-radius: 50%; background: #6fd5d4; display: inline-block; }
.sx-days { flex-wrap: wrap; }
input.sx-dpick, .sx-dpick { width: 40px; height: 40px; padding: 0 0 0 10px; border: 1px solid #D2D8DD; border-radius: 9px; color: transparent; background: #fff; cursor: pointer; }
.sx-par { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px dashed #9aa3a9; background: #f6f8f9; font: inherit; font-size: 12px; font-weight: 600; color: #4d545a; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; }
.sx-par:hover { border-color: #4d545a; }
.sx-tg { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid #D2D8DD; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #1E2428; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.sx-tg:hover { border-color: #9aa3a9; background: #f6f8f9; }
.sx-tg.on { background: #dceff0; border-color: #9fd3d4; color: #144d54; }
.sx-tg.big { height: 40px; padding: 0 14px; font-size: 14px; border-radius: 9px; }
.sx-lb { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: #1d6e77; text-decoration: underline; cursor: pointer; }
.sx-lb:hover { color: #144d54; }
.sx-lk { font-size: 12.5px; font-weight: 700; color: #1d6e77; text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
.sx-rs { width: 340px; gap: 8px; }
.sx-pb { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); }
.sx-pb .w { width: 44px; }
.sx-pb .v { width: 70px; text-align: right; white-space: nowrap; }
.sx-bar { flex: 1; height: 10px; border-radius: 5px; background: rgba(255,255,255,.14); display: flex; overflow: hidden; }
.sx-bar i { display: block; height: 100%; }
.sx-hist { width: 300px; }
.sx-hb { height: 32px; display: flex; align-items: flex-end; gap: 4px; }
.sx-hb button { flex: 1; min-width: 8px; border: 0; border-radius: 2px 2px 0 0; background: #6fd5d4; cursor: pointer; padding: 0; }
.sx-hb button.on { background: #ffd13a; }
.sx-hb button:hover { background: #a8eceb; }

/* the three columns */
.sx-body { margin-top: 16px; }
/* Session 429 (Daniel, 29 October 2026): normal view is three grid columns inside the core frame. The side columns are as wide as their rows need
   (sxFit sets --sx-lw and --sx-rw: left 440 to 600, right 380 to 480), the map takes the rest (at least 360). Only the page scrolls: the lists run their
   full length, and the map stays in view (sticky under the Hub's top bar, the screen's height less that bar). Full screen keeps 426's flex columns. */
.sxf-cols, .sxa-cols { display: grid; grid-template-columns: var(--sx-lw, 440px) minmax(0, 1fr) var(--sx-rw, 380px); gap: 14px; align-items: start; }
.sx-pane { background: #fff; border-radius: 14px; box-shadow: 0 4px 14px rgba(14,54,59,.08); overflow: clip; display: flex; flex-direction: column; min-width: 0; }
.sxf-left, .sxf-right, .sxa-left, .sxa-right { min-width: 0; }
/* the map's height leaves the room measured under the columns (--sx-below, sxFit: the page's bottom padding and the "Settings for this page" strip), so
   at the very bottom of the page the map is still whole between the top bar and the strip */
.sxf-mid, .sxa-midcol { position: sticky; top: calc(var(--hdrH) + var(--bandH) + 12px); height: calc(100vh - var(--hdrH) - var(--bandH) - 12px - var(--sx-below, 80px)); min-height: 420px; min-width: 0; }
.sxf-right.stick { position: sticky; top: calc(var(--hdrH) + var(--bandH) + 12px); }
/* the read of every marked cell's one-line width (sxFit), undone in the same moment */
.sx-measure [data-fit] { white-space: nowrap !important; width: max-content !important; max-width: none !important; min-width: 0 !important; justify-self: start !important; overflow: visible !important; }
.sx-cut { font-size: 12px; color: #4d545a; }
/* Who's free: the column fits her name; the reason (a sentence: miles, when she is done, the last time) wraps under it */
.sx-measure .sxa-whyl { display: none !important; }
/* a right column narrower than its 380 px floor (sxFit: the columns gave way, a laptop with the menu): two lines a row, the name across the whole row */
.sx-tight .sx-sp { grid-template-columns: 12px 20px max(38px, var(--sxw-tm, 0px)) minmax(0,1fr) auto 22px; row-gap: 1px; padding-top: 4px; padding-bottom: 4px; }
.sx-tight .sx-sp > :nth-child(1) { grid-area: 1 / 1; } .sx-tight .sx-sp > :nth-child(2) { grid-area: 1 / 2; } .sx-tight .sx-sp > :nth-child(3) { grid-area: 1 / 3; }
.sx-tight .sx-sp > :nth-child(4) { grid-area: 1 / 4 / 2 / 6; } .sx-tight .sx-sp > :nth-child(5) { grid-area: 2 / 4; } .sx-tight .sx-sp > :nth-child(6) { grid-area: 2 / 5; justify-self: end; }
.sx-tight .sx-sp > :nth-child(7) { grid-area: 1 / 6; }
.sx-tight .sxa-pr { grid-template-columns: 24px minmax(0,1fr) auto auto; row-gap: 3px; padding-top: 5px; padding-bottom: 5px; }
.sx-tight .sxa-pr > :nth-child(1) { grid-area: 1 / 1 / 3 / 2; align-self: start; } .sx-tight .sxa-pr > :nth-child(2) { grid-area: 1 / 2 / 2 / 5; }
.sx-tight .sxa-pr > :nth-child(3) { grid-area: 2 / 2; justify-self: start; } .sx-tight .sxa-pr > :nth-child(4) { grid-area: 2 / 3; } .sx-tight .sxa-pr > :nth-child(5) { grid-area: 2 / 4; }
.sx-tight .sxa-wr { grid-template-columns: 22px minmax(0,1fr) auto auto; row-gap: 1px; padding: 3px 0; }
.sx-tight .sxa-wr > :nth-child(1) { grid-area: 1 / 1 / 3 / 2; align-self: start; } .sx-tight .sxa-wr > :nth-child(2) { grid-area: 1 / 2 / 2 / 5; }
.sx-tight .sxa-wr > :nth-child(3) { grid-area: 2 / 2; } .sx-tight .sxa-wr > :nth-child(4) { grid-area: 2 / 3; } .sx-tight .sxa-wr > :nth-child(5) { grid-area: 2 / 4; }
.sx-tight .sx-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* Cleaner routes' legend in the right column: whole items, wrapping as a group */
.sxa-rcol .sxa-lg { justify-content: flex-start; flex-wrap: wrap; gap: 4px 12px; }
.sxa-rcol .sxa-lg > span { white-space: nowrap; }
.sx-ph { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #dfe3e6; flex-wrap: wrap; }
.sx-pt { font-size: 14.5px; font-weight: 700; color: #16181a; }
.sx-pc { margin-left: auto; font-size: 12px; color: #6b747b; }
.sx-cnt { font-size: 12px; font-weight: 750; padding: 1px 7px; border-radius: 999px; background: #fff3c4; color: #8a5a00; }
.sx-tabs { display: flex; gap: 6px; width: 100%; flex-wrap: wrap; }
.sx-tab { height: 28px; padding: 0 9px; border-radius: 8px; border: 0; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; background: #e9ecee; color: #4d545a; display: inline-flex; align-items: center; gap: 5px; }
.sx-tab:hover { background: #dfe3e6; }
.sx-tab.on { background: #154A50; color: #fff; }
.sx-lgd { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: #4d545a; width: 100%; }
.sx-lgd span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sx-lgd i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.sx-scroll { min-height: 0; }
.sx-empty { padding: 14px 12px; font-size: 12.5px; color: #6b747b; }
.sx-empty.sm { padding: 6px 0; }

/* the kind marks: QC (gold dot), Linen (green square), Coaching (purple diamond) */
.sx-ar .k, .sxf-mhead .k, .sx-tab .k, .sx-pins .k { display: inline-block; width: 10px; height: 10px; flex: none; }
.sx-tab .k, .sxf-mhead .k { width: 9px; height: 9px; }
.sx-ar .k-qc, .sxf-mhead .k-qc, .sx-tab .k-qc { border-radius: 50%; background: #b7791f; }
.sx-ar .k-ln, .sxf-mhead .k-ln, .sx-tab .k-ln { border-radius: 2px; background: #2e9c7c; }
.sx-ar .k-co, .sxf-mhead .k-co, .sx-tab .k-co { transform: rotate(45deg) scale(.85); border-radius: 2px; background: #7a5cc7; }
.sx-ar .k.hollow { background: #fff; box-shadow: inset 0 0 0 2px #b7791f; }
.sx-ar .k-ln.hollow { box-shadow: inset 0 0 0 2px #2e9c7c; }
.sxf-mhead .k-need { border-radius: 50%; background: #f08a3c; }
.sxf-mhead .k-day { border-radius: 50%; background: #1d6e77; }

/* a list row (31 px) and its grid: dot, Property Name, distance, timeline, Guest in, + */
.sx-gh { font-size: 11.5px; font-weight: 700; color: #4d545a; background: #f2f4f5; padding: 5px 8px 5px 12px; border-bottom: 1px solid #e6e9ec; display: grid; grid-template-columns: 12px minmax(0,1fr) max(40px, var(--sxw-d, 0px)) 104px max(54px, var(--sxw-w, 0px)) 26px; gap: 7px; align-items: center; }
.sx-gh .r { text-align: right; }
.sx-ar { display: grid; grid-template-columns: 12px minmax(0,1fr) max(40px, var(--sxw-d, 0px)) 104px max(54px, var(--sxw-w, 0px)) 26px; gap: 7px; align-items: center; min-height: 31px; padding: 2px 8px 2px 12px; box-sizing: border-box; border-bottom: 1px solid #f0f2f3; font-size: 12.5px; color: #16181a; cursor: default; }
.sx-ar:hover, .sx-ar:focus-visible { background: #f6f8f9; outline: none; }
.sx-ar.in-near { background: #f3f9f9; }
.sx-ar.sel, .sx-ar.just { box-shadow: inset 3px 0 0 #ffd13a; background: #fff8dc; }
.sx-ar .n { font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }   /* session 429: never cut; longer than the column, a second line */
.sx-ar .d { font-size: 11.5px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: #4d545a; }
.sx-ar .d.near { font-weight: 700; color: #144d54; }
.sx-ar .w { font-size: 11.5px; color: #6b747b; white-space: nowrap; }
.sx-ar .w.today { color: #9a4a0e; font-weight: 700; }
.sx-plus { width: 26px; height: 26px; border-radius: 7px; border: 0; background: #dceff0; color: #144d54; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sx-plus:hover { background: #bfe3e4; }
.sx-plus .sx-i { stroke-width: 2.6; }
.sx-tl { position: relative; height: 10px; border-radius: 3px; background: #eef1f3; display: block; }
.sx-tl > span { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.sx-tl .sx-gl { width: 2px; top: -2px; bottom: -2px; background: #e8452c; border-radius: 1px; }
.sx-tl.big { height: 16px; border-radius: 4px; }
.sx-ax { display: flex; justify-content: space-between; font-size: 9.5px; font-weight: 600; color: #7b848b; }
.sx-near { padding: 9px 12px; background: #dceff0; border-bottom: 1px solid #bfe0e1; }
.sx-nh { display: flex; align-items: center; gap: 8px; color: #144d54; }
.sx-nt { font-size: 13px; font-weight: 700; color: #144d54; }
.sx-ns { font-size: 11.5px; color: #3d6e72; margin-top: 4px; }
.sx-nsub { margin-left: auto; font-size: 11.5px; color: #3d6e72; text-align: right; }
select.sx-nsel, .sx-nsel { margin-left: auto; width: auto; height: 26px; padding: 0 8px; border-radius: 7px; border: 1px solid #9fd3d4; background: #fff; font: inherit; font-size: 11.5px; font-weight: 600; color: #144d54; cursor: pointer; max-width: 190px; }
.sx-lfoot { padding: 10px 12px 14px; font-size: 11.5px; color: #6b747b; display: flex; flex-direction: column; gap: 6px; }
.sx-lfl { display: flex; gap: 14px; }

/* the map */
.sxf-mhead { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #dfe3e6; flex-wrap: wrap; min-height: 37px; }
.sxf-mhead .lg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; color: #4d545a; }
.sxf-mhead .lg.dim { color: #7b848b; }
.sxf-mhead .ln { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.sxf-map { flex: 1 1 auto; min-height: 300px; background: #e9eef0; }
.sxf-mfoot { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 2; }
.sxf-mfoot .sx-tg { height: 30px; box-shadow: 0 2px 6px rgba(14,54,59,.15); }
.sx-pins { position: absolute; left: 0; top: 0; }
.sx-pin { position: absolute; transform: translate(-50%, -50%); border: 0; padding: 0; cursor: pointer; }
.sx-pin.stop { width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 800 10px/22px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(0,0,0,.25); }
.sx-pin.stop.done { opacity: .8; }
.sx-pin.cand { width: 12px; height: 12px; box-shadow: 0 0 0 2px #fff; }
.sx-pin.cand.k-qc { border-radius: 50%; background: #b7791f; }
.sx-pin.cand.k-ln { border-radius: 2px; background: #2e9c7c; }
.sx-pin.cand.k-co { transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px; background: #7a5cc7; }
.sx-pin.cand.hollow { background: #fff; box-shadow: inset 0 0 0 2.5px #b7791f, 0 0 0 1px #fff; }
.sx-pin.cand.k-ln.hollow { box-shadow: inset 0 0 0 2.5px #2e9c7c, 0 0 0 1px #fff; }
.sx-pin.cand.k-co.hollow { box-shadow: inset 0 0 0 2.5px #7a5cc7, 0 0 0 1px #fff; }
.sx-pin:hover { z-index: 3; }
.sx-pin:focus-visible { z-index: 3; outline: 2px solid #1d6e77; outline-offset: 2px; }   /* session 430: no yellow ring on a Schedule map */

/* Routes */
.sx-to { margin-left: auto; display: flex; gap: 4px; padding: 3px; background: #E1E5E8; border-radius: 9px; }
.sx-to button { height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: #3B4348; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.sx-to button i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.sx-to button.on { background: #fff; color: #16181a; box-shadow: 0 1px 3px rgba(14,54,59,.15); }
.sx-to button:hover { color: #16181a; }
.sx-rc { border-bottom: 1px solid #dfe3e6; }
.sx-rh { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.sx-rh .sq { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.sx-rh .rn { font-size: 15px; font-weight: 700; color: #16181a; }
.sx-rh .rr { margin-left: auto; font-size: 12px; color: #4d545a; white-space: nowrap; }
.sx-pill { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; background: #e9ecee; color: #4d545a; }
.sx-pill.p-at { background: #dceff0; color: #144d54; }
.sx-pill.p-done { background: #e3f4ea; color: #1f6b43; }
.sx-pill.p-off { background: #fdeeea; color: #8a2a16; }
.sx-rsum { font-size: 12px; color: #6b747b; padding: 0 12px 8px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sx-rsum b { color: #16181a; font-weight: 700; }
.sx-sp { display: grid; grid-template-columns: 12px 20px max(38px, var(--sxw-tm, 0px)) minmax(0,1fr) max(40px, var(--sxw-kd, 0px)) max(50px, var(--sxw-g, 0px)) 22px; gap: 7px; align-items: center; min-height: 30px; padding: 2px 8px 2px 10px; box-sizing: border-box; border-top: 1px solid #f0f2f3; font-size: 12.5px; color: #16181a; cursor: pointer; }
.sx-sp:hover, .sx-sp:focus-visible { background: #f6f8f9; outline: none; }
.sx-sp[draggable=true] { cursor: grab; }
.sx-sp.fs-dragging { opacity: .5; }
.sx-sp.fs-dropline { box-shadow: inset 0 2px 0 #1d6e77; }
.sx-sp.just { background: #fff8dc; }
.sx-sp.due { background: #fff6ee; }
.sx-sp.cancel { opacity: .55; text-decoration: line-through; }
.sx-sp .grip { color: #b8c2c8; }
.sx-sp .num { width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: #fff; }
.sx-sp .tm { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #4d545a; }
.sx-sp .nm { font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.sx-sp .tm { white-space: nowrap; }
.sx-sp .kd { font-size: 11px; color: #6b747b; white-space: nowrap; }
.sx-sp .kd.g.today { color: #9a4a0e; font-weight: 700; }
.sx-sp.late .tm, .sx-sp.late .kd.g { color: #c0331a; font-weight: 800; }
.sx-sp .sx-stw { display: flex; justify-content: flex-end; gap: 3px; }
.sx-x { width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: #9aa3a9; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.sx-x:hover { background: #fdeeea; color: #c0331a; }
.sx-st { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; white-space: nowrap; background: #e9ecee; color: #4d545a; }
.sx-st.st-done { background: #e3f4ea; color: #1f6b43; }
.sx-st.st-here, .sx-st.st-herex { background: #dceff0; color: #144d54; }
.sx-st.st-late, .sx-st.st-due { background: #fdeeea; color: #c2410c; }
.sx-st.st-skip, .sx-st.st-cancel { background: #f2f4f5; color: #6b747b; }
.sx-sug { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 10px 4px 50px; font-size: 12px; color: #144d54; background: #f3f9f9; border-top: 1px solid #e3f0f0; }
.sx-sug.late { background: #fdeeea; color: #8a2a16; border-top-color: #f6d6cc; }
.sx-sug button { margin-left: auto; border: 1px solid #f0c4b8; background: #fff; color: #8a2a16; font: inherit; font-size: 11.5px; font-weight: 700; border-radius: 6px; height: 22px; padding: 0 8px; cursor: pointer; white-space: nowrap; }
.sx-sug button:hover { background: #fff6f3; border-color: #c0331a; }
.sx-more { padding: 6px 12px 10px 50px; border-top: 1px solid #f0f2f3; background: #fbfcfc; }
.sx-tools { border-top: 1px solid #f0f2f3; }
.sx-tools > summary { cursor: pointer; padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: #1d6e77; text-decoration: underline; }
.sx-toolsin { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.sx-toolrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* the hover card (board 2) */
.sx-hov { position: fixed; z-index: 60; width: 340px; background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(14,54,59,.22); border: 1px solid #dfe3e6; padding: 12px 14px; font-size: 12.5px; color: #16181a; }
.sx-hov.sheet { border-radius: 14px 14px 12px 12px; max-height: 80vh; overflow-y: auto; }
.sx-hov .sx-hn { font-size: 14px; font-weight: 750; }
.sx-hov .sx-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sx-tg2 { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; background: #e9ecee; color: #4d545a; }
.sx-tg2.t-qc { background: #fbf0d9; color: #8a5a00; }
.sx-tg2.t-ln { background: #e0f2ec; color: #1f6b52; }
.sx-tg2.t-co { background: #ece7f8; color: #5b3fa6; }
.sx-tg2.t-g { background: #fde9dc; color: #9a4a0e; }
.sx-tg2.t-n { background: #e9ecee; color: #3b4348; }
.sx-hov .sx-hbar { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.sx-hov .sx-cap { margin-top: 6px; font-size: 12.5px; color: #3b4348; }
.sx-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px 10px; margin-top: 10px; }
.sx-facts .fl { font-size: 11px; font-weight: 600; color: #6b747b; }
.sx-facts .fv { font-size: 12.5px; font-weight: 700; color: #16181a; overflow-wrap: break-word; }
.sx-facts .fv.or { color: #9a4a0e; }
.sx-facts .fv.pu { color: #5b3fa6; }
.sx-hov .sx-fit { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #f3f9f9; color: #144d54; font-size: 12.5px; }
.sx-hov .sx-hacts { margin-top: 10px; display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.sx-addafter { height: 30px; padding: 0 12px; border-radius: 8px; border: 0; background: #dceff0; color: #144d54; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sx-addafter:hover { background: #bfe3e4; }
.sx-addafter:focus-visible { outline: 2px solid #1d6e77; outline-offset: 2px; }
.sx-hov .sx-hnote { margin-top: 8px; font-size: 11px; color: #7b848b; }

/* the Undo bar (board 4b) */
.sx-undo { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70; display: none; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  background: #16181a; color: #fff; border-radius: 10px; padding: 10px 12px 10px 16px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.sx-undo.on { display: flex; }
.sx-undo .sx-undob { height: 30px; padding: 0 14px; border: 0; border-radius: 7px; background: #ffd13a; color: #16181a; font: inherit; font-weight: 750; cursor: pointer; }
.sx-undo .sx-undob:hover { background: #ffe07a; }

.sxf-classic { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: #fff8dc; font-size: 13px; color: #5a4300; }
.sxf-work { margin-bottom: 10px; }
.sxf-past { padding: 0 4px; }

/* ---------------------------------------------------------------------------------------------- Assign Cleans (boards 3, 4, 4b) */
.sxa-midcol { display: flex; flex-direction: column; gap: 0; }
.sxa-mid { position: relative; flex: 1 1 auto; min-height: 0; }
.sxa-map { min-height: 300px; }
/* normal view: the clean and who is free, then Cleaner routes under it (the map stays in view, so they no longer sit under the map) */
.sxa-rcol { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sxa-rcol .sxa-routes { border-radius: 14px; }
.sxa-rcol .sxa-cards { grid-template-columns: minmax(0, 1fr); }
.sxa-gh { display: grid; grid-template-columns: 50px minmax(0,1fr) max(28px, var(--sxw-out, 0px)) max(56px, var(--sxw-ni, 0px)) 32px 34px max(30px, var(--sxw-ic, 0px)); gap: 6px; padding: 6px 10px 6px 12px; font-size: 11.5px; font-weight: 700; color: #4d545a; border-bottom: 1px solid #e6e9ec; background: #fff; position: sticky; top: calc(var(--hdrH) + var(--bandH)); z-index: 1; }
.sxa-gh.full { grid-template-columns: 54px minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.9fr) 34px max(64px, var(--sxw-ni, 0px)) 36px 38px max(34px, var(--sxw-ic, 0px)); }
.sxa-grp { font-size: 11.5px; font-weight: 700; color: #4d545a; background: #f2f4f5; padding: 5px 12px; border-bottom: 1px solid #e6e9ec; }
.sxa-ar { display: grid; grid-template-columns: 50px minmax(0,1fr) max(28px, var(--sxw-out, 0px)) max(56px, var(--sxw-ni, 0px)) 32px 34px max(30px, var(--sxw-ic, 0px)); gap: 6px; align-items: center; min-height: 31px; padding: 2px 10px 2px 12px; box-sizing: border-box; border-bottom: 1px solid #f0f2f3; font-size: 12.5px; color: #16181a; cursor: pointer; }
.sxa-ar.full { grid-template-columns: 54px minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.9fr) 34px max(64px, var(--sxw-ni, 0px)) 36px 38px max(34px, var(--sxw-ic, 0px)); min-height: 29px; }
.sxa-ar:hover, .sxa-ar:focus-visible { background: #f6f8f9; outline: none; }
.sxa-ar.on { background: #fff8dc; box-shadow: inset 3px 0 0 #ffd13a; }
.sxa-ar .t { display: flex; align-items: center; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sxa-ar .t .grip { color: #b8c2c8; cursor: grab; }
.sxa-ar > span { font-size: 12px; white-space: nowrap; }
.sxa-ar > span.n { font-weight: 600; white-space: normal; line-height: 1.25; overflow-wrap: break-word; }   /* session 429: never cut */
.sxa-ar > span.c { color: #4d545a; white-space: normal; line-height: 1.25; overflow-wrap: break-word; }
.sxa-ar .or { color: #9a4a0e; }
.sxa-ar .b { font-weight: 700; }
.sxa-ar .ic { display: flex; gap: 3px; justify-content: flex-end; }
.sxa-ar .ic i { width: 16px; height: 16px; border-radius: 50%; font-style: normal; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.sxa-ar .ic .ic-deep { background: #ece7f8; color: #5b3fa6; }
.sxa-ar .ic .ic-same { background: #fde9dc; color: #c2410c; font-weight: 800; }
.sxa-card { padding: 12px 14px; border-bottom: 1px solid #dfe3e6; }
.sxa-ch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sxa-cn { font-size: 14.5px; font-weight: 750; margin-right: auto; }
.sxa-who { margin-top: 12px; }
.sxa-wh { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: #16181a; margin-bottom: 4px; }
.sxa-wr { display: grid; grid-template-columns: 22px minmax(0,1fr) max(58px, var(--sxw-wn, 0px)) max(76px, var(--sxw-wl, 0px)) max(46px, var(--sxw-wq, 0px)); gap: 6px; align-items: center; min-height: 26px; font-size: 12px; color: #4d545a; white-space: nowrap; }
.sxa-wr .nm { font-weight: 700; color: #16181a; white-space: normal; line-height: 1.25; overflow-wrap: break-word; }
.sxa-wr .qs { font-weight: 750; color: #144d54; }
.sxa-wr .dim { color: #9aa3a9; }
.sx-av { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sx-av.lt { background: #6fd5d4; color: #0e3a3f; }
.sxa-free { padding-bottom: 14px; }
.sxa-fh { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.sxa-pr { display: grid; grid-template-columns: 24px minmax(0,1fr) max(58px, var(--sxw-win, 0px)) max(46px, var(--sxw-hrs, 0px)) max(68px, var(--sxw-cn, 0px)); gap: 6px; align-items: center; min-height: 32px; padding: 3px 12px; box-sizing: border-box; border-bottom: 1px solid #f0f2f3; font-size: 12.5px; }
.sxa-pr:hover { background: #f6f8f9; }
.sxa-pr.best { background: #fff8dc; box-shadow: inset 3px 0 0 #ffd13a; }
.sxa-pr.grey .nm b { color: #6b747b; }
.sxa-pr.drop { background: #dceff0; box-shadow: inset 0 0 0 2px #1d6e77; }
.sxa-pr .nm { line-height: 1.3; overflow-wrap: break-word; }
.sxa-pr .sxa-why { color: #6b747b; font-weight: 400; }   /* session 426: its own class (shell.css .why is a boxed note) */
.sxa-pr .win { font-size: 11px; font-weight: 700; color: #144d54; background: #dceff0; border-radius: 6px; padding: 2px 6px; text-align: center; white-space: nowrap; }
.sxa-pr .hrs { font-size: 12px; color: #4d545a; text-align: right; font-variant-numeric: tabular-nums; }
.sxa-ab { height: 26px; border-radius: 7px; border: 1px solid #1d6e77; background: #fff; color: #144d54; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.sxa-ab:hover { background: #dceff0; }
.sxa-ab.best { background: linear-gradient(#ffd13a,#f5c21c); border-color: #e8b40c; color: #16181a; }
.sxa-ab:focus-visible { outline: 2px solid #1d6e77; outline-offset: 2px; }
.sx-lock { color: #9aa3a9; display: inline-flex; justify-content: center; }
label.sxa-type, .sxa-type { display: flex; align-items: center; gap: 8px; margin: 10px 12px 0; height: 36px; padding: 0 10px; border: 1px solid #D2D8DD; border-radius: 9px; color: #6b747b; }
input.sxa-tin, .sxa-type input { border: 0; outline: 0; flex: 1; font: inherit; font-size: 13px; background: transparent; min-width: 0; height: auto; width: auto; padding: 0; }
.sxa-note { padding: 10px 14px 0; font-size: 12px; color: #6b747b; }
label.sx-sel, .sx-sel { display: inline-flex; }
select.sx-selx, .sx-sel select { width: auto; height: 40px; padding: 0 30px 0 12px; border: 1px solid #D2D8DD; border-radius: 9px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: #1E2428; cursor: pointer; }

/* Cleaner routes, under the map (dark teal) */
.sxa-routes { background: #14555B; color: #fff; border-radius: 0 0 14px 14px; padding: 12px 14px 14px; }
.sxa-rh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sxa-rt { font-size: 14.5px; font-weight: 750; }
.sxa-rs { font-size: 12.5px; color: rgba(255,255,255,.8); }
.sxa-more { border: 0; background: none; color: #a8eceb; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }
.sxa-lg { display: flex; gap: 14px; width: 100%; justify-content: flex-end; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.85); margin-top: 6px; }
.sxa-lg span { display: inline-flex; align-items: center; gap: 5px; }
.sxa-lg i { display: inline-block; width: 18px; height: 8px; border-radius: 2px; }
.sxa-lg i.a { background: #6fd5d4; }
.sxa-lg i.y { border: 2px solid #ffd13a; }
.sxa-lg i.g { width: 2px; height: 12px; background: #e8452c; }
.sxa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 320px)); justify-content: start; gap: 10px; margin-top: 10px; }   /* session 426, board 5: 300 to 320 px each, never stretched */
.sxa-empty { color: rgba(255,255,255,.8); font-size: 12.5px; }
.sxa-cc { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.sxa-cc.pointing { border: 2px solid #ffd13a; }
.sxa-cc.drop { border: 2px dashed #ffd13a; background: rgba(255,209,58,.08); }
.sxa-cch { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sxa-cch .nm { font-size: 14px; font-weight: 750; overflow-wrap: break-word; min-width: 0; }
.sxa-cch .hrs { margin-left: auto; font-size: 12px; font-weight: 750; background: rgba(255,255,255,.12); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sxa-cc .sx-tl.dark, .sx-tl.dark { background: rgba(0,0,0,.25); height: 12px; }
.sx-tl.dark > span { background: #6fd5d4; }
.sx-tl.dark > span.sxa-tryb { background: transparent; box-shadow: inset 0 0 0 2px #ffd13a; }
.sx-tl.dark > span.sx-gl { background: #e8452c; }
.sx-ax.dark { color: rgba(255,255,255,.7); margin: 3px 0 6px; }
.sxa-st { display: grid; grid-template-columns: 16px 40px minmax(0,1fr) 20px; gap: 6px; align-items: center; min-height: 22px; font-size: 12.5px; }
.sxa-st .n { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sxa-st .t { font-weight: 750; font-variant-numeric: tabular-nums; }
.sxa-st .h { line-height: 1.25; overflow-wrap: break-word; }
.sxa-st.sxa-try { color: #ffd13a; }   /* session 430: never .pv (photo-viewer.css makes any .pv a full-window dark layer) */
.sxa-st.held .h { color: #a8eceb; }
.sxa-x { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sxa-x:hover { background: rgba(232,69,44,.3); border-color: #e8452c; }
.sxa-x:focus-visible { outline: 2px solid #ffd13a; outline-offset: 1px; }
.sxa-lock { color: rgba(255,255,255,.5); display: flex; justify-content: center; }
.sxa-if { margin-top: 6px; font-size: 12px; font-weight: 700; color: #ffd13a; }
.sxa-free2 { margin-top: 6px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); }

/* the check (board 4) */
.sxa-ckwrap { position: fixed; inset: 0; z-index: 65; background: rgba(14,24,28,.18); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sxa-check { width: 360px; max-width: 100%; background: #fff; border-radius: 12px; box-shadow: 0 18px 44px rgba(14,54,59,.3); padding: 14px 16px; font-size: 13px; color: #16181a; }
.sxa-ckh { font-size: 15px; font-weight: 750; }
.sxa-ckp { margin-top: 4px; color: #4d545a; font-size: 12.5px; }
.sxa-ckb { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #e7f5ef; color: #1f6b43; font-size: 12.5px; font-weight: 600; }
.sxa-ckb.bad { background: #fdeeea; color: #8a2a16; }
.sxa-sw { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.sxa-sw label { cursor: pointer; }
.sxa-nt { margin-left: auto; font-size: 11.5px; color: #6b747b; }
.sx-sw { width: 30px; height: 18px; border-radius: 9px; border: 0; background: #cdd3d7; position: relative; cursor: pointer; padding: 0; flex: none; }
.sx-sw i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.sx-sw.on { background: #1d6e77; }
.sx-sw.on i { left: 14px; }
.sx-sw:focus-visible { outline: 2px solid #1d6e77; outline-offset: 2px; }
.sxa-ckbt { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.sxa-ckbt .sx-lk { margin-left: auto; }
.sxa-go { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid #e8b40c; background: linear-gradient(#ffd13a,#f5c21c); color: #16181a; font: inherit; font-weight: 750; cursor: pointer; }
.sxa-go:hover { filter: brightness(1.04); }
.sxa-go:focus-visible, .sxa-cancel:focus-visible { outline: 2px solid #1d6e77; outline-offset: 2px; }
.sxa-cancel { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid #D2D8DD; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.sxa-cancel:hover { background: #f6f8f9; }
.sxa-tryout { margin-top: 8px; font-size: 12px; color: #4d545a; }

/* the slim top bar (full screen) */
.sxa-top { position: fixed; left: 0; right: 0; top: 0; height: 52px; z-index: 55; background: #154A50; color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.sxa-top .sxa-tt { font-size: 17px; font-weight: 750; white-space: nowrap; }
.sxa-top .sxa-ts { font-size: 13px; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sxa-top .sxa-ts b { color: #ffd13a; }
.sxa-top .sxa-tdays { display: flex; gap: 6px; }
.sxa-top .sx-day { height: 30px; background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.sxa-top .sx-day .c { color: rgba(255,255,255,.75); }
.sxa-top .sx-day.on { background: #fff; color: #154A50; border-color: #fff; }
.sxa-top .sx-day.on .c { color: #4d545a; }
.sxa-top .sx-sel select { height: 32px; background: rgba(255,255,255,.12); border-color: transparent; color: #fff; font-size: 13px; }
.sxa-top .sxa-exit { height: 32px; padding: 0 12px; border-radius: 8px; border: 0; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sxa-top .sxa-exit:hover { background: rgba(255,255,255,.22); }
.sxa-top .sxa-exit .ch-ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Full screen (session 426, both tabs): the menu, the Hub's top bar, its coloured stripe and the "Settings for this page" strip all step aside; only the
   52 px top bar shows. Columns keep their drawn widths (Assign Cleans 680 / map / 500, Field 470 / map / 380) and only the map grows. */
.sx-full .side, .sxa-full .side, .sx-full .top, .sxa-full .top, .sx-full .topband, .sxa-full .topband, .sx-full .mh-page-settings, .sxa-full .mh-page-settings { display: none !important; }
.sx-full .main, .sxa-full .main { margin-left: 0 !important; }
.sx-full .sxf-page .ch-head, .sx-full .sxf-page #sxBand, .sx-full .sxf-page #sxFilter, .sx-full .sxf-page #sxClassicBar { display: none; }
.sx-full .sxf-page { position: fixed; inset: 52px 0 0 0; z-index: 50; background: #EDEFF1; padding: 10px; overflow: auto; }
.sx-full .sxf-page .sx-body { margin-top: 0; }
.sx-full .sxf-cols, .sxa-full .sxa-cols { display: flex; align-items: stretch; }
.sx-full .sxf-mid { position: relative; top: auto; }
.sxa-full .sxa-midcol { position: static; height: auto; min-height: 0; }
.sxa-full .sxa-mid { min-height: 420px; border-radius: 14px 14px 0 0; }
.sxa-full .sxa-map { min-height: 380px; }
.sx-full .sx-scroll, .sxa-full .sx-scroll { overflow-y: auto; flex: 1 1 auto; }
.sx-full .sxf-right, .sxa-full .sxa-right { overflow-y: auto; }
.sx-full .sxf-past { overflow-y: auto; flex: 1; }
.sxa-full .sxa-gh { top: 0; }
.sx-full .sxf-left, .sx-full .sxf-mid, .sx-full .sxf-right { height: calc(100vh - 72px); max-height: none; min-height: 0; }
.sx-full .sxf-left { flex: 0 0 var(--sx-lw, 600px); }   /* session 430: schedule.js sxDivFit sets the widths */
.sx-full .sxf-right { flex: 0 0 var(--sx-rw, 480px); }
.sx-full .sxf-mid { flex: 1 1 auto; min-width: 360px; }
.sx-full .sxf-cols, .sxa-full .sxa-cols { gap: 2px; }   /* session 430: 2 + the 6 px line + 2 = board 5's 10 px between the columns */
.sxa-full .sxa-left { flex: 0 0 var(--sx-lw, 680px); min-width: 0; }
.sxa-full .sxa-right { flex: 0 0 var(--sx-rw, 500px); min-width: 0; }
.sxa-full .sxa-midcol { flex: 1 0 360px; min-width: 360px; }
.sxa-full .sxa-page .ch-head, .sxa-full .sxa-page #sxBand, .sxa-full .sxa-page #sxFilter { display: none; }
.sxa-full .sxa-page { position: fixed; inset: 52px 0 0 0; z-index: 50; background: #EDEFF1; padding: 10px; overflow: auto; }
.sxa-full .sxa-page .sx-body { margin-top: 0; }
.sxa-full .sxa-left { height: calc(100vh - 72px); max-height: none; }
.sxa-full .sxa-right { height: calc(100vh - 72px); max-height: none; }

/* Session 430 (Part A): the two lines beside the map in full screen */
.sx-div { flex: 0 0 6px; align-self: stretch; border-radius: 3px; background: #cfd6da; cursor: col-resize; touch-action: none; }
.sx-div:hover, .sx-div.on { background: #7d8a91; }
.sx-div:focus-visible { outline: 2px solid #1d6e77; outline-offset: 1px; background: #7d8a91; }
.sx-dragging, .sx-dragging * { cursor: col-resize !important; user-select: none !important; }
/* a left column dragged narrower than its rows: Assign Cleans keeps Time, Property, Next in, Est (Client, Region, Out and Stay are on the clean's card) with the Cleaner under the name; Field puts the name across the row, the rest under it. A Property Name never breaks. */
.sx-tight .sxa-gh.full, .sx-tight .sxa-ar.full { grid-template-columns: 54px minmax(0,1fr) max(56px, var(--sxw-ni, 0px)) 34px max(30px, var(--sxw-ic, 0px)); }
.sx-tight .sxa-gh.full > :nth-child(3), .sx-tight .sxa-gh.full > :nth-child(4), .sx-tight .sxa-gh.full > :nth-child(5), .sx-tight .sxa-gh.full > :nth-child(7),
.sx-tight .sxa-ar.full > :nth-child(3), .sx-tight .sxa-ar.full > :nth-child(5), .sx-tight .sxa-ar.full > :nth-child(7), .sx-tight .sxa-ar.full:not(.cl) > :nth-child(4) { display: none; }
.sx-tight .sxa-ar.full.cl > .cl { grid-column: 2 / -1; grid-row: 2; }
.sx-tight .sxa-ar.full.cl { row-gap: 1px; }
.sx-tight .sx-ar, .sx-tight .sx-gh { grid-template-columns: 12px max(40px, var(--sxw-d, 0px)) minmax(0,1fr) max(54px, var(--sxw-w, 0px)) 26px; row-gap: 2px; }
.sx-tight .sx-ar > :nth-child(1), .sx-tight .sx-gh > :nth-child(1) { grid-area: 1 / 1; } .sx-tight .sx-ar > :nth-child(2), .sx-tight .sx-gh > :nth-child(2) { grid-area: 1 / 2 / 2 / 5; }
.sx-tight .sx-ar > :nth-child(3), .sx-tight .sx-gh > :nth-child(3) { grid-area: 2 / 2; } .sx-tight .sx-ar > :nth-child(4), .sx-tight .sx-gh > :nth-child(4) { grid-area: 2 / 3; }
.sx-tight .sx-ar > :nth-child(5), .sx-tight .sx-gh > :nth-child(5) { grid-area: 2 / 4; } .sx-tight .sx-ar > :nth-child(6), .sx-tight .sx-gh > :nth-child(6) { grid-area: 1 / 5 / 3 / 6; }
/* narrower windows: a phone stacks */
@media (max-width: 1180px) {
  .sxf-cols, .sxa-cols { grid-template-columns: minmax(0, 1fr); }
  .sxf-mid, .sxa-midcol { position: relative; top: auto; height: 420px; }
  .sxf-right.stick { position: static; }
  .sxa-cards { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .sx-ar { grid-template-columns: 12px minmax(0,1fr) 38px 80px 48px 30px; gap: 5px; height: 40px; }
  .sx-gh { grid-template-columns: 12px minmax(0,1fr) 38px 80px 48px 30px; gap: 5px; }
  .sx-plus, .sx-x { width: 32px; height: 32px; }
  .sx-sp { grid-template-columns: 12px 20px 36px minmax(0,1fr) 34px 46px 32px; height: 40px; }
  .sx-rs, .sx-hist { width: 100%; }
  .sxa-gh, .sxa-ar { grid-template-columns: 44px minmax(0,1fr) 26px 50px 30px 32px 26px; height: 40px; }
  .sxa-pr { height: 44px; }
  .sxa-ab { height: 34px; }
  .sx-undo { left: 16px; right: 16px; transform: none; }
}

/* ---------------------------------------------------------------------------------------------- session 426 */
/* (Session 426's full-width frame, .sxw-page, is gone: session 429 puts the page in the core frame.) */
/* The map's note (no stops, could not load) sits over the one map instead of replacing it. */
.sx-mapnote.fs-mapempty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: auto; z-index: 3; background: rgba(255,255,255,.92); border-radius: 10px; box-shadow: 0 4px 14px rgba(14,54,59,.12); }
.sxa-mnote { margin-left: 10px; font-size: 12px; color: #6b747b; }
/* Assign Cleans' left tabs (board 5) */
.sxa-lh { flex-wrap: wrap; row-gap: 6px; }
.sxa-tabs { width: auto; flex-wrap: nowrap; }
.sxa-tabs .sx-tab { white-space: nowrap; }
.sxa-tabs .sx-tab { height: 28px; }
.sxa-tc { font-weight: 750; }
.sxa-line { min-width: 0; }
.sxa-nogrip { display: inline-block; width: 11px; }
/* the Cleaner column: Assigned and All (normal view: Time, Property, Cleaner, Next in, Est; full screen: Cleaner replaces Region) */
/* session 429: the Cleaner column takes its names' width only from what the Property Name leaves (at least 130 px); when the column gave way it wraps
   between words first (at least 80 px), so a Property Name is never squeezed into broken words */
.sxa-gh.cl, .sxa-ar.cl { grid-template-columns: 50px minmax(130px,1fr) minmax(80px, var(--sxw-cl, var(--sxa-cl, 110px))) max(56px, var(--sxw-ni, 0px)) 34px max(30px, var(--sxw-ic, 0px)); }
.sxa-gh.full.cl, .sxa-ar.full.cl { grid-template-columns: 54px minmax(0,1.6fr) minmax(0,.9fr) var(--sxw-cl, var(--sxa-cl, 140px)) 34px max(64px, var(--sxw-ni, 0px)) 36px 38px max(34px, var(--sxw-ic, 0px)); }
.sxa-ar.cl { height: auto; min-height: 31px; padding-top: 3px; padding-bottom: 3px; }
.sxa-ar.full.cl { min-height: 29px; }
.sxa-ar.cl > span.cl { white-space: normal; overflow: visible; line-height: 1.25; font-weight: 600; color: #16181a; }
.sxa-ar.cl > span.cl.none { color: #9a4a0e; font-weight: 700; }
.sxa-ar .sx-lock { color: #9aa3a9; }
/* the picked clean's card: who has it now, and the way back to Who's available */
.sxa-unpick { font-size: 12px; }
.sxa-now { margin-top: 6px; font-size: 12.5px; color: #4d545a; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sxa-now b { color: #16181a; }
/* Who's available [day] (board 5): name and her day, window chip, hours this week, cleans that day */
.sxa-cr { cursor: default; height: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.sxa-cr .nm { white-space: normal; overflow: visible; line-height: 1.3; }   /* a name is never cut off: a narrow column wraps it */
.sxa-cr .win.ad { background: #e2f4ee; color: #08513f; }
.sxa-cr .cn { font-size: 12px; font-weight: 700; color: #16181a; text-align: right; white-space: nowrap; }
/* the top bar never pushes Exit full screen off the window: the day and person buttons scroll sideways first */
.sxa-top .sxa-tdays { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sxa-top .sxa-exit { flex: none; }

/* ---------------------------------------------------------------------------------------------- session 430 (Part B3): her card */
.sxa-nb { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(29,110,119,.5); text-underline-offset: 2px; }
.sxa-nb:hover { color: #1d6e77; text-decoration-color: currentColor; }
.sxa-nb:focus-visible { outline: 2px solid #1d6e77; outline-offset: 1px; }
.sxa-cc { cursor: pointer; }
.sxa-cc .sxa-nb:hover { color: #a8eceb; }
.sxh { padding: 12px; border-bottom: 3px solid #1d6e77; background: #f2f9f9; }
.sxh-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sxh-n { font-size: 15px; font-weight: 750; color: #16181a; text-decoration: underline; text-decoration-color: rgba(29,110,119,.5); text-underline-offset: 2px; min-width: 0; }
.sxh-back { margin-left: auto; font-size: 12px; }
.sxh-f { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.sxh-f .fl { font-size: 11px; color: #6b747b; }
.sxh-f .fv { font-size: 13px; font-weight: 700; color: #16181a; overflow-wrap: break-word; }
.sxh-l { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.sxh-r { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 6px; font-size: 12.5px; align-items: baseline; }
.sxh-r .t { font-weight: 750; font-variant-numeric: tabular-nums; }
.sxh-r .h { overflow-wrap: break-word; line-height: 1.25; }
.sxh-r .e { font-size: 12px; color: #4d545a; white-space: nowrap; }
.sxh-g { font-size: 12px; font-weight: 700; color: #08513f; background: #e2f4ee; border-radius: 6px; padding: 2px 8px; align-self: flex-start; }
.sxh-w { font-size: 12.5px; color: #4d545a; }
.sxh-end { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #16181a; }
.sxh-fit { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid #dfe3e6; font-size: 12.5px; display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.sxh-fit.ok { border-color: #2e9c7c; }
.sxh-fit.no { border-color: #d9a441; }
.sxh-fit > span:first-child { min-width: 0; flex: 1 1 200px; overflow-wrap: break-word; }
.sxh-a { white-space: nowrap; width: auto; padding: 0 12px; }