/* ═══════════════════════════════════════════════════════════
   АНАЛИТИКА — приборная панель с картой спроса
   ═══════════════════════════════════════════════════════════
   Календарь — прибор, журнал — книга смены, гости — картотека,
   аналитика — приборная панель владельца. Наверху тёмная плита из того
   же материала, что голова журнала и карточка гостя: период, выручка
   крупно и карта спроса — сегменты индикатора, которые светятся тем
   ярче, чем плотнее занято. Ниже на бумаге — разбор по два в ряд, и под
   каждым графиком одна строка словами.

   Крупное место одно — выручка периода. Всё остальное 9–13 px.
   Поверхностей две: плита и бумага. Разделы разбора лежат на бумаге
   открыто, их отделяют воздух и волосяная черта сверху: экран уже
   карточка, и рамка вокруг каждого раздела давала коробку в коробке,
   а пузырь дятла внутри — третью. */
.analytics{
  --an-pad:22px;
  display:none;flex:1;min-width:0;flex-direction:column;
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
}
body.on-analytics .top,body.on-analytics .cal{display:none}
body.on-analytics .analytics{display:flex}
.an-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.an-scroll:focus{outline:none}

/* ── плита ── */
.an-plate{
  position:relative;isolation:isolate;
  background:var(--band);color:var(--band-ink);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .07);
  --band-ink-2:var(--plate-ink-2); --band-ink-3:var(--plate-ink-3);
  --o1x:16%; --o1y:-60%; --o2x:70%; --o2y:-70%; --o3x:-4%; --o3y:-30%;
  /* Изменение к прошлому — тем же зелёным и красным, что статусы, но
     поднятыми под тёмную плиту: на ней собственные --ok и --late тонут. */
  --an-good:var(--plate-ok); --an-bad:var(--plate-late);
}
.an-plate > :not(.plate-lite){position:relative;z-index:1}
/* Верхний ярус держит раскрытые панели — календарь и список объектов, —
   поэтому он выше показаний: соседи по плите лежат в том же слое и
   перекрыли бы их порядком в разметке. */
.an-plate > .an-face{z-index:3}
.an-face{
  display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding:18px var(--an-pad) 0;
}
.an-of{margin-right:auto;min-width:0}
.an-of h2{font-size:28px;font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--band-ink)}
.an-of span{display:block;margin-top:6px;font-size:12.5px;color:var(--band-ink-2)}
.an-tools{display:flex;align-items:center}

