/* Contents rail for article pages (screens wider than 960px). Built by assets/toc-collapse.js, which adds
   html.has-toc-rail. The hero contents card is hidden and the hero goes to one column while the rail is on.
   At 960px and below nothing here applies and the card behaves as before.
   Layout: rail 232px + 40px gap + text column (max 880px), inside a 1152px area centred on the page. The rail is a
   float so it takes no room in the flow, and sticky so it follows the scroll until the end of .sci.
   Selectors start at html[data-theme="light"] so they beat _theme-light.css, which loads last. */
@media (min-width: 961px) {
  html[data-theme="light"].has-toc-rail .svc-hero aside.toc-card { display: none; }
  html[data-theme="light"].has-toc-rail .svc-hero .svc-hero__grid { grid-template-columns: 1fr; }

  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail {
    float: left; position: sticky; z-index: 2; box-sizing: border-box;
    width: 232px; margin: var(--toc-rail-top, 64px) 0 0 calc((100% - min(1152px, 100% - 64px)) / 2);
    top: calc(var(--toc-header-h, 85px) + 24px);
    max-height: calc(100vh - var(--toc-header-h, 85px) - 48px); overflow-y: auto;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    /* Direction 1 "Card rail": the hero's white contents card, moved left */
    background: #fff; border: 1px solid rgba(7, 23, 42, 0.14); border-radius: 22px;
    box-shadow: 0 10px 30px rgba(7, 23, 42, 0.12); padding: 22px 18px 14px;
  }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail[hidden] { display: none; }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail { transition: opacity .2s ease, visibility .2s; }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail.is-away { opacity: 0; visibility: hidden; }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail .toc-rail__label {
    margin: 0 0 6px; font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #22507e;
  }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: tocrail; }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail li { counter-increment: tocrail; margin: 0; padding: 0; border: 0; border-top: 1px solid rgba(7, 23, 42, 0.08); }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail li:first-child { border-top: 0; }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail a {
    display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: baseline;
    padding: 11px 0; font-size: 15.5px; line-height: 1.4; font-weight: 500; color: #07172a; text-decoration: none;
  }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail a::before {
    content: counter(tocrail, decimal-leading-zero); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 700; color: #22507e;
  }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail a:hover { color: #22507e; }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail a.is-active,
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail a[aria-current="true"] { color: #22507e; font-weight: 600; }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail a.is-active::before,
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail a[aria-current="true"]::before { font-weight: 700; }
  html[data-theme="light"].has-toc-rail .sci > nav.toc-rail a:focus-visible { outline: 2px solid #22507e; outline-offset: 2px; border-radius: 3px; }

  /* Text column sits beside the rail; section bands stay full width */
  html[data-theme="light"].has-toc-rail .sci section:not(.learn-more) > .inner {
    margin-left: calc((100% - min(1152px, 100%)) / 2 + 272px); margin-right: auto;
  }
  /* Land with the heading level with the rail's top (header height + 24px). The page's own scroll-padding-top is taken off here. */
  html[data-theme="light"].has-toc-rail .sci section[id] { scroll-margin-top: calc(var(--toc-header-h, 85px) + 24px - var(--toc-sec-pad, 64px) - var(--toc-scroll-pad, 0px)); }
}