#screen-operative{ --ops-heat:#14B8A6; }

/* ═════ ОПЕРАТИВКА · база и сетки ═════ */
#screen-operative > section[id^="op-block-"]{ margin-bottom:28px; }
#screen-operative > section[id^="op-block-"]:last-of-type{ margin-bottom:0; }
#screen-operative .op-sub{ font-size:12.5px;color:var(--muted);font-weight:500;margin-top:-6px;margin-bottom:14px; }
#screen-operative .op-sub-inline{ font-size:12.5px;color:var(--muted);font-weight:500;margin-left:6px;white-space:nowrap; }

/* 6-колоночная KPI-сетка Блока 1 (шасси .kpi-grid без колонок) */
#screen-operative .op-kpi-grid{ display:grid;gap:16px;grid-template-columns:1.6fr repeat(5,1fr); }

/* A1 (2026-05-25, мини-дельта): hover-состояние кликабельных KPI-плиток 2–6 ведём
   JS-классом .op-kpi-hl, а не :hover. :hover залипает под неподвижным курсором,
   когда поверх плитки появляется оверлей модалки (mouseleave не срабатывает) —
   синяя рамка/подъём оставались после открытия. Класс снимается при openNavModal/openModal.
   Шасси (.kpi-card:hover, стр. 273/275) не трогаем — правка только в скоупе Оперативки. */
#screen-operative .op-kpi-grid .kpi-card[data-nav]:hover{
  transform:none; box-shadow:var(--shadow); border-color:var(--border-2);
}
#screen-operative .op-kpi-grid .kpi-card[data-nav].op-kpi-hl{
  transform:translateY(-1px); box-shadow:var(--shadow-lg); border-color:var(--accent-ink);
}
/* A2 (2026-05-25): подавляем ложный подъём/тень у НЕкликабельных плиток (hero без data-nav)
   в скоупе Оперативки — подъём читался как «нажимаемая» (рецидив урока 4692). */
#screen-operative .kpi-card:not([data-nav]):hover{ transform:none; box-shadow:var(--shadow); }
/* F-3 (2026-05-26): у некликабельной hero-плитки иконка тоже не должна «оживать» на hover
   (глобальное .kpi-card:hover .kpi-ic scale читалось как аффорданс — тот же дефект 4692). */
#screen-operative .kpi-card:not([data-nav]):hover .kpi-ic{ transform:none; }
/* плитки ряда равной высоты (грид-stretch); hero выше из-за кнопки — последний элемент
   плитки (хинт; у hero — кнопка) прижат к низу, чтобы у плиток 2–6 не «висел» пустой низ */
#screen-operative .op-kpi-grid .kpi-card > *:last-child{ margin-top:auto; }

/* hero-плитка Блока 1 — фон по статусу (паттерн V103 .kpi-hero.is-*) */
#screen-operative .kpi-hero.is-ok{ background:linear-gradient(135deg,var(--success),color-mix(in srgb,var(--success) 55%,#fff)); }
#screen-operative .kpi-hero.is-warn{ background:linear-gradient(135deg,var(--warn),color-mix(in srgb,var(--warn) 55%,#fff)); }
#screen-operative .kpi-hero.is-danger{ background:linear-gradient(135deg,var(--danger),color-mix(in srgb,var(--danger) 55%,#fff)); }
#screen-operative .kpi-hero.is-ok .btn-action{ color:var(--success); }
#screen-operative .kpi-hero.is-warn .btn-action{ color:var(--warn); }
#screen-operative .kpi-hero.is-danger .btn-action{ color:var(--danger); }
/* статус-чип на цветном hero — белый полупрозрачный, чтобы читался */
#screen-operative .kpi-hero .chip{ background:rgba(255,255,255,.22);color:#fff; }

/* 2026-05-20 · dark: на ярких --success/--warn/--danger (#4ADE80 и т.п.) белый текст
   в hero-плитке не читался. Затемняем градиенты до насыщенных «700→600» оттенков —
   белые label/value/hint и чип снова контрастны. */
