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

:root {
   --keyboard-bg: var(--bg-light);
   --keyboard-header-bg: rgba(0,0,0,0.1);
   --keyboard-hover-bg: rgba(0,0,0,0.1);
   --keyboard-close-circle-bg: rgba(0,0,0,0.1);
   --keyboard-category-btn-bg: rgba(255,255,255,0.25);
   --keyboard-category-btn-hover-bg: rgba(255,255,255,0.45);
   --keyboard-category-icon-bg: rgba(0,0,0,0.15);
   --navigation-button-bg: rgba(255,255,255,0.5);
   --navigation-button-border: rgba(255,255,255,0.8);
   --navigation-button-color: var(--text);
   --navigation-button-shadow: 0 2px 8px rgba(0,0,0,0.3);
   --journal-button-bg: var(--accent-light);
   --journal-button-border: rgba(255,255,255,0.8);
   --journal-button-color: var(--text);
   --journal-button-hover-shadow: 0 8px 25px rgba(0,0,0,0.3);

   --rainbow-red: #ff595e;
   --rainbow-orange: #ffca3a;
   --rainbow-yellow: #ffea00;
   --rainbow-green: #8ac926;
   --rainbow-blue: #1982c4;
   --rainbow-purple: #6a4c93;
}

@media (prefers-color-scheme: dark) {
   :root {
      --keyboard-header-bg: rgba(255,255,255,0.08);
      --keyboard-hover-bg: rgba(255,255,255,0.08);
      --keyboard-close-circle-bg: rgba(255,255,255,0.16);
      --keyboard-category-btn-bg: rgba(255,255,255,0.08);
      --keyboard-category-btn-hover-bg: rgba(255,255,255,0.16);
      --keyboard-category-icon-bg: rgba(255,255,255,0.16);
      --navigation-button-bg: rgba(255,255,255,0.08);
      --navigation-button-border: rgba(255,255,255,0.25);
      --navigation-button-color: var(--text);
      --navigation-button-shadow: 0 2px 10px rgba(0,0,0,0.45);
      --journal-button-border: rgba(255,255,255,0.2);
      --journal-button-color: var(--text);
      --journal-button-hover-shadow: 0 8px 25px rgba(0,0,0,0.55);
   }
}

html[data-theme="dark"] {
   --keyboard-header-bg: rgba(255,255,255,0.08);
   --keyboard-hover-bg: rgba(255,255,255,0.08);
   --keyboard-close-circle-bg: rgba(255,255,255,0.16);
   --keyboard-category-btn-bg: rgba(255,255,255,0.08);
   --keyboard-category-btn-hover-bg: rgba(255,255,255,0.16);
   --keyboard-category-icon-bg: rgba(255,255,255,0.16);
   --navigation-button-bg: rgba(255,255,255,0.08);
   --navigation-button-border: rgba(255,255,255,0.25);
   --navigation-button-color: var(--text);
   --navigation-button-shadow: 0 2px 10px rgba(0,0,0,0.45);
   --journal-button-border: rgba(255,255,255,0.2);
   --journal-button-color: var(--text);
   --journal-button-hover-shadow: 0 8px 25px rgba(0,0,0,0.55);
}

body { -webkit-tap-highlight-color: transparent; }
body { -webkit-user-select: none; user-select: none; }

html { margin: 0; background-color: var(--bg); color: var(--text); }
body { margin: 0; }

h1 { font-size: clamp(2em, 6vw, 4em); margin-top: 0; margin-bottom: var(--m); }
h2 { font-size: 1.5em; margin-top: 0; margin-bottom: var(--m); }

/* grid with full-width items */
/* main { overflow-x: auto; }
article { display: grid; grid-template-columns: repeat(auto-fit, 100%); } */


/* @view-transition {
  navigation: auto;
} */

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

.rainbow-article {  }
.rainbow-section { margin: 0 auto; padding: var(--m); max-width: var(--full-width); display: grid; grid-template-columns: 1fr auto; column-gap: var(--m);}
.rainbow-section h2 { margin-block: var(--s); }

.nooch-widget { padding: var(--m); border-radius: var(--m); max-height: none; overflow: hidden; }
.section.nooch-widget:last-child { margin-bottom: 0; }

/* Grid layout for sections with spiral layout */
.nooch-widget:has(> .ingredients-week) {
   display: grid;
   grid-template-rows: auto auto 1fr auto;
}
.nooch-widget:has(> .ingredients-week) h2 { grid-row: 1; }
.nooch-widget:has(> .ingredients-week) > p { grid-row: 2; }


