/* page-campus-map.css: #map, the Campus map (spec/page-campus-map.md, owner 27 Oct 2026). Tokens from dibs.css only;
   the map's own tints are named here once per theme and derive from the dibs greys and accent, with one quiet green
   for green space and one quiet blue for water (no saturated warm colour, system.md). Every rule sits under .cm. */

/* ---------- map tints, light and dark ---------- */
.cm {
  --map-land: #eceff2; --map-campus: #f5f6f8; --map-green: #dcebdc; --map-water: #cfe2ef; --map-parking: #e4e7eb;
  --map-plaza: #fbfbfc; --map-contour: #dfe3e7; --map-contour-i: #d3d8de;
  --map-road: #ffffff; --map-road-case: #d4dae1; --map-path: #ffffff; --map-path-case: #e2e6ea; --map-steps: #b9c1ca;
  --map-boff: #e2e5e9; --map-boff-line: #d6dbe0; --map-bld: #dfe4ea; --map-bld-line: #c9d1da;
  --map-bld-class: #d3dfea; --map-bld-class-line: #a9bccd; --map-bld-hover: #c3d4e3;
  --map-label: #3d4650; --map-label-class: #1f3b52; --map-label-place: #5f7f62; --map-halo: rgba(245, 246, 248, 0.92);
  --map-route: var(--accent); --map-route-case: #ffffff;
}
:root[data-theme="dark"] .cm {
  --map-land: #0d1013; --map-campus: #13171b; --map-green: #142219; --map-water: #10273a; --map-parking: #181c21;
  --map-plaza: #181d22; --map-contour: #1b2026; --map-contour-i: #222930;
  --map-road: #2a3138; --map-road-case: #1a1f25; --map-path: #232a31; --map-path-case: #191e23; --map-steps: #3a434c;
  --map-boff: #191d22; --map-boff-line: #20262c; --map-bld: #1f252c; --map-bld-line: #2b333b;
  --map-bld-class: #1b3142; --map-bld-class-line: #2c4b63; --map-bld-hover: #24425a;
  --map-label: #b7c0c9; --map-label-class: #cfe6f5; --map-label-place: #8fb894; --map-halo: rgba(19, 23, 27, 0.92);
  --map-route: var(--accent); --map-route-case: #0d1013;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm {
    --map-land: #0d1013; --map-campus: #13171b; --map-green: #142219; --map-water: #10273a; --map-parking: #181c21;
    --map-plaza: #181d22; --map-contour: #1b2026; --map-contour-i: #222930;
    --map-road: #2a3138; --map-road-case: #1a1f25; --map-path: #232a31; --map-path-case: #191e23; --map-steps: #3a434c;
    --map-boff: #191d22; --map-boff-line: #20262c; --map-bld: #1f252c; --map-bld-line: #2b333b;
    --map-bld-class: #1b3142; --map-bld-class-line: #2c4b63; --map-bld-hover: #24425a;
    --map-label: #b7c0c9; --map-label-class: #cfe6f5; --map-label-place: #8fb894; --map-halo: rgba(19, 23, 27, 0.92);
    --map-route: var(--accent); --map-route-case: #0d1013;
  }
}

/* ---------- frame: the map beside a 360 px panel at 1024 and up, the panel under the map below that ---------- */
main:has(> .cm) { max-width: none; }
.cm .page-head { margin-bottom: var(--s-6); }
.cm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); align-items: start; }
.cm-mapcol { position: sticky; top: var(--s-4); min-width: 0; }
.cm-frame { position: relative; height: clamp(480px, calc(100vh - 168px), 1100px); height: clamp(480px, calc(100dvh - 168px), 1100px);
  border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; background: var(--map-land); }
.cm-side { min-width: 0; }
@media (max-width: 1199px) { .cm-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 899px) {
  .cm-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .cm-mapcol { position: relative; top: auto; }
  .cm-frame { height: clamp(340px, 62vh, 620px); height: clamp(340px, 62dvh, 620px); }
}
@media (max-width: 599px) {
  main:has(> .cm) { padding-left: var(--s-4); padding-right: var(--s-4); }
  .cm .page-head { margin-bottom: var(--s-4); }
  .cm .page-sub { display: none; }
}

/* ---------- the map surface ---------- */
.cm-map { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; outline: none;
  -webkit-user-select: none; user-select: none; }
