.am-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.am-skip-link {
    position: absolute;
    left: var(--am-space-2);
    z-index: 40;
    padding: var(--am-space-2) var(--am-space-3);
    border-radius: var(--am-radius-md);
    background-color: var(--am-color-surface);
    color: var(--am-color-text);
    transform: translateY(-200%);
}

.am-skip-link:focus {
    transform: none;
}

.am-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--am-space-3);
    min-height: var(--am-size-header);
    padding: var(--am-space-2) var(--am-space-4);
    background-color: var(--am-color-surface);
    border-bottom: 1px solid var(--am-color-border);
}

.am-brand {
    color: var(--am-color-text);
    font-size: var(--am-font-size-section-title);
    font-weight: var(--am-font-weight-semibold);
    text-decoration: none;
}

.am-brand-name {
    display: none;
}

.am-header-plain .am-color-mode-switch {
    margin-left: auto;
}

.am-signed-out-main {
    display: flex;
    flex: 1;
    align-items: flex-start;
    justify-content: center;
    padding: var(--am-space-6) var(--am-space-4);
}

.am-signed-out-card {
    width: 100%;
    max-width: 24rem;
}

.am-layout {
    display: flex;
    flex: 1;
}

.am-sidebar {
    position: sticky;
    top: var(--am-size-header);
    display: none;
    flex-shrink: 0;
    align-self: flex-start;
    width: var(--am-size-sidebar);
    max-height: calc(100vh - var(--am-size-header));
    overflow-y: auto;
    padding: var(--am-space-3);
    background-color: var(--am-color-surface);
    border-right: 1px solid var(--am-color-border);
}

.am-content {
    flex: 1;
    min-width: 0;
    padding: var(--am-space-3);
}

.am-main > * + *,
.am-flow > * + * {
    margin-top: var(--am-space-3);
}

.am-main h2,
.am-flow h2 {
    margin: var(--am-space-4) 0 var(--am-space-2);
}

.am-main h2.bulma-title,
.am-flow h2.bulma-title {
    margin: var(--am-space-4) 0 var(--am-space-2);
}

.bulma-card-content > * + * {
    margin-top: var(--am-space-3);
}

.bulma-card-content > .bulma-message:not(:last-child) {
    margin-bottom: 0;
}

.bulma-card-content > .am-field + * {
    margin-top: 0;
}

.am-main:focus {
    outline: none;
}

.am-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--am-space-3) var(--am-space-4);
    background-color: var(--am-color-surface);
    border-top: 1px solid var(--am-color-border);
    color: var(--am-color-text-muted);
    font-size: var(--am-font-size-meta);
}

.am-sidebar-toggle {
    display: none;
}

@media (min-width: 480px) {
    .am-brand-name {
        display: inline;
    }

    .am-content {
        padding: var(--am-space-4);
    }
}

@media (min-width: 768px) {
    .am-sidebar {
        display: block;
    }

    .am-menu-button {
        display: none;
    }

    .am-sidebar-toggle {
        display: inline-flex;
    }

    :root[data-sidebar="hidden"] .am-sidebar {
        display: none;
    }

    .am-side-column {
        width: var(--am-size-side-column);
    }
}

.am-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--am-space-3);
}

.am-flex-between {
    justify-content: space-between;
}

.am-stack {
    display: flex;
    flex-direction: column;
    gap: var(--am-space-3);
    width: 100%;
}

.am-divider {
    margin: var(--am-space-2) 0;
    background-color: var(--am-color-border);
    border: 0;
    height: 1px;
}

.am-demo-box {
    padding: var(--am-space-3) var(--am-space-4);
    background-color: var(--am-color-surface-muted);
    border-radius: var(--am-radius-md);
}

.am-diagram {
    display: grid;
    grid-template-columns: 6rem 1fr;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    gap: var(--am-space-2);
    width: 100%;
}

.am-diagram-part {
    padding: var(--am-space-3);
    border: 1px dashed var(--am-color-control-border);
    border-radius: var(--am-radius-md);
}

.am-diagram-header {
    grid-area: header;
}

.am-diagram-sidebar {
    grid-area: sidebar;
}

.am-diagram-content {
    grid-area: content;
}

.am-diagram-footer {
    grid-area: footer;
}

.am-diagram-single {
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "content"
        "footer";
}