/* ─── 26 Oct 2026 — A GAME-MOD PROJECT'S ICONS IN SECTIONS (src/gameModIcons.js, the Assets page's Icons tab) ─────────
   Hugo: "the icons are very, very messy. They're not organized at all into categories ... we should have icons for the
   buildings, we should have icons for the resources. All of this should be really clear and really organized."
   The cards are the Assets page's own (.prop-card); the section heads are the Packaging page's (.pkg-album-head); the
   filter chips are the Assets page's (.as-ep-chip). This sheet only adds the filter row, the section note and the tier
   sub-heads. FIXED LAYOUT (invariant #20): the filter row is one fixed-height line that scrolls sideways, and its counts
   never change with the pick, so a click moves nothing above the cards. Colours are tokens. */

.gmi { display: flex; flex-direction: column; gap: 14px; }
.gmi-filter {
  flex: none;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink-muted) 40%, transparent) transparent;
}
.gmi-filter .as-ep-chip { flex: none; display: inline-flex; align-items: baseline; gap: 6px; font-family: inherit; line-height: 1; }
.gmi-n { font-weight: var(--fw-med); opacity: 0.7; font-variant-numeric: tabular-nums; }
.gmi-sub-head .gmi-n { margin-left: 8px; }
.gmi-sec-note { min-width: 0; font-size: var(--fs-12); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmi-sub { display: flex; flex-direction: column; gap: 8px; }
.gmi-sub + .gmi-sub { margin-top: 14px; }
.gmi-sub-head {
  height: 22px;
  line-height: 22px;
  margin: 0 2px;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-08);
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
/* a building with no icon yet: its card keeps its size, the frame shows the initials on a dashed edge */
.gmi-bcard.is-noicon .prop-frame { outline: 1px dashed color-mix(in srgb, var(--ink-muted) 55%, transparent); outline-offset: -6px; }