/* ═══════════════════════════════════════════════════════════
   Графики — столбики, полосы, карта, доля, искра
   ═══════════════════════════════════════════════════════════
   Разметку собирает scripts/charts.mjs; здесь — как она выглядит.
   Правила (dataviz): тонкие метки, зазор цвета поверхности вместо
   обводки, столбик не толще 24 px и скруглён только у конца данных,
   сетка волосяная и тише всего, текст никогда не окрашен цветом серии.

   Тона серий — сущности, а не порядковые номера: «сутки» всегда вода,
   «часы» — мёд, «услуги и товары» — слива (tokens.css). Красный и
   зелёный — статусы (§8.3): сорвалось и принято. */
.t-night{--tone:var(--viz-night)}
.t-hour{--tone:var(--viz-hour)}
.t-extras{--tone:var(--viz-extras)}
.t-late{--tone:var(--late)}
.t-ok{--tone:var(--ok)}
.t-ink{--tone:var(--ink-2)}
.t-mute{--tone:var(--viz-mute)}

.ch{--ch-h:170px;position:relative}
.ch-empty{
  display:flex;align-items:center;justify-content:center;min-height:96px;
  border:1px dashed var(--rule);border-radius:var(--r);color:var(--ink-3);font-size:12px;
}

/* ── столбики ── */
.ch-cols{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:var(--ch-h) auto;
  column-gap:8px;
}
.ch-y{
  grid-row:1;position:relative;width:54px;
  font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.ch-y span{position:absolute;right:0;bottom:calc(var(--y) * 100%);transform:translateY(50%);white-space:nowrap}
.ch-plot{
  grid-row:1;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));
  align-items:end;border-bottom:1px solid var(--rule);
}
.ch-grid{position:absolute;left:0;right:0;bottom:calc(var(--y) * 100%);height:1px;background:var(--rule-2)}
.ch-col{
  position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;
  gap:2px;padding:0 1px;border-radius:var(--r-xs) var(--r-xs) 0 0;
}
/* Нерабочий день подложен тем же тоном, что в шахматке. */
.ch-col.we{background:var(--off-paper)}
/* Будущее — забронированное, а не заработанное: столбик приглушён. */
.ch-col.fut .ch-seg{opacity:.42}
.ch-bar{
  display:flex;flex-direction:column-reverse;justify-content:flex-start;gap:2px;
  width:min(100%,24px);height:100%;
}
.ch-col.grouped .ch-bar{width:min(100%,14px)}
.ch-seg{display:block;flex-shrink:0;height:calc(var(--h) * 100%);background:var(--tone);transition:filter var(--t-tap) var(--ease)}
.ch-bar .ch-seg:last-child{border-radius:var(--r-xs) var(--r-xs) 0 0}
/* Засечка прошлого года: короткая черта на той высоте, где стоял бы столбик. */
.ch-ghost{
  position:absolute;left:18%;right:18%;bottom:calc(var(--y) * 100%);height:2px;
  background:var(--ink-3);border-radius:var(--r-pill);z-index:1;
}
.ch-x{
  grid-column:2;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));
  margin-top:5px;font-size:10px;color:var(--ink-3);text-align:center;
  font-variant-numeric:tabular-nums;
}
.ch-x span{overflow:hidden;text-overflow:clip;white-space:nowrap}
.ch-x .mute{visibility:hidden}
@media (hover:hover) and (pointer:fine){
  .ch-col:hover{background:var(--sunk)}
  .ch-col:hover .ch-seg{filter:brightness(1.08)}
}

