/*
  Токены и базовые стили из docs/dizayn.md.
  Компоненты, которых этот этап ещё не использует (.car, .stat, .pill-варианты,
  .chip, .tabs, таблицы) — добавляются на тех этапах, где впервые понадобятся,
  чтобы не копить неиспользуемый CSS.
*/

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../vendor/fonts/IBMPlexSans-Regular.5aaadb685d3c.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../vendor/fonts/IBMPlexSans-SemiBold.51d76d33ef85.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../vendor/fonts/IBMPlexMono-Regular.b51685c998a0.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../vendor/fonts/IBMPlexMono-SemiBold.7d69bd02da7b.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #EDF1F4;  --surface: #FFFFFF;  --surface-2: #F5F8FA;  --surface-3: #E7EDF1;
  --line: #D5DEE5;    --line-2: #BCC9D2;
  --ink: #101A21;     --ink-2: #3C4B56;    --ink-3: #5F707C;    --row-hover: #F0F5F8;
  --accent: #0F4C5C;  --accent-2: #12697E; --accent-soft: #DEECF0;
  --ok: #1B6E45;      --ok-soft: #DCEEE4;
  --warn: #8A5206;    --warn-soft: #F7E9D2;
  --crit: #9B2A20;    --crit-soft: #F7E0DD;
  --idle-soft: #E3E8EC;
  --shadow: 0 1px 2px rgba(16,26,33,.06), 0 4px 14px rgba(16,26,33,.05);
  --radius: 6px;
  --f-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Этап 12c, раздел 1.1: за умовчанням світла — без цього нативні поля,
     скролбари й вибір файлу лишаються темними, якщо ОС у темному режимі,
     навіть коли людина явно обрала світлу тему в профілі. */
  color-scheme: light;
}
/* Этап 12, раздел 1.1: нейтральний темно-сірий (не синьо-чорний), токени
   з макета docs/makety/kabinet-makety.html — однакові у двох блоках
   нижче, щоб системна тема і явний вибір у профілі давали той самий
   результат. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #1B1E22; --surface: #24282D; --surface-2: #2B3036; --surface-3: #353B42;
    --line: #3B4249;   --line-2: #50585F;
    --ink: #EEF0F2;    --ink-2: #C9CFD5;   --ink-3: #A0A8B0;    --row-hover: #2B3036;
    --accent: #72C6D5; --accent-2: #8FD4E1; --accent-soft: #243B41;
    --ok: #7BCF9F;     --ok-soft: #1F3A2C;
    --warn: #EAB76C;   --warn-soft: #3D3119;
    --crit: #EE978C;   --crit-soft: #3F2622;
    --idle-soft: #353B42;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.28);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #1B1E22; --surface: #24282D; --surface-2: #2B3036; --surface-3: #353B42;
  --line: #3B4249;   --line-2: #50585F;
  --ink: #EEF0F2;    --ink-2: #C9CFD5;   --ink-3: #A0A8B0;    --row-hover: #2B3036;
  --accent: #72C6D5; --accent-2: #8FD4E1; --accent-soft: #243B41;
  --ok: #7BCF9F;     --ok-soft: #1F3A2C;
  --warn: #EAB76C;   --warn-soft: #3D3119;
  --crit: #EE978C;   --crit-soft: #3F2622;
  --idle-soft: #353B42;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.28);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Раздел 17, п.16а: без этого правила класс с display перебивает атрибут
   hidden — специфичность у них одинаковая, а наш файл подключается позже
   служебных стилей браузера. */
[hidden] { display: none !important; }

/* Этап 12c, раздел 1.4: нативний `input[type=file]` ховаємо так, щоб він
   лишався фокусованим і клавіатурою доступним (не `display:none`) —
   класичний «видно екранному читачу, не видно оком». Кнопка-лейбл
   поруч (`.file-btn label`) відкриває діалог вибору файлу як завжди. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.file-btn { display: inline-flex; }
/* Этап 12c, раздел 1.4: вибір фото в складеній формі (без автовідправки
   форми) — кнопка + назва вибраного файлу поруч. */
.file-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-field .file-field-name { font-size: 13px; color: var(--ink-3); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 14px/1.5 var(--f-sans);
}

h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; margin: 0; }