[data-theme="dark"] #screen-operative .kpi-hero.is-ok{
  background:linear-gradient(135deg,#047857,#059669);
}
[data-theme="dark"] #screen-operative .kpi-hero.is-warn{
  background:linear-gradient(135deg,#B45309,#D97706);
}
[data-theme="dark"] #screen-operative .kpi-hero.is-danger{
  background:linear-gradient(135deg,#BE123C,#E11D48);
}
/* кнопка-действие (белый фон) — текст из того же насыщенного оттенка */
[data-theme="dark"] #screen-operative .kpi-hero.is-ok .btn-action{ color:#047857; }
[data-theme="dark"] #screen-operative .kpi-hero.is-warn .btn-action{ color:#B45309; }
[data-theme="dark"] #screen-operative .kpi-hero.is-danger .btn-action{ color:#BE123C; }

/* 2026-05-20: .sg-4 удалён вместе с обновлением Модуля 3 (Практики);
   новая сетка 2-в-ряд живёт в .op-prac-grid ниже. */

@media (max-width:1180px){
  #screen-operative .op-kpi-grid{ grid-template-columns:repeat(3,1fr); }
  #screen-operative .op-kpi-grid .kpi-hero{ grid-column:span 3;order:-1; }
}
@media (max-width:720px){
  #screen-operative .op-kpi-grid{ grid-template-columns:1fr; }
}

/* ═════ ОПЕРАТИВКА · модалка «Навигатор» ═════ */
#op-nav-modal{ position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:24px; }
#op-nav-modal.is-open{ display:flex; }
#op-nav-modal .op-modal-ov{ position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px); }
#op-nav-modal .op-modal-card{
  position:relative;z-index:1;width:min(520px,100%);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);
  padding:26px 26px 22px;animation:opModalIn .18s ease-out;
}
@keyframes opModalIn{ from{opacity:0;transform:translateY(10px) scale(.98)} to{opacity:1;transform:none} }
#op-nav-modal .op-modal-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px;
}
#op-nav-modal .op-modal-quote{
  font-size:14.5px;line-height:1.5;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border-2);border-left:3px solid var(--accent);border-radius:var(--r-sm);
  padding:14px 16px;margin-bottom:18px;
}
#op-nav-modal .op-modal-btns{ display:flex;gap:10px;margin-bottom:14px; }
#op-nav-modal .op-modal-btns > *{ flex:1; }
#op-nav-modal .op-modal-cancel{
  display:block;width:100%;text-align:center;background:none;color:var(--muted);
  font-size:13px;font-weight:600;padding:4px;
}
#op-nav-modal .op-modal-cancel:hover{ color:var(--text-2); }

/* ═════ ОПЕРАТИВКА · Утилизация дня · гистограмма % (Блок 2) ═════ */
/* 2026-05-20: area-chart заменён на гистограмму % с разбивкой
   билл / небилл / idle и табами «Компания / На активного». */
#screen-operative #op-block-2 .op-util2-head-right{
  display:flex;align-items:center;gap:24px;
}
#screen-operative .op-util2-card{
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--shadow);
}
/* Переключение единиц графика (Проценты / Часы) — для SVG и подсказки */
#screen-operative .op-util2-card.is-pct .mode-hrs,
#screen-operative .op-util2-card.is-hrs .mode-pct{ display:none; }
/* (Сводка снизу переключается через JS-замену textContent по data-company/data-per-emp) */
#screen-operative .op-util2-note{
  color:var(--muted);font-size:12.5px;margin-bottom:14px;
}
#screen-operative .op-util2-legend{
  display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--text-2);margin-bottom:10px;
}
#screen-operative .op-util2-legend .item{ display:inline-flex;align-items:center;gap:6px; }
#screen-operative .op-util2-legend .sw{ width:11px;height:11px;border-radius:3px;display:inline-block; }
#screen-operative .op-util2-svg{ display:block;width:100%;height:auto; }
#screen-operative .op-util2-summary-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin:18px 0 14px;padding-top:18px;border-top:1px dashed var(--border);
  gap:16px;flex-wrap:wrap;
}
#screen-operative .op-util2-title{
  font-size:13px;font-weight:700;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;
}
#screen-operative .op-util2-tabs{ display:inline-flex;gap:22px; }
/* F-2 (2026-05-26): нижний тоггл «Компания / В среднем на активного» (#op-util2-mode) живёт
   у правого края карточки, а верхние табы «В процентах / В часах» заканчиваются левее —
   правее них в шапке стоит кнопка «✦ Обсудить с агентом». Резервируем такое же охранное поле
   справа у нижнего тоггла, чтобы его правый край встал на одну вертикаль с «В часах».
   --op-util2-guard ≈ ширина кнопки агента; точное значение подгоняется по скрину. */
