/* ============================================
   SEARCH PANEL
   Search box, advanced search, and filters
   ============================================ */

/* Search Box */
.search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
    flex: 0 0 auto;
    padding: 20px;
    z-index: 10;
    background: var(--panel-bg);
}

.search-input {
    width: 300px;
    padding: 10px 12px;
}

.search-hint {
    text-align: center;
    color: #666;
    padding: 40px;
}

/* Search Controls */
.search-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 16px;
}

.search-controls-glossary {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.search-input-group {
    display: flex;
    gap: 8px;
    width: 100%;
}

.search-input-group input.search-input {
    flex: 7;
}

.search-input-group button {
    flex: 3;
    background: var(--accent-gradient);
    color: var(--button-primary-text, white);
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.2s;
}

.search-input-group button:hover {
    filter: brightness(1.1);
}

/* Advanced Search Toggle */
.advanced-search-toggle-text {
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: right;
    transition: color 0.2s ease;
    user-select: none;
    align-self: flex-end;
}

.advanced-search-toggle-text:hover {
    color: var(--accent-color);
}

/* Advanced Search Container */
.advanced-search-container {
    background: var(--popup-bg);
    border: 1px solid var(--popup-border);
    border-radius: 12px;
    padding: 16px;
    margin: 0 16px 16px 16px;
    /* Keep the inputs usable when the search panel is dragged narrow; the
       surrounding scroll wrapper picks up the horizontal overflow instead. */
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 8px 32px var(--popup-shadow);
    animation: slideDown 0.2s ease-out;
    position: relative;
}

/* ── Advanced search in a wide pane ──────────────────────────────────────
   The form was designed for a 370-800 px side pane, one field per row. In the
   main pane (Search opened there, or a wide side pane) it lays out as a
   twelve-column grid keyed off the panel's own width, seven rows: colours
   beside type and supertype/subtype, set beside format/rarity/owned, keywords
   and tag beside oracle text, the four ranges on one row, layout and the two
   toggles on one row, sort beside the actions. The children are placed by
   position, so the order in filters.rs is load-bearing. */
.search-panel {
    container-type: inline-size;
    container-name: search-panel;
}

@container search-panel (min-width: 880px) {
    .advanced-search-container {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-flow: row dense;
        gap: 16px 20px;
        align-items: start;
    }

    .advanced-search-container > .filter-group,
    .advanced-search-container > .filter-row {
        min-width: 0;
        width: auto;
    }

    /* Seven rows. Every child is placed explicitly (by position in
       filters.rs), so nothing depends on auto-flow. */
    /* Rows 1-2: colours (two rows tall) | type; supertype + subtype */
    .advanced-search-container > :nth-child(1) {
        grid-column: 1 / 7;
        grid-row: 1 / 3;
    }

    .advanced-search-container > :nth-child(2) {
        grid-column: 7 / 13;
        grid-row: 1;
    }

    .advanced-search-container > :nth-child(3) {
        grid-column: 7 / 10;
        grid-row: 2;
    }

    .advanced-search-container > :nth-child(4) {
        grid-column: 10 / 13;
        grid-row: 2;
    }

    /* Row 3: set | format / rarity / owned */
    .advanced-search-container > :nth-child(5) {
        grid-column: 1 / 4;
        grid-row: 3;
    }

    .advanced-search-container > :nth-child(6) {
        grid-column: 4 / 13;
        grid-row: 3;
    }

    /* Row 4: keywords / tag category | oracle text */
    .advanced-search-container > :nth-child(7) {
        grid-column: 1 / 9;
        grid-row: 4;
    }

    .advanced-search-container > :nth-child(8) {
        grid-column: 9 / 13;
        grid-row: 4;
    }

    /* Row 5: the four ranges */
    .advanced-search-container > :nth-child(9) {
        grid-column: 1 / 7;
        grid-row: 5;
    }

    .advanced-search-container > :nth-child(10) {
        grid-column: 7 / 13;
        grid-row: 5;
    }

    /* Row 6: card layout | commander toggle | hide-in-deck toggle */
    .advanced-search-container > :nth-child(11) {
        grid-column: 1 / 5;
        grid-row: 6;
    }

    .advanced-search-container > :nth-child(12) {
        grid-column: 5 / 9;
        grid-row: 6;
        align-self: end;
    }

    .advanced-search-container > :nth-child(13) {
        grid-column: 9 / 13;
        grid-row: 6;
        align-self: end;
    }

    /* Row 7: sort | actions */
    .advanced-search-container > :nth-child(14) {
        grid-column: 1 / 9;
        grid-row: 7;
    }

    .advanced-search-container > :nth-child(15) {
        grid-column: 9 / 13;
        grid-row: 7;
        align-self: end;
        justify-content: flex-end;
        margin: 0;
    }
}

.advanced-search-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

/* Filter Row */
.filter-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

/* Groups split the row evenly and, critically, may shrink below their content's
   intrinsic width (min-width: 0 defeats flexbox's min-width:auto floor) — number
   inputs otherwise hold their ~150px default size and blow the row out. */
.filter-row > .filter-group {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
        gap: 12px;
    }

    /* The joined min/max widgets are compact enough to stay paired on phones:
       Power+Toughness on one row, CMC+Price on the next. */
    .filter-row.filter-row--ranges {
        flex-direction: row;
        gap: 8px;
    }
}

