.compendium-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: calc(100vh - 76px);
}
.compendium-sidebar {
  border-right: 1px solid var(--line);
  padding: 32px 24px;
  position: sticky;
  top: 76px;
  align-self: start;
  height: calc(100vh - 76px);
  overflow-y: auto;
}
.compendium-sidebar .cs-label {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ghost); margin-bottom: 14px; display: block;
}
.compendium-sidebar a {
  display: block;
  padding: 9px 10px;
  border-radius: 3px;
  font-size: 0.88rem;
  color: var(--ink-dim);
  margin-bottom: 2px;
}
.compendium-sidebar a:hover { background: var(--bg-panel); color: var(--ghost); }
.compendium-sidebar a.active { background: var(--bg-panel); color: var(--ghost); font-weight: 600; }
.compendium-sidebar .cs-group {
  display: block; margin: 18px 0 6px; padding: 0 10px;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.compendium-sidebar .cs-group:first-of-type { margin-top: 8px; }

.compendium-main { padding: 48px 56px 100px; max-width: 860px; }
.compendium-main .eyebrow { margin-bottom: 14px; }
.compendium-main h1 { font-size: 2rem; margin-bottom: 6px; }
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 20px; margin: 14px 0 6px;
}
.status-badge.dev { background: rgba(181,83,60,0.15); color: var(--warn); border: 1px solid rgba(181,83,60,0.35); }
.status-badge.live { background: rgba(122,157,111,0.15); color: var(--good); border: 1px solid rgba(122,157,111,0.35); }

.compendium-main .lede {
  font-family: var(--font-body); font-size: 1.2rem; color: var(--ink-dim);
  margin: 18px 0 36px; line-height: 1.55; max-width: 68ch;
}
.compendium-main h2 {
  font-size: 1.25rem; margin: 44px 0 16px; padding-top: 4px;
}
.compendium-main h2:first-of-type { margin-top: 0; }
.compendium-main p {
  font-size: 0.98rem; color: var(--ink-dim); line-height: 1.7; margin: 0 0 16px; max-width: 68ch;
}
.compendium-main ul, .compendium-main ol {
  color: var(--ink-dim); line-height: 1.7; padding-left: 22px; margin: 0 0 20px; max-width: 68ch;
}
.compendium-main li { margin-bottom: 8px; }
.compendium-main strong { color: var(--ink-bone); }

.info-box {
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ghost-dim);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 24px 0;
  font-size: 0.92rem;
  color: var(--ink-dim);
  max-width: 68ch;
}
.info-box.tip { border-left-color: var(--good); }
.info-box p:last-child { margin-bottom: 0; }

/* Skill/rarity list rows (Trade Skills, Loot System) */
.skill-search {
  width: 100%; max-width: 420px;
  background: var(--bg-inset); border: 1px solid var(--line-strong);
  color: var(--ink-bone); padding: 11px 14px; border-radius: var(--radius);
  font-family: var(--font-ui); font-size: 0.9rem; margin-bottom: 24px;
}
.skill-search:focus { outline: none; border-color: var(--ghost); }
.skill-row {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.skill-row:last-child { border-bottom: none; }
.skill-row h3 {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.98rem;
  color: var(--ghost); margin: 0 0 6px; letter-spacing: 0.02em; text-transform: uppercase;
}
.skill-row p { margin: 0; font-size: 0.92rem; }

.rarity-list { display: flex; flex-direction: column; gap: 2px; margin: 20px 0 28px; max-width: 68ch; }
.rarity-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 3px; font-size: 0.9rem; color: var(--ink-bone);
}
.rarity-row .n { font-family: var(--font-mono); color: var(--ink-faint); font-size: 0.78rem; width: 20px; }

/* System grid on the compendium landing page */
.system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.system-card {
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 22px;
  transition: border-color 0.15s, transform 0.15s;
}
.system-card:hover { border-color: var(--ghost-dim); transform: translateY(-2px); }
.system-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 8px; font-family: var(--font-ui); }
.system-card p { font-size: 0.85rem; color: var(--ink-dim); margin: 0; line-height: 1.5; }

@media (max-width: 900px) {
  .compendium-shell { grid-template-columns: 1fr; }
  .compendium-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .compendium-main { padding: 40px 24px 80px; }
}

/* Dying Age inner Compendium; the Boss Compendium remains exempt. */
body:not(.boss-compendium) .compendium-shell{background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 34%)}
body:not(.boss-compendium) .compendium-sidebar{background:linear-gradient(180deg,rgba(13,16,18,.97),rgba(8,10,12,.93));border-color:rgba(189,145,79,.2);box-shadow:inset -1px 0 rgba(255,255,255,.02)}
body:not(.boss-compendium) .compendium-sidebar .cs-label{color:#a77a3d;font-size:.6rem;letter-spacing:.19em}
body:not(.boss-compendium) .compendium-sidebar .cs-group{color:#6b6459;border-top:1px solid rgba(189,145,79,.14);padding-top:10px}
body:not(.boss-compendium) .compendium-sidebar .cs-group:first-of-type{border-top:none;padding-top:0}
body:not(.boss-compendium) .compendium-sidebar a{border-left:1px solid transparent;border-radius:0;color:#8e8c86;transition:color .18s,background .18s,padding .18s}
body:not(.boss-compendium) .compendium-sidebar a:hover,body:not(.boss-compendium) .compendium-sidebar a.active{padding-left:15px;border-left-color:#8b5c2e;background:linear-gradient(90deg,rgba(189,145,79,.11),transparent);color:#d0a665}
body:not(.boss-compendium) .compendium-main{max-width:980px;padding-top:64px;background:linear-gradient(145deg,rgba(255,255,255,.018),transparent 38%),rgba(11,14,16,.76)}
body:not(.boss-compendium) .compendium-main h1{font-size:clamp(2.3rem,5vw,4rem);line-height:1.02;letter-spacing:-.015em}
body:not(.boss-compendium) .compendium-main h2{padding:0 0 12px;border-bottom:1px solid rgba(189,145,79,.2);color:#ddd5c8}
body:not(.boss-compendium) .compendium-main h2::before{content:'✦';margin-right:.75em;color:#8e5d2e;font-size:.66em;vertical-align:middle}
body:not(.boss-compendium) .compendium-main .lede{color:#aaa9a3;font-size:1.28rem}
body:not(.boss-compendium) .info-box,body:not(.boss-compendium) .system-card,body:not(.boss-compendium) .rarity-row{border-radius:1px;border-color:rgba(189,145,79,.23);background:linear-gradient(135deg,rgba(189,145,79,.055),transparent 45%),rgba(20,24,27,.88);box-shadow:inset 0 1px rgba(255,255,255,.025)}
body:not(.boss-compendium) .system-card:hover{border-color:#8f6536;box-shadow:0 14px 28px rgba(0,0,0,.25);transform:translateY(-4px)}
body:not(.boss-compendium) .skill-search{border-radius:1px;background:#0a0d0f;border-color:rgba(126,152,164,.33)}