/* css_scope: verbatim */
/* Sticky contents list on blog articles. Not a mockup file.
   The mockup article contents list is position:sticky (pages-r2.css, desktop
   above 1100px). In the site, the root layout gives <html> and <body>
   overflow-x:hidden (app/globals.css and the body class). With both set, the
   body becomes a scroll container that never scrolls itself, so sticky never
   engages. overflow-x:clip trims horizontal overflow the same way without
   creating a scroll container. Loaded only by redesign pages (RedesignShell),
   and only for them: html:has(> body > rd-body). Engines without clip ignore it
   and keep hidden. */
@supports (overflow: clip) {
  /* specificity (0,1,3) or more, so it wins over the site utility
     .overflow-x-hidden (0,1,0) whatever order the stylesheets load in */
  html:has(> body > rd-body):root,
  html:has(> body > rd-body):root > body.overflow-x-hidden,
  html:has(> body > rd-body):root > body {
    overflow-x: clip;
  }
}

/* Desktop, where the contents list sits beside the article (above 1100px, the
   mockup breakpoint): a long list (about a third of the posts have one taller
   than a laptop screen) would stick with its last entries below the fold, so
   it keeps to the viewport and its list scrolls, as the mockup's own phone
   drawer does (blog-article-r3.css). Short lists are unchanged. */
@media (min-width: 1101px) {
  rd-body.page-blog-article .r2-toc {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
  }
  rd-body.page-blog-article .r2-toc ol {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #9fb3c0 transparent;
  }
}