/* Формы и чек-листы: бланки, редакторы пунктов, пресеты. */
.form-control {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    border: 0.09375rem solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 0.1875rem var(--focus-ring);
}
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    min-height: 2.25rem;
    cursor: pointer;
    max-width: 18.75rem;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2378716c'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 1.5rem;
}
@media (max-width: 56.25em) {
    .form-control {
        font-size: var(--fs-md);
        min-height: 2.75rem;
    }
}
.fp-marker[data-pct="high"],
.toast.toast-success::after,
.ss--done { background: var(--success); }
.inspector-action .form-control,
.inspector-action .fp-select {
    background: var(--bg-base);
    color: var(--text-primary);
    border-color: var(--border);
}
.tsk-controls .form-select {
    height: var(--tsk-h); min-height: var(--tsk-h);
    padding: 0 1.9rem 0 0.75rem;
    font-size: var(--fs-xs); max-width: 12rem;
    background-color: var(--bg-surface);
}
@media (max-width: 40em) {
    .tsk-controls .form-select { flex: 1 1 8rem; max-width: none; min-width: 0; }
}
.ss--delay { background: var(--secondary); }
.ss--rest { background: var(--text-muted); }
/* ── Harmonize TASKS filter to the blueprint list-filter language ──
   Высота — из единого источника --tsk-h (=2.5rem на .tsk-filter): 2.375rem
   здесь был мёртв для селекта (min-height из базового правила перебивал) и
   давал рассинхрон с поиском. --tap-target по DESIGN.md: 2-3rem. (task-044) */
.tsk-controls .form-select, .tsk-search {
    height: var(--tsk-h); border: 0.0625rem solid var(--border); background: var(--bg-surface);
    border-radius: 0; transition: border-color var(--dur-fast) var(--ease-out);
}
.tsk-controls .form-select {
    font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0;
    color: var(--text-secondary); padding: 0 1.7rem 0 0.65rem; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 0.6rem center;
}
.fmb-canvas {
    flex: 1 1 auto;
    width: 100%; min-height: 0;
    background: #f5f2ee;   /* «бумага»: схему видно и на солнце, и в печати */
    touch-action: none;    /* весь жест — рисованию, никакого скролла */
    cursor: crosshair;
}
.fmb-bar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 0.5rem calc(var(--space-xs) + 0.125rem) calc(0.5rem + env(safe-area-inset-bottom));
    background: var(--bg-base);
    border-top: 0.0625rem solid var(--border);
}
/* Инструменты переносятся, действие — нет: при нехватке ширины растёт
   вторая строка палитры, а «Отправить» остаётся на месте (Frain, гл. 4:
   flex-wrap как ответ на узкий вьюпорт вместо горизонтального скролла). */
.fmb-tools {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
}
/* Общая цель нажатия у ВСЕХ кнопок доски, включая крестик над холстом:
   он лежит вне панели, и правило на `.fmb-bar button` его не доставало —
   кнопка выходила 1.5rem вместо --tap-target. */
#fm-board button {
    /* Запасное значение: доска открывается оверлеем и на экранах, где
       body ещё без data-density, а --tap-target объявлен только внутри
       плотностей — без запаса кнопки схлопывались до 1.375rem. */
    min-width: var(--tap-target, 2.5rem); min-height: var(--tap-target, 2.5rem);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-surface); color: var(--text-primary);
    border: 0.0625rem solid var(--border);
    font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0;
    cursor: pointer;
}
.fmb-sep {
    align-self: stretch; width: 0.0625rem;
    background: var(--border);
}
.fmb-color::before {
    content: ""; width: 1.25rem; height: 1.25rem;
    background: var(--c);
    border: 0.0625rem solid var(--border);
}
#fm-board .fmb-color.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 0.0625rem var(--primary); }
.fmb-w i { display: block; width: 1.25rem; height: 0.125rem; background: currentColor; }
.fmb-w.is-wide i { height: 0.4375rem; }
/* Единственное действие панели — заливка акцентом. Оно не сжимается и не
   переносится: кнопка отправки обязана быть в кадре при любой ширине. */
