/* Interaction feedback for every page (ui-feedback.js; linked once in app/layout.tsx). Zero-specificity :where()
   rules, so a component's own press or busy style always wins. */

/* Pressed: every button answers the press at once, never when disabled. */
@media (prefers-reduced-motion: no-preference) {
  :where(button, [role="button"], input[type="submit"]) { transition: scale 120ms ease-out; }
  :where(button, [role="button"], input[type="submit"]):not(:disabled, [aria-disabled="true"]):active { scale: 0.97; }
}
@media (prefers-reduced-motion: reduce) {
  :where(button, [role="button"], input[type="submit"]):not(:disabled, [aria-disabled="true"]):active { opacity: 0.8; }
}

/* Working: the click is guarded at once; after 150 ms (so quick requests don't flicker) the label gives way to a
   spinner in place, same size, no layout shift. Animation-filled, so it wins over any component's own colors. */
[data-pending] { cursor: progress; }
[data-pending="on"] { animation: uif-pending 0s linear 150ms forwards; }
[data-pending="on"] > * { animation: uif-hide 0s linear 150ms forwards; }
@keyframes uif-pending {
  to {
    color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6' stroke-opacity='.3'/%3E%3Cpath d='M8 2a6 6 0 0 1 6 6' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
  }
}
@keyframes uif-hide { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* No spin: three still dots. */
  @keyframes uif-pending {
    to {
      color: transparent;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23888'%3E%3Ccircle cx='3' cy='8' r='1.6'/%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3Ccircle cx='13' cy='8' r='1.6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
    }
  }
}

/* A link is loading a new page: a thin bar at the top after 150 ms (no fake percentage). */
html[data-navigating]::before {
  content: ""; position: fixed; inset: 0 0 auto; height: 2px; z-index: 2147483647; pointer-events: none;
  background: linear-gradient(90deg, transparent, #2A6FE0 40%, #2A6FE0 60%, transparent) 0 0 / 40% 100% no-repeat;
  opacity: 0; animation: uif-show 0s linear 150ms forwards, uif-slide 1.1s ease-in-out 150ms infinite;
}
@keyframes uif-show { to { opacity: 1; } }
@keyframes uif-slide { from { background-position: -70% 0; } to { background-position: 170% 0; } }
@media (prefers-reduced-motion: reduce) {
  html[data-navigating]::before { background: #2A6FE0; animation: uif-show 0s linear 150ms forwards; }
}

/* Offline notice. */
.uif-offline {
  position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 2147483646; max-width: calc(100vw - 32px);
  padding: 8px 14px; border-radius: 999px; background: #111111; color: #FFFFFF;
  font: 500 13px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}