/**
 * Canonical responsive breakpoint queries — the single source of truth for
 * BOTH CSS and JS so they can never drift.
 *
 *  - CSS consumes the same strings as `@custom-media --mobile / --touch`,
 *    declared in `web/src/styles/media.css` (for component <style> blocks, via
 *    @csstools/postcss-global-data) AND in-file at the top of `web/src/app.css`
 *    (for the Tailwind/lightningcss pass — see the plan's build-pipeline note).
 *  - JS consumes them via `matchMedia(MOBILE_MEDIA_QUERY)` and Svelte 5
 *    `new MediaQuery(MOBILE_MEDIA_QUERY)`. Web code imports through the
 *    `@core/breakpoints` alias.
 *
 * `src/core/__tests__/breakpoints-sync.test.ts` asserts all three CSS copies
 * stay byte-identical to these constants.
 *
 * --mobile = LAYOUT TOPOLOGY (drawers vs docked). Primary `pointer: coarse`, so
 * a keyboard-attached iPad (trackpad primary) reads as desktop. `767.98px` (not
 * 768) dodges the exact overlap with Tailwind's `md` = min-width:768 and keeps a
 * classic 768px iPad on desktop. The `max-height: 500px` arm catches landscape
 * phones (≤~480 tall) while letting short tablets (≥600) fall through to desktop.
 *
 * --touch = TOUCH ERGONOMICS (44px tap targets, 16px inputs to dodge iOS focus
 * auto-zoom). `any-pointer: coarse` so a touch device still counts even when its
 * PRIMARY pointer is a trackpad (keyboard-attached iPad).
 */
export declare const MOBILE_MEDIA_QUERY = "(max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-height: 500px)";
export declare const TOUCH_MEDIA_QUERY = "(any-pointer: coarse)";
