/* ============================================================
   Archon Systems — navbar.css

   Scope:
   - Navbar layout
   - Brand sizing
   - Desktop navigation
   - Language selector
   - Account selector
   - Mobile navigation
   - Login modal
   - No-JS radio state

   Dependencies:
   - base.css
   - icon/country_emblems.css
   ============================================================ */

/* ============================================================
   State inputs
   ============================================================ */

.site-nav-state-input {
    position: fixed;

    inline-size: 1px;
    block-size: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   Navbar frame
   ============================================================ */

.site-navbar {
    position: sticky;
    top: 0;
    z-index: 40;

    isolation: isolate;
    overflow: visible;

    border-bottom: 1px solid var(--edge);

    background:
            linear-gradient(
                    180deg,
                    rgba(8, 9, 17, 0.985),
                    rgba(5, 6, 13, 0.97)
            );

    box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.018),
            0 10px 34px rgba(0, 0, 0, 0.12);
}

@supports (
    (backdrop-filter: blur(12px)) or
    (-webkit-backdrop-filter: blur(12px))
) {
    .site-navbar {
        background:
                linear-gradient(
                        180deg,
                        rgba(8, 9, 17, 0.92),
                        rgba(5, 6, 13, 0.9)
                );

        -webkit-backdrop-filter: blur(12px) saturate(118%);
        backdrop-filter: blur(12px) saturate(118%);
    }
}

.site-navbar-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: 120rem;
    height: 4.75rem;

    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 5rem);

    gap: 2rem;
}

/* ============================================================
   Brand
   ============================================================ */

.site-brand {
    display: flex;
    align-items: center;

    flex: none;

    width: 11.75rem;
    height: 100%;

    min-width: 0;

    text-decoration: none;
}

.site-brand-logo {
    display: block;

    width: 11.75rem;
    max-width: none;
    height: auto;

    object-fit: contain;
    object-position: left center;

    transform: scale(1.11);
    transform-origin: left center;

    filter:
            drop-shadow(0 0 15px rgba(207, 172, 93, 0.085))
            drop-shadow(0 4px 12px rgba(0, 0, 0, 0.14));
}

/* ============================================================
   Desktop layout
   ============================================================ */

.site-nav-desktop {
    display: none;
    align-items: center;

    min-width: 0;

    margin-left: auto;
    gap: 0.75rem;
}

.site-nav-cluster {
    display: flex;
    align-items: center;

    gap: 0.15rem;
    padding: 0.3rem;

    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 0.85rem;

    background: rgba(255, 255, 255, 0.024);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.026),
            0 6px 22px rgba(0, 0, 0, 0.08);
}

.site-nav-separator {
    width: 1px;
    height: 1.65rem;

    flex: none;

    margin-inline: 0.05rem;

    background:
            linear-gradient(
                    180deg,
                    transparent,
                    rgba(255, 255, 255, 0.11) 24%,
                    rgba(255, 255, 255, 0.11) 76%,
                    transparent
            );
}

.site-nav-slot {
    position: relative;

    flex: none;
}

/* ============================================================
   Desktop navigation links
   ============================================================ */

.site-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 2.25rem;
    padding-inline: 0.9rem;

    border-radius: 0.58rem;

    color: var(--ink-dim);

    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.105em;
    line-height: 1;

    text-decoration: none;
    text-transform: uppercase;

    transition:
            color 140ms ease,
            background-color 140ms ease,
            box-shadow 140ms ease,
            transform 140ms ease;
}

.site-nav-link:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.045);
}

.site-nav-link:active {
    transform: translateY(1px);
}

.site-nav-link--active,
.site-nav-link--active:hover {
    color: var(--ink);

    background:
            linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.095),
                    rgba(255, 255, 255, 0.062)
            );

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.055),
            0 1px 5px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   Shared controls
   ============================================================ */

.site-nav-control {
    display: inline-flex;
    align-items: center;

    height: 2.65rem;

    gap: 0.5rem;

    cursor: pointer;
    user-select: none;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 0.78rem;

    background: rgba(255, 255, 255, 0.027);
    color: var(--ink-dim);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.028),
            0 5px 18px rgba(0, 0, 0, 0.06);

    transition:
            color 140ms ease,
            border-color 140ms ease,
            background-color 140ms ease,
            box-shadow 140ms ease,
            transform 140ms ease;
}

