/* ==========================================================================
   Документація API (/docs): зміст ліворуч (на телефоні — рядок, що гортається),
   розділи з таблицями параметрів і прикладами коду (.code — media.css).
   ========================================================================== */

.docs { display: grid; gap: 28px; padding-top: clamp(24px, 4vw, 48px); padding-bottom: var(--section-y); }
@media (min-width: 1024px) { .docs { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; } }

.docs__nav { min-width: 0; }
.docs__nav-title { margin-bottom: 10px; font-family: var(--font-display); font-weight: 900; font-size: 17px; }
.docs__nav ul { list-style: none; display: grid; gap: 2px; }
.docs__nav a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--r-btn);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: box-shadow 160ms var(--ease-out), color 160ms var(--ease-out);
}
.docs__nav a:hover { color: var(--ink); box-shadow: var(--lift-s); }
.docs__nav a[aria-current='true'] { background: var(--blue); color: #fff; box-shadow: var(--clay); }
@media (min-width: 1024px) {
  .docs__nav { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; }
}
@media (max-width: 1023px) {
  .docs__nav {
    position: sticky;
    top: var(--header-h);
    z-index: 10;
    margin-inline: calc(-1 * var(--gutter));
    padding: 8px var(--gutter);
    background: rgba(232, 236, 244, 0.96);
    box-shadow: 0 10px 20px -14px var(--rule-strong);
  }
  .docs__nav-title { display: none; }
  .docs__nav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .docs__nav ul::-webkit-scrollbar { display: none; }
  .docs__nav a { white-space: nowrap; min-height: 40px; }
}

.docs__main { min-width: 0; display: grid; gap: 0; }
.docs__head { display: grid; gap: 18px; padding-bottom: 40px; }
.docs__facts { display: grid; gap: 10px; margin: 0; padding: 16px 18px; border-radius: var(--r-l); background: var(--paper); box-shadow: var(--press); }
.docs__facts div { display: grid; gap: 2px 18px; }
@media (min-width: 700px) { .docs__facts div { grid-template-columns: 110px minmax(0, 1fr); } }
.docs__facts dt { color: var(--ink-3); font-size: 14px; }
.docs__facts dd { margin: 0; overflow-wrap: anywhere; }
.docs__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.docs__h3 { margin-top: 8px; font-family: var(--font-display); font-weight: 900; font-size: 20px; }

.docs__section { display: grid; gap: 16px; padding: 40px 0; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 64px); }
.docs__section > p,
.docs__list,
.docs__steps { max-width: 72ch; color: var(--ink-2); }
.docs__section .h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: clamp(24px, 3vw, 34px); }
.docs__ep { font-family: var(--font-code); font-stretch: 87.5%; font-size: 14px; font-weight: 500; padding: 4px 12px; border-radius: var(--r-pill); background: var(--ink); color: #fff; letter-spacing: 0; }
.docs__list,
.docs__steps { display: grid; gap: 8px; padding-left: 1.3em; }
.docs__steps b,
.docs__list b { color: var(--ink); }
.docs code:not(pre code) { font-size: 0.86em; padding: 1px 5px; border-radius: var(--r-xs); background: var(--paper-2); color: var(--ink); overflow-wrap: anywhere; }
.docs .code code,
.docs .docs__ep { background: none; padding: 0; }
/* Колір повторено: правило для code в тексті вище за специфічністю й зафарбовувало напис темним */
.docs .docs__ep { padding: 4px 12px; background: var(--ink); color: #fff; }
.req { display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--pink-ink); }

.docs-scroll { overflow-x: auto; }
.docs-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.docs-table th,
.docs-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; line-height: 1.5; }
.docs-table th { font-size: 13px; font-weight: 800; color: var(--ink-3); background: var(--paper-2); }
.docs-table td:first-child { white-space: nowrap; }
.docs-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.docs .code { margin-top: 4px; }
.docs .code pre { font-size: 12.8px; }

/* ---------- Пісочниця «Спробуйте просто тут» ---------- */

