/* ═══════════════════════════════════════════════════════════════
   Дизайн-система «Карта СВО» — токены и базовые компоненты.

   Один источник правды для карты, страниц сайта и админки.
   Принципы:
     • карта главная — интерфейс спокойный, светлый, не спорит с ней;
     • цвет несёт смысл: синий — действие, зелёный — освобождено,
       серо-сланцевый — занято противником, красный — потери и удары;
     • плотность информации как в редакционном продукте: моноширинные
       цифры у времени и дат, короткие строки, без декоративных градиентов;
     • круглые плавающие кнопки и «таблетки» — узнаваемая форма карты.
   Классы компонентов — с префиксом ds-, токены — custom properties.
   ═══════════════════════════════════════════════════════════════ */

/* ── Шрифты: все начертания в одном месте (карта, сайт, редакция) ── */
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Roboto"), local("Roboto-Regular"), url("/fonts/Roboto.woff2") format("woff2"), url("/fonts/Roboto.woff") format("woff"); }
/* настоящий жирный вместо синтетического */
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap;
  src: local("Roboto Bold"), local("Roboto-Bold"), url("/fonts/Robotobold.woff2") format("woff2"), url("/fonts/Robotobold.woff") format("woff"); }
@font-face { font-family: "Roboto Bold"; font-weight: 700; font-style: normal; font-display: swap;
  src: local("Roboto Bold"), local("Roboto-Bold"), url("/fonts/Robotobold.woff2") format("woff2"), url("/fonts/Robotobold.woff") format("woff"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Roboto Condensed"), url("/fonts/Robotocondensed.woff2") format("woff2"), url("/fonts/Robotocondensed.woff") format("woff"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Montserrat"), local("Montserrat-Regular"), url("/fonts/Montserrat-Regular.woff2") format("woff2"), url("/fonts/Montserrat-Regular.woff") format("woff"); }

:root {
  /* ── Палитра: нейтральные (чуть тёплые, как бумага карты) ── */
  --ds-ink-900: #1C1D1F;   /* заголовки */
  --ds-ink-800: #333333;   /* основной текст */
  --ds-ink-700: #4F4F4F;   /* текст карточки */
  --ds-ink-500: #828282;   /* вторичный текст, время */
  --ds-ink-400: #A3A3A3;   /* подписи полей, неактивное */
  --ds-ink-300: #D9D9D9;   /* неактивные кнопки, разделители */
  --ds-ink-200: #E9E9EB;   /* обводки полей */
  --ds-ink-100: #F2F2F4;   /* подложки полей */
  --ds-paper:   #F5F5F5;   /* фон карты */
  --ds-surface: #FFFFFF;   /* панели */
  --ds-surface-sunken: #FAFAFA; /* карточка события */

  /* ── Акцент: «сигнальный синий» — всё, что нажимается ── */
  --ds-blue-700: #0056B3;
  --ds-blue-600: #007AFF;
  --ds-blue-500: #21A6F0;  /* кнопка «Источник» */
  --ds-blue-100: #E5F1FF;
  --ds-blue-50:  #F2F8FF;

  /* ── Смысловые цвета карты ── */
  --ds-liberated-strong: #286D13;  /* освобождено (итог) */
  --ds-liberated:        #328818;  /* освобождено за период */
  --ds-occupied:         #606969;  /* занято противником */
  --ds-occupied-change:  #416666;
  --ds-frontline:        #B3261E;
  --ds-negative-bg:      #FFE9E5;  /* событие: удар, потери */
  --ds-negative-icon:    #DBDBDB;
  --ds-positive-bg:      #F4FFF1;  /* событие: успех, освобождение */
  --ds-positive-icon:    #C7D9FB;
  --ds-type-badge:       rgba(92, 170, 242, .5);

  /* ── Состояния ── */
  --ds-danger:  #FF3B30;
  --ds-danger-700: #D92A20;
  --ds-success: #2E9E44;
  --ds-warning: #E8A100;

  /* ── Типографика ── */
  --ds-font-ui:      "Montserrat", "Roboto", system-ui, sans-serif; /* кнопки, заголовки панелей */
  --ds-font-text:    "Roboto", system-ui, sans-serif;               /* тексты событий */
  --ds-font-map:     "Roboto Condensed", "Roboto", sans-serif;      /* подписи городов */
  --ds-text-xs: 10px;   /* время в списке */
  --ds-text-sm: 12px;   /* подписи сёл, кнопка «Источник» */
  --ds-text-md: 14px;   /* основной размер интерфейса */
  --ds-text-lg: 16px;
  --ds-text-xl: 20px;   /* крупные города на карте */
  --ds-text-2xl: 24px;  /* заголовок карточки */
  --ds-leading-tight: 1.2;
  --ds-leading: 1.43;   /* 14/20 */

  /* ── Сетка 4 px ── */
  --ds-space-1: 4px;  --ds-space-2: 8px;  --ds-space-3: 12px; --ds-space-4: 16px;
  --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px;

  /* ── Скругления ── */
  --ds-radius-sm: 8px;    /* поля ввода, бейджи */
  --ds-radius-md: 12px;   /* кнопки формы, тосты */
  --ds-radius-lg: 20px;   /* панели (лист снизу), таблетки периодов */
  --ds-radius-pill: 999px;

  /* ── Тени: только для того, что лежит над картой ── */
  --ds-shadow-1: 0 1px 4px rgba(0, 0, 0, .12);
  --ds-shadow-2: 0 4px 8px rgba(0, 0, 0, .25);          /* плавающие кнопки */
  --ds-shadow-sheet: 4px -4px 8px rgba(0, 0, 0, .10);   /* лист снизу */
  --ds-shadow-pop: 0 12px 40px rgba(0, 0, 0, .14);      /* попапы, меню */
  --ds-focus: 0 0 0 3px rgba(0, 122, 255, .35);

  /* ── Движение ── */
  --ds-ease-out: cubic-bezier(.25, .46, .45, .94);
  --ds-ease-in-out: cubic-bezier(.45, .05, .55, .95);
  --ds-dur-fast: .15s;
  --ds-dur: .25s;
  --ds-dur-sheet: .5s;

  /* ── Слои ── */
  --ds-z-map-ui: 700;      /* логотип, масштаб, подсказка */
  --ds-z-sheet: 800;       /* список событий */
  --ds-z-floating: 999;    /* кнопки зума */
  --ds-z-card: 2000;       /* карточка события */
  --ds-z-admin: 2100;
  --ds-z-modal: 3000;
  --ds-z-toast: 9000;
}

