:root {
    --color-success: #2ecc71;
    --color-danger: #e74c3c;
    --color-warning: #f39c12;
    --color-gold: #ffd700;
}



/* PAGE-SPECIFIC MAIN STYLE OVERRIDES ABOVE */

.justificationContainer {
    padding: var(--spacing-base);
    margin-top: var(--spacing-base);
    background-color: var(--dc-layer-raised);
    border-radius: var(--dc-radius-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--dc-color-text);
    width: 100%;
    max-width: 800px;
}

#moreDeckActionsContainer .dc-context-menu {
    left: auto;
    right: 0;
    transform-origin: top right;
}

.card-viewer-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0;
    overflow: visible;
}

.card-peek {
    position: absolute;
    top: 50%;
    width: 220px;
    max-width: 32vw;
    height: 82%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 1;
    pointer-events: none;
    border-radius: var(--dc-radius-card);
    overflow: hidden;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
    z-index: 1;
    border: 1px solid var(--dc-border);
}

.card-peek.card-peek-prev {
    left: 0;
    transform: translate(-115%, -50%);
    background-position: right center;
    border-radius: var(--dc-radius-card);
    filter: brightness(0.5);
}

.card-peek.card-peek-next {
    right: 0;
    transform: translate(115%, -50%);
    background-position: left center;
    border-radius: var(--dc-radius-card);
    filter: brightness(0.5);
}

.card-peek.hidden {
    opacity: 0;
}

@media (min-width: 768px) {
    .card-peek {
        width: 300px;
        max-width: 28vw;
        height: auto;
        aspect-ratio: 63 / 88;
        background-size: contain;
        background-position: center;
        border-radius: var(--dc-radius-card);
        overflow: hidden;
    }

    .card-peek.card-peek-prev {
        transform: translate(-150%, -50%);
    }

    .card-peek.card-peek-next {
        transform: translate(150%, -50%);
    }
}


.card-viewer-counter {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dc-modal-options {
    display: flex;
    align-items: center;
    gap: var(--spacing-base);
    cursor: pointer;
    color: var(--dc-color-text);
}

@media (max-width: 640px) {
    .card-viewer-track {
        gap: 0.5rem;
        padding: 0;
    }

    .card-viewer-nav {
        width: 22px;
        height: 22px;
    }

    .card-viewer-nav svg {
        width: 16px;
        height: 16px;
    }
}

/* ===== SECTIONS WRAPPER ===== */
.dc-sections-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
}

.dc-list-grid-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
}

@media (min-width: 640px) {
    .dc-list-grid-wrapper {
        flex-direction: row;
        align-items: flex-start;
    }
}

.dc-list-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
}

.dc-stacked-grid-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.dc-stacked-column {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
}

.grid-view .dc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.list-view .dc-type-section {
    margin-bottom: 0;
}

/* ===== RESPONSIVE ADJUSTMENTS  ===== */
@media (max-width: 767px) {
    .grid-view .dc-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* ===== HEADER SECTION ===== */
.dc-header-section {
    display: flex;
    flex-direction: column;
}

.dc-header-stack {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 2rem;
    width: 100%;
}

@media (max-width: 768px) {
    .dc-header-stack {
        gap: 2rem;
    }
}

/* Title input */
.dc-input-container.dc-large {
    flex-grow: 1;
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 0 0 var(--spacing-xxs);
    display: flex;
    align-self: stretch;
    align-items: stretch;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.dc-input-container.dc-large:hover,
.dc-input-container.dc-large:focus-within {
    border-bottom-color: var(--dc-border-hover);
}

.dc-input.dc-title-input {
    font-size: 1.6875rem;
    line-height: 1;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    flex: 1;
    width: 100%;
    min-width: 0;
    height: auto;
}

.dc-input.dc-title-input::placeholder {
    font-style: normal;
}

@media (min-width: 640px) {
    .dc-input.dc-title-input {
        font-size: 3rem;
    }
}

@media (min-width: 768px) {
    .dc-input.dc-title-input {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .dc-input.dc-title-input {
        font-size: 4.5rem;
    }
}

/* Checkbox styling */
.dc-input-label.dc-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.dc-input-label.dc-checkbox input[type="checkbox"] {
    margin-right: var(--spacing-xs);
    accent-color: var(--dc-color-accent);
    width: 12px;
    height: 12px;
}

/* ===== DECKBUILDING GUIDE (next-action tab docked on the deck list panel) ===== */
.dc-progress-dock {
    width: 100%;
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    --dc-progress-state-color: var(--dc-color-accent-hover);
}

.dc-progress-tab {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm);
    background: var(--dc-layer-raised);
    border: 1px solid var(--dc-border);
    border-bottom: none;
    border-top-left-radius: var(--dc-radius-1);
    border-top-right-radius: var(--dc-radius-1);
}

.dc-progress-status-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--dc-progress-state-color);
    box-shadow: 0 0 6px var(--dc-progress-state-color);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.dc-progress-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--dc-color-text);
}

/* Guide tip: info icon opening the how-to popover; only meaningful while
   the deck is empty */
.dc-progress-guide-tip {
    display: none;
    align-items: center;
    color: var(--dc-color-text-muted);
    cursor: pointer;
}

.dc-progress-guide-tip:hover,
.dc-progress-guide-tip:focus-visible {
    color: var(--dc-color-text);
}

.dc-progress-guide-tip svg {
    width: 15px;
    height: 15px;
}

.dc-progress-dock.state-initial .dc-progress-guide-tip {
    display: inline-flex;
}

/* Corner fillers: continue the full-width tab downward behind the deck list
   panel's rounded top corners so the tab reads as emerging from behind the
   panel. Masked to the notch outside the panel's corner arc */
.dc-progress-dock::before,
.dc-progress-dock::after {
    content: '';
    position: absolute;
    top: 100%;
    width: var(--dc-radius-1);
    height: var(--dc-radius-1);
    background: var(--dc-layer-raised);
    pointer-events: none;
}

.dc-progress-dock::before {
    left: 0;
    border-left: 1px solid var(--dc-border);
    -webkit-mask: radial-gradient(circle var(--dc-radius-1) at 100% 100%, transparent calc(var(--dc-radius-1) - 1px), #000 var(--dc-radius-1));
    mask: radial-gradient(circle var(--dc-radius-1) at 100% 100%, transparent calc(var(--dc-radius-1) - 1px), #000 var(--dc-radius-1));
}

.dc-progress-dock::after {
    right: 0;
    border-right: 1px solid var(--dc-border);
    -webkit-mask: radial-gradient(circle var(--dc-radius-1) at 0 100%, transparent calc(var(--dc-radius-1) - 1px), #000 var(--dc-radius-1));
    mask: radial-gradient(circle var(--dc-radius-1) at 0 100%, transparent calc(var(--dc-radius-1) - 1px), #000 var(--dc-radius-1));
}

/* Progress Track */
.dc-progress-track {
    position: relative;
    height: 4px;
    background: transparent;
    overflow: visible;
}

.dc-progress-fill {
    position: relative;
    height: 100%;
    display: flex;
    min-width: 0;
    transition: width 0.5s ease;
    border-radius: inherit;
    overflow: visible;
    isolation: isolate;
    background: var(--dc-progress-gradient, linear-gradient(90deg, rgba(138, 145, 154, 0.96) 0%, rgba(205, 209, 216, 0.98) 52%, #ffffff 100%));
    filter: drop-shadow(0 0 4px var(--dc-progress-glow-soft, rgba(255, 255, 255, 0.2))) drop-shadow(0 0 10px var(--dc-progress-glow-strong, rgba(170, 176, 186, 0.35)));
}


.dc-progress-fill-solid {
    height: 100%;
    flex: 0 0 auto;
    background: transparent;
    transition: width 0.3s ease;
    position: relative;
    border-radius: inherit;
}

.dc-progress-fill-modified {
    height: 100%;
    flex: 0 0 auto;
    background: var(--dc-progress-mod-gradient, linear-gradient(270deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.64) 100%));
    position: relative;
    display: block;
    border-radius: inherit;
    filter: drop-shadow(0 0 4px var(--dc-progress-mod-glow, rgba(255, 255, 255, 0.24))) drop-shadow(0 0 10px var(--dc-progress-mod-glow, rgba(255, 255, 255, 0.24)));
}

/* Seam track: the dock's instance overlaps the deck list panel's top border
   so tab + track read as one attached edge. Inset by the panel's corner
   radius on both sides so the bar only spans the straight part of the edge.
   Lighter background than the shared track base so the edge stays visible
   at 0% fill */
.dc-progress-dock .dc-progress-track {
    align-self: stretch;
    height: 3px;
    margin: 0 var(--dc-radius-1) -3px;
    z-index: 1;
    background: transparent;
}

/* Progress Action — standard dc-button pinned to the tab's right edge,
   icon tinted with the current guide state color */
.dc-progress-action-btn {
    display: none;
    margin-left: auto;
}

.dc-progress-action-btn svg {
    color: var(--dc-progress-state-color);
}

.dc-progress-action-text {
    font-family: var(--font-primary);
    line-height: 1;
}

/* Ready state: solid white button, no accent tint on the icon */
.dc-progress-dock.state-ready .dc-progress-action-btn svg {
    color: inherit;
}

/* Show action for clickable states */
.dc-progress-dock.state-ready .dc-progress-action-btn,
.dc-progress-dock.state-modified .dc-progress-action-btn,
.dc-progress-dock.state-outdated .dc-progress-action-btn,
.dc-progress-dock.state-overweight .dc-progress-action-btn,
.dc-progress-dock.state-complete .dc-progress-action-btn {
    display: inline-flex;
}

/* Hide action during analysis (state-analyzing is added on top of the
   previous state class, so it must win) */
.dc-progress-dock.state-analyzing .dc-progress-action-btn {
    display: none !important;
}

/* State colors */
.dc-progress-dock.state-building {
    --dc-progress-state-color: #ffffff;
}

.dc-progress-dock.state-ready,
.dc-progress-dock.state-analyzing {
    --dc-progress-state-color: var(--dc-color-accent);
}

.dc-progress-dock.state-complete {
    --dc-progress-state-color: var(--color-success);
}

.dc-progress-dock.state-modified,
.dc-progress-dock.state-outdated {
    --dc-progress-state-color: var(--color-warning);
}

.dc-progress-dock.state-overweight {
    --dc-progress-state-color: var(--color-danger);
}

/* Analyzing: track glow + pulsing dot. Declared after the other state colors
   because state-analyzing is added on top of the previous state class */
.dc-progress-dock.state-analyzing {
    --dc-progress-state-color: var(--dc-color-accent);
    --dc-progress-glow-soft: rgba(94, 251, 120, 0.34);
    --dc-progress-glow-strong: rgba(0, 255, 178, 0.58);
}

@keyframes dc-progress-dot-pulse {
    50% { opacity: 0.35; }
}

.dc-progress-dock.state-analyzing .dc-progress-status-dot {
    animation: dc-progress-dot-pulse 1.6s ease-in-out infinite;
}



/* ===== TOOLBAR ===== */

/* Mobile: 2x2 grid. Row 1 = Smart Tools + More, row 2 = Collection + Tagging.
   The actions wrapper uses display: contents so its children join the grid. */
@media (max-width: 767px) {
    #decklistActionsToolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #decklistActionsToolbar .dc-toolbar-actions {
        display: contents;
    }

    #decklistActionsToolbar .dc-button,
    #decklistActionsToolbar .dc-dropdown-container {
        width: 100%;
        min-width: 0;
    }

    #aiAssistantBtn { order: 1; }
    #moreDeckActionsContainer { order: 2; }
    #collectionToolsContainer { order: 3; }
    #taggingToolsBtn { order: 4; }
}

/* ===== AI MODE CONTROLS ===== */
#aiAssistantBtn {
    min-width: 140px;
}

.dc-ai-controls-panel {
    transition: opacity 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.dc-ai-card-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--dc-layer-float);
    border: 1px solid var(--dc-border);
    padding: 2px 8px;
    border-radius: var(--dc-radius-pill);
    font-size: 9px;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
}

.dc-ai-focused-view {
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

/* Back link above the AI config panels. Styled by the global .dc-action-link;
   the icon sits on the left, so it slides left on hover. */
.dc-ai-breadcrumb {
    margin-bottom: var(--spacing-base);
}

.dc-ai-breadcrumb:hover .dc-action-link__icon {
    transform: translateX(-2px);
}

.dc-ai-config-panel {
    background-color: var(--dc-layer-raised);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    padding: var(--spacing-base);
}

#trimFocusConfig,
#powerFocusConfig,
#manaFocusConfig {
    padding: var(--spacing-sm);
}

/* Target Bracket Selector */
.dc-bracket-buttons {
    display: flex;
    gap: var(--spacing-xs);
}

.dc-bracket-btn {
    flex: 1;
    padding: 8px 0;
    position: relative;
    background: var(--dc-layer-raised);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    color: var(--dc-color-text-muted);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.dc-bracket-btn:hover {
    background: var(--dc-layer-raised-hover);
    border-color: var(--dc-border-hover);
    color: var(--dc-color-text);
}

.dc-bracket-btn:active {
    transform: scale(0.95);
}

.dc-bracket-btn.active {
    background: rgba(var(--bracket-glow), 0.08);
    border: none;
    box-shadow: 0 0 14px rgba(var(--bracket-glow), 0.12), 0 0 28px rgba(var(--bracket-glow), 0.06);
    -webkit-text-fill-color: transparent;
}

.dc-bracket-btn.active::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--bracket-gl), var(--bracket-gr));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transform: translateZ(0);
}

.dc-bracket-btn .dc-bracket-num {
    position: relative;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-primary);
    background: linear-gradient(135deg, var(--bracket-gl, #fff), var(--bracket-gr, #fff));
    -webkit-background-clip: text;
    background-clip: text;
}

/* Advanced options */
.dc-checkbox-option span {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-xxs);
    font-family: var(--font-primary);
}

