/*
 * The API reference page. Layout, type and spacing only: NO COLOUR VALUES LIVE
 * HERE, exactly as in styles.css. Every colour is a var() naming a token from
 * palette.css, and the gate refuses a hex literal anywhere under public/ except
 * public/palette.js.
 *
 * THE METHOD BADGES REUSE THE PALETTE'S FILL AND INK PAIRS rather than adding
 * four colours. GET is ok, POST is the accent, PUT and PATCH are warn, DELETE
 * is danger. Each pair - okInk on okSoft, onAccent on accent, and so on - is
 * already declared in CONTRAST_PAIRS and measured by tests/palette.test.mjs in
 * both themes, so a badge's text is guaranteed legible without this file
 * deciding anything about contrast. Adding colours here would have meant adding
 * pairs there, for four labels that already had perfectly good names.
 */

/* ------------------------------------------------------------------ chrome -- */

.docs-brand { text-decoration: none; color: var(--mint-text); }
.docs-crumb { color: var(--mint-text-muted); font-size: 0.9rem; }

.docs-status { padding: 48px 20px; text-align: center; color: var(--mint-text-subtle); }

.docs-signed-out { min-height: 70vh; display: grid; place-items: center; padding: 24px; }
.docs-gate-note { color: var(--mint-text-muted); font-size: 0.9rem; margin: 10px 0 24px; }

/* ------------------------------------------------------------------ layout -- */

/*
 * Two columns on a wide screen, one on a narrow one. The index sticks while the
 * reference scrolls, because on a document this long the thing somebody loses
 * first is where they are.
 */
.docs-app {
  display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 0; max-width: 1400px; margin: 0 auto;
}
.docs-nav {
  position: sticky; top: 57px; align-self: start;
  max-height: calc(100vh - 57px); overflow-y: auto;
  padding: 18px 14px 40px; border-right: 1px solid var(--mint-border);
}
.docs-main { padding: 24px 32px 80px; min-width: 0; }
.docs-main:focus { outline: none; }

@media (max-width: 860px) {
  .docs-app { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the index is a block above the reference rather than a column
   * beside it, and it does not stick, which would cover most of the screen. */
  .docs-nav {
    position: static; max-height: none; border-right: 0;
    border-bottom: 1px solid var(--mint-border); padding-bottom: 14px;
  }
  .docs-main { padding: 18px 16px 60px; }
}

/* -------------------------------------------------------------------- index -- */

.docs-filter { display: block; margin-bottom: 14px; }
.docs-filter input {
  width: 100%; font: inherit; font-size: 0.86rem; padding: 7px 10px;
  border: 1px solid var(--mint-border); border-radius: 8px;
  background: var(--mint-surface); color: var(--mint-text);
}
.docs-filter-empty { font-size: 0.82rem; color: var(--mint-text-subtle); margin: 0 0 10px; }

.index-group { margin-bottom: 16px; }
.index-tag {
  margin: 0 0 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--mint-text-subtle);
}
.index-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.index-item { margin: 0; }
.index-link {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px;
  text-decoration: none; color: var(--mint-text); font-size: 0.82rem; min-width: 0;
}
.index-link:hover { background: var(--mint-surface-sunken); }
.index-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ----------------------------------------------------------------- methods -- */

.method {
  display: inline-block; flex: none; min-width: 3.9em; text-align: center;
  padding: 2px 6px; border-radius: 5px; border: 1px solid transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
}
.method-get { background: var(--mint-ok-soft); color: var(--mint-ok-ink); border-color: var(--mint-ok-line); }
.method-post { background: var(--mint-accent); color: var(--mint-on-accent); border-color: var(--mint-accent); }
.method-put,
.method-patch { background: var(--mint-warn-soft); color: var(--mint-warn-ink); border-color: var(--mint-warn-line); }
.method-delete { background: var(--mint-danger-soft); color: var(--mint-danger-ink); border-color: var(--mint-danger-line); }

/* ------------------------------------------------------------------- intro -- */

.docs-intro h1 { font-size: 1.7rem; margin-bottom: 6px; }
.docs-lede { color: var(--mint-text-muted); font-size: 0.9rem; max-width: 74ch; margin: 4px 0 14px; }
.docs-prose { max-width: 74ch; }
.docs-para { margin: 0 0 12px; line-height: 1.6; }
.docs-prose-heading { font-size: 0.95rem; color: var(--mint-text); margin: 20px 0 8px; }
.docs-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.84em;
  background: var(--mint-surface-sunken); border: 1px solid var(--mint-border);
  border-radius: 4px; padding: 0 4px;
}
.docs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; }

.docs-block {
  margin: 28px 0; padding: 18px; border-radius: 12px;
  background: var(--mint-surface); border: 1px solid var(--mint-border);
}
.docs-block h2 { margin-bottom: 10px; }

.auth-card { padding: 12px 0; border-top: 1px solid var(--mint-border); }
.auth-card:first-child { border-top: 0; padding-top: 0; }
.auth-name { margin: 0 0 4px; font-size: 0.95rem; color: var(--mint-text); }
.auth-shape {
  margin: 0 0 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem; color: var(--mint-text-muted); overflow-wrap: anywhere;
}
.auth-description { margin: 0; font-size: 0.86rem; color: var(--mint-text-muted); max-width: 74ch; line-height: 1.55; }

.deploy-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 14px; }
.deploy-term { color: var(--mint-text-muted); font-size: 0.86rem; }
.deploy-value { margin: 0; font-size: 0.86rem; }
.cap-yes { color: var(--mint-ok-ink); }
.cap-no { color: var(--mint-text-subtle); }

