/* ============================================================
   Work Together (W2G) — style-mobile.css
   Mobile UX Phase 1A + 1A.2: Dashboard (Home) + Profile
   ------------------------------------------------------------
   Load order: after style.css → style-redesign-v2.css →
               style-polish-v3.css  (LAST)
   Breakpoints:
     ≤760px  tablets/phones
     ≤680px  primary mobile (390–680px)
     ≤560px  team snapshot grid override
     ≤430px  small phone guard
   Scope: #dashboard · #home · #profile only.
   Desktop ≥ 921px: UNAFFECTED.
   Backend/API/logic: NOT TOUCHED.
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   PHASE 1A — MOBILE DASHBOARD  (#dashboard)
════════════════════════════════════════════════════════════ */

/* A1. Compact page header */
@media (max-width: 680px) {
  #dashboard .section-title-row .eyebrow,
  #dashboard .section-title-row > div > p.muted {
    display: none;
  }
  #dashboard .section-title-row {
    margin-bottom: 12px;
  }
  #dashboard .section-title-row h1 {
    font-size: 20px;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
  }
}

@media (max-width: 720px) {
  #mobileTeamChatFab,
  .mobile-team-chat-fab {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* A2. Hide profile completion card (dashboard-top-grid) */
@media (max-width: 680px) {
  #dashboard .dashboard-top-grid {
    display: none;
  }
}

/* A3. Activity card: hide internal heading */
@media (max-width: 680px) {
  #dashboard .dashboard-activity-card .dashboard-card-title {
    display: none;
  }
  #dashboard .dashboard-activity-card {
    padding-bottom: 14px;
  }
}

/* A4. Activity grid: stay 2×2 at 430px — Phase 10C guard */
@media (max-width: 430px) {
  #dashboard .dashboard-personal-shell .activity-metric-grid {
    grid-template-columns: 1fr 1fr !important; /* guard: Phase 10C collapses to 1fr */
  }
  #dashboard .dashboard-personal-shell .activity-metric:last-child {
    grid-column: auto !important;
  }
}

/* A5. Activity metric tiles: tighter */
@media (max-width: 680px) {
  #dashboard .activity-metric {
    padding: 12px;
    border-radius: 14px;
  }
  #dashboard .activity-metric strong {
    font-size: 20px;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  #dashboard .activity-metric p {
    font-size: 11px;
    line-height: 1.35;
    margin-top: 3px;
  }
  #dashboard .activity-metric small {
    font-size: 10px;
    margin-top: 2px;
  }
}

/* A6. Content cards: tighter padding */
@media (max-width: 680px) {
  #dashboard .content-card {
    padding: 14px 16px;
    border-radius: 16px;
  }
  #dashboard .content-card h3 {
    font-size: 14px;
    margin-bottom: 10px;
  }
}

/* A7. Team snapshot grid: stay 2×2 at ≤560px */
@media (max-width: 560px) {
  #dashboard .team-snapshot-grid {
    grid-template-columns: 1fr 1fr !important; /* Polish-v3 collapses to 1fr with !important */
    gap: 8px;
  }
  #dashboard .team-context-block {
    grid-template-columns: 1fr !important;
  }
  #dashboard .team-snapshot-stat {
    padding: 8px 10px;
  }
  #dashboard .team-snapshot-stat span,
  #dashboard .team-snapshot-stat small {
    font-size: 10.5px;
  }
  #dashboard .team-snapshot-stat strong {
    font-size: 15px;
  }
}

/* A8. Feature card rows: tighter */
@media (max-width: 680px) {
  #dashboard .tag-row {
    gap: 5px;
  }
  #dashboard .button-row.compact.team-row-actions {
    gap: 6px;
  }
  #dashboard .team-row-actions .button {
    font-size: 12.5px;
    padding: 8px 12px;
  }
}


/* ════════════════════════════════════════════════════════════
   PHASE 1A — MOBILE PROFILE  (#profile)
════════════════════════════════════════════════════════════ */

/* B1. Compact page header */
@media (max-width: 680px) {
  #profile .section-title-row .eyebrow,
  #profile .section-title-row > div > p.muted {
    display: none;
  }
  #profile .section-title-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    margin-bottom: 14px;
  }
  #profile .section-title-row > div:first-child {
    flex: 1;
    min-width: 0;
  }
  #profile .section-title-row h1 {
    font-size: 18px;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* B2. Edit button: compact inline pill */
@media (max-width: 680px) {
  #profile .section-title-row .button-row.compact {
    flex-direction: row;
    width: auto;
    flex-shrink: 0;
  }
  #profile .section-title-row .button-row.compact #editProfileButton {
    padding: 7px 13px;
    font-size: 12.5px;
    min-height: 36px;
    white-space: nowrap;
    border-radius: 10px;
    width: auto;
    justify-content: center;
  }
  #profile .section-title-row #resetDemoButton {
    display: none;
  }
}

/* B3. Profile identity card */
@media (max-width: 680px) {
  #profile .profile-identity-card {
    padding: 14px 16px;
    border-radius: 16px;
  }
}

/* B4. Profile photo panel: horizontal layout */
@media (max-width: 680px) {
  #profile .profile-photo-panel {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
  }
  #profile .profile-photo-panel .avatar.large {
    width: 52px;
    height: 52px;
    min-width: 52px;
    font-size: 18px;
    border-radius: 14px;
    flex-shrink: 0;
  }
  #profile .profile-photo-panel .profile-photo-actions {
    flex: 1;
    min-width: 0;
  }
  #profile .profile-photo-actions h3 {
    font-size: 15px;
    margin-bottom: 2px;
    line-height: 1.2;
  }
  #profile .profile-photo-actions > p {
    font-size: 11.5px;
    line-height: 1.4;
    margin-bottom: 6px;
  }
  #profile .profile-photo-actions .muted.small-copy {
    font-size: 11px;
  }
  #profile .profile-photo-actions .button-row.compact {
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  #profile .profile-photo-actions .button-row.compact .button {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 34px;
  }
}

