/* Планер. Один файл, без сборки (ADR-0004).
   Экран открывают с телефона одной рукой: крупные цели нажатия, одна колонка.

   ── Замысел оформления (ADR-0036) ─────────────────────────────────────────
   Интерфейс строится на четырёх правилах, и каждое отвечает за то, чтобы
   экран не выглядел набором одинаковых прямоугольников:

   1. БУМАГА, А НЕ КОРОБКИ. Рамка — дорогой знак: она говорит «это отдельный
      предмет». Раньше её носило всё подряд, и список дел читался как склад
      карточек. Теперь рамку имеют только настоящие объекты (форма, цель
      месяца, главное дело), а перечисления держатся воздухом и волосяной
      линией.
   2. ДЕНЬ — ЭТО НИТЬ ВРЕМЕНИ. Расписание нарисовано вертикальной линией с
      узлами-кружками: сверху вниз идёт время, узел — дело, залитый узел —
      сделанное. Человек видит маршрут дня, а не восемь одинаковых плашек.
   3. ОДИН ГОЛОС — МЕДЬ. Фирменный акцент ровно один. Зелёный, янтарный и
      кирпичный говорят только о состоянии (сделано, внимание, просрочено) и
      никогда не используются для украшения.
   4. ЦИФРЫ — СЕРИФОМ. Playfair берут время, даты и объёмы: числа получают
      характер печатного набора, а рабочий текст остаётся Montserrat.

   Цвет и шрифт — из бренд-системы ERA | New Body: те же токены, что в боевом
   приложении (frontend-redesign/src/styles/tokens.css). Свои названия цветов
   здесь не выдумываются: разъехавшаяся палитра — первое, что выдаёт
   «сделано на коленке». Производные токены (тени, подложки, нить) собраны из
   тех же ink и copper, новых красок в системе не появилось. */

:root {
  color-scheme: light;

  --paper: #F2ECE4;   /* cream — фон экрана */
  --surface: #FBF8F3; /* поверхность карточек */
  --sunken: #F4EEE6;  /* вторичные блоки и поля ввода */
  --ink: #20031C;
  --ink-2: rgba(32, 3, 28, .66);
  --ink-3: rgba(32, 3, 28, .48);
  --line: rgba(32, 3, 28, .10);
  --line-strong: rgba(32, 3, 28, .16);

  --accent: #BC6A4E;        /* copper — главный акцент бренда */
  --accent-ink: #8A452C;    /* читаемый текст на светлой меди */
  --accent-soft: rgba(188, 106, 78, .12);
  --accent-edge: rgba(188, 106, 78, .38);
  --accent-on: #F2ECE4;

  /* Смысловые цвета отдельно от акцента: «сделано» и «просрочено» не должны
     спорить с фирменной медью. */
  --green: #4C7A5B;
  --green-bg: rgba(76, 122, 91, .12);
  --amber: #A7761B;
  --amber-bg: rgba(167, 118, 27, .12);
  --brick: #A63D2E;
  --brick-bg: rgba(166, 61, 46, .10);

  /* Производные: нить расписания, подложка под мета-блоками, монограмма,
     тени. Тени в светлой теме — бумажные: почти без затемнения, только намёк
     на то, что лист лежит поверх фона. */
  --rail: rgba(32, 3, 28, .13);
  --wash: rgba(32, 3, 28, .035);
  --mono-bg: rgba(188, 106, 78, .14);
  --shadow-soft: 0 1px 2px rgba(32, 3, 28, .04), 0 6px 18px rgba(32, 3, 28, .05);
  --shadow-lift: 0 2px 6px rgba(32, 3, 28, .07), 0 14px 30px rgba(32, 3, 28, .08);
  --focus-a: #C87757;
  --focus-b: #9E4F35;
  --focus-on: #FDF7F1;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-text: Montserrat, -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI", system-ui, sans-serif;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 22px;
}

/* Тёмная тема. Два одинаковых набора значений намеренно: один срабатывает по
   системной настройке телефона, второй — когда человек выбрал тёмную руками
   (кука `tetrad_theme`). Держать их в синхроне помогает тест-страж
   `test_dark_theme_blocks_match`: расхождение — это экран, где половина
   цветов от одной темы, а половина от другой. */
