/* tokens.css — дизайн-система SprintTracker (токены перенесены дословно из
   DESIGN-airbnb.md, см. DESIGN_SYSTEM.md). Подключается ОДИН раз в базовом
   layout-шаблоне (_base.html) — HTMX-фрагменты переиспользуют эти классы,
   не дублируют инлайн-стили и не подключают токены повторно. */

:root {
  /* цвет */
  --color-primary: #ff385c;
  --color-primary-active: #e00b41;
  --color-primary-disabled: #ffd1da;
  --color-error-text: #c13515;
  --color-error-text-hover: #b32505;
  --color-ink: #222222;
  --color-body: #3f3f3f;
  --color-muted: #6a6a6a;
  --color-muted-soft: #929292;
  --color-hairline: #dddddd;
  --color-hairline-soft: #ebebeb;
  --color-border-strong: #c1c1c1;
  --color-canvas: #ffffff;
  --color-surface-soft: #f7f7f7;
  --color-surface-strong: #f2f2f2;
  --color-on-primary: #ffffff;
  /* Единичное исключение из "без светофора" (DESIGN_multi_action_cells.md
     п.0.6, guardrail 4 _TASK_multi_action_cells.md) — светло-зелёный ТОЛЬКО
     для фона плашки отдельного действия внутри окна ячейки, когда именно
     ЭТО действие продвигает. Не расширять на другие экраны без запроса. */
  --color-advance-soft: #e8f5ea;

  /* типографика — семейство */
  --font-family: 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto,
    'Helvetica Neue', sans-serif;

  /* скругления */
  --radius-xs: 4px;
  --radius-sm: 8px;   /* кнопки, поля ввода */
  --radius-md: 14px;  /* карточки */
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px; /* пилюли, точки, аватары */

  /* отступы (база 4px) */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 64px;

  /* единственный тир тени во всей системе */
  --shadow-card: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.04) 0 2px 6px 0, rgba(0,0,0,.1) 0 4px 8px 0;
  --scrim: rgba(0,0,0,.5);

  color-scheme: light;
}

/* Источник дизайн-системы явно фиксирует отсутствие тёмной темы у Airbnb —
   это перенесённое ограничение самой системы, не упущение. */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--color-surface-soft);
  font-family: var(--font-family);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- каркас продукта ---------- */
.app-shell { background: var(--color-canvas); min-height: 100vh; }

.top-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 var(--space-xl);
  border-bottom: 1px solid var(--color-hairline);
  background: var(--color-canvas);
}
.wordmark {
  font-size: 20px; font-weight: 700; letter-spacing: -0.2px; color: var(--color-ink);
  text-decoration: none;
}
.wordmark span { color: var(--color-primary); }
.product-tabs { display: flex; gap: var(--space-xl); }
.product-tab {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 600; color: var(--color-muted);
  text-decoration: none; padding-top: 6px;
}
.product-tab.is-active { color: var(--color-ink); }
.product-tab .rule { height: 2px; width: 100%; background: transparent; border-radius: 1px; }
.product-tab.is-active .rule { background: var(--color-ink); }
.nav-right { display: flex; align-items: center; gap: var(--space-md); }
.avatar {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--color-ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; border: none; cursor: pointer;
  font-family: var(--font-family);
}

/* account-menu: нативный <details>/<summary> — без своего JS, доступно с клавиатуры */
.account-menu { position: relative; list-style: none; }
.account-menu summary { list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.account-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--color-canvas); border-radius: var(--radius-sm);
  border: 1px solid var(--color-hairline); box-shadow: var(--shadow-card);
  min-width: 180px; padding: var(--space-xs);
}
.account-dropdown a, .account-dropdown button {
  display: block; width: 100%; text-align: left; font-family: var(--font-family);
  font-size: 14px; color: var(--color-ink); text-decoration: none;
  background: none; border: none; cursor: pointer;
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-xs);
}
.account-dropdown a:hover, .account-dropdown button:hover { background: var(--color-surface-soft); }
.account-dropdown a:focus-visible, .account-dropdown button:focus-visible {
  outline: 2px solid var(--color-ink); outline-offset: -2px;
}

