/* ============================================================
   inveni — mobile.css
   Phone/tablet responsive overlay. Loaded LAST after landing.css
   so it wins specificity ties.

   Breakpoints
     lg : ≤ 1024px  tablet portrait — minor padding/grid tighten
     md : ≤  768px  sidebar collapses to bottom tab bar; layout
                    becomes vertical block; cmp-cards stack
     ldg: ≤  600px  landing-only finer tier
     sm : ≤  480px  phone portrait — tightest spacings, full-bleed

   Targets only the new design-system primitives (.sidebar,
   .paper-card, .cmp-cards, .auth-card, .review-list, .foot-grid,
   .l-hero, .l-features, .l-cta-row). Legacy app-shell.css mobile
   blocks reference DOM classes the redesign retired and are
   effectively dead — no need to touch them.
   ============================================================ */


/* ============ Always-on: kill horizontal overflow ============
   THE ROOT CAUSE (diagnosed via debug overlay on a real Samsung S22):
   #view-landing is `display: flex; flex-direction: column`. Its child
   .page is a flex item with default `min-width: auto`, which means it
   cannot shrink below its min-content size. The .uni-wheel-track
   inside has `width: max-content` (~1080 px) — even though .uni-wheel
   has `overflow: hidden`, the track's intrinsic min-content
   propagates up through .uni-wheel to .page. Result: .page is forced
   to 1080 px wide inside a 360 px viewport, and all hero content
   renders off-screen at x=400+.

   Fix: set `min-width: 0` on the flex child (.page) so it can shrink
   to viewport width; .uni-wheel's overflow: hidden then clips the
   marquee normally. Also reapply on .uni-wheel and .inveni-landing
   itself in case section becomes a flex/grid item somewhere.

   `contain: paint` on .uni-wheel stays as a second line of defence. */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}
.inveni-landing,
.inveni-landing .page,
.inveni-landing .uni-wheel {
    min-width: 0;
}
.inveni-landing .page {
    box-sizing: border-box;
    max-width: 100%;
}
.inveni-landing .uni-wheel {
    contain: paint;
    max-width: 100%;
}


/* ============ ≥ 1025px : desktop A/B layout ============
   Desktop uses an explicit button row below the two cards instead of
   the mobile "tap-card-to-color + Save" middle column. Card-clicks
   are no-ops on this width (gated in App.tapCompCard). */
@media (min-width: 1025px) {
    .cmp-cards { grid-template-columns: 1fr 1fr; }
    .cmp-mid { display: none; }
    .cmp-paper { cursor: default; }
    .cmp-controls-desktop {
        margin-bottom: 28px;
        padding: 4px 0;
    }
}


