/* ═══════════════════════════════════════════════════════════════════════
   mailrust — интерфейс.

   Порядок файла фиксирован, новый код кладётся в свою часть:
     1. Токены        — все числа и цвета проекта
     2. Темы          — тёмная и светлая
     3. База          — шрифты, сброс, типографика
     4. Компоненты    — по одному на блок, в алфавите смысла
     5. Экраны        — раскладка страниц из готовых компонентов
     6. Движение      — переходы между состояниями
     7. Адаптив       — всегда в конце, иначе перебьёт то, что ниже

   Дизайн-решения, которые здесь держатся:
   — прямой угол везде, ни одного скругления: инструмент, а не игрушка;
   — разделяет только волосяная линия, теней нет;
   — один акцентный цвет и только на непрочитанном;
   — плотность как в терминале: одна строка на письмо.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ 1. Токены ═══════════════════════════════════════════════════════ */

:root {
  /* Отступы. Одна шкала на весь проект, других значений не бывает. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Типографика. Лесенка без промежуточных размеров «на глаз». */
  --text-xs:   0.75rem;    /* 12px — метки, счётчики, строка состояния */
  --text-sm:   0.8125rem;  /* 13px — превью, подписи */
  --text-base: 0.875rem;   /* 14px — список писем */
  --text-md:   0.9375rem;  /* 15px — тело письма */
  --text-lg:   1.25rem;    /* 20px — тема открытого письма */
  --text-title: 1.375rem;  /* 22px — заголовок колонки, точка фокуса */
  --text-xl:   clamp(1.75rem, 1.2rem + 2vw, 2.75rem);

  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Ширины несущих колонок — меняются в одном месте. */
  --w-rail: 232px;
  --w-reader: 44rem;
  /* Ниже этой ширины список не сжимается ни при каком письме. */
  --w-list-min: 560px;
  --w-time: 4.5ch;
  --w-avatar: 20px;
  --w-sender: 18ch;
  /* Место под время или четыре кнопки действий — что из них показано,
     зависит от наведения, но ширина не меняется. */
  --w-tail: 108px;
  /* Тема — колонка постоянной ширины, а не доля свободного места.
     Иначе на широком экране между темой и началом текста разверзается
     треть монитора, и строка перестаёт читаться как одна фраза. */
  --w-subject: 40ch;
  --w-text: 68ch;

  /* Толщина нити ящика — она же единица всех вертикальных меток. */
  --thread-width: 2px;

  /* Плотность списка. Переключается на лету и запоминается: это вопрос
     не вкуса, а монитора — на ноутбуке и на двадцати семи дюймах удобны
     разные значения. */
  --row-pad: 8px;

  /* Движение. Быстрое — отклик, обычное — перемещение блока. */
  --fast: 120ms;
  --normal: 220ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ═══ 2. Темы ═════════════════════════════════════════════════════════ */

/* Тёмная — основная: почту читают вечером и в тёмной среде.
   Чистого чёрного нет: #000 на OLED даёт провал, от которого устают глаза. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Три ступени поверхности вместо одной плоскости. Разница мелкая — по
     три-четыре процента светлоты, — но именно она сообщает глазу, что
     колонки разные по важности: ящики в глубине, список посередине,
     открытое письмо ближе всего. Границы при этом остаются волосяными:
     уровни задаются светлотой, а не рамками и тенями. */
  --bg-rail:    #050506;
  --bg:         #0d0d0f;
  --bg-raised:  #17171b;
  --bg-hover:   rgba(240, 238, 233, 0.055);
  --bg-active:  rgba(240, 238, 233, 0.1);

  --line:        rgba(240, 238, 233, 0.12);
  --line-strong: rgba(240, 238, 233, 0.26);

  /* Приглушённые ступени намеренно светлее, чем просится «на глаз»:
     на почти чёрном фоне тонкий шрифт теряет ещё процентов десять
     контраста, и текст, красивый в макете, на экране становится серой
     кашей. Проверено на строке списка — самом мелком тексте интерфейса. */
  --ink:       #f2f0ec;
  --ink-muted: rgba(242, 240, 236, 0.72);
  --ink-faint: rgba(242, 240, 236, 0.46);

  /* Единственный яркий цвет. Кислотный жёлтый на почти чёрном читается
     мгновенно и не означает тревогу — в отличие от красного, которым
     непрочитанное выглядело как ошибка. Живёт в четырёх местах: кнопка
     «Написать», активная папка, метка непрочитанного, счётчик. */
  --accent:     #e4fb54;
  --accent-ink: #0d0d0f;
  --accent-dim: rgba(228, 251, 84, 0.16);
  /* Цвет акцентного ТЕКСТА отдельно от заливки. На тёмном это тот же
     жёлтый, а на светлом он превратился бы в нечитаемое пятно — там
     нужен тёмно-оливковый. Заливка при этом остаётся жёлтой в обеих
     темах: на ней текст тёмный, и контраст в порядке. */
  --accent-text: #e4fb54;

  /* Красный остаётся, но только за настоящими ошибками. */
  --danger: #f2555a;

  --ok:   rgba(240, 238, 233, 0.58);
  --warn: #e5a03c;

  /* Край смягчён, но не превращён в пилюлю: инструмент, а не игрушка. */
  --radius: 7px;
  /* Крупный радиус — только у несущих панелей. */
  --radius-lg: 12px;
}

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

  --bg-rail:    #e8e5df;
  --bg:         #f4f2ee;
  --bg-raised:  #fffefb;
  --bg-hover:   rgba(16, 16, 18, 0.045);
  --bg-active:  rgba(16, 16, 18, 0.08);

  --line:        rgba(16, 16, 18, 0.14);
  --line-strong: rgba(16, 16, 18, 0.3);

  --ink:       #101012;
  --ink-muted: rgba(16, 16, 18, 0.7);
  --ink-faint: rgba(16, 16, 18, 0.46);

  --accent:     #d8ef3c;
  --accent-ink: #101012;
  --accent-dim: rgba(160, 190, 20, 0.28);
  --accent-text: #5f7207;

  --danger: #cf2f36;

  --ok:   rgba(16, 16, 18, 0.62);
  --warn: #a56413;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;

    --bg-rail:    #e8e5df;
    --bg:         #f4f2ee;
    --bg-raised:  #fffefb;
    --bg-hover:   rgba(16, 16, 18, 0.045);
    --bg-active:  rgba(16, 16, 18, 0.08);

    --line:        rgba(16, 16, 18, 0.14);
    --line-strong: rgba(16, 16, 18, 0.3);

    --ink:       #101012;
    --ink-muted: rgba(16, 16, 18, 0.7);
    --ink-faint: rgba(16, 16, 18, 0.46);

    --accent:     #d8ef3c;
    --accent-ink: #101012;
    --accent-dim: rgba(160, 190, 20, 0.28);
    --accent-text: #5f7207;

    --danger: #cf2f36;

    --ok:   rgba(16, 16, 18, 0.62);
    --warn: #a56413;
  }
}


