/* Component + layout styling for the Pathfinder Codex, built on Bootstrap + theme.css tokens. */

/* ---- Header / nav ---- */
.codex-header {
    background: linear-gradient(180deg, #2a2118 0%, #3a2c1d 100%);
    border-bottom: 3px solid var(--codex-gold);
    box-shadow: 0 2px 8px var(--codex-shadow);
}

.codex-brand {
    font-family: var(--codex-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--codex-gold-bright) !important;
    text-decoration: none;
    white-space: nowrap;
}

.codex-brand:hover {
    color: #e8c65a !important;
    text-decoration: none;
}

.codex-nav a {
    color: #efe3c6;
    font-family: var(--codex-font-display);
    font-size: 0.95rem;
}

.codex-nav a:hover {
    color: var(--codex-gold-bright);
    text-decoration: none;
}

/* ---- Quick search + suggestions ---- */
.codex-quicksearch-wrap {
    position: relative;
    min-width: 240px;
}

.codex-quicksearch {
    position: relative;
}

.codex-suggest {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 4px);
    /* The dropdown may be WIDER than the input (long names + meta lines read better), but stays
       overflow-safe: anchored to the input's RIGHT edge (the search box is right-aligned in the
       header), it grows leftward to fit its content — at least the input width, never past an
       aesthetic cap, and never past 92vw so it always fits the viewport on phones. */
    right: 0;
    left: auto;
    min-width: 100%;
    width: max-content;
    max-width: min(32rem, 92vw);
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--codex-panel);
    border: 1px solid var(--codex-rule);
    border-radius: 6px;
    box-shadow: 0 6px 18px var(--codex-shadow);
    max-height: 60vh;
    overflow-y: auto;
}

@media (max-width: 600px) {
    /* On narrow screens the header wraps the search box to its own near-full-width row; keep the
       dropdown within the viewport. */
    .codex-suggest { max-width: 92vw; }
}

.codex-suggest li > a {
    display: block;
    padding: 0.4rem 0.7rem;
    color: var(--codex-ink);
    border-bottom: 1px solid rgba(205, 185, 138, 0.4);
}

.codex-suggest li > a:hover,
.codex-suggest li.is-active > a {
    background: var(--codex-parchment-2);
    text-decoration: none;
}

.codex-suggest .codex-suggest-name { font-weight: 600; }
.codex-suggest .codex-suggest-meta { display: block; font-size: 0.8rem; color: var(--codex-ink-soft); }

/* Loading row shown while a suggestion request is in flight. Not a result (no anchor) — keyboard
   nav skips it. */
.codex-suggest .codex-suggest-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    color: var(--codex-ink-soft);
    font-size: 0.85rem;
}

.codex-suggest-spinner {
    flex: none;
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid var(--codex-rule);
    border-top-color: var(--codex-ink);
    border-radius: 50%;
    animation: codex-suggest-spin 0.7s linear infinite;
}

@keyframes codex-suggest-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .codex-suggest-spinner { animation-duration: 1.6s; }
}

/* ---- Hero / home ---- */
.codex-hero {
    padding: 2.5rem 1rem 1.5rem;
}

.codex-hero-title {
    font-size: 2.6rem;
    color: var(--codex-blood);
}

.codex-hero-tagline {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--codex-ink-soft);
}

.codex-section-tile {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.2rem 1.4rem;
    background: var(--codex-panel);
    border: 1px solid var(--codex-rule);
    border-left: 5px solid var(--codex-gold);
    border-radius: 8px;
    box-shadow: 0 2px 6px var(--codex-shadow);
    height: 100%;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.codex-section-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px var(--codex-shadow);
    text-decoration: none;
}

.codex-section-tile--accent { border-left-color: var(--codex-blood); }
.codex-section-name { font-family: var(--codex-font-display); font-size: 1.3rem; color: var(--codex-ink); }
.codex-section-go { color: var(--codex-ink-soft); font-style: italic; }

/* ---- Page head / browse ---- */
.codex-page-head {
    border-bottom: 2px solid var(--codex-rule);
    padding-bottom: 0.6rem;
    margin-bottom: 1.4rem;
}

.codex-page-head h1 { color: var(--codex-blood); }

