/* Люди и роли: пользователи, карточки ролей, доработки, задачи-треды, аудит, профиль. */
/* Задача 124 — Rework list: informative card list (A16). Industrial-brutalist:
   sharp corners, mono numerals. The "needs rework" signal is carried by the
   rust-red mono index + pill — NO left-border accent rail (banned pattern).
   The card's spine is the reviewer's REASON — what makes it informative. */
.rework-section .rework-title {
    color: var(--secondary);
    border-color: var(--secondary);
    margin: 0;
}
.rework-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.rework-count {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--secondary);
    border: 0.0625rem solid color-mix(in srgb, var(--secondary) 40%, transparent);
    padding: 0 0.45em;
    font-variant-numeric: tabular-nums;
}
.rework-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.rework-card {
    --rw: var(--secondary);
    display: grid;
    /* Sequential idx (.rework-idx) dropped — it's per-list loop position, not a
       stable report number, so it carried no meaning and only ate a column. */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.rework-card:hover,
.rework-card:focus-visible {
    background: var(--bg-elevated);
    border-color: color-mix(in srgb, var(--rw) 55%, var(--border));
    transform: translateX(0.125rem);
    outline: none;
}
.rework-idx { display: none; }
.rework-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.rework-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.rework-type {
    font-family: var(--font-mono);
    letter-spacing: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
}
.rework-meta {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.rework-pill {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--rw);
    border: 0.0625rem solid color-mix(in srgb, var(--rw) 35%, transparent);
    padding: 0.15em 0.5em;
    white-space: nowrap;
}
.rework-reason {
    margin: 0;
    font-size: var(--content-font, 0.8125rem);
    line-height: 1.45;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rework-reason-cap {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--rw);
    margin-right: 0.6em;
    vertical-align: 0.08em;
}
.rework-reason--empty {
    color: var(--text-muted);
    font-style: italic;
}
.rework-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.rework-foot .rework-media {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    margin-left: auto;
}
.rework-chevron {
    color: var(--text-muted);
    align-self: center;
    flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.rework-card:hover .rework-chevron,
.rework-card:focus-visible .rework-chevron {
    color: var(--rw);
    transform: translateX(0.125rem);
}
/* ── /processes (p29-3): схема процесса, сводка по точкам, экземпляры ──────────────
   Mobile-first (Фрейн): таблицы на телефоне = карточки «подпись: значение» (data-label), схема
   скроллится ТОЛЬКО внутри .bp-wrap, страница шире экрана не становится. Цвета только из токенов:
   SVG от process-core несёт currentColor и классы bp-*, красим их здесь (тёмная тема сама). */
.rule-row .form-input,
.rule-row .form-select,
.rule-row .rule-cell,
.po-timeline,
.tl-content,
.rq-tabs li,
.rq-actions details,
.proc,
.dl-form {
    min-width: 0;
}
.role-indicator {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0.0625rem solid transparent;
    padding: 0.25rem;
    color: inherit;
    cursor: pointer;
    min-height: 2.25rem;
    min-width: 2.25rem;
}
.role-indicator:hover { border-color: var(--border); }
.role-indicator[aria-expanded="true"],
.fm-sitebar-current:hover,
.user-row[open] { border-color: var(--accent); }
.role-indicator .role-badge {
    font-size: var(--fs-xs);
    padding: 0.25rem 0.5rem;
}
.fm-board-btn:hover:not(:disabled),
.resp-photo:hover { color: var(--accent); border-color: var(--accent); }
.role-indicator .role-avatar {
    width: 2rem;
    height: 2rem;
    border-width: 0;
    object-fit: cover;
}
.role-indicator:has(> .role-avatar) > svg { display: none; }
.user-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.user-cell-text {
    display: inline-flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}
.role-assign {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}
/* Крестик снятия роли внутри плашки: зона нажатия под палец, вид прежний. */
.role-badge--rm { display: inline-flex; align-items: center; }
.role-rm {
    min-width: var(--tap-target); min-height: var(--tap-target);
    background: none; border: 0; color: var(--secondary);
    cursor: pointer; padding: 0; font: inherit;
}
@media (pointer: coarse) {
    .toggle input::after { width: 1rem; height: 1rem; }
    .toggle input:checked::after { transform: translateX(1.25rem); }
}
/* Задача 181 — аккордеон групп удалён вместе с <details>-раскладкой галереи:
   заголовок дня рисует .rl-day, тот же примитив, что и в журнале отчётов. */
/* ── Ф2 бюджет-прорахунку (foreman-budget-miscalculation.md) ──────────────
   Вхід у папку категорії (створити/приєднати об'єкт) + панель етапів заявки
   на оцінку. Жодних нових візуальних примітивів — ті самі section/form-group/
   btn/badge, що і решта foreman; тільки нові модифікатори кольору поверх
   існуючих токенів (--success/--secondary/--primary). */
.gal-day,
.audit-day,
.estimate-entry { margin-bottom: var(--space-lg); }
.audit-date {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    letter-spacing: 0;
    color: var(--text-muted);
    padding-bottom: var(--space-xs);
    border-bottom: 0.0625rem solid var(--border);
    margin-bottom: var(--space-xs);
}
.audit-entry {
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
    padding: 0.25rem 0;
    font-size: var(--fs-xs);
    border-bottom: 0.0625rem solid rgba(255,255,255,0.03);
}
.audit-time {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--text-muted);
    min-width: 3.5rem;
    flex-shrink: 0;
}
.audit-event {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--primary);
    min-width: 8rem;
    flex-shrink: 0;
}
.audit-actor { color: var(--text-secondary); flex-shrink: 0; }
.audit-detail { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Add-photo affordance in the respond form. */
.resp-photo {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0;
    color: var(--text-muted);
    border: 0.0625rem dashed var(--border);
    cursor: pointer;
    user-select: none;
}
.resp-photo.has-files { color: var(--accent); border-color: var(--accent); border-style: solid; }
/* The one-time Face-ID install banner is fixed at bottom:0 and would sit ON
   the compose — the chat's primary control must never be covered. Suppress it
   on the chat page; it still prompts on every other screen. */
body:has(.ac-chat) .fm-install { display: none; }
/* Сайт-футер (desktop) в чате не нужен: .dm-layout уже занимает весь экран за
   вычетом хедера/таб-бара, а футер снизу добавляет высоту → лишний скролл. */
body:has(.dm-layout) .footer { display:none; }
/* Work-direction index (contractor requirements split into 19 sections). */
.wdir-list { display:flex; flex-direction:column; border:0.0625rem solid var(--border); }
.wdir-item {
  display:flex; align-items:center; gap:0.75rem; padding:0.85rem 1rem; min-height:var(--tap-target);
  border-bottom:0.0625rem solid var(--border); text-decoration:none;
  color:var(--text-primary); transition:background 0.15s;
}
/* Посилання в таблицях були 0.94–1rem заввишки — інлайновий текст без власної
   висоти. У таблиці клікається саме слово, а не рядок, тож воно й має бути
   тап-таргетом. */
.table tbody a { display:inline-flex; align-items:center; min-height:var(--tap-target);
    min-width:var(--tap-target); }
.wdir-num {
  flex-shrink:0; width:1.75rem; height:1.75rem; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-mono); font-size:var(--fs-xs);
  color:var(--accent); border:0.0625rem solid var(--border); background:var(--bg-base);
}
.wdir-name { flex:1; font-size:var(--fs-sm); }
.wdir-go { color:var(--text-muted); flex-shrink:0; }
.wdir-back {
  display:inline-block; margin-bottom:var(--space-md); color:var(--text-muted);
  text-decoration:none; font-family:var(--font-mono); font-size:var(--fs-xs);
}
@media (max-width: 37.5em) {
    /* Full-screen messenger: with a conversation open, drop the global top
         nav/header (Ben Frain — small screens = single "tube" of content; the
         menu lives off-canvas/behind the back button). Conversation uses the
         whole viewport; the dm-chat-head IS the messenger top bar. */
    /* Плашка про Face ID фиксирована у нижней кромки (z-index 9998) и
         накрывала композер переписки. В треде её не показываем. */
    .dm-chat,
    .dm-layout--chat-open .dm-sidebar,
    body.dm-chat-open .header,
    body.dm-chat-open #fm-passkey-offer { display:none; }
    .dm-layout--chat-open .dm-chat { display:flex; }
    /* 2-class selector beats the base `.dm-back{display:none}` regardless of
         order; gated to ≤37.5em so the back button only appears single-pane. */
    .dm-layout--chat-open .dm-back { display:inline-flex; }
}
/* DM chat header (contact name + mobile back) */
.dm-chat-head { display:flex; align-items:center; gap:0.6em; padding:0.6em 1em; padding-top:max(0.6em, env(safe-area-inset-top)); border-bottom:0.0625rem solid var(--border); background:var(--bg-base); flex-shrink:0; }
.dm-back { display:none; align-items:center; justify-content:center; min-width:var(--tap-target); min-height:var(--tap-target);
    background:none; border:none; color:var(--text-secondary); font-size:1.5em; line-height:1; cursor:pointer; padding:0 0.3em; }