@media (prefers-color-scheme: dark) {
  /* :not([data-theme="light"]) — чтобы выбранная вручную светлая тема
     побеждала системную тёмную, а не спорила с ней. */
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper: #121214;
    --surface: #1B1B1E;
    --sunken: #0D0D0F;
    --ink: #F2F3F5;
    --ink-2: rgba(242, 243, 245, .70);
    --ink-3: rgba(242, 243, 245, .50);
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .16);

    --accent: #FF6B35;
    --accent-ink: #FF8A5C;
    --accent-soft: rgba(255, 107, 53, .16);
    --accent-edge: rgba(255, 107, 53, .42);
    --accent-on: #0D0E11;

    --green: #6FBF8F;
    --green-bg: rgba(111, 191, 143, .14);
    --amber: #E8B04B;
    --amber-bg: rgba(232, 176, 75, .14);
    --brick: #F07A63;
    --brick-bg: rgba(240, 122, 99, .14);

    --rail: rgba(255, 255, 255, .14);
    --wash: rgba(255, 255, 255, .04);
    --mono-bg: rgba(255, 107, 53, .18);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 22px rgba(0, 0, 0, .35);
    --shadow-lift: 0 2px 8px rgba(0, 0, 0, .55), 0 18px 36px rgba(0, 0, 0, .45);
    --focus-a: #F0642F;
    --focus-b: #A83A16;
    --focus-on: #16100C;
  }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --paper: #121214;
    --surface: #1B1B1E;
    --sunken: #0D0D0F;
    --ink: #F2F3F5;
    --ink-2: rgba(242, 243, 245, .70);
    --ink-3: rgba(242, 243, 245, .50);
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .16);

    --accent: #FF6B35;
    --accent-ink: #FF8A5C;
    --accent-soft: rgba(255, 107, 53, .16);
    --accent-edge: rgba(255, 107, 53, .42);
    --accent-on: #0D0E11;

    --green: #6FBF8F;
    --green-bg: rgba(111, 191, 143, .14);
    --amber: #E8B04B;
    --amber-bg: rgba(232, 176, 75, .14);
    --brick: #F07A63;
    --brick-bg: rgba(240, 122, 99, .14);

    --rail: rgba(255, 255, 255, .14);
    --wash: rgba(255, 255, 255, .04);
    --mono-bg: rgba(255, 107, 53, .18);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 22px rgba(0, 0, 0, .35);
    --shadow-lift: 0 2px 8px rgba(0, 0, 0, .55), 0 18px 36px rgba(0, 0, 0, .45);
    --focus-a: #F0642F;
    --focus-b: #A83A16;
    --focus-on: #16100C;
}


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-text);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 18px 72px;
}

/* ── Типографика ───────────────────────────────────────────────────────────
   Playfair держит заголовок экрана и все числа; Montserrat — рабочий текст.
   Раньше сериф попадал внутрь карточек вперемешку с обычными строками, и
   экран читался как афиша, где каждая вторая строка кричит. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }

h1 {
  font-size: 30px;
  line-height: 1.12;
  margin: 14px 0 4px;
}
h2 { font-size: 19px; margin: 30px 0 10px; }

/* Подзаголовок раздела: не жирная строка, а тонкая метка с линией во всю
   ширину. Она разделяет экран на части, не добавляя ещё одну «шапку». */
h2.day-title, h3.sub-title, .pairs-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 30px 0 12px;
}
h2.day-title::after, h3.sub-title::after, .pairs-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.pairs-title { margin-top: 0; }

.sub, .hint {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.hint { color: var(--ink-3); font-size: 13px; }
.hint.truncated { color: var(--ink-2); }
.tasks + .hint { margin-top: 16px; }
.back { margin: 12px 0 0; font-size: 14px; }
.back a, a { color: var(--ink); }
.mt { margin-top: 20px; }
.meta { color: var(--ink-2); font-size: 14px; }
.muted, .src { color: var(--ink-3); }
.src { font-size: 12px; }
.warn { color: var(--brick); }

/* ── Шапка ─────────────────────────────────────────────────────────────────
   Тонкая, со стеклом: она не должна забирать на себя первый экран телефона.
   Разделов три, поэтому на телефоне они уезжают вниз — под большой палец. */
.top {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark { height: 20px; width: auto; display: block; }

.top nav { display: flex; gap: 4px; margin-left: auto; }
.top nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.top nav a.on { color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; }
.nav-i { width: 19px; height: 19px; flex: none; display: block; }

/* ── Кнопки ────────────────────────────────────────────────────────────────
   Ровно три веса: медная — главное действие экрана, контурная — обычное,
   тихая — отказ и удаление. Больше видов кнопок значит, что человек каждый
   раз заново решает, какая из них важнее. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .08s;
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, var(--focus-a), var(--focus-b));
  color: var(--focus-on);
  border-color: transparent;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}
.btn.quiet {
  color: var(--ink-3);
  background: transparent;
  border-color: transparent;
}
.btn.quiet:active { background: var(--wash); }
.btn.wide { width: 100%; }

/* ── Поля ввода ────────────────────────────────────────────────────────────
   Шрифт ровно 16 px: на меньшем Safari в iOS увеличивает страницу и ломает
   вёрстку. max-width держит поле внутри экрана — без него длинное значение
   толкает страницу вширь, и телефон получает горизонтальную прокрутку. */
input, select, textarea {
  font: inherit;
  font-family: var(--font-text);
  font-size: 16px;
  min-height: 46px;
  padding: 10px 13px;
  color: var(--ink);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  max-width: 100%;
}
/* Выпадающий список по умолчанию растягивается по самой длинной строке внутри
   себя. Список квалификаций («TOP1 · ТОП 1 — 23 000 PV + 4 ветки M3 + 1 ветка
   B3 + боковик 1 000») раздувал экран дня до 636 px при экране в 500 и добавлял
   136 px горизонтальной прокрутки всей странице. Ширину задаёт форма, а не
   содержимое списка. */
select { width: 100%; min-width: 0; }
textarea { min-height: 70px; }
input:focus, select:focus, textarea:focus, .btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
::placeholder { color: var(--ink-3); opacity: .8; font-weight: 400; }
label {
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-3);
}
label.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
label.check input { width: auto; min-height: 24px; }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }

