/* =========================================================
   Общее для всех страниц: переменные, шапка, карточка.
   Дизайн карточки один и тот же в конструкторе и в просмотре —
   собрал карточку, и ровно такую же увидит исполнитель.

   Интерфейс подстроен под рисунки на карточках: плоские скруглённые формы,
   мягкие тени, кремовые плоскости, тёмно-синий вместо чёрного. Бумажной
   метафоры (наклон, скотч, точечный фон) больше нет — рядом с плоскими
   иллюстрациями она читалась как чужой набор.
   ========================================================= */

:root{
  /* Палитра одна на интерфейс и на рисунки карточек: тёплый оранжевый, холодный
     синий, кремовые плоскости и тёмно-синий вместо чёрного. Интерфейс держится
     светлее иллюстраций — рисунок на карточке должен быть самым ярким пятном,
     а не спорить с подложкой. */
  --orange:#EE7623;
  --orange-soft:#FDEADB;
  --blue:#2F86F5;
  --navy:#2B3A4A;

  --wall:#F7F4ED;
  --wall-shadow:#E8E4DA;
  --panel:#FBF9F5;
  --ink:#2B3A4A;          /* тёмно-синий вместо чёрного, как в рисунках */
  --ink-soft:#5F7183;
  --ink-faint:#9DACB8;
  --line:#E8E1D6;         /* линия из логотипа */
  --red:#E8483A;
  --red-dim:#FBDAD6;
  /* «готово» в просмотре: единственный зелёный в палитре — им отмечают
     сделанное, и спутать его с цветами карточек нельзя */
  --ok:#2E9E62;
  --tape:rgba(214,205,186,0.55);
  --tape-ink:rgba(150,138,112,0.45);

  /* бледные версии цветов карточек: ими подписаны блоки разделов */
  --t1:#FBEFE1; --t2:#F9E7D5; --t3:#F7E0CA; --t4:#E9F1FD;
  --t5:#EFF4FD; --t6:#F5EFE4; --t7:#E4EBF6;
}

*{margin:0; padding:0; box-sizing:border-box;}

body{
  position:relative; isolation:isolate;
  background:var(--wall);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* Единый фон верхней части всех страниц. Исходный PNG используется как есть:
   поверх него только светлая дымка для читаемости интерфейса и плавный переход
   в основной цвет длинных страниц. */
body::before{
  content:""; position:absolute; z-index:-1; inset:0 0 auto; height:430px;
  pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(247,244,237,.08) 0%,rgba(247,244,237,.22) 72%,var(--wall) 100%),
    url('../img/background.png') center bottom / cover no-repeat;
}

.wrap{max-width:860px; margin:0 auto; padding:0 20px 60px;}

/* ---------- шапка и логотип ---------- */
header{display:flex; align-items:center; justify-content:center; padding:20px 0 16px;}
/* на странице просмотра в шапке ещё язык и «поделиться» — лого уходит влево */
.site-head{justify-content:space-between; gap:12px;}
.head-tools{display:flex; align-items:center; gap:6px;}

