/* ============================================================
   Additional layouts for the new pages
   ============================================================ */

/* Generic content page wrapper (centers content with breathing room) */
.page {
  padding: 56px 60px 100px;
  background: var(--ink-deep);
  max-width: 1280px;
}

/* ============================================================
   Recent additions — feed
   ============================================================ */
.feed {
  display: flex;
  flex-direction: column;
}
.feed-day {
  margin-bottom: 36px;
}
.feed-day-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-line-soft);
}
.feed-day-date {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: var(--gold-bright);
  letter-spacing: 0.08em;
}
.feed-day-relative {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--foam-dim);
}
.feed-day-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--foam-dim);
}

.feed-entry {
  display: grid;
  grid-template-columns: 130px 80px 1fr auto;
  gap: 20px;
  padding: 14px 0;
  align-items: baseline;
  border-bottom: 1px solid var(--ink-line-soft);
  cursor: pointer;
  transition: background 0.15s;
}
.feed-entry:hover {
  background: var(--ink-slate);
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 2px;
}
.feed-entry:last-child { border-bottom: none; }

.feed-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  text-align: center;
  color: var(--foam-dim);
}
.feed-type.new { color: var(--necro); border-color: var(--necro); }
.feed-type.edit { color: var(--gold); border-color: var(--gold-dim); }
.feed-type.danger { color: var(--wine-bright); border-color: var(--wine); }
.feed-type.minor { opacity: 0.6; }

.feed-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--foam-dim);
}

.feed-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  color: var(--foam);
  margin: 0 0 3px;
  letter-spacing: 0.04em;
}
.feed-desc {
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  color: var(--foam-dim);
  font-style: italic;
  margin: 0;
}

.feed-author {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--foam-dim);
  text-transform: uppercase;
}

/* ============================================================
   Planes — cosmology diagram
   ============================================================ */
.cosmo-stage {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  margin-top: 32px;
}

.cosmo-diagram {
  position: relative;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(184,153,104,0.05) 0%, transparent 60%),
    var(--ink-slate);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  padding: 32px;
}
.cosmo-svg { width: 100%; height: 100%; display: block; }
.cosmo-node {
  cursor: pointer;
  transition: filter 0.2s;
}
.cosmo-node:hover { filter: brightness(1.4); }
.cosmo-node-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  fill: var(--foam);
  text-anchor: middle;
  pointer-events: none;
}

.cosmo-info {
  display: flex;
  flex-direction: column;
}
.cosmo-info-card {
  background: var(--ink-slate);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  padding: 24px 26px 26px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.cosmo-info-card:hover { border-color: var(--gold-dim); }
.cosmo-info-card.selected {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(184,153,104,0.08) 0%, var(--ink-slate) 100%);
}
.cosmo-info-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.cosmo-info-dot {
  width: 10px; height: 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.cosmo-info-title {
  font-family: 'Cinzel', serif;
  font-size: 19px;
  letter-spacing: 0.04em;
  color: var(--foam);
  margin: 0 0 8px;
}
.cosmo-info-desc {
  font-family: 'EB Garamond', serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--foam-dim);
  margin: 0;
}

/* ============================================================
   Factions — dossier / classified style
   ============================================================ */
.dossier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.dossier {
  background: var(--ink-slate);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  padding: 28px 30px 26px;
  position: relative;
  cursor: pointer;
  overflow: visible;
}
.dossier::before {
  /* corner triangle */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border: 24px solid transparent;
  border-top-color: var(--wine);
  border-right-color: var(--wine);
}
.dossier-stamp {
  position: absolute;
  top: 28px; right: 16px;
  transform: rotate(18deg);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--wine-bright);
  border: 2px solid var(--wine-bright);
  padding: 4px 12px;
  opacity: 0.88;
  z-index: 2;
  background: rgba(14,13,16,0.8);
  pointer-events: none;
}
.dossier-stamp.green {
  color: var(--necro);
  border-color: var(--necro);
}

.dossier-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 6px;
}
.dossier-name {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  letter-spacing: 0.06em;
  color: var(--foam);
  margin: 0 0 4px;
}
.dossier-alias {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--foam-dim);
  margin: 0 0 20px;
}

.dossier-rows {
  display: flex;
  flex-direction: column;
  margin: 16px 0 20px;
  padding: 16px 0;
  border-top: 1px solid var(--ink-line-soft);
  border-bottom: 1px solid var(--ink-line-soft);
  gap: 6px;
}
.dossier-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
}
.dossier-row dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--foam-dim);
  margin: 0;
}
.dossier-row dd {
  margin: 0;
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  color: var(--foam);
}
.dossier-row dd.redacted {
  background: var(--foam);
  color: var(--foam);
  user-select: none;
  padding: 0 4px;
}
.dossier-row dd.redacted::selection { background: transparent; }

.dossier-summary {
  font-family: 'EB Garamond', serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--foam-dim);
  margin: 0;
}


/* ============================================================
   Events — filterable list
   ============================================================ */
.events-controls {
  display: flex;
  gap: 12px;
  margin: 24px 0 28px;
  align-items: center;
  flex-wrap: wrap;
}
.chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: transparent;
  color: var(--foam-dim);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { color: var(--foam); border-color: var(--gold-dim); }
.chip.active {
  background: rgba(184,153,104,0.15);
  color: var(--gold-bright);
  border-color: var(--gold);
}

.events-table {
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  overflow: hidden;
}
.events-row {
  display: grid;
  grid-template-columns: 120px 110px 1fr 140px;
  align-items: center;
  padding: 14px 22px;
  gap: 20px;
  background: var(--ink-slate);
  border-bottom: 1px solid var(--ink-line);
  cursor: pointer;
  transition: background 0.15s;
}
.events-row:last-child { border-bottom: none; }
.events-row:hover { background: var(--ink-slate-2); }
.events-row.header {
  background: var(--ink-deep);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  cursor: default;
  padding-top: 10px;
  padding-bottom: 10px;
}
.events-year {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--gold-bright);
  letter-spacing: 0.08em;
}
.events-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foam-dim);
}
.events-cat.cata { color: var(--wine-bright); }
.events-cat.div { color: var(--gold); }
.events-cat.pol { color: var(--planar); }
.events-cat.arc { color: #6aa8d4; }
.events-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  color: var(--foam);
  letter-spacing: 0.04em;
  margin: 0 0 3px;
}
.events-desc {
  font-family: 'EB Garamond', serif;
  font-size: 13.5px;
  font-style: italic;
  color: var(--foam-dim);
  margin: 0;
}
.events-region {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--foam-dim);
  text-align: right;
}

