/* NXT design system — utilities layer (last, wins over components). Keep this list short:
   prefer a component or a product stylesheet over a pile of one-off utilities. */

@layer utilities {
  .show-sm { display: none !important; }
  @media (max-width: 767px) { .hide-sm { display: none !important; } .show-sm { display: initial !important; } }
  @media (max-width: 480px) { .hide-xs { display: none !important; } }
  .text-center { text-align: center; }
  .nowrap { white-space: nowrap; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mt-0 { margin-top: 0 !important; } .mt-4 { margin-top: var(--s-4) !important; } .mt-8 { margin-top: var(--s-8) !important; }
  .mb-0 { margin-bottom: 0 !important; } .mb-4 { margin-bottom: var(--s-4) !important; } .mb-8 { margin-bottom: var(--s-8) !important; }
  .gap-2 { gap: var(--s-2) !important; } .gap-6 { gap: var(--s-6) !important; }
  .w-full { width: 100%; }
  .center { margin-inline: auto; }
  .tabular { font-variant-numeric: tabular-nums; }
  .ink-p { color: var(--p-ink); }
}

/* Store-app hand-off note ("This app doesn't take payments…") and neutral in-app pages. */
@layer utilities {
  .app-handoff { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--c-muted); }
  .app-handoff .i { flex: none; margin-top: 3px; }
  .app-neutral { max-width: 60ch; }
}

/* Store purchase rules (packages/platform/src/client.ts): when the server says this app may show no
   purchase surface, a pricing link that slipped into a product page is not shown. The server-side
   rules are the real control; this only catches stray links. */
@layer utilities {
  [data-purchase='none'] a[href^='/pricing'] { display: none !important; }
}