/* ------------------------------ */
/* ----------- 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);
   --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);
      --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);
   --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-header { margin: 0 auto; padding: var(--m); max-width: var(--full-width); }
.rainbow-header h2 { margin-block: var(--s); }
.rainbow-header .account-status { margin: 0.4em 0 0; font-size: 0.9em; opacity: 0.8; max-width: 50ch; text-align: right; margin-left: auto; }
.rainbow-header .account-status a { color: inherit; text-decoration: underline; }

.rainbow-header a:not(.navigation-menu-button) { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; margin: 0.15em 0; padding: 0.35em 1em; border-radius: 9999px; background-color: var(--accent-light); color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.9em; line-height: 1.2; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.rainbow-header a:not(.navigation-menu-button):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.storage-location-field { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4em; }
.storage-location-field legend { font-size: 0.85em; opacity: 0.7; padding: 0; margin-bottom: 0.2em; }
.storage-location-field label { display: flex; align-items: center; gap: 0.5em; cursor: pointer; font-size: 0.95em; }

.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); }
.login-nav-button { width: auto; gap: 0.4em; padding: 0 0.9em 0 0.7em; border-radius: 9999px; text-decoration: none; font-size: 1rem; font-weight: 600; }
.login-nav-button svg { width: 1.3em; height: 1.3em; flex-shrink: 0; }


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


.daily-dozen-list { display: flex; flex-direction: column; gap: 0.5em; padding: 0; margin: 0; list-style: none; }
.daily-dozen-item { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.35em 0; border-bottom: 1px solid var(--border); }
.daily-dozen-item:last-child { border-bottom: none; }
.daily-dozen-label { font-size: 0.95em; }
.daily-dozen-pips { display: flex; gap: 0.3em; flex-shrink: 0; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.daily-dozen-pip { width: 0.85em; height: 0.85em; border-radius: 50%; background-color: var(--bg-light); border: 1px solid var(--border); }
.daily-dozen-pip.is-filled { width: 1.4em; height: 1.4em; background: none; border: none; }
.daily-dozen-pip.is-filled img, .daily-dozen-pip.is-filled svg { width: 100%; height: 100%; }
.daily-dozen-manual label { display: flex; align-items: center; gap: 0.5em; cursor: pointer; font-size: 0.95em; }




/* ------------------------------ */
/* ------- 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; }
}

/* base food badge: bottom-right of the image specifically, not the whole component
   (which also includes the label below) - percentage sizing so it's not coupled to
   the font-size cascade used for the label/fodmap text nearby. */
rainbow-ingredient .rainbow-ingredient-image-wrap { position: relative; display: inline-block; line-height: 0; }
.base-food-badge { position: absolute; bottom: -6%; right: -6%; width: 38%; height: 38%; border-radius: 50%; background: var(--bg-light); border: 2px solid var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 0.9em; font-weight: 700; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.base-food-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

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: nowrap; }
rainbow-ingredient[inline] .rainbow-ingredient-image-wrap { flex-shrink: 0; }
rainbow-ingredient[inline] span { text-align: left; font-size: 0.8em; }
rainbow-ingredient[inline] .rainbow-ingredient-label { flex: 1 1 auto; min-width: 0; white-space: normal; }
rainbow-ingredient[inline] button.rainbow-ingredient-delete { display: none; }

rainbow-ingredient[inline] .fodmap-info { display: none; }
.rainbow-keyboard-content.show-fodmap rainbow-ingredient[inline] .fodmap-info { display: block; margin-left: 0.5em; }
.rainbow-keyboard-content.show-fodmap rainbow-ingredient[inline] .fodmap-info { --green: lightgreen; --yellow: gold; --red: lightpink; }
.rainbow-keyboard-content.show-fodmap rainbow-ingredient[inline] .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)); }
}


/* Widgets */
.widgets-group { position: relative; }
.add-widget-button { margin: var(--m) auto 0; }

/* Widgets Dialog */
.widgets-dialog::backdrop { background-color: rgba(0,0,0,0.4); animation: open 0.5s ease-in-out forwards; }
.widgets-dialog { position: fixed; inset: auto var(--m) calc(env(safe-area-inset-bottom) + var(--m)) var(--m); width: fit-content; 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; }
.widgets-dialog { transition: display 0.3s allow-discrete, overlay 0.3s allow-discrete; animation: settings-dialog-close 0.3s ease-in forwards; }
.widgets-dialog[open] { animation: settings-dialog-open 0.3s ease-out forwards; }

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