/* B5. Social links row */
@media (max-width: 680px) {
  #profile .profile-social-action-row {
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 4px;
    flex-wrap: wrap;
  }
  #profile .social-link-pill {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }
}

/* B6. Skill chips */
@media (max-width: 680px) {
  #profile .profile-skill-row {
    gap: 5px;
  }
}

/* B7. Logout: de-emphasized */
@media (max-width: 680px) {
  #profile .profile-bottom-actions {
    justify-content: flex-start;
    margin-top: 10px;
    padding-top: 10px;
  }
  #profile .profile-logout-button {
    font-size: 12.5px;
    padding: 8px 14px;
    border-radius: 10px;
    opacity: 0.72;
  }
}

/* B8. Saved items card */
@media (max-width: 680px) {
  #profile .profile-saved-redirect-card {
    padding: 14px 16px;
  }
  #profile .profile-saved-redirect-card h3 {
    font-size: 14px;
    margin-bottom: 8px;
  }
  #profile .profile-saved-redirect-card .button {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
}


/* ════════════════════════════════════════════════════════════
   PHASE 1A — MOBILE LANDING HOME  (#home)
════════════════════════════════════════════════════════════ */

/* C1. Hero: stack vertically */
@media (max-width: 760px) {
  #home .landing-hero {
    flex-direction: column;
    gap: 20px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  #home .hero-copy {
    max-width: 100%;
  }
  #home .hero-copy h1 {
    font-size: clamp(24px, 7.5vw, 36px);
    line-height: 1.15;
    margin-bottom: 12px;
  }
  #home .hero-copy .lead {
    font-size: 14px;
    line-height: 1.55;
  }
  #home .landing-chip {
    font-size: 12px;
    padding: 5px 10px;
    margin-bottom: 10px;
  }
  #home .hero-actions .button.large {
    width: 100%;
    justify-content: center;
  }
}

/* C2. Product preview: hide on small phone */
@media (max-width: 680px) {
  #home .hero-product-preview {
    display: none;
  }
}

/* C3. Stats strip: 2-col */
@media (max-width: 680px) {
  #home .landing-stats-strip {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
    margin-top: 20px;
  }
  #home .landing-stat {
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 211, 168, 0.3);
  }
  #home .landing-stat:nth-child(odd) {
    border-right: 1px solid rgba(255, 211, 168, 0.3);
  }
  #home .landing-stat:nth-last-child(-n+2) {
    border-bottom: none;
  }
  #home .landing-stat strong {
    font-size: 22px;
    letter-spacing: -0.02em;
  }
  #home .landing-stat small {
    font-size: 11px;
  }
}

/* C4. Feature grid: single col */
@media (max-width: 680px) {
  #home .simple-grid.four.landing-feature-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #home .info-card.feature-card {
    padding: 16px;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }
  #home .feature-icon {
    flex-shrink: 0;
    margin-top: 2px;
  }
}

/* C5-C8. How/organizer/footer */
@media (max-width: 680px) {
  #home .how-grid { grid-template-columns: 1fr; gap: 16px; }
  #home .hero-value-strip { flex-direction: column; gap: 4px; align-items: flex-start; }
  #home .hero-social-proof { margin-top: 12px; }
  #home .organizer-cta { flex-direction: column; gap: 16px; align-items: flex-start; }
  #home .organizer-cta .button.large { width: 100%; max-width: 320px; justify-content: center; }
  #home .landing-footer { grid-template-columns: 1fr; gap: 20px; }
  #home .landing-footer > div { border-top: 1px solid var(--border-soft, rgba(148,163,184,.15)); padding-top: 16px; }
  #home .landing-footer > div:first-child { border-top: none; padding-top: 0; }
}


/* ════════════════════════════════════════════════════════════
   SHARED — Overflow guard (Phase 1A)
════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  #home, #dashboard, #profile { overflow-x: hidden; }
}


/* ════════════════════════════════════════════════════════════
   PHASE 1A.2 — MOBILE DASHBOARD: STRONGER POLISH
   Goal: make #dashboard feel intentionally mobile-first,
   not desktop cards squeezed into a narrow viewport.
════════════════════════════════════════════════════════════ */

/* ── D1. Main column: tighter card gaps ──────────────────── */
/* .dashboard-main-column { gap: 16px } in polish-v3.
   Reduce to 10px on mobile so cards feel like a feed,
   not isolated desktop panels. */
@media (max-width: 680px) {
  #dashboard .dashboard-main-column {
    gap: 10px;
  }
}

/* ── D2. Team snapshot (Continue your mission):
         Reduce the giant team name h3 ────────────────────── */
/* polish-v3: .team-snapshot-title-copy h3 { font-size: clamp(28px, 3.2vw, 42px) }
   At 680px, 3.2vw = ~21.8px → clamped to 28px min = still very large.
   #dashboard prefix gives higher specificity — no !important needed. */
@media (max-width: 680px) {
  #dashboard .team-snapshot-title-copy h3 {
    font-size: 17px;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-bottom: 4px;
  }
  #dashboard .team-snapshot-title-copy p {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #dashboard .team-snapshot-title-row {
    margin: 4px 0 10px;
    gap: 10px;
  }
  /* topline: mini-kicker + status pill — make it tighter */
  #dashboard .team-snapshot-topline {
    margin-bottom: 4px;
  }
  #dashboard .team-snapshot-topline .mini-kicker {
    font-size: 9.5px;
    padding: 3px 8px;
  }
}

/* ── D3. Team tools row: HIDE on mobile ──────────────────── */
/* The tools row renders 5 tool chips at min-height: 56px each,
   plus the "Team tools" label row = ~80–120px wasted.
   Users access workspace tools from the Mission Center (CTA).
   !important: polish-v3 at ≤880px keeps it visible with no
   display property; hiding it here at 680px is purely additive. */
