/* Research kit TOC (.rk-toc*). Lane D owns polish (hover scrollbar). */
/* Whole-article TOC gutter: one grid spanning every section so the ArticleToc
   sidebar is sticky through the entire read (the blog pattern). Shown from
   1080px up, comfortably covers laptop widths (a MacBook 14" is 1512px, so the
   old 1536px gate hid it on most screens). */
.research-article .rk-toc-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.research-article .rk-content { min-width: 0; }
@media (min-width: 1080px) {
  .research-article .rk-toc-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(1.5rem, 3.5vw, 4rem);
    /* Center the whole two-column block within page gutters so the TOC isn't
       flush against the viewport edge. */
    max-width: 1640px; margin-inline: auto;
    padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
    transition: grid-template-columns 0.22s ease, column-gap 0.22s ease;
  }
  /* Collapsed = focus mode: slim rail, article reclaims width */
  .research-article .rk-toc-layout.is-toc-collapsed {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: clamp(0.75rem, 2vw, 1.25rem);
    max-width: 1760px;
  }
}
@media (min-width: 1440px) {
  .research-article .rk-toc-layout { grid-template-columns: 268px minmax(0, 1fr); }
  .research-article .rk-toc-layout.is-toc-collapsed {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}

/* Focus mode reading surface: wider measure + slightly larger type.
   Class lives on .research-article (set by ArticleToc) so tokens cascade into
   prose, timeline, chains, and other sections under the same root. */
@media (min-width: 1080px) {
  .research-article.is-toc-collapsed {
    --measure: 80ch;
    --page: 1360px;
    /* Subtle type bump — readable focus, not a zoom */
    --text-xs: clamp(0.78rem, 0.72rem + 0.28vw, 0.9rem);
    --text-sm: clamp(0.93rem, 0.86rem + 0.38vw, 1.06rem);
    --text-base: clamp(1.0625rem, 1rem + 0.32vw, 1.2rem);
    --text-lg: clamp(1.2rem, 1.06rem + 0.85vw, 1.62rem);
    --text-xl: clamp(1.62rem, 1.28rem + 1.35vw, 2.45rem);
    --text-2xl: clamp(2.15rem, 1.3rem + 2.65vw, 3.7rem);
  }
  .research-article.is-toc-collapsed .measure {
    max-width: var(--measure);
    transition: max-width 0.28s var(--ease, ease);
  }
  .research-article.is-toc-collapsed .wrap {
    max-width: var(--page);
    transition: max-width 0.28s var(--ease, ease);
  }
  .research-article.is-toc-collapsed .prose > * + * {
    margin-top: calc(var(--space-6) * 1.1);
  }
  .research-article.is-toc-collapsed .prose p,
  .research-article.is-toc-collapsed .prose li {
    line-height: 1.72;
  }
  .research-article.is-toc-collapsed .breakout {
    width: calc(100% + clamp(0px, 8vw, 180px));
  }
  /* Full-bleed chain section also benefits from the wider page shell */
  .research-article.is-toc-collapsed .section-pad > .wrap {
    max-width: min(var(--page), 100%);
  }
}

/* TOC: ArticleToc renders in the .rk-toc aside. Sticky sidebar from 1080px, hidden
   below (where it would crowd the reading column). It scrolls internally when
   the entry list is taller than the viewport, so every section stays reachable
   on short screens.

   Scrollbar: stable thin gutter always (no layout shift). Thumb/track transparent
   at rest; visible on :hover and :focus-within (keyboard tab into links).
   Do not toggle overflow or scrollbar-width none↔thin, that reflows the rail. */
.research-article .rk-toc { display: none; }
@media (min-width: 1080px) {
  .research-article .rk-toc {
    display: block; position: sticky; top: 92px;
    max-height: calc(100vh - 92px - var(--space-6));
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    /* Firefox: keep thin gutter; invisible thumb+track at rest */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .research-article .rk-toc:hover,
  .research-article .rk-toc:focus-within {
    scrollbar-color: var(--color-text-faint) transparent;
  }
  /* WebKit: fixed-width gutter always so paint alone does not shift content */
  .research-article .rk-toc::-webkit-scrollbar { width: 7px; }
  .research-article .rk-toc::-webkit-scrollbar-track { background: transparent; }
  .research-article .rk-toc::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
  }
  .research-article .rk-toc:hover::-webkit-scrollbar-thumb,
  .research-article .rk-toc:focus-within::-webkit-scrollbar-thumb {
    background: var(--color-text-faint);
  }

  /* ---- Collapse / expand: single row [title · icon+label] ---- */
  .research-article .rk-toc-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 8px;
    width: 100%;
    min-height: 22px;
  }
  .research-article .rk-toc-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-faint, #8b9aab);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .research-article .rk-toc-toggle {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    height: 22px;
    padding: 0 6px 0 5px;
    margin: 0;
    border: 1px solid var(--color-border-soft, rgba(101, 137, 158, 0.22));
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-faint, #8b9aab);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
      color 0.15s ease,
      border-color 0.15s ease,
      background 0.15s ease;
  }
  .research-article .rk-toc-toggle:hover {
    color: var(--color-text-muted, #a8b4c0);
    border-color: var(--color-border, rgba(101, 137, 158, 0.35));
    background: color-mix(in srgb, var(--color-surface, transparent) 70%, transparent);
  }
  .research-article .rk-toc-toggle:focus-visible {
    outline: 2px solid var(--color-accent, #2d6ae7);
    outline-offset: 2px;
  }
  .research-article .rk-toc-toggle-icon {
    display: inline-flex;
    flex: none;
    width: 12px;
    height: 12px;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  .research-article .rk-toc-toggle-icon svg {
    display: block;
    width: 12px;
    height: 12px;
  }
  .research-article .rk-toc-toggle-label {
    display: inline;
    line-height: 1;
    font-size: 9px;
  }
  .research-article .rk-toc-toggle-label--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Collapsed rail: icon-only toggle, list hidden */
  .research-article .rk-toc.is-collapsed,
  .research-article .rk-toc-nav.is-collapsed {
    overflow: visible;
  }
  .research-article .rk-toc.is-collapsed .rk-toc-nav,
  .research-article .rk-toc-nav.is-collapsed {
    border: none;
    padding: 0;
    gap: 0;
    align-items: center;
  }
  .research-article .rk-toc-nav.is-collapsed .rk-toc-header {
    justify-content: center;
    width: auto;
  }
  .research-article .rk-toc-nav.is-collapsed .rk-toc-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    gap: 0;
  }
  .research-article .rk-toc-list[hidden] {
    display: none !important;
  }
}