#screen-operative #op-block-2{ --op-util2-guard:168px; }
#screen-operative #op-util2-mode{ margin-right:var(--op-util2-guard); }
@media (max-width:720px){ #screen-operative #op-util2-mode{ margin-right:0; } }
#screen-operative .op-util2-tab{
  font-size:13.5px;font-weight:700;color:var(--muted);
  padding:6px 0;background:none;border:none;border-bottom:2px solid transparent;
  cursor:pointer;font-family:inherit;letter-spacing:-.01em;
  transition:color .15s, border-color .15s;
}
#screen-operative .op-util2-tab:hover{ color:var(--text-2); }
#screen-operative .op-util2-tab.is-active{ color:var(--text);border-bottom-color:var(--accent-ink); }
#screen-operative .op-util2-tab:focus{ outline:none; }
#screen-operative .op-util2-tab:focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:3px; }
#screen-operative .op-util2-foot4{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
#screen-operative .op-util2-foot4 .cell{
  background:var(--surface-2);border:1px solid var(--border-2);
  border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:6px;
}
#screen-operative .op-util2-foot4 .k{ font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.02em; }
#screen-operative .op-util2-foot4 .v{ font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--text); }
#screen-operative .op-util2-foot4 .lfl{
  font-size:11.5px;font-weight:700;
  align-self:flex-start;padding:3px 9px;border-radius:6px;
  background:var(--surface-3);color:var(--text-2);
}
#screen-operative .op-util2-foot4 .lfl.--up{ background:var(--success-soft);color:var(--success); }
#screen-operative .op-util2-foot4 .lfl.--down{ background:var(--danger-soft);color:var(--danger); }
#screen-operative .op-util2-foot4 .lfl.--down-good{ background:var(--success-soft);color:var(--success); }
@media (max-width:720px){ #screen-operative .op-util2-foot4{ grid-template-columns:repeat(2,1fr); } }

/* ═════ ОПЕРАТИВКА · карточка практики (Блок 3) ═════ */
/* 2026-05-20: 2-в-ряд (было 4); метрики 2×3; sparkline → стек билл/небилл/idle. */
#screen-operative .op-prac-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
}
#screen-operative .op-prac-card{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border-2);border-radius:var(--r);padding:22px;
  box-shadow:var(--shadow);transition:border-color .15s ease;cursor:default;
}
#screen-operative .op-prac-card:hover{ border-color:var(--accent-soft-2); }
#screen-operative .op-prac-head{ display:flex;align-items:center;gap:12px;margin-bottom:16px; }
#screen-operative .op-prac-mark{ width:36px;height:36px;border-radius:10px;flex-shrink:0; }
#screen-operative .op-prac-mark.--success{ background:var(--success); }
#screen-operative .op-prac-mark.--warn{ background:var(--warn); }
#screen-operative .op-prac-mark.--danger{ background:var(--danger); }
#screen-operative .op-prac-name-wrap{ min-width:0;flex:1; }
#screen-operative .op-prac-name{ font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em; }
#screen-operative .op-prac-type{ font-size:11.5px;color:var(--muted);font-weight:500;margin-top:2px; }
#screen-operative .op-prac-shift{
  flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--muted);
  background:var(--surface-3);border-radius:20px;padding:4px 10px;white-space:nowrap;
}
#screen-operative .op-prac-metrics{
  border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2);
  padding:14px 0;margin-bottom:14px;
  display:flex;flex-direction:column;gap:10px;
}
#screen-operative .op-prac-metric-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
#screen-operative .op-prac-metric{ min-width:0; }
#screen-operative .op-prac-metric .mv{ font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--text); }
#screen-operative .op-prac-metric .ml{ font-size:10.5px;color:var(--muted);font-weight:600;margin-top:2px;line-height:1.2; }
#screen-operative .op-prac-spark2-wrap{ margin-bottom:14px; }
#screen-operative .op-prac-spark2{ display:block;width:100%;height:auto;max-height:64px; }
/* Цвет билл-сегмента — по эфф% этого часа (как Модуль 2), не по статусу всей карточки */
#screen-operative .op-prac-spark2-bill rect{ fill: var(--success); }
#screen-operative .op-prac-spark2-bill.--success rect{ fill: var(--success); }
#screen-operative .op-prac-spark2-bill.--warn rect{ fill: var(--warn); }
#screen-operative .op-prac-spark2-bill.--danger rect{ fill: var(--danger); }
#screen-operative .op-prac-spark2-nb rect{ fill: var(--accent-soft-2); }
#screen-operative .op-prac-spark2-cap{ font-size:10.5px;color:var(--muted);font-weight:500;margin-top:5px; }
#screen-operative .op-prac-spark2-now{ color:var(--text-2);font-weight:600; }
/* 2026-05-20 · кнопки не растягиваем — натуральная ширина по контенту, одинаковая везде */
#screen-operative .op-prac-btns{ display:flex;gap:8px;margin-top:auto;flex-wrap:wrap; }
#screen-operative .op-prac-btns > *{ flex:0 0 auto; }

