/**
 * Pride Flag Database — Styles
 * Archival, research-based, museum-quality aesthetic.
 * Neutral interface — the flags provide the color.
 */

/* Force all form elements to inherit body text color */
input, select, textarea, button {
  color: currentColor;
  font-family: inherit;
}

/* ── Layout ────────────────────────────────────────────────────────── */

.fp-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem 1.5rem;
}

.fp-page-header {
  margin-bottom: 0.5rem;
}

.fp-page-title {
  font-family: Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.fp-page-subtitle {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}

.fp-page-lede {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  opacity: 0.6;
  margin-bottom: 0;
}

/* ── Purpose & Positionality Statement ───────────────────────────── */

.fp-statement {
  border-top: none;
  border-bottom: none;
  padding: 1.5rem 0;
  margin-bottom: 0.25rem;
}

.fp-statement-prose {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.8;
  max-width: none;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.fp-statement-prose p {
  margin: 0 0 1.25rem;
}

.fp-statement-prose p:last-child {
  margin-bottom: 0;
}

.fp-statement--collapsed .fp-statement-prose {
  max-height: 8.5em;
  position: relative;
  /* Show the first hidden line at 50% opacity to imply continuation */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.8em), rgba(0,0,0,0.5));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.8em), rgba(0,0,0,0.5));
}

.fp-statement-prose a {
  color: inherit;
  text-decoration: underline;
  opacity: 0.85;
}

.fp-statement-prose a:hover {
  opacity: 1;
}

/* ── Info Bar ──────────────────────────────────────────────────────── */

.fp-info-bar {
  position: relative;
  margin: 0;
  margin-top: 1.8rem;
  border-top: 1px solid currentColor;
}

.fp-statement-toggle {
  position: absolute;
  top: -1.8rem;
  right: 0;
  background: none;
  border: 1px solid currentColor;
  border-bottom: none;
  padding: 0.25rem 0.75rem;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  color: inherit !important;
  opacity: 1;
  text-decoration: none;
}

.fp-statement-toggle:hover {
  opacity: 0.85;
}

.fp-info-rule {
  border: none;
  border-top: 1px solid currentColor;
  margin: 0;
}

.fp-info-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.6rem 0;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  opacity: 0.55;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scrollbar-width: none;
}

.fp-info-menu::-webkit-scrollbar {
  display: none;
}

.fp-info-left,
.fp-info-right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 0;
  gap: 0.15rem;
}

.fp-info-menu span,
.fp-info-menu a,
.fp-info-menu time {
  font-family: inherit !important;
  font-size: inherit !important;
  font-variant: normal !important;
  letter-spacing: normal !important;
  line-height: inherit;
  color: inherit !important;
}

.fp-info-menu a {
  text-decoration: underline;
}

.fp-info-menu a:hover {
  opacity: 1;
}

.fp-info-sep {
  margin: 0 0.25rem;
}

@media (max-width: 768px) {
  .fp-info-menu {
    font-size: 1rem;
    gap: 0 1rem;
  }

  /* Browse by Category: mobile dropdown */
  .fp-cat-nav-list {
    display: none;
  }
  .fp-cat-nav-select {
    display: block;
  }
}

.fp-statement-contact {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  opacity: 0.5;
  margin: 0;
}

.fp-statement-contact a {
  opacity: 0.8;
}

.fp-statement-prose {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.8;
  max-width: none;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.fp-statement-prose p {
  margin: 0 0 1.25rem;
}

.fp-statement-prose a:hover {
  opacity: 1;
}

/* Second .fp-info-menu block removed — the primary definition at ~line 120
   already handles nowrap + overflow-x scroll on all widths.
   Hearts (.fp-info-sep) are kept visible on mobile.
   Duplicate span/a/time rules also removed (primary set at ~line 149). */

.fp-info-sep {
  margin: 0 0.25rem;
}

/* ── Bibliography ──────────────────────────────────────────────────── */

.fp-bibliography {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
}

.fp-bib-loading {
  opacity: 0.5;
  font-style: italic;
}

/* ── Bibliography intro & stats ──────────────────────────────── */

.fp-bib-intro {
  max-width: 65ch;
  line-height: 1.6;
  margin-bottom: 1rem;
  opacity: 0.8;
}

.fp-bib-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.fp-bib-stat {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

/* ── Bibliography controls row ───────────────────────────────── */

.fp-bib-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.fp-bib-search-input {
  flex: 1;
  min-width: 180px;
  max-width: 360px;
  padding: 0.5rem 0.75rem;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  color: inherit;
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid currentColor;
  border-radius: 3px;
  outline: none;
  transition: border-color 0.15s;
}

.fp-bib-search-input:focus {
  border-color: currentColor;
}

.fp-bib-search-input::placeholder {
  opacity: 0.4;
}

.fp-bib-sort {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.8rem;
  padding: 0.45rem 0.6rem;
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid currentColor;
  border-radius: 3px;
  color: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 10px 6px;
  padding-right: 1.6rem;
}

.fp-bib-search-count {
  font-size: 0.75rem;
  opacity: 0.5;
  white-space: nowrap;
}

/* ── Filter chips ────────────────────────────────────────────── */

.fp-bib-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

.fp-bib-chip {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  opacity: 0.5;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.fp-bib-chip:hover {
  opacity: 0.8;
}

.fp-bib-chip--active {
  opacity: 1;
  background: rgba(128, 128, 128, 0.12);
  font-weight: 600;
}

/* ── Jump-to-type nav ────────────────────────────────────────── */

.fp-bib-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin-bottom: 1.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid currentColor;
  font-size: 0.72rem;
}

.fp-bib-jump-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.5;
  margin-right: 0.2rem;
}

.fp-bib-jump-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.fp-bib-jump-link:hover {
  opacity: 1;
}

/* ── Type section headings ───────────────────────────────────── */

.fp-bib-type-section {
  margin-bottom: 2rem;
}

.fp-bib-type-heading {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid currentColor;
}

.fp-bib-type-count {
  font-weight: normal;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.5;
}

.fp-bib-type-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Source cards ─────────────────────────────────────────────── */

.fp-bib-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  transition: border-color 0.15s, background 0.15s;
}

.fp-bib-card:hover {
  border-color: currentColor;
  background: rgba(128, 128, 128, 0.03);
}

.fp-bib-card-type {
  flex-shrink: 0;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.5;
  padding: 0.15rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  align-self: flex-start;
  white-space: nowrap;
  margin-top: 0.1rem;
}

.fp-bib-card-body {
  flex: 1;
  min-width: 0;
}

.fp-bib-card-title {
  font-weight: 600;
  margin-bottom: 0.2rem;
  line-height: 1.4;
}

.fp-bib-card-title a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fp-bib-card-title--url {
  font-weight: normal;
  font-size: 0.8rem;
  word-break: break-all;
}

.fp-bib-card-meta {
  font-size: 0.78rem;
  opacity: 0.65;
  margin-bottom: 0.3rem;
  line-height: 1.4;
}

.fp-bib-card-domain {
  display: inline-block;
  font-size: 0.65rem;
  opacity: 0.4;
  padding: 0.1rem 0.35rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  margin-bottom: 0.25rem;
}

.fp-bib-card-notes {
  font-size: 0.75rem;
  opacity: 0.55;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}

.fp-bib-card-archive {
  font-size: 0.72rem;
  opacity: 0.5;
  margin-bottom: 0.2rem;
}

.fp-bib-card-archive a {
  text-decoration: underline;
}

.fp-bib-card-accessed {
  font-size: 0.68rem;
  opacity: 0.4;
  font-style: italic;
  margin-bottom: 0.2rem;
}

.fp-bib-card-refs {
  font-size: 0.72rem;
  opacity: 0.6;
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid currentColor;
}

.fp-bib-card-refs-label {
  font-weight: 600;
}

.fp-bib-card-refs a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fp-bib-no-results {
  opacity: 0.5;
  font-style: italic;
  margin: 2rem 0;
}

/* ── Domain sub-groups ───────────────────────────────────────── */

.fp-bib-domain-group {
  margin-bottom: 0.3rem;
}

.fp-bib-domain-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(128, 128, 128, 0.03);
  border: none;
  border-bottom: 1px solid currentColor;
  padding: 0.35rem 0.4rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  color: inherit;
  transition: background 0.1s;
}

.fp-bib-domain-toggle:hover {
  background: rgba(128, 128, 128, 0.06);
}

.fp-bib-domain-arrow {
  display: inline-block;
  width: 0.8em;
  font-size: 0.65em;
  opacity: 0.5;
}

.fp-bib-domain-name {
  opacity: 0.7;
}

.fp-bib-domain-count {
  font-weight: normal;
  font-size: 0.72rem;
  opacity: 0.4;
  margin-left: 0.2em;
}

.fp-bib-domain-body {
  padding: 0.2rem 0 0.2rem 0.8rem;
  border-left: 1px solid currentColor;
  margin-left: 0.4rem;
}

.fp-bib-loading {
  opacity: 0.5;
  font-style: italic;
}

.fp-bib-summary {
  opacity: 0.6;
  margin-bottom: 2rem;
}

/* ── Category-level (source type) collapsible ──────────────────── */

.fp-bib-category {
  margin-bottom: 0.5rem;
}

.fp-bib-cat-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: bold;
  color: inherit;
  transition: background 0.15s;
}

.fp-bib-cat-toggle:hover {
  background: rgba(128, 128, 128, 0.1);
}

.fp-bib-cat-arrow {
  display: inline-block;
  width: 1em;
  font-size: 0.7em;
  transition: transform 0.15s;
}

.fp-bib-cat-count {
  font-weight: normal;
  opacity: 0.5;
  font-size: 0.8em;
}

.fp-bib-cat-body {
  padding: 0.4rem 0 0.4rem 0.6rem;
  border-left: 2px solid currentColor;
  margin-left: 0.4rem;
}

/* ── Per-source collapsible ────────────────────────────────────── */

.fp-bib-source {
  margin-bottom: 0.2rem;
}

.fp-bib-src-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  padding: 0.4rem 0.4rem;
  font-family: inherit;
  font-size: 0.82rem;
  color: inherit;
  line-height: 1.5;
  transition: background 0.1s;
}

.fp-bib-src-toggle:hover {
  background: rgba(128, 128, 128, 0.04);
}

.fp-bib-src-arrow {
  display: inline-block;
  width: 0.8em;
  font-size: 0.65em;
  opacity: 0.5;
}

.fp-bib-src-title {
  /* inherits */
}

.fp-bib-src-badge {
  font-size: 0.72rem;
  opacity: 0.45;
  font-style: italic;
  margin-left: 0.3em;
}

.fp-bib-src-body {
  padding: 0.4rem 0.4rem 0.6rem 1.4rem;
  border-left: 1px solid currentColor;
  margin-left: 0.4rem;
}

.fp-bib-src-detail {
  margin-bottom: 0.4rem;
}

.fp-bib-detail-url {
  font-size: 0.75rem;
  word-break: break-all;
  opacity: 0.6;
  margin-bottom: 0.2rem;
}

.fp-bib-detail-url a {
  text-decoration: underline;
}

.fp-bib-detail-archive {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 0.2rem;
  padding: 0.2rem 0.4rem;
  background: rgba(128, 128, 128, 0.05);
  border-radius: 2px;
}

.fp-bib-detail-archive a {
  text-decoration: underline;
  word-break: break-all;
}

.fp-bib-detail-accessed {
  font-size: 0.72rem;
  opacity: 0.45;
  font-style: italic;
  margin-bottom: 0.2rem;
}

.fp-bib-detail-notes {
  font-size: 0.78rem;
  opacity: 0.55;
  margin-bottom: 0.3rem;
  line-height: 1.5;
}

.fp-bib-src-refs {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 0.3rem;
}

.fp-bib-src-refs-label {
  font-weight: bold;
}

.fp-bib-src-refs a {
  text-decoration: underline;
}

/* ── Legacy classes (kept for backward compat) ─────────────────── */

.fp-bib-list {
  list-style: decimal;
  padding-left: 2rem;
  margin: 0;
}

.fp-bib-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid currentColor;
}

.fp-bib-cite {
  margin-bottom: 0.4rem;
}

.fp-bib-url {
  font-size: 0.75rem;
  word-break: break-all;
  opacity: 0.6;
}

.fp-bib-accessed {
  font-size: 0.75rem;
  opacity: 0.5;
  font-style: italic;
}

.fp-bib-refs {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 0.3rem;
}

.fp-bib-ref-count {
  font-weight: bold;
}

.fp-bib-refs a {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .fp-bib-card {
    flex-direction: column;
    gap: 0.3rem;
  }
  .fp-bib-stats {
    gap: 0.75rem;
  }
  .fp-bib-chips {
    gap: 0.25rem;
  }
}

/* ── Static Entry Directory (crawlable fallback, visually hidden) ─── */