.widgets-table { width: 100%; min-width: min(80vw, 16rem); border-collapse: collapse; }
.widgets-table td { padding: 0.6em 0.4em; border-bottom: 1px solid var(--border); vertical-align: middle; }
.widgets-table tr:last-child td { border-bottom: none; }
.widgets-table tr.widget-row.is-dragging { position: relative; z-index: 1; opacity: 0.6; }
.widgets-table td:first-child { width: 2.5em; }
.widgets-table td:last-child { width: 2.5em; text-align: center; }
.widget-preview-cell { width: 2.4em; }
.widget-preview-cell svg { display: block; width: 1.5em; height: 1.5em; color: var(--text-light); }
.widget-drag-handle { display: inline-block; cursor: grab; font-size: 1.3em; line-height: 1; color: var(--text-light); user-select: none; touch-action: none; }
.widget-row.is-dragging .widget-drag-handle { cursor: grabbing; }
.widget-row-locked .widget-drag-handle-cell { opacity: 0.3; }

.widgets-dialog > .controls { display: flex; justify-content: space-between; margin-top: 0.5rem; }
.widgets-dialog > .controls button { cursor: pointer; }
.widgets-dialog > .controls button.cancel { font-size: 1.3em; padding: 0.5em; border: none; background-color: var(--accent2); border-radius: 0.3rem; }
.widgets-dialog > .controls button.apply { 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; }

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


/* Nutrients widget */
.nutrient-widget-title { font: inherit; font-weight: inherit; cursor: pointer; padding: var(--xs) var(--s); border: none; border-radius: var(--xs); background: var(--bg); color: inherit; text-align: left; }

.nutrient-widget-intake { font-size: 0.85em; color: var(--text-light); margin: 0.75em 0 0; }

nutrient-playground { display: flex; flex-direction: column; gap: 0.6em; margin-top: 0.75em; }

food-nutrient { display: flex; flex-direction: row; align-items: center; gap: 0.75em; padding: 0.35em 0; border-bottom: 1px solid var(--border); }
food-nutrient:last-child { border-bottom: none; }
.food-nutrient-image-wrap { line-height: 0; flex-shrink: 0; }
.food-nutrient-pic { width: 2.5em; height: 2.5em; border-radius: 50%; object-fit: cover; }
.food-nutrient-value { font-size: 0.9em; }
.food-nutrient-amount { color: var(--accent); }

/* Nutrient Picker Dialog */
.nutrient-picker-dialog::backdrop { background-color: rgba(0,0,0,0.4); animation: open 0.5s ease-in-out forwards; }
.nutrient-picker-dialog { position: fixed; inset: auto var(--m) calc(env(safe-area-inset-bottom) + var(--m)) var(--m); width: fit-content; 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; max-height: 70vh; }
.nutrient-picker-dialog { transition: display 0.3s allow-discrete, overlay 0.3s allow-discrete; animation: settings-dialog-close 0.3s ease-in forwards; }
.nutrient-picker-dialog[open] { animation: settings-dialog-open 0.3s ease-out forwards; }

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

.nutrient-picker-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.nutrient-picker-option { display: block; width: 100%; text-align: left; font: inherit; padding: 0.6em 0.4em; border: none; border-bottom: 1px solid var(--border); background: none; color: var(--text); cursor: pointer; }
.nutrient-picker-list li:last-child .nutrient-picker-option { border-bottom: none; }
.nutrient-picker-option:hover { background-color: var(--bg-light); }
.nutrient-picker-option.is-selected { font-weight: bold; color: var(--accent); }

.nutrient-picker-group-label h2 { margin: 1em 0 0.25em; }
.nutrient-picker-group-label:first-child h2 { margin-top: 0; }

@media screen and (max-width: 540px) {
   .nutrient-picker-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; display: flex; align-items: center; justify-content: center; }
.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); }

