/* OCTAVIQ — mobile performance overrides.
   On touch phones the GPU-expensive backdrop-filter blur on always-visible,
   scrolling surfaces (sticky header, cards, sheets, pills, calendar column
   heads) is a major source of scroll jank. Under a coarse-pointer phone
   viewport we drop that blur and swap in a near-opaque solid built from the
   existing surface tokens (so it still adapts to light/dark theme). A light
   frost is kept on transient .modal dialogs only, where it costs nothing to
   scroll and the glass look matters.
   Loaded LAST (after tokens/ui/brand/glass + the page's embedded <style>
   overrides via !important) so these rules win the cascade. */
@media (max-width: 768px) and (hover: none){

  /* kill the blur on the always-visible / scrolling surfaces */
  .top,
  .card, .mcard,
  .sheet,
  .pill,
  .oqcal-colhead{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* sticky header + calendar column heads sit behind scrolling content → fully solid */
  .top,
  .oqcal-colhead{
    background: var(--surface-1, #121319) !important;
  }

  /* content cards + bottom sheets → near-opaque card surface (no see-through) */
  .card, .mcard,
  .sheet{
    background: var(--surface-2, #181a22) !important;
  }

  /* NOTE: .pill keeps its per-variant (ok/warn/danger/muted) background — we only
     remove the blur above. Forcing a solid bg here would flatten status colours. */

  /* modal dialogs are transient overlays (not scrolled) → keep a LIGHT frost only */
  .modal{
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  }
}