/* Table of contents component for static guide pages under /guides/*. "Stamped bureaucratic document index" styling — purely additive, no existing selector from _shared.css is touched or overridden unconditionally. Uses _shared.css's own local tokens (--teal, --champagne, --ink, --border, --muted) to stay consistent with the stylesheet these pages actually load; these are the same brand colors as INVARIANTS.md's --bb-green/--bb-paper/--bb-ink under this file's own local names. Fonts ('Special Elite', 'Source Serif 4') are already loaded via the Google Fonts in every guide page's — nothing new is loaded. */ .guide-toc { font-family: 'Quicksand', sans-serif; background: var(--champagne); border: 1px solid var(--border); border-radius: 8px; margin: 0 0 2rem; position: relative; } /* File-tab / folder-label header */ .guide-toc-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: none; border: none; border-bottom: 1px dashed var(--border); cursor: pointer; padding: 0.7rem 1rem; text-align: left; } .guide-toc-label { font-family: 'Special Elite', monospace; font-weight: 400; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); } .guide-toc-status { font-family: 'Special Elite', monospace; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .guide-toc-chevron { display: inline-block; transition: transform 0.2s ease; } .guide-toc.is-open .guide-toc-chevron { transform: rotate(180deg); } /* Smooth height transition without layout jank: the grid-rows 0fr/1fr trick animates a real box height, so nothing overlaps mid-transition. */ .guide-toc-list-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; } .guide-toc.is-open .guide-toc-list-wrap { grid-template-rows: 1fr; } .guide-toc-list-inner { overflow: hidden; min-height: 0; } .guide-toc-list { list-style: none; margin: 0; padding: 0.6rem 1rem 0.9rem; } .guide-toc-list li { margin: 0 0 0.15rem; } .guide-toc-list li:last-child { margin-bottom: 0; } .guide-toc-list a { font-family: 'Quicksand', sans-serif; font-weight: 500; font-size: 0.92rem; color: var(--muted); text-decoration: none; display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0 0.3rem 0.7rem; border-left: 2px solid var(--border); background-image: linear-gradient(var(--teal), var(--teal)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 1.65rem 100%; transition: color 0.15s ease, border-color 0.15s ease, background-size 0.2s ease; } .guide-toc-marker { font-family: 'Special Elite', monospace; font-size: 0.7rem; color: var(--muted); flex-shrink: 0; } .guide-toc-list a:hover, .guide-toc-list a:focus-visible { color: var(--ink); border-left-color: var(--teal); background-size: calc(100% - 1.65rem) 1px; } .guide-toc-list a:hover .guide-toc-marker, .guide-toc-list a:focus-visible .guide-toc-marker, .guide-toc-list a.is-active .guide-toc-marker { color: var(--teal); } .guide-toc-list a.is-active { color: var(--teal); border-left-color: var(--teal); font-weight: 700; } /* Desktop sidebar — only activates where a 220px sidebar comfortably fits next to the existing 760px reading column. Below this width, .guide-wrap falls back entirely to its current unqueried single-column layout. */ @media (min-width: 1180px) { .guide-wrap { max-width: 1040px; display: grid; grid-template-columns: 220px minmax(0, 760px); column-gap: 2.5rem; align-items: start; } .guide-header, .guide-footer { grid-column: 1 / -1; } main { grid-column: 2; } .guide-toc { grid-column: 1; grid-row: 2; position: sticky; top: 1.75rem; align-self: start; max-height: calc(100vh - 3.5rem); overflow-y: auto; background: none; border: none; margin: 0; } .guide-toc-toggle { cursor: default; pointer-events: none; border-bottom: none; padding: 0 0 0.6rem; } .guide-toc-status { display: none; } .guide-toc-list-wrap { grid-template-rows: 1fr !important; } .guide-toc-list { padding: 0; } }