/* ============================================================
   Visual system – layout
   Page shell: nav, page title, dropdowns, scroll-to-top,
   body padding, search‑page toggles.
   ============================================================ */

/* Clears the fixed nav, and only that - exactly, with nothing added. The title
   is the first thing under it and used to be pinned flush against its lower
   edge, so any breathing room here would drop it below where it has always sat.
   It reserved room for the title too when that was a second fixed bar; the
   title takes its own space in the normal way now. */
body:has(.MainNavigation) {
    padding-top: var(--nav-height);
}

.PageBody {
    padding: 1rem;
    padding-inline: var(--content-padding-inline);
}

@media (min-width: 48rem) {
    .PageBody > main {
        width: calc(100% - var(--investigation-sidebar-width) - 1rem);
    }
}

/* ---------- Fixed header: nav bar + page title ---------- */

.MainNavigation {
    --nav-brand-color: var(--theme-stop-5);
    --nav-account-color: var(--theme-stop-0);
    display: flex;
    gap: 1rem;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: var(--investigation-sidebar-width);
    height: var(--nav-height);
    background-image: var(--nav-sweep);
    isolation: isolate;
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem var(--nav-padding-inline);
    z-index: 20;
}

@media (max-width: 47.99rem) {
    .MainNavigation { right: 0; }
}

[dir='rtl'] .MainNavigation {
    --nav-brand-color: var(--theme-stop-0);
    --nav-account-color: var(--theme-stop-5);
}

.MainNavigationSiteLinks,
.MainNavigationAccountLinks {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.MainNavigationAccountLinks { margin-inline-start: auto; }

.MainNavigation .NavBrand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--display-font);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--nav-brand-color);
    line-height: 1.3;
    align-self: center;
}

.NavBrandLogo {
    height: 3rem;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.MainNavigation a { font-weight: 500; font-size: 0.9rem; }
.MainNavigationSiteLinks > a { color: var(--theme-stop-0); }
.MainNavigation .NavAccount > a,
.MainNavigation .NavAccount .NavDropdownTrigger { color: var(--nav-account-color); }

@media (min-width: 48.01rem) and (min-height: 32.01rem) and (hover: hover) {
    .MainNavigationAccountLinks > a,
    .MainNavigationAccountLinks > .NavDropdown > .NavDropdownTrigger {
        color: var(--theme-stop-0) !important;
    }

    .MainNavigationAccountLinks > a:hover,
    .MainNavigationAccountLinks > a:focus-visible,
    .MainNavigationAccountLinks > .NavDropdown:hover > .NavDropdownTrigger,
    .MainNavigationAccountLinks > .NavDropdown:focus-within > .NavDropdownTrigger {
        color: var(--accent) !important;
    }
}

/* The tab and its flyout meet on one surface, with no bottom tab border. */
.MainNavigationSiteLinks > a,
.MainNavigationAccountLinks > a,
.MainNavigation .NavDropdownTrigger {
    position: relative;
    z-index: 21;
    padding: 0.5rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 1rem 1rem 0 0;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.MainNavigationSiteLinks > a:hover,
.MainNavigationAccountLinks > a:hover,
.MainNavigation .NavDropdown:hover .NavDropdownTrigger,
.MainNavigation .NavDropdown:focus-within .NavDropdownTrigger {
    color: var(--ink);
    background-color: var(--theme-stop-1);
    border-color: var(--hairline);
}

.MainNavigation .NavDropdown:hover .NavDropdownTrigger,
.MainNavigation .NavDropdown:focus-within .NavDropdownTrigger {
    box-shadow: var(--shadow-pop);
    clip-path: inset(-2rem -2rem 0 -2rem);
}

.MainNavigation .NavAccount > a {
    border-bottom: 1px solid transparent;
    border-radius: var(--radius-pill);
}

.PageTitle {
    position: relative;
    height: var(--nav-height);
    margin: 0 0 1rem;
    line-height: 3rem;
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Dropdown menus ---------- */

.NavDropdown { position: relative; }
.NavDropdownTrigger { cursor: pointer; }

.NavAccountLabel {
    display: inline-block;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.NavDropdownMenu {
    display: flex;
    position: absolute;
    top: calc(100% - 1px);
    inset-inline-start: 0;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 11rem;
    max-height: calc(100dvh - var(--nav-height) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 20;
    padding: 0.5rem;
    border-radius: var(--radius-card);
    border-start-start-radius: 0;
    box-shadow: var(--shadow-pop);
    background-color: var(--theme-stop-1);
    background-image: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.25rem) scale(0.98);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.NavDropdown:hover .NavDropdownMenu,
.NavDropdown:focus-within .NavDropdownMenu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

@media (min-width: 48.01rem) and (min-height: 32.01rem) and (hover: hover) {
    .MainNavigation > .NavDropdown > .NavDropdownMenu {
        top: calc(100% - 2px);
    }
}

.NavAccount .NavDropdownMenu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    min-width: calc(100% + var(--radius-card));
    border-start-start-radius: var(--radius-card);
    border-start-end-radius: 0;
    transform-origin: top right;
}

.NavDropdownMenu .LogoutForm { margin: 0; }

.NavDropdownMenu :is(a, .LogoutButton) {
    display: block;
    width: 100%;
    padding: 0.5rem;
    border: none;
    border-radius: 1rem;
    background: none;
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
}

.NavDropdownMenu :is(a, .LogoutButton):hover {
    background-color: var(--surface-2);
    color: var(--ink);
}

/* ---------- Scroll-to-top ---------- */

.ScrollToTopButton {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 20;
    padding: 0.5rem 0.5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    background-color: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--ink);
    font-size: 0.875rem;
    cursor: pointer;
}

.ScrollToTopButton.Scrolled { display: block; }

@media (min-width: 48rem) {
    .ScrollToTopButton {
        right: calc(var(--investigation-sidebar-width) + 3rem);
    }
}

/* ---------- Build cost ---------- */

/* Pinned into the corner rather than sitting under the last thing on the
   page: it is a standing readout for one person, not part of what anybody
   came to read.

   Only once there is room for it beside the content instead of over it. At
   narrower widths it stays in the flow, where it can overlap nothing.

   The left corner because the right one is the scroll-to-top button's. The
   max-width is the backstop: a long figure wraps rather than growing into the
   column. */
@media (min-width: 72rem) {
    .PageGenerationTime {
        position: fixed;
        left: 1rem;
        bottom: 1rem;
        max-width: 13rem;
        margin: 0;
    }
}