/* science-index.css — Pattern C HOST: wrapper + desktop sidebar TOC · Figma D 1817:4362 (1920x9782.87) / M 1817:4990 (390x13127.5)
   Source: brief/science-index.md §1b / §2 / §5 / §6 + cache/science-index.{desktop,mobile}.json (wrapper padding 80/240 D,
   64/16 M; column gap 100 D / 80 M; Main Content Container gap 80) + get_design_context 1817:4364 (sidebar: 1px
   ink-40 border, shadow 0 1px 2px rgba(0,0,0,.08), rows p 20, gap 16, Body/XL/Medium 24/1.22/-0.1px).
   Scoped to .science-index / .science-index__* only (GLOBAL-SCOPE LOCK). Mobile-first: base = 390 anchor,
   768 pseudo-tablet (no TOC), 1024 desktop (sticky TOC + 2-column grid).
   NEVER `overflow` on the section / __layout / __main: the TOC is sticky and the formula mobile row bleeds. */

/* ---- Section shell (mobile base): pad-block 64 → fluid; gutter from .container ---- */
.science-index {
  /* M 64 / D 80 → M-min 53, M-max 80 */
  --si-pad-block: clamp(53px, calc(64px + (var(--max-vw) - 390px) * 0.015), 80px);
  /* M 80 / D 100 → M-min 66, M-max 100 */
  --si-gap: clamp(66px, calc(80px + (var(--max-vw) - 390px) * 0.015), 100px);
  padding-block: var(--si-pad-block);          /* never the padding shorthand (it wipes the .container gutter) */
}

/* ---- Main column: hosts sections 5–15, the column gap is the ONLY space between them ---- */
.science-index__main {
  display: flex;
  flex-direction: column;
  row-gap: var(--si-gap);
}

.science-index__main > * {
  min-width: 0;
  scroll-margin-top: var(--si-pad-block);     /* D-SI-3: anchor lands on the sticky TOC's top line */
}

/* ---- Sidebar TOC: absent below 1024 (the mobile layer draws none) ---- */
.science-index__toc {
  display: none;
}

/* ============================================
   PSEUDO-TABLET (768–1023): no TOC, single full-width column (stack)
============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .science-index {
    --si-pad-block: clamp(69.66px, calc(69.66px + (var(--max-vw) - 768px) * 0.025), 80px);
    --si-gap: clamp(85.66px, calc(85.66px + (var(--max-vw) - 768px) * 0.025), 100px);
  }
}

/* ============================================
   DESKTOP (1024+): TOC 310 | gap 80 | main 1050 @1920, every term scales by s
============================================ */
@media (min-width: 1024px) {
  .science-index {
    --si-pad-block: clamp(43px, calc(80px * (var(--max-vw) / var(--vw-base))), 80px);
    --si-gap: clamp(53px, calc(100px * (var(--max-vw) / var(--vw-base))), 100px);
    --si-col-gap: clamp(43px, calc(80px * (var(--max-vw) / var(--vw-base))), 80px);
    --si-toc-w: clamp(165px, calc(310px * (var(--max-vw) / var(--vw-base))), 310px);
    --si-row-pad: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    --si-line-w: clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
    --si-line-gap: clamp(9px, calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
  }

  /* Main Content Container 1817:4363 — HORIZONTAL, gap 80, alignItems MIN */
  .science-index__layout {
    display: grid;
    grid-template-columns: var(--si-toc-w) minmax(0, 1fr);
    column-gap: var(--si-col-gap);
    align-items: start;
  }

  /* Sidebar 1817:4364 — 310 x 771, 1px ink-40 INSIDE stroke, drop shadow (D-SI-6), no fill, sticky (D-SI-4) */
  .science-index__toc {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--si-pad-block));
    align-self: start;
    border: 1px solid var(--color-ink-40);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    /* BA-SI-3: short viewports — the nav scrolls inside itself instead of losing rows under the fold */
    max-height: calc(100vh - var(--header-h) - var(--si-pad-block));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Sidebar Section rows 1817:4365 … 4386 — p 20, 1px ink-40 bottom rule (not on the last row) */
  .science-index__toc-link {
    display: flex;
    align-items: center;
    padding: var(--si-row-pad);
    border-bottom: 1px solid var(--color-ink-40);
    color: var(--color-ink-40);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-xl);
    line-height: var(--lh-body-xl);
    letter-spacing: var(--ls-body-xl);
    text-align: left;
    transition: color 0.2s ease;
  }

  .science-index__toc-item:last-child .science-index__toc-link {
    border-bottom: 0;
  }

  /* Line 936 1817:4366 — LINE 40 x 2 stroke #000 (D-SI-1: CSS box, not an asset); takes no room when inactive */
  .science-index__toc-line {
    flex: none;
    width: 0;
    height: 2px;
    margin-right: 0;
    background: #000000;
    transition: width 0.25s ease, margin-right 0.25s ease;
  }

  /* The label never shrinks: "The NIKAI™ Standard" / "The research, in detail" (223–225 of 268 @1920) do not fit
     beside the full 40 + 16 line, and wrapping them on activation grew the row 70 → 100 and jumped the whole nav.
     max-width keeps the wrap as a last resort only. */
  .science-index__toc-label {
    flex: 0 0 auto;
    max-width: 100%;
    min-width: 0;
  }

  /* Active (row 1 drawn): line 40 + gap 16 → label at x 76, graphite.
     The line gives way instead of the label (only one row is ever active, so a shorter line is not comparable). */
  .science-index__toc-link.is-active {
    color: var(--color-graphite);
  }

  .science-index__toc-link.is-active .science-index__toc-line {
    flex: 0 1 auto;
    width: var(--si-line-w);
    min-width: calc(var(--si-line-w) * 0.25);
    margin-right: var(--si-line-gap);
  }

  /* BA-SI-1 (not drawn): hover → graphite; focus ring inside the row (rows touch) */
  .science-index__toc-link:hover {
    color: var(--color-graphite);
  }

  .science-index__toc-link:focus-visible {
    outline-offset: -2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .science-index__toc-link,
  .science-index__toc-line {
    transition: none;
  }
}