/* ==========================================================================
   style.css — visual details Tailwind can't express on its own
   ==========================================================================
   You rarely need to touch this file. Layout and colours live in the
   Tailwind classes inside index.html / app.js.
   ========================================================================== */

:root {
  /* Change the font here AND in the <link> inside index.html */
  --font-sans: "Google Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--font-sans);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Squircle corners — the "Apple-style" rounded square.
   --------------------------------------------------------------------------
   `corner-shape: squircle` is a newer CSS feature. Browsers that support it
   get true squircles; everywhere else falls back to a normal rounded corner,
   which still looks correct. That's why each class also sets border-radius
   via Tailwind (rounded-xl / rounded-2xl) in the markup.

   Sizes: sm 1rem · md 1.5rem · lg 2rem · xl 3rem · 2xl 4rem · full pill
-------------------------------------------------------------------------- */
@supports (corner-shape: squircle) {
  /* !important is deliberate: Tailwind loads from a CDN *after* this file,
     so its rounded-* utilities would otherwise win and flatten the curve. */
  .squircle-sm   { border-radius: 1rem   !important; corner-shape: squircle; }
  .squircle-md   { border-radius: 1.5rem !important; corner-shape: squircle; }
  .squircle-lg   { border-radius: 2rem   !important; corner-shape: squircle; }
  .squircle-xl   { border-radius: 3rem   !important; corner-shape: squircle; }
  .squircle-2xl  { border-radius: 4rem   !important; corner-shape: squircle; }
  .squircle-full { border-radius: 9999px !important; corner-shape: squircle; }
}

/* --------------------------------------------------------------------------
   Avatar bounce when clicked
-------------------------------------------------------------------------- */
@keyframes nudge {
  0%   { transform: translateY(0); }
  33%  { transform: translateY(-3px); }
  66%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

.animate-nudge {
  animation: nudge 350ms ease;
}

/* Icons inherit the current text colour and fill their box */
svg use {
  color: inherit;
}
svg:has(use) {
  fill: none;
  stroke: currentColor;
}

/* Respect visitors who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}