/* Shared interaction polish for every page.
   Element/ID-scoped so it layers on top of the compiled Tailwind (tw.css)
   without touching any per-page class strings. */

/* ---- touch feel ---------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }
button, a, select, label { touch-action: manipulation; }

/* Press feedback: every pressable element confirms the tap instantly.
   Subtle scale, fast, strong ease-out. Colour shifts ease too. */
button {
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
button:active { transform: scale(0.97); }
a, select { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }

/* ---- brand ---------------------------------------------------------- */
/* The little red tile beside every page title — same red as the printed
   WONDER SPACE wordmark, so screen and paper read as one system. */
.ws-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; flex-shrink: 0;
  background: #b00000; color: #fff; font-weight: 800; font-size: 1rem;
}

/* ---- loading skeletons ---------------------------------------------- */
/* The server is a hemisphere away (~200ms per round trip) — pages show
   grey placeholder blocks instead of sitting empty for a second. */
.skel {
  position: relative; overflow: hidden;
  background: #e2e8f0; border-radius: 0.75rem;
}
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---- empty states --------------------------------------------------- */
.empty {
  padding: 2rem 1rem; text-align: center;
  color: #64748b; font-size: 0.875rem;
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 0.75rem;
}
.empty svg { margin: 0 auto 0.5rem; width: 1.75rem; height: 1.75rem; color: #94a3b8; }

/* ---- keyboard focus ------------------------------------------------- */
/* Visible ring for keyboard users only (:focus-visible), matching the
   indigo the app already uses for primary actions. */
:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}
/* the receipt dropzone hides its real file input — surface keyboard focus on the box */
#photoBox:focus-within { outline: 2px solid #4f46e5; outline-offset: 2px; }

/* ---- inputs --------------------------------------------------------- */
/* The amount fields live inside tables — native number spinners add
   clutter and mis-taps there. Typing and validation are unaffected. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ---- entrances ------------------------------------------------------ */
/* Elements appear from something, not from nothing: small translate/scale
   + opacity, under 250ms, ease-out. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes drop-in {
  from { opacity: 0; transform: scale(0.98); }
}
@keyframes fade-in {
  from { opacity: 0; }
}

/* toast pill (index + bulk) */
#toast:not(.hidden) > div { animation: rise-in 220ms cubic-bezier(0.23, 1, 0.32, 1); }

/* project search dropdowns (index #projectDrop, bulk #pdrop) */
#projectDrop:not(.hidden),
#pdrop:not(.hidden) {
  transform-origin: top;
  animation: drop-in 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* bulk page: sticky submit bar + receipt lightbox */
#bar:not(.hidden) { animation: rise-in 200ms cubic-bezier(0.23, 1, 0.32, 1); }
#lightbox:not(.hidden) { animation: fade-in 150ms cubic-bezier(0.23, 1, 0.32, 1); }

/* A <select> sizes itself to its longest <option>; full project names made
   the "Move all to…" control wider than a phone screen and scrolled the page. */
select.move { max-width: 45vw; }

/* ---- phone safe areas (iPhone home-bar) ----------------------------- */
#bar { padding-bottom: env(safe-area-inset-bottom); }
#toast { margin-bottom: env(safe-area-inset-bottom); }

/* ---- reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  button:active { transform: none; }
  .skel::after { animation: none; }
  #toast:not(.hidden) > div,
  #projectDrop:not(.hidden),
  #pdrop:not(.hidden),
  #bar:not(.hidden),
  #lightbox:not(.hidden) { animation: none; }
}