/*
 * Application layout: skip link, bottom tab bar under 1024px (64rem), side navigation from 1024px.
 * Heights are min-heights only; labels wrap and are never truncated.
 * Direction "encre & contour" (2b, DESIGN.md): the active entry carries a single ink rule,
 * icons come from assets/icons/icons.svg in currentColor.
 */

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    /* Room for the fixed tab bar (below): its measured height (tab-bar controller), else an allowance. */
    padding-bottom: var(--tab-bar-height, calc(var(--tabbar-min-height) + 2rem + env(safe-area-inset-bottom, 0px)));
}

/* Pages without a session (layout/public.html.twig): no side navigation, main and its discreet footer
   stacked on every width (the doubled class outweighs the row direction of the desktop layout), and no tab
   bar to keep room for, neither at the bottom of the page nor in the scroll padding (base.css). */
.app-shell.app-shell--public {
    flex-direction: column;
    padding-bottom: 0;
}

html:has(.app-shell--public) {
    scroll-padding-bottom: var(--space-4);
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: var(--space-5) var(--margin-mobile) var(--space-8);
    /* While a toast is shown, room for its region at the foot (toast-region controller): the last content can be
       scrolled above it, never left under it. Nothing changes without a toast. */
    padding-bottom: calc(var(--space-8) + var(--toast-room, 0px));
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Skip link: hidden until focused. */
.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 100;
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-surface-card);
    color: var(--color-ink);
    font: var(--font-button);
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: none;
}

/* ===== Mobile tab bar ===== */
/*
 * Fixed, not sticky: a sticky bar settles into its place in the flow at the very bottom of the page, and a
 * page whose height is not a whole number of pixels (rem-based lines) ends a fraction of a pixel short of
 * the last scroll position, so the bar jumped up by that fraction there. .app-shell keeps its room.
 */
.tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    min-height: var(--tabbar-min-height);
    padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface-card);
    border-top: 2px solid var(--color-line);
}

.tab-bar__list {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tab-bar__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.tab-bar__item--capture {
    flex: 0 0 auto;
    align-items: flex-start;
}

.tab-bar__link {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: var(--touch-min);
    padding: var(--space-1) 0.125rem;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    color: var(--color-ink);
    font: var(--font-tab-label);
    /* Every label at 800: the active tab no longer changes the row's metrics. */
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Inactive: same ink, dimmed icon only. */
.tab-bar__icon {
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.6;
}

/* The rule is always in the flow, transparent when inactive: no reflow on navigation. */
.tab-bar__link::after {
    content: "";
    width: 1.375rem;
    height: 3px;
    border-radius: var(--radius-full);
    background: transparent;
}

/* Active tab: a 3px ink rule under the label (a shape, not a colour) and a full-strength icon. */
.tab-bar__link[aria-current] .tab-bar__icon {
    opacity: 1;
}

.tab-bar__link[aria-current]::after {
    background: var(--color-ink);
}

.tab-bar__capture {
    display: grid;
    place-items: center;
    /* Grows with the text but is capped so that the bar still fits 320px at 200% text. */
    width: min(3.625rem, 72px);
    min-height: min(3.625rem, 72px);
    margin-top: -1.125rem;
    /* Squircle, no offset shadow. */
    border: 3px solid var(--color-surface-card);
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font: var(--font-headline);
    font-size: min(2rem, 40px);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.tab-bar__capture:focus-visible {
    box-shadow: 0 0 0 var(--focus-halo-width) var(--color-focus-halo);
}

/* ===== Desktop side navigation ===== */
.side-nav {
    display: none;
}

@media (min-width: 64rem) {
    .app-shell {
        flex-direction: row;
        align-items: flex-start;
    }

    .app-main {
        padding-inline: var(--space-8);
    }

    .tab-bar {
        display: none;
    }

    .app-shell {
        padding-bottom: 0;
    }

    html {
        scroll-padding-bottom: var(--space-4);
    }

    .side-nav {
        position: sticky;
        top: 0;
        flex: 0 0 var(--sidenav-width);
        width: var(--sidenav-width);
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        padding: var(--space-6) var(--space-4);
        background: var(--color-surface-card);
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .side-nav__brand {
        padding-inline: var(--space-3);
        font: var(--font-headline);
        color: var(--color-ink);
    }

    .side-nav__list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    /* The member's own entries, at the foot (components/_account_entries.html.twig). */
    .side-nav__list--footer {
        margin-top: auto;
    }

    /* « Se déconnecter », a form's button drawn as the links around it. */
    .side-nav .sign-out {
        display: flex;
    }

    .side-nav__link.sign-out__button {
        flex: 1 1 auto;
        border: 0;
        background: none;
        text-align: left;
        cursor: pointer;
    }

    .side-nav__capture {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: 3rem;
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-sm);
        background: var(--color-primary);
        color: var(--color-on-primary);
        font: var(--font-button);
        font-weight: 800;
        text-align: center;
        text-decoration: none;
    }

    .side-nav__capture:focus-visible {
        box-shadow: 0 0 0 var(--focus-halo-width) var(--color-focus-halo);
    }

    .side-nav__link {
        position: relative;
        display: flex;
        /* The number of friend requests goes under « Amis » when the line is too narrow. */
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
        min-height: var(--touch-min);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        color: var(--color-ink);
        font: var(--font-button);
        font-weight: 800;
        text-decoration: none;
    }

    .side-nav__icon {
        opacity: 0.6;
    }

    /*
     * Same single signal as the tab bar: a straight 3px ink rule on the left and a full-strength icon.
     * A pseudo-element rather than an inset shadow, which would follow the rounded corners.
     */
    .side-nav__link[aria-current]::before {
        content: "";
        position: absolute;
        top: var(--space-2);
        bottom: var(--space-2);
        left: 0;
        width: 3px;
        border-radius: var(--radius-full);
        background: var(--color-ink);
    }

    .side-nav__link[aria-current] .side-nav__icon {
        opacity: 1;
    }
}

/*
 * Windows high contrast (forced colours): backgrounds are replaced by the system colour, which would
 * erase the active rule, now the only visual sign of the current page. Paint it in CanvasText.
 */
@media (forced-colors: active) {
    .tab-bar__link[aria-current]::after,
    .side-nav__link[aria-current]::before {
        forced-color-adjust: none;
        background: CanvasText;
    }
}