/* Static pages (tools, guides, conversion routes, policy pages): the home page's
   workbench surface. scripts/normalize_static_pages.mjs adds class="site-page" to their
   <body> and links this file on every build, whichever generator produced the page.
   Tokens match src/css/home.css: solid fog-blue background (DESIGN.md: no gradients or
   decorative animation), white panels with hairline borders, ink text, one indigo accent. */
body.site-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-hover: #4338ca;
    --page-accent-soft: #eef2ff;
    /* Solid buttons: indigo with white text in both themes, as on the home page
       (#btnNow); the light dark-mode accent is for text, links and focus only */
    --page-action: #4f46e5;
    --page-action-hover: #4338ca;
    --page-on-action: #ffffff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    min-height: 100vh;
    background: var(--page-bg);
    color: var(--page-ink);
    box-sizing: border-box;
}
.dark body.site-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-hover: #c4c1ff;
    --page-accent-soft: #2b2b4d;
}

/* Panels, borders and text mapped from the legacy Tailwind utilities to the tokens */
.site-page main .bg-white { background-color: var(--page-surface); }
.site-page main :is(.bg-gray-50, .bg-gray-100) { background-color: var(--page-soft); }
.site-page main :is(.border-gray-100, .border-gray-200, .border-gray-300) { border-color: var(--page-border); }
.site-page main :is(.text-gray-900, .text-gray-800) { color: var(--page-ink); }
.site-page main .text-gray-700 { color: var(--page-text); }
.site-page main :is(.text-gray-600, .text-gray-500) { color: var(--page-muted); }
.site-page main .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03); }
/* One accent colour (DESIGN.md): the old blue / teal / cyan / purple accents collapse to indigo */
.site-page main :is(.text-indigo-600, .text-indigo-700, .text-blue-600, .text-blue-700, .text-teal-600, .text-teal-700, .text-cyan-600, .text-cyan-700, .text-purple-600, .text-purple-700) { color: var(--page-accent); }
.site-page main a:is(.hover\:border-blue-300, .hover\:border-teal-300, .hover\:border-indigo-300, .hover\:border-cyan-300):hover { border-color: var(--page-accent); }
.site-page main a:is(.hover\:bg-gray-50, .hover\:bg-gray-100):hover { background-color: var(--page-soft); }
.site-page main a:not([class]) { color: var(--page-accent); }
.site-page main a:not([class]):hover { color: var(--page-accent-hover); }

/* Dark variants of the same utilities */
.dark .site-page main :is(.dark\:bg-gray-800, .dark\:bg-gray-900) { background-color: var(--page-surface); }
.dark .site-page main .dark\:bg-gray-700 { background-color: var(--page-soft); }
.dark .site-page main :is(.dark\:border-gray-600, .dark\:border-gray-700, .dark\:border-gray-800) { border-color: var(--page-border); }
.dark .site-page main :is(.dark\:text-white, .dark\:text-gray-100, .dark\:text-gray-200) { color: var(--page-ink); }
.dark .site-page main .dark\:text-gray-300 { color: var(--page-text); }
.dark .site-page main .dark\:text-gray-400 { color: var(--page-muted); }
.dark .site-page main :is(.dark\:text-indigo-300, .dark\:text-indigo-400, .dark\:text-blue-300, .dark\:text-blue-400, .dark\:text-teal-300, .dark\:text-teal-400, .dark\:text-cyan-300, .dark\:text-cyan-400, .dark\:text-purple-300, .dark\:text-purple-400) { color: var(--page-accent); }
.dark .site-page main a.dark\:hover\:bg-gray-700:hover { background-color: var(--page-soft); }

/* Title block: left-aligned like the home page; the oversized decorative hero icon goes */
.site-page main > :is(header, div).text-center:first-child { text-align: left; }
.site-page main > :is(header, div).text-center:first-child > p { margin-left: 0; margin-right: 0; }
.site-page main h1 { letter-spacing: -0.02em; color: var(--page-ink); }
.site-page main .twt-icon:is(.text-5xl, .text-6xl) { display: none; }

/* FAQ (/cities): the page's FAQPage questions as closed disclosures, as on the home
   page and the map pages: 52px question rows, Lucide chevron, answers open in place */
.site-page .page-faq details { border-top: 1px solid var(--page-border); }
.site-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;
    line-height: 1.4; font-weight: 600; color: var(--page-ink);
    cursor: pointer; list-style: none;
}
.site-page .page-faq summary::-webkit-details-marker { display: none; }
.site-page .page-faq summary .twt-icon { flex-shrink: 0; color: var(--page-muted); transition: transform 150ms ease-out; }
.site-page .page-faq details[open] summary .twt-icon { transform: rotate(180deg); }
.site-page .page-faq summary:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 2px; border-radius: 4px; }
.site-page .page-faq details p { margin: 0 0 16px; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .site-page .page-faq summary .twt-icon { transition: none; } }

/* Embedded mini tools (tools-mini.js) render inside .aurora-solid-card: a home-page panel */
.site-page .aurora-solid-card {
    background: var(--page-surface);
    border: 1px solid var(--page-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
}
.site-page .aurora-solid-card:hover { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03); transform: none; }