:root{
  --surface-0:#f6f6f4; --surface-1:#ffffff; --surface-2:#fbfbfa;
  --border:#d9d9d4; --border-stronger:#b4b4ad;
  --text-primary:#1f1f1c; --text-secondary:#5a5a55; --text-muted:#8b8b85;
  --text-accent:#0000ff;   /* фирменный акцент, одинаковый в обеих темах */
  --text-warning:#b8720a; --text-success:#2f8f5b; --text-danger:#c53c3c;
  --fill-success:#2f8f5b; --on-success:#ffffff; --fill-ghost-selected:rgba(31,31,28,.06); --on-accent:#ffffff;
  --fill-btn:#ffffff; --fill-btn-hover:#f0f0ed;

  /* сетка 8px */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  /* типографика */
  --fs-xs:12px; --lh-xs:16px;
  --fs-sm:14px; --lh-sm:20px;
  --fs-md:16px; --lh-md:24px;
  --fs-lg:20px; --lh-lg:28px;
  --fs-logo:24px;
  --fs-card:24px;   /* название задачи в шапке чата */
  /* два шрифта: текст — системный (на iPhone и Mac это SF Pro Text, файла в приложении нет — лицензия Apple
     не разрешает выкладывать его на сайт), заголовки — пиксельный Pixelizer */
  --font-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-pixel:"Pixelizer",var(--font-text);
  --ki-w:calc(var(--fs-md) * .4375);   /* ширина знака «>» в Pixelizer — 7 пикселей шрифта из 16 */
  /* размеры контролов */
  --row:64px;        /* строка списка */
  --row-sm:56px;     /* строка шага в чате */
  /* шапка панели — одна высота у «Входящих» и у карточки чата: три строки карточки
     (крошка 16 + название 28 + мета 20 и два зазора по 4) плюс отступы сверху и снизу */
  --hd-in:calc(var(--lh-xs) + var(--lh-lg) + var(--lh-sm) + var(--s1) * 2);
  --hd:calc(var(--hd-in) + var(--s4) * 2);
  --ctl:48px;        /* зона нажатия чекбокса/кольца */
  --ck:28px;         /* сам кружок */
  --ck-sm:24px;
  --ring:32px;
  --input:44px;
  --btn:36px;
  --icon:12px; --icon-lg:16px;   /* пиксельные иконки: в подписях и строках / в кнопках и меню */
  --r:12px; --r-sm:8px;
  --max:720px;
  /* движение: bounce — с перелётом, out — плавное торможение (те же кривые — EASE в app.js) */
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  /* переход между экранами: притенение списка и тень у края чата */
  --scrim:rgba(0,0,0,.08); --shadow-edge:-8px 0 24px rgba(0,0,0,.08);
}
/* на экранах ×3 логотип 26⅔ px — 5 точек на пиксель шрифта, на ×1 и ×2 — 24 px */
@media (min-resolution:2.5dppx){:root{--fs-logo:26.667px}}
@media (prefers-color-scheme:dark){
  /* Максимально тёмная: фон — чистый чёрный (на OLED пиксели выключены), панели и плашки
     чуть светлее, чтобы читались их границы; поля ввода и пузыри — ещё на ступень светлее */
  :root{
    --surface-0:#000000; --surface-1:#141414; --surface-2:#0a0a0a;
    --border:#222222; --border-stronger:#444444;
    --text-primary:#ededed; --text-secondary:#a8a8a8; --text-muted:#7c7c7c;
    --text-accent:#0000ff;
    --text-warning:#e0a44a; --text-success:#5cc088; --text-danger:#e5706a;
    --fill-success:#2f8f5b; --on-success:#ffffff; --fill-ghost-selected:rgba(255,255,255,.07);
    --fill-btn:#141414; --fill-btn-hover:#1f1f1f;
    --scrim:rgba(0,0,0,.6); --shadow-edge:-1px 0 0 #222222;
  }
}
/* Пиксельный Pixelizer — для заголовков (есть кириллица, одно начертание Bold). Диапазон 100–900, чтобы браузер
   брал этот же файл для любой жирности и не рисовал поддельный полужирный. Каких знаков нет (→ … — « » №),
   те подставляются из системного шрифта следующим в списке */
