/* The documentation pages. Two columns on a wide screen, one on a narrow one; the prose is held to the kit's
   type steps and the chrome's aliases, so a docs page and a model page are recognisably the same site.
   Loaded after styles.css, only by /docs/. Checked by scripts/lint-tokens.mjs. */

/* The kit accent is under AA on the warm surfaces at label size; warmed toward the foreground it reads. */
:root { --docs-accent: color-mix(in srgb, var(--hh-accent) 80%, var(--hh-text)); }

.docs {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-8) var(--hh-gutter) var(--space-16);
}

/* ---- the side menu */
.docs-nav { position: sticky; top: calc(var(--hh-control) + var(--space-8)); font-size: var(--text-sm); }
.docs-nav h2 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--hh-text-faint); }
.docs-nav h2:first-child { margin-top: 0; }
.docs-nav ul { list-style: none; margin: 0; padding: 0; }
.docs-nav a { display: block; padding: var(--space-1) var(--space-3); margin-left: calc(-1 * var(--space-3)); border-radius: var(--radius-sm); color: var(--hh-text-dim); text-decoration: none; line-height: var(--hh-leading); transition: color var(--hh-ease), background var(--hh-ease); }
.docs-nav a:hover { color: var(--hh-text); background: var(--hh-wash); }
.docs-nav a[aria-current="page"] { color: var(--docs-accent); background: var(--hh-wash); }

/* ---- the page */
.docs-page { min-width: 0; max-width: 46rem; font-size: var(--text-base); line-height: 1.65; color: var(--hh-text); }
.docs-head { margin-bottom: var(--space-8); position: relative; }
.docs-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.docs-group { margin: 0 0 var(--space-2); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--hh-text-faint); }
.docs-page h1 { margin: 0; font-size: var(--text-4xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); line-height: 1.1; }
.docs-lead { margin: var(--space-3) 0 0; font-size: var(--text-lg); color: var(--hh-text-dim); }
.docs-twin { position: absolute; top: 0; right: 0; font-size: var(--text-xs); color: var(--hh-text-faint); text-decoration: none; border: 1px solid var(--hh-line); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); }
.docs-twin:hover { color: var(--hh-text); border-color: var(--hh-line-strong); }

.docs-page h2 { margin: var(--space-12) 0 var(--space-4); font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); line-height: 1.2; }
.docs-page h3 { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-lg); font-weight: var(--weight-medium); }
.docs-page p, .docs-page ul, .docs-page ol { margin: 0 0 var(--space-4); }
.docs-page ul, .docs-page ol { padding-left: var(--space-6); }
.docs-page li { margin-bottom: var(--space-1); }
.docs-page a { color: var(--hh-text); text-decoration: underline; text-decoration-color: var(--hh-line-strong); text-underline-offset: 0.2em; }
.docs-page a:hover { text-decoration-color: var(--hh-text); }
.docs-page strong { font-weight: var(--weight-medium); }

.docs-page code { font-family: var(--font-mono); font-size: inherit; }
.docs-page :not(pre) > code { padding: 0 var(--space-1); background: var(--hh-fill); border-radius: var(--radius-sm); }
.docs-page pre { margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-5); overflow-x: auto; background: var(--hh-surface); border: 1px solid var(--hh-line); border-radius: var(--radius-lg); font-size: var(--text-sm); line-height: 1.55; }
.docs-page pre code { font-size: inherit; padding: 0; background: none; }
.docs-page pre + pre { margin-top: calc(-1 * var(--space-2)); border-top-left-radius: 0; border-top-right-radius: 0; color: var(--hh-text-dim); }
.docs-page pre:has(+ pre) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.docs-page .scroll { overflow-x: auto; margin: 0 0 var(--space-6); padding: 0; }
.docs-page table { width: 100%; margin: 0; font-family: var(--font-sans); border-collapse: collapse; font-size: var(--text-sm); line-height: var(--hh-leading); }
/* styles.css sets td for the files table: mono, one line, field-height. Prose tables are none of those. */
.docs-page th, .docs-page td { height: auto; padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--hh-line); font-family: var(--font-sans); white-space: normal; }
.docs-page th { font-weight: var(--weight-medium); color: var(--hh-text-dim); }
.docs-page td:first-child { white-space: nowrap; }
.docs-page tr:last-child td { border-bottom: 0; }
.docs-page blockquote { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-4); border-left: 2px solid var(--hh-line-strong); color: var(--hh-text-dim); }
.docs-page hr { border: 0; border-top: 1px solid var(--hh-line); margin: var(--space-8) 0; }

/* ---- the API reference */
.api-group { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--hh-line); }
.api-group > h2 { margin-top: 0; }
.api-lead { color: var(--hh-text-dim); }
.api-op { margin: var(--space-8) 0; }
.api-op h3 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-2); font-size: var(--text-base); }
.api-op h3 code { font-size: var(--text-base); background: none; padding: 0; }
.method { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); padding: 0 var(--space-2); line-height: var(--hh-tag); border-radius: var(--radius-sm); border: 1px solid var(--hh-line-strong); color: var(--hh-text-dim); }
.method.get { color: var(--hh-ok); border-color: var(--hh-ok); }
.method.post, .method.patch, .method.put { color: var(--docs-accent); border-color: var(--docs-accent); }
.method.delete { color: var(--hh-bad); border-color: var(--hh-bad); }
.api-summary { font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.api-desc { color: var(--hh-text-dim); font-size: var(--text-sm); }
.api-desc p { margin-bottom: var(--space-2); }
.api-auth, .api-body { font-size: var(--text-sm); color: var(--hh-text-dim); }
.api-op .opt { color: var(--hh-text-faint); font-size: var(--text-xs); }
.api-op .types { color: var(--hh-text-faint); font-family: var(--font-mono); font-size: var(--text-xs); }
.api-responses { margin-bottom: var(--space-4); }

/* ---- previous / next */
.docs-foot { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--hh-line); }
.docs-foot a { display: flex; flex-direction: column; gap: var(--space-1); text-decoration: none; color: var(--hh-text); font-weight: var(--weight-medium); }
.docs-foot a span { font-size: var(--text-xs); color: var(--hh-text-faint); font-weight: var(--weight-normal); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.docs-foot .next { text-align: right; margin-left: auto; }

/* ---- one column */
@media (max-width: 56rem) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .docs-nav { position: static; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--hh-line); }
  .docs-nav h2 { display: none; }
  .docs-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
  .docs-nav a { margin-left: 0; }
  .docs-twin { position: static; display: inline-block; margin-top: var(--space-3); }
  .docs-page td:first-child { white-space: normal; }
}