/* ────────────────────────────────────────────────────────────────
   «Благородная сталь» — дизайн-система клуба «Заточка».
   Три механики: одна фаска, три зернистости, одна искра.
   Плюс четвёртая, своя: латунь как второй материал.

   Основная тема тёмная — «Сталь»: клуб живёт на вороненой стали.
   Светлая — «Шлам», значения из tokens.json дизайн-системы, подобраны
   по контрасту. Светлая включается настройкой устройства или кнопкой в
   шапке (выбор хранит localStorage, см. zatochkasite.js).
   ──────────────────────────────────────────────────────────────── */

@layer reset, base, layout, components;

:root {
    color-scheme: dark;

    /* поверхности: вороненая сталь */
    --ground: #0e1012;
    --surface: #16191c;
    --surface-raised: #1e2226;
    --hairline: #2a2f34;
    --hairline-bright: #3a4147;

    /* текст */
    --ink: #eceff1;
    --ink-muted: #a3adb4;
    --steel: #78848b;

    /* латунь — материал, не акцент */
    --brass: #c9a227;
    --brass-bright: #e3be45;
    --brass-soft: #2b2412;

    /* искра — единственный акцент, только там, где трение */
    --spark: #e8562a;
    --spark-soft: #2e1a14;

    /* камень — информационное */
    --stone: #4e9e8d;
    --stone-soft: #14302b;

    /* смысловые: в оформлении не участвуют вовсе */
    --ok: #5ba97e;
    --warn: #d0a33a;
    --crit: #e4694e;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* Скруглений в системе нет ни одного. Форму задаёт один угол —
       скос 30 : 12 = 21,8°, настоящий угол заточки кухонного ножа —
       в двух размерах. Инвариант — угол, а не размер: мелким
       элементам достаётся та же фаска, просто короче. */
    --bevel-run: 30px;
    --bevel-rise: 12px;
    --bevel-run-s: 10px;
    --bevel-rise-s: 4px;

    --shadow-edge: 0 1px 0 #ffffff14 inset;
    /* Без разброса: в таком виде значение годится и для box-shadow,
       и внутри filter: drop-shadow(), который единственный обходит
       clip-path — тот срезает наружную тень целиком. */
    --glow-spark: 0 0 12px #e8562a80;

    --font-display: "Geologica", "Golos Text", system-ui, sans-serif;
    --font-body: "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --shell: 74rem;
}

/* «Шлам» — светлая тема. Два входа: настройка устройства, если выбор не
   сделан вручную, и явный выбор кнопкой. Значения — tokens.json системы. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --ground: #e8eae7;
        --surface: #f4f6f3;
        --surface-raised: #ffffff;
        --hairline: #c9cfc9;
        --hairline-bright: #afb7af;
        --ink: #14171a;
        --ink-muted: #454f4e;
        --steel: #5c666b;
        --brass: #8a6b12;
        --brass-bright: #a8861b;
        --brass-soft: #f3ebd2;
        --spark: #c63f17;
        --spark-soft: #f6e2da;
        --stone: #2e6e63;
        --stone-soft: #dce9e5;
        --ok: #2e6446;
        --warn: #8a6408;
        --crit: #a8321b;
        --shadow-edge: 0 1px 0 #ffffff inset;
        --glow-spark: 0 0 12px #c63f1759;
    }
}

:root[data-theme="light"] {
    color-scheme: light;
    --ground: #e8eae7;
    --surface: #f4f6f3;
    --surface-raised: #ffffff;
    --hairline: #c9cfc9;
    --hairline-bright: #afb7af;
    --ink: #14171a;
    --ink-muted: #454f4e;
    --steel: #5c666b;
    --brass: #8a6b12;
    --brass-bright: #a8861b;
    --brass-soft: #f3ebd2;
    --spark: #c63f17;
    --spark-soft: #f6e2da;
    --stone: #2e6e63;
    --stone-soft: #dce9e5;
    --ok: #2e6446;
    --warn: #8a6408;
    --crit: #a8321b;
    --shadow-edge: 0 1px 0 #ffffff inset;
    --glow-spark: 0 0 12px #c63f1759;
}

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        background: var(--ground);
        color: var(--ink-muted);
        font-family: var(--font-body);
        font-size: 1.0625rem;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
    }

    a {
        color: inherit;
    }

    :where(a, button):focus-visible {
        outline: 2px solid var(--spark);
        outline-offset: 4px;
    }

    h1,
    h2 {
        margin: 0;
        color: var(--ink);
        font-family: var(--font-display);
        letter-spacing: -0.03em;
        line-height: 0.94;
        text-wrap: balance;
    }

    h1 {
        max-width: 16ch;
        font-size: clamp(2.75rem, 7vw, 4.75rem);
        font-weight: 700;
    }

    h2 {
        max-width: 20ch;
        font-size: clamp(1.9rem, 4vw, 2.75rem);
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1.05;
    }

    p {
        margin: 0 0 var(--space-4);
        text-wrap: pretty;
    }

    code {
        /* имя токена — одно слово: перенос посреди него читается
           как другое имя */
        white-space: nowrap;
        padding: 0.08em 0.36em;
        border: 1px solid var(--hairline);
        background: var(--surface);
        color: var(--ink);
        font-family: var(--font-mono);
        font-size: 0.86em;
    }
}

