/* Mili-Maus button material: warm light, a lower edge and a soft cast shadow.
   Only small controls move; scroll-world containers keep their own transforms. */
:is(
  .primary,
  .secondary,
  .outline-button,
  .light-button,
  .danger-button,
  .button,
  .family-link,
  .child-filters button,
  .desk-icon,
  .provider-shell .sidebar nav button,
  .world-chapters a[aria-current="step"]
) {
  --button-edge: #87473538;
  background-image: linear-gradient(
    180deg,
    #ffffff24 0%,
    #ffffff08 48%,
    #713b2c0a 100%
  );
  box-shadow:
    inset 0 1px 0 #ffffff66,
    inset 0 -1px 0 #713b2c14,
    0 3px 0 var(--button-edge),
    0 6px 12px #713b2c16;
  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
:is(.primary, .danger-button, .button.dark, .family-link) {
  --button-edge: #572b20;
  box-shadow:
    inset 0 1px 0 #ffffff42,
    inset 0 -1px 0 #00000012,
    0 3px 0 var(--button-edge),
    0 7px 16px #713b2c26;
}
/* Opaque cream lets outlined actions read as tangible surfaces. */
.outline-button {
  background-color: var(--surface, #fffcf8);
}
@media (hover: hover) and (pointer: fine) {
  :is(
      .primary,
      .secondary,
      .outline-button,
      .light-button,
      .danger-button,
      .button,
      .family-link,
      .child-filters button,
      .desk-icon,
      .provider-shell .sidebar nav button,
      .world-chapters a[aria-current="step"]
    ):not(:disabled):not([aria-disabled="true"]):hover {
    background-image: linear-gradient(
      180deg,
      #ffffff30,
      #ffffff08 60%,
      #713b2c0a
    );
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 #ffffff66,
      inset 0 -1px 0 #713b2c14,
      0 4px 0 var(--button-edge),
      0 10px 18px #713b2c24;
  }
}
:is(
    .primary,
    .secondary,
    .outline-button,
    .light-button,
    .danger-button,
    .button,
    .family-link,
    .child-filters button,
    .desk-icon,
    .provider-shell .sidebar nav button,
    .world-chapters a[aria-current="step"]
  ):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 3px #713b2c1c,
    0 1px 0 var(--button-edge),
    0 2px 4px #713b2c12;
  transition-duration: 80ms;
}
:is(
  .primary,
  .secondary,
  .outline-button,
  .light-button,
  .danger-button,
  .button,
  .family-link,
  .child-filters button,
  .desk-icon,
  .provider-shell .sidebar nav button,
  .world-chapters a[aria-current="step"]
):focus-visible {
  outline: 3px solid var(--green, #365f50);
  outline-offset: 5px;
}
:is(
  .primary,
  .secondary,
  .outline-button,
  .light-button,
  .danger-button,
  .button,
  .family-link,
  .child-filters button,
  .desk-icon,
  .provider-shell .sidebar nav button
):is(:disabled, [aria-disabled="true"]) {
  background-image: none;
  box-shadow: inset 0 0 0 1px #87473524;
  transform: none;
  cursor: not-allowed;
}
/* Touch never retains a lifted hover after a tap. */
@media (hover: none) {
  .button.dark:hover {
    transform: none;
  }
  .button.dark:active {
    transform: translateY(2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(
    .primary,
    .secondary,
    .outline-button,
    .light-button,
    .danger-button,
    .button,
    .family-link,
    .child-filters button,
    .desk-icon,
    .provider-shell .sidebar nav button,
    .world-chapters a[aria-current="step"]
  ) {
    transition: none !important;
  }
  :is(
    .primary,
    .secondary,
    .outline-button,
    .light-button,
    .danger-button,
    .button,
    .family-link,
    .child-filters button,
    .desk-icon,
    .provider-shell .sidebar nav button,
    .world-chapters a[aria-current="step"]
  ):is(:hover, :active) {
    transform: none !important;
  }
}