/**
 * ShadowSeek Mobile Web Readability — overrides ultra-compact density on phones.
 * Loaded after shadowui_density / mobile_cyber_nav for ≤820px surfaces.
 */

@media (max-width: 820px) {
    :root {
        --ss-density-scale: 1;
        --ss-text-xs: clamp(0.68rem, 0.66rem + 0.12vw, 0.78rem);
        --ss-text-sm: clamp(0.76rem, 0.74rem + 0.16vw, 0.88rem);
        --ss-text-base: clamp(0.9rem, 0.86rem + 0.24vw, 1rem);
        --ss-text-md: clamp(0.96rem, 0.92rem + 0.28vw, 1.08rem);
        --ss-text-lg: clamp(1.04rem, 1rem + 0.32vw, 1.16rem);
        --ss-mweb-caption: 0.72rem;
        --ss-mweb-label: 0.8rem;
        --ss-mweb-body: 0.94rem;
        --ss-mweb-title: 1.2rem;
        --ss-mweb-muted: rgba(210, 214, 222, 0.94);
    }

    html {
        font-size: clamp(15px, 14px + 0.4vw, 17px);
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body.ss-shell-body {
        font-size: var(--ss-text-base);
        line-height: 1.48;
        color: #f4f6fa;
    }

    body.ss-shell-body :where(p, li, label, .su-content-main) {
        line-height: 1.5;
    }

    /* Bottom nav: legible tab labels */
    body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__dock-item,
    body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__dock--native .ss-mobile-bottom-nav__dock-item {
        font-size: var(--ss-mweb-caption) !important;
        line-height: 1.15 !important;
        color: var(--ss-mweb-muted) !important;
    }

    body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__dock-item.is-active,
    body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__dock-item[aria-current="page"] {
        color: #ffffff !important;
    }

    body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__rail .ss-mobile-bottom-nav__item {
        font-size: var(--ss-mweb-label) !important;
    }

    /* Shell chrome */
    body.ss-shell-body .su-logo__sub,
    body.ss-shell-body .su-link__guard,
    body.ss-shell-body .su-topbar__meta {
        font-size: max(0.72rem, var(--ss-text-xs)) !important;
        color: rgba(220, 226, 236, 0.9) !important;
    }

    /* Feed actions & meta */
    body.ss-shell-body .feed-action__label {
        font-size: 0.72rem !important;
    }

    body.ss-feed-body .feed-switch__btn {
        font-size: var(--ss-mweb-label) !important;
    }

    body.ss-feed-body .feed-topbar,
    body.ss-feed-body .feed-meta,
    body.ss-feed-body .feed-author__name {
        font-size: max(0.88rem, var(--ss-mweb-body)) !important;
    }

    /* Topbar: compact guest strip + one horizontally scrollable action bar */
    body.ss-shell-body .su-topbar {
        padding: 6px 8px 8px !important;
    }

    body.ss-shell-body .su-topbar-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    body.ss-shell-body .su-guest-hint {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 5px 8px !important;
        gap: 8px !important;
        border-radius: 14px !important;
        font-size: 0.76rem !important;
    }

    body.ss-shell-body .su-guest-hint__copy strong {
        font-size: 0.68rem !important;
    }

    body.ss-shell-body .su-guest-hint__copy span {
        font-size: 0.68rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.ss-shell-body .su-guest-hint__cta {
        min-height: 34px !important;
        padding: 0 10px !important;
        font-size: 0.68rem !important;
    }

    body.ss-shell-body .su-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 2px 0 4px !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        touch-action: pan-x;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.ss-shell-body .su-actions::-webkit-scrollbar {
        display: none;
    }

    body.ss-shell-body .su-actions:has(.su-btn-auth) {
        display: flex !important;
        grid-template-columns: none !important;
    }

    body.ss-shell-body .su-actions > * {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
    }

    body.ss-shell-body .su-top-action {
        min-height: 38px !important;
        max-width: none !important;
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
    }

    body.ss-shell-body .su-btn-auth {
        min-height: 38px !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 0 12px !important;
        font-size: 0.72rem !important;
        white-space: nowrap;
    }

    body.ss-shell-body .su-wallet.ss-wallet-chip {
        min-width: 88px !important;
        min-height: 38px !important;
        padding: 4px 8px !important;
    }

    body.ss-shell-body .su-wallet .ss-wallet-chip__balance {
        font-size: 0.92rem !important;
    }

    body.ss-shell-body .su-btn-plus,
    body.ss-shell-body .ss-shell-notify__trigger,
    body.ss-shell-body .su-userline {
        min-width: 38px !important;
        min-height: 38px !important;
        width: 38px !important;
        height: 38px !important;
    }

    body.ss-shell-body .ss-theme-toggle {
        min-height: 38px !important;
        padding: 0 8px !important;
    }

    body.ss-shell-body .ss-theme-toggle__label {
        display: none;
    }

    /* Bottom nav: full-bleed dock — fixes left:50% + translateX drift on phones */
    body.ss-shell-body .su-bottom-nav.ss-mobile-bottom-nav,
    body.ss-shell-body .su-bottom-nav.ss-mobile-bottom-nav.ss-mobile-bottom-nav--social-dock {
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        bottom: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        padding: 4px 8px calc(6px + env(safe-area-inset-bottom)) !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.ss-shell-body .ss-mobile-bottom-nav--streamlined .ss-mobile-bottom-nav__shell {
        display: flex !important;
        overflow-x: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.ss-shell-body .ss-mobile-bottom-nav--streamlined .ss-mobile-bottom-nav__rail {
        display: none !important;
    }

    body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__dock,
    body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__dock--native {
        display: flex !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: var(--ss-mweb-tab-h, 56px) !important;
        overflow: visible !important;
        padding-top: 4px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__dock-item {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body.ss-shell-body .su-content,
    body.ss-shell-body.ss-live-body .su-content,
    body.ss-shell-body.ss-live-viewer-page .su-content,
    body.ss-shell-body.live-studio-body .su-content,
    body.ss-shell-body.ss-feed-body .su-content,
    body.ss-shell-body.ss-live-feed-page .su-content,
    body.profile-page-body .su-content,
    body.shadow-match-body .su-content,
    body.ss-shell-body.upload-body .su-content {
        padding-bottom: calc(var(--ss-mweb-tab-h, 56px) + 12px + env(safe-area-inset-bottom)) !important;
    }

    body.ss-feed-body .su-content {
        padding-bottom: calc(var(--ss-mweb-tab-h, 56px) + env(safe-area-inset-bottom)) !important;
    }

    body.ss-shell-body .ss-floating-dock,
    body.ss-shell-body [data-ss-floating-dock] {
        display: none !important;
    }
}

@media (max-width: 380px) {
    body.ss-shell-body .ss-mobile-bottom-nav--social-dock .ss-mobile-bottom-nav__dock-item {
        font-size: 0.68rem !important;
    }
}

/* app.shadowseek.de — standalone landing (no unified shell) */
@media (max-width: 820px) {
    body.app-download-body {
        font-size: 1rem;
        line-height: 1.55;
    }

    body.app-download-body .app-download-hero__lead,
    body.app-download-body .app-download-spot__lead,
    body.app-download-body .app-download-feature p,
    body.app-download-body .app-download-step p,
    body.app-download-body .app-download-archive-card p {
        color: rgba(236, 240, 248, 0.92);
        line-height: 1.62;
    }

    body.app-download-body .app-download-top__nav a {
        color: rgba(255, 255, 255, 0.9);
    }
}