/* HareBox docs pages only (website/docs/, generated by tools/website_docs.py). Hand-edited. The build's head block
   links it after site.css on docs pages, so marketing pages never download it. Colours come from tokens.css. */

/* ── Shell: sidebar, article, contents ───────────────────────────────────── */
.docs-shell { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 264px minmax(0, 1fr) 220px; gap: clamp(24px, 3vw, 48px); align-items: start; }
.docs-shell-home { grid-template-columns: 264px minmax(0, 1fr); }
.docs-shell > * { min-width: 0; }
body.docs .site-footer { margin-top: 0; }

/* A reading-progress line under the header, driven by scroll where the browser supports it. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body.docs .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(0);
      background: linear-gradient(90deg, var(--accent), var(--brand-ear-pink)); animation: docs-progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes docs-progress { to { transform: scaleX(1); } }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.docs-side { position: sticky; top: calc(var(--header-h) + 10px); max-height: calc(100vh - var(--header-h) - 26px); overflow-y: auto; padding: 24px 4px 32px 0; font-size: .9rem; scrollbar-width: thin; overscroll-behavior: contain; }
.docs-home { display: block; font-weight: 650; color: var(--text); text-decoration: none; padding: 6px 10px; border-radius: 8px; margin-bottom: 10px; }
.docs-home:hover, .docs-home[aria-current="page"] { background: var(--surface); }
.docs-search { position: relative; margin-bottom: 14px; }
html:not(.js) .docs-search { display: none; } /* search needs JavaScript; without it the page list is the way in */
.docs-search input { width: 100%; font: 500 .9rem var(--sans); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 36px 9px 34px; min-height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8293' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; background-size: 15px;
  transition: border-color var(--dur-feedback), box-shadow var(--dur-feedback); }
.docs-search input::-webkit-search-cancel-button { display: none; }
.docs-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.docs-keys { position: absolute; right: 9px; top: 9px; pointer-events: none; color: var(--muted); }
.docs-search input:focus ~ .docs-keys { opacity: 0; }
.docs-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 60vh; overflow-y: auto; }
.docs-results a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.docs-results a:hover, .docs-results a:focus { background: var(--tint); outline: none; box-shadow: inset 3px 0 0 var(--accent); }
.docs-results small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.docs-results .none { padding: 10px; color: var(--muted); }
.docs-group { margin-bottom: 4px; }
.docs-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-weight: 650; font-size: .82rem; letter-spacing: .02em; color: var(--text); }
.docs-group summary::-webkit-details-marker { display: none; }
.docs-group summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(-45deg); transition: transform var(--dur-panel) var(--ease); }
.docs-group[open] summary::after { transform: rotate(45deg); }
.docs-group summary .icon { color: var(--accent); }
.docs-group summary:hover { background: var(--surface); }
.docs-group ul { list-style: none; margin: 2px 0 10px 17px; padding: 0 0 0 14px; border-left: 1px solid var(--line); }
.docs-group li a { display: block; padding: 5px 10px; color: var(--muted); text-decoration: none; border-radius: 6px; line-height: 1.4; transition: color var(--dur-feedback), background var(--dur-feedback); }
.docs-group li a:hover { color: var(--text); background: var(--surface); }
.docs-group li a[aria-current="page"] { color: var(--accent); font-weight: 620; background: var(--tint); box-shadow: -15px 0 0 -13px var(--accent); }

