.wms-container {
    width: min(calc(100% - 2rem), var(--wms-container-xl));
    margin-inline: auto;
}
.wms-container--sm,
.wms-container--narrow { max-width: var(--wms-container-sm); }
.wms-container--md { max-width: var(--wms-container-md); }
.wms-container--lg { max-width: var(--wms-container-lg); }

.wms-stack { display: flex; flex-direction: column; gap: var(--wms-stack-gap, var(--wms-space-4)); }
.wms-stack--xs { --wms-stack-gap: var(--wms-space-2); }
.wms-stack--sm { --wms-stack-gap: var(--wms-space-3); }
.wms-stack--lg { --wms-stack-gap: var(--wms-space-6); }
.wms-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wms-cluster-gap, var(--wms-space-3)); }
.wms-cluster--between { justify-content: space-between; }
.wms-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wms-space-4); }
.wms-center { display: grid; place-items: center; }

.wms-grid { display: grid; gap: var(--wms-space-5); }
.wms-grid--two,
.wms-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wms-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wms-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wms-grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.wms-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.wms-section { padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.wms-section + .wms-section { border-top: 1px solid var(--wms-color-border); }
.wms-section--compact { padding-block: var(--wms-space-10); }
.wms-section--surface { background: var(--wms-color-surface); }
.wms-section--inverse { color: var(--wms-color-text-inverse); background: var(--wms-color-surface-inverse); }

.wms-navbar {
    position: relative;
    z-index: var(--wms-z-sticky);
    min-height: var(--wms-header-height);
    border-bottom: 1px solid color-mix(in srgb, var(--wms-color-border) 80%, transparent);
    background: color-mix(in srgb, var(--wms-color-surface) 90%, transparent);
    backdrop-filter: blur(16px);
}
.wms-navbar--sticky { position: sticky; top: 0; }
.wms-navbar__inner { display: flex; min-height: var(--wms-header-height); align-items: center; justify-content: space-between; gap: var(--wms-space-5); }
.wms-navbar__nav { display: flex; align-items: center; gap: var(--wms-space-1); margin-left: auto; }
.wms-navbar__actions { display: flex; align-items: center; gap: var(--wms-space-2); }
.wms-navbar__toggle { display: none; }

.wms-footer { padding-block: var(--wms-space-8); border-top: 1px solid var(--wms-color-border); color: var(--wms-color-text-muted); background: var(--wms-color-surface); font-size: var(--wms-font-size-sm); }
.wms-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wms-space-4); }

/* Dashboard application shell */
.wms-app-shell { display: grid; min-height: 100vh; grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr); grid-template-rows: var(--wms-header-height) minmax(0, 1fr); }
.wms-app-sidebar { position: sticky; display: flex; flex-direction: column; z-index: var(--wms-z-sticky); top: 0; grid-row: 1 / -1; height: 100vh; overflow-y: auto; border-right: 1px solid var(--wms-color-border); background: var(--wms-color-surface); }
.wms-app-sidebar__header { display: flex; min-height: var(--wms-header-height); align-items: center; padding-inline: var(--wms-space-5); border-bottom: 1px solid var(--wms-color-border); }
.wms-app-sidebar__body { flex: 1; padding: var(--wms-space-4); }
.wms-app-sidebar__footer { padding: var(--wms-space-4); border-top: 1px solid var(--wms-color-border); }
.wms-app-nav { display: grid; gap: var(--wms-space-1); }
.wms-app-nav__label { padding: var(--wms-space-4) var(--wms-space-3) var(--wms-space-2); color: var(--wms-color-text-subtle); font-size: 0.68rem; font-weight: var(--wms-font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.wms-app-nav__link { display: flex; align-items: center; gap: var(--wms-space-3); min-height: 2.7rem; padding-inline: var(--wms-space-3); border-radius: var(--wms-radius-sm); color: var(--wms-color-text-muted); font-size: var(--wms-font-size-sm); font-weight: var(--wms-font-weight-semibold); text-decoration: none; }
.wms-app-nav__link:hover,
.wms-app-nav__link[aria-current="page"] { color: var(--wms-color-primary); background: color-mix(in srgb, var(--wms-color-primary) 10%, transparent); }
.wms-app-nav__link .wms-badge { margin-left: auto; }

.wms-app-topbar { position: sticky; z-index: calc(var(--wms-z-sticky) - 1); top: 0; display: flex; min-width: 0; align-items: center; gap: var(--wms-space-4); padding-inline: var(--wms-space-5); border-bottom: 1px solid var(--wms-color-border); background: color-mix(in srgb, var(--wms-color-surface) 92%, transparent); backdrop-filter: blur(16px); }
.wms-app-topbar__title { min-width: 0; margin-right: auto; }
.wms-app-topbar__title h1 { overflow: hidden; font-size: var(--wms-font-size-lg); text-overflow: ellipsis; white-space: nowrap; }
.wms-app-topbar__actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--wms-space-2); }
.wms-app-topbar__actions .wms-form { width: auto; margin: 0; }
.wms-app-content { min-width: 0; padding: clamp(1rem, 3vw, 2rem); }
.wms-app-content__inner { width: min(100%, var(--wms-container-xl)); margin-inline: auto; }

