/* Ad Selection solution summary: same container treatment as
   .diet-solution-summary (pages/diet.css). The per-page ad cards draw entirely from
   existing theme variables. The merged bubble-scatter chart above them
   identifies each ad by color, so it needs ten categorical identity colors
   that Furo has no variable for. Slots 1-8 are this site's own validated
   categorical order (same hex already used by Assigning Workloads'
   workload-1..8, Facility's plant colors, Portfolio's stock/frontier dots);
   slots 9-10 (teal, brown) extend that order for the two extra ad ids. Per
   the data-viz skill's own palette notes, an all-pairs scatter like this one
   cannot clear the colorblind/normal-vision separation floor past three
   raw hues in either mode — this chart compensates with two redundant,
   color-independent channels that ARE always run through the validator's
   sense of "identity never color-alone": every point carries its ad id as a
   direct text label (in text ink, not the series color) and its page as a
   distinct marker shape, so no two ads are ever distinguishable by hue alone. */
[role="main"] .ad-selection-solution-summary {
    padding: 1.2em 1.3em;
    border-radius: 0.6em;
    background: #eef1f5;
    border: 1px solid var(--color-sidebar-background-border);
    --ads-color-1: #2a78d6;
    --ads-color-2: #eb6834;
    --ads-color-3: #1baf7a;
    --ads-color-4: #eda100;
    --ads-color-5: #e87ba4;
    --ads-color-6: #008300;
    --ads-color-7: #4a3aa7;
    --ads-color-8: #e34948;
    --ads-color-9: #1093ac;
    --ads-color-10: #a16207;
    --ads-selected-border: #000000;
}

body[data-theme="dark"] [role="main"] .ad-selection-solution-summary {
    background: #15171a;
    --ads-color-1: #3987e5;
    --ads-color-2: #d95926;
    --ads-color-3: #199e70;
    --ads-color-4: #c98500;
    --ads-color-5: #d55181;
    --ads-color-6: #008300;
    --ads-color-7: #9085e9;
    --ads-color-8: #e66767;
    --ads-color-9: #1e9db8;
    --ads-color-10: #a16207;
    --ads-selected-border: #ffffff;
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) [role="main"] .ad-selection-solution-summary {
        background: #15171a;
        --ads-color-1: #3987e5;
        --ads-color-2: #d95926;
        --ads-color-3: #199e70;
        --ads-color-4: #c98500;
        --ads-color-5: #d55181;
        --ads-color-6: #008300;
        --ads-color-7: #9085e9;
        --ads-color-8: #e66767;
        --ads-color-9: #1e9db8;
        --ads-color-10: #a16207;
        --ads-selected-border: #ffffff;
    }
}

/* Ad Selection bubble-scatter chart: one merged CTR-vs-revenue plot (all
   pages together), styled like Portfolio's efficient-frontier chart (pages/portfolio.css)
   (thin recessive gridlines/axes, hover-revealed per-point tooltips). */
[role="main"] .ad-selection-solution-summary .ads-panel-bg {
    fill: var(--color-background-secondary);
}

[role="main"] .ad-selection-solution-summary .ads-panel-border {
    fill: none;
    stroke: var(--color-background-border);
    stroke-width: 1;
}

[role="main"] .ad-selection-solution-summary .ads-grid {
    stroke: var(--color-background-border);
    stroke-width: 1;
    opacity: 0.6;
}

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

[role="main"] .ad-selection-solution-summary .ads-tick {
    font-size: 10px;
    fill: var(--color-foreground-muted);
}

[role="main"] .ad-selection-solution-summary .ads-axis-label {
    font-size: 11px;
    fill: var(--color-foreground-secondary);
}

/* Revenue-direction guide: a dashed diagonal from the plot's low-CTR/low-
   revenue corner to its high/high corner, since a placement's expected
   revenue is CTR times revenue-per-click - points toward the upper right
   contribute more of both factors at once. Drawn before the point marks in
   the markup (paints first, so real data sits visually on top of it) and
   kept muted/recessive like the gridlines, so it reads as a reference axis
   rather than another data series. */
[role="main"] .ad-selection-solution-summary .ads-revenue-arrow {
    stroke: var(--color-foreground-muted);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: 0.55;
}

[role="main"] .ad-selection-solution-summary .ads-revenue-arrowhead-fill {
    fill: var(--color-foreground-muted);
    opacity: 0.55;
}

[role="main"] .ad-selection-solution-summary .ads-revenue-arrow-label {
    font-size: 11px;
    font-style: italic;
    fill: var(--color-foreground-muted);
}

/* A plain text-ink label reads fine against one background, but this label
   sits on top of whichever of the ten ad-id hues that point happens to be, so
   a single fixed color inevitably goes low-contrast against some of them
   (e.g. gray-on-yellow, gray-on-teal). White text with a dark halo instead of
   a flat fill keeps the digit readable against every hue in the palette at
   once, in both themes - the halo is what does the work, not the theme. */
