/* Shared navigation feedback: contents carousel and Promptkit controls.
   Keep the approved white round arrows in their resting state. The feedback is
   temporary: hover (mouse), pressed (finger/mouse), confirmed (after click). */
.chapters-controls button:not(:disabled),
.chapters-mobile-controls button:not(:disabled),
.kit-nav .kit-arrow,
.kit-nav .button,
.kit-grid .kit-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .14s ease, border-color .14s ease,
              box-shadow .14s ease, transform .14s ease, color .14s ease;
}

/* Hover is limited to genuine mouse/trackpad input, never sticky on touch. */
@media (hover: hover) and (pointer: fine) {
  .chapters-controls button:not(:disabled):hover,
  .chapters-mobile-controls button:not(:disabled):hover,
  .kit-nav .kit-arrow:hover,
  .kit-nav .button:hover,
  .kit-grid .kit-card:hover {
    background: #eaf2ff;
    border-color: #7d9fce;
    color: #06245f;
    box-shadow: 0 0 0 3px rgba(185, 201, 229, .28);
  }
}

/* Immediate tactile feedback while a pointer or finger is held down. */
.chapters-controls button:not(:disabled):active,
.chapters-mobile-controls button:not(:disabled):active,
.kit-nav .kit-arrow:active,
.kit-nav .button:active,
.kit-grid .kit-card:active,
.chapters-controls button.is-pressed,
.chapters-mobile-controls button.is-pressed,
.kit-nav .kit-arrow.is-pressed,
.kit-nav .button.is-pressed,
.kit-grid .kit-card.is-pressed {
  background: #dce9fb;
  border-color: #557fb9;
  color: #06245f;
  box-shadow: 0 0 0 3px rgba(85, 127, 185, .18);
  transform: scale(.96);
}

/* A separate short confirmation remains visible after finger/mouse release.
   The contents arrows can stay on-page; kit links show it before navigating. */
.chapters-controls button.is-activated,
.chapters-mobile-controls button.is-activated,
.kit-nav .kit-arrow.is-activated,
.kit-nav .button.is-activated,
.kit-grid .kit-card.is-activated {
  background: #d2e3fa;
  border-color: #3868a9;
  color: #06245f;
  box-shadow: inset 0 0 0 1px #8aaad4, 0 0 0 3px rgba(85, 127, 185, .22);
  transform: scale(.97);
}

/* Only the clickable foreword tile responds to hover, touch and click.
   The ten informational chapter tiles retain their static styling on every device. */
.chapters-track .foreword-button {
  -webkit-tap-highlight-color: transparent;
  transition: background-color .14s ease, border-color .14s ease,
              box-shadow .14s ease, transform .14s ease;
}

@media (hover: hover) and (pointer: fine) {
  .chapters-track .foreword-button:hover {
    background: #eaf2ff;
    border-color: #7d9fce;
    box-shadow: 0 0 0 3px rgba(185, 201, 229, .28);
    transform: translateY(calc(-2px * var(--site-scale)));
  }
}

.chapters-track .foreword-button:active,
.chapters-track .foreword-button.is-pressed {
  background: #dce9fb;
  border-color: #557fb9;
  box-shadow: 0 0 0 3px rgba(85, 127, 185, .18);
  transform: scale(.98);
}

/* Short confirmation after tapping/clicking the foreword preview. */
.chapters-track .foreword-button.is-activated {
  background: #d2e3fa;
  border-color: #3868a9;
  box-shadow: inset 0 0 0 1px #8aaad4, 0 0 0 3px rgba(85, 127, 185, .22);
  transform: scale(.985);
}

/* Keyboard navigation has a clear, accessible visible focus ring. */
.chapters-controls button:focus-visible,
.chapters-mobile-controls button:focus-visible,
.kit-nav .kit-arrow:focus-visible,
.kit-nav .button:focus-visible,
.kit-grid .kit-card:focus-visible {
  outline: 2px solid #3868a9;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .chapters-controls button,
  .chapters-mobile-controls button,
  .kit-nav .kit-arrow,
  .kit-nav .button,
  .kit-grid .kit-card,
  .chapters-track .foreword-button {
    transition: none;
  }
}