/* stats.css · обзор встреч /meetings/stats (PPO-297, макет 19.09.2026).
   Полоса вкладок — из meetings.css; .card, .btn, .seg, период — из
   styles.css и lib.css. Цвета только токенами: серии красят направления
   (--d-*), всё остальное — чернила и бумага; ступени ритма недели — смесь
   сланца с бумагой через color-mix, чтобы не заводить хексы. Движение —
   только transform и opacity, вход лесенкой, смена периода — размытие
   прежней картины; при prefers-reduced-motion остаётся один fade. */

/* Один экран без прокрутки: обзор занимает всю высоту окна. Средний ряд —
   проекты и направления — по содержимому, проекты показывают столько строк,
   сколько влезает (stats.js fit). Остаток высоты забирает нижний ряд
   (.ms-grow): линии динамики растут в высоту, у людей добираются строки,
   ячейки ритма недели становятся выше (правка 20.09.2026: раньше остаток
   уходил среднему ряду и висел пустотой под таблицей проектов).
   Отступ .content на этой странице — 18px сверху и 9px снизу вместо 28. Полоса вкладок и шапка прижаты, всё остальное
   плотнее, чем на других экранах. */
.content:has(#ms-root) { padding: 18px 32px 9px; }
#ms-root.ms-wide { max-width: 1280px; min-height: 100%; display: flex; flex-direction: column; }
#ms-root .page-tabs { margin-bottom: 8px; flex: none; }
#ms-root .ms-head, #ms-root #ms-error { flex: none; }

/* ── шапка ── */
.ms-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.ms-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.ms-meta { font-size: var(--fs-sm); color: var(--fg-label); font-variant-numeric: tabular-nums; }
.ms-spacer { flex: 1; }
.ms-info { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent;
           color: var(--fg-label); font-size: 10.5px; font-weight: 600; display: inline-flex;
           align-items: center; justify-content: center; cursor: help;
           transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.ms-info:hover, .ms-info:focus-visible { color: var(--fg); border-color: var(--fg-faint); }
.ms-info:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
/* длинное пояснение — в несколько строк, прижато к левому краю кнопки */
.ms-info[data-tip]::after { white-space: normal; width: 360px; left: -9px; transform: translateY(3px); text-wrap: pretty; }
.ms-info[data-tip]:hover::after, .ms-info[data-tip]:focus-visible::after { transform: translateY(0); }

/* ── сетка ── */
.ms-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto minmax(auto, 1fr);
           gap: 10px; flex: 1; align-content: stretch; }
@media (max-width: 1100px) { .ms-grid { grid-template-rows: none; } }
.ms-grid .card { border-radius: 12px; min-width: 0; position: relative;
                 transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.ms-grid .card + .card { margin-top: 0; }
@media (hover: hover) and (pointer: fine) { .ms-grid .card.hov:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border-strong); } }
.ms-c4 { grid-column: span 4; }
.ms-c8 { grid-column: span 8; }
.ms-c12 { grid-column: span 12; }
@media (max-width: 1100px) { .ms-c4 { grid-column: span 6; } .ms-c8 { grid-column: span 12; } }
@media (max-width: 640px) { .ms-c4 { grid-column: span 12; } }