@font-face{font-family:"Pixelizer";src:url("Pixelizer.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}          /* Safari иначе раздувает текст в альбомной */
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
/* Страница целиком — экран, прокручиваются только .bd. position:fixed убирает
   резинку всей страницы на iOS и pull-to-refresh */
body{position:fixed;inset:0;background:var(--surface-0);color:var(--text-primary);font:var(--fs-sm)/var(--lh-sm) var(--font-text);-webkit-font-smoothing:antialiased}
/* Долгое нажатие по строке не должно выделять текст и звать меню iOS.
   Поля ввода и текст переписки из этого исключены — оттуда копируют */
.row,.hd-list,.ck,button,.ttl,.cnt,.crumb,.cm{touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
input{-webkit-user-select:text;user-select:text}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- оболочка: две панели (panels.html) ---------- */
/* Приложение занимает ровно видимую область: высоту берём у visualViewport, и композер,
   лежащий на дне контейнера, оказывается над клавиатурой сам.
   Смещение (--vvtop) компенсирует панорамирование: iOS при фокусе сдвигает страницу,
   чтобы показать поле из-под клавиатуры, и без компенсации шапка со списком уезжают
   выше края экрана. Обновляется только по resize — см. trackVH. */
.app{position:fixed;left:0;right:0;top:var(--vvtop,0px);height:var(--vh,100dvh)}
.two .app{max-width:1080px;margin:0 auto;
  padding:max(var(--s4),env(safe-area-inset-top)) max(var(--s4),env(safe-area-inset-right)) max(var(--s4),env(safe-area-inset-bottom)) max(var(--s4),env(safe-area-inset-left))}
.two .grid{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:var(--s4);align-items:stretch;height:100%;min-height:0}
.two .pnl{border:0.5px solid var(--border);border-radius:var(--r)}
/* Поля ввода вынесены из панелей: отдельная плашка под своей панелью, с зазором */
.two .scr{gap:var(--s3)}
.two .ft{border:0.5px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
@media (max-width:760px){
  .two .app{padding:max(var(--s2),env(safe-area-inset-top)) max(var(--s2),env(safe-area-inset-right)) max(var(--s2),env(safe-area-inset-bottom)) max(var(--s2),env(safe-area-inset-left))}
  .two .grid{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr;gap:var(--s2);transition:grid-template-rows .36s var(--ease-out)}
  .two .grid.kb-list{grid-template-rows:0fr 1fr;gap:0}
  .two .grid.kb-detail{grid-template-rows:1fr 0fr;gap:0}
  .two .grid.kb-list #scr-detail,.two .grid.kb-detail #scr-list{visibility:hidden;overflow:hidden}
  .two .scr{min-height:0;height:100%}
  .two #scr-detail{order:-1}
  .two .pnl{min-height:0;height:100%}
  :root{--hd:calc(var(--hd-in) + var(--s3) * 2)}   /* на телефоне отступы шапки 12 */
  .two .hd{padding:var(--s3) var(--s4)}
  .two .ft{padding:var(--s2) var(--s4)}
  .two .scr{gap:var(--s2)}
}

/* ---------- оболочка: два экрана из панелей (index.html) ---------- */
.nav .app{}  /* высота и смещение — в общем правиле .app выше */
.nav .grid{height:100%;position:relative;overflow:hidden}
/* Экраны друг над другом, каждый — панель и плашка ввода под ней с отступами от краёв (и выреза).
   Чат выезжает справа налево поверх списка, список уходит чуть влево и притеняется. Ушедший экран
   после перехода получает visibility:hidden, чтобы в него не попадал фокус: у открывающегося экрана
   видимость включается сразу, у закрывающегося — по окончании движения */
.nav .scr{position:absolute;inset:0;display:flex;flex-direction:column;gap:var(--s3);background:var(--surface-0);
  padding:max(var(--s4),env(safe-area-inset-top)) max(var(--s4),env(safe-area-inset-right)) max(var(--s4),env(safe-area-inset-bottom)) max(var(--s4),env(safe-area-inset-left));
  transition:transform .5s var(--ease-out),visibility 0s linear .5s}
.nav .scr.on{transition:transform .5s var(--ease-out),visibility 0s linear 0s}
.nav .scr.drag{transition:none}
.nav #scr-detail{z-index:2;box-shadow:var(--shadow-edge)}
.nav #scr-detail:not(.on){transform:translateX(100%);visibility:hidden}
.nav #scr-list:not(.on){transform:translateX(-24%);visibility:hidden}
.nav #scr-list::after{content:"";position:absolute;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .5s var(--ease-out)}
.nav #scr-list:not(.on)::after{opacity:var(--scrim-o,1)}
.nav #scr-list.drag::after{transition:none}
.nav .pnl,.nav .ft{width:100%;max-width:var(--max);margin:0 auto;border:0.5px solid var(--border);border-radius:var(--r)}
.nav .ft{background:var(--surface-2)}
/* поле чата — внутри панели, прилипает к низу поверх ленты; лента уходит под полупрозрачный фон с размытием,
   поэтому снизу у неё запас на высоту поля */
.nav .pnl{position:relative}
.nav .pnl > .ft{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:none;margin:0;border:none;border-top:0.5px solid var(--border);border-radius:0;
  background:color-mix(in srgb,var(--surface-2) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav #thread{padding-bottom:calc(var(--input) + var(--s3) * 2 + var(--s4))}
.nav #list{padding-bottom:calc(var(--input) + var(--s3) * 2)}
@media (max-width:760px){
  .nav .scr{gap:var(--s2);padding:max(var(--s2),env(safe-area-inset-top)) max(var(--s2),env(safe-area-inset-right)) max(var(--s2),env(safe-area-inset-bottom)) max(var(--s2),env(safe-area-inset-left))}
  .nav .hd{padding:var(--s3) var(--s4)}
  .nav .ft{padding:var(--s2) var(--s4)}
  .nav #thread{padding-bottom:calc(var(--input) + var(--s2) * 2 + var(--s4))}
  .nav #list{padding-bottom:calc(var(--input) + var(--s2) * 2)}
}

/* ---------- общее ---------- */
.scr{display:flex;flex-direction:column;min-height:0}
.pnl{background:var(--surface-2);display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;width:100%}
/* текст выполняемой задачи на миг белеет и светится (тряску добавляет zap в app.js) */
.zap,.zap *{color:#fff!important;text-shadow:0 0 4px #fff,0 0 12px #fff}

.hd{padding:var(--s4);border-bottom:0.5px solid var(--border);flex:none;height:var(--hd)}
.hd-list{display:flex;align-items:flex-end;justify-content:space-between;height:var(--hd);cursor:pointer}
/* шапка списка повторяет строй шапки чата: сверху иконка входящих (как крошка), логотип CLUTCH на месте названия,
   под ним «Входящие» на месте меты, счётчик на их линии у правого края. Логотип — пиксельным шрифтом,
   Размер кратен пикселю шрифта (1/16 em) под плотность экрана, межбуквенный интервал — ровно один пиксель шрифта */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);min-width:0}
.brand .ttl{line-height:var(--lh-sm)}
.logo{font-family:var(--font-pixel);font-size:var(--fs-logo);line-height:var(--lh-lg);letter-spacing:.0625em;color:var(--text-primary);cursor:default;-webkit-user-select:none;user-select:none}
.ttl:focus-visible{outline:none;box-shadow:0 0 0 2px var(--text-accent);border-radius:var(--r-sm)}
.hd-row{display:flex;align-items:center;gap:var(--s2)}
.ttl{font-size:var(--fs-md);line-height:var(--lh-md);font-weight:600;font-family:var(--font-pixel)}
/* пиксельным шрифтом — заголовки (логотип, «Входящие», вся шапка чата: .crumb, .ct, .cm; названия в строках .t1) и поля ввода;
   всё остальное — подписи, переписка, меню, счётчики — системным */
.crumb{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-secondary);display:flex;align-items:center;gap:var(--s2);font-family:var(--font-pixel)}
.ct{font-size:var(--fs-card);line-height:var(--lh-lg);font-weight:600;margin-top:var(--s1);width:100%;border:none;background:transparent;padding:0;font-family:var(--font-pixel);height:auto}
.ct:focus{outline:none;box-shadow:0 2px 0 -1px var(--text-accent)}
.cm{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-secondary);margin-top:var(--s1);font-family:var(--font-pixel)}
.cnt{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-muted);width:var(--ctl);text-align:center;font-family:var(--font-pixel)}

.bd{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 var(--s4);min-height:0;
  display:flex;flex-direction:column}
.bd>*{flex:none}
/* Лента переписки прижата к низу: короткий разговор стоит у поля ввода. Список задач
   намеренно НЕ прижимается — он начинается сверху, так решил владелец.
   Именно распоркой, а не justify-content:flex-end — тот ломает прокрутку, верх содержимого
   становится недостижим. Распорка занимает свободное место, а когда его нет, схлопывается. */
.thread::before{content:"";flex:1 0 auto}
.thread{display:flex;flex-direction:column;gap:var(--s4);padding-top:var(--s4);padding-bottom:var(--s4)}
.ft{padding:var(--s3) var(--s4);border-top:0.5px solid var(--border);flex:none}
.ftr{display:flex;gap:var(--s2)}
.err{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-danger);margin-top:var(--s2);display:none}
.empty{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-muted);padding:var(--s6) 0;text-align:center}

