/* ═══════════════════════════════════════════════════════════════════════════
   Оболочка для служебных страниц: /about/, /methodology/, /privacy/, /contacts/

   Почему здесь отдельный файл, а на главной весь CSS инлайн.
   Главная — точка входа из поиска, там важна каждая миллисекунда до первого
   пейнта, поэтому она остаётся одним самодостаточным файлом.
   Служебные страницы открывают со второго-третьего клика, их четыре, и держать
   четыре копии одних и тех же стилей — гарантированный источник расхождений.
   Один файл кэшируется после первого открытия любой из них.

   Путь подключения относительный (../assets/shell.css), чтобы страницы
   работали и на домене, и при открытии с диска.
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--tx);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-synthesis-weight:none}
img,svg{max-width:100%;display:block}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;margin:0;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
p{margin:0;text-wrap:pretty}
table{border-collapse:collapse;width:100%}

:root{
  --bg:#0b0e14; --bg2:#111621; --card:#141a26; --line:#212a3b;
  --tx:#e8ecf4; --mut:#96a1b8;
  --acc:#f5c451; --acc2:#ffdc8a; --acc-d:#8a6510;
  --ok:#3ddc97; --bad:#ff6b6b;
  --r:14px; --w:820px;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f7f8fb; --bg2:#ffffff; --card:#ffffff; --line:#e2e6ef;
    --tx:#131722; --mut:#5d6780; --acc:#9a6b06; --acc2:#7a5507; --acc-d:#f5c451;
    --ok:#0f9d63; --bad:#d13b3b;
  }
}

.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--acc);color:#241a02;padding:9px 14px;border-radius:8px}

/* ---------- шапка ---------- */
.hd{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:18px;height:60px;max-width:1140px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--tx);
  font-size:17px;letter-spacing:-.02em;flex:none}
.logo:hover{text-decoration:none}
.logo i{font-style:normal;color:var(--acc)}
.nav{display:flex;gap:20px;margin-left:auto;font-size:14px;color:var(--mut)}
.nav a{color:inherit}
.nav a:hover{color:var(--acc);text-decoration:none}
@media (max-width:720px){.nav{display:none}}

/* ---------- переключатель страны и языка ----------
   Нативный <details>: работает без JS и остаётся в шапке на мобильных,
   где .nav скрыта. Ссылки ведут на ту же страницу в другой версии. */
.lang{position:relative;flex:none;font-size:13px;margin-left:auto}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  padding:7px 10px;border:1px solid var(--line);border-radius:9px;color:var(--mut);
  font-weight:600;white-space:nowrap;user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";width:5px;height:5px;border-right:1.5px solid;border-bottom:1.5px solid;
  transform:translateY(-2px) rotate(45deg)}
.lang summary:hover,.lang[open] summary{color:var(--tx);border-color:var(--acc)}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);z-index:60;margin:0;padding:6px;list-style:none;
  display:grid;gap:2px;min-width:214px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 16px 36px -14px rgba(0,0,0,.65)}
.lang li a{display:block;padding:8px 10px;border-radius:8px;color:var(--tx);white-space:nowrap}
.lang li a:hover{background:var(--bg2);text-decoration:none}
.lang li a[aria-current]{color:var(--acc);font-weight:600}
@media (min-width:721px){.lang{margin-left:0}}

/* ---------- содержимое ---------- */
main{padding:40px 0 56px}
.crumbs{font-size:13px;color:var(--mut);margin-bottom:14px}
.crumbs a{color:var(--mut)}
h1{font-size:clamp(26px,4.4vw,36px);margin-bottom:12px}
.sub{color:var(--mut);font-size:17px;margin-bottom:30px}
h2{font-size:21px;margin:34px 0 10px}
h3{font-size:16px;margin:22px 0 7px}
main p + p{margin-top:11px}
main p{color:var(--mut)}
main p strong,main p b{color:var(--tx);font-weight:600}
main ul,main ol{color:var(--mut);padding-left:20px;margin:11px 0;display:grid;gap:8px}
main li::marker{color:var(--acc)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:18px 0}
.card > :first-child{margin-top:0}
.warn{border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:10px;
  background:var(--card);padding:15px 17px;margin:18px 0;font-size:14.5px;color:var(--mut)}
.warn b{color:var(--tx)}
.upd{color:var(--mut);font-size:13px}
.num{font-variant-numeric:tabular-nums}

/* Видимая заглушка. Она намеренно уродливая: пока на странице есть жёлтая
   рамка, вы не забудете подставить реальные данные перед публикацией. */
.todo{border:2px dashed var(--acc);border-radius:10px;padding:14px 16px;margin:16px 0;
  background:color-mix(in srgb,var(--acc) 8%,transparent);font-size:14.5px;color:var(--tx)}
.todo b{display:block;margin-bottom:5px;color:var(--acc);text-transform:uppercase;
  font-size:11.5px;letter-spacing:.09em}

.tbl-w{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin:18px 0}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top}
th{color:var(--mut);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:600;color:var(--tx)}

/* ---------- подвал ---------- */
.ft{border-top:1px solid var(--line);background:var(--bg2);padding:30px 0 24px;
  font-size:13.5px;color:var(--mut)}
.ft .wrap{max-width:1140px}
.ft nav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.ft a{color:var(--mut)}
.ft a:hover{color:var(--acc)}
.ft-b{border-top:1px solid var(--line);padding-top:16px;display:flex;gap:13px;
  align-items:center;flex-wrap:wrap;font-size:12.5px}
.age{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none;
  border:2px solid var(--bad);color:var(--bad);font-weight:800;font-size:11px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}