/* Placeholder-карточки (Практика 5–6) — скрыты по умолчанию через .is-hidden (паттерн шасси, B2 2026-05-25) */
#screen-operative .op-prac-card-placeholder{ cursor:default; }
#screen-operative .op-prac-card.is-hidden{ display:none; }
#screen-operative .op-prac-card-placeholder:hover{ transform:none;box-shadow:var(--shadow);border-color:var(--border-2); }
#screen-operative .op-prac-mark-placeholder{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:var(--surface-3);border:1px dashed var(--border);
}
#screen-operative .op-prac-card-placeholder .op-prac-name{ color:var(--muted); }
#screen-operative .op-prac-card-placeholder .op-prac-shift{ opacity:.5; }
#screen-operative .op-prac-placeholder-body{
  border-top:1px solid var(--border-2);padding-top:14px;
  display:flex;flex-direction:column;gap:10px;flex:1;
}
#screen-operative .op-prac-placeholder-line{
  height:10px;border-radius:5px;background:var(--surface-3);
}
#screen-operative .op-prac-placeholder-line:nth-child(2){ width:80%; }
#screen-operative .op-prac-placeholder-line:nth-child(3){ width:65%; }
#screen-operative .op-prac-placeholder-line:nth-child(4){ width:90%; }

/* B2 (2026-05-25): раскрытие М3 переведено на шасси .expand-actions/.expand-btn/.collapse-btn;
   старые .op-prac-expand-row/-btn/-ic удалены. */

@media (max-width:980px){
  #screen-operative .op-prac-grid{ grid-template-columns:1fr; }
}

/* ═════ ОПЕРАТИВКА · зоны контрактов · воронка + практики (Блок 4) ═════ */
/* 2026-05-20 v2: Вариант C + правки методолога.
   — Δ-чипы заменены 7-дневной stacked-динамикой;
   — кнопка «Все контракты» переехала в шапку воронки;
   — практики 2-в-ряд (как Модуль 3) с раскрытием до 6;
   — цветные точки практик удалены;
   — счётчики зон в карточке практики подписаны словами;
   — часовой футер удалён. */
