/* packages/ui/speech.css — раздел «Речевая аналитика» (ТЗ §13).
 *
 * Правила ТЗ §17.4/§20.3.6, которые эти стили обязаны держать:
 *   - desktop-first, минимальная ширина 1280 px; общего горизонтального
 *     переполнения страницы нет ни на одном экране;
 *   - широкие таблицы скроллятся ВНУТРИ своего контейнера (`.sp-scroll`), а
 *     не растягивают страницу;
 *   - цвет не является единственным кодом статуса: у каждой плашки и каждого
 *     состояния есть текст (см. `speech_views.js` — там все подписи).
 *
 * Ни одного собственного цвета: только токены `packages/theme/tokens.css`.
 */

/* `position: relative` здесь — НЕ оформление, а условие работоспособности
   раздела. `.state` (states.css) — это `position: absolute; inset: 0`, то есть
   он растягивается по ближайшему ПОЗИЦИОНИРОВАННОМУ предку. Пока у панели его
   не было, любое состояние (загрузка, «пусто», ошибка, отказ) уезжало
   растягиваться по `.frame-wrap` раздела «Дашборды» и накрывало собой ВСЁ —
   шапку, фильтры и полосу вкладок. Плашка прозрачная, поэтому выглядело это не
   как оверлей, а как намертво залипший экран: видно всё, не нажимается ничего,
   включая вкладку, которой можно было бы уйти обратно.

   Поймано на живом стенде: клик по «Недельному срезу» без заданной недели
   рисует `renderEmpty` — и раздел переставал отвечать на клики целиком.
   Соседи держат ровно это правило и ровно с этим комментарием
   (services.css:35, form.css:269, weekly.css:15). */
.sp-panel {
  position: relative;
  padding: 1rem 1.1rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Тот же довод, что у `.sp-panel`: сюда `revealTranscript` рисует загрузку и
   пустые состояния раскрытия текста. `min-height` — чтобы плашке было где
   поместиться: у пустого слота высота нулевая, и абсолютная плашка внутри
   него легла бы поверх соседей вместо своего места. */
.sp-transcript-slot {
  position: relative;
  min-height: 6rem;
}


/* --- фильтры ------------------------------------------------------------- */

.sp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .7rem;
  align-items: flex-end;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}
.sp-filter {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.sp-filter[hidden] { display: none; }
.sp-filter-label {
  font-size: .74rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .02em;
}
/* Подсказка ПОД полем, а не всплывающая по наведению: наводит тот, кто уже
   догадался, а нуждается в подсказке тот, кто нет. */
.sp-filter-hint {
  font-size: .72rem;
  color: var(--ink-3);
  max-width: 18rem;
}
.sp-input {
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .86rem;
  padding: .34rem .5rem;
  min-width: 9rem;
}
.sp-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sp-textarea { min-height: 4.5rem; min-width: 24rem; resize: vertical; }

.sp-tabs { padding: 0 1.1rem; border-bottom: 1px solid var(--border); }

/* --- секции --------------------------------------------------------------- */

.sp-section { margin: 1.2rem 0 0; }
.sp-section-head { margin-bottom: .5rem; }
.sp-section-title { margin: 0; font-size: .98rem; color: var(--ink); }
.sp-section-hint { margin: .15rem 0 0; font-size: .82rem; color: var(--ink-2); max-width: 88ch; }
.sp-sub { margin: .9rem 0 .35rem; font-size: .9rem; color: var(--ink); }

.sp-note { margin: .45rem 0 0; font-size: .82rem; color: var(--ink-3); }
.sp-note-warn { color: var(--warn); }
.sp-muted { color: var(--ink-3); }
.sp-err { color: var(--err); }

/* --- окно расчёта и протухание --------------------------------------------- */

.sp-range {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: .86rem;
}
.sp-range-label { color: var(--ink-3); }
.sp-range-value { color: var(--ink); font-weight: 600; }

/* Плашка «данные устарели» НЕ прячет цифры (ТЗ §15) — она стоит НАД ними и
   несёт время последнего пересчёта. Текст, а не только цвет. */
.sp-stale,
.sp-status,
.sp-saved,
.sp-deleted {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: .7rem 0 0;
  padding: .55rem .7rem;
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--warn);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: .84rem;
  color: var(--ink-2);
}
.sp-stale strong, .sp-deleted strong { color: var(--warn); }
/* Состояние обработки — не предупреждение: это положение дел, а не сбой,
   поэтому левая полоса синяя, а не янтарная. Различает их ТЕКСТ, цвет лишь
   помогает (ТЗ §13.7 — цвет не является единственным кодом статуса). */
