/* /eto-dev-api-v2 — Etsy Open API v3 reference, in Eto's design language.
   Page is generated by developer_api/etsy_reference/generate.py

   Rules this file holds to:
   - No text sitting on a tinted chip/pill. Rank information with type, colour
     and space instead. The only filled surfaces are the ones that earn it —
     the endpoint bar, code panels, the search dialog — and those are built as
     real materials (self-coloured hairline, top light-catch, tight shadow).
   - Icons are bare glyphs in currentColor, never a tile behind them.
   - Nothing bold by default; OpenSauce ships one weight, so hierarchy comes
     from size, colour and spacing, with Melodrame carrying the display line. */

@font-face {
  font-family: "OpenSauce";
  src: url("/static/font/open_sauce/OpenSauceSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Melodrame";
  src: url("/static/font/relationship_of_melodrame/Relationship_of_melodrame.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root[data-theme="dark"] {
  --bg: #0d0d0d;
  --surface-1: #0a0a0a;
  --surface-2: #121212;
  --raised: #161616;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.70);
  --faint: rgba(255, 255, 255, 0.44);
  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.07);
  --hairline: rgba(255, 255, 255, 0.16);
  --lift: rgba(255, 255, 255, 0.06);
  --accent: #e98146;
  --accent-quiet: #c8683a;
  --danger: #e0685a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  --code-bg: #0a0a0a;
  --code-text: #e8e6e3;
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f7f6f4;
  --raised: #ffffff;
  --text: #101010;
  --muted: rgba(0, 0, 0, 0.68);
  --faint: rgba(0, 0, 0, 0.44);
  --border: rgba(0, 0, 0, 0.12);
  --border-soft: rgba(0, 0, 0, 0.07);
  --hairline: rgba(0, 0, 0, 0.10);
  --lift: rgba(255, 255, 255, 0.9);
  --accent: #c25a22;
  --accent-quiet: #a54a18;
  --danger: #b4402f;
  --shadow: 0 1px 2px rgba(16, 12, 8, 0.07);
  --code-bg: #0d0d0d;
  --code-text: #e8e6e3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--muted);
  font: 400 14.5px/1.72 "OpenSauce", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* one real weight shipped — never let the browser fake the rest */
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

code, pre, kbd, .p-name, .endpoint-url, .op-title, .method, .status, .mini-method {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-quiet); }
:root[data-theme="dark"] a:hover { color: #f0966a; }

/* Land an anchor so the gap under the 56px topbar falls inside the previous
   block's 10px empty bottom padding. Any more and the tail of the endpoint
   above shows through as a clipped line of text. */
[id] { scroll-margin-top: 66px; }
::selection { background: rgba(233, 129, 70, 0.22); }

/* Hugeicons: bare glyphs, never a tile */
.ic { width: 18px; height: 18px; flex: none; }

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

.d-layout { display: flex; min-height: 100vh; }

.d-side {
  width: 268px;
  position: fixed;
  inset: 0 auto 0 0;
  background: var(--surface-1);
  border-right: 1px solid var(--border-soft);
  overflow-y: auto;
  z-index: 100;
  transition: transform 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.d-side-head {
  height: 56px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
}
.d-side-head:hover { color: var(--text); }
.d-side-head img { width: 22px; height: 22px; display: block; }
.d-side-head .brand {
  font-family: "Melodrame", Georgia, serif;
  font-size: 19px;
  letter-spacing: 0.2px;
}
.d-side-head .ver {
  margin-left: auto;
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.04em;
}

.d-nav { padding: 6px 10px 56px; }

.side-label {
  margin: 18px 0 6px;
  padding: 0 8px;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.side-label:first-child { margin-top: 4px; }

/* rows read as text + a left indicator, never a filled pill */
.side-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px 5px 9px;
  border-left: 1px solid transparent;
  font-size: 13.5px;
  color: var(--muted);
  overflow: hidden;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.side-link:hover { color: var(--text); }
.side-link.is-active { color: var(--accent); border-left-color: var(--accent); }
.op-link-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mini-method {
  flex: none;
  width: 30px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.mm-post, .mm-put, .mm-patch { color: var(--accent-quiet); }
:root[data-theme="dark"] .mm-post,
:root[data-theme="dark"] .mm-put,
:root[data-theme="dark"] .mm-patch { color: #b06f42; }
.mm-delete { color: var(--danger); opacity: 0.8; }

.side-group > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px 5px 9px;
  border-left: 1px solid transparent;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.12s ease;
}
.side-group > summary::-webkit-details-marker { display: none; }
.side-group > summary:hover { color: var(--text); }
.side-group[open] > summary { color: var(--text); }
.side-group.has-active > summary { color: var(--accent); }

.side-group-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-count {
  margin-left: auto;
  padding-left: 8px;
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.side-group-body {
  margin: 1px 0 6px 9px;
  padding-left: 8px;
  border-left: 1px solid var(--border-soft);
}

.tw {
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
  opacity: 0.5;
}
details[open] > summary > .tw { transform: rotate(45deg); }

/* ------------------------------------------------------------ main + top */

.d-main { margin-left: 268px; flex: 1; min-width: 0; }

.d-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.d-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.d-crumb {
  font-size: 13px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.d-topbar-right { display: flex; align-items: center; gap: 10px; }

.d-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

/* controls: hairline outlines, no fill */
.d-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 10px 0 12px;
  min-width: 232px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: none;
  color: var(--faint);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.d-search:hover { border-color: var(--accent); color: var(--muted); }
.d-search span { flex: 1; text-align: left; }
.d-search .ic { width: 15px; height: 15px; }
.d-search kbd, .d-search-head kbd {
  font-family: inherit;
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.02em;
}

.d-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.d-theme:hover { border-color: var(--accent); color: var(--accent); }
:root[data-theme="dark"] .ic-moon { display: none; }
:root[data-theme="light"] .ic-sun { display: none; }

.d-body { display: grid; grid-template-columns: minmax(0, 1fr) 224px; }

.d-content {
  min-width: 0;
  padding: 46px 56px 96px;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------- headings */

.crumb {
  margin: 0 0 12px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 16px;
  font-family: "Melodrame", Georgia, serif;
  font-size: 46px;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.2px;
  color: var(--text);
}

.title-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-bottom: 26px;
  font-size: 12.5px;
  color: var(--faint);
}
.ver-chip { color: var(--accent); letter-spacing: 0.03em; }
a.meta-item { color: var(--faint); }
a.meta-item:hover { color: var(--accent); }

.lead { font-size: 15.5px; max-width: 74ch; }
.lead p { margin: 0 0 12px; }

/* the Base URL note: rules and space, not a tinted box */
.callout {
  margin: 30px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-soft);
  max-width: 74ch;
}
.callout-title {
  margin-bottom: 5px;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.callout p { margin: 0; }

.doc-section { padding-top: 6px; }

.tag-title {
  margin: 52px 0 4px;
  padding-top: 30px;
  border-top: 1px solid var(--border-soft);
  font-family: "Melodrame", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: var(--text);
}

.anchor-link {
  float: right;
  margin-left: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 18px;
  color: var(--border);
  opacity: 0;
  transition: opacity 0.15s ease;
}
h2:hover .anchor-link, h3:hover .anchor-link { opacity: 1; }
.anchor-link:hover { color: var(--accent); }

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

.op { padding: 34px 0 10px; }
.op + .op { border-top: 1px solid var(--border-soft); }

.op-title {
  margin: 0 0 15px;
  font-size: 17.5px;
  font-weight: 400;
  letter-spacing: -0.1px;
  color: var(--text);
}

/* THE tactile surface: a raised slab with a light-catch on its top lip,
   a self-coloured hairline and one tight shadow. */
.endpoint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 11px 11px 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 var(--lift), var(--shadow);
  overflow: hidden;
}
.endpoint-url {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.endpoint-url::-webkit-scrollbar { display: none; }
.endpoint-host { color: var(--faint); }
.path-var { color: var(--accent); }

/* method + status: colour and letterform only, never a fill */
.method {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--faint);
}
.method-post, .method-put, .method-patch { color: var(--accent); }
.method-delete { color: var(--danger); }

.copy-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: none;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.copy-btn .ic { width: 15px; height: 15px; }
.copy-btn .ic-tick { display: none; }
.copy-btn.copied .ic-copy { display: none; }
.copy-btn.copied .ic-tick { display: block; }
.copy-btn:hover, .copy-btn.copied { color: var(--accent); border-color: var(--accent); }

/* an operation with no Eto route: shown for its data model, not as a URL */
.endpoint.is-unrouted {
  background: none;
  box-shadow: none;
  border-style: dashed;
}
.endpoint.is-unrouted .endpoint-url { color: var(--muted); }
.op-note { margin: 10px 0 0; font-size: 12.5px; color: var(--faint); }

.op-desc { margin-top: 15px; max-width: 78ch; }
.op-desc p { margin: 0 0 10px; }

/* inline code: monospace and ink, no chip */
.op-desc code, .p-desc code, .lead code, .callout code, .resp-desc code, .obj-desc code {
  font-size: 0.9em;
  color: var(--text);
}

/* Etsy's inline release-state banner markup. Kept visually distinct from the
   "Report bug" link beside it — a status label, not something clickable. */
.wt-badge {
  margin-right: 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.wt-display-flex-xs { display: flex; align-items: center; gap: 14px; margin: 2px 0 12px; }
.wt-display-flex-xs .wt-text-link { font-size: 12.5px; }
.banner-text { margin: 0; font-size: 13px; color: var(--faint); }

.auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 18px 0 2px;
  font-size: 13px;
}
.auth-label {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.auth-chip { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text); }
.auth-scopes { display: inline-flex; gap: 8px; }
.auth-scopes code { font-size: 12px; color: var(--accent); }

/* --------------------------------------------------------------- blocks */

.block { margin-top: 26px; }
.block-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.ctype { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--faint); }
.ref-name {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  overflow-wrap: anywhere;
  max-width: 100%;
}

.prop { padding: 13px 0; }
.prop + .prop { border-top: 1px solid var(--border-soft); }

.p-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.p-name { font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.p-type { font-size: 12.5px; color: var(--faint); overflow-wrap: anywhere; max-width: 100%; }
.p-req { font-size: 11px; letter-spacing: 0.05em; color: var(--accent); }

.chip { font-size: 11.5px; color: var(--faint); }
.chip-null { color: var(--faint); font-style: italic; }

.p-desc { margin-top: 4px; font-size: 13.5px; max-width: 78ch; }
.p-desc p { margin: 0 0 6px; }
.p-desc p:last-child { margin-bottom: 0; }

.obj-desc { padding: 8px 0 2px; font-size: 13.5px; color: var(--faint); max-width: 78ch; }
.obj-desc p { margin: 0 0 6px; }
.obj-desc p:last-child { margin-bottom: 0; }

.p-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 7px; font-size: 12.5px; }
.p-meta-k { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.p-meta code, .enums code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--text);
}
.enums { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }

.p-oneof { margin: 8px 0 2px; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.p-recursive { margin-top: 6px; font-size: 12.5px; color: var(--faint); font-style: italic; }

/* expanders read as quiet text buttons */
details.sub, details.resp-schema, details.resp-sample { margin-top: 10px; }
details.sub > summary,
details.resp-schema > summary,
details.resp-sample > summary {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--faint);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s ease;
}
details.sub > summary::-webkit-details-marker,
details.resp-schema > summary::-webkit-details-marker,
details.resp-sample > summary::-webkit-details-marker { display: none; }
details.sub > summary:hover,
details.resp-schema > summary:hover,
details.resp-sample > summary:hover { color: var(--accent); }
details[open] > summary { color: var(--muted); }

.sub-body {
  margin: 4px 0 4px 3px;
  padding: 0 0 0 17px;
  border-left: 1px solid var(--border-soft);
}

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

.resp { padding: 13px 0 15px; }
.resp + .resp { border-top: 1px solid var(--border-soft); }
.resp-head { display: flex; align-items: baseline; gap: 12px; }
.status {
  flex: none;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.status-err { color: var(--danger); }
.resp-desc { font-size: 13.5px; }
.resp-desc p { margin: 0; display: inline; }

/* ------------------------------------------------------- code as material */

.code-card {
  margin-top: 11px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--code-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow);
  overflow: hidden;
}
.code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 9px 7px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
}
.code-card .copy-btn { border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.42); }
.code-card .copy-btn:hover, .code-card .copy-btn.copied { color: #e98146; border-color: #e98146; }
.code-card pre {
  margin: 0;
  padding: 15px 16px;
  overflow-x: auto;
  max-height: 460px;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 1.66;
  color: var(--code-text);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.tk { color: #e98146; }
.ts { color: #d8d4cf; }
.tn { color: #9fb4c4; }
.tb { color: #c79a63; }

/* --------------------------------------------- Eto guides + imported prose

   The "Eto products" and getting-started sections keep the markup they were
   authored with on the existing docs page; everything below restyles those
   legacy classes to this page's rules, so the two never fall out of sync. */

.guide { margin: 4px 0 10px; }
.guide-block { padding: 18px 0; border-top: 1px solid var(--border-soft); }
.guide-block:first-child { border-top: 0; padding-top: 6px; }
.guide-heading {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.guide-block p { margin: 0 0 10px; max-width: 78ch; }

.prose { max-width: 82ch; }
.prose > p, .prose li { max-width: 78ch; }
.prose p { margin: 0 0 12px; }
.prose h3 {
  margin: 30px 0 10px;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
}
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose strong { font-weight: 400; color: var(--text); }
.prose em { font-style: italic; }
.prose code { font-size: 0.9em; color: var(--text); }

/* the old page's stat cards become a plain fact list */
.info-grid { display: flex; flex-wrap: wrap; gap: 10px 44px; margin: 4px 0 18px; }
.info-card { display: flex; flex-direction: column; gap: 2px; }
.info-card strong { font-size: 15px; font-weight: 400; color: var(--accent); }
.info-card span { font-size: 12.5px; color: var(--faint); }

/* parameter / reference tables */
.pt { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: 13.5px; }
.pt th {
  text-align: left;
  padding: 0 14px 7px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.pt td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted);
  vertical-align: top;
}
.pt tr:last-child td { border-bottom: 0; }
.pn { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--text); }
.pty { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--faint); }
.pr { font-size: 10.5px; letter-spacing: 0.05em; color: var(--accent); }

/* bare <pre> in imported prose gets the same material as a code card */
.prose pre {
  margin: 0 0 16px;
  padding: 15px 16px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--code-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow);
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.66;
  color: var(--code-text);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.prose pre code { color: inherit; font-size: inherit; }

/* hand-written endpoint rows in those sections: always open, no chevron */
.ep { margin: 0 0 10px; }
.ep-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 var(--lift), var(--shadow);
}
.ep-path {
  flex: 1;
  min-width: 220px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ep-sum { font-size: 12.5px; color: var(--faint); }
.ep-body { display: block; padding: 14px 0 4px; }
.ep-body > *:last-child { margin-bottom: 0; }

/* method labels in imported markup: colour only, matching this page */
.m {
  flex: none;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--faint);
}
.m-post, .m-put, .m-patch { color: var(--accent); }
.m-delete { color: var(--danger); }

/* ---------------------------------------------------------------- footer */

.d-footer {
  margin-top: 72px;
  padding-top: 26px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px;
  color: var(--faint);
}
.d-footer p { margin: 0 0 6px; }
.d-footer a { color: var(--faint); }
.d-footer a:hover { color: var(--accent); }

/* ------------------------------------------------------------------- toc */

.d-toc {
  position: sticky;
  top: 56px;
  align-self: start;
  height: calc(100vh - 56px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.d-toc-inner { padding: 30px 24px 60px 4px; }
.d-toc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.d-toc-title .ic { width: 14px; height: 14px; }
.toc-link {
  display: block;
  padding: 4px 10px;
  border-left: 1px solid var(--border-soft);
  font-size: 12.5px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.toc-link:hover { color: var(--text); }
.toc-link.is-active { color: var(--accent); border-left-color: var(--accent); }

/* ---------------------------------------------------------------- search */

.d-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  padding: 11vh 20px 0;
}
.d-search-panel {
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--raised);
  box-shadow: inset 0 1px 0 var(--lift), 0 12px 40px -12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.d-search-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--faint);
}
.d-search-head .ic { width: 17px; height: 17px; }
#search-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
#search-input::placeholder { color: var(--faint); }

.d-search-results { max-height: 56vh; overflow-y: auto; padding: 0 6px 6px; }

.search-group-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 12px 5px;
  background: var(--raised);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.search-group-n { margin-left: auto; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* one highlight at a time — pointing at a row selects it (see the JS) */
.search-hit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-left: 1px solid transparent;
  cursor: pointer;
}
.search-hit.is-selected { border-left-color: var(--accent); }
.search-hit.is-selected .hit-name { color: var(--accent); }
.search-hit .mini-method { width: 34px; }
.hit-text { min-width: 0; }
.hit-name {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--text);
}
.hit-name .hl { color: var(--accent); }
.hit-path {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hit-path .hl { color: var(--muted); }
.search-more {
  padding: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--faint);
}
.search-empty { padding: 28px; text-align: center; color: var(--faint); font-size: 13.5px; }

/* ---------------------------------------------------------------- mobile */

.d-overlay { display: none; }

@media (max-width: 1180px) {
  .d-body { grid-template-columns: minmax(0, 1fr); }
  .d-toc { display: none; }
  .d-content { padding: 38px 36px 80px; }
}

@media (max-width: 900px) {
  .d-side { transform: translateX(-101%); }
  body.nav-open .d-side { transform: translateX(0); }
  body.nav-open .d-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.5);
  }
  .d-main { margin-left: 0; }
  .d-burger { display: inline-flex; }
  .d-topbar { padding: 0 16px; }
  .d-crumb { display: none; }
  .d-search { min-width: 0; }
  .d-search span, .d-search kbd { display: none; }
  .d-content { padding: 30px 20px 72px; }
  h1 { font-size: 36px; }
  .tag-title { font-size: 25px; }

  /* imported reference tables are wider than a phone — let them scroll inside
     themselves rather than pushing the page sideways */
  .pt { display: block; overflow-x: auto; white-space: nowrap; }
  .pt td, .pt th { white-space: normal; min-width: 96px; }
  .ep-path { min-width: 0; }
  .info-grid { gap: 10px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}