/* Important declarations in this layer outrank legacy unlayered ID/hover rules,
   including page-local !important colors, without changing control layout or gates. */
@layer button-theme {
  :root {
    --button-blue: #4AB8E8;
    --button-blue-hover: #72C8ED;
    --button-blue-active: #38A6D8;
    --button-ink: #141C24;
    --button-border: #2E86C1;
    --button-focus-inner: #FFFFFF;
    --button-focus-outer: #141C24;
    --button-ready-glow: rgba(74, 184, 232, .6);
    --button-close-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23141C24' d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --button-menu-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23141C24' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* Only explicit action links are filled; navigation links and red tour
     screenshot annotations deliberately retain their existing presentation. */
  :is(button, input[type="button"], input[type="submit"], input[type="reset"],
      .btn, a.primary-button, a.quiet-button, a.tour-download, .tour-controls a) {
    background-color: var(--button-blue) !important;
    color: var(--button-ink) !important;
    border-color: var(--button-border) !important;
    text-shadow: none !important;
    --bs-btn-color: var(--button-ink);
    --bs-btn-hover-color: var(--button-ink);
    --bs-btn-active-color: var(--button-ink);
    --bs-btn-disabled-color: var(--button-ink);
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"],
      .btn, a.primary-button, a.quiet-button, a.tour-download, .tour-controls a):not(.btn-close) {
    background-image: none !important;
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"],
      .btn, a.primary-button, a.quiet-button, a.tour-download, .tour-controls a)
      :where(*) {
    color: inherit !important;
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"],
      .btn, a.primary-button, a.quiet-button, a.tour-download, .tour-controls a):hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    background-color: var(--button-blue-hover) !important;
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"],
      .btn, a.primary-button, a.quiet-button, a.tour-download, .tour-controls a):is(:active, [aria-pressed="true"], .active):not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    background-color: var(--button-blue-active) !important;
  }

  .login-btn-valid {
    box-shadow: 0 0 8px 2px var(--button-ready-glow) !important;
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"],
      .btn, a.primary-button, a.quiet-button, a.tour-download, .tour-controls a):focus-visible {
    outline: 3px solid var(--button-focus-outer) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px var(--button-focus-inner) !important;
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"],
      .btn, a.primary-button, a.quiet-button, a.tour-download, .tour-controls a):is(:disabled, .disabled, [aria-disabled="true"]) {
    cursor: not-allowed !important;
    outline-color: var(--button-border) !important;
  }

  .btn-close {
    background-image: var(--button-close-icon) !important;
    filter: none !important;
  }

  .btn-close:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    opacity: 1 !important;
  }

  .navbar-toggler-icon {
    background-image: var(--button-menu-icon) !important;
  }
}