/* Snowflake Optimizing Clustering Keys solution summary: same container
   treatment as .diet-solution-summary (pages/diet.css). The bubble chart below is a
   binary selected/not-selected scatter, same shape as
   .e-commerce-pricing-solution-summary's price/demand bubbles, so it reuses
   the same --color-admonition-title--note/--color-foreground-muted pairing
   instead of introducing new hues. */
[role="main"] .snowflake-solution-summary {
    padding: 1.2em 1.3em;
    border-radius: 0.6em;
    background: #eef1f5;
    border: 1px solid var(--color-sidebar-background-border);
}

body[data-theme="dark"] [role="main"] .snowflake-solution-summary {
    background: #15171a;
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) [role="main"] .snowflake-solution-summary {
        background: #15171a;
    }
}

/* Snowflake bubble chart (performance improvement vs. storage cost, bubble
   size = compute cost): same thin recessive gridlines/axes and hover-revealed
   tooltip pattern as .e-commerce-pricing-solution-summary's bubble chart. */
[role="main"] .snowflake-solution-summary .sf-bubble-svg {
    display: block;
    width: 100%;
    height: auto;
}

[role="main"] .snowflake-solution-summary .sf-grid {
    stroke: var(--color-background-border);
    stroke-width: 1;
}

[role="main"] .snowflake-solution-summary .sf-axis {
    stroke: var(--color-foreground-secondary);
    stroke-width: 1;
}

[role="main"] .snowflake-solution-summary .sf-tick {
    font-size: 11px;
    fill: var(--color-foreground-muted);
}

[role="main"] .snowflake-solution-summary .sf-axis-label {
    font-size: 12px;
    fill: var(--color-foreground-secondary);
}

[role="main"] .snowflake-solution-summary .sf-bubble {
    stroke: var(--color-background-primary);
    stroke-width: 1.5;
    fill-opacity: 0.85;
}

[role="main"] .snowflake-solution-summary .sf-bubble-selected {
    fill: var(--color-admonition-title--note);
}

[role="main"] .snowflake-solution-summary .sf-bubble-excluded {
    fill: var(--color-foreground-muted);
    fill-opacity: 0.55;
}

[role="main"] .snowflake-solution-summary .sf-point-label {
    font-size: 12px;
    font-weight: 600;
    fill: var(--color-foreground-primary);
    pointer-events: none;
}

[role="main"] .snowflake-solution-summary .sf-tooltip-box {
    fill: var(--color-background-primary);
    stroke: var(--color-background-border);
}

[role="main"] .snowflake-solution-summary .sf-tooltip-title {
    font-size: 11px;
    font-weight: 600;
    fill: var(--color-foreground-primary);
}

[role="main"] .snowflake-solution-summary .sf-tooltip-body {
    font-size: 10px;
    fill: var(--color-foreground-secondary);
}

[role="main"] .snowflake-solution-summary .sf-tooltip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

[role="main"] .snowflake-solution-summary .sf-point:hover .sf-tooltip,
[role="main"] .snowflake-solution-summary .sf-point:focus-within .sf-tooltip {
    opacity: 1;
}

[role="main"] .snowflake-solution-summary .sf-point circle:first-child {
    cursor: pointer;
}