/* ---------- кнопки ---------- */
.btn {
  font-family: var(--font-family); font-size: 15px; font-weight: 500;
  border-radius: var(--radius-sm); height: 44px; padding: 0 22px;
  border: none; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; line-height: 1;
}
.btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-active); }
.btn-secondary { background: var(--color-canvas); color: var(--color-ink); border: 1px solid var(--color-ink); }
.btn-secondary:hover { background: var(--color-surface-soft); }
.btn-text {
  background: transparent; color: var(--color-ink); font-weight: 500;
  height: auto; padding: 4px 6px; text-decoration: underline; text-underline-offset: 3px;
}
.btn-text:hover { color: var(--color-primary); }
.btn-full { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- шахматка ---------- */
.board-toolbar { display: flex; justify-content: flex-end; padding: var(--space-lg) var(--space-xl) 0; }
.board-hint {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-base);
  margin: 0 var(--space-xl) var(--space-base);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-soft); border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md); font-size: 14px; color: var(--color-body);
}
.board-hint a { color: var(--color-ink); font-weight: 600; }
.board-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-lg) var(--space-xl) var(--space-base);
  flex-wrap: wrap; gap: var(--space-base);
}
.board-title { font-size: 22px; font-weight: 500; letter-spacing: -0.3px; margin: 0; }
.board-sub { color: var(--color-muted); font-size: 14px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.week-nav { display: flex; align-items: center; gap: var(--space-md); }
.week-nav a, .week-nav span {
  background: none; border: none; font-family: var(--font-family); font-size: 14px;
  color: var(--color-ink); cursor: pointer; padding: 6px 10px; border-radius: var(--radius-xs);
  text-decoration: none; display: inline-block;
}
.week-nav a:hover { background: var(--color-surface-soft); }
.week-nav a:focus-visible, .week-nav span:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.week-nav .current { font-weight: 600; }

.board-scroll { overflow-x: auto; padding: 0 var(--space-xl) var(--space-xxl); }
table.board { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 860px; }
table.board th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--color-muted);
  text-transform: uppercase; letter-spacing: 0.4px; padding: 0 var(--space-sm) var(--space-sm);
  border-bottom: 1px solid var(--color-hairline);
}
/* Заголовки дней недели — по центру над своей ячейкой; th.proj-col (название,
   не дата) остаётся слева за счёт :not() — базовое правило не трогаем (M2.8). */
table.board th:not(.proj-col) { text-align: center; }
table.board th.weekend { color: var(--color-primary); }
table.board th.proj-col { position: sticky; left: 0; background: var(--color-canvas); z-index: 2; min-width: 220px; }
table.board td.proj-col {
  position: sticky; left: 0; background: var(--color-canvas); z-index: 1;
  padding: var(--space-md) var(--space-base) var(--space-md) var(--space-sm);
  border-bottom: 1px solid var(--color-hairline-soft);
  box-shadow: 1px 0 0 var(--color-hairline);
  max-width: 260px;
}
/* Открытое меню «О проекте/Сводка» — поднимаем весь стекинг-контекст ячейки,
   иначе z-index: 20 у .proj-menu-dropdown не пробивается наружу через границу
   родительского стекинг-контекста td.proj-col (position: sticky + z-index: 1)
   и дропдаун уходит под соседнюю строку снизу. */
