.holdings--index {
  .stretcher { flex: 1; border: 0; }
  /* --icon-color, not color: .icon reads the custom property and only falls
     back to currentColor where something opts in. Setting `color` here would
     be silently ignored by every icon on the page that is not inside a .btn. */
  .icon { --icon-color: var(--color-ink-dark); }

  .select--transparent {
    appearance: none;
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  th, td {
    box-sizing: content-box;
    white-space: nowrap;
  }

  /* auto, not scroll. `scroll` renders the bar whether or not there is
     anything to scroll, and a ticker is almost never wider than 6ch - so every
     row drew a scrollbar track, complete with the arrow buttons Chrome puts on
     Linux, and gave up 11px of cell height to it. That left the ticker sitting
     5px above the name in the next column.

     scrollbar-width keeps that true for the rare ticker that does overflow: it
     stays scrollable, but the row does not lose its alignment to say so. The
     full name is in the next column regardless. */
  /* Fixed, not a maximum. With auto table layout the column is re-measured
     from its content, so filtering the list down to short tickers narrows this
     column and shifts every header to its right. A width the content cannot
     argue with holds the table still.

     Declared on the cells only, deliberately. `ch` resolves against each
     element's own font-size, and the header is 15.2px where the cells are
     19px - the same `6ch` written on .col-name meant 57px in the <th> and 72px
     in the <td>. The cells are what has to fit a ticker, so they set the
     measure and the header takes whatever the column resolves to.

     min-inline-size is the one that actually holds. In auto table layout a
     cell's inline-size is a suggestion, and .col-fullname is greedy - it takes
     `width: 100%`, so the algorithm compresses its neighbours toward their
     content width. Filtered to one short ticker this column resolved to 44.8px
     against the 71.9px asked for. A floor the algorithm has to respect is what
     pins it; the other two keep it from growing.

     overflow-x for the ticker longer than 6ch; scrollbar-width so that row
     does not give up 11px of height to a scrollbar and fall out of line with
     its neighbours. */
  .col-name {
    overflow-x: auto;
    scrollbar-width: none;
  }

  td.col-name {
    inline-size: 6ch;
    max-inline-size: 6ch;
    min-inline-size: 6ch;
  }
  .col-fullname {
    max-width: 0; /* Forces ellipsis behavior */
    width: 100%;  /* Makes column expand to fill space */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .col-last-buy { width: 10ch; }
  .col-shares { text-align: right; }
  .col-avg-price { text-align: right; }
  .col-cost-basis { text-align: right; }
  .col-day-change { text-align: right; }
  .col-total {
    text-align: right;
    max-width: 10ch;  /* supports up to 999,999MM (just under trillion) */
  }

  /* Hide columns at smaller breakpoints */
  @container (max-width: 700px) {
    .col-last-buy { display: none; }
    .col-cost-basis { display: none; }
  }

  @container (max-width: 540px) {
    .col-avg-price { display: none; }
    .col-shares { display: none; }
  }

  @container (max-width: 350px) {
    .col-fullname { display: none; }
  }

  /* Hide first tbody row if there's only one data row after it */
  .row-summary:nth-last-child(2) {
    display: none;
  }
}