/* Auth layout */
.wms-auth-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1.05fr) minmax(26rem, 0.95fr); }
.wms-auth-visual { position: relative; display: grid; overflow: hidden; place-items: center; padding: clamp(2rem, 7vw, 6rem); color: var(--wms-color-text-inverse); background: var(--wms-color-surface-inverse); }
.wms-auth-visual::before,
.wms-auth-visual::after { position: absolute; width: 24rem; height: 24rem; border-radius: 50%; content: ""; filter: blur(2px); }
.wms-auth-visual::before { top: -8rem; left: -8rem; background: color-mix(in srgb, var(--wms-color-primary) 55%, transparent); }
.wms-auth-visual::after { right: -9rem; bottom: -9rem; background: color-mix(in srgb, var(--wms-color-accent) 42%, transparent); }
.wms-auth-visual__content { position: relative; z-index: 1; max-width: 36rem; }
.wms-auth-panel { display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 5rem); background: var(--wms-color-background); }
.wms-auth-card { width: min(100%, 28rem); }
.wms-auth-card__header { display: flex; flex-direction: column; gap: var(--wms-space-2); }
.wms-auth-card__header h1,
.wms-auth-card__header p { margin: 0; }

/* Design system documentation shell */
.wms-doc-shell { display: grid; min-height: 100vh; grid-template-columns: 18rem minmax(0, 1fr); }
.wms-doc-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--wms-color-border); background: var(--wms-color-surface); }
.wms-doc-sidebar__header { display: flex; min-height: var(--wms-header-height); align-items: center; padding-inline: var(--wms-space-5); border-bottom: 1px solid var(--wms-color-border); }
.wms-doc-sidebar__nav { display: grid; gap: var(--wms-space-1); padding: var(--wms-space-4); }
.wms-doc-sidebar__link { padding: 0.55rem 0.75rem; border-radius: var(--wms-radius-sm); color: var(--wms-color-text-muted); font-size: var(--wms-font-size-sm); text-decoration: none; }
.wms-doc-sidebar__link:hover { color: var(--wms-color-primary); background: var(--wms-color-surface-muted); }
.wms-doc-main { min-width: 0; }
.wms-doc-topbar { position: sticky; z-index: var(--wms-z-sticky); top: 0; display: flex; min-height: var(--wms-header-height); align-items: center; justify-content: space-between; gap: var(--wms-space-4); padding-inline: var(--wms-space-5); border-bottom: 1px solid var(--wms-color-border); background: color-mix(in srgb, var(--wms-color-surface) 90%, transparent); backdrop-filter: blur(16px); }
.wms-doc-content { width: min(calc(100% - 2rem), var(--wms-container-lg)); margin-inline: auto; padding-block: var(--wms-space-8) var(--wms-space-20); }
.wms-doc-menu-toggle { display: none; }