.ms-ch { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px 0; }
.ms-ch .t { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--fg-label); }
.ms-ch .m { font-size: var(--fs-xs); color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.ms-ch .sp { flex: 1; }
.ms-ch .more { font-size: var(--fs-xs); color: var(--fg-muted); border-bottom: 1px solid transparent;
               transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.ms-ch .more:hover { color: var(--fg); border-bottom-color: var(--fg-faint); }
.ms-cb { padding: 8px 14px 7px; }
/* нижний ряд: карточка — колонка, тело тянется на остаток, содержимое растёт вместе с ним */
.ms-grid .card.ms-grow { display: flex; flex-direction: column; }
.ms-grow .ms-ch { flex: none; }
.ms-grow .ms-cb { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ── плитки: одна полоса, четыре ячейки ── */
.ms-kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.ms-kpi { padding: 8px 14px 7px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ms-kpi + .ms-kpi { border-left: 1px solid var(--border-faint); }
@media (max-width: 1100px) { .ms-kpis { grid-template-columns: repeat(2, 1fr); }
  .ms-kpi:nth-child(3) { border-left: none; } .ms-kpi:nth-child(n+3) { border-top: 1px solid var(--border-faint); } }
.ms-kpi .l { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--fg-label); }
.ms-kpi .row { display: flex; align-items: flex-end; gap: 12px; }
.ms-kpi .v { font-size: 24px; font-weight: 300; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums;
             display: flex; align-items: baseline; gap: 4px; }
.ms-kpi .v .u { font-size: var(--fs-h2); color: var(--fg-muted); }
.ms-spark { margin-left: auto; width: 88px; height: 24px; flex: none; }
.ms-spark path.a { fill: var(--paper-mute); stroke: none; }
.ms-spark path.l { fill: none; stroke: var(--fg-soft); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ms-spark circle { fill: var(--fg); stroke: var(--paper-card); stroke-width: 2; }
.ms-kpi .f { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--fg-label); min-height: 18px; white-space: nowrap; overflow: hidden; }
/* разница — нейтральная пилюля: больше часов не хорошо и не плохо */
.ms-delta { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; border-radius: var(--radius-pill);
            font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--paper-mute); color: var(--fg-soft); flex: none; }
.ms-delta svg { width: 10px; height: 10px; }

/* ── проекты: главный блок ── */
.ms-pt { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px minmax(120px, 160px) 64px; gap: 0 12px; align-items: center; }
.ms-pt .th { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label);
             color: var(--fg-label); padding: 0 6px 6px; border-bottom: 1px solid var(--border-faint); white-space: nowrap; }
.ms-pt .th.r { text-align: right; }
.ms-pt .pr { display: contents; }
.ms-pt .pr > span { padding: 2px 6px; border-bottom: 1px solid var(--border-row); font-size: var(--fs-sm); line-height: 1.35;
                    font-variant-numeric: tabular-nums; min-width: 0; transition: background var(--dur-fast) var(--ease-out); }
.ms-pt .pr:last-child > span { border-bottom: none; }
.ms-pt .pr:hover > span { background: var(--paper-mute); }
.ms-pt .pr > span:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ms-pt .pr > span:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ms-pt .nm { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ms-pt .nm a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); border-bottom: 1px solid transparent; }
.ms-pt .nm a:hover { border-bottom-color: var(--fg-faint); }
.ms-pt .nm a.off { text-decoration: line-through; color: var(--fg-muted); }
.ms-pt .r { text-align: right; }
.ms-pt .mut { color: var(--fg-muted); }
.ms-pt .sh { display: flex; align-items: center; gap: 8px; }
.ms-pt .sh .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--paper-mute); overflow: hidden; }
.ms-pt .sh .bar i { display: block; height: 100%; border-radius: 3px; background: var(--c, var(--fg-faint)); transform-origin: left; }
.ms-pt .sh .pc { width: 32px; text-align: right; font-size: var(--fs-xs); color: var(--fg-label); }
.ms-pt-foot { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 6px; padding: 6px 6px 0;
              border-top: 1px solid var(--border-faint); font-size: var(--fs-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.ms-pt-foot .hp { display: inline-flex; align-items: center; gap: 6px; font-style: italic; }
.ms-pt-foot .hp b { font-weight: 600; font-style: normal; color: var(--fg-soft); }
.ms-pt-foot .more { margin-left: auto; color: var(--fg-muted); border-bottom: 1px solid transparent; }
.ms-pt-foot .more:hover { color: var(--fg); border-bottom-color: var(--fg-faint); }
@media (max-width: 900px) { .ms-pt { grid-template-columns: minmax(0, 1fr) 56px 56px; } .ms-pt .hide { display: none; } }

/* точка направления: цвет — --c, серая — «без направления», штрих — «не решён» */
.ms-dd { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--idle-dot)); flex: none; }
.ms-dd.hatch { background: repeating-linear-gradient(135deg, var(--fg-faint) 0 1.5px, transparent 1.5px 3.5px); }