/* ── Карточки ──────────────────────────────────────────────────────────────
   Карточка — настоящий предмет на бумаге: форма, цель, разбор Шефа. Список
   дел карточками не набирается, для него есть нить расписания. */
.card, .note, .msg, .folk li, .courses li, .adds li, ul.legs > li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.card { margin: 0 0 14px; display: grid; gap: 14px; min-width: 0; }
/* Дети грида по умолчанию не сжимаются ниже своего содержимого. Поле выбора
   файла со своей кнопкой распирало карточку, и экран людей получал 426 px
   горизонтальной прокрутки при экране в 320 (замер 13.09.2026). */
.card > *, .card label, .card form { min-width: 0; }
input[type="file"] { width: 100%; min-width: 0; }
.card > h2:first-child { margin-top: 0; }

.msg {
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.6;
}
.problem, .ok, .alert {
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 14px;
  border: 1px solid;
}
.problem { background: var(--brick-bg); border-color: var(--accent-edge); }
.problem p { margin: 0 0 8px; }
.problem p:last-child { margin: 0; }
.ok { background: var(--green-bg); border-color: var(--green); }
.alert { background: var(--brick-bg); border-color: var(--brick); box-shadow: none; }
.alert-title { font-weight: 600; color: var(--brick); }
.alert ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* :not() — потому что класс `empty` носят ещё полоска пустого дня в ленте и
   пустая клетка месяца, и рамка пустого состояния рисовалась на них рамкой
   «дырки» там, где просто нечего показывать. */
.empty:not(.load):not(.cell) {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 26px 18px;
  text-align: center;
  color: var(--ink-2);
  font-size: 14.5px;
}
.empty p { margin: 0 0 10px; }
.empty p:last-child { margin: 0; }
.strip-day .load.empty, .cell.empty { border: 0; padding: 0; }

.acts { display: flex; flex-wrap: wrap; gap: 8px; }
.acts form { margin: 0; }
.acts.wide { margin: 12px 0; }
.inline { display: grid; gap: 10px; margin-top: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.row2 label, .row2 input { min-width: 0; }
.item { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .item { grid-template-columns: 2fr 1.4fr 0.6fr; align-items: end; }
}

/* ── Шапка дня ─────────────────────────────────────────────────────────────
   Дата крупно серифом, под ней одна строка о состоянии дня. Это первое, что
   видит человек, открыв планер, — и единственное место экрана, где шрифт
   говорит в полный голос. */
.day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.day-head h1 { margin: 0 0 4px; }
.day-head .sub { margin: 0; font-size: 13.5px; }
.day-load { font-size: 13px; color: var(--ink-2); margin: 6px 0 0; }
.day-load.over { color: var(--brick); font-weight: 600; }

/* ── Лента дней ────────────────────────────────────────────────────────────
   Не семь одинаковых коробок, а лента: цифра дня и под ней полоска нагрузки.
   Длина полоски — сколько дел стоит, цвет — закрыт день или нет. Пустой день
   остаётся пустым: рисовать ему пунктирную рамку значит показывать дырку
   там, где просто нечего делать. */
.strip {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -18px 6px;
  padding: 2px 18px 12px;
  -webkit-overflow-scrolling: touch;
}
.strip::-webkit-scrollbar { display: none; }
.strip-day {
  flex: none;
  width: 46px;
  min-height: 62px;
  border-radius: var(--radius-sm);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  padding: 8px 0 9px;
  text-decoration: none;
  color: var(--ink);
}
.strip-day .dow {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.strip-day .num {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Полоска нагрузки вместо цифры: число дел человек всё равно не сравнивает
   по цифрам, он сравнивает «густо / пусто». */
.strip-day .load {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--rail);
  font-size: 0;
  color: transparent;
  overflow: hidden;
}
.strip-day .load.ok { background: var(--green); }
.strip-day .load.empty { background: transparent; }
.strip-day.now .num { color: var(--accent-ink); }
.strip-day.now .dow { color: var(--accent-ink); }
.strip-day.on {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.strip-day.on .num, .strip-day.on .dow { color: var(--accent-ink); }

/* ── Нить дня ──────────────────────────────────────────────────────────────
   Расписание — вертикальная линия слева с узлами-кружками. Линия проходит
   через центр кружков, поэтому дела читаются как точки на маршруте, а не как
   отдельные карточки. Из списка ушли рамки: они делили день на восемь
   одинаковых коробок и мешали увидеть порядок. */
.plan { list-style: none; padding: 0; margin: 0; display: grid; }
/* Нить рисуется отрезками — от узла строки до узла следующей, — а не одной
   линией на весь список: список не знает, где стоит последний кружок, и линия
   свисала хвостом под последним делом дня. */
.plan:not(.suggest):not(.no-rail) .plan-item::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 42px;
  bottom: -20px;
  width: 1px;
  background: var(--rail);
}
.plan:not(.suggest):not(.no-rail) .plan-item:last-child::before { display: none; }
.plan.compact .plan-item::before { top: 39px; bottom: -17px; }

.plan-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 40px;
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-radius: var(--radius-sm);
}
/* Строка дела во время горизонтального смахивания: лёгкий сдвиг подсказывает,
   что жест поняли. */
.plan-item.is-swiping { transform: translateX(-6px); transition: transform .12s ease; }
@media (prefers-reduced-motion: reduce) {
  .plan-item.is-swiping { transform: none; transition: none; }
}

/* Узел нити. Кнопка 44×44 — столько требуют обе мобильные платформы, — а
   видимый кружок рисуется внутри неё. Фон у кружка непрозрачный: нить
   проходит под ним и не должна просвечивать сквозь узел. */
.tick-form { margin: 0; position: relative; }
.tick {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.tick::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--paper);
  transition: border-color .15s, background .15s;
}
.tick:active::before { border-color: var(--accent); }
/* Сделанное: узел заливается и получает галочку. Галочка нарисована маской,
   а не символом — шрифтовая «птичка» в разных системах выглядит по-разному. */