.dc-collection-option {
    align-items: flex-start;
}

.dc-collection-option.disabled {
    opacity: 0.85;
}

.dc-import-dont-overwrite-toggle {
    margin-right: auto;
}

.dc-budget-input {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: var(--dc-layer-sunken);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    font-size: 11px;
    transition: opacity 0.2s ease;
}

.dc-budget-input:focus-within {
    border-color: var(--dc-border-focus);
}

.dc-budget-input.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.dc-budget-prefix {
    color: var(--dc-color-text-muted);
}

.dc-budget-input input {
    width: 64px;
    background: transparent;
    border: none;
    color: var(--dc-color-text);
    font-size: 11px;
}

.dc-budget-input input:focus {
    outline: none;
}

/* ===== Smart Tool Panels ===== */

#aiAssistantBtn,
.select-mode[data-mode="smart"] {
    background: var(--smart-accent-bg-soft, rgba(255, 225, 180, 0.12));
    border-color: var(--smart-accent-border-soft, rgba(255, 225, 180, 0.35));
    color: var(--smart-accent-color, #ffe1b4);
}

#aiAssistantBtn:hover:not(:disabled),
#aiAssistantBtn:focus-visible:not(:disabled),
.select-mode[data-mode="smart"]:hover,
.select-mode[data-mode="smart"].is-selected,
.select-mode[data-mode="smart"][aria-pressed="true"] {
    background: var(--smart-accent-bg-hover, rgba(255, 225, 180, 0.2));
    border-color: var(--smart-accent-border-strong, rgba(255, 225, 180, 0.55));
    color: var(--smart-accent-color, #ffe1b4);
}

.select-mode[data-mode="smart"] .select-mode-icon,
#aiAssistantBtn [data-dc-icon="dc-smart"] {
    color: var(--smart-accent-color, #ffe1b4);
}

#viewAnalysisHistoryBtn[data-mode="smart"] .select-mode-title {
    color: var(--smart-accent-color, #ffe1b4);
}

.aiLogBadge {
    background: var(--dc-color-background);
    border-color: var(--smart-accent-color, #ffe1b4);
    color: var(--smart-accent-color, #ffe1b4);
    box-shadow: 0 0 0 2px var(--dc-color-background);
    backdrop-filter: none;
}

.dc-pt-lockable {
    position: relative;
}

.dc-pt-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dc-layer-scrim);
    border-radius: var(--dc-radius-2);
}

.dc-pt-overlay-text {
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    color: var(--dc-color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dc-pt-lockable.locked {
    pointer-events: none;
}

.dc-pt-lockable.locked .dc-pt-overlay {
    display: flex;
}

.dc-pt-lock-tip {
    pointer-events: none;
}

.dc-pt-status-item {
    pointer-events: none;
}

.dc-pt-status-item .dc-pt-status-fail,
.dc-pt-status-item.over-limit .dc-pt-status-pass {
    display: none;
}

.dc-pt-status-item.over-limit .dc-pt-status-fail {
    display: block;
}

/* Pass state: permanently checked appearance */
.dc-pt-status-pass .dc-pt-toggle-circle {
    stroke: var(--dc-color-accent);
    fill: var(--dc-color-accent-subtle);
}

.dc-pt-status-pass .dc-pt-toggle-check {
    stroke: var(--dc-color-accent);
    stroke-dashoffset: 0;
}

/* Fail state */
.dc-pt-status-fail-circle {
    stroke: var(--color-error, #ef4444);
    stroke-width: 1.5;
    fill: rgba(239, 68, 68, 0.1);
}

.dc-pt-status-fail-x {
    stroke: var(--color-error, #ef4444);
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
}

.dc-pt-status-item.over-limit .dc-pt-toggle-label {
    color: var(--color-error, #ef4444);
}

.dc-pt-section-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xxs);
}

.dc-pt-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--spacing-sm);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.dc-pt-options > .dc-pt-section {
    border-left: 1px solid var(--dc-border);
    padding: 0 var(--spacing-xs);
}

.dc-pt-options > .dc-pt-section:first-child {
    border-left: none;
    padding-left: 0;
}

/* Animated circle-check toggles */
.dc-pt-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xxs) 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.dc-pt-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dc-pt-toggle-indicator {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.dc-pt-toggle-indicator svg {
    width: 100%;
    height: 100%;
}

.dc-pt-toggle-circle {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1.5;
    fill: none;
    transition: stroke 0.25s ease, fill 0.25s ease;
}

.dc-pt-toggle-check {
    stroke: transparent;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke 0.15s ease, stroke-dashoffset 0.3s ease;
}

/* Checked state */
.dc-pt-toggle-input:checked ~ .dc-pt-toggle-indicator .dc-pt-toggle-circle {
    stroke: var(--dc-color-accent);
    fill: var(--dc-color-accent-subtle);
}

.dc-pt-toggle-input:checked ~ .dc-pt-toggle-indicator .dc-pt-toggle-check {
    stroke: var(--dc-color-accent);
    stroke-dashoffset: 0;
}

.dc-pt-toggle-label {
    font-size: var(--font-size-sm);
    font-family: var(--font-primary);
    color: var(--dc-color-text);
    line-height: 1.2;
    transition: color 0.2s ease;
}

.dc-pt-toggle-input:checked ~ .dc-pt-toggle-label {
    color: var(--dc-color-accent);
}

.dc-pt-toggle-input:checked ~ .dc-pt-toggle-label-group .dc-pt-toggle-label {
    color: var(--dc-color-accent);
}

.dc-pt-toggle-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dc-pt-toggle-label-hint {
    color: var(--dc-color-text-muted);
    font-size: var(--font-size-xxs);
    font-weight: 400;
}

/* Disabled state */
.dc-pt-toggle.disabled {
    cursor: not-allowed;
}

/* Budget row: toggle + price input side-by-side */
.dc-pt-budget-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.dc-ai-execute-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-top: var(--spacing-lg);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--dc-color-text);
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    height: 32px;
}

.dc-ai-execute-btn:hover {
    background-color: var(--dc-color-text);
    color: var(--dc-color-background);
}

.dc-ai-execute-btn:active {
    transform: translateX(0);
}

.control-buttons {
    flex-wrap: wrap;
}

.control-buttons .dc-button {
    flex: 1 1 0;
    min-width: 0;
}

.control-buttons .dc-bulk-consider-button {
    flex-basis: 100%;
}

.control-buttons .dc-bulk-action-icon {
    width: var(--font-size-md);
    height: var(--font-size-md);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .control-buttons.control-buttons--two,
    .control-buttons.control-buttons--three {
        display: grid;
    }

    .control-buttons.control-buttons--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .control-buttons.control-buttons--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .control-buttons.control-buttons--three .dc-bulk-consider-button {
        flex-basis: auto;
    }
}

/* ===== CONTENT CONTAINER ===== */
/* .content-area uses `contain: layout`, which makes it the containing block
   for the toolbar's position:fixed dropdowns and clips them to its scroll box.
   The deck list therefore has to reserve enough room below the toolbar for the
   tallest of those menus (More Tools) to land inside scrollable content. */
.dc-content-container {
    flex-grow: 1;
    overflow-y: auto;
    overflow-anchor: none;
}

/* The page itself is the builder scroller when the deck panel grows to fit on
   mobile. Scroll pinning in builder-ui.js owns anchoring during card reflows. */
.content-area:has(#dc-deck-builder-view) {
    overflow-anchor: none;
}

/* Build the layout at full size underneath, but expose only the shared loading
   spinner until the critical card images have decoded. */
.dc-content-container.is-render-preparing {
    position: relative;
    isolation: isolate;
}

.dc-content-container.is-render-preparing > * {
    visibility: hidden;
}

.dc-content-container.is-render-preparing::after {
    content: '';
    position: absolute;
    top: 184px;
    left: calc(50% - 16.5px);
    z-index: 21;
    width: 33px;
    height: 33px;
    border: 3px solid rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

/* ===== DECK SECTIONS ===== */
.dc-builder-section {
    margin-top: var(--spacing-3xl);
}

.dc-starting-hand {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-3xl);
}

.dc-starting-hand-empty {
    margin-top: var(--spacing-sm);
}

.dc-starting-hand-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
}

.dc-starting-hand-btn {
    min-width: 140px;
}

/* Draw Odds calculator (deck-odds.js), opened from the Starting Hand section. */
.dc-odds {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.dc-odds-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dc-odds-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.dc-odds-results {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--dc-layer-raised);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
}

.dc-odds [hidden] {
    display: none;
}

.dc-odds-group-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 28px;
}

.dc-odds-group-head [data-odds-clear] {
    margin-left: auto;
}

.dc-odds-checklist {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--dc-layer-sunken);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
}

.dc-odds [data-odds-tags]:empty {
    display: none;
}

/* A card that is already in a different card group. */
.dc-odds-checklist .dc-checkbox-option:has(.dc-checkbox:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Specific hand: one panel per card group. */
.dc-odds-parts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.dc-odds-part {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
}

.dc-odds-part .dc-odds-checklist {
    max-height: 180px;
}

.dc-odds-part-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}

.dc-odds-part-head [data-odds-remove] {
    margin-left: auto;
}

.dc-odds-part-need {
    width: 4.5rem;
    flex: none;
}

.dc-odds [data-odds-add-group] {
    align-self: flex-start;
}

/* Four mode labels: let them wrap on a narrow screen. */
@media (max-width: 480px) {
    .dc-odds .dc-segmented-button {
        white-space: normal;
        padding: 6px 8px;
    }
}

.dc-odds-answer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.dc-odds-hero {
    color: var(--dc-color-text);
    font-size: 3rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.dc-odds-sentence {
    color: var(--dc-color-text);
}

.dc-odds-dist {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--dc-border);
}

.dc-odds-dist-row {
    display: grid;
    grid-template-columns: 2ch 1fr 6ch;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--dc-color-text-muted);
    font-variant-numeric: tabular-nums;
}

.dc-odds-dist-row.is-hit {
    color: var(--dc-color-text);
}

.dc-odds-dist-count,
.dc-odds-dist-value {
    text-align: right;
}

.dc-odds-dist-bar {
    display: block;
    height: 10px;
    min-width: 2px;
    border-radius: 0 4px 4px 0;
    background: var(--dc-border);
}

.dc-odds-dist-row.is-hit .dc-odds-dist-bar {
    background: var(--dc-color-accent);
}

.dc-odds-error {
    color: var(--dc-color-danger-text);
}

/* Mobile: the hand is one edge-to-edge row that scrolls sideways. */
@media (max-width: 767px) {
    .dc-starting-hand .dc-card-grid {
        display: flex;
        gap: var(--spacing-sm);
        overflow-x: auto;
        overflow-y: hidden;
        margin-inline: calc(50% - 50vw);
        padding-inline-start: calc(50vw - 50% + max(var(--spacing-sm), env(safe-area-inset-left)));
        padding-inline-end: calc(50vw - 50% + max(var(--spacing-sm), env(safe-area-inset-right)));
        scroll-padding-inline-start: calc(50vw - 50% + max(var(--spacing-sm), env(safe-area-inset-left)));
        scroll-padding-inline-end: calc(50vw - 50% + max(var(--spacing-sm), env(safe-area-inset-right)));
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .dc-starting-hand .dc-card-grid::-webkit-scrollbar {
        display: none;
    }

    .dc-starting-hand .dc-card-entry-grid {
        flex: 0 0 140px;
        scroll-snap-align: start;
    }
}

.dc-infographics {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-3xl);
}

.dc-infographics-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
}

.dc-mana-curve {
    padding: var(--spacing-sm);
}

.dc-mana-curve-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: var(--spacing-xs);
    text-align: center;
}

.dc-mana-curve-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--dc-color-text);
}

.dc-mana-curve-empty {
    text-align: center;
    padding: var(--spacing-sm);
}

.dc-mana-curve-chart {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(28px, 1fr);
    grid-auto-rows: 1fr;
    align-items: end;
    gap: var(--spacing-xs);
    height: 300px;
    min-height: 140px;
    position: relative;
    padding-left: 28px;
}

.dc-mana-bar {
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    justify-items: center;
    gap: var(--spacing-xxs);
    height: 100%;
}

.dc-mana-bar-track {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.dc-mana-bar-column {
    width: 100%;
    border-radius: var(--dc-radius-3);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgb(255, 255, 255);
    transition: height 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dc-mana-bar-label {
    font-size: var(--font-size-xs);
    color: var(--dc-color-text-muted);
    letter-spacing: var(--letter-spacing-tight);
}

.dc-mana-bar-count {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--dc-color-text);
    line-height: 1;
    pointer-events: none;
}

.dc-mana-curve-guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dc-guide-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--dc-border);
}

.dc-guide-label {
    position: absolute;
    left: 0;
    transform: translate(-60%, -50%);
    font-size: var(--font-size-xxs);
    color: var(--dc-color-text-muted);
}

.dc-color-req {
}

.dc-color-req-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-sm);
}

.dc-color-bars {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.dc-color-bar-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dc-color-overall {
    width: 100%;
    height: 20px;
    border-radius: var(--dc-radius-pill);
    background: var(--dc-layer-sunken);
    border: 1px solid var(--dc-border);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    overflow: hidden;
}

.dc-color-overall-seg {
    height: 100%;
    border-radius: var(--dc-radius-pill);
}

.dc-color-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-sm);
}

.dc-color-card {
    background: var(--dc-layer-raised);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-1);
    padding: var(--spacing-sm);
    display: grid;
    grid-template-rows: auto auto 1fr 1fr;
    gap: var(--spacing-xs);
}

.dc-color-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    color: var(--dc-color-background);
    box-shadow: 0 0 16px 1px currentColor;
    overflow: hidden;
}

.dc-color-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dc-color-name {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--dc-color-text);
    letter-spacing: var(--letter-spacing-tight);
}