/* shared rainbow-arc background, reused by every feedback type */
.feedback-arc-svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; object-fit: cover; filter: blur(44px) drop-shadow(0 0 10px var(--feedback-glow, rgba(109, 216, 255, 0.8))); }
.feedback-arc-path { fill: none; stroke: var(--feedback-glow, #6dd8ff); stroke-width: 50; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 1.6s cubic-bezier(0.16, 1, 0.3, 1); }

/* shared "content on top of the glow" wrapper */
.feedback-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s); text-align: center; color: var(--text); padding: var(--m); }

/* colour-complete + full-rainbow */
.feedback-caption strong { display: block; font-size: 1.6rem; }
.feedback-caption span { opacity: 0.75; }
.feedback-icon-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--xs); max-width: 80vw; }
.feedback-icon-row rainbow-ingredient { opacity: 0; transform: scale(0.4); animation: feedback-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(0.6s + var(--i, 0) * 0.08s); }

/* score + streak: number counter with orbiting/stacked icons */
.feedback-counter { position: relative; display: flex; align-items: center; justify-content: center; width: min(60vw, 60vh); height: min(60vw, 60vh); }
.feedback-counter-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.feedback-counter-number { font-size: 4rem; font-weight: 800; line-height: 1; }
.feedback-counter-label { opacity: 0.75; font-size: 1rem; }
.feedback-orbit { position: absolute; inset: 0; }
.feedback-orbit-item { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: rotate(calc(360deg / var(--n, 1) * var(--i, 0))) translate(min(28vw, 28vh)) rotate(calc(-360deg / var(--n, 1) * var(--i, 0))); }
.feedback-orbit-item rainbow-ingredient { opacity: 0; transform: translate(-50%, -50%) scale(0.4); animation: feedback-orbit-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(0.5s + var(--i, 0) * 0.05s); }

/* streak flame */
.feedback-flame-big { width: 4rem; height: 4rem; animation: feedback-flame-flicker 1.4s ease-in-out infinite; }
.feedback-streak-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3em; max-width: 70vw; }
.feedback-flame-dot { width: 1.4rem; height: 1.4rem; opacity: 0; transform: scale(0.3); animation: feedback-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(0.5s + var(--i, 0) * 0.025s); }
.feedback-streak-more { align-self: center; opacity: 0.75; font-weight: 700; }

@keyframes feedback-pop-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes feedback-orbit-pop-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes feedback-flame-flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } }

/* dev-only testing panel */
.feedback-test-panel { position: fixed; left: var(--xs); bottom: calc(env(safe-area-inset-bottom) + var(--xs)); z-index: 2500; display: flex; flex-direction: column; gap: 4px; max-width: 40vw; max-height: 70vh; overflow-y: auto; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); padding: var(--xs); border-radius: var(--s); font-size: 0.65rem; color: white; }
.feedback-test-panel strong { font-size: 0.7rem; }
.feedback-test-group { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.feedback-test-group span { opacity: 0.7; width: 100%; }
.feedback-test-panel button { font-size: 0.65rem; padding: 0.2em 0.5em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); color: white; cursor: pointer; }
.feedback-test-panel button:hover { background: rgba(255, 255, 255, 0.24); }


/* 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: max(env(safe-area-inset-left), 0px); bottom: 0; bottom: env(safe-area-inset-bottom); z-index: 1000; }
.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.25s allow-discrete; animation: journal-slide-close 0.25s ease forwards; }
.rainbow-keyboard[open] { animation: journal-slide-open 0.3s ease forwards; pointer-events: all; }

@keyframes open { from { opacity: 0; } to { opacity: 1; } }
@keyframes close { from { opacity: 1; } to { opacity: 0; } }
@keyframes journal-slide-open { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes journal-slide-close { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }

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

/* grid, not the old position:fixed scrubber: a fixed-position strip had to be manually
   lined up under the header via JS (measuring the header's rendered height) and above the
   floating tracking bar, which drifted whenever the viewport/keyboard/safe-area changed.
   As a real grid column it just occupies its own track — no measurement, no drift. */
.rainbow-keyboard-sheet {
   height: 100%; min-height: 0;
   position: relative; /* anchors the absolutely-positioned scrubber label overlay */
   display: grid;
   grid-template-areas: "header header" "scrubber content";
   grid-template-rows: auto 1fr;
   grid-template-columns: var(--scrubber-width, 48px) 1fr;
}

.rainbow-keyboard-header { grid-area: header; position: relative; background-color: var(--keyboard-header-bg); }
.rainbow-keyboard-header { padding: 1em; padding-top: 1.5rem; }
.rainbow-keyboard-content { grid-area: content; padding: 0 1em 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: flex; flex-direction: column; gap: 0.5em; }