.try__panel { display: grid; gap: 20px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--lift); }
.try__key { display: grid; gap: 8px; }
.try__key-row { display: flex; flex-wrap: wrap; gap: 10px; }
.try__key-row .input { flex: 1 1 260px; font-family: var(--font-code); font-stretch: 87.5%; font-size: 14px; }
.try__eps { gap: 10px; }
.try__body { display: grid; gap: 8px; }
.try__json { min-height: 130px; font-family: var(--font-code); font-stretch: 87.5%; font-size: 13.5px; line-height: 1.6; }
.try__send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.try__meta { color: var(--ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.try__out { display: grid; gap: 14px; min-width: 0; }
.try__out pre { max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.code__status[data-ok='false'] { color: #ff9aa9; }
.try__files { display: flex; flex-wrap: wrap; gap: 12px; }
.try__files img { width: 160px; height: 200px; object-fit: cover; border-radius: 18px; box-shadow: var(--lift-s); }
@media (min-width: 1100px) { .try__out { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* ---------- Як у довідниках реальних API: плоска сторінка, зміст із групами, код праворуч ---------- */

.page-docs { background: #fbfbfd; }
.docs { max-width: 1480px; }
@media (min-width: 1024px) { .docs { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; } }

/* Зміст */
.docs__nav-title { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.docs__ver { padding: 1px 8px; border-radius: var(--r-pill); background: var(--paper-2); font-family: var(--font-code); font-size: 12px; font-weight: 600; color: var(--ink-3); }
.docs__search {
  width: 100%;
  height: 38px;
  margin-bottom: 14px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8fa3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") no-repeat 11px center / 16px;
  font: inherit;
  font-size: 14px;
}
.docs__search:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.docs__group { margin: 16px 0 4px; padding: 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.docs__group:first-child { margin-top: 0; }
.docs__nav a { gap: 8px; min-height: 34px; padding: 0 10px; border-radius: 8px; font-size: 14.5px; font-weight: 600; }
.docs__nav a:hover { box-shadow: none; background: var(--paper-2); }
.docs__nav a[aria-current='true'] { background: rgba(85, 102, 240, 0.1); color: var(--blue-ink); box-shadow: none; }
.m { flex: none; min-width: 40px; padding: 1px 0; border-radius: 5px; font-family: var(--font-code); font-stretch: 87.5%; font-size: 10.5px; font-weight: 700; text-align: center; letter-spacing: 0.02em; }
.m--post { background: #e3f6ec; color: #13794a; }
.m--get { background: #e4ecff; color: #2f4fd6; }
@media (max-width: 1023px) {
  .docs__nav-title,
  .docs__search,
  .docs__group { display: none; }
  .docs__nav { background: rgba(251, 251, 253, 0.96); }
}

/* Розділи: без карток, тонкі розділювачі */
.docs__crumb { font-size: 13.5px; font-weight: 700; color: var(--blue-ink); }
.docs__head { gap: 16px; max-width: 820px; }
.docs__head .h1 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.02em; }
.docs__facts { background: #fff; border: 1px solid var(--rule); box-shadow: none; border-radius: 14px; }
.docs__section { padding: 44px 0; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 24px); }
.docs__section .h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.01em; }
.docs .docs__ep { padding: 3px 10px; border-radius: 6px; font-size: 13px; background: var(--paper-2); color: var(--ink); }
.docs__section .h2 .swatch { width: 12px; height: 12px; }
.docs__anchor { margin-left: -4px; color: var(--ink-3); font-size: 0.7em; text-decoration: none; opacity: 0; transition: opacity 120ms; }
.docs__section .h2:hover .docs__anchor,
.docs__anchor:focus-visible { opacity: 1; }

/* Таблиці параметрів */
.docs-scroll { border: 1px solid var(--rule); border-radius: 12px; background: #fff; }
.docs-table { min-width: 480px; }
.docs-table th { background: var(--paper-2); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.docs-table tbody tr:last-child td { border-bottom: 0; }
.docs-table td:first-child code { padding: 0; background: none; color: var(--ink); font-weight: 700; }
.req { display: block; margin: 2px 0 0; font-size: 11.5px; color: #c0283f; }

/* Ендпоінт: опис і параметри ліворуч, код липне праворуч */
.ep { display: grid; gap: 20px; min-width: 0; }
.ep__doc,
.ep__code { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
.ep__doc > p { max-width: 68ch; color: var(--ink-2); }
@media (min-width: 1280px) {
  .ep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .ep__code { position: sticky; top: calc(var(--header-h) + 20px); }
}
.docs [data-snip-spec] { margin-top: 0; }
.docs .code--response { margin-top: 0; }

.try__panel { padding: 22px; border: 1px solid var(--rule); border-radius: 16px; background: #fff; box-shadow: none; }