/* --- design-engineering baseline: focus, tap targets, motion ----------- */
/* Last in the concat on purpose: the :focus-visible rules below must beat
   the equal-specificity `input:focus { outline: none }` in 05-forms.css. */

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

.btn:focus-visible,
.chip:focus-visible,
.icon-btn:focus-visible,
.display-toggle__btn:focus-visible,
.segment button:focus-visible,
.tab:focus-visible,
.tab-add:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 34px visuals keep their size; an invisible halo grows the touch target
   to ~44px. Interactive elements only: a halo on plain .chip spans would
   swallow taps meant for their neighbours. */
.icon-btn,
button.chip,
.display-toggle__btn,
.scan-row__dismiss {
  position: relative;
}
.icon-btn::before,
button.chip::before,
.display-toggle__btn::before,
.scan-row__dismiss::before {
  content: "";
  position: absolute;
  inset: -5px;
}

.chip {
  padding: 9px 11px;
}

/* Press feedback for the button-like controls .btn doesn't already cover
   (it has its own shadow-squash :active). Never scale(0): .97 reads as a
   press, not a disappearance. */
.icon-btn,
button.chip,
.display-toggle__btn,
.tab,
.tab-add,
.segment button {
  transition: transform 100ms ease;
}
.icon-btn:active,
button.chip:active,
.display-toggle__btn:active,
.tab:active,
.tab-add:active,
.segment button:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .notice,
  .edit-panel,
  .dropdown-panel {
    animation: none;
  }
  /* `animation: none` here would also drop the 200ms delay, reintroducing
     the one-frame flash on a fast load that the delay exists to prevent.
     A 1ms animation keeps the delayed appearance without any motion. */
  .skeleton-card,
  .skeleton-row {
    animation: skeleton-in 1ms linear 200ms both;
  }
  .btn,
  .icon-btn,
  button.chip,
  .display-toggle__btn,
  .tab,
  .tab-add,
  .segment button {
    transition: none;
  }
}