/* ============================================================
   LandLords — Utility Classes
   px only · breakpoints: 360/576/768/992/1200
   Uses design-tokens.css for all spacing/sizing/color vars.
   ============================================================ */

@layer utilities {
/* --- [hidden] attribute (HTML5) ---
   Guarantees `hidden` always hides, even when a component/layout rule in an
   earlier layer sets `display` (e.g. `.badge {display:inline-block}` shadowing
   the app.css layout rule `.topbar-icon-badge[hidden]`). Placed first in the
   last layer so explicit state utilities (.is-visible) can still override. */
/* stylelint-disable-next-line declaration-no-important */
[hidden] { display: none !important; }

/* --- State (.is- prefix) --- */
/* stylelint-disable declaration-no-important -- state utilities: must win over component display rules regardless of specificity */
.is-hidden { display: none !important; }
.is-visible { display: block !important; }
.is-collapsed { height: 0; overflow: hidden; padding: 0; margin: 0; }

/* --- Display --- */
.u-flex { display: flex; }

/* --- Flexbox --- */
.u-flex-wrap { flex-wrap: wrap; }
.u-items-end { align-items: flex-end; }
.u-gap-16 { gap: var(--spacing-16); }
.u-text-right { text-align: right; }
.u-text-muted { color: var(--color-text-muted); }
.u-text-accent { color: var(--color-accent); }
.u-text-secondary { color: var(--color-secondary); }

/* Wide modal variant: kit .modal-content--wide is 600px (pages/ladder.css),
   the roadmap modal needs room for 25 rows + filters; utilities layer wins
   over components layer. */
.u-modal-wide { max-width: 960px; }

/* responsive utilities: breakpoint display overrides must win over component rules
   (declaration-no-important already disabled above — a second disable is a lint error) */

/* --- Responsive: < 360px (tiny) --- */
@media (width <= 359px) {
}

/* --- Responsive: < 576px (mobile) --- */
@media (width <= 575px) {
}

/* --- Responsive: 576px - 767px (large mobile) --- */
@media (width >= 576px) and (width <= 767px) {
}

/* --- Responsive: 768px - 991px (tablet) --- */
@media (width >= 768px) and (width <= 991px) {
}

/* --- Responsive: 992px - 1199px (desktop) --- */
@media (width >= 992px) and (width <= 1199px) {
}

/* --- Responsive: >= 1200px (large desktop) --- */
@media (width >= 1200px) {
}
/* stylelint-enable declaration-no-important */
} /* end @layer utilities */