/* Filter Group */
.filter-group label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    display: block;
}

.filter-group select,
.filter-group input[type="text"] {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.9em;
}

.filter-group select:focus,
.filter-group input:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Min/max ranges render as one connected control: the wrapper carries the input chrome
   and the focus ring (via :focus-within), the two number fields sit borderless inside
   it, and the dash reads as the range separator instead of filler between two loose
   boxes. */
.range-inputs {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    overflow: hidden;
}

.range-inputs:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* input[type="number"] keeps this above forms.css's global number-input chrome at any
   stylesheet order. */
.range-inputs input[type="number"],
.filter-group .range-inputs input:focus {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 6px 8px;
    color: var(--text-color);
    font-size: 0.9em;
    text-align: center;
}

/* The wrapper is the control's chrome; native number spinners inside it read as
   clutter. Arrow keys and typing still adjust the values. */
.range-inputs input::-webkit-outer-spin-button,
.range-inputs input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.range-inputs input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.range-inputs span {
    flex: 0 0 auto;
    color: var(--text-muted);
    opacity: 0.7;
    pointer-events: none;
}

.checkbox-row {
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
}

.checkbox-row label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* Color Checkboxes / Mana Symbols */
.color-checkboxes {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

/* Filter Dropdown Container */
.filter-dropdown-container {
    position: relative;
}

.filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--panel-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 12px;
    min-width: 340px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.filter-actions {
    display: flex;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.filter-action-btn {
    flex: 1;
    padding: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ddd;
    border-radius: 4px;
    font-size: 0.75em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.filter-action-btn.check-all:hover {
    background: rgba(46, 204, 113, 0.2);
    border-color: var(--success-color, #2ecc71);
}

.filter-action-btn.uncheck-all:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
}

.filter-items-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.filter-item:hover {
    background: var(--entry-hover-bg);
}

.filter-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.filter-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.filter-name {
    flex: 1;
    font-size: 0.8em;
    color: var(--text-color);
}

.filter-count {
    font-size: 0.75em;
    color: var(--text-secondary);
    background: var(--accent-bg);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Deck Filter Bar */
.deck-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 4px 0;
    align-items: flex-start;
}

/* Every section stacks its label above its control for a consistent look. */
.deck-filter-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex: 1 1 180px;
    min-width: 0;
}

/* Dropdown sections (Rarity / Proxy / Owned, plus any collection extras) stay
   compact so their row tracks the CMC + Price ranges above it instead of
   stretching the full bar. */
.deck-filter-bar .deck-filter-row .deck-filter-section:has(> .filter-select) {
    flex: 0 1 130px;
    min-width: 104px;
}

/* The color section is wide enough for the mana buttons to grow (with the
   exact/contains + cost/identity toggles beneath them) but not a full row, so
   the Type section sits beside it when there's room and wraps when there isn't. */
.deck-filter-section--color {
    flex: 1 1 330px;
    min-width: 300px;
}

.filter-mana-row {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 380px;
}

.filter-mana-row .deck-filter-mana-btn {
    flex: 1 1 0;
    width: auto;
    height: auto;
    max-width: 46px;
    aspect-ratio: 1;
}

/* The cost builder's pip row grows with the advanced-search panel: ManaCostBuilder
   watches this row's width and reveals extra generic pips ({4} and up, before X) as
   full-size slots become available, so the cap that keeps other pip rows compact
   would starve it of the width those extras key off. */
.advanced-search-container .mana-cost-builder .filter-mana-row {
    max-width: none;
}

.deck-filter-section--color .toggle-row {
    margin-top: 8px;
}

.toggle-row.color-mode-toggle-row {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
}

.toggle-row.color-mode-toggle-row .advanced-toggle-group {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

.toggle-row.color-mode-toggle-row .toggle-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 7px;
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Advanced Search: padding between the color symbols and the mode toggles. */
.advanced-search-container .filter-mana-row + .toggle-row {
    margin-top: 12px;
}

/* Dropdowns inside the filter box (rarity), matching the text inputs. */
.filter-select {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-muted);
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.9em;
}

.filter-select:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Rich filter box additions (deck + collection): text input, range grid,
   and clear button. Share the same look as the Advanced Search controls. */
.filter-text-input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.9em;
}

.filter-text-input:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Chip-backed autocomplete fields park their selections *under* the input, so adding
   or removing a chip never shifts the field mid-typing. The row collapses entirely
   while no chips are selected (Leptos's comment anchors don't defeat :empty). */
.advanced-subtype-chip-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
}

