/* ==========================================================================
   Page: Docs (site/docs.html)
   App-like three-column layout with its own header. Colours come from the
   semantic tokens, so the Paper / Terminal switch is just
   <html data-theme="term"> (set by docs.js).
   Columns: ≥1100px nav · article · aside | 760–1099px nav · article | <760px article
   ========================================================================== */

/* Page tokens ------------------------------------------------------------- */
:root {
  --docs-header-height: 60px;
  --docs-code-bg: var(--surface);    /* code block background */
  --docs-accent: var(--ink);         /* active tab line, CTA border */
}

[data-theme="term"] {
  --docs-code-bg: #0F1114;
  --docs-accent: var(--action);
}

/* Focus ring is lime in both themes on this page */
*:focus-visible {
  outline-color: var(--lime-400);
}

/* Links take the colour of their text (e.g. muted meta lines) */
a,
a:hover,
[data-theme="term"] a:hover {
  color: inherit;
}

/* Header ------------------------------------------------------------------ */
.docs-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: calc(var(--docs-header-height) + 1px);   /* + bottom border */
  padding: 0 20px;
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
}

.docs-header__start,
.docs-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.docs-header__actions {
  gap: 8px;
}

.docs-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}

.docs-brand__name {
  font: 600 20px/1 var(--font-serif);
}

.docs-brand__suffix {
  font: 500 12px/1 var(--font-mono);
  color: var(--ink-3);
}

.docs-version {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: 400 12px/1 var(--font-mono);
}

.docs-search-trigger {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink-3);
  font: 400 14px/1 var(--font-sans);
}

.docs-search-trigger .kbd {
  font-size: 11px;
}

.docs-header__button {
  flex: none;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font: 500 12px/1 var(--font-mono);
  white-space: nowrap;
}

.docs-header__button--ask {
  padding: 0 12px;
  border-color: var(--ink);
  font: 500 13px/1 var(--font-sans);
}

/* <a> with 32px content + 1px border = 34px, as in the original */
.docs-header__cta {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--docs-accent);
  border-radius: var(--radius-md);
  background: var(--action);
  color: var(--on-action);
  font: 600 13px/1 var(--font-sans);
  text-decoration: none;
}

/* (beats the [data-theme="term"] a:hover rule above) */
.docs-header .docs-header__cta:hover {
  color: var(--on-action);
}

/* Deprecation banner ------------------------------------------------------- */
.docs-deprecation {
  padding: 10px 20px;
  background: var(--warning-tint);
  color: var(--warning);
  font: 400 14px/1.4 var(--font-sans);
}

.docs-deprecation a {
  font-weight: 600;
}

/* Layout ------------------------------------------------------------------ */
.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.docs-nav,
.docs-aside {
  display: none;
  position: sticky;
  top: var(--docs-header-height);
  height: calc(100vh - var(--docs-header-height));
  overflow: auto;
  flex-direction: column;
}

@media (min-width: 760px) {
  .docs-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .docs-nav {
    display: flex;
  }
}

@media (min-width: 1100px) {
  .docs-layout {
    grid-template-columns: 260px minmax(0, 1fr) 300px;
  }

  .docs-aside {
    display: flex;
  }
}

/* Left nav ---------------------------------------------------------------- */
.docs-nav {
  gap: 18px;
  padding: 20px 12px;
  border-right: 1px solid var(--hairline);
}

.docs-nav__group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.docs-nav__heading {
  padding: 0 8px 6px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .06em;
  color: var(--ink-3);
}

.docs-nav__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: 400 14px/1.2 var(--font-sans);
  text-align: left;
}

.docs-nav__item[aria-current="page"] {
  background: var(--surface-sunken);
  font-weight: 600;
}

.docs-nav__method {
  font: 500 10px/1 var(--font-mono);
  color: var(--success);
}

.docs-nav__method--get {
  color: var(--machine-ink);
}

/* Article ------------------------------------------------------------------ */
.docs-main {
  min-width: 0;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px) 96px;
}

