/* lh-components.css — компонентный слой ЛК 2.0.
 * Собран build_components.py из components.py. Руками не править.
 *
 * Подключается ПОСЛЕ lh-tokens.css: здесь нет ни одного значения цвета,
 * только ссылки на токены темы. Поэтому кнопка сама работает в обеих темах.
 *
 * Как поменять кнопку сразу на всех экранах:
 *   цвет вида      → --lh-btn-<вид>-bg / -fg / -bd (ниже в :root);
 *   размер          → --lh-btn-h-m, --lh-btn-px-m и соседние;
 *   палитра целиком → palette.py, кнопка подхватит сама.
 */


:root {
	/* Размеры. Значение по умолчанию — M. */
	--lh-btn-h-l: 3.5rem;
	--lh-btn-px-l: 1.75rem;
	--lh-btn-fs-l: var(--lh-type-body-m);
	--lh-btn-line-l: var(--lh-line);
	--lh-btn-radius-l: 0.75rem;
	--lh-btn-h-m: 2.75rem;
	--lh-btn-px-m: 1.25rem;
	--lh-btn-fs-m: var(--lh-type-body-m);
	--lh-btn-line-m: var(--lh-line);
	--lh-btn-radius-m: 0.625rem;
	--lh-btn-h-s: 2.25rem;
	--lh-btn-px-s: 0.875rem;
	--lh-btn-fs-s: var(--lh-type-body-s);
	--lh-btn-line-s: var(--lh-line);
	--lh-btn-radius-s: 0.5rem;

	/* Общее для всех видов и размеров. */
	--lh-btn-gap: 0.5rem;         /* между значком и подписью */
	--lh-btn-py: 0.25rem;          /* запас сверху и снизу: виден только
	                                   когда подпись перенеслась на две строки */
	--lh-btn-border-w: 1.5px;     /* px: обводка — волосяная линия, растить её со шрифтом незачем */
	--lh-btn-weight: 500;         /* подпись — метка действия */
	--lh-btn-ring-w: 3px;         /* px: кольцо фокуса, та же причина что у обводки */
	--lh-btn-disabled-opacity: .45;
	/* Карточка. Размеры общие для обеих тем. */
	--lh-card-radius: 0.75rem;       /* базовый радиус */
	--lh-card-radius-l: 1rem;        /* модальное окно */
	--lh-card-pad-y: 1.25rem;        /* внутренний отступ по умолчанию */
	--lh-card-pad-x: 1.375rem;
	--lh-card-pad-y-s: 0.875rem;     /* плотные: событие, плашка */
	--lh-card-pad-x-s: 1.125rem;
	--lh-card-pad-y-l: 1.5rem;       /* просторные: подложка модального окна */
	--lh-card-pad-x-l: 1.5rem;
	--lh-card-pad-y-empty: 2.5rem;   /* пустое состояние */
	--lh-card-pad-x-empty: 1.5rem;
	--lh-card-pad-y-modal: 1.625rem; /* модальное окно (макет Гузели 06.10.2026) */
	--lh-card-pad-x-modal: 1.875rem;
	--lh-card-bd-w: 1px;             /* px: граница — волосяная линия */
	--lh-card-bar-w: 4px;            /* px: полоса акцентной карточки, та же роль, что у границы */
	--lh-card-bar-w-s: 3px;          /* px: полоса события и плашки */
	--lh-card-gap-tight: 0.25rem;    /* подпись к своему заголовку или числу */
	--lh-card-gap: 0.75rem;          /* между смысловыми строками карточки */
	--lh-card-gap-l: 1.25rem;        /* до подвала с кнопками */
	--lh-card-head-gap: 1rem;        /* между заголовком и бейджем */
	--lh-card-foot-gap: 0.625rem;    /* между кнопками в подвале */
	--lh-card-stack: 1.5rem;         /* между карточками в ленте: больше любого расстояния внутри */
	--lh-card-ring-w: 3px;           /* px: кольцо фокуса кликабельной карточки */
	--lh-card-badge-pad-y: 0.3125rem;
	--lh-card-badge-pad-x: 0.75rem;
	--lh-card-modal-max: 28.75rem;
	--lh-card-empty-text-max: 30.625rem; /* ширина строки в пустом состоянии */
	--lh-card-metric-min: 9.375rem;  /* узкий счётчик в ряду; меньше — колонка переносится */
	--lh-card-metric-gap: 1.5rem;    /* между счётчиками: подложки нет, разделяет воздух */
	--lh-card-metric-reserve: var(--lh-card-metric-gap); /* воздух справа от подписи: длинная подпись переносится, не добегая до края колонки, и расстояние до соседа остаётся вдвое больше зазора сетки */
	--lh-card-metric-pad-y: 0;       /* счётчик без фона и границы: контейнера нет */
	--lh-card-metric-num-gap: 1rem;  /* на десктопе между числом и подписью справа (Гузель, 08.10.2026) */
	--lh-card-feed-pad-y: 1.375rem;  /* лента кабинета (Гузель, 08.10.2026) */
	--lh-card-feed-pad-x: 1.625rem;
	--lh-card-feed-stack: 0.625rem;  /* между карточками ленты (Гузель, 08.10.2026) */
	--lh-card-glow-w: 3px;           /* px: свечение ленты под курсором — тень, как кольцо дня в календаре */
	/* Бейдж состояния и чип характеристики. */
	--lh-status-pad-y: 0.3125rem;  /* вертикальный отступ */
	--lh-status-pad-x: 0.75rem;  /* горизонтальный отступ */
	--lh-status-gap: 0.375rem;  /* между значком и подписью */

	/* Переключатель: размеры той же шкалы, что у кнопки. По умолчанию M. */
	--lh-seg-h-m: 2.75rem;
	--lh-seg-px-m: 1.25rem;
	--lh-seg-fs-m: var(--lh-type-body-m);
	--lh-seg-radius-m: 0.625rem;
	--lh-seg-h-s: 2.25rem;
	--lh-seg-px-s: 0.875rem;
	--lh-seg-fs-s: var(--lh-type-body-s);
	--lh-seg-radius-s: 0.5rem;
	--lh-seg-py: 0.25rem;          /* запас: виден, только когда подпись перенеслась */
	--lh-seg-border-w: 1px;      /* px: рамка и разделители — волосяная линия */
	--lh-seg-weight: 500;        /* подпись пункта — метка */
	--lh-seg-ring-w: 3px;        /* px: кольцо фокуса, как у кнопки */
	--lh-seg-disabled-opacity: .45;
	--lh-back-fs: var(--lh-type-body-s);
	--lh-back-weight: 500;       /* метка */
	--lh-link-underline-w: 1px;  /* px: подчёркивание — волосяная линия */
	--lh-link-underline-offset: 3px;

	/* Кольцо фокуса кнопки входа через сервис: её же синий, 30 %. Один на обе темы — цвет чужого бренда,
	   поэтому в палитре ЛК его нет, а объявление стоит рядом с самой кнопкой. */
	--lh-focus-ring-social: rgba(0, 112, 240, 0.3);

	/* Главная — btn/primary */
	--lh-btn-primary-bg: var(--lh-accent-strong);
	--lh-btn-primary-fg: var(--lh-accent-contrast);
	--lh-btn-primary-bd: transparent;
	--lh-btn-primary-bg-hover: var(--lh-accent-hover);
	--lh-btn-primary-fg-hover: var(--lh-accent-contrast);
	--lh-btn-primary-bd-hover: transparent;
	--lh-btn-primary-ring: var(--lh-focus-ring);

	/* Второстепенная — btn/secondary */
	--lh-btn-secondary-bg: transparent;
	--lh-btn-secondary-fg: var(--lh-fg-primary);
	--lh-btn-secondary-bd: var(--lh-fg-muted);
	--lh-btn-secondary-bg-hover: var(--lh-bg-surface-2);
	--lh-btn-secondary-fg-hover: var(--lh-fg-primary);
	--lh-btn-secondary-bd-hover: var(--lh-fg-primary);
	--lh-btn-secondary-ring: var(--lh-focus-ring);

	/* Тихая — btn/quiet */
	--lh-btn-quiet-bg: transparent;
	--lh-btn-quiet-fg: var(--lh-fg-muted);
	--lh-btn-quiet-bd: transparent;
	--lh-btn-quiet-bg-hover: var(--lh-bg-surface-2);
	--lh-btn-quiet-fg-hover: var(--lh-fg-primary);
	--lh-btn-quiet-bd-hover: transparent;
	--lh-btn-quiet-ring: var(--lh-focus-ring);

	/* Опасная — btn/danger */
	--lh-btn-danger-bg: transparent;
	--lh-btn-danger-fg: var(--lh-state-danger);
	--lh-btn-danger-bd: var(--lh-state-danger);
	--lh-btn-danger-bg-hover: var(--lh-state-danger);
	--lh-btn-danger-fg-hover: var(--lh-fg-inverse);
	--lh-btn-danger-bd-hover: var(--lh-state-danger);
	--lh-btn-danger-ring: var(--lh-focus-ring-danger);

	/* Предупреждающая — btn/warning */
	--lh-btn-warning-bg: transparent;
	--lh-btn-warning-fg: var(--lh-state-warning);
	--lh-btn-warning-bd: var(--lh-state-warning);
	--lh-btn-warning-bg-hover: var(--lh-state-warning);
	--lh-btn-warning-fg-hover: var(--lh-fg-inverse);
	--lh-btn-warning-bd-hover: var(--lh-state-warning);
	--lh-btn-warning-ring: var(--lh-focus-ring-warning);

	/* Подтверждающая — btn/success */
	--lh-btn-success-bg: var(--lh-state-success-soft);
	--lh-btn-success-fg: var(--lh-state-success);
	--lh-btn-success-bd: var(--lh-state-success);
	--lh-btn-success-bg-hover: var(--lh-state-success-soft);
	--lh-btn-success-fg-hover: var(--lh-state-success);
	--lh-btn-success-bd-hover: var(--lh-state-success);
	--lh-btn-success-ring: var(--lh-focus-ring-success);

	/* Вход через сервис — btn/social */
	--lh-btn-social-bg: #0070F0;
	--lh-btn-social-fg: #FFFFFF;
	--lh-btn-social-bd: transparent;
	--lh-btn-social-bg-hover: #005BBB;
	--lh-btn-social-fg-hover: #FFFFFF;
	--lh-btn-social-bd-hover: transparent;
	--lh-btn-social-ring: var(--lh-focus-ring-social);

	/* Карточка — card/* */
	--lh-card-bg: var(--lh-bg-surface);  /* фон карточки */
	--lh-card-bg-flat: var(--lh-bg-surface-2);  /* фон тихой карточки */
	--lh-card-bd: var(--lh-line-base);  /* граница */
	--lh-card-bd-hover: var(--lh-line-strong);  /* граница под курсором и полоса без тона */
	--lh-card-fg: var(--lh-fg-primary);  /* заголовок и основной текст */
	--lh-card-meta: var(--lh-fg-muted);  /* подпись, дата, уточнение */
	--lh-card-accent: var(--lh-accent-base);  /* полоса акцентной карточки */
	--lh-card-num: var(--lh-accent-strong);  /* число счётчика — один цвет на весь ряд */
	--lh-card-shadow: 0 2px 8px var(--lh-shadow);
	--lh-card-shadow-lift: 0 12px 32px var(--lh-shadow-lift);
	--lh-card-backdrop: var(--lh-backdrop);
	--lh-card-ring: var(--lh-focus-ring);
	--lh-card-rail: color-mix(in srgb, var(--lh-fg-muted) 50%, transparent);  /* полоса ленты */
	--lh-card-glow: color-mix(in srgb, var(--lh-accent-base) 30%, transparent);  /* свечение ленты под курсором */

	/* Переключатель — ссылки на палитру */
	--lh-seg-bg: var(--lh-bg-surface);
	--lh-seg-fg: var(--lh-fg-primary);
	--lh-seg-bd: var(--lh-line-strong);
	--lh-seg-bg-hover: var(--lh-bg-surface-2);
	--lh-seg-bg-on: var(--lh-accent-strong);
	--lh-seg-fg-on: var(--lh-accent-contrast);
	--lh-back-fg: var(--lh-fg-muted);
	--lh-hover-fg: var(--lh-accent-base);
}

