/* Compatibility layer: authoritative rules remain in /css/design-system.css. */
body > header,
header.app-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: var(--header-h);
    min-height: var(--header-h);
}

body > header > nav,
header.app-header > nav {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + 46px);
    z-index: 120;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-2);
    width: var(--nav-menu-w, min(260px, calc(100vw - 2rem)));
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - var(--header-h) - 3.5rem);
    overflow-y: auto;
    border: 2px solid #000;
    border-radius: var(--border-radius, var(--radius-md));
    padding: var(--space-2);
    background: var(--card-bg);
    color: var(--fg);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 8px, 0) scale(0.98);
    transform-origin: 100% 100%;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

body > header.open > nav,
header.app-header.open > nav {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
}

body > header > nav a,
body > header > nav button,
body > header > nav form,
header.app-header > nav a,
header.app-header > nav button,
header.app-header > nav form {
    color: var(--fg);
}

body > header > nav a,
body > header > nav button,
header.app-header > nav a,
header.app-header > nav button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

body > header > nav form,
header.app-header > nav form {
    display: flex;
    margin: 0;
}

body > header > nav svg,
header.app-header > nav svg {
    color: currentColor;
    fill: white;
    stroke:black;
}

#nav-toggle,
.nav-toggle,
#dashboard-nav-toggle {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 130;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-height: 38px;
    border: 2px solid #000;
    border-radius: var(--border-radius, var(--radius-md));
    padding: 0.35rem;
    background: var(--card-bg);
    color: var(--fg);
    transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

#nav-toggle:empty::before,
.nav-toggle:empty::before,
#dashboard-nav-toggle:empty::before {
    content: "☰";
    font-size: 1rem;
    line-height: 1;
}

#section-nav-toggle { display: none !important; }

.form-container-wrapper {
    position: fixed !important;
    inset: 0 !important;
    z-index: 90;
    display: grid !important;
    place-items: center !important;
    padding: calc(var(--header-h) + 1rem) clamp(1rem, 4vw, 3rem) 1.5rem !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1rem);
}

.form-container-wrapper.form-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.form-container {
    width: min(420px, 100%) !important;
    max-width: min(420px, 100%) !important;
    margin: 0 auto !important;
}

.auth-shell,
.login-shell {
    min-height: 100dvh !important;
    display: grid !important;
    align-content: center !important;
    justify-content: center !important;
    justify-items: stretch !important;
}