.num, time, .mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.messages {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.messages li {
  padding: 10px 14px; border-radius: var(--radius); font-size: 14px;
  border: 1px solid var(--line);
}
.messages li.success { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.messages li.error { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); }
.messages li.info { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.messages li.warning { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }

/* --- Компоненты, общие для «Кабінета» -------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  background: var(--idle-soft); color: var(--ink-2);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.p-ok { background: var(--ok-soft); color: var(--ok); }
.pill.p-idle { background: var(--idle-soft); color: var(--ink-3); }

/* Раздел 3.2 задания этапа 6: відмітка пункту чек-листа — колір стану
   (ОК/Не ОК/Н/З), не колір дії. Акцентний --accent лишається тільки
   для кнопок дій (btn-primary), не для стану. */
.answer-btn.selected.answer-ok {
  background: var(--ok-soft); border-color: var(--ok); color: var(--ok);
}
.answer-btn.selected.answer-not_ok {
  background: var(--crit-soft); border-color: var(--crit); color: var(--crit);
}
.answer-btn.selected.answer-na {
  background: var(--idle-soft); border-color: var(--line-2); color: var(--ink-3);
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); background: var(--surface-2); padding: 8px 12px;
}
table td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
/* Этап 8, раздел 9.3: підсвітка рядка під курсором і з фокусом усередині —
   одне правило, у всіх таблицях і списках кабінету (.list-row — рядок-блок
   там, де верстка не <table>, той самий ефект). */
table tbody tr:hover, table tbody tr:focus-within,
.list-row:hover, .list-row:focus-within { background: var(--surface-2); }
/* Этап 12c, раздел 5.1: дії рядка таблиці — текстові посилання в один
   рядок через « · », не кнопки-переростки (дизайн-аудит 1.5: рядок
   користувача був 150-220px високий, на екран влазило 3 людини).
   «·» — через ::after на самому елементі (не sibling-селектор), щоб
   однаково працювало й для <a>, і для <form> серед дій. */
.actions-cell { display: flex; align-items: center; flex-wrap: wrap; font-size: 13px; }
.actions-cell form { display: inline; }
.actions-cell > a:not(:last-child)::after,
.actions-cell > form:not(:last-child)::after {
  content: "·"; margin: 0 6px; color: var(--ink-3);
}
.row-link {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; font-size: 13px; color: var(--ink-2);
  cursor: pointer; text-decoration: none;
}
.row-link:hover { text-decoration: underline; }
.row-link.danger:hover { color: var(--crit); }

/* Этап 12c, раздел 5.2: «збережено» справа від поля перекладу — сіре,
   зникає саме за 2 секунди (чиста CSS-анімація, без JS і без кнопки
   «Зберегти» — збереження по hx-trigger="change"). */
@keyframes saved-indicator-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.saved-indicator {
  display: inline-block; margin-top: 4px; font-size: 12px; color: var(--ink-3);
  animation: saved-indicator-fade 2s ease forwards;
}

/* Этап 8, раздел 9.1: широкі таблиці можуть ширше 1200px — скролять
   горизонтально всередині тих самих меж, не розтягують сторінку. */
.scroll-x { overflow-x: auto; }

/* Этап 12c, раздел 1.1: одне правило для всіх текстових полів, select і
   textarea — скрізь, не лише всередині `.field` (дизайн-аудит 1.1/11.1:
   десять полів коментарів, з яких стильними були лише два — решта
   малював браузер своїм моноширинним шрифтом і білим фоном навіть у
   темній темі). Чекбокси/радіо/файл — свої правила (раздел 6).
   `:where()` — щоб саме це правило мало нульову специфічність: «Гараж»
   навмисно більший (раздел 5 dizayn.md, `.garage .field input` і т.п.)
   і має перебивати цей базовий вигляд без жодних хитрощів з порядком.
   Ширина 100% — для input/textarea завжди (коментар, примітка, нотатки
   мають розтягуватись на всю ширину контейнера). У `select` ширина
   навмисно НЕ 100%: нативні фільтри (Робота команди, перемикачі мови/
   теми, статус машини) стоять поруч одне з одним у рядку і повинні
   лишатись по вмісту — лише всередині `.field` (справжнє поле форми,
   не фільтр) select теж тягнеться на всю ширину. */
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  textarea
) {
  width: 100%;
}
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea
) {
  font: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
:where(.field select) { width: 100%; }
textarea { resize: vertical; }

/* Раздел 6.1 задания этапа 12c: чекбокси й радіо — один розмір і колір
   скрізь, підпис завжди поряд з контролем, не під ним. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.field .errors { color: var(--crit); font-size: 13px; margin-top: 4px; }
.required-mark { color: var(--crit); }

/* Раздел 6.2 задания этапа 12c: картки-радіо вибору шаблону чек-листа —
   контроль зліва, назва й короткий опис праворуч, акцентна рамка в
   активної картки. */
.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 6px;
  background: var(--surface);
  cursor: pointer;
}
.radio-card input[type="radio"], .radio-card input[type="checkbox"] { margin-top: 2px; }
.radio-card:has(input:checked) { border-color: var(--accent); }
.radio-card-title { font-size: 14px; }
.radio-card-desc { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

/* Раздел 7.2 / 8.3 задания этапа 6: інлайн-підтвердження дії. */
.inline-confirm-ask { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.inline-confirm-ask form { display: inline; }

/* Раздел 5.1 задания этапа 6: підсумок помилок форми над самою формою,
   щоб не гортати довгу форму в пошуках, що саме не так. */
.form-error-summary {
  background: var(--crit-soft); border: 1px solid var(--crit); color: var(--crit);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-size: 13px;
}
.form-error-summary ul { margin: 6px 0 0; padding-left: 18px; }
.form-error-summary a { color: var(--crit); text-decoration: underline; }

/* Раздел 5.4 задания этапа 6: форма картки машини — розділи з
   заголовками, поля в два стовпці. */
.form-group { margin-bottom: 24px; }
.form-group-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.field-wide { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* Раздел 6.3 задания этапа 12c: теги машини — не стовпець із 11 чекбоксів,
   а 2-3 колонки чипів. */
.chip-toggles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; }
@media (max-width: 640px) {
  .chip-toggles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Каркас «Кабінет» -------------------------------------------------- */

.office {
  display: grid;
  grid-template-columns: 212px 1fr;
  min-height: 100vh;
}

.office-side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 16px 12px;
}

.office-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; }
.office-brand .mark {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
}
.office-brand .name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.office-brand .sub { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

.office-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.office-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px; border-radius: var(--radius);
  color: var(--ink-2); text-decoration: none; font-size: 14px;
}
.office-nav a:hover { background: var(--surface-2); }
.office-nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.office-nav .count {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-3);
}

