/* Documentation site chrome. Colours, type and spacing come from the
 * design-system tokens; the components bring their own styles. Classes are
 * prefixed `site-` so they cannot collide with the type classes tokens.css
 * defines. Breakpoints follow the brand book's 900 and 1200. */

*{ box-sizing:border-box; }
html{ scroll-padding-top:calc(var(--app-topbar-h) + var(--space-4)); }
body{ margin:0; background:var(--bg-page); color:var(--text-primary);
  font-family:var(--font-mono); font-size:var(--text-body); line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased; }
a{ color:var(--brand); }
a:hover{ color:var(--label-engraved); }
a:focus-visible{ outline:none; box-shadow:var(--focus-shadow); border-radius:var(--radius-xs); }
::selection{ background:var(--brass-300); color:var(--ink-900); }

.site-skip{ position:absolute; left:var(--space-4); top:-100px; z-index:2;
  background:var(--bg-surface); padding:var(--space-2) var(--space-3); }
.site-skip:focus{ top:var(--space-2); }

.site-header{ position:sticky; top:0; z-index:1; display:flex; align-items:center;
  justify-content:space-between; gap:var(--space-4); height:var(--app-topbar-h);
  padding:0 var(--gutter); background:var(--nav-bg); border-bottom:1px solid var(--border-hairline); }
.site-brand{ display:flex; align-items:baseline; gap:var(--space-3); text-decoration:none; color:var(--text-primary); }
.site-brand > span:last-child{ font-size:var(--text-body-sm); color:var(--text-secondary); }
.site-actions{ display:flex; gap:var(--space-2); }
.site-menu{ display:none; }
:root:not(.js) #site-theme{ display:none; }

.site-body{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--space-10);
  max-width:var(--container-wide); margin:0 auto; padding:0 var(--gutter); }
.site-body--toc{ grid-template-columns:220px minmax(0,1fr) 196px; }

.site-nav, .site-toc{ position:sticky; top:var(--app-topbar-h); align-self:start;
  max-height:calc(100vh - var(--app-topbar-h)); overflow-y:auto;
  padding:var(--space-8) var(--space-1) var(--space-12); font-size:var(--text-body-sm); }
.site-nav{ border-right:1px solid var(--border-hairline); padding-right:var(--space-5); }
.site-nav ul, .site-toc ul{ list-style:none; margin:0 0 var(--space-6); padding:0; }
.site-nav__group{ margin:0 0 var(--space-2); font-size:var(--text-caption);
  font-weight:var(--fw-medium); color:var(--label-engraved); }
.site-nav a{ display:block; padding:4px 10px; border-left:2px solid transparent;
  color:var(--text-secondary); text-decoration:none; }
.site-nav a:hover{ color:var(--text-primary); background:var(--bg-sunken); }
.site-nav a[aria-current="page"]{ color:var(--brand-strong); border-left-color:var(--brass-500); background:var(--bg-sunken); }
.site-toc a{ display:block; padding:3px 0; color:var(--text-secondary); text-decoration:none; }
.site-toc a:hover{ color:var(--text-primary); }

.site-main{ min-width:0; padding:var(--space-8) 0 var(--space-12); }
.site-article > :first-child{ margin-top:0; }
.site-article h1{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-h1);
  line-height:var(--lh-snug); letter-spacing:var(--tracking-tight); margin:0 0 var(--space-4); }
.site-article h2{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-h2);
  line-height:var(--lh-snug); margin:var(--space-12) 0 var(--space-4); }
.site-article h3{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-h3);
  line-height:var(--lh-snug); margin:var(--space-8) 0 var(--space-3); }
.site-article h4{ font-size:var(--text-body); font-weight:var(--fw-semibold); margin:var(--space-6) 0 var(--space-2); }
.site-article p, .site-article ul, .site-article ol, .site-article dl, .site-article blockquote{
  max-width:var(--measure); line-height:var(--lh-relaxed); color:var(--text-secondary); }