/* ═══ 3. База ═════════════════════════════════════════════════════════ */

/* Переменные начертания: один файл на все веса вместо восьми запросов. */
@font-face {
  font-family: "Geist";
  src: url("/assets/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Цифры одной ширины по всему интерфейсу: иначе колонка времени
     дрожит от строки к строке и список выглядит неопрятно. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Фокус виден всегда и одинаково. Убрать обводку без замены — прямая
   порча доступности, поэтому она задана здесь один раз на всё. */
:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}

::selection { background: var(--ink); color: var(--bg); }

/* Полоса прокрутки не должна перетягивать внимание на себя. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); }
*::-webkit-scrollbar-track { background: transparent; }


/* ═══ 4. Компоненты ═══════════════════════════════════════════════════ */

/* ── Иконка ─────────────────────────────────────────────────────────── */

/* Размер один на весь интерфейс. Иконка наследует цвет текста, поэтому
   отдельных «цветных» состояний у неё нет — она темнеет и светлеет
   вместе с подписью, рядом с которой стоит. */
.icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: inherit;
}

.sprite { position: absolute; }

/* ── Заголовок колонки ──────────────────────────────────────────────── */

/* Самый крупный текст на экране. Нужен не для красоты: без него взгляд
   входит в интерфейс и не находит, за что зацепиться. */
.title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}

