/** Bushari Design System — metrics, callouts, tables, and responsive records. */

:root {
  --bds-data-benchmark: #2d2d2d;
  --bds-data-grid: #ececec;
  --bds-data-neutral: #9aa6b2;
  --bds-data-selection: #2f6bff;
  --bds-data-series-01: #2f6bff;
  --bds-data-series-02: #e97800;
  --bds-data-series-03: #008a78;
  --bds-data-series-04: #7c3aed;
  --bds-data-series-05: #c24178;
  --bds-data-series-06: #2d91d1;
  --bds-data-series-07: #9aa6b2;
  --bds-data-status-negative: #c63c3c;
  --bds-data-status-positive: #0b7a53;
  --bds-data-status-warning: #a95e00;
}

.bds-data {
  color: var(--bds-color-text-primary);
  font-family: var(--bds-font-sans);
  min-width: 0;
}

.bds-metrics {
  border-block: 1px solid var(--bds-color-border-strong);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bds-metrics--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bds-metric {
  min-width: 0;
  padding: clamp(20px, 3vw, 28px);
}

.bds-metric + .bds-metric { border-left: 1px solid var(--bds-color-border-default); }
.bds-metric__label {
  color: var(--bds-color-text-secondary);
  display: block;
  font-size: 12px;
  font-weight: var(--bds-font-weight-semibold);
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}

.bds-metric__value {
  color: var(--bds-color-text-primary);
  display: block;
  font-size: clamp(28px, 5vw, 40px);
  font-variant-numeric: tabular-nums;
  font-weight: var(--bds-font-weight-semibold);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 10px;
}

.bds-metric__change {
  display: block;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--bds-font-weight-medium);
  margin-top: 9px;
}

.bds-data .is-positive { color: var(--bds-data-status-positive); }
.bds-data .is-negative { color: var(--bds-data-status-negative); }
.bds-data .is-neutral { color: var(--bds-color-text-secondary); }

.bds-callout {
  background: var(--bds-color-bg-secondary);
  border: 1px solid var(--bds-color-border-default);
  margin: var(--bds-space-6) 0;
  padding: var(--bds-space-5);
}

.bds-callout--navy {
  background: var(--bds-color-bg-inverse);
  border-color: var(--bds-color-bg-inverse);
  color: var(--bds-color-text-inverse);
}

.bds-callout :where(h2, h3, h4) { color: inherit; margin-top: 0; }
.bds-table-wrap {
  border: 1px solid var(--bds-color-border-default);
  margin-block: var(--bds-space-5);
  max-width: 100%;
  overflow-x: auto;
}

.bds-table {
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  min-width: 42rem;
  width: 100%;
}

.bds-table caption {
  background: var(--bds-color-bg-inverse);
  color: var(--bds-color-text-inverse);
  font-size: 15px;
  font-weight: var(--bds-font-weight-semibold);
  padding: 13px 15px;
  text-align: left;
}

.bds-table :where(th, td) {
  border-bottom: 1px solid var(--bds-color-border-default);
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
}

.bds-table thead {
  background: var(--bds-color-bg-secondary);
  color: var(--bds-color-text-primary);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bds-table tbody tr:last-child :where(th, td) { border-bottom: 0; }
.bds-table tbody tr:hover { background: #f7f9ff; }
.bds-table tbody th { color: var(--bds-color-text-primary); font-weight: var(--bds-font-weight-semibold); }
.bds-table-note {
  color: var(--bds-color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
  margin: calc(var(--bds-space-5) * -0.6) 0 var(--bds-space-5);
}
.bds-records { display: grid; gap: var(--bds-space-3); }
.bds-record { background: var(--bds-color-bg-primary); border: 1px solid var(--bds-color-border-default); padding: var(--bds-space-4); }
.bds-record__title { color: var(--bds-color-text-primary); font-size: 17px; font-weight: var(--bds-font-weight-semibold); }
.bds-record dl { display: grid; gap: 7px 16px; grid-template-columns: minmax(7rem, 0.45fr) 1fr; margin: 14px 0 0; }
.bds-record dt { color: var(--bds-color-text-secondary); font-size: 12px; font-weight: var(--bds-font-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.bds-record dd { font-variant-numeric: tabular-nums; margin: 0; }
.bds-open-house-day { border-top: 1px solid var(--bds-color-border-default); margin-top: var(--bds-space-7); padding-top: var(--bds-space-5); }
.bds-open-house-day > h2 { margin-top: 0; }
.bds-open-house-table .bds-table__number { text-align: right; white-space: nowrap; }
.bds-faq-list { display: grid; gap: var(--bds-space-5); margin-block: var(--bds-space-6); }
.bds-faq { border-top: 1px solid var(--bds-color-border-default); padding-top: var(--bds-space-4); }
.bds-faq > h3 { margin: 0 0 var(--bds-space-2); }
.bds-faq > :last-child { margin-bottom: 0; }

@media (max-width: 680px) {
  .bds-metrics,
  .bds-metrics--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bds-metric + .bds-metric { border-left: 0; }
  .bds-metric:nth-child(even) { border-left: 1px solid var(--bds-color-border-default); }
  .bds-metric:nth-child(n + 3) { border-top: 1px solid var(--bds-color-border-default); }
  .bds-table-wrap--records { border: 0; overflow: visible; }
  .bds-table-wrap--records .bds-table { min-width: 0; }
  .bds-table-wrap--records .bds-table :where(thead, caption) { display: none; }
  .bds-table-wrap--records .bds-table :where(tbody, tr, th, td) { display: block; width: 100%; }
  .bds-table-wrap--records .bds-table tr { background: var(--bds-color-bg-primary); border: 1px solid var(--bds-color-border-default); margin-bottom: 12px; padding: 12px 14px; }
  .bds-table-wrap--records .bds-table :where(th, td) { border: 0; display: grid; gap: 12px; grid-template-columns: minmax(7.5rem, 0.45fr) 1fr; padding: 5px 0; }
  .bds-table-wrap--records .bds-table :where(th, td)::before { color: var(--bds-color-text-secondary); content: attr(data-label); font-size: 11px; font-weight: var(--bds-font-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
  .bds-open-house-table .bds-table__number { text-align: left; }
}

@media (max-width: 420px) {
  .bds-metrics,
  .bds-metrics--four { grid-template-columns: 1fr; }
  .bds-metric:nth-child(even) { border-left: 0; }
  .bds-metric:nth-child(n + 2) { border-top: 1px solid var(--bds-color-border-default); }
  .bds-record dl { grid-template-columns: 1fr; }
}