/* JUST Forms - конструктор опроса. Только этот файл и app.html.
   css/tokens.css и css/ui.css общие, они тут не правятся: все, что нужно
   переопределить (например cursor:grab у .qrow), переопределяется ниже.

   Палитра экрана: слоновая кость, уголь, апельсин. Пепел и дым - служебная
   подложка, не четвертый цвет макета. Лайма нет нигде - решение владельца.
   Апельсин означает действие или проблему, на украшение не тратится.
   Декоративных цветных, градиентных и светящихся полосок по верхнему краю
   карточек и панелей нет - постоянный запрет владельца 20.09.2026.
   :hover только через @media (hover:hover) - урок iOS 18.09. */

/* ---------- раскладка кабинета ---------- */
.layout{
  display:grid;gap:16px;padding-block:20px;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"build" "preview" "check" "toc";   /* на телефоне оглавление уходит вниз: оно повторяет список вопросов, а назад уводит кнопка в шапке */
}
.area-toc{grid-area:toc}
.area-build{grid-area:build}
.area-check{grid-area:check}
.area-preview{grid-area:preview}

/* 900-1199: две колонки. Проверка уходит под оглавление, конструктор получает
   всю правую половину, иначе на 1024 заголовки вопросов режутся многоточием */
@media (min-width:900px){
  .layout{
    grid-template-columns:300px minmax(0,1fr);
    grid-template-areas:"toc build" "check build" "preview preview";
    align-items:start;
  }
}
@media (min-width:1200px){
  .layout{
    grid-template-columns:240px minmax(0,1fr) 320px;
    grid-template-areas:"toc build check" "preview preview preview";
  }
}
/* рядом с конструктором предпросмотр встает только там, где обеим колонкам хватает ширины */
@media (min-width:1400px){
  body[data-preview="on"] .layout{
    grid-template-columns:240px minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"toc build preview" "toc check check";
  }
}
@media (min-width:1480px){
  .layout{grid-template-columns:268px minmax(0,1fr) 344px}
  body[data-preview="on"] .layout{grid-template-columns:268px minmax(0,1fr) minmax(0,1fr)}
}
body:not([data-preview="on"]) .area-preview{display:none}

/* каталог занимает всю ширину: тут нет ни оглавления, ни проверки */
.layout--catalog{grid-template-columns:minmax(0,1fr);grid-template-areas:"build"}
@media (min-width:1024px){ .layout--catalog{grid-template-columns:minmax(0,1fr);grid-template-areas:"build"} }

/* ---------- шапка ---------- */
.topbar__in{flex-wrap:wrap;row-gap:10px;padding-block:8px}
.topbar__acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn--sm{min-height:40px}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tagbtn{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;
  border:1px dashed var(--rule-strong);border-radius:var(--radius);
  background:transparent;color:var(--muted);cursor:pointer;
  padding:0 10px;font-size:11px;text-transform:uppercase;
}
@media (hover:hover){ .tagbtn:hover{border-style:solid;color:var(--ink);border-color:var(--ink)} }
.tagbtn:active{border-style:solid;color:var(--ink)}

/* на телефоне действия уходят на свою строку: иначе каждая кнопка встает отдельным этажом
   и шапка съедает четверть экрана */
