/* Interaction states and motion (Task R). One shared layer for every button, chip and clickable card, so hover, active, disabled and
   pressed look and behave the same on every page. Loaded after the page's own stylesheets. Written with :where() so a component can
   still set its own colors; this file only adds feedback.

   Feedback is a tint laid over the component's own colors with an inset shadow, so it works on accent, ink, outline and text buttons alike:
     hover     a light ink tint (never the only signal: active and focus are separate, and touch has no hover)
     active    a stronger tint and a 1px press; this is what a finger sees on a phone
     pressed   aria-pressed="true" keeps its own selected look (page CSS) and still tints on hover and active
     disabled  45 percent opacity, no tint, no press, a not-allowed cursor (disabled is never shown by color alone: the label stays)
   Focus rings are not set here: they stay 3px solid ink with a 2px offset, defined with each component and in a11y.css.
   Motion: 120ms on tint and press. Under prefers-reduced-motion nothing animates and nothing moves (the tint still shows). */

:where(
  .btn,
  .icon-btn,
  .nbell__btn,
  .nbell__mark,
  .nbell__primary,
  .hero__button,
  .legal__btn,
  .err__primary,
  .auth__btn,
  .auth__primary,
  .account-page__primary,
  .my-rfps__btn,
  .ar__btn,
  .ar__primary,
  .cookie-banner__primary,
  .site-footer__news-btn,
  .pl-retry,
  .pl-cancel,
  .notify__submit,
  .pl-attach__btn,
  .pl-confirm__btn,
  .pl-confirm__primary,
  .pl-draft__retry,
  .post-who__out,
  .post-gate__link,
  .post-rfp__primary,
  .post-rfp__back,
  .pricing__link,
  .pricing__seg button,
  .rfp-contact__btn,
  .rfp-detail__primary,
  .rfp-interest__withdraw,
  .rfp-filters__btn,
  .rfp-filters__chip,
  .rfp-catbar__pill,
  .manage__btn,
  .ready__primary,
  .rfp-respond__primary,
  .rfp-start__primary,
  .rfp-respond__save,
  .rfp-start__btn,
  .rfp-row__retry,
  .rfp-row__view,
  .vendor-row__view,
  .ss__btn,
  .saved__btn,
  .vc__btn,
  .vc__primary,
  .vedit__save,
  .vg__btn,
  .vg__primary,
  .vp__contact,
  .vp__save,
  .past-more__btn,
  .tff a.tff__btn,
  .bbc__link,
  .gr__skip
) {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--motion, 120ms ease-out), transform var(--motion, 120ms ease-out), background-color var(--motion, 120ms ease-out), border-color var(--motion, 120ms ease-out);
}
@media (hover: hover) {
:where(
    .btn,
    .icon-btn,
    .nbell__btn,
    .nbell__mark,
    .nbell__primary,
    .hero__button,
    .legal__btn,
    .err__primary,
    .auth__btn,
    .auth__primary,
    .account-page__primary,
    .my-rfps__btn,
    .ar__btn,
    .ar__primary,
    .cookie-banner__primary,
    .site-footer__news-btn,
    .pl-retry,
    .pl-cancel,
    .notify__submit,
    .pl-attach__btn,
    .pl-confirm__btn,
    .pl-confirm__primary,
    .pl-draft__retry,
    .post-who__out,
    .post-gate__link,
    .post-rfp__primary,
    .post-rfp__back,
    .pricing__link,
    .pricing__seg button,
    .rfp-contact__btn,
    .rfp-detail__primary,
    .rfp-interest__withdraw,
    .rfp-filters__btn,
    .rfp-filters__chip,
    .rfp-catbar__pill,
    .manage__btn,
    .ready__primary,
    .rfp-respond__primary,
    .rfp-start__primary,
    .rfp-respond__save,
    .rfp-start__btn,
    .rfp-row__retry,
    .rfp-row__view,
    .vendor-row__view,
    .ss__btn,
    .saved__btn,
    .vc__btn,
    .vc__primary,
    .vedit__save,
    .vg__btn,
    .vg__primary,
    .vp__contact,
    .vp__save,
    .past-more__btn,
    .tff a.tff__btn,
    .bbc__link,
    .gr__skip
  ):not(:disabled, [aria-disabled="true"], .is-disabled):hover {
    box-shadow: inset 0 0 0 100px rgba(22, 32, 46, 0.07);
  }
}
:where(
  .btn,
  .icon-btn,
  .nbell__btn,
  .nbell__mark,
  .nbell__primary,
  .hero__button,
  .legal__btn,
  .err__primary,
  .auth__btn,
  .auth__primary,
  .account-page__primary,
  .my-rfps__btn,
  .ar__btn,
  .ar__primary,
  .cookie-banner__primary,
  .site-footer__news-btn,
  .pl-retry,
  .pl-cancel,
  .notify__submit,
  .pl-attach__btn,
  .pl-confirm__btn,
  .pl-confirm__primary,
  .pl-draft__retry,
  .post-who__out,
  .post-gate__link,
  .post-rfp__primary,
  .post-rfp__back,
  .pricing__link,
  .pricing__seg button,
  .rfp-contact__btn,
  .rfp-detail__primary,
  .rfp-interest__withdraw,
  .rfp-filters__btn,
  .rfp-filters__chip,
  .rfp-catbar__pill,
  .manage__btn,
  .ready__primary,
  .rfp-respond__primary,
  .rfp-start__primary,
  .rfp-respond__save,
  .rfp-start__btn,
  .rfp-row__retry,
  .rfp-row__view,
  .vendor-row__view,
  .ss__btn,
  .saved__btn,
  .vc__btn,
  .vc__primary,
  .vedit__save,
  .vg__btn,
  .vg__primary,
  .vp__contact,
  .vp__save,
  .past-more__btn,
  .tff a.tff__btn,
  .bbc__link,
  .gr__skip
):not(:disabled, [aria-disabled="true"], .is-disabled):active {
  box-shadow: inset 0 0 0 100px rgba(22, 32, 46, 0.16);
  transform: translateY(1px);
}
/* Text fields: the border darkens on hover; focus keeps the 3px ink ring (set with each field and in a11y.css) */
@media (hover: hover) {
  :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea):not(:disabled, [readonly]):hover { border-color: var(--color-text, #16202E); }
}

/* Disabled: reads as unavailable by opacity and cursor, keeps its label, gives no hover or press feedback */
:where(button, input, select, textarea, .btn, .hero__button, a[aria-disabled="true"], .is-disabled):is(:disabled, [aria-disabled="true"], .is-disabled) {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Clickable cards other than the listing rows (their own files set the border and shadow feedback) */
.bbc__link:active { border-color: var(--color-text, #16202E); }

/* Reduced motion: no transitions, no press movement, no smooth scrolling. The tint stays, so feedback is still visible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  :where(.btn, .icon-btn, .hero__button, .bbc__link):active, [class]:active { transform: none !important; }
}