/* ═══════════════════════════════════════════════════════════════
   components.css — Huly primitives
   Pill nav, pill buttons, pill inputs, chips, dropdowns, status bar
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   TOP NAVIGATION — floating pill bar
   Obsidian Kinetic. I1 HARD GATE: position / top / z-index are
   frozen — never switch to fixed or absolute. --z-sticky resolves
   to exactly 50, so the rendered stacking value is unchanged.
   ───────────────────────────────────────────── */
.nav {
    position: sticky;
    top: 12px;
    z-index: var(--z-sticky);
    animation: fadeUp 250ms var(--ease) both;
}

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--nav-h);
    /* Logical properties: auto-mirrors for RTL, no [dir] counter-rule needed. */
    padding-block: 0;
    padding-inline-start: 16px;
    padding-inline-end: 10px;
    /* Was var(--radius-panels), which Phase 1 repointed 20px -> 8px.
       Pinned here to a deliberate Obsidian Kinetic value. */
    border-radius: var(--radius-xl);
    background: var(--surface-glass);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6),
        0 0 1px 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}

.nav-bar:hover,
.nav-bar:focus-within {
    border-color: var(--border-hover);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    transition: opacity var(--dur-1) ease;
}

.nav-logo:hover {
    opacity: 0.85;
}

.nav-logo img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: contain;
}

.nav-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 3px;
}

.nav-logo-text strong {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

.nav-logo-text span {
    font-family: var(--font-mono);
    font-size: var(--text-label-mono-sm);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* — Center tabs — */
/* Absolute centering is load-bearing: .nav must stay a positioned ancestor,
   which it is because position: sticky counts as positioned (I1). */
.nav-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: var(--text-body-md);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-2);
    border: none;
    transition: all var(--dur-1) ease;
    position: relative;
}

.nav-tab svg {
    opacity: 0.75;
}

.nav-tab:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}

/* Admin navbar folders (router.js loadNavFolders): a hairline splits them
   from the fixed tabs; long names truncate instead of pushing the bar. */
.nav-sep {
    flex: none;
    width: 1px;
    height: 18px;
    margin: 0 6px;
    background: var(--border);
}

.nav-tab-folder > span {
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-tab-folder.is-locked {
    color: var(--text-3, var(--text-2));
}

@media (min-width: 901px) {
    /* With folders the group joins the bar's flow and takes exactly the
       space between logo and actions (absolute centring would overlap them);
       extra links scroll sideways. Block padding keeps the active underline
       (bottom: -1px) out of the clip. */
    .nav-tabs:has(.nav-tab-folder) {
        position: static;
        transform: none;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: safe center;
        overflow-x: auto;
        padding-block: 3px;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-tab {
        flex: none;
    }
}

@media (max-width: 900px) {
    .nav-tabs.is-open .nav-sep {
        width: auto;
        height: 1px;
        margin: 4px 6px;
    }
}

/* Active tab. `.active` and [aria-current="page"] are both emitted on the
   current tab, so both selectors are kept to honour either contract. */
.nav-tab.active,
.nav-tab[aria-current="page"] {
    color: var(--text-accent);
    font-weight: 600;
    background: var(--glow);
}

.nav-tab.active::after,
.nav-tab[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-ember-pulse);
    transform: translateX(-50%);
}

/* — Right actions — */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   BUTTONS — pill-first
   ───────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 18px;
    border-radius: var(--radius-buttons);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    white-space: nowrap;
    transition: all var(--dur-1) ease;
    user-select: none;
}

.btn:hover {
    background: var(--bg-card);
    border-color: var(--border-hover);
    color: var(--text);
}

.btn:active {
    transform: scale(0.97);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.btn:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Primary Pill — the single iris action per screen */
.btn-primary {
    background: var(--color-electric-iris);
    border-color: transparent;
    color: #ffffff;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(9, 10, 12, 0.2);
}

.btn-primary:hover {
    background: #4a78cf;
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 0 0 4px var(--glow), 0 2px 12px rgba(86, 131, 218, 0.35);
}

.btn-sm {
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
}

.btn-icon {
    width: 36px;
    padding: 0;
}

.btn-icon.btn-sm {
    width: 32px;
    height: 32px;
}

/* ─────────────────────────────────────────────
   THEME TOGGLE — ghost control
   `overflow: hidden` is load-bearing: the two absolutely
   positioned sun/moon SVGs are clipped by it.
   ───────────────────────────────────────────── */
.theme-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    position: relative;
    overflow: hidden;
    transition: all var(--dur-1) ease;
}

