/* ==========================================================================
   FANALYTICS — Global mobile responsive safety layer
   Loaded globally; sports-dark default. Desktop unchanged above 768px.
   ========================================================================== */

:root {
  --fa-mobile-nav-height: 60px;
  --fa-ticker-height: 36px;
  --fa-bottom-nav-height: var(--mobile-bottom-nav-h, 50px);
  /* Single horizontal inset on mobile — do not stack on nested grids */
  --fa-mobile-gutter: 12px;
  --fa-mobile-edge: 12px;
  --fa-mobile-main-pad-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}

html.has-mobile-bottom-nav {
  --fa-mobile-main-pad-bottom: calc(
    var(--mobile-bottom-nav-total, 72px) + env(safe-area-inset-bottom, 0px) + 24px
  );
}

/* ---------- Action chips (all viewports — prevents concatenated labels) ---------- */

.mc-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-top: 8px;
  max-width: 100%;
}

.mc-actions::-webkit-scrollbar {
  display: none;
}

.mc-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  line-height: 1.2;
}

/* ---------- Base safety (mobile) ---------- */

@media (max-width: 767px) {
  html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
    font-size: 15px;
    line-height: 1.55;
  }

  #root,
  .app-shell,
  .app-main,
  .app-shell__content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .app-main img,
  .app-shell__content img,
  #root img {
    max-width: 100%;
    height: auto;
  }

  /* Bottom nav clearance (fallback if class missing briefly) */
  html.has-mobile-bottom-nav:not(.is-circle-chat-active) .app-main,
  html.has-mobile-bottom-nav:not(.is-circle-chat-active) .app-shell__content {
    padding-bottom: var(--fa-mobile-main-pad-bottom) !important;
  }

  /* Kill horizontal page scroll from wide children */
  .home-page,
  .fixtures-page,
  .sf-page,
  .fp-page,
  .mc-page,
  .fa-app-page {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* ---------- Typography ---------- */

  h1, .fa-page-title {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    line-height: 1.08;
  }

  h2, .hd-panel-title, .mc-panel-title, .sf-section-title {
    font-size: clamp(12px, 3.2vw, 14px);
  }

  .mc-lead,
  .hd-hero-lead,
  .sf-lead {
    font-size: 14px;
  }

  /* ---------- Buttons — no browser default chrome ---------- */

  #root button,
  .app-main button {
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
  }

  #root .sf-circle-back-btn,
  #root .sf-circle-inbox-row,
  .app-main .sf-circle-back-btn,
  .app-main .sf-circle-inbox-row {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    box-shadow: none;
    color: inherit;
  }

  #root .sf-circle-back-btn,
  .app-main .sf-circle-back-btn {
    color: var(--teal, #00c2cb);
  }

  #root .btn,
  .app-main .btn,
  .home-page .mc-filter,
  .fixtures-page .mc-chip,
  .mc-filter,
  .mc-chip {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 6px;
    font-family: inherit;
    cursor: pointer;
  }

  /* ---------- Tab / action chips (mobile scroll) ---------- */

  .fa-action-row,
  .fa-chip-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }

  .fa-action-row::-webkit-scrollbar,
  .fa-chip-row::-webkit-scrollbar {
    display: none;
  }

  .fa-action-chip {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .fa-tabs,
  .sf-composer-modes,
  .chub-tabs,
  #discussion .disc-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }

  .fa-tabs::-webkit-scrollbar,
  .sf-composer-modes::-webkit-scrollbar,
  .chub-tabs::-webkit-scrollbar,
  #discussion .disc-tabs::-webkit-scrollbar {
    display: none;
  }

  .fa-tab,
  .sf-mode,
  .chub-tab,
  #discussion .disc-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ---------- Global mobile edge (single gutter — no double padding) ---------- */

  .fa-dashboard-grid,
  .hd-grid,
  .mc-dash,
  .up-dash,
  .td-dash {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .sf-wrap {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Fandom / feed — shell full width; sections get one inset */
  body.feed-page .sf-page,
  body.feed-page .sf-page--feed,
  body.feed-page .sf-feed-layout,
  body.feed-page .sf-feed-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  body.feed-page .sf-feed-head,
  body.feed-page .sf-feed-sticky-chrome,
  body.feed-page .sf-feed-list,
  body.feed-page .sf-circle-inbox,
  body.circles-page .sf-circles-page-head,
  body.circles-page .sf-circles-inbox-mount,
  body.circles-page .sf-circle-inbox,
  body.feed-page .sf-composer-teaser,
  body.feed-page .sf-composer--expanded .sf-composer-panel {
    padding-left: var(--fa-mobile-edge) !important;
    padding-right: var(--fa-mobile-edge) !important;
  }

  body.feed-page .sf-feed-list .sf-post-media {
    margin-left: calc(-1 * var(--fa-mobile-edge)) !important;
    margin-right: calc(-1 * var(--fa-mobile-edge)) !important;
    width: calc(100% + 2 * var(--fa-mobile-edge)) !important;
    max-width: calc(100% + 2 * var(--fa-mobile-edge)) !important;
  }

  /* Profile — app-like single column; no desktop rails */
  body.profile-page .up-root.up-dash.sf-feed-layout {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  body.profile-page .up-hero-card,
  body.profile-page .up-mobile-identity,
  body.profile-page .up-mobile-stats,
  body.profile-page .up-mobile-block,
  body.profile-page .up-tabs,
  body.profile-page .up-panels,
  body.profile-page .up-panels .sf-feed-list {
    padding-left: var(--fa-mobile-edge) !important;
    padding-right: var(--fa-mobile-edge) !important;
  }

  body.profile-page .up-panels .sf-feed-list .sf-post-media {
    margin-left: calc(-1 * var(--fa-mobile-edge)) !important;
    margin-right: calc(-1 * var(--fa-mobile-edge)) !important;
    width: calc(100% + 2 * var(--fa-mobile-edge)) !important;
    max-width: calc(100% + 2 * var(--fa-mobile-edge)) !important;
  }

  /* Home */
  .home-page .hd-main {
    padding-left: var(--fa-mobile-edge) !important;
    padding-right: var(--fa-mobile-edge) !important;
    max-width: none !important;
  }

  .home-page .hd-social-strip {
    padding-left: var(--fa-mobile-edge) !important;
    padding-right: var(--fa-mobile-edge) !important;
  }

  /* Fixtures / Match Center */
  .fixtures-page .mc-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .fixtures-page .mc-dash {
    padding-left: var(--fa-mobile-edge) !important;
    padding-right: var(--fa-mobile-edge) !important;
  }

  /* FanPicks + leaderboards (shared fp styles) */
  body.fanpicks-page .fp-dash,
  body.leaderboards-page .sf-page,
  body.leaderboards-page .fp-page {
    padding-left: var(--fa-mobile-edge) !important;
    padding-right: var(--fa-mobile-edge) !important;
    max-width: 100% !important;
  }

  /* Generic social / utility pages */
  .sf-page:not(.sf-page--feed) {
    padding-left: var(--fa-mobile-edge) !important;
    padding-right: var(--fa-mobile-edge) !important;
    max-width: 100% !important;
  }

  .sf-page--search {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* User profile */
  .up-root {
    padding-left: var(--fa-mobile-edge) !important;
    padding-right: var(--fa-mobile-edge) !important;
    max-width: 100% !important;
  }

  /* Teams directory */
  .teams-dir-page .td-dash {
    padding-left: var(--fa-mobile-edge) !important;
    padding-right: var(--fa-mobile-edge) !important;
    max-width: 100% !important;
  }

  /* Competition hub + generic app pages */
  .fa-app-page,
  .competition-hub-page {
    padding-left: var(--fa-mobile-edge) !important;
    padding-right: var(--fa-mobile-edge) !important;
  }

  .fa-app-page .fa-dashboard-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Match page */
  body.match-page,
  .match-page {
    --mp-pad: var(--fa-mobile-edge) !important;
  }

  /* News */
  .nw-wrap {
    padding-left: var(--fa-mobile-edge) !important;
    padding-right: var(--fa-mobile-edge) !important;
    max-width: 100% !important;
  }

  /* Auth / settings */
  .auth-wrap,
  .auth-main .auth-wrap {
    padding-left: var(--fa-mobile-edge) !important;
    padding-right: var(--fa-mobile-edge) !important;
  }

  /* ---------- Dashboard layout ---------- */

  .fa-dashboard-grid,
  .hd-grid,
  .mc-dash {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .fa-left-rail,
  .fa-right-rail,
  .hd-col--right,
  .hd-col--left {
    order: unset;
    width: 100%;
    min-width: 0;
  }

  .fa-main-content,
  .hd-main,
  .mc-main {
    width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .fa-section-card,
  .hd-panel,
  .mc-panel {
    width: 100%;
    min-width: 0;
  }

  /* ---------- Competition rows ---------- */

  .hd-comp-item,
  .mc-comp-row,
  .fa-comp-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    width: 100%;
  }

  .hd-comp-name,
  .mc-comp-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }

  .hd-comp-badge,
  .mc-comp-count,
  .fa-status-badge {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ---------- Fan zone link chips ---------- */

  .hd-fan-links,
  .mc-links--chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
  }

  .hd-fan-links::-webkit-scrollbar {
    display: none;
  }

  .hd-fan-link {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ---------- Home mobile order ---------- */

  .home-page .hd-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: 0;
    padding-right: 0;
  }

  .home-page .hd-col--center { order: 1; }
  .home-page .hd-col--left { order: 2; }
  .home-page .hd-col--right { order: 3; }

  .home-page .hd-main {
    padding-top: 12px;
    padding-bottom: 28px;
  }

  .home-page .hd-hero {
    padding-left: 0;
    padding-right: 0;
  }

  .home-page .hd-social-strip {
    padding-bottom: 28px;
  }

  .home-page .hd-social-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Home match cards — compact on mobile */
  .home-page .mc-card {
    padding: 8px 10px;
  }

  .home-page .match-teams {
    gap: 6px;
  }

  .home-page .team-name {
    font-size: 13px;
  }

  .home-page .td-flag {
    width: 20px;
    height: 14px;
  }

  .home-page .match-mid-score {
    font-size: 13px;
  }

  /* Featured match compact */
  .home-page .hd-fi-matchup {
    gap: 10px;
  }

  .home-page .hd-fi-name {
    font-size: 13px;
  }

  .home-page .hd-fi-score {
    font-size: 16px;
  }

  .home-page .hd-fi-team .hd-flag {
    width: 18px;
    height: 13px;
  }

  /* Match news rows */
  .home-page .hd-news-item {
    padding: 10px 12px;
  }

  .home-page .hd-news-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .home-page .hd-news-title {
    font-size: 13px;
    line-height: 1.35;
  }

  .home-page .hd-news-desc {
    font-size: 12px;
    line-height: 1.4;
  }

  /* ---------- Fixtures mobile ---------- */

  .fixtures-page .mc-page {
    padding-top: 12px;
    padding-bottom: var(--fa-mobile-main-pad-bottom);
  }

  .fixtures-page .mc-rail--right {
    display: none;
  }

  .fixtures-page .mc-head {
    margin-bottom: 12px;
  }

  .fixtures-page .mc-mobile-filters {
    display: block;
    margin-bottom: 12px;
  }

  .fixtures-page .mc-chips--mobile {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .fixtures-page .mc-chips--mobile::-webkit-scrollbar {
    display: none;
  }

  .fixtures-page .mc-fix-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 8px;
    padding: 10px 8px;
    align-items: center;
  }

  .fixtures-page .mc-badge {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 44px;
    font-size: 9px;
    line-height: 1.2;
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fixtures-page .mc-matchup {
    grid-column: 2;
    grid-row: 1;
    gap: 6px;
    min-width: 0;
  }

  .fixtures-page .mc-fix-row-meta {
    grid-column: 2;
    grid-row: 2;
    padding-left: 0 !important;
    font-size: 10px;
    line-height: 1.3;
    opacity: 0.65;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fixtures-page .mc-team-name {
    font-size: 13px;
  }

  .fixtures-page .mc-flag {
    width: 16px;
    height: 11px;
    flex-shrink: 0;
  }

  .fixtures-page .mc-score-num {
    font-size: 14px;
  }

  .fixtures-page .mc-links {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .fixtures-page .mc-links::-webkit-scrollbar {
    display: none;
  }

  .fixtures-page .mc-link-item {
    flex-shrink: 0;
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
  }

  .fixtures-page .mc-link-item + .mc-link-item {
    border-top: none;
  }
}