/* graph.css (owner: builder A): the ingredient graph (MHGraph, shared/site/js/graph.js).
   Every colour is a token; --c is the product neon (set by graph.js). Size the graph with --mg-h on its host.
   settle: cubic-bezier(.16,1,.3,1) stations arriving   draw: cubic-bezier(.65,0,.35,1) leader lines */
.mg { position: relative; width: 100%; height: var(--mg-h, clamp(580px, 46vw, 680px)); --c: var(--accent); color: var(--text); isolation: isolate; }
.mg--page { background: radial-gradient(46% 52% at 50% 50%, rgb(var(--key) / .12), transparent 72%), radial-gradient(120% 80% at 50% 120%, var(--bg-deep), transparent 60%), var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mg--showcase { height: var(--mg-h, 100%); }
.mg-list { margin: 0; padding: 0; list-style: none; }
.mg-empty { position: absolute; left: 0; right: 0; bottom: 24px; margin: 0; text-align: center; color: var(--text-2); font-size: 15px; }

/* leader lines */
.mg-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity .4s; }
.mg-lines line { stroke: var(--c); stroke-width: 1.2; opacity: .8; transition: opacity .3s, stroke-width .3s; }
.mg-lines circle { fill: var(--c); }
.mg-lines circle.ring { fill: none; stroke: var(--c); stroke-width: 1; opacity: .55; }
.mg-lines .is-hot { opacity: 1; stroke-width: 2; filter: drop-shadow(0 0 4px var(--c)); }
.mg-prod-hot .mg-lines line { opacity: .5; }

/* the centre: the pack, big and lit. .mg-core is the real pack's outline box (.pk, window.MHPK); the cutout hangs off it
   (.pk-img) and its contact shadow sits on its base (.pk-shadow). Leaders start behind it and emerge at its silhouette. */
.mg-core { position: absolute; left: 50%; top: 50%; z-index: 2; width: 26%; height: 46%; margin: 0; transform: translate(-50%, -50%); }
.mg.is-laid .mg-core { transform: none; }
.mg-key { position: absolute; left: -70%; right: -70%; top: -26%; bottom: -14%; z-index: 0; background: radial-gradient(closest-side, rgb(var(--key) / .15), rgb(var(--key) / .05) 55%, transparent); pointer-events: none; }
.mg-glow { /* a faint, wide pool of the product's own colour where it stands */ position: absolute; left: -60%; right: -60%; bottom: -12%; height: 40%; z-index: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 10%, transparent), transparent); pointer-events: none; }
.mg-pack { filter: contrast(1.03); }
.mg-pack.pk-img { z-index: 2; }
.mg-pack:not(.pk-img) { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.mg-shadow.pk-shadow { z-index: 1; }
.mg-shadow:not(.pk-shadow) { position: absolute; left: 4%; right: 4%; bottom: -16px; z-index: 1; height: 34px; background: radial-gradient(closest-side, rgb(var(--shade) / .85), transparent); pointer-events: none; }
.mg-core--ing .mg-key { left: -30%; right: -30%; top: -30%; bottom: -30%; }

/* stations: a lens (ingredient portrait, library layer, or sample dish) and a label */
.mg-st { position: absolute; left: 0; top: 0; z-index: 3; width: var(--s, 120px); height: var(--s, 120px); transition: opacity .3s; }
.mg.is-pre .mg-st, .mg.is-pre .mg-lines { opacity: 0; }
.mg-a { position: relative; display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; border-radius: 50%; }
.mg-a:focus-visible { outline: none; }
.mg-a:focus-visible .mg-lens { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgb(var(--key) / .25); }
.mg-a:focus-visible .mg-name, .mg-a:hover .mg-name { text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mg-lens { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, var(--bg-3), var(--bg-deep) 74%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 42%, transparent), 0 0 22px color-mix(in srgb, var(--c) 16%, transparent), 0 16px 30px rgb(var(--shade) / .55);
  transition: box-shadow .4s, transform .6s var(--settle); }
.mg-a:hover .mg-lens { transform: scale(1.04); box-shadow: 0 0 0 1.5px var(--c), 0 0 30px color-mix(in srgb, var(--c) 30%, transparent), 0 18px 34px rgb(var(--shade) / .6); }
.mg-lens img { display: block; }
.mg-lens.is-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; transform: scale(1.32); transform-origin: 50% 74%; }
.mg-lens.is-layer img { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 8px 12px rgb(var(--shade) / .55)) brightness(1.05); }
.mg-lens.is-dish { display: grid; place-items: center; }
.mg-dish { width: 64%; height: 64%; border-radius: 50%; background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--tint) 82%, rgb(var(--glint))), var(--tint) 52%, color-mix(in srgb, var(--tint) 45%, rgb(var(--shade)))); box-shadow: 0 10px 20px rgb(var(--shade) / .5), inset 0 -6px 12px rgb(var(--shade) / .35); }
.mg-dish.oil { background: radial-gradient(circle at 36% 30%, rgb(var(--glint) / .75), color-mix(in srgb, var(--tint) 80%, transparent) 26%, color-mix(in srgb, var(--tint) 40%, rgb(var(--shade)))); }
.mg-dish.crystal { background: radial-gradient(circle at 30% 30%, rgb(var(--glint) / .9) 0 6%, transparent 7%), radial-gradient(circle at 62% 58%, rgb(var(--glint) / .6) 0 4%, transparent 5%), radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--tint) 82%, rgb(var(--glint))), var(--tint) 52%, color-mix(in srgb, var(--tint) 50%, rgb(var(--shade)))); }
.mg-lens.is-pack { border-radius: 0; overflow: visible; background: none; box-shadow: none; }
.mg-lens.is-pack img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 8px 8px rgb(var(--shade) / .55)); }
.mg-lens.is-pack::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -9px; height: 18px; z-index: -1; background: radial-gradient(closest-side, rgb(var(--shade) / .8), transparent); }
.mg-a:hover .mg-lens.is-pack { box-shadow: none; transform: translateY(-4px); }
.mg-lens--big { width: 100%; height: 100%; box-shadow: 0 0 0 1px var(--line-2), 0 0 60px rgb(var(--key) / .16), 0 30px 60px rgb(var(--shade) / .6); }
.mg-lens--big.is-photo img { transform: scale(1.18); }