.advanced-subtype-chip-input:empty {
    display: none;
    margin-top: 0;
}

.advanced-subtype-chip-input > .advanced-subtype-chip {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
}

/* (Keywords/Tag Category sizing is covered by the generic .filter-row > .filter-group
   rule near the top of this file.) */

.deck-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 16px;
    width: 100%;
    /* Take its own full-width row within the flex-wrapped filter bar. */
    flex: 1 1 100%;
}

.deck-filter-range {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.deck-filter-range .deck-filter-label {
    margin-right: 0;
}

/* The Library bar's own reset. Borrows the filter bar's clear treatment so the two read as
   the same control, but sits inline with the selects it clears rather than under them. */
.library-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

/* Hover lives in buttons.css, via the `ui-button--error` class both these buttons carry.
   That sheet loads last and its semantic rules are `!important`, so a hover rule written here
   would be overridden by the generic accent treatment -- which is what happened before. Only
   the text colour is worth restating, so the label follows the edge. */
.library-clear-filters:not(:disabled):hover,
.deck-filter-clear:not(:disabled):hover {
    color: var(--ui-button-error-outline, var(--danger-color));
}

/* Nothing to clear: still visible, so the control is findable before it is needed. */
.deck-filter-clear:disabled {
    opacity: 0.45;
    cursor: default;
}

.deck-filter-clear {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.deck-filter-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.deck-filter-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

/* Type/Supertype groups wrap with plain flex (inherited from
   .deck-filter-buttons). Fixed-column grids + @container queries were used
   before, but iOS Safari mis-sizes flex items that are inline-size query
   containers, so the buttons never wrapped on real devices. */
.deck-filter-buttons--type,
.deck-filter-buttons--supertype {
    justify-content: flex-start;
}

.deck-filter-mana-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    opacity: 0.4;
    filter: grayscale(100%) brightness(0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.deck-filter-mana-btn img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.deck-filter-mana-btn:hover {
    opacity: 0.8;
    filter: grayscale(30%) brightness(1);
    transform: scale(1.1);
}

.deck-filter-mana-btn.active {
    opacity: 1;
    filter: grayscale(0%) brightness(1.1);
    transform: scale(1.15);
    z-index: 10;
}

.deck-filter-mana-btn.active img {
    box-shadow: 0 0 10px var(--accent-glow);
}

.deck-filter-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9em;
    line-height: 1.2;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .deck-filter-bar {
        gap: 8px;
    }

    .deck-filter-section {
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .deck-filter-mana-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .deck-filter-btn {
        min-width: 40px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }

    .deck-filter-buttons {
        gap: 8px !important;
        flex-wrap: wrap;
    }
}

.deck-filter-btn:hover {
    color: var(--text-color);
    border-color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
}

.deck-filter-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--button-primary-text, white);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}

/* Rarity specific styling */
.deck-filter-btn.rarity-mythic.active {
    background: var(--rarity-mythic);
    border-color: var(--rarity-mythic);
    color: var(--button-primary-text, white);
    box-shadow: 0 0 8px rgba(213, 94, 0, 0.4);
}

.deck-filter-btn.rarity-rare.active {
    background: var(--rarity-rare);
    border-color: var(--rarity-rare);
    color: var(--button-primary-text, white);
    box-shadow: 0 0 8px rgba(230, 159, 0, 0.4);
}

.deck-filter-btn.rarity-uncommon.active {
    background: var(--rarity-uncommon);
    border-color: var(--rarity-uncommon);
    color: var(--button-primary-text, white);
}

.deck-filter-btn.rarity-common.active {
    background: var(--rarity-common);
    border-color: var(--rarity-common);
    color: var(--button-primary-text, white);
}

/* Mobile Search Overrides */
@media (max-width: 768px) {
    .search-box {
        flex-direction: column;
        padding: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Larger search input - prevent iOS zoom */
    .search-input {
        width: 100%;
        font-size: 16px;
        /* Prevents iOS zoom on focus */
        height: 48px;
        padding: 12px 16px;
    }

    .search-panel.mobile-overlay {
        background: var(--panel-bg-opaque, #111214) !important;
        opacity: 1 !important;
    }

    .search-controls {
        padding: 10px 10px;
        padding-top: 8px;
        /* Header is now separate */
    }

    .advanced-search-container {
        margin: 0 6px 12px 6px;
        padding: 10px;
        gap: 12px;
        border-radius: 10px;
    }

    .advanced-search-container::before {
        left: 10px;
        right: 10px;
    }

    .advanced-search-container .filter-group label {
        margin-bottom: 3px;
    }

    .advanced-search-container .color-checkboxes {
        gap: 8px;
    }

    .advanced-search-container .mana-symbol-btn img {
        width: 34px;
        height: 34px;
    }

    .advanced-search-container .toggle-row:not(.color-mode-toggle-row) {
        margin-top: 8px !important;
        gap: 8px !important;
    }

    .advanced-search-container .toggle-row:not(.color-mode-toggle-row) .advanced-toggle-group {
        flex: 1 1 0;
        min-width: 0;
    }

    .advanced-search-container .toggle-row:not(.color-mode-toggle-row) .advanced-toggle-group .toggle-btn {
        min-width: 0;
        flex: 1;
        padding: 5px 8px;
        font-size: 0.78rem;
    }

    .advanced-search-container .deck-filter-buttons {
        gap: 6px !important;
    }

    .advanced-search-container .deck-filter-btn {
        min-width: 36px !important;
        width: 40px;
        height: 34px !important;
        font-size: 0.92rem !important;
        padding: 3px 6px;
    }

    .advanced-search-container .deck-filter-btn i {
        font-size: 1.05em !important;
    }

    .advanced-search-container .filter-row {
        gap: 8px;
    }

    .filter-items-grid {
        grid-template-columns: 1fr;
    }

    .search-input-group {
        flex-direction: column;
        gap: 8px;
    }

    .search-input-group button {
        width: 100%;
        padding: 12px;
        min-height: 44px;
    }

    /* Advanced toggle - larger tap target */
    .advanced-search-toggle-text {
        padding: 8px 12px;
        font-size: 0.8em;
    }

    /* Search results grid - 2 columns for cards */
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 8px;
    }

    /* Note: Base search-panel mobile styles are in mobile_fab.css */
    /* This just handles internal search panel content */
    .search-results-wrapper {
        padding: 0 8px 8px 8px;
    }

    .search-hint {
        padding: 24px;
        font-size: 0.9em;
    }

    .no-results {
        padding: 24px;
    }
}

/* Phone-width advanced search: fixed two-row layouts instead of ragged flex overflow.
   Plain media-query grids, NOT @container — see the iOS Safari note above
   .deck-filter-buttons--type. ManaCostBuilder's width watcher also pins its extra
   generic pips to zero at these widths so the cost grid stays exactly 5 + 5. */
@media (max-width: 480px) {
    /* W U B R G on the top row, C 1 2 3 X on the second (DOM order fills the grid). */
    .advanced-search-container .mana-cost-builder .filter-mana-row {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        justify-items: center;
        max-width: 260px;
    }

    .advanced-search-container .mana-cost-builder .deck-filter-mana-btn {
        width: 100%;
        max-width: 40px;
        height: auto;
        aspect-ratio: 1;
    }

    /* The 8 type buttons split 4/4 rather than flexing 7 + 1 orphan. Content-sized
       columns packed to the start keep both rows pinned left with the same tight gap
       as the Supertype row beneath, instead of spreading across width quarters. */
    .advanced-search-container .deck-filter-buttons--type {
        display: grid;
        grid-template-columns: repeat(4, max-content);
        justify-content: start;
    }
}

/* Toggle Switches for Advanced Search */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.advanced-toggle-group {
    display: flex;
    background: var(--input-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--input-border, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    padding: 2px;
    overflow: hidden;
    height: 32px;
}

.toggle-btn {
    padding: 2px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-btn.left {
    border-radius: 6px 0 0 6px;
}

.toggle-btn.right {
    border-radius: 0 6px 6px 0;
}

.toggle-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
}

.toggle-btn.active {
    background: var(--accent-color);
    color: var(--button-primary-text, white);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}

/* Direction buttons are single arrows, so the toggle stays a narrow attachment to the
   sort dropdown instead of the widest control in the row. */
.toggle-btn.sort-direction-btn {
    min-width: 30px;
    padding: 2px 8px;
    font-size: 0.9rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .toggle-row {
        gap: 8px;
    }
    .toggle-btn {
        min-width: 70px;
        padding: 4px 8px;
    }
}


/* ============================================
   SEARCH MODE TABS (Filters | Intent Search)
   ============================================ */

.search-mode-tabs {
    display: flex;
    gap: 2px;
    border-radius: 8px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.search-mode-tabs--mobile {
    background: var(--widget-bg, rgba(255, 255, 255, 0.05));
    padding: 3px;
    margin-bottom: 0;
}

.search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-color, rgba(255, 255, 255, 0.05));
    position: sticky;
    top: 0;
    z-index: 20;
}

.mobile-search-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--button-primary-text, white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.mobile-search-close:hover {
    background: rgba(255, 255, 255, 0.15);
    background: var(--accent-color);
}

.search-mode-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.search-mode-tab:hover {
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.06);
}

.search-mode-tab--active {
    background: var(--accent-color);
    color: var(--button-primary-text, white);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb, 103, 126, 234), 0.35);
}