table.board td.proj-col:has(.proj-menu[open]) { z-index: 10; }
.proj-name {
  font-size: 15px; font-weight: 600; color: var(--color-ink); text-decoration: none;
  display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proj-name:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.board-proj-head { display: flex; align-items: center; gap: var(--space-xs); }
/* Хэндл drag-and-drop (M2.7) — второй способ реордера рядом с ▲▼,
   тот же токен-язык (muted-цвет, без новых цветов/скруглений). */
.drag-handle { color: var(--color-muted-soft); cursor: grab; font-size: 14px; flex-shrink: 0; user-select: none; }
.drag-handle:active { cursor: grabbing; }
table.board tbody tr.dragging { opacity: .4; }
.board-proj-head .proj-name { flex: 1; min-width: 0; max-width: none; }
/* Меню «О проекте / Сводка» (_TASK_board_summary.md) — нативный
   <details>/<summary>, тот же паттерн, что account-menu в _shell.html.
   Видимость по hover на строку через opacity, не JS; :focus-within/[open]
   держат её видимой, пока меню реально открыто или в фокусе клавиатуры. */
.proj-menu { position: relative; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
tr:hover .proj-menu, .proj-menu[open], .proj-menu:focus-within { opacity: 1; }
.proj-menu-trigger {
  list-style: none; cursor: pointer; color: var(--color-muted);
  font-size: 12px; padding: 2px 5px; border-radius: var(--radius-xs);
}
.proj-menu-trigger::-webkit-details-marker { display: none; }
.proj-menu-trigger:hover { background: var(--color-surface-soft); }
.proj-menu-trigger:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.proj-menu-dropdown {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--color-canvas); border-radius: var(--radius-sm);
  border: 1px solid var(--color-hairline); box-shadow: var(--shadow-card);
  min-width: 160px; padding: var(--space-xs);
}
.proj-menu-dropdown a, .proj-menu-dropdown button {
  display: block; width: 100%; text-align: left; font-family: var(--font-family);
  font-size: 14px; color: var(--color-ink); text-decoration: none;
  background: none; border: none; cursor: pointer;
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-xs);
}
.proj-menu-dropdown a:hover, .proj-menu-dropdown button:hover { background: var(--color-surface-soft); }
.proj-menu-dropdown a:focus-visible, .proj-menu-dropdown button:focus-visible {
  outline: 2px solid var(--color-ink); outline-offset: -2px;
}
.board-proj-actions { display: flex; gap: 4px; flex-shrink: 0; }
.board-proj-actions form { display: inline; }
/* Компактный вариант .icon-btn для шахматки — тот же визуальный язык
   (форма/цвет/hover/focus/disabled из .icon-btn на /projects), только меньше,
   т.к. кнопки стоят в узкой залипшей колонке рядом с именем проекта. */
.icon-btn.icon-btn-sm { width: 22px; height: 22px; font-size: 10px; }
.proj-kind { font-size: 12px; margin-top: 3px; }
.proj-kind.client {
  display: inline-block; border: 1px solid var(--color-ink); border-radius: var(--radius-full);
  padding: 1px 9px; font-weight: 500;
}
.proj-kind.personal { color: var(--color-muted); font-weight: 400; }
.proj-client-name { color: var(--color-muted); font-size: 12px; font-weight: 400; }

td.cell {
  border-bottom: 1px solid var(--color-hairline-soft);
  padding: var(--space-xs); vertical-align: top; min-width: 128px;
}
.cell-box {
  height: 76px; width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--color-hairline-soft);
  background: var(--color-surface-soft); padding: var(--space-sm);
  cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-family); text-align: left;
}
.cell-box:hover { border-color: var(--color-border-strong); }
.cell-box:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 1px; }
.cell-box.filled { background: var(--color-canvas); box-shadow: var(--shadow-card); }
/* Донастройка M7 (_TASK_m7_board_tile_highlight.md, 2026-07-15): плашка на доске
   тоже подсвечивается зелёным, если день продвигает — точка-индикатор (ink/muted)
   остаётся поверх, оба сигнала вместе. */
.cell-box.filled.advances { background: var(--color-advance-soft); }
.cell-box.empty { align-items: center; justify-content: center; color: var(--color-muted-soft); font-size: 20px; font-weight: 300; }
/* Копирование ячейки перетаскиванием (M8, guardrail 9 _TASK_cell_copy_dragdrop.md) —
   короткая обводка ink (не новый цвет), затухающая до обычной shadow-card сама
   по себе (animation-fill-mode по умолчанию — none), без JS-таймера на снятие
   класса. Глушится глобально в @media (prefers-reduced-motion: reduce) выше. */
@keyframes cell-copy-pulse {
  0% { box-shadow: 0 0 0 3px var(--color-ink); }
  100% { box-shadow: var(--shadow-card); }
}
.cell-copy-pulse { animation: cell-copy-pulse .5s ease-out; }
.cell-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; }
.cell-dot.yes { background: var(--color-ink); }
.cell-dot.no { background: transparent; border: 1.5px solid var(--color-muted-soft); }
.cell-head { display: flex; align-items: center; gap: 6px; }
.cell-state-label { font-size: 11px; color: var(--color-muted); }
.cell-text {
  font-size: 12.5px; color: var(--color-body); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0;
}