.tick.is-ticked::before {
  border-color: var(--green);
  background: var(--green);
  -webkit-mask: none;
  mask: none;
}
.tick.is-ticked::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--surface);
  border-bottom: 2px solid var(--surface);
  transform: translateY(-1px) rotate(-45deg);
}
.tick { position: relative; }
span.tick { cursor: default; }

.plan-item .what { min-width: 0; padding-top: 10px; }
/* Заголовок дела и время в одной строке: время справа, серифом и моноширинно
   по цифрам — колонка времени читается сверху вниз даже без линейки. */
.plan-item .line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.plan-item .t {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.plan-item .at {
  flex: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}
.plan-item.is-done { opacity: .55; }
.plan-item.is-done .t { text-decoration: line-through; text-decoration-thickness: 1px; }
.plan-item.is-done .at { color: var(--ink-3); }
.plan-item.is-taken { opacity: .55; }
/* Важное: узел получает медное кольцо, строка — серифный вес. Звёздочка из
   шаблона осталась, но теперь она не единственный признак. */
.star { color: var(--amber); margin-right: 5px; }
.plan-item.is-star .t { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.plan-item.is-star .tick::before { border-color: var(--accent-edge); border-width: 2px; }
/* Чужое дело в общем аккаунте: видно, что оно не твоё. */
.plan-item.is-theirs .tick::before { border-style: dashed; }

/* Мета-строка: минуты, повтор, метки. Чипов-облаков больше нет — они
   выглядели как восемь наклеек на одном деле. Обычные пометки идут текстом
   через точку, рамку получают только смысловые: конференция, клиент, чьё
   дело, опоздание. */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.chip {
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.chip + .chip::before { content: "·"; margin-right: 8px; color: var(--rail); }
.chip.time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip.meet, .chip.client, .chip.who, .chip.late, .chip.on {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11.5px;
  font-weight: 500;
}
.chip.meet + .chip::before, .chip.client + .chip::before,
.chip.who + .chip::before, .chip.late + .chip::before,
.chip.meet::before, .chip.client::before, .chip.who::before,
.chip.late::before, .chip.on::before { content: none; }
.chip.meet { color: var(--amber); border-color: var(--amber-bg); background: var(--amber-bg); }
.chip.client { color: var(--green); border-color: var(--green-bg); background: var(--green-bg); }
.chip.who { color: var(--accent-ink); border-color: var(--accent-edge); background: var(--accent-soft); }
.chip.late { color: var(--brick); border-color: var(--brick-bg); background: var(--brick-bg); }
.chip.on { color: var(--green); border-color: var(--green-bg); background: var(--green-bg); }
.chip.chief-mark { color: var(--ink-3); }
.meta.busy { color: var(--brick); font-size: 12.5px; }

/* ── Дорога до встречи (ADR-0037) ──────────────────────────────────────────
   Блок под делом: куда ехать, во сколько выезжать, ссылка на карту. Время
   выезда — главное здесь, поэтому оно медью и первым; «не знаю» пишется
   словами и приглушённо, чтобы его нельзя было принять за цифру. */
.trip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
  padding-left: 11px;
  border-left: 2px solid var(--accent-edge);
  font-size: 12.5px;
  color: var(--ink-3);
}
.trip-place { color: var(--ink-2); }
.trip-time { color: var(--accent-ink); font-weight: 600; }
.trip-time.unknown { color: var(--ink-3); font-weight: 400; font-style: italic; }
.trip .link { min-height: 32px; font-size: 12.5px; }

/* «Откуда еду» в окне записи: нужно редко, поэтому свёрнуто под адресом. */
.from-fold > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 13.5px;
  color: var(--ink-3);
  cursor: pointer;
}
.from-fold > summary::-webkit-details-marker { display: none; }
.from-fold > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s;
}
.from-fold[open] > summary::before { transform: rotate(45deg); }
.from-label { margin-top: 6px; }
.from-fold .hint { margin: 8px 0 0; }

.link { text-decoration: underline; text-underline-offset: 3px; }
.plan-item .link, .what .link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 13.5px;
  color: var(--accent-ink);
  overflow-wrap: anywhere;
  max-width: 100%;
}
.what .meta { max-width: 100%; font-size: 13.5px; }