.fp-static-directory {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fp-static-directory-heading {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.4;
  margin: 0 0 0.75rem 0;
}

.fp-static-directory-list {
  list-style: none;
  padding: 0;
  margin: 0;
  column-count: 3;
  column-gap: 1.5rem;
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  line-height: 1.8;
}

.fp-static-directory-list a {
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.fp-static-directory-list a:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .fp-static-directory-list {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .fp-static-directory-list {
    column-count: 1;
  }
}

/* ── Toolbar ───────────────────────────────────────────────────────── */

.fp-toolbar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  align-items: center;
}

.fp-toolbar .fp-btn {
  font-size: 0.85rem;
}

.fp-import-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}

.fp-import-label:hover {
  text-decoration-color: currentColor;
}

.fp-import-input {
  display: none;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.fp-btn {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.8rem;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 0.3rem 0.7rem;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1.4;
}

.fp-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.fp-btn-save {
  font-weight: bold;
}

.fp-btn-remove {
  opacity: 0.6;
}

.fp-btn-remove:hover {
  opacity: 1;
}

.fp-btn-add {
  border-style: dashed;
  opacity: 0.7;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.fp-btn-add:hover {
  opacity: 1;
}

/* ── Entry List ────────────────────────────────────────────────────── */

.fp-empty {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9rem;
  opacity: 0.6;
  padding: 2rem 0;
}

/* Card: thumbnail + body side by side */
.fp-entry-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border-top: 1px solid currentColor;
  padding: 1.25rem 0;
}

.fp-entry-card:last-child {
  border-bottom: 1px solid currentColor;
}

/* ── Thumbnail ─────────────────────────────────────────────────────── */

.fp-entry-thumb-link {
  flex-shrink: 0;
  text-decoration: none;
  display: block;
}

.fp-entry-thumb {
  width: 120px;
  height: 80px;
  border: 1px solid currentColor;
  opacity: 0.85;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease, border-width 0.15s ease;
}

.fp-entry-thumb-link:hover .fp-entry-thumb {
  opacity: 1;
  border-width: 1.5px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.2);
}

.fp-entry-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.fp-entry-thumb-stripes {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fp-entry-thumb-stripe {
  flex: 1;
}

.fp-entry-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(128, 128, 128, 0.12);
  font-size: 1.8rem;
  opacity: 0.25;
}

/* ── Body ──────────────────────────────────────────────────────────── */

.fp-entry-body {
  flex: 1;
  min-width: 0;
}

.fp-entry-family {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.45;
  margin-bottom: 0.1rem;
}

.fp-entry-title {
  font-family: Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: bold;
  margin-bottom: 0.15rem;
  line-height: 1.3;
}

.fp-entry-title-link {
  color: inherit;
  text-decoration: none;
}

.fp-entry-title-link:hover {
  text-decoration: underline;
}

.fp-entry-meta {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  opacity: 0.5;
  margin-bottom: 0.35rem;
  letter-spacing: 0.02em;
}

.fp-entry-desc {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  margin-bottom: 0.6rem;
  line-height: 1.55;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Actions ───────────────────────────────────────────────────────── */

.fp-entry-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.fp-entry-actions-group {
  display: flex;
  gap: 0.3rem;
}

/* Private actions: dimmed by default with a separator dot, visible but
   clearly secondary. They brighten on hover to indicate interactivity. */
.fp-entry-actions-private {
  opacity: 0.3;
  transition: opacity 0.25s ease;
  padding-left: 0.5rem;
  border-left: 1px solid currentColor;
}

.fp-entry-actions-private:hover {
  opacity: 0.75;
}

.fp-entry-action {
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  transition: background 0.15s ease, opacity 0.15s ease;
}

/* ── Form ──────────────────────────────────────────────────────────── */

.fp-form {
  max-width: 800px;
}

.fp-section {
  border: none;
  border-top: 1px solid currentColor;
  padding: 1rem 0 0.5rem;
  margin: 0 0 0.5rem;
}

.fp-section-title {
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0;
  margin-bottom: 0.75rem;
}

.fp-section-toggle {
  user-select: none;
  padding-left: 1.2em;
  position: relative;
}

.fp-section-toggle::before {
  content: '\25BE';
  position: absolute;
  left: 0;
  transition: transform 0.15s ease;
}

.fp-section-collapsed .fp-section-toggle::before {
  transform: rotate(-90deg);
}

.fp-section-collapsed .fp-field,
.fp-section-collapsed .fp-json-field,
.fp-section-collapsed textarea[data-field="sources"],
.fp-section-collapsed textarea[data-field="claims"] {
  display: none;
}

.fp-field {
  margin-bottom: 0.6rem;
}

.fp-label {
  display: block;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 0.2rem;
}

.fp-input {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 0.35rem 0.5rem;
  width: 100%;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s ease;
}

.fp-input:focus {
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.fp-input[readonly] {
  opacity: 0.5;
  border-style: dashed;
}

.fp-textarea {
  resize: vertical;
  min-height: 3rem;
}

.fp-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpolygon points='0,0 8,0 4,5' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-right: 1.5rem;
}

.fp-checkbox {
  width: auto;
  margin-right: 0.5rem;
  accent-color: currentColor;
}

.fp-json-field {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.8rem;
  white-space: pre;
  tab-size: 2;
}

/* ── Array fields ──────────────────────────────────────────────────── */

.fp-array-field {
  margin-top: 0.15rem;
}

.fp-array-row {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.fp-array-row .fp-input {
  flex: 1;
}

.fp-array-row .fp-btn-remove {
  flex-shrink: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
}

/* ── Form actions ──────────────────────────────────────────────────── */

.fp-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
}

/* ── Homepage: Lineage / Genealogy Map ─────────────────────────────── */

.fp-lineage-viewport {
  position: relative;
  width: 100%;
  min-height: 90vh;
  overflow: hidden;
  margin-bottom: 2rem;
  /* Subtle dot-grid background for archival/map feel */
  background-image: radial-gradient(circle, currentColor 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  background-position: 12px 12px;
  opacity: 1;
  will-change: transform;
  contain: layout style paint;
  /* Outline around the map container */
  border: 1px solid currentColor;
}

.fp-lineage-viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.fp-lineage-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
  z-index: 1;
}

.fp-panning {
  cursor: grabbing !important;
}

.fp-lineage-viewport:not(.fp-panning) {
  cursor: grab;
}

/* While the user is actively panning or dragging, block pointer events on
   nodes and connectors so the cursor can't "fly over" them as the canvas
   translates — that cascade was retriggering :hover + highlight classes on
   every node the cursor crossed, causing whole-graph opacity transitions to
   interrupt and restart at every frame (visible flashing). */
.fp-panning .fp-node,
.fp-panning .fp-connectors,
.fp-dragging .fp-node,
.fp-dragging .fp-connectors {
  pointer-events: none;
}

/* Zoom controls */
.fp-lineage-controls {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 10;
}

.fp-zoom-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, color 0.15s ease;
}

.fp-zoom-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

/* ── SVG Connectors ────────────────────────────────────────────────── */

.fp-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.fp-connector {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.25;
  transition: opacity 0.35s ease, stroke-width 0.2s ease;
}

.fp-connector-parent {
  stroke-dasharray: none;
  stroke-width: 1.25;
  opacity: 0.3;
}

.fp-connector-sibling {
  stroke-dasharray: 6 8;
  stroke-width: 0.75;
  opacity: 0.15;
}

.fp-connector-influence {
  stroke-dasharray: 4 6;
  stroke-width: 0.75;
  opacity: 0.12;
}

.fp-connector-related {
  stroke-dasharray: 2 6;
  stroke-width: 0.5;
  opacity: 0.08;
}

/* Hover highlighting states */
.fp-connector-highlighted {
  opacity: 0.55 !important;
  stroke-width: 1.75 !important;
}

.fp-connector-dimmed {
  opacity: 0.06 !important;
}

/* ── Orphan separator ──────────────────────────────────────────────── */

.fp-orphan-separator {
  position: absolute;
  height: 0;
  border-top: none;
  opacity: 0;
}

.fp-orphan-label {
  position: absolute;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.25;
  white-space: nowrap;
}

/* ── Thumbnail Node ────────────────────────────────────────────────── */

.fp-node {
  position: absolute;
  text-align: center;
  transition: opacity 0.3s ease, transform 0.2s ease;
  z-index: 2;
}

.fp-node:hover {
  z-index: 5;
  transform: translateY(-2px);
}

/* Hover highlighting — uniform 0.25s for smooth, consistent feel */
.fp-node-dimmed {
  opacity: 0.15;
}

.fp-node-highlighted {
  opacity: 1;
}

.fp-node-descendant {
  opacity: 0.78;
}

.fp-node-ancestor {
  opacity: 0.78;
}

.fp-node a {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 8px;
  transition: background 0.2s ease;
}

.fp-node a:hover {
  text-decoration: none;
}

.fp-node-thumb {
  width: 210px;
  height: 140px;
  margin: 0 auto 0.5rem;
  border: 1px solid currentColor;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, border-width 0.15s ease;
}

.fp-node:hover .fp-node-thumb {
  border-width: 1.5px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.2);
}

.fp-node-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.fp-node-color-preview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fp-node-color-stripe {
  flex: 1;
}

.fp-node-thumb-placeholder {
  font-size: 2.5rem;
  opacity: 0.15;
}

.fp-node-family {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.4;
  margin-bottom: 0.05rem;
}

.fp-node-title {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.35;
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
}

.fp-node-date {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  opacity: 0.55;
  letter-spacing: 0.02em;
}

.fp-node-creator {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.68rem;
  opacity: 0.4;
  margin-top: 0.1rem;
}

.fp-node-lineage-cue {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.68rem;
  opacity: 0.35;
  margin-top: 0.15rem;
  letter-spacing: 0.04em;
}

/* ── Mobile: Lineage map touch hint ───────────────────────────────── */

.fp-lineage-touch-hint {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.3rem 0.75rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.4s ease;
}

.fp-lineage-touch-hint.fp-hint-visible {
  opacity: 1;
}

@media (max-width: 768px) {
  .fp-lineage-touch-hint.fp-hint-visible {
    opacity: 1;
  }
}

/* ── Cluster Labels ───────────────────────────────────────────────── */

.fp-cluster-label {
  position: absolute;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.3;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}

/* ── Fullscreen mode ──────────────────────────────────────────────── */

.fp-lineage-viewport.fp-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  z-index: 9999;
  margin: 0;
  /* background-color set by JS from computed html background */
  background-image: radial-gradient(circle, currentColor 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  background-position: 12px 12px;
}

/* Disable per-element transitions during fullscreen so pan/zoom stays crisp */
.fp-fullscreen .fp-node,
.fp-fullscreen .fp-node-thumb,
.fp-fullscreen .fp-connector {
  transition: none;
}

/* Fullscreen: instant enter/exit, no opacity transition */

.fp-fullscreen-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, color 0.15s ease;
}

.fp-fullscreen-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

/* ── Hover info dialog ───────────────────────────────────────────── */

/* Info dialog — only visible in fullscreen mode (JS gates this) */

.fp-node-info {
  position: absolute;
  z-index: 20;
  width: 260px;
  background: rgba(0, 0, 0, 0.92);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.75rem 1rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Anonymous Pro', monospace;
  line-height: 1.5;
}

