/* ===============================================
   Global UX interactions & resilience layer
   Progressive enhancement only — does not alter the
   existing layout, colours, spacing or copy.
   Paired with static/js/shared/ux-runtime.js
   =============================================== */

:root {
  /* Default accent (FS!QR / common pages). Overridden per section below. */
  --ux-accent: var(--theme-fsqr-accent, #1f27c7);
  --ux-accent-soft: rgba(31, 39, 199, 0.16);
  --ux-progress-height: 3px;
  --ux-toast-bg: rgba(17, 24, 39, 0.94);
  --ux-toast-text: #f8fafc;
}

body.group-section {
  --ux-accent: var(--theme-group-accent, #22c55e);
  --ux-accent-soft: rgba(34, 197, 94, 0.18);
}

body.note-section {
  --ux-accent: var(--theme-note-accent, #a3e635);
  --ux-accent-soft: rgba(132, 204, 22, 0.2);
}

body.task-section {
  --ux-accent: var(--theme-task-accent, #f59e0b);
  --ux-accent-soft: rgba(245, 158, 11, 0.2);
}

/* ---------------------------------------------------------------------------
   Cross-document view transitions (zero-JS, progressive enhancement)
   --------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

/* ---------------------------------------------------------------------------
   Top navigation progress bar
   --------------------------------------------------------------------------- */
.fsqr-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ux-progress-height);
  z-index: var(--z-toast, 1200);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fsqr-progress.is-active {
  opacity: 1;
}

.fsqr-progress.is-done {
  opacity: 0;
  transition: opacity 0.28s ease 0.05s;
}

.fsqr-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(
    90deg,
    var(--ux-accent) 0%,
    var(--theme-fsqr-mid, #3b82f6) 100%
  );
  box-shadow: 0 0 8px var(--ux-accent-soft);
  transition: transform 0.2s ease;
  will-change: transform;
}

body.group-section .fsqr-progress__bar {
  background: var(--theme-group-gradient, var(--ux-accent));
}

body.note-section .fsqr-progress__bar {
  background: var(--theme-note-gradient, var(--ux-accent));
}

body.task-section .fsqr-progress__bar {
  background: var(--theme-task-gradient, var(--ux-accent));
}

/* ---------------------------------------------------------------------------
   Toasts
   --------------------------------------------------------------------------- */
.fsqr-toast-stack {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: var(--z-toast, 1200);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: min(92vw, 28rem);
  pointer-events: none;
}

.fsqr-toast {
  pointer-events: auto;
  max-width: 100%;
  padding: 0.7rem 1.05rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--ux-toast-bg);
  color: var(--ux-toast-text);
  font-size: 0.9rem;
  line-height: 1.4;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.2));
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  text-align: center;
}

.fsqr-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.fsqr-toast--success {
  background: var(--status-success-text, #047857);
  color: #ecfdf5;
}

.fsqr-toast--error {
  background: var(--status-error-text, #b91c1c);
  color: #fef2f2;
}

.fsqr-toast--info {
  background: var(--ux-toast-bg);
}

/* ---------------------------------------------------------------------------
   Offline banner
   --------------------------------------------------------------------------- */
.fsqr-offline-banner {
  position: fixed;
  left: 50%;
  top: max(0.6rem, env(safe-area-inset-top));
  transform: translate(-50%, -150%);
  z-index: var(--z-toast, 1200);
  max-width: min(92vw, 30rem);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--status-error-bg, rgba(254, 242, 242, 0.96));
  color: var(--status-error-text, #b91c1c);
  border: 1px solid var(--status-error-border-soft, rgba(239, 68, 68, 0.3));
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  transition: transform 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fsqr-offline-banner.is-visible {
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------------------
   Ripple + press feedback (subtle; never changes resting appearance)
   --------------------------------------------------------------------------- */
/* Temporary helpers added/removed by JS only while a ripple animates, so the
   control's resting appearance (overflow, stacking) is never changed. */
.fsqr-ripple-host {
  position: relative;
}

.fsqr-ripple-clip {
  overflow: hidden !important;
}

.fsqr-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: 0.22;
  pointer-events: none;
  animation: fsqr-ripple-anim 0.55s ease-out forwards;
  z-index: 0;
}

@keyframes fsqr-ripple-anim {
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* Gentle press feedback for interactive controls. */
.fsqr-ux-ready button:not(:disabled):active,
.fsqr-ux-ready .btn:not(:disabled):active,
.fsqr-ux-ready [role="button"]:active,
.fsqr-ux-ready .section-tab:active {
  transform: translateY(1px) scale(0.985);
}

.fsqr-ux-ready button,
.fsqr-ux-ready .btn,
.fsqr-ux-ready [role="button"],
.fsqr-ux-ready .section-tab {
  transition: transform 0.12s ease;
}

/* ---------------------------------------------------------------------------
   Skeleton shimmer (for async-loaded content)
   --------------------------------------------------------------------------- */
.fsqr-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-md, 10px);
  color: transparent !important;
  user-select: none;
}

.fsqr-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: fsqr-skeleton-shimmer 1.3s ease-in-out infinite;
}

.fsqr-skeleton-line {
  height: 0.85rem;
  margin: 0.5rem 0;
}

@keyframes fsqr-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ---------------------------------------------------------------------------
   Reduced motion / data-saver: disable all enhancement motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fsqr-progress,
  .fsqr-progress__bar,
  .fsqr-toast,
  .fsqr-offline-banner {
    transition-duration: 0.01ms !important;
  }

  .fsqr-ripple {
    display: none !important;
  }

  .fsqr-skeleton::after {
    animation: none !important;
  }

  .fsqr-ux-ready button:active,
  .fsqr-ux-ready .btn:active,
  .fsqr-ux-ready [role="button"]:active,
  .fsqr-ux-ready .section-tab:active {
    transform: none !important;
  }

  @view-transition {
    navigation: none;
  }

  html {
    scroll-behavior: auto !important;
  }
}