.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: inline-block; height: 0.9em; width: auto; filter: brightness(0%) invert(); transform: translateY(10%); }

.navigation-menu-button { position: fixed; top: calc(env(safe-area-inset-top) + var(--m)); right: var(--m); z-index: 1100; border: 1px solid var(--navigation-button-border); border-radius: 50%; box-shadow: var(--navigation-button-shadow); background-color: var(--navigation-button-bg); color: var(--navigation-button-color); }


.streak-widget .streak-list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--xs); padding: 0; margin: 0; list-style: none; }
.streak-widget .streak-day { display: flex; justify-content: center; align-items: center; font-size: 1.8rem; line-height: 1; color: #cfcfcf; }
.streak-widget .streak-day svg { height: auto; }
.streak-widget .streak-day.is-active { color: var(--accent); drop-shadow: 0 0.2em 0.1em var(--accent-light); }
.streak-widget .streak-day.is-empty svg { opacity: 0.5; filter: grayscale(1) saturate(0); }




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

/* main#eat-app { max-width: var(--full-width); } */
main#eat-app { margin: 0 auto; max-width: var(--full-width); min-height: 100vh; display: grid; grid-template-columns: 1fr; padding-top: env(safe-area-inset-top); padding-bottom: calc(env(safe-area-inset-bottom) + var(--l) + 2 * var(--m)); }

.rainbow-article { position: relative; grid-column: 1 / -1; }
.rainbow-article > .rainbow-backdrop { position: fixed; top: 0; left: 50%; width: 100%; height: auto; transform: translateX(-50%); pointer-events: none; z-index: -1; }

@media screen and (min-width: 800px) {
   main#eat-app { grid-template-columns: 1fr 2fr; }

   main#eat-app > article:nth-of-type(2) { align-self: start; }
   main#eat-app > article:nth-of-type(2) > .nooch-widget { min-height: 90vh; height: auto; padding-bottom: calc(1rem + var(--l)); }
   main#eat-app > article:nth-of-type(3) {
      column-count: 2;
      column-gap: var(--m);
   }

   main#eat-app > article:nth-of-type(3) > .nooch-widget {
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      width: 100%;
      display: inline-block;
   }
}

@media screen and (display-mode: standalone), screen and (display-mode: fullscreen) {
}

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

eat-score {
   display: block;
   margin: 0.3em;
   font-size: 3.4em;
   width: 2em;
   height: 2em;
   padding: 0.4em;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 2em;
   background-color: var(--accent);
   background-image:
      linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)),
      url('../images/background/eat-score-rainbow.svg');
   background-size: cover;
   background-position: center;
   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: 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; }

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); }

rainbow-ingredient .usda-name { display: 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; }



/* add dialog (with time selection) */

.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(--accent2); border-radius: 0.3rem; }
.rainbow-add button.add,
.rainbow-add button.update { font-size: 1.3em; padding: 0.5em 1em; border: none; background-color: var(--accent); color: white; font-weight: bold; text-shadow: 0 0 3px rgba(0,0,0,0.3); border-radius: 100vmin; }

.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; }

.custom-time-inputs { display: flex; margin-top: 1rem; align-items: center; justify-content: center; gap: 0.75rem; }
.custom-hour-bundle { position: relative; display: inline-flex; align-items: stretch; width: 6em; }
.custom-hour-rects { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.2em; pointer-events: none; }
.custom-hour-rect { display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 0.7em; background: color-mix(in srgb, var(--bg-light) 88%, white 12%); color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 2em; }
.custom-hour-bundle > input { position: relative; z-index: 1; width: 6em; opacity: 0; padding: 0.5em; font-size: 1em; border: none; background: transparent; color: transparent; caret-color: transparent; }
.custom-hour-bundle > input:focus { outline: none; }
.custom-hour-stepper { display: flex; flex-direction: column; margin-left: 0.25rem; }
.custom-hour-stepper-button { width: 1.8rem; height: 1.35rem; padding: 0; border: none; border-radius: 0.45rem; background: var(--bg-light); color: var(--text); cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; }
.custom-hour-stepper-button:hover { filter: brightness(0.95); }
.custom-hour-stepper-button:active { transform: translateY(1px); }
.custom-hour-stepper-up { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.custom-hour-stepper-down { border-top-left-radius: 0; border-top-right-radius: 0; }
.custom-ampm-radios { display: flex; flex-direction: column; gap: 0.25rem; }
.custom-ampm-option { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 3.4rem; padding: 0.35rem 0.6rem; border-radius: 999px; background: var(--bg-light); color: var(--text); font-size: 0.9em; cursor: pointer; transition: filter 0.2s ease, transform 0.2s ease, background-color 0.2s ease; }
.custom-ampm-option:hover { filter: brightness(0.96); }
.custom-ampm-option:active { transform: translateY(1px); }
.custom-ampm-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.custom-ampm-option span { position: relative; z-index: 1; }
.custom-ampm-option:has(input[type="radio"]:checked) { background: var(--accent); color: white; }


/* Settings Dialog */
@keyframes settings-dialog-open  { from { opacity: 0; transform: translateY(calc(100% + var(--m))); } to { opacity: 1; transform: translateY(0); } }
@keyframes settings-dialog-close { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(calc(100% + var(--m))); } }