/* ============================================================
   Characters — dramatis personae gallery
   ============================================================ */
.cast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.cast-card {
  background: var(--ink-slate);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}
.cast-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-2px);
}
.cast-portrait {
  aspect-ratio: 1;
  background:
    repeating-linear-gradient(45deg, transparent 0px, transparent 14px, rgba(184,153,104,0.04) 14px, rgba(184,153,104,0.04) 15px),
    radial-gradient(ellipse at 50% 35%, rgba(184,153,104,0.1) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-slate-2) 0%, var(--ink-deep) 100%);
  position: relative;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--ink-line);
}
.cast-portrait-initial {
  font-family: 'Cinzel', serif;
  font-size: 100px;
  color: var(--gold);
  opacity: 0.5;
  letter-spacing: 0;
}
.cast-portrait-tag {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  padding: 3px 8px;
  background: rgba(14,13,16,0.85);
  border: 1px solid var(--ink-line);
  color: var(--gold);
  text-transform: uppercase;
}
.cast-portrait-tag.ally { color: var(--necro); border-color: var(--necro); }
.cast-portrait-tag.foe { color: var(--wine-bright); border-color: var(--wine); }
.cast-portrait-tag.pc { color: var(--gold-bright); border-color: var(--gold); }

.cast-body {
  padding: 22px 24px 22px;
}
.cast-name {
  font-family: 'Cinzel', serif;
  font-size: 19px;
  color: var(--foam);
  margin: 0 0 4px;
  letter-spacing: 0.04em;
}
.cast-role {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--foam-dim);
  margin: 0 0 14px;
}
.cast-meta {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--ink-line-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--foam-dim);
}
.cast-meta .faction { color: var(--gold); }

/* ============================================================
   Sessions — journal
   ============================================================ */
.session-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 32px;
}
.session {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  padding: 24px 0 28px;
  border-bottom: 1px solid var(--ink-line);
}
.session:last-child { border-bottom: none; }
.session-num {
  font-family: 'Cinzel', serif;
  text-align: right;
}
.session-num-big {
  font-size: 56px;
  color: var(--gold-bright);
  letter-spacing: 0.04em;
  line-height: 1;
}
.session-num-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-top: 6px;
}
.session-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foam-dim);
  margin-top: 10px;
}

.session-title {
  font-family: 'Cinzel', serif;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--foam);
  margin: 0 0 6px;
}
.session-location {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--gold-bright);
  margin: 0 0 16px;
}
.session-summary {
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--foam-dim);
  margin: 0 0 20px;
  max-width: 64ch;
}

.session-keypoints {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.session-keypoints li {
  padding: 4px 0 4px 22px;
  position: relative;
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  color: var(--foam);
  line-height: 1.45;
}
.session-keypoints li::before {
  content: "✦";
  position: absolute;
  left: 0; top: 4px;
  color: var(--gold);
  font-size: 12px;
}
.session-keypoints li.danger::before { content: "†"; color: var(--wine-bright); }

/* ============================================================
   House rules — documentation
   ============================================================ */
.docs {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  margin-top: 24px;
}
.docs-toc {
  position: sticky;
  top: 24px;
  align-self: start;
}
.docs-toc-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-line-soft);
}
.docs-toc ol {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: docs;
}
.docs-toc li {
  counter-increment: docs;
  padding: 6px 0 6px 32px;
  position: relative;
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  color: var(--foam);
  cursor: pointer;
  transition: color 0.15s;
}
.docs-toc li::before {
  content: counter(docs, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--gold-dim);
  letter-spacing: 0.08em;
}
.docs-toc li:hover, .docs-toc li.active { color: var(--gold-bright); }

.docs-content {
  max-width: 720px;
}
.docs-rule {
  margin-bottom: 48px;
}
.docs-rule-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 8px;
}
.docs-rule h2 {
  font-family: 'Cinzel', serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--foam);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-line);
  position: relative;
}
.docs-rule h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 60px;
  height: 1px;
  background: var(--gold);
}
.docs-rule p {
  font-family: 'EB Garamond', serif;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--foam);
  margin: 0 0 14px;
}
.docs-rule code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 2px 6px;
  background: var(--ink-slate);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  color: var(--gold-bright);
}
.docs-callout {
  margin: 20px 0;
  padding: 16px 20px;
  background: rgba(184,153,104,0.06);
  border-left: 3px solid var(--gold);
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--foam-dim);
}
.docs-callout strong {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  display: block;
  margin-bottom: 6px;
}

/* ============================================================
   SISTEMA — atualizações de mecânicas e novas funcionalidades
   Layout: índice lateral fixo + feed cronológico
   ============================================================ */
.sys-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 32px;
}
@media (max-width: 980px) {
  .sys-shell { grid-template-columns: 1fr; gap: 24px; }
  .sys-toc { position: static; border-right: none; padding-right: 0; border-bottom: 1px solid var(--ink-line-soft); padding-bottom: 16px; }
}
.sys-toc {
  position: sticky;
  top: 24px;
  padding: 4px 24px 4px 0;
  border-right: 1px solid var(--ink-line-soft);
  align-self: start;
}
.sys-toc-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-line-soft);
  font-weight: 500;
}
.sys-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sys-toc li {
  padding: 8px 10px 8px 12px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.sys-toc li:hover { background: rgba(184,153,104,0.07); border-left-color: var(--gold-dim); }
.sys-toc li.active { background: rgba(184,153,104,0.12); border-left-color: var(--gold); }
.sys-toc-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--gold-dim);
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
}
.sys-toc li.active .sys-toc-date { color: var(--gold); }
.sys-toc-title-text {
  font-family: 'EB Garamond', serif;
  font-size: 13px;
  color: var(--foam-dim);
  line-height: 1.35;
  display: block;
}
.sys-toc li:hover .sys-toc-title-text,
.sys-toc li.active .sys-toc-title-text { color: var(--foam); }

.sys-feed { padding-bottom: 80px; min-width: 0; }
.sys-entry {
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--ink-line-soft);
  position: relative;
  scroll-margin-top: 24px;
}
.sys-entry:last-child { border-bottom: none; margin-bottom: 0; }
.sys-entry-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 14px;
}
.sys-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.sys-title {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--foam);
  margin: 0;
  font-weight: 500;
  flex: 1;
  text-wrap: pretty;
}
.sys-body {
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--foam);
  max-width: 65ch;
}
.sys-body p { margin: 0 0 14px; }
.sys-body p:last-child { margin-bottom: 0; }