.site-nav-control:hover {
    color: var(--ink);
    border-color: var(--accent-edge);
    background: rgba(255, 255, 255, 0.048);
}

.site-nav-control:active {
    transform: translateY(1px);
}

#dlang:checked ~ .site-navbar label[for="dlang"],
#daccount:checked ~ .site-navbar label[for="daccount"],
#maccount:checked ~ .site-navbar label[for="maccount"],
#mnav:checked ~ .site-navbar label[for="mnav"] {
    color: var(--ink);
    border-color: var(--accent-edge);

    background: rgba(255, 255, 255, 0.06);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 0 3px rgba(155, 155, 255, 0.045);
}

/* ============================================================
   Language trigger
   ============================================================ */

.site-nav-language-trigger {
    padding:
            0.3rem
            0.72rem
            0.3rem
            0.3rem;
}

.site-nav-language-name {
    display: none;

    max-width: 7.5rem;
    overflow: hidden;

    color: var(--ink);

    font-size: 0.72rem;
    font-weight: 620;
    line-height: 1;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav-language-code {
    color: var(--ink-faint);

    font-family: var(--font-mono);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;

    text-transform: uppercase;
}

.site-nav-chevron {
    width: 0.38rem;
    height: 0.38rem;

    flex: none;

    margin-left: 0.05rem;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    color: var(--ink-faint);

    transform: translateY(-0.1rem) rotate(45deg);

    transition:
            color 140ms ease,
            transform 140ms ease;
}

#dlang:checked ~ .site-navbar label[for="dlang"] .site-nav-chevron,
#daccount:checked ~ .site-navbar label[for="daccount"] .site-nav-chevron {
    color: var(--ink-dim);
    transform: translateY(0.1rem) rotate(225deg);
}

/* ============================================================
   Account trigger
   ============================================================ */

.site-nav-account-trigger {
    max-width: 14rem;

    padding-inline: 0.85rem;
}

.site-nav-status-dot {
    width: 0.38rem;
    height: 0.38rem;

    flex: none;

    border-radius: 999px;

    background: var(--signal);

    box-shadow:
            0 0 8px rgba(52, 211, 153, 0.32);
}

.site-nav-account-name {
    min-width: 0;
    overflow: hidden;

    color: var(--ink);

    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;

    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================================
   Enter controls
   ============================================================ */

.site-nav-enter,
.site-nav-mobile-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: none;

    cursor: pointer;
    user-select: none;

    border: 1px solid rgba(193, 194, 255, 0.42);
    border-radius: 0.78rem;

    background:
            linear-gradient(
                    180deg,
                    rgba(173, 174, 255, 1),
                    rgba(143, 144, 239, 1)
            );

    color: #090a15;

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.34),
            0 8px 24px rgba(128, 129, 240, 0.15);

    font-weight: 800;
    letter-spacing: 0.15em;
    line-height: 1;

    text-transform: uppercase;

    transition:
            filter 140ms ease,
            transform 140ms ease,
            box-shadow 140ms ease;
}

.site-nav-enter {
    height: 2.65rem;
    padding-inline: 1.15rem;

    font-size: 0.66rem;
}

.site-nav-mobile-enter {
    height: 2.5rem;
    padding-inline: 1rem;

    border-radius: 0.72rem;

    font-size: 0.61rem;
}

.site-nav-enter:hover,
.site-nav-mobile-enter:hover {
    filter: brightness(1.08);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.38),
            0 10px 30px rgba(128, 129, 240, 0.21);
}

.site-nav-enter:active,
.site-nav-mobile-enter:active {
    transform: translateY(1px);
}

/* ============================================================
   Emblem frames
   ============================================================ */

.site-nav-emblem {
    --emblem-scale: 0.125;

    position: relative;

    display: inline-flex;
    flex: none;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.09);

    background:
            radial-gradient(
                    circle at 50% 16%,
                    rgba(255, 255, 255, 0.14),
                    transparent 57%
            ),
            rgba(255, 255, 255, 0.035);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.03),
            0 4px 12px rgba(0, 0, 0, 0.09);
}

