/* ============================================
   SHARED BUTTON VISUAL CONTRACT

   Feature styles own dimensions and layout. This file is deliberately loaded
   last so every standard button gets the same neutral, hover, active/primary,
   focus, disabled, and danger states. New controls should use `.ui-button`
   plus the state classes below instead of defining their own colors.
   ============================================ */

:root {
    --ui-button-bg: var(--input-bg, var(--button-bg, var(--widget-bg)));
    --ui-button-group-bg: var(--input-bg, var(--button-bg, var(--widget-bg)));
    --ui-button-border: var(--button-border, var(--border-color));
    --ui-button-text: var(--text-muted);
    --ui-button-hover-border: var(--accent-color);
    --ui-button-active-bg: var(--accent-gradient);
    --ui-button-active-border: var(--accent-color);
    --ui-button-active-text: var(--button-primary-text, white);
    --ui-button-danger-outline: var(--danger-color);
    --ui-button-error-outline: var(--error-color, var(--danger-color));
    --ui-button-warning-outline: var(--warning-color);
    --ui-button-radius: 6px;
    --ui-button-transition: background 0.2s ease, border-color 0.2s ease,
        color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease,
        transform 0.2s ease, translate 0.2s ease, scale 0.2s ease,
        filter 0.2s ease;
}

/* The one way for a feature sheet to add to the list above.

   The selector groups below are wide enough that one member with a `:not()`
   lifts the whole group's specificity, so a feature rule that restates
   `transition` loses on the cascade however reasonable its selector — and it
   loses silently, which is how the phone tab bar stopped animating its grow
   and shrink. A control that also animates layout instead sets this property
   on itself: a declaration on the element always beats a value inherited from
   `:root`, whatever the selectors involved. The default is a no-op entry
   rather than nothing, because an empty one would leave a trailing comma and
   void the whole declaration. */
:root {
    --ui-button-extra-transition: outline-color 0s;
}

/* Unclassed buttons inherit the same default instead of the old flat accent. */
button {
    background: var(--ui-button-bg);
    border: 1px solid var(--ui-button-border);
    color: var(--ui-button-text);
    transition: var(--ui-button-transition), var(--ui-button-extra-transition);
}

/* Every enabled button gets the same restrained physical response. Feature
   hover rules can still change color, outline, glow, or brightness. */
button:not(:disabled):not([aria-disabled="true"]):not(.btn-unavailable):hover {
    border-color: var(--ui-button-hover-border);
    translate: 0 -1px;
    scale: 1.012;
}

/* Segmented controls share one dark track. Their inactive segments disappear
   into that track until hover supplies the temporary theme outline. */
:is(
    .panel-tabs,
    .sub-tab-bar,
    .search-mode-tabs,
    .legal-tabs,
    .base-modal-tabs,
    .advanced-toggle-group,
    .toolbar-view-toggles
) {
    background: var(--ui-button-group-bg);
}

/* Search sits directly on the app canvas, so its segmented track should not
   introduce a subtly different panel/input strip behind the two tabs. */
.search-mode-tabs {
    --ui-button-group-bg: var(--bg-color);
}

/* Library owns only the action row's dimensions. Its controls deliberately
   inherit all visual states from the shared button contract above. */
.library-deck-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.library-deck-action {
    padding: 8px 12px;
}

.library-deck-action--load {
    flex: 1;
    padding-inline: 8px;
}

.library-retention-action {
    width: 100%;
    margin-top: 6px;
    padding: 7px 10px;
    font-weight: 700;
}

/* Standard outlined controls and selectable buttons.

   Every member of this group is one class. That is load-bearing, not tidiness:
   the selected-state group below is `:is(...):is(.active, ...)`, two classes,
   and it wins only because this one is one. A member written as, say,
   `.thing:not(.a):not(.b)` would lift this whole group to three and quietly
   repaint every active tab in the app with its resting background. Use
   `:not(.a, .b)`, which matches the same elements and counts as one. */
