/* Map pages (map.html, map-lite.html): the site's design layer over their inline styles.
   scripts/normalize_static_pages.mjs adds class="map-page" to <body> and links this file.
   Same tokens as site-pages.css (DESIGN.md): fog-blue background, white panels with
   hairline borders, one indigo accent, no glass, no gradients. Dark mode follows the
   site toggle (.dark on <html>), not prefers-color-scheme as the inline styles did;
   every rule here outranks those (body.map-page adds specificity). */
body.map-page {
    --page-bg: #f1f4f8;
    --page-surface: #ffffff;
    --page-soft: #edf1f7;
    --page-ink: #17243b;
    --page-text: #34435a;
    --page-muted: #52627a;
    --page-border: #d4dce8;
    --page-accent: #4f46e5;
    --page-accent-soft: #eef2ff;
    --page-action: #4f46e5;
    --page-action-hover: #4338ca;
    /* map-lite's own variables */
    --text: var(--page-ink);
    --muted: var(--page-muted);
    --border: var(--page-border);
    background: var(--page-bg);
    color: var(--page-ink);
}
.dark body.map-page {
    --page-bg: #10141c;
    --page-surface: #181e28;
    --page-soft: #202734;
    --page-ink: #e7ecf3;
    --page-text: #c6cfdb;
    --page-muted: #a2adbd;
    --page-border: #303947;
    --page-accent: #aaa5ff;
    --page-accent-soft: #2b2b4d;
}
/* The canvas below a one-screen-tall body is the root's: the same colour as body.map-page's
   --page-bg, written out because the token lives on body (on <html>, /map's styles.css
   would answer with its own warm --page-bg) */
