/* views/ai.css: API quickstart (#/ai) and API reference (#/developers).
   Tokens only. Classes are prefixed .ai- or .docs-. Shared components are extended, never redefined.
   The look: calm developer docs. One reading column, thin rules, method badges, tables that scroll
   inside their own wrapper, code blocks with a header and a copy button. */

/* ---------- shared by both views ---------- */
.ai-page,
.docs-page { min-width: 0; }

.ai-page code,
.docs-page code { overflow-wrap: anywhere; }

/* Inline code: a quiet chip instead of an outlined box. */
.ai-page :not(pre) > code:not(.endpoint__path),
.docs-page :not(pre) > code:not(.endpoint__path) {
  padding: .05em .3em;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-raised);
  font-size: .9em;
}
.ai-page a > code,
.docs-page a > code { color: inherit; }

.ai-page .snippet,
.docs-page .snippet { min-width: 0; max-width: 100%; margin-block: var(--space-4) var(--space-5); }

.ai-page .codeblock,
.docs-page .codeblock { max-width: 100%; overflow-x: auto; font-size: .8125rem; line-height: 1.6; }

.ai-snippet-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-4);
}
.ai-page .snippet__title,
.docs-page .snippet__title { font-family: var(--font-mono); font-size: .8125rem; overflow-wrap: anywhere; }

.ai-page .table-wrap,
.docs-page .table-wrap { max-width: 100%; overflow-x: auto; margin-block: var(--space-4) var(--space-5); }

.ai-page .table-wrap:focus-visible,
.docs-page .table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.ai-page .table,
.docs-page .table { font-size: .9375rem; }
.ai-page .table th,
.docs-page .table th { text-align: left; }
.ai-page .table tbody th,
.docs-page .table tbody th { font-weight: 400; }

/* Names in the first column never break in the middle of a word. */
.docs-page .table tbody th > code { overflow-wrap: normal; white-space: nowrap; font-weight: 600; }

.ai-keyslot--filled {
  background: var(--marker);
  color: var(--ink);
  padding: 0 2px;
}

/* Fallback for the shared endpoint line. Zero specificity, so styles.css wins where it defines it. */
:where(.ai-page, .docs-page) :where(.endpoint) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--space-2);
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: .875rem;
}
:where(.ai-page, .docs-page) :where(.endpoint__method) {
  flex: none;
  min-width: 3.4em;
  padding: 1px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--ink-soft);
  color: var(--paper-raised);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}
:where(.ai-page, .docs-page) :where(.endpoint__method--get) { background: var(--ok); }
:where(.ai-page, .docs-page) :where(.endpoint__method--post) { background: var(--machine); }
:where(.ai-page, .docs-page) :where(.endpoint__method--delete) { background: var(--stamp); }
:where(.ai-page, .docs-page) :where(.endpoint__path) { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
:where(.ai-page, .docs-page) :where(.endpoint__note) { color: var(--ink-soft); font-size: .8125rem; }

/* ---------- #/ai : quickstart ---------- */
.ai-page > .ai-quick { padding-top: var(--space-4); }

.ai-flow { max-width: 52rem; min-width: 0; }
.ai-flow p { max-width: var(--measure); }
.ai-flow h2 { font-size: clamp(1.45rem, 2.4vw, 1.75rem); margin: 0 0 var(--space-3); }

/* base URL, authentication, format */
.ai-facts,
.docs-facts {
  margin: var(--space-5) 0 var(--space-6);
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper-raised);
  font-size: .9375rem;
}
.ai-facts > div,
.docs-facts > div {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
}
.ai-facts > div + div,
.docs-facts > div + div { border-top: 1px solid var(--rule); }
.ai-facts dt,
.docs-facts dt { margin: 0; font-weight: 700; color: var(--ink-soft); }
.ai-facts dd,
.docs-facts dd { margin: 0; min-width: 0; }
.ai-facts > div { align-items: center; padding-block: var(--space-1); min-height: 52px; }
.ai-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }

.ai-facts__copy {
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--machine);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
}
.ai-facts__copy:hover { background: var(--machine-tint); color: var(--machine-deep); }
.ai-facts__copy:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* four numbered steps */
.ai-step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--rule);
}
.ai-step__main { min-width: 0; }
.ai-step__main > :last-child { margin-bottom: 0; }

.ai-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper-raised);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}
.ai-step h2 { padding-top: .3rem; }
.ai-step__aside { margin-top: var(--space-5); font-size: .9375rem; color: var(--ink-soft); }

/* the key form */
.ai-key { min-width: 0; margin-top: var(--space-4); }
.ai-key__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3) var(--space-4);
}
.ai-key__form .field { flex: 1 1 16rem; max-width: 24rem; margin: 0; }
.ai-key__form .button { flex: none; margin-top: calc(1.65em + var(--space-1)); }

