/* E-Commerce Pricing solution summary: same container treatment as
   .diet-solution-summary (pages/diet.css). The price-vs-floor bars draw entirely from
   existing theme variables (--color-admonition-title--note/--danger), the
   same pairing Diet and Ad Selection use for their tightest bounds, so no
   new custom colors are needed. */
/* Single-product curve chart (Smartphone A) below reuses the same validated
   blue/aqua identity pair as .portfolio-solution-summary
   (--portfolio-stock/--portfolio-frontier), scoped here as
   --ecp-demand/--ecp-revenue rather than a new palette. The "optimal"
   reference dot reuses the revenue-curve color, the same precedent as
   Portfolio's minimum-risk-portfolio dot reusing the frontier line's color,
   rather than adding a third hue. */
[role="main"] .e-commerce-pricing-solution-summary {
    padding: 1.2em 1.3em;
    border-radius: 0.6em;
    background: #eef1f5;
    border: 1px solid var(--color-sidebar-background-border);
    --ecp-demand: #2a78d6;
    --ecp-revenue: #1baf7a;
}

body[data-theme="dark"] [role="main"] .e-commerce-pricing-solution-summary {
    background: #15171a;
    --ecp-demand: #3987e5;
    --ecp-revenue: #199e70;
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) [role="main"] .e-commerce-pricing-solution-summary {
        background: #15171a;
        --ecp-demand: #3987e5;
        --ecp-revenue: #199e70;
    }
}

/* E-Commerce Pricing single-product curve chart (Smartphone A): a linear
   demand-vs-price panel stacked over a net-revenue-vs-price panel, sharing
   one price axis — two panels rather than a dual-axis chart, since demand
   (units) and net revenue ($) are different units. */
[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-svg {
    display: block;
    width: 100%;
    height: auto;
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-grid {
    stroke: var(--color-background-border);
    stroke-width: 1;
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-axis {
    stroke: var(--color-foreground-secondary);
    stroke-width: 1;
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-tick {
    font-size: 11px;
    fill: var(--color-foreground-muted);
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-panel-title {
    font-size: 12px;
    font-weight: 600;
    fill: var(--color-foreground-primary);
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-axis-label {
    font-size: 12px;
    fill: var(--color-foreground-secondary);
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-demand-line {
    stroke: var(--ecp-demand);
    stroke-width: 2.5;
    fill: none;
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-revenue-line {
    stroke: var(--ecp-revenue);
    stroke-width: 2.5;
    fill: none;
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-infeasible {
    fill: var(--color-admonition-title--danger);
    opacity: 0.09;
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-refline {
    stroke: var(--color-foreground-muted);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-refline-floor {
    stroke: var(--color-admonition-title--danger);
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-refline-optimal {
    stroke: var(--ecp-revenue);
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-pt {
    stroke: var(--color-background-primary);
    stroke-width: 2;
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-pt-floor {
    fill: var(--color-admonition-title--danger);
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-pt-optimal {
    fill: var(--ecp-revenue);
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-pt-base {
    fill: var(--color-foreground-muted);
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-curve-ref-label {
    font-size: 11px;
    font-weight: 700;
    fill: var(--color-foreground-secondary);
}

/* E-Commerce Pricing bubble chart (price vs. demand, bubble size = net
   revenue): replaces the old static 3D bubble-chart image. Only two identity
   colors are needed (at the price floor vs. not), the same
   --color-admonition-title--note/--danger pairing already used by the bars
   above it on this page — a bubble/scatter chart is an all-pairs color form,
   so it is deliberately kept to two categories rather than one hue per
   product; each bubble also carries a direct letter label plus a hover/focus
   tooltip, so product identity never depends on color alone. Thin
   recessive gridlines/axes and hover-revealed tooltips follow the same
   pattern as .portfolio-solution-summary's efficient-frontier chart. */
[role="main"] .e-commerce-pricing-solution-summary .ecp-bubble-svg {
    display: block;
    width: 100%;
    height: auto;
}

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

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

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

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

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

[role="main"] .e-commerce-pricing-solution-summary .ecp-bubble-floor {
    fill: var(--color-admonition-title--danger);
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-bubble-above {
    fill: var(--color-admonition-title--note);
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-point-label {
    font-size: 11px;
    font-weight: 600;
    fill: var(--color-foreground-primary);
}

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

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

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

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

[role="main"] .e-commerce-pricing-solution-summary .ecp-point:hover .ecp-tooltip,
[role="main"] .e-commerce-pricing-solution-summary .ecp-point:focus-within .ecp-tooltip {
    opacity: 1;
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-point circle:first-child {
    cursor: pointer;
}

[role="main"] .e-commerce-pricing-solution-summary .ecp-legend-swatch {
    fill-opacity: 0.85;
}