.search-mode-tab--active:hover {
    background: var(--accent-color);
    color: var(--button-primary-text, white);
    filter: brightness(1.1);
}

/* ============================================
   INTENT SEARCH — Collapsible Groups & Chips
   ============================================ */

.intent-search-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 8px 0;
    animation: slideDown 0.2s ease-out;
}

.intent-search-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
    font-style: italic;
}

/* ---- Group list ---- */
.intent-groups-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 2px;
}

/* ---- Group container ---- */
.intent-group {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    /* Prevent vertical crunching */
}

/* ---- Group header (collapse toggle) ---- */
.intent-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    cursor: pointer;
    color: var(--text-color);
    transition: background 0.15s ease;
    text-align: left;
}

.intent-group-header:hover {
    background: rgba(255, 255, 255, 0.08);
}

.intent-group-header-left {
    display: flex;
    align-items: center;
    gap: 7px;
}

.intent-group-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.intent-group-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.intent-group-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-color);
    color: var(--button-primary-text, white);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

.intent-group-chevron {
    color: var(--text-muted);
    opacity: 0.6;
    flex-shrink: 0;
}

/* ---- Chip grid inside a group ---- */
.intent-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px 8px 8px 8px;
    background: var(--entry-bg);
}

.intent-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 16px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

.intent-chip:hover {
    background: rgba(var(--accent-rgb, 103, 126, 234), 0.12);
    border-color: rgba(var(--accent-rgb, 103, 126, 234), 0.35);
    color: var(--text-color);
}

