/*
 * Liquid glass surface system.
 *
 * Applied via .glass class to chrome surfaces (topbar, tabs, stats,
 * toolbar, aside, pagination, popovers). NEVER applied to scrolling
 * content areas (the data table itself stays solid for performance).
 *
 * Consumes tokens from tokens.css. Falls back to opaque surfaces when
 * the user enables prefers-reduced-transparency.
 */

.glass {
  background: var(--glass-surface);
  background-image: var(--glass-sheen);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    var(--shadow-md);
  contain: layout style;
}

.glass.glass--strong {
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
}

.glass.glass--soft {
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.glass.glass--no-border {
  border: 0;
}

.glass.glass--surface-2 {
  background-color: var(--glass-surface-2);
}

/* Hover intensification — only enabled on interactive surfaces that
 * opt in by adding both .glass and .glass--interactive. will-change
 * is removed via transitionend in JS to avoid persistent GPU memory. */
.glass.glass--interactive:hover {
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border-color: var(--glass-border-hi);
}

/* Solid-surface fallback for users who can't tolerate translucency. */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--surface);
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--border);
  }
  .glass.glass--surface-2 { background: var(--surface2); }
}

/* Motion fallback. */
@media (prefers-reduced-motion: reduce) {
  .glass.glass--interactive {
    transition: none;
  }
}

/* ─── ROLLBACK FALLBACK — ?legacy=1 ───────────────────────────────────── */
/*
 * Body attribute set by dashboard.js when the URL contains ?legacy=1.
 * Collapses the page-shell grid back to a block stack, disables glass
 * surfaces, and re-enables the legacy position:fixed AI panel with
 * body padding-right.
 *
 * Lifecycle: stays in tree for the first 7 days after the rebuild
 * ships. Operator can give any user a working fallback by appending
 * ?legacy=1 to the URL. Removed in a follow-up PR (earliest 2026-06-06)
 * once production has been clean for a week.
 */

body[data-layout="legacy"] .page-shell {
  display: block;
}
body[data-layout="legacy"] .glass {
  background: var(--surface);
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--border);
  box-shadow: none;
}
body[data-layout="legacy"] .ai-aside {
  position: fixed; top: 56px; right: 0; bottom: 0;
  width: 360px;
  border-left: 1px solid var(--border);
  background: var(--surface);
}
body[data-layout="legacy"] .dashboard-main {
  padding-right: 360px;
}
body[data-layout="legacy"] .ai-aside[hidden] {
  display: none;
}
body[data-layout="legacy"] .data thead th {
  position: static;
  background: var(--surface2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── MICRO-INTERACTIONS ───────────────────────────────────────────────── */

.glass.glass--interactive {
  transition:
    backdrop-filter var(--duration-base) var(--ease-standard),
    border-color    var(--duration-base) var(--ease-standard),
    transform       var(--duration-fast) var(--ease-standard);
}

.stat-card.glass--interactive:hover {
  transform: translateY(-1px);
}

/* hot-ribbon stagger-in (subtle — only fires on initial render via the
 * is-fresh class toggled by dashboard.js for ~800ms) */
@keyframes ribbon-stagger {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hot-ribbon.is-fresh .hot-card {
  animation: ribbon-stagger 280ms var(--ease-emphasized) backwards;
}
.hot-ribbon.is-fresh .hot-card:nth-child(1) { animation-delay:   0ms; }
.hot-ribbon.is-fresh .hot-card:nth-child(2) { animation-delay:  40ms; }
.hot-ribbon.is-fresh .hot-card:nth-child(3) { animation-delay:  80ms; }
.hot-ribbon.is-fresh .hot-card:nth-child(4) { animation-delay: 120ms; }
.hot-ribbon.is-fresh .hot-card:nth-child(5) { animation-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  .glass.glass--interactive { transition: none; }
  .stat-card.glass--interactive:hover { transform: none; }
  .hot-ribbon.is-fresh .hot-card { animation: none; }
}