@media (max-width: 64rem) {
    .wms-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wms-doc-shell { grid-template-columns: 1fr; }
    .wms-doc-sidebar { position: fixed; z-index: var(--wms-z-drawer); inset: 0 auto 0 0; width: min(88vw, 18rem); transform: translateX(-100%); transition: transform var(--wms-duration-normal) var(--wms-ease-standard); box-shadow: var(--wms-shadow-lg); }
    .wms-doc-sidebar.is-open { transform: translateX(0); }
    .wms-doc-menu-toggle { display: inline-flex; }
    .wms-app-shell { grid-template-columns: 1fr; }
    .wms-app-sidebar { position: fixed; z-index: var(--wms-z-drawer); inset: 0 auto 0 0; width: min(88vw, var(--wms-sidebar-width)); transform: translateX(-100%); transition: transform var(--wms-duration-normal) var(--wms-ease-standard); box-shadow: var(--wms-shadow-lg); }
    .wms-app-sidebar.is-open { transform: translateX(0); }
    .wms-app-topbar { grid-column: 1; }
    .wms-app-content { grid-column: 1; }
}

@media (max-width: 48rem) {
    .wms-grid--two,
    .wms-grid--three,
    .wms-grid--four { grid-template-columns: 1fr; }
    .wms-navbar__nav { display: none; }
    .wms-navbar__toggle { display: inline-flex; }
    .wms-auth-shell { grid-template-columns: 1fr; }
    .wms-auth-visual { display: none; }
    .wms-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* Auth contrast hardening (WMS 1.2.0-dev.2)
 * The visual column intentionally uses fixed semantic colors so dark/system
 * mode token inversion cannot make headings and branding unreadable.
 */
.wms-auth-visual {
    --wms-auth-visual-background: #0b1428;
    --wms-auth-visual-text: #f8fbff;
    --wms-auth-visual-muted: #d8e3f1;
    --wms-auth-visual-accent: #60a5fa;
    color: var(--wms-auth-visual-text);
    background: var(--wms-auth-visual-background);
}
.wms-auth-visual .wms-brand,
.wms-auth-visual .wms-brand:visited,
.wms-auth-visual .wms-brand__text,
.wms-auth-visual .wms-brand__name,
.wms-auth-visual .wms-brand__subtitle {
    color: var(--wms-auth-visual-text);
}
.wms-auth-visual .wms-brand__subtitle {
    opacity: 0.82;
}
.wms-auth-visual .wms-eyebrow {
    color: var(--wms-auth-visual-accent);
}
.wms-auth-visual h1,
.wms-auth-visual h2,
.wms-auth-visual .wms-display-title {
    color: var(--wms-auth-visual-text);
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.22);
}
.wms-auth-visual p,
.wms-auth-visual .wms-lead,
.wms-auth-visual .wms-text-muted {
    color: var(--wms-auth-visual-muted);
}
.wms-auth-visual::before {
    background: color-mix(in srgb, #2563eb 68%, transparent);
}
.wms-auth-visual::after {
    background: color-mix(in srgb, #0891b2 55%, transparent);
}

.wms-dashboard-widgets {
    display: grid;
    gap: var(--wms-space-5);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
.wms-dashboard-widget {
    min-width: 0;
    grid-column: span var(--wms-widget-span, 4);
}
@media (max-width: 64rem) {
    .wms-dashboard-widget { grid-column: 1 / -1; }
}


.wms-form-grid {
    display: grid;
    gap: var(--wms-space-4);
}
.wms-form-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.wms-workspace-shell { min-width: 0; }

@media (max-width: 48rem) {
    .wms-form-grid--two { grid-template-columns: 1fr; }
}