/* ------------------------------------------------------------------
   Вьетнамец: раздел «Блог» (/blog/). Страницы собирает
   tools/build_blog.py, виджеты рисует blog.js.
   Токены и шрифты — с главной v9 (www/css/home.css): те же цвета
   персонажа, Fira Sans Extra Condensed в заголовках, Geologica в тексте,
   шрифты свои (www/css/fonts.css), с чужих серверов ничего.
   Радиусы как на главной: бумага (таблица, блок, виджет) — прямые углы,
   то, что нажимают, — капсула, поля ввода — 10px.
   ------------------------------------------------------------------ */

:root {
  color-scheme: light;
  --wall: oklch(0.955 0.011 255);
  --wall-2: oklch(0.925 0.014 255);
  --sheet: oklch(0.995 0.002 255);
  --ink: oklch(0.25 0.05 265);
  --ink-2: oklch(0.40 0.04 262);
  --ink-3: oklch(0.49 0.03 262);
  --line: oklch(0.86 0.015 255);
  --line-soft: oklch(0.905 0.012 255);
  --hat: oklch(0.875 0.175 95);
  --hat-deep: oklch(0.80 0.17 85);
  --on-hat: oklch(0.25 0.05 265);
  --red: oklch(0.56 0.21 26);
  --red-wash: oklch(0.94 0.04 26);
  --sea: oklch(0.62 0.14 238);
  --sea-wash: oklch(0.86 0.06 238);
  --sea-ink: oklch(0.42 0.12 245);
  --ok: oklch(0.55 0.14 150);
  --focus: oklch(0.55 0.2 260);
  --shadow: 0 1px 0 oklch(0.25 0.05 265 / 0.08), 0 12px 32px -18px oklch(0.25 0.05 265 / 0.45);
  /* имена из задачи 24, чтобы статьи и будущие страницы говорили на одном языке */
  --bg: var(--wall);
  --accent: var(--hat);

  --display: "Fira Sans Extra Condensed", "Arial Narrow", sans-serif;
  --text: "Geologica", "Segoe UI", system-ui, sans-serif;

  --maxw: 1240px;
  --measure: 70ch;
  --gut: clamp(16px, 4vw, 40px);
  --r-field: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wall: oklch(0.2 0.03 262);
    --wall-2: oklch(0.235 0.032 262);
    --sheet: oklch(0.255 0.035 262);
    --ink: oklch(0.95 0.01 255);
    --ink-2: oklch(0.83 0.02 255);
    --ink-3: oklch(0.74 0.02 255);
    --line: oklch(0.38 0.03 262);
    --line-soft: oklch(0.31 0.03 262);
    --on-hat: oklch(0.22 0.04 265);
    --red: oklch(0.70 0.18 24);
    --red-wash: oklch(0.32 0.07 24);
    --sea: oklch(0.72 0.13 235);
    --sea-wash: oklch(0.42 0.08 238);
    --sea-ink: oklch(0.80 0.10 235);
    --focus: oklch(0.80 0.15 95);
    --shadow: 0 1px 0 oklch(0 0 0 / 0.3), 0 16px 36px -18px oklch(0 0 0 / 0.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --wall: oklch(0.2 0.03 262);
  --wall-2: oklch(0.235 0.032 262);
  --sheet: oklch(0.255 0.035 262);
  --ink: oklch(0.95 0.01 255);
  --ink-2: oklch(0.83 0.02 255);
  --ink-3: oklch(0.74 0.02 255);
  --line: oklch(0.38 0.03 262);
  --line-soft: oklch(0.31 0.03 262);
  --on-hat: oklch(0.22 0.04 265);
  --red: oklch(0.70 0.18 24);
  --red-wash: oklch(0.32 0.07 24);
  --sea: oklch(0.72 0.13 235);
  --sea-wash: oklch(0.42 0.08 238);
  --sea-ink: oklch(0.80 0.10 235);
  --focus: oklch(0.80 0.15 95);
  --shadow: 0 1px 0 oklch(0 0 0 / 0.3), 0 16px 36px -18px oklch(0 0 0 / 0.8);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--sea-ink); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; line-height: 1.45; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); line-height: 0.98; margin: 12px 0 20px; }
