/* The collection uses the DDRW public palette and typography in either theme. */
.ddrw-icon-catalog {
    --ddrw-icon-size: 24px;
    --ddrw-icon-color: currentColor;
    --ddrw-icon-border: color-mix(in srgb, var(--ddrw-fg) 14%, transparent);
    --ddrw-icon-panel: color-mix(in srgb, var(--ddrw-bg) 90%, transparent);
    width: min(100%, 1512px);
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 3vw, 3rem) 5rem;
    color: var(--ddrw-fg);
    font-family: var(--ddrw-font-sans, sans-serif);
}
.ddrw-icon-catalog *, .ddrw-icon-catalog *::before, .ddrw-icon-catalog *::after { box-sizing: border-box; }
.ddrw-icon-catalog [hidden] { display: none !important; }
.ddrw-icon-catalog .ddrw-icon-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.ddrw-icon-catalog .ddrw-icon-heading h1 { margin: 0 0 .75rem; }
.ddrw-icon-catalog .ddrw-icon-heading p { max-width: 54ch; margin: 0; line-height: 1.65; color: var(--ddrw-hero-subtitle); }
.ddrw-icon-catalog .ddrw-icon-heading > .btn-secondary { flex-shrink: 0; }
.ddrw-icon-catalog [data-icon-status] { min-height: 1.5em; margin: 0 0 1rem; color: var(--ddrw-hero-subtitle); font-size: .875rem; }
.ddrw-icon-catalog .ddrw-icon-frame { display: grid; grid-template-columns: 178px minmax(0, 1fr) 276px; gap: 1.5rem; align-items: start; }
.ddrw-icon-catalog .ddrw-icon-categories, .ddrw-icon-catalog .ddrw-icon-detail { position: sticky; top: 112px; min-width: 0; }
.ddrw-icon-catalog .ddrw-icon-categories { max-height: calc(100dvh - 144px); overflow-y: auto; scrollbar-width: thin; padding-right: .3rem; }
.ddrw-icon-catalog .ddrw-icon-panel-title { margin: 0 0 .75rem; font-size: .9375rem; font-weight: 600; }
.ddrw-icon-catalog button, .ddrw-icon-catalog input, .ddrw-icon-catalog select, .ddrw-icon-catalog textarea { font: inherit; }
.ddrw-icon-catalog button, .ddrw-icon-catalog select { cursor: pointer; }
.ddrw-icon-catalog button { color: var(--ddrw-fg); }
.ddrw-icon-catalog :is(button, input, select, textarea, a):focus-visible { outline: 2px solid var(--ddrw-hero-accent); outline-offset: 3px; }
.ddrw-icon-catalog .ddrw-icon-category { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .625rem; border: 1px solid transparent; border-radius: .625rem; background: transparent; text-align: left; font-size: .8125rem; line-height: 1.4; }
.ddrw-icon-catalog .ddrw-icon-category-count { color: var(--ddrw-hero-subtitle); font-variant-numeric: tabular-nums; font-size: .75rem; }
.ddrw-icon-catalog .ddrw-icon-category[aria-pressed='true'] { border-color: var(--ddrw-icon-border); background: color-mix(in srgb, var(--ddrw-fg) 6%, transparent); font-weight: 600; }
.ddrw-icon-catalog .ddrw-icon-category:hover { background: color-mix(in srgb, var(--ddrw-fg) 4%, transparent); }
.ddrw-icon-catalog .ddrw-icon-results { min-width: 0; }
.ddrw-icon-catalog .ddrw-icon-toolbar { display: flex; gap: .75rem; align-items: end; }
.ddrw-icon-catalog .ddrw-icon-toolbar > .ddrw-icon-field:first-child { flex: 1; }
.ddrw-icon-catalog .ddrw-icon-toolbar > .ddrw-icon-field:last-child { flex: 0 0 138px; }
.ddrw-icon-catalog .ddrw-icon-field { display: flex; flex-direction: column; gap: .5rem; font-size: .8125rem; line-height: 1.4; min-width: 0; }
.ddrw-icon-catalog .ddrw-icon-field > span { color: var(--ddrw-hero-subtitle); }
.ddrw-icon-catalog .ddrw-icon-field :is(input:not([type='range']), select, textarea) { width: 100%; min-height: 42px; padding: .65rem .75rem; border: 1px solid var(--ddrw-icon-border); border-radius: .625rem; background: var(--ddrw-icon-panel); color: var(--ddrw-fg); }
.ddrw-icon-catalog .ddrw-icon-field input[type='search'] { min-width: 0; }
.ddrw-icon-catalog .ddrw-icon-field input::placeholder { color: var(--ddrw-hero-subtitle); opacity: .85; }
.ddrw-icon-catalog .ddrw-icon-field select { padding-right: 1.5rem; }
.ddrw-icon-catalog .ddrw-icon-field input[type='color'] { padding: .3rem; cursor: pointer; }
.ddrw-icon-catalog .ddrw-icon-field input[type='range'] { width: 100%; min-height: 24px; margin: 0; accent-color: var(--ddrw-hero-accent); }
.ddrw-icon-catalog .ddrw-icon-field output { color: var(--ddrw-hero-subtitle); font-variant-numeric: tabular-nums; }
.ddrw-icon-catalog .ddrw-icon-mobile-category { display: none; }
.ddrw-icon-catalog .ddrw-icon-result-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin: 1rem 0; color: var(--ddrw-hero-subtitle); font-size: .75rem; }
.ddrw-icon-catalog .ddrw-icon-result-meta p { margin: 0; }
.ddrw-icon-catalog .ddrw-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem; }
.ddrw-icon-catalog .ddrw-icon-tile { min-width: 0; min-height: 108px; padding: .875rem .375rem .5rem; border: 1px solid var(--ddrw-icon-border); border-radius: .75rem; background: var(--ddrw-icon-panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; text-decoration: none; color: var(--ddrw-fg); overflow: hidden; }
.ddrw-icon-catalog .ddrw-icon-tile:hover { border-color: color-mix(in srgb, var(--ddrw-hero-accent) 65%, transparent); background: color-mix(in srgb, var(--ddrw-fg) 4%, var(--ddrw-bg)); }
.ddrw-icon-catalog .ddrw-icon-tile[aria-pressed='true'] { border-color: var(--ddrw-hero-accent); box-shadow: inset 0 0 0 1px var(--ddrw-hero-accent); }
.ddrw-icon-catalog .ddrw-icon-glyph { color: var(--ddrw-icon-color); width: var(--ddrw-icon-size); height: var(--ddrw-icon-size); flex-shrink: 0; max-width: 100%; display: block; }
.ddrw-icon-catalog .ddrw-icon-name { max-width: 100%; text-align: center; color: var(--ddrw-hero-subtitle); font-size: .6875rem; line-height: 1.35; overflow-wrap: anywhere; }
.ddrw-icon-catalog .ddrw-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; padding: .65rem .875rem; border: 1px solid var(--ddrw-icon-border); border-radius: .625rem; background: var(--ddrw-icon-panel); color: var(--ddrw-fg); text-decoration: none; text-align: center; font-size: .8125rem; font-weight: 500; line-height: 1.3; }
.ddrw-icon-catalog .ddrw-icon-button:hover { border-color: var(--ddrw-hero-accent); }
.ddrw-icon-catalog .ddrw-icon-button-primary { background: var(--ddrw-fg); border-color: var(--ddrw-fg); color: var(--ddrw-bg); }
.ddrw-icon-catalog .ddrw-icon-button:disabled { opacity: .5; cursor: wait; }
.ddrw-icon-catalog .ddrw-icon-more { display: flex; margin: 1.25rem auto 0; }
.ddrw-icon-catalog .ddrw-icon-detail { max-height: calc(100dvh - 144px); overflow-y: auto; scrollbar-width: thin; border: 1px solid var(--ddrw-icon-border); border-radius: 1rem; background: var(--ddrw-icon-panel); padding: 1.125rem; display: flex; flex-direction: column; gap: 1rem; }
.ddrw-icon-catalog .ddrw-icon-detail-title { margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; line-height: 1.4; }
.ddrw-icon-catalog .ddrw-icon-detail-category { margin: .35rem 0 0; color: var(--ddrw-hero-subtitle); font-size: .75rem; }
.ddrw-icon-catalog .ddrw-icon-preview { min-height: 140px; display: flex; align-items: center; justify-content: center; border-radius: .625rem; background: color-mix(in srgb, var(--ddrw-fg) 3%, transparent); }
.ddrw-icon-catalog .ddrw-icon-preview .ddrw-icon-preview-glyph { width: min(calc(var(--ddrw-icon-size) * 3), 144px); height: min(calc(var(--ddrw-icon-size) * 3), 144px); }
.ddrw-icon-catalog .ddrw-icon-hint { margin: -.375rem 0 0; color: var(--ddrw-hero-subtitle); font-size: .75rem; text-align: center; }
.ddrw-icon-catalog .ddrw-icon-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem .75rem; align-items: start; }
.ddrw-icon-catalog .ddrw-icon-controls > :first-child { grid-column: 1 / -1; }
.ddrw-icon-catalog .ddrw-icon-controls > :last-child { grid-column: 1 / -1; }
.ddrw-icon-catalog .ddrw-icon-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ddrw-icon-catalog .ddrw-icon-actions .ddrw-icon-button { padding-inline: .4rem; }
.ddrw-icon-catalog .ddrw-icon-actions > :first-child { grid-column: 1 / -1; }
.ddrw-icon-catalog .ddrw-icon-actions > :nth-child(2) { grid-column: 1 / -1; }
.ddrw-icon-catalog .ddrw-icon-code { min-width: 0; resize: vertical; font-family: ui-monospace, monospace; font-size: .6875rem; line-height: 1.5; overflow-wrap: anywhere; }
.ddrw-icon-catalog .ddrw-icon-download-set { display: flex; flex-direction: column; gap: .625rem; padding-top: 1rem; border-top: 1px solid var(--ddrw-icon-border); }
.ddrw-icon-catalog .ddrw-icon-download-set p { margin: 0; }
.ddrw-icon-catalog .ddrw-icon-archive-info { color: var(--ddrw-hero-subtitle); font-size: .75rem; }
.ddrw-icon-catalog .ddrw-icon-license { color: var(--ddrw-hero-subtitle); font-size: .75rem; line-height: 1.65; }
.ddrw-icon-catalog > .ddrw-icon-license { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--ddrw-icon-border); }
.ddrw-icon-catalog .ddrw-icon-license p { margin: 0 0 .5rem; }
.ddrw-icon-catalog .ddrw-icon-license-link, .ddrw-icon-catalog .ddrw-icon-license a { color: var(--ddrw-fg); font-size: .75rem; text-decoration: underline; text-underline-offset: .2em; }
.ddrw-icon-catalog .ddrw-icon-empty { padding: 3rem 1rem; text-align: center; }
.ddrw-icon-catalog .ddrw-icon-empty h3 { font-size: 1.125rem; margin: 0 0 .75rem; }
.ddrw-icon-catalog .ddrw-icon-empty p { color: var(--ddrw-hero-subtitle); font-size: .875rem; margin: 0 0 1.5rem; }
.ddrw-icon-catalog .ddrw-icon-back { display: none; }
@media (min-width: 1500px) {
    .ddrw-icon-catalog .ddrw-icon-frame { grid-template-columns: 192px minmax(0, 1fr) 296px; gap: 2rem; }
}
@media (max-width: 1150px) and (min-width: 960px) {
    .ddrw-icon-catalog { padding-inline: 1rem; }
    .ddrw-icon-catalog .ddrw-icon-frame { grid-template-columns: 154px minmax(0, 1fr) 244px; gap: 1rem; }
    .ddrw-icon-catalog .ddrw-icon-toolbar { flex-direction: column; align-items: stretch; }
    .ddrw-icon-catalog .ddrw-icon-toolbar > .ddrw-icon-field:last-child { flex-basis: auto; }
}
@media (max-width: 959px) {
    .ddrw-icon-catalog .ddrw-icon-frame { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .ddrw-icon-catalog .ddrw-icon-categories { display: none; }
    .ddrw-icon-catalog .ddrw-icon-mobile-category { display: flex; }
    .ddrw-icon-catalog .ddrw-icon-toolbar { flex-wrap: wrap; }
    .ddrw-icon-catalog .ddrw-icon-toolbar > .ddrw-icon-field:first-child { flex-basis: 100%; }
    .ddrw-icon-catalog .ddrw-icon-toolbar > .ddrw-icon-field { flex: 1; }
    .ddrw-icon-catalog .ddrw-icon-toolbar > .ddrw-icon-field:last-child { flex: 1; }
    .ddrw-icon-catalog .ddrw-icon-detail { position: static; max-height: none; overflow: visible; width: min(100%, 560px); margin-inline: auto; padding: 1.25rem; }
    .ddrw-icon-catalog .ddrw-icon-back { display: inline-flex; align-self: start; }
    .ddrw-icon-catalog .ddrw-icon-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ddrw-icon-catalog .ddrw-icon-actions > :nth-child(2) { grid-column: auto; }
    .ddrw-icon-catalog .ddrw-icon-actions > :first-child { grid-column: auto; }
}
@media (max-width: 479px) {
    .ddrw-icon-catalog { padding-inline: 1rem; }
    .ddrw-icon-catalog .ddrw-icon-heading { gap: 1rem; }
    .ddrw-icon-catalog .ddrw-icon-heading > .btn-secondary { width: 100%; }
    .ddrw-icon-catalog .ddrw-icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ddrw-icon-catalog .ddrw-icon-toolbar > .ddrw-icon-field:last-child { flex: 0 0 42%; }
    .ddrw-icon-catalog .ddrw-icon-tile { min-height: 104px; }
}