/* Spell and monster pages (tools/build-srd.js). Colours come from the theme. */

.srd {
    display: block;
    max-width: min(880px, 100%);
    margin: 10px auto 2em;
    padding: 1.5em 1.75em;
    box-sizing: border-box;
    color: var(--text-primary);
}
.srd h1 { margin: 0.1em 0 0.2em; font-size: 2em; line-height: 1.2; }
.srd, .srd p, .srd li { line-height: 1.55; }
.srd th { -webkit-text-stroke: 0; -webkit-text-fill-color: currentColor; text-shadow: none; font-family: inherit; font-size: 0.85em; height: auto; width: auto; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.srd-scroll { max-width: 100%; overflow-x: auto; }
.srd h2 {
    font-size: 1.25em;
    margin: 1.6em 0 0.6em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 30%, transparent);
}
.srd a:link, .srd a:visited { color: var(--theme-primary); }
.srd-sub { color: var(--text-secondary); margin: 0; }
.srd-crumbs { font-size: 0.9em; color: var(--text-secondary); margin-bottom: 0.8em; }

/* The roller */
.srd-roller {
    margin-top: 1.2em;
    padding: 1em 1.2em 1.2em;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 45%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--theme-primary) 8%, transparent);
}
.srd-roller h2 { margin-top: 0; border: 0; }
.srd-controls, .srd-atk { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; }
.srd-controls label { display: flex; gap: 0.5em; align-items: center; }
.srd select, .srd input[type="search"] {
    font: inherit;
    padding: 0.45em 0.6em;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 45%, transparent);
    background: var(--bg-primary);
    color: var(--text-primary);
}
.srd-btn {
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0.55em 1em;
    border-radius: 8px;
    border: 1px solid var(--theme-primary);
    background: var(--theme-primary);
    color: var(--text-on-accent);
}
.srd-btn:hover { filter: brightness(1.1); }
.srd-btn-alt { background: transparent; color: var(--text-primary); }
.srd-btn-wide { flex-basis: 100%; }
.srd-atks { display: grid; gap: 0.5em; margin-top: 0.9em; }
.srd-atk-name { font-weight: 600; min-width: 9em; }
.srd-dc { color: var(--text-secondary); }
.srd-inline {
    font: inherit;
    cursor: pointer;
    padding: 0 0.25em;
    border: 0;
    border-bottom: 1px dashed var(--theme-primary);
    background: none;
    color: var(--theme-primary);
}

.srd-result { margin-top: 1em; min-height: 3.2em; }
.srd-result-empty { color: var(--text-secondary); margin: 0; }
.srd-roll { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 0.8em; padding: 0.35em 0; }
.srd-roll + .srd-roll { border-top: 1px solid color-mix(in srgb, var(--theme-primary) 20%, transparent); opacity: 0.75; }
.srd-roll:first-child .srd-total { font-size: 2em; }
.srd-total { font-weight: 700; font-size: 1.3em; color: var(--theme-primary); }
.srd-dice { color: var(--text-secondary); font-size: 0.95em; }
.srd-crit { font-weight: 700; color: var(--theme-primary); }

/* Facts, tables, charts */
.srd-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35em 1.2em; margin: 0; }
.srd-facts dt { font-weight: 600; }
.srd-facts dd { margin: 0; }
.srd-table { width: 100%; border-collapse: collapse; margin: 0.6em 0; font-size: 0.95em; }
.srd-table th, .srd-table td {
    text-align: left;
    padding: 0.4em 0.5em;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 18%, transparent);
    vertical-align: top;
}
.srd-table small { color: var(--text-secondary); }
.srd-table-narrow { max-width: 22em; }
.srd-here td { font-weight: 700; background: color-mix(in srgb, var(--theme-primary) 10%, transparent); }
.srd-abil th, .srd-abil td { text-align: center; }
.srd-note, .srd-credit { font-size: 0.85em; color: var(--text-secondary); }
.srd-credit { margin-top: 2.5em; }
.srd-dist { margin: 0.4em 0 0.6em; }
.srd-dist svg { width: 100%; height: 120px; display: block; fill: var(--theme-primary); }
.srd-dist rect:hover { fill: var(--text-primary); }
.srd-dist figcaption { display: flex; justify-content: space-between; font-size: 0.85em; color: var(--text-secondary); }
.srd-rules p { line-height: 1.55; }
.srd-links a { display: inline-block; margin: 0 0.8em 0.4em 0; }

/* Index pages */
.srd-filter { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1.2em 0 0.4em; }
.srd-filter input { flex: 1 1 14em; }
.srd-list tr[hidden] { display: none; }

@media (max-width: 600px) {
    .srd { padding: 1em 16px; }
    .srd-table { font-size: 0.85em; }
    .srd-table th, .srd-table td { padding: 0.35em 0.3em; }
    .srd-atk-name { min-width: 0; flex-basis: 100%; }
    .srd-list th:nth-child(3), .srd-list td:nth-child(3) { display: none; }
}

/* Art and the big numbers (25 Sep 2026) */
.srd h1 { font-family: "celticg", Georgia, serif; font-weight: normal; color: var(--theme-primary-light); letter-spacing: 0.02em; }
.srd-head-art { display: grid; grid-template-columns: 240px 1fr; gap: 1.5em; align-items: center; }
.srd-art { margin: 0; }
.srd-art img { width: 100%; height: auto; border-radius: 12px; display: block; }
.srd-big { margin: 0.6em 0 0; color: var(--text-secondary); }
.srd-big span { font-size: 2.6em; font-weight: 700; color: var(--theme-primary); line-height: 1; margin-right: 0.15em; vertical-align: -0.1em; }
.srd-hero { margin: 0 0 1em; }
.srd-hero img { width: 100%; height: auto; border-radius: 12px; display: block; }
.srd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.7em; margin: 1.2em 0; }
.srd-card { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; text-decoration: none; transition: transform 0.15s ease; }
.srd-card:hover { transform: translateY(-2px); }
.srd-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.srd-card span { padding: 0.4em 0.5em 0; font-weight: 600; font-size: 0.9em; color: var(--text-primary); }
.srd-card small { padding: 0 0.5em 0.45em; color: var(--text-secondary); }
.srd-name { display: inline-flex; align-items: center; gap: 0.55em; }
.srd-name img, .srd-name i { width: 32px; height: 32px; border-radius: 6px; flex: none; object-fit: cover; }
@media (max-width: 600px) {
    .srd-head-art { grid-template-columns: 1fr; }
    .srd-art { max-width: 260px; }
    .srd-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Monster plates: a white bestiary page set into the dark frame */
.srd-plate img, .srd-plate-thumb { background: var(--srd-page, transparent); }
.srd-plate img { border-radius: 12px; }
.srd-plate-thumb { object-fit: cover; }

/* The site stylesheet makes every <tr> a flexbox and stretches the third
   column; a real table needs neither. */
.srd tr { display: table-row; }
.srd th:nth-child(3) { width: auto; }
.srd td { margin: 0; }

/* Monster cards */
.srd-mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8em; margin: 1em 0; }
.srd-mcards .srd-card img { background: var(--srd-page, transparent); }
.srd-mcards .srd-card[hidden] { display: none; }
@media (max-width: 600px) { .srd-mcards { grid-template-columns: repeat(2, 1fr); } }