/* =====================================================================
   UTILITIES — single-purpose layout & typography helpers used by the
   markup. Loaded last; spacing/typography helpers are !important so they
   behave like the inline styles they replace. Visibility state (.is-hidden)
   is intentionally NOT !important so scripts can still toggle display.
   ===================================================================== */

/* Flex & grid layout */
.u-flex { display: flex !important; }
.u-row { display: flex !important; align-items: center !important; }
.u-row-between { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.u-col { display: flex !important; flex-direction: column !important; }
.u-grid-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; }
.u-wrap { flex-wrap: wrap !important; }
.u-items-start { align-items: flex-start !important; }
.u-items-end { align-items: end !important; }
.u-items-stretch { align-items: stretch !important; }
.u-flex-1 { flex: 1 !important; }
.u-span-2 { grid-column: span 2 !important; }
.u-min-w-0 { min-width: 0 !important; }
.u-scroll-x { overflow-x: auto !important; }

/* Gaps */
.u-gap-6 { gap: 6px !important; }
.u-gap-8 { gap: 8px !important; }
.u-gap-10 { gap: 10px !important; }

/* Spacing */
.u-m-0 { margin: 0 !important; }
.u-mt-6 { margin-top: 6px !important; }
.u-mt-8 { margin-top: 8px !important; }
.u-mt-10 { margin-top: 10px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mb-8 { margin-bottom: 8px !important; }
.u-mb-10 { margin-bottom: 10px !important; }

/* Typography & color */
.u-mono { font-family: 'JetBrains Mono', monospace !important; }
.u-fw-500 { font-weight: 500 !important; }
.u-text-primary { color: var(--md-primary) !important; }
.u-text-secondary { color: var(--md-secondary) !important; }
.u-text-tertiary { color: var(--md-tertiary) !important; }
.u-text-on-surface { color: var(--md-on-surface) !important; }

/* Initial visibility state — scripts override it with inline display values */
.is-hidden { display: none; }