.sp-status { border-left-color: var(--blue); }
.sp-status strong { color: var(--blue-deep); }
/* Успешная корректировка — тот же примитив плашки, зелёная полоса и слово
   «Сохранено» текстом: без текста состояние читалось бы одним цветом, что
   ТЗ §13.7 прямо запрещает. */
.sp-saved { border-left-color: var(--ok); }
.sp-saved strong { color: var(--ok); }
.sp-stale-at { color: var(--ink-3); }

/* --- плитки KPI ------------------------------------------------------------ */

.sp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .6rem;
  margin: .9rem 0 0;
}
.sp-tile {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-3);
  padding: .6rem .75rem;
}
.sp-tile-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.sp-tile-label { font-size: .82rem; color: var(--ink-2); margin-top: .1rem; }
.sp-tile-hint { font-size: .74rem; color: var(--ink-3); margin-top: .15rem; }

/* --- таблицы ---------------------------------------------------------------- */

/* Локальный скролл, а не переполнение страницы (ТЗ §20.3.6). */
.sp-scroll { overflow-x: auto; margin-top: .3rem; }
.sp-tbl { min-width: 100%; font-size: .85rem; }
.sp-tbl td { vertical-align: top; }
.sp-code { font-family: var(--mono); font-size: .8rem; white-space: nowrap; }
.sp-code-btn {
  font-family: var(--mono);
  font-size: .8rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--blue-deep);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}
.sp-code-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sp-row-deleted td { color: var(--ink-3); }

.sp-bar-cell { width: 8rem; }
.sp-bar {
  display: block;
  height: .5rem;
  border-radius: 3px;
  background: var(--surface-2);
  min-width: 5rem;
}
.sp-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--blue); }

.sp-actions { white-space: nowrap; }
.sp-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--blue-deep);
  font: inherit;
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}
.sp-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sp-btn {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  border-radius: 6px;
  padding: .38rem .75rem;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.sp-btn:disabled { background: var(--surface-2); border-color: var(--border-2); color: var(--ink-3); cursor: default; }
.sp-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sp-pager { display: flex; gap: .5rem; align-items: center; margin-top: .7rem; }
.sp-page-btn {
  border: 1px solid var(--border-2);
  background: var(--surface);
  border-radius: 6px;
  padding: .3rem .7rem;
  font: inherit;
  font-size: .84rem;
  color: var(--ink-2);
  cursor: pointer;
}
.sp-page-btn:disabled { color: var(--ink-3); cursor: default; }
.sp-page-num { font-size: .84rem; color: var(--ink-3); }

/* --- карточка звонка --------------------------------------------------------- */

.sp-detail-bar { display: flex; gap: .7rem; align-items: center; margin: .2rem 0 .7rem; }
.sp-card-head { border-bottom: 1px solid var(--divider); padding-bottom: .6rem; }
.sp-card-title { margin: 0; font-size: 1.05rem; }
.sp-card-meta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .25rem; font-size: .83rem; color: var(--ink-2); }

.sp-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: .7rem; margin-top: .8rem; }
.sp-result { border: 1px solid var(--border); border-radius: 8px; padding: .6rem .75rem; background: var(--surface-3); }
.sp-result-title { font-weight: 600; font-size: .9rem; }
.sp-result-hint { font-size: .78rem; color: var(--ink-3); margin-bottom: .3rem; }

