/* Палитра. Раньше цвета стояли прямо в правилах, и тёмной темы быть не могло:
   поменять пришлось бы двести значений в трёх тысячах строк. Теперь каждый цвет
   назван по своей роли в цветовом круге — семейство тона и светлота в процентах,
   `--n-` для нейтральных, — а правила ссылаются на имя.

   Светлая тема здесь — ровно то, что было: значения переехали в переменные без
   единого изменения. Тёмная посчитана из неё в OKLCH: тон сохраняется, светлота
   переворачивается, насыщенность подгоняется под тёмный фон. Тени переворота не
   знают — тень остаётся тенью в любой теме.

   Тему выбирает человек в настройках; `data-theme` на `<html>` ставится до
   первой отрисовки, поэтому светлая вспышка перед тёмной страницей не мелькает.
   Без выбора работает системная настройка. */
:root {
  color-scheme: light;
  /* Цвет знака не переворачивается вместе с темой: логотип — не интерфейс. */
  --brand-on-hanko: #fff;
  --blue-45: #47566b;
  --blue-46: #4a5b6b;
  --blue-54: #1c68d4;
  --blue-54-2: #62707e;
  --blue-54-a16: rgba(28, 104, 212, 0.16);
  --blue-61: #0891b2;
  --blue-63: #3f8fd6;
  --blue-71: #94a3b8;
  --blue-78: #8fb6ff;
  --blue-83: #a9c6ff;
  --blue-84: #b6c8ff;
  --blue-87: #9fdcff;
  --blue-88: #8ae7ff;
  --blue-92: #b6f0ff;
  --blue-92-2: #dde4ec;
  --blue-95: #d9f2ff;
  --blue-96: #e7f5f9;
  --n-0: #000000;
  --n-0-a27: rgba(0, 0, 0, 0.267);
  --n-0-a40: rgba(0, 0, 0, 0.4);
  --n-23-a22: rgba(31, 29, 27, 0.22);
  --n-23-a28: rgba(31, 29, 27, 0.28);
  --n-25: #222222;
  --n-25-a8: rgba(34, 34, 34, 0.08);
  --pop-tile: rgba(34, 34, 34, 0.06);
  --n-45: #555555;
  --n-52: #6a6a6a;
  --n-54: #716d6a;
  --n-62: #8a8681;
  --n-63: #888888;
  --n-66: #96918e;
  --n-68: #999999;
  --n-72: #a8a5a2;
  --n-76: #b3b0ad;
  --n-78: #b9b5b2;
  --n-79: #bdbab7;
  --n-81: #c4c1be;
  --n-82: #c9c4be;
  --n-85: #cfcfcd;
  --n-87: #d7d3d0;
  --n-87-2: #d4d4d2;
  --n-87-3: #d9d4d1;
  --n-88: #d7d7d4;
  --n-91: #e2dfdc;
  --n-92: #e3e3e1;
  --n-93: #e9e9e7;
  --n-94: #ececeb;
  --n-94-2: #e8e9f1;
  --n-94-3: #eceaf2;
  --n-96: #f2f0ee;
  --n-97: #f1f4f7;
  --n-97-2: #eef7f3;
  --n-97-3: #eef8f5;
  --n-97-4: #eef7f4;
  --n-98: #fff6f8;
  --n-98-2: #f3fbf8;
  --n-98-3: #fff8f9;
  --n-98-4: #f7f7f6;
  --n-100: #ffffff;
  --n-100-2: #fffdfd;
  --n-100-a0: rgba(255, 255, 255, 0);
  --n-100-a25: rgba(255, 255, 255, 0.25);
  --n-100-a55: rgba(255, 255, 255, 0.55);
  --n-100-a72: rgba(255, 255, 255, 0.72);
  --n-100-a75: rgba(255, 255, 255, 0.75);
  --n-100-a90: rgba(255, 255, 255, 0.9);
  --orange-21-a7: rgba(36, 20, 10, 0.071);
  --orange-21-a10: rgba(36, 20, 10, 0.102);
  --orange-51: #905914;
  --orange-54: #c33434;
  --orange-56: #b45309;
  --orange-97: #fdf4ec;
  --pink-85: #ffb3e2;
  --pink-89: #ffc9ec;
  --pink-96: #fdeef5;
  --red-49: #b11638;
  --red-49-2: #a42b4a;
  --red-49-3: #934055;
  --red-50: #b3243f;
  --red-52: #b91c5b;
  --red-54: #c9155f;
  --red-60: #e11d74;
  --red-66: #ff385c;
  --red-74: #e08fa2;
  --red-83: #f1b5c1;
  --red-88: #f4c9d4;
  --red-90: #f0d8df;
  --red-97: #fdf0f4;
  --red-97-2: #fdf1f1;
  --teal-49: #087155;
  --teal-51: #11775e;
  --teal-54: #2f7f68;
  --violet-41: #4a4a58;
  --violet-46: #56556a;
  --violet-48: #5b5a6d;
  --violet-54: #7c3aed;
  --violet-54-a16: rgba(124, 58, 237, 0.16);
  --violet-56: #6f6ab0;
  --violet-58-a40: rgba(120, 110, 190, 0.4);
  --violet-58-a50: rgba(120, 110, 190, 0.5);
  --violet-59: #8267d8;
  --violet-60-a10: rgba(120, 120, 180, 0.1);
  --violet-60-a12: rgba(120, 120, 180, 0.12);
  --violet-63: #6f7ce6;
  --violet-64: #8b89a0;
  --violet-65: #8b7fe8;
  --violet-67-a22: rgba(150, 140, 200, 0.22);
  --violet-67-a30: rgba(150, 140, 200, 0.3);
  --violet-69: #9c9aad;
  --violet-70: #9d9bad;
  --violet-71-a16: rgba(160, 150, 220, 0.16);
  --violet-74: #b795ff;
  --violet-81: #cbb2ff;
  --violet-88: #e3ccff;
  --violet-89: #d7d8e4;
  --violet-91: #e2e0ea;
  --violet-96: #f3edfc;
  --violet-96-2: #f3f2fc;
  --violet-96-3: #eef1fb;
  --violet-96-4: #f5f0fa;
  --violet-97-a25: rgba(244, 244, 255, 0.25);
  --violet-98: #f8f6ff;
  --violet-98-a0: rgba(248, 246, 255, 0);
  --yellow-51: #8a5a12;
  --yellow-91: #eddfc6;
  --yellow-96: #fdf3c7;
  --yellow-98: #fff9eb;
  --yellow-99: #fffaf1;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --blue-45: #9cacc2;
  --blue-46: #99abbc;
  --blue-54: #599fff;
  --blue-54-2: #94a2b0;
  --blue-54-a16: rgba(89, 159, 255, 0.16);
  --blue-61: #3da7c7;
  --blue-63: #519bdf;
  --blue-71: #818fa2;
  --blue-78: #6180ba;
  --blue-83: #6980ad;
  --blue-84: #717ea9;
  --blue-87: #5787a2;
  --blue-88: #3f8c9f;
  --blue-92: #00242d;
  --blue-92-2: #121f2e;
  --blue-95: #002231;
  --blue-96: #01232b;
  --n-0: #000000;
  --n-0-a27: rgba(0, 0, 0, 0.36);
  --n-0-a40: rgba(0, 0, 0, 0.54);
  --n-23-a22: rgba(31, 29, 27, 0.297);
  --n-23-a28: rgba(31, 29, 27, 0.378);
  --n-25: #eaeaea;
  --n-25-a8: rgba(34, 34, 34, 0.108);
  --pop-tile: rgba(255, 255, 255, 0.07);
  --n-45: #d6d6d6;
  --n-52: #bebebe;
  --n-54: #bebab6;
  --n-62: #a09c97;
  --n-63: #9a9a9a;
  --n-66: #8d8886;
  --n-68: #7e7e7e;
  --n-72: #6e6b68;
  --n-76: #5d5b58;
  --n-78: #565350;
  --n-79: #4f4d4a;
  --n-81: #484543;
  --n-82: #46423d;
  --n-85: #3b3b39;
  --n-87: #3a3734;
  --n-87-2: #373736;
  --n-87-3: #393533;
  --n-88: #353533;
  --n-91: #302e2c;
  --n-92: #2c2c2a;
  --n-93: #282826;
  --n-94: #252525;
  --n-94-2: #26272c;
  --n-94-3: #26252b;
  --n-96: #232220;
  --n-97: #1e2022;
  --n-97-2: #1b211e;
  --n-97-3: #19211f;
  --n-97-4: #1b211f;
  --n-98: #211b1c;
  --n-98-2: #181e1c;
  --n-98-3: #1f1a1b;
  --n-98-4: #1e1e1d;
  --n-100: #181818;
  --n-100-2: #1a1919;
  --n-100-a0: rgba(24, 24, 24, 0);
  --n-100-a25: rgba(24, 24, 24, 0.25);
  --n-100-a55: rgba(24, 24, 24, 0.55);
  --n-100-a72: rgba(24, 24, 24, 0.72);
  --n-100-a75: rgba(24, 24, 24, 0.75);
  --n-100-a90: rgba(24, 24, 24, 0.9);
  --orange-21-a7: rgba(36, 20, 10, 0.096);
  --orange-21-a10: rgba(36, 20, 10, 0.138);
  --orange-51: #ce965c;
  --orange-54: #f86e66;
  --orange-56: #e2824a;
  --orange-97: #2a1a0a;
  --pink-85: #a56a8f;
  --pink-89: #2d1426;
  --pink-96: #2e1422;
  --red-49: #ff707d;
  --red-49-2: #f47b90;
  --red-49-3: #e0899b;
  --red-50: #fb717e;
  --red-52: #fc6995;
  --red-54: #ff5e8f;
  --red-60: #fe4e8f;
  --red-66: #fc4361;
  --red-74: #bb7183;
  --red-83: #a0717b;
  --red-88: #97767f;
  --red-90: #30131e;
  --red-97: #2d161e;
  --red-97-2: #2c1718;
  --teal-49: #68b99b;
  --teal-51: #64b69c;
  --teal-54: #68b199;
  --violet-41: #acadbc;
  --violet-46: #a7a7bd;
  --violet-48: #a6a5b9;
  --violet-54: #aa78ff;
  --violet-54-a16: rgba(170, 120, 255, 0.16);
  --violet-56: #9895db;
  --violet-58-a40: rgba(152, 144, 222, 0.4);
  --violet-58-a50: rgba(152, 144, 222, 0.5);
  --violet-59: #9d85f3;
  --violet-60-a10: rgba(146, 147, 206, 0.1);
  --violet-60-a12: rgba(146, 147, 206, 0.12);
  --violet-63: #7e8cf2;
  --violet-64: #9492a8;
  --violet-65: #8e84e7;
  --violet-67-a22: rgba(146, 137, 193, 0.22);
  --violet-67-a30: rgba(146, 137, 193, 0.3);
  --violet-69: #8f8d9f;
  --violet-70: #8e8d9d;
  --violet-71-a16: rgba(141, 131, 196, 0.16);
  --violet-74: #9474d6;
  --violet-81: #8873b0;
  --violet-88: #241731;
  --violet-89: #1b1b32;
  --violet-91: #1f1b2d;
  --violet-96: #231731;
  --violet-96-2: #1e1b2d;
  --violet-96-3: #181d2f;
  --violet-96-4: #23192c;
  --violet-97-a25: rgba(29, 27, 47, 0.25);
  --violet-98: #1f1b2b;
  --violet-98-a0: rgba(31, 27, 43, 0);
  --yellow-51: #ca995d;
  --yellow-91: #2a1b00;
  --yellow-96: #251e00;
  --yellow-98: #281c00;
  --yellow-99: #261c0a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --blue-45: #9cacc2;
    --blue-46: #99abbc;
    --blue-54: #599fff;
    --blue-54-2: #94a2b0;
    --blue-54-a16: rgba(89, 159, 255, 0.16);
    --blue-61: #3da7c7;
    --blue-63: #519bdf;
    --blue-71: #818fa2;
    --blue-78: #6180ba;
    --blue-83: #6980ad;
    --blue-84: #717ea9;
    --blue-87: #5787a2;
    --blue-88: #3f8c9f;
    --blue-92: #00242d;
    --blue-92-2: #121f2e;
    --blue-95: #002231;
    --blue-96: #01232b;
    --n-0: #000000;
    --n-0-a27: rgba(0, 0, 0, 0.36);
    --n-0-a40: rgba(0, 0, 0, 0.54);
    --n-23-a22: rgba(31, 29, 27, 0.297);
    --n-23-a28: rgba(31, 29, 27, 0.378);
    --n-25: #eaeaea;
    --n-25-a8: rgba(34, 34, 34, 0.108);
    --pop-tile: rgba(255, 255, 255, 0.07);
    --n-45: #d6d6d6;
    --n-52: #bebebe;
    --n-54: #bebab6;
    --n-62: #a09c97;
    --n-63: #9a9a9a;
    --n-66: #8d8886;
    --n-68: #7e7e7e;
    --n-72: #6e6b68;
    --n-76: #5d5b58;
    --n-78: #565350;
    --n-79: #4f4d4a;
    --n-81: #484543;
    --n-82: #46423d;
    --n-85: #3b3b39;
    --n-87: #3a3734;
    --n-87-2: #373736;
    --n-87-3: #393533;
    --n-88: #353533;
    --n-91: #302e2c;
    --n-92: #2c2c2a;
    --n-93: #282826;
    --n-94: #252525;
    --n-94-2: #26272c;
    --n-94-3: #26252b;
    --n-96: #232220;
    --n-97: #1e2022;
    --n-97-2: #1b211e;
    --n-97-3: #19211f;
    --n-97-4: #1b211f;
    --n-98: #211b1c;
    --n-98-2: #181e1c;
    --n-98-3: #1f1a1b;
    --n-98-4: #1e1e1d;
    --n-100: #181818;
    --n-100-2: #1a1919;
    --n-100-a0: rgba(24, 24, 24, 0);
    --n-100-a25: rgba(24, 24, 24, 0.25);
    --n-100-a55: rgba(24, 24, 24, 0.55);
    --n-100-a72: rgba(24, 24, 24, 0.72);
    --n-100-a75: rgba(24, 24, 24, 0.75);
    --n-100-a90: rgba(24, 24, 24, 0.9);
    --orange-21-a7: rgba(36, 20, 10, 0.096);
    --orange-21-a10: rgba(36, 20, 10, 0.138);
    --orange-51: #ce965c;
    --orange-54: #f86e66;
    --orange-56: #e2824a;
    --orange-97: #2a1a0a;
    --pink-85: #a56a8f;
    --pink-89: #2d1426;
    --pink-96: #2e1422;
    --red-49: #ff707d;
    --red-49-2: #f47b90;
    --red-49-3: #e0899b;
    --red-50: #fb717e;
    --red-52: #fc6995;
    --red-54: #ff5e8f;
    --red-60: #fe4e8f;
    --red-66: #fc4361;
    --red-74: #bb7183;
    --red-83: #a0717b;
    --red-88: #97767f;
    --red-90: #30131e;
    --red-97: #2d161e;
    --red-97-2: #2c1718;
    --teal-49: #68b99b;
    --teal-51: #64b69c;
    --teal-54: #68b199;
    --violet-41: #acadbc;
    --violet-46: #a7a7bd;
    --violet-48: #a6a5b9;
    --violet-54: #aa78ff;
    --violet-54-a16: rgba(170, 120, 255, 0.16);
    --violet-56: #9895db;
    --violet-58-a40: rgba(152, 144, 222, 0.4);
    --violet-58-a50: rgba(152, 144, 222, 0.5);
    --violet-59: #9d85f3;
    --violet-60-a10: rgba(146, 147, 206, 0.1);
    --violet-60-a12: rgba(146, 147, 206, 0.12);
    --violet-63: #7e8cf2;
    --violet-64: #9492a8;
    --violet-65: #8e84e7;
    --violet-67-a22: rgba(146, 137, 193, 0.22);
    --violet-67-a30: rgba(146, 137, 193, 0.3);
    --violet-69: #8f8d9f;
    --violet-70: #8e8d9d;
    --violet-71-a16: rgba(141, 131, 196, 0.16);
    --violet-74: #9474d6;
    --violet-81: #8873b0;
    --violet-88: #241731;
    --violet-89: #1b1b32;
    --violet-91: #1f1b2d;
    --violet-96: #231731;
    --violet-96-2: #1e1b2d;
    --violet-96-3: #181d2f;
    --violet-96-4: #23192c;
    --violet-97-a25: rgba(29, 27, 47, 0.25);
    --violet-98: #1f1b2b;
    --violet-98-a0: rgba(31, 27, 43, 0);
    --yellow-51: #ca995d;
    --yellow-91: #2a1b00;
    --yellow-96: #251e00;
    --yellow-98: #281c00;
    --yellow-99: #261c0a;
  }
}
:root {
  --ink: var(--n-25);
  --muted: var(--n-52);
  --line: var(--n-93);
  --paper: var(--n-100);
  --wash: var(--n-100);
  --coral: var(--red-66);
  --pink: var(--red-97);
  --green: var(--teal-51);
  --capture-progress-border: var(--red-90);
  --focus: var(--blue-54);
  --tint-late: var(--n-98);
  --tint-late-line: var(--red-88);
  --tint-wait: var(--yellow-99);
  --tint-wait-line: var(--yellow-91);
  --hairline: var(--n-96);
  /* палитра типов записи — «Конфетная» */
  --type-auto: var(--red-60);
  --type-todo: var(--violet-54);
  --type-outcome: var(--blue-61);
  --type-note: var(--blue-71);
  /* встречи в отчётах: янтарный из общей шкалы, в тёмной теме светлеет сам */
  --type-meeting: var(--orange-56);
  --tint-auto: var(--pink-96);
  --tint-todo: var(--violet-96);
  --tint-outcome: var(--blue-96);
  --tint-note: var(--n-97);
}
* {
  box-sizing: border-box;
}
/* Атрибут hidden перебивался нашими display: grid/flex, из-за чего скрытые
   поля формы и селектор модели оставались видимыми. */
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  background: var(--wash);
  color: var(--ink);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.45;
}
/* Поля верхней строки: на широком экране её содержимое — колонка в 1280px по
   центру окна. Страница, которой нужна та же ширина (доска), берёт это же
   поле, а не подгоняет своё числом. */
:root {
  --header-gutter: max(24px, calc((100vw - 1280px) / 2));
}
header {
  min-height: 72px;
  background: var(--n-100);
  border-bottom: 1px solid var(--n-94);
  display: flex;
  align-items: center;
  padding: 0 var(--header-gutter);
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  text-decoration: none;
  color: var(--ink);
  font-size: 18px;
}
.brand-mark {
  width: 25px;
  height: 25px;
  flex: none;
}
/* Логотип «Кизуна»: тории-ханко — белый знак на красной печати. */
.brand-mark .torii,
.brand-mark .roof {
  /* Знак темы не знает: печать всегда красная, тории на ней всегда белые. */
  stroke: var(--brand-on-hanko);
}
.brand-word {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.2px;
}
/* Разделы — док, как в macOS: плавает внизу по центру, плитки-приложения с
   цветной заливкой. Увеличение под курсором и подпрыгивание — только transform,
   в потоке ничего не сдвигается. Ссылки остаются ссылками с текстом-названием:
   подпись-пузырь — сам текст ссылки, визуально скрытый до наведения. */
header > .header-tail {
  margin-left: auto;
}
:root {
  --dockbg: rgba(255, 255, 255, 0.72);
  --dockline: rgba(0, 0, 0, 0.08);
  --dock-badge: #ff3b30;
  --dock-tip-bg: #222222;
  --dock-tip-fg: #ffffff;
  --dock-done-b: #e6f4ea; --dock-done-f: #2f8f4e;
  --dock-today-b: #fff0da; --dock-today-f: #d9730d;
  --dock-board-b: #e3eeff; --dock-board-f: #1c68d4;
  --dock-calendar-b: #ffffff; --dock-calendar-f: #222222; --dock-cal-band: #e5483f;
  --dock-notes-b: #fff4c2; --dock-notes-f: #a87f00;
}
:root[data-theme='dark'] {
  --dockbg: rgba(24, 24, 24, 0.72);
  --dockline: rgba(255, 255, 255, 0.1);
  --dock-tip-bg: #eaeaea;
  --dock-tip-fg: #181818;
  --dock-done-b: #1c2e23; --dock-done-f: #64b69c;
  --dock-today-b: #352718; --dock-today-f: #e0904a;
  --dock-board-b: #14223a; --dock-board-f: #599fff;
  --dock-calendar-b: #2a2a2a; --dock-calendar-f: #eaeaea; --dock-cal-band: #c7443c;
  --dock-notes-b: #332c14; --dock-notes-f: #d9b84a;
}
header > nav.dock {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 13px;
  border-radius: 22px;
  background: var(--dockbg);
  border: 1px solid var(--dockline);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}
.dock-item {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  display: block;
}
.dock-item > a {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--b);
  color: var(--f);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  transform: translateX(var(--tx, 0)) scale(var(--s, 1));
  transform-origin: 50% 100%;
  transition: transform 0.15s ease, filter 0.15s ease;
}
:root[data-theme='dark'] .dock-item > a {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dock-item > a svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Число дня в значке календаря — из data-day, псевдоэлементом: в текст ссылки оно не попадает. */
.dock-item > a[data-day]::before {
  content: attr(data-day);
  position: absolute;
  left: 0;
  right: 0;
  /* Число стоит в нижней половине листка, между полосой и нижним краем, а не на нём. */
  top: 50%;
  margin-top: -2px;
  text-align: center;
  font: 700 8px/1 system-ui, sans-serif;
  pointer-events: none;
}
.dock-item > a svg .band {
  fill: var(--dock-cal-band);
  stroke: none;
}
.dock-item[data-k='done'] { --b: var(--dock-done-b); --f: var(--dock-done-f); }
.dock-item[data-k='today'] { --b: var(--dock-today-b); --f: var(--dock-today-f); }
.dock-item[data-k='board'] { --b: var(--dock-board-b); --f: var(--dock-board-f); }
.dock-item[data-k='calendar'] { --b: var(--dock-calendar-b); --f: var(--dock-calendar-f); }
.dock-item[data-k='notes'] { --b: var(--dock-notes-b); --f: var(--dock-notes-f); }
.dock-item > a.active {
  filter: saturate(1.3) brightness(1.04);
}
.dock-item > a.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--ink);
}
.dock-item > a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.dock-item > a.bounce {
  animation: dock-bounce 0.35s ease;
}
@keyframes dock-bounce {
  0%, 100% { translate: 0 0; }
  40% { translate: 0 -10px; }
}
/* Подпись-пузырь: текст ссылки, вынесенный над плиткой. */
.dock-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--dock-tip-bg);
  color: var(--dock-tip-fg);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.dock-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--dock-tip-bg);
}
.dock-item:hover .dock-label,
.dock-item > a:focus-visible .dock-label {
  opacity: 1;
}
.dock-item:hover > a .dock-label {
  bottom: calc(100% + 10px);
}
/* Бейдж живёт внутри плитки, поэтому растёт и прыгает вместе с ней. */
.dock-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 1;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--dock-badge);
  color: #fff;
  font: 700 10px/18px system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
}
/* Увеличение под курсором: плитка под мышью 1.35, соседи 1.15 и сдвиг. */
@media (hover: hover) and (min-width: 601px) and (prefers-reduced-motion: no-preference) {
  .dock-item:hover > a { --s: 1.35; }
  .dock-item:has(+ .dock-item:hover) > a,
  .dock-item:hover + .dock-item > a { --s: 1.15; }
  .dock-item:has(+ .dock-item:hover) > a { --tx: -9px; }
  .dock-item:hover + .dock-item > a { --tx: 9px; }
  .dock-item:has(+ .dock-item + .dock-item:hover) > a { --tx: -4px; }
  .dock-item:hover + .dock-item + .dock-item > a { --tx: 4px; }
  .dock-item:hover .dock-label { bottom: calc(100% + 26px); }
}
@media (prefers-reduced-motion: reduce) {
  .dock-item > a { transition: none; }
  .dock-item > a.bounce { animation: none; }
  .dock-label { transition: none; }
}
@media (max-width: 600px) {
  header > nav.dock {
    left: 6px;
    right: 6px;
    transform: none;
    justify-content: space-around;
    gap: 0;
  }
  .dock-item { width: 40px; height: 40px; }
  .dock-item > a { border-radius: 10px; }
}
/* Шестерёнка вместо поповера: все настройки живут на своей странице, а в шапке
   остаётся только вход в неё и короткое имя текущей модели. */
.settings-link {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.settings-link:hover {
  color: var(--ink);
  border-color: var(--n-85);
}
.settings-link svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.settings-model {
  font-size: 12px;
}
.settings-model:empty {
  display: none;
}
.header-tail {
  display: flex;
  align-items: center;
  gap: 8px;
}
.status {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 11px;
}
.status.fallback {
  color: var(--orange-51);
  background: var(--yellow-98);
}
.status.ai {
  color: var(--green);
  background: var(--n-98-2);
}
main {
  max-width: 1120px;
  margin: auto;
  padding: 66px 24px 110px;
}
.hero {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 32px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
  color: var(--n-66);
  margin: 0 0 11px;
}
.capture {
  background: var(--n-100);
  border: 1px solid var(--n-92);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 42px var(--n-25-a8);
  text-align: left;
  position: relative;
}
/* Ручки: невидимые полосы вдоль краёв и квадраты в нижних углах; о том, что
   край тянется, говорит только курсор. Размер живёт в браузере. */
.capture-resize { position: absolute; z-index: 1; touch-action: none; user-select: none; }
.capture-resize[data-dir="s"] { left: 14px; right: 14px; bottom: -4px; height: 9px; cursor: ns-resize; }
.capture-resize[data-dir="e"] { top: 14px; bottom: 14px; right: -4px; width: 9px; cursor: ew-resize; }
.capture-resize[data-dir="w"] { top: 14px; bottom: 14px; left: -4px; width: 9px; cursor: ew-resize; }
.capture-resize[data-dir="se"] { right: -4px; bottom: -4px; width: 18px; height: 18px; cursor: nwse-resize; }
.capture-resize[data-dir="sw"] { left: -4px; bottom: -4px; width: 18px; height: 18px; cursor: nesw-resize; }
.capture.resizing, .capture.resizing * { cursor: inherit; }
.capture.capture-large .capture-resize { display: none; }
.capture-expand {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--n-82);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.15s, background 0.15s;
}
.capture-expand svg { width: 16px; height: 16px; }
.capture-expand:hover { color: var(--muted); background: var(--hairline); }
.capture-expand:active { transform: scale(0.92); }
.capture-expand .ic-collapse { display: none; }
.capture-large .capture-expand { color: var(--muted); }
.capture-large .capture-expand .ic-expand { display: none; }
.capture-large .capture-expand .ic-collapse { display: block; }
/* ── лист: карточка выходит на передний план и вписывается в окно ── */
body.capture-large-open { overflow: hidden; }
body.capture-large-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 8;
  background: var(--n-23-a28);
  backdrop-filter: blur(2px);
  animation: capture-backdrop 0.24s ease-out;
}
@keyframes capture-backdrop { from { opacity: 0; } }
.capture.capture-large {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9;
  height: min(92vh, calc((100vw - 120px) * 1.3));
  width: min(calc(92vh / 1.3), calc(100vw - 120px));
  max-width: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 90px var(--n-23-a22);
  transform: translate(-50%, -50%);
}
.today-page .capture.capture-large .md-field {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  font-size: 16px;
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) { body.capture-large-open::before { animation: none; } }
@media (max-width: 760px) {
  .capture.capture-large { height: calc(100dvh - 32px); width: calc(100vw - 24px); }
  .today-page .capture.capture-large .md-field { font-size: 17px; }
}
@media (max-width: 760px) {
  .capture-resize[data-dir="e"], .capture-resize[data-dir="w"], .capture-resize[data-dir="se"], .capture-resize[data-dir="sw"] { display: none; }
}
/* ── поле ввода с живой разметкой ── */
.md-field {
  width: 100%;
  min-height: 128px;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 15px;
  padding: 5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
}
/* Подсказка видна, пока поле пустое и не в фокусе: клик в поле убирает её
   сразу, а не с первым символом; ушёл из пустого поля — вернулась. */
.md-field[data-empty="true"]:not(:focus-within)::before {
  content: attr(data-placeholder);
  color: var(--n-76);
  pointer-events: none;
}
.md-field[data-disabled="true"] {
  opacity: 0.6;
}
.md-line {
  min-height: 1.45em;
}
/* Маркеры разметки остаются в тексте — иначе в них некуда поставить каретку —
   но приглушены, чтобы читалось оформление, а не синтаксис. */
.md-mark {
  color: var(--n-82);
  font-weight: 400;
}
.md-field .md-heading {
  font-weight: 750;
}
/* Заголовки в поле ввода — той же лестницей, что в карточке записи: набранный
   «### » должен читаться заголовком, а не жирной строкой рядом с текстом. */
.md-field .md-h1 { font-size: 1.875em; }
.md-field .md-h2 { font-size: 1.5em; }
.md-field .md-h3 { font-size: 1.25em; }
.md-field .md-h4 { font-size: 1em; }
.md-field .md-quote,
.md-field .md-callout-line {
  display: inline-block;
  border-left: 3px solid var(--callout-line, var(--n-87));
  padding-left: 7px;
  margin-left: -10px;
}
/* Callout собирается из отдельных строк — иначе каретка потеряется, — но
   заливка и скругления делают из них один блок, как в Obsidian. */
.md-field .md-callout-head,
.md-field .md-callout-body {
  background: var(--callout-tint, var(--hairline));
  border-left: 3px solid var(--callout-line, var(--n-87));
  padding: 2px 10px 2px 10px;
  margin: 0 -10px;
}
/* Полосу рисует сама строка, иначе она разрывается между строками. */
.md-field .md-callout-head .md-callout-line,
.md-field .md-callout-body .md-quote {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}
.md-field .md-callout-head {
  padding-top: 6px;
  border-radius: 8px 8px 0 0;
}
.md-field .md-callout-tail {
  padding-bottom: 6px;
  border-radius: 0 0 8px 8px;
}
.md-field .md-callout-head.md-callout-tail {
  border-radius: 8px;
}

.md-field .md-quote {
  color: var(--muted);
  font-style: italic;
}
/* Маркер списка остаётся в тексте (иначе каретке некуда встать), но рисуется
   как буллет: сам дефис прозрачен, а точку подставляет ::before. */
.md-field .md-bullet {
  position: relative;
  color: var(--type-todo);
}
.md-field .md-bullet .md-mark {
  color: transparent;
}
.md-field .md-bullet::before {
  content: "•";
  position: absolute;
  left: 0.1em;
  color: var(--type-todo);
  pointer-events: none;
}
/* У задачи свой знак — чекбокс, поэтому буллет ей не рисуем. */
.md-field .md-bullet-task::before {
  content: none;
}
/* Нумерованный список: цифра читается сама, приглушать её незачем. */
.md-field .md-bullet.md-ordered .md-mark {
  color: var(--type-todo);
}
.md-field .md-bullet.md-ordered::before {
  content: none;
}
.md-field code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--hairline);
  border-radius: 4px;
  padding: 0 2px;
}
.md-field .md-link {
  color: var(--focus);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.md-field del {
  opacity: 0.65;
}
.md-field .md-rule,
.md-field .md-fence {
  color: var(--n-76);
}
.capture-foot {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 10px;
  padding-top: 11px;
}
#capture-submit,
.memory button {
  border: 0;
  background: var(--coral);
  color: var(--n-100);
  border-radius: 99px;
  font: inherit;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
}
.dashboard {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.dashboard article,
.memory,
.settings,
.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: none;
}
.preview-card {
  padding: 26px !important;
  display: flex;
  flex-direction: column;
}
.preview-card .stack {
  gap: 6px;
}
/* Запись в колонке — плашка от края до края, как в TODO: без неё текст
   «Что делал» и «Заметок» висел с отступом, а рядом TODO стоял в рамках. */
.preview-card .entry,
.preview-card .entry:first-child {
  padding: 11px 12px;
  border-top: 0;
  border-radius: 12px;
  background: var(--n-98-4);
  font-size: 12px;
}
.preview-card .entry-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.preview-card .entry-meta {
  font-size: 10px;
}
.preview-card .entry-actions {
  gap: 7px;
  margin-top: 7px;
}
.preview-title {
  color: inherit;
  text-decoration: none;
}
/* Заголовок — переход в полный список, поэтому стрелка видна всегда, а не
   только при наведении. У колонки без полной страницы стрелки нет. */
.preview-title::after {
  content: " →";
  color: var(--n-78);
  font-weight: 400;
  transition: color 0.15s;
}
.preview-title.plain::after {
  content: none;
}
.preview-title:hover,
.preview-title:hover::after {
  color: var(--coral);
}
.page-heading {
  margin: 0 0 28px;
}
.page-heading h2 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -1px;
}
.page-heading p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.daily-brief {
  max-width: 820px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.daily-brief-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.daily-brief-head h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.7px;
}
.daily-brief-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.daily-brief-section h3 {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.daily-brief-section .empty {
  margin: 0;
}
.daily-brief-section .entry {
  padding: 12px 0;
}
.daily-brief-section .entry:last-child {
  padding-bottom: 0;
}
.daily-brief-section .entry-title {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.daily-brief-source {
  margin-top: 7px;
}
.daily-brief-meta {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.daily-brief-loading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
}
#daily-brief-source-dialog {
  max-width: 520px;
  padding: 26px;
}
#daily-brief-source-dialog h2 {
  margin: 0;
  font-size: 20px;
}
#daily-brief-source-dialog .review-raw {
  margin: 14px 0 20px;
  border-color: var(--line);
  background: var(--wash);
}
#daily-brief-source-dialog button + button {
  margin-left: 8px;
}
.dashboard h2,
.memory h2,
.settings h2,
.review h2 {
  font-size: 18px;
  margin: 0 0 13px;
}
.stack {
  display: grid;
  gap: 9px;
}
.plan-stack {
  display: grid;
  gap: 18px;
}
.plan-section + .plan-section {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.plan-section h3 {
  margin: 0 0 9px;
  font-size: 13px;
  color: var(--muted);
}
.empty {
  font-size: 13px;
  color: var(--n-68);
  margin: 12px 0;
}
.entry {
  border-top: 1px solid var(--line);
  padding-top: 11px;
  font-size: 13px;
}
.entry:first-child {
  border-top: 0;
  padding-top: 0;
}
/* Заголовок записи — кнопка, открывающая карточку. Кнопочные стили браузера
   сбрасываются, чтобы визуально это остался обычный заголовок. */
.entry-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.entry-title:hover {
  color: var(--coral);
}
#daily-brief .entry-title {
  cursor: default;
}
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--n-63);
  margin-top: 4px;
}
/* Проект — своя метка: тише типа, но заметнее обычной подробности. */
.entry-meta .tag.project {
  background: var(--n-97);
  color: var(--blue-46);
  font-weight: 600;
}
/* Состояние карточки читается цветом: просрочено — красным, сегодня — тёплым,
   готово — зелёным. Слова остаются: цвет здесь помощник, а не единственный
   носитель смысла. */
