/* Reference-fidelity home pass.
   Visual only: navigation, training logic, data and menu structure stay untouched. */

:root{
  --ref-glass:rgba(255,255,255,.075);
  --ref-edge:rgba(255,255,255,.72);
  --ref-edge-top:rgba(255,255,255,.92);
  --ref-red:#e71934;
  --ref-red-hot:#ff3148;
  --ref-red-deep:#ae071e;
}

/* Exact supplied stadium composition. The SVG only stitches three WebP slices of
   the same photograph so the original 709:1536 phone crop can stay sharp. */
html[data-ui="liquid-glass-v2"],
html[data-ui="liquid-glass-v2"] body{
  background:#070305!important;
}

html[data-ui="liquid-glass-v2"] body .app-atmosphere{
  background:
    url("./stadium-background-reference.svg") center top/cover no-repeat!important;
  background-attachment:fixed!important;
  filter:none!important;
  opacity:1!important;
}

html[data-ui="liquid-glass-v2"] body .app-atmosphere::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(180deg,rgba(3,5,12,.08) 0%,rgba(8,2,5,.02) 42%,rgba(12,0,3,.12) 68%,rgba(3,0,1,.42) 100%)!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

html[data-ui="liquid-glass-v2"] body .app-atmosphere::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(circle at 82% 8%,rgba(255,255,255,.12),transparent 20%),
    linear-gradient(180deg,transparent 0 62%,rgba(20,0,4,.08) 78%,rgba(5,0,1,.34) 100%)!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}

/* Home shell spacing follows the reference: clear breathing room between
   greeting, hero, weekly card and phase card. */
html[data-ui="liquid-glass-v2"] body #today .mockup-topbar{
  min-height:50px!important;
  height:calc(50px + env(safe-area-inset-top))!important;
  padding:calc(8px + env(safe-area-inset-top)) 16px 0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

html[data-ui="liquid-glass-v2"] body #today .top-actions{
  gap:9px!important;
}

html[data-ui="liquid-glass-v2"] body #today .streak,
html[data-ui="liquid-glass-v2"] body #today .refresh-plan{
  min-height:38px!important;
  height:38px!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-top-color:rgba(255,255,255,.86)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.055))!important;
  box-shadow:0 10px 24px rgba(8,0,3,.24),inset 0 1px 0 rgba(255,255,255,.62)!important;
  backdrop-filter:blur(18px) saturate(1.22)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.22)!important;
}

html[data-ui="liquid-glass-v2"] body #today .refresh-plan{
  width:38px!important;
  min-width:38px!important;
  padding:0!important;
}

html[data-ui="liquid-glass-v2"] body #today .mockup-home{
  width:min(100%,430px)!important;
  margin:0 auto!important;
  padding:0 16px 6px!important;
  gap:8px!important;
}

html[data-ui="liquid-glass-v2"] body #today .greeting{
  padding:9px 4px 11px!important;
  margin:0!important;
}

html[data-ui="liquid-glass-v2"] body #today .greeting h1{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(28px,7.4vw,34px)!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:-.045em!important;
  text-shadow:0 3px 20px rgba(0,0,0,.34)!important;
}

html[data-ui="liquid-glass-v2"] body #today .greeting p{
  margin:6px 0 0!important;
  color:rgba(255,255,255,.74)!important;
  font-size:14px!important;
  line-height:1.15!important;
  text-shadow:0 2px 14px rgba(0,0,0,.30)!important;
}

html[data-ui="liquid-glass-v2"] body #today .mockup-main-card{
  flex:0 0 316px!important;
  height:316px!important;
  min-height:316px!important;
  margin:0!important;
}

/* Hero glass: the stadium stays readable through a restrained blur instead of
   being rebuilt with synthetic gradients. */
html[data-ui="liquid-glass-v2"] body #today .next-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:18px 18px 126px!important;
  border-radius:31px!important;
  border:1px solid var(--ref-edge)!important;
  border-top-color:var(--ref-edge-top)!important;
  background:
    radial-gradient(circle at 9% -10%,rgba(255,255,255,.44) 0 9%,rgba(255,255,255,.14) 28%,transparent 48%),
    linear-gradient(128deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.085) 42%,rgba(255,255,255,.035) 72%,rgba(120,0,18,.055) 100%)!important;
  box-shadow:
    0 22px 48px rgba(12,0,4,.30),
    0 0 22px rgba(238,27,58,.09),
    0 0 0 .5px rgba(255,255,255,.32),
    inset 0 1.5px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(255,255,255,.15)!important;
  backdrop-filter:blur(13px) saturate(1.16)!important;
  -webkit-backdrop-filter:blur(13px) saturate(1.16)!important;
}