h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.02; margin: 44px 0 14px; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.08; margin: 30px 0 10px; }
p { margin: 0 0 14px; text-wrap: pretty; }

/* ---------- шапка (как на главной) ---------- */
.top { position: relative; z-index: 10; border-bottom: 2px solid var(--ink); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo img { width: 44px; height: auto; }
.logo b { font-family: var(--display); font-weight: 800; font-size: 26px; }
.nav { display: flex; gap: clamp(14px, 2.4vw, 28px); overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { text-decoration: none; font-weight: 500; font-size: 16px; padding: 10px 0; color: var(--ink-2); white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--hat); }
@media (max-width: 720px) {
  .logo b { display: none; }
  .top .wrap { gap: 14px; min-height: 58px; }
  .nav { gap: 16px; }
  .nav a { font-size: 15px; }
}

/* ---------- статья ---------- */
.article { padding-block: 18px 56px; }
.article > article, .index > * { max-width: var(--measure); }
.crumbs { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.crumbs a { color: var(--ink-2); }
.crumbs span[aria-hidden] { margin-inline: 4px; }

.short {
  background: var(--hat); color: var(--on-hat);
  border: 2px solid var(--ink); box-shadow: var(--shadow);
  padding: 16px 20px 6px; margin: 0 0 14px; font-size: 18px;
}
.short__k { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.short a { color: inherit; }
.plate { font-size: 14px; color: var(--ink-2); border-left: 3px solid var(--sea); padding: 2px 0 2px 10px; margin-bottom: 28px; }

.prose ul, .prose ol, .block ul, .block ol { padding-left: 1.3em; margin: 0 0 16px; }
.prose li, .block li { margin-bottom: 6px; }
.prose strong { font-weight: 700; }
sup.fn { font-size: 0.72em; line-height: 0; margin-left: 1px; }
sup.fn a { text-decoration: none; color: var(--sea-ink); font-weight: 700; padding: 0 2px; }

/* таблицы: на телефоне скроллятся внутри себя, страница не едет вбок */
.table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 18px; border: 2px solid var(--ink); background: var(--sheet); }
.table table { border-collapse: collapse; width: 100%; font-size: 15px; }
/* узкие таблицы переносят текст, широкие (много колонок) скроллятся: ячейка не уже 7em */
.table td, .table th { min-width: 7em; }
.table th, .table td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.table th { font-family: var(--display); font-weight: 700; font-size: 16px; background: var(--wall-2); }
.table tr:last-child td { border-bottom: 0; }
.table td.r, .table th.r { text-align: right; font-variant-numeric: tabular-nums; }

.block { margin-top: 8px; }
.disputes li { list-style: none; position: relative; }
.disputes ul { padding-left: 0; }
.disputes li::before { content: "↔"; position: absolute; left: -1.4em; color: var(--ink-3); }
@media (max-width: 720px) { .disputes ul { padding-left: 1.4em; } }
.qa { border-top: 1px solid var(--line); padding: 12px 0 2px; }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; font-weight: 700; list-style-position: outside; }
.qa__a { padding-top: 6px; color: var(--ink-2); }
.sources ol { font-size: 14px; color: var(--ink-2); }
.fn__back { text-decoration: none; }
.changes ul { font-size: 14px; color: var(--ink-2); padding-left: 0; list-style: none; }

.author { display: flex; gap: 14px; align-items: center; margin-top: 40px; padding: 16px; border: 2px solid var(--ink); background: var(--sheet); }
.author img { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.author p { margin: 0; font-size: 15px; }

.related .soon { color: var(--ink-3); }
.related .soon small { border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: 12px; }

/* ---------- оглавление ---------- */
.lead { font-size: 19px; color: var(--ink-2); }
.fams { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.fams a { text-decoration: none; border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 15px; }
.fams a:hover { background: var(--wall-2); color: var(--ink); }
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cards a { display: grid; gap: 4px; text-decoration: none; padding: 14px 16px; border: 2px solid var(--ink); background: var(--sheet); }
.cards a:hover { box-shadow: var(--shadow); color: inherit; }
.cards b { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.05; }
.cards span { color: var(--ink-2); font-size: 15px; }
.cards small { color: var(--ink-3); font-size: 13px; }
.empty { color: var(--ink-2); }

/* ---------- виджеты ---------- */
.widget { margin: 18px 0 22px; padding: 14px 16px; border: 2px solid var(--ink); background: var(--sheet); box-shadow: var(--shadow); }
.widget__title { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; margin: 0 0 8px; }
.widget__wait, .widget__note { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; }
.widget[data-state="hidden"] { box-shadow: none; border-style: dashed; border-color: var(--line); background: transparent; }
.widget[data-state="hidden"] .widget__title { color: var(--ink-2); font-size: 17px; }
.widget__stale { display: inline-block; font-size: 13px; background: var(--red-wash); color: var(--ink); padding: 1px 8px; border-radius: 999px; margin: 0 0 8px; }
.widget .table { margin: 6px 0 4px; box-shadow: none; }
.widget .table table { min-width: 0; font-size: 14px; }
.widget .table th, .widget .table td { padding: 8px 9px; }
/* списки виджетов — без маркеров и отступа статьи (.prose ul сильнее по весу) */
.prose .widget ul, .widget ul { list-style: none; padding-left: 0; margin-left: 0; }
.prose .widget li { margin-bottom: 0; }
.tag-ref { display: inline-block; margin-left: 6px; font-size: 12px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.big { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); line-height: 1; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.big small { font-size: 0.55em; font-weight: 700; color: var(--ink-2); margin-left: 4px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 16px; margin: 6px 0; }
.kv div { border-left: 3px solid var(--sea); padding-left: 10px; }
.kv b { display: block; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kv span { font-size: 13px; color: var(--ink-2); }
.verdict-line { font-weight: 600; }
.w-go { font-weight: 600; }

.w-list { list-style: none; padding: 0; margin: 4px 0 0; }
.w-list li { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.w-list li:first-child { border-top: 0; }
.w-list b { font-weight: 600; }
.w-list small { display: block; color: var(--ink-2); font-size: 13px; }
.ch__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ch__rate { font-family: var(--display); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch__rate small { display: inline; font-size: 14px; color: var(--ink-2); font-family: var(--text); font-weight: 400; }
.w-list li.is-stale { opacity: 0.7; }

/* светофор банкоматов — как на главной */
.atm__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--line); border: 2px solid var(--ink); }
.atm__dot[data-c="green"] { background: var(--ok); }
.atm__dot[data-c="yellow"] { background: var(--hat); }
.atm__dot[data-c="red"] { background: var(--red); }
.atm__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.atm__msg { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* формы виджетов */
.w-form { display: grid; gap: 12px; }
.seg { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.seg legend { font-size: 14px; color: var(--ink-2); margin-bottom: 6px; padding: 0; width: 100%; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-block; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; font-size: 15px; font-weight: 600; }
.seg input:checked + span { background: var(--hat); color: var(--on-hat); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.w-field { display: grid; gap: 4px; }
.w-field label { font-size: 14px; color: var(--ink-2); }
.w-field input, .w-field select { min-height: 44px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: var(--r-field); background: var(--sheet); max-width: 320px; width: 100%; }
.w-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--ink); background: transparent; font-weight: 600; font-size: 14px; cursor: pointer; }
.w-btn--hat { background: var(--hat); color: var(--on-hat); min-height: 46px; font-size: 16px; padding: 0 22px; justify-self: start; }
.w-btn:disabled { opacity: 0.5; cursor: default; }
.w-out { margin-top: 10px; }
.w-err { color: var(--red); font-size: 14px; min-height: 1em; margin: 0; }
.bill { list-style: none; padding: 0; margin: 8px 0 0; }
.bill li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.bill li b { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- подвал ---------- */
.foot { border-top: 2px solid var(--ink); padding-block: 26px 40px; font-size: 14px; color: var(--ink-2); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
.foot nav a { color: var(--ink); font-weight: 600; text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }
.foot p { max-width: var(--measure); margin: 0; }