/* ==========================================================================
   Search & Cite — SITE CHROME BRIDGE
   ==========================================================================

   This file replaces ~960 lines that used to sit in styles.css: a verbatim
   copy of the site nav, banner, mobile menu and footer CSS, plus a homepage
   hero block (.hero-modern, .hero-badge, .stat-number, .card-grid …) that this
   page never rendered a single element of.

   The copy fought /css/nav-shared.css on breakpoints — the copy switched to
   the mobile nav at 859/860px, nav-shared.css and the nav's own JS switch at
   1023/1024px — so between those widths the page showed the desktop links AND
   the hamburger. Deleting it fixes that.

   render_navigation() and render_footer() ship their component CSS inline but
   are NOT self-contained. They need two things from the page:

     1. A :root palette. Their inline styles read --primary-color,
        --text-primary, --glass-background, --border-glass, --dropdown-bg,
        --transition-speed and friends, which live in index1.css — a file tool
        pages do not load. tokens.css supplies most of them under the same
        names (see its "Legacy aliases" block); this file adds the handful the
        chrome needs and the app does not.

     2. Base .button / .button-primary / .button-outline rules. nav-shared.css
        provides only contextual overrides (.auth-buttons .button,
        .mobile-menu .button); without the base rules Sign Up and Login render
        as raw <button> elements.

   Load order: /css/nav-shared.css -> tokens/base/layout/components -> THIS.
   Last, deliberately: sections 3 and 4 restate the chrome's intent against app
   rules — and against a shared include's own inline <style> — that would
   otherwise win on source order.

   Same pattern as agent-rooms/css/site-chrome.css and decision-lab.css: a
   FROZEN COPY of the site palette, not a reference to it, so a homepage edit
   cannot silently restyle this tool. Re-sync by copying values in deliberately.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS THE CHROME READS THAT THE APP DOES NOT DEFINE

   NOTE: --text-tertiary used to be redeclared here as #6B7280. This file loads
   last, so that one line silently overrode the design system's own text level
   everywhere in the app. It is gone; tokens.css owns every text tone.
   ========================================================================== */
:root {
    --text-color: #FFFFFF;

    --surface-glass: rgba(255, 255, 255, 0.05);
    --surface-glass-hover: rgba(255, 255, 255, 0.08);
    --card-bg: rgba(255, 255, 255, 0.03);

    /* Opaque, deliberately: the dropdown sits over the page, not in it. */
    --dropdown-bg: #0B0A17;

    --border-glass: rgba(255, 255, 255, 0.1);
    --border-glass-hover: rgba(255, 255, 255, 0.2);

    /* Read by the footer promo strip (footer_functions.php) and defined
       nowhere else in the codebase — unset it falls back to a stray orange. */
    --primary-color-dark: #4A44C8;

    --danger-color: var(--error-fg);
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   2. BUTTONS
   The nav emits `class="button button-primary"` (Sign Up) and
   `class="button button-outline"` (Login). Site classes, not Bootstrap's.
   Values copied verbatim from index1.css so the two render pixel-identical to
   every other page — this is not the place to be creative.
   ========================================================================== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-speed);
    font-weight: 500;
    font-size: 0.95rem;
    text-align: center;
}

.button-primary {
    background: linear-gradient(135deg, var(--primary-color), #7C3AED);
    color: var(--text-color);
    border: 1px solid transparent;
}
.button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(93, 87, 217, 0.4);
}

.button-outline {
    background: transparent;
    border: 1px solid var(--border-glass);
    color: var(--text-color);
}
.button-outline:hover {
    background: var(--surface-glass-hover);
    border-color: var(--border-glass-hover);
}

@media (min-width: 1024px) {
    .button { padding: 0.6rem 1.2rem; font-size: 0.95rem; }
}

/* Kept from the deleted block: nav_functions.php sets no background on the
   profile avatar button and no colour on the logout row. Both are genuine
   page-level overrides that every other page carrying this nav also supplies. */
.profile-menu { background-color: #EB7113; }
.profile-item.logout { color: #FFFFFF; }
.profile-icon,
.submit-icon { padding: 10px; border-radius: 10px; }


/* ==========================================================================
   3. PROTECTING THE CHROME FROM THE PAGE
   ========================================================================== */

/* base.css scopes the focus ring to elements it names, which covers the
   chrome too — but the chrome's own inline CSS sets `outline: none` on some
   controls. Restate the ring where it is at risk. WCAG 2.4.7 is not optional. */
.nav-container :where(a, button, [tabindex]):focus-visible,
.banner-container :where(a, button):focus-visible,
.mobile-menu :where(a, button, [tabindex]):focus-visible,
.footer-v2 :where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.footer-v2 a { text-decoration: none; }

/* The nav is `position: sticky; z-index: 50`, which makes it a stacking
   context — its dropdowns resolve as 50 against the root. The board summary
   sticks at --z-sticky (20) inside the app, so it scrolls UNDER the nav rather
   than over it, which is the correct order; our modal (20000) and toasts
   (20100) still cover everything. Nothing to raise here; this note exists so
   the next person does not "fix" a problem that is absent. */


/* ==========================================================================
   4. THE SHARED UPGRADE MODAL (includes/upgrade_modal.php)

   That include is shared by ~8 tools and is not this agent's file, but it
   renders ON this page, so its defects are this page's audit failures. Three
   of them, all real:

     · .tpi-resets-note  #8A8F9C on #FFFFFF = 3.24:1  FAIL 1.4.3
     · .tpi-btn-secondary #7A7F8E on #FFFFFF = 4.00:1  FAIL 1.4.3
     · .tpi-modal-close   21x30 and .tpi-btn-secondary 304x34 — both under any
       target-size guideline there is.

   #5F6472 on #FFFFFF measures 5.91:1 and is still a visibly secondary grey.
   The include emits its rules from an inline <style> AFTER our <link>s, so a
   bare `.tpi-resets-note` here would lose on source order at equal
   specificity — hence the `.tpi-modal-card` ancestor on every selector. When
   the include is fixed at source, this whole section deletes.
   ========================================================================== */
.tpi-modal-card .tpi-resets-note,
.tpi-modal-card .tpi-btn-secondary { color: #5F6472; }

.tpi-modal-card .tpi-btn-secondary {
    min-height: var(--hit-min);
    padding: 0.6rem 1rem;
}

.tpi-modal-card .tpi-modal-close {
    min-width: var(--hit-min);
    min-height: var(--hit-min);
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-md);
}