/* Цветовые токены и типографика. Направление A — Violet Dusk.
 *
 * Главная идея прежняя: цвет — это навигация. Плитка направления на
 * третьем слое и среда внутри него красятся из одного набора переменных.
 * Переключение направления меняет --accent и --surface на корне, и весь
 * интерфейс переодевается целиком. JS ничего об этом знать не должен.
 *
 * Что изменилось против шестнадцатой версии. Раньше основа была
 * нейтрально-тёмной (#0b0a10), а карточка — плоской заливкой чуть
 * светлее фона. Здесь основа баклажановая, а карточка поднимается над
 * ней не рамкой, а светом изнутри: слабый блик в левом верхнем углу
 * плюс почти прозрачная белая заливка. На тёмном это читается как
 * объём, тогда как рамка читается как таблица.
 *
 * Чернила не серые, а кремовые и розовые. Серый текст на фиолетовом
 * выглядит грязным — он тянет фон в зелёное. Розовый той же семьи, что
 * и фон, поэтому вторичный текст задаётся его прозрачностью, а не
 * отдельными цветами: тогда он ложится на любую палитру направления
 * без правок.
 */

:root {
  /* Основа. Баклажан вместо нейтрального угля. */
  --bg:            #100b14;
  --bg-raised:     #191122;
  /* Линии той же розовой семьи, что и чернила, а не отдельный серый:
     на баклажановом фоне серая линейка выглядит грязной. Обе уходят и
     в border-шорткаты, и в background у дорожек прогресса, поэтому
     остаются плоскими цветами. */
  --line:          rgba(250, 216, 206, .16);
  --line-soft:     rgba(250, 216, 206, .10);

  /* Карточка — свет, а не заливка. Используется только как background,
     поэтому может быть градиентом. */
  --card:
    radial-gradient(120% 100% at 6% -10%, rgba(250, 216, 206, .09) 0%, transparent 58%),
    rgba(255, 255, 255, .035);
  --card-hover:
    radial-gradient(120% 100% at 6% -10%, rgba(250, 216, 206, .13) 0%, transparent 58%),
    rgba(255, 255, 255, .06);

  /* Чернила: крем основной, розовый — всё вторичное. */
  --text:          #f8f4e9;
  --text-dim:      rgba(250, 216, 206, .55);
  --text-faint:    rgba(250, 216, 206, .40);

  /* Палитра Violet Dusk из пинов */
  --violet-deep:   #602d58;
  --violet-mid:    #935d73;
  --rose:          #fad8ce;
  --cream:         #f8f4e9;

  /* Активное направление. Значения подставляет JS при входе в домен.
     Это плоские цвета: --accent идёт не только в фон, но и в color и в
     border-color, где градиент не работает. */
  --accent:        #b07ac2;
  --accent-soft:   rgba(157, 93, 180, .20);
  --surface:       transparent;
  /* Затемнение рабочей области поверх --surface (см. .workspace).
     Пусто по умолчанию; направление задаёт своё. */
  --surface-shade: transparent;
  --on-accent:     #120d16;

  /* Смысловые цвета. Приглушены под пастельную палитру: чистый
     светофорный зелёный на баклажановом кричит. */
  --plus:          #9ed49c;
  --minus:         #e79a9a;
  --warn:          #dcb87e;

  /* Приглушённые подложки под теми же смыслами: фон кнопки удаления,
     плашка предупреждения. Раньше они были вписаны прямо в экранах
     значениями старой палитры и при перекраске остались бы от неё —
     цвет текста уехал бы, а подложка нет. */
  --plus-soft:     rgba(158, 212, 156, .14);
  --minus-soft:    rgba(231, 154, 154, .14);
  --warn-soft:     rgba(220, 184, 126, .14);

  /* Вода. Свой цвет, а не --accent: вода остаётся синей и в
     фиолетовом питании, иначе шкала теряет смысл. */
  --water:         #8ec3e0;

  /* Белки, жиры, углеводы — три своих цвета, одни на всё приложение.
   *
   * Раньше полосы брали смысловые цвета темы: белки --plus, жиры
   * --warn, углеводы --accent. В зелёном направлении «здоровья» плюс и
   * акцент оказывались одним и тем же зелёным, и две полосы из трёх
   * становились неразличимы — человек читал их только по подписям.
   *
   * Теперь цвет привязан не к теме, а к самому веществу: одна тёплая
   * лестница от светлого песка к жжёному оранжевому. Различаются они
   * не только тоном, но и яркостью, поэтому читаются и при цветовой
   * слепоте, и на чёрно-белом снимке.
   *
   * Одни и те же во всех наборах, светлые включительно: цвет
   * принадлежит веществу, а не теме, и «жёлтая полоса — это жир»
   * человек запоминает один раз. */
  --macro-p:       #f7d2a1;
  --macro-f:       #e8af33;
  --macro-c:       #e38622;

  /* Нижний бар на телефоне — стекло.
     Прозрачности много: сквозь панель должно быть видно, что страница
     под ней продолжается. Читаемость держится не плотностью, а
     размытием, поэтому цвет здесь светлее, чем кажется нужным. */
  --bar:           rgba(38, 28, 52, .58);

  /* Из чего собрано стекло: кромка по краю, световая линия сверху,
     подложка активной вкладки и тень, которая отрывает панель от
     страницы. Отдельными токенами — чтобы в монохромном направлении
     стекло стало нейтральным одной правкой, а не пятью. */
  --glass-edge:    rgba(255, 255, 255, .14);
  --glass-light:   rgba(255, 255, 255, .10);
  --glass-pill:    rgba(255, 255, 255, .13);
  --glass-shadow:  0 12px 32px -12px rgba(0, 0, 0, .7);

  /* Заставка: свет из центра, там, где знак. Кольцо набрано двумя
     цветами семьи — баклажан и розовый. */
  --splash-bg: radial-gradient(circle at 50% 40%, #2a1830 0%, #100b14 68%);
  --ring-1:    var(--rose);
  --ring-2:    var(--violet-mid);

  /* Геометрия. Скругления крупнее, чем были: мягкая плитка — часть
     направления, а не случайность. */
  --r-sm:  11px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;

  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap:    16px;
  --gap-lg: 24px;
  --gap-xl: 36px;

  /* Глубина держится на трёх вещах сразу, и ни одна из них не светится:
   *
   *   1. карточка светлее фона — это отделяет её от подложки;
   *   2. тень под ней уходит вниз и затемняет, а не подсвечивает;
   *   3. волосяная светлая линия по верхней кромке — там, где на
   *      физическом предмете лежал бы свет сверху.
   *
   * Третий пункт — 6% белого, ровно на грани заметности. Больше — и
   * карточка начинает светиться, а это ровно то, от чего уходили. */
  --shadow:      0 20px 44px -24px rgba(0, 0, 0, .85);
  --shadow-soft: 0 10px 26px -14px rgba(0, 0, 0, .6);
  --edge:        inset 0 1px 0 rgba(255, 255, 255, .06);
  --glow:        0 10px 26px -14px var(--accent);

  /* Пятна света над рабочей областью.
   *
   * Раньше они были вписаны прямо в layout.css плоскими цветами, и
   * фиолетовое свечение доставалось всем разделам без разбора — включая
   * финансы, где вся затея с монохромом им и перечёркивалась. Теперь это
   * переменные, и раздел меняет их вместе с остальной палитрой. */
  --air-1: rgba(96, 45, 88, .55);
  --air-2: rgba(250, 216, 206, .05);

  --sidebar-w: 248px;
  --tabbar-h: 68px;

  --ease: cubic-bezier(.22, .68, .36, 1);

  /* Для длинных движений: переезд подложки, смена экрана, листание
     колоды. Разгоняется медленнее и дольше тормозит — на расстоянии в
     полэкрана обычная кривая читается как рывок. */
  --ease-soft: cubic-bezier(.32, .72, .24, 1);

  --font: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  color-scheme: dark;
}

/* ======================================================================
   Прихожая — чёрная
   ======================================================================

   Заставка и выбор направления. Всё, что до входа в направление.

   Чистый чёрный, а не баклажановый, как внутри: прихожая — это пауза
   между экранами, и ей нечего показывать, кроме двух дверей. На чёрном
   фиолетовая плитка горит единственным цветным пятном, и выбор делается
   раньше, чем человек успевает прочитать подписи.

   У чёрного есть цена: угольная плитка «Личных данных» на нём почти
   сливается с фоном. Поэтому у неё заметнее рамка — она и держит форму
   там, где не держит цвет.

   Признак ставит JS: атрибут держится, пока направление не выбрано, и
   снимается на входе в него. В index.html он проставлен заранее, чтобы
   заставка не мигнула баклажановым до первой строчки кода.
   ====================================================================== */

[data-shell="dark"] {
  /* Основа почти чёрная — свет кладётся поверх неё пятнами (см. .app в
     layout.css). Не абсолютный ноль: чистый чёрный на OLED-экране
     проваливается в выключенный пиксель, и низ экрана выглядит дырой, а
     не поверхностью, на которой лежат плитки. */
  --bg:          #0e0b12;
  --bg-raised:   #191420;

  --line:        rgba(255, 255, 255, .14);
  --line-soft:   rgba(255, 255, 255, .07);

  --card:        rgba(255, 255, 255, .05);
  --card-hover:  rgba(255, 255, 255, .08);

  /* Фиолетовый свет сверху.
   *
   * Пятна крупные и заметные: прихожая — единственный экран без
   * содержимого, спорить свету здесь не с чем, и именно он делает вход
   * похожим на вход, а не на пустой чёрный лист. Вниз всё уходит в почти
   * чёрное, поэтому под плитками фон снова спокойный. */
  --air-1: rgba(139, 92, 246, .78);
  --air-2: rgba(167, 139, 250, .24);

  /* Тень на тёмном почти не видна; форму объектам задаёт кромка. */
  --shadow:      none;
  --shadow-soft: none;
  --glow:        none;

  /* Заставка — то же свечение из центра, где стоит знак. */
  --splash-bg: radial-gradient(circle at 50% 42%, #2f1c4d 0%, #0e0b12 66%);
}

/* Палитры направлений. Держатся здесь, но настоящий источник — сервер:
 * он отдаёт их вместе с деревом навигации, а эти значения нужны, чтобы
 * приложение выглядело правильно ещё до первого ответа.
 *
 * --surface здесь градиент, а не цвет: он единственный, кто рисует
 * атмосферу направления, и плоской заливкой её не получить. Он уходит
 * только в background, так что градиент безопасен. */

/* Спорт — фиолетово-чёрная среда.
 *
 * Почти чёрный фон с фиолетовым подтоном и один цвет на всё
 * направление. Раньше здесь было три пятна света и по своему оттенку у
 * каждого раздела: питание сиреневое, спорт розовый, тело персиковое.
 * Смотрелось как четыре разных приложения, а переход между вкладками
 * читался как переход в другую программу.
 *
 * Свет остался, но еле заметный: он должен отделять верх экрана от низа,
 * а не рисоваться сам. Заметный градиент на тёмном всегда выигрывает у
 * содержимого — глаз идёт к самому светлому месту, а там ничего нет.
 */
/* Палитры направлений — запасные значения.
 *
 * Настоящий цвет ставит выбор человека: js/themes.js помечает корень
 * атрибутом data-theme, и работает набор из списка ниже. Эти три блока
 * нужны до того, как отработает первая строчка кода, и на случай, если
 * она не отработает вовсе: направление всё равно выглядит собой, а не
 * общим баклажановым.
 *
 * --surface здесь запасной: настоящий приходит с деревом навигации
 * (backend/navigation/service.py).
 */

[data-domain="sport"] {
  --accent:      #a78bfa;
  --accent-soft: rgba(139, 92, 246, .22);

  /* Фон заметно фиолетовее прежнего почти-чёрного.
     Раньше это был #0b0810 — фиолет в нём читался только рядом с
     сиреневой кнопкой, а сам по себе выглядел серым углём. Здесь цвет
     виден и без подсказок, но остаётся тёмным: на экранах этого
     направления живут цифры, графики и списки, а они держатся на
     контрасте с фоном, а не на его яркости. */
  --bg:          #1c0f33;
  --bg-raised:   #291645;

  /* Тот же свет, что в прихожей, — чтобы вход и среда за ним были одним
     местом, а не двумя разными экранами. Слабее: подложка сама по себе
     светлая, и прежняя сила давала вверху выцветшее пятно вместо
     света. */
  --air-1: rgba(167, 139, 250, .24);
  --air-2: rgba(196, 181, 253, .09);

  /* Внутри темнее, чем на плитке: та же подложка, притушенная на
     четверть. Плитка обещает цвет, среда даёт его же, но не слепит —
     на ней читают. */
  --surface-shade: rgba(8, 3, 16, .26);

  /* Карточка — ровная заливка, как в финансах: разница между разделами
     держится на цвете подложки, а не на разной физике поверхностей.
     Здесь она затемняет, а не осветляет: фон стал светлым фиолетовым, и
     белая плёнка поверх него давала мутное молоко вместо карточки. */
  --card:        rgba(12, 4, 24, .34);
  --card-hover:  rgba(12, 4, 24, .46);

  /* Подложка под светом — своя у каждого раздела, приходит из дерева
     навигации (см. backend/navigation/service.py). Здесь запасное
     значение на случай, если раздел её не задал. */
  --surface:     #251044;

  --line:        rgba(226, 214, 245, .15);
  --line-soft:   rgba(226, 214, 245, .08);

  --text-dim:    rgba(238, 232, 248, .60);
  --text-faint:  rgba(238, 232, 248, .40);

  /* Стекло в тон среде: под баром проезжает фиолетовое, и нейтральное
     стекло поверх него выглядело бы серым пятном. */
  --bar:         rgba(58, 34, 88, .52);
  --glass-pill:  rgba(255, 255, 255, .16);
}

/* Здоровье — зелёная среда: питание, вода, анализы. */
[data-domain="health"] {
  --accent:        #8EB69B;
  --accent-soft:   rgba(142, 182, 155, .22);
  --on-accent:     #051F20;

  --bg:            #0B2B26;
  --bg-raised:     #163832;
  --surface:       #163832;
  --surface-shade: rgba(3, 16, 14, .28);

  --air-1:         rgba(142, 182, 155, .28);
  --air-2:         rgba(218, 241, 222, .08);

  --card:          rgba(3, 18, 16, .36);
  --card-hover:    rgba(3, 18, 16, .48);
  --line:          rgba(218, 241, 222, .15);
  --line-soft:     rgba(218, 241, 222, .08);

  --text:          #DAF1DE;
  --text-dim:      rgba(218, 241, 222, .62);
  --text-faint:    rgba(218, 241, 222, .42);

  --bar:           rgba(22, 56, 50, .55);
  --glass-pill:    rgba(218, 241, 222, .14);

  --plus:          #9be0b0;
  --minus:         #f0a3a3;
}

[data-domain="pim"] {
  --accent:      #eceaee;
  --accent-soft: rgba(255, 255, 255, .10);
  --on-accent:   #0c0c0e;

  /* Света нет вовсе.
   *
   * Свечение — приём цветных разделов: там оно задаёт настроение. На
   * деньгах настроение не нужно, а размытые пятна за карточками читаются
   * как неон и тянут взгляд туда, где ничего не написано. Поэтому здесь
   * плоские поверхности и ни одного ореола. */
  --air-1: transparent;
  --air-2: transparent;

  --bg:          #0a0a0c;
  --bg-raised:   #141416;

  --line:        rgba(255, 255, 255, .12);
  --line-soft:   rgba(255, 255, 255, .07);

  --text-dim:    rgba(240, 240, 245, .58);
  --text-faint:  rgba(240, 240, 245, .38);

  /* Карточка — ровная матовая заливка. Ни градиента, ни блика: карточка
     здесь отделяется от фона тем, что чуть светлее, и всё. */
  --card:        rgba(255, 255, 255, .058);
  --card-hover:  rgba(255, 255, 255, .085);

  /* Подложка — один плоский цвет. */
  --surface:     #0c0c0e;

  /* Плюс и минус остаются цветными, но приглушённее: на нейтральном
     фоне тот же зелёный звучит громче, чем на баклажановом. */
  --plus:        #8fc98d;
  --minus:       #dd8f8f;
  --plus-soft:   rgba(143, 201, 141, .13);
  --minus-soft:  rgba(221, 143, 143, .13);

  /* Свечения нет: белая кнопка на угольном и так заметна. Тени есть —
     они затемняют, а не подсвечивают, и именно они дают карточке вес. */
  --glow:        none;

  /* Стекло тоже нейтральное: фиолетовое под монохромным экраном
     читалось как обрезок чужого интерфейса. */
  --bar:         rgba(38, 38, 44, .58);
  --glass-edge:  rgba(255, 255, 255, .16);
  --glass-pill:  rgba(255, 255, 255, .14);
}

[data-domain="community"] {
  --accent:        #7FDBD6;
  --accent-soft:   rgba(61, 168, 175, .24);
  --on-accent:     #052a2c;

  --bg:            #0b3033;
  --bg-raised:     #144a4e;
  --surface:       #175F63;
  --surface-shade: rgba(2, 20, 22, .26);

  --air-1:         rgba(61, 168, 175, .36);
  --air-2:         rgba(180, 232, 228, .10);

  --card:          rgba(2, 20, 22, .34);
  --card-hover:    rgba(2, 20, 22, .46);
  --line:          rgba(180, 232, 228, .16);
  --line-soft:     rgba(180, 232, 228, .08);

  --text:          #e6fbf9;
  --text-dim:      rgba(230, 251, 249, .62);
  --text-faint:    rgba(230, 251, 249, .42);

  --bar:           rgba(20, 74, 78, .55);
  --glass-pill:    rgba(180, 232, 228, .14);

  /* Приход не бирюзовый — он бы сливался с кнопками; тёплый зелёный
     и коралл читаются на лагуне как чужие, а значит заметные. */
  --plus:          #b7e59a;
  --minus:         #ffab9b;
}

/* ======================================================================
   Одиннадцать наборов цвета
   ======================================================================

   Любой из одиннадцати можно поставить любому направлению: три семейства
   цвета были задуманы как характер направлений, но характер — вещь
   человека, а не приложения. Поэтому наборы лежат общим списком, а
   направление задаёт лишь тот, что стоит по умолчанию (см. DEFAULTS в
   js/themes.js).

   Каждый блок задаёт весь набор токенов целиком, а не разницу с
   направлением: набор из «Личных данных», поставленный в «Тело и
   здоровье», не должен донашивать чужой фон. Из-за этого блоки
   выглядят повторяющимися — это цена за то, что любой из них работает
   в любом месте.

   Веса селекторов равны весу блока направления, поэтому наборы стоят
   ниже: при равном весе выигрывает тот, кто написан последним.
   ====================================================================== */

/* Аврора: ночное небо и северное сияние. Мятный свет сверху,
 * фиолетовый слева; кнопки мятные — холодные и хорошо видные на синем.
 * По умолчанию в «Спорте». */
[data-theme="amethyst"] {
  --accent:        #8EF0D2;
  --accent-soft:   rgba(110, 231, 200, .18);
  --on-accent:     #06231c;

  --bg:            #0c0f24;
  --bg-raised:     #161b3a;
  --surface:       #141a3a;
  --surface-shade: rgba(0, 0, 0, .24);

  --air-1:         rgba(110, 231, 200, .22);
  --air-2:         rgba(139, 108, 250, .30);

  --card:          rgba(6, 8, 24, .40);
  --card-hover:    rgba(6, 8, 24, .52);
  --line:          rgba(232, 236, 255, .15);
  --line-soft:     rgba(232, 236, 255, .08);

  --text:          #eef1ff;
  --text-dim:      rgba(232, 236, 255, .62);
  --text-faint:    rgba(232, 236, 255, .42);

  --bar:           rgba(26, 32, 70, .56);
  --glass-pill:    rgba(232, 236, 255, .14);
  --glass-edge:    rgba(232, 236, 255, .16);

  --plus:          #a6ecb6;
  --minus:         #ffa3b1;
  --plus-soft:     rgba(166, 236, 182, .14);
  --minus-soft:    rgba(255, 163, 177, .14);
  --glow:          0 10px 26px -14px var(--accent);
}

/* Шалфей: приглушённая зелень и тёплый песок. Самый спокойный набор —
 * как льняная бумага в сумерках. По умолчанию в «Теле и здоровье». */
[data-theme="forest"] {
  --accent:        #BFDCC4;
  --accent-soft:   rgba(156, 196, 164, .20);
  --on-accent:     #0f1d15;

  --bg:            #101714;
  --bg-raised:     #18221d;
  --surface:       #18221d;
  --surface-shade: rgba(0, 0, 0, .24);

  --air-1:         rgba(156, 196, 164, .24);
  --air-2:         rgba(222, 200, 150, .12);

  --card:          rgba(4, 10, 7, .36);
  --card-hover:    rgba(4, 10, 7, .48);
  --line:          rgba(234, 243, 236, .15);
  --line-soft:     rgba(234, 243, 236, .08);

  --text:          #eaf3ec;
  --text-dim:      rgba(234, 243, 236, .62);
  --text-faint:    rgba(234, 243, 236, .42);

  --bar:           rgba(28, 40, 33, .58);
  --glass-pill:    rgba(234, 243, 236, .14);
  --glass-edge:    rgba(234, 243, 236, .16);

  --plus:          #a8e8a0;
  --minus:         #f2a7a0;
  --plus-soft:     rgba(168, 232, 160, .14);
  --minus-soft:    rgba(242, 167, 160, .14);
  --glow:          0 10px 26px -14px var(--accent);
}

/* Пион: светлый набор — лепесток пиона. Румяный розовый переходит в
 * коралл (фон — в layout.css), кнопки ягодные, чернила винные. Карточки
 * белые полупрозрачные, стекло бара молочное. */
[data-theme="peony"] {
  color-scheme: light;

  /* Вода на розовом: общий бледно-голубой здесь терялся (1.188). */
  --water:         #5fb0e6;

  --accent:        #B8285F;
  --accent-soft:   rgba(184, 40, 95, .14);
  --on-accent:     #ffffff;

  --bg:            #FDE6EC;
  --bg-raised:     #ffffff;
  --surface:       #FBD9E3;
  --surface-shade: transparent;

  --air-1:         rgba(230, 60, 125, .30);
  --air-2:         rgba(255, 170, 140, .38);

  --card:          rgba(255, 255, 255, .66);
  --card-hover:    rgba(255, 255, 255, .86);
  --line:          rgba(120, 20, 60, .14);
  --line-soft:     rgba(120, 20, 60, .08);

  --text:          #4a0f2a;
  --text-dim:      rgba(74, 15, 42, .64);
  --text-faint:    rgba(74, 15, 42, .44);

  --bar:           rgba(255, 255, 255, .62);
  --glass-pill:    rgba(184, 40, 95, .12);
  --glass-edge:    rgba(255, 255, 255, .75);
  --glass-light:   rgba(255, 255, 255, .90);
  --glass-shadow:  0 12px 32px -14px rgba(160, 30, 80, .30);

  --edge:          none;
  --shadow-soft:   0 10px 24px -16px rgba(160, 30, 80, .26);

  /* Поле на светлом не утапливается чёрным, а лежит белым листом. */
  --field:         rgba(255, 255, 255, .85);
  --field-line:    rgba(120, 20, 60, .18);

  --plus:          #2e8b57;
  --minus:         #c62828;
  --warn:          #b8741a;

  --plus-soft:     rgba(46, 139, 87, .12);
  --minus-soft:    rgba(198, 40, 40, .12);
  --glow:          0 10px 26px -14px var(--accent);
  --sidebar-veil:  rgba(255, 255, 255, .40);
}

/* Рассвет: светлый набор с градиентом от персика к лаванде.
 *
 * Второй светлый после «Пиона» и первый, у которого фон не один цвет, а
 * переход. Собран он не отдельным правилом, а теми же двумя пятнами
 * света, что и в остальных наборах (--air-1 и --air-2 в .workspace):
 * лавандовое сверху справа, персиковое слева. Поэтому переход живёт на
 * всех экранах разом — и на прихожей, и внутри направления, — и ничего
 * нового рисовать не пришлось.
 *
 * Акцент фиолетовый: на тёплом розовом поле холодная кнопка не теряется
 * и не спорит с фоном, а розовая сливалась бы с ним.
 */
[data-theme="dawn"] {
  color-scheme: light;

  --accent:        #7C5CE0;
  --accent-soft:   rgba(124, 92, 224, .16);
  --on-accent:     #ffffff;

  --bg:            #F9DEE0;
  --bg-raised:     #ffffff;
  --surface:       #F8DCDF;
  --surface-shade: transparent;

  /* Из этих двух пятен и складывается переход: лаванда сверху справа,
     персик слева. Плотность высокая намеренно — на светлом поле слабый
     свет читается как грязь, а не как цвет. */
  --air-1:         rgba(147, 116, 246, .58);
  --air-2:         rgba(255, 156, 104, .62);

  --card:          rgba(255, 255, 255, .62);
  --card-hover:    rgba(255, 255, 255, .84);
  --line:          rgba(62, 40, 110, .14);
  --line-soft:     rgba(62, 40, 110, .08);

  --text:          #2A1B4A;
  --text-dim:      rgba(42, 27, 74, .62);
  --text-faint:    rgba(42, 27, 74, .42);

  --bar:           rgba(255, 255, 255, .58);
  --glass-pill:    rgba(124, 92, 224, .14);
  --glass-edge:    rgba(255, 255, 255, .75);
  --glass-light:   rgba(255, 255, 255, .92);
  --glass-shadow:  0 12px 32px -14px rgba(90, 60, 160, .30);

  --edge:          none;
  --shadow-soft:   0 10px 24px -16px rgba(90, 60, 160, .26);

  --field:         rgba(255, 255, 255, .82);
  --field-line:    rgba(62, 40, 110, .18);

  --plus:          #2f8f63;
  --minus:         #d04a4a;
  --warn:          #c08415;
  --plus-soft:     rgba(47, 143, 99, .12);
  --minus-soft:    rgba(208, 74, 74, .12);
  --warn-soft:     rgba(192, 132, 21, .14);


  --water:         #4f9fd0;
  --glow:          0 10px 26px -14px var(--accent);

  --splash-bg:     radial-gradient(circle at 50% 40%, #ffffff 0%, #F3DCE8 70%);

  /* Боковое меню на компьютере отделяется светом, а не тенью. */
  --sidebar-veil:  rgba(255, 255, 255, .34);
}

/* Оникс: чёрный камень и шампанское. Света почти нет — на экране
 * балансов цвет несут плюс и минус, — а кнопки тёплого золота.
 * По умолчанию в «Личных данных». */
[data-theme="mono"] {
  --accent:        #E8CD98;
  --accent-soft:   rgba(232, 205, 152, .14);
  --on-accent:     #1a1408;

  --bg:            #0b0b0d;
  --bg-raised:     #151517;
  --surface:       #0e0e10;
  --surface-shade: transparent;

  --air-1:         rgba(232, 205, 152, .08);
  --air-2:         rgba(160, 160, 175, .05);

  --card:          rgba(255, 255, 255, .055);
  --card-hover:    rgba(255, 255, 255, .085);
  --line:          rgba(245, 240, 230, .15);
  --line-soft:     rgba(245, 240, 230, .08);

  --text:          #f6f1e7;
  --text-dim:      rgba(245, 240, 230, .62);
  --text-faint:    rgba(245, 240, 230, .42);

  --bar:           rgba(38, 36, 34, .60);
  --glass-pill:    rgba(245, 240, 230, .14);
  --glass-edge:    rgba(245, 240, 230, .16);

  --plus:          #9fd49a;
  --minus:         #e79b95;
  --plus-soft:     rgba(159, 212, 154, .13);
  --minus-soft:    rgba(231, 155, 149, .13);
  --glow:          none;
}

/* Терракота: обожжённая глина и абрикос. Тёплый набор без
 * кислотности — свет глиняный сверху, абрикосовый слева. */
[data-theme="sunset"] {
  --accent:        #FFB48A;
  --accent-soft:   rgba(226, 114, 80, .22);
  --on-accent:     #2b1208;

  --bg:            #1b110d;
  --bg-raised:     #281812;
  --surface:       #2a1812;
  --surface-shade: rgba(0, 0, 0, .24);

  --air-1:         rgba(226, 114, 80, .32);
  --air-2:         rgba(255, 196, 140, .12);

  --card:          rgba(10, 4, 2, .38);
  --card-hover:    rgba(10, 4, 2, .50);
  --line:          rgba(251, 233, 220, .15);
  --line-soft:     rgba(251, 233, 220, .08);

  --text:          #fbe9dc;
  --text-dim:      rgba(251, 233, 220, .62);
  --text-faint:    rgba(251, 233, 220, .42);

  --bar:           rgba(56, 32, 22, .56);
  --glass-pill:    rgba(251, 233, 220, .14);
  --glass-edge:    rgba(251, 233, 220, .16);

  --plus:          #b9e39c;
  --minus:         #ffa08f;
  --plus-soft:     rgba(185, 227, 156, .14);
  --minus-soft:    rgba(255, 160, 143, .14);
  --glow:          0 10px 26px -14px var(--accent);
}

/* Космос: туманность. Пурпурный свет сверху, индиго слева,
 * орхидейные кнопки. Самый яркий из тёмных наборов. */
[data-theme="jelly"] {
  --accent:        #F0A6FF;
  --accent-soft:   rgba(217, 70, 239, .20);
  --on-accent:     #2a0a33;

  --bg:            #0b0a1e;
  --bg-raised:     #16143a;
  --surface:       #16143a;
  --surface-shade: rgba(0, 0, 0, .24);

  --air-1:         rgba(236, 72, 153, .24);
  --air-2:         rgba(99, 102, 241, .32);

  --card:          rgba(6, 4, 20, .40);
  --card-hover:    rgba(6, 4, 20, .52);
  --line:          rgba(243, 238, 255, .15);
  --line-soft:     rgba(243, 238, 255, .08);

  --text:          #f3eeff;
  --text-dim:      rgba(243, 238, 255, .62);
  --text-faint:    rgba(243, 238, 255, .42);

  --bar:           rgba(34, 26, 74, .56);
  --glass-pill:    rgba(243, 238, 255, .14);
  --glass-edge:    rgba(243, 238, 255, .16);

  --plus:          #9fe6b4;
  --minus:         #ffa3a3;
  --plus-soft:     rgba(159, 230, 180, .14);
  --minus-soft:    rgba(255, 163, 163, .14);
  --glow:          0 10px 26px -14px var(--accent);
}

/* Полночь: ночной город с высоты. Сапфировый свет сверху, золотое
 * зарево огней слева, медовые кнопки. Чернила чуть голубоватые —
 * чистый белый на синем отдаёт в лиловый. */
[data-theme="midnight"] {
  --accent:        #FFD166;
  --accent-soft:   rgba(255, 209, 102, .18);
  --on-accent:     #2a1c00;

  --bg:            #070c1c;
  --bg-raised:     #111a33;
  --surface:       #0f1830;
  --surface-shade: rgba(2, 6, 16, .26);

  --air-1:         rgba(64, 118, 255, .32);
  --air-2:         rgba(255, 196, 90, .24);

  --card:          rgba(4, 8, 22, .42);
  --card-hover:    rgba(4, 8, 22, .54);
  --line:          rgba(206, 222, 255, .14);
  --line-soft:     rgba(206, 222, 255, .07);

  --text:          #eef1fb;
  --text-dim:      rgba(232, 238, 252, .62);
  --text-faint:    rgba(232, 238, 252, .42);

  --bar:           rgba(20, 30, 60, .58);
  --glass-pill:    rgba(255, 209, 102, .14);
  --glass-edge:    rgba(206, 222, 255, .16);

  --plus:          #86e0a4;
  --minus:         #ff9fa8;
  --plus-soft:     rgba(134, 224, 164, .14);
  --minus-soft:    rgba(255, 159, 168, .14);
  --warn:          #ffb74d;
  --glow:          0 10px 26px -14px var(--accent);
}

/* Хэллоуин (1.242): тыквенный свет сверху справа и фиолетовая ночь
 * слева, оранжевые кнопки, тёплые кремовые чернила. С 24 октября по
 * 1 ноября — у всех, потом у прошедших квесты (js/halloween.js). */
[data-theme="halloween"] {
  --accent:        #FF8A2A;
  --accent-soft:   rgba(255, 138, 42, .18);
  --on-accent:     #1b0b02;

  --bg:            #0c0812;
  --bg-raised:     #1a1220;
  --surface:       #160d1c;
  --surface-shade: rgba(4, 2, 8, .3);

  --air-1:         rgba(255, 122, 26, .30);
  --air-2:         rgba(124, 58, 237, .30);

  --card:          rgba(8, 4, 12, .45);
  --card-hover:    rgba(8, 4, 12, .58);
  --line:          rgba(255, 220, 190, .14);
  --line-soft:     rgba(255, 220, 190, .07);

  --text:          #f6efe6;
  --text-dim:      rgba(246, 239, 230, .64);
  --text-faint:    rgba(246, 239, 230, .42);

  --bar:           rgba(30, 18, 36, .6);
  --glass-pill:    rgba(255, 138, 42, .16);
  --glass-edge:    rgba(255, 220, 190, .16);

  --plus:          #a3ff7a;
  --minus:         #ff8fa3;
  --plus-soft:     rgba(163, 255, 122, .14);
  --minus-soft:    rgba(255, 143, 163, .14);
  --warn:          #ffb36b;
  --glow:          0 10px 26px -14px var(--accent);
}

/* Океан: бирюза у поверхности и синева в глубине. Кнопки цвета
 * морской воды. По умолчанию в «Сообществе». */
[data-theme="lagoon"] {
  --accent:        #6EE7F0;
  --accent-soft:   rgba(45, 212, 191, .20);
  --on-accent:     #032027;

  --bg:            #051a22;
  --bg-raised:     #0b2833;
  --surface:       #0b2a35;
  --surface-shade: rgba(0, 0, 0, .24);

  --air-1:         rgba(45, 212, 191, .24);
  --air-2:         rgba(56, 120, 246, .26);

  --card:          rgba(1, 12, 18, .38);
  --card-hover:    rgba(1, 12, 18, .50);
  --line:          rgba(227, 248, 251, .15);
  --line-soft:     rgba(227, 248, 251, .08);

  --text:          #e3f8fb;
  --text-dim:      rgba(227, 248, 251, .62);
  --text-faint:    rgba(227, 248, 251, .42);

  --bar:           rgba(10, 44, 58, .56);
  --glass-pill:    rgba(227, 248, 251, .14);
  --glass-edge:    rgba(227, 248, 251, .16);

  --plus:          #c2ea9a;
  --minus:         #ffab9b;
  --plus-soft:     rgba(194, 234, 154, .14);
  --minus-soft:    rgba(255, 171, 155, .14);
  --glow:          0 10px 26px -14px var(--accent);
}

/* Гранат: винная глубина, малиновый свет и коралл. Минус здесь
 * персиковый, а не красный — в красной среде он бы пропал. */
[data-theme="ruby"] {
  --accent:        #FF8FA8;
  --accent-soft:   rgba(225, 29, 92, .20);
  --on-accent:     #2d0712;

  --bg:            #1a0a10;
  --bg-raised:     #2a0f19;
  --surface:       #2c0f1a;
  --surface-shade: rgba(0, 0, 0, .24);

  --air-1:         rgba(214, 31, 105, .30);
  --air-2:         rgba(251, 146, 120, .14);

  --card:          rgba(12, 2, 6, .38);
  --card-hover:    rgba(12, 2, 6, .50);
  --line:          rgba(255, 238, 242, .15);
  --line-soft:     rgba(255, 238, 242, .08);

  --text:          #ffeef2;
  --text-dim:      rgba(255, 238, 242, .62);
  --text-faint:    rgba(255, 238, 242, .42);

  --bar:           rgba(66, 18, 34, .56);
  --glass-pill:    rgba(255, 238, 242, .14);
  --glass-edge:    rgba(255, 238, 242, .16);

  --plus:          #a8e6b0;
  --minus:         #ffc09a;
  --warn:          #ffd27a;
  --plus-soft:     rgba(168, 230, 176, .14);
  --minus-soft:    rgba(255, 192, 154, .14);
  --glow:          0 10px 26px -14px var(--accent);
}

/* Серебро: графит и жемчуг. Холодный голубоватый блик сверху и
 * белёсый слева — как на полированном металле; кнопки жемчужные. */
[data-theme="silver"] {
  --accent:        #E9ECF2;
  --accent-soft:   rgba(233, 236, 242, .14);
  --on-accent:     #16171b;

  --bg:            #16171b;
  --bg-raised:     #22242a;
  --surface:       #202227;
  --surface-shade: rgba(0, 0, 0, .26);

  --air-1:         rgba(190, 208, 240, .26);
  --air-2:         rgba(255, 255, 255, .07);

  --card:          rgba(0, 0, 0, .28);
  --card-hover:    rgba(0, 0, 0, .40);
  --line:          rgba(240, 242, 247, .15);
  --line-soft:     rgba(240, 242, 247, .08);

  --text:          #f1f3f7;
  --text-dim:      rgba(241, 243, 247, .62);
  --text-faint:    rgba(241, 243, 247, .42);

  --bar:           rgba(44, 46, 54, .58);
  --glass-pill:    rgba(240, 242, 247, .14);

  /* Белая кнопка на графите заметна и без ореола; белое свечение
     читалось бы как засветка. */
  --glow:          none;

  --plus:          #9fd69a;
  --minus:         #e89a9a;
  --plus-soft:     rgba(159, 214, 154, .13);
  --minus-soft:    rgba(232, 154, 154, .13);
  --glass-edge:    rgba(240, 242, 247, .16);
}

* { box-sizing: border-box; }

/* Атрибут hidden сильнее display у классов.
 *
 * По умолчанию наоборот: браузер прячет hidden правилом с нулевым весом,
 * и любое `display: flex` из наших стилей его перебивает. Элемент
 * получает hidden, остаётся на экране, и в коде это выглядит как «строка
 * не сработала». Правило одно на всё приложение — дешевле, чем
 * вспоминать про него у каждого нового класса. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  /* Вертикально — пружина, как в любом приложении iPhone (с 1.190):
     дошёл до края — страница тянется дальше и отскакивает. Раньше здесь
     стояло none, и край был «глухим». Закрыться от этого Chart в
     Telegram не может: свайп вниз выключен (app.js, holdSwipes).
     Вбок пружины нет: там она только дёргает экран. */
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
}

body {
  transition: background .5s var(--ease);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  /* Нажатие срабатывает сразу.
   *
   * Без этого браузер на телефоне ждёт, не будет ли второго касания
   * (вдруг человек хочет увеличить страницу), и отдаёт нажатие на
   * треть секунды позже. Для кнопки «Записать» эта треть секунды
   * читается как «не нажалось». */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
  /* Поле утоплено в подложку, а не поднято над ней: карточка светится,
     поле должно уходить вглубь, иначе они спорят. */
  background: var(--field, rgba(0, 0, 0, .25));
  border: 1px solid var(--field-line, rgba(250, 216, 206, .12));
  border-radius: var(--r-sm);
  padding: 11px 13px;
  width: 100%;
  outline: none;
  transition: border-color .18s var(--ease);
}

input:focus, select:focus, textarea:focus { border-color: var(--accent); }

/* Дата и время на iPhone (с 1.183). Safari рисует их по-своему: поле не
   слушается width: 100% и вылезает за правый край окна, а текст стоит
   по центру. Снимаем системный вид — касание при этом по-прежнему
   открывает системный выбор даты. */
input[type="date"], input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align: left; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(250, 216, 206, .14);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(250, 216, 206, .24); background-clip: padding-box; }

/* Утилиты типографики */
/* Числа во всём приложении.
 *
 * Раньше здесь стоял моноширинный шрифт: он держит колонки сумм ровными,
 * чтобы при обновлении цифры не прыгали. Но у моноширинного каждая
 * цифра сидит в своей широкой ячейке, и на живых числах это читалось как
 * разрядка — «10 000.00» занимало полкарточки, а длинные суммы уезжали
 * на три строки.
 *
 * font-variant-numeric: tabular-nums делает ту же работу без него:
 * цифры одной ширины, но нормальной. Колонки по-прежнему не прыгают. */
.num {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.plus { color: var(--plus); }
.minus { color: var(--minus); }

.h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.h2 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.h3 { font-size: 15px; font-weight: 600; margin: 0; }
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* iPhone приближает экран, если у поля ввода шрифт меньше 16px (с 1.195). */
@supports (-webkit-touch-callout: none) {
  input, textarea, select { font-size: max(16px, 1em); }
}