.fp-node-info.fp-info-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Preview thumbnail inside the info dialog */
.fp-node-info-thumb {
  width: 100%;
  height: 90px;
  margin-bottom: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.fp-node-info-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fp-node-info-thumb .fp-node-color-preview {
  width: 100%;
  height: 100%;
}

.fp-node-info-name {
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.fp-node-info-meta {
  font-size: 0.68rem;
  opacity: 0.55;
  margin-bottom: 0.35rem;
}

.fp-node-info-desc {
  font-size: 0.72rem;
  opacity: 0.82;
  line-height: 1.5;
  margin-bottom: 0.35rem;
}

.fp-node-info-lineage {
  font-size: 0.68rem;
  opacity: 0.42;
  font-style: italic;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.4rem;
  margin-top: 0.2rem;
}

/* ══════════════════════════════════════════════════════════════════════
 * ENTRY PAGE — Museum / Wikipedia / Archive hybrid
 * All classes prefixed fpe- (flag page entry)
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Page Container ───────────────────────────────────────────────── */

.fpe-page {
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 0;
}

/* Reduce excessive space between database pages and site footer */
main:has(.fp-page) {
  padding-bottom: 0;
}
main:has(.fp-page) + footer {
  margin-top: 0.5rem;
}

.fpe-back {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  display: inline-block;
  margin-bottom: 1.5rem;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.fpe-back:hover {
  opacity: 1;
}

/* ── Top Area: Figure + Infobox ───────────────────────────────────── */

.fpe-top {
  display: flex;
  gap: 2rem;
  margin-bottom: 2.5rem;
  align-items: flex-start;
}

/* ── Figure ────────────────────────────────────────────────────────── */

.fpe-figure {
  flex: 0 0 auto;
  width: 340px;
  margin: 0;
  padding: 0;
}

.fpe-figure-frame {
  border: 1px solid currentColor;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  aspect-ratio: 3 / 2;
}

.fpe-figure-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.fpe-figure-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0.15;
}

/* Stripe preview inside figure frame */
.fpe-stripe-preview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fpe-stripe {
  flex: 1;
}

/* Caption */
.fpe-caption {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  margin-top: 0.6rem;
  padding: 0;
  opacity: 0.75;
}

.fpe-caption-note {
  font-style: italic;
  opacity: 0.7;
}

/* ── Creator Thumbnails (below flag image) ────────────────────────── */

.fpe-infobox-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.fpe-infobox-header .fpe-infobox-title {
  flex: 1;
  min-width: 0;
}

.fpe-infobox-header .fpe-creator-thumbs {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.fpe-creator-thumbs {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.fpe-creator-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.fpe-creator-thumb img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid currentColor;
}

.fpe-creator-thumb-initials {
  width: 96px;
  height: 96px;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  opacity: 0.35;
}

.fpe-creator-thumb-name {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.7rem;
  opacity: 0.65;
  text-align: center;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Infobox ──────────────────────────────────────────────────────── */

.fpe-infobox {
  flex: 1;
  min-width: 0;
  border: 1px solid currentColor;
  padding: 1.25rem 1.5rem;
  position: relative;
}

.fpe-infobox-family {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.45;
  margin-bottom: 0.25rem;
}

.fpe-infobox-title {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.25;
  margin: 0 0 1rem;
}

.fpe-infobox-rows {
  margin: 0;
  padding: 0;
}

.fpe-ib-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
  margin: 0;
  padding: 0.5rem 0 0.1rem;
  border-top: 1px solid currentColor;
}

.fpe-ib-label:first-child {
  border-top: none;
  padding-top: 0;
}

.fpe-ib-value {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9rem;
  margin: 0;
  padding: 0 0 0.35rem;
  line-height: 1.5;
}

.fpe-ib-emoji-char {
  font-size: 1.6rem;
  vertical-align: middle;
  line-height: 1;
}

.fpe-ib-emoji-meta {
  font-size: 0.75rem;
  opacity: 0.65;
  vertical-align: middle;
}

.fpe-emoji-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.fpe-emoji-plat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.5rem;
}

.fpe-emoji-plat-img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  margin-bottom: 0.15rem;
}

.fpe-emoji-plat-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.fpe-emoji-plat-version {
  font-size: 0.6rem;
  opacity: 0.55;
  line-height: 1.2;
}

.fpe-badge {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  padding: 0.1rem 0.4rem;
  opacity: 0.8;
}

.fpe-badge-review {
  color: #b8860b;
  border-color: #b8860b;
}

.fpe-ib-place-present,
.fpe-ib-place-indigenous {
  font-size: 0.75rem;
  opacity: 0.65;
  font-style: italic;
}

.fpe-manual-review-note {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: rgba(184, 134, 11, 0.08);
  border-left: 2px solid #b8860b;
}

.fpe-ib-alt {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid currentColor;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  opacity: 0.6;
}

.fpe-ib-alt-label {
  font-style: italic;
}

/* ── Body (article sections) ──────────────────────────────────────── */

.fpe-body {
  max-width: 780px;
}

/* ── Section ──────────────────────────────────────────────────────── */

.fpe-section {
  margin-bottom: 0;
  padding: 1.5rem 0 1rem;
  border-top: 1px solid currentColor;
}

.fpe-section:first-child {
  border-top: none;
  padding-top: 0;
}

.fpe-section-heading {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.85rem;
}

.fpe-section-body {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.65;
}

/* ── Section Subtitle (e.g. reason for creation) ─────────────────── */

.fpe-section-subtitle {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.6;
  opacity: 0.7;
  margin: 0 0 0.75rem;
}

/* ── Single-Source Archival Notice ──────────────────────────────── */

.fpe-single-source-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0 1.5rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.04);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  line-height: 1.6;
}

.fpe-single-source-icon {
  flex-shrink: 0;
  font-size: 1rem;
  opacity: 0.5;
  margin-top: 0.1em;
}

.fpe-single-source-text {
  flex: 1;
}

.fpe-single-source-main {
  margin: 0 0 0.35rem;
  opacity: 0.75;
}

.fpe-single-source-why {
  margin: 0 0 0.35rem;
  opacity: 0.6;
  font-size: 0.78rem;
}

.fpe-single-source-link {
  font-size: 0.78rem;
  opacity: 0.6;
  text-decoration: underline;
}

.fpe-single-source-link:hover {
  opacity: 0.9;
}

/* ── Indigenous Archival Notice ────────────────────────────────────── */

.fpe-indigenous-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0 1.5rem;
  border: 1px solid rgba(139, 90, 43, 0.15);
  border-left: 3px solid rgba(139, 90, 43, 0.35);
  border-radius: 0 3px 3px 0;
  background: rgba(139, 90, 43, 0.04);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  line-height: 1.6;
}

.fpe-indigenous-notice-icon {
  flex-shrink: 0;
  font-size: 1rem;
  opacity: 0.5;
  margin-top: 0.1em;
}

.fpe-indigenous-notice-text {
  flex: 1;
}

.fpe-indigenous-notice-main {
  margin: 0 0 0.35rem;
  opacity: 0.75;
}

.fpe-indigenous-notice-details {
  margin: 0 0 0.35rem;
  opacity: 0.6;
  font-size: 0.78rem;
}

.fpe-indigenous-notice-link {
  font-size: 0.78rem;
  opacity: 0.6;
  text-decoration: underline;
}

.fpe-indigenous-notice-link:hover {
  opacity: 0.9;
}

.fpe-indigenous-notice-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.3rem;
}

.fpe-indigenous-notice-resource-link {
  font-size: 0.72rem;
  opacity: 0.5;
}

.fpe-indigenous-notice-resource-link:hover {
  opacity: 0.85;
}

/* ── Human Interest Notes ──────────────────────────────────────────── */

.fpe-human-interest-note {
  padding: 1rem 1.25rem;
  margin: 0.75rem 0;
  border-left: 3px solid currentColor;
  background: rgba(128, 128, 128, 0.03);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  line-height: 1.7;
}

.fpe-human-interest-heading {
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  opacity: 0.8;
  font-style: italic;
}

.fpe-subheading {
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  margin: 1rem 0 0.5rem;
  letter-spacing: 0.03em;
}

/* ── Key/Value Rows ───────────────────────────────────────────────── */

.fpe-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.3rem;
}

.fpe-row-label {
  flex-shrink: 0;
  width: 180px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.5;
  padding-top: 0.1rem;
  font-family: 'Anonymous Pro', monospace;
}

.fpe-row-value {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.55;
}

/* ── Prose Paragraphs ─────────────────────────────────────────────── */

.fpe-prose {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 0.5rem 0 0.75rem;
}

.fpe-prose:first-child {
  margin-top: 0;
}

/* ── Flag Auto-Links ─────────────────────────────────────────────────
 * When another flag's name appears in body text, it links to that
 * flag's entry page. Styled subtly so they don't overwhelm the text. */

.fpe-flag-autolink {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
}

.fpe-flag-autolink:hover {
  text-decoration-style: solid;
  opacity: 0.8;
}

/* ── Inline Citation Superscripts ────────────────────────────────────
 * Wikipedia-style numbered footnote markers that appear in running
 * prose. Each links to the corresponding entry in the bibliography.  */

.fpe-cite-sup {
  font-size: 0.65em;
  line-height: 0;
  position: relative;
  top: -0.45em;
  margin-left: 1px;
  margin-right: 1px;
  scroll-margin-top: 4rem;
}

.fpe-cite-link {
  font-family: 'Anonymous Pro', monospace;
  font-weight: bold;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.15s ease;
  padding: 0 1px;
}

.fpe-cite-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Footnote number + backlink in bibliography */

.fpe-fn-num {
  font-family: 'Anonymous Pro', monospace;
  font-weight: bold;
  font-size: 0.78rem;
  opacity: 0.5;
  margin-right: 0.35rem;
}

.fpe-fn-backlink {
  font-size: 0.7rem;
  text-decoration: none;
  opacity: 0.35;
  margin-right: 0.2rem;
  transition: opacity 0.15s ease;
}

.fpe-fn-backlink:hover {
  opacity: 0.85;
}

/* ══════════════════════════════════════════════════════════════════════
 * UNIFIED COLOR TABLE — swatch · name · hex · meaning · note
 * ══════════════════════════════════════════════════════════════════════ */

.fpe-color-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0.75rem 0;
  font-size: 0.82rem;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  overflow: hidden;
}

.fpe-color-table thead {
  border-bottom: 1.5px solid currentColor;
  background: rgba(128, 128, 128, 0.03);
}

.fpe-ct-th {
  text-align: left;
  padding: 0.45rem 0.7rem;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.45;
  border-right: 1px solid currentColor;
}

.fpe-ct-th:last-child {
  border-right: none;
}

.fpe-ct-th:first-child {
  width: 36px;
  padding-right: 0;
}

.fpe-ct-th-note {
  text-align: right;
}

.fpe-ct-row {
  border-bottom: 1px solid currentColor;
}

.fpe-ct-row:last-child {
  border-bottom: none;
}

.fpe-ct-row td {
  padding: 0.5rem 0.7rem;
  vertical-align: middle;
  border-right: 1px solid currentColor;
}

.fpe-ct-row td:last-child {
  border-right: none;
}

.fpe-ct-swatch-cell {
  width: 36px;
  padding-right: 0;
}

.fpe-ct-swatch {
  display: inline-block;
  width: 26px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 3px;
  vertical-align: middle;
}

.fpe-ct-swatch-unknown {
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 3px,
    rgba(128,128,128,0.1) 3px, rgba(128,128,128,0.1) 6px
  );
}

.fpe-ct-name {
  font-weight: 600;
  white-space: nowrap;
}

.fpe-ct-hex {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  opacity: 0.6;
  white-space: nowrap;
}

.fpe-ct-meaning {
  opacity: 0.85;
}

.fpe-ct-note {
  font-size: 0.75rem;
  opacity: 0.45;
  text-align: right;
  max-width: 180px;
}

.fpe-palette-caveat {
  font-size: 0.75rem;
  opacity: 0.5;
  font-style: italic;
  margin: 0.4rem 0 0.75rem;
}

/* ── Lists ─────────────────────────────────────────────────────────── */

.fpe-list {
  margin: 0.25rem 0 0.75rem;
  padding-left: 1.25rem;
}

.fpe-list li {
  margin-bottom: 0.35rem;
  line-height: 1.6;
  font-size: 0.85rem;
}

/* ── Revisions ─────────────────────────────────────────────────────── */

.fpe-revision {
  padding: 0.4rem 0;
  border-bottom: 1px solid currentColor;
}

.fpe-revision:last-of-type {
  border-bottom: none;
}

.fpe-revision-date {
  font-weight: bold;
  margin-right: 0.75rem;
  font-size: 0.82rem;
}

.fpe-revision-desc {
  font-size: 0.82rem;
  opacity: 0.85;
}

/* ── Image Credit Block (below figure) ─────────────────────────────── */

.fpe-img-credit {
  margin-top: 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px solid currentColor;
  font-family: 'Anonymous Pro', monospace;
}

.fpe-img-credit-caption {
  font-size: 0.8rem;
  line-height: 1.6;
  margin-bottom: 0.3rem;
}

.fpe-img-credit-meta {
  font-size: 0.72rem;
  opacity: 0.65;
  line-height: 1.5;
}

.fpe-img-credit-by {
  /* credit line */
}

.fpe-img-credit-link {
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.4);
  transition: text-decoration-color 0.15s ease;
}

.fpe-img-credit-link:hover {
  text-decoration-color: currentColor;
}

.fpe-img-credit-status {
  display: inline-block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  padding: 0.05rem 0.4rem;
  margin-top: 0.35rem;
  opacity: 0.7;
}

.fpe-img-credit-notes {
  font-size: 0.72rem;
  line-height: 1.55;
  opacity: 0.5;
  font-style: italic;
  margin-top: 0.3rem;
}

/* ── Lineage Links (text section → entry pages) ──────────────────── */

.fpe-lineage-link {
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.3);
  transition: text-decoration-color 0.15s ease;
}

.fpe-lineage-link:hover {
  text-decoration-color: currentColor;
}

/* ── Footnote Reference Links (in claims, prose) ──────────────────── */

.fpe-fn-ref {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.4);
  text-underline-offset: 2px;
  opacity: 0.7;
  transition: opacity 0.15s ease, text-decoration-color 0.15s ease;
}