.theme-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    border-color: var(--border-hover);
}

.theme-btn svg {
    position: absolute;
    transition: all var(--dur-2) var(--ease);
}

.theme-btn .icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

.theme-btn .icon-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="light"] .theme-btn .icon-sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="light"] .theme-btn .icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
}

/* ─────────────────────────────────────────────
   LANGUAGE PILL + DROPDOWN
   ───────────────────────────────────────────── */
.lang-pill {
    height: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-body-md);
    font-weight: 500;
    line-height: 1;
    /* Task 1.4: this control opens a menu on hover/focus, so a default
       (non-interactive) cursor misrepresents it. */
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dur-1) ease, background var(--dur-1) ease, color var(--dur-1) ease;
}

.lang-pill svg {
    display: block;
    flex-shrink: 0;
}

.lang-dropdown-wrap:hover .lang-pill,
.lang-dropdown-wrap:focus-within .lang-pill {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}

.lang-dropdown-wrap {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    height: 32px;
}

/* Task 1.3 - hover bridge. The menu is offset 8px below the wrapper, so that
   gap belongs to neither element and :hover is lost mid-traversal, snapping
   the menu shut under the pointer. This transparent bridge covers the gap so
   the interactive area stays continuous while the visual gap is preserved. */
.lang-dropdown-wrap::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: 8px;
}

/* MECHANISM FROZEN (I8): this menu opens via CSS :hover/:focus-within ONLY.
   There is no `.show` path and no script toggles its visibility. A script may
   only *report* that state through aria-expanded (task 1.2). */
.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 148px;
    padding: 4px;
    background: var(--surface-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(0.98);
    transition: all 0.15s ease;
    z-index: var(--z-dropdown-high);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Task 1.1 - the keyboard path. Without :focus-within here the menu is
   reachable by pointer only, so a keyboard user cannot change language. */
.lang-dropdown-wrap:hover .lang-dropdown-menu,
.lang-dropdown-wrap:focus-within .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ─────────────────────────────────────────────
   TASK 1.7 - TOUCH TARGETS
   Placed after every navbar base rule so it wins the cascade without
   needing !important. The primary controls were 32-34px tall, under the
   44px recommendation. The bar is --nav-h (56px) and centres its
   children, so a 44px hit area fits without touching the frozen sticky
   geometry (I1: position / top / z-index unchanged) or the height token.
   ───────────────────────────────────────────── */
.nav-tab,
.lang-pill,
.lang-dropdown-wrap,
.perf-dropdown-wrap,
.theme-btn {
    min-height: 44px;
}

.nav-tab,
.lang-pill,
.lang-dropdown-wrap,
.perf-dropdown-wrap,
.theme-btn {
    height: 44px;
}

/* Phase 7 (I13): .lang-dropdown-menu now uses inset-inline-end, so the
   start edge is free in both directions - no manual mirror required. */
.lang-dropdown-menu {
    inset-inline-start: 0;
}

.lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-2);
    font-size: var(--text-body-md);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s ease;
}

.lang-option span {
    font-family: var(--font-mono);
    font-size: var(--text-label-mono-sm);
    font-weight: 600;
    color: var(--text-4);
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}

.lang-option.active,
:root .lang-option.active,
[data-theme="light"] .lang-option.active {
    background: var(--glow);
    color: var(--text-accent);
    font-weight: 600;
}

[data-theme="dark"] .lang-option.active {
    background: rgba(86, 131, 218, 0.16);
    color: #a9c3ee;
}

[data-theme="light"] .lang-option.active span {
    color: #3d6bc7;
}

[data-theme="dark"] .lang-option.active span {
    color: #a9c3ee;
}

/* ─────────────────────────────────────────────
   INPUTS — pill search field
   ───────────────────────────────────────────── */
.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px 0 16px;
    border-radius: var(--radius-inputs);
    background: var(--input-bg);
    border: 1px solid var(--border);
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}

.input-wrap:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 4px var(--glow);
}

.input-wrap svg {
    color: var(--text-4);
    flex-shrink: 0;
}

.input-wrap input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    letter-spacing: -0.01em;
}

[dir="rtl"] .input-wrap input,
html[lang="fa"] .input-wrap input,
body.rtl .input-wrap input {
    letter-spacing: 0;
}

