/* portkey's look, for the day board page and the cluster map. Barlow (vendored in fonts/,
   OFL) for the interface; its semi-condensed cut for the board, where a 45 minute visit has
   about 80 pixels to say what it is. Ivy green is the one action colour; every tour gets
   its own hue on the board, the page's loudest part by design. */

@font-face { font-family:"Barlow"; font-weight:400; font-display:swap; src:url(fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:500; font-display:swap; src:url(fonts/barlow-500.woff2) format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:600; font-display:swap; src:url(fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:700; font-display:swap; src:url(fonts/barlow-700.woff2) format("woff2"); }
@font-face { font-family:"Barlow Semi Condensed"; font-weight:500; font-display:swap; src:url(fonts/barlow-semi-condensed-500.woff2) format("woff2"); }
@font-face { font-family:"Barlow Semi Condensed"; font-weight:600; font-display:swap; src:url(fonts/barlow-semi-condensed-600.woff2) format("woff2"); }
@font-face { font-family:"Barlow Semi Condensed"; font-weight:700; font-display:swap; src:url(fonts/barlow-semi-condensed-700.woff2) format("woff2"); }

:root {
  --ivy:#1e5b43; --ivy-deep:#143f2f; --ivy-wash:#e4efe8;
  --ink:#17202a; --slate:#55616b; --faint:#6a757e;
  --mist:#eef1ef; --board:#f6f8f7; --paper:#fff; --line:#d6ddd9; --line-soft:#e6ebe8;
  --amber:#995900; --amber-wash:#fbefd8;
  --red:#b3261e; --red-wash:#fbe9e7;
  --plum:#4a2c7a; --plum-wash:#f2edf8;
  --sky:#0b5c7a; --sky-wash:#e1eff5;
  --sans:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond:"Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --bar:56px; --panel:380px;
  --radius:8px;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font:15px/1.45 var(--sans); color:var(--ink); background:var(--mist); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; }
h1, h2, h3 { margin:0; font-weight:700; line-height:1.2; }
a { color:var(--ivy); }
:focus-visible { outline:2px solid var(--ivy); outline-offset:2px; }
.skip { position:absolute; left:12px; top:-60px; z-index:50; background:var(--ivy); color:#fff; padding:8px 14px; border-radius:var(--radius); font-weight:600; text-decoration:none; }
.skip:focus { top:10px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.note { color:var(--slate); font-size:14px; margin:6px 0; }
.htmx-request { opacity:.6; transition:opacity .15s; }

/* ===== The bar across the top ===== */
.topbar { height:var(--bar); display:flex; align-items:center; gap:28px; padding:0 20px; background:var(--paper); border-bottom:1px solid var(--line); position:relative; z-index:20; }
.brand { display:flex; align-items:center; gap:8px; font:700 22px/1 var(--cond); color:var(--ivy-deep); text-decoration:none; letter-spacing:-.01em; }
.brand svg { flex:none; }
.tabs { display:flex; align-self:stretch; gap:4px; }
.tabs a { display:flex; align-items:center; padding:0 12px; white-space:nowrap; color:var(--slate); text-decoration:none; font-weight:600; border-bottom:3px solid transparent; margin-bottom:-1px; }
.tabs a:hover { color:var(--ink); }
.tabs a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--ivy); }
.topbar .spacer { flex:1; }
.panel-toggle { font:600 14px var(--sans); color:var(--slate); background:none; border:1px solid var(--line); border-radius:var(--radius); padding:6px 12px; cursor:pointer; }
.panel-toggle:hover { color:var(--ink); border-color:var(--slate); }
.topbar .who { color:var(--slate); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:28ch; margin-right:-14px; }
.signout { font:600 14px var(--sans); color:var(--slate); background:none; border:1px solid var(--line); border-radius:var(--radius); padding:6px 12px; cursor:pointer; white-space:nowrap; }
.signout:hover { color:var(--ink); border-color:var(--slate); }

/* ===== Controls ===== */
label, .label { display:block; font-size:14px; font-weight:600; color:var(--ink); margin:12px 0 5px; }
label small, .label small { font-weight:400; color:var(--slate); }
input, select { width:100%; font:inherit; color:var(--ink); height:40px; padding:0 11px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }
input[type=search] { -webkit-appearance:none; appearance:none; }
input:hover, select:hover { border-color:#b8c2bc; }
input:focus, select:focus { outline:none; border-color:var(--ivy); box-shadow:0 0 0 3px rgba(30,91,67,.18); }
input[type=checkbox] { width:16px; height:16px; margin:0; accent-color:var(--ivy); flex:none; }
input[type=time] { width:auto; height:34px; padding:0 8px; }
button { font:600 14px var(--sans); color:var(--ink); cursor:pointer; border:1px solid var(--line); background:var(--paper); border-radius:var(--radius); padding:7px 12px; }
button:hover { border-color:var(--ivy); color:var(--ivy-deep); }
button[disabled] { opacity:.45; cursor:not-allowed; }
button[disabled]:hover { border-color:var(--line); color:var(--ink); }
button.primary { width:100%; height:44px; margin-top:18px; background:var(--ivy); border-color:var(--ivy); color:#fff; font-size:16px; }
button.primary:hover { background:var(--ivy-deep); border-color:var(--ivy-deep); color:#fff; }
button.danger { color:var(--red); border-color:#efb7b1; }
button.danger:hover { background:var(--red-wash); border-color:var(--red); color:var(--red); }
.badge { display:inline-block; font:600 11px/1.5 var(--sans); padding:0 6px; border-radius:10px; background:var(--ivy-wash); color:var(--ivy-deep); margin-left:5px; vertical-align:1px; white-space:nowrap; }

/* Messages after an action: what happened, in a box the eye lands on. */
.reason, .booked { margin:12px 0 8px; padding:10px 12px; border-radius:var(--radius); font-weight:600; font-size:14px; }
.reason { background:var(--amber-wash); color:#6e4000; border-left:3px solid var(--amber); }
.booked { background:var(--ivy-wash); color:var(--ivy-deep); border-left:3px solid var(--ivy); }

/* ===== The page: the booking panel beside the board ===== */
.app { display:grid; grid-template-columns:var(--panel) minmax(0, 1fr); height:calc(100vh - var(--bar)); }
.app.panel-hidden { grid-template-columns:0 minmax(0, 1fr); }
.app.board-only { grid-template-columns:minmax(0, 1fr); } /* no write: no booking panel */
.app.panel-hidden .panel { visibility:hidden; }
.panel { background:var(--paper); border-right:1px solid var(--line); overflow-y:auto; padding:20px 22px 40px; min-width:0; }
.panel h1 { font-size:20px; }
.panel-lede { color:var(--slate); font-size:14px; margin:4px 0 6px; }

.step { border:0; margin:0; padding:18px 0 6px; min-width:0; }
.step + .step { box-shadow:0 -1px 0 var(--line-soft); margin-top:12px; }
/* Floated, a legend stops sitting in the fieldset's border and flows like a heading. */
.step legend { float:left; width:100%; display:flex; align-items:center; gap:10px; padding:0; margin-bottom:6px; font:700 16px var(--sans); }
.step legend + * { clear:both; }
.step legend .n { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--ivy); color:#fff; font:700 13px var(--cond); }
.or { display:flex; align-items:center; gap:10px; color:var(--faint); font-size:13px; margin:10px 0 0; }
.or::before, .or::after { content:""; flex:1; border-top:1px solid var(--line-soft); }
.or + label { margin-top:4px; }
.row { display:flex; gap:10px; } .row > div { flex:1; min-width:0; }
.home-search { display:grid; grid-template-columns:minmax(0, 1fr) 128px; gap:8px; margin-top:10px; }

.home-list { max-height:232px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius); margin-top:8px; background:var(--paper); }
.home-opt { display:flex; align-items:center; gap:10px; margin:0; padding:8px 10px; font-weight:400; cursor:pointer; border-bottom:1px solid var(--line-soft); }
.home-opt:last-child { border-bottom:0; }
.home-opt:hover { background:var(--board); }
.home-opt:has(input:checked) { background:var(--ivy-wash); }
.home-opt .h { min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.home-opt .h b { font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-opt .h small { color:var(--slate); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-list > .note { padding:6px 10px; }

.picked { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; min-height:28px; align-items:center; }
.picked .note { margin:0; font-size:13px; }
.chip { display:inline-flex; align-items:center; font:600 13px var(--sans); background:var(--ivy); color:#fff; border-radius:14px; padding:3px 4px 3px 10px; }
.chip button { border:0; background:none; color:inherit; padding:0 6px; font-size:16px; line-height:1; border-radius:10px; }
.chip button:hover { background:rgba(255,255,255,.2); color:#fff; }
.hint { font-size:13px; color:var(--slate); margin:8px 0 0; }

details.more { margin-top:14px; font-size:14px; }
details.more > summary { cursor:pointer; color:var(--slate); list-style:none; display:flex; gap:6px; align-items:baseline; }
details.more > summary::-webkit-details-marker { display:none; }
details.more > summary::before { content:"▸"; font-size:11px; color:var(--faint); }
details.more[open] > summary::before { content:"▾"; }
details.more > summary b { color:var(--ink); font-weight:600; }
details.more > summary:hover { color:var(--ink); }

#times { margin-top:20px; scroll-margin-top:16px; }
#times:empty { display:none; }
.times-head { font-size:14px; color:var(--slate); margin:0 0 10px; }
.times-head b { color:var(--ink); }
.times { display:grid; grid-template-columns:repeat(auto-fill, minmax(74px, 1fr)); gap:6px; }
.times button { font:600 16px var(--cond); padding:8px 4px; text-align:center; }
.times button:hover { background:var(--ivy-wash); }
.times button:has(.badge) { grid-column:span 2; }
.times .badge { font:600 11px/1.4 var(--sans); }
.tour-options { display:grid; gap:8px; }
.tour-opt { display:block; width:100%; text-align:left; padding:10px 12px; font-weight:500; }
.tour-opt:hover { background:var(--ivy-wash); }
.tour-opt .when { font:700 17px var(--cond); }
.tour-opt ol, .tour-booked { margin:6px 0 0; padding-left:20px; font-size:14px; color:var(--ink); }
.tour-opt li, .tour-booked li { margin:1px 0; }

/* ===== The day board ===== */
.board { background:var(--board); overflow:auto; padding:18px 24px 48px; min-width:0; position:relative; --seen:calc(100vw - var(--panel) - 48px); }
.app.panel-hidden .board { --seen:calc(100vw - 48px); }
.board > :not(.timeline) { position:sticky; left:0; }
.board-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.board-head h2 { font:700 30px/1.1 var(--cond); letter-spacing:-.01em; }
.board-date { display:flex; gap:4px; align-items:center; }
.board-date input { width:auto; height:36px; }
.board-date button { width:36px; height:36px; padding:0; font-size:20px; line-height:1; }
.board-count { margin-left:auto; font:600 16px var(--cond); color:var(--slate); }
.board-notes { display:flex; flex-wrap:wrap; gap:4px 18px; margin:6px 0 0; font-size:13px; color:var(--slate); }
.board-notes p { margin:0; }
.board-notes .warn { color:var(--amber); font-weight:600; }
.flash { margin:12px 0 0; padding:10px 14px; border-radius:var(--radius); background:var(--ivy-wash); color:var(--ivy-deep); border-left:3px solid var(--ivy); font-weight:600; width:fit-content; max-width:100%; }
.flash-err { background:var(--red-wash); color:var(--red); border-left-color:var(--red); }
.legend { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--slate); margin:14px 0 4px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.sw { display:inline-block; width:20px; height:12px; border-radius:3px; flex:none; }
.sw-tour { background:#e6edfa; border:1.5px solid #2c5bb8; }
.sw-mgr { background:var(--plum-wash); border:1.5px dashed var(--plum); }
.sw-ride { background:repeating-linear-gradient(135deg, #7d8891 0 1.5px, transparent 1.5px 5px); border:1px solid #a9b2b9; }
.sw-off { background:#e3e7e5; }
.sw-out { background:repeating-linear-gradient(-45deg, #eef1ef 0 3px, #dfe4e1 3px 6px); }
.star { color:#c98a00; }
.board-empty { margin:12px 0 0; padding:12px 14px; border:1px dashed var(--line); border-radius:var(--radius); width:fit-content; }

.timeline { margin-top:10px; }
.tl { --label:188px; --hour:120px; min-width:calc(var(--label) + 10 * var(--hour)); }
.tl-axis, .lane { display:grid; grid-template-columns:var(--label) minmax(0, 1fr); }
.tl-axis { position:sticky; top:-18px; z-index:8; background:var(--board); border-bottom:1px solid var(--line); }
.tl-axis > div:first-child { position:sticky; left:-24px; background:var(--board); z-index:1; }
.axis { position:relative; height:32px; }
.axis span { position:absolute; bottom:7px; transform:translateX(-50%); font:600 14px var(--cond); color:var(--slate); }
.axis span:first-child { transform:none; padding-left:4px; }
.axis span:last-child { transform:translateX(-100%); padding-right:4px; }

.region-title { font:700 20px var(--cond); padding:18px 0 4px; }
.sec { padding:0 0 8px; }
/* Inside the wide timeline, these stay within the part of the board on screen (--seen). */
/* Above the lanes (z-index 5 to 6), so the add-backup form opens over the tours below. */
.sec-title { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; padding:18px 0 8px; position:sticky; left:0; z-index:7; width:fit-content; max-width:var(--seen); }
.sec-title b { font:700 20px var(--cond); }
.sec-title > span { font-size:14px; color:var(--slate); }
.sec-mgr { margin-top:4px; }
.sec-mgr .lane { background:var(--plum-wash); }
.sec-mgr .lane-name { background:var(--plum-wash); }
.lane-empty { margin:0 0 6px; }

.load { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--slate); font-weight:500; }
.meter { position:relative; width:84px; height:6px; border-radius:3px; background:#dfe5e1; overflow:hidden; flex:none; }
.meter i { position:absolute; inset:0 auto 0 0; background:var(--ivy); border-radius:3px; }
.load-tight { color:var(--amber); font-weight:600; }
.load-tight .meter i { background:var(--amber); }

.tag { display:inline-block; font:600 12px/1.5 var(--sans); padding:0 7px; border-radius:10px; white-space:nowrap; }
.tag-mgr { background:var(--plum); color:#fff; }
.tag-warn { background:var(--amber-wash); color:#6e4000; }
.tag-backup { background:var(--sky-wash); color:var(--sky); }
.tag-sync { display:block; width:fit-content; max-width:100%; margin-top:4px; white-space:normal; font-size:12px; }

.add-backup { font-size:13px; }
button.add-backup { padding:4px 10px; }
details.add-backup { display:inline-block; position:relative; }
details.add-backup > summary { list-style:none; cursor:pointer; font:600 13px var(--sans); color:var(--ivy-deep); border:1px solid var(--line); background:var(--paper); border-radius:var(--radius); padding:4px 10px; }
details.add-backup > summary::-webkit-details-marker { display:none; }
details.add-backup > summary:hover { border-color:var(--ivy); }
details.add-backup[open] > summary { background:var(--ivy-wash); border-color:var(--ivy); }
.window-form { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; }
details.add-backup .window-form { position:absolute; left:0; top:calc(100% + 6px); z-index:12; width:max-content; max-width:360px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:12px; box-shadow:0 10px 30px rgba(23,32,42,.14); }
details.add-backup .window-form .note { flex-basis:100%; margin:2px 0 0; }
.window-form button { padding:5px 10px; font-size:13px; }
.window-form button[type=submit]:not(.danger-link) { background:var(--ivy); border-color:var(--ivy); color:#fff; }
.window-edit { margin:4px 0 2px; font-size:13px; position:relative; }
.window-edit > summary { cursor:pointer; color:var(--ivy); font-weight:600; list-style:none; width:fit-content; }
.window-edit > summary::-webkit-details-marker { display:none; }
.window-edit > summary:hover { text-decoration:underline; }
.window-edit .window-form { position:absolute; left:0; top:calc(100% + 6px); z-index:12; width:max-content; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:12px; box-shadow:0 10px 30px rgba(23,32,42,.14); }
/* A lane whose hours form is open sits above the lanes after it, so the form isn't covered. */
.lane-name:has(details[open]) { z-index:9; }
.danger-link { color:var(--red); border-color:#efb7b1; }

.lobby { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; padding:10px 12px; margin:10px 0 2px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); font-size:14px; position:sticky; left:0; width:fit-content; max-width:var(--seen); }
.lobby > b { font:700 16px var(--cond); }
.lobby .agent { display:inline-flex; align-items:baseline; gap:6px; background:var(--sky-wash); color:var(--sky); padding:2px 9px; border-radius:12px; font-weight:600; }
.lobby .agent small { font-weight:500; font-size:12px; color:#356f86; }
.lobby .why { color:var(--slate); font-size:13px; }

.lane { min-height:156px; border-top:1px solid var(--line-soft); background:var(--paper); }
.sec .lane:last-child { border-bottom:1px solid var(--line-soft); }
.lane-name { padding:10px 12px 8px 12px; position:sticky; left:-24px; z-index:5; background:var(--paper); border-right:1px solid var(--line); }
.lane-name .who { font:700 16px/1.2 var(--cond); }
.lane-name .hours { font-size:13px; color:var(--slate); margin:2px 0 4px; }
.track { position:relative;
  background-image:linear-gradient(to right, #e3e8e5 1px, transparent 1px), linear-gradient(to right, #f0f3f1 1px, transparent 1px);
  background-size:10% 100%, 5% 100%; }
.off { position:absolute; top:0; bottom:0; background:rgba(214,221,217,.55); }
.off-out { background:repeating-linear-gradient(-45deg, rgba(238,241,239,.95) 0 6px, rgba(223,228,225,.95) 6px 12px); }
.off-leave { background:repeating-linear-gradient(45deg, rgba(179,38,30,.07) 0 8px, rgba(179,38,30,.14) 8px 16px); }
.off-leave span { position:absolute; bottom:6px; left:8px; font:700 13px var(--cond); color:var(--red); }

.tour { position:absolute; top:8px; bottom:8px; min-width:6px; border:1.5px solid var(--c); background:var(--bg); border-radius:7px; }
.tour.mgr { border-style:dashed; border-color:var(--plum); }
.tour-head { height:22px; border-radius:5px 5px 0 0; display:flex; gap:6px; align-items:center; padding:0 7px; background:var(--c); color:#fff; font:600 13px var(--cond); white-space:nowrap; overflow:hidden; }
.tour.mgr .tour-head { background:var(--plum); }
.tour-head span { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tour-head small { font-weight:500; font-size:12px; }
.tour-head em { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-style:normal; font-size:11px; background:rgba(255,255,255,.22); padding:0 6px; border-radius:8px; }
.tour-body { position:absolute; top:22px; bottom:0; left:0; right:0; }
.tc0 { --c:#2c5bb8; --bg:#e9effb; } .tc1 { --c:#1d7552; --bg:#e2f2ea; } .tc2 { --c:#8f6200; --bg:#faf0d6; } .tc3 { --c:#6a3fb2; --bg:#efe9fa; }
.tc4 { --c:#0d6e7e; --bg:#dff1f3; } .tc5 { --c:#ad2a59; --bg:#fae7ee; } .tc6 { --c:#a24812; --bg:#fbece1; } .tc7 { --c:#46525e; --bg:#eaeef0; }

.visit { position:absolute; top:0; bottom:0; padding:5px 7px; overflow:hidden; cursor:pointer; font:500 13px/17px var(--cond); color:var(--ink); }
.visit + .visit, .ride + .visit { box-shadow:inset 1px 0 0 rgba(23,32,42,.14); }
/* A narrow visit opens out over its neighbours on hover or focus, so all of it (and its
   Zoho Retry) can be read and reached. */
.visit:hover, .visit:focus, .visit:focus-within { overflow:visible; z-index:6; min-width:max-content; bottom:auto; min-height:100%; background:var(--paper); border-radius:6px; box-shadow:0 8px 24px rgba(23,32,42,.22); outline:none; }
.visit:hover > div, .visit:focus > div, .visit:focus-within > div { overflow:visible; }
/* Each visit's unit (and each shared buyer) is its button, for the keyboard; a click
   anywhere on the visit opens it too. */
.v-open { all:unset; cursor:pointer; }
.v-open:focus-visible { outline:2px solid var(--ink); outline-offset:1px; border-radius:2px; }
.visit.is-open { box-shadow:inset 0 0 0 2px var(--ink); }
.visit > div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-time { font-weight:700; font-size:15px; }
/* The apartment is what a visit is: it gets two lines, breaking at its hyphens. */
.visit > .v-apt { font-weight:600; font-size:14px; line-height:16px; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:break-word; }
.visit:hover > .v-apt, .visit:focus > .v-apt, .visit:focus-within > .v-apt { white-space:nowrap; display:block; }
.v-proj { color:var(--slate); }
.v-st { font-size:12px; }
.rv { margin-left:5px; font:600 11px/1.45 var(--sans); background:var(--ink); color:#fff; padding:0 5px; border-radius:8px; vertical-align:1px; }
.rv.sh { background:#6a3fb2; }
.v-share { font-size:12px; }
.v-share:hover { text-decoration:underline; }
.v-share-who { font-weight:600; }
.v-share .zslot { margin-left:6px; }
.st { font-weight:600; color:var(--slate); }
.st::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:4px; vertical-align:1px; }
.st-completed { color:#1d7552; } .st-no_show { color:var(--red); } .st-confirmed { color:#2c5bb8; } .st-cancelled { color:var(--faint); }
.zslot { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zslot .zoho button { font-size:11px; padding:0 5px; }
.zoho { white-space:nowrap; }
.zoho a { color:var(--ivy); text-decoration:none; } .zoho a:hover { text-decoration:underline; }
.zoho .ok { color:var(--ivy); } .zoho .fail { color:var(--red); cursor:help; }
.zoho button { font-size:12px; padding:1px 7px; margin-left:4px; }
.visit.new { background:#fff2bf; box-shadow:inset 0 0 0 2px #d79b00; animation:board-new 1s ease-in-out 4; }
@keyframes board-new { 50% { background:#ffe27a; } }

.ride { position:absolute; top:34px; bottom:34px; background:repeating-linear-gradient(135deg, #7d8891 0 1.5px, transparent 1.5px 5px); border-top:1px solid #a9b2b9; border-bottom:1px solid #a9b2b9; z-index:1; }
.tour-body .ride { top:0; bottom:0; border:0; }
.ride b { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--paper); border:1px solid #7d8891; border-radius:10px; padding:0 6px; font:700 12px var(--cond); color:var(--ink); white-space:nowrap; }
.ride-unknown { min-width:3px; background:var(--amber); border:0; }
.ride-unknown b { color:var(--amber); border-color:var(--amber); }

/* ===== The site visit drawer ===== */
.drawer { position:fixed; top:var(--bar); right:0; bottom:0; width:min(440px, 100vw); background:var(--paper); border-left:1px solid var(--line); box-shadow:-16px 0 40px rgba(23,32,42,.12);
  transform:translateX(105%); transition:transform .22s ease; z-index:30; display:flex; flex-direction:column; visibility:hidden; }
.drawer.open { transform:none; visibility:visible; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line-soft); }
.drawer-head h2 { font:700 20px var(--cond); }
.drawer-head h2:focus { outline:none; }
.drawer-head button { width:34px; height:34px; padding:0; font-size:20px; line-height:1; }
#visit-detail { padding:16px 20px 32px; overflow-y:auto; flex:1; }
#visit-detail .detail { display:grid; grid-template-columns:max-content 1fr; gap:8px 16px; margin:0; font-size:15px; }
#visit-detail dt { color:var(--slate); }
#visit-detail dd { margin:0; font-weight:600; }
#visit-detail .detail + .note { margin:12px 0 4px; font-size:13px; }
#visit-detail .change-head { display:none; } /* the summary above says the same, and stays current */
.visit-actions { border-top:1px solid var(--line-soft); margin-top:16px; padding-top:4px; }
.visit-change h3 { font:700 16px var(--sans); margin:14px 0 0; }
.visit-change .row { flex-wrap:wrap; }
.visit-change .row > div { flex:1 1 160px; }
.visit-change button.danger { margin-top:12px; width:100%; height:40px; }
.reschedule { margin-top:18px; padding-top:4px; border-top:1px solid var(--line-soft); }
.reschedule-times { margin-top:10px; }

/* ===== The replayed day's strip ===== */
.strip { margin:14px 0 4px; padding:16px 18px; border:1px solid var(--line); border-radius:10px; background:var(--paper); max-width:min(100%, 1280px); }
.strip-head { margin:0 0 12px; font-size:15px; color:var(--slate); }
.strip-head b { color:var(--ink); }
.strip-warn { margin:0 0 10px; color:var(--amber); font-weight:600; font-size:14px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
.tile { padding:2px 18px 4px; border-left:1px solid var(--line-soft); min-width:0; }
.tile:first-child { border-left:0; padding-left:0; }
.tile .num { font:700 40px/1.05 var(--cond); color:var(--ink); }
.tile .num small { font-size:20px; font-weight:600; color:var(--slate); }
.tile .lbl { font-size:15px; font-weight:600; margin-top:2px; }
.tile .sub { font-size:13px; color:var(--slate); margin-top:6px; }
.strip .meter { width:100%; height:8px; border-radius:4px; margin-top:8px; }
.strip .meter i { display:block; position:static; height:100%; border-radius:4px; }
.tile-fit .num { color:var(--ivy); }
.tile-miss .num { color:var(--amber); }
.reasons { list-style:none; margin:6px 0 0; padding:0; font-size:13px; color:var(--slate); }
.reasons li { margin:2px 0; display:flex; gap:8px; }
.reasons b { flex:none; min-width:2ch; text-align:right; color:var(--ink); }
.agent-time { margin-top:16px; border-top:1px solid var(--line-soft); padding-top:12px; }
.agent-time summary { cursor:pointer; font-size:15px; font-weight:700; }
.at-legend { display:inline-flex; flex-wrap:wrap; gap:4px 16px; margin-left:14px; font-size:13px; font-weight:500; color:var(--slate); }
.at-legend span { display:inline-flex; align-items:center; gap:6px; }
.at-legend .seg { flex:none; width:20px; height:12px; border-radius:3px; }
.at-rows { display:grid; grid-template-columns:max-content minmax(0, 1fr) max-content; gap:6px 14px; align-items:center; margin-top:10px; }
.at-name { font:700 15px var(--cond); }
.at-track { min-width:200px; }
.at-bar { display:flex; gap:2px; height:16px; min-width:4px; }
.seg { display:inline-block; }
.at-bar .seg { flex:0 1 0; min-width:2px; height:100%; }
.at-bar .seg:first-child { border-radius:4px 0 0 4px; } .at-bar .seg:last-child { border-radius:0 4px 4px 0; } .at-bar .seg:only-child { border-radius:4px; }
.seg-visit { background:var(--ivy); }
.seg-ride { background:repeating-linear-gradient(135deg, #7d8891 0 2px, #e3e8e5 2px 6px); }
.seg-idle { background:var(--mist); box-shadow:inset 0 0 0 1px var(--line); }
.at-nums { font-size:14px; color:var(--slate); white-space:nowrap; }
.at-nums b { color:var(--ink); }

/* ===== The cluster map ===== */
.map-main { display:grid; grid-template-columns:minmax(0, 1fr) 380px; height:calc(100vh - var(--bar)); }
#map { min-height:400px; }
.leaflet-container { font-family:var(--sans); }
.leaflet-tile-pane { filter:grayscale(1) contrast(.88) brightness(1.06); }
.map-panel { background:var(--paper); border-left:1px solid var(--line); padding:20px 22px; overflow:auto; }
.map-panel h1 { font:700 26px/1.1 var(--cond); }
.map-date { display:flex; gap:4px; align-items:center; margin:12px 0 10px; }
.map-date a { display:grid; place-items:center; width:36px; height:36px; font-size:20px; line-height:1; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); text-decoration:none; background:var(--paper); }
.map-date a:hover { border-color:var(--ivy); }
.map-date input { width:auto; height:36px; }
.manager { background:var(--plum-wash); border-radius:var(--radius); padding:10px 12px; font-size:14px; margin:14px 0 6px; }
.manager .tag-mgr { margin-left:6px; }
.manager .note { margin:2px 0 0; }
.cl { display:flex; gap:12px; padding:12px 8px; border-top:1px solid var(--line-soft); cursor:pointer; border-radius:var(--radius); }
.cl:hover, .cl:focus-visible { background:var(--board); }
.cl .sw { width:14px; height:14px; border-radius:4px; margin-top:5px; }
.cl b { display:block; font:700 18px var(--cond); }
.cl .facts { color:var(--slate); font-size:13px; display:block; }
.cl .agents { font-size:14px; display:block; margin-top:3px; }
.cl .none { color:var(--amber); font-weight:600; }
.cl-label { background:var(--paper); border:1.5px solid; border-radius:6px; font:700 14px var(--cond); padding:2px 7px; box-shadow:none; }
.cl-label::before { display:none; }

/* ===== Narrow screens: the panel above the board, everything scrolling as one ===== */
@media (max-width:1000px) {
  .app, .app.panel-hidden { display:block; height:auto; }
  .board, .app.panel-hidden .board { --seen:calc(100vw - 48px); }
  .app.panel-hidden .panel { display:none; }
  .panel { border-right:0; border-bottom:1px solid var(--line); overflow:visible; }
  .board { overflow-x:auto; overflow-y:visible; }
  .tl-axis { top:0; }
  .map-main { grid-template-columns:1fr; grid-template-rows:60vh auto; height:auto; }
  .map-panel { border-left:0; border-top:1px solid var(--line); }
  .topbar { gap:14px; padding:0 14px; }
  .panel-toggle, .topbar .who { display:none; }
}
/* ===== Sign-in, and no access (auth/templates/pages.html) ===== */
.gate-page { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.gate { width:100%; max-width:420px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px 28px 24px; }
.gate h1 { font:700 28px/1 var(--cond); color:var(--ivy-deep); margin-bottom:8px; }
.gate .g_id_signin { margin:20px 0 4px; min-height:44px; }
.gate-scopes { border:0; padding:0; margin:10px 0 0; }
.gate-scopes legend { margin-bottom:2px; }
.gate-scopes label { display:flex; align-items:center; gap:8px; margin:6px 0; }

@media (prefers-reduced-motion:reduce) {
  .drawer { transition:none; }
  .visit.new { animation:none; }
}