/* Система стиля «новый вид» (ТЗ №90, п. 1) — плитки, плашка «сейчас», метки, кнопки, быстрые периоды, меню, таблицы. Подключается ПОСЛЕДНИМ из файлов
   страниц (после layout.css, system.css, home.css): ниже по файлу — значит главнее. Значения — только переменные из tokens.css: ни цвета, ни размера
   шрифта, ни радиуса числом здесь нет (проверяет webapp/lib/design_tokens.test.js). Единицы длины (px) допустимы для отступов и размеров блоков по макету. */

/* ---------- Основа ---------- */
body { background: var(--ds-page); color: var(--ds-text); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-text); line-height: 1.45; }
a { color: var(--ds-accent); }
a:hover { color: var(--ds-accent-hover); }
h1, h2, h3, .page-title, .card-title { font-weight: var(--fw-heavy); }
.page-title { font-size: var(--fs-26); letter-spacing: 0; line-height: 1.25; }
.card-title, .home-h2 { font-size: var(--fs-16); font-weight: var(--fw-heavy); letter-spacing: 0; }
.muted, .page-context, .page-subtitle { color: var(--ds-text-2); }
strong, b { font-weight: var(--fw-strong); }

/* ---------- Меню: тёмная колонка 232 px ---------- */
.sidebar {
  width: var(--ds-menu-w); padding: 20px 14px; gap: 4px; background: var(--ds-menu-bg); color: var(--ds-menu-text); border-right: 0;
}
@media (min-width: 721px) {
  .sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; scrollbar-width: thin; }
}
.sidebar-logo { padding: 8px 10px 14px; gap: 10px; font-size: var(--fs-16); font-weight: var(--fw-heavy); letter-spacing: 0.01em; color: var(--ds-menu-text-active); }
.sidebar-logo .mark { width: 32px; height: 32px; border-radius: var(--ds-r-ctl); }
.sidebar-nav { gap: 4px; }
.sidebar-group-items { gap: 4px; }
.sidebar-link {
  gap: 12px; padding: 11px 12px; border-radius: var(--ds-r-ctl); color: var(--ds-menu-text); font-weight: var(--fw-text); font-size: var(--fs-body);
}
.sidebar-link svg { width: 18px; height: 18px; color: currentColor; stroke: currentColor; opacity: 0.9; }
.sidebar-link:not(.active):hover { background: var(--ds-menu-hover); color: var(--ds-menu-text-active); }
.sidebar-link.active { background: var(--ds-menu-active); color: var(--ds-menu-text-active); font-weight: var(--fw-strong); }
.sidebar-link.active svg { color: var(--ds-menu-text-active); opacity: 1; }
.sidebar-link > span:first-of-type { flex: 1 1 auto; min-width: 0; }
/* Счётчик на пункте: красный («Проверка 249»). */
.sidebar-badge, .sidebar-count {
  margin-left: auto; min-width: 20px; height: auto; padding: 2px 8px; border: 0; border-radius: var(--ds-r-counter); box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; background: var(--ds-counter-bg); color: var(--ds-on-solid);
  font-size: var(--fs-12); font-weight: var(--fw-heavy); line-height: 1.3; font-variant-numeric: tabular-nums;
}
.sidebar-count[hidden] { display: none; }
body.sidebar-collapsed .sidebar-badge, body.sidebar-collapsed .sidebar-count { position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 4px; font-size: var(--fs-12); }
.sidebar-search-btn { border: 1px solid var(--ds-menu-line); border-radius: var(--ds-r-ctl); color: var(--ds-menu-muted); background: transparent; margin: 4px 0; }
.sidebar-search-btn:hover { background: var(--ds-menu-hover); color: var(--ds-menu-text-active); }
.sidebar-icon-btn { border-color: var(--ds-menu-line); color: var(--ds-menu-text); border-radius: var(--ds-r-ctl); }
.sidebar-icon-btn:hover { background: var(--ds-menu-hover); }
/* Переключатель отдела под логотипом: тёмное поле. */
.sidebar-project { padding: 0 0 12px; margin: 0; border-bottom: 0; display: flex; flex-direction: column; gap: 6px; }
.sidebar-project-label { padding: 0 4px; color: var(--ds-menu-muted); font-size: var(--fs-12); font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.sidebar .filter-select, .sidebar select.filter-select, .sidebar .ui-select-trigger {
  background: var(--ds-menu-field); color: var(--ds-menu-text); border: 0; border-radius: var(--ds-r-ctl); font-size: var(--fs-13); font-weight: var(--fw-text); padding: 9px 12px;
}
.sidebar .ui-select-trigger { width: 100%; min-height: 0; }
.sidebar .ui-select-trigger:hover, .sidebar .filter-select:hover { background: var(--ds-menu-field); color: var(--ds-menu-text-active); }
.sidebar-project-note { color: var(--ds-menu-muted); font-size: var(--fs-12); padding: 0 4px; }
.instance-badge-detail { color: var(--ds-menu-muted); }
.sidebar-user { margin-top: auto; padding: 14px 12px 4px; border-top: 1px solid var(--ds-menu-line); display: flex; flex-direction: column; gap: 2px; }
.sidebar-user-name { font-weight: var(--fw-strong); color: var(--ds-menu-text-active); font-size: var(--fs-body); }
.sidebar-user-role { color: var(--ds-menu-muted); font-size: var(--fs-13); margin: 0; }
.sidebar-user .btn, .sidebar .btn { background: transparent; border-color: var(--ds-menu-line); color: var(--ds-menu-text); font-size: var(--fs-13); font-weight: var(--fw-strong); min-height: 32px; border-radius: var(--ds-r-ctl); }
.sidebar-user .btn:hover:not(:disabled), .sidebar .btn:hover:not(:disabled) { background: var(--ds-menu-hover); color: var(--ds-menu-text-active); border-color: var(--ds-menu-line); }
.sidebar-lang { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; color: var(--ds-menu-muted); font-size: var(--fs-12); }
.sidebar .pill, .sidebar .badge { background: var(--ds-menu-field); color: var(--ds-menu-text); }
.sidebar :where(a, button):focus-visible { outline-color: var(--ds-menu-text-active); }
/* Выключатель «Подсказка после звонка» (п. 2.3) — в меню внизу. */
.sidebar-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px 4px; font-size: var(--fs-13); color: var(--ds-menu-text); cursor: pointer; }
.sidebar-toggle input { width: 16px; height: 16px; accent-color: var(--ds-accent); cursor: pointer; }
.sidebar-toggle-state { font-weight: var(--fw-strong); color: var(--ds-menu-text-active); }