.cm-map.is-drag { cursor: grabbing; }
.cm-map:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.cm-svg { position: absolute; inset: 0; display: block; }
.cm-svg path { vector-effect: non-scaling-stroke; }
.cm-land { fill: var(--map-land); }
.cm-campus { fill: var(--map-campus); }
.cm-green { fill: var(--map-green); }
.cm-water { fill: var(--map-water); }
.cm-parking { fill: var(--map-parking); }
.cm-plaza { fill: var(--map-plaza); }
.cm-ct { fill: none; stroke: var(--map-contour); stroke-width: 1px; }
.cm-ct-i { stroke: var(--map-contour-i); stroke-width: 1.2px; }
.cm-rd-case, .cm-rd, .cm-rd2-case, .cm-rd2, .cm-path, .cm-steps { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* road and path widths follow the zoom (--k is px per metre): real widths up close, a floor far out */
.cm-rd-case { stroke: var(--map-road-case); stroke-width: max(3px, calc(var(--k) * 13px + 2px)); }
.cm-rd { stroke: var(--map-road); stroke-width: max(2px, calc(var(--k) * 13px)); }
.cm-rd2-case { stroke: var(--map-road-case); stroke-width: max(2px, calc(var(--k) * 7px + 2px)); }
.cm-rd2 { stroke: var(--map-road); stroke-width: max(1.2px, calc(var(--k) * 7px)); }
.cm-path { stroke: var(--map-path); stroke-width: max(0.8px, min(calc(var(--k) * 3px), 7px)); }
.cm-steps { stroke: var(--map-steps); stroke-width: max(1px, min(calc(var(--k) * 3px), 7px)); stroke-dasharray: 1.5 2; }
.cm-boff { fill: var(--map-boff); stroke: var(--map-boff-line); stroke-width: 0.5px; }
.cm-bcampus { fill: var(--map-bld); stroke: var(--map-bld-line); stroke-width: 0.6px; }
.cm-b { fill: var(--map-bld); stroke: var(--map-bld-line); stroke-width: 0.75px; cursor: pointer; transition: fill var(--dm-rail-ms, 206ms) var(--dm-rail-ease, linear); }
.cm-b-class { fill: var(--map-bld-class); stroke: var(--map-bld-class-line); }
.cm-b:hover { fill: var(--map-bld-hover); }
.cm-b.is-stop { fill: var(--map-bld-hover); stroke: var(--map-bld-class-line); stroke-width: 1px; }
.cm-b.is-sel { fill: var(--accent-subtle); stroke: var(--accent); stroke-width: 2px; }
.cm-map[data-zoom="far"] .cm-path { stroke-width: 0.7px; }
.cm-map[data-zoom="far"] .cm-steps, .cm-map[data-zoom="far"] .cm-ct { display: none; }

/* the walking route: an accent line on a casing, the tight leg in the warning hue */
.cm-rt-case, .cm-rt { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cm-rt-case { stroke: var(--map-route-case); stroke-width: 6px; }
.cm-rt { stroke: var(--map-route); stroke-width: 3px; }
.cm-rt.is-tight { stroke: var(--warning); }
/* a door mark where a route meets a building (owner walk 6 W17): HTML over the map, centred on the route's end point */
.cm-door { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--map-route), 0 0 0 1px var(--map-route-case); }

/* labels: HTML over the map, never scaled, with a halo in the ground colour */
.cm-labels, .cm-pins { position: absolute; inset: 0; pointer-events: none; }
.cm-lb { position: absolute; left: 0; top: 0; max-width: 150px; font: 500 12px/14px var(--font-ui); color: var(--map-label);
  text-align: center; white-space: normal; text-wrap: balance;
  text-shadow: 0 0 2px var(--map-halo), 0 0 2px var(--map-halo), 0 0 3px var(--map-halo), 0 0 4px var(--map-halo); }
.cm-lb.is-class { font-weight: 600; color: var(--map-label-class); }
.cm-lb.is-sel { font-weight: 700; color: var(--accent); }
.cm-lb-place { font: italic 500 12px/14px var(--font-ui); color: var(--map-label-place); }
.cm-lb-area { font: 600 11px/14px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cm-lb.is-off, .cm-chip.is-off { visibility: hidden; }

/* numbered pins: the class's Plan hue, the number in white, a ring in the surface colour; the tip sits on the building */
.cm-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; min-height: 0; padding: 0; margin: 0; border: 0; background: none;
  pointer-events: auto; cursor: pointer; }
.cm-pin-in { position: absolute; left: -14px; bottom: 4px; min-width: 28px; height: 28px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: var(--h, var(--accent)); color: #fff; font: 700 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 0 0 2px var(--surface), 0 2px 6px rgba(15, 23, 32, 0.25); transform-origin: 14px 100%; }
.cm-pin-in::after { content: ''; position: absolute; left: 10px; bottom: -5px; width: 8px; height: 8px; background: var(--h, var(--accent)); transform: rotate(45deg); border-radius: 0 0 2px 0; z-index: -1; }
:root[data-theme="dark"] .cm-pin-in { color: #0b1114; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cm-pin-in { color: #0b1114; } }
.cm-pin:focus-visible { outline: none; }
.cm-pin:focus-visible .cm-pin-in { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }
.cm-chip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px;
  border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: 600 12px/1 var(--font-ui); font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(15, 23, 32, 0.18), 0 0 0 1px var(--line); white-space: nowrap; }
.cm-chip.is-tight { background: var(--warning-subtle); color: var(--warning); }
.cm-chip .icon { width: 13px; height: 13px; }

/* ---------- controls over the map ---------- */
.cm-search { position: absolute; left: var(--s-3); top: var(--s-3); width: min(320px, calc(100% - 72px)); z-index: 3; }
.cm-search input { width: 100%; height: 36px; padding: 0 var(--s-3) 0 34px; border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink); font: var(--t-control); box-shadow: 0 1px 3px rgba(15, 23, 32, 0.08); }
.cm-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cm-search-ic { position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.cm-search-ic .icon { width: 16px; height: 16px; }
.cm-results { position: absolute; left: 0; right: 0; top: 40px; margin: 0; padding: var(--s-1); list-style: none; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--shadow-overlay); }
.cm-results [role="option"] { display: flex; flex-direction: column; padding: 6px var(--s-2); border-radius: var(--r-control); cursor: pointer; }
.cm-results [role="option"][aria-selected="true"], .cm-results [role="option"]:hover { background: var(--surface-2); }
.cm-r-name { font: var(--t-control); font-weight: 600; color: var(--ink); }
.cm-r-kind { font: var(--t-label); font-weight: 400; color: var(--muted); }
.cm-results .cm-r-none { font: var(--t-meta); color: var(--muted); cursor: default; }
.cm-ctrls { position: absolute; right: var(--s-3); top: var(--s-3); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); z-index: 2; }
.cm-zoom { display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface);
  box-shadow: 0 1px 3px rgba(15, 23, 32, 0.08); overflow: hidden; }