.site-nav-emblem > .country-emblem {
    position: absolute;
    left: 50%;
    top: 50%;

    transform:
            translate(-50%, -50%)
            scale(var(--emblem-scale));

    transform-origin: center;
}

.site-nav-emblem--trigger {
    --emblem-scale: 0.125;

    width: 1.8rem;
    height: 1.8rem;

    border-radius: 0.52rem;
}

.site-nav-emblem--current {
    --emblem-scale: 0.17;

    width: 2.65rem;
    height: 2.65rem;

    border-radius: 0.75rem;
}

.site-nav-emblem--option {
    --emblem-scale: 0.145;

    width: 2.25rem;
    height: 2.25rem;

    border-radius: 0.64rem;
}

/* ============================================================
   Popovers
   ============================================================ */

.site-nav-popover {
    position: absolute;
    top: calc(100% + 0.72rem);
    right: 0;
    z-index: 60;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 0.95rem;

    background:
            linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.025),
                    transparent 4.5rem
            ),
            rgba(12, 14, 24, 0.988);

    box-shadow:
            0 26px 76px rgba(0, 0, 0, 0.54),
            0 0 0 1px rgba(255, 255, 255, 0.018),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
            translateY(0.45rem)
            scale(0.982);

    transform-origin: top right;

    transition:
            opacity 150ms ease,
            visibility 150ms ease,
            transform 150ms ease;
}

.site-nav-language-panel {
    width: 20.5rem;
}

.site-nav-account-panel {
    width: 18rem;
}

.site-nav-mobile-account-panel,
.site-nav-mobile-panel {
    width: min(18rem, calc(100vw - 2rem));
}

#dlang:checked ~ .site-navbar .site-nav-language-panel,
#daccount:checked ~ .site-navbar .site-nav-account-panel,
#maccount:checked ~ .site-navbar .site-nav-mobile-account-panel,
#mnav:checked ~ .site-navbar .site-nav-mobile-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
            translateY(0)
            scale(1);
}

.site-nav-popover-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: none;

    width: 2rem;
    height: 2rem;

    cursor: pointer;
    user-select: none;

    border: 1px solid transparent;
    border-radius: 0.55rem;

    color: var(--ink-faint);

    font-size: 1rem;
    line-height: 1;

    transition:
            color 130ms ease,
            border-color 130ms ease,
            background-color 130ms ease;
}

.site-nav-popover-close:hover {
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.045);
}

/* ============================================================
   Outside overlays
   ============================================================ */

.site-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;

    display: block;

    cursor: default;

    background: rgba(0, 0, 0, 0.1);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    overscroll-behavior: contain;

    transition:
            opacity 150ms ease,
            visibility 150ms ease;
}

#dlang:checked ~ .site-nav-language-overlay,
#daccount:checked ~ .site-nav-account-overlay,
#maccount:checked ~ .site-nav-mobile-account-overlay,
#mnav:checked ~ .site-nav-mobile-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#maccount:checked ~ .site-nav-mobile-account-overlay,
#mnav:checked ~ .site-nav-mobile-overlay {
    background: rgba(0, 0, 0, 0.68);
}

/* ============================================================
   Language popover
   ============================================================ */

