/* Reseller API documentation (modules/api_docs.php): hero with the endpoint, quick facts, sticky rail (language picker +
   grouped contents), sections with code consoles. Consoles stay dark in both themes; code always reads left to right. */

/* Hero */
.docs-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px; margin-bottom: 14px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-lg);
  background: radial-gradient(120% 130% at 100% 0%, rgb(var(--accent-rgb) / .1), transparent 55%), linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.docs-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(var(--ink-rgb) / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--ink-rgb) / .045) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: radial-gradient(90% 80% at 100% 0%, #000 10%, transparent 70%); }
.docs-hero-main { display: grid; gap: 12px; justify-items: start; }
.docs-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgb(var(--accent-rgb) / .22); font: 700 .74rem/1.2 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .03em; }
.docs-hero h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: -.02em; }
.docs-lead { max-width: 64ch; color: var(--text-2); font-size: 1.02rem; line-height: 1.75; }
.docs-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.docs-endpoint { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 14px; background: rgb(var(--bg-rgb) / .6); border: 1px solid var(--line-2);
  backdrop-filter: blur(6px); }
.docs-endpoint code { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--text); font-size: .95rem; }
.docs-method { flex: none; padding: 5px 10px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 800 .74rem/1.2 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .05em; }

/* Quick facts */
.docs-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.docs-facts li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line);
  color: var(--text); font-size: .9rem; font-weight: 600; line-height: 1.5; }
.docs-facts small { display: block; margin-bottom: 2px; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
html[dir="rtl"] .docs-facts small { letter-spacing: 0; font-size: .8rem; }
.docs-fact-ic, .docs-sec-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgb(var(--accent-rgb) / .18); }
.docs-facts code, .docs-section :not(pre) > code { padding: 1px 6px; border-radius: 6px; background: var(--panel-3); color: var(--text); unicode-bidi: isolate; }

