/* Трудометр — свои стили, без сборки и без внешних библиотек.
   Правится прямо здесь. Тёмная тема — не инверсия: свои значения фона,
   текста, границ и теней. */

:root{
  --bg:#f4f6f8;
  --bg-deep:#e9edf1;
  --panel:#ffffff;
  --panel-2:#fbfcfd;
  --ink:#131a21;
  --ink-2:#4a5763;
  /* 🔴 08.08.2026: было #6f7d8a. Замер по формуле WCAG: 4.22 на белом, 3.90 на --bg
     и 3.59 в подвале на --bg-deep — то есть ниже 4.5 везде, где он вообще стоит.
     А стоит он под каждым числом («средняя по России, май 2026», «5 из 87») и во
     всём подвале, то есть ровно на строках, которые ОБЪЯСНЯЮТ цифру. Новое
     значение даёт 5.47 / 5.05 / 4.65 и оставляет ступень до --ink-2 (7.41). */
  --ink-3:#5d6b78;
  --line:#dde3e9;
  --line-2:#eaeff3;
  /* 🔴 08.08.2026: было #0b7f72. На собственной подложке --acc-soft давало 4.29 —
     ниже порога ровно там, где акцентом помечено «вы здесь» в шапке. Стало 4.83;
     заодно выросла и белая надпись на кнопке (4.89 → 5.51). */
  --acc:#0a766a;          /* акцент: действия, активное, фокус */
  --acc-ink:#ffffff;
  --acc-soft:#e2f4f0;
  --acc-line:#9fd5cc;
  --mark:#e2683a;         /* маркер «вы здесь» — тёплый, спорит с акцентом намеренно */
  --mark-soft:#fdeee7;
  --ok:#12795f;
  --warn:#9a5b12;
  --shadow-1:0 1px 2px rgba(16,32,44,.07);
  --shadow-2:0 1px 2px rgba(16,32,44,.06), 0 8px 24px rgba(16,32,44,.09);
  --shadow-3:0 2px 4px rgba(16,32,44,.07), 0 18px 44px rgba(16,32,44,.13);
  --r:14px;
  --r-s:10px;
  --wrap:1180px;
}

:root[data-theme="dark"]{
  --bg:#10161c;
  --bg-deep:#0b1015;
  --panel:#182028;
  --panel-2:#1d262f;
  --ink:#e9eef3;
  --ink-2:#a9b7c3;
  /* Тёмная: было #7d8c99 — 4.44 на --panel-2, тоже ниже порога. Стало 5.24 худшее. */
  --ink-3:#8a99a6;
  --line:#2a3540;
  --line-2:#222c35;
  --acc:#3fd0b8;
  --acc-ink:#06231f;
  --acc-soft:#16302e;
  --acc-line:#2c6b62;
  --mark:#ff8b5e;
  --mark-soft:#33211a;
  --ok:#4ad3a8;
  --warn:#e0a44b;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.45);
  --shadow-3:0 2px 6px rgba(0,0,0,.4), 0 22px 50px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"tnum" 0;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(1.7rem,1.15rem + 2.1vw,2.65rem);font-weight:760}
h2{font-size:clamp(1.28rem,1.05rem + .85vw,1.72rem);font-weight:700}
h3{font-size:1.06rem;font-weight:680}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--acc);color:var(--acc-ink);padding:10px 16px;border-radius:8px}

