/* price-sync-container.css — Price sync's two container queries (RUN-1413). PLAIN CSS on purpose.

   Laravel Mix 5 runs every .sass() output through resolve-url-loader with `engine: 'rework'` hardcoded
   (node_modules/laravel-mix/src/components/Preprocessor.js:87), and rework's CSS parser knows no
   `@container` — it reads the at-rule as a selector and dies on the first nested rule. Measured on the
   first build: "price-sync.scss:2291:3: missing '}'", exit 2, while Sass itself had compiled the file.
   So these rules bypass the Sass pipeline the way `loader.css` does: copied by `mix.copy`, versioned in
   the manifest, linked in application.blade.php AFTER price-sync.css. They read the same tokens at
   runtime under `.px-psy`; every other rule of the screen stays in price-sync.scss.

   `.psy-page` is the query container for the split (the JSX's 1080px MEDIA query was authored in a
   shell with no sidebar — in Vuexy the content is viewport − 260 − 64, so the question is the content's
   width, not the viewport's); `.psy-step` and `.psy-rulecard` are the containers for the 560px rules,
   exactly the JSX's (`:359`, `:370`). */

@container (min-width: 1000px) {
    .px-psy .psy-split { grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-12); }
}

@container (min-width: 560px) {
    /* label beside the control when the STEP CARD is wide enough */
    .px-psy .psy-row { grid-template-columns: 186px minmax(0, 1fr); gap: var(--space-8); }
    .px-psy .psy-row__label { padding-top: 7px; }
    /* side by side: the chip is pinned to the TOP of its box, not centred against it */
    .px-psy .psy-rule { grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-8); }
    .px-psy .psy-rule > .psy-key { margin-bottom: 0; }
    .px-psy .psy-rule > .psy-box { margin-bottom: 0; }
}