/* Site look: Armageddon, the End Times. Bootstrap 5.3 handles light and dark (data-bs-theme on <html>).
   Light is the book's pages: whitewashed, cracked plaster, black ink, rust. Dark is its cover: smoke, sepia and fire.
   Both share the book's frame: black torn edges and Trajan-style capitals. Backgrounds are gradients only. */

/* ------------------------------------------------------------ Palette */
:root {
    /* Titles: Cinzel, a Trajan-style serif like the cover's lettering (Google Fonts, loaded in includes/header.php). */
    --site-display: "Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
    --site-text: Georgia, "Times New Roman", serif;
    --site-ink: #0d0a08;              /* the black of the torn edges, both themes */
    --site-ink-text: #f1e6d6;         /* bone white on that black */
    --site-ember: #e8892e;            /* fire highlight, both themes */
    --site-flare: #d9472b;            /* the red star of the seal */
}

[data-bs-theme="light"] {
    --site-accent: #a3401b;           /* rust */
    --site-accent-contrast: #ffffff;
    --site-gold: #8f6418;
    --site-plaster: #e9e4da;
    --site-plaster-deep: #d6cebf;
    --site-panel: #f3efe7;
    --bs-body-bg: var(--site-plaster);
    --bs-body-color: #1d1814;
    --bs-secondary-color: rgba(29, 24, 20, 0.7);
    --bs-border-color: #bcb1a0;
    --bs-tertiary-bg: #e2dcd0;
    --bs-secondary-bg: #ddd5c7;
    --bs-link-color-rgb: 163, 64, 27;
    --bs-link-hover-color-rgb: 120, 44, 16;
}

[data-bs-theme="dark"] {
    --site-accent: #d4612a;           /* burnt orange */
    --site-accent-contrast: #1a0d08;
    --site-gold: #f2c46b;             /* ember yellow */
    --site-plaster: #17100c;          /* smoke */
    --site-plaster-deep: #0f0a07;
    --site-panel: #211711;
    --bs-body-bg: var(--site-plaster);
    --bs-body-color: #ecdfcb;
    --bs-secondary-color: rgba(236, 223, 203, 0.68);
    --bs-border-color: #4a3426;
    --bs-tertiary-bg: #1d140f;
    --bs-secondary-bg: #26190f;
    --bs-link-color-rgb: 232, 137, 46;
    --bs-link-hover-color-rgb: 242, 196, 107;
}

/* ------------------------------------------------------------ Page */
html,
body {
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--site-text);
    background-color: var(--site-plaster);
    /* The pages: whitewash with faint, darker plaster patches and an aged edge. Gradients only, fixed to the window,
       so nothing tiles. */
    background-image:
        radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(90, 70, 45, 0.28) 100%),
        radial-gradient(ellipse 38% 26% at 18% 22%, rgba(120, 100, 75, 0.12), transparent 70%),
        radial-gradient(ellipse 30% 22% at 78% 30%, rgba(120, 100, 75, 0.10), transparent 70%),
        radial-gradient(ellipse 42% 30% at 62% 78%, rgba(120, 100, 75, 0.12), transparent 70%),
        radial-gradient(ellipse 26% 18% at 30% 70%, rgba(255, 255, 255, 0.35), transparent 70%),
        radial-gradient(ellipse 30% 20% at 85% 60%, rgba(255, 255, 255, 0.30), transparent 70%);
    background-attachment: fixed;
}

[data-bs-theme="dark"] body {
    /* The cover: smoke over a fire rising from the lower right, dark at the edges. */
    background-image:
        radial-gradient(ellipse 120% 95% at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.6) 100%),
        radial-gradient(ellipse 55% 45% at 82% 100%, rgba(232, 137, 46, 0.22), rgba(176, 82, 42, 0.10) 45%, transparent 75%),
        radial-gradient(ellipse 30% 20% at 70% 82%, rgba(242, 196, 107, 0.08), transparent 70%),
        radial-gradient(ellipse 45% 30% at 20% 25%, rgba(120, 72, 44, 0.20), transparent 70%),
        radial-gradient(ellipse 40% 28% at 65% 18%, rgba(110, 66, 40, 0.16), transparent 70%),
        radial-gradient(ellipse 50% 32% at 35% 65%, rgba(100, 60, 36, 0.16), transparent 70%),
        radial-gradient(ellipse 25% 18% at 88% 45%, rgba(130, 78, 46, 0.12), transparent 70%);
}

