/* ── MRT proximity feature ───────── */
/* Inline line under the year label in popups + detail panel header. */
.popup-mrt {
color: var(--accent-fg);
font-weight: 500;
}
.popup-childcare {
color: var(--accent-fg);
font-weight: 500;
}
.popup-childcare-more {
color: var(--text-muted);
}
/* ── "Did you know?" floating button + card popout ───────── */
.trivia-fab-wrap {
position: fixed;
top: calc(16px + env(safe-area-inset-top));
right: 16px;
z-index: 11;
}
.trivia-fab {
color: var(--accent-fg);
transition: background .15s, color .15s, transform .12s;
}
.trivia-fab:hover { background: var(--surface-2); color: var(--text); }
.trivia-fab[aria-expanded="true"] {
background: var(--surface-2);
color: var(--text);
border-color: var(--accent);
}
.trivia-card {
position: absolute;
top: 52px;
right: 0;
width: 360px;
max-width: calc(100dvw - 32px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
animation: trivia-card-pop .18s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes trivia-card-pop {
from { opacity: 0; transform: translateY(-6px) scale(.98); }
to { opacity: 1; transform: none; }
}
.trivia-card-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px 8px;
}
.trivia-card-head h3 {
font-size: 13px;
font-weight: 600;
color: var(--text-dim);
letter-spacing: .03em;
text-transform: uppercase;
}
.icon-btn-sm {
width: 28px;
height: 28px;
border-radius: 6px;
}
.trivia-card-body {
padding: 4px 16px 14px;
min-height: 120px;
}
.trivia-fact {
display: flex;
flex-direction: column;
gap: 6px;
}
.trivia-fact-label {
font-size: 12px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: .04em;
}
.trivia-fact-value {
font-size: 22px;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.trivia-fact-detail {
font-size: 13px;
color: var(--text-muted);
line-height: 1.4;
}
.trivia-fact.clickable { cursor: pointer; }
.trivia-fact.clickable:hover .trivia-fact-detail { color: var(--accent-fg); }
.trivia-fact.clickable .trivia-fact-detail::after {
content: " ›";
color: var(--accent-fg);
}
.trivia-card-status {
padding: 0 16px 12px;
font-size: 11px;
color: var(--text-muted);
text-align: center;
font-style: italic;
}
.trivia-card-status.info { color: var(--accent-fg); }
.trivia-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-top: 1px solid var(--border-soft);
background: var(--surface-2);
}
.trivia-nav {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--chip);
color: var(--text);
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.trivia-nav:hover:not(:disabled) {
background: var(--chip-active);
color: var(--text);
}
.trivia-nav:disabled { opacity: .35; cursor: not-allowed; }
.trivia-nav-primary {
background: var(--accent);
border-color: var(--accent);
color: var(--text-on-primary);
}
.trivia-nav-primary:hover:not(:disabled) {
background: var(--accent-hov);
border-color: var(--accent-hov);
color: var(--text-on-primary);
}
.trivia-counter {
font-size: 12px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* ── Mobile — modal becomes bottom sheet ───────── */
@media (max-width: 640px) {
/* Topbar shifts right to make room for the search FAB (left) and trivia FAB (right). */
.topbar {
left: 60px;
right: 60px;
transform: none;
max-width: none;
border-radius: 12px;
}
#intro-hero { padding: 0; align-items: flex-end; }
.intro-hero-card {
max-width: 100%;
max-height: 94dvh;
padding: 28px 22px 22px;
border-radius: 20px 20px 0 0;
}
.intro-hero-title { font-size: 25px; }
/* Push results cluster to the right edge of the fixed-width topbar so hiding
the X button doesn't leave dead space on the right. */
.results-cluster { margin-left: auto; }
.search-fab { top: calc(16px + env(safe-area-inset-top)); left: 8px; }
.trivia-fab-wrap { right: 8px; }
/* When expanded on mobile, the FAB stretches edge-to-edge above the topbar. */
.search-fab.open { right: 8px; }
.search-fab.open .search-field { width: auto; }
.search-fab.open #search-results { width: auto; left: 0; right: 0; }
.scrim { padding: 0; align-items: flex-end; }
.modal {
max-width: 100%;
max-height: 92dvh;
border-radius: 16px 16px 0 0;
}
#detail-panel, #town-panel, #school-detail-panel {
width: 100%;
height: 90dvh;
top: auto;
bottom: 0;
transform: translateY(100%);
border-radius: 16px 16px 0 0;
border-left: none;
border-top: 1px solid var(--border);
}
#detail-panel.open, #town-panel.open, #school-detail-panel.open { transform: translateY(0); }
#list-panel {
width: 100%;
height: 90dvh;
top: auto;
bottom: 0;
transform: translateY(100%);
border-radius: 16px 16px 0 0;
}
#list-panel.open { transform: translateY(0); }
/* Tighter sticky header on mobile — every pixel counts in the 90dvh bottom sheet. */
#detail-header { padding: 7px 12px 6px; }
#detail-block-name { font-size: 16px; }
#detail-close { min-width: 40px; min-height: 40px; }
.detail-jump-btn { display: none; }
#detail-mode-toggle { margin: 5px 12px 4px; }
.detail-mode-btn { min-height: 36px; font-size: 12px; }
/* Mobile: ≥44px touch targets on the pager pills per project rule. */
.pager-btn { min-height: 44px; padding: 10px 18px; font-size: 13px; }
.pager-label { font-size: 13px; }
/* iOS Safari auto-zooms the page when a focused text control's computed
font-size is under 16px, and pinch-out afterwards fights the map. Cover
every keyboard- or picker-focusable control generically so new controls
inherit the fix without remembering it. Deny-list the types that never
zoom (no keyboard/picker) rather than allow-listing text-ish ones, so an
untyped or a future type="tel" is covered by default. !important
so no per-control font-size (even an ID selector) can undercut it. */
input:not([type="range"], [type="checkbox"], [type="radio"]),
textarea,
select {
font-size: 16px !important;
}
.popup-open-details { min-height: 44px; }
.leaflet-popup-content-wrapper {
max-width: calc(100dvw - 72px);
}
.leaflet-popup-content {
max-width: calc(100dvw - 96px);
}
.school-popup {
max-width: calc(100dvw - 96px);
}
.popup-sm,
.popup-md,
.popup-lg {
min-width: 0;
max-width: calc(100dvw - 96px);
}
/* Collapsed circle button needs to be tappable; inline one inherits row height from toggle btns */
.map-legend.collapsed .legend-collapse-btn { min-height: 36px; font-size: 14px; }
/* 36px is still comfortably tappable for this small legend widget. */
.legend-btn { min-height: 36px; }
/* Trivia: card pops out from below the FAB; widen toward the left edge so it doesn't
get clipped against the right viewport edge on narrow screens. */
.trivia-card {
width: calc(100dvw - 24px);
right: 0;
}
}
/* Privacy dialog — native