/* codex.css — the lemma Codex collection view. Themes entirely through tokens.css variables, so it
 * re-themes for free across warm-dark, cool-dark, and light. No fixed colors. */

#view-codex { overflow: auto; }
/* the Codex has its own regions; the map's filter chips and HUD do not apply to it */
#app.codex-active #filters,
#app.codex-active #hud { display: none; }

.codex {
  max-width: var(--maxw, 1100px);
  margin: 0 auto;
  padding: 24px 20px 64px;
  color: var(--text);
}

/* ── intro ─────────────────────────────────────────────────────────── */
.codex-intro { margin-bottom: 22px; }
.codex-h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 6px;
  color: var(--text);
}
.codex-lede {
  margin: 0 0 12px;
  max-width: 60ch;
  color: var(--text-dim);
  line-height: 1.5;
}
.codex-tally {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
}
.codex-tally-gem { width: 18px; height: 18px; color: var(--muted); }
.codex-tally-gem.is-lit { color: var(--gold); }
.codex-tally-num { color: var(--text); }

/* ── region ────────────────────────────────────────────────────────── */
.codex-region {
  margin: 26px 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.codex-region:first-of-type { border-top: 0; padding-top: 4px; }
.codex-region-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.codex-region-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0;
  color: var(--text);
}
.codex-region-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.codex-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}
.codex-stat-gem { width: 13px; height: 13px; color: var(--gold); }
.codex-charting-note {
  margin: 0;
  color: var(--text-dim);
  font-style: italic;
}
.codex-region.is-charting { opacity: 0.78; }

/* ── insight cards ─────────────────────────────────────────────────── */
.codex-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.codex-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--surface-1);
  min-height: 96px;
}
.codex-card-head { display: flex; align-items: center; gap: 9px; }
.codex-gem { width: 20px; height: 20px; flex: 0 0 auto; }
.codex-gem.is-lit { color: var(--gold); }
.codex-gem.is-shadow { color: var(--muted); opacity: 0.5; }
.codex-gem.is-faint { color: var(--faint); opacity: 0.6; }
.codex-card-title {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}
.codex-card-aha {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.codex-card-teaser {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--muted);
}
.codex-card-foot { margin-top: auto; }
.codex-card-when {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.codex-card-hunt {
  align-self: flex-start;
  margin-top: 2px;
  padding: 4px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.codex-card-hunt:hover { border-color: var(--accent); color: var(--accent); }

/* found cards lit with a warm edge; silhouettes dashed and dim; coming cards faintest */
.codex-card.is-found {
  border-color: var(--gold-line);
  background: var(--gold-soft);
}
.codex-card.is-silhouette {
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.codex-card.is-coming {
  border-style: dashed;
  background: transparent;
  opacity: 0.66;
}

/* a found card eases in (the permanent home of the aha); disabled for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .codex-card.is-found { animation: codex-pop 420ms ease both; }
}
@keyframes codex-pop {
  from { transform: scale(0.97); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── mastery tier ──────────────────────────────────────────────────── */
.codex-mastery { margin-top: 14px; }
.codex-mastery-summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  padding: 6px 2px;
  list-style: none;
}
.codex-mastery-summary::-webkit-details-marker { display: none; }
.codex-mastery-summary::before { content: "▸ "; color: var(--muted); }
.codex-mastery[open] > .codex-mastery-summary::before { content: "▾ "; }
.codex-mastery-summary:hover { color: var(--text); }
.codex-mastery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 5px;
  margin-top: 8px;
}
.codex-node {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 7px);
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--muted);
  background: var(--surface-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-node.is-studied {
  color: var(--text);
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
}

.codex-empty { color: var(--text-dim); padding: 24px; }

/* ── mobile (RPG) ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .codex { padding: 16px 14px 80px; }
  .codex-card-grid { grid-template-columns: 1fr; }
  .codex-mastery-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}