main {
    flex: 1 0 auto;
}

/* The book's torn black page edge, down the left of wide screens. */
@media (min-width: 1200px) {
    body::before {
        content: "";
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 26px;
        z-index: 1020;
        background: var(--site-ink);
        clip-path: polygon(0 0, 70% 0, 92% 3%, 60% 7%, 85% 12%, 55% 18%, 100% 24%, 66% 31%, 88% 37%, 58% 44%, 95% 51%,
            62% 58%, 84% 64%, 52% 71%, 90% 78%, 64% 85%, 86% 91%, 57% 96%, 76% 100%, 0 100%);
        pointer-events: none;
    }
}

/* ------------------------------------------------------------ Type */
h1, h2, h3, h4,
.site-display {
    font-family: var(--site-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

h1,
.h1,
.h3 {
    letter-spacing: 0.08em;
}

/* A page title stands on a rust rule, like the chapter openers. */
main > h1:first-child,
main > .container > h1:first-child {
    display: inline-block;
    padding-bottom: 0.25rem;
    border-bottom: 3px solid var(--site-accent);
}

a {
    color: var(--site-accent);
}

[data-bs-theme="dark"] a:hover {
    color: var(--site-gold);
}

/* ------------------------------------------------------------ Navbar: the black torn band of the cover */
.site-navbar {
    background-color: var(--site-ink);
    --bs-navbar-color: var(--site-ink-text);
    --bs-navbar-hover-color: var(--site-ember);
    --bs-navbar-brand-color: var(--site-ink-text);
    --bs-navbar-brand-hover-color: var(--site-ink-text);
    border-bottom: 0;
    padding-bottom: 0.65rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.site-navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 10px;
    background: var(--site-ink);
    clip-path: polygon(0 0, 100% 0, 100% 40%, 97% 90%, 94% 30%, 90% 70%, 86% 20%, 82% 100%, 78% 40%, 73% 80%, 69% 10%,
        64% 70%, 60% 30%, 55% 90%, 51% 20%, 46% 60%, 42% 0, 37% 80%, 33% 30%, 28% 100%, 24% 40%, 19% 70%, 15% 10%,
        11% 80%, 7% 30%, 3% 90%, 0 40%);
}

.site-navbar .nav-link,
.site-navbar .btn-link {
    color: var(--site-ink-text);
}

.site-navbar .nav-link:hover,
.site-navbar .btn-link:hover {
    color: var(--site-ember);
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--site-display);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.site-brand-tagline {
    font-family: var(--site-text);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    font-size: 0.8rem;
    color: var(--site-ember);
}

.site-navbar .site-sigil {
    width: 1.9rem;
    height: 1.9rem;
    color: var(--site-ink-text);
    filter: drop-shadow(0 0 5px rgba(217, 71, 43, 0.45));
}

/* The navbar mark: the logo's left wing and A (images/LogoMark.webp), cut from the wide logo. */
.site-navbar .site-mark {
    height: 2.4rem;
    width: auto;
    filter: drop-shadow(0 0 6px rgba(217, 71, 43, 0.35));
}

/* The seal (images/svg/seal.svg): a bone-white ring and A around a red star. */
.site-seal-star {
    fill: var(--site-flare);
}

/* The theme toggle shows the mode you'll switch to. */
[data-bs-theme="dark"] .theme-icon-to-dark,
[data-bs-theme="light"] .theme-icon-to-light {
    display: none;
}

/* Local SVG icons (classes/logic/Icon.php) sit on the text line like an icon font would. */
svg.bi {
    vertical-align: -0.125em;
}

/* ------------------------------------------------------------ Panels: cards are plaster slabs under black banners */
.card {
    --bs-card-bg: var(--site-panel);
    --bs-card-border-color: var(--bs-border-color);
    box-shadow: inset 0 0 40px color-mix(in srgb, var(--site-plaster-deep) 60%, transparent), 0 2px 10px rgba(0, 0, 0, 0.12);
}

.card-header {
    font-family: var(--site-display);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--site-ink-text);
    background-color: var(--site-ink);
    border-bottom: 2px solid var(--site-accent);
}

/* ------------------------------------------------------------ Controls */
.btn-primary {
    --bs-btn-bg: var(--site-accent);
    --bs-btn-border-color: var(--site-accent);
    --bs-btn-color: var(--site-accent-contrast);
    --bs-btn-hover-bg: color-mix(in srgb, var(--site-accent) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--site-accent) 85%, #000);
    --bs-btn-hover-color: var(--site-accent-contrast);
    --bs-btn-active-bg: color-mix(in srgb, var(--site-accent) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--site-accent) 75%, #000);
    font-family: var(--site-display);
    letter-spacing: 0.06em;
}

.btn-outline-primary {
    --bs-btn-color: var(--site-accent);
    --bs-btn-border-color: var(--site-accent);
    --bs-btn-hover-bg: var(--site-accent);
    --bs-btn-hover-border-color: var(--site-accent);
    --bs-btn-hover-color: var(--site-accent-contrast);
    --bs-btn-active-bg: color-mix(in srgb, var(--site-accent) 85%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--site-accent) 85%, #000);
}

.form-control,
.form-select {
    background-color: color-mix(in srgb, var(--site-panel) 85%, #fff 15%);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #120c09;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--site-accent);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--site-accent) 30%, transparent);
}

.form-check-input:checked {
    background-color: var(--site-accent);
    border-color: var(--site-accent);
}

/* ------------------------------------------------------------ Footer: the torn band again, at the bottom */
.site-footer {
    position: relative;
    z-index: 2;                 /* above the home page's fixed logo backdrop */
    margin-top: 3rem;
    padding: 1.4rem 0 1.1rem;
    background-color: var(--site-ink);
    color: color-mix(in srgb, var(--site-ink-text) 75%, transparent);
    font-size: 0.85rem;
}

.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -9px;
    height: 10px;
    background: var(--site-ink);
    clip-path: polygon(0 60%, 4% 10%, 8% 70%, 13% 0, 17% 80%, 22% 30%, 26% 90%, 31% 20%, 35% 60%, 40% 0, 45% 70%,
        49% 10%, 54% 80%, 58% 30%, 63% 100%, 67% 20%, 72% 60%, 76% 0, 81% 70%, 85% 30%, 90% 90%, 94% 10%, 98% 60%,
        100% 30%, 100% 100%, 0 100%);
}

.site-footer .site-display {
    color: var(--site-ink-text);
    letter-spacing: 0.2em;
}

.site-footer .site-mark {
    height: 1.6rem;
    width: auto;
}

.site-footer .site-sigil {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--site-ink-text);
}