/* ============ ≤ 1024px : tablet portrait ============ */
@media (max-width: 1024px) {
    .layout-protected { max-width: 100%; }
    #content { padding: 2rem 2rem; max-width: 100%; }

    .cmp-cards { grid-template-columns: 1fr 40px 1fr; gap: 14px; }
    .cmp-card { min-height: 220px; padding: 18px; }
    /* Desktop-only A/B button row hides at tablet width and below;
       the mobile tap-to-color + Save column stays. */
    .cmp-controls-desktop { display: none; }

    .admin-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============ ≤ 768px : phone landscape / large phone ============ */
@media (max-width: 768px) {

    /* ---------- Search tab is desktop-only (v1.3) ---------- */
    #nav-item-search { display: none !important; }
    #view-search { display: none !important; }

    /* ---------- Layout: flip to vertical block, body scrolls ---------- */
    .layout-protected {
        display: block;
        height: auto;
        max-height: none;
        overflow: visible;
        max-width: 100%;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-left: none;
        border-right: none;
    }

    /* ---------- Sidebar → bottom tab bar ---------- */
    #sidebar.sidebar,
    nav.sidebar,
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        height: 64px;
        flex-direction: row;
        padding: 0;
        border-top: 1px solid var(--border-soft);
        border-right: none;
        background: rgba(11, 14, 22, 0.92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        z-index: 50;
    }
    .sidebar__logo,
    .sidebar__foot { display: none !important; }

    .sidebar__nav {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0 4px;
        gap: 0;
    }
    .sidebar__nav li { flex: 1; list-style: none; }
    .sidebar__link {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 0 6px;
        gap: 3px;
        min-height: 44px;
        border-radius: 0;
        text-decoration: none;
    }
    .sidebar__link svg { width: 22px; height: 22px; }
    .sidebar__link .nav-label,
    .sidebar__link > span:not([data-icon]) {
        font-size: 10.5px;
        line-height: 1;
        letter-spacing: 0;
    }
    .sidebar__link.active,
    .sidebar__link.nav-link.active {
        background: transparent;
        color: var(--fg-1);
    }
    .sidebar__link.active svg { stroke: var(--signal-violet); }


    /* ---------- Main content ---------- */
    #content {
        margin-left: 0;
        max-width: 100%;
        height: auto;
        overflow: visible;
        padding: 1.25rem 1rem calc(72px + 1rem);
    }


    /* ---------- Auth (login/signup/reset) ---------- */
    /* Stay in "card" mode at this breakpoint — full-bleed was felt to be
       too aggressive by the user; cap at 420 so the card still feels like
       a card with margin around it on phone landscape / small tablets. */
    .auth-container {
        padding: 1.5rem 1rem;
        min-height: auto;
    }
    .auth-card,
    .auth-card.glass-card {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 22px;
    }


    /* ---------- Feed ---------- */
    .paper-card,
    #feedActive,
    .feed-scored-list .paper-card,
    .deck-container {
        max-width: 100%;
        padding: 18px 14px;
    }
    /* Mobile feedback mechanic: thumb buttons hidden, but keep the
       "1 / 5" counter visible (user asked for paper count on phones).
       The card itself is tap-cycled and a swipe-left advances. */
    #deckControls,
    .deck-controls {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 6px 0 4px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    #deckControls .ctrl,
    #deckControls .ctrl-btn,
    #deckControls #btnSkip,
    #deckControls #btnLike,
    #deckControls #btnDislike { display: none !important; }
    #deckControls .deck-controls-center {
        display: flex; align-items: center; justify-content: center;
        gap: 0;
    }
    #deckControls #cardCounter,
    #cardCounter.card-counter {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--fg-3);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border-hair);
        border-radius: 999px;
        padding: 4px 12px;
        letter-spacing: 0.02em;
    }
    .paper-card.active-card.mobile-tappable { cursor: pointer; touch-action: pan-y; }
    /* Entrance animation when a fresh card is mounted (after swipe submit) */
    @keyframes feedSwipeIn {
        from { transform: translateX(40px) rotate(2deg); opacity: 0; }
        to   { transform: translateX(0) rotate(0); opacity: 1; }
    }
    .paper-card.active-card.mobile-tappable.swipe-in {
        animation: feedSwipeIn 320ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .paper-card.active-card.mobile-tappable.rate-green {
        border-color: rgba(34, 197, 94, 0.6);
        box-shadow: 0 0 32px rgba(34, 197, 94, 0.42), 0 0 8px rgba(34, 197, 94, 0.28);
    }
    .paper-card.active-card.mobile-tappable.rate-red {
        border-color: rgba(244, 63, 94, 0.6);
        box-shadow: 0 0 32px rgba(244, 63, 94, 0.36), 0 0 8px rgba(244, 63, 94, 0.24);
    }
    .paper-card.active-card.mobile-tappable.rate-neutral {
        /* Subtle hint that taps work — base shadow only. */
    }


    /* ---------- Comparison cards: stack vertically; Skip/Save row between ---------- */
    .cmp-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    /* The middle column (Skip + Save) becomes a horizontal row of two
       pill buttons between Card A and Card B. */
    .cmp-mid {
        flex-direction: row !important;
        justify-content: center;
        gap: 12px;
        padding: 4px 0;
    }
    .cmp-mid-btn { flex: 1; max-width: 220px; }
    /* Each card capped so two cards + progress + mid row all fit a phone
       viewport without the page itself scrolling. Abstract scrolls inside
       the card via the desktop overflow-y rule. */
    .cmp-paper {
        height: auto;
        max-height: 38vh;
        padding: 18px 16px 14px;
    }
    /* Intro overlay: full-screen on phones for clarity */
    .comp-intro-overlay { padding: 16px; }
    .comp-intro-card { padding: 22px 18px; max-width: 100%; }
    .comp-intro-list li { font-size: 13.5px; }


    /* ---------- Onboarding wizard ---------- */
    .review-list { max-height: 60vh; }
    .onboarding-card,
    .card.onboarding-card { padding: 22px 18px; }


    /* ---------- Profile + Admin grids → single column ---------- */
    .admin-grid { grid-template-columns: 1fr; }


    /* ---------- View headers ---------- */
    .view-head,
    .view-header { padding-left: 0; padding-right: 0; }
    .view-head h1,
    .view-header h1 { font-size: 30px; }


    /* ---------- Zotero modal ---------- */
    .zotero-modal-card {
        width: 100vw;
        max-width: 100vw;
        max-height: 92vh;
        border-radius: 12px 12px 0 0;
    }


    /* ---------- History — single-row nav: Prev | range | Next | calendar ---------- */
    .history-nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding: 10px 12px;
        position: relative;
    }
    .history-week-label {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .history-nav-btn {
        flex-shrink: 0;
        padding: 6px 10px;
        font-size: 12px;
    }
    .history-jump-btns { flex-wrap: wrap; gap: 6px; }
    .history-item-header { padding: 10px 12px; }
    .history-item-title { font-size: 13px; }

    /* ---------- Interest categories tree (A/B step + profile) — compact ----------
       Goal on phone: every row reads as the same visual weight (archive vs
       sub-cat differ only by indent and the toggle chevron). The arXiv code
       chip (e.g. "cond-mat.supr-con") is hidden — the English label alone
       carries enough information for the picker. */
    .cat-tree {
        max-height: 22rem;
        padding: 0.5rem 0.4rem;
    }
    .cat-archive { margin-bottom: 0.1rem; }
    .cat-archive-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.45rem;
        padding: 0.28rem 0.4rem;
        /* No min-height — the row shrinks to the content (1 line of text +
           checkbox) for visual parity with cat-sub-row. */
    }
    .cat-archive-toggle {
        flex: 0 0 0.95rem;
        width: 0.95rem;
        text-align: center;
        font-size: 0.78rem;
        color: var(--fg-3);
    }
    .cat-archive-row input[type="checkbox"] {
        flex: 0 0 15px;
        width: 15px;
        height: 15px;
        min-width: 15px;
        margin: 0;
    }
    .cat-archive-label {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.84rem;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Hide the arXiv-code chip on phones — user asked for English-only labels. */
    .cat-archive-code,
    .cat-sub-code { display: none !important; }
    /* cat-subs is now a flex column on desktop (the old auto-fill grid
       made uneven rows). Keep that model on phones too — single column,
       no leading — so rows stay uniform. */
    .cat-subs {
        display: flex;
        flex-direction: column;
        margin: 0.05rem 0 0.05rem 1.15rem;
        gap: 0;
    }
    .cat-sub-row {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.22rem 0.35rem;
        flex-wrap: nowrap;
    }
    .cat-sub-row input[type="checkbox"] {
        flex: 0 0 15px;
        width: 15px;
        height: 15px;
        min-width: 15px;
        margin: 0;
    }
    .cat-sub-label {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.82rem;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* "Reset to suggested" + "Save" row: stack on phone to avoid two-line buttons */
    #step-categories .onboarding-card > div[style*="display:flex"] {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.55rem !important;
    }
    #step-categories .onboarding-card > div[style*="display:flex"] .hint {
        margin-left: 0 !important;
        text-align: center;
    }
}


