/* ==========================================================================
   Сервис-деск — таблица стилей
   --------------------------------------------------------------------------
   Значения перенесены из макетов «UI-система», «Очередь задач»,
   «Карточка задачи» и «Создание задачи»: цвета, размеры, отступы, радиусы.
   В макетах они заданы инлайном; здесь собраны в токены и семантические
   классы, чтобы правило задавалось один раз.
   ========================================================================== */

:root {
  color-scheme: light;
  --disabled-surface: #f7f8fa;
  --footer-border: #d8dee5;
  --danger: #a3242b;
  --error-border: #e6c9c4;
  --error-surface: #fdf3f1;
  --error-text: #8a2d22;
  --detail-border: #c6d0dc;
  --warning-border: #e0cba6;
  --warning-surface: #fdf8ee;
  --timeline-border: #a8b1bc;
  --timeline-line: #d3d9e0;
  --subtle-border: #dde2e8;
  --accent-border: #b9cdf0;
  --rejected-text: #9b2f1e;
  --rejected-dot: #c2412d;
  --on-accent: #fff;
  --button-accent: #1e50b8;
  --button-accent-press: #17408f;

  /* Поверхности */
  --surface: #ffffff;
  --surface-muted: #fafbfc;
  --surface-sidebar: #fcfcfd;
  --window: #f2f4f6;

  /* Линии */
  --border: #d4dae1;
  --border-card: #d7dde4;
  --border-inner: #e4e8ed;
  --row-divider: #dfe4ea;
  --field-border: #bfc9d5;
  --field-border-hover: #98a5b5;

  /* Кнопка обязана читаться как кнопка: у неё своя поверхность, своя рамка
     и свой цвет текста, а не цвет фона страницы с еле заметной обводкой. */
  --control-surface: #f1f4f8;
  --control-border: #aab6c4;
  --control-text: #16202c;

  /* Текст */
  --text: #10151b;
  --text-table: #1d2530;
  --text-secondary: #3d4754;
  --text-muted: #525c69;
  --text-meta: #626c79;
  --text-placeholder: #78828f;
  --text-disabled: #8a939e;
  --separator: #b7bfc9;

  /* Акцент */
  --accent: #1e50b8;
  --accent-press: #17408f;
  --accent-soft: #eaf0fb;
  --focus-ring: #9fbbea;

  /* Состояния строки */
  --row-hover: #f8fafc;
  --row-selected: #f5f8fd;
  --control-hover: #e3e8ee;
  --nav-hover: #f1f4f7;

  /* Один цвет обозначает рабочий день; длительность написана в клетке. */
  --shift-long: #dce5ee;
  --shift-mid: #dce5ee;
  --shift-short: #dce5ee;
  --shift-range: #dce5ee;
  --thin-surface: #fdf1dd;
  --thin-text: #8a5200;
  --ok: #1c6e36;

  /* Статусы: точка и подпись */
  --dot-active: #c77a05;
  --text-active: #8a5200;
  --dot-delivered: #12857a;
  --text-delivered: #0e6b5e;
  --dot-progress: #2c6bd6;
  --text-progress: #1e50b8;
  --dot-completed: #2a8a52;
  --text-completed: #1d6b3d;
  --dot-snoozed: #8a93a0;
  --text-snoozed: #4e5866;

  /* Маршрут */
  --route-done: #1e50b8;
  --route-todo: #e4e8ed;

  /* Размеры каркаса */
  /* Тёмная палитра. Значения стоят здесь, а не в самих блоках темы:
     тёмная тема задаётся дважды — по выбору (`data-theme="dark"`) и по
     системной настройке (`prefers-color-scheme`), — и пока цвета были
     выписаны в обоих, правка контраста в одном месте расходилась с другим. */
  --d-surface: #171e28;
  --d-surface-muted: #1b2430;
  --d-surface-sidebar: #141b24;
  --d-window: #10161e;
  --d-border: #415063;
  --d-border-card: #415063;
  --d-border-inner: #323f4e;
  --d-row-divider: #364457;
  --d-field-border: #6c7f97;
  --d-field-border-hover: #8b9db4;
  --d-text: #eef2f7;
  --d-text-table: #e0e7f0;
  --d-text-secondary: #c3cedc;
  --d-text-muted: #b6c4d5;
  --d-text-meta: #aab9cc;
  --d-text-placeholder: #97a8bc;
  --d-text-disabled: #8292a6;
  --d-separator: #718299;
  --d-accent: #91baff;
  --d-accent-press: #bbd4ff;
  --d-accent-soft: #263957;
  --d-focus-ring: #a7c9ff;
  --d-row-hover: #202c3b;
  --d-row-selected: #233550;
  --d-control-hover: #33425a;
  --d-control-surface: #232f3f;
  --d-control-border: #6c7f97;
  --d-control-text: #eaf1f9;
  --d-nav-hover: #253244;
  --d-shift-long: #314255;
  --d-shift-mid: #314255;
  --d-shift-short: #314255;
  --d-shift-range: #314255;
  --d-thin-surface: #4a3a1c;
  --d-thin-text: #f3bf68;
  --d-ok: #7fd394;

  --d-dot-active: #efb24b;
  --d-text-active: #f3bf68;
  --d-dot-delivered: #55cbbb;
  --d-text-delivered: #7bdccb;
  --d-dot-progress: #78aaff;
  --d-text-progress: #91baff;
  --d-dot-completed: #65cf8b;
  --d-text-completed: #86dda5;
  --d-dot-snoozed: #9ba9bb;
  --d-text-snoozed: #bdc8d6;
  --d-route-done: #91baff;
  --d-route-todo: #3b485b;
  --d-disabled-surface: #242d3a;
  --d-footer-border: #536276;
  --d-danger: #ff9fa5;
  --d-error-border: #804947;
  --d-error-surface: #392427;
  --d-error-text: #ffb1a7;
  --d-detail-border: #4b5d74;
  --d-warning-border: #78603a;
  --d-warning-surface: #342d20;
  --d-timeline-border: #8192a8;
  --d-timeline-line: #48586c;
  --d-subtle-border: #3d4b5d;
  --d-accent-border: #567caf;
  --d-rejected-text: #ffa69a;
  --d-rejected-dot: #ee8273;
  --d-button-accent: #285fbd;
  --d-button-accent-press: #3470d4;

  --sidebar-width: 216px;
  /* Таблица не растягивается на всю ширину монитора: на широком экране
     колонки разъезжаются, между текстом задачи и сроком появляется пустота,
     и глаз ходит через неё впустую. */
  --content-max: 1560px;
  --header-height: 60px;
  --tabs-height: 46px;
  --colhead-height: 34px;
  --row-height: 64px;
  --footer-height: 40px;
  --gutter: 20px;
  --radius: 5px;
  --radius-card: 6px;

  /* Колонки очереди в табличном виде. Статуса среди них нет: вкладка уже
     задаёт его, и колонка повторяла одно слово во всех строках. У колонки
     задачи есть предел: иначе она забирает весь остаток ширины, автор и
     возраст улетают к правому краю, а между ними остаётся пустота. */
  --cols: 196px minmax(0, 620px) 120px 96px 210px;

  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
}

/* Тёмная и контрастная делят одну раскладку токенов; ниже контрастная
   переопределяет те из них, ради которых её и выбирают. */
:root[data-theme="dark"],
:root[data-theme="contrast"] {
  color-scheme: dark;
  --surface: var(--d-surface);
  --surface-muted: var(--d-surface-muted);
  --surface-sidebar: var(--d-surface-sidebar);
  --window: var(--d-window);
  --border: var(--d-border);
  --border-card: var(--d-border-card);
  --border-inner: var(--d-border-inner);
  --row-divider: var(--d-row-divider);
  --field-border: var(--d-field-border);
  --field-border-hover: var(--d-field-border-hover);
  --text: var(--d-text);
  --text-table: var(--d-text-table);
  --text-secondary: var(--d-text-secondary);
  --text-muted: var(--d-text-muted);
  --text-meta: var(--d-text-meta);
  --text-placeholder: var(--d-text-placeholder);
  --text-disabled: var(--d-text-disabled);
  --separator: var(--d-separator);
  --accent: var(--d-accent);
  --accent-press: var(--d-accent-press);
  --accent-soft: var(--d-accent-soft);
  --focus-ring: var(--d-focus-ring);
  --row-hover: var(--d-row-hover);
  --row-selected: var(--d-row-selected);
  --control-hover: var(--d-control-hover);
  --control-surface: var(--d-control-surface);
  --control-border: var(--d-control-border);
  --control-text: var(--d-control-text);
  --nav-hover: var(--d-nav-hover);
  --shift-long: var(--d-shift-long);
  --shift-mid: var(--d-shift-mid);
  --shift-short: var(--d-shift-short);
  --shift-range: var(--d-shift-range);
  --thin-surface: var(--d-thin-surface);
  --thin-text: var(--d-thin-text);
  --ok: var(--d-ok);
  --dot-active: var(--d-dot-active);
  --text-active: var(--d-text-active);
  --dot-delivered: var(--d-dot-delivered);
  --text-delivered: var(--d-text-delivered);
  --dot-progress: var(--d-dot-progress);
  --text-progress: var(--d-text-progress);
  --dot-completed: var(--d-dot-completed);
  --text-completed: var(--d-text-completed);
  --dot-snoozed: var(--d-dot-snoozed);
  --text-snoozed: var(--d-text-snoozed);
  --route-done: var(--d-route-done);
  --route-todo: var(--d-route-todo);
  --disabled-surface: var(--d-disabled-surface);
  --footer-border: var(--d-footer-border);
  --danger: var(--d-danger);
  --error-border: var(--d-error-border);
  --error-surface: var(--d-error-surface);
  --error-text: var(--d-error-text);
  --detail-border: var(--d-detail-border);
  --warning-border: var(--d-warning-border);
  --warning-surface: var(--d-warning-surface);
  --timeline-border: var(--d-timeline-border);
  --timeline-line: var(--d-timeline-line);
  --subtle-border: var(--d-subtle-border);
  --accent-border: var(--d-accent-border);
  --rejected-text: var(--d-rejected-text);
  --rejected-dot: var(--d-rejected-dot);
  --button-accent: var(--d-button-accent);
  --button-accent-press: var(--d-button-accent-press);
}

/* --------------------------------------------------------------------------
   Контрастная схема

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

:root[data-theme="contrast"] {
  --window: #05080c;
  --surface: #0d131a;
  --surface-muted: #131b25;
  --surface-sidebar: #090e14;

  --border: #61728a;
  --border-card: #61728a;
  --border-inner: #4a5a6d;
  --row-divider: #4a5a6d;
  --field-border: #8fa2b9;
  --field-border-hover: #b3c3d6;

  --text: #ffffff;
  --text-table: #f3f7fb;
  --text-secondary: #dfe8f2;
  --text-muted: #c8d5e3;
  --text-meta: #bccadb;
  --text-placeholder: #b0bfd1;
  --separator: #8fa2b9;

  --control-surface: #1b2532;
  --control-border: #8fa2b9;
  --control-text: #ffffff;
  --control-hover: #2a3a4e;

  --row-hover: #1a2634;
  --row-selected: #223349;
  --accent: #a9c9ff;
  --accent-press: #d3e3ff;
  --accent-border: #7ea3d8;
  --button-accent: #2f6fdd;
  --button-accent-press: #4a86f0;
  /* Жёлтая рамка фокуса видна на любом из этих фонов. */
  --focus-ring: #ffd166;

  --shift-long: #3b5167;
  --shift-mid: #3b5167;
  --shift-short: #3b5167;
  --shift-range: #3b5167;
  --thin-surface: #5d4822;
  --thin-text: #ffcf85;
  --ok: #8ff0a4;

  --dot-active: #ffc46b;
  --text-active: #ffcf85;
  --dot-delivered: #72e0cf;
  --text-delivered: #8fe9d9;
  --dot-progress: #9dc0ff;
  --text-progress: #b3ceff;
  --dot-completed: #7fe0a3;
  --text-completed: #97e8b5;
  --dot-snoozed: #b6c4d5;
  --text-snoozed: #cdd8e5;
  --route-done: #a9c9ff;
  --route-todo: #44546a;
}

/* «Классическая» — прежний вид, и светлый он или тёмный, решает система. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :root[data-theme="classic"] {
    color-scheme: dark;
    --surface: var(--d-surface);
    --surface-muted: var(--d-surface-muted);
    --surface-sidebar: var(--d-surface-sidebar);
    --window: var(--d-window);
    --border: var(--d-border);
    --border-card: var(--d-border-card);
    --border-inner: var(--d-border-inner);
    --row-divider: var(--d-row-divider);
    --field-border: var(--d-field-border);
    --field-border-hover: var(--d-field-border-hover);
    --text: var(--d-text);
    --text-table: var(--d-text-table);
    --text-secondary: var(--d-text-secondary);
    --text-muted: var(--d-text-muted);
    --text-meta: var(--d-text-meta);
    --text-placeholder: var(--d-text-placeholder);
    --text-disabled: var(--d-text-disabled);
    --separator: var(--d-separator);
    --accent: var(--d-accent);
    --accent-press: var(--d-accent-press);
    --accent-soft: var(--d-accent-soft);
    --focus-ring: var(--d-focus-ring);
    --row-hover: var(--d-row-hover);
    --row-selected: var(--d-row-selected);
    --control-hover: var(--d-control-hover);
    --control-surface: var(--d-control-surface);
    --control-border: var(--d-control-border);
    --control-text: var(--d-control-text);
    --nav-hover: var(--d-nav-hover);
    --shift-long: var(--d-shift-long);
    --shift-mid: var(--d-shift-mid);
    --shift-short: var(--d-shift-short);
    --shift-range: var(--d-shift-range);
    --thin-surface: var(--d-thin-surface);
    --thin-text: var(--d-thin-text);
    --ok: var(--d-ok);
    --dot-active: var(--d-dot-active);
    --text-active: var(--d-text-active);
    --dot-delivered: var(--d-dot-delivered);
    --text-delivered: var(--d-text-delivered);
    --dot-progress: var(--d-dot-progress);
    --text-progress: var(--d-text-progress);
    --dot-completed: var(--d-dot-completed);
    --text-completed: var(--d-text-completed);
    --dot-snoozed: var(--d-dot-snoozed);
    --text-snoozed: var(--d-text-snoozed);
    --route-done: var(--d-route-done);
    --route-todo: var(--d-route-todo);
    --disabled-surface: var(--d-disabled-surface);
    --footer-border: var(--d-footer-border);
    --danger: var(--d-danger);
    --error-border: var(--d-error-border);
    --error-surface: var(--d-error-surface);
    --error-text: var(--d-error-text);
    --detail-border: var(--d-detail-border);
    --warning-border: var(--d-warning-border);
    --warning-surface: var(--d-warning-surface);
    --timeline-border: var(--d-timeline-border);
    --timeline-line: var(--d-timeline-line);
    --subtle-border: var(--d-subtle-border);
    --accent-border: var(--d-accent-border);
    --rejected-text: var(--d-rejected-text);
    --rejected-dot: var(--d-rejected-dot);
    --button-accent: var(--d-button-accent);
    --button-accent-press: var(--d-button-accent-press);
  }
}

/* --------------------------------------------------------------------------
   Основа
   -------------------------------------------------------------------------- */

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

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--window);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

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

a:hover {
  color: var(--accent-press);
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.mono {
  font-family: var(--font-mono);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dot-sep {
  color: var(--separator);
}

/* --------------------------------------------------------------------------
   Каркас приложения
   -------------------------------------------------------------------------- */

.app {
  display: flex;
  min-height: 100vh;
  background: var(--surface);
}

.sidebar {
  width: var(--sidebar-width);
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface-sidebar);
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  height: var(--header-height);
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar__mark {
  width: 25px;
  height: 25px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--button-accent);
  color: var(--on-accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.sidebar__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.sidebar__nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 33px;
  padding: 0 9px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.nav-item:hover {
  background: var(--nav-hover);
  color: var(--text-secondary);
}

.nav-item[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.nav-item--soon {
  color: var(--text-disabled);
  cursor: default;
}

.nav-item--soon:hover {
  background: none;
  color: var(--text-disabled);
}

.nav-item__soon {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-disabled);
}

.sidebar__user {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-top: 1px solid var(--border);
}

.sidebar__identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar__login {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Обрезается, как и логин: длинная роль не должна заезжать под кнопки
   справа от неё. */
.sidebar__role {
  overflow: hidden;
  font-size: 11.5px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  background: var(--window);
}

/* Let the content column size to its own rows instead of being stretched to
   fill the sidebar's full 100vh — the journal's detail split view below
   opts back into stretching, since it depends on a fixed-height column. */
.workspace:not(.workspace--journal-detail) {
  align-items: flex-start;
}

.queue {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */

.topbar {
  height: var(--header-height);
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--border);
}

.topbar__heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.topbar h1 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.spacer {
  flex: 1 1 auto;
}

.search {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
}

.search svg {
  position: absolute;
  left: 9px;
  pointer-events: none;
  color: var(--text-placeholder);
}

.search input {
  width: 226px;
  min-width: 0;
  max-width: 100%;
  height: 32px;
  padding: 0 10px 0 29px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}

.search input::placeholder {
  color: var(--text-placeholder);
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--control-surface);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--control-text);
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  background: var(--control-hover);
  border-color: var(--field-border-hover);
  color: var(--control-text);
}

.btn:active {
  border-color: var(--accent);
}

.btn:disabled {
  border-color: var(--border-card);
  background: var(--disabled-surface);
  color: var(--text-disabled);
  cursor: default;
}

.btn--primary {
  border: 0;
  background: var(--button-accent);
  color: var(--on-accent);
  font-weight: 600;
}

.btn__check {
  display: flex;
  color: var(--text-delivered);
}

.btn--primary .btn__check {
  color: currentColor;
}

.btn--primary:hover {
  background: var(--button-accent-press);
  border: 0;
  color: var(--on-accent);
}

.btn--compact {
  height: 32px;
  padding: 0 13px 0 10px;
  gap: 6px;
}

.btn--row {
  height: 28px;
  padding: 0 11px 0 9px;
  gap: 6px;
  font-size: 12.5px;
}

/* Тише остальных — размером и весом шрифта, но не растворяясь в фоне:
   раньше эти кнопки отличались от страницы только подписью. */
.btn--quiet {
  height: 29px;
  padding: 0 9px;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.btn--footer {
  height: 27px;
  padding: 0 9px 0 7px;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.icon-btn {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--control-hover);
  color: var(--text);
}

.icon-btn[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.icon-btn--bordered {
  border: 1px solid var(--field-border);
  background: var(--surface);
}

.icon-btn--large {
  width: 34px;
  height: 34px;
}

/* --------------------------------------------------------------------------
   Вкладки и фильтры
   -------------------------------------------------------------------------- */

.tabs {
  height: var(--tabs-height);
  flex: none;
  display: flex;
  align-items: stretch;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--border);
}

.tabs__list {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs__list::-webkit-scrollbar {
  display: none;
}

.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.tab:hover {
  color: var(--text);
}

.tab__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-meta);
}

.tab[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

.tab[aria-selected="true"] .tab__count {
  color: var(--accent);
}

/* Поиск и оба переключателя — одна группа: все трое сужают список. */
.tabs__controls {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  min-width: 0;
}

.tabs__controls>* {
  flex: none;
}

/* Единственный, кто отдаёт ширину, когда её не хватает. */
.tabs__controls .search {
  flex: 0 1 auto;
  min-width: 0;
}

.tabs__controls .search input {
  height: 29px;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.checkbox input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Табличный вид

   Очередь рисуется им по умолчанию (`view=table`), журнал — всегда;
   ширины колонок журнал задаёт сам (`.queue.journal`).
   -------------------------------------------------------------------------- */

.colhead,
.row {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 16px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.colhead__object {
  display: flex;
  align-items: center;
  gap: 9px;
}

.colhead {
  height: var(--colhead-height);
  flex: none;
  align-items: center;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.rows {
  flex: none;
  display: flex;
  flex-direction: column;
}

.row {
  min-height: var(--row-height);
  padding-top: 11px;
  padding-bottom: 11px;
  align-items: center;
  border-bottom: 1px solid var(--row-divider);
  background: var(--surface);
}

.row:hover {
  background: var(--row-hover);
}

.row[aria-current="true"] {
  background: var(--row-selected);
  box-shadow: inset 2px 0 0 0 var(--accent);
}

.row__object {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.row__stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.row__title {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.row__site {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.row__site:hover {
  color: var(--accent);
  text-decoration: underline;
}

.row__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-meta);
}

.row__asset {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.row__asset span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__task {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.row__issue {
  font-size: 13px;
  color: var(--text-table);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__comment {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.row__comment-author {
  flex: none;
  color: var(--text-secondary);
  font-weight: 600;
}

.row__comment-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__author {
  min-width: 0;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Дата создания — как в старом интерфейсе, без срока и просрочки. */
.row__date {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: default;
}

.row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   Карточки задач

   Столько карточек в ряд, сколько помещается: при широком окне видно
   больше задач сразу, при узком остаётся один столбец — отдельных
   правил под узкие окна больше не нужно.
   -------------------------------------------------------------------------- */

.cards {
  flex: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  align-items: start;
  gap: 12px;
  padding: 14px var(--gutter);
}

.card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.card:hover {
  background: var(--row-hover);
}

.card[aria-current="true"] {
  border-color: var(--accent);
  background: var(--row-selected);
}

.card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.card__head .row__title {
  flex: 1 1 auto;
}

.card__head .status {
  flex: none;
  font-size: 12.5px;
}

/* Суть задачи — две строки: тексты вроде «Комп на 3 кассу нерабочую»
   целиком видны, а длинный рассказ не растягивает карточку на полэкрана. */
.card__issue {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-table);
  overflow-wrap: anywhere;
}

.card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
}

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

.card__date {
  flex: none;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: default;
}

/* Последний комментарий отделён линией: это чужая реплика, а не
   продолжение описания задачи. */
.card__comment {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid var(--border-inner);
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
}

.card__comment .row__comment-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

/* У завершённой задачи нет ни кнопки, ни меню — полоса убирается
   вместе с её отступом. */
.card__actions:empty {
  display: none;
}

/* Раскрытая задача занимает всю ширину под своей карточкой. */
.cards>.detail {
  grid-column: 1 / -1;
  padding: 13px 14px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-card);
  box-shadow: none;
}

/* Статус — точка с подписью, без рамки и заливки. */
.status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.status--active {
  color: var(--text-active);
}

.status--active::before {
  background: var(--dot-active);
}

.status--delivered {
  color: var(--text-delivered);
}

.status--delivered::before {
  background: var(--dot-delivered);
}

.status--progress {
  color: var(--text-progress);
}

.status--progress::before {
  background: var(--dot-progress);
}

.status--completed {
  color: var(--text-completed);
}

.status--completed::before {
  background: var(--dot-completed);
}

.status--snoozed {
  color: var(--text-snoozed);
}

.status--snoozed::before {
  background: var(--dot-snoozed);
}

/* --------------------------------------------------------------------------
   Маршрут — четыре точки в шапке задачи

   Полоса на всю ширину повторяла то, что уже сказано вкладкой и кнопкой
   следующего шага, и была самой пустой частью экрана.
   -------------------------------------------------------------------------- */

.steps {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
}

.steps__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--timeline-line);
}

.steps__dot--done {
  background: var(--accent);
  opacity: 0.55;
}

.steps__dot--current {
  width: 9px;
  height: 9px;
  background: var(--accent);
}

.steps__label {
  margin-left: 4px;
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Оборудование: строка в шапке и панель под ней
   -------------------------------------------------------------------------- */

.gear__toggle {
  min-width: 0;
  max-width: 420px;
}

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

.gear__body {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   История: старое свёрнуто, новое на виду
   -------------------------------------------------------------------------- */

.events__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-muted);
}

.events__more::-webkit-details-marker {
  display: none;
}

.events__more:hover {
  color: var(--accent);
}

.events[open] .events__more svg {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Поле комментария: строка, которая растёт под набранное
   -------------------------------------------------------------------------- */

.detail__compose textarea {
  min-height: 36px;
  resize: vertical;
  transition: min-height 120ms ease;
}

.detail__compose textarea:focus,
.detail__compose textarea:not(:placeholder-shown) {
  min-height: 92px;
}

/* --------------------------------------------------------------------------
   Меню «Вид»
   -------------------------------------------------------------------------- */

/* «Вид» — такая же кнопка, как соседние: та же высота, те же поля, и
   стрелка, которая переворачивается, когда меню открыто.
   Ширину и высоту приходится задавать явно: `.more>summary` — квадрат 28×28
   под значок «…», и подпись «Вид» со значками из него вываливалась. */
.more.viewmenu>summary {
  width: auto;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}

.more.viewmenu>summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.more.viewmenu[open]>summary {
  background: var(--control-hover);
  border-color: var(--field-border-hover);
  color: var(--control-text);
}

.more.viewmenu[open]>summary svg:last-child {
  transform: rotate(180deg);
}

.more.viewmenu>summary svg:last-child {
  color: var(--text-meta);
}

.more.viewmenu>summary::-webkit-details-marker {
  display: none;
}

.viewmenu .more__menu {
  width: 184px;
}

.more__tick {
  margin-left: auto;
  display: inline-flex;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Выбор задач пачкой

   Доставки приезжают по нескольку разом, и до полосы выделения каждая из них
   стоила отдельного клика и отдельной перерисовки списка.
   -------------------------------------------------------------------------- */

.rowpick {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
  /* Видна всегда, но вполголоса: иначе о выборе пачкой нельзя догадаться,
     не проведя мышью по строке. */
  opacity: 0.45;
  transition: opacity 120ms ease;
}

.row:hover .rowpick,
.card:hover .rowpick,
.is-cursor .rowpick,
.is-picked .rowpick,
.rowpick:focus-visible,
.rowpick:checked {
  opacity: 1;
}

.is-picked {
  background: var(--row-selected);
}

.selbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}

.selbar__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Чип «только эта аптека»
   -------------------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px var(--gutter) 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 12.5px;
  color: var(--text-secondary);
}

.chip__text {
  white-space: nowrap;
}

.chip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--text-muted);
}

.chip__clear:hover {
  background: var(--row-hover);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   «Отложить»: на сколько и почему

   Кнопка раньше молча отправляла ровно сутки без причины, хотя бот спрашивал
   и то и другое — и вкладка «Отложенные» не могла объяснить, что там лежит.
   -------------------------------------------------------------------------- */

.snooze {
  position: relative;
  flex: none;
}

.snooze>summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
}

.snooze>summary::-webkit-details-marker {
  display: none;
}

.snooze__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: 232px;
  padding: 10px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(16, 21, 27, 0.16);
}

.snooze__reason {
  width: 100%;
  margin-bottom: 8px;
  padding: 7px 9px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}

.snooze__times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

/* В меню «ещё» панель раскрывается влево от края меню. */
.more__menu .snooze {
  display: block;
}

.more__menu .snooze__panel {
  right: calc(100% + 6px);
  top: 0;
}

/* --------------------------------------------------------------------------
   Оборудование аптеки внутри задачи
   -------------------------------------------------------------------------- */

.gear {
  margin: 0 0 14px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.gear__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.gear__summary::-webkit-details-marker {
  display: none;
}

.gear__line {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gear[open] .gear__summary {
  border-bottom: 1px solid var(--border-inner);
}

.gear__body {
  padding: 12px;
}

/* Режим «плотнее» доходит и до оборудования: подписи и значения смыкаются,
   карточки машин теряют остаток полей. */
:root[data-density="compact"] .apteka-info__facts {
  gap: 1px 10px;
}

:root[data-density="compact"] .jequip {
  gap: 9px;
}

:root[data-density="compact"] .jequip__machine {
  padding: 7px 9px;
}

:root[data-density="compact"] .jequip__machine-head {
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Курсор по списку и плотный режим
   -------------------------------------------------------------------------- */

/* Клавиатурный курсор — не выделение и не открытая задача: своя метка. */
.row.is-cursor,
.card.is-cursor {
  box-shadow: inset 2px 0 0 0 var(--accent);
}

.card.is-cursor {
  border-color: var(--accent);
}

/* Подсказка по клавишам — самое необязательное в строке: она сжимается
   первой и обрезается многоточием. Без этого она выталкивала «Обновить» за
   правый край, а счётчики переносила по словам в три строки. */
.statusbar__keys {
  min-width: 0;
  flex-shrink: 1000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Плотный режим: строка в одну линию, карточка без воздуха. Всё, что
   скрывается, остаётся в раскрытой задаче — ничего не теряется. */
:root[data-density="compact"] {
  --row-height: 40px;
}

:root[data-density="compact"] .row {
  padding-top: 5px;
  padding-bottom: 5px;
}

:root[data-density="compact"] .row__asset,
:root[data-density="compact"] .row__comment {
  display: none;
}

/* Оборудование скрыто — точка после него повисала в начале строки карточки. */
:root[data-density="compact"] .card__meta .row__asset + .dot-sep {
  display: none;
}

:root[data-density="compact"] .cards {
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}

:root[data-density="compact"] .card {
  gap: 5px;
  padding: 8px 11px;
}

:root[data-density="compact"] .card__issue {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

:root[data-density="compact"] .card__comment {
  display: none;
}

/* --------------------------------------------------------------------------
   Меню «ещё»
   -------------------------------------------------------------------------- */

.more {
  position: relative;
  flex: none;
}

.more>summary {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}

.more>summary::-webkit-details-marker {
  display: none;
}

.more>summary:hover,
.more[open]>summary {
  background: var(--control-hover);
  color: var(--text);
}

.more__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  min-width: 212px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(16, 21, 27, 0.12);
}

.more__item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-table);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.more__item:hover {
  background: var(--control-hover);
}

/* С клавиатуры пункт подсвечивается так же, как под мышью, — по одной
   рамке фокуса было не понять, какой пункт сейчас выбран. */
.more__item:focus-visible {
  background: var(--control-hover);
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* «Отложить…» с открытой панелью остаётся подсвеченным: видно, чья она. */
.more__menu .snooze[open]>.more__item {
  background: var(--control-hover);
}

/* У нижнего края экрана меню открывается вверх, а не уходит за край. */
.more--up>.more__menu {
  top: auto;
  bottom: calc(100% + 4px);
}

@media (min-width: 681px) {
  .more--up .more__menu .snooze__panel {
    top: auto;
    bottom: 0;
  }
}

.more__item--danger {
  color: var(--danger);
}

.more__sep {
  height: 1px;
  margin: 4px 0;
  background: var(--border-inner);
}

/* --------------------------------------------------------------------------
   Пустое состояние и подвал
   -------------------------------------------------------------------------- */

/* Sized to its own content, not stretched: with `flex: 1 1 auto` this filled
   the whole column below the header, leaving the hint floating in a mostly
   empty viewport instead of reading like a compact notice. */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 16px var(--gutter);
  padding: 32px 16px;
  border: 1px dashed var(--field-border);
  border-radius: var(--radius-card);
}

.empty__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-table);
}

.empty__hint {
  font-size: 12.5px;
  color: var(--text-muted);
}

.statusbar {
  height: var(--footer-height);
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
  font-size: 12px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Сообщение об ошибке
   -------------------------------------------------------------------------- */

.notice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px var(--gutter) 0;
  padding: 10px 12px;
  border: 1px solid var(--error-border);
  border-radius: var(--radius-card);
  background: var(--error-surface);
  font-size: 12.5px;
  color: var(--error-text);
}

.notice svg {
  flex: none;
}

/* Сообщение об удаче: та же плашка, без тревоги. */
.notice--ok {
  border-color: var(--border-card);
  background: var(--surface-muted);
  color: var(--text-completed);
}

/* --------------------------------------------------------------------------
   Форма создания
   -------------------------------------------------------------------------- */

.compose {
  flex: none;
  margin: 14px var(--gutter);
  border: 1px solid var(--detail-border);
  border-radius: 7px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

/* Изменение задачи: та же форма, но внутри раскрытой строки, у которой уже
   есть свои поля — второй отступ сдвигал её от края строки. */
.detail--edit .compose {
  margin: 0;
}

.compose__head {
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--row-divider);
}

.compose__title {
  font-size: 13.5px;
  font-weight: 600;
}

.compose__hint {
  font-size: 12.5px;
  color: var(--text-muted);
}

.compose__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.compose__grid {
  display: grid;
  grid-template-columns: 300px 220px minmax(0, 1fr);
  gap: 14px;
}

.compose__foot {
  height: 54px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-top: 1px solid var(--row-divider);
}

.keyhint {
  font-size: 12px;
  color: var(--text-muted);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field>label,
.field__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0 11px;
  height: 34px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}

.field select {
  padding: 0 9px;
}

.field textarea {
  height: auto;
  padding: 9px 11px;
  resize: vertical;
}

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

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-placeholder);
}

.field__note {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border: 1px dashed var(--field-border);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--text-muted);
}

.field__note--found {
  border-style: solid;
  border-color: var(--warning-border);
  background: var(--warning-surface);
  color: var(--text-active);
}

/* --------------------------------------------------------------------------
   Карточка задачи — раскрывается прямо в таблице
   --------------------------------------------------------------------------
   Не панель у края экрана: на широком мониторе она оказывается максимально
   далеко от строки, по которой кликнули. Блок идёт сразу под своей строкой,
   продолжает её подсветку и делит ширину таблицы на три колонки.
   -------------------------------------------------------------------------- */

.detail {
  padding: 14px var(--gutter) 20px;
  border-bottom: 1px solid var(--border);
  background: var(--row-selected);
  box-shadow: inset 2px 0 0 0 var(--accent);
}

.detail__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--row-divider);
}