.ai-key__result:empty,
.ai-key__list:empty { display: none; }
.ai-key__result { margin-top: var(--space-5); }
.ai-key__result > .notice { margin: 0; }
.ai-key__result h3 { margin-top: 0; }

.ai-key__value {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-all;
  font-size: .9375rem;
}

.ai-key__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.ai-key__state { margin: var(--space-3) 0 0; font-size: .9375rem; color: var(--ink); }

.ai-key__list { margin-top: var(--space-6); }
.ai-key__list h3 { margin: 0 0 var(--space-2); font-family: var(--font-text); font-size: 1.05rem; letter-spacing: 0; }
.ai-key__list p { margin-bottom: var(--space-2); font-size: .9375rem; color: var(--ink-soft); }

.ai-keylist { list-style: none; margin: 0; padding: 0; max-width: none; }
.ai-keylist > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
}
.ai-keylist__name { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.ai-keylist__name strong { display: block; }
.ai-keylist__name small { display: block; font-size: .875rem; color: var(--ink-soft); }
.ai-keylist [data-armed="yes"] { border-color: var(--stamp-deep); color: var(--stamp-deep); }

/* code samples, one tab per language */
.ai-tabs { min-width: 0; margin-block: var(--space-4) var(--space-5); }

.ai-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  border-bottom: 1px solid var(--rule);
}

.ai-tab {
  min-height: 44px;
  min-width: 64px;
  margin-bottom: -1px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-text);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}
.ai-tab:hover { color: var(--ink); border-bottom-color: var(--rule); }
.ai-tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--machine);
}
.ai-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

.ai-tabpanel { min-width: 0; padding-top: var(--space-3); }
.ai-tabpanel[hidden] { display: none; }
.ai-page .ai-tabpanel > .snippet { margin-block: 0; }

/* Prose for a model: let it wrap instead of scrolling sideways. */
.ai-page #ai-prompt-text { white-space: pre-wrap; overflow-wrap: break-word; }

/* all endpoints, OpenAPI and Postman */
.ai-all {
  min-width: 0;
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
.ai-all h2 { font-size: clamp(1.45rem, 2.4vw, 1.75rem); margin: 0 0 var(--space-3); }
.ai-flow + .ai-all { margin-top: 0; }

.ai-page .ai-endpoints { min-width: 40rem; }
.ai-endpoints tbody th { white-space: nowrap; }
.ai-endpoints td:last-child { white-space: nowrap; }
.ai-page .ai-endpoints tbody .ai-endpoints__group th {
  padding-block: var(--space-2);
  background: var(--paper-deep);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 700;
  border-bottom: 1px solid var(--rule);
}
.ai-endpoints tbody + tbody .ai-endpoints__group th { border-top: 1px solid var(--rule); }
.ai-endpoints tbody tr:last-child > * { border-bottom: 0; }
.ai-endpoints__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -10px;
  text-decoration: none;
}
.ai-endpoints__link:hover .endpoint__path,
.ai-endpoints__link:focus-visible .endpoint__path { text-decoration: underline; text-underline-offset: .2em; }
.ai-endpoints__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.ai-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}
.ai-next__link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- #/developers : layout ---------- */
.docs-page > .section { padding-top: var(--space-4); }

.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* section list */
.docs-toc { min-width: 0; font-size: .9375rem; }
.docs-toc__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-text);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: 0;
}
.docs-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ink-soft);
  border-radius: 8px;
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.docs-toc__toggle::after { content: "+"; font-family: var(--font-mono); font-size: 1.2rem; line-height: 1; }
.docs-toc__toggle[aria-expanded="true"]::after { content: "−"; }
.docs-toc__toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.docs-toc__group {
  margin: var(--space-4) 0 var(--space-1);
  padding-left: var(--space-3);
  color: var(--ink-soft);
  font-size: .8125rem;
  font-weight: 700;
}
.docs-toc ul { margin: 0; padding: 0; max-width: none; list-style: none; }
.docs-toc li { margin: 0; }
.docs-toc a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  border-left: 2px solid var(--rule);
  color: var(--ink);
  line-height: 1.3;
  text-decoration: none;
}
.docs-toc a:hover { border-left-color: var(--ink-soft); background: var(--paper-deep); }
.docs-toc a[aria-current] {
  border-left-color: var(--machine);
  background: var(--machine-tint);
  color: var(--machine-deep);
  font-weight: 700;
}
.docs-toc a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.docs-toc__method {
  flex: none;
  width: 3.4rem;
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.docs-toc__method--get { color: var(--ok); }
.docs-toc__method--post { color: var(--machine); }
.docs-toc__method--delete { color: var(--stamp-deep); }
.docs-toc a[aria-current] .docs-toc__method { color: inherit; }
.docs-toc__path { min-width: 0; font-family: var(--font-mono); font-size: .8125rem; overflow-wrap: anywhere; }

.docs-toc__title { display: none; }
.docs-toc[data-open="false"] .docs-toc__list { display: none; }

/* sections */
.docs-body { min-width: 0; max-width: 54rem; }

.docs-section {
  min-width: 0;
  padding-bottom: var(--space-7);
  scroll-margin-top: var(--space-5);
}
.docs-section + .docs-section {
  padding-top: var(--space-7);
  border-top: 1px solid var(--rule);
}
.docs-section:last-child { padding-bottom: 0; }
.docs-section > * { max-width: 100%; }
.docs-section > p,
.docs-section > ol { max-width: var(--measure); }
.docs-section h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.45rem, 2.4vw, 1.75rem);
  scroll-margin-top: var(--space-5);
}
.docs-section h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.docs-section h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}
.docs-where {
  margin-left: var(--space-1);
  color: var(--ink-soft);
  font-size: .875rem;
  font-weight: 400;
}

