/* v10: bounded interaction refinements; load after the incumbent page styles. */
:root {
  --interface-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --interface-copper-text: #8e4325;
  --interface-secondary-text: #555e50;
}

/* Small text retains the established copper / earth palette on the lab surface. */
.addition-page .interaction-note {
  color: var(--interface-secondary-text);
}
.addition-page .connection-status,
.addition-page .response-recipient .recipient-state,
.addition-page .scenario-tabs button[aria-pressed="true"] {
  color: var(--interface-copper-text);
}

/* The regular copper outline is too close to the footer's dark background. */
.site-footer a:focus-visible {
  outline-color: var(--copper-light);
}

/* Frequent controls keep their current state immediately. Only press/lift moves. */
.button {
  transition: transform 100ms var(--interface-ease-out);
}
.button:hover {
  background: var(--copper);
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .button:where(:not(:disabled):not([aria-disabled="true"])):hover {
    background: var(--interface-copper-text);
    transform: translateY(-2px);
  }
}
.button:where(:not(:disabled):not([aria-disabled="true"])):active {
  transform: scale(0.97);
  transition-duration: 120ms;
}
.nav-group > summary span {
  transition: transform 160ms var(--interface-ease-out);
}

/* A keyboard command must not wait for a hover, press or caret transition. */
.button:focus-visible,
.button:focus-visible:hover,
.button:focus-visible:active {
  transform: none;
  transition: none;
}
.nav-group > summary:focus-visible span {
  transition: none;
}

/* Expand the real target box on touch; typography and desktop density stay put. */
@media (pointer: coarse) {
  .site-footer a:not(.wordmark) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .response-recipient button,
  .sample-record button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .button:hover,
  .button:active {
    transform: none;
    transition: none;
  }
  .nav-group > summary span {
    transition: none;
  }
}

/* Keep the save button's keyboard outline clear of its local status message. */
.case-builder #case-export-status:not(:empty) {
  margin-top: 10px;
  transition: none;
}