.input-wrap input::placeholder {
    color: var(--text-4);
}

.search-keys {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-4);
    background: var(--n-4);
    border: 1px solid var(--border);
}

/* ─────────────────────────────────────────────
   CHIPS / BADGES — category pills
   ───────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 9px;
    border-radius: var(--radius-tags);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Iris chip — folders / new releases / primary category */
.badge-new {
    background: rgba(86, 131, 218, 0.14);
    color: #3d6bc7;
    border: 1px solid rgba(86, 131, 218, 0.35);
}

.badge-dir {
    background: rgba(86, 131, 218, 0.14);
    color: #3d6bc7;
    border: 1px solid rgba(86, 131, 218, 0.35);
}

/* Neutral chip — files */
.badge-file {
    background: var(--n-4);
    color: var(--text-3);
    border: 1px solid var(--border);
}

[data-theme="dark"] .badge-new,
[data-theme="dark"] .badge-dir {
    background: rgba(86, 131, 218, 0.16);
    color: #a9c3ee;
    border-color: rgba(86, 131, 218, 0.35);
}

[data-theme="dark"] .badge-file {
    background: rgba(255, 255, 255, 0.06);
    color: #95979e;
    border-color: #4a4b50;
}

/* Locked chip — admin policy: visible by name, sign-in required */
.badge-locked {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: color-mix(in srgb, var(--warning) 70%, var(--text));
    border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
}

/* ─────────────────────────────────────────────
   CARD PRIMITIVE
   ───────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-cards);
    box-shadow: var(--shadow-card);
}

/* ─────────────────────────────────────────────
   ENTERPRISE FOOTER (Phase 5 / D10)
   Shell chrome: lives in index.html as a sibling of .nav, never inside #app.
   Styled here (not home.css) because every route shares it.
   ───────────────────────────────────────────── */
.footer {
    margin-top: var(--space-xl);
    padding: 0;
    background: var(--bg-card);
    border: none;
    border-top: 1px solid var(--border);
    border-radius: var(--radius-panels);
    font-size: 12px;
    color: var(--text-3);
}

.footer-container {
    padding: var(--space-xl) var(--gutter-desktop);
    margin: 0 auto;
    width: 100%;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.footer-col-title {
    margin: 0 0 2px;
    font-family: var(--font-mono);
    font-size: var(--text-label-code);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text);
    font-weight: 600;
}

/* ── Col 1: brand ── */
.footer-brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo-img {
    height: 26px;
    width: auto;
    display: block;
}

.footer-brand-name {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text);
}

.footer-about-text {
    margin: 0;
    line-height: 1.7;
    color: var(--text-3);
    max-width: 46ch;
}

/* ── Col 2: links ── */
.footer-links-list,
.footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links-list a,
.footer-contact-list a {
    color: var(--text-3);
    text-decoration: none;
    transition: color var(--dur-1) ease;
}

.footer-links-list a:hover,
.footer-contact-list a:hover {
    color: var(--text-accent);
}

.footer-links-list a:focus-visible,
.footer-contact-list a:focus-visible,
.footer .social-icon-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Col 3: contact ── */
.footer-contact-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.contact-label {
    color: var(--text-4);
}

.contact-val {
    font-family: var(--font-mono);
    font-size: 11px;
    text-decoration: none;
    direction: ltr;
    unicode-bidi: isolate;
}

.footer-contact-list li:last-child {
    display: block;
}

.contact-address {
    display: block;
    line-height: 1.7;
    color: var(--text-3);
    max-width: 34ch;
}

/* ── Col 4: socials ── */
.footer-social-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-3);
    background: transparent;
    transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}

.social-icon-btn:hover {
    color: var(--text-accent);
    border-color: var(--border-focus);
}

.social-svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ── Copyright bar ── */
.footer-bottom {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
    text-align: center;
}

.copyright-text {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-4);
}

