/* ============================================================
   company.css — selectors specific to public/app/company.php.
   Mirrors design-system/ui_kits/web/company.html style block.
   Shared selectors (sec-head, source-attrib, perf-pending, eh__*)
   live in expert-detail.css.
   ============================================================ */

/* Back link — caps mono, sits below the header ink rule */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--ink-500);
  text-decoration: none;
  padding: 16px 0 0;
  transition: color var(--dur-fast) var(--ease);
}
.back-link:hover { color: var(--accent); }

/* --- Inverted holders table — fund-name as link ---
   Same row grammar as HoldingsTable: rank · name · weight · shares · delta.
   Drops the ticker column because rows are funds. */
.holders-row {
  display: grid;
  grid-template-columns: 32px 1fr 100px 110px 120px;
  column-gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--cream-300);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease);
}
/* Shares column hidden while portfolios_expertholding.units is
   mis-populated upstream (same defect as the fund-detail HoldingsTable). */
.holders-row--no-shares {
  grid-template-columns: 32px 1fr 100px 120px;
}
.holders-row--no-shares .h-shares { display: none; }
.holders-row:hover { background: var(--cream-50); }
.holders-row:hover .h-name { color: var(--accent); }
.holders-row .h-rank {
  font: 400 12px var(--mono);
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.holders-row .h-name {
  font: 500 16px/1.2 var(--serif);
  color: var(--ink-900);
  letter-spacing: -0.005em;
  transition: color var(--dur-fast) var(--ease);
}
.holders-row .h-name .principal {
  display: block;
  font: 400 11.5px/1.3 var(--sans);
  color: var(--ink-500);
  margin-top: 3px;
  letter-spacing: 0;
}
.holders-row .h-weight {
  font: 500 15px var(--mono);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.holders-row .h-shares {
  font: 400 12px var(--mono);
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.holders-row .h-delta {
  font: 500 11px var(--mono);
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
}

/* --- Active cluster banner --- */
.cluster-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  align-items: center;
  background: var(--cream-50);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--cream-300);
  padding: 18px 22px;
  margin-bottom: 4px;
}
.cluster-banner .eb {
  font: 600 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--accent);
  margin-bottom: 6px;
}
.cluster-banner .lead {
  font: 500 18px/1.3 var(--serif);
  letter-spacing: -0.012em;
  color: var(--ink-900);
  margin: 0;
  max-width: 60ch;
}
.cluster-banner .lead i { font-style: italic; font-weight: 500; color: var(--accent); }
.cluster-banner .count {
  font: 500 26px/1 var(--serif);
  letter-spacing: -0.018em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cluster-banner .count small {
  display: block;
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--ink-500);
  margin-top: 4px;
}

/* --- Insider activity row — extends TransactionList with a NAME col --- */
.ia-row {
  display: grid;
  grid-template-columns: 100px 1fr 90px 80px 100px 90px 60px;
  column-gap: 16px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--cream-300);
  transition: background var(--dur-fast) var(--ease);
}
.ia-row:hover { background: var(--cream-50); }
.ia-row .ia-date {
  font: 400 12px var(--mono);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.ia-row .ia-name {
  font: 500 14px/1.2 var(--serif);
  color: var(--ink-900);
  letter-spacing: -0.005em;
  text-decoration: none;
  border-bottom: 1px solid var(--cream-400);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ia-row .ia-name:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ia-row .ia-name .ia-role {
  display: block;
  font: 400 11.5px/1.3 var(--sans);
  color: var(--ink-500);
  margin-top: 2px;
  border-bottom: 0;
  letter-spacing: 0;
}
.ia-row .ia-verb {
  font: 500 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
}
.ia-row .ia-verb.buy   { color: var(--cat-fund); }
.ia-row .ia-verb.sell  { color: var(--cat-activist); }
.ia-row .ia-verb.other { color: var(--ink-700); }
.ia-row .ia-shares,
.ia-row .ia-price {
  font: 400 13px var(--mono);
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ia-row .ia-code { text-align: right; }
.ia-row .ia-code span {
  font: 500 11px var(--mono);
  color: var(--ink-800);
  background: var(--cream-300);
  padding: 2px 7px;
  letter-spacing: 0;
}

/* --- Empty state --- */
.empty-state {
  border-top: 1px solid var(--cream-300);
  border-bottom: 1px solid var(--cream-300);
  padding: 32px 0;
  text-align: center;
}
.empty-state .eb {
  font: 600 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--ink-500);
  margin-bottom: 10px;
}
.empty-state .msg {
  font: 400 italic 16px/1.4 var(--serif);
  color: var(--ink-700);
  margin: 0 auto;
  max-width: 50ch;
}

@media (max-width: 980px) {
  .holders-row { grid-template-columns: 28px 1fr 80px 90px; }
  .holders-row .h-delta { display: none; }
  .ia-row { grid-template-columns: 90px 1fr 80px 70px 50px; }
  .ia-row .ia-shares,
  .ia-row .ia-price { display: none; }
}

/* MVP1 Phase 6: AAPL Recent-trades row overflowed by 8px at 375 because
   the 1fr name column couldn't shrink below content min-width — long
   insider names pushed past viewport. Tighter compression + minmax(0,1fr)
   lets the name truncate with ellipsis, and we drop ia-value at this size
   since only the verb + code (P/S) carry signal on small screens. */
@media (max-width: 720px) {
  .ia-row {
    grid-template-columns: 70px minmax(0, 1fr) 60px 40px;
    column-gap: 10px;
  }
  .ia-row .ia-shares,
  .ia-row .ia-price,
  .ia-row .ia-value { display: none; }
  .ia-row .ia-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}