.row{display:flex;align-items:center;gap:var(--s2);height:var(--row);border-bottom:0.5px solid var(--border);cursor:pointer;flex:none;outline:none;transition:background-color .25s var(--ease-out)}
.row.sm{height:var(--row-sm)}
.row:focus-visible{box-shadow:inset 0 0 0 2px var(--text-accent)}
.cel{min-width:0;flex:1}
.t1{font-size:var(--fs-md);line-height:var(--lh-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-pixel)}
/* Иконка типа слева от названия: монохромная, цвета подписи. Подпись под названием сдвинута на ширину
   иконки, чтобы начиналась ровно под текстом названия */
.cel.k .t1{display:flex;align-items:baseline;gap:var(--s2);overflow:visible}   /* знак «>» выходит левее строки — не обрезать; многоточие у названия делает .tt */   /* маркер «>» — текст, выравниваем по базовой линии названия */
.cel.k .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ki{flex:none;width:var(--ki-w);font-size:var(--fs-md);color:var(--text-muted);position:relative;
  /* знак «>» сдвинут влево так, чтобы его середина стояла ровно под серединой иконки в шапке списка
     (иконка с отступа шапки 16, строка — с отступа 32; середина знака в шрифте — 3/16 em). Сдвиг relative
     не меняет раскладку: название и подпись остаются на месте */
  left:calc(var(--s4) + var(--hd-ic,12px) / 2 - var(--s4) * 2 - var(--fs-md) * .1875)}
