/* sports/assets/refresh.css -- the "refreshed" look for the v3 pages.

   EASY REVERT (per Tony, 2026-09-24: "keep the original but go with your
   plan so we can easily revert back"): every rule below is scoped under
   html.look-refresh. Remove that class and the pages are pixel-for-pixel
   the original design. Three ways to switch:
     - the "Look: Refreshed / Original" switch in the homepage footer or
       the Sports menu
     - ?design=original or ?design=refresh on any v3 URL (remembered)
     - delete this file and its <link> tags to drop the refresh entirely
   The head snippet on each page sets the class before first paint, so
   there's no flash of the other look.

   What it changes (from the design review):
     1. MLB gets its own color (indigo) -- clay orange was
        indistinguishable from NBA's tangerine side by side.
     2. One "coming soon" notice instead of a badge on every card.
     3. Phones: a menu button instead of a sideways-scrolling tab row.
     4. Phones: sport panels become a swipeable row; shorter homepage.
     5. News photos get a light tint of the sport's color so ESPN images
        with different lighting still look like one site.
     6. Hero: a real screenshot of the NFL dashboard instead of the
        made-up sample table.
     7. Hero: the BinkEngine logo artwork.
*/

/* ---------- 1. MLB accent: indigo ---------- */
.look-refresh .sport-theme-mlb{ --sport-accent:#818CF8; --sport-glow:rgba(129,140,248,0.24); --sport-wash:rgba(129,140,248,0.09); }
:root.look-refresh[data-theme="light"] .sport-theme-mlb{ --sport-accent:#4338CA; --sport-glow:rgba(67,56,202,0.16); --sport-wash:rgba(67,56,202,0.07); }

/* ---------- 2. one coming-soon notice ---------- */
.soon-banner, .dd-note, .look-switch-refresh-only{ display:none; }
.look-refresh .status-badge.is-soon{ display:none !important; }
.look-refresh .dd-note{ display:block; font-size:11px; color:var(--text-faint); padding:2px 10px 8px; }
.look-refresh .soon-banner{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:22px 0 0; padding:12px 16px;
  border-radius:var(--radius-md); background:var(--panel); border:1px solid var(--line); font-size:13.5px; color:var(--text-dim); }
.look-refresh .soon-banner strong{ color:var(--text); }
.look-refresh .soon-banner .dots{ display:flex; gap:6px; }

/* ---------- 3. phone menu ---------- */
.nav-burger{ display:none; }
@media (max-width:720px){
  .look-refresh .topnav{ flex-wrap:nowrap; gap:8px; }
  .look-refresh .nav-burger{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0;
    background:var(--panel-raised); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--text); cursor:pointer; order:10; }
  .look-refresh .nav-burger svg{ width:18px; height:18px; }
  .look-refresh .nav-tabs{ display:none; }
  .look-refresh .topnav.nav-open .nav-tabs{ display:flex; flex-direction:column; align-items:stretch; position:absolute; left:0; right:0;
    top:100%; background:var(--panel); border-bottom:1px solid var(--line); box-shadow:var(--shadow-pop); padding:8px 12px 12px;
    margin:0; overflow:visible; }
  .look-refresh .topnav.nav-open .nav-link{ padding:12px 10px; font-size:15px; border-bottom:1px solid var(--line-soft); }
  .look-refresh .topnav.nav-open .nav-link.active{ border-bottom-color:var(--line-soft); border-left:3px solid var(--sport-accent); }
  .look-refresh .brand span{ display:none; }           /* logo mark only -- the full name is in the hero */
  .look-refresh .acct-name, .look-refresh .acct a.acct-btn, .look-refresh .acct #signupBtn{ display:none; }   /* phone: Sign up lives in the Log in form */
  .look-refresh .nav-right{ gap:6px; }
  .look-refresh .sports-btn{ padding:6px 10px; }
  /* The right side was ~480px of buttons on a 375px phone, so every page scrolled sideways (10/15).
     Engine pill -> its status dot, "Sports NFL" -> "NFL", Account -> a person icon, and the tier
     badge moves into the account menu's heading. ~220px on Lineups. Wraps to a 2nd row before it
     could ever scroll again. The two menus open full width under the nav, like the account menu. */
  .look-refresh .nav-right{ flex-wrap:wrap; justify-content:flex-end; row-gap:6px; }
  .look-refresh #engineStatusLabel, .look-refresh .sports-btn .sb-word, .look-refresh .acct > .badge,
  .look-refresh .acct-word{ display:none; }
  .look-refresh #engineStatusBar{ width:30px; height:30px; padding:0; justify-content:center;
    background:var(--panel-raised); border-color:var(--line); }
  .look-refresh #acctBtn{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border-radius:50%; }
  .look-refresh .acct-ico{ display:block; width:16px; height:16px; }
  .look-refresh .pop-badge{ display:inline; margin-left:4px; vertical-align:2px; }
  .look-refresh #engineStatusPopover, .look-refresh .sports-dd{ position:fixed; left:12px; right:12px; top:64px; width:auto; min-width:0;
    max-height:calc(100vh - 80px); overflow:auto; }
}

