/* Live holdings table — LifeSci index pages. Added Sep 8 2026.
   Uses the existing tokens in styles.css (--navy, --teal, --border, --text-light, --radius-sm).
   ⭐ MOBILE: the Company column is HIDDEN and re-appears beneath the ticker inside the same cell,
   so the table never scrolls sideways. Paul flagged mobile as the tricky part and it is — a
   4-column table with long biotech names is exactly what overflows a phone. */

.lh-summary {
  font-size: 0.9rem; color: var(--text-light);
  margin: -6px 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
}
.lh-summary strong { color: var(--text); font-weight: 700; }
.lh-asof { font-size: 0.6em; font-weight: 400; color: var(--text-light); }

.lh-csv {
  margin-left: auto; font-size: 0.82rem; font-weight: 600; color: var(--teal);
  text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 12px; background: var(--white); transition: var(--transition); white-space: nowrap;
}
.lh-csv:hover { border-color: var(--teal); background: rgba(14,165,196,0.06); }

/* Fixed height ≈ 15 rows, then scroll. Sticky header stays put while scrolling.
   ⭐ WIDTH CAPPED (Paul, Sep 8): full-bleed left too much dead space between Company and Weight.
   Sized to the content — longest company name across both indexes is 49 chars
   ("Kiniksa Pharmaceuticals International PLC Class A"), tickers max 4. The site's existing
   .holdings-table caps at 380px, so a narrow table is the house convention anyway. */
.lh-wrap {
  max-height: 560px; overflow-y: auto; overflow-x: hidden;
  max-width: 640px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white);
}
.lh-summary { max-width: 640px; }        /* keeps the CSV button flush with the table's right edge */
.lh-table colgroup .c-rank { width: 46px; }
.lh-table colgroup .c-tkr  { width: 74px; }
.lh-table colgroup .c-w    { width: 86px; }
.lh-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.85rem; }
.lh-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--navy); color: var(--white);
  text-align: left; font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 12px; cursor: pointer; user-select: none; white-space: nowrap;
}
.lh-table thead th:hover { background: var(--navy-light); }
.lh-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.lh-table tbody tr:last-child td { border-bottom: none; }
.lh-table tbody tr:nth-child(even) td { background: rgba(13,30,60,0.018); }
.lh-table tbody tr:hover td { background: rgba(14,165,196,0.07); }

/* ⛔ COLOURS SCOPED TO td ONLY. Using `.lh-table .lh-co` also hit the <th>, where it beat
   `thead th{color:#fff}` on specificity and rendered the Company header navy-on-navy — invisible.
   Caught by looking at the screenshot; every DOM assertion passed. */
.lh-table .lh-rank { width: 44px; text-align: right; }
.lh-table td.lh-rank { color: var(--text-light); font-variant-numeric: tabular-nums; }
.lh-table td.lh-tkr  { font-weight: 700; }
.lh-table .lh-t      { color: var(--teal); font-family: 'Inter', ui-monospace, monospace; white-space: nowrap; }
.lh-table td.lh-co   { color: var(--text); }
.lh-table .lh-w      { text-align: right; white-space: nowrap; }
.lh-table td.lh-w    { font-variant-numeric: tabular-nums; font-weight: 600; }

.lh-co-m { display: none; }   /* company-under-ticker: mobile only */
.lh-note { font-size: 0.78rem; color: var(--text-light); margin-top: 10px; }

@media (max-width: 640px) {
  .lh-wrap { max-height: 460px; max-width: none; }
  .lh-summary { max-width: none; }
  .lh-table { font-size: 0.82rem; }
  .lh-table thead th { padding: 9px 8px; font-size: 0.66rem; }
  .lh-table td { padding: 8px 8px; }
  .lh-table .lh-rank { width: 30px; padding-right: 4px; }
  .lh-table .lh-co { display: none; }          /* hide the wide column ... */
  .lh-co-m {                                    /* ... and show it under the ticker instead */
    display: block; font-weight: 400; font-size: 0.75rem;
    color: var(--text-light);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;  /* NOT the ticker's monospace */
    white-space: normal; word-break: break-word;              /* MUST wrap or it forces the cell wide */
    margin-top: 2px; line-height: 1.25;
  }
  /* fixed layout so the weight column cannot be squeezed off the clipped edge */
  .lh-table { table-layout: fixed; width: 100%; }
  .lh-table td.lh-tkr { white-space: normal; }
  .lh-table .lh-w { width: 62px; }
  .lh-summary { font-size: 0.84rem; }
  .lh-csv { margin-left: 0; }
}