/* ============================================================
   article-v2-chrome.css
   ------------------------------------------------------------
   Turns the v2 article shell from a one-tab-at-a-time viewer into
   a normal scrolling article, and slots the restored site header
   and footer around it.

   Why: article-v2.css sets `.tab-panel { display: none }` and only
   reveals `.active`, which left roughly 90% of every article's text
   in display:none — bad for readers on mobile, bad for indexing, and
   the reason each page exposed only ~2 internal links. The sidebar
   keeps its exact look and becomes an in-page section navigator
   (see assets/js/article-v2-nav.js).

   Load order: article-v2.css -> article-v2-prose.css -> this file.
   ============================================================ */

/* ---------- Every section visible, stacked ---------- */
.tab-panel { display: flex; }

/* Anchor offset for the fixed header, and breathing room between
   sections now that they are stacked rather than swapped. */
.main-content > .tab-panel { scroll-margin-top: 118px; }
.main-content > .tab-panel + .tab-panel { margin-top: 10px; }

/* ---------- Sidebar: keep the section navigator reachable ---------- */
@media (min-width: 768px) {
  .sidebar {
    position: sticky;
    top: 118px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .sidebar::-webkit-scrollbar { width: 4px; }
  .sidebar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.14); border-radius: 4px; }
}

/* ---------- Clear the fixed .nav-pill-wrapper header ----------
   site-chrome.css pins it at top: 2.5rem (1.25rem under 767px), and
   the pill itself is ~54px tall. */
.page-shell { padding-top: 118px; }

@media (max-width: 767px) {
  .page-shell { padding-top: 88px; }
}

/* ---------- Footer ----------
   It sits outside .page-shell. Under 767px the sidebar becomes a
   fixed bottom bar, so the footer has to clear it. */
@media (max-width: 767px) {
  .premium-footer-wrapper { padding-bottom: 104px; }
}

@media (max-width: 700px) {
  .premium-footer-wrapper { padding-left: 1rem; padding-right: 1rem; }
}

/* Breadcrumbs sit above the first card, so give them the same
   left alignment as the cards rather than the grid gutter. */
.main-content > .bk-crumbs { margin: 0 0 4px 4px; }