/* Pagine di documentazione generate dal registro. I token (carattere, due temi) sono
   incorporati nella pagina da scripts/build-docs.mjs a partire da css/app.css. */
html { scroll-behavior: smooth; }
body { padding-bottom: 0; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: var(--r); z-index: 10; }
.skip:focus { left: 8px; }
.top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--s4);
  min-height: 60px; padding: 0 var(--s4); background: var(--ground);
}
.brand { color: var(--text); font-weight: 800; font-size: var(--t-md); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.top nav { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; }
.top nav a { color: var(--muted); text-decoration: none; padding: 10px 12px; border-radius: 8px; white-space: nowrap; font-weight: 600; }
.top nav a:hover { color: var(--text); background: var(--raise); }
.top nav a[aria-current='page'] { color: var(--text); background: var(--raise); }
.hero { position: relative; margin: 0; height: 34vh; min-height: 200px; max-height: 360px; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; display: block; }
.hero::after { content: ''; position: absolute; inset: 0; background: rgba(8, 11, 14, 0.22); }
.hero figcaption { position: absolute; right: var(--s3); bottom: var(--s2); z-index: 1; max-width: 70%; color: #fff; font-size: var(--t-sm); text-align: right; }
.hero figcaption a { color: inherit; }
.wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s6); max-width: 1240px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s6); }
.toc { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; font-size: var(--t-sm); }
.toc-h { margin: 0 0 var(--s2); color: var(--muted); font-weight: 700; }
.toc ol, .toc ul { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.toc li a { display: block; padding: 4px 0; color: var(--muted); text-decoration: none; }
.toc li.sub a { padding-left: var(--s3); }
.toc li a:hover { color: var(--text); }
main { min-width: 0; }
h1 { margin: 0 0 var(--s3); font-size: clamp(32px, 4.6vw, 56px); line-height: 0.95; font-weight: 800; letter-spacing: -0.045em; }
.lead { margin: 0 0 var(--s5); color: var(--text); max-width: 60ch; font-size: var(--t-md); line-height: 1.4; }
h2 { margin: var(--s6) 0 var(--s3); font-size: var(--t-lg); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
h3 { margin: 0 0 var(--s2); font-size: var(--t-md); font-weight: 700; }
p { max-width: 68ch; }
.entry { padding: var(--s4); margin: 0 0 var(--s2); border-radius: 14px; background: var(--surface); scroll-margin-top: 80px; }
.entry h2 { margin: 0 0 var(--s3); font-size: var(--t-md); letter-spacing: -0.02em; }
.id { margin-left: var(--s2); color: var(--muted); font-size: var(--t-sm); font-weight: 500; }
pre { margin: 0 0 var(--s3); padding: var(--s3); background: var(--raise); border-radius: 10px; overflow-x: auto; white-space: pre-wrap; font-size: var(--t-md); }
.latex { color: var(--muted); font-size: var(--t-sm); }
details summary { cursor: pointer; color: var(--muted); font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s2); }
details summary:hover { color: var(--text); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 12px 8px 0; white-space: nowrap; }
td { padding: 10px 12px 10px 0; border-top: 1px solid var(--raise); vertical-align: top; }
.vars { margin-bottom: var(--s3); max-width: 820px; }
.params td:nth-child(2) { min-width: 240px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.na { color: var(--muted); }
.note { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }
.tag { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: var(--t-sm); font-weight: 600; }
.scroll { overflow-x: auto; border-radius: 12px; background: var(--surface); padding: var(--s2) var(--s3); }
.scroll:focus-visible { outline-offset: 4px; }
.meta { display: grid; gap: var(--s2); margin: 0; max-width: 820px; }
.meta > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s3); }
.meta dt { color: var(--muted); font-size: var(--t-sm); font-weight: 600; line-height: 1.8; }
.meta dd { margin: 0; }
.plain { margin: 0; padding-left: 1.1em; }
.plain li + li { margin-top: 2px; }
.changes > li { list-style: none; margin-left: -1.1em; margin-bottom: var(--s3); }
.status {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4);
  padding: var(--s4); background: var(--surface); color: var(--muted); font-size: var(--t-sm);
}
.status p { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2); max-width: none; }
.status p span + span::before { content: '·'; margin-right: var(--s2); }
.status a { color: var(--muted); }
@media (max-width: 860px) {
  .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s4) var(--s3) var(--s5); }
  .toc { position: static; max-height: none; }
  .toc ol { columns: 2; column-gap: var(--s4); }
  .top { padding: 0 var(--s3); gap: var(--s2); }
  .brand { font-size: var(--t-base); }
  .hero { height: 26vh; min-height: 160px; }
  .meta > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .entry { padding: var(--s3); }
}