/* see CLAUDE_notes.md */


:root {
    /* Vertical gap between the last navigator band (hero / tabs / sub-tabs)
       and the first section card. One knob for all three nav modes. */
    --nav-content-gap: 1.5rem;
}


/* .fap-nav-toggle and its button rules → controls.css */

/* ─── Nav-mode toggle: lives in #app-header-extras (header), not fixed ──────── */
/* Layout is handled by the header flex row — nothing to position here.         */
/* Button styles remain in controls.css (.fap-nav-toggle button).               */


/* ─── Back-to-top button (scroll mode only) ──────────────────────────────────── */
.fap-back-to-top {
    display: none;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 60;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color, #3b82f6);
    color: #fff;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s;
}
.fap-back-to-top:hover { background: var(--primary-hover, #2563eb); }
.fap-back-to-top.visible { opacity: 1; }
main.navMode_scroll .fap-back-to-top { display: flex; }


/* ─── Top-tabs bar (visible in tabs mode) ────────────────────────────────── */
/* Geometry + chrome come from .pageNav (coreLayout.css) — fixed position, one
   height, region-wide background, content on the centred column. All that is
   left here is the mode gating. */
.fap-top-tabs { display: none; }
/* .fap-top-tabs button → controls.css */


/* ─── Second-level tabs (visible in tabs mode, group active) ──── */
/* Same UI as .fap-top-tabs — just sticky-stacked directly beneath it. */
/* Second-level row — .pageNav--sub places it one strip below the first. */
.fap-sub-tabs { display: none; }

.fap-sub-tabs button {
    background: none;
    border: none;
    padding: 0.7rem 1.1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted, #606770);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    font-family: inherit;
    appearance: none;
}
/* Level-2 accent is --nav2, not the --primary-color of the level-1 strip. */
.fap-sub-tabs button:hover  { color: var(--nav2, #4b35f6); }
.fap-sub-tabs button.active {
    color: var(--nav2, #4b35f6);
    border-bottom-color: var(--nav2, #4b35f6);
}
.fap-sub-tabs.tabSlide::after { background: var(--nav2, #4b35f6); }
/* Only reveal the active group's sub-tab bar, and only in tabs mode. */
main.navMode_tabs .fap-sub-tabs.active { display: flex; }


/* ─── Scroll-mode group heading (e.g. "Metabolism") ──────────────────────── */
/* Rendered inside the grid before a group's first leaf section; only shown
   in scroll mode, where the leaves are stacked as individual sections. */
.fap-group-heading {
    display: none;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-main, #1a1f2e);
    border-bottom: 2px solid var(--border-color, #e2e6f0);
    padding-bottom: 0.4rem;
    margin: 1.25rem 0 -0.25rem 0;
}
main.navMode_scroll .fap-group-heading { display: block; }


/* ─── Left side menu (visible in menu mode) ──────────────────────────────── */
.fap-side-menu {

}
/* .fap-side-menu button → controls.css */

/* Metabolism group header is a non-selectable label (its children are the
   real, selectable items). It never takes the .active highlight — JS skips it. */
.fap-side-menu .fap-menu-group {
    font-weight: 700;
    color: var(--text-muted, #606770);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.82em;
    cursor: default;
    margin-top: 0.35rem;
}
.fap-side-menu .fap-menu-group:hover {
    background: none;
    color: var(--text-muted, #606770);
}
/* The 5 sub-items sit indented to the right, with a guide rail. */
.fap-side-menu .fap-menu-sub {
    padding-left: 2.4rem;
    font-size: 0.94em;
    margin-bottom: 0.1rem;
    position: relative;
}
.fap-side-menu .fap-menu-sub::before {
    content: "";
    position: absolute;
    left: 1.15rem;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 2px;
    border-radius: 2px;
    background: var(--border-color, #e2e6f0);
}
.fap-side-menu .fap-menu-sub.active::before { background: transparent; }


/* ─── Nav-mode toggles on <main> ─────────────────────────────────────────── */
main.navMode_tabs .fap-top-tabs { display: flex; }

main.navMode_menu .fap-side-menu,
main.navMode_scroll .fap-side-menu { display: block; }


/* ═══════════════════════════════════════════════════════════════════════════
   SIDE MENU: sliding highlight + dock/undock pin
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── The sliding highlight ────────────────────────────────────────────────── */
.fap-menu-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-radius: 6px;
    background: var(--primary-color);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1),
                height    0.30s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.18s linear;
    will-change: transform, height;
}
/* Applied by JS around a layout change (mode switch, resize, dock toggle) so
   the pill re-seats instantly instead of gliding across a reflow. */
.fap-menu-indicator.no-anim { transition: none; }

.fap-side-menu.has-indicator button { position: relative; z-index: 1; }
.fap-side-menu.has-indicator button.active,
.fap-side-menu.has-indicator button.active:hover {
    background: transparent;
    color: var(--on-accent);
}


/* ─── Menu head — the dock/undock pin (scroll mode only) ─────────────────────
   Injected by page_nav.js as the aside's first child, so both host pages get
   it without touching their own copy of the menu markup. */
.fap-menu-head {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
    padding: 0 0.15rem 0.35rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-color, #e2e6f0);
}
main.navMode_scroll .fap-side-menu .fap-menu-head { display: flex; }

/* controls.css styles every button in the aside as a full-width nav row;
   these two are icon buttons, so undo that here rather than there. */
.fap-side-menu .fap-menu-head button {
    width: auto;
    margin: 0;
    padding: 0.2rem 0.45rem;
    background: none;
    border-radius: 6px;
    color: var(--text-muted, #606770);
    font-size: var(--fs-base);
}
.fap-side-menu .fap-menu-head button:hover {
    color: var(--primary-color, #3b82f6);
    background: rgba(127, 127, 127, 0.12);
}
.fap-side-menu .fap-menu-head button i { width: auto; }

.fap-menu-pin i { transition: transform 0.18s ease; }
body.fapnav-undocked .fap-menu-pin i { transform: rotate(-40deg); }

/* The ✕ is only meaningful once the menu floats over the content. */
.fap-side-menu .fap-menu-head .fap-menu-close { display: none; }
body.fapnav-undocked .fap-side-menu .fap-menu-head .fap-menu-close { display: inline-flex; }


/* ─── Undocked: the menu becomes a drawer over the content ─────────────────── */
body.fapnav-undocked main.navMode_scroll aside.fap-side-menu {
    top: var(--app-header-h, 64px);
    bottom: 0;
    width: var(--nav-w);
    max-width: 86vw;
    padding: 1rem 0.5rem;
    /* Rounded only on the three edges that float free of the viewport; the
       left edge stays square against the window. */
    border-radius: 0 10px 10px 0;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.28);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 400;
}
body.fapnav-undocked main.navMode_scroll aside.fap-side-menu.is-open {
    transform: translateX(0);
}

.fap-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 390;
}
body.fapnav-undocked .fap-nav-backdrop.is-open { display: block; }


/* ─── The reopen tab (undocked only) ─────────────────────────────────────────
   The twin of `.tp-nav-toggle` in its undocked state: a vertical tab clipped
   to the left edge that brings the drawer back. */
.fap-nav-reopen {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2.2rem;
    position: fixed;
    left: 0;
    top: 153px;
    width: 2.3rem;
    min-height: 7.5rem;
    margin: 0;
    padding: 0.7rem 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.12);
    color: var(--text-main);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    z-index: 60;
}
body.fapnav-undocked .fap-nav-reopen { display: inline-flex; }
.fap-nav-reopen:hover {
    border-color: var(--primary-color, #3b82f6);
    color: var(--primary-color, #3b82f6);
}
.fap-nav-reopen i { color: var(--primary-color, #3b82f6); }
.fap-nav-reopen-label {
    display: inline-block;
    transform: rotate(-90deg);
    white-space: nowrap;
    line-height: 1;
}


/* In tabs/menu modes, hide every section that isn't active.
   The top hero (.pageHeader) is intentionally outside .fap-section
   and so remains visible in all modes. */
main.navMode_tabs .fap-section:not(.active),
main.navMode_menu .fap-section:not(.active) {
    display: none !important;
}


/* ─── Section grid (top-level wrapper built by page_nav_sections()) ──────── */
/* min(500px, 100%): see the note on the twin rule in pages/fa_info/fa_info.css.
   A bare 500px minimum makes every card 500px wide on a 400px phone. */
.fap-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
    gap: 1.5rem;
}

.fap-nav-content .fap-section-grid,
.fap-nav-content .fap-sections-grid {
    padding-top: var(--nav-content-gap, 1.5rem);
}


/* ─── Section wrapper ────────────────────────────────────────────────────── */
/* By default a regular grid item spanning full width. */
.fap-section {
    grid-column: 1 / -1;
}
.fap-section.fap-section-half { grid-column: auto; }

body .app-footer {
    transition: margin-left 0.2s;
}


/* ─── Responsive ─────────────────────────────────────────────────────────── */
/* Menu width and the space it reserves are driven by --nav-w / --nav-left in
   coreLayout.css — single source of truth, not here. */


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — one navigator, not three (≤ 820px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {
    .fap-top-tabs,
    .fap-sub-tabs,
    .fap-nav-modes { display: none !important; }

    .fap-side-menu .fap-menu-head .fap-menu-pin { display: none; }

    :root { --nav-w: 265px; }

    .fap-nav-reopen {
        position: static;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        flex: 0 0 auto;
        margin-left: auto;      /* right edge of the title row */
        width: 34px;
        height: 34px;
        min-height: 0;
        padding: 0;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-card);
        box-shadow: none;
        --toolIcon-size: 1.15em;
    }
    /* Clipped rather than removed: `aria-label` already names the button, but
       the word is a rotated label sized for a 7.5rem-tall tab and there is no
       room for it in a 34px box. */
    .fap-nav-reopen-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        transform: none;
    }
}