/* ── Responsive: 4 -> 2x2 -> 1 column, fully centred ──
   Phase 9: the tablet and phone layouts are now centred as a block.
   `justify-items` centres each grid item in its track; the column
   contents are centred via `align-items`/`justify-content` so the brand
   block and the social icon row sit in the middle of their cells. */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: center;
        text-align: center;
        gap: var(--space-lg) var(--space-xl);
    }

    .footer-col {
        align-items: center;
        text-align: center;
    }

    .footer-brand-logo {
        align-items: center;
        justify-content: center;
    }

    .footer-about-text,
    .contact-address {
        max-width: 42ch;
        text-align: center;
    }

    .footer-links-list,
    .footer-contact-list {
        align-items: center;
    }

    .footer-social-links {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        gap: var(--space-lg);
    }

    .footer-col {
        align-items: center;
        text-align: center;
    }

    .footer-links-list,
    .footer-contact-list {
        align-items: center;
    }

    .footer-contact-list li {
        justify-content: center;
    }

    .footer-social-links {
        justify-content: center;
    }

    .footer-container {
        padding: var(--space-lg) var(--gutter-desktop);
    }

    .footer-bottom {
        text-align: center;
    }
}

/* ── RTL (I13) ──
   CSS Grid columns flow in the inline direction automatically: under
   [dir="rtl"] column 1 (Brand/About) renders rightmost and column 4
   (Socials) leftmost, with no order override needed. Only physical
   properties need explicit handling, and there are none left below -
   the footer is authored entirely with logical/flow-relative properties. */
[dir="rtl"] .footer-bottom {
    text-align: start;
}

[dir="rtl"] .footer-brand-logo {
    flex-direction: row;
}

/* ── Responsive (I2): compress spacing on small mobile ── */
@media (max-width: 480px) {
    .footer {
        margin-top: var(--space-lg);
    }

    .footer-container {
        padding: var(--space-md) 12px;
    }

    .footer-grid {
        gap: var(--space-md);
    }

    .footer-col {
        gap: var(--space-xs);
    }

    .footer-bottom {
        margin-top: var(--space-md);
    }
}

/* ── Perf tiers (I12): drop the hover transitions on the low/potato tiers ── */
[data-perf="low"] .footer a,
[data-perf="low"] .social-icon-btn,
[data-perf="potato"] .footer a,
[data-perf="potato"] .social-icon-btn {
    transition: none;
}

/* ─────────────────────────────────────────────
   AUTOCOMPLETE DROPDOWN (FIXED OVERFLOW & CLIPPING)
   ───────────────────────────────────────────── */


.hero-max {
    overflow: visible !important;
}

.hero-max::before,
.hero-max::after {
    clip-path: inset(0 0 0 0 round var(--radius-panels));
}

.hero-search,
.hero-search .input-wrap {
    position: relative !important;
    z-index: 1000 !important;
}

.ac-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-xl), 0 20px 40px rgba(0, 0, 0, 0.4);
    z-index: 99999 !important;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ac-dropdown.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.ac-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
}

.ac-list::-webkit-scrollbar {
    width: 5px;
}

.ac-list::-webkit-scrollbar-thumb {
    background: var(--n-5);
    border-radius: 3px;
}

.ac-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: all 140ms ease;
}

.ac-item:hover,
.ac-item.active {
    background: var(--bg-hover);
    border-left-color: var(--color-electric-iris);
}

.ac-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.ac-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.ac-icon-dir {
    background: rgba(86, 131, 218, 0.12);
    color: #3d6bc7;
    border-color: rgba(86, 131, 218, 0.3);
}

.ac-icon-file {
    background: var(--n-4);
    color: var(--text-3);
    border-color: var(--border);
}

[data-theme="dark"] .ac-icon-dir {
    background: rgba(86, 131, 218, 0.14);
    color: #a9c3ee;
    border-color: rgba(86, 131, 218, 0.3);
}

[data-theme="dark"] .ac-icon-file {
    background: rgba(255, 255, 255, 0.05);
    color: #95979e;
    border-color: #4a4b50;
}

.ac-info {
    min-width: 0;
}

.ac-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-path {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-highlight {
    background: rgba(86, 131, 218, 0.18);
    color: var(--text-accent);
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 700;
}

.ac-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-4);
    background: var(--n-4);
}

.ac-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-4);
    font-size: 13px;
}

/* ─────────────────────────────────────────────
   RESPONSIVE NAV
   ───────────────────────────────────────────── */
/* Phase 6 (a11y-ux-debt) — mobile navigation disclosure. Hidden at and
   above 900px, where .nav-tabs is always visible; shown below 900px as a
   native button toggling .nav-tabs.is-open. The control stays in the
   .nav-actions flow — it never detaches or overlays routed content (I1:
   the .nav rule above is untouched). */
.nav-disclosure {
    display: none;
}

