/* ========================================================= SITE MAP — Insights full-page view (#site-map-page-view) ========================================================= Everything here is scoped under #site-map-page-view, so nothing leaks into chat or the other views. Map colors are view-local tokens (same reasoning as Campus Health's --ch-* band colors): the choropleth needs six steps of one warm hue, brightest = most people, which none of the :root tokens provide. Loaded from index.html's as its own file. */ #site-map-page-view { --sm-land: #12110f; --sm-zip-edge: #050505; --sm-water: #15222a; --sm-water-edge: #1f3440; --sm-road: #3b362d; --sm-road-casing: #050505; --sm-road-major: #9b8150; --sm-c1: #2b2219; --sm-c2: #4e3621; --sm-c3: #7e5026; --sm-c4: #b3702d; --sm-c5: #dc9b47; --sm-c6: #f4d08a; --sm-pin: #6fd3d8; --sm-pin-soft: rgba(111, 211, 216, 0.14); --sm-cand: #ff8f6b; --sm-good: var(--success); --sm-bad: var(--danger); --sm-halo: rgba(5, 5, 5, 0.88); --sm-card: var(--bg-elevated); } #site-map-page-view .sm-wrap { display: grid; gap: 16px; padding: 4px 16px 24px; max-width: 1400px; } #site-map-page-view .sm-lede { margin: 0; color: var(--ink-soft); max-width: 72ch; font-size: 15px; line-height: 1.5; } #site-map-page-view .sm-lede b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } #site-map-page-view .sm-findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } #site-map-page-view .sm-find { background: var(--sm-card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px 10px; display: grid; gap: 2px; align-content: start; min-width: 0; } #site-map-page-view .sm-find .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--nav-label); font-weight: 600; } #site-map-page-view .sm-find .big { font-size: 22px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); } /* One line per card; the full sentence is the card's hover text (title). */ #site-map-page-view .sm-find p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Phones: the four cards in two columns. The line may wrap here, since a touch screen has no hover to reveal the full sentence. */ @media (max-width: 640px) { #site-map-page-view .sm-findings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #site-map-page-view .sm-find { padding: 9px 11px 10px; } #site-map-page-view .sm-find .k { letter-spacing: 0.08em; } #site-map-page-view .sm-find p { white-space: normal; } } #site-map-page-view .sm-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } #site-map-page-view .sm-glabel { font-size: 11px; color: var(--nav-label); text-transform: uppercase; letter-spacing: 0.14em; margin-right: 6px; font-weight: 600; } #site-map-page-view button.sm-chip { font: inherit; font-size: 13.5px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); padding: 6px 12px; border-radius: 999px; cursor: pointer; font-variant-numeric: tabular-nums; } #site-map-page-view button.sm-chip:hover { color: var(--ink); border-color: var(--line-strong); } #site-map-page-view button.sm-chip[aria-pressed="true"] { background: rgba(var(--accent-rgb), 0.14); border-color: rgba(var(--accent-rgb), 0.45); color: var(--ink); } #site-map-page-view button.sm-chip .n { opacity: 0.6; margin-left: 5px; font-size: 12.5px; } #site-map-page-view button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #site-map-page-view .sm-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; } @container sitemap-layout (max-width: 980px) { #site-map-page-view .sm-main { grid-template-columns: 1fr; } } #site-map-page-view .fullpage-view-scroll { container-type: inline-size; container-name: sitemap-layout; } #site-map-page-view .sm-mapbox { position: relative; background: var(--sm-land); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; aspect-ratio: 5 / 4; max-width: 100%; } @media (max-width: 640px) { #site-map-page-view .sm-mapbox { aspect-ratio: 3 / 4; } #site-map-page-view .sm-legend .sm-key { display: none; } } #site-map-page-view .sm-mapbox > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; } /* one finger scrolls the page; pinch is handled in JS */ #site-map-page-view .sm-mapbox > svg:active { cursor: grabbing; } #site-map-page-view .sm-mapbox.placing > svg { cursor: crosshair; } #site-map-page-view .zip { stroke: var(--sm-zip-edge); stroke-width: 0.8; vector-effect: non-scaling-stroke; } #site-map-page-view .zip:hover, #site-map-page-view .zip.hl { stroke: var(--ink); stroke-width: 2; } #site-map-page-view .water { fill: var(--sm-water); stroke: var(--sm-water-edge); stroke-width: 0.6; vector-effect: non-scaling-stroke; } #site-map-page-view .rd-c { fill: none; stroke: var(--sm-road-casing); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } #site-map-page-view .rd { fill: none; stroke: var(--sm-road); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } #site-map-page-view .rd.maj { stroke: var(--sm-road-major); } #site-map-page-view .ring { fill: none; stroke: var(--sm-pin); stroke-dasharray: 5 5; stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0.75; } #site-map-page-view .ringlab { font: 600 11px var(--sans); fill: var(--sm-pin); paint-order: stroke; stroke: var(--sm-halo); stroke-width: 3px; } #site-map-page-view .hood { font: 500 12px var(--sans); fill: var(--ink-soft); paint-order: stroke; stroke: var(--sm-halo); stroke-width: 3.5px; stroke-linejoin: round; letter-spacing: 0.02em; } #site-map-page-view .hood.big { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink); } #site-map-page-view .shield rect { fill: var(--bg); stroke: var(--sm-road-major); stroke-width: 1.2; } #site-map-page-view .shield text { font: 700 10px var(--sans); fill: var(--ink); } #site-map-page-view .pin-halo { fill: var(--sm-pin-soft); stroke: var(--sm-pin); stroke-width: 1.5; } #site-map-page-view .pin-dot { fill: var(--sm-pin); stroke: var(--bg); stroke-width: 3; } #site-map-page-view .pin-lab rect { fill: var(--sm-pin); } #site-map-page-view .pin-lab text { font: 700 13px var(--sans); fill: #06282a; } @keyframes sm-pulse { 0% { r: 14; opacity: 0.9; } 100% { r: 34; opacity: 0; } } #site-map-page-view .pin-pulse { fill: none; stroke: var(--sm-pin); stroke-width: 2; animation: sm-pulse 2.4s ease-out infinite; } @media (prefers-reduced-motion: reduce) { #site-map-page-view .pin-pulse { animation: none; opacity: 0; } } #site-map-page-view .center-mark path { fill: var(--bg); stroke: var(--ink); stroke-width: 2.5; } #site-map-page-view .center-mark text { font: 700 12px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--sm-halo); stroke-width: 4px; stroke-linejoin: round; } #site-map-page-view .cand circle { fill: var(--sm-cand); stroke: var(--bg); stroke-width: 3; } #site-map-page-view .cand text { font: 700 13px var(--sans); fill: #2a0f06; } #site-map-page-view .cand-ring { fill: rgba(255, 143, 107, 0.06); stroke: var(--sm-cand); stroke-opacity: 0.9; stroke-width: 2.5; vector-effect: non-scaling-stroke; } #site-map-page-view .sm-zoom { position: absolute; right: 12px; top: 12px; display: grid; gap: 4px; } #site-map-page-view .sm-zoom button { font: 600 16px/1 var(--sans); width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); cursor: pointer; } #site-map-page-view .sm-zoom button.wide { font-size: 11px; } /* Zoom hint, top-left. Desktop wording by default; phones get "Pinch to zoom". Hidden while placing a site so it never collides with the banner. */ #site-map-page-view .sm-hint { position: absolute; left: 12px; top: 12px; font-size: 12px; color: var(--ink-soft); background: rgba(5, 5, 5, 0.75); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; pointer-events: none; } #site-map-page-view .sm-hint .touch { display: none; } @media (max-width: 640px) { #site-map-page-view .sm-hint .desk { display: none; } #site-map-page-view .sm-hint .touch { display: inline; } } #site-map-page-view .sm-mapbox.placing .sm-hint { display: none; } #site-map-page-view .sm-banner { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: var(--sm-cand); color: #2a0f06; font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; } #site-map-page-view .sm-legend { position: absolute; left: 12px; bottom: 12px; background: rgba(5, 5, 5, 0.9); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 12px; color: var(--ink-soft); display: grid; gap: 5px; min-width: 170px; } #site-map-page-view .sm-legend .t { font-weight: 600; color: var(--ink); } #site-map-page-view .sm-bins { display: flex; gap: 2px; } #site-map-page-view .sm-bins span { flex: 1; height: 10px; } #site-map-page-view .sm-bins span:first-child { border-radius: 4px 0 0 4px; } #site-map-page-view .sm-bins span:last-child { border-radius: 0 4px 4px 0; } #site-map-page-view .sm-binlab { display: flex; justify-content: space-between; font-size: 11px; font-variant-numeric: tabular-nums; } #site-map-page-view .sm-key { display: flex; align-items: center; gap: 7px; } #site-map-page-view .sm-key i { width: 11px; height: 11px; border-radius: 50%; flex: none; } #site-map-page-view .sm-tip { position: absolute; pointer-events: none; background: var(--bg-elevated); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; font-size: 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); white-space: nowrap; font-variant-numeric: tabular-nums; z-index: 2; } #site-map-page-view .sm-tip .sub { color: var(--ink-soft); font-size: 12px; } #site-map-page-view .sm-side { display: grid; gap: 14px; } #site-map-page-view .sm-card { background: var(--sm-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } #site-map-page-view .sm-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 2px; color: var(--ink); } #site-map-page-view .sm-card .sub { color: var(--ink-soft); font-size: 12.5px; margin: 0 0 10px; line-height: 1.45; } #site-map-page-view .sm-tool { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #site-map-page-view button.sm-act { font: inherit; font-size: 13.5px; font-weight: 600; border: 1px solid var(--sm-cand); background: transparent; color: var(--sm-cand); padding: 7px 13px; border-radius: 8px; cursor: pointer; } #site-map-page-view button.sm-act.on { background: var(--sm-cand); color: #2a0f06; } #site-map-page-view button.sm-ghost { font: inherit; font-size: 13px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); padding: 6px 11px; border-radius: 8px; cursor: pointer; } #site-map-page-view .sm-radius { display: flex; gap: 4px; align-items: center; font-size: 12.5px; color: var(--ink-soft); } #site-map-page-view .sm-cmp { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; } #site-map-page-view .sm-cmp th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nav-label); font-weight: 600; text-align: right; padding: 4px 4px 6px; border-bottom: 1px solid var(--line); } #site-map-page-view .sm-cmp th:first-child, #site-map-page-view .sm-cmp td:first-child { text-align: left; } #site-map-page-view .sm-cmp td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: right; color: var(--ink); } #site-map-page-view .sm-cmp tr:last-child td { border-bottom: 0; } #site-map-page-view .sm-cmp .tag { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 9.5px; font-weight: 700; margin-right: 6px; vertical-align: -6px; } #site-map-page-view .sm-cmp .tag.cur { background: var(--sm-pin); color: #06282a; } #site-map-page-view .sm-cmp .tag.cand { background: var(--sm-cand); color: #2a0f06; } #site-map-page-view .sm-cmp td small { display: block; color: var(--ink-faint); font-size: 11.5px; margin: 2px 0 0 28px; } #site-map-page-view .sm-cmp .better { color: var(--sm-good); } #site-map-page-view .sm-cmp .worse { color: var(--sm-bad); } #site-map-page-view .sm-note { font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 0; line-height: 1.45; } #site-map-page-view .sm-rows { display: grid; gap: 6px; font-variant-numeric: tabular-nums; } #site-map-page-view .sm-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 13.5px; cursor: pointer; border-radius: 6px; margin: -3px -6px; padding: 3px 6px; color: var(--ink); } #site-map-page-view .sm-row:hover, #site-map-page-view .sm-row.hl { background: rgba(var(--accent-rgb), 0.08); } #site-map-page-view .sm-row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #site-map-page-view .sm-row .nm small { color: var(--ink-faint); font-size: 12px; margin-left: 4px; } #site-map-page-view .sm-row .v { font-weight: 600; } #site-map-page-view .sm-row .bar { grid-column: 1 / -1; height: 4px; background: var(--line); border-radius: 3px; overflow: hidden; } #site-map-page-view .sm-row .bar i { display: block; height: 100%; background: var(--sm-c5); border-radius: 3px; } #site-map-page-view .sm-foot { color: var(--ink-faint); font-size: 12.5px; max-width: 100ch; display: grid; gap: 4px; line-height: 1.5; } #site-map-page-view .sm-foot p { margin: 0; }