.sp-kv { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .8rem; margin: .4rem 0 0; font-size: .85rem; }
.sp-kv dt { color: var(--ink-3); }
.sp-kv dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-kv-mono dd { font-family: var(--mono); font-size: .78rem; overflow-wrap: anywhere; }

.sp-evidence { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.sp-evidence-item { display: flex; gap: .35rem; align-items: baseline; flex-wrap: wrap; }
.sp-evidence-empty { color: var(--ink-3); }
.sp-evidence-cell { min-width: 18rem; }
.sp-turn-ref {
  background: var(--blue-wash);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 0 .3rem;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--blue-deep);
  cursor: pointer;
}
.sp-evidence-speaker { font-size: .74rem; color: var(--ink-3); }
.sp-quote { font-style: italic; color: var(--ink-2); }
.sp-quote-cut::after { content: "…"; }
.sp-quote-withheld { color: var(--ink-3); font-size: .8rem; }

.sp-manual-cell { min-width: 14rem; }
.sp-manual-who-cell { min-width: 8rem; white-space: nowrap; }
.sp-manual-verdict { font-weight: 600; }
.sp-manual-comment { color: var(--ink-2); }
.sp-manual-who { font-size: .76rem; color: var(--ink-3); }

/* --- ручная проверка ---------------------------------------------------------- */

.sp-review {
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: .7rem .85rem;
  margin: .9rem 0;
  background: var(--surface-2);
}
.sp-field { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; font-size: .85rem; color: var(--ink-2); }

/* --- транскрипция -------------------------------------------------------------- */

.sp-reveal { display: flex; gap: .7rem; align-items: center; margin: 1rem 0 .3rem; flex-wrap: wrap; font-size: .82rem; }
.sp-transcript { border-top: 1px solid var(--divider); padding-top: .5rem; }
.sp-transcript-head { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); margin-bottom: .4rem; }
.sp-turn {
  display: grid;
  grid-template-columns: 3.4rem 5.5rem 1fr;
  gap: .5rem;
  padding: .3rem .4rem;
  border-radius: 5px;
  font-size: .86rem;
  align-items: start;
}
.sp-turn-id { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); }
.sp-turn-speaker { font-weight: 600; color: var(--ink-2); font-size: .8rem; }
/* Роли различимы И текстом (подпись говорящего печатается всегда), и фоном —
   цвет здесь дополняет подпись, а не заменяет её (ТЗ §13.7). */
.sp-turn-operator { background: var(--surface-3); }
.sp-turn-client { background: var(--blue-wash); }
.sp-turn-unknown { background: var(--surface); }
.sp-turn-evidence { border-left: 3px solid var(--border-2); }
.sp-turn-active { border-left: 3px solid var(--blue); background: var(--surface-2); }
.sp-turn-codes { grid-column: 3; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }

/* --- очередь и недельный срез ---------------------------------------------------- */

.sp-badge {
  display: inline-block;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 0 .45rem;
  margin: 0 .25rem .2rem 0;
  font-size: .74rem;
  color: var(--ink-2);
  background: var(--surface-2);
}
.sp-weekly { margin-bottom: 1.6rem; }
.sp-weekly-head { border-bottom: 1px solid var(--divider); padding-bottom: .4rem; }
.sp-summary { font-size: .9rem; color: var(--ink); max-width: 88ch; }
.sp-list { margin: .2rem 0; padding-left: 1.1rem; font-size: .86rem; }
.sp-list li { margin-bottom: .2rem; }
.sp-basis { margin-left: .4rem; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }

/* Мобильное использование не является приёмочным сценарием первой итерации
   (ТЗ §17.4), но интерфейс обязан оставаться читаемым: колонки реплики
   схлопываются, таблицы сохраняют собственный скролл. */
@media (max-width: 900px) {
  .sp-turn { grid-template-columns: 3.4rem 1fr; }
  .sp-turn-text { grid-column: 1 / -1; }
  .sp-turn-codes { grid-column: 1 / -1; }
  .sp-textarea { min-width: 0; width: 100%; }
}