/* Adytum shared polish layer
   Skeleton loaders + focus rings + hover lifts + illustrated empty states.
   Import into any app:  <link rel="stylesheet" href="/lib/skeleton.css">
   Then use the classes documented below.
*/

/* ─── Skeleton shimmer ───────────────────────────────────────────── */
@keyframes adytumShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(184, 112, 58, 0.06) 0%,
    rgba(184, 112, 58, 0.16) 50%,
    rgba(184, 112, 58, 0.06) 100%
  );
  background-size: 800px 100%;
  background-repeat: no-repeat;
  animation: adytumShimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  display: block;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton--line     { height: 12px; width: 100%; margin: 6px 0; }
.skeleton--line-sm  { height: 10px; width: 60%; margin: 4px 0; }
.skeleton--title    { height: 22px; width: 40%; margin: 0 0 10px; }
.skeleton--card     { height: 120px; width: 100%; border-radius: 8px; margin: 0 0 12px; }
.skeleton--avatar   { height: 32px; width: 32px; border-radius: 50%; }
.skeleton--chip     { height: 18px; width: 70px; border-radius: 10px; display: inline-block; margin: 2px 4px 2px 0; }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: rgba(184, 112, 58, 0.1); }
}

/* ─── Focus rings (accessibility) ───────────────────────────────── */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #b8703a;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Don't double-ring inputs that already have a border treatment */
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-offset: 0; }

/* ─── Hover lift for interactive cards ──────────────────────────── */
.card-hover {
  transition: transform 160ms cubic-bezier(.2,.8,.2,1),
              box-shadow 160ms cubic-bezier(.2,.8,.2,1),
              border-color 160ms ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 26, 13, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .card-hover { transition: none; }
  .card-hover:hover { transform: none; }
}

/* ─── Illustrated empty states ──────────────────────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  color: #6b7280;
  max-width: 480px;
  margin: 0 auto;
}
.empty__icon {
  width: 72px; height: 72px;
  margin-bottom: 18px;
  opacity: 0.85;
}
.empty__title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  color: #1a1a1a;
  margin: 0 0 6px;
}
.empty__body {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 360px;
}
.empty__cta {
  display: inline-block;
  background: #1a1a1a;
  color: #c8f04b;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms ease;
}
.empty__cta:hover { background: #0b1a0d; }
.empty__cta--secondary {
  background: transparent;
  color: #1a1a1a;
  border: 1px solid #1a1a1a;
  margin-left: 8px;
}
.empty__cta--secondary:hover { background: rgba(26,26,26,0.06); }

/* ─── Tiny utility: smooth opacity reveal ───────────────────────── */
@keyframes adytumFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: adytumFadeUp 240ms ease both;
}
@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
}