.fpe-fn-ref:hover {
  opacity: 1;
  text-decoration-color: currentColor;
}

/* ── Footnotes & Citations Footer ─────────────────────────────────── */

/* Override the global footer{display:flex} from style.css which turns
   direct children into horizontal flex items (the "skinny columns" bug).
   This wrapper forces a single-column vertical stack at readable width. */
.fpe-footer {
  display: block;
  margin-top: 0.75rem;
  padding: 0.75rem 0 0;
  border-top: 2px solid currentColor;

  max-width: 780px;
  gap: 0;
  align-items: initial;
  text-align: initial;
}

/* ── Prev / Next Manicule Navigation ─────────────────────────────── */

.fpe-entry-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 1px solid currentColor;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
}

.fpe-entry-nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
  opacity: 0.6;
  transition: opacity 0.15s ease;
  max-width: 45%;
}

.fpe-entry-nav-link:hover {
  opacity: 1;
}

.fpe-entry-nav-manicule {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.fpe-entry-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fpe-entry-nav-next {
  margin-left: auto;
  text-align: right;
}

@media (max-width: 600px) {
  .fpe-entry-nav-label {
    display: none;
  }
  .fpe-entry-nav-manicule {
    font-size: 2rem;
  }
  .fpe-entry-nav {
    padding: 1rem 0.5rem;
  }
}

/* ── Source Post Cards (embedded social posts) ───────────────────── */

.fpe-source-posts-scroller {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
}

.fpe-source-post-card {
  flex: 0 0 320px;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  background: rgba(128, 128, 128, 0.03);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  scroll-snap-align: start;
}

.fpe-source-post-platform {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fpe-source-post-subreddit {
  opacity: 0.8;
}

.fpe-source-post-author {
  font-size: 0.78rem;
  opacity: 0.7;
  margin-bottom: 0.4rem;
}

.fpe-source-post-title {
  font-weight: bold;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}

.fpe-source-post-excerpt {
  opacity: 0.7;
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
}

.fpe-source-post-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.72rem;
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.fpe-source-post-link {
  display: inline-block;
  font-size: 0.78rem;
  opacity: 0.6;
  text-decoration: underline;
}

.fpe-source-post-link:hover {
  opacity: 0.9;
}

.fpe-fn-section {
  margin-bottom: 2.5rem;
}

.fpe-fn-heading {
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  opacity: 0.8;
  border-bottom: 1px solid currentColor;
}

.fpe-fn-group-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.4;
  margin: 1.25rem 0 0.25rem;
  padding-bottom: 0;
  border-bottom: none;
}

.fpe-fn-group-label:first-of-type {
  margin-top: 0;
}

.fpe-fn-list {
  margin: 0 0 0.5rem;
  padding-left: 0;
  list-style: none;
}

.fpe-fn-item {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.84rem;
  line-height: 1.7;
  margin-bottom: 0.85rem;
  padding: 0;
  scroll-margin-top: 2rem;
}

/* Highlight footnote on jump */
.fpe-fn-item:target {
  background: rgba(128, 128, 128, 0.06);
  border-radius: 3px;
  padding: 0.4rem 0.5rem;
  margin-left: -0.5rem;
}

/* Flash highlight when scrolled to via citation link */
.fpe-fn-flash {
  background: rgba(128, 128, 128, 0.12);
  border-radius: 3px;
  padding: 0.4rem 0.5rem;
  margin-left: -0.5rem;
  animation: fpe-fn-flash-fade 1.5s ease-out;
}

@keyframes fpe-fn-flash-fade {
  0%   { background: rgba(128, 128, 128, 0.2); }
  100% { background: rgba(128, 128, 128, 0); }
}

.fpe-fn-id {
  font-family: 'Anonymous Pro', monospace;
  font-weight: bold;
  font-size: 0.7rem;
  opacity: 0.4;
  margin-right: 0.4rem;
}

.fpe-fn-title {
  font-weight: bold;
}

a.fpe-fn-title {
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.35);
  transition: text-decoration-color 0.15s ease;
}

a.fpe-fn-title:hover {
  text-decoration-color: currentColor;
}

.fpe-fn-pub {
  opacity: 0.85;
}

.fpe-fn-accessed {
  font-size: 0.72rem;
  opacity: 0.4;
}

.fpe-fn-archive {
  font-size: 0.72rem;
  opacity: 0.55;
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.3);
}

.fpe-fn-archive:hover {
  opacity: 0.85;
  text-decoration-color: currentColor;
}

.fpe-fn-no-url {
  font-size: 0.68rem;
  opacity: 0.4;
  font-style: italic;
}

.fpe-fn-note {
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.5;
  line-height: 1.55;
}

/* ── Image Sources (footer section) ───────────────────────────────── */

.fpe-img-sources-section {
  padding-top: 0;
}

.fpe-img-sources-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.fpe-img-sources-item {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.84rem;
  line-height: 1.7;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid currentColor;
}

.fpe-img-sources-item:last-child {
  border-bottom: none;
}

.fpe-img-sources-caption {
  font-weight: bold;
  font-size: 0.84rem;
}

.fpe-img-sources-credit {
  font-size: 0.75rem;
  opacity: 0.6;
}

.fpe-img-sources-link {
  font-size: 0.75rem;
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.35);
}

.fpe-img-sources-link:hover {
  text-decoration-color: currentColor;
}

.fpe-img-sources-status {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.5;
}

/* ── Claims ────────────────────────────────────────────────────────── */

.fpe-claim {
  border-left: 3px solid currentColor;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
}

.fpe-claim-disputed {
  border-left-color: #cc4444;
}

.fpe-claim-head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.25rem;
}

.fpe-claim-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
}

.fpe-claim-conf {
  font-size: 0.7rem;
  opacity: 0.4;
}

.fpe-claim-disputed-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #cc4444;
  border: 1px solid #cc4444;
  padding: 0.05rem 0.3rem;
}

.fpe-claim-text {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  line-height: 1.6;
}

.fpe-claim-sources {
  font-size: 0.72rem;
  opacity: 0.6;
}

.fpe-claim-dispute-notes {
  font-size: 0.78rem;
  opacity: 0.7;
  font-style: italic;
  margin-top: 0.25rem;
}

/* ── Bottom Metadata Zone (Rights, Tags, Last Updated) ────────────── */

.fpe-rights {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  opacity: 0.55;
  line-height: 1.6;
  padding: 1rem 0;
  border-top: 1px solid currentColor;
}

.fpe-rights-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

.fpe-rights-note {
  margin-top: 0.25rem;
  font-style: italic;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════
 * CREATOR SPOTLIGHT — Museum-quality archival creator profile
 * ══════════════════════════════════════════════════════════════════════ */

.fpe-creator-spotlight {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}

/* ── Creator Stack — single-column, full-width stacked blocks ───── */

.fpe-creator-portraits {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ── Creator Card ─────────────────────────────────────────────────── */

.fpe-creator-card {
  border: 1px solid currentColor;
  padding: 1.5rem;
}

/* ── Card Layout (portrait floated, text wraps beneath) ──────────── */

.fpe-creator-card-layout {
  overflow: hidden; /* contain floated portrait */
}

.fpe-creator-card-text {
  /* text wraps naturally around floated portrait */
}

.fpe-creator-text {
  flex: 1;
  min-width: 0;
}

/* ── Portrait ─────────────────────────────────────────────────────── */

.fpe-creator-portrait {
  width: 180px;
  height: 180px;
  float: left;
  margin: 0 1.5rem 1rem 0;
  overflow: hidden;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fpe-creator-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.fpe-creator-portrait-placeholder {
  font-size: 1.2rem;
  font-family: Arial, sans-serif;
  font-weight: bold;
  opacity: 0.3;
}

/* ── Name Block ───────────────────────────────────────────────────── */

.fpe-creator-nameblock {
  margin-bottom: 0.75rem;
}

.fpe-creator-name {
  font-family: Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 0.15rem;
}

.fpe-creator-role {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
}

/* ── Biography ────────────────────────────────────────────────────── */

.fpe-creator-bio {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.75;
  margin: 0 0 0.75rem;
  opacity: 0.85;
}

/* ── Quotes ────────────────────────────────────────────────────────── */

.fpe-creator-quote {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid currentColor;
  font-style: italic;
  opacity: 0.8;
}

/* ── Subsection Labels (Motivations / Inspirations) ───────────────── */

.fpe-creator-subsection-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.45;
  margin: 0.75rem 0 0.35rem;
}

.fpe-creator-detail-list {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
}

.fpe-creator-detail-list li {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  margin-bottom: 0.25rem;
  opacity: 0.8;
}

/* ── Interpretive Inspirations ────────────────────────────────────── */

.fpe-creator-inspirations-interpretive .fpe-creator-detail-list li {
  font-style: italic;
  opacity: 0.65;
}

/* ── "Also Created" cross-reference ──────────────────────────────── */

.fpe-creator-also {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed currentColor;
  opacity: 0.65;
}

.fpe-creator-also-label {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.fpe-creator-also-link {
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.3);
  transition: text-decoration-color 0.15s ease;
}

.fpe-creator-also-link:hover {
  text-decoration-color: currentColor;
}

/* ── Attribution Footer ───────────────────────────────────────────── */

.fpe-creator-attribution {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
}

/* ══════════════════════════════════════════════════════════════════════
 * CONFIDENCE METER — 10-box archival confidence indicator
 * ══════════════════════════════════════════════════════════════════════ */

.fpe-confidence {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.fpe-confidence-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  text-transform: capitalize;
  opacity: 0.7;
}

.fpe-confidence-meter {
  display: inline-flex;
  gap: 2px;
}

.fpe-conf-box {
  display: inline-block;
  width: 8px;
  height: 12px;
  border: 1px solid currentColor;
  background: transparent;
}

.fpe-conf-filled {
  background: currentColor;
  border-color: currentColor;
  opacity: 0.6;
}

/* Inside claim headers, keep the meter compact */
.fpe-claim-head .fpe-confidence {
  gap: 0.35rem;
}

.fpe-claim-head .fpe-confidence-label {
  font-size: 0.7rem;
  opacity: 0.5;
}

.fpe-claim-head .fpe-conf-box {
  width: 6px;
  height: 10px;
}

/* ── Tags ──────────────────────────────────────────────────────────── */

.fpe-tags {
  padding: 0.75rem 0;
  border-top: 1px solid currentColor;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.fpe-tag {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.7rem;
  border: 1px solid currentColor;
  padding: 0.15rem 0.5rem;
  opacity: 0.5;
}

/* ── Last Updated ─────────────────────────────────────────────────── */

.fpe-last-updated {
  padding: 0.5rem 0 0;
  margin-bottom: 0;
  border-top: 1px solid currentColor;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  opacity: 0.35;
  letter-spacing: 0.02em;
}

.fpe-last-updated-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  margin-right: 0.35rem;
}

/* ── Prev / Next Entry Nav ────────────────────────────────────────── */

.fpe-entry-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
}

.fpe-entry-nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
  transition: color 0.15s ease;
  max-width: 45%;
}

.fpe-entry-nav-link:hover {
  color: #FF8C00;
}

.fpe-entry-nav-prev {
  text-align: left;
}

.fpe-entry-nav-next {
  text-align: right;
  margin-left: auto;
}

.fpe-entry-nav-manicule {
  font-family: serif;
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
}

.fpe-entry-nav-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.65rem;
  opacity: 0.7;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fpe-entry-nav-link:hover .fpe-entry-nav-label {
  opacity: 1;
}

.fpe-entry-nav-spacer {
  flex: 1;
}

/* ══════════════════════════════════════════════════════════════════════
 * MINI LINEAGE TREE — Chronological top-to-bottom layout
 * Ancestors above, current entry center, siblings to sides, descendants below.
 * SVG connectors link nodes.  Floats inside the text Lineage section.
 * ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
 * MINI LINEAGE TREE — Family-tree visualization on entry pages
 * Layout: predecessors (left) → current entry (center) → descendants (right)
 * Related/sibling flags branch below.  SVG connectors link nodes.
 * ══════════════════════════════════════════════════════════════════════ */

.fpe-lt-section {
  border: 1px solid currentColor;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.04);
  padding: 0.75rem 1.25rem 1rem;
  margin: 1.25rem 0 1.5rem;
}

/* When the tree is floated inside a section, clear the float */
.fpe-section:has(.fpe-lt-wrap) {
  overflow: hidden;
}

/* ── Tree container ──────────────────────────────────────────────── */

.fpe-lt-wrap {
  position: relative;
  padding: 0.75rem;
  float: left;
  margin: 0 1.25rem 0.75rem 0;
  max-width: 55%;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.04);
}

/* Vertical (top-to-bottom) layout mode */
.fpe-lt-wrap.fpe-lt-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.fpe-lt-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.fpe-lt-tier-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.fpe-lt-sibling-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.fpe-lt-sibling-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.fpe-lt-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
}