/* ── Article ─────────────────────────────────────────────────────────────── */
.docs-main { padding: 28px 0 56px; }
.docs-main > h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 10px; }
.crumbs-docs { color: var(--muted); margin-bottom: 14px; }
.crumbs-docs a { color: var(--muted); }
.crumbs-docs [aria-current="page"] { color: var(--text); }
.doc-status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .86rem; color: var(--muted); margin: 6px 0 24px; }
.lede-docs { font-size: 1.12rem; color: var(--muted); max-width: 46em; margin: 8px 0 26px; }
.docs-h2 { font-size: 1.4rem; margin: 40px 0 16px; }
.docs-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.quick { position: relative; display: grid; gap: 4px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); color: var(--text); text-decoration: none; box-shadow: var(--shadow);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--raised)), var(--raised) 60%); transition: transform var(--dur-panel) var(--ease), border-color var(--dur-panel); }
.quick:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.quick span { color: var(--muted); font-size: .88rem; }
.docs-shell-home .uc-grid { margin-bottom: 28px; }
.doc-body { max-width: 52em; }
.doc-body > * + * { margin-top: 16px; }
.doc-body h2 { font-size: 1.45rem; padding-top: 6px; scroll-margin-top: calc(var(--header-h) + 24px); }
.doc-body h3 { font-size: 1.12rem; scroll-margin-top: calc(var(--header-h) + 24px); }
.doc-body > .hd { margin-top: 44px; }
.doc-body > .hd:has(h3) { margin-top: 28px; }
.doc-body > .hd:first-child { margin-top: 0; }
.doc-body ul, .doc-body ol { padding-left: 1.3em; }
.doc-body li + li { margin-top: 6px; }
.doc-body li::marker { color: var(--accent); }
.doc-body pre.code { margin-top: 14px; }
.doc-body .table-wrap { margin-top: 14px; box-shadow: none; }
.doc-body .table { font-size: .9rem; }
.doc-body .table td, .doc-body .table th { padding: 10px 14px; }
.doc-body .table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.doc-body .table tr:target { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.doc-body a.anchor { text-decoration: none; }
.doc-body img { border-radius: 12px; }
.doc-callout { display: block; }
.doc-callout p + p { margin-top: 6px; }

/* Heading links sit beside the heading, shown on hover or focus. */
.hd { position: relative; display: flex; align-items: baseline; gap: 8px; }
.h-anchor { flex: none; width: 1.1em; text-align: center; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity var(--dur-feedback), color var(--dur-feedback); border-radius: 6px; }
.h-anchor::before { content: "#"; font: 600 1rem var(--mono); }
.hd:hover .h-anchor, .h-anchor:focus-visible { opacity: 1; }
.h-anchor:hover { color: var(--accent); }
@media (hover: none) { .h-anchor { opacity: .5; } }

/* ── Previous, next, page meta ───────────────────────────────────────────── */
.docs-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line); }
.pn { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 620; transition: border-color var(--dur-feedback), color var(--dur-feedback), transform var(--dur-panel) var(--ease); }
.pn small { color: var(--muted); font-weight: 500; font-size: .78rem; }
.pn.prev small::before { content: "← " / ""; }
.pn.next { text-align: right; }
.pn.next small::after { content: " →" / ""; }
.pn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.doc-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; font-size: .84rem; color: var(--muted); }
.doc-meta a { color: var(--muted); }

/* ── On this page ────────────────────────────────────────────────────────── */
.docs-toc { position: sticky; top: calc(var(--header-h) + 10px); padding: 32px 0; font-size: .84rem; max-height: calc(100vh - var(--header-h) - 26px); overflow-y: auto; scrollbar-width: thin; }
.docs-toc p { font-weight: 650; color: var(--text); margin-bottom: 10px; }
.docs-toc ul { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--line); }
.docs-toc li { margin: 6px 0; }
.docs-toc .toc-3 { padding-left: 12px; }
.docs-toc a { position: relative; display: block; color: var(--muted); text-decoration: none; transition: color var(--dur-feedback); }
.docs-toc a:hover, .docs-toc a.on { color: var(--accent); }
.docs-toc a.on::before { content: ""; position: absolute; left: -13px; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--accent); }

/* ── Small screens ───────────────────────────────────────────────────────── */
.docs-browse > summary { display: none; }
@media (max-width: 1180px) { .docs-shell { grid-template-columns: 240px minmax(0, 1fr); } .docs-toc { display: none; } }
@media (max-width: 860px) {
  .docs-shell, .docs-shell-home { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs-side { position: static; max-height: none; padding: 16px 0 0; border-bottom: 1px solid var(--line); }
  .docs-pn { grid-template-columns: 1fr; }
  .docs-browse > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 650; }
  .docs-browse > summary::-webkit-details-marker { display: none; }
  .docs-browse > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted); transform: rotate(45deg); }
  .docs-browse[open] > summary::after { transform: rotate(-135deg); }
  .docs-keys { display: none; }
}
@media print { .docs-side, .docs-toc, .docs-pn, .doc-meta, .h-anchor { display: none !important; } .docs-shell { display: block; } }