.entry-meta .tag.due {
  background: var(--hairline);
  color: var(--n-52);
}
.entry-meta .tag.due.soon {
  background: var(--tint-wait);
  color: var(--yellow-51);
}
.entry-meta .tag.late {
  background: var(--tint-late);
  color: var(--red-50);
  font-weight: 600;
}
.entry-meta .tag.undated {
  background: var(--hairline);
  color: var(--n-62);
}
.entry-meta .tag.ontime {
  background: var(--n-97-2);
  color: var(--teal-54);
}
.entry-meta .tag.done {
  background: var(--n-97-2);
  color: var(--green);
  font-weight: 600;
}
.entry-meta .tag.urgent {
  background: var(--red-97-2);
  color: var(--orange-54);
}
.entry-meta .tag.calm {
  background: var(--n-97);
  color: var(--blue-54-2);
}
/* Кромки у карточки нет: состояние и так названо меткой и цветом фона, а
   полоска слева читалась как лишняя линия в списке. */
.entry.overdue .entry-title,
.entry.overdue .entry-meta {
  color: var(--red-49);
}
.entry.overdue {
  border-color: var(--tint-late-line);
}
.tag {
  display: inline-block;
  font-size: 10px;
  border-radius: 99px;
  padding: 2px 7px;
  margin-right: 5px;
  background: var(--pink);
  color: var(--red-49-2);
}
.tag.task {
  background: var(--n-97-3);
  color: var(--teal-49);
}
.entry-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.text-button {
  font: inherit;
  font-size: 11px;
  color: var(--n-45);
  background: transparent;
  border: 0;
  text-decoration: underline;
  padding: 0;
  cursor: pointer;
}
.entry.completable {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 11px;
  align-items: start;
}
.entry.completable > * {
  grid-column: 2;
}
.entry.completable > .completion-button {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.completion-button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  padding: 0;
  border: 1.5px solid var(--n-87-2);
  border-radius: 50%;
  background: var(--n-100);
  color: transparent;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.completion-button::before {
  content: "✓";
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.completion-button:hover {
  border-color: var(--green);
}
.entry.overdue > .completion-button {
  border-color: var(--red-74);
}
.entry.completed > .completion-button {
  border-color: var(--green);
  background: var(--green);
  color: var(--n-100);
}
/* Фон состояния — только в TODO: там просроченное, ожидающее и требующее
   уточнения лежат рядом. В «Что делал» все записи в одном состоянии,
   различать нечего, и фон был бы лишним весом. */
#todo .entry.waiting {
  background: var(--tint-wait);
}
#todo .entry.overdue {
  background: transparent;
}
#review-dialog:focus,
#review-dialog:focus-visible {
  outline: none;
}
/* Карточка записи — тот же лист, что и увеличенное поле ввода: одинаковые
   ширина, высота и пропорция, чтобы это читалось как один предмет.
   Закреплена к окну, а не к документу: в верхнем слое relative-диалог стоит
   от начала страницы и уезжает вместе с её прокруткой — на телефоне список
   прокручен, карточка открывалась выше экрана, а клавиатура уводила её совсем.
   Прокрутка живёт внутри карточки и не передаётся странице под ней. */
#review-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  overscroll-behavior: contain;
  width: min(calc(92vh / 1.3), calc(100vw - 120px));
  height: min(92vh, calc((100vw - 120px) * 1.3));
  max-width: none;
  max-height: none;
  overflow-y: auto;
  padding: 26px;
}
@media (max-width: 760px) {
  #review-dialog {
    width: calc(100vw - 24px);
    height: calc(100dvh - 32px);
  }
}
/* Пока карточка открыта, страница под ней не прокручивается: иначе палец
   на телефоне двигал бы список, а не заметку. */
body:has(#review-dialog[open]:not([data-mode="side"])) {
  overflow: hidden;
}
@media (max-width: 760px) {
  body:has(#review-dialog[open]) {
    overflow: hidden;
  }
}
/* ── настройки приложения ────────────────────────────────────────────────── */
.settings-form {
  display: grid;
  gap: 26px;
  /* Ширину не сужаем: соседняя карточка «Данные» живёт во всю строку, и
     колонка в 720px рассыпала бы страницу на два разных разворота. */
  margin: 0 0 26px;
}
.settings-group {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--n-100);
}
.settings-group legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--n-66);
}
/* Название слева, поле справа, состояние под ним: строка читается как строка,
   а не как форма из трёх колонок. */
.setting {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
  font-size: 13px;
}
.setting-name {
  color: var(--muted);
}
/* Длинному полю — вся ширина строки: промпт в узкой колонке не читается. */
.setting-wide {
  grid-template-columns: minmax(0, 1fr);
}
/* Список моделей и поле для имени стоят друг под другом в одной клетке: поле
   появляется под списком, когда выбрали «Другая», и строка не разъезжается. */
.setting-model {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.setting textarea {
  font: inherit;
  font-size: 13px;
  width: 100%;
  min-height: 82px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--n-100);
  color: var(--ink);
  resize: vertical;
}
.setting input,
.setting select {
  font: inherit;
  font-size: 13px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--n-100);
  color: var(--ink);
}
.setting input:hover,
.setting select:hover {
  border-color: var(--n-85);
}
.setting-state {
  grid-column: 2;
  font-size: 11.5px;
  color: var(--n-66);
}
.settings-group .status {
  grid-column: 1 / -1;
  justify-self: start;
}
.setting-hint {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--n-66);
}
/* Расходы: три строки итогов и разбивка по моделям под ними. */
.usage {
  display: grid;
  gap: 2px;
  font-size: 12.5px;
}
.usage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 130px 110px;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
}
.usage-row:nth-child(3) {
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.usage-detail {
  color: var(--muted);
  font-size: 11.5px;
  border-bottom: 0;
  padding: 4px 0;
}
.usage-when {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-calls,
.usage-tokens {
  color: var(--muted);
}
.usage-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.usage .empty {
  margin: 6px 0 0;
  font-size: 12px;
}
@media (max-width: 620px) {
  .usage-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .usage-tokens {
    display: none;
  }
}
.settings-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.settings-bar .setting-state {
  grid-column: auto;
}
button.primary {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border: 0;
  border-radius: 99px;
  background: var(--type-auto);
  color: var(--n-100);
  cursor: pointer;
}
button.primary:hover {
  background: var(--red-54);
}
@media (max-width: 620px) {
  .setting {
    grid-template-columns: minmax(0, 1fr);
  }
  .setting-state {
    grid-column: 1;
  }
}

/* ── вложения записи ─────────────────────────────────────────────────────── */
.card-files {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  border-radius: 12px;
  transition: background 0.2s ease;
}
/* Пока файл держат над карточкой, видно, куда он упадёт. */
.card-files.dropping {
  background: var(--tint-auto);
  outline: 2px dashed var(--type-auto);
  outline-offset: 4px;
}
.file-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}
.file-grid .empty {
  margin: 0;
  font-size: 12px;
}
.file-tile {
  position: relative;
  width: 104px;
}
.file-open {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--n-100);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}
.file-open:hover {
  border-color: var(--n-85);
}
.file-thumb {
  width: 100%;
  height: 74px;
  object-fit: cover;
  display: block;
  background: var(--hairline);
}
.file-kind {
  display: grid;
  place-items: center;
  height: 74px;
  background: var(--hairline);
  color: var(--n-66);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}
.file-name {
  padding: 0 8px 8px;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--n-100);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.file-remove:hover {
  color: var(--ink);
  border-color: var(--n-85);
}
/* Быстрый предпросмотр: картинка целиком, PDF рамкой, остальное — скачать. */
#preview-dialog {
  width: min(1040px, 94vw);
  max-width: none;
  padding: 16px;
  border-radius: 18px;
}
.preview-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.preview-title {
  margin: 0;
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-head .dialog-close {
  position: static;
}
.preview-body {
  display: grid;
  place-items: center;
  min-height: 200px;
  max-height: 78vh;
  overflow: auto;
}
.preview-image {
  max-width: 100%;
  max-height: 76vh;
  border-radius: 12px;
}
.preview-frame {
  width: 100%;
  height: 76vh;
  border: 0;
  border-radius: 12px;
}
.preview-plain {
  color: var(--muted);
  font-size: 13px;
}
/* Скрепка с числом на карточке в колонке: видно, что к записи что-то приложено. */
.entry-meta .tag.files {
  background: var(--hairline);
  color: var(--n-52);
}

/* Крестик остаётся на месте при прокрутке содержимого карточки. */
.dialog-close {
  position: sticky;
  top: 0;
  float: right;
  background: var(--n-100);
}
#review-dialog .review {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
#review-dialog .review::-webkit-scrollbar {
  display: none;
}

#review-dialog .review h2 {
  margin: 0 0 12px;
  font-size: 20px;
  padding-right: 28px;
}
/* Форма версталась под широкую панель на всю страницу; в диалоге ей нужны две
   колонки, а кнопка сохранения занимает отдельную строку. */
#review-dialog .review-form {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0;
}
.dialog-close::before {
  content: "×";
  font-size: 23px;
  line-height: 1;
}
.dialog-close:hover {
  background: var(--wash);
  color: var(--ink);
}
.review-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 16px;
}
/* Свойства — второстепенный блок: как в Notion, значение выглядит обычным
   текстом и обзаводится рамкой только при наведении и фокусе. Главное в
   карточке — тело заметки, поэтому свойства не должны его перевешивать. */
.props {
  display: grid;
  /* Явная растянутая колонка: без неё неявная колонка получала ширину по
     содержимому и строки свойств прижимались к правому краю. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
}
.prop {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-radius: 7px;
}
.prop:hover {
  background: var(--wash);
}
.prop.has-clear { grid-template-columns: 92px minmax(0, 1fr) 22px; }
.prop-clear {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 0.12s;
}
.prop:hover .prop-clear, .prop:focus-within .prop-clear { opacity: 1; }
.prop-clear:hover { background: var(--n-25-a8); color: var(--ink); }
.prop-clear[hidden] { display: none; }
.prop-label {
  padding-left: 4px;
  color: var(--muted);
  font-size: 12px;
}
/* Значение выглядит обычным текстом: у select снимается системная рамка со
   стрелкой, рамка появляется только при наведении и фокусе. */
#review-dialog .props select,
#review-dialog .props input {
  appearance: none;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font-size: 13px;
}
#review-dialog .props select:hover,
#review-dialog .props input:hover {
  border-color: var(--line);
}
#review-dialog .props select:focus,
#review-dialog .props input:focus {
  border-color: var(--n-88);
  background: var(--n-100);
}
#review-dialog .props input::placeholder {
  color: var(--n-78);
}
.prop-section {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
}
.prop-origin {
  color: var(--n-78);
}
.review-form select,
.review-form input {
  font: inherit;
  border: 1px solid var(--n-87-3);
  border-radius: 8px;
  padding: 8px;
  background: var(--n-100);
  min-width: 0;
}
.review-schedule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.review-form button {
  justify-self: start;
}

.review-question {
  margin: 0;
  color: var(--red-49-3);
}
.review-confidence {
  display: none;
}
.memory,
.settings {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: start;
}
.memory h2,
.settings h2 {
  font-size: 28px;
  letter-spacing: -0.7px;
}
.memory p,
.settings p {
  color: var(--muted);
  font-size: 14px;
}
.provider-note {
  font-size: 12px !important;
  max-width: 520px;
}
.memory form {
  display: flex;
  gap: 8px;
}
.memory input {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  min-width: 0;
  flex: 1;
  font: inherit;
}
.memory-result {
  grid-column: 1/-1;
}
.answer {
  padding: 16px;
  background: var(--pink);
  border-radius: 12px;
}
.sources {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.source {
  font-size: 12px;
  background: var(--n-100);
  border: 1px solid var(--line);
  padding: 8px;
  border-radius: 8px;
  max-width: 280px;
}
.settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.secondary,
.danger {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--n-100);
  color: var(--ink);
  padding: 10px 13px;
  border-radius: 99px;
  text-decoration: none;
  cursor: pointer;
}
.danger {
  border-color: var(--red-83);
  color: var(--red-49);
}
dialog {
  max-width: 410px;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 18px 55px var(--n-0-a27);
  padding: 0;
}
dialog::backdrop {
  background: var(--n-0-a40);
}
dialog form {
  padding: 25px;
}
dialog h2 {
  margin: 0;
}
dialog label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  margin: 18px 0;
}
dialog input {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}
dialog form > div {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
#toast {
  position: fixed;
  z-index: 60;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--n-25);
  color: var(--n-100);
  padding: 9px 14px;
  border-radius: 99px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#toast.show {
  opacity: 1;
  pointer-events: auto;
}
#toast {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
/* Действие в тосте: «Вернуть» после удаления. */
.toast-action {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--n-100);
  background: none;
  border: 0;
  border-left: 1px solid var(--n-100-a25);
  padding: 0 2px 0 12px;
  cursor: pointer;
}
.toast-action:hover {
  color: var(--tint-auto);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.md-field:focus-visible {
  outline: 0;
}
.capture:focus-within {
  border-color: var(--n-85);
  box-shadow:
    0 18px 42px var(--n-25-a8),
    0 0 0 3px var(--blue-54-a16);
}
.entry:focus {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  z-index: 20;
  padding: 9px 14px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--n-100);
  font-size: 13px;
  text-decoration: none;
  transform: translate(-50%, -200%);
}
.skip-link:focus-visible {
  transform: translate(-50%, 0);
}
@media (max-width: 760px) {
  :root {
    --header-gutter: 16px;
  }
  header {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-height: 0;
    padding: 10px var(--header-gutter) 6px;
  }
  .brand {
    order: 1;
  }
  .header-tail {
    order: 2;
    margin-left: auto;
  }
  .dashboard,
  .memory,
  .settings,
  .review-form {
    grid-template-columns: 1fr;
  }
  .settings-actions {
    justify-content: flex-start;
  }
  .memory-result {
    grid-column: auto;
  }
  main {
    padding: 40px 16px 100px;
  }
  .capture-foot {
    flex-wrap: wrap;
  }
  .capture-foot #capture-expand {
    margin-left: auto;
  }
}
#capture-submit:disabled,
.memory button:disabled {
  cursor: wait;
  opacity: 0.65;
}
.ghost {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--n-66);
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
.ghost:hover {
  color: var(--ink);
  background: var(--hairline);
}
.ghost[aria-pressed="true"] {
  color: var(--ink);
  background: var(--n-96);
  font-weight: 600;
}
.ghost.prio-high[aria-pressed="true"] {
  color: var(--red-52);
  background: var(--tint-auto);
}
.ghost.prio-low[aria-pressed="true"] {
  color: var(--blue-54-2);
  background: var(--tint-note);
}
.capture-notifications {
  position: fixed;
  top: 88px;
  right: 16px;
  z-index: 35;
  display: grid;
  gap: 10px;
  width: min(280px, calc(100vw - 48px));
  pointer-events: none;
}
.capture-notification {
  position: relative;
  padding: 13px 40px 13px 14px;
  text-align: left;
  border: 1px solid var(--capture-progress-border);
  border-radius: 14px;
  background: var(--n-100-2);
  box-shadow: 0 10px 28px var(--orange-21-a10);
  font-size: 13px;
  pointer-events: auto;
  animation: notification-enter 0.2s ease-out;
}
.capture-notification.state-failed,
.capture-notification.state-cancelled {
  background: var(--n-98-3);
}
.capture-notification p { margin: 5px 0; }
.notification-close {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0;
}
.notification-close::before { content: "×"; font-size: 22px; line-height: 1; }
@keyframes notification-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.progress-state {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}
.spinner {
  width: 13px;
  height: 13px;
  border: 2px solid var(--red-83);
  border-top-color: var(--coral);
  border-radius: 50%;
  animation: capture-spin 0.8s linear infinite;
}
@keyframes capture-spin {
  to {
    transform: rotate(360deg);
  }
}
.progress-raw {
  color: var(--muted);
  overflow-wrap: anywhere;
}
/* Отделённые дела в уведомлении и происхождение в карточке — одна мысль:
   запись несла два действия, и второе живёт своей строкой. Набраны тише
   самой записи: это след разбора, а не то, что человек написал. */
.progress-parts {
  color: var(--ink);
  font-size: 13px;
}
.card-origin {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--n-66);
}
.card-origin .text-button {
  /* Заголовок исходной записи бывает длинным: строка происхождения держится
     одной и обрезается, а не расползается на три. */
  font-size: 13px;
  max-width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.progress-actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.app-page[hidden] {
  display: none;
}
.today-page .hero {
  max-width: var(--capture-width, 800px);
  margin: 0 auto 56px;
}
.today-intro {
  margin: 0 0 40px;
  text-align: center;
}
.today-intro h1 {
  margin: 0;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -1.3px;
}
.today-page .capture {
  padding: 16px;
}
/* Поле растёт вместе с текстом: две строки в покое, до сорока процентов
   высоты окна — дальше прокрутка внутри. */
.today-page .md-field {
  min-height: var(--capture-height, 3.4em);
  max-height: max(40vh, var(--capture-height, 0px));
  overflow-y: auto;
  font-size: 17px;
}
.today-page .capture #capture-submit {
  min-width: 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
}
.today-page .dashboard {
  margin-top: 0;
}
@media (max-width: 760px) {
  .today-page .md-field {
    min-height: 3.4em;
  }
  .today-page .dashboard {
    grid-template-columns: minmax(0, 1fr);
  }
  .dashboard article {
    min-width: 0;
  }
  .entry-title,
  .progress-raw {
    overflow-wrap: anywhere;
  }
  .capture-notifications {
    position: static;
    right: auto;
    width: auto;
    margin: 10px 16px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .capture-notification { animation: none; }
}

.review-schedule {
  display: flex;
  gap: 8px;
}
.review-schedule input {
  min-width: 0;
  flex: 1 1 0;
}
.completion-button.is-done {
  border-color: var(--green);
  background: var(--green);
  color: var(--n-100);
}
.card-body {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.source-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--n-66);
  margin: 0 0 4px;
}
.md-block {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 15px;
}
.card-body > .card-markdown {
  min-height: 190px;
  cursor: text;
}
.card-body .md-field {
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 10px;
}
.card-body .md-field:hover {
  background: var(--wash);
}
.card-body .md-field:focus {
  background: var(--n-100);
  box-shadow: 0 0 0 2px var(--violet-54-a16);
}

.answer .md-block,
.source .md-block {
  padding: 0;
}
.card-markdown:hover {
  background: var(--wash);
}
.md-block .empty {
  margin: 0;
}
/* ── онлайн-разметка во всём интерфейсе ── */
/* ── разметка уровня Obsidian: таблицы, задачи, callout-блоки, теги ── */
.md-block .md-table-wrap {
  overflow-x: auto;
  margin: 10px 0;
}
.md-table {
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 100%;
}
.md-table th,
.md-table td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
}
.md-table th {
  background: var(--hairline);
  font-weight: 700;
}
.md-block li.md-task {
  list-style: none;
  margin-left: -18px;
}
.md-block .md-checkbox {
  margin-right: 7px;
  color: var(--type-todo);
}
.md-block li.md-task-done {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--n-82);
}
.md-callout {
  border-left: 3px solid var(--callout-line, var(--type-note));
  background: var(--callout-tint, var(--hairline));
  border-radius: 0 10px 10px 0;
  padding: 9px 12px;
  margin: 10px 0;
}
.md-callout-title {
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 4px;
  color: var(--callout-line, var(--ink));
}
.md-callout > :last-child {
  margin-bottom: 0;
}
.md-callout-warning,
.md-callout-caution,
.md-callout-attention {
  --callout-line: var(--orange-56);
  --callout-tint: var(--orange-97);
}
.md-callout-danger,
.md-callout-error,
.md-callout-bug,
.md-callout-failure,
.md-callout-fail,
.md-callout-missing {
  --callout-line: var(--orange-54);
  --callout-tint: var(--pink-96);
}
.md-callout-success,
.md-callout-check,
.md-callout-done,
.md-callout-tip,
.md-callout-hint {
  --callout-line: var(--teal-51);
  --callout-tint: var(--n-97-4);
}
.md-callout-question,
.md-callout-help,
.md-callout-faq,
.md-callout-todo,
.md-callout-important {
  --callout-line: var(--type-todo);
  --callout-tint: var(--tint-todo);
}
.md-callout-info,
.md-callout-note,
.md-callout-example,
.md-callout-quote,
.md-callout-cite,
.md-callout-abstract,
.md-callout-summary,
.md-callout-tldr {
  --callout-line: var(--blue-61);
  --callout-tint: var(--tint-outcome);
}
.md-tag {
  color: var(--type-todo);
  background: var(--tint-todo);
  border-radius: 5px;
  padding: 0 4px;
  font-size: 0.92em;
}
.md-wikilink {
  color: var(--focus);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.md-image {
  color: var(--focus);
  text-decoration: none;
}
.md-anchor,
.md-footnote-index {
  color: var(--n-76);
  font-size: 0.9em;
}
.md-math {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--tint-outcome);
}
.md-block mark,
.md-field mark {
  background: var(--yellow-96);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}
.md-footnotes {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.md-footnotes ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.md-footnote-ref a {
  text-decoration: none;
}
.md-block pre.md-code {
  position: relative;
}
.md-block pre.md-code::before {
  content: attr(data-language);
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--n-76);
}
.md-block .md-h1 { font-size: 1.3em; }
.md-block .md-h2 { font-size: 1.18em; }
.md-block .md-h3 { font-size: 1.08em; }
.md-block .md-h4,
.md-block .md-h5,
.md-block .md-h6 { font-size: 1em; }
.md-block .md-h6 { color: var(--muted); }

/* ── те же конструкции в живом поле ── */
.md-field .md-h5,
.md-field .md-h6 { font-size: 1em; }
.md-field .md-h6 { color: var(--muted); }
/* Чекбокс задачи: скобки со статусом остаются текстом, поверх рисуется
   настоящая коробочка — по ней можно щёлкнуть мышью. */
.md-field .md-checkbox {
  position: relative;
  cursor: pointer;
  color: transparent;
}
.md-field .md-checkbox .md-mark {
  color: transparent;
}
.md-field .md-checkbox::before {
  content: "☐";
  position: absolute;
  left: 0;
  color: var(--type-todo);
  font-weight: 400;
}
.md-field .md-checkbox-done::before {
  content: "☑";
  color: var(--green);
}
.md-field .md-checkbox:hover::before {
  color: var(--ink);
}
.md-field .md-task-done {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--n-82);
}
.md-field .md-callout-kind,
.md-field .md-callout-title {
  color: var(--callout-line, var(--ink));
  font-weight: 700;
}
.md-field .md-tag {
  color: var(--type-todo);
}
.md-field .md-wikilink {
  color: var(--focus);
}
.md-field .md-image {
  color: var(--focus);
}
.md-field .md-comment {
  color: var(--n-82);
  font-style: italic;
}
.md-field .md-math {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--tint-outcome);
  border-radius: 4px;
}
.md-field .md-cell {
  padding: 0 4px;
}
.md-field .md-table-line {
  font-variant-numeric: tabular-nums;
}
.md-field .md-footnote-ref,
.md-field .md-anchor {
  color: var(--n-72);
}
.md-field .md-footnote-def .md-mark {
  color: var(--n-72);
}
/* Инлайновая строка: заголовок записи, пункт отчёта, уведомление. Блочные
   элементы внутри неё не появляются — рендерер возвращает только фразу. */
.md-inline strong {
  font-weight: 750;
}
.md-inline code,
.md-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--hairline);
  border-radius: 4px;
  padding: 1px 4px;
}
.md-block a {
  color: var(--focus);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.md-inline .md-link,
.md-block .md-link {
  color: var(--focus);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.md-inline del,
.md-block del {
  opacity: 0.6;
}
.md-block > :first-child {
  margin-top: 0;
}
.md-block > :last-child {
  margin-bottom: 0;
}
.md-block h3,
.md-block h4,
.md-block h5,
.md-block h6 {
  margin: 14px 0 6px;
  font-size: 15px;
}
.md-block p {
  margin: 8px 0;
}
.md-block ul,
.md-block ol {
  margin: 8px 0;
  padding-left: 22px;
}
.md-block li {
  margin: 3px 0;
}
.md-block code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--pink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.md-block pre {
  margin: 10px 0;
  padding: 11px 12px;
  overflow-x: auto;
  border-radius: 10px;
  background: var(--n-98-4);
}
.md-block pre code {
  padding: 0;
  background: none;
}
.md-block blockquote {
  margin: 10px 0;
  padding-left: 12px;
  border-left: 2px solid var(--line);
  color: var(--muted);
}
.md-block hr {
  margin: 14px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
#card-body-editor {
  width: 100%;
  min-height: 220px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
  font: inherit;
  font-size: 14px;
}
.card-body-hint {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.props .completion-button {
  width: 17px;
  height: 17px;
  margin: 0 0 0 6px;
  border-width: 1px;
}
.props .completion-button::before {
  font-size: 9px;
}

/* ── учётная запись, тема и администрирование ────────────────────────────────
   Кнопка темы и меню учётной записи стоят в шапке рядом с шестерёнкой: это всё
   «про меня», а не «про запись», и держать их вместе честнее, чем разносить. */
.theme-toggle {
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--n-93);
  border-radius: 50%;
  background: var(--n-100);
  color: var(--n-52);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}
.theme-toggle svg {
  display: block;
}
.theme-toggle:hover {
  color: var(--n-25);
  border-color: var(--n-85);
}
.account-menu {
  position: relative;
}
.account-menu > summary {
  list-style: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--n-96);
  border: 1px solid var(--n-93);
  color: var(--n-52);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.account-menu > summary::-webkit-details-marker {
  display: none;
}
/* Аватар — картинка поверх буквы: пока она грузится, видна буква. Так же в
   шапке и в любом кружке человека (.ava). */
.account-menu > summary,
.ava {
  position: relative;
  overflow: hidden;
}
.ava-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.ava.huge {
  width: 72px;
  height: 72px;
  font-size: 28px;
}
/* Выбор аватара: крупно — какой сейчас, рядом — набор кружков и загрузка. */
.avatar-setting {
  align-items: start;
}
.avatar-picker {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.avatar-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.avatar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.avatar-choice {
  appearance: none;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.avatar-choice .ava {
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.avatar-choice:hover {
  transform: scale(1.08);
}
.avatar-choice[aria-checked="true"] {
  border-color: var(--coral);
}
.avatar-choice:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* ── уведомления ──
   Колокольчик — история, число на нём — только ждущее ответа, точка — остальное
   непрочитанное. Строка ленты и всплывашка в углу собраны из одних кусков. */
.bell-menu {
  position: relative;
}
.bell-menu > summary {
  list-style: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.bell-menu > summary::-webkit-details-marker {
  display: none;
}
.bell-menu > summary:hover,
.bell-menu[open] > summary {
  color: var(--ink);
  border-color: var(--n-85);
}
.bell-menu > summary svg {
  width: 18px;
  height: 18px;
}
.bell-count {
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--coral);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--n-100);
}
.bell-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 2px var(--n-100);
}
.bell-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: -128px;
  z-index: 12;
  width: min(420px, calc(100vw - 24px));
  max-height: min(640px, calc(100dvh - 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--n-100);
  border: 1px solid var(--n-93);
  border-radius: 16px;
  box-shadow: 0 16px 40px var(--orange-21-a10);
}
.bell-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 6px;
}
.bell-head h3 {
  margin: 0;
  font-size: 15px;
  flex: 1;
}
.bell-read-all {
  font-size: 12.5px;
  color: var(--muted);
}
.bell-read-all:disabled {
  opacity: 0.45;
  cursor: default;
}
.bell-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 16px 8px;
}
.bell-filter,
.bell-act {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 99px;
  padding: 3px 11px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.bell-filter:hover,
.bell-act:hover {
  background: var(--n-97);
}
.bell-filter[aria-pressed="true"],
.bell-act.primary {
  background: var(--pink);
  color: var(--coral);
  border-color: transparent;
  font-weight: 600;
}
.bell-filter b {
  font-variant-numeric: tabular-nums;
}
.bell-act:disabled {
  opacity: 0.5;
  cursor: default;
}
.bell-group {
  margin: 0;
  padding: 10px 18px 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n-66);
}
.bell-group.waits {
  color: var(--coral);
}
.bell-list {
  padding: 0 4px 6px;
}
.bell-row,
.notify-toast {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 2px 10px;
}
.bell-row {
  position: relative;
  padding: 9px 12px 9px 16px;
  border-radius: 12px;
  cursor: pointer;
}
.bell-row:hover {
  background: var(--n-97);
}
.bell-row.unread::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 20px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
.bell-row .ava.big,
.notify-toast .ava.big {
  width: 28px;
  height: 28px;
}
.bell-faces {
  position: relative;
  width: 28px;
  height: 28px;
}
.bell-faces .ava.big {
  position: absolute;
  width: 20px;
  height: 20px;
}
.bell-faces .ava:first-child {
  top: 0;
  left: 0;
}
.bell-faces .ava:last-child {
  right: 0;
  bottom: 0;
  box-shadow: 0 0 0 2px var(--n-100);
}
.bell-glyph {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.bell-glyph svg {
  width: 15px;
  height: 15px;
}
.bell-glyph.coral {
  background: var(--pink);
  color: var(--coral);
}
.bell-glyph.blue {
  background: var(--tint-outcome);
  color: var(--type-outcome);
}
.bell-glyph.violet {
  background: var(--tint-todo);
  color: var(--type-todo);
}
.bell-glyph.amber {
  background: var(--tint-wait);
  color: var(--type-meeting);
}
.bell-glyph.teal {
  background: var(--tint-note);
  color: var(--green);
}
.bell-glyph.muted {
  background: var(--n-96);
  color: var(--muted);
}
.bell-text {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.bell-text b {
  color: var(--ink);
  font-weight: 600;
}
.bell-row.unread .bell-text,
.notify-toast .bell-text {
  color: var(--ink);
}
.bell-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--n-66);
}
.bell-time {
  font-size: 12px;
  color: var(--n-66);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}
.bell-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.bell-done {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--green);
}
.bell-done::before {
  content: "✓ ";
  font-weight: 700;
}
.bell-empty {
  margin: 0;
  padding: 18px;
  text-align: center;
  color: var(--n-66);
  font-size: 13px;
}
.bell-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 18px 12px;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
  color: var(--muted);
}
.bell-foot a {
  color: var(--muted);
  text-decoration: none;
}
.bell-foot a:hover {
  color: var(--ink);
}
/* Время и «Заглушить» — колонкой справа: значок виден по наведению, на
   телефоне — всегда, наведения там нет. */
.bell-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.bell-mute {
  appearance: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: -5px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--n-66);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
.bell-mute svg {
  width: 15px;
  height: 15px;
}
.bell-row:hover .bell-mute,
.bell-row:focus-within .bell-mute,
.bell-mute[aria-expanded="true"] {
  opacity: 1;
}
.bell-mute:hover,
.bell-mute[aria-expanded="true"] {
  background: var(--n-94);
  color: var(--ink);
}
@media (hover: none) {
  .bell-mute { opacity: 1; }
}
.bell-mute-menu {
  grid-column: 1 / -1;
  display: grid;
  gap: 1px;
  margin: 6px 0 2px;
  padding: 4px;
  border: 1px solid var(--n-93);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 10px 26px var(--orange-21-a10);
  cursor: default;
}
.bell-mute-item {
  appearance: none;
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.bell-mute-item:hover,
.bell-mute-item:focus-visible {
  background: var(--n-97);
}
.bell-mute-title {
  font-weight: 600;
}
.bell-mute-item small {
  font-size: 12px;
  color: var(--n-66);
}
/* «Готово» у дела — зелёным, как кружок, который оно ставит. */
.bell-act.ok {
  border-color: transparent;
  background: color-mix(in srgb, var(--green) 14%, var(--paper));
  color: var(--green);
  font-weight: 600;
}
.bell-act.ok:hover {
  background: color-mix(in srgb, var(--green) 22%, var(--paper));
}
/* «Доброе утро» раскрывается на месте: встречи по часам и дела с кружками. */
.bell-digest-toggle {
  appearance: none;
  justify-self: start;
  margin: 5px 0 0 -6px;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--type-meeting);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.bell-digest-toggle::before {
  content: "▸ ";
}
.bell-digest-toggle.open::before {
  content: "▾ ";
}
.bell-digest-toggle:hover {
  background: var(--n-96);
}
.bell-digest {
  display: grid;
  gap: 1px;
  margin-top: 4px;
  cursor: default;
}
.bell-digest-head {
  margin: 8px 0 2px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n-66);
}
.bell-digest-row {
  appearance: none;
  display: grid;
  grid-template-columns: 38px 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 30px;
  padding: 2px 6px 2px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.bell-digest-row:hover {
  background: var(--n-97);
}
.bell-digest-time {
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  color: var(--n-66);
  font-variant-numeric: tabular-nums;
}
.bell-digest-dot {
  justify-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--type-outcome);
}
.bell-digest-title {
  appearance: none;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.bell-digest-row.deal {
  cursor: default;
}
.bell-digest-row.deal .completion-button {
  justify-self: center;
  width: 18px;
  height: 18px;
  margin: 0;
}
.bell-digest-row.done .bell-digest-title {
  color: var(--n-66);
  text-decoration: line-through;
}
.bell-digest-state {
  font-size: 11.5px;
  color: var(--n-66);
  white-space: nowrap;
}
.bell-digest-link {
  appearance: none;
  justify-self: start;
  margin: 6px 0 0 -6px;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--coral);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.bell-digest-link:hover {
  background: var(--n-96);
}
/* Календари, об изменениях в которых человек попросил молчать. */
.notify-muted {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.notify-muted button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.notify-muted button:hover {
  background: var(--n-97);
}
.notify-toasts {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.notify-toast {
  pointer-events: auto;
  padding: 12px 8px 12px 14px;
  border-radius: 14px;
  background: var(--n-100);
  border: 1px solid var(--n-93);
  box-shadow: 0 16px 40px var(--orange-21-a10);
  animation: notify-in 0.18s ease-out;
}
.notify-toast .bell-text {
  cursor: pointer;
}
.notify-toast-close {
  appearance: none;
  align-self: start;
  border: 0;
  background: none;
  color: var(--n-66);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.notify-toast-close:hover {
  color: var(--ink);
}
@keyframes notify-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .notify-toast {
    animation: none;
  }
}
/* Настройки поводов: колокольчик и телефон на каждый. */
.notify-table {
  display: grid;
}
.notify-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 92px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
}
.notify-cols {
  border-top: 0;
  padding: 0 0 4px;
  font-size: 11.5px;
  color: var(--n-66);
}
.notify-cols span:not(:first-child) {
  text-align: center;
}
.notify-group {
  margin: 12px 0 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n-66);
}
.notify-hint {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--n-66);
}
.notify-switch {
  appearance: none;
  justify-self: center;
  position: relative;
  width: 36px;
  height: 21px;
  border: 0;
  border-radius: 99px;
  background: var(--n-88);
  padding: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.notify-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.notify-switch[aria-checked="true"] {
  background: var(--coral);
}
.notify-switch[aria-checked="true"]::after {
  transform: translateX(15px);
}
.notify-switch:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (max-width: 560px) {
  .bell-popover {
    position: fixed;
    top: calc(58px + env(safe-area-inset-top, 0px));
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0px));
  }
  .notify-row {
    grid-template-columns: minmax(0, 1fr) 58px 58px;
  }
  .notify-toasts {
    left: 16px;
    right: 16px;
    width: auto;
  }
}
@media (max-width: 620px) {
  .avatar-picker {
    flex-direction: column;
  }
  .avatar-choice .ava {
    width: 36px;
    height: 36px;
  }
}
.account-menu[open] > summary {
  border-color: var(--n-85);
  color: var(--n-25);
}
.account-menu-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 230px;
  background: var(--n-100);
  border: 1px solid var(--n-93);
  border-radius: 14px;
  box-shadow: 0 16px 40px var(--orange-21-a10);
  padding: 12px;
  display: grid;
  gap: 8px;
  z-index: 10;
}
.account-email {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.account-role {
  margin: 0;
  font-size: 12px;
  color: var(--n-66);
}
.account-menu-popover a,
.account-menu-popover .linklike {
  font-size: 14px;
  text-decoration: none;
  color: var(--n-25);
  text-align: left;
}
.account-menu-popover a:hover,
.account-menu-popover .linklike:hover {
  color: var(--blue-54);
}
.linklike {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Кнопки действий в настройках стоят строкой: их немного, и каждая — поступок,
   а не значение поля. */
/* Кнопки — не строка формы, а действие: без воздуха сверху они липнут к полю
   над ними, а без воздуха снизу — к краю раздела. */
.setting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 4px;
}
.quota-exhausted {
  color: var(--red-49);
  font-weight: 600;
}
.totp-setup {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin: 12px 0 4px;
}
.totp-qr {
  width: 168px;
  height: 168px;
  background: var(--n-100);
  border: 1px solid var(--n-93);
  border-radius: 12px;
  padding: 6px;
}
.totp-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  background: var(--n-96);
  border-radius: 8px;
  padding: 7px 10px;
  overflow-wrap: anywhere;
}
.totp-codes pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--n-96);
  border: 1px solid var(--n-93);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 6px 0 0;
  line-height: 1.7;
}

