@layer layout {
    /* Base-access home */
    .home {
        display: grid;
        gap: var(--space-4);
    }

    .home__title {
        font-family: var(--font-display);
        font-size: var(--text-2xl);
        font-weight: 700;
    }

    .home__lede {
        color: var(--text-muted);
        margin-top: calc(-1 * var(--space-3));
    }

    .home__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--space-4);
    }

    .tile {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: var(--space-1);
        min-height: 190px;
        padding: var(--space-5);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-lg);
        background-color: var(--surface-1);
        background-size: cover;
        background-position: center;
        text-align: start;
        color: #fff;
        transition: border-color 120ms var(--ease);
    }

    .tile:hover {
        border-color: var(--text-dim);
    }

    .tile--hero { min-height: 220px; }
    .tile--rules { background-image: linear-gradient(to top, rgb(14 16 19 / 0.97) 30%, rgb(14 16 19 / 0.55) 70%, rgb(14 16 19 / 0.2)), url('../assets/3-server-rules.svg'); }
    .tile--arena-signup { background-image: linear-gradient(to top, rgb(14 16 19 / 0.97) 30%, rgb(14 16 19 / 0.55) 70%, rgb(14 16 19 / 0.2)), url('../assets/1-arena-registration.svg'); border-color: rgb(201 164 92 / 0.55); }
    .tile--arena-bets { background-image: linear-gradient(to top, rgb(14 16 19 / 0.97) 30%, rgb(14 16 19 / 0.55) 70%, rgb(14 16 19 / 0.2)), url('../assets/2-arena-betting.svg'); border-color: rgb(201 164 92 / 0.55); }
    .tile--exam { background-image: linear-gradient(to top, rgb(14 16 19 / 0.97) 30%, rgb(14 16 19 / 0.55) 70%, rgb(14 16 19 / 0.2)), url('../assets/4-crime-rules-exam.svg'); }
    .tile--apply { background-image: linear-gradient(to top, rgb(14 16 19 / 0.97) 30%, rgb(14 16 19 / 0.55) 70%, rgb(14 16 19 / 0.2)), url('../assets/5-crime-family-application.svg'); }

    .tile__title {
        font-family: var(--font-display);
        font-size: var(--text-xl);
        font-weight: 700;
    }

    .tile__text {
        color: rgb(255 255 255 / 0.8);
        font-size: var(--text-sm);
        max-width: 48ch;
    }

    /* Phone menu */
    .hub__title {
        font-family: var(--font-display);
        font-size: var(--text-xl);
        margin-bottom: var(--space-4);
    }

    .hub__list {
        display: grid;
        gap: var(--space-2);
    }

    .hub__item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-height: 3rem;
        padding: 0 var(--space-4);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--surface-1);
        text-align: start;
    }

    .hub__item--arena { color: var(--brass-text); border-color: rgb(201 164 92 / 0.4); }
    .hub__item--danger { color: var(--danger-text); }

    .bottom-nav,
    .fab,
    .swipe-hint {
        display: none;
    }

}

@layer features {
    @media (max-width: 900px) {
        :root {
            --topbar-height: 52px;
        }

        .topbar__product,
        .topbar__status,
        .profile__name,
        .topbar__actions .btn span {
            display: none;
        }

        .app__body {
            grid-template-columns: minmax(0, 1fr);
        }

        .sidebar {
            display: none;
        }

        .main {
            /* Room for the bottom nav plus the floating button above it. */
            padding: var(--space-4) var(--space-4) calc(9rem + env(safe-area-inset-bottom));
        }

        .page__header {
            flex-direction: column;
            align-items: stretch;
        }

        .page__title {
            font-size: var(--text-xl);
        }

        .span-6 {
            grid-column: span 12;
        }

        .card-grid,
        .split {
            grid-template-columns: minmax(0, 1fr);
        }

        .toolbar .field {
            flex: 1 1 100%;
        }

        .bottom-nav {
            position: fixed;
            z-index: 30;
            inset-inline: 0;
            bottom: 0;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            padding-bottom: env(safe-area-inset-bottom);
            background: var(--surface-sunken);
            border-top: 1px solid var(--line);
        }

        .bottom-nav__item {
            position: relative;
            display: grid;
            justify-items: center;
            gap: 2px;
            padding: var(--space-2) 0;
            border: 0;
            background: none;
            color: var(--text-dim);
            font-size: 0.7rem;
        }

        .bottom-nav__item svg.lucide {
            width: 1.35rem;
            height: 1.35rem;
        }

        .bottom-nav__badge {
            position: absolute;
            top: 4px;
            inset-inline-end: calc(50% - 1.4rem);
            min-width: 1.1rem;
            padding: 0 0.25rem;
            border-radius: var(--radius-sm);
            background: var(--danger);
            color: #fff;
            font-size: 0.65rem;
            line-height: 1.1rem;
        }

        .fab {
            position: fixed;
            z-index: 30;
            bottom: calc(4.5rem + env(safe-area-inset-bottom));
            left: var(--space-4);
            display: grid;
            place-items: center;
            width: 3.25rem;
            height: 3.25rem;
            border: 0;
            border-radius: var(--radius-lg);
            background: var(--accent-strong);
            color: #fff;
            box-shadow: var(--shadow-overlay);
        }

        body[data-access='base'] .fab {
            display: none;
        }

        .swipe-hint {
            position: fixed;
            z-index: 40;
            top: 50%;
            right: 0;
            display: grid;
            place-items: center;
            width: 2.5rem;
            height: 4rem;
            border-radius: var(--radius-lg) 0 0 var(--radius-lg);
            background: var(--accent-strong);
            color: #fff;
            opacity: 0;
            transform: translateY(-50%) translateX(calc(var(--progress, 0) * -0.75rem));
            pointer-events: none;
        }

        .swipe-hint.is-visible {
            opacity: var(--progress, 0);
        }

        /* Tables stack into one card per row, labelled by data-label. */
        .table thead { display: none; }
        .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
        .table-wrap { border: 0; overflow: visible; }
        .table tr { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); }
        .table td { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
        .table td[data-label]::before { content: attr(data-label); color: var(--text-dim); font-size: var(--text-xs); }
        .table td:empty { display: none; }
    }
}