@media (max-width: 599px) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: calc(52px + env(safe-area-inset-bottom));
    }

    .mobile-tab-bar { display: flex; }
    .header { display: none; }
    .main { flex-direction: column; }

    .sidebar {
        display: none;
        width: 100%;
        min-width: 0;
        border-right: none;
    }
    .sidebar.mobile-visible {
        display: flex;
        flex: 1;
    }

    .items-panel { width: 100%; }
    .items-panel.mobile-hidden { display: none; }

    .detail-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-width: 0;
        z-index: 1050;
        border-left: none;
    }

    body.mobile-detail-open .mobile-tab-bar { display: none; }
    body.mobile-detail-open { padding-bottom: 0; }
    body.mobile-detail-open .detail-panel {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-back-btn {
        display: inline-flex;
        margin-right: auto;
        font-size: var(--font-size-md);
    }

    .mobile-search-bar { display: flex; }

    /* Larger tap targets. Spacing is not listed here: the touch preset in
       css/geometry.css opens every gap at once under (hover: none). What
       remains is the parts a density preset cannot express. */
    .star-btn { font-size: var(--font-size-2xl); }
    .source-item { min-height: 3rem; }

    /* Modal as bottom sheet */
    .modal-overlay { align-items: flex-end; }
    .modal-content {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 85vh;
    }
    .modal-content::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background-color: var(--border-strong);
        border-radius: var(--radius-xs);
        margin: var(--gap-peer) auto;
    }
    .modal-header { border-radius: 0; }

    /* Toast above tab bar */
    .toast-container {
        bottom: calc(60px + env(safe-area-inset-bottom));
        right: 0.75rem;
        left: 0.75rem;
    }

    /* Update banner above tab bar */
    .update-banner {
        bottom: calc(60px + env(safe-area-inset-bottom));
    }

    /* Source badge on items */
    .article-source-badge {
        display: inline-block;
        background-color: var(--surface-sunken);
        color: var(--content-secondary);
        font-size: var(--font-size-xxs);
        font-weight: 600;
        padding: 0 var(--step-snug);
        border-radius: var(--radius-sm);
        margin-top: var(--step-hair);
    }

    /* Bold unread item titles */
    .row--article.is-unread .row-primary { font-weight: 700; }

    /* Sticky detail header */
    .detail-header {
        position: sticky;
        top: 0;
        z-index: 5;
    }
    .detail-panel { -webkit-overflow-scrolling: touch; }
    .detail-body { line-height: 1.8; }

    /* Horizontal-scroll tag filter bar */
    .tag-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tag-filter-bar::-webkit-scrollbar { display: none; }

    /* Help shortcuts single column */
    .help-shortcuts { grid-template-columns: 1fr; }
}

/* ===  40. @media (hover: none): touch overrides  ====================== */
@media (hover: none) {
    .row--article:hover { background-color: transparent; }
    .row--article.is-unread:hover { background-color: color-mix(in srgb, var(--danger) 6%, var(--surface-page)); }
    .row--article.is-selected:hover { background-color: var(--surface-sunken); }
    .row--article.is-unread.is-selected:hover { background-color: color-mix(in srgb, var(--danger) 12%, var(--surface-page)); }
    .source-item:hover { background-color: transparent; }
    .source-item.active:hover { background-color: var(--surface-sunken); }
    .sidebar-saved:hover { background-color: transparent; }
    .sidebar-saved.active:hover { background-color: var(--surface-sunken); }
    /* Border only. The `background-color` half was taking back the generated
       hover fill, and makeover-webview wraps its own hover in
       (hover: hover) and (pointer: fine) now, so on a fingertip there is
       nothing left to take back. What remains undoes this file's own
       `.button:hover { border-color: var(--border-strong) }` above, which
       makeover has no opinion about. */
    .button:hover { border-color: var(--border); }
    .button--primary:hover { background-color: var(--action); border-color: var(--action); }
    .button--success:hover { background-color: var(--category-four); border-color: var(--category-four); }
    .star-btn:hover { color: var(--content-muted); transform: none; }
    .star-btn.starred:hover { color: var(--category-four); }
    .tag-chip:hover { border-color: var(--border); color: var(--content-secondary); }
    .tag-chip.active:hover { border-color: var(--category-four); }
    .plugin-item:hover { border-color: var(--border); }
    .context-menu-item:hover { background-color: transparent; }
}

/* ===  41. @media (prefers-reduced-motion: reduce)  ====================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===  42. Webkit scrollbar  ============================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
/* The clearest place in the app to read the bevel pair against each other. */
::-webkit-scrollbar-track { background: var(--surface-overlay); box-shadow: var(--bevel-inset); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-xs); box-shadow: var(--bevel-raised); }
::-webkit-scrollbar-thumb:hover { background: var(--content-muted); }