/**
 * ============================================================================
 * ROAD2RADIANT — MOBILE VARIANT · PHASES 1-2
 * Responsive foundation, header containment, and homepage fit
 * ----------------------------------------------------------------------------
 * Loaded after styles.css and compareProfileStyles.css.
 *
 * Scope:
 * - Phase 1: top navigation — brand sizing, cluster spacing, auth capsule, and
 *   the point at which the inline desktop nav links can fit.
 * - Phase 2: mobile homepage — hero spacing, HeroSearch density, Intelligence
 *   Briefing compaction, and the Discord strip.
 * - Homepage refinement: 32px official GIS icon and a small, viewport-aware
 *   downward shift of the middle column (footer untouched).
 * - Every rule lives inside a bounded max-width media query, so nothing in
 *   this file applies at >= 1200px. The desktop reference layout is untouched.
 * - No dashboard, match history, Compare Profile, Tactical Network, AI, or
 *   modal presentation rules.
 *
 * Breakpoints:
 * - <= 374px  : very narrow phones — compact wordmark kept, account name dropped.
 * - <= 767px  : phones — compact header, hero/search/briefing fit.
 * - 768–1023  : tablets — hamburger navigation with a compact header.
 * - 1024–1199 : small laptops — desktop nav links kept, spacing compressed.
 * - >= 1200px : desktop reference (no rules from this file apply).
 * ============================================================================
 */

/* ----------------------------------------------------------------------------
   SUB-DESKTOP HEADER BASE
   The full 16px/0.26em wordmark plus 200px-class auth capsule is wider than a
   sub-1200px viewport once the right-cluster controls are present. Tighten the
   brand and capsule here; the phone tier tightens them further.
---------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    #primary-nav {
        padding-left: 16px;
        padding-right: 16px;
    }

    #header-left-cluster {
        gap: 10px;
        min-width: 0;
    }

    #side-menu-toggle {
        margin-left: 0;
    }

    #brand-lockup {
        gap: 7px;
    }

    #brand-lockup > svg {
        width: 24px;
        height: 24px;
    }

    #primary-nav .brand-font {
        font-size: 14px;
        letter-spacing: 0.14em;
    }

    #auth-container {
        gap: 8px;
        flex-shrink: 0;
    }

    #g_id_capsule {
        flex-shrink: 0;
    }

    #g_id_capsule .capsule-content {
        padding-left: 16px;
        padding-right: 16px;
        gap: 6px;
    }

    #g_id_capsule .capsule-content > span {
        font-size: 10px;
        letter-spacing: 0.06em;
    }

    #g_logo_placeholder {
        width: 16px;
        height: 16px;
    }
}

/* ----------------------------------------------------------------------------
   TABLETS (768–1023)
   The inline nav links and the dashboard search cannot share this width, so
   the inline link row steps aside for the hamburger. The same destinations
   remain available in the slide-in side menu.
---------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    #side-menu-toggle {
        display: flex;
    }

    #header-nav-links {
        display: none;
    }
}

/* ----------------------------------------------------------------------------
   PHONES (<= 767)
---------------------------------------------------------------------------- */
@media (max-width: 767px) {
    #primary-nav {
        padding-top: calc(6px + env(safe-area-inset-top, 0px));
        padding-bottom: 6px;
        padding-left: calc(4px + env(safe-area-inset-left, 0px));
        padding-right: calc(12px + env(safe-area-inset-right, 0px));
    }

    #side-menu-toggle {
        width: 40px;
        height: 40px;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    #header-left-cluster {
        gap: 4px;
    }

    #brand-lockup {
        gap: 4px;
    }

    #brand-lockup > svg {
        width: 28px;
        height: 28px;
    }

    /* Branding outranks chrome. The wordmark was restored to 13px (from the
       11px/10px treatment, which was unreadable) and still read small beside
       the 28px mark, so phones from 375px now get 15px; the very-narrow tier
       below takes 14px. Tracking stays 0.08em and the mark stays 28px.
       Space is still found in the surrounding gaps, never in the type: the
       left cluster and the lockup both tighten to 4px, the profile pill loses
       4px of right padding and the Google name is capped at 48px.
       Width budget at 375px, worst case (dashboard, signed in, name at its
       48px cap): 4 + 40 + 4 + 28 + 4 on the left, 32 Home + 4 + 92 pill on
       the right, 12 right padding = 220px, leaving 155px; ROAD2RADIANT at
       15px/0.08em is ~136px (scaled from the earlier ~118px figure at 13px). */
    #primary-nav .brand-font {
        font-size: 15px;
        letter-spacing: 0.08em;
    }

    /* The dashboard adds Home beside the account capsule, so the wordmark keeps
       its full size and the lockup only gains vertical padding: the chevron
       mark keeps its full hit area and the type is never shrunk again. */
    body.profile-loaded #brand-lockup {
        padding: 6px 0;
    }

    /* The account pill keeps its avatar, dropdown and hit area. Only the name
       text is capped, so a long Google name can never widen the header. */
    body.profile-loaded #user-profile-display {
        flex-shrink: 0;
        padding-right: 8px;
    }

    body.profile-loaded #user-display-name {
        display: block;
        max-width: 48px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* The auth capsule gap stays at its approved 4px; it is not part of the
       space reclaimed for the wordmark. */
    #auth-container {
        gap: 4px;
    }

    /* Compact official Google button: the custom Register Now decoration and
       the clipped desktop overlay are removed on phones; app.js renders the
       official 32px GIS icon button (size "medium") into that container. */
    #g_id_capsule {
        width: 32px;
        height: 32px;
        background: transparent;
        border: 0;
        border-radius: 50%;
        box-shadow: none;
        overflow: visible;
    }

    #g_id_capsule:hover {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    #g_id_capsule .capsule-content,
    #g_id_signin_hidden {
        display: none;
    }

    #g_id_mobile_button {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Homepage flow: replace the desktop 15vh/20vh landmarks with capped
       viewport gaps so the hero, search, briefing, and Discord fit on phones.
       The trailing clamp nudges the whole middle column down on tall phones
       (up to 36px) and fades to zero below 800px viewport height, where no
       spare height exists. On tall phones main's flex-grow absorbs the offset,
       so the footer keeps its rendered position. */
    body:not(.profile-loaded) #home-main {
        margin-top: calc(60px + env(safe-area-inset-top, 0px) + clamp(0px, calc(100vh - 800px), 36px));
    }

    #start-slogan {
        margin-bottom: 0;
    }

    #start-slogan > p {
        margin-top: clamp(14px, 2.5vh, 24px);
    }

    #hero-search-container {
        margin-top: clamp(24px, 6vh, 64px);
    }

    #hero-search-container .hud-container {
        padding: 20px;
    }

    #heroMainBtn {
        height: 38px;
    }

    #intel-carousel-wrapper {
        margin-top: clamp(32px, 10vh, 100px);
    }

    #intel-carousel-wrapper > p {
        margin-bottom: 12px;
    }

    #intel-carousel-wrapper > div {
        gap: 8px;
        padding-left: 0;
        padding-right: 0;
    }

    #intel-carousel-wrapper button {
        width: 40px;
        height: 48px;
    }

    #intel-scroll-container {
        padding-top: 4px;
        padding-bottom: 12px;
    }

    #intel-scroll-container .intel-card {
        width: 234px;
        padding: 16px;
    }

    #intel-scroll-container .intel-card h3 {
        font-size: 14px;
    }

    #intel-scroll-container .intel-card > p {
        font-size: 10px;
    }

    #social-community-section {
        gap: 8px;
    }

    #social-community-section a {
        min-height: 32px;
    }

    #social-community-section > p {
        font-size: 9px;
        color: rgba(255, 255, 255, 0.55);
    }

    /* Dashboard rank summary: a two-row grid on phones.
       Current and peak rank share the first column; the leaderboard spans the
       two equal information tracks occupied by Level and Region below it. Named
       areas keep every boundary aligned without moving or duplicating DOM. The
       rank track sizes to the wider rank block, while minmax(0, 1fr) lets the
       information tracks share the remaining width at 320px. */
    body.profile-loaded #api-data-feed > div {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "current leaderboard leaderboard"
            "peak level region";
    }

    body.profile-loaded #current-rank-block {
        grid-area: current;
        justify-content: center;
    }

    body.profile-loaded #peak-rank-block {
        grid-area: peak;
        justify-content: center;
    }

    body.profile-loaded #api-data-feed > div > #api-leaderboard-cell {
        grid-area: leaderboard;
    }

    /* Level and Region are the third and fourth existing cells. Their separate
       areas keep them side by side on the two equal information tracks. */
    body.profile-loaded #api-data-feed > div > div.text-center:nth-child(3) {
        grid-area: level;
    }

    body.profile-loaded #api-data-feed > div > div.text-center:nth-child(4) {
        grid-area: region;
    }

    body.profile-loaded #current-rank-block #rank-text-container {
        text-align: center;
    }

    body.profile-loaded #current-rank-block #rank-text-container > div:first-child {
        justify-content: center;
    }

    body.profile-loaded #current-rank-block #api-rank-details {
        align-items: center;
    }

    body.profile-loaded #peak-rank-block > div {
        text-align: center;
    }
}