/* ── направления: кольцо + строки ── */
.ms-dirs { display: grid; grid-template-columns: 108px 1fr; gap: 14px; align-items: center; }
.ms-ring { width: 108px; height: 108px; position: relative; }
.ms-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ms-ring circle { fill: none; stroke-width: 13; stroke-linecap: butt;
                  transition: stroke-width 160ms var(--ease-out), opacity 160ms var(--ease-out); }
.ms-ring circle.track { stroke: var(--paper-mute); }
.ms-ring.dim circle:not(.track):not(.hi) { opacity: .3; }
.ms-ring circle.hi { stroke-width: 17; }
.ms-ring .hp-bg { fill: var(--paper-mute); }
.ms-ring .hp-ln { fill: var(--fg-faint); }
.ms-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ms-ring-c b { font-size: 22px; font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1; }
.ms-ring-c span { font-size: 10.5px; color: var(--fg-label); text-transform: uppercase; letter-spacing: var(--tracking-label); margin-top: 4px; }
.ms-rk { display: flex; flex-direction: column; gap: 1px; }
.ms-drow { display: grid; grid-template-columns: auto 1fr auto; gap: 1px 8px; align-items: center; padding: 3px 6px; margin: 0 -6px;
           border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease-out); }
a.ms-drow { cursor: pointer; }
.ms-drow:hover { background: var(--paper-mute); }
.ms-drow .ms-dd { grid-row: span 2; }
.ms-drow .n { font-size: var(--fs-sm); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.ms-drow .n.mut { color: var(--fg-muted); font-style: italic; }
.ms-drow .n.off { text-decoration: line-through; color: var(--fg-muted); }
.ms-drow .h { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; line-height: 1.25; }
.ms-drow .s { grid-column: 2 / 4; font-size: 10.5px; color: var(--fg-label); font-variant-numeric: tabular-nums; display: flex; gap: 6px; line-height: 1.2; }
.ms-drow .s b { font-weight: 600; color: var(--fg-soft); }

/* ── динамика: маленькие линии по дням, одна шкала; в высоту — сколько отдала карточка ── */
.ms-smg { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 6px 14px; flex: 1; min-height: 0; }
.ms-smi { min-width: 0; min-height: 0; position: relative; outline: none; border-radius: var(--radius-sm); display: flex; flex-direction: column; }
.ms-smi:focus-visible { box-shadow: 0 0 0 2px var(--border-strong); }
.ms-smi .t { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-xs); color: var(--fg-soft); margin-bottom: 2px; flex: none; }
.ms-smi .t .ms-dd { width: 7px; height: 7px; align-self: center; }
.ms-smi .t .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-smi .t b { margin-left: auto; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* svg тянется по высоте (preserveAspectRatio none), поэтому штрихи — non-scaling-stroke, иначе линия толстеет */
.ms-smi svg { width: 100%; flex: 1; min-height: 42px; display: block; overflow: visible; }
.ms-smi path.a { fill: var(--c, var(--fg-faint)); opacity: .10; }
.ms-smi path.l { fill: none; stroke: var(--c, var(--fg-faint)); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ms-smi .base { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* точек на линии нет: растянутый svg рисовал бы их эллипсами */
.ms-smi .cross { stroke: var(--fg-faint); stroke-width: 1; opacity: 0; transition: opacity 100ms; vector-effect: non-scaling-stroke; }
.ms-smi.on .cross { opacity: 1; }
.ms-smi .x { display: flex; justify-content: space-between; font-size: 10px; color: var(--fg-faint); font-variant-numeric: tabular-nums; margin-top: 2px; flex: none; }
.ms-tip { position: absolute; z-index: 5; pointer-events: none; opacity: 0;
          transform: translate(-50%, calc(-100% - 8px)) scale(.97);
          background: var(--fg); color: var(--fg-on-ink); border-radius: var(--radius); padding: 6px 9px;
          font-size: var(--fs-xs); white-space: nowrap; box-shadow: var(--shadow-modal);
          transition: opacity 125ms var(--ease-out), transform 125ms var(--ease-out); }
.ms-tip.on { opacity: 1; transform: translate(-50%, calc(-100% - 8px)) scale(1); }
.ms-tip b { font-weight: 600; }
.ms-tip span { opacity: .75; margin-left: 6px; }

/* ── люди ── */
.ms-rr { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 10px; align-items: center; padding: 1px 6px; margin: 0 -6px;
         border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease-out); }
.ms-rr:hover { background: var(--paper-mute); }
.ms-rr .top { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); line-height: 1.35; }
.ms-rr .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.ms-rr .nm:hover { color: var(--info); }
.ms-rr .sub { font-size: var(--fs-xs); color: var(--fg-label); white-space: nowrap; margin-left: auto; font-variant-numeric: tabular-nums; }
.ms-rr .bar { height: 4px; border-radius: 3px; background: var(--paper-mute); overflow: hidden; margin-top: 2px; }
.ms-rr .bar i { display: block; height: 100%; border-radius: 3px; background: var(--fg-muted); transform-origin: left; }
.ms-rr .h { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-align: right; color: var(--fg); }
.ms-av { width: 18px; height: 18px; border-radius: 50%; background: var(--paper-mute); color: var(--fg-soft); font-size: 10px; font-weight: 600;
         display: inline-flex; align-items: center; justify-content: center; flex: none; letter-spacing: .02em; }

/* ── ритм недели: день × час, шесть ступеней сланца; ряды растут вместе с карточкой ── */
.ms-hm { display: grid; gap: 2px; align-items: stretch; flex: 1; min-height: 0; grid-template-rows: auto repeat(7, minmax(14px, 1fr)); }
.ms-hm .yl { font-size: 10.5px; color: var(--fg-label); align-self: center; }
.ms-hm .xl { font-size: 10px; color: var(--fg-faint); text-align: center; font-variant-numeric: tabular-nums; }
.ms-hm .cell { min-height: 14px; max-height: 26px; border-radius: 3px; background: var(--paper-mute); cursor: default;
               transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out); }
