/* Responsive breakpoints. Must be loaded LAST — overrides other modules */

@media (max-width: 768px) {
    .profile-card { padding: 20px; gap: 16px; }
    .two-col { grid-template-columns: 1fr; gap: 14px; }

    /* Drawer becomes a bottom-sheet */
    .drawer { justify-content: stretch; align-items: flex-end; }
    .drawer-panel {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: calc(88vh - env(safe-area-inset-bottom));
        border-left: none;
        border-top: 1px solid var(--border);
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        transform: translateY(100%);
        box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.18);
    }
    .drawer.open .drawer-panel { transform: translateY(0); }
    /* When a drawer has no foot, let its body own the safe-area padding */
    .drawer-panel:not(:has(.drawer-foot)) .drawer-body {
        padding-bottom: max(18px, calc(18px + env(safe-area-inset-bottom)));
    }
    .drawer-panel::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border-strong);
        border-radius: 2px;
        margin: 8px auto 0;
        flex-shrink: 0;
    }

    .reader-foot { grid-template-columns: 1fr; row-gap: 4px; }
    .reader-foot dt { margin-top: 8px; }
}

@media (max-width: 860px) {
    .topbar {
        display: flex;
        gap: 10px;
        padding: 0 18px;
    }
    .topbar > .brand,
    .topbar > .topbar-actions { justify-self: auto; }
    .topbar > .topbar-actions { margin-left: auto; }
    .topbar-search {
        flex: 1 1 auto;
        max-width: none;
        margin: 0;
    }
    .brand-name { display: none; }
}

@media (max-width: 640px) {
    .topbar {
        padding: 0 12px;
        height: 56px;
        min-height: 56px;
        gap: 8px;
    }
    .brand-name { display: none; }

    /* Compact profile trigger on mobile: avatar + caret only */
    .profile-trigger { padding: 4px; gap: 4px; }
    .profile-name-wrap { display: none; }
    .profile-caret { display: none; }

    /* Profile dropdown becomes a bottom-sheet on mobile */
    .profile-menu:has(.profile-dropdown:not([hidden]))::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 49;
        animation: sheetBackdropIn .22s ease;
    }
    html[data-theme="dark"] .profile-menu:has(.profile-dropdown:not([hidden]))::before {
        background: rgba(0, 0, 0, 0.6);
    }

    .profile-dropdown {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-top: 1px solid var(--border);
        border-radius: 14px 14px 0 0;
        padding: 6px 10px max(14px, calc(14px + env(safe-area-inset-bottom)));
        box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.18);
        animation: sheetIn .24s cubic-bezier(0.2, 0.8, 0.25, 1);
    }
    .profile-dropdown::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border-strong);
        border-radius: 2px;
        margin: 8px auto 6px;
    }
    .profile-dropdown-head { padding: 12px 10px 14px; }
    .profile-dropdown-divider { margin: 4px -10px; }
    .profile-dropdown-item {
        padding: 13px 12px;
        font-size: 14px;
        border-radius: 6px;
    }
    .profile-dropdown-item svg { width: 18px; height: 18px; }

    @keyframes sheetIn {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    @keyframes sheetBackdropIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Search bar shrinks on mobile */
    .feed-search { height: 34px; padding: 0 4px 0 10px; gap: 6px; }
    .feed-search input { font-size: 13px; }
    .feed-filter-btn { width: 26px; height: 26px; }

    .login-main { padding: 24px 16px; }
    .login-card { padding: 28px 22px; }
    .login-card::before { left: 16px; right: 16px; }
    .login-header h1 { font-size: 22px; }

    .profile-main { padding: 20px 14px 48px; }
    .profile-form { gap: 12px; }

    /* Feed cards on mobile */
    .feed-main { padding: 16px 14px 80px; gap: 12px; }
    .feed-card { padding: 12px 14px; row-gap: 4px; }
    .feed-card-title { font-size: 14px; }
    .feed-card-excerpt { -webkit-line-clamp: 2; font-size: 12.5px; }
    .feed-card-meta { font-size: 10.5px; gap: 6px; }

    .reader-bar { padding: 8px 12px; height: 52px; gap: 8px; }
    .reader-article { padding: 28px 16px 60px; }
    .reader-index { min-width: 54px; font-size: 11px; }

    .footpage { padding: 16px; }
}

@media (max-width: 380px) {
    .topbar { padding: 0 10px; gap: 6px; }
    .feed-search { padding: 0 3px 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}