/* Ссылки на палитру. Список один, но повторён в каждой области темы: var()
 * внутри объявления пользовательского свойства раскрывается там, где свойство
 * объявлено. Объяви мы его только в :root — кнопка в тёмной теме получила бы
 * светлые значения. Источник списка один — components.py. */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {

		/* Кольцо фокуса кнопки входа через сервис: её же синий, 30 %. Один на обе темы — цвет чужого бренда,
		   поэтому в палитре ЛК его нет, а объявление стоит рядом с самой кнопкой. */
		--lh-focus-ring-social: rgba(0, 112, 240, 0.3);

		/* Главная — btn/primary */
		--lh-btn-primary-bg: var(--lh-accent-strong);
		--lh-btn-primary-fg: var(--lh-accent-contrast);
		--lh-btn-primary-bd: transparent;
		--lh-btn-primary-bg-hover: var(--lh-accent-hover);
		--lh-btn-primary-fg-hover: var(--lh-accent-contrast);
		--lh-btn-primary-bd-hover: transparent;
		--lh-btn-primary-ring: var(--lh-focus-ring);

		/* Второстепенная — btn/secondary */
		--lh-btn-secondary-bg: transparent;
		--lh-btn-secondary-fg: var(--lh-fg-primary);
		--lh-btn-secondary-bd: var(--lh-fg-muted);
		--lh-btn-secondary-bg-hover: var(--lh-bg-surface-2);
		--lh-btn-secondary-fg-hover: var(--lh-fg-primary);
		--lh-btn-secondary-bd-hover: var(--lh-fg-primary);
		--lh-btn-secondary-ring: var(--lh-focus-ring);

		/* Тихая — btn/quiet */
		--lh-btn-quiet-bg: transparent;
		--lh-btn-quiet-fg: var(--lh-fg-muted);
		--lh-btn-quiet-bd: transparent;
		--lh-btn-quiet-bg-hover: var(--lh-bg-surface-2);
		--lh-btn-quiet-fg-hover: var(--lh-fg-primary);
		--lh-btn-quiet-bd-hover: transparent;
		--lh-btn-quiet-ring: var(--lh-focus-ring);

		/* Опасная — btn/danger */
		--lh-btn-danger-bg: transparent;
		--lh-btn-danger-fg: var(--lh-state-danger);
		--lh-btn-danger-bd: var(--lh-state-danger);
		--lh-btn-danger-bg-hover: var(--lh-state-danger);
		--lh-btn-danger-fg-hover: var(--lh-fg-inverse);
		--lh-btn-danger-bd-hover: var(--lh-state-danger);
		--lh-btn-danger-ring: var(--lh-focus-ring-danger);

		/* Предупреждающая — btn/warning */
		--lh-btn-warning-bg: transparent;
		--lh-btn-warning-fg: var(--lh-state-warning);
		--lh-btn-warning-bd: var(--lh-state-warning);
		--lh-btn-warning-bg-hover: var(--lh-state-warning);
		--lh-btn-warning-fg-hover: var(--lh-fg-inverse);
		--lh-btn-warning-bd-hover: var(--lh-state-warning);
		--lh-btn-warning-ring: var(--lh-focus-ring-warning);

		/* Подтверждающая — btn/success */
		--lh-btn-success-bg: var(--lh-state-success-soft);
		--lh-btn-success-fg: var(--lh-state-success);
		--lh-btn-success-bd: var(--lh-state-success);
		--lh-btn-success-bg-hover: var(--lh-state-success-soft);
		--lh-btn-success-fg-hover: var(--lh-state-success);
		--lh-btn-success-bd-hover: var(--lh-state-success);
		--lh-btn-success-ring: var(--lh-focus-ring-success);

		/* Вход через сервис — btn/social */
		--lh-btn-social-bg: #0070F0;
		--lh-btn-social-fg: #FFFFFF;
		--lh-btn-social-bd: transparent;
		--lh-btn-social-bg-hover: #005BBB;
		--lh-btn-social-fg-hover: #FFFFFF;
		--lh-btn-social-bd-hover: transparent;
		--lh-btn-social-ring: var(--lh-focus-ring-social);

		/* Карточка — card/* */
		--lh-card-bg: var(--lh-bg-surface);  /* фон карточки */
		--lh-card-bg-flat: var(--lh-bg-surface-2);  /* фон тихой карточки */
		--lh-card-bd: var(--lh-line-base);  /* граница */
		--lh-card-bd-hover: var(--lh-line-strong);  /* граница под курсором и полоса без тона */
		--lh-card-fg: var(--lh-fg-primary);  /* заголовок и основной текст */
		--lh-card-meta: var(--lh-fg-muted);  /* подпись, дата, уточнение */
		--lh-card-accent: var(--lh-accent-base);  /* полоса акцентной карточки */
		--lh-card-num: var(--lh-accent-strong);  /* число счётчика — один цвет на весь ряд */
		--lh-card-shadow: 0 2px 8px var(--lh-shadow);
		--lh-card-shadow-lift: 0 12px 32px var(--lh-shadow-lift);
		--lh-card-backdrop: var(--lh-backdrop);
		--lh-card-ring: var(--lh-focus-ring);
		--lh-card-rail: color-mix(in srgb, var(--lh-fg-muted) 50%, transparent);  /* полоса ленты */
		--lh-card-glow: color-mix(in srgb, var(--lh-accent-base) 30%, transparent);  /* свечение ленты под курсором */

		/* Переключатель — ссылки на палитру */
		--lh-seg-bg: var(--lh-bg-surface);
		--lh-seg-fg: var(--lh-fg-primary);
		--lh-seg-bd: var(--lh-line-strong);
		--lh-seg-bg-hover: var(--lh-bg-surface-2);
		--lh-seg-bg-on: var(--lh-accent-strong);
		--lh-seg-fg-on: var(--lh-accent-contrast);
		--lh-back-fg: var(--lh-fg-muted);
		--lh-hover-fg: var(--lh-accent-base);
	}
}

