/* Athar Hub shared top/action controls.
 * `athar-back-button` is used across profile, settings, search, review,
 * notifications, inbox and detail pages. It must never fall back to native
 * browser button chrome. */
.athar-back-button {
  display: inline-grid !important;
  inline-size: var(--athar-touch, 44px) !important;
  block-size: var(--athar-touch, 44px) !important;
  min-inline-size: var(--athar-touch, 44px) !important;
  min-block-size: var(--athar-touch, 44px) !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--athar-border, #E3D9C4) 72%, transparent) !important;
  border-radius: 14px !important;
  outline: 0;
  background: color-mix(in srgb, var(--athar-surface, #fff) 88%, var(--athar-soft, #F1EADC)) !important;
  color: var(--athar-hub, #1F4D3B) !important;
  box-shadow: 0 2px 6px rgba(30, 25, 15, .045) !important;
  cursor: pointer;
  transition:
    background-color var(--athar-motion-fast, 120ms) var(--athar-ease, ease),
    border-color var(--athar-motion-fast, 120ms) var(--athar-ease, ease),
    box-shadow var(--athar-motion-fast, 120ms) var(--athar-ease, ease),
    transform var(--athar-motion-fast, 120ms) var(--athar-ease, ease);
  -webkit-tap-highlight-color: transparent;
}

.athar-back-button hub-icon,
.athar-back-button svg {
  pointer-events: none;
}

.athar-back-button:hover {
  border-color: color-mix(in srgb, var(--athar-hub, #1F4D3B) 16%, var(--athar-border, #E3D9C4)) !important;
  background: var(--athar-soft-green, #E4EBE3) !important;
}

.athar-back-button:active {
  background: color-mix(in srgb, var(--athar-soft-green, #E4EBE3) 78%, var(--athar-surface, #fff)) !important;
  box-shadow: none !important;
  transform: scale(.96);
}

.athar-back-button:focus-visible {
  outline: 2px solid var(--athar-accent, #1F4D3B) !important;
  outline-offset: 3px !important;
}

.athar-back-button:disabled,
.athar-back-button[aria-disabled='true'] {
  opacity: .42;
  cursor: default;
  box-shadow: none !important;
  transform: none;
}

/* Small-screen headers should feel airy, not like a toolbar of boxed controls. */
@media (max-width: 599px) {
  .athar-back-button {
    border-color: transparent !important;
    background: var(--athar-soft, #F1EADC) !important;
    box-shadow: none !important;
  }

  .athar-back-button:hover,
  .athar-back-button:active {
    background: var(--athar-soft-green, #E4EBE3) !important;
  }
}