/* ux-nav: one shell for the shop and the signed-in app — a named navigation rail on wide screens,
   a bottom tab bar on phones, clickable course cards and a quieter first-run home page.
   Colours come from the tokens in app.css so both themes follow. */

/* ---------------------------------------------------------------- the rail: every item says what it is */

.rail__label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

.rail__btn {
    position: relative;
    text-decoration: none;
}

.rail__btn--fab {
    background: var(--brand);
    color: var(--brand-fg);
}

.rail__btn--fab:hover { background: var(--brand-700); color: #fff; }

.rail__fabmark {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
}

/* Narrow rail: the name is a flyout on hover or keyboard focus, so nothing is guesswork. */
.rail__btn .rail__label {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--surface);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    opacity: 0;
    pointer-events: none;
    z-index: 40;
}

.rail__btn:hover .rail__label,
.rail__btn:focus-visible .rail__label { opacity: 1; }

/* Wide screens have the room: show the names all the time. */
@media (min-width: 1400px) {
    .rail { align-items: stretch; padding: 14px 10px; width: 196px; }
    .rail__logo { margin-left: 8px; justify-content: flex-start; }
    .rail__group { align-items: stretch; }

    .rail__btn {
        width: auto;
        height: 40px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 10px;
    }

    .rail__btn .rail__label {
        position: static;
        transform: none;
        padding: 0;
        border-radius: 0;
        background: none;
        color: inherit;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
    }

    .rail__avatar { margin-left: 10px; }
}

/* ---------------------------------------------------------------- phones: a bottom tab bar, not a rail */

.botnav { display: none; }

@media (max-width: 760px) {
    .rail { display: none; }

    .botnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: flex;
        background: var(--surface);
        border-top: 1px solid var(--line);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .botnav__item {
        flex: 1;
        min-height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 2px;
        color: var(--muted);
        text-decoration: none;
    }

    .botnav__item.active { color: var(--brand-ink); }

    .botnav__label {
        font-size: 11px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
    }

    /* Room for the bar, so it never covers the last thing on the page. */
    .app__main,
    .pub__main,
    .ws__main,
    .raillayout__main { padding-bottom: 84px; }
}

/* ---------------------------------------------------------------- the shop, signed in */

.pub--signedin { display: flex; flex-direction: column; min-height: 100vh; }
.pub--signedin .pub__main { flex: 1; }

/* The primary tabs scroll sideways rather than wrapping on a narrow screen. */
@media (max-width: 760px) {
    .tabs__inner {
        gap: 18px;
        padding: 0 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tabs__inner::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------------- a course card opens its course */

.lcard--clickable { position: relative; }

/* The title carries the link; the overlay makes the whole card the same target. */
.lcard--clickable .lcard__open::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.lcard--clickable:hover { border-color: var(--tint-brand-line); }

.lcard--clickable .lcard__fav,
.lcard--clickable .lcard__actions {
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------------- a home page a newcomer can read */

.dash--first .dash__content { max-width: 720px; }

.firstrun {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
}

.firstrun__title {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
}

.firstrun__cta { display: inline-flex; }

.savedblock + .savedblock { margin-top: 28px; }