.admin-group {
  margin-bottom: 26px;
}
.admin-group h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--n-66);
  margin: 0 0 10px;
}
.admin-list {
  display: grid;
  gap: 10px;
}
.admin-user {
  border: 1px solid var(--n-93);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--n-100);
}
.admin-user-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-user-email {
  font-weight: 650;
  overflow-wrap: anywhere;
}
.admin-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--n-96);
  color: var(--n-52);
  white-space: nowrap;
}
.admin-role-admin {
  background: var(--violet-96);
  color: var(--violet-54);
}
.admin-status-active {
  background: var(--n-97-2);
  color: var(--teal-51);
}
.admin-status-pending {
  background: var(--yellow-98);
  color: var(--yellow-51);
}
.admin-status-blocked,
.admin-status-rejected {
  background: var(--red-97);
  color: var(--red-49);
}
.admin-user-facts {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--n-66);
}
/* Живёт человек в приложении или уже нет — строка под расходом: полоса дней
   и числа за месяц. Полоса про ритм одного человека, поэтому высота считается
   от его же самого плотного дня; пустой день остаётся волоском, иначе провал
   не читался бы. */
.admin-activity {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.admin-band {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  width: 180px;
  height: 24px;
  /* Полоска-основание вместо столбиков в пустые дни: иначе тридцать приступков
     читаются пунктирной линейкой, а не тишиной. */
  border-bottom: 1px solid var(--n-93);
}
.admin-band-day {
  flex: 1 1 0;
  min-width: 4px;
  border-radius: 2px 2px 0 0;
  background: transparent;
}
.admin-band-day.on {
  background: var(--n-62);
}
.admin-band-day.today {
  background: var(--red-90);
}
.admin-band-day.today.on {
  background: var(--coral);
}
.admin-user-activity {
  margin: 0;
}
.admin-state-asleep {
  background: var(--yellow-98);
  color: var(--yellow-51);
}
.admin-state-new {
  background: var(--n-96);
  color: var(--n-52);
}
.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.admin-user-actions button {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.admin-events {
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.admin-event {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--n-96);
  color: var(--n-52);
}
.admin-event-who {
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .admin-event {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Пределы человека правятся полями прямо в его карточке: их два, они числовые,
   и прежнее значение должно быть видно рядом с новым. */
.admin-limits {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.admin-limit {
  display: grid;
  gap: 4px;
  font-size: 12px;
}
.admin-limit-name {
  color: var(--n-66);
}
.admin-limit input {
  width: 130px;
  padding: 7px 10px;
  border: 1px solid var(--n-87);
  border-radius: 10px;
  background: var(--n-100);
  color: var(--n-25);
  font: inherit;
  font-size: 13px;
}

/* ── меню разметки по «/» ────────────────────────────────────────────────────
   Живёт в body, а не внутри поля: поле прокручивается и обрезает содержимое,
   и список выпадал бы наполовину. Позицию считает slash-menu.js по каретке. */
.slash-menu {
  position: fixed;
  z-index: 40;
  min-width: 260px;
  max-width: 320px;
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
  background: var(--n-100);
  border: 1px solid var(--n-93);
  border-radius: 14px;
  box-shadow: 0 16px 44px var(--orange-21-a10);
}
.slash-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.3;
}
/* Подсветка одна на клавиатуру и мышь: две разные сбивали бы с толку, когда
   рука лежит на клавишах, а курсор случайно висит над списком. */
.slash-option.is-active {
  background: var(--n-96);
}
.slash-title {
  color: var(--n-25);
}
.slash-hint {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--n-66);
  white-space: nowrap;
}

/* ── карточка записи: страница Notion один в один ────────────────────────────
   Открытая запись выглядит как страница Notion в центральном «peek»: белый
   лист со скруглением 10px на тёмной подложке, колонка контента 708px,
   заголовок 40px, строки свойств со значками, разделитель и тело. Палитра и
   метрики сняты с Notion; токены локальны карточке, чтобы остальное
   приложение осталось в своей гамме. */
#review-dialog {
  --nt-bg: #ffffff;
  --nt-text: rgb(55, 53, 47);
  --nt-secondary: rgba(55, 53, 47, 0.65);
  --nt-tertiary: rgba(55, 53, 47, 0.45);
  --nt-divider: rgba(55, 53, 47, 0.09);
  --nt-hr: rgba(55, 53, 47, 0.16);
  --nt-hover: rgba(55, 53, 47, 0.08);
  --nt-code-bg: #f7f6f3;
  --nt-inline-code: #eb5757;
  --nt-inline-code-bg: rgba(135, 131, 120, 0.15);
  --nt-blue: #2383e2;
  --nt-red: #eb5757;
  --nt-mark: rgb(251, 243, 219);
  --nt-table-border: rgb(233, 233, 231);
  --nt-table-head: rgb(247, 247, 245);
  --nt-callout-gray: rgb(241, 241, 239);
  --nt-callout-yellow: rgb(251, 243, 219);
  --nt-callout-red: rgb(253, 235, 236);
  --nt-callout-green: rgb(237, 243, 236);
  --nt-callout-blue: rgb(231, 243, 248);
  /* Размер задают переменные: их правит перетаскивание за край карточки, а
     запомненное значение возвращается при следующем открытии. Окно всё равно
     ограничивает: карточка не выходит за 24px от боковых краёв экрана и за 40px
     от верха и низа (см. «режимы показа карточки» в конце файла). */
  --card-w: 940px;
  width: min(var(--card-w), calc(100vw - 48px));
  height: auto;
  max-width: none;
  max-height: none;
  /* auto по обеим осям: карточка любого размера остаётся по центру, а на
     невысоком экране упирается в 12px сверху и снизу. */
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--nt-bg);
  color: var(--nt-text);
  font-family:
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI Variable Display",
    "Segoe UI",
    Helvetica,
    "Apple Color Emoji",
    Arial,
    sans-serif,
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  box-shadow:
    rgba(15, 15, 15, 0.05) 0 0 0 1px,
    rgba(15, 15, 15, 0.1) 0 3px 6px,
    rgba(15, 15, 15, 0.2) 0 9px 24px;
  /* Прокрутка живёт во внутренней колонке: скроллбар самого диалога втискивался
     бы в скругление и правые углы выглядели бы срезанными. */
  overflow: hidden;
}
:root[data-theme="dark"] #review-dialog {
  --nt-bg: #252525;
  --nt-text: rgba(255, 255, 255, 0.81);
  --nt-secondary: rgba(255, 255, 255, 0.46);
  --nt-tertiary: rgba(255, 255, 255, 0.32);
  --nt-divider: rgba(255, 255, 255, 0.094);
  --nt-hr: rgba(255, 255, 255, 0.14);
  --nt-hover: rgba(255, 255, 255, 0.055);
  --nt-code-bg: #1f1f1f;
  --nt-inline-code: #ff7369;
  --nt-inline-code-bg: rgba(135, 131, 120, 0.25);
  --nt-mark: rgba(250, 177, 67, 0.2);
  --nt-table-border: rgb(63, 63, 63);
  --nt-table-head: rgba(255, 255, 255, 0.03);
  --nt-callout-gray: rgba(255, 255, 255, 0.045);
  --nt-callout-yellow: rgba(250, 177, 67, 0.13);
  --nt-callout-red: rgba(255, 115, 105, 0.13);
  --nt-callout-green: rgba(77, 171, 154, 0.13);
  --nt-callout-blue: rgba(82, 156, 202, 0.13);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #review-dialog {
    --nt-bg: #252525;
    --nt-text: rgba(255, 255, 255, 0.81);
    --nt-secondary: rgba(255, 255, 255, 0.46);
    --nt-tertiary: rgba(255, 255, 255, 0.32);
    --nt-divider: rgba(255, 255, 255, 0.094);
    --nt-hr: rgba(255, 255, 255, 0.14);
    --nt-hover: rgba(255, 255, 255, 0.055);
    --nt-code-bg: #1f1f1f;
    --nt-inline-code: #ff7369;
    --nt-inline-code-bg: rgba(135, 131, 120, 0.25);
    --nt-mark: rgba(250, 177, 67, 0.2);
    --nt-table-border: rgb(63, 63, 63);
    --nt-table-head: rgba(255, 255, 255, 0.03);
    --nt-callout-gray: rgba(255, 255, 255, 0.045);
    --nt-callout-yellow: rgba(250, 177, 67, 0.13);
    --nt-callout-red: rgba(255, 115, 105, 0.13);
    --nt-callout-green: rgba(77, 171, 154, 0.13);
    --nt-callout-blue: rgba(82, 156, 202, 0.13);
  }
}
@media (max-width: 760px) {
  #review-dialog {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  

}
#review-dialog::backdrop {
  background: rgba(31, 29, 27, 0.32);
}
:root[data-theme="dark"] #review-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #review-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
  }
}

/* Колонка страницы: 708px по центру, снизу — воздух, как на пустой странице. */
#review-dialog .review {
  height: 100%;
  margin: 0;
  overflow-y: auto;
  /* Полосу прокрутки не показываем: колесо и трекпад работают, а серый
     столбик у края ломал бы чистый лист. */
  scrollbar-width: none;
  /* Колонка 708px по центру рисуется полями прокручиваемой области. */
  /* Нижний воздух в 20vh был нужен пустой странице; теперь низ держит
     прилипший футер — хватает обычного отступа. */
  padding: 54px max(32px, calc((100% - 708px) / 2)) 28px;
  font-size: 16px;
  line-height: 1.5;
}
#review-dialog .dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  float: none;
  margin: 0;
  z-index: 2;
  background: transparent;
  color: var(--nt-tertiary);
}
#review-dialog .dialog-close:hover {
  background: var(--nt-hover);
  color: var(--nt-secondary);
}
/* Заголовок страницы. */
#review-dialog .review h2 {
  margin: 0 0 10px;
  padding: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--nt-text);
}
/* Кружок у названия — как в Тудуисте и в «Дне». Висит слева от заголовка, когда
   у колонки есть поле, а в узкой карточке встаёт в строку. */
#review-dialog .card-head {
  position: relative;
}
#review-dialog .card-head.with-tick {
  padding-left: 42px;
}
#review-dialog .card-head.with-tick.hang {
  padding-left: 0;
}
#review-dialog .card-tick {
  position: absolute;
  left: 0;
  top: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--nt-tertiary);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
#review-dialog .card-head.hang .card-tick {
  left: -46px;
}
#review-dialog .card-tick svg {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
}
#review-dialog .card-tick:hover,
#review-dialog .card-tick:focus-visible {
  border-color: var(--green);
  color: var(--green);
}
#review-dialog .card-tick.important {
  border-color: var(--red-66);
  background: color-mix(in srgb, var(--red-66) 10%, transparent);
}
#review-dialog .card-tick.late {
  border-color: var(--red-74);
}
#review-dialog .card-tick.meeting:not(.is-done) {
  color: var(--nt-tertiary);
}
#review-dialog .card-tick.meeting:not(.is-done) .card-tick-check,
#review-dialog .card-tick.meeting:not(.is-done):hover .card-tick-hands {
  visibility: hidden;
}
#review-dialog .card-tick.meeting:not(.is-done):hover {
  color: var(--green);
}
#review-dialog .card-tick.meeting:not(.is-done):hover .card-tick-check {
  visibility: visible;
}
#review-dialog .card-tick.is-done {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
#review-dialog .card-tick.is-done:hover {
  background: transparent;
  color: var(--green);
}
#review-dialog .card-tick.is-done .card-tick-hands {
  display: none;
}
#review-dialog .card-tick.just {
  animation: card-tick-pop 0.26s ease-out;
}
@keyframes card-tick-pop {
  40% { transform: scale(0.84); }
  100% { transform: scale(1); }
}
/* Только что открытое дело не принимает нажатий 350 мс — и не подсвечивает
   кружок под курсором, будто оно уже отмечено. */
#review-dialog.armed .card-tick:not(.is-done):hover {
  border-color: var(--nt-tertiary);
  color: transparent;
  cursor: default;
}
#review-dialog .card-tick-repeat {
  position: absolute;
  right: -7px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nt-bg);
  color: var(--nt-secondary);
}
#review-dialog .card-tick-repeat svg {
  width: 11px;
  height: 11px;
}
#review-dialog .review h2.card-title.is-done {
  color: var(--nt-tertiary);
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
}
/* Строка «Сделано» под названием: когда, «Вернуть», итог. */
#review-dialog .card-done {
  margin: 2px 0 8px;
}
#review-dialog .card-done-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 9px;
  font-size: 14.5px;
  color: var(--nt-secondary);
}
#review-dialog .card-done-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  color: var(--green);
}
#review-dialog .card-done-ok svg {
  width: 15px;
  height: 15px;
}
#review-dialog .card-done-sep {
  color: var(--nt-tertiary);
}
#review-dialog .card-done-link {
  appearance: none;
  margin: 0 -4px;
  padding: 1px 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--nt-secondary);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
#review-dialog .card-done-link:hover {
  background: var(--nt-hover);
  color: var(--nt-text);
}

/* Шапка списка, из которого открыли карточку: откуда и который по счёту, и
   стрелки к соседним делам — слева от крестика. */
#review-dialog .card-nav {
  position: absolute;
  top: 12px;
  left: 22px;
  right: 46px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  pointer-events: none;
}
#review-dialog .card-nav > * {
  pointer-events: auto;
}
#review-dialog .card-nav-crumb {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  font-size: 13px;
  color: var(--nt-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#review-dialog .card-nav-crumb b {
  font-weight: 650;
  color: var(--nt-secondary);
}
#review-dialog .card-nav-step {
  appearance: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--nt-tertiary);
  cursor: pointer;
}
#review-dialog .card-nav-step:hover:not(:disabled) {
  background: var(--nt-hover);
  color: var(--nt-secondary);
}
#review-dialog .card-nav-step:disabled {
  opacity: 0.35;
  cursor: default;
}
/* Плашка «Готово · Вернуть · + итог» живёт в самой карточке: общий тост
   прятался бы под окном. */
#review-dialog .card-snack {
  position: absolute;
  left: 50%;
  bottom: 86px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 9px 8px 9px 16px;
  border-radius: 999px;
  background: var(--n-25);
  color: var(--n-100);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
  font-size: 13.5px;
  transform: translateX(-50%);
  white-space: nowrap;
}
#review-dialog .card-snack-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#review-dialog .card-snack-act {
  appearance: none;
  flex: none;
  padding: 2px 10px 2px 12px;
  border: 0;
  border-left: 1px solid var(--n-100-a25);
  background: transparent;
  color: var(--n-100);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#review-dialog .card-snack-act:hover {
  color: var(--tint-auto);
}
/* Разбор закончен: открытых в списке не осталось. */
#review-dialog .card-finish {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-top: 18vh;
  text-align: center;
}
#review-dialog .card-finish .card-tick {
  position: static;
  width: 56px;
  height: 56px;
  border-width: 2.5px;
  cursor: default;
}
#review-dialog .card-finish .card-tick svg {
  width: 30px;
  height: 30px;
}
#review-dialog .review h2.card-finish-title {
  margin: 10px 0 0;
  font-size: 26px;
}
#review-dialog .card-finish-sub {
  margin: 0 0 10px;
  color: var(--nt-secondary);
}
#review-dialog .card-finish-close {
  appearance: none;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--nt-hover);
  color: var(--nt-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
@media (max-width: 760px) {
  #review-dialog .card-tick {
    top: 4px;
  }
}

#review-dialog .review-question {
  font-size: 14px;
  color: var(--nt-red);
}
/* Свойства: колонка имени 160px со значком, значение — обычный текст. */
#review-dialog .review-form {
  display: block;
  margin-top: 0;
  /* Без боковых отступов общего .review-form: строка свойств и форма стоят
     по одному левому краю с заголовком, «Записано» и заметками. */
  padding: 0 0 14px;
  border-bottom: 1px solid var(--nt-divider);
}
#review-dialog .props {
  gap: 2px;
}

#review-dialog .prop {
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 8px;
  min-height: 34px;
  align-items: center;
  border-radius: 4px;
}
#review-dialog .prop:hover {
  background: none;
}
#review-dialog .prop-label {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--nt-secondary);
}
#review-dialog .prop-label:hover {
  background: var(--nt-hover);
}
#review-dialog .prop-icon {
  display: inline-flex;
  flex: none;
  color: var(--nt-tertiary);
}
#review-dialog .prop-icon svg {
  display: block;
}
#review-dialog .props select,
#review-dialog .props input {
  min-height: 30px;
  padding: 3px 8px;
  border: 0;
  border-radius: 4px;
  font-size: 14px;
  color: var(--nt-text);
}
#review-dialog .props select:hover,
#review-dialog .props input:hover {
  border: 0;
  background: var(--nt-hover);
}
#review-dialog .props select:focus,
#review-dialog .props input:focus {
  border: 0;
  outline: 0;
  background: var(--nt-hover);
  box-shadow: inset 0 0 0 1px rgba(35, 131, 226, 0.57);
}
#review-dialog .props input::placeholder {
  color: var(--nt-tertiary);
}
/* «Сделано» — квадратный чекбокс Notion: синяя заливка с белой галкой. */
#review-dialog .completion-button {
  width: 16px;
  height: 16px;
  margin: 0 0 0 8px;
  border: 1.4px solid var(--nt-tertiary);
  border-radius: 3px;
  background: none;
  color: transparent;
}
#review-dialog .completion-button:hover {
  border-color: var(--nt-secondary);
}
#review-dialog .completion-button.is-done {
  border-color: var(--nt-blue);
  background: var(--nt-blue);
  color: #fff;
}
#review-dialog .completion-button::before {
  font-size: 10px;
}
/* Тело страницы: без рамок и подложек, текст сразу на листе. */
#review-dialog .prop-section {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--nt-tertiary);
}
#review-dialog .card-body > .card-markdown {
  min-height: 200px;
}
#review-dialog .md-field {
  padding: 6px 0;
  border-radius: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--nt-text);
}
#review-dialog .md-field:hover,
#review-dialog .md-field:focus {
  background: none;
  box-shadow: none;
}
#review-dialog .md-field[data-empty="true"]::before {
  color: var(--nt-tertiary);
}
#review-dialog .card-body-hint {
  font-size: 12px;
  color: var(--nt-tertiary);
  visibility: hidden;
}
#review-dialog .card-body-hint.shown { visibility: visible; }
/* Разметка в карточке — блоки Notion: заголовки, цитаты, код, выноски. */
#review-dialog .md-field .md-heading {
  font-weight: 600;
}
#review-dialog .md-field .md-h1 { font-size: 1.875em; }
#review-dialog .md-field .md-h2 { font-size: 1.5em; }
#review-dialog .md-field .md-h3 { font-size: 1.25em; }
#review-dialog .md-field .md-h4,
#review-dialog .md-field .md-h5,
#review-dialog .md-field .md-h6 { font-size: 1em; }
#review-dialog .md-field > .md-line:has(.md-h1) { margin-top: 24px; }
#review-dialog .md-field > .md-line:has(.md-h2) { margin-top: 17px; }
#review-dialog .md-field > .md-line:has(.md-h3) { margin-top: 11px; }
#review-dialog .md-field > .md-line:first-child { margin-top: 0; }
#review-dialog .md-block .md-h1 { font-size: 1.875em; font-weight: 600; }
#review-dialog .md-block .md-h2 { font-size: 1.5em; font-weight: 600; }
#review-dialog .md-block .md-h3 { font-size: 1.25em; font-weight: 600; }
#review-dialog .md-field .md-quote,
#review-dialog .md-block blockquote {
  border-left: 3px solid var(--nt-text);
  padding-left: 14px;
  color: var(--nt-text);
  font-style: normal;
  background: none;
}
#review-dialog .md-block blockquote {
  margin: 6px 0;
  padding-top: 2px;
  padding-bottom: 2px;
}
#review-dialog code {
  border-radius: 3px;
  padding: 0.1em 0.4em;
  background: var(--nt-inline-code-bg);
  color: var(--nt-inline-code);
  font-family: SFMono-Regular, Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace;
  font-size: 85%;
}
#review-dialog pre {
  border: 0;
  border-radius: 4px;
  padding: 16px;
  background: var(--nt-code-bg);
}
#review-dialog pre code {
  padding: 0;
  background: none;
  color: var(--nt-text);
  font-size: 87.5%;
}
#review-dialog mark {
  background: var(--nt-mark);
  color: inherit;
}
#review-dialog hr {
  border: 0;
  border-top: 1px solid var(--nt-hr);
  margin: 10px 0;
}
#review-dialog .md-field .md-rule {
  color: var(--nt-tertiary);
}
#review-dialog .md-mark {
  color: var(--nt-tertiary);
}
#review-dialog a,
#review-dialog .md-link,
#review-dialog .md-wikilink {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--nt-hr);
  text-underline-offset: 2px;
}
#review-dialog .md-field .md-checkbox-done,
#review-dialog .md-block .md-task-done .md-checkbox {
  color: var(--nt-blue);
}
#review-dialog .md-field .md-task-done,
#review-dialog .md-block .md-task-done {
  color: var(--nt-secondary);
  text-decoration: line-through;
}
#review-dialog .md-table {
  font-size: 14px;
}
#review-dialog .md-table th,
#review-dialog .md-table td {
  border: 1px solid var(--nt-table-border);
  padding: 6px 9px;
}
#review-dialog .md-table th {
  background: var(--nt-table-head);
  font-weight: 500;
  text-align: left;
}
/* Выноски: мягкие подложки Notion вместо цветных полос. */
#review-dialog .md-field .md-callout-head,
#review-dialog .md-field .md-callout-body {
  border-left: 0;
}
#review-dialog :is(.md-field .md-callout-head, .md-field .md-callout-body, .md-block .md-callout):is(
    .md-callout-info, .md-callout-note, .md-callout-example, .md-callout-quote,
    .md-callout-cite, .md-callout-abstract, .md-callout-summary, .md-callout-tldr) {
  background: var(--nt-callout-gray);
}
#review-dialog :is(.md-field .md-callout-head, .md-field .md-callout-body, .md-block .md-callout):is(
    .md-callout-warning, .md-callout-caution, .md-callout-attention) {
  background: var(--nt-callout-yellow);
}
#review-dialog :is(.md-field .md-callout-head, .md-field .md-callout-body, .md-block .md-callout):is(
    .md-callout-danger, .md-callout-error, .md-callout-bug, .md-callout-failure,
    .md-callout-fail, .md-callout-missing) {
  background: var(--nt-callout-red);
}
#review-dialog :is(.md-field .md-callout-head, .md-field .md-callout-body, .md-block .md-callout):is(
    .md-callout-success, .md-callout-check, .md-callout-done, .md-callout-tip, .md-callout-hint) {
  background: var(--nt-callout-green);
}
#review-dialog :is(.md-field .md-callout-head, .md-field .md-callout-body, .md-block .md-callout):is(
    .md-callout-question, .md-callout-help, .md-callout-faq, .md-callout-todo, .md-callout-important) {
  background: var(--nt-callout-blue);
}
#review-dialog .md-block .md-callout {
  border: 0;
  border-radius: 4px;
  padding: 16px 16px 16px 12px;
}
/* Вложения и источник — служебные ряды внизу страницы. */
#review-dialog .card-files {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}
/* Кнопка вложения живёт в строке-шапке футера и выглядит тихим текстом с
   плюсом, как соседние «Источник и версия» и «Удалить запись», а не пилюлей. */
#review-dialog .card-files-head > button {
  margin-left: auto;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: 13px;
  color: var(--nt-secondary);
  box-shadow: none;
}
#review-dialog .card-files-head > button::before {
  content: "+";
  margin-right: 6px;
  color: var(--nt-tertiary);
}
#review-dialog .card-files-head > button:hover {
  border: 0;
  background: var(--nt-hover);
  color: var(--nt-text);
}
#review-dialog .file-tile {
  border-radius: 4px;
}

#review-dialog .entry-meta {
  color: var(--nt-tertiary);
}

/* Тело — прямо на листе: рамка и подложка остались от textarea-эпохи. */
#review-dialog #card-body-editor {
  min-height: 72px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  font-size: 15px;
}
#review-dialog .card-body {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}
/* Внутри выноски цитатная полоса не рисуется: у Notion это один мягкий блок. */
#review-dialog .md-field .md-callout-head .md-callout-line,
#review-dialog .md-field .md-callout-body .md-quote {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}
/* Заголовок выноски — обычным цветом текста: цвет несёт подложка, а роль
   значка играет сам маркер [!tip]. */
#review-dialog .md-field .md-callout-line .md-callout-title {
  color: var(--nt-text);
}

/* ── чистовик поля: маркеры видны только на строке с кареткой ────────────────
   Как в Notion и Typora: готовый текст без серого синтаксиса, а строка, в
   которой стоит каретка, раскрывает маркеры для правки. Текст модели при этом
   не меняется — прячет и показывает только CSS. */
.md-line:not(.is-current) .md-mark,
.md-line:not(.is-current) .md-callout-kind {
  display: none;
}
/* Номер в нумерованном списке — не шум, а содержимое: остаётся и темнеет. */
.md-line:not(.is-current) .md-ordered .md-mark {
  display: inline;
  color: inherit;
}
/* Маркер списка рисуем сами: точка вместо дефиса. */
.md-line:not(.is-current) .md-bullet:not(.md-ordered):not(.md-bullet-task)::before {
  content: "•";
  display: inline-block;
  /* ширина как у спрятанного «- » (≈0.7em в Inter): текст не прыгает, когда
     каретка приходит на строку и маркер снова занимает своё место */
  width: 0.7em;
  /* Общее правило ставит точку абсолютно поверх спрятанного дефиса. Здесь
     дефис скрыт, и точка должна занимать место сама — иначе текст прыгает к
     краю, а точка ложится на первую букву, пока каретка на другой строке. */
  position: static;
  left: auto;
}
/* Чекбокс задачи — настоящий квадрат: текст «[x]» уходит в нулевой кегль,
   геометрия и галка рисуются стилем. Клик по нему по-прежнему переключает. */
.md-line:not(.is-current) .md-checkbox {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 8px 0 1px;
  border: 1.4px solid var(--n-78);
  border-radius: 3px;
  vertical-align: middle;
  transform: translateY(-1px);
  font-size: 0;
  line-height: 15px;
  text-align: center;
  cursor: pointer;
}
.md-line:not(.is-current) .md-checkbox-done {
  border-color: var(--blue-54, #2383e2);
  background: var(--blue-54, #2383e2);
}
.md-line:not(.is-current) .md-checkbox-done::after {
  content: "✓";
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
/* Разделитель — линия, а не три дефиса. */
.md-line:not(.is-current) .md-rule {
  position: relative;
  display: inline-block;
  width: 100%;
  color: transparent;
}
.md-line:not(.is-current) .md-rule::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  border-top: 1px solid var(--line);
}
/* В карточке чекбокс и линия говорят на палитре Notion. */
#review-dialog .md-line:not(.is-current) .md-checkbox {
  border-color: var(--nt-tertiary);
}
#review-dialog .md-line:not(.is-current) .md-checkbox-done {
  border-color: var(--nt-blue);
  background: var(--nt-blue);
}
#review-dialog .md-line:not(.is-current) .md-rule::after {
  border-top-color: var(--nt-hr);
}

/* ── страница «Обзор»: отчёты по записям ─────────────────────────────────────
   Правила из концепта reports-concept.html: списки важнее графиков, каждая
   строка открывает карточку записи, смысл назван словом, цвет — помощник. */
.reports-page {
  max-width: 980px;
  margin: 0 auto;
}
.reports-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}
.reports-tabs {
  display: flex;
  gap: 16px;
}
.reports-tabs button {
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 2px 0 6px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.reports-tabs button[aria-pressed='true'] {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--ink);
}
.reports-period,
.reports-daynav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 99px;
  padding: 3px;
}
.reports-period button,
.reports-daynav button {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--muted);
  border-radius: 99px;
  padding: 4px 12px;
  white-space: nowrap;
}
.reports-period button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}
.reports-daynav button {
  font-size: 15px;
  line-height: 1;
  padding: 3px 10px 5px;
}
.reports-daynav button:hover:not([disabled]) {
  background: var(--hairline);
}
.reports-daynav button[disabled] {
  opacity: 0.3;
  cursor: default;
}
#reports-day-label {
  font-size: 12px;
  color: var(--ink);
  padding: 0 6px;
  white-space: nowrap;
}
.report-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.report-counter {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 16px 12px;
}
.report-counter .num {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.report-counter .num.bad {
  color: var(--orange-54);
}
.report-counter .num.good {
  color: var(--green);
}
.report-counter .cap {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.report-counter .sub {
  font-size: 11.5px;
  color: var(--n-72);
  margin-top: 5px;
}
.report-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 19px 17px;
  margin-bottom: 14px;
}
.report-card h3 {
  font-size: 13.5px;
  margin: 0 0 3px;
  letter-spacing: -0.1px;
}
.report-card .report-hint {
  font-size: 12px;
  color: var(--n-72);
  margin: 0 0 10px;
}
.report-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.report-card-head .right {
  margin-left: auto;
  font-size: 12px;
  color: var(--n-72);
  white-space: nowrap;
}
.report-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.report-grid-2 {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.report-grid-3 > .report-card,
.report-grid-2 > .report-card {
  margin-bottom: 0;
}
/* пульс */
.report-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 104px;
  margin-top: 6px;
}
.report-chart .col {
  flex: 1;
  max-width: 44px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}
.report-chart .seg {
  border-radius: 2.5px;
  min-height: 3px;
  display: block;
}
.report-chart .col.empty::after {
  content: '';
  display: block;
  height: 3px;
  border-radius: 2.5px;
  background: var(--hairline);
}
.report-chart-labels {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}
.report-chart-labels span {
  flex: 1;
  max-width: 44px;
  min-width: 0;
  text-align: center;
  font-size: 10.5px;
  color: var(--n-72);
  white-space: nowrap;
}
.report-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin-top: 14px;
}
.report-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.report-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.report-dot.task { background: var(--type-todo); }
.report-dot.meeting_event { background: var(--type-meeting); }
.report-dot.note { background: var(--type-note); }
.report-dot.outcome_decision { background: var(--type-outcome); }
.report-dot.idea_question { background: var(--type-auto); }
/* списки-хвосты: строка открывает карточку записи */
.report-items {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.report-items li {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 9px;
  font-size: 13.5px;
  cursor: pointer;
}
.report-items li:hover {
  background: var(--hairline);
}
.report-items .report-dot {
  width: 7px;
  height: 7px;
  position: relative;
  top: -1px;
}
.report-items .t {
  min-width: 0;
  overflow-wrap: anywhere;
}
.report-items .meta {
  margin-left: auto;
  flex: none;
  font-size: 11.5px;
  color: var(--n-72);
  white-space: nowrap;
  padding-left: 10px;
}
.report-items .meta.bad { color: var(--orange-54); }
.report-items .meta.ok { color: var(--green); }
.report-empty {
  font-size: 13px;
  color: var(--n-72);
  padding: 6px 0 2px;
}
/* полосы проектов и расходов */
.report-bars { margin-top: 8px; }
.report-bar {
  display: grid;
  grid-template-columns: minmax(90px, 130px) 1fr 56px;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
}
.report-bar .name {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-bar .name small {
  display: block;
  font-size: 11px;
  color: var(--n-72);
}
.report-bar .track {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: var(--hairline);
  overflow: hidden;
}
.report-bar .fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--n-23-a22);
}
.report-bar .fill.cost { background: var(--type-outcome); opacity: 0.55; }
.report-bar .n {
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.report-stale {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--hairline);
}
.report-stale .lbl,
.report-chip-lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--n-72);
  margin: 0 0 4px;
}
.report-chip-lbl { margin-top: 14px; }
.report-stale .row {
  font-size: 13px;
  color: var(--orange-51);
  padding: 3px 0;
}
.report-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
.report-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  background: var(--hairline);
  border-radius: 99px;
  padding: 4px 11px;
}
.report-chip .n {
  color: var(--n-72);
  font-size: 11px;
}
.report-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.report-fact {
  font-size: 13.5px;
  color: var(--muted);
}
.report-fact b {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.4px;
  margin-bottom: 2px;
}
.reports-view > .empty { padding: 18px 2px; }
@media (max-width: 760px) {
  .report-counters { grid-template-columns: 1fr 1fr; gap: 9px; }
  .report-grid-3, .report-grid-2 { grid-template-columns: 1fr; }
  .reports-period, .reports-daynav { margin-left: 0; }
}