/* «···» — меню строки. Спокойная точка входа: видно, но не перетягивает. */
.row-more { justify-self: end; align-self: center; }
.row-more > summary {
  list-style: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 10px;
  font-size: 17px;
  letter-spacing: 1px;
}
.row-more > summary::-webkit-details-marker { display: none; }
.row-more[open] { grid-column: 1 / -1; justify-self: stretch; }
.row-more[open] > summary { width: max-content; }
.row-acts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 4px 54px;
  min-width: 0;
}
.row-acts form { margin: 0; }
.row-more[open] .row-acts { width: 100%; }
/* Правка дела прямо в строке: блоку нужна своя строка целиком, иначе он
   сжимается вместе с кнопкой и надпись вылезает за её границы. */
.edit-fold { flex: 1 0 100%; }
.edit-fold > summary { width: max-content; cursor: pointer; list-style: none; }
.edit-fold > summary::-webkit-details-marker { display: none; }
.edit-form { display: grid; gap: 10px; padding: 12px 0 4px; }

/* «Сейчас»: живая метка на нити. Единственная подвижная вещь на экране — она
   и должна быть заметной. */
.now-line {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 6px 21px;
  padding-left: 14px;
  position: relative;
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.now-line::before {
  content: "";
  position: absolute;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.now-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-edge), transparent);
}

/* Просроченное: кирпичный узел и своя колонка под кнопку «Сегодня». */
h2.overdue-title { color: var(--brick); }
h2.overdue-title::after { background: var(--brick-bg); }
.plan-item.is-overdue { grid-template-columns: 44px 1fr auto; }
.plan-item.is-overdue .tick::before { border-color: var(--brick); }
.pull { margin: 0; align-self: center; }
.count {
  font-size: 11.5px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.count.warn { color: var(--brick); border-color: var(--brick-bg); background: var(--brick-bg); }
h2.day-title .count { order: 1; }

/* ── Главное дело дня ──────────────────────────────────────────────────────
   Единственный залитый блок на экране. Медь, серифный заголовок и фирменные
   волны ERA в углу: одно дело в сутки заслуживает обложки, все остальные —
   строки на нити. */
.card.focus {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--focus-a), var(--focus-b));
  border-color: transparent;
  color: var(--focus-on);
  box-shadow: var(--shadow-lift);
  padding: 18px;
  gap: 10px;
}
.card.focus::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -70px;
  width: 240px;
  height: 200px;
  background: var(--focus-on);
  -webkit-mask: url("/static/brand/pattern.webp") center / 300px auto repeat;
  mask: url("/static/brand/pattern.webp") center / 300px auto repeat;
  opacity: .16;
  pointer-events: none;
}
.card.focus > * { position: relative; z-index: 1; }
.focus-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
  margin: 0;
}
.focus-row { display: flex; align-items: flex-start; gap: 12px; }
.focus-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}
.card.focus .tick::before { border-color: rgba(255, 255, 255, .65); background: transparent; }
.card.focus .at {
  margin: 4px 0 0 auto;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: .9;
}
.card.focus .meta {
  color: inherit;
  opacity: .85;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* ── Быстрый ввод ──────────────────────────────────────────────────────────
   Одна строка, а не поле плюс отдельная кнопка: два прямоугольника разного
   веса выглядят как два разных элемента управления, хотя действие тут одно. */
.quick {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 14px 0 12px;
  padding: 0 6px 0 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: border-color .15s, box-shadow .15s;
}
.quick:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.quick-title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  min-height: 50px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.quick-title:focus { outline: none; box-shadow: none; }
.quick-add {
  flex: none;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s, background .15s, color .15s;
}
.quick:focus-within .quick-add,
.quick-title:not(:placeholder-shown) ~ .quick-add { opacity: 1; }
.quick-add:active { background: var(--accent); color: var(--accent-on); }
.quiet-form { margin-top: 24px; background: transparent; box-shadow: none; border-style: dashed; }

/* ── Окно вторым слоем ─────────────────────────────────────────────────────
   Дело со временем записывается в шторке: на телефоне она приходит снизу, где
   её достаёт палец, на широком экране встаёт по центру. Шесть полей, которыми
   пользуются раз в неделю, больше не занимают место над самим днём. */
dialog.sheet {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  max-width: 100%;
  max-height: 100%;
}
dialog.sheet::backdrop {
  background: rgba(20, 8, 16, .46);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sheet-form {
  display: grid;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 20px;
  min-width: 0;
}
.sheet-form > *, .sheet-form label { min-width: 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}
.sheet-close {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--wash);
  color: var(--ink-2);
  cursor: pointer;
}
.sheet-close svg { width: 19px; height: 19px; }
.sheet-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 2px; }
.sheet-acts .btn { min-width: 110px; }
.sheet-form .hint { margin: 0; }