/* ------------------------------------------------------------ Login */
.site-auth {
    max-width: 400px;
    margin: 10vh auto 0;
    padding: 0 16px;
}

/* Sign-up honeypot (modals/signup.php): off-screen for people and screen readers, still filled in by bots. */
.site-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------ Admin */
.site-admin-card {
    max-width: 32rem;
}

/* ------------------------------------------------------------ Home: the logo as a backdrop, the cards on a veil */
/* The logo, fixed in the middle of the window behind everything, on a smoky glow (so its bone-white letters also read
   on the light theme's whitewash). It takes no room on the page. */
.site-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4vw;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 30% at 50% 50%, rgba(13, 10, 8, 0.85), rgba(13, 10, 8, 0.45) 55%, transparent 80%);
}

.site-backdrop img {
    width: 100%;
    max-width: 1100px;
    height: auto;
}

/* Page content sits above the backdrop. The backdrop is inside <main>, so main's own children are lifted too: a fixed
   element would otherwise paint over unpositioned content in the same stacking context (the welcome card's button).
   Only what follows the backdrop: the home page. */
main {
    position: relative;
    z-index: 1;
}

main > .site-backdrop ~ * {
    position: relative;
    z-index: 1;
}

/* A veil: the page's own colour at half strength, so the logo shows through without fighting the text. */
.site-veil {
    padding: 1.5rem;
    border-radius: var(--bs-border-radius-lg);
    background-color: color-mix(in srgb, var(--site-plaster) 50%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bs-border-color) 60%, transparent);
}