.cm-ctl { width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 0; background: var(--surface); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; }
.cm-ctl:hover { background: var(--surface-2); color: var(--ink); }
.cm-ctl .icon { width: 18px; height: 18px; }
.cm-zoom .cm-ctl + .cm-ctl { border-top: 1px solid var(--line); }
.cm-ctl:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cm-reset { width: auto; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-control); font: var(--t-control);
  box-shadow: 0 1px 3px rgba(15, 23, 32, 0.08); }
.cm-attr { position: absolute; right: 0; bottom: 0; margin: 0; padding: 2px 6px; border-top-left-radius: var(--r-control);
  background: var(--map-halo); font: 400 11px/14px var(--font-ui); z-index: 2; }
.cm-attr a { color: var(--muted); }

/* ---------- the panel: building card, the day, legs ---------- */
.cm-side h2 { margin: 0; font: var(--t-h2); color: var(--ink); }
.cm-h3 { margin: var(--s-4) 0 var(--s-2); font: var(--t-label); color: var(--muted); }
.cm-note { margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--muted); }
.cm-miss { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control); background: var(--warning-subtle); color: var(--ink); font: var(--t-meta); }
.cm-miss .icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--warning); }
.cm-card { margin: 0 0 var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.cm-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.cm-card-head h2:focus { outline: none; }
.cm-card-head h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.cm-card-sub { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); }
.cm-clist { margin: 0; padding: 0; list-style: none; }
.cm-cls { display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: auto; min-height: 44px; padding: 6px var(--s-2); margin: 0 calc(-1 * var(--s-2));
  border: 0; border-radius: var(--r-control); background: none; text-align: left; box-sizing: content-box; }