#fm-board .fmb-send {
    /* Растягиваем на высоту панели: когда инструменты уехали на две строки,
       центрированная кнопка висела в пустоте рядом с одинокой «стеркой». */
    flex: 0 0 auto; margin-left: auto; align-self: stretch;
    gap: 0.5rem; padding: 0 0.75rem;
    background: var(--primary); color: #111111;
    border-color: var(--primary);
}
#fm-board .fmb-send:active { background: var(--primary-dim); border-color: var(--primary-dim); }
/* `display:flex` above (author style) beat the `hidden` attribute (UA
   [hidden]{display:none}), so the reply-quote chip + its ✕ showed on EVERY
   task, not just while replying. Higher-specificity [hidden] rule restores it. */
/* PWA install banner — fixed bottom, industrial, sharp corners. */
/* `display:flex` below would override the UA `[hidden]{display:none}`, leaving
   the banner permanently visible and making "Later" look dead — pin it back. */
/* ── Групповой тред: ЧАТ, а не список (ресерч: column-reverse = скролл
   приклеен к низу, poll-afterbegin появляется визуально снизу; сентинел
   подгрузки истории оказывается сверху). ── */
/* Once the image is loaded it covers the skeleton; stop animating to save paint. */
/* ═══ App-wide contextual bottom ACTION BAR (sticky above the tab bar) ═══
   One generic host (base.html {% block actionbar %}); each screen fills it
   with situation-specific, data-driven buttons. Report review is the first
   consumer. Hidden unless real content (.rev-bar) is present. */
/* Пустой хост не занимает место. Наполнение — либо панель решения по
   отчёту (.rev-bar), либо фильтры страницы (.gal-types). */
/* ── Заявки на роль ────────────────────────────────────────────────────────
   Профиль: поля «компания / направление» видны только для внешних ролей
   (option несёт data-ask) — CSS `:has()`, без JS. Заявка это утверждение
   на сверку, поэтому в очереди админа рядом с текстом telegram-имя. */
/* Лічильники анкети вимкнено в /settings (estimate_q_counts=off → <html data-qcount="off">). */
.fmb-send-t,
.fm-cmdk[hidden],
.chip-scroll::-webkit-scrollbar,
.reply-context[hidden],
.lightbox[hidden],
.dm-sidebar[data-tab="dm"] .dm-section--groups,
.fm-wheel-track::-webkit-scrollbar,
.fm-install[hidden],
.user-row-summary::-webkit-details-marker,
.dm-chat .chat-meta,
.dm-chat .chat-msg--mine .chat-msg-author,
.note-attach-count:empty,
.tk-msg.tk-collapsed,
.site-tile-img:has(img.is-loaded)::before,
.sc-tool::-webkit-details-marker,
.po-section-title::-webkit-details-marker,
.fm-send[hidden],
.gph-sum::-webkit-details-marker,
.fm-actionbar:not(:has(.rev-bar)):not(:has(.gal-types)),
.rev-actions .inspector-action > summary::-webkit-details-marker,
.lf-fold > summary::-webkit-details-marker,
.lf-tabs::-webkit-scrollbar,
.rep-title-edit > summary::-webkit-details-marker,
#rr-form .pf-rr-company,
.rep-shots::-webkit-scrollbar,
.ai-more > summary::-webkit-details-marker,
.tsk-supply > summary::-webkit-details-marker,
body:not(.tsk-picking) .tsk-pick-box,
.geo-suggest[hidden],
.nav-count[hidden],
.fb-group-sum::-webkit-details-marker,
.fb-group[data-collapsed] .fb-row:not(.fb-row--gate),
.fb-live[hidden],
.fb-row[hidden],
.fb-mode[hidden],
.fb-step-bar[hidden],
.fb-review-missing[hidden],
.fb-form.is-stepper .fb-actions,
.tb-empty[hidden],
.dreg-upload > summary::-webkit-details-marker,
.sch-erow--add > span:not(.sch-erow-act),
.pl-page[hidden],
.sch-frame-hint[hidden],
.sch2-msg:empty,
.sch2-menu > summary::-webkit-details-marker,
.ntf-cols,
.rq-q > summary::-webkit-details-marker,
.rq-q-panel .fb-head-actions a[href^="/project"],
.rq-q:not([open]) > .rq-q-close,
[data-qcount="off"] .q-count,
.pp-err-bar[hidden],
.pp-help > summary::-webkit-details-marker,
.pp-roster thead,
.pp-roster td:nth-child(2),
.pp-roster td:nth-child(3),
.pp-roster td.pp-num { display: none; }
@media (min-width: 30rem) {
    .fmb-send-t { display: inline; }
}
/* Закрытие — поверх холста, а не в панели: это выход, а не инструмент, и
   рядом с «Отправить» его нажимали бы по ошибке. */
