/* Оболочка: шапка, меню, поиск, нижняя панель, шторки, онбординг, тосты. */
/* Перемикач щільності прибрано з футера: одна щільність, тап-цілі дає (pointer: coarse). */
.fm-density {
    gap: 0;
    border: 0.0625rem solid var(--border);
    padding: 0;
    overflow: hidden;
    display: none !important;
}
.fm-density-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.375rem;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 0;
}
.fm-density-btn:hover { color: var(--text-primary); }
.fm-density-btn.is-active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Q5 — bottom quick-action bar + create sheet. Industrial: sharp corners,
   square "+" embedded center (Material research: embedded centered FAB wins
   on ergonomics), sheet slides from the bottom edge (thumb zone), mono micro
   title, hairline dividers. Items come from role_actions context='quick'. */
.fm-bottombar {
    transition: transform var(--dur-normal) var(--ease-out);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: calc(3.5rem + env(safe-area-inset-bottom, 0rem));
    padding-bottom: env(safe-area-inset-bottom, 0rem);
    /* §12 — floating translucent tab bar: content scrolls UNDER the glass,
       matching the header. Solid fallback under reduced-transparency below. */
    background: var(--chrome);
    border-top: 0.0625rem solid var(--border);
}
@media (prefers-reduced-transparency: reduce) {
    .fm-bottombar {
        background: var(--chrome);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-top-color: var(--border);
    }
}
/* Content must never hide behind the fixed bar (scoped to pages that render
   it — also keeps the bare `body` selector single-owner in base.css). */
body:has(.fm-bottombar) { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0rem)); }
/* Прокрутка к элементу (фокус, якорь, клик автоматики) останавливается над нижней панелью и баннером
   установки, а не под ними: синтетик 15.10 жал «Перевести» в карточке, а попадал в «Меню» панели —
   кнопка стояла под ней (y 808 при панели от 788). WCAG 2.4.11 «фокус не закрыт». */
html:has(.fm-bottombar) { scroll-padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0rem) + 0.75rem); }
html:has(.fm-install:not([hidden])) { scroll-padding-bottom: calc(12rem + env(safe-area-inset-bottom, 0rem)); }
@media (min-width: 48em) {
    html:has(.fm-install:not([hidden])) { scroll-padding-bottom: 9rem; }
}
@media (min-width: 68.75em) {
    /* Desktop (≥1100 px, тот же порог что .footer/.nav-footer): нижний таб-бар —
       мобильный паттерн, на десктопе навигация живёт в хедере. Прячем и снимаем
       резерв высоты (app.js замерит offsetHeight=0 → --fm-bottombar-h=0). */
    .fm-bottombar { display: none; }
    body:has(.fm-bottombar) { padding-bottom: 0; }
    html:has(.fm-bottombar) { scroll-padding-bottom: 0.75rem; }
}
/* Q6 tab: icon + micro mono label, muted → primary when active. */
.fm-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 3.5rem;
    min-height: 2.75rem;
    padding: 0.2rem 0.4rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    line-height: 1;
    transition: color var(--dur-fast) var(--ease-out);
}
/* "+" is first in DOM (Askama can't count filtered loops); flex `order`
   slots it into the middle: home(1) reports(2) [+](3) chat(4) menu(5). */
.fm-bottombar .fm-plus { order: 3; }
.fm-bottombar a.fm-tab:nth-of-type(1) { order: 1; }
.fm-bottombar a.fm-tab:nth-of-type(2) { order: 2; }
.fm-bottombar a.fm-tab:nth-of-type(3) { order: 4; }
.fm-bottombar #fm-tab-menu { order: 5; }
.fm-plus {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0.0625rem solid var(--primary);
    color: var(--primary);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.fm-plus:active,
.fm-plus[aria-expanded="true"] {
    background: var(--primary);
    color: #111;
}
.fm-qsheet {
    position: fixed;
    inset: 0;
    z-index: 120;
    /* Closed = untouchable + invisible. Class-only state, no [hidden]. The
       visibility transition delay keeps the close animation visible. */
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear var(--dur-normal);
}
.fm-qsheet.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s;
}
.fm-qsheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.fm-qsheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto; /* guard: bottom-anchored, natural height — never stretched */
    background: var(--bg-surface);
    border-top: 0.0625rem solid var(--border);
    padding: var(--space-md) var(--space-md) calc(var(--space-lg) + env(safe-area-inset-bottom, 0rem));
    transform: translateY(100%);
    transition: transform var(--dur-normal) var(--ease-out);
}
.fm-qsheet-title {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
    margin: 0 0 var(--space-sm);
    font-weight: 500;
}
.fm-qsheet-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: var(--tap-target, 3rem);
    padding: var(--space-sm) var(--space-xs);
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 0.0625rem solid var(--border);
    font-size: var(--content-font, 0.875rem);
}
.fm-qsheet-item .icon { color: var(--primary); flex-shrink: 0; }
.fm-qsheet-item:hover,
.fm-qsheet-item:focus-visible {
    background: var(--bg-elevated);
    outline: none;
}
/* Q1 — Secondary reference shortcuts, de-emphasized under a label. Quiet
   icon+text links (transparent, muted, small) so project folders stay the
   heaviest thing on the home. Passes the blur test. */
