/* Page sheet for spells.php. Linked after style.css by includes/css.php,
   so these rules win ties against the shared sheet. */

.spells-table { width: 100%; }
.spells-table th { white-space: nowrap; }
.spells-table .col-num { width: 48px; }
.spells-table .col-gold { width: 72px; }
.spells-table th a.active { color: var(--text-main); }
.spells-table td { text-align: center; }
.spells-table td.col-name,
.spells-table td.col-teacher { text-align: left; }
.spell-link, .spell-link:visited { color: var(--text-main); text-decoration: none; font-weight: 700; }
.spell-row:hover { background: rgba(154,35,35,0.05); }
.spell-row:hover td { color: var(--text-main); }
.spell-row { cursor: pointer; }
.num { font-variant-numeric: tabular-nums; color: var(--text-mid); }
.num.col-gold { color: var(--gold); }
/* Shape comes from .chip in THE SHARED KIT. What stays here is the
   element palette, which is categorical: no semantic chip variant
   can say "fire" or "water". These sit after style.css, so they
   win over .chip--mute's colour without needing !important. */
.elem-fire    { color: #c0622a; border-color: rgba(192,98,42,0.4); }
.elem-water   { color: #3d8fa8; border-color: rgba(61,143,168,0.4); }
.elem-air     { color: #7aafc0; border-color: rgba(122,175,192,0.4); }
.elem-earth   { color: #8a7040; border-color: rgba(138,112,64,0.4); }
.elem-light   { color: var(--gold); border-color: rgba(201,168,76,0.4); }
.elem-dark    { color: #9060b0; border-color: rgba(144,96,176,0.4); }
.no-results-row td { text-align: center; padding: 40px; color: var(--text-dim); }
.col-teacher { color: var(--text-mid); font-size: 0.86rem; }
.col-teacher a, .col-teacher a:visited { color: var(--sage); text-decoration: none; transition: color 0.15s; }
.col-teacher a:hover { color: #8aaa78; text-decoration: underline; text-underline-offset: 3px; }
.col-prereq  { font-size: 0.86rem; color: var(--text-mid); text-align: left; }
/* Look comes from THE SWITCH primitive in style.css. */