.intent-chip--selected {
    background: rgba(var(--accent-rgb, 103, 126, 234), 0.2);
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 0 8px rgba(var(--accent-rgb, 103, 126, 234), 0.2);
}

.intent-chip--selected:hover {
    background: rgba(var(--accent-rgb, 103, 126, 234), 0.28);
}

.intent-chip-label {
    line-height: 1.2;
}

/* ---- Action bar ---- */
.intent-search-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.intent-search-btn {
    padding: 7px 16px;
    background: var(--accent-gradient, var(--accent-color));
    border: none;
    border-radius: 7px;
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb, 103, 126, 234), 0.3);
    white-space: nowrap;
}

.intent-search-btn:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.intent-search-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.intent-clear-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.intent-clear-btn:hover {
    color: var(--text-color);
    border-color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
    .intent-groups-list {
        max-height: none;
        /* Allow it to grow on mobile */
    }

    .intent-chip {
        padding: 5px 10px;
        font-size: 0.73rem;
    }
}

/* ============================================
   QUERY EXPANSION BADGE
   ============================================ */

.query-expansion-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 4px 10px 4px 8px;
    background: rgba(var(--accent-rgb, 103, 126, 234), 0.08);
    border: 1px solid rgba(var(--accent-rgb, 103, 126, 234), 0.2);
    border-radius: 6px;
    animation: slideDown 0.15s ease-out;
}