.codex-browse-block { margin-bottom: 1.6rem; }
.codex-browse-title { font-size: 1.25rem; color: var(--codex-ink); border-bottom: 1px dashed var(--codex-rule); padding-bottom: 0.2rem; }

.codex-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }

.codex-chip {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    background: var(--codex-panel);
    border: 1px solid var(--codex-rule);
    border-radius: 999px;
    color: var(--codex-ink);
    font-size: 0.95rem;
}

.codex-chip:hover { background: var(--codex-gold); color: #fff; text-decoration: none; }
.codex-chip--letter { font-family: var(--codex-font-display); min-width: 2.2rem; text-align: center; }

/* ---- Result cards ---- */
.codex-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    padding: 0.8rem 1rem;
    background: var(--codex-panel);
    border: 1px solid var(--codex-rule);
    border-radius: 6px;
    box-shadow: 0 1px 3px var(--codex-shadow);
    transition: border-color 0.08s ease, box-shadow 0.08s ease;
}

.codex-card:hover { border-color: var(--codex-gold); box-shadow: 0 4px 10px var(--codex-shadow); text-decoration: none; }
.codex-card-title { font-family: var(--codex-font-display); font-size: 1.1rem; color: var(--codex-blood); }
.codex-card-summary { font-size: 0.9rem; color: var(--codex-ink-soft); }

/* ---- Sticky list header (title + sort) ---- */
.codex-list-head {
    position: sticky;
    top: 0;
    z-index: 400;
    margin: 0 -0.75rem 1.4rem;
    padding: 0.6rem 0.75rem;
    background: rgba(243, 233, 210, 0.97);
    border-bottom: 2px solid var(--codex-gold);
    box-shadow: 0 3px 8px var(--codex-shadow);
}

.codex-list-head h1 { color: var(--codex-blood); margin-bottom: 0; }