/* Колонка содержимого: слева у меню, не шире 1 048 px вместе с полями (макет). */
.content { max-width: var(--ds-main-max); margin-inline: 0; padding: var(--ds-main-pad-y) var(--ds-main-pad-x) 40px; }
@media (max-width: 720px) {
  .content { padding: 56px var(--page-pad-phone, 16px) var(--sp-6); }
}
.topbar { margin-bottom: 20px; gap: 14px; align-items: baseline; }
.topbar > div:first-child:not(.call-head) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; }
.topbar .page-context { margin: 0; font-size: var(--fs-14); }
.page-title-row { gap: 4px; }
.breadcrumbs ol { font-size: var(--fs-13); color: var(--ds-text-2); }

/* ---------- Карточки ---------- */
.card, .home-block, .home-card, .more-group, .todo, .todo-done {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-card); box-shadow: none;
}
.card { padding: var(--ds-pad-card); margin-bottom: 20px; }
.card-header { margin-bottom: 14px; }
.home-block { padding: var(--ds-pad-card); }

/* ---------- Плитка-показатель ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-gap); margin-bottom: 20px; }
.tile-grid.tiles-1 { grid-template-columns: minmax(0, 1fr); }
.tile-grid.tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile-grid.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile-grid.tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile-grid:last-child { margin-bottom: 0; }
.card > .tile-grid { margin-bottom: 14px; }
.tile {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: var(--ds-pad-tile);
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-card); box-shadow: none; color: var(--ds-text);
}
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: var(--fs-12); font-weight: var(--fw-strong); color: var(--ds-text-2); line-height: 1.35; }
.tile-label { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-12); font-weight: var(--fw-strong); color: var(--ds-text-2); overflow-wrap: anywhere; }
.tile-icon { flex: none; width: var(--ds-icon-box); height: var(--ds-icon-box); border-radius: var(--ds-r-icon); display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
.tile-icon svg { width: 18px; height: 18px; }
.tile-icon.tone-ok, .now-tone-ok { background: var(--ds-ok-bg); color: var(--ds-ok-fg); }
.tile-icon.tone-warn { background: var(--ds-warn-bg); color: var(--ds-warn-fg); }
.tile-icon.tone-bad { background: var(--ds-bad-bg); color: var(--ds-bad-fg); }
.tile-icon.tone-info { background: var(--ds-info-bg); color: var(--ds-info-fg); }
.tile-icon.tone-neutral { background: var(--ds-neutral-bg); color: var(--ds-neutral-fg); }
.tile-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; min-width: 0; }
.tile-value { margin: 0; font-size: var(--fs-34); font-weight: var(--fw-heavy); line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ds-text); overflow-wrap: anywhere; }
.tile-value-text { font-size: var(--fs-16); line-height: 1.25; padding: 9px 0 8px; }
.tile-value .tile-unit { font-size: var(--fs-16); font-weight: var(--fw-strong); margin-left: 3px; }
.tile-delta { font-size: var(--fs-13); font-weight: var(--fw-heavy); color: var(--ds-text-2); white-space: nowrap; }
.tile-delta.up { color: var(--ds-ok-fg); }
.tile-delta.down { color: var(--ds-bad-fg); }
.tile-foot { display: block; margin: 0; font-size: var(--fs-13); color: var(--ds-text-2); line-height: 1.4; white-space: normal; overflow: visible; }
.tile-foot > span { white-space: inherit; }
.tile-note { font-weight: var(--fw-strong); }
.tile-note-bad { color: var(--ds-bad-fg); }
.tile-note-warn { color: var(--ds-warn-fg); }
.tile-note-ok { color: var(--ds-ok-fg); }
.tile-bad { color: var(--ds-bad-fg); font-weight: var(--fw-strong); }
a.tile { color: inherit; text-decoration: none; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
a.tile:hover { background: var(--ds-surface); border-color: var(--ds-border-strong); }
a.tile .tile-value { color: var(--ds-text); }
.tile-progress { height: 8px; border-radius: var(--ds-r-bar); background: var(--ds-neutral-bg); }
.tile-progress > div { background: var(--ds-accent); border-radius: var(--ds-r-bar); }
@media (max-width: 1100px) { .tile-grid, .tile-grid.tiles-3, .tile-grid.tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .tile-grid, .tile-grid.tiles-3, .tile-grid.tiles-4 { gap: 10px; }
  .tile { padding: 14px; gap: 8px; }
  .tile-value { font-size: var(--fs-26); }
  .tile-icon { width: 30px; height: 30px; }
}

/* ---------- Плашка «сейчас» ---------- */
.now-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; padding: 16px 20px;
  background: var(--ds-warn-bg); border: 1px solid var(--ds-warn-border); border-radius: var(--ds-r-card); color: var(--ds-warn-text);
}
.now-bar-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--ds-r-icon); display: inline-flex; align-items: center; justify-content: center; background: var(--ds-warn-icon-bg); color: var(--ds-warn-icon-fg); }
.now-bar-icon svg { width: 20px; height: 20px; }
.now-bar-body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.now-bar-title { font-size: var(--fs-16); font-weight: var(--fw-heavy); color: var(--ds-text); }
.now-bar-text { font-size: var(--fs-14); color: var(--ds-warn-text); overflow-wrap: anywhere; }
.now-bar .now-bar-btn { flex: 0 0 auto; }

