/* responsive.css — responsive & layout utilities only. No colors here. */

/* Utilities */
.scroll-y { overflow-y: auto; }
.min-60vh { min-height: 60vh; }

/* Stack horizontally on md+, vertically on sm */
.stack-sm { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (min-width: 768px) {
  .stack-sm { flex-wrap: nowrap; }
}

/* Tables: swipeable on small screens */
.table-wrap { overflow-x: auto; }

/* Compact buttons on small screens */
@media (max-width: 576px) {
  .btn-sm { padding: .35rem .6rem; font-size: .82rem; }
}

/* Sticky action bars for forms (mobile first) */
.sticky-actions {
  position: sticky; bottom: 0; z-index: 1010;
  background: inherit;
  border-top: 1px solid var(--oa-card-border);
  padding: .5rem;
}

/* Subtle translucency for sticky navs over content */
.app-blur {
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  /* Uses theme var if present; otherwise falls back to a transparent tint */
  background-color: var(--oa-blur-bg, color-mix(in oklab, var(--oa-canvas) 85%, transparent));
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}