/* ── Page wrapper ── */
/* Page wrapper is the shared .page (main.css) — #card-drawer sizes against it. */

/* ═══════════════════════════════════════
   LIST VIEW
═══════════════════════════════════════ */

.dga-list-view,
.dga-detail-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.dga-cards-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    height: 100%;
}

/* .dga-header is the shared .list-header (main.css). */

/* .dga-label is the shared .label (main.css) + block display. */
.dga-label {
    display: block;
}

.dga-subtitle {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}

/* Shared .btn .btn--ghost .btn--mono (components.css) + muted rest, accent hover. */
.dga-create-btn {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 8px 16px;
}

.dga-create-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Deck grid ── */
.dga-deck-grid {
    padding: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    overflow-y: auto;
    align-content: start;
}

/* .dga-deck-grid scrollbar is the shared .scroll-thin (main.css). */

/* ── Deck tile ── */
.dga-deck-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 90px;
    opacity: 0;
    animation: revealUp 0.3s ease forwards;
}

.dga-deck-tile.has-banner {
    position: relative;
    overflow: hidden;
}

.dga-tile-banner {
    position: absolute;
    /* Banner occupies the right portion of the tile, leaving clean space
       for the plain style on the left before the gradient begins */
    inset: 0 0 0 28%;
    /* Zoom past the card frame so only the art window shows:
       GA cards have ~6% side borders and the art sits in roughly the
       15%-65% vertical band, so oversize width and aim at the art center */
    background-size: 118% auto;
    background-position: 42% 22%;
    opacity: 1;
    pointer-events: none;
    /* Plain tile on the left, ramping to full-strength art at the right edge */
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18) 35%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 1));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18) 35%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 1));
    transition: -webkit-mask-image 0.2s, mask-image 0.2s;
}

.dga-deck-tile.has-banner:hover .dga-tile-banner {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 1));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 1));
}

.dga-deck-tile.has-banner > :not(.dga-tile-banner) {
    position: relative;
    z-index: 1;
}

.dga-deck-tile:hover {
    border-color: var(--border-focus);
    background: var(--bg-hover);
    transform: translateY(-2px);
}

/* Glyph + Format/Public badges on one line — mirrors .inv-bin-icon-row, which
   holds the ⬡/📦 glyph and the "Default" badge on Inventory bin tiles. */
.dga-tile-icon-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dga-tile-icon {
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0.7;
}

.dga-tile-name {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
}

/* Format / "Public" tile badges use the shared .tag primitive (components.css):
   `<span class="tag tag--accent">` and `<span class="tag tag--success">`. */

.dga-public-field {
    margin-top: 4px;
}

/* .inv-field-group's default align-items: stretch already carries this
   inline-flex track to the field group's full width, matching the Name/
   Format/Description inputs above it — each button then grows to fill its
   even half rather than hugging its own label. See the shared .pill-toggle
   comment (components.css) for the base look. */
.dga-public-toggle .pill-toggle-btn {
    flex: 1;
    text-align: center;
    font-size: 0.78rem;
    padding: 5px 14px;
}

/* Distinguishes same-card tiles in the Set Banner search — it asks for
   every printing (all_prints=1) rather than one random edition, since the
   whole point is picking a specific one. */
.dga-banner-tile-caption {
    margin-top: 6px;
    text-align: center;
}