html:has(body.map-page) { background: #f1f4f8; }
.dark:has(body.map-page) { background: #10141c; }

/* Titles, tools and search */
body.map-page .map-page-title,
body.map-page .current-time,
body.map-page .current-time .twt-icon,
body.map-page .usage-title,
body.map-page .popup-title,
body.map-page .popup-time { color: var(--page-ink); }
body.map-page .search-input {
    border: 1px solid var(--page-border); border-radius: 8px;
    background: var(--page-surface); color: var(--page-ink);
}
body.map-page .search-input:focus { border-color: var(--page-accent); background: var(--page-surface); box-shadow: 0 0 0 3px var(--page-accent-soft); }
body.map-page .search-icon,
body.map-page .btn-reset .twt-icon { color: var(--page-muted); }
body.map-page .btn-reset,
body.map-page .i18n-footer .lang-btn {
    border: 1px solid var(--page-border); border-radius: 8px; background: var(--page-surface); color: var(--page-text);
}
body.map-page .btn-reset:hover { background: var(--page-soft); }
body.map-page .search-suggestions {
    background: var(--page-surface); border: 1px solid var(--page-border); border-top: 0;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
}
body.map-page .suggestion-item { border-bottom-color: var(--page-soft); }
body.map-page .suggestion-item:hover { background: var(--page-soft); }
body.map-page .suggestion-item.active { background: var(--page-accent-soft); }
body.map-page .suggestion-name,
body.map-page .popup-value,
body.map-page .status-value { color: var(--page-text); }
body.map-page .suggestion-tz,
body.map-page .popup-label,
body.map-page .loading-text,
body.map-page .info-panel,
body.map-page .legend-hint,
body.map-page .legend-frac-hint,
body.map-page .i18n-footer,
body.map-page .dst-inactive { color: var(--page-muted); }
body.map-page .dst-active { color: #d97706; }
body.map-page .status-success { color: #059669; }
body.map-page .status-error { color: #dc2626; }

/* Map frame and overlays: solid panels instead of glass */
body.map-page .map-container,
body.map-page .mapbox { border: 1px solid var(--page-border); border-radius: 12px; overflow: hidden; }
body.map-page .map-top-center,
body.map-page .map-status,
body.map-page .panel {
    background: var(--page-surface); color: var(--page-text);
    border: 1px solid var(--page-border); border-radius: 8px;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
}
body.map-page .icon-btn {
    background: var(--page-surface); color: var(--page-text);
    border: 1px solid var(--page-border); box-shadow: none;
}
body.map-page .icon-btn:hover { background: var(--page-soft); }
body.map-page .loading-overlay { background: color-mix(in srgb, var(--page-bg) 92%, transparent); }
body.map-page .loading-spinner { border-color: var(--page-border); border-top-color: var(--page-muted); }
body.map-page .maplibregl-popup-content {
    background: var(--page-surface); color: var(--page-ink);
    border: 1px solid var(--page-border); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
}
body.map-page .maplibregl-popup-tip { border-top-color: var(--page-surface); border-bottom-color: var(--page-surface); }
body.map-page .maplibregl-popup-close-button { background: var(--page-surface); color: var(--page-text); border-color: var(--page-border); box-shadow: none; }
body.map-page .maplibregl-popup-close-button:hover { background: var(--page-soft); }
body.map-page .popup-time { background: var(--page-soft); }
body.map-page .popup-button { background: var(--page-action); color: #fff; }
body.map-page .popup-button:hover { background: var(--page-action-hover); }

/* Legend */
body.map-page .timezone-legend,
body.map-page .legend { background: var(--page-surface); border-top: 1px solid var(--page-border); }
body.map-page .timezone-number { color: var(--page-muted); }
body.map-page .timezone-block:hover .timezone-color-block { outline-color: var(--page-ink); box-shadow: none; }
body.map-page .timezone-block.active .timezone-color-block { outline-color: var(--page-accent); box-shadow: none; }
body.map-page .timezone-block:hover .timezone-number { background: var(--page-ink); color: var(--page-surface); }
body.map-page .timezone-block.active .timezone-number { background: var(--page-accent); color: var(--page-surface); }
body.map-page .chip { border-color: var(--page-border); background: var(--page-surface); color: var(--page-text); }
body.map-page .chip .lbl,
body.map-page .hint { color: var(--page-muted); }

/* Usage and reference content */
body.map-page .usage-box,
body.map-page .map-reference-card,
body.map-page .lite-reference article {
    background: var(--page-surface); color: var(--page-text);
    border: 1px solid var(--page-border); border-radius: 12px;
}
body.map-page .usage-box ul,
body.map-page #usageList li,
body.map-page .lite-reference p { color: var(--page-text); }
body.map-page .map-reference-card h2 { color: var(--page-ink); }
body.map-page .lang-toggle { color: var(--page-accent); }
body.map-page .map-reference-links a,
body.map-page .lite-links a {
    background: var(--page-soft); color: var(--page-accent);
    border: 1px solid var(--page-border); border-radius: 8px;
}
body.map-page .map-reference-links a:hover,
body.map-page .lite-links a:hover { border-color: var(--page-accent); background: var(--page-accent-soft); }
body.map-page .map-reference-links small,
body.map-page .lite-links small { color: var(--page-muted); }

/* FAQ: the page's FAQPage questions as closed disclosures (the home page's pattern, the
   usage box's shape): 52px question rows, Lucide chevron, answers open in place.
   Width and margins come from each page (.page-faq on /map, .lite-faq on /map-lite). */
body.map-page .page-faq {
    box-sizing: border-box; padding: 4px 18px;
    background: var(--page-surface); color: var(--page-text);
    border: 1px solid var(--page-border); border-radius: 12px;
}
body.map-page .page-faq h2 { margin: 14px 0 6px; font-size: 20px; line-height: 1.25; font-weight: 600; color: var(--page-ink); }
body.map-page .page-faq details { border-top: 1px solid var(--page-border); }
body.map-page .page-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    box-sizing: border-box; min-height: 52px; padding: 10px 0;
    font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--page-ink);
    cursor: pointer; list-style: none;
}
body.map-page .page-faq summary::-webkit-details-marker { display: none; }
body.map-page .page-faq summary .twt-icon { flex-shrink: 0; color: var(--page-muted); transition: transform 150ms ease-out; }
body.map-page .page-faq details[open] summary .twt-icon { transform: rotate(180deg); }
body.map-page .page-faq summary:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 2px; border-radius: 8px; }
body.map-page .page-faq details p { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--page-text); }
@media (prefers-reduced-motion: reduce) { body.map-page .page-faq summary .twt-icon { transition: none; } }
body.map-page header { border-bottom-color: var(--page-border); }

/* map-lite: the map frame and its inline-styled data buttons */
body.map-page .mapbox { background: var(--page-surface); }
body.map-page button[style*="background:#fff"] { background: var(--page-surface) !important; color: var(--page-text); }
body.map-page button[style*="background:#fff"]:hover { background: var(--page-soft) !important; }