.dc-color-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dc-color-row-title {
    font-size: var(--font-size-xs);
    color: var(--dc-color-text-muted);
    letter-spacing: var(--letter-spacing-tight);
}

.dc-color-bar {
    position: relative;
    width: 100%;
    height: 24px;
    background: var(--dc-layer-sunken);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-pill);
    overflow: hidden;
}

.dc-color-row-clickable {
    cursor: pointer;
}

.dc-color-bar-fill {
    height: 100%;
    border-radius: var(--dc-radius-pill);
    transition: width 0.2s ease;
}

.dc-color-bar-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-xs);
    color: var(--dc-color-text);
    font-weight: var(--font-weight-semibold);
    text-shadow: var(--dc-shadow-base);
}

.dc-source-grid-panel {
    max-height: 520px;
    padding: var(--spacing-xs) 0;
}

.dc-source-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-xs);
}

@media (max-width: 640px) {
    .dc-mana-curve-chart {
        grid-auto-columns: minmax(18px, 1fr);
        gap: 4px;
        height: 220px;
        padding-left: 18px;
    }

    .dc-color-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .dc-source-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

/* ===== TYPE SECTIONS ===== */

/* Remove top margin from first section header */
.dc-type-section:first-child .dc-type-header {
    margin-top: 0;
}

.dc-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs);
    font-family: var(--font-primary);
    font-size: 13px;
    color: var(--dc-color-text-muted);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    background-color: var(--dc-layer-raised);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    transition: var(--transition-standard);
}

.dc-type-header:hover {
    background-color: var(--dc-layer-raised-hover);
    border-color: var(--dc-border-hover);
}

.dc-type-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dc-type-label {
    color: var(--dc-color-text);
    font-weight: var(--font-weight-bold);
}

.dc-type-icon {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
}

.dc-type-metadata {
    color: var(--dc-color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-tight);
}

em.dc-type-metadata {
    font-style: italic;
}

.collapse-icon svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-duration-normal);
}

.collapse-icon.collapsed svg {
    transform: rotate(-90deg);
}

.section-header-right {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
}

.section-lock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--dc-radius-3);
    border: 1px solid var(--dc-border);
    color: var(--dc-color-text-muted);
    cursor: pointer;
    transition: var(--transition-standard);
}

.section-lock-btn:hover {
    background: var(--dc-layer-raised);
    color: var(--dc-color-text);
}

.section-lock-btn.locked {
    border-color: var(--dc-color-text);
    color: var(--dc-color-text);
}

.section-lock-btn.partial {
    border-color: var(--dc-border);
    color: var(--dc-color-text);
}

.section-lock-btn svg {
    width: 14px;
    height: 14px;
}

/* ===== CARD ENTRY STYLING ===== */
/* Card quantity input */
.dc-card-qty-input {
    background: transparent;
    border: none;
    color: var(--dc-color-text);
    width: 18px;
    text-align: right;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    padding: 2px;
    margin-left: 1px;
    border-radius: var(--dc-radius-3);
}

.dc-card-qty-input:focus {
    outline: 1px solid var(--dc-color-text);
}

/* Card name */
.dc-card-name-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
    line-height: 16px;
    font-weight: var(--font-weight-base);
    flex-grow: 1;
    align-self: stretch;
    min-width: 0;
    cursor: default;
    color: var(--dc-color-text);
}

.dc-card-name-list:hover {
    color: #fff;
}

.dc-card-set-info {
    display: none;
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-xxs);
    letter-spacing: var(--letter-spacing-tight);
    opacity: var(--opacity-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.show-set-info .dc-card-set-info {
    display: inline;
}

.dc-foil-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff63d8 0%, #54d7ff 38%, #f7d774 72%, #9f7cff 100%);
    box-shadow: 0 0 2px rgb(255 255 255 / 60%), 0 0 4px rgb(0 161 255 / 80%), 0 0 5px rgb(16 255 0 / 80%);
    flex-shrink: 0;
}

.dc-foil-dot--legend {
    width: 7px;
    height: 7px;
}

/* Card mana */
.dc-card-mana {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    gap: 2px;
    align-items: center;
    width: max-content;
    min-width: max-content;
    white-space: nowrap;
}

.dc-card-mana img {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

.dc-special-color-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--dc-border);
    border-radius: 50%;
    background: var(--dc-layer-raised);
    color: var(--dc-color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.dc-special-color-btn:hover,
.dc-special-color-btn:focus-visible {
    border-color: var(--dc-border-hover);
    background: var(--dc-layer-raised-hover);
    outline: none;
}

.dc-special-color-btn img {
    width: 14px;
    height: 14px;
}

.dc-special-color-menu-pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.dc-special-color-menu-pip img {
    width: 16px;
    height: 16px;
}

.dc-special-color-menu-pip.active {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 50%;
}

/* Card price */
.dc-card-price {
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-tight);
    min-width: 50px;
    text-align: right;
    color: var(--dc-color-text-muted);
}

/* Decklist row controls: 50% by default, full on row hover */
.card-entry-list .dc-card-mana,
.card-entry-list .dc-card-price,
.card-entry-list .dc-card-actions {
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.card-entry-list:hover .dc-card-mana,
.card-entry-list:hover .dc-card-price,
.card-entry-list:hover .dc-card-actions {
    opacity: 1;
}

/* Row-level opacity is authoritative — defeat per-button opacity from webapp.compiled.css. */
.card-entry-list .dc-card-action,
.card-entry-list .dc-card-action:hover,
.card-entry-list .dc-card-action:focus-visible {
    opacity: 1;
}

.dc-card-action.collection-track svg,
.dc-menu-collection-icon.collection-track svg {
    width: 18px;
    height: 18px;
}

.dc-card-action.collection-track,
.dc-menu-collection-icon.collection-track {
    color: rgba(255, 255, 255, 0.33);
}

.dc-card-action.collection-track.collection-state-missing,
.dc-menu-collection-icon.collection-track.collection-state-missing {
    color: var(--dc-color-text);
}

.dc-card-action.collection-track.collection-state-alternate,
.dc-menu-collection-icon.collection-track.collection-state-alternate {
    color: var(--dc-color-text-subtle)
}

.dc-card-action.collection-track.collection-state-exact,
.dc-menu-collection-icon.collection-track.collection-state-exact {
    color: var(--accent-emerald-tr);
}

.dc-card-action.collection-track.collection-state-insufficient,
.dc-menu-collection-icon.collection-track.collection-state-insufficient {
    color: rgba(255, 213, 85, 0.5);
}

/* Proxy-only ownership - color overrides other states */
.dc-card-action.collection-track.collection-state-proxy,
.dc-menu-collection-icon.collection-track.collection-state-proxy {
    color: rgba(193, 116, 255, 0.5);
}

.dc-card-action.locked {
    color: var(--dc-color-text);
    background: none;
    filter: none;
}

.dc-card-action[data-action="toggle-pet"] svg,
.dc-card-action[data-action="toggle-pet"]:hover svg {
    filter: none;
}

/* Card Entry Styling (List View) */
.dc-cards-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-entry-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-xxs);
    padding: 6px 0px;
    border-radius: var(--dc-radius-2);
    transition: background-color 0.15s;
}

/* Builder rows stack a tag-chip row beneath the main info row. Scoped to the
   builder root so it beats the global `.card-entry-list` in deckview.css, which
   loads after builder.css and otherwise forces a single centered flex row. */
#dc-deck-builder-view .card-entry-list {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}

#dc-deck-builder-view .dc-card-list-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-xxs);
}

.card-entry-list-divider {
    height: 1px;
    background: var(--dc-border);
    margin: 0px 6px;
}

.card-entry-list:hover {
    background-color: var(--dc-layer-raised);
}

.invalid-color,
.invalid-zone {
    background: rgba(170, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.5);
}

.suggested-cut,
.suggested-cut:hover,
.suggested-add,
.suggested-add:hover {
    background: none;
}

.card-entry-list.suggested-add .dc-card-name-list {
    color: var(--accent-emerald);
}

.card-entry-list.suggested-cut .dc-card-name-list {
    color: var(--dc-color-danger);
    text-decoration: line-through;
}

.dc-shortcut-intro {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--dc-color-text);
}

.dc-shortcut-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.dc-shortcut-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-sm);
    padding: var(--spacing-xxs) 0;
    flex-wrap: wrap;
}

.dc-shortcut-combo {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--accent-emerald);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    flex: 0 0 auto;
}

.dc-shortcut-desc {
    font-size: var(--font-size-sm);
    color: var(--dc-color-text);
    text-align: left;
    flex: 1 1 220px;
}

.accept-btn, .reject-btn, .consider-btn {
    background: none;
    border: none;
    padding: 3px 6px;
    cursor: pointer;
    font-size: 14px;
    border-radius: var(--dc-radius-3);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.accept-btn { color: var(--color-success); }
.accept-btn:hover { background-color: rgba(46, 204, 113, 0.2); }

.consider-btn { color: #facc15; }
.consider-btn:hover { background-color: rgba(250, 204, 21, 0.2); }

.reject-btn { color: var(--color-danger); }
.reject-btn:hover { background-color: rgba(231, 76, 60, 0.2); }

/* SUGGESTION LEGEND GRID */
.suggestion-legend {
    margin-top: var(--spacing-base);
    text-align: center;
    opacity: 75%;
}

.suggestion-legend-grid {
    display: inline-grid;
    align-items: stretch;
    gap: 1px;
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    overflow: hidden;
    width: 100%;
}

.suggestion-legend-grid--trim {
    grid-template-columns: auto auto auto;
}

.suggestion-legend-grid--full {
    grid-template-columns: auto auto auto auto;
}

.suggestion-legend-grid > span {
    padding: var(--spacing-xxs) var(--spacing-sm);
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-xxs);
    background-color: var(--dc-layer-raised);
    display: flex;
    align-items: center;
    justify-content: center;
}

.suggestion-legend-icon {
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
}

.suggestion-legend-icon--accept { color: var(--color-success); }
.suggestion-legend-icon--consider { color: #facc15; }
.suggestion-legend-icon--reject { color: var(--color-danger); }

.suggestion-legend-header {
    font-weight: bold;
    text-align: right;
}

.suggestion-legend-header--adds { color: var(--color-success); }
.suggestion-legend-header--cuts { color: var(--color-danger); }

/* GRID VIEW CLASSES */
.dc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-card-grid-sm);
}

.dc-card-entry-grid {
    position: relative;
    border-radius: var(--dc-radius-card);
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
}

/* STACKED VIEW
   Every card remains a complete, interactive grid tile. Negative vertical
   margins expose a title-sized strip. Hover/focus opens one tracked reveal
   window with transforms, while matching stack padding keeps later content
   in normal flow and prevents clipping. */
.dc-card-stack {
    --dc-stack-peek: 42px;
    --dc-stack-reveal-space: calc(140% - var(--dc-stack-peek));
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 0;
    isolation: isolate;
    transition: padding-bottom 220ms cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 767px) {
    .dc-card-stack {
        --dc-stack-peek: 55px;
    }

    /* Mobile browsers can leave negatively-overlapped cards skipped when
       content-visibility:auto was calculated before switching into Stacked
       View. Keep the optimization for list/grid, but make stacked sections
       and their cards participate in the initial mobile layout immediately. */
    .stacked-view .dc-type-section,
    .stacked-view .dc-card-entry-stacked {
        content-visibility: visible;
    }

    /* The builder can retain desktop-width masonry wrappers while its mobile
       panel is settling. Flatten those wrappers so mobile has one visual
       section column even if an earlier render produced several columns. */
    .stacked-view .dc-stacked-grid-wrapper {
        flex-direction: column;
    }

    .stacked-view .dc-stacked-column {
        display: contents;
    }
}

.dc-card-stack .dc-card-entry-stacked {
    flex: 0 0 auto;
    width: 100%;
    z-index: 0;
    isolation: isolate;
    margin-bottom: calc(-140% + var(--dc-stack-peek));
    transform: none;
    transition:
        transform 220ms cubic-bezier(0.65, 0, 0.35, 1),
        box-shadow 150ms ease,
        outline-color 150ms ease;
}

/* A view change is one atomic layout operation. Suppress the normal hover and
   reveal transitions for the two settling frames so the browser does not
   animate cards from their previous grid geometry. */
.dc-content-container.is-view-switching .dc-card-stack,
.dc-content-container.is-view-switching .dc-card-entry-grid,
.dc-content-container.is-view-switching .dc-card-entry-stacked {
    transition: none !important;
}

.dc-card-stack .dc-card-entry-stacked:last-child {
    margin-bottom: 0;
}

.dc-card-stack .dc-card-entry-stacked:focus-visible,
.dc-card-stack .dc-card-entry-stacked:has(:focus-visible) {
    box-shadow: var(--dc-shadow-base);
}

@media (hover: hover) and (pointer: fine) {
    .dc-card-stack .dc-card-entry-stacked:hover {
        box-shadow: var(--dc-shadow-base);
    }

    /* The active card stays put while every later card shares one reveal
       offset. Switching to an adjacent card therefore moves only that card,
       instead of retargeting a whole set of overlapping margin animations. */
    .dc-card-stack .dc-card-entry-stacked:hover ~ .dc-card-entry-stacked {
        transform: translateY(calc(100% - var(--dc-stack-peek)));
    }

    .dc-card-stack:has(> .dc-card-entry-stacked:not(:last-child):hover) {
        padding-bottom: var(--dc-stack-reveal-space);
    }
}

.dc-card-stack .dc-card-entry-stacked:focus-visible ~ .dc-card-entry-stacked,
.dc-card-stack .dc-card-entry-stacked:has(:focus-visible) ~ .dc-card-entry-stacked {
    transform: translateY(calc(100% - var(--dc-stack-peek)));
}

