body {
    background-color: #FF6723;
    touch-action: pan-x pan-y;
}

html, body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#background {
    background-color: #ff8e2bb4;
    background-image: radial-gradient(circle at center center, #fce9bf, #FF8E2B), repeating-radial-gradient(circle at center center, #fce9bf, #fce9bf, 10px, transparent 20px, transparent 10px);
    background-blend-mode: multiply;

    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -300;
}

body {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 0.5em;
}

#landing {
    width: 30ex!important;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15.8ex;
    margin-top: -20ex;
}
#landing img {
    max-width: 30ex!important;
}

#footer {
    color: rgba(255,255,255,.5);
    font-size: x-small;
    padding: 1em;
    display: flex;
    justify-content: center;
}

#wrapper {
    padding: 0.5em 0 1em 0;
    width: 120ex;
    max-width: 100%;
}

.main, .tile, .nav-actions {
    border-radius: 1em;
    padding: 1em;
    background-color: rgba(252, 246, 241, 1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.tile {
    display: flex;
    flex-flow: column;
    justify-self: center;
}

a.tile {
    color: #000;
    text-decoration: none;
    align-self: start;
    overflow: hidden;
}
a.tile:hover {
    background-color: #fff
}
.recipe-list a.tile {
    max-width: 20ex;
}

#nav {
    margin: 0.5em 0;
    display: flex;
    align-items: center;
    flex-flow: wrap;
    justify-content: space-between;
}

.nav-actions {
    display: flex;
    margin: 0;
    padding: 0 0.5em;
    border-radius: 20em;
    background: #4900c1;
    background: linear-gradient(0deg, #4900c1 0%, #5600e2 100%);
}

.nav-actions .svelte-fa, .sort-button .svelte-fa {
    color: #fff!important;
    font-size: 1.2em!important;
}

.sort-button .svelte-fa {
    filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.6));
}

.nav-actions a .text {
    display: none;
}

h1, h2 {
    margin: 0 0 0.5ex 0;
}
h1 {
    font-size: 1.5em;
}
h2 {
    max-height: 2.4em;
    font-size: 1.2em;
}

hr {
    margin-bottom: 2ex!important;
}
hr::after {
    border-radius: 1ex;
    padding: 0.1em 0.5em!important;
}

#logo {
    height: 36pt;
    width: 48pt;
    object-fit: cover;
    object-position: 0;
}

/* Recipe List */
.recipe-list {
    display: grid;
    row-gap: 0.5em;
    column-gap: 0.5em;
    grid-template-columns: 50fr 50fr;
}

/* Recipe */
.recipe {
    display: grid;
}

.recipe img, .tile img {
    width: 100%;
    max-width: 30ex;
    height: auto;
    justify-self: center;
    margin-bottom: 0.5em;
}
.tile img {
    max-width: 20ex;
}