[data-theme='dark'] {

	/* Кольцо фокуса кнопки входа через сервис: её же синий, 30 %. Один на обе темы — цвет чужого бренда,
	   поэтому в палитре ЛК его нет, а объявление стоит рядом с самой кнопкой. */
	--lh-focus-ring-social: rgba(0, 112, 240, 0.3);

	/* Главная — btn/primary */
	--lh-btn-primary-bg: var(--lh-accent-strong);
	--lh-btn-primary-fg: var(--lh-accent-contrast);
	--lh-btn-primary-bd: transparent;
	--lh-btn-primary-bg-hover: var(--lh-accent-hover);
	--lh-btn-primary-fg-hover: var(--lh-accent-contrast);
	--lh-btn-primary-bd-hover: transparent;
	--lh-btn-primary-ring: var(--lh-focus-ring);

	/* Второстепенная — btn/secondary */
	--lh-btn-secondary-bg: transparent;
	--lh-btn-secondary-fg: var(--lh-fg-primary);
	--lh-btn-secondary-bd: var(--lh-fg-muted);
	--lh-btn-secondary-bg-hover: var(--lh-bg-surface-2);
	--lh-btn-secondary-fg-hover: var(--lh-fg-primary);
	--lh-btn-secondary-bd-hover: var(--lh-fg-primary);
	--lh-btn-secondary-ring: var(--lh-focus-ring);

	/* Тихая — btn/quiet */
	--lh-btn-quiet-bg: transparent;
	--lh-btn-quiet-fg: var(--lh-fg-muted);
	--lh-btn-quiet-bd: transparent;
	--lh-btn-quiet-bg-hover: var(--lh-bg-surface-2);
	--lh-btn-quiet-fg-hover: var(--lh-fg-primary);
	--lh-btn-quiet-bd-hover: transparent;
	--lh-btn-quiet-ring: var(--lh-focus-ring);

	/* Опасная — btn/danger */
	--lh-btn-danger-bg: transparent;
	--lh-btn-danger-fg: var(--lh-state-danger);
	--lh-btn-danger-bd: var(--lh-state-danger);
	--lh-btn-danger-bg-hover: var(--lh-state-danger);
	--lh-btn-danger-fg-hover: var(--lh-fg-inverse);
	--lh-btn-danger-bd-hover: var(--lh-state-danger);
	--lh-btn-danger-ring: var(--lh-focus-ring-danger);

	/* Предупреждающая — btn/warning */
	--lh-btn-warning-bg: transparent;
	--lh-btn-warning-fg: var(--lh-state-warning);
	--lh-btn-warning-bd: var(--lh-state-warning);
	--lh-btn-warning-bg-hover: var(--lh-state-warning);
	--lh-btn-warning-fg-hover: var(--lh-fg-inverse);
	--lh-btn-warning-bd-hover: var(--lh-state-warning);
	--lh-btn-warning-ring: var(--lh-focus-ring-warning);

	/* Подтверждающая — btn/success */
	--lh-btn-success-bg: var(--lh-state-success-soft);
	--lh-btn-success-fg: var(--lh-state-success);
	--lh-btn-success-bd: var(--lh-state-success);
	--lh-btn-success-bg-hover: var(--lh-state-success-soft);
	--lh-btn-success-fg-hover: var(--lh-state-success);
	--lh-btn-success-bd-hover: var(--lh-state-success);
	--lh-btn-success-ring: var(--lh-focus-ring-success);

	/* Вход через сервис — btn/social */
	--lh-btn-social-bg: #0070F0;
	--lh-btn-social-fg: #FFFFFF;
	--lh-btn-social-bd: transparent;
	--lh-btn-social-bg-hover: #005BBB;
	--lh-btn-social-fg-hover: #FFFFFF;
	--lh-btn-social-bd-hover: transparent;
	--lh-btn-social-ring: var(--lh-focus-ring-social);

	/* Карточка — card/* */
	--lh-card-bg: var(--lh-bg-surface);  /* фон карточки */
	--lh-card-bg-flat: var(--lh-bg-surface-2);  /* фон тихой карточки */
	--lh-card-bd: var(--lh-line-base);  /* граница */
	--lh-card-bd-hover: var(--lh-line-strong);  /* граница под курсором и полоса без тона */
	--lh-card-fg: var(--lh-fg-primary);  /* заголовок и основной текст */
	--lh-card-meta: var(--lh-fg-muted);  /* подпись, дата, уточнение */
	--lh-card-accent: var(--lh-accent-base);  /* полоса акцентной карточки */
	--lh-card-num: var(--lh-accent-strong);  /* число счётчика — один цвет на весь ряд */
	--lh-card-shadow: 0 2px 8px var(--lh-shadow);
	--lh-card-shadow-lift: 0 12px 32px var(--lh-shadow-lift);
	--lh-card-backdrop: var(--lh-backdrop);
	--lh-card-ring: var(--lh-focus-ring);
	--lh-card-rail: color-mix(in srgb, var(--lh-fg-muted) 50%, transparent);  /* полоса ленты */
	--lh-card-glow: color-mix(in srgb, var(--lh-accent-base) 30%, transparent);  /* свечение ленты под курсором */

	/* Переключатель — ссылки на палитру */
	--lh-seg-bg: var(--lh-bg-surface);
	--lh-seg-fg: var(--lh-fg-primary);
	--lh-seg-bd: var(--lh-line-strong);
	--lh-seg-bg-hover: var(--lh-bg-surface-2);
	--lh-seg-bg-on: var(--lh-accent-strong);
	--lh-seg-fg-on: var(--lh-accent-contrast);
	--lh-back-fg: var(--lh-fg-muted);
	--lh-hover-fg: var(--lh-accent-base);
}