/* ---- Pager (sticky to viewport bottom) ---- */
.codex-pager {
    position: sticky;
    bottom: 0;
    z-index: 400;
    margin: 1.5rem -0.75rem 0;
    padding: 0.7rem 0.75rem;
    background: rgba(243, 233, 210, 0.97);
    border-top: 2px solid var(--codex-gold);
    box-shadow: 0 -3px 8px var(--codex-shadow);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.codex-pager-status { font-style: italic; color: var(--codex-ink-soft); }

.codex-pager-jump {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.codex-pager-jump-label { font-size: 0.85rem; color: var(--codex-ink-soft); margin: 0; }
.codex-pager-jump-input { width: 5rem; }

/* ---- Spell detail ---- */
.codex-crumbs { font-size: 0.9rem; color: var(--codex-ink-soft); margin-bottom: 0.3rem; }
.codex-spell-school { font-size: 1.15rem; font-weight: 500; color: var(--codex-ink); }
.codex-spell-descriptors { color: var(--codex-blood); }
.codex-legality { font-size: 0.9rem; color: var(--codex-blood); font-weight: 600; }

.codex-tag {
    font-family: var(--codex-font-body);
    font-size: 0.8rem;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    vertical-align: middle;
}

.codex-tag--mythic { background: var(--codex-gold); color: #fff; }

.codex-statblock {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    background: var(--codex-panel);
    border: 1px solid var(--codex-rule);
    border-top: 3px solid var(--codex-gold);
    border-radius: 6px;
    padding: 1rem 1.2rem;
    margin: 1rem 0;
}

.codex-statblock dt { font-family: var(--codex-font-display); font-size: 0.95rem; color: var(--codex-ink); }
.codex-statblock dd { margin: 0; }

/* Ritual skill-check table (Rituals detail page). Themed like the stat block. */
.codex-skill-checks { margin: 1.2rem 0; }
.codex-skill-checks h2 { font-family: var(--codex-font-display); color: var(--codex-blood); font-size: 1.25rem; }
.codex-skill-check-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--codex-panel);
    border: 1px solid var(--codex-rule);
    border-top: 3px solid var(--codex-gold);
    border-radius: 6px;
    overflow: hidden;
}
.codex-skill-check-table th,
.codex-skill-check-table td {
    text-align: left;
    padding: 0.4rem 0.8rem;
    border-bottom: 1px solid var(--codex-rule);
    color: var(--codex-ink);
}
.codex-skill-check-table thead th {
    font-family: var(--codex-font-display);
    background: var(--codex-parchment-2);
    color: var(--codex-ink);
}
.codex-skill-check-table tbody tr:last-child td { border-bottom: none; }

/* "Choose one" OR-group inside a skill-check row — a nested table of alternatives. */
.codex-skill-choose { display: block; font-style: italic; color: var(--codex-ink-soft); font-size: 0.85rem; margin-bottom: 0.2rem; }
.codex-skill-alt-table { width: auto; border-collapse: collapse; margin: 0; }
.codex-skill-alt-table td { padding: 0.1rem 0.5rem 0.1rem 0.8rem; border: none; border-left: 2px solid var(--codex-gold); }

/* Advanced-search NumberRange facet (e.g. secondary casters) — two compact inputs. */
.codex-number-range { display: flex; align-items: center; gap: 0.4rem; }
.codex-number-range input { max-width: 5rem; }
.codex-range-sep { color: var(--codex-ink-soft); font-style: italic; }

/* Advanced-search SkillRange facet — a checkbox row + optional per-skill DC min/max. */
.codex-skill-range-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.codex-skill-range-row .codex-check { flex: 1 1 auto; min-width: 0; }
.codex-skill-dc { display: inline-flex; gap: 0.3rem; flex: 0 0 auto; }
.codex-skill-dc-input { width: 4.6rem; }

/* On narrow/mobile screens the skill row (now also carrying the I./E. + O./A. buttons) is too
   crowded to keep the DC min/max inputs on the same line — wrap them onto their own line beneath
   the checkbox + buttons. Bootstrap 'sm' breakpoint. */
@media (max-width: 575.98px) {
    .codex-skill-range-row { flex-wrap: wrap; }
    .codex-skill-range-row .codex-skill-dc { flex-basis: 100%; justify-content: flex-start; margin-top: 0.2rem; }
}
/* DC + Successes columns are short — keep them tight so Skill takes the width. */
.codex-skill-check-table th:nth-child(2), .codex-skill-check-table td:nth-child(2),
.codex-skill-check-table th:nth-child(3), .codex-skill-check-table td:nth-child(3) { width: 6rem; white-space: nowrap; }

/* Reusable hover popover (see wwwroot/js/codex-popover.js). The trigger wraps a value; the panel
   is a single body-level floating element styled to match the codex theme. */
.codex-pop-trigger {
    text-decoration: underline dotted var(--codex-gold);
    text-underline-offset: 0.18em;
    cursor: help;
}

.codex-popover {
    position: absolute;
    z-index: 1080;
    max-width: min(24rem, 92vw);
    background: var(--codex-parchment);
    border: 1px solid var(--codex-gold);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--codex-ink);
}

.codex-pop-row { margin-bottom: 0.4rem; }
.codex-pop-abbr { font-family: var(--codex-font-display); color: var(--codex-blood); }

.codex-pop-link {
    display: block;                 /* one link per line — stacks multiple "full rule" links */
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--codex-blood);
}

/* Pinned (click-to-open) popover variant — see data-codex-popover-mode="click" in codex-popover.js.
   Stays open until the × / Esc / an outside click closes it. Used for school/subschool/descriptor
   description popovers on the spell page. */
.codex-pop-trigger--click { cursor: pointer; }

.codex-popover--pinned {
    padding-top: 1.6rem;        /* clear the × button */
    padding-right: 1.1rem;
    max-height: min(70vh, 28rem);
    overflow-y: auto;
}

.codex-pop-close {
    position: absolute;
    top: 0.25rem;
    right: 0.4rem;
    border: 0;
    background: transparent;
    color: var(--codex-blood);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.1rem 0.35rem;
    cursor: pointer;
}
.codex-pop-close:hover { color: var(--codex-blood-bright); }

/* Optional header line at the top of a popover panel (e.g. domain replaced-power lookups
   show "Power Name (Su)" before the body). Same display font as section headings, smaller. */
.codex-pop-head {
    font-family: var(--codex-font-display);
    font-size: 1rem;
    color: var(--codex-ink);
    margin-bottom: 0.35rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--codex-rule);
}

/* DB HTML description rendered inside a popover (formatting-only, scraper-sanitized) — compact
   variant of .codex-description tuned for the smaller panel context. */