/* выбор языка: компактная кнопка с выпадающим списком, как на обычных сайтах */
.lang-select{position:relative;}
.lang-toggle{
  display:inline-flex; align-items:center; gap:5px;
  height:34px; padding:0 8px 0 9px;
  background:#fff; border:1px solid var(--line); border-radius:9px; cursor:pointer;
  font-family:'Inter', sans-serif; font-size:12.5px; font-weight:600; color:var(--ink);
}
.lang-toggle:hover{border-color:var(--ink-faint);}
.lang-toggle svg{width:15px; height:15px; flex:none; color:var(--ink-soft);}
.lang-toggle .caret{width:12px; height:12px;}
.lang-menu{
  display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:20;
  min-width:150px; padding:5px;
  background:#fff; border:1px solid var(--line); border-radius:11px;
  box-shadow:0 14px 30px -18px rgba(32,32,32,.5);
}
.lang-select.open .lang-menu{display:block;}
.lang-menu button{
  display:block; width:100%; text-align:left;
  padding:8px 10px; border:0; border-radius:8px; background:none; cursor:pointer;
  font-family:'Inter', sans-serif; font-size:13px; color:var(--ink);
}
.lang-menu button:hover{background:var(--panel);}
.lang-menu button.active{background:var(--ink); color:#fff;}

/* круглая кнопка-иконка: «поделиться» рядом с языком */
.icon-btn{
  width:34px; height:34px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:9px; cursor:pointer;
  color:var(--ink);
}
.icon-btn:hover{border-color:var(--ink-faint);}
.icon-btn svg{width:16px; height:16px;}
.icon-btn.done{background:var(--ink); border-color:var(--ink); color:#fff;}
/* нечего сбрасывать — кнопка на месте, но не нажимается */
.icon-btn.is-off{opacity:.4; pointer-events:none;}
.logo{display:inline-flex; align-items:center; text-decoration:none;}
.logo:hover{opacity:.75;}
.wordmark{
  position:relative; display:inline-block;
  font-family:'Nunito', 'Inter', sans-serif;
  font-weight:800; font-size:24px; line-height:1; letter-spacing:-0.015em;
  padding-bottom:9px;
}
.wm-self{color:var(--orange);}
.wm-market{color:var(--navy); margin-left:.22em;}
.wm-stroke{position:absolute; left:34%; bottom:0; width:62%; height:8px; display:block; overflow:visible;}

footer{
  text-align:center; padding:10px 0 30px;
  font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--ink-faint);
}

/* ---------- панель ---------- */
.panel{
  background:#fff; border-radius:18px; padding:26px 24px 28px;
  box-shadow:0 18px 40px -30px rgba(32,32,32,.5);
}
.panel-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px;}
.panel-head h1{font-size:22px; font-weight:700; letter-spacing:-0.01em;}
.panel-head .sub{font-size:14px; margin-top:4px; color:var(--ink-soft);}

/* подсказка под заголовком: обычным шрифтом, чтобы не спорила с ним */
.row-hint{
  font-size:12.5px; line-height:1.4; color:var(--ink-faint);
  margin:0 0 12px 2px;
}