/* ─── Кнопка ─────────────────────────────────────────────────────────────
 * Разметка: <button class="lh-btn lh-btn--primary">Добавить дело</button>
 * Ссылка, которая выглядит кнопкой: <a class="lh-btn lh-btn--secondary">…</a>
 * Размер по умолчанию M; L и S — модификаторами.
 */
.lh-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--lh-btn-gap);
	/* min-height, а не height: при увеличенном шрифте подпись переносится и
	   кнопка должна вырасти, а не обрезать текст. В обычном режиме высоту
	   держит тот же токен — вид не меняется. */
	min-height: var(--lh-btn-h-m);
	padding: var(--lh-btn-py) var(--lh-btn-px-m);
	max-width: 100%;
	border: var(--lh-btn-border-w) solid transparent;
	border-radius: var(--lh-btn-radius-m);
	font-family: var(--lh-font); font-size: var(--lh-btn-fs-m);
	font-weight: var(--lh-btn-weight); line-height: var(--lh-btn-line-m);
	/* Переносим подпись только когда места правда нет. nowrap выталкивал
	   «Войти через ВКонтакте» за край экрана при 200 % — WCAG 1.4.4. */
	text-align: center; text-wrap: balance;
	text-decoration: none; cursor: pointer;
	background: transparent; color: inherit;
	transition: background-color var(--lh-fast) var(--lh-ease),
	            color var(--lh-fast) var(--lh-ease),
	            border-color var(--lh-fast) var(--lh-ease);
}
.lh-btn:hover { text-decoration: none; }

.lh-btn--l { min-height: var(--lh-btn-h-l); padding: var(--lh-btn-py) var(--lh-btn-px-l);
             font-size: var(--lh-btn-fs-l); line-height: var(--lh-btn-line-l);
             border-radius: var(--lh-btn-radius-l); }
.lh-btn--s { min-height: var(--lh-btn-h-s); padding: var(--lh-btn-py) var(--lh-btn-px-s);
             font-size: var(--lh-btn-fs-s); line-height: var(--lh-btn-line-s);
             border-radius: var(--lh-btn-radius-s); }

/* На всю ширину — только явным модификатором. Ставится на мобильном у главной
   кнопки формы и у единственного действия на пустом экране. */
.lh-btn--block { width: 100%; }

/* Значок масштабируется от кегля: в размере S он тоже уменьшается. */
.lh-btn svg { width: 1.125em; height: 1.125em; flex: none; }

/* display:inline-flex сильнее браузерного [hidden]{display:none} —
   спрятанная скриптом кнопка иначе остаётся видимой. */
.lh-btn[hidden] { display: none; }


/* Главная — btn/primary */
.lh-btn--primary { background: var(--lh-btn-primary-bg); color: var(--lh-btn-primary-fg); border-color: var(--lh-btn-primary-bd); --lh-btn-ring: var(--lh-btn-primary-ring); }
.lh-btn--primary:hover:not([disabled]):not([aria-disabled="true"]),
.lh-btn--primary.is-hover,
.lh-btn--primary.is-active { background: var(--lh-btn-primary-bg-hover); color: var(--lh-btn-primary-fg-hover); border-color: var(--lh-btn-primary-bd-hover); }

/* Второстепенная — btn/secondary */
.lh-btn--secondary { background: var(--lh-btn-secondary-bg); color: var(--lh-btn-secondary-fg); border-color: var(--lh-btn-secondary-bd); --lh-btn-ring: var(--lh-btn-secondary-ring); }
.lh-btn--secondary:hover:not([disabled]):not([aria-disabled="true"]),
.lh-btn--secondary.is-hover,
.lh-btn--secondary.is-active { background: var(--lh-btn-secondary-bg-hover); color: var(--lh-btn-secondary-fg-hover); border-color: var(--lh-btn-secondary-bd-hover); }

/* Тихая — btn/quiet */
.lh-btn--quiet { background: var(--lh-btn-quiet-bg); color: var(--lh-btn-quiet-fg); border-color: var(--lh-btn-quiet-bd); --lh-btn-ring: var(--lh-btn-quiet-ring); }
.lh-btn--quiet:hover:not([disabled]):not([aria-disabled="true"]),
.lh-btn--quiet.is-hover,
.lh-btn--quiet.is-active { background: var(--lh-btn-quiet-bg-hover); color: var(--lh-btn-quiet-fg-hover); border-color: var(--lh-btn-quiet-bd-hover); }

/* Опасная — btn/danger */
.lh-btn--danger { background: var(--lh-btn-danger-bg); color: var(--lh-btn-danger-fg); border-color: var(--lh-btn-danger-bd); --lh-btn-ring: var(--lh-btn-danger-ring); }
.lh-btn--danger:hover:not([disabled]):not([aria-disabled="true"]),
.lh-btn--danger.is-hover,
.lh-btn--danger.is-active { background: var(--lh-btn-danger-bg-hover); color: var(--lh-btn-danger-fg-hover); border-color: var(--lh-btn-danger-bd-hover); }