/* ── снимки из буфера в карточке ввода ───────────────────────────────────────
   ⌘V со скриншотом кладёт картинку сюда; вложение уедет вместе с записью. */
.capture-shots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 0;
}
.capture-shot {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.capture-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Вся плитка — кнопка просмотра; крестик лежит поверх неё в углу. */
.capture-shot .shot-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
/* Крестик лежит на самом снимке, а снимок бывает любым: тёмный кружок со
   светлой каймой читается и на тёмном скриншоте, и на светлом — тема тут ни
   при чём. */
.capture-shot .shot-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 99px;
  border: 0;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.92), 0 1px 3px rgba(0, 0, 0, 0.45);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.capture-shot .shot-remove:hover { background: rgba(0, 0, 0, 0.88); }
.report-chart .seg {
  width: auto;
  height: auto;
  border-radius: 2.5px;
}

/* ── статус записи: «значок и слово» ─────────────────────────────────────────
   Цвета — семантические поверх общей шкалы: в тёмной теме сама шкала светлеет,
   отдельных тёмных значений здесь не нужно. */
:root {
  --st-done: var(--green);
  --st-late: var(--orange-54);
  --st-today: var(--orange-56);
  --st-ontime: var(--blue-61);
  --st-none: var(--n-62);
}

/* ── доска: дела как база в Notion ──────────────────────────────────────────
   Колонки без фона, подпись колонки — цветная пилюля со счётчиком; карточка —
   белый лист с тонкой рамкой и свойствами строками. Панель над доской: виды
   слева, инструменты справа. Цвета пилюль и чипов — палитра оформления текста
   (--fmt-*), одна на всё приложение. */
.board-columns {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  overflow-x: auto;
  /* Лента колонок — во всю ширину окна, а первая колонка стоит по краю шапки:
     поле ленты равно полю страницы, и прокрученные колонки уходят под поле к
     краю окна, а не обрезаются посреди экрана. */
  margin: 0 calc(-1 * var(--header-gutter));
  padding: 6px var(--header-gutter) 26px;
  /* Полосу прокрутки не показываем: колесо, трекпад и перетаскивание работают,
     а серый столбик под колонками читался как чужой элемент интерфейса. */
  scrollbar-width: none;
}
.board-columns::-webkit-scrollbar {
  display: none;
}
/* Полная ширина считается от 100vw, а она включает вертикальную полосу
   прокрутки там, где та занимает место: страница не должна из-за этого
   получить горизонтальный скролл. Горизонтально страница не едет нигде. */
html,
body {
  overflow-x: hidden;
}
/* рука на пустом месте: фон доски и колонок тянется влево-вправо */
.board-columns { cursor: grab; }
.board-columns.panning,
.board-columns.panning * { cursor: grabbing; }
.board-columns.panning { user-select: none; }
/* Колонка — такая же панель, как карточки колонок на «Сегодня» и в «Обзоре»:
   тонкая рамка, скругление 14px, тихий фон. Цвет колонки — точкой перед
   названием, как точки типов в поле ввода. */
.board-column {
  flex: 0 0 280px;
  min-width: 0;
  min-height: 64px;
  --tone: var(--fmt-gray);
  --tone-bg: var(--fmt-bg-gray);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--n-98-4);
  padding: 9px 9px 11px;
}
.board-column.dragging-column { opacity: 0.55; }
.board-column.col-drop-left { box-shadow: -3px 0 0 var(--focus); }
.board-column.col-drop-right { box-shadow: 3px 0 0 var(--focus); }
.board-column.ghost {
  flex-basis: 200px;
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 2px;
  background: none;
  border: 1.5px dashed var(--line);
}
.board-column.ghost .board-add-button { margin: 0; }
/* «+ Колонка» у групп — не поле для названия, а выбор из значений, которых на доске
   ещё нет: открывается на месте, список стоит прямо в пунктирной рамке. Когда
   колонок нет вовсе, рамка шире и говорит, что делать. */
/* Общий .ghost (кнопка-пилюля) тянет за собой nowrap и курсор-руку — здесь это колонка с текстом. */
.board-column.ghost.pick { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; white-space: normal; }
.board-column.ghost.pick.lonely { flex-basis: 260px; }
.board-column.ghost.pick.is-open { background: var(--n-98-4); border-style: solid; }
.board-lanes-hint { margin: 6px 8px 2px; font-size: 13px; line-height: 1.4; color: var(--muted); cursor: default; }
.board-pick-list { display: grid; gap: 1px; max-height: 340px; padding: 2px 2px 4px; overflow: auto; }
.board-pick-list[hidden] { display: none; }
.board-pick-item {
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.board-pick-item:hover,
.board-pick-item:focus-visible { background: var(--hairline); }
/* Шапка: название, счётчик и по наведению «⋯» и «+». */
.board-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 2px 5px 9px;
  cursor: grab;
}

.board-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--ink);
}
/* В шапке пилюля без заливки: имя чернилами, цвет — точкой перед ним. */
.board-col-head .board-pill,
.board-segment .board-pill { background: none; padding: 0; color: var(--ink); min-width: 0; }
.board-col-name { cursor: text; }
.board-col-head a.board-col-name { color: inherit; text-decoration: none; cursor: pointer; }
.board-col-head a.board-col-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.board-col-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-col-count { font-size: 13px; color: var(--n-72); flex: none; font-variant-numeric: tabular-nums; }
.board-col-tools {
  display: flex;
  gap: 2px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s;
}
.board-column:hover .board-col-tools,
.board-column:focus-within .board-col-tools,
.board-col-tools:has([open]) { opacity: 1; }
.board-col-plus,
.board-menu summary {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--n-72);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.board-col-plus:hover,
.board-menu summary:hover { background: var(--n-25-a8); color: var(--ink); }
.board-col-input {
  font: inherit;
  font-size: 13px;
  width: 100%;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
}
.board-menu { position: relative; flex: none; }
.board-menu summary { list-style: none; }
.board-menu summary::-webkit-details-marker { display: none; }
.board-menu-popover {
  position: absolute;
  right: 0;
  top: 26px;
  z-index: 5;
  display: grid;
  min-width: 190px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 12px 30px var(--n-23-a22);
}
.board-menu-popover > button {
  font: inherit;
  font-size: 13px;
  text-align: left;
  border: 0;
  background: none;
  color: var(--ink);
  border-radius: 7px;
  padding: 7px 9px;
  cursor: pointer;
}
.board-menu-popover > button:hover { background: var(--hairline); }
/* Что будет с колонкой, если в ней есть дела, — словами, а не только подсказкой. */
.board-menu-note { max-width: 220px; margin: 0; padding: 4px 9px 6px; font-size: 12px; line-height: 1.35; color: var(--muted); }

/* Цвета: пилюли колонок, чипы проектов и типов, аватары. */
.c-gray { --tone: var(--fmt-gray); --tone-bg: var(--fmt-bg-gray); }
.c-brown { --tone: var(--fmt-brown); --tone-bg: var(--fmt-bg-brown); }
.c-orange { --tone: var(--fmt-orange); --tone-bg: var(--fmt-bg-orange); }
.c-yellow { --tone: var(--fmt-yellow); --tone-bg: var(--fmt-bg-yellow); }
.c-green { --tone: var(--fmt-green); --tone-bg: var(--fmt-bg-green); }
.c-blue { --tone: var(--fmt-blue); --tone-bg: var(--fmt-bg-blue); }
.c-purple { --tone: var(--fmt-purple); --tone-bg: var(--fmt-bg-purple); }
.c-pink { --tone: var(--fmt-pink); --tone-bg: var(--fmt-bg-pink); }
.c-red { --tone: var(--fmt-red); --tone-bg: var(--fmt-bg-red); }
[class*="c-"] { background: var(--tone-bg); color: var(--tone); }

.board-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 44px;
}
/* Карточка — та же плашка, что запись в колонке «Сегодня»: скругление 12px,
   без рамки и тени, фон по состоянию (песочный — ожидает, розовый —
   просрочено), у просроченного заголовок красный. */
.board-card {
  display: flex;
  gap: 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  cursor: grab;
  transition: background 0.12s;
}
.board-card.waiting { background: var(--tint-wait); border-color: var(--tint-wait-line); }
.board-card.overdue { background: var(--tint-late); border-color: var(--tint-late-line); }
.board-card.overdue .board-title,
.board-card.overdue .board-meta { color: var(--red-49); }
.board-card.dragging { opacity: 0.45; }
.board-done {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--n-87-2);
  border-radius: 50%;
  background: var(--n-100);
  flex: none;
  cursor: pointer;
  color: transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
}
.board-card.overdue .board-done { border-color: var(--red-74); }
.board-done:hover { border-color: var(--green); color: var(--green); }
.board-done::before { content: "✓"; }
/* Встреча: в кружке часовые стрелки; наведение обещает то же «готово». */
.board-done.meeting { color: var(--n-66); border-color: var(--n-66); }
.board-done.meeting::before { content: none; }
.board-done.meeting svg { width: 16px; height: 16px; display: block; margin: 0 auto; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.board-done.meeting:hover { color: var(--green); border-color: var(--green); }
/* Закрытое дело: залитый кружок, наведение намекает, что закрытие снимается. */
.board-done.is-done { border-color: var(--green); background: var(--green); color: var(--paper); }
.board-done.is-done:hover { background: transparent; color: var(--green); }
.board-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.project-picker { position: relative; min-width: 0; }
.project-picker input { width: 100%; }
.project-selection { display: inline-flex; align-items: center; max-width: 100%; border-radius: 99px; background: var(--fmt-bg-blue); color: var(--fmt-blue); }
.project-selected-name, .project-remove { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 7px 10px; }
.project-selected-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-remove { flex: 0 0 auto; padding-left: 2px; }
.project-options { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin-top: 4px; padding: 4px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 5px 20px var(--hairline); }
.project-option { display: block; width: 100%; border: 0; border-radius: 6px; background: transparent; color: var(--ink); padding: 8px; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.project-option:hover, .project-option[aria-selected="true"] { background: var(--fmt-bg-blue); }
.project-options-empty { margin: 4px; color: var(--muted); font-size: 12px; }
.board-title-row { display: flex; align-items: flex-start; gap: 6px; }
.board-remove {
  flex: 0 0 auto; width: 20px; height: 20px; margin-left: auto; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 0.12s;
}
.board-card:hover .board-remove, .board-remove:focus-visible { opacity: 1; }
.board-remove:hover { background: var(--n-25-a8); color: var(--red-50); }
@media (hover: none) { .board-remove, .prop-clear { opacity: 1; } }
.board-title {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink);
  padding: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.board-title:hover { text-decoration: underline; text-decoration-color: var(--n-79); text-underline-offset: 3px; }
.board-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  align-items: center;
  font-size: 11px;
  color: var(--n-63);
}
/* Метки — те же пилюли, что в колонках «Сегодня»: мелкие, круглые, цветом по
   смыслу: тип — бирюзовым или розовым, проект — синим, срок — серым или по
   состоянию, «важно» — оранжевым. */
.btag[class*=" c-"], .btag.kind, .btag.project, .btag.tag, .btag.due, .btag.files, .btag.parent {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 10px;
  line-height: 1.4;
  background: var(--hairline);
  color: var(--n-52);
}
.btag.kind.task { background: var(--n-97-3); color: var(--teal-49); }
.btag.kind.meeting { background: var(--pink); color: var(--red-49-2); }
.btag.project { background: var(--n-97); color: var(--blue-46); font-weight: 600; }
.btag.project::before { content: none; }
.btag.urgent.c-red { background: var(--red-97-2); color: var(--orange-54); font-weight: 400; }
.btag.c-gray { background: var(--n-97); color: var(--blue-54-2); }

.board-who { display: inline-flex; align-items: center; gap: 6px; }
.board-ava {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  flex: none;
}

/* Чип свойства: мягкая заливка и текст того же тона. Без класса цвета — как
   раньше, серым текстом без фона (срок, «сделано»). */
.btag { color: var(--n-62); white-space: nowrap; }
.btag[class*=" c-"] { padding: 1px 6px; border-radius: 3px; line-height: 1.5; }
.btag.urgent { font-weight: 600; }
.btag.due.soon { background: var(--tint-wait); color: var(--yellow-51); }
.btag.due.late { background: var(--tint-late); color: var(--red-50); font-weight: 600; }
.board-card.overdue .btag.due.late { background: var(--n-100-2); }
/* «0/2» у дела: подзадачи отдельными строками не стоят (ни в «Дне» и «Сделано»,
   ни на доске при «Подзадачи: Скрывать»), у названия — тихая метка: значок вложенных строк и сколько
   сделано из скольких. Все сделаны — зелёная. Метка кнопка: открывает карточку
   на «Подзадачах». Стоит у полоски прогресса (доска и список) и в строках «Сегодня». */
.sub-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 3px;
  margin: 0;
  padding: 1px 6px 1px 4px;
  border: 0;
  border-radius: 99px;
  background: none;
  color: var(--n-62);
  font: inherit;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}
.sub-badge-icon { display: inline-flex; width: 13px; height: 13px; }
.sub-badge-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sub-badge:hover { background: var(--hairline); color: var(--ink); }
.sub-badge:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sub-badge.all-done { color: var(--green); }
.sub-badge.all-done:hover { background: var(--n-97-2); color: var(--green); }
/* Просроченное красит всю мелкую строку дела; метка остаётся тихой. */
.entry.overdue .entry-meta .sub-badge:not(.all-done) { color: var(--n-62); }
/* Полоска подзадач у родителя на доске и в списке: под названием тонкая полоска
   прогресса (заполненная часть зелёная, дорожка — линия) с той же меткой «1/2».
   Сами подзадачи строками внутри карточки не стоят: при «Подзадачи: Показывать»
   они стоят на доске своими карточками, при «Скрывать» их нет. */
.sub-map { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sub-progress { display: flex; align-items: center; gap: 5px; min-width: 0; }
.sub-bar {
  flex: 1 1 auto;
  min-width: 24px;
  height: 4px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.sub-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width 0.25s ease;
}
.sub-progress > .sub-badge { padding-right: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sub-bar-fill { transition: none; }
}
/* «↳ Родитель» у подзадачи, вставшей на доску своей карточкой: мелкая метка под
   названием, та же серая пилюля, что у остальных меток дела (.btag); длинное
   название родителя обрезается многоточием и читается целиком в подсказке. */
.btag.parent { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.board-body > .btag.parent { align-self: flex-start; }
/* В списке метка и полоска — строки сетки под названием; полоска не растягивается на всю ширину ленты. */
.g-row > .btag.parent { grid-column: 2 / -1; justify-self: start; }
.g-row > .sub-map { grid-column: 2 / -1; }
.g-row .sub-progress { max-width: 280px; }
.board-drop {
  height: 3px;
  border-radius: 99px;
  background: var(--focus);
  margin: -1px 3px;
  flex: none;
}
.board-add { margin-top: 6px; padding: 0 2px; }
/* Приглашение «+ Дело в …» внизу колонки — пунктирная карточка коралловым, с лёгкой
   подложкой и скруглением карточек. Видна по наведению на колонку и при фокусе
   внутри (с клавиатуры), а там, где наведения нет, — всегда. Место за ней
   отведено и когда она не видна: колонка не подпрыгивает под мышью. */
.board-column .board-add { opacity: 0; transition: opacity 0.15s; }
.board-column:hover .board-add,
.board-column:focus-within .board-add,
.board-column .board-add:has(input:not([hidden])) { opacity: 1; }
@media (hover: none) { .board-column .board-add { opacity: 1; } }
.board-add .board-add-button {
  padding: 9px 12px;
  border: 1.5px dashed var(--coral);
  border-radius: 12px;
  background: color-mix(in srgb, var(--coral) 6%, var(--paper));
  color: var(--coral);
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-add .board-add-button:hover { background: color-mix(in srgb, var(--coral) 12%, var(--paper)); color: var(--coral); }
.board-add-button {
  font: inherit;
  font-size: 13px;
  border: 0;
  background: none;
  color: var(--n-62);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  width: 100%;
  text-align: left;
}
.board-add-button:hover { background: var(--n-25-a8); color: var(--ink); }
.board-add input,
.board-column.ghost input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}

/* заголовок карточки правится на месте: поле выглядит тем же заголовком */
#review-dialog .review h2.card-title {
  cursor: text;
  border-radius: 6px;
}
#review-dialog .review h2.card-title:hover { background: var(--nt-hover); }
#review-dialog .card-title-edit {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 6px;
  background: var(--nt-hover);
  font-family: inherit;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--nt-text);
  resize: none;
  overflow: hidden;
}

/* ── страница дел: края — по верхней строке ──────────────────────────────────
   Заголовок, виды и инструменты стоят в той же колонке, что знак «Кизуна» и
   аватар: страница во всю ширину окна, а поля у неё — поля шапки. Раньше доска
   начиналась у левого края окна, и на широком мониторе «Дела» и «+ Дело»
   разъезжались по углам, пока верхняя строка стояла по центру. Лента колонок —
   во всю ширину (см. .board-columns). Список — колонка чтения по центру окна, и
   в нём шапка доски ужимается до той же колонки (ниже): так попросили, хотя
   при переходе между видами шапка меняет ширину. */
main:has(> #board:not([hidden])) { max-width: none; padding-left: 0; padding-right: 0; }
.board-page { padding: 0 var(--header-gutter); }
.board-page .page-heading { margin-bottom: 8px; }
.board-page .board-controls{ margin-right: 0; }

/* Панель над доской: виды слева с подчёркиванием активного, инструменты
   справа — как строка над базой в Notion. */
.board-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 24px 14px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.board-tools > button{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  color: var(--n-52);
  font: inherit;
  font-size: 13.5px;
  line-height: 1;
  white-space: nowrap;
}

.board-tools > button:hover{ background: var(--n-25-a8); color: var(--ink); }

.board-tools { display: flex; align-items: center; gap: 2px; }

.board-new {
  background: var(--fmt-blue);
  color: var(--n-100);
  font-weight: 600;
  padding: 6px 12px;
  margin-left: 6px;
}
.board-tools > .board-new:hover { background: var(--fmt-blue); color: var(--n-100); filter: brightness(1.08); }

.board-search {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 8px;
  border-radius: 6px;
  color: var(--n-52);
}
.board-search:hover, .board-search:focus-within { background: var(--n-25-a8); color: var(--ink); }
.board-search svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; flex: none; }
.board-search input {
  width: 60px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  padding: 5px 4px;
  outline: 0;
  transition: width 0.15s;
}
.board-search input:focus, .board-search input:not(:placeholder-shown) { width: 160px; }
.board-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.board-column.drop-over {
  box-shadow: inset 0 0 0 2px var(--focus);
  border-radius: 10px;
}

/* «Сделано» — обычная колонка ленты: стоит в потоке, уезжает при прокрутке и
   тянется за заголовок, как остальные; от них её отличает только зелёная
   подложка. Меню нет; карточки зачёркнуты, кружок залит и возвращает дело в
   работу. */
.board-done-column {
  border-color: color-mix(in srgb, var(--green) 38%, var(--line));
  background: color-mix(in srgb, var(--green) 7%, var(--paper));
}
.board-done-column.done-drop { box-shadow: inset 0 0 0 2px var(--green); }
.board-done-empty { margin: 4px 6px 8px; font-size: 12.5px; color: var(--muted); }
.board-card.closed { cursor: default; background: transparent; }
.board-card.closed .board-title { text-decoration: line-through; text-decoration-color: var(--n-79); color: var(--muted); }

/* ── доска: вид и группировка ────────────────────────────────────────────────
   Вид — как рисовать (доска или список), группировка — по каким полям
   раскладывать; полей можно взять сколько угодно, каждое следующее вкладывается
   в предыдущее. У каждого поля свой цвет: рамка, подложка и заголовок группы
   красятся им — вложенные карточки в рамке, как матрёшка, без толстых кромок над
   колонками и без подчёркиваний. Цвета — токены палитры, в тёмной теме они
   переворачиваются сами. */
:root {
  --f-col: var(--blue-54);
  --f-day: var(--orange-56);
  --f-who: var(--violet-54);
  --f-proj: var(--teal-49);
  --f-src: var(--n-52);
  /* Статус — не поле-группа, цвета у него нет: плашка нейтральная. */
  --f-status: var(--n-52);
}
.board-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px 14px;
  font-size: 13px;
  color: var(--muted);
}
.board-bar-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n-66);
  font-weight: 650;
}
.board-seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--paper);
}
.board-seg button {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 11px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.board-seg button:hover { color: var(--ink); }
.board-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.board-grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.board-lv {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 2px 2px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fc) 12%, var(--paper));
}
.board-lv i { margin-right: 4px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--fc); }
.board-lv select {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.board-then { padding: 0 2px; color: var(--n-66); }
.board-lv-remove,
.board-cond-x {
  padding: 0 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--n-66);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.board-lv-remove:hover,
.board-cond-x:hover { background: var(--n-25-a8); color: var(--ink); }
.board-lv-add,
.board-cond-add {
  padding: 3px 9px;
  border: 1px dashed var(--n-87);
  border-radius: 8px;
  background: transparent;
  color: var(--blue-54);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.board-lv-add:hover,
.board-cond-add:hover { background: var(--n-25-a8); }
.board-lv-none { color: var(--n-66); }
.board-hint { margin-left: auto; color: var(--muted); }

/* Фильтр: кнопка над доской и строка условий под панелью. Плашка красится цветом
   поля, как плашка группировки, — подложкой, без полос слева; у «Статуса» цвет
   нейтральный. Кнопка подсвечена, пока фильтр что-то отбирает. */
.board-tools > .board-filter-toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linejoin: round; flex: none; }
.board-tools > .board-filter-toggle.is-on { background: color-mix(in srgb, var(--f-col) 11%, var(--paper)); color: var(--f-col); font-weight: 600; }
.board-tools > .board-filter-toggle.is-on:hover { background: color-mix(in srgb, var(--f-col) 18%, var(--paper)); color: var(--f-col); }
.board-filter-n { font-variant-numeric: tabular-nums; }
.board-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: -6px 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.board-filter[hidden] { display: none; }
.board-cond {
  --fc: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  padding: 2px 2px 2px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fc) 12%, var(--paper));
}
.board-cond select {
  min-width: 0;
  max-width: 100%;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-overflow: ellipsis;
  cursor: pointer;
}
.board-cond select[data-part="field"] { color: var(--fc); }
/* «=» и «≠» — знак, а не список: без стрелки, чтобы плашка не пестрела тремя. */
.board-cond select[data-part="op"] { appearance: none; -webkit-appearance: none; padding: 3px 6px; border-radius: 5px; text-align: center; font-weight: 700; }
.board-cond select[data-part="op"]:hover { background: var(--n-25-a8); }
.board-cond select.is-empty { color: var(--muted); font-weight: 500; }
/* Значения условия — одна кнопка: «сегодня или просрочено»; под ней список с
   галочками. «или» стоит внутри плашки, «и» — между плашками, оба тихие. */
.board-or,
.board-and { font-size: 12px; font-weight: 500; color: var(--n-66); }
.board-vals { position: relative; display: inline-flex; min-width: 0; }
.board-vals-btn {
  min-width: 0;
  max-width: 100%;
  padding: 3px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
/* Стрелка, как у списков «Поле» и «Значение»: кнопка раскрывает список. Длинное «а или б или в» на узком экране переносится, а не обрезается. */
.board-vals-btn::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 2px 2px 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  vertical-align: middle;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0.55;
}
.board-vals-btn:hover,
.board-vals-btn[aria-expanded="true"] { background: var(--n-25-a8); }
.board-vals-btn.is-empty { color: var(--muted); font-weight: 500; }
.board-vals-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: grid;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: 320px;
  overflow: auto;
  padding: 5px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px var(--n-23-a22);
}
.board-vals-pop[hidden] { display: none; }
.board-vals-pop.flip { left: auto; right: 0; }
.board-vals-cap,
.board-vals-none { margin: 0; padding: 4px 8px 6px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.board-val {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.board-val:hover { background: var(--hairline); }
.board-val input { flex: none; margin: 0; accent-color: var(--fc); cursor: pointer; }
.board-val span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-filter-tail { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
/* Подзадачи на карточках: два сегмента «Показывать · Скрывать» рядом с «Сегодня» и
   «Сбросить». Сегменты — те же, что у «Вида» (.board-seg): нажатый залит тёмным,
   светлый текст, так что видно, какой включён. */
.board-subs { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; }
.board-subs-label { font-size: 12.5px; color: var(--muted); }
.board-filter-today,
.board-filter-clear {
  padding: 3px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.board-filter-today:hover,
.board-filter-clear:hover { background: var(--n-25-a8); color: var(--ink); }
.board-filter-today[aria-pressed="true"] { background: color-mix(in srgb, var(--f-col) 11%, var(--paper)); color: var(--f-col); }
/* Поле быстрого дела вместо колонки: встаёт рядом с «+ Дело». */
.board-quick {
  width: 220px;
  max-width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}

/* Колонка-группа (первый уровень — не «Колонка»): заголовок не правится, но тянется,
   как у остальных, — курсор «рука» на шапке, а на самом названии — обычный. */
.board-column.group .board-col-name { cursor: inherit; }

/* Вложенные коробки подгрупп внутри колонки доски. */
.g-box {
  --fc: var(--muted);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 6px;
  margin: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--fc) 38%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--fc) 7%, var(--paper));
}
.g-bh { display: flex; align-items: baseline; gap: 6px; padding: 0 2px 2px; color: var(--fc); font-size: 13px; font-weight: 700; line-height: 1.3; }
.g-box .g-box > .g-bh { font-size: 12.5px; }
.g-box .g-box .g-box > .g-bh { font-size: 12px; }
.g-bh .n, .g-sec .n { color: var(--muted); font-weight: 600; }

/* Лента списка: колонка чтения, а не полотно во всю ширину окна. */
.board-flat { min-width: 0; max-width: 1080px; margin: 0 auto; padding: 6px 0 26px; }
/* Список: разделы — заголовок и тело в одной рамке цвета поля. */
.g-list { display: grid; gap: 0; }
.g-sec {
  --fc: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 0;
  padding: 7px 12px 4px;
  border: 1px solid color-mix(in srgb, var(--fc) 38%, var(--line));
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--fc) 7%, var(--paper));
  color: var(--fc);
  font-size: 14px;
  font-weight: 700;
}
.g-sec .n { font-size: 12px; }
.g-sec a { color: inherit; text-decoration: none; }
.g-sec a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-sec.d2 { margin-top: 8px; font-size: 13px; }
.g-sec.d3 { margin-top: 6px; font-size: 12.5px; }
.g-sec.done, .g-kids.done { --fc: var(--green); }
.g-kids {
  --fc: var(--muted);
  padding: 2px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--fc) 38%, var(--line));
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, var(--fc) 7%, var(--paper));
}
.g-rows { display: grid; gap: 3px; }
.g-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper);
  font-size: 13.5px;
  font-weight: 600;
}
.g-row .board-done { margin-top: 0; }
.g-row .board-title { font-size: 13.5px; font-weight: inherit; }
.g-right { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; color: var(--muted); }
.g-row.closed { color: var(--muted); font-weight: 500; }
.board-row.closed .board-title { text-decoration: line-through; text-decoration-color: var(--n-79); color: var(--muted); }
#board-flat .board-row[data-capture-id]:focus-visible { outline: 1.5px solid var(--focus); outline-offset: -1.5px; }

/* Список — не колонки: сегмента колонок для телефона у него нет. */
#board:not([data-view="board"]) .board-segments { display: none; }

/* Телефон: одна колонка на экран, сверху сегмент подписей колонок. */
.board-segments { display: none; }
@media (max-width: 760px) {
  /* Ряд видов и инструментов не должен распирать страницу: на телефоне
     Safari иначе расширяет окно, и всё — от карточки записи до экрана
     разговора — оказывается уже экрана. Подписи неактивных видов спрятаны,
     сам ряд при нужде едет вбок внутри себя. */
  .board-controls { flex-wrap: wrap; min-width: 0; }

  .board-tools { flex-wrap: wrap; max-width: 100%; }
  .board-segments {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--header-gutter));
    padding: 2px var(--header-gutter) 10px;
    scrollbar-width: none;
  }
  .board-segments::-webkit-scrollbar { display: none; }
  .board-segment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    border: 0;
    background: none;
    padding: 2px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    opacity: 0.55;
  }
  .board-segment[aria-selected="true"] { opacity: 1; }
  .board-segment[aria-selected="true"] .board-pill { box-shadow: inset 0 0 0 1.5px currentColor; }
  /* Одна колонка на экран — в поле страницы, как шапка, без ленты вбок. */
  .board-columns { display: block; margin: 0; padding-left: 0; padding-right: 0; cursor: default; }
  .board-columns .board-column { display: none; width: 100%; }
  .board-columns .board-column.is-active { display: block; }

  .board-columns .board-col-tools { opacity: 1; }

}

/* ── футер карточки: прижат к низу, служебное одной строкой ────────────────── */
#review-dialog .review {
  display: flex;
  flex-direction: column;
}

#review-dialog .card-files-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
#review-dialog .card-files-head .attach-empty {
  color: var(--nt-tertiary);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
#review-dialog .card-files-head .secondary {
  margin-left: auto;
}

/* ── панель оформления выделенного текста ──────────────────────────────────
   Как в Notion: появляется над выделением в любом живом поле. Кнопки ставят
   маркеры Markdown, цвет — pandoc-овский span [текст]{.red}. */
.fmt-bar {
  position: fixed;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px var(--n-25-a8), 0 2px 6px var(--n-25-a8);
  font-size: 13px;
  white-space: nowrap;
}
.fmt-bar .fmt-button {
  position: relative;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  border: 0;
  background: none;
  color: var(--ink);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.fmt-bar .fmt-button:hover,
.fmt-bar .fmt-button[aria-expanded="true"] { background: var(--hairline); }
.fmt-bar .fmt-bold { font-weight: 750; }
.fmt-bar .fmt-italic { font-style: italic; }
.fmt-bar .fmt-underline { text-decoration: underline; text-underline-offset: 2px; }
.fmt-bar .fmt-strike { text-decoration: line-through; }
.fmt-bar .fmt-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.fmt-bar .fmt-highlight { color: var(--fmt-yellow); }
.fmt-bar .fmt-trigger::after { content: "▾"; margin-left: 4px; font-size: 10px; color: var(--muted); }
.fmt-bar .fmt-color { font-weight: 650; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--fmt-red); text-underline-offset: 3px; }
.fmt-sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.fmt-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  max-height: min(60vh, 420px);
  overflow: auto;
  padding: 6px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px var(--n-25-a8), 0 2px 6px var(--n-25-a8);
  white-space: nowrap;
}
.fmt-menu .fmt-head {
  margin: 4px 0 2px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fmt-menu .fmt-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  border: 0;
  background: none;
  color: var(--ink);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.fmt-menu .fmt-item:hover { background: var(--hairline); }
.fmt-menu .fmt-item.is-on::after { content: "✓"; margin-left: auto; color: var(--muted); font-size: 12px; }
.fmt-swatch {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 5px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.fmt-swatch:not([class*="md-color-bg-"])::before { content: "A"; }

/* Палитра Notion: девять цветов текста и девять фонов, свои оттенки для тем. */
:root {
  --fmt-gray: #787774; --fmt-brown: #9f6b53; --fmt-orange: #d9730d; --fmt-yellow: #b8860b;
  --fmt-green: #448361; --fmt-blue: #337ea9; --fmt-purple: #9065b0; --fmt-pink: #c14c8a; --fmt-red: #d44c47;
  --fmt-bg-gray: #f1f1ef; --fmt-bg-brown: #f4eeee; --fmt-bg-orange: #fbecdd; --fmt-bg-yellow: #fbf3db;
  --fmt-bg-green: #edf3ec; --fmt-bg-blue: #e7f3f8; --fmt-bg-purple: #f6f3f9; --fmt-bg-pink: #faf1f5; --fmt-bg-red: #fdebec;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fmt-gray: #9b9b9b; --fmt-brown: #ba856f; --fmt-orange: #c77d48; --fmt-yellow: #ca9849;
    --fmt-green: #529e72; --fmt-blue: #5e87c9; --fmt-purple: #9d68d3; --fmt-pink: #d15796; --fmt-red: #df5452;
    --fmt-bg-gray: #2f2f2f; --fmt-bg-brown: #4a3228; --fmt-bg-orange: #5c3b23; --fmt-bg-yellow: #564328;
    --fmt-bg-green: #243d30; --fmt-bg-blue: #143a4e; --fmt-bg-purple: #3c2d49; --fmt-bg-pink: #4e2c3c; --fmt-bg-red: #522e2a;
  }
}
:root[data-theme="dark"] {
  --fmt-gray: #9b9b9b; --fmt-brown: #ba856f; --fmt-orange: #c77d48; --fmt-yellow: #ca9849;
  --fmt-green: #529e72; --fmt-blue: #5e87c9; --fmt-purple: #9d68d3; --fmt-pink: #d15796; --fmt-red: #df5452;
  --fmt-bg-gray: #2f2f2f; --fmt-bg-brown: #4a3228; --fmt-bg-orange: #5c3b23; --fmt-bg-yellow: #564328;
  --fmt-bg-green: #243d30; --fmt-bg-blue: #143a4e; --fmt-bg-purple: #3c2d49; --fmt-bg-pink: #4e2c3c; --fmt-bg-red: #522e2a;
}
.md-color-gray { color: var(--fmt-gray); }
.md-color-brown { color: var(--fmt-brown); }
.md-color-orange { color: var(--fmt-orange); }
.md-color-yellow { color: var(--fmt-yellow); }
.md-color-green { color: var(--fmt-green); }
.md-color-blue { color: var(--fmt-blue); }
.md-color-purple { color: var(--fmt-purple); }
.md-color-pink { color: var(--fmt-pink); }
.md-color-red { color: var(--fmt-red); }
[class*="md-color-bg-"] { border-radius: 3px; padding: 0 2px; margin: 0 -1px; }
.md-color-bg-gray { background: var(--fmt-bg-gray); }
.md-color-bg-brown { background: var(--fmt-bg-brown); }
.md-color-bg-orange { background: var(--fmt-bg-orange); }
.md-color-bg-yellow { background: var(--fmt-bg-yellow); }
.md-color-bg-green { background: var(--fmt-bg-green); }
.md-color-bg-blue { background: var(--fmt-bg-blue); }
.md-color-bg-purple { background: var(--fmt-bg-purple); }
.md-color-bg-pink { background: var(--fmt-bg-pink); }
.md-color-bg-red { background: var(--fmt-bg-red); }
.md-field u, .md-block u, .md-inline u { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* Шрифт и размер текста записей — выбор страницы, как в Notion. Интерфейс
   остаётся в Inter: меняется только текст, который человек пишет и читает. */
:root[data-font="serif"] .md-field,
:root[data-font="serif"] .md-block,
:root[data-font="serif"] .md-inline,
:root[data-font="serif"] .card-title-edit {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}
:root[data-font="mono"] .md-field,
:root[data-font="mono"] .md-block,
:root[data-font="mono"] .md-inline,
:root[data-font="mono"] .card-title-edit {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-text="small"] .md-field, :root[data-text="small"] .md-block { font-size: 13.5px; }

/* ── Календарь: вид «Доски» ──────────────────────────────────────────────────
   Та же панель, что колонка на доске: рамка, скругление, тихий фон. Свои дела
   и встречи — плашками цвета типа, чужие события — серые с точкой цвета
   календаря. Линия «сейчас» и столбец сегодняшнего дня — коралловые, как
   отметка дня в мини-календаре. */
/* Страница календаря устроена как страница дел: во всю ширину, слева поле,
   справа такое же — сетке нужен весь экран, а не колонка чтения. */
.calendar-page {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 clamp(24px, 4vw, 64px);
}
.calendar-page .page-heading { margin-bottom: 8px; }
/* Сетка встаёт по высоте окна — нижнее поле страницы отдаётся ей. */
main:has(> #calendar:not([hidden])) { padding-bottom: 96px; }
.calendar-controls { margin-right: 0; }
.calendar-controls .cal-sources { padding: 0; border: 0; }
/* Ссылка в настройки календарей — тихая, как «Свойства» на доске: это не
   действие над делами, а дверь в другой раздел. */
.calendar-manage {
  display: inline-flex; align-items: center;
  border-radius: 6px; padding: 5px 8px; margin-left: 4px;
  color: var(--n-52); font-size: 13.5px; line-height: 1; text-decoration: none; white-space: nowrap;
}
.calendar-manage:hover { background: var(--n-25-a8); color: var(--ink); }
.board-calendar {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
  user-select: none;
}
.cal-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.cal-nav { display: inline-flex; gap: 4px; align-items: center; }
.cal-nav button, .cal-seg button {
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 8px;
  padding: 4px 9px;
  line-height: 1.3;
}
.cal-nav button:hover, .cal-seg button:hover { background: var(--n-25-a8); }
.cal-nav-btn { min-width: 30px; }
.cal-title { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; margin: 0; }
.cal-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; padding: 2px; gap: 2px; background: var(--n-97); margin-left: auto; }
.cal-seg button { border: 0; background: none; color: var(--n-52); border-radius: 7px; display: inline-flex; gap: 6px; align-items: center; }
.cal-seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.cal-seg kbd, .cal-hint kbd {
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--n-52);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 4px 1px;
  background: var(--paper);
}
.cal-sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.cal-source {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 99px; padding: 3px 10px 3px 8px;
}
.cal-source[aria-pressed="false"] { color: var(--n-72); text-decoration: line-through; }
.cal-source[aria-pressed="false"] .cal-dot { opacity: 0.4; }
.cal-source small { color: var(--n-72); font-size: 11px; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--n-72); flex: none; display: inline-block; }
.cal-manage { margin-left: auto; color: var(--n-52); font-size: 12px; text-decoration: none; }
.cal-manage:hover { color: var(--ink); text-decoration: underline; }
.cal-body { position: relative; }
.cal-hint { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--n-72); font-size: 11.5px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.empty + .cal-top { display: none; }

