/* Existing mobile behavior, copied from the previous homepage.
   Kept outside generated files so refreshing supplied designs preserves it. */
  /* Mobile hero: keep the content clear of a compact, flowing wearable rail. */
  .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-marquee,
  .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-marquee-track{display:contents;}
  .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-logos--duplicate{display:none;}
  @media (max-width:860px){
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] header.hero{
      display:flex !important;
      flex-direction:column;
      align-items:stretch;
      min-height:100vh !important;
      min-height:100svh !important;
      height:auto;
      padding:calc(100px + env(safe-area-inset-top, 0px)) 0 0 !important;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] header.hero .hero-grid{
      display:flex;
      flex:1 0 auto;
      align-items:center;
      width:100%;
      max-width:none;
      box-sizing:border-box;
      padding:0 20px 40px !important;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] header.hero .hero-grid > div{width:100%;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] header.hero .wearables{
      position:relative !important;
      inset:auto !important;
      z-index:2;
      flex:0 0 auto;
      width:100%;
      box-sizing:border-box;
      padding:18px 0 !important;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] header.hero .wearables .wrap{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      flex-wrap:nowrap;
      gap:12px;
      width:100%;
      box-sizing:border-box;
      padding:0 20px;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] header.hero .wearables .eyebrow{font-size:9px; line-height:1.2;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-marquee{display:block; width:100%; min-width:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-marquee::-webkit-scrollbar{display:none;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-marquee-track{
      display:flex;
      width:max-content;
      animation:yb-wearable-marquee 30s linear infinite;
      will-change:transform;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-marquee:hover .wearable-marquee-track,
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-marquee:focus-within .wearable-marquee-track{animation-play-state:paused;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-logos{
      display:flex;
      flex:0 0 auto;
      flex-wrap:nowrap;
      align-items:center;
      gap:24px;
      padding-right:24px;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-logos .brand-logo{flex:0 0 auto; align-items:center;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-logos .brand-logo svg{height:16px; width:auto;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-logos .brand-logo.is-garmin svg{height:20px;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-logos .brand-logo.is-smaller svg{height:14px;}
  }
  @keyframes yb-wearable-marquee{to{transform:translateX(-50%);}}
  @media (max-width:860px) and (prefers-reduced-motion:reduce){
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-marquee{overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-marquee::-webkit-scrollbar{display:none;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-marquee-track{width:max-content; animation:none; will-change:auto;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-logos--duplicate{display:none;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] .wearable-logos{padding-right:0;}
  }


  /* Mobile chat story: phone and centered copy stay together while slides change. */
  @media (max-width:860px){
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat{
      --chat-nav-height:62px;
      --chat-stage-height:calc(100vh - var(--chat-nav-height));
      --chat-phone-height:min(80vw, 340px);
      --chat-top-inset:0px;
    }
    @supports (height:1svh){
      .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat{
        --chat-stage-height:calc(100svh - var(--chat-nav-height));
      }
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .wrap{
      position:relative;
      display:grid !important;
      grid-template-columns:minmax(0,1fr) !important;
      grid-template-rows:1fr;
      align-items:start !important;
      gap:0 !important;
      min-height:calc(var(--chat-stage-height) * 4);
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-steps,
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-shot{
      grid-area:1 / 1;
      align-self:start;
      position:sticky;
      top:var(--chat-nav-height);
      height:var(--chat-stage-height);
      min-height:0;
      min-width:0;
      box-sizing:border-box;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-steps{
      z-index:3;
      overflow:hidden;
      padding:0;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-step{
      position:absolute;
      top:calc(var(--chat-top-inset) + var(--chat-phone-height) + 20px);
      right:0;
      left:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      width:100%;
      height:var(--chat-copy-height, auto);
      min-height:0 !important;
      box-sizing:border-box;
      padding:0 !important;
      text-align:center;
      opacity:0;
      transform:translateX(100%);
      transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
      pointer-events:none;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-step > *{flex-shrink:0;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-step.is-before{transform:translateX(-100%);}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-step.is-active{
      opacity:1;
      transform:translateX(0);
      pointer-events:auto;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-steps:not([data-chat-slides-ready]) .chat-step:first-child{
      height:auto;
      opacity:1;
      transform:none;
      pointer-events:auto;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-steps:not([data-chat-slides-ready]) .chat-step:not(:first-child){display:none;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-step > p{
      position:relative;
      width:fit-content;
      max-width:min(44ch, 100%);
      margin:0 !important;
      padding:0;
      background:#FFFFFF;
      color:var(--ink-soft);
      font-size:15px !important;
      line-height:1.35 !important;
      text-align:center;
      text-wrap:pretty;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-step > p + p{
      margin-top:10px !important;
      color:var(--black);
      font-weight:700;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-step > a{
      align-self:center !important;
      margin-top:12px !important;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-shot{
      z-index:2;
      display:flex;
      justify-content:center;
      align-items:flex-start;
      padding-top:var(--chat-top-inset);
      margin:0;
      pointer-events:none;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .phone-mock{
      width:auto;
      height:var(--chat-phone-height);
      max-width:100%;
      aspect-ratio:628 / 974;
      margin:0 auto;
      flex:0 0 auto;
    }
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .phone-mock > img{
      display:block;
      width:100%;
      height:100%;
      object-fit:contain;
    }
  }
  @media (max-width:860px){
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .phone-label{
      left:50%;
      right:auto;
      transform:translateX(-50%);
    }
  }
  @media (max-width:360px){
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-step > p{font-size:14px !important;}
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-step > a{
      margin-top:8px !important;
      padding:7px 12px;
      font-size:12px;
    }
  }
  @media (max-width:860px) and (prefers-reduced-motion:reduce){
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .chat-step,
    .yb-supplied-page[data-supplied-design="youb-v2-maap"] #block-chat .phone-strip{transition:none;}
  }


/* Previously approved shared navigation hover. */
.yb-supplied-page nav.reference-nav .nav-links a:hover{background:#1c1a16 !important; color:#FFFFFF !important; opacity:1 !important;}

/* Race course map: the mounted slot is an auto-height div, so the map's h-full resolved to 0px.
   Fill the positioned, aspect-ratio'd .rd-map like the reference page did. */
.yb-supplied-page .rd-map > [data-supplied-slot="course-map"]{position:absolute; inset:0;}

/* The unlayered `all:revert` shell reset beats Tailwind's layered w-full/h-full/relative, leaving the map root
   and .course-track-map 0px tall; restate their sizing (as reference/race.css did), hide the loading overlay
   and size the SVG fallback. */
.yb-supplied-page .rd-map [data-supplied-slot="course-map"] > *,
.yb-supplied-page .rd-map .course-track-map{position:relative; width:100%; height:100%; overflow:hidden;}
.yb-supplied-page .rd-map .course-track-map > .absolute{display:none;}
.yb-supplied-page .rd-map .course-track-fallback{position:absolute; inset:0; width:100%; height:100%;}
.yb-supplied-page .rd-map .course-track-fallback svg{width:100%; height:100%; display:block;}

/* GPX band badge (race pages + race calendar): the supplied `.sp-card--badge` thins the
   glass to 0.28 and forces white text, unreadable over the photo's pale sky on mobile.
   Restore the base `.sp-card` glass (as `.rc-glass` / the blog band card) with ink text.
   The white route trace behind the card stays as designed. */
.yb-supplied-page .sp-band .sp-card.sp-card--badge{background:rgba(253,251,247,0.72); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2); border:1px solid rgba(255,255,255,0.6); color:#1c1a16;}
.yb-supplied-page .sp-band .sp-card--badge span,
.yb-supplied-page .sp-band .sp-card--badge strong,
.yb-supplied-page .sp-band .sp-card--badge p,
.yb-supplied-page .sp-band .sp-card--badge .gpx-logos,
.yb-supplied-page .sp-band .sp-card--badge .gpx-logo--text{color:#1c1a16;}
.yb-supplied-page .sp-band .sp-card--badge .gpx-import{border-top-color:rgba(28,26,22,0.15);}
/* Race-page fallback link carries an inline white `style` from the supplied design. */
.yb-supplied-page .sp-band .sp-card--badge .btn{color:#1c1a16 !important; border-color:#1c1a16 !important;}
.yb-supplied-page .sp-band .sp-card--badge .btn:hover{background:rgba(28,26,22,0.06);}


/* Race elevation profile (ported from reference/race.css, never carried into the supplied
   stylesheets): vertical drags scroll the page, horizontal drags scrub the chart; touch has
   no hover, so the "hover over the chart" hint goes; climb bands and ticks need their fill
   or SVG paints them default black. */
.yb-supplied-page .rd-chart{touch-action:pan-y;}
@media (hover:none){ .yb-supplied-page .rd-prof-head .sp-label + .sp-label{display:none;} }
.yb-supplied-page .rd-chart-climb{fill:rgba(28,26,22,.06);}
.yb-supplied-page .rd-chart-climb-tick{fill:#1c1a16;}

/* Race calendar (#36): a day shows at most 3 squares plus a mono "+N"; the cell clips so a
   busy weekend can never outgrow its square (an aspect-ratio box only stops growing with its
   content once its overflow is not visible). */
.yb-supplied-page[data-supplied-design="youb-kalender"] .rcal-day{overflow:hidden;}
.yb-supplied-page[data-supplied-design="youb-kalender"] .rcal-dots{align-items:center; row-gap:2px;}
.yb-supplied-page[data-supplied-design="youb-kalender"] .rcal-more{font-family:var(--font-mono); font-size:9.5px; line-height:1; letter-spacing:.06em; color:#5B564C; white-space:nowrap;}
.yb-supplied-page[data-supplied-design="youb-kalender"] .rcal-day.past .rcal-more{opacity:.45;}
@media (max-width:860px){
  .yb-supplied-page[data-supplied-design="youb-kalender"] .rcal-dots{column-gap:3px;}
  .yb-supplied-page[data-supplied-design="youb-kalender"] .rcal-more{font-size:9px;}
}


/* Race map hero: the Vue map mounts inside the design's #races-map box, which the design's
   mobile script positions; the inner map just fills it. */
.yb-supplied-page[data-supplied-design="youb-kalender"] #races-map > [data-supplied-slot="map"],
.yb-supplied-page[data-supplied-design="youb-kalender"] #races-map .races-map{position:absolute; inset:0; height:100%;}

/* Supplied design pages bring their own mobile menu (youb-mobile-nav.js); the shared
   navbar's hamburger and overlay stay hidden there. */
.yb-supplied-page .reference-menu-toggle,
.yb-supplied-page .reference-mobile-menu{display:none !important;}