/* =====================================================================
   site-ui.css — единый вид интерфейса Limbic Eruption во ВСЕХ разделах.
   Подключается автоматически из site-nav.js (а в новостях — строкой <link>).
   Меняете здесь — меняется везде, разделы передеплоивать не нужно.

   Принципы: черно-белый, контрастный, строгие прямоугольные формы,
   один шрифт (Inter), кнопки двух видов — основная (белая) и обычная (контур).
   ===================================================================== */

:root{
  --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ui-fg: #f2f2f0;
  --ui-muted: #8a8a8a;
  --ui-line: rgba(255,255,255,.24);
  --ui-line-strong: #ffffff;
  --ui-field: #0b0b0b;
  --ui-hover: rgba(255,255,255,.07);
  --ui-btn-h: 38px;
}

/* ---------- 1. Один шрифт ---------- */
html body{ font-family: var(--ui-font) !important; }
button, input, select, textarea{ font-family: var(--ui-font); }

/* ---------- 2. Никаких скруглений — строгие прямоугольники ---------- */
*, *::before, *::after{ border-radius: 0 !important; }

/* ---------- 3. Обычная кнопка: белый контур на черном ---------- */
.btn, .btnSecondary, .btn--ghost, .gbtn, button.ghost, .btn.ghost,
.chip, .icon-btn, .hbtn, .icbtn, .closeD, .drawer-close, .removeBtn{
  background: transparent !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-fg) !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover, .btnSecondary:hover, .btn--ghost:hover, .gbtn:hover, button.ghost:hover, .btn.ghost:hover,
.chip:hover, .icon-btn:hover, .hbtn:hover, .icbtn:hover, .closeD:hover, .drawer-close:hover, .removeBtn:hover{
  background: var(--ui-hover) !important;
  border-color: var(--ui-line-strong) !important;
}

/* текстовые кнопки — одинакового размера и начертания */
.btn, .btnSecondary, .btn--ghost, .gbtn, button.ghost, .btn.ghost,
.btn--primary, .wbtn, .btn.primary{
  min-height: var(--ui-btn-h);
  padding: 0 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.chip{ font-size: 13px !important; font-weight: 600 !important; padding: 6px 14px !important; }

/* ---------- 4. Основная кнопка: белая с черным текстом ---------- */
.btn--primary, .wbtn, .btn.primary, .send,
.chip.is-on, .chip.on, .chip.active, .chip[aria-pressed="true"],
.icon-btn.menu-open, .icbtn[aria-pressed="true"]{
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #000000 !important;
}
.icbtn[aria-pressed="true"] svg{ fill: #000 !important; stroke: #000; }
.btn--primary:hover, .wbtn:hover, .btn.primary:hover, .send:hover{
  background: #d9d9d9 !important; border-color: #d9d9d9 !important;
}

button:disabled, .btn:disabled, .btn[disabled]{ opacity: .4 !important; cursor: default !important; }

/* ---------- 5. Поля ввода ---------- */
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"], input[type="url"], input:not([type]),
select, textarea{
  background-color: var(--ui-field) !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-fg) !important;
  box-shadow: none !important;
}
/* поле внутри уже обрамленного блока (поиск в новостях) — без второй рамки */
.sbsearch input, .composer input, .composer textarea{
  border: 0 !important; background-color: transparent !important; outline: none !important;
}
.sbsearch:focus-within, .composer:focus-within{ border-color: #ffffff !important; }
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: var(--ui-line-strong) !important;
}
::placeholder{ color: #6f6f6f !important; opacity: 1; }

/* ---------- 6. Фокус с клавиатуры — одинаковый везде ---------- */
:focus-visible{ outline: 1px solid #ffffff !important; outline-offset: 2px; }

/* ---------- 7. Выделение текста ---------- */
::selection{ background: #ffffff; color: #000000; }

/* ---------- 8. Текст: один стиль и один междустрочный интервал ----------
   Основной текст 15px / 1.55. Заголовки — одна шкала для всех разделов. */
html body{
  font-size: 15px;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p, li, dd, dt, td, th, label, blockquote, summary, figcaption, details{ line-height: 1.55 !important; }
h1, h2, h3, h4{ font-family: var(--ui-font) !important; }
h1{ font-size: 26px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -.02em !important; text-transform: none !important; }
h2{ font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -.01em !important; }
h3{ font-size: 15px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0 !important; }
h4{ font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; }
@media (max-width: 600px){
  h1{ font-size: 22px !important; }
  h2{ font-size: 17px !important; }
}
/* абзацы — один размер; пояснения и подписи — один меньший размер */
p{ font-size: 14px !important; }
.hint, .note, .muted, .source, small, figcaption,
p.hint, p.note, p.source, .subtitle ~ .hint, .section-card p, .cat-titles p,
.historyMeta, .issueDate, .item__spec, .scale-group h3{ font-size: 12.5px !important; }

/* ---------- 9. Низ страницы: одинаковый во всех разделах ----------
   Основная часть страницы отделена линией во всю ширину.
   От последнего блока до линии — 40px, от линии до подписи — 24px, под подписью — 40px.
   Подпись везде одного цвета — светло-серая, контрастная на черном. */
:root{ --ui-bottom: 40px; --ui-foot-color: #b3b3b3; }
body > footer, footer.foot{
  position: relative; z-index: 1;
  margin: var(--ui-bottom) 0 0 !important;
  max-width: none !important;
  width: auto !important;
  padding: 24px 16px var(--ui-bottom) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.16) !important;
  background: transparent !important;
  display: block !important;
  text-align: center !important;
  font-family: var(--ui-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: var(--ui-foot-color) !important;
  letter-spacing: normal !important;
}
body > footer *, footer.foot *{
  font-size: 12px !important; color: inherit !important; font-family: inherit !important;
  font-weight: inherit !important; letter-spacing: normal !important; margin: 0 !important;
}
body > footer > * + *{ display: block; margin-top: 6px !important; }

/* ---------- 10. Кнопка-крестик: крест нарисован двумя линиями ровно по центру квадрата ----------
   (символ «×» в шрифте сидит ниже середины строки, поэтому вместо него — линии) */
.removeBtn, .item__del, .x-btn, .btn.x-btn{
  position: relative !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  flex: none;
  width: 30px !important; height: 30px !important; min-width: 30px; min-height: 0 !important;
  padding: 0 !important;
  font-size: 0 !important; line-height: 0 !important; color: transparent !important;
  background: transparent !important;
  border: 1px solid var(--ui-line) !important;
  cursor: pointer;
}
.removeBtn::before, .removeBtn::after, .item__del::before, .item__del::after, .x-btn::before, .x-btn::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 1.5px; background: var(--ui-fg);
  transform: translate(-50%, -50%) rotate(45deg);
}
.removeBtn::after, .item__del::after, .x-btn::after{ transform: translate(-50%, -50%) rotate(-45deg); }
.removeBtn:hover, .item__del:hover, .x-btn:hover{ border-color: #ffffff !important; background: var(--ui-hover) !important; }