.site-nav-language-header {
    display: flex;
    align-items: center;

    gap: 0.8rem;
    padding: 0.85rem 0.9rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.site-nav-language-heading {
    min-width: 0;
    flex: 1;
}

.site-nav-language-kicker {
    color: var(--ink-faint);

    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.2;

    text-transform: uppercase;
}

.site-nav-language-current {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 0.45rem;
    margin-top: 0.3rem;
}

.site-nav-language-current-name {
    min-width: 0;
    overflow: hidden;

    color: var(--ink);

    font-size: 0.88rem;
    font-weight: 680;
    line-height: 1.1;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav-language-current-code {
    flex: none;

    color: var(--accent);

    font-family: var(--font-mono);
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.11em;

    text-transform: uppercase;
}

.site-nav-language-active {
    display: inline-flex;
    align-items: center;

    flex: none;

    gap: 0.28rem;
    margin-left: auto;
    padding: 0.18rem 0.38rem;

    border: 1px solid rgba(79, 220, 166, 0.12);
    border-radius: 999px;

    background: rgba(79, 220, 166, 0.045);
    color: rgba(150, 236, 200, 0.72);

    font-family: var(--font-mono);
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;

    text-transform: uppercase;
}

.site-nav-language-active > span {
    width: 0.28rem;
    height: 0.28rem;

    border-radius: 999px;

    background: rgb(79, 220, 166);

    box-shadow:
            0 0 7px rgba(79, 220, 166, 0.38);
}

.site-nav-language-list {
    padding: 0.42rem;
}

.site-nav-language-option {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 0.75rem;
    padding: 0.47rem 0.6rem;

    border: 1px solid transparent;
    border-radius: 0.7rem;

    color: var(--ink-dim);
    text-decoration: none;

    transition:
            color 130ms ease,
            border-color 130ms ease,
            background-color 130ms ease,
            transform 130ms ease;
}

.site-nav-language-option:hover {
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.045);
    background: rgba(255, 255, 255, 0.052);

    transform: translateX(1px);
}

.site-nav-language-option-name {
    min-width: 0;
    flex: 1;

    overflow: hidden;

    font-size: 0.875rem;
    font-weight: 500;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav-language-badge {
    flex: none;

    min-width: 1.85rem;
    padding: 0.23rem 0.34rem;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.4rem;

    background: rgba(255, 255, 255, 0.025);
    color: var(--ink-faint);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1;

    text-align: center;
    text-transform: uppercase;

    transition:
            color 130ms ease,
            border-color 130ms ease;
}

.site-nav-language-option:hover .site-nav-language-badge {
    color: var(--ink-dim);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   Account popovers
   ============================================================ */

.site-nav-account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;
    padding: 0.75rem 1rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.site-nav-account-identity {
    min-width: 0;
}

.site-nav-account-kicker {
    display: flex;
    align-items: center;

    gap: 0.45rem;

    color: var(--ink-faint);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.17em;

    text-transform: uppercase;
}

.site-nav-account-username {
    max-width: 13rem;
    overflow: hidden;

    margin-top: 0.32rem;

    color: var(--ink);

    font-family: var(--font-mono);
    font-size: 0.875rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav-account-list {
    padding: 0.38rem;
}

.site-nav-account-option {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    gap: 0.75rem;
    padding: 0.65rem 0.75rem;

    cursor: pointer;

    border: 0;
    border-radius: 0.68rem;

    background: transparent;
    color: var(--ink-dim);

    font: inherit;
    font-size: 0.875rem;

    text-align: left;
    text-decoration: none;

    transition:
            color 130ms ease,
            background-color 130ms ease;
}

.site-nav-account-option:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.052);
}

.site-nav-account-option--danger:hover {
    color: rgb(254 205 211);
    background: rgba(244, 63, 94, 0.1);
}

.site-nav-account-option-main {
    display: flex;
    align-items: center;

    gap: 0.75rem;
}

.site-nav-account-icon {
    color: var(--accent);
}

.site-nav-account-icon--danger {
    color: rgb(253 164 175);
}

.site-nav-account-option-meta {
    color: var(--ink-faint);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.site-nav-account-divider {
    height: 1px;

    margin: 0.35rem 0.5rem;

    background: rgba(255, 255, 255, 0.07);
}

/* ============================================================
   Mobile navigation
   ============================================================ */

.site-nav-mobile {
    display: flex;
    align-items: center;

    flex: none;

    gap: 0.5rem;
}

.site-nav-mobile-account-trigger {
    max-width: 9rem;

    height: 2.5rem;
    padding-inline: 0.75rem;
}

.site-nav-mobile-account-name {
    min-width: 0;
    overflow: hidden;

    color: var(--ink);

    font-family: var(--font-mono);
    font-size: 0.61rem;
    letter-spacing: 0.12em;

    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-nav-menu-trigger {
    width: 2.5rem;
    height: 2.5rem;

    justify-content: center;

    padding: 0;
}

.site-nav-menu-icon {
    display: block;

    width: 1rem;
}

.site-nav-menu-icon > span {
    display: block;

    width: 1rem;
    height: 1px;

    background: currentColor;

    transition:
            transform 140ms ease,
            opacity 140ms ease;
}

.site-nav-menu-icon > span + span {
    margin-top: 0.34rem;
}

#mnav:checked {
      color: inherit;
  }

#mnav:checked ~ .site-navbar label[for="mnav"] .site-nav-menu-icon > span:nth-child(1) {
    transform: translateY(0.43rem) rotate(45deg);
}

#mnav:checked ~ .site-navbar label[for="mnav"] .site-nav-menu-icon > span:nth-child(2) {
    opacity: 0;
}

#mnav:checked ~ .site-navbar label[for="mnav"] .site-nav-menu-icon > span:nth-child(3) {
    transform: translateY(-0.43rem) rotate(-45deg);
}