/* неделя */
.cal-wk { display: grid; grid-template-columns: 52px repeat(var(--days, 7), minmax(0, 1fr)); }
.cal-corner { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.cal-dh {
  text-align: center; padding: 8px 0 6px;
  border-bottom: 1px solid var(--line); border-left: 1px solid var(--hairline);
  font-size: 11.5px; color: var(--n-52); cursor: pointer;
}
.cal-dh:hover { background: var(--n-25-a8); }
.cal-dh b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.2; margin-top: 1px; }
.cal-dh.wknd { color: var(--n-72); }
.cal-dh.today { color: var(--coral); }
.cal-dh.today b { display: inline-block; background: var(--coral); color: #fff; border-radius: 99px; padding: 0 8px; }
.cal-nt-label {
  font-size: 9.5px; color: var(--n-72); text-transform: uppercase; letter-spacing: 0.5px;
  padding: 6px 4px 0 0; text-align: right; line-height: 1.2;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cal-nt {
  min-width: 0; min-height: 30px;
  border-left: 1px solid var(--hairline); border-bottom: 1px solid var(--line);
  padding: 4px 3px; display: flex; flex-direction: column; gap: 3px;
}
.cal-nt.today, .cal-col.today, .cal-mc.today { background-color: rgba(255, 56, 92, 0.05); }
.cal-nt.over, .cal-mc.over { box-shadow: inset 0 0 0 2px var(--focus); }
/* Высоту сетки считает fitCalendarHeight — до низа окна или как вытянули рукой. */
.cal-scroll { max-height: var(--cal-height, 560px); overflow: auto; overscroll-behavior: contain; }
/* Ручка высоты — полоса по нижнему краю сетки. Сама полоса невидима, о ней
   говорят курсор и язычок, который проявляется под мышью. */
.cal-resize { position: relative; z-index: 4; height: 0; touch-action: none; }
.cal-resize::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 10px; cursor: ns-resize; }
.cal-resize::after {
  content: ""; position: absolute; left: 50%; top: -2px; width: 36px; height: 4px; margin-left: -18px;
  border-radius: 2px; background: var(--n-72); opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
.cal-resize:hover::after{ opacity: 1; }

.cal-grid { display: grid; grid-template-columns: 52px repeat(var(--days, 7), minmax(0, 1fr)); position: relative; }
.cal-hours { position: relative; border-right: 1px solid var(--line); }
.cal-hours div { height: var(--h); font-size: 10.5px; color: var(--n-72); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.cal-col {
  container-type: inline-size;
  position: relative; min-width: 0;
  border-left: 1px solid var(--hairline);
  height: calc(var(--h) * var(--n));
  background-image: linear-gradient(var(--hairline) 1px, transparent 1px);
  background-size: 100% var(--h);
  cursor: cell;
}
.cal-col.wknd { background-color: var(--n-25-a3, rgba(0, 0, 0, 0.012)); }
.cal-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--coral); z-index: 3; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.cal-ghost {
  position: absolute; left: 3px; right: 3px; z-index: 2; pointer-events: none;
  border: 1.5px dashed var(--coral); border-radius: 7px;
  background: rgba(255, 56, 92, 0.06); color: var(--coral);
  font-size: 11px; padding: 3px 7px;
}

/* плашки: чип без времени и блок в сетке */
.cal-chip {
  --cal-c: var(--type-todo); --cal-bg: var(--tint-todo);
  min-width: 0; display: flex; align-items: center; gap: 5px;
  font-size: 11px; line-height: 1.2; padding: 3px 6px; border-radius: 6px;
  background: var(--cal-bg); color: var(--ink); cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.cal-chip[draggable="true"] { cursor: grab; }
.cal-chip-title { overflow: hidden; text-overflow: ellipsis; }
.cal-chip-time { color: var(--cal-c); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.cal-chip.meeting { --cal-c: var(--type-meeting); --cal-bg: var(--tint-wait); }
/* Чужое событие — как в Календаре Apple: сплошная светлая заливка цвета
   календаря и текст тем же цветом, без штриховки и без полоски. */
.cal-chip.external { --cal-c: var(--n-62); --cal-bg: color-mix(in srgb, var(--cal-c) 16%, var(--paper)); color: color-mix(in srgb, var(--cal-c) 72%, var(--ink)); font-weight: 500; }
.cal-chip.external .cal-chip-time { color: inherit; }
.cal-chip.late { --cal-c: var(--red-49); --cal-bg: var(--tint-late); color: var(--red-49); }
.cal-chip.done { text-decoration: line-through; color: var(--n-72); --cal-c: var(--green); --cal-bg: var(--n-97); }
.cal-chip.dragging, .cal-ev.dragging { opacity: 0.4; }
.cal-box {
  width: 13px; height: 13px; flex: none; padding: 0; cursor: pointer;
  border: 1.5px solid var(--cal-c); border-radius: 50%; background: var(--paper); color: transparent;
  font-size: 9px; line-height: 1; font-weight: 700;
}
.cal-box::before { content: "✓"; }
.cal-box:hover { color: var(--green); border-color: var(--green); }
.cal-box.meeting { color: var(--cal-c); }
.cal-box.meeting::before { content: none; }
.cal-box.meeting svg { width: 10px; height: 10px; display: block; margin: 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cal-box.is-done { background: var(--green); border-color: var(--green); color: var(--paper); }
/* Кружок в блоке со временем стоит в строке названия, перед часом. */
.cal-ev .cal-box { display: inline-grid; place-items: center; margin: 0 5px 0 0; vertical-align: -2px; }
.cal-ev.done b { text-decoration: line-through; color: var(--n-72); }
/* Место блока в группе пересекающихся (calLayoutDay): колонка --col из --cols
   шириной в --span колонок. По краям дня — 3px, между соседями — 2px; без
   переменных блок во всю ширину, как раньше. Блок — сам себе контейнер:
   «К звонку» прячется по ширине блока, а не дня. */
.cal-ev {
  --cal-c: var(--type-todo); --cal-bg: var(--tint-todo);
  position: absolute; z-index: 1; container-type: inline-size;
  left: calc(3px + (100% - 4px) * var(--col, 0) / var(--cols, 1));
  width: calc((100% - 4px) * var(--span, 1) / var(--cols, 1) - 2px);
  border-radius: 7px; padding: 4px 7px; font-size: 11.5px; line-height: 1.25;
  overflow: hidden; cursor: pointer; background: var(--cal-bg); color: var(--ink);
  box-shadow: 0 0 0 1px var(--paper);
}
.cal-ev[draggable="true"] { cursor: grab; }
.cal-ev b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-time { color: var(--cal-c); font-variant-numeric: tabular-nums; }
.cal-ev small { display: block; color: var(--n-52); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.meeting { --cal-c: var(--type-meeting); --cal-bg: var(--tint-wait); }
.cal-ev.external { --cal-c: var(--n-62); --cal-bg: color-mix(in srgb, var(--cal-c) 16%, var(--paper)); color: color-mix(in srgb, var(--cal-c) 72%, var(--ink)); }
/* Приглашение без ответа — незакрашенное, пунктиром: время занято, но событие
   ещё не ваше, пока не ответили. Тем же пунктиром помечен значок «без ответа»
   в плашке события. */
.cal-ev.unanswered, .cal-chip.unanswered { background: var(--paper); border: 1px dashed color-mix(in srgb, var(--cal-c) 55%, transparent); }
.cal-row.unanswered small { color: var(--yellow-51); }
.cal-ev.external b { font-weight: 600; }
.cal-ev.external .cal-ev-time { color: inherit; font-weight: 500; }
.cal-ev.external small { color: color-mix(in srgb, var(--cal-c) 55%, var(--n-52)); }
.cal-ev-repeat { position: absolute; top: 4px; right: 7px; font-style: normal; font-size: 12px; line-height: 1; color: var(--cal-c); opacity: 0.9; }
.cal-ev:has(.cal-join) .cal-ev-repeat { display: none; }
.cal-ev.short .cal-ev-repeat { top: 2px; }
.cal-ev.late { --cal-c: var(--red-49); --cal-bg: var(--tint-late); }
.cal-ev.done { --cal-c: var(--green); --cal-bg: var(--n-97); }
.cal-ev.done b { text-decoration: line-through; color: var(--n-72); }
.cal-ev.short { padding: 2px 7px; }
.cal-ev.short small { display: none; }
/* Узкий блок обрезает название чаще — значок повтора не должен ложиться на текст. */
.cal-ev:has(.cal-ev-repeat) b { padding-right: 14px; }
.cal-ev:has(.cal-join) b { padding-right: 62px; }
.cal-join {
  position: absolute; right: 6px; top: 5px;
  font-size: 10px; font-weight: 700; color: var(--paper); background: var(--cal-c);
  border-radius: 5px; padding: 2px 6px; text-decoration: none;
}
@container (max-width: 150px) { .cal-ev .cal-join { display: none; } .cal-ev:has(.cal-join) b { padding-right: 0; } }
/* В узком блоке час и так виден по месту в сетке — место отдаётся названию. */
@container (max-width: 120px) { .cal-ev .cal-ev-time { display: none; } }

/* день: сетка и повестка рядом */
.cal-day { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.cal-agenda { border-left: 1px solid var(--line); padding: 14px 16px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.cal-agenda h4 { margin: 8px 0 4px; font-size: 11px; letter-spacing: 0.7px; text-transform: uppercase; color: var(--n-72); }
.cal-agenda h4:first-child { margin-top: 0; }
.cal-free { color: var(--n-72); font-size: 11.5px; padding: 4px 0 4px 52px; font-style: italic; margin: 0; }
.cal-row { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hairline); align-items: flex-start; cursor: pointer; }
.cal-row time { flex: none; width: 42px; color: var(--n-72); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.cal-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-row-title { overflow: hidden; text-overflow: ellipsis; }
.cal-row small { color: var(--n-72); font-size: 11px; }
.cal-row.done .cal-row-title { text-decoration: line-through; color: var(--n-72); }
.cal-row.external .cal-row-title { color: var(--n-52); }
.cal-row .cal-join { position: static; align-self: center; }

/* месяц */
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-mdh { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--n-72); text-align: center; padding: 8px 0 6px; border-bottom: 1px solid var(--line); }
.cal-mc { min-width: 0; min-height: 92px; border-bottom: 1px solid var(--hairline); border-left: 1px solid var(--hairline); padding: 4px 4px 6px; font-size: 11px; cursor: cell; }
.cal-mc:nth-child(7n + 1) { border-left: 0; }
.cal-md { font: inherit; font-size: 11.5px; color: var(--n-52); font-weight: 600; border: 0; background: none; padding: 1px 6px; margin: 0 0 4px -2px; border-radius: 99px; cursor: pointer; }
.cal-md:hover { background: var(--n-25-a8); color: var(--ink); }
.cal-mc.off .cal-md { color: var(--n-72); font-weight: 400; }
.cal-mc.today .cal-md { background: var(--coral); color: #fff; }
.cal-mc .cal-chip { margin-bottom: 2px; padding: 2px 5px; font-size: 10.5px; }
.cal-more { color: var(--n-72); font-size: 10.5px; margin: 2px 4px 0; }

/* плашка чужого события и быстрая запись */
.cal-pop {
  position: fixed; z-index: 40; width: 300px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14); padding: 12px 14px; font-size: 13px;
  user-select: text;
}
.cal-pop-title { display: block; font-size: 14px; line-height: 1.3; margin-bottom: 4px; }
.cal-pop-title[tabindex]:hover { cursor: text; text-decoration: underline dotted var(--n-72); text-underline-offset: 3px; }
.cal-pop-rename { display: block; width: 100%; box-sizing: border-box; font: inherit; font-weight: 600; font-size: 14px; padding: 2px 6px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--n-100); color: var(--ink); }
.cal-pop-btn.danger { color: var(--red-50); }
/* Плашка события как в Календаре macOS: секции-плитки, участники с ответами */
.cal-pop.rich { width: 340px; max-height: calc(100vh - 16px); overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cal-pop.rich .cal-pop-actions, .cal-pop.rich .cal-pop-note { margin: 4px 4px 0; }
.pop-sec { background: var(--pop-tile); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; line-height: 1.4; }
.pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pop-head .cal-pop-title { margin: 0; font-size: 15px; flex: 1 1 auto; }
.pop-cal { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 12px; color: var(--n-52); background: var(--n-100); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; }
.pop-cal select { font: inherit; font-size: 12px; border: 0; background: none; color: var(--ink); padding: 0; max-width: 140px; }
.pop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pop-src { color: var(--n-52); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-when { font-weight: 600; font-variant-numeric: tabular-nums; }
.pop-repeat { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; color: var(--n-52); }
.pop-repeat-icon { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--n-100); border: 1px solid var(--line); font-size: 13px; }
.pop-loc { margin-top: 4px; color: var(--n-52); }
.pop-people { display: flex; flex-direction: column; gap: 5px; }
.pop-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pop-person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-person small { color: var(--n-62); font-size: 11.5px; white-space: nowrap; }
.pop-st { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; font-style: normal; font-size: 10px; font-weight: 700; line-height: 1; color: var(--n-62); }
.pop-st.accepted { color: var(--green); }
.pop-st.declined { color: var(--red-50); }
.pop-st.tentative { color: var(--amber, #d29922); }
/* Кто не ответил, тот виден: серым он сливался с именем, и «кого ещё ждём» в
   списке участников приходилось вычитывать по значкам. Пунктирное кольцо тем
   же жёлтым, что «ответить?» в дне: не отказ и не согласие — ожидание. */
.pop-st.needs-action { color: var(--yellow-51); border-style: dashed; }
.pop-link { word-break: break-all; }
.pop-link a { color: var(--link, #3b82f6); }
.pop-me-line { display: flex; align-items: center; gap: 6px; }
.pop-me-label { color: var(--n-52); }
.pop-me-buttons { display: flex; gap: 4px; margin: 8px 0 6px; flex-wrap: wrap; }
.cal-pop-btn.small { padding: 3px 9px; font-size: 12px; }
.cal-pop-btn.is-current, .cal-pop-btn.is-current:disabled { opacity: 1; cursor: default; font-weight: 600; background: color-mix(in srgb, var(--pop-status, var(--n-62)) 14%, transparent); color: var(--pop-status, var(--n-62)); border-color: color-mix(in srgb, var(--pop-status, var(--n-62)) 55%, transparent); }
.cal-pop-btn.is-current.accepted { --pop-status: var(--green); }
.cal-pop-btn.is-current.declined { --pop-status: var(--red-50); }
.cal-pop-btn.is-current.tentative { --pop-status: var(--amber, #d29922); }
.pop-comment { width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); padding: 7px 0 2px; outline: 0; }
.pop-comment::placeholder { color: var(--n-72); }
.cal-ev.external[draggable="true"], .cal-chip.external[draggable="true"] { cursor: grab; }
.cal-pop-when { margin: 0 0 4px; color: var(--coral); font-weight: 600; font-size: 12px; }
.cal-pop-src { margin: 0; color: var(--n-52); font-size: 12px; }
.cal-pop-note { margin: 10px 0 0; color: var(--n-72); font-size: 11.5px; line-height: 1.4; }
/* Удаление повтора: выбор «только это событие / всю серию» на месте кнопок */
.cal-pop-ask { margin-top: 10px; }
.cal-pop.rich .cal-pop-ask { margin: 4px 4px 0; }
.cal-pop-ask-text { margin: 0 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--ink); }
.cal-pop-ask .cal-pop-actions { margin-top: 0; }
/* Повтор у своих дел и встреч — тем же значком, что у чужих событий */
.cal-chip-repeat { flex: none; font-style: normal; font-size: 11px; color: var(--cal-c); opacity: 0.9; }
.cal-pop-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cal-pop-btn {
  font: inherit; font-size: 12px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; color: var(--ink); background: var(--paper);
}
.cal-pop-btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
.cal-pop-btn:disabled { opacity: 0.5; cursor: default; }
.cal-pop.quick input { width: 100%; font: inherit; font-size: 13.5px; border: 0; border-bottom: 1px solid var(--line); outline: 0; background: none; color: var(--ink); padding: 4px 0 6px; }
.cal-pop.quick input:focus { border-bottom-color: var(--focus); }

@media (max-width: 760px) {
  .calendar-page { padding: 0 12px; }
  .calendar-controls { flex-wrap: wrap; }
  .cal-top { gap: 8px; padding: 8px 10px; }
  .cal-title { font-size: 14px; width: 100%; order: 3; }
  .cal-seg { margin-left: auto; }
  .cal-seg kbd, .cal-hint { display: none; }
  .cal-day { grid-template-columns: 1fr; }
  .cal-agenda { border-left: 0; border-top: 1px solid var(--line); }
  .cal-scroll { max-height: var(--cal-height, 60vh); }
  .cal-mc { min-height: 64px; padding: 2px; }
  .cal-mc .cal-chip-title { display: none; }
  .cal-mc .cal-chip { padding: 2px 3px; }
  .cal-pop { width: min(300px, calc(100vw - 48px)); }
}

/* Карточка: «до» рядом с временем, «В календарь» в подвале */
.review-schedule { grid-template-columns: 1fr 1fr auto; align-items: center; }
.review-end { display: inline-flex; align-items: center; gap: 6px; }
.review-end-label { font-size: 12px; color: var(--muted); }
.review-end input[hidden] { display: none; }
.review-end:has(input[hidden]) .review-end-label { display: none; }

/* Настройки: подключённые календари */
.calendar-accounts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.calendar-account { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.calendar-account.is-disabled { opacity: 0.6; }
.calendar-account-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.calendar-account-head b { cursor: text; }
.calendar-account-meta { color: var(--muted); font-size: 12px; }
.calendar-account-meta.is-error { color: var(--red-50); }
.calendar-account-calendars { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.calendar-account-calendar { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.calendar-account-calendar input { margin: 0; }
.calendar-account-calendar small { color: var(--n-72); }
.calendar-account-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.calendar-account-controls select { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--n-100); color: var(--ink); }
.calendar-account-controls input[type="color"] { width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.calendar-account-controls button { font-size: 12.5px; padding: 4px 10px; }
.calendar-remove { color: var(--red-50); }
.calendar-account-auto { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.calendar-account-auto select { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--n-100); color: var(--ink); }
.calendar-account-auto-in { color: var(--muted); font-size: 12.5px; }
.calendar-account-auto .setting-hint { flex-basis: 100%; margin: 0; }
.calendar-connect-row { display: flex; flex-wrap: wrap; gap: 6px; }
.calendar-connect-row button, .calendar-google { font-size: 12.5px; padding: 5px 11px; text-decoration: none; display: inline-flex; align-items: center; }
.calendar-google.is-disabled { opacity: 0.55; }
/* Telegram в настройках: код для телефона и кнопка «открыть бота» — рядом,
   на узком экране друг под другом. Код остаётся чёрным по белому и в тёмной
   теме — иначе камера его не прочтёт. */
.telegram-state { margin: 10px 0 0; font-size: 13px; color: var(--ink); }
.telegram-state.is-error { color: var(--red-49); }
.telegram-state a { color: inherit; font-weight: 600; }
.telegram-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 12px 0 2px; }
.telegram-qr { width: 148px; height: 148px; background: #fff; border: 1px solid var(--n-93); border-radius: 12px; padding: 6px; }
.telegram-connect-side { display: grid; gap: 8px; justify-items: start; max-width: 320px; }
.telegram-open { font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 99px; background: var(--type-auto); color: var(--n-100); text-decoration: none; }
.telegram-open:hover { background: var(--red-54); }
.calendar-connect { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.calendar-connect-title { margin: 0; font-weight: 600; }
.calendar-connect-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Карточка: «Напомнить» — своей строкой под сроком, «Повтор» — ещё одной */
.review-schedule { flex-wrap: wrap; }
.review-remind { flex: 1 1 100%; min-width: 0; }
.review-repeat-row { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-width: 0; }
.review-repeat-row select { flex: 1 1 auto; min-width: 0; }
.review-until { display: inline-flex; align-items: center; gap: 6px; }
.review-until[hidden] { display: none; }
/* Карточка: удаление повтора — выбор на месте кнопки «Удалить запись» */
.card-delete-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 0; font-size: 12.5px; color: var(--muted); }
.card-delete-ask button { font: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; background: var(--paper); color: var(--ink); }
.card-delete-ask button.danger { color: var(--red-50); }
.card-delete-ask button:disabled { opacity: 0.5; cursor: default; }

/* ── «Сегодня»: обложка по часам и два ящика ────────────────────────────────
   Дата с фазой суток, бриф и вопрос в поле меняются утром, днём, вечером и
   ночью. Под полем — вкладки «День» и «Закрыто», у каждой своя полоса дней. */
.today-page .hero { max-width: var(--capture-width, 800px); margin: 0 auto 8px; }
/* Подсказка слева, «увеличить» и отправка — справа, рядом. */
.capture-foot #capture-expand { margin-left: auto; }
/* Заголовок полки: тихие капсы и тонкая линия до края. «Сделано» зелёный —
   это уже сделано. */
.shelf-head { display: flex; align-items: center; gap: 8px; margin: 22px 2px 6px; font-size: 11px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-66); }
.shelf-head::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.shelf-head.done, .shelf-head.done a { color: var(--green); }
.shelf-head a { display: inline-flex; gap: 8px; color: inherit; text-decoration: none; }
.shelf-head a:hover { text-decoration: underline; }
.shelf-n { font-variant-numeric: tabular-nums; }
.shelf-n:empty { display: none; }
.today-date { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-66); }
.today-phase.morning { color: var(--yellow-51); }
.today-phase.day { color: var(--blue-61); }
.today-phase.evening { color: var(--violet-54); }
.today-phase.night, .today-phase.weekend { color: var(--n-62); }
.today-phase.after { color: var(--coral); }
/* Первый шаг для пустого журнала: три примера, которые подставляются в поле.
   Набран тише карточки ввода — это подсказка, а не ещё один блок страницы. */
.today-start { margin: 4px auto 0; max-width: 560px; text-align: center; }
.start-lead { margin: 0 0 10px; color: var(--n-62); font-size: 13.5px; line-height: 1.5; }
.start-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.start-chip {
  border: 1px solid var(--n-93); background: var(--n-100); color: var(--n-52);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer;
}
.start-chip:hover { border-color: var(--n-87); color: var(--ink); }
.today-brief { margin: 0 auto 22px; max-width: 560px; font-size: 15px; line-height: 1.55; color: var(--n-52); text-wrap: balance; }
.today-brief b { color: var(--ink); font-weight: 650; }
.today-brief a { color: var(--coral); font-weight: 650; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--coral) 38%, transparent); }
/* Кнопка-ссылка в брифе: вечером «3 дела» и «перенести на завтра?» — того же цвета,
   что слово «вечер» над ними, и с той же тонкой чертой, что у ссылки «присоединиться». */
.linkish {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 650;
  color: var(--violet-54);
  cursor: pointer;
}
.linkish:hover { border-bottom-color: currentColor; }
.linkish:disabled { opacity: 0.5; cursor: default; }
.linkish:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.daynav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.daynav-step { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--n-52); cursor: pointer; padding: 6px 8px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; }
.daynav-step:hover { background: var(--n-96); color: var(--ink); }
.daynav-arrow { font-style: normal; font-size: 16px; line-height: 1; color: var(--n-72); }
.daynav-date { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.daynav-current { text-align: center; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.daynav-current b { font-weight: 700; }
.daynav-mark { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral); }
.daynav-today { border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--coral); cursor: pointer; padding: 2px 8px; border-radius: 99px; }
.daynav-today:hover { background: color-mix(in srgb, var(--coral) 10%, transparent); }
/* Ящики стоят колонкой в 800px, а не за карточкой ввода: когда поле растягивают
   ручками (--capture-width у .hero), вместе с ним растёт только оно — вкладки,
   полоса дней и списки под ним остаются, где были. У колонки свои ручки по
   боковым краям: ширина — --drawers-width на #today (kizuna-drawers-width),
   двойной клик возвращает 800px. */
.drawers { position: relative; max-width: var(--drawers-width, 800px); margin: 0 auto; }
.drawers-resize { position: absolute; top: 14px; bottom: 14px; z-index: 1; width: 9px; cursor: ew-resize; touch-action: none; user-select: none; }
.drawers-resize[data-dir="w"] { left: -5px; }
.drawers-resize[data-dir="e"] { right: -5px; }
@media (max-width: 760px) { .drawers-resize { display: none; } }
.drawer-tabs { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; flex-wrap: wrap; }
.drawer-tab { border: 1px solid transparent; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--n-52); padding: 7px 12px; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.drawer-tab b { color: var(--ink); font-weight: 700; }
.drawer-tab em { font-style: normal; color: var(--red-50); font-weight: 600; }
.drawer-tab[aria-selected="true"] { border-color: var(--n-92); background: var(--n-100); color: var(--ink); }
.drawer { margin-top: 16px; text-align: left; gap: 6px; }
.drawer .entry, .drawer .entry:first-child { padding: 11px 12px; border-top: 0; border-radius: 12px; background: var(--n-98-4); font-size: 12px; }
.drawer .entry-meta { font-size: 10px; }
.drawer .entry-actions { gap: 7px; margin-top: 7px; }
.day-group { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-66); padding: 8px 4px 0; }
/* Просрочка — своей полосой под часами, и заголовок у неё того же цвета, что
   строки внутри: полоса читается целиком, а не по одной строке. */
.day-group.late { color: var(--red-66); }
/* Полка «на сегодня» — тем же тоном, что «сегодня» у стрелок дня; запас без
   срока — тихим заголовком ниже и с воздухом перед ним. */
.day-group.today { color: var(--coral); }
.day-group.stock { padding-top: 16px; }
/* Полка «просрочено» или «на сегодня» с тихой ссылкой справа от подписи:
   «перенести всё на завтра» — мелким обычным шрифтом цвета полки, без капса. Под
   шапку сайта, что липнет сверху, полка встаёт с запасом, когда к ней подводят. */
.day-head { display: flex; align-items: baseline; gap: 10px; padding-top: 8px; scroll-margin-top: 96px; }
.day-head > .day-group { flex: 1 1 auto; min-width: 0; padding-top: 0; }
.day-head-act {
  flex: none;
  border: 0;
  background: none;
  padding: 0 4px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--n-66);
  cursor: pointer;
  opacity: 0.85;
}
.day-head-act.late { color: var(--red-66); }
.day-head-act.today { color: var(--coral); }
.day-head-act:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.day-head-act:disabled { opacity: 0.4; cursor: default; text-decoration: none; }
/* Подсветка строк, к которым подвела вечерняя фраза: мягкий фон и плавно обратно. */
#todo .entry.dense.flash { background: color-mix(in srgb, var(--coral) 13%, transparent); }
.day-shelf-empty { margin: 2px 4px 0; font-size: 12px; color: var(--n-66); }
/* Кружок нажат — строка сразу зачёркивается и гаснет, не дожидаясь ответа. */
#todo .entry.completing .entry-title { text-decoration: line-through; color: var(--n-66); transition: color 0.3s ease; }
#todo .entry.completing > .completion-button { border-color: var(--green); background: var(--green); color: var(--n-100); }
/* Смахивание на телефоне: вправо — готово, влево — на сегодня. */
#todo .entry.dense { touch-action: pan-y; }
#todo .entry.swiping { transition: none; user-select: none; }
#todo .entry.dense:not(.swiping) { transition: transform 0.18s ease-out, background-color 0.6s ease; }
#todo .entry.swiping[data-swipe="right"] { background: color-mix(in srgb, var(--green) 18%, var(--paper)); }
#todo .entry.swiping[data-swipe="left"] { background: var(--tint-wait); }
/* Строка, до которой дошли клавишами. */
#todo .entry[data-capture-id]:focus-visible,
#board-columns .board-card[data-capture-id]:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--focus); }
@media (hover: none) {
  /* На телефоне «на сегодня» — смахиванием влево: пилюля у каждой строки
     запаса была бы шумом. */
  .quick-due.take-today { display: none; }
}
/* Дело в «Дне» — одна строка: кружок, название, справа то, что что-то говорит.
   Фона состояния у строки нет: просроченное лежит в своей полосе, а тратить на
   подсветку остальных двенадцать плашек не за что. Селектор с #todo — не
   прихоть: фоны состояний заданы через #todo, и без него плашка осталась бы. */
#todo .entry.dense,
.drawer .entry.dense {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  background: none;
  font-size: 12.5px;
}
/* Раскладка «завершаемой» записи сводит всех детей в одну колонку — в плотной
   строке колонок три, и каждый встаёт в свою. */
.drawer .entry.dense.completable > * { grid-column: auto; grid-row: auto; }
.drawer .entry.dense .completion-button { grid-column: 1; grid-row: 1; margin: 0; }
.drawer .entry.dense .entry-title {
  grid-column: 2;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#todo .entry.dense:hover,
.drawer .entry.dense:hover { background: var(--n-96); }
.drawer .entry.dense.overdue .entry-title { color: var(--red-66); font-weight: 650; }
.drawer .entry.dense .entry-meta {
  grid-column: 3;
  margin: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 10.5px;
}
/* Строки идут встык и разделяются волосяной линией: у списка из двенадцати дел
   зазоры между плашками съедали столько же места, сколько сами дела. */
.day-rows > .entry.dense + .entry.dense,
.day-late > .entry.dense + .entry.dense { border-top: 1px solid var(--n-94); }
/* Просроченное не сидит в розовой коробке: строки такие же, как у остальных
   полок, а «горит» только красное — название, кружок и метка «с 26 авг». */
.day-late {
  border: 0;
  background: none;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
}
/* Строка со временем несёт ту же плотную строку — часы не должны быть выше
   собственного содержимого. */
.day-row .entry.dense { padding-left: 0; }
.day-row:has(.entry.dense) .day-time { padding-top: 6px; }
.day-group:first-child { padding-top: 0; }
.day-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; }
.day-time { font-size: 12px; font-weight: 600; color: var(--n-52); padding-top: 12px; text-align: right; }
.day-row.now-mark .day-time { color: var(--red-66); padding-top: 9px; }
.day-now-text { display: block; font-size: 12px; color: var(--n-52); padding: 8px 12px; border-radius: 12px; background: var(--red-97); box-shadow: inset 0 0 0 1px var(--red-83); }
.day-event { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--n-98-4); font-size: 12px; min-width: 0; }
.day-row.now .day-event { background: var(--red-97); box-shadow: inset 0 0 0 1px var(--red-83); }
.day-row.past .day-event { opacity: 0.6; }
.day-event-title { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.day-event-meta { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 10px; color: var(--n-63); }
.day-event-cal { color: var(--n-66); }
.day-event-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.day-join { display: inline-block; background: var(--red-66); color: #fff; border-radius: 99px; padding: 3px 10px; font-size: 10.5px; font-weight: 650; text-decoration: none; }
.day-ghost { border: 0; background: var(--n-96); color: var(--n-52); border-radius: 99px; padding: 3px 9px; font: inherit; font-size: 10.5px; font-weight: 650; cursor: pointer; }
.day-ghost:hover { color: var(--ink); }
.day-event-meta .tag.now { background: var(--red-66); color: #fff; }
.day-event-meta .tag.soon, .day-event-meta .tag.warm { background: var(--tint-wait); color: var(--yellow-51); text-decoration: none; }
.day-event-meta .tag.late { background: var(--tint-late); color: var(--red-50); font-weight: 600; }
.day-event-meta .tag.done { color: var(--green); }
.day-own { padding: 10px 12px; border-radius: 12px; background: var(--n-98-4); font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.day-own-title { font-weight: 650; }
.day-own.done .day-own-title { color: var(--n-62); text-decoration: line-through; }
@media (max-width: 480px) {
  .day-row { grid-template-columns: 38px minmax(0, 1fr); gap: 6px; }
}

/* Память помощника: строка правила, откуда оно и кнопка «забыть». Общее
   правило помечено полосой — оно действует не только на этого человека. */
.memory-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.memory-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--n-88);
  border-radius: 10px;
  background: var(--n-98-2);
}
.memory-item.is-shared { border-left: 3px solid var(--coral); }
.memory-body { font-size: 13px; line-height: 1.35; }
.memory-meta { font-size: 11px; color: var(--n-45); white-space: nowrap; }
.memory-forget { padding: 4px 10px; font-size: 12px; }
.memory-shared { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--n-45); }
@media (max-width: 560px) {
  .memory-item { grid-template-columns: 1fr auto; }
  .memory-meta { grid-column: 1 / -1; }
}

/* ── круги: общее дело в личном журнале ─────────────────────────────────────
   Цвет круга — метка, а не место: тихая точка в строке, а не второй интерфейс.
   Все цвета берутся из общей шкалы, поэтому тёмная тема считается сама. */
:root {
  --circle-violet: var(--violet-54);
  --circle-blue: var(--blue-54);
  --circle-teal: var(--teal-51);
  --circle-orange: var(--orange-56);
  --circle-pink: var(--red-60);
  --circle-red: var(--red-66);
}
.circle-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; background: var(--circle-violet); }
.circle-dot.blue { background: var(--circle-blue); }
.circle-dot.teal { background: var(--circle-teal); }
.circle-dot.orange { background: var(--circle-orange); }
.circle-dot.pink { background: var(--circle-pink); }
.circle-dot.red { background: var(--circle-red); }
.circle-dot.big { width: 10px; height: 10px; }
.tag.circle {
  background: var(--n-96); color: var(--muted);
  display: inline-flex; align-items: center; gap: 5px;
}
.tag.assign { background: var(--n-96); color: var(--muted); }
.btag.circle-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; background: var(--paper); cursor: pointer; font: inherit; font-size: 11.5px; }
.btag.circle-chip[aria-pressed="true"] { background: var(--pink); color: var(--coral); border-color: transparent; font-weight: 600; }
.ava {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; font-style: normal; color: var(--n-100); background: var(--n-62);
}
.ava.big { width: 28px; height: 28px; font-size: 12px; }
.ava.mini { width: 18px; height: 18px; font-size: 9.5px; }
.mini {
  appearance: none; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.mini:hover { background: var(--n-96); }
.mini.primary { background: var(--pink); color: var(--coral); border-color: transparent; font-weight: 600; }
.mini:disabled { opacity: 0.5; cursor: default; }

/* полоса «к вам»: просьбы и призывы одной лентой над списком дня */
.day-group.inbox-group { color: var(--type-todo); }
.inbox { border-radius: 14px; background: var(--tint-todo); padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.inbox-row { display: flex; align-items: flex-start; gap: 10px; background: var(--paper); border-radius: 11px; padding: 10px 12px; }
.inbox-mark { flex: none; width: 17px; display: flex; justify-content: center; padding-top: 2px; }
.inbox-circle { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--n-81); display: block; }
.inbox-bubble { width: 15px; height: 15px; display: block; background: var(--type-todo); opacity: 0.45; border-radius: 4px 4px 1px 4px; }
.inbox-main { flex: 1; min-width: 0; }
.inbox-title { display: block; text-align: left; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.inbox-title.as-text { cursor: default; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.inbox-title:hover { text-decoration: underline; }
.inbox-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; font-size: 11.5px; color: var(--n-66); }
.inbox-meta .tag { margin-right: 0; }
.inbox-acts { display: flex; gap: 6px; flex: none; }
.inbox-take, .inbox-not {
  appearance: none; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 8px; padding: 4px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.inbox-take { background: var(--pink); color: var(--coral); border-color: transparent; font-weight: 600; }
.inbox-take:disabled, .inbox-not:disabled { opacity: 0.5; cursor: default; }
.inbox-row.muted { background: var(--n-98-4); }
/* хвост дня: сколько на других и какие круги выключены */
.day-more {
  display: block; width: 100%; text-align: center; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--muted); padding: 12px 0 2px;
}
.day-more:hover { color: var(--ink); }
.day-more .strong { color: var(--ink); font-weight: 600; }
.day-muted { display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); padding: 6px 0 0; }

/* текст сообщения обсуждения; само обсуждение карточки — в конце файла */
.msg-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-text .call { color: var(--type-todo); background: var(--tint-todo); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.mention-pop {
  position: absolute; left: 10px; bottom: calc(100% + 6px); z-index: 5; width: 240px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 42px var(--n-25-a8); padding: 5px;
}
.mention-cap { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-66); margin: 4px 8px; }
.mention-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: left; }
.mention-row.on, .mention-row:hover { background: var(--n-96); }

/* свойства карточки: круг и исполнитель */
.circle-value { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prop-ghost { color: var(--n-66); }
.assign-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.assign-pick { max-width: 220px; }
.assign-state { font-size: 12.5px; color: var(--muted); }
.assign-declined { color: var(--red-50); }
.card-foreign { font-size: 12.5px; color: var(--muted); background: var(--n-98-4); border-radius: 10px; padding: 8px 11px; margin: 0 0 10px; }

/* карточка приглашения в круг по ссылке: «зовёт вас в круг» и «Войти в круг» */
.circle-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: var(--paper); }
.circle-name { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; flex: 1; }
.circle-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.invite-card { border-color: var(--type-todo); }
.invite-lead { font-size: 15px; margin: 10px 0 6px; }
.invite-hint { font-size: 11.5px; color: var(--n-66); }

@media (max-width: 640px) {

  .inbox-row { flex-wrap: wrap; }
  .inbox-acts { width: 100%; justify-content: flex-end; }
}

/* быстрый срок у просроченного дела: перенести или снять, не открывая карточку */
.quick-due { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; background: var(--paper); border-radius: 999px; padding: 2px; box-shadow: 0 2px 10px var(--n-25-a8); }
.entry { position: relative; }
.quick-due-button { appearance: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11.5px; border-radius: 999px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.quick-due-button:hover { background: var(--pink); color: var(--coral); }
.quick-due-button:disabled { opacity: 0.5; }
@media (hover: hover) {
  .quick-due { opacity: 0; transition: opacity 0.12s ease; }
  .entry:hover .quick-due, .quick-due:focus-within { opacity: 1; }
}

/* ── обсуждение у нижнего края карточки ─────────────────────────────────────
   Поле лежит внизу всегда, как в мессенджере; сообщения встают над ним
   панелью по своей высоте, а свёрнутый разговор — его последним пузырём.
   Поле ровно по колонке карточки (708px): края совпадают с линиями и подвалом.
   Пузыри — как в разговорах кругов; своя палитра живёт в переменных --talk-*,
   три состояния темы. */
#review-dialog {
  --talk-field: #ffffff;
  --talk-field-edge: rgba(55, 53, 47, 0.16);
  --talk-panel: #fbfaf8;
  --talk-panel-edge: rgba(55, 53, 47, 0.1);
  --talk-pop: #ffffff;
  --talk-plate: rgba(55, 53, 47, 0.06);
  --talk-plate-2: rgba(55, 53, 47, 0.1);
  --talk-in: #f1efec;
  --talk-out: #ffe3e9;
  --talk-meta: rgba(0, 0, 0, 0.42);
  --talk-out-meta: rgba(150, 40, 70, 0.62);
  --talk-link: #e0294d;
  --talk-field-edge-on: rgba(55, 53, 47, 0.34);
  --talk-in-hover: #e9e6e2;
  --talk-out-hover: #ffd6df;
  --talk-accent-text: #d9254a;
  --talk-shadow: 0 -10px 30px rgba(34, 34, 34, 0.12);
  --talk-pop-shadow: 0 16px 40px rgba(34, 34, 34, 0.18);
}
:root[data-theme="dark"] #review-dialog {
  --talk-field: #2f2f2f;
  --talk-field-edge: rgba(255, 255, 255, 0.08);
  --talk-panel: #2c2c2c;
  --talk-panel-edge: rgba(255, 255, 255, 0.07);
  --talk-pop: #313131;
  --talk-plate: rgba(255, 255, 255, 0.07);
  --talk-plate-2: rgba(255, 255, 255, 0.12);
  --talk-in: #343332;
  --talk-out: #4b2230;
  --talk-meta: rgba(255, 255, 255, 0.45);
  --talk-out-meta: rgba(255, 205, 216, 0.62);
  --talk-link: #ff8098;
  --talk-field-edge-on: rgba(255, 255, 255, 0.22);
  --talk-in-hover: #3c3b3a;
  --talk-out-hover: #562837;
  --talk-accent-text: #ff8098;
  --talk-shadow: 0 -16px 44px rgba(0, 0, 0, 0.45);
  --talk-pop-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #review-dialog {
    --talk-field: #2f2f2f;
    --talk-field-edge: rgba(255, 255, 255, 0.08);
    --talk-panel: #2c2c2c;
    --talk-panel-edge: rgba(255, 255, 255, 0.07);
    --talk-pop: #313131;
    --talk-plate: rgba(255, 255, 255, 0.07);
    --talk-plate-2: rgba(255, 255, 255, 0.12);
    --talk-in: #343332;
    --talk-out: #4b2230;
    --talk-meta: rgba(255, 255, 255, 0.45);
    --talk-out-meta: rgba(255, 205, 216, 0.62);
    --talk-link: #ff8098;
    --talk-field-edge-on: rgba(255, 255, 255, 0.22);
    --talk-in-hover: #3c3b3a;
    --talk-out-hover: #562837;
    --talk-accent-text: #ff8098;
    --talk-shadow: 0 -16px 44px rgba(0, 0, 0, 0.45);
    --talk-pop-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  }
}
/* Колонка оставляет под полем место: конец заметки и подвал не прячутся. */
#review-dialog.has-talk .review {
  padding-bottom: calc(40px + var(--talk-base, 60px));
}
/* Слой на всю карточку, чтобы высота панели считалась от карточки; клики
   проходят насквозь везде, кроме самой панели и поля. */
#review-dialog .talk-dock {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 54px max(12px, calc((100% - 708px) / 2)) calc(16px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
/* Текст заметки, уходящий под поле, растворяется, а не режется краем. */
#review-dialog .talk-dock::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--talk-base, 60px) + 52px);
  background: linear-gradient(to top, var(--nt-bg) calc(100% - 36px), transparent);
  pointer-events: none;
}
#review-dialog .talk-panel,
#review-dialog .talk-base {
  position: relative;
  pointer-events: auto;
}
#review-dialog .talk-base {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#review-dialog .talk-icon {
  display: inline-flex;
  flex: none;
}
#review-dialog .talk-icon svg {
  display: block;
}