/* ---------- кнопки ---------- */
.btn{
  font-family:'Inter', sans-serif;
  background:var(--ink); color:#fff; border:none;
  padding:14px 24px; border-radius:12px;
  font-size:15px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none;
  transition:transform .15s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:disabled{opacity:.35; cursor:not-allowed; transform:none;}
.btn-secondary{background:#fff; color:var(--ink); border:1px solid var(--line);}
/* главное действие страницы: единственное цветное пятно на светлом фоне */
.btn-accent{background:var(--orange); color:#fff;}
.btn-accent:hover{background:#d9661a;}
.btn-wide{width:100%;}

/* слово, которое нельзя ломать переносом: «чек-листы» в заголовках */
.nb{white-space:nowrap;}

/* ---------- карточка ----------
   Картинка 3:2 сверху, под ней название, под названием — выбранные уточнения
   списком. Одинаково в конструкторе и в просмотре: человек, которому прислали
   ссылку, видит ровно то, что собрал
   заказчик. Рамка тонкая, фон белый — как у плиток выбора, чтобы доска не
   пестрила. */
.note{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:0 0 12px;
  display:flex; flex-direction:column; align-items:stretch;
  position:relative; overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .18s ease;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}

/* Картинка: поле 3:2, рисунок вписан целиком. Рисунки 3:2 (tools/fit-photo.js)
   закрывают его целиком, старые значки (tools/fit-icon.js) стоят по центру.
   Фон белый: у рисунков размытый край, сведённый на белое, — на цветной подложке
   он был бы виден каймой. Само изображение выложено абсолютно: иначе его
   собственная высота спорит с aspect-ratio поля, и поле вырастает до квадрата. */
.note-pic{
  display:block; position:relative; width:100%; aspect-ratio:3 / 2;
  flex:none; background:#fff;
  border-bottom:1px solid var(--line);
}
.note-img, .note-pic .note-ic-wait{
  position:absolute; inset:0; width:100%; height:100%;
}
.note-img{object-fit:contain;}
/* картинки ещё нет — пустое поле того же размера, ничего не обещаем */
.note-ic-wait{display:block; background:rgba(43,58,74,.05);}
/* эмодзи вместо рисунка: у раздела он ещё бывает */
.note-pic .note-emoji{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:34px; line-height:1;
}

.note-cap{
  font-weight:600; font-size:14px; line-height:1.3; color:var(--ink);
  padding:12px 14px 0;
  /* переносим по словам: «Протереть зеркало», а не «зер-кало» */
  overflow-wrap:break-word; hyphens:none;
}
.note-list{
  margin:6px 0 0; padding:0 14px; list-style:none;
  font-size:12.5px; line-height:1.45; color:var(--ink-soft);
}
.note-list li{position:relative; padding-left:11px;}
.note-list li::before{
  content:''; position:absolute; left:2px; top:.55em;
  width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.7;
}
/* «Не трогать» читается как запрет, а не как ещё одно задание */
.note[data-skip] .note-list{color:var(--red); font-weight:600;}
/* отдельное «этого не делать» внутри обычной карточки */
.note-list .note-no{color:var(--red); font-weight:600;}
.note-list .note-no::before{display:none;}
.note-sign{margin-right:4px; font-weight:700;}

/* Плитка библиотеки в окне действий. Она стоит в ленте рядом с плитками
   разделов, поэтому размеры и отступы у них общие: два окна подряд с карточками
   разного размера читаются как два разных списка. Отличие одно — уточнений
   здесь нет, их выбирают следующим шагом. */
.note-sm{padding-bottom:10px;}
.note-sm .note-cap{
  font-size:12.5px; text-align:center; padding:9px 6px 0;
  /* длинное слово («Пропылесосить») переносим, короткие держим целыми */
  overflow-wrap:break-word; min-height:2.5em;
}

/* тайский и бирманский: знаки уходят выше и ниже строки — даём им место */
html[lang="th"] .note-cap, html[lang="my"] .note-cap,
html[lang="th"] .note-list, html[lang="my"] .note-list{line-height:1.7;}

/* крестик удаления: виден всегда, чтобы не искать способ убрать карточку */
.note-x{
  position:absolute; top:8px; right:8px; z-index:3;
  width:22px; height:22px; padding:0; border:0; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.82); color:var(--ink-soft); cursor:pointer;
}
.note-x svg{width:12px; height:12px;}
.note-x:hover{background:#fff; color:var(--red);}

/* ---------- переворот карточки ----------
   В просмотре уточнения лежат на обороте: лицевая сторона — картинка и
   название, и лист остаётся чистым. Нажали карточку — она повернулась, и видно
   подробности именно того дела, которое сейчас делают. Знак в углу говорит, что
   оборот не пустой; без уточнений карточка не крутится вовсе. */
.note-flip{
  cursor:pointer; perspective:900px; background:none; border:0; padding:0; overflow:visible;
  /* тянемся на всю высоту ряда: иначе соседняя карточка с подписью в две строки
     оказывается выше, и ряд стоит ступенькой */
  display:flex;
}
.note-turn{
  position:relative; transform-style:preserve-3d; flex:1; display:flex;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.note-front{flex:1;}
.note-flip.is-flipped .note-turn{transform:rotateY(180deg);}
.note-side{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column;
}
.note-back{
  position:absolute; inset:0; transform:rotateY(180deg);
  padding-bottom:12px; justify-content:center; overflow-y:auto;
}
.note-back .note-cap{padding-top:14px;}
.note-flip:hover .note-side{border-color:var(--ink-faint);}
.note-flip:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:16px;}

/* знак «есть уточнения»: у карточки без них оборота нет и знака тоже */
.note-flag{
  position:absolute; top:6px; right:6px; z-index:2;
  width:26px; height:26px; object-fit:contain;
  filter:drop-shadow(0 1px 3px rgba(255,255,255,.95));
}

/* ---------- окна выбора ----------
   Одно окно на три выбора: раздел, действие, уточнения. Списки прокручиваются,
   заголовок и кнопки остаются на месте. */
/* два класса, чтобы правило было сильнее общего .modal-card ниже */
.modal-card.modal-wide{max-width:640px;}
.modal-emoji{flex:none; font-size:24px; line-height:1.1;}
.modal-emoji img{display:block; width:42px; height:32px; object-fit:contain;}
.modal-cap{
  font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:.07em; margin:14px 0 8px;
}
.picker-list{overflow-y:auto; min-height:0;}

/* ---------- плитки выбора ----------
   Профессия и раздел выбираются такими же карточками, как действия: картинка
   3:2 сверху, подпись снизу, тонкая рамка. Один вид карточки на весь продукт —
   и в окне выбора, и на доске, и в готовой шпаргалке. */
.tile{
  display:flex; flex-direction:column; align-items:stretch;
  padding:0 0 10px; cursor:pointer; scroll-snap-align:start;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; font-family:'Inter', sans-serif;
  transition:border-color .15s ease, transform .15s ease;
}
.tile-pic{
  display:block; position:relative; width:100%; aspect-ratio:3 / 2;
  background:#fff; border-bottom:1px solid var(--line);
}
.tile-pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;}
/* эмодзи, пока раздел без рисунка */
.tile-pic .tile-emoji{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:30px; line-height:1;
}
/* картинки ещё нет и эмодзи не задан — просто пустое поле */
.tile-ic-wait{position:absolute; inset:0; background:rgba(43,58,74,.06);}
.tile-name{
  font-size:12.5px; font-weight:600; line-height:1.25; color:var(--ink);
  text-align:center; padding:9px 6px 0;
  /* по слогам не рвём: «Чистильщик бассейна», а не «Чистильщи-к». Слово, которое
     само шире плитки, всё же переносим — иначе его обрежет край */
  overflow-wrap:break-word; hyphens:none;
  /* место под две строки: «Мастер-санузел» и «Кухня» стоят в ряду ровно */
  min-height:2.5em;
}
.tile:hover{border-color:var(--ink-faint); transform:translateY(-2px);}

/* ---------- лента с точками ----------
   Плитки идут одной строкой и прилипают к краю страницы: пальцем — свайп,
   мышью — точка под лентой. Сколько плиток в ряду, решает CSS; число страниц
   считает скрипт по фактической ширине, поэтому длина списка ни на что не влияет. */
.pager{flex:none; margin-bottom:4px;}
.pager-track{
  /* четыре в ряду, а не пять: плитка получается такого же размера, как карточка
     на доске, — окно выбора и собранная шпаргалка выглядят одним набором */
  --per:4;
  /* колонок столько, сколько плиток, но не больше, чем помещается в ряд: четыре
     раздела занимают всю ширину окна, четырнадцать — листаются по пять */
  --cols:min(var(--n, var(--per)), var(--per));
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--cols) - 1) * 6px) / var(--cols));
  /* stretch, а не start: плитки в ряду одной высоты, сколько бы строк ни было
     в подписи — иначе ряд стоит ступеньками */
  gap:6px; align-items:stretch;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-bottom:2px;
}
.pager-track::-webkit-scrollbar{display:none;}
/* карточки действий — в два ряда: страница вмещает вдвое больше, и лента
   листается вдвое реже. Ряды равной высоты, чтобы стикеры стояли ровно */
