/* Public documentation styles. Tokens only: no new colours, fonts, fills or radii.
   Rules, not boxes. Must stay self-contained; the deployment rejects imported stylesheets. */

*{box-sizing:border-box}
body.docs{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:var(--text);line-height:var(--leading);-webkit-text-size-adjust:100%}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--on-ink);
  padding:var(--space-3) var(--space-5);font-size:var(--text-small);z-index:2}
.skip:focus{left:0}

a{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px}
a:hover{color:var(--copper)}
a:focus-visible,[tabindex="-1"]:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset)}

.overline{font-family:var(--mono);font-size:var(--text-micro);text-transform:uppercase;
  letter-spacing:var(--overline-track);color:var(--muted);margin:0}

/* Header */
.docs-header{border-bottom:1px solid var(--rule)}
.docs-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  max-width:var(--header-max);margin:0 auto;padding:var(--space-5) var(--gutter)}
.docs-brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;
  font-family:var(--display);font-size:var(--text-prose);line-height:1.15}
.docs-brand svg{width:34px;height:34px;flex:none}
.docs-brand:hover{color:var(--ink)}
.brand-stop{color:var(--copper)}

/* Layout */
.docs-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:var(--column-gap);
  max-width:var(--page-max);margin:0 auto;padding:var(--space-7) var(--gutter) var(--space-9)}

/* Section navigation.
   The list is wrapped in a details element so narrow screens get a one-line switcher instead of
   seven stacked rows before any prose. Wide screens override the closed state below and show the
   list outright; if a browser ignores that override the switcher still opens, so it fails safe. */
.docs-sections{align-self:start;position:sticky;top:var(--space-5)}
.docs-sections>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:var(--space-3);min-height:52px;padding:var(--space-3) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.docs-sections>summary::-webkit-details-marker{display:none}
.docs-sections>summary .overline{flex:none}
.docs-sections-current{font-size:var(--text-small);flex:1 1 auto}
.docs-sections-mark{flex:0 0 12px;width:12px;height:12px;position:relative}
.docs-sections-mark::before,.docs-sections-mark::after{content:'';position:absolute;left:0;top:5px;
  width:12px;height:1px;background:var(--ink);transition:transform .2s var(--ease-settle)}
.docs-sections-mark::after{transform:rotate(90deg)}
.docs-sections[open]>summary{color:var(--copper)}
.docs-sections[open] .docs-sections-mark::after{transform:rotate(0)}
.docs-sections[open] .docs-sections-mark::before,
.docs-sections[open] .docs-sections-mark::after{background:var(--copper)}

.docs-nav{border-top:1px solid var(--rule)}
.docs-nav a{display:flex;gap:var(--space-3);align-items:baseline;padding:var(--space-3) 0;
  min-height:44px;border-bottom:1px solid var(--rule);font-size:var(--text-small);text-decoration:none}
.docs-nav a span{font-family:var(--mono);font-size:var(--text-micro);color:var(--muted);flex:none}
.docs-nav a[aria-current="page"]{color:var(--copper)}
.docs-nav a[aria-current="page"] span{color:var(--copper)}

/* Page head */
main{min-width:0}
main h1{font-family:var(--display);font-weight:400;font-size:var(--display-4);
  line-height:var(--display-leading);letter-spacing:var(--display-track);margin:0 0 var(--space-4)}
.docs-lead{max-width:60ch;margin:0 0 var(--space-6);color:var(--muted);font-size:var(--text-prose);
  line-height:var(--leading-prose)}

/* On this page */
.docs-toc{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:var(--space-4) 0;margin:0 0 var(--space-6);display:flex;flex-wrap:wrap;
  gap:var(--space-2) var(--space-5);align-items:baseline}
.docs-toc .overline{flex:none;width:100%;margin-bottom:var(--space-1)}
.docs-toc a{font-size:var(--text-small);text-decoration:none;color:var(--muted);
  border-bottom:1px solid transparent;transition:color var(--t-hover) var(--ease-settle)}
