/* Header controls shared by both marketing pages (dark "/" and light "/light") and the floating language
   picker elsewhere. One size, one shape: theme toggle, language, log in, join waitlist all measure the same
   so the row is symmetrical. Colors come from the --vs-* tokens, which flip under data-vs-theme="light".
   Loaded AFTER vibescan-tokens-light.css so these win over the older .vs-theme-toggle rules. */

.nav-ctl {
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px; width: 104px; padding: 0 6px; margin: 0;
    border: 1px solid var(--vs-hair-3); border-radius: var(--vs-radius, 6px);
    background: color-mix(in srgb, var(--vs-carbon, #0f1115) 70%, transparent);
    color: var(--vs-ink);
    font-family: inherit; font-weight: 600; font-size: 11.5px; line-height: 1; letter-spacing: .01em; text-transform: none;
    white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: border-color .18s, background .18s, transform .15s, box-shadow .18s;
}
.nav-ctl:hover { border-color: var(--vs-platinum-2); background: color-mix(in srgb, var(--vs-ink) 7%, transparent); transform: translateY(-1px); }
.nav-ctl:focus-visible, .nav-lang:focus-within { outline: 2px solid var(--vs-indigo); outline-offset: 2px; }
.nav-ctl--inert { cursor: default; user-select: none; }
.nav-ctl--inert:hover { transform: none; }

.nav-ctl--primary {
    background: var(--vs-amber); border-color: transparent; color: #1B0A00;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vs-amber) 40%, transparent), 0 10px 28px -10px color-mix(in srgb, var(--vs-amber) 70%, transparent);
}
.nav-ctl--primary:hover { background: var(--vs-amber); filter: brightness(1.06); }
:root[data-vs-theme="light"] .nav-ctl--primary { background: #0a0a0a; color: #fff; box-shadow: 0 10px 24px -12px rgba(10,10,10,.6); }
:root[data-vs-theme="light"] .nav-ctl--primary:hover { background: #1f1f1f; filter: none; }

/* theme toggle: keep its icon/label markup, drop its older padding/size */
.nav-ctl.vs-theme-toggle { padding: 0 6px; gap: 7px; }
.nav-ctl .vs-tt-label { font: 700 11px/1 var(--vs-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; }
.nav-ctl svg { width: 15px; height: 15px; flex: none; }
.nav-ctl--icon { width: 40px; padding: 0; }
.nav-ctl--icon .vs-tt-label { display: none; }
/* phone-only theme icon that sits beside the burger (hidden on wider screens) */
.nav-ctl.nav-tt { display: none; margin-left: auto; }
@media (max-width: 960px) { .nav-ctl.nav-tt { display: inline-flex; } }

/* language picker: custom face, native <select> stretched invisibly on top (keeps the OS picker on phones) */
.nav-lang { position: relative; padding: 0 8px; gap: 6px; }
.nav-lang select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; border: 0; }
.nav-lang .nl-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-lang .nl-full { display: none; }   /* compact: globe + code + chevron, never truncated */
.nav-lang .nl-short { display: inline; letter-spacing: .04em; }
.nav-lang .nl-chev { width: 11px; height: 11px; opacity: .6; transition: transform .2s; }
.nav-lang:hover .nl-chev { transform: translateY(1px); }
.nav-lang--fixed {
    position: fixed; top: 12px; inset-inline-end: 12px; z-index: 70;
    background: color-mix(in srgb, var(--vs-carbon, #0f1115) 82%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* equal-column rows (mobile menu / mobile light header) */
.nav-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nav-grid > .nav-ctl, .nav-grid > .nav-lang { width: 100%; }
.vs-mobile-menu .nav-ctl.nav-ctl { padding: 0 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--vs-hair-3); color: var(--vs-ink); }
.vs-mobile-menu .nav-ctl--primary.nav-ctl--primary { color: #1B0A00; border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
    .nav-ctl, .nav-lang .nl-chev { transition: none; }
}
@media (max-width: 440px) { .nav-ctl--icon { width: 36px; height: 36px; } }