/* CCR Main S56G — ticker continuity and intentional changed-cache refresh. */
body[data-page="home"] .ticker-shell{
  isolation:isolate;
  min-height:42px;
}

body[data-page="home"] .ticker-rail{
  contain:layout paint style;
}

body[data-page="home"] .ticker-track{
  backface-visibility:hidden;
  transform:translate3d(0,0,0);
  will-change:transform,opacity;
  transition:opacity 180ms ease;
}

body[data-page="home"] .ticker-item__value,
body[data-page="home"] .ticker-item__delta,
body[data-page="home"] [data-updated-stamp]{
  font-variant-numeric:tabular-nums;
}

body[data-page="home"] .ticker-item__value{
  min-inline-size:6.75ch;
  text-align:right;
}

body[data-page="home"] .ticker-item__arrow{
  min-inline-size:1ch;
  justify-content:center;
}

body[data-page="home"] .ticker-item__delta{
  min-inline-size:5.5ch;
}

body[data-page="home"] .ticker-item__arrow.is-empty,
body[data-page="home"] .ticker-item__delta.is-empty{
  visibility:hidden;
}

body[data-page="home"] .ticker-shell::after{
  content:attr(data-ticker-refresh-label);
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  pointer-events:none;
  color:rgba(224,232,240,.68);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:0;
  transform:translate3d(0,2px,0);
  transition:opacity 180ms ease,transform 180ms ease;
}

body[data-page="home"] .ticker-shell.is-cache-refreshing .ticker-track{
  opacity:0;
}

body[data-page="home"] .ticker-shell.is-cache-refreshing::after{
  opacity:1;
  transform:translate3d(0,0,0);
}

body[data-page="home"] .ticker-shell.is-cache-refresh-paused .ticker-track{
  animation-play-state:paused !important;
}

body[data-page="home"] .ticker-shell.is-cache-refresh-resuming .ticker-track{
  animation-play-state:running !important;
}

@keyframes ticker-crawl{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--ticker-cycle-width, 50%)),0,0)}
}

@media (max-width:760px){
  /* Mobile ticker geometry: the protected shell is 38px including its two
     1px borders. Fill its 36px inner box directly so the ticker line is
     genuinely centred instead of leaving the legacy 22px rail at the top. */
  body[data-page="home"] .ticker-shell{
    min-height:38px;
    --ccr-mobile-ticker-balance-build:r3;
  }

  body[data-page="home"] .ticker-rail{
    min-height:36px !important;
    padding:0 5px !important;
  }

  /* When the ticker is visible, reproduce the existing mobile sticky glass
     on a non-interactive layer. Its lower portion softens progressively; the
     final 8px completes the fade to full transparency. Foreground text and
     controls are never masked. Browsers without mask/:has support keep the
     existing unmodified glass as a safe fallback. */
  @supports (mask-image:linear-gradient(#000,transparent)) or (-webkit-mask-image:linear-gradient(#000,transparent)){
    body[data-page="home"] .home-top-stack:has(> .ticker-shell:not([hidden])),
    body[data-page="home"].ccr-ribbon-active .home-top-stack:has(> .ticker-shell:not([hidden])){
      background:transparent !important;
      -webkit-backdrop-filter:none !important;
      backdrop-filter:none !important;
    }

    body[data-page="home"] .home-top-stack:has(> .ticker-shell:not([hidden]))::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      pointer-events:none;
      background:linear-gradient(180deg,rgba(20,31,41,.13),rgba(20,31,41,.035));
      -webkit-backdrop-filter:blur(8px) saturate(1.04);
      backdrop-filter:blur(8px) saturate(1.04);
      -webkit-mask-image:linear-gradient(to bottom,
        #000 0,
        #000 calc(100% - 18px),
        rgba(0,0,0,.92) calc(100% - 16px),
        rgba(0,0,0,.78) calc(100% - 12px),
        rgba(0,0,0,.55) calc(100% - 8px),
        rgba(0,0,0,.28) calc(100% - 4px),
        transparent 100%);
      mask-image:linear-gradient(to bottom,
        #000 0,
        #000 calc(100% - 18px),
        rgba(0,0,0,.92) calc(100% - 16px),
        rgba(0,0,0,.78) calc(100% - 12px),
        rgba(0,0,0,.55) calc(100% - 8px),
        rgba(0,0,0,.28) calc(100% - 4px),
        transparent 100%);
      -webkit-mask-repeat:no-repeat;
      mask-repeat:no-repeat;
    }
  }

  body[data-page="home"] .ticker-shell::after{
    padding:0 12px;
    font-size:10.5px;
  }

  body[data-page="home"] .ticker-shell.is-cache-refreshing::after{
    display:flex !important;
    content:attr(data-ticker-refresh-label) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body[data-page="home"] .ticker-track,
  body[data-page="home"] .ticker-shell::after{
    transition:none !important;
  }
}

/* CCR Main — desktop ticker rhythm and baseline cleanup, 2026-10-04. */
@media (min-width:761px){
  body[data-page="home"] .ticker-shell{
    background:linear-gradient(180deg,
      rgba(255,255,255,.007) 0%,
      rgba(255,255,255,.004) 62%,
      rgba(255,255,255,.002) 80%,
      rgba(255,255,255,0) 100%) !important;
    border-top-color:rgba(255,255,255,.026) !important;
    border-bottom-color:rgba(255,255,255,.016) !important;
  }

  body[data-page="home"] .ticker-item,
  body[data-page="home"] .ticker-headline{
    align-items:baseline;
    gap:8px;
    padding-inline:15px;
    line-height:1;
  }

  body[data-page="home"] .ticker-item__label,
  body[data-page="home"] .ticker-item__value,
  body[data-page="home"] .ticker-item__arrow,
  body[data-page="home"] .ticker-item__delta,
  body[data-page="home"] .ticker-headline__text{
    line-height:1;
  }

  body[data-page="home"] .ticker-item__arrow{
    min-inline-size:.9ch;
    font-size:12px;
  }

  body[data-page="home"] .ticker-item__delta{
    font-size:12px;
  }

  body[data-page="home"] .ticker-sep{
    flex:0 0 1px;
    align-self:center;
    height:10px;
    margin-inline:3px;
    opacity:.42;
  }
}