/*
 * os-dev.css — страница okeysait.ru/developers (30.10.2026): документация API для разработчиков.
 * Тот же «привычный» язык, что у остальных страниц сайта: белый фон, чернильный текст, линии, фиолетовый только на действии,
 * без значков в плашках и теней. Палитра --os-* — из okeano-site.css. Подключается после os-pages.css.
 */
.op .dv{padding:0 0 88px}
.dv-head{padding:0 0 30px;border-bottom:1.5px solid var(--os-ink)}
.dv-head h1{max-width:none;margin-top:22px;font-size:clamp(30px,3.8vw,46px);line-height:1.06;letter-spacing:-.03em}
.dv-head p{max-width:42em;margin-top:14px!important;font-size:18px!important;line-height:1.5!important}
.dv-head__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:24px}
.dv-head__url{margin-top:22px!important;font-size:14.5px!important}

.dv-in{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px;align-items:start;margin-top:34px}

/* ——— оглавление: слева, прилипает при прокрутке; на узких экранах — лента ссылок ——— */
.dv-nav{position:sticky;top:calc(var(--os-h) + 24px);display:grid;margin:0;padding:0;list-style:none;border-left:1.5px solid var(--os-line)}
.dv-nav a{display:block;margin-left:-1.5px;padding:7px 0 7px 14px;border-left:1.5px solid transparent;font-size:14.5px;line-height:1.35;color:var(--os-mut)!important;text-decoration:none!important;transition:color .2s,border-color .25s,padding-left .3s var(--os-ease)}
.dv-nav a:hover{color:var(--os-ink)!important}
.dv-nav a.is-on{padding-left:18px;border-left-color:var(--os-vio);color:var(--os-vio)!important;font-weight:600}

.dv-body{min-width:0;max-width:50em}
.op .dv-sec{padding:0;margin-bottom:56px;scroll-margin-top:calc(var(--os-h) + 16px)}
.dv-sec:last-child{margin-bottom:0}
.dv-sec h2{margin:0 0 12px;font-size:clamp(25px,2.7vw,32px);line-height:1.15;letter-spacing:-.025em}
.dv-sec h3{margin:30px 0 8px;font-size:19px;line-height:1.3;letter-spacing:-.01em}
.dv-sec p{max-width:44em;margin:10px 0 0;font-size:16.5px;line-height:1.6}
.dv-sec ul,.dv-sec ol.dv-list{margin:12px 0 0 1.25em!important;padding:0;list-style:disc}
.dv-sec ul li{list-style:disc}
.dv-sec li{margin:6px 0;font-size:16.5px;line-height:1.55;color:var(--os-mut)}
.dv-sec li b,.dv-sec p b{font-weight:600;color:var(--os-ink)}
.dv-sec a:not(.oh-btn){color:var(--os-vio)!important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.dv code{padding:.1em .38em;border-radius:6px;background:var(--os-mist);font:500 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--os-ink);overflow-wrap:anywhere}

/* ——— три шага ——— */
.dv-steps{counter-reset:s;margin:20px 0 0;padding:0;list-style:none}
.dv-steps > li{counter-increment:s;position:relative;margin:0;padding:0 0 26px 54px}
.dv-steps > li::before{content:counter(s);position:absolute;top:0;left:0;width:36px;height:36px;border:1.5px solid var(--os-line);border-radius:50%;background:#fff;font-size:15px;font-weight:700;line-height:33px;text-align:center;color:var(--os-ink)}
.dv-steps > li::after{content:"";position:absolute;top:42px;bottom:6px;left:17.5px;width:1.5px;background:var(--os-line)}
.dv-steps > li:last-child{padding-bottom:0}
.dv-steps > li:last-child::after{content:none}
.dv-steps b{display:block;font-size:18px;line-height:1.3;letter-spacing:-.01em;color:var(--os-ink)}
.dv-steps p{margin-top:6px}

/* ——— пояснение: линия слева, без заливки карточкой ——— */
.dv-note{margin:22px 0 0;padding:4px 0 4px 18px;border-left:3px solid var(--os-ink)}
.dv-note p{margin:0;font-size:16px}
.dv-note p + p{margin-top:8px}

/* ——— код ——— */
.dv-code{margin:14px 0 0;border:1px solid var(--os-line);border-radius:14px;background:var(--os-mist);overflow:hidden}
.dv-code__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;padding:0 10px 0 16px;border-bottom:1px solid var(--os-line);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--os-mut)}
.dv-copy{padding:6px 8px;border:0;background:transparent;font:inherit;font-size:13px;letter-spacing:0;text-transform:none;color:var(--os-mut);cursor:pointer;transition:color .2s}
.dv-copy:hover{color:var(--os-ink)}
.dv-copy.is-copied{color:#1c8a4e}
.dv-copy:focus-visible{outline:2px solid var(--os-vio);outline-offset:2px;border-radius:6px}
.dv-code pre{margin:0;padding:14px 16px 16px;overflow-x:auto;background:transparent;border:0;tab-size:2;-webkit-text-size-adjust:100%}
.dv-code pre code{display:block;padding:0;background:none;font:500 13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--os-ink);white-space:pre;overflow-wrap:normal}