[role="main"] .ad-selection-solution-summary .ads-id-label {
    font-size: 10px;
    font-weight: 400;
    fill: #ffffff;
    stroke: rgba(0, 0, 0, 0.65);
    stroke-width: 1px;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

[role="main"] .ad-selection-solution-summary .ads-color-1  { fill: var(--ads-color-1); }

[role="main"] .ad-selection-solution-summary .ads-color-2  { fill: var(--ads-color-2); }

[role="main"] .ad-selection-solution-summary .ads-color-3  { fill: var(--ads-color-3); }

[role="main"] .ad-selection-solution-summary .ads-color-4  { fill: var(--ads-color-4); }

[role="main"] .ad-selection-solution-summary .ads-color-5  { fill: var(--ads-color-5); }

[role="main"] .ad-selection-solution-summary .ads-color-6  { fill: var(--ads-color-6); }

[role="main"] .ad-selection-solution-summary .ads-color-7  { fill: var(--ads-color-7); }

[role="main"] .ad-selection-solution-summary .ads-color-8  { fill: var(--ads-color-8); }

[role="main"] .ad-selection-solution-summary .ads-color-9  { fill: var(--ads-color-9); }

[role="main"] .ad-selection-solution-summary .ads-color-10 { fill: var(--ads-color-10); }

[role="main"] .ad-selection-solution-summary [class*="ads-color-"] {
    stroke: var(--color-background-primary);
    stroke-width: 1.5;
    fill-opacity: 0.72;
}

/* Selection is a border, not a fade: every mark keeps its full ad-id color,
   and a selected mark additionally gets a thin dashed outline, so color stays
   reserved for ad identity and never doubles as a selection signal. Neither
   surface's own foreground-primary token is used directly, since the mark it
   outlines is one of ten arbitrary hues, not the page background - a plain
   black/white pair (--ads-selected-border, stepped light/dark above) reads as
   the highest-contrast neutral against every one of them, in both themes. */
[role="main"] .ad-selection-solution-summary .ads-mark-selected {
    stroke: var(--ads-selected-border);
    stroke-width: 1.75;
    stroke-dasharray: 3 2;
}

[role="main"] .ad-selection-solution-summary .ads-tooltip-box {
    fill: var(--color-background-primary);
    fill-opacity: 1;
    stroke: var(--color-background-border);
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.28));
}

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

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

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

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

/* With 40 overlapping points in one merged plot, a tooltip nested inside its
   own point's <g> would still draw at that point's position in document
   order, so a later point's opaque mark could paint over an earlier point's
   open tooltip. Every tooltip is instead appended once, after every mark, in
   a single trailing <g class="ads-tooltip-layer"> (drawn last = always on
   top), and paired back to its point purely in CSS via :has() rather than by
   DOM nesting - one rule per (point id, tooltip id) pair. */
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-1:hover) #adtip-1,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-1:focus-within) #adtip-1 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-2:hover) #adtip-2,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-2:focus-within) #adtip-2 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-3:hover) #adtip-3,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-3:focus-within) #adtip-3 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-4:hover) #adtip-4,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-4:focus-within) #adtip-4 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-5:hover) #adtip-5,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-5:focus-within) #adtip-5 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-6:hover) #adtip-6,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-6:focus-within) #adtip-6 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-7:hover) #adtip-7,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-7:focus-within) #adtip-7 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-8:hover) #adtip-8,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-8:focus-within) #adtip-8 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-9:hover) #adtip-9,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-9:focus-within) #adtip-9 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-10:hover) #adtip-10,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-10:focus-within) #adtip-10 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-11:hover) #adtip-11,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-11:focus-within) #adtip-11 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-12:hover) #adtip-12,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-12:focus-within) #adtip-12 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-13:hover) #adtip-13,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-13:focus-within) #adtip-13 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-14:hover) #adtip-14,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-14:focus-within) #adtip-14 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-15:hover) #adtip-15,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-15:focus-within) #adtip-15 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-16:hover) #adtip-16,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-16:focus-within) #adtip-16 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-17:hover) #adtip-17,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-17:focus-within) #adtip-17 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-18:hover) #adtip-18,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-18:focus-within) #adtip-18 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-19:hover) #adtip-19,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-19:focus-within) #adtip-19 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-20:hover) #adtip-20,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-20:focus-within) #adtip-20 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-21:hover) #adtip-21,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-21:focus-within) #adtip-21 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-22:hover) #adtip-22,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-22:focus-within) #adtip-22 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-23:hover) #adtip-23,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-23:focus-within) #adtip-23 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-24:hover) #adtip-24,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-24:focus-within) #adtip-24 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-25:hover) #adtip-25,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-25:focus-within) #adtip-25 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-26:hover) #adtip-26,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-26:focus-within) #adtip-26 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-27:hover) #adtip-27,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-27:focus-within) #adtip-27 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-28:hover) #adtip-28,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-28:focus-within) #adtip-28 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-29:hover) #adtip-29,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-29:focus-within) #adtip-29 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-30:hover) #adtip-30,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-30:focus-within) #adtip-30 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-31:hover) #adtip-31,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-31:focus-within) #adtip-31 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-32:hover) #adtip-32,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-32:focus-within) #adtip-32 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-33:hover) #adtip-33,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-33:focus-within) #adtip-33 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-34:hover) #adtip-34,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-34:focus-within) #adtip-34 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-35:hover) #adtip-35,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-35:focus-within) #adtip-35 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-36:hover) #adtip-36,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-36:focus-within) #adtip-36 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-37:hover) #adtip-37,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-37:focus-within) #adtip-37 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-38:hover) #adtip-38,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-38:focus-within) #adtip-38 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-39:hover) #adtip-39,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-39:focus-within) #adtip-39 {
    opacity: 1;
}

[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-40:hover) #adtip-40,
[role="main"] .ad-selection-solution-summary .ads-scatter-svg:has(#adpt-40:focus-within) #adtip-40 {
    opacity: 1;
}