#screen-operative .op-funnel{
  background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--r);padding:20px 22px 22px;box-shadow:var(--shadow);
}
#screen-operative .op-funnel-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;
}
#screen-operative .op-funnel-title{font-size:13.5px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
#screen-operative .op-funnel-sub{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px;}
#screen-operative .op-funnel-all-btn{padding:7px 12px;font-size:12px;font-weight:700;}
#screen-operative .op-funnel-bar{
  display:flex;height:54px;border-radius:12px;overflow:hidden;
  background:var(--surface-3);
}
#screen-operative .op-funnel-seg{
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  color:#fff;font-weight:700;letter-spacing:-.01em;padding:0 8px;
  cursor:pointer;transition:filter .15s,box-shadow .15s,transform .15s;min-width:0;
  position:relative;
}
#screen-operative .op-funnel-seg:hover{
  filter:brightness(1.14);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
  z-index:1;
}
#screen-operative .op-funnel-seg.--green{background:var(--success)}
#screen-operative .op-funnel-seg.--yellow{background:var(--warn)}
#screen-operative .op-funnel-seg.--red{background:var(--danger)}
#screen-operative .op-funnel-num{font-size:17px;line-height:1;font-weight:700;letter-spacing:-.02em;}
#screen-operative .op-funnel-pct{font-size:11px;font-weight:700;opacity:.92;margin-top:2px;letter-spacing:0;}
#screen-operative .op-funnel-labels{
  display:flex;margin-top:8px;font-size:11px;color:var(--muted);
  font-weight:700;letter-spacing:.03em;text-transform:uppercase;gap:0;
}
#screen-operative .op-funnel-lab{text-align:center;padding:0 4px;min-width:0;}

/* 2026-05-20 v3 · 7-дневная динамика — линейный график (X=дни, Y=кол-во контрактов).
   Переключатель По зонам (3 линии) / По практикам (4 линии). */
#screen-operative .op-zones-trend{
  margin-top:18px;padding-top:14px;border-top:1px dashed var(--border);
}
#screen-operative .op-zones-trend-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:12px;
}
#screen-operative .op-zones-trend-title{
  font-size:11.5px;color:var(--muted);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
#screen-operative .op-zones-trend-controls{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
#screen-operative .op-zones-trend-legend{
  display:inline-flex;gap:14px;font-size:11px;color:var(--text-2);font-weight:700;flex-wrap:wrap;
}
#screen-operative .op-zones-trend-legend span{display:inline-flex;align-items:center;gap:5px;}
#screen-operative .op-zones-trend-legend .sw{
  width:14px;height:3px;border-radius:2px;display:inline-block;
}
#screen-operative .op-zones-trend-chart{ width:100%; }
#screen-operative .op-zones-trend-chart svg{ display:block;width:100%;height:auto; }

/* Заголовок секции «По практикам» */
#screen-operative .op-prac-zone-cap{
  font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;margin:20px 0 12px;
}
/* Сетка практик: 2-в-ряд (как Модуль 3) */
#screen-operative .op-prac-zone-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
#screen-operative .op-prac-zone-card{
  background:var(--surface);border:1px solid var(--border-2);border-radius:14px;
  padding:16px 18px 14px;display:flex;flex-direction:column;gap:10px;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
/* A3 (2026-05-25): тело карточки практики некликабельно (действие — только кнопка
   «Обсудить с агентом»). Убран ложный подъём translateY (рецидив 4692), оставлена
   подсветка рамки на hover как у op-prac-card (М3). */
#screen-operative .op-prac-zone-card:hover{
  border-color:var(--accent-soft-2);box-shadow:var(--shadow);
}
#screen-operative .op-prac-zone-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
#screen-operative .op-prac-zone-name{
  font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--text);
}
#screen-operative .op-prac-zone-total{font-size:12px;color:var(--muted);font-weight:700;}
#screen-operative .op-prac-zone-total b{color:var(--text);font-weight:700;font-size:14px;}
#screen-operative .op-prac-zone-bar{
  display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--surface-3);
}
#screen-operative .op-prac-zone-bar .sg-g{background:var(--success)}
#screen-operative .op-prac-zone-bar .sg-y{background:var(--warn)}
#screen-operative .op-prac-zone-bar .sg-r{background:var(--danger)}
#screen-operative .op-prac-zone-counts{
  display:flex;justify-content:flex-start;gap:14px;flex-wrap:wrap;
  font-size:12px;color:var(--text-2);font-weight:600;
}
#screen-operative .op-prac-zone-counts .grp{display:inline-flex;align-items:center;gap:6px}
#screen-operative .op-prac-zone-counts .sw{width:8px;height:8px;border-radius:2px;display:inline-block}
#screen-operative .op-prac-zone-counts .sw.--g{background:var(--success)}
#screen-operative .op-prac-zone-counts .sw.--y{background:var(--warn)}
#screen-operative .op-prac-zone-counts .sw.--r{background:var(--danger)}
#screen-operative .op-prac-zone-counts .n{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;}
#screen-operative .op-prac-zone-counts .n.--accent-r{color:var(--danger)}
#screen-operative .op-prac-zone-counts .dim{color:var(--muted);font-weight:700}
#screen-operative .op-prac-zone-counts .lbl{color:var(--muted);font-weight:600;}
/* Кнопки карточки практики: «Все контракты →» (F-1, btn-s) + «✦ Обсудить с агентом» (B1, btn-ai).
   F-1.1 (2026-05-26): кнопки по ЛЕВОМУ краю — единый стандарт с карточками практик М3 (.op-prac-btns). */