/* ---------- Метки статуса: 12/800, радиус 6 ---------- */
.badge, .pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--ds-r-badge); border: 0;
  font-size: var(--fs-12); font-weight: var(--fw-heavy); line-height: 1.3; white-space: nowrap; letter-spacing: 0;
}
.pill-xs { padding: 3px 7px; font-size: var(--fs-12); }
.badge-ok, .pill-green { background: var(--ds-ok-bg); color: var(--ds-ok-fg); }
.badge-warn, .pill-amber { background: var(--ds-warn-bg); color: var(--ds-warn-fg); }
.badge-bad, .pill-red { background: var(--ds-bad-bg); color: var(--ds-bad-fg); }
.badge-info, .pill-blue { background: var(--ds-info-bg); color: var(--ds-info-fg); }
.badge-neutral, .pill-gray { background: var(--ds-neutral-bg); color: var(--ds-neutral-fg); }
.pill-amber-outline { background: transparent; color: var(--ds-warn-fg); box-shadow: inset 0 0 0 1px var(--ds-warn-icon-bg); }
.pill-ai-decision { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.flag-badge { background: var(--ds-bad-bg); color: var(--ds-bad-fg); border-radius: var(--ds-r-badge); font-weight: var(--fw-heavy); }
.score-zone-good { background: var(--ds-ok-bg); color: var(--ds-ok-fg); }
.score-zone-medium { background: var(--ds-warn-bg); color: var(--ds-warn-fg); }
.score-zone-bad { background: var(--ds-bad-bg); color: var(--ds-bad-fg); }

/* ---------- Кнопки: высота 38, радиус 9, 14/700 ---------- */
.btn, .btn-link { min-height: var(--ds-btn-h); border-radius: var(--ds-r-ctl); padding: 0 14px; font-size: var(--fs-14); font-weight: var(--fw-strong); letter-spacing: 0; }
.btn { background: var(--ds-surface); border: 1px solid var(--ds-border-strong); color: var(--ds-text); }
.btn:hover:not(:disabled) { background: var(--ds-neutral-bg); border-color: var(--ds-border-strong); }
.btn-primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn-primary:hover:not(:disabled) { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); filter: brightness(1.25); }
.btn-danger { background: var(--ds-btn-danger); border-color: var(--ds-btn-danger); color: var(--ds-on-danger); }
.btn-danger:hover:not(:disabled) { background: var(--ds-btn-danger); border-color: var(--ds-btn-danger); filter: brightness(1.1); }
.btn-link { color: var(--ds-accent); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ds-text-2); }
.btn-small, .btn-xs { min-height: 32px; padding: 0 12px; font-size: var(--fs-13); }

/* ---------- Поля ---------- */
select.filter-select, input.filter-select, label.filter-select, textarea.filter-select, .filter-btn {
  min-height: var(--ds-btn-h); border-radius: var(--ds-r-ctl); border: 1px solid var(--ds-border-strong); background: var(--ds-surface); color: var(--ds-text);
  font-size: var(--fs-14); font-weight: var(--fw-strong); padding: 0 12px;
}
select.filter-select:hover, input.filter-select:hover, label.filter-select:hover, textarea.filter-select:hover, .filter-btn:hover { border-color: var(--ds-text-2); }
.filter-btn .label { color: var(--ds-text-2); font-weight: var(--fw-text); }
.filter-btn.active { background: var(--ds-btn-bg); border-color: var(--ds-btn-bg); color: var(--ds-btn-fg); }
input.filter-select::placeholder { color: var(--ds-text-2); font-weight: var(--fw-text); }
.filter-pill { background: var(--ds-info-bg); color: var(--ds-info-fg); border-radius: var(--ds-r-badge); font-size: var(--fs-13); font-weight: var(--fw-strong); }
.filters-panel { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-card); }
.filters-bar { background: var(--ds-page); }