/* ============ ≤ 600px : landing tuned for phones ============ */
@media (max-width: 600px) {

    /* ---------- Layout shell ---------- */
    /* hero-pad-top is bumped from 80 → 140 to drop the logo + wordmark down
       the page (the user wants both lower while the motto stays put).
       Stars-origin = core-glow which is anchored to the mark, so the glow
       follows the logo. motto-gap shrinks to compensate. */
    .inveni-landing { --hero-pad-top: 140px; --motto-gap: 60px; }
    .inveni-landing .page { padding: 0 18px; }


    /* ---------- Top nav: drop the small landing logo entirely on mobile ---------- */
    /* Switch to flex on phones — the desktop grid (auto 1fr auto) puts .actions
       in the 3rd column, but with the brand hidden via display:none the grid
       collapses unpredictably and the buttons fall off the right edge. A
       simple flex row with end-justification keeps the buttons visible. */
    .inveni-landing nav.landing-nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding: 14px 0;
    }
    .inveni-landing nav.landing-nav .brand,
    .inveni-landing nav.landing-nav .brand img,
    .inveni-landing nav.landing-nav .links { display: none; }
    .inveni-landing nav.landing-nav .actions { display: flex; gap: 8px; }
    .inveni-landing .lbtn { padding: 7px 12px; font-size: 12px; white-space: nowrap; }


    /* ---------- Hero: take the full viewport so The Funnel sits below the fold,
       and pin the scroll hint to the very bottom edge ---------- */
    .inveni-landing .hero {
        min-height: calc(100vh - 56px);   /* full viewport minus the top nav */
        padding: var(--hero-pad-top) 0 18px;
        display: flex;
        flex-direction: column;
    }
    /* Mark + wordmark scaled up ~20% from the previous mobile tier */
    .inveni-landing .galaxy { width: 100%; }
    .inveni-landing .galaxy .core-glow {
        width: 430px;
        height: 430px;
    }
    .inveni-landing .galaxy .mark {
        width: clamp(216px, 72vw, 312px);
    }
    .inveni-landing .galaxy .wordmark {
        font-size: clamp(78px, 22vw, 132px);
        margin-top: clamp(-38px, -7vw, -20px);
    }
    .inveni-landing .hero .lede.closer-style {
        font-size: clamp(22px, 6.5vw, 32px);
        line-height: 1.15;
        white-space: normal;
        text-wrap: balance;
        padding: 0 6px;
    }
    /* margin-top: auto pushes the hint to the bottom of the hero flex column,
       which is itself full viewport-height. Result: "Scroll" rides the
       bottom edge of the viewport on initial load. */
    .inveni-landing .hero .scroll-hint {
        margin-top: auto;
        padding-top: 28px;
    }


    /* ---------- Funnel / claims: stack, tighten copy ---------- */
    .inveni-landing .pull,
    .inveni-landing h2.pull { font-size: clamp(24px, 6vw, 34px); line-height: 1.2; }
    .inveni-landing .body-l { font-size: 14.5px; line-height: 1.55; }


    /* ---------- Stat row: stays in 3 cols, tighter ---------- */
    .inveni-landing .stat-row { gap: 10px; margin-top: 32px; }
    .inveni-landing .stat .num { font-size: 22px; }
    .inveni-landing .stat .lbl { font-size: 10px; line-height: 1.25; }


    /* ---------- Universities marquee: smaller cards ---------- */
    .inveni-landing .uni-wheel { margin-top: 36px; }
    .inveni-landing .uni-wheel-track { gap: 56px; }
    .inveni-landing .uni-card { padding: 12px 18px; height: 78px; }
    .inveni-landing .uni-card img { height: 54px; }


    /* ---------- End CTA ---------- */
    .inveni-landing .end-cta { margin-top: 48px; padding: 40px 0 56px; }
    .inveni-landing .end-cta .start-btn { padding: 14px 32px; font-size: 15px; }


    /* ---------- Diagram (Frontier × specialised) shrinks ---------- */
    .inveni-landing .diagram { max-width: 100%; transform: scale(0.85); transform-origin: center; }


    /* ---------- Footer: brand row full-width + centred; About/Legal side-by-side below ---------- */
    .inveni-landing footer.landing-foot { padding: 40px 0 28px; }
    .inveni-landing .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px 24px;
    }
    .inveni-landing .foot-grid .brand-cell {
        grid-column: 1 / -1;          /* span both cols so brand sits alone */
        text-align: center;
        margin-bottom: 6px;
    }
    /* Lockup uses a -14px right-margin on the mark to hug the wordmark.
       That nudges the visible centre about 7px right of the maths centre,
       so a 7px left shift restores symmetric side-margins. */
    .inveni-landing .foot-grid .brand-cell .foot-lockup {
        display: inline-flex;
        align-items: center;
        /* User-tuned: nudge a touch further left so the lockup feels visually
           centred (text-anti-alias makes "inveni" optically lean right). */
        transform: translateX(-16px);
    }
    .inveni-landing .foot-grid .foot-col h6 { font-size: 12px; }
    .inveni-landing .foot-grid .foot-col li { font-size: 13px; }
    .inveni-landing .foot-base { flex-direction: column; gap: 8px; text-align: center; }
}


