/* ============================================================================
   ENTITY.CSS — "The Campaign Codex"
   Entity documents styled as illuminated leaves from a GM's tome (Hearth) /
   a tactical dossier (Aegis). Semantic tokens only — no literal theme colors;
   neutral rgba(0,0,0,…) is used for depth shadows per components.css precedent.
   ============================================================================ */

@layer components {

/* ─── Document column ──────────────────────────────────────────────────────
   A flowing manuscript column rather than a stack of boxes. */
.codex {
  --gutter: 1.6rem;
  max-width: 64ch;
  margin: 0 auto;
  padding-left: var(--gutter);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}
/* the ruled margin of the codex */
.codex::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-s);
  bottom: var(--space-s);
  width: var(--border-w);
  background: linear-gradient(var(--line) 0%, var(--line) 70%, transparent);
  opacity: 0.7;
}
/* prep is a reading column — give each entry room to breathe so they read as
   distinct illuminated passages rather than one continuous wash. On wide
   displays it opens into a manuscript spread (see below), so it needs room. */
.codex--wide { gap: var(--space-4xl); max-width: min(100%, 70rem); }
.codex--compact {
  max-width: 52ch;
  --gutter: 0;
  padding-left: 0;
}
.codex--compact::before { display: none; }

/* ─── Manuscript spread ────────────────────────────────────────────────────
   Below the breakpoint the body is one column (main, then marginalia stacked).
   On wide displays it becomes two tracks: a primary reading column + a right
   marginalia rail holding compact reference blocks, connections, and the index. */
.codex__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
}
.codex__main { display: flex; flex-direction: column; gap: var(--space-4xl); min-width: 0; }
.codex__main #sections-list { display: flex; flex-direction: column; gap: var(--space-4xl); }
.codex__margin { display: flex; flex-direction: column; gap: var(--space-2xl); min-width: 0; }

/* the "on this page" index — a wide-display aid, hidden when stacked */
.codex__index { display: none; }
.codex__index h3 {
  font-family: var(--font-display); font-size: var(--text-2xs); letter-spacing: var(--track-widest);
  text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--space-m);
}
.codex__index ul {
  list-style: none; margin: 0; padding: 0;
  border-left: var(--border-w) solid var(--line);
}
.codex__index a {
  display: block; padding: var(--space-2xs) 0 var(--space-2xs) var(--space-l); margin-left: calc(var(--border-w) * -1);
  border-left: 2px solid transparent;
  font-family: var(--font-body); font-size: var(--text-s); line-height: 1.3;
  color: var(--text-2); text-decoration: none; transition: color 0.12s, border-color 0.12s;
}
.codex__index a:hover { color: var(--accent); border-left-color: var(--accent); }
/* chapter entries head their nested members: the chapter link reads as a small
   display-font heading, member links indent beneath it */
.codex__index .index__chapter > a {
  font-family: var(--font-display); font-size: var(--text-s); letter-spacing: var(--track-wide); color: var(--text);
}
.codex__index .index__chapter > ul { border-left: 0; padding-left: var(--space-l); }
.codex__index .index__chapter > ul a { font-size: var(--text-s); }

/* marginalia sections are compact: keep the tick + eyebrow start cue, but drop
   the hanging margin glyph (there's no ruled spine on the rail side) */
.codex--wide .codex__margin .section[data-component-type]::before { display: none; }

@media (min-width: 1200px) {
  /* The app shell gives .main `overflow-y:auto`, which traps position:sticky.
     On the manuscript spread the page scrolls on the window, so let .main
     overflow visibly — that lets the left index stick to the viewport. */
  .main:has(.codex--wide) { overflow: visible; }

  /* widen into a three-track spread and drop the article-level gutter/spine —
     the ruled margin moves to the reading column so the index can sit flush left */
  .codex--wide { max-width: min(100%, 84rem); padding-left: 0; }
  .codex--wide::before { display: none; }

  .codex--wide .codex__body {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 60ch) minmax(13rem, 17rem);
    gap: var(--space-4xl);
    align-items: start;
  }
  /* the "on this page" index becomes a sticky left column that tracks scrolling
     and scrolls internally when it outgrows the viewport */
  .codex--wide .codex__index {
    display: block;
    position: sticky;
    top: var(--space-xl);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
  /* the codex spine now hangs beside the reading column (was the article edge) */
  .codex--wide .codex__main { position: relative; }
  .codex--wide .codex__main::before {
    content: "";
    position: absolute;
    left: calc(var(--gutter) * -1);
    top: var(--space-s);
    bottom: var(--space-s);
    width: var(--border-w);
    background: linear-gradient(var(--line) 0%, var(--line) 70%, transparent);
    opacity: 0.7;
  }
  /* if the rail has no content, collapse to index + reading column */
  .codex--wide .codex__body:not(:has(.codex__margin > *)) {
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 60ch);
  }
}