#fm-board .fmb-close {
    position: absolute; z-index: 1;
    top: calc(0.5rem + env(safe-area-inset-top)); left: 0.75rem;
    background: rgba(10, 10, 10, 0.72); color: #e8e4de;
    border-color: rgba(232, 228, 222, 0.24);
}
.rr-decide .form-control { flex: 1 1 10rem; }
.tsk-supply-form .form-input { flex: 1 1 14rem; }
.tsk-supply-form .form-select { flex: 0 1 12rem; }
.tsk-pick-box { width: 1.15rem; height: 1.15rem; margin-right: var(--space-sm); flex: none; align-self: center; }
/* ── Редактор чек-листа ──────────────────────────────────────────────────
   Было: таблица в одиннадцать колонок, из них шесть — переводы; на телефоне
   она разворачивалась в шесть полей на каждый вопрос (простыня 7130 px на
   двенадцать пунктов). Стало: группы по категориям, один вопрос в строке,
   переводы под раскрытием. Единицы — от контейнера, цвета — токенами. */
.cle-list { display: flex; flex-direction: column; gap: var(--space-lg); }
.cle-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.cle-group-title {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--micro-size, 0.625rem);
    letter-spacing: 0;
    color: var(--text-secondary);
}
.cle-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "on text order"
        "on flags flags"
        "on tr del";
    gap: var(--space-xs) var(--space-sm);
    align-items: center;
    padding: var(--space-sm);
    border: 0.0625rem solid var(--border);
}
.cle-on { grid-area: on; align-self: start; padding-top: 0.15rem; }
.cle-text {
    grid-area: text;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 0.0625rem solid var(--border);
    background: var(--bg-base);
    color: var(--text-primary);
    font: inherit;
}
.cle-order { grid-area: order; display: flex; gap: 0.15rem; }
.cle-mv {
    width: 1.9rem; height: 1.9rem;
    border: 0.0625rem solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--fs-sm);
    line-height: 1;
}
.cle-mv:hover { color: var(--primary); border-color: var(--primary); }
.cle-flags { grid-area: flags; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.cle-flag {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size, 0.625rem);
    letter-spacing: 0;
    color: var(--text-secondary);
}
.cle-tr { grid-area: tr; }
.cle-tr > summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--micro-size, 0.625rem);
    letter-spacing: 0;
    color: var(--text-secondary);
}
.cle-tr-body { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-xs); }
.cle-tr-field { display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: var(--space-xs); }
.cle-tr-field > span {
    font-family: var(--font-mono);
    font-size: var(--micro-size, 0.625rem);
    color: var(--text-secondary);
}
.cle-tr-field input {
    padding: 0.35rem 0.5rem;
    border: 0.0625rem solid var(--border);
    background: var(--bg-base);
    color: var(--text-primary);
    font: inherit;
}
.cle-del {
    grid-area: del;
    justify-self: end;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--micro-size, 0.625rem);
    letter-spacing: 0;
}
.cle-del:hover { color: var(--secondary); }
/* Пока правка летит на сервер — тонкая рамка слева, без спиннеров. */
.cle-row--saving { outline: 0.0625rem solid var(--primary); outline-offset: -0.0625rem; }
@media (min-width: 48rem) {
    /* На широком экране всё в одну строку, но стрелки порядка остаются:
           перетаскивание пальцем на стройке ненадёжно, а порядок нужен обоим. */
    .cle-row {
        grid-template-columns: auto minmax(12rem, 1fr) auto auto auto auto;
        grid-template-areas: "on text flags tr order del";
        align-items: center;
    }
    .cle-tr-body { flex-direction: row; flex-wrap: wrap; }
    .cle-tr-field { grid-template-columns: 2.5rem minmax(8rem, 1fr); }
}
/* Ф3 (foreman-budget-miscalculation.md, п.4): редактор ПРЕСЕТІВ анкети.
   Власний блок, не `.cle-row` — той зав'язаний на grid-template-areas без
   комірки під тип відповіді/опції select (додатково, не чіпає `.cle-row`). */
