/* ==========================================================================
   member_theme.css — Signal Room polish for the logged-in app (Phase: home)
   Loaded LAST on base.html. Additive refinement over the existing themed member
   UI (colors already come from theme.json) — this brings the landing's card
   treatment, gradient-gold accents, mono data feel, and breathing room.
   Conservative first pass; iterate live. No structural/JS changes here.
   ========================================================================== */

:root{
  --sr-grad: var(--bg-grad, linear-gradient(103deg, #f5d06a, #e0b040));
  /* Readability: the default muted grey (#9aa0a8) is too dim on the dark ground.
     Brighter secondary text = far more legible everywhere. (Admin theme can still override.) */
  --muted: #a8b0bc;
}

/* ==== Readability & clarity (every logged-in page) — nothing removed ==== */
.site-body p, .site-body li, .site-body .muted, .site-body .section-subtitle,
.site-body .subtitle, .site-body dd{ line-height: 1.5; }
.site-body .muted, .site-body .section-subtitle{ color: var(--muted); }
.site-body .tiny{ font-size: .8rem; }
/* Body text shouldn't fall below a readable floor on mobile */
@media (max-width: 640px){
  .site-body{ font-size: clamp(14px, 3.6vw, 16px); }
  .site-body .tiny{ font-size: .78rem; }
}
/* Clearer, consistent section headers */
.site-body .section-header h2, .site-body .dashboard-section h2, .site-body .page-title-main{
  letter-spacing: -.02em;
}
/* Numeric data reads as data (aligned digits) */
.site-body .mono, .site-body [class*="bgs"], .site-body [class*="score"], .site-body [class*="odds"]{
  font-variant-numeric: tabular-nums;
}

/* ---- Hero brand text: gradient gold wordmark feel ---- */
.page-hero-zone-v2 .page-title-main{
  font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.12;   /* bigger hero title */
}
/* The hero title read flush to the feed edge — give the hero header the same inline padding as
   the cards below it so title, subtitle and cards line up. */
.command-feed .page-hero-zone-v2{ padding-inline: .35rem; }
/* "Board ranked · Verifying" → a top-right status chip on desktop (flows under the title on mobile). */
.page-hero-zone-v2 .page-hero-meta{ position: relative; }
@media (min-width: 768px){
  .page-hero-zone-v2 .page-hero-meta .freshness-meta{
    position: absolute; top: 0; right: .35rem; margin: 0; text-align: right;
    padding: .32rem .7rem; border: 1px solid var(--border, #2a3140); border-radius: 999px;
    background: var(--card, #1a1f28); max-width: 46%;
  }
}
.brand-gold-text{
  background: var(--sr-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Cards: hairline + rounded + subtle depth (landing card treatment) ---- */
.command-feed .card,
.command-feed .dashboard-section,
.command-feed .home-live-board{
  border: 1px solid var(--border, #2a3140);
  border-radius: 15px;
  box-shadow: 0 24px 50px -34px rgba(0,0,0,.7);
}

/* ---- Section headers: cleaner, gold links ---- */
.command-feed .section-header h2,
.command-feed .dashboard-section h2{ letter-spacing: -.02em; }
.command-feed .section-link{
  color: var(--accent-bright, #f0c860); font-weight: 650; font-size: .82rem;
}
.command-feed .section-link:hover{ text-decoration: underline; }

/* ---- Ticket-type cards: dark with a gold accent (not solid-gold blocks) ---- */
.home-ticket-nav-grid .home-ticket-nav-btn{
  background: linear-gradient(168deg, var(--card, #1a1f28), #12161d) !important;
  color: var(--text, #e8eaed) !important;
  border-radius: 12px;
  border: 1px solid var(--border, #2a3140);
  box-shadow: none;
  border-left: 3px solid var(--accent, #e0b040);   /* gold accent stripe */
  transition: transform .15s, border-color .15s;
}
.home-ticket-nav-grid .home-ticket-nav-btn:hover{
  transform: translateY(-2px);
  border-color: var(--accent, #e0b040);
}
.home-ticket-nav-grid .home-ticket-nav-label{ font-weight: 700; letter-spacing: -.01em; }
.home-ticket-nav-grid .home-ticket-count{
  background: var(--sr-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800;
}
/* LIGHT text on the dark cards. style.css sets the label/desc to near-black (#0c1118, for its
   old solid-gold cards) and out-specifies member_theme, so the text was dark-on-dark = invisible.
   Force it light on the (inactive) dark cards. */
.home-ticket-nav-grid .home-ticket-nav-btn .home-ticket-nav-label{ color: var(--text, #e8eaed) !important; }
.home-ticket-nav-grid .home-ticket-nav-btn .home-ticket-nav-desc{ color: var(--muted, #9aa0a8) !important; font-size: .78rem; }

/* The ACTIVE card: solid gold + dark text so it clearly stands out from the dark inactive ones. */
.home-ticket-nav-grid .home-ticket-nav-btn.is-active,
.home-ticket-nav-grid .home-ticket-nav-btn[aria-selected="true"]{
  background: linear-gradient(135deg, var(--accent-bright, #f0c860), var(--accent, #e0b040)) !important;
  border-left-color: var(--accent-bright, #f0c860);
}
.home-ticket-nav-grid .home-ticket-nav-btn.is-active .home-ticket-nav-label,
.home-ticket-nav-grid .home-ticket-nav-btn.is-active .home-ticket-nav-desc,
.home-ticket-nav-grid .home-ticket-nav-btn[aria-selected="true"] .home-ticket-nav-label,
.home-ticket-nav-grid .home-ticket-nav-btn[aria-selected="true"] .home-ticket-nav-desc{ color: #0c1118 !important; }

/* ---- Quick-insight chips: tidy stat tiles ---- */
.quick-insights-strip{ gap: .55rem; }
.quick-insight-chip{
  background: var(--card, #1a1f28); border: 1px solid var(--border, #2a3140); border-radius: 12px;
}
.quick-insight-value{
  font-variant-numeric: tabular-nums; color: var(--accent-bright, #f0c860); font-weight: 700;
}
.quick-insight-label{ color: var(--muted, #9aa0a8); }

/* ---- Numeric data → tabular alignment (BGS, odds, counts) ---- */
.command-feed .mono, .command-feed .bgs, .command-feed [class*="bgs"]{ font-variant-numeric: tabular-nums; }

/* ==== Mobile-first home polish (80% of traffic) — ≤640px ==== */
@media (max-width: 640px){
  .command-center{ padding-inline: 0; }
  .command-feed{ padding-inline: .75rem; }
  .page-hero-zone-v2{ padding-top: .5rem; }
  .page-hero-zone-v2 .page-title-main{ font-size: 1.7rem; }   /* bigger on mobile too */
  .home-subtitle-row{ font-size: .88rem; }

  /* Ticket types → compact swipeable pill row (declutter, mockup-aligned) */
  .home-ticket-nav h2.section-title-sm{ font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted,#9aa0a8); margin-bottom: .5rem; }
  .home-ticket-nav-grid{
    display: flex !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: .5rem;
    padding-bottom: .4rem; scrollbar-width: none;
    /* pan-x pan-y: the row scrolls sideways AND vertical drags still scroll the page.
       `pan-x` alone does not "pass through" — it disables vertical panning outright. */
    touch-action: pan-x pan-y; overscroll-behavior-x: contain;
  }
  .home-ticket-nav-grid::-webkit-scrollbar{ display: none; }
  .home-ticket-nav-pair{ display: contents; }      /* let its 2 buttons join the row */
  .home-ticket-nav-grid .home-ticket-nav-btn{
    flex: 0 0 auto; width: auto !important; min-height: 0;
    flex-direction: row; align-items: center; gap: .45rem;
    padding: .55rem .9rem !important; border-radius: 999px !important;
    /* Keep the gold accent the desktop cards have. Dropping it here left the
       mobile pills reading as flat grey chips, visually disowned from the rest
       of the board. A pill is too short for a 3px left stripe, so the accent
       moves to the border itself. */
    border-left-width: 1px !important;
    border-color: var(--accent, #e0b040);
  }
  .home-ticket-nav-desc{ display: none; }          /* pills show label + count only */
  .home-ticket-nav-label{ font-size: .88rem; white-space: nowrap; }

  /* Teach swipe: the pill row scrolls sideways. A right-edge fade signals "more this way",
     and a one-time nudge on first view makes the row visibly move so it reads as swipeable. */
  .home-ticket-nav-grid{
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
    animation: ticketSwipeHint 1.5s ease .7s 1 both;
  }
  @keyframes ticketSwipeHint{
    0%, 100%{ transform: translateX(0); }
    30%{ transform: translateX(-20px); }
    58%{ transform: translateX(0); }
  }

  /* Quick-insight chips: 2 across, compact */
  .quick-insights-strip{ display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; }
  .quick-insight-chip{ padding: .6rem .7rem; }
  .quick-insight-value{ font-size: 1.25rem; }

  /* Boards + games: full-width, generous tap targets, smooth horizontal scroll */
  .dashboard-layout-home-2col{ display: block; }
  .dashboard-col + .dashboard-col{ margin-top: .8rem; }
  .home-games-track, .home-ticket-track{ scroll-snap-type: x proximity; }
  .home-games-slide, .home-ticket-track > *{ scroll-snap-align: start; }
  .section-header h2{ font-size: 1.05rem; }
  .card, .dashboard-section{ border-radius: 13px; }
}

/* ==== Mobile-first list pages (signals / parlays / props / daggers) — ≤640px ==== */
@media (max-width: 640px){
  /* Filter rail stacks above the list; keep it compact, not a wall */
  .list-page-body{ display: block; }
  .list-filters-rail{ margin-bottom: .8rem; padding: .6rem .7rem; border-radius: 12px; }
  .list-filters-rail .filters-quick-row{ display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; }
  .list-filters-rail select,
  .list-filters-rail .search-input,
  .list-filters-rail .date-input{ min-height: 42px; border-radius: 9px; }
  .filters-quick-apply{ min-height: 42px; }
  .filters-advanced > summary{ min-height: 42px; display: flex; align-items: center; }

  /* Lists: full-width cards, comfortable spacing, no sideways push */
  .signals-list, .parlays-list, .props-list, .dashboard-safe-bets, .dashboard-daggers{
    display: flex; flex-direction: column; gap: .7rem; min-width: 0;
  }
  .signal-card, .parlay-card, .safe-bet-card{ width: 100%; max-width: 100%; }

  /* Ranking sort chips + any chip nav: swipeable single row, no wrap wall */
  .filter-chips, .signals-sort-chips, .tracker-period-tabs, .bgf-view-tabs, .builder-mode-tabs{
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .4rem; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: .3rem;
  }
  .filter-chips::-webkit-scrollbar, .tracker-period-tabs::-webkit-scrollbar{ display: none; }
  .filter-chips > *, .tracker-period-tabs > *{ flex: 0 0 auto; }

  /* Universal comfortable tap targets */
  .btn, .btn-sm, .section-link, .home-ticket-nav-btn, .page-submenu-link, .lang-toggle-opt{ min-height: 40px; }
  .btn, .btn-sm{ display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- Contextual left submenu (page_submenu.py → _page_submenu.html) ---- */
.page-left-rail{ display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.page-submenu{ position: sticky; top: 5rem; }
.page-submenu-inner{
  padding: .9rem; border: 1px solid var(--border, #2a3140); border-radius: 14px;
  background: var(--card, #1a1f28);
}
.page-submenu-group + .page-submenu-group{ margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border, #2a3140); }
.page-submenu-title{
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #9aa0a8);
  margin: 0 0 .5rem; font-weight: 700;
}
.page-submenu-nav{ display: flex; flex-direction: column; gap: .12rem; }
.page-submenu-link{
  display: block; padding: .42rem .6rem; border-radius: 8px; font-size: .88rem; color: var(--text, #e8eaed);
  text-decoration: none; transition: background .12s, color .12s;
}
.page-submenu-link:hover{ background: rgba(255,255,255,.04); color: var(--accent-bright, #f0c860); }
.page-submenu-link.active{
  background: linear-gradient(103deg, rgba(245,208,106,.16), rgba(224,176,64,.08));
  color: var(--accent-bright, #f0c860); font-weight: 650;
  box-shadow: inset 2px 0 0 var(--accent, #e0b040);
}
/* Mobile/tablet: the left rail becomes ONE horizontal-scroll pill bar (swipe, no vertical wall) */
@media (max-width: 900px){
  .page-left-rail{ gap: .6rem; }
  .page-submenu{ position: static; }
  .page-submenu-inner{
    display: flex; align-items: center; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: .5rem .7rem; scrollbar-width: none;
  }
  .page-submenu-inner::-webkit-scrollbar{ display: none; }
  .page-submenu-group{
    display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; margin: 0; padding: 0; border: 0;
  }
  .page-submenu-group + .page-submenu-group{ padding-left: .5rem; border-left: 1px solid var(--border, #2a3140); }
  .page-submenu-title{ margin: 0; font-size: .58rem; flex: 0 0 auto; opacity: .7; }
  .page-submenu-nav{ flex-direction: row; gap: .35rem; flex: 0 0 auto; }
  .page-submenu-link{
    white-space: nowrap; border: 1px solid var(--border, #2a3140); border-radius: 999px; padding: .35rem .75rem;
  }
  .page-submenu-link.active{ box-shadow: none; border-color: var(--accent, #e0b040); }
}

/* Respect reduced-motion: keep the right-edge fade affordance, drop the swipe nudge animation. */
@media (prefers-reduced-motion: reduce){
  .home-ticket-nav-grid{ animation: none !important; }
  .home-games-tier-label-live::before{ animation: none !important; }
}

/* ==== Home games board — 3 tiers: upcoming chips (top) · live cards (mid) · final chips (bottom) ==== */
.home-games-tier{ margin-top: .7rem; }
.home-games-tier-upcoming{ margin-top: .25rem; }
.home-games-tier-head{ display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem; }
.home-games-tier-label{ font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted, #9aa0a8); font-weight: 700; }
.home-games-tier-label-live{ color: #ff5a5a; display: inline-flex; align-items: center; gap: .38rem; }
.home-games-tier-label-live::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5a5a; animation: liveDotPulse 1.8s ease-out infinite; }
@keyframes liveDotPulse{ 0%{ box-shadow: 0 0 0 0 rgba(255,90,90,.55); } 70%{ box-shadow: 0 0 0 6px rgba(255,90,90,0); } 100%{ box-shadow: 0 0 0 0 rgba(255,90,90,0); } }
.home-games-tier-count{ font-variant-numeric: tabular-nums; }

/* Compact chip rows (upcoming + final): horizontal scroll, non-trapping (pan-x). */
.home-games-chip-row{
  display: flex; gap: .45rem; overflow-x: auto; overflow-y: hidden; padding-bottom: .25rem;
  scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
}
.home-games-chip-row::-webkit-scrollbar{ display: none; }
.home-game-chip{
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; scroll-snap-align: start;
  padding: .38rem .6rem; border: 1px solid var(--border, #2a3140); border-radius: 999px;
  background: var(--card, #1a1f28); color: var(--text, #e8eaed); text-decoration: none;
  font-size: .8rem; white-space: nowrap; transition: border-color .15s, transform .15s;
}
.home-game-chip:hover{ border-color: var(--accent, #e0b040); transform: translateY(-1px); }
.home-game-chip-league{ font-size: .58rem; font-weight: 700; letter-spacing: .06em; color: var(--muted, #9aa0a8); }
.home-game-chip-teams{ display: inline-flex; align-items: center; gap: .3rem; }
.home-game-chip-logo{ width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
.home-game-chip-ab{ font-weight: 700; letter-spacing: -.01em; }
.home-game-chip-at{ color: var(--muted, #9aa0a8); }
.home-game-chip-time{ font-variant-numeric: tabular-nums; color: var(--accent-bright, #f0c860); font-weight: 650; }
.home-game-chip-time.is-soon{ color: #ff8a5a; }        /* switched to a live countdown (starts within 3h) */
.home-game-chip-score{ font-variant-numeric: tabular-nums; font-weight: 700; }
.home-game-chip-score.is-win{ color: var(--accent-bright, #f0c860); }
.home-game-chip-final{ opacity: .9; }
.home-game-chip-final .home-game-chip-tag{ font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #9aa0a8); }