/* Телефон: шторка снизу во всю ширину, с отступом под системную полосу. */
@media (max-width: 720px) {
  dialog.sheet {
    width: 100%;
    margin: auto auto 0;
    animation: sheet-up .22s ease-out;
  }
  .sheet-form {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    max-height: 88vh;
    overflow-y: auto;
  }
  .sheet-acts .btn { flex: 1; min-width: 0; }
}
@media (min-width: 721px) {
  dialog.sheet { width: 460px; margin: auto; }
}
@keyframes sheet-up {
  from { transform: translateY(14px); opacity: .6; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.sheet { animation: none; }
}

/* Настройки дела прячутся под строкой и открываются шевроном. */
.quick-more, .month-fold, .days-fold, .fold { margin: 0 0 14px; }
.quick-more > summary, .month-fold > summary, .days-fold > summary, .fold > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  color: var(--ink-3);
  cursor: pointer;
}
.quick-more > summary::-webkit-details-marker,
.month-fold > summary::-webkit-details-marker,
.days-fold > summary::-webkit-details-marker,
.fold > summary::-webkit-details-marker { display: none; }
.quick-more > summary::before, .month-fold > summary::before,
.days-fold > summary::before, .fold > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s;
}
.quick-more[open] > summary::before, .month-fold[open] > summary::before,
.days-fold[open] > summary::before, .fold[open] > summary::before { transform: rotate(45deg); }
.days-fold > summary {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 16px;
}
.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 6px 0 10px;
  min-width: 0;
}
.quick-grid label, .quick-grid input, .quick-grid select { min-width: 0; }
.quick-grid label.check { grid-column: 1 / -1; }
.log { color: var(--ink-2); font-size: 14px; padding-left: 20px; }

/* ── Предложения планера ───────────────────────────────────────────────────
   Это не дела дня, а список «кому пора написать»: карточка с именем, поводом
   и кнопками. Срочность — полоса слева, её видно боковым зрением. */
.plan.suggest { gap: 10px; margin-top: 4px; }
.plan.suggest .plan-item {
  grid-template-columns: 1fr auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
}
.plan.suggest .plan-item .what { padding-top: 0; }
.plan.suggest .plan-item .t { font-weight: 600; font-size: 16px; }
.plan.suggest .plan-item.u0 { border-left-color: var(--brick); }
.plan.suggest .plan-item.u1 { border-left-color: var(--amber); }
.plan.suggest .plan-item.u2 { border-left-color: var(--line-strong); }
.plan.suggest.missed .plan-item { border-left-color: var(--brick); }
.reason { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
@media (max-width: 560px) {
  .plan.suggest .plan-item { grid-template-columns: 1fr; }
  .plan.suggest .plan-item .acts { justify-content: flex-start; margin-top: 12px; }
}

/* Дела «дальше» и входящие — тот же список, но без нити: у них нет часов. */
.plan.compact .plan-item { padding: 6px 0; }
.plan.compact .plan-item .what { padding-top: 6px; }
.plan-item.is-inbox {
  grid-template-columns: 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-soft);
}
.plan-item.is-inbox .what { padding-top: 0; }
.inbox-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }

.next-day { padding: 6px 0 10px; }
a.next-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.next-head { display: grid; gap: 8px; }
.next-name { font-size: 14px; color: var(--ink-2); }
a.next-head .next-name { font-weight: 500; }
.next-count {
  font-size: 11.5px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.next-add {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding-right: 4px;
}
.next-add:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.next-title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.next-title:focus { outline: none; box-shadow: none; }
.quick-add.small { width: 38px; height: 38px; min-height: 38px; font-size: 20px; }
.spacer { display: block; }

/* Итог дня: сохранённая строка читается как запись в дневнике, а не отчёт. */
.review-done { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
.review-done .word { color: var(--ink); font-family: var(--font-display); font-style: italic; }

/* Разбор Шефа: что он понял с голоса или скрина. */
.card.said { border-color: var(--accent-edge); }
.said-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.said .quote { font-style: italic; color: var(--ink-3); }
.said-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.said-list li { font-size: 14px; }
.said-list .meta { display: inline; font-size: 13px; }

/* Чьи дела смотрим (двое под одним ID) и выбор раздела витрины. */
.who-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip-pick {
  min-height: 40px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.chip-pick:active { background: var(--accent-soft); }
.who-pick .chip-pick.on, .chip-pick.on {
  background: var(--accent-soft);
  border-color: var(--accent-edge);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ── Цель месяца ───────────────────────────────────────────────────────────
   Цифра — главное, что здесь смотрят. Она набрана серифом и крупно, всё
   остальное вокруг неё мельче. */
.goal { margin-bottom: 22px; }
.goal-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.goal-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.goal-num { text-align: right; white-space: nowrap; }
.goal-num strong {
  font-family: var(--font-display);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}
.goal-num .ok {
  display: inline-block;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--green);
  font-weight: 600;
}
.goal-num .warn { color: var(--ink-3); }
.goal .meta .link { min-height: 40px; }

/* Полоса заполнения: тонкая, с медным свечением на краю — видно, где сейчас
   находится месяц. */
.bar {
  height: 6px;
  border-radius: 3px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--focus-a), var(--focus-b));
}

.volume .big { display: flex; align-items: baseline; gap: 10px; }
.volume .num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.volume .unit { color: var(--ink-2); font-size: 15px; }
.volume .goal { margin: 0; font-size: 15px; }
.volume .muted { color: var(--ink-3); }
.volume .pending {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
}
.closes-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--green-bg);
  color: var(--green);
  font-size: 14px;
}
.tasks { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.task {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
}
.task.u0 { border-left-color: var(--brick); }
.task.u1 { border-left-color: var(--amber); }
.task.u2 { border-left-color: var(--line-strong); }
.task.closes { border-left-color: var(--green); }
.who { display: grid; gap: 4px; margin-bottom: 12px; }
.who a { font-weight: 600; font-size: 17px; text-decoration: none; }

/* ── Картотека клиентов ────────────────────────────────────────────────────
   Список людей — это список людей, а не набор плашек. У каждого монограмма,
   строки разделены волосяной линией, состояние показано точкой цвета: восемь
   одинаковых белых карточек подряд не читаются вообще. */
.finder { display: flex; gap: 8px; margin: 0 0 12px; }
.finder input { flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.chip-link {
  font-size: 13.5px;
  padding: 7px 14px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--surface);
  text-decoration: none;
}
.chip-link.on {
  border-color: var(--accent-edge);
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-weight: 600;
}

.clients { list-style: none; padding: 0; margin: 6px 0 0; display: grid; }
.clients li + li .row { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 14px;
  align-items: start;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--ink);
}
.row .mono {
  grid-row: span 3;
  align-self: start;
  margin-top: 1px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mono-bg);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}
