/* ═══════════════════════════════════════════════════════════
   Период — один орган на отчёты и аналитику
   ═══════════════════════════════════════════════════════════
   Обойма рода (неделя · месяц · квартал · год), шаг назад, «Сейчас»,
   шаг вперёд и название. Тот же приём, что у журнала: один вопрос —
   один орган. Два материала: на тёмной плите (аналитика) и на бумаге
   (отчёты) — переменные меняются, геометрия одна. */
.pc{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pc.dark{
  --pc-well:rgb(237 234 227 / .08); --pc-ink:var(--band-ink); --pc-ink-2:var(--band-ink-2);
  --pc-on:var(--band-ink); --pc-on-ink:var(--band); --pc-hover:rgb(237 234 227 / .12);
}
.pc.light{
  --pc-well:var(--sunk); --pc-ink:var(--ink); --pc-ink-2:var(--ink-2);
  --pc-on:var(--card); --pc-on-ink:var(--ink); --pc-hover:var(--card);
}
.pc-seg,.pc-move{
  display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:var(--r);
  background:var(--pc-well);
}
.pc-b,.pc-step{
  height:26px;padding:0 11px;border-radius:calc(var(--r) - 2px);font-size:11.5px;color:var(--pc-ink-2);
  white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease), color var(--t-tap) var(--ease),
    transform var(--t-tap) var(--ease);
}
.pc-b:active,.pc-step:active,.pc-arrow:active{transform:scale(.96)}
.pc-b.on,.pc-step.on{background:var(--pc-on);color:var(--pc-on-ink)}
.pc.light .pc-b.on,.pc.light .pc-step.on{box-shadow:var(--sh-1)}
.pc-arrow{
  width:28px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:calc(var(--r) - 2px);color:var(--pc-ink-2);
  transition:background-color var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.pc-arrow svg{width:14px;height:14px}
.pc-label{
  font-size:12px;font-weight:500;letter-spacing:0;
  color:var(--pc-ink);white-space:nowrap;
}

/* ── прыжок к дате ──
   Название периода само кнопка: по нему и тычут, когда хотят другую
   дату. Календарь тот же, что у шахматки и журнала, и род периода он не
   меняет — открывает тот же род, в который дата попадает. */
.pc-cal,.rf{position:relative}
.pc-date{
  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;
  border-radius:var(--r);color:var(--pc-ink);white-space:nowrap;
  border:1px solid var(--pc-edge);
  transition:background-color var(--t-tap) var(--ease), border-color var(--t-tap) var(--ease);
}
.pc-date svg{width:14px;height:14px;flex-shrink:0;color:var(--pc-ink-2)}
.pc-date b{font-size:12px;font-weight:500;letter-spacing:0}
.pc-date:active{transform:scale(.98)}
.pc-date.on{background:var(--pc-well);border-color:var(--pc-ink-2)}
.pc.dark{--pc-edge:rgb(237 234 227 / .18)}
.pc.light{--pc-edge:var(--rule)}

/* Плавающая панель — та же, что у всплывашек продукта: светлая карточка
   на тени. На тёмной плите она тоже светлая: это лист, вынутый поверх. */
.pc-panel{
  position:absolute;top:calc(100% + 7px);right:0;z-index:30;
  background:var(--card);border-radius:var(--r-lg);
  /* Волосяная рамка сверх тени: в тёмной теме тень не отделяет лист от
     плиты — они одной темноты, и панель читается пятном без края. */
  box-shadow:var(--sh-3), inset 0 0 0 1px var(--rule);
  padding:12px;color:var(--ink);
}
/* Куда раскрывается панель, решает место органа: на бумаге он слева, и
   панель идёт вправо, внутрь листа; на плите — справа, и панель идёт
   влево. Иначе она уезжает за край и прячется под колонкой. */
.pc.light .pc-panel,.rf.light .pc-panel{left:0;right:auto}
.pc-cal-panel{width:252px}
.pc-cal-panel .dp-d{cursor:pointer}
/* Выбранный период подсвечен целиком: открыв месяц, видно какой. */
.pc-cal-panel .dp-d.inwk b{color:var(--ink)}

/* ── отбор объектов ──
   Кнопка говорит, по чему смотрят, панель — по чему можно. Группы те же,
   что в шахматке: глазом объекты ищут там же и так же. */
.rf-btn{
  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;
  border-radius:var(--r);color:var(--pc-ink);white-space:nowrap;max-width:240px;
  border:1px solid var(--pc-edge);
  transition:background-color var(--t-tap) var(--ease), border-color var(--t-tap) var(--ease);
}
.rf.dark{--pc-ink:var(--band-ink); --pc-ink-2:var(--band-ink-2); --pc-edge:rgb(237 234 227 / .18);
  --pc-well:rgb(237 234 227 / .08)}
.rf.light{--pc-ink:var(--ink); --pc-ink-2:var(--ink-2); --pc-edge:var(--rule); --pc-well:var(--sunk)}
.rf-btn svg{width:14px;height:14px;flex-shrink:0;color:var(--pc-ink-2)}
.rf-btn b{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rf-btn em{
  font-style:normal;font-size:10px;font-variant-numeric:tabular-nums;
  padding:1px 5px;border-radius:var(--r-sm);background:var(--pc-well);color:var(--pc-ink-2);
}
.rf-btn:active{transform:scale(.98)}
.rf-btn.on,.rf-btn.some{background:var(--pc-well);border-color:var(--pc-ink-2)}
.rf-panel{width:268px;max-height:min(460px,60dvh);overflow-y:auto;padding:10px}
.rf-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:2px 4px 8px;border-bottom:1px solid var(--rule-2);margin-bottom:6px;
}
.rf-head b{font-size:12.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.rf-all{font-size:11.5px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .rf-all:hover{color:var(--ink)}
}
.rf-all[disabled]{opacity:.4;pointer-events:none;text-decoration:none}
.rf-group{
  font-size:11px;font-weight:500;
  color:var(--ink-3);padding:9px 4px 4px;
}
.rf-line{display:flex;align-items:center;gap:4px;border-radius:var(--r-sm)}
@media (hover:hover) and (pointer:fine){
  .rf-line:hover{background:var(--paper)}
}
.rf-i{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:6px 4px;
  font-size:12.5px;color:var(--ink-2);text-align:left;
}
.rf-i span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rf-i.on{color:var(--ink);font-weight:500}
/* Галочка — не эмодзи и не «×»: квадрат, который заливается, когда выбран. */
.rf-box{
  width:15px;height:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:var(--r-xs);color:transparent;
}
.rf-box svg{width:9px;height:9px}
.rf-i.on .rf-box{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* «Только этот» появляется по наведению: чаще всего хотят один объект,
   и три нажатия ради него — это два лишних. */
.rf-only{
  flex-shrink:0;padding:4px 7px;border-radius:var(--r-sm);font-size:10.5px;color:var(--ink-3);
  opacity:0;transition:opacity var(--t-tap) var(--ease);
}
.rf-line:hover .rf-only,.rf-only:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){
  .rf-only:hover{background:var(--sunk);color:var(--ink)}
}
@media (hover:none){ .rf-only{opacity:1} }
@media (hover:hover) and (pointer:fine){
  .pc-b:hover,.pc-step:hover,.pc-arrow:hover{background:var(--pc-hover);color:var(--pc-ink)}
  .pc-b.on:hover,.pc-step.on:hover{background:var(--pc-on);color:var(--pc-on-ink)}
  .pc-date:hover,.rf-btn:hover{background:var(--pc-well);border-color:var(--pc-ink-2)}
}