/* Icon gallery page only. */
.gallery { margin: 0 auto; }
.gallery h1 { margin-bottom: 4px; }
.gallery-tools { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; }
.gallery-tools .field:last-child { min-width: 200px; }
.icon-group h2 { font-size: 15px; margin: var(--s4) 0 var(--s1); display: flex; gap: var(--s1); align-items: baseline; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: var(--s1); }
.icon-tile {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 16px 8px 12px; border: 1px solid var(--border); border-radius: var(--r-card);
    background: var(--panel); color: var(--text); font: inherit; cursor: pointer;
}
.icon-tile:hover { border-color: var(--orange); background: var(--nav-active); }
.icon-tile .icon { width: 28px; height: 28px; }
.icon-tile code { font-size: 11px; color: var(--text-2); overflow-wrap: anywhere; text-align: center; }   /* wrap at spaces; break a word only when one name is too long */
.gallery .alert:not(.visually-hidden) { position: fixed; bottom: var(--s3); right: var(--s3); z-index: 50; box-shadow: var(--shadow-md); }
.icon-tile .brand-mark { width: 28px; height: 28px; }
.brands-head { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--border); }
/* Icons now and MDI comparison page. */
.compare .compare-icon { width: 28px; height: 28px; }
.compare td { vertical-align: middle; }
.compare .compare-group th { padding-top: var(--s3); font-size: 13px; color: var(--text); text-transform: none; letter-spacing: 0; }