.docs-content,
.docs-article {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.docs-content {
  max-width: 760px;
  margin: 0 auto;
}

.docs-article[hidden] {
  display: none;
}

.docs-crumb {
  font: 400 12px/1 var(--font-mono);
  color: var(--ink-3);
}

.docs-title {
  font: 400 clamp(36px, 4.4vw, 52px)/1.08 var(--font-serif);
  letter-spacing: -.02em;
}

.docs-lead {
  font: 400 18px/1.65 var(--font-sans);
  color: var(--ink-2);
}

.docs-lead--ref {
  font-size: 17px;
}

.docs-h2 {
  margin-top: 16px;
  font: 600 22px/1.3 var(--font-sans);
}

.docs-h2--ref {
  margin-top: 8px;
  font-size: 20px;
}

.docs-text {
  font: 400 17px/1.7 var(--font-sans);
}

.docs-code {
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  font: 400 15px var(--font-mono);
}

.docs-code--plain {
  padding: 0;
  background: none;
}

.docs-note {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-control);
  background: var(--machine-tint);
  font: 400 15px/1.55 var(--font-sans);
}

.docs-note__label {
  flex: none;
  font: 600 13px/1.6 var(--font-mono);
  color: var(--machine-ink);
}

/* Code blocks -------------------------------------------------------------- */
.code-block {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--docs-code-bg);
}

.code-block__bar {
  display: flex;
  align-items: center;
  height: 39px;              /* 38px + border */
  padding: 0 14px;
  border-bottom: 1px solid var(--hairline);
  font: 500 12px/1 var(--font-mono);
  color: var(--ink-3);
}

.code-block__bar--tabs {
  justify-content: space-between;
  height: auto;
  padding: 0 6px 0 2px;
}

.code-tabs {
  display: flex;
}

.code-tabs__tab {
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-3);
  font: 500 12px/1 var(--font-mono);
}

.code-tabs__tab[aria-selected="true"] {
  border-bottom-color: var(--docs-accent);
  color: var(--ink);
}

.code-block__copy {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: 400 11px/1 var(--font-mono);
}

.code-block__body {
  overflow: auto;
  padding: 14px 16px;
  font: 400 14px/1.7 var(--font-mono);
}

.code-block__body code {
  font: inherit;
}

.code-block__body--small {
  font-size: 13px;
}

/* Numbered lines: one .code-line per line, numbers via CSS counter */
.code-block__body--lines {
  padding: 14px 0;
  white-space: normal;
}

.code-block__body--lines code {
  display: block;
  counter-reset: code-line;
}

.code-line {
  display: flex;
  padding: 0 16px;
  white-space: pre;
  counter-increment: code-line;
}

.code-line::before {
  content: counter(code-line);
  flex: none;
  width: 26px;
  color: var(--ink-3);
}

.code-line--highlight {
  background: var(--machine-tint);
}

/* API reference ------------------------------------------------------------ */
.endpoint-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.endpoint-head__method {
  padding: 5px 8px;
  border-radius: var(--radius-xs);
  background: var(--green-100);
  color: var(--green-700);
  font: 600 13px/1 var(--font-mono);
}

.endpoint-head__path {
  font: 500 clamp(22px, 2.6vw, 28px)/1.2 var(--font-mono);
}

.param-list,
.error-list {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.param-list__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.param-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.param-list__name {
  font: 500 14px/1 var(--font-mono);
}

.param-list__type {
  font: 400 12px/1 var(--font-mono);
  color: var(--ink-3);
}

.param-list__req {
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-3);
}

.param-list__req--required {
  color: var(--warning);
}

.param-list__desc,
.error-list__desc {
  margin: 0;
  font: 400 15px/1.55 var(--font-sans);
  color: var(--ink-2);
}

.error-list__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.error-list__code {
  font: 500 14px/1.5 var(--font-mono);
}

.error-list__desc {
  line-height: 1.5;
}

/* Feedback ---------------------------------------------------------------- */
.docs-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
}