:is(
    .ui-button,
    .panel-tab,
    .lib-tab-btn,
    .search-mode-tab,
    .toggle-btn,
    .deck-filter-btn,
    .view-toggle-btn,
    .toolbar-filter-btn,
    .toolbar-view-btn,
    .command-chip,
    .command-control,
    .command-action,
    .synergy-toolbar-btn,
    .filter-action-btn,
    .clear-filters-btn,
    .btn.secondary,
    .secondary-button,
    .btn-secondary,
    .cancel-btn,
    .pod-toggle-btn,
    .pod-secondary-btn,
    .goldfish-action-btn:not(.primary, .danger),
    .tour-nav-btn:not(.tour-next-btn),
    .page-btn,
    .pro-cal-nav-btn,
    .pro-cal-today-btn,
    .upgrade-nav-btn,
    .upgrade-swap-btn,
    .notepad-toolbar-btn,
    .notepad-btn:not(.close-btn),
    .card-preview-vendor-button,
    .card-preview-view-button,
    .vendor-btn,
    .legal-tab-btn,
    .base-modal-tab,
    /* Admin Control Panel */
    .btn-icon,
    .promo-btn,
    .promo-icon-btn,
    .revenue-subtab
) {
    background: var(--ui-button-bg);
    border: 1px solid var(--ui-button-border);
    color: var(--ui-button-text);
    border-radius: var(--ui-button-radius);
    box-shadow: none;
    filter: none;
    transition: var(--ui-button-transition), var(--ui-button-extra-transition);
}

/* Inactive hover stays outlined; only the border takes on the theme color. */
:is(
    .ui-button,
    .panel-tab,
    .lib-tab-btn,
    .search-mode-tab,
    .toggle-btn,
    .deck-filter-btn,
    .view-toggle-btn,
    .toolbar-filter-btn,
    .toolbar-view-btn,
    .synergy-toolbar-btn,
    .filter-action-btn,
    .clear-filters-btn,
    .btn.secondary,
    .secondary-button,
    .btn-secondary,
    .cancel-btn,
    .pod-toggle-btn,
    .pod-secondary-btn,
    .goldfish-action-btn:not(.primary, .danger),
    .tour-nav-btn:not(.tour-next-btn),
    .page-btn,
    .pro-cal-nav-btn,
    .pro-cal-today-btn,
    .upgrade-nav-btn,
    .upgrade-swap-btn,
    .notepad-toolbar-btn,
    .notepad-btn:not(.close-btn),
    .card-preview-vendor-button,
    .card-preview-view-button,
    .vendor-btn,
    .legal-tab-btn,
    .base-modal-tab,
    /* Admin Control Panel */
    .btn-icon,
    .promo-btn,
    .promo-icon-btn,
    .revenue-subtab
):not(.active):not(.lib-tab-btn--active):not(.search-mode-tab--active):not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-disabled="true"]):not(:disabled):hover {
    background: var(--ui-button-bg);
    border-color: var(--ui-button-hover-border);
    color: var(--text-color);
    box-shadow: none;
    filter: none;
}

/* Semantic buttons keep their own stronger treatment on hover — and it is BOLD:
   text/icon color and background flip to the error palette, not just the border.
   The semantic styling is authoritative so a generic accent rule can never
   replace an error, danger, or warning affordance.

   THE SYSTEM: any destructive control opts in by carrying a class with "danger"
   in it (the `danger-btn` token is the conventional choice for controls whose
   own class name doesn't already say so). Every enrolled button gets this hover
   and the danger-colored focus ring below by default — no bespoke hover rules. */
:is(
    button.ui-button--danger,
    button.danger-btn,
    button.danger,
    button[class*="-danger"],
    button[class*="danger-"],
    .collection-history-revert,
    .panel-tab.invalid,
    .removal-btn
):not(:disabled):hover {
    color: var(--danger-color) !important;
    background: var(--danger-bg, rgba(220, 53, 69, 0.12)) !important;
    border-color: var(--ui-button-danger-outline) !important;
    box-shadow: 0 0 0 1px var(--ui-button-danger-outline),
        0 4px 12px var(--danger-bg) !important;
}