/* ═══════════════════ Компоненты ═══════════════════ */

/* Иконка из спрайта /images/icons.svg (Lucide): <svg class="i"><use href="…#pencil"/></svg>.
   Размер — от шрифта, цвет — currentColor. */
.i { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.25em;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ds-btn .i { width: 18px; height: 18px; }
.ds-btn--sm .i { width: 16px; height: 16px; }

/* Кнопки: primary — главное действие экрана, secondary — остальные,
   ghost — внутри панелей, danger — удаление. Высота 40 (sm — 32). */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  height: 40px; padding: 0 var(--ds-space-5); border: 0; border-radius: var(--ds-radius-md);
  font: 600 var(--ds-text-md)/1 var(--ds-font-text); letter-spacing: .01em; text-decoration: none;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background-color var(--ds-dur-fast), box-shadow var(--ds-dur-fast), transform .1s;
}
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.ds-btn:active { transform: scale(.97); }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.ds-btn--primary { background: var(--ds-blue-600); color: #fff; }
.ds-btn--primary:hover { background: var(--ds-blue-700); }
.ds-btn--secondary { background: var(--ds-ink-100); color: var(--ds-ink-800); }
.ds-btn--secondary:hover { background: var(--ds-ink-200); }
.ds-btn--ghost { background: transparent; color: var(--ds-blue-600); }
.ds-btn--ghost:hover { background: var(--ds-blue-50); }
.ds-btn--danger { background: var(--ds-danger); color: #fff; }
.ds-btn--danger:hover { background: var(--ds-danger-700); }
.ds-btn--sm { height: 32px; padding: 0 var(--ds-space-3); font-size: var(--ds-text-sm); border-radius: var(--ds-radius-sm); }
.ds-btn--block { width: 100%; }
/* «Источник» в карточке — капсула */
.ds-btn--pill { border-radius: var(--ds-radius-pill); font: 700 var(--ds-text-sm) var(--ds-font-text); text-transform: uppercase; letter-spacing: .04em; }

/* Круглая плавающая кнопка над картой (язык, зум, глаз) */
.ds-fab {
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-blue-600); color: #fff; box-shadow: var(--ds-shadow-2);
  font: 700 var(--ds-text-md) var(--ds-font-ui); cursor: pointer;
  transition: background-color var(--ds-dur-fast), transform .1s;
}
.ds-fab:hover { background: var(--ds-blue-700); }
.ds-fab:active { transform: scale(.95); }
.ds-fab--light { background: var(--ds-surface); color: var(--ds-blue-600); }

/* Таблетки-переключатели (периоды): ровно одна выбрана */
.ds-chip {
  flex: none; padding: 10px 20px; border: 0; border-radius: var(--ds-radius-lg);
  font: 400 var(--ds-text-md)/18px var(--ds-font-ui); color: #fff; background: var(--ds-ink-300);
  cursor: pointer; transition: background-color var(--ds-dur), box-shadow var(--ds-dur);
}
.ds-chip:hover { background: #DADADA; }
.ds-chip[aria-pressed="true"] { background: var(--ds-blue-600); box-shadow: 0 4px 4px rgba(0, 0, 0, .25); }

/* Бейдж типа события / статуса */
.ds-badge {
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  height: 22px; padding: 0 var(--ds-space-2); border-radius: var(--ds-radius-sm);
  font: 600 11px/1 var(--ds-font-text); letter-spacing: .02em; white-space: nowrap;
  background: var(--ds-ink-100); color: var(--ds-ink-700);
}
.ds-badge--blue { background: var(--ds-blue-100); color: var(--ds-blue-700); }
.ds-badge--green { background: #E3F4DD; color: var(--ds-liberated-strong); }
.ds-badge--red { background: var(--ds-negative-bg); color: var(--ds-danger-700); }
.ds-badge--amber { background: #FFF3D6; color: #8A5F00; }

/* Поля ввода */
.ds-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ds-label { font: 500 var(--ds-text-sm)/1.2 var(--ds-font-text); color: var(--ds-ink-500); letter-spacing: .01em; }
.ds-hint { font: 400 var(--ds-text-sm)/1.35 var(--ds-font-text); color: var(--ds-ink-400); }
.ds-input, .ds-select, .ds-textarea {
  box-sizing: border-box; width: 100%; min-height: 40px; padding: 9px 12px;
  border: 1px solid transparent; border-radius: var(--ds-radius-sm);
  background: var(--ds-ink-100); color: var(--ds-ink-900);
  font: 400 var(--ds-text-md)/var(--ds-leading) var(--ds-font-text);
  outline: none; transition: border-color var(--ds-dur-fast), background-color var(--ds-dur-fast), box-shadow var(--ds-dur-fast);
}
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { background: var(--ds-ink-200); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { background: var(--ds-surface); border-color: var(--ds-blue-600); box-shadow: var(--ds-focus); }
.ds-input[aria-invalid="true"], .ds-textarea[aria-invalid="true"] { border-color: var(--ds-danger); }
.ds-textarea { min-height: 120px; resize: vertical; }
/* Выбор файла: <label class="ds-file"><input type="file"><span class="ds-btn …">…</span><span class="ds-file-name"></span></label> */
.ds-file { position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-3); max-width: 100%; cursor: pointer; }
.ds-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ds-file input:focus-visible + .ds-btn { box-shadow: var(--ds-focus); }
.ds-file input:disabled + .ds-btn { opacity: .45; }
.ds-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ds-text-sm); color: var(--ds-ink-500); }
.ds-mono, .ds-input--mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.ds-num { font-variant-numeric: tabular-nums; }

/* Переключатель */
.ds-switch { position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-2); cursor: pointer; font: 400 var(--ds-text-md) var(--ds-font-text); color: var(--ds-ink-800); }
.ds-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ds-switch i { position: relative; width: 36px; height: 22px; border-radius: 11px; background: var(--ds-ink-300); transition: background-color var(--ds-dur); flex: none; }
.ds-switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--ds-shadow-1); transition: transform var(--ds-dur) var(--ds-ease-out); }
.ds-switch input:checked + i { background: var(--ds-blue-600); }
.ds-switch input:checked + i::after { transform: translateX(14px); }
.ds-switch input:focus-visible + i { box-shadow: var(--ds-focus); }