.query-expansion-icon {
    color: var(--accent-color);
    opacity: 0.8;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.query-expansion-text {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.query-expansion-text strong,
.query-expansion-text b {
    color: var(--accent-color);
    font-weight: 600;
}

@media (max-width: 768px) {
    .query-expansion-badge {
        font-size: 0.7rem;
    }
}

/* --- Autocomplete Section Headers & Expansions --- */

.autocomplete-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-color);
    opacity: 0.8;
}

.autocomplete-section-header--cards {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 4px;
}

.autocomplete-expansion-list {
    list-style: none;
    margin: 0;
    padding: 0 4px 4px;
}

.autocomplete-expansion-item {
    padding: 8px 10px;
    margin: 2px 4px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.autocomplete-item {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.autocomplete-expansion-item:hover,
.autocomplete-expansion-item.highlighted {
    background: rgba(var(--accent-rgb, 103, 126, 234), 0.12);
    border-color: rgba(var(--accent-rgb, 103, 126, 234), 0.2);
}

.autocomplete-expansion-item.autocomplete-exclusion {
    background: rgba(220, 38, 38, 0.05);
}
.autocomplete-expansion-item.autocomplete-exclusion:hover,
.autocomplete-expansion-item.autocomplete-exclusion.highlighted {
    background: rgba(220, 38, 38, 0.2) !important;
    border-color: rgba(220, 38, 38, 0.4);
}

.autocomplete-expansion-item.autocomplete-exclusion .autocomplete-expansion-badge {
    background: #dc2626;
}

.autocomplete-expansion-item.autocomplete-or {
    background: rgba(59, 130, 246, 0.05);
}
.autocomplete-expansion-item.autocomplete-or:hover,
.autocomplete-expansion-item.autocomplete-or.highlighted {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4);
}

.autocomplete-expansion-item.autocomplete-or .autocomplete-expansion-badge {
    background: #3b82f6;
}

.search-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
    background: var(--bg-color);
}

/* Native selects otherwise render their chosen values with a browser/theme
   default that does not match the rest of the Search field copy. */
.advanced-search-container :is(select, .filter-select, .sort-control-select) {
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
}

.advanced-search-container select option {
    background: var(--select-option-bg);
    color: var(--text-muted);
}

.search-chips-clear {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-chips-clear:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--accent-bg);
}

.search-chip-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 2px;
    display: flex;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.search-chip-remove:hover {
    opacity: 1;
}

.search-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--chip-bg);
    color: var(--chip-text);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.search-chip--exclude {
    background: var(--chip-exclude-bg) !important;
    color: var(--chip-exclude-text) !important;
}

.search-chip--or {
    background: var(--chip-or-bg) !important;
    color: var(--chip-or-text) !important;
}

.search-chip--intent {
    background: rgba(var(--accent-rgb, 103, 126, 234), 0.18) !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

.autocomplete-expansion-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(var(--accent-rgb, 103, 126, 234), 0.1);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.autocomplete-expansion-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.autocomplete-expansion-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-color);
}