.cpe-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border: 0.0625rem solid var(--border);
}
.cpe-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.cpe-row-main .cle-text { flex: 1 1 12rem; }
.cpe-type {
    padding: 0.45rem 0.55rem;
    border: 0.0625rem solid var(--border);
    background: var(--bg-base);
    color: var(--text-primary);
    font: inherit;
}
.cpe-options { display: flex; flex-direction: column; gap: 0.2rem; }
.cpe-options span {
    font-family: var(--font-mono);
    font-size: var(--micro-size, 0.625rem);
    letter-spacing: 0;
    color: var(--text-secondary);
}
.cpe-options textarea {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 0.0625rem solid var(--border);
    background: var(--bg-base);
    color: var(--text-primary);
    font: inherit;
    resize: vertical;
}
.cpe-options--hidden { display: none; }
/* Ф3-ревʼю п.5в: заголовок секції — поле (перейменування пише в усі пункти
   секції), а не статичний текст; кнопка поруч додає пункт у ЦЮ секцію. */
.cpe-group-head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
/* Skip-правила пресету: рядок «ключ = відповідь → сховати ключі». */
.cpe-rules { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 0.0625rem solid var(--border); }
.cpe-rules-title { border: 0; padding: 0; background: transparent; font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0; color: var(--text-secondary); }
.cpe-rules-hint { font-size: var(--fs-xs); color: var(--text-secondary); margin: 0 0 var(--space-sm); }
.cpe-rule { display: grid; grid-template-columns: 1.1fr 1fr 1.6fr 1.2fr auto auto; gap: var(--space-xs); align-items: center; padding: 0.3rem 0; border-top: 0.0625rem solid var(--border); }
.cpe-rule--head { border-top: 0; font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0; color: var(--text-muted); }
.cpe-rule input[type="text"], .cpe-rule input:not([type]) { width: 100%; min-width: 0; padding: 0.4rem 0.5rem; border: 0.0625rem solid var(--border); background: var(--bg-base); color: var(--text-primary); font: inherit; font-size: var(--fs-xs); }
.cpe-rule > .cle-del, .cpe-rule > .cpe-rule-add { grid-area: auto; grid-column: 6; justify-self: end; width: auto; margin: 0; }
.cpe-rule > .cle-flag { grid-column: 5; white-space: nowrap; }
.cpe-rule-add { background: transparent; border: 0.0625rem solid var(--border); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0; padding: 0.4rem 0.6rem; cursor: pointer; white-space: nowrap; }
@media (max-width: 48em) {
    .cpe-rule { grid-template-columns: 1fr 1fr; }
}
.cpe-group-title {
    flex: 1 1 auto;
    font-family: var(--font-mono);
    font-size: var(--micro-size, 0.625rem);
    letter-spacing: 0;
    color: var(--text-secondary);
    background: transparent;
    border: 0.0625rem solid transparent;
    padding: 0.2rem 0.35rem;
}
.cpe-group-title:hover, .cpe-group-title:focus { border-color: var(--border); background: var(--bg-base); outline: none; }
.cpe-add-in-group {
    flex-shrink: 0;
    background: transparent;
    border: 0.0625rem dashed var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--micro-size, 0.625rem);
    letter-spacing: 0;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
}
.cpe-new-preset > summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--micro-size, 0.625rem);
    letter-spacing: 0;
    color: var(--text-secondary);
}
@media (min-width: 48rem) {
    .cpe-row-main { flex-wrap: nowrap; }
}
/* Разбор обхода: /checklist/results/{id} — ответы построчно и снимок к пункту. */
.cls-head { display:flex; flex-wrap:wrap; gap:.75rem; align-items:baseline; margin-bottom:var(--space-md); }
.cls-site,
.estimate-stage-name,
.doc-folder-card-name,
.fv-cell b,
.pl-name { font-weight:600; }
.cls-list { display:flex; flex-direction:column; }
.cls-cat { margin:var(--space-md) 0 .25rem; font-size:var(--fs-xs); letter-spacing: 0; color:var(--text-muted); }
.cls-row { display:flex; gap:.75rem; align-items:flex-start; padding:.6rem 0; border-bottom:0.0625rem solid var(--border); }
.cls-ans { flex:0 0 3rem; font-size:var(--micro-size); font-weight:700; letter-spacing: 0; padding-top:.15rem; color:var(--text-muted); }
.cls-ans--yes { color:var(--primary); }
.cls-ans--no { color:var(--secondary); }
.cls-body,
.fm-bell-item > .fm-bell-item-link,
.rep-title-edit input,
.dreg-folder-name { flex:1 1 auto; min-width:0; }
.cls-text { line-height:1.35; overflow-wrap:anywhere; }
.cls-note { margin-top:.2rem; font-size:var(--fs-xs); color:var(--text-muted); overflow-wrap:anywhere; }
.cls-thumb { width:4rem; height:4rem; object-fit:cover; flex-shrink:0; }
.fb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.fb-title { font-family: var(--font-mono); font-size: var(--fs-heading-lg); letter-spacing: 0; }
.fb-sub { font-family: var(--font-mono); font-size: var(--micro-size); color: var(--text-secondary); letter-spacing: 0; margin-top: 0.25rem; }
.fb-saved { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--success); margin-bottom: var(--space-md); }
.fb-group { border: 0.0625rem solid var(--border); background: var(--bg-surface); margin-bottom: var(--space-md); }
.fb-group-sum { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0.7rem var(--space-md); cursor: pointer; border-bottom: 0.0625rem solid var(--border); }
.fb-group-title { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0; color: var(--text-primary); }
.fb-group-count { font-family: var(--font-mono); font-size: var(--micro-size); color: var(--text-muted); }
.fb-row { display: grid; grid-template-columns: minmax(16rem, 1.6fr) minmax(12rem, 1fr) minmax(10rem, 0.9fr); gap: var(--space-sm) var(--space-md); align-items: center; padding: 0.55rem var(--space-md); border-bottom: 0.0625rem solid var(--border); }
.fb-row--gate { background: var(--bg-elevated); }
.fb-q { font-size: var(--fs-sm); line-height: 1.35; }
.fb-yn label { flex: 1 1 0; text-align: center; }
.fb-note { font-size: var(--fs-xs); grid-column: 1 / -1; }
.fb-group[data-collapsed] .fb-group-sum { border-bottom-color: transparent; }
.fb-actions { display: flex; gap: var(--space-sm); align-items: center; padding-top: var(--space-md); }
@media (max-width: 48em) {
    .fb-head { flex-direction: column; align-items: flex-start; }
}
/* ── Анкета як task list: хаб + сторінка секції (22.09.2026) ─────────────── */
.fb-head-actions { display: flex; align-items: center; gap: var(--space-sm); }
.fb-chip { font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0; color: var(--text-secondary); padding: 0.25rem 0.5rem; border: 0.0625rem solid var(--border); }
.fb-hub { list-style: none; margin: 0; padding: 0; border: 0.0625rem solid var(--border); background: var(--bg-surface); }
.fb-hub-link { display: grid; grid-template-columns: 2rem 1fr auto auto; gap: var(--space-md); align-items: center; padding: 0.9rem var(--space-md); color: inherit; text-decoration: none; }
.fb-hub-name { font-size: var(--fs-sm); }
/* Рядок секції: питання | відповідь. Коментар — окремим рядком по кліку. */
.fb-row { grid-template-columns: minmax(16rem, 1.4fr) minmax(16rem, 1fr); }
.fb-ctl { display: flex; align-items: center; gap: 0.4rem; }
.fb-row.is-answered .fb-ok { visibility: visible; }
/* Ворота як перше питання: ask — лише ворота; no — плашка «пропущено». */
.fb-group[data-gate="ask"] .fb-row:not(.fb-row--gate),
.fb-group[data-gate="no"] .fb-row:not(.fb-row--gate) { display: none; }
.fb-group[data-gate="no"] [data-sec-answered], .fb-group[data-gate="no"] .fb-group-count { visibility: hidden; }
/* Степпер: одне питання на екран, той самий DOM. */
.fb-form.is-stepper .fb-row:not(.is-current) { display: none; }
.fb-form.is-stepper .fb-row.is-current { padding: var(--space-md); min-height: 30vh; align-content: start; gap: var(--space-md); }
.fb-form.is-stepper .fb-row.is-current .fb-q { font-size: var(--fs-lg); line-height: 1.35; }
.fb-form.is-stepper .fb-row.is-current .fb-yn label { padding: 0.75rem 1rem; font-size: var(--fs-xs); }
.fb-review-group .fb-group-sum { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-md); align-items: center; }
.fb-review-row.is-missing dd a { color: var(--secondary); text-decoration: underline; }
.fb-review-row.is-empty dd a { color: var(--text-muted); text-decoration: underline; }
@media (max-width: 48em) {
    .fb-ctl > .form-select, .fb-ctl > .form-input { min-width: 0; }
    .fb-hub-count, .fb-tag { grid-column: 2; justify-self: start; }
    .fb-review-group .fb-group-sum { grid-template-columns: 1fr auto; }
    .fb-review-edit { grid-column: 1 / -1; }
}
.badge { font-size: var(--fs-xs); font-weight: 500; }
.nav-link { font-size: var(--fs-sm); font-weight: 500; }
/* Фокус з клавіатури видно на КОЖНОМУ контролі. !important свідомо: 53 місця
   гасять outline без заміни, латати їх по одному дорожче, ніж один шар зверху. */
