/* Lattice Grid — shared "eye candy" component for all Hive lattices.
   Visual parity with /rogue-wave-lattice/v2/ MAPET 16-axis grid.
   Brand gold #EBA628, obsidian #0A0D12, JetBrains Mono for hex bytes. */

.lattice-grid-wrap {
  --lg-bg: #0A0D12;
  --lg-card: rgba(255,255,255,0.025);
  --lg-card-border: rgba(235,166,40,0.10);
  --lg-card-hover: rgba(235,166,40,0.22);
  --lg-gold: #EBA628;
  --lg-soft-gold: #C08D23;
  --lg-text: #d8dde6;
  --lg-dim: #8a93a3;
  --lg-slate-dim: #5d6573;
  --lg-rule: rgba(255,255,255,0.07);
  --lg-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --lg-sans: 'Inter', -apple-system, system-ui, sans-serif;
  font-family: var(--lg-sans);
  color: var(--lg-text);
  margin: 32px 0;
}

.lattice-grid-eyebrow {
  font-family: var(--lg-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lg-gold);
  margin: 0 0 18px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lattice-grid-eyebrow::before {
  content: "○";
  color: var(--lg-gold);
  font-size: 11px;
}

.lattice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  .lattice-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .lattice-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .lattice-grid { grid-template-columns: 1fr; }
}

.lattice-card {
  background: var(--lg-card);
  border: 1px solid var(--lg-card-border);
  border-radius: 14px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.18s ease, transform 0.18s ease;
  min-height: 158px;
}
.lattice-card:hover {
  border-color: var(--lg-card-hover);
}

.lc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  color: #f0f3f8;
  letter-spacing: 0.005em;
}
.lc-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.lc-badge {
  font-family: var(--lg-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}
.lc-badge.qm,         .lc-badge.bio   { background: rgba(167,108,235,0.10); color: #b890e8; border: 1px solid rgba(167,108,235,0.20); }
.lc-badge.em                          { background: rgba(40,108,235,0.10);  color: #6695e8; border: 1px solid rgba(40,108,235,0.22); }
.lc-badge.thermo                      { background: rgba(235,108,40,0.10);  color: #e89868; border: 1px solid rgba(235,108,40,0.22); }
.lc-badge.mech                        { background: rgba(40,200,108,0.08);  color: #78cc94; border: 1px solid rgba(40,200,108,0.20); }
.lc-badge.nuclear                     { background: rgba(235,40,108,0.10);  color: #e87090; border: 1px solid rgba(235,40,108,0.22); }
.lc-badge.relativistic                { background: rgba(40,200,235,0.08);  color: #6cc9e0; border: 1px solid rgba(40,200,235,0.20); }
.lc-badge.optics                      { background: rgba(167,108,235,0.10); color: #b890e8; border: 1px solid rgba(167,108,235,0.20); }
.lc-badge.super                       { background: rgba(40,235,235,0.08);  color: #6ce0e0; border: 1px solid rgba(40,235,235,0.20); }
.lc-badge.subatomic                   { background: rgba(235,108,40,0.10);  color: #e89868; border: 1px solid rgba(235,108,40,0.22); }
.lc-badge.cosmic                      { background: rgba(108,108,235,0.10); color: #9090e8; border: 1px solid rgba(108,108,235,0.22); }
.lc-badge.biohybrid                   { background: rgba(40,200,108,0.08);  color: #78cc94; border: 1px solid rgba(40,200,108,0.20); }
.lc-badge.geo                         { background: rgba(180,140,80,0.10);  color: #d0a070; border: 1px solid rgba(180,140,80,0.22); }
.lc-badge.network                     { background: rgba(80,180,235,0.10);  color: #80c0e8; border: 1px solid rgba(80,180,235,0.22); }
.lc-badge.swarm                       { background: rgba(235,166,40,0.10);  color: var(--lg-soft-gold); border: 1px solid rgba(235,166,40,0.22); }

.lc-axisnum {
  font-family: var(--lg-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lg-slate-dim);
  margin: -2px 0 0 0;
}

.lc-bytes {
  font-family: var(--lg-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--lg-text);
  letter-spacing: 0.02em;
  word-break: break-all;
  margin: 4px 0 0;
}
.lc-bytes .accent { color: var(--lg-gold); font-weight: 500; }

.lc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--lg-rule);
  padding-top: 10px;
  margin-top: auto;
  font-family: var(--lg-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.lc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.lc-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lg-slate-dim);
  display: inline-block;
}
.lc-status.live { color: #6cdc8c; }
.lc-status.live::before { background: #6cdc8c; box-shadow: 0 0 6px rgba(108,220,140,0.7); }
.lc-status.simulated { color: var(--lg-dim); }
.lc-rate { color: var(--lg-dim); }
.lc-quality { color: var(--lg-soft-gold); }

/* Card hover micro-shimmer on the bytes line (eye candy) */
@keyframes lg-shimmer { 0%,100% { opacity: 0.92; } 50% { opacity: 1; } }
.lattice-card:hover .lc-bytes { animation: lg-shimmer 1.6s ease-in-out infinite; }