/*
baseline support requirements:
- @property
- conic-gradient
*/

:root {
   --height-header: 3rem;
   --height-footer: 3.5rem;
   --height-keyboard: min(80vh, 700px);
}

/* ------------------------------ */
/* ----------- LAYOUT ----------- */
/* ------------------------------ */

/* html { overflow: hidden; overscroll-behavior: none; } */

body { margin: 0; min-height: 100svh; }
body { background-color: var(--background); }
body.inert { overflow: hidden; }

main { width: min(800px, 100vw); }
main { margin-inline: auto; margin-top: calc(var(--height-header) + env(safe-area-inset-top)); margin-bottom: 0; }
main { padding: var(--m); padding-bottom: calc(env(safe-area-inset-bottom) + var(--height-footer) + var(--l)); }
main { overflow-y: auto; overscroll-behavior: auto; }
main { background-color: white; }

header { position: fixed; top: 0; width: 100%; height: var(--height-header); z-index: 9999; }
header { display: flex; justify-content: space-between; align-items: center; padding-inline: 0.5rem; }
header { background-color: var(--background); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: var(--text-color); }

footer { position: fixed; bottom: var(--s); width: 100%; height: var(--height-footer); z-index: 9999; }
footer { display: flex; justify-content: center; align-items: center; }
footer { color: white; }
footer { transition-delay: 0.6s; transition: 0.1s ease height, 0.1s ease padding-bottom; }

/* PWA mode */
@media screen and (display-mode: fullscreen) {
   main { margin-top: calc(var(--height-header) + env(safe-area-inset-top)); margin-bottom: 0; }
   main { padding-bottom: calc(var(--l) + var(--height-footer) + env(safe-area-inset-bottom)); }
   header { position: fixed; top: 0; height: calc(var(--height-header) + env(safe-area-inset-top)); padding-top: calc(0rem + env(safe-area-inset-top)); }
   footer { position: fixed; bottom: var(--s); height: calc(var(--height-footer) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }

   /* body.keyboardfocus main { height: calc(100vh - var(--height-header) - env(safe-area-inset-top)); } */
   body.keyboardfocus footer { position: fixed; bottom: var(--s); height: var(--height-footer); padding-bottom: 0; }
}

h1 { margin-top: 0; }
/* article { background-color: rgba(0,0,0,0.1); } */







/* ------------------------------- */
/* ------ STYLE AND CONTENT ------ */
/* ------------------------------- */

.login-button { position: relative; margin: var(--l) 0; }
.login-button { background-color: var(--glass-background); border: none; cursor: pointer; }
.login-button { display: inline-block; text-decoration: none; padding: var(--s) var(--m); border-radius: 100vh; font-size: 1.5rem; }
.login-button::after { content: ''; position: absolute; top: -0.25rem; left: -0.25rem; display: block; width: calc(100% + 0.5rem); height: calc(100% + 0.5rem); border: 0.2rem solid transparent; background: radial-gradient(white, white 70%, transparent) content-box, conic-gradient(from var(--angle, 90deg), yellow, orange, red, purple, blue, green, yellow) border-box; filter: blur(0.5rem); border-radius: 100vh; z-index: 1; opacity: 0.3; transition: opacity 0.3s ease-in-out; animation: slowly-rotate 10s linear infinite; animation-play-state: paused; }
.login-button:hover::after { opacity: 0.7; animation-play-state: running; }


.rainbow-section { margin-block: 1rem; padding: 1rem; background-color: var(--glass-background); box-shadow: 0 0 5px rgba(0,0,0,0.15); }

.rainbow-background-pattern { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 130vh; width: auto; z-index: -1; opacity: 0.4; }

.settings-button { font-size: 2rem; text-decoration: none; color: white; }
.settings-button img { display: block; height: 0.9em; width: auto; }

/* .rainbow-footer-style svg { position: absolute; bottom: 0; left: 0; opacity: 0.1; transform: translate(-10%, 15%); width: 120%; height: 250%; pointer-events: none; } */
.rainbow-footer-content { position: relative; display: flex; align-items: center; justify-content: center; column-gap: 1.5rem; }
.rainbow-footer-content { background-color: rgba(255,255,255,0.2); --webkit-backdrop-filter: blur(5px); --moz-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border: 2px solid white; border-radius: calc(var(--height-footer) / 2); box-shadow: 0 0 4px #b8616f44; }
.rainbow-footer-content { width: calc(100% - 2 * var(--s)); width: max-content; height: 100%; padding-inline: 0.5rem; }
.rainbow-footer-content { transition: width 0.3s ease; }
.rainbow-footer-content input { height: 2.6rem; border-radius: 1.3rem; border: none; background-color: rgba(255,255,255,0.5); }
.rainbow-footer-content label { color: var(--text-color); }
.rainbow-footer-content > * { z-index: 2; }


.rainbow-footer-content::after { content: ''; position: absolute; top: -0.25rem; left: -0.25rem; display: block; width: calc(100% + 0.5rem); height: calc(100% + 0.5rem); border: 0.2rem solid transparent; background: radial-gradient(white, white 70%, transparent) content-box, conic-gradient(from var(--angle, 90deg), yellow, orange, red, purple, blue, green, yellow) border-box; filter: blur(0.5rem); border-radius: 1.2em; z-index: 1; opacity: 0; transition: opacity 0.3s ease-in-out; animation: slowly-rotate 10s linear infinite; animation-play-state: paused; }
.rainbow-footer-content:focus-within::after { opacity: 0.3; animation-play-state: running; }




.eat-form { display: grid; align-items: center; justify-content: stretch; width: 24.5ch; }
.eat-form > * { grid-area: 1 / 1; padding: var(--m); }
.eat-form > label { pointer-events: none; }
.eat-form > input { width: 100%; font-family: inherit; font-size: 1.2em; }

eat-suggestions:empty { display: none; }
eat-suggestions { position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); }
eat-suggestions { width: max-content; max-width: calc(100vw - 2 * var(--s)); }
eat-suggestions { background-color: var(--accent-color2); padding: 0.5rem; }
eat-suggestions { display: flex; justify-content: flex-start; flex-wrap: wrap; column-gap: 0.3rem; row-gap: 0.3rem; }
eat-suggestions rainbow-ingredient { padding: 0.1em 1em 0.1em 0.5em; border-radius: 1em; background-color: rgba(0,0,0,0.1); transition: background 0.3s ease-in-out; cursor: pointer; }
eat-suggestions rainbow-ingredient:hover { background-color: rgba(0,0,0,0.3); }

/* .rainbow-header { position: fixed; top: 0; width: 100%; }
.rainbow-header-style svg {  }
.rainbow-header-content {  } */



/* ------------------------------ */
/* ------- MAIN DASHBOARD ------- */
/* ------------------------------ */


rainbow-score .rainbow-ingredient-pic { width: 1em; height: auto; }

eat-score { display: block; margin: 0.3em; font-size: 2em; width: 1.5em; height: 1.5em; display: flex; justify-content: center; align-items: center; border-radius: 1.5em; background-color: var(--accent-color); color: white; font-weight: bold; text-shadow: 0px 0px var(--s) rgba(0,0,0,0.2); }

eat-option { display: inline-block; margin-right: var(--s); margin-top: var(--s); padding: var(--s); border-radius: var(--s); background-color: var(--accent-color); color: white; cursor: pointer; }

.ingredients-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(3em, 1fr)); gap: 0.5em; padding: 0; margin: 0; list-style-type: none; }

.ingredients-datetime-list { padding: 0; margin: 0; list-style-type: none; font-size: 1em; }
.ingredients-datetime-list li { display: grid; grid-template-columns: 5ch 1fr; }
.ingredients-datetime-list li > span:first-of-type { display: block; padding-top: 0.8em; font-weight: bold; }
.ingredients-datetime-list li .foods { display: block; }
.ingredients-datetime-list li .foods rainbow-ingredient { display: flex; }

rainbow-ingredient { position: relative; }
rainbow-ingredient { display: flex; flex-direction: column; align-items: center; }
rainbow-ingredient img { width: 3em; height: 3em; }
rainbow-ingredient svg { width: 3em; height: 3em; }
rainbow-ingredient span { text-align: center; font-size: 0.5em; }
rainbow-ingredient button.rainbow-ingredient-delete { position: absolute; top: 0; right: 0; opacity: 0; transition: 0.4s ease-in-out; }
@media (hover: hover) {
   rainbow-ingredient:hover .rainbow-ingredient-delete { opacity: 1; }
}

rainbow-ingredient[small] span { display: none; }
rainbow-ingredient[small] button.rainbow-ingredient-delete { display: none; }

rainbow-ingredient[inline] { display: inline-flex; flex-direction: row; flex-wrap: wrap; }
rainbow-ingredient[inline] span { text-align: left; font-size: 0.8em; }
rainbow-ingredient[inline] button.rainbow-ingredient-delete { display: none; }

rainbow-ingredient[inline] .fodmap-info { display: none; }
rainbow-ingredient[inline][show-fodmap] .fodmap-info { display: block; margin-left: 0.5em; }
rainbow-ingredient[inline][show-fodmap] .fodmap-info { --green: lightgreen; --yellow: gold; --red: lightpink; }
rainbow-ingredient[inline][show-fodmap] .fodmap-info .label { padding: 0.15em 0.3em; margin: 0 0.15em; border-radius: 0.15em; background: var(--bg); }



[data-visible='true'] { opacity: 1; transition: opacity 0.3s ease-out; }
[data-visible='false'] { opacity: 0; pointer-events: none; }


.nutrients-list li small { display: block; text-align: center; }



/* Rainbow Ingredients Keyboard */
.inline-add-ingredient-button { --padding: 0.3rem; width: 3.6rem; height: 3.6rem; padding: var(--padding); }
.inline-add-ingredient-button { display: grid; grid-template-areas: "center"; align-items: center; background-color: var(--glass-background); border: none; cursor: pointer; }
.inline-add-ingredient-button > * { grid-area: center; z-index: 3; background-color: rgba(255,255,255,0.3); padding: var(--padding); margin: var(--margin); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 1.2em; z-index: 2; filter: drop-shadow(1px 1px white); transition: background 0.3s ease-in-out, filter 0.3s ease-in-out; }
.inline-add-ingredient-button::before { content: ''; grid-area: center; display: block; width: 100%; height: 100%; border-radius: 1.2em; }
.inline-add-ingredient-button::before { transition: opacity 0.3s ease-in-out; }
.inline-add-ingredient-button::after { content: ''; grid-area: center; display: block; width: 100%; height: 100%; background: conic-gradient(from var(--angle, 90deg), yellow, orange, red, purple, blue, green, yellow); filter: blur(0.5rem); border-radius: 1.2em; z-index: 1; opacity: 0.2; transition: opacity 0.3s ease;animation: slowly-rotate 10s linear infinite; animation-play-state: paused; }

/* .inline-add-ingredient-button:hover { --padding: 0.3rem; width: 5rem; height: 5rem; } */
.inline-add-ingredient-button:hover > * { background-color: rgba(255,255,255,0.05); filter: drop-shadow(1px 1px white); }
.inline-add-ingredient-button:hover::before { opacity: 0.1; }
.inline-add-ingredient-button:hover::after { opacity: 0.5; animation-play-state: running; }
.inline-add-ingredient-button img { display: block; width: 100%; height: 100%; }


#nutrient-select { display: block; margin: 0 auto; padding: 0.5rem; }

.nutrient-foods { padding-left: 0.5rem; list-style: none; }
.nutrient-foods li { display: grid; align-items: center; grid-template-columns: 15ch 1fr; column-gap: 0.5rem; }



/* Rainbow add dialog */

.rainbow-add::backdrop { background-color: rgba(0,0,0,0.4); animation: open 0.5s ease-in-out forwards; }
.rainbow-add { padding: 1.5rem; border: none; border-radius: 1.5rem; box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.1); }
.rainbow-add rainbow-ingredient { font-size: 1.5em; }
.rainbow-add > .controls { display: flex; justify-content: space-between; margin-top: 1.5rem; }

.rainbow-add button { cursor: pointer; }
.rainbow-add button.cancel { font-size: 1.3em; padding: 0.5em; border: none; background-color: var(--accent-color2); border-radius: 0.3rem; }
.rainbow-add button.add { font-size: 1.3em; padding: 0.5em; border: none; background-color: var(--accent-color); color: white; font-weight: bold; text-shadow: 0 0 3px rgba(0,0,0,0.3); border-radius: 0.3rem; }

.rainbow-add button.close { position: absolute; top: var(--s); right: var(--s); background-color: transparent; border: none; }
.rainbow-add button.close svg { width: 2em; height: 2em; }
.rainbow-add button.close path { fill: none; stroke: black; stroke-linecap: round; stroke-width: 3px; }
.rainbow-add button.close svg circle { opacity: 0; fill: rgba(0,0,0,0.1); transition: opacity 0.3s ease; }
.rainbow-add button.close:hover svg circle { opacity: 1; }


/* Ingredient Journal */

.show-keyboard { border: none; background-color: transparent; color: var(--text-color); font-weight: bold; font-size: 3rem; padding: 0.5rem; transform: translateY(-4%); cursor: pointer; filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)); transition: filter 0.3s ease-in-out; }
.show-keyboard:hover { filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.4)); }

.rainbow-keyboard { position: fixed; top: unset; left: 0; bottom: 0; bottom: env(safe-area-inset-bottom); z-index: 1000; }
.rainbow-keyboard::backdrop { background-color: rgba(0,0,0,0.4); animation: open 0.5s ease-in-out forwards; }
.rainbow-keyboard { padding: 0; border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.1); }
.rainbow-keyboard { width: 100%; max-width: 100%; height: var(--height-keyboard); background-color: white; border: none; pointer-events: none; }
.rainbow-keyboard { overflow-y: hidden; }
.rainbow-keyboard { transition: display 1s allow-discrete, overlay 1s allow-discrete; animation: close 1s forwards; }
.rainbow-keyboard[open] { animation: open 1s forwards; pointer-events: all; }

@keyframes open { from { opacity: 0; } to { opacity: 1; } }
@keyframes close { from { opacity: 1; } to { opacity: 0; } }

@media screen and (display-mode: fullscreen) {
   .rainbow-keyboard { bottom: 0; height: calc(var(--height-keyboard) + env(safe-area-inset-bottom)); }
}

.rainbow-keyboard-sheet { height: 100%; }
.rainbow-keyboard-sheet { display: grid; grid-auto-rows: auto 1fr; }

.rainbow-keyboard-header { position: relative; background-color: rgba(0,0,0,0.1); }
.rainbow-keyboard-header { padding: 1em; padding-top: 1.5rem; }
.rainbow-keyboard-content { padding: 1em; overflow-y: auto; font-size: 1.5em; }

.close-keyboard { position: absolute; top: var(--s); right: var(--s); background-color: transparent; border: none; cursor: pointer; }
.close-keyboard svg { width: 2em; height: 2em; }
.close-keyboard path { fill: none; stroke: black; stroke-linecap: round; stroke-width: 3px; }
.close-keyboard svg circle { opacity: 0; fill: rgba(0,0,0,0.1); transition: opacity 0.3s ease; }
.close-keyboard:hover svg circle { opacity: 1; }

.rainbow-keyboard-header { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.rainbow-keyboard-header > div { display: flex; flex-wrap: wrap; align-content: flex-start; }
.rainbow-keyboard-header strong { flex: 1 0 100%; margin-bottom: 0.3rem; }




.rainbow-keyboard-category {  }
.rainbow-keyboard-category-heading { opacity: 0.5; }
.rainbow-keyboard-items { columns: 1; margin-bottom: 3rem; }
.rainbow-keyboard-items rainbow-ingredient { display: flex; transition: background 0.3s ease-in-out; cursor: pointer; }
.rainbow-keyboard-items rainbow-ingredient:hover { background-color: rgba(0,0,0,0.1); }

/* filters */
.rainbow-keyboard-content.filter-low-fodmap rainbow-ingredient[is-low-fodmap=false] { display: none; }
.rainbow-keyboard-content.filter-low-fodmap rainbow-ingredient[is-low-fodmap=true] { display: flex; }

#categories-toc { display: flex; justify-content: flex-start; flex-wrap: wrap; column-gap: 0.5em; row-gap: 0.5em; margin-bottom: 2rem; z-index: 111; }
#categories-toc > a { color: var(--accent-color); text-decoration: none; }
#categories-toc > a:hover { text-decoration: underline; }
#categories-top { float: right; position: sticky; top: 0; padding: 0.5em; z-index: 111; color: var(--accent-color); transform: translate(1em, -1em); }

.rainbow-keyboard-item { position: relative; width: 1.5rem; height: 1.5rem; transform: scale(1.5); transition: 0.3s transform ease; }
.rainbow-keyboard-item:hover { transform: scale(3); z-index: 1; height: 2.5rem; }
.rainbow-keyboard-item:hover { background-color: rgba(255,255,255,0.2); --webkit-backdrop-filter: blur(5px); --moz-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.rainbow-keyboard-item-pic { width: 100%; height: auto; }
.rainbow-keyboard-item span { position: absolute; font-size: 0.5rem; bottom: 0; left: 0; text-align: center; }
.rainbow-keyboard-item span { display: none; }
.rainbow-keyboard-item .fodmap { position: absolute; top: 10%; right: 10%; width: 0.2rem; height: 0.2rem; border-radius: 0.2rem; background-color: var(--fodmap-color, black); }
.rainbow-keyboard-item:hover span { display: block; }

@media screen and (min-width: 450px) {
   .rainbow-keyboard-items { columns: 2; }
}
@media screen and (min-width: 700px) {
   .rainbow-keyboard-items { columns: 3; }
}



@property --angle {
   initial-value: 0deg;
   inherits: false;
   syntax: '<angle>';
}
@keyframes slowly-rotate { from { --angle: 0deg; } to { --angle: 360deg; } }

input[type="radio"] { display: none; }
input[type="radio"] + label { cursor: pointer; font-size: 1.2em; border: 2px solid #ddd; border-radius: 0.3rem; padding: 0.3rem; margin-right: 0.3rem; margin-bottom: 0.3rem; color: #999; }
input[type="radio"]:checked + label { color: black; border: 2px solid var(--accent-color);  }

input[type="checkbox"] { display: none; }
input[type="checkbox"] + label { cursor: pointer; padding: 0.3rem 0; border: 2px solid transparent; }
input[type="checkbox"] + label::before { content: "✓"; display: inline-flex; justify-content: center; align-items: center; width: 1.2em; height: 1.2em; margin-right: 0.3em; box-shadow: 0 0 2px rgba(0,0,0,0.1); border-radius: 50%; border: solid 0px white; color: #ccc; background-color: #ccc; }
input[type="checkbox"]:checked + label::before { color: black; }