/* ==========================================================================
   Paleobeard field database — public browse UI styles.
   Loaded AFTER assets/css/paleobeard.css and reuses its tokens
   (--ink, --ink-2, --bone, --bone-dim, --ash, --gold, --rule ...).
   Scoped under .fdb- so it can never collide with catalogue styles.
   No CDN, no framework. This file is copied verbatim into the bundle as
   /assets/field-database.css by build/field_export.py.
   ========================================================================== */

.fdb-lede { max-width: 62ch; }

/* mode nav (Recent / Rare / Taxa / Layers / Statistics / Associations) */
.fdb-modes {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.6rem 0 0;
}
.fdb-modes a {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bone-dim); border: 1px solid var(--rule);
  padding: 0.5em 1em; border-radius: 999px; text-decoration: none;
}
.fdb-modes a:hover { color: var(--gold); border-color: var(--gold); }

/* summary strip: raw record count vs observed-specimen sum, honestly split */
.fdb-stats-strip {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 1.8rem 0 0;
}
.fdb-stat {
  border: 1px solid var(--rule); border-radius: 0.6rem; padding: 0.9rem 1rem;
  background: var(--ink-2);
}
.fdb-stat b { display: block; font-size: var(--step-2); color: var(--bone); }
.fdb-stat span { font-size: 0.72rem; color: var(--ash-dim); letter-spacing: 0.04em; }

/* filter bar */
.fdb-filters {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end;
  border: 1px solid var(--rule); border-radius: 0.6rem;
  padding: 1rem; margin-top: 2rem; background: var(--ink-2);
}
.fdb-filter { display: flex; flex-direction: column; gap: 0.3rem; }
.fdb-filter label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ash-dim);
}
.fdb-filter select {
  background: var(--ink); color: var(--bone); border: 1px solid var(--rule);
  border-radius: 0.4rem; padding: 0.45em 0.6em; font-size: 0.85rem;
  max-width: 13rem;
}
.fdb-filters .btn { margin-left: auto; }
.fdb-active-filters { margin-top: 0.7rem; font-size: 0.78rem; color: var(--ash); }

/* results grid */
.fdb-results { margin-top: 1.6rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.fdb-card {
  border: 1px solid var(--rule); border-radius: 0.6rem; overflow: hidden;
  background: var(--ink-2); display: flex; flex-direction: column;
}
.fdb-card a { color: inherit; text-decoration: none; }
.fdb-card figure { margin: 0; background: var(--ink-3); }
.fdb-card img { display: block; width: 100%; height: auto; }
.fdb-card-body { padding: 0.8rem 0.9rem 1rem; display: flex;
  flex-direction: column; gap: 0.3rem; }
.fdb-card-id { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  color: var(--gold); letter-spacing: 0.05em; }
.fdb-card-name { font-size: 1rem; color: var(--bone); margin: 0; }
.fdb-card-meta { font-size: 0.75rem; color: var(--ash-dim); margin: 0; }

/* pagination */
.fdb-pager { display: flex; gap: 0.5rem; align-items: center;
  margin-top: 1.6rem; flex-wrap: wrap; }
.fdb-pager button { min-width: 2.4em; }
.fdb-status { font-size: 0.78rem; color: var(--ash); margin: 0.8rem 0 0; }

/* section blocks on the database page */
.fdb-section { margin-top: 3rem; }
.fdb-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fdb-table th, .fdb-table td { text-align: left; padding: 0.5em 0.7em;
  border-bottom: 1px solid var(--rule); vertical-align: top; }
.fdb-table th { color: var(--ash-dim); font-weight: 500;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.fdb-table td { color: var(--bone-dim); }
.fdb-count { font-family: 'JetBrains Mono', monospace; color: var(--gold);
  font-size: 0.8rem; white-space: nowrap; }

/* download row */
.fdb-downloads { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

/* permanent record page */
.fdb-record-head { display: flex; flex-wrap: wrap; gap: 0.6rem;
  align-items: baseline; }
.fdb-record-id { font-family: 'JetBrains Mono', monospace; color: var(--gold);
  letter-spacing: 0.06em; }
.fdb-photos { display: grid; gap: 1rem; margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.fdb-photos figure { margin: 0; border: 1px solid var(--rule);
  border-radius: 0.6rem; overflow: hidden; background: var(--ink-2); }
.fdb-photos img { display: block; width: 100%; height: auto; }
.fdb-photos figcaption { font-size: 0.72rem; color: var(--ash-dim);
  padding: 0.5em 0.7em; letter-spacing: 0.05em; text-transform: uppercase; }
.fdb-facts { display: grid; gap: 0; margin-top: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.fdb-fact { border-bottom: 1px solid var(--rule); padding: 0.6em 0.2em; }
.fdb-fact dt { font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ash-dim); }
.fdb-fact dd { margin: 0.25em 0 0; color: var(--bone); font-size: 0.95rem; }
.fdb-prov { display: inline-block; font-size: 0.62rem; letter-spacing: 0.09em;
  text-transform: uppercase; border: 1px solid var(--rule); color: var(--ash);
  border-radius: 999px; padding: 0.25em 0.7em; margin-right: 0.4em; }
.fdb-prov--observed { color: var(--bone); border-color: var(--bone-dim); }
.fdb-prov--derived { color: var(--gold); border-color: var(--gold-dim); }
.fdb-prov--identified { color: var(--gold); border-color: var(--gold-dim); }
.fdb-prov--interpreted { color: var(--ash); border-style: dashed; }
.fdb-note { border-left: 3px solid var(--gold); padding: 0.4em 0 0.4em 1em;
  color: var(--bone-dim); }
.fdb-caveat { font-size: 0.75rem; color: var(--ash-dim); }

/* empty state */
.fdb-empty { border: 1px dashed var(--rule); border-radius: 0.8rem;
  padding: 2.2rem 1.6rem; margin-top: 2rem; background: var(--ink-2); }
.fdb-empty h2 { margin-top: 0; }
.fdb-empty p { color: var(--ash); max-width: 60ch; }

@media (max-width: 40rem) {
  .fdb-filters { align-items: stretch; }
  .fdb-filters .btn { margin-left: 0; }
  .fdb-filter select { max-width: 100%; }
}