/* Сегментированный выбор (тип события, язык) */
.ds-segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--ds-radius-md); background: var(--ds-ink-100); }
.ds-segmented button { border: 0; background: none; height: 32px; padding: 0 var(--ds-space-3); border-radius: 9px;
  font: 500 var(--ds-text-sm) var(--ds-font-text); color: var(--ds-ink-500); cursor: pointer; }
.ds-segmented button[aria-pressed="true"] { background: var(--ds-surface); color: var(--ds-ink-900); box-shadow: var(--ds-shadow-1); }

/* Панель / карточка */
.ds-panel { background: var(--ds-surface); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-pop); }
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-ink-200); border-radius: var(--ds-radius-md); }

/* Тост */
.ds-toast {
  position: fixed; left: 50%; bottom: var(--ds-space-6); z-index: var(--ds-z-toast); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--ds-space-3); max-width: min(480px, calc(100vw - 32px));
  padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-md);
  background: var(--ds-ink-900); color: #fff; box-shadow: var(--ds-shadow-pop);
  font: 500 var(--ds-text-md)/1.35 var(--ds-font-text);
}
.ds-toast--error { background: var(--ds-danger-700); }

/* Таблица (админка) */
.ds-table { width: 100%; border-collapse: collapse; font: 400 var(--ds-text-md)/1.35 var(--ds-font-text); color: var(--ds-ink-800); }
.ds-table th { text-align: left; font: 600 11px/1 var(--ds-font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-400);
  padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-ink-200); white-space: nowrap; }
.ds-table td { padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-ink-100); vertical-align: middle; }
.ds-table tbody tr:hover { background: var(--ds-blue-50); }

/* Легенда карты: образцы заливки */
.ds-swatch { display: inline-block; width: 16px; height: 12px; border-radius: 3px; vertical-align: middle; }
.ds-swatch--liberated { background: var(--ds-liberated); opacity: .55; }
.ds-swatch--occupied { background: repeating-linear-gradient(135deg, var(--ds-occupied) 0 3px, #8A9292 3px 6px); }
.ds-swatch--frontline { height: 3px; background: var(--ds-frontline); border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  :root { --ds-dur-fast: 0s; --ds-dur: 0s; --ds-dur-sheet: 0s; }
}