.sys-entry.compact { padding-bottom: 16px; margin-bottom: 16px; }
.sys-entry.compact .sys-entry-head { margin-bottom: 0; }
.sys-entry.compact .sys-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold-bright);
  text-transform: uppercase;
  font-weight: 500;
}
.sys-entry.compact .sys-line {
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  color: var(--foam);
  line-height: 1.5;
  margin-top: 8px;
  max-width: 65ch;
}

.sys-edit-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--ink-line);
  padding: 3px 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.sys-entry:hover .sys-edit-btn { opacity: 1; }
.sys-edit-btn:hover { border-color: var(--gold); color: var(--gold-bright); }

.sys-fig { margin: 22px 0 26px; text-align: center; }
.sys-fig-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  border: 1px solid var(--ink-line);
}
.sys-fig image-slot {
  display: block;
  width: 100%;
  height: 300px;
  background: var(--ink-slate);
  border: 1px solid var(--ink-line);
}
.sys-fig-caption {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--foam-dim);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

/* ============================================================
   Session cards (new — replaces session-list)
   ============================================================ */
.session-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}

.session-card {
  background: var(--ink-slate);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  padding: 28px 30px 26px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
}
.session-card:hover {
  border-color: var(--gold-dim);
  background: var(--ink-slate-2);
  transform: translateY(-1px);
}
.session-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--gold);
  opacity: 0.6;
}
.session-card.latest::before { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-bright) 100%); opacity: 1; }

.session-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-line-soft);
}
.session-card-num {
  font-family: 'Cinzel', serif;
  font-size: 42px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  line-height: 1;
}
.session-card-num-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-top: 4px;
}
.session-card-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foam-dim);
  text-align: right;
}
.session-card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  border-radius: 2px;
  margin-top: 6px;
  display: inline-block;
}

.session-card-title {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--foam);
  margin: 0 0 6px;
  line-height: 1.2;
}
.session-card-location {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--gold-bright);
  margin: 0 0 16px;
}

.session-card-summary {
  font-family: 'EB Garamond', serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--foam-dim);
  margin: 0 0 20px;
}

.session-card-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-line-soft);
  margin-bottom: 4px;
}
.session-card-meta-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: baseline;
}
.session-card-meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--foam-dim);
}
.session-card-meta-value {
  font-family: 'EB Garamond', serif;
  font-size: 13.5px;
  color: var(--foam);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-mini {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  background: var(--ink-deep);
  border: 1px solid var(--ink-line);
  color: var(--foam);
  border-radius: 2px;
}
.chip-mini.npc { color: var(--gold-dim); }
.chip-mini.place { color: var(--planar); border-color: rgba(122,90,168,0.4); }

.session-card-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   Back button (used on detail pages)
   ============================================================ */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--foam-dim);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-bottom: 20px;
  transition: color 0.15s;
}
.back-btn:hover { color: var(--gold-bright); }
.back-btn::before { content: "←"; font-size: 14px; }

/* On parchment context */
.parchment .back-btn { color: var(--parchment-text-soft); }
.parchment .back-btn:hover { color: var(--wine); }

/* ============================================================
   Session detail page
   ============================================================ */
.session-detail {
  padding: 56px 64px 100px;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}

.session-detail-head {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ink-line);
  position: relative;
}
.session-detail-head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100px;
  height: 1px;
  background: var(--gold);
}
.session-detail-num {
  font-family: 'Cinzel', serif;
  font-size: 88px;
  line-height: 1;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
  margin: 0 0 4px;
}
.session-detail-num-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 24px;
}
.session-detail-title {
  font-family: 'Cinzel', serif;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--foam);
  margin: 0 0 10px;
  line-height: 1.1;
}
.session-detail-location {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--gold-bright);
  margin: 0 0 4px;
}
.session-detail-location-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foam-dim);
  margin: 0;
}

.session-meta-strip {
  display: flex;
  gap: 40px;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--ink-line-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.session-meta-strip > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.session-meta-strip .label { color: var(--foam-dim); }
.session-meta-strip .value { color: var(--gold-bright); font-family: 'Cinzel', serif; letter-spacing: 0.08em; font-size: 14px; }

.session-detail-block {
  margin-bottom: 36px;
}
.session-detail-block h2 {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink-line-soft);
}
.session-detail-block p {
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--foam);
  margin: 0 0 16px;
}
.session-detail-block p:first-of-type::first-letter {
  font-family: 'Cinzel', serif;
  font-size: 3.4em;
  float: left;
  line-height: 0.85;
  margin: 4px 10px 0 0;
  color: var(--gold);
  font-weight: 600;
}

.session-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.session-keylist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.session-keylist li {
  padding: 6px 0 6px 24px;
  position: relative;
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  color: var(--foam);
  line-height: 1.45;
}
.session-keylist li::before {
  content: "✦";
  position: absolute;
  left: 0; top: 6px;
  color: var(--gold);
  font-size: 12px;
}
.session-keylist li.danger::before { content: "†"; color: var(--wine-bright); }

.session-loot {
  background: var(--ink-deep);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  padding: 18px 22px;
  list-style: none;
  margin: 0;
}
.session-loot li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--ink-line-soft);
  font-family: 'EB Garamond', serif;
  font-size: 14.5px;
  color: var(--foam);
}
.session-loot li:last-child { border-bottom: none; }
.session-loot li::before {
  content: "▸ ";
  color: var(--gold-dim);
}

.gm-note {
  background: rgba(184,153,104,0.06);
  border-left: 3px solid var(--gold);
  padding: 18px 22px;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--foam-dim);
}
.gm-note::before {
  content: "Notas do Mestre";
  display: block;
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 8px;
}

/* ============================================================
   Character detail — portrait variant of article
   ============================================================ */
