html.fi {
    --topbar-height: 3.25rem;
}

/* Top menu stays one row. Extra groups scroll sideways instead of wrapping. */
html.fi .fi-topbar {
    flex-wrap: nowrap;
    align-items: center;
    padding-inline: 0.75rem;
    column-gap: 0.5rem;
}

html.fi .fi-topbar-start {
    margin-inline-end: 0.75rem;
}

html.fi .fi-topbar-start .fi-logo {
    margin-inline-start: 0;
}

html.fi .fi-topbar-nav-groups {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    margin-inline: 0;
    gap: 0.15rem;
    overflow-x: auto;
    scrollbar-width: none;
}

html.fi .fi-topbar-nav-groups > * {
    flex: 0 0 auto;
}

html.fi .fi-topbar .fi-global-search-field {
    width: 11rem;
}

html.fi .fi-topbar-nav-groups::-webkit-scrollbar {
    display: none;
}

html.fi .fi-topbar-item-btn {
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    white-space: nowrap;
}

html.fi .fi-topbar-item-label {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

html.fi .fi-topbar-end {
    flex: 0 0 auto;
    gap: 0.35rem;
}

html.fi .fi-dropdown-panel {
    min-width: 14rem;
}

/* Mobile drawer uses the same rhythm as the top bar. */
html.fi .fi-sidebar-nav {
    gap: 1rem;
    padding: 1rem 1rem 1.25rem;
}

html.fi .fi-sidebar-nav-groups {
    gap: 1rem;
}

html.fi .fi-sidebar-group-items {
    gap: 0.15rem;
}

html.fi .fi-main {
    padding-inline: 0.75rem;
}

@media (min-width: 1024px) {
    html.fi .fi-main {
        padding-inline: 1.25rem;
    }
}

html.fi .fi-page-header-main-ctn {
    gap: 0.75rem;
    padding-block: 1rem;
}

html.fi .fi-header {
    gap: 0.75rem;
}

html.fi .fi-header-heading {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

html.fi .fi-header-subheading {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

html.fi .fi-page-content {
    gap: 1rem;
}

html.fi .fi-page.fi-page-has-sub-navigation .fi-page-main {
    gap: 1rem;
}

/* Forms, sections, and infolists. */
html.fi .fi-sc-form,
html.fi .fi-sc.fi-sc-has-gap {
    gap: 0.75rem;
}

html.fi .fi-fo-field,
html.fi .fi-in-entry {
    row-gap: 0.3rem;
}

html.fi .fi-fo-field-label-col,
html.fi .fi-fo-field-content-col,
html.fi .fi-in-entry-label-col,
html.fi .fi-in-entry-content-col {
    row-gap: 0.25rem;
}

html.fi .fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content,
html.fi .fi-section:not(.fi-section-not-contained).fi-divided > .fi-section-content-ctn > .fi-section-content > * {
    padding: 1rem 1.125rem;
}

html.fi .fi-section:not(.fi-aside):not(.fi-section-not-contained) > .fi-section-header {
    padding: 0.65rem 1.125rem;
}

html.fi .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    padding: 0.65rem 1.125rem;
}

html.fi .fi-section.fi-section-not-contained:not(.fi-aside),
html.fi .fi-section.fi-section-not-contained:not(.fi-aside) > .fi-section-content-ctn {
    row-gap: 0.75rem;
}

html.fi .fi-section-header-heading {
    font-size: 0.95rem;
    line-height: 1.4rem;
}

html.fi .fi-fo-repeater {
    row-gap: 0.75rem;
}

html.fi .fi-fo-repeater-items {
    gap: 0.75rem;
}

html.fi .fi-fo-repeater-item-header {
    padding: 0.55rem 0.85rem;
}

html.fi .fi-fo-repeater-item-content {
    padding: 0.85rem;
}

html.fi .fi-sc-wizard-header-step-btn {
    gap: 0.75rem;
    padding: 0.65rem 1rem;
}

html.fi .fi-sc-wizard-header-step-icon-ctn {
    width: 2rem;
    height: 2rem;
}

html.fi .fi-tabs:not(.fi-contained) {
    padding: 0.35rem;
}

html.fi .fi-tabs-item {
    padding: 0.35rem 0.7rem;
}

/* Modals that hold create and edit forms. */
html.fi .fi-modal-window > .fi-modal-header {
    padding: 0.9rem 1.125rem 0;
}

html.fi .fi-modal-window > .fi-modal-content {
    padding-block: 0.9rem;
}

html.fi .fi-modal-content,
html.fi .fi-modal-footer {
    padding-inline: 1.125rem;
}

html.fi .fi-modal-window > .fi-modal-footer {
    padding-bottom: 0.9rem;
}

html.fi .fi-ta-header-cell {
    padding-block: 0.45rem;
}

html.fi .fi-ta-record-content-ctn {
    gap: 0.35rem;
    padding-block: 0.45rem;
}

html.fi .fi-ta-cell:has(.fi-ta-actions),
html.fi .fi-ta-cell:has(.fi-ta-record-checkbox),
html.fi .fi-ta-summary-row-heading-cell {
    padding-block: 0.35rem;
}

html.fi .fi-ta-record-checkbox {
    margin-block: 0.35rem;
}

html.fi .fi-simple-main {
    margin-block: 2rem;
    padding: 1.75rem 1.5rem;
}

html.fi .fi-simple-header .fi-logo {
    margin-bottom: 0.75rem;
}

html.fi .fi-simple-header-heading {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

html.fi .fi-simple-page-content {
    gap: 1rem;
}