/* Показания: выручка крупно, остальные — прибором. */
.an-hero{
  display:flex;align-items:flex-end;gap:34px;flex-wrap:wrap;
  padding:20px var(--an-pad) 18px;
}
.an-num i{
  display:block;font-size:11px;font-style:normal;font-weight:500;
  color:var(--band-ink-3);
}
.an-num b{
  display:block;margin-top:5px;font-size:22px;font-weight:600;
  letter-spacing:-.02em;line-height:1;color:var(--band-ink);
}
.an-num > span{display:block;margin-top:6px;font-size:11.5px;color:var(--band-ink-2)}
.an-money{display:grid;grid-template-columns:auto auto;column-gap:22px;align-items:end}
.an-money i,.an-money b,.an-money .an-deltas{grid-column:1}
.an-money b{font-size:40px;letter-spacing:-.05em}
.an-money .spark{grid-column:2;grid-row:2 / span 2;align-self:end;margin-bottom:2px}
.an-booked{grid-column:1 / -1;display:block;margin-top:7px;font-size:11.5px;color:var(--band-ink-3)}
.an-deltas{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.an-delta{font-size:11.5px;color:var(--band-ink-2);white-space:nowrap}
.an-delta.good{color:var(--an-good)}
.an-delta.bad{color:var(--an-bad)}
.an-delta.none{color:var(--band-ink-3)}

/* ── ярлыки вкладок ──
   На нижнем крае плиты, как ярлыки на корешках папок: выбранный — того
   же цвета, что бумага ниже, и сливается с ней; остальные стоят на плите.
   Каждый ярлык — вопрос владельца, подпись под именем и есть вопрос. */
.an-tabs{
  display:flex;gap:4px;padding:6px var(--an-pad) 0;
  overflow-x:auto;scrollbar-width:none;
}
.an-tabs::-webkit-scrollbar{display:none}
.an-tab{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  min-width:96px;padding:9px 14px 8px;border-radius:var(--r) var(--r) 0 0;
  color:var(--band-ink-2);text-align:left;white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.an-tab b{font-size:12.5px;font-weight:600;letter-spacing:-.02em}
.an-tab span{font-size:10.5px;color:var(--band-ink-3)}
.an-tab.on{background:var(--card);color:var(--ink)}
.an-tab.on span{color:var(--ink-3)}
.an-tab:focus-visible{outline:2px solid var(--band-ink);outline-offset:-2px}

/* Карта спроса — плитой внутри бумаги: карточка того же материала, что
   шапка, чтобы сегменты индикатора светились на тёмном. */
.an-card.dark{
  background:var(--band);color:var(--band-ink);border-top:0;border-radius:var(--r-lg);
  padding:16px 18px 14px;
  --band-ink-2:var(--plate-ink-2); --band-ink-3:var(--plate-ink-3);
}
.an-card.dark .an-card-h h3{color:var(--band-ink)}
.an-card.dark .an-card-h span{color:var(--band-ink-3)}
.an-map-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.an-map-h span{font-size:12px;color:var(--band-ink-2)}
.an-map-h .hm-scale{margin-left:auto}
.an-card.dark .an-say{color:var(--band-ink-2)}

/* ── бумага ── */
.an-body{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 44px;
  padding:20px var(--an-pad) calc(var(--an-pad) + 8px);
}
/* Сменилась вкладка — карточки проявляются, а не выскакивают. */
.an-body > .an-card{animation:anIn var(--t-move) var(--ease) both}
@keyframes anIn{from{opacity:0;transform:translate3d(0,4px,0)}to{opacity:1;transform:none}}
.an-stats span.t-late b{color:var(--late)}
.an-card{min-width:0;padding-top:14px;border-top:1px solid var(--rule-2)}
/* Дятел — раздел на всю ширину, как остальные: своих полей коробки у
   него больше нет, речь стоит пузырём прямо на бумаге. */
.an-card.oc{padding:16px 0 0}
.an-card.wide{grid-column:1 / -1}
.an-card-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.an-card-h h3{font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.an-card-h span{font-size:11.5px;color:var(--ink-3)}
.an-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-bottom:10px;min-height:0}
.an-key:empty{display:none}
.an-sub{
  margin:14px 0 4px;font-size:11px;font-weight:500;
  color:var(--ink-3);
}
/* Вывод словами — абзац под графиком. Не коробка, не цветная плашка и не
   черта-цитата: черту SPEC отдаёт тому, что сказал человек (§8.5), а
   вывод говорит сам продукт. Отделяет его воздух. */
.an-say{
  margin-top:14px;max-width:72ch;
  font-size:12.5px;line-height:1.5;color:var(--ink-2);
}
.an-stats{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:14px}
.an-stats span{display:block}
.an-stats b{
  display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;
  line-height:1;color:var(--ink);
}
.an-stats i{display:block;margin-top:4px;font-size:11px;font-style:normal;color:var(--ink-3)}
.an-money-chart{--ch-h:190px}
.an-lead-chart,.an-cancel-chart{--ch-h:130px}

/* ── подсказка ── */
.an-tip{
  position:fixed;z-index:60;pointer-events:none;max-width:280px;
  padding:7px 10px;border-radius:var(--r);background:var(--band);color:var(--band-ink);
  box-shadow:var(--sh-2);font-size:11.5px;line-height:1.45;white-space:pre-line;
  font-variant-numeric:tabular-nums;
}
.an-tip::first-line{font-weight:600}

@media (max-width:1240px){
  .analytics{--an-pad:16px}
  .an-body{grid-template-columns:1fr}
  .an-money b{font-size:32px}
  .an-hero{gap:22px}
}
@media (prefers-reduced-motion:reduce){
  .ch-seg,.pc-b,.pc-step,.pc-arrow,.an-tab{transition:none}
  .an-body > .an-card{animation:none}
}


/* Совет дятла с кнопкой: черновик акции под пустой день. Плашка бумаги
   внутри раздела — единственная коробка в нём, потому что у неё кнопка. */
.an-idea{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;
  border-radius:var(--r);background:var(--paper);border:1px dashed var(--rule);
}
.an-idea p{flex:1;min-width:200px;margin:0;font-size:12px;line-height:1.5;color:var(--ink-2)}