/*
 * Task 199 — table-of-contents styling (paired with toc.js).
 *
 * Layout decision (see Task 199 investigation): the content container is
 * max-width 1100px centered, so a real left-gutter sidebar only fits without
 * overlapping content at very wide viewports (>=1536px). Therefore:
 *   - the collapsed "Jump to…" <details> dropdown is the reliable nav on all
 *     widths up to 1535px (mobile + typical laptops), and
 *   - the fixed left sidebar is a progressive enhancement shown only at
 *     >=1536px, where the ~200px gutter genuinely exists.
 * If we later want the sidebar on standard laptops, that needs a two-column
 * shell refactor (shrink content, place TOC beside it) — flagged for the
 * design-review gate, deliberately out of this first cut to avoid restructuring
 * every content page's .container.
 *
 * Palette matches the existing pages (accent #2563eb / neutral grays).
 */

/* Smooth in-page scrolling + keep anchored headings clear of the fixed global
 * header (measured 109px tall on blog/landscape pages — see Task 199). */
html { scroll-behavior: smooth; }
.page-toc ~ h2, .page-toc ~ h3,
main h2[id], main h3[id],
.container h2[id], .container h3[id],
.blog-article h2[id], .blog-article h3[id] { scroll-margin-top: 124px; }

/* ---- Mobile / laptop: collapsed "Jump to…" dropdown (default, <1536px) ---- */
.page-toc { display: none; }           /* sidebar hidden by default */
.page-toc-mobile {
  display: block;
  margin: 12px 0 20px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  font-size: 0.92rem;
}
.page-toc-mobile > summary {
  cursor: pointer;
  color: #374151;
  font-weight: 600;
  list-style: none;
}
.page-toc-mobile > summary::-webkit-details-marker { display: none; }
.page-toc-mobile > summary::after { content: " ▾"; color: #9ca3af; }
.page-toc-mobile[open] > summary::after { content: " ▴"; }
.page-toc-mobile a {
  display: block;
  padding: 6px 8px;
  color: #4b5563;
  text-decoration: none;
  border-radius: 4px;
}
.page-toc-mobile a.toc-sub { margin-left: 14px; font-size: 0.9em; }
.page-toc-mobile a:hover { color: #2563eb; background: #eef2ff; }

/* ---- Wide desktop (>=1536px): FIXED left-gutter sidebar ----
 * position:fixed (not sticky) so it's pinned immediately and never scrolls with
 * the content — sticky has a "catch-up" before it pins, and float+sticky is
 * fragile. Placed in the gutter left of the 1100px centred content via
 * calc(50% - [550 half-content + 218 sidebar offset]); clamped so it can never
 * clip off the left edge. 1536px breakpoint = the width where a ~200px sidebar
 * + gap fits beside 1100px content without overlap. Scrolls internally if the
 * TOC is taller than the viewport. */
@media (min-width: 1536px) {
  .page-toc-mobile { display: none; }
  .page-toc {
    display: block;
    position: fixed;
    top: 124px;                            /* clear the 109px fixed global header + ~15px gap */
    left: max(12px, calc(50% - 768px));
    width: 200px;
    max-height: calc(100vh - 144px);
    overflow-y: auto;
    padding: 8px 0;
    font-size: 0.9rem;
    line-height: 1.35;
  }
  .page-toc a {
    display: block;
    padding: 5px 10px;
    color: #6b7280;
    text-decoration: none;
    border-left: 2px solid transparent;
  }
  .page-toc a.toc-sub { margin-left: 12px; font-size: 0.92em; }
  .page-toc a:hover { color: #2563eb; }
  .page-toc a.active {
    color: #2563eb;
    border-left-color: #2563eb;
    font-weight: 600;
  }
}

/* Never show a TOC when the page opts out. */
[data-no-toc] .page-toc, [data-no-toc] .page-toc-mobile { display: none !important; }

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }