@font-face {
    font-family: PlayfairDisplay;
    src: url("../font/playfair-display/PlayfairDisplay-Regular.ttf");
    font-weight: 400;
}
@font-face {
    font-family: PlayfairDisplay;
    src: url("../font/playfair-display/PlayfairDisplay-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: PlayfairDisplay;
    src: url("../font/playfair-display/PlayfairDisplay-Medium.ttf");
    font-weight: 500;
}
@font-face {
    font-family: PlayfairDisplay;
    src: url("../font/playfair-display/PlayfairDisplay-SemiBold.ttf");
    font-weight: 600;
}
@font-face {
    font-family: PlayfairDisplay;
    src: url("../font/playfair-display/PlayfairDisplay-Bold.ttf");
    font-weight: 700;
}
@font-face {
    font-family: PlayfairDisplay;
    src: url("../font/playfair-display/PlayfairDisplay-ExtraBold.ttf");
    font-weight: 800;
}
@font-face {
    font-family: PlayfairDisplay;
    src: url("../font/playfair-display/PlayfairDisplay-Black.ttf");
    font-weight: 900;
}
@font-face {
    font-family: PlusJakarta Sans;
    src: url("../font/plus-jakarta-sans/PlusJakartaSans-ExtraLight.ttf");
    font-weight: 200;
}
@font-face {
    font-family: PlusJakarta Sans;
    src: url("../font/plus-jakarta-sans/PlusJakartaSans-Light.ttf");
    font-weight: 300;
}
@font-face {
    font-family: PlusJakarta Sans;
    src: url("../font/plus-jakarta-sans/PlusJakartaSans-Regular.ttf");
    font-weight: 400;
}
@font-face {
    font-family: PlusJakarta Sans;
    src: url("../font/plus-jakarta-sans/PlusJakartaSans-Medium.ttf");
    font-weight: 500;
}
@font-face {
    font-family: PlusJakarta Sans;
    src: url("../font/plus-jakarta-sans/PlusJakartaSans-Bold.ttf");
    font-weight: 700;
}
@font-face {
    font-family: PlusJakarta Sans;
    src: url("../font/plus-jakarta-sans/PlusJakartaSans-ExtraBold.ttf");
    font-weight: 800;
}

:root {
    --color-primary: #2D5A43;
    --color-primary-shade-1: #002112;
    --color-primary-shade-2: #063824;
    --color-primary-shade-3: #224F39;
    --color-primary-shade-4: #3A674F;
    --color-primary-shade-5: #538167;
    --color-primary-shade-6: #6C9B80;
    --color-primary-shade-7: #86B69A;
    --color-primary-shade-8: #A1D1B4;
    --color-primary-shade-9: #BCEECF;
    --color-primary-shade-10: #CAFCDD;

    --color-secondary: #D96B43;
    --color-secondary-shade-1: #390C00;
    --color-secondary-shade-2: #5C1900;
    --color-secondary-shade-3: #802A05;
    --color-secondary-shade-4: #A0401C;
    --color-secondary-shade-5: #C05832;
    --color-secondary-shade-6: #E07148;
    --color-secondary-shade-7: #FF8B62;
    --color-secondary-shade-8: #FFB59C;
    --color-secondary-shade-9: #FFDBCF;
    --color-secondary-shade-10: #FFEDE8;

    --color-neutral-shade-1: #191C1A;
    --color-neutral-shade-2: #2E312F;
    --color-neutral-shade-3: #454745;
    --color-neutral-shade-4: #5C5F5C;
    --color-neutral-shade-5: #757875;
    --color-neutral-shade-6: #8F918E;
    --color-neutral-shade-7: #AAACA9;
    --color-neutral-shade-8: #C5C7C4;
    --color-neutral-shade-9: #E1E3DF;
    --color-neutral-shade-10: #F0F1ED;

    --color-tertiary: #F28C60;
    --color-neutral: #1C1F1D;
    --color-background: #FAF8F5;
    --color-neutral-light: rgba(from var(--color-neutral) r g b / 0.05);
    --color-neutral-medium: rgba(from var(--color-neutral) r g b / 0.2);
    --color-light: white;
    --color-dark: black;
    --border-radius-s: 0.5rem;
    --border-radius-m: 1rem;
    --font-primary: PlusJakarta Sans;
    --font-secondary: PlayfairDisplay;
    --box-shadow-regular: 0px 0px 10px 2px rgba(0,0,0,0.025);
    --transition-time-regular: 0.2s;
    --transition-timing-function-regular: ease-in-out;
    --transition-regular: var(--transition-time-regular) var(--transition-timing-function-regular);
    --padding-default: 0.75rem;
    --blur: blur(10px);

    /* mapping of color tokens to element types */
    --color-background-content: var(--color-neutral-shade-10);
    --color-background-tile: var(--color-light);
    --color-border: var(--color-neutral-shade-10);
    --color-button-primary-background: var(--color-primary-shade-2);
    --color-button-primary-text: var(--color-light);
    --color-button-secondary-background:  var(--color-primary-shade-5);
    --color-button-secondary-text: var(--color-light);
    --color-badge-primary-background: var(--color-button-primary-background);
    --color-badge-primary-text: var(--color-button-primary-text);
    --color-badge-secondary-background: var(--color-button-secondary-background);
    --color-badge-secondary-text: var(--color-button-secondary-text);    
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    background-color: var(--color-neutral-shade-9);
    color: var(--color-neutral-shade-1);
}

@media (prefers-color-scheme: dark) {
    body {
        color: var(--color-neutral-shade-10);
        background-color: var(--color-primary-shade-1);
    }

    :root {
        --color-background-content: var(--color-primary-shade-2);
        --color-background-tile: var(--color-primary-shade-3);
        --color-button-primary-background: var(--color-light);
        --color-button-primary-text: var(--color-dark);
        --color-button-secondary-background: var(--color-primary-shade-8);
        --color-button-secondary-text: var(--color-dark);
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-secondary);
    margin-bottom: 1rem;
}

.light {
    font-weight: 200;
    font-size: 0.8rem;
}

p {
    margin-bottom: 1rem;

    &.unset {
        margin-bottom: unset;
    }
}

a {
    text-decoration: none;

    &.unset {
        color: inherit;
    }
}

ul {
    &.unset {
        list-style-type: none;
    }
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.8rem;
}

input, textarea, select {
    padding: var(--padding-default);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-s);
    transition: opacity var(--transition-regular), background-color var(--transition-regular);
    color: inherit;
    background-color: transparent;
}

input {
    appearance: none;

    &::placeholder {
        opacity: 0.5;
    }

    &:not(:focus) {
        background-color: var(--color-neutral-light);
    }

    &:focus {
        border-color: var(--color-primary);
        outline: none;
    }

    &:has(~ label) {
        margin-bottom: 1rem;
    }
}

/*
 * the marker of a select is drawn here instead of natively: the native one sits at the edge of the
 * box and ignores the padding. two thin diagonal strokes in `currentColor` form the chevron, so it
 * takes the text colour of every select, hover states included.
 *
 * the inline padding runs through `--select-padding-inline` - the chevron is placed by it, and the
 * end padding adds the room the chevron needs. a select with a padding of its own therefore sets
 * that property and `padding-block` rather than the `padding` shorthand, which would drop the room
 */
select {
    --select-padding-inline: var(--padding-default);
    --select-arrow-size: 0.3em;
    --select-arrow-stroke: 1.5px;
    --select-arrow-line: transparent calc(50% - var(--select-arrow-stroke) / 2), currentColor calc(50% - var(--select-arrow-stroke) / 2), currentColor calc(50% + var(--select-arrow-stroke) / 2), transparent calc(50% + var(--select-arrow-stroke) / 2);
    appearance: none;
    padding-inline: var(--select-padding-inline) calc(var(--select-padding-inline) + 2 * var(--select-arrow-size) + 0.5em);
    background-image:
        linear-gradient(45deg, var(--select-arrow-line)),
        linear-gradient(-45deg, var(--select-arrow-line));
    background-size: var(--select-arrow-size) var(--select-arrow-size);
    background-position:
        right calc(var(--select-padding-inline) + var(--select-arrow-size)) center,
        right var(--select-padding-inline) center;
    background-repeat: no-repeat;
}

textarea {
    resize: none;
    width: 100%;
    padding: 1rem;
    font-family: inherit;
    min-height: 8rem;
}

progress {
    appearance: none;
    width: 100%;
    height: 0.5rem;
    border: none;
    border-radius: var(--border-radius-s);
    overflow: hidden;
    background-color: var(--color-neutral-light);

    &[hidden] {
        display: none;
    }

    &::-webkit-progress-bar {
        background-color: var(--color-neutral-light);
        border-radius: var(--border-radius-s);
    }

    &::-webkit-progress-value {
        background-color: var(--color-primary);
        border-radius: var(--border-radius-s);
        transition: width var(--transition-regular);
    }

    &::-moz-progress-bar {
        background-color: var(--color-primary);
        border-radius: var(--border-radius-s);
        transition: width var(--transition-regular);
    }
}

button, .button {
    display: block;
    color: var(--color-light);
    appearance: none;
    padding: var(--padding-default) calc(2 * var(--padding-default));
    border-radius: var(--border-radius-s);
    border: 1px solid var(--color-primary);
    cursor: pointer;
    font-size: 0.8rem;

    &.primary {
        background-color: var(--color-button-primary-background);
        border-color: var(--color-button-primary-background);
        color: var(--color-button-primary-text);
    }

    &.secondary {
        background-color: var(--color-button-secondary-background);
        border-color: var(--color-button-secondary-background);
        color: var(--color-button-secondary-text);
    }

    &.unset {
        border: unset;
        border-radius: unset;
        color: unset;
        background-color: unset;
        padding: unset;
    }

    &:has(svg) {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;

        & svg {
            height: 1rem;
        }
    }
}

picture {
    display: block;
}

.icon {
    height: 1rem;
}

.text-separator {
    position: relative;

    & > span {
        display: block;
        width: fit-content;
        margin: auto;
        padding: 0 1rem;
        background-color: var(--color-background-content);
        z-index: 1;
        position: relative;
    }

    &::after {
        content: "";
        background-color: var(--color-border);
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        height: 1px;
        z-index: 0;
    }
}

/* a raised card - shared, since the share layout (views/layouts/share.hbs) does not load main.css */
.tile {
    box-shadow: var(--box-shadow-regular);
    border-radius: var(--border-radius-m);
    background-color: var(--color-background-tile);
    padding: 1rem;
}

.badge {
    border-radius: var(--border-radius-m);
    padding: 0.25rem 1rem;
    background-color: var(--color-badge-primary-background);
    color: var(--color-badge-primary-text);
    margin: 0 1rem;
    font-size: 0.8rem;
    font-weight: 500;

    &.secondary {
        background-color: var(--color-badge-secondary-background);
        color: var(--color-badge-secondary-text);
    }
}

.select-patch {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;

    & .chips {
        display: flex;
        flex-flow: row wrap;
        gap: 0.5rem;

        & .chip {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.5rem;
            padding: 0.25rem 1rem 0.25rem 1.5rem;
            border-radius: var(--border-radius-m);
            background-color: var(--color-primary);
            color: var(--color-light);
            font-size: 0.8rem;
            font-weight: 500;

            & .remove {
                display: flex;
                align-items: center;
                padding: 0.25rem;
                color: inherit;
                cursor: pointer;

                & .icon {
                    height: 0.7rem;
                }

                &:hover {
                    opacity: 0.7;
                }
            }
        }
    }
}

.select-search {
    display: block;
    width: 100%;

    & .search {
        width: 100%;

        & .query {
            width: 100%;
            padding-right: 2.5rem;
        }

        & .clear {
            position: absolute;
            top: 50%;
            right: 0.5rem;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            padding: 0.25rem;
            cursor: pointer;

            & .icon {
                height: 0.7rem;
            }

            &:hover {
                opacity: 0.7;
            }
        }
    }
}

.select-patch,
.select-search {
    & .search {
        position: relative;

        & input {
            padding: 0.5rem;
        }

        & .options {
            top: anchor(bottom);
            left: anchor(left);
            width: fit-content;
            margin: 0.5rem 0 0;
            max-height: 16rem;
            overflow-y: auto;
            flex-direction: column;
            gap: 0.25rem;
            background-color: var(--color-light);
            border: 1px solid var(--color-neutral-medium);
            border-radius: var(--border-radius-s);
            box-shadow: var(--box-shadow-regular);
            padding: 0.5rem;

            &:popover-open {
                display: flex;
            }

            & .option,
            & .empty {
                padding: 0.5rem 0.75rem;
                border-radius: var(--border-radius-s);
                font-size: 0.8rem;
            }

            & .option {
                cursor: pointer;
                transition: background-color var(--transition-regular);

                &:hover {
                    background-color: var(--color-neutral-light);
                }

                &.create {
                    color: var(--color-primary);
                    font-weight: 800;
                    position: relative;

                    &:has(~ .option)::after {
                        content: "";
                        display: block;
                        height: 1px;
                        width: 100%;
                        margin-top: 1rem;
                        background-color: var(--color-primary);
                    }
                }
            }

            & .empty {
                opacity: 0.5;
            }
        }
    }
}

dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: var(--border-radius-m);
    padding: 0;
    box-shadow: var(--box-shadow-regular);
    background-color: var(--color-light);

    &::backdrop {
        backdrop-filter: var(--blur);
    }
}

[popover] {
    border: unset;
}

/* shared create/edit dialog of the ingredient resource - see views/partials/ingredient-dialog.hbs */
.ingredient-dialog {
    width: 28rem;
    max-width: calc(100vw - 2rem);

    & form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    & .heading {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        & h2 {
            margin-bottom: unset;
        }

        & .close {
            padding: 0.5rem;
            cursor: pointer;
        }
    }

    & fieldset {
        border: 1px solid var(--color-neutral-medium);
        border-radius: var(--border-radius-s);
        padding: 1rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;

        & legend {
            padding: 0 0.5rem;
            font-size: 0.8rem;
            text-transform: uppercase;
            font-weight: 500;
        }
    }

    & .error {
        color: var(--color-secondary);
    }

    & .actions {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: 1rem;
    }
}

/*
 * defaults for the refreshes that ask for a view transition via
 * client.refresh(selector, { view_transition: true }) - individual views name
 * the elements they want morphed on top of this
 */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

.planner-bar,
.collection-bar {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 1rem;

    & .planner-switch select,
    & .collection-switch select {
        --select-padding-inline: 0.75rem;
        padding-block: 0.5rem;
        font-family: var(--font-secondary);
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: var(--border-radius-m);
        cursor: pointer;
        border: 1px solid var(--color-neutral-medium);
        color: var(--color-button-primary-text);
        background-color: var(--color-button-primary-background);
    }

    & .shared-badge {
        margin: 0;
        background-color: var(--color-secondary);
    }

    & .create {
        margin-left: auto;
        white-space: nowrap;
    }
}

.planner-settings,
.collection-settings {

    & summary {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;

        & svg {
            height: 1rem;
        }
    }

    & .body {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 0 1.5rem 1.5rem;
    }

    & .rename input {
        width: 100%;
        max-width: 24rem;
    }

    & .sharing {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;

        & h3 {
            margin-bottom: unset;
            font-size: 1rem;
        }

        & .shared-member {
            display: flex;
            flex-flow: row wrap;
            gap: 0.75rem;

            & li {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 0.5rem;
                padding: 0.25rem 0.5rem 0.25rem 0.25rem;
                border: 1px solid var(--color-neutral-light);
                border-radius: var(--border-radius-m);
            }

            & .avatar {
                height: 1.75rem;
                border-width: 1px;
                font-size: 0.7rem;
            }

            & .name {
                font-size: 0.8rem;
            }

            & .remove {
                display: flex;
                align-items: center;
                padding: 0.25rem;
                cursor: pointer;

                & .icon {
                    height: 0.7rem;
                }

                &:hover {
                    color: var(--color-secondary);
                }
            }
        }

        & .add-member {
            align-self: flex-start;
        }

        /* the searchable member select (views/partials/input/select-search.hbs) */
        & .add-member {
            width: min(20rem, 100%);

            & .query {
                font-family: inherit;
                font-size: 0.8rem;
                border: 1px dashed var(--color-neutral-medium);
                border-radius: var(--border-radius-m);
                background-color: transparent;
            }
        }
    }
}

.sortable-controls {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.125rem;
}

[data-sortable-move] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    color: var(--color-neutral-medium);
    cursor: pointer;

    & svg {
        height: 1.25rem;
    }

    &:hover,
    &:focus-visible {
        color: inherit;
    }

    &:disabled {
        opacity: 0.35;
        cursor: default;
        color: var(--color-neutral-medium);
    }
}

.sortable-controls [data-sortable-handle] {
    display: none;
}

@media screen and (min-width: 800px) {
    .sortable-controls [data-sortable-handle] {
        display: inline-flex;
    }

    .sortable-controls [data-sortable-move] {
        display: none;
    }
}

/* the handle takes the touch gesture for itself, so dragging it moves the item instead of scrolling */
[data-sortable-handle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    color: var(--color-neutral-medium);
    cursor: grab;
    touch-action: none;
    user-select: none;

    & svg {
        height: 1.25rem;
    }

    &:hover,
    &:focus-visible {
        color: inherit;
    }
}

html.is-sorting {
    cursor: grabbing;
    user-select: none;

    & [data-sortable-handle] {
        cursor: grabbing;
    }
}

[data-sortable] > .is-sorting {
    position: relative;
    z-index: 1;
    box-shadow: var(--box-shadow-regular), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    background-color: var(--color-background-tile);
}

[disabled], .disabled {
    opacity: 0.25;
    pointer-events: none;
}
/*
 * the main loading overlay
 */
.loading-overlay {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    color: var(--color-primary);
    background-color: transparent;
    box-shadow: none;
    outline: none;

    &[open] {
        display: flex;
    }

    & .message {
        margin: unset;
        font-weight: 500;
        color: var(--color-neutral-shade-1);
    }

    & .loading-logo {
        width: 6rem;
        height: 6rem;
        overflow: visible;
    }

    & .steam {
        opacity: 0;
        animation: loading-steam 1.8s ease-in-out infinite;

        &.steam-2 {
            animation-delay: 0.3s;
        }

        &.steam-3 {
            animation-delay: 0.6s;
        }
    }
}

@media (prefers-color-scheme: dark) {
    .loading-overlay {
        color: var(--color-primary-shade-8);

        & .message {
            color: var(--color-neutral-shade-10);
        }
    }
}

@keyframes loading-steam {
    0% {
        opacity: 0;
        translate: 0 60px;
    }

    35%,
    65% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        translate: 0 -80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-overlay {
        & .steam {
            animation: none;
            opacity: 1;
        }
    }
}

/* the language switch - see views/partials/language-switch.hbs */
.language-switch {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--border-radius-m);
    background-color: var(--color-neutral-light);
    font-size: 0.8rem;

    & button {
        padding: 0.35rem 0.75rem;
        border-radius: var(--border-radius-s);
        cursor: pointer;

        &.active {
            font-weight: 600;
            background-color: var(--color-background-tile);
            box-shadow: var(--box-shadow-regular);
        }
    }
}

/*
 * the avatar mode of the searchable select - see `avatar=true` in views/partials/input/select-search.hbs.
 * every option shows the picture of its record (initials while there is none), and the selected one
 * shows it inside the field as well
 */
.select-search.with-avatar {
    & .search {
        & .selected-avatar {
            position: absolute;
            top: 50%;
            left: 0.5rem;
            translate: 0 -50%;
            display: flex;
            pointer-events: none;

            &[hidden] {
                display: none;
            }
        }

        &:has(.selected-avatar:not([hidden])) .query {
            padding-left: 2.5rem;
        }
    }

    & .options .option {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-width: 14rem;
    }

    & .option-avatar {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        overflow: hidden;
        border-radius: 50%;
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--color-primary);
        background-color: var(--color-primary-shade-9);

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}