.dga-banner-tile-name {
    font-size: 0.72rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dga-banner-tile-set {
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dga-tile-desc {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    overflow-wrap: break-word;
    word-break: break-word;
    flex: 1;
    line-height: 1.5;
    min-height: calc(0.68rem * 1.5 * 2);
}

.dga-tile-meta {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* Card count + value badge on one baseline row, pinned to the tile's bottom —
   the row itself carries .inv-bin-meta-row (inventory.css) for the flex/
   space-between/position:relative the value popup anchors against, so this
   only needs the bottom-pin that .dga-tile-meta used to own. */
.dga-tile-meta-row {
    margin-top: auto;
}

/* The value badge reuses Inventory's hover popup, which lifts the hovered
   tile's z-index so the popup clears its neighbours (each deck tile is its
   own stacking context after the revealUp animation's forwards fill — same
   as bin tiles). See showBinValuePopup in inventory.js. */
.dga-deck-tile.inv-bin-tile-popup-active {
    position: relative;
    z-index: 50;
}

.dga-deck-tile.inv-bin-tile-popup-active:hover {
    transform: none;
}

/* ── Create outline tile ── */
.dga-deck-create {
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    min-height: 90px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    opacity: 0;
    animation: revealUp 0.3s ease forwards;
}

.dga-deck-create:hover {
    border-color: var(--border-focus);
    background: var(--bg-hover);
    color: var(--text);
    transform: translateY(-2px);
}

.dga-create-plus {
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 200;
    opacity: 0.5;
}

.dga-create-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════
   DETAIL VIEW
═══════════════════════════════════════ */

/* .dga-detail-header is the shared .detail-header (main.css). */

.dga-detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dga-detail-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.dga-detail-counts {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* "Card Editions" field in the Deck Settings modal — toggling it flips the
   deck's edition_locked flag (app.py), which decides whether adding a card
   asks for a specific printing (Locked) or gets a random one collapsed into
   one tile (Unlocked). Same full-width segmented-control sizing as the
   Visibility pill just below it (.dga-public-toggle) — see the shared
   .pill-toggle comment (components.css) for the base look. */
.dga-edition-lock-toggle .pill-toggle-btn {
    flex: 1;
    text-align: center;
    font-size: 0.78rem;
    padding: 5px 14px;
}

/* Deck Builder toggle — shares .inv-settings-btn (inventory.css) with the ⚙
   button, sitting immediately left of the "+" add-card button. .active is the
   panel-open state (kept in sync by _dgaSyncBuilderToggleBtn), lit with the
   accent so it reads as a pressed toggle rather than a one-shot action. */
.dga-builder-toggle-btn.active {
    border-color: var(--accent);
    color: var(--accent);
}

.dga-builder-toggle-btn.active:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.dga-detail-back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    cursor: pointer;
    width: fit-content;
    transition: color 0.15s;
    letter-spacing: 0.04em;
}

.dga-detail-back:hover {
    color: var(--accent);
}

.dga-back-arrow {
    transition: transform 0.15s;
}

.dga-detail-back:hover .dga-back-arrow {
    transform: translateX(-3px);
}

.dga-detail-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dga-detail-name {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.dga-detail-name-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dga-detail-name-editable {
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s, color 0.15s;
    padding-bottom: 1px;
}

.dga-detail-name-editable:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

.dga-detail-name-editable.editing {
    cursor: text;
    color: var(--accent);
    border-bottom-color: var(--accent);
    outline: none;
    white-space: nowrap;
}

.dga-detail-edit-icon {
    font-size: 0.62rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, opacity 0.15s;
    display: inline-block;
    transform: scaleX(-1);
    vertical-align: middle;
}

.dga-detail-edit-icon:hover {
    color: var(--accent);
}

.dga-detail-name-editable.editing ~ .dga-detail-edit-icon,
.dga-detail-meta-editable.editing ~ .dga-detail-edit-icon {
    opacity: 0;
}

.dga-detail-format {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent);
    letter-spacing: 0.05em;
}

.dga-detail-meta-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.dga-detail-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.dga-detail-meta-editable {
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s, color 0.15s;
    padding-bottom: 1px;
}

.dga-detail-meta-editable:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

.dga-detail-meta-editable.editing {
    cursor: text;
    color: var(--accent);
    border-bottom-color: var(--accent);
    outline: none;
}

.dga-detail-meta-placeholder {
    opacity: 0.55;
    font-style: italic;
}

/* ── Card grid ── */
.dga-card-grid-wrap {
    flex: 1;
    overflow-y: auto;
}

/* .dga-card-grid-wrap scrollbar is the shared .scroll-thin (main.css). */

.dga-card-grid {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.dga-sections-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-align: center;
}

.dga-section-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dga-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 255px);
    gap: 14px;
    align-content: start;
    justify-content: center;
}

/* Not a shared .btn — this class is applied to both a <button> and the <input>
   it swaps to (dgaBuildAddSectionButton), so it carries its own full styling. */
.dga-add-section-btn {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    margin-top: 8px;
}

.dga-add-section-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.dga-loading {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 24px 0;
    grid-column: 1/-1;
}

/* ── Card tile — mirrors .inv-card-tile (image, rarity badge, qty badge, hover overlay) ── */
.dga-card-tile {
    position: relative;
    opacity: 0;
    animation: revealUp 0.25s ease forwards;
}

.dga-card-tile.animated {
    animation: none;
    opacity: 1;
}

.dga-card-tile img {
    width: 100%;
    display: block;
}

/* Wrap's overflow:hidden/border-radius and the hover-zoom/dim behavior
   both come from the shared .inv-card-tile / .tile-hoverable/.tile-zoom
   rules (tiles.css, inventory.css) — this tile carries both classes
   (buildDeckCardTile in decks_ga.js), so no separate copy is needed here. */

/* Card tiles reuse the shared .inv-qty-badge / .inv-card-tile-overlay /
   .inv-card-tile-info (inventory.css) — buildDeckCardTile emits those class
   names directly. */

.dga-card-tile .edition-rarity-badge {
    bottom: 10px;
    left: 10px;
    font-size: 0.75rem;
    padding: 3px 8px;
}

.dga-card-tile .edition-rarity-badge.has-foil-suffix {
    padding-right: 4px;
}

/* Foil/curio indicator — shown only when the deck is Edition Locked (one
   tile per printing, buildDeckCardTile / buildPublicCardTile). Same box
   chrome as Inventory's rarity badge (.edition-rarity-badge, cards.css /
   .inv-card-tile override, inventory.css) — dark blurred pill, bottom-left
   — but just the emoji, no rarity letter, since a locked deck tile isn't
   about rarity. */
.dga-foil-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.6);
}

