/* ============================================================================
   MOBILE RESPONSIVE
   ============================================================================ */

/* Narrower desktops — hide Type column to save space */
@media (max-width: 1400px) {

    .tournaments-table .tt-type,
    .tournaments-table thead th:nth-child(6) {
        display: none;
    }
}

/* Tablets and smaller desktops */
@media (max-width: 1024px) {
    .container {
        padding: var(--space-6);
    }

    .nav-user {
        gap: var(--space-3);
    }

    .nav-user .btn {
        min-height: 0;
        font-size: 0.85rem;
        padding: var(--space-1-5) var(--space-3);
    }

    .tournaments-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--space-4);
    }

    .tournament-filters {
        flex-direction: column;
        gap: var(--space-4);
    }

    .filter-group {
        min-width: 100%;
    }

    .players-roster {
        grid-template-columns: 1fr;
    }

    .tabs {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        flex-shrink: 0;
    }
}

/* ── Tablet-only (portrait iPads sit at 820–834px, above the 768 drawer
   breakpoint, so they get the full horizontal desktop nav). Keep that nav on a
   single row instead of letting it wrap to an ugly second line, and protect the
   layout against long school names. ── */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Reclaim horizontal room so the single-row nav fits on portrait tablets */
    .navbar {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .nav-brand .brand-logo-full {
        height: 28px;
    }

    .nav-user {
        flex-wrap: nowrap;
        min-width: 0;
        gap: var(--space-0-5);
    }

    /* Icon-only nav row: with the platform switcher added, the full coach nav
       (Dashboard/Tournaments/School/Admin + Help/Profile/Logout) can no longer
       fit labeled on one row at these widths — it overflowed the viewport and
       pushed the theme toggle off-screen. font-size:0 hides the label text
       nodes while keeping them for screen readers; svg sizes are fixed in px so
       the icons hold. Dropdown MENUS are siblings of the triggers, so they keep
       their own font-size. */
    .nav-user .nav-link,
    .nav-user .btn-sm,
    .nav-dropdown-trigger {
        font-size: 0;
        gap: 0;
        padding: var(--space-1-5) var(--space-2);
    }

    /* .nav-trig-main is a <span>, so `.nav-user span {font-size: 0.82rem}`
       (01-foundation) beats the inherited 0 — zero it explicitly. */
    .nav-user .nav-link .nav-trig-main,
    .nav-user .nav-dropdown-trigger .nav-trig-main {
        font-size: 0;
        gap: 0;
    }

    .nav-dropdown-trigger .nav-caret {
        display: none;
    }

    /* Label-only nav items (no svg glyph): the icon-only collapse would leave
       nothing behind — LIVE would shrink to its bare 8px dot and the lockdown
       notice to a lone padlock. Keep a compact label instead. */
    .nav-user .nav-link.btn-live,
    .nav-user .nav-lock-label {
        font-size: 0.78rem;
        gap: var(--space-1);
    }

    /* Long school names must not push the nav into wrapping */
    .nav-school-name {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ── Compact desktop nav (769–1250px) ──
   At mid widths the fully-labeled nav + the new platform switcher can exceed
   the viewport (page-level ~22px overflow at 941px pre-fix). Collapse the
   right-group utility links (Help/Profile/Logout) and the switcher segments to
   icon-only; their aria-label/title still name them. Full labels return above
   1250px. (≤1024px the tablet block above collapses the whole row.) */
@media (min-width: 769px) and (max-width: 1250px) {
    .nav-right-group .nav-link {
        font-size: 0;
        gap: 0;
        padding: var(--space-1-5) var(--space-2);
    }

    .nav-plat-switch .nav-plat-opt span {
        display: none;
    }

    .nav-plat-switch .nav-plat-opt {
        padding: var(--space-1-5);
    }
}

/* Above the tablet block the school name was unclamped exactly where the
   fully-labeled School player nav + the switcher leave the least room; clamp it
   so the row keeps to one line. Kept separate from the 769–1250 block above so
   it can never override the tighter 80px tablet clamp. */
@media (min-width: 1025px) and (max-width: 1250px) {
    .nav-school-name {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* Mobile phones */
@media (max-width: 768px) {
    .navbar {
        padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1rem 0.75rem;
        min-height: auto;
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    .hamburger-toggle {
        display: flex;
    }

    .nav-main {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-brand {
        padding-bottom: 0;
    }

    .nav-brand .brand-logo {
        height: 35px;
    }

    .nav-brand .brand-logo-full {
        height: 31px;
    }

    .nav-brand h2 {
        font-size: 1.1rem;
    }

    /* Overlay not needed for full-screen drawer */
    .nav-drawer-overlay {
        display: none !important;
    }

    /* ── Mobile Slide-out Drawer ── */
    .nav-user {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        background: var(--bg-primary);
        z-index: var(--z-fullscreen);
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform var(--motion-slower) var(--ease-decelerate);
        box-shadow: none;
    }

    [data-theme="light"] .nav-user {
        background: var(--surface-solid);
        box-shadow: none;
    }

    .navbar.menu-open .nav-user,
    .nav-user.drawer-active {
        transform: translateX(0);
    }

    /* Subtle staggered fade-in of drawer contents for a more polished open */
    .navbar.menu-open .nav-user>*,
    .nav-user.drawer-active>* {
        animation: navDrawerFadeIn 0.32s ease both;
        animation-delay: 0.08s;
    }

    @keyframes navDrawerFadeIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Drawer header */
    .nav-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--border-subtle);
        flex-shrink: 0;
        background: var(--raise-1);
    }

    .nav-drawer-header .drawer-user-name {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    [data-theme="light"] .nav-drawer-header .drawer-user-name {
        color: var(--card-text);
    }

    [data-theme="light"] .nav-drawer-header {
        border-bottom-color: var(--border-subtle);
        background: var(--raise-2);
    }

    .nav-drawer-close {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: var(--space-1);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-drawer-close:active {
        color: var(--text-primary);
        background: var(--raise-4);
    }

    [data-theme="light"] .nav-drawer-close {
        color: var(--text-muted);
    }

    [data-theme="light"] .nav-drawer-close:active {
        color: var(--card-text);
        background: var(--raise-3);
    }

    /* Drawer nav content */
    .nav-drawer-links {
        flex: 1;
        padding: var(--space-2) 0;
        overflow-y: auto;
    }

    .nav-drawer-links>.nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        padding: var(--space-3) var(--space-5);
        font-size: 0.9rem;
        text-align: left;
        box-sizing: border-box;
        border: none;
        background: none;
        color: var(--text-primary);
        cursor: pointer;
        transition: background var(--motion-fast);
    }

    .nav-drawer-links>.nav-link:active {
        background: var(--raise-2);
    }

    .nav-drawer-links>.nav-link.active {
        color: var(--brand-ink);
        background: rgba(var(--gsx-brand-rgb), 0.08);
    }

    [data-theme="light"] .nav-drawer-links>.nav-link {
        color: var(--text-secondary);
    }

    [data-theme="light"] .nav-drawer-links>.nav-link:active {
        background: var(--raise-2);
    }

    [data-theme="light"] .nav-drawer-links>.nav-link.active {
        color: var(--brand-ink);
        background: rgba(var(--gsx-brand-rgb), 0.06);
    }

    /* ── Drawer Dropdown Sections ── */
    .nav-dropdown {
        width: 100%;
        border-bottom: 1px solid var(--hairline-faint);
    }

    [data-theme="light"] .nav-dropdown {
        border-bottom-color: var(--hairline-faint);
    }

    .nav-dropdown-trigger {
        width: 100%;
        justify-content: space-between;
        padding: var(--space-3) var(--space-5);
        font-size: 0.9rem;
        border-radius: 0;
    }

    .nav-dropdown-trigger:active {
        background: var(--raise-2);
    }

    [data-theme="light"] .nav-dropdown-trigger:active {
        background: var(--raise-2);
    }

    .nav-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--raise-2);
        padding: 0 0 var(--space-1-5);
        margin: 0;
        min-width: 0;
    }

    [data-theme="light"] .nav-dropdown-menu {
        background: var(--raise-1);
    }

    .nav-dropdown-item {
        padding: var(--space-2-5) var(--space-5) var(--space-2-5) var(--space-8);
        font-size: 0.85rem;
        border-radius: 0;
    }

    .nav-dropdown-item:active {
        background: rgba(var(--gsx-brand-rgb), 0.1);
    }

    [data-theme="light"] .nav-dropdown-item:active {
        background: rgba(var(--gsx-brand-rgb), 0.06);
    }

    /* ── Drawer Footer (Profile/Logout/Theme) ── */
    .nav-right-group {
        width: 100%;
        margin: 0;
        padding: var(--space-3-5) var(--space-5);
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        background: var(--raise-1);
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex-shrink: 0;
        margin-top: auto;
    }

    .nav-right-group .nav-link {
        flex: 1;
        text-align: center;
        padding: var(--space-2-5) var(--space-2);
        font-size: 0.85rem;
        border-radius: var(--radius-sm);
    }

    .nav-right-group .theme-toggle {
        width: 36px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--radius-sm);
        flex-shrink: 0;
    }

    [data-theme="light"] .nav-right-group {
        border-top-color: var(--border-subtle);
    }

    /* Clean up nav items in drawer */
    .nav-user .btn,
    .nav-user .btn-sm,
    .nav-user a.btn,
    .nav-user .btn-go-live,
    .nav-user .btn-release-results {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        margin: var(--space-1) var(--space-5);
        width: calc(100% - 2.5rem);
    }

    .nav-user .theme-toggle {
        width: 36px;
        height: 36px;
    }

    /* Logout in drawer footer */
    .nav-user .btn-logout,
    .nav-user .nav-logout {
        margin-top: 0;
        border-top: none;
        padding-top: var(--space-2-5);
        border-left: none;
        color: var(--danger-ink);
    }

    .nav-user .nav-logout:active {
        color: var(--danger-ink);
        background: rgba(239, 68, 68, 0.08); /* tokens-allow: danger tint at 0.08 alpha; --danger-wash is 0.12 and visually changes the hover */
    }

    [data-theme="light"] .nav-user .btn-logout,
    [data-theme="light"] .nav-user .nav-logout {
        border-top-color: transparent;
    }

    /* Show LIVE button in mobile drawer */
    .nav-user .btn-live {
        display: flex !important;
        align-items: center;
        gap: var(--space-1-5);
        margin: var(--space-2) var(--space-4);
        border-radius: var(--radius-md);
        padding: var(--space-2-5) var(--space-4);
        justify-content: center;
    }

    .nav-user .btn-live.btn-live-hidden {
        display: none !important;
    }

    /* Icons inside drawer nav links */
    .nav-drawer-links>.nav-link {
        gap: var(--space-3);
    }

    .nav-drawer-links>.nav-link svg {
        flex-shrink: 0;
        opacity: 0.85;
    }

    /* ── Player drawer footer: clearly visible theme + logout ── */
    .nav-drawer-footer {
        margin-top: auto;
        flex-shrink: 0;
        padding: var(--space-2) var(--space-4);
        border-top: 1px solid var(--border-subtle);
        background: var(--surface-sunken);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    [data-theme="light"] .nav-drawer-footer {
        border-top-color: var(--border-subtle);
        background: var(--raise-2);
    }

    .nav-theme-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-3) var(--space-3-5);
        background: var(--raise-2);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        cursor: pointer;
        color: var(--text-primary);
        font-size: 0.88rem;
        font-weight: 600;
    }

    .nav-theme-row .nav-theme-label {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    [data-theme="light"] .nav-theme-row {
        background: var(--raise-2);
        border-color: var(--border-subtle);
        color: var(--text-primary);
    }

    /* Show the correct theme icon in the footer toggle */
    .nav-theme-row .icon-moon {
        display: none;
    }

    .nav-theme-row .icon-sun {
        display: inline;
    }

    [data-theme="light"] .nav-theme-row .icon-sun {
        display: none;
    }

    [data-theme="light"] .nav-theme-row .icon-moon {
        display: inline;
    }

    .nav-drawer-footer .nav-logout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        width: 100%;
        padding: var(--space-3);
        background: var(--danger-wash);
        border: 1px solid var(--danger-wash-border);
        border-radius: var(--radius-md);
        color: var(--danger-ink);
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
    }

    .nav-drawer-footer .nav-logout:active {
        background: rgba(239, 68, 68, 0.22); /* tokens-allow: danger tint at 0.22 alpha; between --danger-wash (0.12) and --danger-wash-border (0.30), no matching token */
        color: var(--on-danger);
    }

    /* Body scroll lock when drawer open */
    body.drawer-open {
        overflow: hidden;
    }

    /* Player dashboard top tabs are redundant on mobile — the bottom nav drives
       tab switching there, so hide the segmented control. */
    .pdash-tabs {
        display: none !important;
    }

    .container {
        padding: var(--space-4);
    }

    .tournament-info-bar {
        padding: var(--space-3) var(--space-4);
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .tournament-info-actions {
        width: 100%;
        justify-content: flex-start;
        gap: var(--space-1-5);
        flex-wrap: wrap;
    }

    .header-golive-countdown {
        order: -1;
        width: 100%;
        justify-content: center;
    }

    .tournament-host-logo {
        width: 38px;
        height: 38px;
    }

    .tournament-info-name {
        font-size: 1.05rem;
    }

    .tournament-info-details {
        gap: var(--space-1-5) var(--space-3);
    }

    .tournament-info-detail {
        font-size: 0.75rem;
    }

    .player-reg-zones {
        grid-template-columns: 1fr;
    }

    .reg-player-card {
        padding: var(--space-1) var(--space-2);
    }

    .reg-drag-handle {
        display: none;
    }

    .action-btn {
        font-size: 0.78rem;
        padding: var(--space-1-5) var(--space-3);
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .dashboard-header h1 {
        font-size: 1.5rem;
    }

    .tournaments-grid {
        grid-template-columns: 1fr;
    }

    .tournament-card {
        padding: var(--space-4);
    }

    /* Table view: hide less important columns on mobile */
    .tournaments-table .tt-type,
    .tournaments-table thead th:nth-child(6),
    .tournaments-table .tt-host,
    .tournaments-table thead th:nth-child(5) {
        display: none;
    }

    .tournaments-table thead th,
    .tournament-table-row td {
        padding: var(--space-2) var(--space-2-5);
        font-size: 0.82rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 1rem auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-large .modal-content {
        width: 95%;
        max-width: 95%;
    }

    .modal-footer {
        flex-direction: column-reverse;
        gap: var(--space-3);
    }

    .modal-footer .btn {
        width: 100%;
        text-align: center;
    }

    /* Footer responsive — hidden on mobile; the bottom-nav takes its place */
    .app-footer {
        padding: 0.35rem 1rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
        display: none;
    }

    /* Mobile bottom quick-nav */
    .bottom-nav:not(.hidden) {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-sticky-bar, 950);
        background: var(--footer-bg);
        border-top: 1px solid var(--border-subtle, #2a2a2e);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        animation: bottomNavUp 0.35s cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    @keyframes bottomNavUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    [data-theme="light"] .bottom-nav:not(.hidden) {
        background: var(--footer-bg);
        border-top-color: var(--border-subtle);
    }

    .bottom-nav-item {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-0-5);
        padding: var(--space-2) var(--space-0-5);
        background: none;
        border: none;
        color: var(--text-secondary, #999);
        font-size: 0.64rem;
        font-weight: 600;
        cursor: pointer;
        min-height: 52px;
    }

    .bottom-nav-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bottom-nav-item svg {
        width: 22px;
        height: 22px;
    }

    .bottom-nav-item.active {
        color: var(--brand-ink);
    }

    .bottom-nav-item.active svg {
        transform: translateY(-1px) scale(1.08);
        transition: transform var(--motion-base) var(--ease-decelerate);
    }

    .bottom-nav-item:active {
        background: rgba(var(--gsx-brand-rgb), 0.08);
    }

    /* Keep page content clear of the fixed bottom nav */
    body:not(.login-active) .container {
        padding-bottom: var(--space-16);
    }

    .footer-content {
        gap: var(--space-2);
    }

    .footer-left {
        display: none;
    }

    /* Show Help link and hide floating button on mobile */
    .footer-help-link {
        display: inline;
    }

    #floatingHelpBtn {
        display: none !important;
    }

    /* Show info drawer tab on mobile — only when a tournament is in context
       (JS adds .show on the tournament screen; never on login/dashboard). */
    .info-drawer-tab.show {
        display: flex;
    }

    .info-drawer-panel {
        display: block;
    }

    /* Tables become card-like on mobile */
    .players-table {
        font-size: 0.85rem;
    }

    .players-table th,
    .players-table td {
        padding: var(--space-2);
    }

    /* Hide less critical columns on mobile */
    .players-table th:nth-child(4),
    .players-table th:nth-child(5),
    .players-table td:nth-child(4),
    .players-table td:nth-child(5) {
        display: none;
    }

    /* Scoring on mobile - show minimal info */
    .scoring-grid {
        grid-template-columns: 1fr;
    }

    .scorecard-grid {
        grid-template-columns: repeat(3, 1fr);
        font-size: 0.8rem;
    }

    .roster-player-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .stat-item {
        flex-direction: row;
        gap: var(--space-2);
    }

    /* .btn sizing is unified in 01-foundation (gsx metrics at every
       breakpoint) — no per-breakpoint geometry overrides. */

    .scoring-filters select {
        font-size: 0.85rem;
        padding: var(--space-2) var(--space-3);
    }

    /* Tournament gender badge adjustment */
    .tournament-gender-badge {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    /* Login box mobile */
    .login-box {
        min-width: auto;
        width: 100%;
        padding: var(--space-8) var(--space-6);
    }

    /* Results table mobile scrolling */
    .results-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .results-table {
        min-width: 600px;
    }
}

/* Small mobile phones */
@media (max-width: 480px) {
    .navbar h2 {
        font-size: 1.2rem;
    }

    .tournament-card h3 {
        font-size: 1.1rem;
    }

    /* Table view: also hide course column on very small screens */
    .tournaments-table .tt-course,
    .tournaments-table thead th:nth-child(2),
    .tournaments-table .tt-gender,
    .tournaments-table thead th:nth-child(4) {
        display: none;
    }

    .tournaments-table .tt-name {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tab-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tab-header .button-group,
    .tab-header .scoring-filters {
        width: 100%;
    }

    .button-group .btn {
        flex: 1;
        text-align: center;
    }

    .positions-presets {
        width: 100%;
    }

    .positions-presets .btn {
        flex: 1;
        min-width: 0;
        min-height: var(--gsx-control-height-sm);
        padding: 0 var(--space-2);
        font-size: 0.78rem;
    }

    .action-btn {
        font-size: 0.72rem;
        padding: var(--space-1-5) var(--space-2-5);
    }

    .action-btn span {
        display: none;
    }

    .tournament-info-actions {
        justify-content: center;
    }

    .dashboard-header {
        gap: var(--space-3);
    }

    .dashboard-header .btn,
    .dashboard-header .gsx-btn {
        width: 100%;
    }

    .modal-header h2 {
        font-size: 1.3rem;
    }

    .login-box {
        padding: var(--space-6) var(--space-4);
        min-width: unset;
    }

    .login-logo {
        width: 72px;
        margin-bottom: var(--space-2);
    }

    .login-title {
        height: 28px;
        margin-bottom: var(--space-1);
    }

    .login-box h1 {
        font-size: 1.5rem;
    }

    .login-box .subtitle {
        font-size: 1rem;
        margin-top: var(--space-2);
        margin-bottom: var(--space-4);
    }

    .register-divider {
        margin: var(--space-3) 0;
    }

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

    .roster-player-card {
        padding: var(--space-2) var(--space-2-5);
    }

    .roster-player-name {
        font-size: 0.88rem;
    }

    .roster-player-meta {
        font-size: 0.68rem;
    }

    .roster-remove-btn {
        opacity: 0.5;
    }
}

/* ============================================================================
   EDGE-TO-EDGE MOBILE APP SHELL
   Full-bleed content cards + directional menu slide (Squabbit-style)
   ============================================================================ */
@media (max-width: 768px) {

    /* Full-bleed the primary content cards so their background runs to the
       screen edges like a native app. The .container keeps its 1rem side
       padding for plain text/controls; cards cancel it with a matching
       negative margin and rely on their own internal padding to keep
       content comfortably inset. */
    .dash-card,
    .gsx-card,
    .tournament-card,
    .settings-card,
    .settings-section,
    .director-settings-card,
    .default-docs-section,
    .profile-hero,
    .profile-card {
        margin-left: -1rem;
        margin-right: -1rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-left-width: 0;
        border-right-width: 0;
        box-shadow: none;
    }

    /* Keep the tournament-card colored accent rail flush at the screen edge */
    .tournament-card {
        border-left-width: 4px;
    }

    /* Profile page: tighten the bulky desktop padding for mobile and let the
       hero banner span the full width. */
    .profile-hero {
        padding: 0 var(--space-4) var(--space-5);
        gap: var(--space-2-5);
    }

    .profile-card {
        padding: var(--space-4) var(--space-4);
    }

    .profile-hero-info h1 {
        font-size: 1.3rem;
    }

    /* Compact the Account Details / password forms on mobile — the desktop
       1.5rem field spacing + 1rem inputs feel oversized on a phone. */
    #profileScreen .form-group {
        margin-bottom: var(--space-3-5);
    }

    #profileScreen .form-group label {
        margin-bottom: var(--space-1);
        font-size: 0.82rem;
    }

    #profileScreen .form-group input,
    #profileScreen .form-group select,
    #profileScreen .form-group textarea {
        padding: var(--space-2) var(--space-2-5);
        font-size: 0.92rem;
        border-radius: var(--radius-md);
    }

    #profileScreen .profile-section-title {
        font-size: 1rem;
        margin-bottom: var(--space-2-5);
    }

    #profileScreen .profile-section-divider {
        margin: var(--space-4) 0;
    }

    #profileScreen .profile-section-subtitle {
        margin: -0.3rem 0 0.65rem;
    }

    #profileScreen .form-row-2col {
        gap: var(--space-2-5);
    }

    #profileScreen .profile-form-actions {
        padding-top: var(--space-2-5);
    }

    .profile-avatar {
        width: 88px;
        height: 88px;
    }

    .profile-avatar-wrap {
        margin-top: var(--space-10);
    }

    /* Never bleed nested cards or cards inside width-constrained containers.
       (A .gsx-card/.dash-card rendered inside another bled card, a modal, or
       a KPI/stat cell must stay put so it doesn't double-offset.) */
    .modal .dash-card,
    .modal .gsx-card,
    .modal .tournament-card,
    .modal .settings-card,
    .modal .settings-section,
    .modal-content .dash-card,
    .modal-content .gsx-card,
    .modal-content .settings-card,
    .modal-content .settings-section,
    .dash-card .dash-card,
    .dash-card .gsx-card,
    .gsx-card .gsx-card,
    .gsx-card .dash-card,
    .settings-card .gsx-card,
    .settings-section .gsx-card,
    .dash-stat-card,
    .gsx-kpi-cell {
        margin-left: 0;
        margin-right: 0;
    }

    /* ── Directional menu slide ──
       Tapping a bottom-nav item to the RIGHT of the current one slides the new
       view in from the right ("forward"); tapping one to the LEFT slides it in
       from the left ("back"). Clip at the full-width dashboard container (not
       the padded inner overview) and travel a full viewport so the content
       pages in edge-to-edge like a native app. */
    #dashboardScreen .container {
        overflow-x: clip;
    }

    /* Solid slide — no opacity fade. Fading both panels makes the seam show the
       page background through two translucent layers, which reads as a
       fade-out/fade-in rather than a clean page push. */
    @keyframes navSlideForward {
        from {
            transform: translateX(100vw);
        }

        to {
            transform: translateX(0);
        }
    }

    @keyframes navSlideBack {
        from {
            transform: translateX(-100vw);
        }

        to {
            transform: translateX(0);
        }
    }

    .nav-slide-fwd {
        animation: navSlideForward 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    .nav-slide-back {
        animation: navSlideBack 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    /* ── Cross-slide (outgoing panel) ──
       While the incoming panel slides in, the outgoing panel is lifted out of
       flow and slid off the opposite edge so the two move together — a single
       seamless page transition rather than a hard swap. `#pdashPanels` wraps
       ONLY the swappable panels (not the welcome header / tab bar), so the
       absolute overlay anchors to the panels' own top edge and stays aligned
       with the incoming panel instead of jumping up under the header. We do
       NOT clip overflow here — the cards inside break out of the container
       padding (negative side margins) to sit flush at the screen edge for a
       full-bleed look, and clipping here would pull them back in. The
       off-screen slide travel is instead clipped by `#dashboardScreen
       .container` above. The box is held open during the swap via an inline
       min-height set in JS (cleared when the slide ends) so there's no
       permanent empty gap. */
    #pdashPanels {
        position: relative;
    }

    @keyframes navSlideForwardOut {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-100vw);
        }
    }

    @keyframes navSlideBackOut {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(100vw);
        }
    }

    .nav-slide-fwd-out,
    .nav-slide-back-out {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        pointer-events: none;
    }

    .nav-slide-fwd-out {
        animation: navSlideForwardOut 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    .nav-slide-back-out {
        animation: navSlideBackOut 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {

    .nav-slide-fwd,
    .nav-slide-back,
    .nav-slide-fwd-out,
    .nav-slide-back-out {
        animation: none;
    }

    /* Without animation there's no animationend to clean up the overlay, so
       keep the outgoing panel out of the way immediately. */
    .nav-slide-fwd-out,
    .nav-slide-back-out {
        display: none !important;
    }
}

/* Print styles */
@media print {

    .navbar,
    .dashboard-header button,
    .modal,
    .btn {
        display: none !important;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    .screen {
        background: white !important; /* tokens-allow: @media print — literal white forces paper background regardless of active theme; --surface-solid and --white both flip in dark mode */
    }

    .screen::before {
        display: none !important;
    }
}

/* ═══ Desktop left rail (≥1024px) ═══════════════════════════════════════════
   Command-center chrome: the (mobile) bottom nav becomes a labeled vertical
   side rail instead of disappearing. renderBottomNav() already rebuilds the
   role-aware items on every nav change at every viewport, and the active
   state is class-based — this is pure CSS re-composition. The casual/host
   navbar tab strip (.solo-desktop-tabs) is hidden at this breakpoint in
   13-casual.css so the rail is the single navigation surface.
   Gating: keyed on the app-shell nav modes (body[data-shell-nav], set by
   showScreen/syncShellNav) so auth/pending/brand-only screens never show the
   rail or take the 92px shift; :not(:empty) guards the pre-render window.
   `screen and` keeps the whole block out of paged media — landscape paper is
   wider than 1024 CSS px and would otherwise print the rail on every sheet. */
@media screen and (min-width: 769px) {
    /* TASK-V §2.4 geometry. 769-1023 is the ICON rail (92px, icon + micro-
       label); >=1024 the same element widens to a 200px LABELLED rail (next
       block). 1024/200 and not 1280/232 because the K6 baseline is 1366x768
       district laptops at 125% display scaling — effective CSS width ~1093px.
       At a 1280px breakpoint every baseline user would silently get the icon
       rail and never see the labelled nav. NO hover flyouts at any width:
       clicking a row NAVIGATES (YouTube mini-rail model), one interaction
       model everywhere. */
    body[data-shell-nav="app"],
    body[data-shell-nav="solo"] { --rail-w: 92px; }

    body[data-shell-nav="app"] .bottom-nav:not(.hidden):not(:empty),
    body[data-shell-nav="solo"] .bottom-nav:not(.hidden):not(:empty) {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--space-1);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--rail-w, 92px);
        padding: var(--space-6) 0 var(--space-4) env(safe-area-inset-left, 0px);
        background: var(--surface-solid);
        border-right: 1px solid var(--border-subtle);
        z-index: calc(var(--z-sticky-bar, 950) - 10);
    }

    .bottom-nav-item {
        flex: 0 0 auto;
        width: 100%;
        min-height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-0-5);
        padding: var(--space-2) var(--space-1);
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 0.7rem;
        font-weight: 600;
        cursor: pointer;
    }

    .bottom-nav-item svg {
        width: 22px;
        height: 22px;
    }

    .bottom-nav-item.active {
        color: var(--brand-ink);
    }

    .bottom-nav-item.active svg {
        transform: translateY(-1px) scale(1.08);
        transition: transform var(--motion-base) var(--ease-decelerate);
    }

    @media (hover: hover) and (pointer: fine) {
        .bottom-nav-item:hover {
            background: var(--hover-bg);
        }
    }

    /* Shift screen content clear of the rail — same shell-mode gate as the
       rail itself, so auth/pending/brand screens stay full-bleed. The shell
       navbar (#appShellNav) takes the equivalent shift in 01-foundation.css. */
    body[data-shell-nav="app"] .screen.active,
    body[data-shell-nav="solo"] .screen.active {
        margin-left: var(--rail-w, 92px);
    }
}