.docs-toc a:hover{color:var(--copper);border-bottom-color:var(--rule)}

/* Prose */
.docs-prose{max-width:68ch;font-size:var(--text-prose);line-height:var(--leading-prose)}
.docs-prose h2{font-family:var(--display);font-weight:400;font-size:var(--display-4);
  line-height:1.15;letter-spacing:var(--display-track);margin:var(--space-8) 0 var(--space-4);
  padding-top:var(--space-4);border-top:1px solid var(--rule)}
.docs-prose h3{font-family:var(--body);font-weight:500;font-size:var(--text);
  margin:var(--space-6) 0 var(--space-3)}
.docs-prose h4{font-family:var(--mono);font-weight:400;font-size:var(--text-micro);
  text-transform:uppercase;letter-spacing:var(--overline-track);color:var(--muted);
  margin:var(--space-5) 0 var(--space-2)}
.docs-prose p{margin:0 0 var(--space-4)}
.docs-prose ul,.docs-prose ol{margin:0 0 var(--space-4);padding-left:var(--space-5)}
.docs-prose li{margin-bottom:var(--space-2)}
.docs-prose li::marker{color:var(--muted);font-size:var(--text-small)}
.docs-prose strong{font-weight:500}
.docs-prose hr{border:0;border-top:1px solid var(--rule);margin:var(--space-7) 0}
.docs-prose a{text-decoration-color:var(--rule)}

.docs-prose code{font-family:var(--mono);font-size:.92em;background:var(--paper-deep);
  padding:1px 4px;font-variant-ligatures:none}
.docs-prose pre{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--paper-deep);padding:var(--space-4);margin:0 0 var(--space-5);overflow-x:auto}
.docs-prose pre code{background:none;padding:0;font-size:var(--text-fine);line-height:1.7}

.docs-prose blockquote{margin:0 0 var(--space-5);padding-left:var(--space-4);
  border-left:1px solid var(--copper);color:var(--muted)}
.docs-prose blockquote p{margin:0}

/* Tables: hairline rows, no frame, no fill */
.docs-prose table{width:100%;border-collapse:collapse;margin:0 0 var(--space-5);
  font-size:var(--text-small);line-height:1.55}
.docs-prose thead th{font-family:var(--mono);font-weight:400;font-size:var(--text-micro);
  text-transform:uppercase;letter-spacing:var(--overline-track);color:var(--muted);
  text-align:left;padding:0 var(--space-3) var(--space-2) 0;border-bottom:1px solid var(--rule-strong)}
.docs-prose tbody td{padding:var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom:1px solid var(--rule);vertical-align:top}
.docs-prose th:last-child,.docs-prose td:last-child{padding-right:0}
.docs-prose .num{text-align:right;font-variant-numeric:tabular-nums}

/* Footer */
.docs-footer{border-top:1px solid var(--rule)}
.docs-footer p{max-width:var(--page-max);margin:0 auto;padding:var(--space-5) var(--gutter);
  color:var(--muted);font-size:var(--text-fine)}

@media (min-width:981px){
  .docs-sections>summary{display:none}
  .docs-sections>.docs-nav{display:block}
  .docs-sections::details-content{content-visibility:visible;block-size:auto;opacity:1}
}
@media (max-width:980px){
  .docs-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-5);padding-top:var(--space-5)}
  .docs-sections{position:static}
  .docs-nav{border-top:0;padding-bottom:var(--space-3)}
  /* Scrolling is the table of contents on a phone; a second link list is not. */
  .docs-toc{display:none}
}
@media (max-width:610px){
  .docs-header{padding-top:var(--space-4);padding-bottom:var(--space-4)}
  .docs-brand svg{width:30px;height:30px}
  main h1{font-size:26px}
  .docs-prose h2{font-size:24px;margin-top:var(--space-7)}
  .docs-prose table{font-size:var(--text-fine)}
  .docs-prose tbody td{padding-right:var(--space-2)}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0s!important}
}