/* Предупреждающая — btn/warning */
.lh-btn--warning { background: var(--lh-btn-warning-bg); color: var(--lh-btn-warning-fg); border-color: var(--lh-btn-warning-bd); --lh-btn-ring: var(--lh-btn-warning-ring); }
.lh-btn--warning:hover:not([disabled]):not([aria-disabled="true"]),
.lh-btn--warning.is-hover,
.lh-btn--warning.is-active { background: var(--lh-btn-warning-bg-hover); color: var(--lh-btn-warning-fg-hover); border-color: var(--lh-btn-warning-bd-hover); }

/* Подтверждающая — btn/success */
.lh-btn--success { background: var(--lh-btn-success-bg); color: var(--lh-btn-success-fg); border-color: var(--lh-btn-success-bd); --lh-btn-ring: var(--lh-btn-success-ring); }
.lh-btn--success:hover:not([disabled]):not([aria-disabled="true"]),
.lh-btn--success.is-hover,
.lh-btn--success.is-active { background: var(--lh-btn-success-bg-hover); color: var(--lh-btn-success-fg-hover); border-color: var(--lh-btn-success-bd-hover); }

/* Вход через сервис — btn/social */
.lh-btn--social { background: var(--lh-btn-social-bg); color: var(--lh-btn-social-fg); border-color: var(--lh-btn-social-bd); --lh-btn-ring: var(--lh-btn-social-ring); }
.lh-btn--social:hover:not([disabled]):not([aria-disabled="true"]),
.lh-btn--social.is-hover,
.lh-btn--social.is-active { background: var(--lh-btn-social-bg-hover); color: var(--lh-btn-social-fg-hover); border-color: var(--lh-btn-social-bd-hover); }

/* ─── Состояния, общие для всех видов ─── */

/* Нажатие: сдвиг на пиксель вниз. Цвет при нажатии тот же, что на наведении. */
.lh-btn:active:not([disabled]):not([aria-disabled="true"]),
.lh-btn.is-active { transform: translateY(1px); }

/* Фокус с клавиатуры. Без этой обводки кабинетом нельзя пользоваться без мыши.
   Цвет кольца принадлежит виду: --lh-btn-ring ставит класс вида (у опасной он
   красный), запасное значение — общее кольцо кабинета для кнопки без вида.
   Через свойство, а не отдельным правилом на вид: правило с тем же весом стоит
   ниже и сбросило бы outline-color обратно на общий. */
.lh-btn:focus-visible,
.lh-btn.is-focus { outline: var(--lh-btn-ring-w) solid
                            var(--lh-btn-ring, var(--lh-focus-ring));
                   outline-offset: 2px; }

/* Недоступна: видна, но не нажимается. Рядом обязательно текст, чего не хватает. */
.lh-btn[disabled],
.lh-btn[aria-disabled="true"],
.lh-btn.is-disabled { opacity: var(--lh-btn-disabled-opacity); cursor: default; }

/* Загрузка: ширина не меняется, клик не проходит, подпись говорит о процессе.
   Кнопку при этом НЕ гасим: приглушённый текст на заливке перестаёт проходить
   контраст, а пользователю в этот момент важнее всего прочитать, что идёт. */
.lh-btn[aria-busy="true"],
.lh-btn.is-busy { cursor: progress; pointer-events: none; }

.lh-btn__spin {
	width: 1em; height: 1em; flex: none; border-radius: 50%;
	border: 2px solid currentColor; border-top-color: transparent;
	animation: lh-btn-spin var(--lh-spin) var(--lh-linear) infinite;
}
@keyframes lh-btn-spin { to { transform: rotate(360deg); } }

/* .is-hover / .is-active / .is-focus / .is-disabled / .is-busy — для страницы
   кита и для состояний, которыми управляет скрипт. В обычной вёрстке
   пользуемся настоящими :hover, :focus-visible и атрибутами. */


/* ─── Мост со старой вёрсткой ЛК ─────────────────────────────────────────
 * Пока шаблоны не переведены на новые имена, старые классы получают
 * компонентные значения. Удалить после прохода по шаблонам — список мест
 * в components.py (BTN_LEGACY) и на странице кита.
 */
.lh-btn--ghost { background: var(--lh-btn-secondary-bg); color: var(--lh-btn-secondary-fg); border-color: var(--lh-btn-secondary-bd); }
.lh-btn--ghost:hover:not([disabled]) { background: var(--lh-btn-secondary-bg-hover); color: var(--lh-btn-secondary-fg-hover); border-color: var(--lh-btn-secondary-bd-hover); }
.lh-btn--done { background: var(--lh-btn-success-bg); color: var(--lh-btn-success-fg); border-color: var(--lh-btn-success-bd); }
.lh-btn--done:hover:not([disabled]) { background: var(--lh-btn-success-bg-hover); color: var(--lh-btn-success-fg-hover); border-color: var(--lh-btn-success-bd-hover); }
.lh-auth-btn--main { background: var(--lh-btn-primary-bg); color: var(--lh-btn-primary-fg); border-color: var(--lh-btn-primary-bd); }
.lh-auth-btn--main:hover:not([disabled]) { background: var(--lh-btn-primary-bg-hover); color: var(--lh-btn-primary-fg-hover); border-color: var(--lh-btn-primary-bd-hover); }
.lh-auth-btn--vk { background: var(--lh-btn-social-bg); color: var(--lh-btn-social-fg); border-color: var(--lh-btn-social-bd); }
.lh-auth-btn--vk:hover:not([disabled]) { background: var(--lh-btn-social-bg-hover); color: var(--lh-btn-social-fg-hover); border-color: var(--lh-btn-social-bd-hover); }
/* .lh-btn--primary у старой вёрстки совпадает с новым именем: отдельного правила не нужно. */

/* ─── Тон состояния ──────────────────────────────────────────────────────
 * Не принадлежит карточке: одни и те же два значения читают плашка, бейдж,
 * полоса события и число счётчика. Поэтому «перекрасить все предупреждения»
 * — это палитра, а не обход компонентов.
 *   <div class="lh-card lh-card--note lh-tone--warning">
 */
.lh-tone--info { --lh-tone-fg: var(--lh-state-info); --lh-tone-bg: var(--lh-state-info-soft); }  /* Информация — tone/info */
.lh-tone--success { --lh-tone-fg: var(--lh-state-success); --lh-tone-bg: var(--lh-state-success-soft); }  /* Успех — tone/success */
.lh-tone--warning { --lh-tone-fg: var(--lh-state-warning); --lh-tone-bg: var(--lh-state-warning-soft); }  /* Внимание — tone/warning */
.lh-tone--danger { --lh-tone-fg: var(--lh-state-danger); --lh-tone-bg: var(--lh-state-danger-soft); }  /* Ошибка — tone/danger */
.lh-tone--neutral { --lh-tone-fg: var(--lh-fg-muted); --lh-tone-bg: var(--lh-bg-surface-2); }  /* Нейтральный — tone/neutral */

/* ─── Бейдж состояния и чип характеристики ───
 * Бейдж читает тон; чип не читает его даже при ошибочно добавленном
 * lh-tone--*: так характеристика не станет тревогой случайно.
 */