/* ---------- 4. phone homepage: swipeable sport panels ---------- */
.swipe-hint{ display:none; }
@media (max-width:720px){
  .look-refresh .panels{ flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:6px;
    margin:0 -16px; padding-left:16px; padding-right:16px; scrollbar-width:none; }
  .look-refresh .panels::-webkit-scrollbar{ display:none; }
  .look-refresh .panel{ flex:0 0 86%; scroll-snap-align:center; }
  .look-refresh .panel:hover{ transform:none; }
  .look-refresh .p-news{ min-height:170px; }
  .look-refresh .p-news .pn-more{ display:none; }
  .look-refresh .p-news .pn-hl{ font-size:16px; margin-bottom:0; }
  .look-refresh .p-feat{ padding:18px; gap:10px; }
  .look-refresh .p-feat li:nth-child(n+4){ display:none; }
  .look-refresh .swipe-hint{ display:block; font-size:12px; color:var(--text-faint); margin-top:10px; text-align:center; }
  .look-refresh .feat-side .article-row:nth-child(n+4){ display:none; }
  .look-refresh .steps{ grid-template-columns:1fr 1fr; gap:10px; }
  .look-refresh .step{ padding:14px; }
  .look-refresh .step p{ display:none; }
}

/* ---------- 5. tint news photos in the sport's color ---------- */
.look-refresh .p-news:not(.noimg)::after, .look-refresh .feat-main:not(.noimg)::after{
  content:''; position:absolute; inset:0; background:var(--sport-accent); mix-blend-mode:color; opacity:.28; pointer-events:none; }
.look-refresh .p-news .pn-body, .look-refresh .feat-main .fm-body{ z-index:1; }

/* ---------- 6 + 7. hero: real product shot and logo ---------- */
.hero-shot, .hero-logo{ display:none; }
.look-refresh .hero-card{ display:none; }
.look-refresh .hero-shot{ display:block; margin:0; }
.look-refresh .hero-shot img{ display:block; width:100%; border-radius:var(--radius-lg); border:1px solid var(--line);
  box-shadow:var(--shadow-pop), 0 0 40px rgba(217,167,46,.10); }
.look-refresh .hero-shot figcaption{ font-size:12px; color:var(--text-faint); margin-top:8px; }
.look-refresh .hero-logo{ display:block; height:46px; width:auto; margin-bottom:18px; }
.look-refresh .hero-logo.for-light{ display:none; }
:root.look-refresh[data-theme="light"] .hero-logo.for-dark{ display:none; }
:root.look-refresh[data-theme="light"] .hero-logo.for-light{ display:block; }
@media (max-width:720px){ .look-refresh .hero-logo{ height:34px; } }

/* ---------- the look switch itself ---------- */
.look-switch{ margin-top:10px; font-size:12px; color:var(--text-faint); }
.look-switch a{ color:var(--text-dim); margin:0 4px; cursor:pointer; }
.look-switch a.on{ color:var(--gold-bright); font-weight:600; text-decoration:none; }
.look-refresh .hero{ grid-template-columns:1fr 1.15fr; }
@media (max-width:980px){ .look-refresh .hero{ grid-template-columns:1fr; } }