/* Документация ExpressPay API. Без сборки и внешних зависимостей:
   страница должна открываться, даже когда приложение лежит. */

:root {
    --bg: #ffffff;
    --bg-soft: #f6f7f9;
    --text: #14181f;
    --muted: #5b6472;
    --line: #e3e6ea;
    --accent: #0f6d4f;
    --accent-soft: #e8f3ee;
    --warn-bg: #fdf4e3;
    --warn-line: #e6c88a;
    --code-bg: #14181f;
    --code-text: #e8eaed;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14181f;
        --bg-soft: #1b2028;
        --text: #e8eaed;
        --muted: #9aa4b2;
        --line: #2a313b;
        --accent: #4ec08f;
        --accent-soft: #1a2c25;
        --warn-bg: #2b2418;
        --warn-line: #6b5527;
        --code-bg: #0d1016;
        --code-text: #e8eaed;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 80px; }

header.top {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 10;
}

header.top .wrap { padding-top: 16px; padding-bottom: 0; }

.brand {
    font-weight: 650;
    font-size: 17px;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--text);
}

.brand span { color: var(--accent); }

nav { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; }

nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid transparent;
}

nav a:hover { color: var(--text); }
nav a.active { color: var(--text); border-bottom-color: var(--accent); }

h1 { font-size: 30px; line-height: 1.25; letter-spacing: -0.02em; margin: 36px 0 8px; }
h2 { font-size: 21px; margin: 40px 0 10px; letter-spacing: -0.01em; }
h3 { font-size: 16px; margin: 26px 0 6px; }

.lead { color: var(--muted); font-size: 17px; margin-top: 0; }

p { margin: 12px 0; }

a { color: var(--accent); }

code {
    font-family: var(--mono);
    font-size: 13.5px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
}

pre {
    background: var(--code-bg);
    color: var(--code-text);
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.55;
}

pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
td code { white-space: nowrap; }

.table-wrap { overflow-x: auto; }

.note, .warn {
    border: 1px solid var(--line);
    background: var(--bg-soft);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 20px 0;
    font-size: 15px;
}

.warn { background: var(--warn-bg); border-color: var(--warn-line); }

.note strong, .warn strong { display: block; margin-bottom: 4px; }

.pill {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.method { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.method.post { color: #b3541e; }
.method.get { color: var(--accent); }

ul, ol { padding-left: 22px; }
li { margin: 6px 0; }

footer {
    border-top: 1px solid var(--line);
    margin-top: 60px;
    padding-top: 20px;
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 600px) {
    h1 { font-size: 25px; }
    .wrap { padding: 0 16px 60px; }
    pre { font-size: 12.5px; }
}