@charset "UTF-8";
/* CSS Document */



 -------------------------------------------------------
Minimal CSS (drop into /css/flavour-explorer.css)
-------------------------------------------------------
#flavour-explorer { --fx-stroke:#fff; color: var(--fx-fg, #222); }
#flavour-explorer .fx-header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
#flavour-explorer .fx-breadcrumb { display:flex; flex-wrap:wrap; gap:.5rem; font-size:.9rem; }
#flavour-explorer .fx-breadcrumb .fx-crumb { background:none; border:0; text-decoration:underline; cursor:pointer; padding:.1rem .2rem; }
#flavour-explorer .fx-chart { position:relative; max-width:100%; margin:auto; }
#flavour-explorer svg text { font-family: var(--ui-sans, system-ui, -apple-system, "Segoe UI"); letter-spacing:.01em; font-size:12px; }
#flavour-explorer svg .fx-arc { transition: filter .2s ease; }
#fx-sunburst .fx-arc.hover { filter: drop-shadow(0 2px 8px rgba(0,0,0,.12)); }

#flavour-explorer svg .label-primary { font-weight:600; }
#flavour-explorer .fx-sidepanel { margin-top:1rem; line-height:1.4; }
#flavour-explorer .fx-sidepanel h3 { font-size:1.1rem; margin:0 0 .25rem; }
#flavour-explorer .fx-sidepanel h4 { font-size:1rem; margin:.75rem 0 .25rem; }
#flavour-explorer .fx-sidepanel ul { margin:0; padding-left:1.1rem; columns: 2; column-gap: 1.5rem; }

#fx-sunburst [tabindex="-1"]:focus { outline: none; }
#fx-sunburst path:focus { outline: none; }
#fx-sunburst:focus {
  outline: none;
}
.fx-center { cursor: zoom-out; }

@media (min-width: 920px) {
  #flavour-explorer { display:grid; grid-template-columns: minmax(0,1fr) 320px; align-items:start; gap:2rem; }
  #flavour-explorer .fx-sidepanel { margin-top:0; position:sticky; top:1rem; }
}