@media (max-width: 680px) {
  #dashboard .team-tools-row {
    display: none;
  }
}

/* ── D4. Team context block: HIDE on mobile ──────────────── */
/* The "Looking for" + "Current strengths" chip sections add
   ~80–100px. This deep context is better suited for the full
   team card in Find Team. On mobile dashboard, the stat grid
   already shows team status clearly. */
@media (max-width: 680px) {
  #dashboard .team-context-block {
    display: none;
  }
}

/* ── D5. Team snapshot card: tighter padding ─────────────── */
/* polish-v3 has padding: 17px !important at ≤560px.
   #dashboard prefix → higher specificity → wins. */
@media (max-width: 680px) {
  #dashboard .team-snapshot-card {
    padding: 12px 14px;
  }
}

/* ── D6. Recommended competitions list rows ──────────────── */
/* .list-row { padding: 14px } globally.
   On mobile dashboard, reduce to 10px 12px.
   Scope: only inside #dashboard to avoid global impact. */
@media (max-width: 680px) {
  #dashboard .list-row {
    padding: 10px 12px;
    border-radius: 12px;
  }
  #dashboard .list-row strong {
    font-size: 13px;
    line-height: 1.3;
  }
  #dashboard .list-row p {
    font-size: 11.5px;
    line-height: 1.35;
    margin-top: 2px;
  }
  #dashboard .list-row .button.secondary {
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── D7. Feature card stack: tighter row gaps ─────────────── */
/* .stack { gap: 12px } → 8px inside dashboard feature cards */
@media (max-width: 680px) {
  #dashboard .dashboard-feature-card > .stack {
    gap: 8px;
  }
}

/* ── D8. Feature card h3: bottom spacing ─────────────────── */
@media (max-width: 680px) {
  #dashboard .dashboard-feature-card > h3 {
    margin-bottom: 8px;
  }
}

/* ── D9. "No team yet" / create team card: compact ──────── */
@media (max-width: 680px) {
  #dashboard .dashboard-create-team-card h3 {
    font-size: 14px;
    margin-bottom: 6px;
  }
  #dashboard .dashboard-create-team-card p.muted {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 10px;
  }
  #dashboard .dashboard-create-team-card .button {
    width: 100%;
    justify-content: center;
  }
}

/* ── D10. Team-workspace-row buttons: full-width stacked ── */
@media (max-width: 680px) {
  #dashboard .team-workspace-row {
    gap: 10px;
  }
  #dashboard .team-workspace-row .team-row-actions {
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
  #dashboard .team-workspace-row .team-row-actions .button {
    width: 100%;
    justify-content: center;
    font-size: 13px;
    padding: 9px 12px;
    min-height: 40px;
  }
}

/* ── D11. Mini-kicker chips: consistent sizing ────────────── */
@media (max-width: 680px) {
  #dashboard .mini-kicker {
    font-size: 9.5px;
    padding: 3px 8px;
    letter-spacing: 0.06em;
  }
}

/* ── D12. team-snapshot-actions: full-width CTA ──────────── */
/* On mobile, the "Open workspace" button should feel like
   the primary action — full width, easy to tap. */
@media (max-width: 680px) {
  #dashboard .team-snapshot-actions {
    flex-direction: column;
    width: 100%;
    gap: 6px;
  }
  #dashboard .team-snapshot-actions .button {
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }
  #dashboard .team-snapshot-actions .button.primary {
    font-size: 13.5px;
    padding: 10px 14px;
  }
}


/* ════════════════════════════════════════════════════════════
   PHASE 1A.2 — MOBILE PROFILE: STRONGER POLISH
   Goal: profile hero = compact mobile identity card,
   not a tall desktop form squeezed narrow.
════════════════════════════════════════════════════════════ */

/* ── E1. Photo panel guidance text: hide on mobile ────────── */
/* "This photo will appear on your Find Members card." is
   onboarding copy — not needed on every profile visit. */
@media (max-width: 680px) {
  #profile .profile-photo-actions .muted.small-copy {
    display: none;
  }
}

/* ── E2. Upload/remove buttons: ultra-compact on mobile ──── */
@media (max-width: 680px) {
  #profile .avatar-upload-button {
    font-size: 11.5px;
    padding: 5px 9px;
    min-height: 32px;
  }
  #profile [data-remove-profile-avatar] {
    font-size: 11.5px;
    padding: 5px 9px;
    min-height: 32px;
  }
}

/* ── E3. University card: compact on mobile ───────────────── */
/* .profile-university-card is flex row with logo + name/meta.
   Reduce padding and font sizes so it reads as a compact tag. */
@media (max-width: 680px) {
  #profile .profile-university-card {
    padding: 10px 12px;
    border-radius: 12px;
    gap: 10px;
    margin: 10px 0 8px;
  }
  #profile .profile-university-card > div span {
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }
  #profile .profile-university-card > div strong {
    font-size: 13px;
    line-height: 1.2;
  }
  #profile .profile-university-card > div small {
    font-size: 11px;
    line-height: 1.3;
  }
}

/* ── E4. Social link row: edit button compact ─────────────── */
@media (max-width: 680px) {
  #profile .profile-social-action-row .social-edit-button,
  #profile #editSocialLinksButton {
    font-size: 12px;
    padding: 6px 11px;
    min-height: 34px;
    white-space: nowrap;
  }
}

/* ── E5. Skill row: chip compact sizing ───────────────────── */
@media (max-width: 680px) {
  #profile .profile-skill-row .tag,
  #profile .profile-skill-row .chip,
  #profile .profile-skill-row [class*="chip"] {
    font-size: 12px;
    padding: 4px 9px;
    line-height: 1.3;
  }
}

