/* ============ VORETIX — css/docs.css ============
   Public API documentation page (docs.php). Layers on the tokens and shared
   components of styles.css; follows the search/history page-head language and
   the glowing-icon card recipe of the scan report. */

.docs-main { padding: 34px 0 80px; }

/* ---- page head (gradient title, like search/history) ---- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.page-head-text h1 {
  font-size: 32px; font-weight: 800; letter-spacing: -0.025em;
  background: var(--accent-gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-head-text p { font-size: 14px; color: var(--text-muted); margin-top: 8px; max-width: 660px; }
.page-head-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

/* base-url chip under the title */
.base-url {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 9px 9px 9px 14px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface-2);
}
.base-url .lbl {
  font-size: 10.5px; letter-spacing: 0.12em; font-weight: 700;
  text-transform: uppercase; color: var(--text-subtle);
}
.base-url code { font-size: 13.5px; color: var(--text); }
.base-url .code-copy { margin: 0; }

/* ---- two-column layout: sticky TOC + content ---- */
.docs-layout {
  display: grid; grid-template-columns: 248px minmax(0, 1fr);
  gap: 36px; align-items: start;
}

.docs-toc {
  position: sticky; top: 84px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  padding: 4px 10px 24px 0;
  scrollbar-width: thin;
}
.toc-group { margin-bottom: 6px; }
.toc-group-title {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--text-subtle);
  margin: 20px 0 7px 11px;
}
.toc-group:first-child .toc-group-title { margin-top: 2px; }
.toc-link {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px; border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  transition: 130ms;
}
.toc-link:hover { color: var(--text); background: var(--surface-2); }
.toc-link.active { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.toc-link .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-link code { font-size: 12.5px; font-weight: 500; }
.toc-method {
  flex-shrink: 0; width: 38px; text-align: center;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 0; border-radius: 5px;
}
.toc-method.get { background: var(--success-bg); color: var(--success); }
.toc-method.post { background: var(--info-bg); color: var(--info); }
.toc-method.put { background: var(--warning-bg); color: var(--warning); }

/* ---- sections ---- */
.doc-section { margin-bottom: 26px; scroll-margin-top: 84px; }

.doc-card {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(253, 29, 96, 0.05), transparent 42%),
    radial-gradient(120% 120% at 100% 0%, rgba(255, 168, 7, 0.045), transparent 46%),
    var(--surface);
  box-shadow: 0 18px 60px -38px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  padding: 24px 28px 26px;
  transition: border-color 350ms ease;
}
.doc-card:hover { border-color: rgba(255, 255, 255, 0.12); }

/* glowing icon + title header (rich-head recipe) */
.doc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.doc-head-ico {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(253, 29, 96, 0.18), rgba(255, 168, 7, 0.13)),
    rgba(255, 255, 255, 0.03);
  color: var(--brand-bright);
  border: 1px solid rgba(255, 168, 7, 0.18);
  box-shadow: 0 0 28px -14px rgba(255, 168, 7, 0.7);
}
.doc-head-text { flex: 1; min-width: 0; }
.doc-head-title { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -0.015em; }
.doc-head-desc { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.doc-card p { font-size: 14px; color: var(--text-muted); margin: 10px 0; }
.doc-card p strong, .doc-card li strong { color: var(--text); font-weight: 600; }
.doc-card p code, .doc-card li code, .doc-card td code, .param-desc code, .hf-desc code {
  font-size: 12.5px; color: var(--brand-bright);
  background: rgba(255, 168, 7, 0.08);
  border: 1px solid rgba(255, 168, 7, 0.14);
  border-radius: 5px; padding: 1px 5px;
  white-space: nowrap;
}
.doc-card ul { margin: 10px 0 10px 4px; padding-left: 18px; }
.doc-card li { font-size: 14px; color: var(--text-muted); margin: 6px 0; }
.doc-card h4 {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 700;
  margin: 22px 0 10px;
}
.doc-card h4:first-of-type { margin-top: 18px; }

/* ---- endpoint header row ---- */
.ep-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-faint);
}
.method {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  padding: 5px 11px; border-radius: 8px; flex-shrink: 0;
}
.method.get { background: var(--success-bg); color: var(--success); border: 1px solid rgba(77, 216, 156, 0.25); }
.method.post { background: var(--info-bg); color: var(--info); border: 1px solid rgba(125, 149, 255, 0.25); }
.method.put { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(255, 168, 7, 0.25); }
.ep-path { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); word-break: break-all; }
.ep-path .var { color: var(--brand-bright); }
.ep-chips { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }
.ep-chip {
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
}
.ep-chip.free { background: var(--success-bg); color: var(--success); border-color: rgba(77, 216, 156, 0.22); }
.ep-chip.spend { background: var(--brand-dim); color: var(--brand-bright); border-color: rgba(255, 168, 7, 0.22); }
.ep-chip.burst { background: var(--danger-bg); color: var(--danger-bright); border-color: rgba(253, 29, 96, 0.22); }
.ep-chip.owner { background: var(--info-bg); color: var(--info); border-color: rgba(125, 149, 255, 0.22); }
.ep-title { font-size: 16.5px; font-weight: 700; color: var(--text); margin-top: 16px; }