#screen-operative .op-prac-zone-btns{
  display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap;
}
#screen-operative .op-prac-zone-contracts-btn{ white-space:nowrap; }

/* Placeholder-карточки П5 / П6 — скрыты через .is-hidden (паттерн шасси, B2 2026-05-25) */
#screen-operative .op-prac-zone-card-placeholder{
  cursor:default;
}
#screen-operative .op-prac-zone-card.is-hidden{ display:none; }
#screen-operative .op-prac-zone-card-placeholder:hover{
  transform:none;box-shadow:none;border-color:var(--border-2);
}
#screen-operative .op-prac-zone-card-placeholder .op-prac-zone-name{color:var(--muted);}
#screen-operative .op-prac-zone-card-placeholder .op-prac-zone-total{opacity:.5;}
#screen-operative .op-prac-zone-placeholder-line{
  height:9px;border-radius:5px;background:var(--surface-3);
}
#screen-operative .op-prac-zone-placeholder-line + .op-prac-zone-placeholder-line{margin-top:8px;}
#screen-operative .op-prac-zone-placeholder-line.--short{width:55%;}
#screen-operative .op-prac-zone-placeholder-line.--mid{width:75%;}

/* B2 (2026-05-25): раскрытие М4 переведено на шасси .expand-actions/.expand-btn/.collapse-btn;
   старые .op-prac-zone-expand-row/-btn/-ic удалены. */

@media (max-width:720px){
  #screen-operative .op-prac-zone-grid{ grid-template-columns:1fr; }
}

/* ═════ ОПЕРАТИВКА · heatmap (Блок 5) ═════ */
#screen-operative .op-hm-card{
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);
}
/* 2026-05-20: добавлен второй чип-кластер (метрика); .op-7d* удалены (методолог: «лишнее»). */
#screen-operative .op-hm-controls{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
}
#screen-operative .op-hm-chips{ display:flex;gap:8px; }
#screen-operative .op-hm-chip{
  font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px;
  background:var(--surface-3);color:var(--muted);transition:.15s;
  border:none;font-family:inherit;cursor:pointer;
}
#screen-operative .op-hm-chip.is-active{ background:var(--accent-fill);color:var(--accent-fill-ink); }
#screen-operative .op-hm-grid{ display:grid;grid-template-columns:170px repeat(36,1fr);gap:2px;align-items:center; }
#screen-operative .op-hm-hours{
  display:grid;grid-template-columns:170px repeat(36,1fr);gap:2px;
  font-size:10px;color:var(--muted);margin-bottom:4px;
}
#screen-operative .op-hm-hours > span{ grid-column:span 4;text-align:left; }
/* Метка практики/сотрудника: фиксированная колонка, максимум 2 строки с многоточием
   (длинные названия «Практика …» не наезжают на сетку; полное имя — в title по наведению). */
#screen-operative .op-hm-rowlabel{
  font-size:12px;color:var(--text);font-weight:600;cursor:pointer;
  line-height:1.2;padding-right:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#screen-operative .op-hm-rowlabel:hover{ color:var(--accent-ink); }
