/*
 * TheCrazyGM — Compendium Entry Pattern
 * Shared layout for every content detail page: spells, feats, items,
 * races, traits, monsters. Load after thecrazygm-theme.css.
 *
 * Structure a page is expected to use:
 *   .cgm-entry
 *     .cgm-entry-head    breadcrumb, eyebrow, title, lede, toolbar
 *     .cgm-keystats      the at-a-glance mechanics strip
 *     .cgm-entry-body    .cgm-prose  +  .cgm-rail
 *     .cgm-provenance    source, attribution, tags, references
 *
 * Everything reads from the theme tokens, so dark mode and any future
 * palette change follow automatically.
 */

:root {
  --cgm-entry-radius: 12px;
  --cgm-entry-gap: 2.75rem;
  --cgm-prose-measure: 68ch;
  --cgm-rail-width: 18.5rem;
}

/* ─────────────────────────────────────────────
   SHELL
───────────────────────────────────────────── */
.cgm-entry {
  display: flex;
  flex-direction: column;
  gap: var(--cgm-entry-gap);
  max-width: 78rem;
}

/* ─────────────────────────────────────────────
   HEAD — no card. The title is the page.
───────────────────────────────────────────── */
.cgm-entry-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cgm-entry-head .breadcrumb {
  margin-bottom: 0;
}

.cgm-entry-titles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.cgm-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cgm-text-muted);
  margin-bottom: 0.4rem;
}

.cgm-eyebrow-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cgm-ornament);
  flex: 0 0 4px;
}

.cgm-entry-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

/* The one-line summary, at a size worth reading. */
.cgm-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--cgm-text-muted);
  max-width: 46ch;
  margin: 0.7rem 0 0;
  text-wrap: pretty;
}

.cgm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.cgm-toolbar .btn {
  --bs-btn-padding-y: 0.4rem;
  --bs-btn-padding-x: 0.85rem;
  font-size: 0.85rem;
}

/* ─────────────────────────────────────────────
   KEY STATS — the mid-session lookup strip.
   A hairline grid: one border does the whole job.
───────────────────────────────────────────── */
/* Explicit tracks, not auto-fit: auto-fit leaves empty cells in the last
   row, which the hairline background would render as a bare rule. Give
   each entry type a stat count divisible by 4 (or 2) and it always
   lands clean. */
.cgm-keystats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--cgm-border);
  border: 1px solid var(--cgm-border);
  border-radius: var(--cgm-entry-radius);
  overflow: hidden;
  box-shadow: var(--cgm-shadow);
}

.cgm-keystat {
  background: var(--cgm-surface);
  padding: 0.85rem 1.05rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.cgm-keystat dt,
.cgm-keystat-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cgm-text-faint);
  margin: 0;
}

.cgm-keystat dd,
.cgm-keystat-value {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cgm-text);
  margin: 0;
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  .cgm-keystats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 400px) {
  .cgm-keystats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A stat whose value is the headline fact — school, level. */
.cgm-keystat-strong dd,
.cgm-keystat-strong .cgm-keystat-value {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--cgm-primary);
}

/* Absent values shouldn't shout. */
.cgm-keystat-empty dd,
.cgm-keystat-empty .cgm-keystat-value {
  color: var(--cgm-text-faint);
  font-weight: 400;
}

/* Component letters as their own small run. */
.cgm-components-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.cgm-comp {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cgm-text-muted);
  background: var(--cgm-surface-2);
  border: 1px solid var(--cgm-border);
  border-radius: 5px;
  padding: 1px 6px;
  text-decoration: none;
}

.cgm-comp-costly {
  color: var(--cgm-gold);
  background: var(--cgm-gold-light);
  border-color: rgba(156, 111, 40, 0.35);
}

/* ─────────────────────────────────────────────
   BODY — prose left, quiet rail right
───────────────────────────────────────────── */
.cgm-entry-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cgm-rail-width);
  gap: 3.25rem;
  align-items: start;
}

@media (max-width: 991px) {
  .cgm-entry-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}

.cgm-prose {
  min-width: 0;
  max-width: var(--cgm-prose-measure);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--cgm-text);
}

.cgm-prose > * + * {
  margin-top: 1.15rem;
}

.cgm-prose p {
  margin: 0;
}

.cgm-prose p + p {
  margin-top: 1.15rem;
}

.cgm-prose h2,
.cgm-prose h3 {
  font-size: 1.15rem;
  margin: 2.25rem 0 0.75rem;
}

.cgm-prose ul,
.cgm-prose ol {
  padding-left: 1.3rem;
}

.cgm-prose li + li {
  margin-top: 0.35rem;
}

.cgm-prose a {
  color: var(--cgm-primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cgm-prose a:hover {
  text-decoration-style: solid;
}

/* A named subsection inside the prose column (Effect, Special). */
.cgm-prose-section {
  margin-top: 2.5rem;
}

.cgm-subhead {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cgm-text-muted);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--cgm-border);
  margin: 0 0 1.1rem;
}

/* ─────────────────────────────────────────────
   RAIL — hairline sections, not stacked cards
───────────────────────────────────────────── */
.cgm-rail {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: var(--cgm-rail-pos, sticky);
  top: 1.5rem;
  font-size: 0.9rem;
}

@media (max-width: 991px) {
  .cgm-rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem 2.5rem;
  }
}

.cgm-rail-section > .cgm-subhead {
  margin-bottom: 0.85rem;
}

/* Class / level list with a dotted leader — reads like a spell list. */
.cgm-levels {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.cgm-level-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px dotted var(--cgm-border);
}

.cgm-level-row:last-child {
  border-bottom: none;
}

.cgm-level-name {
  color: var(--cgm-text);
  font-weight: 500;
  text-decoration: none;
}

