/* Bright Info — Data monetization companies page
   Source: "Data Monetization Companies" design, 1440px canvas, with the
   shared chrome (header, hero, CTA band, footer) taken from the live home.
   Loads after styles.css and v2.css and uses their tokens and classes. */

/* Current page in the main nav */
.main-nav > a[aria-current="page"] { color: #FFFFFF; font-weight: 600; }

/* ---------- Hero ---------- */

/* The page title is long; use the smaller display scale from .start__title */
.hero__title--long {
  font-size: clamp(34px, 2rem + 1.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* ---------- Table section ---------- */

.companies {
  padding-top: clamp(40px, 5vw, 56px);
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Filters */

.filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-3);
}
.filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.filters__search {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filters__search label { font-weight: 600; font-size: 14px; }
.filters__search input {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--input-line);
  border-radius: var(--radius-sm);
  min-height: 46px;
  background: var(--surface);
  width: 100%;
}
.filters__search input::placeholder { color: #8A96A8; }
.filters__search input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.35);
}
.filters__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.toggle,
.chip {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--input-line);
  background: var(--surface);
  color: var(--ink);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.toggle {
  padding: 10px 14px;
  min-height: 46px;
  border-radius: var(--radius-sm);
}
.chip {
  padding: 8px 14px;
  min-height: 44px;
  border-radius: 999px;
}
.toggle:hover,
.chip:hover { border-color: var(--navy); }
.toggle[aria-pressed="true"],
.chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip__count {
  font-family: var(--font-mono);
  font-weight: 500;
  opacity: 0.75;
}

/* Count line */

.companies-count { font-size: 14px; color: var(--muted); }
.companies-count strong { color: var(--ink); }

/* Table */

.companies-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  font-size: 15px;
}
.companies-table thead tr {
  background: var(--navy);
  color: #FFFFFF;
  text-align: left;
}
.companies-table thead th {
  padding: 14px 16px;
  font-weight: 600;
}
.companies-table tbody tr {
  border-top: 1px solid var(--line);
  background: var(--surface);
  vertical-align: top;
}
.companies-table tbody tr[hidden] { display: none; }
.companies-table tbody th,
.companies-table tbody td {
  padding: 16px;
  line-height: 1.45;
}
.companies-table tbody th {
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}
.companies-table__name { display: block; }
.companies-table__status {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.companies-table__text { color: var(--ink-2); }
.row--us { background: #FFF8E6 !important; }

.type-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ink);
  white-space: nowrap;
  background: var(--surface-4);
}
.type-pill--broker { background: #FFE2A8; }
.type-pill--data-vendor { background: #DCE8FF; }
.type-pill--wind-down { background: #E9DDFB; }
.type-pill--marketplace { background: #D7F3EA; }
.type-pill--ai-lab { background: #F1E4D4; }
.type-pill--big-tech { background: #E6EAF0; }

.price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
}

.flag {
  display: inline-flex;
  gap: 6px;
  align-items: flex-start;
  color: #7A3A00;
  font-size: 14px;
}
.flag__icon { flex: 0 0 auto; margin-top: 2px; }
.no-flag { color: #6B7687; font-size: 14px; }

.companies-empty {
  padding: 32px;
  text-align: center;
  border: 1px dashed var(--input-line);
  border-radius: var(--radius-lg);
  color: var(--muted);
}
.companies-empty[hidden] { display: none; }

.companies-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 980px;
}

@media (max-width: 480px) {
  .filters { padding: 16px; }
  .companies { padding-bottom: 56px; }
}