@media (max-width: 900px) {
    .nav-tabs {
        display: none;
    }

    .nav-disclosure {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text-2);
        cursor: pointer;
        transition: all var(--dur-1) ease;
    }

    .nav-disclosure:hover {
        background: rgba(255, 255, 255, 0.04);
        color: var(--text);
        border-color: var(--border-hover);
    }

    /* Revealed group: vertical stack dropped below the pill, anchored to
       .nav (the positioned sticky ancestor), spanning exactly the bar's
       width so it always fits the viewport. Its own opaque surface keeps
       every link clear of the content beneath. */
    .nav-tabs.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        transform: none;
        padding: 8px;
        border-radius: var(--radius-xl);
        background: var(--surface-glass);
        border: 1px solid var(--border);
        box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6),
            0 0 1px 1px rgba(255, 255, 255, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    /* Light-theme shadow, mirroring the light .nav-bar treatment below. */
    [data-theme="light"] .nav-tabs.is-open {
        box-shadow: 0 8px 24px -8px rgba(28, 28, 30, 0.12),
            0 0 1px 1px rgba(28, 28, 30, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    /* Phase 8: at rest the menu is pinned to BOTH inline edges of its wrap,
       so its min-width (148px) anchors at the wrap's START edge and the
       hidden menu juts past the right viewport edge, inflating scrollWidth.
       Anchor only the inline-end edge so the menu grows inward. */
    .lang-dropdown-menu {
        inset-inline-start: auto;
    }
}

@media (max-width: 640px) {
    .nav-bar {
        height: var(--nav-h-mobile);
    }

    .search-keys {
        display: none;
    }

    /* Phase 8: tighter action spacing on narrow bars. */
    .nav-actions {
        gap: 4px;
    }
}

/* Phase 8: below ~420px the bar's content (logo 134 + actions 251 + gaps +
   padding) exceeds the page width and pushes the theme and disclosure
   buttons off-viewport — which also made the Phase 6 disclosure control
   unreachable at 360px. Dropping the wordmark reclaims ~92px; the logo
   image and link remain. */
@media (max-width: 480px) {
    .nav-logo-text {
        display: none;
    }
}

/* ─────────────────────────────────────────────
   LIGHT THEME NAVBAR
   Obsidian Kinetic is dark-primary, so the light theme uses a
   near-white glass and drops the dark inset highlight.
   ───────────────────────────────────────────── */
[data-theme="light"] .nav-bar {
    box-shadow: 0 8px 24px -8px rgba(28, 28, 30, 0.12),
        0 0 1px 1px rgba(28, 28, 30, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .nav-tab:hover,
[data-theme="light"] .theme-btn:hover,
[data-theme="light"] .nav-disclosure:hover,
[data-theme="light"] .lang-dropdown-wrap:hover .lang-pill,
[data-theme="light"] .lang-option:hover,
[data-theme="light"] .perf-dropdown-wrap:hover .perf-pill,
[data-theme="light"] .perf-dropdown-wrap.show .perf-pill {
    background: rgba(28, 28, 30, 0.04);
}
/* ─────────────────────────────────────────────
   Navbar version label + sign-in toggle
   ───────────────────────────────────────────── */
.nav-version {
    align-self: flex-start;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--bg-hover);
    color: var(--text-3);
    font-size: var(--text-label-mono-sm);
    font-variant-numeric: tabular-nums;
    animation: fadeUp 320ms var(--ease) both;
}

.auth-btn .icon-logout {
    opacity: 0;
    transform: translateX(-8px) scale(0.7);
}

.auth-btn .icon-login {
    opacity: 1;
    transform: none;
}

.auth-btn.is-auth .icon-login {
    opacity: 0;
    transform: translateX(8px) scale(0.7);
}

.auth-btn.is-auth .icon-logout {
    opacity: 1;
    transform: none;
}

.auth-btn.is-auth {
    color: var(--text-accent);
    border-color: var(--border-focus);
}

/* The arrow nudges toward the door on hover: in for sign-in, out for sign-out. */
.auth-btn:hover:not(.is-auth) .icon-login { transform: translateX(2px); }
.auth-btn.is-auth:hover .icon-logout { transform: translateX(2px); }
.auth-btn:active { transform: scale(0.94); }
.auth-btn:disabled { cursor: progress; opacity: 0.6; }
.auth-btn:not([hidden]) { animation: scaleIn 260ms var(--ease) both; }
.auth-btn[hidden] { display: none; }