/* ============================================================================
   replica.css — the handful of Tailwind utilities this frontend replica uses
   that the app's pre-compiled app.css does not contain (app.css is generated by
   scanning the Razor views, so a class no .cshtml happens to use is absent).

   Kept in a separate file so css/app.css stays byte-for-byte identical to the
   one the ASP.NET app ships. Declared in @layer utilities and loaded after
   app.css, so precedence matches every other utility. Values are copied from
   Tailwind v4's own output for the same class.
   ========================================================================= */
@layer utilities {
  .p-10        { padding: calc(var(--spacing) * 10); }
  .min-w-\[190px\] { min-width: 190px; }
  .min-w-\[220px\] { min-width: 220px; }
  .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); }
  /* --color-orange-600 is not emitted in app.css; Tailwind v4's default value. */
  .text-orange-600 { color: oklch(64.6% .222 41.116); }
}

@layer utilities {
  @media (min-width: 40rem) {
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}