.office-whoami { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--line); }
.office-whoami .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px;
}
.office-whoami .name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.office-whoami .meta { font-size: 11px; color: var(--ink-3); }
.office-whoami .links { display: flex; gap: 10px; margin-top: 2px; }

/* Ссылка, оформленная как <button> внутри <form> (logout и подобное — POST) */
.link-btn {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; font-size: 11px; color: var(--accent);
  cursor: pointer; text-decoration: none;
}
.link-btn:hover { text-decoration: underline; }

/* Этап 12b, раздел 5.1: ім'я виконавця/автора — посилання на «Робота
   команди» з фільтром людини, але не акцентом — кольором тексту, що
   його оточує, підкреслення лише при наведенні. */
.person-link { color: inherit; text-decoration: none; }
.person-link:hover { text-decoration: underline; }

/* Этап 8, раздел 9.1: на широкому моніторі контент впритул до сайдбару
   розтягувався на всю ширину — текст і кнопки розʼїжджалися на півметра.
   Этап 12, раздел 1.2: ширина уточнена до 980px, контент притиснутий
   до меню зліва, не по центру — docs/etap-12-dizayn-kabinetu.md. */
.office-main {
  padding: 20px 24px 56px;
}
.content { max-width: 980px; margin: 0; display: flex; flex-direction: column; gap: 18px; }

/* Этап 8b, раздел 2.1: вибір мови й кнопка друку — липкі нагорі, коли
   прев'ю документа довге (багато розділів). */
.print-prepare-toolbar { position: sticky; top: 0; z-index: 5; }

/* Этап 12, раздел 1.3: .topbar/.crumbs — під тими самими іменами, що в
   макеті. Крошки батьківського екрана — тим самим шрифтом і кольором,
   що заголовок (раздел 0); «Кабінет» у крошках більше немає.
   Этап 12c, раздел 4.1: заголовок і права група (пошук+кнопка) не
   переносяться одне під одне — заголовок росте й переноситься сам
   усередині своєї колонки, права група лишається в один рядок завжди
   280px пошук + кнопка (дизайн-аудит 1.4: ширина пошуку «гуляла» від
   екрана до екрана, довгий заголовок ламав полосу в два рядки). */
.topbar { display: flex; align-items: flex-start; gap: 16px; flex-wrap: nowrap; }
.topbar-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.crumbs { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.crumbs a { color: var(--ink); }
.topbar h1 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.topbar-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
/* Раздел 12.2 этапа 3: пошук і «+ Задача» — у верхній полосі на всіх екранах. */
.topbar-search { flex: 0 0 280px; width: 280px; }
.topbar-search input {
  width: 100%; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
}
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .topbar-tools { flex-basis: 100%; }
  .topbar-search { flex: 1 1 auto; width: auto; }
  .topbar-tools .btn { min-height: 44px; }
  .topbar-search input { min-height: 44px; }
}

/* Этап 12c, раздел 7.1 (F04): на телефоні бокове меню більше не
   горизонтальна смуга з прокруткою (видно перші пункти, решта
   приховані) — панель поверх сторінки, що відкривається кнопкою
   «меню» в шапці й закривається вибором пункту (звичайний перехід на
   нову сторінку) або клацанням по тлу. */
.nav-toggle { display: none; }
/* display:none завжди, не лише ≤760px — інакше цей div, не маючи
   позиції в CSS-гріді `.office` (2 колонки, 3 прямих дитини), ламає
   авторозкладку: сайдбар і вміст розʼїжджаються по клітинках гріда
   (бачили на проді — «порожні екрани, лише сайдбар»). */
.nav-backdrop { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .35); }
.nav-backdrop.open { display: block; }
@media (max-width: 760px) {
  .office { grid-template-columns: 1fr; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px; padding: 0;
    border: 1px solid var(--line-2); border-radius: var(--radius);
    background: var(--surface); color: var(--ink); cursor: pointer;
  }
  .office-side {
    position: fixed; top: 0; left: 0; z-index: 50;
    width: 260px; max-width: 82vw; height: 100vh;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, .2);
  }
  .office-side.open { transform: translateX(0); }
  .office-nav { flex-direction: column; }
  .office-nav a { min-height: 44px; padding: 11px 10px; }
  .office-whoami { border-top: 1px solid var(--line); border-left: none; }
}

/* --- Пустая заглушка раздела -------------------------------------------- */

.stub {
  padding: 48px 24px; text-align: center; color: var(--ink-3);
}
.stub h2 { font-size: 16px; color: var(--ink); margin-bottom: 6px; }