/* ── полосы ── */
.ch-bars{
  --tpl:minmax(110px,1.1fr) minmax(80px,2fr) repeat(var(--cols),max-content);
  display:flex;flex-direction:column;
}
.ch-row{
  display:grid;grid-template-columns:var(--tpl);column-gap:14px;align-items:center;
  width:100%;padding:7px 0;border-bottom:1px solid var(--rule-2);text-align:left;
  border-radius:0;
}
.ch-row:last-child{border-bottom:none}
.ch-head{
  padding:0 0 5px;border-bottom:1px solid var(--rule);
  font-size:11px;color:var(--ink-3);
}
.ch-head .ch-val{font-size:9px;color:var(--ink-3);font-weight:500}
.ch-lbl{min-width:0}
.ch-lbl b{display:block;font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-lbl small{display:block;font-size:10.5px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-track{display:flex;gap:2px;height:10px;min-width:0}
.ch-track i{display:block;width:calc(var(--w) * 100%);background:var(--tone);flex-shrink:0}
.ch-track i:last-child{border-radius:0 var(--r-xs) var(--r-xs) 0}
.ch-val{
  font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:0;
  text-align:right;color:var(--ink);white-space:nowrap;
}
.ch-val.low{color:var(--late)}
.ch-val.quiet{color:var(--ink-3)}
/* `tn-row` на кнопке — метка для booking-sheet.mjs; раскладку
   всплывающего списка с неё снимаем: полоса остаётся полосой. */
button.ch-row{cursor:pointer;transition:background-color var(--t-tap) var(--ease);position:static;margin:0}
button.ch-row.tn-row::before{content:none}
button.ch-row.tn-row+.tn-row{margin-top:0}
@media (hover:hover) and (pointer:fine){
  button.ch-row:hover{background:var(--paper)}
}

/* ── легенда и доля ── */
.ch-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--ink-2)}
.ch-legend i,.ch-share-key i{
  display:inline-block;width:9px;height:9px;border-radius:var(--r-xs);background:var(--tone);
  margin-right:6px;vertical-align:-1px;
}
.ch-legend-ghost{font-size:11.5px;color:var(--ink-2)}
.ch-legend-ghost i{display:inline-block;width:12px;height:2px;background:var(--ink-3);margin-right:6px;vertical-align:3px}
.ch-share-bar{display:flex;gap:2px;height:12px;border-radius:var(--r-xs);overflow:hidden}
.ch-share-bar i{display:block;width:calc(var(--w) * 100%);background:var(--tone)}
.ch-share-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:9px;font-size:11.5px;color:var(--ink-2)}
.ch-share-key b{font-weight:500;color:var(--ink)}
.ch-share-key em{font-style:normal;margin-left:6px;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ── искра ── */
.spark{width:140px;height:30px;fill:none;stroke:var(--band-ink-2);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.spark circle{fill:var(--band-ink);stroke:none}

/* ── карта спроса ──
   Клетки светятся на плите тем ярче, чем плотнее занято: одна светлота,
   без нового цвета — как сегменты индикатора прибора. Шесть ступеней:
   дальше соседние сливаются. */
.hm{
  display:grid;grid-template-columns:36px repeat(var(--cols),minmax(0,1fr)) 46px;
  gap:2px;align-items:center;
}
.hm-row{display:contents}
.hm-c{display:block;height:16px;border-radius:var(--r-xs);background:rgb(237 234 227 / .06)}
.hm-c.b1{background:rgb(237 234 227 / .17)}
.hm-c.b2{background:rgb(237 234 227 / .31)}
.hm-c.b3{background:rgb(237 234 227 / .47)}
.hm-c.b4{background:rgb(237 234 227 / .66)}
.hm-c.b5{background:rgb(237 234 227 / .9)}
/* Времени в наличии не было — не пусто, а «не работает»: пунктир. */
.hm-c.na{background:none;box-shadow:inset 0 0 0 1px rgb(237 234 227 / .09)}
.hm-c.out{visibility:hidden}
/* «Сейчас» — та же красная риска, что на линейке шахматки. */
.hm-c.now{box-shadow:0 0 0 1.5px var(--now)}
.hm-days .hm-c{height:18px}
.hm-lbl{
  font-size:10.5px;color:var(--band-ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.hm-sum{
  font-size:10.5px;font-weight:500;color:var(--band-ink);
  text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.hm-x .hm-xl{font-size:9.5px;color:var(--band-ink-3);text-align:center;margin-top:2px}
.hm-x .mute{visibility:hidden}
.hm-means .hm-c{height:5px;margin-top:5px;border-radius:1px}
.hm-means .hm-lbl{font-size:11px;color:var(--band-ink-3);margin-top:5px}
.hm-scale{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;color:var(--band-ink-3)}
.hm-scale .hm-c{width:13px;height:8px}
.hm-scale span{margin:0 4px}
@media (hover:hover) and (pointer:fine){
  .hm-c[data-tip]:hover{box-shadow:0 0 0 1.5px var(--band-ink)}
  .hm-c.now[data-tip]:hover{box-shadow:0 0 0 1.5px var(--now), 0 0 0 3px rgb(237 234 227 / .35)}
}