/*
 * core_ui / core-utilities.css
 * ---------------------------------------------------------------------
 * Small single-purpose helpers. Layout-scale primitives (stack/row/grid)
 * live in core-layout.css because they're structural; this file is for
 * one-off escape hatches too small to deserve their own component.
 */
.core-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.core-hide         { display: none !important; }
.core-text-center  { text-align: center; }
.core-text-right   { text-align: right; }

/* Spacing overrides, for the one-off case a component's own default
   margin/gap is wrong for where it's placed -- not a replacement for
   giving a component its own margin when every instance needs it. */
.core-mt-1 { margin-top: var(--core-space-1); }
.core-mt-2 { margin-top: var(--core-space-2); }
.core-mt-3 { margin-top: var(--core-space-3); }
.core-mt-4 { margin-top: var(--core-space-4); }
.core-mt-6 { margin-top: var(--core-space-6); }
.core-mb-2 { margin-bottom: var(--core-space-2); }
.core-mb-3 { margin-bottom: var(--core-space-3); }
.core-mb-4 { margin-bottom: var(--core-space-4); }
.core-mb-6 { margin-bottom: var(--core-space-6); }
.core-mb-8 { margin-bottom: var(--core-space-8); }
.core-gap-2 { gap: var(--core-space-2); }
.core-items-baseline { align-items: baseline; }
.core-pre-line { white-space: pre-line; }
.core-overflow-x-auto { overflow-x: auto; }
.core-fs-4 { font-size: var(--core-text-4); }

/* Pushes a flex item, and any following siblings sharing its row, to the
   end of that row. Robust to how many siblings follow it -- unlike
   changing the container's own justify-content, which redistributes space
   across however many children happen to be present (e.g. a header row
   whose search form is only conditionally rendered). */
.core-push-end { margin-inline-start: auto; }

/* Body scroll lock while a modal/drawer is open (e.g. core_ui/components/
   header.html's mobile-nav drawer, toggled by core-nav.js). */
.core-no-scroll { overflow: hidden; }

@media (max-width: 640px) {
    .core-hide-mobile { display: none !important; }
}
@media (min-width: 641px) {
    .core-hide-desktop { display: none !important; }
}