/* Genealogy grid (55 identities or 98 stable behaviors) — shared layout */

.grid-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
  color: #d8d8d8;
}

.grid-help {
  background: #14140e;
  border-left: 3px solid #f5d76e;
  padding: 0.9rem 1.2rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #cfcfcf;
  margin: 0.5rem 0 1.5rem;
}

/* Reuse filter-bar styles from category.css. We re-define a few here in
   case category.css isn't loaded. */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.85rem 1.4rem; align-items: flex-end;
  background: #0e0e0e; border: 1px solid #2a2a2a; border-radius: 8px;
  padding: 1rem 1.2rem; margin: 0 0 2rem;
}
.filter-group { display:flex; flex-direction:column; gap:0.3rem; min-width:150px; }
.filter-group label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.07em; color:#888; }
.filter-group input[type=text],
.filter-group select {
  background:#181818; border:1px solid #333; color:#d8d8d8;
  padding:0.4rem 0.6rem; border-radius:3px;
  font-family: ui-monospace, monospace; font-size:0.85rem;
}
.filter-group input[type=text]:focus, .filter-group select:focus {
  outline: 1px solid #f5d76e; border-color: #f5d76e;
}
.filter-clear {
  background: transparent; border:1px solid #444; color:#aaa;
  padding:0.5rem 0.9rem; border-radius:3px; cursor:pointer; font-size:0.78rem;
}
.filter-clear:hover { color:#fff; border-color:#888; }

/* Genealogy grid — 7 columns (one per foundational), each holds its
   identity/stable cards stacked. Column width responsive. */
.genealogy-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.65rem;
}
@media (max-width: 1100px) {
  .genealogy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .genealogy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gen-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #0a0a0a;
  border: 1px solid #1c1c1c;
  border-radius: 6px;
  padding: 0.75rem 0.55rem 1rem;
}
.gen-col-header {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.45rem 0.3rem;
  border-radius: 3px;
  background: #131313;
  margin-bottom: 0.35rem;
}
.gen-col-count {
  font-family: ui-monospace, monospace;
  font-size: 0.66rem;
  color: #555;
  text-align: center;
  margin-bottom: 0.4rem;
}
.gen-col-empty .gen-col-header { opacity: 0.45; }
.gen-col-empty {
  background: #060606;
  border-style: dashed;
  border-color: #1a1a1a;
}
.gen-col-empty .empty-note {
  font-size: 0.7rem;
  color: #444;
  text-align: center;
  font-style: italic;
  padding: 0.5rem 0.3rem;
}

/* Per-column accent bar uses the foundational color */
.gen-col[data-leader="CON"] .gen-col-header { background: #2a0a0a; color: #ef4444; border-bottom: 1px solid #ef444444; }
.gen-col[data-leader="DIS"] .gen-col-header { background: #062028; color: #22d3ee; border-bottom: 1px solid #22d3ee44; }
.gen-col[data-leader="RAD"] .gen-col-header { background: #2a1f00; color: #fbbf24; border-bottom: 1px solid #fbbf2444; }
.gen-col[data-leader="POL"] .gen-col-header { background: #2a2300; color: #f5d76e; border-bottom: 1px solid #f5d76e44; }
.gen-col[data-leader="TRI"] .gen-col-header { background: #0a280f; color: #6f9;    border-bottom: 1px solid #6f944; }
.gen-col[data-leader="CUB"] .gen-col-header { background: #0a0e2a; color: #6b8bff; border-bottom: 1px solid #6b8bff44; }
.gen-col[data-leader="FRU"] .gen-col-header { background: #220a2a; color: #b5f;    border-bottom: 1px solid #b5f44; }

.beh-card {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 0.55rem 0.6rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  transition: border-color 0.15s, transform 0.1s;
}
.beh-card:hover {
  border-color: #f5d76e;
  transform: translateY(-1px);
}
.beh-card-sig {
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  line-height: 1.25;
  word-break: break-word;
}
.beh-card-meta {
  display: flex;
  gap: 0.55rem;
  font-family: ui-monospace, monospace;
  font-size: 0.66rem;
  color: #888;
  flex-wrap: wrap;
}
.beh-card-mini {
  display: flex;
  height: 4px;
  border-radius: 1px;
  overflow: hidden;
  background: #1a1a1a;
}
.beh-card-mini > i { display:block; height:100%; }

.beh-card-purity {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 8px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.beh-card-purity.tier-P1 { background:#1f4823; color:#6f9; }
.beh-card-purity.tier-P2 { background:#3a2f0a; color:#fbbf24; }
.beh-card-purity.tier-P3 { background:#3a2f00; color:#f5d76e; }
.beh-card-purity.tier-P4 { background:#3a1f00; color:#f97316; }
.beh-card-purity.tier-P5 { background:#3a0a0a; color:#ef4444; }

.beh-card-3d  { color: #6b8bff; }
.beh-card-4d  { color: #b5f; }

/* Hidden state for filtered-out cards */
.beh-card.hidden { display: none; }
.gen-col.hidden  { display: none; }