/* ==========================================================================
   GARDEN LMS — тема каталога лекций.
   Дизайн один-в-один с gardenresearch.eu (/lab/foundations-for-ai-educators)
   и утверждённым артефактом. Токены из gardenresearch.eu/assets/css/main.css.
   ========================================================================== */
:root{
  --bg:#fcfcfa; --ink:#000; --grey:#b9b9b6; --sub:#6e6e6a; --faded:#d6d2c8;
  --line:#e3e0d9; --tint:#f1efe9; --link:#0051ff; --blue:#0051ff;
  --red:#FF4000; --green:#04B038; --purple:#8B48D2; --gold:#E8E398;
  --sans:Arial,Helvetica,sans-serif;
  --body:20px; --side:clamp(8px,0.8vw,14px); --stick:clamp(96px,11vw,124px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:700;font-size:var(--body);line-height:1.32;
  color:var(--ink);background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- header ---------- */
/* Шапка один-в-один с gardenresearch.eu: прозрачный масthead, ссылки серые,
   активная — чёрная, ховер — светло-серый. Никаких плашек и синего. */
.header{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:flex-start;
        gap:24px;background:transparent;
        padding:clamp(8px,0.8vw,14px) var(--side) clamp(14px,1.6vw,22px)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .header{background:color-mix(in srgb,var(--bg) 92%, transparent)}
}
.nav{display:flex;align-items:flex-start;gap:8px;font-size:clamp(16px,1.3vw,21px);line-height:1.1;font-weight:700}

/* ---------- сетка: rail + article ---------- */
/* minmax(0,1fr), а не 1fr: иначе длинное неразрывное содержимое колонки
   раздувает её и выталкивает соседнюю за пределы экрана */
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);
      padding:clamp(36px,5vw,72px) var(--side) clamp(80px,12vw,160px);align-items:start}
.case.single{grid-template-columns:minmax(0,1fr);max-width:72ch;margin:0 auto}
/* Оглавление длинного курса (11 тем, 31 урок) не влезает в экран.
   Держим сайдбар в высоту вьюпорта и даём ему прокручиваться отдельно от статьи. */
.rail{position:sticky;top:var(--stick);display:flex;flex-direction:column;gap:clamp(28px,3vw,44px);min-width:0;
      max-height:calc(100vh - var(--stick) - 16px);overflow-y:auto;overscroll-behavior:contain;
      scrollbar-width:thin;scrollbar-color:var(--faded) transparent;
      /* Выделение пункта должно доставать до КРАЯ ЭКРАНА, как на gardenresearch.eu.
         .case уже отодвинут от края на var(--side); .toc ol выносится влево на
         столько же +2px, чтобы пробить этот отступ. Но overflow-y:auto делает и
         overflow-x не-visible, и этот вынос обрезался бы у края рельса.
         Поэтому весь скролл-контейнер сам сдвигаем к краю экрана: отрицательный
         margin-left тащит рельс за var(--side)+2px (до края экрана), равный
         padding-left держит содержимое на месте. Теперь обрез приходится ровно
         на край экрана — вынос выделения в него упирается, а не режется. */
      margin-left:calc(-1 * var(--side) - 2px);padding-left:calc(var(--side) + 2px)}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:var(--faded);border-radius:3px}
.article{max-width:64ch;min-width:0}
.case.single .article{max-width:none}

/* ---------- фильтр каталога по языку (над оглавлением) ---------- */
.cat-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:clamp(18px,2vw,26px)}
.filter-btn{font-size:.8em;font-weight:700;text-transform:lowercase;letter-spacing:.02em;
  padding:.34em .72em;border:1px solid var(--line);color:var(--sub);background:transparent;
  border-radius:0;cursor:pointer;transition:background .1s ease,color .1s ease,border-color .1s ease}
.filter-btn:hover{border-color:var(--ink);color:var(--ink)}
.filter-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- чип языка материала рядом с названием ---------- */
.lang-tag{display:inline-block;vertical-align:middle;margin-left:.3em;
  font-size:.56em;font-weight:700;letter-spacing:.04em;text-transform:lowercase;line-height:1;
  padding:.4em .55em;border-radius:3px;white-space:nowrap;
  background:var(--tint);color:var(--link)}
/* строка кабинета инвертируется по ховеру — чип держит свой фон и остаётся читаемым */
.related a:hover .lang-tag{background:var(--bg);color:var(--link)}