.util-section {
    margin-top: var(--space-lg);
    /* Separate the quiet rules/requirements/archive links from the KPI ledger
       strip below them — .kpi-grid has only margin-bottom, so without this the
       two blocks collapse together. */
    margin-bottom: var(--space-lg);
}
.util-title {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
    margin: 0 0 var(--space-sm);
    font-weight: 500;
}
.util-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
.util-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4rem 0.7rem;
    border: 0.0625rem solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--fs-xs);
    line-height: 1.2;
    min-height: var(--tap-target);
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.util-link svg {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease-out);
}
.util-link:hover,
.util-link:focus-visible {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    outline: none;
}
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border);
    color: var(--text-muted);
    flex-shrink: 0;
    object-fit: cover;
    vertical-align: middle;
}
.avatar--sm { width: 1.5rem;   height: 1.5rem; }
.avatar--md { width: 2.25rem;  height: 2.25rem; }
.avatar--placeholder svg {
    width: 60%;
    height: 60%;
    opacity: 0.5;
}
img.avatar { object-fit: cover; }
/* №133 Поиск в шапке: лупа -> поле на месте лупы + панель результатов под ним. */
.fm-search { position: relative; display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; margin-inline-start: auto; order: 19; }
/* Колокольчик уехал в центр шапки, а значок сообщений — в правый край
   (Артём, 22.09.2026, скрин десктопа). Причина: ОБА `.fm-bell` несли
   `margin-inline-start: auto`, а два авто-отступа в одной флекс-строке делят
   свободное место пополам — первый встаёт посередине, второй у края. Отталкивать
   правую группу должен только первый её элемент; значок сообщений стоит
   вплотную к колокольчику. */