@media (max-width:760px){
  .topbar__spacer{flex:0 0 100%;height:0}
  .topbar__acts{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .topbar__acts .btn{padding:0 6px;font-size:11px;min-height:44px;text-align:center;line-height:1.1}
  .topbar__acts .tagbtn{grid-column:1 / -1;justify-content:center;order:3}
  .topbar__acts:has(> :only-child){grid-template-columns:minmax(0,1fr)}
}
/* действия шапки на телефоне - своей строкой во всю ширину: иначе блок раздувает первую
   колонку сетки шапки и ссылки разделов уезжают за правый край */
@media (max-width:560px){ .topbar__in > .topbar__acts{grid-column:1 / -1} }

/* ---------- панели, общий ритм ---------- */
.panel__head{flex-wrap:wrap;row-gap:8px}
.panel__title{font-family:var(--font-display);font-weight:700;font-size:16px;line-height:.94;margin:0}
.panel__sub{font-size:12px;text-transform:uppercase;color:var(--muted);margin:0}
.rowacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.note{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.35}
.note b{font-weight:400;color:var(--ink)}
.sep{height:1px;background:var(--rule);margin:18px 0 14px;border:0}
.stack-sm{display:grid;gap:10px}

/* ---------- каталог опросов ---------- */
.filters{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin-bottom:14px}
@media (min-width:700px){ .filters{grid-template-columns:minmax(0,1fr) 200px 200px} }
.inp{
  width:100%;min-height:48px;padding:11px 12px;
  border:1px solid var(--line-ui);border-radius:var(--radius);
  background:var(--white);font-size:16px;
}
textarea.inp{min-height:72px;resize:vertical;line-height:1.35}
/* стрелку и место под нее у select.inp задает ui.css (фирменные выпадающие списки, 23.09.2026) */
.lab{display:block;font-size:11px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}

.cat{list-style:none;margin:0;padding:0}
.cat li{border-bottom:1px solid var(--rule)}
.cat li:last-child{border-bottom:0}
.catrow{
  display:grid;gap:4px 14px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;padding:12px 4px;min-height:48px;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){
  .catrow{grid-template-columns:minmax(0,1fr) 104px 96px 128px 152px;align-items:center}
}
.catrow[aria-disabled="true"]{cursor:default}
@media (hover:hover){ .catrow:hover{background:var(--faint)} .catrow[aria-disabled="true"]:hover{background:transparent} }
.catrow:active{background:var(--faint)}
.catrow__name{font-size:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.catrow__cell{font-size:12px;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.cathead{display:none}
@media (min-width:860px){
  .cathead{
    display:grid;grid-template-columns:minmax(0,1fr) 104px 96px 128px 152px;gap:14px;
    padding:0 4px 8px;border-bottom:1px solid var(--rule);
    font-size:11px;text-transform:uppercase;color:var(--muted);
  }
}

/* ---------- оглавление текущего опроса ---------- */
.toc{list-style:none;margin:0;padding:0}
.toc__item{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:baseline;
  width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  padding:9px 18px;border-bottom:1px solid var(--rule);min-height:44px;
}
.toc__item:last-child{border-bottom:0}
@media (hover:hover){ .toc__item:hover{background:var(--faint)} }
.toc__item:active{background:var(--faint)}
.toc__item[aria-current="true"]{background:var(--ink);color:var(--paper)}
.toc__item[aria-current="true"] .toc__kind{color:rgba(248,243,234,.72)}
.toc__num{font-family:var(--font-display);font-size:13px;color:var(--muted)}
.toc__item[aria-current="true"] .toc__num{color:rgba(248,243,234,.72)}
.toc__text{min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toc__kind{display:block;font-size:11px;text-transform:uppercase;color:var(--muted)}

/* ---------- строка вопроса и карточка правки ---------- */
.qlist{list-style:none;margin:0;padding:0}
.qitem{
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);margin-bottom:8px;
}
.qitem[data-open="true"]{background:var(--white);border-color:var(--ink)}
.qitem[data-flag="err"]{border-color:var(--orange)}
.qhead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;padding:6px 6px 6px 10px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* ручка перетаскивания: шесть точек; touch-action:none - палец тянет строку, а не страницу */
.qgrip{
  width:32px;height:48px;display:grid;place-items:center;border:0;border-radius:var(--radius);background:transparent;
  color:var(--muted);cursor:grab;touch-action:none;padding:0;
}
.qgrip svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round}
@media (hover:hover){ .qgrip:hover{color:var(--ink);background:var(--faint)} }
.qgrip:focus-visible{outline:2px solid var(--ink);outline-offset:1px;color:var(--ink)}
.qitem.is-dragging{position:relative;z-index:3;background:var(--white);border-color:var(--ink);cursor:grabbing}
.qitem.is-dragging .qgrip{cursor:grabbing;color:var(--ink)}
.is-sorting .qitem:not(.is-dragging){transition:transform .16s ease}
@media (prefers-reduced-motion:reduce){ .is-sorting .qitem:not(.is-dragging){transition:none} }
body.is-dragging-q{user-select:none;-webkit-user-select:none;cursor:grabbing}
@media (hover:hover){ .iconbtn--del:hover:not([disabled]){border-color:var(--orange);color:var(--orange);background:transparent} }
/* «Вернуть» после удаления: плашка внизу по центру, 8 секунд */
.undo{
  position:fixed;left:50%;bottom:20px;translate:-50% 0;z-index:40;display:flex;align-items:center;gap:14px;
  max-width:calc(100vw - 32px);padding:10px 10px 10px 16px;border-radius:var(--radius);background:var(--ink);color:var(--paper);font-size:14px;
}
.undo[hidden]{display:none}
.undo__btn{border:1px solid var(--paper);border-radius:var(--radius);background:transparent;color:var(--paper);font:inherit;text-transform:uppercase;font-size:13px;padding:8px 12px;cursor:pointer;white-space:nowrap}
@media (hover:hover){ .undo__btn:hover{background:var(--paper);color:var(--ink)} }
.qopen{
  display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;
  min-height:48px;text-align:left;background:transparent;border:0;cursor:pointer;padding:4px 2px;
}
.qnum{font-family:var(--font-display);font-size:15px;color:var(--muted)}
.qitem[data-open="true"] .qnum{color:var(--ink)}
.qtitle{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qmeta{display:block;font-size:11px;text-transform:uppercase;color:var(--muted);margin-top:3px}
.qmove{display:flex;gap:4px;flex:0 0 auto}
.iconbtn{
  width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-ui);border-radius:var(--radius);background:transparent;
}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
@media (hover:hover){ .iconbtn:hover:not([disabled]){background:var(--faint);border-color:var(--ink)} }
.iconbtn:active:not([disabled]){background:var(--ash);border-color:var(--ink)}
.iconbtn[disabled]{opacity:.32;cursor:not-allowed}

.qcard{display:grid;gap:12px;padding:4px 12px 14px;border-top:1px solid var(--rule)}
.qcard__two{display:grid;gap:12px}
@media (min-width:620px){ .qcard__two{grid-template-columns:minmax(0,1fr) 180px} }
.field{display:grid;gap:4px;min-width:0}
.opts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.opt{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:6px;align-items:center}
.opt__key{font-size:11px;text-transform:uppercase;color:var(--muted);margin-top:3px}
.switches{display:grid;gap:8px}
.sw{display:flex;gap:10px;align-items:flex-start;min-height:32px;font-size:15px;cursor:pointer}
.sw input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--orange);flex:0 0 auto}
.sw input:disabled{accent-color:var(--smoke)}
.sw--off{color:var(--muted);cursor:default}
.sw__note{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.more{border-top:1px solid var(--rule);padding-top:10px}
.more>summary{
  font-size:12px;text-transform:uppercase;color:var(--muted);cursor:pointer;
  min-height:32px;display:flex;align-items:center;gap:8px;
}
.more[open]>summary{color:var(--ink)}
.more__body{display:grid;gap:12px;padding-top:10px}
.consents{border:1px dashed var(--rule-strong);border-radius:var(--radius);padding:12px;background:var(--faint)}

/* ---------- текстовый вид ---------- */
.viewtabs{display:inline-flex;border:1px solid var(--ink);border-radius:var(--radius);overflow:hidden}
.viewtabs button{
  min-height:40px;padding:0 14px;border:0;background:transparent;cursor:pointer;
  font-size:13px;text-transform:uppercase;
}
.viewtabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media (hover:hover){ .viewtabs button:not([aria-pressed="true"]):hover{background:var(--faint)} }
textarea.syntax{width:100%;min-height:min(60svh,460px);font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums}
.legend-tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px}
.legend-tbl th,.legend-tbl td{text-align:left;padding:5px 8px 5px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.legend-tbl th{width:78px;font-weight:400;font-family:var(--font-display);font-size:13px}
.legend-tbl tr:last-child th,.legend-tbl tr:last-child td{border-bottom:0}
.parse{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.parse li{font-size:13px;border-left:2px solid var(--rule-strong);padding-left:10px;color:var(--muted)}
.parse li[data-bad="true"]{border-left-color:var(--orange);color:var(--ink)}

/* ---------- проверка путей ---------- */
.finds{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.find{
  display:grid;gap:4px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--radius);background:transparent;
  padding:10px 12px;min-height:48px;
}
.find--err{border-color:var(--orange)}
.find--warn{border-style:dashed}
@media (hover:hover){ .find:hover{background:var(--faint)} }
.find:active{background:var(--faint)}
.find__code{font-size:11px;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.find__msg{font-size:14px;line-height:1.35}
.find__fix{font-size:12px;text-transform:uppercase;color:var(--orange)}
.okcheck{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--rule-strong);border-radius:var(--radius);
  background:var(--ash);padding:12px 14px;font-size:14px;
}
.okcheck svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--ink);stroke-width:2.4;margin-top:1px}
.countline{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.countline b{font-weight:400;color:var(--ink)}
.rule[aria-current="true"]{border-color:var(--ink);background:var(--white)}
.rule__acts{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
/* ссылка на вопрос внутри правила: наборным шрифтом с тонким подчеркиванием,
   иначе заголовочный Loos Extended превращает правило в стену жирного текста */
.rule b{font-family:var(--font-text);font-weight:400;border-bottom:1px solid var(--rule-strong)}

/* ---------- предпросмотр рядом с конструктором ---------- */
.pv{display:grid;gap:14px}
.pv__q{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.6vw,22px);line-height:.94;margin:0}
.pv__help{font-size:14px;color:var(--muted);margin:0}
.pvopts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pvopt{
  display:flex;gap:10px;align-items:center;min-height:48px;cursor:pointer;
  border:1px solid var(--line-ui);border-radius:var(--radius);padding:10px 12px;font-size:15px;background:var(--white);
}
.pvopt input{width:20px;height:20px;accent-color:var(--orange);flex:0 0 auto}
.pvopt:has(input:checked){background:var(--orange);color:var(--white);border-color:var(--orange)}
.pvscale{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
@media (min-width:1480px){ .pvscale{grid-template-columns:repeat(11,minmax(0,1fr))} }
.pvscale label{
  display:grid;place-items:center;min-height:48px;cursor:pointer;
  border:1px solid var(--line-ui);border-radius:var(--radius);background:var(--white);
  font-family:var(--font-display);font-size:16px;
}
.pvscale label:has(input:checked){background:var(--orange);color:var(--white);border-color:var(--orange)}
.pvscale input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pvends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.pvfoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:12px}
.pvtrace{font-size:12px;text-transform:uppercase;color:var(--muted);line-height:1.5}
.pvtrace b{font-weight:400;color:var(--ink)}

/* ---------- лист изменений ---------- */
.sheet{
  border:1px solid var(--ink);border-radius:var(--radius);padding:0;
  background:var(--paper);color:var(--ink);
  width:min(720px,calc(100vw - 24px));max-height:calc(100svh - 32px);
}
.sheet::backdrop{background:rgba(21,21,21,.52)}
.sheet__head{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--rule)}
.sheet__body{padding:18px;overflow:auto;max-height:min(62svh,560px)}
.sheet__foot{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:14px 18px;border-top:1px solid var(--rule);
}
.group{margin:0 0 18px}
.group:last-child{margin-bottom:0}
.group__h{font-family:var(--font-display);font-size:14px;line-height:.94;text-transform:uppercase;margin:0 0 4px}
.group__sub{font-size:12px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.chg{border:1px solid var(--rule);border-radius:var(--radius);padding:11px 13px;margin-bottom:8px}
.chg--break{border-color:var(--orange)}
.chg__what{font-size:15px}
.chg__why{display:block;font-size:13px;color:var(--muted);margin-top:4px;line-height:1.35}
.blocked{border:1px solid var(--orange);border-radius:var(--radius);padding:12px 14px;margin:0 0 18px;font-size:14px}
.demo{font-size:12px;text-transform:uppercase;color:var(--muted)}

/* ---------- мелочи ---------- */
.live{margin:0}
.bar-note{font-size:12px;text-transform:uppercase;color:var(--muted)}
.empty{border:1px dashed var(--rule-strong);border-radius:var(--radius);padding:16px;font-size:14px;color:var(--muted)}

/* ---------- конструктор на сервере (23.09.2026) ---------- */
.inp--sm{min-height:40px;padding-block:6px;width:auto}
.create{border:1px solid var(--ink);border-radius:var(--radius);padding:16px;margin-bottom:22px}
.create__title{margin:0 0 14px}
@media (min-width:700px){ .filters--two{grid-template-columns:minmax(0,1fr) 220px} }
.pubnote{display:block;margin-top:16px}
/* статус черновика: точка уголь - сохранено, апельсин - не сохранено или конфликт */
#savestate{text-transform:none;font-size:13px}
#savestate[data-state="dirty"]::before,
#savestate[data-state="saving"]::before{background:var(--smoke)}
#savestate[data-state="conflict"],
#savestate[data-state="error"]{color:var(--ink)}
#savestate[data-state="conflict"]::before,
#savestate[data-state="error"]::before{background:var(--orange)}

/* ---------- ссылки опроса (23.09.2026) ---------- */
.lnknew{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
.lnknew__kind{flex:0 0 auto;min-height:44px;align-items:center}
.lnknew .inp{flex:1;min-width:0}
.lnkarch{margin-top:12px;font-size:13px}
.lnkarch summary{cursor:pointer;color:var(--muted)}

/* ---------- движение (23.09.2026) ----------
   Приемы из inspo: «Marginal» - оглавление на полях, подпись при наведении уезжает на 4px за 200 мс;
   «Off-canvas» - панель выезжает справа за 300 мс ease-out, фон затемняется, Esc и клик мимо закрывают.
   Появление окон - @starting-style без JS. Все выключает одно правило «меньше движения» в ui.css. */
.toc__text{transition:translate .2s ease}
@media (hover:hover){ .toc__item:hover .toc__text{translate:4px 0} }
.toc__text{translate:0 0}

/* лист изменений: появляется снизу с растворением */
.sheet{opacity:1;translate:0 0;transition:opacity .22s ease, translate .22s ease, overlay .22s allow-discrete, display .22s allow-discrete}
.sheet:not([open]){opacity:0;translate:0 12px}
@starting-style{ .sheet[open]{opacity:0;translate:0 12px} }
.sheet::backdrop{transition:background-color .22s ease, overlay .22s allow-discrete, display .22s allow-discrete}
@starting-style{ .sheet[open]::backdrop{background-color:rgba(21,21,21,0)} }

/* панель логики справа */

/* правило логики */
.logicrow__body{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.logicrow__text{font-size:14px;color:var(--muted)}
.lrule{border:1px solid var(--rule-strong);border-radius:var(--radius);padding:14px;margin:14px 0 0;background:var(--white)}
.lrule--ro{background:var(--paper)}
.lrule__kw{margin:8px 0 6px;font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase}
.lrule__kw:first-child{margin-top:0}
.lrule__row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.lrule__row .inp{flex:1;min-width:0}
.lcond,.lact{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;gap:6px;align-items:start;margin-bottom:6px}
.lact{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto}
.lact .inp + .inp{grid-column:2}
.lvals{display:flex;flex-direction:column;gap:4px;grid-column:3}
.lval{display:flex;gap:6px;align-items:center;font-size:14px}
.linkbtn{background:none;border:0;padding:4px 0;cursor:pointer;font-size:13px;text-decoration:underline;color:var(--ink)}
@media (max-width:560px){
  .lcond{grid-template-columns:minmax(0,1fr) auto}
  .lcond > .inp,.lcond > .lvals{grid-column:1}
  .lact{grid-template-columns:minmax(0,1fr) auto}
  .lact > .inp{grid-column:1}
}
.lrule__say{margin:0 0 10px;font-size:14px;line-height:1.35}
.lrule__say b{font-weight:400;text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px}
.lsim{border:1px solid var(--rule-strong);border-radius:var(--radius);padding:12px 14px;margin:14px 0 0}
.lsim__head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lsim__head .lrule__kw{margin:0}
.lsim__out{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:10px 0 0;font-size:14px}
.lsim__out dt{color:var(--muted)}
.lsim__out dd{margin:0;overflow-wrap:anywhere}
.lfinds{margin:12px 0 0}

/* меню типов нового вопроса: popover по центру, появляется с растворением */
.addq{
  border:1px solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink);
  padding:16px;width:min(560px,calc(100vw - 24px));
  opacity:1;translate:0 0;transition:opacity .18s ease, translate .18s ease, overlay .18s allow-discrete, display .18s allow-discrete;
}
.addq:not(:popover-open){opacity:0;translate:0 8px}
@starting-style{ .addq:popover-open{opacity:0;translate:0 8px} }
.addq::backdrop{background:rgba(21,21,21,.24)}
/* каталог по группам (23.09.2026): иконка, название, короткое пояснение */
.addq{width:min(760px,calc(100vw - 24px));max-height:min(86svh,820px);overflow:auto}
.addq__group{margin-top:14px}
.addq__h{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;color:var(--muted)}
.addq__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:0}
.addq__grid button{
  display:flex;align-items:flex-start;gap:10px;text-align:left;min-height:60px;padding:10px 12px;cursor:pointer;
  border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;
}
.addq__grid svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.addq__t{display:grid;gap:2px}
.addq__grid b{font-weight:400;font-size:15px;line-height:1.2}
.addq__grid .addq__t span{font-size:12px;color:var(--muted);line-height:1.25}
.addq__grid button:active .addq__t span{color:inherit}
@media (max-width:640px){ .addq__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (hover:hover){ .addq__grid button:hover{border-color:var(--ink);background:var(--white)} }
.addq__grid button:active{background:var(--ink);color:var(--paper)}
@media (max-width:420px){ .addq__grid{grid-template-columns:minmax(0,1fr)} }

/* настройки опроса */
.radio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:8px 0;cursor:pointer}
.radio input{margin-top:3px;width:18px;height:18px;accent-color:var(--ink)}
.radio b{display:block;font-weight:400;font-size:15px}
.radio .note{display:block;margin:2px 0 0}
.pipe{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.pipe .note{margin:0}
/* заголовок с подстановками: поле как textarea, подстановка - плашка апельсином (23.09.2026) */
.rich{min-height:64px;height:auto;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;line-height:1.5}
.rich:focus{outline:2px solid var(--ink);outline-offset:1px}
.chip{
  display:inline;margin:0 1px;padding:1px 8px;border-radius:999px;background:var(--orange);color:var(--white);
  font-size:.86em;line-height:1.9;vertical-align:baseline;cursor:pointer;user-select:none;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.chip__alt{opacity:.85}
.chip--bad{background:var(--paper);color:var(--ink);border:1px dashed var(--ink)}
.rich .chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.qtitle .chip{cursor:inherit;display:inline;padding:0 6px;font-size:.82em;line-height:inherit;white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pipe__say{font-size:13px;display:grid;gap:6px;flex:1 1 260px;min-width:0}
.pipe__case{display:grid;gap:1px}
.pipe__case b{font-weight:400;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.pipepop{width:min(520px,calc(100vw - 24px))}
.pipepop__lede{margin:4px 0 12px}
.pipepop__h{margin:0 0 12px;font-size:18px}
.pipepop__list{grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){ .pipepop__list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (hover:hover){ .pvopt:hover,.pvscale label:hover{border-color:var(--ink)} }

/* каталог на телефоне: название строкой, цифры одной строкой через точку, а не столбиком.
   Стоит после .catrow: иначе сетка каталога выше по файлу перебивает раскладку. */
@media (max-width:859px){
  .cat .catrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0}
  .cat .catrow__name{flex:1 0 100%;margin-bottom:2px}
  .cat .catrow__cell[data-empty]{display:none}
  .cat .catrow__cell + .catrow__cell:not([data-empty])::before{content:"·";margin:0 6px;color:var(--smoke)}
}

/* строка вопроса на телефоне: заголовок в две строки вместо обрезки на третьем слове */
@media (max-width:560px){
  .qtitle{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
  .qhead{gap:4px;padding:6px 4px 6px 8px}
  .qopen{grid-template-columns:24px minmax(0,1fr);gap:8px}
  .qmove .iconbtn{width:44px;height:44px}
}

/* правая колонка конструктора: ссылки сверху, проверка путей под ними */
.sidecol{display:grid;gap:16px;align-content:start;min-width:0}
.lnkform{display:grid;gap:12px}
.lnkkind{display:grid;gap:8px}
.lnkkind__opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;cursor:pointer;
  border:1px solid var(--line-ui);border-radius:var(--radius);background:var(--white)}
.lnkkind__opt input{margin:3px 0 0;width:18px;height:18px;accent-color:var(--ink)}
.lnkkind__opt b{display:block;font-weight:400;font-size:16px}
.lnkkind__opt .note{display:block;margin:4px 0 0}
.lnkkind__opt:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
@media (hover:hover){ .lnkkind__opt:hover{border-color:var(--ink)} }
.lnks{list-style:none;margin:8px 0 0;padding:0}
.lnk{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 0;border-bottom:1px solid var(--rule)}
.lnk:last-child{border-bottom:0}
.lnk__main{display:grid;gap:3px;min-width:0}
.lnk__name{font-size:16px;overflow-wrap:anywhere}
.lnk__url{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere;opacity:.8}
.lnk__meta{font-size:13px;color:var(--muted)}
.lnk__acts{display:flex;gap:6px;flex-wrap:wrap}
.lnk--fresh{background:var(--white);padding:12px;border:1px solid var(--ink);border-radius:var(--radius);margin:4px 0}
.lnk--off .lnk__name,.lnk--off .lnk__url{color:var(--muted);text-decoration:line-through}

/* роль «Только просмотр» (раздел «Аккаунт», 23.09.2026) */
.ro-note{margin:16px 0 0;padding:10px 14px;border:1px solid var(--line-ui);border-radius:var(--radius);background:var(--white);font-size:14px;color:var(--ink);width:fit-content}

/* ---------- каталог типов в карточке вопроса (23.09.2026) ---------- */
.qcard__three{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));max-width:420px}
.opts--img .opt{grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
@media (max-width:620px){ .opts--img .opt{grid-template-columns:minmax(0,1fr) auto} .opts--img .optimg{grid-column:1;grid-row:2} }
.optimg{display:flex;align-items:center;gap:8px;flex:none}
.optimg img,.optimg__none{width:64px;height:48px;border-radius:2px;object-fit:cover;background:var(--faint);display:grid;place-items:center;font-size:11px;color:var(--muted);text-align:center;line-height:1.1}
.optimg__pick{position:relative;cursor:pointer}
.lend{display:grid;gap:8px;flex:1;min-width:0}
.pvslider{width:100%;accent-color:var(--orange)}
.pvrank{margin:6px 0 0;padding-left:22px;display:grid;gap:4px}
.pvopts--row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px}
.pvopt__img{width:56px;height:42px;object-fit:cover;border-radius:2px;flex:none}
/* экран отсева в действии «завершить анкету»: поля во всю ширину под строкой действия */
.lact:has(.lend){grid-template-columns:minmax(0,1fr) auto}
.lact .lend{grid-column:1 / -1;grid-row:2}
.lend .note{margin:0}
.lact .lend .inp{grid-column:1}

/* пустой заголовок: подсказка внутри поля, в строке списка - «Без текста» серым */
.rich:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none}
.qtitle__empty{color:var(--muted)}

/* видимое сообщение о действии: плашка внизу, как «Вернуть» */
.toast{
  position:fixed;left:50%;bottom:20px;translate:-50% 0;z-index:41;max-width:calc(100vw - 32px);
  padding:12px 16px;border-radius:var(--radius);background:var(--ink);color:var(--paper);font-size:14px;
}
.toast[hidden]{display:none}
.toast[data-bad="true"]{background:var(--paper);color:var(--ink);border:1px solid var(--orange)}
.undo:not([hidden]) ~ .toast, .toast:has(~ .undo:not([hidden])){bottom:84px}

.acceptsel{display:inline-flex;align-items:center;gap:8px}
.acceptsel__cap{font-size:12px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media (max-width:700px){ .acceptsel__cap{display:none} }