.title__name {
  font-size: var(--text-title);
  font-weight: 620;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.title__stat {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* Число непрочитанных — самая нужная цифра на экране, поэтому она крупная
   и единственная цветная в заголовке. */
.title__unread {
  color: var(--accent-text);
  font-size: var(--text-title);
  font-weight: 620;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ── Кнопка действия ────────────────────────────────────────────────── */

.act {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  border: none;
  background: none;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--fast) var(--ease);
}

.act:hover { color: var(--ink); }
.act--danger:hover { color: var(--danger); }

/* Отписка — действие редкое, но заметное: отделяем чертой от остальных. */
.act--unsub { margin-left: var(--sp-2); padding-left: var(--sp-4); border-left: 1px solid var(--line); }

.notice--ok { border-color: var(--accent-text); color: var(--accent-text); }

/* ── Логотип ────────────────────────────────────────────────────────── */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand__mark {
  width: 9px;
  height: 9px;
  background: var(--ink);
  transform: rotate(45deg);
}

.brand__word { font-size: var(--text-base); }

/* ── Кнопка ─────────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.button--primary { background: var(--accent); color: var(--accent-ink); font-weight: 560; }
.button--primary:hover { filter: brightness(1.08); }

.button--plain { border-color: var(--line-strong); }
.button--plain:hover { background: var(--bg-hover); }

.button--quiet { color: var(--ink-muted); }
.button--quiet:hover { color: var(--ink); }

/* Кнопка-текст для служебных действий: тема, выход. */
.quiet {
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--fast) var(--ease);
}
.quiet:hover { color: var(--ink); }

/* ── Поле ───────────────────────────────────────────────────────────── */

.field { display: block; }

.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--ink-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field__input {
  width: 100%;
  padding: var(--sp-3) 0;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  background: none;
  font-size: var(--text-md);
  transition: border-color var(--fast) var(--ease);
}
.field__input:focus { outline: none; border-color: var(--ink); }

/* ── Папка ──────────────────────────────────────────────────────────── */

.folder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  /* Активная папка помечена полосой слева — той же толщины, что и нить
     ящика в списке: одна вещь, один знак. */
  border-left: var(--thread-width) solid transparent;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.folder:hover { color: var(--ink); background: var(--bg-hover); }

.folder {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.folder.is-active {
  color: var(--ink);
  background: var(--accent-dim);
  border-left-color: var(--accent-text);
}

.folder__count {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.folder.is-active .folder__count { color: var(--ink-muted); }

/* ── Ящик ───────────────────────────────────────────────────────────── */

.box {
  display: grid;
  grid-template-columns: var(--thread-width) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  cursor: default;
}

.box__thread {
  height: 1em;
  background: var(--thread);
}

.box__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  transition: color var(--fast) var(--ease);
}
.box:hover .box__label { color: var(--ink); }

.box__count {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ── Заголовок дня ──────────────────────────────────────────────────── */

.day {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--sp-5) var(--sp-5) var(--sp-2);
  background: var(--bg);
  color: var(--ink-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

/* Первый заголовок не отступает сверху: список начинается от края. */
.day:first-child { padding-top: var(--sp-3); }

:root[data-density="compact"] { --row-pad: 4px; }
:root[data-density="cozy"]    { --row-pad: 8px; }
:root[data-density="roomy"]   { --row-pad: 14px; }

/* ── Строка письма ──────────────────────────────────────────────────── */

/* Строение взято у Gmail — оно проверено миллиардом людей: постоянная
   колонка выделения, звезда, отправитель фиксированной ширины, тема с
   началом текста одной фразой, справа время. Своё здесь другое: логотип
   домена вместо безликой аватарки, метка ящика ниткой слева (у нас сорок
   пять доменов в одном списке) и быстрые действия, появляющиеся на месте
   времени при наведении. */

.row {
  position: relative;
  display: grid;
  grid-template-columns:
    18px                          /* галочка */
    16px                          /* звезда */
    var(--w-avatar)               /* логотип отправителя */
    var(--w-sender)               /* отправитель */
    minmax(0, 1fr)                /* тема и начало текста */
    auto                          /* метки */
    var(--w-tail);                /* время либо действия */
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  margin-inline: var(--sp-2);
  padding: var(--row-pad) var(--sp-3);
  border-radius: var(--radius);
  transition: background var(--fast) var(--ease);
}

.row:hover { background: var(--bg-hover); }
.row:has(.row__check:checked) { background: var(--bg-active); }

/* Открытое письмо залито акцентом: единственная карточка, на которую
   смотрят прямо сейчас. */
.row.is-open { background: var(--accent); }
.row.is-open .row__sender,
.row.is-open .row__link,
.row.is-open .row__time,
.row.is-open .row__preview,
.row.is-open .row__act,
.row.is-open .row__marks { color: var(--accent-ink); }

.row__link { position: static; color: var(--ink-muted); }
.row__link::after { content: ""; position: absolute; inset: 0; }

/* ── Выделение и звезда ─────────────────────────────────────────────── */

.row__pick { position: relative; width: 18px; height: 18px; z-index: 1; cursor: pointer; }



.row__check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.row__box {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  transition: border-color var(--fast) var(--ease);
}

.row:hover .row__box { border-color: var(--ink-muted); }

.row__check:checked + .row__pick .row__box {
  background: var(--accent);
  border-color: var(--accent);
}

.row__check:checked + .row__pick .row__box::after {
  content: "";
  width: 4px;
  height: 8px;
  margin-top: -2px;
  border: solid var(--accent-ink);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.row__check:focus-visible + .row__pick .row__box { outline: 1px solid var(--ink); }

.row__star {
  z-index: 1;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease);
}

.row:hover .row__star { opacity: 0.7; }
.row__star:hover { opacity: 1; color: var(--ink); }
.row.is-flagged .row__star { opacity: 1; color: var(--accent-text); }
.row.is-open.is-flagged .row__star { color: var(--accent-ink); }

/* ── Отправитель и текст ────────────────────────────────────────────── */

.row__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--w-avatar);
  height: var(--w-avatar);
  border-radius: 4px;
  background: var(--avatar-bg);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  overflow: hidden;
}

.row__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-raised);
}

.row__sender,
.row__link,
.row__preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.row__sender { color: var(--ink-muted); }

/* Тема и начало текста идут одной фразой — так строка читается слитно,
   а не как две колонки, между которыми глаз вынужден прыгать. */
.row__text {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
}

.row__text .row__link { flex: none; max-width: 60%; }
.row__preview { color: var(--ink-faint); font-size: var(--text-sm); }

.row__marks { display: flex; align-items: center; gap: var(--sp-1); }
.row__clip { color: var(--ink-faint); font-size: 0.5rem; }