.site-veil .card {
    --bs-card-bg: color-mix(in srgb, var(--site-panel) 75%, transparent);
    backdrop-filter: blur(2px);
}

/* The welcome card spans the page like the Characters veil above it; its text keeps a readable line length. */
.site-welcome > * {
    max-width: 46rem;
    margin-inline: auto;
}

.site-welcome-line {
    font-style: italic;
    margin-bottom: 1.25rem;
}

/* A character card is a dossier: plaster slab under a black banner, lifting a little on hover. */
a.site-dossier {
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.site-dossier:hover,
a.site-dossier:focus-visible {
    transform: translateY(-3px);
    box-shadow: inset 0 0 40px color-mix(in srgb, var(--site-plaster-deep) 60%, transparent), 0 8px 22px rgba(0, 0, 0, 0.3);
}

a.site-dossier:hover .card-header,
a.site-dossier:focus-visible .card-header {
    border-bottom-color: var(--site-ember);
}

.site-dossier-kind {
    font-family: var(--site-display);
    letter-spacing: 0.04em;
}

.site-dossier-new .card-header {
    background-color: color-mix(in srgb, var(--site-ink) 85%, var(--site-accent));
}

@media (prefers-reduced-motion: reduce) {
    a.site-dossier {
        transition: none;
    }

    a.site-dossier:hover,
    a.site-dossier:focus-visible {
        transform: none;
    }
}

/* ------------------------------------------------------------ Building wizard (modals/build.php) */
.site-build .modal-content {
    background-color: var(--site-panel);
}

/* The header is the black banner, with the steps as its tabs. */
.site-build .modal-header {
    color: var(--site-ink-text);
    background-color: var(--site-ink);
    border-bottom: 2px solid var(--site-accent);
}

.site-build-steps {
    --bs-nav-link-color: color-mix(in srgb, var(--site-ink-text) 75%, transparent);
    --bs-nav-link-hover-color: var(--site-ember);
    --bs-nav-pills-link-active-bg: var(--site-accent);
    --bs-nav-pills-link-active-color: var(--site-accent-contrast);
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    font-family: var(--site-display);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-build-step-number {
    display: inline-block;
    min-width: 1.4em;
    border: 1px solid currentColor;
    border-radius: 50%;
    text-align: center;
}

/* A step's broken rules, in the margin like the book's sidebars. */
.site-build-warnings {
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem 0.5rem 1.75rem;
    border-left: 3px solid var(--site-flare);
    background-color: color-mix(in srgb, var(--site-flare) 10%, transparent);
}

/* Step 1's portrait: a framed square, the placeholder icon until one is uploaded. */
.site-build-avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    overflow: hidden;
    border: 2px solid var(--site-accent);
    color: color-mix(in srgb, currentColor 40%, transparent);
}

.site-build-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-build-avatar svg {
    width: 60%;
    height: 60%;
}

/* Step 1's Character Types: a Campaign Level heading over each group. */
.site-build-type-level th {
    padding-top: 0.75rem;
    font-family: var(--site-display);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--site-accent);
    background-color: transparent;
}

/* The points line: one tag per pool, red when spent beyond its budget. */
.site-build-pool {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.site-build-pool.is-over {
    border-color: var(--site-flare);
    color: var(--site-flare);
}

/* Points left unpaid, under the points line. */
.site-build-over {
    color: var(--site-flare);
}

/* Step 2: one line per Quality or Drawback, wrapping on narrow screens. */
.site-qd-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--bs-border-color);
}