/* ── Columns ─────────────────────────────────────────────────────── */

.fpe-lt-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.fpe-lt-col-pred,
.fpe-lt-col-desc {
  flex: 0 0 auto;
  justify-content: center;
  min-height: 80px;
}

.fpe-lt-col-center {
  flex: 0 0 auto;
}

.fpe-lt-col-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.35;
  text-align: center;
  margin-bottom: 0.15rem;
}

/* ── Node ────────────────────────────────────────────────────────── */

.fpe-lt-node {
  width: 76px;
  flex: 0 0 auto;
}

.fpe-lt-inner {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}

a.fpe-lt-inner:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

/* ── Thumbnail ───────────────────────────────────────────────────── */

.fpe-lt-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 1px solid currentColor;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

/* Current entry — highlighted border */
.fpe-lt-current .fpe-lt-thumb {
  border: 2px solid currentColor;
  box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.12);
}

a.fpe-lt-inner:hover .fpe-lt-thumb {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  border-color: currentColor;
}

.fpe-lt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

/* Color stripe fallback */
.fpe-lt-stripes {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fpe-lt-stripe {
  flex: 1;
}

.fpe-lt-placeholder {
  font-size: 1rem;
  opacity: 0.12;
}

/* ── Info (title + year) ─────────────────────────────────────────── */

.fpe-lt-info {
  margin-top: 0.3rem;
  text-align: center;
}

.fpe-lt-relation {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.4;
  margin-bottom: 0.1rem;
}

.fpe-lt-name {
  font-family: Arial, sans-serif;
  font-size: 0.55rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.fpe-lt-current .fpe-lt-name {
  font-size: 0.6rem;
}

.fpe-lt-unresolved .fpe-lt-name {
  opacity: 0.4;
  font-weight: normal;
  font-style: italic;
}

.fpe-lt-year {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.5rem;
  opacity: 0.4;
  margin-top: 0.1rem;
}

/* ── Related / sibling row (below main flow) ─────────────────────── */

.fpe-lt-side {
  margin-top: 1rem;
  text-align: center;
}

.fpe-lt-side-row {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.fpe-lt-side .fpe-lt-node {
  width: 64px;
}

.fpe-lt-side .fpe-lt-thumb {
  border-style: dotted;
  border-color: currentColor;
}

/* ── SVG connector layer ─────────────────────────────────────────── */

.fpe-lt-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}

.fpe-lt-connector {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.18;
}

.fpe-lt-connector-dashed {
  stroke-dasharray: 4 3;
  opacity: 0.12;
}

/* ══════════════════════════════════════════════════════════════════════
 * DOCUMENTARY GALLERY — Horizontal scroll + Lightbox
 * "In the World" section: real-world photographic evidence
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Gallery Section ──────────────────────────────────────────────── */

.fpe-gallery-section {
  /* Gallery spans the full width of fpe-body */
  width: 100%;
  max-width: 100%;
}

.fpe-gallery-track {
  position: relative;
  padding: 0;
}

.fpe-gallery-scroller {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0;
}

.fpe-gallery-scroller::-webkit-scrollbar {
  display: none;
}

/* ── Gallery Card ─────────────────────────────────────────────────── */

.fpe-gallery-card {
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
}

.fpe-gallery-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.fpe-gallery-frame:hover {
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
}

.fpe-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  transition: transform 0.3s ease;
}

.fpe-gallery-frame:hover img {
  transform: scale(1.03);
}

/* ── Gallery Caption ──────────────────────────────────────────────── */

.fpe-gallery-caption {
  font-family: 'Anonymous Pro', monospace;
  margin-top: 0.5rem;
}

.fpe-gallery-caption-date {
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  opacity: 0.5;
  margin-bottom: 0.15rem;
}

.fpe-gallery-caption-text {
  font-size: 0.78rem;
  line-height: 1.55;
  margin-bottom: 0.2rem;
}

.fpe-gallery-caption-meta {
  font-size: 0.68rem;
  opacity: 0.5;
  line-height: 1.4;
}

.fpe-gallery-caption-link {
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.35);
}

.fpe-gallery-caption-link:hover {
  text-decoration-color: currentColor;
}

.fpe-gallery-img-url {
  display: block;
  font-size: 0.6rem;
  font-family: 'Anonymous Pro', monospace;
  color: inherit;
  opacity: 0.35;
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.35);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.25rem;
}

.fpe-gallery-img-url:hover {
  opacity: 0.7;
}

.fpe-gallery-caption-context {
  font-size: 0.7rem;
  line-height: 1.5;
  opacity: 0.4;
  font-style: italic;
  margin-top: 0.25rem;
}

/* ── Gallery Nav Buttons ──────────────────────────────────────────── */

.fpe-gallery-nav {
  position: absolute;
  top: 0;
  height: calc(100% - 5rem);
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: inherit;
  font-size: 2.4rem;
  z-index: 3;
  opacity: 0.35;
  transition: opacity 0.2s ease, color 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}

.fpe-gallery-nav:hover {
  opacity: 1;
  color: #FF8C00;
}

.fpe-gallery-nav-prev {
  left: -3.5rem;
}

.fpe-gallery-nav-next {
  right: -3.5rem;
}

/* ══════════════════════════════════════════════════════════════════════
 * GALLERY LIGHTBOX
 * Matches the existing flags-lightbox aesthetic: dark overlay, ☜/☞ nav,
 * × close, orange hover accents.
 * ══════════════════════════════════════════════════════════════════════ */

.fpe-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.fpe-lightbox.active {
  display: flex;
}

/* ── Content ──────────────────────────────────────────────────────── */

.fpe-lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.fpe-lightbox-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fpe-lightbox-img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
  margin: 0;
}

/* ── Info Panel ───────────────────────────────────────────────────── */

.fpe-lightbox-info {
  text-align: center;
  max-width: 640px;
  padding: 0 1rem;
}

.fpe-lightbox-caption {
  color: #fff;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 0.35rem;
}

.fpe-lightbox-credit {
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  margin: 0 0 0.25rem;
}

.fpe-lightbox-context {
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.55;
  margin: 0;
}

.fpe-lightbox-img-url {
  display: block;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.65rem;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  margin-top: 0.35rem;
  word-break: break-all;
}

.fpe-lightbox-img-url:hover {
  color: rgba(255, 255, 255, 0.7);
}

.fpe-lightbox-counter {
  display: inline-block;
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Close Button ─────────────────────────────────────────────────── */

.fpe-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  background: none;
  border: none;
  color: #fff;
  z-index: 10000;
  transition: color 0.15s ease;
}

.fpe-lightbox-close:hover {
  color: #FF8C00;
}

/* ── Navigation ───────────────────────────────────────────────────── */

.fpe-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3.5rem;
  background: none;
  border: none;
  color: #fff;
  padding: 1rem;
  z-index: 10000;
  transition: color 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

.fpe-lightbox-prev {
  left: 2rem;
}

.fpe-lightbox-next {
  right: 2rem;
}

.fpe-lightbox-nav:hover {
  color: #FF8C00;
}

/* ══════════════════════════════════════════════════════════════════════
 * AUTH — Password Modal
 * All classes prefixed fpa- (flag page auth)
 * ══════════════════════════════════════════════════════════════════════ */

.fpa-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.fpa-modal {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2rem 2.25rem;
  max-width: 360px;
  width: 90%;
}