/* ── TASK-V §2.4: the labelled rail (>=1024px) ─────────────────────────────
   Collapse is a persisted USER preference (body.rail-collapsed, toggled from
   the footer — the control lives OUTSIDE the nav element). Every collapse
   rule is scoped INSIDE this media block on purpose: applied globally, the
   icon-only modifier would strip the labels off the mobile bottom bar. */
@media screen and (min-width: 1024px) {
    body[data-shell-nav="app"]:not(.rail-collapsed),
    body[data-shell-nav="solo"]:not(.rail-collapsed) { --rail-w: 200px; }

    /* Clear the rail-top collapse control (TASK-Z Z1: fixed at top 8, 44px)
       AND the fixed footer (TASK-AL: the footer overlays the rail's bottom
       61px, which put TASK-AJ's Log Out underneath it — the rail is fixed,
       so unlike page content it can never scroll clear). */
    body[data-shell-nav="app"] .bottom-nav:not(.hidden):not(:empty),
    body[data-shell-nav="solo"] .bottom-nav:not(.hidden):not(:empty) {
        padding-top: 60px;
        padding-bottom: calc(61px + var(--space-2) + env(safe-area-inset-bottom, 0px));
    }

    body:not(.rail-collapsed) .bottom-nav-item {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--space-3);
        width: 100%;
        min-height: 44px;   /* K4 has no breakpoint exemption: district laptops are touchscreens */
        padding: 0 var(--space-4);
        font-size: 0.85rem;
        text-align: left;
    }
    body:not(.rail-collapsed) .bottom-nav-item svg { width: 20px; height: 20px; flex: 0 0 auto; }
}

