/* Токены — в tokens.css (подключается первым в why.html). --prot здесь
   раньше был #3b82e0 (у index.html — #5090e6); при переезде на общий
   источник значений расхождение снято в пользу index.html (используется
   там в 6 местах против 1 здесь, чисто декоративный акцент). */
    *{box-sizing:border-box}
    /* Фокус с клавиатуры (аудит №13, ТЗ-4) — единое правило на всех страницах. */
    :where(button, .btn, a, input, select, textarea, summary, [tabindex]):focus-visible {
      outline:2px solid var(--acc); outline-offset:2px; border-radius:var(--r-sm); }
    /* Уважаем системную настройку «меньше движения» (см. index.css/passport.css/
       raceplan.css) — единая заглушка на случай анимаций/переходов. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration:0.01ms !important; animation-iteration-count:1 !important;
        transition-duration:0.01ms !important; scroll-behavior:auto !important;
      }
    }
    body{
      margin:0; background:var(--bg); color:var(--ink);
      font-size:var(--fs-md); line-height:var(--lh-prose); font-family:var(--font-sans);
      -webkit-font-smoothing:antialiased;
    }
    .num{font-variant-numeric:tabular-nums}
    /* Reviewer decision 07.10 §1: 680px на любой ширине (было 760). */
    .wrap{max-width:680px; margin:0 auto; padding:0 16px 80px}
    a{color:var(--acc-text); text-decoration:none}

    /* ── Верхняя строка-навигация (D1/D2) ─────────────────────────────────
       Разметка .top > .back + .mark не трогаем (17 шаблонов, ТЗ: «restyle
       the CSS, not the templates») — вордмарк визуально переносим влево
       через order, без изменения DOM; подпись раздела (рубрика) здесь не
       появляется — в разметке нет текста под неё, добавлять его значило бы
       редактировать все 17 файлов (см. отчёт). */
    .top{display:flex; align-items:center; justify-content:space-between;
         padding:16px 0; position:sticky; top:0; background:var(--bg); z-index:5;
         border-bottom:1px solid var(--pl); margin-bottom:8px}
    .top .mark{order:-1; font-family:var(--font-head); font-weight:var(--fw-brand);
               font-size:1.375rem; letter-spacing:-.005em; color:var(--ink)}
    .top a.back{color:var(--mut); font-weight:500; font-size:var(--fs-sm)}
    .top a.back:hover{color:var(--ink)}

    /* герой */
    .hero{padding:24px 0 8px}
    .hero h1{font-family:var(--font-head); font-weight:var(--fw-head); font-size:var(--fs-4xl); line-height:1.15; margin:0 0 12px; letter-spacing:-.3px}
    .hero p{color:var(--ink); font-size:var(--fs-md); line-height:var(--lh-prose); margin:0; max-width:62ch}

    /* оглавление */
    .toc{display:grid; grid-template-columns:minmax(0,1fr); gap:0 24px; margin:24px 0 8px}
    .toc a{
      display:flex; align-items:center; gap:8px; min-height:var(--tap-min);
      background:none; border:0; border-radius:0; min-width:0;
      padding:8px 0; font-size:var(--fs-md); font-weight:600; color:var(--ink);
    }
    .toc a:hover, .toc a:focus-visible{color:var(--acc-text)}

    /* ── Карточка → секция (D2): рамка/заливка снимаются, разделитель —
       волосяная линия сверху, как на /plan,/trends,/health,/profile. ── */
    .card{
      background:none; border:0; border-radius:0;
      padding-block:var(--sp-8); border-top:1px solid var(--pl); margin:0; scroll-margin-top:72px;
    }
    .card > h2{
      display:flex; align-items:center; gap:8px;
      font-family:var(--font-head); font-weight:600; font-size:var(--fs-3xl);
      margin:0 0 12px; letter-spacing:0;
    }
    .card > h2 .ic{
      width:38px; height:38px; flex:none; display:grid; place-items:center;
      background:none; border:1px solid var(--pl-soft); border-radius:var(--r-sm); font-size:var(--fs-xl);
    }
    /* Подзаголовок внутри карточки (напр. «Что это значит для каждого типа»).
       Без него браузерный дефолт h3 спорил бы по размеру с h2 карточки. */
    .card > h3{
      font-size:var(--fs-md); margin:24px 0 8px; letter-spacing:-.1px; color:var(--ink);
    }
    .card p{margin:0 0 16px; color:#d7dce4; max-width:62ch; line-height:var(--lh-prose)}
    .card p.lead{color:var(--ink)}
    .card b{color:var(--ink)}
    .mut{color:var(--mut); font-size:var(--fs-sm)}

    /* ── Список с правым значением (тарифы): .k/.v (D2) — рамки нет, строки
       разделены --pl-soft; значение — Manrope 600 табличное, не фиолетовое
       (фиолетовый --carb тут не нёс смысла, см. ТЗ). ── */
    .tier{list-style:none; margin:0 0 16px; padding:0; border:0; background:none}
    .tier li{display:flex; justify-content:space-between; align-items:center; gap:16px;
             padding:12px 0; border-top:1px solid var(--pl-soft)}
    .tier li:first-child{border-top:0}
    .tier .k{color:var(--ink); font-size:var(--fs-base)}
    .tier .v{font-family:var(--font-text,var(--font-sans)); font-weight:600; color:var(--ink);
             font-variant-numeric:tabular-nums; white-space:nowrap}

    /* словарь метрик */
    .terms{display:flex; flex-direction:column; gap:12px; margin:0 0 16px}
    .term{border-left:3px solid var(--prot); padding:2px 0 2px 16px}
    .term .t{font-weight:800; color:var(--ink)}
    .term .t small{font-weight:600; color:var(--mut); font-size:var(--fs-sm); margin-left:8px}
    .term .d{color:var(--ink); font-size:var(--fs-base); margin-top:2px}

    /* выделенный пример */
    .callout{
      background:rgba(224,98,59,.10); border:1px solid rgba(224,98,59,.40);
      border-radius:var(--r-md); padding:12px 16px; margin:0 0 16px; font-size:var(--fs-base);
    }
    .callout b{color:#ffb59c}

    /* блок-формула */
    .formula{
      background:var(--card2); border:1px solid var(--line); border-left:3px solid var(--good);
      border-radius:var(--r-sm); padding:12px 16px; margin:0 0 16px;
      font-size:var(--fs-sm); line-height:1.5; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#cfd6df;
    }

    /* обычные списки */
    .card ul.bul{margin:0 0 16px; padding-left:2px; list-style:none}
    .card ul.bul li{position:relative; padding:3px 0 3px 24px; color:#d7dce4}
    .card ul.bul li::before{content:"›"; position:absolute; left:4px; top:3px;
                            color:var(--acc); font-weight:800}
    .card ul.bul li b{color:var(--ink)}

    /* нумерованные шаги */
    .steps{counter-reset:s; list-style:none; margin:0 0 16px; padding:0}
    .steps li{counter-increment:s; position:relative; padding:4px 0 12px 40px; color:#d7dce4}
    .steps li::before{
      content:counter(s); position:absolute; left:0; top:1px;
      width:26px; height:26px; display:grid; place-items:center;
      background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm);
      font-weight:800; font-size:var(--fs-sm); color:var(--acc);
    }

    /* предупреждение */
    .warn{background:rgba(217,162,59,.10); border:1px solid rgba(217,162,59,.38);
          border-radius:var(--r-md); padding:16px 16px}
    .warn h2{font-size:var(--fs-lg); margin:0 0 8px; color:var(--warn)}
    .warn p{margin:0; color:#e6dcc6; font-size:var(--fs-base)}

    /* источники под разделом (D2: --fs-sm --mut; метка — капитель .rub) */
    .src{border-top:1px solid var(--pl-soft); margin:2px 0 0; padding:12px 0 16px;
         color:var(--mut); font-size:var(--fs-sm); line-height:1.5}
    .src .lbl{display:inline-flex; align-items:center; gap:4px;
              font-family:var(--font-num); font-size:var(--fs-sm); font-weight:500;
              letter-spacing:var(--tr-rub); text-transform:uppercase; color:var(--mut); margin-right:4px}

    /* Дословная цитата источника. Отличается от .src тем, что это СЛОВА
       автора, а не наша ссылка на него: полоса слева и курсив говорят
       читателю, что здесь ничего не пересказано. */
    .quote{margin:12px 0; padding:8px 0 8px 14px; border-left:2px solid var(--line);
           color:var(--ink); font-style:italic; line-height:1.55}

    .foot{color:var(--mut); font-size:var(--fs-sm); text-align:center; margin-top:24px}
    .foot a{color:var(--mut)}

    /* единый набор иконок (Lucide через <use>) — тот же паттерн, что в index.html,
       вместо эмодзи в чипах/заголовках/подписях-ярлыках */
    .icon{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2;
          stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; vertical-align:-3px}
    .toc a .icon{width:14px; height:14px; margin-right:1px}
    .card > h2 .ic .icon{width:20px; height:20px}
    .src .lbl .icon{width:13px; height:13px}
    .warn h2 .icon{width:18px; height:18px}

    /* Таблица «тип → лимитер → что тянуть». На широком экране это настоящая
       таблица (её и просили), на телефоне — карточки: пять колонок в 390 px
       не влезают, а горизонтальная прокрутка внутри текста читается плохо
       (страница уже ловила «едет вбок», см. аудит №8). Поэтому не scroll,
       а перестроение: каждая строка становится карточкой, а заголовки колонок
       подставляются из data-label. */
    .tbl{width:100%; border-collapse:collapse; margin:0 0 16px; font-size:var(--fs-base)}
    .tbl th, .tbl td{text-align:left; vertical-align:top; padding:8px 12px 8px 0;
                     border-bottom:1px solid var(--line)}
    .tbl th{color:var(--mut); font-weight:600; font-size:var(--fs-sm); text-transform:uppercase;
            letter-spacing:.04em; white-space:nowrap}
    .tbl td{color:#d7dce4}
    .tbl td:first-child{color:var(--ink); font-weight:700; white-space:nowrap}
    .tbl tr:last-child td{border-bottom:0}

    @media (max-width:560px){
      .hero h1{font-size:var(--fs-4xl)}
      .card{padding-block:var(--sp-6)}

      .tbl, .tbl tbody, .tbl tr, .tbl td{display:block; width:100%}
      .tbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
      .tbl tr{background:var(--card2); border:1px solid var(--line); border-radius:var(--r-md);
              padding:12px 16px; margin:0 0 8px}
      .tbl td{border-bottom:0; padding:0 0 8px}
      .tbl tr td:last-child{padding-bottom:0}
      .tbl td:first-child{font-size:var(--fs-md); margin-bottom:4px}
      /* Подпись колонки перед значением — иначе на телефоне непонятно,
         что за строчка («Лимитер» это или «что тянуть»). */
      .tbl td[data-label]:not(:first-child)::before{
        content:attr(data-label); display:block; color:var(--mut);
        font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;
      }
    }

/* TZ-why-readability: article prose; keep the existing 680px column. */
.card p, .card li, .tier .k, .term .d, .callout, .warn p {
  font-size:1.0625rem; line-height:1.6;
}
@media (min-width:720px) {
  .card p, .card li, .tier .k, .term .d, .callout, .warn p {
    font-size:var(--fs-lg);
  }
  .toc { grid-template-columns:repeat(2,minmax(0,1fr)); }
}