.fpa-modal-title {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.fpa-modal-action {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  opacity: 0.5;
  margin-bottom: 1rem;
}

.fpa-modal-input {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: inherit;
  outline: none;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}

.fpa-modal-input:focus {
  border-color: rgba(255, 255, 255, 0.6);
}

.fpa-modal-error {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  color: #cc4444;
  margin-bottom: 0.5rem;
}

.fpa-modal-btns {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.fpa-modal-submit {
  font-weight: bold;
}

.fpa-modal-cancel {
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════════════
 * Responsive
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .fp-page {
    padding: 0 1rem 3rem;
  }

  .fp-page-title {
    font-size: 1.3rem;
  }

  /* Interactive lineage map: adapted for mobile */
  .fp-lineage-viewport {
    min-height: 55vh;
  }

  /* Entry list responsive */
  .fp-entry-card {
    gap: 0.85rem;
    padding: 1rem 0;
  }

  .fp-entry-thumb {
    width: 80px;
    height: 54px;
  }

  .fp-entry-title {
    font-size: 0.95rem;
  }

  .fp-entry-desc {
    font-size: 0.78rem;
  }

  /* Hide admin controls on mobile — edit/delete, toolbar, and unlock */
  .fp-entry-actions-private,
  .fp-toolbar,
  .fp-unlock-btn {
    display: none !important;
  }

  .fp-entry-actions {
    gap: 0.5rem;
  }

  /* Entry page responsive */
  .fpe-page {
    padding-bottom: 1rem;
  }

  .fpe-top {
    flex-direction: column;
    gap: 1.25rem;
  }

  .fpe-figure {
    width: 100%;
  }

  .fpe-infobox {
    padding: 1rem;
  }

  .fpe-infobox-title {
    font-size: 1.2rem;
  }

  .fpe-row {
    flex-direction: column;
    gap: 0.1rem;
  }

  .fpe-row-label {
    width: auto;
  }

  .fpe-ct-th-note,
  .fpe-ct-note {
    display: none;
  }

  .fpe-color-table {
    font-size: 0.78rem;
  }

  .fpe-ct-swatch {
    width: 20px;
    height: 14px;
  }

  /* Lineage tree responsive — unfloat on small screens */
  .fpe-lt-wrap {
    float: none;
    max-width: 100%;
    margin: 0 0 0.75rem 0;
  }

  .fpe-lt-row {
    gap: 0.75rem;
  }

  .fpe-lt-node {
    width: 65px;
  }

  .fpe-lt-side .fpe-lt-node {
    width: 55px;
  }

  .fpe-lt-name {
    font-size: 0.5rem;
  }

  .fpe-lt-current .fpe-lt-name {
    font-size: 0.55rem;
  }

  .fpe-lt-sibling-row {
    flex-direction: column;
    gap: 0.75rem;
  }

  .fpe-lt-sibling-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Gallery responsive */
  .fpe-gallery-card {
    width: 220px;
  }

  .fpe-gallery-track {
    padding: 0;
  }

  .fpe-gallery-nav {
    display: none;
  }

  /* Lightbox responsive */
  .fpe-lightbox-prev {
    left: 0.5rem;
    font-size: 2rem;
  }

  .fpe-lightbox-next {
    right: 0.5rem;
    font-size: 2rem;
  }

  .fpe-lightbox-img {
    max-height: 60vh;
  }

  .fpe-lightbox-caption {
    font-size: 0.8rem;
  }

  /* Creator spotlight responsive */
  .fpe-creator-portrait {
    width: 140px;
    height: 140px;
    margin: 0 1rem 0.75rem 0;
  }

  .fpe-creator-card {
    padding: 1rem;
  }

  /* Footer responsive */
  .fpe-footer {
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .fpe-fn-section {
    margin-bottom: 1.75rem;
  }

  .fpe-fn-heading {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  .fpe-fn-item {
    font-size: 0.78rem;
    margin-bottom: 0.65rem;
  }

  /* Slightly larger tap targets for citation links on mobile */
  .fpe-cite-sup {
    margin-left: 2px;
    margin-right: 2px;
  }
  .fpe-cite-link {
    padding: 2px 3px;
  }

  .fpe-img-sources-item {
    font-size: 0.78rem;
  }

  .fpe-rights {
    font-size: 0.72rem;
  }

  .fpe-last-updated {
    font-size: 0.68rem;
  }

  .fpe-entry-nav-manicule {
    font-size: 1.4rem;
  }

  .fpe-entry-nav-label {
    font-size: 0.6rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
 * UNKNOWN-VALUE ROWS & INLINE CONTRIBUTE BUTTONS
 * ══════════════════════════════════════════════════════════════════════ */

.fpe-row-unknown .fpe-row-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fpe-unknown-text {
  opacity: 0.35;
  font-style: italic;
  font-size: 0.82rem;
}

.fpc-inline-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  opacity: 0.45;
  transition: opacity 0.15s, border-color 0.15s;
  white-space: nowrap;
  vertical-align: middle;
}

.fpc-inline-btn:hover {
  opacity: 0.85;
  border-color: currentColor;
}

/* ══════════════════════════════════════════════════════════════════════
 * GLOBAL CONTRIBUTE BUTTON — fixed corner trigger
 * ══════════════════════════════════════════════════════════════════════ */

.fpc-global-btn {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 900;
  background: rgba(30, 30, 30, 0.85);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.55rem 1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s;
}

.fpc-global-btn:hover {
  background: rgba(30, 30, 30, 0.95);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════
 * CONTRIBUTION MODAL
 * ══════════════════════════════════════════════════════════════════════ */

.fpc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fpc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.fpc-modal {
  position: relative;
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.75rem 2rem;
  color: #d0d0d0;
}

.fpc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.fpc-title {
  font-family: 'Anonymous Pro', monospace;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}

.fpc-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.4rem;
  opacity: 0.5;
  padding: 0;
  line-height: 1;
}

.fpc-close:hover {
  opacity: 1;
}

.fpc-desc {
  font-size: 0.78rem;
  opacity: 0.55;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}

.fpc-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.fpc-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fpc-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
}

.fpc-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: inherit;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 0.65rem;
  outline: none;
  transition: border-color 0.15s;
}

.fpc-input:focus {
  border-color: rgba(255, 255, 255, 0.3);
}

.fpc-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

textarea.fpc-input {
  resize: vertical;
  min-height: 80px;
}

.fpc-media-hint {
  font-size: 0.72rem;
  opacity: 0.4;
  margin: 0 0 0.4rem;
}

.fpc-file-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.fpc-file-label {
  display: inline-block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: inherit;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  padding: 0.35rem 0.75rem;
  transition: background 0.15s;
}

.fpc-file-label:hover {
  background: rgba(255, 255, 255, 0.12);
}

.fpc-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.fpc-file-name {
  font-size: 0.72rem;
  opacity: 0.4;
  font-family: 'Anonymous Pro', monospace;
}

.fpc-context-row {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid rgba(255, 255, 255, 0.12);
  padding: 0.4rem 0.65rem;
  font-size: 0.78rem;
  opacity: 0.65;
}

.fpc-context-label {
  font-family: 'Anonymous Pro', monospace;
}

.fpc-submit {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: inherit;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.55rem 1.25rem;
  transition: background 0.15s, border-color 0.15s;
  margin-top: 0.25rem;
}

.fpc-submit:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

.fpc-submit:disabled {
  opacity: 0.4;
}

.fpc-status {
  font-size: 0.78rem;
  padding: 0.5rem 0.65rem;
  line-height: 1.4;
}

.fpc-status-ok {
  background: rgba(100, 200, 100, 0.08);
  border-left: 3px solid rgba(100, 200, 100, 0.4);
  color: #b0d8b0;
}

.fpc-status-err {
  background: rgba(200, 100, 100, 0.08);
  border-left: 3px solid rgba(200, 100, 100, 0.4);
  color: #d8b0b0;
}

/* ── Modal responsive ─────────────────────────────────────────────── */

@media (max-width: 600px) {
  .fpc-modal {
    width: 95%;
    padding: 1.25rem 1.25rem;
  }

  .fpc-global-btn {
    bottom: 0.75rem;
    right: 0.75rem;
    font-size: 0.65rem;
    padding: 0.45rem 0.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BROWSE TOOLBAR — sorting / filtering / search / pagination
   ═══════════════════════════════════════════════════════════════════════ */

.fp-browse-toolbar {
  margin: 2.5rem 0 1rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.75rem;
}

/* ── Decade chips ──────────────────────────────────────────────────── */

.fp-browse-decades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.fp-decade-chip {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.fp-decade-chip:hover {
  opacity: 0.85;
  border-color: currentColor;
}

.fp-decade-chip-active {
  opacity: 1;
  border-color: currentColor;
  font-weight: bold;
}

/* ── Main row: search + sort + view ────────────────────────────────── */

.fp-browse-row-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.fp-browse-search-wrap {
  flex: 1;
  min-width: 140px;
}

.fp-browse-search {
  width: 100%;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: 1px solid currentColor;
  color: currentColor;
  outline: none;
  transition: border-color 0.15s ease;
}

.fp-browse-search:focus {
  border-color: currentColor;
}

.fp-browse-search::placeholder {
  opacity: 0.4;
}

.fp-browse-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.45;
  margin-right: 0.3rem;
}

.fp-browse-sort-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.fp-browse-select {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
  background: transparent;
  border: 1px solid currentColor;
  color: currentColor;
  outline: none;
}

.fp-browse-select:focus {
  border-color: currentColor;
}

.fp-browse-select-sm {
  width: auto;
  min-width: 3.5rem;
}

/* ── View toggle ───────────────────────────────────────────────────── */

.fp-browse-view-wrap {
  display: flex;
  gap: 0.15rem;
}

.fp-view-btn {
  font-size: 1rem;
  padding: 0.25rem 0.45rem;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  opacity: 0.35;
  transition: opacity 0.15s ease;
  line-height: 1;
}

.fp-view-btn:hover {
  opacity: 0.7;
}

.fp-view-btn-active {
  opacity: 1;
  border-color: currentColor;
}

/* ── Filters row ───────────────────────────────────────────────────── */

.fp-browse-row-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.fp-browse-filter-wrap {
  position: relative;
}

.fp-browse-filter-select {
  font-size: 0.72rem;
  padding: 0.25rem 0.4rem;
}

.fp-browse-filter-active .fp-browse-filter-select {
  border-color: currentColor;
  font-weight: bold;
}

.fp-browse-clear {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.5rem;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.fp-browse-clear:hover {
  opacity: 1;
}

/* ── Pagination ────────────────────────────────────────────────────── */

.fp-browse-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.fp-browse-pagination-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.fp-browse-result-count {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  opacity: 0.55;
  letter-spacing: 0.02em;
}

.fp-browse-perpage-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.fp-browse-page-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fp-browse-page-btn {
  font-size: 2.2rem;
  background: none;
  border: none;
  color: inherit;
  padding: 0.1rem 0.3rem;
  transition: color 0.15s ease, opacity 0.15s ease;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

.fp-browse-page-btn:hover:not(:disabled) {
  color: #FF8C00;
}

.fp-browse-page-disabled {
  opacity: 0.2;
}

.fp-browse-page-indicator {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  opacity: 0.55;
  letter-spacing: 0.04em;
}

/* ── Compact list view ─────────────────────────────────────────────── */

.fp-compact-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr 1fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid currentColor;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  text-decoration: none;
  color: inherit;
  align-items: baseline;
  transition: background 0.1s ease;
}

a.fp-compact-row:hover {
  background: rgba(128, 128, 128, 0.06);
}

.fp-compact-header {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.4;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.3rem;
  margin-bottom: 0.1rem;
}

.fp-compact-year {
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

.fp-compact-name {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-compact-identity,
.fp-compact-creator {
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-compact-lineage {
  opacity: 0.4;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mobile responsive ─────────────────────────────────────────────── */

@media (max-width: 600px) {
  .fp-browse-row-main {
    flex-direction: column;
    align-items: stretch;
  }

  .fp-browse-search-wrap {
    min-width: 100%;
  }

  .fp-browse-sort-wrap {
    width: 100%;
  }

  .fp-browse-sort-wrap .fp-browse-select {
    flex: 1;
  }

  .fp-browse-view-wrap {
    align-self: flex-end;
  }

  .fp-browse-row-filters {
    gap: 0.25rem;
  }

  .fp-browse-filter-select {
    font-size: 0.68rem;
    padding: 0.2rem 0.3rem;
  }

  .fp-browse-decades {
    gap: 0.25rem;
  }

  .fp-decade-chip {
    font-size: 0.62rem;
    padding: 0.15rem 0.4rem;
  }

  .fp-browse-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .fp-browse-page-nav {
    align-self: center;
  }

  .fp-compact-row {
    grid-template-columns: 3rem 1fr 1fr;
    font-size: 0.72rem;
  }

  .fp-compact-creator,
  .fp-compact-lineage {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   VISUAL EDITOR
   ══════════════════════════════════════════════════════════════════════ */

/* ── Edit button on entry page ─────────────────────────────────────── */

.fpe-ed-edit-wrap {
  text-align: center;
  margin: 3rem 0 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.fpe-ed-edit-btn {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  padding: 0.6rem 2rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: inherit;
  letter-spacing: 0.04em;
  transition: border-color 0.15s ease, opacity 0.15s ease;
  opacity: 0.5;
}
.fpe-ed-edit-btn:hover {
  opacity: 1;
  border-color: rgba(255,255,255,0.4);
}

/* ── Editor container ──────────────────────────────────────────────── */

.fpe-editor {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  font-family: 'Anonymous Pro', monospace;
  line-height: 1.5;
}

/* ── Editor header ─────────────────────────────────────────────────── */

.fpe-ed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.fpe-ed-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
}

.fpe-ed-header-actions {
  display: flex;
  gap: 0.5rem;
}

/* ── Sections ──────────────────────────────────────────────────────── */

.fpe-ed-section {
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255,255,255,0.06);
}

.fpe-ed-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  background: rgba(255,255,255,0.02);
  user-select: none;
}
.fpe-ed-section-header:hover {
  background: rgba(255,255,255,0.04);
}

.fpe-ed-section-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.fpe-ed-section-toggle {
  font-size: 0.7rem;
  opacity: 0.4;
}

.fpe-ed-section-body {
  padding: 0.8rem;
}

/* ── Field rows ────────────────────────────────────────────────────── */

.fpe-ed-field {
  margin-bottom: 0.75rem;
}

.fpe-ed-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
  margin-bottom: 0.25rem;
}

/* ── Inputs ────────────────────────────────────────────────────────── */

.fpe-ed-input {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  padding: 0.4rem 0.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}
.fpe-ed-input:focus {
  border-color: rgba(255,255,255,0.3);
}

.fpe-ed-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  padding: 0.4rem 0.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: inherit;
  outline: none;
  resize: vertical;
  min-height: 3rem;
  transition: border-color 0.15s ease;
}
.fpe-ed-textarea:focus {
  border-color: rgba(255,255,255,0.3);
}

.fpe-ed-select {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: inherit;
  outline: none;
}

.fpe-ed-checkbox-wrap {
  font-size: 0.82rem;
  opacity: 0.8;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.fpe-ed-btn-save, .fpe-ed-btn-cancel, .fpe-ed-btn-export {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  padding: 0.45rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: inherit;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.fpe-ed-btn-save {
  font-weight: bold;
  border-color: rgba(255,255,255,0.3);
}
.fpe-ed-btn-save:hover { border-color: rgba(255,255,255,0.5); }
.fpe-ed-btn-cancel:hover { border-color: rgba(255,255,255,0.3); }
.fpe-ed-btn-export:hover { border-color: rgba(255,255,255,0.3); }

.fpe-ed-btn-add,
.fpe-ed-btn-quick-add {
  display: inline-block;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  border: 1px dashed rgba(255,255,255,0.15);
  background: transparent;
  color: inherit;
  opacity: 0.6;
  margin-top: 0.3rem;
}
.fpe-ed-btn-add:hover,
.fpe-ed-btn-quick-add:hover { opacity: 1; }

.fpe-ed-btn-rm {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: inherit;
  opacity: 0.4;
  flex-shrink: 0;
}
.fpe-ed-btn-rm:hover { opacity: 1; }

/* ── Array rows ────────────────────────────────────────────────────── */

.fpe-ed-array-row {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.3rem;
  align-items: center;
}
.fpe-ed-array-row .fpe-ed-input {
  flex: 1;
}

/* ── Structured cards ──────────────────────────────────────────────── */

.fpe-ed-struct-card {
  border: 1px solid rgba(255,255,255,0.06);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: rgba(255,255,255,0.01);
}

.fpe-ed-struct-num {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.4;
  margin-bottom: 0.5rem;
}

.fpe-ed-struct-rm {
  margin-top: 0.5rem;
  font-size: 0.7rem;
}

/* ── Color swatch ──────────────────────────────────────────────────── */

.fpe-ed-color-swatch {
  width: 100%;
  height: 24px;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(255,255,255,0.1);
}

/* ── Image field ───────────────────────────────────────────────────── */

.fpe-ed-image-preview {
  margin-bottom: 0.5rem;
  max-width: 300px;
}
.fpe-ed-image-preview img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(255,255,255,0.08);
}
.fpe-ed-image-empty {
  font-size: 0.75rem;
  opacity: 0.35;
}
.fpe-ed-image-upload-row {
  margin-top: 0.3rem;
}

/* ── Bottom actions ────────────────────────────────────────────────── */

.fpe-ed-bottom-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ── Toast notification ────────────────────────────────────────────── */

.fpe-ed-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  padding: 0.5rem 1.5rem;
  background: rgba(0,0,0,0.85);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10000;
  pointer-events: none;
}
.fpe-ed-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Citation toolbar (editor) ────────────────────────────────────── */

.fpe-ed-citable-wrap {
  width: 100%;
}

.fpe-ed-cite-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid currentColor;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
}

.fpe-ed-cite-label {
  opacity: 0.5;
  margin-right: 0.25rem;
  white-space: nowrap;
}

.fpe-ed-cite-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.fpe-ed-cite-chip {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.fpe-ed-cite-chip:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.4);
}

.fpe-ed-cite-none {
  opacity: 0.35;
  font-style: italic;
}

.fpe-ed-textarea-citable {
  border-radius: 0 0 4px 4px;
}

.fpe-ed-cite-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.3rem 0.5rem;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.68rem;
  opacity: 0.7;
}

.fpe-ed-cite-tag {
  padding: 0.05rem 0.35rem;
  border: 1px solid rgba(100, 180, 100, 0.4);
  border-radius: 2px;
  color: rgba(100, 200, 100, 0.8);
}

.fpe-ed-quick-url {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  margin-bottom: 1rem;
  background: rgba(128, 128, 128, 0.06);
  border: 1px dashed currentColor;
}

.fpe-ed-quick-url .fpe-ed-input {
  flex: 1;
}

.fpe-ed-cite-broken {
  border-color: rgba(220, 80, 80, 0.5);
  color: rgba(220, 100, 100, 0.9);
}

/* ── Mobile: hide edit button (desktop first) ──────────────────────── */

@media (max-width: 600px) {
  .fpe-ed-edit-wrap { display: none; }
}

/* ── Lineage Map Admin Layout Editor ─────────────────────────────── */

.fp-edit-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, color 0.15s ease;
}
.fp-edit-btn:hover {
  background: rgba(80, 40, 120, 0.7);
  color: #fff;
}

/* Edit mode viewport indicator */
.fp-edit-mode {
  outline: 2px dashed rgba(180, 100, 255, 0.5);
  outline-offset: -2px;
}

/* Draggable nodes in edit mode */
.fp-node-draggable {
  cursor: grab;
  outline: 1px dashed rgba(180, 100, 255, 0.35);
  outline-offset: 2px;
  transition: outline-color 0.15s ease, box-shadow 0.15s ease;
}
.fp-node-draggable:hover {
  outline-color: rgba(180, 100, 255, 0.7);
  box-shadow: 0 0 12px rgba(180, 100, 255, 0.3);
}
.fp-node-dragging {
  cursor: grabbing !important;
  outline-color: rgba(180, 100, 255, 0.9);
  box-shadow: 0 0 20px rgba(180, 100, 255, 0.5);
  z-index: 100 !important;
  opacity: 0.9;
}
.fp-dragging {
  cursor: grabbing !important;
}

/* Disable transitions during edit/drag for smooth repositioning */
.fp-edit-mode .fp-node,
.fp-edit-mode .fp-node-thumb,
.fp-edit-mode .fp-connector {
  transition: none !important;
}

.fp-edit-mode .fp-node a {
  pointer-events: none;
}

/* Marquee selection rectangle */
.fp-marquee {
  position: absolute;
  border: 1.5px dashed rgba(100, 180, 255, 0.8);
  background: rgba(100, 180, 255, 0.1);
  pointer-events: none;
  z-index: 15;
  display: none;
}

/* Selected node highlight */
.fp-node-selected {
  outline: 2px solid rgba(100, 180, 255, 0.85) !important;
  outline-offset: 3px;
  box-shadow: 0 0 16px rgba(100, 180, 255, 0.35);
}

/* Edit toolbar */
.fp-edit-toolbar {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(180, 100, 255, 0.35);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fp-edit-toolbar .fp-btn {
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.15s ease, color 0.15s ease;
}
.fp-edit-save {
  background: rgba(80, 180, 80, 0.6);
  color: #fff;
}
.fp-edit-save:hover {
  background: rgba(80, 180, 80, 0.85);
}
.fp-edit-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.fp-edit-cancel:hover {
  background: rgba(255, 255, 255, 0.2);
}
.fp-edit-revert {
  background: rgba(200, 80, 80, 0.5);
  color: rgba(255, 255, 255, 0.85);
}
.fp-edit-revert:hover {
  background: rgba(200, 80, 80, 0.75);
}

/* Edit toast */
.fp-edit-toast {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 0.5rem 1.2rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(180, 100, 255, 0.3);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 25;
  pointer-events: none;
  white-space: nowrap;
}
.fp-edit-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Hide edit button on mobile */
@media (max-width: 768px) {
  .fp-edit-btn { display: none !important; }
  .fp-edit-toolbar { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
 * ADMIN AUDIT QUEUE — visible only to authenticated users
 * ══════════════════════════════════════════════════════════════════════ */

.fpaq-wrap {
  max-width: 840px;
  margin: 2.5rem auto 0;
  padding: 0 1rem;
}

.fpaq-title {
  font-family: Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.25rem;
  opacity: 0.85;
}

.fpaq-subtitle {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  opacity: 0.4;
  margin: 0 0 1.5rem;
}

.fpaq-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.fpaq-stat {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  opacity: 0.65;
}

.fpaq-card {
  border: 1px solid currentColor;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.fpaq-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: rgba(128, 128, 128, 0.04);
  border-bottom: 1px solid currentColor;
}

.fpaq-card-title {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.84rem;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.3);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s;
}

.fpaq-card-title:hover {
  text-decoration-color: currentColor;
}

.fpaq-badge {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

.fpaq-badge-critical {
  background: rgba(200, 50, 50, 0.12);
  color: #c83232;
  border: 1px solid rgba(200, 50, 50, 0.2);
}

.fpaq-badge-warn {
  background: rgba(180, 120, 20, 0.1);
  color: #b47814;
  border: 1px solid rgba(180, 120, 20, 0.2);
}

.fpaq-badge-info {
  background: rgba(50, 100, 180, 0.1);
  color: #3264b4;
  border: 1px solid rgba(50, 100, 180, 0.2);
}

.fpaq-badge-minor {
  background: rgba(128, 128, 128, 0.08);
  opacity: 0.5;
  border: 1px solid currentColor;
}

.fpaq-card-body {
  padding: 0.5rem 0.8rem 0.65rem;
}

.fpaq-issue-label {
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.45;
  margin-top: 0.4rem;
}

.fpaq-issue-list {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.7;
  margin-bottom: 0.25rem;
}

.fpaq-source-summary {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.7rem;
  opacity: 0.35;
  margin-top: 0.5rem;
}

/* ── Toast Notifications ──────────────────────────────────────────── */

.fp-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 90vw;
  text-align: center;
  pointer-events: auto;
}

.fp-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.fp-toast-info {
  background: #1a1a2e;
  color: #ccc;
  border: 1px solid #333;
}

.fp-toast-success {
  background: #1a2e1a;
  color: #8c8;
  border: 1px solid #3a5a3a;
}

.fp-toast-warning {
  background: #2e2a1a;
  color: #cc8;
  border: 1px solid #5a5030;
}

.fp-toast-error {
  background: #2e1a1a;
  color: #c88;
  border: 1px solid #5a3030;
}

/* ── Unlock-Editor Button ─────────────────────────────────────────── */

.fp-unlock-btn {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 900;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.3);
  font-size: 1rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
  font-family: 'Anonymous Pro', monospace;
}

.fp-unlock-btn:hover {
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.35);
}

.fp-unlock-btn.fp-hidden {
  display: none;
}

/* Lock button in toolbar */
.fp-btn-lock {
  margin-left: auto;
  opacity: 0.6;
  font-size: 0.8rem;
}

.fp-btn-lock:hover {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════
   Creator Photos Gallery
   ══════════════════════════════════════════════════════════════════ */

.fp-cpg-loading {
  text-align: center;
  opacity: 0.5;
  padding: 3rem 0;
}

.fp-cpg-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.fp-cpg-summary {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  opacity: 0.6;
  flex: 1;
}

.fp-cpg-edit-toggle {
  font-size: 0.8rem;
}

.fp-cpg-add-btn {
  font-size: 0.8rem;
}

/* Grid */
.fp-cpg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
}

/* Card */
.fp-cpg-card {
  position: relative;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

/* Photo container */
.fp-cpg-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.fp-cpg-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fp-cpg-photo-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.fp-cpg-photo-link:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Caption */
.fp-cpg-caption {
  padding: 0.65rem 0.75rem 0.75rem;
}

.fp-cpg-creator-name {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 0.15rem;
}

.fp-cpg-flag-name {
  display: block;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.7;
  text-decoration: none;
}

.fp-cpg-flag-name:hover {
  opacity: 1;
  text-decoration: underline;
}

.fp-cpg-role {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.45;
  margin-top: 0.2rem;
}

.fp-cpg-credit {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.65rem;
  opacity: 0.4;
  margin-top: 0.35rem;
  font-style: italic;
}

/* Edit controls */
.fp-cpg-controls {
  display: flex;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem 0.65rem;
  border-top: 1px solid currentColor;
}

.fp-cpg-ctrl-btn {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  flex: 1;
}

.fp-cpg-ctrl-remove {
  opacity: 0.6;
}

.fp-cpg-ctrl-remove:hover {
  opacity: 1;
}

/* Responsive */
@media (max-width: 600px) {
  .fp-cpg-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
  }
}

/* ── Category Pages ──────────────────────────────────────────────── */

/* Breadcrumbs */
.fp-breadcrumbs {
  margin-bottom: 1rem;
}

.fp-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  gap: 0;
}

.fp-breadcrumbs-item {
  display: flex;
  align-items: center;
}

.fp-breadcrumbs-item:not(:last-child)::after {
  content: '\203A';
  margin: 0 0.5em;
  opacity: 0.5;
}

.fp-breadcrumbs-item a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
}

.fp-breadcrumbs-item a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fp-breadcrumbs-item[aria-current="page"] span {
  opacity: 0.7;
}

.fp-cat-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.fp-cat-top-intro {
  min-width: 0;
}

.fp-cat-top-timeline {
  min-width: 0;
}

@media (max-width: 768px) {
  .fp-cat-top {
    grid-template-columns: 1fr;
  }
}

/* Category intro */
.fp-cat-intro {
  max-width: 65ch;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.fp-cat-count {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 1rem;
}

.fp-cat-empty {
  opacity: 0.6;
  font-style: italic;
  margin: 2rem 0;
}

.fp-cat-loading {
  opacity: 0.6;
}

/* Category index page (no ?cat param) */

.fp-cat-index-intro {
  max-width: 65ch;
  line-height: 1.6;
  margin-bottom: 1rem;
  opacity: 0.8;
}

.fp-cat-index-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

/* Category index search */
.fp-cat-index-search {
  margin-bottom: 1rem;
}

.fp-cat-index-search-input {
  width: 100%;
  max-width: 360px;
  padding: 0.5rem 0.75rem;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  color: inherit;
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid currentColor;
  border-radius: 3px;
  outline: none;
  transition: border-color 0.15s;
}

.fp-cat-index-search-input:focus {
  border-color: currentColor;
}

.fp-cat-index-search-input::placeholder {
  opacity: 0.4;
}

.fp-cat-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.fp-cat-index-card {
  display: flex;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0.75rem;
  transition: border-color 0.15s, background 0.15s;
  opacity: 0.9;
}

.fp-cat-index-card:hover {
  opacity: 1;
  border-color: currentColor;
  background: rgba(128, 128, 128, 0.04);
}

.fp-cat-index-card-img {
  width: 72px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid currentColor;
  align-self: flex-start;
}

.fp-cat-index-card-placeholder {
  width: 72px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(128, 128, 128, 0.08);
  font-size: 1.4rem;
  opacity: 0.25;
}

.fp-cat-index-card-body {
  flex: 1;
  min-width: 0;
}

.fp-cat-index-card-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.fp-cat-index-card-count {
  font-size: 0.72rem;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}

.fp-cat-index-card-desc {
  font-size: 0.75rem;
  line-height: 1.45;
  opacity: 0.6;
}

.fp-cat-index-back {
  margin-top: 1.5rem;
}

.fp-cat-index-back a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Legacy fallback */
.fp-cat-index-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fp-cat-index-list a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 600px) {
  .fp-cat-index-grid {
    grid-template-columns: 1fr;
  }
  .fp-cat-index-card-img {
    width: 56px;
    height: 37px;
  }
}

/* Category navigation on database.html */
.fp-cat-nav {
  margin: 1.5rem 0;
}

.fp-cat-nav-heading {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fp-cat-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.fp-cat-nav-list li a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  border: 1px solid currentColor;
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.15s;
}

.fp-cat-nav-icon {
  width: 1.2em;
  height: 0.8em;
  object-fit: cover;
  flex-shrink: 0;
  border: 0.5px solid currentColor;
}

.fp-cat-nav-list li a:hover {
  opacity: 1;
}

/* Mobile dropdown for Browse by Category — hidden on desktop */
.fp-cat-nav-select {
  display: none;
  width: 100%;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  padding: 0.5rem 0.6rem;
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid currentColor;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 10px 6px;
  padding-right: 1.8rem;
}

/* Timeline */
.fp-cat-timeline {
  margin: 2rem 0;
}

.fp-cat-timeline-heading {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fp-cat-timeline-track {
  position: relative;
  min-height: 80px;
  margin: 0 30px;
  border-bottom: 2px solid currentColor;
  opacity: 0.8;
}

/* Upward track for split timeline (border on top instead of bottom) */
.fp-cat-timeline-track--up {
  border-bottom: none;
  border-top: 2px solid currentColor;
}

/* Stack container positions multiple nodes at the same year */
.fp-cat-timeline-stack {
  position: absolute;
  bottom: 6px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
}

/* Upward track: stacks grow upward from the axis line */
.fp-cat-timeline-track--up .fp-cat-timeline-stack {
  bottom: auto;
  top: -6px;
  flex-direction: column;
}

.fp-cat-timeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}

.fp-cat-timeline-node:hover {
  opacity: 0.7;
}

.fp-cat-timeline-thumb {
  width: 36px;
  height: 24px;
  object-fit: cover;
  border: 1px solid currentColor;
  margin-bottom: 4px;
}

.fp-cat-timeline-track--up .fp-cat-timeline-thumb {
  margin-bottom: 0;
  margin-top: 4px;
}

/* In upward track, label goes above the thumb */
.fp-cat-timeline-track--up .fp-cat-timeline-node {
  flex-direction: column-reverse;
}

.fp-cat-timeline-label {
  font-size: 0.65rem;
  white-space: nowrap;
}

.fp-cat-timeline-more {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.6rem;
  opacity: 0.45;
  white-space: nowrap;
}

.fp-cat-timeline-axis {
  display: flex;
  justify-content: space-between;
  margin: 0.25rem 30px 0;
  font-size: 0.7rem;
  opacity: 0.5;
}

/* Centered axis for split timeline */
.fp-cat-timeline-axis--center {
  margin: 0 30px;
  border-top: 1px solid currentColor;
  padding-top: 0.15rem;
}

/* Split timeline labels */
.fp-cat-timeline-split-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.5;
  margin: 0.25rem 30px;
}

/* Timeline tick marks for interval years */
.fp-cat-timeline-tick {
  position: absolute;
  bottom: -6px;
  width: 1px;
  height: 6px;
  background: currentColor;
  opacity: 0.25;
  transform: translateX(-50%);
  pointer-events: none;
}

.fp-cat-timeline-track--up .fp-cat-timeline-tick {
  bottom: auto;
  top: -6px;
}

/* Context event markers below the timeline track */
.fp-cat-timeline-events {
  position: relative;
  height: 7rem;
  margin: 0 30px;
}

.fp-cat-timeline-event {
  position: absolute;
  top: 0;
}

.fp-cat-timeline-event-dot {
  display: block;
  width: 1px;
  height: 14px;
  background: currentColor;
  opacity: 0.7;
}

.fp-cat-timeline-event-text {
  display: block;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0.85;
  white-space: nowrap;
  transform-origin: top left;
  transform: rotate(55deg);
  position: absolute;
  top: 16px;
  left: 0;
}

.fp-cat-timeline-event:hover .fp-cat-timeline-event-text,
.fp-cat-timeline-event:hover .fp-cat-timeline-event-dot {
  opacity: 1;
}

/* Unknown year flags - top right corner */
.fp-cat-timeline-unknown {
  position: absolute;
  top: -1.5rem;
  right: 0;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.25rem 0.5rem;
  border: 1px dashed currentColor;
  border-radius: 4px;
  opacity: 0.7;
}

.fp-cat-timeline-unknown .fp-cat-timeline-label {
  font-style: italic;
}


/* Entry grid */
.fp-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 0.75rem 0 1.5rem;
}

