/* These rules deliberately use #id selectors rather than adding Tailwind
   utility classes: the Tailwind Play CDN injects its stylesheet at runtime,
   so a plain class here could be overridden depending on injection order. */

:root {
  /* Height of the phone's gesture bar / browser toolbar overlaying the bottom
     edge. Reported only when the <meta viewport> opts in with viewport-fit=cover;
     0px on desktop. Defined once here so the offsets below stay in step. */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  font-family: 'Nunito', sans-serif;
  /* dvh keeps the app inside the *visible* viewport on phones, where the
     browser's own toolbar overlays part of what 100vh reports. */
  height: 100vh;
  height: 100dvh;
}

#app {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
}

/* --- "Working" popup ---
   Fully styled here rather than with Tailwind utilities. The Play CDN only
   generates rules for a class once it sees it in the DOM, and these elements
   arrive by cloning a <template>, so utilities would land a frame late and
   the popup would flash unstyled every first run. */
#busy-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Translucent so the list stays readable behind it. */
  background: rgba(255, 255, 255, 0.3);
}

#busy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15);
}

#busy-label {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 800;
  color: #1e3a8a;
}

/* The plate spins while a lookup is in flight. Uses an #id selector for the
   same reason as the rules below — it must win against the Tailwind CDN. */
@keyframes busy-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#busy-icon {
  animation: busy-spin 1.4s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Still turns — it is the signal that work is happening — but gently. */
@media (prefers-reduced-motion: reduce) {
  #busy-icon { animation-duration: 4s; }
}

/* Keep the floating controls above the system bar rather than underneath it.
   On desktop --safe-bottom is 0px and nothing moves. */
#cancelBtn {
  bottom: calc(1.5rem + var(--safe-bottom));
}

#version-footer {
  bottom: calc(0.25rem + var(--safe-bottom));
}

/* Enough bottom padding that the last list row scrolls clear of the button. */
#item-list {
  padding-bottom: calc(4rem + var(--safe-bottom));
}