/* ═══════════════════════════════════════════════════════════════════
   GUARDIANS · THE SYSTEM (system.css) — deep reference page layer.
   Additive only; portal.css is LAW. Twilight chrome: this page IS the
   portal's law library, not an artifact — parchment stays with the
   lessons and the Atlas.
   ═══════════════════════════════════════════════════════════════════ */

/* Quick index chips */
.sys-index { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 980px; margin: 0 auto; }
.sys-index a {
  font-family: var(--f-ui); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: var(--arc-hi); border: 1px solid var(--arc-line); border-radius: 999px;
  padding: 9px 18px; transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.sys-index a:hover { border-color: var(--gold-soft); color: var(--gold); box-shadow: 0 0 16px rgba(255, 207, 136, 0.18); }

/* Reference sections */
.sysref { max-width: 940px; margin: 0 auto; }
.sysref p, .sysref li {
  font-family: var(--f-arc); font-size: 1.02rem; line-height: 1.7; color: #c9bfdd;
}
.sysref p b, .sysref li b { color: #f0eaf8; font-family: var(--f-ui); font-weight: 600; letter-spacing: 0.02em; }
.sysref ul { margin: 0 0 14px; padding-left: 20px; }
.sysref .formula {
  display: block; font-family: var(--f-ui); font-weight: 700; letter-spacing: 0.03em;
  color: #ffe3ae; background: rgba(255, 207, 136, 0.05);
  border: 1px dashed rgba(255, 207, 136, 0.35); border-radius: 6px;
  padding: 11px 16px; margin: 12px 0 14px;
}
.sysref table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 0.95rem; }
.sysref th, .sysref td { border: 1px solid rgba(183, 154, 224, 0.22); padding: 7px 12px; text-align: left; color: #c9bfdd; }
.sysref th { background: rgba(183, 154, 224, 0.08); color: #e9e0f4; font-family: var(--f-ui); letter-spacing: 0.06em; }
.sysref .cite {
  font-family: var(--f-arc); font-style: italic; font-size: 0.85rem; color: #8d82a8;
  border-top: 1px solid rgba(183, 154, 224, 0.18); padding-top: 8px; margin-top: 16px;
}
.sysref .lesson-door {
  display: inline-block; margin: 4px 0 0; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  color: var(--gold); border-bottom: 1px solid var(--gold-soft);
}
.sysref .lesson-door:hover { text-shadow: 0 0 12px rgba(255, 207, 136, 0.5); }

/* Backlash strips (the d12 tables, teased) */
.sysref .strip { font-family: var(--f-arc); font-style: italic; color: #ab9fc4; font-size: 0.95rem; }


/* ═══ THE LAW SHELF ═════════════════════════════════════════════════
   Ten sealed plaques instead of a scroll of ten thousand words. Each
   domain wears its accent; teal appears exactly once — Technomancy,
   where the tech thread is demanded by its own law. */
.law-shelf { max-width: 940px; margin: 0 auto; display: grid; gap: 14px; }
.law-plaque {
  --lp: var(--arc-hi);
  scroll-margin-top: 90px;
  border: 1px solid rgba(183, 154, 224, 0.22);
  border-left: 3px solid var(--lp);
  border-radius: 12px; overflow: hidden;
  background: rgba(16, 13, 30, 0.72);
}
.law-plaque summary {
  display: flex; align-items: center; gap: 18px;
  cursor: pointer; list-style: none; padding: 18px 22px;
  transition: background 0.25s ease;
}
.law-plaque summary::-webkit-details-marker { display: none; }
.law-plaque summary:hover { background: rgba(183, 154, 224, 0.06); }
.lp-seal {
  flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--lp); border-radius: 50%;
  font-family: var(--f-arc); font-size: 1.05rem; color: var(--lp);
  transition: box-shadow 0.25s ease;
}
.law-plaque summary:hover .lp-seal { box-shadow: 0 0 16px color-mix(in srgb, var(--lp) 45%, transparent); }
.lp-title { flex: 1 1 auto; min-width: 0; }
.lp-title h2 {
  margin: 0; font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: 0.08em; color: #f0eaf8;
}
.lp-title em {
  display: block; margin-top: 3px; font-family: var(--f-arc);
  font-style: italic; font-size: 0.9rem; color: #9d92b8;
}
.lp-fold { flex: 0 0 auto; color: var(--lp); transition: transform 0.25s ease; }
.law-plaque[open] .lp-fold { transform: rotate(-90deg); }
.law-plaque .lp-body { padding: 6px 26px 26px; border-top: 1px solid rgba(183, 154, 224, 0.14); }

/* Domain accents — the shelf's spectrum */
.lp-dice       { --lp: var(--gold); }
.lp-attributes { --lp: #d8c79a; }
.lp-alignment  { --lp: var(--gold); border-image: linear-gradient(180deg, var(--gold), var(--arc)) 1; border-left-width: 3px; }
.lp-round      { --lp: #c9d2dc; }
.lp-combat     { --lp: #e0906a; }
.lp-magic      { --lp: var(--arc-hi); }
.lp-psychic    { --lp: #8f6fd0; }
.lp-techno     { --lp: var(--teal); }
.lp-recovery   { --lp: #a8c8a0; }
.lp-quickref   { --lp: #f0eaf8; }

@media (prefers-reduced-motion: reduce) {
  .law-plaque summary, .lp-seal, .lp-fold { transition: none; }
}
@media print {
  .law-plaque { border-color: #999; background: none; }
}