.ms-hm .cell[data-v="1"], .ms-hs i:nth-child(2) { background: color-mix(in oklab, var(--d-indigo) 22%, var(--paper-card)); }
.ms-hm .cell[data-v="2"], .ms-hs i:nth-child(3) { background: color-mix(in oklab, var(--d-indigo) 45%, var(--paper-card)); }
.ms-hm .cell[data-v="3"], .ms-hs i:nth-child(4) { background: color-mix(in oklab, var(--d-indigo) 70%, var(--paper-card)); }
.ms-hm .cell[data-v="4"], .ms-hs i:nth-child(5) { background: var(--d-indigo); }
.ms-hm .cell[data-v="5"], .ms-hs i:nth-child(6) { background: color-mix(in oklab, var(--d-indigo) 75%, var(--fg)); }
@media (hover: hover) { .ms-hm .cell:hover { transform: scale(1.18); box-shadow: 0 0 0 2px var(--paper-card), 0 0 0 3px var(--fg-faint); z-index: 1; position: relative; } }
.ms-hm-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fs-xs); color: var(--fg-label); flex: none; }
.ms-hs { display: inline-flex; gap: 2px; }
.ms-hs i { width: 10px; height: 10px; border-radius: 2px; display: block; background: var(--paper-mute); }
.ms-hm-foot .pk { margin-left: auto; }

/* ── состояния ── */
.ms-empty { text-align: center; color: var(--fg-label); padding: 28px 16px; font-size: var(--fs-sm); }
.ms-empty b { display: block; color: var(--fg-soft); font-weight: 500; margin-bottom: 4px; }
.ms-sk { background: linear-gradient(90deg, var(--paper-mute) 25%, var(--border-faint) 50%, var(--paper-mute) 75%);
         background-size: 200% 100%; animation: ms-sk 1.2s linear infinite; border-radius: 6px; height: 12px; }
@keyframes ms-sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── движение ── */
.ms-grid.enter .card { animation: ms-in 320ms cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes ms-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ms-grid { transition: opacity 180ms var(--ease-out), filter 180ms var(--ease-out); }
.ms-grid.busy { opacity: .55; filter: blur(2px); }
@media (prefers-reduced-motion: reduce) {
  .ms-grid.enter .card { animation: ms-fade 200ms ease both; }
  @keyframes ms-fade { from { opacity: 0; } to { opacity: 1; } }
  .ms-grid.busy { filter: none; }
  .ms-hm .cell:hover { transform: none; }
}