/*
 * Mini reset — loaded by minis with `layout: reset` (the default) and `layout: legacy`
 * (see Components::Mini::Reset / ::Legacy), never globally. Gives an art-directed page a
 * clean slate: it neutralizes the app chrome Tailwind ships in `@layer base` (the olive
 * body, the form-control @apply rules) while keeping Tailwind's tokens and utilities usable.
 *
 * In `@layer page` (order declared in app/assets/tailwind/application.css) so it overrides
 * Tailwind's `base` but the shared header's utilities still win over it.
 */

@layer page {
  /* The mini owns the whole canvas below the shared header. */
  body {
    background: #fff;
    color: #111;
    font: 400 16px/1.5 var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  }

  .mini-reset {
    box-sizing: border-box;
  }

  .mini-reset *,
  .mini-reset *::before,
  .mini-reset *::after {
    box-sizing: inherit;
  }

  /* Drop the app's base form-control styling inside a bespoke page. */
  .mini-reset :where(input, textarea, select, button) {
    all: revert-layer;
  }
}