/* All-spells table (/wiki/spells/, content/spells-20261028.mjs), loaded only on that page.
   The article body must survive the editor sanitizer, so the table carries no classes: it is the page's only .table-wrap.
   Row: th (name + optional small "Starting spell") · td school · td seconds · td class links (or race link + small).
   .spell-tools and the header sort buttons are added by dist/spells.js; without it the plain table still reads. */
.article-body td a[href$="/wiki/warrior/"]{--c:#C79C6E;--icon:url(/assets/classes/warrior.svg)}
.article-body td a[href$="/wiki/paladin/"]{--c:#F58CBA;--icon:url(/assets/classes/paladin.svg)}
.article-body td a[href$="/wiki/hunter/"]{--c:#ABD473;--icon:url(/assets/classes/hunter.svg)}
.article-body td a[href$="/wiki/rogue/"]{--c:#FFF569;--icon:url(/assets/classes/rogue.svg)}
.article-body td a[href$="/wiki/priest/"]{--c:#FFFFFF;--icon:url(/assets/classes/priest.svg)}
.article-body td a[href$="/wiki/shaman/"]{--c:#0070DE;--c-text:#4A9CF2;--icon:url(/assets/classes/shaman.svg)}
.article-body td a[href$="/wiki/mage/"]{--c:#69CCF0;--icon:url(/assets/classes/mage.svg)}
.article-body td a[href$="/wiki/warlock/"]{--c:#9482C9;--icon:url(/assets/classes/warlock.svg)}
.article-body td a[href$="/wiki/druid/"]{--c:#FF7D0A;--icon:url(/assets/classes/druid.svg)}

.article-body .table-wrap{margin-top:18px}
.article-body .table-wrap table{font-size:15px}
.article-body .table-wrap thead th{white-space:nowrap;font-size:13px;font-weight:600;color:var(--muted);padding-block:10px}
.article-body .table-wrap tbody th{color:var(--text);font-weight:600}
.article-body .table-wrap tbody th small{display:inline-block;margin-left:8px;padding:0 7px;border:1px solid #6b603c;color:var(--gold);font-size:12px;font-weight:500;line-height:20px;vertical-align:1px;white-space:nowrap}
.article-body .table-wrap td{color:var(--muted)}
.article-body .table-wrap td:nth-child(3),.article-body .table-wrap thead th:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}
.article-body .table-wrap td:nth-child(3){color:var(--text)}
.article-body .table-wrap td small{color:var(--muted);font-size:13px}
.article-body .table-wrap td a{display:inline-flex;align-items:center;gap:7px;color:var(--c-text,var(--c,var(--gold)));text-decoration:none;font-weight:600;white-space:nowrap}
.article-body .table-wrap td a:hover{text-decoration:underline;text-underline-offset:4px}
.article-body .table-wrap td a[href*="/wiki/"]::before{content:'';flex:none;width:16px;height:16px;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.article-body .table-wrap tbody tr:hover{background:#1a2018}
.article-body .table-wrap tbody tr[hidden]{display:none}

/* Sort buttons fill the header cell; aria-sort on the th picks the arrow half that stays lit. */
.article-body .table-wrap thead th:has(button){padding:0}
.article-body .table-wrap thead th button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 16px;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.article-body .table-wrap thead th:nth-child(3) button{justify-content:flex-end}
.article-body .table-wrap thead th button:hover{color:var(--text)}
.article-body .table-wrap thead th button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.article-body .table-wrap thead th button svg{flex:none;opacity:.55}
.article-body .table-wrap thead th[aria-sort]{color:var(--gold)}
.article-body .table-wrap thead th[aria-sort] svg{opacity:1}
.article-body .table-wrap thead th[aria-sort=ascending] svg path:last-child,.article-body .table-wrap thead th[aria-sort=descending] svg path:first-child{opacity:.2}

.spell-tools{display:grid;gap:14px;margin:26px 0 0}
.spell-search{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0}
.spell-search label{font-size:14px;color:var(--muted)}
.spell-search input{flex:1 1 220px;max-width:360px;min-width:0;padding:10px 13px;border:1px solid #536244;background:#141a11;color:var(--text);font:16px var(--sans)}
.spell-search input::placeholder{color:#9a9e90}
.spell-search input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.spell-chips{display:flex;flex-wrap:wrap;gap:8px}
.spell-chips button{padding:6px 12px;border:1px solid var(--line);background:#181d16;color:var(--c-text,var(--c,var(--text)));font:600 14px/1.4 var(--sans);cursor:pointer;transition:background-color .15s ease-out,border-color .15s ease-out}
.spell-chips button:hover{border-color:var(--c,var(--gold))}
.spell-chips button[aria-pressed=true]{background:#2a3120;border-color:var(--c,var(--gold));box-shadow:inset 0 -2px 0 var(--c,var(--gold))}
.spell-chips button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.spell-count{margin:0;font-size:13px;color:var(--muted)}

/* Phones: each row becomes a compact entry (name, then school · seconds · class); the header stays as a row of sort buttons. */
@media(max-width:640px){
 .article-body .table-wrap{overflow:visible}
 .article-body .table-wrap table,.article-body .table-wrap tbody{display:block}
 .article-body .table-wrap thead{display:block;background:none}
 .article-body .table-wrap thead tr{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--line)}
 .article-body .table-wrap thead th{display:block;border:1px solid var(--line);padding:6px 10px;white-space:normal}
 .article-body .table-wrap thead th button{padding:6px 10px}
 .article-body .table-wrap thead th:nth-child(3){text-align:left}
 .article-body .table-wrap tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:12px 2px;border-bottom:1px solid var(--line)}
 .article-body .table-wrap tbody tr:hover{background:none}
 .article-body .table-wrap caption{display:block;padding-bottom:12px}
 .article-body .table-wrap tbody th,.article-body .table-wrap td{display:block;width:auto;min-width:0;padding:0;border:0}
 .article-body .table-wrap tbody th{flex-basis:100%;font-size:16px}
 .article-body .table-wrap td{font-size:14px}
 .article-body .table-wrap td:nth-child(3){text-align:left}
 .article-body .table-wrap td:nth-child(3)::after{content:' s';color:var(--muted)}
 html:lang(zh) .article-body .table-wrap td:nth-child(3)::after{content:' 秒'}
}