/* random large title, purely decorative — see openJournal() in eat-journal.js */
.journal-title { margin: 0; padding-right: 2.4em; font-size: clamp(1.5rem, 6vw, 2.4rem); font-weight: 800; line-height: 1.15; }

.rainbow-keyboard-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; }
.sort-tabs-label { font-size: 0.65em; font-weight: 700; }

/* segmented control: the group owns the pill shape + rounded ends, individual
   labels stay square and get clipped by the group's overflow:hidden */
.sort-tabs-group { display: inline-flex; border-radius: 999px; overflow: hidden; background-color: var(--keyboard-category-btn-bg); }
.sort-option { display: inline-flex; align-items: center; white-space: nowrap; }
.sort-option:not(:last-child) label { border-right: 1px solid var(--border); }
.sort-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.sort-option label { display: inline-flex; align-items: center; padding: 0.5em 0.9em; color: var(--text-light); font-size: 0.6em; font-weight: 700; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.sort-option label:hover { background-color: var(--keyboard-category-btn-hover-bg); }
.sort-option:has(input:checked) label { background-color: var(--accent); color: white; }

/* Colour sort tab's label: each letter in its own rainbow colour, one per letter of "Colour".
   Darkened in light mode (raw --rainbow-* stops are too light/washed-out on a light pill) and
   lightened in dark mode, with the outline stroke flipped to match — dark-on-light needs a
   light stroke, light-on-dark needs a dark one. */
.rainbow-letters { --letter-shade: black 40%; --letter-stroke: black; }
@media (prefers-color-scheme: dark) {
   .rainbow-letters { --letter-shade: white 70%; --letter-stroke: black; }
}
html[data-theme="dark"] .rainbow-letters { --letter-shade: white 70%; --letter-stroke: black; }

/* selected pill fills solid with --accent regardless of site theme, so the letters should
   always read against a dark-ish fill — force the dark-mode shade/stroke here, overriding
   whichever light/dark variant is currently active above (higher specificity than both) */
.sort-option:has(input:checked) .rainbow-letters { --letter-shade: white 70%; --letter-stroke: black; }

.rainbow-letters span:nth-child(1) { color: color-mix(in srgb, var(--rainbow-red), var(--letter-shade)); }
.rainbow-letters span:nth-child(2) { color: color-mix(in srgb, var(--rainbow-orange), var(--letter-shade)); }
.rainbow-letters span:nth-child(3) { color: color-mix(in srgb, var(--rainbow-yellow), var(--letter-shade)); }
.rainbow-letters span:nth-child(4) { color: color-mix(in srgb, var(--rainbow-green), var(--letter-shade)); }
.rainbow-letters span:nth-child(5) { color: color-mix(in srgb, var(--rainbow-blue), var(--letter-shade)); }
.rainbow-letters span:nth-child(6) { color: color-mix(in srgb, var(--rainbow-purple), var(--letter-shade)); }
.rainbow-letters span { -webkit-text-stroke: 0px var(--letter-stroke); paint-order: stroke fill; }




.rainbow-keyboard-category {  }
.rainbow-keyboard-items { columns: 1; margin-bottom: 3rem; column-gap: 0.35em; }
/* same pill styling as eat-suggestions rainbow-ingredient, for a consistent "pick an ingredient" look.
   No backdrop-filter here on purpose: eat-suggestions caps at 6 tiles, but a journal category can
   render dozens to hundreds of these at once, and Chrome's backdrop-filter compositing falls over
   at that scale (flicker, tiles disappearing, background bleeding through, worst on hover). */
.rainbow-keyboard-items rainbow-ingredient { display: flex; padding: 0.1em 1em 0.1em 0.5em; margin-bottom: 0.35em; border-radius: 1em; background-color: rgba(0, 0, 0, 0); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1); transition: background 0.3s ease-in-out; cursor: pointer; }
.rainbow-keyboard-items rainbow-ingredient:hover { background-color: var(--keyboard-hover-bg); }
/* match the tile size used in .ingredients-datetime-list (font-size: 1em there vs 1.5em inherited here) */
.rainbow-keyboard-items rainbow-ingredient { font-size: calc(1em / 1.5); }

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

