with a `both`-filled keyframe. Its last frame leaves `transform: translateY(0)` on the element permanently, and a non-none transform makes

two things it must not be here: the containing block for fixed descendants (the contents sheet would anchor to the bottom of the *document* instead of the viewport) and a stacking context (capping the sheet below the scrim on ). The entrance animation lives on .docs-body instead, so nothing is lost visually. */ main { animation: none; } /* ---------- Layout: sticky table of contents + long-form column ---------- */ .docs-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 44px; align-items: start; max-width: var(--shell); margin: 0 auto; padding: 8px var(--gutter) 48px; } /* `.doc` centres itself and owns the gutter; inside the grid the layout does both, so the card column only keeps its vertical rhythm. */ .docs-body { max-width: none; margin: 0; padding: 0; animation: rise .6s .1s ease both; } .docs-toc { position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow-y: auto; padding: 2px 8px 8px 0; animation: rise .6s ease both; scrollbar-width: thin; } .toc-title { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px 10px; } .toc-group + .toc-group { margin-top: 18px; } .toc-group-title { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 6px 10px; } .toc-link { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 9px; font-size: 13px; line-height: 1.45; color: var(--text-dim); border-bottom: none; } .toc-link:hover { color: var(--text); background: var(--hover-wash); } .toc-link.active { color: var(--gold); background: var(--gold-wash); } .toc-link .toc-icon { font-size: 12px; line-height: 1; opacity: .85; flex-shrink: 0; } /* ---------- Section header: anchor, path chip, requirement badges ---------- */ .docs-body .section { /* The header is sticky, so an anchored section must clear it. */ scroll-margin-top: 96px; } .section-head { margin-bottom: 16px; } .docs-body .section h2 { margin-bottom: 0; } .anchor-link { color: var(--text-faint); font-size: 15px; border-bottom: none; opacity: 0; transition: opacity .2s ease, color .2s ease; } .section h2:hover .anchor-link, .anchor-link:focus-visible { opacity: 1; } .anchor-link:hover { color: var(--gold); } .section-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .where-chip { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; } .badge { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 9px; } .badge--pro { color: var(--gold); border-color: var(--gold-line); background: var(--gold-wash); } .badge--soon { color: var(--accent-soft); border-color: var(--accent-line); background: var(--accent-wash); } .section-intro { font-size: 14px !important; color: var(--text-muted); } /* ---------- Field lists (settings reference) ---------- */ .fields { margin: 0 0 14px; } .field { display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 6px 16px; padding: 13px 16px; background: var(--bg-inset); border: 1px solid var(--line); border-radius: 12px; } .field + .field { margin-top: 8px; } .field dt { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.6; } .field dd { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-muted); text-wrap: pretty; } /* ---------- Callouts ---------- */ .callout { margin: 0 0 14px; padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 12px; background: var(--bg-inset); } .callout > :last-child { margin-bottom: 0; } .callout-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 0 0 6px; } .callout--caution { border-left-color: var(--accent); background: var(--accent-wash); } .callout--tip { border-left-color: var(--gold); background: var(--gold-wash); } .callout--caution .callout-title { color: var(--accent-soft); } .callout--tip .callout-title { color: var(--gold); } /* ---------- Example cards ---------- */ .example-card { margin: 0 0 14px; padding: 16px 18px; background: var(--bg-inset); border: 1px solid var(--line); border-radius: 14px; } .example-card h4 { color: var(--gold); margin-bottom: 10px; } .example-setup { margin: 0 0 12px !important; } .example-setup li { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); } .example-setup li::before { background: var(--text-faint); } .example-result { margin: 0; padding-top: 11px; border-top: 1px dashed var(--line-strong); font-size: 13.5px; color: var(--text-muted); } .example-result::before { content: '→'; color: var(--gold); margin-right: 8px; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; } .docs-table { width: 100%; border-collapse: collapse; font-size: 13px; } .docs-table th, .docs-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text-muted); white-space: nowrap; } .docs-table td:last-child { white-space: normal; } .docs-table th { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); background: var(--bg-inset); } .docs-table tr:last-child td { border-bottom: none; } /* ---------- Code blocks ---------- */ .code-caption { font-size: 12px; color: var(--text-dim); margin: 0 0 6px; } .docs-body pre { margin: 0 0 14px; } /* ---------- Language fallback notice ---------- */ .lang-fallback { display: inline-block; margin-top: 14px !important; font-size: 13px !important; color: var(--text-dim) !important; border: 1px solid var(--line); border-radius: 10px; padding: 7px 13px; } /* ---------- Mobile: the contents list becomes a bottom sheet ---------- */ .toc-fab { display: none; position: fixed; right: 16px; /* Clear the home indicator on notched iPhones. */ bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-float); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* On the dark page the border alone separated the pill from the canvas; on a light one it floats over white cards, where only a shadow reads. */ box-shadow: var(--shadow-md); color: var(--text); font-family: var(--font); font-size: 13.5px; font-weight: 600; cursor: pointer; } .toc-scrim { position: fixed; inset: 0; z-index: 59; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .toc-scrim.active { opacity: 1; pointer-events: auto; } @media (max-width: 980px) { /* common.css gives

`position: relative; z-index: 1`, which makes it a stacking context. The contents sheet lives inside

, so however high its own z-index is, it can never rise above the scrim and the button that sit on — it would open underneath the dimming layer and look like nothing happened. Dropping to `auto` keeps the positioning and removes the trap;

still paints over the page-head glow because it comes later in document order. */ main { z-index: auto; } .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .toc-fab { display: inline-flex; } .docs-toc { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 61; max-height: 72vh; /* Safari's toolbars make vh taller than what is actually on screen. */ max-height: 72dvh; padding: 20px 20px calc(28px + env(safe-area-inset-bottom)); background: var(--bg-card); border-top: 1px solid var(--line-strong); border-radius: 20px 20px 0 0; transform: translateY(103%); /* Hidden for real while parked off-screen, so keyboard focus and VoiceOver cannot walk into a sheet nobody opened. */ visibility: hidden; overscroll-behavior: contain; transition: transform .28s ease, visibility 0s .28s; animation: none; } .docs-toc.open { transform: none; visibility: visible; transition: transform .28s ease; } .toc-link { padding: 9px 10px; font-size: 14px; } /* The floating button parks over the end of the page; give the footer room so it never covers the last line. */ .site-footer { padding-bottom: calc(52px + env(safe-area-inset-bottom)); } } /* Touch devices never hover, so the per-section anchor link would sit there permanently invisible and still take up a tab stop. */ @media (hover: none) { .anchor-link { display: none; } } @media (max-width: 560px) { .field { grid-template-columns: minmax(0, 1fr); gap: 2px; } .docs-table th, .docs-table td { padding: 9px 11px; } .section-meta { gap: 6px; } .where-chip { overflow-wrap: anywhere; } }