.lh-badge,
.lh-chip {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--lh-status-gap); max-width: 100%; min-width: 0;
	padding: var(--lh-status-pad-y) var(--lh-status-pad-x);
	border-radius: 999rem;
	font: var(--lh-weight-head) var(--lh-type-micro)/var(--lh-line) var(--lh-font);
	text-align: center; text-wrap: balance; overflow-wrap: anywhere;
}
.lh-badge {
	color: var(--lh-tone-fg, var(--lh-fg-muted));
	background: var(--lh-tone-bg, var(--lh-bg-surface-2));
}
.lh-chip {
	color: var(--lh-fg-primary);
	background: var(--lh-bg-surface-2);
}


/* ─── Карточка ───────────────────────────────────────────────────────────
 * Разметка: <div class="lh-card"><p class="lh-card__title">…</p></div>
 * Вид:  lh-card--flat | --accent | --case | --event | --metric | --empty |
 *       --note | --modal
 * Тон:  lh-tone--info | --success | --warning | --danger | --neutral
 * Слоты: __head __title __meta __text __num __badge __foot
 */
.lh-card {
	display: block;
	background: var(--lh-card-bg);
	border: var(--lh-card-bd-w) solid var(--lh-card-bd);
	border-radius: var(--lh-card-radius);
	padding: var(--lh-card-pad-y) var(--lh-card-pad-x);
	color: var(--lh-card-fg);
	font-family: var(--lh-font);
	/* Номер дела «А40-118423/2026» — одно длинное слово: на узком экране с
	   увеличенным шрифтом переносить его нечем, и карточка вылезала за край.
	   break-word рвёт слово только когда оно целиком не помещается в строку. */
	overflow-wrap: break-word;
	text-decoration: none;
	transition: border-color var(--lh-fast) var(--lh-ease),
	            box-shadow var(--lh-fast) var(--lh-ease),
	            background-color var(--lh-fast) var(--lh-ease);
}

/* Расстояния внутри карточки задаёт сама карточка: слоты margin не носят,
   иначе каждый новый слот пришлось бы отдельно обнулять. Сброс идёт на любую
   глубину — заголовок с подписью часто лежат внутри шапки, и браузерный
   margin абзаца там разводил бы их на целую строку. */
/* Сброс пишется через :where() — у него нулевой вес. С :is() сброс оказывался
   специфичнее правила отступов ниже (0,1,1 против 0,1,0) и съедал зазор между
   заголовком и подписью: --lh-card-gap не доезжал до абзацев вообще. */
.lh-card :where(p, h1, h2, h3, h4, ul, ol) { margin: 0; }
.lh-card > * + *,
.lh-card__head > * > * + * { margin-top: var(--lh-card-gap); }

/* Два уровня расстояния, а не один. Подпись принадлежит своему заголовку или
   числу — это одна группа, зазор tight. Соседняя смысловая строка — другая
   группа, зазор gap. Пока уровень был один, «Дело А40-…» и «Арбитражный суд»
   стояли ровно так же далеко, как описание и дата: глаз не видел, что
   сгруппировано. */
.lh-card :where(.lh-card__title + .lh-card__meta,
                .lh-card__title + .lh-card__text,
                .lh-card__num + .lh-card__meta) {
	margin-top: var(--lh-card-gap-tight);
}
.lh-card__foot { margin-top: var(--lh-card-gap-l); }
.lh-card + .lh-card { margin-top: var(--lh-card-stack); }

.lh-card__head {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: var(--lh-card-head-gap);
}
/* Заголовок в шапке занимает свободное место и уступает его первым: место
   кончается — сначала переносится он, бейдж сжимается только после. */
.lh-card__head > .lh-card__title { flex: 1 1 auto; min-width: 0; }
.lh-card__title {
	font: var(--lh-weight-head) var(--lh-type-h3)/var(--lh-line) var(--lh-font);
	color: var(--lh-card-fg);
}
.lh-card__meta {
	font: var(--lh-weight-text) var(--lh-type-body-s)/var(--lh-line) var(--lh-font);
	color: var(--lh-card-meta);
}
.lh-card__text {
	font: var(--lh-weight-text) var(--lh-type-body-m)/var(--lh-line) var(--lh-font);
}
/* Число счётчика и номер дела — табличные цифры: колонка не скачет.
   Цвет один на весь ряд и тону не подчиняется: разноцветные числа рядом
   соревнуются между собой, а состояние уже сказано подписью и бейджем. */
.lh-card__num {
	font: var(--lh-weight-text) var(--lh-type-counter)/var(--lh-type-counter-line) var(--lh-font);
	font-variant-numeric: tabular-nums;
	color: var(--lh-card-num);
}
.lh-card--case .lh-card__title { font-variant-numeric: tabular-nums; }

/* Бейдж берёт цвет и подложку у тона; без тона — нейтральный. */
.lh-card__badge {
	/* flex-shrink 1, а не `flex: none`: при увеличенном шрифте несжимаемый
	   бейдж выталкивал шапку карточки за край экрана. Сжимается он последним —
	   заголовок рядом растущий и уступает место первым. */
	display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0;
	font: var(--lh-weight-head) var(--lh-type-micro)/var(--lh-line) var(--lh-font);
	padding: var(--lh-card-badge-pad-y) var(--lh-card-badge-pad-x);
	border-radius: 999rem;  /* «таблетка»: заведомо больше половины высоты */
	/* Без nowrap: при увеличенном шрифте «На контроле» выталкивал шапку
	   карточки за край экрана. Переносится только когда места нет. */
	max-width: 100%; text-wrap: balance;
	background: var(--lh-tone-bg, var(--lh-bg-surface-2));
	color: var(--lh-tone-fg, var(--lh-card-meta));
}
.lh-card__foot { display: flex; flex-wrap: wrap; align-items: center;
                 gap: var(--lh-card-foot-gap); }


/* Тихая — card/flat */
.lh-card--flat { background: var(--lh-card-bg-flat); border-color: transparent; }

/* Акцентная — card/accent */
.lh-card--accent { border-left: var(--lh-card-bar-w) solid var(--lh-card-accent); }

/* Дело — card/case. Кликается целиком: ставится на тег <a>. */
.lh-card--case { box-shadow: var(--lh-card-shadow); }
.lh-card--case:hover, .lh-card--case.is-hover {
	border-color: var(--lh-card-bd-hover); box-shadow: var(--lh-card-shadow-lift);
}
/* Кольцо фокуса — как у кнопки: без него по списку дел нельзя идти клавишей Tab. */
.lh-card--case:focus-visible, .lh-card--case.is-focus {
	outline: var(--lh-card-ring-w) solid var(--lh-card-ring); outline-offset: 2px;
}

/* Событие — card/event. Полоса слева кодирует состояние, цвет даёт тон. */
.lh-card--event {
	padding: var(--lh-card-pad-y-s) var(--lh-card-pad-x-s);
	border-left: var(--lh-card-bar-w-s) solid var(--lh-tone-fg, var(--lh-card-bd-hover));
}
/* В плотных видах заголовок на ступень ниже: строка ленты и плашка не спорят
   с заголовком самого экрана. Ступень берётся из шкалы, а не пишется числом. */
.lh-card--event .lh-card__title,
.lh-card--note .lh-card__title { font-size: var(--lh-type-body-m); }

/* Счётчик — card/metric. Ни фона, ни границы: в верхнем ряду Пульса рамки
   делят экран на коробки раньше, чем пользователь прочёл числа. Держит ряд
   контейнер .lh-card-metrics — колонки равной ширины и равной высоты, поэтому
   «одинаковый размер» не зависит от длины подписи. */