@layer layout {
    .shell {
        width: min(100% - var(--space-6), var(--shell));
        margin-inline: auto;
    }

    .skip-link {
        position: fixed;
        z-index: 100;
        top: var(--space-4);
        left: var(--space-4);
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--brass);
        background: var(--surface-raised);
        color: var(--ink);
        translate: 0 -200%;
    }

    .skip-link:focus {
        translate: 0 0;
    }

    /* ── фаска: один срез, всегда один и тот же ──────────────── */
    .bevel {
        clip-path: polygon(
            0 0,
            calc(100% - var(--bevel-run)) 0,
            100% var(--bevel-rise),
            100% 100%,
            0 100%
        );
    }

    .bevel-bl {
        clip-path: polygon(
            0 0,
            100% 0,
            100% 100%,
            var(--bevel-run) 100%,
            0 calc(100% - var(--bevel-rise))
        );
    }

    /* Тот же угол на мелких элементах: пилюля, аватар, дата. */
    .bevel-s {
        clip-path: polygon(
            0 0,
            calc(100% - var(--bevel-run-s)) 0,
            100% var(--bevel-rise-s),
            100% 100%,
            0 100%
        );
    }
}

@layer components {
    /* ── шапка ───────────────────────────────────────────────── */
    .site-header {
        border-bottom: 1px solid var(--hairline);
    }

    .header-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-5);
        padding-block: var(--space-5);
    }

    .wordmark {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        color: var(--ink);
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        text-decoration: none;
    }

    .wordmark svg {
        width: 58px;
        height: auto;
        flex: none;
    }

    .site-header nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-6);
    }

    .site-header nav a {
        position: relative;
        padding-bottom: var(--space-1);
        color: var(--ink-muted);
        font-size: 0.95rem;
        text-decoration: none;
    }

    .site-header nav a::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--brass), var(--brass-bright));
        scale: 0 1;
        transform-origin: left;
        transition: scale 0.25s ease-out;
    }

    .site-header nav a:hover,
    .site-header nav a:focus-visible {
        color: var(--ink);
    }

    .site-header nav a:hover::after,
    .site-header nav a:focus-visible::after {
        scale: 1 1;
    }

    /* переключатель темы — метка, а не пиктограмма: знак в системе один */
    .theme-toggle {
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--hairline-bright);
        background: transparent;
        color: var(--ink-muted);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s;
    }

    .theme-toggle:hover {
        border-color: var(--brass);
        color: var(--ink);
    }

    /* ── надзаголовок и метка зернистости ─────────────────────── */
    .eyebrow,
    .grit {
        margin: 0;
        color: var(--steel);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .eyebrow {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        margin-bottom: var(--space-6);
    }

    .eyebrow::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--hairline);
    }

    /* ── главное действие ─────────────────────────────────────── */
    .button {
        position: relative;
        z-index: 0;
        display: inline-block;
        min-height: 3rem;
        padding: var(--space-4) var(--space-6);
        color: var(--ground);
        font-size: 1.0625rem;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
    }

    .button-face {
        position: absolute;
        z-index: -1;
        inset: 0;
        overflow: hidden;
        background: var(--ink);
        clip-path: polygon(
            0 0,
            100% 0,
            100% 100%,
            var(--bevel-run) 100%,
            0 calc(100% - var(--bevel-rise))
        );
    }

    /* неподвижный латунный кант по нижней кромке */
    .button-face::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent,
            var(--brass) 18%,
            var(--brass-bright) 50%,
            var(--brass) 82%,
            transparent
        );
    }

    /* искра проходит по канту — трение, один раз, на наведении */
    .button-face::after {
        content: "";
        position: absolute;
        left: -35%;
        bottom: 0;
        width: 35%;
        height: 2px;
        background: linear-gradient(
            90deg,
            transparent,
            var(--brass-bright),
            var(--spark),
            transparent
        );
        transition: left 0.6s ease-out;
    }

    .button:hover .button-face::after,
    .button:focus-visible .button-face::after {
        left: 100%;
    }

    /* Нагрев идёт фильтром на самой кнопке: box-shadow на .button-face
       съедался бы его же clip-path. drop-shadow повторяет силуэт среза. */
    .button:hover {
        filter: drop-shadow(var(--glow-spark));
    }

    .button-ghost {
        color: var(--ink);
    }

    /* Граница на элементе с clip-path теряется на диагонали: срез
       остаётся без линии, и угол читается как открытый. Поэтому
       «граница» вторичной кнопки — это заливка, из-под которой
       вырезана такая же фаска, отступившая на пиксель. */
    .button-ghost .button-face {
        background: var(--steel);
    }

    .button-ghost .button-face::before {
        inset: 1px;
        height: auto;
        background: var(--ground);
        clip-path: polygon(
            0 0,
            100% 0,
            100% 100%,
            var(--bevel-run) 100%,
            0 calc(100% - var(--bevel-rise))
        );
    }

    /* Искра и латунный кант принадлежат главному действию.
       На вторичном они означали бы два главных действия на экран. */
    .button-ghost .button-face::after {
        display: none;
    }

    .button-ghost:hover .button-face {
        background: var(--brass);
    }

    /* ── первый экран ─────────────────────────────────────────── */
    .hero {
        padding-block: var(--space-10) var(--space-9);
    }

    .hero-rule {
        width: 220px;
        height: 2px;
        margin-block: var(--space-6);
        background: linear-gradient(
            90deg,
            var(--brass),
            var(--brass-bright),
            transparent
        );
    }

    .hero-lead {
        max-width: 52ch;
        margin-bottom: var(--space-7);
        color: var(--ink-muted);
        font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    }

    /* ── секции ───────────────────────────────────────────────── */
    .section {
        padding-block: var(--space-9);
    }

    .section-grid {
        display: grid;
        grid-template-columns: 9rem minmax(0, 1fr);
        gap: var(--space-7);
        align-items: start;
    }

    .grit span {
        display: block;
        margin-top: var(--space-2);
        color: var(--steel);
        font-size: 0.68rem;
        letter-spacing: 0.1em;
    }

    .section-copy {
        max-width: 56rem;
    }

    /* P400: рабочая поверхность — панель с линией и срезом */
    .section-panel {
        margin-block: var(--space-6);
        padding: var(--space-7);
        background: var(--surface);
        outline: 1px solid var(--hairline);
        outline-offset: -1px;
    }

    .rich-text {
        margin-top: var(--space-5);
        font-size: 1.0625rem;
    }

    .rich-text > * {
        max-width: 65ch;
    }

    .rich-text h3 {
        margin: var(--space-6) 0 var(--space-2);
        color: var(--ink);
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 500;
        letter-spacing: -0.02em;
    }

    .rich-text li + li {
        margin-top: var(--space-2);
    }

    /* ── финальный призыв: P2000 ──────────────────────────────── */
    .closing {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: var(--space-7);
        margin-block: var(--space-9);
        padding: var(--space-7);
        background: var(--surface-raised);
        box-shadow: var(--shadow-edge);
    }

    .closing p {
        max-width: 48ch;
        margin-bottom: 0;
    }

    /* ── вход в клуб: кнопка и строка о том, что будет дальше ──── */
    .join {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .join-hint {
        max-width: 40ch;
        margin: 0;
        color: var(--ink-muted);
        font-size: 0.875rem;
    }

    /* ── вопросы и ответы: нативный <details>, находится поиском ── */
    .faq {
        margin-top: var(--space-6);
        border-top: 1px solid var(--hairline);
    }

    .faq details {
        padding-block: var(--space-4);
        border-bottom: 1px solid var(--hairline);
    }

    .faq summary {
        cursor: pointer;
        color: var(--ink);
        font-family: var(--font-display);
        font-weight: 600;
    }

    .faq summary:focus-visible {
        outline: 2px solid var(--brass);
        outline-offset: 4px;
    }

    .faq details[open] summary {
        color: var(--brass-bright);
    }

    .faq .rich-text {
        margin-top: var(--space-3);
        color: var(--ink-muted);
    }

    /* ── страница статьи ──────────────────────────────────────── */
    .article {
        width: min(100% - var(--space-6), 90rem);
        min-height: 70vh;
        padding-block: var(--space-7) var(--space-9);
    }

    .back-link {
        font-family: var(--font-mono);
        font-size: 0.82rem;
        letter-spacing: 0.06em;
        text-decoration: none;
        text-transform: uppercase;
        color: var(--steel);
    }

    .back-link:hover {
        color: var(--brass);
    }

    .article-header {
        max-width: 70rem;
    }

    .article-intro {
        max-width: none;
        margin-top: var(--space-5);
        font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    }

    .article-body {
        max-width: 70rem;
        margin-top: var(--space-7);
    }

    .article-body > * {
        max-width: none;
    }

    .article-layout {
        max-width: 70rem;
        margin: var(--space-8) auto 0;
    }

    .article-layout-with-rail {
        display: grid;
        grid-template-columns: 12rem minmax(0, 1fr);
        gap: var(--space-8);
        max-width: none;
    }

    .article-content {
        min-width: 0;
        max-width: 70rem;
    }

    .article-rail {
        position: sticky;
        top: var(--space-5);
        align-self: start;
        max-height: calc(100dvh - var(--space-8));
        padding-right: var(--space-5);
        border-right: 1px solid var(--hairline);
        overflow-y: auto;
    }

    .article-rail-title {
        margin: 0 0 var(--space-4);
        color: var(--steel);
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .article-rail ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .article-rail li + li {
        margin-top: var(--space-1);
    }

    .article-rail-link {
        display: block;
        min-height: 1.5rem;
        padding: var(--space-2) 0 var(--space-2) var(--space-3);
        border-left: 2px solid transparent;
        color: var(--ink-muted);
        font-size: 0.9rem;
        line-height: 1.35;
        text-decoration: none;
    }

    .article-rail-link:hover,
    .article-rail-link:focus-visible {
        border-left-color: var(--spark);
        color: var(--ink);
    }

    .article-body h2 {
        margin: var(--space-8) 0 var(--space-4);
        scroll-margin-top: var(--space-5);
    }

    .article-body h3 {
        margin: var(--space-6) 0 var(--space-3);
    }

    .article-body p {
        margin: 0 0 var(--space-4);
    }

    .article-body :is(ul, ol) {
        margin: 0 0 var(--space-5);
        padding-left: var(--space-6);
    }

    .article-body blockquote {
        margin: 0 0 var(--space-5);
        padding-left: var(--space-5);
        border-left: 2px solid var(--brass);
    }

    .article-body > :first-child {
        margin-top: 0;
    }

    .article-body > :last-child {
        margin-bottom: 0;
    }

    .article-action {
        margin: var(--space-7) 0 0;
    }

    /* ── страница ошибки ──────────────────────────────────────── */
    .fault {
        display: grid;
        align-content: center;
        gap: var(--space-5);
        min-height: 68vh;
        padding-block: var(--space-9);
    }

    .fault-code {
        color: var(--spark);
        font-family: var(--font-display);
        font-size: clamp(4rem, 14vw, 9rem);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.04em;
        line-height: 1;
    }

    .fault p {
        max-width: 52ch;
    }

    .fault-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
        margin-top: var(--space-3);
    }

    /* ── подвал ───────────────────────────────────────────────── */
    .site-footer {
        border-top: 1px solid var(--hairline);
    }

    .footer-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-5);
        padding-block: var(--space-7);
        font-family: var(--font-mono);
        font-size: 0.78rem;
        color: var(--steel);
    }

    .site-footer p {
        margin: 0;
    }

    .footer-legal {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
    }
}

