/* public/shared.css - AutoLytiQs shared page chrome (2026-08-12)
 * Extracted from what was previously identical CSS duplicated inline
 * across index.html/about.html/terms.html/browse.html/rebuild-search.html/
 * results.html/brain/guideTemplate.js - one real place to change this
 * instead of six or seven. Loaded via <link> BEFORE a page's own <style>
 * block, so a page that needs a different accent colour (rebuild-
 * search.html's orange) can override the variables below in its own
 * <style> and have that win, without needing its own copy of the rules
 * that use them.
 */

:root {
    --accent: #00c6ff;
    --accent-bg-soft: rgba(0,198,255,0.05);
    --panel-bg: #02131c;
    --panel-border: rgba(0,198,255,0.12);
}

/* Floating scroll-nav button - scrolls down when near the top of a long
   page and flips to "back to top" once scrolled past 300px (see
   shared.js). Only shown on pages long enough to need it. Deliberately
   always blue, not themed via --accent - it was never re-themed
   per-page even before this extraction (rebuild-search.html's own
   orange theme only ever applied to its hamburger menu), so this keeps
   every page's real, already-live appearance unchanged. */
.scroll-nav-btn {
    position:fixed; bottom:24px; right:24px; z-index:60;
    width:46px; height:46px; border-radius:50%;
    background:linear-gradient(135deg,#00c6ff,#0097b2);
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 16px rgba(0,198,255,0.35);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 0.25s ease, visibility 0.25s ease, transform 0.2s ease;
}
.scroll-nav-btn.visible { opacity:1; visibility:visible; pointer-events:auto; }
.scroll-nav-btn:hover { transform:translateY(-2px); }

/* Hamburger menu toggle - hidden above the mobile breakpoint, where a
   page's own .topbar-nav renders as its plain horizontal row (each
   page still defines .topbar/.topbar-nav's own base layout/colours -
   only the mobile collapse behaviour below is shared, since only 3 real
   pages have a full nav to collapse: index.html/browse.html/
   rebuild-search.html). */
.nav-toggle { display:none; background:none; border:none; color:#9cc7d9; cursor:pointer; padding:6px; flex-shrink:0; }
.nav-toggle svg { width:24px; height:24px; display:block; }
@media (max-width:768px) {
    /* .topbar-inner .topbar-trust (not just .topbar-trust) deliberately -
       real bug found live: each page's own <style> block (which still
       defines .topbar-trust's base "visible" rule) loads AFTER this
       <link>, so at equal specificity the page's un-scoped rule wins the
       cascade regardless of this media query being active, leaving the
       trust badge visible on mobile and pushing the hamburger button
       off-screen (confirmed: 21px real horizontal overflow at 375px).
       One extra ancestor class outranks that rule regardless of source
       order, without needing !important. */
    .topbar-inner .topbar-trust { display:none; }
    .nav-toggle { display:flex; align-items:center; justify-content:center; }
    /* The nav becomes a full-width dropdown panel anchored to .topbar
       (position:sticky already makes it a positioning root) instead of a
       shrunk horizontal row - real fix for "however many links this
       grows to," not another manual font-size tweak. Collapsed by
       default (max-height:0), expanded via the .open class the toggle
       script (shared.js) adds/removes. */
    .topbar-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--panel-bg);
        border-bottom: 1px solid var(--panel-border);
        box-shadow: 0 16px 32px rgba(0,0,0,0.45);
        max-height: 0; overflow: hidden; opacity: 0;
        transition: max-height 0.25s ease, opacity 0.2s ease;
    }
    .topbar-nav.open { max-height: 420px; opacity: 1; }
    .topbar-nav a {
        padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.05);
        border-left: 2px solid transparent; font-size: 0.9rem;
    }
    .topbar-nav a:hover, .topbar-nav a:active, .topbar-nav a.active { border-left-color: var(--accent); background: var(--accent-bg-soft); }
}
@media (max-width:400px) {
    .topbar-inner { padding:11px 14px; }
    .topbar-brand span { font-size:0.85rem; }
}