.ki::before{content:">"}
/* на странице задач названия — системным жирным (SF Pro на Apple), знак «>» остаётся пиксельным; шаги в чате не трогаем — там .t1 пиксельный */
#list .t1{font-family:var(--font-text)}
#list .ki{font-family:var(--font-pixel)}
/* строки основного списка с отступом слева, чтобы иконка не прилипала к краю подсветки выбранной строки */
/* строки списка — на всю ширину панели: выходят за боковой отступ .bd, а содержимое возвращается
   тем же отступом, так что подсветка выбранной строки идёт от края до края панели */
#list .row{margin:0 calc(-1 * var(--s4));padding:0 var(--s4) 0 calc(var(--s4) * 2)}   /* слева отступ задач больше — 32 */
.cel.k .t2{padding-left:calc(var(--ki-w) + var(--s2))}
.t2{display:flex;align-items:center;gap:var(--s2);height:var(--lh-xs);margin-top:2px;min-width:0;overflow:hidden}
.s{font-size:var(--fs-xs);line-height:var(--lh-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.sf{flex:0 1 auto;min-width:40px}

.ck{flex:none;width:var(--ctl);height:var(--ctl);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none;border-radius:var(--r-sm)}
.ck:focus-visible{box-shadow:inset 0 0 0 2px var(--text-accent)}
.dot{transition:transform .45s var(--ease-bounce),background-color .25s var(--ease-out),border-color .25s var(--ease-out);width:var(--ck);height:var(--ck);border-radius:50%;border:2px solid var(--border-stronger);display:flex;align-items:center;justify-content:center;color:var(--on-success);font-size:var(--fs-sm);line-height:1;background:transparent}
.dot.sm{width:var(--ck-sm);height:var(--ck-sm);font-size:var(--fs-xs)}
.dot.on{border-color:var(--text-success);background:var(--fill-success)}
.ring{position:absolute;font-size:var(--fs-xs);line-height:1;color:var(--text-secondary);font-family:var(--font-pixel)}


button{font:inherit;color:var(--text-primary);background:var(--fill-btn);border:0.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer}
button{transition:background-color .2s var(--ease-out),transform .45s var(--ease-bounce)}
button:hover{background:var(--fill-btn-hover)}
/* нажатие: кнопка и кружок проседают и отпружинивают обратно */
.ib:active,.back:active{transform:scale(.9);transition-duration:.1s}
.ck:active .dot{transform:scale(.86);transition-duration:.1s}
.mi:active{transform:scale(.98);transition-duration:.1s}
button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--text-accent)}
.ib{height:var(--input);width:var(--input);padding:0;display:flex;align-items:center;justify-content:center;flex:none;border-radius:50%}
/* пока в строке ввода фокус, её кнопка («+» или «→») залита акцентом */
.ftr:focus-within .ib,.ftr:focus-within .ib:hover{background:var(--text-accent);border-color:var(--text-accent);color:var(--on-accent)}
.back{height:40px;width:40px;padding:0;display:flex;align-items:center;justify-content:center;flex:none;background:transparent;border:none;margin-left:calc(-1 * var(--s2))}
input{height:var(--input);font-size:var(--fs-md);flex:1;min-width:0;font-family:var(--font-pixel);color:var(--text-primary);background:var(--surface-1);border:0.5px solid var(--border);border-radius:var(--r-sm);padding:0 var(--s3)}
input{transition:border-color .2s var(--ease-out),box-shadow .25s var(--ease-out)}
input::placeholder{color:var(--text-muted)}
input:focus{outline:none;border-color:var(--text-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--text-accent) 25%,transparent)}
.ic{flex:none;display:inline-block;vertical-align:middle;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* пиксельные иконки — залитые квадраты, без обводки */
.ic.px{fill:currentColor;stroke:none}

.bub{align-self:flex-end;max-width:80%;background:var(--surface-1);border-radius:var(--r);padding:var(--s2) var(--s3);font-size:var(--fs-md);line-height:var(--lh-md)}
/* свои сообщения — на акцентном фоне, правый верхний угол острый; вопрос-приглашение в начале ленты («Как продвинулись?») остаётся обычным */
.bub.mine{background:var(--text-accent);color:var(--on-accent);border-top-right-radius:0}
.ans{max-width:88%;font-size:var(--fs-md);line-height:var(--lh-md);white-space:pre-line}
.card{display:flex;align-items:center;gap:var(--s3);background:var(--surface-1);border:0.5px solid var(--border);border-radius:var(--r);padding:var(--s4)}
.card .f1{font-size:var(--fs-md);line-height:var(--lh-md)}
.card .f2{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-muted);margin-top:2px}
.steps{background:var(--surface-1);border:0.5px solid var(--border);border-radius:var(--r);padding:0 var(--s4)}
.typing{display:inline-flex;gap:var(--s1);align-items:center;height:var(--lh-md)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.14s}.typing i:nth-child(3){animation-delay:.28s}
/* точки подпрыгивают: вверх с торможением, вниз с отскоком от «пола» */
@keyframes tp{0%,60%,100%{opacity:.35;transform:translateY(0);animation-timing-function:var(--ease-out)}
  25%{opacity:1;transform:translateY(-5px);animation-timing-function:var(--ease-bounce)}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.6}
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important}
  .ib:active,.back:active,.ck:active .dot,.mi:active{transform:none}}

