/* Neural Critic article recovery layer — single final geometry owner.
   Loaded last so legacy visual skins can keep their colors while one file owns
   desktop/tablet/mobile article geometry after Reader Thread retirement. */

body:has(#article.work-article-page){overflow-x:clip}

/* Keep the opening compact and readable before the long-form reading grid. */
#article.work-article-page.nc-type-system>h1,
#article.work-article-page.nc-type-system>.work-gradient-title{
  width:min(960px,100%)!important;
  margin:0 auto 18px!important;
  font-size:clamp(36px,4.2vw,60px)!important;
  font-weight:650!important;
  line-height:1.05!important;
  letter-spacing:-.045em!important;
  text-align:left!important;
  text-wrap:balance;
}
#article.work-article-page.nc-type-system>.article-deck{
  width:min(960px,100%)!important;
  font-size:18px!important;
  line-height:1.55!important;
  text-align:left!important;
  text-wrap:pretty;
}
#article.work-article-page>.work-breadcrumb{
  width:min(960px,100%)!important;
  margin:0 auto 22px!important;
  text-align:left!important;
}
#article.work-article-page>.article-kicker{
  width:min(960px,100%)!important;
  box-sizing:border-box;
  margin:0 auto 16px!important;
  padding:0!important;
  text-align:left!important;
  background:none!important;
  border:0!important;
}
#article.work-article-page>.work-author-row{margin:22px auto 26px!important}
#article.work-article-page>.work-hero-figure{border-radius:16px!important}
#article.work-article-page>.work-hero-figure>.article-hero{
  aspect-ratio:2.1!important;
  max-height:440px!important;
  min-height:0!important;
  object-fit:cover!important;
}
#article.work-article-page[data-article-format="game-guide"]>.work-hero-figure>.article-hero{max-height:360px!important}
#article.work-article-page .quick-read.work-quick-read ul{margin:12px 0 0;padding-left:1.2em}
#article.work-article-page .quick-read.work-quick-read li{margin:8px 0;line-height:1.55}
html[data-theme="light"] #article.work-article-page .article-kicker,
html[data-theme="light"] #article.work-article-page .quick-read>span,
html[data-theme="light"] #article.work-article-page .article-conclusion>span{color:#08758a!important}

@media(max-width:620px){
  #article.work-article-page.nc-type-system>h1,
  #article.work-article-page.nc-type-system>.work-gradient-title{font-size:clamp(32px,8.5vw,42px)!important}
  #article.work-article-page.nc-type-system>.article-deck{font-size:16px!important}
  #article.work-article-page>.work-hero-figure>.article-hero{aspect-ratio:16/9!important}
}

#article.work-article-page>.work-reading-grid{
  box-sizing:border-box!important;
  display:grid!important;
  width:min(1180px,100%)!important;
  max-width:100%!important;
  grid-template-columns:112px minmax(0,728px) minmax(0,288px)!important;
  column-gap:26px!important;
  row-gap:0!important;
  align-items:start!important;
  overflow:visible!important;
  margin-inline:auto!important;
}

#article.work-article-page .work-reading-grid>.article-body,
#article.work-article-page .work-article-sidebar,
#article.work-article-page .work-react-rail{
  min-width:0!important;
  max-width:100%!important;
}

#article.work-article-page .work-reading-grid>.article-body{
  box-sizing:border-box!important;
  width:100%!important;
  overflow:visible!important;
  overflow-wrap:anywhere;
}

#article.work-article-page .article-body img,
#article.work-article-page .article-body video,
#article.work-article-page .article-body iframe,
#article.work-article-page .article-video-shell,
#article.work-article-page .work-inline-figure{
  max-width:100%!important;
}

#article.work-article-page .work-article-sidebar{
  box-sizing:border-box!important;
  width:100%!important;
  overflow:visible!important;
  overflow-wrap:anywhere;
}

#article.work-article-page .work-article-sidebar .work-side-card{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
}

#article.work-article-page .work-toc nav a{
  min-width:0!important;
  overflow-wrap:anywhere;
}

/* One Reading Map moves ahead of the story on narrow screens. Native details
   provides touch/keyboard disclosure; the existing controller owns its links. */
#article.work-article-page .work-mobile-reading-map{
  box-sizing:border-box;
  width:100%;
  margin:0 0 24px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
}
#article.work-article-page .work-mobile-reading-map>summary{
  min-height:48px;
  padding:14px 16px;
  box-sizing:border-box;
  color:inherit;
  font:750 13px/20px Inter,system-ui,sans-serif;
  cursor:pointer;
}
#article.work-article-page .work-mobile-reading-map>summary:focus-visible{
  outline:2px solid #21b7cc;
  outline-offset:3px;
  border-radius:12px;
}
#article.work-article-page .work-mobile-reading-map .work-toc{
  position:static!important;
  min-height:0!important;
  margin:0!important;
  padding:0 16px 12px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#article.work-article-page .work-mobile-reading-map .work-toc>span{display:none!important}
#article.work-article-page .work-mobile-reading-map .work-toc::before{display:none!important}
#article.work-article-page .work-mobile-reading-map .work-toc nav a{
  display:flex;
  align-items:center;
  min-height:44px!important;
}

