:where(button:not(.modal-backdrop):not(.vehicle-sheet-backdrop), [role="button"]) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 70ms linear, color 70ms linear, border-color 70ms linear, opacity 70ms linear;
}

:where(button:not(.modal-backdrop):not(.vehicle-sheet-backdrop), [role="button"]) :where(span, strong, h1, h2, h3, p, b) {
  transition: color 70ms linear;
}

:where(button:not(.modal-backdrop):not(.vehicle-sheet-backdrop), [role="button"]) img:is([src*="guide-arrow"], [src*="accordion-icon"]) {
  transition: filter 70ms linear, opacity 70ms linear;
}

:where(button:not(.modal-backdrop):not(.vehicle-sheet-backdrop), [role="button"]):focus-visible {
  outline: 2px solid #777;
  outline-offset: 2px;
}

:where(button:not(.modal-backdrop):not(.vehicle-sheet-backdrop), [role="button"]):not(.primary-button):not(.login-button):not(.photo-guide-link):not(.text-link-button):not(.hamburger-menu__link):not(.vehicle-details__header):not(.vehicle-accordion):not(.nav-item):not(.nav-primary):not(.vehicle-sheet__save):not(.vehicle-upload-button--library):not(:disabled):not([aria-disabled="true"]):active {
  background: #f2f2f2 !important;
  border-color: #ccc !important;
  color: #777 !important;
}

:where(button:not(.modal-backdrop):not(.vehicle-sheet-backdrop), [role="button"]):not(.primary-button):not(.vehicle-details__header):not(.vehicle-accordion):not(.nav-item):not(.nav-primary):not(.vehicle-sheet__save):not(.vehicle-upload-button--library):not(:disabled):not([aria-disabled="true"]):active :where(span:not(.read-state), strong, h1, h2, h3, p, b) {
  color: #777 !important;
}

:where(button:not(.modal-backdrop):not(.vehicle-sheet-backdrop), [role="button"]):not(.primary-button):not(.vehicle-details__header):not(.vehicle-accordion):not(.nav-item):not(.nav-primary):not(.vehicle-sheet__save):not(.vehicle-upload-button--library):not(:disabled):not([aria-disabled="true"]):active img:is([src*="guide-arrow"], [src*="accordion-icon"]) {
  filter: grayscale(1);
  opacity: .5;
}

@media (hover: hover) and (pointer: fine) {
  :where(button:not(.modal-backdrop):not(.vehicle-sheet-backdrop), [role="button"]):not(.guide-card):not(.primary-button):not(.login-button):not(.photo-guide-link):not(.text-link-button):not(.hamburger-menu__link):not(.vehicle-details__header):not(.vehicle-accordion):not(.nav-item):not(.nav-primary):not(.vehicle-sheet__save):not(.vehicle-upload-button--library):not(:disabled):not([aria-disabled="true"]):hover {
    background: #f5f5f5 !important;
    border-color: #ccc !important;
    color: #777 !important;
  }

  :where(button:not(.modal-backdrop):not(.vehicle-sheet-backdrop), [role="button"]):not(.guide-card):not(.primary-button):not(.vehicle-details__header):not(.vehicle-accordion):not(.nav-item):not(.nav-primary):not(.vehicle-sheet__save):not(.vehicle-upload-button--library):not(:disabled):not([aria-disabled="true"]):hover :where(span:not(.read-state), strong, h1, h2, h3, p, b) {
    color: #777 !important;
  }

  :where(button:not(.modal-backdrop):not(.vehicle-sheet-backdrop), [role="button"]):not(.guide-card):not(.primary-button):not(.vehicle-details__header):not(.vehicle-accordion):not(.nav-item):not(.nav-primary):not(.vehicle-sheet__save):not(.vehicle-upload-button--library):not(:disabled):not([aria-disabled="true"]):hover img:is([src*="guide-arrow"], [src*="accordion-icon"]) {
    filter: grayscale(1);
    opacity: .5;
  }
}

/* Text-link actions react through foreground color only. */
:where(.login-button, .photo-guide-link, .text-link-button) {
  background: transparent !important;
  border-color: transparent !important;
}

:where(.login-button, .photo-guide-link, .text-link-button):not(:disabled):is(:hover, :active) {
  background: transparent !important;
  border-color: transparent !important;
  color: #777 !important;
}

.back-to-mypage {
  background: transparent;
  transition: color 70ms linear;
}

.back-to-mypage:is(:hover, :active) {
  background: transparent;
  color: #777;
}

.hamburger-menu__link,
.hamburger-menu__link:is(:hover, :active) {
  background: #fff !important;
}

/* Red action buttons keep their gradient and respond with a short color shift. */
:where(.primary-button, .nav-primary, .vehicle-sheet__save, .vehicle-upload-button--library) {
  transition: filter 70ms linear, color 70ms linear;
}

:where(.primary-button, .nav-primary, .vehicle-sheet__save, .vehicle-upload-button--library) :where(span, strong, b) {
  transition: color 70ms linear;
}

