@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --bg-deep: #020409;
  --bg: #060a13;
  --panel: #0a121e;
  --line: rgba(0, 255, 156, 0.12);
  --line-strong: rgba(0, 255, 156, 0.32);
  --accent: #00ff9c;
  --cyan: #7fdbff;
  --amber: #f5c542;
  --violet: #bb6bd9;
  --text: #c8d4e6;
  --text-soft: #8896aa;
  --text-dim: #5a6678;
}

html, body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  min-height: 100vh;
}

.font-display {
  font-family: var(--font-display), "Fraunces", "Georgia", "Times New Roman", serif;
  font-feature-settings: "ss01", "ss02";
}

body {
  background-image:
    radial-gradient(ellipse 60% 50% at 92% 8%, rgba(0, 255, 156, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 8% 95%, rgba(127, 219, 255, 0.04) 0%, transparent 70%),
    linear-gradient(to right, rgba(0, 255, 156, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 255, 156, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px;
  background-attachment: fixed;
}

::selection {
  background: rgba(0, 255, 156, 0.22);
  color: var(--accent);
}

/* Entity highlights inline in reader */
.entity-link {
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed rgba(127, 219, 255, 0.45);
  color: var(--cyan);
  transition: all 0.15s ease;
  padding: 0 1px;
}
.entity-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 8px rgba(0, 255, 156, 0.4);
}

.entity-link[data-class="person"]       { color: #ff6ec7; border-bottom-color: rgba(255, 110, 199, 0.35); }
.entity-link[data-class="organization"] { color: #ff8a4d; border-bottom-color: rgba(255, 138, 77, 0.35); }
.entity-link[data-class="location"]     { color: #3fde6a; border-bottom-color: rgba(63, 222, 106, 0.35); }
.entity-link[data-class="event"]        { color: #ffa500; border-bottom-color: rgba(255, 165, 0, 0.35); }
.entity-link[data-class="uap_object"]   { color: #ff3344; border-bottom-color: rgba(255, 51, 68, 0.45); font-weight: 600; }
.entity-link[data-class="vehicle"]      { color: #5b9bd5; }
.entity-link[data-class="operation"]    { color: #9b5de5; }
.entity-link[data-class="concept"]      { color: #06d6a0; }

/* Reader content */
.reader-content {
  font-family: ui-serif, Georgia, "Iowan Old Style", "Apple Garamond", serif;
  line-height: 1.65;
  font-size: 17px;
  max-width: 72ch;
}
.reader-content pre {
  font-family: var(--font-mono), "JetBrains Mono", monospace;
  white-space: pre-wrap;
  background: #060a13;
  border-left: 2px solid var(--line-strong);
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
}

/* Tables rendered from CSV */
.reader-content table {
  font-family: var(--font-mono), "JetBrains Mono", monospace;
  font-size: 0.85em;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line-strong);
  margin: 1.5em 0;
  width: 100%;
}
.reader-content th {
  background: rgba(0, 255, 156, 0.08);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78em;
  border-bottom: 1px solid var(--accent);
  padding: 6px 8px;
  text-align: left;
}
.reader-content td {
  border-bottom: 1px solid var(--line);
  padding: 4px 8px;
}

/* Crop figures inline in text */
.reader-content figure {
  margin: 1.5em 0;
  border: 1px solid var(--line-strong);
  padding: 6px;
  background: var(--panel);
  border-radius: 3px;
}
.reader-content figure img {
  max-width: 100%;
  display: block;
}
.reader-content figcaption {
  font-family: var(--font-mono), monospace;
  font-size: 0.72em;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 4px 2px;
}

/* Classified banner accent */
.classified-banner {
  font-family: var(--font-mono), monospace;
  font-size: 0.65em;
  color: var(--text-dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Markdown body — semantic rendering with wiki-link colors per entity class */
.markdown-body {
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
}
.markdown-body p { margin: 0.8em 0; }
.markdown-body ul, .markdown-body ol { margin: 0.6em 0; padding-left: 1.5em; }
.markdown-body li { margin: 0.2em 0; }
.markdown-body strong { color: #ffffff; font-weight: 600; }
.markdown-body hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }

.markdown-body .md-h1 {
  font-family: var(--font-mono), monospace;
  color: var(--accent);
  font-size: 1.8em;
  margin: 1em 0 0.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--line-strong);
}
.markdown-body .md-h1::before { content: "▍ "; }
.markdown-body .md-h2 {
  font-family: var(--font-mono), monospace;
  color: var(--cyan);
  font-size: 1.35em;
  margin: 1.4em 0 0.5em;
  letter-spacing: 0.02em;
}
.markdown-body .md-h2::before { content: "▎ "; }
.markdown-body .md-h3 {
  font-family: var(--font-mono), monospace;
  color: var(--amber);
  font-size: 1.1em;
  margin: 1.2em 0 0.4em;
  letter-spacing: 0.02em;
}
.markdown-body .md-h3::before { content: "▏ "; }
.markdown-body .md-h4 {
  font-family: var(--font-mono), monospace;
  color: #ffb86b;
  font-size: 1em;
  margin: 1em 0 0.4em;
}

.markdown-body .md-quote {
  border-left: 3px solid var(--accent);
  padding: 0.4em 1em;
  margin: 1em 0;
  background: linear-gradient(180deg, rgba(0, 255, 156, 0.04) 0%, transparent 100%);
  color: var(--text);
}

.markdown-body .md-inline-code {
  font-family: var(--font-mono), monospace;
  font-size: 0.88em;
  background: rgba(0, 255, 156, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  color: #b8e8ff;
}

.markdown-body pre {
  background: #060a13;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1em 0;
}

.markdown-body .md-table-wrap {
  overflow-x: auto;
  margin: 1.2em 0;
}
.markdown-body .md-table-wrap table {
  font-family: var(--font-mono), monospace;
  font-size: 0.85em;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line-strong);
  width: 100%;
}
.markdown-body .md-table-wrap th {
  background: rgba(0, 255, 156, 0.08);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78em;
  border-bottom: 1px solid var(--accent);
  padding: 6px 8px;
  text-align: left;
}
.markdown-body .md-table-wrap td {
  border-bottom: 1px solid var(--line);
  padding: 5px 8px;
  vertical-align: top;
}

/* Wiki-link colors per entity class */
.markdown-body .wiki-link {
  text-decoration: none;
  border-bottom: 1px dashed rgba(127, 219, 255, 0.45);
  color: var(--cyan);
  transition: all 0.15s ease;
  padding: 0 1px;
}
.markdown-body .wiki-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 8px rgba(0, 255, 156, 0.4);
}
.markdown-body .wiki-link--person       { color: #ff6ec7; border-bottom-color: rgba(255, 110, 199, 0.35); }
.markdown-body .wiki-link--org          { color: #ff8a4d; border-bottom-color: rgba(255, 138, 77, 0.35); }
.markdown-body .wiki-link--loc          { color: #3fde6a; border-bottom-color: rgba(63, 222, 106, 0.35); }
.markdown-body .wiki-link--event        { color: #ffa500; border-bottom-color: rgba(255, 165, 0, 0.35); }
.markdown-body .wiki-link--uap          { color: #ff3344; border-bottom-color: rgba(255, 51, 68, 0.45); font-weight: 600; }
.markdown-body .wiki-link--vehicle      { color: #5b9bd5; }
.markdown-body .wiki-link--operation    { color: #9b5de5; }
.markdown-body .wiki-link--concept      { color: #06d6a0; }
.markdown-body .wiki-link--doc          { color: #f5c542; border-bottom-color: rgba(245, 197, 66, 0.35); }