/* ======================================================================
   AquariumLesson Member Experience System
   Phase 3C: Core member primitives

   Scope:
   - Buttons
   - Chips / status pills
   - Tabs / segmented controls
   - Basic cards / surfaces

   This file intentionally avoids tanks, profile hero/actions/modals,
   dashboard hero panels, header/search/cart/account sheet, auth modal,
   saved bookmark buttons, and tanks sheets/composers.
   ====================================================================== */

#alMemberArea {
  --almx-btn-height: var(--almx-button-height);
  --almx-btn-padding-x: 14px;
  --almx-btn-gap: 8px;
  --almx-btn-radius: var(--almx-button-radius);
  --almx-btn-bg: var(--almx-color-surface);
  --almx-btn-text: var(--almx-color-text);
  --almx-btn-border: color-mix(in srgb, var(--almx-color-border) 84%, #fff);
  --almx-btn-shadow: var(--almx-shadow-xs);
  --almx-btn-hover-shadow: var(--almx-shadow-sm);
  --almx-btn-focus-ring: var(--almx-glow-brand);
  --almx-btn-primary-bg: linear-gradient(180deg, var(--almx-button-primary-bg) 0%, var(--almx-color-brand-strong) 100%);
  --almx-btn-primary-border: var(--almx-color-brand-strong);
  --almx-btn-primary-text: var(--almx-button-primary-text);
  --almx-btn-secondary-bg: var(--almx-color-surface-muted);
  --almx-btn-secondary-text: var(--almx-color-text);
  --almx-btn-ghost-bg: transparent;
  --almx-btn-ghost-text: var(--almx-button-ghost-text);
  --almx-btn-danger-bg: var(--almx-color-danger);
  --almx-btn-danger-text: #fff;
  --almx-icon-btn-size: var(--almx-control-h);

  --almx-chip-height: 28px;
  --almx-chip-padding-x: 10px;
  --almx-status-pill-height: 26px;

  --almx-tabs-gap: 16px;
  --almx-tab-height: 34px;
  --almx-segmented-padding: 3px;
  --almx-segmented-bg: color-mix(in srgb, var(--almx-color-surface-muted) 76%, #fff);

  --almx-surface-bg: var(--almx-color-surface);
  --almx-surface-border: color-mix(in srgb, var(--almx-color-border) 88%, #fff);
  --almx-surface-radius: var(--almx-card-radius);
  --almx-surface-shadow: var(--almx-shadow-xs);
  --almx-card-head-padding: 16px 18px;
  --almx-card-body-padding: 16px;
  --almx-card-foot-padding: 14px 18px;
}

#alMemberArea .almx-btn,
#alMemberArea .almx-icon-btn,
#alMemberArea:not(.al-tanks) .al-btn:not(:where(#alProfile *)):not(:where(#alDash *)):not(.alpp-follow):not(.alpp-share):not([data-save]):not([data-bookmark]),
#alAccount .al-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--almx-btn-gap) !important;
  min-height: var(--almx-btn-height) !important;
  padding: 0 var(--almx-btn-padding-x) !important;
  border: 1px solid var(--almx-btn-border) !important;
  border-radius: var(--almx-btn-radius) !important;
  background: var(--almx-btn-bg) !important;
  color: var(--almx-btn-text) !important;
  box-shadow: var(--almx-btn-shadow) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  user-select: none !important;
  appearance: none !important;
  transition:
    transform var(--almx-motion-fast) var(--almx-motion-ease),
    box-shadow var(--almx-motion-fast) var(--almx-motion-ease),
    border-color var(--almx-motion-fast) var(--almx-motion-ease),
    background-color var(--almx-motion-fast) var(--almx-motion-ease) !important;
}

#alMemberArea .almx-btn:hover,
#alMemberArea .almx-icon-btn:hover,
#alMemberArea:not(.al-tanks) .al-btn:not(:where(#alProfile *)):not(:where(#alDash *)):not(.alpp-follow):not(.alpp-share):not([data-save]):not([data-bookmark]):hover,
#alAccount .al-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--almx-btn-hover-shadow) !important;
}

