/* ───────────────────────────────────────────────────────────────────
   Mnemosyne shared stylesheet — used by landing + all docs pages
   ─────────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }
body {
  background: linear-gradient(180deg, #0d0a07 0%, #1a1612 100%);
  color: #f5ecd9;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

.font-classical { letter-spacing: 0.05em; }
.text-glow { text-shadow: 0 0 30px rgba(184, 134, 11, 0.4); }

.card {
  background: rgba(42, 37, 32, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 134, 11, 0.2);
  transition: all 0.3s ease;
}
.card:hover {
  border-color: rgba(184, 134, 11, 0.5);
  background: rgba(42, 37, 32, 0.85);
}

.greek-divider {
  background: linear-gradient(90deg, transparent 0%, rgba(184, 134, 11, 0.5) 50%, transparent 100%);
  height: 1px;
}

.glyph {
  font-family: 'Cinzel', serif;
  color: #b8860b;
}

/* Mnemosyne brand glyph — double capital Lambda (ΛΛ).
   Used as the stylized initial letter of the "Mnemosyne" wordmark in
   nav, footer, breadcrumbs, and hero title. Inherits size from the
   parent so the ΛΛ reads as the first character of the word at every
   scale — just tinted gold and with tight tracking so the two Λ
   characters read as one M-shaped ligature. */
.brand-lambda {
  font-family: 'Cinzel', serif;
  color: #d4a04a;
  font-weight: 700;
  letter-spacing: -0.12em;
  /* Slight negative right-margin so the ΛΛ "ligature" sits flush against
     the following "nemosyne" rather than leaving a visible gap. */
  margin-right: 0.02em;
  text-shadow: 0 0 12px rgba(184, 134, 11, 0.3);
}

code {
  background: rgba(13, 10, 7, 0.6);
  padding: 0.125rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  color: #d4a04a;
}
pre code { padding: 0; background: transparent; color: inherit; }
pre {
  background: rgba(13, 10, 7, 0.8);
  border: 1px solid rgba(184, 134, 11, 0.2);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
}

.mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  border: 2px solid #b8860b;
  color: #b8860b;
  background: rgba(184, 134, 11, 0.1);
}

.layer-block {
  background: rgba(42, 37, 32, 0.5);
  border-left: 3px solid #b8860b;
  padding: 1rem 1.5rem;
  margin: 0.5rem 0;
}

.pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(184, 134, 11, 0.15);
  color: #d4a04a;
  border: 1px solid rgba(184, 134, 11, 0.3);
}
.pill-warn {
  background: rgba(220, 100, 50, 0.15);
  color: #e89a6f;
  border-color: rgba(220, 100, 50, 0.3);
}
.pill-good {
  background: rgba(100, 180, 100, 0.15);
  color: #8fd18f;
  border-color: rgba(100, 180, 100, 0.3);
}