.dc-card-stack:has(> .dc-card-entry-stacked:not(:last-child):focus-visible),
.dc-card-stack:has(> .dc-card-entry-stacked:not(:last-child):has(:focus-visible)) {
    padding-bottom: var(--dc-stack-reveal-space);
}

/* Touch devices: JS adds .is-stack-revealed on the first tap so the stack
   opens the way hover does on desktop; the second tap opens the viewer. */
.dc-card-stack .dc-card-entry-stacked.is-stack-revealed {
    box-shadow: var(--dc-shadow-base);
}

.dc-card-stack .dc-card-entry-stacked.is-stack-revealed ~ .dc-card-entry-stacked {
    transform: translateY(calc(100% - var(--dc-stack-peek)));
}

.dc-card-stack:has(> .dc-card-entry-stacked.is-stack-revealed:not(:last-child)) {
    padding-bottom: var(--dc-stack-reveal-space);
}

.dc-card-stack .dc-card-entry-stacked:focus {
    outline: none;
}

.dc-card-stack .dc-card-entry-stacked:focus-visible {
    outline: 2px solid var(--dc-color-accent);
    outline-offset: 2px;
}

/* The tag legend already sits above the deck. Hiding the below-card dot row
   keeps the 140% card ratio exact so every exposed strip is evenly spaced. */
.dc-card-stack .dc-card-entry-stacked > .dc-tag-dots {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .dc-card-stack,
    .dc-card-stack .dc-card-entry-stacked {
        transition: none;
    }
}

/* Badge rail: every marker a grid tile carries, stacked inward from the
   top-right corner (DOM order is left-to-right, so the last badge holds the
   corner slot). Same icons as the list rows — the dark chip below keeps them
   readable over card art. */
.dc-grid-badge-rail {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    z-index: 4;
}

/* The dark chip every rail badge sits in (except the foil dot) — it, not
   the icon, supplies the contrast over card art. Every badge shares the
   foil dot's exact 18px footprint so the rail reads as a row of dots. */
.dc-grid-badge-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--dc-radius-3);
    background: var(--dc-color-background);
    border: 1px solid var(--dc-border);
}

/* Copy count: the one badge with no list-row icon to borrow — echoes the
   list qty input's dark-box number. */
.dc-grid-badge-qty {
    color: #fff;
    font-size: 10px;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1;
}

.dc-card-entry-grid.suggested-cut .dc-card-image-container {
    outline: 2px solid var(--dc-color-danger);
    outline-offset: -2px;
    border-radius: var(--dc-radius-card);
}

.dc-card-entry-grid.suggested-cut .dc-card-image {
    opacity: 0.6 !important;
    filter: grayscale(50%);
}

.dc-card-entry-grid.suggested-add .dc-card-image-container {
    outline: 2px solid var(--accent-emerald);
    outline-offset: -2px;
    border-radius: var(--dc-radius-card);
}

#deckContainer .dc-card-image:not(.is-image-ready),
#consideringAreaContainer .dc-card-image:not(.is-image-ready) {
    opacity: 0 !important;
}

#deckContainer .dc-card-image.is-image-ready,
#consideringAreaContainer .dc-card-image.is-image-ready {
    opacity: 1;
}

.dc-card-image.loading {
    opacity: var(--opacity-low);
}

/* Actions: a vertical pill on the right edge of the card artwork. Same
   values as .dc-pill / .dc-pill-btn (webapp.css PILL BUTTON), stacked
   instead of in a row. */
.dc-card-grid-actions {
    position: absolute;
    top: 33%;
    right: 24px;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    /* Sits on card art, so the fill is denser than the .dc-pill fill */
    background: var(--dc-layer-float);
    overflow: hidden;
    transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
                border-color var(--dc-duration-fast) var(--dc-easing-standard),
                box-shadow var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-card-grid-actions:has(> .dc-card-action:focus-visible) {
    border-color: var(--dc-border-focus);
    box-shadow: var(--dc-shadow-focus);
}

.dc-card-grid-actions .dc-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    color: var(--dc-color-text);
    opacity: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--dc-duration-fast) var(--dc-easing-standard),
                color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-card-grid-actions .dc-card-action:hover,
.dc-card-grid-actions .dc-card-action:focus-visible {
    background: var(--dc-layer-raised);
    color: var(--dc-color-accent);
    outline: none;
}

.dc-card-grid-actions .dc-card-action:active {
    background: var(--dc-layer-raised);
    color: var(--dc-color-accent);
}

.dc-card-grid-actions .dc-card-action svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 767px) {
    .dc-card-grid-actions {
        right: 18px;
    }

    .dc-card-grid-actions .dc-card-action svg {
        width: 15px;
        height: 15px;
    }
}

/* ===== STATES AND UTILITIES ===== */
.dc-ai-focused-view.hidden,
.dc-autocomplete-container.hidden {
    display: none !important;
}

.dc-progress-dock.state-building {
    --dc-progress-gradient: linear-gradient(90deg, rgba(138, 145, 154, 0.96) 0%, rgba(205, 209, 216, 0.98) 52%, #ffffff 100%);
    --dc-progress-glow-soft: rgba(255, 255, 255, 0.2);
    --dc-progress-glow-strong: rgba(170, 176, 186, 0.35);
}

.dc-progress-dock.state-complete {
    --dc-progress-gradient: linear-gradient(270deg, var(--accent-emerald) 0%, var(--color-success) 58%, #27ae60 100%);
    --dc-progress-glow-soft: rgba(94, 251, 120, 0.28);
    --dc-progress-glow-strong: rgba(46, 204, 113, 0.45);
}

.dc-progress-dock.state-modified,
.dc-progress-dock.state-outdated {
    --dc-progress-gradient: linear-gradient(270deg, #ffd76a 0%, #e7b13c 56%, #c0982b 100%);
    --dc-progress-glow-soft: rgba(255, 215, 106, 0.28);
    --dc-progress-glow-strong: rgba(231, 177, 60, 0.48);
    --dc-progress-mod-gradient: linear-gradient(270deg, #ffe8a6 0%, #ffc14d 48%, var(--color-warning) 100%);
    --dc-progress-mod-glow: rgba(255, 206, 102, 0.35);
}

.dc-progress-dock.state-overweight {
    --dc-progress-gradient: linear-gradient(270deg, #ff8a80 0%, var(--color-danger) 56%, #c0392b 100%);
    --dc-progress-glow-soft: rgba(255, 138, 128, 0.28);
    --dc-progress-glow-strong: rgba(231, 76, 60, 0.45);
}

.dc-icon-legend-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg);
}

.dc-icon-legend-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.dc-icon-legend-section-title {
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.dc-icon-legend-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.dc-icon-legend-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
}

.dc-icon-legend-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.dc-icon-legend-symbol svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (max-width: 640px) {
  .dc-icon-legend-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

.disclaimer {
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-light);
 color: var(--dc-color-text-muted);
 text-align: center;
}

.card-viewer-close {
    position: absolute;
    top: calc(var(--nav-topbar-height) + var(--spacing-base));
    right: 1.5rem;
    /* Paint above the card viewer and the flip container (z-index 2). */
    z-index: 3;
}

.analysis-history-list {
    overflow-y: auto;
}

.analysis-history-item {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    background: var(--dc-layer-raised);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    transition: background-color var(--dc-duration-fast) var(--dc-easing-standard), border-color var(--dc-duration-fast) var(--dc-easing-standard);
}

.analysis-history-item:hover {
    background-color: var(--dc-layer-raised-hover);
    border-color: var(--dc-border-hover);
}

.analysis-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    min-width: 0;
}

.analysis-history-main {
    flex: 1 1 auto;
    min-width: 0;
}

.analysis-history-title {
    min-width: 0;
    overflow: hidden;
    color: var(--dc-color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analysis-history-title--scan {
    color: #38bdf8;
}

.analysis-history-title--power {
    color: #ffe1b4;
}

.analysis-history-title--trim {
    color: #fb923c;
}

.analysis-history-title--mana {
    color: #4ade80;
}

.analysis-history-title--roast {
    color: #f87171;
}

.analysis-history-title--default {
    color: #60a5fa;
}

.analysis-history-meta {
    margin-top: 0.125rem;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
}

.analysis-history-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: flex-end;
}

.analysis-history-type-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xxs);
    min-width: 0;
    text-transform: none;
}

.analysis-history-type-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.analysis-history-type-text {
    font-size: var(--font-size-base);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Same measure and side padding as the modal prose. */
/* Rescan notice at the top of the Full Synopsis: amber on the callout. */
.dc-scan-outdated {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    max-width: 800px;
    margin: 0 auto;
    border-color: color-mix(in srgb, #e0a95c 45%, transparent);
    background: color-mix(in srgb, #e0a95c 10%, var(--dc-layer-raised));
    color: var(--dc-color-text);
}

.dc-scan-outdated strong {
    color: #e0a95c;
}

.dc-scan-outdated-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #e0a95c;
}

.analysis-history-detail-meta {
    max-width: 800px;
    margin-inline: auto;
    padding: var(--spacing-base) 0;
    color: var(--dc-color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
}

@media (max-width: 520px) {
    .analysis-history-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .analysis-history-actions {
        justify-content: flex-end;
        width: 100%;
    }
}

.analysis-replay-summary {
    display: grid;
    gap: var(--spacing-xs);
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm);
    background: var(--dc-layer-raised);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
}

.analysis-replay-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.analysis-replay-summary-row span {
    color: var(--dc-color-text-muted);
}

.analysis-replay-skipped-list {
    margin-top: var(--spacing-xs);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.4;
}


/* ===== CHANGELOG ===== */
.changelog-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 50vh;
    overflow-y: auto;
}

.changelog-item {
    font-size: 0.75rem;
    font-weight: 300;
    padding: 4px 0;
    border-bottom: 1px solid var(--dc-border);
    line-height: 1.4;
}

.changelog-item:hover {
    background-color: var(--dc-layer-raised);
}

.changelog-icon {
    display: inline-block;
    width: 14px;
    text-align: center;
    font-weight: 700;
    opacity: 0.5;
}

.changelog-add {
    color: var(--accent-emerald);
    opacity: 1;
}

.changelog-remove {
    color: var(--dc-color-danger);
    opacity: 1;
}


/* ===== ANIMATIONS ===== */
/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 767px) {
    .dc-panel {
        max-height: none;
        min-height: 200px;
    }
    
    
    .dc-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .dc-card-mana {
        display: flex;
    }

    .dc-card-price {
        display: inline;
        font-size: 11px;
        min-width: 40px;
    }

    .dc-card-actions {
        gap: 2px;
    }

    .card-entry-list .dc-card-actions .dc-card-action:not([data-action="show-options"]):not([data-action="dc-card-modal"]):not([data-action="toggle-pet"]) {
        display: none;
    }
    
    .dc-card-action svg {
        width: 14px;
        height: 14px;
    }

    .dc-card-action.collection-track svg {
        width: 16px;
        height: 16px;
    }

    
    
    
    
    .dc-ai-execute-btn {
        padding: var(--spacing-xs);
        font-size: 11px;
        height: 28px;
    }
    
    .dc-execute-text {
        font-size: 11px;
    }
    
    .dc-bracket-btn {
        padding: 5px 0 3px;
        font-size: 12px;
    }

    /* Hide card preview on mobile and only show the modal */
    #cardPreview {
        display: none !important;
    }

    /* Options grid → stacked rows on mobile */
    .dc-pt-options {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .dc-pt-options > .dc-pt-section {
        border-left: none;
        border-top: 1px solid var(--dc-border);
        padding: var(--spacing-xs) 0;
    }

    .dc-pt-options > .dc-pt-section:first-child {
        border-top: none;
        padding-top: 0;
    }

    .dc-pt-section-label {
        margin-bottom: var(--spacing-xxs);
}

    .dc-pt-toggle-indicator {
        width: 16px;
        height: 16px;
    }

    .dc-pt-toggle-label {
        font-size: var(--font-size-xs);
    }

    /* Make AI config textareas 3 rows high on mobile */
    #trimUserInput,
    #powerUserInput,
    #manaUserInput {
        min-height: 5rem;
        resize: vertical; /* Allow vertical resizing */
    }

    .dc-ai-card-badge {
        position: static;
        margin-left: auto;
        align-self: center;
        min-height: 18px;
    }

    .aiLogBadge {
        position: absolute;
        top: -6px;
        right: -6px;
        margin-left: 0;
        align-self: auto;
        width: max-content;
    }

    #aiModeSelection .select-mode {
        padding: var(--spacing-sm);
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: var(--spacing-base);
    }
}

/* --- Toggle Switch --- */
.builder-menu-toggle-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    max-width: 260px;
}

.builder-menu-toggle-row:has(.toggle-switch:disabled) {
    opacity: 0.5;
}

.builder-menu-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.builder-menu-toggle-title {
    font-size: var(--font-size-sm);
    color: var(--dc-color-text);
}

.builder-menu-toggle-desc {
    font-size: 11px;
    color: var(--dc-color-text-muted, rgba(255,255,255,0.5));
    line-height: 1.3;
}

.toggle-switch {
    /* On fill: the accent darkened so the white knob reads at 3:1 or better */
    --dc-toggle-on: color-mix(in srgb, var(--dc-color-accent) 60%, var(--dc-color-background));
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    background: var(--dc-layer-sunken);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-pill);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Knob: white disc with a soft drop shadow */
.toggle-switch-knob {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    background: var(--dc-color-text);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgb(0 0 4 / 35%);
    transition: transform 0.2s ease;
    pointer-events: none;
}

/* Knob glyph: an O ring when off, an I bar in the accent when on */
.toggle-switch-knob::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border: 2px solid color-mix(in srgb, var(--dc-color-background) 40%, var(--dc-color-text));
    border-radius: 50%;
}

.toggle-switch[data-enabled="true"] {
    background: var(--dc-toggle-on);
    border-color: var(--dc-toggle-on);
}

.toggle-switch[data-enabled="true"] .toggle-switch-knob {
    transform: translateX(16px);
}