/* Layout + rail */
.docs { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start; }
.docs-rail { position: sticky; top: 90px; display: grid; gap: 12px; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; }
.docs-pick, .docs-toc { padding: 10px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.docs-pick { display: grid; gap: 8px; }
.docs-pick strong, .docs-toc-group strong { padding: 2px 8px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
html[dir="rtl"] .docs-pick strong, html[dir="rtl"] .docs-toc-group strong { letter-spacing: 0; font-size: .8rem; }
.docs-pick div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.docs-pick button { min-height: 32px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font-size: .84rem; font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s; }
.docs-pick button:hover { color: var(--text); background: var(--panel-3); }
.docs-pick button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.docs-toc { display: grid; gap: 10px; }
.docs-toc-group { display: grid; gap: 1px; }
.docs-toc-group strong { padding-bottom: 4px; }
.docs-toc a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 9px; border-inline-start: 2px solid transparent;
  color: var(--text-2); font-size: .87rem; font-weight: 600; transition: background-color .15s, color .15s, border-color .15s; }
.docs-toc a code { color: var(--muted); font-size: .72rem; }
.docs-toc a:hover, .docs-toc a:focus-visible { background: var(--panel-3); color: var(--text); }
.docs-toc a[aria-current="true"] { border-inline-start-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.docs-toc a[aria-current="true"] code { color: var(--accent); }

/* Sections */
.docs-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.docs-section { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(18px, 2.4vw, 26px); scroll-margin-top: 90px; color: var(--text-2); line-height: 1.75; }
.docs-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.docs-sec-head h2 { color: var(--text); font-size: 1.2rem; }
.docs-route { display: inline-flex; align-items: center; margin-inline-start: auto; border-radius: 9px; border: 1px solid var(--line-2); overflow: hidden; font-size: .78rem; }
.docs-route b { padding: 4px 8px; background: var(--panel-3); color: var(--accent); font: 800 .72rem/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .04em; }
.docs-section .docs-route code { padding: 4px 9px; border-radius: 0; background: none; font-weight: 700; }
.docs-sub { margin-top: 6px; color: var(--text); font-size: .95rem; }
.docs-p, .docs-section p { margin: 0; }
.docs-list { display: grid; gap: 8px; margin: 0; padding-inline-start: 22px; }
.docs-list li::marker { color: var(--accent); font-weight: 700; }

/* Tables */
.docs-table-wrap { border: 1px solid var(--line); border-radius: var(--r); margin: 0; padding: 0; }
.docs-table th { background: var(--panel-2); }
.docs-table td { vertical-align: top; line-height: 1.6; }
.docs-table td:first-child { white-space: nowrap; }
.docs-table td:first-child code { font-weight: 700; }
.docs-msgs { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.docs-req { display: inline-block; margin: 1px 0; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.docs-req-yes { background: var(--accent-soft); color: var(--accent); }
.docs-req-soft { background: var(--warn-soft); color: var(--warn); }
.docs-req-no { background: var(--panel-3); color: var(--muted); }
.docs-http { display: inline-block; padding: 1px 8px; border-radius: 7px; font: 700 .76rem/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; }
.docs-http-ok { background: var(--ok-soft); color: var(--ok); }
.docs-http-warn { background: var(--warn-soft); color: var(--warn); }
.docs-http-err { background: var(--danger-soft); color: var(--danger); }

/* Code consoles: always dark, fixed token colours */
.docs-console { --code-bg: #0b0b0d; --code-bar: #121215; --code-line: #26262b; --code-text: #d8d8de; --code-dim: #8a8a96; --code-accent: #d4ff00;
  min-width: 0; border-radius: var(--r); background: var(--code-bg); border: 1px solid var(--code-line); overflow: hidden; text-align: left; color: var(--code-text); }
.docs-bar { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 8px 0 4px; background: var(--code-bar); border-bottom: 1px solid var(--code-line); }
.docs-bar-sub { border-top: 1px solid var(--code-line); padding-inline-start: 14px; }
.docs-bar-label { color: var(--code-dim); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.docs-bar-label:first-child { padding-inline-start: 10px; }
.docs-bar-sub .docs-bar-label { padding: 0; }
.docs-bar .docs-http-ok { background: rgb(74 222 128 / .12); color: #4ade80; }
.docs-tabs { display: flex; align-self: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.docs-tab { position: relative; flex: none; padding: 0 12px; border: 0; background: none; color: var(--code-dim); font-size: .84rem; font-weight: 700; cursor: pointer; transition: color .15s; }
.docs-tab:hover { color: var(--code-text); }
.docs-tab[aria-selected="true"] { color: #fff; }
.docs-tab[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 10px -1px; height: 2px; border-radius: 2px; background: var(--code-accent); }
.docs-tab:focus-visible { outline-offset: -4px; }
.docs-copy { flex: none; width: 32px; height: 32px; margin-inline-start: auto; background: rgb(255 255 255 / .04); border-color: var(--code-line); color: var(--code-dim); }
.docs-copy:hover { color: #fff; }
.docs-copy.copied { color: #4ade80; border-color: rgb(74 222 128 / .4); }
.docs-code-wrap { min-width: 0; }
.docs-code { margin: 0; padding: 16px 18px; overflow-x: auto; max-height: 560px; background: none; color: var(--code-text);
  font: .8rem/1.75 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre; tab-size: 4; font-variant-ligatures: none; scrollbar-width: thin; scrollbar-color: #33333a transparent; }
.docs-code code { color: inherit; font: inherit; } /* not the base `code` colour and size: the console is dark in both themes */
.docs-code:focus-visible { outline: 2px solid var(--code-accent); outline-offset: -2px; border-radius: 0; }
.tk-com { color: #6e6e7a; font-style: italic; }
.tk-str { color: #c3e88d; }
.tk-kw { color: #c792ea; }
.tk-num, .tk-lit { color: #f78c6c; }
.tk-fn { color: #82aaff; }
.tk-var { color: #f07178; }
.tk-const { color: #ffcb6b; }
.tk-key, .tk-flag { color: #89ddff; }

@media (max-width: 1100px) {
  .docs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 16px; } /* the scrolling contents strip must not widen the column */
  .docs-rail { position: static; max-height: none; overflow: visible; min-width: 0; }
  .docs-pick { display: none; } /* every console has its own tabs */
  .docs-toc { display: flex; gap: 6px; min-width: 0; overflow-x: auto; padding: 6px; scrollbar-width: none; }
  .docs-toc-group { display: contents; }
  .docs-toc-group strong, .docs-toc a code { display: none; }
  .docs-toc a { flex: none; white-space: nowrap; border: 1px solid var(--line); }
  .docs-toc a[aria-current="true"] { border-color: rgb(var(--accent-rgb) / .35); }
}
@media (max-width: 560px) {
  .docs-facts { grid-template-columns: minmax(0, 1fr); }
  .docs-hero-actions > a { flex: 1 1 100%; justify-content: center; }
  .docs-route { margin-inline-start: 0; }
  .docs-table td:first-child { white-space: normal; }
  .docs-code { font-size: .76rem; padding: 14px; }
}