/*
 * Shared smartphone-optimization rules, loaded on every page after Bootstrap.
 * Kept additive: only affects the nav bar and the dense story-control button
 * cluster, never changes desktop-width sizing.
 */

.app-nav {
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .app-nav .btn,
    .story-controls-actions .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .app-nav {
        gap: 0.5rem !important;
    }

    .story-controls-actions {
        gap: 0.4rem !important;
    }
}

/* story/list.html + story/public-list.html row layout */
.story-list-item-link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.story-list-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
}