/* ─── Headpiece ────────────────────────────────────────────────────────── */
.codex__header {
  margin-bottom: var(--space-xs);
}

/* type eyebrow with an illuminated tick */
.codex__type {
  display: inline-flex;
  align-items: center;
  gap: var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-s);
}
.codex__type::before {
  content: "";
  width: 1.4rem;
  height: var(--border-w);
  background: var(--accent);
  box-shadow: var(--glow);
}

/* ─── Chapter — a titled grouping of related entries ───────────────────────
   A chapter owns the strong opening device (a display-font heading); its member
   sections demote their titles to quiet sub-labels so the column reads as
   "chapter → passages" rather than a flat ribbon of equal-weight entries. */
.chapter {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}
/* member sections inside a chapter: titles become quiet sub-labels, and the
   per-section accent tick is dropped (the chapter head is the start device) */
.chapter .section .section-h {
  font-size: var(--text-2xs);
  letter-spacing: var(--track-widest);
  color: var(--text-3);
}
/* Inside a chapter the heading is the single strong start cue, so child sections
   drop their own leading accent tick — titled ones via section__head::before,
   headerless ones via section--untitled::after — keeping the column rhythmic. */
.codex--wide .chapter .heading-ruled::before,
.codex--wide .chapter .section--untitled::after { display: none; }

/* ─── Section — an entry in the codex ──────────────────────────────────── */
.section {
  position: relative;
}
/* fleuron marker hanging in the ruled margin — the anchor that marks where each
   entry begins, so sections read as distinct even without a header */
.codex--wide .section::before {
  content: "◆";
  position: absolute;
  left: calc(var(--gutter) * -1);
  top: var(--space-2xs);
  width: var(--gutter);
  text-align: center;
  font-size: var(--text-s);
  line-height: 1.3;
  color: var(--text-3);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.codex--wide .section:hover::before,
.codex--wide .section:focus-within::before {
  color: var(--accent);
  text-shadow: var(--glow);
}
/* illuminated marginalia — each component type hangs its own glyph in the
   ruled margin, so the codex edge signals what kind of entry each one is */
.codex--wide .section[data-component-type="prose"]::before          { content: "¶"; }
.codex--wide .section[data-component-type="header_stats"]::before    { content: "▦"; }
.codex--wide .section[data-component-type="prompt_list"]::before     { content: "?"; }
.codex--wide .section[data-component-type="statblock"]::before       { content: "❖"; }
.codex--wide .section[data-component-type="random_table"]::before    { content: "⚄"; }
.codex--wide .section[data-component-type="trade_table"]::before     { content: "⚖"; }
.codex--wide .section[data-component-type="decision_point"]::before  { content: "⌥"; }
.codex--wide .section[data-component-type="requirement_clock"]::before { content: "◷"; }
.codex--wide .section[data-component-type="counts"]::before          { content: "#"; }
.codex--wide .section[data-component-type="sub_locations"]::before   { content: "⌖"; }
.codex--wide .section[data-component-type="encounter_list"]::before  { content: "⚔"; }
.codex--wide .section[data-component-type="secrets"]::before         { content: "🔒"; filter: grayscale(1); opacity: 0.65; }
.codex--wide .section[data-component-type="link_list"]::before       { content: "↬"; }
.codex--wide .section[data-component-type="hazard"]::before          { content: "⚠"; color: var(--danger); }
.codex--wide .section[data-component-type="portrayal"]::before       { content: "☻"; }
.codex--wide .section[data-component-type="discovery_list"]::before  { content: "⌕"; }
.codex--wide .section[data-component-type="procedure"]::before       { content: "⚗"; }

/* headerless entries are announced by a short illuminated tick (the same accent
   bar the type eyebrow uses) instead of a title — every section keeps exactly
   one clear "start" device */
.codex--wide .section--untitled { padding-top: var(--space-m); }
/* no leading tick inside a chapter (see above), so no top padding to reserve for it */
.codex--wide .chapter .section--untitled { padding-top: 0; }
.codex--wide .section--untitled::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.6rem;
  height: var(--border-w);
  background: var(--accent);
  box-shadow: var(--glow);
  opacity: 0.85;
}
.section__empty {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-3);
  font-size: var(--text-base);
  padding: var(--space-xs) 0 var(--space-xs) var(--space-xl);
  border-left: var(--border-w) dashed var(--line-2);
}

