/* Page-level layout shared by the client's pages. Tokens only (visual direction). */

.page-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--page-padding);
}

.page-message {
    padding: var(--page-padding);
}

.sign-in,
.case,
.setup-section,
.summary-region,
.gallery section,
.gallery-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.summary-text {
    white-space: pre-line;
}

/* The field and button styles come from src/UI (TextField, FormActions). */
.setup-form {
    max-inline-size: var(--form-max-width);
}

.gallery-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    max-inline-size: var(--nav-rail-expanded);
    padding: var(--space-2);
    background: var(--surface-chrome);
    border-radius: var(--radius-overlay);
}

.gallery-brand {
    align-items: center;
    gap: var(--space-6);
}

.gallery-user-menus {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* A strip of rail chrome, so the user menu sits on the surface it's drawn for. */
.gallery-rail-sample {
    inline-size: var(--nav-rail-expanded);
    padding: var(--space-2);
    background: var(--surface-chrome);
    border-radius: var(--radius-overlay);
}

.gallery-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.gallery-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-icons li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    border: var(--stroke-thickness) solid var(--stroke-divider);
    border-radius: var(--radius-control);
}

.gallery-icon-set {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.gallery-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-inline-size: var(--form-max-width);
}

.gallery-form-layout > .info-bar {
    max-inline-size: var(--form-max-width);
    margin-block-end: var(--space-6);
}

/* "Admin" above the admin pages in the rail, lined up with the items' icons. A collapsed rail has no room for the word:
   a divider stands in for it, and the text stays for screen readers. */
.nav-rail-heading {
    margin: var(--space-3) var(--space-2) var(--space-1);
}

:root[data-rail="collapsed"] .nav-rail .nav-rail-heading {
    block-size: 0;
    margin-inline: var(--space-1);
    overflow: hidden;
    border-block-start: var(--stroke-thickness) solid var(--stroke-divider);
}

/* The start-up screen in index.html: the brand's lockup (put there by the host) above "Loading…". */
.boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-block-size: 100vh;
    padding: var(--page-padding);
}