/* ============================================================================
   Tweek Docs — shared design kit.
   Single source of truth for every page under /docs (api, index, faq, help…).
   Link it with: <link rel="stylesheet" href="/docs/docs.css">
   Page-specific tweaks go in a small inline <style> on that page, not here.
   Copy-to-clipboard behaviour for code blocks lives in /docs/docs.js.
   ========================================================================== */

@font-face {
  font-family: "Suisse Intl";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(/s/fonts/SuisseIntl-Book-WebXL.woff2) format("woff2");
}
@font-face {
  font-family: "Suisse Intl";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url(/s/fonts/SuisseIntl-Bold-WebXL.woff2) format("woff2");
}

:root {
  --bg: #ffffff;
  --ink: #16171a;
  --gray4: rgba(0, 0, 0, 0.8);
  --muted: rgba(0, 0, 0, 0.58);
  --faint: rgba(0, 0, 0, 0.42);
  --line: rgba(0, 0, 0, 0.1);
  --panel: rgba(0, 0, 0, 0.04);
  --blue: #5167f4;
  --yellow: #fdef5d;
  --red: #cd2c54;
  --code-bg: #16171a;
  --code-fg: #e9eaec;
  --sans: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(81, 103, 244, 0.18); }
.layout { max-width: 760px; margin: 0 auto; padding: 0 32px; }

main { padding: 78px 0 120px; }
.logo { margin: 0 0 34px; }
.logo svg { height: 56px; width: auto; display: block; }

/* --- Typography ---------------------------------------------------------- */
.eyebrow { display: inline-block; font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--blue); margin: 0 0 14px; transition: opacity 0.12s; }
a.eyebrow { text-decoration: none; }
a.eyebrow:hover { opacity: 0.7; }
a.eyebrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
h1 { font-size: 48px; line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; margin: 0 0 15px; text-wrap: balance; }
h2 { font-size: 25px; letter-spacing: -0.022em; font-weight: 700; margin: 70px 0 12px; padding-bottom: 11px; border-bottom: 1px solid var(--line); text-wrap: balance; }
h3 { font-size: 17px; letter-spacing: -0.01em; font-weight: 700; margin: 30px 0 8px; }
.lede { font-size: 19px; line-height: 1.5; color: var(--gray4); margin: 0 0 24px; max-width: 50ch; }
p { margin: 0 0 14px; }
main p, main li { max-width: 72ch; }
a.link { color: var(--blue); border-bottom: 1px solid rgba(81, 103, 244, 0.35); transition: border-color 0.12s; }
a.link:hover { border-color: var(--blue); }
a.link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; border-bottom-color: transparent; }
strong { font-weight: 700; }
code { font-family: var(--mono); font-size: 0.85em; background: var(--panel); padding: 0.12em 0.38em; border-radius: 4px; }
ul, ol { padding-left: 20px; margin: 0 0 16px; }
li { margin: 5px 0; }
ol li { padding-left: 4px; }