/* ---------- Быстрые периоды: группа кнопок в одной рамке, активная чёрная ---------- */
.seg, .seg-switch {
  display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 3px; width: auto; max-width: 100%;
  background: var(--ds-surface); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-ctl);
}
.seg-btn {
  padding: 6px 12px; border: 0; border-radius: var(--ds-r-seg); background: transparent; color: var(--ds-text); font-size: var(--fs-13); font-weight: var(--fw-strong); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg-btn:hover:not(.active) { background: var(--ds-neutral-bg); color: var(--ds-text); }
.seg-btn.active { background: var(--ds-btn-bg); color: var(--ds-btn-fg); box-shadow: none; border-color: transparent; }
.period-picker { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
/* Календарь и остальные периоды — кнопка со значком: пока период один из быстрых, видны только значок (подпись для диктора остаётся). */
.period-custom { min-height: var(--ds-btn-h); gap: 6px; }
.period-custom-icon { display: inline-flex; }
.period-custom-icon svg { width: 16px; height: 16px; }
.period-picker.is-quick .period-custom { padding: 0 10px; }
.period-picker.is-quick .period-custom .label, .period-picker.is-quick .period-custom [id$="-label"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.period-picker:not(.is-quick) .period-custom .label { display: none; }
.period-picker:not(.is-quick) .period-custom { background: var(--ds-btn-bg); border-color: var(--ds-btn-bg); color: var(--ds-btn-fg); }
.period-picker:not(.is-quick) .period-custom .period-custom-icon { color: var(--ds-btn-fg); }
.period-popover { border-radius: var(--ds-r-card); background: var(--ds-surface); border-color: var(--ds-border); top: 46px; z-index: 40; }
.period-quick-item { border-radius: var(--ds-r-ctl); font-size: var(--fs-14); font-weight: var(--fw-strong); }
.period-quick-item.active { background: var(--ds-btn-bg); color: var(--ds-btn-fg); }
.period-day-start, .period-day-end { background: var(--ds-btn-bg); color: var(--ds-btn-fg); }
.period-day-in-range { background: var(--ds-info-bg); }

/* ---------- Вкладки: черта под выбранной, число после точки ---------- */
.source-tabs, .card-v2-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; width: auto; max-width: 100%; padding: 0; margin: 0 0 14px; background: transparent; border-radius: 0; border-bottom: 1px solid var(--ds-border);
}
.source-tab, .card-v2-tab, .group-tab {
  padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; background: transparent; color: var(--ds-text-2);
  font-size: var(--fs-body); font-weight: var(--fw-strong); cursor: pointer;
}
.source-tab:hover:not(:disabled), .card-v2-tab:hover, .group-tab:hover { color: var(--ds-text); }
.source-tab.active, .card-v2-tab.active, .group-tab.active { background: transparent; color: var(--ds-text); font-weight: var(--fw-heavy); border-bottom-color: var(--ds-btn-bg); box-shadow: none; }
.page-tabs .group-tabs { margin-bottom: 0; }
.page-tabs .sub-tabs { border-bottom: 1px solid var(--ds-border); gap: 4px; }
.page-tabs .sub-tabs .source-tab { padding: 10px 14px; }
.page-tabs .sub-tabs .source-tab.active { border-bottom-color: var(--ds-btn-bg); font-weight: var(--fw-heavy); }
.tab-count { background: var(--ds-neutral-bg); color: var(--ds-text-2); border-radius: var(--ds-r-counter); font-size: var(--fs-12); font-weight: var(--fw-heavy); }
.card-v2-tab.active .tab-count, .source-tab.active .tab-count { background: var(--ds-neutral-bg); color: var(--ds-text); }

/* ---------- Таблицы: шапка 12 капителью, строка тонкой линией ---------- */
table.data-table { font-size: var(--fs-body); }
.data-table th { background: var(--ds-surface); color: var(--ds-text-2); font-size: var(--fs-12); font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 10px 10px 0; border-bottom: 1px solid var(--ds-line); }
.data-table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--ds-line); font-size: var(--fs-body); color: var(--ds-text); }
.data-table tbody tr:nth-child(even) { background: transparent; }
.data-table tbody tr:hover { background: var(--ds-page); }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table td.num, .data-table th.num { text-align: right; }
.data-table tbody tr.row-needs-review { background: var(--ds-warn-soft); }
.data-table tbody tr.row-needs-review:hover { background: var(--ds-warn-bg); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.card:has(> .table-scroll, > table.data-table):not(:has(> .card-header)) { padding-top: 6px; padding-bottom: 10px; }
.pagination { font-size: var(--fs-13); color: var(--ds-text-2); }

/* ---------- Оператор: кружок с инициалами ---------- */
.avatar { width: var(--ds-avatar); height: var(--ds-avatar); font-size: var(--fs-12); font-weight: var(--fw-heavy); }
.op-cell { gap: 8px; }
.op-cell-name { font-weight: var(--fw-strong); }
.avatar-big { width: 36px; height: 36px; font-size: var(--fs-13); }

/* ---------- Списки внутри карточек (строки через тонкую линию) ---------- */
.ds-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ds-line); color: var(--ds-text); text-decoration: none; }
.ds-row:last-child { border-bottom: 0; }
a.ds-row:hover { color: var(--ds-text); background: transparent; }
a.ds-row:hover .ds-row-action { text-decoration: underline; }
.ds-row-main { flex: 1 1 auto; min-width: 0; font-weight: var(--fw-strong); overflow-wrap: anywhere; }
.ds-row-sub { display: block; font-size: var(--fs-13); font-weight: var(--fw-text); color: var(--ds-text-2); }
.ds-row-due { font-size: var(--fs-13); color: var(--ds-text-2); }
.ds-row-due.is-urgent { color: var(--ds-bad-fg); font-weight: var(--fw-strong); }
.ds-row-action { font-size: var(--fs-13); font-weight: var(--fw-heavy); color: var(--ds-accent); }
.ds-bar { height: 8px; border-radius: var(--ds-r-bar); background: var(--ds-neutral-bg); overflow: hidden; }
.ds-bar > span { display: block; height: 100%; background: var(--ds-accent); border-radius: var(--ds-r-bar); }
.ds-bar-blue > span { background: var(--ds-info-fg); }
.ds-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-gap); margin-bottom: 20px; }
.ds-cols-2 > .card { margin-bottom: 0; }
.ds-cols-2 > * { min-width: 0; }
@media (max-width: 900px) { .ds-cols-2 { grid-template-columns: minmax(0, 1fr); } }
.ds-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.ds-section-head > .grow { flex: 1 1 auto; }
.ds-section-head .ds-link { font-size: var(--fs-13); font-weight: var(--fw-heavy); }