/* ---------- пальцем ---------- */
/* На сенсорных экранах цель нажатия — минимум 44 px (рекомендация Apple).
   Мышью такие кнопки выглядели бы громоздко, поэтому только для coarse. */
@media (pointer:coarse){
  .back{width:44px;height:44px}
}
/* Мышь есть — наводка подсказывает, что строка кликабельна */
@media (hover:hover){
  .row:hover{background:var(--fill-ghost-selected)}
  .hd-list:hover .ttl{color:var(--text-secondary)}
}

/* ---------- добавление шага и подтверждение удаления ---------- */
.addstep{gap:0}
.addstep input{height:var(--input);background:transparent;border:none;padding:0}
.addstep input:focus{box-shadow:none;border:none}


/* Планшет в портрете: колонки по 400/320 отдавали списку больше места, чем чату.
   На средних ширинах список ужимаем — читают и пишут всё-таки справа. */
@media (min-width:761px) and (max-width:900px){
  .two .grid{grid-template-columns:minmax(0,280px) minmax(0,1fr)}
}

/* ---------- меню действий по долгому нажатию ---------- */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.sheet-body{position:relative;width:100%;max-width:420px;margin:var(--s2);
  background:var(--surface-1);border:0.5px solid var(--border);border-radius:var(--r);
  padding:var(--s2);padding-bottom:max(var(--s2),env(safe-area-inset-bottom));
  display:flex;flex-direction:column}
