/*
 * ═══════════════════════════════════════════════════════════════════════
 *  Iron Ledger — оформление раздела статей.
 *
 *  🔴 Файл СОБРАН генератором (hammerhall-docs/ledger/build.py). Правится
 *  исходник assets/ledger.css там, а не этот файл: следующая сборка
 *  перезапишет правку молча.
 *
 *  🔑 Токены ниже — не копия, а выписка из src/index.css приложения,
 *  сделанная при сборке. Поменялась палитра сайта — пересобрать раздел.
 *  Своих цветов здесь только подсветка кода (--code-*): у приложения
 *  её нет.
 * ═══════════════════════════════════════════════════════════════════════
 */

:root {
    --steel-900: #0E1114;
    --steel-800: #141920;
    --steel-700: #1B222B;
    --steel-600: #27313D;
    --steel-500: #5C6B7A;
    --steel-300: #7C8D9D;
    --steel-100: #A8B6C4;
    --steel-000: #E8EEF4;
    --heat-1: #7A2E12;
    --heat-2: #C0451A;
    --heat-3: #E8712F;
    --heat-4: #F0A03C;
    --heat-5: #FFD9A0;
    --bg: var(--steel-900);
    --bg-panel: var(--steel-800);
    --bg-sunken: var(--steel-700);
    --border: var(--steel-600);
    --divider: var(--steel-500);
    --border-field: var(--steel-500);
    --text: var(--steel-100);
    --text-muted: var(--steel-300);
    --text-strong: var(--steel-000);
    --accent: var(--heat-3);
    --accent-ink: var(--steel-900);
    --calendar-1: var(--heat-1);
    --calendar-2: var(--heat-2);
    --calendar-3: var(--heat-3);
    --calendar-4: var(--heat-4);
    --progress: var(--heat-2);
    --ok-ink: #4FB477;
    --ok-bg: #10241A;
    --warn-ink: #D9A03C;
    --warn-bg: #26200F;
    --bad-ink: #E05252;
    --bad-bg: #2A1517;
    --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color-scheme: dark;
}

[data-theme='light'] {
    --bg: #F7F9FB;
    --bg-panel: #FFFFFF;
    --bg-sunken: #EDF1F5;
    --border: #D8DFE6;
    --divider: #9AA7B4;
    --border-field: #78848F;
    --text: #2C3A47;
    --text-muted: #54606D;
    --text-strong: #0E1114;
    --accent: #A8390E;
    --accent-ink: #FFFFFF;
    --ok-ink: #1B6E3C;
    --ok-bg: #E8F5EC;
    --warn-ink: #7A5300;
    --warn-bg: #FDF3DC;
    --bad-ink: #B32323;
    --bad-bg: #FCEBEB;
    --calendar-1: #A8DDB5;
    --calendar-2: #5DBB7A;
    --calendar-3: #2E9A52;
    --calendar-4: #1B6E3C;
    --progress: #2E9A52;
    color-scheme: light;
}

:root {
    --code-kw: var(--heat-3);
    --code-ann: var(--heat-4);
    --code-str: #6FBF8B;
    --code-num: #D9A03C;
    --code-type: #8CB4D8;
    --code-com: #8596A6;

    font: 17px/1.55 var(--sans);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

[data-theme='light'] {
    --code-kw: #A8390E;
    --code-ann: #7A5300;
    --code-str: #1B6E3C;
    --code-num: #8A4A00;
    --code-type: #1F5A8A;
    --code-com: #54606D;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

a {
    color: var(--accent);
    text-underline-offset: 2px;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: 1rem;
    top: 0.5rem;
    z-index: 10;
    padding: 0.4rem 0.8rem;
    background: var(--bg-panel);
}

.muted {
    color: var(--text-muted);
}

/* ── Шапка: та же, что у кабинета ─────────────────────────────────── */

.ledger-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel);
}

.brand {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-strong);
    text-decoration: none;
}

.section {
    color: var(--text-muted);
    text-decoration: none;
}

.section:hover,
.brand:hover {
    color: var(--accent);
}

.spacer {
    flex: 1;
}

.theme-switch {
    min-width: 2.25rem;
    padding: 0.2rem 0.55rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text);
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

.theme-switch:hover {
    color: var(--accent);
    border-color: var(--divider);
}

/* ── Колонка текста ────────────────────────────────────────────────── */

.ledger {
    flex: 1;
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

h1,
h2,
h3 {
    color: var(--text-strong);
    font-weight: 600;
    line-height: 1.25;
    scroll-margin-top: 1rem;
}

h1 {
    margin: 0 0 0.5rem;
    font-size: 1.9rem;
    letter-spacing: -0.02em;
}

h2 {
    margin: 2.5rem 0 0.75rem;
    font-size: 1.35rem;
}

h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.1rem;
}

p {
    margin: 0 0 1rem;
    line-height: 1.65;
}

ul,
ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
    line-height: 1.65;
}

li {
    margin: 0.3rem 0;
}

li > p {
    margin: 0;
}

li::marker {
    color: var(--accent);
}

strong {
    color: var(--text-strong);
    font-weight: 600;
}

hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--border);
}

.anchor {
    margin-left: 0.4rem;
    color: var(--divider);
    text-decoration: none;
    opacity: 0;
}

h2:hover .anchor,
h3:hover .anchor,
.anchor:focus-visible {
    opacity: 1;
}