.lh-card--metric {
	background: transparent;
	border-color: transparent;
	padding: var(--lh-card-metric-pad-y) 0;
}
.lh-card-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--lh-card-metric-min), 1fr));
	grid-auto-rows: 1fr;  /* на узком экране ряд переносится — вторая строка равна первой */
	gap: var(--lh-card-metric-gap);
	align-items: stretch;
}
/* Карточки в ряду стоят рядом, а не друг под другом: общий отступ ленты
   (.lh-card + .lh-card) здесь только сдвинул бы вторую колонку вниз. */
.lh-card-metrics > .lh-card + .lh-card { margin-top: 0; }
/* Подпись счётчика не добегает до края своей колонки. Без запаса длинная
   подпись («срок на исходе, осталось 3 дня») занимала колонку целиком, между
   ней и подписью соседа оставался только зазор сетки — и ряд читался одной
   строкой текста, а не четырьмя счётчиками. Запас равен зазору, то есть
   расстояние между соседями всегда вдвое больше внутреннего. */
.lh-card--metric .lh-card__meta {
	max-width: calc(100% - var(--lh-card-metric-reserve));
	text-wrap: balance;  /* перенос делит подпись пополам, а не оставляет хвост */
}

/* На десктопе число слева, подпись справа (Гузель, 08.10.2026): счётчик
   читается одной строкой «286 дел на контроле», ряд ниже на треть.
   На планшете и телефоне колонка уже — подпись снова под числом. */
@media (min-width: 1025px) {
	.lh-card--metric {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--lh-card-metric-num-gap);
	}
	.lh-card--metric > .lh-card__num + .lh-card__meta { margin-top: 0; }
}

/* Плашка — card/note. Подложка и полоса из тона, границы нет. */
.lh-card--note {
	padding: var(--lh-card-pad-y-s) var(--lh-card-pad-x-s);
	background: var(--lh-tone-bg, var(--lh-card-bg-flat));
	border-color: transparent;
	border-left: var(--lh-card-bar-w-s) solid var(--lh-tone-fg, var(--lh-card-bd-hover));
}
/* На цветной подложке подпись не приглушается: fg/muted даёт на тонах
   4.19–4.49 при норме 4.5. Иерархию внутри плашки держит кегль. */
.lh-card--note .lh-card__meta { color: var(--lh-card-fg); }

/* Пустое состояние — card/empty. Обязательно с действием в подвале.
   Расстояния по макету Гузели 06.10.2026: подпись держится ближе к
   заголовку (4 px), а кнопка отходит заметно дальше (22 px) — пауза перед
   действием, а не ровная лесенка. Переопределяем токены, а не правила. */
.lh-card--empty {
	--lh-card-gap-tight: 0.25rem;
	--lh-card-gap-l: 1.375rem;
	text-align: center;
	padding: var(--lh-card-pad-y-empty) var(--lh-card-pad-x-empty);
}
.lh-card--empty .lh-card__title { font-size: var(--lh-type-h2); }
.lh-card--empty .lh-card__text { color: var(--lh-card-meta);
                                 max-width: var(--lh-card-empty-text-max);
                                 margin-left: auto; margin-right: auto; }
.lh-card--empty .lh-card__foot { justify-content: center; }

/* Модальное окно — card/modal. Подложка — отдельный элемент вокруг.
   Границы нет: окно отрывает от страницы тень, рамка поверх неё только
   утяжеляет (макет Гузели 06.10.2026). */
.lh-card--modal {
	/* Зазор до подписи — точное значение из макета Гузели 06.10.2026. Правило
	   близости проверяется пропорцией, а не числом: 2 против 18 — разница в
	   девять раз, группировка читается. */
	--lh-card-gap-tight: 0.125rem;
	--lh-card-gap-l: 1.125rem;
	border: none;
	border-radius: var(--lh-card-radius-l);
	padding: var(--lh-card-pad-y-modal) var(--lh-card-pad-x-modal);
	box-shadow: var(--lh-card-shadow-lift);
	max-width: var(--lh-card-modal-max); margin-inline: auto;
}
.lh-card-backdrop {
	background: var(--lh-card-backdrop);
	padding: var(--lh-card-pad-y-l) var(--lh-card-pad-x-l);
}

/* Мобильный: отступ уменьшается сам — отдельного класса не нужно (правило
   из data/design/cards.md). Меняем токены, а не каждый вид. */
/* Брейкпоинт — в px: он решает, что перед нами телефон, а не насколько крупно
   пользователь читает (data/design/units.md). Сами отступы внутри — в rem. */
@media (max-width: 600px) {
	:root {
		--lh-card-pad-y: 1rem;
		--lh-card-pad-x: 1rem;
		--lh-card-pad-y-l: 1rem;
		--lh-card-pad-x-l: 1rem;
		--lh-card-pad-y-modal: 1.25rem;
		--lh-card-pad-x-modal: 1rem;
		--lh-card-pad-x-s: 0.875rem;
		--lh-card-pad-y-empty: 2rem;
		--lh-card-pad-x-empty: 1rem;
		--lh-card-metric-gap: 1rem;
		--lh-card-metric-min: 7.5rem;
		--lh-card-gap-l: 1rem;
		--lh-card-feed-pad-y: 1rem;
		--lh-card-feed-pad-x: 1rem;
		/* Отступ карточки уменьшился до 16 — вслед за ним уменьшается и зазор
		   до подвала, иначе внутреннее расстояние станет больше отступа.
		   Расстояние между карточками не трогаем: 24 должны оставаться больше
		   самого большого внутреннего зазора (22 у пустого состояния), иначе
		   лента на телефоне снова слипнется. */
	}
}


/* ─── Лента ─────────────────────────────────────────────────────────────
 * card/feed — карточка ленты кабинета: дело, находка, жалоба, заседание,
 * блок карточки дела (Гузель, 08–09.10.2026). Заливка bg/surface, границы
 * нет, слева полоса 3 px fg/muted 50 %, радиус 12, отступ 22/26 (16 на
 * телефоне), между карточками 10.
 *
 * Вид самостоятельный: фон, полосу, радиус и отступ задаёт сам, поэтому в
 * кабинете ставится без базового .lh-card — там под этим именем пока живёт
 * старая карточка выдачи поиска.
 *
 * Кликабельная — плюс .lh-card--link: на десктопе под курсором зелёное
 * свечение снаружи рамки, полоса на это время прозрачна (Гузель,
 * 09.10.2026). Толщина границы та же — текст не сдвигается; свечение —
 * тень, соседей не толкает. На планшете и телефоне наведения нет: после
 * касания свечение висело бы на карточке.
 * Цвет полосы по смыслу (заседание, подписка) экран меняет одним
 * border-left-color — вид от этого не меняется.
 *   <article class="lh-card--feed lh-card--link">…</article>
 */
.lh-card--feed {
	padding: var(--lh-card-feed-pad-y) var(--lh-card-feed-pad-x);
	background: var(--lh-card-bg);
	border: 0;
	border-left: var(--lh-card-bar-w-s) solid var(--lh-card-rail);
	border-radius: var(--lh-card-radius);
	box-shadow: none;
	overflow-wrap: break-word;
}
.lh-card--feed + .lh-card--feed { margin-top: var(--lh-card-feed-stack); }
/* Фон под курсором и после касания не меняется ни на одной ширине: старые
   правила списков кабинета делали его прозрачным, и карточка «проваливалась»
   в фон страницы. */
