/* field-schedule.css -- session 277: Field > Scheduling (field-schedule.js). The old tool's pieces (qcb-* in
   engine.php) in the platform's tokens. Every colour is a token except the stop-type colours, which are the old
   tool's own map colours, kept so a stop reads the same on the map and in the list.
   Session 280: one screen from 1180 px; the Planner fills the window (field-schedule.js fsFit sets the height) and
   its panels scroll inside themselves; below 1180 px they stack and the page scrolls.
   Session 281 (Layout E, briefs/s281-mockup-field-1440.html and -1920.html): one title bar of fixed size on every
   Scheduling view; the list is the widest thing on the page and a property name is never cut (it wraps, no
   ellipsis anywhere on the page); one narrow route column (340 px, 380 from 1680 px) with a tab per route. */

/* ---- the title bar: the same on every Scheduling view, every part a fixed size, so nothing moves between sub-tabs ---- */
.fs-bar{ display:flex; align-items:center; gap:14px; height:44px; margin-bottom:12px; }
.fs-bar .fs-h1{ flex:0 0 170px; width:170px; margin:0; font-size:26px; line-height:44px; color:var(--teal-dark); white-space:nowrap; }
.fs-subtabs{ display:flex; gap:4px; flex:none; }
.fs-subtab{ box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0; border-radius:var(--radius); font-size:14px; font-weight:700; color:var(--muted); text-decoration:none; white-space:nowrap; border:1px solid transparent; }
.fs-subtab-assignments{ width:175px; }
.fs-subtab-field{ width:208px; }
.fs-subtab:hover{ color:var(--teal-dark); background:var(--teal-pale); }
.fs-subtab.on{ background:var(--teal-dark); color:var(--white); }
.fs-barright{ margin-left:auto; display:flex; align-items:center; gap:10px; flex:none; }
.fs-date{ position:relative; box-sizing:border-box; width:112px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--input-border); border-radius:var(--radius); background:var(--white); font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; }
.fs-date input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; margin:0; }
.fs-date:focus-within{ outline:2px solid var(--teal-dark); outline-offset:1px; }
.fs-bar .fs-undo{ box-sizing:border-box; width:96px; height:36px; justify-content:center; border-width:2px; font-size:14px; }
.fs-placeholder{ color:var(--muted); font-size:15px; margin:var(--s4) 0; }
.fs-qcback{ display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.fs-inner{ padding:5px 12px; border-radius:var(--pill-radius); border:1px solid var(--line); background:var(--white); color:var(--ink); text-decoration:none; font-weight:600; font-size:13px; }
.fs-inner.on{ background:var(--teal-dark); border-color:var(--teal-dark); color:var(--white); }
.fs-viewonly{ font-size:12px; font-weight:700; color:var(--muted); border:1px dashed var(--line); border-radius:var(--pill-radius); padding:3px 10px; }
.fs{ min-width:0; }
.fs-datebar{ display:flex; align-items:center; gap:8px; font-weight:500; font-size:13px; color:var(--muted); }
.fs-datebar input, .fs input[type=time], .fs input[type=text], .fs select, .fs-picker input, .fs-picker select{ width:auto; height:32px; border:1px solid var(--input-border); border-radius:var(--input-radius); padding:0 8px; background:var(--white); color:var(--ink); font:inherit; font-size:13px; max-width:100%; }
.fs-datebar input{ font-weight:700; color:var(--ink); }

/* ---- shared bits ---- */
.fs-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); min-width:0; min-height:0; }
.fs-count{ display:inline-block; min-width:22px; padding:1px 7px; border-radius:var(--pill-radius); background:var(--teal-pale); color:var(--teal-dark); font-size:12px; text-align:center; }
.fs-note{ color:var(--muted); font-size:12px; font-weight:400; }
.fs-pad{ margin:4px 0; }
.fs-dim{ color:var(--muted); }
.fs-none{ color:var(--danger-text); font-weight:600; }
.fs-red{ color:var(--danger-text); }
.fs-amber{ color:var(--amber-text); }
.fs-lbl{ font-size:12px; font-weight:700; color:var(--ink); }
.fs-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.fs-btn{ display:inline-flex; align-items:center; gap:4px; height:32px; padding:0 12px; border-radius:var(--radius); border:1px solid var(--teal-dark); background:var(--teal-dark); color:var(--white); font:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; }
.fs-btn:disabled, .fs-btn.is-dis{ opacity:.45; cursor:default; }
.fs-btn.danger{ background:var(--white); color:var(--danger-text); border-color:var(--line); }
.fs-btn-ghost{ background:var(--white); color:var(--teal-dark); }
.fs-btn-quiet{ background:var(--white); color:var(--ink); border-color:var(--line); }
.fs-btn-sales{ background:#4B3F8F; border-color:#4B3F8F; }
.fs-btn-coach{ background:#8E2F6F; border-color:#8E2F6F; }
.fs-btn-sm{ height:28px; padding:0 10px; font-size:12.5px; }
.fs-mini{ border:1px solid var(--line); background:var(--white); color:var(--teal-dark); border-radius:var(--radius); padding:2px 8px; font:inherit; font-size:12px; cursor:pointer; }
.fs-linkbtn{ border:0; background:none; padding:2px 4px; font:inherit; font-size:12.5px; color:var(--teal-dark); font-weight:600; cursor:pointer; white-space:nowrap; }
.fs-linkbtn.fs-strong{ text-decoration:underline; }
.fs-unhide{ border:0; background:var(--amber-bg); color:var(--amber-text); border-radius:var(--pill-radius); padding:2px 10px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }

/* ---- the 7-day strip ---- */
.fs-strip{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; }
.fs-day{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:7px 9px; display:flex; flex-direction:column; gap:6px; min-width:0; cursor:pointer; }
.fs-day.cur{ border-color:var(--teal-dark); box-shadow:inset 0 0 0 1px var(--teal-dark); background:var(--teal-pale); }
.fs-dayhead{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; border:0; background:none; padding:0; font:inherit; cursor:pointer; text-align:left; min-width:0; }
.fs-dayhead b{ color:var(--teal-dark); font-size:13.5px; white-space:nowrap; }
.fs-dayhead span{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.fs-daypeople{ display:flex; gap:5px; flex-wrap:wrap; }
.fs-pp{ display:inline-flex; align-items:center; gap:3px; font:inherit; font-size:12px; font-weight:700; border-radius:var(--pill-radius); padding:2px 9px; border:1px solid transparent; white-space:nowrap; line-height:1.5; }
button.fs-pp{ cursor:pointer; }
button.fs-pp:hover{ border-color:currentColor; }
.fs-pp.on{ background:var(--green-bg); color:var(--green-text); }
.fs-pp.off{ background:var(--warn-bg); color:var(--warn-text); }
.fs-pp.fixed{ background:var(--teal-pale); color:var(--teal-dark); }
/* session 313 (QA-8): who works the chosen day, its own row under the strip (never inside a day tile) */
.fs-workrow{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.fs-workrow-l{ font-size:12.5px; font-weight:700; color:var(--teal-dark); }
.fs-workrow .fs-pp{ font-size:12.5px; padding:4px 11px; }
.fs-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- the Resort check line, and the day's tools beside it ---- */
.fs-rcrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fs-rcline{ position:relative; flex:1 1 520px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 12px; border-radius:var(--radius); font-size:13px; min-width:0; }
.fs-rcline.is-warn{ background:var(--amber-bg); color:var(--amber-text); }
.fs-rcline.is-ok{ background:var(--green-bg); color:var(--green-text); }
.fs-rcline.is-quiet{ background:var(--white); color:var(--muted); border:1px solid var(--line); }
.fs-rctext{ font-weight:700; }
.fs-rccounts{ margin-left:auto; }
.fs-rcline .fs-linkbtn{ color:inherit; }
.fs-rcwhich{ position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0; background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.12); padding:10px 12px; display:flex; flex-direction:column; gap:6px; font-size:13px; max-height:40vh; overflow:auto; }
.fs-daytools{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

.fs-plannote{ padding:9px 12px; border-radius:var(--radius); background:var(--teal-pale); color:var(--teal-deep); font-size:13.5px; line-height:1.45; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }


/* ---- the two columns ---- */
.fs-app{ display:flex; flex-direction:column; gap:10px; }
.fs-panels{ display:grid; gap:12px; min-height:0; }
/* Session 282 Part 2: the page grows. The two columns start together; the list panel sticks under the top bar (its
   height is set by fsFit) and scrolls inside itself; the route column is as tall as its stops, never scrolling. */
.fs-m-laptop .fs-panels, .fs-m-wide .fs-panels{ align-items:start; }
.fs-m-laptop .fs-panels > .fs-lp, .fs-m-wide .fs-panels > .fs-lp{ display:flex; flex-direction:column; overflow:hidden; position:sticky; top:calc(var(--hdrH) + var(--bandH) + 10px); }
.fs-m-laptop .fs-panels > .fs-rp, .fs-m-wide .fs-panels > .fs-rp{ display:flex; flex-direction:column; overflow:visible; }
.fs-m-stack .fs-panels{ grid-template-columns:minmax(0, 1fr); }
.fs-m-stack .fs-panels > section{ display:flex; flex-direction:column; }

/* the list panel */
.fs-lp-head{ display:flex; align-items:center; gap:8px 14px; padding:12px 14px 10px; flex-wrap:wrap; }
.fs-segs{ display:flex; gap:2px; background:var(--page-bg); border-radius:var(--radius); padding:3px; flex:none; max-width:100%; overflow-x:auto; }
.fs-seg{ border:0; background:none; font:inherit; font-size:13.5px; font-weight:600; color:var(--ink); border-radius:calc(var(--radius) - 2px); padding:7px 12px; cursor:pointer; white-space:nowrap; }
.fs-seg span{ font-weight:500; color:var(--muted); margin-left:2px; }
.fs-seg.on{ background:var(--teal-dark); color:var(--white); }
.fs-seg.on span{ color:var(--white); opacity:.85; }
.fs-lp-hint{ flex:1 1 280px; margin:0; font-size:12px; color:var(--muted); line-height:1.4; }
.fs-lp-body{ flex:1 1 auto; min-height:0; overflow:auto; border-top:1px solid var(--line-soft); }
.fs-m-stack .fs-lp-body{ max-height:70vh; }
.fs-lp-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 14px; border-top:1px solid var(--line); background:var(--white); }
.fs-nsel{ font-size:13px; color:var(--muted); margin-right:auto; }
.fs-unhide{ text-decoration:underline; font-weight:600; }

/* the lists: every field shown, every name wrapping */
.fs-t{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.fs .fs-t{ table-layout:auto; }
.fs .fs-t td, .fs .fs-t th{ white-space:normal; overflow:visible; text-overflow:clip; max-width:none; text-transform:none; letter-spacing:0; overflow-wrap:anywhere; }
.fs-t th{ position:sticky; top:0; z-index:2; text-align:left; font-size:12px; color:var(--muted); font-weight:700; padding:7px 8px; border-bottom:1px solid var(--line); background:var(--page-bg); vertical-align:bottom; }
.fs-t td{ padding:9px 8px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.fs-t tr.sel td{ background:var(--highlight-row); }
.fs-t tr.added td{ opacity:.55; }
.fs-lt tbody tr[onclick]{ cursor:pointer; }
.fs-lt tbody tr:hover td{ background:var(--page-bg); }
.fs-lt tbody tr.sel:hover td{ background:var(--highlight-row); }
.fs-sortbtn{ border:0; background:none; padding:0; font:inherit; font-size:12px; font-weight:700; color:var(--muted); cursor:pointer; text-align:left; }
.fs-sortbtn:hover, .fs-sortbtn.sorted{ color:var(--teal-dark); }
.fs-thsep{ color:var(--muted); font-weight:400; }
.fs-arrow{ font-size:10px; }
.fs-chk{ width:30px; text-align:center; }
.fs-addcell{ width:70px; text-align:right; }
.fs-onsched{ color:var(--green-text); font-weight:800; font-size:11px; }
.fs-emptycell{ color:var(--muted); text-align:center; padding:18px 14px; font-size:13px; }
.fs-pname{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; }
.fs-ptags{ display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.fs-ptags .fs-flag, .fs-meta .fs-flag{ margin-left:0; }
.fs-ptype{ margin-bottom:4px; }
.fs-meta{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:6px; }
.fs-meta2{ font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.35; }
.fs-meta2 b{ color:var(--ink); font-weight:600; }
.fs-grp{ font-size:12.5px; color:var(--ink); }
.fs-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.fs-line + .fs-line{ margin-top:4px; }
.fs-k{ display:inline-block; min-width:34px; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.fs-celldl{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:6px 14px; margin:8px 0 0; }
.fs-celldl > div{ min-width:0; }
.fs-celldl dt{ font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.fs-celldl dd{ margin:2px 0 0; font-size:12.5px; }
/* column widths: the property takes the room; the rest keep their size */
.fs-lt-cols td.c-prop{ min-width:190px; }
.fs-lt-cols td.c-region{ width:120px; }
.fs-lt-cols td.c-svc{ width:96px; }
.fs-lt-cols td.c-clean, .fs-lt-cols td.c-co{ width:128px; }
.fs-lt-cols td.c-window{ width:156px; }
.fs-lt-cols td.c-deep, .fs-lt-cols td.c-lastqc{ width:92px; }
.fs-lt-cols td.c-nextin{ width:104px; }
.fs-lt-cols td.c-sdate, .fs-lt-cols td.c-cleaner{ width:110px; }
.fs-lt-cols td.c-dist{ width:130px; }
.fs-lt-cols td.c-type{ width:60px; }
.fs-lt-stacked td.c-prop, .fs-lt-stacked td.c-type{ min-width:220px; }
.fs-lt-stacked td.c-window{ width:156px; }
.fs-lt-stacked td.c-lastqc, .fs-lt-stacked td.c-co, .fs-lt-stacked td.c-dist{ width:130px; }
.fs-lt-stacked td.c-nextin{ width:100px; }
.fs-region{ display:inline-block; font-size:11px; padding:1px 7px 1px 9px; border:1px solid var(--line); border-radius:var(--pill-radius); white-space:nowrap; }
.fs-nw{ white-space:nowrap; }
.fs-wc-l{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-size:12.5px; color:var(--ink); }
.fs-wc-l > span{ min-width:0; }
.fs-wc-l b{ color:var(--teal-dark); white-space:nowrap; }
.fs-wc.t-tight .fs-wc-l b{ color:var(--danger-text); } .fs-wc.t-mid .fs-wc-l b{ color:var(--amber-text); }
.fs-lt .fs-win{ max-width:none; }
.fs-x, .fs-hide{ border:0; background:none; color:var(--muted); font-size:15px; cursor:pointer; padding:2px 6px; }
.fs-x:hover, .fs-hide:hover{ color:var(--danger-text); }

/* ---- the route column ---- */
.fs-rp-head{ display:flex; align-items:center; gap:8px; padding:12px 12px 0; flex-wrap:wrap; }
.fs-rtabs{ display:flex; gap:2px; background:var(--page-bg); border-radius:var(--radius); padding:3px; min-width:0; flex-wrap:wrap; }
.fs-rtab{ border:0; background:none; font:inherit; font-size:13.5px; font-weight:700; color:var(--ink); border-radius:calc(var(--radius) - 2px); padding:7px 12px; cursor:pointer; white-space:nowrap; }
.fs-rtab span{ font-weight:500; color:var(--muted); font-size:12px; margin-left:2px; }
.fs-rtab.on{ background:var(--teal-dark); color:var(--white); }
.fs-rtab.on span{ color:var(--white); opacity:.85; }
.fs-offtag{ font-style:normal; font-size:11px; font-weight:800; border-radius:var(--pill-radius); padding:1px 7px; background:var(--warn-bg); color:var(--warn-text); }
.fs-rtab.on .fs-offtag{ background:var(--white); }
.fs-rp-sum{ padding:8px 12px 0; font-size:13px; font-weight:700; color:var(--teal-dark); }
.fs-rp-grid{ display:grid; grid-template-columns:minmax(0, 1fr) 118px; gap:8px; padding:8px 12px 0; }
.fs-fld{ display:flex; flex-direction:column; gap:2px; margin:0; min-width:0; }
.fs-fld > span{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.fs-fld select, .fs-fld input{ width:100%; height:32px; }
.fs-fld-span{ grid-column:1 / -1; }
.fs-gen, .fs-mapsbox .fs-maps{ justify-content:center; }
.fs-gen{ width:100%; }
.fs-mapsbox{ display:flex; gap:6px; min-width:0; }
.fs-mapsbox .fs-maps{ flex:1 1 0; padding:0 6px; }
.fs-rp-more{ display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; padding:8px 12px 0; }
.fs-violation{ background:var(--warn-bg); color:var(--warn-text); padding:6px 10px; border-radius:var(--radius); margin:8px 12px 0; font-size:12.5px; }
.fs-allclear{ background:var(--green-bg); color:var(--green-text); padding:6px 10px; border-radius:var(--radius); margin:8px 12px 0; font-size:12.5px; }
.fs-rp > .fs-note{ margin:8px 12px 0; }
.fs-rview{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px 0; }
.fs-segs-sm{ flex:1 1 auto; }
.fs-segs-sm .fs-seg{ flex:1 1 0; padding:6px 12px; }
.fs-rp-body{ display:flex; flex-direction:column; padding:8px 12px 12px; }
.fs-stoplist{ overflow:visible; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); }
.fs-m-stack .fs-stoplist{ max-height:none; }
.fs-empty{ color:var(--muted); font-size:13px; padding:12px; }

/* one stop: the time and type, then the full name (wrapping), who and what, and the flags */
.fs-sc{ display:grid; grid-template-columns:26px minmax(0, 1fr) 22px; gap:4px 10px; align-items:start; padding:10px; border-bottom:1px solid var(--line-soft); cursor:pointer; position:relative; }
.fs-sc:last-child{ border-bottom:0; }
.fs-sc:hover{ background:var(--page-bg); }
.fs-sc.open{ background:var(--page-bg); cursor:default; }
.fs-sc.sel{ background:var(--highlight-row); }
.fs-sc.is-late{ box-shadow:inset 3px 0 0 var(--danger-text); }
.fs-sc-n{ width:24px; height:24px; border-radius:50%; background:var(--teal-dark); color:var(--white); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:grab; }
.fs-sc.t-linen .fs-sc-n{ background:#E8A21A; } .fs-sc.t-sales .fs-sc-n{ background:#4B3F8F; } .fs-sc.t-coaching .fs-sc-n{ background:#8E2F6F; } .fs-sc.t-assigned .fs-sc-n{ background:#1F5C86; }
.fs-sc-m{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fs-sc-t{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fs-sc-time{ font-weight:700; font-size:13px; color:var(--ink); white-space:nowrap; }
.fs-chip{ display:inline-block; width:max-content; font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:6px; background:var(--teal-pale); color:var(--teal-dark); }
.fs-chip.t-linen{ background:#EEE8FA; color:#5B3FA0; } .fs-chip.t-sales{ background:#FCF1C9; color:#7A5312; } .fs-chip.t-coaching{ background:#E4F3E7; color:#2E6B3C; } .fs-chip.t-assigned{ background:#E3EDF5; color:#1F5C86; }
.fs-sc-name{ font-size:13.5px; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; }
.fs-sc-sub{ font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.fs-sc-flags{ display:flex; gap:4px; flex-wrap:wrap; margin-top:2px; }
.fs-sc-flags .fs-flag{ margin-left:0; white-space:normal; }
.fs-sc-a{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.fs-sc-a .fs-x{ padding:0 4px; }
.fs-sc-more{ grid-column:2 / -1; display:flex; flex-direction:column; gap:8px; padding-top:6px; cursor:default; }
.fs-sc-ctl{ display:flex; gap:8px 12px; flex-wrap:wrap; align-items:center; }
.fs-movelbl{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin:0; }
.fs-sc.fs-dragging{ opacity:.4; }
.fs-sc.fs-dropline{ box-shadow:inset 0 2px 0 var(--teal-dark); }
.fs-cb{ margin:0 4px; }
.fs-dl{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:6px 14px; margin:4px 0 2px; }
.fs-dl > div{ min-width:0; }
.fs-dl dt{ font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.fs-dl dd{ margin:2px 0 0; font-size:12.5px; }
.fs-timectl{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; }
.fs-timectl label{ display:inline; margin:0; }
.fs-timectl.is-pinned{ background:var(--yellow); border-radius:var(--radius); padding:4px 6px; }
.fs-pinlock{ font-weight:800; color:var(--yellow-ink); }
.fs input.fs-mins{ width:56px; height:28px; border:1px solid var(--input-border); border-radius:var(--input-radius); padding:0 6px; font:inherit; font-size:13px; }
.fs-pinbtn, .fs-unpin{ border:1px dashed var(--line); background:none; border-radius:var(--radius); font:inherit; font-size:12px; color:var(--muted); cursor:pointer; padding:2px 8px; }
.fs-move{ height:30px; }
.fs-flag{ display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:var(--pill-radius); background:var(--gray-bg); color:var(--ink); margin-left:4px; white-space:nowrap; }
.fs-flag.warn{ background:var(--amber-bg); color:var(--amber-text); border:0; border-left:0; box-shadow:none; margin:0; padding:1px 7px; border-radius:var(--pill-radius); display:inline-block; font-size:11px; line-height:1.5; } /* shell.css's global .warn box would otherwise apply */
.fs-flag.late, .fs-flag.todo{ background:var(--warn-bg); color:var(--warn-text); }
.fs-flag.ok, .fs-flag.inrc{ background:var(--green-bg); color:var(--green-text); }
.fs-flag.new{ background:#FDE6D4; color:#9A4A0E; }
.fs-flag.pin{ background:var(--yellow); color:var(--yellow-ink); }
.fs-flag.resort{ background:#E3EDF5; color:#1F5C86; }
.fs-flag.deep{ background:#FFE8D6; color:#9A4A0E; }
.fs-flag.dep{ background:var(--teal-pale); color:var(--teal-dark); }
.fs-flag.t-qc{ background:var(--teal-pale); color:var(--teal-dark); }
.fs-flag.t-linen{ background:#FCEFD3; color:#7A5312; }
.fs-flag.t-sales{ background:#E8E5F4; color:#4B3F8F; }
.fs-flag.t-coaching{ background:#F4E3EE; color:#8E2F6F; }
.fs-flag.t-assigned{ background:#E3EDF5; color:#1F5C86; }
/* windows */
.fs-win{ min-width:0; max-width:260px; }
.fs-win-lbl{ font-size:12px; color:var(--ink); }
.fs-win-day{ font-size:11px; color:var(--muted); }
.fs-win-track{ height:6px; border-radius:3px; background:var(--gray-bg); margin-top:3px; overflow:hidden; }
.fs-win-fill{ height:100%; border-radius:3px; position:relative; background:var(--teal-dark); }
.fs-win.t-tight .fs-win-fill{ background:var(--danger-text); } .fs-win.t-mid .fs-win-fill{ background:var(--orange); } .fs-win.t-easy .fs-win-fill{ background:var(--green-text); }
.fs-win.is-open .fs-win-fill{ opacity:.55; }
.fs-win-used{ position:absolute; left:0; top:0; bottom:0; background:rgba(0,0,0,.25); }
.fs-win-note{ font-size:11px; color:var(--muted); }

/* the itinerary table (Table), over the page */
.fs-scroll{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
.fs .fs-itin{ min-width:1240px; }
.fs-itin tr[draggable=true]{ cursor:grab; }
.fs-itin tr.fs-late td{ background:var(--warn-soft-bg); }
.fs-itin tr.fs-dragging td{ opacity:.4; }
.fs-itin tr.fs-dropline td{ box-shadow:inset 0 2px 0 var(--teal-dark); }
.fs-drag{ color:var(--muted); margin-right:4px; }
.fs-picker.fs-itinpick{ width:min(1360px, 100%); max-height:88vh; }
.fs-itinhead{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fs-itinhead .fs-btn{ margin-left:auto; }
.fs-itinwrap{ min-height:0; max-height:70vh; overflow:auto; border:1px solid var(--line); border-radius:var(--radius); }

/* the map (Map) */
.fs-mapbox{ position:relative; display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; }
.fs-map{ height:520px; background:var(--page-bg); border-radius:var(--radius); }   /* session 282: a sensible fixed size, never squeezed */
.fs-m-stack .fs-map{ height:360px; flex:none; }
.fs-mapempty{ height:100%; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; padding:20px; text-align:center; }
.fs-sketch{ width:100%; height:auto; display:block; }
.fs-maplegend{ position:absolute; left:10px; bottom:26px; display:flex; gap:12px; flex-wrap:wrap; background:var(--white); border-radius:var(--pill-radius); padding:4px 12px; font-size:12px; box-shadow:0 1px 4px rgba(0,0,0,.15); pointer-events:none; }
.fs-lg-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.fs-roadnote{ padding:4px 2px 0; min-height:16px; }
/* + Add route */
.fs-addmenu{ position:relative; }
.fs-addmenu > summary{ list-style:none; }
.fs-addmenu > summary::-webkit-details-marker{ display:none; }
.fs-menu{ position:absolute; z-index:40; top:calc(100% + 4px); left:0; min-width:230px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.14); padding:6px; display:flex; flex-direction:column; gap:2px; }
.fs-menu button{ text-align:left; border:0; background:none; border-radius:calc(var(--radius) - 2px); padding:8px 10px; font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:1px; }
.fs-menu button:hover{ background:var(--page-bg); }
.fs-menu button span{ font-size:12px; color:var(--muted); }
.fs-rcrow .fs-menu, .fs-rp .fs-menu{ left:auto; right:0; }
/* pickers: Sales walkthrough and Coaching visit open over the page */
.fs-pickhost:empty{ display:none; }
.fs-pickhost{ position:fixed; inset:0; z-index:200; background:rgba(16,32,36,.38); display:flex; align-items:center; justify-content:center; padding:16px; }
.fs-picker{ width:min(600px, 100%); max-height:86vh; overflow:auto; border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s4); display:flex; flex-direction:column; gap:8px; background:var(--white); box-shadow:0 18px 48px rgba(0,0,0,.25); }
.fs-picker select{ max-width:100%; }
.fs-pickertitle{ font-weight:700; color:var(--teal-dark); font-size:16px; }
.fs-pickrow{ display:flex; gap:var(--s3); flex-wrap:wrap; }
.fs-pickrow > span{ display:flex; flex-direction:column; gap:4px; }
.fs-pickbtns{ display:flex; gap:8px; justify-content:flex-end; }
.fs-coachjobs{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow:auto; }
.fs-coachday{ font-weight:700; font-size:12px; color:var(--muted); margin-top:4px; }
.fs-coachjob{ text-align:left; border:1px solid var(--line); background:var(--white); border-radius:var(--radius); padding:8px; font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.fs-coachjob span{ font-size:12px; color:var(--muted); }
.fs-coachjob.is-added{ opacity:.6; cursor:default; }

/* the Dashboard's Field Support card */
.fs-support{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:10px 14px; color:var(--ink); }
.fs-supporthead{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.fs-supporthead a{ margin-left:auto; color:var(--teal-dark); font-weight:600; font-size:13px; }
.fs-supportrow{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:6px; }
.fs-supportp{ display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink); font-size:13px; }
.fs-dot{ width:9px; height:9px; border-radius:50%; background:var(--green-text); }
.fs-supportp.off .fs-dot{ background:var(--danger-text); }

/* One screen from 1180 px: every Scheduling view keeps the same frame (no bottom padding, a shorter top), so the bar
   sits at the same place on each; the Planner's panels are the only thing that scrolls. A view that scrolls (the QC
   list) keeps its bottom padding. */
@media (min-width: 1180px){
  #page.fs-page{ padding-bottom:0; padding-top:96px; }
  #page.fs-page.fs-page-scroll{ padding-bottom:40px; }
}
/* session 282: the gear (Settings > Field routes), a fixed size like the rest of the bar */
.fs-bar .fs-gear{ box-sizing:border-box; width:36px; height:36px; padding:0; justify-content:center; font-size:17px; border-width:2px; }

/* under 1180 px: stacked, the page scrolls; at a phone nothing goes past the screen edge */
@media (max-width: 760px){
  .fs-bar{ height:auto; flex-wrap:wrap; gap:8px 10px; }
  .fs-bar .fs-h1{ flex:1 1 auto; width:auto; font-size:22px; line-height:1.3; }
  .fs-barright{ margin-left:0; }
  .fs-subtabs{ order:3; flex:1 1 100%; }
  .fs-subtab-assignments, .fs-subtab-field{ flex:1 1 0; width:auto; min-width:0; font-size:13px; white-space:normal; text-align:center; line-height:1.2; padding:0 6px; }
  .fs-strip{ display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .fs-day{ flex:0 0 132px; }
  .fs-rcline{ flex-basis:100%; }
  .fs-rccounts{ margin-left:0; }
  .fs-lp-foot select{ max-width:42%; }
  .fs-lp-head .fs-segs{ flex-wrap:wrap; }
  .fs-sc-more{ grid-column:1 / -1; }
}

/* ---- session 282: Done, the start line, past days, Route history, the + Route person picker ---- */
.fs-sc-done{ grid-column:2 / -1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; }
.fs-done{ display:inline-flex; align-items:center; gap:5px; margin:0; padding:2px 10px 2px 6px; border:1px solid var(--line); border-radius:var(--pill-radius); font-weight:700; color:var(--ink); cursor:pointer; background:var(--white); }
.fs-done input{ margin:0; }
.fs-done.on{ background:var(--green-bg); color:var(--green-text); border-color:transparent; }
.fs-notelink{ color:var(--teal-dark); font-weight:600; }
.fs-startline{ padding:8px 10px; font-size:12.5px; color:var(--teal-deep); background:var(--teal-pale); border-bottom:1px solid var(--line-soft); }
.fs-pastnote{ padding:9px 12px; border-radius:var(--radius); background:var(--amber-bg); color:var(--amber-text); font-size:13.5px; }
.fs-pastnote a{ color:inherit; font-weight:700; }
.fs-pasth{ font-size:15px; color:var(--teal-dark); }
.fs-pasth2{ font-weight:700; color:var(--teal-dark); font-size:13px; padding:14px 8px 6px; }
.fs-num{ text-align:right; }
.fs-t td.fs-num, .fs-t th.fs-num{ text-align:right; }
.fs-histnote{ margin:0 0 10px; }
.fs-histcard{ overflow-x:auto; }
.fs-histt td{ vertical-align:top; }
.fs-hist-day{ min-width:120px; }
.fs-hist-day a{ font-weight:700; color:var(--teal-dark); }
.fs-histt tr.fs-hist-first td{ border-top:2px solid var(--line); }
.fs-histmore{ margin:12px 0; }
.fs-menurow{ display:flex; flex-direction:column; gap:4px; padding:6px 10px 8px; border-bottom:1px solid var(--line-soft); }
.fs-menurow select{ width:100%; }
.fs-menurow .fs-btn{ align-self:flex-start; }
.fs-menulink{ display:block; padding:8px 10px; font-size:12px; color:var(--teal-dark); }
/* Settings > Field routes */
.fr-tbl td{ vertical-align:middle; }
.fr-pos{ width:30px; font-weight:800; color:var(--teal-dark); }
.fr-start{ max-width:360px; width:100%; height:32px; border:1px solid var(--input-border); border-radius:var(--input-radius); padding:0 8px; font:inherit; font-size:13px; }
.fr-act{ white-space:nowrap; text-align:right; }
.fr-rm{ color:var(--danger-text); }
.fr-add{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 6px; }
.fr-add select{ height:34px; max-width:100%; border:1px solid var(--input-border); border-radius:var(--input-radius); padding:0 8px; font:inherit; }
/* field visits (Coaching page, Staff record, prospect) */
.fv-list{ display:flex; flex-direction:column; gap:10px; }
.fv-card{ border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; background:var(--white); display:flex; flex-direction:column; gap:6px; }
.fv-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fv-when{ color:var(--ink); font-size:14px; }
.fv-st.plan{ background:var(--teal-pale); color:var(--teal-dark); }
.fv-meta{ display:flex; gap:6px 14px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.fv-meta a{ color:var(--teal-dark); font-weight:600; }
.fv-meta b{ color:var(--ink); }
.fv-notes{ list-style:none; margin:2px 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.fv-notes li{ background:var(--page-bg); border-radius:var(--radius); padding:6px 9px; }
.fv-nbody{ font-size:13px; color:var(--ink); white-space:normal; overflow-wrap:anywhere; }
.fv-add{ display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; }
.fv-add textarea{ flex:1 1 260px; min-height:38px; border:1px solid var(--input-border); border-radius:var(--input-radius); padding:6px 8px; font:inherit; font-size:13px; resize:vertical; }
.fv-btns{ display:flex; gap:6px; flex-wrap:wrap; }
.fv-empty{ color:var(--muted); font-size:13px; padding:10px 0; }
.fv-filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin:0 0 12px; }
.fv-filters label{ display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:700; color:var(--muted); margin:0; }
.fv-filters select, .fv-filters input{ height:34px; border:1px solid var(--input-border); border-radius:var(--input-radius); padding:0 8px; font:inherit; font-size:13px; background:var(--white); color:var(--ink); }
/* Session 285: a coaching visit's summary box, labelled, with the credit rule under it */
.fv-sum label{ flex-basis:100%; font-size:13px; font-weight:600; }
.fv-sum .fs-note{ flex-basis:100%; }
.fv-sumh{ font-size:12px; font-weight:600; margin-top:6px; color:var(--ink-2, #4d545a); }

/* ---- Session 295: every box the schedule opens is a sheet (fsSheet). Daniel, 5 Oct 2026: "when they click to ADD STOP,
   the box opens off the screen on mobile device". On a laptop the box stays in the middle of the screen; on a phone it
   rises from the bottom, full width, inside the screen on every side, its title and Close pinned at its top and its
   buttons at its bottom, scrolling as one page (nothing scrolls inside it), above the keyboard (fsSizeHosts sets the
   host to what the phone shows), and the page behind it does not scroll (html.fs-locked). ---- */
html.fs-locked, html.fs-locked body{ overflow:hidden; }
.fs-picker{ overscroll-behavior:contain; }
.fs-sheethead{ display:flex; align-items:center; gap:10px; }
.fs-sheethead .fs-pickertitle{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.fs-close{ flex:none; border:1px solid var(--line); background:var(--white); color:var(--teal-dark); border-radius:var(--pill-radius); padding:6px 12px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.fs-close:hover{ background:var(--page-bg); }
.fs-sheetbody{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.fs-picker select.fs-wide{ width:100%; }
.fs-picker textarea{ width:100%; box-sizing:border-box; min-height:64px; border:1px solid var(--input-border); border-radius:var(--input-radius); padding:8px; background:var(--white); color:var(--ink); font:inherit; font-size:13px; resize:vertical; }
.fs-types{ display:flex; flex-direction:column; gap:8px; }
.fs-typebtn{ text-align:left; border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:var(--radius); padding:12px 14px; min-height:52px; font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.fs-typebtn:hover{ background:var(--page-bg); }
.fs-typebtn span{ font-size:13px; color:var(--muted); }
.fs-sheet .fs-typebtn-m{ text-align:left; border:0; background:none; padding:8px 0; font:inherit; color:var(--ink); cursor:pointer; display:flex; flex-direction:column; gap:1px; }
.fs-sheet .fs-typebtn-m span{ font-size:12px; color:var(--muted); }
.fs-coachjob b{ overflow-wrap:anywhere; }
.fs-coachjob.on{ border-color:var(--teal-dark); background:var(--teal-pale); box-shadow:inset 0 0 0 1px var(--teal-dark); }
.fs-coachjob em{ font-size:12px; color:var(--muted); }
.fv-reason{ font-size:13px; color:var(--ink); overflow-wrap:anywhere; }
@media (max-width: 760px){
  .fs-pickhost{ align-items:flex-end; justify-content:stretch; padding:0; }
  .fs-pickhost > .fs-picker, .fs-pickhost > .fs-picker.fs-itinpick{ width:100%; max-width:100%; max-height:calc(100% - 16px); box-sizing:border-box; padding:0 16px; gap:10px;
    border-radius:16px 16px 0 0; border-bottom:0; scroll-padding-top:76px; scroll-padding-bottom:84px; }
  .fs-sheethead, .fs-itinhead{ position:sticky; top:0; z-index:2; background:var(--white); padding:14px 0 10px; border-bottom:1px solid var(--line-soft); }
  .fs-sheethead .fs-pickertitle{ font-size:17px; }
  .fs-close{ min-height:40px; padding:0 14px; }
  .fs-sheetbody:last-child{ padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .fs-sheetfoot{ position:sticky; bottom:0; z-index:2; background:var(--white); padding:10px 0 calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line-soft); }
  .fs-sheetfoot .fs-btn{ flex:1 1 0; min-height:44px; justify-content:center; }
  .fs-coachjobs{ max-height:none; overflow:visible; }
  .fs-itinwrap{ max-height:none; }
  .fs-pickrow{ flex-direction:column; }
  .fs-pickrow > span{ width:100%; }
  /* 16 px: a phone zooms the page when a smaller box is tapped, which pushed the box off the screen */
  .fs-picker input, .fs-picker select, .fs-picker textarea{ font-size:16px; width:100%; min-height:44px; height:auto; box-sizing:border-box; }
  .fs-picker .fs-menurow .fs-btn{ min-height:44px; }
}

/* ================================================================ session 353 (briefs/session-353-brief.md; the approved mockups Main, Plan) ================================================================
   The Day view (the default) and Plan, a switch on the title bar. The mockups' style attributes, as classes on the platform's tokens. */
.fs-modesw{ display:inline-flex; background:var(--pa-grey); border-radius:999px; padding:4px; flex:none; }
.fs-modesw[hidden]{ display:none; }
.fs-modebtn{ border:0; cursor:pointer; padding:7px 16px; border-radius:999px; font:600 13.5px/1.2 inherit; font-family:inherit; background:transparent; color:var(--pa-text); }
.fs-modebtn.on{ background:#fff; color:var(--pa-teal-900); font-weight:700; box-shadow:0 4px 14px rgba(14,54,59,.12); }
.fs-modebtn:hover{ color:var(--pa-teal-900); text-decoration:underline; }
.fs-modebtn:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px; }

/* status pills shared by the Day view (and the words the Dashboard card uses) */
.fs-stpill{ font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap; flex-shrink:0; }
.fs-stpill.sp-done{ background:var(--pa-green-bg); color:var(--pa-green-text); }
.fs-stpill.sp-late{ background:var(--pa-amber-bg); color:var(--pa-amber-text); }
.fs-stpill.sp-due{ background:#FFE8D6; color:#9A4A0E; }
.fs-stpill.sp-up, .fs-stpill.sp-skip{ background:var(--pa-grey); color:var(--pa-text); }
.fs-stpill.sp-here, .fs-stpill.sp-herex{ background:var(--pa-teal-100); color:var(--pa-teal-900); }
.fs-pstate{ font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.fs-ps-work{ background:var(--pa-teal-100); color:var(--pa-teal-900); }
.fs-ps-done{ background:var(--pa-green-bg); color:var(--pa-green-text); }
.fs-ps-notyet, .fs-ps-none{ background:var(--pa-grey); color:var(--pa-text); }

/* ---- the Day view ---- */
.fs-dv{ display:flex; flex-direction:column; gap:16px; }
.fdv-problems{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.fdv-pill{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; }
.fdv-pill.p-warn{ background:var(--pa-amber-bg); color:var(--pa-amber-text); }
.fdv-pill.p-ok{ background:var(--pa-green-bg); color:var(--pa-green-text); }
.fdv-pill.p-bad{ background:#FFE8D6; color:#9A4A0E; }
.fdv-pill a{ color:inherit; text-decoration:underline; font-weight:700; }
.fdv-pill .fs-linkbtn{ color:inherit; }
.fdv-read{ margin-left:auto; font-size:11.5px; color:var(--pa-muted); }
.fdv-tools{ display:flex; gap:6px; }
.fdv-which{ margin-top:-6px; }
.fdv-cols{ display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; }
.fdv-mapcard{ flex:999 1 640px; min-width:0; background:#fff; border-radius:var(--pa-radius-hero); box-shadow:var(--pa-shadow-card); overflow:hidden; }
.fdv-cards{ flex:1 1 400px; min-width:0; display:flex; flex-direction:column; gap:20px; }
.fdv-mhead{ display:flex; align-items:center; gap:12px; padding:16px 20px; flex-wrap:wrap; }
.fdv-mic{ width:40px; height:40px; border-radius:10px; background:var(--pa-teal-900); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.fdv-mt{ font-weight:700; font-size:17px; color:var(--pa-ink); }
.fdv-ms{ font-size:12.5px; color:var(--pa-muted); }
.fdv-whos{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.fdv-who{ border:0; cursor:pointer; padding:8px 14px; border-radius:999px; font:600 13px/1.2 inherit; font-family:inherit; display:inline-flex; align-items:center; background:var(--pa-grey); color:var(--pa-text); }
.fdv-who i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:7px; }
.fdv-who.on{ background:var(--pa-teal-900); color:#fff; }
.fdv-who:hover{ text-decoration:underline; }
.fdv-who:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px; }
.fdv-mapwrap{ position:relative; background:#EAF0F1; }
.fdv-map{ height:620px; }
.fdv-legend{ position:absolute; left:16px; bottom:16px; background:#fff; border-radius:12px; box-shadow:0 4px 14px rgba(14,54,59,.12); padding:10px 14px; display:flex; gap:8px 14px; flex-wrap:wrap; font-size:12px; color:var(--pa-text); max-width:calc(100% - 200px); }
.fdv-legend span{ display:inline-flex; align-items:center; gap:6px; }
.fdv-legend i{ display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--pa-teal-600); }
.fdv-legend i.lg-sel{ box-shadow:0 0 0 3px var(--pa-yellow); }
.fdv-legend i.lg-due{ width:10px; height:10px; background:#fff; border:3px solid #FF8A33; }
.fdv-legend i.lg-linen{ border-radius:3px; background:#7A5CC7; }
.fdv-legend i.lg-straight{ width:18px; height:0; border-radius:0; background:none; border-top:3px dashed var(--pa-teal-600); }
.fdv-gmaps{ position:absolute; right:16px; bottom:16px; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.fdv-gmaps a{ background:#fff; border-radius:10px; box-shadow:0 4px 14px rgba(14,54,59,.12); padding:10px 14px; font-size:13px; font-weight:700; color:var(--pa-teal-600); text-decoration:none; }
.fdv-gmaps a:hover{ text-decoration:underline; color:var(--pa-teal-900); }
.fdv-roadnote{ padding:8px 20px 12px; }
.fdv-card{ background:#fff; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card); overflow:hidden; }
.fdv-ch{ padding:16px 18px 12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fdv-sw{ width:12px; height:12px; border-radius:3px; background:var(--pc); }
.fdv-cn{ font-weight:700; font-size:17px; color:var(--pa-ink); }
.fdv-big{ margin-left:auto; font-size:30px; font-weight:800; letter-spacing:-.035em; color:var(--pa-ink); }
.fdv-big small{ font-size:16px; color:var(--pa-muted); font-weight:700; }
.fdv-chips{ display:flex; gap:8px; padding:0 18px 12px; flex-wrap:wrap; font-size:12.5px; }
.fdv-chips span{ background:var(--pa-grey); padding:5px 10px; border-radius:999px; font-weight:600; color:var(--pa-text); }
.fdv-chips .fdv-chipwarn{ background:var(--pa-amber-bg); color:var(--pa-amber-text); }
.fdv-rows{ border-top:1px solid var(--pa-line); }
.fdv-row{ width:100%; display:flex; align-items:center; gap:12px; padding:10px 18px; border:0; border-bottom:1px solid var(--pa-line); background:#fff; color:var(--pa-ink); text-align:left; font:inherit; cursor:pointer; }
.fdv-row:last-child{ border-bottom:0; }
.fdv-row:hover{ background:var(--pa-page); }
.fdv-row:hover .fdv-nm b{ text-decoration:underline; }
.fdv-row:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:-3px; }
.fdv-row.sel{ background:var(--pa-amber-icon); }
.fdv-n{ width:26px; height:26px; border-radius:50%; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-sizing:border-box; background:#fff; color:var(--pc); border:2px solid var(--pc); }
.fdv-row.k-linen .fdv-n{ border-radius:7px; }
.fdv-row.st-done .fdv-n, .fdv-row.st-late .fdv-n, .fdv-row.st-here .fdv-n, .fdv-row.st-skip .fdv-n{ background:var(--pc); color:#fff; border-color:var(--pc); }
.fdv-row.st-due .fdv-n{ background:#fff; border:3px solid #FF8A33; color:#9A4A0E; }
.fdv-row.sel .fdv-n{ box-shadow:0 0 0 3px var(--pa-yellow); }
.fdv-t{ width:56px; flex-shrink:0; font-size:13px; font-weight:700; }
.fdv-nm{ flex:1 1 auto; min-width:0; }
.fdv-nm b{ display:block; font-size:13.5px; font-weight:600; overflow-wrap:anywhere; }
.fdv-nm span{ display:block; font-size:12px; color:var(--pa-muted); }
.fdv-st{ display:flex; flex-direction:column; gap:4px; align-items:flex-end; flex-shrink:0; }
.fdv-empty{ padding:16px 18px; color:var(--pa-text); font-size:13.5px; }
@media (max-width:1079px){ .fdv-cols{ flex-direction:column; align-items:stretch; } .fdv-mapcard, .fdv-cards{ flex:none; width:100%; } }
@media (max-width:760px){
  .fs-barright{ flex-wrap:wrap; row-gap:8px; min-width:0; max-width:100%; }   /* the Day view / Plan switch, the date, Undo and the gear wrap on a phone */
  .fdv-map{ height:320px; }
  .fdv-mhead{ padding:14px 16px; }
  .fdv-whos{ margin-left:0; }
  .fdv-legend{ position:static; box-shadow:none; border-radius:0; max-width:none; border-top:1px solid var(--pa-line); }
  .fdv-gmaps{ position:static; flex-direction:row; flex-wrap:wrap; padding:8px 16px 0; align-items:flex-start; }
  .fdv-gmaps a{ box-shadow:none; border:1px solid var(--pa-input-line); }
  .fdv-row{ padding:10px 14px; gap:10px; }
  .fdv-t{ width:50px; }
  .fdv-read{ margin-left:0; flex-basis:100%; }
}

/* ---- Plan ---- */
.fs-plan{ display:flex; flex-direction:column; gap:12px; }
.fsp-bar{ background:#fff; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card); padding:14px 20px; display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.fsp-bl{ font-size:15px; font-weight:700; color:var(--pa-ink); }
.fsp-people{ display:flex; gap:6px; flex-wrap:wrap; }
.fsp-pbtn{ border:0; cursor:pointer; padding:9px 16px; border-radius:999px; font:600 13.5px/1.2 inherit; font-family:inherit; background:var(--pa-grey); color:var(--pa-text); }
.fsp-pbtn.on{ background:var(--pa-teal-900); color:#fff; font-weight:700; }
.fsp-pbtn:hover{ text-decoration:underline; }
.fsp-pbtn:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px; }
.fsp-pbtn .fsp-pn{ font-size:12px; opacity:.8; }
.fsp-pbtn.is-off{ box-shadow:inset 0 0 0 2px #FF8A33; }
.fsp-day{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--pa-input-line); border-radius:10px; padding:8px 12px; font:600 14px/1.2 inherit; font-family:inherit; background:#fff; color:var(--pa-ink); cursor:pointer; }
.fsp-day:hover{ border-color:var(--pa-teal-600); }
.fsp-start{ font-size:13.5px; color:var(--pa-text); }
.fsp-close{ margin-left:auto; font-size:12.5px; color:var(--pa-muted); }
.fsp-close a{ color:var(--pa-teal-600); text-decoration:underline; }
.fsp-cols{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.fsp-pool{ flex:1 1 300px; min-width:0; }
.fsp-mapcol{ flex:999 1 440px; min-width:0; background:#fff; border-radius:var(--pa-radius-hero); box-shadow:var(--pa-shadow-card); overflow:hidden; }
.fsp-route{ flex:1 1 320px; min-width:0; }
.fsp-tablemode .fsp-pool{ flex:1 1 100%; }
.fsp-tablemode .fs-lp-body{ max-height:70vh; overflow:auto; }
.fsp-card, .fsp-route.fs-card{ background:#fff; border:0; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card); overflow:hidden; }
.fsp-route.fs-card{ overflow:visible; }   /* + Stop's menu opens over the page */
.fsp-tablemode .fsp-poolhead{ background:#fff; border-radius:var(--pa-radius-card) var(--pa-radius-card) 0 0; box-shadow:var(--pa-shadow-card); }
.fsp-poolhead{ padding:16px 18px 12px; }
.fsp-pt{ font-weight:700; font-size:17px; color:var(--pa-ink); }
.fsp-ph{ font-size:12.5px; color:var(--pa-muted); margin-top:2px; }
.fsp-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.fsp-tab{ border:0; cursor:pointer; padding:6px 12px; border-radius:999px; font:600 12.5px/1.2 inherit; font-family:inherit; background:var(--pa-grey); color:var(--pa-text); }
.fsp-tab.t-near{ background:var(--pa-teal-100); color:var(--pa-teal-900); }
.fsp-tab.on{ background:var(--pa-teal-900); color:#fff; }
.fsp-tab:hover{ text-decoration:underline; }
.fsp-tab:focus-visible, .fsp-tablesw:focus-visible, .fsp-add:focus-visible, .fsp-nearadd:focus-visible, .fsp-day:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px; }
.fsp-tablesw{ margin-left:auto; border:1px solid var(--pa-input-line); background:#fff; cursor:pointer; border-radius:999px; padding:4px 10px 4px 6px; font:600 12.5px/1.2 inherit; font-family:inherit; color:var(--pa-text); display:inline-flex; align-items:center; gap:6px; }
.fsp-tablesw:hover{ border-color:var(--pa-teal-600); }
.fsp-swt{ width:28px; height:16px; border-radius:999px; background:var(--pa-input-line); position:relative; display:inline-block; }
.fsp-swt i{ position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; }
.fsp-tablesw.on .fsp-swt{ background:var(--pa-teal-600); } .fsp-tablesw.on .fsp-swt i{ left:14px; }
.fsp-list{ border-top:1px solid var(--pa-line); max-height:900px; overflow:auto; }
.fsp-cand{ padding:12px 18px; border-bottom:1px solid var(--pa-line); display:flex; gap:12px; align-items:flex-start; }
.fsp-cand.is-near{ background:#F3F9F9; }
.fsp-cm{ flex:1 1 auto; min-width:0; }
.fsp-cn{ font-size:14px; font-weight:700; color:var(--pa-ink); overflow-wrap:anywhere; }
.fsp-cs{ font-size:12.5px; color:var(--pa-muted); margin-top:2px; }
.fsp-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.fsp-kind{ font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; flex-shrink:0; }
.fsp-kind.k-qc{ background:var(--pa-amber-bg); color:var(--pa-amber-text); }
.fsp-kind.k-ln{ background:var(--pa-green-bg); color:var(--pa-green-text); }
.fsp-nearchip{ font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--pa-teal-600); color:#fff; }
.fsp-why{ font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:999px; }
.fsp-why.w-urgent{ background:#FFE8D6; color:#9A4A0E; }
.fsp-why.w-info{ background:var(--pa-amber-bg); color:var(--pa-amber-text); }
.fsp-why.w-deep{ background:#ECE6F7; color:#4B2E83; }
.fsp-why.w-calm{ background:var(--pa-grey); color:var(--pa-text); }
.fsp-acts{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.fsp-add{ border:0; cursor:pointer; padding:8px 14px; border-radius:10px; background:var(--pa-teal-100); color:var(--pa-teal-900); font:700 13px/1.2 inherit; font-family:inherit; }
.fsp-add:hover{ background:var(--pa-teal-600); color:#fff; }
.fsp-empty, .fsp-more{ padding:14px 18px; font-size:13.5px; color:var(--pa-text); }
.fsp-more{ font-size:12.5px; color:var(--pa-muted); }
.fsp-nums{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-bottom:1px solid var(--pa-line); }
.fsp-num{ padding:14px 18px; }
.fsp-num + .fsp-num{ border-left:1px solid var(--pa-line); }
.fsp-num b{ display:block; font-size:30px; font-weight:800; letter-spacing:-.035em; color:var(--pa-ink); }
.fsp-num span{ font-size:12.5px; font-weight:600; color:var(--pa-text); }
.fsp-prev{ padding:8px 18px; font-size:12px; color:var(--pa-amber-text); background:var(--pa-amber-soft); border-bottom:1px solid var(--pa-line); }
.fsp-mapbox{ position:relative; background:#EAF0F1; }
.fsp-map{ height:600px; }
.fsp-legend{ position:absolute; left:14px; bottom:14px; background:#fff; border-radius:10px; padding:8px 12px; font-size:12px; color:var(--pa-text); box-shadow:0 4px 14px rgba(14,54,59,.12); display:flex; gap:6px 14px; flex-wrap:wrap; align-items:center; max-width:calc(100% - 28px); box-sizing:border-box; }
.fsp-legend span{ display:inline-flex; align-items:center; gap:6px; }
.fsp-legend i{ display:inline-block; width:14px; height:14px; border-radius:50%; }
.fsp-legend .lg-on{ background:var(--pa-teal-600); }
.fsp-legend .lg-qc{ background:#B7791F; }
.fsp-legend .lg-ln{ background:#2E9C7C; border-radius:4px; }
.fsp-legend .lg-glow{ width:12px; height:12px; background:#B7791F; box-shadow:0 0 0 4px rgba(183,121,31,.22); }
.fsp-legend .lg-far{ width:10px; height:10px; background:#fff; border:2px dashed var(--pa-muted); }
.fsp-mapcol .fs-roadnote{ padding:8px 18px 12px; }
.fsp-rhead{ display:flex; align-items:center; gap:8px; padding:16px 18px 6px; flex-wrap:wrap; }
.fsp-rt{ font-weight:700; font-size:17px; color:var(--pa-ink); margin-right:auto; }
.fsp-route .fs-rp-body{ padding:8px 0 0; }
.fsp-route .fs-stoplist{ border:0; border-top:1px solid var(--pa-line); border-radius:0; }
.fsp-sblock{ border-bottom:1px solid var(--pa-line); }
.fsp-sblock.is-just{ background:var(--pa-amber-icon); }
.fsp-sblock .fs-sc{ border-bottom:0; }
.fsp-sblock.is-just .fs-sc:hover, .fsp-sblock.is-just .fs-sc.open{ background:transparent; }
.fsp-near{ margin:0 18px 10px 72px; background:var(--pa-teal-100); border-radius:10px; padding:8px 10px; }
.fsp-neart{ font-size:12px; font-weight:700; color:var(--pa-teal-900); }
.fsp-nearrow{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.fsp-nearn{ flex:1 1 auto; min-width:0; font-size:13px; color:var(--pa-ink); overflow-wrap:anywhere; }
.fsp-nearn span{ color:var(--pa-text); }
.fsp-nearadd{ border:0; cursor:pointer; padding:5px 12px; border-radius:8px; background:var(--pa-teal-600); color:#fff; font:700 12px/1.2 inherit; font-family:inherit; flex-shrink:0; }
.fsp-nearadd:hover{ background:var(--pa-teal-900); }
.fsp-rfoot{ padding:14px 18px 16px; display:flex; flex-direction:column; gap:10px; }
.fsp-unbooked{ background:var(--pa-amber-bg); color:var(--pa-amber-text); border-radius:10px; padding:10px 12px; font-size:13px; }
/* the route's stop rows: drag handle, number, time, name with Resort under it, remove (the mockup's row; every control of session 277 kept) */
.fs-plan .fs-sc{ grid-template-columns:12px 26px 54px minmax(0, 1fr) 30px; gap:4px 10px; padding:10px 18px 8px; align-items:center; }
.fs-plan .fs-sc-drag{ cursor:grab; display:flex; }
.fs-plan .fs-sc-n{ width:26px; height:26px; }
.fs-plan .fs-sc-time{ font-size:13px; font-weight:700; color:var(--pa-ink); white-space:nowrap; }
.fs-plan .fs-sc-name{ font-size:13.5px; font-weight:600; }
.fs-sc-rc{ display:block; font-size:12px; font-weight:600; }
.fs-sc-rc.rc-in{ color:var(--pa-green-text); }
.fs-sc-rc.rc-no{ color:var(--pa-amber-text); }
.fs-plan .fs-sc-a{ flex-direction:column; gap:6px; }
.fs-plan .fs-sc-a .fs-x{ width:30px; height:30px; border-radius:8px; }
.fs-plan .fs-sc-done, .fs .fs-sc > .fs-sc-qc, .fs-plan .fs-sc-more{ grid-column:4 / -1; }
.fs-plan .fs-startline{ display:flex; align-items:center; gap:10px; padding:10px 18px; background:#fff; color:var(--pa-text); font-size:13px; border-bottom:1px solid var(--pa-line); }
.fs-sl-h{ width:26px; height:26px; border-radius:8px; background:var(--pa-teal-900); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-left:22px; }
.fs-sl-t{ width:54px; font-weight:700; color:var(--pa-ink); }
@media (max-width:1180px){ .fsp-pool{ order:3; flex:1 1 100%; } .fsp-mapcol{ order:2; } .fsp-route{ order:1; } }
@media (max-width:760px){
  .fsp-bar{ padding:12px 16px; }
  .fsp-close{ margin-left:0; flex-basis:100%; }
  .fsp-cols{ flex-direction:column; align-items:stretch; }
  .fsp-pool, .fsp-mapcol, .fsp-route{ flex:none; width:100%; }
  .fsp-map{ height:340px; }
  .fsp-legend{ position:static; box-shadow:none; border-radius:0; max-width:none; border-top:1px solid var(--pa-line); }
  .fsp-num{ padding:10px 12px; } .fsp-num b{ font-size:24px; }
  .fs-plan .fs-sc{ grid-template-columns:10px 26px 48px minmax(0, 1fr) 30px; gap:4px 8px; padding:10px 12px 8px; }
  .fs-plan .fs-sc-done, .fs .fs-sc > .fs-sc-qc, .fs-plan .fs-sc-more{ grid-column:2 / -1; }
  .fsp-near{ margin:0 12px 10px 12px; }
  .fsp-cand{ padding:12px 14px; }
}

/* ================================================================ session 354 (briefs/session-354-brief.md; the approved mockups Plan, StopsTable, Main,
   PlanPhone, DayPhone v2) ================================================================
   Plan: the map and the route side by side (the same height), the six numbers across the top of the map, small pins, the stops list full
   width under them. The Day view: five totals above the map, six numbers per person, the drive line between stops. Phones at 390. The
   mockups' style attributes as classes on the platform's tokens; the kind colours as named tokens. */
.fs{ --fs-qc:#B7791F; --fs-qc-tint:#FDF0D8; --fs-qc-ink:#7A5312; --fs-ln:#2E9C7C; --fs-ln-tint:#E2F4EE; --fs-ln-ink:#08513F;
  --fs-orange-bg:#FFE8D6; --fs-orange:#9A4A0E; --fs-red:#C43D2B; --fs-purple:#4B2E83; --fs-row-sel:#F3F9F9; --fs-just:#FFF5CC; }

/* the drive line between stops (Plan's route card and the Day view's cards) */
.fs-drive{ display:flex; align-items:center; gap:8px; padding:3px 18px 3px 30px; font-size:12px; color:var(--pa-muted); }
.fs-drive svg{ flex:none; color:var(--pa-muted); }

/* ---- Plan: the top row ---- */
.fsp-top{ display:flex; flex-wrap:wrap; gap:18px; align-items:stretch; }
.fsp-top .fsp-mapcol{ flex:999 1 640px; min-width:0; display:flex; flex-direction:column; border-radius:var(--pa-radius-hero); overflow:clip; }   /* clip, not hidden: the map inside stays sticky */
.fsp-top .fsp-route{ flex:1 1 340px; min-width:0; display:flex; flex-direction:column; }
.fsp-nums{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); border-bottom:1px solid var(--pa-line); }
.fsp-num{ padding:12px 16px; min-width:0; }
.fsp-num + .fsp-num{ border-left:1px solid var(--pa-line); }
.fsp-num b{ display:block; font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--pa-ink); white-space:nowrap; }
.fsp-num span{ display:block; font-size:12px; font-weight:600; color:var(--pa-text); margin-top:2px; }
/* the map card is as tall as the route card; the map itself stays in view while a long route scrolls by (never under 520 px, never taller
   than the window, so a 15-stop route does not make a 2,700 px map) */
.fsp-top .fsp-mapbox{ position:sticky; top:calc(var(--hdrH, 0px) + var(--bandH, 0px) + 12px); flex:1 1 auto; min-height:520px; max-height:max(520px, calc(100vh - var(--hdrH, 0px) - var(--bandH, 0px) - 40px)); }
.fsp-top .fsp-map{ position:absolute; inset:0; height:auto; }
.fsp-legend{ display:flex; gap:6px 14px; flex-wrap:wrap; align-items:center; z-index:2; }
.fsp-legend i{ display:inline-block; }
.fsp-legend .lg-on{ width:14px; height:14px; border-radius:50%; background:var(--pa-teal-600); }
.fsp-legend .lg-qc{ width:10px; height:10px; border-radius:50%; background:var(--fs-qc); }
.fsp-legend .lg-ln{ width:9px; height:9px; border-radius:2px; background:var(--fs-ln); }
.fsp-rhead{ align-items:flex-start; }
.fsp-rtw{ margin-right:auto; min-width:0; }
.fsp-rs{ font-size:12.5px; color:var(--pa-muted); margin-top:2px; }
.fsp-top .fsp-route .fs-rp-body{ flex:1 1 auto; }

/* the pins (a map overlay of buttons): a stop you could add 11 px close by (solid, a 1.5 px white edge) or 9 px further away (white, a 2 px
   edge in its colour); QC an amber circle, linen a green square with 3 px corners; 20 px with a "+" and the label on hover or focus. A
   route stop 24 px teal with its number; home a 24 px dark teal square. */
.fsp-pins{ position:absolute; left:0; top:0; }
.fsp-pin{ position:absolute; transform:translate(-50%, -50%); border:0; padding:0; margin:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:1; font-family:inherit; }
.fsp-pin .fsp-dot{ display:flex; align-items:center; justify-content:center; box-sizing:border-box; box-shadow:0 1px 3px rgba(0,0,0,.25); color:#fff; font:800 12px/1 inherit; font-family:inherit; }
.fsp-pin.k-qc .fsp-dot{ border-radius:50%; }
.fsp-pin.k-ln .fsp-dot{ border-radius:3px; }
.fsp-pin.is-near .fsp-dot{ width:11px; height:11px; border:1.5px solid #fff; }
.fsp-pin.is-far .fsp-dot{ width:9px; height:9px; background:#fff; }
.fsp-pin.k-qc.is-near .fsp-dot{ background:var(--fs-qc); }
.fsp-pin.k-ln.is-near .fsp-dot{ background:var(--fs-ln); }
.fsp-pin.k-qc.is-far .fsp-dot{ border:2px solid var(--fs-qc); }
.fsp-pin.k-ln.is-far .fsp-dot{ border:2px solid var(--fs-ln); }
.fsp-pin .fsp-dot i{ display:none; font-style:normal; }
.fsp-pin.k-qc:hover, .fsp-pin.k-ln:hover, .fsp-pin.k-qc:focus-visible, .fsp-pin.k-ln:focus-visible, .fsp-pin.hot{ z-index:5; }
.fsp-pin.k-qc:hover .fsp-dot, .fsp-pin.k-ln:hover .fsp-dot, .fsp-pin:focus-visible .fsp-dot, .fsp-pin.hot .fsp-dot{ width:20px; height:20px; border:1.5px solid #fff; }
.fsp-pin.k-qc:hover .fsp-dot, .fsp-pin.k-qc:focus-visible .fsp-dot, .fsp-pin.k-qc.hot .fsp-dot{ background:var(--fs-qc); }
.fsp-pin.k-ln:hover .fsp-dot, .fsp-pin.k-ln:focus-visible .fsp-dot, .fsp-pin.k-ln.hot .fsp-dot{ background:var(--fs-ln); }
.fsp-pin:hover .fsp-dot i, .fsp-pin:focus-visible .fsp-dot i, .fsp-pin.hot .fsp-dot i{ display:block; }
.fsp-pin:focus-visible{ outline:none; }
.fsp-pin:focus-visible .fsp-dot{ box-shadow:0 0 0 3px var(--pa-teal-300); }
.fsp-tip{ display:none; position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); background:#fff; border-radius:8px; padding:7px 10px; box-shadow:0 6px 16px rgba(14,54,59,.2); white-space:nowrap; pointer-events:none; text-align:left; }
.fsp-tip b{ display:block; font-size:12.5px; font-weight:700; color:var(--pa-ink); }
.fsp-tip span{ display:block; font-size:11.5px; color:var(--pa-text); margin-top:2px; }
.fsp-pin:hover .fsp-tip, .fsp-pin:focus-visible .fsp-tip, .fsp-pin.hot .fsp-tip{ display:block; }
.fsp-pin.k-stop, .fsp-pin.k-home{ z-index:3; }
.fsp-pin.k-stop .fsp-dot{ width:24px; height:24px; border-radius:50%; background:var(--pa-teal-600); border:2px solid #fff; font-size:11px; box-shadow:0 2px 6px rgba(14,54,59,.3); }
.fsp-pin.k-home{ cursor:default; }
.fsp-pin.k-home .fsp-dot{ width:24px; height:24px; border-radius:7px; background:var(--pa-teal-900); border:2px solid #fff; font-size:11px; }
.fsp-pin.k-stop:hover .fsp-dot{ box-shadow:0 0 0 3px var(--pa-yellow); }

/* the route card's rows (the Plan mockup) */
.fs-plan .fs-sc-a .fs-x{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:var(--pa-grey); color:var(--pa-text); border:0; }
.fs-plan .fs-sc-a .fs-x:hover{ background:var(--pa-input-line); }
.fs-plan .fs-sc-n{ background:var(--pa-teal-600); color:#fff; border-radius:50%; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.fs-cbl{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--pa-text); }
.fs-sc-rc.rc-cancel{ color:var(--pa-muted); }
.fsp-sblock.is-cancel{ background:var(--pa-page); }
.fsp-sblock.is-cancel .fs-sc-name{ color:var(--pa-muted); text-decoration:line-through; text-decoration-thickness:1px; }
.fsp-sblock.is-just{ background:var(--fs-just); }
.fsp-near{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0; padding:0 18px 10px 54px; background:transparent; border-radius:0; }
.fsp-neart{ font-size:12px; font-weight:700; color:var(--pa-teal-900); }
.fsp-nearadd{ border:0; cursor:pointer; padding:5px 10px; border-radius:999px; font:600 12px/1.2 inherit; font-family:inherit; }
.fsp-nearadd.k-qc{ background:var(--fs-qc-tint); color:var(--fs-qc-ink); }
.fsp-nearadd.k-ln{ background:var(--fs-ln-tint); color:var(--fs-ln-ink); }
button.fsp-nearadd:hover{ text-decoration:underline; filter:brightness(.96); }
button.fsp-nearadd:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px; }

/* ---- the stops list (StopsTable.dc.html) ---- */
.fsp-pool{ min-width:0; }
.fsp-stops{ background:#fff; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card); overflow:hidden; }
.fsp-thead{ padding:18px 22px 14px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.fsp-thw{ margin-right:auto; min-width:0; }
.fsp-stops .fsp-pt{ font-weight:700; font-size:19px; color:var(--pa-ink); }
.fsp-stops .fsp-ph{ font-size:13px; color:var(--pa-muted); margin-top:3px; }
.fsp-stops .fsp-tabs{ margin-top:0; }
.fsp-stops .fsp-tab{ padding:8px 14px; font-size:13px; }
.fsp-sortrow{ padding:0 22px 12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--pa-text); }
.fsp-sortl{ font-weight:600; }
.fsp-sort{ border:0; cursor:pointer; padding:6px 12px; border-radius:8px; font:600 12.5px/1.2 inherit; font-family:inherit; background:transparent; color:var(--pa-text); }
.fsp-sort.on{ background:var(--pa-teal-100); color:var(--pa-teal-900); }
.fsp-sort:hover:not([disabled]){ text-decoration:underline; }
.fsp-sort[disabled]{ cursor:default; opacity:.6; }
.fsp-sort:focus-visible, .fsp-add:focus-visible, .fsp-hide:focus-visible, .fsp-addsel:focus-visible, .fsp-cb:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px; }
.fsp-sorth{ color:var(--pa-muted); }
.fsp-twrap{ overflow-x:auto; }
.fsp-st{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:1060px; }
.fsp-st thead tr{ background:var(--pa-grey); text-align:left; font-size:12.5px; color:var(--pa-text); }
.fsp-st th{ padding:10px; font-weight:600; vertical-align:middle; white-space:nowrap; }
.fsp-st th .fs-sortbtn{ font:600 12.5px/1.2 inherit; font-family:inherit; color:var(--pa-text); padding:0; }
.fsp-st th.c-chk, .fsp-st td.c-chk{ padding-left:22px; width:28px; }
.fsp-st th.c-act, .fsp-st td.c-act{ padding-right:22px; text-align:right; white-space:nowrap; width:112px; }
.fsp-st th.c-dist{ width:128px; } .fsp-st th.c-win{ width:150px; } .fsp-st th.c-clean{ width:150px; } .fsp-st th.c-svc{ width:104px; }
.fsp-st th.c-deep, .fsp-st th.c-qc{ width:92px; } .fsp-st th.c-next{ width:104px; }
.fsp-st td{ padding:12px 10px; vertical-align:top; border-top:1px solid var(--pa-line); }
/* the platform's tables cut a cell with an ellipsis; this list never cuts (the planner's tables opt out the same way, .fs .fs-t) */
.fs .fsp-st td{ white-space:normal; overflow:visible; text-overflow:clip; max-width:none; text-transform:none; letter-spacing:0; }
.fs .fsp-st th{ overflow:visible; text-overflow:clip; max-width:none; text-transform:none; letter-spacing:0; }
.fs .fsp-st td.c-act{ white-space:nowrap; }
.fsp-sub, .fsp-sub2, .fsp-pn{ overflow-wrap:anywhere; }
.fsp-st tr.sel td{ background:var(--fs-row-sel); }
.fsp-st tr.hot td{ background:var(--pa-grey); }
.fsp-cb{ width:20px; height:20px; margin:0; accent-color:var(--pa-teal-600); cursor:pointer; }
.fsp-pn{ font-weight:700; font-size:14px; color:var(--pa-ink); overflow-wrap:anywhere; }
.fsp-sub2{ font-size:12.5px; color:var(--pa-text); margin-top:2px; }
.fsp-sub{ font-size:12px; color:var(--pa-muted); margin-top:2px; }
.fsp-flags{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.fsp-flag{ font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; }
.fsp-flag.f-guest, .fsp-flag.f-new{ background:var(--fs-orange-bg); color:var(--fs-orange); }
.fsp-flag.f-near{ background:var(--pa-teal-600); color:#fff; }
.fsp-flag.f-calm{ background:var(--pa-grey); color:var(--pa-text); }
.fsp-flag.f-ln{ background:var(--fs-ln-tint); color:var(--fs-ln-ink); }
.c-dist b{ font-weight:700; font-size:14px; color:var(--pa-text); }
.c-dist b.fsp-isnear{ color:var(--pa-teal-900); }
.fsp-st td.c-win .fs-wc{ min-width:0; }
.c-clean b, .c-deep b, .c-qc b, .c-next b{ font-weight:600; color:var(--pa-ink); }
.fsp-who{ font-size:12.5px; margin-top:2px; color:var(--pa-text); }
.fsp-who.is-none{ color:var(--fs-red); font-weight:600; }
.fsp-svc{ font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--pa-teal-100); color:var(--pa-teal-900); white-space:nowrap; }
.c-deep b.fsp-deeplate{ color:var(--fs-purple); }
.c-qc b.fsp-qclate{ color:var(--fs-orange); }
.fsp-add{ border:0; cursor:pointer; padding:8px 14px; border-radius:10px; background:var(--pa-teal-100); color:var(--pa-teal-900); font:700 13px/1.2 inherit; font-family:inherit; }
.fsp-add:hover{ background:var(--pa-teal-600); color:#fff; }
.fsp-hide{ border:0; cursor:pointer; margin-left:4px; width:34px; height:34px; border-radius:10px; background:var(--pa-grey); color:var(--pa-text); vertical-align:middle; display:inline-flex; align-items:center; justify-content:center; }
.fsp-hide:hover{ background:var(--pa-input-line); }
.fsp-tfoot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 22px; border-top:1px solid var(--pa-line); background:#FAFBFB; }
.fsp-nsel{ font-size:13.5px; font-weight:600; color:var(--pa-ink); }
.fsp-showhid{ font-size:13px; font-weight:600; text-decoration:underline; }
.fsp-grow{ flex:1 1 auto; }
.fsp-daylbl{ font-size:12.5px; font-weight:600; color:var(--pa-text); }
.fsp-tfoot select{ padding:8px 10px; border:1px solid var(--pa-input-line); border-radius:8px; font:600 13px/1.2 inherit; font-family:inherit; background:#fff; }
.fsp-addsel{ border:0; cursor:pointer; padding:11px 18px; border-radius:10px; font:700 14px/1.2 inherit; font-family:inherit; background:var(--pa-grey); color:var(--pa-muted); }
.fsp-addsel.on{ background:linear-gradient(180deg, var(--pa-yellow), var(--pa-yellow-2)); color:var(--pa-ink); box-shadow:var(--pa-shadow-go); }
.fsp-addsel.on:hover{ filter:brightness(.97); text-decoration:underline; }
.fsp-addsel[disabled]{ cursor:default; }
.fsp-lnlist{ border:0; border-radius:0; box-shadow:none; }
.fsp-lnlist .fs-lp-body{ max-height:none; overflow-x:auto; }
.fsp-pastcard .fs-lp-body{ max-height:none; }

/* ---- the Day view (Main.dc.html): five totals, six numbers per person, drive lines ---- */
.fdv-totals{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); border-top:1px solid var(--pa-line); border-bottom:1px solid var(--pa-line); }
.fdv-tot{ padding:12px 16px; min-width:0; }
.fdv-tot + .fdv-tot{ border-left:1px solid var(--pa-line); }
.fdv-tot b{ display:block; font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--pa-ink); white-space:nowrap; }
.fdv-tot span{ display:block; font-size:12px; font-weight:600; color:var(--pa-text); margin-top:2px; }
.fdv-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1px; background:var(--pa-line); border-top:1px solid var(--pa-line); border-bottom:1px solid var(--pa-line); }
.fdv-gc{ background:#fff; padding:9px 14px; min-width:0; }
.fdv-gc b{ display:block; font-size:16px; font-weight:800; color:var(--pa-ink); white-space:nowrap; }
.fdv-gc span{ display:block; font-size:11.5px; font-weight:600; color:var(--pa-muted); }
.fdv-card .fdv-chips{ padding-top:10px; }
.fdv-rows .fs-drive{ border-bottom:0; }
.fdv-legend i.lg-solid{ width:18px; height:0; border-radius:0; background:none; border-top:4px solid var(--pa-teal-600); }
.fdv-legend i.lg-dot{ width:18px; height:4px; border-radius:0; background:radial-gradient(circle, var(--pa-teal-600) 1.6px, transparent 1.8px) 0 0 / 6px 4px repeat-x; }
.fdv-orange{ color:var(--fs-orange); }
.fdv-row.st-cancel{ background:var(--pa-page); color:var(--pa-muted); cursor:default; }
.fdv-row.st-cancel:hover{ background:var(--pa-page); }
.fdv-row.st-cancel:hover .fdv-nm b{ text-decoration:line-through; }
.fdv-row.st-cancel .fdv-nm b{ color:var(--pa-muted); text-decoration:line-through; text-decoration-thickness:1px; }
.fdv-row.st-cancel .fdv-n{ background:var(--pa-grey); color:var(--pa-muted); border-color:var(--pa-grey); }
.fs-stpill.sp-cancel{ background:var(--pa-grey); color:var(--pa-muted); }
.fdv-rm{ margin-top:2px; }

/* ---- phones (DayPhone.dc.html, PlanPhone.dc.html), 760 px and under ---- */
@media (max-width:760px){
  .fdv-totals{ display:none; }
  .fdv-whos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; width:100%; }
  .fdv-who{ height:40px; justify-content:center; border-radius:10px; padding:0 8px; }
  .fdv-map{ height:300px; }
  .fdv-grid .fdv-gc.g-wide{ display:none; }
  .fdv-row{ min-height:44px; box-sizing:border-box; }
  .fdv-rows .fs-drive{ padding:3px 14px 0 26px; }
  .fsp-phone{ gap:0; }
  .fspm-top{ position:sticky; top:calc(var(--hdrH, 0px) + var(--bandH, 0px)); z-index:6; background:#fff; box-shadow:var(--pa-shadow-card); margin:0 -16px; padding:0 0 12px; }
  .fspm-h{ padding:12px 16px 8px; display:flex; align-items:baseline; gap:8px; }
  .fspm-h b{ font-size:17px; font-weight:800; color:var(--pa-ink); margin-right:auto; min-width:0; overflow-wrap:anywhere; }
  .fspm-change{ min-height:44px; padding:0 4px; font-size:13px; }
  .fspm-nums{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; padding:0 16px 10px; }
  .fspm-nums .fsp-num{ padding:0; border:0; }
  .fspm-nums .fsp-num + .fsp-num{ border:0; }
  .fspm-nums .fsp-num b{ font-size:17px; }
  .fspm-nums .fsp-num span{ font-size:11px; color:var(--pa-muted); }
  .fspm-tabs{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; padding:0 12px; }
  .fspm-tab{ border:0; cursor:pointer; height:44px; border-radius:10px; font:600 13.5px/1.2 inherit; font-family:inherit; background:var(--pa-grey); color:var(--pa-text); }
  .fspm-tab.on{ background:var(--pa-teal-900); color:#fff; font-weight:700; }
  .fspm-tab:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px; }
  .fspm-change-box{ display:flex; flex-direction:column; gap:12px; padding-top:12px; }
  .fspm-body{ padding-top:12px; display:flex; flex-direction:column; gap:8px; }
  .fspm-hint{ font-size:12.5px; color:var(--pa-muted); padding:0 4px; }
  .fspm-map .fsp-mapbox{ position:relative; }
  .fspm-map .fsp-map{ height:470px; }
  .fspm-map .fsp-legend{ position:absolute; left:10px; right:10px; bottom:10px; border-radius:10px; box-shadow:0 4px 14px rgba(14,54,59,.12); border:0; }
  .fsp-pin.k-qc, .fsp-pin.k-ln{ width:44px; height:44px; }
  .fsp-pin.is-near .fsp-dot, .fsp-pin.is-far .fsp-dot{ width:12px; height:12px; }
  .fsp-pin.k-stop{ width:44px; height:44px; }
  .fs-plan .fs-sc-a .fs-x{ width:44px; height:44px; border-radius:10px; }
  .fs-plan .fs-sc{ grid-template-columns:10px 28px 44px minmax(0, 1fr) 44px; }
  .fs-plan .fs-sc-n{ width:28px; height:28px; }
  .fsp-near{ padding:0 14px 12px 52px; flex-direction:column; align-items:stretch; }
  .fsp-nearadd{ text-align:left; min-height:40px; padding:8px 12px; border-radius:10px; font-size:13px; }
  .fs-drive{ padding:0 14px 0 26px; }
  .fspm-cands{ display:flex; flex-direction:column; gap:8px; }
  .fspm-cand{ background:#fff; border-radius:var(--pa-radius-card); padding:12px 14px; display:flex; gap:12px; align-items:flex-start; box-shadow:var(--pa-shadow-card); }
  .fspm-cand.sel{ background:var(--fs-row-sel); }
  .fspm-cand.hot{ box-shadow:0 0 0 2px var(--pa-teal-300); }
  .fspm-cand .fsp-cb{ margin-top:12px; flex:none; }
  .fspm-cm{ flex:1 1 auto; min-width:0; }
  .fspm-ck{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .fspm-dist{ font-size:12px; font-weight:450; color:var(--pa-muted); }
  .fspm-dist.is-near{ font-weight:700; color:var(--pa-teal-900); }
  .fspm-cn{ font-size:14.5px; font-weight:700; margin-top:6px; color:var(--pa-ink); overflow-wrap:anywhere; }
  .fspm-cr{ font-size:12.5px; color:var(--pa-muted); margin-top:2px; }
  .fspm-add{ border:0; cursor:pointer; padding:0 16px; height:44px; border-radius:10px; background:var(--pa-teal-100); color:var(--pa-teal-900); font:700 14px/1.2 inherit; font-family:inherit; flex:none; }
  .fspm-add:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px; }
  .fspm-foot{ position:sticky; bottom:0; z-index:5; background:#fff; margin:0 -16px; padding:10px 16px; display:flex; gap:10px; align-items:center; box-shadow:0 -4px 14px rgba(14,54,59,.08); font-size:13px; font-weight:600; }
  .fspm-foot span{ flex:1 1 auto; min-width:0; }
  .fspm-foot .fsp-addsel{ min-height:44px; }
}

/* ---------------------------------------------------------------- Session 363: Taken off, Put back, the Add a stop sheet ----------------------------------------------------------------
   Taken off (brief Part 1): one row per stop taken off or row hidden, address first (a Maps link), what it is, Booked in Resort, who and when,
   and Put back. The Day view's quiet line. The segmented choices (fsa-seg) of Put back and the Add a stop sheet: real buttons that wrap on a
   phone, the chosen one filled. */
.fs-offlist{ display:flex; flex-direction:column; }
.fs-offrow{ display:flex; gap:12px; align-items:center; padding:12px 16px; border-top:1px solid var(--line-soft); }
.fs-offrow:first-child{ border-top:0; }
.fs-offm{ flex:1 1 auto; min-width:0; }
.fs-offaddr{ font-size:14px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.fs-offname{ font-size:12.5px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.fs-offtags{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; }
.fs-offkind{ font-size:12px; font-weight:700; color:var(--teal-dark); background:var(--teal-pale); border-radius:999px; padding:2px 9px; }
.fs-offwho{ font-size:12px; color:var(--muted); margin-top:4px; }
.fs-offa{ flex:none; }
.fs-offempty{ padding:16px; font-size:13px; color:var(--muted); }
a.fs-addr{ color:var(--teal-dark); text-decoration:underline; text-underline-offset:2px; }
a.fs-addr:hover{ color:var(--ink); }
a.fs-addr:focus-visible{ outline:3px solid var(--teal-light); outline-offset:2px; border-radius:3px; }
.fs-btn:hover{ filter:brightness(1.08); }
.fs-btn:focus-visible{ outline:3px solid var(--teal-light); outline-offset:2px; }
.fdv-offline{ display:flex; align-items:center; gap:6px; width:100%; margin-top:8px; padding:8px 12px; border:1px dashed var(--line); border-radius:10px; background:var(--white);
  color:var(--muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; text-align:left; }
.fdv-offline:hover{ color:var(--teal-dark); border-color:var(--teal-dark); text-decoration:underline; }
.fdv-offline:focus-visible{ outline:3px solid var(--teal-light); outline-offset:2px; }
.fspm-offsw{ display:flex; gap:6px; flex-wrap:wrap; padding:0 0 4px; }
.fspm-offsw .fsp-tab{ min-height:40px; padding:8px 14px; font-size:13px; }
.fsa-seg{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px; }
.fsa-opt{ min-height:36px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--ink); font:inherit; font-size:13px; font-weight:600; cursor:pointer; text-align:left; }
.fsa-opt:hover{ border-color:var(--teal-dark); color:var(--teal-dark); }
.fsa-opt.on{ background:var(--teal-dark); border-color:var(--teal-dark); color:var(--white); }
.fsa-opt:focus-visible{ outline:3px solid var(--teal-light); outline-offset:2px; }
@media (max-width: 760px){
  .fs-offrow{ padding:12px; flex-wrap:wrap; }
  .fs-offa{ width:100%; }
  .fs-offa .fs-btn{ height:44px; width:100%; justify-content:center; font-size:14px; }
  .fsa-opt{ min-height:44px; padding:8px 14px; font-size:14px; }
}

/* Session 363: Add a stop (fsOpenAdd), four numbered parts in one sheet; a visit stop (olive) and the note on a stop. */
.fsa{ display:flex; flex-direction:column; gap:14px; }
.fsa-sec{ display:flex; flex-direction:column; gap:6px; padding-top:12px; border-top:1px solid var(--line-soft); }
.fsa-sec:first-child{ border-top:0; padding-top:0; }
.fsa-h{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:var(--ink); }
.fsa-n{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--teal-dark); color:var(--white); font-size:12px; font-weight:800; }
.fsa-q{ height:40px; font-size:14px; }
.fsa-res{ display:flex; flex-direction:column; gap:4px; margin-top:6px; max-height:300px; overflow:auto; }
.fsa-hit{ display:flex; flex-direction:column; gap:1px; text-align:left; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--white); cursor:pointer; font:inherit; color:var(--ink); }
.fsa-hit b{ font-size:13.5px; font-weight:700; overflow-wrap:anywhere; }
.fsa-hit span{ font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.fsa-hit:hover{ border-color:var(--teal-dark); }
.fsa-hit:hover b{ text-decoration:underline; }
.fsa-hit:focus-visible{ outline:3px solid var(--teal-light); outline-offset:2px; }
.fsa-hit.is-prospect{ border-left:4px solid #4B3F8F; }
.fsa-hit.is-typed{ border-style:dashed; color:var(--teal-dark); }
.fsa-hit.is-typed b{ color:var(--teal-dark); }
.fsa-tags{ display:flex; gap:4px; flex-wrap:wrap; }
.fsa-tags:empty{ display:none; }
.fsa-st{ font-style:normal; font-size:11px; font-weight:700; border-radius:999px; padding:1px 8px; background:var(--gray-bg); color:var(--text); }
.fsa-st.st-inactive{ background:#E9ECEE; color:#4D545A; }
.fsa-st.st-pending{ background:var(--warn-bg); color:var(--warn-text); }
.fsa-st.st-nopin{ background:var(--amber-bg); color:var(--amber-text); }
.fsa-chosen{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:10px; background:var(--teal-pale); }
.fsa-cm{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.fsa-cm b{ font-size:14px; overflow-wrap:anywhere; }
.fsa-cm > span{ font-size:12px; color:var(--text); overflow-wrap:anywhere; }
.fsa-cm a{ color:var(--teal-dark); text-decoration:underline; }
.fsa-placebox{ margin:6px 0; min-height:40px; }
.fsa-addr{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:8px; }
.fsa-f{ display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:700; color:var(--ink); min-width:0; }
.fsa-f[hidden], .fsa [hidden]{ display:none; }   /* session 363: Fit it in hides the time box (display:flex would show it) */
.fsa-f i{ font-style:normal; font-weight:400; color:var(--muted); }
.fsa-f input{ height:36px; font-size:14px; min-width:0; }
.fsa-f-wide{ grid-column:1 / -1; }
.fsa-whenrow{ display:flex; gap:12px; flex-wrap:wrap; }
.fsa-whenrow .fsa-f{ width:150px; }
.fsa-notel{ margin-top:6px; }
.fsa textarea{ width:100%; min-height:64px; font:inherit; font-size:14px; }
.fsa-sum{ padding:10px 12px; border-radius:10px; background:#FFF7DE; font-size:13px; color:var(--ink); }
.fs-sc-why{ display:block; font-size:12px; font-weight:700; color:#5B6B1E; }
.fs-sc-addr{ display:block; font-size:12px; overflow-wrap:anywhere; }   /* session 363: a visit's address, a Maps link */
.fs-sc-note{ display:block; font-size:12px; color:var(--ink); background:#FFF7DE; border-radius:6px; padding:3px 7px; margin-top:3px; overflow-wrap:anywhere; }
.fs-sc.t-visit .fs-sc-n{ background:#5B6B1E; }
.fs-chip.t-visit{ background:#EEF2DC; color:#4A5718; }
.fs-flag.t-visit{ background:#EEF2DC; color:#4A5718; }
.fs-visitout{ display:inline-flex; gap:6px; }
.fdv-rowx{ display:flex; flex-wrap:wrap; gap:4px 10px; padding:0 12px 8px 52px; font-size:12px; }
.fdv-note{ color:var(--ink); background:#FFF7DE; border-radius:6px; padding:2px 7px; overflow-wrap:anywhere; }
@media (max-width: 760px){
  .fsa-q, .fsa-f input, .fsa textarea{ font-size:16px; }
  .fsa-q{ height:44px; }
  .fsa-f input{ height:44px; }
  .fsa-hit{ padding:10px 12px; min-height:44px; }
  .fsa-whenrow .fsa-f{ width:calc(50% - 6px); }
  .fdv-rowx{ padding-left:12px; }
}

/* Session 364: "Go here next", Go somewhere now, "Your day changed", the change lines and "See [person]'s phone" (Plan, the Day view and, through
   .fsc-card, My route). Every control is a real button with a hover and a visible focus; on a phone each is at least 44 px tall. */
.fsc-bar{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.fsc-lines{ display:flex; flex-direction:column; gap:3px; margin:6px 0; }
.fdv-chg, .fsc-lines > div{ font-size:12.5px; color:var(--ink); line-height:1.4; padding-left:10px; border-left:3px solid var(--teal-dark); overflow-wrap:anywhere; }
.fsc-resort{ margin:6px 0; padding:8px 12px; border-radius:10px; background:#FFF3E0; border:1px solid #E8A21A; color:#6E4A0C; font-size:12.5px; font-weight:600; line-height:1.4; display:flex; flex-direction:column; gap:3px; }
.fsc-card{ margin:8px 0; padding:12px 14px; border-radius:12px; background:var(--white); border:1px solid #f5c21c; border-left-width:5px; box-shadow:0 1px 2px rgba(16,24,26,.06); display:flex; flex-direction:column; gap:8px; }
.fsc-h{ font-size:15px; font-weight:800; color:var(--ink); }
.fsc-s{ font-size:12.5px; color:var(--muted); margin-top:-4px; }
.fsc-g{ font-size:12px; font-weight:700; letter-spacing:.2px; color:#4d545a; text-transform:uppercase; margin-top:4px; }
.fsc-item{ display:flex; flex-direction:column; gap:8px; padding:10px 0 2px; border-top:1px solid var(--line); }
.fsc-item:first-of-type{ border-top:0; }
.fsc-w{ font-size:13.5px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere; }
.fsc-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.fsc-btns .fs-btn{ height:36px; padding:0 14px; }
.fdv-sugline{ display:flex; align-items:center; gap:6px; width:100%; margin:6px 0; padding:8px 12px; border:1px solid #f5c21c; border-radius:10px; background:#FFF6D6; color:#6E4A0C;
  font:inherit; font-size:13px; font-weight:700; cursor:pointer; text-align:left; }
.fdv-sugline:hover{ text-decoration:underline; }
.fdv-sugline:focus-visible, .fsc-btns .fs-btn:focus-visible{ outline:3px solid var(--teal-light); outline-offset:2px; }
.fsc-day{ display:flex; flex-direction:column; gap:10px; }
.fsc-stop{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
.fsc-sm{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fsc-sm b{ font-size:13.5px; overflow-wrap:anywhere; }
.fsc-sm span{ font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.fsc-isnext{ font-size:12px; font-weight:700; color:var(--teal-dark); padding:4px 10px; border-radius:999px; background:#dceff0; white-space:nowrap; }
.fsa-hit.is-off{ border-color:#E8A21A; background:#FFF8EC; }
.fs-sc-ctl .fsc-next{ margin-left:auto; }
@media (max-width: 760px){
  .fsc-btns .fs-btn, .fsc-bar .fs-btn, .fsc-stop .fs-btn{ height:44px; min-height:44px; font-size:14px; padding:0 14px; }
  .fsc-btns .fs-btn{ flex:1 1 140px; justify-content:center; }
  .fdv-sugline{ min-height:44px; }
  .fs-sc-ctl .fsc-next{ height:44px; margin-left:0; }
}
/* Session 365 (briefs/session-365-brief.md Parts 1 to 3): "Still working?", the one end-of-day card, Already done, and "Working until". */
.fsc-ask{ border-color:#2C6E8F; }
.fsc-picks{ display:flex; flex-wrap:wrap; gap:8px; }
.fsc-picks .fs-btn{ height:36px; padding:0 14px; }
.fsc-pickt{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.fsc-pickt[hidden]{ display:none; }
.fsc-pickt input{ width:110px; height:36px; padding:0 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; }
.fsc-pickt input:focus-visible{ outline:3px solid var(--teal-light); outline-offset:1px; }
.fsc-pickmsg{ font-size:12.5px; color:#9a3412; }
.fsc-until{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:6px 0; font-size:13px; color:var(--ink); }
.fsc-until.is-set{ padding:6px 10px; border-radius:10px; background:#E8F1F6; border:1px solid #9FC3D6; }
.fsc-usual{ color:var(--muted); }
.fsc-usheet{ display:flex; flex-direction:column; gap:12px; }
.fsc-erow{ display:flex; flex-direction:column; gap:8px; padding:10px 0 2px; border-top:1px solid var(--line); }
.fsc-etop{ display:flex; align-items:flex-start; gap:10px; }
.fsc-etick{ width:20px; height:20px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--teal-dark); cursor:pointer; }
.fsc-etick:disabled{ cursor:not-allowed; }
.fsc-etick:focus-visible{ outline:3px solid var(--teal-light); outline-offset:2px; }
.fsc-en{ display:flex; flex-direction:column; gap:2px; min-width:0; cursor:pointer; }
.fsc-en b{ font-size:13.5px; overflow-wrap:anywhere; }
.fsc-en span{ font-size:12.5px; color:var(--muted); overflow-wrap:anywhere; }
.fsc-en .fsc-ew{ color:var(--ink); }
.fsc-en .fsc-enot{ color:#9a3412; font-weight:600; }
.fsc-eall{ padding-top:10px; border-top:1px solid var(--line); }
.fsc-picks .fs-btn:focus-visible, .fsc-until .fs-btn:focus-visible{ outline:3px solid var(--teal-light); outline-offset:2px; }
@media (max-width: 760px){
  .fsc-picks .fs-btn, .fsc-pickt .fs-btn, .fsc-until .fs-btn{ height:44px; min-height:44px; font-size:14px; }
  .fsc-pickt input{ height:44px; font-size:16px; }
  .fsc-etick{ width:24px; height:24px; }
}