/* Gamification v2 "Your Codex" art system (ADR-027).
   ONE grammar: every spell/gear/emblem renders as an engraved gold glyph inside a shared medallion
   ring on a night ground. Markup:
     <span class="medallion [emblem] [is-locked]" data-biome="the-grove">
       <svg viewBox="0 0 512 512" aria-hidden="true">
         <use href="#medallion-ring" class="medallion__ring"></use>
         <use href="#spell-x" class="medallion__glyph"></use>
       </svg>
     </span>
   The sprite (frontend/assets/icons.svg) is currentColor-only; colour, the navy ground, the locked
   desaturation, and the biome accent all live here. Locked state is ALSO stated in text elsewhere —
   never colour alone. */

.medallion {
  --medallion-size: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--medallion-size);
  height: var(--medallion-size);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, var(--bg-raised) 0%, var(--bg) 78%);
  box-shadow:
    inset 0 0 0 1px rgba(201, 164, 76, 0.18),
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.45);
  flex: none;
}

.medallion > svg {
  width: 88%;
  height: 88%;
  display: block;
  overflow: visible;
}

/* The ring sits behind the glyph in the softer engraved gold; the glyph is the antique gold. */
.medallion__ring {
  color: var(--gold-soft);
  opacity: 0.68;
}
.medallion__glyph {
  color: var(--gold);
}

/* Emblems carry a biome accent on the glyph; the ring stays gold so the grammar reads as one set. */
.medallion.emblem[data-biome="the-grove"] .medallion__glyph { color: var(--biome-the-grove); }
.medallion.emblem[data-biome="the-marble-caverns"] .medallion__glyph { color: var(--biome-the-marble-caverns); }
.medallion.emblem[data-biome="the-forge"] .medallion__glyph { color: var(--biome-the-forge); }
.medallion.emblem[data-biome="the-archive"] .medallion__glyph { color: var(--biome-the-archive); }
.medallion.emblem[data-biome="the-spires"] .medallion__glyph { color: var(--biome-the-spires); }
.medallion.emblem[data-biome="the-aether"] .medallion__glyph { color: var(--biome-the-aether); }
.medallion.emblem[data-biome="the-observatory"] .medallion__glyph { color: var(--biome-the-observatory); }
.medallion.emblem[data-biome="the-summit"] .medallion__glyph { color: var(--biome-the-summit); }

/* Locked: desaturate + dim the whole medallion. The unlock state is always ALSO stated in text. */
.medallion.is-locked {
  filter: grayscale(1);
  opacity: 0.42;
}
.medallion.is-locked .medallion__glyph {
  color: var(--ink-dim);
}

/* The world-map biome watermark reuses the emblem glyph; a filled emblem needs a touch more
   presence than the old line sigil, but stays a faint accent wash behind the card text. */
.biome-sigil--emblem { opacity: 0.14; }

/* The footer credit for the CC BY 3.0 icon set (mandatory attribution, ADR-027). */
.art-credit {
  padding: var(--space-3) 1.5rem;
  color: var(--ink-dim);
  font-size: 0.78rem;
  text-align: center;
  border-top: 1px solid rgba(201, 164, 76, 0.14);
}
.art-credit a { color: var(--gold-soft); }

/* Size helpers used by the contact sheet + Codex rails. */
.medallion.is-24 { --medallion-size: 24px; }
.medallion.is-48 { --medallion-size: 48px; }
.medallion.is-64 { --medallion-size: 64px; }
.medallion.is-96 { --medallion-size: 96px; }

/* ================================================================================================
   "Your Codex" view (ADR-027): the paper-doll avatar, the gear rail, and the biome-grouped
   spellbook. Reuses .dash-panel chrome; every locked/unlocked state is ALSO stated in text.
   ============================================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The Codex reuses the ledger's header row, but .dash-head chrome is scoped to .dashboard in
   styles.css — re-apply it here so the back button sits beside the heading (not stacked above it). */
.codex .dash-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.codex .dash-head h1 { margin: 0; }

.codex-layout {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .codex-layout {
    grid-template-columns: minmax(220px, 300px) 1fr;
    grid-template-areas:
      "avatar gear"
      "avatar spellbook";
    align-items: start;
  }
  .codex-avatar-panel { grid-area: avatar; }
  .codex-gear-panel { grid-area: gear; }
  .codex-spellbook-panel { grid-area: spellbook; }
}

/* --- Avatar paper-doll: base always shown; codex.js reveals the earned layers. --- */
.avatar-layer { display: none; }
.avatar-layer.is-on { display: inline; }

.codex-avatar-panel { text-align: center; }
.codex-avatar {
  min-height: 300px; /* reserve the doll's box — CLS 0 while the SVG fetches */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.avatar-doll {
  color: var(--gold);
  width: clamp(140px, 40vw, 184px);
  height: auto;
  display: block;
  margin: var(--space-1) auto;
}
.codex-summary { margin: var(--space-2) 0 0; color: var(--ink-dim); font-size: 0.9rem; }
.codex-tier { color: var(--gold-soft); font-family: var(--serif); font-size: 1.1rem; }
.codex-empty-note {
  margin: var(--space-2) 0 0;
  color: var(--ink-dim);
  font-size: 0.85rem;
  font-style: italic;
}

/* --- Item cards shared by the gear rail + the spellbook. --- */
.codex-rail,
.codex-spell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 560px) {
  .codex-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.codex-item {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2);
  border: 1px solid rgba(201, 164, 76, 0.14);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.codex-item.is-locked { opacity: 0.9; }
.codex-item-body { min-width: 0; }
.codex-item-name { margin: 0; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.codex-item-flavour { margin: 0.15rem 0 0; color: var(--ink-dim); font-size: 0.85rem; }
.codex-item-state { margin: 0.4rem 0 0; font-size: 0.78rem; letter-spacing: 0.02em; }
.codex-item-state.is-on { color: var(--pass); }
.codex-item-state.is-off { color: var(--ink-dim); }

/* Per-tag requirement chips: the ✓/○ mark is aria-hidden — the true state is the .sr-only text. */
.codex-req-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
}
.codex-req { display: inline-flex; align-items: baseline; gap: 0.3rem; font-size: 0.8rem; color: var(--ink-dim); }
.codex-req.is-met { color: var(--ink); }
.codex-req-mark { color: var(--ink-dim); }
.codex-req.is-met .codex-req-mark { color: var(--pass); }

/* "Your Codex" is the third topbar action; on a 320px row let the topbar + its actions wrap to a
   second line rather than overflow horizontally (web rule: the page body must never scroll sideways). */
.topbar { flex-wrap: wrap; gap: var(--space-1); }
.topbar-actions { flex-wrap: wrap; }

/* --- Spellbook biome groups: each headed by its accented emblem. --- */
.codex-biome-group { margin-top: var(--space-3); }
.codex-biome-group:first-child { margin-top: 0; }
.codex-biome-h {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
}