/* ─────────── шапка ─────────── */
.hdr{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex;align-items:center;gap:18px;min-height:62px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:730;letter-spacing:-.02em;font-size:1.09rem}
.brand:hover{text-decoration:none}
.brand__mark{color:var(--acc);flex:0 0 auto}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{
  color:var(--ink-2);padding:8px 12px;border-radius:9px;font-size:.945rem;font-weight:530;
  transition:background .16s ease,color .16s ease;
}
.nav a:hover{background:var(--bg-deep);color:var(--ink);text-decoration:none}
.nav a.is-here{color:var(--acc);background:var(--acc-soft)}
.theme{
  flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  background:var(--panel);color:var(--ink-2);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-1);transition:color .16s,border-color .16s,transform .1s;
}
.theme:hover{color:var(--acc);border-color:var(--acc-line)}
.theme:active{transform:translateY(1px)}
.theme__moon{display:none}
:root[data-theme="dark"] .theme__sun{display:none}
:root[data-theme="dark"] .theme__moon{display:block}
.burger{display:none;width:40px;height:38px;margin-left:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;cursor:pointer;padding:0;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:2px;background:var(--ink-2);border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ─────────── общее ─────────── */
main{padding:clamp(22px,3vw,42px) 0 60px}
.lead{font-size:1.09rem;color:var(--ink-2);max-width:64ch;margin:0 0 1.2em}
.sect{margin:clamp(34px,4.5vw,64px) 0 0}
.sect__hd{margin-bottom:16px}
.sect__hd p{color:var(--ink-2);margin:0;max-width:70ch}
.muted{color:var(--ink-3)}
.small{font-size:.9rem}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-2);
}
.card--flat{box-shadow:var(--shadow-1)}
.pad{padding:clamp(16px,2.2vw,26px)}

/* ─────────── первый экран ─────────── */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(20px,2.6vw,38px);align-items:start}
.hero__say h1{margin-bottom:.35em}
.hero__promise{font-size:1.12rem;color:var(--ink-2);max-width:46ch;margin-bottom:20px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:22px}
.fact{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;box-shadow:var(--shadow-1)}
.fact__v{font-size:1.28rem;font-weight:730;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fact__k{font-size:.83rem;color:var(--ink-3);line-height:1.35;margin-top:2px}
.hero__note{font-size:.9rem;color:var(--ink-3);max-width:46ch}

/* ─────────── прибор ─────────── */
.tool{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-3);overflow:hidden}
.tool__hd{padding:16px 20px 0}
.tool__ttl{font-size:1.02rem;font-weight:700;margin:0 0 2px}
.tool__sub{font-size:.87rem;color:var(--ink-3);margin:0}
.tool__body{padding:16px 20px 20px;display:grid;gap:14px}
.field{display:grid;gap:6px}
.field__lbl{font-size:.87rem;font-weight:600;color:var(--ink-2)}
.field__hint{font-size:.8rem;color:var(--ink-3)}
.field__otkaz{font-size:.85rem;color:var(--warn);margin:0}
.field__otkaz[hidden]{display:none}
.inp,select.inp{
  width:100%;font:inherit;color:var(--ink);background:var(--panel-2);
  border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.inp--big{font-size:1.32rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;padding:13px 14px}
.inp:hover{border-color:var(--acc-line)}
.inp:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft);background:var(--panel)}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 19px) 52%,calc(100% - 13px) 52%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.seg{display:flex;background:var(--bg-deep);border:1px solid var(--line);border-radius:11px;padding:3px;gap:3px}
.seg button{
  flex:1;font:inherit;font-size:.9rem;font-weight:590;padding:8px 6px;cursor:pointer;
  background:transparent;color:var(--ink-2);border:0;border-radius:8px;transition:all .16s ease;
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink);box-shadow:var(--shadow-1)}
.seg button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:640;cursor:pointer;padding:12px 20px;border-radius:11px;
  background:var(--acc);color:var(--acc-ink);border:1px solid transparent;
  box-shadow:var(--shadow-1);transition:filter .16s,transform .08s,box-shadow .16s;
}
.btn:hover{filter:brightness(1.08);text-decoration:none;box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--line);color:var(--ink-3);cursor:not-allowed;box-shadow:none;filter:none}
.btn--ghost{background:transparent;color:var(--acc);border-color:var(--acc-line);box-shadow:none}
.btn--ghost:hover{background:var(--acc-soft);filter:none}

/* результат прибора */
.res{border-top:1px solid var(--line);background:var(--panel-2);padding:18px 20px 22px;display:none}
.res.is-on{display:block;animation:rise .28s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.res__lead{font-size:1.02rem;color:var(--ink-2);margin:0 0 4px}
.res__big{font-size:clamp(2rem,1.3rem + 2.6vw,3rem);font-weight:790;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--mark)}
.res__big small{font-size:.42em;font-weight:640;color:var(--ink-2);letter-spacing:0}
.res__say{margin:8px 0 16px;color:var(--ink-2);max-width:60ch}