.pager-track.two-rows{
  grid-template-rows:repeat(2, 1fr); align-items:stretch;
  /* по колонкам зазор тот же, что в один ряд: иначе карточка действия выходит
     на пиксель уже плитки раздела, и два окна подряд не совпадают */
  gap:16px 6px; padding-top:8px;
}
.pager-dots{
  display:flex; justify-content:center; align-items:center; gap:6px;
  margin-top:8px;
}
.pager-dot{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:var(--line); cursor:pointer;
  transition:background .15s ease, width .15s ease;
}
.pager-dot:hover{background:var(--ink-faint);}
/* текущая страница — вытянутая точка: видно и в чёрно-белом, не только цветом */
.pager-dot.on{width:18px; border-radius:4px; background:var(--orange);}

/* ---------- окно уточнений ---------- */
.modal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(34,32,28,.42);
}
.modal-card{
  width:100%; max-width:330px; max-height:82vh;
  /* прокручивается список, а заголовок и кнопки остаются на месте:
     иначе в длинном списке шаблонов «Собрать с нуля» уходит за край */
  display:flex; flex-direction:column;
  background:#fff; border-radius:16px; padding:18px 18px 16px;
  box-shadow:0 30px 60px -30px rgba(32,32,32,.6);
}
.picker-opts{overflow-y:auto; min-height:0;}
.modal-head{
  flex:none;
  /* заголовок и картинка раздела на одной линии, сколько бы колонок ни было:
     у окна уточнений слева иконка, у окна профессий её нет */
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:14px;
}
.modal-head > div{flex:1; min-width:0;}
.modal-ic{flex:none; margin-top:1px;}
.modal-ic{width:32px; height:26px;}
.modal-title{font-size:15px; font-weight:700; line-height:1.25;}
.modal-sub{
  font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:.07em; margin-top:3px;
}
.modal-x{
  flex:none; margin-left:auto;
  width:28px; height:28px; border:0; border-radius:8px; background:var(--panel);
  color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.modal-x svg{width:14px; height:14px;}
.modal-x:hover{color:var(--ink);}

/* окно без заголовка: одни плитки. Ни подписи, ни крестика — закрывается
   касанием мимо окна и клавишей Esc */
.modal-card.modal-bare{position:relative; padding:16px 16px 14px;}

.picker-opts{display:flex; flex-direction:column; gap:7px;}
.note-opt{
  display:flex; align-items:center; gap:9px;
  font-family:'Inter', sans-serif; font-size:13.5px; font-weight:500; line-height:1.3;
  padding:11px 12px; border-radius:11px; cursor:pointer; text-align:left; width:100%;
  background:var(--panel); color:var(--ink); border:1px solid var(--line);
}
.note-opt:hover{border-color:var(--ink-faint);}

/* Три состояния уточнения. Различаются знаком, а не только цветом: пусто —
   на усмотрение исполнителя, ✓ — делать именно так, ✗ — этого не делать. */
.opt-sign{
  flex:none; width:19px; height:19px; border-radius:6px;
  border:1.5px solid var(--ink-faint); background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; line-height:1; color:#fff;
}
.note-opt.on{border-color:var(--orange); background:var(--orange-soft);}
.note-opt.on .opt-sign{background:var(--orange); border-color:var(--orange);}
.note-opt.on .opt-sign::before{content:'✓';}
.note-opt.no{border-color:var(--red); background:var(--red-dim);}
.note-opt.no .opt-sign{background:var(--red); border-color:var(--red);}
.note-opt.no .opt-sign::before{content:'✗';}
.note-opt.no{text-decoration:line-through; text-decoration-color:rgba(232,72,58,.45);}
.picker-actions{display:flex; flex:none; gap:8px; margin-top:16px;}
.note-add, .note-skip{
  font-family:'Inter', sans-serif; font-size:13.5px; font-weight:600; line-height:1.1;
  padding:12px 14px; border-radius:11px; cursor:pointer; border:1px solid transparent;
  flex:1;
}
.note-add{background:var(--ink); color:#fff; text-decoration:none;}
.note-skip{background:#fff; color:var(--red); border-color:var(--red-dim);}
.note-skip:hover{border-color:var(--red);}

/* ---------- блок комнаты: шпаргалка и просмотр читаются по комнатам ---------- */
.sheet-zone{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; margin-bottom:14px;
}
.sheet-zone:last-child{margin-bottom:0;}
.zone-bar{
  display:flex; align-items:center; gap:9px;
  padding:11px 14px; background:var(--t1);
}
.zone-bar-ic{font-size:18px; line-height:1;}
/* окошко 3:2, как у картинки на карточке: рисунок раздела в нём стоит целиком,
   а не с белыми полями сверху и снизу */
.zone-bar-ic img{
  display:block; width:36px; height:24px; object-fit:contain;
  border-radius:5px; background:#fff;
}
.zone-bar-name{
  font-family:'JetBrains Mono', monospace; font-size:11.5px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink);
}
/* тип рядом с названием раздела: нужен, только когда шпаргалка смешанная */
.zone-bar-type{
  margin-left:auto; padding:2px 8px; border-radius:20px;
  background:rgba(255,255,255,.6);
  font-size:11px; font-weight:600; color:var(--ink-soft);
}
/* сколько работ раздела отмечено; когда все — галочка и «Готово» */
.zone-bar-done{
  margin-left:auto; padding:2px 9px; border-radius:20px;
  background:rgba(255,255,255,.7);
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:500;
  color:var(--ink-soft); white-space:nowrap;
}
.zone-bar-type + .zone-bar-done{margin-left:0;}
.zone-bar-sign{margin-right:5px; font-weight:700;}
.sheet-zone.is-ready .zone-bar-done{
  background:var(--ok); color:#fff;
  font-family:'Inter', sans-serif; font-weight:600;
}
.sheet-zone.is-ready{border-color:var(--ok);}
/* число карточек в разделе: у свёрнутого блока это единственное, что о нём видно */
.zone-bar-count{
  margin-left:auto; min-width:22px; padding:2px 7px; border-radius:20px;
  background:rgba(255,255,255,.6); text-align:center;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--ink-soft);
}
.zone-bar-type + .zone-bar-count, .zone-bar-count + .zone-bar-done{margin-left:0;}

/* свернуть раздел до заголовка: собранное не мешает собирать дальше */
.zone-fold, .zone-x{
  flex:none; width:24px; height:24px; padding:0; border:0; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.5); color:var(--ink-soft); cursor:pointer;
}
.zone-fold svg{width:15px; height:15px; transition:transform .15s ease;}
.zone-x svg{width:13px; height:13px;}
.zone-fold:hover{background:#fff; color:var(--ink);}
.zone-x:hover{background:#fff; color:var(--red);}
.sheet-zone.is-folded .zone-cards{display:none;}
.sheet-zone.is-folded .zone-fold svg{transform:rotate(-90deg);}

.zone-bar[data-tone="1"]{background:var(--t1);} .zone-bar[data-tone="2"]{background:var(--t2);}
.zone-bar[data-tone="3"]{background:var(--t3);} .zone-bar[data-tone="4"]{background:var(--t4);}
.zone-bar[data-tone="5"]{background:var(--t5);} .zone-bar[data-tone="6"]{background:var(--t6);}
.zone-bar[data-tone="7"]{background:var(--t7);}
/* Карточки раздела: колонка шириной в строку с уточнениями, не уже. Узкие
   колонки переносили «Протереть столешницу» по слогам, широкие оставляли
   половину ряда пустой. 140px — та же ширина, что у плитки в окне выбора: окно
   и собранная шпаргалка выглядят одним набором карточек. */
.zone-cards{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-rows:min-content; gap:14px 10px; align-content:start;
  padding:18px 14px 16px;
}

/* Скотча больше нет. Он держал бумажную метафору — стикер, приклеенный к доске,
   — но рисунки на карточках плоские и векторные, и «бумажная» полоска рядом с
   ними читалась как деталь из другого набора. Разметка осталась: пустой
   .note-tape ничего не рисует, вернуть его — одно правило. */
.note-tape{display:none;}

/* ---------- выбор языка ---------- */
.hidden{display:none !important;}
/* что показывать на широком экране, а что на узком */
.only-mobile{display:none;}

@media (max-width:600px){
  /* четыре плитки в ряд вместо пяти: подписи вроде «Мастер-санузел» остаются
     читаемыми, а жест листания тот же */
  .pager-track{--per:3;}
  .tile, .note-sm{padding-bottom:8px;}
  .tile-name, .note-sm .note-cap{font-size:10.5px; padding:7px 5px 0;}
  .tile-pic .tile-emoji{font-size:26px;}
  /* окна на телефоне — шторка снизу: до неё дотягивается большой палец */
  .modal{padding:0; align-items:flex-end;}
  .modal-card{max-width:none; border-radius:18px 18px 0 0; padding:18px 16px 20px; max-height:88vh;}
  .modal-card.modal-wide{max-width:none;}

  .no-mobile{display:none;}
  .only-mobile{display:inline-flex;}
}

@media (max-width:600px){
  body::before{
    height:610px;
    background:
      linear-gradient(to bottom,rgba(247,244,237,.06) 0%,rgba(247,244,237,.2) 72%,var(--wall) 100%),
      url('../img/background-mobile.png') center top / cover no-repeat;
  }
  .wrap{padding:0 14px 40px;}
  .panel{padding:18px 14px 22px; border-radius:16px;}
  .panel-head{flex-direction:column; gap:10px; margin-bottom:18px;}
  .panel-head h1{font-size:19px;}
  .note{min-height:120px; padding:18px 10px 14px; gap:8px;}
  .note-ic{width:30px; height:30px;}
  .note-cap{font-size:12.5px;}
  /* строка не тянется под высоту стикера: её высота — это её содержимое */
  .note-row{min-height:0; padding:9px 12px; gap:4px 11px;}
  .note-row .note-cap{font-size:13.5px;}
  .note-row .note-ic{width:70px; height:56px;}
  .note-row .note-list{font-size:12px;}
}

@media print{
  body::before{display:none !important;}
}