.tabBar {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px var(--col-neutral-6) solid;
    background-color: var(--col-text-backing);
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    height: 50px;
}

.tab {
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
}

.tab.active {
    background: var(--col-dark-highlight);
    color: var(--col-neutral-9);
}

.viewRecipePage {
    grid-template-rows: auto 1fr auto;
}

.recipePageMainContent {
    display: block;
    margin: 0;
    padding: 0;
    background-color: var(--col-text-backing);
}

.recipeTitle {
    padding-left: var(--padding-horizontal-edge);
    padding-right: var(--padding-horizontal-edge);
    border-bottom: 1px var(--col-text-backing-divider) solid;
}

.recipePageTabPanel {
    /* margin: 12px;
    margin-top: 16px; */
    padding-left: calc(var(--padding-horizontal-edge) + 8px);
    padding-right: calc(var(--padding-horizontal-edge) + 8px);
    padding-top: 8px;
    padding-bottom: 8px;
}

.recipeViewMeta {
    margin-bottom: 1.7rem;
}

#quantityScaleInput {
    width: 5ch;
}

.ingredientsQuantityScale {
    margin-top: 2.7rem;
    margin-bottom: 1.7rem;
}

.ingredientsQuantityScale > label {
    margin-right: 1ch;
}

.notes {
    white-space: pre-line;
}

.ingredientViewList {
    grid-template-columns: auto auto;
    display: inline-grid;
    grid-auto-rows: auto;
    column-gap: 20px;
    row-gap: 0.5rem;
    margin-bottom: 1.7rem;
}

.ingredientListName {
    margin-top: 0;
}

.instruction {
    margin-bottom: 0.5rem;
}