.site-nav-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0.72rem 1rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.site-nav-mobile-kicker,
.site-nav-mobile-language-title {
    color: var(--ink-faint);

    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.site-nav-mobile-scroll {
    max-height: calc(100dvh - 7rem);

    overflow-y: auto;

    padding: 0.5rem;
}

.site-nav-mobile-links {
    display: grid;

    gap: 0.125rem;
}

.site-nav-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0.625rem 0.75rem;

    border-radius: 0.68rem;

    color: var(--ink-dim);

    font-size: 0.875rem;

    text-decoration: none;

    transition:
            color 130ms ease,
            background-color 130ms ease;
}

.site-nav-mobile-link:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.045);
}

.site-nav-mobile-link--active,
.site-nav-mobile-link--active:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.06);
}

.site-nav-mobile-dot {
    width: 0.32rem;
    height: 0.32rem;

    border-radius: 999px;

    background: var(--accent);

    box-shadow:
            0 0 8px rgba(139, 146, 246, 0.35);
}

.site-nav-mobile-divider {
    height: 1px;

    margin: 0.5rem 0.25rem;

    background: rgba(255, 255, 255, 0.07);
}

.site-nav-mobile-language-title {
    padding: 0.28rem 0.5rem 0.55rem;
}

.site-nav-mobile-language-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.38rem;
}

.site-nav-mobile-language-option {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 0.5rem;
    padding: 0.45rem 0.5rem;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.68rem;

    background: rgba(255, 255, 255, 0.02);
    color: var(--ink-dim);

    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.1em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
            color 130ms ease,
            border-color 130ms ease,
            background-color 130ms ease;
}

.site-nav-mobile-language-option:hover {
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
}

.site-nav-mobile-language-option--active,
.site-nav-mobile-language-option--active:hover {
    color: var(--ink);
    border-color: var(--accent-edge);
    background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   Login modal
   ============================================================ */

.site-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;

    display: block;

    cursor: default;

    background: rgba(0, 0, 0, 0.72);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    overscroll-behavior: contain;

    transition:
            opacity 180ms ease,
            visibility 180ms ease;
}

.site-login-panel {
    position: fixed;
    inset: 0;
    z-index: 90;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 1rem;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(0.5rem);

    transition:
            opacity 180ms ease,
            visibility 180ms ease,
            transform 180ms ease;
}

.site-login-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-height: calc(100dvh - 2rem);

    overflow: hidden;

    border: 1px solid var(--edge);
    border-radius: 1rem;

    background: rgba(12, 14, 24, 0.985);

    box-shadow:
            0 24px 90px rgba(0, 0, 0, 0.6);
}

.site-login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;
    padding: 1rem 1.25rem;

    border-bottom: 1px solid var(--edge);
}

.site-login-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 2rem;
    padding-inline: 0.75rem;

    cursor: pointer;
    user-select: none;

    border: 1px solid var(--edge);
    border-radius: 0.5rem;

    background: var(--surface);
    color: var(--ink-dim);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;

    text-transform: uppercase;

    transition:
            color 140ms ease,
            border-color 140ms ease,
            background-color 140ms ease;
}

.site-login-close:hover {
    color: var(--ink);
    border-color: var(--accent-edge);
    background: rgba(255, 255, 255, 0.045);
}

.site-login-form {
    flex: 1;

    overflow-y: auto;

    padding: 1.25rem;
}

.site-login-footer {
    display: flex;
    align-items: center;

    gap: 0.5rem;
    padding: 1rem 1.25rem;

    border-top: 1px solid var(--edge);

    color: var(--ink-faint);

    font-family: var(--font-mono);
    font-size: 0.62rem;
}