.infobox-portrait-wrap {
  width: 100%;
  aspect-ratio: 1;
  max-width: 200px;
  margin: 0 auto 14px;
  background:
    repeating-linear-gradient(45deg, transparent 0px, transparent 12px, rgba(184,153,104,0.05) 12px, rgba(184,153,104,0.05) 13px),
    radial-gradient(ellipse at 50% 35%, rgba(184,153,104,0.12) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-slate-2) 0%, var(--ink-deep) 100%);
  border: 1px solid var(--gold-dim);
  display: grid;
  place-items: center;
  position: relative;
}
.infobox-portrait-initial {
  font-family: 'Cinzel', serif;
  font-size: 96px;
  color: var(--gold-bright);
  opacity: 0.65;
  line-height: 1;
}
.infobox-portrait-tag {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  padding: 3px 9px;
  background: rgba(14,13,16,0.92);
  border: 1px solid var(--ink-line);
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
}
.infobox-portrait-tag.pc   { color: var(--gold-bright); border-color: var(--gold); }
.infobox-portrait-tag.ally { color: var(--necro); border-color: var(--necro); }
.infobox-portrait-tag.foe  { color: var(--wine-bright); border-color: var(--wine); }

.infobox-link {
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
  transition: opacity 0.15s;
}
.infobox-link:hover { opacity: 0.7; }

/* Hero quote at top of detail body */
.detail-hero {
  margin: 0 0 32px;
  padding: 22px 28px;
  background: rgba(120, 90, 50, 0.08);
  border-left: 3px solid var(--wine);
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--parchment-text);
}

/* Placeholder banner for incomplete entries */
.placeholder-banner {
  margin-top: 32px;
  padding: 28px 32px;
  background: var(--ink-slate);
  border: 1px dashed var(--gold-dim);
  border-radius: 2px;
  text-align: center;
}
.placeholder-banner-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.placeholder-banner h3 {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--foam);
  margin: 0 0 8px;
}
.placeholder-banner p {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--foam-dim);
  margin: 0;
}

/* ============================================================
   Deity hero image (parchment article)
   ============================================================ */
.deity-hero-image {
  margin: 0 0 36px;
  aspect-ratio: 16 / 9;
  width: 100%;
  position: relative;
  border: 1px solid var(--parchment-rule);
  background: rgba(120, 90, 50, 0.06);
}
.deity-hero-image image-slot {
  display: block;
  width: 100%;
  height: 100%;
}

/* image-slot in cast portrait — make sure layered tag stays on top */
.cast-portrait image-slot {
  display: block;
  z-index: 1;
}
.cast-portrait .cast-portrait-tag { z-index: 2; }

/* image-slot in infobox portrait */
.infobox-portrait-wrap image-slot {
  display: block;
  z-index: 1;
}
.infobox-portrait-wrap .infobox-portrait-tag { z-index: 2; }

/* ============================================================
   Auth button (topbar)
   ============================================================ */
.auth-btn {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foam-dim);
  background: transparent;
  border: 1px solid var(--ink-line);
  padding: 5px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}
.auth-btn:hover {
  color: var(--gold-bright);
  border-color: var(--gold-dim);
}
.auth-user-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-role-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 3px 8px;
  border-radius: 2px;
}

/* ============================================================
   CRUD: editor add button
   ============================================================ */
.editor-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold-dim);
  padding: 7px 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: auto;
}
.editor-add-btn:hover {
  background: rgba(184,153,104,0.12);
  border-color: var(--gold);
}
.editor-add-btn::before {
  content: "+";
  font-size: 14px;
  line-height: 1;
  font-family: 'Cinzel', serif;
  color: var(--gold-bright);
}

.editor-del-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wine-bright);
  background: transparent;
  border: 1px solid var(--wine);
  padding: 3px 9px;
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
}
.editor-del-btn.confirm {
  background: var(--wine);
  color: #fff;
  opacity: 1;
}

/* Show delete buttons on hover of parent */
.session-card:hover .editor-del-btn,
.cast-card:hover .editor-del-btn,
.cast-portrait:hover .editor-del-btn,
.events-row:hover .editor-del-btn,
.timeline-event:hover .editor-del-btn {
  opacity: 1;
}

/* ============================================================
   Modal overlay & box
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 12, 0.85);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 24px;
}

.modal-box {
  background: var(--ink-slate);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

.modal-box > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.modal-head {
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--ink-line);
  flex-shrink: 0;
}
.modal-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.modal-title {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--foam);
  margin: 0;
}

.modal-body {
  padding: 24px 32px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.modal-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.modal-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.modal-input,
.modal-textarea,
.modal-select {
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  color: var(--foam);
  background: var(--ink-deep);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
  resize: none;
}
.modal-input:focus,
.modal-textarea:focus,
.modal-select:focus {
  border-color: var(--gold-dim);
}
.modal-input::placeholder,
.modal-textarea::placeholder {
  color: var(--foam-dim);
  opacity: 0.5;
}
.modal-textarea {
  min-height: 90px;
  line-height: 1.55;
}
.modal-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--foam-dim);
  opacity: 0.7;
  margin-top: 2px;
}
.modal-error {
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  color: var(--wine-bright);
  padding: 10px 14px;
  background: rgba(107, 26, 38, 0.15);
  border: 1px solid var(--wine);
  border-radius: 2px;
}

.modal-foot {
  padding: 18px 32px 24px;
  border-top: 1px solid var(--ink-line);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-save {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-deep);
  background: var(--gold);
  border: none;
  padding: 10px 24px;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-save:hover { opacity: 0.88; }
.btn-save:disabled { opacity: 0.45; cursor: default; }

.btn-cancel {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--foam-dim);
  background: transparent;
  border: 1px solid var(--ink-line);
  padding: 10px 18px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-cancel:hover { color: var(--foam); border-color: var(--foam-dim); }

.btn-delete {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wine-bright);
  background: transparent;
  border: 1px solid var(--wine);
  padding: 10px 18px;
  border-radius: 2px;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.15s;
}
.btn-delete:hover { background: rgba(107,26,38,0.2); }
.btn-delete.confirm {
  background: var(--wine);
  color: #fff;
}

/* Page header row with add button */
.page-header-row {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
}


/* ════════════════════════════════════════════════════════════════
   Deity sigil — uploadable image with SVG fallback
   ════════════════════════════════════════════════════════════════ */

.deity-sigil-render {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
}
.deity-sigil-render .deity-sigil-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* In pantheon card, the SVG fallback should fill the 56×56 box */
.deity-sigil > .deity-sigil-render > svg {
  width: 100%;
  height: 100%;
}

.deity-sigil-render.editable {
  cursor: pointer;
  transition: filter 200ms ease, transform 200ms ease;
}
.deity-sigil-render.editable:hover { filter: brightness(1.06); }
.deity-sigil-render.editable.busy { cursor: progress; }

.deity-sigil-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 50%;
  background: rgba(14, 13, 16, 0.78);
  border: 1px solid rgba(184, 153, 104, 0.4);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}