.toggle-switch[data-enabled="true"] .toggle-switch-knob::after {
    left: 7px;
    width: 2px;
    border: 0;
    border-radius: 1px;
    background: var(--dc-toggle-on);
}

.toggle-switch:disabled {
    cursor: default;
    pointer-events: none;
}

.toggle-switch:not(:disabled):hover {
    border-color: var(--dc-border-hover);
}

#menuShowSetInfoBtn[data-enabled="true"] svg {
    color: #22c55e;
}

/* --- Split Printings --- */

/* Split Printings Modal */
.split-printings-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.split-printings-total {
    font-size: 0.9em;
    text-align: center;
    color: var(--accent-emerald);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--dc-border);
}

.split-printings-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 60vh;
    overflow-y: auto;
}

.split-printing-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--dc-layer-raised);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
}

/* Card image: global contract, sized to the row */
.split-printing-thumb {
    height: 200px;
    flex-shrink: 0;
}

.split-printing-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.split-printing-set {
    font-weight: 600;
    font-size: 0.85em;
}

.split-printing-finish {
    font-size: 0.75em;
    color: var(--dc-color-text-muted, #888);
}

.split-printing-qty-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.split-qty-btn {
    width: 28px;
    height: 28px;
    color: var(--dc-color-text);
    cursor: pointer;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-3);
    background: transparent;
}

.split-qty-btn:hover {
    background: var(--dc-layer-raised);
}

.split-remove-btn {
    width: 28px;
    height: 28px;
    padding: var(--spacing-xxs);
    font-size: var(--font-size-sm);
    border-radius: var(--dc-radius-3);
}

.split-add-btn {
    align-self: center;
}

@media (max-width: 600px) {
    .split-printing-row {
        flex-wrap: wrap;
    }

    .split-printing-thumb {
        width: 100%;
        height: auto;
    }

    .split-printing-info {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ==========================================
   CATEGORY TAGGING
   ========================================== */

/* Neutral grey is the "no color assigned" identity for tags/groups — used
   wherever --dc-tag-color is unset, so uncolored items read grey, not blue. */
:root { --dc-tag-grey: #8e949e; }

/* The tag section header IS the chip. It derives its accent from the
   group/category color (--dc-tag-color, set on the section element in JS).
   The title drops the "# -" prefix for a colored dot + category name, matching
   the palette chips. Uncolored tags fall back to neutral grey.

   Rest = the colored chip look (group-color border + faint wash + tinted
   title). Active = the action-button look (solid white fill, black label),
   with the dot still carrying the group color. This mirrors how the palette
   chips signal selected. */
.dc-tag-section .dc-type-header {
  border: 1.5px solid color-mix(in srgb, var(--dc-tag-color, var(--dc-tag-grey)) 55%, transparent);
  background-color: color-mix(in srgb, var(--dc-tag-color, var(--dc-tag-grey)) 12%, transparent);
  padding-left: calc(var(--spacing-sm) - 3px);
}

.dc-tag-section .dc-type-header:hover {
  border-color: color-mix(in srgb, var(--dc-tag-color, var(--dc-tag-grey)) 75%, transparent);
  background-color: color-mix(in srgb, var(--dc-tag-color, var(--dc-tag-grey)) 20%, transparent);
}

.dc-tag-section .dc-type-header .dc-type-title {
  text-transform: none;
  color: color-mix(in srgb, var(--dc-tag-color, var(--dc-tag-grey)) 28%, #ffffff);
}

/* Active section = solid white chip, black label. */
.dc-tag-section.dc-tag-section--active .dc-type-header {
  background-color: #ffffff;
  border-color: #ffffff;
}

.dc-tag-section.dc-tag-section--active .dc-type-header .dc-type-title,
.dc-tag-section.dc-tag-section--active .dc-type-header .dc-type-label,
.dc-tag-section.dc-tag-section--active .dc-type-header .dc-type-metadata,
.dc-tag-section.dc-tag-section--active .dc-type-header .collapse-icon {
  color: #000000;
}

/* ==========================================
   TAG PALETTE BAR (Paint Mode)
   Uncolored chips: neutral grey (--dc-tag-grey)
   Colored chips: their group color (--dc-tag-color)
   Hover/active: white fill, black label (action-button look)
   ========================================== */

.dc-tag-palette {
  display: flex;
  align-items: center;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--dc-border);
}

.dc-tag-palette.hidden {
  display: none;
}

.dc-tag-palette-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  flex-wrap: wrap;
  padding-bottom: 2px;
  position: relative;
}

.dc-tag-palette-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.dc-tag-palette-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--dc-tag-grey) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--dc-tag-grey) 45%, transparent);
  border-radius: var(--dc-radius-pill);
  padding: 2px 8px;
  font-family: var(--font-primary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  text-shadow: var(--shadow-text);
  color: color-mix(in srgb, var(--dc-tag-grey) 18%, #ffffff);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  min-height: 24px;
  user-select: none;
  -webkit-user-select: none;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Hover = pre-selection. The chip leans into its color: brighter tint, brighter
   border, a 1px lift. Deliberately NOT the white fill — the
   solid white commitment look is reserved for the actual selection, so the two
   states read differently at a glance. */
.dc-tag-palette-chip:hover:not(.dc-tag-palette-chip--active) {
  background-color: color-mix(in srgb, var(--dc-tag-grey) 34%, transparent);
  border-color: color-mix(in srgb, var(--dc-tag-grey) 80%, transparent);
  color: #ffffff;
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Selection = the terminal step of the hover ramp: the tint deepens to a rich
   fill, the border goes full-strength, and a soft glow marks the commitment.
   The chip sits flat again (no lift) — pressed in and settled. border-style/
   opacity are reset so a selected "missing" chip drops its dashed, dimmed
   treatment. */
.dc-tag-palette-chip--active {
  background-color: color-mix(in srgb, var(--dc-tag-grey) 60%, transparent);
  border-color: var(--dc-tag-grey);
  border-style: solid;
  color: #ffffff;
  opacity: 1;
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--dc-tag-grey) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.dc-tag-palette-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 1px dashed var(--dc-border);
  border-radius: var(--dc-radius-2);
  background: transparent;
  color: var(--dc-color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.dc-tag-palette-help:hover {
  border-color: var(--dc-color-text);
  color: var(--dc-color-text);
}

.dc-tag-palette-help svg {
  width: 14px;
  height: 14px;
}

/* Card Tag Painted Indicator (list view) — wash the full row with 20% of the
   active tag's group color. Grid and stacked views retain the outlined card
   treatment below. */
.card-entry-list.dc-tag-painted {
  background-color: color-mix(in srgb, var(--dc-tag-color, var(--dc-tag-grey)) 20%, transparent);
}

/* Card Tag Painted Indicator (grid view) */
.dc-card-entry-grid.dc-tag-painted .dc-card-image-container {
  outline: 2px solid color-mix(in srgb, var(--dc-tag-color, var(--dc-tag-grey)) 80%, transparent);
  outline-offset: -2px;
  border-radius: var(--dc-radius-card);
}

/* Palette hover preview — same treatment as painted, driven by its own color
   variable so a painted row can preview a different tag. While a preview is
   active, painted rows outside the preview stand down. */
.card-entry-list.dc-tag-preview {
  background-color: color-mix(in srgb, var(--dc-tag-preview-color, var(--dc-tag-grey)) 20%, transparent);
}

.dc-card-entry-grid.dc-tag-preview .dc-card-image-container {
  outline: 2px solid color-mix(in srgb, var(--dc-tag-preview-color, var(--dc-tag-grey)) 80%, transparent);
  outline-offset: -2px;
  border-radius: var(--dc-radius-card);
}

body.dc-tag-previewing .card-entry-list.dc-tag-painted:not(.dc-tag-preview) {
  background-color: transparent;
}

body.dc-tag-previewing .dc-card-entry-grid.dc-tag-painted:not(.dc-tag-preview) .dc-card-image-container {
  outline: none;
}

/* Mobile: larger touch targets */
@media (max-width: 767px) {
  .dc-tag-palette {
    padding: 3px 0;
  }
  .dc-tag-palette-chip {
    padding: 4px 10px;
    min-height: 30px;
    font-size: 12px;
  }
  .dc-tag-palette-help {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }
}

/* ===== Tag Library ===== */

/* The swatch dot is the primary hue carrier, so the border can stay a faint
   tint and the text can run bright — no more triple hue redundancy. */
.dc-tag-palette-chip--colored {
  background-color: color-mix(in srgb, var(--dc-tag-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--dc-tag-color) 40%, transparent);
  color: color-mix(in srgb, var(--dc-tag-color) 28%, #ffffff);
}

/* Colored chips: the same ramp in the tag's own hue — hover deepens the tint,
   selection deepens it further with a full-strength border and glow. These
   selectors must exist (and mirror the base ones) because
   .dc-tag-palette-chip--colored otherwise wins on source order. */
.dc-tag-palette-chip--colored:hover:not(.dc-tag-palette-chip--active) {
  background-color: color-mix(in srgb, var(--dc-tag-color) 40%, transparent);
  border-color: color-mix(in srgb, var(--dc-tag-color) 75%, transparent);
  color: #ffffff;
}

.dc-tag-palette-chip--colored.dc-tag-palette-chip--active {
  background-color: color-mix(in srgb, var(--dc-tag-color) 60%, transparent);
  border-color: color-mix(in srgb, var(--dc-tag-color) 95%, transparent);
  border-style: solid;
  color: #ffffff;
  opacity: 1;
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--dc-tag-color) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Missing-category (0-count) coverage indicator. Only shown at rest — on hover
   or when active the chip adopts the solid white look like every other chip, so
   the dashed border never stacks on top of the selected state's border. */
.dc-tag-palette-chip--missing:not(:hover):not(.dc-tag-palette-chip--active) {
  opacity: 0.55;
  border-style: dashed;
}

/* ===== Tag dots =====
   .dc-tag-dot is THE category color dot — one class defines its design
   everywhere it appears: palette chips, tag section titles, and the per-card
   membership clusters. Hue comes from --dc-tag-color (inline or inherited);
   contexts only add spacing, never restyle the dot itself. */
.dc-tag-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--dc-tag-color, rgba(255, 255, 255, 0.28));
  /* Border (not box-shadow) so the ring renders inside the 9px box and every
     dot measures identically; it also separates overlapped cluster dots. */
  border: 1px solid black;
}

/* Uncolored tags: plain grey dot, same treatment as colored ones */
.dc-tag-dot--plain {
  background-color: var(--dc-tag-grey, rgba(255, 255, 255, 0.35));
}

/* Palette chips: dot sits in front of the tag name */
.dc-tag-palette-chip .dc-tag-dot {
  margin-right: 5px;
}

/* Per-card membership clusters — compact avatar-stack after the card name
   (list) or under the image tile (grid). The pill "tray" around the dots is
   what separates them from the standalone foil/gamechanger/banned indicators:
   contained = tags, loose = status. It's also a comfortable hover/tap target.
   Tag names live in the palette (the legend) and in the hover/tap popover. */
.dc-tag-dots {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-layer-raised);
  border: 1px solid var(--dc-border);
  cursor: pointer;
}

.dc-tag-dots:hover {
  background-color: var(--dc-layer-raised-hover);
  border-color: var(--dc-border-hover);
}

.dc-tag-dots .dc-tag-dot + .dc-tag-dot {
  margin-left: -3px;
}

/* List view: a touch of extra breathing room after the name/status icons */
.card-entry-list .dc-card-name-list .dc-tag-dots {
  margin-left: 4px;
}

.dc-tag-dots-more {
  margin-left: 4px;
  font-size: 9px;
  line-height: 12px;
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.dc-tag-dots:hover .dc-tag-dots-more {
  color: rgba(255, 255, 255, 0.85);
}

/* Grid view: cluster sits centered below the image tile. align-self keeps the
   pill hugging its dots instead of stretching across the flex-column tile. */
.dc-card-entry-grid .dc-tag-dots {
  align-self: center;
  margin-top: 4px;
}

/* Popover: the full chips, floated above the cluster (position set by JS) */
.dc-tag-dots-popover {
  position: fixed;
  z-index: 10000;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 260px;
  padding: 6px 8px;
  border-radius: var(--dc-radius-2);
  background-color: var(--dc-layer-float);
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
  border: 1px solid var(--dc-border);
  box-shadow: var(--dc-shadow-float);
}

/* Format-legality popover: the rule checklist opened from the meta-bar
   format badge (position set by JS, same dark recipe as the dots popover) */
.dc-legality-popover {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 10px 12px;
  border-radius: var(--dc-radius-2);
  background-color: var(--dc-layer-float);
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
  border: 1px solid var(--dc-border);
  box-shadow: var(--dc-shadow-float);
}

.dc-legality-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--font-size-xs);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}

.dc-legality-row-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dc-legality-row.is-fail .dc-legality-row-label {
  color: rgba(255, 255, 255, 0.92);
}

.dc-legality-row-detail {
  color: rgba(255, 255, 255, 0.55);
}

.dc-legality-check-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.dc-legality-check-icon.is-pass {
  color: var(--accent-emerald, #10b981);
}

.dc-legality-check-icon.is-fail {
  color: #f43f5e;
}

/* Cross-group membership chips — now rendered inside the dots popover */
.dc-cross-group-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--dc-radius-pill);
  font-size: 10px;
  line-height: 14px;
  font-weight: var(--font-weight-medium);
  text-transform: none;
  white-space: nowrap;
  background-color: var(--dc-layer-raised);
  border: 1px solid var(--dc-border);
  color: rgba(255, 255, 255, 0.6);
}

/* Same recipe as the palette colored chip, one notch quieter so the card name
   stays the focus: faint tint border, bright text, hue lives in the fill. */