#enter:checked ~ .site-login-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#enter:checked ~ .site-login-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

/* ============================================================
   Scroll locking enhancement
   ============================================================ */

html:has(#enter:checked),
html:has(#mnav:checked),
html:has(#maccount:checked) {
    overflow: hidden;
}

/* ============================================================
   Focus
   ============================================================ */

.site-nav-link:focus-visible,
.site-nav-language-option:focus-visible,
.site-nav-account-option:focus-visible,
.site-nav-mobile-link:focus-visible,
.site-nav-mobile-language-option:focus-visible {
    outline: 2px solid var(--accent-edge);
    outline-offset: 2px;
}

/* ============================================================
   Desktop breakpoints
   ============================================================ */

@media (min-width: 1024px) {
    .site-nav-desktop {
        display: flex;
    }

    .site-nav-mobile {
        display: none;
    }

    .site-nav-mobile-panel,
    .site-nav-mobile-account-panel,
    .site-nav-mobile-overlay,
    .site-nav-mobile-account-overlay {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .site-nav-language-name {
        display: block;
    }

    .site-brand {
        width: 12.5rem;
    }

    .site-brand-logo {
        width: 12.5rem;
        transform: scale(1.12);
    }
}

@media (min-width: 1536px) {
    .site-navbar-shell {
        height: 5rem;
    }

    .site-brand {
        width: 13.5rem;
    }

    .site-brand-logo {
        width: 13.5rem;
        transform: scale(1.13);
    }

    .site-nav-desktop {
        gap: 0.85rem;
    }

    .site-nav-cluster {
        gap: 0.2rem;
        padding: 0.34rem;
    }

    .site-nav-link {
        height: 2.35rem;
        padding-inline: 1rem;
    }

    .site-nav-control,
    .site-nav-enter {
        height: 2.75rem;
    }
}

/* ============================================================
   Tablet and mobile
   ============================================================ */

@media (max-width: 1279px) {
    .site-navbar-shell {
        padding-inline: clamp(1.25rem, 3vw, 2.5rem);
    }

    .site-nav-link {
        padding-inline: 0.72rem;
    }
}

@media (max-width: 1023px) {
    .site-navbar-shell {
        height: 4.5rem;

        padding-inline: 1rem;
        gap: 1rem;
    }

    .site-brand {
        width: 10rem;
    }

    .site-brand-logo {
        width: 10rem;
        transform: scale(1.1);
    }

    .site-nav-language-panel,
    .site-nav-account-panel,
    .site-nav-language-overlay,
    .site-nav-account-overlay {
        display: none !important;
    }

    .site-nav-popover {
        max-height: calc(100dvh - 6.25rem);
    }
}

@media (min-width: 768px) {
    .site-login-panel {
        align-items: center;
    }

    .site-login-card {
        max-width: 28rem;
        max-height: calc(100dvh - 4rem);
    }

    .site-login-header,
    .site-login-form,
    .site-login-footer {
        padding-inline: 1.5rem;
    }
}

@media (max-width: 639px) {
    .site-brand {
        width: 9.1rem;
    }

    .site-brand-logo {
        width: 9.1rem;
        transform: scale(1.08);
    }
}

@media (max-width: 420px) {
    .site-navbar-shell {
        padding-inline: 0.75rem;
        gap: 0.65rem;
    }

    .site-brand {
        width: 8.1rem;
    }

    .site-brand-logo {
        width: 8.1rem;
        transform: scale(1.06);
    }

    .site-nav-mobile {
        gap: 0.38rem;
    }

    .site-nav-mobile-enter {
        padding-inline: 0.8rem;
    }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .site-nav-link,
    .site-nav-control,
    .site-nav-enter,
    .site-nav-mobile-enter,
    .site-nav-popover,
    .site-nav-overlay,
    .site-nav-language-option,
    .site-nav-account-option,
    .site-nav-mobile-link,
    .site-nav-mobile-language-option,
    .site-login-overlay,
    .site-login-panel {
        transition-duration: 0.01ms !important;
    }
}

.site-nav-language-option-name[dir="rtl"] {
    direction: rtl;
    unicode-bidi: isolate;
    text-align: left;
}