/* Список действий внутри окна ячейки (M7, _TASK_multi_action_cells.md) —
   плашки на тех же токенах, что остальной модальный язык. */
.action-list { display: flex; flex-direction: column; gap: var(--space-sm); margin: var(--space-base) 0; }
.action-item {
  border: 1px solid var(--color-hairline-soft); border-radius: var(--radius-sm);
  background: var(--color-surface-soft); padding: var(--space-sm) var(--space-md);
}
/* Единственное место в приложении с зелёным фоном (guardrail 4) — только
   на плашке КОНКРЕТНОГО продвигающего действия, не на точке-индикаторе
   ячейки на доске (та осталась ink/muted, см. _cell_indicator.html). */
.action-item.advances { background: var(--color-advance-soft); }
.action-item-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.action-item-text { font-size: 14px; color: var(--color-body); line-height: 1.4; margin: 0 0 var(--space-sm); white-space: pre-wrap; }
.action-item-actions { display: flex; gap: var(--space-md); }
/* Первый по-настоящему деструктивный (необратимый) контрол в проекте —
   error-text уместен, без двухшагового подтверждения/window.confirm
   (guardrail 7 _TASK_multi_action_cells.md: их нигде в проекте нет). */
.action-delete { color: var(--color-error-text); }
.action-delete:hover { color: var(--color-error-text-hover); }
.action-item-edit { margin-top: var(--space-sm); }
.action-add-title { font-size: 14px; font-weight: 600; color: var(--color-muted); margin: var(--space-lg) 0 var(--space-sm); }

.empty-state {
  margin: var(--space-xxl) auto; max-width: 360px; text-align: center; color: var(--color-muted);
  padding: 0 var(--space-xl);
}
.empty-state a { color: var(--color-ink); }

/* ---------- модалка ---------- */
.scrim {
  position: fixed; inset: 0; background: var(--scrim);
  display: flex; align-items: center; justify-content: center; z-index: 40; padding: var(--space-base);
}
/* Модалка без своего JS/роута — открывается ссылкой на #id, закрывается
   ссылкой на "#" (сбрасывает :target). Тот же визуальный язык модалки,
   что и у ячейки шахматки, но без HTMX-фрагмента (см. DESIGN_SYSTEM.md). */
.modal-toggle { display: none; }
.modal-toggle:target { display: flex; }
.modal {
  background: var(--color-canvas); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  width: 100%; max-width: 420px; padding: var(--space-lg);
  /* Список действий ячейки (M7) может стать выше вьюпорта на узком экране —
     .scrim фиксирован по inset:0 без своего overflow, поэтому без этого
     модалка просто обрезалась бы снизу без возможности проскроллить до
     формы добавления. Тот же приём заодно защищает "Сводку" (модалка с
     всем сроком проекта), где раньше был тот же риск не по этой задаче. */
  max-height: calc(100vh - var(--space-lg) * 2); overflow-y: auto;
}
/* Модификатор ширины — не трогает базовый .modal (ячейка шахматки, admin
   create-user): "просторная" модалка создания проекта на /board, см.
   _TASK_board_add_project.md guardrail 2. */