.rainbow-keyboard-test-controls { position: absolute; right: var(--s); bottom: var(--s); z-index: 111; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; max-width: 40%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); padding: var(--xs); border-radius: var(--s); font-size: 0.55em; color: white; }
.rainbow-keyboard-test-controls strong { flex: 1 0 100%; font-size: 0.9em; }



/* category browsing: sticky section headings + a draggable edge scrubber (replaces the old top TOC/back-to-top link) */
.rainbow-keyboard-content { position: relative; }
/* no container padding-top: sticky elements stick relative to the scrollport's padding edge, so
   any padding-top on the scrolling container itself would show as a permanent gap above them */
.rainbow-keyboard-category-heading { position: sticky; top: 0; z-index: 15; opacity: 1; background-color: var(--keyboard-bg); padding: 0.6em 0 0.2em; }

/* icons are drawn directly as SVG <text> at computed (x,y) — pixel-precise sizing/spacing
   (see renderScrubberSVG in eat-journal.js) instead of flex/CSS trying to approximate ~40px
   touch targets across wildly different item counts (9 categories vs 26 letters).
   overflow:visible + a z-index above the content column is what lets the label group (see
   below) paint past the SVG's own narrow box and over the scrolling ingredient list. */
.category-scrubber { grid-area: scrubber; display: block; width: 100%; height: 100%; overflow: visible; touch-action: none; user-select: none; z-index: 20; }
.scrubber-icon { fill: var(--text); text-anchor: middle; dominant-baseline: central; cursor: pointer; }
.scrubber-icon.is-active { fill: var(--accent); }

/* the label lives inside the same SVG (see updateLabelGroup in eat-journal.js) rather than
   a separate floating HTML element, positioned in the SVG's own local coordinate space so it
   can never drift from the icon it's labelling. feDropShadow is the SVG-native equivalent of
   a CSS box-shadow, giving the pill legibility against whatever ingredient tile is behind it. */
.scrubber-label[hidden] { display: none; }
.scrubber-label-bg { fill: var(--keyboard-bg); }
.scrubber-label-text { fill: var(--text); font-weight: 700; font-size: 15px; text-anchor: start; dominant-baseline: central; pointer-events: none; }

.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)); display: grid; grid-template-columns: max-content 1fr; column-gap: 0.5em; }
.ingredients-datetime-empty { color: var(--text-light); margin: 0; }
.ingredients-datetime-empty-carrot { width: 1em; height: 1em; vertical-align: -0.15em; }
.ingredients-datetime-list li { display: contents; }
.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; }


/* INSTALL WEB APP */
.install-webapp-widget { position: relative; }
.install-webapp-widget h2 { padding-right: 2.2em; }
.install-webapp-widget > p { color: var(--text-light); margin: 0 0 1em; }

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

.install-webapp-tabs { display: inline-flex; flex-wrap: wrap; border-radius: 999px; overflow: hidden; background-color: var(--bg); margin-bottom: 1em; }
.install-webapp-tab { display: inline-flex; }
.install-webapp-tab input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.install-webapp-tab label { display: inline-flex; align-items: center; padding: 0.5em 1em; color: var(--text-light); font-size: 0.85em; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.install-webapp-tab:not(:last-child) label { border-right: 1px solid var(--border); }
.install-webapp-tab:has(input:checked) label { background-color: var(--accent); color: white; }

.install-webapp-panel { display: none; }
.install-webapp-screenshot { display: block; width: 100%; max-width: 220px; margin: 0 auto 1em; border-radius: 1em; box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.1); }
.install-webapp-steps { margin: 0; padding-left: 1.2em; font-size: 0.9em; }
.install-webapp-steps li { margin-bottom: 0.4em; }
.install-webapp-steps li:last-child { margin-bottom: 0; }
.install-webapp-widget:has(#install-platform-ios:checked) .install-webapp-panel[data-platform="ios"] { display: block; }
.install-webapp-widget:has(#install-platform-macos:checked) .install-webapp-panel[data-platform="macos"] { display: block; }
.install-webapp-widget:has(#install-platform-android:checked) .install-webapp-panel[data-platform="android"] { display: block; }
.install-webapp-widget:has(#install-platform-windows:checked) .install-webapp-panel[data-platform="windows"] { display: block; }


/* 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 */