:focus-visible { outline: 0.125rem solid var(--link) !important; outline-offset: 0.125rem; }
@media (pointer: coarse) {
    .fm-tab { min-height: 3rem; }
    .fb-yn label { padding-top: 0.7rem; padding-bottom: 0.7rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
}
.form-input:focus, .form-select:focus, .form-textarea:focus, input:focus, select:focus, textarea:focus { border-color: var(--link); box-shadow: none; }
/* ── Системний прохід (23.09, «давай»): ролі кольору по всіх екранах, шкала кегля,
   одна кнопка, без перемикача щільності. Моно-капс з розрядкою знято масово
   в самих файлах (204 uppercase, 231 letter-spacing, 133 дрібних кеглі). ── */
/* Моно лишається тільки там, де він означає код: усі «моно-підписи» стають
   основною гарнітурою з табличними цифрами. */
/* ── Статуси графіка: окремі токени «прострочено» і «план» (Ярослава
   28.09.2026: «в белой теме цветовая гамма не исправленная»). У світлій темі
   --primary rgb(168 69 0) і --hazard-text rgb(181 58 15) — той самий помаранчевий, тож
   «в роботі» і «прострочено» не розрізнялись, а «план» (--text-muted rgb(94 94 89))
   був важкою темною смугою. Прострочене = червоний, як обіцяли 25.09;
   темна тема лишається як була (там їх розрізняє яскравість). ── */
:root {
    --fs-1: 0.8125rem;
    /* підпис, мета */
    --fs-2: 1rem;
    /* текст */
    --fs-3: 1.0625rem;
    /* назва рядка, підзаголовок */
    --fs-4: 1.25rem;
    /* заголовок секції */
    --fs-5: clamp(1.5rem, 3.4vw, 2.25rem);
    /* назва об'єкта, вивіска */
    --micro-size: var(--fs-1);
    --font-mono: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --late: var(--hazard-text, var(--secondary));
    --plan: var(--text-muted);
}
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-3); }
.section-title::after { background: var(--border) !important; border-color: var(--border) !important; }
.section-title::before { background: transparent !important; color: var(--text-muted); }
.nav-link.active { color: var(--white) !important; font-weight: 600; }
/* Помаранчеві рамки форм і шторок — у колір рамки. */
.sch-erow--add,
.imp-sheet,
.fm-sheet-panel,
.tsk-bar,
.att-cap--miss,
.wizard-btn-na kbd { border-color: var(--border); }
.imp-open, .sch-add-btn { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }
/* Вимкнений пункт пресету: видно, приглушено, вмикається галкою «Увімкнено». */
.cpe-row--off .cpe-row-main, .cpe-row--off .cpe-options, .cpe-row--off .cle-flag:not(.cle-flag--on) { opacity: 0.45; }
.cat-link { display: block; padding: 0.7rem 0.9rem; border: 0.0625rem solid var(--border); text-decoration: none; color: inherit; min-height: 2.75rem; }
.cat-link b { display: block; font-weight: 600; }
/* Імпорт графіка: підказка про формати, хід завантаження, банер підсумку (25.09.2026). */
.imp-hints { margin: var(--space-xs) 0 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: var(--fs-xs); display: grid; gap: 0.25rem; }
.imp-progress,
.cpe-new-preset { margin: var(--space-sm) 0; }
.imp-progress-bar { height: 0.375rem; background: var(--bg-elevated); overflow: hidden; position: relative; }
.imp-progress-txt { margin-top: 0.375rem; font-size: var(--fs-xs); color: var(--text-secondary); }
.imp-banner { margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); font-size: var(--fs-sm); border: 0.0625rem solid var(--border); background: var(--bg-surface); }
.fp-zone-form .form-input { min-width: 0; width: 100%; }
.fp-marker[data-late="1"] { background: var(--late, #b3261e); }
.ent-place-row .form-input, .ent-form .form-input { min-width: 0; width: 100%; }
.tsk-mine-list { list-style: none; margin: 0; padding: 0; border-top: 0.0625rem solid var(--border); }
.tsk-mine-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.55rem 0; border-bottom: 0.0625rem solid var(--border); }
@media (min-width: 48em) {
    .tsk-mine-row { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
}
.fb-row:has(input[value="yes"]:checked) .fb-docs, .fb-docs.has-docs { display: grid; grid-template-columns: minmax(0, 1fr); }
.fb-doc-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; font-size: var(--fs-sm); overflow-wrap: anywhere; }
/* 08.10: промежуток пробелом, не отступом — при переносе фраза начинается от края. */
.fb-stage-mismatch::before { content: " "; white-space: normal; }
.fb-ctl > .fb-yn { flex: 1 1 auto; display: flex; }
.fb-ctl > .form-input, .fb-ctl > .form-select, .fb-ctl > input[type].form-input, .fb-ctl > .fb-yn {
    height: 2.75rem; min-height: 2.75rem; box-sizing: border-box; }
.fb-ctl > .form-input, .fb-ctl > .form-select { padding-top: 0; padding-bottom: 0; line-height: normal; }
.fb-ctl > input[type="date"].form-input { font-family: var(--font-sans); font-size: var(--fs-md); border-width: 0.09375rem; }
.fb-ctl > .fb-yn label { min-height: 0; display: flex; align-items: center; justify-content: center; }
@media (pointer: coarse) {
    .fb-ctl > .form-input, .fb-ctl > .form-select, .fb-ctl > input[type].form-input, .fb-ctl > .fb-yn { height: 3rem; min-height: 3rem; }
    /* 30.09 (Артём, скрин iPhone: «нижняя панель при скролле выезжает на середину»).
       Safari на iPhone сам збільшує сторінку, коли торкаєшся поля з шрифтом < 16 px; після
       цього fixed-панель прив'язана до незбільшеного layout viewport і при прокрутці пливе
       посередині. Заборону масштабу у viewport не ставимо (Фрейн: доступність), лікуємо
       причину: на сенсорних екранах поля не дрібніші за 16 px. !important — бо поля мають
       десятки правил font-size вищої специфічності, а поріг iOS — платформне обмеження. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: max(1rem, 1rem) !important; }
}
.sch-oof[hidden] { display: none; }
/* Сторінка «Не збережено» (friendly_form_errors). */
.form-err { max-width: 36rem; margin: 0 auto; padding: var(--space-lg) var(--space-md); display: grid; gap: var(--space-md); }
.form-err h1 { font-family: var(--font-display); font-size: var(--fs-heading-lg); margin: 0; }
.form-err pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); }
form.was-validated :is(input, select, textarea):invalid { border-color: var(--invalid); box-shadow: 0 0 0 0.0625rem var(--invalid); }
form.was-validated .seg-toggle:has(input:invalid) { border-color: var(--invalid); }
/* Кільце фокусу лишається (доступність, pages.css :focus-visible !important), лише червоне. */
form.was-validated :is(input, select, textarea):invalid:is(:focus, :focus-visible) { border-color: var(--invalid); outline-color: var(--invalid) !important; box-shadow: none; }
.sug-opt[hidden], .sch-field[hidden], .sch-child[hidden] { display: none; }
.sch-tools .sch-assign-form { display: flex; }
.sch-child-slot:empty { display: none; }
.sch2-ask > summary::-webkit-details-marker { display: none; }
.sch2-ask[open] { display: grid; gap: 0.4rem; }
.tb-pcard .tb-moves { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.4rem 0 0; }
.fb-unans p { margin: 0 0 var(--space-xs); overflow-wrap: anywhere; }
.fp-door.is-on { background: var(--text-primary); color: var(--bg-base); }
.fp-seg-a.is-on { background: var(--text-primary); color: var(--bg-base); }
.seg-toggle a[aria-current] { background: var(--primary); color: var(--bg-base); }