.dc-cross-group-chip--colored {
  background-color: color-mix(in srgb, var(--dc-tag-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--dc-tag-color) 34%, transparent);
  color: color-mix(in srgb, var(--dc-tag-color) 28%, #ffffff);
}

/* ===== Manage Tags modal ===== */
.dc-cat-manager { display: flex; flex-direction: column; gap: var(--spacing-sm); }

.dc-manage-tags-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.dc-manage-tags-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.dc-manage-tags-panel-heading > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dc-manage-tags-panel-heading span {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-xs);
}

.dc-cat-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--spacing-sm);
  background-color: var(--dc-layer-raised);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
}

.dc-cat-form-help {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.dc-cat-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dc-cat-input { width: auto; }
.dc-cat-input--name { flex: 2 1 160px; }
.dc-cat-input--group { flex: 1 1 120px; }
.dc-cat-add-btn { flex-shrink: 0; }

/* Group field: caret button that opens the "choose existing group" dropdown */
.dc-cat-group-caret-btn {
  flex-shrink: 0;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  padding: 0;
  margin-right: 2px;
  background: none;
  border: none;
  color: var(--dc-color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
.dc-cat-group-caret-btn:hover { color: var(--dc-color-text); }
.dc-cat-group-caret-btn svg { width: 14px; height: 14px; display: block; }

.dc-cat-swatches { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.dc-cat-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--dc-border);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.1s ease, border-color 0.1s ease;
}

.dc-cat-swatch:hover { transform: scale(1.12); }

.dc-cat-swatch.selected {
  border-color: var(--dc-color-text);
}

.dc-cat-swatch--custom {
  flex: 0 0 22px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  overflow: hidden;
  background: conic-gradient(
    from 45deg,
    #ef4444,
    #facc15,
    #22c55e,
    #06b6d4,
    #6366f1,
    #ec4899,
    #ef4444
  );
}

.dc-modal-body label.dc-cat-swatch--custom {
  display: block;
  margin-bottom: 0;
}

.dc-cat-swatch--custom.selected {
  background: var(--dc-custom-color);
}

.dc-cat-swatch--custom:focus-within {
  outline: 2px solid var(--dc-color-text);
  outline-offset: 2px;
}

.dc-cat-custom-color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dc-cat-swatch--none {
  background:
    linear-gradient(
      to top left,
      transparent calc(50% - 1.5px),
      #ef4444 calc(50% - 1.5px),
      #ef4444 calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    conic-gradient(
      #f8fafc 25%,
      #94a3b8 0 50%,
      #f8fafc 0 75%,
      #94a3b8 0
    ) 0 0 / 6px 6px;
  border-color: var(--dc-border-hover);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18);
}

.dc-cat-groups { display: flex; flex-direction: column; gap: var(--spacing-sm); }

.dc-cat-group {
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  overflow: hidden;
}

.dc-cat-group-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background-color: var(--dc-layer-raised);
  border-bottom: 1px solid var(--dc-border);
}

.dc-cat-group-header--clickable { cursor: pointer; }
.dc-cat-group-header--clickable:hover { background-color: var(--dc-layer-raised-hover); }

.dc-cat-group-name-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }

.dc-cat-group-caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.dc-cat-group--collapsed .dc-cat-group-caret { transform: rotate(-90deg); }
.dc-cat-group--collapsed .dc-cat-group-header { border-bottom: none; }
.dc-cat-group--collapsed .dc-cat-list { display: none; }

.dc-cat-group-name {
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--font-size-xs);
  color: var(--dc-color-text);
}

.dc-cat-group-count {
  font-size: 10px;
  padding: 0 7px;
  border-radius: var(--dc-radius-pill);
  color: var(--dc-color-text-muted);
}

.dc-cat-group-actions, .dc-cat-edit-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }

.dc-cat-group-rename { display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 100%; }
.dc-cat-group-rename-row { display: flex; gap: 6px; align-items: center; width: 100%; }
.dc-cat-group-rename-row .dc-cat-input { flex: 1 1 auto; }
.dc-cat-group-swatches { padding-left: 2px; }

.dc-cat-list { display: flex; flex-direction: column; }

.dc-cat-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--dc-border);
}
.dc-cat-row:last-child { border-bottom: none; }

.dc-cat-swatch-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  /* Uncolored categories preview as neutral grey (inline style overrides when
     a real color is set). */
  background-color: color-mix(in srgb, var(--dc-tag-grey) 60%, transparent);
}

.dc-cat-row-name { flex: 1 1 auto; font-size: var(--font-size-sm); color: var(--dc-color-text); }

.dc-cat-row-count {
  font-size: 10px;
  color: var(--dc-color-text-muted);
  white-space: nowrap;
}

.dc-cat-row-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }

.dc-cat-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: var(--dc-radius-3);
  color: var(--dc-color-text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dc-cat-icon-btn:hover { background-color: var(--dc-layer-raised); color: var(--dc-color-text); }
.dc-cat-icon-btn:disabled { opacity: 0.35; cursor: default; }
.dc-cat-icon-btn--danger:hover {
  background-color: rgba(180, 83, 58, 0.25);
  border-color: rgba(180, 83, 58, 0.7);
  color: #f0b6a6;
}

/* Square icon-only variant (edit / delete / rename) */
.dc-cat-icon-btn--icon {
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
}
.dc-cat-icon-svg {
  width: 14px;
  height: 14px;
  display: block;
}

.dc-cat-mini-btn { min-height: 26px; }

.dc-cat-edit-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
  background-color: var(--dc-layer-raised);
  border-bottom: 1px solid var(--dc-border);
}
.dc-cat-edit-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.dc-cat-edit-fields .dc-cat-input--name { flex: 2 1 140px; }
.dc-cat-edit-fields .dc-cat-input--group { flex: 1 1 110px; }

.dc-cat-empty {
  padding: var(--spacing-sm);
}

/* ============================
   Find Cards – Filter / Refine
   ============================ */

/* Explore Cards control bar. Order: Refine (left), results text (fills the
   middle), optional Sort (right). Buttons are .dc-button. */
.dc-find-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-sm);
}

.dc-find-controls .dc-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.dc-find-controls .dc-button:disabled:hover {
  background: transparent;
  color: var(--dc-color-text);
}

/* Explore modal footer: Add-to-Location sits on the left, the rest on the right */
.dc-find-cards-footer .dc-find-location-btn {
  margin-right: auto;
}

.dc-find-control-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dc-find-control-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.dc-find-sort-control {
  cursor: default;
}

.dc-find-sort-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  padding: 0 18px 0 0;
  border: 0;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  color: var(--dc-color-text);
  font: inherit;
  cursor: pointer;
}

.dc-find-sort-select:focus {
  outline: none;
}

.dc-find-sort-select option {
  background: var(--dc-layer-float);
  color: var(--dc-color-text);
}

.dc-find-control-chevron {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.55);
  margin-left: -2px;
}

.dc-find-control-chevron svg {
  width: 12px;
  height: 12px;
  display: block;
}

.dc-recommander-preview-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
  color: var(--dc-color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.dc-recommander-preview-note img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: none;
}

/* Select Printing footer – "Only Prints I Own" toggle sits to the left */
.dc-printing-owned-toggle {
  margin-right: auto;
}

@media (max-width: 768px) {
  .dc-recommander-preview-note {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Buttons share one row; the results text drops to its own row below. */
  .dc-find-controls > .dc-button {
    flex: 1 1 0;
    min-width: 0;
  }

  .dc-find-results-info {
    flex-basis: 100%;
    order: 1;
  }

  .dc-import-dont-overwrite-toggle {
    margin-right: 0;
    flex-basis: 100%;
  }
}

/* Results info text (mirrors search page resultsInfo) */

.dc-find-results-info {
  flex: 1;
  color: var(--dc-color-text-muted);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  font-style: italic;
  line-height: 1.5;
}

.dc-find-info-highlight {
  color: var(--dc-color-accent);
  font-weight: var(--font-weight-semibold);
}

/* Filter picker panel (fixed overlay, mirrors collection print picker) */

.dc-find-filter-picker {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 930;
}

.dc-find-filter-picker[aria-hidden="false"] {
  display: flex;
}

.dc-find-filter-picker.hidden {
  display: none;
}

.dc-find-filter-picker-backdrop {
    position: absolute;
    inset: 0;
    background: var(--dc-layer-scrim-light);
    backdrop-filter: blur(var(--dc-blur-tiny));
    -webkit-backdrop-filter: blur(var(--dc-blur-tiny));
}

.dc-find-filter-picker-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  margin: var(--spacing-base);
  background-color: var(--dc-layer-float);
  backdrop-filter: blur(var(--dc-blur-heavy));
  -webkit-backdrop-filter: blur(var(--dc-blur-heavy));
  border-radius: var(--dc-radius-1);
  border: 1px solid var(--dc-border);
  display: flex;
  flex-direction: column;
  box-shadow: var(--dc-shadow-modal);
  z-index: 1;
}

/* Header + footer mirror the shared modal (.dc-modal-header / .dc-modal-title /
   .dc-modal-footer) used by the search filter panel — transparent and compact,
   with the title carrying its own leading icon via .dc-modal-title. */
.dc-find-filter-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
}

.dc-find-filter-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-base);
}

/* Boxed filter groups + labelled icons — mirrors the search page filter panel
   (.filter-modal-body .filter-group / .filter-group-label) so the two panels
   share one design language. */
.dc-find-filter-picker-body .filter-group {
  margin-bottom: var(--spacing-base);
  padding: var(--spacing-sm) var(--spacing-base);
  border-radius: var(--dc-radius-2);
  border: 1px solid var(--dc-border);
  background: var(--dc-layer-raised);
}

.dc-find-filter-picker-body .filter-group:last-child {
  margin-bottom: 0;
}

.dc-find-filter-picker-body .filter-group label.filter-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--dc-color-text);
  margin-bottom: var(--spacing-sm);
}

.dc-find-filter-picker-body .filter-label-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--dc-color-text-muted);
}

/* Standalone price field needs roomier padding than the slider-cell default. */
.dc-find-filter-picker-body .dc-find-filter-price {
  width: 100%;
  padding: 6px 10px;
}

.dc-find-filter-picker-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
}

/* ====================================================================
   Find Cards – Mode Switcher (a full-width .dc-segmented-control with
   compact options; they scroll sideways when the row is too narrow)
   ==================================================================== */

.dc-find-mode-switch {
  display: flex;
  width: 100%;
  min-width: 0;
}

.dc-find-mode-switch .dc-segmented-control {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.dc-find-mode-switch .dc-segmented-button {
  padding: 5px 10px;
}

.dc-find-mode-switch .dc-segmented-control::-webkit-scrollbar {
  display: none;
}

@media (max-width: 600px) {
  .dc-find-mode-switch .dc-segmented-button {
    padding: 5px 8px;
  }

  .dc-find-mode-switch .dc-mode-tab-label {
    display: none;
  }
}

/* ====================================================================
   Mana Base Builder
   ==================================================================== */

.dc-manabase-price-bar {
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--dc-border);
  margin-bottom: var(--spacing-xs);
}

.dc-manabase-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  min-height: 32px;
}

/* Collapse / expand all: an action link whose chevron turns when collapsed */
.dc-manabase-collapse-toggle {
  font-size: var(--font-size-sm);
}

.dc-manabase-collapse-toggle .dc-action-link__icon {
  width: 14px;
  height: 14px;
}

.dc-manabase-collapse-toggle:hover .dc-action-link__icon {
  transform: none;
}

.dc-manabase-collapse-toggle.is-collapsed .dc-action-link__icon {
  transform: rotate(-90deg);
}

.dc-manabase-collapse-toggle:disabled {
  opacity: 0.4;
  cursor: default;
  color: var(--dc-color-text-muted);
}

.dc-manabase-price-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1 1 320px;
  max-width: 460px;
}

.dc-manabase-price-label {
  white-space: nowrap;
  color: var(--dc-color-text-muted);
}

.dc-manabase-slider-wrap {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  min-width: 140px;
}

/* Range slider: hairline track, accent fill up to --dc-range-pct, white thumb */
.dc-manabase-slider {
  --dc-range-pct: 100%;
  flex: 1;
  height: 16px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.dc-manabase-slider:focus {
  outline: none;
}

.dc-manabase-slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: var(--dc-radius-pill);
  background: linear-gradient(to right,
    var(--dc-color-accent) 0 var(--dc-range-pct),
    var(--dc-border) var(--dc-range-pct) 100%);
}

.dc-manabase-slider::-moz-range-track {
  height: 3px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-border);
}

.dc-manabase-slider::-moz-range-progress {
  height: 3px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-color-accent);
}

.dc-manabase-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border: 0;
  border-radius: 50%;
  background: var(--dc-color-text);
  box-shadow: 0 0 0 1px var(--dc-color-background);
  transition: transform var(--dc-duration-fast) var(--dc-easing-standard),
              box-shadow var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-manabase-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--dc-color-text);
  box-shadow: 0 0 0 1px var(--dc-color-background);
  transition: transform var(--dc-duration-fast) var(--dc-easing-standard),
              box-shadow var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-manabase-slider:hover::-webkit-slider-thumb,
.dc-manabase-slider:active::-webkit-slider-thumb {
  transform: scale(1.15);
}

.dc-manabase-slider:hover::-moz-range-thumb,
.dc-manabase-slider:active::-moz-range-thumb {
  transform: scale(1.15);
}

.dc-manabase-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--dc-color-background), 0 0 0 4px var(--dc-color-accent-subtle);
}

.dc-manabase-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--dc-color-background), 0 0 0 4px var(--dc-color-accent-subtle);
}

/* Read-only value chip */
.dc-manabase-slider-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Collapsible sections: list rows with a hairline between them */

.dc-manabase-section + .dc-manabase-section {
  border-top: 1px solid var(--dc-border);
}