.settings-dialog::backdrop { background-color: rgba(0,0,0,0.4); animation: open 0.5s ease-in-out forwards; }
.settings-dialog { position: fixed; inset: auto var(--m) calc(env(safe-area-inset-bottom) + var(--m)) var(--m); width: auto; max-width: calc(100vw - 2 * var(--m)); margin: 0; padding: 1.5rem; border: none; border-radius: 1.5rem; box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 1rem; }
.settings-dialog { transition: display 0.3s allow-discrete, overlay 0.3s allow-discrete; animation: settings-dialog-close 0.3s ease-in forwards; }
.settings-dialog[open] { animation: settings-dialog-open 0.3s ease-out forwards; }

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

@media screen and (max-width: 540px) {
   .settings-dialog { inset: auto var(--xs) calc(env(safe-area-inset-bottom) + var(--xs)) var(--xs); max-width: calc(100vw - 2 * var(--xs)); }
}


/* Feedback Notification */
.feedback-notification-dialog { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; margin: 0; padding: 0; border: none; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(2px); z-index: 3000; }
.feedback-notification-dialog::backdrop { background: rgba(255, 255, 255, 0.45); }
@media (prefers-color-scheme: dark) { .feedback-notification-dialog, .feedback-notification-dialog::backdrop { background: rgba(0, 0, 0, 0.45); } }
html[data-theme="dark"] .feedback-notification-dialog, html[data-theme="dark"] .feedback-notification-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.feedback-notification-content { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.feedback-notification-content svg { filter: blur(44px) drop-shadow(0 0 10px rgba(109, 216, 255, 0.8)); width: 100%; height: 100%; display: block; object-fit: cover; }
.feedback-notification-content path { fill: none; stroke: #6dd8ff; stroke-width: 50; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; stroke-dashoffset: 160; }
.feedback-notification-dialog[open].is-animating .feedback-notification-content path { animation: feedback-arc-draw 2s ease-in-out forwards; }
.feedback-notification-controls { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--l)); transform: translateX(-50%); z-index: 1; }
.feedback-notification-ok { min-width: 7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-light); color: var(--text); padding: 0.7rem 1.3rem; font-size: 1rem; font-weight: 700; cursor: pointer; }
.feedback-notification-ok:hover { filter: brightness(0.95); }
@keyframes feedback-arc-draw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }


/* Ingredient Journal */

button.show-keyboard { border: 1px solid rgba(255, 255, 255, 0.8); background-color: transparent; color: var(--text-color); font-weight: bold; font-size: 3rem; padding: 0.5rem; transform: translateY(-4%); cursor: pointer; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
button.show-keyboard:hover { filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.4)); }
button.show-keyboard > svg { width: var(--l); height: var(--l); }

.microphone-button { display: none !important; }

.rainbow-keyboard { position: fixed; top: unset; left: 50%; bottom: 0; bottom: env(safe-area-inset-bottom); transform: translateX(-50%); 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: var(--dialog-width); height: var(--height-keyboard); background-color: var(--keyboard-bg); border: none; pointer-events: none; }
.rainbow-keyboard { overflow-y: hidden; }
.rainbow-keyboard { transition: display 0.1s allow-discrete, overlay 0.1s allow-discrete; animation: close 0.1s forwards; }
.rainbow-keyboard[open] { animation: open 0.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%; min-height: 0; }
.rainbow-keyboard-sheet { display: grid; grid-auto-rows: auto 1fr; }

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

.close-keyboard { position: absolute; top: var(--s); right: var(--s); background-color: transparent; border: none; cursor: pointer; overflow: hidden; }
.close-keyboard svg { width: 2em; height: 2em; }
.close-keyboard path { fill: none; stroke: var(--text); stroke-linecap: round; stroke-width: 3px; }
.close-keyboard svg circle { opacity: 0; fill: var(--keyboard-close-circle-bg); 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: var(--keyboard-hover-bg); }