.codex-pop-desc p { margin: 0 0 0.5rem; }
.codex-pop-desc p:last-child { margin-bottom: 0; }
.codex-pop-desc strong, .codex-pop-desc b { font-weight: 700; color: var(--codex-ink); }
.codex-pop-desc em, .codex-pop-desc i { font-style: italic; }
.codex-pop-desc ul, .codex-pop-desc ol { margin: 0 0 0.5rem 1.2rem; }
.codex-pop-desc li { margin-bottom: 0.2rem; }
.codex-pop-desc a { color: var(--codex-blood); border-bottom: 1px dotted var(--codex-gold); }
.codex-pop-desc table { border-collapse: collapse; margin: 0.5rem 0; }
.codex-pop-desc td, .codex-pop-desc th { border: 1px solid var(--codex-rule); padding: 0.2rem 0.45rem; }
.codex-pop-desc th { background: var(--codex-parchment-2); font-family: var(--codex-font-display); }

.codex-pop-foot {
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--codex-rule);
    font-size: 0.85rem;
}
.codex-pop-source { display: block; color: var(--codex-ink-soft); }

/* Link wrapping a source-book name when the DB has a paizo.com ProductUrl (see _SourceBook.cshtml).
   Inherits the surrounding "Source: …" text colour; only underlines on hover so it reads as text
   until the reader interacts with it. */
.codex-source-link { color: inherit; text-decoration: none; }
.codex-source-link:hover,
.codex-source-link:focus { text-decoration: underline; }

.codex-components-detail { font-size: 0.95rem; color: var(--codex-ink-soft); }

.codex-description {
    margin: 1.2rem 0;
    line-height: 1.7;
    font-size: 1.08rem;
}

.codex-description :is(table) {
    border-collapse: collapse;
    margin: 1rem 0;
}

.codex-description :is(td, th) {
    border: 1px solid var(--codex-rule);
    padding: 0.3rem 0.6rem;
}

/* DescriptionHtml is formatting-only HTML from the scraper — style the tags it can emit. */
.codex-description p { margin: 0 0 0.8rem; }
.codex-description strong, .codex-description b { font-weight: 700; color: var(--codex-ink); }
.codex-description em, .codex-description i { font-style: italic; }
.codex-description h2, .codex-description h3, .codex-description h4 {
    font-family: var(--codex-font-display);
    color: var(--codex-blood);
    margin: 1.1rem 0 0.4rem;
}
.codex-description h3 { font-size: 1.2rem; }
.codex-description h4 { font-size: 1.05rem; }
.codex-description ul, .codex-description ol { margin: 0 0 0.8rem 1.4rem; }
.codex-description li { margin-bottom: 0.25rem; }
.codex-description th { background: var(--codex-parchment-2); font-family: var(--codex-font-display); }
.codex-description a { border-bottom: 1px dotted var(--codex-gold); }
.codex-description blockquote {
    margin: 0.8rem 0;
    padding: 0.3rem 0 0.3rem 1rem;
    border-left: 3px solid var(--codex-gold);
    color: var(--codex-ink-soft);
}

.codex-grants, .codex-variants {
    background: var(--codex-parchment-2);
    border: 1px solid var(--codex-rule);
    border-radius: 6px;
    padding: 0.9rem 1.2rem;
    margin: 1rem 0;
}

.codex-grants h2, .codex-variants h2 { font-size: 1.2rem; }
/* Edicts / Anathema / Obedience: keep them as headers but dial back the size + weight so they read
   as flavor sub-sections, not page-dominating headings. */
.codex-deity-subhead { font-size: 1rem; font-weight: 600; margin: 0.6rem 0 0.2rem; }
.codex-grant-group { margin-bottom: 0.4rem; }
.codex-grant-label { font-family: var(--codex-font-display); color: var(--codex-blood); margin-right: 0.4rem; }