/* --- Hero image ---------------------------------------------------------- */
.hero-media { margin: 6px 0 34px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.hero-media img { display: block; width: 100%; height: auto; }

/* --- Spec cards (key/value row) ------------------------------------------ */
.cardrow { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 6px; }
.card { flex: 1 1 220px; border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; }
.card .k { font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.card .v { font-family: var(--mono); font-size: 14px; margin-top: 5px; }

/* --- Code blocks (+ language label, copy button) ------------------------- */
pre { position: relative; background: var(--code-bg); color: var(--code-fg); border-radius: 11px; padding: 17px 19px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.62; margin: 12px 0 20px; }
pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
pre[data-lang] { padding-top: 37px; }
pre[data-lang]::before { content: attr(data-lang); position: absolute; top: 13px; left: 19px; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(233, 234, 236, 0.4); pointer-events: none; }
.copy { position: absolute; top: 7px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: rgba(233, 234, 236, 0.5); border-radius: 7px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.copy:hover { background: rgba(255, 255, 255, 0.09); color: rgba(233, 234, 236, 0.92); }
.copy:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.copy.copied { color: #a3cc9c; }
.copy svg { width: 15px; height: 15px; display: block; }
.tok-c { color: #8b8f98; }
.tok-k { color: #e0b483; }
.tok-s { color: #a3cc9c; }
.tok-u { color: #8fbce6; }

/* --- HTTP method badges -------------------------------------------------- */
.m { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 5px; color: #fff; vertical-align: middle; }
.m.get { background: var(--gray4); }
.m.post { background: var(--blue); }
.m.patch { background: var(--yellow); color: var(--ink); }
.m.delete { background: var(--red); }

/* --- Endpoint row -------------------------------------------------------- */
.ep { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px; margin: 10px 0; }
.ep .sc { margin-left: auto; font-family: var(--sans); font-size: 11px; letter-spacing: 0.03em; color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: 2px 9px; border-radius: 20px; white-space: nowrap; }

/* --- Tables -------------------------------------------------------------- */
.tw { overflow-x: auto; margin: 14px 0 22px; border: 1px solid var(--line); border-radius: 11px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 15px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 700; background: var(--panel); }
tr:last-child td { border-bottom: 0; }
td code, th code { white-space: nowrap; }
td .m { font-size: 10px; }
.scope-tag { font-family: var(--mono); font-size: 12.5px; }
.sw { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line); vertical-align: middle; }
.sw.blank { background: repeating-linear-gradient(45deg, #fff, #fff 3px, #eee 3px, #eee 6px); }

/* --- Callouts ------------------------------------------------------------ */
.note { border: 1px solid var(--line); background: var(--panel); padding: 12px 15px; border-radius: 8px; margin: 16px 0; font-size: 14.5px; color: var(--gray4); }
.note .nl { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); margin-bottom: 5px; }
.note.dep .nl { color: var(--red); }
.deprecated h3 { color: var(--gray4); }
.steplabel { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: 0.03em; }

/* --- Disclosure / accordion (reusable for FAQ; api uses .legacy) --------- */
details.legacy { margin: 66px 0 0; border-top: 1px solid var(--line); }
details.legacy > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 17px 0; font-size: 14px; font-weight: 700; color: var(--muted); transition: color 0.12s; }
details.legacy > summary::-webkit-details-marker { display: none; }
details.legacy > summary:hover { color: var(--ink); }
details.legacy > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
details.legacy > summary::before { content: ""; flex: none; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; }
details.legacy[open] > summary::before { transform: rotate(90deg); }
.legacy-body { padding-bottom: 20px; }
.legacy-body h3:first-of-type { margin-top: 20px; }

/* --- Back-to-hub block --------------------------------------------------- */
.backblock { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 48px 0 0; padding: 17px 20px; background: var(--panel); border-radius: 12px; font-size: 16px; font-weight: 400; color: var(--muted); transition: background 0.14s, color 0.14s; }
.backblock:hover { background: rgba(0, 0, 0, 0.07); color: var(--ink); }
.backblock:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.backblock svg { width: 16px; height: 16px; transition: transform 0.14s; }
.backblock:hover svg { transform: translateX(-3px); }

/* --- Doc-hub cards (link to another doc page) ---------------------------- */
.cards { display: grid; gap: 12px; }
.doc-card { display: block; background: var(--panel); border-radius: 13px; padding: 20px 22px; transition: background 0.14s; }
.doc-card:hover { background: rgba(0, 0, 0, 0.07); }
.doc-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.doc-card .t { display: flex; align-items: center; font-size: 18px; font-weight: 700; letter-spacing: -0.012em; margin-bottom: 5px; }
.doc-card .t svg { width: 17px; height: 17px; margin-left: auto; color: var(--faint); transition: transform 0.14s, color 0.14s; }
.doc-card:hover .t svg { transform: translateX(3px); color: var(--ink); }
.doc-card .d { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 62ch; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 700px) {
  .layout { padding: 0 24px; }
  main { padding-top: 48px; }
  h1 { font-size: 37px; }
  .logo svg { height: 48px; }
}