/* ============ ≤ 480px : phone portrait ============ */
@media (max-width: 480px) {

    /* Keep card affordance on the smallest screens (user pushed back on the
       earlier full-bleed look). Slightly tighter padding only. */
    .auth-card,
    .auth-card.glass-card {
        max-width: 360px;
        padding: 22px 18px 18px;
    }
    .auth-container { padding: 1.25rem 1rem; }
    .auth-card .lockup img { height: 48px; }
    .auth-card h2 { font-size: 22px; }


    /* Feed paper card: tighter */
    .paper-card { padding: 16px 12px; border-radius: 12px; }
    .paper-card .card-title,
    .card-title { font-size: 17px; line-height: 1.3; }
    .card-source { font-size: 11px; }
    .card-abstract { font-size: 13px; line-height: 1.5; }
    .card-authors { font-size: 12px; }
    .score-row { gap: 8px; font-size: 12px; }


    /* Comparison */
    .cmp-card { padding: 16px 14px; }
    .cmp-card .ttl { font-size: 17px; }
    .cmp-card .abs { font-size: 12.5px; line-height: 1.5; }
    .cmp-btn { font-size: 11px; padding: 9px 12px; }
    .cmp-card__badge { font-size: 10.5px; }


    /* Review list items */
    .review-item { padding: 10px 12px; }
    .review-item .ttl { font-size: 13px; }
    .review-item .meta { font-size: 10.5px; }


    /* Health rows */
    .health-row { font-size: 12px; padding: 6px 0; }


    /* View headers */
    .view-head h1,
    .view-header h1 { font-size: 26px; }
    .view-head .sub,
    .view-header .subtitle { font-size: 13px; }


    /* Empty state */
    .empty h2 { font-size: 24px; }
    .empty__star, .empty-icon { font-size: 36px; }


    /* Tab bar slightly tighter on phone-portrait */
    #sidebar.sidebar,
    .sidebar { height: 60px; }
    .sidebar__link svg { width: 20px; height: 20px; }
    .sidebar__link .nav-label,
    .sidebar__link > span:not([data-icon]) { font-size: 10px; }
    #content { padding-bottom: 72px; }
}