/*
 * SeoEngine design system — «строгий справочник».
 * Calm reference look: light page, white cards with thin borders, one accent colour, serif headings over a
 * system sans body, tabular figures for data. Own CSS only: no frameworks, no web fonts, no icon fonts.
 *
 * Theming: a site adds a small theme file after this one and overrides tokens only, e.g.
 *   :root { --c-accent: …; --c-link: …; --c-accent-soft: …; }
 *   @media (prefers-color-scheme: dark) { :root { --c-accent: …; … } }
 * Every colour pair below passes WCAG AA (text ≥ 4.5:1) in both schemes; keep that when overriding.
 */

/* ---------- Tokens ---------- */
:root {
    color-scheme: light dark;

    /* Colour (light). Contrast on --c-surface: text 16.4:1, muted 6.0:1 (5.3:1 on --c-surface-alt), accent/link 7.3:1. */
    --c-bg: #f5f7f9;            /* page background */
    --c-surface: #fff;          /* cards, header */
    --c-surface-alt: #eef1f4;   /* footer, table head, ad placeholders */
    --c-text: #17202a;
    --c-muted: #586473;
    --c-border: #dce1e7;
    --c-border-strong: #b9c2cc;
    --c-accent: #0b5d7a;        /* deep teal-blue: buttons, focus, highlights */
    --c-accent-soft: #e6f0f4;   /* tinted backgrounds (callouts, chips hover) */
    --c-on-accent: #fff;        /* text on --c-accent */
    --c-link: #0b5d7a;
    --c-warn-soft: #fbf3e3;
    --c-warn-border: #d9a441;
    --c-focus: #0b5d7a;
    --shadow: 0 1px 2px rgba(16, 24, 32, .05);
    --shadow-pop: 0 6px 24px rgba(16, 24, 32, .14);

    /* Type */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
    --fs-xs: .8125rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-h3: 1.125rem;
    --fs-h2: 1.3125rem;
    --fs-h1: 1.75rem;
    --fs-display: 2rem;         /* big data value (e.g. a phone number) */
    --lh: 1.55;

    /* Space (4px grid), radius, layout */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --gap: 16px;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --container: 1040px;
    --sidebar: 300px;
    --measure: 68ch;

    /* Reserved heights of ad slots that have content (avoid layout shift while the ad loads). */
    --ad-h-top: 100px;
    --ad-h-in-content: 250px;
    --ad-h-sidebar: 600px;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Contrast on --c-surface: text 13.8:1, muted 7.0:1, accent 7.6:1, link 9.0:1. */
        --c-bg: #0f1418;
        --c-surface: #161d23;
        --c-surface-alt: #1c252c;
        --c-text: #e3e8ed;
        --c-muted: #9ba7b3;
        --c-border: #2b3640;
        --c-border-strong: #3d4a56;
        --c-accent: #62b9d6;
        --c-accent-soft: #19303a;
        --c-on-accent: #071a21;
        --c-link: #7cc7e0;
        --c-warn-soft: #2d2615;
        --c-warn-border: #a37a2c;
        --c-focus: #7cc7e0;
        --shadow: none;
        --shadow-pop: 0 6px 24px rgba(0, 0, 0, .5);
    }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }

/* Sticky footer: body is a column, the page area grows, header/footer keep their size. */
body {
    /* min-height, not height: a fixed body height would let long pages overflow past the footer. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font: var(--fs-base)/var(--lh) var(--font);
    color: var(--c-text);
    background: var(--c-bg);
    overflow-wrap: break-word; /* long e-mails, URLs and names never widen the page */
}

a { color: var(--c-link); text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }
p, ul, ol, dl, table { margin: 0 0 var(--s-4); }

h1, h2, h3 {
    margin: var(--s-6) 0 var(--s-3);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.005em;
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); margin-top: 0; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
:where(.card, .section) > :is(h1, h2, h3):first-child { margin-top: 0; }
:where(.card, .section) > :last-child { margin-bottom: 0; }

:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 2px; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: var(--s-2); top: -100px; z-index: 200; padding: var(--s-2) var(--s-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.skip-link:focus { top: var(--s-2); }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gap);
}

/* ---------- Header ---------- */
.site-header {
    flex-shrink: 0;
    border-top: 3px solid var(--c-accent);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
}
.site-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-5);
    min-height: 56px;
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
}
.site-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--c-text);
    text-decoration: none;
}
.site-logo svg { flex: none; color: var(--c-accent); }

/* Compact search in the header: full width row on mobile, right side on desktop. */
.header-search { display: flex; flex: 1 1 100%; min-width: 0; gap: var(--s-2); }
/* width: 100% keeps the input's intrinsic width (~20 chars) out of the min-content size: no overflow at 320px. */
.header-search input { flex: 1; width: 100%; min-width: 0; padding: 7px 12px; }
.header-search button { padding: 7px 14px; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { flex-shrink: 0; }
.breadcrumbs ol { list-style: none; margin: var(--s-1) auto 0; padding: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.breadcrumbs li { display: inline; }
.breadcrumbs li + li::before { content: "/"; margin: 0 .5em; color: var(--c-border-strong); }
.breadcrumbs a { display: inline-block; min-height: 44px; padding: 11px 0; color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-link); }

/* ---------- Page grid ---------- */
.page { flex: 1 0 auto; display: grid; gap: var(--s-5); align-items: start; padding-top: var(--s-4); padding-bottom: var(--s-7); }
.content { min-width: 0; }
.content > :last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-alt);
    color: var(--c-muted);
    font-size: var(--fs-sm);
    padding: var(--s-5) 0;
}
.site-footer p { margin: 0 0 var(--s-2); max-width: var(--measure); }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--c-text); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: calc(-1 * var(--s-2)) 0 var(--s-2); }
.footer-links a { display: inline-block; min-height: 44px; padding: 11px 0; }

/* ---------- Cards & sections ---------- */
.card {
    margin-bottom: var(--s-5);
    padding: var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow);
}
.card--accent { border-top: 3px solid var(--c-accent); }
.section { margin-bottom: var(--s-6); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); margin-bottom: var(--s-3); }
.section-head > :is(h2, h3) { margin: 0; }
.section-head .hint { font-size: var(--fs-sm); color: var(--c-muted); }
.lead { font-size: var(--fs-lg); color: var(--c-muted); max-width: var(--measure); }
.grid-2 { display: grid; gap: 0 var(--s-5); }

/* ---------- Key-value definition grid ---------- */
/* <dl class="kv"><div class="kv__item"><dt>…</dt><dd>…</dd></div>…</dl> */
/* Flex, not grid: items grow to fill each row, so the dividers never leave an empty cell. */
.kv { display: flex; flex-wrap: wrap; margin: 0; }
.kv__item { flex: 1 1 190px; min-width: 0; padding: var(--s-3) var(--s-5) var(--s-3) 0; border-top: 1px solid var(--c-border); }
.kv__item--wide { flex-basis: 100%; }
.kv dt { margin-bottom: 2px; font-size: var(--fs-sm); color: var(--c-muted); }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* Inline statistics row: <dl class="stats"><div><dt>…</dt><dd>…</dd></div></dl> */
.stats { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.stats dt { font-size: var(--fs-sm); color: var(--c-muted); }
.stats dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Lists ---------- */
.link-list { list-style: none; padding: 0; margin: 0 0 var(--s-3); columns: 1; }
.link-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-3); padding: 0; border-bottom: 1px solid var(--c-border); break-inside: avoid; }
.link-list li > a { flex: 1 1 11em; min-width: 0; padding: 10px 0; overflow-wrap: anywhere; }
/* On narrow rows the count wraps under the name, right-aligned. */
.link-list .count { flex: none; margin-left: auto; padding-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.more { margin: 0 0 var(--s-4); font-size: var(--fs-sm); color: var(--c-muted); }
.more::before { content: "+ "; }

/* Chips: short tokens (codes, tags) as a wrapping grid of bordered links. */
.chips { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: var(--s-2); }
.chips a {
    display: block;
    padding: 9px 4px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.chips a:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 1px 8px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface-alt); color: var(--c-muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; vertical-align: middle; }
.badge--accent { border-color: transparent; background: var(--c-accent-soft); color: var(--c-link); }

/* ---------- Callout / notice ---------- */
.callout { margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent); border-radius: var(--radius); background: var(--c-accent-soft); font-size: var(--fs-sm); }
.callout--warn { border-left-color: var(--c-warn-border); background: var(--c-warn-soft); }
.callout > :last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin-bottom: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); }
.table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 10px var(--s-3); border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.table th { background: var(--c-surface-alt); color: var(--c-muted); font-weight: 600; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.nowrap { white-space: nowrap; }
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }

/* ---------- Forms & buttons ---------- */
input, button, textarea, select { font: inherit; color: inherit; }
input:not([type="checkbox"], [type="radio"]), textarea, select {
    padding: 9px 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-text);
}
input::placeholder, textarea::placeholder { color: var(--c-muted); opacity: 1; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 0; border-color: var(--c-focus); }
textarea { width: 100%; min-height: 7em; resize: vertical; }
.field { margin-bottom: var(--s-4); }
.field label, .label { display: block; margin-bottom: var(--s-1); font-weight: 600; font-size: var(--fs-sm); }
.field .help { margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--c-muted); }

button, .btn {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--c-accent);
    border-radius: var(--radius);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
}
button:hover, .btn:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--c-link); border-color: var(--c-border-strong); }
.btn--ghost:hover { border-color: var(--c-accent); background: var(--c-accent-soft); filter: none; }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; padding: 0; margin: var(--s-5) 0; }
.pagination a, .pagination span { display: block; min-width: 44px; padding: 10px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); text-align: center; text-decoration: none; }
.pagination [aria-current] { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); }

/* ---------- Ad slots ---------- */
/* Empty slot (provider none) takes no space; a filled slot reserves its height before the ad renders. */
.ad:empty { display: none; }
.ad { margin: 0 0 var(--s-5); border-radius: var(--radius); background: var(--c-surface-alt); overflow: hidden; text-align: center; }
.ad-top { min-height: var(--ad-h-top); }
.ad-in-content { min-height: var(--ad-h-in-content); }
.ad-sidebar { min-height: var(--ad-h-sidebar); }
.sidebar { min-width: 0; }

/* ---------- Text pages ---------- */
.text-page { max-width: var(--measure); }
.text-page li { margin-bottom: var(--s-1); }

/* ---------- Cookie notice ---------- */
.cookie-notice {
    position: fixed;
    left: var(--s-2); right: var(--s-2); bottom: var(--s-2);
    z-index: 100;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-pop);
    font-size: var(--fs-sm);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; flex: 1 1 240px; }

/* ---------- Wider screens ---------- */
@media (min-width: 640px) {
    :root { --gap: 24px; }
    .card { padding: var(--s-5); }
    .header-search { flex: 0 1 360px; margin-left: auto; }
    .grid-2 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
    :root { --fs-h1: 2.125rem; --fs-h2: 1.4375rem; --fs-display: 2.75rem; --ad-h-top: 120px; }
    .page { grid-template-columns: minmax(0, 1fr) var(--sidebar); }
    .page > .content:only-child { grid-column: 1 / -1; }
    .sidebar { position: sticky; top: var(--s-4); }
    .link-list--cols { columns: 2; column-gap: var(--s-6); }
    .cookie-notice { left: auto; max-width: 480px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
    .site-header form, .ad, .sidebar, .cookie-notice { display: none !important; }
    .card { box-shadow: none; }
}

/* ---------- Tap targets (≥ 44px) ---------- */
/* Links inside data cells keep their line height but get a 44px hit area (WCAG 2.5.5 / platform guidelines). */
.kv dd a, .table td a { display: inline-block; min-height: 44px; padding-block: 11px; margin-block: -11px; }
button, .btn, input:not([type="checkbox"], [type="radio"]), select { min-height: 44px; }
.site-logo { min-height: 44px; }