.site-article li{ margin:var(--space-1) 0; }
.site-article strong{ color:var(--text-primary); font-weight:var(--fw-semibold); }
.site-article code{ font-family:var(--font-mono); font-size:.92em; background:var(--code-inline-bg);
  color:var(--code-inline-fg); padding:1px 5px; border-radius:var(--radius-xs); overflow-wrap:anywhere; }
.site-article .eq-code{ margin:var(--space-5) 0; }
.site-article .eq-code code{ background:none; color:inherit; padding:0; overflow-wrap:normal; }
.site-article hr{ border:0; border-top:1px solid var(--border-hairline); margin:var(--space-10) 0; }
.site-article blockquote{ margin:var(--space-4) 0; padding-left:var(--space-4); border-left:2px solid var(--tag-gilt-bd); }

.site-table{ overflow-x:auto; margin:var(--space-5) 0; padding:var(--space-1); }
.site-table table{ width:100%; min-width:560px; border-collapse:collapse; font-size:var(--text-body-sm); }
.site-table th{ text-align:left; font-size:var(--text-micro); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--text-muted); font-weight:var(--fw-semibold);
  padding:8px 12px; border-bottom:1.5px solid var(--border-strong); }
.site-table td{ padding:8px 12px; border-bottom:1px solid var(--border-hairline);
  color:var(--text-secondary); vertical-align:top; }
.site-table td:first-child{ white-space:nowrap; }
.site-value{ white-space:nowrap; }
.site-value code{ overflow-wrap:normal; }

.site-frame{ margin:var(--space-4) 0 var(--space-6); border:1px solid var(--border-hairline);
  border-radius:var(--radius-sm); background:var(--bg-page); overflow:hidden; }
.site-frame iframe{ display:block; width:100%; height:100%; border:0; }
.site-card{ margin:var(--space-8) 0; }
.site-card h3{ margin-bottom:var(--space-1); }
.site-card p{ margin:0; font-size:var(--text-body-sm); color:var(--text-muted); }

.site-swatch{ display:inline-block; width:28px; height:20px; margin-right:var(--space-2); vertical-align:middle;
  border:1px solid var(--border-hairline); border-radius:var(--radius-xs); }
.site-space{ display:inline-block; height:10px; min-width:1px; background:var(--brand); vertical-align:middle; }
.site-radius{ display:inline-block; width:32px; height:32px; vertical-align:middle;
  border:1.5px solid var(--border-strong); background:var(--bg-sunken); }
.site-shadow{ display:inline-block; padding:var(--space-3); background:var(--bg-page); border-radius:var(--radius-sm); }
.site-shadow > span{ display:block; width:48px; height:28px; background:var(--bg-surface); border-radius:var(--radius-sm); }
.site-type{ padding:var(--space-4) 0; border-bottom:1px solid var(--border-hairline); }
.site-type > p:first-child{ margin:0 0 var(--space-2); color:var(--text-primary); max-width:none; }
.site-article .site-type__meta{ margin:0; font-size:var(--text-caption); color:var(--text-muted); }

.site-list dt{ margin-top:var(--space-5); font-weight:var(--fw-semibold); }
.site-list dd{ margin:var(--space-1) 0 0; }

.site-footer{ margin-top:var(--space-16); padding-top:var(--space-6); border-top:1px solid var(--border-hairline); }

@media (max-width:1200px){
  .site-body--toc{ grid-template-columns:220px minmax(0,1fr); }
  .site-toc{ display:none; }
}
@media (max-width:900px){
  .site-header{ padding:0 var(--space-4); }
  .site-brand > span:last-child{ display:none; }
  .js .site-menu{ display:inline-flex; }
  .site-body, .site-body--toc{ display:block; padding:0 var(--space-4); }
  .site-nav{ position:static; max-height:none; border-right:0; border-bottom:1px solid var(--border-hairline);
    padding:var(--space-5) 0 0; }
  .js .site-nav:not(.site-nav--open){ display:none; }
}