/* ── Donut chart + legend ─────────────────────────────────────────────── */
.donut-wrap { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
/* Sized to fill the panel's vertical space (it's driven by the taller legend);
   the SVG scales to fit, so the ring stays proportional and the hole re-centres. */
.donut { position: relative; flex: none; width: 220px; max-width: 100%; aspect-ratio: 1; }
.donut svg { transform: rotate(-90deg); display: block; width: 100%; height: 100%; }
.donut .seg { transition: stroke-dashoffset .8s ease, stroke-width .12s ease; cursor: pointer; }
.donut .seg:hover { stroke-width: 20; }
.donut .hole {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.donut .hole .n { font-family: var(--font-mono); font-size: 44px; font-weight: 700; line-height: 1; }
.donut .hole .t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--muted); margin-top: 6px; }

.legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 190px; }
.legend li {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px dashed var(--border); font-size: 13px;
}
.legend li:last-child { border-bottom: none; }
.legend .name { flex: 1; color: var(--text); }
.legend .pct { font-family: var(--font-mono); color: var(--muted); font-size: 11.5px; min-width: 44px; text-align: right; }
.legend .cnt { font-family: var(--font-mono); font-weight: 700; min-width: 30px; text-align: right; }
/* A state nobody is in is listed all the same (see common/widgets/_status_legend.html):
   the breakdown says what the catalogue holds, not only what is occupied. Dimmed rather
   than hidden — present enough to read as «нуль», quiet enough not to compete with the
   rows that carry a figure. The dot keeps its own colour at reduced opacity, so the row
   is still identifiable as that state. */
.legend li.empty .name, .legend li.empty .pct, .legend li.empty .cnt { color: var(--muted-2); }
.legend li.empty .cnt { font-weight: 500; }
.legend li.empty .led { opacity: .4; }

/* ── Diverging strength bars (у строю up / вибуло down, split baseline) ── */
.lc-legend { display: flex; gap: 18px; margin: 14px 0 4px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .3px; }
.lc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: middle; }
.lc-legend b { color: var(--text); font-weight: 700; margin-left: 3px; }
.lc-legend .k-up { background: var(--accent-2); }
.lc-legend .k-down { background: var(--danger); }
.lc { display: block; overflow: visible; }
.lc-grid { stroke: var(--border); stroke-width: 1; opacity: .5; }
.lc-baseline { stroke: var(--border-bright); stroke-width: 1.5; }
.lc-ylabel, .lc-xlabel { fill: var(--muted-2); font-family: var(--font-mono); font-size: 11px; }
.lc-xlabel { letter-spacing: .3px; }
.lc-up-bar { fill: var(--accent-2); pointer-events: none; }
.lc-down-bar { fill: var(--danger); pointer-events: none; }
.lc-hit { fill: transparent; cursor: crosshair; }
.lc-hit:hover { fill: var(--muted); opacity: .07; }

/* Phone-only small multiples — one own-scale area chart per series (hidden on desktop,
   where the full grouped chart shows both). Toggled by the media query below. */
.lc-minis { display: none; flex-direction: column; gap: 14px; margin: 8px 0 2px;
  position: relative; touch-action: pan-y; }   /* pan-y: vertical scroll stays, horizontal drag scrubs */
/* Touch-scrub readout: the day under the finger, top-centred over the empty middle of
   the first head row. Shown only while scrubbing. */
.lc-scrub-date { display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); }
.lc-minis.scrubbing .lc-scrub-date { display: block; }
.lc-mini-guide { display: none; stroke: var(--border-bright); stroke-width: 1;
  vector-effect: non-scaling-stroke; }
.lc-minis.scrubbing .lc-mini-guide { display: block; }
.lc-mini-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.lc-mini-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); }
.lc-mini-value { font-family: var(--font-mono); font-weight: 700; font-size: 26px; line-height: 1;
  margin-left: auto; }
.lc-mini.up .lc-mini-value, .lc-mini.ready .lc-mini-value { color: var(--accent-2); }
.lc-mini.down .lc-mini-value { color: var(--danger); }
.lc-mini-svg { display: block; width: 100%; }
.lc-mini-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; }
.lc-mini.up .lc-mini-line, .lc-mini.ready .lc-mini-line { stroke: var(--accent-2); }
.lc-mini.down .lc-mini-line { stroke: var(--danger); }
.lc-mini.up .lc-mini-area, .lc-mini.ready .lc-mini-area { fill: var(--accent-2); opacity: .12; }
.lc-mini.down .lc-mini-area { fill: var(--danger); opacity: .12; }
.lc-mini.up .lc-mini-dot, .lc-mini.ready .lc-mini-dot { fill: var(--accent-2); }
.lc-mini.down .lc-mini-dot { fill: var(--danger); }

/* Monthly bar charts — kept on phones (only ~8 months), but with a touch scrubber:
   drag to highlight a month column and read its per-series values above the chart. */
.bc-wrap { position: relative; touch-action: pan-y; }
.bc-readout { display: none; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--text); min-height: 1.1em; margin-bottom: 4px; }
.bc-wrap.scrubbing .bc-readout { display: block; }
.bc-hl { display: none; fill: var(--muted); opacity: .16; pointer-events: none; }
.bc-wrap.scrubbing .bc-hl { display: block; }

/* Phone toggle lives after the .lc/.rc/.bc base rules (below) so it wins on source
   order — see the @media block just past the readiness-chart styles. */

/* ── Horizontal bars (by subdivision) ─────────────────────────────────── */
.hbars { list-style: none; margin: 0; padding: 0; }
.hbars li { padding: 9px 0; border-bottom: 1px solid var(--border); }
.hbars li:last-child { border-bottom: none; }
.hbars .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.hbars .code { font-family: var(--font-mono); font-weight: 600; font-size: 13px; }
.hbars .code small { color: var(--muted-2); font-weight: 400; margin-left: 8px; font-family: var(--font-body); }
.hbars .n { font-family: var(--font-mono); font-weight: 700; color: var(--accent-2); }
.hbars .track { height: 6px; background: var(--panel-3); border-radius: 3px; overflow: hidden; }
.hbars .fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 3px; transition: width .7s ease; }

/* Status-distribution «Смуги» view: the donut ring unrolled into one straight
   horizontal bar of the same thickness. Each status is a flex segment whose grow
   factor is its percentage share; colour comes from the inline --st-* fill. The
   same legend as the ring sits below it. */
.status-strip { display: flex; flex-direction: column; gap: 20px; }
.status-strip .bar {
  display: flex; gap: 2px; height: 16px; width: 100%; overflow: hidden;
}
.status-strip .seg {
  position: relative; flex-basis: 0; min-width: 2px;
  transition: flex-grow .8s ease; cursor: pointer;
}
.status-strip .seg:hover { filter: brightness(1.12); }
.status-strip .segtip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 4px 8px;
  background: var(--panel-3); color: var(--text); font-size: 11.5px;
  border: 1px solid var(--border);
  opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 5;
}
.status-strip .seg:hover .segtip { opacity: 1; }
.status-strip .legend { flex: none; width: 100%; min-width: 0; }