.dm-chat-title { font-weight:600; color:var(--text-primary); font-size:0.95em; }
/* Group conversation entries in the unified DM list */
.dm-contact--group { text-decoration:none; color:inherit; }
.dm-avatar--group { color:var(--primary); background:color-mix(in srgb, var(--primary) 15%, var(--bg-elevated)); }
/* Задача 139 — users page: per-object role cards, mobile-first */
.user-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Collapsed row — tap target ≥2.75rem, no overflow at 22.5rem */
.user-row {
  border: 0.0625rem solid var(--border);
  background: var(--bg-surface);
  overflow: hidden;
}
.user-row-summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  min-height: 3rem; /* ≥3rem touch target */
  cursor: pointer;
  list-style: none; /* hide default triangle on WebKit */
  -webkit-user-select: none;
  user-select: none;
}
/* Custom disclosure indicator — a small chevron that rotates on open */
.user-row-summary::after {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 0.125rem solid var(--text-muted);
  border-bottom: 0.125rem solid var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.user-row[open] .user-row-summary::after { transform: rotate(-135deg); }
.user-row-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.user-row-name {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-row-tg,
.row-meta {
  font-family: var(--font-mono);
  font-size: var(--micro-size);
  color: var(--text-muted);
  letter-spacing: 0;
}
/* Compact role summary in collapsed state */
.user-row-roles-snippet {
  display: none; /* hidden by default on mobile (narrow) */
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
  flex-shrink: 1;
}
@media (min-width: 30em) {
    .user-row-roles-snippet { display: block; }
}
.role-tag {
  display: inline;
  font-family: var(--font-mono);
  font-size: var(--micro-size);
  letter-spacing: 0;
}
.role-tag--worker { color: var(--primary); }
.role-tag--foreman { color: var(--accent); }
.role-tag--inspector { color: var(--secondary); }
.role-tag--admin { color: var(--tertiary); }
/* The two corrective actions stay quiet — bare label, colour only in the icon,
   so a fine is never one thumb-slip away from looking like the default. */
.role-tag--org,
a.fm-acc-item:hover .fm-acc-item-go,
.fm-acc-add:hover,
.wdir-item:hover .wdir-go,
.wdir-back:hover,
.rev-actions .btn-rework  .icon,
.tx-act:hover,
.tx-act:focus-visible { color: var(--accent); }
.role-tag--subcontractor { color: var(--text-secondary); }
.role-tag--project_manager { color: var(--primary); }
.role-tag-site {
  font-size: var(--micro-size);
  color: var(--text-muted);
}
/* ── Role card (/my-role) — "who am I on this object" ─────────── */
.rolecard-wrap { padding: 1rem; }
.rolecard {
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: 0;
}
.rolecard-head {
  padding: 1rem 1rem 0.75rem;
  border-bottom: 0.0625rem solid var(--border);
}
.rolecard-kicker {
  font-family: var(--font-mono);
  font-size: var(--micro-size);
  letter-spacing: 0;
  color: var(--text-muted);
}
.rolecard-title {
  margin: 0.15rem 0 0.5rem;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  color: var(--text-primary);
}
.rolecard-roles { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rolecard-roles .role-tag {
  padding: 0.15rem 0.45rem;
  border: 0.0625rem solid currentColor;
  font-size: var(--fs-xs);
}
.rolecard-norole,
.user-row-no-roles,
.cls-meta { color: var(--text-muted); font-size: var(--fs-xs); }
.rolecard-section { padding: 0.75rem 1rem; }
.rolecard-section--cant,
.fb-hub-row + .fb-hub-row,
.rq-folders li { border-top: 0.0625rem solid var(--border); }
.rolecard-h2 {
  margin: 0 0 0.5rem;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.rolecard-bydesign {
  margin: -0.25rem 0 0.6rem;
  padding: 0.5rem 0.6rem;
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.rolecard-list { list-style: none; margin: 0; padding: 0; }
.rolecard-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--border) 55%, transparent);
  font-size: var(--fs-sm);
}
.rolecard-item--no { color: var(--text-muted); }
.rolecard-via {
  font-size: var(--micro-size);
  opacity: 0.7;
  border: none;
  padding: 0;
}
.rolecard-foot {
  padding: 0.75rem 1rem;
  border-top: 0.0625rem solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
/* ── Users page: multi-role chips per object ───────────────────
   (.user-site-role и .user-site-role-name слиты с нижними правилами —
   значения победителей сохранены, task-044.) */
.user-site-role-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.role-chip-form { display: inline; margin: 0; }
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border: 0.0625rem solid var(--border);
  background: var(--bg-elevated);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-primary);
  cursor: pointer;
}
/* Gantt row: status dot on the label, progress overlay in the bar, % readout. */
/* Статус строки — словом и насыщенностью, без крапки. */
.role-chip-x,
.fm-bell-item-time.sev-urgent,
.gantt-label[data-status="delayed"],
.wk-task[data-status="delayed"],
.tb-card.is-overdue .tb-due--late { color: var(--secondary); font-weight: 700; }
.role-add-form { display: inline-flex; gap: 0.3rem; align-items: center; }
.role-add-form .role-select { width: auto; min-width: 7rem; }
/* ── Onboarding hints: SSR inline cards, zero JS ─────────────── */
.fm-hints { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 1rem 0; }
/* Expanded detail area */
.user-row-detail {
  padding: 0.75rem;
  border-top: 0.0625rem solid var(--border);
  background: var(--bg-base);
}
/* «Всі об'єкти» org-select row */
.user-org-role {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid var(--border);
  flex-wrap: wrap;
}
.user-org-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0;
  color: var(--text-secondary);
  white-space: nowrap;
}
.user-org-role .role-select {
  flex: 1;
  min-width: 8rem;
  height: 2.75rem; /* ≥2.75rem touch target */
  font-size: var(--fs-xs);
}
/* Вимкнена обліковка: рядок гасне, але лишається читабельним — це не
   видалення, людину ще треба знайти в списку, щоб увімкнути назад. */