.lh-card--feed:hover { background: var(--lh-card-bg); }
.lh-card--link { transition: box-shadow var(--lh-fast) var(--lh-ease); }
@media (min-width: 1025px) {
	.lh-card--feed.lh-card--link:hover {
		border-left-color: transparent;
		box-shadow: 0 0 0 var(--lh-card-glow-w) var(--lh-card-glow);
	}
}
/* ─── конец: Лента ─── */


/* ─── Переключатель ──────────────────────────────────────────────────────
 * Слитная полоса (Гузель, 09.10.2026): один выбор из 2–5 коротких значений.
 * Разметка:
 *   <div class="lh-seg lh-seg--s" role="group" aria-label="Период">
 *     <a class="lh-seg__item" href="?days=1" aria-current="true">сутки</a>
 *     <a class="lh-seg__item" href="?days=3">3 дня</a>
 *   </div>
 * Без перехода — <button class="lh-seg__item" aria-pressed="true">.
 * Размер по умолчанию M, S — модификатором. Высота полосы с рамкой равна
 * высоте кнопки того же размера: в одном ряду они стоят вровень.
 */
.lh-seg {
	--lh-seg-h: var(--lh-seg-h-m);
	--lh-seg-px: var(--lh-seg-px-m);
	--lh-seg-fs: var(--lh-seg-fs-m);
	--lh-seg-radius: var(--lh-seg-radius-m);
	display: inline-flex; max-width: 100%;
	border: var(--lh-seg-border-w) solid var(--lh-seg-bd);
	border-radius: var(--lh-seg-radius);
	background: var(--lh-seg-bg);
	/* Без overflow: hidden — он срезал бы кольцо фокуса. Скругление крайних
	   пунктов задано им самим. */
}
.lh-seg--s {
	--lh-seg-h: var(--lh-seg-h-s);
	--lh-seg-px: var(--lh-seg-px-s);
	--lh-seg-fs: var(--lh-seg-fs-s);
	--lh-seg-radius: var(--lh-seg-radius-s);
}
.lh-seg__item {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 0;
	/* min-height, а не height: при крупном шрифте подпись переносится и пункт
	   растёт. Рамка полосы входит в высоту кнопки, поэтому вычитаем её. */
	min-height: calc(var(--lh-seg-h) - 2 * var(--lh-seg-border-w));
	padding: var(--lh-seg-py) var(--lh-seg-px);
	margin: 0; border: 0;
	border-left: var(--lh-seg-border-w) solid var(--lh-seg-bd);
	border-radius: 0;
	font-family: var(--lh-font); font-size: var(--lh-seg-fs);
	font-weight: var(--lh-seg-weight); line-height: var(--lh-line);
	text-align: center; text-wrap: balance; text-decoration: none;
	color: var(--lh-seg-fg); background: transparent; cursor: pointer;
	transition: background-color var(--lh-fast) var(--lh-ease),
	            color var(--lh-fast) var(--lh-ease);
}
.lh-seg__item:first-child {
	border-left: 0;
	border-radius: calc(var(--lh-seg-radius) - var(--lh-seg-border-w)) 0 0
	               calc(var(--lh-seg-radius) - var(--lh-seg-border-w));
}
.lh-seg__item:last-child {
	border-radius: 0 calc(var(--lh-seg-radius) - var(--lh-seg-border-w))
	               calc(var(--lh-seg-radius) - var(--lh-seg-border-w)) 0;
}
.lh-seg__item:only-child { border-radius: calc(var(--lh-seg-radius) - var(--lh-seg-border-w)); }

.lh-seg__item:hover { text-decoration: none; color: var(--lh-seg-fg); }
.lh-seg__item:hover:not([aria-current="true"]):not([aria-pressed="true"]):not([aria-disabled="true"]),
.lh-seg__item.is-hover { background: var(--lh-seg-bg-hover); }

/* Выбранный: залит целиком, вместе со своим разделителем и разделителем
   соседа справа, — иначе заливка читается рамкой с тонкими полосками. */
.lh-seg__item[aria-current="true"],
.lh-seg__item[aria-pressed="true"],
.lh-seg__item.is-on {
	background: var(--lh-seg-bg-on); color: var(--lh-seg-fg-on);
	border-left-color: var(--lh-seg-bg-on);
}
.lh-seg__item[aria-current="true"] + .lh-seg__item,
.lh-seg__item[aria-pressed="true"] + .lh-seg__item,
.lh-seg__item.is-on + .lh-seg__item { border-left-color: var(--lh-seg-bg-on); }

/* Фокус с клавиатуры — общее кольцо кабинета; поверх соседей. */
.lh-seg__item:focus-visible,
.lh-seg__item.is-focus {
	z-index: 1;
	outline: var(--lh-seg-ring-w) solid var(--lh-focus-ring);
	outline-offset: 2px;
}
.lh-seg__item:focus:not(:focus-visible) { outline: none; }

.lh-seg__item[aria-disabled="true"],
.lh-seg__item.is-disabled { opacity: var(--lh-seg-disabled-opacity); cursor: default; }

/* На всю ширину — только явным модификатором: пункты делят строку поровну.
   Ширину пункта здесь задаёт строка, а не отступ, поэтому боковой отступ —
   наименьший из шкалы: иначе четыре пункта размера M не помещаются в 390 px
   и «неделя» вылезает за свой пункт. Высота и кегль остаются своего размера. */
.lh-seg--block { display: flex; width: 100%; --lh-seg-px: var(--lh-seg-px-s); }
.lh-seg--block .lh-seg__item { flex: 1 1 0; }

.lh-seg[hidden] { display: none; }
/* ─── конец: Переключатель ─── */


/* ─── Ссылка «назад» ───────────────────────────────────────────────────
 * «← Пульс», «← Мои дела», «← Календарь» (Гузель, 13.10.2026). Первая
 * строка над h1, подпись — раздел, откуда пришли. В покое серая метка без
 * подчёркивания; под курсором — как «Весь календарь»: зелёный текст и
 * зелёное подчёркивание. Цвет наведения --lh-hover-fg общий для всех
 * ссылок-переходов экрана.
 *   <a class="lh-back" href="/observe_user/ui/?days=3&back=1">← Пульс</a>
 */
.lh-back {
	display: inline-flex;
	align-items: center;
	color: var(--lh-back-fg);
	font-family: var(--lh-font);
	font-size: var(--lh-back-fs);
	font-weight: var(--lh-back-weight);
	line-height: var(--lh-line);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: var(--lh-link-underline-w);
	text-underline-offset: var(--lh-link-underline-offset);
	transition: color var(--lh-fast) var(--lh-ease), text-decoration-color var(--lh-fast) var(--lh-ease);
}
.lh-back:hover,
.lh-back.is-hover { color: var(--lh-hover-fg); text-decoration-color: currentColor; }
.lh-back:focus-visible,
.lh-back.is-focus { outline: 3px solid var(--lh-focus-ring); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .lh-back { transition: none; } }
/* ─── конец: Ссылка «назад» ─── */