.modal--wide { max-width: 640px; }
.modal-eyebrow { font-size: 12px; color: var(--color-muted); margin: 0 0 2px; }
.modal h3 { font-size: 18px; font-weight: 600; margin: 0 0 var(--space-base); }
.field-label { font-size: 13px; font-weight: 500; color: var(--color-muted); display: block; margin-bottom: 6px; }
textarea.input, input.input, select.input {
  font-family: var(--font-family); font-size: 15px; color: var(--color-ink);
  width: 100%; border: 1px solid var(--color-hairline); border-radius: var(--radius-sm);
  padding: var(--space-md); background: var(--color-canvas);
}
textarea.input { min-height: 92px; resize: vertical; }
input.input, select.input { height: 56px; }
.input:focus, textarea.input:focus, select.input:focus {
  outline: none; border: 2px solid var(--color-ink); padding: calc(var(--space-md) - 1px);
}
.segmented { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.seg-btn {
  position: relative; flex: 1; height: 44px; border-radius: var(--radius-full);
  border: 1px solid var(--color-hairline); background: var(--color-canvas); color: var(--color-ink);
  font-family: var(--font-family); font-size: 14px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* Сегмент-контрол на нативных radio — выбранное состояние читается из
   :checked через :has(), без своего JS (прогрессивное улучшение). */
.seg-btn input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.seg-btn:has(input:checked), .seg-btn.selected {
  background: var(--color-ink); color: #fff; border-color: var(--color-ink);
}
.seg-btn:has(input:focus-visible) { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); }

/* Сводка проекта на шахматке (_TASK_board_summary.md) — вкладки на тех же
   token'ах, что и остальной модальный язык, без нового визуального словаря. */
.summary-tabs { display: flex; gap: var(--space-md); border-bottom: 1px solid var(--color-hairline); margin-bottom: var(--space-md); }
.summary-tab {
  background: none; border: none; cursor: pointer; font-family: var(--font-family);
  font-size: 14px; font-weight: 500; color: var(--color-muted);
  padding: var(--space-sm) 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.summary-tab.is-active { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.summary-tab:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.summary-panel { max-height: 50vh; overflow-y: auto; }
.summary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.summary-item {
  border: 1px solid var(--color-hairline-soft); border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}
.summary-item-head { display: flex; align-items: center; gap: 6px; }
.summary-item-date { font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.summary-item-text { font-size: 14px; color: var(--color-body); margin: 4px 0 0; line-height: 1.4; }

/* ---------- момент-вспышка (M9, DESIGN_project_completion.md §2.1) ----------
   Тот же визуальный язык, что у модалки ячейки (.scrim + .modal), но карточка
   шире и с крупной типографикой — "полноэкранный момент", не тост. Никаких
   новых цветовых токенов (guardrail 3 _TASK_m8_completion.md): цифры — ink,
   подписи — muted, тот же приём, что везде в продукте. */
.modal--flash { max-width: 480px; text-align: center; padding: var(--space-xl); }
.flash-title { font-size: 26px; font-weight: 600; letter-spacing: -0.3px; margin: 0 0 var(--space-lg); }
.flash-stats { display: flex; justify-content: center; gap: var(--space-xl); margin-bottom: var(--space-lg); }
.flash-stat { display: flex; flex-direction: column; align-items: center; }
.flash-stat-value { font-size: 32px; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.flash-stat-label { font-size: 12px; color: var(--color-muted); margin-top: 2px; }
.flash-reward { font-size: 15px; color: var(--color-body); line-height: 1.5; margin: 0 0 var(--space-base); }
.flash-reward strong { color: var(--color-ink); }
.modal--flash .modal-actions { justify-content: center; }

/* ---------- карта пути (M9, DESIGN_project_completion.md §2.2) ----------
   Ink/muted, тот же бинарный приём, что cell-dot на доске (guardrail 3) —
   никакого нового цвета, "залитый/пустой" квадрат вместо точки. */
.journey-facts {
  display: flex; flex-wrap: wrap; gap: var(--space-xl);
  padding: 0 var(--space-xl) var(--space-lg);
}
.journey-retro-form { padding: 0 var(--space-xl); max-width: 640px; }
.journey-retro-form textarea { min-height: 72px; }
.journey-grid {
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: 0 var(--space-xl) var(--space-xxl);
}
.journey-week { display: flex; align-items: center; gap: var(--space-base); }
.journey-week-label {
  width: 200px; flex-shrink: 0; font-size: 13px; color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.journey-slots { display: flex; gap: var(--space-xs); }
.journey-cell { width: 18px; height: 18px; border-radius: var(--radius-xs); flex-shrink: 0; }
.journey-cell.yes { background: var(--color-ink); }
.journey-cell.no { background: var(--color-surface-soft); border: 1px solid var(--color-hairline); }

/* ---------- стена завершённых (M9, DESIGN_project_completion.md §2.3) ----------
   Личные и клиентские вместе, бейдж proj-kind (уже существует) их различает —
   без раздельных вкладок (решение владельца). Тот же shadow-card hover, что
   у .proj-row в списке проектов. */
.completed-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-base);
  padding: 0 var(--space-xl) var(--space-xxl);
}
.completed-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--color-hairline-soft); border-radius: var(--radius-md);
  padding: var(--space-base) var(--space-lg);
}
.completed-card:hover { box-shadow: var(--shadow-card); }
.completed-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.completed-card-head .name { font-size: 16px; font-weight: 600; color: var(--color-ink); }
.completed-card-date { font-size: 13px; color: var(--color-muted); margin: 4px 0 var(--space-sm); }
.completed-card-stats { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--color-body); font-variant-numeric: tabular-nums; }
/* Призрак "следующий на финиш" — не кликабельная карточка (ещё не завершён),
   тише остальных (тот же приём приглушения, что у .archived-row). */
.completed-card-ghost { opacity: .6; border-style: dashed; }

/* ---------- проекты ---------- */
.page-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-base);
  padding: var(--space-lg) var(--space-xl) var(--space-base);
}
.page-head h1 { font-size: 22px; font-weight: 500; letter-spacing: -0.3px; margin: 0; }
.page-head-sub { color: var(--color-muted); font-size: 14px; margin: 4px 0 0; }
.list { padding: 0 var(--space-xl) var(--space-xxl); display: flex; flex-direction: column; gap: var(--space-sm); }
.proj-row {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr auto; align-items: center; gap: var(--space-base);
  border: 1px solid var(--color-hairline-soft); border-radius: var(--radius-md);
  padding: var(--space-base) var(--space-lg);
}
.proj-row:hover { box-shadow: var(--shadow-card); }
.proj-row .name { font-size: 16px; font-weight: 600; text-decoration: none; color: var(--color-ink); }
.proj-row .name:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.proj-row .meta-label { font-size: 11px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .3px; }
.proj-row .meta-value { font-size: 14px; color: var(--color-body); font-variant-numeric: tabular-nums; margin-top: 2px; }
.proj-row-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-full); border: 1px solid var(--color-hairline);
  background: var(--color-canvas); color: var(--color-ink); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-family);
}
.icon-btn:hover { background: var(--color-surface-soft); }
.icon-btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.archived-row { opacity: .55; }