.dc-manabase-section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--spacing-xs);
  border: 0;
  border-radius: var(--dc-radius-2);
  background: transparent;
  color: var(--dc-color-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-manabase-section-header:hover {
  background: var(--dc-layer-raised);
}

.dc-manabase-section-header:hover .dc-manabase-chevron {
  color: var(--dc-color-text);
}

.dc-manabase-section-header:focus-visible {
  outline: none;
  box-shadow: var(--dc-shadow-focus);
}

.dc-manabase-section-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.dc-manabase-section-count {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.dc-manabase-chevron {
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--dc-color-text-muted);
  transition: transform var(--dc-duration-fast) var(--dc-easing-standard),
              color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-manabase-chevron svg {
  width: 100%;
  height: 100%;
}

.dc-manabase-chevron.collapsed {
  transform: rotate(-90deg);
}

.dc-manabase-grid {
  padding: var(--spacing-xxs) 0 var(--spacing-sm);
}

/* ── Builder Token Panel ── */

.builder-token-grid {
  max-height: 70vh;
}

.builder-token-empty,
.builder-token-error {
  padding: var(--spacing-xl, 32px) var(--spacing-sm, 16px);
  grid-column: 1 / -1;
}

.builder-token-empty p,
.builder-token-error p {
  margin: 0 0 var(--spacing-xs, 8px) 0;
}

.builder-token-image-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dc-layer-scrim);
  backdrop-filter: blur(var(--dc-blur-light));
  -webkit-backdrop-filter: blur(var(--dc-blur-light));
  cursor: pointer;
  animation: fadeIn 0.15s ease;
}

.builder-token-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm, 16px);
}

.builder-token-image-container img {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: var(--dc-radius-card);
  box-shadow: var(--dc-shadow-base);
}

.builder-token-image-name {
  font-size: var(--font-size-md, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--dc-color-text, #fff);
  text-align: center;
}

/* ── Bulk Add to Collection Panel ── */

.bulk-add-collection-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bulk-add-instructions {
  font-size: var(--font-size-sm);
  color: var(--dc-color-text-muted);
  line-height: var(--line-height-base);
  margin: 0 0 var(--spacing-xs) 0;
}

.bulk-add-action-bar {
  display: flex;
  gap: var(--spacing-xs);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--dc-border);
}

.bulk-add-mark-btn {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xxs) var(--spacing-sm);
}

.bulk-add-card-list {
  display: flex;
  flex-direction: column;
  max-height: 40vh;
  overflow-y: auto;
}

.bulk-add-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xs) var(--spacing-xs);
  border-bottom: 1px solid var(--dc-border);
}

.bulk-add-card-row:last-child {
  border-bottom: none;
}

.bulk-add-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