/* ——— таблицы ——— */
.dv-tbl{margin-top:16px;border-top:1.5px solid var(--os-ink);overflow-x:auto}
.dv-tbl table{width:100%;border-collapse:collapse;font-size:15px}
.dv-tbl th{padding:10px 16px 10px 0;border-bottom:1px solid var(--os-line);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-align:left;text-transform:uppercase;color:var(--os-mut)}
.dv-tbl td{padding:11px 16px 11px 0;border-bottom:1px solid var(--os-line);vertical-align:top;font-size:15px;line-height:1.45;color:var(--os-mut)}
.dv-tbl td:last-child,.dv-tbl th:last-child{padding-right:0}
.dv-tbl td b{font-weight:600;color:var(--os-ink)}
.dv-tbl td small{display:inline;margin-left:8px;font-size:13px;color:var(--os-mut);white-space:nowrap}
.dv-tbl code{white-space:nowrap}
.dv-m{display:inline-block;min-width:3.6em;padding:2px 7px;border-radius:6px;border:1px solid var(--os-line);font:700 12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:center;color:var(--os-ink)}
.dv-tbl--methods td:first-child{width:1%;white-space:nowrap}
.dv-tbl--methods td:nth-child(2){white-space:nowrap}

.dv-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.dv-end{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:18px}

@media (max-width:1100px){
  .dv-in{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:22px}
  .dv-nav{position:static;display:flex;gap:4px 18px;overflow-x:auto;border-left:0;border-bottom:1px solid var(--os-line);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dv-nav::-webkit-scrollbar{display:none}
  .dv-nav a{flex:none;margin:0;padding:9px 0;border-left:0;border-bottom:1.5px solid transparent;white-space:nowrap}
  .dv-nav a.is-on{padding-left:0;border-bottom-color:var(--os-vio)}
}
@media (max-width:700px){
  .dv-head{padding-bottom:24px}
  .dv-head p{font-size:17px!important}
  .op .dv-sec{margin-bottom:44px}
  .dv-two{grid-template-columns:minmax(0,1fr)}
  .dv-code pre{padding:12px 14px 14px}
  .dv-tbl td + td code{white-space:normal}
  .dv-tbl td small{display:block;margin:3px 0 0}   /* код ошибки под названием, иначе таблица шире экрана */
  .dv-code pre code{font-size:12.5px}
  /* таблица методов: строка собирается в карточку — метод и путь, затем право и описание */
  .dv-tbl--methods table,.dv-tbl--methods tbody,.dv-tbl--methods tr,.dv-tbl--methods td{display:block}
  .dv-tbl--methods thead{display:none}
  .dv-tbl--methods tr{padding:12px 0;border-bottom:1px solid var(--os-line)}
  .dv-tbl--methods td{padding:0;border:0}
  .dv-tbl--methods td:first-child{display:inline-block;width:auto;margin-right:8px;vertical-align:middle}
  .dv-tbl--methods td:nth-child(2){display:inline;vertical-align:middle}
  .dv-tbl--methods td:nth-child(3){margin-top:6px;font-size:13.5px}
  .dv-tbl--methods td:nth-child(3)::before{content:"право: "}
  .dv-tbl--methods td:nth-child(4){margin-top:4px}
}