/* панель разговора */
#review-dialog .talk-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(560px, 64%);
  border-radius: 18px;
  background: var(--talk-panel);
  box-shadow: 0 0 0 1px var(--talk-panel-edge), var(--talk-shadow);
  overflow: hidden;
}
#review-dialog:not(.talk-open) .talk-panel {
  display: none;
}
#review-dialog .talk-panel.rise {
  animation: talk-rise 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes talk-rise {
  from { opacity: 0; transform: translateY(10px); }
}
#review-dialog .talk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 8px 6px 16px;
  border-bottom: 1px solid var(--nt-divider);
}
#review-dialog .talk-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--nt-text);
  white-space: nowrap;
}
#review-dialog .talk-count {
  margin-left: 6px;
  font-weight: 500;
  color: var(--nt-tertiary);
  font-variant-numeric: tabular-nums;
}
#review-dialog .talk-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--nt-tertiary);
  cursor: pointer;
}
#review-dialog .talk-close:hover {
  background: var(--nt-hover);
  color: var(--nt-secondary);
}
#review-dialog .talk-panel .thread-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 6px 14px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* пузыри: свои справа приглушённым кораллом, чужие слева с именем; день и
   «в обсуждении» — тихим текстом, чтобы не спорить с пузырями */
#review-dialog .talk-day,
#review-dialog .talk-joined {
  align-self: center;
  max-width: 90%;
  margin: 8px 0 6px;
  color: var(--nt-tertiary);
  font-size: 12px;
  text-align: center;
}
#review-dialog .talk-day {
  font-weight: 600;
}
#review-dialog .talk-joined {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#review-dialog .talk-joined .ava.mini {
  width: 16px;
  height: 16px;
  font-size: 8.5px;
}
#review-dialog .talk-grp {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  margin: 4px 0;
}
#review-dialog .talk-grp.out {
  grid-template-columns: minmax(0, 1fr);
}
#review-dialog .talk-grp > .ava {
  position: sticky;
  bottom: 2px;
  width: 30px;
  height: 30px;
  font-size: 12px;
}
#review-dialog .talk-bubbles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
#review-dialog .talk-grp.out .talk-bubbles {
  align-items: flex-end;
}
#review-dialog .talk-bb-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: min(520px, 92%);
  min-width: 0;
}
#review-dialog .talk-grp.out .talk-bb-wrap {
  flex-direction: row-reverse;
}
#review-dialog .talk-bb {
  min-width: 0;
  padding: 6px 10px 6px 11px;
  border-radius: 16px;
  background: var(--talk-in);
  color: var(--nt-text);
  font-size: 14.5px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}
#review-dialog .talk-grp.out .talk-bb { background: var(--talk-out); }
#review-dialog .talk-grp:not(.out) .talk-bb-wrap:not(:first-child) .talk-bb { border-top-left-radius: 6px; }
#review-dialog .talk-grp:not(.out) .talk-bb-wrap:not(:last-child) .talk-bb { border-bottom-left-radius: 6px; }
#review-dialog .talk-grp:not(.out) .talk-bb-wrap:last-child .talk-bb { border-bottom-left-radius: 4px; }
#review-dialog .talk-grp.out .talk-bb-wrap:not(:first-child) .talk-bb { border-top-right-radius: 6px; }
#review-dialog .talk-grp.out .talk-bb-wrap:not(:last-child) .talk-bb { border-bottom-right-radius: 6px; }
#review-dialog .talk-grp.out .talk-bb-wrap:last-child .talk-bb { border-bottom-right-radius: 4px; }
#review-dialog .talk-name {
  margin: 0 0 1px;
  font-size: 13px;
  font-weight: 650;
}
#review-dialog .talk-name i {
  margin-left: 8px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 500;
  color: var(--talk-meta);
}
/* Текст строкой, чтобы время легло справа на его последнюю строку. */
#review-dialog .talk-bb .msg-text {
  display: inline;
  font-size: 14.5px;
}
#review-dialog .talk-bb .msg-text .call {
  padding: 0;
  background: none;
  color: var(--talk-link);
  font-weight: 600;
}
#review-dialog .talk-meta {
  float: right;
  position: relative;
  top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 -3px 0 12px;
  font-size: 11px;
  line-height: 1;
  color: var(--talk-meta);
  font-variant-numeric: tabular-nums;
}
#review-dialog .talk-grp.out .talk-meta { color: var(--talk-out-meta); }
#review-dialog .talk-read { display: inline-flex; }
#review-dialog .talk-read svg { display: block; width: 15px; height: 11px; }
#review-dialog .talk-quote {
  margin: 2px 0 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--coral) 9%, transparent);
  box-shadow: inset 2px 0 0 var(--coral);
}
#review-dialog .talk-quote b {
  display: block;
  font-size: 12.5px;
  color: var(--talk-accent-text);
}
#review-dialog .talk-quote span {
  display: block;
  overflow: hidden;
  font-size: 13px;
  color: var(--nt-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
#review-dialog .talk-reacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 5px 0 1px;
}
#review-dialog .talk-reacts .talk-meta {
  float: none;
  top: 0;
  align-self: flex-end;
  margin: 0 -3px 0 auto;
  padding-left: 10px;
}
#review-dialog .talk-react {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 7px 0 6px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nt-text) 10%, transparent);
  color: var(--nt-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#review-dialog .talk-react.mine {
  background: var(--coral);
  color: #fff;
}
#review-dialog .talk-deed {
  flex: none;
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--talk-plate);
  color: var(--nt-secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}
#review-dialog .talk-bb-wrap:hover .talk-deed,
#review-dialog .talk-deed:focus-visible {
  opacity: 1;
}
#review-dialog .talk-deed:hover {
  background: var(--talk-plate-2);
  color: var(--nt-text);
}

/* свёрнутый разговор: последний пузырь над полем, рядом «ещё N» или «N новых» */
#review-dialog .talk-peek {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nt-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#review-dialog.talk-open .talk-peek {
  display: none;
}
#review-dialog .talk-peek > .ava {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
#review-dialog .talk-peek-bubble {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  max-width: min(540px, calc(100% - 150px));
  padding: 6px 10px 6px 12px;
  border-radius: 16px 16px 16px 5px;
  background: var(--talk-in);
  font-size: 14.5px;
  line-height: 20px;
  transition: background-color 0.15s ease;
}
#review-dialog .talk-peek.out .talk-peek-bubble {
  margin-left: auto;
  border-radius: 16px 16px 5px 16px;
  background: var(--talk-out);
}
#review-dialog .talk-peek:hover .talk-peek-bubble { background: var(--talk-in-hover); }
#review-dialog .talk-peek.out:hover .talk-peek-bubble { background: var(--talk-out-hover); }
#review-dialog .talk-peek-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#review-dialog .talk-peek-name {
  margin-right: 5px;
  font-weight: 650;
}
#review-dialog .talk-peek-time {
  flex: none;
  position: relative;
  top: 1px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--talk-meta);
  font-variant-numeric: tabular-nums;
}
#review-dialog .talk-peek.out .talk-peek-time { color: var(--talk-out-meta); }
#review-dialog .talk-peek-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 8px 0 11px;
  border-radius: 15px;
  color: var(--nt-tertiary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#review-dialog .talk-peek-more.bare {
  justify-content: center;
  width: 30px;
  padding: 0;
}
#review-dialog .talk-peek:not(.out) .talk-peek-more { margin-left: auto; }
#review-dialog .talk-peek:hover .talk-peek-more {
  background: var(--talk-plate-2);
  color: var(--nt-text);
}
#review-dialog .talk-peek-more.new,
#review-dialog .talk-peek:hover .talk-peek-more.new {
  background: color-mix(in srgb, var(--coral) 16%, transparent);
  color: var(--talk-accent-text);
  font-weight: 650;
}

/* поле: тихая пилюля — «@» значком, стрелка отправки появляется с текстом;
   в фокусе светлеет рамка, кораллового ореола нет */
#review-dialog .thread-composer {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 44px;
  padding: 4px;
  border: 0;
  border-radius: 22px;
  background: var(--talk-field);
  box-shadow: inset 0 0 0 1px var(--talk-field-edge);
  cursor: text;
}
#review-dialog .thread-composer:focus-within {
  box-shadow: inset 0 0 0 1px var(--talk-field-edge-on);
}
#review-dialog .thread-input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  max-height: 200px;
  margin: 0;
  padding: 8px 8px 8px 12px;
  border: 0;
  background: none;
  color: var(--nt-text);
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  resize: none;
  outline: none;
  box-shadow: none;
}
#review-dialog .thread-input::placeholder {
  color: var(--nt-tertiary);
}
#review-dialog .talk-at,
#review-dialog .talk-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font: inherit;
  cursor: pointer;
}
#review-dialog .talk-at {
  background: transparent;
  color: var(--nt-tertiary);
}
#review-dialog .talk-at:hover {
  background: var(--nt-hover);
  color: var(--nt-text);
}
#review-dialog .talk-send {
  background: var(--coral);
  color: #fff;
}
#review-dialog .talk-send:disabled {
  cursor: default;
  opacity: 0.6;
}

/* подсказка «@» в карточке */
#review-dialog .mention-pop {
  left: 6px;
  bottom: calc(100% + 8px);
  width: min(320px, calc(100% - 12px));
  padding: 6px;
  border: 0;
  border-radius: 14px;
  background: var(--talk-pop);
  box-shadow: 0 0 0 1px var(--talk-panel-edge), var(--talk-pop-shadow);
}
#review-dialog .mention-lead {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 8px;
  font-size: 12.5px;
  color: var(--nt-secondary);
}
#review-dialog .mention-cap {
  margin: 10px 8px 3px;
  color: var(--nt-tertiary);
}
#review-dialog .mention-row {
  gap: 10px;
  padding: 5px 8px;
  border-radius: 9px;
  color: var(--nt-text);
  font-size: 14px;
}
#review-dialog .mention-row .ava.mini {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
#review-dialog .mention-row.on,
#review-dialog .mention-row:hover {
  background: var(--talk-plate-2);
}
#review-dialog .mention-keys {
  margin: 6px -6px -6px;
  padding: 7px 14px 8px;
  border-top: 1px solid var(--nt-divider);
  font-size: 11.5px;
  color: var(--nt-tertiary);
}
#review-dialog .mention-keys kbd {
  display: inline-block;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--talk-plate);
  color: var(--nt-secondary);
  font: inherit;
  font-size: 11px;
  text-align: center;
}

@media (max-width: 760px) {
  #review-dialog .talk-dock {
    padding: 44px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  #review-dialog .talk-panel {
    max-height: 68%;
  }
  #review-dialog .talk-peek-bubble {
    max-width: calc(100% - 96px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #review-dialog .talk-panel.rise {
    animation: none;
  }
}
/* крестик карточки остаётся над полем и панелью */
#review-dialog .dialog-close {
  z-index: 5;
}

/* ── участники записи: кто видит, подтверждение призыва ──────────────────── */
.talk-faces { display: inline-flex; align-items: center; }
.talk-faces .ava.mini { margin-left: -5px; box-shadow: 0 0 0 2px var(--paper); }
.talk-faces .ava.mini:first-child { margin-left: 0; }
#review-dialog .talk-faces .ava.mini { box-shadow: 0 0 0 2px var(--talk-panel); }
#review-dialog .talk-who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 60%;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--nt-secondary);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#review-dialog .talk-who:hover:not(:disabled) { background: var(--nt-hover); color: var(--nt-text); }
#review-dialog .talk-who:disabled { cursor: default; color: var(--nt-tertiary); opacity: 1; }
#review-dialog .talk-people {
  margin: 8px 10px 0;
  padding: 6px;
  border: 1px solid var(--nt-divider);
  border-radius: 12px;
  background: var(--talk-pop);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
}
#review-dialog .talk-people[hidden] { display: none; }
#review-dialog .talk-person { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; }
#review-dialog .talk-person-name { flex: 1; min-width: 0; color: var(--nt-text); }
#review-dialog .talk-person small { color: var(--nt-tertiary); font-size: 12px; }
#review-dialog .talk-person-act { font-size: 12.5px; color: var(--nt-red); }
#review-dialog .talk-leave { align-self: flex-start; margin: 4px 6px 2px; font-size: 13px; color: var(--nt-red); }
#review-dialog .talk-people-hint { margin: 4px 6px 2px; font-size: 12px; color: var(--nt-tertiary); }
/* Позвать того, кто запись не видит: спокойная карточка над полем. */
#review-dialog .talk-confirm {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--talk-panel);
  box-shadow: 0 0 0 1px var(--talk-panel-edge), 0 10px 28px rgba(0, 0, 0, 0.14);
  color: var(--nt-text);
  font-size: 13.5px;
}
#review-dialog .talk-confirm[hidden] { display: none; }
#review-dialog .talk-confirm-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--coral) 14%, transparent);
  color: var(--talk-accent-text);
}
#review-dialog .talk-confirm-icon svg { display: block; }
#review-dialog .talk-confirm b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.35; }
#review-dialog .talk-confirm p { margin: 2px 0 10px; color: var(--nt-secondary); line-height: 1.45; }
#review-dialog .talk-confirm-acts { display: flex; flex-wrap: wrap; gap: 6px; }
#review-dialog .talk-btn {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--talk-plate);
  color: var(--nt-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 560;
  cursor: pointer;
}
#review-dialog .talk-btn:hover { background: var(--talk-plate-2); }
#review-dialog .talk-btn.is-go { background: var(--coral); color: #fff; }
#review-dialog .talk-btn.is-bare { background: none; color: var(--nt-secondary); }
#review-dialog .talk-btn.is-bare:hover { background: var(--nt-hover); }
.mention-note { margin-left: auto; font-size: 11px; color: var(--n-66); }

/* ── разговоры кругов: «За столом» ─────────────────────────────────────────────
   Страница без своей рамки стоит по краям верхней строки (--header-gutter):
   вкладки кругов, под ними люди круга за столом, ниже — разговоры круга чипами,
   а сам разговор идёт колонкой по центру сверху вниз, поле — сразу под ним.
   Синий Телеграма не берём — свои сообщения приглушённым кораллом. Тон круга —
   своя переменная --kc-tone: общее правило цветов форматирования [class*="c-"]
   красит всё, где задан --tone. */
:root {
  --kc-side: #f7f6f4;
  --kc-head: #ffffff;
  --kc-in: #f1efec;
  --kc-out: #ffe3e9;
  --kc-pill: rgba(74, 58, 48, 0.46);
  --kc-pill-ink: #ffffff;
  --kc-link: #e0294d;
  --kc-meta: rgba(0, 0, 0, 0.42);
  --kc-out-meta: rgba(150, 40, 70, 0.62);
  --kc-hover: rgba(34, 34, 34, 0.045);
  --kc-plate: rgba(34, 34, 34, 0.05);
  --kc-seal-mix: 100%;
  --kc-aurora: 13%;
  --kc-shadow: 0 24px 60px rgba(34, 34, 34, 0.14);
  --kc-shadow-sm: 0 10px 28px rgba(34, 34, 34, 0.1);
  --kc-scrim: rgba(34, 34, 34, 0.22);
  --kc-late: #c33434;
  --kc-wait: #9a6a10;
}
:root[data-theme='dark'] {
  --kc-side: #141414;
  --kc-head: #1c1c1c;
  --kc-in: #272625;
  --kc-out: #4b2230;
  --kc-pill: rgba(0, 0, 0, 0.45);
  --kc-pill-ink: rgba(255, 255, 255, 0.9);
  --kc-link: #ff8098;
  --kc-meta: rgba(255, 255, 255, 0.45);
  --kc-out-meta: rgba(255, 205, 216, 0.62);
  --kc-hover: rgba(255, 255, 255, 0.055);
  --kc-plate: rgba(255, 255, 255, 0.06);
  --kc-seal-mix: 72%;
  --kc-aurora: 24%;
  --kc-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  --kc-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.4);
  --kc-scrim: rgba(0, 0, 0, 0.5);
  --kc-late: #ff707d;
  --kc-wait: #e2b04a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --kc-side: #141414;
    --kc-head: #1c1c1c;
    --kc-in: #272625;
    --kc-out: #4b2230;
    --kc-pill: rgba(0, 0, 0, 0.45);
    --kc-pill-ink: rgba(255, 255, 255, 0.9);
    --kc-link: #ff8098;
    --kc-meta: rgba(255, 255, 255, 0.45);
    --kc-out-meta: rgba(255, 205, 216, 0.62);
    --kc-hover: rgba(255, 255, 255, 0.055);
    --kc-plate: rgba(255, 255, 255, 0.06);
    --kc-seal-mix: 72%;
    --kc-aurora: 24%;
    --kc-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    --kc-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.4);
    --kc-scrim: rgba(0, 0, 0, 0.5);
    --kc-late: #ff707d;
    --kc-wait: #e2b04a;
  }
}

/* Страница разговоров — во всю ширину окна и без полей у main: поля у неё —
   поля верхней строки, окно по высоте — это она. */
main:has(> #circles:not([hidden])) { max-width: none; padding: 0 0 96px; }
#circles-body { container: kc / inline-size; display: block; max-width: none; }

.kc {
  --kc-gutter: var(--header-gutter);
  position: relative; display: flex; flex-direction: column;
  height: 720px; min-height: 420px; overflow: hidden; color: var(--ink); background: var(--wash);
}
.kc.tone-violet, .kc .tone-violet { --kc-tone: var(--circle-violet); }
.kc.tone-blue, .kc .tone-blue { --kc-tone: var(--circle-blue); }
.kc.tone-teal, .kc .tone-teal { --kc-tone: var(--circle-teal); }
.kc.tone-orange, .kc .tone-orange { --kc-tone: var(--circle-orange); }
.kc.tone-pink, .kc .tone-pink { --kc-tone: var(--circle-pink); }
.kc.tone-red, .kc .tone-red { --kc-tone: var(--circle-red); }
/* :where — без веса: цвет кнопки задаёт её собственный класс. */
.kc :where(button) { font: inherit; color: inherit; }
.kc :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Поле ввода показывает фокус своей скруглённой рамкой: общий контур ложился
   прямоугольником поверх пилюли — текстовое поле внутри неё без скругления. */
.kc :is(input:not([type="checkbox"]), textarea):focus-visible { outline: none; }
.kc-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; }
.kc-ico svg { width: 100%; height: 100%; display: block; }
.kc-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.kc-hint b { color: var(--ink); font-weight: 600; }
.kc-pad { padding: 10px 16px; }
.kc-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff;
  font-size: 10.5px; font-weight: 750; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.kc-icon {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--muted);
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.kc-icon:hover, .kc-icon[aria-pressed="true"] { background: var(--kc-hover); color: var(--ink); }
.kc-icon .kc-ico { width: 19px; height: 19px; }
.kc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.kc-btn:hover { background: var(--kc-hover); }
.kc-btn.primary { background: var(--coral); border-color: transparent; color: #fff; }
.kc-btn.primary:hover { background: color-mix(in srgb, var(--coral) 88%, #000); }
.kc-btn.tone { background: color-mix(in srgb, var(--kc-tone) 17%, transparent); border-color: transparent; color: color-mix(in srgb, var(--kc-tone) 75%, var(--ink)); }
.kc-btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.kc-btn.sm { height: 28px; padding: 0 11px; font-size: 12.5px; }
.kc-btn .kc-ico { width: 15px; height: 15px; }

/* Знак круга — как ханко в знаке Кизуны: тон круга и первая буква. */
.kc-seal {
  --s: 32px; --sealc: color-mix(in srgb, var(--kc-tone, var(--circle-violet)) var(--kc-seal-mix), #000);
  width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; position: relative;
  border-radius: 31%; color: #fff; font-weight: 800; font-style: normal; line-height: 1; letter-spacing: -0.02em;
  font-size: calc(var(--s) * 0.44);
  background: linear-gradient(155deg, color-mix(in srgb, var(--sealc) 84%, #fff), var(--sealc) 62%);
}
.kc-seal.round { border-radius: 50%; }
.kc-seal.big { --s: 72px; }
.kc-seal .kc-ico { width: 46%; height: 46%; }

/* ── вкладки кругов ── */
.kc-tabs {
  flex: none; display: flex; align-items: stretch; gap: 2px; height: 52px; padding: 0 var(--kc-gutter);
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.kc-tab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 0; background: none; color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
/* Знак первой вкладки стоит по краю знака «Кизуна» в верхней строке. */
.kc-tabs > .kc-tab:first-child { margin-left: -12px; }
.kc-tab:hover { color: var(--ink); }
.kc-tab .kc-seal { --s: 22px; font-size: 11px; }
.kc-tab-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.kc-tab-doc { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--kc-plate); color: var(--muted); }
.kc-tab-doc .kc-ico { width: 14px; height: 14px; }
.kc-tab.on { color: var(--ink); font-weight: 700; }
.kc-tab.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--kc-tone, var(--coral)) 80%, var(--ink));
}
.kc-tab.add { color: var(--n-66); font-weight: 550; }
.kc-tab.add .kc-ico { width: 14px; height: 14px; }
.kc-badge.muted { background: color-mix(in srgb, var(--ink) 34%, transparent); }

/* ── за столом: люди круга ── */
.kc-band {
  flex: none; position: relative; display: flex; align-items: center; gap: 6px; padding: 12px var(--kc-gutter);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kc-tone) 9%, var(--wash)), var(--wash));
}
.kc-seats { display: flex; gap: 10px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.kc-seat {
  position: relative; flex: 1 1 0; min-width: 196px; max-width: 290px; display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: 11px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 16px;
  background: color-mix(in srgb, var(--paper) 72%, transparent); box-shadow: inset 0 0 0 1px var(--line);
}
.kc-seat.away { opacity: 0.55; }
.kc-seat-face { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.kc-seat-face .ava {
  width: 44px; height: 44px; font-size: 17px;
  box-shadow: 0 0 0 2px var(--wash), 0 0 0 3.5px color-mix(in srgb, var(--kc-tone) 40%, transparent); transition: box-shadow 0.15s;
}
.kc-seat-face:hover .ava { box-shadow: 0 0 0 2px var(--wash), 0 0 0 3.5px var(--kc-tone); }
.kc-seat-who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kc-seat-who b { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.kc-seat-who b > span { overflow: hidden; text-overflow: ellipsis; }
.kc-seat-who b i { font-style: normal; font-size: 10.5px; font-weight: 650; color: var(--n-66); }
.kc-seat-deed { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; }
.kc-seat-deed .kc-ico { width: 13px; height: 13px; color: var(--circle-violet); }
.kc-seat-deed span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-seat-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.kc-seat-who small.late { color: var(--kc-late); }
/* «@» появляется у места при наведении — текст дела не теряет ширину. */
.kc-seat-at, .kc-seat-todo {
  position: absolute; top: 50%; right: 8px; width: 30px; height: 30px; margin-top: -15px; border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 750; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line), var(--kc-shadow-sm); opacity: 0; transition: opacity 0.15s;
}
.kc-seat:hover .kc-seat-at, .kc-seat:focus-within .kc-seat-at,
.kc-seat:hover .kc-seat-todo, .kc-seat:focus-within .kc-seat-todo { opacity: 1; }
.kc-seat-at:hover, .kc-seat-todo:hover { background: color-mix(in srgb, var(--kc-tone) 18%, var(--paper)); }
/* «Дело» стоит слева от «@»: сначала позвать, потом поручить. */
.kc-seat-todo { right: 42px; display: grid; place-items: center; }
.kc-seat-todo .kc-ico { width: 16px; height: 16px; }
/* Поручить дело из карточки человека: поле и кнопка одной строкой. */
.kc-deed-new { display: flex; gap: 8px; margin: 0; }
.kc-deed-add { margin: 0 0 12px; }
.kc-deed-add .kc-hint { margin: 6px 2px 0; }
.kc-deed-new input {
  flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px;
  box-shadow: 0 0 0 1px var(--line);
}
.kc-deed-new input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--kc-tone); }
.kc-seat.add {
  flex: none; min-width: 0; max-width: none; grid-template-columns: 44px auto; padding: 7.5px 16px 7.5px 8.5px;
  border: 1.5px dashed color-mix(in srgb, var(--kc-tone) 38%, var(--line)); background: none; box-shadow: none; text-align: left; cursor: pointer;
}
.kc-seat.add:hover { background: color-mix(in srgb, var(--kc-tone) 8%, transparent); }
.kc-seat-plus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--kc-tone) 16%, transparent); color: color-mix(in srgb, var(--kc-tone) 80%, var(--ink)); }
.kc-seat-plus .kc-ico { width: 19px; height: 19px; }
.kc-band-fold { align-self: flex-start; }
.kc-faces { display: inline-flex; align-items: center; flex: none; }
.kc-faces .ava { width: 26px; height: 26px; font-size: 11px; box-shadow: 0 0 0 2px var(--wash); }
.kc-faces .ava + .ava, .kc-faces .kc-faces-more { margin-left: -8px; }
.kc-faces-more {
  display: inline-grid; place-items: center; height: 26px; min-width: 26px; padding: 0 5px; border-radius: 999px;
  background: var(--n-96); color: var(--ink); font-size: 10.5px; font-weight: 750; box-shadow: 0 0 0 2px var(--wash);
}

