/* polish.css
 * Animation polish + mobile responsive layer for tired studio + consumer.
 *
 * Loaded after components.css + dashboard.css. Ralph Loop iteration 8 —
 * closes HANDOFF.md priorities #6 (animation polish) and #7 (mobile
 * responsive audit) without touching the existing layout files.
 *
 * Tokens (from colors_and_type.css):
 *   --dur-1 = 120ms · --dur-2 = 220ms · --dur-3 = 360ms
 *   --ease-out · --ease-in-out
 */

/* ── Page-load fade + slide-in ────────────────────────────────────────── */
@keyframes tired-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tired-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tired-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tired-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── Studio: page-load animation ──────────────────────────────────────── */
.dash-main { animation: tired-page-in var(--dur-3, 360ms) var(--ease-out, ease-out) both; }
.dash-side { animation: tired-fade-in var(--dur-2, 220ms) var(--ease-out, ease-out) both; }

/* Stagger KPI cards on the overview row */
.dash-row--4 > .stat:nth-child(1) { animation: tired-card-in var(--dur-3, 360ms) var(--ease-out, ease-out) both; animation-delay: 60ms; }
.dash-row--4 > .stat:nth-child(2) { animation: tired-card-in var(--dur-3, 360ms) var(--ease-out, ease-out) both; animation-delay: 120ms; }
.dash-row--4 > .stat:nth-child(3) { animation: tired-card-in var(--dur-3, 360ms) var(--ease-out, ease-out) both; animation-delay: 180ms; }
.dash-row--4 > .stat:nth-child(4) { animation: tired-card-in var(--dur-3, 360ms) var(--ease-out, ease-out) both; animation-delay: 240ms; }

/* KPI hover pop */
.stat {
  transition: transform var(--dur-1, 120ms) var(--ease-out, ease-out),
              border-color var(--dur-1, 120ms) var(--ease-out, ease-out);
}
.stat:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong, #666);
}

/* Dashboard cards: stagger on overview */
.dash-row--sidebar > .dash-card,
.dash-row--sidebar > div > .dash-card {
  animation: tired-card-in var(--dur-3, 360ms) var(--ease-out, ease-out) both;
  animation-delay: 280ms;
}
.dash-row--sidebar > div > .dash-card + .dash-card {
  animation-delay: 340ms;
}

/* Bar chart: bars grow from baseline on load */
.bar-chart .bar {
  transform-origin: bottom center;
  animation: tired-bar-grow var(--dur-3, 360ms) var(--ease-out, ease-out) both;
}
.bar-chart .bar:nth-child(odd)  { animation-delay: 80ms; }
.bar-chart .bar:nth-child(even) { animation-delay: 120ms; }

/* dtable rows: subtle fade-in (avoid stagger here — too noisy on long tables) */
.dtable tbody tr {
  animation: tired-fade-in var(--dur-2, 220ms) var(--ease-out, ease-out) both;
  transition: background var(--dur-1, 120ms);
}
.dtable tbody tr:hover {
  background: oklch(from var(--bg-elev, #111) calc(l + 0.04) c h);
}

/* Buttons: slight nudge on press */
.btn { transition: transform var(--dur-1, 120ms) var(--ease-out, ease-out),
                   background var(--dur-1, 120ms),
                   border-color var(--dur-1, 120ms),
                   opacity var(--dur-1, 120ms); }
.btn:active { transform: scale(0.97); }

/* Sidebar nav links: smooth indicator */
.dash-side__brand,
.dash-side a { transition: color var(--dur-1, 120ms), background var(--dur-1, 120ms); }
.dash-side a:hover { background: oklch(from var(--bg-elev, #111) calc(l + 0.04) c h); }

/* Avatar: subtle scale on hover */
.avatar { transition: transform var(--dur-1, 120ms) var(--ease-out, ease-out); }
.avatar:hover { transform: scale(1.05); }

/* Search input: focus glow */
.search input:focus,
.field .input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus {
  border-color: var(--accent, #a78bfa);
  box-shadow: 0 0 0 3px oklch(from var(--accent, #a78bfa) l c h / 0.15);
}

/* Chip toggle */
.chip {
  transition: background var(--dur-1, 120ms),
              border-color var(--dur-1, 120ms),
              color var(--dur-1, 120ms),
              transform var(--dur-1, 120ms);
}
.chip:hover { transform: translateY(-1px); }

/* ── Mobile responsive (≤ 720px) ──────────────────────────────────────── */
@media (max-width: 720px) {
  /* Sidebar collapses to top bar */
  .dash {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
  }
  .dash-side {
    grid-row: 1;
    grid-column: 1;
    flex-direction: row !important;
    overflow-x: auto;
    height: auto;
    padding: 12px;
    border-right: none !important;
    border-bottom: 1px solid var(--line, #333);
  }
  .dash-side__brand { white-space: nowrap; padding-right: 14px; }
  .dash-side__section { display: none; }
  .dash-side nav { display: flex; flex-direction: row; gap: 4px; flex: 1; }
  .dash-side nav a { white-space: nowrap; padding: 8px 12px; flex-shrink: 0; }
  .dash-side__user { display: none; }

  .dash-main { padding: 16px !important; }
  .dash-head { flex-direction: column; align-items: flex-start !important; gap: 12px; }
  .dash-head__title { font-size: 36px !important; }
  .dash-head__actions { flex-wrap: wrap; }

  /* KPI row → 2 columns instead of 4 */
  .dash-row--4 { grid-template-columns: 1fr 1fr !important; }
  /* Sidebar row → single column */
  .dash-row--sidebar { grid-template-columns: 1fr !important; }

  /* Tables: horizontal scroll instead of squashing */
  .dtable {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .dtable thead,
  .dtable tbody,
  .dtable tr { display: table; width: 100%; }

  /* Event row in studio events list: stack vertically */
  #events-rows a[href*="event-detail"] {
    grid-template-columns: 1fr !important;
  }
  #events-rows a[href*="event-detail"] > div:nth-child(1) {
    min-height: 80px !important;
  }
  #events-rows a[href*="event-detail"] > div:nth-child(3) {
    border-left: none !important;
    border-top: 1px dashed var(--line, #333) !important;
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  /* Collaborator rows: stack as cards */
  .collab-row {
    grid-template-columns: 44px 1fr !important;
    grid-template-rows: auto auto auto auto;
  }

  /* Settlement preview math card */
  .math-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Reduce hero font on consumer pages */
  h1 {
    font-size: clamp(36px, 8vw, 72px);
  }
}

/* ── Reduced motion: respect user preference ─────────────────────────── */
@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;
  }
}

/* ── Skeleton loader (for hydrated tables before data lands) ──────────── */
@keyframes tired-skeleton-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.tired-skel {
  background: linear-gradient(90deg,
    oklch(from var(--bg-elev, #111) calc(l - 0.02) c h) 0%,
    oklch(from var(--bg-elev, #111) calc(l + 0.06) c h) 50%,
    oklch(from var(--bg-elev, #111) calc(l - 0.02) c h) 100%);
  background-size: 200% 100%;
  animation: tired-skeleton-shimmer 1.4s linear infinite;
  border-radius: 8px;
  color: transparent !important;
}