.row__thread-size {
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ── Время и быстрые действия ───────────────────────────────────────── */

/* Одно место на двоих: в покое там время, при наведении — кнопки. Так
   частые действия делаются одним движением, а список остаётся чистым. */
.row__tail {
  position: relative;
  display: grid;
  justify-items: end;
  min-width: var(--w-tail);
}

.row__tail > * { grid-area: 1 / 1; }

.row__time {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.row__quick {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fast) var(--ease);
}

.row:hover .row__quick,
.row:focus-within .row__quick { opacity: 1; pointer-events: auto; }
.row:hover .row__time,
.row:focus-within .row__time { opacity: 0; }

.row__act {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.row__act:hover { color: var(--ink); background: var(--bg-active); }
.row__act .icon { width: 14px; height: 14px; }

/* Непрочитанное: отправитель и тема набирают вес и яркость. */
.row.is-unread .row__sender { color: var(--ink); font-weight: 600; }
.row.is-unread .row__link { color: var(--ink); font-weight: 600; }
.row.is-unread .row__time { color: var(--ink-muted); }

/* Просторный режим добавляет письму воздуха, плотный — убирает всё
   лишнее, включая начало текста. */
:root[data-density="compact"] .row__preview { display: none; }

/* ── Поиск ──────────────────────────────────────────────────────────── */

.search { position: relative; min-width: 0; }

/* Поле выглядит полем: своя подложка, лупа, место под настройки. Раньше
   это был серый текст на общем фоне — его вообще не опознавали как ввод. */
.search__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition: border-color var(--fast) var(--ease);
}

.search:focus-within .search__bar { border-color: var(--line-strong); }

.search__icon { color: var(--ink-faint); }

.search__input {
  width: 100%;
  border: none;
  background: none;
  font-size: var(--text-base);
}
.search__input:focus { outline: none; }
.search__input::placeholder { color: var(--ink-faint); }
.search__input::-webkit-search-cancel-button { display: none; }

.search__key {
  padding: 1px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.search__clear,
.search__more {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.search__clear:hover,
.search__more:hover { color: var(--ink); background: var(--bg-active); }

/* Панель условий. У Gmail это окно поверх экрана; здесь она часть
   страницы, и её адрес можно сохранить или переслать. */
.search__panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  right: 0;
  z-index: 20;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.search__panel.is-open { display: flex; }

.search__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
}

.search__row > span { color: var(--ink-faint); }

.search__row input,
.search__row select {
  width: 100%;
  padding: var(--sp-2) 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  font-size: var(--text-base);
}

.search__row input:focus,
.search__row select:focus { outline: none; border-color: var(--ink); }

.search__flags { display: flex; gap: var(--sp-5); padding-left: 9rem; }

.search__flag {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  cursor: pointer;
}

.search__flag input { accent-color: var(--accent); }

.search__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}

/* ── Выпадающий список ──────────────────────────────────────────────── */

/* Свой, а не родной `select`: его меню рисует операционная система, и
   посреди тёмного интерфейса открывалась белая полоса с синей подсветкой.
   Собран на `details`, поэтому открывается и с клавиатуры, и без скриптов. */
.pick { position: relative; }

.pick__value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-base);
  cursor: pointer;
  list-style: none;
}

.pick__value::-webkit-details-marker { display: none; }
.pick[open] .pick__value { border-color: var(--line-strong); }
.pick__value > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick__arrow { flex: none; color: var(--ink-faint); transition: transform var(--fast) var(--ease); }
.pick[open] .pick__arrow { transform: rotate(180deg); }

