@import url("reset.css");
@import url("variables.css");
@import url("global.css");
@import url("nav.css");
@import url("fonts.css");
@import url("figures.css");

/* Appendix H — Psychic Spells
   D&D Beyond 2024-style spell stat cards.
   Each spell (h2 + stat table + description) is wrapped in a .spell div by
   assets/filter.lua. */

.spell {
  --spell-card-bg: #FBFAF2;
  --spell-card-border: var(--HB_Color_HeaderUnderline);
  --spell-band: var(--HB_Color_HeaderText);
  --spell-band-text: #F5EAD0;

  background: var(--spell-card-bg);
  border: 1px solid var(--spell-card-border);
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  margin: 2.75rem 0;
  padding: 0 1.1rem 1rem;
}

/* Header band: spell name across the top of the card (full-bleed) */
.spell h2 {
  background: var(--spell-band);
  color: var(--spell-band-text);
  margin: 0 -1.1rem 0.6rem -1.1rem;
  padding: 0.6rem 1.1rem;
  font-size: 1.15em;
  letter-spacing: 0.02em;
}

/* Property table: 4-column D&D Beyond grid.
   Rows 1 & 3 are label rows, rows 2 & 4 are value rows. */
.spell table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: 0.8em;
}
.spell table td {
  padding: 0.4rem 0.5rem;
  vertical-align: top;
  line-height: 1.2em;
  border: none;
}
/* Label rows (odd rows): field names */
.spell table tbody tr:nth-child(odd) td {
  font-family: var(--font-family-headers);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6em;
  color: var(--HB_Color_HeaderText);
  background: rgba(0, 0, 0, 0.03);
  padding-bottom: 0.12rem;
}
/* Value rows (even rows): field values */
.spell table tbody tr:nth-child(even) td {
  font-size: 0.95em;
  font-weight: 500;
  border-bottom: 1px solid rgba(192, 173, 106, 0.55);
  padding-top: 0.12rem;
}
/* Separate the two property groups */
.spell table tbody tr:nth-child(3) td {
  border-top: 2px solid var(--spell-card-border);
}
.spell table tbody tr:last-child td {
  border-bottom: none;
}

/* Reset global margins inside the card so content breathes */
.spell p,
.spell ul,
.spell ol {
  margin: 0;
}
.spell p + p,
.spell ul + p,
.spell ol + p,
.spell p + ul,
.spell p + ol {
  text-indent: 0;
  margin-top: 0.6em;
}
.spell ul {
  padding-left: 1.2em;
  margin-top: 0.4em;
}
.spell strong {
  font-family: var(--font-family-headers);
  letter-spacing: 0.01em;
}

/* Divider between properties and description */
.spell hr {
  border: none;
  border-top: 1px solid var(--spell-card-border);
  margin: 0.9rem 0;
}

/* Footnote (material component) rendered at the end of the card */
.spell p.spell-footnote {
  font-size: 0.72em;
  color: #6b6250;
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(192, 173, 106, 0.55);
  text-indent: 0;
}
.spell p.spell-footnote sup {
  color: var(--HB_Color_HeaderText);
  font-weight: bold;
}

.spell section.footnotes {
  font-size: 0.75em;
  color: #6b6250;
  margin-top: 0.8rem;
}