/* ---- parameter list ---- */
.params { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.param-row {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 6px 18px; padding: 13px 16px;
  background: rgba(255, 255, 255, 0.012);
}
.param-row + .param-row { border-top: 1px solid var(--border-faint); }
.param-left { min-width: 0; }
.param-name { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); word-break: break-all; }
.param-meta { margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.param-type { font-family: var(--mono); font-size: 11px; color: var(--text-subtle); }
.param-req { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 999px; }
.param-req.req { background: var(--danger-bg); color: var(--danger-bright); }
.param-req.opt { background: var(--surface-2); color: var(--text-subtle); border: 1px solid var(--border); }
.param-desc { font-size: 13.5px; color: var(--text-muted); align-self: center; }
.param-desc .dflt { color: var(--text-subtle); font-size: 12.5px; }
.param-desc .allowed { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.allowed .val {
  font-family: var(--mono); font-size: 11.5px; padding: 1px 7px;
  border-radius: 6px; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
}
.allowed .val.dflt { color: var(--brand-bright); border-color: rgba(255, 168, 7, 0.25); background: var(--brand-dim); }

/* ---- code blocks (request tabs + response) ---- */
.code-block {
  margin: 12px 0 4px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: #0b0b0d;
  overflow: hidden;
}
.code-head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px 7px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--border);
}
.code-langs { display: flex; gap: 4px; }
.code-lang {
  font-size: 12px; font-weight: 600; color: var(--text-subtle);
  padding: 4px 11px; border-radius: 7px;
  border: 1px solid transparent;
  transition: 130ms;
}
.code-lang:hover { color: var(--text); }
.code-lang.active { color: var(--text); background: var(--surface-3); border-color: var(--border-strong); }
.code-copy {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--text-subtle);
  padding: 4px 10px; border-radius: 7px;
  border: 1px solid var(--border);
  transition: 130ms;
}
.code-copy:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.code-copy.copied { color: var(--success); border-color: rgba(77, 216, 156, 0.3); }
.code-pane {
  display: none; margin: 0; padding: 15px 17px;
  font-size: 12.5px; line-height: 1.65; color: #C9CCDA;
  overflow: auto; max-height: 520px;
  tab-size: 4;
}
.code-pane.active { display: block; }
.code-pane code { font-family: var(--mono); }