.dga-card-tile:hover .inv-qty-badge,
.dga-card-tile:hover .edition-rarity-badge,
.dga-card-tile:hover .dga-foil-badge {
    opacity: 0;
    transition: opacity 0.15s;
}

.dga-card-tile:hover .inv-card-tile-overlay {
    opacity: 1;
}

.dga-card-tile-name {
    font-size: 0.72rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 1.3;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dga-card-tile-foil {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
}

/* ── Format dropdown — mirrors .cards-filter-btn / .set-dropdown-btn rotating-arrow style ── */
.dga-fmt-dropdown-wrap {
    position: relative;
}

/* Shared .btn .btn--ghost .btn--mono (components.css). */
.dga-fmt-dropdown-btn {
    width: 100%;
    font-size: 0.78rem;
    background: var(--bg);
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dga-fmt-dropdown-btn:hover,
.dga-fmt-dropdown-btn.open {
    border-color: var(--border-focus);
}

/* Shared .dropdown-arrow (components.css) + muted colour. */
.dga-fmt-dropdown-arrow {
    color: var(--text-muted);
}

/* Shared .menu (components.css) — full-width under its trigger, scrolls when tall. */
.dga-fmt-dropdown-menu {
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-focus) transparent;
}

.dga-fmt-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.dga-fmt-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--border-focus);
    border-radius: 3px;
}