.role-tag--off { color: var(--secondary); }
/* Вимкнення доступу — окремий блок під ролями, з відступом-межею, щоб
   не читався як ще одна роль. */
.user-ban-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid var(--border);
}
.user-ban-form .form-control {
  flex: 1;
  min-width: 10rem;
  height: 2.75rem;
  font-size: var(--fs-xs);
}
/* Per-site role grid — responsive: 1 col narrow, 2 cols wide */
.user-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.5rem;
}
.user-site-role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  min-height: 2.75rem; /* touch target ≥2.75rem */
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--border) 55%, transparent);
}
.user-site-role-name {
  font-size: var(--fs-xs);
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.user-site-role .role-select {
  width: 8rem;
  flex-shrink: 0;
  height: 2.5rem;
  font-size: var(--fs-xs);
}
.user-site-role .btn-sm {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  padding: 0.25rem 0.5rem;
  min-height: 2rem;
}
.user-role-empty {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-align: center;
  padding: 1rem 0;
}
/* Form-control base for selects */
.role-select {
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  color: var(--text-primary);
  padding: 0.25rem 0.5rem;
  font-family: inherit;
  appearance: auto;
  accent-color: var(--accent);
}
.role-select:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: -0.125rem;
}
/* Пины «очікує погодження»: видно, но неактивно. */
.dm-contact--disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.pr-item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0.5rem; border: 0.0625rem solid var(--border); }
.pr-mark { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; line-height: 1; flex-shrink: 0; min-width: 4.5rem; }
.pr-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; min-width: 0; }
.lt-item { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.4rem 0.5rem; border: 0.0625rem solid var(--border); }
.lt-head,
.prop-main { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.lt-phase { font-family: var(--font-mono); font-size: var(--micro-size, 0.75rem); color: var(--text-muted); }
.lt-name { flex: 1 1 auto; font-size: var(--fs-sm); }
.lt-pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--text-secondary); }
.lt-pct b { color: var(--primary); font-weight: 600; }
.lt-bar { display: block; height: 0.25rem; background: var(--bg-surface); overflow: hidden; }
.lt-bar > span { display: block; height: 100%; background: var(--primary); }
.lt-fact { font-size: var(--fs-xs); color: var(--text-secondary); font-style: italic; }
/* Сводка дня на /daily: план выполнен на N%. */
.day-fact { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.75rem 0; border-top: 0.0625rem solid var(--border); border-bottom: 0.0625rem solid var(--border); margin: var(--space-md) 0; }
.day-fact-label { font-size: var(--fs-xs); color: var(--text-secondary); }
.day-fact-pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xl); font-weight: 600; justify-self: end; }
.day-fact-bar { grid-column: 1 / -1; display: block; height: 0.25rem; background: var(--bg-surface); overflow: hidden; }
.day-fact-bar > span { display: block; height: 100%; background: var(--primary); }
.day-fact-sub { grid-column: 1 / -1; font-family: var(--font-mono); font-size: var(--micro-size, 0.75rem); color: var(--text-muted); }
.po-progress-head { display: flex; justify-content: space-between; align-items: baseline; }
.po-progress-label { font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0; color: var(--text-secondary); }
.po-progress-pct { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); color: var(--success); }
.po-progress-bar > span { display: block; height: 100%; background: var(--success); }
.po-progress-sub { font-size: var(--fs-xs); color: var(--text-muted); }
/* ══ Task discussion — chat thread (redesign 22.07) ═══════════════════════
   Was a full-width log with a colour stripe + repeated badge on every row.
   Now a real conversation: mine-right / others-left, avatar, status shown as a
   small tag only on transitions, replies quote the parent inline. */
