/* lib.css · стили общих компонентов панели: выбор периода (period.js,
   _period.html) и фильтр-воронка (filter.js, _filter.html).

   Переехали сюда из meetings.css, когда компоненты стали общими: экран,
   которому нужен период или фильтр, больше не обязан тащить стили встреч.
   В meetings.css остались только надстройки журнала — fpop, pop-menu,
   pop-actions и прочее, что нужно одному экрану. */

.period-nav { display: inline-flex; align-items: center; gap: 4px; }
.period-wrap { position: relative; }
.period-btn { display: inline-flex; align-items: center; gap: 8px; }
.period-btn .pv { font-family: var(--font-mono); font-size: var(--fs-xs); }
.pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); padding: 8px; width: 340px; }
.pop[hidden] { display: none; }
.pop-title { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--fg-label); padding: 6px 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
/* «3 из 24» в шапке окна выбора проекта: сколько нашлось из скольких. При
   пустом поиске пусто — считать нечего. */
.pop-title .of { font-family: var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--fg-faint); }
.check-line mark { background: #FDE68A; color: inherit; border-radius: 2px; padding: 0 1px; }
.pop-presets { display: flex; flex-direction: column; gap: 1px; }
.pop-presets button { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; text-align: left; padding: 7px 10px; border: none; background: transparent; border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer; }
.pop-presets button:hover { background: var(--paper-mute); }
.pop-presets button.active { background: var(--ink); color: var(--fg-on-ink); }
.pop-presets button .rng { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-label); white-space: nowrap; }
.pop-presets button.active .rng { color: var(--fg-on-ink); opacity: .7; }
.pop-custom { border-top: 1px solid var(--border-faint); margin-top: 8px; padding: 10px 10px 4px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.pop-custom .field { padding: 4px 8px; min-width: 0; }
.pop-custom .field input { font-family: var(--font-mono); font-size: var(--fs-xs); }
.pop-custom .lbl { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--fg-label); margin-bottom: -2px; }
.check-line .pin { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-faint); flex: none; }
.check-line.dim .nm { color: var(--fg-muted); }
/* Две кнопки в равных долях: края совпадают с полем поиска над ними и со
   списком под ним. */
.pick-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 7px 2px 3px; }
.pick-bar .btn { width: 100%; }
.btn.xs { padding: 3px 9px; font-size: 11px; font-weight: 500; }
.pop-list { max-height: 250px; overflow: auto; display: flex; flex-direction: column; gap: 1px; padding: 2px; }
.check-line { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer; }
.check-line:hover { background: var(--paper-mute); }
.check-line input { margin: 0; accent-color: var(--fg); flex: none; }
.check-line .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-line .cnt { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-label); }
.pop-sep { border-top: 1px solid var(--border-faint); margin: 6px 0; }
.pop-note { font-size: 11px; color: var(--fg-label); padding: 4px 10px 6px; line-height: 1.45; }

/* ── фильтр-воронка ────────────────────────────────────────────────── */
/* Что выбрано, говорит точка на кнопке, а не подпись: строка фильтров и так
   плотная, а список выбранного всё равно не поместится. */
.filt-wrap { display: inline-flex; }
.filt-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--warn-dot); border: 2px solid var(--paper); pointer-events: none; }
.filt-dot[hidden] { display: none; }
/* .btn.icon-only в meetings.css ставит display: inline-flex и грузится позже,
   поэтому прячем крестик селектором той же длины плюс класс кнопки */
.btn.filt-clear[hidden] { display: none; }

/* ── два яруса в воронке (срез 2 роадмапа направлений) ─────────────
   Подпись яруса, заголовок группы без чекбокса и строка с отступом внутри
   группы. Общие для воронки списка встреч (meetings.js рисует её сам) и
   фильтра нитей (filter.js), поэтому здесь, а не в meetings.css. */
.grp-label { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-label); padding: 8px 9px 3px; }
.check-line.via { color: var(--fg-muted); cursor: default; }
.check-line.via:hover { background: transparent; }
.check-line.via input { opacity: .55; }
.check-line.indent { padding-left: 24px; }