/*
 * KARTA-01 — стили пакета для классов, которые компонент <Karta/> навешивает
 * сам (karta-root/canvas/card/focus-panel/lod-indicator/status/refused).
 * Наряд С2 (issue #313): вынесено из demo/snapshot.html — до этого наряда
 * правила жили только в <style> демонстрационной страницы, вне пакета,
 * потребитель без своей копии demo/snapshot.html получал карточку/индикатор/
 * панель без оформления.
 *
 * Правила пишутся с явным box-sizing/line-height/border — не полагаются на
 * умолчания браузера, поскольку потребитель (DEEP, Tailwind 3.4 preflight)
 * на ВСЕХ элементах уже задаёт box-sizing:border-box, border-width:0 со
 * своим border-color, line-height:1.5, svg/img — display:block. Видимые
 * границы ниже всегда полным шорткатом (border/border-bottom: ширина стиль
 * цвет разом) — reset border-width/color потребителя их не трогает; явный
 * box-sizing/line-height нужен там, где раньше держался только умолчанием
 * UA (главным образом line-height — 1.5 потребителя иначе раздувает высоту
 * строк в панели/карточке). Ни одно из этих правил не относится к svg/img
 * (эти классы — обычные div), reset display:block на них безвреден.
 *
 * Наряд Т2 (issue #334): тёмная половина — переменные CSS с переключением по
 * `.karta-root[data-theme="dark"]`, значения — ПРОЕКТ ШТАБА (те же числа,
 * что в `tokens.ts`; CSS не умеет импортировать TS-константы, поэтому здесь
 * они продублированы буквально как единственный уровень непрямого доступа —
 * ни один класс ниже не несёт цвет напрямую, только через переменную).
 * Светлые значения переменных равны прежним литералам байт в байт — светлая
 * половина не меняется этим нарядом. `data-theme` на `.karta-root` держит
 * потребитель (тем же приёмом, что `theme.mode` пропа `<Karta/>`, см.
 * `Karta.tsx`) — этот файл сам переключатель не ставит.
 */

.karta-root {
  --karta-surface: #fff;
  --karta-surface-raised: #f7f8fa;
  --karta-border: #d0d3d8;
  --karta-border-subtle: #f0f2f4;
  --karta-text: #1c2127;
  --karta-text-muted: #6e7681;
  --karta-status-bg: #fff3cd;
  --karta-status-border: #ffe69c;
  --karta-danger: #cf222e;
  /* Наряд Б1 (issue #339), предмет 5: кольцо фокуса клавиатуры полотна — тот же оттенок, что tokens.ts::FLOW_CHAIN_LINE (уже занятая роль акцента этой палитры), не новый hex. */
  --karta-focus-ring: #215db0;

  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  line-height: normal;
}

/*
 * Наряд Т2 (issue #334), проект штаба: фон панелей `#141A22`, приподнятое
 * `#1B222C`, границы `rgba(255,255,255,.15)`, текст `#E8ECF2`, приглушённый
 * `#9AA6B6`; статус — янтарный `#E6A83E` при 12 % под текстом `#E8ECF2`;
 * отказ — `#F26D6D`. Обе размытые светлые границы (`--karta-border`/
 * `--karta-border-subtle`) сведены к ОДНОМУ тёмному значению — штаб задал
 * границы одним числом, не двумя ступенями.
 */
.karta-root[data-theme='dark'] {
  --karta-surface: #141a22;
  --karta-surface-raised: #1b222c;
  --karta-border: rgba(255, 255, 255, 0.15);
  --karta-border-subtle: rgba(255, 255, 255, 0.15);
  --karta-text: #e8ecf2;
  --karta-text-muted: #9aa6b6;
  --karta-status-bg: rgba(230, 168, 62, 0.12);
  --karta-status-border: rgba(230, 168, 62, 0.35);
  --karta-danger: #f26d6d;
  --karta-focus-ring: #4c9dff;
}

.karta-root *,
.karta-root *::before,
.karta-root *::after {
  box-sizing: border-box;
}

.karta-canvas {
  flex: 1;
  min-height: 0;
}

/*
 * Наряд Б1 (issue #339), предмет 5: полотно принимает клавиатурный фокус
 * (`tabIndex=0` в разметке компонента, Karta.tsx) — клавиши +/−/0/стрелки
 * работают, только когда фокус ЗДЕСЬ («не перехватывать клавиши вне
 * полотна», предмет 5, дословно). Кольцо — только при фокусе С КЛАВИАТУРЫ
 * (`:focus-visible`); обычный клик по полотну (пан/выбор) кольца не рисует.
 */
.karta-canvas:focus {
  outline: none;
}

.karta-canvas:focus-visible {
  outline: 2px solid var(--karta-focus-ring);
  outline-offset: -2px;
}

.karta-lod-indicator {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--karta-surface);
  border: 1px solid var(--karta-border);
  color: var(--karta-text);
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 5;
}

.karta-status {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--karta-status-bg);
  border: 1px solid var(--karta-status-border);
  color: var(--karta-text);
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 5;
}

.karta-refused {
  padding: 24px;
  color: var(--karta-danger);
}

.karta-card {
  position: absolute;
  right: 12px;
  top: 40px;
  width: 260px;
  background: var(--karta-surface);
  border: 1px solid var(--karta-border);
  color: var(--karta-text);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 6;
}

.karta-card__header {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--karta-border);
}

.karta-card__body {
  padding: 10px;
}

.karta-focus-panel {
  position: absolute;
  right: 12px;
  top: 40px;
  width: 300px;
  max-height: calc(100% - 56px);
  overflow-y: auto;
  background: var(--karta-surface);
  border: 1px solid var(--karta-border);
  color: var(--karta-text);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 6;
  font-size: 12px;
}

.karta-focus-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 10px;
  border-bottom: 1px solid var(--karta-border);
}

.karta-focus-panel__title {
  font-weight: 600;
  font-size: 13px;
}

.karta-focus-panel__summary {
  padding: 8px 10px;
  border-bottom: 1px solid var(--karta-border-subtle);
  color: var(--karta-text-muted);
}

.karta-focus-panel__summary div {
  display: flex;
  justify-content: space-between;
}

.karta-focus-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.karta-focus-panel__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--karta-border-subtle);
  cursor: pointer;
}

.karta-focus-panel__row:hover {
  background: var(--karta-surface-raised);
}

.karta-focus-panel__row-main {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.karta-focus-panel__row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.karta-focus-panel__row-value {
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}

.karta-focus-panel__row--finding .karta-focus-panel__row-name {
  color: var(--karta-danger);
  font-weight: 600;
}

.karta-focus-panel__row-meta {
  color: var(--karta-text-muted);
  font-size: 11px;
}

.karta-focus-panel__empty {
  padding: 10px;
  color: var(--karta-text-muted);
}