/* ============================================
   layout.css — app shell
   Mobile-first; office width via tokens.
   ============================================ */

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Menu chrome: hidden until boot marks the session authenticated */
#menu {
    display: none;
    padding: var(--page-pad);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-elevated);
}

html[data-authed="1"] #menu {
    display: block;
}

/* Menu button + global Messages alert (same strip, open real estate) */
.menu-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    max-width: var(--content-max);
    margin-inline: auto;
}

.menu-bar > form {
    margin: 0;
}

#msg-alert {
    margin-left: auto;
    min-height: 0;
}

#msg-alert[hidden] {
    display: none !important;
}

#content {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: var(--page-pad);
}

#content.loading {
    color: var(--color-text-muted);
}