/* 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; }
.rainbow-keyboard-content.filter-usda rainbow-ingredient:not([usda-name]) { display: none; }
.rainbow-keyboard-content.filter-usda rainbow-ingredient[usda-name] { display: flex; }

.rainbow-keyboard-content.filter-usda rainbow-ingredient[usda][inline] .usda-name { display: block; font-size: 0.7em; border: 1px solid black; }
.rainbow-keyboard-content.filter-usda rainbow-ingredient[usda][usda-name] { background-color: fuchsia; }



#categories-toc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5em; margin-bottom: 2rem; z-index: 111; }
#categories-toc > a.category-button { display: flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 2.4em; padding: 0.35em 0.5em; color: var(--accent); text-decoration: none; border: 1px solid var(--accent); border-radius: 999px; background-color: var(--keyboard-category-btn-bg); font-size: 0.85em; line-height: 1.1; }
#categories-toc > a.category-button:hover { background-color: var(--keyboard-category-btn-hover-bg); }
#categories-toc > a.category-button .category-icon { width: 1em; height: 1em; border-radius: 50%; background-color: var(--keyboard-category-icon-bg); flex: 0 0 1em; }
#categories-toc > a.category-button .category-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#categories-top { float: right; position: sticky; top: 0; padding: 0.5em; z-index: 111; color: var(--accent); 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; }
}

/* BOARD */
.ingredients-datetime-list { padding: 0; margin: 0; list-style-type: none; font-size: 1em; scroll-margin-bottom: calc(var(--vvp-offset, 0px) + var(--l) + var(--l)); }
.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 > span:last-of-type {  }
.ingredients-datetime-list li .foods { display: block; }
.ingredients-datetime-list li .foods > .food { display: grid; grid-template-columns: 1fr auto auto; column-gap: 0.5em; align-items: center; }
.ingredients-datetime-list li .foods rainbow-ingredient { display: flex; }
.ingredients-datetime-list li .foods > .food .time-button,
.ingredients-datetime-list li .foods > .food .delete-button { margin-block: calc(var(--xs) / 2); aspect-ratio: 1; border: none; border-radius: 0.3em; background: transparent; cursor: pointer; padding: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.ingredients-datetime-list li .foods > .food .time-button svg,
.ingredients-datetime-list li .foods > .food .delete-button svg { width: var(--m); height: var(--m); display: block; }
@media (hover: hover) {
   .ingredients-datetime-list li .foods > .food:hover .time-button,
   .ingredients-datetime-list li .foods > .food:hover .delete-button { opacity: 1; pointer-events: auto; }
}
.ingredients-datetime-list li .foods > .food.tapped .time-button,
.ingredients-datetime-list li .foods > .food.tapped .delete-button { opacity: 1; pointer-events: auto; }


/* TRACK */

/* TRACK BAR (at the bottom right) */
.tracking-bar { --height-footer: var(--l); }
.tracking-bar { --tracking-safe-bottom: calc(env(safe-area-inset-bottom) * 0); position: fixed; right: calc(var(--m) + env(safe-area-inset-right)); bottom: calc(var(--m) + var(--tracking-safe-bottom)); transform: translateY(calc(-1 * var(--vvp-offset, 0px))); box-sizing: border-box; display: flex; align-items: center; gap: var(--s); max-width: var(--bar-width); z-index: 1200; transition: transform 0.0s ease-in-out; transition: none; }
html.keyboardfocus .tracking-bar { --tracking-safe-bottom: 0px; transform: translateY(calc(-1 * var(--vvp-offset, 0px))); }
.journal-button { flex: 0 0 auto; width: var(--height-footer); height: var(--height-footer); font-size: var(--height-footer); padding: var(--xs); background-color: var(--journal-button-bg); border: 0.5px solid var(--journal-button-border); color: var(--journal-button-color); border-radius: 50%; backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out; cursor: pointer; }
.journal-button:hover { transform: translate(0px, calc(0px - var(--xs) / 2)); box-shadow: var(--journal-button-hover-shadow); }
.track-search-container { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s); position: relative; padding: var(--xs) var(--s); height: var(--height-footer); background-color: var(--bg-light); border-radius: var(--height-footer); border: 1px solid var(--border); }
.track-search-container::before { content: ''; position: fixed; bottom: calc(0px - var(--height-footer) - var(--m) - env(safe-area-inset-bottom)); right: calc(0px - var(--m)); width: 100vmax; height: min(50vh, var(--height-footer) * 5); background: linear-gradient(to top, rgba(0,0,0,0.2), transparent); pointer-events: none; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; }
.track-search-container:focus-within::before { opacity: 1; }