.deity-sigil-render.editable:hover .deity-sigil-overlay,
.deity-sigil-render.editable.busy .deity-sigil-overlay,
.deity-sigil-render.editable:focus-visible .deity-sigil-overlay {
  opacity: 1;
  pointer-events: auto;
}
.deity-sigil-overlay-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-align: center;
  padding: 0 8px;
  line-height: 1.35;
}
.deity-sigil-render.size-card .deity-sigil-overlay-text { font-size: 7.5px; letter-spacing: 0.12em; padding: 0 4px; }
.deity-sigil-render.size-infobox .deity-sigil-overlay-text { font-size: 10px; letter-spacing: 0.18em; }

.deity-sigil-remove-btn {
  pointer-events: auto;
  background: transparent;
  border: 1px solid var(--wine);
  color: var(--wine-bright);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  cursor: pointer;
  line-height: 1;
}
.deity-sigil-remove-btn:hover { background: rgba(122, 31, 31, 0.18); }
.deity-sigil-render.size-card .deity-sigil-remove-btn { font-size: 7px; padding: 2px 5px; }

.deity-sigil-error {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--wine-bright);
  background: rgba(14, 13, 16, 0.92);
  border: 1px solid var(--wine);
  padding: 3px 8px;
  white-space: nowrap;
  z-index: 5;
  border-radius: 2px;
}

/* In the infobox, the editable hover replaces the radial-gradient feel */
.infobox-sigil-wrap:has(.deity-sigil-render.editable:hover) {
  border-color: var(--gold);
}

/* ============================================================
   ============================================================
   PERSONAGENS — VARIAÇÕES DE CARD
   PCs usam "placa de bronze", NPCs usam "ficha de registro"
   com toggle para vista de índice (lista densa).
   ============================================================
   ============================================================ */

/* ============================================================
   Common — page controls (search + view toggle)
   ============================================================ */
.cast-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 14px 0 0;
  border-top: 1px solid var(--ink-line-soft);
}
.cast-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 14px;
  background: var(--ink-deep);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  transition: border-color 0.18s;
}
.cast-search:hover,
.cast-search:focus-within { border-color: var(--gold-dim); }
.cast-search:focus-within { box-shadow: 0 0 0 1px var(--gold-dim); }
.cast-search svg {
  flex-shrink: 0;
  width: 14px; height: 14px;
  color: var(--foam-dim);
}
.cast-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--foam);
  font-family: 'EB Garamond', serif;
  font-size: 15px;
}
.cast-search input::placeholder { color: var(--foam-dim); font-style: italic; }
.cast-search-clear {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--foam-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
}
.cast-search-clear:hover { color: var(--gold); }
.cast-search-count {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--foam-dim);
  text-transform: uppercase;
}

.cast-view-toggle {
  display: flex;
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.cast-view-toggle button {
  background: var(--ink-deep);
  border: none;
  padding: 0 16px;
  height: 38px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--foam-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.cast-view-toggle button + button { border-left: 1px solid var(--ink-line); }
.cast-view-toggle button:hover { color: var(--gold); background: var(--ink-slate); }
.cast-view-toggle button.active {
  background: linear-gradient(180deg, rgba(184,153,104,0.18) 0%, rgba(184,153,104,0.06) 100%);
  color: var(--gold-bright);
}

.cast-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--foam-dim);
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 16px;
}

/* ============================================================
   Filter chips bar (PC page — Status + Campanha)
   ============================================================ */
.cast-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 22px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--ink-line-soft);
}
.cast-filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cast-filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dim);
  flex-shrink: 0;
}
.cast-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cast-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  background: var(--ink-deep);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--foam-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.cast-filter-chip:hover {
  color: var(--gold-bright);
  border-color: var(--gold-dim);
}
.cast-filter-chip.active {
  background: linear-gradient(180deg, rgba(184,153,104,0.18) 0%, rgba(184,153,104,0.06) 100%);
  border-color: var(--gold);
  color: var(--gold-bright);
}
.cast-filter-chip.active.tone-necro {
  background: linear-gradient(180deg, rgba(122,156,74,0.18) 0%, rgba(122,156,74,0.05) 100%);
  border-color: var(--necro);
  color: var(--necro);
}
.cast-filter-chip.active.tone-wine {
  background: linear-gradient(180deg, rgba(140,37,53,0.22) 0%, rgba(140,37,53,0.05) 100%);
  border-color: var(--wine);
  color: var(--wine-bright);
}
.cast-filter-chip.active.tone-mute {
  background: var(--ink-slate-2);
  border-color: var(--ink-line);
  color: var(--foam);
}
.cast-filter-count {
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(255,255,255,0.04);
  color: inherit;
  opacity: 0.7;
  min-width: 18px;
  text-align: center;
}
.cast-filter-chip.active .cast-filter-count {
  background: rgba(0,0,0,0.35);
  opacity: 0.9;
}

.cast-filter-reset {
  background: transparent;
  border: none;
  color: var(--foam-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: auto;
  transition: color 0.15s;
}
.cast-filter-reset:hover { color: var(--wine-bright); }

/* ============================================================
   VARIAÇÃO PC — Retrato com Placa de Bronze
   ============================================================ */
.placa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 32px;
}
@media (max-width: 980px) {
  .placa-grid { grid-template-columns: repeat(2, 1fr); }
}
.placa-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s;
}
.placa-card:hover { transform: translateY(-3px); }

.placa-frame {
  position: relative;
  aspect-ratio: 3/4;
  border: 1px solid var(--ink-line);
  background: var(--ink-slate);
  box-shadow:
    inset 0 0 0 4px var(--ink-slate),
    inset 0 0 0 5px var(--gold-dim),
    0 4px 18px -6px rgba(0,0,0,0.7);
  transition: box-shadow 0.2s;
  overflow: hidden;
}
.placa-card:hover .placa-frame {
  box-shadow:
    inset 0 0 0 4px var(--ink-slate),
    inset 0 0 0 5px var(--gold),
    0 8px 28px -8px rgba(0,0,0,0.8);
}
.placa-card.dead .placa-frame {
  box-shadow:
    inset 0 0 0 4px var(--ink-slate),
    inset 0 0 0 5px var(--wine),
    0 4px 18px -6px rgba(0,0,0,0.7);
}
.placa-card.dead:hover .placa-frame {
  box-shadow:
    inset 0 0 0 4px var(--ink-slate),
    inset 0 0 0 5px var(--wine-bright),
    0 8px 28px -8px rgba(0,0,0,0.8);
}
.placa-frame image-slot {
  position: absolute !important;
  inset: 5px !important;
  width: calc(100% - 10px) !important;
  height: calc(100% - 10px) !important;
  z-index: 1;
}

