/* ==========================================================================
   /leads, the demo-lead reader. Everything else is site.css + marketing.css.
   ========================================================================== */

/* `hidden` must beat every display rule in this sheet: the buttons are
   inline-flex, and an inline-flex element ignores the attribute. */
[hidden] { display: none !important; }


.leads-page { padding-bottom: 60px; }

.leads { padding: clamp(24px, 4vw, 44px) 0 0; }

.leads__head {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.leads__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.leads__stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.lead-stat {
  border: 1px solid var(--line-soft);
  background: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-family: var(--mono);
}

.lead-stat b { color: var(--ink); font-weight: 700; }

.leads__table td { vertical-align: top; }
.leads__table .nowrap { white-space: nowrap; }
.leads__table td a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-firm); }
.leads__table td a:hover { border-bottom-color: var(--gold); }

.lead-sub {
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-top: 3px;
  max-width: 46ch;
  word-break: break-word;
}

.lead-forget { text-align: right; white-space: nowrap; }
.lead-forget .gate-link { font-size: 0.76rem; color: #8c2b22; }

.leads .gate-fine { max-width: 70ch; }
.leads .gate-fine a { color: var(--gold-ink); }

#key-error { color: #8c2b22; }

@media (max-width: 720px) {
  .leads__head { align-items: flex-start; }
  .leads__table thead { display: none; }
  .leads__table tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .leads__table td { border: 0 !important; padding: 0 !important; }
  .lead-forget { text-align: left; }
}

.leads__remember {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin: 4px 0 16px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

.leads__remember input { width: 14px; height: 14px; accent-color: var(--ink); }