.pick__menu {
  position: absolute;
  top: calc(100% + var(--sp-1));
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 16rem;
  overflow-y: auto;
  /* По горизонтали меню не ездит: длинный адрес обрезается многоточием,
     а не тянет за собой полосу прокрутки под списком. */
  overflow-x: hidden;
  padding: var(--sp-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.pick__option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 4px;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  cursor: pointer;
}

.pick__option:hover { background: var(--bg-hover); color: var(--ink); }

/* Длинный адрес ящика обрезается, а не распирает меню. */
.pick__option > span:not(.pick__thread) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pick__option input { position: absolute; opacity: 0; pointer-events: none; }

/* Метка ящика тем же цветом, что и нить в списке писем. */
.pick__thread { width: var(--thread-width); height: 1em; background: var(--thread); border-radius: 1px; }

.pick__tick { margin-left: auto; opacity: 0; color: var(--accent-text); }
.pick__option:has(input:checked) { color: var(--ink); }
.pick__option:has(input:checked) .pick__tick { opacity: 1; }
.pick__option:has(input:focus-visible) { outline: 1px solid var(--ink); }

/* ── Галочка ────────────────────────────────────────────────────────── */

.tick {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  cursor: pointer;
}

.tick input { position: absolute; opacity: 0; pointer-events: none; }

.tick__box {
  width: 16px;
  height: 16px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.tick:hover { color: var(--ink); }
.tick input:checked + .tick__box { background: var(--accent); border-color: var(--accent); }

.tick input:checked + .tick__box::after {
  content: "";
  width: 4px;
  height: 8px;
  margin-top: -2px;
  border: solid var(--accent-ink);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.tick input:focus-visible + .tick__box { outline: 1px solid var(--ink); }

/* ── Панель действий ────────────────────────────────────────────────── */

/* Показывается на месте поиска, когда отмечено хотя бы одно письмо.
   Условие проверяет сам CSS — скрипт для этого не нужен. */
.bulk {
  display: none;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}

/* Поиск и панель занимают одну и ту же клетку: подмена не двигает
   ни на пиксель ни список, ни папки под ними. */
.bar__swap { display: grid; }
.bar__swap > * { grid-area: 1 / 1; }

/* Проверяем на общем предке: галочки лежат в списке, а панель — в шапке,
   и связывает их не вложенность, а атрибут form. */
.work:has(.row__check:checked) .bulk { display: flex; }
.work:has(.row__check:checked) .search { visibility: hidden; }

/* «Выделить всё» — тот же квадрат, что и в строке письма: одинаковые
   вещи должны выглядеть одинаково. */
.bulk__all {
  position: relative;
  width: var(--w-avatar);
  height: var(--w-avatar);
  cursor: pointer;
}

.bulk__allbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.bulk__allmark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg);
}

.bulk__allbox:checked + .bulk__allmark {
  background: var(--accent);
  border-color: var(--accent);
}

.bulk__allbox:checked + .bulk__allmark::after {
  content: "";
  width: 4px;
  height: 8px;
  margin-top: -2px;
  border: solid var(--accent-ink);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.bulk__allbox:focus-visible + .bulk__allmark { outline: 1px solid var(--ink); }

.bulk__count {
  color: var(--ink-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Бейдж ──────────────────────────────────────────────────────────── */

.badge {
  padding: 1px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.badge--ok   { color: var(--ok); }
.badge--bad  { color: var(--danger); border-color: var(--danger); }
.badge--warn { color: var(--warn); border-color: var(--warn); }
.badge--quiet { color: var(--ink-faint); }

/* Пилюли состояний: заливка вместо рамки — статус должен читаться
   боковым зрением, не вчитываясь. */
.badge--state {
  border-color: transparent;
  background: var(--bg-active);
  color: var(--ink-muted);
}

.badge--live {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 560;
}

/* ── Уведомление ────────────────────────────────────────────────────── */

.notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.notice--bad { border-color: var(--danger); color: var(--danger); }

.notice__action {
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.notice__action:hover { border-color: var(--ink); }

/* ── Вложения ───────────────────────────────────────────────────────── */

.clips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.clips__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.clips__item:hover { color: var(--ink); border-color: var(--line-strong); }

.clips__size { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-xs); }

/* ── Переключатель языка ────────────────────────────────────────────── */

.locales { display: flex; gap: var(--sp-2); }

.locales__item {
  color: var(--ink-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--fast) var(--ease);
}
.locales__item:hover { color: var(--ink); }
.locales__item.is-active { color: var(--ink); }

/* ── Строка состояния ───────────────────────────────────────────────── */

.status {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-2) var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  /* Строка состояния обязана оставаться строкой: при нехватке места
     лишние ячейки уходят целиком, а не переносятся в три этажа. */
  white-space: nowrap;
  overflow: hidden;
}

.status__cell--dim { color: var(--ink-faint); }
/* Подсказка клавиш прижата вправо: это справка, а не показатель. */
.status__cell:last-child { margin-left: auto; }

/* ── Пустое состояние ───────────────────────────────────────────────── */

.empty {
  max-width: 32ch;
  padding: var(--sp-6) var(--sp-4);
}

.empty__title {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.empty__hint {
  margin-top: var(--sp-2);
  color: var(--ink-faint);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ── Письмо ─────────────────────────────────────────────────────────── */

.letter {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}

.letter__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  min-width: 0;
  overflow: hidden;
}

.letter__box { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.letter__close { color: var(--ink-faint); display: grid; place-items: center; }
.letter__close:hover { color: var(--ink); }

@container reader (max-width: 640px) {
  .letter__tools .act span { display: none; }
  .letter__box { display: none; }
}

.letter__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.letter__subject {
  font-size: var(--text-lg);
  font-weight: 620;
  line-height: 1.25;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

/* Кто написал — отдельным блоком, а не строкой в общем потоке: это второе,
   что смотрят после темы. */
.letter__who {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
}

.letter__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--avatar-bg);
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 600;
}

.letter__names { display: flex; flex-direction: column; min-width: 0; }
.letter__sender { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.letter__addr { color: var(--ink-faint); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.letter__time { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }

/* ── Подробности письма ─────────────────────────────────────────────── */

.details__toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink-faint);
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
}

.details__toggle::-webkit-details-marker { display: none; }
.details__toggle::before { content: "▸ "; }
.details[open] .details__toggle::before { content: "▾ "; }
.details__toggle:hover { color: var(--ink); }

.details__list {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
}

.details__list dt { color: var(--ink-faint); }
.details__list dd { margin: 0; overflow-wrap: anywhere; }
.details__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

.details__raw {
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--text-xs);
}
.details__raw:hover { color: var(--ink); }

/* ── Содержимое письма ──────────────────────────────────────────────── */

.letter__scroll {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
}

.letter__body {
  max-width: var(--w-text);
  font-size: var(--text-md);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.letter__body p { margin-block: var(--sp-3); }
.letter__body a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.letter__body a:hover { border-color: var(--ink); }
.letter__body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.letter__body img[data-blocked-src] { display: none; }
.letter__body table { width: 100%; border-collapse: collapse; }
.letter__body td, .letter__body th { padding: var(--sp-2); border: 1px solid var(--line); text-align: left; }
.letter__body blockquote {
  margin: var(--sp-3) 0;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--line-strong);
  color: var(--ink-muted);
}

.mail-body__plain {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── Вложения ───────────────────────────────────────────────────────── */

.clips { display: flex; flex-direction: column; gap: var(--sp-2); }

.clips__title {
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clips__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Карточка файла: тип крупно, имя и размер рядом. Раньше вложение было
   строкой со скрепкой и читалось как ссылка в тексте. */
.clip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.clip:hover { border-color: var(--line-strong); background: var(--bg-hover); }

.clip__kind {
  display: grid;
  place-items: center;
  min-width: 34px;
  padding: 2px var(--sp-1);
  border-radius: 4px;
  background: var(--bg-active);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.clip__body { display: flex; flex-direction: column; min-width: 0; }
.clip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; font-size: var(--text-sm); }
.clip__size { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-xs); }

.letter__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
}

/* ── Переписка под письмом ──────────────────────────────────────────── */

.thread {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.thread__title {
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.thread__list { display: flex; flex-direction: column; }

.thread__link {
  display: grid;
  grid-template-columns: minmax(0, 16ch) auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2);
  margin-inline: calc(var(--sp-2) * -1);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  transition: background var(--fast) var(--ease);
}

.thread__link:hover { background: var(--bg-hover); }

.thread__who,
.thread__preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.thread__who { color: var(--ink-muted); }
.thread__when { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-xs); }
.thread__preview { color: var(--ink-faint); }

.thread__item.is-unread .thread__who { color: var(--ink); font-weight: 600; }

/* ── Редактор письма ────────────────────────────────────────────────── */

/* Редактор занимает колонку целиком: поле текста растягивается, а кнопка
   «Отправить» остаётся на виду при любой длине письма. */
.composer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-5);
  overflow-y: auto;
}

.composer__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.composer__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.composer__close { color: var(--ink-faint); font-size: var(--text-sm); }
.composer__close:hover { color: var(--ink); }

.composer__row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--fast) var(--ease);
}
/* Подсвечиваем строку целиком: рамка вокруг поля порвала бы ровную
   сетку подписей. */
