:root {
    /* backgrounds */
    --nav-bg:             var(--void);
    --nav-bg-alt:         var(--deep);
    --nav-flyout-bg:      var(--deep);
    --nav-white-tint:     rgba(255, 255, 255, 0.02);

    /* text */
    --nav-text:           var(--mist);
    --nav-text-hover:     var(--cream);
    --nav-text-accent:    var(--gold-light);
    --nav-text-label:     var(--mist-dim);

    /* borders */
    --nav-border:         var(--border);
    --nav-border-hover:   var(--border-hover);

    /* interactive backgrounds */
    --nav-item-hover:     rgb(from var(--gold) r g b / 0.05);
    --nav-item-hover-alt: rgb(from var(--gold) r g b / 0.07);
    --nav-item-active:    rgb(from var(--gold) r g b / 0.09);

    /* gold decorative (alpha variants via relative color syntax) */
    --nav-gold-line:      rgb(from var(--gold) r g b / 0.20);
    --nav-gold-edge:      rgb(from var(--gold) r g b / 0.30);
    --nav-gold-trim:      rgb(from var(--gold) r g b / 0.35);
    --nav-gold-glow:      rgb(from var(--gold) r g b / 0.45);
    --nav-gold-strong:    rgb(from var(--gold) r g b / 0.50);
    --nav-release-glow:   rgb(from var(--gold) r g b / 0.10);

    /* teal & ember decorative */
    --nav-teal-edge:      rgb(from var(--teal) r g b / 0.25);
    --nav-teal-corner:    rgb(from var(--teal) r g b / 0.30);
    --nav-accent:         var(--ember);
    --nav-ember-glow:     rgb(from var(--ember) r g b / 0.70);
    --nav-ember-dim:      rgb(from var(--ember) r g b / 0.30);
}

.navbar {
    background: linear-gradient(180deg, var(--nav-bg-alt) 0%, var(--nav-bg) 100%);
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100vh;
    width: 220px;
    padding-bottom: 30px;
    font-size: 16px;
    z-index: var(--z-index-navbar);
}

.navbar a {
    color: inherit;
    text-decoration: none;
}

.navbar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--nav-gold-trim) 20%, var(--nav-gold-line) 50%, var(--nav-teal-edge) 80%, transparent 100%);
    pointer-events: none;
}

.navbar .navbar-vine {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 4;
    opacity: 0.2;
    height: 99%;
}

/**********************************************
 *
 * Navigation labels
 *
 ***********************************************/

.navbar .navigation {
    flex: 1;
    padding: 18px 0;
    position: relative;
    z-index: 1;
}

.navbar .content-label {
    font-size: 9px;
    padding: 12px 22px 5px;
}

/**********************************************
 *
 * Menu Item
 *
 ***********************************************/

.navbar .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 22px;
    color: var(--nav-text);
    font-size: var(--primary-font-size);
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    text-decoration: none;
    user-select: none;
}

.navbar .nav-item.active {
    color: var(--nav-text-accent);
    background: var(--nav-item-active);
}

.navbar .nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--ember), var(--gold));
    box-shadow: 0 0 8px var(--ember);
}

.navbar .nav-item.has-flyout::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-right: 1px solid var(--nav-text-label);
    border-top: 1px solid var(--nav-text-label);
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.2s;
    opacity: 0.5;
}

.navbar .nav-item:hover {
    transition: all 0.4s;
    color: var(--nav-text-hover);
    background: var(--nav-item-hover);
}

.navbar .nav-item.has-flyout:hover {
    color: var(--nav-text-hover);
    background: var(--nav-item-hover-alt);
}

.navbar .nav-icon {
    width: 15px;
    height: 15px;
    opacity: 0.65;
    flex-shrink: 0;
}

.navbar .material-symbols-outlined {
    font-size: 15px;
    opacity: 0.65;
}

/**********************************************
 *
 * Divider
 *
 ***********************************************/

.navbar .nav-divider {
    height: 1px;
    background: var(--nav-border);
    margin: 10px 22px;
}

/**********************************************
 *
 * Menu Sub Item
 *
 ***********************************************/

.navbar .nav-item:hover .flyout {
    opacity: 1;
    pointer-events: all;
    transform: translateX(0);
}

.navbar .flyout {
    position: absolute;
    left: 100%;
    top: 0;
    width: 200px;
    background: var(--nav-flyout-bg);
    border: 1px solid var(--nav-border);
    border-left: none;
    border-radius: 0 8px 8px 0;
    overflow: hidden;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.6), 4px 0 16px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 100;
}

.navbar .flyout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--nav-gold-edge) 0%, var(--nav-gold-strong) 50%, transparent 100%);
    z-index: 2;
}

.navbar .flyout::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-bottom: 1px solid var(--nav-teal-corner);
    border-right: 1px solid var(--nav-teal-corner);
    pointer-events: none;
    z-index: 3;
}

.navbar .flyout-header {
    padding: 11px 16px 9px;
    border-bottom: 1px solid var(--nav-border);
    background: var(--nav-white-tint);
}

.navbar .flyout-title {
    font-family: var(--headers-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--nav-text-label);
    display: flex;
    align-items: center;
    gap: 6px;
}

.navbar .flyout-title::before {
    content: '✦';
    font-size: 7px;
    color: var(--nav-accent);
}

.navbar .flyout-icon {
    width: 14px;
    height: 14px;
    opacity: 0.55;
    flex-shrink: 0;
}

.navbar .flyout-list {
    padding: 6px 0;
}

.navbar .flyout-item.active {
    color: var(--nav-text-accent);
    background: var(--nav-item-active);
}

.navbar .flyout-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    font-size: var(--primary-font-size);
    color: var(--nav-text);
    cursor: pointer;
    transition: all 0.18s;
    position: relative;
}

.navbar .flyout-item:hover {
    color: var(--nav-text-hover);
    background: var(--nav-item-hover);
}

/**********************************************
 *
 * Footer
 *
 ***********************************************/

.navbar .footer {
    padding: 10px 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.navbar .footer-orn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    opacity: 0.3;
}

.navbar .footer-orn-center {
    font-size: 7px;
    color: var(--gold);
    letter-spacing: 4px;
}

.navbar .footer-orn-line-l {
    background: linear-gradient(90deg, transparent, var(--gold));
}

.navbar .footer-orn-line {
    flex: 1;
    height: 1px;
}

.navbar .footer-orn-line-r {
    background: linear-gradient(270deg, transparent, var(--gold));
}

.navbar .release-notes-link {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: var(--nav-white-tint);
    border: 1px solid var(--nav-border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.22s;
    font-family: var(--headers-font);
    letter-spacing: 0.18em;
    color: var(--nav-text-label);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.navbar .release-notes-link:hover {
    border-color: var(--nav-border-hover);
    color: var(--nav-text-accent);
    box-shadow: 0 0 12px var(--nav-release-glow);
}

.navbar .version-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nav-accent);
    box-shadow: 0 0 5px var(--nav-ember-glow);
    flex-shrink: 0;
    animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 5px var(--nav-ember-glow);
    }
    50% {
        opacity: 0.5;
        box-shadow: 0 0 2px var(--nav-ember-dim);
    }
}