/* ============================================
   WAB OS — la barre de menus
   Une pilule de verre blanc qui flotte en haut de l'écran, détachée
   des bords (d'après les barres flottantes de 21st.dev : Tubelight,
   Floating Navbar). À gauche « WAB. » en mini-touches de clavier,
   comme le nom du premier écran et le pied de page ; au centre les
   pages, la page en cours posée comme une touche ; à droite la
   recherche (⌘K, avec JavaScript) et Contact en touche bleue.
   Au téléphone : les touches, Contact et le menu (nav.js,
   nav-panel.css), qui se déroule dans la pilule.
   ============================================ */

.menubar {
    /* nav-panel.css aligne le menu déroulé sur cette marge. */
    --pill-pad: 16px;
    position: fixed;
    inset: var(--bar-top) 0 auto;
    z-index: var(--z-bar);
    padding-inline: var(--gutter);
    pointer-events: none;
}

.menubar__inner {
    max-width: calc(var(--measure) + 80px);
    margin-inline: auto;
    border-radius: calc(var(--bar-row) / 2);
    background: var(--glass-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow:
        0 0 0 var(--hair) var(--glass-edge),
        inset 0 1px 0 var(--glass-rim),
        0 10px 30px -14px oklch(0.18 0.005 265 / 0.28);
    pointer-events: auto;
    transition: border-radius var(--dur-2) var(--ease-out);
}

/* Menu déroulé au téléphone : la pilule devient une carte. */
.menubar__inner.is-open {
    border-radius: var(--r-panel);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .menubar__inner {
        background: var(--paper);
    }
}

.menubar__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    height: var(--bar-row);
    padding-inline: 10px 8px;
    font-size: var(--t-small);
}

/* « WAB. » en quatre mini-touches (dessin de desk-keys.css). */
.menubar__brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 44px;
    border-radius: var(--r-ctl);
}

/* Sélecteur appuyé : desk-keys.css, chargé après, fixe sinon la taille. */
.menubar .menubar__keys {
    --key: 28px;
    gap: 3px;
}

/* La frappe d'ouverture appartient au premier écran, pas à la barre. */
.menubar .menubar__keys .key__face {
    animation: none;
}

.menubar__nav {
    display: none;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--hover-tint);
}

.menubar__link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: var(--w-medium);
    color: var(--ink-muted);
    transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

@media (hover: hover) {
    .menubar__link:hover {
        color: var(--ink);
    }
}

/* La page en cours : une touche blanche posée dans le rail. */
.menubar__link[aria-current='page'] {
    color: var(--ink);
    background: var(--key-light);
    box-shadow: var(--key-light-relief);
}

.menubar__state {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 3;
    gap: 12px;
    color: var(--ink-muted);
}

/* La recherche : un champ factice, arrondi, qui ouvre la palette. */
.menubar__find {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 6px 0 12px;
    border-radius: 999px;
    background: var(--hover-tint);
    font-size: var(--t-cap);
    color: var(--ink-muted);
    transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

.menubar__find kbd {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--paper);
    box-shadow: 0 0 0 var(--hair) var(--edge);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink);
}

@media (hover: hover) {
    .menubar__find:hover {
        color: var(--ink);
        background: color-mix(in oklch, var(--ink) 8%, transparent);
    }
}

/* Contact : une touche bleue, aux coins de la pilule. */
.menubar__cta {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
}


.menubar .topbar__panel-inner {
    box-shadow: inset 0 1px 0 var(--line);
}

.menubar .panel__key {
    color: var(--klein-text);
}

@media (min-width: 900px) {
    .menubar__nav {
        display: inline-flex;
    }
}

@media (min-width: 1080px) and (hover: hover) and (pointer: fine) {
    .menubar__find {
        display: inline-flex;
    }
}