.crumbs {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.crumbs a {
    color: var(--text-muted);
}

.meta {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.intro {
    font-size: 1.1rem;
    color: var(--text);
}

/* Подводка статьи: для кого, что будет, откуда статья. */
blockquote {
    margin: 1.25rem 0 1.5rem;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 3px solid var(--divider);
}

blockquote.lead {
    margin: 1.5rem 0 2rem;
    padding: 1rem 1.25rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* ── Код ───────────────────────────────────────────────────────────── */

code {
    font-family: var(--mono);
    font-size: 0.88em;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

:not(pre) > code {
    padding: 0.1em 0.35em;
    background: var(--bg-sunken);
    border-radius: 4px;
}

.code {
    position: relative;
    margin: 0 0 1.25rem;
}

pre {
    margin: 0;
    padding: 0.9rem 1rem;
    overflow-x: auto;
    font-size: 0.84rem;
    line-height: 1.5;
    tab-size: 4;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
}

pre code {
    font-size: inherit;
    color: var(--text);
    overflow-wrap: normal;
    white-space: pre;
}

.copy {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    padding: 0.15rem 0.5rem;
    font: inherit;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s;
}

.code:hover .copy,
.copy:focus-visible,
.copy.done {
    opacity: 1;
}

/* Пальцем не наведёшь: на телефоне кнопка видна всегда — и не должна
   закрывать первую строку кода. */
@media (hover: none) {
    .copy {
        opacity: 1;
    }

    .code pre {
        padding-top: 2.2rem;
    }
}

/* Подсветка (классы Pygments). Цвета — токенами: тема меняет и их. */
.k, .kc, .kd, .kn, .kp, .kr, .ow { color: var(--code-kw); }
.kt, .nc, .nt, .nn { color: var(--code-type); }
.nd { color: var(--code-ann); }
.s, .s1, .s2, .sa, .sb, .sc, .sd, .se, .sh, .si, .sr, .ss, .sx, .dl { color: var(--code-str); }
.m, .mb, .mf, .mh, .mi, .mo, .il { color: var(--code-num); }
.c, .c1, .ch, .cm, .cp, .cpf, .cs { color: var(--code-com); }
.nf, .fm { color: var(--text-strong); }
.err { color: inherit; background: none; border: none; }

/*
 * На широком экране код шире колонки текста: строки примеров — до 120
 * знаков, и комментарий в конце строки — часть объяснения. Спрятанный
 * за прокруткой, он не читается.
 */
@media (min-width: 52rem) {
    .code {
        --code-width: min(66rem, calc(100vw - 4rem));
        width: var(--code-width);
        margin-left: calc((100% - var(--code-width)) / 2);
    }
}

/* ── Таблицы ───────────────────────────────────────────────────────── */

.table-wrap {
    margin: 0 0 1.25rem;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

th,
td {
    padding: 0.45rem 0.6rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

th {
    color: var(--text-strong);
    font-weight: 600;
    border-bottom-color: var(--divider);
}

/* ── После статьи ──────────────────────────────────────────────────── */

.pager {
    display: flex;
    gap: 1rem;
    margin: 3rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.pager a {
    flex: 1;
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-strong);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.pager a:hover {
    border-color: var(--accent);
}

.pager span {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pager .next {
    text-align: right;
}

.pager .next:only-child {
    margin-left: auto;
    max-width: 50%;
}

.panel {
    margin: 2rem 0 0;
    padding: 1.25rem 1.5rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.panel h2 {
    margin-top: 0;
    font-size: 1.2rem;
}

.panel p:last-child {
    margin-bottom: 0;
}

.cta {
    border-left: 3px solid var(--accent);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

a.primary {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    font-weight: 600;
    color: var(--accent-ink);
    background: var(--accent);
    border-radius: 6px;
    text-decoration: none;
}

a.primary:hover {
    filter: brightness(1.12);
}

.soon {
    list-style: none;
    padding: 0;
}

.soon li {
    display: flex;
    align-items: baseline;
}

.soon .num {
    flex: none;
}

.num {
    display: inline-block;
    min-width: 2.2rem;
    margin-right: 0.4rem;
    font-family: var(--mono);
    font-size: 0.85em;
    color: var(--accent);
}

/* ── Оглавление раздела ────────────────────────────────────────────── */

.cycle h2 {
    margin-top: 2.5rem;
}

.cards {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.card {
    margin: 0 0 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.card > a {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-strong);
    text-decoration: none;
}

.card > a:hover {
    color: var(--accent);
}

.card p {
    margin: 0 0 0.3rem;
}

.card p.muted {
    margin: 0;
    font-size: 0.9rem;
}

.soon-card {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.65rem 1.25rem;
    color: var(--text-muted);
    border-style: dashed;
}

.soon-card .title {
    flex: 1;
}

.soon-card .num {
    color: var(--text-muted);
}

.tag {
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ── Подвал ────────────────────────────────────────────────────────── */

.ledger-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

.ledger-footer p {
    margin: 0;
}

.ledger-footer a {
    color: var(--text-muted);
}

/* Та же единственная контрольная точка, что у приложения. */
@media (max-width: 600px) {
    :root {
        font-size: 16px;
    }

    .ledger-top {
        gap: 0.75rem;
        padding: 0.7rem 1rem;
    }

    .ledger {
        padding: 1.25rem 1rem 2.5rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    pre {
        font-size: 0.8rem;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin: 0 -1rem;
    }

    .code .copy {
        right: -0.6rem;
    }

    blockquote.lead,
    .panel {
        padding: 0.9rem 1rem;
    }

    .pager {
        flex-direction: column;
    }

    .pager .next:only-child {
        max-width: none;
    }
}