/* ── Counts table ─────────────────────────────────────────
   Rows are classes, columns are spell levels. Every class and archetype with a list of its own has
   a row: the near-identical archetypes still carry spells nothing else does, so folding them would
   keep those spells off the page entirely. */
.spell-counts {
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 0 0 24px;
    min-width: 40rem;
}

.spell-counts th {
    text-align: center;
    padding: 5px 10px;
    border-bottom: 1px solid #444;
    color: #aaa;
    font-weight: bold;
    white-space: nowrap;
}

.spell-counts td {
    padding: 4px 10px;
    text-align: center;
    border-bottom: 1px solid #222;
    color: #999;
}

.spell-counts .spell-counts-class {
    text-align: left;
    white-space: nowrap;
    color: #ccc;
}

.spell-counts .spell-counts-total {
    color: #ccc;
    font-weight: bold;
    border-left: 1px solid #333;
}

.spell-counts tbody tr:nth-child(even) { background: #161616; }
.spell-counts tbody tr:hover { background: #1e2a1e; }

.spell-counts td a {
    color: #b8943e;
    text-decoration: none;
}
.spell-counts td a:hover { color: #e0bb60; }

/* The archetypes read as their own classes here, just a shade quieter than the eleven they descend
   from — a Dark Apostate is a Cleric and the table should not pretend otherwise. */
.spell-counts-variant .spell-counts-class a { color: #96793a; }
.spell-counts-variant .spell-counts-class a:hover { color: #c8a84b; }

.spell-counts tfoot td {
    border-top: 1px solid #444;
    border-bottom: none;
    color: #888;
    padding-top: 6px;
}
.spell-counts tfoot .spell-counts-class { color: #888; font-style: italic; }
.spell-counts tfoot .spell-counts-total { color: #c8a84b; }

/* ── Browse list ──────────────────────────────────────── */
.spell-browse .spell-col-icon { width: 34px; padding-right: 0; }
.spell-browse .spell-col-icon img { display: block; border-radius: 2px; }
.spell-col-levels, .spell-col-classes { color: #999; }
.spell-list td { vertical-align: middle; }

.spell-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.spell-pager button {
    background: #1e1e1e;
    border: 1px solid #333;
    color: #b8943e;
    border-radius: 3px;
    padding: 2px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
}
.spell-pager button:hover:not(:disabled) { background: #262626; color: #e0bb60; }
.spell-pager button:disabled { color: #444; cursor: default; }
.spell-pager-label { color: #888; font-size: 0.82rem; }

/* ── One spell ────────────────────────────────────────── */
.spell-detail { max-width: 58rem; }

.spell-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.spell-head-icon { border-radius: 4px; flex: none; }
.spell-head-text h2 { margin: 0; }
.spell-kind {
    margin: 3px 0 0;
    color: #888;
    font-size: 0.9rem;
}

.spell-facts {
    border-collapse: collapse;
    font-size: 0.88rem;
    margin-bottom: 16px;
}
.spell-facts th {
    text-align: left;
    padding: 3px 16px 3px 0;
    color: #777;
    font-weight: normal;
    vertical-align: top;
    white-space: nowrap;
}
.spell-facts td { padding: 3px 0; color: #ccc; }

.spell-description {
    color: #bbb;
    line-height: 1.55;
    margin-bottom: 20px;
    max-width: 46rem;
}

/* The dice line is a different kind of statement from the prose above it — the client separates the
   two with a blank line, and running them together loses that. */
.spell-dice {
    margin: 10px 0 0;
    color: #999;
    font-size: 0.86rem;
}
.spell-dice-label {
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.74rem;
    margin-right: 6px;
}

.spell-section { margin-bottom: 22px; }
.spell-section h3 {
    font-size: 0.95rem;
    color: #aaa;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.spell-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
}
.spell-table th {
    text-align: left;
    padding: 5px 10px;
    border-bottom: 1px solid #444;
    color: #aaa;
    font-weight: bold;
    white-space: nowrap;
}
.spell-table td {
    padding: 4px 10px;
    border-bottom: 1px solid #222;
    color: #bbb;
    vertical-align: middle;
}
.spell-table tbody tr:nth-child(even) { background: #161616; }
.spell-table tbody tr:hover { background: #1e2a1e; }
.spell-table td a { color: #b8943e; text-decoration: none; }
.spell-table td a:hover { color: #e0bb60; }

.spell-table .spell-col-icon { width: 34px; padding-right: 0; }
.spell-table .spell-col-icon img { display: block; border-radius: 2px; }

/* Every way into a spell, in one list: a class, then how that class gets it. "Cleric Warpriest
   Core 5" reads the same way as "Wizard L3", which is the point — a reader scanning for their class
   should not have to look in two places to find every route to the spell. */
.spell-access-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 0.88rem;
}

.spell-access-list li {
    display: flex;
    align-items: baseline;
    gap: 5px;
    background: #171717;
    border: 1px solid #262626;
    border-radius: 3px;
    padding: 3px 9px;
}

.spell-access-list a {
    color: #b8943e;
    text-decoration: none;
}
.spell-access-list a:hover { color: #e0bb60; }

.spell-how { color: #999; }

/* An enhancement route is worth telling apart from a spell level at a glance: one is a slot on a
   class list, the other is points spent in a tree. */
.spell-how-tree { color: #8fa88f; }
.spell-how-detail {
    color: #6d6d6d;
    font-size: 0.8rem;
}

.spell-noclass { color: #555; }

.spell-effects {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #bbb;
    font-size: 0.88rem;
}
.spell-effects li {
    padding: 4px 0;
    border-bottom: 1px solid #1e1e1e;
}
.spell-effects li:last-child { border-bottom: none; }
.spell-effect-desc {
    color: #808080;
    font-size: 0.82rem;
    margin-top: 2px;
}

.spell-empty, .class-spells-empty {
    color: #777;
    font-style: italic;
}

/* ── A class's spells ─────────────────────────────────── */
.class-spells { max-width: 68rem; }
.class-spells-head h2 { margin-bottom: 2px; }
.class-spells-sub {
    color: #888;
    font-size: 0.86rem;
    margin: 0 0 18px;
}
.class-spells-back {
    color: #b8943e;
    text-decoration: none;
    margin-left: 12px;
}
.class-spells-back:hover { color: #e0bb60; }

/* Landed on from the advancement table's level headers, so the heading needs room above it or the
   browser puts it flush against the top of the window with the page's own nav over it. */
.spell-level-block {
    margin-bottom: 24px;
    scroll-margin-top: 16px;
}
.spell-level-block h3 {
    font-size: 0.95rem;
    color: #c8a84b;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
    margin-bottom: 8px;
}
.spell-level-count {
    color: #666;
    font-weight: normal;
    font-size: 0.82rem;
    margin-left: 8px;
}

/* One table per level, so the columns line up down the whole level rather than each school sizing
   its own. The widths are fixed as well, which lines every level's table up with every other — nine
   tables that each measure their own longest name read as nine tables, not one list.

   19rem takes the longest name on the site, "Curative Admixture: Inflict Critical Wounds", without
   wrapping. Description is left to take whatever is over. */
.spell-level-table { table-layout: fixed; width: 100%; }
.spell-level-table .spell-col-icon { width: 34px; }
.spell-level-table .spell-col-name { width: 19rem; }
.spell-level-table .spell-col-sp { width: 3.5rem; }

/* The school, as a row inside the table rather than a heading above one. */
.spell-school-row { scroll-margin-top: 16px; }
.spell-school-row th {
    text-align: left;
    font-size: 0.78rem;
    font-weight: normal;
    color: #8a8a8a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #141414;
    border-bottom: 1px solid #2a2a2a;
    padding: 7px 10px 5px;
}
.spell-table tbody tr.spell-school-row:hover { background: #141414; }
.spell-table tbody tr.spell-school-row:nth-child(even) { background: #141414; }

/* A spell name is short and reads as one thing — "Cure Light Wounds" broken over three lines is
   three lines of nothing. The description column has the row's slack and can take the wrap. */
.spell-col-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The description does wrap. Truncating it to one line would keep every row the same height and
   lose the half of a sentence that did not fit, which is a worse trade than an uneven row. */
.spell-col-desc { color: #999; }

.spell-granted-block h3 { color: #8fa88f; }
.spell-granted-note {
    color: #777;
    font-size: 0.82rem;
    margin: 0 0 8px;
}

/* When a pact or domain hands the spell over. Quiet, because it qualifies the ability beside it
   rather than standing on its own. */
.spell-at-level {
    color: #7d8f7d;
    font-size: 0.8rem;
    margin-left: 6px;
    white-space: nowrap;
}