#article.work-article-page .work-react-rail.standard-react-rail{
  box-sizing:border-box!important;
  position:sticky!important;
  top:112px!important;
  display:flex!important;
  width:112px!important;
  min-width:112px!important;
  max-width:112px!important;
  height:max-content!important;
  align-self:start!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-self:end!important;
  gap:5px!important;
  margin:0!important;
  padding:34px 0 0!important;
  z-index:3!important;
}

#article.work-article-page .work-react-rail.standard-react-rail>span{
  display:block!important;
  margin:0 0 6px 8px!important;
  color:var(--muted)!important;
  font:900 8px/1 Inter,system-ui,sans-serif!important;
  letter-spacing:.14em!important;
}

#article.work-article-page .work-react-rail.standard-react-rail button{
  position:relative!important;
  box-sizing:border-box!important;
  display:grid!important;
  width:112px!important;
  min-width:112px!important;
  height:52px!important;
  min-height:52px!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  column-gap:10px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  transform:none!important;
}

#article.work-article-page .work-react-rail.standard-react-rail button b{
  grid-column:1!important;
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  justify-self:center!important;
  border:1px solid var(--line)!important;
  border-radius:50%!important;
  background:var(--card)!important;
  color:var(--text)!important;
  box-shadow:0 5px 15px rgba(0,0,0,.10)!important;
}

#article.work-article-page .work-react-rail.standard-react-rail button b svg,
#article.work-article-page .work-react-rail.standard-react-rail button b .material-symbols-rounded{
  width:18px!important;
  height:18px!important;
  font-size:18px!important;
  line-height:1!important;
}

#article.work-article-page .work-react-rail.standard-react-rail button small{
  grid-column:2!important;
  display:flex!important;
  min-width:0!important;
  height:42px!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:0!important;
  overflow:hidden!important;
  color:var(--muted)!important;
  text-align:left!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font:700 8.5px/1.05 Inter,system-ui,sans-serif!important;
  letter-spacing:.01em!important;
}

#article.work-article-page .work-react-rail.standard-react-rail button:hover b,
#article.work-article-page .work-react-rail.standard-react-rail button:focus-visible b,
#article.work-article-page .work-react-rail.standard-react-rail button.active b,
#article.work-article-page .work-react-rail.standard-react-rail button.community-active b{
  border-color:var(--cyan)!important;
  color:var(--cyan)!important;
}

#article.work-article-page .work-react-rail.standard-react-rail button:focus-visible{
  outline:2px solid rgba(85,231,255,.55)!important;
  outline-offset:3px!important;
}

#article.work-article-page #reader-thread,
#article.work-article-page .article-thread,
#article.work-article-page>.work-bottom-grid,
#article.work-article-page .work-related-card.nc-related-intelligent{
  display:none!important;
}

#article.work-article-page>.nc-recirculation,
#article.work-article-page>.work-newsletter-band{
  clear:both!important;
  position:relative!important;
  z-index:1!important;
}

@media(max-width:1259px) and (min-width:901px){
  #article.work-article-page>.work-reading-grid{
    width:100%!important;
    grid-template-columns:94px minmax(0,1fr) minmax(220px,260px)!important;
    column-gap:22px!important;
  }
  #article.work-article-page .work-react-rail.standard-react-rail{
    width:94px!important;
    min-width:94px!important;
    max-width:94px!important;
  }
  #article.work-article-page .work-react-rail.standard-react-rail button{
    width:94px!important;
    min-width:94px!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    column-gap:7px!important;
  }
  #article.work-article-page .work-react-rail.standard-react-rail button b{
    width:38px!important;
    height:38px!important;
  }
  #article.work-article-page .work-react-rail.standard-react-rail button small{
    font-size:8px!important;
  }
}

@media(max-width:900px){
  #article.work-article-page>.work-reading-grid{
    display:block!important;
    width:100%!important;
  }

  #article.work-article-page .work-react-rail.standard-react-rail{
    position:relative!important;
    top:auto!important;
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    margin:0 0 26px!important;
    padding:0!important;
  }

  #article.work-article-page .work-react-rail.standard-react-rail>span{
    display:none!important;
  }

  #article.work-article-page .work-react-rail.standard-react-rail button{
    display:grid!important;
    width:72px!important;
    min-width:72px!important;
    height:60px!important;
    min-height:60px!important;
    grid-template-columns:1fr!important;
    grid-template-rows:38px auto!important;
    gap:3px!important;
  }

  #article.work-article-page .work-react-rail.standard-react-rail button b{
    grid-column:1!important;
    grid-row:1!important;
    width:36px!important;
    height:36px!important;
  }

  #article.work-article-page .work-react-rail.standard-react-rail button small{
    grid-column:1!important;
    grid-row:2!important;
    height:auto!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:8px!important;
  }

  #article.work-article-page .work-article-sidebar{
    position:relative!important;
    top:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
    margin-top:36px!important;
    padding:0!important;
  }
}

@media(max-width:620px){
  #article.work-article-page .work-article-sidebar{
    grid-template-columns:1fr!important;
  }
  #article.work-article-page .work-react-rail.standard-react-rail{
    justify-content:flex-start!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    padding-bottom:4px!important;
    scrollbar-width:none;
  }
  #article.work-article-page .work-react-rail.standard-react-rail::-webkit-scrollbar{display:none}
}

@media(prefers-reduced-motion:reduce){
  #article.work-article-page .work-react-rail.standard-react-rail button,
  #article.work-article-page .work-react-rail.standard-react-rail button b{transition:none!important}
}