.detail__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}


/* Маршрут задачи: четыре шага полосами. */
.route {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.route__step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.route__bar {
  height: 3px;
  border-radius: 2px;
  background: var(--route-todo);
}

.route__label {
  font-size: 12px;
  color: var(--text-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route__step--done .route__bar,
.route__step--current .route__bar {
  background: var(--route-done);
}

.route__step--current .route__label {
  color: var(--text);
  font-weight: 600;
}

/* Маршрут — отдельная полоса во всю ширину карточки. Короткая полоска
   у левого края оставляла справа пустоту и ломала порядок. */
.detail .route {
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--row-divider);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Две колонки с разделителем — история и ответ на неё. Всё, что про задачу
   можно сказать одним словом (статус, автор, срок), уже стоит в строке. */
.detail__body {
  display: grid;
  grid-template-columns: minmax(0, 760px) 380px;
  gap: 0;
  align-items: stretch;
  padding-top: 16px;
}

.detail__col {
  min-width: 0;
  padding-right: 28px;
}

.detail__col+.detail__col {
  padding-left: 28px;
  border-left: 1px solid var(--row-divider);
}

.detail__label {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Длинная история не растягивает таблицу — прокручивается внутри колонки. */
.detail__events {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.event {
  display: flex;
  gap: 11px;
}

.event__rail {
  width: 9px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.event__dot {
  width: 9px;
  height: 9px;
  flex: none;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--accent);
}

.event__dot--route {
  border: 2px solid var(--accent);
  background: var(--surface);
}

.event__dot--hollow {
  border: 1.5px solid var(--timeline-border);
  background: var(--surface);
}

.event__line {
  flex: 1 1 auto;
  width: 1.5px;
  background: var(--timeline-line);
}

.event__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 14px;
}

.event__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.event__who {
  font-size: 13px;
  font-weight: 600;
}

.event__when {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.event__what {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.event__quote {
  margin-top: 7px;
  padding: 9px 11px;
  border: 1px solid var(--subtle-border);
  border-radius: var(--radius-card);
  /* Белая на подсветке раскрытой строки, иначе цитата сливается с фоном. */
  background: var(--surface);
  font-size: 13px;
  color: var(--text-table);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.event--quiet .event__body {
  font-size: 12.5px;
  color: var(--text-muted);
}

.detail__compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail__compose textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  resize: vertical;
}

.detail__compose textarea::placeholder {
  color: var(--text-placeholder);
}

.detail__compose textarea:focus {
  border-color: var(--accent);
}

.detail__compose-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Вход
   -------------------------------------------------------------------------- */

.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--window);
}

.login__card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(16, 21, 27, 0.06);
}

.login__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login__card h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login__form .btn {
  justify-content: center;
}

.login__error {
  padding: 9px 11px;
  border: 1px solid var(--error-border);
  border-radius: var(--radius);
  background: var(--error-surface);
  font-size: 12.5px;
  color: var(--error-text);
}

/* --------------------------------------------------------------------------
  IT Журнал
  --------------------------------------------------------------------------
  Широкий список занимает рабочую область. При выборе записи справа появляется
  самостоятельная детальная панель, поэтому соседние обращения остаются в
  поле зрения. Свои колонки: номер, аптека, состояние, суть, ИТ специалист,
  время поступления. Журнал только для чтения, поэтому колонки действий нет.
  -------------------------------------------------------------------------- */

.queue.journal {
  --cols: minmax(150px, .75fr) minmax(300px, 2.5fr) minmax(180px, 1fr) 130px;
  border-right: 0;
}

.journal .colhead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-muted);
  height: 42px;
}

.journal .colhead>div {
  white-space: normal;
}

.journal .row {
  align-items: start;
  padding-top: 9px;
  padding-bottom: 9px;
}

.journal .row>* {
  min-width: 0;
  overflow-wrap: anywhere;
}

.journal .rows {
  flex: 0 0 auto;
}

.journal .statusbar {
  position: sticky;
  left: 0;
  bottom: 0;
  margin-top: auto;
  background: var(--surface-muted);
}

.journal .row__title {
  flex-wrap: wrap;
  gap: 4px 7px;
}

.journal .row__site {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.4;
}

.jrow__workflow {
  display: grid;
  gap: 4px;
}

.jrow__received {
  font-size: 12px;
  color: var(--text-muted);
}

/* Колонка по ширине ячейки, а не по содержимому: иначе длинный адрес в
   строке под текстом раздвигал её за край экрана вместо многоточия. */
.jrow__description {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.jrow__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* «#» — номер самой записи, как в заголовке панели и в поиске; «№» у
   названия — номер аптеки. */
.jrow__toggle::before {
  content: "#";
}

.journal__results-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 12px;
  padding: 7px var(--gutter);
  background: var(--surface);
  font-size: 12px;
  color: var(--text-secondary);
}

.journal__statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 var(--gutter) 7px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.journal__statuses a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 12px;
  text-decoration: none;
}

.journal__statuses a:hover {
  background: var(--row-hover);
  border-color: var(--border);
}

.journal__statuses a[aria-current="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-border);
  font-weight: 600;
}