.cm-cls:hover { background: var(--surface-2); }
.cm-cls-code { font: var(--t-control); font-weight: 600; color: var(--ink); }
.cm-cls-sub { font: var(--t-label); font-weight: 400; color: var(--muted); }
/* W35: the one count line under the plan rows; its number opens Discover with the building filter */
.cm-count { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: var(--s-3) 0 0; font: var(--t-body); color: var(--ink); }
.cm-count-n { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0 -6px 0 -8px;
  padding: 0 8px; border-radius: var(--r-control); color: var(--accent); font-weight: 600; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.cm-count-n:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.cm-count-n:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cm-day { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.cm-day-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.cm-days > button { position: relative; padding: 0 9px; }
.cm-today { position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.cm-sum { margin: var(--s-3) 0 var(--s-3); font: var(--t-meta); color: var(--ink-2); }
.cm-empty { margin-top: var(--s-3); }
.cm-empty p { margin: 0 0 var(--s-3); font: var(--t-body); color: var(--ink-2); }
.cm-legs { margin: 0; padding: 0; list-style: none; }
.cm-stop { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 var(--s-2); padding: var(--s-2) 0; }
.cm-stop-no { display: flex; justify-content: center; padding-top: 1px; }
.cm-no { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--h, var(--accent)); color: #fff; font: 700 12px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .cm-no { color: #0b1114; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cm-no { color: #0b1114; } }
.cm-no.is-none { background: var(--surface-2); color: var(--muted); }
.cm-no.is-none .icon { width: 14px; height: 14px; }
.cm-stop-t { display: flex; flex-direction: column; min-width: 0; }
.cm-stop-when { font: var(--t-label); color: var(--muted); }
.cm-stop-main { align-self: flex-start; height: auto; min-height: 0; padding: 0; border: 0; background: none; font: var(--t-item); color: var(--ink); text-align: left; }
.cm-stop-main:hover { color: var(--accent); background: none; text-decoration: underline; }
.cm-stop-sec { font-weight: 400; color: var(--muted); }
.cm-stop-where { font: var(--t-meta); color: var(--ink-2); overflow-wrap: anywhere; }
.cm-link { height: auto; min-height: 0; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-align: left;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 2px; }
.cm-link:hover { background: none; color: var(--accent-hover); text-decoration-color: currentColor; }
/* a walk between two stops: an indented row on the dotted spine that joins the pins */
.cm-leg { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 var(--s-2); padding: var(--s-1) 0; }
.cm-leg::before { content: ''; position: absolute; left: 17px; top: 0; bottom: 0; border-left: 2px dotted var(--line-strong); }
.cm-leg-ic { position: relative; display: flex; justify-content: center; align-items: center; }
.cm-leg-ic .icon { width: 16px; height: 16px; padding: 2px; color: var(--muted); background: var(--surface); box-sizing: content-box; }
.cm-leg-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 2px 0; }
.cm-leg-main { font: var(--t-control); font-weight: 600; color: var(--ink-2); }
.cm-leg-sub { font: var(--t-label); font-weight: 400; color: var(--muted); }
.cm-leg.is-tight .cm-leg-main, .cm-leg.is-tight .cm-leg-ic .icon { color: var(--warning); }
.cm-leg.is-tight::before { border-left-color: var(--warning); }
.cm-warn { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.cm-warn .icon { width: 13px; height: 13px; }
.cm-off { margin: 0; padding: 0; list-style: none; }
.cm-off li { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px solid var(--line); }
.cm-off li:first-child { border-top: 0; }
.cm-off-code { font: var(--t-control); font-weight: 600; color: var(--ink-2); }
.cm-off-why { font: var(--t-label); font-weight: 400; color: var(--muted); }
.cm-src { margin: var(--s-4) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }

/* the class page and Plan link a room to the map */
.cp-room, .pd-room { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.cp-room:hover, .pd-room:hover { color: var(--accent); text-decoration-color: currentColor; }

/* Shared map surfaces: Plan uses the full component; class locations use its basemap. */
/* Plan's view switch is a .seg (dibs.css): its links take the segment box and selected look from there, so no
   padding or selected rule here (owner walk 2 W1: this padding pushed the labels off the pill's centre). */
.cm-plan-views { display: inline-flex; margin-bottom: var(--s-4); }
.cm-embedded .cm-frame { height: 520px; }
.cm-origin-control { margin: var(--s-4) 0; }
.cm-origin-control label { display: block; margin-bottom: var(--s-2); font: var(--t-label); }
.cm-origin-control select { max-width: 100%; width: 100%; }
.cm-mini { margin: var(--s-5, 20px) 0; }
.cm-mini figure { margin: 0 0 var(--s-3); }
.cm-mini-map { position: relative; display: block; height: 210px; border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; background: var(--map-land); }
.cm-mini-map .cm-svg { width: 100%; height: 100%; }
.cm-mini figcaption { display: flex; justify-content: space-between; gap: var(--s-3); font: var(--t-meta); padding-top: var(--s-2); }
@media (max-width: 599px) { .cm-embedded .cm-frame { height: 360px; } }