.track-form { flex: 1; min-width: 0; display: grid; align-items: center; justify-content: stretch; position: relative; }
.track-form > * { grid-area: 1 / 1; padding: var(--m); }
/* .track-form > label { pointer-events: none; white-space: nowrap; text-overflow: ellipsis; overflow-x: visible; z-index: 2; } */
.track-form > input { width: 100%; min-width: 0; font-family: inherit; font-size: 1.2em; border: none; background-color: transparent; color: var(--text); padding-left: 1.5em; z-index: 1; }
.track-form > input::placeholder { color: var(--text-light); }
.track-form > input:focus { outline: none; }
.track-form .search-icon { position: absolute; left: calc(0px - var(--xs)); top: 50%; transform: translateY(-50%); color: var(--text-light); width: 1.5em; height: 1.5em; }
.track-form input + label > .search-text { position: absolute; left: calc(var(--s) + 2px); padding: 0 var(--s); transition: top 0.3s ease-in-out, transform 0.5s ease-in-out; color: var(--text-color); top: 50%; transform: translate(0%, -50%); opacity: 0; }
.track-form input:invalid + label > .search-text { opacity: 1; }
.track-form input:focus + label > .search-text { opacity: 0; }
.track-form > label[data-visible='true'] > .search-text { opacity: 1; transition: opacity 0.3s ease-out; }
.track-form > label[data-visible='false'] > .search-text { opacity: 0; pointer-events: none; }


.microphone-button { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 100%; border: none; background-color: var(--bg); display: flex; align-items: center; justify-content: center; padding: 0; color: var(--text); cursor: pointer; transition: color 0.2s ease; }
.microphone-button:hover { color: var(--accent); }
.microphone-button svg { width: 1.2rem; height: 1.2rem; }


/* Suggestions when typing */
/* eat-suggestions:empty { display: none; } */
eat-suggestions { position: absolute; top: 0; right: 0; transform: translate(0%, calc(-100% - var(--xs))); }
eat-suggestions { width: max-content; max-width: calc(100svw - 2 * var(--m)); max-height: calc(100svh - var(--offset, 0px) - var(--height-footer) - 2 * var(--m)); }
eat-suggestions { background-color: var(--accent2); padding: var(--xs); border-radius: var(--s); }
eat-suggestions > div { display: flex; justify-content: flex-end; flex-wrap: wrap; column-gap: 0.3rem; }
eat-suggestions rainbow-ingredient { flex: 0 0 auto; padding: 0.1em 1em 0.1em 0.5em; border-radius: 1em; background-color: rgba(0,0,0,0.0); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0px 0px 3px 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.1); }

eat-suggestions { max-width: unset; width: 100vw; right: calc(0px - var(--xs)); }


@media screen and (max-width: 540px) {
   .tracking-bar { left: calc(env(safe-area-inset-left) + var(--xs)); bottom: calc(var(--s) + var(--tracking-safe-bottom)); right: auto; width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - (2 * var(--xs))); gap: var(--xs); }
   html.keyboardfocus .tracking-bar { transform: translateY(calc(-1 * var(--vvp-offset, 0px))); }
   eat-suggestions { max-width: unset; width: 100vw; right: calc(0px - var(--xs)); padding: 0 var(--xs); }
   eat-suggestions { overflow-x: auto; overflow-y: hidden; }
   eat-suggestions > div { display: flex; justify-content: flex-end; flex-wrap: nowrap; column-gap: 0.3rem; width: max-content; }
   .track-form > * { padding: var(--s); }
   .track-form > input { font-size: 1rem; }
   .microphone-button { width: 2.6rem; height: 2.6rem; }
}



            
.rainbow { display: grid; position: relative; left: calc(0px - var(--m)); width: calc(100% + 2 * var(--m)); }
.rainbow svg { grid-area:  1 / 1; overflow: visible; }
.rainbow svg { filter: blur(7px); }
.rainbow svg path { stroke-width: 75px; fill: none; stroke-linejoin: round; stroke: currentColor; }
.rainbow .rainbow-ingredients-svg { filter: drop-shadow(1px 1px 0.1em var(--bg-light)); }

/* FEEDBACK */