.composer__row:focus-within { border-color: var(--ink); }

.composer__label {
  color: var(--ink-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.composer__input {
  width: 100%;
  padding: var(--sp-3) 0;
  border: none;
  background: none;
  font-size: var(--text-base);
}
.composer__input:focus { outline: none; }

.composer__more { border-bottom: 1px solid var(--line); }
.composer__more[open] { border-bottom: none; }

.composer__summary {
  padding: var(--sp-3) 0;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.composer__summary::-webkit-details-marker { display: none; }
.composer__summary::before { content: "+ "; }
.composer__more[open] .composer__summary::before { content: "− "; }
.composer__summary:hover { color: var(--ink); }

.composer__text {
  flex: 1;
  min-height: 12rem;
  padding: var(--sp-4) 0;
  border: none;
  background: none;
  font-size: var(--text-md);
  line-height: 1.65;
  resize: vertical;
}
.composer__text:focus { outline: none; }

.composer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.composer__hint { color: var(--ink-faint); font-size: var(--text-xs); }

/* Прикрепление файлов. Родное поле выбора выглядит в каждом браузере
   по-своему и ломает строй формы, поэтому оно спрятано под подписью. */
.composer__files {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  padding: var(--sp-2) 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--fast) var(--ease);
}

.composer__files:hover { color: var(--ink); }
.composer__files input { display: none; }
.composer__files:focus-within { color: var(--ink); outline: 1px solid var(--ink); }


/* ═══ 5. Экраны ═══════════════════════════════════════════════════════ */

/* ── Почта ──────────────────────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: var(--w-rail) minmax(0, 1fr);
  /* Строку задаём явно: без этого её высота определяется содержимым, и
     длинное письмо растягивает колонку за пределы экрана — вместе с
     прилипшим футером, который уезжает вниз вместе со всем остальным. */
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;

  /* Панели лежат отдельными карточками на подложке, а не срастаются в
     одно полотно. Зазор между ними разделяет надёжнее любой линии и даёт
     интерфейсу воздух, которого не хватало: раньше всё упиралось встык
     в края экрана и читалось как одна плоская таблица. */
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--bg-rail);
}

/* Общий вид панели. Три колонки различаются содержимым, а не оформлением:
   одинаковые вещи должны выглядеть одинаково. */
.rail,
.work,
.reader {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Открытое письмо получает свою колонку, а не ложится поверх списка:
   перекрытый список нельзя листать, а именно это и нужно делать,
   разбирая почту. */
.app.is-reading {
  /* У списка есть предел сжатия. Ниже него строка пришлось бы
     перестраивать — а список, меняющий вид при открытии письма, читается
     как поломка: высота строк скачет, и глаз теряет место, где был. */
  grid-template-columns: var(--w-rail) minmax(var(--w-list-min), 1fr) minmax(0, var(--w-reader));
}

/* Ящики лежат глубже остального: это не то, куда смотрят, а то, откуда
   выбирают. */
.rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-4);
  background: var(--bg);
  overflow-y: auto;
}