.dga-fmt-dropdown-option {
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.dga-fmt-dropdown-option:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.dga-fmt-dropdown-option.selected {
    color: var(--accent);
}

/* ═══════════════════════════════════════
   SECTION HEADERS IN CARD GRID
═══════════════════════════════════════ */

.dga-section-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.dga-section-header-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Shared .btn .btn--subtle (components.css). */
.dga-section-action-btn {
    font-size: 0.78rem;
    padding: 2px 6px;
    line-height: 1;
}

.dga-section-action-delete:hover {
    color: var(--error);
}

.dga-section-label-editable {
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s, color 0.15s;
    padding-bottom: 1px;
}

.dga-section-edit-icon {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-left: 0;
    margin-right: 8px;
    cursor: pointer;
    transition: color 0.15s;
    display: inline-block;
    transform: scaleX(-1);
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.dga-section-edit-icon:hover {
    color: var(--accent);
}

.dga-section-label-editable:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

.dga-section-label-editable.editing {
    cursor: text;
    color: var(--accent);
    border-bottom-color: var(--accent);
    outline: none;
    white-space: nowrap;
}

.dga-section-label-editable.editing ~ .dga-section-edit-icon {
    opacity: 0;
}

.dga-section-empty {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 8px 0;
    opacity: 0.6;
}

/* .dga-section-label is the shared .label (main.css). */

.dga-section-count {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════
   ADD CONFIRM STEP
═══════════════════════════════════════ */

.dga-confirm-step {
    display: flex;
    gap: 24px;
    padding: 20px 0 8px;
    align-items: flex-start;
}

.dga-confirm-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ═══════════════════════════════════════
   SECTION MANAGEMENT IN SETTINGS MODAL
═══════════════════════════════════════ */

.dga-section-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.dga-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.dga-section-row-name {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text);
}

/* Shared .btn .btn--subtle (components.css). */
.dga-section-delete-btn {
    font-size: 0.72rem;
    padding: 2px 6px;
}

.dga-section-delete-btn:hover {
    color: var(--error);
}

.dga-section-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Shared .btn .btn--ghost .btn--mono (components.css) + muted rest, accent hover. */
.dga-section-add-btn {
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 9px 14px;
    flex-shrink: 0;
}

.dga-section-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Import / Export ── */
/* Shared .btn .btn--ghost .btn--mono (components.css) + muted rest. */
.dga-ie-btn {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 7px 14px;
}

.dga-ie-btn:hover {
    border-color: var(--border-focus);
    color: var(--text);
}


/* ── Import progress bar ── */
.dga-progress-wrap {
    padding: 10px 0 4px;
}

.dga-progress-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dga-progress-track {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.dga-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.2s ease;
}

/* ── Import footer — progress bar + button side by side ── */
.dga-import-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.dga-import-footer .inv-import-results {
    flex: 1;
    margin-top: 0;
    max-height: none;
}

.dga-import-footer .inv-modal-submit {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ── Card drag & drop ── */

.dga-card-tile {
    cursor: grab;
}

.dga-card-tile.dga-dragging {
    cursor: grabbing;
}

/* Source slot closes while its card rides the cursor */
.dga-card-tile.dga-drag-collapsed {
    display: none;
}

.dga-drop-placeholder {
    border: 2px dashed var(--border-focus);
    border-radius: 14px;
    background: var(--bg-hover);
    opacity: 0.7;
}

/* While dragging, suppress all tile hover effects and overlays */
body.dga-drag-active .dga-card-tile:hover .inv-card-tile-overlay {
    opacity: 0;
    pointer-events: none;
}

body.dga-drag-active .dga-card-tile:hover .card-tile-dim {
    opacity: 0;
}

body.dga-drag-active .dga-card-tile:hover .edition-tile-wrap {
    transform: none;
}

body.dga-drag-active .dga-card-tile:hover .inv-qty-badge,
body.dga-drag-active .dga-card-tile:hover .edition-rarity-badge {
    opacity: 1;
}

/* Qty controls come from inventory.css via the shared inv-card-tile class —
   suppress them during drags too */
body.dga-drag-active .inv-card-tile:hover .inv-card-tile-qty-ctrl {
    opacity: 0;
    pointer-events: none;
}

/* Re-renders triggered by drag reorders skip the tile fan reveal */
.dga-no-anim .dga-card-tile,
.dga-no-anim .inv-card-add-tile {
    animation: none;
    opacity: 1;
}
/* ═══════════════════════════════════════
   COLLABORATIVE SHARING — role gating on a shared deck
   (share dialog + "Shared with me" tiles reuse .inv-* rules from inventory.css)
   ═══════════════════════════════════════ */
.dga-detail-view.dga-role-viewer .inv-detail-add-btn,
/* #dga-builder-toggle-btn stays — the Deck Builder compares the deck against
   the *caller's* own inventory (buildability needs only viewer), so it's
   useful on a deck shared read-only, same as it's already right-clickable. */
.dga-detail-view.dga-role-viewer .inv-settings-btn:not(#dga-share-btn):not(#dga-builder-toggle-btn),
.dga-detail-view.dga-role-viewer .dga-add-section-btn,
.dga-detail-view.dga-role-viewer .dga-edition-lock-toggle,
.dga-detail-view.dga-role-viewer .inv-card-tile-qty-ctrl,
.dga-detail-view.dga-role-viewer .dga-detail-edit-icon {
    display: none !important;
}
.dga-detail-view.dga-role-viewer .dga-detail-name-editable,
.dga-detail-view.dga-role-viewer .dga-detail-desc-editable,
.dga-detail-view.dga-role-viewer .dga-detail-meta-editable {
    pointer-events: none;
}

/* ═══════════════════════════════════════
   DECK BUILDER PANEL
   Left-side, non-overlaying (see #card-drawer for the overlaying one). While
   open, #dga-page flips to flex-row and the panel takes a fixed width, so the
   detail view (flex:1) shrinks beside it instead of being covered.
   ═══════════════════════════════════════ */
.dga-page.dga-builder-open {
    flex-direction: row;
}

/* The detail view is a column-flex child of the now-row .dga-page; without
   min-width:0 its default min-width:auto keeps it at content width and the
   deck grid gets clipped by .dga-page's overflow:hidden instead of reflowing
   to fewer columns. Same fix down the nested flex chain to the scroll wrap. */
.dga-page.dga-builder-open .dga-detail-view,
.dga-page.dga-builder-open .dga-cards-body,
.dga-page.dga-builder-open .dga-card-grid-wrap {
    min-width: 0;
}

.dga-builder {
    /* Open width — the header/body min-width and the JS transition comment
       all key off this one value. */
    --dga-builder-w: 460px;
    flex-shrink: 0;
    width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    transition: width 0.25s ease;
}

.dga-page.dga-builder-open .dga-builder {
    width: var(--dga-builder-w);
}

/* Closing: keep the row layout (and the min-width:0 fixes above) in place while
   the panel width animates back to 0, so the deck grid slides back smoothly.
   The row-mode classes are only dropped once that transition has finished —
   see closeDeckBuilder — otherwise flipping straight to column with the panel
   still at full width reflows the whole page for a frame ("cuts out then returns").*/
.dga-page.dga-builder-open.dga-builder-collapsed .dga-builder {
    width: 0;
}

.dga-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    /* Don't let the header text wrap/clip while the panel animates open. */
    min-width: var(--dga-builder-w);
}

.dga-builder-title {
    display: block;
}

.dga-builder-close {
    --btn-size: 28px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.dga-builder-close:hover {
    color: var(--error);
}

.dga-builder-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px 24px;
    min-width: var(--dga-builder-w);
}

.dga-builder-loading,
.dga-builder-empty {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 12px 0;
}

/* Summary bar — buildable uniques + copies short */
.dga-builder-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.dga-builder-summary-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text);
}

.dga-builder-summary-line--sub {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.dga-builder-summary-val {
    font-weight: 500;
}

.dga-builder-summary-val--ok {
    color: var(--success);
}

.dga-builder-summary-val--short {
    color: var(--warning);
}

/* Sets / List tab switcher — underline tabs, same shape as the import/export
   modal's (.inv-import-export-tab), sized down for the panel. */
.dga-builder-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}

.dga-builder-tab {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 7px 12px;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.dga-builder-tab:hover {
    color: var(--text);
}

.dga-builder-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Per-section group */
.dga-builder-section {
    margin-bottom: 18px;
}

.dga-builder-section-label {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    display: block;
}

/* Per-section list row — a compact owned/needed line per deck card. Clicking
   it scrolls/flashes that card's tile in the deck grid. The "how short am I"
   visual read lives on the deck grid itself now (see the .dga-builder-open
   overlay rules further down). */
.dga-builder-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: background 0.15s;
}

.dga-builder-row:hover {
    background: var(--bg-hover);
}

/* Three states: --ok have all (green), --part have some but not enough
   (yellow), --none have zero (red). */
.dga-builder-row--ok {
    border-left-color: var(--success);
}

.dga-builder-row--part {
    border-left-color: var(--warning);
}

.dga-builder-row--none {
    border-left-color: var(--error);
}

.dga-builder-row-name {
    font-size: 0.8rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dga-builder-row-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.dga-builder-row--ok .dga-builder-row-count {
    color: var(--success);
}

.dga-builder-row--part .dga-builder-row-count {
    color: var(--warning);
}

.dga-builder-row--none .dga-builder-row-count {
    color: var(--error);
}

.dga-builder-row-short-badge {
    --badge-c: var(--warning);   /* --part; --none rows override below */
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--badge-c);
    border: 1px solid color-mix(in srgb, var(--badge-c) 45%, transparent);
    background: color-mix(in srgb, var(--badge-c) 10%, transparent);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
}

.dga-builder-row--none .dga-builder-row-short-badge {
    --badge-c: var(--error);
}

/* ── Deck-grid buildability overlays ──
   While the Deck Builder is open, every deck tile carries a status box
   (dgaApplyDeckOverlays fills it): red −N when the deck needs more copies than
   you own, green +N / ✓ when it's covered. That box is the ONLY thing that
   differs between "have it" and "don't" — no per-status dimming, and the normal
   card hover (zoom + .card-tile-dim) is left untouched for every tile. The
   per-tile qty stepper is hidden so the deck can't be re-quantified here. */
.dga-page.dga-builder-open .dga-card-tile .inv-card-tile-qty-ctrl {
    display: none !important;
}

/* The indicator layer just holds the box — no full-tile scrim. It fades in on
   the builder's first paint and out on close (dgaApplyDeckOverlays /
   dgaClearDeckOverlays toggle .dga-overlay-armed). */
.dga-page.dga-builder-open .dga-card-tile .inv-tile-qty-indicator {
    opacity: 1;
    background: transparent;
    transition: opacity 0.22s ease;
}

.dga-page.dga-builder-open .dga-card-tile .inv-tile-qty-indicator.dga-overlay-armed {
    opacity: 0;
}

/* Solid dark chip so the glyph reads the same on any card art. Three colours:
   green = have all (indicator-add), yellow = have some but not enough
   (dga-indicator-partial), red = have zero (indicator-sub, lifted toward the
   green's luminance since the Cards palette's red is inherently darker).
   Scoped to the builder so Cards/Inventory edit mode keep the base palette. */
.dga-page.dga-builder-open .dga-card-tile .inv-tile-qty-indicator-box {
    background: rgba(0, 0, 0, 0.55);
}

.dga-page.dga-builder-open .dga-card-tile .inv-tile-qty-indicator-box.indicator-sub {
    color: rgba(255, 122, 112, 1);
    border-color: rgba(255, 122, 112, 0.8);
}

.dga-page.dga-builder-open .dga-card-tile .inv-tile-qty-indicator-box.dga-indicator-partial {
    color: rgba(245, 200, 100, 1);
    border-color: rgba(245, 200, 100, 0.8);
}

/* "Where to find the rest" — every set family that prints one of the deck's
   still-missing cards, biggest first, each a header + a thumbnail grid of the
   cards it covers. Sits between the summary and the per-section lists. */
.dga-builder-sets {
    margin-bottom: 18px;
}

.dga-builder-sets-lead {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 6px 0 12px;
}

.dga-builder-sets-lead strong {
    color: var(--accent);
    font-weight: 600;
}

.dga-builder-set-group {
    margin-bottom: 14px;
    padding-left: 8px;
    border-left: 2px solid var(--border);
    transition: margin-bottom 0.2s ease;
}

/* Collapsed — tighten the row (the caret + this margin transition together;
   the thumbnail grid's height is wiped by animateHeightWipe in the click
   handler). Single-card sets start collapsed — see dgaRenderBuilder. */
.dga-builder-set-group.is-collapsed {
    margin-bottom: 6px;
}

/* Grid visibility is owned by the collapse animation, not .is-collapsed —
   the class only drives the caret + row spacing so the wipe can measure the
   grid before it's hidden. */
.dga-builder-set-group-grid.dga-grid-hidden {
    display: none;
}

/* The greatest-common set — accent-lined and its header lit. */
.dga-builder-set-group--top {
    border-left-color: var(--accent);
}

.dga-builder-set-group-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0 8px;
    cursor: pointer;
}