.placa-status {
  position: absolute;
  top: 16px; right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: rgba(14,13,16,0.92);
  border: 1px solid;
  z-index: 3;
  pointer-events: none;
}
.placa-status-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.placa-status.necro { color: var(--necro); border-color: var(--necro); }
.placa-status.wine  { color: var(--wine-bright); border-color: var(--wine); }
.placa-status.gold  { color: var(--gold-bright); border-color: var(--gold); }

/* Mourning band removed — replaced by .dead-tomb (lápide) variant */

/* ============================================================
   STATUS VARIANT · MORTO — Lápide gravada (.dead-tomb)
   Topo arredondado da moldura, retrato em camafeu sépia,
   nome em Cinzel + ano gravados na parte inferior da pedra.
   ============================================================ */
.placa-card.dead-tomb .placa-frame {
  border-top-left-radius: 50% 22%;
  border-top-right-radius: 50% 22%;
  border: none;
  background: #0e0c0a;
  box-shadow: 0 4px 18px -6px rgba(0,0,0,0.7);
}
.placa-card.dead-tomb:hover .placa-frame {
  box-shadow:
    inset 0 0 18px rgba(184,153,104,0.10),
    0 8px 28px -8px rgba(0,0,0,0.85);
}
/* Retrato preenche o frame inteiro — inscrição sobreposta */
.placa-card.dead-tomb .placa-frame image-slot {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  filter: grayscale(0.7) sepia(0.25) contrast(0.95) brightness(0.85);
}
.placa-card.dead-tomb .placa-cameo-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(184,153,104,0.25),
    inset 0 0 24px rgba(0,0,0,0.6);
}
.placa-card.dead-tomb .placa-status {
  display: none;
}
.placa-tomb-inscription {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 32px 12px 14px;
  text-align: center;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 60%, transparent 100%);
}
.placa-tomb-name {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  letter-spacing: 0.16em;
  color: var(--gold-bright);
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.85),
    0 -1px 0 rgba(255,255,255,0.05);
  line-height: 1.1;
  font-weight: 500;
}
.placa-tomb-sep {
  display: block;
  margin: 8px auto 6px;
  width: 32px; height: 1px;
  background: var(--wine);
}
.placa-tomb-year {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--foam-dim);
  text-transform: uppercase;
}
/* Plaque enxuta na variante lápide (o nome está na pedra) */
.placa-card.dead-tomb .placa-plaque {
  padding: 12px 18px;
  margin-top: -8px;
  position: relative;
  z-index: 4;
}
.placa-card.dead-tomb .placa-plaque-name { display: none; }

/* ============================================================
   STATUS VARIANT · ÚLTIMA VISTA — Nota presa ao retrato (.lost-note)
   Retrato em sépia desbotado + pergaminho rasgado com o texto
   da última informação confiável e a assinatura de quem viu.
   Aplica-se a bucket 'outro' (cativo, desaparecido) que tenha
   o campo `Última Vista` preenchido no infobox.
   ============================================================ */
.placa-card.lost-note .placa-frame image-slot {
  filter: sepia(0.3) grayscale(0.45) brightness(0.85) contrast(1.05);
}
.placa-card.lost-note .placa-frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: radial-gradient(ellipse at 50% 30%, transparent 35%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  z-index: 2;
}
.placa-lost-note {
  position: absolute;
  bottom: 7%; left: 10%; right: 10%;
  background: linear-gradient(180deg, #ebdcb6 0%, #d6c499 100%);
  color: #2a1f10;
  padding: 11px 13px 13px;
  font-family: 'EB Garamond', serif;
  z-index: 3;
  transform: rotate(-1.8deg);
  box-shadow:
    0 12px 24px -8px rgba(0,0,0,0.75),
    0 3px 6px rgba(0,0,0,0.5);
  /* bordas rasgadas */
  clip-path: polygon(
    0% 4%, 4% 0%, 12% 3%, 22% 0%, 38% 4%, 56% 0%, 72% 3%, 88% 1%, 100% 4%,
    98% 24%, 100% 52%, 96% 78%, 100% 100%,
    82% 96%, 62% 100%, 42% 96%, 22% 100%, 6% 96%, 0% 100%,
    2% 72%, 0% 48%, 4% 22%
  );
  pointer-events: none;
}
.placa-lost-note::before {
  /* textura granulada do papel */
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 4px, rgba(0,0,0,0.025) 4px, rgba(0,0,0,0.025) 5px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(0,0,0,0.018) 3px, rgba(0,0,0,0.018) 4px);
  pointer-events: none;
}
.placa-lost-note-pin {
  position: absolute;
  top: -8px; left: 20%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c4404a 0%, #6b1a26 60%, #3a0c14 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.placa-lost-note-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 4px;
}
.placa-lost-note-text {
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.3;
  color: #2a1f10;
}
.placa-lost-note-sig {
  margin-top: 6px;
  text-align: right;
  font-style: italic;
  font-size: 11px;
  color: #5a3a20;
  letter-spacing: 0.04em;
}

.placa-plaque {
  position: relative;
  margin: -16px 18px 0;
  padding: 18px 18px 16px;
  background:
    linear-gradient(180deg, rgba(212,184,127,0.06) 0%, rgba(0,0,0,0) 40%),
    radial-gradient(ellipse at 50% 0%, rgba(212,184,127,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #2d2418 0%, #1a1610 100%);
  border: 1px solid var(--gold-dim);
  border-top: 2px solid var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(212,184,127,0.2),
    0 4px 12px -4px rgba(0,0,0,0.6);
  text-align: center;
  transition: border-color 0.2s;
}
.placa-card:hover .placa-plaque {
  border-color: var(--gold);
  border-top-color: var(--gold-bright);
}
.placa-plaque-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 6px;
}
.placa-plaque-name {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  margin: 0 0 6px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.placa-plaque-role {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--foam-dim);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Edit button placement for placa cards */
.placa-card .editor-del-btn,
.placa-card .editor-add-btn {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s;
}
.placa-card:hover .editor-del-btn,
.placa-card:hover .editor-add-btn { opacity: 1; }

/* ============================================================
   VARIAÇÃO NPC — Ficha de Registro (dossier-style)
   ============================================================ */
.ficha-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}
@media (max-width: 980px) {
  .ficha-grid { grid-template-columns: 1fr; }
}
.ficha-card {
  background: var(--ink-slate);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.ficha-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-2px);
}
.ficha-card.foe { /* INIMIGO: corner wine */ }
.ficha-card .ficha-corner {
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border: 22px solid transparent;
  border-top-color: var(--gold-dim);
  border-right-color: var(--gold-dim);
  z-index: 3;
}
.ficha-card.foe .ficha-corner {
  border-top-color: var(--wine);
  border-right-color: var(--wine);
}

