/* SRD Rules — generated by RavenWrite */

/* ── Content images & tables ── */
.srd-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
}
.srd-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    font-size: 0.9rem;
}
.srd-content th, .srd-content td {
    border: 1px solid var(--srd-border);
    padding: 0.4rem 0.6rem;
    vertical-align: top;
    text-align: left;
}
.srd-content th {
    background: var(--srd-card-bg);
    font-weight: 600;
}
.srd-content th p, .srd-content td p {
    margin: 0.15rem 0;
}


/* ── Monster entry ─────────────────────────────────────────────── */
.rw-monster-entry {
  display: block;
}
.rw-monster-head {
  border-bottom: 1.5pt solid currentColor;
  padding-bottom: 0.15em;
  margin-bottom: 0.5em;
  break-after: avoid;
}
.rw-monster-name {
  margin: 0;
  font-size: 1.75em;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.rw-monster-sub {
  font-size: 0.8em;
  font-style: italic;
  opacity: 0.75;
  margin-top: 0.15em;
}

/* Art floats to the outside edge so text wraps around it, the way a
   Monster Manual page reads. */
.rw-monster-art {
  float: right;
  width: 42%;
  margin: 0 0 0.6em 0.8em;
  break-inside: avoid;
}
.rw-monster-art img {
  width: 100%;
  height: auto;
  display: block;
}
.rw-art-placeholder {
  border: 1pt dashed rgba(0, 0, 0, 0.35);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* Two-column stat block, tight leading — this is reference matter, not
   reading matter. */
.rw-stat-block {
  margin: 0 0 0.6em;
  font-size: 0.82em;
  line-height: 1.25;
  columns: 2;
  column-gap: 1.1em;
  break-inside: avoid;
}
.rw-stat {
  display: flex;
  gap: 0.35em;
  break-inside: avoid;
}
.rw-stat dt {
  font-weight: 700;
  white-space: nowrap;
}
.rw-stat dt::after { content: ":"; }
.rw-stat dd { margin: 0; }

.rw-ability-row {
  display: flex;
  gap: 0.3em;
  margin: 0 0 0.7em;
  font-size: 0.78em;
  break-inside: avoid;
}
.rw-ability {
  flex: 1;
  text-align: center;
  border: 0.5pt solid currentColor;
  padding: 0.12em 0;
  line-height: 1.15;
}
.rw-ability-key {
  display: block;
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.05em;
}
.rw-ability-val { display: block; }

.rw-monster-list { margin: 0 0 0.55em; }
.rw-monster-list h3 {
  margin: 0 0 0.12em;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  break-after: avoid;
}
.rw-monster-list ul {
  margin: 0;
  padding-left: 1.05em;
  font-size: 0.87em;
  line-height: 1.3;
}
.rw-action-name, .rw-ability-name { font-weight: 700; }
.rw-action-type { font-style: italic; opacity: 0.8; }
.rw-loot-chance { opacity: 0.7; }

.rw-monster-flavor {
  font-style: italic;
  margin: 0 0 0.55em;
}
.rw-monster-prose { margin: 0 0 0.55em; }
.rw-monster-prose h3 {
  margin: 0 0 0.1em;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  break-after: avoid;
}
.rw-monster-prose p { margin: 0 0 0.4em; }

/* On a verso the art belongs on the outside edge, which is the left. */
.pagedjs_left_page .rw-monster-art {
  float: left;
  margin: 0 0.8em 0.6em 0;
}

.rw-free-page h2 { margin-top: 0; }

/* ── Page units on the web ── */
/* Units are .srd-section too, so they already carry that rule's separator —
   adding one here would draw a second line right under the first. */

/* An empty art frame is a production marker: on a printed proof it shows the
   author where art still has to go. On the published site it just tells
   readers the book is unfinished, so the frame is dropped entirely when it
   holds a placeholder rather than a real illustration. */
.rw-monster-art.rw-art-empty {
    display: none;
}
.rw-monster-art {
    /* Print floats art to the outside edge of the spread. A scrolling page
       has no outside edge, so it always sits right. */
    float: right;
    width: 38%;
    max-width: 320px;
}
@media (max-width: 640px) {
    /* Two columns of stat block and a 38% art float both collapse into
       unreadable slivers on a phone. */
    .rw-stat-block { columns: 1; }
    .rw-monster-art {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 1rem 0;
    }
}

/* ── Version stamp ── */
.srd-stamp {
    margin-top: 4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--srd-border);
    color: var(--srd-text-dim);
    font-size: 0.75rem;
}

:root {
    --srd-bg: #0e0e0e;
    --srd-sidebar-bg: #0a0a0a;
    --srd-card-bg: #161616;
    --srd-border: #2a2a2a;
    --srd-text: #e8e5e0;
    --srd-text-muted: #9a9a9a;
    --srd-text-dim: #5a5a5a;
    --srd-accent: #b91c1c;
    --srd-accent-hover: #dc2626;
    --srd-sidebar-width: 300px;
    --srd-nav-height: 52px;
}

* { box-sizing: border-box; }

.srd-layout {
    display: flex;
    min-height: calc(100vh - var(--srd-nav-height));
    margin-top: var(--srd-nav-height);
}

/* ── Sidebar ── */

.srd-sidebar {
    position: fixed;
    top: var(--srd-nav-height);
    left: 0;
    bottom: 0;
    width: var(--srd-sidebar-width);
    background: var(--srd-sidebar-bg);
    border-right: 1px solid var(--srd-border);
    overflow-y: auto;
    padding: 1.5rem 0;
    z-index: 50;
    transition: transform 0.3s ease;
}

.srd-sidebar-header {
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid var(--srd-border);
    margin-bottom: 1rem;
}

.srd-sidebar-title {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--srd-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.srd-search {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: var(--srd-text);
    background: var(--srd-card-bg);
    border: 1px solid var(--srd-border);
    border-radius: 4px;
    outline: none;
}

.srd-search::placeholder { color: var(--srd-text-dim); }
.srd-search:focus { border-color: var(--srd-accent); }

/* ── Nav Tree ── */

.srd-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.srd-nav-list .srd-nav-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.srd-nav-item.expanded > .srd-nav-list {
    max-height: 2000px;
}

.srd-nav-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.25rem;
    color: var(--srd-text-muted);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
}

.srd-nav-link:hover {
    color: var(--srd-text);
    background: rgba(255,255,255,0.03);
}

.srd-nav-link.active {
    color: var(--srd-accent);
    background: rgba(185, 28, 28, 0.08);
    border-right: 2px solid var(--srd-accent);
}

.depth-1 > .srd-nav-link { padding-left: 2rem; }
.depth-2 > .srd-nav-link { padding-left: 2.75rem; }
.depth-3 > .srd-nav-link { padding-left: 3.5rem; }
.depth-4 > .srd-nav-link { padding-left: 4.25rem; }

.srd-nav-arrow {
    font-size: 0.65rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.srd-nav-item.expanded > .srd-nav-link > .srd-nav-arrow {
    transform: rotate(90deg);
}

/* ── Main Content ── */

.srd-main {
    flex: 1;
    margin-left: var(--srd-sidebar-width);
    padding: 2.5rem 3rem 6rem;
    max-width: 860px;
}

.srd-section {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--srd-border);
}

.srd-section:last-child { border-bottom: none; }

.srd-heading {
    font-family: 'Cinzel', serif;
    color: var(--srd-text);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

h1.srd-heading { font-size: 2rem; color: var(--srd-accent); border-bottom: 2px solid var(--srd-accent); padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
h2.srd-heading { font-size: 1.6rem; }
h3.srd-heading { font-size: 1.3rem; }
h4.srd-heading { font-size: 1.1rem; }
h5.srd-heading { font-size: 1rem; }

.srd-updated {
    font-size: 0.75rem;
    color: var(--srd-text-dim);
    margin-bottom: 1.25rem;
    font-style: italic;
}

.srd-license-notice {
    background: var(--srd-bg-card, #1a1a1a);
    border: 1px solid var(--srd-border, #2a2a2a);
    border-left: 3px solid var(--srd-accent);
    border-radius: 6px;
    padding: 1.1rem 1.4rem;
    margin-bottom: 2.5rem;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--srd-text-muted);
}

.srd-license-notice strong {
    color: var(--srd-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
}

.srd-content {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--srd-text-muted);
}

.srd-content h1, .srd-content h2, .srd-content h3,
.srd-content h4, .srd-content h5, .srd-content h6 {
    font-family: 'Cinzel', serif;
    color: var(--srd-text);
    margin: 1.5rem 0 0.5rem;
}

.srd-content p { margin: 0 0 1rem; }
.srd-content ul, .srd-content ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.srd-content li { margin-bottom: 0.35rem; }
.srd-content strong { color: var(--srd-text); font-weight: 600; }
.srd-content em { font-style: italic; }

.srd-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.srd-content th, .srd-content td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--srd-border);
    text-align: left;
}

.srd-content th {
    background: var(--srd-card-bg);
    color: var(--srd-accent);
    font-weight: 600;
}

.srd-content blockquote {
    border-left: 3px solid var(--srd-accent);
    margin: 1rem 0;
    padding: 0.75rem 1.25rem;
    background: var(--srd-card-bg);
    border-radius: 0 4px 4px 0;
}

/* ── Mobile Sidebar Toggle ── */

.srd-sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 60;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--srd-accent);
    color: #fff;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.srd-no-results {
    padding: 1rem 1.25rem;
    color: var(--srd-text-dim);
    font-size: 0.85rem;
    font-style: italic;
    display: none;
}

/* ── Responsive ── */

@media (max-width: 900px) {
    .srd-sidebar {
        transform: translateX(-100%);
    }

    .srd-sidebar.open {
        transform: translateX(0);
    }

    .srd-sidebar-toggle { display: flex; align-items: center; justify-content: center; }

    .srd-main {
        margin-left: 0;
        padding: 2rem 1.5rem 6rem;
    }
}

/* ── Search Highlight ── */
.srd-section.search-hidden { display: none; }