/* style-07-pool-textbook.css — часть бывшего style.css (распил 22.10.2026): чипы-метки, челлендж, полоса плейлиста, каталог учебника.
   Файлы style-NN-*.css — ОДИН каскад: index.html подключает их подряд и по номерам, порядок значим
   (правило ниже по каскаду перебивает равное выше). Стережёт tools/check.js. */
  .tchip{display:inline-block;font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:var(--r-lg);
    background:var(--draft-tint);color:var(--alert-ink);margin-left:6px}
  /* ЧЕЛЛЕНДЖ (blox15 #6) — золото на учительских плашках: та же плашка, тот же рельс, другой цвет */
  .tchip.gold{background:var(--gold-tint);color:var(--gold-ink);border:1px solid var(--gold-line)}
  .bitem.chal{background:var(--gold-tint);border-color:var(--gold-line)}
  .oent.chal{background:var(--gold-tint)}
  .chal-lbl{color:var(--gold-ink)}
  .chal-lbl svg{vertical-align:-2px}
  .field select,.field textarea{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;
    font-size:var(--fs-input);width:100%;font-family:inherit}   /* 16px — тот же зум-заслон, см. .field input выше */
  .field textarea{min-height:70px;resize:vertical}
  /* blox28 #9 (пережило blox42): поле «Текст» выше обычного, ПОКА к таску не приложен файл (.tall
     теперь вешается по содержимому, не по виду) — учитель пишет развёрнутое задание. С файлом
     поле обычное: комментарий файлового таска короткий, высоту забирает панель файла.
     blox43 #1 — 210px на ПК съедали весь резерв середины: зона «С устройства» открывалась за
     нижним краем прокрутки (виден был только пунктирный верх). 110px хватает на абзац, а панель
     файла с зоной видна СРАЗУ; надо больше — поле тянется за уголок (resize:vertical). */
  .field textarea.tall{min-height:110px}
  /* blox42 — на ТЕЛЕФОНЕ панель файла стоит в середине ВСЕГДА (плиток вида нет). Резерв середины
     на коротком экране (667px) ≈160px: высокое поле 210px съедало его целиком — строка «link: …»
     обрезалась краем прокрутки, а панель файла вовсе не была видна (снимок 22.08). Поэтому «втрое
     выше» на телефоне превращается в «вчетверо строк»: 84px хватает на задание в несколько строк,
     а подпись «Файл» с кнопками источника выглядывает и зовёт прокрутить. */
  @media(max-width:859px){ .emodal .taskmid textarea.tall{min-height:84px} }
  /* blox40 #6 — с приложенным файлом поле «Текст» на телефоне ужимается до одной строки: «Файл»
     держит в резерве больше всех (карточка файла, кнопки источника, зона «с устройства»), и
     раздутый «Текст» съедал ровно ту высоту, где должна быть видна иконка приложенного файла.
     Поле растягивается вручную (resize:vertical). */
  @media(max-width:859px){ .emodal .taskmid:has(.afld-file) textarea:not(.tall){min-height:48px} }
  .students-pick{display:flex;flex-wrap:wrap;gap:8px}
  .students-pick label{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);
    border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 12px;cursor:pointer;font-weight:600}
  /* blox34 #9 — в окне таска состав учеников СКРОЛЛИТСЯ внутри себя: большой класс иначе растил бы
     окно вниз (кнопка «Сохранить» уходила бы за край — самая переподаваемая беда проекта, G1v). */
  .emodal .students-pick{max-height:132px;overflow-y:auto}
  /* blox34 #9 — строка двух флажков таска: ЧЕЛЛЕНДЖ и ЛИЧНОЕ. На ПК «Личное» прижато к правому
     краю, на телефоне падает под челлендж отдельной строкой (flex-basis:100%), а не дублируется
     второй разметкой под медиазапрос. Каждый флажок с подписью — один неразрывный узел .chkgrp,
     чтобы при переносе галочка не оторвалась от своей подписи (lingo-ui #3). */
  .chkrow{flex-wrap:wrap;row-gap:8px}
  .chkgrp{display:flex;align-items:center;gap:8px}
  .chkgrp input:disabled + label{color:var(--faint);cursor:not-allowed}
  .chkrow .indiv-grp{margin-left:auto}
  .excl-hint{margin:-4px 0 10px}
  @media(max-width:859px){ .chkrow .indiv-grp{margin-left:0;flex-basis:100%} }
  optgroup{font-weight:700}

  /* student: full-width standing-playlist bar — the app's one deliberately loud object.
     Was a grape body with a thin rainbow edge; now the palette gradient IS the bar (blox13 #5).
     Text goes dark grape, never white: white on a light sky/veil/grapefruit fill is unreadable. */
  .poolbar{position:relative;display:flex;align-items:center;gap:14px;border-radius:var(--r-xl);
    padding:18px 20px;color:var(--ink-strong);background:var(--grad-playlist);overflow:hidden;
    box-shadow:var(--sh-3);cursor:pointer;margin-bottom:18px;-webkit-tap-highlight-color:transparent;
    transition:transform var(--dur-release) var(--ease-spring),box-shadow var(--dur-state) var(--ease-standard)}
  .poolbar::after{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;
    border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.45),transparent 65%);pointer-events:none}
  @media (hover:hover){.poolbar:hover{box-shadow:var(--sh-4)}}
  .poolbar .pbtext{flex:1;min-width:0;position:relative}
  .poolbar .pbt{font-weight:800;font-size:var(--fs-xl);letter-spacing:var(--tracking-tight)}
  .poolbar .pbm{font-size:var(--fs-sm);color:var(--ink);font-weight:700;margin-top:3px}
  /* the weekly stat is a full sentence, so it reads as a quiet footnote — not a pill */
  .poolbar .pbweek{font-size:var(--fs-xs);font-weight:600;line-height:1.45;margin-top:10px;
    padding-top:9px;border-top:1px solid rgba(var(--sh-rgb),.22);color:var(--ink);
    max-width:32ch}
  /* кружок «играть» — тёмный, чтобы на пастельной радуге он был якорем, а не растворялся */
  .poolbar .pbplay{position:relative;width:56px;height:56px;border-radius:50%;background:var(--primary);
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--ic-lg);
    flex:0 0 auto;box-shadow:0 6px 18px rgba(var(--sh-rgb),.30);
    transition:transform var(--dur-state) var(--ease-standard)}
  @media (hover:hover){.poolbar:hover .pbplay{transform:scale(1.06)}}
  /* редизайн 27.10 — нажатие на грамматике агента 3: сухо вдавилась (--press-scale-lg), назад пружиной */
  .poolbar:active{transform:scale(var(--press-scale-lg));transition-duration:var(--dur-press-in);
    transition-timing-function:var(--ease-standard)}
  @media (prefers-reduced-motion:reduce){ .poolbar:active{transform:none} }
  /* link / file button (review panel); teacher comment bubble */
  .linkbtn{display:block;text-align:center;text-decoration:none;border-radius:var(--r-md);padding:9px;
    font-size:var(--fs-md);font-weight:700;background:rgba(255,255,255,.92);color:var(--ink)}
  .comment{font-size:var(--fs-xs);font-weight:600;opacity:.95;background:rgba(255,255,255,.18);
    border-radius:var(--r-xs);padding:5px 8px}
  /* add-square type tiles (the popup) */
  /* blox28 (owner) — зазор между плитками ВИДА и полем «Текст» убран (был 14+10px): освобождённую
     высоту тратим на то, чтобы окно таска на телефоне не уезжало вниз. Отступ снизу теперь даёт
     только сама .field (10px). */
  .typepick{display:flex;gap:8px;margin-bottom:0;flex-wrap:wrap}
  .typepick button{flex:1;min-width:68px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-md);
    padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
    font-weight:700;font-size:var(--fs-sm);color:var(--muted)}
  .typepick button.on{border-color:var(--accent-deep);background:var(--accent-tint);color:var(--accent-dark)}
  /* blox25 #10 — вид нельзя сменить (есть сдачи / личное / челлендж): плитки видны, но не жмутся */
  .typepick button:disabled{background:var(--fill-soft);border-color:var(--line-soft);
    color:var(--faint);cursor:default}
  /* выбранный вид остаётся выбранным, даже когда переключать уже нельзя: правило .on идёт
     выше и слабее, поэтому акцент проговаривается тут ещё раз */
  .typepick button:disabled.on{background:var(--accent-tint);border-color:var(--accent-deep);
    color:var(--accent-dark)}
  .typepick .ti{font-size:var(--ic-lg)}
  /* textbook source inside the entity modal: book carousel + exercise grid */
  .bk-car{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px}
  .bk-lbl{font-weight:800;font-size:var(--fs-sm);color:var(--accent-dark);min-width:150px;text-align:center}
  .bk-car button{background:var(--accent-tint);border:1px solid var(--accent-line);color:var(--accent-dark);
    border-radius:var(--r-sm);padding:4px 11px;cursor:pointer;font-size:var(--fs-md);line-height:1}
  .bk-car button:disabled{color:var(--faint);background:var(--surface);cursor:default}
  /* Ряд УРОКОВ внутри юнита (Focus 3). Переиспользует .gstrip/.gchip с экрана учителя — здесь
     только двухстрочная начинка таблетки: номер урока и его раздел. Полоса прокручивается вбок,
     как ряд групп, поэтому девять уроков помещаются и на 375px. */
  .lstrip{margin-bottom:12px}
  .lchip{flex-direction:column;align-items:flex-start;gap:1px;padding:7px 13px;line-height:1.2}
  .lchip .lno{font-weight:800;font-size:var(--fs-sm)}
  .lchip .lsec{font-weight:600;font-size:var(--fs-2xs);color:var(--faint)}
  /* ВЫБРАННЫЙ обязан читаться сильнее НАВЕДЁННОГО. У .gchip «выбран» — только подложка, а наведение
     рисует ещё и акцентную рамку: на снимке 1280px таблетка под курсором выглядела выбранной, а
     настоящая выбранная — нет. Поэтому выбранному даём рамку акцентными ЧЕРНИЛАМИ (гуще, чем
     --accent-deep у наведения) — правило идёт после, поэтому побеждает при равной специфичности. */
  .lchip.on{border-color:var(--accent-ink)}
  .lchip.on .lsec{color:var(--accent-dark)}
  /* ВИДЕО урока: принадлежит уроку целиком, не строке таблицы, поэтому стоит НАД сеткой
     упражнений отдельным рядом. Пустой урок — пустой .vid-wrap нулевой высоты: блок существует
     всегда, чтобы переключение урока не меняло высоту окна (правило «высота инвариантна»). */
  .vid-wrap:empty{display:none}
  .vid-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
  .vid-tile{display:flex;align-items:center;gap:7px;cursor:pointer;min-height:44px;
    padding:8px 13px;border-radius:var(--r-md);border:1px solid var(--accent-line);
    background:var(--accent-tint);color:var(--accent-dark);font-weight:700;font-size:var(--fs-sm)}
  @media (hover:hover){.vid-tile:hover{border-color:var(--accent-deep);box-shadow:var(--sh-2)}}
  .vid-tile:active{transform:scale(.97)}
  .vid-lbl{overflow-wrap:anywhere}
  .ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
  .ex-tile{position:relative;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:var(--r-md);
    padding:10px 30px 10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-height:54px}
  @media (hover:hover){.ex-tile:hover{border-color:var(--accent-deep);background:var(--accent-tint)}}
  /* blox58 #6 — режим «выбрать несколько»: выбранная плитка/хотспот, кнопка режима, строка «Выбрано N» */
  .ex-tile.sel{border-color:var(--accent-deep);background:var(--accent-tint);box-shadow:inset 0 0 0 2px var(--accent-deep)}
  .pg-hot.sel{border-style:solid;border-color:var(--accent-deep);background:color-mix(in srgb, var(--accent-deep) 28%, transparent)}
  .pk-multi[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent-deep);color:var(--accent-dark)}
  .pk-selbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;
    border-radius:var(--r-md);background:var(--accent-tint);font-size:var(--fs-sm)}
  .pk-selbar .pk-cnt{font-weight:700}
  .pk-selbar .pk-warn{color:var(--alert-ink)}
  .ex-no{font-weight:800;font-size:var(--fs-sm);color:var(--accent-dark)}
  .ex-tt{font-size:var(--fs-sm);color:var(--ink);line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ex-aud{position:absolute;top:8px;right:10px;font-size:var(--fs-sm)}
  /* плитка правила (type 'info'): приглушённая, с подписью «правило» рядом с номером */
  .ex-tile.ex-info{background:var(--surface-2)}
  .ex-kind{margin-left:8px;font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
  /* ── ВИД «СТРАНИЦА» окна «из учебника» (blox57 #2). Переключатель список/страница + сама
     страница учебника с прозрачными кнопками поверх упражнений. */
  /* ШАПКА ОКНА: название слева, тумблер вида справа — одной строкой (владелец, 15.09.2026:
     «переместить рядом с названием юнита»). Три вещи, которые эта строка обязана держать:
     · тумблер НЕ жмётся и НЕ переносится (flex:0 0 auto) — иначе длинное имя юнита сдвинет его
       вниз и вернёт ту самую строку, ради экономии которой всё и затевалось;
     · длинное имя РЕЖЕТСЯ троеточием, а не упирается в тумблер (min-width:0 обязателен: без него
       flex-ребёнок не ужимается ниже своего содержимого и overflow не наступает вовсе);
     · справа зарезервировано место под крестик .eclose — он лежит абсолютом в углу панели. */
  .pk-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-right:30px}
  .pk-head h3{flex:1 1 auto;min-width:0;margin:0}
  /* Троеточие — ТОЛЬКО когда рядом стоит тумблер. На телефоне его нет вовсе, и там длинное имя
     по-прежнему переносится на вторую строку: резать его там не за что — соперника по строке нет,
     а обрезанное имя юнита это потерянная подсказка, где учитель находится. */
  .pk-head:has(.pgsw) h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pk-head .pgsw-wrap{flex:0 0 auto}
  /* сам тумблер — общий .onotes (вид описан выше, у монитора); здесь только его поля в шапке */
  .pgsw{margin:-10px -8px -10px 0}
  /* РАСТУЩИЙ РЕБЁНОК ОБЯЗАН БЫТЬ ОГРАНИЧЕН (lingo-ui §3, самая переподаваемая жалоба проекта).
     Страница A4 при ширине окна 840px — это ~1190px высоты, разворот вдвое больше: без потолка
     низ окна уехал бы за край экрана. Поэтому страницы листают ВНУТРИ своей области, и высота
     окна не зависит от того, одна их тут или пять. */
  .pg-view{overflow:auto;overscroll-behavior:contain;margin-bottom:14px;
    border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:8px}
  /* ОКНО СО СТРАНИЦЕЙ ОБЯЗАНО ВЛЕЗАТЬ В ЭКРАН ПО ВЫСОТЕ. Первая редакция дала области потолок
     62vh — и этого НЕ ХВАТИЛО: замер показал, что на экране 800px низ окна («или ввести вручную»)
     уходит за край на 58px, на 700px — на 96px. Виноват не потолок, а то, что над областью стоят
     шапка, ряд уроков, ряд видео и переключатель, и их высоту 62vh не знает.
     Механизм тот же, что у окна таска (blox30 #1), и магических констант в нём нет: панель
     ограничена вьюпортом, все её дети не жмутся, а ужимается РОВНО ОДИН — область со сканами.
     Сколько заняли шапка и ряды, столько ей и осталось; низ окна при этом прибит к экрану.
     Сначала правило включалось только в виде «страница» (:has(.pg-view)), а список «вёл себя как
     прежде» — и прежде значило: у Focus 3 в юните до 99 упражнений, панель вырастала за экран, и во
     ВПИСАННОМ окне (body.taskdock — панель position:fixed с потолком, .emodal не прокручивается) низ
     списка и кнопка «или ввести вручную» просто отрезались (владелец, 15.09.2026: «кнопки „или
     вручную“ даже не видно»). Поэтому :has(.ex-body) — оба вида; в списке прокручивается сам
     .ex-body (у страницы свой скролл — .pg-view, его следящий wireSpy слушает именно его). */
  .emodal .panel:has(.ex-body){display:flex;flex-direction:column;max-height:calc(100dvh - 2 * var(--modal-gap))}
  .emodal .panel:has(.ex-body) > *{flex-shrink:0}
  .emodal .panel:has(.ex-body) > .ex-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .ex-body:has(> .ex-grid){overflow:auto;overscroll-behavior:contain}
  .ex-body > .pg-view{flex:1 1 auto;min-height:140px}
  .pg-sheet{position:relative;width:100%}
  .pg-sheet + .pg-sheet{margin-top:8px}
  .pg-sheet img{display:block;width:100%;height:auto;border-radius:var(--r-sm)}
  /* Хотспот виден и В ПОКОЕ — пунктирный контур: кликабельное обязано выглядеть кликабельным до
     нажатия (lingo-ui §12). Наведение заливает его полупрозрачным акцентом, и текст книги под
     заливкой остаётся читаемым — это не украшение: НИЗ бокса ВЫВЕДЕН (до следующего номера в
     колонке), а не прочитан из книги, и учитель обязан видеть границы того, что выберет, ДО
     клика. Честность вместо мнимой точности. */
  .pg-hot{position:absolute;border:1px dashed var(--accent-line);background:transparent;
    border-radius:var(--r-sm);cursor:pointer;padding:0}
  /* Своего номера хотспот НЕ несёт: книга печатает его сама, ровно в левом верхнем углу рамки —
     вторая цифра поверх первой была бы лишними чернилами. Номер для слепого чтения живёт в
     aria-label, подсказка с формулировкой — в title. */
  @media (hover:hover){
    .pg-hot:hover{border-style:solid;border-color:var(--accent-deep);
      background:color-mix(in srgb, var(--accent-deep) 20%, transparent)}
  }
  /* КНОПКА НА ПЕЧАТНОЙ ССЫЛКЕ «For the worksheet, go to page 116.» (blox57 #2). Та же механика, что
     у хотспота — проценты от страницы, — но роль другая: не «выбрать упражнение», а «перейти по
     полотну». Поэтому и вид другой: точечный контур вместо пунктира, и стоит ПОВЕРХ хотспота
     (z-index): на стр. 10 строка ссылки напечатана внутри рамки упражнения 8, и без этого клик
     по ней ставил бы упражнение. Ссылка — это ДАННЫЕ книги: где строки нет, нет и кнопки. */
  .pg-link{position:absolute;z-index:1;border:1px dotted var(--accent-deep);background:transparent;
    border-radius:var(--r-sm);cursor:pointer;padding:0;min-height:22px}
  @media (hover:hover){
    .pg-link:hover{border-style:solid;background:color-mix(in srgb, var(--accent-deep) 20%, transparent)}
  }
  .src-ref{font-weight:700;font-size:var(--fs-sm);color:var(--accent-dark);background:var(--accent-tint);
    border-radius:var(--r-sm);padding:8px 11px;margin-bottom:12px}
  .manual-sw{width:100%}
  /* ===== ПИКЕР ТИПА ТАСКА (blox80 #6) ======================================================
     Типы — ПЛАШКИ из того же материала, что карточки заданий (.rect/.bitem в style-02): лист бумаги
     с вдавленным рельсом; рельс синий у типов со сдачей, серый у остальных — тот же код цвета, что
     на самой карточке (itemColor). Две группы: «Со сдачей» и «Без сдачи». Класс группы — .tsub, НЕ .sub:
     голый .sub уже занят подзаголовком (style-01, margin 4px 0 18px) и растягивал ряды плашек.
     Формы две, разметка одна (builder.js recPicker): без .pop — плашки прямо в окне, 4 столбца
     (ПК); с .pop — в окне одна плашка-кнопка с текущим типом, а группы уезжают во всплывашку.
     Высота плашек задана, а не по содержимому: все одной высоты, название в одну строку
     (решение владельца по эскизу, вариант 2). */
  .recbox{position:relative;margin-top:8px}
  .recpick{display:flex;flex-direction:column;gap:8px}
  .recgrps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .recgrp{display:flex;flex-direction:column;gap:4px;min-width:0}
  .rech{display:flex;align-items:center;gap:6px;font-size:var(--fs-2xs);line-height:13px;font-weight:800;
    letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-left:2px}
  .rech::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--task-plain)}
  .rech.tsub::before{background:var(--task-sub)}
  .reccells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 4px}
  /* сама плашка: материал карточки + рельс в ::before (как у .rect — границу не утопить) */
  .recb,.rectrig{--rail:var(--task-plain);position:relative;display:flex;align-items:center;gap:4px;
    height:36px;min-width:0;padding:0 2px 0 12px;font-family:inherit;color:var(--ink);text-align:left;
    background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-sm);box-shadow:var(--sheet-1);
    cursor:pointer;transition:box-shadow var(--t) var(--ease)}
  .recb.tsub,.rectrig.tsub{--rail:var(--task-sub)}
  .recb::before,.rectrig::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:5px;border-radius:var(--r-2xs);
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--rail) 86%, var(--emb-deep)) 0%, var(--rail) 44%,
      color-mix(in srgb, var(--rail) 90%, var(--emb-lift)) 100%);
    box-shadow:var(--emb-groove)}
  @media (hover:hover){.recb:not(.off):hover,.rectrig:hover{box-shadow:var(--sheet-2)}}
  /* blox43 #7 / blox52 #3 — толщина штриха иконки в пикселях экрана */
  .recb .ic,.rectrig .ic{--icw:1.6px;width:16px;height:16px;flex:0 0 auto;vertical-align:0}
  .recb.tsub .ic,.rectrig.tsub .ic{color:var(--task-sub)}
  .recnm{font-weight:600;font-size:var(--fs-xs);letter-spacing:-.02em;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  /* выбранный тип — обводка чернилами и галочка значком НА УГЛУ: у названия она места не отнимает */
  .recb.on{border-color:var(--ink);box-shadow:var(--sheet-1),0 0 0 1.5px var(--ink)}
  .recok{display:none;position:absolute;top:-6px;right:-6px;width:17px;height:17px;border-radius:50%;
    background:var(--ink);color:var(--card);place-items:center;box-shadow:0 0 0 2px var(--card);z-index:1}
  .recok .ic{width:11px;height:11px;--icw:2.6px;color:var(--card)}
  .recb.on .recok{display:grid}
  /* blox41 #1 + blox42 #7 — пикер рисует ВСЕ типы всегда; недопустимые текущему виду СЕРЕЮТ, но
     остаются на месте (решение владельца 22.08: «не пропадают, а сереют»). Для пальца и
     скринридера погашенной плашки нет: recPicker вешает ей атрибут disabled. */
  .recb.off{background:var(--fill-soft);box-shadow:none;color:var(--faint);opacity:.75;pointer-events:none;
    --rail:var(--line)}
  .recb.off .ic{color:var(--faint)}
  /* blox61 #6 — ПРИЧИНА серых плашек, строкой под пикером: на телефоне наведения нет вовсе. */
  .rechint{position:absolute;top:100%;left:0;right:0;margin-top:1px;
    font-size:var(--fs-2xs);color:var(--faint);line-height:1.2;pointer-events:none;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* blox83 #7 — на ПК строка стояла ВПРИТЫК к ряду «Челлендж / Личное»: отступ под пикером (.recwrap,
     14px) она занимала целиком (13px своей высоты), воздуха не оставалось — «текст не влазит»
     (владелец). Запас добавлен самой широкой форме (во всплывашке строки под пикером нет) и
     ВСЕГДА, а не только при видимой строке: иначе ряд ниже прыгал бы при приложении файла. */
  .recbox:not(.pop){margin-bottom:10px}
  /* части всплывашки — в окне (без .pop) их нет */
  .rectrig,.recveil,.rechead,.recpophint{display:none}

  /* ---- ВСПЛЫВАШКА (.pop): узкое окно ---- */
  .recbox.pop .rectrig{display:flex;width:100%;height:44px;padding:0 12px 0 15px;gap:8px}
  .recbox.pop .rectrig .recnm{font-size:var(--fs-md);font-weight:700;flex:1}
  .rectrig.empty .recnm{color:var(--muted)}
  .rectrig .recdn{margin-left:auto;color:var(--muted)}
  .recbox.pop .recpick{display:none}
  .recbox.pop.open .recveil{display:block;position:fixed;inset:0;z-index:70;background:var(--scrim)}
  .recbox.pop.open .recpick{display:flex;position:fixed;z-index:71;left:10px;right:10px;top:50%;
    transform:translateY(-50%);max-height:calc(100% - 20px);overflow-y:auto;gap:10px;
    background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sheet-4);padding:14px 12px}
  .recbox.pop .rechead{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .rechead b{font-size:var(--fs-lg);color:var(--ink);letter-spacing:var(--tracking-tight)}
  .recx{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:none;background:var(--fill-soft);
    color:var(--muted);font-size:var(--fs-md);cursor:pointer;font-family:inherit}
  .recbox.pop .recgrps{gap:10px}
  .recbox.pop .recgrp{gap:7px}
  .recbox.pop .reccells{grid-template-columns:minmax(0,1fr);gap:7px}
  .recbox.pop .recb{height:44px;padding:0 6px 0 15px;gap:6px}
  .recbox.pop .recb .recnm{font-size:var(--fs-sm)}
  .recbox.pop .recpophint{display:block;font-size:var(--fs-xs);color:var(--faint)}
  .recbox.pop .rechint{display:none}   /* в окне под плашкой-кнопкой причина не нужна — она внутри всплывашки */
  @media (prefers-reduced-motion:reduce){.recb,.rectrig{transition:none}}
  /* blox43 #3 — на ПК окно таска шире (раскладку пикера типов выбирает теперь сам пикер, blox80 #6). */
  @media(min-width:860px){
    .emodal .panel{max-width:840px}
    /* blox28 #5 — на ПК плитки ВИДА (Файл/Текст/Ссылка/Квиз) кладём иконку и подпись В ОДНУ строку
       и жмём по вертикали: высвобождает место, чтобы окно таска влезало в экран целиком. На узких
       экранах остаётся вертикальная раскладка (иконка над подписью) — там ширины на строку нет. */
    .typepick button{flex-direction:row;padding:9px 8px;gap:8px}
    .typepick .ti{font-size:var(--ic-md)}
  }