/* Client and lobbying-firm pages (/lobbying/clients/, /lobbying/firms/,
   /lobbying/client/<id>/, /lobbying/firm/<id>/).

   Loaded alongside lobbying.css so the entity pages inherit the section's
   card, chip and bill-grid styling and only add what is new here. Every
   colour is a theme token, and none of them encodes anything decorative:
   the year bars are neutral ink because their LENGTH carries the value,
   and the two pills that do carry meaning (amended, former member) are
   the only coloured marks on the page. */

/* ---- index: toolbar + ranked table ---- */

.ent-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.ent-toolbar .list-chips { margin-bottom: 0; }
.ent-toolbar-count { margin: 0; }

.ent-table {
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}
.ent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem 5.5rem 4.5rem;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--ink-100);
}
.ent-row:first-child { border-top: 0; }
.ent-row-head {
  background: var(--ink-50);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-700);
}
.ent-num { text-align: right; font-variant-numeric: tabular-nums; }
.ent-amt { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.ent-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .ent-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ent-row-head { display: none; }
  .ent-row .ent-num:last-child { display: none; }
  .ent-row > *:nth-child(3) { grid-column: 1 / -1; text-align: left; }
}

/* ---- detail: stat tiles ---- */

.ent-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.ent-stat {
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  background: var(--ink-50);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ent-stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ent-stat-label { font-size: var(--fs-sm); color: var(--ink-600); }

/* At phone width two tiles share a row, and an eight-figure dollar
   amount does not fit half of one: it broke mid-number ("$85,950,00 / 0").
   The money tile takes the full row there and the three counts share
   the row below it. */
@media (max-width: 480px) {
  .ent-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ent-stats > .ent-stat:first-child { grid-column: 1 / -1; }
  .ent-stats > .ent-stat { padding: var(--sp-3); }
}
.ent-desc { color: var(--ink-700); max-width: 62ch; }

/* ---- detail: rosters and chip lists ---- */

.ent-roster { list-style: none; margin: 0; padding: 0; }
.ent-roster li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--ink-100);
}
.ent-roster li:last-child { border-bottom: 0; }
.ent-roster-sub { grid-column: 1 / -1; }

.ent-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
}
.ent-chips li { display: inline-flex; gap: 6px; align-items: baseline; }

/* ---- detail: spend by year ---- */

.ent-years { list-style: none; margin: 0; padding: 0; }
.ent-years li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  column-gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) 0;
}
.ent-year-label { font-variant-numeric: tabular-nums; color: var(--ink-700); }
.ent-year-track {
  display: block;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--ink-100);
  overflow: hidden;
}
.ent-year-fill {
  display: block;
  height: 100%;
  background: var(--ink-400);
  border-radius: var(--r-full);
}
.ent-year-amt { text-align: right; }
.ent-year-n { grid-column: 2 / -1; }

/* ---- the two pills that carry meaning ---- */

.ent-pill-amended {
  background: var(--civic-amber-soft);
  color: var(--ink-900);
}
.ent-pill-former {
  background: var(--civic-blue-soft);
  color: var(--ink-900);
}