/* Unique Summon Rules — one line per rule: spell : monster — alignment (note). */
.codex-summon-rules { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.codex-summon-rules li { padding: 0.15rem 0; line-height: 1.5; }
.codex-summon-sep { color: var(--codex-ink-soft, #6b5d4f); margin: 0 0.15rem; }
.codex-summon-monster { font-style: italic; }
.codex-summon-note { color: var(--codex-ink-soft, #6b5d4f); font-size: 0.92em; margin-left: 0.3rem; }
.codex-summon-legality { color: var(--codex-ink-soft, #6b5d4f); font-size: 0.85em; font-style: italic; margin-left: 0.3rem; }

/* Unique Spell Rules (deity detail): a class-set header with its spell line(s) beneath, each
   `Spell (link): clause`. The clause renders as STANDARD body text (not a softened/smaller style). */
.codex-spell-rule-classgroup { margin: 0.3rem 0 0.6rem; }
.codex-spell-rule-class { font-weight: 600; margin: 0.3rem 0 0.15rem; }
.codex-spell-rules { list-style: none; margin: 0; padding: 0 0 0 0.9rem; }
.codex-spell-rules li { padding: 0.12rem 0; line-height: 1.5; }
.codex-spell-rule-sep { margin-right: 0.15rem; }
/* A class-set with a single spell renders flat on one line (Class — Spell: clause), no header/list. */
.codex-spell-rule-single { margin: 0.3rem 0; line-height: 1.5; }

/* Source/legality split: each source group is a bordered block — legality at the top, source at the
   bottom. (The non-split case stays flat with the source at the top, reusing .codex-block-source.) */
.codex-spell-rule-block { border: 1px solid var(--codex-border, #d9cdbb); border-radius: 6px; padding: 0.4rem 0.8rem 0.2rem; margin: 0.6rem 0; }
.codex-block-legality { color: var(--codex-ink-soft, #6b5d4f); font-size: 0.85em; font-style: italic; margin: 0 0 0.3rem; }
.codex-block-source--foot { margin-top: 0.3rem; }

/* Variant family tree (spell detail): nested <ul>/<li> with connector guide-lines.
   The root level has no connectors; every nested level draws an elbow to each node and a
   vertical line linking siblings (stopped at the last child). */
.codex-variant-tree, .codex-variant-tree ul { list-style: none; margin: 0; padding: 0; }
.codex-variant-tree { font-size: 0.98rem; }
.codex-variant-tree ul { padding-left: 1.1rem; }
.codex-variant-tree li { position: relative; padding: 0.14rem 0; line-height: 1.5; }

.codex-variant-tree ul > li::before {     /* vertical line through the siblings */
    content: ""; position: absolute;
    left: -0.55rem; top: 0; height: 100%;
    border-left: 1px solid var(--codex-rule);
}
.codex-variant-tree ul > li::after {      /* horizontal elbow into the node */
    content: ""; position: absolute;
    left: -0.55rem; top: 0.85rem; width: 0.55rem;
    border-top: 1px solid var(--codex-rule);
}
.codex-variant-tree ul > li:last-child::before { height: 0.85rem; }  /* stop at the elbow */

.codex-tree-link { color: var(--codex-blood); }
.codex-tree-link:hover { color: var(--codex-blood-bright); }
.codex-tree-current {     /* the spell you're on — plain text, not a link */
    font-family: var(--codex-font-display);
    font-weight: 700;
    color: var(--codex-ink);
}

/* Worship requirement line, shown above the "Available to" heading. */
.codex-worship { margin: 0 0 0.6rem; }

.codex-spell-source {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 1.5rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--codex-rule);
    font-size: 0.9rem;
    color: var(--codex-ink-soft);
}

/* ---- Advanced search ---- */
.codex-advanced-section {
    background: var(--codex-panel);
    border: 1px solid var(--codex-rule);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
}

/* Section header row: toggle on the left, per-section Clear button on the right, same line. */
.codex-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.codex-section-toggle {
    font-family: var(--codex-font-display);
    font-size: 1.2rem;
    color: var(--codex-blood);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    flex: 0 0 auto;
}

.codex-section-clear { flex: 0 0 auto; }

.codex-section-panel { margin-top: 1rem; }

.codex-advanced-top { margin-bottom: 1rem; }

/* Quick name field (outside the advanced blocks). */
.codex-quick-field { margin-bottom: 0.8rem; max-width: 32rem; }
.codex-quick-label { font-family: var(--codex-font-display); font-size: 0.95rem; color: var(--codex-ink); display: block; margin-bottom: 0.2rem; }

/* Advanced-filters collapse toggle + arrow. */
.codex-adv-toggle {
    background: none;
    border: none;
    padding: 0.2rem 0;
    font-family: var(--codex-font-display);
    font-size: 1.05rem;
    color: var(--codex-blood);
    cursor: pointer;
}

.codex-adv-toggle:hover { color: var(--codex-blood-bright); }
.codex-adv-arrow { display: inline-block; width: 1em; }
.codex-adv-area { margin-top: 0.8rem; }

/* Per-facet tool row: All / None + filter. */
.codex-facet-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}

.codex-facet-tools .codex-facet-filter { flex: 1 1 8rem; min-width: 6rem; }

.codex-mini-btn {
    border: 1px solid var(--codex-rule);
    background: var(--codex-parchment-2);
    color: var(--codex-ink);
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 0.1rem 0.5rem;
    cursor: pointer;
}

.codex-mini-btn:hover { background: var(--codex-gold); color: #fff; }

/* Clickable spell-level link in the "Available to" block. */
.codex-level-link {
    font-weight: 600;
    border-bottom: 1px dotted var(--codex-gold);
}

.codex-facet {
    background: var(--codex-parchment);
    border: 1px solid var(--codex-rule);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    /* NO height:100% — do NOT stretch facets to the row's tallest box. A facet carrying an extra
       element (the Alignment "Match against" scope select) is taller; stretching its row-mates to
       match used to leave dead space below their fixed-height option lists. Letting each facet size
       to its own content removes that gap while the option list keeps its own scroll (max-height
       below). Same approach the Bool/compact facets already use. */
}

/* Single-dropdown facets (Bool): size to content instead of stretching to the row's tallest box. */
.codex-facet--compact { height: auto; }
.codex-facet--textgroup .codex-textgroup-row { margin-bottom: 0.5rem; }
.codex-facet--textgroup .codex-textgroup-row:last-child { margin-bottom: 0; }
.codex-facet--textgroup .codex-facet-sublabel { margin-bottom: 0.15rem; }

.codex-facet-legend { font-family: var(--codex-font-display); font-size: 1rem; color: var(--codex-ink); float: none; width: auto; }
.codex-facet-sublabel { font-size: 0.85rem; color: var(--codex-ink-soft); display: block; }

.codex-facet-options {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 0.3rem;
}

.codex-check-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0;
}

.codex-check-row.is-hidden { display: none; }

.codex-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    flex: 1 1 auto;
    margin: 0;
    cursor: pointer;
}

/* Per-item Include/Exclude (I./E.) + Or/And (O./A.) toggle buttons before each multiselect checkbox.
   Kept small — no wider than the checkbox itself (≤ ~1.25× a native checkbox) — so the 2-char text
   is necessarily tiny; the full word lives in the codex-popover. Default (Include / Or) is the light
   parchment look; the Exclude and And states share the darker gold fill. */
.codex-item-btn {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 1px solid var(--codex-rule);
    border-radius: 50%;
    background: var(--codex-parchment-2);
    color: var(--codex-ink);
    font-family: var(--codex-font-body);
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.codex-item-btn:hover { border-color: var(--codex-gold); }
.codex-item-btn-text { pointer-events: none; }

.codex-item-mode--exclude,
.codex-item-combine--and {
    background: var(--codex-gold);
    color: #fff;
    border-color: var(--codex-gold);
}

/* Result count on browse/list pages (the pager only shows a count when paginated). */
.codex-list-count { margin: 0.15rem 0 0; font-size: 0.9rem; }

/* Magnifying-glass quick-search icon (spell detail page only). */
.codex-quick-icon {
    display: inline-block;
    vertical-align: middle;
    width: 0.86rem;
    height: 0.86rem;
    border-radius: 3px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.68rem 0.68rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237b1e1e' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.3'/%3E%3Cline x1='10' y1='10' x2='14' y2='14'/%3E%3C/svg%3E");
    opacity: 0.75;
}

.codex-quick-icon:hover {
    opacity: 1;
    background-color: var(--codex-parchment-2);
}

.codex-quick-icon--inline { vertical-align: -0.05em; }

.codex-taxon { white-space: nowrap; }

/* Sticky search bar — pinned to the bottom of the viewport while scrolling the long form. */
.codex-advanced-actions {
    position: sticky;
    bottom: 0;
    z-index: 500;
    margin: 1.5rem -0.75rem 0;
    padding: 0.8rem 0.75rem;
    background: rgba(243, 233, 210, 0.96);
    border-top: 2px solid var(--codex-gold);
    box-shadow: 0 -4px 10px var(--codex-shadow);
    display: flex;
    justify-content: flex-end;
}

.codex-advanced-actions .btn-primary { min-width: 10rem; }

/* ---- Result groups ---- */
.codex-result-group { margin-bottom: 2rem; }
.codex-result-group-title { color: var(--codex-blood); border-bottom: 1px dashed var(--codex-rule); padding-bottom: 0.3rem; }
.codex-result-count {
    font-family: var(--codex-font-body);
    font-size: 0.9rem;
    background: var(--codex-gold);
    color: #fff;
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    vertical-align: middle;
}

/* ---- Footer ---- */
.codex-footer {
    margin-top: 3rem;
    background: #2a2118;
    color: #cdbb95;
    border-top: 3px solid var(--codex-gold);
    font-size: 0.9rem;
}

.codex-footer-meta { display: block; margin-top: 0.25rem; opacity: 0.7; }

/* ---- Domain detail: Replacement preamble (subdomain) ---- */
.codex-replacement {
    background: var(--codex-parchment-2);
    border: 1px solid var(--codex-rule);
    border-radius: 6px;
    padding: 0.9rem 1.2rem;
    margin: 1rem 0;
}
.codex-replacement h2 { font-size: 1.2rem; }
.codex-replacement p { margin: 0; color: var(--codex-ink-soft); font-style: italic; }

/* ---- Domain detail: Granted Powers ---- */
.codex-domain-powers .codex-power-list { display: flex; flex-direction: column; gap: 0.35rem; }
.codex-power-item { display: flex; align-items: baseline; }
.codex-power-item--variant { padding-left: 0.4rem; }
.codex-power-item > details { flex: 1 1 auto; min-width: 0; }
.codex-power-parent {
    flex: 0 0 auto;
    font-family: var(--codex-font-display);
    color: var(--codex-ink-soft);
    margin-right: 0.35rem;
    font-size: 1.05rem;
    line-height: 1;
}
.codex-power-summary { cursor: pointer; padding: 0.15rem 0; }
.codex-power-summary:hover .codex-power-name { color: var(--codex-blood); }
.codex-power-name {
    font-family: var(--codex-font-display);
    font-size: 1.05rem;
    color: var(--codex-ink);
}
.codex-power-replaces {
    margin-left: 0.5rem;
    font-size: 0.88rem;
    color: var(--codex-ink-soft);
    font-style: italic;
}
.codex-power-replaces em { font-style: normal; }
.codex-power-variant-tail {
    margin-left: 0.5rem;
    font-size: 0.88rem;
    color: var(--codex-ink-soft);
    font-style: italic;
}
.codex-power-body { padding: 0.4rem 0 0.6rem 1.1rem; line-height: 1.5; }

/* ---- Deity detail page ---- */

/* Portrait floats LEFT of the description so the body text wraps to its right and continues below
   if longer than the image. Margin gives the text breathing room from the float. */
.codex-deity-portrait--inline {
    float: left;
    max-width: 240px;
    margin: 0 1rem 0.5rem 0;
    border-radius: 4px;
}

/* Alignment row sits on its own line below the title (not inline with the h1). */
.codex-deity-alignment-row {
    margin: 0.25rem 0 0.75rem 0;
}

/* Comma-separated token anchors in the stat-block (Areas of Concern, Symbol, Sacred Animals, etc.).
   Subtle hover so the reader knows each chunk is its own click target. */
.codex-deity-token {
    color: var(--codex-ink);
    text-decoration: none;
    border-bottom: 1px dotted var(--codex-ink-soft);
}
.codex-deity-token:hover { color: var(--codex-link, var(--codex-ink)); border-bottom-style: solid; }

/* Boon path heading: visually distinct so the reader can see where each path starts. Each
   path's boons live in a soft-bordered card; the card itself is a <details open> collapsible
   (same arrow style as individual boons) so the reader can fold a whole path away. */
.codex-boon-group {
    margin: 1.2rem 0 1rem 0;
    padding: 0.6rem 0.9rem 0.8rem 0.9rem;
    border: 1px solid var(--codex-rule, rgba(120, 90, 50, 0.35));
    border-radius: 6px;
    background: var(--codex-card-bg, rgba(255, 252, 245, 0.55));
}
.codex-boon-group-details > summary { list-style: none; cursor: pointer; }
.codex-boon-group-details > summary::-webkit-details-marker { display: none; }
.codex-boon-path-summary {
    margin: 0 0 0.6rem 0;
    padding: 0 0 0.35rem 0;
    border-bottom: 2px solid var(--codex-rule, rgba(120, 90, 50, 0.45));
}
.codex-boon-path-summary::before {
    content: "▸ ";
    color: var(--codex-ink-soft);
    font-size: 1rem;
    margin-right: 0.25rem;
    transition: transform 120ms ease-out;
    display: inline-block;
}
.codex-boon-group-details[open] > summary.codex-boon-path-summary::before { content: "▾ "; }
.codex-boon-path {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--codex-ink);
}

/* Category box wraps the path-group cards inside it. Slightly stronger border so the nesting
   hierarchy reads as Category > Path > Boon at a glance. */
.codex-boon-category {
    margin: 1.4rem 0 1.2rem 0;
    padding: 0.7rem 1rem 1rem 1rem;
    border: 1px solid var(--codex-rule, rgba(120, 90, 50, 0.5));
    border-radius: 8px;
    background: var(--codex-card-bg, rgba(255, 252, 245, 0.55));
}
/* Pantheon-category descriptive prose, under the category source row (path-less boons). */
.codex-boon-category-desc { margin: 0.2rem 0 0.6rem; line-height: 1.5; }
.codex-boon-category-details > summary { list-style: none; cursor: pointer; }
.codex-boon-category-details > summary::-webkit-details-marker { display: none; }
.codex-boon-category-summary {
    margin: 0 0 0.5rem 0;
    padding: 0 0 0.4rem 0;
    border-bottom: 2px solid var(--codex-rule, rgba(120, 90, 50, 0.55));
}
.codex-boon-category-summary::before {
    content: "▸ ";
    color: var(--codex-ink-soft);
    font-size: 1.05rem;
    margin-right: 0.25rem;
    display: inline-block;
}
.codex-boon-category-details[open] > summary.codex-boon-category-summary::before { content: "▾ "; }
.codex-boon-category-name {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--codex-ink);
}

/* Inline source-book row used inside a Category card, Path card, or under a Divine Gift h2.
   Subdued italic so it reads as metadata, not body content. */
.codex-block-source {
    margin: 0.15rem 0 0.55rem 0;
    font-size: 0.88rem;
    color: var(--codex-ink-soft);
    font-style: italic;
}

/* "Required feat: <Name> 🔍" row inside a Category card, between the heading and the source.
   Slightly weightier than the source row since the feat IS gameplay-relevant content (it's
   the prerequisite the player must own to gain the boon). */
.codex-block-feat {
    margin: 0.1rem 0 0.4rem 0;
    font-size: 0.93rem;
    color: var(--codex-ink);
}
.codex-block-feat-label {
    color: var(--codex-ink-soft);
    margin-right: 0.3rem;
}
.codex-block-feat-name {
    font-weight: 600;
}

/* Section spacing — only the sections BETWEEN the top codex-grants (Pantheons) and the bottom
   codex-grants (Domains / Subdomains / Spells Requiring Worship) get the added margin-top.
   The codex-grants sections themselves keep their natural sibling-grouping (the bottom three
   read as a related block at the foot of the page; the top one is the very first section). */
.codex-spell > section:not(.codex-grants) { margin-top: 1.5rem; }

/* Click-to-fullscreen image overlay (codex-fullscreen-image.js). Triggers on any img tagged
   with `data-codex-fullscreen`. Click the image → overlay fades in, image centered on a
   faded-black backdrop; click anywhere (image or backdrop) → overlay fades out. */
.codex-fullscreen-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 160ms ease-out;
    cursor: zoom-out;
}
.codex-fullscreen-overlay.codex-fullscreen-overlay--open { opacity: 1; }
.codex-fullscreen-overlay img {
    max-width: 92vw;
    max-height: 92vh;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    border-radius: 4px;
}
img[data-codex-fullscreen] { cursor: zoom-in; }