/* ===  33. Mobile tab bar  ================================================ */
.mobile-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: calc(52px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--surface-overlay);
    border-top: var(--border-width) solid var(--border);
    align-items: center;
    justify-content: space-around;
}

.mobile-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    background: none;
    border: none;
    color: var(--content-muted);
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.mobile-tab.active { color: var(--action); }

.mobile-tab-create {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--success);
    text-transform: none;
    letter-spacing: 0;
}

/* ===  34. Mobile more-popover  =========================================== */
.mobile-more-popover {
    display: none;
    position: fixed;
    bottom: calc(52px + env(safe-area-inset-bottom));
    right: 0.5rem;
    z-index: 1101;
    background-color: var(--surface-raised);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--bevel-raised), 0 calc(-1 * var(--shadow-offset)) 0 var(--shadow-color);
    padding: var(--gap-bound);
    min-width: 160px;
}
.mobile-more-popover.visible { display: block; }
.mobile-more-popover button {
    display: block;
    width: 100%;
    padding: var(--gap-peer) var(--gap-group);
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--content);
    font-family: inherit;
    font-size: var(--font-size-base);
    text-align: left;
    cursor: pointer;
}
.mobile-more-popover button:hover {
    background-color: var(--surface-sunken);
}

/* ===  35. Mobile search bar  ============================================= */
.mobile-search-bar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: var(--gap-peer) var(--gap-group);
    gap: var(--gap-peer);
    background-color: var(--surface-page);
    border-bottom: var(--border-width) solid var(--border);
}
/* Both carry `.field`. They were the only two fields in the app with no bevel
   at all, filled with --surface-overlay against the mobile bar's own page
   fill, so mobile and desktop disagreed about what an input looks like. They
   agree now, and the fill and edge come from the same place as everywhere
   else. */
.mobile-search-input {
    flex: 1;
    font-family: inherit;
}
.mobile-sort-select {
    font-family: inherit;
    font-size: var(--font-size-md);
}

/* ===  36. Mobile back button  ============================================ */
.mobile-back-btn { display: none; }

/* ===  37. Pull-to-refresh indicator  ===================================== */
.pull-to-refresh-indicator {
    display: none;
    text-align: center;
    padding: var(--gap-group);
    font-size: var(--font-size-md);
    color: var(--content-muted);
}
.pull-to-refresh-indicator.visible {
    display: block;
}

/* ===  38. Source-badge on items (mobile-only display)  =================
   Hidden on desktop; shown inside the @media (max-width: 599px) block below.
   ========================================================================== */
.article-source-badge { display: none; }

/* ===  39. @media (max-width: 599px): mobile layout  ====================
   599px is SizeClass::Compact's upper edge, not a number chosen here. It was
   768px until 2026-08-11, which is a boundary no size class has: a window
   between 600 and 767 got the single-pane shell while every generated
   stylesheet beside it was still laying out the wide one. build.rs checks this
   against makeover-geometry now, so the two cannot part again.
   ========================================================================== */