/* Раздел 4.1 задания этапа 6: порожній розділ картки машини — один
   компактний рядок (заголовок + це + кнопка дії), без шапки таблиці. */
.section-empty { padding: 0 16px 12px; color: var(--ink-3); font-size: 13px; }

/* --- Каталог машин (этап 2, розділ 4 dizayn.md) --------------------------- */

.pill.s-work { background: var(--accent-soft); color: var(--accent); }
.pill.s-wait { background: var(--warn-soft); color: var(--warn); }
.pill.s-ready { background: var(--ok-soft); color: var(--ok); }
.pill.s-stop { background: var(--crit-soft); color: var(--crit); }
/* Этап 12: ті самі варіанти, іменами з макета (нові екрани лент). */
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.work { background: var(--accent-soft); color: var(--accent); }
.pill.crit { background: var(--crit-soft); color: var(--crit); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-2);
  font-size: 12.5px; text-decoration: none; background: none; cursor: pointer; font: inherit;
}
/* Этап 12: активний чип — колір --ink/--surface (не акцент), щоб не
   конкурувати з єдиною залитою кнопкою екрана (раздел 0). */
.chip.active, .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.chip .n { color: inherit; opacity: .65; margin-left: 4px; font-family: var(--f-mono); font-size: 11px; }

/* Раздел 6.1 задания этапа 6: «Інші статуси» — звичайний <summary>,
   що виглядає чипом, розкриває решту статусів під рядком. */
.other-statuses summary { cursor: pointer; }
.other-statuses > div { width: 100%; }

.tag {
  display: inline-block; padding: 2px 8px; margin: 4px 4px 0 0;
  background: var(--surface-2); border-radius: 4px;
  font-size: 11.5px; color: var(--ink-2);
}

.car-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.car {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
}
.car-status-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
/* Этап 8b, раздел 4.4 (фікс): значок документів — не <a> (картка сама —
   <a class="car">, вкладений <a> в <a> невалідний), а <span role="link"
   tabindex="0" data-href="…">, клік/Enter обробляє static/js/doc-badge.js —
   preventDefault+stopPropagation, щоб не спрацював клік картки під ним,
   і сам переходить за data-href. */
.car-doc-badge {
  display: inline-flex; align-items: center; color: var(--ink-3); cursor: pointer;
}
.car-doc-badge:hover, .car-doc-badge:focus-visible { color: var(--accent); }
.car-photo {
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, var(--surface-3) 8px, var(--surface-3) 16px);
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px;
  position: relative; overflow: hidden;
}
.car-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.car-photo .plate {
  background: rgba(0,0,0,.55); color: #fff; font-family: var(--f-mono);
  font-size: 11px; padding: 2px 6px; border-radius: 4px; z-index: 1;
}
/* Раздел 13 (перегляд 2026.09.15): заглушка без фото — монограма,
   так само як в аватарах людей (перша літера кодової назви/марки). */
.car-photo .monogram {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 600; color: var(--ink-3); opacity: .5;
}
.car-body { padding: 10px 12px 12px; }
.car-name { font-size: 14.5px; font-weight: 600; }
.car-make { font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.car-footer { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }

/* Раздел 13 (перегляд 2026.09.15): фото в шапці картки машини.
   Этап 8b, раздел 3.2: обкладинка — на всю ширину блока, 1280px-прев'ю
   без обрізання (object-fit:contain); штриховка — тільки фон заглушки,
   коли фото нема (.car-detail-photo без .has-photo). */
.car-detail-photo {
  border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.car-detail-photo:not(.has-photo) {
  aspect-ratio: 16 / 7; max-height: 320px;
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, var(--surface-3) 8px, var(--surface-3) 16px);
}
.car-detail-photo.has-photo { background: var(--surface-2); }
.car-detail-photo img { width: 100%; height: auto; max-height: 520px; object-fit: contain; display: block; }
.car-detail-photo .monogram { font-size: 48px; font-weight: 600; color: var(--ink-3); opacity: .5; }
.car-detail-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.car-detail-thumb { text-align: center; }
.car-detail-thumb img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; display: block;
}
.car-detail-thumb form { margin-top: 4px; }

/* Этап 12: «Керувати фото й документами» в шапці кабінету (раздел 2.3) —
   та сама верстка, інша назва класу (щоб не плутати з «Гаражем», де
   .car-detail-thumbs лишився старим блоком). */
.car-manage-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.car-manage-thumb { text-align: center; }
.car-manage-thumb img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; display: block;
}
.car-manage-thumb form { margin-top: 4px; }

/* Раздел 15, п.2: плашка архіву в картці машини. */
.car-archived-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--crit-soft); color: var(--crit); border: 1px solid var(--crit);
}

/* --- Этап 12: «одна стрічка» — компоненти з макета docs/makety/kabinet-makety.html,
   під тими самими іменами (docs/etap-12-dizayn-kabinetu.md, раздел 1.3) ---------- */

/* Этап 12c, раздел 2.1: білий контейнер з .sec-секціями — 20px по
   боках (не 0, як раніше) — заголовок секції й рядки стрічки більше
   не впираються у рамку (дизайн-аудит 1.2: «Фото»/«Коментарі» в картці
   задачі, шапки таблиць адміністрування). `.card` лишається 12/14. */