#alMemberArea .almx-btn:active,
#alMemberArea .almx-icon-btn:active,
#alMemberArea:not(.al-tanks) .al-btn:not(:where(#alProfile *)):not(:where(#alDash *)):not(.alpp-follow):not(.alpp-share):not([data-save]):not([data-bookmark]):active,
#alAccount .al-btn:active {
  transform: translateY(0) scale(.99) !important;
  box-shadow: var(--almx-btn-shadow) !important;
}

#alMemberArea .almx-btn:focus-visible,
#alMemberArea .almx-icon-btn:focus-visible,
#alMemberArea:not(.al-tanks) .al-btn:not(:where(#alProfile *)):not(:where(#alDash *)):not(.alpp-follow):not(.alpp-share):not([data-save]):not([data-bookmark]):focus-visible,
#alAccount .al-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--almx-btn-focus-ring), var(--almx-btn-shadow) !important;
}

#alMemberArea .almx-btn:disabled,
#alMemberArea .almx-btn[disabled],
#alMemberArea .almx-icon-btn:disabled,
#alMemberArea .almx-icon-btn[disabled],
#alMemberArea:not(.al-tanks) .al-btn:disabled:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea:not(.al-tanks) .al-btn[disabled]:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-btn:disabled,
#alAccount .al-btn[disabled] {
  cursor: not-allowed !important;
  opacity: .55 !important;
  transform: none !important;
  box-shadow: var(--almx-btn-shadow) !important;
}

#alMemberArea .almx-btn--primary,
#alMemberArea:not(.al-tanks) .al-btn--primary:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-btn--primary {
  border-color: var(--almx-btn-primary-border) !important;
  background: var(--almx-btn-primary-bg) !important;
  color: var(--almx-btn-primary-text) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--almx-color-brand) 22%, transparent) !important;
}

#alMemberArea .almx-btn--secondary {
  background: var(--almx-btn-secondary-bg) !important;
  color: var(--almx-btn-secondary-text) !important;
}

#alMemberArea .almx-btn--ghost,
#alMemberArea:not(.al-tanks) .al-btn--ghost:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-btn--ghost {
  background: var(--almx-btn-ghost-bg) !important;
  color: var(--almx-btn-ghost-text) !important;
  box-shadow: none !important;
}

#alMemberArea .almx-btn--danger,
#alMemberArea:not(.al-tanks) .al-btn--danger:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-btn--danger {
  border-color: color-mix(in srgb, var(--almx-color-danger) 86%, #000) !important;
  background: var(--almx-btn-danger-bg) !important;
  color: var(--almx-btn-danger-text) !important;
}

#alMemberArea .almx-btn--sm,
#alMemberArea:not(.al-tanks) .al-btn--sm:not(:where(#alProfile *)):not(:where(#alDash *)) {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: var(--almx-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#alMemberArea .almx-icon-btn {
  inline-size: var(--almx-icon-btn-size) !important;
  block-size: var(--almx-icon-btn-size) !important;
  padding: 0 !important;
  border-radius: var(--almx-radius-pill) !important;
}