.fp-cat-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid currentColor;
  opacity: 0.85;
  transition: opacity 0.15s;
  overflow: hidden;
}

.fp-cat-card:hover {
  opacity: 1;
}

.fp-cat-card-img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}

.fp-cat-card-placeholder {
  width: 100%;
  aspect-ratio: 3/2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(128, 128, 128, 0.12);
  color: inherit;
  font-size: 1.8rem;
  opacity: 0.25;
}

.fp-cat-card-info {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.fp-cat-card-name {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}

.fp-cat-card-meta {
  font-size: 0.7rem;
  opacity: 0.65;
  line-height: 1.3;
}

.fp-cat-card-desc {
  font-size: 0.68rem;
  line-height: 1.4;
  opacity: 0.55;
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fp-cat-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 0.25rem;
}

.fp-cat-card-chip {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.08rem 0.3rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.5;
}

.fp-cat-card-year,
.fp-cat-card-creator {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Sort controls for category pages */
.fp-cat-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.fp-cat-sort {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid currentColor;
  border-radius: 3px;
  color: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 10px 6px;
  padding-right: 1.6rem;
}

.fp-cat-controls-count {
  font-size: 0.75rem;
  opacity: 0.5;
}

/* Cross-links */
.fp-cat-crosslinks {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid currentColor;
  opacity: 0.8;
}

.fp-cat-crosslinks-heading {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fp-cat-crosslinks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.fp-cat-crosslinks-list a {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  border: 1px solid currentColor;
  text-decoration: none;
  color: inherit;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.fp-cat-crosslinks-list a:hover {
  opacity: 1;
}

/* Entry page category tags */
.fpe-categories {
  margin: 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.fpe-cat-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
  border: 1px solid currentColor;
  text-decoration: none;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.fpe-cat-tag:hover {
  opacity: 1;
}

/* Responsive */
@media (max-width: 600px) {
  .fp-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .fp-cat-timeline-track {
    margin: 0 15px;
    height: 60px;
  }
  .fp-cat-timeline-axis {
    margin: 0.25rem 15px 0;
  }
  .fp-cat-timeline-thumb {
    width: 28px;
    height: 18px;
  }
}

/* ── Prerender shell ─────────────────────────────────────────────────
   Minimal styling for the crawlable body shell emitted by
   scripts/build-prerender.js. The runtime wipes the entry/category
   container before painting, so JS users never see this — these rules
   only affect search-engine crawlers, social previewers, and no-JS
   visitors. Kept intentionally simple and unopinionated. */
.fp-prerender-shell {
  max-width: 720px;
  margin: 1.25rem auto;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
}
.fp-prerender-shell .fp-prerender-tagline {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  opacity: 0.75;
}
.fp-prerender-shell .fp-prerender-title {
  font-size: 1.6rem;
  margin: 0 0 0.35rem;
  line-height: 1.2;
}
.fp-prerender-shell .fp-prerender-meta {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  opacity: 0.85;
}
.fp-prerender-shell .fp-prerender-desc {
  margin: 0 0 0.85rem;
}
.fp-prerender-shell .fp-prerender-creator {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  opacity: 0.85;
}
.fp-prerender-shell .fp-prerender-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.5rem 0 0.85rem;
}
.fp-prerender-shell .fp-prerender-subhead {
  font-size: 1.05rem;
  margin: 1rem 0 0.4rem;
}
.fp-prerender-shell .fp-prerender-entries {
  margin: 0 0 0.85rem;
  padding-left: 1.25rem;
}
.fp-prerender-shell .fp-prerender-entries li {
  margin: 0.15rem 0;
}
.fp-prerender-shell .fp-prerender-noscript {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* ── Support prompt (donation card on individual entry pages) ─────────
   Palette borrowed from the site's Color Scheme 7 ("Brat Green"):
   bg #8ACE00 / text #000 / hover-link #FFFFFF / active-link #3D5A00.
   This stays inside the existing palette but reads as intentionally
   distinct from whichever of the 9 random schemes the page is using.
   When the page itself is already color-scheme-7, the rules near the
   bottom invert the card to black-on-brat so contrast is preserved. */
.pfd-support-prompt {
  position: fixed;
  z-index: 9000;
  right: 1rem;
  bottom: 1rem;
  max-width: 26rem;
  width: calc(100vw - 2rem);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.pfd-support-prompt--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pfd-support-prompt__card {
  position: relative;
  pointer-events: auto;
  background: #8ACE00 !important;
  color: #000000 !important;
  border: 1.5px solid #000000;
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem 0.55rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28),
              0 2px 4px rgba(0, 0, 0, 0.16);
  font-size: 0.74rem;
  line-height: 1.38;
}
.pfd-support-prompt__close {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  background: transparent;
  color: #000000;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pfd-support-prompt__close:hover,
.pfd-support-prompt__close:focus-visible {
  background: rgba(0, 0, 0, 0.08);
  border-color: #000000;
  outline: none;
}
.pfd-support-prompt__title {
  margin: 0 1.6rem 0.3rem 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #000000 !important;
}
.pfd-support-prompt__body p {
  margin: 0 0 0.35rem;
  color: #000000 !important;
}
.pfd-support-prompt__body p:last-child {
  margin-bottom: 0.5rem;
}
.pfd-support-prompt__actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: nowrap;
  margin-top: 0.25rem;
}
.pfd-support-prompt__btn {
  flex: 1 1 auto;
  text-align: center;
  text-decoration: none !important;
  padding: 0.32rem 0.6rem;
  border-radius: 0.3rem;
  font-weight: 700;
  font-size: 0.76rem;
  border: 1.5px solid #000000;
  transition: background 0.15s, color 0.15s;
}
.pfd-support-prompt__btn--primary {
  background: #000000 !important;
  color: #8ACE00 !important;
}
.pfd-support-prompt__btn--primary:hover,
.pfd-support-prompt__btn--primary:focus-visible {
  background: #3D5A00 !important;
  color: #FFFFFF !important;
  outline: none;
}
.pfd-support-prompt__btn--secondary {
  background: #000000 !important;
  color: #8ACE00 !important;
}
.pfd-support-prompt__btn--secondary:hover,
.pfd-support-prompt__btn--secondary:focus-visible {
  background: #3D5A00 !important;
  color: #FFFFFF !important;
  outline: none;
}
.pfd-support-prompt__more {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.32rem 0.6rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  background: #000000 !important;
  color: #8ACE00 !important;
  border: 1.5px solid #000000;
  border-radius: 0.3rem;
  box-sizing: border-box;
}
.pfd-support-prompt__more:hover,
.pfd-support-prompt__more:focus-visible {
  background: #3D5A00 !important;
  color: #FFFFFF !important;
  outline: none;
}
.pfd-support-prompt__dismiss {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.25rem 0.4rem;
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, 0.7);
  font-size: 0.68rem;
  cursor: pointer;
  text-align: center;
}
.pfd-support-prompt__dismiss:hover,
.pfd-support-prompt__dismiss:focus-visible {
  color: #000000;
  outline: none;
  text-decoration: underline;
}

/* Inverted palette when the page itself is using Color Scheme 7.
   Same brat-green hue stays in play, just flipped so the card reads
   as black-on-brat rather than blending into the page background. */
html.color-scheme-7 .pfd-support-prompt__card {
  background: #000000 !important;
  color: #8ACE00 !important;
  border-color: #8ACE00;
}
html.color-scheme-7 .pfd-support-prompt__close { color: #8ACE00 !important; }
html.color-scheme-7 .pfd-support-prompt__close:hover,
html.color-scheme-7 .pfd-support-prompt__close:focus-visible {
  background: rgba(138, 206, 0, 0.16);
  border-color: #8ACE00;
}
html.color-scheme-7 .pfd-support-prompt__title,
html.color-scheme-7 .pfd-support-prompt__body p,
html.color-scheme-7 .pfd-support-prompt__more,
html.color-scheme-7 .pfd-support-prompt__btn--secondary { color: #8ACE00 !important; }
html.color-scheme-7 .pfd-support-prompt__more {
  text-decoration-color: #8ACE00 !important;
}
html.color-scheme-7 .pfd-support-prompt__btn { border-color: #8ACE00; }
html.color-scheme-7 .pfd-support-prompt__btn--primary {
  background: #8ACE00 !important;
  color: #000000 !important;
}
html.color-scheme-7 .pfd-support-prompt__btn--primary:hover,
html.color-scheme-7 .pfd-support-prompt__btn--primary:focus-visible {
  background: #FFFFFF !important;
  color: #000000 !important;
}
html.color-scheme-7 .pfd-support-prompt__btn--secondary:hover,
html.color-scheme-7 .pfd-support-prompt__btn--secondary:focus-visible {
  background: rgba(138, 206, 0, 0.16);
  color: #8ACE00 !important;
}
html.color-scheme-7 .pfd-support-prompt__dismiss {
  color: rgba(138, 206, 0, 0.75);
}
html.color-scheme-7 .pfd-support-prompt__dismiss:hover,
html.color-scheme-7 .pfd-support-prompt__dismiss:focus-visible { color: #8ACE00; }

/* Mobile: bottom sheet */
@media (max-width: 600px) {
  .pfd-support-prompt {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    width: 100%;
    transform: translateY(100%);
  }
  .pfd-support-prompt--visible {
    transform: translateY(0);
  }
  .pfd-support-prompt__card {
    border-radius: 0.7rem 0.7rem 0 0;
    border-bottom: none;
    padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pfd-support-prompt {
    transition: none;
    transform: none;
  }
}