.recipe-image-action {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recipe-image-action svg {
    margin-right: 1ex;
}

.recipe .tags a {
    text-decoration: none;
    color: #aaa;
}
.recipe .tags a:hover {
    text-decoration: underline;
}

.ingredients {
    list-style: none;
    padding: 0 1em;
    margin: 0;
}

.unit {
    font-weight: bold;
}

.stats {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    clear: both;
}

.stats div {
    padding: 0.2em 0.5em;
    flex-grow: 1;
}

.stats div:first {
    margin-left: -1em;
    padding-left: 1em;
}

.makes, .prep, .cook {
    background-color: #6ec7ff!important;
}
.kcal {
    background-color: #9a6eff!important;
}
.fat {
    background-color: #ffd42a!important;
}
.carbs, .carb {
    background-color: #abc837!important;
}
.protein {
    background-color: #ff7f2a!important;
}

/* Nutrition table */
.nutrition-wrapper h1, .nutrition-wrapper h2 {
    display: inline-block;
}
.nutrition table {
    width: 100%;
}
.nutrition table tr:nth-child(even) {
    background: rgba(67, 0, 176, 0.03);
}
.nutrition-tabs {
    display: inline-flex;
    transform: translate(0.5em, -0.5em);
}

.shopping label:has(input:checked), .strike {
    text-decoration: line-through;
    opacity: 50%;
}

.shopping.hide_checked label:has(input:checked) {
    display: none!important;
}
.shopping.hide_checked .hidden {
    display: none;
}

/* Meal plans */
.plan-list {
    display: grid;
    gap: 0.5em;
    justify-items: stretch;
    align-items: stretch;
    justify-content: stretch;
    align-content: stretch;
}
.plan.tile {
    justify-self: stretch;
}
.imagelist {
    display: flex;
    overflow-x: scroll;
    /* opacity: .5; */
    gap: 0.5em;
    margin-bottom: -30px;
    padding-bottom: 20px;
}
.plan.tile:hover .imagelist {
    opacity: 1;
}
.imagelist img {
    max-height: 15ex;
    width: auto;
}
.plan-name {
    display: flex;
    align-items: start;
    justify-content: space-between;
}
.plan .stats {
    flex-wrap: nowrap;
}
.plan .chip {
    align-self: center;
}
.plan > .flex {
    align-items: center;
}

.badge {
    display: flex;
    transform: translate(0.5em, -3em);
    margin-bottom: -1.7em;
}

.badge:empty {
    display: none;
}

.badge .chip {
    background-color: rgba(255, 255, 255, 0.7)!important;
}

svg.active {
    fill: #6933c0!important;
    stroke: #6933c0!important;
}

/* Ingredients */
.ingredientstable {
    margin: 0!important;
}

/* Editors */
.editor .meal-container {
    background-color: #ff7f2a;
    margin: -1em;
    padding: 1em;
}

.editor h1 {
    text-transform: uppercase;
    font-stretch: condensed;
    font-family: 'Helvetica Neue', 'Arial Narrow', sans-serif!important;
}

/* Helpers */

.flex {
    display: flex;
}

.flex.centered {
    justify-content: center;
    align-items: center;
}

.flex.gap {
    gap: 0.5em;
}
.flex.end {
    align-items: flex-end;
}
.flex.space-between {
    justify-content: space-between;
}
.flex.wrap {
    flex-wrap: wrap;
}
.flex .grow {
    flex-grow: 1;
}

.inline-block {
    display: inline-block;
}
.inline-block.small {
    width: 4em;
    flex-basis: 4em;
    flex-shrink: 0;
}
.space-below {
    margin-bottom: 0.5em;
}

/* TODO: override with attractions sass preprocessor */
.form-field .description {
    flex-basis: 20%!important;
}

.snackbar-stack {
    position: fixed;
    bottom: 1ex;
    left: 1ex;
    z-index: 100;
}

.flex .pagination {
    margin: 1em!important;
}

.ptr--ptr {
    background: #4900c1;
    background: linear-gradient(0deg, #4900c1 0%, #5600e2 100%);
    padding: 0 1em;
}

.ptr--text, .ptr--icon {
    color: rgba(255,255,255,.8)!important;
}

/* Tablet */
@media (min-width: 43em) {
    .plan-list {
        grid-template-columns: 50fr 50fr;
    }
    .ingredientstable {
        width:100%;
        display:table!important;
    }
    #logo {
        width: auto;
    }
    #nav .nav-actions a .text {
        display: inline;
        color: #fff!important;
        font-stretch: condensed;
        font-family: 'Helvetica Neue', 'Arial Narrow', sans-serif!important;
        text-transform: uppercase;
        font-weight: 600;
        margin-left: 0.5ex;
    }
    #nav .nav-actions a:hover .text {
        text-decoration: underline;
    }
    .recipe-list {
        grid-template-columns: 33fr 33fr 33fr;
        column-gap: 1em;
    }
    .recipe-list a.tile {
        max-width: 25ex;
    }
    .tile img {
        max-width: 25ex;
    }
    .recipe { grid-template-columns: 50fr 50fr }
    .instructions {
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .nutrition {
        columns: 2;
    }
}

/* Desktop */
@media (min-width: 62em) {
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.5em;
    }
    #logo {
        height: 42pt;
    }
    .tile img {
        max-width: 26ex;
    }
    .recipe-list {
        grid-template-columns: 25fr 25fr 25fr 25fr;
    }
    .recipe-list a.tile {
        max-width: 30ex;
    }
    .recipe { grid-template-columns: 25fr 25fr 50fr; }
    .instructions {
        grid-column-start: 3;
        grid-column-end: 3;
    }
    .nutrition {
        columns: 3;
    }
}

/*
    Breakoff points:
    (default) mobile
    min 43em = tablet
    min 62em = desktop
*/