.scale{margin:16px 0 6px}
/* ⚠️ Скругление режет ВНУТРЕННЯЯ дорожка. Раньше overflow:hidden стоял на самой
   полосе — и вместе с углами он отрезал подпись «вы» над маркером: маркер был,
   а надписи не было, и на снимке это выглядело просто как тонкая чёрточка. */
.scale{padding-top:22px}
.scale__bar{position:relative;height:44px}
.scale__track{display:flex;height:100%;border-radius:11px;overflow:hidden;border:1px solid var(--line)}
.scale__seg{height:100%;border-right:1px solid var(--panel);position:relative}
.scale__seg:last-child{border-right:0}
.scale__pin{position:absolute;top:-7px;bottom:-7px;width:3px;background:var(--mark);border-radius:3px;box-shadow:0 0 0 3px var(--mark-soft);transition:left .45s cubic-bezier(.2,.8,.3,1)}
.scale__pin::after{content:"вы";position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:.72rem;font-weight:750;color:var(--mark);letter-spacing:.02em}
/* Период данных шкалы: заметно, но не спорит с самим числом результата. */
.scale__period{margin:0 0 8px;font-size:.8rem;color:var(--ink-2)}
.scale__ax{display:flex;justify-content:space-between;gap:14px;font-size:.76rem;color:var(--ink-3);margin-top:9px;font-variant-numeric:tabular-nums}
.scale__ax span:nth-child(2){text-align:center}
.scale__ax span:last-child{text-align:right}
@media (max-width:520px){
  .scale__ax{font-size:.72rem;gap:8px}
  .scale__ax span:nth-child(2){display:none}
}

.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin-top:16px}
.kv__i{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);padding:11px 13px;box-shadow:var(--shadow-1)}
.kv__k{font-size:.8rem;color:var(--ink-3);margin-bottom:3px}
.kv__v{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums}
.kv__v.up{color:var(--ok)}
.kv__v.down{color:var(--mark)}

.warnbox{
  border:1px solid var(--acc-line);background:var(--acc-soft);border-radius:var(--r-s);
  padding:12px 14px;font-size:.9rem;color:var(--ink-2);margin-top:16px;
}
.warnbox b{color:var(--ink)}

/* ─────────── таблицы ─────────── */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-2)}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:560px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-2)}
thead th{
  position:sticky;top:0;background:var(--panel);z-index:1;
  font-size:.79rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:680;
  border-bottom:1px solid var(--line);cursor:pointer;user-select:none;white-space:nowrap;
}
thead th:hover{color:var(--acc)}
thead th[aria-sort="ascending"]::after{content:" ↑";color:var(--acc)}
thead th[aria-sort="descending"]::after{content:" ↓";color:var(--acc)}
tbody tr{transition:background .13s}
tbody tr:hover{background:var(--bg-deep)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.is-rf{background:var(--acc-soft)}
tr.is-rf td{font-weight:640}

/* ─────────── список / плитки ─────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tile{
  display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);
  padding:13px 15px;box-shadow:var(--shadow-1);color:var(--ink);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.tile:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--acc-line)}
.tile__n{font-weight:640;margin-bottom:3px}
.tile__v{font-size:.88rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ─────────── FAQ ─────────── */
.faq{display:grid;gap:9px}
details.q{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);box-shadow:var(--shadow-1);overflow:hidden}
details.q>summary{
  cursor:pointer;list-style:none;padding:14px 46px 14px 16px;font-weight:620;position:relative;
  transition:color .15s;
}
details.q>summary::-webkit-details-marker{display:none}
details.q>summary:hover{color:var(--acc)}
details.q>summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
details.q>summary::after{
  content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
details.q[open]>summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--acc)}
details.q>div{padding:0 16px 15px;color:var(--ink-2)}
details.q>div p:last-child{margin-bottom:0}