/* ── E6. Profile identity card: internal section gaps ─────── */
/* Tighten the vertical rhythm inside the card itself */
@media (max-width: 680px) {
  #profile .profile-identity-card > * + * {
    margin-top: 10px;
  }
  #profile .profile-identity-card > .profile-photo-panel {
    margin-top: 0;
  }
}

/* ── E7. Saved items card: button more prominent ─────────── */
@media (max-width: 680px) {
  #profile .profile-saved-redirect-card > p {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--body, #94a3b8);
  }
  #profile .profile-saved-redirect-card > p.muted.small-copy {
    display: none; /* hide the detailed explanation; link still works */
  }
}


/* ════════════════════════════════════════════════════════════
   PHASE 1A.2 — LANDING HOME: STRONGER POLISH
════════════════════════════════════════════════════════════ */

/* ── F1. Preview competition cards: single column ────────── */
@media (max-width: 680px) {
  #home .preview-competition-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #home .home-featured-card {
    width: 100%;
    min-width: 0;
  }
}

/* ── F2. Bottom grid panels: single column ───────────────── */
@media (max-width: 680px) {
  #home .preview-bottom-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #home .preview-panel {
    padding: 14px 16px;
  }
}

/* ── F3. Hero value strip: inline pills ──────────────────── */
@media (max-width: 680px) {
  #home .hero-value-strip span {
    font-size: 12px;
    padding: 3px 9px;
  }
}

/* ── F4. Organizer CTA heading: compact ──────────────────── */
@media (max-width: 680px) {
  #home .organizer-cta h2 {
    font-size: 18px;
    line-height: 1.25;
  }
  #home .organizer-cta p {
    font-size: 13px;
    line-height: 1.5;
  }
}


/* ============================================================
   PHASE 1A.2 - AUTHENTICATED MOBILE HOME
   The logged-in Home is rendered into #home by script.js.
   Runtime uses .home--auth; .home-auth is included as a
   compatibility hook for older/static authenticated markup.
   ============================================================ */