/* ─── Components — codex entries ───────────────────────────────────────── */

/* Prose — one drop-cap per chapter: subsequent prose sections reset the
   illuminated capital so a chapter doesn't sprout competing drop-caps */
.chapter .section:not(:first-of-type) .dropcap > p:first-child::first-letter {
  font-family: inherit;
  font-size: inherit;
  float: none;
  line-height: inherit;
  padding: 0;
  color: inherit;
}


/* ─── At-table mode — a quick-reference index ──────────────────────────── */
.codex--compact .section { background: var(--panel); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 0; overflow: hidden; }
.codex--compact .section > summary {
  cursor: pointer; list-style: none; padding: var(--space-m) var(--space-l);
  font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--track-widest); text-transform: uppercase;
  display: flex; align-items: center; gap: var(--space-m);
}
.codex--compact .section > summary::-webkit-details-marker { display: none; }
.codex--compact .section > summary::before { content: "›"; color: var(--accent); transition: transform 0.2s; }
.codex--compact .section[open] > summary::before { transform: rotate(90deg); }
.codex--compact .section > summary:hover { background: var(--panel-2); }
.codex--compact .section__body { padding: 0 var(--space-l) var(--space-l); }
.quickjump {
  position: sticky; top: var(--space-m); z-index: 5;
  display: flex; gap: var(--space-m); align-items: center; flex-wrap: wrap;
  background: var(--bg-2);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-m) var(--space-m);
  box-shadow: var(--shadow-m);
  margin-bottom: var(--space-xl);
}
.quickjump__filter { flex: 1; min-width: 8rem; }
.quickjump__chips { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.quickjump .chip {
  background: transparent; border: var(--border-w) solid var(--line-2); color: var(--text-2);
  border-radius: 99px; padding: var(--space-2xs) var(--space-m); cursor: pointer; transition: 0.12s;
}
.quickjump .chip:hover { border-color: var(--accent); color: var(--accent); }
.quickjump__empty { color: var(--text-3); font-style: italic; padding: var(--radius); }
.section[hidden] { display: none; }

/* ─── Relationship web — a constellation ───────────────────────────────── */
.codex__relationships { padding: var(--space-xl); background: var(--panel); border: var(--border-w) solid var(--line); border-radius: var(--radius); }
.codex__relationships h3 { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--track-widest); text-transform: uppercase; color: var(--text-2); margin: 0 0 var(--space-m); }
.codex__backlinks h3 { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--track-widest); text-transform: uppercase; color: var(--text-2); margin: 0 0 var(--space-s); }
.codex__backlinks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.rel-web { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.rel-edge { stroke: var(--line-2); stroke-width: 1; }
.rel-edge--in { stroke: var(--accent); stroke-dasharray: 3 3; opacity: 0.7; }
.rel-node { fill: var(--accent); filter: drop-shadow(0 0 3px var(--accent)); transition: r 0.15s; }
.rel-web a:hover .rel-node { fill: var(--accent-2); }
.rel-node--center { fill: var(--signal); }
.rel-label { fill: var(--text-2); font-size: 9px; font-family: var(--font-mono); letter-spacing: var(--track-normal); }
.rel-label--center { fill: var(--text); }

/* ─── Wizard + home ────────────────────────────────────────────────────── */
.section-add { margin-top: var(--space-l); }

.home h1 { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: var(--track-tight); }
.wizard-progress { color: var(--accent); }
.home-world { padding: var(--space-xl) var(--space-2xl); }
.home-world__head h2 { font-size: var(--text-l); }
.home-entities a.elink { font-family: var(--font-body); font-size: var(--text-base); }

/* ─── HTMX loading indicator ───────────────────────────────────────────── */
.htmx-request.section { opacity: 0.5; transition: opacity 0.12s; }

/* ─── Page-load reveal — a staggered unfurling ─────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .codex--wide > .codex__header { animation: leafIn 0.5s ease both; }
  .codex--wide #sections-list > .section,
  .codex--wide #sections-list > .chapter { animation: leafIn 0.5s ease both; }
  .codex--wide #sections-list > :nth-child(1) { animation-delay: 0.06s; }
  .codex--wide #sections-list > :nth-child(2) { animation-delay: 0.12s; }
  .codex--wide #sections-list > :nth-child(3) { animation-delay: 0.18s; }
  .codex--wide #sections-list > :nth-child(4) { animation-delay: 0.24s; }
  .codex--wide #sections-list > :nth-child(n+5) { animation-delay: 0.3s; }
  @keyframes leafIn { from { opacity: 0; transform: translateY(8px); } }
}

} /* end @layer components */