/* ================================================================
   Flourish Base
   ----------------------------------------------------------------
   Accessibility primitives, focus styles, skeleton/empty utilities,
   and prefers-reduced-motion overrides. Loaded after the page's
   inline styles so it can layer on top safely.
   ================================================================ */

/* ─── Focus ring (visible on keyboard, hidden on mouse) ─── */
*:focus { outline: none; }
*:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, rgba(122,158,126,0.55));
  outline-offset: var(--focus-ring-offset, 2px);
  border-radius: var(--radius-sm, 6px);
}

/* Buttons that explicitly want a different focus shape */
button:focus-visible,
.btn:focus-visible,
.nav-item:focus-visible,
.fl-tab:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, rgba(122,158,126,0.55));
  outline-offset: var(--focus-ring-offset, 2px);
}

/* ─── Screen-reader only ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Skeleton system ─── */
.fl-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(232, 224, 214, 0.45) 0%,
    rgba(232, 224, 214, 0.85) 50%,
    rgba(232, 224, 214, 0.45) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md, 8px);
  animation: flSkeletonShimmer 1.4s var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)) infinite;
}
.fl-skeleton-line { height: 12px; margin-bottom: 10px; border-radius: var(--radius-sm, 6px); }
.fl-skeleton-line:last-child { margin-bottom: 0; }
.fl-skeleton-title { height: 22px; width: 40%; margin-bottom: 16px; border-radius: var(--radius-md, 8px); }
.fl-skeleton-card {
  padding: var(--space-5, 20px);
  background: var(--white, #fff);
  border: 1px solid var(--border, #E8E0D6);
  border-radius: var(--radius-xl, 16px);
  margin-bottom: var(--space-4, 16px);
}
.fl-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4, 16px);
}
@keyframes flSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Empty state ─── */
.fl-empty {
  text-align: center;
  padding: var(--space-9, 48px) var(--space-5, 20px);
  background: var(--white, #fff);
  border: 1px dashed var(--border, #E8E0D6);
  border-radius: var(--radius-xl, 16px);
  color: var(--text-muted, #7A6E68);
}
.fl-empty-icon {
  font-size: 28px;
  margin-bottom: var(--space-3, 12px);
  opacity: 0.85;
}
.fl-empty-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--charcoal, #2C2C2C);
  margin-bottom: var(--space-2, 8px);
  letter-spacing: -0.01em;
}
.fl-empty-body {
  font-size: 14px;
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto var(--space-5, 20px);
}
.fl-empty-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 10px 18px;
  background: var(--sage, #7A9E7E);
  color: var(--white, #fff);
  border: none;
  border-radius: var(--radius-lg, 12px);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--duration-fast, 150ms) var(--ease-out, ease);
  text-decoration: none;
}
.fl-empty-action:hover { background: var(--sage-dark, #5C8060); }

/* ─── Error state ─── */
.fl-error {
  text-align: center;
  padding: var(--space-7, 32px) var(--space-5, 20px);
  background: rgba(196, 113, 75, 0.06);
  border: 1px solid var(--terracotta-border, #F2C4AD);
  border-radius: var(--radius-xl, 16px);
  color: var(--text, #3D3530);
}
.fl-error-title {
  font-weight: 600;
  margin-bottom: var(--space-2, 8px);
  color: var(--terracotta, #C4714B);
}
.fl-error-body { font-size: 13px; line-height: 1.6; margin-bottom: var(--space-3, 12px); }
.fl-error-retry {
  padding: 8px 16px;
  background: var(--white, #fff);
  border: 1px solid var(--terracotta-border, #F2C4AD);
  color: var(--terracotta, #C4714B);
  border-radius: var(--radius-md, 8px);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ─── Aria-busy regions get a soft fade so the skeleton reads ─── */
[aria-busy="true"] { cursor: progress; }

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fl-skeleton { animation: none; background: rgba(232, 224, 214, 0.6); }
}