/** The rail: view switch, navigation, actions — and its mobile top bar. */

/* Anchored to the top, not centred: a centred box moves every control when the
   Vordruck's action list grows. */
.vo-rail {
    position: fixed;
    left: var(--rail-inset);
    top: var(--rail-inset);
    max-height: calc(100vh - var(--rail-inset) * 2);
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-6);
    width: var(--rail-width);
    z-index: var(--z-rail);
    font-family: var(--font-ui);
}

.vo-rail__menu {
    display: none;
}

.vo-nav {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    width: 100%;
    padding: var(--sp-5);
    background: var(--bg-surface);
    border: var(--bw) solid var(--chrome-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
}

/* Going somewhere and doing something to what is already here are not the same
   question, so a rule separates them. */
.vo-nav__forms {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding-bottom: var(--sp-5);
    border-bottom: var(--bw) solid var(--chrome-line);
}

.vo-nav__item {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    color: var(--chrome-ink-soft);
    text-decoration: none;
}

.vo-nav__item .vo-icon {
    color: var(--chrome-muted);
}

.vo-nav__item:hover {
    background: var(--chrome-hover);
    color: var(--chrome-ink);
}

.vo-nav__item:hover .vo-icon {
    color: var(--chrome-accent);
}

.vo-nav__item--current,
.vo-nav__item--current:hover {
    background: var(--brand-teal-tint);
    color: var(--chrome-accent-dark);
    font-weight: var(--fw-bold);
    cursor: default;
}

.vo-nav__item--current .vo-icon,
.vo-nav__item--current:hover .vo-icon {
    color: var(--chrome-accent-dark);
}

/* Which Verordnungsart the sheet is. It changes what the Vordruck demands, so
   it is ruled off from the actions the way navigation is. */
.vo-nav__mode {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding-bottom: var(--sp-5);
    border-bottom: var(--bw) solid var(--chrome-line);
}

.vo-nav__mode-label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--chrome-muted);
}

.vo-nav__item:focus-visible,
.vo-viewswitch__btn:focus-visible,
.vo-modeswitch__btn:focus-visible {
    outline: var(--focus-w) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.vo-nav__actions,
.vo-nav__foot {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.vo-nav__foot {
    padding-top: var(--sp-5);
    border-top: var(--bw) solid var(--chrome-line);
}

.vo-nav__sep {
    height: var(--bw);
    margin: var(--sp-2) var(--sp-1);
    background: var(--chrome-line);
}

.vo-viewswitch,
.vo-modeswitch {
    display: flex;
    width: 100%;
    gap: var(--sp-1);
    padding: var(--sp-1);
    background: var(--chrome-sunken);
    border: var(--bw) solid var(--chrome-line);
    border-radius: var(--r-lg);
}

.vo-viewswitch__btn,
.vo-modeswitch__btn {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 0;
    min-width: 0;
    height: var(--control-h);
    padding: 0 var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-snug);
    line-height: var(--lh-none);
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    color: var(--chrome-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.vo-viewswitch__btn:hover,
.vo-modeswitch__btn:hover {
    color: var(--chrome-ink);
}

.vo-viewswitch__btn--active,
.vo-viewswitch__btn--active:hover,
.vo-modeswitch__btn--active,
.vo-modeswitch__btn--active:hover {
    background: var(--bg-surface);
    color: var(--chrome-accent);
    box-shadow: var(--shadow-chip);
}

.vo-rail > .vo-viewswitch {
    margin-bottom: var(--sp-1);
}

@media (max-width: 768px) {
    .vo-rail {
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        max-height: none;
        overflow: visible;
        width: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-4);
        height: calc(var(--bar-height) + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) var(--sp-4) 0;
        background: var(--bg-surface);
        border-bottom: var(--bw) solid var(--chrome-line);
    }

    .vo-rail__menu {
        display: flex;
        width: var(--bar-btn-w);
        height: var(--control-h-sm);
    }

    .vo-rail > .vo-viewswitch {
        flex: 0 1 auto;
        width: auto;
        margin-bottom: 0;
    }

    /* Only the bar's own switch shrinks: the mode switch travels into the
       actions dialog, where a control is thumb-sized like everything else. */
    .vo-rail > .vo-viewswitch .vo-viewswitch__btn {
        flex: 0 1 auto;
        height: var(--control-h-sm);
        padding: 0 var(--sp-7);
        font-size: var(--fs-2xs);
    }

    .vo-modeswitch__btn {
        height: var(--touch-h);
        font-size: var(--fs-md);
    }

    /* The nav box is the dialog's body here, so it drops its own frame. */
    .vo-nav {
        border: none;
        box-shadow: none;
        padding: 0;
        gap: var(--sp-7);
    }

    .vo-nav__item {
        min-height: var(--touch-h);
        font-size: var(--fs-md);
        padding: var(--sp-5) var(--sp-6);
    }
}