.dga-builder-set-group.is-collapsed .dga-builder-set-group-head {
    padding-bottom: 2px;
}

.dga-builder-set-group-caret {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1;
    color: var(--text-muted);
    transform: rotate(90deg);   /* expanded → points down */
    transition: transform 0.15s;
    flex-shrink: 0;
}

.dga-builder-set-group.is-collapsed .dga-builder-set-group-caret {
    transform: rotate(0deg);    /* collapsed → points right */
}

.dga-builder-set-group-head:hover .dga-builder-set-group-caret {
    color: var(--text);
}

.dga-builder-set-group-name {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dga-builder-set-group-head:hover .dga-builder-set-group-name {
    color: var(--accent);
}

.dga-builder-set-group--top .dga-builder-set-group-name {
    color: var(--accent);
}

.dga-builder-set-group-count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: auto;
    flex-shrink: 0;
}

.dga-builder-set-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
}

.dga-builder-thumb {
    position: relative;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.12s ease;
}

.dga-builder-thumb:hover {
    transform: translateY(-2px);
}

.dga-builder-thumb .edition-tile-wrap {
    position: relative;
    aspect-ratio: 5 / 7;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
}

.dga-builder-thumb:hover .edition-tile-wrap {
    border-color: var(--accent);
}

/* Spinner-to-image crossfade, same shape as .inv-card-tile's (inventory.css) —
   revealTileImage (tiles.js) adds .tile-img-loaded once the image is ready. */
.dga-builder-thumb .edition-tile-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dga-builder-thumb .edition-tile-wrap img.tile-img-loaded {
    opacity: 1;
}

.dga-builder-thumb-badge {
    position: absolute;
    right: 3px;
    bottom: 3px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
    background: color-mix(in srgb, var(--warning) 85%, black);
    border-radius: 3px;
    padding: 2px 4px;
}

/* Brief flash when a builder row is clicked and its deck tile scrolls into view */
@keyframes dgaBuilderTileFlash {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    30% { box-shadow: 0 0 0 3px var(--accent); }
}

.dga-builder-tile-flash {
    animation: dgaBuilderTileFlash 1s ease;
}

/* Persistent outline for the deck tile currently selected from the Deck
   Builder panel (a list row, a Sets thumbnail, or a set-group header) — stays
   until a different card is selected or the builder closes/exits
   (dgaClearDeckOverlays). border-radius matches .edition-tile-wrap's (tiles.css)
   so the ring hugs the card image rather than a squared-off box. */
.dga-builder-tile-selected {
    border-radius: 14px;
    box-shadow: 0 0 0 3px var(--accent);
}