/* На большом экране меню посреди окна: снизу оно там выглядит случайным */
@media (min-width:761px){.sheet{align-items:center}}
.sheet-title{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-muted);
  padding:var(--s2) var(--s3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi{display:flex;align-items:center;gap:var(--s3);width:100%;height:52px;padding:0 var(--s3);
  border:none;background:transparent;border-radius:var(--r-sm);font-size:var(--fs-md);
  text-align:left;position:relative;color:var(--text-primary)}
.mi:hover{background:var(--fill-btn-hover)}
.mi.danger{color:var(--text-danger)}
.mi .val{margin-left:auto;color:var(--text-muted);font-size:var(--fs-sm)}
.mi input[type=date]{position:absolute;inset:0;opacity:0;width:100%;height:100%;padding:0;border:none;cursor:pointer}

/* ---------- разметка в ленте ---------- */
.ans p{margin:0 0 var(--s3)}
.ans p:last-child{margin-bottom:0}
.ans h3,.ans h4,.ans h5{margin:var(--s4) 0 var(--s2);font-size:var(--fs-md);line-height:var(--lh-md);font-weight:600}
.ans h3:first-child,.ans h4:first-child,.ans h5:first-child{margin-top:0}
.ans ul,.ans ol{margin:0 0 var(--s3);padding-left:var(--s5)}
.ans li{margin:0 0 var(--s1)}
.ans code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.92em;
  background:var(--surface-1);border:0.5px solid var(--border);border-radius:var(--r-sm);padding:0 4px}
.ans pre{margin:0 0 var(--s3);padding:var(--s3);overflow-x:auto;
  background:var(--surface-1);border:0.5px solid var(--border);border-radius:var(--r-sm)}
.ans pre code{background:none;border:none;padding:0}
.ans a{color:var(--text-accent)}
/* Таблица в своём контейнере с прокруткой — иначе на телефоне растянет всю ленту */
.ans .tw{overflow-x:auto;margin:0 0 var(--s3);-webkit-overflow-scrolling:touch}
.ans table{border-collapse:collapse;font-size:var(--fs-sm)}
.ans th,.ans td{border:0.5px solid var(--border);padding:var(--s1) var(--s2);text-align:left;white-space:nowrap}
.ans th{font-weight:600}
/* Ошибка — строка в ленте, а не всплывашка */
.ans.err{color:var(--text-danger);font-size:var(--fs-sm);line-height:var(--lh-sm)}

/* ---------- карточка изменения в ленте ---------- */
.act{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);
  background:var(--surface-1);border:0.5px solid var(--border);border-radius:var(--r);
  font-size:var(--fs-sm);line-height:var(--lh-sm)}
.act .al{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act .au{flex:none;border:none;background:none;color:var(--text-accent);
  font-family:inherit;font-size:var(--fs-sm);padding:0;cursor:pointer}
.act .au.off{color:var(--text-muted);cursor:default}

/* ---------- вложения ---------- */
.pend{display:flex;flex-wrap:wrap;gap:var(--s2);padding:0 0 var(--s2)}
.att{display:inline-flex;align-items:center;gap:var(--s1);max-width:100%;
  padding:var(--s1) var(--s2);background:var(--surface-1);border:0.5px solid var(--border);
  border-radius:var(--r-sm);font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-secondary)}
.att>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att .as{color:var(--text-muted);flex:none}
.att .ax{display:flex;align-items:center;border:none;background:none;padding:0 0 0 var(--s1);
  color:var(--text-muted);cursor:pointer}
.thread .att{align-self:flex-end}

/* ---------- настройки ---------- */
.set .sheet-body{max-height:80%;overflow-y:auto;overscroll-behavior:contain}
.sh{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-muted);
  padding:var(--s4) var(--s3) var(--s1)}
.si{display:flex;align-items:center;gap:var(--s2);min-height:40px;padding:var(--s1) var(--s3);
  font-size:var(--fs-sm);line-height:var(--lh-sm)}
.si>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.si .as{color:var(--text-muted);font-size:var(--fs-xs);flex:none}
.si .ax{display:flex;border:none;background:none;color:var(--text-muted);padding:0;cursor:pointer;flex:none}
.si .au{border:none;background:none;color:var(--text-accent);font:inherit;font-size:var(--fs-sm);padding:0;cursor:pointer;flex:none}
.se{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-muted);padding:var(--s1) var(--s3) var(--s2)}
#brand-ic{cursor:pointer}