.ficha-stamp {
  position: absolute;
  top: 22px; right: 6px;
  transform: rotate(14deg);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  padding: 4px 14px;
  background: rgba(14,13,16,0.85);
  opacity: 0.92;
  z-index: 4;
  pointer-events: none;
  border: 2px solid;
}
.ficha-stamp.necro { color: var(--necro); border-color: var(--necro); }
.ficha-stamp.wine  { color: var(--wine-bright); border-color: var(--wine-bright); }
.ficha-stamp.gold  { color: var(--gold-bright); border-color: var(--gold-bright); }

.ficha-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--ink-deep);
  border-bottom: 1px solid var(--ink-line);
  overflow: hidden;
}
.ficha-portrait image-slot {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

.ficha-body {
  padding: 22px 26px 24px;
}
.ficha-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 8px;
}
.ficha-name {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--foam);
  margin: 0 0 6px;
  line-height: 1.15;
}
.ficha-alias {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--foam-dim);
  line-height: 1.4;
  margin: 0 0 16px;
}
.ficha-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 18px;
  padding: 14px 0;
  border-top: 1px solid var(--ink-line-soft);
  border-bottom: 1px solid var(--ink-line-soft);
}
.ficha-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
}
.ficha-row dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--foam-dim);
  margin: 0;
}
.ficha-row dd {
  margin: 0;
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  color: var(--foam);
  line-height: 1.35;
}
.ficha-quote {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--foam-dim);
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--gold-dim);
}

/* Editor button placement for ficha cards */
.ficha-card .editor-del-btn,
.ficha-card .editor-add-btn {
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s;
}
.ficha-card:hover .editor-del-btn,
.ficha-card:hover .editor-add-btn { opacity: 1; }

/* ============================================================
   VARIAÇÃO NPC — Índice do Arquivista (lista densa)
   ============================================================ */
.indice {
  background: var(--ink-slate);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  margin-top: 32px;
  overflow: hidden;
}
.indice-head {
  display: grid;
  grid-template-columns: 56px 64px 1fr 220px 140px 64px;
  gap: 14px;
  padding: 12px 22px;
  background: var(--ink-deep);
  border-bottom: 1px solid var(--ink-line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.indice-row {
  display: grid;
  grid-template-columns: 56px 64px 1fr 220px 140px 64px;
  gap: 14px;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--ink-line-soft);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.indice-row:hover { background: var(--ink-slate-2); }
.indice-row:last-child { border-bottom: none; }
.indice-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.15s;
}
.indice-row:hover::before { opacity: 1; }
.indice-row.dead .indice-name { color: var(--foam-dim); }
.indice-row.dead .indice-name::before {
  content: '† ';
  color: var(--wine-bright);
  font-weight: 600;
}

.indice-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold-dim);
}
.indice-portrait {
  width: 64px;
  height: 64px;
  position: relative;
  border: 1px solid var(--ink-line);
  background: var(--ink-deep);
  overflow: hidden;
  flex-shrink: 0;
}
.indice-portrait image-slot {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.indice-main { min-width: 0; }
.indice-name {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--foam);
  margin: 0 0 3px;
}
.indice-role {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--foam-dim);
  margin: 0;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.indice-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-width: 0;
}
.indice-classe {
  color: var(--foam);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.indice-faccao {
  color: var(--gold);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.indice-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: rgba(14,13,16,0.7);
  border: 1px solid;
  width: max-content;
}
.indice-status-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.indice-status.necro { color: var(--necro); border-color: var(--necro); }
.indice-status.wine  { color: var(--wine-bright); border-color: var(--wine); }
.indice-status.gold  { color: var(--gold-bright); border-color: var(--gold); }

.indice-tag {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 4px 0;
  border: 1px solid;
}
.indice-tag.pc  { color: var(--gold-bright); border-color: var(--gold); }
.indice-tag.foe { color: var(--wine-bright); border-color: var(--wine); }
.indice-tag.npc { color: var(--foam-dim); border-color: var(--ink-line); }
.indice-tag.ally { color: var(--necro); border-color: var(--necro); }

/* Editor controls in row */
.indice-row .editor-del-btn,
.indice-row .editor-add-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s;
}
.indice-row:hover .editor-del-btn,
.indice-row:hover .editor-add-btn { opacity: 1; }

/* ============================================================
   NPC DETAIL — Dossier redesign (npc-detail.jsx)
   All classes prefixed np- (NPC Page)
   ============================================================ */

/* Top bar: back button + edit button row */
.np-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* Dossier header */
.np-header { margin-bottom: 12px; }

.np-header-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 10px;
}

.np-title {
  font-family: 'Cinzel', serif;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--parchment-text);
  margin: 0 0 10px;
  line-height: 1.05;
}

.np-subtitle {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--parchment-text-soft);
  margin: 0 0 32px;
}

/* ── Sticky toolbar ───────────────────────────────────────── */

.np-toolbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 10px;
  background: var(--parchment-shade);
  border-bottom: 1px solid var(--parchment-rule);
  margin: 0 -64px 24px;
  padding-left: 64px;
  padding-right: 64px;
}

.np-toolbar-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  background: rgba(42, 36, 24, 0.08);
  border: 1px solid var(--parchment-rule);
  border-radius: 2px;
  transition: border-color 0.18s;
}
.np-toolbar-search:focus-within { border-color: var(--wine); }
.np-toolbar-search svg {
  color: var(--parchment-text-soft);
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}
.np-toolbar-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  color: var(--parchment-text);
}
.np-toolbar-search input::placeholder {
  color: var(--parchment-text-soft);
  font-style: italic;
  opacity: 0.7;
}
.np-toolbar-search-clear {
  background: transparent;
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--parchment-text-soft);
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.15s;
  white-space: nowrap;
}
.np-toolbar-search-clear:hover { color: var(--wine); }

