/* home4.css — «Главная: операционный обзор». Префикс .h4-. Блоки KPI (.kpi-tile, .kpi-light, .kpi-bar) и задач (.dt-*) берутся из dtasks.css; здесь только раскладка главной.
   Десктоп: плитки в ряд, слева проекты / светофор / финансы, справа красный «Срывы и разборы», жёлтый «Процессные», «Люди». Телефон: одна колонка в порядке --po, плитки по две, светофор свёрнут. */
/* переменные: на странице обзора и на блоках, встроенных в главную v3 (.d3-blk[data-block^=h4]) */
.h4, .d3-blk[data-block^="h4"] { --ctr-card: var(--bg-secondary); --ctr-line: var(--border-subtle, var(--border-strong)); --dt-green: var(--status-success); --dt-blue: #4a8af4; --dt-amber: var(--status-warning); --dt-red: var(--status-danger); --dt-purple: #a56ef0; }
.h4 { display: grid; gap: 18px; align-content: start; padding: 4px 0 24px; min-width: 0; }
.h4-preview { justify-self: end; }
.h4-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.h4-hi { font-size: 14px; color: var(--text-secondary); } .h4-hi b { color: var(--text-primary); font-weight: 600; }
.h4-sentence { margin: 4px 0 0; font: 600 26px/1.25 var(--font-display); letter-spacing: -.01em; text-wrap: balance; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.h4-part { color: var(--text-primary); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--text-primary) 18%, transparent); } .h4-part:hover { border-bottom-color: var(--accent-primary); }
.h4-part b { font-variant-numeric: tabular-nums; } .h4-part--bad { color: var(--status-danger); border-bottom-color: color-mix(in srgb, var(--status-danger) 45%, transparent); }
.h4-dot { color: var(--text-muted); }
.h4-hero__side { display: grid; justify-items: end; gap: 4px; }
.h4-scope { font: 600 11px var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .h4-date { font-size: 13px; color: var(--text-secondary); }
.h4-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.h4-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.h4-col { display: grid; gap: 16px; min-width: 0; align-content: start; }
.h4-card { background: var(--ctr-card); border: 1px solid var(--ctr-line); border-radius: 12px; padding: 16px 18px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.h4-card[hidden] { display: none; }
.h4-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.h4-head h2 { margin: 0; font: 600 15px var(--font-sans); display: inline-flex; align-items: center; gap: 8px; } .h4-head small { color: var(--text-muted); font-size: 12px; }
.h4-all { margin-left: auto; font-size: 12.5px; color: var(--accent-primary); text-decoration: none; } .h4-all:hover { text-decoration: underline; }
.h4-empty { margin: 0; }
.h4-card--failures { border-color: color-mix(in srgb, var(--status-danger) 45%, transparent); background: color-mix(in srgb, var(--status-danger) 5%, var(--ctr-card)); }
.h4-card--failures.h4-box--ok { border-color: var(--ctr-line); background: var(--ctr-card); }
.h4-card--failures .h4-head h2 { color: var(--status-danger); } .h4-card--failures.h4-box--ok .h4-head h2 { color: var(--text-primary); }
.h4-card--process { border-color: color-mix(in srgb, var(--status-warning) 45%, transparent); background: color-mix(in srgb, var(--status-warning) 6%, var(--ctr-card)); }
.h4-card--process .h4-head h2 { color: var(--status-warning); }
.h4-note { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.h4-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.h4-list a { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--ctr-line); text-decoration: none; color: inherit; min-width: 0; } .h4-list li:first-child a { border-top: 0; }
.h4-list b { font: 500 13.5px/1.35 var(--font-sans); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .h4-list a:hover b { text-decoration: underline; }
.h4-list span { font-size: 12px; color: var(--text-muted); }
.h4-projs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.h4-proj { display: grid; gap: 6px; padding-left: 12px; border-left: 4px solid var(--dt-green); } .h4-proj.is-alert { border-left-color: var(--status-danger); }
.h4-proj__top { display: flex; align-items: center; gap: 10px; min-width: 0; } .h4-proj__t { font: 600 14px var(--font-sans); color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .h4-proj__t:hover { text-decoration: underline; }
.h4-proj__prog { display: flex; align-items: center; gap: 10px; min-width: 0; } .h4-proj__prog .dt-pb { flex: 1 1 160px; max-width: 320px; --tone: var(--dt-green); }
.h4-proj__meta { display: flex; gap: 14px; font-size: 12px; color: var(--text-muted); }
.h4-lights { gap: 8px; } .h4-more { display: none; justify-self: start; }
.h4-fin { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.h4-fin__row { display: grid; gap: 6px; } .h4-fin__top { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; align-items: baseline; }
.h4-fin__v { font-variant-numeric: tabular-nums; font-weight: 600; } .h4-fin__v em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.h4-fin__meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-muted); }
.h4-people { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .h4-people div { display: grid; gap: 2px; } .h4-people dt { font-size: 12px; color: var(--text-muted); } .h4-people dd { margin: 0; font: 700 22px var(--font-display); font-variant-numeric: tabular-nums; }
.h4-tasks { display: grid; } .h4-tasks .dt-task { height: auto; margin: 4px 0; grid-template-columns: auto minmax(0, 1fr) auto; } .h4-tasks .dt-task .dt-owner { display: none; }
.h4-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.h4-blk[hidden] { display: none; }

@media (max-width: 1100px) { .h4-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .h4 { gap: 14px; padding-bottom: 12px; }
  .h4-sentence { font-size: 21px; } .h4-hero__side { justify-items: start; }
  .h4-preview { justify-self: stretch; }
  .h4-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .h4-tiles .kpi-tile { padding: 12px; } .h4-tiles .kpi-tile__v { font-size: 24px; }
  /* одна колонка: все блоки в одном потоке в порядке --po (деревья колонок «растворяются») */
  .h4 { display: flex; flex-direction: column; } .h4-cols, .h4-col { display: contents; }
  .h4 > .h4-blk, .h4-blk { order: var(--po, 9); }
  .h4-blk--hero { order: 0; }
  .h4-card { padding: 14px; }
  .h4-lights.is-collapsed .kpi-light:nth-child(n+3) { display: none; } .h4-more { display: inline-flex; min-height: 44px; width: 100%; justify-content: center; }
  .h4-proj__prog .dt-pb { flex-basis: 100px; }
}
@media (prefers-reduced-motion: reduce) { .h4 * { transition: none !important; animation: none !important; } }

/* блоки, встроенные в главную v3: плитки — без подложки (сами карточки), разделы — карточки v3; красный и жёлтый блоки сохраняют свой тон */
.d3 .d3-blk[data-block="h4tiles"] { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.d3-blk[data-block="h4failures"]:not([hidden]) { border-color: color-mix(in srgb, var(--status-danger) 45%, transparent) !important; background: color-mix(in srgb, var(--status-danger) 5%, var(--bg-secondary)) !important; }
.d3-blk[data-block="h4failures"].h4-box--ok { border-color: var(--border-subtle, var(--border-strong)) !important; background: var(--bg-secondary) !important; }
.d3-blk[data-block="h4failures"] .h4-head h2 { color: var(--status-danger); } .d3-blk[data-block="h4failures"].h4-box--ok .h4-head h2 { color: var(--text-primary); }
.d3-blk[data-block="h4process"]:not([hidden]) { border-color: color-mix(in srgb, var(--status-warning) 45%, transparent) !important; background: color-mix(in srgb, var(--status-warning) 6%, var(--bg-secondary)) !important; }
.d3-blk[data-block="h4process"] .h4-head h2 { color: var(--status-warning); }
.d3-blk[data-block^="h4"]:not([data-block="h4tiles"]) { display: grid; gap: 12px; align-content: start; }
.d3-blk[data-block^="h4"][hidden] { display: none !important; }

/* правая колонка главной: заполнители на месте второго календаря */
.h4-wait { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ul.h4-wait > li > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 9px 10px; border: 1px solid var(--ctr-line); border-radius: 10px; color: inherit; text-decoration: none; }
ul.h4-wait > li > a:hover, ul.h4-wait > li > a:focus-visible { background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.h4-wait b { font: 700 15px var(--font-display, var(--font-sans)); font-variant-numeric: tabular-nums; } .h4-wait span { font-size: 13px; overflow-wrap: anywhere; } .h4-wait i { font-style: normal; font-size: 12px; color: var(--accent-primary); white-space: nowrap; }
.h4-sub { margin: 4px 0 0; font: 600 11.5px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.h4-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.h4-glance__i { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--ctr-line); border-radius: 10px; color: inherit; text-decoration: none; } .h4-glance__i:hover { background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.h4-glance__i b { font: 700 22px var(--font-display, var(--font-sans)); font-variant-numeric: tabular-nums; } .h4-glance__i span { font-size: 12px; color: var(--text-muted); }
.h4-glance__i.is-bad b { color: var(--status-danger); } .h4-glance__i.is-good b { color: var(--status-success); }
.h4-lightline { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-variant-numeric: tabular-nums; } .h4-lightline span { color: var(--text-muted); margin-left: 4px; }
@media (max-width: 520px) { .h4-glance { gap: 6px; } .h4-glance__i { padding: 8px 10px; } ul.h4-wait > li > a { grid-template-columns: auto minmax(0, 1fr); } .h4-wait i { grid-column: 2; } }
ul.h4-wait--c > li > a { grid-template-columns: minmax(0, 1fr) auto; } .h4-wait--c span { grid-column: 1 / -1; order: 3; color: var(--text-secondary); font-size: 12.5px; } .h4-wait--c i { color: var(--text-muted); }
@media (max-width: 520px) { ul.h4-wait--c > li > a { grid-template-columns: minmax(0, 1fr) auto; } .h4-wait--c i { grid-column: auto; } }
/* финансы: переключатель валюты и пометка о пересчёте */
.h4-cur { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.h4-cur__b { padding: 4px 12px; min-height: 28px; border: 1px solid var(--ctr-line); border-radius: 999px; background: transparent; color: var(--text-secondary); font: 600 12.5px var(--font-sans); cursor: pointer; }
.h4-cur__b:hover { color: var(--text-primary); } .h4-cur__b.is-on { background: color-mix(in srgb, var(--accent-primary) 16%, transparent); border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent); color: var(--text-primary); } .h4-cur__b:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
.h4-fin__rate { font-size: 11.5px; color: var(--text-muted); cursor: help; }
@media (max-width: 520px) { .h4-cur__b { min-height: 36px; padding: 6px 14px; } }

/* Главная на телефоне: ссылки-стрелки, строки списков и переключатель сум/USD — цель касания 44 px (мобильный аудит, волна 2) */
@media (max-width: 768px) {
  .h4-all { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin-left: auto; }
  .h4-cur__b { min-height: 44px; padding: 0 16px; }
  .d3-dec-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .h4-row, .d3-dec-row { min-height: 44px; }
}

/* «Финансы: план/факт» на телефоне — компактно: название и «факт из плана» в строке, справа «Внести», ниже полоса и подпись (раньше блок занимал три четверти экрана) */
@media (max-width: 768px) {
  .h4-fin { gap: 6px; }
  .h4-fin__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top btn" "bar bar" "meta meta"; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--ctr-line); }
  .h4-fin__row:last-child { border-bottom: 0; }
  .h4-fin__top { grid-area: top; flex-direction: column; align-items: flex-start; gap: 0; }
  .h4-fin__row > .kpi-bar { grid-area: bar; }
  .h4-fin__meta { display: contents; }
  .h4-fin__meta > span { grid-area: meta; font-size: 12px; }
  .h4-fin__meta > .js-fin { grid-area: btn; align-self: start; min-height: 44px; padding: 0 14px; }
  .h4-fin__rate { display: none; }
}