/* Phase 12 — shared styling for the realism-data pages. */

.realism-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  color: var(--ink, #cfd6cf);
  line-height: 1.55;
}
.realism-page h1 {
  font-size: 1.9rem;
  letter-spacing: 0.18em;
  color: var(--accent, #f2b04e);
  margin: 0 0 8px;
  font-weight: 500;
  text-transform: uppercase;
}
.realism-page .eyebrow {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  color: var(--ink-faint, #8a988a);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.realism-page .lede {
  color: var(--ink, #cfd6cf);
  max-width: 64ch;
  margin: 0 0 32px;
  font-size: 1.0rem;
}

/* Card grid for factions / cameras / cryo etc */
.r-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.r-card {
  border: 1px solid rgba(242,176,78,0.18);
  background: rgba(20,24,18,0.55);
  border-radius: 6px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.r-card h3 {
  margin: 0 0 4px;
  color: var(--accent, #f2b04e);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.r-card .r-meta {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.72rem;
  color: var(--ink-faint, #8a988a);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.r-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink, #cfd6cf);
}
.r-card .r-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--ink-faint, #8a988a);
}

/* Tier badge — Phase 11 10-tier scale */
.r-tier {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.70rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid currentColor;
}
.r-tier-1  { color: #8a988a; }
.r-tier-2  { color: #a4b094; }
.r-tier-3  { color: #b6c19a; }
.r-tier-4  { color: #c2b280; }
.r-tier-5  { color: #d4a76a; }
.r-tier-6  { color: #e0a55a; }
.r-tier-7  { color: #f2a050; }
.r-tier-8  { color: #f08846; color: #f08846; text-shadow: 0 0 4px rgba(240,136,70,0.2); }
.r-tier-9  { color: #ed5a3a; text-shadow: 0 0 6px rgba(237,90,58,0.35); }
.r-tier-10 { color: #ffb84a; text-shadow: 0 0 10px rgba(255,184,74,0.55); border-color: #ffb84a; }

/* Severity bar for fossil-record entries */
.r-severity {
  width: 4px;
  border-radius: 2px;
  margin-right: 12px;
}
.r-severity-trivia   { background: #4a5a4a; }
.r-severity-minor    { background: #6e8a6e; }
.r-severity-notable  { background: #c2a35e; }
.r-severity-major    { background: #ed8a3a; }
.r-severity-epochal  { background: #ed5a3a; box-shadow: 0 0 12px rgba(237,90,58,0.55); }

.r-fossil-row {
  display: flex;
  align-items: stretch;
  margin-bottom: 14px;
  border: 1px solid rgba(242,176,78,0.10);
  background: rgba(20,24,18,0.40);
  border-radius: 4px;
  overflow: hidden;
}
.r-fossil-row .r-fossil-body {
  padding: 12px 16px;
  flex: 1;
}
.r-fossil-row .r-fossil-meta {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.68rem;
  color: var(--ink-faint, #8a988a);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.r-fossil-row h3 {
  margin: 0 0 6px;
  color: var(--accent, #f2b04e);
  font-size: 1.0rem;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Spawn-state pill */
.r-spawn-state {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.70rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.r-spawn-open       { color: #6abf40; border: 1px solid #6abf40; }
.r-spawn-soft_capped { color: #c2a35e; border: 1px solid #c2a35e; }
.r-spawn-closed     { color: #ed5a3a; border: 1px solid #ed5a3a; }

/* Holiday banner */
.r-holiday-banner {
  padding: 14px 24px;
  background: linear-gradient(90deg, rgba(194,163,94,0.10), transparent);
  border-left: 3px solid var(--accent, #c2a35e);
  margin: 0 0 24px;
  font-size: 0.95rem;
  color: var(--ink, #cfd6cf);
}
.r-holiday-banner strong {
  color: var(--accent, #f2b04e);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* Hub navigation */
.r-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.r-hub-tile {
  display: block;
  padding: 22px 20px;
  border: 1px solid rgba(242,176,78,0.20);
  background: rgba(20,24,18,0.40);
  border-radius: 6px;
  color: var(--ink, #d2d8d2);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.r-hub-tile:hover {
  border-color: var(--accent, #f2b04e);
  background: rgba(30,32,24,0.55);
}
.r-hub-tile h2 {
  margin: 0 0 8px;
  color: var(--accent, #f2b04e);
  font-size: 1.05rem;
  letter-spacing: 0.10em;
  font-weight: 500;
  text-transform: uppercase;
}
.r-hub-tile p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-faint, #8a988a);
}