.row .name { font-weight: 600; font-size: 16px; }
.row .meta, .courses .meta { color: var(--ink-3); font-size: 13px; line-height: 1.45; }
/* Состояние — точка и слово, без пилюли: пилюля на каждой строке превращает
   список в ленту наклеек. */
.state {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.s-остывает { color: var(--amber); }
.s-тёплый { color: var(--green); }
.s-новый, .s-на { color: var(--ink-3); }

.courses { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.courses .name { font-weight: 600; }

.facts { display: grid; gap: 0; margin: 12px 0 20px; }
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  color: var(--ink-3);
  font-size: 12.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0;
}
.facts dd { margin: 0; text-align: right; font-size: 15px; }

/* Лента общения на карточке клиента: дата слева, суть в середине, канал
   справа. Читается сверху вниз как история, а не как таблица. */
.lenta { list-style: none; margin: 0 0 20px; padding: 0; display: grid; }
.lenta li {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.lenta .when { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.lenta .where { color: var(--ink-3); font-size: 12px; }
.lenta .marks { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.lenta .marks form { margin: 0; }
.mark {
  font-size: 12.5px;
  padding: 6px 12px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.mark.on { border-color: var(--accent-edge); color: var(--accent-ink); background: var(--accent-soft); }
@media (max-width: 380px) {
  .lenta li { grid-template-columns: 1fr auto; }
  .lenta .when { grid-column: 1 / -1; }
}

/* ── Чем дополнить набор (ADR-0014) ────────────────────────────────────── */
.adds { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.adds li { display: grid; gap: 4px; padding: 14px 16px; }
.add-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.add-head .name { font-weight: 600; }
.add-head .pv {
  color: var(--ink-3);
  font-size: 13px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.adds .caution, .pairs .caution { color: var(--amber); }
.chosen { margin: 10px 0 14px; }
.ask { border-color: var(--accent-edge); }
.ask-title { font-weight: 600; }
.combo .quote {
  margin: 8px 0;
  padding-left: 14px;
  border-left: 2px solid var(--accent-edge);
  white-space: pre-wrap;
  color: var(--ink-2);
}
.pairs { margin-top: 20px; }
.pairs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pairs li { display: grid; gap: 2px; }
.pair-name { font-weight: 600; }
.pairs .hint { margin: 12px 0 0; }
.note { padding: 14px 16px; }

/* ── Месяц ─────────────────────────────────────────────────────────────────
   Календарь уехал под кнопку: его открывают раз в неделю. Клетка без рамки —
   цифра и точки, выбранный день — медный кружок. */
.month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin: 10px 0 22px;
  min-width: 0;
}
.dow {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 6px;
}
.cell {
  aspect-ratio: 1;
  min-width: 0;
  min-height: 44px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.cell.empty { border: 0; }
.cell.now { color: var(--accent-ink); font-weight: 700; }
.cell.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.cell .dots { display: flex; gap: 3px; }
.cell .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); display: block; }
.cell .dot.done { background: var(--green); }
.cell .dot.meet { background: var(--amber); }

/* ── Квалификация и ветки ──────────────────────────────────────────────────
   Три условия ступени показываются тремя строками, а не одной цифрой: объём,
   ветки и боковик — разные работы. */
.rank { border-color: var(--accent-edge); }
.rank-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; align-items: baseline; }
.rank-now { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.25; }
.rank-target { margin: 12px 0 6px; }
ul.gap { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
ul.gap b { font-variant-numeric: tabular-nums; }

ul.watch { list-style: none; padding: 0; margin: 10px 0 24px; display: grid; gap: 8px; }
ul.watch li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14.5px;
}
ul.watch li.w-to_m3 { border-left-color: var(--accent); }
ul.watch li.w-drop { border-left-color: var(--brick); }
ul.watch li.w-side { border-left-color: var(--amber); }
ul.watch li.w-unknown { border-left-color: var(--line-strong); color: var(--ink-2); }

ul.legs { list-style: none; padding: 0; margin: 10px 0 20px; display: grid; gap: 10px; }
ul.legs > li { display: grid; gap: 10px; }
.leg-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.leg-name { font-weight: 600; }
.leg-figures {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.leg-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.leg-form label { font-size: 12px; }

/* ── Люди аккаунта ─────────────────────────────────────────────────────── */
.folk { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.folk li { padding: 14px 16px; }
.folk.states li { background: transparent; border: 0; padding: 8px 0; box-shadow: none; }
.folk-name { font-weight: 600; overflow-wrap: break-word; }

/* ── Подвал ────────────────────────────────────────────────────────────────
   Служебное: переключатели фона и темы, журнал, выход. Всё мелко и внизу —
   это не ежедневная работа. */
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  margin: 44px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.foot a, .linkish {
  color: var(--ink-3);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.foot form { margin: 0; }
.foot a:hover, .linkish:hover { color: var(--ink); }
.bg-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--ink-3);
}
.bg-switch span { margin-right: 4px; }
.bg-switch button {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
}
.bg-switch button.on { color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; }

/* ── Вход ──────────────────────────────────────────────────────────────────
   Единственный экран, где узор ERA звучит в полный голос: это обложка, а
   дальше начинается работа. */
.login-hero {
  position: relative;
  margin: 0 -18px 24px;
  padding: 40px 18px 34px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--accent), var(--accent-ink));
  -webkit-mask: url("/static/brand/pattern.webp") center / cover no-repeat;
  mask: url("/static/brand/pattern.webp") center / cover no-repeat;
  opacity: .34;
  pointer-events: none;
}
.login-hero > * { position: relative; }
.login-hero .brand-big { height: 30px; width: auto; display: block; margin-bottom: 18px; }
.login-hero h1 { margin: 0 0 8px; font-size: 36px; }
.login-hero .sub { margin: 0; max-width: 28ch; }

/* ── Фирменная подложка ────────────────────────────────────────────────────
   Слой закреплён (`fixed`), а не прокручивается: узор ведёт себя как бумага,
   на которой лежит интерфейс. Линии обесцвечены — в оригинале они
   тёмно-фиолетовые и спорят с медью. Непрозрачность подобрана по правилу:
   узор заметен на пустом месте и исчезает под текстом. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  /* Плитка мельче исходного отпечатка: при крупном масштабе полосы выходили
     шириной около 19 px — на экране это читалось зеброй, а не бумагой. */
  background: url("/static/brand/pattern.webp") 0 0 / 170px auto repeat;
  filter: grayscale(1) sepia(.85) contrast(.45) brightness(1.06);
  opacity: .05;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 50%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 50%, transparent 92%);
}
/* На тёмном фоне линии переворачиваются в светлые, иначе их не видно.
   Правил два — по системной настройке и по выбору человека: раньше ручная
   тёмная тема оставалась с тёмным узором на тёмном фоне, то есть без узора. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before {
    filter: grayscale(1) invert(1) sepia(1) saturate(1.8) hue-rotate(-8deg) contrast(.6);
    opacity: .04;
  }
  :root:not([data-theme="light"]) .login-hero::before { opacity: .26; }
  /* Цветное лого на тёмном ground теряет контраст по краям — слегка поднимаем. */
  :root:not([data-theme="light"]) .brand-mark { filter: brightness(1.15); }
}
[data-theme="dark"] body::before {
  filter: grayscale(1) invert(1) sepia(1) saturate(1.8) hue-rotate(-8deg) contrast(.6);
  opacity: .04;
}
[data-theme="dark"] .login-hero::before { opacity: .26; }
[data-theme="dark"] .brand-mark { filter: brightness(1.15); }

