/* ============================================================
   СКВОЗНОЕ ПОЛОТНО — один непрерывный узор на всю страницу.

   Мотив тот же, что лежит фоном в методичке Элисо: контур из росчерков
   знака dzhobava.doc, повёрнутый на канонические углы (−122.68 / −2.42 /
   36.44). Из него собран вертикальный тайл (static/img/sheet/canvas.svg):
   всё, что вылезает за нижнюю кромку, продублировано над верхней, поэтому
   при repeat-y стыков нет — росчерк идёт сквозь всю страницу и нигде не
   обрывается на границах секций.

   Ничего не двигается: ни JS, ни keyframes, ни transform. Полотно —
   одна маска на одном слое под контентом.
   ============================================================ */

/* токены --sheet-* живут в style.css :root (единый источник токенов) */

/* Липкая шапка: в style.css у body стоял overflow-x:hidden, из-за него body
   становился скролл-контейнером и position:sticky у шапки не работал —
   она уезжала вверх вместе со страницей. Горизонтальный вылет и так
   обрезан на html (refine.css), поэтому здесь возвращаем body к обычному
   потоку; clip обрезает, но скролл-контейнер не создаёт. */
body{overflow-x:visible;overflow-x:clip}

/* слой натянут на весь документ — от самого верха до подвала, одним куском:
   полотно идёт и под шапкой, поэтому сквозь её стекло видно тот же узор */
body{position:relative}
body::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--sheet-ink);
  opacity:var(--sheet-a);
  -webkit-mask:url("../img/sheet/canvas.dfda29212f01.svg") repeat-y center top / var(--sheet-w) auto;
          mask:url("../img/sheet/canvas.dfda29212f01.svg") repeat-y center top / var(--sheet-w) auto}
/* контент выше полотна. Шапку не трогаем позиционированием — она липкая,
   ей только слой повыше */
main,.footer,#intro{position:relative;z-index:1}
.site-top{z-index:var(--z-site-top)}

/* шапка — стекло: сквозь неё видно то же полотно, что и на странице */
.header.dl-scrolled{background:rgba(255,255,255,.46)!important}
/* ...но с 981px шапка при скролле поджимается в пилюлю (refine.css), и
   стекло переезжает на неё: полоса во всю ширину под пилюлей читалась
   второй поверхностью. Правило живёт здесь, а не там, потому что здешнее
   идёт с !important и грузится последним — перебить его из refine нечем */
@media(min-width:981px){
  .header.dl-scrolled{background:transparent!important}
}

/* плотность узора одна на весь сайт, как на главной (Даня, 25.09): статья,
   урок, кабинет и корзина больше не приглушены — токены в style.css :root */

/* тёмная тема живёт своей палитрой */
body.t-applelux::after{content:none}

/* краска экранная: в печать не идёт */
@media print{
  body::after{content:none}
}

/* ============================================================
   БЕЛЫЕ БЛОКИ ПРОПУСКАЮТ ПОЛОТНО

   Карточки залиты глухим белым и вырезали из полотна прямоугольные дыры.
   Здесь белый ослаблен до поволоки: узор просвечивает, но текст на
   карточке остаётся на светлом. Наведёшь курсор — карточка проясняется,
   узор под ней уходит: это и есть всё «взаимодействие», один переход
   между двумя состояниями по жесту, без анимации.

   !important здесь по делу: это сквозная политика поверх шести слоёв
   стилей (style/refine/redesign/design-layer/home).

   Не трогаем шапку, липкие панели, модалки, чат, кнопки и поля ввода:
   им непрозрачность нужна, иначе под ними поедет текст.
   ============================================================ */

/* 1. блоки с рамкой — фон снят совсем: форму держит рамка, полотно идёт
      сквозь них без потерь. Сюда же плашки-обёртки, у которых своего
      содержимого нет (полки каталога, чекбоксы подарков, полоса цифр). */
body:not(.t-applelux) :is(.shelf,.nx-gift,.nx-gifts,.pcard,.acc,.inside__card,
  .for-whom li,.pblock .prose li,.rel,.pproof,.subfilter){
  background:transparent!important}
/* тень убираем только у плашек-обёрток: вокруг прозрачного блока она
   читалась как грязь. У карточек с ховером (товар, отзыв, тариф) тень —
   часть их собственного эффекта, её не трогаем. */
body:not(.t-applelux) :is(.shelf,.nx-gift,.pproof,.subfilter){
  box-shadow:none!important}

/* 2. панели-обёртки: их белый складывался с белым вложенных карточек и
      полотно исчезало вовсе — оставляем лёгкую поволоку */
/* .nx-social сюда не входит: у панели площадок свой тёплый лист из
   брендбука, поволока делала её белой и панель терялась на фоне */
body:not(.t-applelux) :is(.dj-panel,
  .course-nav,.lk__side,.tariff,.review-form,.cart-side){
  background:rgba(255,255,255,.4)!important}

/* 3. карточки со связным текстом. .62 оказалось обманом: узор бледный сам
      по себе (#EDDDFC при .42 — это 8 единиц RGB от белого), ибелый сверху
      съедал его до 3 единиц — глаз такого не видит. .45 оставляет просвет
      читаемым, а текст на карточке всё равно на светлом. */
body:not(.t-applelux) :is(.rev-card,.rev-card--video,.rev-vmeta,
  .blog-grid .post,.post,.smart-note,.file-card,.course-lesson,
  .contact-card){
  background:rgba(255,255,255,.45)!important}

/* В облаке отзывов верхняя карточка должна читатьcя целиком: случайное
   перекрытие остаётся, но нижние кнопки и текст через фокус не видны. */
@media(min-width:861px) and (prefers-reduced-motion:no-preference){
  body:not(.t-applelux) .rev-cloud .rev-card.lit{background:#fff!important}
}

/* наведёшь курсор — карточка проясняется, узор под ней уходит: это и есть
   всё «взаимодействие», один переход между двумя состояниями по жесту */
@media(hover:hover) and (pointer:fine){
  body:not(.t-applelux) :is(.blog-grid .post,.post,.inside__card,.for-whom li,
    .file-card,.course-lesson,.smart-note,.contact-card){
    transition:background-color .45s ease}
  body:not(.t-applelux) :is(.blog-grid .post,.post,.inside__card,.for-whom li,
    .file-card,.course-lesson,.smart-note,.contact-card):hover{
    background:rgba(255,255,255,.85)!important}
}