.site-qd-name {
    flex: 1 1 9rem;
}

.site-qd-type {
    width: 9rem;
}

.site-qd-level {
    width: 5rem;
}

.site-qd-points {
    min-width: 2.5rem;
    text-align: end;
    font-weight: 700;
}

.site-qd-note {
    flex: 1 1 100%;
}

.site-qd-add .form-select {
    flex: 1 1 14rem;
}

.site-qd-add .form-control {
    flex: 1 1 10rem;
}

/* Step 4: the skills flow into two columns; each skill's Specialties sit on a line of their own. */
@media (min-width: 992px) {
    .site-skill-list {
        column-count: 2;
        column-gap: 1.5rem;
    }
}

.site-skill-row {
    break-inside: avoid;
}

.site-skill-specialties {
    flex: 1 1 100%;
}

.site-skill-specialty {
    width: 12rem;
}

.site-skill-specialty-remove {
    width: 0.5em;
    height: 0.5em;
    margin-inline-start: 0.25rem;
    vertical-align: middle;
}

/* Step 2's Spirit Patrons: the name in the card header, and each granting Boon's grants indented under it. */
.site-build-patron-name {
    max-width: 18rem;
}

.site-build-grants {
    padding-inline-start: 1rem;
    border-inline-start: 2px solid var(--bs-border-color);
}

/* The details cards flow into two columns that balance themselves. */
@media (min-width: 768px) {
    .site-build-details {
        column-count: 2;
        column-gap: 1.5rem;
    }
}

.site-build-detail {
    break-inside: avoid;
    margin-bottom: 1rem;
}

/* ------------------------------------------------------------ The character sheet (includes/sheet-*.php) */
/* The portrait stands upright and is cropped to fill its frame, whatever shape was uploaded. It is at least 3:4, and
   grows to fill the card when the columns beside it are taller, so the footer always sits at the bottom. */
.site-sheet-portrait .card-img-top {
    flex: 1 0 auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-bottom: 2px solid var(--site-accent);
}

.site-sheet-portrait-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, currentColor 30%, transparent);
}

.site-sheet-portrait-empty svg {
    width: 50%;
    height: 50%;
}

.site-sheet-portrait .card-footer h1 {
    font-family: var(--site-display);
    letter-spacing: 0.04em;
}

/* "Physical", "Mental", "Regeneration": small capitals over their values. */
.site-sheet-group {
    margin: 0 0 0.25rem;
    font-family: var(--site-display);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--site-accent);
}

