/*!
 * Copyright (c) 2026 The Teluala Authors
 * SPDX-License-Identifier: MIT
 */
/* Shared base rules, the header, the demo, and the footer come from styles.css. */
@import url('styles.css');

.doc { width:min(820px,100%); margin-inline:auto; padding-block:var(--space-2xl) var(--space-4xl); }
.doc h1 { font-size:var(--text-heading); letter-spacing:-.04em; line-height:1.12; }
.doc h1 + p { margin-top:var(--space-lg); font-size:var(--text-lg); color:var(--color-ink); }
.doc h2 { font-size:clamp(1.5rem,2.4vw,1.875rem); margin-top:var(--space-3xl); padding-top:var(--space-lg); border-top:1px solid var(--color-rule); }
.doc h2 + * { margin-top:var(--space-lg); }
.doc p,.doc ul { color:var(--color-muted); max-width:none; }
.doc p + p,.doc p + pre,.doc pre + p,.doc .table + p,.doc p + ul { margin-top:var(--space-md); }
.doc strong { color:var(--color-ink); font-weight:600; }
.doc p code,.doc li code,.doc td code { color:var(--color-ink); background:var(--color-panel); padding:.1em .35em; border-radius:var(--radius-control); }
.doc a:not(.text-link) { color:var(--color-accent); white-space:normal; }
.doc blockquote { margin:var(--space-xl) 0 0; padding:var(--space-md) var(--space-lg); border-left:2px solid var(--color-accent); background:var(--color-panel); }
.doc pre { background:var(--color-deep); border:1px solid var(--color-rule); border-radius:var(--radius-control); padding:var(--space-md) var(--space-lg); overflow-x:auto; white-space:pre; overflow-wrap:normal; }
.doc pre code { font-size:.8125rem; line-height:1.7; overflow-wrap:normal; }
.doc ul { padding-left:1.25rem; }
.doc li + li { margin-top:var(--space-xs); }
.doc .table { overflow-x:auto; }
.doc table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.doc th,.doc td { text-align:left; vertical-align:top; padding:var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom:1px solid var(--color-rule); }
.doc th { color:var(--color-ink); font-weight:500; }
.doc td { color:var(--color-muted); }
.doc td:first-child { color:var(--color-ink); white-space:nowrap; }

/* The live frame breaks out of the text column. */
.frame { margin:var(--space-2xl) calc(50% - min(50vw - var(--page-gutter), 560px)) 0; border:1px solid var(--color-rule); }
.frame .viewport { min-height:clamp(300px,45vw,460px); }
.frame figcaption { display:flex; align-items:center; gap:var(--space-sm); padding:var(--space-md) var(--space-lg); background:var(--color-panel); font-size:var(--text-sm); color:var(--color-muted); }

@media (max-width: 640px) {
 .nav nav a:not([href^="https"]) { display:none; }
 .frame { margin-inline:calc(-1 * var(--page-gutter)); border-inline:0; }
}

/* Copy buttons on code blocks (shown by copy-code.js). */
.doc .code { position:relative; }
.doc .code + p,.doc p + .code { margin-top:var(--space-md); }
.doc .copy { position:absolute; top:var(--space-sm); right:var(--space-sm); padding:var(--space-xs) var(--space-md); min-height:32px; font-size:var(--text-sm); border:1px solid var(--color-rule); background:var(--color-panel); color:var(--color-muted); }
.doc .copy:hover { color:var(--color-ink); border-color:var(--color-accent); }
.doc .code pre { padding-right:6rem; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Demo tabs above the live frame, and the data credit below it. */
.demo-tabs { display:flex; gap:var(--space-xs); padding:var(--space-sm); border-bottom:1px solid var(--color-rule); background:var(--color-panel); overflow-x:auto; }
.demo-tabs button { padding:var(--space-xs) var(--space-md); min-height:36px; border:1px solid transparent; background:none; color:var(--color-muted); font-size:var(--text-sm); white-space:nowrap; }
.demo-tabs button:hover { color:var(--color-ink); border-color:var(--color-rule); }
.demo-tabs button[aria-selected="true"] { color:var(--color-accent-ink); background:var(--color-accent); border-color:var(--color-accent); }
.frame figcaption { flex-wrap:wrap; }
.frame .credit { flex-basis:100%; font-size:.75rem; }
.frame .credit:empty { display:none; }
.frame .credit a { color:var(--color-muted); text-decoration:underline; text-underline-offset:3px; white-space:normal; }
.view-controls[hidden] { display:none; }