a.bulk-add-card-name {
  color: var(--dc-color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  cursor: pointer;
}

a.bulk-add-card-name:hover {
  color: var(--dc-color-accent, #7fdbff);
  text-decoration: underline;
}

.bulk-add-card-meta {
  color: var(--dc-color-text-muted);
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

.bulk-add-proxy-toggle {
  flex-shrink: 0;
  margin-left: var(--spacing-sm);
  padding: var(--spacing-xxs) var(--spacing-sm);
  min-width: 64px;
  border: 1px solid var(--dc-color-accent-border);
  border-radius: var(--dc-radius-3);
  background: var(--dc-color-accent-subtle, rgba(0,192,255,0.08));
  color: var(--dc-color-accent, #7fdbff);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--letter-spacing-wide, 0.05em);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-align: center;
}

.bulk-add-proxy-toggle:hover {
  background: var(--dc-color-accent-hover, rgba(0,192,255,0.2));
}

.bulk-add-proxy-toggle.is-proxy {
  background: rgba(0, 192, 255, 0.5);
  border-color: rgba(0, 192, 255, 1.0);
  color: white;
  border-style: dashed;
}

.bulk-add-info-text {
  font-size: var(--font-size-xs);
  color: var(--dc-color-text-muted);
  opacity: 0.7;
  margin: 0;
}

/* Responsive */

@media (max-width: 600px) {
  /* The price controls take their own row under the collapse link */
  .dc-manabase-price-controls {
    flex-basis: 100%;
    max-width: none;
  }
}

/* Scoped dc-toolbar overrides for builder (avoids conflict with collection.css) */

.dc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--dc-border);
}

.dc-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .dc-toolbar-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .dc-toolbar {
    flex-wrap: wrap;
  }
}

/* ── Threat Index chip: BETA badge in the accent mint ─────────────────── */
/* Benchmark detail back link (builder modal). */
.dc-dti-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.dc-dti-steps {
  display: inline-flex;
  gap: 0.35rem;
}
.dc-dti-step {
  width: 32px;
  padding: 0;
}
.dc-dti-step:disabled {
  opacity: 0.4;
  cursor: default;
}
.dc-dti-step:disabled:hover {
  background: transparent;
  color: var(--dc-color-text);
}
.dc-dti-beta {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--dc-color-accent-border, rgba(0, 255, 178, 0.35));
  border-radius: var(--dc-radius-pill, 999px);
  background: var(--dc-color-accent-subtle, rgba(0, 255, 178, 0.12));
  color: var(--dc-color-accent);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dc-dti-chip-score {
  color: var(--dc-color-accent);
  font-weight: var(--font-weight-semibold);
}

.dc-dti-link {
  color: var(--dc-color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dc-dti-link:hover {
  text-decoration: none;
}

/* ── DeckCheck Threat Index (beta) modal ───────────────────────────────
   Tiles use dc-dti-tile (deckview.css); the five-cell meter maps F..S. */
.dc-dti-modal {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dc-dti-intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dc-dti-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: var(--dc-layer-raised);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
}

.dc-dti-header--button {
  position: relative;
  width: 100%;
  color: var(--dc-color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dc-duration-fast) var(--dc-easing-standard),
              background-color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-dti-header--button:hover {
  border-color: var(--dc-border-hover);
  background: var(--dc-layer-raised-hover);
}

.dc-dti-header--button:focus-visible {
  outline: none;
  border-color: var(--dc-border-focus);
  box-shadow: var(--dc-shadow-focus);
}

/* The breakdown link sits in the top-right corner like the tile arrow:
   subtle at rest, accent on hover. */
.dc-dti-header-cta {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--dc-color-text-subtle);
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-dti-header-cta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-dti-header--button:hover .dc-dti-header-cta,
.dc-dti-header--button:focus-visible .dc-dti-header-cta {
  color: var(--dc-color-accent);
}

.dc-dti-header--button:hover .dc-dti-header-cta svg,
.dc-dti-header--button:focus-visible .dc-dti-header-cta svg {
  transform: translate(1px, -1px);
}

/* Keep the first summary line clear of the corner link. */
.dc-dti-header--button .dc-dti-summary {
  padding-right: 11rem;
}

@media (max-width: 640px) {
  .dc-dti-header-cta {
    position: static;
    grid-column: 1 / -1;
  }

  .dc-dti-header--button .dc-dti-summary {
    padding-right: 0;
  }
}

.dc-dti-meta {
  font-size: var(--font-size-sm);
  color: var(--dc-color-text-muted);
}

/* Score gauge: a ring in five sections (one per bracket, clockwise from
   the bottom left), each filled to the score in its own bracket color.
   Every fill glows in its color; the section where the score stops is
   three times as thick. The tracks are dim grey. The score sits in the
   center. */
.dc-dti-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
}

.dc-dti-ring svg {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;   /* the glow reaches past the view box */
}

.dc-dti-ring-track,
.dc-dti-ring-fill {
  fill: none;
  stroke-width: 3;
  stroke-linecap: butt;
}

.dc-dti-ring-track {
  stroke: var(--dc-color-text-subtle);
  opacity: 0.35;
}


.dc-dti-ring-fill {
  filter: drop-shadow(0 0 2px rgba(var(--ring-glow), 0.68))
          drop-shadow(0 0 6px rgba(var(--ring-glow), 0.41));
}

.dc-dti-ring-landed .dc-dti-ring-track,
.dc-dti-ring-landed .dc-dti-ring-fill {
  stroke-width: 9;
}

.dc-dti-ring-num {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--dc-color-text);
}

.dc-dti-summary {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.dc-dti-bracket {
  font-weight: var(--font-weight-semibold);
}

.dc-dti-synopsis-card {
  margin-top: var(--spacing-2xl);
}

.dc-dti-stale {
  font-size: var(--font-size-sm);
  color: var(--dc-color-warning, #e0a95c);
}

.dc-dti-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dc-dti-divider {
  margin: 0.25rem 0;
  border: none;
  border-top: 1px solid var(--dc-border);
}

.dc-dti-question {
  font-style: italic;
  color: var(--dc-color-text-muted);
}

.dc-dti-list {
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.5;
}

.dc-dti-domain {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dc-dti-tiles {
  display: grid;
  gap: var(--spacing-xs);
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Benchmarks: one column per domain, tiles stacked in each column. The
   heading and the lead line span all columns. Narrow screens stack the
   domains as rows again. */
.dc-dti-benchmarks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

.dc-dti-benchmarks > h1,
.dc-dti-benchmarks > p {
  grid-column: 1 / -1;
}

.dc-dti-benchmarks .dc-dti-tiles {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 720px) {
  .dc-dti-benchmarks {
    grid-template-columns: minmax(0, 1fr);
  }

  .dc-dti-benchmarks .dc-dti-tiles {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* Benchmark tiles: the tier ring sits under the head, centered. Filled
   sections take the accent. All sections share one stroke width. */
.dc-dti-tile .dc-dti-ring {
  align-self: center;
}

.dc-dti-ring--tier .dc-dti-ring-landed .dc-dti-ring-track,
.dc-dti-ring--tier .dc-dti-ring-landed .dc-dti-ring-fill {
  stroke-width: 3;
}

.dc-dti-ring--tier .dc-dti-ring-fill {
  stroke: var(--dc-color-accent);
}

.dc-dti-ring--tier {
  --ring-glow: 0, 255, 178;
}

.dc-dti-meter {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  height: 6px;
}

.dc-dti-meter-cell {
  background: var(--dc-layer-sunken);
  border-radius: 2px;
}

.dc-dti-meter-cell.is-on {
  background: var(--dc-color-accent);
}

.dc-dti-meter--F .dc-dti-meter-cell.is-on {
  background: var(--dc-color-text-subtle);
}

.dc-dti-detail-tier {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 220px;
  margin: 0.5rem 0;
}

/* Card ledger: one tight run of small card references, dot-separated. */
.dc-dti-ledger-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.dc-dti-ledger-list li {
  display: inline;
}

.dc-dti-ledger-list li + li::before {
  content: '·';
  margin: 0 0.35em;
  color: var(--dc-color-text-subtle);
}

.dc-dti-tier-pick,
.dc-dti-stars {
  display: flex;
  gap: 0.35rem;
}

.dc-dti-tier-btn {
  min-width: 2.25rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  background: var(--dc-layer-raised);
  color: var(--dc-color-text);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.dc-dti-tier-btn:hover {
  border-color: var(--dc-border-hover);
}

.dc-dti-tier-btn.active {
  border-color: var(--dc-color-accent);
  color: var(--dc-color-accent);
}

.dc-dti-ladder {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dc-dti-ladder-row {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-2);
  background: var(--dc-layer-raised);
  color: var(--dc-color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-dti-ladder-row:hover {
  border-color: var(--dc-border-hover);
}

.dc-dti-ladder-row.is-rated {
  border-style: dashed;
  border-color: var(--dc-color-text-muted);
}

.dc-dti-ladder-row.active {
  border-color: var(--dc-color-accent);
  background: var(--dc-color-accent-subtle);
}

.dc-dti-ladder-tier {
  font-size: var(--font-size-xl);
  font-weight: 900;
  line-height: 1;
  color: var(--dc-color-text-muted);
}

.dc-dti-ladder-row.active .dc-dti-ladder-tier {
  color: var(--dc-color-accent);
}

.dc-dti-ladder-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.dc-dti-ladder-word {
  font-weight: var(--font-weight-semibold);
  color: var(--dc-color-text-muted);
}

.dc-dti-ladder-row.active .dc-dti-ladder-word {
  color: var(--dc-color-accent);
}

.dc-dti-star {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--dc-color-text-subtle);
  cursor: pointer;
  transition: color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dc-dti-star.is-on,
.dc-dti-star:hover {
  color: var(--dc-color-accent);
}

.dc-dti-comment {
  width: 100%;
  resize: vertical;
}

.dc-dti-feedback-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The DTI picker has no bracket colors: the selected button uses the accent selection. */
.dc-dti-bracket-pick .dc-bracket-btn.active {
  background: var(--dc-color-accent-subtle);
  border: 1px solid var(--dc-color-accent-border);
  box-shadow: none;
  -webkit-text-fill-color: currentColor;
  color: var(--dc-color-text);
}

.dc-dti-bracket-pick .dc-bracket-btn.active::before {
  content: none;
}

/* "Not sure" holds a word, so it gets more width than the numbers. */
.dc-dti-bracket-pick .dc-bracket-btn:last-child {
  flex: 2;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .dc-dti-header {
    grid-template-columns: 1fr;
  }
}

/* Deckhand Chat: floating launcher + chat panel. */
.dh-chat-launcher {
    position: fixed;
    right: 16px;
    bottom: calc(var(--nav-bottom-height, 0px) + 16px + env(safe-area-inset-bottom));
    z-index: 890; /* below the modal scrim (900) */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px 0 12px;
    border: 1px solid var(--dc-color-accent);
    border-radius: var(--dc-radius-pill);
    background-color: var(--dc-color-accent);
    box-shadow: var(--dc-shadow-float);
    color: var(--dc-color-background);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition:
        background-color var(--dc-duration-fast) var(--dc-easing-standard),
        border-color var(--dc-duration-fast) var(--dc-easing-standard);
}

.dh-chat-launcher:hover {
    background-color: var(--dc-color-accent-hover);
    border-color: var(--dc-color-accent-hover);
}

.dh-chat-launcher:focus-visible {
    border-color: var(--dc-border-focus);
    box-shadow: var(--dc-shadow-focus);
    outline: none;
}

/* A reply finished while the chat was closed: two short bounces, then a
   rest, until the user opens the chat. */
.dh-chat-launcher.has-reply {
    animation: dh-chat-launcher-bounce 2.4s ease-out infinite;
}

@keyframes dh-chat-launcher-bounce {
    0%, 16%, 28%, 100% { transform: translateY(0); }
    8% { transform: translateY(-10px); }
    22% { transform: translateY(-4px); }
}

/* Until the user opens the chat one time, a ring pulses out from the
   launcher two times when the builder opens. */
.dh-chat-launcher.is-intro::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    animation: dh-chat-launcher-pulse 1.6s var(--dc-easing-standard) 0.8s 2;
}

@keyframes dh-chat-launcher-pulse {
    from { box-shadow: 0 0 0 0 var(--dc-color-accent); }
    to { box-shadow: 0 0 0 14px transparent; }
}

.dh-chat-launcher[hidden],
.dh-chat-panel[hidden],
.dh-chat-header .dc-pill-btn[hidden] {
    display: none;
}

.dh-chat-launcher-icon svg,
.dh-chat-emblem svg {
    width: 20px;
    height: 20px;
}

.dh-chat-panel {
    position: fixed;
    right: 16px;
    bottom: calc(var(--nav-bottom-height, 0px) + 16px + env(safe-area-inset-bottom));
    z-index: 890; /* below the modal scrim (900) */
    display: flex;
    flex-direction: column;
    width: min(420px, calc(100vw - 32px));
    height: min(640px, calc(100dvh - var(--nav-bottom-height, 0px) - 96px));
    background-color: var(--dc-layer-float);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-1);
    backdrop-filter: blur(var(--dc-blur-heavy));
    -webkit-backdrop-filter: blur(var(--dc-blur-heavy));
    box-shadow: var(--dc-shadow-modal);
    overflow: hidden;
    color: var(--dc-color-text);
}

.dh-chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 14px;
    border-bottom: 1px solid var(--dc-border);
    flex-shrink: 0;
}

.dh-chat-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.dh-chat-meter {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    flex-shrink: 0;
    cursor: help;
}

.dh-chat-meter svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.dh-chat-meter circle {
    fill: none;
    stroke-width: 2.5;
}

.dh-chat-meter-track {
    stroke: var(--dc-border);
}

.dh-chat-meter-fill {
    stroke: var(--dc-color-text-muted);
    stroke-linecap: round;
    transition: stroke-dashoffset var(--transition-duration-normal, 0.3s) var(--dc-easing-standard);
}

.dh-chat-meter-count {
    position: relative;
    color: var(--dc-color-text);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.dh-chat-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dh-chat-msg {
    max-width: 92%;
    font-size: var(--font-size-base);
    line-height: 1.55;
    overflow-wrap: break-word;
}

.dh-chat-msg p {
    margin: 0;
}

.dh-chat-msg--user {
    align-self: flex-end;
    padding: 8px 12px;
    border-radius: var(--dc-radius-2);
    background: var(--dc-layer-raised);
    color: var(--dc-color-text);
    white-space: pre-wrap;
}

.dh-chat-msg--assistant {
    align-self: flex-start;
    color: var(--dc-color-text-muted);
}

.dh-chat-prose {
    font-size: var(--font-size-base);
    line-height: 1.6;
    max-width: none;
}

.dh-chat-prose > * + * {
    margin-top: 8px;
}

.dh-chat-greeting {
    color: var(--dc-color-text-subtle);
    font-size: var(--font-size-sm);
}

.dh-chat-greeting-question {
    color: var(--dc-color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

.dh-chat-prose > .dh-chat-greeting + .dh-chat-greeting-question {
    margin-top: 2px;
}

.dh-chat-stream {
    white-space: pre-wrap;
}

.dh-chat-status {
    display: inline-block;
    color: var(--dc-color-text-subtle);
    font-size: var(--font-size-sm);
}

.dh-chat-status[hidden] {
    display: none;
}

/* A light band sweeps across the status text while the Deckhand works. */
.dh-chat-status:not(.is-error) {
    background: linear-gradient(90deg,
        var(--dc-color-text-subtle) 0%, var(--dc-color-text-subtle) 35%,
        var(--dc-color-text) 50%,
        var(--dc-color-text-subtle) 65%, var(--dc-color-text-subtle) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: dh-chat-shimmer 1.8s linear infinite;
}

@keyframes dh-chat-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0% 0; }
}

.dh-chat-status.is-error {
    color: var(--dc-color-danger-text);
}

.dh-chat-proposal {
    align-self: stretch;
    padding: 10px 12px;
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    background-color: var(--dc-layer-raised);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.dh-chat-proposal p {
    margin: 0;
}

.dh-chat-proposal-title {
    color: var(--dc-color-text);
    font-weight: var(--font-weight-semibold);
}

/* One change per line. An opened long list scrolls in its own box, so Yes
   and No stay in view below it. */
.dh-chat-changes {
    display: grid;
    gap: 2px;
    max-height: 16rem;
    overflow-y: auto;
    margin: 6px 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-xxs);
}

/* A long proposal shows its first lines under a fade (Show more opens it). */
.dh-chat-changes.is-clamped {
    max-height: calc(6 * 1.45em + 10px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.dh-chat-proposal .dh-chat-proposal-more {
    margin: -2px 0 4px;
    padding: 0;
    font-size: var(--font-size-xs);
}

.dh-chat-change {
    display: inline-flex;
    gap: 4px;
    margin: 0;
    color: var(--dc-color-text);
}

.dh-chat-change--add > span:first-child {
    color: var(--dc-color-accent);
}

.dh-chat-change--cut > span:first-child {
    color: var(--dc-color-danger-text);
}

.dh-chat-proposal-reason {
    color: var(--dc-color-text-muted);
    font-size: var(--font-size-xs);
}

.dh-chat-proposal-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.dh-chat-proposal-actions .dc-button {
    height: 28px;
}

.dh-chat-proposal-actions[hidden],
.dh-chat-proposal-status[hidden] {
    display: none;
}

.dh-chat-proposal .dh-chat-proposal-status {
    margin-top: 6px;
    color: var(--dc-color-text-subtle);
    font-size: var(--font-size-xs);
}

/* What Yes does to the deck: the counts, the price change, the budget. */
.dh-chat-proposal .dh-chat-proposal-effect {
    margin: 2px 0 4px;
    color: var(--dc-color-text-muted);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

.dh-chat-proposal .dh-chat-proposal-undo {
    padding: 0;
    font-size: var(--font-size-xs);
}

/* DeckCheck's facts beside a card name in a reply: any problem. */
.dh-chat-card-mark {
    margin-left: 4px;
    font-size: var(--font-size-xxs);
    white-space: nowrap;
    padding: 0 5px;
    border: 1px solid var(--dc-color-danger);
    border-radius: var(--dc-radius-pill);
    color: var(--dc-color-danger-text);
}

/* Controls under a reply: Copy and Flag show on hover, and stay once used.
   Try again (a failed reply) always shows. */
.dh-chat-reply-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
}

.dh-chat-reply-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dc-color-text-subtle);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.dh-chat-reply-action svg {
    width: 12px;
    height: 12px;
}

.dh-chat-msg--assistant:hover .dh-chat-reply-action,
.dh-chat-reply-action:focus-visible,
.dh-chat-flag.is-flagged,
.dh-chat-copy.is-copied {
    opacity: 1;
}

.dh-chat-copy:hover {
    color: var(--dc-color-text);
}

.dh-chat-copy.is-copied {
    color: var(--dc-color-accent);
}

.dh-chat-flag:hover,
.dh-chat-flag.is-flagged {
    color: var(--dc-color-danger-text);
}

@media (hover: none) {
    .dh-chat-reply-action {
        opacity: 0.6;
    }
}

.dh-chat-flag-form {
    display: grid;
    gap: 6px;
    margin-top: 6px;
    padding: 8px;
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    background-color: var(--dc-layer-raised);
}

.dh-chat-flag-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.dh-chat-flag-status {
    margin-right: auto;
    color: var(--dc-color-danger-text);
    font-size: var(--font-size-xs);
}

.dh-chat-flag-thanks {
    color: var(--dc-color-text-subtle);
    font-size: var(--font-size-xs);
}

/* "Added to Memory: ..." after a reply. */
.dh-chat-msg--memory {
    align-self: flex-start;
    color: var(--dc-color-text-subtle);
    font-size: var(--font-size-xs);
}

/* Example prompts in an empty chat fill the input box. */
.dh-chat-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.dh-chat-example {
    padding: 5px 10px;
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-pill);
    background: transparent;
    color: var(--dc-color-text-muted);
    font-size: var(--font-size-xs);
    text-align: left;
    cursor: pointer;
}

.dh-chat-example:hover {
    background-color: var(--dc-layer-raised-hover);
    color: var(--dc-color-text);
}

.dh-chat-footer {
    flex-shrink: 0;
    padding: 0 12px 12px;
}

.dh-chat-footer[hidden] {
    display: none;
}

/* Composer: the input on top, the system row below it (credit ring left,
   notices middle, send right). Same frame as .dc-input-container. */
.dh-chat-composer {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    background: var(--dc-layer-sunken);
    transition:
        border-color var(--dc-duration-fast) var(--dc-easing-standard),
        box-shadow var(--dc-duration-fast) var(--dc-easing-standard);
}

.dh-chat-composer:hover {
    border-color: var(--dc-border-hover);
}

.dh-chat-composer:focus-within {
    border-color: var(--dc-border-focus);
    box-shadow: var(--dc-shadow-focus);
}

.dh-chat-input {
    display: block;
    max-height: 140px;
    padding: 10px 12px;
    font-size: var(--font-size-base);
    line-height: 1.5;
    resize: none;
}

.dh-chat-input::placeholder {
    color: var(--dc-color-text-subtle);
}

.dh-chat-system-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 8px;
    border-top: 1px solid var(--dc-border);
}

.dh-chat-notice {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    color: var(--dc-color-text-subtle);
    font-size: var(--font-size-xs);
    line-height: 1.35;
}

.dh-chat-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--dc-radius-2);
    background: var(--dc-color-accent);
    color: var(--dc-color-background);
    cursor: pointer;
    transition:
        background-color var(--dc-duration-fast) var(--dc-easing-standard),
        opacity var(--dc-duration-fast) var(--dc-easing-standard);
}

.dh-chat-send:hover:not(:disabled) {
    background: var(--dc-color-accent-hover);
}

.dh-chat-send:focus-visible {
    box-shadow: var(--dc-shadow-focus);
    outline: none;
}

.dh-chat-send:disabled {
    opacity: 0.35;
    cursor: default;
}

.dh-chat-send svg {
    width: 18px;
    height: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .dh-chat-status:not(.is-error) {
        animation: none;
        background: none;
        color: var(--dc-color-text-subtle);
    }

    .dh-chat-launcher.has-reply,
    .dh-chat-launcher.is-intro::after {
        animation: none;
    }

}

.dh-chat-empty {
    margin: 0;
    color: var(--dc-color-text-subtle);
    font-size: var(--font-size-sm);
}

.dh-chat-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* History toolbars: Back and Select; in select mode, Cancel, Select all,
   and Delete. The last control sits at the right. */
.dh-chat-history-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    margin-bottom: 8px;
}

.dh-chat-history-bar > :last-child:not(:first-child) {
    margin-left: auto;
}

.dh-chat-history-bar--select,
.dh-chat-history-check,
.dh-chat-history-view.is-selecting .dh-chat-history-bar,
.dh-chat-history-view.is-selecting .dh-chat-history-delete {
    display: none;
}

.dh-chat-history-view.is-selecting .dh-chat-history-bar--select {
    display: flex;
}

.dh-chat-history-view.is-selecting .dh-chat-history-check {
    display: flex;
}

.dh-chat-history-row {
    display: flex;
    align-items: center;
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-2);
    background: var(--dc-layer-sunken);
}

.dh-chat-history-row:hover {
    border-color: var(--dc-border-hover);
    background: var(--dc-layer-sunken-hover);
}

.dh-chat-history-check {
    padding-left: 12px;
}

.dh-chat-history-item {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    background: none;
    color: var(--dc-color-text);
    text-align: left;
    cursor: pointer;
}

.dh-chat-history-title {
    font-weight: var(--font-weight-medium);
}

.dh-chat-history-meta {
    color: var(--dc-color-text-subtle);
    font-size: var(--font-size-sm);
}

.dh-chat-history-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--dc-radius-3);
    background: none;
    color: var(--dc-color-text-subtle);
    cursor: pointer;
}

.dh-chat-history-delete:hover,
.dh-chat-history-delete:focus-visible {
    background: var(--dc-layer-raised);
    color: var(--dc-color-danger-text);
    outline: none;
}

.dh-chat-history-delete svg {
    width: 16px;
    height: 16px;
}

/* Response Quality: the shared trigger and menu, sized for the composer,
   beside the credit ring. The menu opens upward. */
.dh-chat-quality {
    position: relative;
    display: flex;
    align-items: center;
    align-self: flex-end;
    flex-shrink: 0;
    height: 32px;
}

.dh-chat-quality .dh-chat-quality-trigger {
    width: auto; /* the shared phone rule stretches the modal's trigger */
    gap: 4px;
    font-size: var(--font-size-xs);
}

.dh-chat-quality .credit-confirm-intelligence-chevron {
    width: 12px;
    height: 12px;
}

.dh-chat-quality .dh-chat-quality-menu {
    width: min(260px, calc(100vw - 48px));
}

@media (max-width: 640px) {
    .dh-chat-launcher-label {
        display: none;
    }

    .dh-chat-launcher {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
    }

    .dh-chat-panel {
        right: 8px;
        left: 8px;
        width: auto;
    }
}