/* ---------- Прочее ---------- */
.empty-state-icon { background: var(--ds-neutral-bg); color: var(--ds-text-2); }
.alert-warning { background: var(--ds-warn-bg); color: var(--ds-warn-fg); border-color: var(--ds-warn-border); }
.hint-pop, .row-menu-list, .dept-picker-pop, .columns-panel { border-radius: var(--ds-r-card); }
dialog { border-radius: var(--ds-r-card); }

/* ---------- Оператор: без поиска Ctrl+K и без переключателя отдела (ТЗ №90, п. 1) ---------- */
body[data-role="operator"] #global-search-btn, body[data-role="operator"] #sidebar-project { display: none; }

/* ---------- Моё окно (ТЗ №90, п. 2.1) ---------- */
.ds-big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.ds-big-num { font-size: var(--fs-26); font-weight: var(--fw-heavy); line-height: 1; font-variant-numeric: tabular-nums; }
.ds-link { font-size: var(--fs-13); font-weight: var(--fw-heavy); }
.card > .ds-bar { margin-bottom: 14px; }
.ds-listen-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ds-listen { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--ds-r-icon); color: var(--ds-text); text-decoration: none; }
.ds-listen:hover { color: var(--ds-text); }
.ds-listen-pass { background: var(--ds-ok-soft); }
.ds-listen-fail { background: var(--ds-warn-soft); }
.ds-listen > .badge { flex: 0 0 auto; }
.ds-listen-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ds-listen-score { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.ds-senior { margin-top: 14px; font-size: var(--fs-13); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#my-last .data-table td.strong { font-weight: var(--fw-strong); }
#my-last .data-table .cell-clip { display: inline-block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.home-empty { margin: 0; color: var(--ds-text-2); font-size: var(--fs-14); }

/* ---------- Сегодня руководителя (ТЗ №90, п. 3.1) ---------- */
.today-tiles { margin-bottom: 20px; }
.director-toolbar { gap: 10px 14px; justify-content: flex-end; }
/* «Три дела»: один белый блок, дела строками через линию (цветной квадрат с числом · заголовок и пояснение · кнопка). */
.todo-card { padding-block: 18px 6px; }
.todo-card > .card-title { margin: 0 0 4px; }
.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.todo-card .todo, .todo-card .todo-red { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 0; background: transparent; border: 0; border-bottom: 1px solid var(--ds-line); border-radius: 0; }
.todo-card .todo:last-child { border-bottom: 0; }
.todo-card .todo[hidden] { display: none; }
.todo-card .todo-num { width: 44px; height: 44px; border-radius: var(--ds-r-icon); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-16); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; background: var(--ds-neutral-bg); color: var(--ds-neutral-fg); }
.todo-tone-info .todo-num { background: var(--ds-info-bg); color: var(--ds-info-fg); }
.todo-tone-warn .todo-num { background: var(--ds-warn-bg); color: var(--ds-warn-fg); }
.todo-tone-bad .todo-num, .todo-card .todo-red .todo-num { background: var(--ds-bad-bg); color: var(--ds-bad-fg); }
.todo-card .todo-title { font-size: var(--fs-15); font-weight: var(--fw-strong); }
.todo-card .todo-meaning { font-size: var(--fs-13); color: var(--ds-text-2); margin-top: 2px; }
.todo-btn .btn { white-space: nowrap; }
.todo-more { margin: 2px 0 8px; }
.todo-card .todo-done { padding: 22px 0; text-align: center; border: 0; background: transparent; font-size: var(--fs-15); color: var(--ds-text-2); }
.avatar-wrap { display: inline-flex; flex: none; }
.avatar-wrap.tone-ok .avatar { background: var(--ds-ok-bg); color: var(--ds-ok-fg); }
.avatar-wrap.tone-warn .avatar { background: var(--ds-warn-bg); color: var(--ds-warn-fg); }
.avatar-wrap.tone-bad .avatar { background: var(--ds-bad-bg); color: var(--ds-bad-fg); }
.score-tone-ok { color: var(--ds-ok-fg); }
.score-tone-warn { color: var(--ds-warn-fg); }
.score-tone-bad { color: var(--ds-bad-fg); }
.ds-rows .ds-row.home-op { display: flex; flex-wrap: nowrap; }
.ds-rows .ds-row.home-op > b { flex: none; font-variant-numeric: tabular-nums; }
.ds-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ds-bar-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 36px; align-items: center; gap: 12px; font-size: var(--fs-14); }
.ds-bar-label { min-width: 0; overflow-wrap: anywhere; }
.ds-bar-row > b { text-align: right; font-variant-numeric: tabular-nums; }
.home-lastcalls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.home-lastcall { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--ds-line); font-size: var(--fs-14); }
.home-lastcall:last-child { border-bottom: 0; }
.home-lastcall > a { white-space: nowrap; }
.home-lastcall-op { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.home-lastcall-score { font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 720px) {
  .director-toolbar { justify-content: flex-start; }
  .todo-card .todo { grid-template-columns: 44px minmax(0, 1fr); }
  .todo-card .todo-btn { grid-column: 1 / -1; }
  .todo-card .todo-btn .btn { width: 100%; }
  .home-lastcall { grid-template-columns: minmax(0, 1fr) auto; }
  .home-lastcall-op { grid-column: 1 / -1; grid-row: 2; }
  .ds-bar-row { grid-template-columns: minmax(0, 1fr) 36px; }
  .ds-bar-row .ds-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Карточка звонка: шапка плитками (ТЗ №90, п. 4) ---------- */
.call-strip-box { padding: 0; background: transparent; border-radius: 0; margin-bottom: 14px; }
.call-tiles { margin-bottom: 6px; }
.call-strip-box > .call-strip-more { display: block; margin: 0 0 0 auto; padding: 4px 0; font-size: var(--fs-13); font-weight: var(--fw-heavy); }
.call-strip-extra { margin-top: 6px; padding: 14px 18px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-card); }
.call-tiles .tile-value-text { overflow-wrap: anywhere; }
.call-tiles .tile-value-text .js-copy { margin-left: 6px; }
.call-tiles #fact-score .tile-foot > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ---- Качество, Итоги, Рейтинг, Анкеты, Удержание, Нагрузка (перевод плиток) ---- */
/* Одна плитка в ряду — четверть ширины, как остальные (на планшете — половина, на телефоне — вся строка). */
.tile-grid.tiles-single { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tile-grid.tiles-single { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .tile-grid.tiles-single { grid-template-columns: minmax(0, 1fr); } }
/* Плитка-переключатель («Качество» — принцип; «Удержание» — выбранный список): выбранная обведена цветом акцента. */
.tile.tile-pick { cursor: pointer; }
.tile.tile-pick:hover { border-color: var(--ds-border-strong); }
.tile.tile-pick.is-active, a.tile[aria-current="true"], a.tile[aria-current="true"]:hover { border-color: var(--ds-accent); box-shadow: 0 0 0 1px var(--ds-accent); }
/* Ряд одинаковых плиток с длинными подписями (принципы): число, полоска и пояснение прижаты книзу — числа в ряду стоят на одной линии, сколько бы строк ни заняла подпись. */
.tile.tile-aligned > .tile-main { margin-top: auto; }
/* Телефон: значок «i» подсказки (ui/touch_tips.js) не стоит в строке подписи рядом со значком плитки — там подписи на 390 px ломались по буквам; он уходит в нижний угол плитки, а строки под подписью чуть уже. */
@media (max-width: 720px) {
  .tile:has(> .tile-head > .tip-dot) { position: relative; }
  .tile-head > .tip-dot { position: absolute; right: 10px; bottom: 10px; margin: 0; }
  .tile:has(> .tile-head > .tip-dot) > :not(.tile-head):not(.tile-progress) { padding-right: 24px; }
}
/* Балл с цветом зоны («Рейтинг» оператора): число окрашено, без отдельной «таблетки». */
.tile-value .score-pill { padding: 0; background: transparent; font-size: inherit; font-weight: inherit; line-height: inherit; }
/* Число-кнопка («Баллы за период» в KPI) и число-ссылка в плитке: тот же размер, что у числа. */
.tile-value .kpi-num, .tile-value a { font-size: inherit; font-weight: inherit; line-height: inherit; }

/* ---- Очередь, Состояние, Итоги, Отчёт директору, Счёт, «Попробовать» (перевод плиток, ТЗ №90, п. 3.3) ---- */
/* Число плитки — ссылка («Отчёт директору», «Итоги»): цвет числа, а не ссылки; подчёркивание — при наведении (у .pilot-num-link своя пунктирная черта из layout.css). */
.tile-value a.dr-link, .tile-value a.pilot-num-link { color: inherit; text-decoration: none; }
.tile-value a.dr-link:hover { text-decoration: underline; }
/* Ряды плиток этих страниц считают колонки по ширине колонки содержимого (она бывает уже окна: слева меню 232 px), а не по ширине окна: плитка не уже 200 px, подпись не рвётся посреди слова.
   Модификатор tile-grid-fit рядом с tiles-N (tileGridHtml(плитки, { cls: "tile-grid-fit" })): до N колонок, лишние уходят вниз целыми рядами (пять плиток — три и две); на телефоне — одна колонка. */
.tile-grid.tile-grid-fit.tiles-2 { grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - var(--ds-gap)) / 2)), 1fr)); }
.tile-grid.tile-grid-fit.tiles-3 { grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - 2 * var(--ds-gap)) / 3)), 1fr)); }
.tile-grid.tile-grid-fit.tiles-4 { grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - 3 * var(--ds-gap)) / 4)), 1fr)); }
/* «Отчёт директору» и «Счёт»: плитки в карточке блока — тот же зазор и та же раскладка по ширине колонки, без лишнего поля снизу. */
.dr-stats, .dr-stats.inv-stats-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ds-gap); }
.dr-block > .dr-stats { margin-bottom: 0; }
.dr-sheet { grid-template-columns: minmax(0, 1fr); }
.dr-stats .tile { padding: 14px 16px; gap: 8px; }
/* Значение-слово («очередь разобрана», «сначала новые») на телефоне остаётся 16 px: общее правило «число 26 px» его не касается. */
@media (max-width: 720px) { .tile-value-text { font-size: var(--fs-16); } }
/* «Разбор очереди»: заголовок списка «Последние обработанные» — подпись капителью, как у плитки. */
.qp-recent-box { margin-top: 18px; }
.qp-recent-title { margin-bottom: 8px; font-size: var(--fs-12); font-weight: var(--fw-strong); color: var(--ds-text-2); text-transform: uppercase; letter-spacing: var(--ls-caps); }
/* Печать (PDF «Итогов», «Отчёта директору», мини-отчёта «Попробовать»): плитка с рамкой, цвета значка и полоски сохраняются, число 18 pt, плитка не рвётся между страницами. */
@media print {
  .dr-sheet .tile, .pilot-body .tile, .director-body .tile, .try-report .tile { border: 1px solid var(--print-border); break-inside: avoid; page-break-inside: avoid; }
  .tile-icon, .tile-progress, .tile-progress > div { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .dr-sheet .tile { padding: 3mm 4mm; gap: 2mm; }
  .dr-sheet .tile-value { font-size: 18pt; }
  .dr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; }
}

