/* Shared by the app's nutrient-information dialog and /learn/plants pages:
   the food header (image in a rainbow-coloured circle, name, call to action)
   and <nutrient-breakdown>. Only relies on base.css tokens, so it works on the
   learn pages without eat.css. Set data-rainbow="…" (or --nb-color) on a
   wrapper to tint both. */

:root {
   /* the food's rainbow colour → circle + bar tint (the first six match eat.css) */
   --nb-rainbow-red: #ff595e;
   --nb-rainbow-orange: #ffca3a;
   --nb-rainbow-yellow: #ffea00;
   --nb-rainbow-green: #8ac926;
   --nb-rainbow-blue: #1982c4;
   --nb-rainbow-purple: #6a4c93;
   --nb-rainbow-brown: #b5651d;
   --nb-rainbow-black: #4a4a4a;
   --nb-rainbow-white: #cbd0d4;
}

/* data-rainbow="…" on a wrapper sets the tint for everything inside */
[data-rainbow="red"] { --nb-color: var(--nb-rainbow-red); }
[data-rainbow="orange"] { --nb-color: var(--nb-rainbow-orange); }
[data-rainbow="yellow"] { --nb-color: var(--nb-rainbow-yellow); }
[data-rainbow="green"] { --nb-color: var(--nb-rainbow-green); }
[data-rainbow="blue"] { --nb-color: var(--nb-rainbow-blue); }
[data-rainbow="purple"] { --nb-color: var(--nb-rainbow-purple); }
[data-rainbow="brown"] { --nb-color: var(--nb-rainbow-brown); }
[data-rainbow="black"] { --nb-color: var(--nb-rainbow-black); }
[data-rainbow="white"] { --nb-color: var(--nb-rainbow-white); }

/* ------------------------------------------------------------ food header --- */

.nb-food {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.6em;
   text-align: center;
}
.nb-food-pic {
   display: grid;
   place-items: center;
   width: 8rem;
   aspect-ratio: 1;
   border-radius: 50%;
   background: color-mix(in srgb, var(--nb-color, var(--secondary)) 22%, var(--bg-light));
}
/* a small tooltip at the circle's bottom right ("AI-generated image"), shown on
   hover, keyboard focus or tap; it stays in the accessibility tree */
.nb-food-pic:has(.nb-food-pic-tooltip) {
   position: relative;
   outline: none;
}
.nb-food-pic-tooltip {
   position: absolute;
   left: 80%;
   top: 84%;
   padding: 0.25em 0.6em;
   border-radius: 0.6em;
   background: color-mix(in srgb, var(--text) 9%, var(--bg));
   color: var(--text-light);
   font-size: 0.7rem;
   font-weight: 500;
   line-height: 1.2;
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
   transform: translateY(-4px);
   transition: opacity 0.15s ease, transform 0.15s ease;
}
.nb-food-pic:hover .nb-food-pic-tooltip,
.nb-food-pic:focus-visible .nb-food-pic-tooltip,
.nb-food-pic:focus .nb-food-pic-tooltip {
   opacity: 1;
   transform: none;
}
.nb-food-pic:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
   .nb-food-pic-tooltip { transition: none; }
}
.nb-food-pic img {
   display: block;
   width: 76%;
   height: auto;
}
.nb-food-name {
   margin: 0.2em 0 0;
   font-size: 1.6em;
   line-height: 1.15;
}
/* food names are stored lower-case ("walnut") */
.nb-food-name::first-letter {
   text-transform: uppercase;
}
.nb-food-usda {
   margin: -0.3em 0 0;
   font-size: 0.85em;
   color: var(--text-light);
}
/* a mini version of the home page's .open-app-cta: app icon + label, a dashed
   outline that grows outward on hover */
.nb-food-cta {
   display: inline-flex;
   align-items: center;
   gap: 0.45em;
   margin-top: 0.2em;
   padding: 0.15em 0.2em;
   border: none;
   border-radius: 0.3em;
   background: none;
   color: var(--text);
   font: inherit;
   font-size: 0.95em;
   font-weight: 700;
   text-decoration: none;
   cursor: pointer;
   outline: 2px dashed transparent;
   outline-offset: 0;
   transition: outline-color 0.3s ease, outline-offset 0.3s ease;
}
.nb-food-cta .app-icon {
   width: 1.35em;
   height: 1.35em;
   border-radius: 0.45em;
}
.nb-food-cta:hover,
.nb-food-cta:focus-visible {
   outline-color: #f34b2e;
   outline-offset: 0.25em;
}