/* ---------- формы (проекты, вход) ---------- */
.form-page { padding: 0 var(--space-xl) var(--space-xxl); max-width: 560px; }
.form-field { margin-bottom: var(--space-base); }
.field-error { color: var(--color-error-text); font-size: 13px; margin-top: 4px; }
.form-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); flex-wrap: wrap; }
.notice { background: var(--color-surface-soft); border-radius: var(--radius-sm); padding: var(--space-md); color: var(--color-ink); font-size: 14px; }
.notice code.secret { font-family: ui-monospace, monospace; background: var(--color-surface-strong); padding: 2px 6px; border-radius: 4px; }

/* ---------- пикер клиента (форма проекта, _TASK_clients.md фаза 4) ---------- */
.client-picker-list { max-height: 160px; overflow-y: auto; border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); margin: var(--space-xs) 0; }
.client-picker-item { padding: var(--space-sm) var(--space-md); cursor: pointer; font-size: 14px; }
.client-picker-item:hover { background: var(--color-surface-soft); }
#client-picker-selected { font-size: 14px; padding: var(--space-sm) 0; }

/* ---------- онбординг ---------- */
.goal-list { padding: 0 var(--space-xl) var(--space-xxl); display: flex; flex-direction: column; gap: var(--space-md); max-width: 640px; }
.goal-row { border-bottom: 1px solid var(--color-hairline-soft); padding-bottom: var(--space-md); }
.goal-week { font-size: 13px; font-weight: 600; color: var(--color-ink); margin-bottom: 2px; }
.goal-dates { font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; margin-bottom: var(--space-sm); }
.goal-outcome { font-size: 13px; color: var(--color-muted); margin: var(--space-sm) 0; }
.goal-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* ---------- admin ---------- */
.admin-table { width: 100%; border-collapse: collapse; margin: 0 var(--space-xl); width: calc(100% - 64px); }
.admin-table th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--color-muted);
  text-transform: uppercase; letter-spacing: .3px; padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-hairline);
}
.admin-table td { padding: var(--space-md); border-bottom: 1px solid var(--color-hairline-soft); font-size: 14px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: var(--radius-full); }
.pill.active { background: var(--color-surface-strong); color: var(--color-ink); }
.pill.active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink); }
.pill.inactive { background: var(--color-surface-soft); color: var(--color-muted-soft); }
.pill.inactive::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-muted-soft); }
.role-owner { font-size: 12px; color: var(--color-muted); }
.admin-note { padding: 0 var(--space-xl); color: var(--color-muted); font-size: 13px; margin: -8px 0 var(--space-base); }
.admin-section-title { padding: var(--space-lg) var(--space-xl) 0; font-size: 16px; font-weight: 600; }