a.cgm-level-name:hover {
  color: var(--cgm-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cgm-level-num {
  margin-left: auto;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cgm-gold);
  flex: 0 0 auto;
}

/* Component detail entries. */
.cgm-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
}

.cgm-detail-row {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
}

.cgm-detail-key {
  flex: 0 0 2.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cgm-text-faint);
  text-transform: uppercase;
  padding-top: 0.1rem;
}

.cgm-detail-val {
  min-width: 0;
  color: var(--cgm-text);
  line-height: 1.55;
}

.cgm-detail-note {
  display: block;
  color: var(--cgm-text-muted);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

/* Rail meta rows — a stacked label + value, wider keys than the
   component list's fixed 2.1rem gutter allows. */
.cgm-meta-row {
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--cgm-border);
}
.cgm-meta-row:last-child {
  border-bottom: none;
}
.cgm-meta-key {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cgm-text-faint);
  margin-bottom: 0.15rem;
}
.cgm-meta-val {
  color: var(--cgm-text);
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   SPELL LADDER — a themed spell list gets, one row per level.
───────────────────────────────────────────── */
.cgm-spell-ladder {
  display: flex;
  flex-direction: column;
}
.cgm-spell-ladder .cgm-level-row {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.4rem 0;
  border-bottom: 1px dotted var(--cgm-border);
}
.cgm-spell-ladder .cgm-level-row:last-child {
  border-bottom: none;
}
.cgm-spell-ladder .cgm-level-num {
  margin-left: 0;
  flex: 0 0 1.6rem;
  text-align: right;
}
.cgm-spell-ladder .cgm-level-name {
  min-width: 0;
}

/* ─────────────────────────────────────────────
   FEATURE BLOCKS — a granted power on a schedule.
───────────────────────────────────────────── */
.cgm-feature {
  margin-bottom: 1.8rem;
}
.cgm-feature:last-child {
  margin-bottom: 0;
}
.cgm-feature-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.cgm-feature-drawback {
  border-left: 3px solid var(--cgm-border);
  padding-left: 1rem;
}

/* ─────────────────────────────────────────────
   CHOICE LIST — the pickable pool (revelations, bloodline feats).
───────────────────────────────────────────── */
.cgm-choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.4rem 1.6rem;
}
.cgm-choice {
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--cgm-border);
}
.cgm-choice-name {
  display: block;
  font-weight: 600;
  color: var(--cgm-text);
  text-decoration: none;
}
a.cgm-choice-name:hover {
  color: var(--cgm-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cgm-choice-desc {
  display: block;
  font-size: 0.85rem;
  color: var(--cgm-text-muted);
  line-height: 1.5;
  margin-top: 0.1rem;
}

/* ─────────────────────────────────────────────
   PROVENANCE — everything legal/meta, once, quietly
───────────────────────────────────────────── */
.cgm-provenance {
  border-top: 1px solid var(--cgm-border);
  padding-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: var(--cgm-text-muted);
}

.cgm-provenance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem 2.5rem;
}

.cgm-provenance dl,
.cgm-provenance p {
  margin: 0;
}

.cgm-provenance-block > .cgm-keystat-label {
  display: block;
  margin-bottom: 0.5rem;
}

.cgm-provenance-block p + p {
  margin-top: 0.5rem;
}

.cgm-provenance a {
  color: var(--cgm-primary);
}

.cgm-provenance-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cgm-provenance-list li {
  line-height: 1.5;
}

/* One quiet conversion line, not a card. */
.cgm-entry-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  background: var(--cgm-surface-2);
  border: 1px solid var(--cgm-border-muted);
  border-radius: var(--cgm-entry-radius);
  padding: 0.9rem 1.2rem;
}

.cgm-entry-cta p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--cgm-text-muted);
  max-width: 58ch;
}

.cgm-entry-cta .btn {
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.7rem;
  font-size: 0.8rem;
}

/* Tags: present, but the smallest thing on the page. */
.cgm-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cgm-tag-row .cgm-tag {
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
}

/* References disclosure, restyled off the Bootstrap card. */
.cgm-refs {
  border: 1px solid var(--cgm-border);
  border-radius: var(--cgm-entry-radius);
  background: var(--cgm-surface);
  overflow: hidden;
}

.cgm-refs-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.2rem;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cgm-text-muted);
  transition: background 0.12s ease, color 0.12s ease;
}

.cgm-refs-toggle:hover {
  background: var(--cgm-surface-2);
  color: var(--cgm-primary);
}

.cgm-refs-toggle .bi-chevron-down {
  transition: transform 0.18s ease;
  font-size: 0.8rem;
}

.cgm-refs-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

.cgm-refs-body {
  padding: 1.1rem 1.2rem 1.3rem;
  border-top: 1px solid var(--cgm-border);
  font-size: 0.875rem;
}

/* ─────────────────────────────────────────────
   FOCUS — themed, never the browser default
───────────────────────────────────────────── */
.cgm-entry a:focus-visible,
.cgm-entry button:focus-visible {
  outline: 2px solid var(--cgm-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ─────────────────────────────────────────────
   PRINT — the table handout
───────────────────────────────────────────── */
@media print {
  .cgm-toolbar,
  .cgm-entry-cta,
  .cgm-refs,
  .cgm-entry-head .breadcrumb,
  .navbar,
  footer {
    display: none !important;
  }

  .cgm-entry {
    gap: 1.25rem;
    max-width: none;
  }

  .cgm-entry-body {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 1.5rem;
  }

  .cgm-rail {
    position: static;
  }

  .cgm-keystats,
  .cgm-refs {
    box-shadow: none;
    break-inside: avoid;
  }

  .cgm-entry-title {
    font-size: 26pt;
  }

  .cgm-prose {
    font-size: 11pt;
    max-width: none;
  }
}