@media (max-width: 52rem) {
    .wordmark {
        font-size: 1.1rem;
    }

    .wordmark svg {
        width: 44px;
    }

    .section-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .hero {
        padding-block: var(--space-8) var(--space-7);
    }

    .section {
        padding-block: var(--space-8);
    }

    .section-panel,
    .closing {
        padding: var(--space-5);
    }
}

@media (max-width: 62rem) {
    .article-layout-with-rail {
        grid-template-columns: 1fr;
        gap: var(--space-7);
    }

    .article-rail {
        position: static;
        max-height: none;
        padding: 0 0 var(--space-5);
        border-right: 0;
        border-bottom: 1px solid var(--hairline);
        overflow-y: visible;
    }

    .article-rail ol {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-5);
    }

    .article-rail li + li {
        margin-top: 0;
    }

    .article-rail-link {
        padding: var(--space-2) 0;
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .site-header nav a::after {
        transition: none;
    }

    .button-face::after {
        transition: none;
        left: -35%;
    }

    .button:hover .button-face::after,
    .button:focus-visible .button-face::after {
        left: -35%;
    }
}

/* Градиенты и тени в режиме высокой контрастности пропадают,
   поэтому кант и панель получают настоящие границы. */
@media (forced-colors: active) {
    .button {
        color: ButtonText;
    }

    .button-face {
        border: 1px solid ButtonText;
        background: ButtonFace;
    }

    .button-face::before,
    .button-face::after {
        display: none;
    }

    .hero-rule {
        background: CanvasText;
    }

    .closing {
        border: 1px solid CanvasText;
    }

    .site-header nav a::after {
        background: LinkText;
    }
}