/* People and Forecast — only what app.css does not already provide. Tokens only; no colours of
   its own. The Forecast screen has no sheet of its own and shares this one (fc- classes). */

/* filters sit above everything they scope */
.pp-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.pp-filters .field { flex: 1 1 220px; max-width: 320px; min-width: 0; }

/* a company named inline: its dot, then its short name */
.pp-tag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pp-tag .nav-dot { margin: 0; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 2px 12px; }

/* the board */
.pp-rank { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pp-nowrap { white-space: nowrap; }
.pp-sold { display: grid; gap: 3px; justify-items: end; }
/* Share of the total above: a small meter, so the track is the lighter step of its fill. */
.pp-share { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.pp-share-track { width: 56px; height: 6px; border-radius: 3px; background: var(--accent-track); overflow: hidden; }
.pp-share-fill { height: 100%; min-width: 2px; border-radius: 3px; background: var(--accent); }
.pp-spark { display: block; line-height: 0; }
.pp-memo { color: var(--ink-2); }

/* several sentences under one card, each its own paragraph */
.pp-notes { display: grid; gap: 6px; }
.pp-notes p { max-width: 96ch; }

/* supporting sentences beside a hero or under a card title */
.fc-note { font-size: 12.5px; color: var(--ink-2); max-width: 64ch; }
.card-title + .fc-note, .card > .fc-note + .fc-note { margin-top: 4px; }
/* a caveat on its own line under a figure in a table cell */
.fc-sub { font-size: 11.5px; color: var(--ink-2); }
.fc-how { display: grid; gap: 8px; }
.fc-how p { font-size: 13px; color: var(--ink-2); max-width: 78ch; }