#alMemberArea .almx-chip,
#alMemberArea .almx-status-pill,
#alMemberArea:not(.al-tanks) .al-pill:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-account-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: var(--almx-chip-height) !important;
  padding: 0 var(--almx-chip-padding-x) !important;
  border: 1px solid var(--almx-chip-border) !important;
  border-radius: var(--almx-chip-radius) !important;
  background: var(--almx-chip-bg) !important;
  color: var(--almx-chip-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#alMemberArea .almx-status-pill {
  min-height: var(--almx-status-pill-height) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

#alMemberArea .almx-chip--success {
  border-color: color-mix(in srgb, var(--almx-color-success) 30%, var(--almx-color-border)) !important;
  background: color-mix(in srgb, var(--almx-color-success) 8%, #fff) !important;
  color: color-mix(in srgb, var(--almx-color-success) 78%, #0f172a) !important;
}

#alMemberArea .almx-chip--warning {
  border-color: color-mix(in srgb, var(--almx-color-warning) 30%, var(--almx-color-border)) !important;
  background: color-mix(in srgb, var(--almx-color-warning) 8%, #fff) !important;
  color: color-mix(in srgb, var(--almx-color-warning) 78%, #0f172a) !important;
}

#alMemberArea .almx-chip--danger {
  border-color: color-mix(in srgb, var(--almx-color-danger) 30%, var(--almx-color-border)) !important;
  background: color-mix(in srgb, var(--almx-color-danger) 7%, #fff) !important;
  color: color-mix(in srgb, var(--almx-color-danger) 82%, #0f172a) !important;
}

#alMemberArea .almx-chip--info {
  border-color: color-mix(in srgb, var(--almx-color-info) 28%, var(--almx-color-border)) !important;
  background: color-mix(in srgb, var(--almx-color-info) 6%, #fff) !important;
  color: color-mix(in srgb, var(--almx-color-info) 78%, #0f172a) !important;
}

#alMemberArea .almx-tabs,
#alMemberArea:not(.al-tanks) .al-context-nav:not(:where(#alProfile *)):not(:where(#alDash *)) {
  display: block !important;
  max-width: 100% !important;
  margin: 0 0 var(--almx-space-3) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

#alMemberArea .almx-tabs__list,
#alMemberArea:not(.al-tanks) .al-context-nav__list:not(:where(#alProfile *)):not(:where(#alDash *)) {
  display: flex !important;
  align-items: center !important;
  gap: var(--almx-tabs-gap) !important;
  min-width: max-content !important;
}

#alMemberArea .almx-tab,
#alMemberArea:not(.al-tanks) .al-context-nav__link:not(:where(#alProfile *)):not(:where(#alDash *)) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--almx-tab-height) !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--almx-tab-bg) !important;
  color: var(--almx-tab-text) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

#alMemberArea .almx-tab[aria-selected="true"],
#alMemberArea .almx-tab.is-active,
#alMemberArea:not(.al-tanks) .al-context-nav__link[aria-selected="true"]:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea:not(.al-tanks) .al-context-nav__link[aria-current="page"]:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea:not(.al-tanks) .al-context-nav__link.is-active:not(:where(#alProfile *)):not(:where(#alDash *)) {
  color: var(--almx-tab-active-text) !important;
}

#alMemberArea .almx-segmented {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: var(--almx-segmented-padding) !important;
  border: 1px solid var(--almx-tab-border) !important;
  border-radius: var(--almx-tab-radius) !important;
  background: var(--almx-segmented-bg) !important;
}

#alMemberArea .almx-segmented__item {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: calc(var(--almx-tab-radius) - 3px) !important;
}

#alMemberArea .almx-segmented__item[aria-selected="true"],
#alMemberArea .almx-segmented__item.is-active {
  background: var(--almx-tab-active-bg) !important;
  color: var(--almx-tab-active-text) !important;
  box-shadow: var(--almx-shadow-xs) !important;
}

#alMemberArea .almx-card,
#alMemberArea:not(.al-tanks) .al-card:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-card {
  background: linear-gradient(180deg, var(--almx-card-bg) 0%, var(--almx-card-bg) 72%, var(--almx-color-surface-muted) 100%) !important;
  border: 1px solid var(--almx-surface-border) !important;
  border-radius: var(--almx-card-radius) !important;
  box-shadow: var(--almx-surface-shadow) !important;
  overflow: hidden !important;
}

#alMemberArea .almx-surface {
  background: var(--almx-surface-bg) !important;
  border: 1px solid var(--almx-surface-border) !important;
  border-radius: var(--almx-surface-radius) !important;
  box-shadow: var(--almx-surface-shadow) !important;
}

#alMemberArea .almx-card__head,
#alMemberArea:not(.al-tanks) .al-card-head:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-card-head {
  padding: var(--almx-card-head-padding) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--almx-color-border) 75%, #fff) !important;
}

#alMemberArea .almx-card__body,
#alMemberArea:not(.al-tanks) .al-card-body:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-card-body {
  padding: var(--almx-card-body-padding) !important;
  min-width: 0 !important;
}

#alMemberArea .almx-card__foot,
#alMemberArea:not(.al-tanks) .al-card-foot:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-card-foot {
  padding: var(--almx-card-foot-padding) !important;
  color: var(--almx-color-text-muted) !important;
}

@media (max-width: 640px) {
  #alMemberArea {
    --almx-btn-padding-x: 12px;
    --almx-tabs-gap: 12px;
    --almx-card-head-padding: 14px 16px;
    --almx-card-body-padding: 14px;
    --almx-card-foot-padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #alMemberArea .almx-btn,
  #alMemberArea .almx-icon-btn,
  #alMemberArea .almx-tab,
  #alMemberArea .almx-segmented__item {
    transition: none !important;
  }
}