.autocomplete-expansion-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.autocomplete-expansion-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--accent-color);
    color: white;
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(5px);
    transition: all 0.2s ease;
}

.autocomplete-expansion-item:hover .autocomplete-expansion-badge {
    opacity: 1;
    transform: translateX(0);
}

/* Deck-Contextual Recommendations */
.deck-context-suggestions {
    margin: 8px 0;
    padding: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb, 103, 126, 234), 0.1), rgba(155, 89, 182, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.deck-context-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.deck-context-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.deck-suggestion-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--widget-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-color);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.deck-suggestion-chip:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.deck-suggestion-chip span {
    white-space: nowrap;
}

/* Autocomplete Add to Deck Badge */
.autocomplete-item .add-to-deck-badge {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    opacity: 0.5;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.9);
    z-index: 5;
}

.autocomplete-item:hover .add-to-deck-badge,
.autocomplete-item.highlighted .add-to-deck-badge {
    opacity: 1;
    transform: scale(1);
}

.autocomplete-item .add-to-deck-badge:hover {
    transform: scale(1.15) !important;
    background: var(--accent-color) !important;
    box-shadow: 0 0 12px var(--accent-glow) !important;
}

.autocomplete-item .add-to-deck-badge:active {
    transform: scale(0.95) !important;
}

/* ============================================
   SEARCH GOALS — Collapsible peer to Advanced
   ============================================ */

.search-goals-container {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 4px;
}

.search-goals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.04);
}

.search-goals-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.search-goals-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-color);
    color: var(--button-primary-text, white);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

/* ============================================
   GLOSSARY PANEL — Browsable keyword list
   ============================================ */

/* No padding of its own: the panel mounts inside .search-controls, which already pads
   the subtab content — its 10px 14px here stacked on top of that, which is why the
   Glossary sat visibly inset compared to Card Search. */
.glossary-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.glossary-search-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    background: var(--input-bg, rgba(0, 0, 0, 0.2));
    color: var(--text-color);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s ease;
    flex-shrink: 0;
}

.glossary-search-input:focus {
    border-color: var(--accent-color);
}

.glossary-entries {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
}

.glossary-empty {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    padding: 30px 0;
    font-style: italic;
}

.glossary-entry {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    transition: background 0.15s ease;
}

.glossary-entry:hover {
    background: rgba(255, 255, 255, 0.06);
}

.glossary-entry-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.glossary-entry-category-cell {
    margin-left: auto;
}

.glossary-entry-icon {
    font-size: 1.1rem;
    color: var(--text-color);
    opacity: 0.85;
    flex-shrink: 0;
}

.glossary-entry-icon.custom {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.glossary-entry-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
    flex: 1;
}

.glossary-entry-category {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    opacity: 0.7;
    white-space: nowrap;
}

.glossary-entry-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.glossary-entry-full-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    opacity: 0.7;
    line-height: 1.55;
    margin: 2px 0 0 0;
    font-style: italic;
}

.glossary-entry-guide {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 3px 0 0 0;
}

.glossary-guide-link {
    color: var(--accent-color);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
}

.glossary-guide-link:hover {
    color: var(--text-color);
    border-bottom-color: var(--accent-color);
}