/* ─────────── столбики динамики ─────────── */
/* ⚠️ overflow-x:clip обязателен: всплывающая подпись у крайнего столбика —
   абсолютная, но в scrollWidth она попадает и даёт горизонтальный скролл
   всей странице. На 768 это ловилось замером, глазами — нет. */
.bars{display:flex;align-items:flex-end;gap:3px;height:170px;padding:10px 0 0;position:relative;overflow-x:clip;overflow-y:visible}
.bars__b{flex:1;min-width:3px;background:linear-gradient(180deg,var(--acc),var(--acc-line));border-radius:3px 3px 0 0;position:relative;transition:filter .15s}
.bars__b:hover{filter:brightness(1.15)}
.bars__b span{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--ink);color:var(--bg);font-size:.75rem;padding:4px 8px;border-radius:7px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:var(--shadow-2);z-index:3;
}
.bars__b:hover span{opacity:1}
.bars__b:nth-child(-n+4) span{left:0;transform:translateY(-6px)}
.bars__b:nth-last-child(-n+4) span{left:auto;right:0;transform:translateY(-6px)}
.bars__ax{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-3);margin-top:7px}

/* ─────────── форма ─────────── */
.form{display:grid;gap:14px;max-width:560px}
textarea.inp{min-height:132px;resize:vertical;line-height:1.55}
.msg{border-radius:var(--r-s);padding:12px 14px;font-size:.94rem;border:1px solid}
.msg--ok{background:var(--acc-soft);border-color:var(--acc-line);color:var(--ink)}
.msg--err{background:var(--mark-soft);border-color:var(--mark);color:var(--ink)}

/* ─────────── проза сервисных страниц ─────────── */
.prose{max-width:72ch}
.prose h2{margin-top:1.7em}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1em}
.prose li{margin-bottom:.35em}
.prose code{background:var(--bg-deep);padding:1px 6px;border-radius:6px;font-size:.9em}

/* ─────────── подвал ─────────── */
.ftr{border-top:1px solid var(--line);background:var(--bg-deep);margin-top:60px;padding:34px 0 22px}
.ftr__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px}
.ftr__col{display:flex;flex-direction:column;gap:7px;font-size:.93rem}
.ftr__col--wide{grid-column:span 2;min-width:240px}
.ftr__ttl{font-weight:680;color:var(--ink);margin-bottom:3px}
.ftr__col a{color:var(--ink-2)}
.ftr__col a:hover{color:var(--acc)}
.ftr__note{color:var(--ink-3);font-size:.88rem;margin:0}
.ftr__btm{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--ink-3);font-size:.85rem;border-top:1px solid var(--line);margin-top:26px;padding-top:16px}

/* ─────────── узкие экраны ─────────── */
/* ⚠️ На узком экране прибор обязан быть ВЫШЕ пояснений: на 390 он уходил под
   второй экран, и первое, что видел посетитель, — абзац текста. Порядок
   переставляется без правки разметки: display:contents отдаёт детей во flex. */
@media (max-width:980px){
  .hero{display:flex;flex-direction:column;gap:18px}
  .hero__say{display:contents}
  .hero__say h1{order:1;margin-bottom:0}
  .hero__promise{order:2;margin-bottom:0;max-width:none}
  .tool{order:3}
  .facts{order:4;margin-bottom:0}
  .hero__note{order:5;max-width:none}
  .hero nav{order:0}
}
@media (max-width:760px){
  .burger{display:flex}
  .nav{
    display:none;position:absolute;left:12px;right:12px;top:60px;flex-direction:column;gap:2px;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--shadow-3);padding:8px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:11px 12px}
  .theme{margin-left:8px}
  .hdr__in{position:relative;gap:8px}
  .ftr__col--wide{grid-column:span 1}
}
@media (max-width:480px){
  .wrap{padding:0 14px}
  .row2{grid-template-columns:1fr}
  .brand__txt{font-size:1rem}
  .tool__body,.res{padding-left:15px;padding-right:15px}
  .tool__hd{padding-left:15px;padding-right:15px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}