/* records.css — "The Record" public complaint archive (dense ledger) */

.rec-main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; }

/* Hero + summary strip */
.rec-hero { margin: 1.5rem 0 2rem; }
.rec-hero .rec-kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.rec-hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0.5rem 0 0.6rem;
}
.rec-hero p { max-width: 60ch; color: var(--text-secondary); }

.rec-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--brutal-border);
  box-shadow: var(--brutal-shadow);
  background: var(--card-surface);
  margin-top: 1.5rem;
}
.rec-summary > div { padding: 1rem 1.1rem; border-right: 2px solid var(--text-primary); }
.rec-summary > div:last-child { border-right: none; }
.rec-summary .rec-n {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rec-summary .rec-l {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* Filter bar */
.rec-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin: 2rem 0 1rem;
}
.rec-filters .rec-brands { display: flex; gap: 0; border: 2px solid var(--text-primary); }
.rec-brand-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  background: var(--card-surface);
  border-right: 2px solid var(--text-primary);
  color: var(--text-primary);
}
.rec-brand-btn:last-child { border-right: none; }
.rec-brand-btn.active { background: var(--text-primary); color: var(--card-surface); }

.rec-filters select {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.45rem 0.6rem;
  border: 2px solid var(--text-primary);
  background: var(--card-surface);
  color: var(--text-primary);
}
.rec-filters .rec-spacer { flex: 1 1 auto; }

/* Ledger table */
.rec-ledger-wrap {
  border: var(--brutal-border);
  box-shadow: var(--brutal-shadow);
  background: var(--card-surface);
  overflow-x: auto;
}
table.rec-ledger { width: 100%; border-collapse: collapse; min-width: 640px; }
table.rec-ledger th {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-muted);
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--text-primary);
  white-space: nowrap;
}
table.rec-ledger td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e2e2d8;
  vertical-align: top;
  font-size: 0.82rem;
}
table.rec-ledger tr { cursor: pointer; }
table.rec-ledger tbody tr:hover td { background: #faf9f2; }
table.rec-ledger .rec-td-incident { max-width: 380px; }
.rec-inc-title { font-weight: 600; line-height: 1.35; }
.rec-inc-excerpt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec-city, .rec-cat { font-family: var(--font-mono); font-size: 0.74rem; white-space: nowrap; }
.rec-up { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }

/* Brand pill */
.rec-brand-pill {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border: 1.5px solid var(--text-primary);
  white-space: nowrap;
}
.rec-brand-pill.ola    { background: #D6DF22; color: #000; }
.rec-brand-pill.uber   { background: #276EF1; color: #fff; }
.rec-brand-pill.rapido { background: #FFD100; color: #000; }

.rec-empty, .rec-loading {
  padding: 2.5rem 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Pagination */
.rec-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.rec-page-info { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.rec-page-btns { display: flex; gap: 0.5rem; }
.rec-page-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5rem 1rem;
  border: 2px solid var(--text-primary);
  background: var(--card-surface);
  color: var(--text-primary);
  box-shadow: 3px 3px 0 var(--text-primary);
}
.rec-page-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text-primary); }
.rec-page-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

@media (max-width: 640px) {
  .rec-summary { grid-template-columns: repeat(2, 1fr); }
  .rec-summary > div:nth-child(2) { border-right: none; }
  .rec-summary > div:nth-child(1), .rec-summary > div:nth-child(2) { border-bottom: 2px solid var(--text-primary); }
}