.journal__statuses span {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.journal__results-head strong {
  font-size: 13px;
  color: var(--text);
}

.journal__results-period {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.journal__filter-tag {
  max-width: min(300px, 100%);
  padding: 3px 7px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal__day {
  position: sticky;
  top: 42px;
  z-index: 1;
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}

.journal__day h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.jrow__reporters {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.jrow__facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

.jrow__facts>div {
  display: grid;
  gap: 3px;
  align-content: start;
}

.jrow__facts dt,
.jrow__caption {
  font-size: 11.5px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--text-muted);
}

.jrow__facts dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.jrow__owner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 6px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.jrow__timing {
  display: grid;
  gap: 3px;
  font-size: 12px;
  color: var(--text-secondary);
}

.jrow__duration {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.jrow__closed-at {
  color: var(--text-muted);
  font-size: 12px;
}

.jflow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.jflow svg {
  flex: none;
}

.jflow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.jflow--waiting {
  color: var(--text-active);
}

.jflow--it {
  color: var(--accent);
}

.jflow--programmer {
  color: var(--text-progress);
}

.jflow--finished,
.jflow--unknown {
  color: var(--text-muted);
  font-weight: 400;
}

.jflow--rejected {
  color: var(--rejected-text);
  font-weight: 400;
}

.journal__split {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.journal__split--detail {
  grid-template-columns: minmax(0, 1fr) clamp(400px, 30vw, 460px);
}

.journal__master {
  container-type: inline-size;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.journal__detail {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: var(--surface-muted);
}

/* --------------------------------------------------------------------------
   Лента журнала
   -------------------------------------------------------------------------- */

/* На широком экране журнал — окно высотой в экран, и прокручивается сам
   список, как история в чате: фильтры и шапка остаются под рукой. Раньше
   без открытой записи прокручивалась страница, а с ней — список: при
   открытии записи прокрутка перескакивала из одного места в другое, а
   заголовки колонок и дней не прилипали вовсе. */
@media (min-width: 681px) {
  .workspace.workspace--journal {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    align-items: stretch;
  }

  .workspace--journal .queue.journal,
  .workspace--journal .journal__split {
    min-height: 0;
  }

  /* Размер списка задаёт окно, а не строки, — и браузеру можно об этом
     сказать. Без этого любая перемена внутри — число на вкладке статуса,
     новая строка — поднималась до сетки вокруг, и та раскладывала заново
     все триста строк: 15–20 мс на каждое обновление, 100 мс на слабой
     машине. Теперь — полмиллисекунды. Только размер: `layout` добавлял
     прокрутке на слабой машине треть работы. На телефоне высоту списка
     задают строки, поэтому там этого правила нет. */
  .workspace--journal .journal__master {
    contain: size;
  }
}

/* Строка состояния и так прилипает к низу; над строками, которые рисуют
   себя поверх соседей, её держит слой. */
.journal .statusbar {
  z-index: 2;
}

/* На телефоне прокручивается страница. Список обрезает лишнее по ширине, но
   своим окном прокрутки не становится: иначе заголовки дней и «К последним»
   прилипали бы к нему, а не к экрану. */
@media (max-width: 680px) {
  .workspace:not(.workspace--journal-detail) .journal__master {
    overflow: clip;
  }
}

/* Счётчики над списком — одна обёртка, чтобы обновление меняло их разом;
   раскладку она не трогает. */
.journal__summary {
  display: contents;
}

/* Прокрутку при дочитывании держит app.js. Браузерная привязка выбирала бы
   опору сама — метку у края, строку состояния — и поправляла прокрутку то
   раньше, то позже скрипта: строка перед глазами иногда уезжала на целый
   кусок. Поэтому у списка и у страницы журнала она выключена. */
.journal__master,
:root:has(.workspace--journal) {
  overflow-anchor: none;
}

/* Лента — обычный блок, а не колонка flex. Выглядит так же (проверено по
   каждой строке на трёх ширинах), но flex при каждой вставке и сбросе куска
   раскладывает заново все строки ленты: 40 мс на пятьдесят новых строк при
   трёхстах на месте. Блок раскладывает только то, что поменялось: 24 мс, а
   сброс дальнего края — 11 мс вместо 18. */
.journal .rows {
  display: block;
}

.journal__detail[hidden] {
  display: none;
}

/* Метки у краёв ленты: пока дочитывается кусок — «Загрузка…», если не
   вышло — «Повторить». */
.jmore {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px var(--gutter);
  font-size: 12.5px;
  color: var(--text-muted);
}

.jmore__loading,
.jmore__failed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.jmore__failed,
.jmore[data-state="failed"] .jmore__loading {
  display: none;
}

.jmore[data-state="failed"] .jmore__failed {
  display: inline-flex;
}

.jmore__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: jspin .8s linear infinite;
}

@keyframes jspin {
  to {
    transform: rotate(360deg);
  }
}

/* «К последним» плавает над списком, когда его верх ушёл из виду или
   сброшен. Высота обёртки нулевая — строк она не сдвигает. */
.jlatest {
  position: sticky;
  top: 54px;
  z-index: 3;
  height: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.jlatest__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 4px 14px #0000001f;
  cursor: pointer;
}

.jlatest__btn:hover {
  background: var(--accent-soft);
}

.jlatest__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.jlatest__btn svg {
  transform: rotate(180deg);
}

/* Без заголовков колонок (узкий список, телефон) прилипает только заголовок
   дня — кнопка встаёт в его полосу у правого края, напротив даты, а не на
   строку под ним. */
@container (max-width: 780px) {
  .jlatest {
    top: 2px;
    justify-content: flex-end;
    padding-right: var(--gutter);
  }

  .jlatest__btn {
    height: 28px;
  }
}

/* Запись, к которой перешли, и только что пришедшие вспыхивают и гаснут до
   своего обычного фона — открытая остаётся отмеченной. */
@keyframes jflash {
  from {
    background-color: color-mix(in srgb, var(--accent) 22%, var(--surface));
  }
}

.journal .jrow.is-flash {
  animation: jflash 1.6s ease-out;
}

@media (min-width: 1201px) {
  .workspace--journal-detail {
    height: 100vh;
    overflow: hidden;
  }

  .workspace--journal-detail .queue.journal,
  .workspace--journal-detail .journal__split {
    min-height: 0;
  }
}

.btn--quiet[aria-pressed="true"] {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

.jfilters {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--border);
}

.jfilters__primary {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.jfilters__range-field {
  flex: 0 0 auto;
}

.jfilters__range {
  position: relative;
}

.jfilters__range>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 12.5px;
  cursor: pointer;
  list-style: none;
}

.jfilters__range>summary::after {
  content: "⌄";
}

.jfilters__period {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(330px, calc(100vw - 90px));
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px #0002;
}

.jfilters__period .jperiods,
.jfilters__period .jsource,
.jfilters__apply {
  grid-column: 1 / -1;
}

.jfilters__period .jperiods {
  flex-wrap: wrap;
  height: auto;
}

.jfilters__period .jperiods__item {
  min-height: 30px;
  flex: 1;
  justify-content: center;
  padding: 0 6px;
}

.jfilters .field input,
.jfilters .field select {
  height: 30px;
  font-size: 12.5px;
}

.jfilters .field label {
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.jchip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  background: var(--accent-soft);
  font-size: 12.5px;
  color: var(--accent);
  white-space: nowrap;
}

.jchip strong {
  font-weight: 600;
}

.jchip .icon-btn {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.jfilters__who {
  width: 100%;
}

#journal-specialist {
  flex: 0 1 240px;
  min-width: 180px;
}

.jfilters__text {
  flex: 1 1 260px;
  max-width: 420px;
}

/* Поле аптеки — между поиском и датами: названия длинные, и в 130 пикселях
   от «Кривой Рог 2» видно полторы буквы. */
.jfilters__site {
  flex: 1 1 200px;
  max-width: 280px;
}

.jfilters__date {
  flex: 0 0 150px;
}

.jfilters .btn {
  flex: none;
  height: 32px;
}

.jresults {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.jrow__num {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.jrow__clip {
  display: flex;
  color: var(--text-muted);
}

/* The list gives a short summary; the full issue and timeline remain in the detail panel. */
.jrow {
  cursor: pointer;
  min-height: 58px;
}

.jrow:focus-within {
  background: var(--row-hover);
}

.queue.journal .jrow[aria-current="true"] {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 0 var(--accent);
}

.jrow__toggle {
  color: inherit;
}

.jrow__toggle:hover {
  color: var(--accent);
  text-decoration: underline;
}

.jrow__problem {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 75ch;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-table);
  white-space: pre-line;
  overflow-wrap: anywhere;
  overflow: hidden;
  text-decoration: none;
}

.jrow__problem:hover,
.jrow__problem:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.jrow__identity .row__site {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.jrow__identity a.row__site:hover {
  color: var(--accent);
}

/* Номер аптеки — ссылка в «Поиск задач»: там её задачи за всё время, и в
   журнале, и в Bitrix. Название рядом сужает журнал до этой аптеки.
   Шрифт и цвет — от .row__num, как у номера до того, как он стал ссылкой:
   в моноширинном шрифте Windows 15 знак «№» сплющен до неузнаваемости. */
.jfind {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 4px;
  text-decoration: none;
}

.jfind svg {
  flex: none;
  opacity: .7;
}

.jfind:hover,
.jfind:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jfind:hover svg,
.jfind:focus-visible svg {
  opacity: 1;
}

/* В заголовке панели номер пишется тем же шрифтом, что и название. */
.jdetail__title .jfind {
  font: inherit;
  color: inherit;
}

.jdetail__title .jfind svg {
  width: 13px;
  height: 13px;
}

.jdetail__title .jfind:hover,
.jdetail__title .jfind:focus-visible {
  color: var(--accent);
}

/* Адрес и телефоны аптеки из справочника — в строке под текстом обращения,
   после номера записи и времени. В широкой таблице эта строка почти пуста,
   и строке записи они не прибавляют высоты; под названием аптеки они
   делали каждую строку выше на две-три линии. */
.jplace__addr,
.jplace__phones {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

/* Когда места мало, адрес сжимается с многоточием и лишь на совсем узкой
   строке уходит ниже; шире своего текста он не растёт. Целиком он в
   подсказке и копируется щелчком. Обрезает внутренний span, а не сам
   .copyable: иначе вместе с текстом срезалась бы и плашка «Скопировано». */
.jplace__addr {
  flex: 1 1 140px;
  max-width: max-content;
}

/* Телефон не обрезается: от номера без последних цифр толку нет. */
.jplace__phones {
  flex: none;
  gap: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.jplace__addr svg,
.jplace__phones svg {
  flex: none;
  color: var(--text-meta);
}

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

.jplace__sep {
  margin-left: -4px;
}

.jrow__reporters span {
  white-space: normal;
  overflow: visible;
}

.jrow__time {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.jrow__closed {
  font-size: 12px;
  color: var(--text-muted);
}

/* Готовые периоды рядом с датами — один клик вместо двух полей. */
.jperiods {
  display: flex;
  flex: none;
  height: 30px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.jperiods__item {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-left: 1px solid var(--field-border);
  background: var(--surface);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.jperiods__item:first-child {
  border-left: 0;
}

.jperiods__item:hover {
  background: var(--control-hover);
  color: var(--text);
}

.jperiods__item[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.jdetail__nothing {
  margin: 0 40px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.jdetail__body--narrow-only {
  display: none;
}

.jdetail {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface-muted);
  box-shadow: none;
}

.jdetail__close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.jdetail__summary {
  flex: none;
  padding: 14px 44px 14px 16px;
  border-bottom: 1px solid var(--border);
}

.jdetail__issue h3 {
  margin: 0 0 7px;
  font-size: 12px;
  color: var(--text-muted);
}

.jdetail__problem {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-table);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jdetail__owner {
  display: grid;
  gap: 3px;
}

.jdetail__owner strong {
  font-size: 13px;
  font-weight: 500;
}

.jhistory__more {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.jhistory__more>summary {
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary);
}

.jhistory__more[open]>summary {
  margin-bottom: 12px;
}

.jdetail__content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px;
  scrollbar-gutter: stable;
}

.jdetail__summary-top,
.jdetail__ticket {
  display: flex;
  align-items: center;
}

.jdetail__ticket {
  gap: 10px;
}

.jdetail__ticket-id {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}

.jdetail__title {
  margin: 5px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.jdetail__summary-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.jdetail__summary-fact {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.jdetail__summary-fact span {
  font-size: 12px;
  color: var(--text-muted);
}

.jdetail__summary-fact strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.jdetail__tabs {
  display: flex;
  gap: 2px;
  flex: none;
  margin: 12px 16px 0;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.jdetail__tabs .tab {
  padding: 9px 5px;
  font-size: 12px;
  flex: 1;
  justify-content: center;
  border-radius: 7px;
  border: 0;
  margin: 0;
}

.jdetail__tabpanel[hidden] {
  display: none;
}

.jdetail__body {
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  padding-top: 18px;
  padding-right: 0;
}

.jdetail__body--attachment {
  /* The pane is always a narrow reading column, so the attachment stacks
     below the write-up instead of competing with it for width. */
  grid-template-columns: minmax(0, 1fr);
}

.jdetail .detail__col {
  padding-right: 0;
}

.jdetail .detail__col+.detail__col {
  padding-top: 16px;
  padding-left: 0;
  border-top: 1px solid var(--row-divider);
  border-left: 0;
}

.jdetail__work {
  max-width: 620px;
}

.jdetail__technical {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--row-divider);
}

.jdetail__technical summary,
.apteka-info__technical summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.jdetail__technical .jfacts {
  margin-top: 12px;
}

.jfacts {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: baseline;
  margin: 0;
}

.jfact {
  display: contents;
}

.jfact dt {
  font-size: 12px;
  color: var(--text-muted);
}

.jfact dd {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}

.jdetail__apteka {
  max-width: none;
}

.jdetail__loading,
.jdetail__apteka-notice {
  margin: 0;
}

.apteka-info__layout {
  /* The detail pane is a narrow reading column at every width, so facts
     and contacts always stack — a fixed side-by-side split starved the
     facts column down to a sliver that wrapped one letter per line. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.apteka-info__section {
  min-width: 0;
}

.apteka-info__section+.apteka-info__section {
  padding-top: 20px;
  padding-left: 0;
  border-top: 1px solid var(--row-divider);
  border-left: 0;
}

.apteka-info__section-header,
.apteka-info__diagnostics-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.apteka-info h3,
.apteka-info h4 {
  margin: 0;
}

.apteka-info h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.apteka-info__eyebrow,
.apteka-info__diagnostic-header>div>span {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  color: var(--text-muted);
}

.apteka-status {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.apteka-status--working {
  border-color: color-mix(in srgb, var(--dot-completed) 38%, var(--border));
  background: color-mix(in srgb, var(--dot-completed) 13%, var(--surface));
  color: var(--text-completed);
}

.apteka-status--closed {
  border-color: var(--error-border);
  background: var(--error-surface);
  color: var(--error-text);
}

.apteka-status--neutral {
  color: var(--text-secondary);
  background: var(--surface);
}

.apteka-info__facts {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 3px 10px;
  margin: 0;
}

.apteka-info__fact {
  display: contents;
}

.apteka-info__fact dt {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.apteka-info__fact dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}

.apteka-info__people,
.apteka-info__contacts,
.apteka-info__payments {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apteka-info__people li,
.apteka-info__contacts li {
  display: grid;
  gap: 2px;
  padding: 9px 0;
  border-top: 1px solid var(--row-divider);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.apteka-info__people li:first-child,
.apteka-info__contacts li:first-child {
  padding-top: 0;
  border-top: 0;
}

.apteka-info__people li strong,
.apteka-info__contacts li strong {
  font-weight: 600;
  color: var(--text);
}

.apteka-info__people li>span,
.apteka-info__contacts li>span,
.apteka-info__payments li>span {
  color: var(--text-muted);
  white-space: pre-line;
}

.apteka-info__working {
  width: fit-content;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dot-completed) 13%, var(--surface));
  color: var(--text-completed) !important;
  font-size: 11.5px;
  font-weight: 600;
}

.apteka-info__diagnostics {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--row-divider);
}

.apteka-info__diagnostics-header {
  display: block;
}

.apteka-info__diagnostics-header h3 {
  font-size: 16px;
}

.apteka-info__diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.apteka-info__diagnostic-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.apteka-info__diagnostic-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.apteka-info__diagnostic-header h4 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.apteka-info__signal {
  flex: none;
  padding: 3px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.apteka-info__signal--good {
  background: color-mix(in srgb, var(--dot-completed) 14%, var(--surface));
  color: var(--text-completed);
}

.apteka-info__signal--warning {
  background: color-mix(in srgb, var(--dot-active) 15%, var(--surface));
  color: var(--text-active);
}

.apteka-info__signal--critical {
  background: var(--error-surface);
  color: var(--error-text);
}

.apteka-info__signal--neutral {
  background: var(--surface-muted);
  color: var(--text-secondary);
}

.apteka-info__contacts {
  margin-top: 14px;
}

.apteka-info__payments {
  margin-top: 12px;
}

.apteka-info__payments li {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  padding-top: 8px;
  border-top: 1px solid var(--row-divider);
  font-size: 12px;
}

.apteka-info__payments li strong {
  font-weight: 600;
  color: var(--text-secondary);
}

.apteka-info__technical {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--row-divider);
}

.apteka-info__technical .apteka-info__facts {
  margin-top: 12px;
}

/* То, что стоит в колонке таблицы, в карточке не повторяется. Показывается
   здесь, только когда эта колонка скрыта из-за ширины окна. */
.reveal-author,
.reveal-date,
.reveal-task {
  display: none;
}

.jattach {
  display: block;
}

.jattach img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.jattach__missing {
  font-size: 12.5px;
  color: var(--text-muted);
}

.jstats {
  max-width: 860px;
  margin: 14px var(--gutter) 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 7px;
}

.jstats__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.jstats__head h2 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
}

.jstats__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.jstats__table th {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
}

.jstats__table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--row-divider);
  color: var(--text-table);
}

.jstats__table .num {
  text-align: right;
}

.jstats__table tfoot td {
  border-bottom: 0;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Адаптация под узкие окна
   -------------------------------------------------------------------------- */

/* Карточки перестраиваются сами, а таблица — по этим правилам. Правило
   одно: набор видимых ячеек и шаблон колонок обязаны совпадать. Если скрыть
   ячейку, но оставить лишнюю колонку, все следующие ячейки съедут влево —
   соседняя колонка схлопнется, и кнопка окажется в статусе. */

/* Узко: убираем автора — остаётся пять колонок. */
@media (max-width: 1360px) {
  .queue {
    --cols: 196px minmax(0, 1fr) 96px 200px;
  }

  .cell-author {
    display: none;
  }

  .detail__body {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

/* Вкладки и фильтры перестают помещаться в одну строку. Вкладки важнее:
   если их сжать, последняя уезжает за край и до неё не добраться. Поэтому
   фильтры переходят на свою строку, а вкладки остаются целыми. */
@media (max-width: 1240px) {
  .tabs {
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 10px;
  }

  .tabs__list {
    width: 100%;
    height: var(--tabs-height);
    border-bottom: 1px solid var(--border);
  }

  .tabs>.spacer {
    display: none;
  }

  .tabs__controls {
    width: 100%;
    padding-top: 10px;
    padding-left: 0;
  }

  .tabs__controls .search {
    flex: 1 1 auto;
    min-width: 0;
  }

  .tabs__controls .search input {
    width: 100%;
  }
}

/* Ещё уже: убираем дату создания — остаётся четыре колонки. Дата не
   теряется: она первой строкой стоит в истории раскрытой задачи. */
@media (max-width: 1140px) {
  .queue {
    --cols: 190px minmax(0, 1fr) 190px;
  }

  .cell-date {
    display: none;
  }

  .detail__body {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .compose__grid {
    grid-template-columns: minmax(0, 1fr) 200px;
  }

  .compose__grid .field--similar {
    grid-column: span 2;
  }
}

/* Narrow screens default to the icon rail; an explicit choice takes priority. */
@media (max-width: 1000px) {
  :root:not([data-sidebar="expanded"]) {
    --sidebar-width: 64px;
    --sidebar-user-direction: column;
    --sidebar-label-display: none;
    --sidebar-align: center;
    --sidebar-brand-padding: 0 8px;
    --sidebar-chevron: -90deg;
  }

  .search input {
    width: 170px;
  }
}

:root[data-sidebar="collapsed"] {
  --sidebar-width: 64px;
  --sidebar-user-direction: column;
  --sidebar-label-display: none;
  --sidebar-align: center;
  --sidebar-brand-padding: 0 8px;
  --sidebar-chevron: -90deg;
}

.sidebar__title,
.sidebar .nav-item>span {
  display: var(--sidebar-label-display, block);
}

.sidebar__identity,
.sidebar .sidebar__mark,
.sidebar>.theme-picker:not([hidden]) {
  display: var(--sidebar-label-display, flex);
}

.sidebar .nav-item {
  justify-content: var(--sidebar-align, flex-start);
}

.sidebar__brand {
  justify-content: var(--sidebar-align, flex-start);
  padding: var(--sidebar-brand-padding, 0 16px);
}

/* Profile and sign-out side by side do not fit the 64px rail: stacked there. */
.sidebar__user {
  flex-direction: var(--sidebar-user-direction, row);
  justify-content: var(--sidebar-align, flex-start);
  padding: 11px 12px;
}

.sidebar__toggle {
  margin-left: auto;
}

.sidebar__toggle[hidden] {
  display: none;
}

.sidebar__toggle svg {
  transform: rotate(var(--sidebar-chevron, 90deg));
}

:root[data-sidebar="collapsed"] .sidebar__toggle {
  margin-left: 0;
}

/* Совсем узко: две колонки — объект с текстом задачи под ним и действие;
   раскрытая задача — в одну колонку, разделители из вертикальных
   становятся горизонтальными.

   Текст задачи не прячется: раскрытая задача его не повторяет, и без него
   на узком экране было не узнать, что случилось. Он уходит строкой ниже,
   поэтому ячейкам заданы области, а в заголовке таблицы его колонки нет. */
@media (max-width: 920px) {
  .queue {
    --cols: minmax(0, 1fr) 170px;
  }

  .colhead .cell-task {
    display: none;
  }

  .row {
    grid-template-areas:
      "object actions"
      "task actions";
    row-gap: 6px;
  }

  .row__object {
    grid-area: object;
  }

  .row .cell-task {
    grid-area: task;
    /* Под названием, а не под галочкой выбора. */
    padding-left: 23px;
  }

  .row .cell-actions {
    grid-area: actions;
  }

  .row__issue {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
  }

  .detail__actions {
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
  }

  .detail__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail__col {
    padding-right: 0;
  }

  .detail__col+.detail__col {
    margin-top: 16px;
    padding-top: 16px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--row-divider);
  }

  .detail__head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .detail__head .spacer {
    display: none;
  }

  .detail__head .icon-btn {
    margin-left: auto;
  }

  .compose__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .compose__grid .field--similar {
    grid-column: auto;
  }
}

/* Телефон: в таблице остаются объект и текст задачи, поля уже — ширина
   нужнее и строкам, и карточкам. Действия — в раскрытой задаче: кнопка в
   строке забирала половину ширины у текста. */
@media (max-width: 680px) {
  .queue {
    --cols: minmax(0, 1fr);
  }

  .cell-actions {
    display: none;
  }

  .row {
    grid-template-areas:
      "object"
      "task";
  }

  .colhead,
  .row,
  .detail {
    padding-left: 12px;
    padding-right: 12px;
  }

  .colhead,
  .row {
    gap: 10px;
  }

  .cards {
    padding: 10px 12px;
  }

  .tabs,
  .topbar,
  .statusbar {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Поиск и фильтры остаются: без них на телефоне было не найти задачу.
     Поиск — во всю ширину, переключатели — строкой ниже. */
  .tabs__controls {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .tabs__controls .search {
    flex: 1 1 100%;
  }

  .statusbar__keys,
  .compose__foot .keyhint {
    display: none;
  }

  /* На кнопке остаётся значок; подпись читает экранный диктор. */
  .topbar .btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .topbar .btn--compact {
    padding: 0 9px;
  }

  .compose__hint {
    display: none;
  }

  /* Кнопки формы делят ширину поровну и переносятся, если им тесно. */
  .compose__foot {
    height: auto;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .compose__foot>.spacer {
    display: none;
  }

  .compose__foot>.btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Строка состояния переносится целыми частями, а не по словам. */
  .statusbar {
    height: auto;
    min-height: var(--footer-height);
    flex-wrap: wrap;
    row-gap: 4px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .statusbar>.dot-sep {
    display: none;
  }

  .selbar {
    flex-wrap: wrap;
    padding-left: 12px;
    padding-right: 12px;
  }

  .selbar>.spacer {
    display: none;
  }

  .selbar__count {
    flex: 1 1 100%;
  }

  /* «Отложить» открывался сбоку от меню — на телефоне это за левым краем.
     Здесь панель прижата к низу экрана. */
  .snooze__panel,
  .more__menu .snooze__panel {
    position: fixed;
    z-index: 40;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: calc(var(--sidebar-width) + 12px);
    width: auto;
  }

  .detail .route {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* --------------------------------------------------------------------------
   IT Журнал на узких окнах. Правило то же: сколько видимых ячеек, столько
   колонок. Скрытая колонка появляется фактом в раскрытой карточке.
   -------------------------------------------------------------------------- */

@media (max-width: 1360px) {


  .journal__split--detail {
    grid-template-columns: minmax(0, 1fr) 400px;
  }

  .jfact.reveal-author {
    display: contents;
  }

  .jdetail__body--narrow-only {
    display: grid;
  }
}

@media (max-width: 1200px) {
  .journal__split--detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .journal__detail {
    max-height: min(70vh, 720px);
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

@media (max-width: 1140px) {


  .jfact.reveal-date {
    display: contents;
  }
}

@media (max-width: 920px) {


  .jdetail__summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jfacts {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .jdetail__summary,
  .jdetail__apteka {
    margin-right: 0;
  }
}

@media (max-width: 680px) {
  .journal__detail {
    max-height: none;
  }

  /* Кнопка периода стоит у левого края — панель открывается вправо от неё,
     иначе она уходила за левый край экрана. */
  .jfilters__period {
    right: auto;
    left: 0;
  }

  .jdetail {
    padding: 0;
  }

  .jfilters {
    padding-left: 12px;
    padding-right: 12px;
  }

  .jfilters__text {
    max-width: none;
  }

  .jfilters__site,
  #journal-specialist {
    flex: 1 1 100%;
    max-width: none;
  }

  .jfilters__date {
    flex: 1 1 125px;
  }

  .jdetail__summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .jdetail__summary {
    padding-right: 36px;
  }

  .jfacts,
  .apteka-info__facts {
    grid-template-columns: 118px minmax(0, 1fr);
  }

  .apteka-info__diagnostic-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Theme preference in the expanded sidebar and on login. */
.theme-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.theme-picker[hidden] {
  display: none;
}

.theme-picker select {
  min-width: 0;
  width: 100%;
  padding: 6px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.sidebar>.theme-picker {
  margin: 10px;
}

.login__card>.theme-picker {
  margin-top: 18px;
}


.journal-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--gutter);
}

.journal-admin {
  width: 100%;
  max-width: 1000px;
  padding: 24px;
  background: var(--surface);
}

.journal-admin h1 {
  font-size: 20px;
}

.journal-admin h2 {
  margin-top: 28px;
  font-size: 16px;
}

.journal-admin__form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.journal-job {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.journal-job p {
  margin: 6px 0;
}

.jdetail__tabs .tab[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 1px 3px #00000012;
}

.jdetail__tabs .tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.jdetail__hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.jdetail__empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 40px 20px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  text-align: center;
}

.jdetail__empty h3 {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.jdetail__empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.jdetail__body {
  display: grid;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}




/* «Искать в источнике» sits beside the ready-made periods. */
.jsource {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: end;
  padding-bottom: 7px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.jsource input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Machine values copy on click; the keyboard reaches them the same way. */
.copyable {
  cursor: pointer;
  position: relative;
  border-radius: 4px;
}

.copyable:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.copyable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.copyable[data-copied],
.copyable[data-copy-failed] {
  text-decoration: none;
}

.copyable[data-copied]::after,
.copyable[data-copy-failed]::after {
  content: "Скопировано";
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  z-index: 3;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-sans);
  font-size: 11.5px;
  white-space: nowrap;
  pointer-events: none;
}

.copyable[data-copy-failed]::after {
  content: "Выделено — нажмите Ctrl+C";
}

/* Equipment tab: the router and the machines from the imported inventory.
   Its facts reuse the pharmacy panel's list, so only the frame is new. */
.jequip {
  display: grid;
  gap: 12px;
  /* Ширина блока, а не окна, решает, во сколько колонок класть факты:
     в журнале он в узкой панели, в задаче — во всю ширину таблицы. */
  container-type: inline-size;
}

/* Широкий блок — два факта в строке: шесть строк про роутер превращаются в
   три, и «Компьютеры» поднимаются на экран выше. */
/* Порог именно такой: в двух колонках на значение остаётся (ширина − 292) / 2,
   и до ~900px строки вроде «Windows 10 Enterprise LTSC 2021» начинают
   переноситься — выигрыш по высоте съедается переносами. */
@container (min-width: 900px) {
  .jequip .apteka-info__facts {
    grid-template-columns: 116px minmax(0, 1fr) 116px minmax(0, 1fr);
  }
}

.jequip__pharmacy {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.jequip__group {
  display: grid;
  gap: 6px;
}

.jequip__group .jdetail__label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.jequip__machine {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.jequip__machine+.jequip__machine {
  margin-top: 6px;
}

.jequip__machine-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.jequip__host {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.jequip__ip {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* The pane has one fixed navigation bar and one bounded reading area. */
.jdetail [hidden] {
  display: none !important;
}

.jdetail .apteka-info__facts {
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px 12px;
  line-height: 1.45;
}

.jdetail .apteka-info__pharmacy {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.jdetail .apteka-info__pharmacy .apteka-info__eyebrow {
  display: none;
}

.jdetail .apteka-info__diagnostics {
  margin: 0;
  padding: 0;
  border: 0;
}

.jdetail .apteka-info__diagnostic-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

/* «Связь» stacks local network, providers and LTE in one tab now, so each
   needs the same breathing room whichever of them ends up adjacent. */
.jdetail .apteka-info__diagnostic-card+.apteka-info__diagnostic-card,
.jdetail .apteka-info__diagnostic-card+.apteka-info__diagnostics,
.jdetail .apteka-info__diagnostics+.apteka-info__diagnostic-card {
  margin-top: 12px;
}

.jdetail .apteka-info__diagnostic-card>h3 {
  margin-bottom: 16px;
}

.jdetail .apteka-info__people {
  gap: 8px;
}

.jdetail .apteka-info__people li {
  padding: 10px 12px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.jdetail .apteka-info__people li>span {
  font-size: 12px;
}

.apteka-info__search {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.apteka-info__search input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--field-border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.apteka-info__search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.apteka-info__count {
  margin: 10px 0;
  font-size: 12px;
  color: var(--text-muted);
}

.jdetail__tabpanel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (max-width: 1200px) {
  .journal__detail {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 20;
    width: min(480px, 100vw);
    height: 100dvh;
    max-height: none;
    box-shadow: -12px 0 32px #00000014;
  }

  .workspace--journal-detail {
    height: 100dvh;
    overflow: hidden;
  }

  .workspace--journal-detail .journal__master {
    overflow: hidden;
  }
}

@media (max-width: 420px) {
  .jdetail__tabs {
    margin: 10px 8px 0;
  }

  .jdetail__tabs .tab {
    padding: 10px 3px;
    font-size: 11px;
  }

  .jdetail__content {
    padding: 12px;
  }

  .jdetail .apteka-info__facts {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}

/* Group the same four fields into a readable card when the sidebar is open. */
@container (max-width: 1100px) {

  .journal .colhead,
  .journal .jrow {
    grid-template-columns: minmax(135px, .8fr) minmax(230px, 2fr) minmax(150px, 1fr) 110px;
  }
}

@container (max-width: 780px) {
  .journal .colhead {
    display: none;
  }

  .journal__day {
    top: 0;
  }

  /* Rows overlap by one track, so the two columns grow independently. The
     status and owner (often a full name over two lines) used to set the
     height of the pharmacy's line, which left a gap above the problem text
     in almost every row while an entry was open beside the list. */
  .journal .jrow {
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 6px 24px;
  }

  .jrow__identity {
    grid-column: 1;
    grid-row: 1;
  }

  .jrow__description {
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  .jrow__workflow {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .jrow__timing {
    grid-column: 2;
    grid-row: 3;
    padding-top: 6px;
  }
}

@container (max-width: 580px) {
  .journal .jrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .jrow__identity,
  .jrow__description,
  .jrow__workflow,
  .jrow__timing {
    grid-column: 1;
    grid-row: auto;
  }

  .jrow__workflow {
    padding-top: 8px;
    border-top: 1px solid var(--row-divider);
  }

  .jrow__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .jrow__timing {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    padding-top: 0;
  }

  .jrow__closed-at {
    display: inline-flex;
    gap: 6px;
    margin: 0;
  }
}

/* Quiet task history, kept out of the table's reading flow. */
.jhistory {
  display: grid;
  gap: 18px;
  font-size: 13px;
  line-height: 1.5;
}

.jhistory__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.jhistory__heading .jflow {
  font-size: 14px;
}

.jhistory__total {
  color: var(--text-muted);
  font-size: 12px;
}

.jhistory__timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 5px;
}

.jhistory__timeline li {
  position: relative;
  margin: 0;
  padding: 0 0 18px 18px;
  border-left: 1px solid var(--border);
}

.jhistory__timeline li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.jhistory__timeline li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
}

.jhistory__event {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  align-items: baseline;
}

.jhistory__event strong {
  font-weight: 500;
}

.jhistory__event time {
  color: var(--text-muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.jhistory__timeline p {
  margin: 4px 0 0;
  color: var(--text-secondary);
}

.jhistory__metric {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.jhistory__metric strong {
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

.jhistory .jrow__reporters {
  margin: 0;
  color: var(--text-secondary);
}

.jhistory__disclosure {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.jhistory__disclosure summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12px;
}

.jhistory__disclosure summary svg {
  vertical-align: middle;
  margin-right: 5px;
}

.jhistory__disclosure summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.jhistory__disclosure[open] summary {
  margin-bottom: 14px;
}

/* Monthly schedule: one scrollable grid with anchored names and dates. */
.schedule>*,
.schedule__grid>* {
  min-width: 0;
}

/* Класс, а не `.schedule`: рабочая область объявлена как
   `.workspace:not(.workspace--journal-detail) { align-items: flex-start }`,
   и это правило весит больше. Пока оно побеждало, колонка графика сжималась
   до содержимого — таблица на 31 день занимала треть широкого монитора, а
   переключатель «Неделя / Месяц» уезжал за край окна. */
.workspace.schedule {
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  background: var(--surface);
}

.schedule .topbar {
  flex-wrap: wrap;
  gap: 10px;
  min-height: 60px;
  height: auto;
  padding-top: 12px;
  padding-bottom: 12px;
}

.schedule__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  padding: 20px var(--gutter);
}

.schedule__caption h2 {
  margin: 0;
  font-size: 18px;
}

.schedule__caption span,
.schedule__legend {
  font-size: 12px;
  color: var(--text-muted);
}

.schedule__scroll {
  margin: 0 var(--gutter);
  overflow: auto;
  max-height: calc(100dvh - 210px);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.schedule__scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.schedule__table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 12px;
  white-space: nowrap;
}

/* Вертикальных линий нет совсем: сетка из них спорила с заливками и с
   границами недель. Ряды разделяет одна тонкая линия, недели — чуть
   заметнее, и этого хватает. */
.schedule__table th,
.schedule__table td {
  padding: 7px 8px;
  height: 34px;
  min-width: 42px;
  text-align: center;
  border-bottom: 1px solid var(--row-divider);
}

.schedule__table thead th {
  border-bottom: 1px solid var(--border);
}

.schedule__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-muted);
}

.schedule__table thead span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 3px;
}

.schedule__table tr> :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 200px;
  max-width: 260px;
  white-space: normal;
  text-align: left;
  background: var(--surface);
}

.schedule__table thead tr> :first-child {
  z-index: 3;
  background: var(--surface-muted);
}

.schedule__table tbody th {
  font-weight: 500;
}

/* Выходные и начало недели: по ним глаз ловит ритм месяца, поэтому они
   заметнее, чем просто «чуть другой фон». */
.schedule__table .schedule__weekend {
  background: var(--row-hover);
}

.schedule__table .schedule__week-start {
  border-left: 1px solid var(--border-inner);
}

/* Итоги стоят отдельно от дней. */
.schedule__table [data-total] {
  border-left: 1px solid var(--border-inner);
}

.schedule__table tbody tr:hover > :first-child {
  background: var(--row-selected);
}

.schedule__table tfoot {
  font-weight: 600;
  background: var(--surface-muted);
}

.schedule__table tfoot th,
.schedule__table tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--surface-muted);
  z-index: 2;
}

.schedule__table tfoot th {
  z-index: 3;
}

/* Заливка во всю клетку и без скруглений: подряд идущие смены сливаются в
   полосу, и месяц наконец читается как форма. Плашка с полями оставляла
   между днями белые зазоры — получалась россыпь, а не полосы. */
.schedule__table td.schedule__shift {
  background-color: var(--shift);
  color: var(--text-table);
  font-weight: 500;
}

.schedule__shift--long {
  --shift: var(--shift-long);
}

.schedule__shift--mid {
  --shift: var(--shift-mid);
}

.schedule__shift--short {
  --shift: var(--shift-short);
}

.schedule__shift--range {
  --shift: var(--shift-range);
}

.schedule__legend-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--text-muted);
}

.schedule__legend-inline li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.schedule__legend-inline .schedule__shift {
  width: 22px;
  height: 12px;
  border-radius: 2px;
  background: var(--shift);
}

.schedule__off-key {
  display: grid;
  place-items: center;
  width: 22px;
  height: 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-muted);
}

.schedule__table .schedule__off {
  color: var(--text-placeholder);
  font-weight: 400;
}

.schedule__table td.schedule__unknown {
  color: var(--text-secondary);
  font-style: italic;
}

.schedule__unknown-key {
  display: grid;
  place-items: center;
  width: 22px;
  height: 14px;
  border: 1px dashed var(--border);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Итоги: полоса под числом вместо сравнения в уме
   -------------------------------------------------------------------------- */

.schedule__total {
  position: relative;
  font-weight: 600;
}

/* Полоса — фон числа, а не черта под ним: подчёркивания в правом краю
   читались как опечатка, а не как «сколько от наибольшего». */
.schedule__total[style*="--bar"] {
  background-image: linear-gradient(to right,
      var(--accent-soft) 0 var(--bar, 0%),
      transparent var(--bar, 0%) 100%);
}

/* --------------------------------------------------------------------------
   Сотрудник: имя и номер смены
   -------------------------------------------------------------------------- */

.schedule__person {
  display: flex;
  align-items: baseline;
  /* Подпись бригады уходит под имя, если строка не помещается: иначе она
     отрезала хвост фамилии. */
  flex-wrap: wrap;
  gap: 2px 7px;
  width: 100%;
  min-width: 0;
  text-align: left;
}

.schedule__person-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule__group {
  flex: none;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-meta);
}

.schedule__legend {
  margin: 12px var(--gutter);
}

.schedule__archive {
  padding: 20px var(--gutter);
  max-width: 720px;
}

.schedule__archive h2 {
  font-size: 18px;
  margin: 0 0 20px;
}

.schedule__archive-link {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.schedule__archive-link:hover {
  color: var(--accent);
  background: var(--surface-muted);
}

@media (max-width: 600px) {
  .schedule__table tr> :first-child {
    min-width: 120px;
    max-width: 150px;
  }
}

/* Schedule: emphasize people, dates and weekly rhythm instead of cell borders. */
.schedule [hidden] {
  display: none !important;
}

.schedule__months,
.schedule__month-form,
.schedule__toolbar,
.schedule__weeks {
  display: flex;
  align-items: center;
  gap: 8px;
}

.schedule__months {
  flex-wrap: wrap;
}

.schedule__months select {
  max-width: 260px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
}

.schedule__toolbar {
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px var(--gutter) 12px;
}

.schedule__updated {
  flex: 0 1 auto;
  color: var(--text-muted);
  font-size: 12px;
}

/* Легенда занимает остаток строки и переносится первой: переключатель
   «Неделя / Месяц» из-за неё уезжал за край. */
.schedule__legend-inline {
  flex: 1 1 260px;
}

.schedule__toolbar .schedule__views {
  flex: none;
  margin-left: auto;
}

.schedule__views {
  display: flex;
  padding: 3px;
  border-radius: 7px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.schedule__views button {
  padding: 6px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.schedule__views button[aria-pressed="true"] {
  color: var(--accent);
  background: var(--surface);
  box-shadow: 0 1px 3px #00000015;
}

.schedule__weeks {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.schedule__weeks span {
  min-width: 42px;
  text-align: center;
}

.schedule__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  align-items: start;
  gap: 16px;
  margin: 0 var(--gutter) 20px;
}

.schedule__inspector {
  position: sticky;
  top: 12px;
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  max-height: min(70dvh, 760px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--border-card);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
}

.schedule__inspector-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.schedule__inspector-header h2 {
  margin: 2px 0 0;
  font-size: 18px;
  line-height: 1.3;
}

.schedule__inspector-eyebrow {
  color: var(--text-muted);
  font-size: 12px;
}

.schedule__inspector-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.schedule__metric {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--border-inner);
  border-radius: 5px;
  background: var(--surface);
}

.schedule__metric span {
  color: var(--text-muted);
  font-size: 12px;
}

.schedule__metric strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.schedule__inspector-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.schedule__inspector-subtitle {
  margin: 2px 0 -7px;
  font-size: 13px;
}

.schedule__inspector-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule__inspector-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--border-inner);
  border-radius: 5px;
  background: var(--surface);
}

.schedule__inspector-link {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 5px;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.schedule__inspector-link:hover {
  text-decoration: underline;
}

.schedule__inspector-link small {
  width: 100%;
  color: var(--text-muted);
  font-weight: 400;
}

.schedule__inspector-list li strong {
  margin-left: auto;
  white-space: nowrap;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.schedule__assignment-value {
  padding: 16px;
  border-radius: 5px;
  background: var(--surface);
  font-size: 22px;
  font-weight: 700;
}

.schedule__inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--border-inner);
}

/* --------------------------------------------------------------------------
   Печать

   График вешают на стену и носят с собой; на бумаге не нужны ни меню, ни
   кнопки, а таблица обязана быть читаемой в чёрно-белом.
   -------------------------------------------------------------------------- */

@media print {

  .sidebar,
  .topbar,
  .schedule__toolbar,
  .schedule__views,
  .schedule__weeks,
  .schedule__months,
  .schedule__inspector,
  .statusbar {
    display: none !important;
  }

  .schedule__scroll {
    max-height: none;
    overflow: visible;
    border: 0;
    margin: 0;
  }

  .schedule__table {
    width: 100%;
    font-size: 9.5px;
  }

  .schedule__table th,
  .schedule__table td {
    height: auto;
    min-width: 0;
    padding: 3px 4px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    color: #000;
  }

  .schedule__table thead th {
    background: #eee;
  }

  /* Заливки смен на принтере становятся серыми пятнами, поэтому на бумаге
     остаются только цифры и рамки. */
  .schedule__table td.schedule__shift {
    background-image: none;
  }

  .schedule__table .schedule__weekend {
    background: #f2f2f2;
  }

  .schedule__total[style*="--bar"]::before {
    display: none;
  }

  /* Шапка повторяется на каждой странице. */
  .schedule__table thead {
    display: table-header-group;
  }

  .schedule__table tr {
    break-inside: avoid;
  }
}

.schedule__scroll {
  max-height: min(64dvh, 720px);
  border-radius: 8px;
}

.schedule__content .schedule__scroll {
  margin: 0;
  max-height: min(70dvh, 760px);
}

.schedule__table {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.schedule__table th,
.schedule__table td {
  min-width: 36px;
  height: 48px;
  padding: 9px 5px;
  border-right: 0;
  border-bottom: 1px solid var(--row-divider);
  font-weight: 400;
}

.schedule__table tr> :first-child {
  min-width: 185px;
  padding-left: 14px;
  border-right: 1px solid var(--border);
}

.schedule__table thead th {
  background: var(--surface);
  color: var(--text-secondary);
}

.schedule__table thead tr> :first-child {
  background: var(--surface);
}

.schedule__table thead th[data-day] {
  padding: 4px 2px;
}

.schedule__table button {
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.schedule__table thead button {
  display: block;
  width: 100%;
  padding: 6px 2px;
}

.schedule__table thead strong {
  font-size: 14px;
  font-weight: 600;
}

.schedule__table thead button[aria-pressed="true"] {
  background: var(--button-accent);
  color: var(--on-accent);
}

.schedule__table thead button[aria-pressed="true"] span {
  color: inherit;
  opacity: .8;
}

.schedule__table .schedule__today button strong {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.schedule__person {
  text-align: left;
  line-height: 1.4;
  padding: 5px 0;
  width: 100%;
}

.schedule__table .schedule__week-start {
  border-left: 2px solid var(--border);
}

.schedule__table .schedule__selected-day {
  box-shadow: inset 2px 0 var(--accent), inset -2px 0 var(--accent);
}

.schedule__table td.schedule__selected-day:not(.schedule__shift),
.schedule__table tfoot td.schedule__selected-day {
  background: var(--accent-soft);
}

.schedule__table tbody td[data-day] {
  cursor: pointer;
}

.schedule__table tbody td[data-day]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -3px;
}

.schedule__table tbody tr.schedule__selected-person > * {
  box-shadow: inset 0 2px var(--accent), inset 0 -2px var(--accent);
}

.schedule__table tbody tr.schedule__selected-person > :first-child {
  background: var(--accent-soft);
  box-shadow: inset 4px 0 var(--accent), inset 0 2px var(--accent), inset 0 -2px var(--accent);
}

.schedule__table tbody tr.schedule__selected-person > :last-child {
  box-shadow: inset -2px 0 var(--accent), inset 0 2px var(--accent), inset 0 -2px var(--accent);
}

.schedule__table tbody tr.schedule__selected-person > .schedule__selected-day {
  box-shadow: inset 2px 0 var(--accent), inset -2px 0 var(--accent),
    inset 0 2px var(--accent), inset 0 -2px var(--accent);
}

.schedule__selected-person .schedule__person-name {
  color: var(--accent);
  font-weight: 700;
}

.schedule__selected-person .schedule__person::before {
  content: "✓";
  flex: none;
  color: var(--accent);
  font-weight: 700;
}

.schedule__table [data-total] {
  color: var(--text-secondary);
  min-width: 56px;
  background: var(--surface-muted);
}

.schedule__norm {
  font-variant-numeric: tabular-nums;
}

.schedule__table tfoot th,
.schedule__table tfoot td {
  font-weight: 500;
  border-bottom: 0;
}

.schedule button:focus-visible,
.schedule select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 1280px) {
  .schedule__content {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule__inspector {
    position: static;
    max-height: none;
    order: -1;
  }
}

.schedule button:disabled {
  opacity: .35;
  cursor: default;
}

.schedule__grid[data-view="week"] .schedule__table {
  table-layout: fixed;
}

.schedule__grid[data-view="week"] .schedule__table tr> :first-child {
  width: 210px;
}

@media (max-width: 900px) {
  .schedule__toolbar {
    gap: 10px;
  }

  .schedule__updated {
    flex-basis: 100%;
  }

  .schedule__table tr> :first-child {
    min-width: 120px;
    max-width: 150px;
  }

  .schedule__grid[data-view="week"] .schedule__table tr> :first-child {
    width: 120px;
  }

  .schedule__grid[data-view="week"] .schedule__table th,
  .schedule__grid[data-view="week"] .schedule__table td {
    min-width: 44px;
    padding: 9px 4px;
  }

  .schedule__grid[data-view="week"] .schedule__table {
    min-width: 428px;
  }

  .schedule__months {
    gap: 3px;
  }

  .schedule__months select {
    max-width: 210px;
  }

}

@media print {
  .schedule__content {
    display: block;
    margin: 0;
  }

  .schedule__content .schedule__scroll {
    max-height: none;
    overflow: visible;
    border: 0;
  }

  .schedule__table td.schedule__shift {
    background-color: transparent;
  }
}

/* Facts are visible within their named tab, without nested disclosure controls. */
.jhistory__identifiers {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.jhistory__attachment {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.jhistory__attachment h3,
.apteka-info__subheading {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.apteka-info__subheading {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.jhistory__attachment h3 svg {
  vertical-align: middle;
  margin-right: 5px;
}
/* ============================================================
   Поля со справочником — автодополнение
   ============================================================ */

.field--catalog {
  position: relative;
}

/* Список раскрывается поверх формы, а не раздвигает её: иначе при каждом
   нажатии клавиши поля прыгали бы под курсором. Пустой — не показывается
   вовсе, как и положено автодополнению. */
.combo {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  /* Список шире поля: названия аптек длиннее, чем место под них, и
     обрезанное «Кривой Ро…» выбирать не из чего. */
  min-width: 260px;
}

.combo:empty {
  display: none;
}

.combo__list {
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgb(16 21 27 / 18%);
}

.combo__option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

/* Одна и та же подсветка для мыши и для стрелок, чтобы «где я сейчас» не
   зависело от того, чем пользуются. */
.combo__option:hover,
.combo__option--active {
  background: var(--accent-soft);
  color: var(--accent);
}

.combo__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Имя машины из справочника оборудования: видно, откуда взялась строка, и
   какая именно это касса, если их несколько. */
.combo__note {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--text-meta);
}

.combo__option--active .combo__note,
.combo__option:hover .combo__note {
  color: var(--accent);
}

/* Подсказка аптеки: название слева, номер справа, второе написание — строкой
   ниже. Во flex-строке приписка вытесняла название, и от «Кринички» на экране
   оставалось «К..». */
.combo__option--site {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  row-gap: 1px;
  column-gap: 10px;
}

.combo__code {
  font-size: 11.5px;
  color: var(--text-meta);
}

.combo__alt {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--text-muted);
}

.combo__option--active .combo__code,
.combo__option:hover .combo__code,
.combo__option--active .combo__alt,
.combo__option:hover .combo__alt {
  color: var(--accent);
}

/* Последняя строка — создать то, что набрали. Отделена, потому что это не
   выбор из справочника, а добавление в него. */
.combo__option--new {
  margin-top: 4px;
  border-top: 1px solid var(--border-inner);
  border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
  padding-top: 9px;
  color: var(--text-secondary);
}

.combo__option--new:hover,
.combo__option--new.combo__option--active {
  color: var(--accent);
}

.field--number input {
  width: 100%;
}

/* ============================================================
   Задачи на замену в карточке журнала
   ============================================================ */

.jreplace {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.jreplace__heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}

.jreplace__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jreplace__item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jreplace__what {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
}

.jreplace__link {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
}

.jreplace__asset {
  color: var(--text-secondary);
  white-space: nowrap;
}

.jreplace__issue {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jreplace__item form {
  margin: 0;
  flex: 0 0 auto;
}

/* ============================================================
   Другие обращения аптеки — под записью, во вкладке «Задача»

   Половина обращений приходит из аптеки, которая писала и неделей раньше.
   Поэтому под записью — её соседи за месяц, а за неделю — отдельной
   плашкой: третий «не печатает чеки» за неделю — это замена принтера.
   ============================================================ */

.jneighbours {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.jneighbours__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.jneighbours__head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.jneighbours__counts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.jneighbours__week {
  padding: 1px 8px;
  border: 1px solid var(--warning-border);
  border-radius: 999px;
  background: var(--warning-surface);
  color: var(--text-active);
  font-weight: 600;
}

.jneighbours__none {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.jneighbours__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Когда — слева колонкой, что случилось и чем кончилось — справа. */
.jneighbours__item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-areas:
    "when problem"
    "when meta";
  gap: 2px 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}

.jneighbours__item:hover {
  background: var(--row-hover);
  color: inherit;
}

.jneighbours__when {
  grid-area: when;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.jneighbours__problem {
  grid-area: problem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 13px;
  color: var(--text-table);
}

.jneighbours__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.jneighbours__all {
  justify-self: start;
  font-size: 12.5px;
}

/* Справочник выключен или не настроен — это состояние, а не ошибка:
   говорим спокойно, красным остаётся справочник, который не ответил. */
.notice--info {
  border-color: var(--border-card);
  background: var(--surface-muted);
  color: var(--text-secondary);
}

/* ============================================================
   Управление
   ============================================================ */

.admin {
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px 20px 40px;
  max-width: 1100px;
}

.admin h1 {
  margin: 0 0 14px;
  font-size: 19px;
}

.admin h2 {
  margin: 0 0 10px;
  font-size: 14px;
}

.admin__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.admin__tab {
  padding: 7px 11px;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  color: var(--text-secondary);
}

.admin__tab:hover {
  color: var(--text);
}

.admin__tab--current {
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Обзор */

.admin__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.admin__card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  padding: 14px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
}

.admin__card:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.admin__card-icon {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--accent);
}

.admin__card-title {
  font-weight: 600;
  font-size: 14px;
}

.admin__card-note {
  font-size: 12.5px;
  color: var(--text-muted);
}

.admin__card--warn,
.admin__card--fail {
  border-color: var(--warning-border);
  background: var(--warning-surface);
}

.admin__card--fail {
  border-color: var(--error-border);
  background: var(--error-surface);
}

.admin__card--ok .admin__card-icon {
  color: var(--ok);
}

.admin__card--warn .admin__card-icon {
  color: var(--thin-text);
}

.admin__card--fail .admin__card-icon {
  color: var(--danger);
}

/* Состояние: по карточке на систему. Цвет — только у значка и строки
   статуса, чтобы список читался, а не рябил. */

.health {
  display: grid;
  gap: 8px;
  max-width: 820px;
}

.health__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 10px 14px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  background: var(--surface-muted);
  font-weight: 600;
}

.health__summary svg {
  flex: none;
}

.health__summary--ok svg {
  color: var(--ok);
}

.health__summary--warn {
  border-color: var(--warning-border);
  background: var(--warning-surface);
}

.health__summary--warn svg {
  color: var(--thin-text);
}

.health__summary--fail {
  border-color: var(--error-border);
  background: var(--error-surface);
  color: var(--error-text);
}

.health__item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 3px 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  background: var(--surface);
}

.health__icon {
  grid-row: 1 / span 3;
  padding-top: 2px;
  color: var(--text-meta);
}

.health__head,
.health__headline,
.health__details {
  grid-column: 2;
}

.health__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.admin .health__name {
  margin: 0;
  font-size: 14px;
}

.health__state {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.health__headline {
  margin: 0;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.health__details {
  display: grid;
  gap: 2px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.health__item--ok .health__icon,
.health__item--ok .health__state {
  color: var(--ok);
}

.health__item--warn {
  border-color: var(--warning-border);
}

.health__item--warn .health__icon,
.health__item--warn .health__state {
  color: var(--thin-text);
}

.health__item--fail {
  border-color: var(--error-border);
  background: var(--error-surface);
}

.health__item--fail .health__icon,
.health__item--fail .health__state {
  color: var(--danger);
}

.health__checked {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-meta);
}

/* Сотрудники */

.admin__new {
  margin-bottom: 12px;
}

.admin__new>summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
}

.admin__new>summary::-webkit-details-marker {
  display: none;
}

.admin__new>form {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

/* --------------------------------------------------------------------------
   Строка-запись: сотрудник или запись справочника

   Раньше каждая строка держала открытыми все свои поля и кнопки, хотя обычно
   на этих страницах ничего не меняют — только смотрят.
   -------------------------------------------------------------------------- */

.prow,
.crow {
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  background: var(--surface);
}

.prow+.prow,
.crow+.crow {
  margin-top: 6px;
}

.prow__line,
.crow__line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
}

.prow__line::-webkit-details-marker,
.crow__line::-webkit-details-marker {
  display: none;
}

/* На телефоне имя, логин, Telegram ID и пометки в одну строку не входят:
   пометки уходят строкой ниже, а не за правый край. */
@media (max-width: 600px) {
  .prow__line,
  .crow__line {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

.prow__line:hover,
.crow__line:hover {
  background: var(--row-hover);
}

.prow[open]>.prow__line,
.crow[open]>.crow__line {
  border-bottom: 1px solid var(--border-inner);
}

.prow[open]>.prow__line svg:first-child,
.crow[open]>.crow__line svg:first-child {
  transform: rotate(180deg);
}

.prow__line>svg:first-child,
.crow__line>svg:first-child {
  flex: none;
  color: var(--text-meta);
}

.prow__name,
.crow__name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prow__login,
.prow__tg,
.crow__source {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.prow__login--none {
  font-style: italic;
}

.crow__uses {
  flex: none;
  min-width: 34px;
  text-align: right;
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* Ушедший сотрудник виден, но приглушён: его работа никуда не делась. */
.prow--gone .prow__line {
  opacity: 0.62;
}

.admin__badge--gone {
  border-color: var(--warning-border);
  background: var(--warning-surface);
  color: var(--text-secondary);
}

.admin__badge--admin {
  border-color: var(--accent-border);
  color: var(--accent);
}

.prow__editor,
.crow__editor {
  padding: 12px;
}

.crow__rename,
.crow__merge,
.crow__delete {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.crow__rename {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-inner);
}

.crow__merge {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-inner);
}

.crow__delete {
  padding-top: 12px;
  align-items: center;
}

.crow__rename input[type="text"] {
  flex: 1 1 260px;
}

.crow__merge .field--catalog {
  flex: 1 1 280px;
  min-width: 0;
}

.crow__rename label,
.crow__merge label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Строка о справочнике украинских названий: счётчик и путь к загрузке. */
.admin__directory {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.admin__directory svg {
  flex: none;
  color: var(--text-meta);
}

/* Украинское название стоит рядом с рабочим, тише его. */
.crow__ukrainian {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}

.crow__ukrainian::before {
  content: "· ";
}

.admin__head-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.admin__count {
  font-size: 12.5px;
  color: var(--text-muted);
}

.admin__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.admin__row-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.admin__row-id {
  font-size: 12px;
  color: var(--text-meta);
}

.admin__badge {
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border-inner);
  font-size: 11.5px;
  color: var(--text-muted);
}

.field--check {
  display: flex;
  align-items: flex-end;
}

.field--check label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.admin__password {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-inner);
  font-size: 12.5px;
  color: var(--text-muted);
}

.admin__password input {
  flex: 0 1 260px;
}

/* Свой профиль: смена пароля */

.account {
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px 20px 40px;
}

.account__card {
  max-width: 420px;
  padding: 20px 22px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.account__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.account__icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-card);
  background: var(--accent-soft);
  color: var(--accent);
}

.account :is(h1, h2) {
  margin: 1px 0 0;
  font-size: 16px;
}

/* Карточки одна под другой. В облике Windows 15 профиль — сетка со своим
   зазором, там это правило снято. */
.account__card+.account__card {
  margin-top: 16px;
}

.account__text {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.account__lead {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.account .notice {
  margin: 0 0 16px;
}

.account__fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account__hint {
  font-size: 12px;
  color: var(--text-meta);
}

.account__foot {
  display: flex;
  justify-content: flex-end;
  margin: 20px -22px 0;
  padding: 14px 22px 0;
  border-top: 1px solid var(--border-inner);
}

/* Выбор темы карточками в профиле. В прежних темах он в боковой панели, и
   дважды на одном экране ему не место, поэтому здесь скрыт. Облик Windows 15
   показывает карточки, а список в панели прячет. */
.account__theme {
  display: none;
}

/* Круг с буквой имени — только в облике Windows 15. */
.sidebar__avatar {
  display: none;
}

/* Клавиши в подсказках размечены <kbd>; в прежних темах они читаются
   обычным текстом, как было. */
kbd {
  font: inherit;
}

/* Слово о том, что пачка задач выполнена и куда они ушли. Уходит само. */
.toast {
  position: fixed;
  z-index: 50;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 40px));
  padding: 12px 16px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(16, 21, 27, 0.16);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.toast svg {
  flex: none;
  color: var(--text-completed);
}

.toast.is-leaving {
  opacity: 0;
  transition: opacity 200ms ease;
}

@media (max-width: 600px) {
  .account {
    padding: 16px;
  }

  .account__card {
    padding: 16px;
  }

  .account__foot {
    margin: 18px -16px 0;
    padding: 14px 16px 0;
  }

  .account__foot .btn {
    flex: 1 1 auto;
  }
}

/* Справочники */

.admin__search {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.admin__search input {
  flex: 0 1 320px;
  /* Поле ввода само по себе не уже ~150px — без этого «Искать» уезжал за
     край на узком телефоне. */
  min-width: 0;
}

.admin__empty {
  padding: 18px 12px;
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.field__note--plain {
  height: auto;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  display: block;
  line-height: 1.5;
}

.btn--danger {
  border-color: var(--danger-border, #e0b4b4);
  color: var(--danger, #b03030);
}

.btn--danger:hover {
  background: var(--danger-soft, #fbeaea);
}

/* Подпись поля и переключатель рядом с ней: «Аптека … ☐ Строго». */
.field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.field__toggle {
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Иначе на флажок ложится правило полей ввода: во всю ширину и 34px. */
.field .field__toggle input[type="checkbox"] {
  flex: none;
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

.jfilters .field__row {
  margin-bottom: 4px;
}

.jfilters .field__row label {
  margin-bottom: 0;
}

/* ==========================================================================
   Поиск задач: журнал и Bitrix одним списком
   ========================================================================== */

.search__form {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--border);
}

.search__text {
  flex: 2 1 280px;
}

.search__site {
  flex: 1 1 200px;
}

.search__form>.btn {
  flex: none;
}

/* По строке на источник: сколько нашлось или почему не искали. */
.search__sources {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
  font-size: 12.5px;
  color: var(--text-secondary);
}

.search__source {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}

.search__source-name {
  font-weight: 600;
  color: var(--text);
}

.search__muted {
  color: var(--text-muted);
}

.search__error {
  color: var(--error-text);
}

.search__more {
  color: var(--accent);
}

.search__list {
  flex: none;
  display: flex;
  flex-direction: column;
}

/* Одна строка — одна задача из любой системы: когда, откуда, что, где стоит. */
.srow {
  display: grid;
  grid-template-columns: 84px 62px minmax(0, 1fr) 200px;
  align-items: center;
  gap: 14px;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--row-divider);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.srow:hover {
  background: var(--row-hover);
}

.srow:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.srow__when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-secondary);
}

.srow__when span {
  color: var(--text-meta);
}

.srow__source {
  justify-self: start;
  padding: 2px 7px;
  border: 1px solid var(--border-inner);
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.srow__source--bitrix {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

.srow__main,
.srow__state {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.srow__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 13px;
  color: var(--text-table);
}

.srow__meta,
.srow__person {
  overflow: hidden;
  font-size: 12px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Узко: что случилось — во всю ширину, время и источник справа, статус
   строкой ниже. */
@media (max-width: 760px) {
  .search__form,
  .search__sources {
    padding-left: 12px;
    padding-right: 12px;
  }

  .search__form>.btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .srow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main when"
      "state source";
    gap: 6px 10px;
    padding: 10px 12px;
  }

  .srow__main {
    grid-area: main;
  }

  .srow__when {
    grid-area: when;
    align-items: flex-end;
  }

  .srow__source {
    grid-area: source;
    justify-self: end;
  }

  .srow__state {
    grid-area: state;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
  }
}

/* --------------------------------------------------------------------------
   Задача Bitrix в панели: открывается из списка, как запись журнала
   -------------------------------------------------------------------------- */

/* Строка задачи Bitrix — кнопка: открывает панель, а не уводит в Bitrix. */
button.srow {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--row-divider);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.srow[aria-expanded="true"] {
  background: var(--row-selected);
  box-shadow: inset 2px 0 0 0 var(--accent);
}

.spanel {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, calc(100vw - var(--sidebar-width)));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  background: var(--surface);
  box-shadow: -12px 0 32px rgba(16, 21, 27, 0.14);
}

.spanel[hidden],
.spanel__task[hidden] {
  display: none;
}

.spanel__close {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
}

.spanel__head {
  padding: 16px 48px 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}

.spanel__id {
  font-size: 12.5px;
  color: var(--text-meta);
}

.spanel__title {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  outline: none;
}

.spanel__facts {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--row-divider);
  font-size: 13px;
}

.spanel__facts dt {
  color: var(--text-muted);
}

.spanel__facts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Описание — текст как написан: абзацы и переносы строк на месте. */
.spanel__description {
  margin: 0;
  padding: 16px 20px 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.spanel__description--empty {
  color: var(--text-muted);
}

.spanel__foot {
  margin-top: auto;
  padding: 0 20px 20px;
}

@media (max-width: 680px) {
  .spanel {
    left: 0;
    width: auto;
    border-left: 0;
  }

  .spanel__facts {
    grid-template-columns: 104px minmax(0, 1fr);
  }
}

/* ==========================================================================
   Windows 95

   Шуточная, но рабочая схема: серые объёмные кнопки, вдавленные поля, синие
   заголовки окон, квадратные углы и системный шрифт. Цвета идут через те же
   токены, что у остальных тем. Объём нарисован тенями: скос из четырёх линий
   разного цвета рамкой не нарисовать, а тень не сдвигает раскладку.
   ========================================================================== */

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

  --w95-face: #c0c0c0;
  --w95-light: #dfdfdf;
  --w95-hilight: #ffffff;
  --w95-shadow: #808080;
  --w95-dark: #0a0a0a;
  --w95-navy: #000080;
  --w95-desktop: #008080;
  --w95-title: linear-gradient(90deg, #000080, #1084d0);
  --w95-dither: repeating-conic-gradient(#ffffff 0 25%, #c0c0c0 0 50%) 0 0 / 2px 2px;

  /* Кнопка: светлое сверху-слева, тёмное снизу-справа, в два ряда. */
  --w95-raised:
    inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hilight),
    inset -2px -2px var(--w95-shadow), inset 2px 2px var(--w95-light);
  /* Поле и нажатая кнопка: тот же скос, вывернутый внутрь. */
  --w95-sunken:
    inset -1px -1px var(--w95-hilight), inset 1px 1px var(--w95-shadow),
    inset -2px -2px var(--w95-light), inset 2px 2px var(--w95-dark);
  /* Рамка окна: у окна внешний светлый ряд темнее, чем у кнопки. */
  --w95-window:
    inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-light),
    inset -2px -2px var(--w95-shadow), inset 2px 2px var(--w95-hilight);
  /* Кнопка панели инструментов под мышью и ячейка строки состояния. */
  --w95-thin-raised: inset -1px -1px var(--w95-shadow), inset 1px 1px var(--w95-hilight);
  --w95-thin-sunken: inset -1px -1px var(--w95-hilight), inset 1px 1px var(--w95-shadow);
  /* Кнопка со стрелкой у выпадающего списка: стрелка и объёмная кнопка
     во всю высоту поля — два слоя, потому что кнопка тянется, а стрелка нет. */
  --w95-combo-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 6h7v1H4zM5 7h5v1H5zM6 8h3v1H6zM7 9h1v1H7z'/%3E%3C/svg%3E");
  --w95-combo-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' preserveAspectRatio='none'%3E%3Crect width='16' height='16' fill='%230a0a0a'/%3E%3Crect width='15' height='15' fill='%23dfdfdf'/%3E%3Crect x='1' y='1' width='14' height='14' fill='%23808080'/%3E%3Crect x='1' y='1' width='13' height='13' fill='%23fff'/%3E%3Crect x='2' y='2' width='12' height='12' fill='%23c0c0c0'/%3E%3C/svg%3E");
  /* Вкладка: светлый верх и левый край, тёмный правый. */
  --w95-tab:
    inset 1px 1px 0 var(--w95-hilight), inset -1px 0 0 var(--w95-dark),
    inset -2px 0 0 var(--w95-shadow);
  /* Рамка группы — вытравленная линия, как у «Истории» в раскрытой задаче. */
  --w95-etched: inset 1px 1px 0 var(--w95-hilight), 1px 1px 0 var(--w95-hilight);

  --font-sans: "Microsoft Sans Serif", "MS Sans Serif", Tahoma, Arial, sans-serif;
  --font-mono: "Fixedsys", "Lucida Console", "Courier New", monospace;
  --radius: 0;
  --radius-card: 0;

  --window: var(--w95-face);
  --surface: #ffffff;
  --surface-muted: var(--w95-face);
  --surface-sidebar: var(--w95-face);

  --border: var(--w95-shadow);
  --border-card: var(--w95-shadow);
  --border-inner: var(--w95-shadow);
  --row-divider: var(--w95-light);
  --field-border: var(--w95-shadow);
  --field-border-hover: var(--w95-dark);
  --separator: var(--w95-shadow);
  --footer-border: var(--w95-shadow);
  --detail-border: var(--w95-shadow);
  --subtle-border: var(--w95-light);
  --timeline-border: var(--w95-shadow);
  --timeline-line: var(--w95-light);

  --control-surface: var(--w95-face);
  --control-border: var(--w95-dark);
  --control-text: #000000;
  --control-hover: var(--w95-face);
  --disabled-surface: var(--w95-face);

  --text: #000000;
  --text-table: #000000;
  --text-secondary: #000000;
  --text-muted: #303030;
  --text-meta: #404040;
  --text-placeholder: var(--w95-shadow);
  --text-disabled: var(--w95-shadow);

  --accent: var(--w95-navy);
  --accent-press: var(--w95-navy);
  --accent-soft: var(--w95-light);
  --accent-border: var(--w95-navy);
  --on-accent: #ffffff;
  --button-accent: var(--w95-face);
  --button-accent-press: var(--w95-face);
  --focus-ring: #000000;

  --row-hover: #ffffff;
  --row-selected: var(--w95-light);
  --nav-hover: var(--w95-navy);
  --route-done: var(--w95-navy);
  --route-todo: var(--w95-light);
}

/* Углы квадратные у всего, кроме точек статуса: круг там — знак, а не
   украшение. Псевдоэлементы `*` не задевает, их точки остаются круглыми. */
:root[data-theme="win95"] * {
  border-radius: 0;
}

:root[data-theme="win95"] .event__dot,
:root[data-theme="win95"] .jflow__dot {
  border-radius: 50%;
}

:root[data-theme="win95"] ::selection {
  background: var(--w95-navy);
  color: #ffffff;
}

:root[data-theme="win95"] :focus-visible {
  outline: 1px dotted #000000;
  outline-offset: -4px;
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

:root[data-theme="win95"] .btn {
  border: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
  color: #000000;
  font-weight: 400;
}

:root[data-theme="win95"] .btn:hover {
  border: 0;
  background: var(--w95-face);
  color: #000000;
}

:root[data-theme="win95"] .btn:active,
:root[data-theme="win95"] .more[open]>summary.btn,
:root[data-theme="win95"] .admin__new[open]>summary.btn {
  box-shadow: var(--w95-sunken);
}

/* Кнопка по умолчанию — с чёрной обводкой вокруг обычного скоса. */
:root[data-theme="win95"] .btn--primary,
:root[data-theme="win95"] .btn--primary:hover {
  background: var(--w95-face);
  color: #000000;
  box-shadow:
    inset 0 0 0 1px var(--w95-dark),
    inset -2px -2px var(--w95-dark), inset 2px 2px var(--w95-hilight),
    inset -3px -3px var(--w95-shadow), inset 3px 3px var(--w95-light);
}

:root[data-theme="win95"] .btn--primary:active {
  box-shadow: inset 0 0 0 1px var(--w95-dark), inset 0 0 0 2px var(--w95-shadow);
}

:root[data-theme="win95"] .btn--danger {
  color: #800000;
}

:root[data-theme="win95"] .btn:disabled,
:root[data-theme="win95"] .btn:disabled:hover {
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
  color: var(--w95-shadow);
  text-shadow: 1px 1px 0 var(--w95-hilight);
}

/* Кнопки панели инструментов плоские, пока на них не наведут. */
:root[data-theme="win95"] .btn--quiet,
:root[data-theme="win95"] .btn--footer,
:root[data-theme="win95"] .icon-btn {
  background: transparent;
  box-shadow: none;
  color: #000000;
}

:root[data-theme="win95"] .btn--quiet:hover,
:root[data-theme="win95"] .btn--footer:hover,
:root[data-theme="win95"] .icon-btn:hover {
  background: transparent;
  box-shadow: var(--w95-thin-raised);
  color: #000000;
}

:root[data-theme="win95"] .btn--quiet:active,
:root[data-theme="win95"] .btn--footer:active,
:root[data-theme="win95"] .icon-btn:active,
:root[data-theme="win95"] .icon-btn[aria-current="page"] {
  background: var(--w95-dither);
  box-shadow: var(--w95-thin-sunken);
  color: #000000;
}

:root[data-theme="win95"] .icon-btn--bordered {
  border: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
}


/* --------------------------------------------------------------------------
   Поля
   -------------------------------------------------------------------------- */

:root[data-theme="win95"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
:root[data-theme="win95"] select,
:root[data-theme="win95"] textarea {
  border: 0;
  background-color: #ffffff;
  box-shadow: var(--w95-sunken);
  color: #000000;
}

:root[data-theme="win95"] input:not([type="checkbox"]):not([type="radio"]):focus-visible,
:root[data-theme="win95"] textarea:focus-visible {
  outline-offset: 1px;
}

:root[data-theme="win95"] input:disabled,
:root[data-theme="win95"] select:disabled,
:root[data-theme="win95"] textarea:disabled {
  background-color: var(--w95-face);
  color: var(--w95-shadow);
}

/* Выпадающий список: белое поле и серая кнопка со стрелкой во всю высоту.
   Кнопка растягивается по вертикали, стрелка — нет, поэтому это два слоя. */
:root[data-theme="win95"] select {
  appearance: none;
  padding-right: 24px;
  background-image: var(--w95-combo-arrow), var(--w95-combo-button);
  background-repeat: no-repeat;
  background-position: right 2px center, right 2px top 2px;
  background-size: 16px 16px, 16px calc(100% - 4px);
}

:root[data-theme="win95"] input[type="checkbox"] {
  appearance: none;
  width: 13px;
  height: 13px;
  margin: 0;
  flex: none;
  border: 0;
  background: #ffffff;
  box-shadow: var(--w95-sunken);
  cursor: pointer;
}

:root[data-theme="win95"] input[type="checkbox"]:checked {
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M9 3h1v1H9zM8 4h2v1H8zM3 5h1v1H3zM7 5h3v1H7zM3 6h2v1H3zM6 6h3v1H6zM3 7h5v1H3zM4 8h3v1H4zM5 9h1v1H5z'/%3E%3C/svg%3E") no-repeat;
}

:root[data-theme="win95"] input[type="checkbox"]:indeterminate {
  background: #ffffff linear-gradient(#000000, #000000) no-repeat center / 7px 2px;
}

/* --------------------------------------------------------------------------
   Окна: карточки, всплывающие меню, форма создания
   -------------------------------------------------------------------------- */

:root[data-theme="win95"] .login__card,
:root[data-theme="win95"] .account__card,
:root[data-theme="win95"] .compose,
:root[data-theme="win95"] .card,
:root[data-theme="win95"] .admin__card,
:root[data-theme="win95"] .admin__new>form,
:root[data-theme="win95"] .more__menu,
:root[data-theme="win95"] .combo__list,
:root[data-theme="win95"] .jfilters__period,
:root[data-theme="win95"] .snooze__panel {
  border: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-window);
}

:root[data-theme="win95"] .more__item:hover,
:root[data-theme="win95"] .combo__option--active,
:root[data-theme="win95"] .combo__option--new.combo__option--active {
  background: var(--w95-navy);
  color: #ffffff;
}

:root[data-theme="win95"] .combo__option--active *,
:root[data-theme="win95"] .more__item:hover * {
  color: inherit;
}

/* Заголовок окна: синяя полоса с белым жирным текстом. */
:root[data-theme="win95"] .topbar,
:root[data-theme="win95"] .compose__head {
  border-bottom: 0;
  background: var(--w95-title);
  color: #ffffff;
}

:root[data-theme="win95"] .topbar h1,
:root[data-theme="win95"] .compose__title {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0;
}

:root[data-theme="win95"] .compose__hint {
  color: var(--w95-light);
}

/* Плоская кнопка на синей полосе терялась: чёрное на синем. Здесь все
   кнопки объёмные, как у настоящего заголовка окна. */
:root[data-theme="win95"] .topbar .btn--quiet,
:root[data-theme="win95"] .topbar .btn--quiet:hover,
:root[data-theme="win95"] .topbar .icon-btn,
:root[data-theme="win95"] .topbar .icon-btn:hover {
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
  color: #000000;
}

:root[data-theme="win95"] .topbar .btn--quiet:active,
:root[data-theme="win95"] .topbar .icon-btn:active {
  box-shadow: var(--w95-sunken);
}

/* Кнопка закрытия в заголовке — маленькая объёмная, как у настоящего окна. */
:root[data-theme="win95"] .compose__head .icon-btn,
:root[data-theme="win95"] .compose__head .icon-btn:hover {
  width: 20px;
  height: 18px;
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
}

:root[data-theme="win95"] .compose__head .icon-btn:active {
  box-shadow: var(--w95-sunken);
}

:root[data-theme="win95"] .account__icon {
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
}

:root[data-theme="win95"] .notice {
  border: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-window);
  color: #000000;
}

:root[data-theme="win95"] .notice svg {
  color: #c00000;
}

:root[data-theme="win95"] .notice--ok svg {
  color: #008000;
}

/* --------------------------------------------------------------------------
   Боковая панель — как меню «Пуск»
   -------------------------------------------------------------------------- */

:root[data-theme="win95"] .sidebar {
  border-right: 0;
  box-shadow: var(--w95-window);
}

:root[data-theme="win95"] .sidebar__brand,
:root[data-theme="win95"] .sidebar__user {
  border-color: var(--w95-shadow);
}

:root[data-theme="win95"] .sidebar__brand {
  box-shadow: 0 1px 0 var(--w95-hilight);
}

:root[data-theme="win95"] .sidebar__user {
  box-shadow: inset 0 1px 0 var(--w95-hilight);
}

:root[data-theme="win95"] .sidebar__mark {
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
  color: var(--w95-navy);
}

:root[data-theme="win95"] .nav-item {
  color: #000000;
  font-weight: 400;
}

:root[data-theme="win95"] .nav-item:hover {
  background: var(--w95-navy);
  color: #ffffff;
}

/* Открытый раздел — нажатая кнопка на панели задач. */
:root[data-theme="win95"] .nav-item[aria-current="page"] {
  background: var(--w95-dither);
  box-shadow: var(--w95-sunken);
  color: #000000;
  font-weight: 700;
}

:root[data-theme="win95"] .nav-item--soon,
:root[data-theme="win95"] .nav-item--soon:hover,
:root[data-theme="win95"] .nav-item--soon .nav-item__soon {
  background: none;
  color: var(--w95-shadow);
  text-shadow: 1px 1px 0 var(--w95-hilight);
}

/* --------------------------------------------------------------------------
   Вкладки, список, строка состояния
   -------------------------------------------------------------------------- */

:root[data-theme="win95"] .tabs {
  border-bottom: 1px solid var(--w95-hilight);
}

:root[data-theme="win95"] .tab {
  margin: 8px 0 0;
  padding: 0 12px;
  border: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-tab);
  color: #000000;
  font-weight: 400;
}

:root[data-theme="win95"] .tab[aria-selected="true"] {
  position: relative;
  margin-top: 5px;
  margin-bottom: -1px;
  font-weight: 700;
}

:root[data-theme="win95"] .tab[aria-selected="true"] .tab__count {
  color: #000000;
}

:root[data-theme="win95"] .colhead {
  border-bottom: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
  color: #000000;
  font-weight: 400;
}

:root[data-theme="win95"] .statusbar {
  border-top: 1px solid var(--w95-hilight);
  /* Уголок для растягивания окна — только рисунок: окно здесь не тянется. */
  background: var(--w95-face) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 11h1v1h-1zM2 10h1v1h-1zM3 9h1v1h-1zM4 8h1v1h-1zM5 7h1v1h-1zM6 6h1v1h-1zM7 5h1v1h-1zM8 4h1v1h-1zM9 3h1v1h-1zM10 2h1v1h-1zM11 1h1v1h-1zM5 11h1v1h-1zM6 10h1v1h-1zM7 9h1v1h-1zM8 8h1v1h-1zM9 7h1v1h-1zM10 6h1v1h-1zM11 5h1v1h-1zM9 11h1v1h-1zM10 10h1v1h-1zM11 9h1v1h-1z' fill='%23fff'/%3E%3Cpath d='M2 11h1v1h-1zM3 10h1v1h-1zM4 9h1v1h-1zM5 8h1v1h-1zM6 7h1v1h-1zM7 6h1v1h-1zM8 5h1v1h-1zM9 4h1v1h-1zM10 3h1v1h-1zM11 2h1v1h-1zM3 11h1v1h-1zM4 10h1v1h-1zM5 9h1v1h-1zM6 8h1v1h-1zM7 7h1v1h-1zM8 6h1v1h-1zM9 5h1v1h-1zM10 4h1v1h-1zM11 3h1v1h-1zM6 11h1v1h-1zM7 10h1v1h-1zM8 9h1v1h-1zM9 8h1v1h-1zM10 7h1v1h-1zM11 6h1v1h-1zM7 11h1v1h-1zM8 10h1v1h-1zM9 9h1v1h-1zM10 8h1v1h-1zM11 7h1v1h-1zM10 11h1v1h-1zM11 10h1v1h-1zM11 11h1v1h-1z' fill='%23808080'/%3E%3C/svg%3E") no-repeat right 2px bottom 2px;
  color: #000000;
}

:root[data-theme="win95"] .statusbar>span:not(.dot-sep):not([hidden]) {
  min-width: 0;
  flex-shrink: 1;
  padding: 3px 6px;
  overflow: hidden;
  box-shadow: var(--w95-thin-sunken);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-theme="win95"] .statusbar>.dot-sep {
  display: none;
}

/* Не хватает места — первой сжимается подсказка по клавишам, а не «Показано
   3 из 3 задач»: число задач важнее списка сочетаний. */
@media (min-width: 681px) {
  :root[data-theme="win95"] .statusbar>span:not(.dot-sep):not([hidden]) {
    flex-shrink: 0;
  }

  :root[data-theme="win95"] .statusbar>span.statusbar__keys:not([hidden]) {
    flex-shrink: 1;
  }
}

:root[data-theme="win95"] .chip {
  border: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-thin-raised);
  color: #000000;
}

/* --------------------------------------------------------------------------
   Вход — окно на бирюзовом рабочем столе
   -------------------------------------------------------------------------- */

:root[data-theme="win95"] .login {
  background: var(--w95-desktop);
}

/* Заголовок окна во всю ширину: отступ карточки 28px, из них 3px — рамка. */
:root[data-theme="win95"] .login__brand {
  margin: -25px -25px 0;
  padding: 3px 4px;
  background: var(--w95-title);
  color: #ffffff;
}

:root[data-theme="win95"] .login__brand .sidebar__mark {
  width: 18px;
  height: 18px;
  font-size: 9px;
}

:root[data-theme="win95"] .login__brand h1 {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Окна на рабочем столе

   Рабочая область — бирюзовый рабочий стол, раздел на нём — окно с рамкой,
   синим заголовком со значком и серым телом. Окно смены пароля — отдельный
   диалог со своей рамкой, поэтому его раздел не обрамляется.
   -------------------------------------------------------------------------- */

:root[data-theme="win95"] .workspace {
  padding: 12px;
  background: var(--w95-desktop);
}

/* `:where` — чтобы отступы отдельных окон ниже (у «Управления» свои)
   перекрывали эти, а не проигрывали им по весу селектора. */
:root[data-theme="win95"] .workspace>:where(section:not(.account)) {
  padding: 3px;
  border: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-window);
}

/* Заголовок окна тонкий, как в Windows 95, а не шестьдесят пикселей. */
:root[data-theme="win95"] .topbar {
  height: auto;
  min-height: 0;
  padding: 3px 3px 3px 5px;
  gap: 8px;
}

:root[data-theme="win95"] .topbar h1 {
  font-size: 13px;
}

:root[data-theme="win95"] .topbar h1::before,
:root[data-theme="win95"] .admin>h1:first-child::before,
:root[data-theme="win95"] .admin__head-line>h1::before,
:root[data-theme="win95"] .journal-admin>h1:first-child::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='1' y='1' width='14' height='11' fill='%23c0c0c0'/%3E%3Crect x='1' y='1' width='14' height='1' fill='%23fff'/%3E%3Crect x='1' y='1' width='1' height='11' fill='%23fff'/%3E%3Crect x='14' y='1' width='1' height='11' fill='%23000'/%3E%3Crect x='1' y='11' width='14' height='1' fill='%23000'/%3E%3Crect x='3' y='3' width='10' height='7' fill='%23008080'/%3E%3Crect x='3' y='3' width='10' height='1' fill='%23000'/%3E%3Crect x='5' y='12' width='6' height='2' fill='%23808080'/%3E%3Crect x='3' y='14' width='10' height='1' fill='%23000'/%3E%3C/svg%3E");
}

:root[data-theme="win95"] .topbar .btn {
  height: 22px;
  padding: 0 8px;
  gap: 5px;
  font-size: 12px;
}

:root[data-theme="win95"] .topbar select {
  height: 22px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 12px;
}

/* У «Управления» заголовок страницы и есть заголовок окна. */
:root[data-theme="win95"] .workspace>.admin,
:root[data-theme="win95"] .workspace>.journal-admin {
  padding: 3px 17px 24px;
}

:root[data-theme="win95"] .admin>h1:first-child,
:root[data-theme="win95"] .admin>.admin__head-line:first-child,
:root[data-theme="win95"] .journal-admin>h1:first-child {
  margin: 0 -14px 14px;
  padding: 3px 6px;
  background: var(--w95-title);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

:root[data-theme="win95"] .admin__head-line>h1 {
  margin: 0;
  color: #ffffff;
  font-size: 13px;
}

:root[data-theme="win95"] .admin__head-line>.admin__count {
  color: var(--w95-light);
}

/* Смена пароля — диалог: «Смена пароля — логин» в заголовке, как
   «Документ — Блокнот». Пояснение вокруг логина остаётся для диктора. */
:root[data-theme="win95"] .account__card {
  padding: 3px 3px 14px;
}

:root[data-theme="win95"] .account__head {
  align-items: center;
  gap: 5px;
  margin: 0 0 14px;
  padding: 3px 6px;
  background: var(--w95-title);
  color: #ffffff;
}

:root[data-theme="win95"] .account__icon {
  width: 16px;
  height: 16px;
  background: none;
  box-shadow: none;
  color: #ffffff;
}

:root[data-theme="win95"] .account__icon svg {
  width: 14px;
  height: 14px;
}

:root[data-theme="win95"] .account__head>div {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  min-width: 0;
}

:root[data-theme="win95"] .account :is(h1, h2) {
  flex: none;
  margin: 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

:root[data-theme="win95"] .account__lead {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-theme="win95"] .account__lead .mono {
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
}

:root[data-theme="win95"] .account__lead .mono::before {
  content: "— ";
}

:root[data-theme="win95"] .account__card>:not(.account__head) {
  margin-left: 16px;
  margin-right: 16px;
}

:root[data-theme="win95"] .account__card>.account__foot {
  margin: 18px 16px 0;
  padding: 0;
  border-top: 0;
}

/* --------------------------------------------------------------------------
   Список, как в «Проводнике»
   -------------------------------------------------------------------------- */

/* Между заголовками колонок — вдавленные разделители. */
:root[data-theme="win95"] .colhead>* {
  position: relative;
}

:root[data-theme="win95"] .colhead>:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -9px;
  height: 22px;
  border-left: 1px solid var(--w95-shadow);
  border-right: 1px solid var(--w95-hilight);
  transform: translateY(-50%);
}

/* Раскрытая задача — выделенный элемент: синий фон, белый текст. */
:root[data-theme="win95"] .row:not(.jrow)[aria-current="true"] {
  background: var(--w95-navy);
  box-shadow: none;
}

:root[data-theme="win95"] .row:not(.jrow)[aria-current="true"] * {
  color: #ffffff;
}

:root[data-theme="win95"] .empty {
  border: 0;
  background: #ffffff;
  box-shadow: var(--w95-sunken);
}

/* Раскрытая задача — лист свойств: серый, разделы в рамках с подписью. */
:root[data-theme="win95"] .detail {
  border-bottom: 0;
  background: var(--w95-face);
  box-shadow: inset 0 -1px 0 var(--w95-shadow);
}

:root[data-theme="win95"] .detail__body {
  gap: 14px;
  padding-top: 22px;
}

:root[data-theme="win95"] .detail__col,
:root[data-theme="win95"] .detail__col+.detail__col {
  position: relative;
  margin-top: 0;
  padding: 16px 12px 12px;
  border: 1px solid var(--w95-shadow);
  box-shadow: inset 1px 1px 0 var(--w95-hilight), 1px 1px 0 var(--w95-hilight);
}

:root[data-theme="win95"] .detail__label {
  position: absolute;
  top: -8px;
  left: 8px;
  margin: 0;
  padding: 0 4px;
  background: var(--w95-face);
  color: #000000;
  font-weight: 400;
}

/* Маршрут задачи — полоса прогресса из синих брусков. */
:root[data-theme="win95"] .steps {
  position: relative;
  gap: 2px;
  margin-left: 4px;
  padding: 3px;
}

:root[data-theme="win95"] .steps::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 52px;
  height: 18px;
  background: #ffffff;
  box-shadow: var(--w95-sunken);
  transform: translateY(-50%);
}

:root[data-theme="win95"] .steps__dot,
:root[data-theme="win95"] .steps__dot--current {
  position: relative;
  width: 10px;
  height: 12px;
  background: transparent;
  opacity: 1;
}

:root[data-theme="win95"] .steps__dot--done,
:root[data-theme="win95"] .steps__dot--current {
  background: var(--w95-navy);
}

:root[data-theme="win95"] .steps__label {
  margin-left: 8px;
}

:root[data-theme="win95"] .more__menu {
  padding: 3px;
}

/* «…» — такая же объёмная кнопка, как «Отметить доставку» рядом: плоский
   значок среди объёмных кнопок не читался как кнопка. */
:root[data-theme="win95"] .more:not(.viewmenu)>summary,
:root[data-theme="win95"] .more:not(.viewmenu)>summary:hover {
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
  color: #000000;
}

:root[data-theme="win95"] .more:not(.viewmenu)[open]>summary {
  background: var(--w95-dither);
  box-shadow: var(--w95-sunken);
}

/* Выбранный с клавиатуры пункт и пункт с открытой панелью — синие, как
   под мышью. */
:root[data-theme="win95"] .more__item:focus-visible,
:root[data-theme="win95"] .more__menu .snooze[open]>.more__item {
  background: var(--w95-navy);
  color: #ffffff;
  outline: 0;
}

:root[data-theme="win95"] .more__item:focus-visible *,
:root[data-theme="win95"] .more__menu .snooze[open]>.more__item * {
  color: inherit;
}

/* Красный #a3242b на сером едва дотягивал до читаемого; тёмно-красный из
   палитры Windows 95 читается, а под курсором пункт всё равно белый. */
:root[data-theme="win95"] .more__item--danger {
  color: #800000;
}

:root[data-theme="win95"] .more__item--danger:hover,
:root[data-theme="win95"] .more__item--danger:focus-visible {
  color: #ffffff;
}

:root[data-theme="win95"] .more__sep {
  height: 0;
  margin: 3px 2px;
  border-top: 1px solid var(--w95-shadow);
  border-bottom: 1px solid var(--w95-hilight);
  background: none;
}

/* Карточка записи журнала — своё окно рядом со списком: рамка, заголовок
   в одну строку «#номер Аптека» и маленькая объёмная кнопка закрытия. */
:root[data-theme="win95"] .journal__detail {
  padding: 3px;
  border-left: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-window);
}

:root[data-theme="win95"] .jdetail__summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 30px 3px 6px;
  border-bottom: 0;
  background: var(--w95-title);
}

:root[data-theme="win95"] .jdetail__ticket-id,
:root[data-theme="win95"] .jdetail__title {
  flex: none;
  margin: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

:root[data-theme="win95"] .jdetail__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Вкладки карточки делят ширину поровну — как и в других темах, только
   это полоса вкладок Windows 95, а не переключатель на подложке. */
:root[data-theme="win95"] .jdetail__tabs {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--w95-hilight);
  background: none;
}

:root[data-theme="win95"] .jdetail__tabs .tab {
  margin: 3px 0 0;
  padding: 5px 4px;
}

:root[data-theme="win95"] .jdetail__tabs .tab[aria-selected="true"] {
  margin: 0 0 -1px;
  padding-bottom: 7px;
  background: var(--w95-face);
  box-shadow: var(--w95-tab);
  color: #000000;
}

:root[data-theme="win95"] .jdetail__close,
:root[data-theme="win95"] .jdetail__close:hover {
  top: 3px;
  right: 3px;
  width: 20px;
  height: 18px;
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
  color: #000000;
}

:root[data-theme="win95"] .jdetail__close:active {
  box-shadow: var(--w95-sunken);
}

/* Панель задачи Bitrix — своё окно: рамка, синий заголовок, объёмная кнопка
   закрытия; открытая строка выделена, как выбранный элемент. */
:root[data-theme="win95"] .spanel {
  padding: 3px;
  border-left: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-window);
}

:root[data-theme="win95"] .spanel__head {
  padding: 4px 32px 5px 6px;
  border-bottom: 0;
  background: var(--w95-title);
}

:root[data-theme="win95"] .spanel__id,
:root[data-theme="win95"] .spanel__title {
  color: #ffffff;
}

:root[data-theme="win95"] .spanel__title {
  font-size: 13px;
  font-weight: 700;
}

:root[data-theme="win95"] .spanel__close,
:root[data-theme="win95"] .spanel__close:hover {
  top: 6px;
  right: 6px;
  width: 20px;
  height: 18px;
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
}

:root[data-theme="win95"] .spanel__close:active {
  box-shadow: var(--w95-sunken);
}

:root[data-theme="win95"] .spanel__description {
  margin: 12px;
  padding: 10px 12px;
  background: #ffffff;
  box-shadow: var(--w95-sunken);
}

:root[data-theme="win95"] .srow[aria-expanded="true"] {
  background: var(--w95-navy);
  box-shadow: none;
}

:root[data-theme="win95"] .srow[aria-expanded="true"] * {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Полоса меню «Пуск» вдоль боковой панели
   -------------------------------------------------------------------------- */

/* Полоса добавляется к ширине панели, а не отнимается у пунктов меню. */
:root[data-theme="win95"] .sidebar {
  width: calc(var(--sidebar-width) + 24px);
  padding-left: 24px;
  background:
    linear-gradient(to top, var(--w95-navy), #1084d0) 3px 3px / 21px calc(100% - 6px) no-repeat,
    var(--w95-face);
}

:root[data-theme="win95"] .sidebar::after {
  content: "IT Desk 95";
  position: absolute;
  bottom: 10px;
  left: 3px;
  width: 21px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  pointer-events: none;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

/* В узкой полосе значков места под неё нет. */
@media (max-width: 1000px) {
  :root[data-theme="win95"]:not([data-sidebar="expanded"]) .sidebar {
    width: var(--sidebar-width);
    padding-left: 0;
    background: var(--w95-face);
  }

  :root[data-theme="win95"]:not([data-sidebar="expanded"]) .sidebar::after {
    content: none;
  }
}

:root[data-theme="win95"][data-sidebar="collapsed"] .sidebar {
  width: var(--sidebar-width);
  padding-left: 0;
  background: var(--w95-face);
}

:root[data-theme="win95"][data-sidebar="collapsed"] .sidebar::after {
  content: none;
}

/* На телефоне рабочий стол не виден: окно на всю ширину, и разделители
   единственной колонки не нужны. */
@media (max-width: 680px) {
  :root[data-theme="win95"] .workspace {
    padding: 0;
  }

  :root[data-theme="win95"] .colhead>*::after {
    content: none;
  }
}

/* --------------------------------------------------------------------------
   Переключатели и выпадающие поля

   Всё, что выбирает один вариант из нескольких, — кнопки панели инструментов:
   объёмные, а выбранная вдавлена и заштрихована. Сегментированные
   переключатели с белой плашкой из светлой темы здесь смотрелись чужими.
   -------------------------------------------------------------------------- */

/* Вкладки «Управления» — полоса вкладок, как у очереди, а не ряд кнопок:
   это разделы одного окна, а не действия. */
:root[data-theme="win95"] .admin__tabs {
  align-items: flex-end;
  gap: 0;
  border-bottom: 1px solid var(--w95-hilight);
}

:root[data-theme="win95"] .admin__tab {
  margin-top: 3px;
  padding: 4px 10px;
  border: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-tab);
  color: #000000;
  font-weight: 400;
}

:root[data-theme="win95"] .admin__tab--current {
  position: relative;
  margin-top: 0;
  margin-bottom: -1px;
  padding-bottom: 8px;
  font-weight: 700;
}

/* Статусы журнала — кнопки-переключатели панели инструментов. */
:root[data-theme="win95"] .journal__statuses a {
  border: 0;
  color: #000000;
}

:root[data-theme="win95"] .journal__statuses a:hover {
  background: transparent;
  box-shadow: var(--w95-thin-raised);
}

:root[data-theme="win95"] .journal__statuses a[aria-current="true"] {
  background: var(--w95-dither);
  box-shadow: var(--w95-thin-sunken);
  color: #000000;
  font-weight: 700;
}

/* «Период» открывает панель, но выглядит как соседний список «ИТ
   специалист»: белое вдавленное поле и кнопка со стрелкой. */
:root[data-theme="win95"] .jfilters__range>summary {
  padding-right: 24px;
  border: 0;
  background-color: #ffffff;
  background-image: var(--w95-combo-arrow), var(--w95-combo-button);
  background-repeat: no-repeat;
  background-position: right 2px center, right 2px top 2px;
  background-size: 16px 16px, 16px calc(100% - 4px);
  box-shadow: var(--w95-sunken);
  color: #000000;
}

:root[data-theme="win95"] .jfilters__range>summary::after {
  content: none;
}

:root[data-theme="win95"] .jfilters__period {
  top: calc(100% + 2px);
  padding: 12px;
}

:root[data-theme="win95"] .jperiods,
:root[data-theme="win95"] .schedule__views {
  gap: 4px;
  height: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
}

:root[data-theme="win95"] .jperiods__item,
:root[data-theme="win95"] .schedule__views button {
  min-height: 23px;
  padding: 0 10px;
  border: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
  color: #000000;
  font-weight: 400;
}

:root[data-theme="win95"] .jperiods__item:hover {
  background: var(--w95-face);
  color: #000000;
}

:root[data-theme="win95"] .jperiods__item:active,
:root[data-theme="win95"] .schedule__views button:active {
  box-shadow: var(--w95-sunken);
}

:root[data-theme="win95"] .jperiods__item[aria-current="true"],
:root[data-theme="win95"] .schedule__views button[aria-pressed="true"] {
  background: var(--w95-dither);
  box-shadow: var(--w95-sunken);
  color: #000000;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   График
   -------------------------------------------------------------------------- */

/* Обзор дня — рамка группы, без синей полосы сверху из светлой темы. */
:root[data-theme="win95"] .schedule__inspector {
  border: 1px solid var(--w95-shadow);
  box-shadow: var(--w95-etched);
}

/* Выбранный день в шапке — выделенный элемент. Было белое на сером: у
   кнопки акцентный фон здесь серый, а текст на нём оставался белым. */
:root[data-theme="win95"] .schedule__table thead button[aria-pressed="true"] {
  background: var(--w95-navy);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Полосы прокрутки

   Каждое правило дважды: `:root ::…` достаёт до всех прокручиваемых блоков,
   кроме самой страницы, а её полосе нужен псевдоэлемент у самого :root.
   -------------------------------------------------------------------------- */

:root[data-theme="win95"] ::-webkit-scrollbar,
:root[data-theme="win95"]::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

:root[data-theme="win95"] ::-webkit-scrollbar-track,
:root[data-theme="win95"]::-webkit-scrollbar-track {
  background: var(--w95-dither);
}

:root[data-theme="win95"] ::-webkit-scrollbar-thumb,
:root[data-theme="win95"]::-webkit-scrollbar-thumb {
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
}

:root[data-theme="win95"] ::-webkit-scrollbar-corner,
:root[data-theme="win95"]::-webkit-scrollbar-corner {
  background: var(--w95-face);
}

:root[data-theme="win95"] ::-webkit-scrollbar-button:single-button,
:root[data-theme="win95"]::-webkit-scrollbar-button:single-button {
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--w95-face);
  background-repeat: no-repeat;
  box-shadow: var(--w95-raised);
}

:root[data-theme="win95"] ::-webkit-scrollbar-button:single-button:active,
:root[data-theme="win95"]::-webkit-scrollbar-button:single-button:active {
  box-shadow: var(--w95-sunken);
}

:root[data-theme="win95"] ::-webkit-scrollbar-button:single-button:vertical:decrement,
:root[data-theme="win95"]::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7 6h1v1H7zM6 7h3v1H6zM5 8h5v1H5zM4 9h7v1H4z'/%3E%3C/svg%3E");
}

:root[data-theme="win95"] ::-webkit-scrollbar-button:single-button:vertical:increment,
:root[data-theme="win95"]::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 6h7v1H4zM5 7h5v1H5zM6 8h3v1H6zM7 9h1v1H7z'/%3E%3C/svg%3E");
}

:root[data-theme="win95"] ::-webkit-scrollbar-button:single-button:horizontal:decrement,
:root[data-theme="win95"]::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 7h1v1H6zM7 6h1v3H7zM8 5h1v5H8zM9 4h1v7H9z'/%3E%3C/svg%3E");
}

:root[data-theme="win95"] ::-webkit-scrollbar-button:single-button:horizontal:increment,
:root[data-theme="win95"]::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 4h1v7H6zM7 5h1v5H7zM8 6h1v3H8zM9 7h1v1H9z'/%3E%3C/svg%3E");
}

/* Браузерам без ::-webkit-scrollbar — хотя бы серые цвета. `scrollbar-color`
   там, где он есть, отключает правила выше, поэтому только здесь. */
@supports not selector(::-webkit-scrollbar) {
  :root[data-theme="win95"] {
    scrollbar-color: var(--w95-face) var(--w95-light);
  }
}

/* ==========================================================================
   Windows 15

   Облик по умолчанию для системной, светлой и тёмной схем: theme.js ставит
   `data-look="win15"`, если выбрана одна из них. Это следующий шаг Fluent,
   а не новая мода: окно стоит на слюде (Mica), содержимое лежит на слое
   поверх неё, всё всплывающее — акрил с размытием, у кнопок рельефная
   нижняя кромка, у полей — подчёркивание цветом акцента, выбранное место
   в меню и во вкладках отмечено короткой «таблеткой». Скругления чуть
   крупнее, чем в Windows 11, шрифт — Segoe UI Variable.

   Светлый и тёмный варианты — одни и те же правила. Каждый цвет записан
   парой через light-dark(), а какую половину взять, решает color-scheme,
   которую уже выставляют блоки тем в начале файла. Браузер без
   light-dark() этот облик не получает вовсе (см. theme.js).
   ========================================================================== */

:root[data-look="win15"] {
  /* Материалы: слюда под окном, слой под содержимым, карточка на слое. */
  --w15-mica: light-dark(#edf0f4, #1b1c1f);
  --w15-mica-tint: light-dark(rgb(10 91 196 / 0.07), rgb(92 189 251 / 0.05));
  --w15-mica-tint-2: light-dark(rgb(122 92 214 / 0.05), rgb(122 92 214 / 0.06));
  --w15-layer: light-dark(#f9fafb, #232427);
  --w15-layer-alt: light-dark(#f3f4f6, #28292d);
  --w15-card: light-dark(#ffffff, #2c2d31);
  --w15-card-hover: light-dark(#fbfbfc, #313236);
  /* Акрил: полупрозрачная заливка, размытие даёт backdrop-filter. */
  --w15-flyout: light-dark(rgb(251 251 252 / 0.84), rgb(44 45 49 / 0.86));
  --w15-flyout-solid: light-dark(#fbfbfc, #2c2d31);
  --w15-blur: blur(30px) saturate(160%);

  /* Заливки элементов управления */
  --w15-fill: light-dark(#ffffff, rgb(255 255 255 / 0.06));
  --w15-fill-hover: light-dark(#f7f8f9, rgb(255 255 255 / 0.09));
  --w15-fill-press: light-dark(#f2f3f5, rgb(255 255 255 / 0.04));
  --w15-fill-disabled: light-dark(#f5f6f7, rgb(255 255 255 / 0.04));
  --w15-fill-input-focus: light-dark(#ffffff, #1d1e21);
  --w15-subtle-hover: light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.06));
  --w15-subtle-press: light-dark(rgb(0 0 0 / 0.025), rgb(255 255 255 / 0.04));
  --w15-subtle-selected: light-dark(rgb(0 0 0 / 0.055), rgb(255 255 255 / 0.08));
  --w15-check-fill: light-dark(rgb(0 0 0 / 0.02), rgb(0 0 0 / 0.12));

  /* Линии. Рельеф кнопки — нижняя кромка темнее верхней. */
  --w15-stroke: light-dark(rgb(0 0 0 / 0.075), rgb(255 255 255 / 0.075));
  --w15-stroke-divider: light-dark(rgb(0 0 0 / 0.07), rgb(255 255 255 / 0.07));
  --w15-stroke-control: light-dark(rgb(0 0 0 / 0.075), rgb(255 255 255 / 0.07));
  --w15-stroke-control-top: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.1));
  --w15-stroke-control-bottom: light-dark(rgb(0 0 0 / 0.18), rgb(255 255 255 / 0.05));
  --w15-stroke-field-bottom: light-dark(rgb(0 0 0 / 0.46), rgb(255 255 255 / 0.5));
  --w15-stroke-strong: light-dark(rgb(0 0 0 / 0.46), rgb(255 255 255 / 0.55));
  --w15-stroke-flyout: light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.4));
  --w15-stroke-accent-top: light-dark(rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.1));
  --w15-stroke-accent-bottom: light-dark(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.16));

  /* Акцент: заливка, её наведение и нажатие, текст на ней и акцентный
     текст на слое. В тёмной теме заливка светлая, а текст на ней чёрный —
     как у Windows. */
  --w15-accent: light-dark(#0a5bc4, #5cbdfb);
  --w15-accent-hover: light-dark(#226bca, #56aee6);
  --w15-accent-press: light-dark(#3b7cd0, #519ed1);
  --w15-accent-disabled: light-dark(rgb(0 0 0 / 0.2), rgb(255 255 255 / 0.16));
  --w15-on-accent: light-dark(#ffffff, #000000);
  --w15-on-accent-press: light-dark(rgb(255 255 255 / 0.8), rgb(0 0 0 / 0.6));
  --w15-accent-text: light-dark(#0a5bc4, #7cc9ff);

  /* Сообщения: фон, значок */
  --w15-success-surface: light-dark(#dff6dd, #26351f);
  --w15-success: light-dark(#0f7b0f, #6ccb5f);
  --w15-critical-surface: light-dark(#fde7e9, #3f2426);
  --w15-critical: light-dark(#c42b1c, #ff99a4);
  --w15-caution-surface: light-dark(#fff4ce, #3d3218);
  --w15-caution: light-dark(#9d5d00, #fce100);

  /* Тени по высоте над слоем */
  --w15-shadow-card: 0 1px 2px light-dark(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.18));
  --w15-shadow-raised: 0 2px 4px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.26));
  --w15-shadow-flyout:
    0 8px 16px light-dark(rgb(0 0 0 / 0.13), rgb(0 0 0 / 0.34)),
    0 0 2px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.3));
  --w15-shadow-dialog:
    0 32px 64px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.46)),
    0 2px 21px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.34));

  /* Форма и движение */
  --w15-radius-control: 6px;
  --w15-radius-card: 10px;
  --w15-radius-overlay: 12px;
  --w15-radius-window: 14px;
  --w15-gap: 8px;
  --w15-ease: cubic-bezier(0, 0, 0, 1);
  --w15-fast: 83ms;
  --w15-normal: 167ms;
  --w15-slow: 250ms;

  --w15-font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  /* Стрелка выпадающего списка и галочка флажка — картинки, а цвет в них
     вписан. Тёмные варианты — в блоке ниже. */
  --w15-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235b5d63' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --w15-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --w15-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  /* Значок пустого списка: круг и рисунок в цветах акцента. */
  --w15-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23e5eefa'/%3E%3Cg fill='none' stroke='%230a5bc4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 26l3-8h12l3 8v5a2 2 0 0 1-2 2H17a2 2 0 0 1-2-2z'/%3E%3Cpath d='M15 26h5l2 3h4l2-3h5'/%3E%3C/g%3E%3C/svg%3E");
  --w15-empty-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23e5eefa'/%3E%3Cg fill='none' stroke='%230a5bc4' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='22.5' cy='22.5' r='7'/%3E%3Cpath d='m27.5 27.5 5.5 5.5'/%3E%3C/g%3E%3C/svg%3E");

  /* Токены приложения — теми же именами, что у остальных тем. */
  --font-sans: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
  --radius: var(--w15-radius-control);
  --radius-card: var(--w15-radius-card);

  --window: var(--w15-layer);
  --surface: var(--w15-card);
  --surface-muted: var(--w15-layer-alt);
  --surface-sidebar: transparent;

  --border: var(--w15-stroke);
  --border-card: var(--w15-stroke);
  --border-inner: var(--w15-stroke-divider);
  --row-divider: var(--w15-stroke-divider);
  --field-border: light-dark(rgb(0 0 0 / 0.14), rgb(255 255 255 / 0.14));
  --field-border-hover: light-dark(rgb(0 0 0 / 0.3), rgb(255 255 255 / 0.3));
  --detail-border: var(--w15-stroke);
  --subtle-border: var(--w15-stroke);
  --footer-border: var(--w15-stroke-divider);
  --timeline-border: light-dark(#a3a6ad, #7d8087);
  --timeline-line: light-dark(#dcdfe4, #3c3e44);
  --separator: light-dark(#b5b7bc, #5b5d63);

  --control-surface: var(--w15-fill);
  --control-border: var(--w15-stroke-control-bottom);
  --control-text: var(--text);
  --control-hover: light-dark(#eceef1, #35363b);
  --disabled-surface: var(--w15-fill-disabled);

  --text: light-dark(#1a1b1e, #ffffff);
  --text-table: light-dark(#26272b, #eceef1);
  --text-secondary: light-dark(#43454b, #d4d5d9);
  --text-muted: light-dark(#5b5d63, #b8bac0);
  --text-meta: light-dark(#66686e, #a8aab0);
  /* Не светлее: этим цветом и выходной «—» в графике, а он стоит на
     подсветке выбранного дня (#e5eefa) и должен читаться — 4,7 : 1. */
  --text-placeholder: light-dark(#66686e, #9a9ca2);
  --text-disabled: light-dark(#a0a2a8, #6f7176);

  --accent: var(--w15-accent-text);
  --accent-press: light-dark(#084a9f, #a6dbff);
  --accent-soft: light-dark(#e5eefa, #213449);
  --accent-border: light-dark(#a9c6ec, #3b6690);
  --on-accent: var(--w15-on-accent);
  --button-accent: var(--w15-accent);
  --button-accent-press: var(--w15-accent-hover);
  --focus-ring: light-dark(#1a1b1e, #ffffff);

  --row-hover: light-dark(#f2f3f5, #2a2b2f);
  --row-selected: light-dark(#eaf1fb, #233246);
  --nav-hover: var(--w15-subtle-hover);

  --shift-long: light-dark(#dde8f6, #283a4f);
  --shift-mid: light-dark(#dde8f6, #283a4f);
  --shift-short: light-dark(#dde8f6, #283a4f);
  --shift-range: light-dark(#dde8f6, #283a4f);
  --thin-surface: var(--w15-caution-surface);
  --thin-text: light-dark(#8a5300, #ffd76a);
  --ok: var(--w15-success);

  --danger: var(--w15-critical);
  --danger-border: light-dark(#f1bbb6, #6d3a3c);
  --danger-soft: var(--w15-critical-surface);
  --error-border: light-dark(#f3c7c3, #5f3437);
  --error-surface: var(--w15-critical-surface);
  --error-text: light-dark(#9f1d12, #ffb3ad);
  --warning-border: light-dark(#ecd48d, #66521f);
  --warning-surface: var(--w15-caution-surface);
  --rejected-text: light-dark(#b42318, #ff9d92);
  --rejected-dot: light-dark(#c42b1c, #ff8a7a);

  --dot-active: light-dark(#df8a00, #fcc545);
  --text-active: light-dark(#8a5300, #ffd580);
  --dot-delivered: light-dark(#00898e, #3fd1c9);
  --text-delivered: light-dark(#006b70, #7fe3dc);
  --dot-progress: light-dark(#0a5bc4, #5cbdfb);
  --text-progress: light-dark(#0a5bc4, #8fd1ff);
  --dot-completed: light-dark(#1b9a3a, #6ccb5f);
  --text-completed: light-dark(#0f7b2a, #8ede83);
  --dot-snoozed: light-dark(#8e9096, #9ea0a6);
  --text-snoozed: light-dark(#55575d, #c3c5ca);
  --route-done: var(--w15-accent);
  --route-todo: light-dark(#e1e3e7, #3a3b40);
}

/* То, что не цвет, light-dark() переключить не может: стрелка и галочка
   нарисованы картинкой. Тёмная тема задаётся дважды — выбором и системой. */
:root[data-look="win15"][data-theme="dark"] {
  --w15-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23c9cacf' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --w15-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --w15-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --w15-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23213449'/%3E%3Cg fill='none' stroke='%237cc9ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 26l3-8h12l3 8v5a2 2 0 0 1-2 2H17a2 2 0 0 1-2-2z'/%3E%3Cpath d='M15 26h5l2 3h4l2-3h5'/%3E%3C/g%3E%3C/svg%3E");
  --w15-empty-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23213449'/%3E%3Cg fill='none' stroke='%237cc9ff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='22.5' cy='22.5' r='7'/%3E%3Cpath d='m27.5 27.5 5.5 5.5'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root[data-look="win15"]:not([data-theme]) {
    --w15-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23c9cacf' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --w15-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --w15-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    --w15-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23213449'/%3E%3Cg fill='none' stroke='%237cc9ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 26l3-8h12l3 8v5a2 2 0 0 1-2 2H17a2 2 0 0 1-2-2z'/%3E%3Cpath d='M15 26h5l2 3h4l2-3h5'/%3E%3C/g%3E%3C/svg%3E");
    --w15-empty-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23213449'/%3E%3Cg fill='none' stroke='%237cc9ff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='22.5' cy='22.5' r='7'/%3E%3Cpath d='m27.5 27.5 5.5 5.5'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* --------------------------------------------------------------------------
   Основа: слюда, шрифт, выделение, полосы прокрутки
   -------------------------------------------------------------------------- */

/* Слюда не прокручивается вместе со страницей: она — окно, а не лист. */
:root[data-look="win15"] body {
  background:
    radial-gradient(1100px 720px at 0% 0%, var(--w15-mica-tint), transparent 70%),
    radial-gradient(900px 700px at 100% 100%, var(--w15-mica-tint-2), transparent 70%),
    var(--w15-mica);
  background-attachment: fixed;
}

:root[data-look="win15"] :is(h1, h2) {
  font-family: var(--w15-font-display);
  letter-spacing: 0;
}

:root[data-look="win15"] ::selection {
  background: light-dark(rgb(10 91 196 / 0.22), rgb(92 189 251 / 0.34));
}

/* Номера и счётчики — тем же шрифтом с моноширинными цифрами, а не
   машинописью: в Windows так пишут числа в списках. */
:root[data-look="win15"] :is(.tab__count, .row__num, .event__when, .journal__statuses span) {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* Тонкие полосы прокрутки: ползунок узкий и становится толще под мышью. */
:root[data-look="win15"] ::-webkit-scrollbar,
:root[data-look="win15"]::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

:root[data-look="win15"] ::-webkit-scrollbar-track,
:root[data-look="win15"]::-webkit-scrollbar-track,
:root[data-look="win15"] ::-webkit-scrollbar-corner,
:root[data-look="win15"]::-webkit-scrollbar-corner {
  background: transparent;
}

:root[data-look="win15"] ::-webkit-scrollbar-thumb,
:root[data-look="win15"]::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 999px;
  background: light-dark(rgb(0 0 0 / 0.3), rgb(255 255 255 / 0.3)) padding-box;
}

:root[data-look="win15"] ::-webkit-scrollbar-thumb:hover,
:root[data-look="win15"]::-webkit-scrollbar-thumb:hover {
  border-width: 3px;
  background-color: light-dark(rgb(0 0 0 / 0.46), rgb(255 255 255 / 0.46));
}

@supports not selector(::-webkit-scrollbar) {
  :root[data-look="win15"] {
    scrollbar-width: thin;
    scrollbar-color: light-dark(rgb(0 0 0 / 0.3), rgb(255 255 255 / 0.3)) transparent;
  }
}

/* --------------------------------------------------------------------------
   Каркас: боковая панель на слюде, содержимое — на слое

   Слой отступает от верха на восемь пикселей и скругляет левый верхний
   угол — так в Windows выглядит область содержимого рядом с навигацией.
   -------------------------------------------------------------------------- */

:root[data-look="win15"] .app {
  background: transparent;
}

:root[data-look="win15"] .workspace {
  margin-top: var(--w15-gap);
  border-top: 1px solid var(--w15-stroke);
  border-left: 1px solid var(--w15-stroke);
  border-top-left-radius: var(--w15-radius-window);
  background: var(--w15-layer);
}

@media (min-width: 1201px) {
  :root[data-look="win15"] .workspace--journal-detail {
    height: calc(100vh - var(--w15-gap));
  }
}

@media (max-width: 1200px) {
  :root[data-look="win15"] .workspace--journal-detail {
    height: calc(100dvh - var(--w15-gap));
  }
}

/* Страницы кладут себя прямо на слой: своя заливка закрыла бы скруглённый
   угол квадратным. */
:root[data-look="win15"] :is(.queue, .journal-admin) {
  border-right: 0;
  background: transparent;
}

:root[data-look="win15"] .sidebar {
  border-right: 0;
  background: transparent;
}

:root[data-look="win15"] .sidebar__brand {
  height: calc(var(--header-height) + var(--w15-gap));
  border-bottom: 0;
}

/* Значок приложения не меняется с темой, как и в Windows: синий квадрат
   со скруглением, светлым бликом сверху и тенью под ним. */
:root[data-look="win15"] .sidebar__mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(160deg, #3d8bf2 0%, #0a5bc4 55%, #0847a0 100%) #0a5bc4;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    inset 0 0 0 1px rgb(0 0 0 / 0.12),
    0 1px 3px rgb(0 0 0 / 0.22);
  color: #ffffff;
  font-family: var(--w15-font-display);
  font-size: 11px;
}

:root[data-look="win15"] .sidebar__title {
  font-family: var(--w15-font-display);
  font-size: 14px;
}

:root[data-look="win15"] .sidebar__nav {
  gap: 3px;
  padding: 4px 8px;
}

/* Пункт навигации: заливка при наведении, выбранный — чуть плотнее и с
   акцентной «таблеткой» у левого края. */
:root[data-look="win15"] .nav-item {
  position: relative;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 400;
  transition: background-color var(--w15-fast) linear, color var(--w15-fast) linear;
}

:root[data-look="win15"] .nav-item:hover {
  background: var(--w15-subtle-hover);
  color: var(--text);
}

:root[data-look="win15"] .nav-item:active {
  background: var(--w15-subtle-press);
  color: var(--text-secondary);
}

:root[data-look="win15"] .nav-item[aria-current="page"] {
  background: var(--w15-subtle-selected);
  color: var(--text);
  font-weight: 600;
}

:root[data-look="win15"] .nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 16px;
  margin-top: -8px;
  border-radius: 2px;
  background: var(--w15-accent);
  animation: w15-pill var(--w15-slow) var(--w15-ease);
}

:root[data-look="win15"] .nav-item--soon,
:root[data-look="win15"] .nav-item--soon:hover {
  background: none;
  color: var(--text-disabled);
}

:root[data-look="win15"] .sidebar>.theme-picker {
  margin: 8px 12px;
  color: var(--text-secondary);
}

/* Строке учётной записи тесно: кружок, имя с ролью и две кнопки в 216 px.
   Кнопки стоят вплотную, как в командной строке, а поля по бокам — 4 px:
   так имени с ролью остаётся 96 px, «Администратор» помещается целиком с
   воздухом до кнопок, а кружок встаёт по одной оси со значками меню. В
   свёрнутой полосе значков кнопки стоят столбиком, зазор между ними —
   row-gap. */
:root[data-look="win15"] .sidebar__user {
  column-gap: 0;
  row-gap: 6px;
  margin: 4px 4px 8px;
  padding: 8px;
  border-top: 0;
  border-radius: var(--w15-radius-card);
}

:root[data-look="win15"] .sidebar__identity {
  margin-right: 4px;
}

@keyframes w15-pill {
  from {
    transform: scaleY(0.2);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Шапка страницы, вкладки, строка состояния
   -------------------------------------------------------------------------- */

:root[data-look="win15"] .topbar {
  border-bottom-color: var(--w15-stroke-divider);
}

:root[data-look="win15"] .topbar h1 {
  font-size: 20px;
  font-weight: 600;
}

:root[data-look="win15"] .tabs {
  border-bottom-color: var(--w15-stroke-divider);
}

/* Вкладка — текст с заливкой при наведении; выбранная отмечена короткой
   полосой на линии под вкладками. */
:root[data-look="win15"] .tab {
  position: relative;
  margin: 7px 0;
  padding: 0 11px;
  border-bottom: 0;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-weight: 400;
  transition: background-color var(--w15-fast) linear, color var(--w15-fast) linear;
}

:root[data-look="win15"] .tab:hover {
  background: var(--w15-subtle-hover);
  color: var(--text);
}

:root[data-look="win15"] .tab:active {
  background: var(--w15-subtle-press);
}

:root[data-look="win15"] .tab[aria-selected="true"] {
  color: var(--text);
  font-weight: 600;
}

:root[data-look="win15"] .tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 20px;
  height: 3px;
  margin-left: -10px;
  border-radius: 3px;
  background: var(--w15-accent);
  animation: w15-underline var(--w15-slow) var(--w15-ease);
}

:root[data-look="win15"] .tab__count {
  color: var(--text-meta);
}

:root[data-look="win15"] .tab[aria-selected="true"] .tab__count {
  color: var(--accent);
}

@keyframes w15-underline {
  from {
    transform: scaleX(0.3);
    opacity: 0;
  }
}

@media (max-width: 1240px) {
  :root[data-look="win15"] .tabs__list {
    border-bottom-color: var(--w15-stroke-divider);
  }
}

:root[data-look="win15"] .colhead {
  border-bottom-color: var(--w15-stroke-divider);
  color: var(--text-secondary);
  font-weight: 400;
}

:root[data-look="win15"] .statusbar {
  border-top-color: var(--w15-stroke-divider);
  background: transparent;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

:root[data-look="win15"] .btn {
  border: 1px solid var(--w15-stroke-control);
  border-top-color: var(--w15-stroke-control-top);
  border-bottom-color: var(--w15-stroke-control-bottom);
  border-radius: var(--radius);
  background: var(--w15-fill);
  background-clip: padding-box;
  color: var(--text);
  font-weight: 400;
  transition:
    background-color var(--w15-fast) linear,
    border-color var(--w15-fast) linear,
    color var(--w15-fast) linear;
}

:root[data-look="win15"] .btn:hover {
  border-color: var(--w15-stroke-control);
  border-top-color: var(--w15-stroke-control-top);
  border-bottom-color: var(--w15-stroke-control-bottom);
  background-color: var(--w15-fill-hover);
  color: var(--text);
}

/* Нажатая кнопка теряет рельеф и притихает — как в Windows. */
:root[data-look="win15"] .btn:active {
  border-color: var(--w15-stroke-control);
  background-color: var(--w15-fill-press);
  color: var(--text-secondary);
}

:root[data-look="win15"] .btn:disabled,
:root[data-look="win15"] .btn:disabled:hover {
  border-color: var(--w15-stroke-control);
  background-color: var(--w15-fill-disabled);
  color: var(--text-disabled);
}

:root[data-look="win15"] .btn--primary {
  border-color: var(--w15-stroke-accent-top);
  border-bottom-color: var(--w15-stroke-accent-bottom);
  background-color: var(--w15-accent);
  color: var(--w15-on-accent);
  font-weight: 600;
}

:root[data-look="win15"] .btn--primary:hover {
  border-color: var(--w15-stroke-accent-top);
  border-bottom-color: var(--w15-stroke-accent-bottom);
  background-color: var(--w15-accent-hover);
  color: var(--w15-on-accent);
}

:root[data-look="win15"] .btn--primary:active {
  border-color: transparent;
  background-color: var(--w15-accent-press);
  color: var(--w15-on-accent-press);
}

:root[data-look="win15"] .btn--primary:disabled,
:root[data-look="win15"] .btn--primary:disabled:hover {
  border-color: transparent;
  background-color: var(--w15-accent-disabled);
  color: light-dark(#ffffff, rgb(255 255 255 / 0.5));
}

:root[data-look="win15"] .btn--danger {
  color: var(--w15-critical);
}

:root[data-look="win15"] .btn--danger:hover {
  background-color: var(--w15-critical-surface);
  color: var(--w15-critical);
}

/* Переключатель в нажатом положении. */
:root[data-look="win15"] .btn[aria-pressed="true"],
:root[data-look="win15"] .btn[aria-pressed="true"]:hover {
  border-color: var(--accent-border);
  background-color: var(--accent-soft);
  color: var(--accent);
}

:root[data-look="win15"] :is(.more, .snooze, .admin__new)[open]>summary.btn {
  border-color: var(--w15-stroke-control);
  background-color: var(--w15-fill-press);
  color: var(--text);
}

/* Кнопки со значком без подписи — «тихие»: фона нет, пока не навели. */
:root[data-look="win15"] .icon-btn,
:root[data-look="win15"] .more:not(.viewmenu)>summary {
  border-radius: var(--radius);
  color: var(--text-secondary);
  transition: background-color var(--w15-fast) linear, color var(--w15-fast) linear;
}

:root[data-look="win15"] .icon-btn:hover,
:root[data-look="win15"] .more:not(.viewmenu)>summary:hover,
:root[data-look="win15"] .more:not(.viewmenu)[open]>summary {
  background: var(--w15-subtle-hover);
  color: var(--text);
}

:root[data-look="win15"] .icon-btn:active,
:root[data-look="win15"] .more:not(.viewmenu)>summary:active {
  background: var(--w15-subtle-press);
  color: var(--text-secondary);
}

:root[data-look="win15"] .icon-btn[aria-current="page"] {
  background: var(--w15-subtle-selected);
  color: var(--accent);
}

:root[data-look="win15"] .icon-btn--bordered {
  border: 1px solid var(--w15-stroke-control);
  border-bottom-color: var(--w15-stroke-control-bottom);
  background: var(--w15-fill);
}

/* --------------------------------------------------------------------------
   Поля ввода, списки, флажки
   -------------------------------------------------------------------------- */

/* Поле: светлая заливка, тонкая рамка и тёмная нижняя кромка; в фокусе
   кромка становится акцентной и вдвое толще. Рамка фокуса полю не нужна —
   его фокус и есть эта кромка. */
:root[data-look="win15"] :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="submit"], [type="button"]), textarea) {
  border: 1px solid var(--w15-stroke-control);
  border-bottom-color: var(--w15-stroke-field-bottom);
  border-radius: var(--radius);
  background-color: var(--w15-fill);
  color: var(--text);
  transition: background-color var(--w15-fast) linear, border-color var(--w15-fast) linear;
}

:root[data-look="win15"] :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="submit"], [type="button"]), textarea):hover {
  background-color: var(--w15-fill-hover);
}

:root[data-look="win15"] :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="submit"], [type="button"]), textarea):focus {
  border-color: var(--w15-stroke-control);
  border-bottom-color: var(--w15-accent);
  background-color: var(--w15-fill-input-focus);
  box-shadow: inset 0 -1px 0 var(--w15-accent);
  outline: none;
}

:root[data-look="win15"] :is(input, textarea)::placeholder {
  color: var(--text-placeholder);
}

:root[data-look="win15"] :is(input, textarea, select):disabled {
  border-color: var(--w15-stroke-control);
  background-color: var(--w15-fill-disabled);
  color: var(--text-disabled);
}

/* Выпадающий список — кнопка со стрелкой справа, как ComboBox. */
:root[data-look="win15"] select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px;
  border: 1px solid var(--w15-stroke-control);
  border-top-color: var(--w15-stroke-control-top);
  border-bottom-color: var(--w15-stroke-control-bottom);
  border-radius: var(--radius);
  background: var(--w15-chevron) right 10px center / 12px 12px no-repeat, var(--w15-fill);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--w15-fast) linear;
}

:root[data-look="win15"] select:hover {
  background-color: var(--w15-fill-hover);
}

:root[data-look="win15"] select:active {
  background-color: var(--w15-fill-press);
}

:root[data-look="win15"] select option {
  background: var(--w15-flyout-solid);
  color: var(--text);
}

/* Загрузка файла: кнопка выбора — обычная кнопка Windows. */
:root[data-look="win15"] input[type="file"] {
  color: var(--text-secondary);
  font: inherit;
  font-size: 12.5px;
}

:root[data-look="win15"] input[type="file"]::file-selector-button {
  height: 32px;
  margin-right: 10px;
  padding: 0 14px;
  border: 1px solid var(--w15-stroke-control);
  border-top-color: var(--w15-stroke-control-top);
  border-bottom-color: var(--w15-stroke-control-bottom);
  border-radius: var(--radius);
  background: var(--w15-fill);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

:root[data-look="win15"] input[type="file"]::file-selector-button:hover {
  background: var(--w15-fill-hover);
}

/* Флажок: скруглённый квадрат, отмеченный — заливка акцентом с галочкой. */
:root[data-look="win15"] input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--w15-stroke-strong);
  border-radius: 4px;
  background: var(--w15-check-fill) center / 12px 12px no-repeat;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color var(--w15-fast) linear, border-color var(--w15-fast) linear;
}

:root[data-look="win15"] input[type="checkbox"]:hover {
  background-color: var(--w15-subtle-hover);
}

:root[data-look="win15"] input[type="checkbox"]:checked {
  border-color: var(--w15-accent);
  background-color: var(--w15-accent);
  background-image: var(--w15-check);
}

:root[data-look="win15"] input[type="checkbox"]:indeterminate {
  border-color: var(--w15-accent);
  background-color: var(--w15-accent);
  background-image: var(--w15-dash);
}

:root[data-look="win15"] input[type="checkbox"]:checked:hover,
:root[data-look="win15"] input[type="checkbox"]:indeterminate:hover {
  border-color: var(--w15-accent-hover);
  background-color: var(--w15-accent-hover);
}

:root[data-look="win15"] input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

:root[data-look="win15"] .field__note {
  border-color: light-dark(rgb(0 0 0 / 0.18), rgb(255 255 255 / 0.18));
}

:root[data-look="win15"] .field__note--found {
  border-color: var(--warning-border);
}

/* --------------------------------------------------------------------------
   Всплывающее: меню, подсказки, панели выбора

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

:root[data-look="win15"] :is(.more__menu, .combo__list, .snooze__panel, .jfilters__period) {
  border: 1px solid var(--w15-stroke-flyout);
  border-radius: var(--w15-radius-overlay);
  background: var(--w15-flyout-solid);
  box-shadow: var(--w15-shadow-flyout);
  animation: w15-reveal var(--w15-normal) var(--w15-ease);
}

:root[data-look="win15"] .more--up>.more__menu {
  animation-name: w15-reveal-up;
}

/* Размытие — только у тех, внутри кого нет прикреплённой к экрану панели. */
:root[data-look="win15"] :is(.combo__list, .jfilters__period, .snooze:not(.more__menu .snooze)>.snooze__panel) {
  background: var(--w15-flyout);
  -webkit-backdrop-filter: var(--w15-blur);
  backdrop-filter: var(--w15-blur);
}

@media (min-width: 681px) {
  :root[data-look="win15"] .more__menu {
    background: var(--w15-flyout);
    -webkit-backdrop-filter: var(--w15-blur);
    backdrop-filter: var(--w15-blur);
  }

  /* Панель внутри размытого меню не видит страницу за ним — ей нужна
     сплошная заливка, иначе она просвечивает без размытия. */
  :root[data-look="win15"] .more__menu .snooze__panel {
    background: var(--w15-flyout-solid);
  }
}

:root[data-look="win15"] .more__item {
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius);
  color: var(--text);
  transition: background-color var(--w15-fast) linear;
}

:root[data-look="win15"] .more__item:hover,
:root[data-look="win15"] .more__menu .snooze[open]>.more__item {
  background: var(--w15-subtle-hover);
}

:root[data-look="win15"] .more__item:active {
  background: var(--w15-subtle-press);
  color: var(--text-secondary);
}

:root[data-look="win15"] .more__item:focus-visible {
  background: var(--w15-subtle-hover);
}

:root[data-look="win15"] .more__item--danger {
  color: var(--w15-critical);
}

:root[data-look="win15"] .more__sep {
  margin: 4px -4px;
  background: var(--w15-stroke-divider);
}

:root[data-look="win15"] .combo__option {
  border-radius: var(--radius);
  transition: background-color var(--w15-fast) linear;
}

:root[data-look="win15"] .combo__option:hover,
:root[data-look="win15"] .combo__option--active {
  background: var(--w15-subtle-hover);
  color: var(--text);
}

/* Выбранный стрелками пункт отмечен той же таблеткой, что и навигация. */
:root[data-look="win15"] .combo__option--active {
  position: relative;
  background: var(--w15-subtle-selected);
}

:root[data-look="win15"] .combo__option--active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 16px;
  margin-top: -8px;
  border-radius: 2px;
  background: var(--w15-accent);
}

:root[data-look="win15"] :is(.combo__option--active, .combo__option:hover) :is(.combo__note, .combo__code, .combo__alt) {
  color: var(--text-muted);
}

:root[data-look="win15"] .combo__option--new {
  border-top-color: var(--w15-stroke-divider);
  border-radius: 0 0 var(--radius) var(--radius);
}

:root[data-look="win15"] .combo__option--new:hover,
:root[data-look="win15"] .combo__option--new.combo__option--active {
  color: var(--accent);
}

:root[data-look="win15"] .viewmenu .more__menu {
  width: 200px;
}

@keyframes w15-reveal {
  from {
    opacity: 0;
    clip-path: inset(0 0 calc(100% - 12px) 0 round 12px);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 12px);
  }
}

@keyframes w15-reveal-up {
  from {
    opacity: 0;
    clip-path: inset(calc(100% - 12px) 0 0 0 round 12px);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 12px);
  }
}

/* «Скопировано» — подсказка Windows: светлая плашка с рамкой и тенью. */
:root[data-look="win15"] .copyable[data-copied]::after,
:root[data-look="win15"] .copyable[data-copy-failed]::after {
  padding: 5px 9px;
  border: 1px solid var(--w15-stroke-flyout);
  border-radius: var(--radius);
  background: var(--w15-flyout-solid);
  box-shadow: var(--w15-shadow-flyout);
  color: var(--text);
  font-size: 12px;
  animation: w15-fade var(--w15-normal) var(--w15-ease);
}

@keyframes w15-fade {
  from {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Список задач: строки на слое, карточки над ним
   -------------------------------------------------------------------------- */

:root[data-look="win15"] .row {
  border-bottom-color: var(--w15-stroke-divider);
  background: transparent;
  transition: background-color var(--w15-fast) linear;
}

:root[data-look="win15"] .row:hover {
  background: var(--row-hover);
}

/* Открытая строка и клавиатурный курсор: таблетка у края вместо сплошной
   полосы. Она стоит вне сетки строки — абсолютно, — и колонок не сдвигает. */
:root[data-look="win15"] .row[aria-current="true"],
:root[data-look="win15"] .row.is-cursor {
  position: relative;
  box-shadow: none;
}

:root[data-look="win15"] .row[aria-current="true"] {
  background: var(--row-selected);
}

:root[data-look="win15"] :is(.row[aria-current="true"], .row.is-cursor)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 3px;
  height: 20px;
  margin-top: -10px;
  border-radius: 2px;
  background: var(--w15-accent);
  animation: w15-pill var(--w15-slow) var(--w15-ease);
}

:root[data-look="win15"] .row.is-cursor:not([aria-current="true"])::before {
  background: var(--text-meta);
}

:root[data-look="win15"] .row__site {
  letter-spacing: 0;
}

/* Раскрытая задача продолжает подсветку своей строки. */
:root[data-look="win15"] .detail {
  border-bottom-color: var(--w15-stroke-divider);
  background: var(--row-selected);
  box-shadow: none;
}

:root[data-look="win15"] .detail__head,
:root[data-look="win15"] .detail .route {
  border-bottom-color: var(--w15-stroke-divider);
}

:root[data-look="win15"] .card {
  border-color: var(--w15-stroke);
  border-radius: var(--w15-radius-card);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-card);
  transition:
    background-color var(--w15-fast) linear,
    border-color var(--w15-fast) linear,
    box-shadow var(--w15-normal) var(--w15-ease);
}

:root[data-look="win15"] .card:hover {
  background: var(--w15-card-hover);
  box-shadow: var(--w15-shadow-raised);
}

:root[data-look="win15"] .card[aria-current="true"],
:root[data-look="win15"] .card.is-cursor {
  border-color: var(--w15-accent);
  box-shadow: 0 0 0 1px var(--w15-accent), var(--w15-shadow-raised);
}

:root[data-look="win15"] .card[aria-current="true"] {
  background: var(--row-selected);
}

:root[data-look="win15"] .card__comment {
  border-top-color: var(--w15-stroke-divider);
}

:root[data-look="win15"] .cards>.detail {
  border: 1px solid var(--w15-stroke);
  border-radius: var(--w15-radius-card);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-raised);
}

:root[data-look="win15"] .is-picked {
  background: var(--row-selected);
}

/* Полоса выбора прилипает к верху — акрил, чтобы строки под ней читались. */
:root[data-look="win15"] .selbar {
  border-bottom-color: var(--w15-stroke-divider);
  background: var(--w15-flyout);
  -webkit-backdrop-filter: var(--w15-blur);
  backdrop-filter: var(--w15-blur);
}

/* Маршрут: четыре скруглённые полосы. */
:root[data-look="win15"] .route__bar {
  height: 4px;
  border-radius: 2px;
}

:root[data-look="win15"] .steps__dot--done {
  opacity: 0.45;
}

/* История: реплики — карточки на подсветке раскрытой строки. */
:root[data-look="win15"] .event__quote {
  border-color: var(--w15-stroke);
  border-radius: 4px var(--w15-radius-card) var(--w15-radius-card) var(--w15-radius-card);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-card);
}

/* Чипы и метки — таблетки. */
:root[data-look="win15"] .chip {
  border-color: var(--w15-stroke);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-card);
}

:root[data-look="win15"] .chip__clear:hover {
  background: var(--w15-subtle-hover);
}

:root[data-look="win15"] :is(.jchip, .journal__filter-tag) {
  border-radius: 999px;
}

:root[data-look="win15"] .jchip {
  padding-left: 12px;
}

:root[data-look="win15"] .jchip .icon-btn {
  border-radius: 999px;
}

:root[data-look="win15"] :is(.admin__badge, .srow__source) {
  border-color: var(--w15-stroke);
  background: var(--w15-layer-alt);
}

:root[data-look="win15"] :is(.srow__source--bitrix, .admin__badge--admin) {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

:root[data-look="win15"] .admin__badge--gone {
  border-color: var(--warning-border);
  background: var(--warning-surface);
}

/* Пустой список — спокойная плашка, без пунктирной рамки. */
:root[data-look="win15"] .empty {
  border: 1px solid var(--w15-stroke);
  border-radius: var(--w15-radius-overlay);
  background: var(--w15-layer-alt);
}

/* --------------------------------------------------------------------------
   Сообщения — как InfoBar: цвет у фона и значка, текст обычный
   -------------------------------------------------------------------------- */

:root[data-look="win15"] :is(.notice, .login__error) {
  border: 1px solid var(--w15-stroke);
  border-radius: var(--w15-radius-card);
  background: var(--w15-critical-surface);
  color: var(--text);
}

:root[data-look="win15"] .notice {
  gap: 10px;
  padding: 11px 14px;
}

:root[data-look="win15"] .notice svg {
  color: var(--w15-critical);
}

/* Сообщения без значка получают его здесь: по цвету плашки не всякий
   отличит ошибку от уведомления. */
:root[data-look="win15"] .notice:not(:has(svg))::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--w15-critical) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 4v5' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1' fill='%23fff'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* `role="status"` — сообщение о том, что получилось: зелёное, не красное. */
:root[data-look="win15"] .notice--ok,
:root[data-look="win15"] .notice[role="status"] {
  background: var(--w15-success-surface);
  color: var(--text);
}

:root[data-look="win15"] :is(.notice--ok, .notice[role="status"]) svg {
  color: var(--w15-success);
}

:root[data-look="win15"] .notice[role="status"]:not(:has(svg))::before {
  background: var(--w15-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4.8 8.2 7 10.4l4.2-4.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

:root[data-look="win15"] .jreplace {
  border-radius: var(--w15-radius-card);
}

/* --------------------------------------------------------------------------
   Формы-карточки: создание задачи, смена пароля, записи «Управления»

   Подвал с кнопками — отдельная полоса другого тона, как у диалога Windows.
   -------------------------------------------------------------------------- */

/* Углы подвала скруглены сами, а не обрезкой карточки: из поля аптеки
   вниз раскрывается список, и обрезка его бы срезала. */
:root[data-look="win15"] .compose {
  border-color: var(--w15-stroke);
  border-radius: var(--w15-radius-overlay);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-raised);
}

:root[data-look="win15"] .compose__head {
  height: 52px;
  padding: 0 12px 0 20px;
  border-bottom: 0;
}

:root[data-look="win15"] .compose__title {
  font-family: var(--w15-font-display);
  font-size: 16px;
}

:root[data-look="win15"] .compose__body {
  padding: 4px 20px 20px;
}

:root[data-look="win15"] .compose__foot {
  padding: 0 20px;
  border-top-color: var(--w15-stroke-divider);
  border-radius: 0 0 calc(var(--w15-radius-overlay) - 1px) calc(var(--w15-radius-overlay) - 1px);
  background: var(--w15-layer-alt);
}

:root[data-look="win15"] .detail--edit .compose {
  box-shadow: var(--w15-shadow-card);
}

:root[data-look="win15"] .account__card {
  border-color: var(--w15-stroke);
  border-radius: var(--w15-radius-overlay);
  box-shadow: var(--w15-shadow-raised);
}

:root[data-look="win15"] .account__icon {
  border-radius: var(--w15-radius-card);
}

:root[data-look="win15"] .account h1 {
  font-size: 18px;
  font-weight: 600;
}

:root[data-look="win15"] .account__foot {
  margin-bottom: -20px;
  padding-bottom: 14px;
  border-top-color: var(--w15-stroke-divider);
  border-radius: 0 0 calc(var(--w15-radius-overlay) - 1px) calc(var(--w15-radius-overlay) - 1px);
  background: var(--w15-layer-alt);
}

@media (max-width: 600px) {
  :root[data-look="win15"] .account__foot {
    margin-bottom: -16px;
  }
}

:root[data-look="win15"] .admin h1,
:root[data-look="win15"] .journal-admin h1 {
  font-size: 22px;
  font-weight: 600;
}

:root[data-look="win15"] .admin__tabs {
  gap: 2px;
  border-bottom-color: var(--w15-stroke-divider);
}

:root[data-look="win15"] .admin__tab {
  position: relative;
  margin-bottom: 6px;
  padding: 6px 12px;
  border-bottom: 0;
  border-radius: var(--radius);
  color: var(--text-secondary);
  transition: background-color var(--w15-fast) linear;
}

:root[data-look="win15"] .admin__tab:hover {
  background: var(--w15-subtle-hover);
  color: var(--text);
}

:root[data-look="win15"] .admin__tab--current {
  color: var(--text);
}

:root[data-look="win15"] .admin__tab--current::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 20px;
  height: 3px;
  margin-left: -10px;
  border-radius: 3px;
  background: var(--w15-accent);
}

/* Плитки обзора и строки-записи — карточки «Параметров» Windows. */
:root[data-look="win15"] .admin__card {
  gap: 2px 14px;
  padding: 16px;
  border-color: var(--w15-stroke);
  border-radius: var(--w15-radius-card);
  box-shadow: var(--w15-shadow-card);
  transition: background-color var(--w15-fast) linear, box-shadow var(--w15-normal) var(--w15-ease);
}

:root[data-look="win15"] .admin__card:hover {
  border-color: var(--w15-stroke);
  background: var(--w15-card-hover);
  box-shadow: var(--w15-shadow-raised);
}

:root[data-look="win15"] .admin__card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--w15-radius-card);
  background: var(--accent-soft);
}

/* Состояние: карточка «Обзора» и список систем. */
:root[data-look="win15"] .admin__card--warn {
  border-color: var(--warning-border);
  background: var(--warning-surface);
}

:root[data-look="win15"] .admin__card--fail {
  border-color: var(--error-border);
  background: var(--error-surface);
}

:root[data-look="win15"] .health__summary,
:root[data-look="win15"] .health__item {
  border-radius: var(--w15-radius-card);
}

:root[data-look="win15"] .health__item {
  border-color: var(--w15-stroke);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-card);
}

:root[data-look="win15"] .health__item--warn {
  border-color: var(--warning-border);
}

:root[data-look="win15"] .health__item--fail {
  border-color: var(--error-border);
  background: var(--error-surface);
}

/* Скругления строки и редактора заданы каждому, а не обрезкой записи: в
   «Объединить с…» раскрывается список, и обрезка его бы срезала. */
:root[data-look="win15"] :is(.prow, .crow) {
  border-color: var(--w15-stroke);
  border-radius: var(--w15-radius-card);
  box-shadow: var(--w15-shadow-card);
}

:root[data-look="win15"] :is(.prow, .crow)+:is(.prow, .crow) {
  margin-top: 4px;
}

:root[data-look="win15"] :is(.prow__line, .crow__line) {
  min-height: 48px;
  padding: 9px 16px;
  border-radius: calc(var(--w15-radius-card) - 1px);
  transition: background-color var(--w15-fast) linear;
}

:root[data-look="win15"] :is(.prow, .crow)[open]>:is(.prow__line, .crow__line) {
  border-radius: calc(var(--w15-radius-card) - 1px) calc(var(--w15-radius-card) - 1px) 0 0;
}

:root[data-look="win15"] :is(.prow__line, .crow__line):hover {
  background: var(--w15-card-hover);
}

:root[data-look="win15"] :is(.prow, .crow)[open]>:is(.prow__line, .crow__line) {
  border-bottom-color: var(--w15-stroke-divider);
}

:root[data-look="win15"] :is(.prow__editor, .crow__editor) {
  padding: 16px;
  border-radius: 0 0 calc(var(--w15-radius-card) - 1px) calc(var(--w15-radius-card) - 1px);
  background: var(--w15-layer-alt);
}

:root[data-look="win15"] .admin__new>form {
  border-color: var(--w15-stroke);
  border-radius: var(--w15-radius-card);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-card);
}

:root[data-look="win15"] .jstats {
  border-color: var(--w15-stroke);
  border-radius: var(--w15-radius-card);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-card);
}

:root[data-look="win15"] .journal-job {
  border-bottom-color: var(--w15-stroke-divider);
}

/* --------------------------------------------------------------------------
   Сегментные переключатели и фильтры-таблетки
   -------------------------------------------------------------------------- */

:root[data-look="win15"] :is(.schedule__views, .jperiods) {
  gap: 2px;
  padding: 2px;
  overflow: visible;
  border: 1px solid var(--w15-stroke);
  border-radius: calc(var(--radius) + 2px);
  background: var(--w15-subtle-press);
}

:root[data-look="win15"] .jperiods {
  height: auto;
}

:root[data-look="win15"] :is(.schedule__views button, .jperiods__item) {
  min-height: 26px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  transition: background-color var(--w15-fast) linear, color var(--w15-fast) linear;
}

:root[data-look="win15"] :is(.schedule__views button, .jperiods__item):hover {
  background: var(--w15-subtle-hover);
  color: var(--text);
}

:root[data-look="win15"] :is(.schedule__views button[aria-pressed="true"], .jperiods__item[aria-current="true"]) {
  border-color: var(--w15-stroke-control);
  border-bottom-color: var(--w15-stroke-control-bottom);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-card);
  color: var(--text);
  font-weight: 600;
}

:root[data-look="win15"] .jfilters__period .jperiods__item {
  min-height: 30px;
}

/* Статусы журнала — фильтры-таблетки. */
:root[data-look="win15"] .journal__statuses {
  gap: 6px;
  border-bottom-color: var(--w15-stroke-divider);
  background: transparent;
}

:root[data-look="win15"] .journal__statuses a {
  padding: 5px 11px;
  border: 1px solid var(--w15-stroke);
  border-radius: 999px;
  background: var(--w15-card);
  color: var(--text-secondary);
  transition: background-color var(--w15-fast) linear, border-color var(--w15-fast) linear;
}

:root[data-look="win15"] .journal__statuses a:hover {
  border-color: var(--w15-stroke);
  background: var(--w15-card-hover);
  color: var(--text);
}

:root[data-look="win15"] .journal__statuses a[aria-current="true"] {
  border-color: var(--w15-accent);
  background: var(--w15-accent);
  color: var(--w15-on-accent);
}

:root[data-look="win15"] .journal__results-head {
  background: transparent;
}

/* «Период» — поле со стрелкой, как соседние выпадающие списки. */
:root[data-look="win15"] .jfilters__range>summary {
  border: 1px solid var(--w15-stroke-control);
  border-top-color: var(--w15-stroke-control-top);
  border-bottom-color: var(--w15-stroke-control-bottom);
  background: var(--w15-fill);
  transition: background-color var(--w15-fast) linear;
}

:root[data-look="win15"] .jfilters__range>summary:hover {
  background: var(--w15-fill-hover);
}

:root[data-look="win15"] .jfilters__range>summary::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--w15-chevron) center / 12px 12px no-repeat;
}

:root[data-look="win15"] .jfilters__range[open]>summary::after {
  transform: rotate(180deg);
}

:root[data-look="win15"] .jfilters {
  border-bottom-color: var(--w15-stroke-divider);
}

/* --------------------------------------------------------------------------
   IT Журнал и поиск
   -------------------------------------------------------------------------- */

/* Заголовки колонок и дней прилипают — акрил поверх прокручиваемых строк. */
:root[data-look="win15"] :is(.journal .colhead, .journal__day) {
  border-bottom-color: var(--w15-stroke-divider);
  background: var(--w15-flyout);
  -webkit-backdrop-filter: var(--w15-blur);
  backdrop-filter: var(--w15-blur);
}

:root[data-look="win15"] .journal .statusbar {
  background: var(--w15-flyout);
  -webkit-backdrop-filter: var(--w15-blur);
  backdrop-filter: var(--w15-blur);
}

:root[data-look="win15"] .jrow:focus-within {
  background: var(--row-hover);
}

:root[data-look="win15"] .queue.journal .jrow[aria-current="true"] {
  background: var(--row-selected);
  box-shadow: none;
}

:root[data-look="win15"] .journal__detail {
  border-left-color: var(--w15-stroke-divider);
  background: var(--w15-layer-alt);
}

:root[data-look="win15"] .jdetail {
  background: transparent;
}

:root[data-look="win15"] .jdetail__summary {
  border-bottom-color: var(--w15-stroke-divider);
}

:root[data-look="win15"] .jdetail__title {
  font-family: var(--w15-font-display);
  font-size: 17px;
}

/* Вкладки панели — сегментный переключатель: выбранная поднята карточкой. */
:root[data-look="win15"] .jdetail__tabs {
  padding: 2px;
  border-color: var(--w15-stroke);
  border-radius: calc(var(--radius) + 3px);
  background: var(--w15-subtle-press);
}

:root[data-look="win15"] .jdetail__tabs .tab {
  margin: 0;
  padding: 8px 5px;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

:root[data-look="win15"] .jdetail__tabs .tab[aria-selected="true"] {
  border-color: var(--w15-stroke-control);
  border-bottom-color: var(--w15-stroke-control-bottom);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-card);
  color: var(--text);
}

:root[data-look="win15"] .jdetail__tabs .tab[aria-selected="true"]::after {
  bottom: 2px;
  width: 14px;
  margin-left: -7px;
}

:root[data-look="win15"] :is(.jdetail__body, .jdetail .apteka-info__pharmacy, .apteka-info__diagnostic-card) {
  border-color: var(--w15-stroke);
  border-radius: var(--w15-radius-card);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-card);
}

:root[data-look="win15"] :is(.jequip__machine, .jdetail .apteka-info__people li, .gear) {
  border-color: var(--w15-stroke);
  border-radius: var(--w15-radius-card);
  background: var(--w15-card);
}

:root[data-look="win15"] .jdetail__empty {
  border: 1px solid var(--w15-stroke);
  border-radius: var(--w15-radius-overlay);
  background: var(--w15-layer);
}

:root[data-look="win15"] :is(.apteka-status, .apteka-info__signal) {
  border-radius: 999px;
}

:root[data-look="win15"] .jattach img {
  border-color: var(--w15-stroke);
  border-radius: var(--w15-radius-card);
}

:root[data-look="win15"] .search__form {
  border-bottom-color: var(--w15-stroke-divider);
}

:root[data-look="win15"] .search__sources {
  border-bottom-color: var(--w15-stroke-divider);
  background: transparent;
}

:root[data-look="win15"] .srow {
  border-bottom-color: var(--w15-stroke-divider);
  background: transparent;
  transition: background-color var(--w15-fast) linear;
}

:root[data-look="win15"] .srow:hover {
  background: var(--row-hover);
}

:root[data-look="win15"] .srow[aria-expanded="true"] {
  position: relative;
  background: var(--row-selected);
  box-shadow: none;
}

:root[data-look="win15"] .srow[aria-expanded="true"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 3px;
  height: 20px;
  margin-top: -10px;
  border-radius: 2px;
  background: var(--w15-accent);
}

/* --------------------------------------------------------------------------
   Боковые панели — отдельные окна, парящие над страницей
   -------------------------------------------------------------------------- */

:root[data-look="win15"] .spanel {
  top: var(--w15-gap);
  right: var(--w15-gap);
  bottom: var(--w15-gap);
  width: min(560px, calc(100vw - var(--sidebar-width) - 2 * var(--w15-gap)));
  border: 1px solid var(--w15-stroke-flyout);
  border-radius: var(--w15-radius-window);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-dialog);
  animation: w15-pane var(--w15-slow) var(--w15-ease);
}

:root[data-look="win15"] .spanel__head {
  border-bottom-color: var(--w15-stroke-divider);
  background: var(--w15-layer-alt);
}

:root[data-look="win15"] .spanel__title {
  font-family: var(--w15-font-display);
  font-size: 18px;
}

:root[data-look="win15"] .spanel__facts {
  border-bottom-color: var(--w15-stroke-divider);
}

@media (max-width: 1200px) {
  :root[data-look="win15"] .journal__detail {
    inset: var(--w15-gap) var(--w15-gap) var(--w15-gap) auto;
    width: min(480px, calc(100vw - 2 * var(--w15-gap)));
    height: calc(100dvh - 2 * var(--w15-gap));
    overflow: hidden;
    border: 1px solid var(--w15-stroke-flyout);
    border-radius: var(--w15-radius-window);
    background: var(--w15-layer-alt);
    box-shadow: var(--w15-shadow-dialog);
    animation: w15-pane var(--w15-slow) var(--w15-ease);
  }
}

@media (max-width: 680px) {
  :root[data-look="win15"] .spanel {
    left: var(--w15-gap);
    width: auto;
    border-left: 1px solid var(--w15-stroke-flyout);
  }
}

@keyframes w15-pane {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

/* --------------------------------------------------------------------------
   График
   -------------------------------------------------------------------------- */

:root[data-look="win15"] .schedule__scroll {
  border-color: var(--w15-stroke);
  border-radius: var(--w15-radius-card);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-card);
}

:root[data-look="win15"] .schedule__table thead th {
  border-bottom-color: var(--w15-stroke-divider);
}

:root[data-look="win15"] .schedule__table thead button {
  border-radius: var(--radius);
  transition: background-color var(--w15-fast) linear;
}

:root[data-look="win15"] .schedule__table thead button:hover {
  background: var(--w15-subtle-hover);
}

:root[data-look="win15"] .schedule__table thead button[aria-pressed="true"] {
  background: var(--w15-accent);
  color: var(--w15-on-accent);
}

:root[data-look="win15"] .schedule__table tr> :first-child {
  border-right-color: var(--w15-stroke-divider);
}

:root[data-look="win15"] .schedule__inspector {
  border: 1px solid var(--w15-stroke);
  border-radius: var(--w15-radius-overlay);
  background: var(--w15-card);
  box-shadow: var(--w15-shadow-raised);
}

:root[data-look="win15"] :is(.schedule__metric, .schedule__inspector-list li) {
  border-color: var(--w15-stroke);
  border-radius: var(--radius);
  background: var(--w15-layer-alt);
}

:root[data-look="win15"] .schedule__metric {
  border-radius: var(--w15-radius-card);
}

:root[data-look="win15"] .schedule__metric strong {
  font-family: var(--w15-font-display);
  font-size: 20px;
  font-weight: 600;
}

:root[data-look="win15"] .schedule__assignment-value {
  border-radius: var(--w15-radius-card);
  background: var(--w15-layer-alt);
  font-family: var(--w15-font-display);
}

:root[data-look="win15"] .schedule__archive-link {
  border-bottom-color: var(--w15-stroke-divider);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Вход — экран входа Windows: мягкое «цветение» за акриловой карточкой
   -------------------------------------------------------------------------- */

:root[data-look="win15"] .login {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(42% 60% at 18% 30%, light-dark(rgb(10 91 196 / 0.26), rgb(10 91 196 / 0.42)), transparent 70%),
    radial-gradient(38% 55% at 82% 72%, light-dark(rgb(122 92 214 / 0.2), rgb(122 92 214 / 0.34)), transparent 70%),
    radial-gradient(30% 45% at 70% 18%, light-dark(rgb(92 189 251 / 0.28), rgb(0 120 212 / 0.3)), transparent 70%),
    var(--w15-mica);
}

/* Лепестки: два размытых эллипса, повёрнутых друг к другу. Только фон —
   ничего не закрывают и на нажатия не отвечают. */
:root[data-look="win15"] .login::before,
:root[data-look="win15"] .login::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 70vmax;
  height: 32vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}

:root[data-look="win15"] .login::before {
  top: 38%;
  left: -18%;
  background: linear-gradient(90deg, light-dark(#8ec5ff, #0a4fa8), light-dark(#c9b8ff, #4a2f9a));
  transform: rotate(-24deg);
}

:root[data-look="win15"] .login::after {
  top: 18%;
  right: -22%;
  background: linear-gradient(90deg, light-dark(#b9dcff, #0b3d80), light-dark(#7fb0ff, #1462c9));
  transform: rotate(28deg);
}

:root[data-look="win15"] .login__card {
  position: relative;
  z-index: 1;
  max-width: 380px;
  gap: 20px;
  padding: 32px;
  border: 1px solid light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.09));
  border-radius: var(--w15-radius-window);
  background: light-dark(rgb(255 255 255 / 0.72), rgb(36 37 41 / 0.72));
  -webkit-backdrop-filter: blur(40px) saturate(170%);
  backdrop-filter: blur(40px) saturate(170%);
  box-shadow: var(--w15-shadow-dialog);
  animation: w15-rise var(--w15-slow) var(--w15-ease);
}

:root[data-look="win15"] .login__brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

:root[data-look="win15"] .login__brand .sidebar__mark {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  font-size: 17px;
}

:root[data-look="win15"] .login__card h1 {
  font-size: 24px;
  font-weight: 600;
}

:root[data-look="win15"] .login__form .btn {
  height: 36px;
}

:root[data-look="win15"] .login__card>.theme-picker {
  margin-top: 4px;
  color: var(--text-secondary);
}

@keyframes w15-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

/* --------------------------------------------------------------------------
   Диалог подтверждения — ContentDialog вместо окна браузера

   Строит его app.js, когда действие нельзя отменить (hx-confirm и
   data-confirm). Заголовок — сам вопрос, под ним пояснение, внизу полоса
   с кнопками поровну: согласие словами кнопки, начавшей действие, и
   «Отмена», на которой стоит фокус.
   -------------------------------------------------------------------------- */

:root[data-look="win15"] .cdialog {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--w15-stroke-flyout);
  border-radius: var(--w15-radius-overlay);
  background: var(--w15-card);
  color: var(--text);
  box-shadow: var(--w15-shadow-dialog);
}

:root[data-look="win15"] .cdialog[open] {
  animation: w15-dialog var(--w15-slow) var(--w15-ease);
}

:root[data-look="win15"] .cdialog::backdrop {
  background: light-dark(rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.5));
  animation: w15-fade var(--w15-normal) linear;
}

:root[data-look="win15"] .cdialog__body {
  display: grid;
  gap: 10px;
  padding: 24px 24px 22px;
}

:root[data-look="win15"] .cdialog__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

:root[data-look="win15"] .cdialog__text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.5;
}

:root[data-look="win15"] .cdialog__foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 20px 24px;
  border-top: 1px solid var(--w15-stroke-divider);
  border-radius: 0 0 calc(var(--w15-radius-overlay) - 1px) calc(var(--w15-radius-overlay) - 1px);
  background: var(--w15-layer-alt);
}

/* Подпись кнопки берётся с кнопки, начавшей действие, и бывает длинной:
   на телефоне она переносится, а не вылезает за край. */
:root[data-look="win15"] .cdialog__foot .btn {
  justify-content: center;
  min-width: 0;
  height: auto;
  min-height: 32px;
  padding-block: 6px;
  text-align: center;
  white-space: normal;
}

/* Необратимое — красной кнопкой: удаление не должно выглядеть как «ОК». */
:root[data-look="win15"] .cdialog .btn--primary.btn--danger {
  border-color: transparent;
  background-color: var(--w15-critical);
  color: light-dark(#ffffff, #000000);
}

:root[data-look="win15"] .cdialog .btn--primary.btn--danger:hover {
  background-color: light-dark(#ae2517, #ff8a97);
  color: light-dark(#ffffff, #000000);
}

:root[data-look="win15"] .cdialog .btn--primary.btn--danger:active {
  background-color: light-dark(#9b2014, #f27d8a);
  color: light-dark(rgb(255 255 255 / 0.8), rgb(0 0 0 / 0.6));
}

/* На телефоне поля уже: «Отключить доступ» помещается на кнопке в одну
   строку, а не в две. */
@media (max-width: 480px) {
  :root[data-look="win15"] .cdialog__body {
    padding: 20px 20px 18px;
  }

  :root[data-look="win15"] .cdialog__foot {
    padding: 16px 20px;
  }

  :root[data-look="win15"] .cdialog__foot .btn {
    padding-inline: 10px;
  }
}

@keyframes w15-dialog {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
}

/* --------------------------------------------------------------------------
   Полоса загрузки и переход между разделами

   data-busy ставит app.js, когда ответ задерживается дольше трети секунды.
   Полоса — неопределённый ProgressBar Windows: короткий отрезок бежит по
   верху области содержимого, над ней, в полосе слюды.
   -------------------------------------------------------------------------- */

:root[data-look="win15"][data-busy] body::after {
  content: "";
  position: fixed;
  z-index: 60;
  top: 2px;
  right: var(--w15-radius-window);
  left: calc(var(--sidebar-width) + var(--w15-radius-window));
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(var(--w15-accent), var(--w15-accent)) 0 0 / 34% 100% no-repeat;
  pointer-events: none;
  animation: w15-progress 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes w15-progress {
  from {
    background-position: -60% 0;
  }

  to {
    background-position: 160% 0;
  }
}

/* Новая страница въезжает снизу, как при переходе в Windows. Движется
   содержимое, а не слой под ним: рамка окна на месте. */
:root[data-look="win15"] .workspace.is-entering>* {
  animation: w15-page var(--w15-slow) var(--w15-ease);
}

@keyframes w15-page {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* --------------------------------------------------------------------------
   Выпадающие списки

   Где браузер разрешает рисовать список вариантов самому (appearance:
   base-select), он открывается меню Windows 15 — акрил, скругление,
   таблетка у выбранного, — а не системным списком браузера. Остальные
   браузеры показывают свой список, как раньше.
   -------------------------------------------------------------------------- */

@supports (appearance: base-select) {
  :root[data-look="win15"] select,
  :root[data-look="win15"] select::picker(select) {
    appearance: base-select;
  }

  /* Такое поле — flex-контейнер, и без этого подпись в поле высотой 34px
     прилипала к верхнему краю. */
  :root[data-look="win15"] select {
    align-items: center;
  }

  /* Стрелка уже нарисована фоном поля — своя у списка лишняя. */
  :root[data-look="win15"] select::picker-icon {
    display: none;
  }

  :root[data-look="win15"] select::picker(select) {
    margin-block: 4px;
    padding: 4px;
    border: 1px solid var(--w15-stroke-flyout);
    border-radius: var(--w15-radius-overlay);
    background: var(--w15-flyout);
    -webkit-backdrop-filter: var(--w15-blur);
    backdrop-filter: var(--w15-blur);
    box-shadow: var(--w15-shadow-flyout);
    color: var(--text);
    animation: w15-reveal var(--w15-normal) var(--w15-ease);
  }

  :root[data-look="win15"] select option {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    transition: background-color var(--w15-fast) linear;
  }

  :root[data-look="win15"] select option::checkmark {
    display: none;
  }

  :root[data-look="win15"] select option:hover,
  :root[data-look="win15"] select option:focus-visible {
    background: var(--w15-subtle-hover);
    outline: none;
  }

  :root[data-look="win15"] select option:checked {
    background: var(--w15-subtle-selected);
    font-weight: 600;
  }

  :root[data-look="win15"] select option:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 16px;
    margin-top: -8px;
    border-radius: 2px;
    background: var(--w15-accent);
  }
}

@media (pointer: coarse) {
  :root[data-look="win15"] select option {
    min-height: 40px;
  }
}

/* --------------------------------------------------------------------------
   Карточка записи журнала на широком экране — отдельная панель, как панель
   сведений в Проводнике: со своими скруглёнными углами и отступом от краёв.
   -------------------------------------------------------------------------- */

@media (min-width: 1201px) {
  :root[data-look="win15"] .journal__detail {
    margin: var(--w15-gap);
    border: 1px solid var(--w15-stroke);
    border-radius: var(--w15-radius-overlay);
    background: var(--w15-layer-alt);
    box-shadow: var(--w15-shadow-raised);
  }
}

/* --------------------------------------------------------------------------
   Пустой список и ожидание ответа
   -------------------------------------------------------------------------- */

/* Над подписью — значок в круге цвета акцента: в поиске лупа, в остальных
   списках лоток. */
:root[data-look="win15"] .empty {
  gap: 4px;
  padding: 32px 16px 36px;
}

:root[data-look="win15"] .empty::before {
  content: "";
  flex: none;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  background: var(--w15-empty-icon) center / 48px 48px no-repeat;
}

:root[data-look="win15"] .search-page .empty::before {
  background-image: var(--w15-empty-search-icon);
}

:root[data-look="win15"] .empty__title {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

/* «загружаю…» у Bitrix — с кольцом ProgressRing, а не одним словом. */
:root[data-look="win15"] .search__pending {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

:root[data-look="win15"] .search__pending::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--w15-stroke);
  border-top-color: var(--w15-accent);
  border-radius: 50%;
  animation: w15-spin 0.9s linear infinite;
}

@keyframes w15-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Очередь: полоса вкладок как командная строка Windows

   Вкладки никогда не обрезаются. Раньше при открытой боковой панели на
   экране 1280 px поиск с переключателями отнимал у вкладок место, и
   «Отложенные» уходили за край. Теперь, когда тесно, вся группа поиска
   встаёт строкой ниже. Полоса прилипает к верху, пока список прокручивается.
   -------------------------------------------------------------------------- */

@media (min-width: 1241px) {
  :root[data-look="win15"] .tabs {
    height: auto;
    min-height: var(--tabs-height);
    flex-wrap: wrap;
    align-items: center;
  }

  :root[data-look="win15"] .tabs__list {
    flex: 0 0 auto;
    height: var(--tabs-height);
  }

  :root[data-look="win15"] .tabs>.spacer {
    flex: 1 1 0;
  }

  :root[data-look="win15"] .tabs__controls {
    min-height: var(--tabs-height);
    margin-left: auto;
    padding-left: 0;
  }
}

@media (min-width: 681px) {
  :root[data-look="win15"] .tabs {
    position: sticky;
    z-index: 4;
    top: 0;
    background: var(--w15-flyout);
    -webkit-backdrop-filter: var(--w15-blur);
    backdrop-filter: var(--w15-blur);
  }
}

/* «Строго» и «Только мои» — переключатели командной строки, а не флажки
   с подписью: включённый выглядит нажатым. Сам флажок остаётся в разметке —
   он и принимает фокус, и сообщает состояние диктору. */
:root[data-look="win15"] .tabs__controls .checkbox,
:root[data-look="win15"] .field__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--w15-stroke-control);
  border-top-color: var(--w15-stroke-control-top);
  border-bottom-color: var(--w15-stroke-control-bottom);
  background: var(--w15-fill);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--w15-fast) linear, border-color var(--w15-fast) linear, color var(--w15-fast) linear;
}

:root[data-look="win15"] .tabs__controls .checkbox {
  height: 29px;
  padding: 0 11px;
  border-radius: var(--radius);
  font-size: 12.5px;
}

/* У поля аптеки — поменьше, в строке подписи. */
:root[data-look="win15"] .field__toggle {
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
}

:root[data-look="win15"] :is(.tabs__controls .checkbox, .field__toggle) input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

:root[data-look="win15"] :is(.tabs__controls .checkbox, .field__toggle):hover {
  background-color: var(--w15-fill-hover);
}

:root[data-look="win15"] :is(.tabs__controls .checkbox, .field__toggle):has(input:checked) {
  border-color: var(--accent-border);
  background-color: var(--accent-soft);
  color: var(--accent);
}

/* Включённый отмечен галочкой перед словом — видно и без цвета. */
:root[data-look="win15"] :is(.tabs__controls .checkbox, .field__toggle):has(input:checked)::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.2 6.3 4.8 8.8 9.8 3.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.2 6.3 4.8 8.8 9.8 3.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}

:root[data-look="win15"] :is(.tabs__controls .checkbox, .field__toggle):has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Крестик «очистить» в поле поиска — как у поля Windows: тонкий, цветом
   текста, а не серая таблетка браузера. */
:root[data-look="win15"] input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-right: -2px;
  background: var(--text-secondary);
  cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

:root[data-look="win15"] input[type="search"]::-webkit-search-cancel-button:hover {
  background: var(--text);
}

/* --------------------------------------------------------------------------
   Строки: действие тише, пока на строку не смотрят

   «Отметить доставку» стояла рамкой в каждой строке, и список читался как
   столбец одинаковых кнопок. Теперь это акцентная надпись с галочкой, а
   рамку она получает под мышью или с фокусом на строке, как быстрые
   действия в списках Windows. Без мыши (на экране пальцем) рамка на месте.
   -------------------------------------------------------------------------- */

@media (hover: hover) {
  :root[data-look="win15"] :is(.row, .card) :is(.row__actions, .card__actions) .btn--row {
    border-color: transparent;
    background-color: transparent;
    color: var(--accent);
  }

  :root[data-look="win15"] :is(.row, .card):is(:hover, :focus-within, .is-cursor) :is(.row__actions, .card__actions) .btn--row {
    border-color: var(--w15-stroke-control);
    border-top-color: var(--w15-stroke-control-top);
    border-bottom-color: var(--w15-stroke-control-bottom);
    background-color: var(--w15-fill);
    color: var(--text);
  }

  :root[data-look="win15"] :is(.row, .card) :is(.row__actions, .card__actions) .btn--row:hover {
    background-color: var(--w15-fill-hover);
  }

  :root[data-look="win15"] :is(.row, .card) :is(.row__actions, .card__actions) .btn--row:active {
    border-color: var(--w15-stroke-control);
    background-color: var(--w15-fill-press);
    color: var(--text-secondary);
  }
}

/* --------------------------------------------------------------------------
   Раскрытая задача — «раскрывающаяся карточка» из Параметров Windows

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

@media (min-width: 681px) {
  :root[data-look="win15"] .rows>.row[aria-current="true"] {
    margin: 8px 8px 0;
    padding-right: calc(var(--gutter) - 9px);
    padding-left: calc(var(--gutter) - 9px);
    border: 1px solid var(--w15-stroke);
    border-bottom-color: var(--w15-stroke-divider);
    border-radius: var(--w15-radius-card) var(--w15-radius-card) 0 0;
    background: var(--w15-card);
  }

  :root[data-look="win15"] .rows>.detail {
    margin: 0 8px 8px;
    padding-right: calc(var(--gutter) - 9px);
    padding-left: calc(var(--gutter) - 9px);
    border: 1px solid var(--w15-stroke);
    border-top: 0;
    border-radius: 0 0 var(--w15-radius-card) var(--w15-radius-card);
    background: var(--w15-card);
    box-shadow: var(--w15-shadow-raised);
  }
}

/* --------------------------------------------------------------------------
   Выбранные задачи — плавающая командная строка внизу, как в «Фотографиях»
   и Проводнике: список под ней не сдвигается, а действия под рукой.
   -------------------------------------------------------------------------- */

:root[data-look="win15"] .selbar {
  position: fixed;
  z-index: 15;
  top: auto;
  bottom: 20px;
  left: calc(var(--sidebar-width) + (100% - var(--sidebar-width)) / 2);
  width: max-content;
  max-width: calc(100% - var(--sidebar-width) - 32px);
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--w15-stroke-flyout);
  border-radius: var(--w15-radius-window);
  background: var(--w15-flyout);
  -webkit-backdrop-filter: var(--w15-blur);
  backdrop-filter: var(--w15-blur);
  box-shadow: var(--w15-shadow-dialog);
  transform: translateX(-50%);
  animation: w15-bar var(--w15-slow) var(--w15-ease);
}

:root[data-look="win15"] .selbar>.spacer {
  flex: 0 0 4px;
}

@keyframes w15-bar {
  from {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
}

/* --------------------------------------------------------------------------
   Клавиши, уведомление, учётная запись
   -------------------------------------------------------------------------- */

:root[data-look="win15"] kbd {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border: 1px solid var(--w15-stroke-control);
  border-bottom-color: var(--w15-stroke-control-bottom);
  border-radius: 4px;
  background: var(--w15-fill);
  box-shadow: 0 1px 0 var(--w15-stroke-control-bottom);
  color: var(--text-secondary);
  font: 500 11px/16px var(--font-sans);
  text-align: center;
}

:root[data-look="win15"] .toast {
  gap: 12px;
  padding: 14px 18px 14px 14px;
  border-color: var(--w15-stroke-flyout);
  border-radius: var(--w15-radius-overlay);
  background: var(--w15-flyout);
  -webkit-backdrop-filter: var(--w15-blur);
  backdrop-filter: var(--w15-blur);
  box-shadow: var(--w15-shadow-flyout);
  animation: w15-toast var(--w15-slow) var(--w15-ease);
}

:root[data-look="win15"] .toast svg {
  box-sizing: content-box;
  padding: 3px;
  border-radius: 50%;
  background: var(--w15-success);
  color: light-dark(#ffffff, #000000);
}

:root[data-look="win15"] .toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--w15-normal) linear, transform var(--w15-normal) var(--w15-ease);
}

@keyframes w15-toast {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* Круг с буквой имени — как у учётной записи в меню «Пуск». В полосе
   значков и в нижней панели телефона места под него нет. */
:root[data-look="win15"] .sidebar__avatar {
  display: var(--sidebar-label-display, grid);
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 50%;
  background: linear-gradient(160deg, #3d8bf2 0%, #0a5bc4 100%) #0a5bc4;
  color: #ffffff;
  font: 600 12px/1 var(--w15-font-display);
}

/* Навигация держит навигацию: тему выбирают в профиле карточками. */
:root[data-look="win15"] .sidebar>.theme-picker {
  display: none;
}

/* --------------------------------------------------------------------------
   Профиль — страница «Параметров»: карточки одна под другой
   -------------------------------------------------------------------------- */

:root[data-look="win15"] .account {
  display: grid;
  align-content: start;
  gap: 16px;
}

:root[data-look="win15"] .account__card {
  width: 100%;
  max-width: 620px;
}

:root[data-look="win15"] .account__card+.account__card {
  margin-top: 0;
}

:root[data-look="win15"] .account__theme {
  display: block;
}

:root[data-look="win15"] .account h2 {
  margin: 1px 0 0;
  font-size: 18px;
  font-weight: 600;
}

:root[data-look="win15"] .themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

:root[data-look="win15"] .theme-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 6px 6px 10px;
  border: 1px solid var(--w15-stroke);
  border-radius: var(--w15-radius-card);
  background: var(--w15-card);
  cursor: pointer;
  transition: background-color var(--w15-fast) linear, border-color var(--w15-fast) linear;
}

:root[data-look="win15"] .theme-card:hover {
  background: var(--w15-card-hover);
  border-color: var(--field-border-hover);
}

:root[data-look="win15"] .theme-card:has(input:checked) {
  border-color: var(--w15-accent);
  box-shadow: inset 0 0 0 1px var(--w15-accent);
}

:root[data-look="win15"] .theme-card:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--w15-accent) var(--w15-check) center / 12px 12px no-repeat;
  box-shadow: 0 0 0 2px var(--w15-card);
}

:root[data-look="win15"] .theme-card:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

:root[data-look="win15"] .theme-card__label {
  font-size: 13px;
  text-align: center;
}

:root[data-look="win15"] .theme-card:has(input:checked) .theme-card__label {
  font-weight: 600;
}

/* Картинка темы: «рабочий стол», на нём окно с боковой панелью, страницей
   и кнопкой цвета акцента. Цвета — самой темы, какой бы ни была текущая. */
:root[data-look="win15"] .theme-card__preview {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 11% 0 0 12%;
  border-radius: 6px;
  background: var(--p-desktop);
}

:root[data-look="win15"] .theme-card__window {
  display: grid;
  grid-template-columns: 24% 1fr;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--p-stroke);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 7px;
  background: var(--p-mica);
  box-shadow: -2px -2px 10px rgb(0 0 0 / 0.12);
}

:root[data-look="win15"] .theme-card__page {
  display: grid;
  align-content: start;
  gap: 5px;
  margin-top: 5px;
  padding: 9px 9px 0;
  border-top-left-radius: 6px;
  background: var(--p-layer);
}

:root[data-look="win15"] .theme-card__line {
  height: 4px;
  border-radius: 2px;
  background: var(--p-text);
  opacity: 0.35;
}

:root[data-look="win15"] .theme-card__line+.theme-card__line {
  width: 62%;
}

:root[data-look="win15"] .theme-card__button {
  width: 36%;
  height: 9px;
  margin-top: 3px;
  border-radius: 3px;
  background: var(--p-accent);
}

:root[data-look="win15"] .theme-card--system {
  --p-desktop: linear-gradient(135deg, #cfe0f7 0 50%, #172238 50%);
  --p-mica: linear-gradient(135deg, #edf0f4 0 50%, #1b1c1f 50%);
  --p-layer: linear-gradient(135deg, #f9fafb 0 46%, #232427 46%);
  --p-text: #6b6d73;
  --p-accent: linear-gradient(90deg, #0a5bc4 0 50%, #5cbdfb 50%);
  --p-stroke: rgb(128 128 128 / 0.35);
}

:root[data-look="win15"] .theme-card--light {
  --p-desktop: linear-gradient(135deg, #cfe0f7, #e5dcfb);
  --p-mica: #edf0f4;
  --p-layer: #f9fafb;
  --p-text: #1a1b1e;
  --p-accent: #0a5bc4;
  --p-stroke: rgb(0 0 0 / 0.08);
}

:root[data-look="win15"] .theme-card--dark {
  --p-desktop: linear-gradient(135deg, #10284d, #2a1d52);
  --p-mica: #1b1c1f;
  --p-layer: #232427;
  --p-text: #ffffff;
  --p-accent: #5cbdfb;
  --p-stroke: rgb(255 255 255 / 0.1);
}

:root[data-look="win15"] .theme-card--contrast {
  --p-desktop: #000000;
  --p-mica: #05080c;
  --p-layer: #0d131a;
  --p-text: #ffffff;
  --p-accent: #ffd166;
  --p-stroke: #8fa2b9;
}

:root[data-look="win15"] .theme-card--classic {
  --p-desktop: #dfe5ec;
  --p-mica: #fcfcfd;
  --p-layer: #ffffff;
  --p-text: #10151b;
  --p-accent: #1e50b8;
  --p-stroke: #d4dae1;
}

:root[data-look="win15"] .theme-card--win95 {
  --p-desktop: #008080;
  --p-mica: #c0c0c0;
  --p-layer: #ffffff;
  --p-text: #000000;
  --p-accent: #000080;
  --p-stroke: #808080;
}

/* Старые темы — старые углы: прямые, а у Windows 95 ещё и синий заголовок. */
:root[data-look="win15"] :is(.theme-card--classic, .theme-card--win95) :is(.theme-card__window, .theme-card__page, .theme-card__button) {
  border-radius: 0;
}

:root[data-look="win15"] .theme-card--win95 .theme-card__window {
  border-top: 5px solid #000080;
  box-shadow: inset 1px 1px 0 #ffffff;
}

/* --------------------------------------------------------------------------
   Журнал: другие обращения аптеки и спокойное «справочник выключен»
   -------------------------------------------------------------------------- */

:root[data-look="win15"] .jneighbours {
  border-top-color: var(--w15-stroke-divider);
}

:root[data-look="win15"] .jneighbours__item {
  margin: 0 -10px;
  transition: background-color var(--w15-fast) linear;
}

:root[data-look="win15"] .jneighbours__item:hover {
  background: var(--w15-subtle-hover);
}

:root[data-look="win15"] .jneighbours__item:active {
  background: var(--w15-subtle-press);
}

:root[data-look="win15"] .notice--info,
:root[data-look="win15"] .notice--info[role="status"] {
  background: var(--accent-soft);
  color: var(--text);
}

:root[data-look="win15"] .notice--info[role="status"] svg {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Узкие окна и телефон
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {
  :root[data-look="win15"] .topbar h1 {
    font-size: 18px;
  }

  :root[data-look="win15"] .login {
    padding: 16px;
  }

  :root[data-look="win15"] .login__card {
    padding: 24px;
  }
}

/* Узкая таблица: текст задачи уходит строкой ниже и встаёт под название,
   а не под флажок. Флажок здесь на два пикселя шире, чем в основной теме. */
@media (max-width: 920px) {
  :root[data-look="win15"] .row .cell-task {
    padding-left: 25px;
  }
}

/* Телефон: навигация — плавающая панель снизу, как панель задач. Полоса
   значков слева забирала 64 из 375 пикселей ширины, а до неё ещё надо было
   дотянуться большим пальцем. Панель выше строк, но ниже меню и боковых
   панелей: те открываются поверх неё. */
@media (max-width: 680px) {
  :root[data-look="win15"] {
    --sidebar-width: 0px;
    --sidebar-label-display: none;
    --w15-dock: 60px;
    --w15-dock-space: calc(var(--w15-dock) + 2 * var(--w15-gap) + env(safe-area-inset-bottom, 0px));
  }

  :root[data-look="win15"] .workspace {
    padding-bottom: var(--w15-dock-space);
    border-left: 0;
    border-top-right-radius: var(--w15-radius-window);
  }

  :root[data-look="win15"] .journal .statusbar {
    bottom: var(--w15-dock-space);
  }

  :root[data-look="win15"] .sidebar {
    position: fixed;
    z-index: 10;
    top: auto;
    right: var(--w15-gap);
    bottom: calc(var(--w15-gap) + env(safe-area-inset-bottom, 0px));
    left: var(--w15-gap);
    width: auto;
    height: var(--w15-dock);
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    border: 1px solid var(--w15-stroke-flyout);
    border-radius: 18px;
    background: var(--w15-flyout);
    -webkit-backdrop-filter: var(--w15-blur);
    backdrop-filter: var(--w15-blur);
    box-shadow: var(--w15-shadow-flyout);
  }

  :root[data-look="win15"] :is(.sidebar__brand, .sidebar>.theme-picker, .sidebar .nav-item--soon, .sidebar__identity) {
    display: none;
  }

  :root[data-look="win15"] .sidebar__nav {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 2px;
    padding: 0;
  }

  :root[data-look="win15"] .sidebar .nav-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 64px;
    height: 48px;
    justify-content: center;
    padding: 0;
    border-radius: 12px;
  }

  /* Таблетка выбранного пункта — под значком, как на панели задач. */
  :root[data-look="win15"] .sidebar .nav-item[aria-current="page"]::before {
    top: auto;
    bottom: 5px;
    left: 50%;
    width: 16px;
    height: 3px;
    margin: 0 0 0 -8px;
    animation-name: w15-underline;
  }

  :root[data-look="win15"] .sidebar__user {
    flex: none;
    flex-direction: row;
    gap: 2px;
    margin: 0;
    padding: 0 0 0 4px;
    border-left: 1px solid var(--w15-stroke-divider);
    border-radius: 0;
  }

  :root[data-look="win15"] .sidebar__user .icon-btn {
    width: 44px;
    height: 48px;
    border-radius: 12px;
  }

  /* Плавающая строка выбора и уведомление — над нижней панелью, а не под
     ней. */
  :root[data-look="win15"] .selbar {
    bottom: calc(var(--w15-dock-space) + 4px);
    max-width: calc(100% - 24px);
    padding: 10px 12px;
  }

  :root[data-look="win15"] .toast {
    right: 12px;
    bottom: calc(var(--w15-dock-space) + 4px);
    left: 12px;
    max-width: none;
  }
}

/* На пальце всё крупнее: пункты меню и навигации — под палец, а не под
   мышь. Высоты полей не трогаем — на них держится раскладка форм. */
@media (pointer: coarse) {
  :root[data-look="win15"] .nav-item {
    height: 44px;
  }

  :root[data-look="win15"] :is(.more__item, .combo__option) {
    min-height: 40px;
  }

  :root[data-look="win15"] input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
}

@media (pointer: coarse) and (max-width: 920px) {
  :root[data-look="win15"] .row .cell-task {
    padding-left: 29px;
  }
}

/* --------------------------------------------------------------------------
   Движение: кто просил поменьше — получает без анимаций
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root[data-look="win15"] *,
  :root[data-look="win15"] *::before,
  :root[data-look="win15"] *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Без движения полоса загрузки не бежит, а стоит во всю ширину. */
@media (prefers-reduced-motion: reduce) {
  :root[data-look="win15"][data-busy] body::after {
    background-size: 100% 100%;
    opacity: 0.7;
  }
}

/* --------------------------------------------------------------------------
   Контрастные темы Windows

   В контрастной теме Windows браузер сам перекрашивает страницу системными
   цветами: фоны, рамки, текст. Пропадает только то, что нарисовано фоном
   или картинкой — таблетки выбора, отмеченный флажок, стрелка списка,
   полоса загрузки, нажатые переключатели. Им здесь даны системные цвета, а
   флажкам и спискам возвращён их обычный системный вид.
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  :root[data-look="win15"] input[type="checkbox"],
  :root[data-look="win15"] select {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
  }

  /* Отдельным правилом: браузер, не знающий ::picker, выбросил бы вместе
     с ним и флажки. */
  :root[data-look="win15"] select::picker(select) {
    appearance: auto;
  }

  :root[data-look="win15"] :is(.nav-item[aria-current="page"], .row[aria-current="true"], .row.is-cursor, .srow[aria-expanded="true"], .combo__option--active)::before,
  :root[data-look="win15"] :is(.tab[aria-selected="true"], .admin__tab--current)::after {
    background: Highlight;
  }

  /* Выбранное — рамкой: заливка в контрастной теме не видна. */
  :root[data-look="win15"] :is(.nav-item[aria-current="page"], .row[aria-current="true"], .srow[aria-expanded="true"], .card[aria-current="true"]) {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  :root[data-look="win15"] :is(.btn--primary, .btn--primary:hover, .btn[aria-pressed="true"], .journal__statuses a[aria-current="true"], .schedule__views button[aria-pressed="true"], .jperiods__item[aria-current="true"], .jdetail__tabs .tab[aria-selected="true"], .schedule__table thead button[aria-pressed="true"]) {
    border-color: Highlight;
    background-color: Highlight;
    color: HighlightText;
  }

  :root[data-look="win15"] .btn--primary:disabled {
    border-color: GrayText;
    background-color: Canvas;
    color: GrayText;
  }

  :root[data-look="win15"] :is(.status, .jflow)::before,
  :root[data-look="win15"] :is(.steps__dot, .event__dot, .jflow__dot) {
    background: CanvasText;
  }

  :root[data-look="win15"][data-busy] body::after {
    forced-color-adjust: none;
    background-image: linear-gradient(Highlight, Highlight);
  }

  :root[data-look="win15"] :is(.tabs__controls .checkbox, .field__toggle):has(input:checked) {
    border-color: Highlight;
    background-color: Highlight;
    color: HighlightText;
  }

  :root[data-look="win15"] :is(.tabs__controls .checkbox, .field__toggle):has(input:checked)::before {
    background: HighlightText;
  }

  :root[data-look="win15"] .theme-card:has(input:checked) {
    outline: 2px solid Highlight;
  }

  :root[data-look="win15"] .theme-card:has(input:checked)::after {
    background-color: Highlight;
  }
}


/* --------------------------------------------------------------------------
   Windows 15: лента журнала
   -------------------------------------------------------------------------- */

@media (min-width: 681px) {
  :root[data-look="win15"] .workspace.workspace--journal {
    height: calc(100vh - var(--w15-gap));
    height: calc(100dvh - var(--w15-gap));
  }
}

:root[data-look="win15"] .jlatest__btn {
  border-color: var(--w15-stroke-flyout);
  border-radius: var(--w15-radius-overlay);
  background: var(--w15-flyout);
  -webkit-backdrop-filter: var(--w15-blur);
  backdrop-filter: var(--w15-blur);
  color: var(--w15-accent-text);
  box-shadow: var(--w15-shadow-flyout);
  transition: background-color var(--w15-fast) var(--w15-ease);
}

:root[data-look="win15"] .jlatest__btn:hover {
  background: var(--w15-subtle-hover);
}

:root[data-look="win15"] .jlatest__btn:not([hidden]) {
  animation: w15-fade var(--w15-normal) var(--w15-ease);
}

:root[data-look="win15"] .jmore__spinner {
  border-color: var(--w15-stroke-divider);
  border-top-color: var(--w15-accent);
}

@keyframes w15-jflash {
  from {
    background-color: color-mix(in srgb, var(--w15-accent) 20%, transparent);
  }
}

:root[data-look="win15"] .journal .jrow.is-flash {
  animation: w15-jflash 1.6s var(--w15-ease);
}