/* Every routed page uses rb-page. Keep Bootstrap container classes for existing
   component hooks; one shared width owns the application geometry. */
:root {
    --rb-page-width: 70rem;
    --rb-page-gutter: 1.5rem;
    --rb-page-gap: 1.5rem;
    --rb-panel-radius: .875rem;
    --rb-panel-padding: 1.5rem;
    --rb-title-size: 1.65rem;
}
#app > * { min-width: 0; }
#app .rb-page, .rb-page {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--rb-page-width);
    margin-inline: auto;
    padding-inline: var(--rb-page-gutter);
    padding-block: 1.5rem 3rem;
    min-width: 0;
}
.rb-page .rb-page { padding: 0; max-width: none; }
.rb-page .rb-page-header, .rb-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--rb-page-gap);
}
.rb-page-header > div:first-child { min-width: 0; max-width: 100%; }
.rb-page .rb-page-title, .rb-page-title {
    margin: 0;
    color: var(--rb-text-heading);
    font-size: var(--rb-title-size);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}
.rb-page-header p, .rb-page-header .rb-subhead {
    margin: .4rem 0 0;
    color: var(--bs-secondary-color);
    font-size: .9rem;
    max-width: 65ch;
    line-height: 1.5;
}
.rb-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rb-page-actions .btn { white-space: nowrap; }
.rb-form-section { max-width: 50rem; }
@media (max-width: 767.98px) {
    :root { --rb-page-gutter: .75rem; --rb-panel-padding: 1rem; --rb-title-size: 1.4rem; }
    .rb-page-header { align-items: flex-start; }
    .rb-page-actions { width: 100%; }
}