/*
 * outline-aon.css — AoN-style theming for spell documents (tier 2, v2).
 *
 * Conventions from render-outline.js:
 *   1. First paragraph: `code` trait pills + trailing **rank** (floated right)
 *   2. Stat block: bold-label lines with hard breaks (no special CSS needed)
 *   3. Body/heightened separated by --- rules
 *
 * Selectors target Outline's ProseMirror container and title. Class names
 * are stable-ish across versions, not guaranteed — inspect and adjust if a
 * rule doesn't take. Styles apply instance-wide (see OUTLINE-PATCH.md).
 */

:root {
  --aon-maroon: #58180d;
  --aon-maroon-deep: #3f110a;
  --aon-gold: #d8c483;
  --aon-cream: #f3ead4;
}

/* ---------- Title banner ----------
 * Outline's document title element varies by version; cover the usual
 * suspects. If the banner doesn't appear, inspect the title and add its
 * selector here. */
.ProseMirror .heading-name h1:first-of-type,
.ProseMirror > h1:first-of-type,
[class*="EditableTitle"],
[class*="Title"] > [contenteditable] {
  background: linear-gradient(180deg, var(--aon-maroon), var(--aon-maroon-deep));
  color: var(--aon-gold) !important;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  padding: 0.35em 0.6em;
  border-radius: 4px;
  border: 1px solid var(--aon-maroon-deep);
}

/* ---------- Trait pills + rank line ---------- */
.ProseMirror > p:first-child > code {
  display: inline-block;
  font-family: inherit;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aon-cream);
  background: var(--aon-maroon);
  border: 1px solid var(--aon-cream);
  outline: 1px solid var(--aon-maroon);
  border-radius: 0;
  padding: 0.18em 0.6em;
  margin-right: 0.3em;
}

/* Rank ("Spell 1") floated to the right of the pill row, AoN-banner style */
.ProseMirror > p:first-child > strong {
  float: right;
  color: var(--aon-gold);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 1.05em;
}

/* ---------- Section dividers ---------- */
.ProseMirror hr {
  border: none;
  border-top: 1px solid var(--aon-gold);
  opacity: 0.55;
  margin: 1.1rem 0;
}

/* ---------- Links: AoN underline style ---------- */
.ProseMirror a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Content tables ---------- */
.ProseMirror table { border-collapse: collapse; font-size: 0.9em; }
.ProseMirror table th { background: var(--aon-maroon); color: var(--aon-cream); }
.ProseMirror table tr:nth-child(even) td { background: rgba(216, 196, 131, 0.10); }

/* ---------- Subheadings ---------- */
.ProseMirror h3, .ProseMirror h4 {
  font-variant: small-caps;
  letter-spacing: 0.02em;
}

/* Light mode: deepen pill/banner contrast slightly */
@media (prefers-color-scheme: light) {
  .ProseMirror > p:first-child > strong { color: var(--aon-maroon); }
}