/* syntax tokens */
.tk-key { color: #7D95FF; }
.tk-str { color: #4DD89C; }
.tk-num { color: #FFA807; }
.tk-kw  { color: #FF4D7C; }
.tk-com { color: #737685; font-style: italic; }

/* response block: status pill + collapsible body */
.resp-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 2px 4px;
}
.resp-toggle:hover { color: var(--text); }
.resp-toggle .chev { transition: transform 180ms ease; color: var(--text-subtle); }
.resp-status {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 6px;
}
.resp-status.ok { background: var(--success-bg); color: var(--success); }
.resp-status.err { background: var(--danger-bg); color: var(--danger-bright); }
.resp-block.collapsed .code-pane { display: none; }
.resp-block.collapsed .code-head { border-bottom-color: transparent; }
.resp-block.collapsed .resp-toggle .chev { transform: rotate(-90deg); }

/* ---- callouts ---- */
.callout {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 14px 0; padding: 13px 16px;
  border-radius: 12px; font-size: 13.5px; color: var(--text-muted);
  border: 1px solid rgba(125, 149, 255, 0.22);
  background: var(--info-bg);
}
.callout svg { flex-shrink: 0; margin-top: 1px; color: var(--info); }
.callout.warn { border-color: rgba(255, 168, 7, 0.22); background: var(--warning-bg); }
.callout.warn svg { color: var(--warning); }
.callout.danger { border-color: rgba(253, 29, 96, 0.22); background: var(--danger-bg); }
.callout.danger svg { color: var(--danger-bright); }
.callout strong { color: var(--text); }
.callout code { white-space: nowrap; }

/* ---- feature tiles (intro) ---- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.feature-tile {
  padding: 15px 16px; border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(255, 168, 7, 0.04), transparent 60%), var(--surface-2);
}
.feature-tile .fi {
  width: 32px; height: 32px; border-radius: 9px; margin-bottom: 10px;
  display: grid; place-items: center;
  background: var(--brand-dim); color: var(--brand-bright);
  box-shadow: 0 0 22px -10px rgba(255, 168, 7, 0.55);
}
.feature-tile .ft { font-size: 13.5px; font-weight: 700; color: var(--text); }
.feature-tile .fd { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }

/* ---- quick-start steps ---- */
.qs-steps { counter-reset: qs; margin-top: 4px; }
.qs-step { position: relative; padding: 2px 0 18px 44px; }
.qs-step::before {
  counter-increment: qs; content: counter(qs);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--brand-bright); background: var(--brand-dim);
  border: 1px solid rgba(255, 168, 7, 0.22);
}
.qs-step::after {
  content: ""; position: absolute; left: 13.5px; top: 34px; bottom: 4px;
  width: 1px; background: var(--border-strong);
}
.qs-step:last-child { padding-bottom: 0; }
.qs-step:last-child::after { display: none; }
.qs-step .qs-title { font-size: 14.5px; font-weight: 700; color: var(--text); padding-top: 3px; }
.qs-step p { margin-top: 4px; }

/* ---- rate-limit tiles ---- */
.rl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 6px; }
.rl-tile { padding: 15px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.rl-num { font-family: var(--mono); font-size: 21px; font-weight: 700; color: var(--brand-bright); }
.rl-num .u { font-size: 12px; color: var(--text-subtle); font-weight: 500; }
.rl-lbl { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 5px; }
.rl-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }

/* ---- reference tables ---- */
.doc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.doc-table th {
  text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 700;
  padding: 8px 14px; border-bottom: 1px solid var(--border-strong);
}
.doc-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-faint); color: var(--text-muted); vertical-align: top; }
.doc-table tr:last-child td { border-bottom: none; }
.doc-table td:first-child { white-space: nowrap; }
.doc-table .wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.http-code { font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.http-code.s2 { background: var(--success-bg); color: var(--success); }
.http-code.s4 { background: var(--warning-bg); color: var(--warning); }
.http-code.s42 { background: var(--danger-bg); color: var(--danger-bright); }
.http-code.s5 { background: var(--danger-bg); color: var(--danger-bright); }

/* ---- visibility tiles ---- */
.vis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.vis-tile { padding: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.vis-tile .vt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.vis-tile .vt .dot { width: 8px; height: 8px; border-radius: 50%; }
.vis-tile.pub .dot { background: var(--success); box-shadow: 0 0 10px var(--success); }
.vis-tile.hid .dot { background: var(--warning); box-shadow: 0 0 10px var(--warning); }
.vis-tile.priv .dot { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.vis-tile .vd { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.55; }

/* ---- hunt filter explorer ---- */
.hf-tools { display: flex; gap: 10px; margin: 16px 0 12px; flex-wrap: wrap; }
.hf-search {
  flex: 1; min-width: 220px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text-subtle);
}
.hf-search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 13.5px;
}
.hf-search input::placeholder { color: var(--text-subtle); }
.hf-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hf-chip {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  transition: 130ms;
}
.hf-chip:hover { color: var(--text); border-color: var(--border-strong); }
.hf-chip.active {
  color: var(--brand-bright); background: var(--brand-dim);
  border-color: rgba(255, 168, 7, 0.3);
}
.hf-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.hf-row {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 4px 18px; padding: 12px 16px;
  background: rgba(255, 255, 255, 0.012);
}
.hf-row + .hf-row { border-top: 1px solid var(--border-faint); }
.hf-row.hidden { display: none; }
.hf-name { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); word-break: break-all; }
.hf-group {
  display: inline-block; margin-top: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  padding: 1px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-subtle); border: 1px solid var(--border);
}
.hf-desc { font-size: 13.5px; color: var(--text-muted); }
.hf-ex { margin-top: 6px; }
.hf-ex code {
  font-family: var(--mono); font-size: 11.5px; color: var(--info);
  background: var(--info-bg); border: 1px solid rgba(125, 149, 255, 0.18);
  border-radius: 6px; padding: 2px 8px;
  white-space: nowrap;
}
.hf-empty { display: none; padding: 26px; text-align: center; color: var(--text-subtle); font-size: 13.5px; }
.hf-count { font-size: 12.5px; color: var(--text-subtle); margin-left: auto; align-self: center; }

/* ---- misc ---- */
.inline-link { color: var(--brand-bright); font-weight: 600; }
.inline-link:hover { text-decoration: underline; }
.ep-errors { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ep-errors .err-chip {
  font-family: var(--mono); font-size: 11.5px; color: var(--danger-bright);
  background: var(--danger-bg); border: 1px solid rgba(253, 29, 96, 0.18);
  border-radius: 6px; padding: 2px 8px;
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-toc { display: none; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .rl-grid, .vis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .param-row, .hf-row { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .doc-card { padding: 18px 16px 20px; }
  .ep-chips { margin-left: 0; }
}