/* Homepage startup stability: no transient black/broken states; US politics before ICE. */
#sections-grid > #politics{order:-20}
#sections-grid > #ice{order:-19}

#hero,#top-list,#rank-list{position:relative}

/* Hide only the transient children, not the containers, so stable skeletons remain visible. */
html:not([data-home-final-ui="true"]) #hero > *,
html:not([data-home-final-ui="true"]) #top-list > *,
html:not([data-home-final-ui="true"]) #rank-list > *{
  opacity:0!important;
  visibility:hidden!important;
}

html:not([data-home-final-ui="true"]) #hero,
html:not([data-home-final-ui="true"]) #top-list,
html:not([data-home-final-ui="true"]) #rank-list{
  overflow:hidden;
  background:#f3f4f6!important;
}

html:not([data-home-final-ui="true"]) #hero::after,
html:not([data-home-final-ui="true"]) #top-list::after,
html:not([data-home-final-ui="true"]) #rank-list::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  display:block;
  border-radius:8px;
  background:linear-gradient(100deg,#f3f4f6 20%,#e8ebef 38%,#f3f4f6 56%);
  background-size:220% 100%;
  animation:trrbHomeSkeleton 1.15s linear infinite;
  pointer-events:none;
}

/* Final content fades in instead of appearing in one hard flash. */
html[data-home-final-ui="true"] #hero,
html[data-home-final-ui="true"] #top-list,
html[data-home-final-ui="true"] #rank-list{
  animation:trrbHomeReveal .16s ease-out both;
}

@keyframes trrbHomeSkeleton{
  from{background-position:120% 0}
  to{background-position:-120% 0}
}
@keyframes trrbHomeReveal{
  from{opacity:.72}
  to{opacity:1}
}

/* A true empty state remains readable, but secondary focus logic must not overwrite live news with it. */
#hero .hero-focus-empty{
  min-height:inherit;
  height:100%;
  box-sizing:border-box;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px;
  text-align:center;
  background:#f3f4f6!important;
  color:#111827!important;
}
#hero .hero-focus-empty h1{color:#111827!important}
#hero .hero-focus-empty p{color:#667085!important}
#hero .hero-focus-empty .tag{background:#d60000!important;color:#fff!important}

#rank-list .rank-empty{
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:260px;
  padding:20px!important;
  box-sizing:border-box;
  writing-mode:horizontal-tb!important;
  white-space:normal!important;
  text-align:center;
  line-height:1.5;
  color:#7b8492;
}

@media(max-width:767px){
  #rank-list{min-height:260px!important}
  #rank-list .rank-empty{min-height:260px}
  /* top-list is not a mobile surface; never let its loading state reserve a visible block. */
  #top-list{display:none!important;min-height:0!important}
}

@media(prefers-reduced-motion:reduce){
  html:not([data-home-final-ui="true"]) #hero::after,
  html:not([data-home-final-ui="true"]) #top-list::after,
  html:not([data-home-final-ui="true"]) #rank-list::after,
  html[data-home-final-ui="true"] #hero,
  html[data-home-final-ui="true"] #top-list,
  html[data-home-final-ui="true"] #rank-list{animation:none}
}

/* Atomic mobile reveal: keep the 24-hour ranking in its final three-column geometry. */
#rank-list,
#rank-list > li{
  width:100%;
  min-width:0;
}
#rank-list > li{
  grid-template-columns:34px minmax(0,1fr) auto!important;
  align-items:start;
}
#rank-list > li > a{
  display:block;
  width:100%;
  min-width:0;
  writing-mode:horizontal-tb!important;
  word-break:normal;
  overflow-wrap:anywhere;
}
#rank-list > li > .rank-heat{
  white-space:nowrap;
}
@media(max-width:767px){
  #hero{height:240px!important;min-height:240px!important}
  #hero .hero-slide,#hero .hero-slide img{height:240px!important;min-height:240px!important}
  #rank-list > li{grid-template-columns:30px minmax(0,1fr) auto!important}
}


/* Robust mobile ranking: flex keeps a title full-width even during partial hydration. */
#rank-list > li{
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  align-items:center!important;
  gap:8px!important;
}
#rank-list > li > b{
  flex:0 0 30px!important;
  width:30px!important;
}
#rank-list > li > a{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
}
#rank-list > li > .rank-heat{
  flex:0 0 auto!important;
}