.tk-thread { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.25rem 0 0.25rem 1.75rem; }
.tk-msg { position: relative; z-index: 1; display: flex; gap: 0.5rem; align-items: flex-start; max-width: 100%; }
.tk-msg--mine { flex-direction: row-reverse; }
/* Blueprint connectors parent→child (SVG overlay filled by task-thread.js).
   Micrographic: hairline orange traces in the left gutter, hollow square nodes
   at both ends (survey-point look). Sits behind the bubbles, ignores clicks. */
.tk-links { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.tk-link-path { fill: none; stroke: var(--primary); stroke-width: 1; opacity: 0.32; pointer-events: stroke; cursor: pointer; }
.tk-link-node { fill: var(--bg-base); stroke: var(--primary); stroke-width: 1; opacity: 0.55; }
.tk-avatar {
    flex-shrink: 0; width: 1.875rem; height: 1.875rem;
    display: grid; place-items: center; overflow: hidden; border-radius: 50%;
    background: var(--bg-elevated); border: 0.0625rem solid var(--border);
    font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary);
}
.tk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tk-bubble {
    position: relative; min-width: 0;
    max-width: min(34rem, 82%);
    background: var(--bg-surface);
    border: 0.0625rem solid var(--border);
    padding: 0.5rem 0.7rem 0.55rem;
    transition: border-color 0.15s; /* branch focus — слито из дубля ниже (task-044) */
}
.tk-msg--mine .tk-bubble {
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-surface));
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}
.tk-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.2rem; }
.tk-author { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--primary); letter-spacing: 0; }
.tk-time {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    letter-spacing: 0;
    white-space: nowrap;
}
/* Blueprint-annotation tick: small emerald diamond before the timestamp so it
   reads as a drawn label, not a raw DB string (client 23.07 «слабое звено»). */