.glossary-entry-see-also {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.glossary-see-also-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.glossary-see-also-chip {
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Colors <-> Exact Cost swap.
   Deliberately quiet: it sits under the controls it swaps and reads as a
   footnote until hovered, so an advanced escape hatch does not compete with
   the filters themselves. */
/* Heading row for the Colors/Exact Cost group: the label sits left as usual and the
   mode-swap button pins to the right on the same line. */
.filter-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.filter-mode-swap {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.filter-mode-swap:hover,
.filter-mode-swap:focus-visible {
    opacity: 1;
    color: var(--accent-color);
    text-decoration: underline;
}

/* Explainer text under boolean toggles: the same small, light voice as .filter-mode-swap,
   informative without drawing the eye. */
.filter-toggle-hint {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.5;
    opacity: 0.6;
}

/* Mana cost builder */
.mana-cost-builder {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mana-cost-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-group .mana-cost-input-row .mana-cost-input {
    flex: 1;
    font-family: var(--font-mono, monospace);
}

/* ============================================
   COMPACT FILTER BAR
   The Deck subtab's filter drawer and the Free Form presentation drawer
   show the same bar in far less room: labels and gaps tighten, ranges sit
   in one row, and the owned select stops spanning the width.
   ============================================ */
.filter-drawer,
.deck-table-present-filters {
    padding: 8px 12px;
}

.filter-drawer .deck-control-section {
    padding: 8px 10px;
    margin-bottom: 8px;
}

.filter-drawer .deck-control-section:last-child {
    margin-bottom: 0;
}

.filter-drawer .deck-filter-bar,
.deck-table-present-filters .deck-filter-bar {
    gap: 6px 14px;
    padding: 0;
    align-items: flex-end;
}

.filter-drawer .deck-filter-section,
.deck-table-present-filters .deck-filter-section {
    flex: 0 1 auto;
    gap: 3px;
}

.filter-drawer .deck-filter-section--color,
.deck-table-present-filters .deck-filter-section--color {
    flex: 0 1 auto;
    min-width: 0;
}

.filter-drawer .deck-filter-section--color .toggle-row,
.deck-table-present-filters .deck-filter-section--color .toggle-row {
    margin-top: 4px;
}

.filter-drawer .deck-filter-label,
.deck-table-present-filters .deck-filter-label {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
}

.filter-drawer .filter-select,
.deck-table-present-filters .filter-select {
    width: auto;
    min-width: 120px;
    max-width: 200px;
    padding: 4px 8px;
    font-size: 0.8rem;
}

.filter-drawer .deck-filter-grid,
.deck-table-present-filters .deck-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    flex: 0 1 auto;
    width: auto;
}

.filter-drawer .deck-filter-range,
.deck-table-present-filters .deck-filter-range {
    flex: 0 1 auto;
    gap: 3px;
}

.filter-drawer .deck-filter-range input,
.deck-table-present-filters .deck-filter-range input {
    max-width: 72px;
    padding: 4px 6px;
    font-size: 0.8rem;
}

.filter-drawer .deck-filter-clear,
.deck-table-present-filters .deck-filter-clear {
    align-self: flex-end;
    padding: 4px 10px;
    font-size: 0.75rem;
}


/* Type + Supertype: one item, so the pair either sits beside the colour
   block (stacked, the same height as it) or wraps together onto the next
   row — never one on each. */
.deck-filter-type-stack {
    display: contents;
}

.filter-drawer .deck-filter-type-stack,
.deck-table-present-filters .deck-filter-type-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 1 auto;
    align-self: stretch;
    justify-content: space-between;
}

.filter-drawer .deck-filter-bar,
.deck-table-present-filters .deck-filter-bar {
    align-items: stretch;
}

.filter-drawer .deck-filter-section,
.deck-table-present-filters .deck-filter-section {
    justify-content: flex-end;
}


/* ============================================
   FIVE-GROUP FILTER BAR (compact drawers)
   Outside the drawers the wrappers are transparent; inside, each group is a
   two-row column, the row is a flex line, and the groups wrap as a unit.
   ============================================ */
.deck-filter-group,
.deck-filter-row {
    display: contents;
}

.filter-drawer .deck-filter-bar,
.deck-table-present-filters .deck-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px 22px;
}

.filter-drawer .deck-filter-group,
.deck-table-present-filters .deck-filter-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    flex: 0 1 auto;
}

.filter-drawer .deck-filter-row,
.deck-table-present-filters .deck-filter-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.filter-drawer .deck-filter-row .deck-filter-section,
.deck-table-present-filters .deck-filter-row .deck-filter-section,
.filter-drawer .deck-filter-row .deck-filter-range,
.deck-table-present-filters .deck-filter-row .deck-filter-range {
    flex: 0 1 auto;
    min-width: 0;
}

/* Clear always sits bottom-right of the bar. */
.filter-drawer .deck-filter-clear,
.deck-table-present-filters .deck-filter-clear {
    margin-left: auto;
    align-self: flex-end;
}

.deck-budget-input {
    width: 96px;
    padding: 4px 6px;
    font-size: 0.8rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
}

/* The old wrappers this layout replaces. */
.deck-filter-type-stack {
    display: contents;
}