html[data-ui="liquid-glass-v2"] body #today .next-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    linear-gradient(112deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.09) 24%,transparent 45%),
    radial-gradient(circle at 90% 5%,rgba(255,255,255,.20),transparent 20%)!important;
  opacity:.82!important;
  mix-blend-mode:screen!important;
}

/* True alpha foreground: the player is a separate image, not part of the
   stadium background and no longer a rectangular masked photo. */
html[data-ui="liquid-glass-v2"] body #today .next-card::after{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  top:8px!important;
  right:-7px!important;
  bottom:0!important;
  width:50%!important;
  pointer-events:none!important;
  background:url("./hero-fina-11-cutout.webp") right bottom/contain no-repeat!important;
  opacity:1!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:drop-shadow(-9px 14px 16px rgba(20,0,6,.34)) drop-shadow(0 0 5px rgba(255,255,255,.18))!important;
}

html[data-ui="liquid-glass-v2"] body #today .next-card>*{
  position:relative!important;
  z-index:4!important;
}

/* Header row inside hero: remove the oversized pill from the previous pass. */
html[data-ui="liquid-glass-v2"] body #today .next-label{
  display:inline-flex!important;
  width:max-content!important;
  max-width:60%!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  align-items:center!important;
  gap:8px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:#ed2038!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.10em!important;
  text-shadow:0 1px 0 rgba(255,255,255,.58),0 0 12px rgba(231,25,52,.16)!important;
}

html[data-ui="liquid-glass-v2"] body #today .next-label::before{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
  border-radius:10px!important;
  border:1px solid rgba(255,255,255,.62)!important;
  background-color:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58),0 7px 18px rgba(45,0,8,.10)!important;
}

html[data-ui="liquid-glass-v2"] body #today .next-date-nav,
html[data-ui="liquid-glass-v2"] body #today .session-title,
html[data-ui="liquid-glass-v2"] body #today .next-meta{
  width:min(59%,236px)!important;
  max-width:59%!important;
}

html[data-ui="liquid-glass-v2"] body #today .next-date-nav{
  grid-template-columns:26px minmax(0,1fr) 26px!important;
  gap:2px!important;
  margin-top:12px!important;
}

html[data-ui="liquid-glass-v2"] body #today .next-arrow{
  width:26px!important;
  height:30px!important;
  min-width:26px!important;
  border:1px solid rgba(255,255,255,.38)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.88)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

html[data-ui="liquid-glass-v2"] body #today .next-date-button{
  min-width:0!important;
  padding:1px 2px!important;
  justify-content:flex-start!important;
  color:#fff!important;
  font-size:clamp(15px,4.1vw,18px)!important;
  font-weight:800!important;
  line-height:1.05!important;
  text-align:left!important;
  text-shadow:0 2px 14px rgba(0,0,0,.32)!important;
}

html[data-ui="liquid-glass-v2"] body #today .session-title{
  margin-top:6px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--ref-red)!important;
  font-size:clamp(22px,5.7vw,27px)!important;
  font-weight:850!important;
  line-height:1.03!important;
  letter-spacing:-.025em!important;
  text-align:left!important;
  text-shadow:0 1px 0 rgba(255,255,255,.40),0 8px 20px rgba(125,0,19,.16)!important;
}

html[data-ui="liquid-glass-v2"] body #today .next-meta{
  margin-top:10px!important;
  padding-top:9px!important;
  border-top:1px solid rgba(255,255,255,.26)!important;
  color:rgba(255,255,255,.78)!important;
  font-size:10px!important;
  line-height:1.25!important;
  gap:5px!important;
  text-shadow:0 2px 12px rgba(0,0,0,.30)!important;
}