.np-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid var(--parchment-rule);
  border-radius: 2px;
  color: var(--parchment-text-soft);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.np-toolbar-btn:hover {
  border-color: var(--wine);
  color: var(--wine);
}
.np-toolbar-btn.active {
  background: rgba(107, 26, 38, 0.10);
  border-color: var(--wine);
  color: var(--wine);
}
.np-toolbar-btn svg { width: 13px; height: 13px; }

.np-toolbar-divider {
  width: 1px;
  height: 22px;
  background: var(--parchment-rule);
  opacity: 0.5;
  flex-shrink: 0;
}

/* ── Tag filter row ──────────────────────────────────────── */

.np-tag-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.np-tag-filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-text-soft);
  margin-right: 4px;
}
.np-tag-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--parchment-rule);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment-text-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.np-tag-pill:hover {
  border-color: var(--wine);
  color: var(--wine);
}
.np-tag-pill.active {
  background: rgba(107, 26, 38, 0.12);
  border-color: var(--wine);
  color: var(--wine-bright);
}

/* ── Field reports ───────────────────────────────────────── */

.np-reports {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.np-report {
  border-bottom: 1px solid var(--parchment-rule);
}
.np-report:first-child {
  border-top: 1px solid var(--parchment-rule);
}

.np-report-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  user-select: none;
}

.np-report-chevron {
  display: grid;
  place-items: center;
  color: var(--wine);
  margin-top: 4px;
  transition: transform 0.22s ease;
  flex-shrink: 0;
}
.np-report-chevron svg { width: 13px; height: 13px; }
.np-report.open .np-report-chevron { transform: rotate(180deg); }

.np-report-head-main { min-width: 0; }

.np-report-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 4px;
}
.np-report-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--parchment-text);
  margin: 0 0 6px;
  line-height: 1.25;
}
.np-report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.np-report-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--parchment-text-soft);
  text-transform: uppercase;
}
.np-report-meta-item svg { width: 11px; height: 11px; opacity: 0.75; }

.np-report-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-self: center;
  flex-shrink: 0;
}

/* ── Inline tag pills ────────────────────────────────────── */

.np-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: rgba(107, 26, 38, 0.08);
  border: 1px solid rgba(107, 26, 38, 0.25);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wine-bright);
}
.np-tag--sm { height: 18px; font-size: 8.5px; }
.np-tag.clickable { cursor: pointer; transition: all 0.12s; }
.np-tag.clickable:hover,
.np-tag.clickable.active {
  background: rgba(107, 26, 38, 0.18);
  border-color: var(--wine);
}

/* ── Report body ─────────────────────────────────────────── */

.np-report-body {
  padding: 4px 0 24px 40px;
}
.np-report-body p {
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--parchment-text);
  margin: 0 0 1.1em;
  hyphens: auto;
}
.np-report-body p:last-child { margin-bottom: 0; }

/* ── Redaction bar ───────────────────────────────────────── */

.np-redacted {
  display: inline-block;
  background: var(--parchment-text);
  color: transparent;
  border-radius: 1px;
  min-width: 60px;
  height: 1em;
  vertical-align: middle;
  user-select: none;
}

/* ── Search highlight ────────────────────────────────────── */

.np-highlight {
  background: rgba(107, 26, 38, 0.18);
  color: var(--wine-bright);
  border-radius: 1px;
  padding: 0 1px;
}

/* ── Empty state ─────────────────────────────────────────── */

.np-empty {
  padding: 48px 32px;
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--parchment-text-soft);
  border: 1px dashed var(--parchment-rule);
  background: rgba(42, 36, 24, 0.03);
  border-radius: 2px;
}
.np-empty strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 8px;
}

/* ── Grid view ───────────────────────────────────────────── */

.np-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.np-grid-card {
  background: rgba(42, 36, 24, 0.06);
  border: 1px solid var(--parchment-rule);
  border-top: 3px solid var(--wine);
  border-radius: 2px;
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  flex-direction: column;
  min-height: 130px;
}
.np-grid-card:hover {
  border-top-color: var(--gold);
  background: rgba(184, 153, 104, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.15);
}
.np-grid-card-num {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--parchment-rule);
  line-height: 1;
  margin-bottom: 8px;
}
.np-grid-card-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--parchment-text);
  margin: 0 0 10px;
  line-height: 1.3;
  flex: 1;
}
.np-grid-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

/* Grid → list pulse animation */
@keyframes np-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(107, 26, 38, 0.35); }
  50%  { box-shadow: 0 0 0 8px rgba(107, 26, 38, 0); }
  100% { box-shadow: none; }
}
.np-report.pulse { animation: np-pulse 0.7s ease-out; }

/* ============================================================
   Export para PDF (impressão)
   ============================================================ */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .mast, .bnav, .bnav-sheet,
  .twk-panel, .twk-fab, .twk-trigger,
  .back-btn, .editor-add-btn,
  .np-toolbar, .np-tag-filter,
  image-slot .image-slot-controls,
  [data-noncommentable] {
    display: none !important;
  }

  .app {
    display: block !important;
    min-height: 0 !important;
  }

  .main {
    overflow: visible !important;
  }

  .article, .np-dossier {
    display: block !important;
  }

  .parchment {
    box-shadow: none !important;
  }

  .infobox-rail {
    break-inside: avoid;
  }

  /* The site's default theme is light text on dark surfaces (gold,
     "foam" beige, etc). None of that is legible once printed on plain
     white paper, whether or not the printer renders background colors,
     so print is forced to plain dark ink on white regardless of the
     on-screen palette. */
  .main, .main *,
  .main *::before, .main *::after {
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    color: #1a1208 !important;
    border-color: #ccc !important;
  }

  .main img, .main svg {
    background: transparent !important;
  }

  /* Decorative overlays (paper grain, vignette, gradient hairlines) add
     many stacked semi-transparent layers. Some print drivers (notably
     Windows' "Microsoft Print to PDF") flatten pages like that into a
     single rasterized image instead of real vector text, which makes
     the resulting PDF uncopiable. They're purely cosmetic, so drop them
     for print rather than risk that. */
  .parchment::before, .parchment::after {
    content: none !important;
    display: none !important;
  }

  .infobox-row dd.danger { color: #8c2535 !important; }
  .infobox-row dd.ok { color: #3f6b2a !important; }
  .infobox-link { color: #6b1a26 !important; text-decoration: underline; }

  @page {
    margin: 1.5cm;
  }
}