/* ---------- гант ---------- */
.gantt-nodeadline-list { padding: 0 var(--space-xl); display: flex; flex-direction: column; }
.gantt-nodeadline-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-base);
  padding: var(--space-md) 0; border-bottom: 1px solid var(--color-hairline-soft);
  font-size: 14px; color: var(--color-muted);
}
.gantt-nodeadline-row a { color: var(--color-ink); }
.gantt-nodeadline-row a:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

.gantt-filter { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); padding: 0 var(--space-xl) var(--space-base); }
.gantt-filter label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-body); cursor: pointer; }
.gantt-filter input[type="checkbox"] { accent-color: var(--color-ink); width: 16px; height: 16px; }

.gantt-scroll { overflow-x: auto; padding: 0 var(--space-xl) var(--space-xxl); }
.gantt-list { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 720px; }
.gantt-row { display: flex; flex-direction: column; gap: var(--space-sm); }
.gantt-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-base); flex-wrap: wrap; }
.gantt-project-name { font-size: 15px; font-weight: 600; color: var(--color-ink); text-decoration: none; }
.gantt-project-name:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.gantt-metrics { display: flex; gap: var(--space-base); font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; }

.gantt-track { display: flex; gap: 4px; }
.gantt-block {
  height: 28px; min-width: 34px; flex: 1; border-radius: var(--radius-xs);
  background: var(--color-surface-soft); border: 1px solid var(--color-hairline-soft);
}
.gantt-block.achieved { background: var(--color-ink); border-color: var(--color-ink); }
.gantt-block.not-achieved { background: var(--color-canvas); border: 1.5px solid var(--color-muted-soft); }
.gantt-block.pending { background: var(--color-surface-soft); border-color: var(--color-hairline-soft); }

/* ---------- аналитика ---------- */
.period-bar {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-base); padding: 0 var(--space-xl) var(--space-lg);
}
.period-presets { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.period-preset {
  padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-hairline);
  background: var(--color-canvas); color: var(--color-body); font-size: 13px; text-decoration: none;
  font-family: var(--font-family);
}
.period-preset:hover { background: var(--color-surface-soft); }
.period-preset:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.period-preset.is-active { background: var(--color-ink); color: var(--color-on-primary); border-color: var(--color-ink); }
.period-custom { display: flex; align-items: flex-end; gap: var(--space-sm); flex-wrap: wrap; }
.period-custom label { font-size: 12px; color: var(--color-muted); display: block; margin-bottom: 4px; }
.period-custom input[type="date"] {
  padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--color-hairline);
  font-family: var(--font-family); font-size: 13px; color: var(--color-ink);
}

.proj-row.analytics-client-row { grid-template-columns: 1.6fr .8fr 1.3fr 1fr 1fr; }
.proj-row.analytics-personal-row { grid-template-columns: 1.8fr 1.3fr .6fr; }
.progress-cell { display: flex; align-items: center; gap: var(--space-sm); }
.progress-bar {
  width: 88px; height: 6px; background: var(--color-surface-strong);
  border-radius: var(--radius-full); overflow: hidden; flex-shrink: 0;
}
.progress-bar-fill { height: 100%; background: var(--color-ink); }
.progress-label { font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; min-width: 32px; }

/* ---------- вход ---------- */
.login-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-soft); padding: var(--space-lg);
}
.login-card {
  background: var(--color-canvas); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  width: 100%; max-width: 380px; padding: var(--space-xl) var(--space-lg);
}
.login-card .wordmark { text-align: center; display: block; margin-bottom: var(--space-lg); font-size: 22px; }
.login-field { margin-bottom: var(--space-base); }
.login-note { text-align: center; font-size: 13px; color: var(--color-muted); margin-top: var(--space-base); line-height: 1.5; }
.login-error { color: var(--color-error-text); font-size: 14px; text-align: center; margin-bottom: var(--space-base); }