/* ------------------------------------------------------------- operations -- */

.tag-section { margin-top: 40px; }
.tag-heading {
  font-size: 1.2rem; padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid var(--mint-border);
}

.op {
  margin: 18px 0; padding: 18px; border-radius: 12px;
  background: var(--mint-surface); border: 1px solid var(--mint-border);
  /* So a deep link lands below the sticky bar rather than under it. */
  scroll-margin-top: 72px;
}
.op:target { border-color: var(--mint-focus); }
.op-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.op-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92rem;
  font-weight: 600; overflow-wrap: anywhere; min-width: 0;
}
.op-anchor { margin-left: auto; font-size: 0.76rem; color: var(--mint-text-subtle); }
.op-summary { font-size: 1.02rem; color: var(--mint-text); margin: 10px 0 8px; }
.op-subhead {
  margin: 18px 0 8px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--mint-text-subtle);
}
.op-note { font-size: 0.82rem; color: var(--mint-text-muted); margin: 0 0 8px; max-width: 74ch; }

.op-access { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.access {
  font-size: 0.72rem; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--mint-border); color: var(--mint-text-muted);
}
.access-token { background: var(--mint-ok-soft); color: var(--mint-ok-ink); border-color: var(--mint-ok-line); }
.access-none { background: var(--mint-surface-sunken); color: var(--mint-text-muted); }
.access-session { background: var(--mint-surface-sunken); }
.access-open { background: var(--mint-surface-sunken); }

/* Wide things scroll inside their own box, so the page never scrolls sideways. */
.docs-scroll { overflow-x: auto; max-width: 100%; }
.docs-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.docs-table th,
.docs-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--mint-border); vertical-align: top; }
.docs-table th {
  color: var(--mint-text-subtle); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}

.op-curl {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--mint-surface-sunken); border: 1px solid var(--mint-border);
  border-radius: 9px; padding: 10px 12px;
}
.docs-pre {
  flex: 1; min-width: 0; margin: 0; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem;
  line-height: 1.55; color: var(--mint-text); white-space: pre;
}
.docs-copy { flex: none; }

/* ------------------------------------------------------------- responses -- */

.op-responses { display: flex; flex-direction: column; gap: 6px; }
.response { border: 1px solid var(--mint-border); border-radius: 9px; background: var(--mint-bg); }
.response-summary {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; cursor: pointer;
  list-style: none;
}
.response-summary::-webkit-details-marker { display: none; }
.response-status {
  flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem; font-weight: 700; padding: 1px 7px; border-radius: 5px; border: 1px solid transparent;
}
.response-ok .response-status { background: var(--mint-ok-soft); color: var(--mint-ok-ink); border-color: var(--mint-ok-line); }
.response-client .response-status { background: var(--mint-warn-soft); color: var(--mint-warn-ink); border-color: var(--mint-warn-line); }
.response-server .response-status { background: var(--mint-danger-soft); color: var(--mint-danger-ink); border-color: var(--mint-danger-line); }
.response-description { font-size: 0.84rem; color: var(--mint-text-muted); }
.response[open] > .response-summary { border-bottom: 1px solid var(--mint-border); }
.response > .schema-tree { padding: 6px 12px 10px; }
.response-examples { padding: 0 12px 12px; }
.response-examples-head { margin: 4px 0; font-size: 0.78rem; color: var(--mint-text-subtle); }
.response-example-list { margin: 0; padding-left: 18px; color: var(--mint-text-muted); }

/* ---------------------------------------------------------------- schemas -- */

.schema-tree { display: flex; flex-direction: column; }
.schema-row { padding: 6px 0; border-top: 1px solid var(--mint-border); }
.schema-tree > .schema-row:first-child { border-top: 0; }
.schema-open > .schema-summary { cursor: pointer; }
.schema-summary { list-style: none; }
.schema-summary::-webkit-details-marker { display: none; }
/* A small open-close marker, drawn by CSS so it needs no character in the text. */
.schema-open > .schema-summary .schema-name::before {
  content: ''; display: inline-block; width: 0; height: 0; margin-right: 6px;
  border-left: 5px solid var(--mint-text-subtle);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 120ms ease;
}
.schema-open[open] > .schema-summary .schema-name::before { transform: rotate(90deg); }
.schema-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.schema-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem; font-weight: 600; color: var(--mint-text);
}
.schema-type {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem; color: var(--mint-text-subtle);
}
.schema-flag {
  font-size: 0.68rem; padding: 0 6px; border-radius: 999px; border: 1px solid var(--mint-border);
}
.schema-required { color: var(--mint-text-muted); }
/*
 * "Can be null" is the flag that matters most on this API, because null is
 * where a reading that did not happen lives, and a caller who coalesces it to
 * zero draws an idle week that did not happen. It gets the warn pair so it is
 * noticed rather than skimmed.
 */
.schema-nullable { background: var(--mint-warn-soft); color: var(--mint-warn-ink); border-color: var(--mint-warn-line); }
.schema-body { padding: 2px 0 0 14px; }
.schema-description { margin: 3px 0 0; font-size: 0.82rem; color: var(--mint-text-muted); line-height: 1.5; max-width: 74ch; }
.schema-open > .schema-body { border-left: 2px solid var(--mint-border); margin: 4px 0 0 4px; }
.schema-empty { margin: 4px 0; font-size: 0.82rem; color: var(--mint-text-subtle); }

@media (prefers-reduced-motion: reduce) {
  .schema-open > .schema-summary .schema-name::before { transition: none; }
}