/* Existing detail action remains the shirt button from the reference. */
html[data-ui="liquid-glass-v2"] body #today .hero-view{
  position:absolute!important;
  z-index:7!important;
  top:15px!important;
  right:15px!important;
  left:auto!important;
  bottom:auto!important;
  width:44px!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  border-radius:15px!important;
  border:1px solid rgba(255,255,255,.52)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.23),rgba(255,255,255,.065))!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(10,0,3,.22),inset 0 1px 0 rgba(255,255,255,.56)!important;
  backdrop-filter:blur(16px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.2)!important;
}

html[data-ui="liquid-glass-v2"] body #today .hero-view span,
html[data-ui="liquid-glass-v2"] body #today .hero-view small{
  display:none!important;
}

html[data-ui="liquid-glass-v2"] body #today .hero-view::before{
  content:""!important;
  display:block!important;
  width:22px!important;
  height:22px!important;
  margin:auto!important;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4 5 5.5 3 9l3 2v9h12v-9l3-2-2-3.5L16 4c-1 1.3-2.4 2-4 2S9 5.3 8 4Z'/%3E%3C/svg%3E")!important;
}

/* Primary training action: wide, low in the hero, with the same controlled red glow. */
html[data-ui="liquid-glass-v2"] body #today .hero-start,
html[data-ui="liquid-glass-v2"] body #today .hero-complete{
  position:absolute!important;
  z-index:8!important;
  left:18px!important;
  bottom:77px!important;
  width:68%!important;
  min-height:50px!important;
  height:50px!important;
  margin:0!important;
  border-radius:26px!important;
}

html[data-ui="liquid-glass-v2"] body #today .hero-start{
  padding:0 40px 0 52px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-top-color:rgba(255,255,255,.92)!important;
  background:linear-gradient(145deg,var(--ref-red-hot) 0%,var(--ref-red) 54%,var(--ref-red-deep) 100%)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:750!important;
  text-align:left!important;
  box-shadow:0 13px 30px rgba(183,4,31,.36),0 0 18px rgba(240,29,58,.18),inset 0 1px 0 rgba(255,255,255,.54),inset 0 -1px 0 rgba(70,0,12,.24)!important;
}

html[data-ui="liquid-glass-v2"] body #today .hero-start::before{
  width:32px!important;
  height:32px!important;
  left:8px!important;
  box-shadow:0 0 14px rgba(255,255,255,.24)!important;
}

html[data-ui="liquid-glass-v2"] body #today .hero-start::after{
  left:20px!important;
  border-top-width:6px!important;
  border-bottom-width:6px!important;
  border-left-width:9px!important;
}

html[data-ui="liquid-glass-v2"] body #today .hero-complete{
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.56)!important;
  background:rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}

/* The real Week link stays the same DOM button and handler. It is only docked
   into the reserved lower part of the hero to match the reference. */
html[data-ui="liquid-glass-v2"] body #today .week-overview{
  position:relative!important;
  margin:0!important;
  padding:0!important;
}

html[data-ui="liquid-glass-v2"] body #today .mockup-section-head{
  position:relative!important;
  min-height:16px!important;
  margin:1px 2px 5px!important;
  background:transparent!important;
}

html[data-ui="liquid-glass-v2"] body #today .week-overview .section-kicker{
  display:inline!important;
  color:rgba(255,255,255,.70)!important;
  font-size:7px!important;
  letter-spacing:.09em!important;
  text-shadow:0 2px 12px rgba(0,0,0,.32)!important;
}

html[data-ui="liquid-glass-v2"] body #today .mockup-section-head .text-link{
  position:absolute!important;
  z-index:10!important;
  left:0!important;
  top:-67px!important;
  width:68%!important;
  min-height:48px!important;
  height:48px!important;
  padding:0 17px!important;
  border-radius:25px!important;
  border:1px solid rgba(255,255,255,.62)!important;
  border-top-color:rgba(255,255,255,.86)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.075))!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:650!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:0 11px 25px rgba(12,0,4,.22),inset 0 1px 0 rgba(255,255,255,.58)!important;
  backdrop-filter:blur(16px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.2)!important;
}