/* ── разговоры круга чипами ── */
.kc-threads { flex: none; position: relative; display: flex; align-items: center; gap: 6px; padding: 8px var(--kc-gutter); border-bottom: 1px solid var(--line); }
.kc-chips {
  display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 1px 24px 1px 1px; margin: -1px 0 -1px -1px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.kc-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; max-width: 280px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap;
}
.kc-chip:hover { color: var(--ink); background: var(--kc-hover); }
.kc-chip.on { background: var(--n-96); border-color: transparent; color: var(--ink); font-weight: 650; }
.kc-chip > .kc-ico { width: 14px; height: 14px; }
.kc-chip.on > .kc-ico, .kc-chip.on .kc-chip-hash { color: color-mix(in srgb, var(--kc-tone) 80%, var(--ink)); }
.kc-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kc-chip-hash { color: var(--n-66); font-weight: 750; }
.kc-chip-kind { width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center; background: color-mix(in srgb, var(--kc-tone) 16%, transparent); color: var(--kc-tone); }
.kc-chip-kind .kc-ico { width: 13px; height: 13px; }
.kc-chip .kc-faces .ava { width: 18px; height: 18px; font-size: 8.5px; box-shadow: 0 0 0 1.5px var(--wash); }
.kc-chip.on .kc-faces .ava { box-shadow: 0 0 0 1.5px var(--n-96); }
.kc-chip .kc-faces .ava + .ava { margin-left: -6px; }
.kc-chip .kc-cnt { height: 18px; min-width: 18px; padding: 0 5px; font-size: 10.5px; }
.kc-chip .kc-cnt.at { width: 18px; padding: 0; }
.kc-chip.add { border-style: dashed; color: var(--n-66); }
.kc-chip.add .kc-ico { width: 13px; height: 13px; }
.kc-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--coral); }
.kc-folded { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 5px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.kc-folded:hover { background: var(--kc-hover); color: var(--ink); }
.kc-folded .kc-ico { width: 14px; height: 14px; }
.kc-menu.kc-talks-menu { top: calc(100% + 4px); left: var(--kc-gutter); width: 340px; max-height: 360px; overflow-y: auto; }
.kc-menu-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-talks-menu time { font-size: 12px; color: var(--n-66); }
.kc-search { margin: 0 10px 8px; height: 34px; border-radius: 10px; background: var(--kc-plate); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--n-66); }
.kc-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink); outline: none; }
.kc-search:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--coral) 50%, transparent), 0 0 0 4px color-mix(in srgb, var(--coral) 12%, transparent); }
.kc-muted { width: 13px; height: 13px; color: var(--n-66); }
.kc-cnt {
  min-width: 20px; height: 20px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 11.5px; font-weight: 700;
  display: inline-grid; place-items: center; padding: 0 6px; flex: none; font-variant-numeric: tabular-nums;
}
.kc-cnt.muted { background: color-mix(in srgb, var(--ink) 34%, transparent); }
.kc-cnt.at { padding: 0; width: 20px; }

/* ── разговор: колонкой по центру, сверху вниз ── */
.kc-chat-pane { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.kc-empty-chat { flex: 1; display: grid; place-items: center; }
/* Короткий разговор не растягивается на весь экран: поле стоит сразу под
   последним сообщением. Длинный прокручивается, и поле уходит вниз. */
.kc-msgs { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.kc-col { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; }
.kc-msgs > .kc-col { padding-top: 4px; padding-bottom: 6px; }
.kc-start { align-self: center; margin: 16px 0 4px; font-size: 12.5px; color: var(--n-66); text-align: center; text-wrap: balance; }
.kc-pinned { flex: none; display: flex; align-items: center; gap: 4px; padding: 0 max(8px, calc((100% - 732px) / 2)); border-bottom: 1px solid var(--line); }
.kc-pinned-main { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 10px; padding: 7px 8px 7px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.kc-record .kc-btn { flex: none; }
@container kc (max-width: 700px) { .kc-record .kc-wide { display: none; } }
.kc-pinned-bar { width: 2px; border-radius: 2px; background: var(--coral); flex: none; }
.kc-pinned-text { min-width: 0; }
.kc-pinned-text b { display: block; font-size: 12.5px; color: var(--coral); font-weight: 650; }
.kc-pinned-text span { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kc-pill { align-self: center; margin: 7px 0; padding: 4px 11px; border-radius: 999px; background: var(--kc-pill); color: var(--kc-pill-ink); font-size: 12.5px; font-weight: 550; text-align: center; max-width: 90%; }
.kc-day { margin-top: 12px; }
.kc-unread-bar { margin: 12px 0 8px; padding: 4px; border-radius: 10px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--kc-plate); }
.kc-grp { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; align-items: end; margin: 4px 0; }
.kc-grp.out { grid-template-columns: minmax(0, 1fr); }
.kc-grp > .ava { width: 36px; height: 36px; font-size: 14px; position: sticky; bottom: 2px; }
.kc-bubbles { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.kc-grp.out .kc-bubbles { align-items: flex-end; }
.kc-bb-wrap { display: flex; align-items: center; gap: 6px; max-width: min(560px, 100%); min-width: 0; }
.kc-grp.out .kc-bb-wrap { flex-direction: row-reverse; }
.kc-bb {
  position: relative; min-width: 0; padding: 6px 10px 6px 11px; border-radius: 16px; background: var(--kc-in); color: var(--ink);
  font-size: 14.5px; line-height: 1.42; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); transition: box-shadow 0.3s;
}
.kc-bb.flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 45%, transparent); }
.kc-grp:not(.out) .kc-bb-wrap:not(:first-child) .kc-bb { border-top-left-radius: 6px; }
.kc-grp:not(.out) .kc-bb-wrap:not(:last-child) .kc-bb { border-bottom-left-radius: 6px; }
.kc-grp:not(.out) .kc-bb-wrap:last-child .kc-bb { border-bottom-left-radius: 4px; }
.kc-grp.out .kc-bb { background: var(--kc-out); }
.kc-grp.out .kc-bb-wrap:not(:first-child) .kc-bb { border-top-right-radius: 6px; }
.kc-grp.out .kc-bb-wrap:not(:last-child) .kc-bb { border-bottom-right-radius: 6px; }
.kc-grp.out .kc-bb-wrap:last-child .kc-bb { border-bottom-right-radius: 4px; }
.kc-name { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 650; margin-bottom: 1px; }
.kc-name i { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--kc-meta); }
.kc-tx { white-space: pre-wrap; font-size: 14.5px; }
.kc-tx .call { color: var(--kc-link); background: none; padding: 0; font-weight: 600; }
.kc-meta { float: right; position: relative; top: 7px; margin: 0 -3px 0 12px; font-size: 11px; line-height: 1; color: var(--kc-meta); display: inline-flex; gap: 2px; align-items: center; font-variant-numeric: tabular-nums; }
.kc-grp.out .kc-meta { color: var(--kc-out-meta); }
.kc-read { display: inline-block; width: 16px; height: 12px; }
.kc-read svg { width: 100%; height: 100%; display: block; }
.kc-read.on { color: var(--coral); }
.kc-quote {
  --quote: var(--coral); display: block; width: 100%; margin: 2px 0 5px; padding: 3px 8px 4px 10px; border: 0; border-radius: 6px; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--quote) 14%, transparent); box-shadow: inset 3px 0 0 var(--quote); font-size: 13px; line-height: 1.35; max-width: 420px;
}
.kc-quote b { display: block; color: var(--quote); font-weight: 650; font-size: 12.5px; }
.kc-quote span { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 5px 0 1px; }
.kc-reacts .kc-meta { float: none; top: 0; margin: 0 -3px 0 auto; padding-left: 10px; align-self: flex-end; }
.kc-react { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px 0 6px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--ink) 9%, transparent); font-size: 13px; cursor: pointer; }
.kc-react.mine { background: var(--coral); color: #fff; }
.kc-react-faces { display: inline-flex; }
.kc-react-faces .ava { width: 17px; height: 17px; font-size: 8.5px; box-shadow: 0 0 0 1.5px var(--kc-in); }
.kc-react-faces .ava + .ava { margin-left: -6px; }
.kc-bb-acts { display: flex; gap: 3px; opacity: 0; transition: opacity 0.12s; flex: none; }
.kc-bb-wrap:hover .kc-bb-acts, .kc-bb-wrap:focus-within .kc-bb-acts { opacity: 1; }
.kc-bb-act { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--kc-pill); color: var(--kc-pill-ink); display: grid; place-items: center; cursor: pointer; }
.kc-bb-act .kc-ico { width: 15px; height: 15px; }
.kc-deed { min-width: 260px; padding: 9px 12px 7px; }
.kc-deed-kind { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 750; color: var(--circle-violet); }
.kc-deed-title { display: block; margin: 3px 0 2px; padding: 0; border: 0; background: none; text-align: left; font-size: 15px; font-weight: 650; cursor: pointer; }
.kc-deed-title:hover { text-decoration: underline; }
.kc-deed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.kc-state { font-size: 11.5px; font-weight: 650; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.kc-state.took { background: color-mix(in srgb, var(--circle-teal) 16%, transparent); color: var(--circle-teal); }
.kc-state.wait { background: color-mix(in srgb, var(--kc-wait) 16%, transparent); color: var(--kc-wait); }
.kc-state.back { background: color-mix(in srgb, var(--kc-late) 14%, transparent); color: var(--kc-late); }
.kc-state.done { background: var(--kc-plate); color: var(--muted); }
.kc-kbd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 100%; max-width: 330px; }
.kc-kbd { height: 36px; border-radius: 10px; border: 0; background: var(--kc-pill); color: var(--kc-pill-ink); font-weight: 650; font-size: 13.5px; cursor: pointer; }
.kc-kbd:hover { background: color-mix(in srgb, var(--coral) 55%, var(--kc-pill)); }

/* ── поле: пилюлей в колонке разговора ── */
.kc-dock { flex: none; padding: 6px 0 16px; }
.kc-compose { position: relative; display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.kc-round { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--kc-plate); color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; font-weight: 700; font-size: 18px; }
.kc-round:hover { color: var(--ink); background: var(--kc-hover); }
.kc-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; background: var(--paper); border-radius: 22px; padding: 0 16px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.15s; }
.kc-field:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc-tone, var(--coral)) 60%, var(--line)), 0 0 0 4px color-mix(in srgb, var(--kc-tone, var(--coral)) 14%, transparent); }
.kc-field textarea { flex: 1; border: 0; background: none; resize: none; font: inherit; font-size: 14.5px; line-height: 1.45; color: var(--ink); padding: 11px 0; min-height: 44px; max-height: 160px; outline: none; }
.kc-send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--coral); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.kc-send:disabled { background: var(--kc-plate); color: var(--n-66); cursor: default; }
.kc-send .kc-ico { width: 19px; height: 19px; }
.kc-replybar { flex-basis: 100%; display: flex; align-items: center; gap: 10px; padding: 0 0 4px 8px; }
.kc-replybar > .kc-ico { color: var(--coral); width: 20px; height: 20px; }
.kc-replybar-q { flex: 1; min-width: 0; box-shadow: inset 2px 0 0 var(--coral); padding-left: 10px; }
.kc-replybar-q b { display: block; font-size: 12.5px; color: var(--coral); }
.kc-replybar-q span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-share { flex-basis: 100%; border: 1px solid color-mix(in srgb, var(--kc-wait) 55%, transparent); background: color-mix(in srgb, var(--kc-wait) 12%, transparent); border-radius: 12px; padding: 9px 11px; font-size: 13px; margin-bottom: 4px; }
.kc-share p { margin: 0 0 7px; }
.kc-share-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-compose .mention-pop { left: 52px; right: auto; bottom: calc(100% + 8px); top: auto; }

/* Круг из одного: позвать людей прямо здесь, вместо пустого разговора. */
.kc-alone { flex: 1; min-height: 0; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; padding: 28px var(--kc-gutter); }
.kc-alone-card {
  width: min(520px, 100%); display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 18px; border-radius: 22px;
  background: radial-gradient(320px 150px at 50% 0%, color-mix(in srgb, var(--kc-tone) var(--kc-aurora), transparent), transparent 78%), var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.kc-alone-card h3 { margin: 0; font-size: 20px; letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
.kc-alone-card > .kc-hint { text-align: center; text-wrap: balance; }
.kc-alone-card .kc-sub { padding: 10px 0 0; }

/* ── меню ── */
.kc-menu { position: absolute; z-index: 40; width: 240px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--kc-shadow); padding: 5px; }
.kc-head-menu { top: 52px; right: 10px; }
.kc-ctx-reacts { display: flex; justify-content: space-between; padding: 3px 3px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.kc-ctx-react { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; font-size: 19px; cursor: pointer; transition: transform 0.12s; }
.kc-ctx-react:hover, .kc-ctx-react.on { background: var(--kc-hover); transform: scale(1.12); }
.kc-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; background: none; border-radius: 8px; font-size: 13.5px; cursor: pointer; text-align: left; }
.kc-menu-item:hover { background: var(--kc-hover); }
.kc-menu-item .kc-ico { color: var(--muted); }
.kc-menu-item.danger, .kc-menu-item.danger .kc-ico { color: var(--kc-late); }

.kc-threads .kc-head-menu { top: calc(100% + 4px); right: var(--kc-gutter); }

/* ── «Информация» ── */
/* Выезжает справа поверх страницы: разговор под ней не сужается. */
.kc-info { position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; width: 340px; border-left: 1px solid var(--line); background: var(--paper); box-shadow: var(--kc-shadow); display: flex; flex-direction: column; min-height: 0; }
.kc-info-head { height: 58px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--line); }
.kc-info-head h3 { margin: 0 0 0 6px; font-size: 15.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-info-body { overflow-y: auto; flex: 1; scrollbar-width: thin; }
.kc-profile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 16px 14px; text-align: center; background: radial-gradient(260px 170px at 50% 38%, color-mix(in srgb, var(--kc-tone) var(--kc-aurora), transparent), transparent 76%); }
.kc-profile > .kc-seal { margin: 8px 0 12px; }
.kc-profile b { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
.kc-profile small { font-size: 13px; color: var(--muted); }
.kc-sect { border-top: 8px solid var(--kc-side); padding: 6px 0; }
.kc-sect-cap { margin: 0; padding: 8px 16px 4px; font-size: 13px; font-weight: 650; color: var(--coral); }
.kc-sub .kc-sect-cap { padding: 4px 0 0; }
.kc-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 8px 16px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.kc-row:hover { background: var(--kc-hover); }
.kc-row > .kc-ico { width: 22px; height: 22px; justify-self: center; color: var(--muted); }
.kc-row > .ava { width: 40px; height: 40px; font-size: 15px; }
.kc-row-text { min-width: 0; }
.kc-row-title { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-row-title code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.kc-row-sub { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-row-side { font-size: 12.5px; color: var(--n-66); }
.kc-row-side.accent { color: var(--coral); font-weight: 650; }
.kc-row > .kc-ico:last-child { width: 16px; height: 16px; }
.kc-row.accent .kc-row-title, .kc-row.accent > .kc-ico { color: var(--coral); }
.kc-row.danger .kc-row-title, .kc-row.danger > .kc-ico { color: var(--kc-late); }
.kc-switch input { position: absolute; opacity: 0; pointer-events: none; }
.kc-track { width: 38px; height: 22px; border-radius: 999px; background: var(--kc-plate); box-shadow: inset 0 0 0 1px var(--line); position: relative; transition: background 0.2s; }
.kc-track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform 0.2s, background 0.2s; }
.kc-switch input:checked + .kc-track { background: var(--coral); box-shadow: none; }
.kc-switch input:checked + .kc-track::after { transform: translateX(16px); background: #fff; }
.kc-switch input:focus-visible + .kc-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.kc-sub { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.kc-sub .kc-search { margin: 0; }
.kc-sub .kc-row { padding: 7px 8px; margin: 0 -8px; width: calc(100% + 16px); border-radius: 12px; }
.kc-people { display: flex; flex-direction: column; gap: 2px; }
.kc-linkcard { border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--kc-tone) 5%, var(--paper)); }
.kc-linkrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kc-linkrow code { flex: 1; min-width: 0; font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--wash); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-linkrow code.masked { color: var(--n-66); }
.kc-bound { display: grid; gap: 8px; }
.kc-bound > div { border-radius: 14px; padding: 12px; }
.kc-bound-in { background: color-mix(in srgb, var(--coral) 9%, transparent); }
.kc-bound-out { background: var(--kc-plate); }
.kc-bound h4 { margin: 0 0 8px; font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.kc-bound ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.kc-bound li b { color: var(--ink); font-weight: 600; }
.kc-person-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.kc-person-head b { display: block; font-size: 18px; }
.kc-person-head small { display: block; font-size: 12.5px; color: var(--muted); }
.kc-deeds { display: flex; flex-direction: column; gap: 2px; }
.kc-deed-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; margin: 0 -8px; border: 0; background: none; border-radius: 10px; text-align: left; cursor: pointer; font-size: 13.5px; }
.kc-deed-row:hover { background: var(--kc-hover); }
.kc-deed-row .kc-ico { color: var(--circle-violet); }
.kc-deed-row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-deed-row small { color: var(--n-66); font-size: 12px; white-space: nowrap; }
.kc-deed-row small.late { color: var(--kc-late); }
.kc-person-acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── окна: новый круг и новая комната ── */
.kc-layer { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.kc-scrim { position: absolute; inset: 0; background: var(--kc-scrim); }
.kc-modal { position: relative; width: min(460px, 100%); max-height: 100%; overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--kc-shadow); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.kc-modal-head { display: flex; align-items: flex-start; gap: 10px; }
.kc-modal-head h3 { margin: 0; flex: 1; font-size: 17px; }
.kc-modal-head small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.kc-modal-preview { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(260px 120px at 15% 50%, color-mix(in srgb, var(--kc-tone) var(--kc-aurora), transparent), transparent 75%), var(--wash); }
.kc-modal-preview .kc-seal { --s: 56px; }
/* Фото круга лежит на знаке поверх буквы и повторяет его скругление: пока фото
   грузится или если не загрузилось, видна буква. */
.kc-seal > .ava-picture { border-radius: inherit; }
/* Знак, на который ставят фото: значок камеры в углу говорит, что он нажимается. */
.kc-photo-pick { position: relative; flex: none; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; line-height: 0; }
.kc-photo-pick:hover .kc-seal { filter: brightness(0.94); }
.kc-photo-badge { position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2.5px var(--wash); }
.kc-photo-badge .kc-ico { width: 13px; height: 13px; }
.kc-modal-preview b { display: block; font-size: 20px; letter-spacing: -0.02em; }
.kc-modal-preview small { color: var(--muted); font-size: 12.5px; }
.kc-field-label { display: flex; flex-direction: column; gap: 6px; }
.kc-field-label > span { font-size: 12.5px; color: var(--muted); }
.kc-field-label input { height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.kc-field-label input:focus { border-color: color-mix(in srgb, var(--coral) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 12%, transparent); }
.kc-tones { display: flex; gap: 10px; flex-wrap: wrap; }
.kc-tone-pick { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--kc-tone); cursor: pointer; box-shadow: 0 0 0 3px var(--paper); }
.kc-tone-pick[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--kc-tone); }
.kc-pick .kc-checkbox { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); display: grid; place-items: center; color: #fff; }
.kc-pick .kc-checkbox .kc-ico { width: 14px; height: 14px; opacity: 0; }
.kc-pick[aria-pressed="true"] .kc-checkbox { background: var(--coral); border-color: transparent; }
.kc-pick[aria-pressed="true"] .kc-checkbox .kc-ico { opacity: 1; }
.kc-modal-acts { display: flex; justify-content: flex-end; gap: 8px; }
.kc.kc-empty-page { display: grid; place-items: center; }
.kc-empty-card { width: min(380px, calc(100% - 32px)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); }
.kc-empty-card h3 { margin: 6px 0 0; font-size: 20px; }
.kc-empty-card p { margin: 0 0 6px; color: var(--muted); font-size: 14px; }

/* Приглашение по ссылке — карточкой посреди страницы, до входа в круг. */
.kc-joining { display: grid; justify-items: center; padding: 32px 16px; }
.kc-joining .invite-card { width: min(520px, 100%); }

.kc-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; border: 1px solid var(--line); background: var(--wash); align-self: flex-start; }
.kc-seg-item { border: 0; background: none; border-radius: 9px; padding: 7px 12px; font-size: 13px; color: var(--muted); cursor: pointer; }
.kc-seg-item[aria-checked="true"] { background: var(--n-96); color: var(--ink); font-weight: 650; }

/* Приглашение по ссылке — карточкой посреди страницы, до входа в круг. */
.kc-joining { display: grid; justify-items: center; padding: 32px 16px; }
.kc-joining .invite-card { width: min(520px, 100%); }

/* ── ширина ── */
/* На экране без наведения «@» у места виден сразу, и под него оставлено место. */
@media (hover: none) {
  .kc-seat { padding-right: 80px; }
  .kc-seat.add { padding-right: 16px; }
  .kc-seat-at, .kc-seat-todo { opacity: 1; }
}
@container kc (max-width: 700px) {
  .kc-tabs { height: 46px; }
  .kc-tab { padding: 0 10px; }
  .kc-tabs > .kc-tab:first-child { margin-left: -10px; }
  .kc-tab.on::after { left: 10px; right: 10px; }
  .kc-band { padding-top: 10px; padding-bottom: 10px; }
  .kc-seat { flex: none; width: 176px; min-width: 0; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; padding: 8px; }
  .kc-seat.add { width: auto; grid-template-columns: 38px auto; padding: 6.5px 12px 6.5px 6.5px; }
  .kc-seat-face, .kc-seat-face .ava, .kc-seat-plus { width: 38px; height: 38px; }
  .kc-seat-at, .kc-seat-todo, .kc-band-fold { display: none; }
  .kc-threads { padding-top: 6px; padding-bottom: 6px; }
  .kc-folded .kc-wide { display: none; }
  .kc-col { padding: 0 10px; }
  .kc-dock { padding: 6px 0 10px; }
  .kc-round, .kc-send { width: 40px; height: 40px; }
  .kc-field textarea { min-height: 40px; padding: 9px 0; }
  .kc-info { width: 100%; }
  .kc-grp:not(.out) { grid-template-columns: 30px minmax(0, 1fr); gap: 6px; }
  .kc-grp > .ava { width: 30px; height: 30px; font-size: 12px; }
  .kc-bb-acts { display: none; }
  .kc-deed { min-width: 0; }
  .kc-menu.kc-talks-menu { left: 8px; right: 8px; width: auto; }
  .kc-alone { padding-top: 16px; }
}

/* Встреча, закрывшаяся сама по календарю: пунктирный зелёный кружок, руками не
   возвращается. Старая запись «сделал X» без дела внутри — кружок без нажатия. */
.completion-button.auto { border-style: dashed; border-color: var(--green); background: var(--tint-done, transparent); cursor: default; }
.completion-button.auto::before { color: var(--green); }
.entry.completed > .completion-button.auto { background: color-mix(in srgb, var(--green) 8%, var(--paper)); }
/* «Ещё N» — честная граница превью: видно, что список длиннее, и куда идти. */
.preview-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}
.preview-more:hover {
  color: var(--ink);
}
.drawer .preview-more { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--muted); text-decoration: none; }
.drawer .preview-more:hover { color: var(--ink); }
.completion-button.static { cursor: default; }
.entry.auto-done { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 9px; padding: 6px 8px; font-size: 12.5px; }
.entry.auto-done .entry-title { font-weight: 500; color: var(--n-62); text-decoration: line-through; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry.completed .entry-title { color: var(--n-62); text-decoration: line-through; }
#done .entry-title { text-decoration: none; }
.entry-meta .tag.time { background: none; color: var(--n-62); font-variant-numeric: tabular-nums; }
.entry-meta .tag.auto { background: none; color: var(--green); }
.entry-people { display: inline-flex; margin-left: 2px; }
.entry-people .ava.mini { margin-left: -4px; box-shadow: 0 0 0 2px var(--paper); }
.entry-people .ava.mini:first-child { margin-left: 0; }

/* ── карточка туду: две панели ───────────────────────────────────────────────
   Слева суть — кружок, название, описание, исходный текст, вложения, а внизу
   обсуждение; справа серая панель свойств в 224px: «ключ» над «значением». Окно
   фиксированное, на телефоне — во весь экран, панель свойств под сутью. */
#review-dialog {
  --card-w: 880px;
}
#review-dialog .review {
  display: block;
  height: 100%;
  padding: 0;
  overflow: hidden;
}
#review-dialog .card-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 224px;
  height: 100%;
}
#review-dialog .card-main {
  min-width: 0;
  overflow-y: auto;
  padding: 52px 30px 28px;
  scrollbar-width: none;
}
#review-dialog .card-main::-webkit-scrollbar { display: none; }
#review-dialog.has-talk .card-main { padding-bottom: calc(40px + var(--talk-base, 60px)); }
#review-dialog .card-side {
  min-width: 0;
  overflow-y: auto;
  padding: 50px 16px 20px;
  background: var(--nt-callout-gray);
  border-left: 1px solid var(--nt-divider);
  scrollbar-width: none;
}
#review-dialog .card-side::-webkit-scrollbar { display: none; }
#review-dialog .talk-dock {
  right: 224px;
  padding: 54px 20px calc(16px + env(safe-area-inset-bottom, 0px));
}
#review-dialog .review h2.card-title,
#review-dialog .card-title-edit {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
#review-dialog .card-head.with-tick { padding-left: 38px; }
#review-dialog .card-tick { top: 2px; width: 26px; height: 26px; }
#review-dialog .card-main .card-body { margin-top: 6px; }
#review-dialog .card-main .prop-section {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nt-tertiary);
}
#review-dialog .card-main .card-markdown { font-size: 15px; }
#review-dialog .sub-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0 -4px;
  padding: 5px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--nt-text);
  cursor: pointer;
}
#review-dialog .sub-add b { font-size: 18px; font-weight: 400; line-height: 1; }
#review-dialog .sub-add:hover { background: var(--nt-hover); }
#review-dialog .card-source { margin: 14px 0 0; font-size: 12.5px; color: var(--nt-tertiary); }
#review-dialog .card-source summary { cursor: pointer; width: fit-content; }
#review-dialog .card-source summary:hover { color: var(--nt-secondary); }
#review-dialog .card-source-body {
  margin-top: 6px;
  padding: 2px 10px;
  border-left: 2px solid var(--nt-divider);
  color: var(--nt-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#review-dialog .card-main .card-files { margin-top: 18px; }
/* Панель свойств. */
#review-dialog .side-prop {
  display: grid;
  gap: 6px;
  padding: 11px 0;
  border-bottom: 1px solid var(--nt-divider);
}
#review-dialog .side-prop:last-child { border-bottom: 0; }
#review-dialog .side-prop[hidden] { display: none; }
#review-dialog .side-k { font-size: 13px; font-weight: 600; color: var(--nt-secondary); }
#review-dialog .side-v { position: relative; display: grid; gap: 6px; min-width: 0; font-size: 14px; }
#review-dialog .side-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#review-dialog .side-schedule { display: grid; gap: 6px; }
#review-dialog .side-quiet { color: var(--nt-tertiary); font-size: 13px; }
#review-dialog .side-v :is(select, input) {
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--nt-divider);
  border-radius: 8px;
  background: var(--nt-bg);
  color: var(--nt-text);
  font: inherit;
  font-size: 13.5px;
  appearance: none;
}
#review-dialog .side-v select { background-image: none; padding-right: 8px; }
#review-dialog .side-v input[type="time"] { width: auto; flex: 1 1 70px; }
#review-dialog .side-v :is(select, input):hover { border-color: var(--nt-hr); }
#review-dialog .side-v :is(select, input):focus { border-color: var(--nt-blue); outline: 0; }
#review-dialog .side-v .review-end-label { font-size: 12.5px; color: var(--nt-tertiary); }
#review-dialog .side-v .review-until { display: flex; align-items: center; gap: 6px; }
#review-dialog .side-clear {
  position: absolute;
  top: -26px;
  right: -2px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--nt-tertiary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
#review-dialog .side-clear:hover { background: var(--nt-hover); color: var(--nt-text); }
#review-dialog .side-clear[hidden] { display: none; }
#review-dialog .side-v .assign-row { display: grid; gap: 4px; }
#review-dialog .review-form { display: block; margin: 0; padding: 0; border: 0; }
/* Верхняя полоса: колонка, положение в списке, стрелки, «⋯». */
#review-dialog .card-nav { right: 48px; }
#review-dialog .card-nav-col::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--nt-blue);
}
#review-dialog .card-nav-col:empty::before { content: none; }
#review-dialog .card-more { position: relative; }
#review-dialog .card-more > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--nt-tertiary);
  cursor: pointer;
}
#review-dialog .card-more > summary::-webkit-details-marker { display: none; }
#review-dialog .card-more > summary:hover,
#review-dialog .card-more[open] > summary { background: var(--nt-hover); color: var(--nt-secondary); }
#review-dialog .card-more-pop {
  position: absolute;
  right: 0;
  top: 32px;
  z-index: 6;
  min-width: 200px;
  padding: 5px;
  border-radius: 10px;
  background: var(--nt-bg);
  box-shadow: 0 0 0 1px var(--nt-divider), 0 12px 30px rgba(15, 15, 15, 0.18);
}
#review-dialog .card-delete {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--nt-red);
  cursor: pointer;
  text-align: left;
}
#review-dialog .card-delete:hover { background: var(--nt-hover); }
#review-dialog .card-delete:disabled { opacity: 0.5; cursor: default; }
#review-dialog .card-more-pop .card-delete-ask { margin: 4px; }
@media (max-width: 760px) {
  #review-dialog .card-layout {
    display: block;
    height: 100%;
    overflow-y: auto;
  }
  #review-dialog .card-main { overflow: visible; padding: 52px 18px 20px; }
  #review-dialog.has-talk .card-main { padding-bottom: 20px; }
  #review-dialog .card-side {
    overflow: visible;
    padding: 6px 18px calc(24px + var(--talk-base, 60px));
    border-left: 0;
    border-top: 1px solid var(--nt-divider);
  }
  #review-dialog .talk-dock { right: 0; padding: 44px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ── «Сделано» ───────────────────────────────────────────────────────────────
   Верх в две колонки: слева фраза про неделю, строка её семи дней без рамок и
   чипы «куда ушла неделя», справа — ритм пяти недель клетками (чем больше
   сделано, тем гуще --green). Ниже — список по дням теми же строками, что
   «Сделано» на «Сегодня». На телефоне клетки встают под строкой недели. */
.done-page { max-width: 820px; margin-inline: auto; }
.done-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: start; margin: 6px 0 4px; }
.done-line { margin: 0 0 12px; font-size: 15px; color: var(--muted); }
.done-line b { color: var(--ink); font-weight: 700; }
.done-line b.g { color: var(--green); }
.done-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 2px 2px 12px; font-size: 13px; }
.done-wd {
  font: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n-66);
  border: 0;
  background: transparent;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 6px;
  cursor: pointer;
}
.done-wd b { margin-left: 1px; font-size: 14px; letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.done-wd.z b { color: var(--n-87-2); font-weight: 400; }
.done-wd.today, .done-wd.today b { color: var(--green); }
.done-wd:hover { background: var(--hairline); }
.done-wd.sel { background: var(--hairline); box-shadow: inset 0 0 0 1.5px var(--coral); }
.done-wd:focus-visible, .done-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.done-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.done-chips:empty { display: none; }
.done-chip { font-size: 12px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); }
.done-chip b { margin-left: 1px; color: var(--ink); }
.done-chip.meet { color: var(--blue-54); background: color-mix(in srgb, var(--blue-54) 9%, var(--paper)); border-color: transparent; }
.done-rhythm { display: grid; gap: 6px; justify-items: start; }
.done-cap { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-66); }
.done-grid { display: grid; grid-template-columns: auto repeat(7, 16px); gap: 4px; align-items: center; width: fit-content; margin-top: 4px; }
.done-grid-lbl { padding-right: 6px; font-size: 10.5px; color: var(--n-66); white-space: nowrap; }
.done-grid-hd { font-size: 10px; text-align: center; text-transform: uppercase; color: var(--n-66); }
.done-cell { display: block; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 4px; background: var(--line); cursor: pointer; }
.done-cell.l1 { background: color-mix(in srgb, var(--green) 30%, var(--paper)); }
.done-cell.l2 { background: color-mix(in srgb, var(--green) 60%, var(--paper)); }
.done-cell.l3 { background: var(--green); }
.done-cell.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.done-cell.sel { outline: 2px solid var(--coral); outline-offset: 1px; }
.done-cell.future { background: transparent; border: 1px dashed var(--line); cursor: default; }
.done-days .shelf-head { margin-top: 20px; }
.done-days .shelf-head.today { color: var(--green); }
/* «Все дни» стоит на конце полки, за линией. */
.done-days .shelf-head::after { order: 1; }
.done-all { order: 2; font: inherit; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-54); border: 0; background: transparent; padding: 0 2px; cursor: pointer; }
.done-all:hover { text-decoration: underline; }
.done-where { color: var(--muted); background: var(--hairline); }
@media (max-width: 760px) {
  .done-top { grid-template-columns: 1fr; }
}
#review-dialog.has-talk .review { padding-bottom: 0; }
#review-dialog .card-nav-col:not(:empty) + .card-nav-rest:not(:empty)::before { content: " · "; }
#review-dialog .card-nav-col { font-weight: 650; color: var(--nt-secondary); }

/* ── карточка «Фокус» ────────────────────────────────────────────────────────
   Одна карточка: тихая верхняя строка, кружок с дугой прогресса подзадач у
   названия, чипы свойств, заметки, подзадачи (список или карта), подвал и
   обсуждение. Панель «Параметры» выезжает справа из той же карточки: ширина
   карточки растёт, колонка содержимого остаётся прежней, и всё вместе снова
   встаёт по центру. Палитра — шалфей поверх токенов карточки, у тёмной темы
   свои значения. */