.mg-lab { position: absolute; left: 0; top: 100%; display: grid; gap: 5px; width: 250px; pointer-events: none; }
.mg-name { font: 400 20px/1.2 var(--display); letter-spacing: -.005em; color: var(--text); }
.mg-inci { font: 400 12.5px/1.45 var(--mono); color: color-mix(in srgb, var(--c) 62%, var(--text)); letter-spacing: 0; overflow-wrap: anywhere; }
.mg-note { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.mg-go { justify-self: var(--go-align, center); margin-top: 2px; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .4s var(--settle); }
.mg-a:hover .mg-go, .mg-a:focus-visible .mg-go { opacity: .9; transform: none; }
.mg-hero { font-weight: 600; color: var(--text); }
.al-right .mg-go { --go-align: end; }
.al-left .mg-go { --go-align: start; }
.mg--compact .mg-note, .mg--compact .mg-go { display: none; }
.mg-prod .mg-note { font-size: 14px; }

/* on the wet glass the labels need a little darkness behind them */
.mg--showcase .mg-name, .mg--showcase .mg-note, .mg--showcase .mg-inci { text-shadow: 0 1px 12px rgb(var(--shade) / .95), 0 0 3px rgb(var(--shade) / .85); }
.mg--showcase .mg-note { color: color-mix(in srgb, var(--text) 92%, transparent); }

/* dim the others while one is pointed at */
.mg.has-hot .mg-st:not(.is-hot) { opacity: .55; }

/* the full ring: every ingredient in label order */
.mg-node .mg-a { border-radius: 50%; }
.mg-dot { position: absolute; inset: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 70%, transparent); }
.mg-node .mg-lab { gap: 1px; width: 260px; }
.mg-node .mg-name { display: inline; font: 500 14.5px/1.3 var(--sans); }
.mg-node .mg-inci { font-size: 11.5px; line-height: 1.3; color: color-mix(in srgb, var(--c) 45%, var(--text-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-pos { margin-right: 8px; font: 400 11.5px/1 var(--mono); color: var(--text-3); letter-spacing: 0; }
.mg-node.is-hero .mg-name { color: color-mix(in srgb, var(--c) 55%, var(--text)); }
.mg-node.is-hero .mg-lens { box-shadow: 0 0 0 1.5px var(--c), 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); }
.mg--tight .mg-node .mg-inci { display: none; }
.mg--all .mg-lines line { opacity: .38; stroke-width: 1; }
.mg--all .mg-lines line.is-hot { opacity: 1; stroke-width: 1.6; }

/* narrow stages: a readable list, no leaders */
.mg--list { height: auto; padding: 24px 18px 28px; display: grid; gap: 26px; }
.mg--list .mg-lines { display: none; }
.mg--list .mg-core { position: relative; left: auto; top: auto; transform: none; width: auto; height: min(300px, 62vw); margin: 0 auto; aspect-ratio: auto; }
.mg--list .mg-core .mg-pack:not(.pk-img) { width: auto; max-width: 70vw; margin: 0 auto; }
.mg--list .mg-core.pk { width: auto; height: calc(min(300px, 62vw) * (.55 + .45 * var(--pk-rel))); aspect-ratio: var(--pk-car); margin-bottom: 12px; }
.mg--list .mg-core--ing { width: min(240px, 60vw); height: min(240px, 60vw); }
.mg--list .mg-list { display: grid; gap: 16px; }
.mg--list .mg-st { position: relative; left: auto; top: auto; width: auto; height: auto; }
.mg--list .mg-a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; height: auto; border-radius: 0; }
.mg--list .mg-lens { width: 72px; height: 72px; }
.mg--list .mg-lens.is-pack { height: 88px; }
.mg--list .mg-lab { position: static; width: auto; text-align: left; pointer-events: auto; }
.mg--list .mg-go { display: none; }
.mg--list.mg--all .mg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.mg--list .mg-node .mg-a { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.mg--list .mg-node .mg-lens { width: 30px; height: 30px; }
.mg--list .mg-node .mg-dot { position: relative; display: block; width: 9px; height: 9px; margin: 0 auto; }
.mg--list .mg-node .mg-inci { white-space: normal; }
@media (max-width: 520px) { .mg--list.mg--all .mg-list { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .mg-lens, .mg-go, .mg-st { transition: none; }
  .mg.is-pre .mg-st, .mg.is-pre .mg-lines { opacity: 1; }
}