.header-inner #frag-inbox,
#fm-dm-bell { margin-inline-start: 0; }
.fm-search-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap-target); height: var(--tap-target);
    padding: 0; background: transparent; border: 0.0625rem solid transparent; border-radius: 0;
    color: #a8a29b; cursor: pointer;
}
.fm-search-trigger:hover { background: #1a1a1a; color: #e8e4de; }
.fm-search-field {
    display: none;
    align-items: center; gap: 0.5rem;
    width: min(22rem, 60vw); min-height: var(--tap-target);
    padding: 0 0 0 0.625rem;
    /* Шапка тёмная в обеих темах (layout.css .header), цвета поля под неё. */
    background: #151515; border: 0.0625rem solid #3a3731; color: #a8a29b;
    box-sizing: border-box;
}
.fm-search.is-open .fm-search-trigger { display: none; }
.fm-search.is-open .fm-search-field { display: flex; animation: fm-search-grow 0.16s ease-out; }
@keyframes fm-search-grow { from { width: var(--tap-target); opacity: 0; } to { width: min(22rem, 60vw); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .fm-search.is-open .fm-search-field { animation: none; }
}
.fm-search-field:focus-within { border-color: #948f89; }
.fm-search-field .icon { flex: 0 0 auto; }
.fm-search-field input[type="search"] {
    flex: 1 1 0; min-width: 0; width: auto; min-height: 0; padding: 0; margin: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: 0;
    color: #e8e4de; font-family: var(--font-sans); font-size: var(--fs-sm);
    -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
}
.fm-search-field input[type="search"]:focus,
.fm-search-field input[type="search"]:focus-visible { outline: 0 !important; border: 0; box-shadow: none; }
.fm-search-field input::placeholder { color: #948f89; }
.fm-cmdk-clear {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap-target); height: var(--tap-target); padding: 0;
    background: transparent; border: 0; color: #a8a29b; cursor: pointer; font-size: 1.5rem; line-height: 1;
}
.fm-cmdk-clear:hover { color: #e8e4de; }
.fm-cmdk-kbd {
    flex: 0 0 auto; margin-inline-end: 0.5rem;
    font-family: var(--font-mono); font-size: var(--micro-size);
    padding: 0.0625rem 0.375rem; border: 0.0625rem solid #3a3731; color: #948f89; letter-spacing: 0;
}
.fm-cmdk {
    position: absolute; top: calc(100% + 0.25rem); right: 0;
    width: min(32rem, 90vw); max-height: min(70vh, 32rem);
    display: flex; flex-direction: column;
    background: var(--bg-elevated, var(--bg-surface)); color: var(--text-primary);
    border: 0.0625rem solid var(--border); box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.35);
    z-index: 120; overflow: hidden; font-family: var(--font-mono);
}
.fm-cmdk-list { list-style: none; margin: 0; padding: 0.25rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.fm-cmdk-group { padding: 0.625rem 0.75rem 0.25rem; font-size: var(--micro-size); color: var(--text-muted); letter-spacing: 0; }
.fm-cmdk-item {
    display: flex; flex-direction: column; justify-content: center; gap: 0.125rem;
    padding: 0.5rem 0.75rem; min-height: 2.5rem; min-width: 0;
    font-size: var(--fs-xs); cursor: pointer; color: var(--text-primary);
}
.fm-cmdk-item.is-selected, .fm-cmdk-item:hover { background: var(--surface-2, rgba(128,128,128,0.14)); }
.fm-cmdk-title { text-transform: none; letter-spacing: normal; font-size: var(--fs-xs); overflow-wrap: anywhere; }
.fm-cmdk-meta { font-size: var(--micro-size); color: var(--text-muted); letter-spacing: 0; overflow-wrap: anywhere; }
.fm-cmdk-empty { padding: 1.25rem 0.875rem; color: var(--text-muted); font-size: var(--fs-xs); letter-spacing: 0; text-align: center; }
.fm-cmdk-hint { flex: 0 0 auto; padding: 0.5rem 0.875rem; border-top: 0.0625rem solid var(--border); color: var(--text-muted); font-size: var(--micro-size); letter-spacing: 0; }
@media (max-width: 68.75em) {
    /* Телефон/планшет: поле перекрывает всю шапку, панель на весь экран под ней. */
    .fm-search { position: static; order: 8; }
    .fm-search.is-open .fm-search-field {
        position: absolute; inset: 0; width: auto; z-index: 130;
        background: var(--chrome); border: 0; border-bottom: 0.0625rem solid #2e2c28;
        padding-left: var(--space-md); animation-name: fm-search-fade;
    }
    @keyframes fm-search-fade { from { opacity: 0; } to { opacity: 1; } }
    .fm-cmdk-kbd { display: none; }
    .fm-cmdk {
        position: fixed; left: 0; right: 0; bottom: 0; top: var(--fm-search-top, 3.5rem);
        width: auto; max-height: none; border-width: 0.0625rem 0 0; box-shadow: none;
    }
}
.fm-ingest-banner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: var(--space-md);
    border: 0.0625rem solid var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}
.fm-ingest-spin { font-size: var(--fs-lg); color: var(--accent); animation: spin 1.6s linear infinite; display: inline-block; }
.fm-ingest-refresh {
    margin-left: auto;
    background: transparent;
    border: 0.0625rem solid var(--accent);
    color: var(--accent);
    padding: 0.25rem 0.625rem;
    cursor: pointer;
    font: inherit;
}
.fm-ingest-refresh:hover { background: var(--accent); color: var(--bg-base); }
.fm-field-error {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--secondary);
    margin-top: 0.25rem;
    line-height: 1.3;
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 0.0625rem var(--secondary);
}
.fm-onboarding-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
/* Пока подсказки нет — коробка нулевая и ничего не перехватывает. Как только
   карточка приехала, слой становится модальным: до 09.09.2026 карточку
   вставляли в коробку 0×0, и текст сыпался столбиком по одному слову. */
.fm-onboarding-layer:has(.fm-hint-card) {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    display: grid;
    place-items: center;
    padding: var(--space-md);
    background: rgba(10, 10, 10, 0.62);
    pointer-events: auto;
    z-index: 9000;
}
.fm-onboarding-layer .fm-hints { width: 100%; max-width: 23rem; padding: 0; }
.fm-onboarding-layer .fm-hint-card {
    background: var(--bg-surface, var(--bg-elevated));
    padding: var(--space-md);
    max-height: 82dvh;
    overflow-y: auto;
}
/* Ролик занимает не больше сорока процентов высоты: кнопка «Понятно»
   должна оставаться на экране, иначе подсказку нечем закрыть. */
.fm-onboarding-layer .fm-hint-video { max-height: 40dvh; object-fit: contain; }
/* Кнопка липнет к низу карточки — при длинном тексте её не приходится
   доскролливать. */
.fm-onboarding-layer .fm-hint-actions {
    position: sticky;
    bottom: 0;
    background: var(--bg-surface, var(--bg-elevated));
    padding-top: var(--space-sm);
}
.fm-hint {
    position: absolute;
    z-index: 60;
    min-width: 13.75rem;
    max-width: 18.75rem;
    background: var(--bg-elevated, var(--bg-surface));
    border: 0.0625rem solid var(--accent);
    border-radius: 0.1875rem;
    box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.3);
    font-family: var(--font-mono);
    pointer-events: auto;
}
.fm-hint-title {
    font-size: var(--fs-xs);
    letter-spacing: 0;
    color: var(--accent);
    margin-bottom: 0.25rem;
}
.fm-hint-text {
    font-size: var(--fs-xs);
    color: var(--text-primary);
    line-height: 1.45;
    font-family: var(--font-sans);
}
.fm-hint-actions { margin-top: 0.625rem; display: flex; justify-content: flex-end; }
.fm-hint-ok {
    background: var(--accent);
    border: 0;
    color: var(--bg-base);
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    border-radius: 0.125rem;
}
.fm-sitebar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-elevated, var(--bg-surface));
    border-bottom: 0.0625rem solid var(--border);
    min-height: 2.5rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0;
}
.fm-sitebar-inner {
    width: min(100%, 90rem);
    margin: 0 auto;
    /* №140 */
    padding: 0 var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: 2.5rem;
}
@media (min-width: 40em) {
    .fm-sitebar-inner { padding: 0 var(--space-lg); gap: var(--space-md); }
}
.fm-sitebar-switch,
.note-attach { position: relative; flex-shrink: 0; }
.fm-sitebar-current {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 0.0625rem solid var(--border);
    color: var(--text-primary);
    padding: 0.25rem 0.625rem;
    font: inherit;
    cursor: pointer;
    min-height: 1.75rem;
}
.fm-sitebar-name { font-weight: 500; }
.fm-sitebar-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 16.25rem;
    background: var(--surface-1, var(--bg-elevated));
    border: 0.0625rem solid var(--border);
    box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.3);
    z-index: 100;
    padding: 0.25rem;
}
.fm-sitebar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    color: var(--text-primary);
    text-decoration: none;
    min-height: 2.25rem;
    font: inherit;
}
.fm-sitebar-item:hover { background: var(--surface-2, rgba(255,255,255,0.04)); }
.fm-sitebar-item.is-current { color: var(--accent); font-weight: 700; }
.fm-sitebar-item-name,
.rolecard-label { flex: 1; }
.fm-sitebar-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
}
.fm-sitebar-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-muted);
}
.fm-sitebar-stat-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    opacity: 0.75;
}
.fm-sitebar-stat-val {
    font-size: var(--fs-xs);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.fm-sitebar-stat-lbl { font-size: var(--micro-size); display: none; }
@media (min-width: 40em) {
    .fm-sitebar-stat-lbl { display: inline; }
}
.fm-acc { position: relative; display: inline-flex; align-items: center; }
.fm-acc-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 15rem;
    background: var(--surface-1, #161618);
    border: 0.0625rem solid var(--border);
    box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.3);
    z-index: 100;
    padding: 0.25rem;
    text-align: left;
}
/* Іконка не стискається при вузькому екрані — лейбл коротшає (i18n), не вона. */
.fm-acc-avatar,
.user-row-avatar,
.tsk-bar .btn svg { flex-shrink: 0; }
/* №144 — active account row doubles as the profile link (no self-switch no-op) */
.fm-acc-item-go { margin-left: auto; color: var(--text-muted); flex-shrink: 0; }
/* Диктовка. Кнопка сидить у правому краю самого поля — окрема кнопка збоку
   з'їдала б ширину композера на телефоні, а вводу тут і так мало місця. */