/* ------------------------------------------------------ nutrient breakdown --- */

nutrient-breakdown {
   display: block;
   --nb-bar: color-mix(in srgb, var(--nb-color, var(--secondary)) 85%, var(--text));
}

.nb-visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

/* segmented "per portion / per 100 g" toggle */
.nb-toggle {
   display: flex;
   width: fit-content;
   max-width: 100%;
   margin: 0 auto var(--s);
   padding: 3px;
   gap: 2px;
   border: none;
   border-radius: 1.3em;
   background: color-mix(in srgb, var(--text) 8%, transparent);
   min-inline-size: 0;
}
/* a long portion name ("teaspoon of sesame seeds") wraps; "per 100 g" never does */
.nb-toggle-option {
   position: relative;
   display: flex;
   flex: 0 1 auto;
   min-width: 0;
}
.nb-toggle-option:last-child {
   flex: none;
}
.nb-toggle-option input {
   position: absolute;
   inset: 0;
   margin: 0;
   opacity: 0;
   cursor: pointer;
}
.nb-toggle-option span {
   display: block;
   align-self: stretch;
   padding: 0.4em 0.95em;
   border-radius: 1.1em;
   font-size: 0.9em;
   line-height: 1.25;
   text-align: center;
   color: var(--text-light);
   transition: background-color 0.15s ease, color 0.15s ease;
}
/* plain text only, so flex is safe — keeps it centred beside a wrapped label */
.nb-toggle-option:last-child span {
   display: flex;
   align-items: center;
   white-space: nowrap;
}
.nb-toggle-option small {
   font-size: 0.85em;
   opacity: 0.8;
   white-space: nowrap;
}
.nb-toggle-option input:checked + span {
   background: var(--bg-light);
   color: var(--text);
   font-weight: 600;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.nb-toggle-option input:focus-visible + span {
   outline: 2px solid var(--accent);
   outline-offset: 1px;
}

.nb-category + .nb-category {
   margin-top: var(--s);
}
.nb-category-title {
   margin: 0 0 0.3em;
   font-size: 0.8em;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--text-light);
}
.nb-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

/* name · amount · % on one line, the bar underneath */
.nb-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto 3.4em;
   grid-template-areas:
      "name amount percent"
      "bar  bar    bar";
   align-items: baseline;
   column-gap: 0.75em;
   row-gap: 0.25em;
   padding: 0.45em 0;
   border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}
.nb-name { grid-area: name; }
/* <nutrient-breakdown selectable>: a nutrient name that opens the playground,
   hinted by a small chevron (.nf-chevron, eat.css). The name sits in its own
   span (.nb-name-text) so it's one flex item — otherwise "Vitamin B" and its
   <sub>1</sub> would be split apart by the gap. */
.nb-name-button {
   display: inline-flex;
   align-items: center;
   gap: 0.3em;
   padding: 0;
   border: none;
   background: none;
   color: inherit;
   font: inherit;
   text-align: left;
   cursor: pointer;
}
.nb-name-button:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
   border-radius: 0.2em;
}
.nb-amount {
   grid-area: amount;
   font-variant-numeric: tabular-nums;
   color: var(--text-light);
   white-space: nowrap;
}
.nb-percent {
   grid-area: percent;
   text-align: right;
   font-variant-numeric: tabular-nums;
   font-weight: 600;
}
.nb-bar {
   grid-area: bar;
   display: block;
   height: 6px;
   border-radius: 3px;
   overflow: hidden;
   background: color-mix(in srgb, var(--text) 10%, transparent);
}
.nb-bar-fill {
   display: block;
   height: 100%;
   border-radius: inherit;
   background: var(--nb-bar);
   transition: width 0.3s ease;
}
/* nutrients without a recommended intake: amount only, no bar */
.nb-row.no-rdi .nb-bar { display: none; }
.nb-row.is-over .nb-percent { color: var(--nb-bar); }

.nb-empty,
.nb-footnote {
   margin: var(--s) 0 0;
   font-size: 0.85em;
   color: var(--text-light);
   text-align: center;
}

@media (prefers-reduced-motion: reduce) {
   .nb-bar-fill { transition: none; }
}