/* Motion tokens (Apple-like) */
:root {
  --abm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --abm-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --abm-motion-xfast: 120ms;
  --abm-motion-fast: 180ms;
  --abm-motion-base: 260ms;
  --abm-motion-slow: 420ms;
  --abm-motion-xslow: 650ms;

  /* subtle elevation used across interactive elements */
  --abm-elev-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* ABM-C-LIFE-001 */
.abm-life__rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.abm-life__tab {
  appearance: none;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  border-radius: 999px;
  padding: 10px 12px;
  font: inherit;
  cursor: pointer;
  transition:
    transform var(--abm-motion-fast) var(--abm-ease-out),
    box-shadow var(--abm-motion-fast) var(--abm-ease-out),
    border-color var(--abm-motion-xfast) var(--abm-ease-out),
    background-color var(--abm-motion-xfast) var(--abm-ease-out);
}

.abm-life__tab:hover {
  transform: translateY(-1px);
  box-shadow: var(--abm-elev-1);
}

.abm-life__tab[aria-selected="true"],
.abm-life__tab[aria-expanded="true"] {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-1px);
  box-shadow: var(--abm-elev-1);
}

.abm-life__panelWrap {
  margin-top: 18px;
}

.abm-life__panel[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .abm-life__rail {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .abm-life__item .abm-life__tab {
    width: 100%;
    text-align: left;
    border-radius: 16px;
    padding: 14px 14px;
  }

  .abm-life__item .abm-life__panel {
    margin-top: 10px;
  }
}

/* ABM-C-BSO-STACK-001 */
.abm-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.abm-stack__list {
  display: grid;
  gap: 10px;
}

.abm-stack__item {
  text-align: left;
  width: 100%;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  border-radius: 16px;
  padding: 14px 14px;
  cursor: pointer;
  transition:
    transform var(--abm-motion-fast) var(--abm-ease-out),
    box-shadow var(--abm-motion-fast) var(--abm-ease-out),
    border-color var(--abm-motion-xfast) var(--abm-ease-out);
}

.abm-stack__item:hover {
  transform: translateY(-1px);
  box-shadow: var(--abm-elev-1);
}

.abm-stack__item[aria-expanded="true"] {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-1px);
  box-shadow: var(--abm-elev-1);
}

.abm-stack__title {
  display: block;
  font-weight: 650;
}

.abm-stack__oneLine {
  display: block;
  color: var(--wp--preset--color--muted);
  margin-top: 4px;
}

.abm-stack__detail[hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .abm-stack {
    grid-template-columns: 1fr;
  }
}

/* Bottom-sheet dialog */
dialog.abm-dialog {
  border: 0;
  padding: 0;
  width: min(920px, 92vw);
  max-width: 920px;
  border-radius: 18px;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--text);

  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--abm-motion-base) var(--abm-ease-out),
    transform var(--abm-motion-base) var(--abm-ease-out);
}

dialog.abm-dialog[open] {
  opacity: 1;
  transform: translateY(0);
}

dialog.abm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
  transition: background var(--abm-motion-base) var(--abm-ease-out);
}

.abm-dialog__frame {
  position: relative;
  padding: 18px;
}

.abm-dialog__close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition:
    transform var(--abm-motion-fast) var(--abm-ease-out),
    border-color var(--abm-motion-xfast) var(--abm-ease-out);
}

.abm-dialog__close:hover {
  transform: translateY(-1px);
  border-color: var(--wp--preset--color--accent);
}

@media (max-width: 767px) {
  dialog.abm-dialog {
    width: 100vw;
    max-width: 100vw;
    border-radius: 18px 18px 0 0;
    margin: 0;
    position: fixed;
    left: 0;
    bottom: 0;
  }
}

/* ABM-C-TOGGLE-001 */
.abm-toggle {
  display: inline-flex;
  gap: 8px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  border-radius: 999px;
  padding: 6px;
}

.abm-toggle__btn {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
  color: var(--wp--preset--color--text);
  transition:
    background-color var(--abm-motion-xfast) var(--abm-ease-out),
    color var(--abm-motion-xfast) var(--abm-ease-out),
    transform var(--abm-motion-fast) var(--abm-ease-out);
}

.abm-toggle__btn:hover {
  transform: translateY(-1px);
}

.abm-toggle__btn.is-active {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--background);
}

.abm-toggle__pane[hidden] {
  display: none;
}

/* Reduced motion */
.abm-reduce-motion .abm-life__tab,
.abm-reduce-motion .abm-stack__item,
.abm-reduce-motion .abm-toggle__btn,
.abm-reduce-motion dialog.abm-dialog,
.abm-reduce-motion dialog.abm-dialog::backdrop,
.abm-reduce-motion .abm-dialog__close {
  transition: none;
}

.abm-reduce-motion .abm-life__tab:hover,
.abm-reduce-motion .abm-stack__item:hover,
.abm-reduce-motion .abm-toggle__btn:hover,
.abm-reduce-motion .abm-life__tab[aria-selected="true"],
.abm-reduce-motion .abm-life__tab[aria-expanded="true"],
.abm-reduce-motion .abm-stack__item[aria-expanded="true"] {
  transform: none;
  box-shadow: none;
}