@media (max-width: 680px) {
  body.app-shell-v2 #home:is(.home--auth, .home-auth).active-view {
    max-width: 100%;
    overflow-x: clip;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .home-mission-v2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  /* Put the compact 2x2 status board at the top of logged-in Home. */
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-stats {
    order: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-grid {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-head,
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-next-move,
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-attention,
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-mobile-quick-actions {
    display: none;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-stat {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1px 7px;
    min-width: 0;
    min-height: 58px;
    padding: 8px 9px;
    align-content: center;
    border-radius: 10px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-stat-ic {
    grid-row: 1 / span 2;
    width: 26px;
    height: 26px;
    margin: 0;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-stat strong {
    min-width: 0;
    font-size: 14px;
    line-height: 1.05;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-stat-lbl,
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-stat-sub {
    min-width: 0;
    overflow: hidden;
    font-size: 9.5px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-stat:last-child .hv2-stat-sub {
    display: none;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-card {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 12px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-card-head {
    gap: 8px;
    margin-bottom: 4px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-card-head h3 {
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.2;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-continue .hv2-link {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 8px;
    align-items: center;
    border: 1px solid var(--w2g-orange-line);
    border-radius: 8px;
    background: var(--w2g-orange-soft);
    color: var(--w2g-orange-ink);
    font-size: 10.5px;
    white-space: nowrap;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-card-sub {
    margin: 0 0 6px;
    overflow: hidden;
    color: var(--w2g-muted);
    font-size: 10.5px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-meter {
    gap: 4px;
    margin: 4px 0 6px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-meter-head span {
    font-size: 11px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-meter-head strong {
    font-size: 12px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-meter-track {
    height: 5px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-mobile-mission-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-top: 5px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-mobile-mission-summary div {
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--w2g-line);
    border-radius: 8px;
    background: var(--w2g-surface-2);
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-mobile-mission-summary span,
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-mobile-mission-summary strong {
    display: block;
    min-width: 0;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-mobile-mission-summary span {
    margin-bottom: 2px;
    color: var(--w2g-muted);
    font-size: 9px;
    line-height: 1.1;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-mobile-mission-summary strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--w2g-ink);
    font-size: 10.5px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Mobile Home is a snapshot; detailed readiness and task rows stay in Mission Center. */
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-readiness-factors,
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-readiness-ok,
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-task-list {
    display: none;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch .hv2-card-head .hv2-link {
    display: none;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch {
    align-self: stretch;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch .hv2-match-lead {
    gap: 8px;
    margin-bottom: 2px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch .hv2-thumb {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 12px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch .hv2-lead-copy {
    min-width: 0;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch .hv2-lead-copy strong,
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch .hv2-lead-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch .hv2-lead-copy strong {
    font-size: 12.5px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch .hv2-lead-copy small {
    font-size: 10px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-why {
    margin: 0 0 6px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-why-head {
    margin-bottom: 2px;
    font-size: 9px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-why-list {
    margin: 0;
    padding-left: 13px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-why-list li {
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-why-list li:nth-child(n + 2) {
    display: none;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-mobile-match-cta {
    display: inline-flex;
    width: 100%;
    min-height: 34px;
    margin-top: 2px;
    padding: 7px 10px;
    justify-content: center;
    font-size: 11.5px;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch .hv2-divider,
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch .hv2-role-head,
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch .hv2-role-head ~ * {
    display: none;
  }
  /* Phase 1A.2 polish: align authenticated Home cards */
@media (max-width: 680px) {
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-continue,
  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-topmatch {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
  }

  body.app-shell-v2 #home:is(.home--auth, .home-auth) .hv2-continue {
    align-self: stretch;
  }
}
}

/* Authenticated compact navigation: the Desktop Sidebar renderer remains the
   single menu source, while its Mobile presentation follows the approved
   full-width Guest sheet geometry. Guest selectors are intentionally absent. */
@media (max-width: 1050px) {
  body[data-page="app"].app-shell-v2.mobile-menu-open {
    overflow: hidden !important;
  }

  body[data-page="app"].app-shell-v2.mobile-menu-open > .topbar {
    position: fixed !important;
    inset: 0 0 auto !important;
    z-index: 350 !important;
  }

  body[data-page="app"].app-shell-v2.mobile-menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 330 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: rgba(12, 16, 25, 0.42) !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    animation: authenticatedNavOverlayIn 180ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
    pointer-events: auto !important;
  }

  body[data-page="app"].app-shell-v2 > .topbar > .mobile-menu-button,
  body[data-page="app"].app-shell-v2 > .topbar > .auth-actions,
  body[data-page="app"].app-shell-v2 > .topbar > .auth-actions > #notificationButton.notification-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body[data-page="app"].app-shell-v2 > .topbar > .mobile-menu-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: var(--w2g-ink-2) !important;
  }

  body[data-page="app"].app-shell-v2 > .topbar > .mobile-menu-button::before,
  body[data-page="app"].app-shell-v2 > .topbar > .mobile-menu-button::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
  }

  body[data-page="app"].app-shell-v2 .mobile-menu-button-icon {
    display: none !important;
    width: 22px;
    height: 22px;
    color: currentColor;
    pointer-events: none;
  }

  body[data-page="app"].app-shell-v2 .mobile-menu-button-icon-auth-open {
    display: block !important;
  }

  body[data-page="app"].app-shell-v2 .mobile-menu-button[aria-expanded="true"] .mobile-menu-button-icon-open {
    display: none !important;
  }

  body[data-page="app"].app-shell-v2 .mobile-menu-button[aria-expanded="true"] .mobile-menu-button-icon-close {
    display: block !important;
  }

  body[data-page="app"].app-shell-v2 .mobile-menu-button:focus-visible,
  body[data-page="app"].app-shell-v2 .auth-actions > #notificationButton:focus-visible {
    outline: 2px solid var(--w2g-orange) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18) !important;
  }

  body[data-page="app"].app-shell-v2 .auth-actions > #notificationButton:disabled {
    opacity: 0.48;
    cursor: default;
    pointer-events: none;
  }

  body[data-page="app"].app-shell-v2 > .topbar > .main-nav {
    display: none !important;
  }

  body[data-page="app"].app-shell-v2.mobile-menu-open > .topbar > .main-nav.open {
    position: fixed !important;
    inset: 64px 0 0 !important;
    z-index: 340 !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 64px) !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 14px 16px max(20px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--w2g-surface) !important;
    color: var(--w2g-ink) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    animation: authenticatedNavPanelIn 180ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
    scrollbar-width: thin;
  }

  body[data-page="app"].app-shell-v2.mobile-menu-open > .topbar > .main-nav.open::before,
  body[data-page="app"].app-shell-v2.mobile-menu-open > .topbar > .main-nav.open::after {
    content: none !important;
    display: none !important;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open > .shell-nav-scroll {
    order: 1 !important;
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-group-label {
    display: none !important;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-group,
  body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-group-items {
    width: 100% !important;
    gap: 4px !important;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-group + .shell-nav-group {
    margin-top: 4px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--w2g-line) !important;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-item {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    width: 100% !important;
    min-height: 48px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--w2g-body) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-item.active {
    border-color: var(--w2g-orange-line) !important;
    background: var(--w2g-orange-soft) !important;
    color: var(--w2g-orange-ink) !important;
    font-weight: 800 !important;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-label {
    min-width: 0;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open > .shell-account-panel {
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--w2g-line) !important;
    background: transparent !important;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open > .mobile-nav-extras {
    order: 3 !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--w2g-line) !important;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open .mobile-nav-controls-row {
    width: 100% !important;
    gap: 8px !important;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open .mobile-language-switch,
  body[data-page="app"].app-shell-v2 .main-nav.open .mobile-theme-icon-btn {
    min-height: 44px !important;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open > .mobile-nav-auth {
    order: 4 !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body[data-page="app"].app-shell-v2 .main-nav.open .mobile-drawer-auth-btn {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    border-radius: 10px !important;
  }
}

@keyframes authenticatedNavOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes authenticatedNavPanelIn {
  from { transform: translateY(-8px); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="app"].app-shell-v2.mobile-menu-open::before,
  body[data-page="app"].app-shell-v2.mobile-menu-open > .topbar > .main-nav.open {
    animation: none !important;
    transition: none !important;
  }
}

/* Shared mobile drawer system for guest and authenticated shells. */
@media (max-width: 720px) {
  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open,
  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open::before,
  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open::after {
    background: #141414 !important;
    background-color: #141414 !important;
    background-image: none !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 130 !important;
    display: flex !important;
    width: min(280px, calc(100vw - 48px)) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 72px 14px max(18px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 18px 18px 0 !important;
    box-shadow: 24px 0 56px rgba(2, 6, 23, 0.42) !important;
    scrollbar-width: thin;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .shell-nav-scroll {
    order: 0 !important;
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .shell-nav-group {
    gap: 4px !important;
    margin: 0 !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .shell-nav-group + .shell-nav-group {
    margin-top: 4px !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .shell-nav-group-label {
    min-height: 22px;
    padding: 5px 8px 4px !important;
    color: #828b9a !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open .shell-nav-item:not(.active),
  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open .mobile-drawer-feedback-btn {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .shell-nav-item,
  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .mobile-drawer-feedback-btn {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    width: 100% !important;
    min-height: 46px !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .shell-nav-icon {
    display: grid !important;
    width: 24px !important;
    height: 24px !important;
    place-items: center !important;
    color: #9aa3b2 !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .shell-nav-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open .shell-nav-item.active {
    background: rgba(249, 115, 22, 0.16) !important;
    background-color: rgba(249, 115, 22, 0.16) !important;
    border-color: rgba(249, 115, 22, 0.34) !important;
    color: #ff8a3d !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open .shell-nav-item.active .shell-nav-icon {
    color: #ff8a3d !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open > .mobile-drawer-feedback-btn,
  body[data-page="app"].mobile-menu-open .topbar .main-nav.open > .shell-account-panel {
    order: 1 !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open > .shell-account-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open > .mobile-drawer-feedback-btn {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open > .mobile-nav-extras {
    order: 2 !important;
    display: flex !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .mobile-nav-controls-row {
    width: 100% !important;
    gap: 8px !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .mobile-language-switch {
    min-height: 42px !important;
    flex: 1 1 auto !important;
    border-radius: 10px !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .mobile-language-switch button {
    min-height: 34px !important;
    border-radius: 8px !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .mobile-theme-icon-btn {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open > .mobile-nav-auth {
    order: 3 !important;
    display: flex !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 4px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  }

  body[data-page="app"].mobile-menu-open .topbar .main-nav.open .mobile-drawer-auth-btn {
    min-height: 44px !important;
    border-radius: 12px !important;
  }
}

/* Authenticated Mobile colour parity
   ----------------------------------
   The authenticated drawer and body-level filter sheets reuse the same warm
   dark tokens as the Desktop Sidebar and cards. Guest presentation remains
   owned by the guest-scoped layers. */
@media (max-width: 1050px) {
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 > .topbar {
    background: var(--w2g-bg) !important;
    border-color: var(--w2g-line) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2 > .topbar > .mobile-menu-button,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 > .topbar > .auth-actions > #notificationButton.notification-button {
    border-color: var(--w2g-line) !important;
    background: var(--w2g-surface) !important;
    color: var(--w2g-ink-2) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open::before {
    background: var(--w2g-overlay) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open > .topbar > .main-nav.open,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open > .topbar > .main-nav.open::before,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open > .topbar > .main-nav.open::after {
    background: var(--w2g-surface) !important;
    background-color: var(--w2g-surface) !important;
    background-image: none !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-group + .shell-nav-group,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open > .shell-account-panel,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open > .mobile-nav-extras,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open > .mobile-nav-auth {
    border-color: var(--w2g-line) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-group-label {
    color: var(--w2g-muted) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-item:not(.active),
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .mobile-language-switch,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .mobile-language-switch button,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .mobile-theme-icon-btn,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open button.mobile-drawer-auth-btn {
    border-color: var(--w2g-line) !important;
    background: var(--w2g-surface-2) !important;
    background-color: var(--w2g-surface-2) !important;
    background-image: none !important;
    color: var(--w2g-body) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-item:not(.active):hover,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-item:not(.active):active,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .mobile-language-switch button:not(.active):hover,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .mobile-theme-icon-btn:hover {
    border-color: var(--w2g-line-strong) !important;
    background: var(--w2g-surface-3) !important;
    background-color: var(--w2g-surface-3) !important;
    color: var(--w2g-ink) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-item.active,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .mobile-language-switch button.active {
    border-color: var(--w2g-orange-line) !important;
    background: var(--w2g-orange-soft) !important;
    background-color: var(--w2g-orange-soft) !important;
    color: var(--w2g-orange-ink) !important;
    box-shadow: inset 0 0 0 1px var(--w2g-orange-line) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-icon {
    color: currentColor !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open .shell-nav-badge {
    border-color: var(--w2g-line-strong) !important;
    background: var(--w2g-surface-3) !important;
    color: var(--w2g-ink) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open button.mobile-drawer-auth-btn:hover,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open button.mobile-drawer-auth-btn:focus-visible {
    border-color: color-mix(in srgb, var(--w2g-danger) 40%, var(--w2g-line)) !important;
    background: color-mix(in srgb, var(--w2g-danger) 12%, var(--w2g-surface-2)) !important;
    color: var(--w2g-danger) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open :is(button, a):focus-visible {
    outline: 2px solid var(--w2g-orange) !important;
    outline-offset: 2px !important;
    box-shadow: var(--w2g-focus) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2 .main-nav.open {
    scrollbar-color: var(--w2g-line-strong) transparent;
  }
}

@media (max-width: 760px) {
  html[data-theme="dark"] body[data-page="app"].app-shell-v2.filter-sheet-open > :is(#competitionFilterPanel, #teamFilterPanel, #memberFilterPanel).filter-drawer:not(.hidden) {
    border-color: var(--w2g-line-strong) !important;
    background: var(--w2g-surface) !important;
    color: var(--w2g-ink) !important;
    box-shadow:
      0 0 0 100vmax var(--w2g-overlay),
      var(--w2g-shadow-pop) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.filter-sheet-open > :is(#competitionFilterPanel, #teamFilterPanel, #memberFilterPanel).filter-drawer:not(.hidden)::before {
    background: var(--w2g-line-strong) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.filter-sheet-open > :is(#competitionFilterPanel, #teamFilterPanel, #memberFilterPanel) .filter-drawer-header,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2.filter-sheet-open > :is(#competitionFilterPanel, #teamFilterPanel, #memberFilterPanel) .filter-actions {
    border-color: var(--w2g-line) !important;
    background: var(--w2g-surface) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.filter-sheet-open > :is(#competitionFilterPanel, #teamFilterPanel, #memberFilterPanel) .filter-drawer-header strong {
    color: var(--w2g-ink) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.filter-sheet-open > :is(#competitionFilterPanel, #teamFilterPanel, #memberFilterPanel) :is(.filter-drawer-header p, .filters-panel label > span, .filter-sort-field > span, .active-filter-label) {
    color: var(--w2g-muted) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.filter-sheet-open > :is(#competitionFilterPanel, #teamFilterPanel, #memberFilterPanel) .filter-close,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2.filter-sheet-open > :is(#competitionFilterPanel, #teamFilterPanel, #memberFilterPanel) :is(select, input),
  html[data-theme="dark"] body[data-page="app"].app-shell-v2.filter-sheet-open > :is(#competitionFilterPanel, #teamFilterPanel, #memberFilterPanel) .filter-actions .button.ghost {
    border-color: var(--w2g-line) !important;
    background: var(--w2g-surface-2) !important;
    color: var(--w2g-ink) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.filter-sheet-open > :is(#competitionFilterPanel, #teamFilterPanel, #memberFilterPanel) :is(.filter-close, select, input, button):focus-visible {
    outline: 2px solid var(--w2g-orange) !important;
    outline-offset: 2px !important;
    box-shadow: var(--w2g-focus) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.filter-sheet-open > :is(#competitionFilterPanel, #teamFilterPanel, #memberFilterPanel) .active-filter-chip {
    border-color: var(--w2g-orange-line) !important;
    background: var(--w2g-orange-soft) !important;
    color: var(--w2g-orange-ink) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.filter-sheet-open > :is(#competitionFilterPanel, #teamFilterPanel, #memberFilterPanel) .filter-actions .button.primary {
    border-color: var(--w2g-orange) !important;
    background: var(--w2g-orange) !important;
    color: var(--w2g-orange-contrast) !important;
  }
}

/* Mobile app-shell control parity. This file loads last. */
@media (max-width: 1050px) {
  body[data-page="app"].app-shell-guest > .topbar > .auth-actions {
    display: none !important;
  }

  body[data-page="app"].app-shell-v2 > .topbar > .auth-actions {
    display: flex !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  body[data-page="app"].app-shell-v2 > .topbar > .auth-actions > #notificationButton.notification-button {
    display: inline-grid !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid var(--w2g-line) !important;
    border-radius: 10px !important;
    background: var(--w2g-surface) !important;
    box-shadow: none !important;
  }
}


/* ============================================================
   PHASE 1B.1 - MOBILE REQUESTS TABS, BADGES, AND CARDS
   ============================================================ */
@media (max-width: 680px) {
  body.app-shell-v2 #requests {
    max-width: 100%;
    overflow-x: clip;
  }

  body.app-shell-v2 #requests .section-title-row {
    gap: 2px;
    margin-bottom: 7px;
    padding-bottom: 7px;
  }

  body.app-shell-v2 #requests .section-title-row .eyebrow {
    display: none;
  }

  body.app-shell-v2 #requests .section-title-row h1 {
    margin: 0;
    font-size: 17px;
    line-height: 1.15;
  }

  body.app-shell-v2 #requests .section-title-row .muted {
    max-width: 34rem;
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.35;
  }

  body.app-shell-v2 #requests #requestTabs.tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 5px;
    margin: 0 0 8px;
    padding: 1px 0 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--w2g-orange-line) transparent;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  body.app-shell-v2 #requests #requestTabs.tabs::-webkit-scrollbar {
    height: 3px;
  }

  body.app-shell-v2 #requests #requestTabs.tabs::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--w2g-orange-line);
  }

  body.app-shell-v2 #requests #requestTabs.tabs button {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 36px;
    gap: 6px;
    padding: 6px 9px;
    border-color: var(--w2g-line);
    border-radius: 999px;
    background: var(--w2g-surface-2);
    color: var(--w2g-muted);
    scroll-snap-align: start;
    font-size: 11px;
    white-space: nowrap;
  }

  body.app-shell-v2 #requests #requestTabs.tabs button.active {
    border-color: var(--w2g-orange);
    background: var(--w2g-orange);
    color: #fff;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.18);
  }

  body.app-shell-v2 #requests #requestTabs.tabs .request-tab-label {
    flex: 0 0 auto;
    gap: 6px;
  }

  body.app-shell-v2 #requests #requestTabs.tabs .request-tab-label iconify-icon {
    width: 14px;
    height: 14px;
    font-size: 14px;
  }

  body.app-shell-v2 #requests #requestTabs.tabs .request-tab-count,
  body.app-shell-v2 #requests .request-v2-section > h3 .request-tab-count {
    flex: 0 0 auto;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    font-size: 9.5px;
    line-height: 1;
  }

  body.app-shell-v2 #requests #requestTabs.tabs button.active .request-tab-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  body.app-shell-v2 #requests #requestContent,
  body.app-shell-v2 #requests .request-v2-list,
  body.app-shell-v2 #requests .request-v2-section,
  body.app-shell-v2 #requests .request-v2-card,
  body.app-shell-v2 #requests .request-v2-main,
  body.app-shell-v2 #requests .request-v2-side {
    min-width: 0;
    max-width: 100%;
  }

  body.app-shell-v2 #requests #requestContent {
    gap: 10px;
  }

  body.app-shell-v2 #requests .request-v2-list {
    gap: 8px;
  }

  body.app-shell-v2 #requests .request-v2-section {
    gap: 7px;
  }

  body.app-shell-v2 #requests .request-v2-section + .request-v2-section {
    margin-top: 4px;
  }

  body.app-shell-v2 #requests .request-v2-section > h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    line-height: 1.25;
  }

  body.app-shell-v2 #requests .request-v2-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    box-sizing: border-box;
  }

  body.app-shell-v2 #requests .request-v2-card.request-v2-urgent,
  body.app-shell-v2 #requests .request-v2-card.urgent {
    border-left-width: 3px;
  }

  body.app-shell-v2 #requests .request-v2-head {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }

  body.app-shell-v2 #requests .request-v2-head > div {
    min-width: 0;
  }

  body.app-shell-v2 #requests .request-v2-head h3 {
    margin-top: 3px;
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.25;
  }

  body.app-shell-v2 #requests .request-v2-kicker {
    font-size: 9px;
    line-height: 1.2;
  }

  body.app-shell-v2 #requests .request-v2-status {
    flex: 0 0 auto;
    min-height: 23px;
    padding: 3px 7px;
    font-size: 9px;
  }

  body.app-shell-v2 #requests .request-v2-subtitle {
    margin-top: 5px;
    overflow-wrap: anywhere;
    font-size: 11.5px;
    line-height: 1.4;
  }

  body.app-shell-v2 #requests .request-v2-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 8px;
  }

  body.app-shell-v2 #requests .request-v2-meta span {
    display: block;
    min-width: 0;
    min-height: 0;
    padding: 6px 7px;
    border-radius: 8px;
    overflow-wrap: anywhere;
    font-size: 10px;
    line-height: 1.3;
  }

  body.app-shell-v2 #requests .request-v2-meta b {
    display: block;
    margin-bottom: 1px;
    font-size: 9px;
  }

  body.app-shell-v2 #requests .request-v2-message {
    margin-top: 8px;
    padding: 9px;
    border-radius: 9px;
  }

  body.app-shell-v2 #requests .request-v2-message span {
    margin-bottom: 3px;
    font-size: 9px;
  }

  body.app-shell-v2 #requests .request-v2-message p {
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.4;
  }

  body.app-shell-v2 #requests .request-v2-side {
    width: 100%;
    justify-items: stretch;
  }

  body.app-shell-v2 #requests .request-v2-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    width: 100%;
    gap: 6px;
  }

  body.app-shell-v2 #requests .request-v2-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    padding: 8px 10px;
    justify-content: center;
    font-size: 11.5px;
    white-space: normal;
  }

  body.app-shell-v2 #requests .request-v2-empty {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 3px 9px;
    min-height: 0;
    padding: 10px 11px;
    place-items: initial;
    align-items: center;
    border-radius: 10px;
    text-align: left;
  }

  body.app-shell-v2 #requests .request-v2-empty::before {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 8px;
    background-size: 14px 14px, 100% 100%, 100% 100%;
  }

  body.app-shell-v2 #requests .request-v2-empty strong {
    grid-column: 2;
    margin: 0;
    font-size: 12px;
    line-height: 1.25;
  }

  body.app-shell-v2 #requests .request-v2-empty p {
    grid-column: 2;
    overflow-wrap: anywhere;
    font-size: 10.5px;
    line-height: 1.3;
  }

  body.app-shell-v2 #requests .request-v2-empty .button-row {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 5px;
    justify-content: center;
  }

  body.app-shell-v2 #requests .request-v2-empty .button {
    width: auto;
    min-height: 36px;
    padding: 7px 12px;
    justify-content: center;
    font-size: 11px;
  }

  body.app-shell-v2 #requests .saved-dashboard-list {
    gap: 7px;
  }

  body.app-shell-v2 #requests .saved-dashboard-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border-radius: 11px;
  }

  body.app-shell-v2 #requests .saved-dashboard-row > div,
  body.app-shell-v2 #requests .saved-member-info,
  body.app-shell-v2 #requests .saved-member-info > div {
    min-width: 0;
  }

  body.app-shell-v2 #requests .saved-dashboard-row strong,
  body.app-shell-v2 #requests .saved-dashboard-row p {
    overflow-wrap: anywhere;
  }

  body.app-shell-v2 #requests .saved-dashboard-row p {
    font-size: 11px;
    line-height: 1.35;
  }

  body.app-shell-v2 #requests .saved-row-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    width: 100%;
    gap: 6px;
  }

  body.app-shell-v2 #requests .saved-row-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    justify-content: center;
  }

  body.app-shell-v2 #requests .request-v2-organizer-applicant .organizer-applicant-heading {
    gap: 8px;
  }

  body.app-shell-v2 #requests .request-v2-organizer-applicant .organizer-applicant-heading strong {
    font-size: 15px;
  }

  body.app-shell-v2 #requests .organizer-applicant-v2-actions select {
    min-width: 0;
    width: 100%;
  }
/* Authenticated drawer cascade seal: shared warm theme tokens. */
@media (max-width: 720px) {
  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open .topbar .main-nav.open,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open .topbar .main-nav.open::before,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open .topbar .main-nav.open::after {
    background: var(--w2g-surface) !important;
    background-color: var(--w2g-surface) !important;
    background-image: none !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open .topbar .main-nav.open .shell-nav-scroll,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open .topbar .main-nav.open .shell-account-panel {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open .topbar .main-nav.open button:not(.active) {
    background: var(--w2g-surface-2) !important;
    background-color: var(--w2g-surface-2) !important;
    background-image: none !important;
    border-color: var(--w2g-line) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open .topbar .main-nav.open button:not(.active):hover,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open .topbar .main-nav.open button:not(.active):active {
    background: var(--w2g-surface-3) !important;
    background-color: var(--w2g-surface-3) !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-v2.mobile-menu-open .topbar .main-nav.open button.active {
    background: var(--w2g-orange-soft) !important;
    background-color: var(--w2g-orange-soft) !important;
    background-image: none !important;
    border-color: var(--w2g-orange-line) !important;
    color: var(--w2g-orange-ink) !important;
  }
}
}

/* Guest drawer keeps its established presentation. Authenticated Mobile is
   intentionally excluded and uses the semantic-token rules above. */
@media (max-width: 720px) {
  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open,
  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open::before,
  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open::after {
    background: #141414 !important;
    background-color: #141414 !important;
    background-image: none !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open .shell-nav-item:not(.active),
  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open .mobile-drawer-feedback-btn {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
  }

  html[data-theme="dark"] body[data-page="app"].app-shell-guest.mobile-menu-open .topbar .main-nav.open .shell-nav-item.active {
    background: rgba(249, 115, 22, 0.16) !important;
    background-color: rgba(249, 115, 22, 0.16) !important;
    border: 1px solid rgba(249, 115, 22, 0.34) !important;
    color: #ff8a3d !important;
  }
}