/* The focus ring matches: a destructive control must never show the accent-blue
   ring, which reads as "safe action" while pointing at a delete. */
:is(
    button.ui-button--danger,
    button.danger-btn,
    button.danger,
    button[class*="-danger"],
    button[class*="danger-"],
    .collection-history-revert,
    .removal-btn
):not(:disabled):focus-visible {
    outline: 2px solid var(--ui-button-danger-outline) !important;
    outline-offset: 1px;
}

:is(
    button.ui-button--error,
    button.error,
    button[class*="-error"],
    button[class*="error-"]
):not(:disabled):hover {
    color: var(--danger-color) !important;
    background: var(--danger-bg, rgba(220, 53, 69, 0.12)) !important;
    border-color: var(--ui-button-error-outline) !important;
    box-shadow: 0 0 0 1px var(--ui-button-error-outline),
        0 4px 12px var(--danger-bg) !important;
}

:is(
    button.ui-button--warning,
    button.warning,
    button[class*="-warning"],
    button[class*="warning-"]
):not(:disabled):hover {
    border-color: var(--ui-button-warning-outline) !important;
    box-shadow: 0 0 0 1px var(--ui-button-warning-outline),
        0 4px 12px var(--warning-bg) !important;
}

/* Selected controls and persistent tab states. */
:is(
    .ui-button,
    .panel-tab,
    .lib-tab-btn,
    .search-mode-tab,
    .toggle-btn,
    .deck-filter-btn,
    .view-toggle-btn,
    .toolbar-filter-btn,
    .toolbar-view-btn,
    .synergy-toolbar-btn,
    .legal-tab-btn,
    .base-modal-tab,
    /* Admin Control Panel */
    .revenue-subtab
):is(.active, .lib-tab-btn--active, .search-mode-tab--active, [aria-pressed="true"], [aria-selected="true"]),
.dropdown-group.active .deck-control-btn {
    background: var(--ui-button-active-bg);
    border-color: var(--ui-button-active-border);
    color: var(--ui-button-active-text);
    box-shadow: 0 4px 12px var(--accent-glow);
    filter: none;
}

/* Primary actions use the same visual state as an active selection. */
:is(
    .ui-button--primary,
    .action-btn:not(.danger-btn),
    .search-btn,
    .btn.primary,
    .primary-button,
    .primary-btn,
    .confirm-btn,
    .tour-cta-btn,
    .tour-next-btn,
    .auth-submit-btn,
    .sign-in-btn,
    .pro-gate-upgrade-btn,
    .deck-control-btn:not(.secondary),
    .view-more-relative-btn,
    .games-auth-btn,
    .games-site-button-primary,
    .lobby-begin-btn,
    .mulligan-run-btn,
    .specter-submit-btn,
    .art-sleuth-submit-btn,
    .game-retry-btn,
    .game-share-btn,
    .save-btn:not(.removal-btn),
    .suggest-btn,
    .synergy-report-btn,
    /* Admin Control Panel */
    .btn-primary,
    .promo-btn-primary
) {
    background: var(--ui-button-active-bg);
    border: 1px solid var(--ui-button-active-border);
    color: var(--ui-button-active-text);
    border-radius: var(--ui-button-radius);
    box-shadow: 0 4px 12px var(--accent-glow);
    filter: none;
    transition: var(--ui-button-transition), var(--ui-button-extra-transition);
}