@media (hover: hover) and (pointer: fine) {
  :where(.primary-button, .nav-primary, .vehicle-sheet__save, .vehicle-upload-button--library):not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(.88) saturate(.92);
    color: #fff !important;
  }
}

:where(.primary-button, .nav-primary, .vehicle-sheet__save, .vehicle-upload-button--library):not(:disabled):not([aria-disabled="true"]):active {
  filter: brightness(.78) saturate(.9);
  color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
  #open-task-editor:not(:disabled):hover {
    border-color: #d90d0d;
    color: #d90d0d !important;
    filter: none !important;
  }
}

#open-task-editor:not(:disabled):active {
  border-color: #d90d0d;
  color: #d90d0d !important;
  filter: none !important;
}

#open-task-editor {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 90ms ease-out, color 90ms ease-out;
}

#open-task-editor::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #fff;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease-out;
}

#open-task-editor > span {
  position: relative;
  z-index: 1;
  color: inherit;
  transition: color 90ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  #open-task-editor:not(:disabled):hover::after {
    opacity: 1;
  }
}

#open-task-editor:not(:disabled):active::after {
  opacity: 1;
}

.bottom-nav .nav-primary {
  overflow: hidden;
  transition: color 90ms cubic-bezier(.2, .8, .2, 1);
}

.bottom-nav .nav-primary::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  box-shadow: inset 0 0 0 2px #d90d0d;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms cubic-bezier(.2, .8, .2, 1);
}

.bottom-nav .nav-primary > span {
  position: relative;
  z-index: 1;
  transition: color 90ms cubic-bezier(.2, .8, .2, 1);
}

.bottom-nav .nav-primary .nav-car img {
  transition: filter 90ms cubic-bezier(.2, .8, .2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .bottom-nav .nav-primary:not(:disabled):hover {
    color: #d90d0d !important;
    filter: none !important;
  }

  .bottom-nav .nav-primary:not(:disabled):hover::after {
    opacity: 1;
  }

  .bottom-nav .nav-primary:not(:disabled):hover .nav-car img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(97%) saturate(4302%) hue-rotate(355deg) brightness(89%) contrast(102%);
  }
}

.bottom-nav .nav-primary:not(:disabled):active {
  color: #d90d0d !important;
  filter: none !important;
}

.bottom-nav .nav-primary:not(:disabled):active::after {
  opacity: 1;
}

.bottom-nav .nav-primary:not(:disabled):active .nav-car img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(97%) saturate(4302%) hue-rotate(355deg) brightness(89%) contrast(102%);
}

/* Bottom navigation changes only its label and icon color. */
.bottom-nav .nav-item {
  background: transparent !important;
  border-color: transparent !important;
  color: #24272a;
  transition: color 70ms linear;
}

.bottom-nav .nav-item .nav-icon img:not(.nav-badge) {
  filter: brightness(0) saturate(100%);
  transition: filter 70ms linear;
}

.bottom-nav .nav-item:is(.is-active, [aria-current="page"]),
.bottom-nav .nav-item:not(:disabled):active {
  background: transparent !important;
  color: #d90d0d !important;
}

.bottom-nav .nav-item:is(.is-active, [aria-current="page"]) .nav-icon img:not(.nav-badge),
.bottom-nav .nav-item:not(:disabled):active .nav-icon img:not(.nav-badge) {
  filter: invert(13%) sepia(97%) saturate(4302%) hue-rotate(355deg) brightness(89%) contrast(102%);
}

@media (hover: hover) and (pointer: fine) {
  .bottom-nav .nav-item:not(:disabled):hover {
    background: transparent !important;
    color: #d90d0d !important;
  }

  .bottom-nav .nav-item:not(:disabled):hover .nav-icon img:not(.nav-badge) {
    filter: invert(13%) sepia(97%) saturate(4302%) hue-rotate(355deg) brightness(89%) contrast(102%);
  }
}

/* Read/unread badges are status indicators, so card interaction must not recolor them. */
.guide-card .read-state,
.guide-card:is(:hover, :active) .read-state {
  background: var(--mota-red) !important;
  color: #fff !important;
  transition: none !important;
}

.guide-card .read-state.is-read,
.guide-card:is(:hover, :active) .read-state.is-read {
  background: var(--soft-border) !important;
  color: var(--ink) !important;
}

/* Guide-card rollover preserves the normal palette and only strengthens the frame. */
@media (hover: hover) and (pointer: fine) {
  .guide-card[role="button"]:hover {
    border: 1px solid #24272a !important;
    background: #fff !important;
    color: var(--ink) !important;
  }

  .guide-card[role="button"]:hover :where(h3, p, .guide-link, .guide-link__label) {
    background: transparent !important;
    color: var(--ink) !important;
  }

  .guide-card[role="button"]:hover .guide-link__arrow img {
    filter: none !important;
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(button:not(.modal-backdrop):not(.vehicle-sheet-backdrop), [role="button"]) {
    transition: none;
  }
}