#screen-operative .op-hm-cell{ aspect-ratio:1;border-radius:2px; }
#screen-operative .op-hm-legend{
  display:flex;align-items:center;gap:10px;margin-top:14px;font-size:11px;color:var(--muted);flex-wrap:wrap;
}
#screen-operative .op-hm-legend .sw{ width:14px;height:14px;border-radius:3px;display:inline-block; }

/* ═════ ОПЕРАТИВКА · список сотрудников (Блок 6) ═════ */
#screen-operative .op-emp-chips{ display:flex;gap:8px;flex-wrap:wrap; }
#screen-operative .op-emp-chip{
  font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px;
  background:var(--surface-3);color:var(--muted);transition:.15s;
}
#screen-operative .op-emp-chip.is-active{ background:var(--accent-fill);color:var(--accent-fill-ink); }
/* 2026-05-26: направление сортировки — два чипа (как op-emp-chip), активный подсвечен */
#screen-operative .op-emp-sort{ display:inline-flex;gap:6px; }
#screen-operative .op-emp-sortchip{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:5px 12px;border-radius:20px;background:var(--surface-3);color:var(--muted);
  cursor:pointer;font-family:inherit;transition:.15s;
}
#screen-operative .op-emp-sortchip:hover{ color:var(--text-2); }
#screen-operative .op-emp-sortchip.is-active{ background:var(--accent-fill);color:var(--accent-fill-ink); }
#screen-operative .op-emp-sortchip-ic{ font-weight:700;color:var(--accent-ink); }
#screen-operative .op-emp-sortchip.is-active .op-emp-sortchip-ic{ color:#fff; }
#screen-operative .op-emp-list{ display:flex;flex-direction:column;gap:8px; }
#screen-operative .op-emp-card{
  display:grid;align-items:center;gap:14px;
  grid-template-columns:34px minmax(0,1fr) 200px 120px auto;
  background:var(--surface);
  border:1px solid var(--border-2);border-radius:var(--r-sm);padding:14px 16px;cursor:default;
  transition:border-color .12s ease;
}
#screen-operative .op-emp-chip-ph{ visibility:hidden; }
#screen-operative .op-emp-card:hover{ border-color:var(--border); }
#screen-operative .op-emp-card.is-hidden{ display:none; }
#screen-operative .op-emp-card.--offshift{ opacity:.65; }
#screen-operative .op-emp-rank{ font-size:20px;font-weight:700;color:var(--muted);width:34px;text-align:center;flex-shrink:0; }
#screen-operative .op-emp-id{ font-size:13.5px;font-weight:700;color:var(--text); }
#screen-operative .op-emp-meta{ font-size:11.5px;color:var(--muted);margin-top:2px; }
#screen-operative .op-emp-main{ text-align:right;min-width:0; }
#screen-operative .op-emp-main .mv{ font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--text); }
#screen-operative .op-emp-main .ml{ font-size:10.5px;color:var(--muted);font-weight:600; }
/* 2026-05-20 · вторичные метрики (общая+эфф+резерв всегда видны рядом с главной) */
#screen-operative .op-emp-aux{
  font-size:11.5px;color:var(--muted);font-weight:600;margin-top:5px;letter-spacing:-.005em;
}
#screen-operative .op-emp-aux b{ color:var(--text-2);font-weight:700;font-variant-numeric:tabular-nums; }
#screen-operative .op-emp-card .btn-ai{ flex-shrink:0; }

/* ═════ ОПЕРАТИВКА · индикаторы загрузки (вместо «…») ═════ */
@keyframes opShimmer{ 0%{background-position:-180px 0} 100%{background-position:calc(180px + 100%) 0} }
@keyframes opSpin{ to{ transform:rotate(360deg) } }
#screen-operative .op-skel{
  display:inline-block;height:1.05em;min-width:62px;border-radius:6px;vertical-align:middle;
  background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);
  background-size:180px 100%;animation:opShimmer 1.2s ease-in-out infinite;
}
#screen-operative .op-skel-sm{ min-width:26px;height:.9em; }
#screen-operative .op-loading{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:30px 16px;color:var(--muted);font-size:13px;font-weight:600;
}
#screen-operative .op-loading::before{
  content:"";width:16px;height:16px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--border-2);border-top-color:var(--accent);animation:opSpin .7s linear infinite;
}