/* ----------------------------------------------------------------------------
   VERY NARROW PHONES (<= 374)
   Keep both the chevron mark and the wordmark; drop only the account name so
   the avatar, dropdown and every header control stay reachable at 320px.
---------------------------------------------------------------------------- */
@media (max-width: 374px) {
    /* Narrow phones take 14px (+1 over the old 13px). The account name is
       already dropped here, which is what pays for the extra width — the type
       is never reduced below that again. Budget at 320px, worst case
       (dashboard, signed in): 80px left, 32 Home + 4 + 36 pill on the right,
       12 right padding = 164px, leaving 156px for a ~127px wordmark. */
    #primary-nav .brand-font {
        font-size: 14px;
        letter-spacing: 0.08em;
    }

    body.profile-loaded #user-display-name {
        display: none;
    }

    #start-slogan h1 {
        font-size: 21px;
    }

    #heroMainBtn {
        width: 116px;
        font-size: 9px;
    }

    #intel-scroll-container .intel-card {
        width: 210px;
    }
}

/* ----------------------------------------------------------------------------
   SMALL LAPTOPS (1024–1199)
   Desktop navigation wins over the hamburger at 1024px, so the row is
   compressed instead: shorter search field, tighter link and cluster gaps.
---------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1199px) {
    #primary-nav {
        padding-left: 20px;
        padding-right: 20px;
    }

    #header-left-cluster {
        gap: 20px;
    }

    #brand-lockup {
        gap: 10px;
    }

    #brand-lockup > svg {
        width: 24px;
        height: 24px;
    }

    #primary-nav .brand-font {
        font-size: 14px;
        letter-spacing: 0.12em;
    }

    #header-left-cluster {
        gap: 16px;
    }

    #header-nav-links {
        gap: 10px;
    }

    #auth-container {
        gap: 8px;
    }

    #g_id_capsule .capsule-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    #header-search-container input {
        width: 7rem;
    }
}