/* Содержимое поднимается над подложкой. */
body > * { position: relative; z-index: 1; }

/* Заметность узора выбирает сам владелец экрана. */
body.bg-soft::before { opacity: .022; }
body.bg-off::before { display: none; }

/* ── Телефон ───────────────────────────────────────────────────────────────
   99% открытий — с телефона. Разделы уезжают вниз: на экране в 6 дюймов
   верхний край не достаётся большим пальцем, а по разделам человек ходит
   весь день. Панель стеклянная и с отступом под системную полосу. */
@media (max-width: 720px) {
  /* Стекло с шапки снимается намеренно: `backdrop-filter` делает шапку системой
     координат для всего, что внутри неё закреплено, и нижняя панель разделов
     прилипала не к низу экрана, а к низу шапки — то есть оставалась наверху
     (поймано на живом экране 13.09.2026). */
  .top {
    padding: 8px 18px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--paper);
  }
  .top nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    margin: 0;
    gap: 0;
    justify-content: space-around;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(1.5) blur(16px);
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    border-top: 1px solid var(--line);
  }
  .top nav a {
    position: relative;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-height: 52px;
    padding: 8px 4px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    letter-spacing: .02em;
  }
  /* Открытый раздел помечен медной чертой над знаком, а не залитой плашкой:
     плашка во всю кнопку — самый тяжёлый элемент экрана, а это просто «вы
     здесь». */
  .top nav a.on { background: transparent; }
  .top nav a.on::before {
    content: "";
    position: absolute;
    top: 0;
    width: 20px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--accent);
  }
  .nav-i { width: 21px; height: 21px; }
  main { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 380px) {
  /* Маленькие Android (360 и 320 px): ужимаем отступы, а не содержимое. */
  main { padding-left: 14px; padding-right: 14px; }
  .login-hero { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .strip { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  h1 { font-size: 26px; }
  .cell { font-size: 13px; min-height: 38px; }
  .plan-item { grid-template-columns: 40px 1fr 36px; }
  .plan:not(.suggest):not(.no-rail) .plan-item::before { left: 19px; }
  .tick { width: 40px; }
  .row-acts { padding-left: 40px; }
  .quick-grid { grid-template-columns: 1fr; }
}