/* Keep the lower home cards glassy but let the supplied stadium remain detailed. */
html[data-ui="liquid-glass-v2"] body #today .week-card,
html[data-ui="liquid-glass-v2"] body #today .phase-card{
  border:1px solid rgba(255,255,255,.18)!important;
  border-top-color:rgba(255,255,255,.38)!important;
  background:linear-gradient(142deg,rgba(255,255,255,.10),rgba(255,255,255,.035))!important;
  box-shadow:0 14px 32px rgba(9,0,3,.24),inset 0 1px 0 rgba(255,255,255,.22)!important;
  backdrop-filter:blur(18px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
}

html[data-ui="liquid-glass-v2"] body #today .week-card{
  border-radius:22px!important;
}

html[data-ui="liquid-glass-v2"] body #today .phase-card{
  border-radius:20px!important;
  margin-top:1px!important;
}

@media(max-width:430px){
  html[data-ui="liquid-glass-v2"] body #today .mockup-home{
    padding-left:13px!important;
    padding-right:13px!important;
    gap:7px!important;
  }
  html[data-ui="liquid-glass-v2"] body #today .mockup-main-card{
    flex-basis:310px!important;
    height:310px!important;
    min-height:310px!important;
  }
  html[data-ui="liquid-glass-v2"] body #today .next-card{
    padding:17px 16px 124px!important;
  }
  html[data-ui="liquid-glass-v2"] body #today .next-card::after{
    width:51%!important;
    right:-9px!important;
  }
  html[data-ui="liquid-glass-v2"] body #today .hero-start,
  html[data-ui="liquid-glass-v2"] body #today .hero-complete,
  html[data-ui="liquid-glass-v2"] body #today .mockup-section-head .text-link{
    left:16px!important;
    width:68%!important;
  }
  html[data-ui="liquid-glass-v2"] body #today .mockup-section-head .text-link{
    left:0!important;
  }
}

@media(max-height:780px){
  html[data-ui="liquid-glass-v2"] body #today .mockup-home{gap:5px!important}
  html[data-ui="liquid-glass-v2"] body #today .greeting{padding:5px 3px 7px!important}
  html[data-ui="liquid-glass-v2"] body #today .greeting h1{font-size:25px!important}
  html[data-ui="liquid-glass-v2"] body #today .greeting p{font-size:12px!important;margin-top:4px!important}
  html[data-ui="liquid-glass-v2"] body #today .mockup-main-card{flex-basis:292px!important;height:292px!important;min-height:292px!important}
  html[data-ui="liquid-glass-v2"] body #today .next-card{padding-top:14px!important;padding-bottom:119px!important}
  html[data-ui="liquid-glass-v2"] body #today .next-date-nav{margin-top:9px!important}
  html[data-ui="liquid-glass-v2"] body #today .session-title{font-size:21px!important}
  html[data-ui="liquid-glass-v2"] body #today .next-meta{margin-top:7px!important;padding-top:7px!important;font-size:9px!important}
  html[data-ui="liquid-glass-v2"] body #today .hero-start,
  html[data-ui="liquid-glass-v2"] body #today .hero-complete{height:46px!important;min-height:46px!important;bottom:72px!important}
  html[data-ui="liquid-glass-v2"] body #today .mockup-section-head .text-link{height:44px!important;min-height:44px!important;top:-61px!important}
}

@media(max-height:700px){
  html[data-ui="liquid-glass-v2"] body #today .mockup-main-card{flex-basis:268px!important;height:268px!important;min-height:268px!important}
  html[data-ui="liquid-glass-v2"] body #today .next-label{font-size:8px!important}
  html[data-ui="liquid-glass-v2"] body #today .next-label::before{width:24px!important;height:24px!important;flex-basis:24px!important}
  html[data-ui="liquid-glass-v2"] body #today .next-date-nav{margin-top:6px!important}
  html[data-ui="liquid-glass-v2"] body #today .session-title{font-size:19px!important;margin-top:4px!important}
  html[data-ui="liquid-glass-v2"] body #today .next-meta{margin-top:5px!important;padding-top:5px!important;font-size:8px!important}
  html[data-ui="liquid-glass-v2"] body #today .hero-start,
  html[data-ui="liquid-glass-v2"] body #today .hero-complete{height:43px!important;min-height:43px!important;bottom:67px!important}
  html[data-ui="liquid-glass-v2"] body #today .mockup-section-head .text-link{height:41px!important;min-height:41px!important;top:-56px!important}
}