/* observatory-shell.css — спільні Observatory-компоненти (TASK-501, зріз TASK-407).
   Доповнення до monitor.css: використовує лише наявні токени (--navy, --gold,
   --light, --white, --text, --muted, --border) і простір імен .obs-*.
   Хедер/навігація/мобільне меню НЕ дублюються: Observatory-шелл реюзає
   .site-header + .mobile-menu + burger.js із monitor.css — змінюється лише
   набір пунктів навігації (Огляд · Теми · Дослідження · Дані · Право і
   стандарти · Про Обсерваторію · Повідомити). Тут живуть лише нові примітиви:
   картки, статуси доказовості, свіжість, Evidence Note, обмеження. */

/* ── Сітка карток ──────────────────────────────────────────────────────── */

.obs-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.obs-cards--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 960px) {
  .obs-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .obs-cards,
  .obs-cards--pair {
    grid-template-columns: 1fr;
  }
}

/* ── Картки: дослідження / доказ / тема ────────────────────────────────── */

.obs-card {
  background: var(--white, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text, #374151);
  overflow-wrap: break-word;
  hyphens: auto;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.obs-card {
  text-decoration: none;
}

.obs-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(14, 30, 64, 0.1);
}

.obs-card:focus-visible {
  outline: 3px solid rgba(215, 164, 10, 0.55);
  outline-offset: 3px;
}

.obs-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy, #0e1e40);
  line-height: 1.35;
}

.obs-card-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.obs-card-meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted, #6b7280);
}

/* Тематична картка: стриманий золотий акцент зліва. */
.obs-card--topic {
  border-left: 3px solid var(--gold, #d7a40a);
}

/* Картка перевіреного доказу: трохи глибша інституційна рамка. */
.obs-card--evidence {
  border-color: rgba(14, 30, 64, 0.25);
}

/* «Повідомити» — функція участі, не пʼятий доказовий напрям:
   навмисно інша мова форми (navy-дія, без доказового статусу). */
.obs-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy, #0e1e40);
  color: var(--white, #ffffff);
  border-radius: 8px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.obs-action:hover {
  background: var(--navy-deep, #0a1733);
}

.obs-action:focus-visible {
  outline: 3px solid rgba(215, 164, 10, 0.55);
  outline-offset: 3px;
}

/* ── Статус доказовості (bounded, не лише кольором) ────────────────────── */
/* Стан задається data-атрибутами, які виставляє observatory-evidence.mjs:
   data-kind = finding | signal | research | lifecycle | unverified.
   Значення розрізняються і текстом мітки, і формою (суцільна/подвійна/
   пунктирна рамка), і кольором — тож зміст не передається лише кольором. */

.obs-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text, #374151);
  background: var(--light, #f8f9fb);
}

.obs-status[data-kind='finding'] {
  background: rgba(215, 164, 10, 0.14);
  border: 2px solid var(--gold, #d7a40a);
  color: #765800; /* контрастний золотий текст (див. monitor.css) */
}

.obs-status[data-kind='signal'] {
  background: rgba(14, 30, 64, 0.06);
  border-color: rgba(14, 30, 64, 0.35);
  color: var(--navy, #0e1e40);
}

.obs-status[data-kind='research'] {
  background: var(--white, #ffffff);
  border-color: rgba(14, 30, 64, 0.35);
  color: var(--navy, #0e1e40);
}

.obs-status[data-kind='lifecycle'] {
  background: var(--light, #f8f9fb);
  border-color: var(--border, #e5e7eb);
  color: var(--muted, #6b7280);
  text-decoration: none;
}

.obs-status[data-kind='unverified'],
.obs-status:not([data-kind]) {
  background: var(--white, #ffffff);
  border: 1px dashed var(--muted, #6b7280);
  color: var(--muted, #6b7280);
}

/* ── Свіжість: явні окремі дати ────────────────────────────────────────── */

.obs-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 12px 16px;
  background: var(--light, #f8f9fb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
}

.obs-freshness-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.obs-freshness-item dt {
  color: var(--muted, #6b7280);
  font-weight: 600;
}

.obs-freshness-item dd {
  margin: 0;
  color: var(--navy, #0e1e40);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.obs-freshness-item--unknown dd {
  color: var(--muted, #6b7280);
  font-weight: 600;
}

/* ── Мінімальна інлайнова Evidence Note ────────────────────────────────── */

.obs-evidence-note {
  background: var(--white, #ffffff);
  border: 1px solid rgba(14, 30, 64, 0.25);
  border-radius: 12px;
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text, #374151);
  overflow-wrap: break-word;
}

.obs-evidence-note-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy, #0e1e40);
}

.obs-evidence-note dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
}

.obs-evidence-note dt {
  font-weight: 700;
  color: var(--navy, #0e1e40);
}

.obs-evidence-note dd {
  margin: 0;
}

.obs-evidence-note a {
  color: var(--navy, #0e1e40);
  font-weight: 700;
  text-decoration: underline;
}

.obs-evidence-note a:focus-visible {
  outline: 3px solid rgba(215, 164, 10, 0.55);
  outline-offset: 2px;
}

/* Неповні метадані: явний стан замість правдоподібної порожнечі. */
.obs-evidence-note--incomplete {
  border: 1px dashed #b45309;
}

.obs-evidence-note-warning {
  margin: 0 0 10px;
  font-weight: 700;
  color: #b45309;
}

/* Явний перелік відсутніх полів (із result.missing) під попередженням. */
.obs-evidence-note-missing {
  margin: 0 0 10px;
  color: #b45309;
}

@media (max-width: 640px) {
  .obs-evidence-note dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .obs-evidence-note dd {
    margin-bottom: 8px;
  }
}

/* TASK-527: смуга дат усередині Evidence Note картки публікації зберігає
   власний вигляд (правило сітки нотатки не поширюється на неї). */
.obs-evidence-note .obs-freshness {
  display: flex;
  margin-top: 12px;
}

.obs-evidence-note .obs-freshness-item dt {
  color: var(--muted, #6b7280);
  font-weight: 600;
}

/* ── Методологічні обмеження і сигнал ≠ висновок ───────────────────────── */

.obs-limitations {
  background: var(--light, #f8f9fb);
  border: 1px solid var(--border, #e5e7eb);
  border-left: 3px solid var(--gold, #d7a40a);
  border-radius: 8px;
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.65;
}

.obs-limitations-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy, #0e1e40);
}

.obs-limitations-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

/* Порівняльне пояснення: моніторинговий сигнал проти перевіреного висновку. */
.obs-signal-vs-finding {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.obs-signal-vs-finding article {
  background: var(--white, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.6;
}

.obs-signal-vs-finding h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--navy, #0e1e40);
}

.obs-signal-vs-finding article[data-kind='finding'] {
  border: 2px solid var(--gold, #d7a40a);
}

@media (max-width: 640px) {
  .obs-signal-vs-finding {
    grid-template-columns: 1fr;
  }
}

/* ── Рух: лише прояснення, з повагою до reduced motion ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  .obs-card,
  .obs-action {
    transition: none;
  }

  .obs-card:hover {
    transform: none;
  }
}