#topic-results { margin-inline: -.35rem; }
.unknown-set .card-image { filter: grayscale(1); }
.unknown-label { color: var(--edge-muted); font-weight: 600; }
.card-placeholder { display: grid; place-items: center; color: #c0c8d2; text-align: center; padding: 1rem; }
.result-title { overflow-wrap: anywhere; }
.topic-source { overflow-wrap: anywhere; font-size: var(--text-xs); color: var(--edge-muted); }
#progress { height: 8px; accent-color: var(--edge-primary); }
[hidden] { display: none !important; }

.filter-toolbar { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 2px 1px 4px; }
.filter-segments, .mana-segments, .format-segments { display: inline-flex; align-items: stretch; flex: 0 0 auto; }
.filter-segments { gap: 8px; align-items: center; }
.mana-segments, .format-segments { border: 1px solid var(--edge-border); border-radius: var(--edge-control-radius); background: var(--edge-surface); overflow: hidden; }
.filter-segment, .filter-type-toggle, .filter-reset { height: 36px; min-height: 36px; border: 0; background: transparent; color: var(--edge-text); font: inherit; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; }
.filter-segment { padding: 0 11px; border-right: 1px solid var(--edge-border); }
.mana-segments .filter-segment:last-child, .format-segments .filter-segment:last-child { border-right: 0; }
.mana-segment { width: 34px; padding: 0; display: inline-flex; justify-content: center; align-items: center; }
.identity-segment { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--edge-border); border-radius: var(--edge-control-radius); background: var(--edge-surface); }
.filter-segment[aria-pressed="true"] { background: color-mix(in oklab, var(--edge-primary) 18%, var(--edge-surface)); color: var(--edge-primary); box-shadow: inset 0 -3px var(--edge-primary); }
.filter-segment:hover, .filter-reset:hover, .filter-type-toggle:hover { background: var(--edge-surface-alt); }
.filter-segment:focus-visible { outline: 2px solid var(--edge-primary); outline-offset: -3px; }
.filter-type-toggle { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 144px; flex: 0 0 144px; padding: 0 12px; border: 1px solid var(--edge-border); border-radius: var(--edge-control-radius); background: var(--edge-surface); }
.filter-reset { flex: 0 0 32px; font-size: 23px; color: var(--edge-muted); }
.multi-mana { display: block; width: 20px; height: 20px; flex: 0 0 20px; }
#filter-type-menu { position: fixed; inset: auto; margin: 0; width: 280px; max-width: calc(100vw - 16px); max-height: min(410px, calc(100dvh - 16px)); overflow-y: auto; padding: 12px; border: 1px solid var(--edge-border); border-radius: var(--edge-control-radius); color: var(--edge-text); background: var(--edge-surface); box-shadow: var(--edge-shadow); }
.type-menu-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: var(--text-sm); font-weight: 600; }
.type-menu-heading button { border: 0; background: transparent; color: var(--edge-primary); font-size: var(--text-xs); }
.type-menu-option { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--text-sm); cursor: pointer; }

.filter-toolbar .filter-sort { flex: 0 0 212px; width: 212px; height: 38px; min-height: 38px; padding-top: 0; padding-bottom: 0; font-size: var(--text-sm); }