.docs-feedback__label {
  font: 400 15px/1 var(--font-sans);
  color: var(--ink-2);
}

/* The state wrappers don't take part in the layout */
.docs-feedback__state {
  display: contents;
}

.docs-feedback__button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: 500 13px/1 var(--font-sans);
}

.docs-feedback__button--send {
  height: 34px;
  border-color: var(--ink);
}

.docs-feedback__input {
  flex: 1;
  min-width: 200px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: 400 14px/1 var(--font-sans);
}

.docs-feedback__thanks {
  font: 400 14px/1 var(--font-sans);
  color: var(--success);
}

.docs-feedback__edit {
  margin-left: auto;
  font: 400 13px/1 var(--font-mono);
  color: var(--ink-3);
}

/* Right aside ------------------------------------------------------------- */
.docs-aside {
  border-left: 1px solid var(--hairline);
}

/* On this page */
.docs-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px 16px;
}

.docs-toc[hidden] {
  display: none;
}

.docs-toc__heading {
  padding-bottom: 10px;
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-3);
}

.docs-toc__list {
  display: contents;
}

.docs-toc__link {
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--hairline);
  font: 400 14px/1.3 var(--font-sans);
  text-decoration: none;
}

.docs-toc__link.is-active {
  border-left-color: var(--ink);
  font-weight: 600;
}

/* Ask the docs panel */
.ask-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ask-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
}

.ask-panel__title {
  font: 600 14px/1 var(--font-sans);
}

.ask-panel__close {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
}

.ask-panel__disclaimer {
  padding: 10px 16px;
  border-bottom: 1px solid var(--hairline);
  font: 400 12px/1.45 var(--font-mono);
  color: var(--ink-3);
}

.ask-panel__log {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.ask-panel__suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ask-panel__suggestion {
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: 400 14px/1.35 var(--font-sans);
  text-align: left;
}

.ask-panel__thread {
  display: contents;
}

.ask-panel__question {
  font: 400 17px/1.35 var(--font-serif);
}

.ask-answer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-control);
  background: var(--machine-tint);
}

.ask-answer__text {
  font: 400 15px/1.6 var(--font-sans);
}

.ask-answer__caret {
  width: 7px;
  height: 1em;
  margin-left: 0;
}

.ask-answer__footer {
  display: contents;
}

.ask-answer__cites {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ask-answer__cite {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: 400 13px/1.3 var(--font-sans);
  text-align: left;
}

.ask-answer__cite-n {
  font: 500 11px/1.4 var(--font-mono);
  color: var(--machine-ink);
}

.ask-answer__meta {
  font: 400 11px/1.4 var(--font-mono);
  color: var(--ink-3);
}

.ask-panel__composer {
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
}

.ask-panel__input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: 400 14px/1 var(--font-sans);
}

/* Search dialog (shared command-palette look, docs-specific content) ------- */
.docs-search {
  background: rgba(0, 0, 0, .4);
}

.docs-search .command-palette__dialog {
  color: var(--ink);
}

.docs-search__input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--hairline);
}

.docs-search__item {
  width: 100%;
  align-items: stretch;
  border: 0;
  background: transparent;
  text-align: left;
}

.docs-search__item.is-active {
  background: var(--surface-sunken);
}

.docs-search__ask {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-top: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font: 500 14px/1.3 var(--font-sans);
  text-align: left;
}

/* Mobile: header wraps to two rows so nothing overflows -------------------- */
@media (max-width: 759.98px) {
  .docs-header {
    flex-wrap: wrap;
    gap: 10px 8px;
    height: auto;
    padding: 10px 20px;
  }

  .docs-header__start {
    flex-basis: 100%;
  }

  .docs-search-trigger {
    min-width: 0;
    white-space: nowrap;
  }

  /* No keyboard hint on touch-sized screens */
  .docs-search-trigger .kbd {
    display: none;
  }
}

/* Get API key only fits in the wide layout */
@media (max-width: 1099.98px) {
  .docs-header__cta {
    display: none;
  }
}