/* ---- Звонки (ТЗ №90, п. 3.2) ---- */
/* Красная подпись на поверхности: «номер 402 — не в справочнике». */
.text-bad { color: var(--ds-bad-fg); }

/* Шапка: название, строка «сегодня · 330 звонков» и вторичная кнопка Excel справа. */
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Вкладки над таблицей: «Все · 330», «Пропущенные · 52», «Красные флаги · 6», «Ждут проверки · 249». */
.calls-tabs { margin: 0 0 20px; }
.calls-tabs .source-tab { display: inline-block; text-decoration: none; white-space: nowrap; }

/* Панель управления: поиск · быстрые периоды · «Фильтры ▾» · «Столбцы» (один ряд, без липкой подложки с отступами). Календарь — в панели «Фильтры». */
.calls-bar { padding: 0; margin: 0 0 20px; gap: 10px; }
/* Поле поиска не уже своей подсказки «Поиск: клиент, оператор или номер» (241 px текста + значок и поля) — иначе подсказка обрезается. */
.calls-bar .list-search { flex: 1 1 300px; max-width: 360px; min-width: 290px; }
.calls-bar .dept-picker .dept-picker-btn { max-width: 190px; }
.calls-bar .list-search-field, .calls-bar .list-search .list-search-input.filters-search { width: 100%; max-width: 100%; }
.calls-bar .list-search-input.filters-search { font-weight: var(--fw-text); }
.calls-bar .period-picker { flex: 0 0 auto; }
/* Панель «Столбцы» раскрывается под всей строкой управления у её правого края (а не от кнопки): в любом окне остаётся на экране, и когда «Столбцы» ушли на вторую строку. */
.calls-bar .bar-actions { margin-left: 0; position: static; }
.calls-bar + .filter-pills, .filters-panel + .filter-pills { margin: 0 0 14px; }
.filters-panel { margin: -6px 0 20px; }
.calls-sets { display: contents; }
.period-picker-wide.is-quick .period-custom { padding: 0 12px; }
.period-picker-wide.is-quick .period-custom [id$="-label"] { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }

/* Таблица: строка 52 px (кружок 28 + по 12), время серым, балл жирным, «Суть» занимает остаток ширины и обрезается многоточием. */
#calls-list-card { padding: 4px 22px 8px; }
/* Обёртка таблицы шире карточки на её поля: флажок выбора строки лежит в левом поле и не сдвигает «Время» от края. */
#calls-list-card .calls-table-wrap { margin: 0 -22px; padding: 0 22px; }
.calls-table-wrap td, .calls-table-wrap th { padding-right: 8px; }
.calls-table-wrap th.col-select, .calls-table-wrap td.col-select { width: 0; min-width: 0; padding: 0; }
.calls-table-wrap .col-select input[type="checkbox"] { position: absolute; left: -20px; top: 50%; margin: 0; transform: translateY(-50%); }
.calls-table-wrap thead tr { position: relative; }
/* «Оператор» и «Суть» делят остаток ширины и обрезаются многоточием, остальные столбцы — по содержимому: таблица не ездит вбок, пока столбцов семь. */
.calls-table-wrap th.col-operator_name, .calls-table-wrap td.col-operator_name { width: 42%; }
.calls-table-wrap td.col-operator_name { max-width: 0; }
.calls-table-wrap td.col-operator_name .cell-clip { max-width: none; }
.calls-table-wrap th.col-summary { width: 22%; }
.calls-table-wrap th.col-user_talk_time, .calls-table-wrap td.col-user_talk_time, .calls-table-wrap th.col-score_percent, .calls-table-wrap td.col-score_percent { text-align: right; }
.calls-table-wrap td.col-start_stamp { color: var(--ds-text-2); }
.calls-table-wrap td.col-summary { width: 22%; min-width: 100px; max-width: 0; }
.calls-table-wrap td.col-summary .cell-summary { color: var(--ds-text-2); }
.calls-table-wrap .op-cell-marks, .call-card-operator .op-cell-marks { flex: none; display: inline-flex; gap: 4px; }
.cell-score { font-weight: var(--fw-strong); }
.cell-client-link { position: relative; font-weight: var(--fw-strong); }
.data-table tbody tr.row-missed, .data-table tbody tr.row-missed:hover { cursor: default; }
.call-card-missed { cursor: default; }
.call-card-operator .op-cell { display: inline-flex; flex-wrap: nowrap; max-width: 100%; }
.call-card-head .cell-time { color: var(--ds-text-2); }
.call-card-summary .cell-summary { display: block; color: var(--ds-text-2); white-space: normal; }
.call-card-tags .badge { max-width: 100%; white-space: normal; }
/* Пропущенный звонок: метка статуса и рядом меню «⋯» с действием «Не перезванивать» / «Вернуть в перезвон» (администратору и руководителю). */
.cell-status { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.call-card-tags .row-actions { margin-left: auto; }

/* Низ таблицы: «Показано 8 из 330» слева, размер страницы справа одной строкой. */
#calls-list-card .table-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0 6px; font-size: var(--fs-13); color: var(--ds-text-2); }
#calls-list-card .pager-count { margin-right: auto; }
#calls-list-card .page-size { flex-wrap: nowrap; gap: 4px; }
#calls-list-card .page-size-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#calls-list-card .page-size-btn { min-width: 0; min-height: 0; padding: 5px 10px; border-radius: var(--ds-r-seg); border: 1px solid var(--ds-border-strong); background: var(--ds-surface); color: var(--ds-text); font-size: var(--fs-13); font-weight: var(--fw-text); box-shadow: none; }
#calls-list-card .page-size-btn[aria-pressed="true"] { background: var(--ds-btn-bg); border-color: var(--ds-btn-bg); color: var(--ds-btn-fg); box-shadow: none; font-weight: var(--fw-text); }

/* Флажок выбора строк — только по наведению на таблицу (отмеченный остаётся на виду). */
@media (min-width: 721px) and (not (pointer: coarse)) {
  .calls-table-wrap th.col-select input:not(:checked) { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
  .calls-table-wrap:hover th.col-select input, .calls-table-wrap th.col-select input:focus-visible { opacity: 1; }
}

@media (max-width: 720px) {
  /* Телефон: вкладки две в ряд (все четыре видны без прокрутки), быстрые периоды — во всю ширину, «Столбцы» и «⋯» под ними. */
  .calls-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calls-tabs .source-tab { text-align: center; padding: 10px 8px; }
  .calls-bar .period-picker { order: -3; flex: 1 1 100%; }
  .calls-bar .period-picker .seg { display: flex; width: 100%; }
  .calls-bar .period-picker .seg-btn { flex: 1 1 0; min-width: 0; padding: 6px 4px; }
  .calls-bar .list-search { max-width: none; min-width: 0; }
  /* Строк управления не больше четырёх: поиск · быстрые периоды · отдел · «Фильтры» вместе со «Столбцами», «⋯» и «?». */
  .calls-bar #filters-open-btn { flex: 1 1 0; }
  .calls-bar .bar-actions { flex: 0 0 auto; }
  #calls-list-card { padding: 0; border: 0; background: transparent; }
  #calls-list-card .table-pager { padding: 12px 0 0; }
}

/* ---------- Правки по полному прогону (ТЗ №90, п. 6) ---------- */
/* Нажатая плитка темнеет плавно: переход цвета, рамки и фильтра (правило нажатия — system.css). */
a.tile { transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease); }
/* Каркас плиток по высоте — как настоящая плитка новой системы (подпись, число, пояснение). */
.skeleton-tiles .skeleton-row { height: 148px; }
.row-menu-list { max-width: calc(100vw - 16px); }
@media (max-width: 720px) {
  /* Метки на телефоне переносятся: длинная («грубость, повышение тона, …», «Категория: …») не растягивает страницу вбок. */
  .badge, .pill { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
  #calls-list-card .page-size-btn { min-height: 44px; min-width: 44px; }
  /* Закреплённый снизу плеер карточки звонка: отступ карточки (20 px) не поднимает его над нижним краем. */
  .player-card.card { margin-bottom: 0; }
}
@media print {
  body { color: var(--print-text); }
}
/* Причины риска под шапкой карточки клиента: список в строку («балл анкеты 13 % · регламент нарушен»). */
.rc-reasons { display: inline; margin: 0; padding: 0; list-style: none; }
.rc-reasons > li { display: inline; }
/* Плотнее строки таблиц: длинные страницы (журнал, самопроверка, карточка звонка) укладываются в 2 200 px (ТЗ №83). */
.data-table td { padding: 8px 10px 8px 0; }
.data-table th { padding: 10px 10px 8px 0; }
.data-table td:last-child, .data-table th:last-child { padding-right: 0; }
.selfcheck-period .data-table td { padding-top: 4px; padding-bottom: 4px; }
/* Карточка звонка плотнее (ТЗ №83: страница не выше 2 200 px): плитки шапки и карточки правой колонки. */
.call-tiles .tile { padding: 14px 16px; gap: 6px; }
.call-tiles .tile-value { line-height: 1.1; }
.call-layout .card { padding: 14px 16px; margin-bottom: 12px; }
.call-layout .card-header { margin-bottom: 8px; }
.call-layout .principle-row { padding: 8px 0; }
.call-layout #card-head, .call-layout #verify-dock .card, .call-layout #verdict-top > * { margin-bottom: 8px; }
.call-layout #score-card-wrap .card-header { margin-bottom: 4px; }
.call-layout .score-ring-wrap { transform: scale(0.8); transform-origin: left top; margin-bottom: -12px; }
.call-tiles .tile { padding: 12px 16px; gap: 4px; }
.call-tiles .tile-icon { width: 28px; height: 28px; }
.call-tiles .tile-value { font-size: var(--fs-26); }
.call-layout .call-top { gap: var(--sp-2); margin-bottom: 8px; }
.call-layout .verdict-card { padding: 10px 14px; margin-bottom: 8px; }
.call-layout #verify-dock { padding: 10px 14px; }
.call-layout #call-type-line, .call-layout .call-type-line { margin: 4px 0; }
#card-v2-slot { margin-top: 0; }
#card-v2-slot .card { padding: 10px 14px; margin-bottom: 8px; }
.call-tiles { gap: 10px; margin-bottom: 4px; }
.call-tiles .tile-foot { line-height: 1.3; }
/* Карточка звонка — две колонки: ей нужна вся ширина окна, а не колонка 1 048 px (текст оценки и разбора переносится реже, страница ниже). */
.content:has(#call-facts) { max-width: none; }
.call-tiles .tile-icon { display: none; }
.call-tiles .tile-foot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-tiles .tile { padding: 10px 16px; }
.call-layout .card { margin-bottom: 10px; }
.call-layout .principle-row { padding: 6px 0; }
.call-layout .verdict-card { padding: 8px 14px; }
/* Закрытое меню «⋯» не занимает места (раньше его невидимый список мог уходить за край окна на 390 px). */
.row-menu:not([open]) > .row-menu-list { display: none; }
@media (max-width: 720px) {
  .call-layout .player-card.card { margin-bottom: 0; }
}
/* Экран входа — по центру окна, а не в колонке 1 048 px. */
body.login-screen .content { max-width: none; margin-inline: auto; }
/* Плитки «Главного» директора поднимаются при наведении на 2 px — единственные (ТЗ №81, п. 3). */
a.tile.director-tile { transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
a.tile.director-tile:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { a.tile.director-tile:hover { transform: none; } }