.fm-voice-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.fm-voice {
    position: absolute;
    right: 0.375rem;
    bottom: 0.375rem;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
/* Кнопка не должна ловить рамку-квадрат от общего стиля button и не должна
   стоять на уголке-ресайзере поля — Артьом прислал скрин со столкновением. */
.fm-voice:focus { outline: none; }
.fm-voice-wrap > textarea { resize: none; }
/* Запис — щільна заливка акцентом, стан видно навіть краєм ока. */
.fm-voice--rec { background: var(--primary); color: var(--bg-base); }
.fm-voice--rec::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 0.125rem solid var(--primary);
}
.fm-voice--wait { color: var(--text-muted); cursor: progress; }
/* Поле поруч із мікрофоном не має заповзати під нього. */
.fm-voice-wrap > textarea,
.fm-voice-wrap > input { width: 100%; padding-right: 2.75rem; }
.fm-acc-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 0.5rem 0.625rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-align: left;
    cursor: pointer;
    min-height: 2.25rem;
    text-decoration: none;
}
.fm-acc-item:hover { background: var(--surface-2, #1e1e21); }
.fm-acc-item.is-active { color: var(--accent); }
.fm-acc-item-role {
    font-size: var(--micro-size);
    color: var(--text-muted);
    padding: 0.125rem 0.25rem;
    border: 0.0625rem solid var(--border);
    letter-spacing: 0;
}
.fm-acc-item-name { flex: 1; }
.fm-acc-add, .fm-acc-logout {
    border-top: 0.0625rem solid var(--border);
    margin-top: 0.25rem;
    color: var(--text-muted);
}
.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.logo img {
    width: 2.75rem;
    height: 2.75rem;
    /* №153 */
    filter: invert(var(--logo-invert, 0));
    flex-shrink: 0;
}
.logo svg { color: var(--primary); flex-shrink: 0; }
.nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    order: 10;
}
.nav-link {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none;
    padding: var(--space-xs);
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
    white-space: nowrap;
}
.nav-link::before { content: none; }
.nav-link .icon { opacity: 0.6; margin-right: 0.4em; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.nav-sep { width: 0.0625rem; height: 1rem; background: rgba(255,255,255,0.15); flex-shrink: 0; }
@media (hover: hover) {
    .nav-link:hover { color: var(--white) !important; }
    .nav-link:hover .icon { opacity: 1; transform: translateX(0.125rem); }
    .nav-link.nav--settings:hover .icon { animation: spin 1.5s linear infinite; transform: none; }
    .lang-btn:hover { color: var(--text-primary); }
}
.nav-link.active { color: var(--primary) !important; }
.lang-switch {
    display: inline-flex;
    gap: 0.125rem;
}
.lang-btn {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.lang-btn.active {
    color: var(--text-primary);
    font-weight: 700;
}
.checklist-app {
    background: var(--tg-bg, var(--bg-base));
    color: var(--tg-text, var(--text-primary));
    min-height: 100vh;
    /* №156 */
    padding: var(--space-sm);
}
@media (min-width: 48em) {
    .checklist-app { padding: var(--space-md); }
}
.step { display: none; }
.step-title {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    text-align: center;
}
.site-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.site-btn {
    display: block;
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: 600;
    background: var(--bg-surface);
    border: 0.09375rem solid var(--border);
    color: var(--tg-text, var(--text-primary));
    cursor: pointer;
    text-align: left;
    min-height: 3rem;
}
.site-btn:active { border-color: var(--primary); }
@media (hover: hover) {
    .row-item:hover {
        padding-left: var(--space-sm);
        background: linear-gradient(90deg, var(--bg-elevated) 0%, transparent 100%);
    }
}
.row-list,
.audit-entries {
    display: flex;
    flex-direction: column;
}
.row-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 0.0625rem solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: padding-left var(--dur-fast) var(--ease-out);
}
.row-idx {
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-muted);
    min-width: 2.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    transition: color var(--dur-fast) var(--ease-out);
}
.row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.row-title {
    font-weight: 600;
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.row-end {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}
.toast {
    position: fixed;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 0.0625rem solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: var(--space-sm) var(--space-lg);
    z-index: 300;
    animation: toast-in var(--dur-normal) var(--ease-out);
    min-height: 2.75rem;
    display: none;
    align-items: center;
    max-width: 90vw;
    overflow: hidden;
}
.toast::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.125rem;
    background: var(--primary);
    animation: toast-timer 4s linear forwards;
}
.toast[style*="display: block"],
.nav.open .nav-link--grouped,
#rr-form:has(option[data-ask="1"]:checked) .pf-rr-company { display: flex; }
.fm-install {
  position:fixed; left:0; right:0; bottom:0; z-index:1200;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
  background:var(--bg-elevated); border-top:0.0625rem solid var(--border);
  box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.3);
}
.fm-install-body { display:flex; align-items:center; gap:0.75rem; min-width:0; flex:1; }
@media (min-width: 48em) {
    /* Широкий экран: баннер — карточка в правом нижнем углу, а не полоса во всю ширину: полоса закрывала
       нижние строки любой таблицы (синтетик 15.10 трижды жал имя в ведомости и попадал в баннер). */
    .fm-install { left:auto; right:1rem; bottom:1rem; width:min(26rem, calc(100vw - 2rem)); border:0.0625rem solid var(--border); }
}
.fm-install-icon { border-radius:0; flex-shrink:0; }
.fm-install-txt { display:flex; flex-direction:column; gap:0.15rem; min-width:0; }
.fm-install-txt strong { font-size:var(--fs-sm); color:var(--text-primary); }
.fm-install-actions { display:flex; gap:0.5rem; flex-shrink:0; }
/* Шторка «як встановити на iPhone»: знизу, кроки з іконками кнопок Safari. */
.fm-ios-sheet {
  margin:auto auto 0; width:100%; max-width:32rem; max-height:85dvh; border:0; border-radius:0;
  padding:1.25rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background:var(--bg-elevated); color:var(--text-primary);
  border-top:0.0625rem solid var(--border);
  transition:translate .25s ease, display .25s allow-discrete, overlay .25s allow-discrete;
  translate:0 100%;
}
.fm-ios-sheet[open] { translate:0 0; }
@starting-style { .fm-ios-sheet[open] { translate:0 100%; } }
.fm-ios-sheet::backdrop { background:rgba(0,0,0,0.5); }
.fm-ios-title { font-size:var(--fs-md, 1.125rem); margin:0 0 1rem; }
.fm-ios-steps { list-style:none; counter-reset:ios; margin:0 0 1.25rem; padding:0; display:grid; gap:1rem; }
.fm-ios-steps li { counter-increment:ios; display:grid; grid-template-columns:1.5rem 4.5rem minmax(0,1fr); gap:0.75rem; align-items:center; }
.fm-ios-steps li::before { content:counter(ios); font-family:var(--font-mono); color:var(--text-muted); text-align:center; }
.fm-ios-ico { display:grid; place-items:center; width:4.5rem; height:3rem; border:0.0625rem solid var(--border); color:#0a84ff; }
.fm-ios-ico-txt { font-size:var(--fs-xs); font-weight:600; }
.fm-ios-steps b { display:block; font-size:var(--fs-sm); }
.fm-ios-steps small { display:block; font-size:var(--fs-xs); color:var(--text-muted); line-height:1.4; margin-top:0.15rem; }
@media (max-width:30em) {
    .fm-install-actions { width:100%; }
}
.fm-hint-card {
  padding: 0.6rem 0.75rem;
  border: 0.0625rem solid var(--border);
  background: var(--bg-surface);
}
.fm-hint-card .fm-hint-title { font-weight: 700; font-size: var(--fs-sm); color: var(--text-primary); }
.fm-hint-card .fm-hint-text { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 0.1rem; }
/* «Більше не показувати підказки» — тихе посилання поряд з «Зрозуміло» (28.09). */
.fm-hint-card .fm-hint-actions { margin-top: 0.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
@media (prefers-color-scheme: light) {
    /* Light OS theme: днём тёмный glass над СВЕТЛЫМ контентом даёт грязный серый —
       иконки нижнего меню сливаются с бордером (client: «днём нижнее меню
       просвечивается, цвет сливается с бордером иконки»). На light красим таб-бар
       СУХИМ тёмным. (.header отсюда убран: его фон рисует motion.css
       .header::after; прежние §12/§14-блоки .header были мёртвы — motion.css
       стоит позже в бандле при той же специфичности.) */
    .fm-bottombar {
      background: var(--chrome);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      border-top-color: var(--border);
    }
}
/* §3/§4 — Materialize on reveal (behavior over animation).
   Morning/evening field groups were hard display:none → block, a jump. Now
   they settle in: opacity + a small upward drift on a critically-damped
   ease (damping 1.0, no overshoot — a tap carried no momentum, so no
   bounce). Re-plays each time JS flips display none→'' on type change. */
@keyframes fm-materialize {
  from { opacity: 0; transform: translateY(0.5rem) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
#morning-fields,
#evening-fields {
  animation: fm-materialize var(--dur-slow) cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
    /* §14 — reduced motion: comprehension-only cross-fade, no drift/scale. */
    @keyframes fm-materialize { from { opacity: 0; } to { opacity: 1; } }
    #morning-fields,
    #evening-fields { animation-duration: var(--dur-fast); }
}
/* §15 — Size-specific tracking + leading. Large PROPORTIONAL display text
   reads too loose as it grows → tighten it and pull the leading in. Body
   stays open (already 1.5). Mono-caps spec labels (.form-title, .pf-sec-h)
   keep their wide brand tracking untouched — that width is intentional at
   small caps, exactly what §15 prescribes. */
h1 { letter-spacing: -0.02em; line-height: 1.08; font-size: var(--fs-5); }
.fm-tab:active { transform: scale(0.92); }
/* Пункты каталога с группой (inspect / media / manage / admin) живут в
   выдвижном меню: в горизонтальной шапке им места нет — там помещается
   тринадцать, а всего их до семнадцати. До 10.09.2026 они не рисовались
   нигде, и попасть на «Аудит», «Настройки», «Приглашения», «Редактор
   чек-листа» можно было только по прямой ссылке. */
.nav-link--grouped { display: none; }
/* Шторка «заполните профиль»: экран под ней виден, действия закрыты сервером.
   Стоит НАД нижней хромой, чтобы не накрывать таб-бар. */
.fm-profile-gate {
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--tap-target, 2.5rem) + env(safe-area-inset-bottom) + 0.75rem);
    z-index: 8500;
    display: flex; justify-content: center;
    padding: 0 var(--space-md);
    pointer-events: none;
}
.fm-profile-gate-card {
    pointer-events: auto;
    width: 100%; max-width: 26rem;
    background: var(--bg-elevated);
    border: 0.0625rem solid var(--border);
    padding: var(--space-md);
    box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.3);
}
.fm-profile-gate-title,
.fm-guide-screen {
    font-family: var(--font-mono); font-size: var(--micro-size, 0.625rem);
    letter-spacing: 0; color: var(--text-secondary);
}
.fm-profile-gate-text { margin: var(--space-xs) 0 var(--space-sm); font-size: var(--fs-sm); }
/* ── «Ещё» в шапке: пункты разделов на десктопе ───────────────────────────
   Пункты с группой (inspect/media/manage/admin) живут в одном месте разметки
   и получают две подачи. На компьютере — выпадающий список в шапке, потому
   что бургера там нет и ящик открыть нечем (Ярослава, 21.09.2026: «где это
   меню если заходим через комп?»). На телефоне ящик распрямляет обёртку
   через `display: contents`, и список снова плоский, как был. */
.nav-more { position: relative; }
.nav-more-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    min-width: 13rem;
    padding: 0.25rem 0;
    background: var(--bg-elevated);
    border: 0.0625rem solid var(--border);
    box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.3);
    z-index: 300;
}
.nav-more-menu .nav-link--grouped { display: flex; width: 100%; }
/* Шторка профілю: «Заповнити» і «Не зараз» в один ряд (25.09.2026). */
.fm-profile-gate-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
.fm-profile-gate-later { margin: 0; }
/* Отказ из-за незаполненного профиля (06.10): висит, пока не закроют; причина текстом, действие кнопкой. */
.fm-gate-bar {
    position: fixed;
    left: var(--space-md);
    right: var(--space-md);
    bottom: calc(var(--fm-bottombar-h, 0rem) + var(--space-md) + env(safe-area-inset-bottom));
    z-index: 310;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-sm);
    align-items: center;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 0.0625rem solid var(--secondary);
    padding: var(--space-sm) var(--space-md);
}
.fm-gate-text { margin: 0; font-size: var(--fs-sm); min-width: 0; }
@media (min-width: 48em) {
    .fm-gate-bar { left: 50%; right: auto; transform: translateX(-50%); width: min(40rem, calc(100% - 2 * var(--space-md))); }
}