.sec { padding: 18px 20px 6px; border-top: 1px solid var(--line); }
.sec:first-child { border-top: 0; padding-top: 0; }
.sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.sec-h h3 { font-size: 15px; font-weight: 600; margin: 0; }
.sec-h .count { color: var(--ink-3); font-size: 13px; }
.sec-h .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.sec-h .more { font-size: 12.5px; }

.day {
  font: 600 13px var(--f-sans); color: var(--ink-2); letter-spacing: .03em;
  margin: 16px 0 4px; display: flex; align-items: center; gap: 10px;
}
.day::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Огляд: дві колонки (раздел 2.1). */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }

/* Рядок стрічки: іконка типу, заголовок, мета, права частина (раздел 1.3).
   Три розміри на екран (раздел 0): заголовок .t 15.5/600, мета .m 11.5 сірим. */
.ev { display: grid; grid-template-columns: 22px 1fr auto; gap: 0 10px; padding: 9px 8px; margin: 0 -8px; border-radius: var(--radius); align-items: start; }
.ev:hover, .ev:focus-within { background: var(--row-hover); }
.ev.plain { grid-template-columns: 1fr auto; }
.ic { width: 18px; height: 18px; border-radius: 4px; margin-top: 3px; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.ic.task { background: var(--accent-soft); color: var(--accent); }
.ic.done { background: var(--ok-soft); color: var(--ok); }
.ic.part { background: var(--warn-soft); color: var(--warn); }
.ic.chk { background: var(--idle-soft); color: var(--ink-2); }
.ic.rev { background: var(--warn-soft); color: var(--warn); }
.ic.car { background: var(--surface-3); color: var(--ink-2); }
.ic.comment { background: var(--idle-soft); color: var(--ink-2); }
.ev .t { font-weight: 600; font-size: 15.5px; line-height: 1.3; min-width: 0; }
.ev .m { color: var(--ink-3); font-size: 11.5px; line-height: 1.4; min-width: 0; margin-top: 3px; }
.ev .m span + span::before { content: "·"; margin: 0 6px; color: var(--line-2); }
.ev .r { text-align: right; align-self: center; display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

/* Этап 12b, раздел 1.2: текст коментаря — до трьох рядків, розгортається
   по кліку (дрібний vanilla, без нового файлу — один onclick). */
.ev .t.clamp {
  font-weight: 500; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ev .t.clamp.expanded { -webkit-line-clamp: unset; overflow: visible; }

.two { display: grid; grid-template-columns: 1fr 280px; gap: 24px; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.aside { padding: 0 20px 20px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-2); }
.card h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
/* «Хвости» 12c, п. 94: усередині .panel вкладені .card не використовуються —
   секції правої колонки (.aside) відмежовує лінія-роздільник, не власна
   рамка-коробка (та сама «коробка в коробці», що .sec проти .card у
   стрічці). Відступи колонки по боках = відступам .sec (20px). */
.aside-sec { padding: 14px 0 6px; border-top: 1px solid var(--line); }
.aside-sec:first-child { border-top: 0; padding-top: 0; }
.aside-sec-h { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.kv b { font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.thumbs { display: flex; gap: 4px; }
.thumbs i { width: 30px; height: 30px; border-radius: 4px; background: var(--surface-3); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 10px; color: var(--ink-3); font-style: normal; }

/* Плоска таблиця для великих списків (Ролі, Переклади) — шапка звичайним
   текстом, без капса; групи .grp 13/600 (раздел 1.3).
   Этап 12c, раздел 2.2: клітинки 10px 16px, перша й остання — 20px,
   вровень із картками поруч (було padding-left:0 — ім'я впиралось
   у край, дизайн-аудит 1.2). */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-3); padding: 10px 16px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14.5px; font-weight: 500; }
.tbl td.c, .tbl th.c { text-align: center; }
.tbl td.c { font-weight: 400; }
.tbl tbody tr:hover { background: var(--row-hover); }
.tbl .sub { display: block; color: var(--ink-3); font-size: 11.5px; font-weight: 400; margin-top: 3px; }
.tbl input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); }
.tbl .grp td { background: var(--surface-2); font: 600 13px var(--f-sans); color: var(--ink-2); letter-spacing: .03em; padding: 10px 16px; }
.tbl td:first-child, .tbl th:first-child { padding-left: 20px; }
.tbl td:last-child, .tbl th:last-child { padding-right: 20px; }

/* Каталог машин: шапка фото → ряд назва+значок+пілюля → марка·номер →
   підвал, прижатий до низу, однакової висоти (раздел 2.2). */
.cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.car .ph { aspect-ratio: 16 / 10; background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, var(--surface-3) 8px, var(--surface-3) 16px); position: relative; }
.car .ph.has { background: var(--surface-2); }
.car .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.car .b { padding: 10px 12px 12px; display: grid; gap: 2px; grid-template-rows: auto auto 1fr; flex: 1; }
.car .top { display: flex; align-items: center; gap: 8px; }
.car .top .pill { margin-left: auto; flex-shrink: 0; }
.car .n { font-weight: 600; font-size: 15px; line-height: 1.3; min-width: 0; }
.car .mk { font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.car .mk .pl { color: var(--ink-3); }
.car .doc { color: var(--ink-3); display: inline-flex; padding: 2px; border-radius: 4px; flex-shrink: 0; }
.car .doc:hover { color: var(--accent); background: var(--surface-2); }
.car .doc svg { width: 15px; height: 15px; }
.car .ft { font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 7px; align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Шапка картки машини (раздел 2.3). */
.carhead { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; margin-bottom: 20px; }
@media (max-width: 760px) { .carhead { grid-template-columns: 1fr; } }
.carhead .ph { aspect-ratio: 16 / 10; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.carhead .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carhead .ph .monogram { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 600; color: var(--ink-3); opacity: .5; }
.carhead .ph .plate { position: absolute; right: 8px; bottom: 8px; font: 500 11px var(--f-mono); background: var(--surface); border: 1px solid var(--line-2); padding: 1px 6px; border-radius: 3px; }
.carhead .ph .n { position: absolute; left: 8px; bottom: 8px; font: 11px var(--f-mono); color: var(--ink-3); }
.carhead h2 { font-size: 22px; font-weight: 600; margin: 0 0 2px; letter-spacing: -.01em; }
.carhead .mk { color: var(--ink-2); margin-bottom: 10px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px 18px; font-size: 13px; margin: 12px 0; }
.facts span { display: block; color: var(--ink-3); font-size: 11.5px; }
.facts b { font-weight: 500; font-family: var(--f-mono); font-size: 12.5px; }
.tagrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tagrow + .tagrow { margin-top: 6px; }
.tag.w { background: var(--warn-soft); color: var(--warn); }
/* «Хвости» 12c, п. 1: статус машини — один елемент замість чотирьох
   (пілюля + select + кнопка «Змінити статус»). Клік по пілюлі
   розкриває список статусів тим самим пілюля-стилем, вибір зберігає
   через HTMX і перемальовує шапку. Метки машини («Треба TÜV» тощо) —
   окремим рядком .tagrow під статусом (вже є своїм класом .tag). */
.status-pick { position: relative; display: inline-block; }
.status-pick summary { cursor: pointer; list-style: none; }
.status-pick summary::-webkit-details-marker { display: none; }
.status-pick-list {
  position: absolute; top: 100%; left: 0; z-index: 10; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 170px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
.status-pick-list form { display: block; }
.status-pick-list .pill {
  display: flex; width: 100%; border: none; margin: 0;
  cursor: pointer; font: inherit; text-align: left;
}
.status-pick-list .pill.active { outline: 2px solid var(--accent); outline-offset: -2px; }
.gal { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.gal i { width: 46px; height: 34px; border-radius: 4px; background: var(--surface-3); border: 1px solid var(--line-2); display: block; font-style: normal; }
.gal .doc { width: 46px; height: 34px; border-radius: 4px; border: 1px dashed var(--line-2); background: none; display: grid; place-items: center; font-size: 10px; color: var(--ink-3); text-decoration: none; }

/* Задача (раздел 2.4). */
.task-h { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.task-h h2 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.01em; flex: 1; min-width: 200px; }
.review-box { border: 1px solid var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; display: grid; gap: 10px; }
.review-box b { color: var(--warn); }
.review-box .actions .btn-primary { background: var(--ok); border-color: var(--ok); }
/* Этап 13, раздел 4.3: блок «Результат» — виділений акцентною рамкою,
   той самий каркас, що .review-box, інший колір (не попередження). */
.result-box { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; display: grid; gap: 10px; }
.result-box textarea { width: 100%; }
.garage .result-box textarea { min-height: 120px; }
.photos { display: flex; gap: 6px; flex-wrap: wrap; }
.photos i { width: 88px; height: 66px; border-radius: 4px; background: var(--surface-3); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 11px; color: var(--ink-3); font-style: normal; }
.comment { padding: 8px 0; border-top: 1px solid var(--line); }
.comment .m { font-size: 12px; color: var(--ink-3); }

/* --- Каркас «Гараж» ------------------------------------------------------ */

.garage {
  --ground: #E9EEF1; --surface: #FFFFFF; --surface-2: #F3F7F9; --surface-3: #E3EAEF;
  --line: #CFDAE1;   --line-2: #AFBFCA;  --ink: #0E1A21; --ink-2: #3A4B57; --ink-3: #697A87;
  --tap: 60px;
  background: var(--ground);
  min-height: 100vh;
  font-size: 17px;
}
@media (prefers-color-scheme: dark) {
  .garage:not([data-theme="light"]) {
    --ground: #10171C; --surface: #182127; --surface-2: #1E2931; --surface-3: #24313A;
    --line: #2C3B45; --line-2: #3B4D59; --ink: #E4EDF2; --ink-2: #AEBECA; --ink-3: #7E8F9C;
  }
}
.garage h1, .garage h2 { font-size: 24px; }
.garage .wrap { max-width: 1180px; margin: 0 auto; padding: 16px; }

.garage .bar {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.garage .bar .title { font-size: 20px; font-weight: 600; }
.garage .bar .date { font-family: var(--f-mono); color: var(--ink-3); }
.garage .whoami { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.garage .whoami-person { display: flex; align-items: center; gap: 10px; }
.garage .whoami-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.garage .whoami .avatar {
  /* 44px и 20px — dizayn.md, раздел 5: имя того, кто сейчас работает,
     должно читаться від двері гаража, а не мілкою строчкою (розділ 17, п.15). */
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft, #DEECF0); color: var(--accent, #0F4C5C);
  display: flex; align-items: center; justify-content: center; font-weight: 600;
  flex-shrink: 0;
}
.garage .whoami .name { font-weight: 600; font-size: 20px; }
.garage .whoami .role { font-size: 14px; color: var(--ink-3); }
/* «Хвости» 12c, п. 2.6: на вузькому екрані (телефон у гаражі) ім'я й
   роль лишаються в один рядок зі своєю групою, кнопки переносяться
   своїм власним рядком під ними — не хаотичний перенос по одному
   елементу. */
@media (max-width: 500px) {
  .garage .whoami { flex-wrap: wrap; }
  .garage .whoami-person { flex: 1 1 100%; }
  .garage .whoami-actions { flex: 1 1 100%; }
}

.garage .btn {
  min-height: var(--tap);
  border-radius: 10px;
  font-size: 17px;
}

.garage .back {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 16px; border-radius: 10px;
  color: var(--accent, #0F4C5C); text-decoration: none; font-weight: 600;
}

/* Розділ 17, п.19: постійна навігація «Сьогодні»/«Машини». */
.garage-nav {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.garage-nav a {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-size: 17px; font-weight: 600;
  text-decoration: none;
}
.garage-nav a.active {
  background: var(--accent, #0F4C5C);
  border-color: var(--accent, #0F4C5C);
  color: #fff;
}

.garage .field { margin-bottom: 0; }
.garage .field label {
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}
/* Этап 12c, раздел 1.1: той самий «великий гараж» вигляд — на всі поля
   в гаражі, не лише обгорнуті в `.field` (аудит 1.1: коментар у пункті
   чек-листа й деінде лишався маленьким браузерним полем, бо `.field`
   навколо нього нема). */
.garage input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.garage select,
.garage textarea {
  min-height: 60px; padding: 0 16px;
  border-radius: 10px; font-size: 18px;
}
.garage textarea { padding: 12px 16px; min-height: 96px; }

/* Розділ 8 етапу 2: список машин у «Гаражі» — великі рядки замість плиток. */
.garage-car-list { display: flex; flex-direction: column; gap: 10px; }
.garage-car-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--tap); padding: 10px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: inherit;
}
.garage-car-row .name { font-size: 17px; font-weight: 600; }
.garage-car-row .meta { font-size: 13px; color: var(--ink-3); }

/* Розділ 15, п.4: «Машини в гаражі» на «Сьогодні» — великими картками,
   на відміну від рядків у вкладці «Машини». */
.garage-car-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.garage-car-card {
  display: block; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: inherit;
}
.garage-car-card .name { font-size: 19px; font-weight: 600; }
.garage-car-card .meta { font-size: 14px; color: var(--ink-3); margin: 4px 0 10px; }
/* Раздел 8.2 задания этапа 6: той самий компонент і як вибір машини
   («+ Заявка») — тепер не лише посилання, а й <label> з радіо. */
label.garage-car-card { cursor: pointer; }
label.garage-car-card input[type="radio"] { margin-bottom: 8px; }
label.garage-car-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* Раздел 9, коміт 6 етапу 3: картки задач на «Сьогодні». */
.garage-task-card {
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.garage-task-card .name { font-size: 17px; font-weight: 600; }
.garage-task-card .meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

.garage-car-photo {
  aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; margin-bottom: 12px;
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, var(--surface-3) 8px, var(--surface-3) 16px);
}
.garage-car-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.garage-history-item {
  padding: 12px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 8px; font-size: 15px;
}
.garage-history-item .when { color: var(--ink-3); font-size: 13px; font-family: var(--f-mono); }

/* Розділ 17, п.15: попередження перед автоповерненням на «Хто я». */
.session-warning {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px; border-radius: 10px;
  background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.session-warning span { font-weight: 600; }

/* Крупная кнопка действия («Гараж», раздел 5) */
.big {
  min-height: 60px;
  border-radius: 10px;
  font-size: 17px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.big.primary { background: var(--accent, #0F4C5C); border-color: var(--accent, #0F4C5C); color: #fff; }
.big.ghost { background: transparent; border-color: var(--accent, #0F4C5C); color: var(--accent, #0F4C5C); }
.big.neutral { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }
/* Раздел 3.2 задания этапа 6: те саме, що .answer-btn, для гаражних
   великих кнопок відмітки — колір стану, не колір дії. */
.big.answer-ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.big.answer-not_ok { background: var(--crit-soft); border-color: var(--crit); color: var(--crit); }
.big.answer-na { background: var(--idle-soft); border-color: var(--line-2); color: var(--ink-3); }

.garage .empty {
  padding: 48px 16px; text-align: center; color: var(--ink-3);
}
/* Этап 12c, раздел 3.5: порожні секції «Чек-листи/Історія/Деталі» в
   картці машини — одним рядком з дією, не 100px порожнечі центром. */
.garage .empty.compact {
  padding: 10px 0; text-align: left; font-size: 15px;
}

/* Этап 8, раздел 1.3/1.4: індикатор запиту в польоті й м'яка підсвітка
   наступного пункту після відповіді (без силового скролу). */
.htmx-request { opacity: .7; }
.checklist-item.just-highlighted { animation: checklist-item-highlight 1.2s ease-out; }
@keyframes checklist-item-highlight {
  from { background: var(--accent-soft, var(--surface-2)); }
  to { background: var(--surface); }
}

/* Этап 8, фікс «коментар без перемальовки»: індикатор «збережено» біля
   поля коментаря — гасне сам, без JS-таймера, кожен OOB-свап запускає
   анімацію заново (новий DOM-вузол). */
.comment-state { font-size: inherit; color: var(--ink-3); }
.comment-state-flash { animation: comment-state-fade 2s ease-out forwards; }
@keyframes comment-state-fade {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* «Сьогодні»: заголовок раздела мелким капсом с линией, группы задач в ряд —
   схлопываются в столбец на узких экранах (раздел 17, пункт 14). */
.garage .section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); padding-bottom: 6px; margin: 24px 0 12px;
  border-bottom: 1px solid var(--line);
}
.garage .section-title:first-child { margin-top: 0; }
.garage .task-groups { display: flex; gap: 16px; flex-wrap: wrap; }
.garage .task-groups > div { flex: 1; min-width: 200px; }
.garage .task-groups h3 { font-size: 14px; margin: 0 0 8px; color: var(--ink-2); }
.garage .task-groups .empty { padding: 16px; text-align: left; font-size: 14px; }

/* --- «Хто я»: карточки людей і PIN-клавіатура --------------------------- */

.people-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.person-card {
  min-height: 150px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; cursor: pointer; text-decoration: none; color: inherit;
}
.person-card .avatar {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600;
}
.person-card .name { font-size: 20px; font-weight: 600; text-align: center; }
.person-card .role { font-size: 14px; color: var(--ink-3); }
.person-card.selected {
  border-color: var(--accent, #0F4C5C);
  background: var(--accent-soft, #DEECF0);
}

.pin-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
}
.pin-panel .info { flex: 1; min-width: 200px; }
.pin-panel .info h2 { margin-bottom: 4px; }
.pin-panel .info p { color: var(--ink-3); margin: 0; }

.pin-dots { display: flex; gap: 10px; margin-top: 14px; }
.pin-dots .dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-2); background: transparent;
}
.pin-dots .dot.filled { background: var(--accent, #0F4C5C); border-color: var(--accent, #0F4C5C); }

.pin-keypad {
  display: grid; grid-template-columns: repeat(3, 74px); gap: 8px;
}
.pin-keypad button {
  height: 64px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-family: var(--f-mono); font-size: 24px; color: var(--ink);
  cursor: pointer;
}
.pin-keypad button:active,
.pin-keypad button.pressed { background: var(--accent-soft, #DEECF0); }
.pin-keypad .erase { grid-column: span 2; font-size: 15px; font-family: var(--f-sans); }

@media (max-width: 480px) {
  .pin-panel { flex-direction: column; align-items: stretch; }
  .pin-keypad { grid-template-columns: repeat(3, 1fr); }
}


/* --- Задачі (этап 3) ------------------------------------------------------ */

.priority-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.priority-dot.p-high { background: var(--crit); }
.priority-dot.p-mid { background: var(--warn); }
.priority-dot.p-normal { background: var(--ink-3); }

.task-overdue { color: var(--crit); font-weight: 600; }
.task-today { color: var(--warn); font-weight: 600; }
/* «Хвости» 12c, п. 2.4: клас використовувався по всьому templates/
   (7 шаблонів) без жодного правила — приглушений текст (майбутня дата,
   службові підписи) насправді лишався звичайного кольору. */
.muted { color: var(--ink-3); }

.task-tabs { display: flex; gap: 16px; margin-bottom: 16px; font-size: 13px; flex-wrap: wrap; }
.task-tabs a { color: var(--ink-2); text-decoration: none; }
.task-tabs a.active { font-weight: 600; color: var(--accent); }

/* Раздел 10, п.1 этапа 3: «Скасувати» одразу після закриття задачі. */
.just-closed-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius);
  background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok);
}

/* --- Віджет дати (этап 5, раздел 8) --------------------------------------- */

.date-field { display: inline-flex; align-items: center; gap: 6px; }
input.date-field-text { font-family: var(--f-mono); }
.date-field-btn { padding: 0 10px; font-size: 15px; line-height: 1; }
input.date-field-hidden,
.garage input.date-field-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  border: 0; opacity: 0; pointer-events: none;
}

/* --- Показники «Очікуємо» (этап 5, раздел 7) ------------------------------ */

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; }
.stat {
  flex: 1; min-width: 140px; text-align: center; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.stat .num { font-size: 32px; font-weight: 600; font-family: var(--f-mono); }
.stat .label { font-size: 12px; color: var(--ink-3); margin-top: 4px; }