/* A group that starts folded (the sheet's Racial Powers): its title is the toggle, with a chevron that turns open. */
.site-sheet-group-toggle {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

.site-sheet-group-toggle::after {
    content: "\25B8";
    display: inline-block;
    margin-inline-start: 0.35rem;
    transition: transform 0.15s ease;
}

.site-sheet-group-toggle:not(.collapsed)::after {
    transform: rotate(90deg);
}

/* Name on the left, value on the right, a dotted rule between rows. */
.site-sheet-values {
    display: grid;
    grid-template-columns: 1fr auto;
    margin-bottom: 1rem;
}

.site-sheet-values:last-child {
    margin-bottom: 0;
}

.site-sheet-values dt,
.site-sheet-values dd {
    margin: 0;
    padding: 0.2rem 0;
    border-bottom: 1px dotted var(--bs-border-color);
}

.site-sheet-values dt {
    font-weight: 400;
}

/* No column gap, so the dotted rule runs unbroken under the name and its value. */
.site-sheet-values dd {
    padding-inline-start: 0.75rem;
    font-weight: 700;
    text-align: end;
}

.site-sheet-sub {
    display: block;
    font-size: 0.75em;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

/* Metaphysics' right-hand side holds only switches (Assumed, All powers, Active), stacked and right-aligned. */
.site-sheet-values dd.site-sheet-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    font-weight: 400;
}

/* A folded group (Racial Powers) keeps its distance from the group under it while closed. */
.site-sheet-group-folding {
    margin-bottom: 0.75rem;
}

/* A skill's level plus its Attribute, after the level: "5(10)". The total is the bold number, the level plain. */
.site-skill-level {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

/* Fixed widths, aligned right, so the brackets and totals line up down the list: "(11)" and "25" at most. */
.site-skill-level,
.site-skill-total {
    display: inline-block;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.site-skill-level {
    min-width: 4ch;
    margin-inline-end: 0.35rem;
}

.site-skill-total {
    min-width: 2ch;
}

/* The bolt after an Aspect-only Primal Power (classes/logic/AspectMark.php): grey, orange while the Aspect is assumed. */
.site-aspect-mark {
    color: var(--bs-secondary-color);
    cursor: help;
}

.site-aspect-mark.is-live {
    color: var(--site-accent);
}

.site-aspect-mark svg {
    width: 0.8em;
    height: 0.8em;
    vertical-align: -0.05em;
}

/* A skill with a secondary Attribute: its name opens the switch underneath (includes/sheet-skills.php). */
.site-skill-toggle {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    text-decoration: underline dotted var(--bs-secondary-color);
    text-underline-offset: 0.2em;
}

/* A weapon better than its skill (Weapon of Power, Weapon Mastery), on its own line under that skill: "• Greatsword". */
.site-sheet-values dt.site-skill-weapon {
    padding-inline-start: 0.75rem;
}

.site-sheet-values dt.site-skill-weapon::before {
    content: "\2022\00a0";
    color: var(--bs-secondary-color);
}

/* "5 →" before a value that something switched on has changed. */
.site-sheet-was {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

/* Controls under a line of the sheet (an Aspect's switch, Weapon Mastery's choices), across both columns. */
.site-sheet-values dd.site-sheet-under {
    grid-column: 1 / -1;
    padding-inline-start: 0;
    font-weight: 400;
    text-align: start;
}

.site-mastery-picker {
    max-width: 18rem;
}

.site-boost-input {
    width: 4.5rem;
}

/* The right-hand accordion: its headers are the cards' black banners, its bodies the cards' panel. */
.site-sheet-details {
    --bs-accordion-bg: var(--site-panel);
    --bs-accordion-btn-color: var(--site-ink-text);
    --bs-accordion-btn-bg: var(--site-ink);
    --bs-accordion-active-color: var(--site-ink-text);
    --bs-accordion-active-bg: var(--site-ink);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--site-accent) 45%, transparent);
    /* Bootstrap's chevron, bone white (--site-ink-text) on the black banner in both themes. */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f1e6d6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f1e6d6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.site-sheet-details .accordion-button {
    font-family: var(--site-display);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-sheet-details .accordion-button:not(.collapsed) {
    box-shadow: inset 0 -2px 0 var(--site-accent);
}

/* ------------------------------------------------------------ Experience (modals/xp.php) */
/* "Remaining XP" on the portrait card and in the modal's banner; red when more was spent than awarded. */
.site-xp-balance {
    --bs-btn-color: var(--site-accent);
    --bs-btn-hover-color: var(--site-ember);
    font-family: var(--site-display);
    letter-spacing: 0.04em;
    text-decoration: none;
}

.site-xp .modal-header .site-xp-balance {
    color: var(--site-ink-text);
}

.site-xp-balance.is-over,
.site-xp .modal-header .site-xp-balance.is-over {
    --bs-btn-color: var(--site-flare);
    color: var(--site-flare);
}

.site-xp-table {
    --bs-table-bg: transparent;
    margin-bottom: 1rem;
}

.site-xp-table th[scope="row"] {
    font-weight: 400;
}

.site-xp-award {
    color: var(--bs-success-text-emphasis);
}

.site-xp-spend {
    color: var(--site-flare);
}

.site-xp-amount {
    max-width: 6rem;
}

/* The portrait as a button for the owner and Players: it opens the portrait modal; a rust ring and a slight lift on hover. */
/* It takes the image's place in the card, so it grows the same way and passes the height on. */
.site-sheet-portrait-edit {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.site-sheet-portrait-edit:hover .card-img-top,
.site-sheet-portrait-edit:focus-visible .card-img-top {
    filter: brightness(1.12);
    box-shadow: inset 0 0 0 3px var(--site-ember);
}

.site-sheet-portrait-edit .site-sheet-portrait-empty {
    width: 100%;
}

/* The portrait modal's preview: the same upright frame as the sheet, smaller. */
.site-avatar-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12rem;
    aspect-ratio: 3 / 4;
    margin-inline: auto;
    overflow: hidden;
    border: 2px solid var(--site-accent);
    color: color-mix(in srgb, currentColor 30%, transparent);
}

.site-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-avatar-preview svg {
    width: 50%;
    height: 50%;
}

/* Home page: each character as a small copy of the sheet's portrait card (includes/character-dossier.php). Its footer
   is half again as solid as the veiled card (75% -> about 88%), so the background art does not show through the text. */
.site-dossier-portrait .card-footer {
    padding: 0.5rem 0.65rem;
    background-color: color-mix(in srgb, var(--site-panel) 50%, transparent);
}

.site-dossier-name {
    font-family: var(--site-display);
    font-weight: 700;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-dossier-portrait:hover .card-img-top,
.site-dossier-portrait:focus-visible .card-img-top {
    filter: brightness(1.12);
}

/* ------------------------------------------------------------ Gear on the sheet (includes/sheet-gear.php) */
/* Each item is a slim accordion header in the body's own colours, not the section banners around it. */
.site-gear-list {
    --bs-accordion-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: inherit;
    --bs-accordion-btn-padding-y: 0.3rem;
    --bs-accordion-btn-padding-x: 0.5rem;
    --bs-accordion-body-padding-y: 0.4rem;
    --bs-accordion-body-padding-x: 0.5rem;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--site-accent) 45%, transparent);
}

.site-sheet-details .site-gear-list .accordion-button {
    gap: 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
}

.site-gear-suffix {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.site-gear-line {
    font-size: 0.8rem;
}

.site-gear-edit {
    padding-top: 0.4rem;
    border-top: 1px dotted var(--bs-border-color);
}

/* The Armor Value on the Vitals banner. */
.site-sheet-av {
    font-size: 0.85rem;
    color: var(--site-ember);
}

/* The Add gear modal's lists: one line per book item, its stats hint under the name. */
.site-gear-add-list li {
    padding: 0.25rem 0;
    border-bottom: 1px dotted var(--bs-border-color);
}

/* A customised gear item (a Smith's forged work): its stats differ from the book's. */
.site-gear-custom {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--site-accent-contrast);
    background-color: var(--site-accent);
}

/* Dice / Diceless (js/dice.js): a roll is printed both ways and the switch shows one. */
.site-diceless,
.site-diceless-mode .site-dice {
    display: none;
}

.site-diceless-mode .site-diceless {
    display: inline;
}

.site-dice-switch .form-switch {
    padding-left: 2.5em;
}

/* A gear line with nothing to open (Punch, Kick): the same size as the item headers around it. */
.site-gear-plain {
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
}

.site-gear-damage {
    color: var(--bs-secondary-color);
}

/* An Atlantean metal on a gear item: Adamant or Orikalk. */
.site-gear-metal {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--site-ink);
    background-color: var(--site-gold);
}

/* Step 5's Adamant or Orikalk artifact rows: which weapon or armor it is. */
.site-artifact-item {
    max-width: 16rem;
}

/* A name with a summary (classes/logic/Summary.php): a dotted underline says "click me"; the text stays in the popover. */
.site-summary {
    color: inherit;
    text-decoration: underline dotted var(--bs-secondary-color);
    text-underline-offset: 0.2em;
    cursor: help;
}

.site-summary-info {
    color: var(--bs-secondary-color);
    cursor: help;
}

.site-summary-info svg {
    vertical-align: -0.125em;
}