#review-dialog {
  --params-w: 340px;
  /* Акцент карточки — тот же коралловый, что везде в Кизуне; зелёный остаётся
     только у сделанного (кружок и строка «Сделано»). Оттенки считаются от
     токенов, поэтому тёмная тема получает свои сами. */
  --card-accent: var(--red-50);
  --card-arc: var(--coral);
  --card-arc-track: color-mix(in srgb, var(--coral) 14%, var(--paper));
  --card-ring: color-mix(in srgb, var(--coral) 45%, var(--paper));
  --card-chip-bg: color-mix(in srgb, var(--coral) 8%, var(--paper));
  --card-chip-hover: color-mix(in srgb, var(--coral) 14%, var(--paper));
  --card-chip-edge: color-mix(in srgb, var(--coral) 22%, var(--line));
  --card-chip-text: var(--red-50);
  --card-row-hover: color-mix(in srgb, var(--coral) 5%, var(--paper));
  --card-panel-bg: var(--n-98-4);
  --card-top-line: var(--line);
  --card-crumb-dot: var(--blue-54);
  --card-field-bg: var(--paper);
  --card-field-edge: var(--n-23-a22);
  --card-field-edge-hover: var(--n-23-a28);
  --card-field-ring: color-mix(in srgb, var(--coral) 18%, transparent);
  transition: width 0.28s cubic-bezier(0.2, 0.75, 0.25, 1);
}
:root[data-theme="dark"] #review-dialog {
  --card-accent: var(--coral);
  --card-arc: var(--coral);
  --card-arc-track: rgba(255, 255, 255, 0.12);
  --card-ring: rgba(255, 255, 255, 0.34);
  --card-chip-bg: color-mix(in srgb, var(--coral) 14%, transparent);
  --card-chip-hover: color-mix(in srgb, var(--coral) 22%, transparent);
  --card-chip-edge: color-mix(in srgb, var(--coral) 30%, transparent);
  --card-chip-text: var(--coral);
  --card-row-hover: rgba(255, 255, 255, 0.05);
  --card-panel-bg: #2b2b2b;
  --card-top-line: rgba(255, 255, 255, 0.08);
  --card-crumb-dot: #7f98c2;
  --card-field-bg: rgba(255, 255, 255, 0.045);
  --card-field-edge: rgba(255, 255, 255, 0.1);
  --card-field-edge-hover: rgba(255, 255, 255, 0.2);
  --card-field-ring: color-mix(in srgb, var(--coral) 28%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #review-dialog {
    --card-accent: var(--coral);
    --card-arc: var(--coral);
    --card-arc-track: rgba(255, 255, 255, 0.12);
    --card-ring: rgba(255, 255, 255, 0.34);
    --card-chip-bg: color-mix(in srgb, var(--coral) 14%, transparent);
    --card-chip-hover: color-mix(in srgb, var(--coral) 22%, transparent);
    --card-chip-edge: color-mix(in srgb, var(--coral) 30%, transparent);
    --card-chip-text: var(--coral);
    --card-row-hover: rgba(255, 255, 255, 0.05);
    --card-panel-bg: #2b2b2b;
    --card-top-line: rgba(255, 255, 255, 0.08);
    --card-crumb-dot: #7f98c2;
    --card-field-bg: rgba(255, 255, 255, 0.045);
    --card-field-edge: rgba(255, 255, 255, 0.1);
    --card-field-edge-hover: rgba(255, 255, 255, 0.2);
    --card-field-ring: color-mix(in srgb, var(--coral) 28%, transparent);
  }
}
#review-dialog.params-instant,
#review-dialog.resizing {
  transition: none;
}
#review-dialog.params-open {
  width: min(calc(var(--card-w) + var(--params-w)), calc(100vw - 48px));
}
/* Дорожка: колонка и панель рядом; когда обе не помещаются, дорожка
   прокручивается к панели, а страница под карточкой не растёт. */
#review-dialog .card-shell {
  display: flex;
  align-items: stretch;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#review-dialog .card-shell::-webkit-scrollbar {
  display: none;
}
#review-dialog .card-main {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  width: min(var(--card-w), calc(100vw - 48px));
  min-width: 0;
  height: 100%;
}
#review-dialog .card-params {
  position: relative;
  flex: none;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  border-left: 1px solid var(--card-top-line);
  background: var(--card-panel-bg);
  color: var(--nt-text);
  transition: width 0.28s cubic-bezier(0.2, 0.75, 0.25, 1), visibility 0s linear 0.28s;
}
#review-dialog.params-open .card-params {
  width: var(--params-w);
  visibility: visible;
  transition: width 0.28s cubic-bezier(0.2, 0.75, 0.25, 1), visibility 0s;
}
#review-dialog.params-instant .card-params {
  transition: none;
}
#review-dialog .card-params-inner {
  display: flex;
  flex-direction: column;
  width: var(--params-w);
  height: 100%;
}
#review-dialog .card-params-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  min-height: 56px;
  padding: 0 14px 0 22px;
  border-bottom: 1px solid var(--card-top-line);
}
#review-dialog .card-params-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--nt-text);
}
#review-dialog .card-params-close {
  flex: none;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--nt-tertiary);
  font-size: 0;
  cursor: pointer;
}
#review-dialog .card-params-close::before {
  content: "×";
  font-size: 22px;
  line-height: 1;
}
#review-dialog .card-params-close:hover {
  background: var(--nt-hover);
  color: var(--nt-secondary);
}
#review-dialog .card-params-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 24px;
}
#review-dialog .card-params .review-form {
  margin: 0;
  padding: 0;
  border: 0;
}
/* Инспектор: имя свойства над полем, поля во всю ширину панели по одной
   сетке. Значок — лёгкий, крестик сброса — справа в строке имени. */
#review-dialog .card-params .props {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#review-dialog .card-params .prop,
#review-dialog .card-params .prop.has-clear {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label clear" "control control";
  gap: 6px 8px;
  align-items: center;
  min-height: 0;
  border-radius: 0;
}
#review-dialog .card-params .prop:hover {
  background: none;
}
#review-dialog .card-params .prop[hidden] {
  display: none;
}
#review-dialog .card-params .prop > .prop-label {
  grid-area: label;
  gap: 6px;
  min-height: 0;
  padding: 0;
  font-size: 12px;
  color: var(--nt-secondary);
}
#review-dialog .card-params .prop > .prop-label:hover {
  background: none;
}
#review-dialog .card-params .prop > .prop-label .prop-icon {
  opacity: 0.55;
}
#review-dialog .card-params .prop > .prop-label .prop-icon svg {
  width: 14px;
  height: 14px;
}
#review-dialog .card-params .prop > :not(.prop-label):not(.prop-clear) {
  grid-area: control;
  min-width: 0;
}
#review-dialog .card-params .prop > .prop-clear {
  grid-area: clear;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 5px;
  font-size: 15px;
  line-height: 1;
}
#review-dialog .card-params .prop > .completion-button {
  justify-self: start;
  margin: 0;
}
#review-dialog .card-params .props select,
#review-dialog .card-params .props input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--card-field-edge);
  border-radius: 8px;
  background: var(--card-field-bg);
  color: var(--nt-text);
  font-size: 13px;
  box-sizing: border-box;
}
#review-dialog .card-params .props select:hover,
#review-dialog .card-params .props input:hover {
  border: 1px solid var(--card-field-edge-hover);
  background: var(--card-field-bg);
}
#review-dialog .card-params .props select:focus,
#review-dialog .card-params .props input:focus {
  border: 1px solid var(--card-accent);
  background: var(--card-field-bg);
  box-shadow: 0 0 0 3px var(--card-field-ring);
}
#review-dialog .card-params .props input::placeholder {
  color: var(--nt-tertiary);
}
/* Срок: дата — строка, начало и конец — две равные колонки с подписями,
   напоминание и повтор — свои строки той же ширины. */
#review-dialog .card-params .review-schedule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}
#review-dialog .card-params .review-schedule > input[type="date"],
#review-dialog .card-params .review-schedule > .review-remind-row,
#review-dialog .card-params .review-schedule > .review-repeat-row {
  grid-column: 1 / -1;
}
#review-dialog .card-params .review-remind-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#review-dialog .card-params .review-start,
#review-dialog .card-params .review-end {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
#review-dialog .card-params .review-end:has(input[hidden]) {
  display: none;
}
#review-dialog .card-params .review-schedule:has(.review-end input[hidden]) .review-start {
  grid-column: 1 / -1;
}
#review-dialog .card-params .review-end-label {
  font-size: 11px;
  color: var(--nt-tertiary);
}
#review-dialog .card-params .review-repeat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
#review-dialog .card-params .review-until {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin-top: 6px;
}
#review-dialog .card-params .review-until[hidden] {
  display: none;
}
#review-dialog .card-params .card-foreign {
  margin: 0 0 14px;
}

/* Верхняя строка: откуда открыли, «← родитель» у подзадачи, соседние дела,
   «Параметры» и крестик. */
#review-dialog .card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: none;
  min-height: 56px;
  padding: 12px 22px 12px 28px;
  border-bottom: 1px solid var(--card-top-line);
  font-size: 12.5px;
  color: var(--nt-tertiary);
}
#review-dialog .card-top-crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
}
#review-dialog .card-crumb-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--card-crumb-dot);
}
#review-dialog .card-crumb-word {
  color: var(--nt-secondary);
}
#review-dialog .card-nav {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: auto;
  min-width: 0;
  pointer-events: auto;
}
#review-dialog .card-nav-crumb {
  margin: 0;
  font-size: 12.5px;
}
#review-dialog .card-return {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  max-width: 320px;
  padding: 5px 6px 5px 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--nt-secondary);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
#review-dialog .card-return:hover {
  color: var(--nt-text);
}
#review-dialog .card-return-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#review-dialog .card-depth {
  flex: none;
  white-space: nowrap;
  font-size: 11px;
  color: var(--nt-tertiary);
}
#review-dialog .card-top-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
#review-dialog .card-top-nav {
  display: inline-flex;
  gap: 2px;
}
#review-dialog .card-top-nav:empty {
  display: none;
}
#review-dialog #review-params-toggle {
  height: 29px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--nt-secondary);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
#review-dialog #review-params-toggle:hover {
  background: var(--nt-hover);
}
#review-dialog #review-params-toggle.open {
  background: var(--card-chip-bg);
  color: var(--card-accent);
}
#review-dialog .dialog-close {
  position: static;
  top: auto;
  right: auto;
  width: 29px;
  height: 29px;
  border-radius: 7px;
  z-index: auto;
}

/* Колонка содержимого: прокрутка — в ней, верхняя строка стоит. Правило «две
   панели» выше ставит .review overflow: hidden, и без явного auto длинная
   карточка не прокручивалась ни колесом, ни пальцем (полосы нет, scrollbar-width: none). */
#review-dialog .review {
  flex: 1;
  height: auto;
  min-height: 0;
  overflow-y: auto;
  padding: 26px max(32px, calc((100% - 788px) / 2)) 28px;
}
#review-dialog .card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
#review-dialog .card-head.with-tick,
#review-dialog .card-head.with-tick.hang {
  padding-left: 0;
}
#review-dialog .completion-halo {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  margin: 0 -3px 0 -13px;
}
#review-dialog .halo-meter {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}
#review-dialog .completion-halo.has-progress .halo-meter {
  display: block;
}
#review-dialog .halo-meter svg {
  display: block;
  width: 54px;
  height: 54px;
  transform: rotate(-90deg);
}
#review-dialog .halo-meter circle {
  fill: none;
  stroke-width: 2.8;
}
#review-dialog .halo-track {
  stroke: var(--card-arc-track);
}
#review-dialog .halo-fill {
  stroke: var(--card-arc);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#review-dialog .card-tick,
#review-dialog .card-head.hang .card-tick {
  position: relative;
  top: auto;
  left: auto;
  border-color: var(--card-ring);
  background: var(--nt-bg);
}
#review-dialog .card-tick:hover,
#review-dialog .card-tick:focus-visible {
  border-color: var(--card-accent);
  color: var(--card-accent);
}
#review-dialog .card-tick.is-done {
  border-color: var(--card-accent);
  background: var(--card-accent);
  color: #fff;
}
#review-dialog .card-tick.is-done:hover {
  background: var(--nt-bg);
  color: var(--card-accent);
}
#review-dialog .card-title-copy {
  flex: 1;
  min-width: 0;
}
#review-dialog .review h2.card-title {
  margin: 7px 0 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.6px;
  overflow-wrap: anywhere;
}
#review-dialog .card-title-edit {
  margin: 7px 0 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.6px;
}
#review-dialog .progress-caption {
  display: inline-block;
  margin: 0;
  padding: 6px 0 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--nt-tertiary);
  text-align: left;
  cursor: pointer;
}
#review-dialog .progress-caption:hover {
  color: var(--card-accent);
  text-decoration: underline;
}
/* Чипы свойств и строка «Сделано» стоят по левому краю — в одну линию с названием,
   «Подзадачей дела …», заметкой и описанием: без отступа под кружок. */
#review-dialog .card-done {
  margin-top: 10px;
}
/* Чипы свойств под названием. */
#review-dialog .card-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 4px;
}
#review-dialog .card-chips[hidden] {
  display: none;
}
#review-dialog .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--card-chip-edge);
  border-radius: 7px;
  background: var(--card-chip-bg);
  color: var(--card-chip-text);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
#review-dialog .chip:hover {
  background: var(--card-chip-hover);
}
#review-dialog .chip.quiet {
  background: transparent;
  border-style: dashed;
  color: var(--nt-tertiary);
}
#review-dialog .chip .prop-icon {
  color: inherit;
}
#review-dialog .chip .prop-icon svg {
  width: 14px;
  height: 14px;
}
#review-dialog .card-origin {
  margin: 10px 0 0;
}
#review-dialog .card-foreign {
  margin: 12px 0 0;
}
#review-dialog .prop-section {
  margin: 24px 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nt-tertiary);
}
#review-dialog .card-body {
  margin-top: 0;
}
/* Правило старой карточки (#review-dialog #card-body-editor) сильнее класса:
   перекрываем тем же селектором, позже по порядку. */
#review-dialog #card-body-editor {
  min-height: 120px;
}

/* Путь к подзадаче на глубине: корень › … › родитель. */
#review-dialog .card-path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 14px;
  font-size: 11px;
  color: var(--nt-tertiary);
}
#review-dialog .card-path-step {
  max-width: 210px;
  padding: 3px 0;
  border: 0;
  background: none;
  color: var(--nt-secondary);
  font: inherit;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
#review-dialog .card-path-step:hover {
  color: var(--card-accent);
  text-decoration: underline;
}
#review-dialog .card-path-menu {
  position: relative;
}
#review-dialog .card-path-menu summary {
  list-style: none;
  padding: 0 4px;
  font-size: 16px;
  cursor: pointer;
}
#review-dialog .card-path-menu summary::-webkit-details-marker {
  display: none;
}
#review-dialog .card-path-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 190px;
  max-width: 260px;
  max-height: 220px;
  overflow: auto;
  padding: 10px 14px;
  border: 1px solid var(--nt-divider);
  border-radius: 9px;
  background: var(--nt-bg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Подзадачи: список или карта на одних данных. */
#review-dialog .card-subtasks {
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--nt-divider);
}
#review-dialog .card-subtasks[hidden] {
  display: none;
}
#review-dialog .subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
}
#review-dialog .subhead-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
#review-dialog .subhead-lead b {
  font-weight: 600;
}
#review-dialog .subtask-count {
  font-size: 11.5px;
  color: var(--nt-tertiary);
}
#review-dialog .subtask-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
#review-dialog .steps-view {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--card-chip-edge);
  border-radius: 7px;
  background: var(--card-chip-bg);
}
#review-dialog .steps-view[hidden] {
  display: none;
}
#review-dialog .steps-view-button {
  padding: 4px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--nt-secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#review-dialog .steps-view-button.active {
  background: var(--nt-bg);
  color: var(--nt-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
#review-dialog .subtask-add {
  padding: 5px 7px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--card-accent);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
#review-dialog .subtask-add:hover {
  background: var(--card-chip-bg);
}
#review-dialog .subtasks,
#review-dialog .metric-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0 6px;
}
#review-dialog .subtasks[hidden],
#review-dialog .metric-tree[hidden] {
  display: none;
}
#review-dialog .subtask,
#review-dialog .tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 -8px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 14.5px;
  line-height: 1.45;
}
#review-dialog .tree-row {
  gap: 8px;
  padding-left: calc(8px + var(--indent, 0px));
}
#review-dialog .subtask:hover,
#review-dialog .tree-row:hover {
  background: var(--card-row-hover);
}
#review-dialog .subtask-check,
#review-dialog .tree-check {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--card-ring);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
#review-dialog .subtask-check:checked,
#review-dialog .tree-check:checked {
  border-color: var(--card-accent);
  background: var(--card-accent);
}
#review-dialog .subtask-check:checked::after,
#review-dialog .tree-check:checked::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
#review-dialog .subtask-check:disabled,
#review-dialog .tree-check:disabled {
  opacity: 0.5;
  cursor: default;
}
#review-dialog .subtask-open,
#review-dialog .tree-open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#review-dialog .tree-open {
  gap: 10px;
  padding: 8px 0;
}
#review-dialog .subtask-name,
#review-dialog .tree-title {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
#review-dialog .subtask-name.done,
#review-dialog .tree-title.done {
  text-decoration: line-through;
  color: var(--nt-tertiary);
}
#review-dialog .subtask-meta,
#review-dialog .tree-open small {
  flex: none;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--card-chip-bg);
  color: var(--nt-secondary);
  font-size: 10.5px;
  white-space: nowrap;
}
#review-dialog .subtask-arrow {
  flex: none;
  color: var(--nt-tertiary);
  font-size: 18px;
}
#review-dialog .subtask-empty {
  margin: 8px 0;
  font-size: 12.5px;
  color: var(--nt-tertiary);
}
#review-dialog .tree-fold {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--nt-tertiary);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
#review-dialog .tree-fold:hover {
  background: var(--card-chip-bg);
}
#review-dialog .tree-fold.empty {
  visibility: hidden;
}
#review-dialog .branch-dial {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(var(--card-arc) var(--branch-progress, 0%), var(--card-arc-track) 0);
}
#review-dialog .branch-dial::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--nt-bg);
}
#review-dialog .subtask-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--card-chip-edge);
  border-radius: 8px;
  background: var(--card-chip-bg);
}
#review-dialog .subtask-composer[hidden] {
  display: none;
}
#review-dialog .subtask-composer input {
  flex: 1;
  min-width: 0;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--nt-text);
  font: inherit;
  font-size: 13.5px;
}
#review-dialog .subtask-composer input:focus {
  outline: none;
}
#review-dialog .subtask-submit {
  padding: 5px;
  border: 0;
  background: none;
  color: var(--card-accent);
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}
#review-dialog .subtask-cancel {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--nt-tertiary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
#review-dialog .task-next {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 0 4px;
  font-size: 12.5px;
  color: var(--nt-tertiary);
}
#review-dialog .task-next[hidden] {
  display: none;
}
#review-dialog .next-step-link {
  min-width: 0;
  padding: 3px 0;
  border: 0;
  background: none;
  color: var(--card-accent);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
#review-dialog .next-step-link:hover {
  text-decoration: underline;
}
#review-dialog .next-step-link[hidden] {
  display: none;
}

@media (max-width: 760px) {
  #review-dialog {
    --params-w: min(340px, calc(100vw - 30px));
  }
  #review-dialog.params-open {
    width: 100vw;
  }
  #review-dialog .card-main {
    width: 100vw;
  }
  /* Ширина панели на телефоне не анимируется (правило перекрывает и открытое
     состояние): к панели плавно едет сама дорожка, одним движением. */
  #review-dialog .card-params,
  #review-dialog.params-open .card-params {
    transition: none;
  }
  #review-dialog .card-top {
    min-height: 50px;
    padding: 8px 12px 8px 16px;
    gap: 8px;
  }
  #review-dialog .card-return {
    max-width: 44vw;
  }
  #review-dialog .card-depth {
    display: none;
  }
  #review-dialog .review {
    padding: 22px 20px 24px;
  }
  #review-dialog .completion-halo {
    width: 48px;
    height: 48px;
    margin: 0 -2px 0 -9px;
  }
  #review-dialog .halo-meter svg {
    width: 48px;
    height: 48px;
  }
  #review-dialog .review h2.card-title,
  #review-dialog .card-title-edit {
    margin-top: 5px;
    font-size: 27px;
  }
  #review-dialog .card-chips {
    gap: 6px;
  }
  #review-dialog .chip {
    font-size: 12px;
  }
  #review-dialog .subhead {
    gap: 8px;
  }
  #review-dialog .card-params-head {
    min-height: 50px;
    padding: 0 10px 0 18px;
  }
  #review-dialog .card-params-body {
    padding: 16px 18px 20px;
  }
}
@media (max-width: 360px) {
  #review-dialog .card-top-tools {
    gap: 0;
  }
  #review-dialog #review-params-toggle {
    padding: 0 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #review-dialog,
  #review-dialog .card-params,
  #review-dialog .halo-fill,
  #review-dialog .subtask-check,
  #review-dialog .tree-check {
    transition: none;
  }
}

/* Финальная композиция карточки: сбрасываем размеры старой двухколоночной версии.
   Высоту окна теперь задаёт содержимое (см. «режимы показа карточки» ниже). */
#review-dialog .card-main { padding: 0; overflow: hidden; }
#review-dialog .review { display: flex; flex-direction: column; }
#review-dialog .review h2.card-title:hover { background: transparent; }
#review-dialog .card-title-edit { background: var(--nt-bg); }
#review-dialog .card-nav-col::before { content: none; }
#review-dialog .card-top-crumb > .card-nav-col:not([hidden])::after {
  content: "/";
  display: inline-block;
  margin-left: 9px;
  color: var(--nt-tertiary);
  font-weight: 400;
}
#review-dialog #card-body-editor { min-height: 0; }
#review-dialog #card-body-editor[data-empty="true"] { min-height: 36px; }

/* «Записано» — компактная строка футера карточки, перед источником и версией */
#review-dialog .card-written.card-footer-line {
  min-height: 0;
  margin: 14px 0 2px;
  font-size: 12.5px;
  color: var(--nt-tertiary);
}

/* ── футер карточки: прижат к низу, служебное одной строкой ────────────────── */
#review-dialog .review {
  display: flex;
  flex-direction: column;
}
#review-dialog .card-footer {
  margin-top: auto;
  padding-top: 16px;
}
#review-dialog .card-files-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
#review-dialog .card-files-head .attach-empty {
  color: var(--nt-tertiary);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
#review-dialog .card-files-head .secondary {
  margin-left: auto;
}
/* Служебный подвал — одной ровной строкой: у всех пунктов один шрифт и одна
   высота, нажимаемое подсвечивается подложкой, значки — как у свойств. Строка
   выступает на поле подложки влево и вправо, чтобы текст первого пункта стоял
   по краю карточки, а черта над ней — по тем же краям. Источник раскрывается
   листом над строкой, а не распирает её. */
#review-dialog .card-footer-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px 10px;
  flex-wrap: wrap;
  margin: 18px -10px 0;
  padding-top: 14px;
  font-size: 13px;
  line-height: 20px;
}
#review-dialog .card-footer-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  border-top: 1px solid var(--nt-divider);
}
#review-dialog .card-footer-row > * {
  margin: 0;
}
#review-dialog .card-footer-row :is(.card-calendar-menu > summary, .card-source > summary, .card-delete, .card-written.card-footer-line, .card-calendar-link) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  margin-block: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}
#review-dialog .card-footer-row :is(.card-calendar-menu > summary, .card-source > summary) {
  list-style: none;
  cursor: pointer;
  color: var(--nt-secondary);
}
#review-dialog .card-footer-row :is(.card-calendar-menu > summary, .card-source > summary)::-webkit-details-marker {
  display: none;
}
#review-dialog .card-footer-row :is(.card-calendar-menu > summary, .card-source > summary):hover,
#review-dialog .card-footer-row .card-source[open] > summary {
  background: var(--nt-hover);
  color: var(--nt-text);
}
#review-dialog .card-footer-row .card-calendar-menu > summary {
  color: var(--fmt-blue);
}
#review-dialog .card-footer-row .card-calendar-menu > summary .prop-icon {
  color: inherit;
}
#review-dialog .card-footer-row .card-written.card-footer-line {
  color: var(--nt-tertiary);
}
#review-dialog .card-footer-row .card-calendar {
  gap: 0;
  font-size: 13px;
}
#review-dialog .card-footer-row .card-calendar-link {
  color: var(--nt-tertiary);
}
#review-dialog .card-footer-row .card-source .prop-icon:last-child {
  transition: transform 0.15s ease;
}
#review-dialog .card-footer-row .card-source[open] .prop-icon:last-child {
  transform: rotate(180deg);
}
#review-dialog .card-footer-row .card-source {
  position: relative;
  border-top: 0;
  padding-top: 0;
}
#review-dialog .card-source-body {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(460px, 78vw);
  max-height: 320px;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--nt-divider);
  border-radius: 12px;
  background: var(--nt-bg, var(--paper));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
}
#review-dialog .card-source-body .review-raw {
  margin: 0;
}
#review-dialog .card-source-body .entry-meta {
  margin: 0;
}
#review-dialog .card-footer-row > .card-delete {
  margin-left: auto;
  width: auto;
  color: var(--nt-red);
  cursor: pointer;
}
#review-dialog .card-footer-row .card-delete .prop-icon {
  color: inherit;
}
#review-dialog .card-footer-row .card-delete:hover {
  background: rgba(235, 87, 87, 0.1);
  color: var(--nt-red);
}
#review-dialog .card-footer-row .card-delete-ask {
  margin: 0 0 0 auto;
  padding: 0 10px;
}

@media (max-width: 760px) {
  #review-dialog { --params-w: 100vw; }
}

/* ── режимы показа карточки ──────────────────────────────────────────────────
   «По центру» — окно поверх затемнённой страницы: ширина 880px, высота по
   содержимому, зазор в 40px от верха и низа. Выше экрана оно не вырастает:
   прокручивается основная часть, а нижняя полоса с полем «Написать себе…»
   остаётся прижатой к низу окна. «Сбоку» — во весь рост у правого края,
   ширина 56% экрана; страница за ней видна и жива, окно не модальное.
   «Во весь экран» — как страница: содержимое по центру шириной до 980px.
   Размер по центру и ширина сбоку меняются ручками по краям и помнятся
   (--card-w, --card-h, --card-sw; kizuna-card-size), высота поля обсуждения —
   одна на все карточки (--talk-h; kizuna-card-talk-height). Ручки и режимы —
   только для широких экранов: на телефоне все три режима — во весь экран,
   как раньше. */
#review-dialog .card-resize,
#review-dialog .card-size-badge,
#review-dialog .talk-resize {
  display: none;
}
#review-dialog .card-modes {
  position: relative;
  display: inline-flex;
  flex: none;
}
#review-dialog .card-mode-toggle {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--nt-secondary);
  cursor: pointer;
}
#review-dialog .card-mode-toggle:hover {
  background: var(--nt-hover);
}
#review-dialog .card-mode-toggle[aria-expanded="true"] {
  background: var(--card-chip-bg);
  color: var(--card-accent);
}
#review-dialog .card-mode-toggle svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#review-dialog .card-mode-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: -4px;
  z-index: 8;
  display: grid;
  gap: 2px;
  width: 296px;
  padding: 6px;
  border-radius: 12px;
  background: var(--nt-bg);
  box-shadow: 0 0 0 1px var(--nt-divider), 0 18px 42px rgba(15, 15, 15, 0.2);
  font-size: 13px;
  color: var(--nt-text);
}
#review-dialog .card-mode-menu[hidden] {
  display: none;
}
#review-dialog .card-mode-menu > button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#review-dialog .card-mode-menu > button:hover,
#review-dialog .card-mode-menu > button:focus-visible {
  background: var(--nt-hover);
}
#review-dialog .card-mode-menu > button > svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--nt-secondary);
}
#review-dialog .card-mode-text {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1.3;
}
#review-dialog .card-mode-text b {
  font-size: 13px;
  font-weight: 600;
}
#review-dialog .card-mode-text small {
  font-size: 11.5px;
  color: var(--nt-tertiary);
}
#review-dialog .card-mode-ok {
  color: var(--card-accent);
  font-weight: 700;
  text-align: center;
}
#review-dialog .card-mode-menu > button[aria-checked="true"] .card-mode-ok::before {
  content: "✓";
}
#review-dialog .card-mode-hint {
  margin: 4px 0 0;
  padding: 8px 8px 3px;
  border-top: 1px solid var(--nt-divider);
  font-size: 11px;
  color: var(--nt-tertiary);
}
@media (max-width: 760px) {
  #review-dialog .card-modes {
    display: none;
  }
}

@media (min-width: 760.02px) {
  /* Окно — колонка «верхняя строка / дорожка»: у высоты по содержимому нет
     другого способа остаться в зазорах, кроме как отдать место основной части. */
  #review-dialog[open] {
    display: flex;
    flex-direction: column;
  }
  #review-dialog .card-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
  #review-dialog .card-main {
    height: auto;
  }
  /* По центру. Сверху — зазор, снизу окно растёт по содержимому не дальше
     такого же зазора; своя высота, если её задали ручкой, тоже в этих пределах. */
  #review-dialog {
    inset: 40px 0 auto;
    margin: 0 auto;
    width: min(var(--card-w, 880px), calc(100vw - 48px));
    height: var(--card-h, auto);
    max-width: none;
    max-height: calc(100vh - 80px);
  }
  #review-dialog.params-open {
    width: min(calc(var(--card-w, 880px) + var(--params-w)), calc(100vw - 48px));
  }
  /* С открытым обсуждением короткой карточке нужно место под переписку. */
  #review-dialog.talk-open {
    min-height: min(520px, calc(100vh - 80px));
  }
  /* Сбоку. */
  #review-dialog[data-mode="side"] {
    inset: 0 0 0 auto;
    z-index: 30;
    margin: 0;
    width: clamp(420px, var(--card-sw, 56%), calc(100vw - 200px));
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: -1px 0 0 var(--nt-divider), -22px 0 60px rgba(15, 15, 15, 0.16);
  }
  :root[data-theme="dark"] #review-dialog[data-mode="side"] {
    box-shadow: -1px 0 0 var(--nt-divider), -22px 0 60px rgba(0, 0, 0, 0.5);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #review-dialog[data-mode="side"] {
      box-shadow: -1px 0 0 var(--nt-divider), -22px 0 60px rgba(0, 0, 0, 0.5);
    }
  }
  /* Во весь экран. */
  #review-dialog[data-mode="full"] {
    inset: 0;
    margin: 0;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
  /* И сбоку, и во весь экран ширину окна держит режим, а колонка содержимого
     берёт то, что осталось от панели «Параметры»: сжимается до 360px, потом
     дорожка прокручивается к панели. */
  #review-dialog:is([data-mode="side"], [data-mode="full"]) .card-main {
    flex: 1 1 0;
    width: auto;
    min-width: min(360px, 100%);
  }
  /* Колонка содержимого — до 980px по центру; верхняя строка тянется на всё окно. */
  #review-dialog .review {
    padding-inline: max(46px, calc((100% - 980px) / 2));
  }
  #review-dialog .talk-dock {
    right: 0;
    padding-inline: max(46px, calc((100% - 980px) / 2));
  }
  /* Ручки: невидимые полосы по краям внутри окна; о них говорит курсор. */
  #review-dialog .card-resize {
    position: absolute;
    z-index: 3;
    display: block;
    touch-action: none;
    user-select: none;
  }
  #review-dialog .card-resize[data-dir="e"] { top: 14px; right: 0; bottom: 14px; width: 8px; cursor: ew-resize; }
  #review-dialog .card-resize[data-dir="w"] { top: 14px; bottom: 14px; left: 0; width: 8px; cursor: ew-resize; }
  #review-dialog .card-resize[data-dir="s"] { right: 14px; bottom: 0; left: 14px; height: 8px; cursor: ns-resize; }
  #review-dialog .card-resize[data-dir="se"] { right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; }
  #review-dialog .card-resize[data-dir="sw"] { bottom: 0; left: 0; width: 16px; height: 16px; cursor: nesw-resize; }
  #review-dialog[data-mode="side"] .card-resize:not([data-dir="w"]),
  #review-dialog[data-mode="full"] .card-resize {
    display: none;
  }
  #review-dialog[data-mode="side"] .card-resize[data-dir="w"] {
    top: 0;
    bottom: 0;
  }
  #review-dialog .card-size-badge {
    position: absolute;
    left: 50%;
    bottom: 1px;
    z-index: 7;
    display: block;
    padding: 0 9px;
    border: 1px solid var(--nt-divider);
    border-radius: 99px;
    background: var(--nt-bg);
    color: var(--nt-tertiary);
    font-size: 10.5px;
    line-height: 13px;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 0.15s;
  }
  #review-dialog.resizing .card-size-badge,
  #review-dialog.sized .card-size-badge {
    opacity: 1;
  }
  #review-dialog.resizing {
    user-select: none;
  }
  /* Смена режима и возврат размера по умолчанию — без перехода: ширина и
     положение прыгают, а не ползут. */
  #review-dialog.jump {
    transition: none;
  }
  /* Поле обсуждения: высота одна на все карточки; тянется верхней кромкой. */
  #review-dialog .thread-composer {
    min-height: max(44px, var(--talk-h, 0px));
  }
  #review-dialog .thread-input {
    min-height: max(36px, calc(var(--talk-h, 0px) - 8px));
    max-height: max(200px, calc(var(--talk-h, 0px) - 8px));
  }
  #review-dialog .talk-resize {
    position: absolute;
    top: -5px;
    right: 22px;
    left: 22px;
    z-index: 2;
    display: block;
    height: 10px;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #review-dialog .card-size-badge {
    transition: none;
  }
}

/* Сбоку видно, какая запись читается: её карточка на доске и строка в списке
   обведены тем же синим кольцом, что и фокус с клавиатуры. */
.card-is-open {
  box-shadow: inset 0 0 0 2px var(--focus);
}

/* ── правая группа шапки в цветах дока ──
   Колокольчик, шестерёнка, тема и лицо — те же тёплые плитки, что разделы внизу:
   у каждого своя заливка и цвет значка, рамка — тонкий внутренний волосок. */
.bell-menu > summary,
.settings-link,
.theme-toggle,
.account-menu > summary {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: filter 0.15s ease, transform 0.15s ease;
}
:root[data-theme='dark'] .bell-menu > summary,
:root[data-theme='dark'] .settings-link,
:root[data-theme='dark'] .theme-toggle,
:root[data-theme='dark'] .account-menu > summary {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.bell-menu > summary { background: color-mix(in srgb, var(--coral) 13%, var(--paper)); color: var(--coral); }
.settings-link { background: var(--dock-board-b); color: var(--dock-board-f); }
.theme-toggle { background: var(--dock-today-b); color: var(--dock-today-f); }
.account-menu > summary { background: var(--dock-done-b); color: var(--dock-done-f); }
.bell-menu > summary:hover, .bell-menu[open] > summary,
.settings-link:hover,
.theme-toggle:hover,
.account-menu > summary:hover, .account-menu[open] > summary {
  border: 0;
  filter: saturate(1.3) brightness(0.97);
  transform: scale(1.06);
}
.bell-menu > summary:hover, .bell-menu[open] > summary { color: var(--coral); }
.settings-link:hover { color: var(--dock-board-f); }
.theme-toggle:hover { color: var(--dock-today-f); }
.account-menu > summary:hover, .account-menu[open] > summary { color: var(--dock-done-f); }