/* Divider between destination rows and the demoted/config rows. Presentational
   only (aria-hidden); hidden with the rail-only rows on mobile. */
.bottom-nav-divider {
    display: block;
    height: 1px;
    margin: var(--space-2) var(--space-3);
    background: var(--border-subtle);
}

/* The account slot's per-breakpoint label (one DOM node, two idioms). */
.bottom-nav .slot-lab-desktop { display: none; }
@media screen and (min-width: 769px) {
    .bottom-nav .slot-lab-desktop { display: inline; }
    .bottom-nav .slot-lab-mobile { display: none; }
}

/* iPadOS superset rule: rail-only rows and the divider do not exist in the
   4-tab mobile bar. Everything hidden here MUST be linked from /account —
   asserted by nav-architecture.test.cjs. */
@media (max-width: 768px) {
    .bottom-nav-item[data-railonly] { display: none !important; }
    .bottom-nav-divider { display: none; }
}



/* ── TASK-AJ: rail Log Out — desktop only, anchored to the rail bottom ─────
   Hidden by default at every width; only the >=1024 labelled rail shows it.
   Below 1024 (phone tab bar AND the 769-1023 icon rail) it does not exist —
   the same-element trap that has bitten three times. margin-top:auto on the
   divider pushes the pair to the bottom of the flex column (Slack/Discord
   pattern). Muted, not a peer destination. */
.bottom-nav-item[data-desktop-only],
.bottom-nav .rail-signout-div { display: none; }

@media screen and (min-width: 1024px) {
    .bottom-nav .rail-signout-div {
        display: block;
        margin-top: auto;
    }
    .bottom-nav .bottom-nav-item[data-desktop-only] {
        display: flex;
        color: var(--text-muted);
    }
}

/* Exactly ONE visible Log Out per breakpoint (TASK-AJ acceptance): the rail
   owns it at >=1024, the Profile/Account surface owns it below. */
@media screen and (min-width: 1024px) {
    .acct-signout-wrap { display: none; }
}

/* ── TASK-AP: locked-player bar — one inert status row, no destinations ── */
.bottom-nav-item.nav-locked {
    pointer-events: none;
    cursor: default;
    opacity: 0.75;
}