.tk-time::before {
    content: "";
    width: 0.28rem;
    height: 0.28rem;
    border: 0.0625rem solid var(--primary);
    transform: rotate(45deg);
    opacity: 0.75;
    flex: none;
}
.tk-tag { font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0; padding: 0.05rem 0.3rem; border: 0.0625rem solid currentColor; line-height: 1.5; }
.tk-tag--fix { color: var(--primary); }
.tk-tag--review { color: var(--success); }
.tk-tag--reject { color: var(--secondary); }
.tk-quote {
    display: block; margin: 0 0 0.35rem; padding: 0.25rem 0.45rem;
    background: var(--bg-elevated); border: 0.0625rem solid var(--border);
    font-size: var(--fs-xs); color: var(--text-secondary); text-decoration: none; max-width: 100%;
}
.tk-quote-author { display: block; font-family: var(--font-mono); font-size: var(--micro-size); font-weight: 700; letter-spacing: 0; color: var(--primary); }
.tk-quote-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-quote:hover { border-color: var(--primary); }
.tk-text { font-size: var(--fs-sm); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-media { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.tk-thumb { width: 9rem; height: 9rem; object-fit: cover; border: 0.0625rem solid var(--border); display: block; }
.tk-reply {
    display: inline-block; margin-top: 0.35rem;
    font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0;
    color: var(--text-muted); text-decoration: none; opacity: 0; transition: opacity 0.15s;
}
@media (pointer: coarse) {
    .tk-reply { opacity: 0.65; }
}
/* Branch focus: click a message (or its connector) → show only that thread;
   click it again → restore. (client 22.07)
   (transition слит в основное правило .tk-bubble выше, task-044.) */
.tk-msg:hover > .tk-bubble { border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.tk-branch-mode .tk-msg.tk-branch-on > .tk-bubble { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
/* Connector stripe is clickable (parent svg stays click-through) —
   pointer-events/cursor слиты в основное правило .tk-link-path выше. */
.tk-branch-bar {
    align-self: stretch; margin: 0 0 0.25rem -1.75rem; padding: 0.35rem 0.6rem 0.35rem 1.75rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-surface));
    border: 0.0625rem solid color-mix(in srgb, var(--primary) 28%, var(--border));
    font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0;
    color: var(--primary);
}
.tk-act {
    flex: 1 1 4.5rem; min-width: 4.5rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.6rem 0.4rem; cursor: pointer;
    background: var(--bg-surface); border: 0.0625rem solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tk-act-ic { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }
.tk-act span { line-height: 1.2; text-align: center; }
.tk-act:hover { background: var(--bg-elevated); }
.tk-act--fix { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.tk-act--fix:hover { background: color-mix(in srgb, var(--primary) 12%, var(--bg-surface)); }
.tk-act--accept { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.tk-act--accept:hover { background: color-mix(in srgb, var(--success) 12%, var(--bg-surface)); }
/* Decision bar — sits by the status up top, physically apart from the comment
   box, so accept/rework read as "task fate", not "act on my comment"
   (Alexandra: approve next to the input was confusing). */
.tk-decision {
    display: flex; flex-direction: column; gap: 0.4rem;
    margin: 0.75rem 0 0.25rem; padding: 0.6rem 0.7rem;
    background: var(--bg-surface); border: 0.0625rem solid var(--border);
}
.tk-decision-lbl {
    font-family: var(--font-mono); font-size: var(--micro-size);
    letter-spacing: 0; color: var(--text-muted);
}
.tk-decision-acts { display: flex; gap: 0.4rem; }
/* Horizontal (icon+label inline) in the decision bar — reads as a firm button,
   not a small tile. */
.tk-decision .tk-act { flex: 1 1 0; flex-direction: row; justify-content: center; padding: 0.55rem 0.7rem; font-size: var(--micro-size); }
.tk-decision .tk-act-ic { width: 1.05rem; height: 1.05rem; }
/* Composer toolbar under the textarea: attach photo left, send right — one
   coherent row (send no longer stacks under the photo button). */
.tk-compose-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
.tk-send {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1rem; cursor: pointer;
    background: var(--bg-surface); border: 0.0625rem solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0;
    transition: border-color 0.15s, color 0.15s;
}
.tk-send .tk-act-ic { width: 1rem; height: 1rem; }
/* Compose actions group (right side of the bar): «На доработку» + «Отправить». */
.tk-compose-actions { display: flex; align-items: center; gap: 0.4rem; }
/* «На доработку» — mode toggle by the field (needs the typed reason). Amber,
   distinct from the neutral send. Becomes a neutral «Отмена» while active. */
.tk-rework-toggle {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.9rem; cursor: pointer;
    background: none; border: 0.0625rem solid color-mix(in srgb, var(--warning) 45%, var(--border));
    color: var(--warning);
    font-family: var(--font-mono); font-size: var(--micro-size); letter-spacing: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tk-rework-toggle:hover, .tk-rework-toggle:focus-visible { background: color-mix(in srgb, var(--warning) 12%, transparent); outline: none; }
.tk-rework-toggle .tk-act-ic { width: 1rem; height: 1rem; }
/* Send button flips to the rework action while in rework mode — amber to match. */
.tk-send--rework { border-color: color-mix(in srgb, var(--warning) 60%, var(--border)); color: var(--warning); }
/* Reason field in rework mode — amber frame + a brief pulse so focus visibly
   lands here (the toggle "moves focus to the comment field"). */
#fm-respond-text { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.tk-act.is-quick { outline: 0.125rem solid currentColor; outline-offset: -0.0625rem; }
.nav-more[open] > .nav-more-menu,
.fm-density-btn svg,
.step.active,
.inline-form.active,
details[open] > .inline-form,
form.ac-compose.htmx-request .ac-typing,
.fp-tooltip.visible,
.sch-add-btn svg,
.fb-group[data-gate="no"] .fb-gate-plaque,
.pp-rep .pp-pay .pp-bal::before { display: block; }
@media (max-width: 68.75em) {
    /* Ящик: обёртка исчезает из потока, пункты снова прямые дети меню. */
    .nav.open .nav-more { display: contents; }
    .nav.open .nav-more-menu {
        display: contents;
        position: static;
        border: 0;
        background: none;
        box-shadow: none;
        padding: 0;
    }
    /* Вне открытого ящика (вертикальная полоса-иконки) — ничего лишнего. */
    .nav:not(.open) .nav-more,
    .fm-cmdk-hint,
    .nav.open .nav-more > summary { display: none; }
}