:is(
    .ui-button--primary,
    .action-btn:not(.danger-btn),
    .search-btn,
    .btn.primary,
    .primary-button,
    .primary-btn,
    .confirm-btn,
    .tour-cta-btn,
    .tour-next-btn,
    .auth-submit-btn,
    .sign-in-btn,
    .pro-gate-upgrade-btn,
    .deck-control-btn:not(.secondary),
    .view-more-relative-btn,
    .games-auth-btn,
    .games-site-button-primary,
    .lobby-begin-btn,
    .mulligan-run-btn,
    .specter-submit-btn,
    .art-sleuth-submit-btn,
    .game-retry-btn,
    .game-share-btn,
    .save-btn:not(.removal-btn),
    .suggest-btn,
    .synergy-report-btn
):not(:disabled):hover,
:is(
    .panel-tab.active,
    .lib-tab-btn--active,
    .search-mode-tab--active,
    .toggle-btn.active,
    .deck-filter-btn.active,
    .view-toggle-btn.active,
    .toolbar-filter-btn.active,
    .toolbar-view-btn.active,
    .synergy-toolbar-btn.active,
    .legal-tab-btn.active,
    .base-modal-tab.active
):not(:disabled):hover {
    background: var(--ui-button-active-bg);
    border-color: var(--ui-button-active-border);
    color: var(--ui-button-active-text);
    box-shadow: 0 5px 15px var(--accent-glow);
    filter: brightness(1.06);
}

/* Destructive actions retain their semantic color but follow the same
   outlined -> filled state model. */
:is(.ui-button--danger, .danger-btn, .goldfish-action-btn.danger, .removal-btn) {
    background: var(--ui-button-bg);
    border: 1px solid var(--danger-border, var(--danger-color));
    color: var(--danger-color);
    box-shadow: none;
    filter: none;
}

:is(.ui-button--danger, .danger-btn, .goldfish-action-btn.danger, .removal-btn):not(:disabled):hover {
    background: var(--danger-bg-hover, var(--danger-bg));
    border-color: var(--danger-color);
    color: var(--danger-color);
    box-shadow: 0 4px 12px var(--danger-bg);
    filter: none;
}

/* These are the individual segments of a grouped control. A transparent
   one-pixel border prevents layout movement when hover reveals the outline. */
:is(
    .panel-tabs .panel-tab:not(.active),
    .sub-tab-bar .lib-tab-btn:not(.lib-tab-btn--active),
    .search-mode-tabs .search-mode-tab:not(.search-mode-tab--active),
    .legal-tabs .legal-tab-btn:not(.active),
    .base-modal-tabs .base-modal-tab:not(.active),
    .advanced-toggle-group .toggle-btn:not(.active),
    .toolbar-view-toggles .toolbar-view-btn:not(.active)
) {
    background: var(--ui-button-group-bg);
    border-color: transparent;
    box-shadow: none;
}

:is(
    .panel-tabs .panel-tab:not(.active),
    .sub-tab-bar .lib-tab-btn:not(.lib-tab-btn--active),
    .search-mode-tabs .search-mode-tab:not(.search-mode-tab--active),
    .legal-tabs .legal-tab-btn:not(.active),
    .base-modal-tabs .base-modal-tab:not(.active),
    .advanced-toggle-group .toggle-btn:not(.active),
    .toolbar-view-toggles .toolbar-view-btn:not(.active)
):not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--ui-button-group-bg);
    border-color: var(--ui-button-hover-border);
    color: var(--text-color);
    box-shadow: none;
    filter: none;
}

/* A soft-disabled segment: visible so the feature stays discoverable, but
   inert — it explains itself on click instead of switching (the signed-out
   Notifications inbox tab). The aria-disabled guards above keep the hover
   affordances off it; this keeps it visibly muted at rest. */
.base-modal-tabs .base-modal-tab[aria-disabled="true"] {
    color: var(--text-muted);
    opacity: 0.6;
}

/* Keyboard focus is visible and theme-aware for every button style. */
button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

button:disabled,
button[aria-disabled="true"],
.btn-unavailable {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
    filter: grayscale(0.35);
    transform: none;
    translate: none;
    scale: none;
}

button:disabled:hover,
button[aria-disabled="true"]:hover,
.btn-unavailable:hover {
    transform: none;
    translate: none;
    scale: none;
}