nav a:hover { color: #b8860b; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid rgba(184, 134, 11, 0.15); }
th { color: #d4a04a; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
td { font-size: 0.92rem; }
details summary { cursor: pointer; padding: 0.5rem 0; color: #d4a04a; font-weight: 500; }
details summary:hover { color: #b8860b; }

/* Branded mentions */
.stoachain {
  color: #d4a04a;
  font-weight: 700;
}
.stoachain::after {
  content: '™';
  font-size: 0.65em;
  vertical-align: super;
  margin-left: 1px;
  color: #d4a04a;
}
.ouronet {
  color: #5b8ec2;
  font-weight: 700;
}
.ouronet::after {
  content: '™';
  font-size: 0.65em;
  vertical-align: super;
  margin-left: 1px;
  color: #5b8ec2;
}

/* Sidebar info block */
.sidebar {
  background: rgba(184, 134, 11, 0.08);
  border-left: 4px solid #b8860b;
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
}
.sidebar-title {
  color: #d4a04a;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

/* OS key combo display */
kbd {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  background: rgba(13, 10, 7, 0.8);
  border: 1px solid rgba(184, 134, 11, 0.4);
  border-radius: 0.25rem;
  color: #d4a04a;
  margin: 0 0.1rem;
}

/* Hero Codex Identity display with braces (landing page) */
.identity-display {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
}
.identity-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 0.5rem;
}
.braces-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: start;
}
.identity-half {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
}
.id-prefix {
  font-family: 'Cinzel', serif;
  font-size: 2.6rem;
  color: #d4a04a;
  font-weight: 700;
  text-shadow: 0 0 25px rgba(184, 134, 11, 0.5);
  line-height: 1;
}
@media (min-width: 768px) {
  .id-prefix { font-size: 3.2rem; }
}
.id-payload {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: #d4a04a;
  letter-spacing: 0.04em;
  margin-left: 0.15rem;
  line-height: 1.2;
  text-shadow: 0 0 8px rgba(184, 134, 11, 0.4);
}
@media (min-width: 768px) {
  .id-payload { font-size: 1.3rem; }
}

/* Shared address-display style — used wherever a Codex Identity (₱./Π.)
   or Ouronet Account (Ѻ./Σ.) address is rendered as content. */
.address-display {
  font-family: 'Cinzel', serif;
  color: #d4a04a;
  text-shadow: 0 0 8px rgba(184, 134, 11, 0.4);
  letter-spacing: 0.03em;
  word-break: break-all;
  background: rgba(13, 10, 7, 0.6);
  border: 1px solid rgba(184, 134, 11, 0.3);
  border-radius: 0.5rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.address-display .prefix {
  font-weight: 700;
  font-size: 1.1em;
  color: #f5ecd9;
}
/* The ':' between Standard and Smart halves of a CodexID — visually
   matches the fat gold dots in the prefixes (₱. and Π.) so the whole
   identifier reads cohesively. Big, gold, glowing. */
.halves-separator {
  font-family: 'Cinzel', serif;
  font-size: 2.6rem;
  color: #d4a04a;
  font-weight: 700;
  line-height: 1;
  padding: 0 0.3rem;
  text-shadow: 0 0 25px rgba(184, 134, 11, 0.5);
}
@media (min-width: 768px) {
  .halves-separator { font-size: 3.2rem; }
}
.brace-section { text-align: center; }
.brace-u {
  border-left: 2px solid #b8860b;
  border-right: 2px solid #b8860b;
  border-bottom: 2px solid #b8860b;
  border-radius: 0 0 14px 14px;
  height: 12px;
  margin: 0 8px 0.5rem 8px;
}
.brace-label {
  font-size: 0.78rem;
  color: rgba(245, 236, 217, 0.7);
  font-family: 'Inter', sans-serif;
}
.brace-sublabel {
  font-size: 0.7rem;
  color: rgba(245, 236, 217, 0.4);
  font-family: 'Inter', sans-serif;
  display: block;
  margin-top: 0.15rem;
}

/* Mode cards: equal-height layout so tables align */
.mode-card { display: flex; flex-direction: column; }
.mode-card-description { min-height: 7.5rem; }
.mode-card-table { margin-top: auto; }

/* Docs-specific: parameter table */
.param-table th { color: #d4a04a; width: 30%; vertical-align: top; }
.param-table td { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; word-break: break-all; }

/* Docs-specific: charset matrix preview */
.charset-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 1px;
  background: rgba(184, 134, 11, 0.15);
  padding: 1px;
  border-radius: 0.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  max-width: 32rem;
  margin: 1rem auto;
}
.charset-grid > span {
  background: rgba(13, 10, 7, 0.85);
  text-align: center;
  padding: 0.4rem 0.2rem;
  color: #d4a04a;
  user-select: text;
}

/* Docs page header */
.doc-header {
  border-bottom: 1px solid rgba(184, 134, 11, 0.2);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}
.doc-breadcrumb {
  font-size: 0.85rem;
  color: rgba(245, 236, 217, 0.5);
  margin-bottom: 0.5rem;
}
.doc-breadcrumb a { color: rgba(245, 236, 217, 0.7); }
.doc-breadcrumb a:hover { color: #b8860b; }