.rail__head { padding-bottom: var(--sp-1); }

/* Единственная кнопка, залитая акцентом. Написать письмо — главное, что
   тут делают; всё остальное второстепенно и остаётся монохромным. */
.rail__compose {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--text-sm);
  font-weight: 560;
  transition: filter var(--fast) var(--ease);
}

.rail__compose:hover { filter: brightness(1.08); }

.rail__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 0;
  /* Папки занимают всю ширину колонки, чтобы подсветка активной шла
     от края до края, а не висела прямоугольником внутри отступов. */
  margin-inline: calc(var(--sp-4) * -1);
}

.rail__section > .rail__caption,
.rail__section > .boxes { margin-inline: var(--sp-4); }

.rail__caption {
  color: var(--ink-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.boxes { overflow-y: auto; }

.rail__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.work {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
  /* Список подстраивается под ширину своей колонки, а не под экран:
     открылось письмо — колонки текста уходят сами. */
  container-type: inline-size;
}

.bar { display: flex; flex-direction: column; }

/* Заголовок и поиск в одной строке: имя папки слева, поле справа.
   Поиск здесь не главный, поэтому он тише и уже — но всегда под рукой. */
.bar__head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.bar__head .search {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
}

.folders {
  display: flex;
  gap: var(--sp-4);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.list {
  overflow-y: auto;
  /* По горизонтали список не прокручивается и не вылезает: строка обязана
     укладываться в свою колонку, какой бы длинной ни была тема. */
  overflow-x: hidden;
}

.list__empty { padding: var(--sp-4); }

/* Колонка чтения сама не прокручивается: прокрутка живёт внутри письма,
   иначе шапка и действия уезжали бы вместе с текстом. */
/* Открытое письмо — верхний уровень: то, на что смотрят прямо сейчас. */
.reader {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  /* Без этого элемент сетки не сжимается меньше содержимого, и длинное
     письмо распирает колонку, унося футер за нижний край экрана. */
  min-height: 0;
  overflow: hidden;
  background: var(--bg-raised);
  animation: reader-in var(--fast) var(--ease);
}

/* Внутри письма фон общий с колонкой, иначе прилипший футер выглядел бы
   вырезанным из другого экрана. */
.letter__foot { background: var(--bg-raised); }

/* ── Страница настроек ──────────────────────────────────────────────── */

.app--plain { grid-template-columns: var(--w-rail) minmax(0, 1fr); }

.page {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  overflow-y: auto;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 62rem;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}

.card__title { font-size: var(--text-md); font-weight: 600; }
.card__hint { color: var(--ink-faint); font-size: var(--text-sm); }

.form { display: flex; flex-direction: column; gap: var(--sp-3); }
.form__row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.form__field { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; min-width: 14rem; }
.form__field--narrow { flex: 0 0 6rem; min-width: 6rem; }
.form__field > span { color: var(--ink-faint); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; }

.form__field input,
.form__area {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: var(--text-base);
}

.form__field input:focus,
.form__area:focus { outline: none; border-color: var(--ink-muted); }

.form__area { font-family: var(--font-mono); line-height: 1.6; resize: vertical; }
.form__foot { display: flex; justify-content: flex-end; }

/* ── Список подключённых ящиков ─────────────────────────────────────── */

.boxlist { display: flex; flex-direction: column; }

.boxrow {
  display: grid;
  grid-template-columns: var(--thread-width) minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}

.boxrow:last-child { border-bottom: none; }
.boxrow__thread { height: 1.6em; background: var(--thread); border-radius: 1px; }

.boxrow__input {
  width: 100%;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  font-size: var(--text-base);
}

/* Название правится прямо в списке: отдельный экран ради одной строки —
   лишний шаг. Рамка появляется только под курсором, чтобы список не
   выглядел formой. */
.boxrow__input:hover { border-color: var(--line); }
.boxrow__input:focus { outline: none; border-color: var(--ink-muted); background: var(--bg); }

.boxrow__servers {
  display: flex;
  flex-direction: column;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.boxrow__stat { color: var(--ink-faint); font-size: var(--text-sm); white-space: nowrap; }

/* ── Вход ───────────────────────────────────────────────────────────── */

.gate {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-4);
  padding: var(--sp-7);
  min-width: 0;
}

.hero__word {
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  /* Только контур: сквозь буквы идут те же линии, что и на фоне, поэтому
     имя живёт, а не лежит поверх картинки. Подложка с mix-blend-mode
     здесь была бы ошибкой — на тёмной теме умножение даёт чёрный блок,
     и слово исчезает вместе с фоном. */
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-faint);
}

.hero__caption {
  max-width: 42ch;
  color: var(--ink-muted);
  font-size: var(--text-md);
  line-height: 1.6;
}

.glass {
  position: relative;
  display: grid;
  align-items: center;
  padding: var(--sp-7);
  border-left: 1px solid var(--line);
  background: var(--bg);
}

.glass__inner { display: flex; flex-direction: column; gap: var(--sp-5); }

.gate__title {
  font-size: var(--text-xl);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.gate__error { color: var(--danger); font-size: var(--text-sm); }

.gate__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.gate__form .button { margin-top: var(--sp-2); align-self: flex-start; }

.glass__foot { display: flex; }


/* ═══ 6. Движение ═════════════════════════════════════════════════════ */

/* Появление письма. Раньше здесь был переход между страницами с
   переездом заголовка — красиво, но он стоил лишней перерисовки всей
   страницы и четверти секунды ожидания на каждом письме. Письмо теперь
   подставляется на месте, а движение осталось ровно такое, чтобы глаз
   заметил смену содержимого и не более того. */
@keyframes reader-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Кто отключил анимации в системе — тому статика. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ═══ 7. Адаптив ══════════════════════════════════════════════════════ */

/* Список реагирует на ширину СВОЕЙ колонки: открылось письмо — лишние
   колонки уходят сами, без пересчёта раскладки всей страницы. */
@container (max-width: 900px) {
  /* Подсказка клавиш — первое, чем жертвуем: это справка, а не данные. */
  .status__cell:last-child { display: none; }
}

@container (max-width: 720px) {
  .row__preview { display: none; }
  .status__cell--dim { display: none; }
}

/* Ноутбук: письмо занимает всё, что осталось от списка. */
@media (max-width: 1400px) {
  :root { --w-reader: 34rem; }
}

@media (max-width: 1100px) {
  :root { --w-rail: 200px; --w-list-min: 420px; }
  .app.is-reading {
    grid-template-columns: var(--w-rail) minmax(var(--w-list-min), 1fr) minmax(0, 26rem);
  }
}

/* Планшет: колонка ящиков схлопывается до нитей — цвет домена остаётся
   виден, названия уходят в подсказку. */
@media (max-width: 900px) {
  :root { --w-rail: 56px; }

  .rail { align-items: center; padding: var(--sp-4) var(--sp-2); }
  .brand__word,
  .rail__caption,
  .rail__composeLabel,
  .box__label,
  .box__count,
  .rail__foot { display: none; }

  .rail__compose { justify-content: center; }
  .rail__compose:hover { padding-left: 0; }

  .box { grid-template-columns: var(--thread-width); }
  .box__thread { height: 1.6em; }

  /* Открытое письмо важнее списка: список уходит целиком. */
  .app.is-reading { grid-template-columns: var(--w-rail) minmax(0, 1fr); }
  .app.is-reading .work { display: none; }
}

/* Телефон: одна колонка, ящики уезжают вниз строкой нитей. */
@media (max-width: 620px) {
  .app,
  .app.is-reading { grid-template-columns: minmax(0, 1fr); }

  /* На телефоне подложка и зазоры съедали бы и без того узкий экран —
     панели снова смыкаются в одно полотно. */
  .app { gap: 0; padding: 0; }
  .rail, .work, .reader { border-radius: 0; }
  .row { margin-inline: 0; border-radius: 0; }

  .rail {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }

  .rail__head { display: none; }
  .rail__compose { border: none; padding: 0; white-space: nowrap; }
  .rail__composeLabel { display: inline; }
  .rail__section { flex-direction: row; align-items: center; min-width: 0; }
  .boxes { display: flex; gap: var(--sp-3); overflow-x: auto; }

  /* Ящики уезжают в горизонтальную ленту, но с названиями: полоска цвета
     без подписи на телефоне не опознаётся — там нет соседних строк,
     по которым можно догадаться, что это. */
  .box {
    grid-template-columns: var(--thread-width) auto;
    gap: var(--sp-2);
    padding: 0;
  }
  .box__label { display: block; max-width: 14ch; font-size: var(--text-xs); }
  .box__count { display: none; }

  .app.is-reading .rail { display: none; }
  .work { border-right: none; }

  /* Строка письма становится двухэтажной: на телефоне вертикали много,
     а ширины нет, и тема, обрезанная на третьем слове, бесполезна.
     Области перечислены по фактическим элементам строки — обёртки
     `row__from` и `row__marks` тоже участвуют, иначе они выпадают из
     сетки и уезжают отдельными этажами. */
  .row {
    grid-template-columns: var(--w-avatar) var(--thread-width) var(--w-time) minmax(0, 1fr) auto;
    grid-template-areas:
      "pick thread time from  marks"
      "pick thread subj subj  subj";
    row-gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
  }

  .row__pick    { grid-area: pick; }
  .row__thread  { grid-area: thread; height: 100%; }
  .row__time    { grid-area: time; }
  .row__from    { grid-area: from; display: flex; }
  .row__sender  { display: block; }
  .row__marks   { grid-area: marks; }
  .row__link    { grid-area: subj; font-size: var(--text-base); }
  .row__preview { display: none; }
  .day { padding-inline: var(--sp-3); }
  .search, .status { padding-inline: var(--sp-3); }
  .letter, .composer { padding: var(--sp-4) var(--sp-3); }

  .gate { grid-template-columns: minmax(0, 1fr); }
  .hero { display: none; }
  .glass { border-left: none; }
}