/* метка языка в оглавлении — частью текста, наследует цвет (ховер/активный) */
.toc-lang{margin-left:.35em;opacity:.5}

/* ---------- toc ---------- */
.toc ol{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-left:calc(-1 * var(--side) - 2px)}
.toc ul.toc-sub{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:2px 0 4px;width:100%}
/* пункт не шире колонки — иначе flex-элемент растянется по max-content и текст не перенесётся */
.toc ol > li,.toc ul.toc-sub > li{max-width:100%}
/* Названия уроков бывают длинными — переносим их, а номер держим в своей колонке.
   На основном сайте заголовки короткие и стоит nowrap; здесь он ломал раскладку. */
.toc a{display:flex;align-items:baseline;gap:.5em;max-width:100%;white-space:normal;
       font-size:var(--body);text-transform:lowercase;padding:4px 12px;transition:background .09s ease,color .09s ease}
.toc a .n{font-weight:700;flex:0 0 auto;width:1.2em}
.toc a > span:last-child{min-width:0;overflow-wrap:anywhere;text-wrap:pretty}
.toc ul.toc-sub a{font-size:var(--body)}
.toc ul.toc-sub a .n{flex:0 0 auto;width:auto;min-width:2.8em;color:var(--grey)}
.toc ul.toc-sub li.lvl-h3 > a{padding-left:12px}
.toc a:hover{background:var(--ink);color:#fff}
.toc a:hover .n{color:#fff}
.toc a.current{color:#fff}.toc a.current .n{color:#fff}
.toc a.back-link{margin-left:calc(1.2em + .5em);color:var(--grey)}
.toc a.back-link:hover{background:var(--ink);color:#fff}
.rail-note{color:var(--sub);font-size:.9em;max-width:38ch;text-wrap:pretty}
.rail-note p+p{margin-top:.8em}

/* ---------- статья / секции ---------- */
.eyebrow{font-size:.78em;color:var(--sub);margin-bottom:10px}
.case-title{font-size:var(--body);line-height:1.3;margin-bottom:clamp(28px,4vw,52px);text-wrap:balance}
.urlline{font-size:.78em;color:var(--grey);margin-bottom:12px}
.urlline b{color:var(--sub);font-weight:700}
.section{padding-top:clamp(40px,5vw,72px);scroll-margin-top:var(--stick)}
.section.first{padding-top:0}
.section-head{display:flex;align-items:baseline;gap:.7em;margin-bottom:clamp(16px,1.6vw,22px)}
.section-head .sn{font-weight:700;font-size:var(--body)}
.section-head h2{font-size:var(--body);font-weight:700;line-height:1.2}
.section p{font-size:var(--body);font-weight:700;line-height:1.4;text-wrap:pretty}
.section p+p{margin-top:1em}
.lede{font-weight:700;line-height:1.4;text-wrap:pretty}
.section h3,.section h4{font-size:var(--body);font-weight:700;line-height:1.22;margin-top:1.7em;margin-bottom:.15em;scroll-margin-top:var(--stick)}
.sub-head{display:flex;align-items:baseline;gap:.7em}
.sub-head .hn{color:var(--sub)}
.section p a,.lede a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.section p a:hover,.lede a:hover{background:var(--link);color:#fff;text-decoration:none}
.note{color:var(--sub);font-size:.9em}

/* ---------- теги ---------- */
.case-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:.9em}
.case-tags .tag{font-size:.72em;line-height:1;padding:.32em .5em;border:1px solid var(--ink);
                background:var(--ink);color:var(--bg);border-radius:2px;white-space:nowrap}

/* ---------- строки-списки лекций (паттерн .related) ---------- */
.related{margin-top:1.4em;border-top:2px solid var(--ink)}
.related.thin{border-top-width:1px}
.related a,.related .row{display:flex;justify-content:space-between;align-items:baseline;gap:1.5em;padding:.95em 0;
           border-bottom:1px solid var(--line)}
.related .r-t{font-weight:700;line-height:1.3;text-wrap:pretty;transition:background 90ms ease,color 90ms ease}
.related a:hover .r-t{background:var(--ink);color:var(--bg);padding:.06em .22em;margin:-.06em -.22em;
                      box-decoration-break:clone;-webkit-box-decoration-break:clone}
.related .r-k{font-weight:700;color:var(--grey);white-space:nowrap;font-size:.9em}
.related a.locked .r-t{color:var(--ink)}

/* ---------- кнопка «Купить» / CTA ---------- */
.buy{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.9em;letter-spacing:.02em;
     background:var(--blue);color:#fff;border:none;border-radius:0;padding:.62em 1.15em;cursor:pointer;
     transition:filter .12s ease,transform .06s ease}
.buy:hover{filter:brightness(1.08)}
.buy:active{transform:scale(.97)}
.buy.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.buy.ghost:hover{background:var(--ink);color:var(--bg)}

.cta{margin:1.9em 0 0;background:var(--ink);color:var(--bg);padding:clamp(26px,3.5vw,44px);
     display:flex;flex-direction:column;align-items:flex-start;gap:1.1em}
.cta .cta-h{font-size:1.1em;font-weight:700;line-height:1.24;color:var(--bg);text-wrap:pretty}
.cta .fine{font-size:.72em;color:var(--grey);font-weight:700}
.cta .price-big{font-size:1.6em;font-weight:700;color:var(--bg)}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
/* кнопки внутри чёрного CTA инвертированы */
.cta .cta-btn{background:var(--bg);color:var(--ink);border:1px solid var(--bg)}
.cta .cta-btn:hover{filter:none;background:var(--tint)}
.cta .cta-btn.ghost{background:transparent;color:var(--bg);border:1px solid var(--bg)}
.cta .cta-btn.ghost:hover{background:var(--bg);color:var(--ink)}

/* ---------- видео-карточка ---------- */
.video{margin:1.4em 0 0}
.video .frame{aspect-ratio:16/9;background:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.video .play{width:0;height:0;border-style:solid;border-width:1.1em 0 1.1em 1.9em;border-color:transparent transparent transparent var(--bg);
             transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.video .frame:hover .play{transform:scale(1.12)}
.video figcaption{font-size:.78em;color:var(--sub);margin-top:.55em}

/* ---------- callout (в системе основного сайта это .note, не .key) ---------- */
.note{background:var(--tint);padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,28px);margin:1.7em 0 0}
.note p{font-size:var(--body);font-weight:700;line-height:1.35}
.note .note-label{font-size:.76em;font-weight:700;color:var(--sub);margin-bottom:.55em}
.note--tip{--accent:var(--green)}
.note--warn{--accent:var(--red)}
.note--info{--accent:var(--blue)}

/* ---------- уведомления WooCommerce ----------
   Стили woocommerce.css сняты (см. inc/shop.php), поэтому уведомления
   оформляем сами — и там, где мы обернули их в .wc-notices, и там,
   где WooCommerce печатает их сам (чекаут, корзина). */
.wc-notices{margin-bottom:1.4em}
.woocommerce-error,.woocommerce-message,.woocommerce-info{
  list-style:none;background:var(--tint);padding:.7em .9em;margin:0 0 .6em;
  font-size:.9em;font-weight:700;border-left:2px solid var(--ink)}
.woocommerce-error{border-left-color:var(--red)}
.woocommerce-error li,.woocommerce-message li,.woocommerce-info li{list-style:none}
.woocommerce-error a,.woocommerce-message a,.woocommerce-info a{
  color:var(--link);text-decoration:underline;text-underline-offset:3px}
.woocommerce-NoticeGroup{margin-bottom:1.4em}

/* WooCommerce размечает служебные подписи этим классом; его стиль жил в снятом css */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   КОРЗИНА И ЧЕКАУТ
   Строка товара повторяет паттерн .related: слева название, справа цена.
   ========================================================================== */
.cart-lines{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.cart-line{display:flex;justify-content:space-between;align-items:baseline;gap:1.2em;
  padding:.95em 0;border-bottom:1px solid var(--line)}
.cart-line-name{font-weight:700;line-height:1.3;min-width:0;overflow-wrap:anywhere;text-wrap:pretty}
.cart-line-name a{transition:background 90ms ease,color 90ms ease}
.cart-line-name a:hover{background:var(--ink);color:var(--bg)}
.cart-line-price{font-weight:700;color:var(--grey);white-space:nowrap;font-size:.9em;margin-left:auto}
.cart-line-remove{flex:0 0 auto;color:var(--grey);font-size:1.1em;line-height:1;padding:.05em .32em;
  transition:background 90ms ease,color 90ms ease}
.cart-line-remove:hover{background:var(--red);color:#fff}

/* Итог — жирная линия снизу, как у заголовка списка */
.cart-foot,.co-total{display:flex;justify-content:space-between;align-items:baseline;gap:1.5em;
  padding:.95em 0;border-bottom:2px solid var(--ink)}
.cart-foot{flex-wrap:wrap;border-bottom:none;padding-bottom:0}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;gap:1.5em;
  width:100%;padding-bottom:.95em;border-bottom:2px solid var(--ink)}
.cart-total-label{font-size:.78em;color:var(--sub);font-weight:700}
.cart-total-sum{font-size:1.2em;font-weight:700;white-space:nowrap}
.cart-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4em}

/* ---------- чекаут ---------- */
.co-block{padding-top:clamp(30px,3.6vw,48px)}
.co-block:first-of-type{padding-top:0}
.co-h{font-size:.78em;font-weight:700;color:var(--sub);margin:0 0 1em}
.co-fields{display:flex;flex-direction:column;gap:clamp(14px,1.7vw,20px);max-width:420px}
.co-fields .form-row{display:flex;flex-direction:column;gap:.4em;margin:0}
.co-fields label{font-size:.78em;color:var(--sub);font-weight:700}
.co-fields .required{color:var(--red);text-decoration:none;border:none}
.co-fields .woocommerce-input-wrapper{display:block}
.co-fields input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:0;
  padding:.7em .8em;font-family:var(--sans);font-weight:700;font-size:var(--body);color:var(--ink);line-height:1.32}
.co-fields input:focus{border-color:var(--blue);outline:none}
.co-fields input::placeholder{color:var(--grey);font-weight:700}

/* ---------- способ оплаты ---------- */
.co-payment{padding-top:clamp(30px,3.6vw,48px)}
.payment_methods{list-style:none;margin:0 0 1.5em;padding:0;border-top:1px solid var(--line)}
.payment_methods li{padding:.85em 0;border-bottom:1px solid var(--line)}
.payment_methods label{font-weight:700;cursor:pointer}
.payment_methods .input-radio{accent-color:var(--blue);margin-right:.6em;vertical-align:baseline}
/* способ один — выбирать не из чего, радиокнопка только мешает */
.payment_methods li:only-child .input-radio{display:none}
.payment_methods li:only-child label{cursor:default}
.payment_box{color:var(--sub);font-size:.9em;margin-top:.5em}
.payment_box p{margin:0}
.payment_box p+p{margin-top:.5em}
.co-no-gateway{color:var(--red);font-weight:700}
.co-place-order{margin-top:1.6em}
/* текст о персональных данных печатается внутри .co-place-order, перед кнопкой */
.co-place-order .buy{margin-top:1.2em}

/* Предупреждение о персональных данных — мелкой приглушённой строкой, не основным кеглем */
.woocommerce-privacy-policy-text{margin:1.4em 0 0;max-width:56ch}
.woocommerce-privacy-policy-text p{font-size:.78em;font-weight:700;line-height:1.45;color:var(--sub);margin:0}

/* Оверлей загрузки от blockUI: без woocommerce.css у него нет фона */
.blockUI.blockOverlay{background:var(--bg)!important;opacity:.6!important}

/* ---------- takeaways ---------- */
.takeaways{margin:1.8em 0;background:var(--tint);color:var(--ink);padding:clamp(20px,2.6vw,30px)}
.takeaways h3{font-size:.78em;font-weight:700;color:var(--sub);margin:0 0 1.1em}
.takeaways ul{list-style:none;display:flex;flex-direction:column;gap:.75em}
.takeaways li{font-weight:700;line-height:1.32;text-wrap:pretty}

/* ---------- тело урока: длинная проза внутри курса ---------- */
.lesson-body{margin-top:.45em}
.lesson-body p{font-size:var(--body);font-weight:700;line-height:1.4;text-wrap:pretty}
.lesson-body p+p{margin-top:1em}
.lesson-body h4{font-size:var(--body);font-weight:700;line-height:1.22;margin:1.5em 0 .15em}
.lesson-body ul,.lesson-body ol{margin:.8em 0 0 1.2em;display:flex;flex-direction:column;gap:.4em}
.lesson-body li{font-weight:700;line-height:1.35}
.lesson-body a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.lesson-body blockquote{border-left:2px solid var(--ink);padding-left:1em;margin:1.2em 0}
.materials-label{font-size:.76em;color:var(--sub);margin-top:1.4em}

/* ---------- футер: один-в-один с gardenresearch.eu (грид 3×, не flex) ---------- */
.footer{margin-top:clamp(72px,11vw,160px);
        padding:clamp(28px,4vw,48px) var(--side) clamp(40px,5vw,68px);
        display:flex;flex-direction:column;align-items:stretch;gap:clamp(28px,4vw,52px);
        font-family:var(--sans);font-weight:700;font-size:clamp(16px,1.3vw,21px);line-height:1.3;color:var(--ink)}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;width:100%}
.footer-col{display:flex;flex-direction:column;gap:.32em;min-width:0}
.footer-col-head{margin:0 0 .55em;font:inherit;color:var(--ink)}
.footer .footer-col a{color:var(--grey);text-decoration:none;white-space:nowrap}
.footer .footer-col a:hover{color:var(--ink)}
.footer-col-note{color:var(--grey)}
.footer-legal{display:flex;flex-direction:column;align-items:flex-start;gap:.2em;margin:0;text-align:left;
              font-family:var(--sans);font-weight:700;font-size:.8em;color:var(--grey)}
.footer .footer-legal span{white-space:nowrap}
@media (max-width:640px){ .footer-cols{grid-template-columns:1fr} }

/* пункт, которого ещё нет: не кликается, по ховеру подсказка */
.nav-soon,.footer .footer-soon{color:var(--grey);cursor:default;position:relative;white-space:nowrap}
.nav-soon::after,.footer-soon::after{content:attr(data-soon);
  position:absolute;left:0;top:100%;margin-top:.45em;z-index:5;
  font-family:var(--sans);font-size:.7em;font-weight:700;letter-spacing:0;text-transform:none;white-space:nowrap;
  background:var(--ink);color:#fff;padding:.25em .5em;opacity:0;pointer-events:none;transition:opacity 120ms ease}
.nav-soon:hover::after,.footer-soon:hover::after{opacity:1}

/* ---------- nav как на основном сайте (лого + живой цветок) ---------- */
.header .nav-mark{font-family:var(--sans);font-weight:400;font-size:.9em;line-height:1;color:var(--ink);
  display:inline-block;width:1.05em;height:1.05em;flex-shrink:0;text-align:center;overflow:hidden;
  align-self:flex-start;margin-top:.02em}
.nav-mark-svg{width:1.05em;height:1.05em;display:block}
.header .logo{flex-shrink:0;width:clamp(68px,6vw,92px);height:auto;margin-top:0;margin-right:0}
.nav-links{display:flex;flex-wrap:wrap;gap:.32em}
.header .nav-links a{color:var(--grey);white-space:nowrap;text-decoration:none}
.nav-links a.active{color:var(--ink)}
.nav-links a:not(.active):hover{color:#8c8c89}
.header-right{position:relative;min-width:0;max-width:44ch;margin-left:auto}
.header-right.links{max-width:none;margin-left:auto}

/* ---------- логотип ⇄ переключатель языка (морф как на gardenresearch.eu) ----------
   Логотип и ряд кнопок лежат в одной ячейке грида, поэтому подмена происходит
   ровно на том же месте — без вертикального скачка. */
.header-right.filter{display:grid;justify-items:end;align-items:start;margin-left:auto;max-width:44ch}
.header-right.filter>.logo{grid-area:1/1;position:static;margin:0;
  opacity:0;transform:scale(.96);filter:blur(2px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease,filter .45s ease}
.header.intro .header-right.filter>.logo{opacity:1;transform:scale(1);filter:blur(0);pointer-events:auto}
/* ряд кнопок приподнят, чтобы верх текста совпал с первой строкой логотипа */
.header-right.filter>.stack-tags{grid-area:1/1;transform:translateY(calc(-4px - .2em))}
.stack-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0;margin:0}
.header .stack-btn{font-family:var(--sans);font-size:clamp(16px,1.3vw,21px);font-weight:700;
  text-transform:lowercase;letter-spacing:.02em;color:var(--ink);background:transparent;border:none;padding:4px 13px;
  cursor:pointer;line-height:1.4;white-space:nowrap;opacity:1;transform:translateY(0);
  transition:opacity .45s ease var(--rd,0s),transform .45s cubic-bezier(.2,.7,.3,1) var(--rd,0s),
             background .1s ease,color .1s ease}
.stack-btn:nth-child(1){--rd:.15s}.stack-btn:nth-child(2){--rd:.23s}.stack-btn:nth-child(3){--rd:.31s}
.stack-btn:nth-child(4){--rd:.39s}.stack-btn:nth-child(5){--rd:.47s}
.header.intro .stack-btn{opacity:0;transform:translateY(9px)}
.stack-btn:hover,.stack-btn.active{color:#fff}
.stack-btn:nth-child(6n+1):hover,.stack-btn:nth-child(6n+1).active{background:var(--blue)}
.stack-btn:nth-child(6n+2):hover,.stack-btn:nth-child(6n+2).active{background:var(--red)}
.stack-btn:nth-child(6n+3):hover,.stack-btn:nth-child(6n+3).active{background:var(--green)}
.stack-btn:nth-child(6n+4):hover,.stack-btn:nth-child(6n+4).active{background:var(--purple)}
.stack-btn:nth-child(6n+5):hover,.stack-btn:nth-child(6n+5).active{background:var(--gold);color:#000}

/* ---------- форма входа ---------- */
.login-form{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px);max-width:380px;margin-top:clamp(20px,2.4vw,30px)}
.login-field{display:flex;flex-direction:column;gap:.4em}
.login-field label{font-size:.78em;color:var(--sub);font-weight:700}
.login-field input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:0;
  padding:.7em .8em;font-family:var(--sans);font-weight:700;font-size:var(--body);color:var(--ink);line-height:1.32}
.login-field input:focus{border-color:var(--blue);outline:none}
.login-field input::placeholder{color:var(--grey);font-weight:700}
.login-remember{display:flex;align-items:center;gap:.55em;font-size:.9em;color:var(--sub);cursor:pointer;font-weight:700}
.login-remember input{appearance:none;-webkit-appearance:none;width:1.1em;height:1.1em;flex-shrink:0;margin:0;
  background:var(--bg);border:1px solid var(--line);border-radius:0;cursor:pointer;position:relative;transition:background .1s ease,border-color .1s ease}
.login-remember input:hover{border-color:var(--ink)}
.login-remember input:checked{background:var(--blue);border-color:var(--blue)}
.login-remember input:checked::after{content:"";position:absolute;left:.34em;top:.14em;width:.28em;height:.55em;
  border:solid #fff;border-width:0 .12em .12em 0;transform:rotate(45deg)}
.login-remember input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.login-form .buy{align-self:flex-start;margin-top:.2em}
.login-error{border-left:2px solid var(--red);padding:.6em .9em;background:var(--tint);font-size:.9em;margin-top:1em}
.login-alt{margin-top:1.4em;font-size:.9em;color:var(--sub)}
.login-alt a{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* ---------- оглавление: перебор цветов текущего пункта ---------- */
.toc li:nth-child(5n+1) > a.current{background:var(--blue);color:#fff}
.toc li:nth-child(5n+2) > a.current{background:var(--red);color:#fff}
.toc li:nth-child(5n+3) > a.current{background:var(--green);color:#fff}
.toc li:nth-child(5n+4) > a.current{background:var(--purple);color:#fff}
.toc li:nth-child(5n+5) > a.current{background:var(--gold);color:#000}
.toc a.current .n{color:inherit}

/* подзаголовок урока/лекции: номер + текст (паттерн лаб-страницы) */
.sub-head .ht{font-weight:700;line-height:1.22;text-wrap:pretty}
.h3-head{scroll-margin-top:var(--stick)}

@media (max-width:880px){
  .case{grid-template-columns:1fr;row-gap:clamp(40px,7vw,64px)}
  /* overflow:visible — обрезки нет, вынос .toc ol сам достаёт до края экрана */
  .rail{position:static;max-height:none;overflow:visible;margin-left:0;padding-left:0}
  .article{max-width:none}
}
/* Узкие экраны: на страницах с морфом кладём переключатель под меню,
   на страницах с одним логотипом шапка остаётся строкой. */
@media (max-width:760px){
  .header:has(.header-right.filter){flex-direction:column;align-items:stretch;gap:clamp(6px,2.4vw,14px)}
  .header:has(.header-right.filter) .nav{width:100%}
  .header-right.filter{max-width:none;margin-left:0;width:100%;justify-items:start}
  .header-right.filter .stack-tags{justify-content:flex-start}
  .header:has(.header-right.links){align-items:flex-start}
  .header-right.links{margin-left:auto}
}
@media (max-width:640px){ :root{--body:18px} }
@media (prefers-reduced-motion:reduce){
  *{transition:none!important} html{scroll-behavior:auto}
  .header-right .logo,.header .stack-btn{transition:none}
}