/* Run-It UI foundation (polish pass 2026-09-23).
   Shared tokens, overlay/entrance patterns, hit areas and the reduced-motion layer.
   Dependency-free; js/ui-motion.js mirrors the motion tokens for WAAPI. */

/* The same layer order static/style.css (Tailwind) declares, so this file can load
   before or after it: low-priority defaults below live in `components`, which page
   CSS and Tailwind utilities both override. */
@layer theme, base, components, utilities;

[x-cloak] { display: none !important; }

:root {
  /* Motion */
  --ri-ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* things entering */
  --ri-ease-in: cubic-bezier(0.4, 0, 1, 1);           /* things leaving */
  --ri-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* state changes, height */
  --ri-ease-fade: cubic-bezier(0.25, 0.1, 0.25, 1);   /* content fades */
  --ri-dur-fast: 150ms;
  --ri-dur-menu-in: 200ms;
  --ri-dur-menu-out: 140ms;
  --ri-dur-modal-in: 240ms;
  --ri-dur-modal-out: 180ms;
  --ri-dur-backdrop-in: 200ms;
  --ri-dur-backdrop-out: 160ms;
  --ri-dur-sheet-in: 300ms;
  --ri-dur-sheet-out: 220ms;
  --ri-dur-toast-in: 200ms;
  --ri-dur-toast-out: 160ms;
  --ri-dur-expand: 280ms;
  --ri-dur-reveal: 520ms;
  --ri-dur-enter: 420ms;
  --ri-stagger: 60ms;

  /* Type scale (desktop; phone values below) */
  --ri-text-display: 40px;
  --ri-text-title: 22px;
  --ri-text-lead: 16px;
  --ri-text-body: 15px;
  --ri-text-secondary: 14px;
  --ri-text-label: 12px;
  --ri-text-micro: 11px;       /* ALL-CAPS micro labels only; the absolute floor */
  --ri-text-pill: 12px;
  --ri-text-button: 14px;
  --ri-text-input: 15px;
  --ri-text-chart: 11px;
  --ri-text-tooltip: 13px;
  --ri-text-metric-sm: 13px;
  --ri-leading-display: 1.1;
  --ri-leading-title: 1.25;
  --ri-leading-lead: 1.5;
  --ri-leading-body: 1.55;
  --ri-leading-secondary: 1.45;
  --ri-tracking-micro: 0.06em;

  /* Colour */
  --ri-text-strong: rgba(255, 255, 255, 0.96);
  --ri-text-muted: rgba(255, 255, 255, 0.74);
  --ri-text-faint: rgba(255, 255, 255, 0.62);  /* minimum for text under 14px */

  /* Interaction */
  --ri-hit-min: 44px;
}

/* 16px form controls up to tablet width, otherwise iOS zooms on focus. */
@media (max-width: 1024px) {
  :root { --ri-text-input: 16px; }
}

@media (max-width: 640px) {
  :root {
    --ri-text-display: 28px;
    --ri-text-title: 18px;
    --ri-text-lead: 15px;
    --ri-text-body: 14px;
    --ri-text-secondary: 13px;
    --ri-text-pill: 11px;
    --ri-text-metric-sm: 12px;
  }
}

/* ---------- Motion patterns ----------
   Keyframes use the individual translate/scale properties so they compose with
   positioning transforms (e.g. translate(-50%, -50%)) instead of replacing them. */
@keyframes ri-menu-in { from { opacity: 0; translate: 0 -4px; scale: 0.98; } to { opacity: 1; translate: none; scale: none; } }
@keyframes ri-menu-out { from { opacity: 1; translate: none; scale: none; } to { opacity: 0; translate: 0 -4px; scale: 0.98; } }
@keyframes ri-modal-in { from { opacity: 0; translate: 0 8px; scale: 0.98; } to { opacity: 1; translate: none; scale: none; } }
@keyframes ri-modal-out { from { opacity: 1; translate: none; scale: none; } to { opacity: 0; translate: 0 8px; scale: 0.98; } }
@keyframes ri-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ri-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ri-sheet-in { from { translate: 0 100%; } to { translate: none; } }
@keyframes ri-sheet-out { from { translate: none; } to { translate: 0 100%; } }
@keyframes ri-toast-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
@keyframes ri-toast-out { from { opacity: 1; translate: none; } to { opacity: 0; translate: 0 4px; } }
@keyframes ri-section-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: none; } }

.ri-menu-enter { transform-origin: var(--ri-origin, top center); animation: ri-menu-in var(--ri-dur-menu-in) var(--ri-ease-out) both; }
.ri-menu-leave { transform-origin: var(--ri-origin, top center); animation: ri-menu-out var(--ri-dur-menu-out) var(--ri-ease-in) both; }
.ri-modal-enter { animation: ri-modal-in var(--ri-dur-modal-in) var(--ri-ease-out) both; }
.ri-modal-leave { animation: ri-modal-out var(--ri-dur-modal-out) var(--ri-ease-in) both; }
.ri-backdrop-enter { animation: ri-fade-in var(--ri-dur-backdrop-in) var(--ri-ease-fade) both; }
.ri-backdrop-leave { animation: ri-fade-out var(--ri-dur-backdrop-out) var(--ri-ease-fade) both; }
.ri-sheet-enter { animation: ri-sheet-in var(--ri-dur-sheet-in) var(--ri-ease-out) both; }
.ri-sheet-leave { animation: ri-sheet-out var(--ri-dur-sheet-out) var(--ri-ease-in) both; }
.ri-toast-enter { animation: ri-toast-in var(--ri-dur-toast-in) var(--ri-ease-out) both; }
.ri-toast-leave { animation: ri-toast-out var(--ri-dur-toast-out) var(--ri-ease-in) both; }
.ri-fade-enter { animation: ri-fade-in var(--ri-dur-menu-in) var(--ri-ease-fade) both; }
.ri-fade-leave { animation: ri-fade-out var(--ri-dur-menu-out) var(--ri-ease-fade) both; }
/* Content replacing a placeholder: opacity only, in place. */
.ri-reveal { animation: ri-fade-in var(--ri-dur-reveal) var(--ri-ease-fade) both; }
/* Section entrance on page load; set --ri-enter-index on siblings (capped at 6 steps). */
.ri-section-enter {
  animation: ri-section-in var(--ri-dur-enter) var(--ri-ease-out) both;
  animation-delay: calc(min(var(--ri-enter-index, 0), 6) * var(--ri-stagger));
}

/* ---------- Hit areas ----------
   Keeps the visual size and extends the tap target to 44x44 on coarse pointers.
   Needs a free ::before and no overflow clipping on the element itself. */
@layer components {
  :where(.ri-hit) { position: relative; }
}
@media (pointer: coarse) {
  .ri-hit::before {
    content: "";
    position: absolute;
    inset: min(0px, calc(50% - var(--ri-hit-min) / 2));
    border-radius: inherit;
  }
}

/* ---------- Reduced motion ----------
   Layered so it outranks unlayered !important page animations. Decorative loops
   run once in 1ms (and stop), entrances and transitions finish at once, and
   spinners (class contains "spin", .run-loading) keep turning. */
@layer ri-reduced-motion {
  @media (prefers-reduced-motion: reduce) {
    html,
    body {
      scroll-behavior: auto !important;
    }

    *:not([class*="spin"]):not([data-ri-motion="essential"]),
    *:not([class*="spin"]):not(.run-loading):not([data-ri-motion="essential"])::before,
    *:not([class*="spin"]):not([data-ri-motion="essential"])::after {
      animation-delay: 0s !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-delay: 0s !important;
      transition-duration: 1ms !important;
    }
  }
}