/* method badge, path and key requirement: the first line of every endpoint */
.docs-section > .docs-endpoint__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  max-width: none;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper-raised);
}
.docs-endpoint__line .endpoint__path { font-size: 1rem; }
.docs-endpoint__key { flex: none; }

/* status codes: one line each */
.docs-codes,
.docs-absent { margin: var(--space-3) 0 0; border-top: 1px solid var(--rule); }
.docs-codes > div {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
  font-size: .9375rem;
}
.docs-codes dt,
.docs-codes dd { margin: 0; min-width: 0; }
.docs-codes dt code { font-weight: 700; }

.docs-absent > div { padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); }
.docs-absent dt { margin: 0 0 var(--space-1); font-weight: 700; }
.docs-absent dd { margin: 0; max-width: var(--measure); }

/* wide tables keep readable columns and scroll inside their wrapper */
.docs-page .table-wrap > .table { min-width: 30rem; }
.docs-page .table-wrap > .docs-params { min-width: 42rem; }
.docs-page .table-wrap > .docs-errors { min-width: 58rem; }
.docs-params td:nth-child(3),
.docs-params td:nth-child(4) { white-space: nowrap; }
.docs-nowrap { white-space: nowrap; }
.docs-messages { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.docs-messages code { white-space: nowrap; overflow-wrap: normal; }

.docs-downloads { list-style: none; margin: var(--space-4) 0; padding: 0; max-width: none; }
.docs-downloads > li { margin: 0; padding: var(--space-2) 0; border-top: 1px solid var(--rule); overflow-wrap: anywhere; }
.docs-downloads > li:last-child { border-bottom: 1px solid var(--rule); }
.docs-downloads a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 700;
}
.docs-downloads span { display: block; margin-top: -6px; padding-bottom: var(--space-1); color: var(--ink-soft); font-size: .9375rem; }

.docs-section > .docs-clicks { max-width: var(--measure); margin: var(--space-3) 0 var(--space-5); padding-left: 1.4em; }
.docs-clicks > li { margin: 0; padding: var(--space-1) 0 var(--space-1) var(--space-1); }
.docs-clicks > li::marker { font-weight: 700; color: var(--ink-soft); }

@media (min-width: 1000px) {
  .docs-layout { grid-template-columns: 232px minmax(0, 1fr); gap: var(--space-7); }
  .docs-toc {
    position: sticky;
    top: var(--space-4);
    max-height: calc(100vh - var(--space-6));
    overflow-y: auto;
    padding-right: var(--space-1);
  }
  .docs-toc__title { display: block; }
  .docs-toc__toggle { display: none; }
  .docs-toc[data-open] .docs-toc__list { display: block; }
  .docs-toc__list > .docs-toc__group:first-child { margin-top: 0; }
}

/* A mouse needs less room per link than a finger. */
@media (min-width: 1000px) and (pointer: fine) {
  .docs-toc a { min-height: 32px; padding-block: 2px; }
}

@media (max-width: 760px) {
  .ai-key__form .button { width: 100%; margin-top: 0; }
  .ai-key__form .field { max-width: none; }
}

@media (max-width: 560px) {
  .ai-step { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); padding-block: var(--space-5); }
  .ai-step__num { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
  .ai-step h2 { padding-top: 0; }
  .ai-facts > div,
  .docs-facts > div { grid-template-columns: minmax(0, 1fr); }
  .ai-facts > div { padding-block: var(--space-2); }
}

@media (forced-colors: active) {
  .ai-tab[aria-selected="true"] { border-bottom: 3px solid; }
  .ai-keyslot--filled { outline: 1px solid; }
  .ai-step__num { border: 2px solid; }
  .docs-toc a[aria-current] { border-left: 4px solid; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-page *,
  .docs-page * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}