/* Noreh & Ngopi v25.19.2 — Universal Interaction Feedback
   Purpose: make taps/clicks unmistakable without implying that an async action succeeded. */

:root{
  --nn-feedback-ring: rgba(246,168,0,.58);
  --nn-feedback-glow: rgba(246,168,0,.24);
}

/* Smooth but fast: feedback must feel immediate. */
button,
a,
[role="button"],
.btn,
.nav button,
.tabs button,
summary{
  transition:
    transform .10s ease,
    box-shadow .16s ease,
    filter .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    opacity .16s ease;
  -webkit-tap-highlight-color: rgba(246,168,0,.22);
}

/* Mouse/trackpad hover: "this is clickable". */
@media (hover:hover){
  button:not(:disabled):hover,
  a:hover,
  [role="button"]:not([aria-disabled="true"]):hover,
  .btn:not(:disabled):hover,
  .nav button:not(:disabled):hover,
  .tabs button:not(:disabled):hover,
  summary:hover{
    filter: brightness(1.10);
    box-shadow: 0 0 0 1px rgba(246,168,0,.18), 0 5px 16px rgba(0,0,0,.24);
  }
}

/* Physical press state: immediate tactile cue. */
button:not(:disabled):active,
a:active,
[role="button"]:not([aria-disabled="true"]):active,
.btn:not(:disabled):active,
.nav button:not(:disabled):active,
.tabs button:not(:disabled):active,
summary:active{
  transform: translateY(1px) scale(.975);
  filter: brightness(1.18);
  box-shadow: 0 0 0 3px var(--nn-feedback-glow) !important;
}

/* Short flash after release. JS adds this for ~420ms. */
.nn-clicked{
  animation: nn-click-flash .42s ease-out !important;
}
@keyframes nn-click-flash{
  0%   { box-shadow: 0 0 0 0 var(--nn-feedback-ring); filter: brightness(1.22); }
  45%  { box-shadow: 0 0 0 5px rgba(246,168,0,.22); }
  100% { box-shadow: 0 0 0 0 rgba(246,168,0,0); filter: none; }
}

/* Persistent "where am I?" state. */
.nav button.active,
.tabs button.active,
button[aria-pressed="true"],
a[aria-current="page"]{
  box-shadow: inset 4px 0 0 #f6a800, 0 0 0 1px rgba(246,168,0,.22);
  filter: brightness(1.08);
}

/* Inventory pill tabs are horizontal, so no left inset. */
.tabs button.active{
  box-shadow: 0 0 0 2px rgba(246,168,0,.34);
}

/* Keyboard accessibility. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.nav button:focus-visible,
.tabs button:focus-visible,
summary:focus-visible{
  outline: 3px solid #f6a800 !important;
  outline-offset: 3px;
}

/* Disabled actions must look obviously unavailable. */
button:disabled,
.btn:disabled,
[aria-disabled="true"]{
  opacity: .42 !important;
  cursor: not-allowed !important;
  filter: grayscale(.25);
  transform: none !important;
  box-shadow: none !important;
}

/* Touch devices: slightly larger feedback target without altering layout. */
@media (pointer:coarse){
  button,
  .btn,
  .nav button,
  .tabs button,
  a[role="button"]{
    touch-action: manipulation;
  }
}